{"version":3,"file":"roving-focus-item.mjs","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\r\n  <sg-roving-focus-collection-item\r\n    :id=\"id\"\r\n    :focusable=\"focusable\"\r\n    :active=\"active\"\r\n  >\r\n    <slot />\r\n  </sg-roving-focus-collection-item>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  inject,\r\n  ref,\r\n  unref,\r\n  nextTick,\r\n  provide,\r\n} from 'vue'\r\nimport { useId } from '@sgui-plus/hooks'\r\nimport { composeEventHandlers } from '@sgui-plus/utils/dom'\r\nimport { EVENT_CODE } from '@sgui-plus/utils/aria'\r\nimport {\r\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\r\n  SgCollectionItem as SgRovingFocusCollectionItem,\r\n} from './roving-focus-group'\r\nimport {\r\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\r\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\r\n} from './tokens'\r\nimport { getFocusIntent, reorderArray, focusFirst } from './utils'\r\n\r\nexport default defineComponent({\r\n  components: {\r\n    SgRovingFocusCollectionItem,\r\n  },\r\n  props: {\r\n    focusable: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    active: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  emits: ['mousedown', 'focus', 'keydown'],\r\n  setup(props, { emit }) {\r\n    const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = inject(\r\n      ROVING_FOCUS_GROUP_INJECTION_KEY,\r\n      undefined\r\n    )!\r\n\r\n    const { getItems } = inject(\r\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\r\n      undefined\r\n    )!\r\n\r\n    const id = useId()\r\n    const rovingFocusGroupItemRef = ref<HTMLElement | null>(null)\r\n\r\n    const handleMousedown = composeEventHandlers(\r\n      (e: Event) => {\r\n        emit('mousedown', e)\r\n      },\r\n      (e) => {\r\n        if (!props.focusable) {\r\n          e.preventDefault()\r\n        } else {\r\n          onItemFocus(unref(id))\r\n        }\r\n      }\r\n    )\r\n\r\n    const handleFocus = composeEventHandlers(\r\n      (e: Event) => {\r\n        emit('focus', e)\r\n      },\r\n      () => {\r\n        onItemFocus(unref(id))\r\n      }\r\n    )\r\n\r\n    const handleKeydown = composeEventHandlers(\r\n      (e: Event) => {\r\n        emit('keydown', e)\r\n      },\r\n      (e) => {\r\n        const { key, shiftKey, target, currentTarget } = e as KeyboardEvent\r\n        if (key === EVENT_CODE.tab && shiftKey) {\r\n          onItemShiftTab()\r\n          return\r\n        }\r\n        if (target !== currentTarget) return\r\n        const focusIntent = getFocusIntent(e as KeyboardEvent)\r\n\r\n        if (focusIntent) {\r\n          e.preventDefault()\r\n          const items = getItems<typeof props>().filter(\r\n            (item) => item.focusable\r\n          )\r\n\r\n          let elements = items.map((item) => item.ref!)\r\n\r\n          switch (focusIntent) {\r\n            case 'last': {\r\n              elements.reverse()\r\n              break\r\n            }\r\n            case 'prev':\r\n            case 'next': {\r\n              if (focusIntent === 'prev') {\r\n                elements.reverse()\r\n              }\r\n              const currentIdx = elements.indexOf(currentTarget as HTMLElement)\r\n              elements = loop.value\r\n                ? reorderArray(elements, currentIdx + 1)\r\n                : elements.slice(currentIdx + 1)\r\n              break\r\n            }\r\n            default: {\r\n              break\r\n            }\r\n          }\r\n\r\n          nextTick(() => {\r\n            focusFirst(elements)\r\n          })\r\n        }\r\n      }\r\n    )\r\n\r\n    const isCurrentTab = computed(() => currentTabbedId.value === unref(id))\r\n\r\n    provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\r\n      rovingFocusGroupItemRef,\r\n      tabIndex: computed(() => (unref(isCurrentTab) ? 0 : -1)),\r\n      handleMousedown,\r\n      handleFocus,\r\n      handleKeydown,\r\n    })\r\n\r\n    return {\r\n      id,\r\n      handleKeydown,\r\n      handleFocus,\r\n      handleMousedown,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock"],"mappings":";;;;;AAOoC,EAAA,MAAA,0CAAA,GAAAA,gBAAA,CAAA,iCAAA,CAAA,CAAA;AAJ/B,EAAA,OAAAC,SAAA,EAAoB,EAAAC,WAAA,CAAA,0CAAA,EAAA;AAAA,IACpB,EAAQ,EAAA,IAAA,CAAA,EAAA;AAAA,IAAA,SAAA,EAAA,IAAA,CAAA,SAAA;;;;;;;;;;;;;"}