hongluan-ui/es/components/roving-focus-group/src/roving-focus-item.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"roving-focus-item.mjs","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\n  <hl-roving-focus-collection-item\n    :id=\"id\"\n    :focusable=\"focusable\"\n    :active=\"active\"\n  >\n    <slot></slot>\n  </hl-roving-focus-collection-item>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  ref,\n  unref,\n  nextTick,\n  provide,\n} from 'vue'\nimport { useId } from '@hongluan-ui/hooks'\nimport { composeEventHandlers } from '@hongluan-ui/utils'\nimport { EVENT_CODE } from '@hongluan-ui/constants'\nimport {\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  HlCollectionItem as HlRovingFocusCollectionItem,\n} from './roving-focus-group'\nimport {\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\nimport { getFocusIntent, reorderArray, focusFirst } from './utils'\n\nexport default defineComponent({\n  components: {\n    HlRovingFocusCollectionItem,\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 { key, shiftKey, target, currentTarget } = e as KeyboardEvent\n        if (key === 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"],"names":["HlRovingFocusCollectionItem","ROVING_FOCUS_COLLECTION_INJECTION_KEY","_createBlock","_renderSlot"],"mappings":";;;;;;;;;;;;AAiCA,MAAK,YAAa,gBAAa;AAAA,EAC7B,YAAY;AAAA,iCACVA;AAAA;AACF,EACA,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AACX,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AACX;AACF,EACA,OAAO,CAAC,aAAa,SAAS,SAAS;AAAA,EACvC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,iBAAiB,MAAM,aAAa,mBAAmB,OAC7D,kCACA,MACF;AAEA,UAAM,EAAE,aAAa,OACnBC,0BACA,MACF;AAEA,UAAM,KAAK;AACX,UAAM,0BAA0B,IAAwB,IAAI;AAE5D,UAAM,kBAAkB,qBACtB,CAAC,MAAa;AACZ,WAAK,aAAa,CAAC;AAAA,OAErB,OAAK;AACH,UAAI,CAAC,MAAM,WAAW;AACpB,UAAE;AAAe,aACZ;AACL,oBAAY,MAAM,EAAE,CAAC;AAAA;AACvB,KAEJ;AAEA,UAAM,cAAc,qBAClB,CAAC,MAAa;AACZ,WAAK,SAAS,CAAC;AAAA,OAEjB,MAAM;AACJ,kBAAY,MAAM,EAAE,CAAC;AAAA,KAEzB;AAEA,UAAM,gBAAgB,qBACpB,CAAC,MAAa;AACZ,WAAK,WAAW,CAAC;AAAA,OAEnB,OAAK;AACH,YAAM,EAAE,KAAK,UAAU,QAAQ,kBAAkB;AACjD,UAAI,QAAQ,WAAW,OAAO,UAAU;AACtC;AACA;AAAA;AAEF,UAAI,WAAW;AAAe;AAC9B,YAAM,cAAc,eAAe,CAAkB;AAErD,UAAI,aAAa;AACf,UAAE;AACF,cAAM,QAAQ,WAAyB,OACrC,UAAQ,KAAK,SACf;AAEA,YAAI,WAAW,MAAM,IAAI,UAAQ,KAAK,GAAG;AAEzC,gBAAQ;AAAA,eACD,QAAQ;AACX,qBAAS;AACT;AAAA;AACF,eACK;AAAA,eACA,QAAQ;AACX,gBAAI,gBAAgB,QAAQ;AAC1B,uBAAS;AAAQ;AAEnB,kBAAM,aAAa,SAAS,QAAQ,aAA4B;AAChE,uBAAW,KAAK,QACZ,aAAa,UAAU,aAAa,CAAC,IACrC,SAAS,MAAM,aAAa,CAAC;AACjC;AAAA;AACF,mBACS;AACP;AAAA;AACF;AAGF,iBAAS,MAAM;AACb,qBAAW,QAAQ;AAAA,SACpB;AAAA;AACH,KAEJ;AAEA,UAAM,eAAe,SAAS,MAAM,gBAAgB,UAAU,MAAM,EAAE,CAAC;AAEvE,YAAQ,uCAAuC;AAAA,MAC7C;AAAA,MACA,UAAU,SAAS,MAAO,MAAM,YAAY,IAAI,IAAI,EAAG;AAAA,MACvD;AAAA,MACA;AAAA,MACA;AAAA,KACD;AAED,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;sBArJCC,YAMkC;AAAA,IAL/B,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,QAAQ;AAAA;qBAET,MAAa;AAAA,MAAbC,WAAa;AAAA;;;;;;;;"}