@treeui/vue 0.7.0 → 0.10.0

package/dist/components/TModal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,163 @@
+import { useControllableOpen as e } from "../composables/useControllableOpen.js";
+import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as ee, mergeProps as u, nextTick as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, toRef as b, unref as x, useAttrs as S, useSlots as C, watch as w, withCtx as T } from "vue";
+import { createId as te, focusFirst as E, focusLast as ne, getFocusableElements as re, isEscapeKey as ie } from "@treeui/utils";
+import { getTreeIcon as ae, treeIconDefaults as oe } from "@treeui/icons";
+//#region src/components/TModal.vue?vue&type=script&setup=true&lang.ts
+var se = ["data-state"], ce = ["aria-disabled"], D = ["data-state"], O = { class: "t-modal__positioner" }, k = [
+	"id",
+	"aria-labelledby",
+	"aria-describedby"
+], A = {
+	key: 0,
+	class: "t-modal__topbar"
+}, j = { class: "t-modal__title" }, M = ["aria-label"], N = { class: "t-modal__body" }, P = {
+	key: 2,
+	class: "t-modal__footer"
+}, F = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "TModal",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" },
+		title: { default: "" },
+		description: { default: "" },
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnOverlay: {
+			type: Boolean,
+			default: !0
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: !0
+		},
+		closeLabel: { default: "Close modal" },
+		id: { default: void 0 }
+	},
+	emits: ["update:open", "open-change"],
+	setup(l, { emit: F }) {
+		let I = ae("x"), L = l, R = F, z = S(), B = L.id ?? te("t-modal"), V = `${B}-title`, H = `${B}-description`, U = _(null), W = _(null), G = _(null), K = r(() => !!(L.title || le.header)), le = C(), ue = r(() => ["t-modal", z.class]), de = r(() => z.style), fe = r(() => {
+			let { class: e, style: t, ...n } = z;
+			return n;
+		}), pe = r(() => ["t-modal__surface", `t-modal__surface--${L.size}`]), { value: q, setValue: J } = e(b(L, "open"), L.defaultOpen, (e) => {
+			R("update:open", e), R("open-change", e);
+		}), me = r(() => K.value ? V : void 0), he = r(() => L.description ? H : void 0), Y = 0, X = "", Z = () => {
+			typeof document > "u" || (Y === 0 && (X = document.body.style.overflow, document.body.style.overflow = "hidden"), Y += 1);
+		}, Q = () => {
+			typeof document > "u" || Y === 0 || (--Y, Y === 0 && (document.body.style.overflow = X));
+		}, ge = () => {
+			d(() => {
+				W.value && (E(W.value) || W.value.focus());
+			});
+		}, _e = () => {
+			L.disabled || (G.value = document.activeElement, J(!0));
+		}, $ = () => {
+			J(!1);
+		}, ve = (e) => {
+			if (L.disabled) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			e.defaultPrevented || _e();
+		}, ye = () => {
+			L.closeOnOverlay && $();
+		}, be = (e) => {
+			e.stopPropagation();
+		}, xe = (e) => {
+			if (ie(e) && L.closeOnEscape) {
+				e.preventDefault(), $();
+				return;
+			}
+			if (e.key !== "Tab" || !W.value) return;
+			let t = re(W.value);
+			if (!t.length) {
+				e.preventDefault(), W.value.focus();
+				return;
+			}
+			let n = t[0], r = t[t.length - 1], i = document.activeElement;
+			e.shiftKey && i === n && (e.preventDefault(), ne(W.value)), !e.shiftKey && i === r && (e.preventDefault(), E(W.value));
+		};
+		return w(q, (e, t) => {
+			if (e) {
+				Z(), ge();
+				return;
+			}
+			t && (Q(), d(() => {
+				G.value?.focus();
+			}));
+		}), h(() => {
+			q.value && Q();
+		}), (e, r) => (g(), o("div", {
+			ref_key: "rootRef",
+			ref: U,
+			class: f(ue.value),
+			style: m(de.value),
+			"data-state": x(q) ? "open" : "closed"
+		}, [e.$slots.trigger ? (g(), o("span", u({
+			key: 0,
+			class: "t-modal__trigger"
+		}, fe.value, {
+			"aria-disabled": l.disabled || void 0,
+			onClick: ve
+		}), [v(e.$slots, "trigger")], 16, ce)) : a("", !0), (g(), i(t, { to: "body" }, [c(n, { name: "t-modal-fade" }, {
+			default: T(() => [x(q) ? (g(), o("div", {
+				key: 0,
+				class: "t-modal__portal",
+				"data-state": x(q) ? "open" : "closed"
+			}, [s("div", {
+				class: "t-modal__backdrop",
+				"aria-hidden": "true",
+				onClick: ye
+			}), s("div", O, [s("div", {
+				id: x(B),
+				ref_key: "surfaceRef",
+				ref: W,
+				class: f(pe.value),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": me.value,
+				"aria-describedby": he.value,
+				tabindex: "-1",
+				onClick: be,
+				onKeydown: xe
+			}, [
+				K.value || l.showCloseButton ? (g(), o("div", A, [K.value ? (g(), o("div", {
+					key: 0,
+					id: V,
+					class: "t-modal__header"
+				}, [v(e.$slots, "header", {}, () => [s("h2", j, y(l.title), 1)])])) : a("", !0), l.showCloseButton ? (g(), o("button", {
+					key: 1,
+					type: "button",
+					class: "t-modal__close",
+					"aria-label": l.closeLabel,
+					onClick: $
+				}, [c(x(I), p(ee(x(oe))), null, 16)], 8, M)) : a("", !0)])) : a("", !0),
+				l.description ? (g(), o("p", {
+					key: 1,
+					id: H,
+					class: "t-modal__description"
+				}, y(l.description), 1)) : a("", !0),
+				s("div", N, [v(e.$slots, "content", {}, () => [v(e.$slots, "default")])]),
+				e.$slots.footer ? (g(), o("div", P, [v(e.$slots, "footer")])) : a("", !0)
+			], 42, k)])], 8, D)) : a("", !0)]),
+			_: 3
+		})]))], 14, se));
+	}
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=TModal.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TModal.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  createId,\n  focusFirst,\n  focusLast,\n  getFocusableElements,\n  isEscapeKey,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst CloseIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    title?: string;\n    description?: string;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    id?: string;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n    title: '',\n    description: '',\n    closeOnEscape: true,\n    closeOnOverlay: true,\n    showCloseButton: true,\n    closeLabel: 'Close modal',\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst modalId = props.id ?? createId('t-modal');\nconst titleId = `${modalId}-title`;\nconst descriptionId = `${modalId}-description`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst surfaceRef = ref<HTMLElement | null>(null);\nconst previousFocusedElement = ref<HTMLElement | null>(null);\nconst hasHeaderContent = computed(() => Boolean(props.title || slots.header));\n\nconst slots = defineSlots<{\n  default?: () => unknown;\n  trigger?: () => unknown;\n  header?: () => unknown;\n  content?: () => unknown;\n  footer?: () => unknown;\n}>();\n\nconst rootClasses = computed(() => ['t-modal', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst surfaceClasses = computed(() => [\n  't-modal__surface',\n  `t-modal__surface--${props.size}`,\n]);\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst labelledBy = computed(() => (hasHeaderContent.value ? titleId : undefined));\nconst describedBy = computed(() => (props.description ? descriptionId : undefined));\n\nlet openOverlayCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (openOverlayCount === 0) {\n    previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n\n  openOverlayCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n  if (typeof document === 'undefined' || openOverlayCount === 0) {\n    return;\n  }\n\n  openOverlayCount -= 1;\n\n  if (openOverlayCount === 0) {\n    document.body.style.overflow = previousBodyOverflow;\n  }\n};\n\nconst focusSurface = () => {\n  nextTick(() => {\n    if (!surfaceRef.value) {\n      return;\n    }\n\n    const focused = focusFirst(surfaceRef.value);\n    if (!focused) {\n      surfaceRef.value.focus();\n    }\n  });\n};\n\nconst openModal = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  previousFocusedElement.value = document.activeElement as HTMLElement | null;\n  setValue(true);\n};\n\nconst closeModal = () => {\n  setValue(false);\n};\n\nconst onTriggerClick = (event: MouseEvent) => {\n  if (props.disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  if (event.defaultPrevented) {\n    return;\n  }\n\n  openModal();\n};\n\nconst onOverlayClick = () => {\n  if (!props.closeOnOverlay) {\n    return;\n  }\n\n  closeModal();\n};\n\nconst onSurfaceClick = (event: MouseEvent) => {\n  event.stopPropagation();\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n  if (isEscapeKey(event) && props.closeOnEscape) {\n    event.preventDefault();\n    closeModal();\n    return;\n  }\n\n  if (event.key !== 'Tab' || !surfaceRef.value) {\n    return;\n  }\n\n  const focusable = getFocusableElements(surfaceRef.value);\n\n  if (!focusable.length) {\n    event.preventDefault();\n    surfaceRef.value.focus();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  const activeElement = document.activeElement as HTMLElement | null;\n\n  if (event.shiftKey && activeElement === first) {\n    event.preventDefault();\n    focusLast(surfaceRef.value);\n  }\n\n  if (!event.shiftKey && activeElement === last) {\n    event.preventDefault();\n    focusFirst(surfaceRef.value);\n  }\n};\n\nwatch(isOpen, (value, previousValue) => {\n  if (value) {\n    lockBodyScroll();\n    focusSurface();\n    return;\n  }\n\n  if (previousValue) {\n    unlockBodyScroll();\n    nextTick(() => {\n      previousFocusedElement.value?.focus();\n    });\n  }\n});\n\nonBeforeUnmount(() => {\n  if (isOpen.value) {\n    unlockBodyScroll();\n  }\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <span\n      v-if=\"$slots.trigger\"\n      class=\"t-modal__trigger\"\n      v-bind=\"triggerAttrs\"\n      :aria-disabled=\"disabled || undefined\"\n      @click=\"onTriggerClick\"\n    >\n      <slot name=\"trigger\" />\n    </span>\n\n    <Teleport to=\"body\">\n      <transition name=\"t-modal-fade\">\n        <div\n          v-if=\"isOpen\"\n          class=\"t-modal__portal\"\n          :data-state=\"isOpen ? 'open' : 'closed'\"\n        >\n          <div\n            class=\"t-modal__backdrop\"\n            aria-hidden=\"true\"\n            @click=\"onOverlayClick\"\n          />\n          <div class=\"t-modal__positioner\">\n            <div\n              :id=\"modalId\"\n              ref=\"surfaceRef\"\n              :class=\"surfaceClasses\"\n              role=\"dialog\"\n              aria-modal=\"true\"\n              :aria-labelledby=\"labelledBy\"\n              :aria-describedby=\"describedBy\"\n              tabindex=\"-1\"\n              @click=\"onSurfaceClick\"\n              @keydown=\"onKeydown\"\n            >\n              <div\n                v-if=\"hasHeaderContent || showCloseButton\"\n                class=\"t-modal__topbar\"\n              >\n                <div\n                  v-if=\"hasHeaderContent\"\n                  :id=\"titleId\"\n                  class=\"t-modal__header\"\n                >\n                  <slot name=\"header\">\n                    <h2 class=\"t-modal__title\">\n                      {{ title }}\n                    </h2>\n                  </slot>\n                </div>\n                <button\n                  v-if=\"showCloseButton\"\n                  type=\"button\"\n                  class=\"t-modal__close\"\n                  :aria-label=\"closeLabel\"\n                  @click=\"closeModal\"\n                >\n                  <CloseIcon v-bind=\"treeIconDefaults\" />\n                </button>\n              </div>\n\n              <p\n                v-if=\"description\"\n                :id=\"descriptionId\"\n                class=\"t-modal__description\"\n              >\n                {{ description }}\n              </p>\n\n              <div class=\"t-modal__body\">\n                <slot name=\"content\">\n                  <slot />\n                </slot>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                class=\"t-modal__footer\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TMultiSelect.cjs

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

package/dist/components/TMultiSelect.cjs.map

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

package/dist/components/TMultiSelect.js

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

package/dist/components/TMultiSelect.js.map

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

package/dist/components/{TreeMultiSelect.vue.d.ts → TMultiSelect.vue.d.ts}

@@ -1,5 +1,5 @@
-import { TreeSize } from '../types/contracts';
-export interface TreeMultiSelectOption {
+import { TSize } from '../types/contracts';
+export interface TMultiSelectOption {
     label: string;
     value: string;
     description?: string;
@@ -8,10 +8,10 @@ export interface TreeMultiSelectOption {
 }
 type __VLS_Props = {
     modelValue?: string[];
-    options?: TreeMultiSelectOption[];
+    options?: TMultiSelectOption[];
     open?: boolean;
     defaultOpen?: boolean;
-    size?: TreeSize;
+    size?: TSize;
     disabled?: boolean;
     loading?: boolean;
     invalid?: boolean;
@@ -24,11 +24,11 @@ declare function __VLS_template(): {
     slots: Readonly<{
         prefix?: () => unknown;
         tag?: (props: {
-            option: TreeMultiSelectOption;
+            option: TMultiSelectOption;
             remove: () => void;
         }) => unknown;
         option?: (props: {
-            option: TreeMultiSelectOption;
+            option: TMultiSelectOption;
             selected: boolean;
             active: boolean;
         }) => unknown;
@@ -38,11 +38,11 @@ declare function __VLS_template(): {
     }> & {
         prefix?: () => unknown;
         tag?: (props: {
-            option: TreeMultiSelectOption;
+            option: TMultiSelectOption;
             remove: () => void;
         }) => unknown;
         option?: (props: {
-            option: TreeMultiSelectOption;
+            option: TMultiSelectOption;
             selected: boolean;
             active: boolean;
         }) => unknown;
@@ -70,10 +70,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }>, {
     modelValue: string[];
     disabled: boolean;
-    size: TreeSize;
+    size: TSize;
     loading: boolean;
     invalid: boolean;
-    options: TreeMultiSelectOption[];
+    options: TMultiSelectOption[];
     open: boolean;
     defaultOpen: boolean;
     placeholder: string;
@@ -90,4 +90,4 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=TreeMultiSelect.vue.d.ts.map
+//# sourceMappingURL=TMultiSelect.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TMultiSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/TMultiSelect.vue"],"names":[],"mappings":"AA4fA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAsUJ,iBAAS,cAAc;WAuNT,OAAO,IAA6B;;iBAlgBvC,MAAM,OAAO;cAChB,CAAC,KAAK,EAAE;YAAE,MAAM,EAAE,kBAAkB,CAAC;YAAC,MAAM,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,OAAO;iBACnE,CAAC,KAAK,EAAE;YACf,MAAM,EAAE,kBAAkB,CAAC;YAC3B,QAAQ,EAAE,OAAO,CAAC;YAClB,MAAM,EAAE,OAAO,CAAC;SACjB,KAAK,OAAO;gBACL,CAAC,KAAK,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;iBAPpC,MAAM,OAAO;cAChB,CAAC,KAAK,EAAE;YAAE,MAAM,EAAE,kBAAkB,CAAC;YAAC,MAAM,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,OAAO;iBACnE,CAAC,KAAK,EAAE;YACf,MAAM,EAAE,kBAAkB,CAAC;YAC3B,QAAQ,EAAE,OAAO,CAAC;YAClB,MAAM,EAAE,OAAO,CAAC;SACjB,KAAK,OAAO;gBACL,CAAC,KAAK,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;;;;;EAggB9C;AAmCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;gBAjlBJ,MAAM,EAAE;cAKV,OAAO;UADX,KAAK;aAEF,OAAO;aACP,OAAO;aANP,kBAAkB,EAAE;UACvB,OAAO;iBACA,OAAO;iBAKP,MAAM;eACR,MAAM;oBACD,MAAM;;;;OAglBzB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TMultiSelect.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getTreeIcon } from '@treeui/icons';\nimport { createId, getNextEnabledIndex, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, useAttrs, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\nimport TSpinner from './TSpinner.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TMultiSelectOption {\n  label: string;\n  value: string;\n  description?: string;\n  keywords?: string[];\n  disabled?: boolean;\n}\n\nconst ChevronDownIcon = getTreeIcon('chevron-down');\nconst CheckIcon = getTreeIcon('check');\nconst XIcon = getTreeIcon('x');\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string[];\n    options?: TMultiSelectOption[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    emptyText?: string;\n    maxVisibleTags?: number;\n  }>(),\n  {\n    modelValue: () => [],\n    options: () => [],\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: '',\n    emptyText: 'No results found.',\n    maxVisibleTags: 2,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string[]];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  'input-change': [value: string];\n}>();\n\ndefineSlots<{\n  prefix?: () => unknown;\n  tag?: (props: { option: TMultiSelectOption; remove: () => void }) => unknown;\n  option?: (props: {\n    option: TMultiSelectOption;\n    selected: boolean;\n    active: boolean;\n  }) => unknown;\n  empty?: (props: { query: string }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-multi-select');\nconst rootRef = ref<HTMLElement | null>(null);\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst query = ref('');\nconst activeIndex = ref(-1);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, autocomplete, ...rest } = attrs;\n  return {\n    autocomplete: typeof autocomplete === 'string' ? autocomplete : 'off',\n    ...rest,\n  };\n});\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst rootClasses = computed(() => [\n  't-multi-select',\n  `t-multi-select--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-loading': props.loading,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst normalize = (value: string) => value.trim().toLowerCase();\n\nconst filteredOptions = computed(() => {\n  const normalizedQuery = normalize(query.value);\n\n  if (!normalizedQuery) {\n    return props.options;\n  }\n\n  return props.options.filter((option) => {\n    const fields = [option.label, option.description ?? '', ...(option.keywords ?? [])];\n    return fields.some((field) => field.toLowerCase().includes(normalizedQuery));\n  });\n});\n\nconst selectedOptions = computed(() =>\n  props.options.filter((option) => props.modelValue.includes(option.value)),\n);\n\nconst visibleTags = computed(() => selectedOptions.value.slice(0, props.maxVisibleTags));\nconst hiddenTagCount = computed(() =>\n  Math.max(selectedOptions.value.length - visibleTags.value.length, 0),\n);\n\nconst enabledFilteredOptions = computed(() => filteredOptions.value.filter((option) => !option.disabled));\n\nconst activeOption = computed(() =>\n  activeIndex.value >= 0 ? filteredOptions.value[activeIndex.value] : undefined,\n);\n\nconst activeDescendant = computed(() =>\n  isOpen.value && activeOption.value\n    ? `${listboxId}-option-${activeOption.value.value}`\n    : undefined,\n);\n\nconst inputPlaceholder = computed(() =>\n  props.modelValue.length === 0 && !query.value ? props.placeholder : '',\n);\n\nconst isSelected = (value: string) => props.modelValue.includes(value);\n\nconst setInitialActiveIndex = (fallback: 'first' | 'last' = 'first') => {\n  const selectedIndex = filteredOptions.value.findIndex(\n    (option) => isSelected(option.value) && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    activeIndex.value = selectedIndex;\n    return;\n  }\n\n  if (enabledFilteredOptions.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const targetOption =\n    fallback === 'last'\n      ? enabledFilteredOptions.value[enabledFilteredOptions.value.length - 1]\n      : enabledFilteredOptions.value[0];\n\n  activeIndex.value = filteredOptions.value.findIndex(\n    (option) => option.value === targetOption.value,\n  );\n};\n\nconst openListbox = (fallback: 'first' | 'last' = 'first') => {\n  if (props.disabled) {\n    return;\n  }\n\n  setValue(true);\n  setInitialActiveIndex(fallback);\n};\n\nconst closeListbox = () => {\n  setValue(false);\n  activeIndex.value = -1;\n};\n\nconst focusInput = () => {\n  nextTick(() => inputRef.value?.focus());\n};\n\nconst updateValues = (nextValues: string[]) => {\n  emit('update:modelValue', nextValues);\n};\n\nconst toggleOption = (option: TMultiSelectOption) => {\n  if (props.disabled || option.disabled) {\n    return;\n  }\n\n  const nextValues = isSelected(option.value)\n    ? props.modelValue.filter((value) => value !== option.value)\n    : [...props.modelValue, option.value];\n\n  updateValues(nextValues);\n  query.value = '';\n  setInitialActiveIndex('first');\n  focusInput();\n};\n\nconst removeValue = (value: string) => {\n  if (props.disabled) {\n    return;\n  }\n\n  updateValues(props.modelValue.filter((item) => item !== value));\n  focusInput();\n};\n\nconst moveActive = (direction: 1 | -1) => {\n  if (filteredOptions.value.length === 0) {\n    activeIndex.value = -1;\n    return;\n  }\n\n  const nextIndex = getNextEnabledIndex(activeIndex.value, filteredOptions.value, direction);\n  activeIndex.value = nextIndex;\n};\n\nconst onInput = (event: Event) => {\n  query.value = (event.target as HTMLInputElement).value;\n  emit('input-change', query.value);\n\n  if (!props.disabled && !isOpen.value) {\n    openListbox('first');\n    return;\n  }\n\n  setInitialActiveIndex('first');\n};\n\nconst onInputFocus = () => {\n  openListbox('first');\n};\n\nconst onInputKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Tab') {\n    closeListbox();\n    return;\n  }\n\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeListbox();\n    return;\n  }\n\n  if (event.key === 'Backspace' && !query.value && props.modelValue.length > 0) {\n    event.preventDefault();\n    removeValue(props.modelValue[props.modelValue.length - 1]);\n    return;\n  }\n\n  if (event.key === 'ArrowDown') {\n    event.preventDefault();\n\n    if (!isOpen.value) {\n      openListbox('first');\n      return;\n    }\n\n    moveActive(1);\n    return;\n  }\n\n  if (event.key === 'ArrowUp') {\n    event.preventDefault();\n\n    if (!isOpen.value) {\n      openListbox('last');\n      return;\n    }\n\n    moveActive(-1);\n    return;\n  }\n\n  if (event.key === 'Home' && isOpen.value) {\n    event.preventDefault();\n    setInitialActiveIndex('first');\n    return;\n  }\n\n  if (event.key === 'End' && isOpen.value) {\n    event.preventDefault();\n    setInitialActiveIndex('last');\n    return;\n  }\n\n  if (event.key === 'Enter' && activeOption.value) {\n    event.preventDefault();\n    toggleOption(activeOption.value);\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeListbox();\n};\n\nwatch(\n  isOpen,\n  (value) => {\n    if (value) {\n      document.addEventListener('pointerdown', onDocumentPointerDown);\n    } else {\n      document.removeEventListener('pointerdown', onDocumentPointerDown);\n    }\n  },\n);\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <div\n      class=\"t-multi-select__control\"\n      @click=\"focusInput\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-multi-select__slot\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n\n      <div class=\"t-multi-select__values\">\n        <span\n          v-for=\"option in visibleTags\"\n          :key=\"option.value\"\n          class=\"t-multi-select__tag\"\n        >\n          <slot\n            name=\"tag\"\n            :option=\"option\"\n            :remove=\"() => removeValue(option.value)\"\n          >\n            <span class=\"t-multi-select__tag-label\">{{ option.label }}</span>\n            <button\n              type=\"button\"\n              class=\"t-multi-select__tag-remove\"\n              :disabled=\"disabled\"\n              aria-label=\"Remove selection\"\n              @mousedown.prevent\n              @click.stop=\"removeValue(option.value)\"\n            >\n              <XIcon :size=\"12\" />\n            </button>\n          </slot>\n        </span>\n\n        <span\n          v-if=\"hiddenTagCount > 0\"\n          class=\"t-multi-select__overflow\"\n        >\n          +{{ hiddenTagCount }}\n        </span>\n\n        <input\n          ref=\"inputRef\"\n          v-bind=\"inputAttrs\"\n          :value=\"query\"\n          type=\"text\"\n          class=\"t-multi-select__input\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          :aria-expanded=\"isOpen\"\n          :aria-controls=\"isOpen ? listboxId : undefined\"\n          :aria-activedescendant=\"activeDescendant\"\n          :aria-invalid=\"invalid || undefined\"\n          :aria-busy=\"loading || undefined\"\n          :disabled=\"disabled\"\n          :placeholder=\"inputPlaceholder\"\n          @focus=\"onInputFocus\"\n          @input=\"onInput\"\n          @keydown=\"onInputKeydown\"\n        >\n      </div>\n\n      <TSpinner\n        v-if=\"loading\"\n        class=\"t-multi-select__indicator\"\n        size=\"sm\"\n      />\n      <ChevronDownIcon\n        v-else\n        class=\"t-multi-select__indicator\"\n        :size=\"16\"\n      />\n    </div>\n\n    <Transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen\"\n        :id=\"listboxId\"\n        class=\"t-multi-select__listbox\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n      >\n        <li\n          v-if=\"filteredOptions.length === 0\"\n          class=\"t-multi-select__empty\"\n        >\n          <slot\n            name=\"empty\"\n            :query=\"query\"\n          >\n            {{ emptyText }}\n          </slot>\n        </li>\n\n        <template v-else>\n          <li\n            v-for=\"(option, index) in filteredOptions\"\n            :key=\"option.value\"\n          >\n            <button\n              :id=\"`${listboxId}-option-${option.value}`\"\n              type=\"button\"\n              class=\"t-multi-select__option\"\n              :class=\"{\n                'is-active': index === activeIndex,\n                'is-selected': isSelected(option.value),\n                'is-disabled': option.disabled,\n              }\"\n              role=\"option\"\n              :aria-selected=\"isSelected(option.value)\"\n              :aria-disabled=\"option.disabled || undefined\"\n              :disabled=\"option.disabled\"\n              @mousedown.prevent\n              @click=\"toggleOption(option)\"\n            >\n              <slot\n                name=\"option\"\n                :option=\"option\"\n                :selected=\"isSelected(option.value)\"\n                :active=\"index === activeIndex\"\n              >\n                <span class=\"t-multi-select__option-copy\">\n                  <span class=\"t-multi-select__option-label\">{{ option.label }}</span>\n                  <span\n                    v-if=\"option.description\"\n                    class=\"t-multi-select__option-description\"\n                  >\n                    {{ option.description }}\n                  </span>\n                </span>\n\n                <span\n                  class=\"t-multi-select__check\"\n                  aria-hidden=\"true\"\n                >\n                  <CheckIcon\n                    v-if=\"isSelected(option.value)\"\n                    :size=\"16\"\n                  />\n                </span>\n              </slot>\n            </button>\n          </li>\n        </template>\n      </ul>\n    </Transition>\n  </div>\n</template>\n"],"mappings":"mvCAoBA,IAAM,GAAA,EAAA,EAAA,YAAA,CAA8B,cAAc,EAC5C,GAAA,EAAA,EAAA,YAAA,CAAwB,OAAO,EAC/B,GAAA,EAAA,EAAA,YAAA,CAAoB,GAAG,EAEvB,EAAQ,EA6BR,EAAO,EAkBP,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,GAAA,EAAA,EAAA,SAAA,CAAqB,gBAAgB,EACrC,GAAA,EAAA,EAAA,IAAA,CAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,IAAA,CAAwC,IAAI,EAC5C,GAAA,EAAA,EAAA,IAAA,CAAY,EAAE,EACd,GAAA,EAAA,EAAA,IAAA,CAAkB,EAAE,EAEpB,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,eAAc,GAAG,GAAS,EAChE,MAAO,CACL,aAAc,OAAO,GAAiB,SAAW,EAAe,MAChE,GAAG,CACL,CACF,CAAC,EAEK,CAAE,MAAO,EAAQ,YAAa,EAAA,qBAAA,EAAA,EAAA,MAAA,CAC5B,EAAO,MAAM,EACnB,EAAM,YACL,GAAU,CACT,EAAK,cAAe,CAAK,EACzB,EAAK,cAAe,CAAK,CAC3B,CACF,EAEM,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,iBACA,mBAAmB,EAAM,OACzB,CACE,cAAe,EAAM,SACrB,aAAc,EAAM,QACpB,aAAc,EAAM,QACpB,UAAW,EAAO,KACpB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,EAAa,GAAkB,EAAM,KAAK,CAAC,CAAC,YAAY,EAExD,GAAA,EAAA,EAAA,SAAA,KAAiC,CACrC,IAAM,EAAkB,EAAU,EAAM,KAAK,EAM7C,OAJK,EAIE,EAAM,QAAQ,OAAQ,GAEpB,CADS,EAAO,MAAO,EAAO,aAAe,GAAI,GAAI,EAAO,UAAY,CAAC,CACzE,CAAA,CAAO,KAAM,GAAU,EAAM,YAAY,CAAC,CAAC,SAAS,CAAe,CAAC,CAC5E,EANQ,EAAM,OAOjB,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KACJ,EAAM,QAAQ,OAAQ,GAAW,EAAM,WAAW,SAAS,EAAO,KAAK,CAAC,CAC1E,EAEM,GAAA,EAAA,EAAA,SAAA,KAA6B,EAAgB,MAAM,MAAM,EAAG,EAAM,cAAc,CAAC,EACjF,GAAA,EAAA,EAAA,SAAA,KACJ,KAAK,IAAI,EAAgB,MAAM,OAAS,EAAY,MAAM,OAAQ,CAAC,CACrE,EAEM,GAAA,EAAA,EAAA,SAAA,KAAwC,EAAgB,MAAM,OAAQ,GAAW,CAAC,EAAO,QAAQ,CAAC,EAElG,GAAA,EAAA,EAAA,SAAA,KACJ,EAAY,OAAS,EAAI,EAAgB,MAAM,EAAY,OAAS,IAAA,EACtE,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAO,OAAS,EAAa,MACzB,GAAG,EAAU,UAAU,EAAa,MAAM,QAC1C,IAAA,EACN,EAEM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAM,WAAW,SAAW,GAAK,CAAC,EAAM,MAAQ,EAAM,YAAc,EACtE,EAEM,EAAc,GAAkB,EAAM,WAAW,SAAS,CAAK,EAE/D,GAAyB,EAA6B,UAAY,CACtE,IAAM,EAAgB,EAAgB,MAAM,UACzC,GAAW,EAAW,EAAO,KAAK,GAAK,CAAC,EAAO,QAClD,EAEA,GAAI,GAAiB,EAAG,CACtB,EAAY,MAAQ,EACpB,MACF,CAEA,GAAI,EAAuB,MAAM,SAAW,EAAG,CAC7C,EAAY,MAAQ,GACpB,MACF,CAEA,IAAM,EACJ,IAAa,OACT,EAAuB,MAAM,EAAuB,MAAM,OAAS,GACnE,EAAuB,MAAM,GAEnC,EAAY,MAAQ,EAAgB,MAAM,UACvC,GAAW,EAAO,QAAU,EAAa,KAC5C,CACF,EAEM,GAAe,EAA6B,UAAY,CACxD,EAAM,WAIV,EAAS,EAAI,EACb,EAAsB,CAAQ,EAChC,EAEM,MAAqB,CACzB,EAAS,EAAK,EACd,EAAY,MAAQ,EACtB,EAEM,MAAmB,EACvB,EAAA,EAAA,SAAA,KAAe,EAAS,OAAO,MAAM,CAAC,CACxC,EAEM,EAAgB,GAAyB,CAC7C,EAAK,oBAAqB,CAAU,CACtC,EAEM,EAAgB,GAA+B,CACnD,GAAI,EAAM,UAAY,EAAO,SAC3B,OAGF,IAAM,EAAa,EAAW,EAAO,KAAK,EACtC,EAAM,WAAW,OAAQ,GAAU,IAAU,EAAO,KAAK,EACzD,CAAC,GAAG,EAAM,WAAY,EAAO,KAAK,EAEtC,EAAa,CAAU,EACvB,EAAM,MAAQ,GACd,EAAsB,OAAO,EAC7B,EAAW,CACb,EAEM,EAAe,GAAkB,CACjC,EAAM,WAIV,EAAa,EAAM,WAAW,OAAQ,GAAS,IAAS,CAAK,CAAC,EAC9D,EAAW,EACb,EAEM,EAAc,GAAsB,CACxC,GAAI,EAAgB,MAAM,SAAW,EAAG,CACtC,EAAY,MAAQ,GACpB,MACF,CAEA,IAAM,GAAA,EAAA,EAAA,oBAAA,CAAgC,EAAY,MAAO,EAAgB,MAAO,CAAS,EACzF,EAAY,MAAQ,CACtB,EAEM,GAAW,GAAiB,CAIhC,GAHA,EAAM,MAAS,EAAM,OAA4B,MACjD,EAAK,eAAgB,EAAM,KAAK,EAE5B,CAAC,EAAM,UAAY,CAAC,EAAO,MAAO,CACpC,EAAY,OAAO,EACnB,MACF,CAEA,EAAsB,OAAO,CAC/B,EAEM,OAAqB,CACzB,EAAY,OAAO,CACrB,EAEM,GAAkB,GAAyB,CAC3C,MAAM,SAIV,IAAI,EAAM,MAAQ,MAAO,CACvB,EAAa,EACb,MACF,CAEA,IAAA,EAAA,EAAA,YAAA,CAAgB,CAAK,EAAG,CACtB,EAAM,eAAe,EACrB,EAAa,EACb,MACF,CAEA,GAAI,EAAM,MAAQ,aAAe,CAAC,EAAM,OAAS,EAAM,WAAW,OAAS,EAAG,CAC5E,EAAM,eAAe,EACrB,EAAY,EAAM,WAAW,EAAM,WAAW,OAAS,EAAE,EACzD,MACF,CAEA,GAAI,EAAM,MAAQ,YAAa,CAG7B,GAFA,EAAM,eAAe,EAEjB,CAAC,EAAO,MAAO,CACjB,EAAY,OAAO,EACnB,MACF,CAEA,EAAW,CAAC,EACZ,MACF,CAEA,GAAI,EAAM,MAAQ,UAAW,CAG3B,GAFA,EAAM,eAAe,EAEjB,CAAC,EAAO,MAAO,CACjB,EAAY,MAAM,EAClB,MACF,CAEA,EAAW,EAAE,EACb,MACF,CAEA,GAAI,EAAM,MAAQ,QAAU,EAAO,MAAO,CACxC,EAAM,eAAe,EACrB,EAAsB,OAAO,EAC7B,MACF,CAEA,GAAI,EAAM,MAAQ,OAAS,EAAO,MAAO,CACvC,EAAM,eAAe,EACrB,EAAsB,MAAM,EAC5B,MACF,CAEI,EAAM,MAAQ,SAAW,EAAa,QACxC,EAAM,eAAe,EACrB,EAAa,EAAa,KAAK,EApDjC,CAsDF,EAEM,EAAyB,GAAwB,CACrD,GAAI,CAAC,EAAO,MACV,OAGF,IAAM,EAAS,EAAM,OAEf,aAAkB,OAIpB,EAAQ,OAAO,SAAS,CAAM,GAIlC,EAAa,EACf,SAEA,EAAA,EAAA,MAAA,CACE,EACC,GAAU,CACL,EACF,SAAS,iBAAiB,cAAe,CAAqB,EAE9D,SAAS,oBAAoB,cAAe,CAAqB,CAErE,CACF,GAEA,EAAA,EAAA,gBAAA,KAAsB,CACpB,SAAS,oBAAoB,cAAe,CAAqB,CACnE,CAAC,qDA6JO,MAAA,SAxJA,UAAJ,IAAI,EACH,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,6BA4EX,MAAA,CAzEJ,MAAM,0BACL,QAAO,IAGAA,EAAAA,OAAO,SAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,EAKO,EAAA,EAAA,EAAA,WAAA,CADiB,EAAA,OAAA,QAAA,CAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAsDlB,MAnDN,EAmDM,+CA5BG,EAAA,SAAA,MAAA,EAAA,EAAA,WAAA,CArBY,EAAA,MAAV,+CAqBF,OAAA,CApBJ,IAAK,EAAO,MACb,MAAM,yCAkBC,EAAA,OAAA,MAAA,CAdI,SACR,WAAc,EAAY,EAAO,KAAK,OAalC,EAAA,EAAA,EAAA,mBAAA,CAX4D,OAAjE,IAAA,EAAA,EAAA,gBAAA,CAA2C,EAAO,KAAK,EAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAU9C,SAAA,CARP,KAAK,SACL,MAAM,6BACL,SAAU,EAAA,SACX,aAAW,mBACV,YAAS,AAAA,EAAA,MAAA,EAAA,EAAA,cAAA,KAAV,CAAA,EAAkB,CAAA,SAAA,CAAA,EACjB,SAAA,EAAA,EAAA,cAAA,CAAK,GAAO,EAAY,EAAO,KAAK,EAAA,CAAA,MAAA,CAAA,kCAEjB,CAAA,EAAA,CAAZ,KAAM,EAAE,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAMd,EAAA,MAAc,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIf,OALP,EAGC,MAAA,EAAA,EAAA,gBAAA,CACK,EAAA,KAAc,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,2BAqBnB,SAAA,EAAA,EAAA,WAAA,CAAA,SAjBK,WAAJ,IAAI,GACI,EAAA,MAAU,CACjB,MAAO,EAAA,MACR,KAAK,OACL,MAAM,wBACN,KAAK,WACL,oBAAkB,OACjB,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,EACf,iBAAA,EAAA,EAAA,MAAA,CAAe,CAAA,GAAA,EAAA,EAAA,MAAA,CAAS,CAAA,EAAY,IAAA,GACpC,wBAAuB,EAAA,MACvB,eAAc,EAAA,SAAW,IAAA,GACzB,YAAW,EAAA,SAAW,IAAA,GACtB,SAAU,EAAA,SACV,YAAa,EAAA,MACb,QAAO,GACA,WACP,UAAS,kBAKN,EAAA,UAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CAGN,EAAA,QAAA,OAFA,MAAM,4BACN,KAAK,yDAML,CAAA,EAAA,OAFA,MAAM,4BACL,KAAM,0BA2EE,EAAA,WAAA,CAvED,KAAK,QAAQ,EAAA,2BAsElB,EAAA,EAAA,EAAA,MAAA,CApEG,CAAA,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAoEH,KAAA,OAnEF,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,MAAM,0BACN,KAAK,UACL,uBAAqB,SAGb,EAAA,MAAgB,SAAM,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASzB,KAVL,EAUK,EAAA,EAAA,EAAA,WAAA,CADI,EAAA,OAAA,QAAA,CAHJ,MAAO,EAAA,KAAK,MAGR,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,SAAS,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,EAAA,UAAA,CAAA,EAAA,GAAA,EAAA,EAAA,mBAAA,CAoDT,EAAA,SAAA,CAAA,IAAA,CAAA,GAAA,EAAA,EAAA,WAAA,CA9CuB,EAAA,OAAlB,EAAQ,gDA8Cb,KAAA,CA7CF,IAAK,EAAO,KAAA,EAAA,EAAA,EAAA,EAAA,mBAAA,CA4CJ,SAAA,CAzCN,GAAE,IAAA,EAAA,EAAA,MAAA,CAAK,CAAA,EAAS,UAAW,EAAO,QACnC,KAAK,SACL,OAAA,EAAA,EAAA,eAAA,CAAK,CAAC,yBAAwB,aACS,IAAU,EAAA,oBAA4C,EAAW,EAAO,KAAK,gBAAkC,EAAO,YAK7J,KAAK,SACJ,gBAAe,EAAW,EAAO,KAAK,EACtC,gBAAe,EAAO,UAAY,IAAA,GAClC,SAAU,EAAO,SACjB,YAAS,AAAA,EAAA,MAAA,EAAA,EAAA,cAAA,KAAV,CAAA,EAAkB,CAAA,SAAA,CAAA,EACjB,QAAK,GAAE,EAAa,CAAM,qBA2BpB,EAAA,OAAA,SAAA,CAvBI,SACR,SAAU,EAAW,EAAO,KAAK,EACjC,OAAQ,IAAU,EAAA,WAqBd,EAAA,EAAA,EAAA,mBAAA,CAXE,OARP,EAQO,EAAA,EAAA,EAAA,mBAAA,CAP+D,OAApE,GAAA,EAAA,EAAA,gBAAA,CAA8C,EAAO,KAAK,EAAA,CAAA,EAElD,EAAO,cAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAIR,OALP,GAAA,EAAA,EAAA,gBAAA,CAIK,EAAO,WAAW,EAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAYlB,OARP,EAQO,CAHG,EAAW,EAAO,KAAK,IAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,MAAA,CAE7B,CAAA,EAAA,OADC,KAAM"}