@treeui/vue 0.8.0 → 0.10.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"TRadio.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TRadio.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    value: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    disabled: false,\n    invalid: false,\n    size: undefined,\n  },\n);\n\nconst group = inject<{\n  modelValue: () => string | undefined;\n  name: () => string | undefined;\n  disabled: () => boolean;\n  invalid: () => boolean;\n  size: () => TSize;\n  onChange: (value: string) => void;\n} | null>('t-radio-group', null);\n\nconst attrs = useAttrs();\n\nconst isChecked = computed(() => {\n  return group ? group.modelValue() === props.value : false;\n});\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled() ?? false));\nconst isInvalid = computed(() => props.invalid || (group?.invalid() ?? false));\nconst resolvedSize = computed(() => props.size ?? group?.size() ?? 'md');\n\nconst rootClasses = computed(() => [\n  't-radio',\n  `t-radio--${resolvedSize.value}`,\n  {\n    'is-checked': isChecked.value,\n    'is-disabled': isDisabled.value,\n    'is-invalid': isInvalid.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst inputAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n\nconst onChange = () => {\n  if (group) {\n    group.onChange(props.value);\n  }\n};\n</script>\n\n<template>\n  <label\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <input\n      v-bind=\"inputAttrs\"\n      type=\"radio\"\n      class=\"t-radio__input\"\n      :value=\"value\"\n      :checked=\"isChecked\"\n      :disabled=\"isDisabled\"\n      :name=\"group?.name()\"\n      :aria-checked=\"isChecked\"\n      :aria-invalid=\"isInvalid || undefined\"\n      @change=\"onChange\"\n    >\n    <span\n      class=\"t-radio__control\"\n      aria-hidden=\"true\"\n    >\n      <span\n        v-if=\"isChecked\"\n        class=\"t-radio__dot\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.default\"\n      class=\"t-radio__label\"\n    >\n      <slot />\n    </span>\n  </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAcR,IAAQ,EAOJ,iBAAiB,IAAI,GAEzB,IAAQ,EAAS,GAEjB,IAAY,QACT,IAAQ,EAAM,WAAW,MAAM,EAAM,QAAQ,EACrD,GAEK,IAAa,QAAe,EAAM,aAAa,GAAO,SAAS,KAAK,GAAM,GAC1E,IAAY,QAAe,EAAM,YAAY,GAAO,QAAQ,KAAK,GAAM,GACvE,IAAe,QAAe,EAAM,QAAQ,GAAO,KAAK,KAAK,IAAI,GAEjE,IAAc,QAAe;GACjC;GACA,YAAY,EAAa;GACzB;IACE,cAAc,EAAU;IACxB,eAAe,EAAW;IAC1B,cAAc,EAAU;GAC1B;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,EAAM,KAAK,GAEtC,IAAa,QAAe;GAChC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC,GAEK,UAAiB;GACrB,AAAI,KACF,EAAM,SAAS,EAAM,KAAK;EAE9B;yBAIE,EA+BQ,SAAA;GA9BL,OAAK,EAAE,EAAA,KAAW;GAClB,OAAK,EAAE,EAAA,KAAS;;GAEjB,EAWC,SAXD,EACU,EAUT,OAVmB;IAClB,MAAK;IACL,OAAM;IACL,OAAO,EAAA;IACP,SAAS,EAAA;IACT,UAAU,EAAA;IACV,MAAM,EAAA,CAAA,CAAK,EAAE,KAAI;IACjB,gBAAc,EAAA;IACd,gBAAc,EAAA,SAAa,KAAA;IACnB;;GAEX,EAQO,QARP,GAQO,CAHG,EAAA,SAAA,EAAA,GADR,EAGE,QAHF,CAGE,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;GAGIA,EAAAA,OAAO,WAAA,EAAA,GADf,EAKO,QALP,GAKO,CADL,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}

package/dist/components/TRadioGroup.cjs

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

