@treeui/vue 0.8.0 → 0.10.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"TToggleGroup.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TToggleGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, ref, useAttrs, watch, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TToggleGroupOption {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nconst _treeToggleGroupSelectionModes = ['single', 'multiple'] as const;\nconst _treeToggleGroupVariants = ['outline', 'soft', 'solid'] as const;\n\nexport type TToggleGroupSelectionMode = (typeof _treeToggleGroupSelectionModes)[number];\nexport type TToggleGroupVariant = (typeof _treeToggleGroupVariants)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[];\n    options?: TToggleGroupOption[];\n    selectionMode?: TToggleGroupSelectionMode;\n    size?: TSize;\n    variant?: TToggleGroupVariant;\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: undefined,\n    options: () => [],\n    selectionMode: 'single',\n    size: 'md',\n    variant: 'outline',\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined];\n}>();\n\ndefineSlots<{\n  option?: (props: { option: TToggleGroupOption; selected: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-toggle-group');\nconst buttonRefs = ref<Map<string, HTMLButtonElement>>(new Map());\n\nconst normalizedValues = computed(() =>\n  props.selectionMode === 'multiple'\n    ? Array.isArray(props.modelValue)\n      ? props.modelValue\n      : []\n    : typeof props.modelValue === 'string' && props.modelValue\n      ? [props.modelValue]\n      : [],\n);\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.options.findIndex((option) =>\n    normalizedValues.value.includes(option.value) && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.options.findIndex((option) => !option.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-toggle-group',\n  `t-toggle-group--${props.size}`,\n  `t-toggle-group--${props.variant}`,\n  `t-toggle-group--${props.selectionMode}`,\n  {\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) => normalizedValues.value.includes(value);\n\nconst setButtonRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLButtonElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLButtonElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement instanceof HTMLButtonElement) {\n    buttonRefs.value.set(value, resolvedElement);\n  } else {\n    buttonRefs.value.delete(value);\n  }\n};\n\nconst focusOption = (index: number) => {\n  const option = props.options[index];\n\n  if (!option) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => buttonRefs.value.get(option.value)?.focus());\n};\n\nconst selectValue = (value: string) => {\n  const option = props.options.find((item) => item.value === value);\n\n  if (!option || option.disabled || props.disabled) {\n    return;\n  }\n\n  if (props.selectionMode === 'multiple') {\n    const nextValues = isSelected(value)\n      ? normalizedValues.value.filter((item) => item !== value)\n      : [...normalizedValues.value, value];\n\n    emit('update:modelValue', nextValues);\n    return;\n  }\n\n  emit('update:modelValue', value);\n};\n\nconst onOptionKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.options.findIndex((option) => !option.disabled);\n\n    if (firstIndex >= 0) {\n      focusOption(firstIndex);\n\n      if (props.selectionMode === 'single') {\n        selectValue(props.options[firstIndex].value);\n      }\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.options].reverse().findIndex((option) => !option.disabled);\n\n    if (lastIndex >= 0) {\n      const resolvedIndex = props.options.length - 1 - lastIndex;\n      focusOption(resolvedIndex);\n\n      if (props.selectionMode === 'single') {\n        selectValue(props.options[resolvedIndex].value);\n      }\n    }\n\n    return;\n  }\n\n  if (\n    event.key === 'ArrowRight' ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowLeft' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    const direction = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1;\n    const nextIndex = getNextEnabledIndex(index, props.options, direction as 1 | -1);\n\n    if (nextIndex >= 0) {\n      focusOption(nextIndex);\n\n      if (props.selectionMode === 'single') {\n        selectValue(props.options[nextIndex].value);\n      }\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectValue(props.options[index].value);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.modelValue, props.options] 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  <div\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :role=\"selectionMode === 'single' ? 'radiogroup' : 'group'\"\n  >\n    <button\n      v-for=\"(option, index) in options\"\n      :id=\"`${baseId}-${option.value}`\"\n      :ref=\"(element) => setButtonRef(element, option.value)\"\n      :key=\"option.value\"\n      type=\"button\"\n      class=\"t-toggle-group__item\"\n      :class=\"{\n        'is-selected': isSelected(option.value),\n        'is-disabled': disabled || option.disabled,\n      }\"\n      :role=\"selectionMode === 'single' ? 'radio' : undefined\"\n      :aria-checked=\"selectionMode === 'single' ? isSelected(option.value) : undefined\"\n      :aria-pressed=\"selectionMode === 'multiple' ? isSelected(option.value) : undefined\"\n      :tabindex=\"option.disabled || disabled ? -1 : getTabIndex(index)\"\n      :disabled=\"disabled || option.disabled\"\n      @click=\"selectValue(option.value)\"\n      @keydown=\"onOptionKeydown($event, index)\"\n      @focus=\"focusedIndex = index\"\n    >\n      <slot\n        name=\"option\"\n        :option=\"option\"\n        :selected=\"isSelected(option.value)\"\n      >\n        {{ option.label }}\n      </slot>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,119 @@
+import { Fragment as e, computed as t, createElementBlock as n, createTextVNode as r, defineComponent as i, mergeProps as a, nextTick as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, unref as p, useAttrs as m, watch as h } from "vue";
+import { createId as g, getNextEnabledIndex as _, isActivationKey as v } from "@treeui/utils";
+//#region src/components/TToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var y = ["role"], b = [
+	"id",
+	"role",
+	"aria-checked",
+	"aria-pressed",
+	"tabindex",
+	"disabled",
+	"onClick",
+	"onKeydown",
+	"onFocus"
+], x = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "TToggleGroup",
+	props: {
+		modelValue: { default: void 0 },
+		options: { default: () => [] },
+		selectionMode: { default: "single" },
+		size: { default: "md" },
+		variant: { default: "outline" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(i, { emit: x }) {
+		let S = i, C = x, w = m(), T = g("t-toggle-group"), E = l(/* @__PURE__ */ new Map()), D = t(() => S.selectionMode === "multiple" ? Array.isArray(S.modelValue) ? S.modelValue : [] : typeof S.modelValue == "string" && S.modelValue ? [S.modelValue] : []), O = () => {
+			let e = S.options.findIndex((e) => D.value.includes(e.value) && !e.disabled);
+			return e >= 0 ? e : S.options.findIndex((e) => !e.disabled);
+		}, k = l(O()), A = t(() => [
+			"t-toggle-group",
+			`t-toggle-group--${S.size}`,
+			`t-toggle-group--${S.variant}`,
+			`t-toggle-group--${S.selectionMode}`,
+			{ "is-disabled": S.disabled },
+			w.class
+		]), j = t(() => w.style), M = t(() => {
+			let { class: e, style: t, ...n } = w;
+			return n;
+		}), N = (e) => D.value.includes(e), P = (e, t) => {
+			let n = e instanceof HTMLButtonElement ? e : e && "$el" in e && e.$el instanceof HTMLButtonElement ? e.$el : null;
+			n instanceof HTMLButtonElement ? E.value.set(t, n) : E.value.delete(t);
+		}, F = (e) => {
+			let t = S.options[e];
+			t && (k.value = e, o(() => E.value.get(t.value)?.focus()));
+		}, I = (e) => {
+			let t = S.options.find((t) => t.value === e);
+			if (!(!t || t.disabled || S.disabled)) {
+				if (S.selectionMode === "multiple") {
+					let t = N(e) ? D.value.filter((t) => t !== e) : [...D.value, e];
+					C("update:modelValue", t);
+					return;
+				}
+				C("update:modelValue", e);
+			}
+		}, L = (e, t) => {
+			if (!S.disabled) {
+				if (e.key === "Home") {
+					e.preventDefault();
+					let t = S.options.findIndex((e) => !e.disabled);
+					t >= 0 && (F(t), S.selectionMode === "single" && I(S.options[t].value));
+					return;
+				}
+				if (e.key === "End") {
+					e.preventDefault();
+					let t = [...S.options].reverse().findIndex((e) => !e.disabled);
+					if (t >= 0) {
+						let e = S.options.length - 1 - t;
+						F(e), S.selectionMode === "single" && I(S.options[e].value);
+					}
+					return;
+				}
+				if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowUp") {
+					e.preventDefault();
+					let n = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1, r = _(t, S.options, n);
+					r >= 0 && (F(r), S.selectionMode === "single" && I(S.options[r].value));
+					return;
+				}
+				v(e) && (e.preventDefault(), I(S.options[t].value));
+			}
+		}, R = (e) => k.value === e ? 0 : -1;
+		return h(() => [S.modelValue, S.options], () => {
+			let e = O();
+			k.value = e >= 0 ? e : -1;
+		}, { deep: !0 }), (t, o) => (c(), n("div", a(M.value, {
+			class: A.value,
+			style: j.value,
+			role: i.selectionMode === "single" ? "radiogroup" : "group"
+		}), [(c(!0), n(e, null, u(i.options, (e, a) => (c(), n("button", {
+			id: `${p(T)}-${e.value}`,
+			ref_for: !0,
+			ref: (t) => P(t, e.value),
+			key: e.value,
+			type: "button",
+			class: s(["t-toggle-group__item", {
+				"is-selected": N(e.value),
+				"is-disabled": i.disabled || e.disabled
+			}]),
+			role: i.selectionMode === "single" ? "radio" : void 0,
+			"aria-checked": i.selectionMode === "single" ? N(e.value) : void 0,
+			"aria-pressed": i.selectionMode === "multiple" ? N(e.value) : void 0,
+			tabindex: e.disabled || i.disabled ? -1 : R(a),
+			disabled: i.disabled || e.disabled,
+			onClick: (t) => I(e.value),
+			onKeydown: (e) => L(e, a),
+			onFocus: (e) => k.value = a
+		}, [d(t.$slots, "option", {
+			option: e,
+			selected: N(e.value)
+		}, () => [r(f(e.label), 1)])], 42, b))), 128))], 16, y));
+	}
+});
+//#endregion
+export { x as default };
+
+//# sourceMappingURL=TToggleGroup.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TToggleGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TToggleGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, getNextEnabledIndex, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, ref, useAttrs, watch, type ComponentPublicInstance } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nexport interface TToggleGroupOption {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nconst _treeToggleGroupSelectionModes = ['single', 'multiple'] as const;\nconst _treeToggleGroupVariants = ['outline', 'soft', 'solid'] as const;\n\nexport type TToggleGroupSelectionMode = (typeof _treeToggleGroupSelectionModes)[number];\nexport type TToggleGroupVariant = (typeof _treeToggleGroupVariants)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[];\n    options?: TToggleGroupOption[];\n    selectionMode?: TToggleGroupSelectionMode;\n    size?: TSize;\n    variant?: TToggleGroupVariant;\n    disabled?: boolean;\n  }>(),\n  {\n    modelValue: undefined,\n    options: () => [],\n    selectionMode: 'single',\n    size: 'md',\n    variant: 'outline',\n    disabled: false,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined];\n}>();\n\ndefineSlots<{\n  option?: (props: { option: TToggleGroupOption; selected: boolean }) => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-toggle-group');\nconst buttonRefs = ref<Map<string, HTMLButtonElement>>(new Map());\n\nconst normalizedValues = computed(() =>\n  props.selectionMode === 'multiple'\n    ? Array.isArray(props.modelValue)\n      ? props.modelValue\n      : []\n    : typeof props.modelValue === 'string' && props.modelValue\n      ? [props.modelValue]\n      : [],\n);\n\nconst getInitialFocusedIndex = () => {\n  const selectedIndex = props.options.findIndex((option) =>\n    normalizedValues.value.includes(option.value) && !option.disabled,\n  );\n\n  if (selectedIndex >= 0) {\n    return selectedIndex;\n  }\n\n  return props.options.findIndex((option) => !option.disabled);\n};\n\nconst focusedIndex = ref(getInitialFocusedIndex());\n\nconst rootClasses = computed(() => [\n  't-toggle-group',\n  `t-toggle-group--${props.size}`,\n  `t-toggle-group--${props.variant}`,\n  `t-toggle-group--${props.selectionMode}`,\n  {\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) => normalizedValues.value.includes(value);\n\nconst setButtonRef = (element: Element | ComponentPublicInstance | null, value: string) => {\n  const resolvedElement =\n    element instanceof HTMLButtonElement\n      ? element\n      : element && '$el' in element && element.$el instanceof HTMLButtonElement\n        ? element.$el\n        : null;\n\n  if (resolvedElement instanceof HTMLButtonElement) {\n    buttonRefs.value.set(value, resolvedElement);\n  } else {\n    buttonRefs.value.delete(value);\n  }\n};\n\nconst focusOption = (index: number) => {\n  const option = props.options[index];\n\n  if (!option) {\n    return;\n  }\n\n  focusedIndex.value = index;\n  nextTick(() => buttonRefs.value.get(option.value)?.focus());\n};\n\nconst selectValue = (value: string) => {\n  const option = props.options.find((item) => item.value === value);\n\n  if (!option || option.disabled || props.disabled) {\n    return;\n  }\n\n  if (props.selectionMode === 'multiple') {\n    const nextValues = isSelected(value)\n      ? normalizedValues.value.filter((item) => item !== value)\n      : [...normalizedValues.value, value];\n\n    emit('update:modelValue', nextValues);\n    return;\n  }\n\n  emit('update:modelValue', value);\n};\n\nconst onOptionKeydown = (event: KeyboardEvent, index: number) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (event.key === 'Home') {\n    event.preventDefault();\n    const firstIndex = props.options.findIndex((option) => !option.disabled);\n\n    if (firstIndex >= 0) {\n      focusOption(firstIndex);\n\n      if (props.selectionMode === 'single') {\n        selectValue(props.options[firstIndex].value);\n      }\n    }\n\n    return;\n  }\n\n  if (event.key === 'End') {\n    event.preventDefault();\n    const lastIndex = [...props.options].reverse().findIndex((option) => !option.disabled);\n\n    if (lastIndex >= 0) {\n      const resolvedIndex = props.options.length - 1 - lastIndex;\n      focusOption(resolvedIndex);\n\n      if (props.selectionMode === 'single') {\n        selectValue(props.options[resolvedIndex].value);\n      }\n    }\n\n    return;\n  }\n\n  if (\n    event.key === 'ArrowRight' ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowLeft' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    const direction = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1;\n    const nextIndex = getNextEnabledIndex(index, props.options, direction as 1 | -1);\n\n    if (nextIndex >= 0) {\n      focusOption(nextIndex);\n\n      if (props.selectionMode === 'single') {\n        selectValue(props.options[nextIndex].value);\n      }\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectValue(props.options[index].value);\n  }\n};\n\nconst getTabIndex = (index: number) => (focusedIndex.value === index ? 0 : -1);\n\nwatch(\n  () => [props.modelValue, props.options] 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  <div\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :role=\"selectionMode === 'single' ? 'radiogroup' : 'group'\"\n  >\n    <button\n      v-for=\"(option, index) in options\"\n      :id=\"`${baseId}-${option.value}`\"\n      :ref=\"(element) => setButtonRef(element, option.value)\"\n      :key=\"option.value\"\n      type=\"button\"\n      class=\"t-toggle-group__item\"\n      :class=\"{\n        'is-selected': isSelected(option.value),\n        'is-disabled': disabled || option.disabled,\n      }\"\n      :role=\"selectionMode === 'single' ? 'radio' : undefined\"\n      :aria-checked=\"selectionMode === 'single' ? isSelected(option.value) : undefined\"\n      :aria-pressed=\"selectionMode === 'multiple' ? isSelected(option.value) : undefined\"\n      :tabindex=\"option.disabled || disabled ? -1 : getTabIndex(index)\"\n      :disabled=\"disabled || option.disabled\"\n      @click=\"selectValue(option.value)\"\n      @keydown=\"onOptionKeydown($event, index)\"\n      @focus=\"focusedIndex = index\"\n    >\n      <slot\n        name=\"option\"\n        :option=\"option\"\n        :selected=\"isSelected(option.value)\"\n      >\n        {{ option.label }}\n      </slot>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TTooltip.cjs

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

