@treeui/vue 0.7.0 → 0.10.0

package/dist/components/TMultiSelect.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, nextTick as te, normalizeClass as f, normalizeStyle as ne, onBeforeUnmount as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, toRef as y, unref as b, useAttrs as re, watch as ie, withCtx as ae, withModifiers as x } from "vue";
+import { createId as oe, getNextEnabledIndex as se, isEscapeKey as ce } from "@treeui/utils";
+import { getTreeIcon as S } from "@treeui/icons";
+//#region src/components/TMultiSelect.vue?vue&type=script&setup=true&lang.ts
+var le = {
+	key: 0,
+	class: "t-multi-select__slot"
+}, ue = { class: "t-multi-select__values" }, de = { class: "t-multi-select__tag-label" }, fe = ["disabled", "onClick"], pe = {
+	key: 0,
+	class: "t-multi-select__overflow"
+}, C = [
+	"value",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-busy",
+	"disabled",
+	"placeholder"
+], w = ["id"], T = {
+	key: 0,
+	class: "t-multi-select__empty"
+}, E = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"disabled",
+	"onClick"
+], me = { class: "t-multi-select__option-copy" }, he = { class: "t-multi-select__option-label" }, ge = {
+	key: 0,
+	class: "t-multi-select__option-description"
+}, _e = {
+	class: "t-multi-select__check",
+	"aria-hidden": "true"
+}, D = /*@__PURE__*/ d({
+	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(d, { emit: D }) {
+		let ve = S("chevron-down"), ye = S("check"), be = S("x"), O = d, k = D, A = re(), j = oe("t-multi-select"), M = h(null), N = h(null), P = h(""), F = h(-1), xe = i(() => {
+			let { class: e, style: t, autocomplete: n, ...r } = A;
+			return {
+				autocomplete: typeof n == "string" ? n : "off",
+				...r
+			};
+		}), { value: I, setValue: L } = t(y(O, "open"), O.defaultOpen, (e) => {
+			k("update:open", e), k("open-change", e);
+		}), Se = i(() => [
+			"t-multi-select",
+			`t-multi-select--${O.size}`,
+			{
+				"is-disabled": O.disabled,
+				"is-invalid": O.invalid,
+				"is-loading": O.loading,
+				"is-open": I.value
+			},
+			A.class
+		]), Ce = i(() => A.style), we = (e) => e.trim().toLowerCase(), R = i(() => {
+			let e = we(P.value);
+			return e ? O.options.filter((t) => [
+				t.label,
+				t.description ?? "",
+				...t.keywords ?? []
+			].some((t) => t.toLowerCase().includes(e))) : O.options;
+		}), z = i(() => O.options.filter((e) => O.modelValue.includes(e.value))), B = i(() => z.value.slice(0, O.maxVisibleTags)), V = i(() => Math.max(z.value.length - B.value.length, 0)), H = i(() => R.value.filter((e) => !e.disabled)), U = i(() => F.value >= 0 ? R.value[F.value] : void 0), Te = i(() => I.value && U.value ? `${j}-option-${U.value.value}` : void 0), Ee = i(() => O.modelValue.length === 0 && !P.value ? O.placeholder : ""), W = (e) => O.modelValue.includes(e), G = (e = "first") => {
+			let t = R.value.findIndex((e) => W(e.value) && !e.disabled);
+			if (t >= 0) {
+				F.value = t;
+				return;
+			}
+			if (H.value.length === 0) {
+				F.value = -1;
+				return;
+			}
+			let n = e === "last" ? H.value[H.value.length - 1] : H.value[0];
+			F.value = R.value.findIndex((e) => e.value === n.value);
+		}, K = (e = "first") => {
+			O.disabled || (L(!0), G(e));
+		}, q = () => {
+			L(!1), F.value = -1;
+		}, J = () => {
+			te(() => N.value?.focus());
+		}, Y = (e) => {
+			k("update:modelValue", e);
+		}, X = (e) => {
+			if (O.disabled || e.disabled) return;
+			let t = W(e.value) ? O.modelValue.filter((t) => t !== e.value) : [...O.modelValue, e.value];
+			Y(t), P.value = "", G("first"), J();
+		}, Z = (e) => {
+			O.disabled || (Y(O.modelValue.filter((t) => t !== e)), J());
+		}, Q = (e) => {
+			if (R.value.length === 0) {
+				F.value = -1;
+				return;
+			}
+			let t = se(F.value, R.value, e);
+			F.value = t;
+		}, De = (e) => {
+			if (P.value = e.target.value, k("input-change", P.value), !O.disabled && !I.value) {
+				K("first");
+				return;
+			}
+			G("first");
+		}, Oe = () => {
+			K("first");
+		}, ke = (e) => {
+			if (!O.disabled) {
+				if (e.key === "Tab") {
+					q();
+					return;
+				}
+				if (ce(e)) {
+					e.preventDefault(), q();
+					return;
+				}
+				if (e.key === "Backspace" && !P.value && O.modelValue.length > 0) {
+					e.preventDefault(), Z(O.modelValue[O.modelValue.length - 1]);
+					return;
+				}
+				if (e.key === "ArrowDown") {
+					if (e.preventDefault(), !I.value) {
+						K("first");
+						return;
+					}
+					Q(1);
+					return;
+				}
+				if (e.key === "ArrowUp") {
+					if (e.preventDefault(), !I.value) {
+						K("last");
+						return;
+					}
+					Q(-1);
+					return;
+				}
+				if (e.key === "Home" && I.value) {
+					e.preventDefault(), G("first");
+					return;
+				}
+				if (e.key === "End" && I.value) {
+					e.preventDefault(), G("last");
+					return;
+				}
+				e.key === "Enter" && U.value && (e.preventDefault(), X(U.value));
+			}
+		}, $ = (e) => {
+			if (!I.value) return;
+			let t = e.target;
+			t instanceof Node && (M.value?.contains(t) || q());
+		};
+		return ie(I, (e) => {
+			e ? document.addEventListener("pointerdown", $) : document.removeEventListener("pointerdown", $);
+		}), p(() => {
+			document.removeEventListener("pointerdown", $);
+		}), (t, i) => (m(), s("div", {
+			ref_key: "rootRef",
+			ref: M,
+			class: f(Se.value),
+			style: ne(Ce.value)
+		}, [c("div", {
+			class: "t-multi-select__control",
+			onClick: J
+		}, [
+			t.$slots.prefix ? (m(), s("span", le, [_(t.$slots, "prefix")])) : o("", !0),
+			c("div", ue, [
+				(m(!0), s(n, null, g(B.value, (e) => (m(), s("span", {
+					key: e.value,
+					class: "t-multi-select__tag"
+				}, [_(t.$slots, "tag", {
+					option: e,
+					remove: () => Z(e.value)
+				}, () => [c("span", de, v(e.label), 1), c("button", {
+					type: "button",
+					class: "t-multi-select__tag-remove",
+					disabled: d.disabled,
+					"aria-label": "Remove selection",
+					onMousedown: i[0] ||= x(() => {}, ["prevent"]),
+					onClick: x((t) => Z(e.value), ["stop"])
+				}, [u(b(be), { size: 12 })], 40, fe)])]))), 128)),
+				V.value > 0 ? (m(), s("span", pe, " +" + v(V.value), 1)) : o("", !0),
+				c("input", ee({
+					ref_key: "inputRef",
+					ref: N
+				}, xe.value, {
+					value: P.value,
+					type: "text",
+					class: "t-multi-select__input",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-expanded": b(I),
+					"aria-controls": b(I) ? b(j) : void 0,
+					"aria-activedescendant": Te.value,
+					"aria-invalid": d.invalid || void 0,
+					"aria-busy": d.loading || void 0,
+					disabled: d.disabled,
+					placeholder: Ee.value,
+					onFocus: Oe,
+					onInput: De,
+					onKeydown: ke
+				}), null, 16, C)
+			]),
+			d.loading ? (m(), a(e, {
+				key: 1,
+				class: "t-multi-select__indicator",
+				size: "sm"
+			})) : (m(), a(b(ve), {
+				key: 2,
+				class: "t-multi-select__indicator",
+				size: 16
+			}))
+		]), u(r, { name: "t-fade" }, {
+			default: ae(() => [b(I) ? (m(), s("ul", {
+				key: 0,
+				id: b(j),
+				class: "t-multi-select__listbox",
+				role: "listbox",
+				"aria-multiselectable": "true"
+			}, [R.value.length === 0 ? (m(), s("li", T, [_(t.$slots, "empty", { query: P.value }, () => [l(v(d.emptyText), 1)])])) : (m(!0), s(n, { key: 1 }, g(R.value, (e, n) => (m(), s("li", { key: e.value }, [c("button", {
+				id: `${b(j)}-option-${e.value}`,
+				type: "button",
+				class: f(["t-multi-select__option", {
+					"is-active": n === F.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: i[1] ||= x(() => {}, ["prevent"]),
+				onClick: (t) => X(e)
+			}, [_(t.$slots, "option", {
+				option: e,
+				selected: W(e.value),
+				active: n === F.value
+			}, () => [c("span", me, [c("span", he, v(e.label), 1), e.description ? (m(), s("span", ge, v(e.description), 1)) : o("", !0)]), c("span", _e, [W(e.value) ? (m(), a(b(ye), {
+				key: 0,
+				size: 16
+			})) : o("", !0)])])], 42, E)]))), 128))], 8, w)) : o("", !0)]),
+			_: 3
+		})], 6));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=TMultiSelect.vue_vue_type_script_setup_true_lang.js.map

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

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

package/dist/components/TNavMenu.cjs

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

package/dist/components/TNavMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TNavMenu.cjs","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n  label: string;\n  value: string;\n  shortLabel?: string;\n  description?: string;\n  icon?: Component;\n  to?: string | Record<string, unknown>;\n  badge?: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TNavMenuItem[];\n    size?: TSize;\n    collapsed?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    collapsed: undefined,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TNavMenuItem;\n    selected: boolean;\n    focused: boolean;\n    collapsed: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component | null>(() => (\n  (instance?.appContext.components.RouterLink as Component | undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n  if (item.to && routerLinkComponent.value) {\n    return routerLinkComponent.value;\n  }\n  return 'button';\n};\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.items.findIndex((item) =>\n    item.value === selectedValue.value && !item.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-nav-menu',\n  `t-nav-menu--${props.size}`,\n  {\n    'is-collapsed': resolvedCollapsed.value,\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement) {\n    itemRefs.value.set(value, resolvedElement);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n\n  if (!item) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n  if (props.disabled || item.disabled) {\n    return;\n  }\n\n  if (props.modelValue === undefined) {\n    internalValue.value = item.value;\n  }\n\n  emit('update:modelValue', item.value);\n  emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n    if (firstIndex >= 0) {\n      focusItem(firstIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n    if (lastIndex >= 0) {\n      focusItem(props.items.length - 1 - lastIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n    if (nextIndex >= 0) {\n      focusItem(nextIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n    if (previousIndex >= 0) {\n      focusItem(previousIndex);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index]);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.items, props.modelValue] as const,\n  () => {\n    const nextIndex = getInitialFocusedIndex();\n    focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <nav\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"items.length > 0\"\n      class=\"t-nav-menu__list\"\n    >\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"item.value\"\n        class=\"t-nav-menu__entry\"\n      >\n        <component\n          :is=\"itemTag(item)\"\n          :ref=\"(element: Element | ComponentPublicInstance | null) => setItemRef(element, item.value)\"\n          :type=\"item.to ? undefined : 'button'\"\n          :to=\"item.to || undefined\"\n          class=\"t-nav-menu__item\"\n          :class=\"{\n            'is-selected': isSelected(item.value),\n            'is-disabled': disabled || item.disabled,\n          }\"\n          :disabled=\"(!item.to && (disabled || item.disabled)) || undefined\"\n          :aria-disabled=\"(item.to && (disabled || item.disabled)) || undefined\"\n          :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n          :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n          :title=\"resolvedCollapsed ? item.label : undefined\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, index)\"\n          @focus=\"focusedIndex = index\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :selected=\"isSelected(item.value)\"\n            :focused=\"focusedIndex === index\"\n            :collapsed=\"resolvedCollapsed\"\n          >\n            <component\n              :is=\"item.icon\"\n              v-if=\"item.icon\"\n              class=\"t-nav-menu__icon\"\n              aria-hidden=\"true\"\n            />\n            <span\n              v-else\n              class=\"t-nav-menu__marker\"\n              aria-hidden=\"true\"\n            >\n              {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n            </span>\n\n            <span class=\"t-nav-menu__copy\">\n              <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n              <span\n                v-if=\"item.description\"\n                class=\"t-nav-menu__description\"\n              >\n                {{ item.description }}\n              </span>\n            </span>\n\n            <span\n              v-if=\"item.badge !== undefined && item.badge !== null\"\n              class=\"t-nav-menu__badge\"\n            >\n              {{ item.badge }}\n            </span>\n          </slot>\n        </component>\n      </li>\n    </ul>\n\n    <div\n      v-else\n      class=\"t-nav-menu__empty\"\n    >\n      <slot name=\"empty\">\n        No navigation items.\n      </slot>\n    </div>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/components/TNavMenu.js

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

package/dist/components/TNavMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TNavMenu.js","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n  label: string;\n  value: string;\n  shortLabel?: string;\n  description?: string;\n  icon?: Component;\n  to?: string | Record<string, unknown>;\n  badge?: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TNavMenuItem[];\n    size?: TSize;\n    collapsed?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    collapsed: undefined,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TNavMenuItem;\n    selected: boolean;\n    focused: boolean;\n    collapsed: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component | null>(() => (\n  (instance?.appContext.components.RouterLink as Component | undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n  if (item.to && routerLinkComponent.value) {\n    return routerLinkComponent.value;\n  }\n  return 'button';\n};\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.items.findIndex((item) =>\n    item.value === selectedValue.value && !item.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-nav-menu',\n  `t-nav-menu--${props.size}`,\n  {\n    'is-collapsed': resolvedCollapsed.value,\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement) {\n    itemRefs.value.set(value, resolvedElement);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n\n  if (!item) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n  if (props.disabled || item.disabled) {\n    return;\n  }\n\n  if (props.modelValue === undefined) {\n    internalValue.value = item.value;\n  }\n\n  emit('update:modelValue', item.value);\n  emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n    if (firstIndex >= 0) {\n      focusItem(firstIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n    if (lastIndex >= 0) {\n      focusItem(props.items.length - 1 - lastIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n    if (nextIndex >= 0) {\n      focusItem(nextIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n    if (previousIndex >= 0) {\n      focusItem(previousIndex);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index]);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.items, props.modelValue] as const,\n  () => {\n    const nextIndex = getInitialFocusedIndex();\n    focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <nav\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"items.length > 0\"\n      class=\"t-nav-menu__list\"\n    >\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"item.value\"\n        class=\"t-nav-menu__entry\"\n      >\n        <component\n          :is=\"itemTag(item)\"\n          :ref=\"(element: Element | ComponentPublicInstance | null) => setItemRef(element, item.value)\"\n          :type=\"item.to ? undefined : 'button'\"\n          :to=\"item.to || undefined\"\n          class=\"t-nav-menu__item\"\n          :class=\"{\n            'is-selected': isSelected(item.value),\n            'is-disabled': disabled || item.disabled,\n          }\"\n          :disabled=\"(!item.to && (disabled || item.disabled)) || undefined\"\n          :aria-disabled=\"(item.to && (disabled || item.disabled)) || undefined\"\n          :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n          :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n          :title=\"resolvedCollapsed ? item.label : undefined\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, index)\"\n          @focus=\"focusedIndex = index\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :selected=\"isSelected(item.value)\"\n            :focused=\"focusedIndex === index\"\n            :collapsed=\"resolvedCollapsed\"\n          >\n            <component\n              :is=\"item.icon\"\n              v-if=\"item.icon\"\n              class=\"t-nav-menu__icon\"\n              aria-hidden=\"true\"\n            />\n            <span\n              v-else\n              class=\"t-nav-menu__marker\"\n              aria-hidden=\"true\"\n            >\n              {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n            </span>\n\n            <span class=\"t-nav-menu__copy\">\n              <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n              <span\n                v-if=\"item.description\"\n                class=\"t-nav-menu__description\"\n              >\n                {{ item.description }}\n              </span>\n            </span>\n\n            <span\n              v-if=\"item.badge !== undefined && item.badge !== null\"\n              class=\"t-nav-menu__badge\"\n            >\n              {{ item.badge }}\n            </span>\n          </slot>\n        </component>\n      </li>\n    </ul>\n\n    <div\n      v-else\n      class=\"t-nav-menu__empty\"\n    >\n      <slot name=\"empty\">\n        No navigation items.\n      </slot>\n    </div>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/components/{TreeNavMenu.vue.d.ts → TNavMenu.vue.d.ts}

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { TreeSize } from '../types/contracts';
-export interface TreeNavMenuItem {
+import { TSize } from '../types/contracts';
+export interface TNavMenuItem {
     label: string;
     value: string;
     shortLabel?: string;
@@ -13,8 +13,8 @@ export interface TreeNavMenuItem {
 type __VLS_Props = {
     modelValue?: string;
     defaultValue?: string;
-    items?: TreeNavMenuItem[];
-    size?: TreeSize;
+    items?: TNavMenuItem[];
+    size?: TSize;
     collapsed?: boolean;
     disabled?: boolean;
 };
@@ -22,7 +22,7 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         item?: (props: {
-            item: TreeNavMenuItem;
+            item: TNavMenuItem;
             selected: boolean;
             focused: boolean;
             collapsed: boolean;
@@ -30,7 +30,7 @@ declare function __VLS_template(): {
         empty?: () => unknown;
     }> & {
         item?: (props: {
-            item: TreeNavMenuItem;
+            item: TNavMenuItem;
             selected: boolean;
             focused: boolean;
             collapsed: boolean;
@@ -43,16 +43,16 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-    select: (value: string, item: TreeNavMenuItem) => any;
+    select: (value: string, item: TNavMenuItem) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onSelect?: ((value: string, item: TreeNavMenuItem) => any) | undefined;
+    onSelect?: ((value: string, item: TNavMenuItem) => any) | undefined;
 }>, {
     modelValue: string;
     defaultValue: string;
     disabled: boolean;
-    size: TreeSize;
-    items: TreeNavMenuItem[];
+    size: TSize;
+    items: TNavMenuItem[];
     collapsed: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
@@ -62,4 +62,4 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=TreeNavMenu.vue.d.ts.map
+//# sourceMappingURL=TNavMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TNavMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/TNavMenu.vue"],"names":[],"mappings":"AA+SA,OAAO,EAAwE,KAAK,SAAS,EAAgC,MAAM,KAAK,CAAC;AACzI,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAqMJ,iBAAS,cAAc;WA8IT,OAAO,IAA6B;;eA/TzC,CAAC,KAAK,EAAE;YACb,IAAI,EAAE,YAAY,CAAC;YACnB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,EAAE,OAAO,CAAC;SACpB,KAAK,OAAO;gBACL,MAAM,OAAO;;eANd,CAAC,KAAK,EAAE;YACb,IAAI,EAAE,YAAY,CAAC;YACnB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,EAAE,OAAO,CAAC;SACpB,KAAK,OAAO;gBACL,MAAM,OAAO;;;;EA8TtB;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;gBApXJ,MAAM;kBACJ,MAAM;cAIV,OAAO;UAFX,KAAK;WADJ,YAAY,EAAE;eAEV,OAAO;6EAwXrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TNavMenu.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TNavMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, getCurrentInstance, inject, nextTick, ref, useAttrs, watch, type Component, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\nimport { treeSidebarInjectionKey } from './sidebar';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TNavMenuItem {\n  label: string;\n  value: string;\n  shortLabel?: string;\n  description?: string;\n  icon?: Component;\n  to?: string | Record<string, unknown>;\n  badge?: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TNavMenuItem[];\n    size?: TSize;\n    collapsed?: boolean;\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    collapsed: undefined,\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  select: [value: string, item: TNavMenuItem];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TNavMenuItem;\n    selected: boolean;\n    focused: boolean;\n    collapsed: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst sidebar = inject(treeSidebarInjectionKey, null);\nconst internalValue = ref(props.defaultValue);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst instance = getCurrentInstance();\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\nconst resolvedCollapsed = computed(() => props.collapsed ?? sidebar?.collapsed.value ?? false);\n\nconst routerLinkComponent = computed<Component | null>(() => (\n  (instance?.appContext.components.RouterLink as Component | undefined) ?? null\n));\n\nconst itemTag = (item: TNavMenuItem) => {\n  if (item.to && routerLinkComponent.value) {\n    return routerLinkComponent.value;\n  }\n  return 'button';\n};\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.items.findIndex((item) =>\n    item.value === selectedValue.value && !item.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.items.findIndex((item) => !item.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-nav-menu',\n  `t-nav-menu--${props.size}`,\n  {\n    'is-collapsed': resolvedCollapsed.value,\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst rootAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst isSelected = (value: string) => selectedValue.value === value;\n\nconst setItemRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement) {\n    itemRefs.value.set(value, resolvedElement);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n\n  if (!item) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => itemRefs.value.get(item.value)?.focus());\n};\n\nconst selectItem = (item: TNavMenuItem) => {\n  if (props.disabled || item.disabled) {\n    return;\n  }\n\n  if (props.modelValue === undefined) {\n    internalValue.value = item.value;\n  }\n\n  emit('update:modelValue', item.value);\n  emit('select', item.value, item);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.items.findIndex((item) => !item.disabled);\n\n    if (firstIndex >= 0) {\n      focusItem(firstIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.items].reverse().findIndex((item) => !item.disabled);\n\n    if (lastIndex >= 0) {\n      focusItem(props.items.length - 1 - lastIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n    event.preventDefault();\n    const nextIndex = getNextEnabledIndex(index, props.items, 1);\n\n    if (nextIndex >= 0) {\n      focusItem(nextIndex);\n    }\n\n    return;\n  }\n\n  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n    event.preventDefault();\n    const previousIndex = getNextEnabledIndex(index, props.items, -1);\n\n    if (previousIndex >= 0) {\n      focusItem(previousIndex);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index]);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.items, props.modelValue] as const,\n  () => {\n    const nextIndex = getInitialFocusedIndex();\n    focusedIndex.value = nextIndex >= 0 ? nextIndex : -1;\n  },\n  { deep: true },\n);\n</script>\n\n<template>\n  <nav\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"items.length > 0\"\n      class=\"t-nav-menu__list\"\n    >\n      <li\n        v-for=\"(item, index) in items\"\n        :key=\"item.value\"\n        class=\"t-nav-menu__entry\"\n      >\n        <component\n          :is=\"itemTag(item)\"\n          :ref=\"(element: Element | ComponentPublicInstance | null) => setItemRef(element, item.value)\"\n          :type=\"item.to ? undefined : 'button'\"\n          :to=\"item.to || undefined\"\n          class=\"t-nav-menu__item\"\n          :class=\"{\n            'is-selected': isSelected(item.value),\n            'is-disabled': disabled || item.disabled,\n          }\"\n          :disabled=\"(!item.to && (disabled || item.disabled)) || undefined\"\n          :aria-disabled=\"(item.to && (disabled || item.disabled)) || undefined\"\n          :aria-current=\"isSelected(item.value) ? 'page' : undefined\"\n          :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n          :title=\"resolvedCollapsed ? item.label : undefined\"\n          @click=\"selectItem(item)\"\n          @keydown=\"onItemKeydown($event, index)\"\n          @focus=\"focusedIndex = index\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :selected=\"isSelected(item.value)\"\n            :focused=\"focusedIndex === index\"\n            :collapsed=\"resolvedCollapsed\"\n          >\n            <component\n              :is=\"item.icon\"\n              v-if=\"item.icon\"\n              class=\"t-nav-menu__icon\"\n              aria-hidden=\"true\"\n            />\n            <span\n              v-else\n              class=\"t-nav-menu__marker\"\n              aria-hidden=\"true\"\n            >\n              {{ (item.shortLabel ?? item.label.charAt(0)).toUpperCase() }}\n            </span>\n\n            <span class=\"t-nav-menu__copy\">\n              <span class=\"t-nav-menu__label\">{{ item.label }}</span>\n              <span\n                v-if=\"item.description\"\n                class=\"t-nav-menu__description\"\n              >\n                {{ item.description }}\n              </span>\n            </span>\n\n            <span\n              v-if=\"item.badge !== undefined && item.badge !== null\"\n              class=\"t-nav-menu__badge\"\n            >\n              {{ item.badge }}\n            </span>\n          </slot>\n        </component>\n      </li>\n    </ul>\n\n    <div\n      v-else\n      class=\"t-nav-menu__empty\"\n    >\n      <slot name=\"empty\">\n        No navigation items.\n      </slot>\n    </div>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/components/TNavMenu.vue_vue_type_script_setup_true_lang.js

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