You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
7.3 KiB
1 lines
7.3 KiB
{"ast":null,"code":"import { getCurrentInstance, shallowRef, ref, watch, onMounted } from 'vue';\nimport { useEventListener } from '@vueuse/core';\nimport { isElement } from '../../utils/types.mjs';\nimport { isFunction } from '@vue/shared';\nfunction useFocusController(target, {\n beforeFocus,\n afterFocus,\n beforeBlur,\n afterBlur\n} = {}) {\n const instance = getCurrentInstance();\n const {\n emit\n } = instance;\n const wrapperRef = shallowRef();\n const isFocused = ref(false);\n const handleFocus = event => {\n const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false;\n if (cancelFocus || isFocused.value) return;\n isFocused.value = true;\n emit(\"focus\", event);\n afterFocus == null ? void 0 : afterFocus();\n };\n const handleBlur = event => {\n var _a;\n const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;\n if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget))) return;\n isFocused.value = false;\n emit(\"blur\", event);\n afterBlur == null ? void 0 : afterBlur();\n };\n const handleClick = () => {\n var _a, _b;\n if (((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement) return;\n (_b = target.value) == null ? void 0 : _b.focus();\n };\n watch(wrapperRef, el => {\n if (el) {\n el.setAttribute(\"tabindex\", \"-1\");\n }\n });\n useEventListener(wrapperRef, \"focus\", handleFocus, true);\n useEventListener(wrapperRef, \"blur\", handleBlur, true);\n useEventListener(wrapperRef, \"click\", handleClick, true);\n if (process.env.NODE_ENV === \"test\") {\n onMounted(() => {\n const targetEl = isElement(target.value) ? target.value : document.querySelector(\"input,textarea\");\n if (targetEl) {\n useEventListener(targetEl, \"focus\", handleFocus, true);\n useEventListener(targetEl, \"blur\", handleBlur, true);\n }\n });\n }\n return {\n isFocused,\n wrapperRef,\n handleFocus,\n handleBlur\n };\n}\nexport { useFocusController };","map":{"version":3,"names":["useFocusController","target","beforeFocus","afterFocus","beforeBlur","afterBlur","instance","getCurrentInstance","emit","wrapperRef","shallowRef","isFocused","ref","handleFocus","event","cancelFocus","isFunction","value","handleBlur","_a","cancelBlur","relatedTarget","contains","handleClick","_b","document","activeElement","focus","watch","el","setAttribute","useEventListener","process","env","NODE_ENV","onMounted","targetEl","isElement","querySelector"],"sources":["../../../../../packages/hooks/use-focus-controller/index.ts"],"sourcesContent":["import { getCurrentInstance, onMounted, ref, shallowRef, watch } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isElement, isFunction } from '@element-plus/utils'\nimport type { ShallowRef } from 'vue'\n\ninterface UseFocusControllerOptions {\n /**\n * return true to cancel focus\n * @param event FocusEvent\n */\n beforeFocus?: (event: FocusEvent) => boolean | undefined\n afterFocus?: () => void\n /**\n * return true to cancel blur\n * @param event FocusEvent\n */\n beforeBlur?: (event: FocusEvent) => boolean | undefined\n afterBlur?: () => void\n}\n\nexport function useFocusController<T extends { focus: () => void }>(\n target: ShallowRef<T | undefined>,\n {\n beforeFocus,\n afterFocus,\n beforeBlur,\n afterBlur,\n }: UseFocusControllerOptions = {}\n) {\n const instance = getCurrentInstance()!\n const { emit } = instance\n const wrapperRef = shallowRef<HTMLElement>()\n const isFocused = ref(false)\n\n const handleFocus = (event: FocusEvent) => {\n const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false\n if (cancelFocus || isFocused.value) return\n isFocused.value = true\n emit('focus', event)\n afterFocus?.()\n }\n\n const handleBlur = (event: FocusEvent) => {\n const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false\n if (\n cancelBlur ||\n (event.relatedTarget &&\n wrapperRef.value?.contains(event.relatedTarget as Node))\n )\n return\n\n isFocused.value = false\n emit('blur', event)\n afterBlur?.()\n }\n\n const handleClick = () => {\n if (\n wrapperRef.value?.contains(document.activeElement) &&\n wrapperRef.value !== document.activeElement\n )\n return\n\n target.value?.focus()\n }\n\n watch(wrapperRef, (el) => {\n if (el) {\n el.setAttribute('tabindex', '-1')\n }\n })\n\n useEventListener(wrapperRef, 'focus', handleFocus, true)\n useEventListener(wrapperRef, 'blur', handleBlur, true)\n useEventListener(wrapperRef, 'click', handleClick, true)\n\n // only for test\n if (process.env.NODE_ENV === 'test') {\n onMounted(() => {\n const targetEl = isElement(target.value)\n ? target.value\n : document.querySelector('input,textarea')\n\n if (targetEl) {\n useEventListener(targetEl, 'focus', handleFocus, true)\n useEventListener(targetEl, 'blur', handleBlur, true)\n }\n })\n }\n\n return {\n isFocused,\n /** Avoid using wrapperRef and handleFocus/handleBlur together */\n wrapperRef,\n handleFocus,\n handleBlur,\n }\n}\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|