element-plus
Version:
A Component Library for Vue 3
1 lines • 9.64 kB
Source Map (JSON)
{"version":3,"file":"roving-focus-group-impl.vue2.mjs","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group-impl.vue"],"sourcesContent":["<template>\n <slot />\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n inject,\n nextTick,\n provide,\n readonly,\n ref,\n toRef,\n unref,\n watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { composeEventHandlers } from '@element-plus/utils'\nimport {\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n rovingFocusGroupProps,\n} from './roving-focus-group'\nimport { ROVING_FOCUS_GROUP_INJECTION_KEY } from './tokens'\nimport { focusFirst, getFocusIntent, reorderArray } from './utils'\n\nimport type { StyleValue } from 'vue'\n\nconst CURRENT_TAB_ID_CHANGE_EVT = 'currentTabIdChange'\nconst ENTRY_FOCUS_EVT = 'rovingFocusGroup.entryFocus'\nconst EVT_OPTS: EventInit = { bubbles: false, cancelable: true }\n\nexport default defineComponent({\n name: 'ElRovingFocusGroupImpl',\n inheritAttrs: false,\n props: rovingFocusGroupProps,\n emits: [CURRENT_TAB_ID_CHANGE_EVT, 'entryFocus'],\n setup(props, { emit }) {\n const currentTabbedId = ref<string | null>(\n (props.currentTabId || props.defaultCurrentTabId) ?? null\n )\n const isBackingOut = ref(false)\n const isClickFocus = ref(false)\n const rovingFocusGroupRef = ref<HTMLElement>()\n const { getItems } = inject(\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n undefined\n )!\n const rovingFocusGroupRootStyle = computed(() => {\n // casting to any for fix compiler error since HTMLElement.StyleValue does not\n // support CSSProperties\n return [\n {\n outline: 'none',\n },\n props.style as StyleValue,\n ] as any\n })\n\n const onItemFocus = (tabbedId: string) => {\n emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId)\n }\n\n const onItemShiftTab = () => {\n isBackingOut.value = true\n }\n\n const onMousedown = composeEventHandlers(\n (e: Event) => {\n props.onMousedown?.(e)\n },\n () => {\n isClickFocus.value = true\n }\n )\n\n const onFocus = composeEventHandlers(\n (e: FocusEvent) => {\n props.onFocus?.(e)\n },\n (e) => {\n const isKeyboardFocus = !unref(isClickFocus)\n const { target, currentTarget } = e\n if (\n target === currentTarget &&\n isKeyboardFocus &&\n !unref(isBackingOut)\n ) {\n const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS)\n currentTarget?.dispatchEvent(entryFocusEvt)\n\n if (!entryFocusEvt.defaultPrevented) {\n const items = getItems<{\n id: string\n focusable: boolean\n active: boolean\n }>().filter((item) => item.focusable)\n const activeItem = items.find((item) => item.active)\n const currentItem = items.find(\n (item) => item.id === unref(currentTabbedId)\n )\n const candidates = [activeItem!, currentItem!, ...items].filter(\n Boolean\n )\n const candidateNodes = candidates.map((item) => item.ref!)\n focusFirst(candidateNodes)\n }\n }\n\n isClickFocus.value = false\n }\n )\n\n const onBlur = composeEventHandlers(\n (e: Event) => {\n props.onBlur?.(e)\n },\n () => {\n isBackingOut.value = false\n }\n )\n\n const handleEntryFocus = (...args: any[]) => {\n emit('entryFocus', ...args)\n }\n\n const onKeydown = (e: KeyboardEvent) => {\n const focusIntent = getFocusIntent(e as KeyboardEvent)\n\n if (focusIntent) {\n e.preventDefault()\n const items = getItems<{\n id: string\n focusable: boolean\n active: boolean\n }>().filter((item) => item.focusable)\n\n let elements = items.map((item) => item.ref!)\n\n switch (focusIntent) {\n case 'last': {\n elements.reverse()\n break\n }\n case 'prev':\n case 'next': {\n if (focusIntent === 'prev') {\n elements.reverse()\n }\n const currentIdx = elements.indexOf(e.currentTarget as HTMLElement)\n elements = props.loop\n ? reorderArray(elements, currentIdx + 1)\n : elements.slice(currentIdx + 1)\n break\n }\n default: {\n break\n }\n }\n\n nextTick(() => {\n focusFirst(elements)\n })\n }\n }\n\n provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {\n currentTabbedId: readonly(currentTabbedId),\n loop: toRef(props, 'loop'),\n tabIndex: computed(() => {\n return unref(isBackingOut) ? -1 : 0\n }),\n rovingFocusGroupRef,\n rovingFocusGroupRootStyle,\n orientation: toRef(props, 'orientation'),\n dir: toRef(props, 'dir'),\n onItemFocus,\n onItemShiftTab,\n onBlur,\n onFocus,\n onMousedown,\n onKeydown,\n })\n\n watch(\n () => props.currentTabId,\n (val) => {\n currentTabbedId.value = val ?? null\n }\n )\n\n useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus)\n },\n})\n</script>\n"],"names":["ROVING_FOCUS_COLLECTION_INJECTION_KEY","_a"],"mappings":"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"}