element-plus/es/components/roving-focus-group/src/roving-focus-item.vue.mjs.map

A Component Library for Vue 3

{"version":3,"file":"roving-focus-item.vue.mjs","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 { computed, defineComponent, inject, provide, ref, unref } from 'vue'\nimport { useId } from '@element-plus/hooks'\nimport { composeEventHandlers, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElCollectionItem as ElRovingFocusCollectionItem } from './roving-focus-group'\nimport {\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\n\nexport default defineComponent({\n  components: {\n    ElRovingFocusCollectionItem,\n  },\n  props: {\n    focusable: {\n      type: Boolean,\n      default: true,\n    },\n    active: Boolean,\n  },\n  emits: ['mousedown', 'focus', 'keydown'],\n  setup(props, { emit }) {\n    const { currentTabbedId, onItemFocus, onItemShiftTab, onKeydown } = inject(\n      ROVING_FOCUS_GROUP_INJECTION_KEY,\n      undefined\n    )!\n\n    const id = useId()\n    const rovingFocusGroupItemRef = ref<HTMLElement>()\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 { shiftKey, target, currentTarget } = e as KeyboardEvent\n        const code = getEventCode(e as KeyboardEvent)\n\n        if (code === EVENT_CODE.tab && shiftKey) {\n          onItemShiftTab()\n          return\n        }\n        if (target !== currentTarget) return\n        onKeydown(e as KeyboardEvent)\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"],"names":["_createBlock","_renderSlot"],"mappings":";;;;;;sBACEA,WAAA,CAMkC,0CAAA,EAAA;AAAA,IAL/B,IAAI,IAAA,CAAA,EAAA;AAAA,IACJ,WAAW,IAAA,CAAA,SAAA;AAAA,IACX,QAAQ,IAAA,CAAA;AAAA,GAAA,EAAA;AAAA,qBAET,MAAQ;AAAA,MAARC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;AAAA,KAAA,CAAA;AAAA;;;;;;;;"}