package/dist/components/TTooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TTooltip.cjs","names":[],"sources":["../../src/components/TTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, toRef, useAttrs } from 'vue';\nimport { createId } from '@treeui/utils';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TTooltipSide } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    content?: string;\n    side?: TTooltipSide;\n    delay?: number;\n    id?: string;\n  }>(),\n  {\n    defaultOpen: false,\n    disabled: false,\n    content: '',\n    side: 'top',\n    delay: 80,\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 contentId = props.id ?? createId('t-tooltip');\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst rootClasses = computed(() => ['t-tooltip', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\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\nlet openTimer: ReturnType<typeof setTimeout> | undefined;\n\nconst clearOpenTimer = () => {\n  if (openTimer) {\n    clearTimeout(openTimer);\n    openTimer = undefined;\n  }\n};\n\nconst show = (immediate = false) => {\n  if (props.disabled) {\n    return;\n  }\n\n  clearOpenTimer();\n\n  if (immediate) {\n    setValue(true);\n    return;\n  }\n\n  openTimer = setTimeout(() => {\n    setValue(true);\n  }, props.delay);\n};\n\nconst showOnFocus = () => {\n  show(true);\n};\n\nconst showOnPointer = () => {\n  show();\n};\n\nconst hide = () => {\n  clearOpenTimer();\n  setValue(false);\n};\n\nconst tooltipClasses = computed(() => [\n  't-tooltip__content',\n  `t-tooltip__content--${props.side}`,\n]);\n\nonBeforeUnmount(clearOpenTimer);\n</script>\n\n<template>\n  <span\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @mouseenter=\"showOnPointer\"\n    @mouseleave=\"hide\"\n    @focus.capture=\"showOnFocus\"\n    @blur.capture=\"hide\"\n  >\n    <span\n      class=\"t-tooltip__trigger\"\n      :aria-describedby=\"isOpen ? contentId : undefined\"\n      v-bind=\"triggerAttrs\"\n    >\n      <slot name=\"trigger\">\n        <slot />\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <span\n        v-if=\"isOpen && !disabled\"\n        :id=\"contentId\"\n        role=\"tooltip\"\n        :class=\"tooltipClasses\"\n        :data-state=\"isOpen ? 'open' : 'closed'\"\n      >\n        <slot name=\"content\">\n          {{ content }}\n        </slot>\n      </span>\n    </transition>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/TTooltip.js

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

package/dist/components/TTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TTooltip.js","names":[],"sources":["../../src/components/TTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, toRef, useAttrs } from 'vue';\nimport { createId } from '@treeui/utils';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TTooltipSide } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    content?: string;\n    side?: TTooltipSide;\n    delay?: number;\n    id?: string;\n  }>(),\n  {\n    defaultOpen: false,\n    disabled: false,\n    content: '',\n    side: 'top',\n    delay: 80,\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 contentId = props.id ?? createId('t-tooltip');\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst rootClasses = computed(() => ['t-tooltip', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\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\nlet openTimer: ReturnType<typeof setTimeout> | undefined;\n\nconst clearOpenTimer = () => {\n  if (openTimer) {\n    clearTimeout(openTimer);\n    openTimer = undefined;\n  }\n};\n\nconst show = (immediate = false) => {\n  if (props.disabled) {\n    return;\n  }\n\n  clearOpenTimer();\n\n  if (immediate) {\n    setValue(true);\n    return;\n  }\n\n  openTimer = setTimeout(() => {\n    setValue(true);\n  }, props.delay);\n};\n\nconst showOnFocus = () => {\n  show(true);\n};\n\nconst showOnPointer = () => {\n  show();\n};\n\nconst hide = () => {\n  clearOpenTimer();\n  setValue(false);\n};\n\nconst tooltipClasses = computed(() => [\n  't-tooltip__content',\n  `t-tooltip__content--${props.side}`,\n]);\n\nonBeforeUnmount(clearOpenTimer);\n</script>\n\n<template>\n  <span\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @mouseenter=\"showOnPointer\"\n    @mouseleave=\"hide\"\n    @focus.capture=\"showOnFocus\"\n    @blur.capture=\"hide\"\n  >\n    <span\n      class=\"t-tooltip__trigger\"\n      :aria-describedby=\"isOpen ? contentId : undefined\"\n      v-bind=\"triggerAttrs\"\n    >\n      <slot name=\"trigger\">\n        <slot />\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <span\n        v-if=\"isOpen && !disabled\"\n        :id=\"contentId\"\n        role=\"tooltip\"\n        :class=\"tooltipClasses\"\n        :data-state=\"isOpen ? 'open' : 'closed'\"\n      >\n        <slot name=\"content\">\n          {{ content }}\n        </slot>\n      </span>\n    </transition>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/TTooltip.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i=[`aria-describedby`],a=[`id`,`data-state`],o=(0,t.defineComponent)({inheritAttrs:!1,__name:`TTooltip`,props:{open:{type:Boolean},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},content:{default:``},side:{default:`top`},delay:{default:80},id:{default:void 0}},emits:[`update:open`,`open-change`],setup(o,{emit:s}){let c=o,l=s,u=(0,t.useAttrs)(),d=c.id??(0,n.createId)(`t-tooltip`),f=(0,t.computed)(()=>{let{class:e,style:t,...n}=u;return n}),p=(0,t.computed)(()=>[`t-tooltip`,u.class]),m=(0,t.computed)(()=>u.style),{value:h,setValue:g}=e.useControllableOpen((0,t.toRef)(c,`open`),c.defaultOpen,e=>{l(`update:open`,e),l(`open-change`,e)}),_,v=()=>{_&&=(clearTimeout(_),void 0)},y=(e=!1)=>{if(!c.disabled){if(v(),e){g(!0);return}_=setTimeout(()=>{g(!0)},c.delay)}},b=()=>{y(!0)},x=()=>{y()},S=()=>{v(),g(!1)},C=(0,t.computed)(()=>[`t-tooltip__content`,`t-tooltip__content--${c.side}`]);return(0,t.onBeforeUnmount)(v),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{class:(0,t.normalizeClass)(p.value),style:(0,t.normalizeStyle)(m.value),"data-state":(0,t.unref)(h)?`open`:`closed`,onMouseenter:x,onMouseleave:S,onFocusCapture:b,onBlurCapture:S},[(0,t.createElementVNode)(`span`,(0,t.mergeProps)({class:`t-tooltip__trigger`,"aria-describedby":(0,t.unref)(h)?(0,t.unref)(d):void 0},f.value),[(0,t.renderSlot)(e.$slots,`trigger`,{},()=>[(0,t.renderSlot)(e.$slots,`default`)])],16,i),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(h)&&!o.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:0,id:(0,t.unref)(d),role:`tooltip`,class:(0,t.normalizeClass)(C.value),"data-state":(0,t.unref)(h)?`open`:`closed`},[(0,t.renderSlot)(e.$slots,`content`,{},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(o.content),1)])],10,a)):(0,t.createCommentVNode)(``,!0)]),_:3})],46,r))}});exports.default=o;
+//# sourceMappingURL=TTooltip.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TTooltip.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, toRef, useAttrs } from 'vue';\nimport { createId } from '@treeui/utils';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TTooltipSide } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    content?: string;\n    side?: TTooltipSide;\n    delay?: number;\n    id?: string;\n  }>(),\n  {\n    defaultOpen: false,\n    disabled: false,\n    content: '',\n    side: 'top',\n    delay: 80,\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 contentId = props.id ?? createId('t-tooltip');\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst rootClasses = computed(() => ['t-tooltip', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\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\nlet openTimer: ReturnType<typeof setTimeout> | undefined;\n\nconst clearOpenTimer = () => {\n  if (openTimer) {\n    clearTimeout(openTimer);\n    openTimer = undefined;\n  }\n};\n\nconst show = (immediate = false) => {\n  if (props.disabled) {\n    return;\n  }\n\n  clearOpenTimer();\n\n  if (immediate) {\n    setValue(true);\n    return;\n  }\n\n  openTimer = setTimeout(() => {\n    setValue(true);\n  }, props.delay);\n};\n\nconst showOnFocus = () => {\n  show(true);\n};\n\nconst showOnPointer = () => {\n  show();\n};\n\nconst hide = () => {\n  clearOpenTimer();\n  setValue(false);\n};\n\nconst tooltipClasses = computed(() => [\n  't-tooltip__content',\n  `t-tooltip__content--${props.side}`,\n]);\n\nonBeforeUnmount(clearOpenTimer);\n</script>\n\n<template>\n  <span\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @mouseenter=\"showOnPointer\"\n    @mouseleave=\"hide\"\n    @focus.capture=\"showOnFocus\"\n    @blur.capture=\"hide\"\n  >\n    <span\n      class=\"t-tooltip__trigger\"\n      :aria-describedby=\"isOpen ? contentId : undefined\"\n      v-bind=\"triggerAttrs\"\n    >\n      <slot name=\"trigger\">\n        <slot />\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <span\n        v-if=\"isOpen && !disabled\"\n        :id=\"contentId\"\n        role=\"tooltip\"\n        :class=\"tooltipClasses\"\n        :data-state=\"isOpen ? 'open' : 'closed'\"\n      >\n        <slot name=\"content\">\n          {{ content }}\n        </slot>\n      </span>\n    </transition>\n  </span>\n</template>\n"],"mappings":"mdAUA,IAAM,EAAQ,EAoBR,EAAO,EAKP,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,EAAY,EAAM,KAAA,EAAA,EAAA,SAAA,CAAe,WAAW,EAC5C,GAAA,EAAA,EAAA,SAAA,KAA8B,CAClC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,EACK,GAAA,EAAA,EAAA,SAAA,KAA6B,CAAC,YAAa,EAAM,KAAK,CAAC,EACvD,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EACtC,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,EAEI,EAEE,MAAuB,CAC3B,AAEE,KADA,aAAa,CAAS,EACV,IAAA,GAEhB,EAEM,GAAQ,EAAY,KAAU,CAC9B,MAAM,SAMV,IAFA,EAAe,EAEX,EAAW,CACb,EAAS,EAAI,EACb,MACF,CAEA,EAAY,eAAiB,CAC3B,EAAS,EAAI,CACf,EAAG,EAAM,KAAK,CAJd,CAKF,EAEM,MAAoB,CACxB,EAAK,EAAI,CACX,EAEM,MAAsB,CAC1B,EAAK,CACP,EAEM,MAAa,CACjB,EAAe,EACf,EAAS,EAAK,CAChB,EAEM,GAAA,EAAA,EAAA,SAAA,KAAgC,CACpC,qBACA,uBAAuB,EAAM,MAC/B,CAAC,SAED,EAAA,EAAA,gBAAA,CAAgB,CAAc,qDAmCrB,OAAA,CA9BJ,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAW,EAClB,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAS,EAChB,cAAA,EAAA,EAAA,MAAA,CAAY,CAAA,EAAM,OAAA,SAClB,aAAY,EACZ,aAAY,iBACG,gBACD,6BAUR,QAAA,EAAA,EAAA,WAAA,CAAA,CAPL,MAAM,qBACL,oBAAA,EAAA,EAAA,MAAA,CAAkB,CAAA,GAAA,EAAA,EAAA,MAAA,CAAS,CAAA,EAAY,IAAA,IAChC,EAAA,KAAY,EAAA,EAAA,EAAA,EAAA,WAAA,CAIb,EAAA,OAAA,UAAA,CAAA,MAAA,EAAA,EAAA,EAAA,WAAA,CADG,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,EAAA,EAAA,YAAA,CAeC,EAAA,WAAA,CAZD,KAAK,QAAQ,EAAA,2BAWhB,EAAA,EAAA,EAAA,MAAA,CATC,CAAA,GAAM,CAAK,EAAA,WAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CASZ,OAAA,OARJ,IAAA,EAAA,EAAA,MAAA,CAAI,CAAA,EACL,KAAK,UACJ,OAAA,EAAA,EAAA,eAAA,CAAO,EAAA,KAAc,EACrB,cAAA,EAAA,EAAA,MAAA,CAAY,CAAA,EAAM,OAAA,4BAIZ,EAAA,OAAA,UAAA,CAAA,MAAA,EAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,gBAAA,CADF,EAAA,OAAO,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,IAAA,EAAA,EAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,CAAA"}

package/dist/components/TTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { useControllableOpen as e } from "../composables/useControllableOpen.js";
+import { Transition as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, openBlock as p, renderSlot as m, toDisplayString as h, toRef as g, unref as _, useAttrs as v, withCtx as y } from "vue";
+import { createId as b } from "@treeui/utils";
+//#region src/components/TTooltip.vue?vue&type=script&setup=true&lang.ts
+var x = ["data-state"], S = ["aria-describedby"], C = ["id", "data-state"], w = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "TTooltip",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		content: { default: "" },
+		side: { default: "top" },
+		delay: { default: 80 },
+		id: { default: void 0 }
+	},
+	emits: ["update:open", "open-change"],
+	setup(c, { emit: w }) {
+		let T = c, E = w, D = v(), O = T.id ?? b("t-tooltip"), k = n(() => {
+			let { class: e, style: t, ...n } = D;
+			return n;
+		}), A = n(() => ["t-tooltip", D.class]), j = n(() => D.style), { value: M, setValue: N } = e(g(T, "open"), T.defaultOpen, (e) => {
+			E("update:open", e), E("open-change", e);
+		}), P, F = () => {
+			P &&= (clearTimeout(P), void 0);
+		}, I = (e = !1) => {
+			if (!T.disabled) {
+				if (F(), e) {
+					N(!0);
+					return;
+				}
+				P = setTimeout(() => {
+					N(!0);
+				}, T.delay);
+			}
+		}, L = () => {
+			I(!0);
+		}, R = () => {
+			I();
+		}, z = () => {
+			F(), N(!1);
+		}, B = n(() => ["t-tooltip__content", `t-tooltip__content--${T.side}`]);
+		return f(F), (e, n) => (p(), i("span", {
+			class: u(A.value),
+			style: d(j.value),
+			"data-state": _(M) ? "open" : "closed",
+			onMouseenter: R,
+			onMouseleave: z,
+			onFocusCapture: L,
+			onBlurCapture: z
+		}, [a("span", l({
+			class: "t-tooltip__trigger",
+			"aria-describedby": _(M) ? _(O) : void 0
+		}, k.value), [m(e.$slots, "trigger", {}, () => [m(e.$slots, "default")])], 16, S), s(t, { name: "t-fade" }, {
+			default: y(() => [_(M) && !c.disabled ? (p(), i("span", {
+				key: 0,
+				id: _(O),
+				role: "tooltip",
+				class: u(B.value),
+				"data-state": _(M) ? "open" : "closed"
+			}, [m(e.$slots, "content", {}, () => [o(h(c.content), 1)])], 10, C)) : r("", !0)]),
+			_: 3
+		})], 46, x));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=TTooltip.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TTooltip.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, toRef, useAttrs } from 'vue';\nimport { createId } from '@treeui/utils';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TTooltipSide } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    content?: string;\n    side?: TTooltipSide;\n    delay?: number;\n    id?: string;\n  }>(),\n  {\n    defaultOpen: false,\n    disabled: false,\n    content: '',\n    side: 'top',\n    delay: 80,\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 contentId = props.id ?? createId('t-tooltip');\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\nconst rootClasses = computed(() => ['t-tooltip', attrs.class]);\nconst rootStyle = computed(() => attrs.style);\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\nlet openTimer: ReturnType<typeof setTimeout> | undefined;\n\nconst clearOpenTimer = () => {\n  if (openTimer) {\n    clearTimeout(openTimer);\n    openTimer = undefined;\n  }\n};\n\nconst show = (immediate = false) => {\n  if (props.disabled) {\n    return;\n  }\n\n  clearOpenTimer();\n\n  if (immediate) {\n    setValue(true);\n    return;\n  }\n\n  openTimer = setTimeout(() => {\n    setValue(true);\n  }, props.delay);\n};\n\nconst showOnFocus = () => {\n  show(true);\n};\n\nconst showOnPointer = () => {\n  show();\n};\n\nconst hide = () => {\n  clearOpenTimer();\n  setValue(false);\n};\n\nconst tooltipClasses = computed(() => [\n  't-tooltip__content',\n  `t-tooltip__content--${props.side}`,\n]);\n\nonBeforeUnmount(clearOpenTimer);\n</script>\n\n<template>\n  <span\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @mouseenter=\"showOnPointer\"\n    @mouseleave=\"hide\"\n    @focus.capture=\"showOnFocus\"\n    @blur.capture=\"hide\"\n  >\n    <span\n      class=\"t-tooltip__trigger\"\n      :aria-describedby=\"isOpen ? contentId : undefined\"\n      v-bind=\"triggerAttrs\"\n    >\n      <slot name=\"trigger\">\n        <slot />\n      </slot>\n    </span>\n    <transition name=\"t-fade\">\n      <span\n        v-if=\"isOpen && !disabled\"\n        :id=\"contentId\"\n        role=\"tooltip\"\n        :class=\"tooltipClasses\"\n        :data-state=\"isOpen ? 'open' : 'closed'\"\n      >\n        <slot name=\"content\">\n          {{ content }}\n        </slot>\n      </span>\n    </transition>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAM,IAAQ,GAoBR,IAAO,GAKP,IAAQ,EAAS,GACjB,IAAY,EAAM,MAAM,EAAS,WAAW,GAC5C,IAAe,QAAe;GAClC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GACK,IAAc,QAAe,CAAC,aAAa,EAAM,KAAK,CAAC,GACvD,IAAY,QAAe,EAAM,KAAK,GACtC,EAAE,OAAO,GAAQ,gBAAa,EAClC,EAAM,GAAO,MAAM,GACnB,EAAM,cACL,MAAU;GAET,AADA,EAAK,eAAe,CAAK,GACzB,EAAK,eAAe,CAAK;EAC3B,CACF,GAEI,GAEE,UAAuB;GAC3B,AAEE,OADA,aAAa,CAAS,GACV,KAAA;EAEhB,GAEM,KAAQ,IAAY,OAAU;GAC9B,OAAM,UAMV;QAFA,EAAe,GAEX,GAAW;KACb,EAAS,EAAI;KACb;IACF;IAEA,IAAY,iBAAiB;KAC3B,EAAS,EAAI;IACf,GAAG,EAAM,KAAK;GAJd;EAKF,GAEM,UAAoB;GACxB,EAAK,EAAI;EACX,GAEM,UAAsB;GAC1B,EAAK;EACP,GAEM,UAAa;GAEjB,AADA,EAAe,GACf,EAAS,EAAK;EAChB,GAEM,IAAiB,QAAe,CACpC,sBACA,uBAAuB,EAAM,MAC/B,CAAC;SAED,EAAgB,CAAc,mBAI5B,EA+BO,QAAA;GA9BJ,OAAK,EAAE,EAAA,KAAW;GAClB,OAAK,EAAE,EAAA,KAAS;GAChB,cAAY,EAAA,CAAA,IAAM,SAAA;GAClB,cAAY;GACZ,cAAY;mBACG;kBACD;MAEf,EAQO,QARP,EAQO;GAPL,OAAM;GACL,oBAAkB,EAAA,CAAA,IAAS,EAAA,CAAA,IAAY,KAAA;KAChC,EAAA,KAAY,GAAA,CAEpB,EAEO,EAAA,QAAA,WAAA,CAAA,SAAA,CADL,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA,GAGZ,EAYa,GAAA,EAZD,MAAK,SAAQ,GAAA;oBAWhB,CATC,EAAA,CAAA,KAAM,CAAK,EAAA,YAAA,EAAA,GADnB,EAUO,QAAA;;IARJ,IAAI,EAAA,CAAA;IACL,MAAK;IACJ,OAAK,EAAE,EAAA,KAAc;IACrB,cAAY,EAAA,CAAA,IAAM,SAAA;OAEnB,EAEO,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EADF,EAAA,OAAO,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/components/TTreeView.cjs

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

package/dist/components/TTreeView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TTreeView.cjs","names":[],"sources":["../../src/components/TTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, provide, ref, useAttrs, watch } from 'vue';\nimport TTreeViewItem from './TTreeViewItem.vue';\nimport {\n  treeTreeViewInjectionKey,\n  type TTreeViewNode,\n  type TTreeViewRecord,\n  type TTreeViewSelectionMode,\n} from './tree-view';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    nodes?: TTreeViewNode[];\n    selectionMode?: TTreeViewSelectionMode;\n    expanded?: string[];\n    defaultExpanded?: string[];\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: undefined,\n    nodes: () => [],\n    selectionMode: 'single',\n    expanded: undefined,\n    defaultExpanded: () => [],\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined];\n  'update:expanded': [value: string[]];\n  'selection-change': [value: string | string[] | undefined];\n  'expanded-change': [value: string[]];\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-tree-view');\nconst internalValue = ref<string | string[] | undefined>(props.defaultValue);\nconst internalExpanded = ref<string[]>(props.defaultExpanded);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\n\nconst rootClasses = computed(() => [\n  't-tree-view',\n  {\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst treeAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst selectedValues = computed(() => {\n  const value = props.modelValue ?? internalValue.value;\n\n  if (value === undefined || value === null || value === '') {\n    return [] as string[];\n  }\n\n  return Array.isArray(value) ? value : [value];\n});\n\nconst expandedValues = computed(() => props.expanded ?? internalExpanded.value);\n\nconst updateSelection = (nextValues: string[]) => {\n  if (props.selectionMode === 'multiple') {\n    if (props.modelValue === undefined) {\n      internalValue.value = nextValues;\n    }\n\n    emit('update:modelValue', nextValues);\n    emit('selection-change', nextValues);\n    return;\n  }\n\n  const nextValue = nextValues[0];\n\n  if (props.modelValue === undefined) {\n    internalValue.value = nextValue;\n  }\n\n  emit('update:modelValue', nextValue);\n  emit('selection-change', nextValue);\n};\n\nconst updateExpanded = (nextValues: string[]) => {\n  if (props.expanded === undefined) {\n    internalExpanded.value = nextValues;\n  }\n\n  emit('update:expanded', nextValues);\n  emit('expanded-change', nextValues);\n};\n\nconst isSelected = (id: string) => selectedValues.value.includes(id);\nconst isExpanded = (id: string) => expandedValues.value.includes(id);\n\nconst flattenNodes = (\n  nodes: TTreeViewNode[],\n  level = 1,\n  parentId?: string,\n): TTreeViewRecord[] =>\n  nodes.reduce<TTreeViewRecord[]>((records, node) => {\n    records.push({\n      node,\n      level,\n      parentId,\n    });\n\n    if (node.children?.length && isExpanded(node.id)) {\n      records.push(...flattenNodes(node.children, level + 1, node.id));\n    }\n\n    return records;\n  }, []);\n\nconst visibleNodes = computed(() => flattenNodes(props.nodes));\nconst enabledNodes = computed(() => visibleNodes.value.filter((record) => !record.node.disabled));\n\nconst getInitialFocusedId = () => {\n  const selectedId = selectedValues.value.find((value) =>\n    visibleNodes.value.some((record) => record.node.id === value && !record.node.disabled),\n  );\n\n  if (selectedId) {\n    return selectedId;\n  }\n\n  return enabledNodes.value[0]?.node.id ?? '';\n};\n\nconst focusedId = ref(getInitialFocusedId());\n\nconst registerItem = (id: string, element: HTMLElement) => {\n  itemRefs.value.set(id, element);\n};\n\nconst unregisterItem = (id: string) => {\n  itemRefs.value.delete(id);\n};\n\nconst focusItem = (id: string) => {\n  nextTick(() => itemRefs.value.get(id)?.focus());\n};\n\nconst setFocusedId = (id: string, shouldFocus = false) => {\n  focusedId.value = id;\n\n  if (shouldFocus) {\n    focusItem(id);\n  }\n};\n\nconst getVisibleRecord = (id: string) =>\n  visibleNodes.value.find((record) => record.node.id === id);\n\nconst focusBoundary = (position: 'first' | 'last') => {\n  const target =\n    position === 'first' ? enabledNodes.value[0] : enabledNodes.value[enabledNodes.value.length - 1];\n\n  if (target) {\n    setFocusedId(target.node.id, true);\n  }\n};\n\nconst focusAdjacent = (direction: 1 | -1) => {\n  const currentIndex = enabledNodes.value.findIndex((record) => record.node.id === focusedId.value);\n\n  if (currentIndex === -1) {\n    focusBoundary(direction === 1 ? 'first' : 'last');\n    return;\n  }\n\n  const nextIndex = currentIndex + direction;\n\n  if (nextIndex < 0 || nextIndex >= enabledNodes.value.length) {\n    return;\n  }\n\n  setFocusedId(enabledNodes.value[nextIndex].node.id, true);\n};\n\nconst toggleExpanded = (id: string) => {\n  const nextValues = isExpanded(id)\n    ? expandedValues.value.filter((value) => value !== id)\n    : [...expandedValues.value, id];\n\n  updateExpanded(nextValues);\n};\n\nconst toggleSelected = (id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  if (props.selectionMode === 'multiple') {\n    const nextValues = isSelected(id)\n      ? selectedValues.value.filter((value) => value !== id)\n      : [...selectedValues.value, id];\n\n    updateSelection(nextValues);\n    return;\n  }\n\n  updateSelection([id]);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  const hasChildren = Boolean(record.node.children?.length);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusAdjacent(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusAdjacent(-1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n\n      if (hasChildren && !isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (hasChildren) {\n        const firstChild = visibleNodes.value.find(\n          (item) => item.parentId === id && !item.node.disabled,\n        );\n\n        if (firstChild) {\n          setFocusedId(firstChild.node.id, true);\n        }\n      }\n\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n\n      if (hasChildren && isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (record.parentId) {\n        setFocusedId(record.parentId, true);\n      }\n\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusBoundary('first');\n      break;\n    case 'End':\n      event.preventDefault();\n      focusBoundary('last');\n      break;\n    default:\n      if (isActivationKey(event)) {\n        event.preventDefault();\n        toggleSelected(id);\n      }\n      break;\n  }\n};\n\nwatch(\n  () => [visibleNodes.value, props.modelValue] as const,\n  () => {\n    const focusedRecord = visibleNodes.value.find(\n      (record) => record.node.id === focusedId.value && !record.node.disabled,\n    );\n\n    if (!focusedRecord) {\n      focusedId.value = getInitialFocusedId();\n    }\n  },\n  { deep: true, immediate: true },\n);\n\nprovide(treeTreeViewInjectionKey, {\n  baseId,\n  disabled: computed(() => props.disabled),\n  selectionMode: computed(() => props.selectionMode),\n  focusedId,\n  isExpanded,\n  toggleExpanded,\n  isSelected,\n  toggleSelected,\n  setFocusedId,\n  onItemKeydown,\n  registerItem,\n  unregisterItem,\n});\n</script>\n\n<template>\n  <div\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"nodes.length > 0\"\n      v-bind=\"treeAttrs\"\n      class=\"t-tree-view__root\"\n      role=\"tree\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n    >\n      <TTreeViewItem\n        v-for=\"node in nodes\"\n        :key=\"node.id\"\n        :node=\"node\"\n        :level=\"1\"\n      />\n    </ul>\n\n    <div\n      v-else\n      class=\"t-tree-view__empty\"\n    >\n      {{ emptyText }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TTreeView.js

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

