@treeui/vue 0.8.0 → 0.10.0

package/dist/components/TCombobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TCombobox.cjs","names":[],"sources":["../../src/components/TCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isEscapeKey } from '@treeui/utils';\nimport { computed, 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 TComboboxOption {\n  label: string;\n  value: string;\n  description?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    options?: TComboboxOption[];\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  }>(),\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  },\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  option?: (props: {\n    option: TComboboxOption;\n    selected: boolean;\n    active: boolean;\n  }) => unknown;\n  empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-combobox');\nconst rootRef = ref<HTMLElement | null>(null);\nconst activeIndex = ref(-1);\nconst query = ref('');\n\nconst normalize = (value: string) => value.trim().toLowerCase();\nconst getOptionId = (value: string) => `${listboxId}-option-${value}`;\n\nconst selectedOption = computed(() =>\n  props.options.find((option) => option.value === props.modelValue),\n);\n\nconst selectedLabel = computed(() => selectedOption.value?.label ?? '');\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 listboxLabel = computed(() =>\n  typeof attrs['aria-label'] === 'string' ? attrs['aria-label'] : undefined,\n);\n\nconst listboxLabelledby = computed(() =>\n  typeof attrs['aria-labelledby'] === 'string' ? attrs['aria-labelledby'] : undefined,\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-combobox',\n  `t-combobox--${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 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 = [\n      option.label,\n      option.description ?? '',\n      ...(option.keywords ?? []),\n    ];\n\n    return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n  });\n});\n\nconst enabledFilteredIndexes = computed(() =>\n  filteredOptions.value.reduce<number[]>((indexes, option, index) => {\n    if (!option.disabled) {\n      indexes.push(index);\n    }\n\n    return indexes;\n  }, []),\n);\n\nconst activeOption = computed(() =>\n  activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n  isOpen.value && activeOption.value ? getOptionId(activeOption.value.value) : undefined,\n);\n\nconst syncQueryFromSelection = () => {\n  query.value = selectedLabel.value;\n};\n\nconst setInitialActiveIndex = (fallback: 'first' | 'last' = 'first') => {\n  const selectedIndex = filteredOptions.value.findIndex((option) =>\n    option.value === props.modelValue && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    activeIndex.value = selectedIndex;\n    return;\n  }\n\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  activeIndex.value =\n    fallback === 'last'\n      ? enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1]\n      : enabledFilteredIndexes.value[0];\n};\n\nconst moveActive = (direction: 1 | -1) => {\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const currentEnabledIndex = enabledFilteredIndexes.value.indexOf(activeIndex.value);\n\n  if (currentEnabledIndex === -1) {\n    activeIndex.value =\n      direction === 1\n        ? enabledFilteredIndexes.value[0]\n        : enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1];\n    return;\n  }\n\n  const nextEnabledIndex = currentEnabledIndex + direction;\n\n  if (nextEnabledIndex < 0 || nextEnabledIndex >= enabledFilteredIndexes.value.length) {\n    return;\n  }\n\n  activeIndex.value = enabledFilteredIndexes.value[nextEnabledIndex];\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 commitPendingClear = () => {\n  if (query.value.trim() !== '' || !props.modelValue) {\n    return false;\n  }\n\n  emit('update:modelValue', '');\n  return true;\n};\n\nconst closeListbox = (restoreSelection = false) => {\n  setValue(false);\n  activeIndex.value = -1;\n\n  if (!restoreSelection) {\n    return;\n  }\n\n  if (commitPendingClear()) {\n    return;\n  }\n\n  if (selectedLabel.value && query.value !== selectedLabel.value) {\n    query.value = selectedLabel.value;\n  }\n};\n\nconst selectOption = (option: TComboboxOption) => {\n  if (option.disabled) {\n    return;\n  }\n\n  query.value = option.label;\n  emit('update:modelValue', option.value);\n  closeListbox(false);\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) {\n    return;\n  }\n\n  if (!isOpen.value) {\n    openListbox('first');\n    return;\n  }\n\n  setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n  openListbox('first');\n};\n\nconst onInputClick = () => {\n  if (!isOpen.value) {\n    openListbox('first');\n  }\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event)) {\n    if (isOpen.value) {\n      event.preventDefault();\n      closeListbox(true);\n    }\n\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('first');\n      } else {\n        moveActive(1);\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('last');\n      } else {\n        moveActive(-1);\n      }\n      break;\n    case 'Enter':\n      if (isOpen.value && activeOption.value && !activeOption.value.disabled) {\n        event.preventDefault();\n        selectOption(activeOption.value);\n      }\n      break;\n    case 'Home':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('first');\n      break;\n    case 'End':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('last');\n      break;\n    case 'Tab':\n      closeListbox(true);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onOptionPointerEnter = (index: number) => {\n  const option = filteredOptions.value[index];\n\n  if (option && !option.disabled) {\n    activeIndex.value = index;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeListbox(true);\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n    }\n  },\n  { immediate: true },\n);\n\nwatch(\n  () => props.options,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n      return;\n    }\n\n    setInitialActiveIndex('first');\n  },\n  { deep: true },\n);\n\nwatch(filteredOptions, () => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  if (filteredOptions.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const current = filteredOptions.value[activeIndex.value];\n\n  if (!current || current.disabled) {\n    setInitialActiveIndex('first');\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    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <div class=\"t-combobox__control\">\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-combobox__slot t-combobox__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <input\n        v-bind=\"inputAttrs\"\n        class=\"t-combobox__input\"\n        role=\"combobox\"\n        type=\"text\"\n        :value=\"query\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :aria-controls=\"isOpen ? listboxId : undefined\"\n        :aria-expanded=\"isOpen\"\n        :aria-activedescendant=\"activeDescendant\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-busy=\"loading || undefined\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        @input=\"onInput\"\n        @focus=\"onInputFocus\"\n        @click=\"onInputClick\"\n        @keydown=\"onInputKeydown\"\n      >\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-combobox__indicator\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </div>\n\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        role=\"listbox\"\n        class=\"t-combobox__listbox\"\n        :aria-label=\"listboxLabel\"\n        :aria-labelledby=\"listboxLabelledby\"\n      >\n        <li\n          v-if=\"filteredOptions.length === 0\"\n          class=\"t-combobox__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            :id=\"getOptionId(option.value)\"\n            :key=\"option.value\"\n            role=\"option\"\n            class=\"t-combobox__option\"\n            :class=\"{\n              'is-active': index === activeIndex,\n              'is-disabled': option.disabled,\n              'is-selected': option.value === modelValue,\n            }\"\n            :aria-selected=\"option.value === modelValue\"\n            :aria-disabled=\"option.disabled || undefined\"\n            @mouseenter=\"onOptionPointerEnter(index)\"\n            @click=\"selectOption(option)\"\n          >\n            <slot\n              name=\"option\"\n              :option=\"option\"\n              :selected=\"option.value === modelValue\"\n              :active=\"index === activeIndex\"\n            >\n              <span class=\"t-combobox__option-copy\">\n                <span class=\"t-combobox__option-label\">{{ option.label }}</span>\n                <span\n                  v-if=\"option.description\"\n                  class=\"t-combobox__option-description\"\n                >\n                  {{ option.description }}\n                </span>\n              </span>\n              <svg\n                v-if=\"option.value === modelValue\"\n                class=\"t-combobox__check\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n              </svg>\n            </slot>\n          </li>\n        </template>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TCombobox.js

@@ -0,0 +1,7 @@
+import e from "./TCombobox.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TCombobox.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TCombobox.js.map

package/dist/components/TCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TCombobox.js","names":[],"sources":["../../src/components/TCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isEscapeKey } from '@treeui/utils';\nimport { computed, 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 TComboboxOption {\n  label: string;\n  value: string;\n  description?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    options?: TComboboxOption[];\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  }>(),\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  },\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  option?: (props: {\n    option: TComboboxOption;\n    selected: boolean;\n    active: boolean;\n  }) => unknown;\n  empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-combobox');\nconst rootRef = ref<HTMLElement | null>(null);\nconst activeIndex = ref(-1);\nconst query = ref('');\n\nconst normalize = (value: string) => value.trim().toLowerCase();\nconst getOptionId = (value: string) => `${listboxId}-option-${value}`;\n\nconst selectedOption = computed(() =>\n  props.options.find((option) => option.value === props.modelValue),\n);\n\nconst selectedLabel = computed(() => selectedOption.value?.label ?? '');\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 listboxLabel = computed(() =>\n  typeof attrs['aria-label'] === 'string' ? attrs['aria-label'] : undefined,\n);\n\nconst listboxLabelledby = computed(() =>\n  typeof attrs['aria-labelledby'] === 'string' ? attrs['aria-labelledby'] : undefined,\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-combobox',\n  `t-combobox--${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 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 = [\n      option.label,\n      option.description ?? '',\n      ...(option.keywords ?? []),\n    ];\n\n    return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n  });\n});\n\nconst enabledFilteredIndexes = computed(() =>\n  filteredOptions.value.reduce<number[]>((indexes, option, index) => {\n    if (!option.disabled) {\n      indexes.push(index);\n    }\n\n    return indexes;\n  }, []),\n);\n\nconst activeOption = computed(() =>\n  activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n  isOpen.value && activeOption.value ? getOptionId(activeOption.value.value) : undefined,\n);\n\nconst syncQueryFromSelection = () => {\n  query.value = selectedLabel.value;\n};\n\nconst setInitialActiveIndex = (fallback: 'first' | 'last' = 'first') => {\n  const selectedIndex = filteredOptions.value.findIndex((option) =>\n    option.value === props.modelValue && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    activeIndex.value = selectedIndex;\n    return;\n  }\n\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  activeIndex.value =\n    fallback === 'last'\n      ? enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1]\n      : enabledFilteredIndexes.value[0];\n};\n\nconst moveActive = (direction: 1 | -1) => {\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const currentEnabledIndex = enabledFilteredIndexes.value.indexOf(activeIndex.value);\n\n  if (currentEnabledIndex === -1) {\n    activeIndex.value =\n      direction === 1\n        ? enabledFilteredIndexes.value[0]\n        : enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1];\n    return;\n  }\n\n  const nextEnabledIndex = currentEnabledIndex + direction;\n\n  if (nextEnabledIndex < 0 || nextEnabledIndex >= enabledFilteredIndexes.value.length) {\n    return;\n  }\n\n  activeIndex.value = enabledFilteredIndexes.value[nextEnabledIndex];\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 commitPendingClear = () => {\n  if (query.value.trim() !== '' || !props.modelValue) {\n    return false;\n  }\n\n  emit('update:modelValue', '');\n  return true;\n};\n\nconst closeListbox = (restoreSelection = false) => {\n  setValue(false);\n  activeIndex.value = -1;\n\n  if (!restoreSelection) {\n    return;\n  }\n\n  if (commitPendingClear()) {\n    return;\n  }\n\n  if (selectedLabel.value && query.value !== selectedLabel.value) {\n    query.value = selectedLabel.value;\n  }\n};\n\nconst selectOption = (option: TComboboxOption) => {\n  if (option.disabled) {\n    return;\n  }\n\n  query.value = option.label;\n  emit('update:modelValue', option.value);\n  closeListbox(false);\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) {\n    return;\n  }\n\n  if (!isOpen.value) {\n    openListbox('first');\n    return;\n  }\n\n  setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n  openListbox('first');\n};\n\nconst onInputClick = () => {\n  if (!isOpen.value) {\n    openListbox('first');\n  }\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event)) {\n    if (isOpen.value) {\n      event.preventDefault();\n      closeListbox(true);\n    }\n\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('first');\n      } else {\n        moveActive(1);\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('last');\n      } else {\n        moveActive(-1);\n      }\n      break;\n    case 'Enter':\n      if (isOpen.value && activeOption.value && !activeOption.value.disabled) {\n        event.preventDefault();\n        selectOption(activeOption.value);\n      }\n      break;\n    case 'Home':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('first');\n      break;\n    case 'End':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('last');\n      break;\n    case 'Tab':\n      closeListbox(true);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onOptionPointerEnter = (index: number) => {\n  const option = filteredOptions.value[index];\n\n  if (option && !option.disabled) {\n    activeIndex.value = index;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeListbox(true);\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n    }\n  },\n  { immediate: true },\n);\n\nwatch(\n  () => props.options,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n      return;\n    }\n\n    setInitialActiveIndex('first');\n  },\n  { deep: true },\n);\n\nwatch(filteredOptions, () => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  if (filteredOptions.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const current = filteredOptions.value[activeIndex.value];\n\n  if (!current || current.disabled) {\n    setInitialActiveIndex('first');\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    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <div class=\"t-combobox__control\">\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-combobox__slot t-combobox__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <input\n        v-bind=\"inputAttrs\"\n        class=\"t-combobox__input\"\n        role=\"combobox\"\n        type=\"text\"\n        :value=\"query\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :aria-controls=\"isOpen ? listboxId : undefined\"\n        :aria-expanded=\"isOpen\"\n        :aria-activedescendant=\"activeDescendant\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-busy=\"loading || undefined\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        @input=\"onInput\"\n        @focus=\"onInputFocus\"\n        @click=\"onInputClick\"\n        @keydown=\"onInputKeydown\"\n      >\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-combobox__indicator\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </div>\n\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        role=\"listbox\"\n        class=\"t-combobox__listbox\"\n        :aria-label=\"listboxLabel\"\n        :aria-labelledby=\"listboxLabelledby\"\n      >\n        <li\n          v-if=\"filteredOptions.length === 0\"\n          class=\"t-combobox__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            :id=\"getOptionId(option.value)\"\n            :key=\"option.value\"\n            role=\"option\"\n            class=\"t-combobox__option\"\n            :class=\"{\n              'is-active': index === activeIndex,\n              'is-disabled': option.disabled,\n              'is-selected': option.value === modelValue,\n            }\"\n            :aria-selected=\"option.value === modelValue\"\n            :aria-disabled=\"option.disabled || undefined\"\n            @mouseenter=\"onOptionPointerEnter(index)\"\n            @click=\"selectOption(option)\"\n          >\n            <slot\n              name=\"option\"\n              :option=\"option\"\n              :selected=\"option.value === modelValue\"\n              :active=\"index === activeIndex\"\n            >\n              <span class=\"t-combobox__option-copy\">\n                <span class=\"t-combobox__option-label\">{{ option.label }}</span>\n                <span\n                  v-if=\"option.description\"\n                  class=\"t-combobox__option-description\"\n                >\n                  {{ option.description }}\n                </span>\n              </span>\n              <svg\n                v-if=\"option.value === modelValue\"\n                class=\"t-combobox__check\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n              </svg>\n            </slot>\n          </li>\n        </template>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TCombobox.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("./TSpinner.cjs"),t=require("../composables/useControllableOpen.cjs");let n=require("vue"),r=require("@treeui/utils");var i=[`data-state`],a={class:`t-combobox__control`},o={key:0,class:`t-combobox__slot t-combobox__slot--prefix`},s=[`value`,`placeholder`,`disabled`,`aria-controls`,`aria-expanded`,`aria-activedescendant`,`aria-invalid`,`aria-busy`],c={key:2,class:`t-combobox__indicator`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},l=[`id`,`aria-label`,`aria-labelledby`],u={key:0,class:`t-combobox__empty`},d=[`id`,`aria-selected`,`aria-disabled`,`onMouseenter`,`onClick`],f={class:`t-combobox__option-copy`},p={class:`t-combobox__option-label`},m={key:0,class:`t-combobox__option-description`},h={key:0,class:`t-combobox__check`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},g=(0,n.defineComponent)({inheritAttrs:!1,__name:`TCombobox`,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.`}},emits:[`update:modelValue`,`update:open`,`open-change`,`input-change`],setup(g,{emit:_}){let v=g,y=_,b=(0,n.useAttrs)(),x=(0,r.createId)(`t-combobox`),S=(0,n.ref)(null),C=(0,n.ref)(-1),w=(0,n.ref)(``),T=e=>e.trim().toLowerCase(),E=e=>`${x}-option-${e}`,D=(0,n.computed)(()=>v.options.find(e=>e.value===v.modelValue)),O=(0,n.computed)(()=>D.value?.label??``),k=(0,n.computed)(()=>{let{class:e,style:t,autocomplete:n,...r}=b;return{autocomplete:typeof n==`string`?n:`off`,...r}}),A=(0,n.computed)(()=>typeof b[`aria-label`]==`string`?b[`aria-label`]:void 0),j=(0,n.computed)(()=>typeof b[`aria-labelledby`]==`string`?b[`aria-labelledby`]:void 0),{value:M,setValue:N}=t.useControllableOpen((0,n.toRef)(v,`open`),v.defaultOpen,e=>{y(`update:open`,e),y(`open-change`,e)}),P=(0,n.computed)(()=>[`t-combobox`,`t-combobox--${v.size}`,{"is-disabled":v.disabled,"is-invalid":v.invalid,"is-loading":v.loading,"is-open":M.value},b.class]),F=(0,n.computed)(()=>b.style),I=(0,n.computed)(()=>{let e=T(w.value);return e?v.options.filter(t=>[t.label,t.description??``,...t.keywords??[]].some(t=>t.toLowerCase().includes(e))):v.options}),L=(0,n.computed)(()=>I.value.reduce((e,t,n)=>(t.disabled||e.push(n),e),[])),R=(0,n.computed)(()=>C.value>=0?I.value[C.value]:void 0),z=(0,n.computed)(()=>M.value&&R.value?E(R.value.value):void 0),B=()=>{w.value=O.value},V=(e=`first`)=>{let t=I.value.findIndex(e=>e.value===v.modelValue&&!e.disabled);if(t>=0){C.value=t;return}if(L.value.length===0){C.value=-1;return}C.value=e===`last`?L.value[L.value.length-1]:L.value[0]},H=e=>{if(L.value.length===0){C.value=-1;return}let t=L.value.indexOf(C.value);if(t===-1){C.value=e===1?L.value[0]:L.value[L.value.length-1];return}let n=t+e;n<0||n>=L.value.length||(C.value=L.value[n])},U=(e=`first`)=>{v.disabled||(N(!0),V(e))},W=()=>w.value.trim()!==``||!v.modelValue?!1:(y(`update:modelValue`,``),!0),G=(e=!1)=>{N(!1),C.value=-1,e&&(W()||O.value&&w.value!==O.value&&(w.value=O.value))},K=e=>{e.disabled||(w.value=e.label,y(`update:modelValue`,e.value),G(!1))},q=e=>{if(w.value=e.target.value,y(`input-change`,w.value),!v.disabled){if(!M.value){U(`first`);return}V(`first`)}},J=()=>{U(`first`)},Y=()=>{M.value||U(`first`)},X=e=>{if(!v.disabled){if((0,r.isEscapeKey)(e)){M.value&&(e.preventDefault(),G(!0));return}switch(e.key){case`ArrowDown`:e.preventDefault(),M.value?H(1):U(`first`);break;case`ArrowUp`:e.preventDefault(),M.value?H(-1):U(`last`);break;case`Enter`:M.value&&R.value&&!R.value.disabled&&(e.preventDefault(),K(R.value));break;case`Home`:if(!M.value)return;e.preventDefault(),V(`first`);break;case`End`:if(!M.value)return;e.preventDefault(),V(`last`);break;case`Tab`:G(!0);break;default:break}}},Z=e=>{let t=I.value[e];t&&!t.disabled&&(C.value=e)},Q=e=>{if(!M.value)return;let t=e.target;t instanceof Node&&(S.value?.contains(t)||G(!0))};return(0,n.watch)(M,e=>{e?document.addEventListener(`pointerdown`,Q):document.removeEventListener(`pointerdown`,Q)}),(0,n.watch)(()=>v.modelValue,()=>{M.value||B()},{immediate:!0}),(0,n.watch)(()=>v.options,()=>{if(!M.value){B();return}V(`first`)},{deep:!0}),(0,n.watch)(I,()=>{if(!M.value)return;if(I.value.length===0){C.value=-1;return}let e=I.value[C.value];(!e||e.disabled)&&V(`first`)}),(0,n.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,Q)}),(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`rootRef`,ref:S,class:(0,n.normalizeClass)(P.value),style:(0,n.normalizeStyle)(F.value),"data-state":(0,n.unref)(M)?`open`:`closed`},[(0,n.createElementVNode)(`div`,a,[t.$slots.prefix?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,o,[(0,n.renderSlot)(t.$slots,`prefix`)])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`input`,(0,n.mergeProps)(k.value,{class:`t-combobox__input`,role:`combobox`,type:`text`,value:w.value,placeholder:g.placeholder,disabled:g.disabled,"aria-controls":(0,n.unref)(M)?(0,n.unref)(x):void 0,"aria-expanded":(0,n.unref)(M),"aria-activedescendant":z.value,"aria-invalid":g.invalid||void 0,"aria-busy":g.loading||void 0,"aria-autocomplete":`list`,"aria-haspopup":`listbox`,onInput:q,onFocus:J,onClick:Y,onKeydown:X}),null,16,s),g.loading?((0,n.openBlock)(),(0,n.createBlock)(e.default,{key:1,size:`sm`,label:`Loading`})):((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,c,[...r[0]||=[(0,n.createElementVNode)(`polyline`,{points:`4 6 8 10 12 6`},null,-1)]]))]),(0,n.createVNode)(n.Transition,{name:`t-fade`},{default:(0,n.withCtx)(()=>[(0,n.unref)(M)&&!g.disabled?((0,n.openBlock)(),(0,n.createElementBlock)(`ul`,{key:0,id:(0,n.unref)(x),role:`listbox`,class:`t-combobox__listbox`,"aria-label":A.value,"aria-labelledby":j.value},[I.value.length===0?((0,n.openBlock)(),(0,n.createElementBlock)(`li`,u,[(0,n.renderSlot)(t.$slots,`empty`,{query:w.value},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(g.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`,{id:E(e.value),key:e.value,role:`option`,class:(0,n.normalizeClass)([`t-combobox__option`,{"is-active":i===C.value,"is-disabled":e.disabled,"is-selected":e.value===g.modelValue}]),"aria-selected":e.value===g.modelValue,"aria-disabled":e.disabled||void 0,onMouseenter:e=>Z(i),onClick:t=>K(e)},[(0,n.renderSlot)(t.$slots,`option`,{option:e,selected:e.value===g.modelValue,active:i===C.value},()=>[(0,n.createElementVNode)(`span`,f,[(0,n.createElementVNode)(`span`,p,(0,n.toDisplayString)(e.label),1),e.description?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,m,(0,n.toDisplayString)(e.description),1)):(0,n.createCommentVNode)(``,!0)]),e.value===g.modelValue?((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,h,[...r[1]||=[(0,n.createElementVNode)(`polyline`,{points:`3.5 8.5 6.5 11.5 12.5 4.5`},null,-1)]])):(0,n.createCommentVNode)(``,!0)])],42,d))),128))],8,l)):(0,n.createCommentVNode)(``,!0)]),_:3})],14,i))}});exports.default=g;
+//# sourceMappingURL=TCombobox.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TCombobox.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TCombobox.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isEscapeKey } from '@treeui/utils';\nimport { computed, 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 TComboboxOption {\n  label: string;\n  value: string;\n  description?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    options?: TComboboxOption[];\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  }>(),\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  },\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  option?: (props: {\n    option: TComboboxOption;\n    selected: boolean;\n    active: boolean;\n  }) => unknown;\n  empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-combobox');\nconst rootRef = ref<HTMLElement | null>(null);\nconst activeIndex = ref(-1);\nconst query = ref('');\n\nconst normalize = (value: string) => value.trim().toLowerCase();\nconst getOptionId = (value: string) => `${listboxId}-option-${value}`;\n\nconst selectedOption = computed(() =>\n  props.options.find((option) => option.value === props.modelValue),\n);\n\nconst selectedLabel = computed(() => selectedOption.value?.label ?? '');\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 listboxLabel = computed(() =>\n  typeof attrs['aria-label'] === 'string' ? attrs['aria-label'] : undefined,\n);\n\nconst listboxLabelledby = computed(() =>\n  typeof attrs['aria-labelledby'] === 'string' ? attrs['aria-labelledby'] : undefined,\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-combobox',\n  `t-combobox--${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 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 = [\n      option.label,\n      option.description ?? '',\n      ...(option.keywords ?? []),\n    ];\n\n    return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n  });\n});\n\nconst enabledFilteredIndexes = computed(() =>\n  filteredOptions.value.reduce<number[]>((indexes, option, index) => {\n    if (!option.disabled) {\n      indexes.push(index);\n    }\n\n    return indexes;\n  }, []),\n);\n\nconst activeOption = computed(() =>\n  activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n  isOpen.value && activeOption.value ? getOptionId(activeOption.value.value) : undefined,\n);\n\nconst syncQueryFromSelection = () => {\n  query.value = selectedLabel.value;\n};\n\nconst setInitialActiveIndex = (fallback: 'first' | 'last' = 'first') => {\n  const selectedIndex = filteredOptions.value.findIndex((option) =>\n    option.value === props.modelValue && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    activeIndex.value = selectedIndex;\n    return;\n  }\n\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  activeIndex.value =\n    fallback === 'last'\n      ? enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1]\n      : enabledFilteredIndexes.value[0];\n};\n\nconst moveActive = (direction: 1 | -1) => {\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const currentEnabledIndex = enabledFilteredIndexes.value.indexOf(activeIndex.value);\n\n  if (currentEnabledIndex === -1) {\n    activeIndex.value =\n      direction === 1\n        ? enabledFilteredIndexes.value[0]\n        : enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1];\n    return;\n  }\n\n  const nextEnabledIndex = currentEnabledIndex + direction;\n\n  if (nextEnabledIndex < 0 || nextEnabledIndex >= enabledFilteredIndexes.value.length) {\n    return;\n  }\n\n  activeIndex.value = enabledFilteredIndexes.value[nextEnabledIndex];\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 commitPendingClear = () => {\n  if (query.value.trim() !== '' || !props.modelValue) {\n    return false;\n  }\n\n  emit('update:modelValue', '');\n  return true;\n};\n\nconst closeListbox = (restoreSelection = false) => {\n  setValue(false);\n  activeIndex.value = -1;\n\n  if (!restoreSelection) {\n    return;\n  }\n\n  if (commitPendingClear()) {\n    return;\n  }\n\n  if (selectedLabel.value && query.value !== selectedLabel.value) {\n    query.value = selectedLabel.value;\n  }\n};\n\nconst selectOption = (option: TComboboxOption) => {\n  if (option.disabled) {\n    return;\n  }\n\n  query.value = option.label;\n  emit('update:modelValue', option.value);\n  closeListbox(false);\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) {\n    return;\n  }\n\n  if (!isOpen.value) {\n    openListbox('first');\n    return;\n  }\n\n  setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n  openListbox('first');\n};\n\nconst onInputClick = () => {\n  if (!isOpen.value) {\n    openListbox('first');\n  }\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event)) {\n    if (isOpen.value) {\n      event.preventDefault();\n      closeListbox(true);\n    }\n\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('first');\n      } else {\n        moveActive(1);\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('last');\n      } else {\n        moveActive(-1);\n      }\n      break;\n    case 'Enter':\n      if (isOpen.value && activeOption.value && !activeOption.value.disabled) {\n        event.preventDefault();\n        selectOption(activeOption.value);\n      }\n      break;\n    case 'Home':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('first');\n      break;\n    case 'End':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('last');\n      break;\n    case 'Tab':\n      closeListbox(true);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onOptionPointerEnter = (index: number) => {\n  const option = filteredOptions.value[index];\n\n  if (option && !option.disabled) {\n    activeIndex.value = index;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeListbox(true);\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n    }\n  },\n  { immediate: true },\n);\n\nwatch(\n  () => props.options,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n      return;\n    }\n\n    setInitialActiveIndex('first');\n  },\n  { deep: true },\n);\n\nwatch(filteredOptions, () => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  if (filteredOptions.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const current = filteredOptions.value[activeIndex.value];\n\n  if (!current || current.disabled) {\n    setInitialActiveIndex('first');\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    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <div class=\"t-combobox__control\">\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-combobox__slot t-combobox__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <input\n        v-bind=\"inputAttrs\"\n        class=\"t-combobox__input\"\n        role=\"combobox\"\n        type=\"text\"\n        :value=\"query\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :aria-controls=\"isOpen ? listboxId : undefined\"\n        :aria-expanded=\"isOpen\"\n        :aria-activedescendant=\"activeDescendant\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-busy=\"loading || undefined\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        @input=\"onInput\"\n        @focus=\"onInputFocus\"\n        @click=\"onInputClick\"\n        @keydown=\"onInputKeydown\"\n      >\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-combobox__indicator\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </div>\n\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        role=\"listbox\"\n        class=\"t-combobox__listbox\"\n        :aria-label=\"listboxLabel\"\n        :aria-labelledby=\"listboxLabelledby\"\n      >\n        <li\n          v-if=\"filteredOptions.length === 0\"\n          class=\"t-combobox__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            :id=\"getOptionId(option.value)\"\n            :key=\"option.value\"\n            role=\"option\"\n            class=\"t-combobox__option\"\n            :class=\"{\n              'is-active': index === activeIndex,\n              'is-disabled': option.disabled,\n              'is-selected': option.value === modelValue,\n            }\"\n            :aria-selected=\"option.value === modelValue\"\n            :aria-disabled=\"option.disabled || undefined\"\n            @mouseenter=\"onOptionPointerEnter(index)\"\n            @click=\"selectOption(option)\"\n          >\n            <slot\n              name=\"option\"\n              :option=\"option\"\n              :selected=\"option.value === modelValue\"\n              :active=\"index === activeIndex\"\n            >\n              <span class=\"t-combobox__option-copy\">\n                <span class=\"t-combobox__option-label\">{{ option.label }}</span>\n                <span\n                  v-if=\"option.description\"\n                  class=\"t-combobox__option-description\"\n                >\n                  {{ option.description }}\n                </span>\n              </span>\n              <svg\n                v-if=\"option.value === modelValue\"\n                class=\"t-combobox__check\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n              </svg>\n            </slot>\n          </li>\n        </template>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"w7CAmBA,IAAM,EAAQ,EA2BR,EAAO,EAiBP,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,GAAA,EAAA,EAAA,SAAA,CAAqB,YAAY,EACjC,GAAA,EAAA,EAAA,IAAA,CAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,IAAA,CAAkB,EAAE,EACpB,GAAA,EAAA,EAAA,IAAA,CAAY,EAAE,EAEd,EAAa,GAAkB,EAAM,KAAK,CAAC,CAAC,YAAY,EACxD,EAAe,GAAkB,GAAG,EAAU,UAAU,IAExD,GAAA,EAAA,EAAA,SAAA,KACJ,EAAM,QAAQ,KAAM,GAAW,EAAO,QAAU,EAAM,UAAU,CAClE,EAEM,GAAA,EAAA,EAAA,SAAA,KAA+B,EAAe,OAAO,OAAS,EAAE,EAEhE,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,GAAA,EAAA,EAAA,SAAA,KACJ,OAAO,EAAM,eAAkB,SAAW,EAAM,cAAgB,IAAA,EAClE,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,OAAO,EAAM,oBAAuB,SAAW,EAAM,mBAAqB,IAAA,EAC5E,EAEM,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,aACA,eAAe,EAAM,OACrB,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,GAAA,EAAA,EAAA,SAAA,KAAiC,CACrC,IAAM,EAAkB,EAAU,EAAM,KAAK,EAM7C,OAJK,EAIE,EAAM,QAAQ,OAAQ,GAOpB,CALL,EAAO,MACP,EAAO,aAAe,GACtB,GAAI,EAAO,UAAY,CAAC,CAGnB,CAAA,CAAO,KAAM,GAAU,EAAM,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CAC5E,EAXQ,EAAM,OAYjB,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KACJ,EAAgB,MAAM,QAAkB,EAAS,EAAQ,KAClD,EAAO,UACV,EAAQ,KAAK,CAAK,EAGb,GACN,CAAC,CAAC,CACP,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAY,OAAS,EAAI,EAAgB,MAAM,EAAY,OAAS,IAAA,EACtE,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAO,OAAS,EAAa,MAAQ,EAAY,EAAa,MAAM,KAAK,EAAI,IAAA,EAC/E,EAEM,MAA+B,CACnC,EAAM,MAAQ,EAAc,KAC9B,EAEM,GAAyB,EAA6B,UAAY,CACtE,IAAM,EAAgB,EAAgB,MAAM,UAAW,GACrD,EAAO,QAAU,EAAM,YAAc,CAAC,EAAO,QAC/C,EAEA,GAAI,GAAiB,EAAG,CACtB,EAAY,MAAQ,EACpB,MACF,CAEA,GAAI,EAAuB,MAAM,SAAW,EAAG,CAC7C,EAAY,MAAQ,GACpB,MACF,CAEA,EAAY,MACV,IAAa,OACT,EAAuB,MAAM,EAAuB,MAAM,OAAS,GACnE,EAAuB,MAAM,EACrC,EAEM,EAAc,GAAsB,CACxC,GAAI,EAAuB,MAAM,SAAW,EAAG,CAC7C,EAAY,MAAQ,GACpB,MACF,CAEA,IAAM,EAAsB,EAAuB,MAAM,QAAQ,EAAY,KAAK,EAElF,GAAI,IAAwB,GAAI,CAC9B,EAAY,MACV,IAAc,EACV,EAAuB,MAAM,GAC7B,EAAuB,MAAM,EAAuB,MAAM,OAAS,GACzE,MACF,CAEA,IAAM,EAAmB,EAAsB,EAE3C,EAAmB,GAAK,GAAoB,EAAuB,MAAM,SAI7E,EAAY,MAAQ,EAAuB,MAAM,GACnD,EAEM,GAAe,EAA6B,UAAY,CACxD,EAAM,WAIV,EAAS,EAAI,EACb,EAAsB,CAAQ,EAChC,EAEM,MACA,EAAM,MAAM,KAAK,IAAM,IAAM,CAAC,EAAM,WAC/B,IAGT,EAAK,oBAAqB,EAAE,EACrB,IAGH,GAAgB,EAAmB,KAAU,CACjD,EAAS,EAAK,EACd,EAAY,MAAQ,GAEf,IAID,EAAmB,GAInB,EAAc,OAAS,EAAM,QAAU,EAAc,QACvD,EAAM,MAAQ,EAAc,OAEhC,EAEM,EAAgB,GAA4B,CAC5C,EAAO,WAIX,EAAM,MAAQ,EAAO,MACrB,EAAK,oBAAqB,EAAO,KAAK,EACtC,EAAa,EAAK,EACpB,EAEM,EAAW,GAAiB,CAChC,KAAM,MAAS,EAAM,OAA4B,MACjD,EAAK,eAAgB,EAAM,KAAK,EAE5B,GAAM,SAIV,IAAI,CAAC,EAAO,MAAO,CACjB,EAAY,OAAO,EACnB,MACF,CAEA,EAAsB,OAAO,CAF7B,CAGF,EAEM,MAAqB,CACzB,EAAY,OAAO,CACrB,EAEM,MAAqB,CACpB,EAAO,OACV,EAAY,OAAO,CAEvB,EAEM,EAAkB,GAAyB,CAC3C,MAAM,SAIV,KAAA,EAAA,EAAA,YAAA,CAAgB,CAAK,EAAG,CAClB,EAAO,QACT,EAAM,eAAe,EACrB,EAAa,EAAI,GAGnB,MACF,CAEA,OAAQ,EAAM,IAAd,CACE,IAAK,YACH,EAAM,eAAe,EAEhB,EAAO,MAGV,EAAW,CAAC,EAFZ,EAAY,OAAO,EAIrB,MACF,IAAK,UACH,EAAM,eAAe,EAEhB,EAAO,MAGV,EAAW,EAAE,EAFb,EAAY,MAAM,EAIpB,MACF,IAAK,QACC,EAAO,OAAS,EAAa,OAAS,CAAC,EAAa,MAAM,WAC5D,EAAM,eAAe,EACrB,EAAa,EAAa,KAAK,GAEjC,MACF,IAAK,OACH,GAAI,CAAC,EAAO,MAAO,OACnB,EAAM,eAAe,EACrB,EAAsB,OAAO,EAC7B,MACF,IAAK,MACH,GAAI,CAAC,EAAO,MAAO,OACnB,EAAM,eAAe,EACrB,EAAsB,MAAM,EAC5B,MACF,IAAK,MACH,EAAa,EAAI,EACjB,MACF,QACE,KACJ,CA1CA,CA2CF,EAEM,EAAwB,GAAkB,CAC9C,IAAM,EAAS,EAAgB,MAAM,GAEjC,GAAU,CAAC,EAAO,WACpB,EAAY,MAAQ,EAExB,EAEM,EAAyB,GAAwB,CACrD,GAAI,CAAC,EAAO,MAAO,OACnB,IAAM,EAAS,EAAM,OACf,aAAkB,OACpB,EAAQ,OAAO,SAAS,CAAM,GAClC,EAAa,EAAI,EACnB,SAEA,EAAA,EAAA,MAAA,CAAM,EAAS,GAAU,CACnB,EACF,SAAS,iBAAiB,cAAe,CAAqB,EAE9D,SAAS,oBAAoB,cAAe,CAAqB,CAErE,CAAC,GAED,EAAA,EAAA,MAAA,KACQ,EAAM,eACN,CACC,EAAO,OACV,EAAuB,CAE3B,EACA,CAAE,UAAW,EAAK,CACpB,GAEA,EAAA,EAAA,MAAA,KACQ,EAAM,YACN,CACJ,GAAI,CAAC,EAAO,MAAO,CACjB,EAAuB,EACvB,MACF,CAEA,EAAsB,OAAO,CAC/B,EACA,CAAE,KAAM,EAAK,CACf,GAEA,EAAA,EAAA,MAAA,CAAM,MAAuB,CAC3B,GAAI,CAAC,EAAO,MACV,OAGF,GAAI,EAAgB,MAAM,SAAW,EAAG,CACtC,EAAY,MAAQ,GACpB,MACF,CAEA,IAAM,EAAU,EAAgB,MAAM,EAAY,QAE9C,CAAC,GAAW,EAAQ,WACtB,EAAsB,OAAO,CAEjC,CAAC,GAED,EAAA,EAAA,gBAAA,KAAsB,CACpB,SAAS,oBAAoB,cAAe,CAAqB,CACnE,CAAC,qDAgIO,MAAA,SA3HA,UAAJ,IAAI,EACH,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,EAChB,cAAA,EAAA,EAAA,MAAA,CAAY,CAAA,EAAM,OAAA,oCA+Cb,MA7CN,EA6CM,CA3CIA,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,2BAqBvB,SAAA,EAAA,EAAA,WAAA,CAlBS,EAkBT,MAlBmB,CAClB,MAAM,oBACN,KAAK,WACL,KAAK,OACJ,MAAO,EAAA,MACP,YAAa,EAAA,YACb,SAAU,EAAA,SACV,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,GAAA,EAAA,EAAA,MAAA,CAAS,CAAA,EAAY,IAAA,GACpC,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,EACf,wBAAuB,EAAA,MACvB,eAAc,EAAA,SAAW,IAAA,GACzB,YAAW,EAAA,SAAW,IAAA,GACvB,oBAAkB,OAClB,gBAAc,UACN,UACP,QAAO,EACP,QAAO,EACP,UAAS,eAGJ,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CAGN,EAAA,QAAA,OAFA,KAAK,KACL,MAAM,yDAcF,MAZN,EAYM,CAAA,GAAA,AAAA,EAAA,KAAA,EAAA,EAAA,EAAA,mBAAA,CAD+B,WAAA,CAAzB,OAAO,eAAe,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA,uBA0EvB,EAAA,WAAA,CAtED,KAAK,QAAQ,EAAA,2BAqElB,EAAA,EAAA,EAAA,MAAA,CAnEG,CAAA,GAAM,CAAK,EAAA,WAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAmEd,KAAA,OAlEF,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,KAAK,UACL,MAAM,sBACL,aAAY,EAAA,MACZ,kBAAiB,EAAA,QAGV,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,CAkDT,EAAA,SAAA,CAAA,IAAA,CAAA,GAAA,EAAA,EAAA,WAAA,CA5CuB,EAAA,OAAlB,EAAQ,gDA4Cb,KAAA,CA3CF,GAAI,EAAY,EAAO,KAAK,EAC5B,IAAK,EAAO,MACb,KAAK,SACL,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,qBAAoB,aACW,IAAU,EAAA,oBAA0C,EAAO,uBAAuC,EAAO,QAAU,EAAA,cAKvJ,gBAAe,EAAO,QAAU,EAAA,WAChC,gBAAe,EAAO,UAAY,IAAA,GAClC,aAAU,GAAE,EAAqB,CAAK,EACtC,QAAK,GAAE,EAAa,CAAM,qBA8BpB,EAAA,OAAA,SAAA,CA1BI,SACR,SAAU,EAAO,QAAU,EAAA,WAC3B,OAAQ,IAAU,EAAA,WAwBd,EAAA,EAAA,EAAA,mBAAA,CAdE,OARP,EAQO,EAAA,EAAA,EAAA,mBAAA,CAP2D,OAAhE,GAAA,EAAA,EAAA,gBAAA,CAA0C,EAAO,KAAK,EAAA,CAAA,EAE9C,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,EAIjB,EAAO,QAAU,EAAA,aAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAWnB,MAZN,EAYM,CAAA,GAAA,AAAA,EAAA,KAAA,EAAA,EAAA,EAAA,mBAAA,CAD2C,WAAA,CAArC,OAAO,2BAA2B,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA"}

package/dist/components/TCombobox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,282 @@
+import e from "./TSpinner.js";
+import { useControllableOpen as t } from "../composables/useControllableOpen.js";
+import { Fragment as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as ee, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, toRef as b, unref as x, useAttrs as te, watch as S, withCtx as ne } from "vue";
+import { createId as re, isEscapeKey as ie } from "@treeui/utils";
+//#region src/components/TCombobox.vue?vue&type=script&setup=true&lang.ts
+var ae = ["data-state"], oe = { class: "t-combobox__control" }, C = {
+	key: 0,
+	class: "t-combobox__slot t-combobox__slot--prefix"
+}, se = [
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-controls",
+	"aria-expanded",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-busy"
+], w = {
+	key: 2,
+	class: "t-combobox__indicator",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+}, T = [
+	"id",
+	"aria-label",
+	"aria-labelledby"
+], E = {
+	key: 0,
+	class: "t-combobox__empty"
+}, ce = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], le = { class: "t-combobox__option-copy" }, ue = { class: "t-combobox__option-label" }, de = {
+	key: 0,
+	class: "t-combobox__option-description"
+}, fe = {
+	key: 0,
+	class: "t-combobox__check",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+}, D = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "TCombobox",
+	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." }
+	},
+	emits: [
+		"update:modelValue",
+		"update:open",
+		"open-change",
+		"input-change"
+	],
+	setup(d, { emit: D }) {
+		let O = d, k = D, A = te(), j = re("t-combobox"), M = g(null), N = g(-1), P = g(""), F = (e) => e.trim().toLowerCase(), I = (e) => `${j}-option-${e}`, L = i(() => O.options.find((e) => e.value === O.modelValue)), R = i(() => L.value?.label ?? ""), z = i(() => {
+			let { class: e, style: t, autocomplete: n, ...r } = A;
+			return {
+				autocomplete: typeof n == "string" ? n : "off",
+				...r
+			};
+		}), B = i(() => typeof A["aria-label"] == "string" ? A["aria-label"] : void 0), V = i(() => typeof A["aria-labelledby"] == "string" ? A["aria-labelledby"] : void 0), { value: H, setValue: U } = t(b(O, "open"), O.defaultOpen, (e) => {
+			k("update:open", e), k("open-change", e);
+		}), pe = i(() => [
+			"t-combobox",
+			`t-combobox--${O.size}`,
+			{
+				"is-disabled": O.disabled,
+				"is-invalid": O.invalid,
+				"is-loading": O.loading,
+				"is-open": H.value
+			},
+			A.class
+		]), me = i(() => A.style), W = i(() => {
+			let e = F(P.value);
+			return e ? O.options.filter((t) => [
+				t.label,
+				t.description ?? "",
+				...t.keywords ?? []
+			].some((t) => t.toLowerCase().includes(e))) : O.options;
+		}), G = i(() => W.value.reduce((e, t, n) => (t.disabled || e.push(n), e), [])), K = i(() => N.value >= 0 ? W.value[N.value] : void 0), he = i(() => H.value && K.value ? I(K.value.value) : void 0), q = () => {
+			P.value = R.value;
+		}, J = (e = "first") => {
+			let t = W.value.findIndex((e) => e.value === O.modelValue && !e.disabled);
+			if (t >= 0) {
+				N.value = t;
+				return;
+			}
+			if (G.value.length === 0) {
+				N.value = -1;
+				return;
+			}
+			N.value = e === "last" ? G.value[G.value.length - 1] : G.value[0];
+		}, Y = (e) => {
+			if (G.value.length === 0) {
+				N.value = -1;
+				return;
+			}
+			let t = G.value.indexOf(N.value);
+			if (t === -1) {
+				N.value = e === 1 ? G.value[0] : G.value[G.value.length - 1];
+				return;
+			}
+			let n = t + e;
+			n < 0 || n >= G.value.length || (N.value = G.value[n]);
+		}, X = (e = "first") => {
+			O.disabled || (U(!0), J(e));
+		}, ge = () => P.value.trim() !== "" || !O.modelValue ? !1 : (k("update:modelValue", ""), !0), Z = (e = !1) => {
+			U(!1), N.value = -1, e && (ge() || R.value && P.value !== R.value && (P.value = R.value));
+		}, Q = (e) => {
+			e.disabled || (P.value = e.label, k("update:modelValue", e.value), Z(!1));
+		}, _e = (e) => {
+			if (P.value = e.target.value, k("input-change", P.value), !O.disabled) {
+				if (!H.value) {
+					X("first");
+					return;
+				}
+				J("first");
+			}
+		}, ve = () => {
+			X("first");
+		}, ye = () => {
+			H.value || X("first");
+		}, be = (e) => {
+			if (!O.disabled) {
+				if (ie(e)) {
+					H.value && (e.preventDefault(), Z(!0));
+					return;
+				}
+				switch (e.key) {
+					case "ArrowDown":
+						e.preventDefault(), H.value ? Y(1) : X("first");
+						break;
+					case "ArrowUp":
+						e.preventDefault(), H.value ? Y(-1) : X("last");
+						break;
+					case "Enter":
+						H.value && K.value && !K.value.disabled && (e.preventDefault(), Q(K.value));
+						break;
+					case "Home":
+						if (!H.value) return;
+						e.preventDefault(), J("first");
+						break;
+					case "End":
+						if (!H.value) return;
+						e.preventDefault(), J("last");
+						break;
+					case "Tab":
+						Z(!0);
+						break;
+					default: break;
+				}
+			}
+		}, xe = (e) => {
+			let t = W.value[e];
+			t && !t.disabled && (N.value = e);
+		}, $ = (e) => {
+			if (!H.value) return;
+			let t = e.target;
+			t instanceof Node && (M.value?.contains(t) || Z(!0));
+		};
+		return S(H, (e) => {
+			e ? document.addEventListener("pointerdown", $) : document.removeEventListener("pointerdown", $);
+		}), S(() => O.modelValue, () => {
+			H.value || q();
+		}, { immediate: !0 }), S(() => O.options, () => {
+			if (!H.value) {
+				q();
+				return;
+			}
+			J("first");
+		}, { deep: !0 }), S(W, () => {
+			if (!H.value) return;
+			if (W.value.length === 0) {
+				N.value = -1;
+				return;
+			}
+			let e = W.value[N.value];
+			(!e || e.disabled) && J("first");
+		}), m(() => {
+			document.removeEventListener("pointerdown", $);
+		}), (t, i) => (h(), s("div", {
+			ref_key: "rootRef",
+			ref: M,
+			class: f(pe.value),
+			style: p(me.value),
+			"data-state": x(H) ? "open" : "closed"
+		}, [c("div", oe, [
+			t.$slots.prefix ? (h(), s("span", C, [v(t.$slots, "prefix")])) : o("", !0),
+			c("input", ee(z.value, {
+				class: "t-combobox__input",
+				role: "combobox",
+				type: "text",
+				value: P.value,
+				placeholder: d.placeholder,
+				disabled: d.disabled,
+				"aria-controls": x(H) ? x(j) : void 0,
+				"aria-expanded": x(H),
+				"aria-activedescendant": he.value,
+				"aria-invalid": d.invalid || void 0,
+				"aria-busy": d.loading || void 0,
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				onInput: _e,
+				onFocus: ve,
+				onClick: ye,
+				onKeydown: be
+			}), null, 16, se),
+			d.loading ? (h(), a(e, {
+				key: 1,
+				size: "sm",
+				label: "Loading"
+			})) : (h(), s("svg", w, [...i[0] ||= [c("polyline", { points: "4 6 8 10 12 6" }, null, -1)]]))
+		]), u(r, { name: "t-fade" }, {
+			default: ne(() => [x(H) && !d.disabled ? (h(), s("ul", {
+				key: 0,
+				id: x(j),
+				role: "listbox",
+				class: "t-combobox__listbox",
+				"aria-label": B.value,
+				"aria-labelledby": V.value
+			}, [W.value.length === 0 ? (h(), s("li", E, [v(t.$slots, "empty", { query: P.value }, () => [l(y(d.emptyText), 1)])])) : (h(!0), s(n, { key: 1 }, _(W.value, (e, n) => (h(), s("li", {
+				id: I(e.value),
+				key: e.value,
+				role: "option",
+				class: f(["t-combobox__option", {
+					"is-active": n === N.value,
+					"is-disabled": e.disabled,
+					"is-selected": e.value === d.modelValue
+				}]),
+				"aria-selected": e.value === d.modelValue,
+				"aria-disabled": e.disabled || void 0,
+				onMouseenter: (e) => xe(n),
+				onClick: (t) => Q(e)
+			}, [v(t.$slots, "option", {
+				option: e,
+				selected: e.value === d.modelValue,
+				active: n === N.value
+			}, () => [c("span", le, [c("span", ue, y(e.label), 1), e.description ? (h(), s("span", de, y(e.description), 1)) : o("", !0)]), e.value === d.modelValue ? (h(), s("svg", fe, [...i[1] ||= [c("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" }, null, -1)]])) : o("", !0)])], 42, ce))), 128))], 8, T)) : o("", !0)]),
+			_: 3
+		})], 14, ae));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=TCombobox.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/TCombobox.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TCombobox.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TCombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isEscapeKey } from '@treeui/utils';\nimport { computed, 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 TComboboxOption {\n  label: string;\n  value: string;\n  description?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    options?: TComboboxOption[];\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  }>(),\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  },\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  option?: (props: {\n    option: TComboboxOption;\n    selected: boolean;\n    active: boolean;\n  }) => unknown;\n  empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-combobox');\nconst rootRef = ref<HTMLElement | null>(null);\nconst activeIndex = ref(-1);\nconst query = ref('');\n\nconst normalize = (value: string) => value.trim().toLowerCase();\nconst getOptionId = (value: string) => `${listboxId}-option-${value}`;\n\nconst selectedOption = computed(() =>\n  props.options.find((option) => option.value === props.modelValue),\n);\n\nconst selectedLabel = computed(() => selectedOption.value?.label ?? '');\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 listboxLabel = computed(() =>\n  typeof attrs['aria-label'] === 'string' ? attrs['aria-label'] : undefined,\n);\n\nconst listboxLabelledby = computed(() =>\n  typeof attrs['aria-labelledby'] === 'string' ? attrs['aria-labelledby'] : undefined,\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-combobox',\n  `t-combobox--${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 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 = [\n      option.label,\n      option.description ?? '',\n      ...(option.keywords ?? []),\n    ];\n\n    return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n  });\n});\n\nconst enabledFilteredIndexes = computed(() =>\n  filteredOptions.value.reduce<number[]>((indexes, option, index) => {\n    if (!option.disabled) {\n      indexes.push(index);\n    }\n\n    return indexes;\n  }, []),\n);\n\nconst activeOption = computed(() =>\n  activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n  isOpen.value && activeOption.value ? getOptionId(activeOption.value.value) : undefined,\n);\n\nconst syncQueryFromSelection = () => {\n  query.value = selectedLabel.value;\n};\n\nconst setInitialActiveIndex = (fallback: 'first' | 'last' = 'first') => {\n  const selectedIndex = filteredOptions.value.findIndex((option) =>\n    option.value === props.modelValue && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    activeIndex.value = selectedIndex;\n    return;\n  }\n\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  activeIndex.value =\n    fallback === 'last'\n      ? enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1]\n      : enabledFilteredIndexes.value[0];\n};\n\nconst moveActive = (direction: 1 | -1) => {\n  if (enabledFilteredIndexes.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const currentEnabledIndex = enabledFilteredIndexes.value.indexOf(activeIndex.value);\n\n  if (currentEnabledIndex === -1) {\n    activeIndex.value =\n      direction === 1\n        ? enabledFilteredIndexes.value[0]\n        : enabledFilteredIndexes.value[enabledFilteredIndexes.value.length - 1];\n    return;\n  }\n\n  const nextEnabledIndex = currentEnabledIndex + direction;\n\n  if (nextEnabledIndex < 0 || nextEnabledIndex >= enabledFilteredIndexes.value.length) {\n    return;\n  }\n\n  activeIndex.value = enabledFilteredIndexes.value[nextEnabledIndex];\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 commitPendingClear = () => {\n  if (query.value.trim() !== '' || !props.modelValue) {\n    return false;\n  }\n\n  emit('update:modelValue', '');\n  return true;\n};\n\nconst closeListbox = (restoreSelection = false) => {\n  setValue(false);\n  activeIndex.value = -1;\n\n  if (!restoreSelection) {\n    return;\n  }\n\n  if (commitPendingClear()) {\n    return;\n  }\n\n  if (selectedLabel.value && query.value !== selectedLabel.value) {\n    query.value = selectedLabel.value;\n  }\n};\n\nconst selectOption = (option: TComboboxOption) => {\n  if (option.disabled) {\n    return;\n  }\n\n  query.value = option.label;\n  emit('update:modelValue', option.value);\n  closeListbox(false);\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) {\n    return;\n  }\n\n  if (!isOpen.value) {\n    openListbox('first');\n    return;\n  }\n\n  setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n  openListbox('first');\n};\n\nconst onInputClick = () => {\n  if (!isOpen.value) {\n    openListbox('first');\n  }\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event)) {\n    if (isOpen.value) {\n      event.preventDefault();\n      closeListbox(true);\n    }\n\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('first');\n      } else {\n        moveActive(1);\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n\n      if (!isOpen.value) {\n        openListbox('last');\n      } else {\n        moveActive(-1);\n      }\n      break;\n    case 'Enter':\n      if (isOpen.value && activeOption.value && !activeOption.value.disabled) {\n        event.preventDefault();\n        selectOption(activeOption.value);\n      }\n      break;\n    case 'Home':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('first');\n      break;\n    case 'End':\n      if (!isOpen.value) return;\n      event.preventDefault();\n      setInitialActiveIndex('last');\n      break;\n    case 'Tab':\n      closeListbox(true);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onOptionPointerEnter = (index: number) => {\n  const option = filteredOptions.value[index];\n\n  if (option && !option.disabled) {\n    activeIndex.value = index;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeListbox(true);\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n    }\n  },\n  { immediate: true },\n);\n\nwatch(\n  () => props.options,\n  () => {\n    if (!isOpen.value) {\n      syncQueryFromSelection();\n      return;\n    }\n\n    setInitialActiveIndex('first');\n  },\n  { deep: true },\n);\n\nwatch(filteredOptions, () => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  if (filteredOptions.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const current = filteredOptions.value[activeIndex.value];\n\n  if (!current || current.disabled) {\n    setInitialActiveIndex('first');\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    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <div class=\"t-combobox__control\">\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-combobox__slot t-combobox__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <input\n        v-bind=\"inputAttrs\"\n        class=\"t-combobox__input\"\n        role=\"combobox\"\n        type=\"text\"\n        :value=\"query\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :aria-controls=\"isOpen ? listboxId : undefined\"\n        :aria-expanded=\"isOpen\"\n        :aria-activedescendant=\"activeDescendant\"\n        :aria-invalid=\"invalid || undefined\"\n        :aria-busy=\"loading || undefined\"\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        @input=\"onInput\"\n        @focus=\"onInputFocus\"\n        @click=\"onInputClick\"\n        @keydown=\"onInputKeydown\"\n      >\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-combobox__indicator\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </div>\n\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        role=\"listbox\"\n        class=\"t-combobox__listbox\"\n        :aria-label=\"listboxLabel\"\n        :aria-labelledby=\"listboxLabelledby\"\n      >\n        <li\n          v-if=\"filteredOptions.length === 0\"\n          class=\"t-combobox__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            :id=\"getOptionId(option.value)\"\n            :key=\"option.value\"\n            role=\"option\"\n            class=\"t-combobox__option\"\n            :class=\"{\n              'is-active': index === activeIndex,\n              'is-disabled': option.disabled,\n              'is-selected': option.value === modelValue,\n            }\"\n            :aria-selected=\"option.value === modelValue\"\n            :aria-disabled=\"option.disabled || undefined\"\n            @mouseenter=\"onOptionPointerEnter(index)\"\n            @click=\"selectOption(option)\"\n          >\n            <slot\n              name=\"option\"\n              :option=\"option\"\n              :selected=\"option.value === modelValue\"\n              :active=\"index === activeIndex\"\n            >\n              <span class=\"t-combobox__option-copy\">\n                <span class=\"t-combobox__option-label\">{{ option.label }}</span>\n                <span\n                  v-if=\"option.description\"\n                  class=\"t-combobox__option-description\"\n                >\n                  {{ option.description }}\n                </span>\n              </span>\n              <svg\n                v-if=\"option.value === modelValue\"\n                class=\"t-combobox__check\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n              </svg>\n            </slot>\n          </li>\n        </template>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TConfirmDialog.cjs

@@ -0,0 +1,2 @@
+var e=require("./TConfirmDialog.vue_vue_type_script_setup_true_lang.cjs").default;exports.default=e;
+//# sourceMappingURL=TConfirmDialog.cjs.map

package/dist/components/TConfirmDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TConfirmDialog.cjs","names":[],"sources":["../../src/components/TConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TButton from './TButton.vue';\nimport TModal from './TModal.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  trigger?: () => unknown;\n  icon?: () => unknown;\n  default?: () => unknown;\n  actions?: (props: {\n    confirm: () => void;\n    cancel: () => void;\n    loading: boolean;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    title?: string;\n    description?: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmVariant?: TVariant;\n    confirmDisabled?: boolean;\n    cancelDisabled?: boolean;\n    loading?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    closeOnConfirm?: boolean;\n    closeOnCancel?: boolean;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'sm',\n    title: '',\n    description: '',\n    confirmLabel: 'Confirm',\n    cancelLabel: 'Cancel',\n    confirmVariant: 'danger',\n    confirmDisabled: false,\n    cancelDisabled: false,\n    loading: false,\n    closeOnEscape: true,\n    closeOnOverlay: false,\n    showCloseButton: false,\n    closeLabel: 'Close dialog',\n    closeOnConfirm: true,\n    closeOnCancel: true,\n  },\n);\n\nconst emit = defineEmits<{\n  confirm: [];\n  cancel: [];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\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 dialogClasses = computed(() => [\n  't-confirm-dialog',\n  {\n    't-confirm-dialog--with-icon': Boolean(slots.icon),\n  },\n]);\n\nconst hasBodyContent = computed(() => Boolean(slots.default));\n\nconst closeDialog = () => {\n  setValue(false);\n};\n\nconst syncOpen = (value: boolean) => {\n  setValue(value);\n};\n\nconst handleCancel = () => {\n  if (props.cancelDisabled) {\n    return;\n  }\n\n  emit('cancel');\n\n  if (props.closeOnCancel) {\n    closeDialog();\n  }\n};\n\nconst handleConfirm = () => {\n  if (props.confirmDisabled || props.loading) {\n    return;\n  }\n\n  emit('confirm');\n\n  if (props.closeOnConfirm) {\n    closeDialog();\n  }\n};\n</script>\n\n<template>\n  <TModal\n    v-bind=\"attrs\"\n    :open=\"isOpen\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    :title=\"title\"\n    :description=\"description\"\n    :close-on-escape=\"closeOnEscape\"\n    :close-on-overlay=\"closeOnOverlay\"\n    :show-close-button=\"showCloseButton\"\n    :close-label=\"closeLabel\"\n    @update:open=\"syncOpen\"\n  >\n    <template\n      v-if=\"$slots.trigger\"\n      #trigger\n    >\n      <slot name=\"trigger\" />\n    </template>\n\n    <template #content>\n      <div :class=\"dialogClasses\">\n        <div\n          v-if=\"$slots.icon\"\n          class=\"t-confirm-dialog__icon\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"icon\" />\n        </div>\n\n        <div\n          v-if=\"hasBodyContent\"\n          class=\"t-confirm-dialog__body\"\n        >\n          <slot />\n        </div>\n      </div>\n    </template>\n\n    <template #footer>\n      <slot\n        name=\"actions\"\n        :confirm=\"handleConfirm\"\n        :cancel=\"handleCancel\"\n        :loading=\"loading\"\n      >\n        <TButton\n          variant=\"ghost\"\n          :disabled=\"cancelDisabled\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelLabel }}\n        </TButton>\n        <TButton\n          :variant=\"confirmVariant\"\n          :loading=\"loading\"\n          :disabled=\"confirmDisabled\"\n          @click=\"handleConfirm\"\n        >\n          {{ confirmLabel }}\n        </TButton>\n      </slot>\n    </template>\n  </TModal>\n</template>\n"],"mappings":""}

package/dist/components/TConfirmDialog.js

@@ -0,0 +1,7 @@
+import e from "./TConfirmDialog.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/TConfirmDialog.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=TConfirmDialog.js.map

package/dist/components/TConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TConfirmDialog.js","names":[],"sources":["../../src/components/TConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TButton from './TButton.vue';\nimport TModal from './TModal.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  trigger?: () => unknown;\n  icon?: () => unknown;\n  default?: () => unknown;\n  actions?: (props: {\n    confirm: () => void;\n    cancel: () => void;\n    loading: boolean;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    title?: string;\n    description?: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmVariant?: TVariant;\n    confirmDisabled?: boolean;\n    cancelDisabled?: boolean;\n    loading?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    closeOnConfirm?: boolean;\n    closeOnCancel?: boolean;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'sm',\n    title: '',\n    description: '',\n    confirmLabel: 'Confirm',\n    cancelLabel: 'Cancel',\n    confirmVariant: 'danger',\n    confirmDisabled: false,\n    cancelDisabled: false,\n    loading: false,\n    closeOnEscape: true,\n    closeOnOverlay: false,\n    showCloseButton: false,\n    closeLabel: 'Close dialog',\n    closeOnConfirm: true,\n    closeOnCancel: true,\n  },\n);\n\nconst emit = defineEmits<{\n  confirm: [];\n  cancel: [];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\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 dialogClasses = computed(() => [\n  't-confirm-dialog',\n  {\n    't-confirm-dialog--with-icon': Boolean(slots.icon),\n  },\n]);\n\nconst hasBodyContent = computed(() => Boolean(slots.default));\n\nconst closeDialog = () => {\n  setValue(false);\n};\n\nconst syncOpen = (value: boolean) => {\n  setValue(value);\n};\n\nconst handleCancel = () => {\n  if (props.cancelDisabled) {\n    return;\n  }\n\n  emit('cancel');\n\n  if (props.closeOnCancel) {\n    closeDialog();\n  }\n};\n\nconst handleConfirm = () => {\n  if (props.confirmDisabled || props.loading) {\n    return;\n  }\n\n  emit('confirm');\n\n  if (props.closeOnConfirm) {\n    closeDialog();\n  }\n};\n</script>\n\n<template>\n  <TModal\n    v-bind=\"attrs\"\n    :open=\"isOpen\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    :title=\"title\"\n    :description=\"description\"\n    :close-on-escape=\"closeOnEscape\"\n    :close-on-overlay=\"closeOnOverlay\"\n    :show-close-button=\"showCloseButton\"\n    :close-label=\"closeLabel\"\n    @update:open=\"syncOpen\"\n  >\n    <template\n      v-if=\"$slots.trigger\"\n      #trigger\n    >\n      <slot name=\"trigger\" />\n    </template>\n\n    <template #content>\n      <div :class=\"dialogClasses\">\n        <div\n          v-if=\"$slots.icon\"\n          class=\"t-confirm-dialog__icon\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"icon\" />\n        </div>\n\n        <div\n          v-if=\"hasBodyContent\"\n          class=\"t-confirm-dialog__body\"\n        >\n          <slot />\n        </div>\n      </div>\n    </template>\n\n    <template #footer>\n      <slot\n        name=\"actions\"\n        :confirm=\"handleConfirm\"\n        :cancel=\"handleCancel\"\n        :loading=\"loading\"\n      >\n        <TButton\n          variant=\"ghost\"\n          :disabled=\"cancelDisabled\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelLabel }}\n        </TButton>\n        <TButton\n          :variant=\"confirmVariant\"\n          :loading=\"loading\"\n          :disabled=\"confirmDisabled\"\n          @click=\"handleConfirm\"\n        >\n          {{ confirmLabel }}\n        </TButton>\n      </slot>\n    </template>\n  </TModal>\n</template>\n"],"mappings":""}

package/dist/components/TConfirmDialog.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("./TButton.cjs"),t=require("../composables/useControllableOpen.cjs"),n=require("./TModal.cjs");let r=require("vue");var i={key:0,class:`t-confirm-dialog__icon`,"aria-hidden":`true`},a={key:1,class:`t-confirm-dialog__body`},o=(0,r.defineComponent)({inheritAttrs:!1,__name:`TConfirmDialog`,props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`sm`},title:{default:``},description:{default:``},confirmLabel:{default:`Confirm`},cancelLabel:{default:`Cancel`},confirmVariant:{default:`danger`},confirmDisabled:{type:Boolean,default:!1},cancelDisabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},closeOnEscape:{type:Boolean,default:!0},closeOnOverlay:{type:Boolean,default:!1},showCloseButton:{type:Boolean,default:!1},closeLabel:{default:`Close dialog`},closeOnConfirm:{type:Boolean,default:!0},closeOnCancel:{type:Boolean,default:!0}},emits:[`confirm`,`cancel`,`update:open`,`open-change`],setup(o,{emit:s}){let c=(0,r.useSlots)(),l=o,u=s,d=(0,r.useAttrs)(),{value:f,setValue:p}=t.useControllableOpen((0,r.toRef)(l,`open`),l.defaultOpen,e=>{u(`update:open`,e),u(`open-change`,e)}),m=(0,r.computed)(()=>[`t-confirm-dialog`,{"t-confirm-dialog--with-icon":!!c.icon}]),h=(0,r.computed)(()=>!!c.default),g=()=>{p(!1)},_=e=>{p(e)},v=()=>{l.cancelDisabled||(u(`cancel`),l.closeOnCancel&&g())},y=()=>{l.confirmDisabled||l.loading||(u(`confirm`),l.closeOnConfirm&&g())};return(t,s)=>((0,r.openBlock)(),(0,r.createBlock)(n.default,(0,r.mergeProps)((0,r.unref)(d),{open:(0,r.unref)(f),disabled:o.disabled,size:o.size,title:o.title,description:o.description,"close-on-escape":o.closeOnEscape,"close-on-overlay":o.closeOnOverlay,"show-close-button":o.showCloseButton,"close-label":o.closeLabel,"onUpdate:open":_}),(0,r.createSlots)({content:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,{class:(0,r.normalizeClass)(m.value)},[t.$slots.icon?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,i,[(0,r.renderSlot)(t.$slots,`icon`)])):(0,r.createCommentVNode)(``,!0),h.value?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.renderSlot)(t.$slots,`default`)])):(0,r.createCommentVNode)(``,!0)],2)]),footer:(0,r.withCtx)(()=>[(0,r.renderSlot)(t.$slots,`actions`,{confirm:y,cancel:v,loading:o.loading},()=>[(0,r.createVNode)(e.default,{variant:`ghost`,disabled:o.cancelDisabled,onClick:v},{default:(0,r.withCtx)(()=>[(0,r.createTextVNode)((0,r.toDisplayString)(o.cancelLabel),1)]),_:1},8,[`disabled`]),(0,r.createVNode)(e.default,{variant:o.confirmVariant,loading:o.loading,disabled:o.confirmDisabled,onClick:y},{default:(0,r.withCtx)(()=>[(0,r.createTextVNode)((0,r.toDisplayString)(o.confirmLabel),1)]),_:1},8,[`variant`,`loading`,`disabled`])])]),_:2},[t.$slots.trigger?{name:`trigger`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(t.$slots,`trigger`)]),key:`0`}:void 0]),1040,[`open`,`disabled`,`size`,`title`,`description`,`close-on-escape`,`close-on-overlay`,`show-close-button`,`close-label`]))}});exports.default=o;
+//# sourceMappingURL=TConfirmDialog.vue_vue_type_script_setup_true_lang.cjs.map

package/dist/components/TConfirmDialog.vue_vue_type_script_setup_true_lang.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TConfirmDialog.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TButton from './TButton.vue';\nimport TModal from './TModal.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  trigger?: () => unknown;\n  icon?: () => unknown;\n  default?: () => unknown;\n  actions?: (props: {\n    confirm: () => void;\n    cancel: () => void;\n    loading: boolean;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    title?: string;\n    description?: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmVariant?: TVariant;\n    confirmDisabled?: boolean;\n    cancelDisabled?: boolean;\n    loading?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    closeOnConfirm?: boolean;\n    closeOnCancel?: boolean;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'sm',\n    title: '',\n    description: '',\n    confirmLabel: 'Confirm',\n    cancelLabel: 'Cancel',\n    confirmVariant: 'danger',\n    confirmDisabled: false,\n    cancelDisabled: false,\n    loading: false,\n    closeOnEscape: true,\n    closeOnOverlay: false,\n    showCloseButton: false,\n    closeLabel: 'Close dialog',\n    closeOnConfirm: true,\n    closeOnCancel: true,\n  },\n);\n\nconst emit = defineEmits<{\n  confirm: [];\n  cancel: [];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\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 dialogClasses = computed(() => [\n  't-confirm-dialog',\n  {\n    't-confirm-dialog--with-icon': Boolean(slots.icon),\n  },\n]);\n\nconst hasBodyContent = computed(() => Boolean(slots.default));\n\nconst closeDialog = () => {\n  setValue(false);\n};\n\nconst syncOpen = (value: boolean) => {\n  setValue(value);\n};\n\nconst handleCancel = () => {\n  if (props.cancelDisabled) {\n    return;\n  }\n\n  emit('cancel');\n\n  if (props.closeOnCancel) {\n    closeDialog();\n  }\n};\n\nconst handleConfirm = () => {\n  if (props.confirmDisabled || props.loading) {\n    return;\n  }\n\n  emit('confirm');\n\n  if (props.closeOnConfirm) {\n    closeDialog();\n  }\n};\n</script>\n\n<template>\n  <TModal\n    v-bind=\"attrs\"\n    :open=\"isOpen\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    :title=\"title\"\n    :description=\"description\"\n    :close-on-escape=\"closeOnEscape\"\n    :close-on-overlay=\"closeOnOverlay\"\n    :show-close-button=\"showCloseButton\"\n    :close-label=\"closeLabel\"\n    @update:open=\"syncOpen\"\n  >\n    <template\n      v-if=\"$slots.trigger\"\n      #trigger\n    >\n      <slot name=\"trigger\" />\n    </template>\n\n    <template #content>\n      <div :class=\"dialogClasses\">\n        <div\n          v-if=\"$slots.icon\"\n          class=\"t-confirm-dialog__icon\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"icon\" />\n        </div>\n\n        <div\n          v-if=\"hasBodyContent\"\n          class=\"t-confirm-dialog__body\"\n        >\n          <slot />\n        </div>\n      </div>\n    </template>\n\n    <template #footer>\n      <slot\n        name=\"actions\"\n        :confirm=\"handleConfirm\"\n        :cancel=\"handleCancel\"\n        :loading=\"loading\"\n      >\n        <TButton\n          variant=\"ghost\"\n          :disabled=\"cancelDisabled\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelLabel }}\n        </TButton>\n        <TButton\n          :variant=\"confirmVariant\"\n          :loading=\"loading\"\n          :disabled=\"confirmDisabled\"\n          @click=\"handleConfirm\"\n        >\n          {{ confirmLabel }}\n        </TButton>\n      </slot>\n    </template>\n  </TModal>\n</template>\n"],"mappings":"o/BAWA,IAAM,GAAA,EAAA,EAAA,SAAA,CAAQ,EAWR,EAAQ,EA2CR,EAAO,EAOP,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,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,KAA+B,CACnC,mBACA,CACE,8BAA+B,EAAQ,EAAM,IAC/C,CACF,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAAgC,EAAQ,EAAM,OAAQ,EAEtD,MAAoB,CACxB,EAAS,EAAK,CAChB,EAEM,EAAY,GAAmB,CACnC,EAAS,CAAK,CAChB,EAEM,MAAqB,CACrB,EAAM,iBAIV,EAAK,QAAQ,EAET,EAAM,eACR,EAAY,EAEhB,EAEM,MAAsB,CACtB,EAAM,iBAAmB,EAAM,UAInC,EAAK,SAAS,EAEV,EAAM,gBACR,EAAY,EAEhB,oDAmEW,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,EAAA,EAAA,MAAA,CAAA,CAAA,EA9DM,CACZ,MAAA,EAAA,EAAA,MAAA,CAAM,CAAA,EACN,SAAU,EAAA,SACV,KAAM,EAAA,KACN,MAAO,EAAA,MACP,YAAa,EAAA,YACb,kBAAiB,EAAA,cACjB,mBAAkB,EAAA,eAClB,oBAAmB,EAAA,gBACnB,cAAa,EAAA,WACb,gBAAa,uBASH,SAAA,EAAA,EAAA,QAAA,KAgBH,EAAA,EAAA,EAAA,mBAAA,CAAA,MAAA,CAfA,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAa,CAAA,EAAA,CAEhBA,EAAAA,OAAO,OAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAKT,MANN,EAMM,EAAA,EAAA,EAAA,WAAA,CADgB,EAAA,OAAA,MAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,EAId,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIF,MALN,EAKM,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EAKH,QAAA,EAAA,EAAA,QAAA,KAsBF,EAAA,EAAA,EAAA,WAAA,CAAA,EAAA,OAAA,UAAA,CAnBJ,QAAS,EACT,OAAQ,EACR,QAAS,EAAA,aAiBL,EAAA,EAAA,EAAA,YAAA,CATK,EAAA,QAAA,CALR,QAAQ,QACP,SAAU,EAAA,eACV,QAAO,8BAES,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CAAd,EAAA,WAAW,EAAA,CAAA,CAAA,CAAA,yCASN,EAAA,QAAA,CANP,QAAS,EAAA,eACT,QAAS,EAAA,QACT,SAAU,EAAA,gBACV,QAAO,8BAEU,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CAAf,EAAA,YAAY,EAAA,CAAA,CAAA,CAAA,qDA7CbA,EAAAA,OAAO,QAAA,MACZ,+BAEsB,EAAA,EAAA,EAAA,WAAA,CAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}