npm - @treeui/vue - Versions diffs - 0.17.0 → 0.18.0 - Mend

@treeui/vue 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/dist/components/TModal.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TModal.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n createId,\n focusFirst,\n focusLast,\n getFocusableElements,\n isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n defineProps<{\n open?: boolean;\n defaultOpen?: boolean;\n disabled?: boolean;\n size?: TSize;\n title?: string;\n description?: string;\n closeOnEscape?: boolean;\n closeOnOverlay?: boolean;\n showCloseButton?: boolean;\n closeLabel?: string;\n id?: string;\n }>(),\n {\n open: undefined,\n defaultOpen: false,\n disabled: false,\n size: 'md',\n title: '',\n description: '',\n closeOnEscape: true,\n closeOnOverlay: true,\n showCloseButton: true,\n closeLabel: 'Close modal',\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-description`;\nconst rootRef = ref<HTMLElement \| null>(null);\nconst surfaceRef = ref<HTMLElement \| null>(null);\nconst previousFocusedElement = ref<HTMLElement \| null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title \|\| slots.header));\n\nconst slots = defineSlots<{\n default?: () => unknown;\n trigger?: () => unknown;\n header?: () => unknown;\n content?: () => unknown;\n footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-modal', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\nconst surfaceClasses = computed(() => [\n 't-modal__surface',\n `t-modal__surface--${props.size}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n if (typeof document === 'undefined') {\n return;\n }\n\n if (openOverlayCount === 0) {\n previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n if (typeof document === 'undefined' \|\| openOverlayCount === 0) {\n return;\n }\n\n openOverlayCount -= 1;\n\n if (openOverlayCount === 0) {\n document.body.style.overflow = previousBodyOverflow;\n }\n};\n\nconst focusSurface = () => {\n nextTick(() => {\n if (!surfaceRef.value) {\n return;\n }\n\n const focused = focusFirst(surfaceRef.value);\n if (!focused) {\n surfaceRef.value.focus();\n }\n });\n};\n\nconst openModal = () => {\n if (props.disabled) {\n return;\n }\n\n previousFocusedElement.value = document.activeElement as HTMLElement \| null;\n setValue(true);\n};\n\nconst closeModal = () => {\n setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n if (props.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (event.defaultPrevented) {\n return;\n }\n\n openModal();\n};\n\nconst onOverlayClick = () => {\n if (!props.closeOnOverlay) {\n return;\n }\n\n closeModal();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n if (isEscapeKey(event) && props.closeOnEscape) {\n event.preventDefault();\n closeModal();\n return;\n }\n\n if (event.key !== 'Tab' \|\| !surfaceRef.value) {\n return;\n }\n\n const focusable = getFocusableElements(surfaceRef.value);\n\n if (!focusable.length) {\n event.preventDefault();\n surfaceRef.value.focus();\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n const activeElement = document.activeElement as HTMLElement \| null;\n\n if (event.shiftKey && activeElement === first) {\n event.preventDefault();\n focusLast(surfaceRef.value);\n }\n\n if (!event.shiftKey && activeElement === last) {\n event.preventDefault();\n focusFirst(surfaceRef.value);\n }\n};\n\nwatch(isOpen, (value, previousValue) => {\n if (value) {\n lockBodyScroll();\n focusSurface();\n return;\n }\n\n if (previousValue) {\n unlockBodyScroll();\n nextTick(() => {\n previousFocusedElement.value?.focus();\n });\n }\n});\n\nonBeforeUnmount(() => {\n if (isOpen.value) {\n unlockBodyScroll();\n }\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <span\n v-if=\"$slots.trigger\"\n class=\"t-modal__trigger\"\n v-bind=\"triggerAttrs\"\n :aria-disabled=\"disabled \|\| undefined\"\n @click=\"onTriggerClick\"\n >\n <slot name=\"trigger\" />\n </span>\n\n <Teleport to=\"body\">\n <transition name=\"t-modal-fade\">\n <div\n v-if=\"isOpen\"\n class=\"t-modal__portal\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <div\n class=\"t-modal__backdrop\"\n aria-hidden=\"true\"\n @click=\"onOverlayClick\"\n />\n <div class=\"t-modal__positioner\">\n <div\n :id=\"modalId\"\n ref=\"surfaceRef\"\n :class=\"surfaceClasses\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-labelledby=\"labelledBy\"\n :aria-describedby=\"describedBy\"\n tabindex=\"-1\"\n @click=\"onSurfaceClick\"\n @keydown=\"onKeydown\"\n >\n <div\n v-if=\"hasHeaderContent \|\| showCloseButton\"\n class=\"t-modal__topbar\"\n >\n <div\n v-if=\"hasHeaderContent\"\n :id=\"titleId\"\n class=\"t-modal__header\"\n >\n <slot name=\"header\">\n <h2 class=\"t-modal__title\">\n {{ title }}\n </h2>\n </slot>\n </div>\n <button\n v-if=\"showCloseButton\"\n type=\"button\"\n class=\"t-modal__close\"\n :aria-label=\"closeLabel\"\n @click=\"closeModal\"\n >\n <CloseIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <p\n v-if=\"description\"\n :id=\"descriptionId\"\n class=\"t-modal__description\"\n >\n {{ description }}\n </p>\n\n <div class=\"t-modal__body\">\n <slot name=\"content\">\n <slot />\n </slot>\n </div>\n\n <div\n v-if=\"$slots.footer\"\n class=\"t-modal__footer\"\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </div>\n </transition>\n </Teleport>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,IAAM,IAAY,GAAY,GAAG,GAE3B,IAAQ,GA6BR,IAAO,GAKP,IAAQ,EAAS,GACjB,IAAU,EAAM,MAAM,GAAS,SAAS,GACxC,IAAU,GAAG,EAAQ,SACrB,IAAgB,GAAG,EAAQ,eAC3B,IAAU,EAAwB,IAAI,GACtC,IAAa,EAAwB,IAAI,GACzC,IAAyB,EAAwB,IAAI,GACrD,IAAmB,QAAe,GAAQ,EAAM,SAAS,GAAM,OAAO,GAEtE,KAAQ,EAAA,GAQR,KAAc,QAAe,CAAC,WAAW,EAAM,KAAK,CAAC,GACrD,KAAY,QAAe,EAAM,KAAK,GACtC,KAAe,QAAe;GAClC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GACK,KAAiB,QAAe,CACpC,oBACA,qBAAqB,EAAM,MAC7B,CAAC,GAEK,EAAE,OAAO,GAAQ,gBAAa,EAClC,EAAM,GAAO,MAAM,GACnB,EAAM,cACL,MAAU;GAET,AADA,EAAK,eAAe,CAAK,GACzB,EAAK,eAAe,CAAK;EAC3B,CACF,GAEM,KAAa,QAAgB,EAAiB,QAAQ,IAAU,KAAA,CAAU,GAC1E,KAAc,QAAgB,EAAM,cAAc,IAAgB,KAAA,CAAU,GAE9E,IAAmB,GACnB,IAAuB,IAErB,UAAuB;GACvB,OAAO,WAAa,QAIpB,MAAqB,MACvB,IAAuB,SAAS,KAAK,MAAM,UAC3C,SAAS,KAAK,MAAM,WAAW,WAGjC,KAAoB;EACtB,GAEM,UAAyB;GACzB,OAAO,WAAa,OAAe,MAAqB,MAI5D,KAEI,MAAqB,MACvB,SAAS,KAAK,MAAM,WAAW;EAEnC,GAEM,WAAqB;GACzB,QAAe;IACR,EAAW,UAIA,EAAW,EAAW,KACjC,KACH,EAAW,MAAM,MAAM;GAE3B,CAAC;EACH,GAEM,WAAkB;GAClB,EAAM,aAIV,EAAuB,QAAQ,SAAS,eACxC,EAAS,EAAI;EACf,GAEM,UAAmB;GACvB,EAAS,EAAK;EAChB,GAEM,MAAkB,MAAsB;GAC5C,IAAI,EAAM,UAAU;IAElB,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;IACtB;GACF;GAEI,EAAM,oBAIV,GAAU;EACZ,GAEM,WAAuB;GACtB,EAAM,kBAIX,EAAW;EACb,GAEM,MAAkB,MAAsB;GAC5C,EAAM,gBAAgB;EACxB,GAEM,MAAa,MAAyB;GAC1C,IAAI,GAAY,CAAK,KAAK,EAAM,eAAe;IAE7C,AADA,EAAM,eAAe,GACrB,EAAW;IACX;GACF;GAEA,IAAI,EAAM,QAAQ,SAAS,CAAC,EAAW,OACrC;GAGF,IAAM,IAAY,GAAqB,EAAW,KAAK;GAEvD,IAAI,CAAC,EAAU,QAAQ;IAErB,AADA,EAAM,eAAe,GACrB,EAAW,MAAM,MAAM;IACvB;GACF;GAEA,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS,IACpC,IAAgB,SAAS;GAO/B,AALI,EAAM,YAAY,MAAkB,MACtC,EAAM,eAAe,GACrB,GAAU,EAAW,KAAK,IAGxB,CAAC,EAAM,YAAY,MAAkB,MACvC,EAAM,eAAe,GACrB,EAAW,EAAW,KAAK;EAE/B;SAEA,EAAM,IAAS,GAAO,MAAkB;GACtC,IAAI,GAAO;IAET,AADA,EAAe,GACf,GAAa;IACb;GACF;GAEA,AAAI,MACF,EAAiB,GACjB,QAAe;IACb,EAAuB,OAAO,MAAM;GACtC,CAAC;EAEL,CAAC,GAED,QAAsB;GACpB,AAAI,EAAO,SACT,EAAiB;EAErB,CAAC,mBAIC,EA4FM,OAAA;YA3FA;GAAJ,KAAI;GACH,OAAK,EAAE,GAAA,KAAW;GAClB,OAAK,EAAE,GAAA,KAAS;GAChB,cAAY,EAAA,CAAA,IAAM,SAAA;MAGXA,EAAAA,OAAO,WAAA,EAAA,GADf,EAQO,QARP,EAQO;;GANL,OAAM;KACE,GAAA,OAAY;GACnB,iBAAe,EAAA,YAAY,KAAA;GAC3B,SAAO;OAER,EAAuB,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,EAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,GAGzB,EA2EW,GAAA,EA3ED,IAAG,OAAM,GAAA,CACjB,EAyEa,GAAA,EAzED,MAAK,eAAc,GAAA;oBAwEvB,CAtEE,EAAA,CAAA,KAAA,EAAA,GADR,EAuEM,OAAA;;IArEJ,OAAM;IACL,cAAY,EAAA,CAAA,IAAM,SAAA;OAEnB,EAIE,OAAA;IAHA,OAAM;IACN,eAAY;IACX,SAAO;OAEV,EA4DM,OA5DN,GA4DM,CA3DJ,EA0DM,OAAA;IAzDH,IAAI,EAAA,CAAA;aACD;IAAJ,KAAI;IACH,OAAK,EAAE,GAAA,KAAc;IACtB,MAAK;IACL,cAAW;IACV,mBAAiB,GAAA;IACjB,oBAAkB,GAAA;IACnB,UAAS;IACR,SAAO;IACE;;IAGF,EAAA,SAAoB,EAAA,mBAAA,EAAA,GAD5B,EAwBM,OAxBN,GAwBM,CAnBI,EAAA,SAAA,EAAA,GADR,EAUM,OAAA;;KARH,IAAI;KACL,OAAM;QAEN,EAIO,EAAA,QAAA,UAAA,CAAA,SAAA,CAHL,EAEK,MAFL,GAEK,EADA,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAKN,EAAA,mBAAA,EAAA,GADR,EAQS,UAAA;;KANP,MAAK;KACL,OAAM;KACL,cAAY,EAAA;KACZ,SAAO;QAER,EAAuC,EAAA,CAAA,GAAA,EAAA,GAApB,EAAA,EAAA,CAAgB,CAAA,GAAA,MAAA,EAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAK/B,EAAA,eAAA,EAAA,GADR,EAMI,KAAA;;KAJD,IAAI;KACL,OAAM;SAEH,EAAA,WAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAGhB,EAIM,OAJN,GAIM,CAHJ,EAEO,EAAA,QAAA,WAAA,CAAA,SAAA,CADL,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA;IAKJA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKM,OALN,GAKM,CADJ,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
1	+ {"version":3,"file":"TModal.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n createId,\n focusFirst,\n focusLast,\n getFocusableElements,\n isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n computed,\n nextTick,\n onBeforeUnmount,\n ref,\n toRef,\n useAttrs,\n watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nconst CloseIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n defineProps<{\n open?: boolean;\n defaultOpen?: boolean;\n disabled?: boolean;\n size?: TSize;\n title?: string;\n description?: string;\n closeOnEscape?: boolean;\n closeOnOverlay?: boolean;\n showCloseButton?: boolean;\n closeLabel?: string;\n id?: string;\n }>(),\n {\n open: undefined,\n defaultOpen: false,\n disabled: false,\n size: 'md',\n title: '',\n description: '',\n closeOnEscape: true,\n closeOnOverlay: true,\n showCloseButton: true,\n closeLabel: 'Close modal',\n id: undefined,\n },\n);\n\nconst emit = defineEmits<{\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-description`;\nconst rootRef = ref<HTMLElement \| null>(null);\nconst surfaceRef = ref<HTMLElement \| null>(null);\nconst previousFocusedElement = ref<HTMLElement \| null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title \|\| slots.header));\n\nconst slots = defineSlots<{\n default?: () => unknown;\n trigger?: () => unknown;\n header?: () => unknown;\n content?: () => unknown;\n footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-modal', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\nconst surfaceClasses = computed(() => [\n 't-modal__surface',\n `t-modal__surface--${props.size}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n if (typeof document === 'undefined') {\n return;\n }\n\n if (openOverlayCount === 0) {\n previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n\n openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n if (typeof document === 'undefined' \|\| openOverlayCount === 0) {\n return;\n }\n\n openOverlayCount -= 1;\n\n if (openOverlayCount === 0) {\n document.body.style.overflow = previousBodyOverflow;\n }\n};\n\nconst focusSurface = () => {\n nextTick(() => {\n if (!surfaceRef.value) {\n return;\n }\n\n const focused = focusFirst(surfaceRef.value);\n if (!focused) {\n surfaceRef.value.focus();\n }\n });\n};\n\nconst openModal = () => {\n if (props.disabled) {\n return;\n }\n\n previousFocusedElement.value = document.activeElement as HTMLElement \| null;\n setValue(true);\n};\n\nconst closeModal = () => {\n setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n if (props.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (event.defaultPrevented) {\n return;\n }\n\n openModal();\n};\n\nconst onOverlayClick = () => {\n if (!props.closeOnOverlay) {\n return;\n }\n\n closeModal();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n if (isEscapeKey(event) && props.closeOnEscape) {\n event.preventDefault();\n closeModal();\n return;\n }\n\n if (event.key !== 'Tab' \|\| !surfaceRef.value) {\n return;\n }\n\n const focusable = getFocusableElements(surfaceRef.value);\n\n if (!focusable.length) {\n event.preventDefault();\n surfaceRef.value.focus();\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n const activeElement = document.activeElement as HTMLElement \| null;\n\n if (event.shiftKey && activeElement === first) {\n event.preventDefault();\n focusLast(surfaceRef.value);\n }\n\n if (!event.shiftKey && activeElement === last) {\n event.preventDefault();\n focusFirst(surfaceRef.value);\n }\n};\n\nwatch(isOpen, (value, previousValue) => {\n if (value) {\n lockBodyScroll();\n focusSurface();\n return;\n }\n\n if (previousValue) {\n unlockBodyScroll();\n nextTick(() => {\n previousFocusedElement.value?.focus();\n });\n }\n});\n\nonBeforeUnmount(() => {\n if (isOpen.value) {\n unlockBodyScroll();\n }\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <span\n v-if=\"$slots.trigger\"\n class=\"t-modal__trigger\"\n v-bind=\"triggerAttrs\"\n :aria-disabled=\"disabled \|\| undefined\"\n @click=\"onTriggerClick\"\n >\n <slot name=\"trigger\" />\n </span>\n\n <Teleport to=\"body\">\n <transition name=\"t-modal-fade\">\n <div\n v-if=\"isOpen\"\n class=\"t-modal__portal\"\n :data-state=\"isOpen ? 'open' : 'closed'\"\n >\n <div\n class=\"t-modal__backdrop\"\n aria-hidden=\"true\"\n @click=\"onOverlayClick\"\n />\n <div class=\"t-modal__positioner\">\n <div\n :id=\"modalId\"\n ref=\"surfaceRef\"\n :class=\"surfaceClasses\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-labelledby=\"labelledBy\"\n :aria-describedby=\"describedBy\"\n tabindex=\"-1\"\n @click=\"onSurfaceClick\"\n @keydown=\"onKeydown\"\n >\n <div\n v-if=\"hasHeaderContent \|\| showCloseButton\"\n class=\"t-modal__topbar\"\n >\n <div\n v-if=\"hasHeaderContent\"\n :id=\"titleId\"\n class=\"t-modal__header\"\n >\n <slot name=\"header\">\n <h2 class=\"t-modal__title\">\n {{ title }}\n </h2>\n </slot>\n </div>\n <button\n v-if=\"showCloseButton\"\n type=\"button\"\n class=\"t-modal__close\"\n :aria-label=\"closeLabel\"\n @click=\"closeModal\"\n >\n <CloseIcon v-bind=\"treeIconDefaults\" />\n </button>\n </div>\n\n <p\n v-if=\"description\"\n :id=\"descriptionId\"\n class=\"t-modal__description\"\n >\n {{ description }}\n </p>\n\n <div class=\"t-modal__body\">\n <slot name=\"content\">\n <slot />\n </slot>\n </div>\n\n <div\n v-if=\"$slots.footer\"\n class=\"t-modal__footer\"\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </div>\n </div>\n </transition>\n </Teleport>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TMultiSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TMultiSelect.cjs","names":[],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = getTreeIcon('chevron-down');\nconst CheckIcon = getTreeIcon('check');\nconst XIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TMultiSelect.cjs","names":[],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = computed(() => getTreeIcon('chevron-down'));\nconst CheckIcon = computed(() => getTreeIcon('check'));\nconst XIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/TMultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TMultiSelect.js","names":[],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = getTreeIcon('chevron-down');\nconst CheckIcon = getTreeIcon('check');\nconst XIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TMultiSelect.js","names":[],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = computed(() => getTreeIcon('chevron-down'));\nconst CheckIcon = computed(() => getTreeIcon('check'));\nconst XIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("./TSpinner.cjs"),t=require("../composables/useControllableOpen.cjs");let n=require("vue"),r=require("@treeui/utils"),i=require("@treeui/icons");var a={key:0,class:`t-multi-select__slot`},o={class:`t-multi-select__values`},ee={class:`t-multi-select__tag-label`},s=[`disabled`,`onClick`],c={key:0,class:`t-multi-select__overflow`},l=[`value`,`aria-expanded`,`aria-controls`,`aria-activedescendant`,`aria-invalid`,`aria-busy`,`disabled`,`placeholder`],u=[`id`],d={key:0,class:`t-multi-select__empty`},f=[`id`,`aria-selected`,`aria-disabled`,`disabled`,`onClick`],p={class:`t-multi-select__option-copy`},m={class:`t-multi-select__option-label`},h={key:0,class:`t-multi-select__option-description`},g={class:`t-multi-select__check`,"aria-hidden":`true`},_=(0,n.defineComponent)({inheritAttrs:!1,__name:`TMultiSelect`,props:{modelValue:{default:()=>[]},options:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:``},emptyText:{default:`No results found.`},maxVisibleTags:{default:2}},emits:[`update:modelValue`,`update:open`,`open-change`,`input-change`],setup(_,{emit:v}){let y=(0,i.getTreeIcon)(`chevron-down`),b=(0,i.getTreeIcon)(`check`),x=(0,i.getTreeIcon)(`x`),S=_,C=v,w=(0,n.useAttrs)(),T=(0,r.createId)(`t-multi-select`),E=(0,n.ref)(null),D=(0,n.ref)(null),O=(0,n.ref)(``),k=(0,n.ref)(-1),A=(0,n.computed)(()=>{let{class:e,style:t,autocomplete:n,...r}=w;return{autocomplete:typeof n==`string`?n:`off`,...r}}),{value:j,setValue:M}=t.useControllableOpen((0,n.toRef)(S,`open`),S.defaultOpen,e=>{C(`update:open`,e),C(`open-change`,e)}),N=(0,n.computed)(()=>[`t-multi-select`,`t-multi-select--${S.size}`,{"is-disabled":S.disabled,"is-invalid":S.invalid,"is-loading":S.loading,"is-open":j.value},w.class]),P=(0,n.computed)(()=>w.style),F=e=>e.trim().toLowerCase(),I=(0,n.computed)(()=>{let e=F(O.value);return e?S.options.filter(t=>[t.label,t.description??``,...t.keywords??[]].some(t=>t.toLowerCase().includes(e))):S.options}),L=(0,n.computed)(()=>S.options.filter(e=>S.modelValue.includes(e.value))),R=(0,n.computed)(()=>L.value.slice(0,S.maxVisibleTags)),z=(0,n.computed)(()=>Math.max(L.value.length-R.value.length,0)),B=(0,n.computed)(()=>I.value.filter(e=>!e.disabled)),V=(0,n.computed)(()=>k.value>=0?I.value[k.value]:void 0),H=(0,n.computed)(()=>j.value&&V.value?`${T}-option-${V.value.value}`:void 0),U=(0,n.computed)(()=>S.modelValue.length===0&&!O.value?S.placeholder:``),W=e=>S.modelValue.includes(e),G=(e=`first`)=>{let t=I.value.findIndex(e=>W(e.value)&&!e.disabled);if(t>=0){k.value=t;return}if(B.value.length===0){k.value=-1;return}let n=e===`last`?B.value[B.value.length-1]:B.value[0];k.value=I.value.findIndex(e=>e.value===n.value)},K=(e=`first`)=>{S.disabled||(M(!0),G(e))},q=()=>{M(!1),k.value=-1},J=()=>{(0,n.nextTick)(()=>D.value?.focus())},Y=e=>{C(`update:modelValue`,e)},X=e=>{if(S.disabled||e.disabled)return;let t=W(e.value)?S.modelValue.filter(t=>t!==e.value):[...S.modelValue,e.value];Y(t),O.value=``,G(`first`),J()},Z=e=>{S.disabled||(Y(S.modelValue.filter(t=>t!==e)),J())},Q=e=>{if(I.value.length===0){k.value=-1;return}let t=(0,r.getNextEnabledIndex)(k.value,I.value,e);k.value=t},te=e=>{if(O.value=e.target.value,C(`input-change`,O.value),!S.disabled&&!j.value){K(`first`);return}G(`first`)},ne=()=>{K(`first`)},re=e=>{if(!S.disabled){if(e.key===`Tab`){q();return}if((0,r.isEscapeKey)(e)){e.preventDefault(),q();return}if(e.key===`Backspace`&&!O.value&&S.modelValue.length>0){e.preventDefault(),Z(S.modelValue[S.modelValue.length-1]);return}if(e.key===`ArrowDown`){if(e.preventDefault(),!j.value){K(`first`);return}Q(1);return}if(e.key===`ArrowUp`){if(e.preventDefault(),!j.value){K(`last`);return}Q(-1);return}if(e.key===`Home`&&j.value){e.preventDefault(),G(`first`);return}if(e.key===`End`&&j.value){e.preventDefault(),G(`last`);return}e.key===`Enter`&&V.value&&(e.preventDefault(),X(V.value))}},$=e=>{if(!j.value)return;let t=e.target;t instanceof Node&&(E.value?.contains(t)||q())};return(0,n.watch)(j,e=>{e?document.addEventListener(`pointerdown`,$):document.removeEventListener(`pointerdown`,$)}),(0,n.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`rootRef`,ref:E,class:(0,n.normalizeClass)(N.value),style:(0,n.normalizeStyle)(P.value)},[(0,n.createElementVNode)(`div`,{class:`t-multi-select__control`,onClick:J},[t.$slots.prefix?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,a,[(0,n.renderSlot)(t.$slots,`prefix`)])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,o,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(R.value,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:e.value,class:`t-multi-select__tag`},[(0,n.renderSlot)(t.$slots,`tag`,{option:e,remove:()=>Z(e.value)},()=>[(0,n.createElementVNode)(`span`,ee,(0,n.toDisplayString)(e.label),1),(0,n.createElementVNode)(`button`,{type:`button`,class:`t-multi-select__tag-remove`,disabled:_.disabled,"aria-label":`Remove selection`,onMousedown:r[0]||=(0,n.withModifiers)(()=>{},[`prevent`]),onClick:(0,n.withModifiers)(t=>Z(e.value),[`stop`])},[(0,n.createVNode)((0,n.unref)(x),{size:12})],40,s)])]))),128)),z.value>0?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,` +`+(0,n.toDisplayString)(z.value),1)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`input`,(0,n.mergeProps)({ref_key:`inputRef`,ref:D},A.value,{value:O.value,type:`text`,class:`t-multi-select__input`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":(0,n.unref)(j),"aria-controls":(0,n.unref)(j)?(0,n.unref)(T):void 0,"aria-activedescendant":H.value,"aria-invalid":_.invalid||void 0,"aria-busy":_.loading||void 0,disabled:_.disabled,placeholder:U.value,onFocus:ne,onInput:te,onKeydown:re}),null,16,l)]),_.loading?((0,n.openBlock)(),(0,n.createBlock)(e.default,{key:1,class:`t-multi-select__indicator`,size:`sm`})):((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(y),{key:2,class:`t-multi-select__indicator`,size:16}))]),(0,n.createVNode)(n.Transition,{name:`t-fade`},{default:(0,n.withCtx)(()=>[(0,n.unref)(j)?((0,n.openBlock)(),(0,n.createElementBlock)(`ul`,{key:0,id:(0,n.unref)(T),class:`t-multi-select__listbox`,role:`listbox`,"aria-multiselectable":`true`},[I.value.length===0?((0,n.openBlock)(),(0,n.createElementBlock)(`li`,d,[(0,n.renderSlot)(t.$slots,`empty`,{query:O.value},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(_.emptyText),1)])])):((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,{key:1},(0,n.renderList)(I.value,(e,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`li`,{key:e.value},[(0,n.createElementVNode)(`button`,{id:`${(0,n.unref)(T)}-option-${e.value}`,type:`button`,class:(0,n.normalizeClass)([`t-multi-select__option`,{"is-active":i===k.value,"is-selected":W(e.value),"is-disabled":e.disabled}]),role:`option`,"aria-selected":W(e.value),"aria-disabled":e.disabled||void 0,disabled:e.disabled,onMousedown:r[1]||=(0,n.withModifiers)(()=>{},[`prevent`]),onClick:t=>X(e)},[(0,n.renderSlot)(t.$slots,`option`,{option:e,selected:W(e.value),active:i===k.value},()=>[(0,n.createElementVNode)(`span`,p,[(0,n.createElementVNode)(`span`,m,(0,n.toDisplayString)(e.label),1),e.description?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,h,(0,n.toDisplayString)(e.description),1)):(0,n.createCommentVNode)(``,!0)]),(0,n.createElementVNode)(`span`,g,[W(e.value)?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(b),{key:0,size:16})):(0,n.createCommentVNode)(``,!0)])])],42,f)]))),128))],8,u)):(0,n.createCommentVNode)(``,!0)]),_:3})],6))}});exports.default=_;
+const e=require("./TSpinner.cjs"),t=require("../composables/useControllableOpen.cjs");let n=require("vue"),r=require("@treeui/utils"),i=require("@treeui/icons");var a={key:0,class:`t-multi-select__slot`},o={class:`t-multi-select__values`},ee={class:`t-multi-select__tag-label`},s=[`disabled`,`onClick`],c={key:0,class:`t-multi-select__overflow`},l=[`value`,`aria-expanded`,`aria-controls`,`aria-activedescendant`,`aria-invalid`,`aria-busy`,`disabled`,`placeholder`],u=[`id`],d={key:0,class:`t-multi-select__empty`},f=[`id`,`aria-selected`,`aria-disabled`,`disabled`,`onClick`],p={class:`t-multi-select__option-copy`},m={class:`t-multi-select__option-label`},h={key:0,class:`t-multi-select__option-description`},g={class:`t-multi-select__check`,"aria-hidden":`true`},_=(0,n.defineComponent)({inheritAttrs:!1,__name:`TMultiSelect`,props:{modelValue:{default:()=>[]},options:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:``},emptyText:{default:`No results found.`},maxVisibleTags:{default:2}},emits:[`update:modelValue`,`update:open`,`open-change`,`input-change`],setup(_,{emit:v}){let y=(0,n.computed)(()=>(0,i.getTreeIcon)(`chevron-down`)),b=(0,n.computed)(()=>(0,i.getTreeIcon)(`check`)),x=(0,n.computed)(()=>(0,i.getTreeIcon)(`x`)),S=_,C=v,w=(0,n.useAttrs)(),T=(0,r.createId)(`t-multi-select`),E=(0,n.ref)(null),D=(0,n.ref)(null),O=(0,n.ref)(``),k=(0,n.ref)(-1),A=(0,n.computed)(()=>{let{class:e,style:t,autocomplete:n,...r}=w;return{autocomplete:typeof n==`string`?n:`off`,...r}}),{value:j,setValue:M}=t.useControllableOpen((0,n.toRef)(S,`open`),S.defaultOpen,e=>{C(`update:open`,e),C(`open-change`,e)}),N=(0,n.computed)(()=>[`t-multi-select`,`t-multi-select--${S.size}`,{"is-disabled":S.disabled,"is-invalid":S.invalid,"is-loading":S.loading,"is-open":j.value},w.class]),P=(0,n.computed)(()=>w.style),F=e=>e.trim().toLowerCase(),I=(0,n.computed)(()=>{let e=F(O.value);return e?S.options.filter(t=>[t.label,t.description??``,...t.keywords??[]].some(t=>t.toLowerCase().includes(e))):S.options}),L=(0,n.computed)(()=>S.options.filter(e=>S.modelValue.includes(e.value))),R=(0,n.computed)(()=>L.value.slice(0,S.maxVisibleTags)),z=(0,n.computed)(()=>Math.max(L.value.length-R.value.length,0)),B=(0,n.computed)(()=>I.value.filter(e=>!e.disabled)),V=(0,n.computed)(()=>k.value>=0?I.value[k.value]:void 0),H=(0,n.computed)(()=>j.value&&V.value?`${T}-option-${V.value.value}`:void 0),U=(0,n.computed)(()=>S.modelValue.length===0&&!O.value?S.placeholder:``),W=e=>S.modelValue.includes(e),G=(e=`first`)=>{let t=I.value.findIndex(e=>W(e.value)&&!e.disabled);if(t>=0){k.value=t;return}if(B.value.length===0){k.value=-1;return}let n=e===`last`?B.value[B.value.length-1]:B.value[0];k.value=I.value.findIndex(e=>e.value===n.value)},K=(e=`first`)=>{S.disabled||(M(!0),G(e))},q=()=>{M(!1),k.value=-1},J=()=>{(0,n.nextTick)(()=>D.value?.focus())},Y=e=>{C(`update:modelValue`,e)},X=e=>{if(S.disabled||e.disabled)return;let t=W(e.value)?S.modelValue.filter(t=>t!==e.value):[...S.modelValue,e.value];Y(t),O.value=``,G(`first`),J()},Z=e=>{S.disabled||(Y(S.modelValue.filter(t=>t!==e)),J())},Q=e=>{if(I.value.length===0){k.value=-1;return}let t=(0,r.getNextEnabledIndex)(k.value,I.value,e);k.value=t},te=e=>{if(O.value=e.target.value,C(`input-change`,O.value),!S.disabled&&!j.value){K(`first`);return}G(`first`)},ne=()=>{K(`first`)},re=e=>{if(!S.disabled){if(e.key===`Tab`){q();return}if((0,r.isEscapeKey)(e)){e.preventDefault(),q();return}if(e.key===`Backspace`&&!O.value&&S.modelValue.length>0){e.preventDefault(),Z(S.modelValue[S.modelValue.length-1]);return}if(e.key===`ArrowDown`){if(e.preventDefault(),!j.value){K(`first`);return}Q(1);return}if(e.key===`ArrowUp`){if(e.preventDefault(),!j.value){K(`last`);return}Q(-1);return}if(e.key===`Home`&&j.value){e.preventDefault(),G(`first`);return}if(e.key===`End`&&j.value){e.preventDefault(),G(`last`);return}e.key===`Enter`&&V.value&&(e.preventDefault(),X(V.value))}},$=e=>{if(!j.value)return;let t=e.target;t instanceof Node&&(E.value?.contains(t)||q())};return(0,n.watch)(j,e=>{e?document.addEventListener(`pointerdown`,$):document.removeEventListener(`pointerdown`,$)}),(0,n.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`rootRef`,ref:E,class:(0,n.normalizeClass)(N.value),style:(0,n.normalizeStyle)(P.value)},[(0,n.createElementVNode)(`div`,{class:`t-multi-select__control`,onClick:J},[t.$slots.prefix?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,a,[(0,n.renderSlot)(t.$slots,`prefix`)])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,o,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(R.value,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:e.value,class:`t-multi-select__tag`},[(0,n.renderSlot)(t.$slots,`tag`,{option:e,remove:()=>Z(e.value)},()=>[(0,n.createElementVNode)(`span`,ee,(0,n.toDisplayString)(e.label),1),(0,n.createElementVNode)(`button`,{type:`button`,class:`t-multi-select__tag-remove`,disabled:_.disabled,"aria-label":`Remove selection`,onMousedown:r[0]||=(0,n.withModifiers)(()=>{},[`prevent`]),onClick:(0,n.withModifiers)(t=>Z(e.value),[`stop`])},[(0,n.createVNode)((0,n.unref)(x),{size:12})],40,s)])]))),128)),z.value>0?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,` +`+(0,n.toDisplayString)(z.value),1)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`input`,(0,n.mergeProps)({ref_key:`inputRef`,ref:D},A.value,{value:O.value,type:`text`,class:`t-multi-select__input`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":(0,n.unref)(j),"aria-controls":(0,n.unref)(j)?(0,n.unref)(T):void 0,"aria-activedescendant":H.value,"aria-invalid":_.invalid||void 0,"aria-busy":_.loading||void 0,disabled:_.disabled,placeholder:U.value,onFocus:ne,onInput:te,onKeydown:re}),null,16,l)]),_.loading?((0,n.openBlock)(),(0,n.createBlock)(e.default,{key:1,class:`t-multi-select__indicator`,size:`sm`})):((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(y),{key:2,class:`t-multi-select__indicator`,size:16}))]),(0,n.createVNode)(n.Transition,{name:`t-fade`},{default:(0,n.withCtx)(()=>[(0,n.unref)(j)?((0,n.openBlock)(),(0,n.createElementBlock)(`ul`,{key:0,id:(0,n.unref)(T),class:`t-multi-select__listbox`,role:`listbox`,"aria-multiselectable":`true`},[I.value.length===0?((0,n.openBlock)(),(0,n.createElementBlock)(`li`,d,[(0,n.renderSlot)(t.$slots,`empty`,{query:O.value},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(_.emptyText),1)])])):((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,{key:1},(0,n.renderList)(I.value,(e,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`li`,{key:e.value},[(0,n.createElementVNode)(`button`,{id:`${(0,n.unref)(T)}-option-${e.value}`,type:`button`,class:(0,n.normalizeClass)([`t-multi-select__option`,{"is-active":i===k.value,"is-selected":W(e.value),"is-disabled":e.disabled}]),role:`option`,"aria-selected":W(e.value),"aria-disabled":e.disabled||void 0,disabled:e.disabled,onMousedown:r[1]||=(0,n.withModifiers)(()=>{},[`prevent`]),onClick:t=>X(e)},[(0,n.renderSlot)(t.$slots,`option`,{option:e,selected:W(e.value),active:i===k.value},()=>[(0,n.createElementVNode)(`span`,p,[(0,n.createElementVNode)(`span`,m,(0,n.toDisplayString)(e.label),1),e.description?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,h,(0,n.toDisplayString)(e.description),1)):(0,n.createCommentVNode)(``,!0)]),(0,n.createElementVNode)(`span`,g,[W(e.value)?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(b),{key:0,size:16})):(0,n.createCommentVNode)(``,!0)])])],42,f)]))),128))],8,u)):(0,n.createCommentVNode)(``,!0)]),_:3})],6))}});exports.default=_;
 //# sourceMappingURL=TMultiSelect.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TMultiSelect.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = getTreeIcon('chevron-down');\nconst CheckIcon = getTreeIcon('check');\nconst XIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"TMultiSelect.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = computed(() => getTreeIcon('chevron-down'));\nconst CheckIcon = computed(() => getTreeIcon('check'));\nconst XIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -72,7 +72,7 @@ var le = {
 		"input-change"
 	],
 	setup(d, { emit: D }) {
-		let ve = S("chevron-down"), ye = S("check"), be = S("x"), O = d, k = D, A = re(), j = oe("t-multi-select"), M = h(null), N = h(null), P = h(""), F = h(-1), xe = i(() => {
+		let ve = i(() => S("chevron-down")), ye = i(() => S("check")), be = i(() => S("x")), O = d, k = D, A = re(), j = oe("t-multi-select"), M = h(null), N = h(null), P = h(""), F = h(-1), xe = i(() => {
 			let { class: e, style: t, autocomplete: n, ...r } = A;
 			return {
 				autocomplete: typeof n == "string" ? n : "off",

package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TMultiSelect.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = getTreeIcon('chevron-down');\nconst CheckIcon = getTreeIcon('check');\nconst XIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"TMultiSelect.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n label: string;\n value: string;\n description?: string;\n keywords?: string[];\n disabled?: boolean;\n}\n\nconst ChevronDownIcon = computed(() => getTreeIcon('chevron-down'));\nconst CheckIcon = computed(() => getTreeIcon('check'));\nconst XIcon = computed(() => getTreeIcon('x'));\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string[];\n options?: TMultiSelectOption[];\n open?: boolean;\n defaultOpen?: boolean;\n size?: TSize;\n disabled?: boolean;\n loading?: boolean;\n invalid?: boolean;\n placeholder?: string;\n emptyText?: string;\n maxVisibleTags?: number;\n }>(),\n {\n modelValue: () => [],\n options: () => [],\n open: undefined,\n defaultOpen: false,\n size: 'md',\n disabled: false,\n loading: false,\n invalid: false,\n placeholder: '',\n emptyText: 'No results found.',\n maxVisibleTags: 2,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string[]];\n 'update:open': [value: boolean];\n 'open-change': [value: boolean];\n 'input-change': [value: string];\n}>();\n\ndefineSlots<{\n prefix?: () => unknown;\n tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n option?: (props: {\n option: TMultiSelectOption;\n selected: boolean;\n active: boolean;\n }) => unknown;\n empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement \| null>(null);\nconst inputRef = ref<HTMLInputElement \| null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n return {\n autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n ...rest,\n };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n toRef(props, 'open'),\n props.defaultOpen,\n (value) => {\n emit('update:open', value);\n emit('open-change', value);\n },\n);\n\nconst rootClasses = computed(() => [\n 't-multi-select',\n `t-multi-select--${props.size}`,\n {\n 'is-disabled': props.disabled,\n 'is-invalid': props.invalid,\n 'is-loading': props.loading,\n 'is-open': isOpen.value,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n const normalizedQuery = normalize(query.value);\n\n if (!normalizedQuery) {\n return props.options;\n }\n\n return props.options.filter((option) => {\n const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n });\n});\n\nconst selectedOptions = computed(() =>\n props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n isOpen.value && activeOption.value\n ? `${listboxId}-option-${activeOption.value.value}`\n : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' \| 'last' = 'first') => {\n const selectedIndex = filteredOptions.value.findIndex(\n (option) => isSelected(option.value) && !option.disabled,\n );\n\n if (selectedIndex >= 0) {\n activeIndex.value = selectedIndex;\n return;\n }\n\n if (enabledFilteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const targetOption =\n fallback === 'last'\n ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n : enabledFilteredOptions.value[0];\n\n activeIndex.value = filteredOptions.value.findIndex(\n (option) => option.value === targetOption.value,\n );\n};\n\nconst openListbox = (fallback: 'first' \| 'last' = 'first') => {\n if (props.disabled) {\n return;\n }\n\n setValue(true);\n setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n setValue(false);\n activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n if (props.disabled \|\| option.disabled) {\n return;\n }\n\n const nextValues = isSelected(option.value)\n ? props.modelValue.filter((value) => value !== option.value)\n : [...props.modelValue, option.value];\n\n updateValues(nextValues);\n query.value = '';\n setInitialActiveIndex('first');\n focusInput();\n};\n\nconst removeValue = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n updateValues(props.modelValue.filter((item) => item !== value));\n focusInput();\n};\n\nconst moveActive = (direction: 1 \| -1) => {\n if (filteredOptions.value.length === 0) {\n activeIndex.value = -1;\n return;\n }\n\n const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n query.value = (event.target as HTMLInputElement).value;\n emit('input-change', query.value);\n\n if (!props.disabled && !isOpen.value) {\n openListbox('first');\n return;\n }\n\n setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Tab') {\n closeListbox();\n return;\n }\n\n if (isEscapeKey(event)) {\n event.preventDefault();\n closeListbox();\n return;\n }\n\n if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n event.preventDefault();\n removeValue(props.modelValue[props.modelValue.length - 1]);\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('first');\n return;\n }\n\n moveActive(1);\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n\n if (!isOpen.value) {\n openListbox('last');\n return;\n }\n\n moveActive(-1);\n return;\n }\n\n if (event.key === 'Home' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('first');\n return;\n }\n\n if (event.key === 'End' && isOpen.value) {\n event.preventDefault();\n setInitialActiveIndex('last');\n return;\n }\n\n if (event.key === 'Enter' && activeOption.value) {\n event.preventDefault();\n toggleOption(activeOption.value);\n }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n if (!isOpen.value) {\n return;\n }\n\n const target = event.target;\n\n if (!(target instanceof Node)) {\n return;\n }\n\n if (rootRef.value?.contains(target)) {\n return;\n }\n\n closeListbox();\n};\n\nwatch(\n isOpen,\n (value) => {\n if (value) {\n document.addEventListener('pointerdown', onDocumentPointerDown);\n } else {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n }\n },\n);\n\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <div\n class=\"t-multi-select__control\"\n @click=\"focusInput\"\n >\n <span\n v-if=\"$slots.prefix\"\n class=\"t-multi-select__slot\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <div class=\"t-multi-select__values\">\n <span\n v-for=\"option in visibleTags\"\n :key=\"option.value\"\n class=\"t-multi-select__tag\"\n >\n <slot\n name=\"tag\"\n :option=\"option\"\n :remove=\"() => removeValue(option.value)\"\n >\n <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n <button\n type=\"button\"\n class=\"t-multi-select__tag-remove\"\n :disabled=\"disabled\"\n aria-label=\"Remove selection\"\n @mousedown.prevent\n @click.stop=\"removeValue(option.value)\"\n >\n <XIcon :size=\"12\" />\n </button>\n </slot>\n </span>\n\n <span\n v-if=\"hiddenTagCount > 0\"\n class=\"t-multi-select__overflow\"\n >\n +{{ hiddenTagCount }}\n </span>\n\n <input\n ref=\"inputRef\"\n v-bind=\"inputAttrs\"\n :value=\"query\"\n type=\"text\"\n class=\"t-multi-select__input\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n :aria-expanded=\"isOpen\"\n :aria-controls=\"isOpen ? listboxId : undefined\"\n :aria-activedescendant=\"activeDescendant\"\n :aria-invalid=\"invalid \|\| undefined\"\n :aria-busy=\"loading \|\| undefined\"\n :disabled=\"disabled\"\n :placeholder=\"inputPlaceholder\"\n @focus=\"onInputFocus\"\n @input=\"onInput\"\n @keydown=\"onInputKeydown\"\n >\n </div>\n\n <TSpinner\n v-if=\"loading\"\n class=\"t-multi-select__indicator\"\n size=\"sm\"\n />\n <ChevronDownIcon\n v-else\n class=\"t-multi-select__indicator\"\n :size=\"16\"\n />\n </div>\n\n <Transition name=\"t-fade\">\n <ul\n v-if=\"isOpen\"\n :id=\"listboxId\"\n class=\"t-multi-select__listbox\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n >\n <li\n v-if=\"filteredOptions.length === 0\"\n class=\"t-multi-select__empty\"\n >\n <slot\n name=\"empty\"\n :query=\"query\"\n >\n {{ emptyText }}\n </slot>\n </li>\n\n <template v-else>\n <li\n v-for=\"(option, index) in filteredOptions\"\n :key=\"option.value\"\n >\n <button\n :id=\"`${listboxId}-option-${option.value}`\"\n type=\"button\"\n class=\"t-multi-select__option\"\n :class=\"{\n 'is-active': index === activeIndex,\n 'is-selected': isSelected(option.value),\n 'is-disabled': option.disabled,\n }\"\n role=\"option\"\n :aria-selected=\"isSelected(option.value)\"\n :aria-disabled=\"option.disabled \|\| undefined\"\n :disabled=\"option.disabled\"\n @mousedown.prevent\n @click=\"toggleOption(option)\"\n >\n <slot\n name=\"option\"\n :option=\"option\"\n :selected=\"isSelected(option.value)\"\n :active=\"index === activeIndex\"\n >\n <span class=\"t-multi-select__option-copy\">\n <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n <span\n v-if=\"option.description\"\n class=\"t-multi-select__option-description\"\n >\n {{ option.description }}\n </span>\n </span>\n\n <span\n class=\"t-multi-select__check\"\n aria-hidden=\"true\"\n >\n <CheckIcon\n v-if=\"isSelected(option.value)\"\n :size=\"16\"\n />\n </span>\n </slot>\n </button>\n </li>\n </template>\n </ul>\n </Transition>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TNavMenu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TNavMenu.cjs","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n label: string;\n value: string;\n shortLabel?: string;\n description?: string;\n icon?: Component;\n to?: string \| Record<string, unknown>;\n badge?: string \| number;\n disabled?: boolean;\n /*\n When the item renders as a router link, controls whether an inclusive\n * (prefix) route match also marks it active. Defaults to the menu-level\n * `exact` prop. Set to `false` for section roots that should stay active on\n * nested routes.\n */\n exact?: boolean;\n}\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TNavMenuItem[];\n size?: TSize;\n collapsed?: boolean;\n disabled?: boolean;\n exact?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n collapsed: undefined,\n disabled: false,\n exact: true,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TNavMenuItem;\n selected: boolean;\n focused: boolean;\n collapsed: boolean;\n }) => unknown;\n empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component \| null>(() => (\n (instance?.appContext.components.RouterLink as Component \| undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n if (item.to && routerLinkComponent.value) {\n return routerLinkComponent.value;\n }\n return 'button';\n};\n\nconst isRouterLinkItem = (item: TNavMenuItem) =>\n Boolean(item.to) && routerLinkComponent.value !== null;\n\n// Keep the active highlight deterministic when items render as router links.\n// Vue Router's default `router-link-active` uses inclusive (prefix) matching,\n// so several links can appear active at once. We map the router's active\n// classes onto TreeUI's own `is-selected`:\n// - Controlled menus (explicit `modelValue`) own selection, so the router adds\n// no class of its own — only the bound `is-selected` shows.\n// - Uncontrolled menus let the current route drive selection, using exact\n// matching by default (opt out per item, or menu-wide, via `exact`).\nconst routerActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n if (props.modelValue !== undefined) {\n return '';\n }\n\n return (item.exact ?? props.exact) ? '' : 'is-selected';\n};\n\nconst routerExactActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n return props.modelValue !== undefined ? '' : 'is-selected';\n};\n\nconst getInitialFocusedIndex = () => {\n const selectedIndex = props.items.findIndex((item) =>\n item.value === selectedValue.value && !item.disabled,\n );\n\n if (selectedIndex >= 0) {\n return selectedIndex;\n }\n\n return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n 't-nav-menu',\n `t-nav-menu--${props.size}`,\n {\n 'is-collapsed': resolvedCollapsed.value,\n 'is-disabled': props.disabled,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element \| ComponentPublicInstance \| null, value: string) => {\n const resolvedElement =\n element instanceof HTMLElement\n ? element\n : element && '$el' in element && element.$el instanceof HTMLElement\n ? element.$el\n : null;\n\n if (resolvedElement) {\n itemRefs.value.set(value, resolvedElement);\n } else {\n itemRefs.value.delete(value);\n }\n};\n\nconst focusItem = (index: number) => {\n const item = props.items[index];\n\n if (!item) {\n return;\n }\n\n focusedIndex.value = index;\n nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n if (props.disabled \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n if (firstIndex >= 0) {\n focusItem(firstIndex);\n }\n\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n if (lastIndex >= 0) {\n focusItem(props.items.length - 1 - lastIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n if (nextIndex >= 0) {\n focusItem(nextIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n if (previousIndex >= 0) {\n focusItem(previousIndex);\n }\n\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectItem(props.items[index]);\n }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n () => [props.items, props.modelValue] as const,\n () => {\n const nextIndex = getInitialFocusedIndex();\n focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n },\n { deep: true },\n);\n</script>\n\n<template>\n <nav\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <ul\n v-if=\"items.length > 0\"\n class=\"t-nav-menu__list\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-nav-menu__entry\"\n >\n <component\n :is=\"itemTag(item)\"\n :ref=\"(element: Element \| ComponentPublicInstance \| null) => setItemRef(element, item.value)\"\n :type=\"item.to ? undefined : 'button'\"\n :to=\"item.to \|\| undefined\"\n class=\"t-nav-menu__item\"\n :class=\"{\n 'is-selected': isSelected(item.value),\n 'is-disabled': disabled \|\| item.disabled,\n }\"\n :active-class=\"routerActiveClass(item)\"\n :exact-active-class=\"routerExactActiveClass(item)\"\n :disabled=\"(!item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-disabled=\"(item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n :tabindex=\"disabled \|\| item.disabled ? -1 : getTabIndex(index)\"\n :title=\"resolvedCollapsed ? item.label : undefined\"\n @click=\"selectItem(item)\"\n @keydown=\"onItemKeydown($event, index)\"\n @focus=\"focusedIndex = index\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :selected=\"isSelected(item.value)\"\n :focused=\"focusedIndex === index\"\n :collapsed=\"resolvedCollapsed\"\n >\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"t-nav-menu__icon\"\n aria-hidden=\"true\"\n />\n <span\n v-else\n class=\"t-nav-menu__marker\"\n aria-hidden=\"true\"\n >\n {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n </span>\n\n <span class=\"t-nav-menu__copy\">\n <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-nav-menu__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.badge !== undefined && item.badge !== null\"\n class=\"t-nav-menu__badge\"\n >\n {{ item.badge }}\n </span>\n </slot>\n </component>\n </li>\n </ul>\n\n <div\n v-else\n class=\"t-nav-menu__empty\"\n >\n <slot name=\"empty\">\n No navigation items.\n </slot>\n </div>\n </nav>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TNavMenu.cjs","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { resolveTreeIcon, type TIconInput } from '@treeui/icons';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n label: string;\n value: string;\n shortLabel?: string;\n description?: string;\n /*\n A registered icon name (`'cpu'`), or any component. A name is the simpler\n * form: it needs no import and no `markRaw`, since a string is not made\n * reactive when the item lands in a `ref`.\n /\n icon?: TIconInput;\n to?: string \| Record<string, unknown>;\n badge?: string \| number;\n disabled?: boolean;\n /\n When the item renders as a router link, controls whether an inclusive\n * (prefix) route match also marks it active. Defaults to the menu-level\n * `exact` prop. Set to `false` for section roots that should stay active on\n * nested routes.\n /\n exact?: boolean;\n}\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TNavMenuItem[];\n size?: TSize;\n collapsed?: boolean;\n disabled?: boolean;\n exact?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n collapsed: undefined,\n disabled: false,\n exact: true,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TNavMenuItem;\n selected: boolean;\n focused: boolean;\n collapsed: boolean;\n }) => unknown;\n empty?: () => unknown;\n}>();\n\n/\n A registry lookup, so it stays cheap enough to call from the template. An\n * unresolved name returns `undefined` and the item falls back to its letter\n * marker rather than rendering a hole.\n */\nconst iconFor = (item: TNavMenuItem) => resolveTreeIcon(item.icon);\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component \| null>(() => (\n (instance?.appContext.components.RouterLink as Component \| undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n if (item.to && routerLinkComponent.value) {\n return routerLinkComponent.value;\n }\n return 'button';\n};\n\nconst isRouterLinkItem = (item: TNavMenuItem) =>\n Boolean(item.to) && routerLinkComponent.value !== null;\n\n// Keep the active highlight deterministic when items render as router links.\n// Vue Router's default `router-link-active` uses inclusive (prefix) matching,\n// so several links can appear active at once. We map the router's active\n// classes onto TreeUI's own `is-selected`:\n// - Controlled menus (explicit `modelValue`) own selection, so the router adds\n// no class of its own — only the bound `is-selected` shows.\n// - Uncontrolled menus let the current route drive selection, using exact\n// matching by default (opt out per item, or menu-wide, via `exact`).\nconst routerActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n if (props.modelValue !== undefined) {\n return '';\n }\n\n return (item.exact ?? props.exact) ? '' : 'is-selected';\n};\n\nconst routerExactActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n return props.modelValue !== undefined ? '' : 'is-selected';\n};\n\nconst getInitialFocusedIndex = () => {\n const selectedIndex = props.items.findIndex((item) =>\n item.value === selectedValue.value && !item.disabled,\n );\n\n if (selectedIndex >= 0) {\n return selectedIndex;\n }\n\n return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n 't-nav-menu',\n `t-nav-menu--${props.size}`,\n {\n 'is-collapsed': resolvedCollapsed.value,\n 'is-disabled': props.disabled,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element \| ComponentPublicInstance \| null, value: string) => {\n const resolvedElement =\n element instanceof HTMLElement\n ? element\n : element && '$el' in element && element.$el instanceof HTMLElement\n ? element.$el\n : null;\n\n if (resolvedElement) {\n itemRefs.value.set(value, resolvedElement);\n } else {\n itemRefs.value.delete(value);\n }\n};\n\nconst focusItem = (index: number) => {\n const item = props.items[index];\n\n if (!item) {\n return;\n }\n\n focusedIndex.value = index;\n nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n if (props.disabled \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n if (firstIndex >= 0) {\n focusItem(firstIndex);\n }\n\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n if (lastIndex >= 0) {\n focusItem(props.items.length - 1 - lastIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n if (nextIndex >= 0) {\n focusItem(nextIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n if (previousIndex >= 0) {\n focusItem(previousIndex);\n }\n\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectItem(props.items[index]);\n }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n () => [props.items, props.modelValue] as const,\n () => {\n const nextIndex = getInitialFocusedIndex();\n focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n },\n { deep: true },\n);\n</script>\n\n<template>\n <nav\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <ul\n v-if=\"items.length > 0\"\n class=\"t-nav-menu__list\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-nav-menu__entry\"\n >\n <component\n :is=\"itemTag(item)\"\n :ref=\"(element: Element \| ComponentPublicInstance \| null) => setItemRef(element, item.value)\"\n :type=\"item.to ? undefined : 'button'\"\n :to=\"item.to \|\| undefined\"\n class=\"t-nav-menu__item\"\n :class=\"{\n 'is-selected': isSelected(item.value),\n 'is-disabled': disabled \|\| item.disabled,\n }\"\n :active-class=\"routerActiveClass(item)\"\n :exact-active-class=\"routerExactActiveClass(item)\"\n :disabled=\"(!item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-disabled=\"(item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n :tabindex=\"disabled \|\| item.disabled ? -1 : getTabIndex(index)\"\n :title=\"resolvedCollapsed ? item.label : undefined\"\n @click=\"selectItem(item)\"\n @keydown=\"onItemKeydown($event, index)\"\n @focus=\"focusedIndex = index\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :selected=\"isSelected(item.value)\"\n :focused=\"focusedIndex === index\"\n :collapsed=\"resolvedCollapsed\"\n >\n <component\n :is=\"iconFor(item)\"\n v-if=\"iconFor(item)\"\n class=\"t-nav-menu__icon\"\n aria-hidden=\"true\"\n />\n <span\n v-else\n class=\"t-nav-menu__marker\"\n aria-hidden=\"true\"\n >\n {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n </span>\n\n <span class=\"t-nav-menu__copy\">\n <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-nav-menu__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.badge !== undefined && item.badge !== null\"\n class=\"t-nav-menu__badge\"\n >\n {{ item.badge }}\n </span>\n </slot>\n </component>\n </li>\n </ul>\n\n <div\n v-else\n class=\"t-nav-menu__empty\"\n >\n <slot name=\"empty\">\n No navigation items.\n </slot>\n </div>\n </nav>\n</template>\n"],"mappings":""}

package/dist/components/TNavMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TNavMenu.js","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n label: string;\n value: string;\n shortLabel?: string;\n description?: string;\n icon?: Component;\n to?: string \| Record<string, unknown>;\n badge?: string \| number;\n disabled?: boolean;\n /*\n When the item renders as a router link, controls whether an inclusive\n * (prefix) route match also marks it active. Defaults to the menu-level\n * `exact` prop. Set to `false` for section roots that should stay active on\n * nested routes.\n */\n exact?: boolean;\n}\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TNavMenuItem[];\n size?: TSize;\n collapsed?: boolean;\n disabled?: boolean;\n exact?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n collapsed: undefined,\n disabled: false,\n exact: true,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TNavMenuItem;\n selected: boolean;\n focused: boolean;\n collapsed: boolean;\n }) => unknown;\n empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component \| null>(() => (\n (instance?.appContext.components.RouterLink as Component \| undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n if (item.to && routerLinkComponent.value) {\n return routerLinkComponent.value;\n }\n return 'button';\n};\n\nconst isRouterLinkItem = (item: TNavMenuItem) =>\n Boolean(item.to) && routerLinkComponent.value !== null;\n\n// Keep the active highlight deterministic when items render as router links.\n// Vue Router's default `router-link-active` uses inclusive (prefix) matching,\n// so several links can appear active at once. We map the router's active\n// classes onto TreeUI's own `is-selected`:\n// - Controlled menus (explicit `modelValue`) own selection, so the router adds\n// no class of its own — only the bound `is-selected` shows.\n// - Uncontrolled menus let the current route drive selection, using exact\n// matching by default (opt out per item, or menu-wide, via `exact`).\nconst routerActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n if (props.modelValue !== undefined) {\n return '';\n }\n\n return (item.exact ?? props.exact) ? '' : 'is-selected';\n};\n\nconst routerExactActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n return props.modelValue !== undefined ? '' : 'is-selected';\n};\n\nconst getInitialFocusedIndex = () => {\n const selectedIndex = props.items.findIndex((item) =>\n item.value === selectedValue.value && !item.disabled,\n );\n\n if (selectedIndex >= 0) {\n return selectedIndex;\n }\n\n return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n 't-nav-menu',\n `t-nav-menu--${props.size}`,\n {\n 'is-collapsed': resolvedCollapsed.value,\n 'is-disabled': props.disabled,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element \| ComponentPublicInstance \| null, value: string) => {\n const resolvedElement =\n element instanceof HTMLElement\n ? element\n : element && '$el' in element && element.$el instanceof HTMLElement\n ? element.$el\n : null;\n\n if (resolvedElement) {\n itemRefs.value.set(value, resolvedElement);\n } else {\n itemRefs.value.delete(value);\n }\n};\n\nconst focusItem = (index: number) => {\n const item = props.items[index];\n\n if (!item) {\n return;\n }\n\n focusedIndex.value = index;\n nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n if (props.disabled \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n if (firstIndex >= 0) {\n focusItem(firstIndex);\n }\n\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n if (lastIndex >= 0) {\n focusItem(props.items.length - 1 - lastIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n if (nextIndex >= 0) {\n focusItem(nextIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n if (previousIndex >= 0) {\n focusItem(previousIndex);\n }\n\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectItem(props.items[index]);\n }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n () => [props.items, props.modelValue] as const,\n () => {\n const nextIndex = getInitialFocusedIndex();\n focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n },\n { deep: true },\n);\n</script>\n\n<template>\n <nav\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <ul\n v-if=\"items.length > 0\"\n class=\"t-nav-menu__list\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-nav-menu__entry\"\n >\n <component\n :is=\"itemTag(item)\"\n :ref=\"(element: Element \| ComponentPublicInstance \| null) => setItemRef(element, item.value)\"\n :type=\"item.to ? undefined : 'button'\"\n :to=\"item.to \|\| undefined\"\n class=\"t-nav-menu__item\"\n :class=\"{\n 'is-selected': isSelected(item.value),\n 'is-disabled': disabled \|\| item.disabled,\n }\"\n :active-class=\"routerActiveClass(item)\"\n :exact-active-class=\"routerExactActiveClass(item)\"\n :disabled=\"(!item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-disabled=\"(item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n :tabindex=\"disabled \|\| item.disabled ? -1 : getTabIndex(index)\"\n :title=\"resolvedCollapsed ? item.label : undefined\"\n @click=\"selectItem(item)\"\n @keydown=\"onItemKeydown($event, index)\"\n @focus=\"focusedIndex = index\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :selected=\"isSelected(item.value)\"\n :focused=\"focusedIndex === index\"\n :collapsed=\"resolvedCollapsed\"\n >\n <component\n :is=\"item.icon\"\n v-if=\"item.icon\"\n class=\"t-nav-menu__icon\"\n aria-hidden=\"true\"\n />\n <span\n v-else\n class=\"t-nav-menu__marker\"\n aria-hidden=\"true\"\n >\n {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n </span>\n\n <span class=\"t-nav-menu__copy\">\n <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-nav-menu__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.badge !== undefined && item.badge !== null\"\n class=\"t-nav-menu__badge\"\n >\n {{ item.badge }}\n </span>\n </slot>\n </component>\n </li>\n </ul>\n\n <div\n v-else\n class=\"t-nav-menu__empty\"\n >\n <slot name=\"empty\">\n No navigation items.\n </slot>\n </div>\n </nav>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"TNavMenu.js","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { resolveTreeIcon, type TIconInput } from '@treeui/icons';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n label: string;\n value: string;\n shortLabel?: string;\n description?: string;\n /*\n A registered icon name (`'cpu'`), or any component. A name is the simpler\n * form: it needs no import and no `markRaw`, since a string is not made\n * reactive when the item lands in a `ref`.\n /\n icon?: TIconInput;\n to?: string \| Record<string, unknown>;\n badge?: string \| number;\n disabled?: boolean;\n /\n When the item renders as a router link, controls whether an inclusive\n * (prefix) route match also marks it active. Defaults to the menu-level\n * `exact` prop. Set to `false` for section roots that should stay active on\n * nested routes.\n /\n exact?: boolean;\n}\n\nconst props = withDefaults(\n defineProps<{\n modelValue?: string;\n defaultValue?: string;\n items?: TNavMenuItem[];\n size?: TSize;\n collapsed?: boolean;\n disabled?: boolean;\n exact?: boolean;\n }>(),\n {\n modelValue: undefined,\n defaultValue: '',\n items: () => [],\n size: 'md',\n collapsed: undefined,\n disabled: false,\n exact: true,\n },\n);\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string];\n select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n item?: (props: {\n item: TNavMenuItem;\n selected: boolean;\n focused: boolean;\n collapsed: boolean;\n }) => unknown;\n empty?: () => unknown;\n}>();\n\n/\n A registry lookup, so it stays cheap enough to call from the template. An\n * unresolved name returns `undefined` and the item falls back to its letter\n * marker rather than rendering a hole.\n */\nconst iconFor = (item: TNavMenuItem) => resolveTreeIcon(item.icon);\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component \| null>(() => (\n (instance?.appContext.components.RouterLink as Component \| undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n if (item.to && routerLinkComponent.value) {\n return routerLinkComponent.value;\n }\n return 'button';\n};\n\nconst isRouterLinkItem = (item: TNavMenuItem) =>\n Boolean(item.to) && routerLinkComponent.value !== null;\n\n// Keep the active highlight deterministic when items render as router links.\n// Vue Router's default `router-link-active` uses inclusive (prefix) matching,\n// so several links can appear active at once. We map the router's active\n// classes onto TreeUI's own `is-selected`:\n// - Controlled menus (explicit `modelValue`) own selection, so the router adds\n// no class of its own — only the bound `is-selected` shows.\n// - Uncontrolled menus let the current route drive selection, using exact\n// matching by default (opt out per item, or menu-wide, via `exact`).\nconst routerActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n if (props.modelValue !== undefined) {\n return '';\n }\n\n return (item.exact ?? props.exact) ? '' : 'is-selected';\n};\n\nconst routerExactActiveClass = (item: TNavMenuItem) => {\n if (!isRouterLinkItem(item)) {\n return undefined;\n }\n\n return props.modelValue !== undefined ? '' : 'is-selected';\n};\n\nconst getInitialFocusedIndex = () => {\n const selectedIndex = props.items.findIndex((item) =>\n item.value === selectedValue.value && !item.disabled,\n );\n\n if (selectedIndex >= 0) {\n return selectedIndex;\n }\n\n return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n 't-nav-menu',\n `t-nav-menu--${props.size}`,\n {\n 'is-collapsed': resolvedCollapsed.value,\n 'is-disabled': props.disabled,\n },\n attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n const { class: _class, style: _style, ...rest } = attrs;\n return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element \| ComponentPublicInstance \| null, value: string) => {\n const resolvedElement =\n element instanceof HTMLElement\n ? element\n : element && '$el' in element && element.$el instanceof HTMLElement\n ? element.$el\n : null;\n\n if (resolvedElement) {\n itemRefs.value.set(value, resolvedElement);\n } else {\n itemRefs.value.delete(value);\n }\n};\n\nconst focusItem = (index: number) => {\n const item = props.items[index];\n\n if (!item) {\n return;\n }\n\n focusedIndex.value = index;\n nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n if (props.disabled \|\| item.disabled) {\n return;\n }\n\n if (props.modelValue === undefined) {\n internalValue.value = item.value;\n }\n\n emit('update:modelValue', item.value);\n emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n if (props.disabled) {\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n if (firstIndex >= 0) {\n focusItem(firstIndex);\n }\n\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n if (lastIndex >= 0) {\n focusItem(props.items.length - 1 - lastIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n if (nextIndex >= 0) {\n focusItem(nextIndex);\n }\n\n return;\n }\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n if (previousIndex >= 0) {\n focusItem(previousIndex);\n }\n\n return;\n }\n\n if (isActivationKey(event)) {\n event.preventDefault();\n selectItem(props.items[index]);\n }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n () => [props.items, props.modelValue] as const,\n () => {\n const nextIndex = getInitialFocusedIndex();\n focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n },\n { deep: true },\n);\n</script>\n\n<template>\n <nav\n v-bind=\"rootAttrs\"\n :class=\"rootClasses\"\n :style=\"rootStyle\"\n >\n <ul\n v-if=\"items.length > 0\"\n class=\"t-nav-menu__list\"\n >\n <li\n v-for=\"(item, index) in items\"\n :key=\"item.value\"\n class=\"t-nav-menu__entry\"\n >\n <component\n :is=\"itemTag(item)\"\n :ref=\"(element: Element \| ComponentPublicInstance \| null) => setItemRef(element, item.value)\"\n :type=\"item.to ? undefined : 'button'\"\n :to=\"item.to \|\| undefined\"\n class=\"t-nav-menu__item\"\n :class=\"{\n 'is-selected': isSelected(item.value),\n 'is-disabled': disabled \|\| item.disabled,\n }\"\n :active-class=\"routerActiveClass(item)\"\n :exact-active-class=\"routerExactActiveClass(item)\"\n :disabled=\"(!item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-disabled=\"(item.to && (disabled \|\| item.disabled)) \|\| undefined\"\n :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n :tabindex=\"disabled \|\| item.disabled ? -1 : getTabIndex(index)\"\n :title=\"resolvedCollapsed ? item.label : undefined\"\n @click=\"selectItem(item)\"\n @keydown=\"onItemKeydown($event, index)\"\n @focus=\"focusedIndex = index\"\n >\n <slot\n name=\"item\"\n :item=\"item\"\n :selected=\"isSelected(item.value)\"\n :focused=\"focusedIndex === index\"\n :collapsed=\"resolvedCollapsed\"\n >\n <component\n :is=\"iconFor(item)\"\n v-if=\"iconFor(item)\"\n class=\"t-nav-menu__icon\"\n aria-hidden=\"true\"\n />\n <span\n v-else\n class=\"t-nav-menu__marker\"\n aria-hidden=\"true\"\n >\n {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n </span>\n\n <span class=\"t-nav-menu__copy\">\n <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n <span\n v-if=\"item.description\"\n class=\"t-nav-menu__description\"\n >\n {{ item.description }}\n </span>\n </span>\n\n <span\n v-if=\"item.badge !== undefined && item.badge !== null\"\n class=\"t-nav-menu__badge\"\n >\n {{ item.badge }}\n </span>\n </slot>\n </component>\n </li>\n </ul>\n\n <div\n v-else\n class=\"t-nav-menu__empty\"\n >\n <slot name=\"empty\">\n No navigation items.\n </slot>\n </div>\n </nav>\n</template>\n"],"mappings":""}