package/dist/components/TRadioGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TRadioGroup.cjs","names":[],"sources":["../../src/components/TRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    name?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    modelValue: undefined,\n    name: undefined,\n    disabled: false,\n    invalid: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nprovide('t-radio-group', {\n  modelValue: () => props.modelValue,\n  name: () => props.name,\n  disabled: () => props.disabled,\n  invalid: () => props.invalid,\n  size: () => props.size,\n  onChange: (value: string) => {\n    emit('update:modelValue', value);\n  },\n});\n\nconst rootClasses = computed(() => [\n  't-radio-group',\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst groupAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <div\n    v-bind=\"groupAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"radiogroup\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TRadioGroup.js

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

package/dist/components/TRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TRadioGroup.js","names":[],"sources":["../../src/components/TRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    name?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    modelValue: undefined,\n    name: undefined,\n    disabled: false,\n    invalid: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nprovide('t-radio-group', {\n  modelValue: () => props.modelValue,\n  name: () => props.name,\n  disabled: () => props.disabled,\n  invalid: () => props.invalid,\n  size: () => props.size,\n  onChange: (value: string) => {\n    emit('update:modelValue', value);\n  },\n});\n\nconst rootClasses = computed(() => [\n  't-radio-group',\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst groupAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <div\n    v-bind=\"groupAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"radiogroup\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TRadioGroup.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue");var t=(0,e.defineComponent)({inheritAttrs:!1,__name:`TRadioGroup`,props:{modelValue:{default:void 0},name:{default:void 0},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},size:{default:`md`}},emits:[`update:modelValue`],setup(t,{emit:n}){let r=t,i=n,a=(0,e.useAttrs)();(0,e.provide)(`t-radio-group`,{modelValue:()=>r.modelValue,name:()=>r.name,disabled:()=>r.disabled,invalid:()=>r.invalid,size:()=>r.size,onChange:e=>{i(`update:modelValue`,e)}});let o=(0,e.computed)(()=>[`t-radio-group`,a.class]),s=(0,e.computed)(()=>a.style),c=(0,e.computed)(()=>{let{class:e,style:t,...n}=a;return n});return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)(c.value,{class:o.value,style:s.value,role:`radiogroup`}),[(0,e.renderSlot)(t.$slots,`default`)],16))}});exports.default=t;
+//# sourceMappingURL=TRadioGroup.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TRadioGroup.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    name?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    modelValue: undefined,\n    name: undefined,\n    disabled: false,\n    invalid: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nprovide('t-radio-group', {\n  modelValue: () => props.modelValue,\n  name: () => props.name,\n  disabled: () => props.disabled,\n  invalid: () => props.invalid,\n  size: () => props.size,\n  onChange: (value: string) => {\n    emit('update:modelValue', value);\n  },\n});\n\nconst rootClasses = computed(() => [\n  't-radio-group',\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst groupAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <div\n    v-bind=\"groupAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"radiogroup\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":"wRAQA,IAAM,EAAQ,EAiBR,EAAO,EAIP,GAAA,EAAA,EAAA,SAAA,CAAiB,GAEvB,EAAA,EAAA,QAAA,CAAQ,gBAAiB,CACvB,eAAkB,EAAM,WACxB,SAAY,EAAM,KAClB,aAAgB,EAAM,SACtB,YAAe,EAAM,QACrB,SAAY,EAAM,KAClB,SAAW,GAAkB,CAC3B,EAAK,oBAAqB,CAAK,CACjC,CACF,CAAC,EAED,IAAM,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,gBACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,2DAWO,OAAA,EAAA,EAAA,WAAA,CANI,EAMJ,MANc,CACjB,MAAO,EAAA,MACP,MAAO,EAAA,MACR,KAAK,iCAEG,EAAA,OAAA,SAAA,CAAA,EAAA,EAAA"}

package/dist/components/TRadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { computed as e, createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, provide as a, renderSlot as o, useAttrs as s } from "vue";
+//#region src/components/TRadioGroup.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "TRadioGroup",
+	props: {
+		modelValue: { default: void 0 },
+		name: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" }
+	},
+	emits: ["update:modelValue"],
+	setup(n, { emit: c }) {
+		let l = n, u = c, d = s();
+		a("t-radio-group", {
+			modelValue: () => l.modelValue,
+			name: () => l.name,
+			disabled: () => l.disabled,
+			invalid: () => l.invalid,
+			size: () => l.size,
+			onChange: (e) => {
+				u("update:modelValue", e);
+			}
+		});
+		let f = e(() => ["t-radio-group", d.class]), p = e(() => d.style), m = e(() => {
+			let { class: e, style: t, ...n } = d;
+			return n;
+		});
+		return (e, n) => (i(), t("div", r(m.value, {
+			class: f.value,
+			style: p.value,
+			role: "radiogroup"
+		}), [o(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=TRadioGroup.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TRadioGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, useAttrs } from 'vue';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    name?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    modelValue: undefined,\n    name: undefined,\n    disabled: false,\n    invalid: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\nconst attrs = useAttrs();\n\nprovide('t-radio-group', {\n  modelValue: () => props.modelValue,\n  name: () => props.name,\n  disabled: () => props.disabled,\n  invalid: () => props.invalid,\n  size: () => props.size,\n  onChange: (value: string) => {\n    emit('update:modelValue', value);\n  },\n});\n\nconst rootClasses = computed(() => [\n  't-radio-group',\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\n\nconst groupAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\n});\n</script>\n\n<template>\n  <div\n    v-bind=\"groupAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"radiogroup\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAiBR,IAAO,GAIP,IAAQ,EAAS;EAEvB,EAAQ,iBAAiB;GACvB,kBAAkB,EAAM;GACxB,YAAY,EAAM;GAClB,gBAAgB,EAAM;GACtB,eAAe,EAAM;GACrB,YAAY,EAAM;GAClB,WAAW,MAAkB;IAC3B,EAAK,qBAAqB,CAAK;GACjC;EACF,CAAC;EAED,IAAM,IAAc,QAAe,CACjC,iBACA,EAAM,KACR,CAAC,GAEK,IAAY,QAAe,EAAM,KAAK,GAEtC,IAAa,QAAe;GAChC,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC;yBAIC,EAOM,OAPN,EACU,EAMJ,OANc;GACjB,OAAO,EAAA;GACP,OAAO,EAAA;GACR,MAAK;OAEL,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/components/TSelect.cjs

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

package/dist/components/TSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSelect.cjs","names":[],"sources":["../../src/components/TSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, 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 TSelectOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    options?: TSelectOption[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    options: () => [],\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-select');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst listboxRef = ref<HTMLElement | null>(null);\nconst optionRefs = ref<Map<string | number, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst dropUp = ref(false);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\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-select',\n  `t-select--${props.size}`,\n  {\n    't-select--drop-up': dropUp.value,\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\n// Nearest ancestor that can clip the listbox (scroll container or hidden overflow).\nconst findClippingAncestor = (element: HTMLElement): HTMLElement | null => {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body) {\n    const { overflowY } = window.getComputedStyle(parent);\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') {\n      return parent;\n    }\n    parent = parent.parentElement;\n  }\n  return null;\n};\n\n// Flip the listbox above the trigger when its rendered position overflows the\n// nearest clipping ancestor (e.g. a modal body) or the viewport, and there is\n// more room above the trigger than below it. Measuring the rendered rect keeps\n// the decision in sync with the CSS offset (--tree-space-2) automatically.\nconst updateDropDirection = () => {\n  const trigger = triggerRef.value;\n  const listbox = listboxRef.value;\n  if (!trigger || !listbox) {\n    dropUp.value = false;\n    return;\n  }\n  const triggerRect = trigger.getBoundingClientRect();\n  const listboxRect = listbox.getBoundingClientRect();\n  const boundary = findClippingAncestor(trigger)?.getBoundingClientRect();\n  const bottomLimit = Math.min(boundary?.bottom ?? Infinity, window.innerHeight);\n  const topLimit = Math.max(boundary?.top ?? 0, 0);\n  const spaceBelow = bottomLimit - triggerRect.bottom;\n  const spaceAbove = triggerRect.top - topLimit;\n  dropUp.value = listboxRect.bottom > bottomLimit && spaceAbove > spaceBelow;\n};\n\nconst rootStyle = computed(() => attrs.style);\n\nconst selectedLabel = computed(() => {\n  const opt = props.options.find((o) => o.value === props.modelValue);\n  return opt?.label ?? '';\n});\n\nconst enabledOptions = computed(() =>\n  props.options.filter((o) => !o.disabled),\n);\n\nconst openDropdown = () => {\n  if (props.disabled) return;\n  const selectedIdx = props.options.findIndex((o) => o.value === props.modelValue);\n  focusedIndex.value = selectedIdx >= 0 ? selectedIdx : 0;\n  // Render downward first so the measurement always starts from the default position.\n  dropUp.value = false;\n  setValue(true);\n  nextTick(() => {\n    updateDropDirection();\n    focusOption(focusedIndex.value);\n  });\n};\n\nconst closeDropdown = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleDropdown = () => {\n  if (isOpen.value) {\n    closeDropdown();\n  } else {\n    openDropdown();\n  }\n};\n\nconst selectOption = (opt: TSelectOption) => {\n  if (opt.disabled) return;\n  emit('update:modelValue', opt.value);\n  closeDropdown(true);\n};\n\nconst focusOption = (index: number) => {\n  const opt = props.options[index];\n  if (!opt) return;\n  const el = optionRefs.value.get(opt.value);\n  el?.focus();\n};\n\nconst setOptionRef = (el: Element | null, value: string | number) => {\n  if (el instanceof HTMLElement) {\n    optionRefs.value.set(value, el);\n  } else {\n    optionRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.options.length) {\n    if (!props.options[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusOption(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeDropdown();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openDropdown();\n  }\n};\n\nconst onOptionKeydown = (event: KeyboardEvent, opt: TSelectOption, _index: number) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeDropdown(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectOption(opt);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[0])\n        : 0;\n      focusOption(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[enabledOptions.value.length - 1])\n        : props.options.length - 1;\n      focusOption(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeDropdown();\n};\n\nconst hasSelection = computed(() =>\n  props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined,\n);\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-select__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      :aria-busy=\"loading || undefined\"\n      @click=\"toggleDropdown\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-select__slot t-select__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-select__value\"\n        :data-placeholder=\"!hasSelection ? true : undefined\"\n      >\n        {{ selectedLabel || placeholder }}\n      </span>\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-select__chevron\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </button>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        ref=\"listboxRef\"\n        role=\"listbox\"\n        class=\"t-select__listbox\"\n        :aria-label=\"typeof triggerAttrs['aria-label'] === 'string' ? triggerAttrs['aria-label'] : undefined\"\n      >\n        <li\n          v-for=\"(opt, index) in options\"\n          :key=\"opt.value\"\n          :ref=\"(el) => setOptionRef(el as Element | null, opt.value)\"\n          role=\"option\"\n          class=\"t-select__option\"\n          :class=\"{\n            'is-selected': opt.value === modelValue,\n            'is-disabled': opt.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-selected=\"opt.value === modelValue\"\n          :aria-disabled=\"opt.disabled || undefined\"\n          :tabindex=\"opt.disabled ? -1 : 0\"\n          @click=\"selectOption(opt)\"\n          @keydown=\"onOptionKeydown($event, opt, index)\"\n        >\n          {{ opt.label }}\n          <svg\n            v-if=\"opt.value === modelValue\"\n            class=\"t-select__check\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n          </svg>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TSelect.js

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

package/dist/components/TSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSelect.js","names":[],"sources":["../../src/components/TSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, 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 TSelectOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    options?: TSelectOption[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    options: () => [],\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-select');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst listboxRef = ref<HTMLElement | null>(null);\nconst optionRefs = ref<Map<string | number, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst dropUp = ref(false);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\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-select',\n  `t-select--${props.size}`,\n  {\n    't-select--drop-up': dropUp.value,\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\n// Nearest ancestor that can clip the listbox (scroll container or hidden overflow).\nconst findClippingAncestor = (element: HTMLElement): HTMLElement | null => {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body) {\n    const { overflowY } = window.getComputedStyle(parent);\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') {\n      return parent;\n    }\n    parent = parent.parentElement;\n  }\n  return null;\n};\n\n// Flip the listbox above the trigger when its rendered position overflows the\n// nearest clipping ancestor (e.g. a modal body) or the viewport, and there is\n// more room above the trigger than below it. Measuring the rendered rect keeps\n// the decision in sync with the CSS offset (--tree-space-2) automatically.\nconst updateDropDirection = () => {\n  const trigger = triggerRef.value;\n  const listbox = listboxRef.value;\n  if (!trigger || !listbox) {\n    dropUp.value = false;\n    return;\n  }\n  const triggerRect = trigger.getBoundingClientRect();\n  const listboxRect = listbox.getBoundingClientRect();\n  const boundary = findClippingAncestor(trigger)?.getBoundingClientRect();\n  const bottomLimit = Math.min(boundary?.bottom ?? Infinity, window.innerHeight);\n  const topLimit = Math.max(boundary?.top ?? 0, 0);\n  const spaceBelow = bottomLimit - triggerRect.bottom;\n  const spaceAbove = triggerRect.top - topLimit;\n  dropUp.value = listboxRect.bottom > bottomLimit && spaceAbove > spaceBelow;\n};\n\nconst rootStyle = computed(() => attrs.style);\n\nconst selectedLabel = computed(() => {\n  const opt = props.options.find((o) => o.value === props.modelValue);\n  return opt?.label ?? '';\n});\n\nconst enabledOptions = computed(() =>\n  props.options.filter((o) => !o.disabled),\n);\n\nconst openDropdown = () => {\n  if (props.disabled) return;\n  const selectedIdx = props.options.findIndex((o) => o.value === props.modelValue);\n  focusedIndex.value = selectedIdx >= 0 ? selectedIdx : 0;\n  // Render downward first so the measurement always starts from the default position.\n  dropUp.value = false;\n  setValue(true);\n  nextTick(() => {\n    updateDropDirection();\n    focusOption(focusedIndex.value);\n  });\n};\n\nconst closeDropdown = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleDropdown = () => {\n  if (isOpen.value) {\n    closeDropdown();\n  } else {\n    openDropdown();\n  }\n};\n\nconst selectOption = (opt: TSelectOption) => {\n  if (opt.disabled) return;\n  emit('update:modelValue', opt.value);\n  closeDropdown(true);\n};\n\nconst focusOption = (index: number) => {\n  const opt = props.options[index];\n  if (!opt) return;\n  const el = optionRefs.value.get(opt.value);\n  el?.focus();\n};\n\nconst setOptionRef = (el: Element | null, value: string | number) => {\n  if (el instanceof HTMLElement) {\n    optionRefs.value.set(value, el);\n  } else {\n    optionRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.options.length) {\n    if (!props.options[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusOption(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeDropdown();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openDropdown();\n  }\n};\n\nconst onOptionKeydown = (event: KeyboardEvent, opt: TSelectOption, _index: number) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeDropdown(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectOption(opt);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[0])\n        : 0;\n      focusOption(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[enabledOptions.value.length - 1])\n        : props.options.length - 1;\n      focusOption(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeDropdown();\n};\n\nconst hasSelection = computed(() =>\n  props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined,\n);\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-select__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      :aria-busy=\"loading || undefined\"\n      @click=\"toggleDropdown\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-select__slot t-select__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-select__value\"\n        :data-placeholder=\"!hasSelection ? true : undefined\"\n      >\n        {{ selectedLabel || placeholder }}\n      </span>\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-select__chevron\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </button>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        ref=\"listboxRef\"\n        role=\"listbox\"\n        class=\"t-select__listbox\"\n        :aria-label=\"typeof triggerAttrs['aria-label'] === 'string' ? triggerAttrs['aria-label'] : undefined\"\n      >\n        <li\n          v-for=\"(opt, index) in options\"\n          :key=\"opt.value\"\n          :ref=\"(el) => setOptionRef(el as Element | null, opt.value)\"\n          role=\"option\"\n          class=\"t-select__option\"\n          :class=\"{\n            'is-selected': opt.value === modelValue,\n            'is-disabled': opt.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-selected=\"opt.value === modelValue\"\n          :aria-disabled=\"opt.disabled || undefined\"\n          :tabindex=\"opt.disabled ? -1 : 0\"\n          @click=\"selectOption(opt)\"\n          @keydown=\"onOptionKeydown($event, opt, index)\"\n        >\n          {{ opt.label }}\n          <svg\n            v-if=\"opt.value === modelValue\"\n            class=\"t-select__check\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n          </svg>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -23,6 +23,7 @@ declare function __VLS_template(): {
     refs: {
         rootRef: HTMLDivElement;
         triggerRef: HTMLButtonElement;
+        listboxRef: HTMLUListElement;
     };
     rootEl: any;
 };
@@ -48,6 +49,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
     triggerRef: HTMLButtonElement;
+    listboxRef: HTMLUListElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"TSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/TSelect.vue"],"names":[],"mappings":"AA2UA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAyNJ,iBAAS,cAAc;WAgJT,OAAO,IAA6B;;wBAZtB,GAAG;;;;;;;EAiB9B;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;gBAlZJ,MAAM,GAAG,MAAM;cAKjB,OAAO;UADX,KAAK;aAEF,OAAO;aACP,OAAO;aANP,aAAa,EAAE;UAClB,OAAO;iBACA,OAAO;iBAKP,MAAM;;;;OAmZtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/TSelect.vue"],"names":[],"mappings":"AAsXA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAmQJ,iBAAS,cAAc;WAoJT,OAAO,IAA6B;;wBAbtB,GAAG;;;;;;;;EAkB9B;AA2BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;gBAjcJ,MAAM,GAAG,MAAM;cAKjB,OAAO;UADX,KAAK;aAEF,OAAO;aACP,OAAO;aANP,aAAa,EAAE;UAClB,OAAO;iBACA,OAAO;iBAKP,MAAM;;;;;OAkctB,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/TSelect.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("./TSpinner.cjs"),t=require("../composables/useControllableOpen.cjs");let n=require("vue"),r=require("@treeui/utils");var i=[`data-state`],a=[`disabled`,`aria-controls`,`aria-expanded`,`aria-invalid`,`aria-busy`],o={key:0,class:`t-select__slot t-select__slot--prefix`},s=[`data-placeholder`],c={key:2,class:`t-select__chevron`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},l=[`id`,`aria-label`],u=[`aria-selected`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],d={key:0,class:`t-select__check`,viewBox:`0 0 16 16`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`,"aria-hidden":`true`},f=(0,n.defineComponent)({inheritAttrs:!1,__name:`TSelect`,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:``}},emits:[`update:modelValue`,`update:open`,`open-change`],setup(f,{emit:p}){let m=f,h=p,g=(0,n.useAttrs)(),_=(0,r.createId)(`t-select`),v=(0,n.ref)(null),y=(0,n.ref)(null),b=(0,n.ref)(null),x=(0,n.ref)(new Map),S=(0,n.ref)(-1),C=(0,n.ref)(!1),w=(0,n.computed)(()=>{let{class:e,style:t,...n}=g;return n}),{value:T,setValue:E}=t.useControllableOpen((0,n.toRef)(m,`open`),m.defaultOpen,e=>{h(`update:open`,e),h(`open-change`,e)}),D=(0,n.computed)(()=>[`t-select`,`t-select--${m.size}`,{"t-select--drop-up":C.value,"is-disabled":m.disabled,"is-invalid":m.invalid,"is-loading":m.loading,"is-open":T.value},g.class]),O=e=>{let t=e.parentElement;for(;t&&t!==document.body;){let{overflowY:e}=window.getComputedStyle(t);if(e===`auto`||e===`scroll`||e===`hidden`)return t;t=t.parentElement}return null},k=()=>{let e=y.value,t=b.value;if(!e||!t){C.value=!1;return}let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=O(e)?.getBoundingClientRect(),a=Math.min(i?.bottom??1/0,window.innerHeight),o=Math.max(i?.top??0,0),s=a-n.bottom,c=n.top-o;C.value=r.bottom>a&&c>s},A=(0,n.computed)(()=>g.style),j=(0,n.computed)(()=>m.options.find(e=>e.value===m.modelValue)?.label??``),M=(0,n.computed)(()=>m.options.filter(e=>!e.disabled)),N=()=>{if(m.disabled)return;let e=m.options.findIndex(e=>e.value===m.modelValue);S.value=e>=0?e:0,C.value=!1,E(!0),(0,n.nextTick)(()=>{k(),L(S.value)})},P=(e=!1)=>{E(!1),S.value=-1,e&&(0,n.nextTick)(()=>y.value?.focus())},F=()=>{T.value?P():N()},I=e=>{e.disabled||(h(`update:modelValue`,e.value),P(!0))},L=e=>{let t=m.options[e];t&&x.value.get(t.value)?.focus()},R=(e,t)=>{e instanceof HTMLElement?x.value.set(t,e):x.value.delete(t)},z=e=>{let t=S.value+e;for(;t>=0&&t<m.options.length;){if(!m.options[t].disabled){S.value=t,L(t);return}t+=e}},B=e=>{if(!m.disabled){if((0,r.isEscapeKey)(e)&&T.value){e.preventDefault(),P();return}((0,r.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),N())}},V=(e,t,n)=>{if((0,r.isEscapeKey)(e)){e.preventDefault(),P(!0);return}if((0,r.isActivationKey)(e)){e.preventDefault(),I(t);return}switch(e.key){case`ArrowDown`:e.preventDefault(),z(1);break;case`ArrowUp`:e.preventDefault(),z(-1);break;case`Home`:e.preventDefault(),S.value=M.value.length>0?m.options.indexOf(M.value[0]):0,L(S.value);break;case`End`:e.preventDefault(),S.value=M.value.length>0?m.options.indexOf(M.value[M.value.length-1]):m.options.length-1,L(S.value);break;default:break}},H=e=>{if(!T.value)return;let t=e.target;t instanceof Node&&(v.value?.contains(t)||P())},U=(0,n.computed)(()=>m.modelValue!==``&&m.modelValue!==null&&m.modelValue!==void 0);return(0,n.watch)(T,e=>{e?document.addEventListener(`pointerdown`,H):document.removeEventListener(`pointerdown`,H)}),(0,n.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,H)}),(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`rootRef`,ref:v,class:(0,n.normalizeClass)(D.value),style:(0,n.normalizeStyle)(A.value),"data-state":(0,n.unref)(T)?`open`:`closed`},[(0,n.createElementVNode)(`button`,(0,n.mergeProps)({ref_key:`triggerRef`,ref:y},w.value,{type:`button`,class:`t-select__trigger`,disabled:f.disabled,"aria-controls":(0,n.unref)(T)?(0,n.unref)(_):void 0,"aria-haspopup":`listbox`,"aria-expanded":(0,n.unref)(T),"aria-invalid":f.invalid||void 0,"aria-busy":f.loading||void 0,onClick:F,onKeydown:B}),[t.$slots.prefix?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,o,[(0,n.renderSlot)(t.$slots,`prefix`)])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`span`,{class:`t-select__value`,"data-placeholder":!U.value||void 0},(0,n.toDisplayString)(j.value||f.placeholder),9,s),f.loading?((0,n.openBlock)(),(0,n.createBlock)(e.default,{key:1,size:`sm`,label:`Loading`})):((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,c,[...r[0]||=[(0,n.createElementVNode)(`polyline`,{points:`4 6 8 10 12 6`},null,-1)]]))],16,a),(0,n.createVNode)(n.Transition,{name:`t-fade`},{default:(0,n.withCtx)(()=>[(0,n.unref)(T)&&!f.disabled?((0,n.openBlock)(),(0,n.createElementBlock)(`ul`,{key:0,id:(0,n.unref)(_),ref_key:`listboxRef`,ref:b,role:`listbox`,class:`t-select__listbox`,"aria-label":typeof w.value[`aria-label`]==`string`?w.value[`aria-label`]:void 0},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(f.options,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`li`,{key:e.value,ref_for:!0,ref:t=>R(t,e.value),role:`option`,class:(0,n.normalizeClass)([`t-select__option`,{"is-selected":e.value===f.modelValue,"is-disabled":e.disabled,"is-focused":t===S.value}]),"aria-selected":e.value===f.modelValue,"aria-disabled":e.disabled||void 0,tabindex:e.disabled?-1:0,onClick:t=>I(e),onKeydown:n=>V(n,e,t)},[(0,n.createTextVNode)((0,n.toDisplayString)(e.label)+` `,1),e.value===f.modelValue?((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,d,[...r[1]||=[(0,n.createElementVNode)(`polyline`,{points:`3.5 8.5 6.5 11.5 12.5 4.5`},null,-1)]])):(0,n.createCommentVNode)(``,!0)],42,u))),128))],8,l)):(0,n.createCommentVNode)(``,!0)]),_:1})],14,i))}});exports.default=f;
+//# sourceMappingURL=TSelect.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TSelect.vue_vue_type_script_setup_true_lang.cjs","names":["$slots"],"sources":["../../src/components/TSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, 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 TSelectOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    options?: TSelectOption[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    options: () => [],\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-select');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst listboxRef = ref<HTMLElement | null>(null);\nconst optionRefs = ref<Map<string | number, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst dropUp = ref(false);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\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-select',\n  `t-select--${props.size}`,\n  {\n    't-select--drop-up': dropUp.value,\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\n// Nearest ancestor that can clip the listbox (scroll container or hidden overflow).\nconst findClippingAncestor = (element: HTMLElement): HTMLElement | null => {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body) {\n    const { overflowY } = window.getComputedStyle(parent);\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') {\n      return parent;\n    }\n    parent = parent.parentElement;\n  }\n  return null;\n};\n\n// Flip the listbox above the trigger when its rendered position overflows the\n// nearest clipping ancestor (e.g. a modal body) or the viewport, and there is\n// more room above the trigger than below it. Measuring the rendered rect keeps\n// the decision in sync with the CSS offset (--tree-space-2) automatically.\nconst updateDropDirection = () => {\n  const trigger = triggerRef.value;\n  const listbox = listboxRef.value;\n  if (!trigger || !listbox) {\n    dropUp.value = false;\n    return;\n  }\n  const triggerRect = trigger.getBoundingClientRect();\n  const listboxRect = listbox.getBoundingClientRect();\n  const boundary = findClippingAncestor(trigger)?.getBoundingClientRect();\n  const bottomLimit = Math.min(boundary?.bottom ?? Infinity, window.innerHeight);\n  const topLimit = Math.max(boundary?.top ?? 0, 0);\n  const spaceBelow = bottomLimit - triggerRect.bottom;\n  const spaceAbove = triggerRect.top - topLimit;\n  dropUp.value = listboxRect.bottom > bottomLimit && spaceAbove > spaceBelow;\n};\n\nconst rootStyle = computed(() => attrs.style);\n\nconst selectedLabel = computed(() => {\n  const opt = props.options.find((o) => o.value === props.modelValue);\n  return opt?.label ?? '';\n});\n\nconst enabledOptions = computed(() =>\n  props.options.filter((o) => !o.disabled),\n);\n\nconst openDropdown = () => {\n  if (props.disabled) return;\n  const selectedIdx = props.options.findIndex((o) => o.value === props.modelValue);\n  focusedIndex.value = selectedIdx >= 0 ? selectedIdx : 0;\n  // Render downward first so the measurement always starts from the default position.\n  dropUp.value = false;\n  setValue(true);\n  nextTick(() => {\n    updateDropDirection();\n    focusOption(focusedIndex.value);\n  });\n};\n\nconst closeDropdown = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleDropdown = () => {\n  if (isOpen.value) {\n    closeDropdown();\n  } else {\n    openDropdown();\n  }\n};\n\nconst selectOption = (opt: TSelectOption) => {\n  if (opt.disabled) return;\n  emit('update:modelValue', opt.value);\n  closeDropdown(true);\n};\n\nconst focusOption = (index: number) => {\n  const opt = props.options[index];\n  if (!opt) return;\n  const el = optionRefs.value.get(opt.value);\n  el?.focus();\n};\n\nconst setOptionRef = (el: Element | null, value: string | number) => {\n  if (el instanceof HTMLElement) {\n    optionRefs.value.set(value, el);\n  } else {\n    optionRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.options.length) {\n    if (!props.options[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusOption(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeDropdown();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openDropdown();\n  }\n};\n\nconst onOptionKeydown = (event: KeyboardEvent, opt: TSelectOption, _index: number) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeDropdown(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectOption(opt);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[0])\n        : 0;\n      focusOption(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[enabledOptions.value.length - 1])\n        : props.options.length - 1;\n      focusOption(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeDropdown();\n};\n\nconst hasSelection = computed(() =>\n  props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined,\n);\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-select__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      :aria-busy=\"loading || undefined\"\n      @click=\"toggleDropdown\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-select__slot t-select__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-select__value\"\n        :data-placeholder=\"!hasSelection ? true : undefined\"\n      >\n        {{ selectedLabel || placeholder }}\n      </span>\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-select__chevron\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </button>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        ref=\"listboxRef\"\n        role=\"listbox\"\n        class=\"t-select__listbox\"\n        :aria-label=\"typeof triggerAttrs['aria-label'] === 'string' ? triggerAttrs['aria-label'] : undefined\"\n      >\n        <li\n          v-for=\"(opt, index) in options\"\n          :key=\"opt.value\"\n          :ref=\"(el) => setOptionRef(el as Element | null, opt.value)\"\n          role=\"option\"\n          class=\"t-select__option\"\n          :class=\"{\n            'is-selected': opt.value === modelValue,\n            'is-disabled': opt.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-selected=\"opt.value === modelValue\"\n          :aria-disabled=\"opt.disabled || undefined\"\n          :tabindex=\"opt.disabled ? -1 : 0\"\n          @click=\"selectOption(opt)\"\n          @keydown=\"onOptionKeydown($event, opt, index)\"\n        >\n          {{ opt.label }}\n          <svg\n            v-if=\"opt.value === modelValue\"\n            class=\"t-select__check\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n          </svg>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,238 @@
+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 ee, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as te, renderSlot as v, toDisplayString as y, toRef as b, unref as x, useAttrs as S, watch as C, withCtx as w } from "vue";
+import { createId as T, isActivationKey as E, isEscapeKey as D } from "@treeui/utils";
+//#region src/components/TSelect.vue?vue&type=script&setup=true&lang.ts
+var O = ["data-state"], k = [
+	"disabled",
+	"aria-controls",
+	"aria-expanded",
+	"aria-invalid",
+	"aria-busy"
+], ne = {
+	key: 0,
+	class: "t-select__slot t-select__slot--prefix"
+}, re = ["data-placeholder"], ie = {
+	key: 2,
+	class: "t-select__chevron",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+}, ae = ["id", "aria-label"], oe = [
+	"aria-selected",
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], se = {
+	key: 0,
+	class: "t-select__check",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+}, A = /*@__PURE__*/ u({
+	inheritAttrs: !1,
+	__name: "TSelect",
+	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: "" }
+	},
+	emits: [
+		"update:modelValue",
+		"update:open",
+		"open-change"
+	],
+	setup(u, { emit: A }) {
+		let j = u, M = A, N = S(), P = T("t-select"), F = _(null), I = _(null), L = _(null), R = _(/* @__PURE__ */ new Map()), z = _(-1), B = _(!1), V = i(() => {
+			let { class: e, style: t, ...n } = N;
+			return n;
+		}), { value: H, setValue: U } = t(b(j, "open"), j.defaultOpen, (e) => {
+			M("update:open", e), M("open-change", e);
+		}), W = i(() => [
+			"t-select",
+			`t-select--${j.size}`,
+			{
+				"t-select--drop-up": B.value,
+				"is-disabled": j.disabled,
+				"is-invalid": j.invalid,
+				"is-loading": j.loading,
+				"is-open": H.value
+			},
+			N.class
+		]), G = (e) => {
+			let t = e.parentElement;
+			for (; t && t !== document.body;) {
+				let { overflowY: e } = window.getComputedStyle(t);
+				if (e === "auto" || e === "scroll" || e === "hidden") return t;
+				t = t.parentElement;
+			}
+			return null;
+		}, ce = () => {
+			let e = I.value, t = L.value;
+			if (!e || !t) {
+				B.value = !1;
+				return;
+			}
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = G(e)?.getBoundingClientRect(), a = Math.min(i?.bottom ?? Infinity, window.innerHeight), o = Math.max(i?.top ?? 0, 0), s = a - n.bottom, c = n.top - o;
+			B.value = r.bottom > a && c > s;
+		}, le = i(() => N.style), ue = i(() => j.options.find((e) => e.value === j.modelValue)?.label ?? ""), K = i(() => j.options.filter((e) => !e.disabled)), q = () => {
+			if (j.disabled) return;
+			let e = j.options.findIndex((e) => e.value === j.modelValue);
+			z.value = e >= 0 ? e : 0, B.value = !1, U(!0), f(() => {
+				ce(), Z(z.value);
+			});
+		}, J = (e = !1) => {
+			U(!1), z.value = -1, e && f(() => I.value?.focus());
+		}, Y = () => {
+			H.value ? J() : q();
+		}, X = (e) => {
+			e.disabled || (M("update:modelValue", e.value), J(!0));
+		}, Z = (e) => {
+			let t = j.options[e];
+			t && R.value.get(t.value)?.focus();
+		}, de = (e, t) => {
+			e instanceof HTMLElement ? R.value.set(t, e) : R.value.delete(t);
+		}, Q = (e) => {
+			let t = z.value + e;
+			for (; t >= 0 && t < j.options.length;) {
+				if (!j.options[t].disabled) {
+					z.value = t, Z(t);
+					return;
+				}
+				t += e;
+			}
+		}, fe = (e) => {
+			if (!j.disabled) {
+				if (D(e) && H.value) {
+					e.preventDefault(), J();
+					return;
+				}
+				(E(e) || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), q());
+			}
+		}, pe = (e, t, n) => {
+			if (D(e)) {
+				e.preventDefault(), J(!0);
+				return;
+			}
+			if (E(e)) {
+				e.preventDefault(), X(t);
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), Q(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), Q(-1);
+					break;
+				case "Home":
+					e.preventDefault(), z.value = K.value.length > 0 ? j.options.indexOf(K.value[0]) : 0, Z(z.value);
+					break;
+				case "End":
+					e.preventDefault(), z.value = K.value.length > 0 ? j.options.indexOf(K.value[K.value.length - 1]) : j.options.length - 1, Z(z.value);
+					break;
+				default: break;
+			}
+		}, $ = (e) => {
+			if (!H.value) return;
+			let t = e.target;
+			t instanceof Node && (F.value?.contains(t) || J());
+		}, me = i(() => j.modelValue !== "" && j.modelValue !== null && j.modelValue !== void 0);
+		return C(H, (e) => {
+			e ? document.addEventListener("pointerdown", $) : document.removeEventListener("pointerdown", $);
+		}), h(() => {
+			document.removeEventListener("pointerdown", $);
+		}), (t, i) => (g(), s("div", {
+			ref_key: "rootRef",
+			ref: F,
+			class: p(W.value),
+			style: m(le.value),
+			"data-state": x(H) ? "open" : "closed"
+		}, [c("button", d({
+			ref_key: "triggerRef",
+			ref: I
+		}, V.value, {
+			type: "button",
+			class: "t-select__trigger",
+			disabled: u.disabled,
+			"aria-controls": x(H) ? x(P) : void 0,
+			"aria-haspopup": "listbox",
+			"aria-expanded": x(H),
+			"aria-invalid": u.invalid || void 0,
+			"aria-busy": u.loading || void 0,
+			onClick: Y,
+			onKeydown: fe
+		}), [
+			t.$slots.prefix ? (g(), s("span", ne, [v(t.$slots, "prefix")])) : o("", !0),
+			c("span", {
+				class: "t-select__value",
+				"data-placeholder": !me.value || void 0
+			}, y(ue.value || u.placeholder), 9, re),
+			u.loading ? (g(), a(e, {
+				key: 1,
+				size: "sm",
+				label: "Loading"
+			})) : (g(), s("svg", ie, [...i[0] ||= [c("polyline", { points: "4 6 8 10 12 6" }, null, -1)]]))
+		], 16, k), ee(r, { name: "t-fade" }, {
+			default: w(() => [x(H) && !u.disabled ? (g(), s("ul", {
+				key: 0,
+				id: x(P),
+				ref_key: "listboxRef",
+				ref: L,
+				role: "listbox",
+				class: "t-select__listbox",
+				"aria-label": typeof V.value["aria-label"] == "string" ? V.value["aria-label"] : void 0
+			}, [(g(!0), s(n, null, te(u.options, (e, t) => (g(), s("li", {
+				key: e.value,
+				ref_for: !0,
+				ref: (t) => de(t, e.value),
+				role: "option",
+				class: p(["t-select__option", {
+					"is-selected": e.value === u.modelValue,
+					"is-disabled": e.disabled,
+					"is-focused": t === z.value
+				}]),
+				"aria-selected": e.value === u.modelValue,
+				"aria-disabled": e.disabled || void 0,
+				tabindex: e.disabled ? -1 : 0,
+				onClick: (t) => X(e),
+				onKeydown: (n) => pe(n, e, t)
+			}, [l(y(e.label) + " ", 1), e.value === u.modelValue ? (g(), s("svg", se, [...i[1] ||= [c("polyline", { points: "3.5 8.5 6.5 11.5 12.5 4.5" }, null, -1)]])) : o("", !0)], 42, oe))), 128))], 8, ae)) : o("", !0)]),
+			_: 1
+		})], 14, O));
+	}
+});
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=TSelect.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TSelect.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, 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 TSelectOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | number;\n    options?: TSelectOption[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    loading?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n  }>(),\n  {\n    modelValue: '',\n    options: () => [],\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    loading: false,\n    invalid: false,\n    placeholder: '',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\nconst listboxId = createId('t-select');\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst listboxRef = ref<HTMLElement | null>(null);\nconst optionRefs = ref<Map<string | number, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst dropUp = ref(false);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, ...rest } = attrs;\n  return rest;\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-select',\n  `t-select--${props.size}`,\n  {\n    't-select--drop-up': dropUp.value,\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\n// Nearest ancestor that can clip the listbox (scroll container or hidden overflow).\nconst findClippingAncestor = (element: HTMLElement): HTMLElement | null => {\n  let parent = element.parentElement;\n  while (parent && parent !== document.body) {\n    const { overflowY } = window.getComputedStyle(parent);\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden') {\n      return parent;\n    }\n    parent = parent.parentElement;\n  }\n  return null;\n};\n\n// Flip the listbox above the trigger when its rendered position overflows the\n// nearest clipping ancestor (e.g. a modal body) or the viewport, and there is\n// more room above the trigger than below it. Measuring the rendered rect keeps\n// the decision in sync with the CSS offset (--tree-space-2) automatically.\nconst updateDropDirection = () => {\n  const trigger = triggerRef.value;\n  const listbox = listboxRef.value;\n  if (!trigger || !listbox) {\n    dropUp.value = false;\n    return;\n  }\n  const triggerRect = trigger.getBoundingClientRect();\n  const listboxRect = listbox.getBoundingClientRect();\n  const boundary = findClippingAncestor(trigger)?.getBoundingClientRect();\n  const bottomLimit = Math.min(boundary?.bottom ?? Infinity, window.innerHeight);\n  const topLimit = Math.max(boundary?.top ?? 0, 0);\n  const spaceBelow = bottomLimit - triggerRect.bottom;\n  const spaceAbove = triggerRect.top - topLimit;\n  dropUp.value = listboxRect.bottom > bottomLimit && spaceAbove > spaceBelow;\n};\n\nconst rootStyle = computed(() => attrs.style);\n\nconst selectedLabel = computed(() => {\n  const opt = props.options.find((o) => o.value === props.modelValue);\n  return opt?.label ?? '';\n});\n\nconst enabledOptions = computed(() =>\n  props.options.filter((o) => !o.disabled),\n);\n\nconst openDropdown = () => {\n  if (props.disabled) return;\n  const selectedIdx = props.options.findIndex((o) => o.value === props.modelValue);\n  focusedIndex.value = selectedIdx >= 0 ? selectedIdx : 0;\n  // Render downward first so the measurement always starts from the default position.\n  dropUp.value = false;\n  setValue(true);\n  nextTick(() => {\n    updateDropDirection();\n    focusOption(focusedIndex.value);\n  });\n};\n\nconst closeDropdown = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => triggerRef.value?.focus());\n  }\n};\n\nconst toggleDropdown = () => {\n  if (isOpen.value) {\n    closeDropdown();\n  } else {\n    openDropdown();\n  }\n};\n\nconst selectOption = (opt: TSelectOption) => {\n  if (opt.disabled) return;\n  emit('update:modelValue', opt.value);\n  closeDropdown(true);\n};\n\nconst focusOption = (index: number) => {\n  const opt = props.options[index];\n  if (!opt) return;\n  const el = optionRefs.value.get(opt.value);\n  el?.focus();\n};\n\nconst setOptionRef = (el: Element | null, value: string | number) => {\n  if (el instanceof HTMLElement) {\n    optionRefs.value.set(value, el);\n  } else {\n    optionRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.options.length) {\n    if (!props.options[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusOption(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) return;\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeDropdown();\n    return;\n  }\n\n  if (isActivationKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    openDropdown();\n  }\n};\n\nconst onOptionKeydown = (event: KeyboardEvent, opt: TSelectOption, _index: number) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeDropdown(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectOption(opt);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(1);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(-1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[0])\n        : 0;\n      focusOption(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledOptions.value.length > 0\n        ? props.options.indexOf(enabledOptions.value[enabledOptions.value.length - 1])\n        : props.options.length - 1;\n      focusOption(focusedIndex.value);\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeDropdown();\n};\n\nconst hasSelection = computed(() =>\n  props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined,\n);\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n  >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-select__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? listboxId : undefined\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      :aria-busy=\"loading || undefined\"\n      @click=\"toggleDropdown\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-select__slot t-select__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-select__value\"\n        :data-placeholder=\"!hasSelection ? true : undefined\"\n      >\n        {{ selectedLabel || placeholder }}\n      </span>\n      <TSpinner\n        v-if=\"loading\"\n        size=\"sm\"\n        label=\"Loading\"\n      />\n      <svg\n        v-else\n        class=\"t-select__chevron\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <polyline points=\"4 6 8 10 12 6\" />\n      </svg>\n    </button>\n    <transition name=\"t-fade\">\n      <ul\n        v-if=\"isOpen && !disabled\"\n        :id=\"listboxId\"\n        ref=\"listboxRef\"\n        role=\"listbox\"\n        class=\"t-select__listbox\"\n        :aria-label=\"typeof triggerAttrs['aria-label'] === 'string' ? triggerAttrs['aria-label'] : undefined\"\n      >\n        <li\n          v-for=\"(opt, index) in options\"\n          :key=\"opt.value\"\n          :ref=\"(el) => setOptionRef(el as Element | null, opt.value)\"\n          role=\"option\"\n          class=\"t-select__option\"\n          :class=\"{\n            'is-selected': opt.value === modelValue,\n            'is-disabled': opt.disabled,\n            'is-focused': index === focusedIndex,\n          }\"\n          :aria-selected=\"opt.value === modelValue\"\n          :aria-disabled=\"opt.disabled || undefined\"\n          :tabindex=\"opt.disabled ? -1 : 0\"\n          @click=\"selectOption(opt)\"\n          @keydown=\"onOptionKeydown($event, opt, index)\"\n        >\n          {{ opt.label }}\n          <svg\n            v-if=\"opt.value === modelValue\"\n            class=\"t-select__check\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"3.5 8.5 6.5 11.5 12.5 4.5\" />\n          </svg>\n        </li>\n      </ul>\n    </transition>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TSelectableList.cjs

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

package/dist/components/TSelectableList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSelectableList.cjs","names":[],"sources":["../../src/components/TSelectableList.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 TSelectableListItem {\n  label: string;\n  value: string;\n  description?: string;\n  meta?: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TSelectableListItem[];\n    size?: TSize;\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TSelectableListItem;\n    selected: boolean;\n    focused: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-selectable-list');\nconst itemRefs = ref<Map<string, HTMLButtonElement>>(new Map());\nconst internalValue = ref(props.defaultValue);\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\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-selectable-list',\n  `t-selectable-list--${props.size}`,\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) => selectedValue.value === value;\n\nconst setItemRef = (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    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: TSelectableListItem, focus = false) => {\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\n  if (focus) {\n    const index = props.items.findIndex((candidate) => candidate.value === item.value);\n\n    if (index >= 0) {\n      focusItem(index);\n    }\n  }\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      selectItem(props.items[firstIndex], true);\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      const resolvedIndex = props.items.length - 1 - lastIndex;\n      selectItem(props.items[resolvedIndex], true);\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      selectItem(props.items[nextIndex], true);\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      selectItem(props.items[previousIndex], true);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index], true);\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  <div\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"listbox\"\n    :aria-disabled=\"disabled || undefined\"\n  >\n    <template v-if=\"items.length > 0\">\n      <button\n        v-for=\"(item, index) in items\"\n        :id=\"`${baseId}-${item.value}`\"\n        :ref=\"(element) => setItemRef(element, item.value)\"\n        :key=\"item.value\"\n        type=\"button\"\n        class=\"t-selectable-list__item\"\n        :class=\"{\n          'is-selected': isSelected(item.value),\n          'is-disabled': disabled || item.disabled,\n        }\"\n        role=\"option\"\n        :aria-selected=\"isSelected(item.value)\"\n        :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n        :disabled=\"disabled || item.disabled\"\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        >\n          <span\n            class=\"t-selectable-list__indicator\"\n            aria-hidden=\"true\"\n          />\n\n          <span class=\"t-selectable-list__copy\">\n            <span class=\"t-selectable-list__label\">{{ item.label }}</span>\n            <span\n              v-if=\"item.description\"\n              class=\"t-selectable-list__description\"\n            >\n              {{ item.description }}\n            </span>\n          </span>\n\n          <span\n            v-if=\"item.meta\"\n            class=\"t-selectable-list__meta\"\n          >\n            {{ item.meta }}\n          </span>\n        </slot>\n      </button>\n    </template>\n\n    <div\n      v-else\n      class=\"t-selectable-list__empty\"\n    >\n      <slot name=\"empty\">\n        {{ emptyText }}\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TSelectableList.js

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

