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
11 KiB
1 lines
11 KiB
{"ast":null,"code":"import { defineComponent, inject, ref, computed, unref, provide, nextTick, resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';\nimport { ElCollectionItem, ROVING_FOCUS_COLLECTION_INJECTION_KEY as COLLECTION_INJECTION_KEY } from './roving-focus-group.mjs';\nimport { ROVING_FOCUS_GROUP_INJECTION_KEY, ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY } from './tokens.mjs';\nimport { getFocusIntent, reorderArray, focusFirst } from './utils.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useId } from '../../../hooks/use-id/index.mjs';\nimport { composeEventHandlers } from '../../../utils/dom/event.mjs';\nimport { EVENT_CODE } from '../../../constants/aria.mjs';\nconst _sfc_main = defineComponent({\n components: {\n ElRovingFocusCollectionItem: ElCollectionItem\n },\n props: {\n focusable: {\n type: Boolean,\n default: true\n },\n active: {\n type: Boolean,\n default: false\n }\n },\n emits: [\"mousedown\", \"focus\", \"keydown\"],\n setup(props, {\n emit\n }) {\n const {\n currentTabbedId,\n loop,\n onItemFocus,\n onItemShiftTab\n } = inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);\n const {\n getItems\n } = inject(COLLECTION_INJECTION_KEY, void 0);\n const id = useId();\n const rovingFocusGroupItemRef = ref(null);\n const handleMousedown = composeEventHandlers(e => {\n emit(\"mousedown\", e);\n }, e => {\n if (!props.focusable) {\n e.preventDefault();\n } else {\n onItemFocus(unref(id));\n }\n });\n const handleFocus = composeEventHandlers(e => {\n emit(\"focus\", e);\n }, () => {\n onItemFocus(unref(id));\n });\n const handleKeydown = composeEventHandlers(e => {\n emit(\"keydown\", e);\n }, e => {\n const {\n code,\n shiftKey,\n target,\n currentTarget\n } = e;\n if (code === EVENT_CODE.tab && shiftKey) {\n onItemShiftTab();\n return;\n }\n if (target !== currentTarget) return;\n const focusIntent = getFocusIntent(e);\n if (focusIntent) {\n e.preventDefault();\n const items = getItems().filter(item => item.focusable);\n let elements = items.map(item => item.ref);\n switch (focusIntent) {\n case \"last\":\n {\n elements.reverse();\n break;\n }\n case \"prev\":\n case \"next\":\n {\n if (focusIntent === \"prev\") {\n elements.reverse();\n }\n const currentIdx = elements.indexOf(currentTarget);\n elements = loop.value ? reorderArray(elements, currentIdx + 1) : elements.slice(currentIdx + 1);\n break;\n }\n }\n nextTick(() => {\n focusFirst(elements);\n });\n }\n });\n const isCurrentTab = computed(() => currentTabbedId.value === unref(id));\n provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\n rovingFocusGroupItemRef,\n tabIndex: computed(() => unref(isCurrentTab) ? 0 : -1),\n handleMousedown,\n handleFocus,\n handleKeydown\n });\n return {\n id,\n handleKeydown,\n handleFocus,\n handleMousedown\n };\n }\n});\nfunction _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {\n const _component_el_roving_focus_collection_item = resolveComponent(\"el-roving-focus-collection-item\");\n return openBlock(), createBlock(_component_el_roving_focus_collection_item, {\n id: _ctx.id,\n focusable: _ctx.focusable,\n active: _ctx.active\n }, {\n default: withCtx(() => [renderSlot(_ctx.$slots, \"default\")]),\n _: 3\n }, 8, [\"id\", \"focusable\", \"active\"]);\n}\nvar ElRovingFocusItem = /* @__PURE__ */_export_sfc(_sfc_main, [[\"render\", _sfc_render], [\"__file\", \"roving-focus-item.vue\"]]);\nexport { ElRovingFocusItem as default };","map":{"version":3,"names":["_sfc_main","defineComponent","components","ElRovingFocusCollectionItem","ElCollectionItem","props","focusable","type","Boolean","default","active","emits","setup","emit","currentTabbedId","loop","onItemFocus","onItemShiftTab","inject","ROVING_FOCUS_GROUP_INJECTION_KEY","getItems","COLLECTION_INJECTION_KEY","id","useId","rovingFocusGroupItemRef","ref","handleMousedown","composeEventHandlers","e","preventDefault","unref","handleFocus","handleKeydown","code","shiftKey","target","currentTarget","EVENT_CODE","tab","focusIntent","getFocusIntent","items","filter","item","elements","map","reverse","currentIdx","indexOf","value","reorderArray","slice","nextTick","focusFirst","isCurrentTab","computed","provide","ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY","tabIndex","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_component_el_roving_focus_collection_item","resolveComponent","openBlock","createBlock","withCtx","renderSlot","$slots","_","ElRovingFocusItem","_export_sfc"],"sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\n <el-roving-focus-collection-item\n :id=\"id\"\n :focusable=\"focusable\"\n :active=\"active\"\n >\n <slot />\n </el-roving-focus-collection-item>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n inject,\n nextTick,\n provide,\n ref,\n unref,\n} from 'vue'\nimport { useId } from '@element-plus/hooks'\nimport { composeEventHandlers } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n ElCollectionItem as ElRovingFocusCollectionItem,\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n} from './roving-focus-group'\nimport {\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\nimport { focusFirst, getFocusIntent, reorderArray } from './utils'\n\nexport default defineComponent({\n components: {\n ElRovingFocusCollectionItem,\n },\n props: {\n focusable: {\n type: Boolean,\n default: true,\n },\n active: {\n type: Boolean,\n default: false,\n },\n },\n emits: ['mousedown', 'focus', 'keydown'],\n setup(props, { emit }) {\n const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = inject(\n ROVING_FOCUS_GROUP_INJECTION_KEY,\n undefined\n )!\n\n const { getItems } = inject(\n ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n undefined\n )!\n\n const id = useId()\n const rovingFocusGroupItemRef = ref<HTMLElement | null>(null)\n\n const handleMousedown = composeEventHandlers(\n (e: Event) => {\n emit('mousedown', e)\n },\n (e) => {\n if (!props.focusable) {\n e.preventDefault()\n } else {\n onItemFocus(unref(id))\n }\n }\n )\n\n const handleFocus = composeEventHandlers(\n (e: Event) => {\n emit('focus', e)\n },\n () => {\n onItemFocus(unref(id))\n }\n )\n\n const handleKeydown = composeEventHandlers(\n (e: Event) => {\n emit('keydown', e)\n },\n (e) => {\n const { code, shiftKey, target, currentTarget } = e as KeyboardEvent\n if (code === EVENT_CODE.tab && shiftKey) {\n onItemShiftTab()\n return\n }\n if (target !== currentTarget) return\n const focusIntent = getFocusIntent(e as KeyboardEvent)\n\n if (focusIntent) {\n e.preventDefault()\n const items = getItems<typeof props>().filter(\n (item) => item.focusable\n )\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(currentTarget as HTMLElement)\n elements = loop.value\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\n const isCurrentTab = computed(() => currentTabbedId.value === unref(id))\n\n provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\n rovingFocusGroupItemRef,\n tabIndex: computed(() => (unref(isCurrentTab) ? 0 : -1)),\n handleMousedown,\n handleFocus,\n handleKeydown,\n })\n\n return {\n id,\n handleKeydown,\n handleFocus,\n handleMousedown,\n }\n },\n})\n</script>\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|