@treeui/vue 0.16.0 → 0.18.0

package/dist/components/TMultiSelect.cjs.map

@@ -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":""}
+{"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

@@ -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":""}
+{"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

@@ -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

@@ -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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"}
+{"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":"mvCAoBA,IAAM,GAAA,EAAA,EAAA,SAAA,MAAA,EAAA,EAAA,YAAA,CAA6C,cAAc,CAAC,EAC5D,GAAA,EAAA,EAAA,SAAA,MAAA,EAAA,EAAA,YAAA,CAAuC,OAAO,CAAC,EAC/C,GAAA,EAAA,EAAA,SAAA,MAAA,EAAA,EAAA,YAAA,CAAmC,GAAG,CAAC,EAEvC,EAAQ,EA6BR,EAAO,EAkBP,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,GAAA,EAAA,EAAA,SAAA,CAAqB,gBAAgB,EACrC,GAAA,EAAA,EAAA,IAAA,CAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,IAAA,CAAwC,IAAI,EAC5C,GAAA,EAAA,EAAA,IAAA,CAAY,EAAE,EACd,GAAA,EAAA,EAAA,IAAA,CAAkB,EAAE,EAEpB,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,eAAc,GAAG,GAAS,EAChE,MAAO,CACL,aAAc,OAAO,GAAiB,SAAW,EAAe,MAChE,GAAG,CACL,CACF,CAAC,EAEK,CAAE,MAAO,EAAQ,YAAa,EAAA,qBAAA,EAAA,EAAA,MAAA,CAC5B,EAAO,MAAM,EACnB,EAAM,YACL,GAAU,CACT,EAAK,cAAe,CAAK,EACzB,EAAK,cAAe,CAAK,CAC3B,CACF,EAEM,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,iBACA,mBAAmB,EAAM,OACzB,CACE,cAAe,EAAM,SACrB,aAAc,EAAM,QACpB,aAAc,EAAM,QACpB,UAAW,EAAO,KACpB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,EAAa,GAAkB,EAAM,KAAK,CAAC,CAAC,YAAY,EAExD,GAAA,EAAA,EAAA,SAAA,KAAiC,CACrC,IAAM,EAAkB,EAAU,EAAM,KAAK,EAM7C,OAJK,EAIE,EAAM,QAAQ,OAAQ,GAEpB,CADS,EAAO,MAAO,EAAO,aAAe,GAAI,GAAI,EAAO,UAAY,CAAC,CACzE,CAAA,CAAO,KAAM,GAAU,EAAM,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CAC5E,EANQ,EAAM,OAOjB,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KACJ,EAAM,QAAQ,OAAQ,GAAW,EAAM,WAAW,SAAS,EAAO,KAAK,CAAC,CAC1E,EAEM,GAAA,EAAA,EAAA,SAAA,KAA6B,EAAgB,MAAM,MAAM,EAAG,EAAM,cAAc,CAAC,EACjF,GAAA,EAAA,EAAA,SAAA,KACJ,KAAK,IAAI,EAAgB,MAAM,OAAS,EAAY,MAAM,OAAQ,CAAC,CACrE,EAEM,GAAA,EAAA,EAAA,SAAA,KAAwC,EAAgB,MAAM,OAAQ,GAAW,CAAC,EAAO,QAAQ,CAAC,EAElG,GAAA,EAAA,EAAA,SAAA,KACJ,EAAY,OAAS,EAAI,EAAgB,MAAM,EAAY,OAAS,IAAA,EACtE,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAO,OAAS,EAAa,MACzB,GAAG,EAAU,UAAU,EAAa,MAAM,QAC1C,IAAA,EACN,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAM,WAAW,SAAW,GAAK,CAAC,EAAM,MAAQ,EAAM,YAAc,EACtE,EAEM,EAAc,GAAkB,EAAM,WAAW,SAAS,CAAK,EAE/D,GAAyB,EAA6B,UAAY,CACtE,IAAM,EAAgB,EAAgB,MAAM,UACzC,GAAW,EAAW,EAAO,KAAK,GAAK,CAAC,EAAO,QAClD,EAEA,GAAI,GAAiB,EAAG,CACtB,EAAY,MAAQ,EACpB,MACF,CAEA,GAAI,EAAuB,MAAM,SAAW,EAAG,CAC7C,EAAY,MAAQ,GACpB,MACF,CAEA,IAAM,EACJ,IAAa,OACT,EAAuB,MAAM,EAAuB,MAAM,OAAS,GACnE,EAAuB,MAAM,GAEnC,EAAY,MAAQ,EAAgB,MAAM,UACvC,GAAW,EAAO,QAAU,EAAa,KAC5C,CACF,EAEM,GAAe,EAA6B,UAAY,CACxD,EAAM,WAIV,EAAS,EAAI,EACb,EAAsB,CAAQ,EAChC,EAEM,MAAqB,CACzB,EAAS,EAAK,EACd,EAAY,MAAQ,EACtB,EAEM,MAAmB,EACvB,EAAA,EAAA,SAAA,KAAe,EAAS,OAAO,MAAM,CAAC,CACxC,EAEM,EAAgB,GAAyB,CAC7C,EAAK,oBAAqB,CAAU,CACtC,EAEM,EAAgB,GAA+B,CACnD,GAAI,EAAM,UAAY,EAAO,SAC3B,OAGF,IAAM,EAAa,EAAW,EAAO,KAAK,EACtC,EAAM,WAAW,OAAQ,GAAU,IAAU,EAAO,KAAK,EACzD,CAAC,GAAG,EAAM,WAAY,EAAO,KAAK,EAEtC,EAAa,CAAU,EACvB,EAAM,MAAQ,GACd,EAAsB,OAAO,EAC7B,EAAW,CACb,EAEM,EAAe,GAAkB,CACjC,EAAM,WAIV,EAAa,EAAM,WAAW,OAAQ,GAAS,IAAS,CAAK,CAAC,EAC9D,EAAW,EACb,EAEM,EAAc,GAAsB,CACxC,GAAI,EAAgB,MAAM,SAAW,EAAG,CACtC,EAAY,MAAQ,GACpB,MACF,CAEA,IAAM,GAAA,EAAA,EAAA,oBAAA,CAAgC,EAAY,MAAO,EAAgB,MAAO,CAAS,EACzF,EAAY,MAAQ,CACtB,EAEM,GAAW,GAAiB,CAIhC,GAHA,EAAM,MAAS,EAAM,OAA4B,MACjD,EAAK,eAAgB,EAAM,KAAK,EAE5B,CAAC,EAAM,UAAY,CAAC,EAAO,MAAO,CACpC,EAAY,OAAO,EACnB,MACF,CAEA,EAAsB,OAAO,CAC/B,EAEM,OAAqB,CACzB,EAAY,OAAO,CACrB,EAEM,GAAkB,GAAyB,CAC3C,MAAM,SAIV,IAAI,EAAM,MAAQ,MAAO,CACvB,EAAa,EACb,MACF,CAEA,IAAA,EAAA,EAAA,YAAA,CAAgB,CAAK,EAAG,CACtB,EAAM,eAAe,EACrB,EAAa,EACb,MACF,CAEA,GAAI,EAAM,MAAQ,aAAe,CAAC,EAAM,OAAS,EAAM,WAAW,OAAS,EAAG,CAC5E,EAAM,eAAe,EACrB,EAAY,EAAM,WAAW,EAAM,WAAW,OAAS,EAAE,EACzD,MACF,CAEA,GAAI,EAAM,MAAQ,YAAa,CAG7B,GAFA,EAAM,eAAe,EAEjB,CAAC,EAAO,MAAO,CACjB,EAAY,OAAO,EACnB,MACF,CAEA,EAAW,CAAC,EACZ,MACF,CAEA,GAAI,EAAM,MAAQ,UAAW,CAG3B,GAFA,EAAM,eAAe,EAEjB,CAAC,EAAO,MAAO,CACjB,EAAY,MAAM,EAClB,MACF,CAEA,EAAW,EAAE,EACb,MACF,CAEA,GAAI,EAAM,MAAQ,QAAU,EAAO,MAAO,CACxC,EAAM,eAAe,EACrB,EAAsB,OAAO,EAC7B,MACF,CAEA,GAAI,EAAM,MAAQ,OAAS,EAAO,MAAO,CACvC,EAAM,eAAe,EACrB,EAAsB,MAAM,EAC5B,MACF,CAEI,EAAM,MAAQ,SAAW,EAAa,QACxC,EAAM,eAAe,EACrB,EAAa,EAAa,KAAK,EApDjC,CAsDF,EAEM,EAAyB,GAAwB,CACrD,GAAI,CAAC,EAAO,MACV,OAGF,IAAM,EAAS,EAAM,OAEf,aAAkB,OAIpB,EAAQ,OAAO,SAAS,CAAM,GAIlC,EAAa,EACf,SAEA,EAAA,EAAA,MAAA,CACE,EACC,GAAU,CACL,EACF,SAAS,iBAAiB,cAAe,CAAqB,EAE9D,SAAS,oBAAoB,cAAe,CAAqB,CAErE,CACF,GAEA,EAAA,EAAA,gBAAA,KAAsB,CACpB,SAAS,oBAAoB,cAAe,CAAqB,CACnE,CAAC,qDA6JO,MAAA,SAxJA,UAAJ,IAAI,EACH,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,6BA4EX,MAAA,CAzEJ,MAAM,0BACL,QAAO,IAGAA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADiB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAsDlB,MAnDN,EAmDM,+CA5BG,EAAA,SAAA,MAAA,EAAA,EAAA,WAAA,CArBY,EAAA,MAAV,+CAqBF,OAAA,CApBJ,IAAK,EAAO,MACb,MAAM,yCAkBC,EAAA,OAAA,MAAA,CAdI,SACR,WAAc,EAAY,EAAO,KAAK,OAalC,EAAA,EAAA,EAAA,mBAAA,CAX4D,OAAjE,IAAA,EAAA,EAAA,gBAAA,CAA2C,EAAO,KAAK,EAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAU9C,SAAA,CARP,KAAK,SACL,MAAM,6BACL,SAAU,EAAA,SACX,aAAW,mBACV,YAAS,AAAA,EAAA,MAAA,EAAA,EAAA,cAAA,KAAV,CAAA,EAAkB,CAAA,SAAA,CAAA,EACjB,SAAA,EAAA,EAAA,cAAA,CAAK,GAAO,EAAY,EAAO,KAAK,EAAA,CAAA,MAAA,CAAA,kCAEjB,CAAA,EAAA,CAAZ,KAAM,EAAE,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAMd,EAAA,MAAc,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIf,OALP,EAGC,MAAA,EAAA,EAAA,gBAAA,CACK,EAAA,KAAc,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAqBnB,SAAA,EAAA,EAAA,WAAA,CAAA,SAjBK,WAAJ,IAAI,GACI,EAAA,MAAU,CACjB,MAAO,EAAA,MACR,KAAK,OACL,MAAM,wBACN,KAAK,WACL,oBAAkB,OACjB,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,EACf,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,GAAA,EAAA,EAAA,MAAA,CAAS,CAAA,EAAY,IAAA,GACpC,wBAAuB,EAAA,MACvB,eAAc,EAAA,SAAW,IAAA,GACzB,YAAW,EAAA,SAAW,IAAA,GACtB,SAAU,EAAA,SACV,YAAa,EAAA,MACb,QAAO,GACA,WACP,UAAS,kBAKN,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CAGN,EAAA,QAAA,OAFA,MAAM,4BACN,KAAK,yDAML,CAAA,EAAA,OAFA,MAAM,4BACL,KAAM,0BA2EE,EAAA,WAAA,CAvED,KAAK,QAAQ,EAAA,2BAsElB,EAAA,EAAA,EAAA,MAAA,CApEG,CAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAoEH,KAAA,OAnEF,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,MAAM,0BACN,KAAK,UACL,uBAAqB,SAGb,EAAA,MAAgB,SAAM,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASzB,KAVL,EAUK,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,QAAA,CAHJ,MAAO,EAAA,KAAK,MAGR,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,SAAS,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,EAAA,UAAA,CAAA,EAAA,GAAA,EAAA,EAAA,mBAAA,CAoDT,EAAA,SAAA,CAAA,IAAA,CAAA,GAAA,EAAA,EAAA,WAAA,CA9CuB,EAAA,OAAlB,EAAQ,gDA8Cb,KAAA,CA7CF,IAAK,EAAO,KAAA,EAAA,EAAA,EAAA,EAAA,mBAAA,CA4CJ,SAAA,CAzCN,GAAE,IAAA,EAAA,EAAA,MAAA,CAAK,CAAA,EAAS,UAAW,EAAO,QACnC,KAAK,SACL,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,yBAAwB,aACS,IAAU,EAAA,oBAA4C,EAAW,EAAO,KAAK,gBAAkC,EAAO,YAK7J,KAAK,SACJ,gBAAe,EAAW,EAAO,KAAK,EACtC,gBAAe,EAAO,UAAY,IAAA,GAClC,SAAU,EAAO,SACjB,YAAS,AAAA,EAAA,MAAA,EAAA,EAAA,cAAA,KAAV,CAAA,EAAkB,CAAA,SAAA,CAAA,EACjB,QAAK,GAAE,EAAa,CAAM,qBA2BpB,EAAA,OAAA,SAAA,CAvBI,SACR,SAAU,EAAW,EAAO,KAAK,EACjC,OAAQ,IAAU,EAAA,WAqBd,EAAA,EAAA,EAAA,mBAAA,CAXE,OARP,EAQO,EAAA,EAAA,EAAA,mBAAA,CAP+D,OAApE,GAAA,EAAA,EAAA,gBAAA,CAA8C,EAAO,KAAK,EAAA,CAAA,EAElD,EAAO,cAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,GAAA,EAAA,EAAA,gBAAA,CAIK,EAAO,WAAW,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAYlB,OARP,EAQO,CAHG,EAAW,EAAO,KAAK,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,MAAA,CAE7B,CAAA,EAAA,OADC,KAAM"}

package/dist/components/TMultiSelect.vue_vue_type_script_setup_true_lang.js

@@ -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

@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAM,KAAkB,EAAY,cAAc,GAC5C,KAAY,EAAY,OAAO,GAC/B,KAAQ,EAAY,GAAG,GAEvB,IAAQ,GA6BR,IAAO,GAkBP,IAAQ,GAAS,GACjB,IAAY,GAAS,gBAAgB,GACrC,IAAU,EAAwB,IAAI,GACtC,IAAW,EAA6B,IAAI,GAC5C,IAAQ,EAAI,EAAE,GACd,IAAc,EAAI,EAAE,GAEpB,KAAa,QAAe;GAChC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,iBAAc,GAAG,MAAS;GAChE,OAAO;IACL,cAAc,OAAO,KAAiB,WAAW,IAAe;IAChE,GAAG;GACL;EACF,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,KAAc,QAAe;GACjC;GACA,mBAAmB,EAAM;GACzB;IACE,eAAe,EAAM;IACrB,cAAc,EAAM;IACpB,cAAc,EAAM;IACpB,WAAW,EAAO;GACpB;GACA,EAAM;EACR,CAAC,GAEK,KAAY,QAAe,EAAM,KAAK,GAEtC,MAAa,MAAkB,EAAM,KAAK,CAAC,CAAC,YAAY,GAExD,IAAkB,QAAe;GACrC,IAAM,IAAkB,GAAU,EAAM,KAAK;GAM7C,OAJK,IAIE,EAAM,QAAQ,QAAQ,MAEpB;IADS,EAAO;IAAO,EAAO,eAAe;IAAI,GAAI,EAAO,YAAY,CAAC;GACzE,CAAA,CAAO,MAAM,MAAU,EAAM,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CAC5E,IANQ,EAAM;EAOjB,CAAC,GAEK,IAAkB,QACtB,EAAM,QAAQ,QAAQ,MAAW,EAAM,WAAW,SAAS,EAAO,KAAK,CAAC,CAC1E,GAEM,IAAc,QAAe,EAAgB,MAAM,MAAM,GAAG,EAAM,cAAc,CAAC,GACjF,IAAiB,QACrB,KAAK,IAAI,EAAgB,MAAM,SAAS,EAAY,MAAM,QAAQ,CAAC,CACrE,GAEM,IAAyB,QAAe,EAAgB,MAAM,QAAQ,MAAW,CAAC,EAAO,QAAQ,CAAC,GAElG,IAAe,QACnB,EAAY,SAAS,IAAI,EAAgB,MAAM,EAAY,SAAS,KAAA,CACtE,GAEM,KAAmB,QACvB,EAAO,SAAS,EAAa,QACzB,GAAG,EAAU,UAAU,EAAa,MAAM,UAC1C,KAAA,CACN,GAEM,KAAmB,QACvB,EAAM,WAAW,WAAW,KAAK,CAAC,EAAM,QAAQ,EAAM,cAAc,EACtE,GAEM,KAAc,MAAkB,EAAM,WAAW,SAAS,CAAK,GAE/D,KAAyB,IAA6B,YAAY;GACtE,IAAM,IAAgB,EAAgB,MAAM,WACzC,MAAW,EAAW,EAAO,KAAK,KAAK,CAAC,EAAO,QAClD;GAEA,IAAI,KAAiB,GAAG;IACtB,EAAY,QAAQ;IACpB;GACF;GAEA,IAAI,EAAuB,MAAM,WAAW,GAAG;IAC7C,EAAY,QAAQ;IACpB;GACF;GAEA,IAAM,IACJ,MAAa,SACT,EAAuB,MAAM,EAAuB,MAAM,SAAS,KACnE,EAAuB,MAAM;GAEnC,EAAY,QAAQ,EAAgB,MAAM,WACvC,MAAW,EAAO,UAAU,EAAa,KAC5C;EACF,GAEM,KAAe,IAA6B,YAAY;GACxD,EAAM,aAIV,EAAS,EAAI,GACb,EAAsB,CAAQ;EAChC,GAEM,UAAqB;GAEzB,AADA,EAAS,EAAK,GACd,EAAY,QAAQ;EACtB,GAEM,UAAmB;GACvB,SAAe,EAAS,OAAO,MAAM,CAAC;EACxC,GAEM,KAAgB,MAAyB;GAC7C,EAAK,qBAAqB,CAAU;EACtC,GAEM,KAAgB,MAA+B;GACnD,IAAI,EAAM,YAAY,EAAO,UAC3B;GAGF,IAAM,IAAa,EAAW,EAAO,KAAK,IACtC,EAAM,WAAW,QAAQ,MAAU,MAAU,EAAO,KAAK,IACzD,CAAC,GAAG,EAAM,YAAY,EAAO,KAAK;GAKtC,AAHA,EAAa,CAAU,GACvB,EAAM,QAAQ,IACd,EAAsB,OAAO,GAC7B,EAAW;EACb,GAEM,KAAe,MAAkB;GACjC,EAAM,aAIV,EAAa,EAAM,WAAW,QAAQ,MAAS,MAAS,CAAK,CAAC,GAC9D,EAAW;EACb,GAEM,KAAc,MAAsB;GACxC,IAAI,EAAgB,MAAM,WAAW,GAAG;IACtC,EAAY,QAAQ;IACpB;GACF;GAEA,IAAM,IAAY,GAAoB,EAAY,OAAO,EAAgB,OAAO,CAAS;GACzF,EAAY,QAAQ;EACtB,GAEM,MAAW,MAAiB;GAIhC,IAHA,EAAM,QAAS,EAAM,OAA4B,OACjD,EAAK,gBAAgB,EAAM,KAAK,GAE5B,CAAC,EAAM,YAAY,CAAC,EAAO,OAAO;IACpC,EAAY,OAAO;IACnB;GACF;GAEA,EAAsB,OAAO;EAC/B,GAEM,WAAqB;GACzB,EAAY,OAAO;EACrB,GAEM,MAAkB,MAAyB;GAC3C,OAAM,UAIV;QAAI,EAAM,QAAQ,OAAO;KACvB,EAAa;KACb;IACF;IAEA,IAAI,GAAY,CAAK,GAAG;KAEtB,AADA,EAAM,eAAe,GACrB,EAAa;KACb;IACF;IAEA,IAAI,EAAM,QAAQ,eAAe,CAAC,EAAM,SAAS,EAAM,WAAW,SAAS,GAAG;KAE5E,AADA,EAAM,eAAe,GACrB,EAAY,EAAM,WAAW,EAAM,WAAW,SAAS,EAAE;KACzD;IACF;IAEA,IAAI,EAAM,QAAQ,aAAa;KAG7B,IAFA,EAAM,eAAe,GAEjB,CAAC,EAAO,OAAO;MACjB,EAAY,OAAO;MACnB;KACF;KAEA,EAAW,CAAC;KACZ;IACF;IAEA,IAAI,EAAM,QAAQ,WAAW;KAG3B,IAFA,EAAM,eAAe,GAEjB,CAAC,EAAO,OAAO;MACjB,EAAY,MAAM;MAClB;KACF;KAEA,EAAW,EAAE;KACb;IACF;IAEA,IAAI,EAAM,QAAQ,UAAU,EAAO,OAAO;KAExC,AADA,EAAM,eAAe,GACrB,EAAsB,OAAO;KAC7B;IACF;IAEA,IAAI,EAAM,QAAQ,SAAS,EAAO,OAAO;KAEvC,AADA,EAAM,eAAe,GACrB,EAAsB,MAAM;KAC5B;IACF;IAEA,AAAI,EAAM,QAAQ,WAAW,EAAa,UACxC,EAAM,eAAe,GACrB,EAAa,EAAa,KAAK;GApDjC;EAsDF,GAEM,KAAyB,MAAwB;GACrD,IAAI,CAAC,EAAO,OACV;GAGF,IAAM,IAAS,EAAM;GAEf,aAAkB,SAIpB,EAAQ,OAAO,SAAS,CAAM,KAIlC,EAAa;EACf;SAEA,GACE,IACC,MAAU;GACT,AAAI,IACF,SAAS,iBAAiB,eAAe,CAAqB,IAE9D,SAAS,oBAAoB,eAAe,CAAqB;EAErE,CACF,GAEA,QAAsB;GACpB,SAAS,oBAAoB,eAAe,CAAqB;EACnE,CAAC,mBAIC,EAyJM,OAAA;YAxJA;GAAJ,KAAI;GACH,OAAK,EAAE,GAAA,KAAW;GAClB,OAAK,GAAE,GAAA,KAAS;MAEjB,EA0EM,OAAA;GAzEJ,OAAM;GACL,SAAO;;GAGAA,EAAAA,OAAO,UAAA,EAAA,GADf,EAKO,QALP,IAKO,CADL,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGxB,EAmDM,OAnDN,IAmDM;YAlDJ,EAsBO,GAAA,MAAA,EArBY,EAAA,QAAV,YADT,EAsBO,QAAA;KApBJ,KAAK,EAAO;KACb,OAAM;QAEN,EAgBO,EAAA,QAAA,OAAA;KAdI;KACR,cAAc,EAAY,EAAO,KAAK;aAalC,CAXL,EAAiE,QAAjE,IAAiE,EAAtB,EAAO,KAAK,GAAA,CAAA,GACvD,EASS,UAAA;KARP,MAAK;KACL,OAAM;KACL,UAAU,EAAA;KACX,cAAW;KACV,aAAS,AAAA,EAAA,OAAA,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;KACjB,SAAK,GAAA,MAAO,EAAY,EAAO,KAAK,GAAA,CAAA,MAAA,CAAA;QAErC,EAAoB,EAAA,EAAA,GAAA,EAAZ,MAAM,GAAE,CAAA,CAAA,GAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA;IAMd,EAAA,QAAc,KAAA,EAAA,GADtB,EAKO,QALP,IAGC,OACE,EAAG,EAAA,KAAc,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAGpB,EAkBC,SAlBD,GAkBC;cAjBK;KAAJ,KAAI;OACI,GAAA,OAAU;KACjB,OAAO,EAAA;KACR,MAAK;KACL,OAAM;KACN,MAAK;KACL,qBAAkB;KACjB,iBAAe,EAAA,CAAA;KACf,iBAAe,EAAA,CAAA,IAAS,EAAA,CAAA,IAAY,KAAA;KACpC,yBAAuB,GAAA;KACvB,gBAAc,EAAA,WAAW,KAAA;KACzB,aAAW,EAAA,WAAW,KAAA;KACtB,UAAU,EAAA;KACV,aAAa,GAAA;KACb,SAAO;KACA;KACP,WAAS;;;GAKN,EAAA,WAAA,EAAA,GADR,EAIE,GAAA;;IAFA,OAAM;IACN,MAAK;eAEP,EAIE,EAAA,EAAA,GAAA;;IAFA,OAAM;IACL,MAAM;;MAIX,EAuEa,GAAA,EAvED,MAAK,SAAQ,GAAA;qBAsElB,CApEG,EAAA,CAAA,KAAA,EAAA,GADR,EAqEK,MAAA;;IAnEF,IAAI,EAAA,CAAA;IACL,OAAM;IACN,MAAK;IACL,wBAAqB;OAGb,EAAA,MAAgB,WAAM,KAAA,EAAA,GAD9B,EAUK,MAVL,GAUK,CANH,EAKO,EAAA,QAAA,SAAA,EAHJ,OAAO,EAAA,MAAK,SAGR,CAAA,EAAA,EADF,EAAA,SAAS,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,MAAA,EAAA,EAAA,GAKd,EA+CK,GAAA,EAAA,KAAA,EAAA,GAAA,EA9CuB,EAAA,QAAlB,GAAQ,YADlB,EA+CK,MAAA,EA7CF,KAAK,EAAO,MAAA,GAAA,CAEb,EA0CS,UAAA;IAzCN,IAAE,GAAK,EAAA,CAAA,EAAS,UAAW,EAAO;IACnC,MAAK;IACL,OAAK,EAAA,CAAC,0BAAwB;kBACS,MAAU,EAAA;oBAA4C,EAAW,EAAO,KAAK;oBAAkC,EAAO;;IAK7J,MAAK;IACJ,iBAAe,EAAW,EAAO,KAAK;IACtC,iBAAe,EAAO,YAAY,KAAA;IAClC,UAAU,EAAO;IACjB,aAAS,AAAA,EAAA,OAAA,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;IACjB,UAAK,MAAE,EAAa,CAAM;OAE3B,EAyBO,EAAA,QAAA,UAAA;IAvBI;IACR,UAAU,EAAW,EAAO,KAAK;IACjC,QAAQ,MAAU,EAAA;YAqBd,CAnBL,EAQO,QARP,IAQO,CAPL,EAAoE,QAApE,IAAoE,EAAtB,EAAO,KAAK,GAAA,CAAA,GAElD,EAAO,eAAA,EAAA,GADf,EAKO,QALP,IAKO,EADF,EAAO,WAAW,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,GAIzB,EAQO,QARP,IAQO,CAHG,EAAW,EAAO,KAAK,KAAA,EAAA,GAD/B,EAGE,EAAA,EAAA,GAAA;;IADC,MAAM"}
+{"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

@@ -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":""}
+{"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

@@ -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":""}
+{"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":""}

package/dist/components/TNavMenu.vue.d.ts

@@ -1,11 +1,16 @@
-import { Component } from 'vue';
+import { TIconInput } from '@treeui/icons';
 import { TSize } from '../types/contracts';
 export interface TNavMenuItem {
     label: string;
     value: string;
     shortLabel?: string;
     description?: string;
-    icon?: Component;
+    /**
+     * A registered icon name (`'cpu'`), or any component. A name is the simpler
+     * form: it needs no import and no `markRaw`, since a string is not made
+     * reactive when the item lands in a `ref`.
+     */
+    icon?: TIconInput;
     to?: string | Record<string, unknown>;
     badge?: string | number;
     disabled?: boolean;

package/dist/components/TNavMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TNavMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/TNavMenu.vue"],"names":[],"mappings":"AAyVA,OAAO,EAAwE,KAAK,SAAS,EAAgC,MAAM,KAAK,CAAC;AACzI,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAsOJ,iBAAS,cAAc;WAkJT,OAAO,IAA6B;;eAnWzC,CAAC,KAAK,EAAE;YACb,IAAI,EAAE,YAAY,CAAC;YACnB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,EAAE,OAAO,CAAC;SACpB,KAAK,OAAO;gBACL,MAAM,OAAO;;eANd,CAAC,KAAK,EAAE;YACb,IAAI,EAAE,YAAY,CAAC;YACnB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,EAAE,OAAO,CAAC;SACpB,KAAK,OAAO;gBACL,MAAM,OAAO;;;;EAkWtB;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;gBA5ZJ,MAAM;kBACJ,MAAM;cAIV,OAAO;UAFX,KAAK;WADJ,YAAY,EAAE;WAId,OAAO;eAFH,OAAO;6EAgarB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TNavMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/TNavMenu.vue"],"names":[],"mappings":"AAsWA,OAAO,EAAmB,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEjE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA6OJ,iBAAS,cAAc;WAkJT,OAAO,IAA6B;;eA1WzC,CAAC,KAAK,EAAE;YACb,IAAI,EAAE,YAAY,CAAC;YACnB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,EAAE,OAAO,CAAC;SACpB,KAAK,OAAO;gBACL,MAAM,OAAO;;eANd,CAAC,KAAK,EAAE;YACb,IAAI,EAAE,YAAY,CAAC;YACnB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,EAAE,OAAO,CAAC;SACpB,KAAK,OAAO;gBACL,MAAM,OAAO;;;;EAyWtB;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;gBApaJ,MAAM;kBACJ,MAAM;cAIV,OAAO;UAFX,KAAK;WADJ,YAAY,EAAE;WAId,OAAO;eAFH,OAAO;6EAwarB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.cjs

@@ -1,2 +1,2 @@
-const e=require("./sidebar.cjs");let t=require("vue"),n=require("@treeui/utils");var r={key:0,class:`t-nav-menu__list`},i={key:1,class:`t-nav-menu__marker`,"aria-hidden":`true`},a={class:`t-nav-menu__copy`},o={class:`t-nav-menu__label`},s={key:0,class:`t-nav-menu__description`},c={key:2,class:`t-nav-menu__badge`},l={key:1,class:`t-nav-menu__empty`},u=(0,t.defineComponent)({inheritAttrs:!1,__name:`TNavMenu`,props:{modelValue:{default:void 0},defaultValue:{default:``},items:{default:()=>[]},size:{default:`md`},collapsed:{type:Boolean,default:void 0},disabled:{type:Boolean,default:!1},exact:{type:Boolean,default:!0}},emits:[`update:modelValue`,`select`],setup(u,{emit:d}){let f=u,p=d,m=(0,t.useAttrs)(),h=(0,t.inject)(e.treeSidebarInjectionKey,null),g=(0,t.ref)(f.defaultValue),_=(0,t.ref)(new Map),v=(0,t.getCurrentInstance)(),y=(0,t.computed)(()=>f.modelValue??g.value),b=(0,t.computed)(()=>f.collapsed??h?.collapsed.value??!1),x=(0,t.computed)(()=>v?.appContext.components.RouterLink??null),S=e=>e.to&&x.value?x.value:`button`,C=e=>!!e.to&&x.value!==null,w=e=>{if(C(e))return f.modelValue===void 0?e.exact??f.exact?``:`is-selected`:``},T=e=>{if(C(e))return f.modelValue===void 0?`is-selected`:``},E=()=>{let e=f.items.findIndex(e=>e.value===y.value&&!e.disabled);return e>=0?e:f.items.findIndex(e=>!e.disabled)},D=(0,t.ref)(E()),O=(0,t.computed)(()=>[`t-nav-menu`,`t-nav-menu--${f.size}`,{"is-collapsed":b.value,"is-disabled":f.disabled},m.class]),k=(0,t.computed)(()=>m.style),A=(0,t.computed)(()=>{let{class:e,style:t,...n}=m;return n}),j=e=>y.value===e,M=(e,t)=>{let n=e instanceof HTMLElement?e:e&&`$el`in e&&e.$el instanceof HTMLElement?e.$el:null;n?_.value.set(t,n):_.value.delete(t)},N=e=>{let n=f.items[e];n&&(D.value=e,(0,t.nextTick)(()=>_.value.get(n.value)?.focus()))},P=e=>{f.disabled||e.disabled||(f.modelValue===void 0&&(g.value=e.value),p(`update:modelValue`,e.value),p(`select`,e.value,e))},F=(e,t)=>{if(!f.disabled){if(e.key===`Home`){e.preventDefault();let t=f.items.findIndex(e=>!e.disabled);t>=0&&N(t);return}if(e.key===`End`){e.preventDefault();let t=[...f.items].reverse().findIndex(e=>!e.disabled);t>=0&&N(f.items.length-1-t);return}if(e.key===`ArrowDown`||e.key===`ArrowRight`){e.preventDefault();let r=(0,n.getNextEnabledIndex)(t,f.items,1);r>=0&&N(r);return}if(e.key===`ArrowUp`||e.key===`ArrowLeft`){e.preventDefault();let r=(0,n.getNextEnabledIndex)(t,f.items,-1);r>=0&&N(r);return}(0,n.isActivationKey)(e)&&(e.preventDefault(),P(f.items[t]))}},I=e=>D.value===e?0:-1;return(0,t.watch)(()=>[f.items,f.modelValue],()=>{let e=E();D.value=e>=0?e:-1},{deep:!0}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`nav`,(0,t.mergeProps)(A.value,{class:O.value,style:k.value}),[u.items.length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,r,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(u.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,class:`t-nav-menu__entry`},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(S(n)),{ref_for:!0,ref:e=>M(e,n.value),type:n.to?void 0:`button`,to:n.to||void 0,class:(0,t.normalizeClass)([`t-nav-menu__item`,{"is-selected":j(n.value),"is-disabled":u.disabled||n.disabled}]),"active-class":w(n),"exact-active-class":T(n),disabled:!n.to&&(u.disabled||n.disabled)||void 0,"aria-disabled":n.to&&(u.disabled||n.disabled)||void 0,"aria-current":j(n.value)?`page`:void 0,tabindex:u.disabled||n.disabled?-1:I(r),title:b.value?n.label:void 0,onClick:e=>P(n),onKeydown:e=>F(e,r),onFocus:e=>D.value=r},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`item`,{item:n,selected:j(n.value),focused:D.value===r,collapsed:b.value},()=>[n.icon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(n.icon),{key:0,class:`t-nav-menu__icon`,"aria-hidden":`true`})):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,i,(0,t.toDisplayString)((n.shortLabel??n.label.charAt(0)).toUpperCase()),1)),(0,t.createElementVNode)(`span`,a,[(0,t.createElementVNode)(`span`,o,(0,t.toDisplayString)(n.label),1),n.description?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,s,(0,t.toDisplayString)(n.description),1)):(0,t.createCommentVNode)(``,!0)]),n.badge!==void 0&&n.badge!==null?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,c,(0,t.toDisplayString)(n.badge),1)):(0,t.createCommentVNode)(``,!0)])]),_:2},1064,[`type`,`to`,`class`,`active-class`,`exact-active-class`,`disabled`,`aria-disabled`,`aria-current`,`tabindex`,`title`,`onClick`,`onKeydown`,`onFocus`]))]))),128))])):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,l,[(0,t.renderSlot)(e.$slots,`empty`,{},()=>[n[0]||=(0,t.createTextVNode)(` No navigation items. `,-1)])]))],16))}});exports.default=u;
+const e=require("./sidebar.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i={key:0,class:`t-nav-menu__list`},a={key:1,class:`t-nav-menu__marker`,"aria-hidden":`true`},o={class:`t-nav-menu__copy`},s={class:`t-nav-menu__label`},c={key:0,class:`t-nav-menu__description`},l={key:2,class:`t-nav-menu__badge`},u={key:1,class:`t-nav-menu__empty`},d=(0,t.defineComponent)({inheritAttrs:!1,__name:`TNavMenu`,props:{modelValue:{default:void 0},defaultValue:{default:``},items:{default:()=>[]},size:{default:`md`},collapsed:{type:Boolean,default:void 0},disabled:{type:Boolean,default:!1},exact:{type:Boolean,default:!0}},emits:[`update:modelValue`,`select`],setup(d,{emit:f}){let p=d,m=f,h=e=>(0,r.resolveTreeIcon)(e.icon),g=(0,t.useAttrs)(),_=(0,t.inject)(e.treeSidebarInjectionKey,null),v=(0,t.ref)(p.defaultValue),y=(0,t.ref)(new Map),b=(0,t.getCurrentInstance)(),x=(0,t.computed)(()=>p.modelValue??v.value),S=(0,t.computed)(()=>p.collapsed??_?.collapsed.value??!1),C=(0,t.computed)(()=>b?.appContext.components.RouterLink??null),w=e=>e.to&&C.value?C.value:`button`,T=e=>!!e.to&&C.value!==null,E=e=>{if(T(e))return p.modelValue===void 0?e.exact??p.exact?``:`is-selected`:``},D=e=>{if(T(e))return p.modelValue===void 0?`is-selected`:``},O=()=>{let e=p.items.findIndex(e=>e.value===x.value&&!e.disabled);return e>=0?e:p.items.findIndex(e=>!e.disabled)},k=(0,t.ref)(O()),A=(0,t.computed)(()=>[`t-nav-menu`,`t-nav-menu--${p.size}`,{"is-collapsed":S.value,"is-disabled":p.disabled},g.class]),j=(0,t.computed)(()=>g.style),M=(0,t.computed)(()=>{let{class:e,style:t,...n}=g;return n}),N=e=>x.value===e,P=(e,t)=>{let n=e instanceof HTMLElement?e:e&&`$el`in e&&e.$el instanceof HTMLElement?e.$el:null;n?y.value.set(t,n):y.value.delete(t)},F=e=>{let n=p.items[e];n&&(k.value=e,(0,t.nextTick)(()=>y.value.get(n.value)?.focus()))},I=e=>{p.disabled||e.disabled||(p.modelValue===void 0&&(v.value=e.value),m(`update:modelValue`,e.value),m(`select`,e.value,e))},L=(e,t)=>{if(!p.disabled){if(e.key===`Home`){e.preventDefault();let t=p.items.findIndex(e=>!e.disabled);t>=0&&F(t);return}if(e.key===`End`){e.preventDefault();let t=[...p.items].reverse().findIndex(e=>!e.disabled);t>=0&&F(p.items.length-1-t);return}if(e.key===`ArrowDown`||e.key===`ArrowRight`){e.preventDefault();let r=(0,n.getNextEnabledIndex)(t,p.items,1);r>=0&&F(r);return}if(e.key===`ArrowUp`||e.key===`ArrowLeft`){e.preventDefault();let r=(0,n.getNextEnabledIndex)(t,p.items,-1);r>=0&&F(r);return}(0,n.isActivationKey)(e)&&(e.preventDefault(),I(p.items[t]))}},R=e=>k.value===e?0:-1;return(0,t.watch)(()=>[p.items,p.modelValue],()=>{let e=O();k.value=e>=0?e:-1},{deep:!0}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`nav`,(0,t.mergeProps)(M.value,{class:A.value,style:j.value}),[d.items.length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,i,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(d.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,class:`t-nav-menu__entry`},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(w(n)),{ref_for:!0,ref:e=>P(e,n.value),type:n.to?void 0:`button`,to:n.to||void 0,class:(0,t.normalizeClass)([`t-nav-menu__item`,{"is-selected":N(n.value),"is-disabled":d.disabled||n.disabled}]),"active-class":E(n),"exact-active-class":D(n),disabled:!n.to&&(d.disabled||n.disabled)||void 0,"aria-disabled":n.to&&(d.disabled||n.disabled)||void 0,"aria-current":N(n.value)?`page`:void 0,tabindex:d.disabled||n.disabled?-1:R(r),title:S.value?n.label:void 0,onClick:e=>I(n),onKeydown:e=>L(e,r),onFocus:e=>k.value=r},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`item`,{item:n,selected:N(n.value),focused:k.value===r,collapsed:S.value},()=>[h(n)?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(h(n)),{key:0,class:`t-nav-menu__icon`,"aria-hidden":`true`})):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,a,(0,t.toDisplayString)((n.shortLabel??n.label.charAt(0)).toUpperCase()),1)),(0,t.createElementVNode)(`span`,o,[(0,t.createElementVNode)(`span`,s,(0,t.toDisplayString)(n.label),1),n.description?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,c,(0,t.toDisplayString)(n.description),1)):(0,t.createCommentVNode)(``,!0)]),n.badge!==void 0&&n.badge!==null?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,l,(0,t.toDisplayString)(n.badge),1)):(0,t.createCommentVNode)(``,!0)])]),_:2},1064,[`type`,`to`,`class`,`active-class`,`exact-active-class`,`disabled`,`aria-disabled`,`aria-current`,`tabindex`,`title`,`onClick`,`onKeydown`,`onFocus`]))]))),128))])):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,u,[(0,t.renderSlot)(e.$slots,`empty`,{},()=>[n[0]||=(0,t.createTextVNode)(` No navigation items. `,-1)])]))],16))}});exports.default=d;
 //# sourceMappingURL=TNavMenu.vue_vue_type_script_setup_true_lang.cjs.map