package/dist/components/TSelectableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TSelectableList.js","names":[],"sources":["../../src/components/TSelectableList.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 TSelectableListItem {\n  label: string;\n  value: string;\n  description?: string;\n  meta?: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    defaultValue?: string;\n    items?: TSelectableListItem[];\n    size?: TSize;\n    disabled?: boolean;\n    emptyText?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultValue: '',\n    items: () => [],\n    size: 'md',\n    disabled: false,\n    emptyText: 'No items available.',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n}>();\n\ndefineSlots<{\n  item?: (props: {\n    item: TSelectableListItem;\n    selected: boolean;\n    focused: boolean;\n  }) => unknown;\n  empty?: () => unknown;\n}>();\n\nconst attrs = useAttrs();\nconst baseId = createId('t-selectable-list');\nconst itemRefs = ref<Map<string, HTMLButtonElement>>(new Map());\nconst internalValue = ref(props.defaultValue);\n\nconst selectedValue = computed(() => props.modelValue ?? internalValue.value);\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-selectable-list',\n  `t-selectable-list--${props.size}`,\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) => selectedValue.value === value;\n\nconst setItemRef = (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    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: TSelectableListItem, focus = false) => {\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\n  if (focus) {\n    const index = props.items.findIndex((candidate) => candidate.value === item.value);\n\n    if (index >= 0) {\n      focusItem(index);\n    }\n  }\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      selectItem(props.items[firstIndex], true);\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      const resolvedIndex = props.items.length - 1 - lastIndex;\n      selectItem(props.items[resolvedIndex], true);\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      selectItem(props.items[nextIndex], true);\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      selectItem(props.items[previousIndex], true);\n    }\n\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(props.items[index], true);\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  <div\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"listbox\"\n    :aria-disabled=\"disabled || undefined\"\n  >\n    <template v-if=\"items.length > 0\">\n      <button\n        v-for=\"(item, index) in items\"\n        :id=\"`${baseId}-${item.value}`\"\n        :ref=\"(element) => setItemRef(element, item.value)\"\n        :key=\"item.value\"\n        type=\"button\"\n        class=\"t-selectable-list__item\"\n        :class=\"{\n          'is-selected': isSelected(item.value),\n          'is-disabled': disabled || item.disabled,\n        }\"\n        role=\"option\"\n        :aria-selected=\"isSelected(item.value)\"\n        :tabindex=\"disabled || item.disabled ? -1 : getTabIndex(index)\"\n        :disabled=\"disabled || item.disabled\"\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        >\n          <span\n            class=\"t-selectable-list__indicator\"\n            aria-hidden=\"true\"\n          />\n\n          <span class=\"t-selectable-list__copy\">\n            <span class=\"t-selectable-list__label\">{{ item.label }}</span>\n            <span\n              v-if=\"item.description\"\n              class=\"t-selectable-list__description\"\n            >\n              {{ item.description }}\n            </span>\n          </span>\n\n          <span\n            v-if=\"item.meta\"\n            class=\"t-selectable-list__meta\"\n          >\n            {{ item.meta }}\n          </span>\n        </slot>\n      </button>\n    </template>\n\n    <div\n      v-else\n      class=\"t-selectable-list__empty\"\n    >\n      <slot name=\"empty\">\n        {{ emptyText }}\n      </slot>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TSelectableList.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue"),t=require("@treeui/utils");var n=[`aria-disabled`],r=[`id`,`aria-selected`,`tabindex`,`disabled`,`onClick`,`onKeydown`,`onFocus`],i={class:`t-selectable-list__copy`},a={class:`t-selectable-list__label`},o={key:0,class:`t-selectable-list__description`},s={key:0,class:`t-selectable-list__meta`},c={key:1,class:`t-selectable-list__empty`},l=(0,e.defineComponent)({inheritAttrs:!1,__name:`TSelectableList`,props:{modelValue:{default:void 0},defaultValue:{default:``},items:{default:()=>[]},size:{default:`md`},disabled:{type:Boolean,default:!1},emptyText:{default:`No items available.`}},emits:[`update:modelValue`],setup(l,{emit:u}){let d=l,f=u,p=(0,e.useAttrs)(),m=(0,t.createId)(`t-selectable-list`),h=(0,e.ref)(new Map),g=(0,e.ref)(d.defaultValue),_=(0,e.computed)(()=>d.modelValue??g.value),v=()=>{let e=d.items.findIndex(e=>e.value===_.value&&!e.disabled);return e>=0?e:d.items.findIndex(e=>!e.disabled)},y=(0,e.ref)(v()),b=(0,e.computed)(()=>[`t-selectable-list`,`t-selectable-list--${d.size}`,{"is-disabled":d.disabled},p.class]),x=(0,e.computed)(()=>p.style),S=(0,e.computed)(()=>{let{class:e,style:t,...n}=p;return n}),C=e=>_.value===e,w=(e,t)=>{let n=e instanceof HTMLButtonElement?e:e&&`$el`in e&&e.$el instanceof HTMLButtonElement?e.$el:null;n instanceof HTMLButtonElement?h.value.set(t,n):h.value.delete(t)},T=t=>{let n=d.items[t];n&&(y.value=t,(0,e.nextTick)(()=>h.value.get(n.value)?.focus()))},E=(e,t=!1)=>{if(!(d.disabled||e.disabled)&&(d.modelValue===void 0&&(g.value=e.value),f(`update:modelValue`,e.value),t)){let t=d.items.findIndex(t=>t.value===e.value);t>=0&&T(t)}},D=(e,n)=>{if(!d.disabled){if(e.key===`Home`){e.preventDefault();let t=d.items.findIndex(e=>!e.disabled);t>=0&&E(d.items[t],!0);return}if(e.key===`End`){e.preventDefault();let t=[...d.items].reverse().findIndex(e=>!e.disabled);if(t>=0){let e=d.items.length-1-t;E(d.items[e],!0)}return}if(e.key===`ArrowDown`||e.key===`ArrowRight`){e.preventDefault();let r=(0,t.getNextEnabledIndex)(n,d.items,1);r>=0&&E(d.items[r],!0);return}if(e.key===`ArrowUp`||e.key===`ArrowLeft`){e.preventDefault();let r=(0,t.getNextEnabledIndex)(n,d.items,-1);r>=0&&E(d.items[r],!0);return}(0,t.isActivationKey)(e)&&(e.preventDefault(),E(d.items[n],!0))}},O=e=>y.value===e?0:-1;return(0,e.watch)(()=>[d.items,d.modelValue],()=>{let e=v();y.value=e>=0?e:-1},{deep:!0}),(t,u)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.mergeProps)(S.value,{class:b.value,style:x.value,role:`listbox`,"aria-disabled":l.disabled||void 0}),[l.items.length>0?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(l.items,(n,c)=>((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{id:`${(0,e.unref)(m)}-${n.value}`,ref_for:!0,ref:e=>w(e,n.value),key:n.value,type:`button`,class:(0,e.normalizeClass)([`t-selectable-list__item`,{"is-selected":C(n.value),"is-disabled":l.disabled||n.disabled}]),role:`option`,"aria-selected":C(n.value),tabindex:l.disabled||n.disabled?-1:O(c),disabled:l.disabled||n.disabled,onClick:e=>E(n),onKeydown:e=>D(e,c),onFocus:e=>y.value=c},[(0,e.renderSlot)(t.$slots,`item`,{item:n,selected:C(n.value),focused:y.value===c},()=>[u[0]||=(0,e.createElementVNode)(`span`,{class:`t-selectable-list__indicator`,"aria-hidden":`true`},null,-1),(0,e.createElementVNode)(`span`,i,[(0,e.createElementVNode)(`span`,a,(0,e.toDisplayString)(n.label),1),n.description?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,o,(0,e.toDisplayString)(n.description),1)):(0,e.createCommentVNode)(``,!0)]),n.meta?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,s,(0,e.toDisplayString)(n.meta),1)):(0,e.createCommentVNode)(``,!0)])],42,r))),128)):((0,e.openBlock)(),(0,e.createElementBlock)(`div`,c,[(0,e.renderSlot)(t.$slots,`empty`,{},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.emptyText),1)])]))],16,n))}});exports.default=l;
+//# sourceMappingURL=TSelectableList.vue_vue_type_script_setup_true_lang.cjs.map