package/dist/components/TTreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TTreeView.js","names":[],"sources":["../../src/components/TTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, provide, ref, useAttrs, watch } from 'vue';\nimport TTreeViewItem from './TTreeViewItem.vue';\nimport {\n  treeTreeViewInjectionKey,\n  type TTreeViewNode,\n  type TTreeViewRecord,\n  type TTreeViewSelectionMode,\n} from './tree-view';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    nodes?: TTreeViewNode[];\n    selectionMode?: TTreeViewSelectionMode;\n    expanded?: string[];\n    defaultExpanded?: string[];\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: undefined,\n    nodes: () => [],\n    selectionMode: 'single',\n    expanded: undefined,\n    defaultExpanded: () => [],\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined];\n  'update:expanded': [value: string[]];\n  'selection-change': [value: string | string[] | undefined];\n  'expanded-change': [value: string[]];\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-tree-view');\nconst internalValue = ref<string | string[] | undefined>(props.defaultValue);\nconst internalExpanded = ref<string[]>(props.defaultExpanded);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\n\nconst rootClasses = computed(() => [\n  't-tree-view',\n  {\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst treeAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst selectedValues = computed(() => {\n  const value = props.modelValue ?? internalValue.value;\n\n  if (value === undefined || value === null || value === '') {\n    return [] as string[];\n  }\n\n  return Array.isArray(value) ? value : [value];\n});\n\nconst expandedValues = computed(() => props.expanded ?? internalExpanded.value);\n\nconst updateSelection = (nextValues: string[]) => {\n  if (props.selectionMode === 'multiple') {\n    if (props.modelValue === undefined) {\n      internalValue.value = nextValues;\n    }\n\n    emit('update:modelValue', nextValues);\n    emit('selection-change', nextValues);\n    return;\n  }\n\n  const nextValue = nextValues[0];\n\n  if (props.modelValue === undefined) {\n    internalValue.value = nextValue;\n  }\n\n  emit('update:modelValue', nextValue);\n  emit('selection-change', nextValue);\n};\n\nconst updateExpanded = (nextValues: string[]) => {\n  if (props.expanded === undefined) {\n    internalExpanded.value = nextValues;\n  }\n\n  emit('update:expanded', nextValues);\n  emit('expanded-change', nextValues);\n};\n\nconst isSelected = (id: string) => selectedValues.value.includes(id);\nconst isExpanded = (id: string) => expandedValues.value.includes(id);\n\nconst flattenNodes = (\n  nodes: TTreeViewNode[],\n  level = 1,\n  parentId?: string,\n): TTreeViewRecord[] =>\n  nodes.reduce<TTreeViewRecord[]>((records, node) => {\n    records.push({\n      node,\n      level,\n      parentId,\n    });\n\n    if (node.children?.length && isExpanded(node.id)) {\n      records.push(...flattenNodes(node.children, level + 1, node.id));\n    }\n\n    return records;\n  }, []);\n\nconst visibleNodes = computed(() => flattenNodes(props.nodes));\nconst enabledNodes = computed(() => visibleNodes.value.filter((record) => !record.node.disabled));\n\nconst getInitialFocusedId = () => {\n  const selectedId = selectedValues.value.find((value) =>\n    visibleNodes.value.some((record) => record.node.id === value && !record.node.disabled),\n  );\n\n  if (selectedId) {\n    return selectedId;\n  }\n\n  return enabledNodes.value[0]?.node.id ?? '';\n};\n\nconst focusedId = ref(getInitialFocusedId());\n\nconst registerItem = (id: string, element: HTMLElement) => {\n  itemRefs.value.set(id, element);\n};\n\nconst unregisterItem = (id: string) => {\n  itemRefs.value.delete(id);\n};\n\nconst focusItem = (id: string) => {\n  nextTick(() => itemRefs.value.get(id)?.focus());\n};\n\nconst setFocusedId = (id: string, shouldFocus = false) => {\n  focusedId.value = id;\n\n  if (shouldFocus) {\n    focusItem(id);\n  }\n};\n\nconst getVisibleRecord = (id: string) =>\n  visibleNodes.value.find((record) => record.node.id === id);\n\nconst focusBoundary = (position: 'first' | 'last') => {\n  const target =\n    position === 'first' ? enabledNodes.value[0] : enabledNodes.value[enabledNodes.value.length - 1];\n\n  if (target) {\n    setFocusedId(target.node.id, true);\n  }\n};\n\nconst focusAdjacent = (direction: 1 | -1) => {\n  const currentIndex = enabledNodes.value.findIndex((record) => record.node.id === focusedId.value);\n\n  if (currentIndex === -1) {\n    focusBoundary(direction === 1 ? 'first' : 'last');\n    return;\n  }\n\n  const nextIndex = currentIndex + direction;\n\n  if (nextIndex < 0 || nextIndex >= enabledNodes.value.length) {\n    return;\n  }\n\n  setFocusedId(enabledNodes.value[nextIndex].node.id, true);\n};\n\nconst toggleExpanded = (id: string) => {\n  const nextValues = isExpanded(id)\n    ? expandedValues.value.filter((value) => value !== id)\n    : [...expandedValues.value, id];\n\n  updateExpanded(nextValues);\n};\n\nconst toggleSelected = (id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  if (props.selectionMode === 'multiple') {\n    const nextValues = isSelected(id)\n      ? selectedValues.value.filter((value) => value !== id)\n      : [...selectedValues.value, id];\n\n    updateSelection(nextValues);\n    return;\n  }\n\n  updateSelection([id]);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  const hasChildren = Boolean(record.node.children?.length);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusAdjacent(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusAdjacent(-1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n\n      if (hasChildren && !isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (hasChildren) {\n        const firstChild = visibleNodes.value.find(\n          (item) => item.parentId === id && !item.node.disabled,\n        );\n\n        if (firstChild) {\n          setFocusedId(firstChild.node.id, true);\n        }\n      }\n\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n\n      if (hasChildren && isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (record.parentId) {\n        setFocusedId(record.parentId, true);\n      }\n\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusBoundary('first');\n      break;\n    case 'End':\n      event.preventDefault();\n      focusBoundary('last');\n      break;\n    default:\n      if (isActivationKey(event)) {\n        event.preventDefault();\n        toggleSelected(id);\n      }\n      break;\n  }\n};\n\nwatch(\n  () => [visibleNodes.value, props.modelValue] as const,\n  () => {\n    const focusedRecord = visibleNodes.value.find(\n      (record) => record.node.id === focusedId.value && !record.node.disabled,\n    );\n\n    if (!focusedRecord) {\n      focusedId.value = getInitialFocusedId();\n    }\n  },\n  { deep: true, immediate: true },\n);\n\nprovide(treeTreeViewInjectionKey, {\n  baseId,\n  disabled: computed(() => props.disabled),\n  selectionMode: computed(() => props.selectionMode),\n  focusedId,\n  isExpanded,\n  toggleExpanded,\n  isSelected,\n  toggleSelected,\n  setFocusedId,\n  onItemKeydown,\n  registerItem,\n  unregisterItem,\n});\n</script>\n\n<template>\n  <div\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"nodes.length > 0\"\n      v-bind=\"treeAttrs\"\n      class=\"t-tree-view__root\"\n      role=\"tree\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n    >\n      <TTreeViewItem\n        v-for=\"node in nodes\"\n        :key=\"node.id\"\n        :node=\"node\"\n        :level=\"1\"\n      />\n    </ul>\n\n    <div\n      v-else\n      class=\"t-tree-view__empty\"\n    >\n      {{ emptyText }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TTreeView.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("./tree-view.cjs"),t=require("./TTreeViewItem.cjs");let n=require("vue"),r=require("@treeui/utils");var i=[`aria-multiselectable`],a={key:1,class:`t-tree-view__empty`},o=(0,n.defineComponent)({inheritAttrs:!1,__name:`TTreeView`,props:{modelValue:{default:void 0},defaultValue:{default:void 0},nodes:{default:()=>[]},selectionMode:{default:`single`},expanded:{default:void 0},defaultExpanded:{default:()=>[]},disabled:{type:Boolean,default:!1},emptyText:{default:`No items available.`}},emits:[`update:modelValue`,`update:expanded`,`selection-change`,`expanded-change`],setup(o,{emit:s}){let c=o,l=s,u=(0,n.useAttrs)(),d=(0,r.createId)(`t-tree-view`),f=(0,n.ref)(c.defaultValue),p=(0,n.ref)(c.defaultExpanded),m=(0,n.ref)(new Map),h=(0,n.computed)(()=>[`t-tree-view`,{"is-disabled":c.disabled},u.class]),g=(0,n.computed)(()=>u.style),_=(0,n.computed)(()=>{let{class:e,style:t,...n}=u;return n}),v=(0,n.computed)(()=>{let e=c.modelValue??f.value;return e==null||e===``?[]:Array.isArray(e)?e:[e]}),y=(0,n.computed)(()=>c.expanded??p.value),b=e=>{if(c.selectionMode===`multiple`){c.modelValue===void 0&&(f.value=e),l(`update:modelValue`,e),l(`selection-change`,e);return}let t=e[0];c.modelValue===void 0&&(f.value=t),l(`update:modelValue`,t),l(`selection-change`,t)},x=e=>{c.expanded===void 0&&(p.value=e),l(`update:expanded`,e),l(`expanded-change`,e)},S=e=>v.value.includes(e),C=e=>y.value.includes(e),w=(e,t=1,n)=>e.reduce((e,r)=>(e.push({node:r,level:t,parentId:n}),r.children?.length&&C(r.id)&&e.push(...w(r.children,t+1,r.id)),e),[]),T=(0,n.computed)(()=>w(c.nodes)),E=(0,n.computed)(()=>T.value.filter(e=>!e.node.disabled)),D=()=>v.value.find(e=>T.value.some(t=>t.node.id===e&&!t.node.disabled))||(E.value[0]?.node.id??``),O=(0,n.ref)(D()),k=(e,t)=>{m.value.set(e,t)},A=e=>{m.value.delete(e)},j=e=>{(0,n.nextTick)(()=>m.value.get(e)?.focus())},M=(e,t=!1)=>{O.value=e,t&&j(e)},N=e=>T.value.find(t=>t.node.id===e),P=e=>{let t=e===`first`?E.value[0]:E.value[E.value.length-1];t&&M(t.node.id,!0)},F=e=>{let t=E.value.findIndex(e=>e.node.id===O.value);if(t===-1){P(e===1?`first`:`last`);return}let n=t+e;n<0||n>=E.value.length||M(E.value[n].node.id,!0)},I=e=>{let t=C(e)?y.value.filter(t=>t!==e):[...y.value,e];x(t)},L=e=>{let t=N(e);if(!(!t||t.node.disabled||c.disabled)){if(c.selectionMode===`multiple`){let t=S(e)?v.value.filter(t=>t!==e):[...v.value,e];b(t);return}b([e])}};return(0,n.watch)(()=>[T.value,c.modelValue],()=>{T.value.find(e=>e.node.id===O.value&&!e.node.disabled)||(O.value=D())},{deep:!0,immediate:!0}),(0,n.provide)(e.treeTreeViewInjectionKey,{baseId:d,disabled:(0,n.computed)(()=>c.disabled),selectionMode:(0,n.computed)(()=>c.selectionMode),focusedId:O,isExpanded:C,toggleExpanded:I,isSelected:S,toggleSelected:L,setFocusedId:M,onItemKeydown:(e,t)=>{let n=N(t);if(!n||n.node.disabled||c.disabled)return;let i=!!n.node.children?.length;switch(e.key){case`ArrowDown`:e.preventDefault(),F(1);break;case`ArrowUp`:e.preventDefault(),F(-1);break;case`ArrowRight`:if(e.preventDefault(),i&&!C(t)){I(t);return}if(i){let e=T.value.find(e=>e.parentId===t&&!e.node.disabled);e&&M(e.node.id,!0)}break;case`ArrowLeft`:if(e.preventDefault(),i&&C(t)){I(t);return}n.parentId&&M(n.parentId,!0);break;case`Home`:e.preventDefault(),P(`first`);break;case`End`:e.preventDefault(),P(`last`);break;default:(0,r.isActivationKey)(e)&&(e.preventDefault(),L(t));break}},registerItem:k,unregisterItem:A}),(e,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)(h.value),style:(0,n.normalizeStyle)(g.value)},[o.nodes.length>0?((0,n.openBlock)(),(0,n.createElementBlock)(`ul`,(0,n.mergeProps)({key:0},_.value,{class:`t-tree-view__root`,role:`tree`,"aria-multiselectable":o.selectionMode===`multiple`||void 0}),[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.nodes,e=>((0,n.openBlock)(),(0,n.createBlock)(t.default,{key:e.id,node:e,level:1},null,8,[`node`]))),128))],16,i)):((0,n.openBlock)(),(0,n.createElementBlock)(`div`,a,(0,n.toDisplayString)(o.emptyText),1))],6))}});exports.default=o;
+//# sourceMappingURL=TTreeView.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TTreeView.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, provide, ref, useAttrs, watch } from 'vue';\nimport TTreeViewItem from './TTreeViewItem.vue';\nimport {\n  treeTreeViewInjectionKey,\n  type TTreeViewNode,\n  type TTreeViewRecord,\n  type TTreeViewSelectionMode,\n} from './tree-view';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    nodes?: TTreeViewNode[];\n    selectionMode?: TTreeViewSelectionMode;\n    expanded?: string[];\n    defaultExpanded?: string[];\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: undefined,\n    nodes: () => [],\n    selectionMode: 'single',\n    expanded: undefined,\n    defaultExpanded: () => [],\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined];\n  'update:expanded': [value: string[]];\n  'selection-change': [value: string | string[] | undefined];\n  'expanded-change': [value: string[]];\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-tree-view');\nconst internalValue = ref<string | string[] | undefined>(props.defaultValue);\nconst internalExpanded = ref<string[]>(props.defaultExpanded);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\n\nconst rootClasses = computed(() => [\n  't-tree-view',\n  {\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst treeAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst selectedValues = computed(() => {\n  const value = props.modelValue ?? internalValue.value;\n\n  if (value === undefined || value === null || value === '') {\n    return [] as string[];\n  }\n\n  return Array.isArray(value) ? value : [value];\n});\n\nconst expandedValues = computed(() => props.expanded ?? internalExpanded.value);\n\nconst updateSelection = (nextValues: string[]) => {\n  if (props.selectionMode === 'multiple') {\n    if (props.modelValue === undefined) {\n      internalValue.value = nextValues;\n    }\n\n    emit('update:modelValue', nextValues);\n    emit('selection-change', nextValues);\n    return;\n  }\n\n  const nextValue = nextValues[0];\n\n  if (props.modelValue === undefined) {\n    internalValue.value = nextValue;\n  }\n\n  emit('update:modelValue', nextValue);\n  emit('selection-change', nextValue);\n};\n\nconst updateExpanded = (nextValues: string[]) => {\n  if (props.expanded === undefined) {\n    internalExpanded.value = nextValues;\n  }\n\n  emit('update:expanded', nextValues);\n  emit('expanded-change', nextValues);\n};\n\nconst isSelected = (id: string) => selectedValues.value.includes(id);\nconst isExpanded = (id: string) => expandedValues.value.includes(id);\n\nconst flattenNodes = (\n  nodes: TTreeViewNode[],\n  level = 1,\n  parentId?: string,\n): TTreeViewRecord[] =>\n  nodes.reduce<TTreeViewRecord[]>((records, node) => {\n    records.push({\n      node,\n      level,\n      parentId,\n    });\n\n    if (node.children?.length && isExpanded(node.id)) {\n      records.push(...flattenNodes(node.children, level + 1, node.id));\n    }\n\n    return records;\n  }, []);\n\nconst visibleNodes = computed(() => flattenNodes(props.nodes));\nconst enabledNodes = computed(() => visibleNodes.value.filter((record) => !record.node.disabled));\n\nconst getInitialFocusedId = () => {\n  const selectedId = selectedValues.value.find((value) =>\n    visibleNodes.value.some((record) => record.node.id === value && !record.node.disabled),\n  );\n\n  if (selectedId) {\n    return selectedId;\n  }\n\n  return enabledNodes.value[0]?.node.id ?? '';\n};\n\nconst focusedId = ref(getInitialFocusedId());\n\nconst registerItem = (id: string, element: HTMLElement) => {\n  itemRefs.value.set(id, element);\n};\n\nconst unregisterItem = (id: string) => {\n  itemRefs.value.delete(id);\n};\n\nconst focusItem = (id: string) => {\n  nextTick(() => itemRefs.value.get(id)?.focus());\n};\n\nconst setFocusedId = (id: string, shouldFocus = false) => {\n  focusedId.value = id;\n\n  if (shouldFocus) {\n    focusItem(id);\n  }\n};\n\nconst getVisibleRecord = (id: string) =>\n  visibleNodes.value.find((record) => record.node.id === id);\n\nconst focusBoundary = (position: 'first' | 'last') => {\n  const target =\n    position === 'first' ? enabledNodes.value[0] : enabledNodes.value[enabledNodes.value.length - 1];\n\n  if (target) {\n    setFocusedId(target.node.id, true);\n  }\n};\n\nconst focusAdjacent = (direction: 1 | -1) => {\n  const currentIndex = enabledNodes.value.findIndex((record) => record.node.id === focusedId.value);\n\n  if (currentIndex === -1) {\n    focusBoundary(direction === 1 ? 'first' : 'last');\n    return;\n  }\n\n  const nextIndex = currentIndex + direction;\n\n  if (nextIndex < 0 || nextIndex >= enabledNodes.value.length) {\n    return;\n  }\n\n  setFocusedId(enabledNodes.value[nextIndex].node.id, true);\n};\n\nconst toggleExpanded = (id: string) => {\n  const nextValues = isExpanded(id)\n    ? expandedValues.value.filter((value) => value !== id)\n    : [...expandedValues.value, id];\n\n  updateExpanded(nextValues);\n};\n\nconst toggleSelected = (id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  if (props.selectionMode === 'multiple') {\n    const nextValues = isSelected(id)\n      ? selectedValues.value.filter((value) => value !== id)\n      : [...selectedValues.value, id];\n\n    updateSelection(nextValues);\n    return;\n  }\n\n  updateSelection([id]);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  const hasChildren = Boolean(record.node.children?.length);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusAdjacent(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusAdjacent(-1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n\n      if (hasChildren && !isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (hasChildren) {\n        const firstChild = visibleNodes.value.find(\n          (item) => item.parentId === id && !item.node.disabled,\n        );\n\n        if (firstChild) {\n          setFocusedId(firstChild.node.id, true);\n        }\n      }\n\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n\n      if (hasChildren && isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (record.parentId) {\n        setFocusedId(record.parentId, true);\n      }\n\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusBoundary('first');\n      break;\n    case 'End':\n      event.preventDefault();\n      focusBoundary('last');\n      break;\n    default:\n      if (isActivationKey(event)) {\n        event.preventDefault();\n        toggleSelected(id);\n      }\n      break;\n  }\n};\n\nwatch(\n  () => [visibleNodes.value, props.modelValue] as const,\n  () => {\n    const focusedRecord = visibleNodes.value.find(\n      (record) => record.node.id === focusedId.value && !record.node.disabled,\n    );\n\n    if (!focusedRecord) {\n      focusedId.value = getInitialFocusedId();\n    }\n  },\n  { deep: true, immediate: true },\n);\n\nprovide(treeTreeViewInjectionKey, {\n  baseId,\n  disabled: computed(() => props.disabled),\n  selectionMode: computed(() => props.selectionMode),\n  focusedId,\n  isExpanded,\n  toggleExpanded,\n  isSelected,\n  toggleSelected,\n  setFocusedId,\n  onItemKeydown,\n  registerItem,\n  unregisterItem,\n});\n</script>\n\n<template>\n  <div\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"nodes.length > 0\"\n      v-bind=\"treeAttrs\"\n      class=\"t-tree-view__root\"\n      role=\"tree\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n    >\n      <TTreeViewItem\n        v-for=\"node in nodes\"\n        :key=\"node.id\"\n        :node=\"node\"\n        :level=\"1\"\n      />\n    </ul>\n\n    <div\n      v-else\n      class=\"t-tree-view__empty\"\n    >\n      {{ emptyText }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TTreeView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,161 @@
+import { treeTreeViewInjectionKey as e } from "./tree-view.js";
+import t from "./TTreeViewItem.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, defineComponent as o, mergeProps as s, nextTick as c, normalizeClass as l, normalizeStyle as u, openBlock as d, provide as f, ref as p, renderList as m, toDisplayString as h, useAttrs as g, watch as _ } from "vue";
+import { createId as v, isActivationKey as y } from "@treeui/utils";
+//#region src/components/TTreeView.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-multiselectable"], x = {
+	key: 1,
+	class: "t-tree-view__empty"
+}, S = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "TTreeView",
+	props: {
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		nodes: { default: () => [] },
+		selectionMode: { default: "single" },
+		expanded: { default: void 0 },
+		defaultExpanded: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No items available." }
+	},
+	emits: [
+		"update:modelValue",
+		"update:expanded",
+		"selection-change",
+		"expanded-change"
+	],
+	setup(o, { emit: S }) {
+		let C = o, w = S, T = g(), E = v("t-tree-view"), D = p(C.defaultValue), O = p(C.defaultExpanded), k = p(/* @__PURE__ */ new Map()), A = r(() => [
+			"t-tree-view",
+			{ "is-disabled": C.disabled },
+			T.class
+		]), j = r(() => T.style), M = r(() => {
+			let { class: e, style: t, ...n } = T;
+			return n;
+		}), N = r(() => {
+			let e = C.modelValue ?? D.value;
+			return e == null || e === "" ? [] : Array.isArray(e) ? e : [e];
+		}), P = r(() => C.expanded ?? O.value), F = (e) => {
+			if (C.selectionMode === "multiple") {
+				C.modelValue === void 0 && (D.value = e), w("update:modelValue", e), w("selection-change", e);
+				return;
+			}
+			let t = e[0];
+			C.modelValue === void 0 && (D.value = t), w("update:modelValue", t), w("selection-change", t);
+		}, I = (e) => {
+			C.expanded === void 0 && (O.value = e), w("update:expanded", e), w("expanded-change", e);
+		}, L = (e) => N.value.includes(e), R = (e) => P.value.includes(e), z = (e, t = 1, n) => e.reduce((e, r) => (e.push({
+			node: r,
+			level: t,
+			parentId: n
+		}), r.children?.length && R(r.id) && e.push(...z(r.children, t + 1, r.id)), e), []), B = r(() => z(C.nodes)), V = r(() => B.value.filter((e) => !e.node.disabled)), H = () => N.value.find((e) => B.value.some((t) => t.node.id === e && !t.node.disabled)) || (V.value[0]?.node.id ?? ""), U = p(H()), W = (e, t) => {
+			k.value.set(e, t);
+		}, G = (e) => {
+			k.value.delete(e);
+		}, K = (e) => {
+			c(() => k.value.get(e)?.focus());
+		}, q = (e, t = !1) => {
+			U.value = e, t && K(e);
+		}, J = (e) => B.value.find((t) => t.node.id === e), Y = (e) => {
+			let t = e === "first" ? V.value[0] : V.value[V.value.length - 1];
+			t && q(t.node.id, !0);
+		}, X = (e) => {
+			let t = V.value.findIndex((e) => e.node.id === U.value);
+			if (t === -1) {
+				Y(e === 1 ? "first" : "last");
+				return;
+			}
+			let n = t + e;
+			n < 0 || n >= V.value.length || q(V.value[n].node.id, !0);
+		}, Z = (e) => {
+			let t = R(e) ? P.value.filter((t) => t !== e) : [...P.value, e];
+			I(t);
+		}, Q = (e) => {
+			let t = J(e);
+			if (!(!t || t.node.disabled || C.disabled)) {
+				if (C.selectionMode === "multiple") {
+					let t = L(e) ? N.value.filter((t) => t !== e) : [...N.value, e];
+					F(t);
+					return;
+				}
+				F([e]);
+			}
+		};
+		return _(() => [B.value, C.modelValue], () => {
+			B.value.find((e) => e.node.id === U.value && !e.node.disabled) || (U.value = H());
+		}, {
+			deep: !0,
+			immediate: !0
+		}), f(e, {
+			baseId: E,
+			disabled: r(() => C.disabled),
+			selectionMode: r(() => C.selectionMode),
+			focusedId: U,
+			isExpanded: R,
+			toggleExpanded: Z,
+			isSelected: L,
+			toggleSelected: Q,
+			setFocusedId: q,
+			onItemKeydown: (e, t) => {
+				let n = J(t);
+				if (!n || n.node.disabled || C.disabled) return;
+				let r = !!n.node.children?.length;
+				switch (e.key) {
+					case "ArrowDown":
+						e.preventDefault(), X(1);
+						break;
+					case "ArrowUp":
+						e.preventDefault(), X(-1);
+						break;
+					case "ArrowRight":
+						if (e.preventDefault(), r && !R(t)) {
+							Z(t);
+							return;
+						}
+						if (r) {
+							let e = B.value.find((e) => e.parentId === t && !e.node.disabled);
+							e && q(e.node.id, !0);
+						}
+						break;
+					case "ArrowLeft":
+						if (e.preventDefault(), r && R(t)) {
+							Z(t);
+							return;
+						}
+						n.parentId && q(n.parentId, !0);
+						break;
+					case "Home":
+						e.preventDefault(), Y("first");
+						break;
+					case "End":
+						e.preventDefault(), Y("last");
+						break;
+					default:
+						y(e) && (e.preventDefault(), Q(t));
+						break;
+				}
+			},
+			registerItem: W,
+			unregisterItem: G
+		}), (e, r) => (d(), a("div", {
+			class: l(A.value),
+			style: u(j.value)
+		}, [o.nodes.length > 0 ? (d(), a("ul", s({ key: 0 }, M.value, {
+			class: "t-tree-view__root",
+			role: "tree",
+			"aria-multiselectable": o.selectionMode === "multiple" || void 0
+		}), [(d(!0), a(n, null, m(o.nodes, (e) => (d(), i(t, {
+			key: e.id,
+			node: e,
+			level: 1
+		}, null, 8, ["node"]))), 128))], 16, b)) : (d(), a("div", x, h(o.emptyText), 1))], 6));
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=TTreeView.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TTreeView.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey } from '@treeui/utils';\nimport { computed, nextTick, provide, ref, useAttrs, watch } from 'vue';\nimport TTreeViewItem from './TTreeViewItem.vue';\nimport {\n  treeTreeViewInjectionKey,\n  type TTreeViewNode,\n  type TTreeViewRecord,\n  type TTreeViewSelectionMode,\n} from './tree-view';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[];\n    defaultValue?: string | string[];\n    nodes?: TTreeViewNode[];\n    selectionMode?: TTreeViewSelectionMode;\n    expanded?: string[];\n    defaultExpanded?: string[];\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: undefined,\n    nodes: () => [],\n    selectionMode: 'single',\n    expanded: undefined,\n    defaultExpanded: () => [],\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | string[] | undefined];\n  'update:expanded': [value: string[]];\n  'selection-change': [value: string | string[] | undefined];\n  'expanded-change': [value: string[]];\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-tree-view');\nconst internalValue = ref<string | string[] | undefined>(props.defaultValue);\nconst internalExpanded = ref<string[]>(props.defaultExpanded);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\n\nconst rootClasses = computed(() => [\n  't-tree-view',\n  {\n    'is-disabled': props.disabled,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst treeAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst selectedValues = computed(() => {\n  const value = props.modelValue ?? internalValue.value;\n\n  if (value === undefined || value === null || value === '') {\n    return [] as string[];\n  }\n\n  return Array.isArray(value) ? value : [value];\n});\n\nconst expandedValues = computed(() => props.expanded ?? internalExpanded.value);\n\nconst updateSelection = (nextValues: string[]) => {\n  if (props.selectionMode === 'multiple') {\n    if (props.modelValue === undefined) {\n      internalValue.value = nextValues;\n    }\n\n    emit('update:modelValue', nextValues);\n    emit('selection-change', nextValues);\n    return;\n  }\n\n  const nextValue = nextValues[0];\n\n  if (props.modelValue === undefined) {\n    internalValue.value = nextValue;\n  }\n\n  emit('update:modelValue', nextValue);\n  emit('selection-change', nextValue);\n};\n\nconst updateExpanded = (nextValues: string[]) => {\n  if (props.expanded === undefined) {\n    internalExpanded.value = nextValues;\n  }\n\n  emit('update:expanded', nextValues);\n  emit('expanded-change', nextValues);\n};\n\nconst isSelected = (id: string) => selectedValues.value.includes(id);\nconst isExpanded = (id: string) => expandedValues.value.includes(id);\n\nconst flattenNodes = (\n  nodes: TTreeViewNode[],\n  level = 1,\n  parentId?: string,\n): TTreeViewRecord[] =>\n  nodes.reduce<TTreeViewRecord[]>((records, node) => {\n    records.push({\n      node,\n      level,\n      parentId,\n    });\n\n    if (node.children?.length && isExpanded(node.id)) {\n      records.push(...flattenNodes(node.children, level + 1, node.id));\n    }\n\n    return records;\n  }, []);\n\nconst visibleNodes = computed(() => flattenNodes(props.nodes));\nconst enabledNodes = computed(() => visibleNodes.value.filter((record) => !record.node.disabled));\n\nconst getInitialFocusedId = () => {\n  const selectedId = selectedValues.value.find((value) =>\n    visibleNodes.value.some((record) => record.node.id === value && !record.node.disabled),\n  );\n\n  if (selectedId) {\n    return selectedId;\n  }\n\n  return enabledNodes.value[0]?.node.id ?? '';\n};\n\nconst focusedId = ref(getInitialFocusedId());\n\nconst registerItem = (id: string, element: HTMLElement) => {\n  itemRefs.value.set(id, element);\n};\n\nconst unregisterItem = (id: string) => {\n  itemRefs.value.delete(id);\n};\n\nconst focusItem = (id: string) => {\n  nextTick(() => itemRefs.value.get(id)?.focus());\n};\n\nconst setFocusedId = (id: string, shouldFocus = false) => {\n  focusedId.value = id;\n\n  if (shouldFocus) {\n    focusItem(id);\n  }\n};\n\nconst getVisibleRecord = (id: string) =>\n  visibleNodes.value.find((record) => record.node.id === id);\n\nconst focusBoundary = (position: 'first' | 'last') => {\n  const target =\n    position === 'first' ? enabledNodes.value[0] : enabledNodes.value[enabledNodes.value.length - 1];\n\n  if (target) {\n    setFocusedId(target.node.id, true);\n  }\n};\n\nconst focusAdjacent = (direction: 1 | -1) => {\n  const currentIndex = enabledNodes.value.findIndex((record) => record.node.id === focusedId.value);\n\n  if (currentIndex === -1) {\n    focusBoundary(direction === 1 ? 'first' : 'last');\n    return;\n  }\n\n  const nextIndex = currentIndex + direction;\n\n  if (nextIndex < 0 || nextIndex >= enabledNodes.value.length) {\n    return;\n  }\n\n  setFocusedId(enabledNodes.value[nextIndex].node.id, true);\n};\n\nconst toggleExpanded = (id: string) => {\n  const nextValues = isExpanded(id)\n    ? expandedValues.value.filter((value) => value !== id)\n    : [...expandedValues.value, id];\n\n  updateExpanded(nextValues);\n};\n\nconst toggleSelected = (id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  if (props.selectionMode === 'multiple') {\n    const nextValues = isSelected(id)\n      ? selectedValues.value.filter((value) => value !== id)\n      : [...selectedValues.value, id];\n\n    updateSelection(nextValues);\n    return;\n  }\n\n  updateSelection([id]);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, id: string) => {\n  const record = getVisibleRecord(id);\n\n  if (!record || record.node.disabled || props.disabled) {\n    return;\n  }\n\n  const hasChildren = Boolean(record.node.children?.length);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusAdjacent(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusAdjacent(-1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n\n      if (hasChildren && !isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (hasChildren) {\n        const firstChild = visibleNodes.value.find(\n          (item) => item.parentId === id && !item.node.disabled,\n        );\n\n        if (firstChild) {\n          setFocusedId(firstChild.node.id, true);\n        }\n      }\n\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n\n      if (hasChildren && isExpanded(id)) {\n        toggleExpanded(id);\n        return;\n      }\n\n      if (record.parentId) {\n        setFocusedId(record.parentId, true);\n      }\n\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusBoundary('first');\n      break;\n    case 'End':\n      event.preventDefault();\n      focusBoundary('last');\n      break;\n    default:\n      if (isActivationKey(event)) {\n        event.preventDefault();\n        toggleSelected(id);\n      }\n      break;\n  }\n};\n\nwatch(\n  () => [visibleNodes.value, props.modelValue] as const,\n  () => {\n    const focusedRecord = visibleNodes.value.find(\n      (record) => record.node.id === focusedId.value && !record.node.disabled,\n    );\n\n    if (!focusedRecord) {\n      focusedId.value = getInitialFocusedId();\n    }\n  },\n  { deep: true, immediate: true },\n);\n\nprovide(treeTreeViewInjectionKey, {\n  baseId,\n  disabled: computed(() => props.disabled),\n  selectionMode: computed(() => props.selectionMode),\n  focusedId,\n  isExpanded,\n  toggleExpanded,\n  isSelected,\n  toggleSelected,\n  setFocusedId,\n  onItemKeydown,\n  registerItem,\n  unregisterItem,\n});\n</script>\n\n<template>\n  <div\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <ul\n      v-if=\"nodes.length > 0\"\n      v-bind=\"treeAttrs\"\n      class=\"t-tree-view__root\"\n      role=\"tree\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n    >\n      <TTreeViewItem\n        v-for=\"node in nodes\"\n        :key=\"node.id\"\n        :node=\"node\"\n        :level=\"1\"\n      />\n    </ul>\n\n    <div\n      v-else\n      class=\"t-tree-view__empty\"\n    >\n      {{ emptyText }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TTreeViewItem.cjs

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