@treeui/vue 0.8.0 → 0.10.0

package/dist/components/TConfirmDialog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,145 @@
+import e from "./TButton.js";
+import { useControllableOpen as t } from "../composables/useControllableOpen.js";
+import n from "./TModal.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, toDisplayString as g, toRef as _, unref as v, useAttrs as y, useSlots as b, withCtx as x } from "vue";
+//#region src/components/TConfirmDialog.vue?vue&type=script&setup=true&lang.ts
+var S = {
+	key: 0,
+	class: "t-confirm-dialog__icon",
+	"aria-hidden": "true"
+}, C = {
+	key: 1,
+	class: "t-confirm-dialog__body"
+}, w = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "TConfirmDialog",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "sm" },
+		title: { default: "" },
+		description: { default: "" },
+		confirmLabel: { default: "Confirm" },
+		cancelLabel: { default: "Cancel" },
+		confirmVariant: { default: "danger" },
+		confirmDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		cancelDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnOverlay: {
+			type: Boolean,
+			default: !1
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: !1
+		},
+		closeLabel: { default: "Close dialog" },
+		closeOnConfirm: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnCancel: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"confirm",
+		"cancel",
+		"update:open",
+		"open-change"
+	],
+	setup(d, { emit: w }) {
+		let T = b(), E = d, D = w, O = y(), { value: k, setValue: A } = t(_(E, "open"), E.defaultOpen, (e) => {
+			D("update:open", e), D("open-change", e);
+		}), j = r(() => ["t-confirm-dialog", { "t-confirm-dialog--with-icon": !!T.icon }]), M = r(() => !!T.default), N = () => {
+			A(!1);
+		}, P = (e) => {
+			A(e);
+		}, F = () => {
+			E.cancelDisabled || (D("cancel"), E.closeOnCancel && N());
+		}, I = () => {
+			E.confirmDisabled || E.loading || (D("confirm"), E.closeOnConfirm && N());
+		};
+		return (t, r) => (m(), i(n, f(v(O), {
+			open: v(k),
+			disabled: d.disabled,
+			size: d.size,
+			title: d.title,
+			description: d.description,
+			"close-on-escape": d.closeOnEscape,
+			"close-on-overlay": d.closeOnOverlay,
+			"show-close-button": d.showCloseButton,
+			"close-label": d.closeLabel,
+			"onUpdate:open": P
+		}), c({
+			content: x(() => [s("div", { class: p(j.value) }, [t.$slots.icon ? (m(), o("div", S, [h(t.$slots, "icon")])) : a("", !0), M.value ? (m(), o("div", C, [h(t.$slots, "default")])) : a("", !0)], 2)]),
+			footer: x(() => [h(t.$slots, "actions", {
+				confirm: I,
+				cancel: F,
+				loading: d.loading
+			}, () => [u(e, {
+				variant: "ghost",
+				disabled: d.cancelDisabled,
+				onClick: F
+			}, {
+				default: x(() => [l(g(d.cancelLabel), 1)]),
+				_: 1
+			}, 8, ["disabled"]), u(e, {
+				variant: d.confirmVariant,
+				loading: d.loading,
+				disabled: d.confirmDisabled,
+				onClick: I
+			}, {
+				default: x(() => [l(g(d.confirmLabel), 1)]),
+				_: 1
+			}, 8, [
+				"variant",
+				"loading",
+				"disabled"
+			])])]),
+			_: 2
+		}, [t.$slots.trigger ? {
+			name: "trigger",
+			fn: x(() => [h(t.$slots, "trigger")]),
+			key: "0"
+		} : void 0]), 1040, [
+			"open",
+			"disabled",
+			"size",
+			"title",
+			"description",
+			"close-on-escape",
+			"close-on-overlay",
+			"show-close-button",
+			"close-label"
+		]));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=TConfirmDialog.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TConfirmDialog.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../src/components/TConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, useAttrs } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize, TVariant } from '../types/contracts';\nimport TButton from './TButton.vue';\nimport TModal from './TModal.vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst slots = defineSlots<{\n  trigger?: () => unknown;\n  icon?: () => unknown;\n  default?: () => unknown;\n  actions?: (props: {\n    confirm: () => void;\n    cancel: () => void;\n    loading: boolean;\n  }) => unknown;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n    title?: string;\n    description?: string;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    confirmVariant?: TVariant;\n    confirmDisabled?: boolean;\n    cancelDisabled?: boolean;\n    loading?: boolean;\n    closeOnEscape?: boolean;\n    closeOnOverlay?: boolean;\n    showCloseButton?: boolean;\n    closeLabel?: string;\n    closeOnConfirm?: boolean;\n    closeOnCancel?: boolean;\n  }>(),\n  {\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'sm',\n    title: '',\n    description: '',\n    confirmLabel: 'Confirm',\n    cancelLabel: 'Cancel',\n    confirmVariant: 'danger',\n    confirmDisabled: false,\n    cancelDisabled: false,\n    loading: false,\n    closeOnEscape: true,\n    closeOnOverlay: false,\n    showCloseButton: false,\n    closeLabel: 'Close dialog',\n    closeOnConfirm: true,\n    closeOnCancel: true,\n  },\n);\n\nconst emit = defineEmits<{\n  confirm: [];\n  cancel: [];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\nconst attrs = useAttrs();\n\nconst { value: isOpen, setValue } = useControllableOpen(\n  toRef(props, 'open'),\n  props.defaultOpen,\n  (value) => {\n    emit('update:open', value);\n    emit('open-change', value);\n  },\n);\n\nconst dialogClasses = computed(() => [\n  't-confirm-dialog',\n  {\n    't-confirm-dialog--with-icon': Boolean(slots.icon),\n  },\n]);\n\nconst hasBodyContent = computed(() => Boolean(slots.default));\n\nconst closeDialog = () => {\n  setValue(false);\n};\n\nconst syncOpen = (value: boolean) => {\n  setValue(value);\n};\n\nconst handleCancel = () => {\n  if (props.cancelDisabled) {\n    return;\n  }\n\n  emit('cancel');\n\n  if (props.closeOnCancel) {\n    closeDialog();\n  }\n};\n\nconst handleConfirm = () => {\n  if (props.confirmDisabled || props.loading) {\n    return;\n  }\n\n  emit('confirm');\n\n  if (props.closeOnConfirm) {\n    closeDialog();\n  }\n};\n</script>\n\n<template>\n  <TModal\n    v-bind=\"attrs\"\n    :open=\"isOpen\"\n    :disabled=\"disabled\"\n    :size=\"size\"\n    :title=\"title\"\n    :description=\"description\"\n    :close-on-escape=\"closeOnEscape\"\n    :close-on-overlay=\"closeOnOverlay\"\n    :show-close-button=\"showCloseButton\"\n    :close-label=\"closeLabel\"\n    @update:open=\"syncOpen\"\n  >\n    <template\n      v-if=\"$slots.trigger\"\n      #trigger\n    >\n      <slot name=\"trigger\" />\n    </template>\n\n    <template #content>\n      <div :class=\"dialogClasses\">\n        <div\n          v-if=\"$slots.icon\"\n          class=\"t-confirm-dialog__icon\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"icon\" />\n        </div>\n\n        <div\n          v-if=\"hasBodyContent\"\n          class=\"t-confirm-dialog__body\"\n        >\n          <slot />\n        </div>\n      </div>\n    </template>\n\n    <template #footer>\n      <slot\n        name=\"actions\"\n        :confirm=\"handleConfirm\"\n        :cancel=\"handleCancel\"\n        :loading=\"loading\"\n      >\n        <TButton\n          variant=\"ghost\"\n          :disabled=\"cancelDisabled\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelLabel }}\n        </TButton>\n        <TButton\n          :variant=\"confirmVariant\"\n          :loading=\"loading\"\n          :disabled=\"confirmDisabled\"\n          @click=\"handleConfirm\"\n        >\n          {{ confirmLabel }}\n        </TButton>\n      </slot>\n    </template>\n  </TModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,EAAA,GAWR,IAAQ,GA2CR,IAAO,GAOP,IAAQ,EAAS,GAEjB,EAAE,OAAO,GAAQ,gBAAa,EAClC,EAAM,GAAO,MAAM,GACnB,EAAM,cACL,MAAU;GAET,AADA,EAAK,eAAe,CAAK,GACzB,EAAK,eAAe,CAAK;EAC3B,CACF,GAEM,IAAgB,QAAe,CACnC,oBACA,EACE,+BAA+B,EAAQ,EAAM,KAC/C,CACF,CAAC,GAEK,IAAiB,QAAe,EAAQ,EAAM,OAAQ,GAEtD,UAAoB;GACxB,EAAS,EAAK;EAChB,GAEM,KAAY,MAAmB;GACnC,EAAS,CAAK;EAChB,GAEM,UAAqB;GACrB,EAAM,mBAIV,EAAK,QAAQ,GAET,EAAM,iBACR,EAAY;EAEhB,GAEM,UAAsB;GACtB,EAAM,mBAAmB,EAAM,YAInC,EAAK,SAAS,GAEV,EAAM,kBACR,EAAY;EAEhB;yBAIE,EA+DS,GA/DT,EACU,EA8DD,CAAA,GA9DM;GACZ,MAAM,EAAA,CAAA;GACN,UAAU,EAAA;GACV,MAAM,EAAA;GACN,OAAO,EAAA;GACP,aAAa,EAAA;GACb,mBAAiB,EAAA;GACjB,oBAAkB,EAAA;GAClB,qBAAmB,EAAA;GACnB,eAAa,EAAA;GACb,iBAAa;;GASH,SAAO,QAgBV,CAfN,EAeM,OAAA,EAfA,OAAK,EAAE,EAAA,KAAa,EAAA,GAAA,CAEhBA,EAAAA,OAAO,QAAA,EAAA,GADf,EAMM,OANN,GAMM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAId,EAAA,SAAA,EAAA,GADR,EAKM,OALN,GAKM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,CAAA,CAAA,CAAA;GAKH,QAAM,QAsBR,CArBP,EAqBO,EAAA,QAAA,WAAA;IAnBJ,SAAS;IACT,QAAQ;IACR,SAAS,EAAA;YAiBL,CAfL,EAMU,GAAA;IALR,SAAQ;IACP,UAAU,EAAA;IACV,SAAO;;qBAES,CAAA,EAAA,EAAd,EAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;wBAEhB,EAOU,GAAA;IANP,SAAS,EAAA;IACT,SAAS,EAAA;IACT,UAAU,EAAA;IACV,SAAO;;qBAEU,CAAA,EAAA,EAAf,EAAA,YAAY,GAAA,CAAA,CAAA,CAAA;;;;;;;;MA7CbA,EAAAA,OAAO,UAAA;SACZ;eAEsB,CAAvB,EAAuB,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/TContainer.cjs

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

package/dist/components/TContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TContainer.cjs","names":[],"sources":["../../src/components/TContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeContainerSizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport type TContainerSize = (typeof _treeContainerSizes)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TContainerSize;\n    padded?: boolean;\n    centered?: boolean;\n  }>(),\n  {\n    as: 'div',\n    size: 'lg',\n    padded: true,\n    centered: true,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-container',\n  `t-container--${props.size}`,\n  {\n    'is-padded': props.padded,\n    'is-centered': props.centered,\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</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TContainer.js

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

package/dist/components/TContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TContainer.js","names":[],"sources":["../../src/components/TContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeContainerSizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport type TContainerSize = (typeof _treeContainerSizes)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TContainerSize;\n    padded?: boolean;\n    centered?: boolean;\n  }>(),\n  {\n    as: 'div',\n    size: 'lg',\n    padded: true,\n    centered: true,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-container',\n  `t-container--${props.size}`,\n  {\n    'is-padded': props.padded,\n    'is-centered': props.centered,\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</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/TContainer.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+let e=require("vue");var t=(0,e.defineComponent)({inheritAttrs:!1,__name:`TContainer`,props:{as:{default:`div`},size:{default:`lg`},padded:{type:Boolean,default:!0},centered:{type:Boolean,default:!0}},setup(t){let n=t,r=(0,e.useAttrs)(),i=(0,e.computed)(()=>[`t-container`,`t-container--${n.size}`,{"is-padded":n.padded,"is-centered":n.centered},r.class]),a=(0,e.computed)(()=>r.style),o=(0,e.computed)(()=>{let{class:e,style:t,...n}=r;return n});return(n,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.as),(0,e.mergeProps)(o.value,{class:i.value,style:a.value}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`default`)]),_:3},16,[`class`,`style`]))}});exports.default=t;
+//# sourceMappingURL=TContainer.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TContainer.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeContainerSizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport type TContainerSize = (typeof _treeContainerSizes)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TContainerSize;\n    padded?: boolean;\n    centered?: boolean;\n  }>(),\n  {\n    as: 'div',\n    size: 'lg',\n    padded: true,\n    centered: true,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-container',\n  `t-container--${props.size}`,\n  {\n    'is-padded': props.padded,\n    'is-centered': props.centered,\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</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":"kNAWA,IAAM,EAAQ,EAeR,GAAA,EAAA,EAAA,SAAA,CAAiB,EAEjB,GAAA,EAAA,EAAA,SAAA,KAA6B,CACjC,cACA,gBAAgB,EAAM,OACtB,CACE,YAAa,EAAM,OACnB,cAAe,EAAM,QACvB,EACA,EAAM,KACR,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,KAAK,EAEtC,GAAA,EAAA,EAAA,SAAA,KAA2B,CAC/B,GAAM,CAAE,MAAO,EAAQ,MAAO,EAAQ,GAAG,GAAS,EAClD,OAAO,CACT,CAAC,kFAKQ,EAAA,EAAE,GAAA,EAAA,EAAA,WAAA,CACC,EAKE,MALO,CAChB,MAAO,EAAA,MACP,MAAO,EAAA,mCAEA,EAAA,EAAA,EAAA,WAAA,CAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}

package/dist/components/TContainer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, useAttrs as s, withCtx as c } from "vue";
+//#region src/components/TContainer.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "TContainer",
+	props: {
+		as: { default: "div" },
+		size: { default: "lg" },
+		padded: {
+			type: Boolean,
+			default: !0
+		},
+		centered: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(n) {
+		let l = n, u = s(), d = e(() => [
+			"t-container",
+			`t-container--${l.size}`,
+			{
+				"is-padded": l.padded,
+				"is-centered": l.centered
+			},
+			u.class
+		]), f = e(() => u.style), p = e(() => {
+			let { class: e, style: t, ...n } = u;
+			return n;
+		});
+		return (e, s) => (i(), t(o(n.as), r(p.value, {
+			class: d.value,
+			style: f.value
+		}), {
+			default: c(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16, ["class", "style"]));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=TContainer.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TContainer.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst _treeContainerSizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport type TContainerSize = (typeof _treeContainerSizes)[number];\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TContainerSize;\n    padded?: boolean;\n    centered?: boolean;\n  }>(),\n  {\n    as: 'div',\n    size: 'lg',\n    padded: true,\n    centered: true,\n  },\n);\n\nconst attrs = useAttrs();\n\nconst rootClasses = computed(() => [\n  't-container',\n  `t-container--${props.size}`,\n  {\n    'is-padded': props.padded,\n    'is-centered': props.centered,\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</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"rootAttrs\"\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,GAeR,IAAQ,EAAS,GAEjB,IAAc,QAAe;GACjC;GACA,gBAAgB,EAAM;GACtB;IACE,aAAa,EAAM;IACnB,eAAe,EAAM;GACvB;GACA,EAAM;EACR,CAAC,GAEK,IAAY,QAAe,EAAM,KAAK,GAEtC,IAAY,QAAe;GAC/B,IAAM,EAAE,OAAO,GAAQ,OAAO,GAAQ,GAAG,MAAS;GAClD,OAAO;EACT,CAAC;yBAIC,EAOY,EANL,EAAA,EAAE,GADT,EAEU,EAKE,OALO;GAChB,OAAO,EAAA;GACP,OAAO,EAAA;;oBAEA,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/TContextMenu.cjs

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

package/dist/components/TContextMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TContextMenu.cjs","names":[],"sources":["../../src/components/TContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\nexport interface TContextMenuItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TContextMenuItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  default(): unknown;\n  item(props: { item: TContextMenuItem; index: number }): unknown;\n}>();\n\nconst menuId = createId('t-context-menu');\nconst rootRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst menuPosition = ref({ x: 0, y: 0 });\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-context-menu',\n  `t-context-menu--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n]);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = (x: number, y: number) => {\n  if (props.disabled) return;\n  menuPosition.value = { x, y };\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => rootRef.value?.focus());\n  }\n};\n\nconst selectItem = (item: TContextMenuItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onContextMenu = (event: MouseEvent) => {\n  if (props.disabled) return;\n  event.preventDefault();\n  openMenu(event.clientX, event.clientY);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TContextMenuItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\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 = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(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  const menuEl = document.getElementById(menuId);\n  if (menuEl?.contains(target)) return;\n  closeMenu();\n};\n\nconst onDocumentContextMenu = (event: MouseEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    document.addEventListener('contextmenu', onDocumentContextMenu);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n    document.removeEventListener('contextmenu', onDocumentContextMenu);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n  document.removeEventListener('contextmenu', onDocumentContextMenu);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @contextmenu=\"onContextMenu\"\n  >\n    <slot />\n    <Teleport to=\"body\">\n      <transition name=\"t-fade\">\n        <ul\n          v-if=\"isOpen && !disabled\"\n          :id=\"menuId\"\n          role=\"menu\"\n          class=\"t-context-menu__menu\"\n          :class=\"`t-context-menu--${size}`\"\n          :style=\"{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }\"\n          aria-label=\"Context menu\"\n        >\n          <li\n            v-for=\"(item, index) in items\"\n            :key=\"item.value\"\n            :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n            role=\"menuitem\"\n            class=\"t-context-menu__item\"\n            :class=\"{\n              'is-disabled': item.disabled,\n              'is-focused': index === focusedIndex,\n            }\"\n            :aria-disabled=\"item.disabled || undefined\"\n            :tabindex=\"item.disabled ? -1 : 0\"\n            @click=\"selectItem(item)\"\n            @keydown=\"onItemKeydown($event, item)\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n              :index=\"index\"\n            >\n              {{ item.label }}\n            </slot>\n          </li>\n        </ul>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TContextMenu.js

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

package/dist/components/TContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TContextMenu.js","names":[],"sources":["../../src/components/TContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\nexport interface TContextMenuItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TContextMenuItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  default(): unknown;\n  item(props: { item: TContextMenuItem; index: number }): unknown;\n}>();\n\nconst menuId = createId('t-context-menu');\nconst rootRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst menuPosition = ref({ x: 0, y: 0 });\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-context-menu',\n  `t-context-menu--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n]);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = (x: number, y: number) => {\n  if (props.disabled) return;\n  menuPosition.value = { x, y };\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => rootRef.value?.focus());\n  }\n};\n\nconst selectItem = (item: TContextMenuItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onContextMenu = (event: MouseEvent) => {\n  if (props.disabled) return;\n  event.preventDefault();\n  openMenu(event.clientX, event.clientY);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TContextMenuItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\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 = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(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  const menuEl = document.getElementById(menuId);\n  if (menuEl?.contains(target)) return;\n  closeMenu();\n};\n\nconst onDocumentContextMenu = (event: MouseEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    document.addEventListener('contextmenu', onDocumentContextMenu);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n    document.removeEventListener('contextmenu', onDocumentContextMenu);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n  document.removeEventListener('contextmenu', onDocumentContextMenu);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @contextmenu=\"onContextMenu\"\n  >\n    <slot />\n    <Teleport to=\"body\">\n      <transition name=\"t-fade\">\n        <ul\n          v-if=\"isOpen && !disabled\"\n          :id=\"menuId\"\n          role=\"menu\"\n          class=\"t-context-menu__menu\"\n          :class=\"`t-context-menu--${size}`\"\n          :style=\"{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }\"\n          aria-label=\"Context menu\"\n        >\n          <li\n            v-for=\"(item, index) in items\"\n            :key=\"item.value\"\n            :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n            role=\"menuitem\"\n            class=\"t-context-menu__item\"\n            :class=\"{\n              'is-disabled': item.disabled,\n              'is-focused': index === focusedIndex,\n            }\"\n            :aria-disabled=\"item.disabled || undefined\"\n            :tabindex=\"item.disabled ? -1 : 0\"\n            @click=\"selectItem(item)\"\n            @keydown=\"onItemKeydown($event, item)\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n              :index=\"index\"\n            >\n              {{ item.label }}\n            </slot>\n          </li>\n        </ul>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TContextMenu.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils");var r=[`data-state`],i=[`id`],a=[`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],o=(0,t.defineComponent)({__name:`TContextMenu`,props:{items:{default:()=>[]},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{default:`md`}},emits:[`select`,`update:open`,`open-change`],setup(o,{emit:s}){let c=o,l=s,u=(0,n.createId)(`t-context-menu`),d=(0,t.ref)(null),f=(0,t.ref)(new Map),p=(0,t.ref)(-1),m=(0,t.ref)({x:0,y:0}),{value:h,setValue:g}=e.useControllableOpen((0,t.toRef)(c,`open`),c.defaultOpen,e=>{l(`update:open`,e),l(`open-change`,e)}),_=(0,t.computed)(()=>[`t-context-menu`,`t-context-menu--${c.size}`,{"is-disabled":c.disabled,"is-open":h.value}]),v=(0,t.computed)(()=>c.items.filter(e=>!e.disabled)),y=(e,n)=>{c.disabled||(m.value={x:e,y:n},p.value=v.value.length>0?c.items.indexOf(v.value[0]):0,g(!0),(0,t.nextTick)(()=>S(p.value)))},b=(e=!1)=>{g(!1),p.value=-1,e&&(0,t.nextTick)(()=>d.value?.focus())},x=e=>{e.disabled||(l(`select`,e.value),b(!0))},S=e=>{let t=c.items[e];t&&f.value.get(t.value)?.focus()},C=(e,t)=>{e instanceof HTMLElement?f.value.set(t,e):f.value.delete(t)},w=e=>{let t=p.value+e;for(;t>=0&&t<c.items.length;){if(!c.items[t].disabled){p.value=t,S(t);return}t+=e}},T=e=>{c.disabled||(e.preventDefault(),y(e.clientX,e.clientY))},E=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),b(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),x(t);return}switch(e.key){case`ArrowDown`:e.preventDefault(),w(1);break;case`ArrowUp`:e.preventDefault(),w(-1);break;case`Home`:e.preventDefault(),p.value=v.value.length>0?c.items.indexOf(v.value[0]):0,S(p.value);break;case`End`:e.preventDefault(),p.value=v.value.length>0?c.items.indexOf(v.value[v.value.length-1]):c.items.length-1,S(p.value);break;default:break}},D=e=>{if(!h.value)return;let t=e.target;t instanceof Node&&(document.getElementById(u)?.contains(t)||b())},O=e=>{if(!h.value)return;let t=e.target;t instanceof Node&&(d.value?.contains(t)||b())};return(0,t.watch)(h,e=>{e?(document.addEventListener(`pointerdown`,D),document.addEventListener(`contextmenu`,O)):(document.removeEventListener(`pointerdown`,D),document.removeEventListener(`contextmenu`,O))}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,D),document.removeEventListener(`contextmenu`,O)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:d,class:(0,t.normalizeClass)(_.value),"data-state":(0,t.unref)(h)?`open`:`closed`,onContextmenu:T},[(0,t.renderSlot)(e.$slots,`default`),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(h)&&!o.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{key:0,id:(0,t.unref)(u),role:`menu`,class:(0,t.normalizeClass)([`t-context-menu__menu`,`t-context-menu--${o.size}`]),style:(0,t.normalizeStyle)({top:`${m.value.y}px`,left:`${m.value.x}px`}),"aria-label":`Context menu`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n.value,ref_for:!0,ref:e=>C(e,n.value),role:`menuitem`,class:(0,t.normalizeClass)([`t-context-menu__item`,{"is-disabled":n.disabled,"is-focused":r===p.value}]),"aria-disabled":n.disabled||void 0,tabindex:n.disabled?-1:0,onClick:e=>x(n),onKeydown:e=>E(e,n)},[(0,t.renderSlot)(e.$slots,`item`,{item:n,index:r},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(n.label),1)])],42,a))),128))],14,i)):(0,t.createCommentVNode)(``,!0)]),_:3})]))],42,r))}});exports.default=o;
+//# sourceMappingURL=TContextMenu.vue_vue_type_script_setup_true_lang.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TContextMenu.vue_vue_type_script_setup_true_lang.cjs","names":[],"sources":["../../src/components/TContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\nexport interface TContextMenuItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TContextMenuItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  default(): unknown;\n  item(props: { item: TContextMenuItem; index: number }): unknown;\n}>();\n\nconst menuId = createId('t-context-menu');\nconst rootRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst menuPosition = ref({ x: 0, y: 0 });\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-context-menu',\n  `t-context-menu--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n]);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = (x: number, y: number) => {\n  if (props.disabled) return;\n  menuPosition.value = { x, y };\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => rootRef.value?.focus());\n  }\n};\n\nconst selectItem = (item: TContextMenuItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onContextMenu = (event: MouseEvent) => {\n  if (props.disabled) return;\n  event.preventDefault();\n  openMenu(event.clientX, event.clientY);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TContextMenuItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\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 = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(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  const menuEl = document.getElementById(menuId);\n  if (menuEl?.contains(target)) return;\n  closeMenu();\n};\n\nconst onDocumentContextMenu = (event: MouseEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    document.addEventListener('contextmenu', onDocumentContextMenu);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n    document.removeEventListener('contextmenu', onDocumentContextMenu);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n  document.removeEventListener('contextmenu', onDocumentContextMenu);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @contextmenu=\"onContextMenu\"\n  >\n    <slot />\n    <Teleport to=\"body\">\n      <transition name=\"t-fade\">\n        <ul\n          v-if=\"isOpen && !disabled\"\n          :id=\"menuId\"\n          role=\"menu\"\n          class=\"t-context-menu__menu\"\n          :class=\"`t-context-menu--${size}`\"\n          :style=\"{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }\"\n          aria-label=\"Context menu\"\n        >\n          <li\n            v-for=\"(item, index) in items\"\n            :key=\"item.value\"\n            :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n            role=\"menuitem\"\n            class=\"t-context-menu__item\"\n            :class=\"{\n              'is-disabled': item.disabled,\n              'is-focused': index === focusedIndex,\n            }\"\n            :aria-disabled=\"item.disabled || undefined\"\n            :tabindex=\"item.disabled ? -1 : 0\"\n            @click=\"selectItem(item)\"\n            @keydown=\"onItemKeydown($event, item)\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n              :index=\"index\"\n            >\n              {{ item.label }}\n            </slot>\n          </li>\n        </ul>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,149 @@
+import { useControllableOpen as e } from "../composables/useControllableOpen.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, toRef as b, unref as x, watch as S, withCtx as C } from "vue";
+import { createId as w, isActivationKey as T, isEscapeKey as E } from "@treeui/utils";
+//#region src/components/TContextMenu.vue?vue&type=script&setup=true&lang.ts
+var D = ["data-state"], O = ["id"], k = [
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], A = /*@__PURE__*/ u({
+	__name: "TContextMenu",
+	props: {
+		items: { default: () => [] },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "md" }
+	},
+	emits: [
+		"select",
+		"update:open",
+		"open-change"
+	],
+	setup(u, { emit: A }) {
+		let j = u, M = A, N = w("t-context-menu"), P = g(null), F = g(/* @__PURE__ */ new Map()), I = g(-1), L = g({
+			x: 0,
+			y: 0
+		}), { value: R, setValue: z } = e(b(j, "open"), j.defaultOpen, (e) => {
+			M("update:open", e), M("open-change", e);
+		}), B = i(() => [
+			"t-context-menu",
+			`t-context-menu--${j.size}`,
+			{
+				"is-disabled": j.disabled,
+				"is-open": R.value
+			}
+		]), V = i(() => j.items.filter((e) => !e.disabled)), H = (e, t) => {
+			j.disabled || (L.value = {
+				x: e,
+				y: t
+			}, I.value = V.value.length > 0 ? j.items.indexOf(V.value[0]) : 0, z(!0), d(() => G(I.value)));
+		}, U = (e = !1) => {
+			z(!1), I.value = -1, e && d(() => P.value?.focus());
+		}, W = (e) => {
+			e.disabled || (M("select", e.value), U(!0));
+		}, G = (e) => {
+			let t = j.items[e];
+			t && F.value.get(t.value)?.focus();
+		}, K = (e, t) => {
+			e instanceof HTMLElement ? F.value.set(t, e) : F.value.delete(t);
+		}, q = (e) => {
+			let t = I.value + e;
+			for (; t >= 0 && t < j.items.length;) {
+				if (!j.items[t].disabled) {
+					I.value = t, G(t);
+					return;
+				}
+				t += e;
+			}
+		}, J = (e) => {
+			j.disabled || (e.preventDefault(), H(e.clientX, e.clientY));
+		}, Y = (e, t) => {
+			if (E(e)) {
+				e.preventDefault(), U(!0);
+				return;
+			}
+			if (T(e)) {
+				e.preventDefault(), W(t);
+				return;
+			}
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), q(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), q(-1);
+					break;
+				case "Home":
+					e.preventDefault(), I.value = V.value.length > 0 ? j.items.indexOf(V.value[0]) : 0, G(I.value);
+					break;
+				case "End":
+					e.preventDefault(), I.value = V.value.length > 0 ? j.items.indexOf(V.value[V.value.length - 1]) : j.items.length - 1, G(I.value);
+					break;
+				default: break;
+			}
+		}, X = (e) => {
+			if (!R.value) return;
+			let t = e.target;
+			t instanceof Node && (document.getElementById(N)?.contains(t) || U());
+		}, Z = (e) => {
+			if (!R.value) return;
+			let t = e.target;
+			t instanceof Node && (P.value?.contains(t) || U());
+		};
+		return S(R, (e) => {
+			e ? (document.addEventListener("pointerdown", X), document.addEventListener("contextmenu", Z)) : (document.removeEventListener("pointerdown", X), document.removeEventListener("contextmenu", Z));
+		}), m(() => {
+			document.removeEventListener("pointerdown", X), document.removeEventListener("contextmenu", Z);
+		}), (e, i) => (h(), s("div", {
+			ref_key: "rootRef",
+			ref: P,
+			class: f(B.value),
+			"data-state": x(R) ? "open" : "closed",
+			onContextmenu: J
+		}, [v(e.$slots, "default"), (h(), a(n, { to: "body" }, [l(r, { name: "t-fade" }, {
+			default: C(() => [x(R) && !u.disabled ? (h(), s("ul", {
+				key: 0,
+				id: x(N),
+				role: "menu",
+				class: f(["t-context-menu__menu", `t-context-menu--${u.size}`]),
+				style: p({
+					top: `${L.value.y}px`,
+					left: `${L.value.x}px`
+				}),
+				"aria-label": "Context menu"
+			}, [(h(!0), s(t, null, _(u.items, (t, n) => (h(), s("li", {
+				key: t.value,
+				ref_for: !0,
+				ref: (e) => K(e, t.value),
+				role: "menuitem",
+				class: f(["t-context-menu__item", {
+					"is-disabled": t.disabled,
+					"is-focused": n === I.value
+				}]),
+				"aria-disabled": t.disabled || void 0,
+				tabindex: t.disabled ? -1 : 0,
+				onClick: (e) => W(t),
+				onKeydown: (e) => Y(e, t)
+			}, [v(e.$slots, "item", {
+				item: t,
+				index: n
+			}, () => [c(y(t.label), 1)])], 42, k))), 128))], 14, O)) : o("", !0)]),
+			_: 3
+		})]))], 42, D));
+	}
+});
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=TContextMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TContextMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/TContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { createId, isActivationKey, isEscapeKey } from '@treeui/utils';\nimport { computed, nextTick, onBeforeUnmount, ref, toRef, watch } from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\nexport interface TContextMenuItem {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    items?: TContextMenuItem[];\n    open?: boolean;\n    defaultOpen?: boolean;\n    disabled?: boolean;\n    size?: TSize;\n  }>(),\n  {\n    items: () => [],\n    open: undefined,\n    defaultOpen: false,\n    disabled: false,\n    size: 'md',\n  },\n);\n\nconst emit = defineEmits<{\n  select: [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n}>();\n\ndefineSlots<{\n  default(): unknown;\n  item(props: { item: TContextMenuItem; index: number }): unknown;\n}>();\n\nconst menuId = createId('t-context-menu');\nconst rootRef = ref<HTMLElement | null>(null);\nconst itemRefs = ref<Map<string, HTMLElement>>(new Map());\nconst focusedIndex = ref(-1);\nconst menuPosition = ref({ x: 0, y: 0 });\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-context-menu',\n  `t-context-menu--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-open': isOpen.value,\n  },\n]);\n\nconst enabledItems = computed(() => props.items.filter((i) => !i.disabled));\n\nconst openMenu = (x: number, y: number) => {\n  if (props.disabled) return;\n  menuPosition.value = { x, y };\n  focusedIndex.value = enabledItems.value.length > 0\n    ? props.items.indexOf(enabledItems.value[0])\n    : 0;\n  setValue(true);\n  nextTick(() => focusItem(focusedIndex.value));\n};\n\nconst closeMenu = (restoreFocus = false) => {\n  setValue(false);\n  focusedIndex.value = -1;\n  if (restoreFocus) {\n    nextTick(() => rootRef.value?.focus());\n  }\n};\n\nconst selectItem = (item: TContextMenuItem) => {\n  if (item.disabled) return;\n  emit('select', item.value);\n  closeMenu(true);\n};\n\nconst focusItem = (index: number) => {\n  const item = props.items[index];\n  if (!item) return;\n  const el = itemRefs.value.get(item.value);\n  el?.focus();\n};\n\nconst setItemRef = (el: Element | null, value: string) => {\n  if (el instanceof HTMLElement) {\n    itemRefs.value.set(value, el);\n  } else {\n    itemRefs.value.delete(value);\n  }\n};\n\nconst moveFocus = (direction: 1 | -1) => {\n  let nextIndex = focusedIndex.value + direction;\n  while (nextIndex >= 0 && nextIndex < props.items.length) {\n    if (!props.items[nextIndex].disabled) {\n      focusedIndex.value = nextIndex;\n      focusItem(nextIndex);\n      return;\n    }\n    nextIndex += direction;\n  }\n};\n\nconst onContextMenu = (event: MouseEvent) => {\n  if (props.disabled) return;\n  event.preventDefault();\n  openMenu(event.clientX, event.clientY);\n};\n\nconst onItemKeydown = (event: KeyboardEvent, item: TContextMenuItem) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeMenu(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectItem(item);\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 = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[0])\n        : 0;\n      focusItem(focusedIndex.value);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusedIndex.value = enabledItems.value.length > 0\n        ? props.items.indexOf(enabledItems.value[enabledItems.value.length - 1])\n        : props.items.length - 1;\n      focusItem(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  const menuEl = document.getElementById(menuId);\n  if (menuEl?.contains(target)) return;\n  closeMenu();\n};\n\nconst onDocumentContextMenu = (event: MouseEvent) => {\n  if (!isOpen.value) return;\n  const target = event.target;\n  if (!(target instanceof Node)) return;\n  if (rootRef.value?.contains(target)) return;\n  closeMenu();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    document.addEventListener('contextmenu', onDocumentContextMenu);\n  } else {\n    document.removeEventListener('pointerdown', onDocumentPointerDown);\n    document.removeEventListener('contextmenu', onDocumentContextMenu);\n  }\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\n  document.removeEventListener('contextmenu', onDocumentContextMenu);\n});\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    :data-state=\"isOpen ? 'open' : 'closed'\"\n    @contextmenu=\"onContextMenu\"\n  >\n    <slot />\n    <Teleport to=\"body\">\n      <transition name=\"t-fade\">\n        <ul\n          v-if=\"isOpen && !disabled\"\n          :id=\"menuId\"\n          role=\"menu\"\n          class=\"t-context-menu__menu\"\n          :class=\"`t-context-menu--${size}`\"\n          :style=\"{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }\"\n          aria-label=\"Context menu\"\n        >\n          <li\n            v-for=\"(item, index) in items\"\n            :key=\"item.value\"\n            :ref=\"(el) => setItemRef(el as Element | null, item.value)\"\n            role=\"menuitem\"\n            class=\"t-context-menu__item\"\n            :class=\"{\n              'is-disabled': item.disabled,\n              'is-focused': index === focusedIndex,\n            }\"\n            :aria-disabled=\"item.disabled || undefined\"\n            :tabindex=\"item.disabled ? -1 : 0\"\n            @click=\"selectItem(item)\"\n            @keydown=\"onItemKeydown($event, item)\"\n          >\n            <slot\n              name=\"item\"\n              :item=\"item\"\n              :index=\"index\"\n            >\n              {{ item.label }}\n            </slot>\n          </li>\n        </ul>\n      </transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/TDatePicker.cjs

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

package/dist/components/TDatePicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDatePicker.cjs","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\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 triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\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    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDatePicker.js

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

package/dist/components/TDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TDatePicker.js","names":[],"sources":["../../src/components/TDatePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addDays,\n  addMonths,\n  createId,\n  isActivationKey,\n  isEscapeKey,\n  isSameDay,\n  parseDateValue,\n  startOfDay,\n  startOfMonth,\n  startOfWeek,\n  toDateValue,\n} from '@treeui/utils';\nimport { getTreeIcon, treeIconDefaults } from '@treeui/icons';\nimport {\n  type ComponentPublicInstance,\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  ref,\n  toRef,\n  useAttrs,\n  watch,\n} from 'vue';\nimport { useControllableOpen } from '../composables/useControllableOpen';\nimport type { TSize } from '../types/contracts';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\ninterface CalendarCell {\n  date: Date;\n  dayLabel: number;\n  disabled: boolean;\n  inMonth: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n}\n\nconst CalendarIcon = getTreeIcon('calendar');\nconst ChevronLeftIcon = getTreeIcon('chevron-left');\nconst ChevronRightIcon = getTreeIcon('chevron-right');\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string;\n    open?: boolean;\n    defaultOpen?: boolean;\n    size?: TSize;\n    disabled?: boolean;\n    invalid?: boolean;\n    placeholder?: string;\n    locale?: string;\n    min?: string;\n    max?: string;\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    id?: string;\n  }>(),\n  {\n    modelValue: '',\n    open: undefined,\n    defaultOpen: false,\n    size: 'md',\n    disabled: false,\n    invalid: false,\n    placeholder: 'Select date',\n    locale: 'en-US',\n    min: '',\n    max: '',\n    weekStartsOn: 0,\n    id: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string];\n  'update:open': [value: boolean];\n  'open-change': [value: boolean];\n  select: [value: string];\n}>();\n\nconst attrs = useAttrs();\nconst today = startOfDay(new Date());\nconst selectedDate = computed(() => parseDateValue(props.modelValue));\nconst minDate = computed(() => parseDateValue(props.min));\nconst maxDate = computed(() => parseDateValue(props.max));\nconst calendarId = props.id ?? createId('t-date-picker');\nconst captionId = `${calendarId}-caption`;\nconst rootRef = ref<HTMLElement | null>(null);\nconst triggerRef = ref<HTMLButtonElement | null>(null);\nconst dayRefs = new Map<string, HTMLButtonElement>();\nconst viewMonth = ref(startOfMonth(selectedDate.value ?? today));\nconst focusedDate = ref<Date>(selectedDate.value ?? today);\n\nconst triggerAttrs = computed(() => {\n  const { class: _class, style: _style, name: _name, ...rest } = attrs;\n  return rest;\n});\n\nconst hiddenInputName = computed(() =>\n  typeof attrs.name === 'string' ? attrs.name : undefined,\n);\n\nconst rootClasses = computed(() => [\n  't-date-picker',\n  `t-date-picker--${props.size}`,\n  {\n    'is-disabled': props.disabled,\n    'is-invalid': props.invalid,\n    'is-open': isOpen.value,\n  },\n  attrs.class,\n]);\n\nconst rootStyle = computed(() => attrs.style);\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 triggerText = computed(() => {\n  if (!selectedDate.value) {\n    return props.placeholder;\n  }\n\n  return new Intl.DateTimeFormat(props.locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  }).format(selectedDate.value);\n});\n\nconst monthLabel = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: 'long',\n    year: 'numeric',\n  }).format(viewMonth.value),\n);\n\nconst weekdayLabels = computed(() => {\n  const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' });\n  const weekBase = startOfWeek(new Date(2024, 0, 7), props.weekStartsOn);\n\n  return Array.from({ length: 7 }, (_, index) =>\n    formatter.format(addDays(weekBase, index)),\n  );\n});\n\nconst isDateDisabled = (date: Date) => {\n  if (props.disabled) {\n    return true;\n  }\n\n  if (minDate.value && date < minDate.value) {\n    return true;\n  }\n\n  if (maxDate.value && date > maxDate.value) {\n    return true;\n  }\n\n  return false;\n};\n\nconst syncCalendarView = (date: Date) => {\n  focusedDate.value = startOfDay(date);\n  viewMonth.value = startOfMonth(date);\n};\n\nwatch(\n  selectedDate,\n  (value) => {\n    if (value) {\n      syncCalendarView(value);\n      return;\n    }\n\n    if (!isOpen.value) {\n      syncCalendarView(today);\n    }\n  },\n  { immediate: true },\n);\n\nconst cells = computed(() => {\n  const startDate = startOfWeek(startOfMonth(viewMonth.value), props.weekStartsOn);\n\n  return Array.from({ length: 6 }, (_, weekIndex) =>\n    Array.from({ length: 7 }, (_, dayIndex) => {\n      const date = addDays(startDate, weekIndex * 7 + dayIndex);\n      const key = toDateValue(date);\n\n      return {\n        date,\n        dayLabel: date.getDate(),\n        disabled: isDateDisabled(date),\n        inMonth: date.getMonth() === viewMonth.value.getMonth(),\n        isFocused: isSameDay(date, focusedDate.value),\n        isSelected: isSameDay(date, selectedDate.value),\n        isToday: isSameDay(date, today),\n        key,\n      } satisfies CalendarCell;\n    }),\n  );\n});\n\nconst canMovePrev = computed(() => {\n  if (!minDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) > startOfMonth(minDate.value);\n});\n\nconst canMoveNext = computed(() => {\n  if (!maxDate.value) {\n    return true;\n  }\n\n  return startOfMonth(viewMonth.value) < startOfMonth(maxDate.value);\n});\n\nconst focusCurrentDay = () => {\n  const key = toDateValue(focusedDate.value);\n  nextTick(() => {\n    dayRefs.get(key)?.focus();\n  });\n};\n\nconst setDayRef = (\n  element: Element | ComponentPublicInstance | null,\n  key: string,\n) => {\n  if (element instanceof HTMLButtonElement) {\n    dayRefs.set(key, element);\n    return;\n  }\n\n  dayRefs.delete(key);\n};\n\nconst openCalendar = () => {\n  if (props.disabled) {\n    return;\n  }\n\n  syncCalendarView(selectedDate.value ?? focusedDate.value ?? today);\n  setValue(true);\n  focusCurrentDay();\n};\n\nconst closeCalendar = (restoreFocus = false) => {\n  setValue(false);\n\n  if (restoreFocus) {\n    nextTick(() => {\n      triggerRef.value?.focus();\n    });\n  }\n};\n\nconst toggleCalendar = () => {\n  if (isOpen.value) {\n    closeCalendar();\n    return;\n  }\n\n  openCalendar();\n};\n\nconst moveCalendar = (direction: 1 | -1) => {\n  const nextMonth = addMonths(viewMonth.value, direction);\n  syncCalendarView(nextMonth);\n  focusCurrentDay();\n};\n\nconst moveFocus = (nextDate: Date) => {\n  if (isDateDisabled(nextDate)) {\n    return;\n  }\n\n  syncCalendarView(nextDate);\n  focusCurrentDay();\n};\n\nconst selectDate = (date: Date) => {\n  if (isDateDisabled(date)) {\n    return;\n  }\n\n  const normalizedDate = startOfDay(date);\n  const value = toDateValue(normalizedDate);\n\n  syncCalendarView(normalizedDate);\n  emit('update:modelValue', value);\n  emit('select', value);\n  closeCalendar(true);\n};\n\nconst onTriggerKeydown = (event: KeyboardEvent) => {\n  if (props.disabled) {\n    return;\n  }\n\n  if (isEscapeKey(event) && isOpen.value) {\n    event.preventDefault();\n    closeCalendar();\n    return;\n  }\n\n  if (\n    isActivationKey(event) ||\n    event.key === 'ArrowDown' ||\n    event.key === 'ArrowUp'\n  ) {\n    event.preventDefault();\n    openCalendar();\n  }\n};\n\nconst onDayKeydown = (event: KeyboardEvent, date: Date) => {\n  if (isEscapeKey(event)) {\n    event.preventDefault();\n    closeCalendar(true);\n    return;\n  }\n\n  if (isActivationKey(event)) {\n    event.preventDefault();\n    selectDate(date);\n    return;\n  }\n\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault();\n      moveFocus(addDays(date, -1));\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      moveFocus(addDays(date, 1));\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      moveFocus(addDays(date, -7));\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      moveFocus(addDays(date, 7));\n      break;\n    case 'Home':\n      event.preventDefault();\n      moveFocus(startOfWeek(date, props.weekStartsOn));\n      break;\n    case 'End':\n      event.preventDefault();\n      moveFocus(addDays(startOfWeek(date, props.weekStartsOn), 6));\n      break;\n    case 'PageUp':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? -12 : -1));\n      break;\n    case 'PageDown':\n      event.preventDefault();\n      moveFocus(addMonths(date, event.shiftKey ? 12 : 1));\n      break;\n    default:\n      break;\n  }\n};\n\nconst onDocumentPointerDown = (event: PointerEvent) => {\n  if (!isOpen.value) {\n    return;\n  }\n\n  const target = event.target;\n  if (!(target instanceof Node)) {\n    return;\n  }\n\n  if (rootRef.value?.contains(target)) {\n    return;\n  }\n\n  closeCalendar();\n};\n\nwatch(isOpen, (value) => {\n  if (value) {\n    document.addEventListener('pointerdown', onDocumentPointerDown);\n    return;\n  }\n\n  document.removeEventListener('pointerdown', onDocumentPointerDown);\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    <input\n      v-if=\"hiddenInputName\"\n      type=\"hidden\"\n      :name=\"hiddenInputName\"\n      :value=\"modelValue\"\n    >\n    <button\n      ref=\"triggerRef\"\n      v-bind=\"triggerAttrs\"\n      type=\"button\"\n      class=\"t-date-picker__trigger\"\n      :disabled=\"disabled\"\n      :aria-controls=\"isOpen ? calendarId : undefined\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"isOpen\"\n      :aria-invalid=\"invalid || undefined\"\n      @click=\"toggleCalendar\"\n      @keydown=\"onTriggerKeydown\"\n    >\n      <span\n        v-if=\"$slots.prefix\"\n        class=\"t-date-picker__slot t-date-picker__slot--prefix\"\n      >\n        <slot name=\"prefix\" />\n      </span>\n      <span\n        class=\"t-date-picker__value\"\n        :data-placeholder=\"selectedDate ? undefined : true\"\n      >\n        {{ triggerText }}\n      </span>\n      <span class=\"t-date-picker__slot t-date-picker__slot--suffix\">\n        <slot name=\"suffix\">\n          <CalendarIcon v-bind=\"treeIconDefaults\" />\n        </slot>\n      </span>\n    </button>\n\n    <transition name=\"t-fade\">\n      <div\n        v-if=\"isOpen && !disabled\"\n        :id=\"calendarId\"\n        class=\"t-date-picker__content\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        :aria-labelledby=\"captionId\"\n      >\n        <div class=\"t-date-picker__header\">\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMovePrev\"\n            aria-label=\"Previous month\"\n            @click=\"moveCalendar(-1)\"\n          >\n            <ChevronLeftIcon v-bind=\"treeIconDefaults\" />\n          </button>\n          <p\n            :id=\"captionId\"\n            class=\"t-date-picker__month\"\n          >\n            {{ monthLabel }}\n          </p>\n          <button\n            type=\"button\"\n            class=\"t-date-picker__nav\"\n            :disabled=\"!canMoveNext\"\n            aria-label=\"Next month\"\n            @click=\"moveCalendar(1)\"\n          >\n            <ChevronRightIcon v-bind=\"treeIconDefaults\" />\n          </button>\n        </div>\n\n        <div\n          class=\"t-date-picker__weekdays\"\n          aria-hidden=\"true\"\n        >\n          <span\n            v-for=\"label in weekdayLabels\"\n            :key=\"label\"\n            class=\"t-date-picker__weekday\"\n          >\n            {{ label }}\n          </span>\n        </div>\n\n        <div\n          class=\"t-date-picker__grid\"\n          role=\"grid\"\n          :aria-labelledby=\"captionId\"\n        >\n          <div\n            v-for=\"(week, weekIndex) in cells\"\n            :key=\"weekIndex\"\n            class=\"t-date-picker__row\"\n            role=\"row\"\n          >\n            <div\n              v-for=\"cell in week\"\n              :key=\"cell.key\"\n              class=\"t-date-picker__cell\"\n              role=\"gridcell\"\n              :aria-selected=\"cell.isSelected\"\n            >\n              <button\n                :ref=\"(element) => setDayRef(element, cell.key)\"\n                type=\"button\"\n                class=\"t-date-picker__day\"\n                :class=\"{\n                  'is-muted': !cell.inMonth,\n                  'is-selected': cell.isSelected,\n                  'is-today': cell.isToday,\n                }\"\n                :data-date=\"cell.key\"\n                :disabled=\"cell.disabled\"\n                :tabindex=\"cell.isFocused ? 0 : -1\"\n                :aria-current=\"cell.isToday ? 'date' : undefined\"\n                :aria-label=\"cell.key\"\n                @click=\"selectDate(cell.date)\"\n                @keydown=\"onDayKeydown($event, cell.date)\"\n              >\n                {{ cell.dayLabel }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </transition>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/TDatePicker.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,2 @@
+const e=require("../composables/useControllableOpen.cjs");let t=require("vue"),n=require("@treeui/utils"),r=require("@treeui/icons");var i=[`data-state`],a=[`name`,`value`],o=[`disabled`,`aria-controls`,`aria-expanded`,`aria-invalid`],ee={key:0,class:`t-date-picker__slot t-date-picker__slot--prefix`},te=[`data-placeholder`],s={class:`t-date-picker__slot t-date-picker__slot--suffix`},c=[`id`],ne={class:`t-date-picker__header`},l=[`disabled`],u=[`disabled`],d={class:`t-date-picker__weekdays`,"aria-hidden":`true`},re=[`aria-selected`],f=[`data-date`,`disabled`,`tabindex`,`aria-current`,`aria-label`,`onClick`,`onKeydown`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`TDatePicker`,props:{modelValue:{default:``},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},size:{default:`md`},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{default:`Select date`},locale:{default:`en-US`},min:{default:``},max:{default:``},weekStartsOn:{default:0},id:{default:void 0}},emits:[`update:modelValue`,`update:open`,`open-change`,`select`],setup(p,{emit:m}){let h=(0,r.getTreeIcon)(`calendar`),g=(0,r.getTreeIcon)(`chevron-left`),_=(0,r.getTreeIcon)(`chevron-right`),v=p,y=m,b=(0,t.useAttrs)(),x=(0,n.startOfDay)(new Date),S=(0,t.computed)(()=>(0,n.parseDateValue)(v.modelValue)),C=(0,t.computed)(()=>(0,n.parseDateValue)(v.min)),w=(0,t.computed)(()=>(0,n.parseDateValue)(v.max)),T=v.id??(0,n.createId)(`t-date-picker`),E=`${T}-caption`,D=(0,t.ref)(null),O=(0,t.ref)(null),k=new Map,A=(0,t.ref)((0,n.startOfMonth)(S.value??x)),j=(0,t.ref)(S.value??x),M=(0,t.computed)(()=>{let{class:e,style:t,name:n,...r}=b;return r}),N=(0,t.computed)(()=>typeof b.name==`string`?b.name:void 0),P=(0,t.computed)(()=>[`t-date-picker`,`t-date-picker--${v.size}`,{"is-disabled":v.disabled,"is-invalid":v.invalid,"is-open":I.value},b.class]),F=(0,t.computed)(()=>b.style),{value:I,setValue:L}=e.useControllableOpen((0,t.toRef)(v,`open`),v.defaultOpen,e=>{y(`update:open`,e),y(`open-change`,e)}),R=(0,t.computed)(()=>S.value?new Intl.DateTimeFormat(v.locale,{day:`numeric`,month:`long`,year:`numeric`}).format(S.value):v.placeholder),z=(0,t.computed)(()=>new Intl.DateTimeFormat(v.locale,{month:`long`,year:`numeric`}).format(A.value)),B=(0,t.computed)(()=>{let e=new Intl.DateTimeFormat(v.locale,{weekday:`short`}),t=(0,n.startOfWeek)(new Date(2024,0,7),v.weekStartsOn);return Array.from({length:7},(r,i)=>e.format((0,n.addDays)(t,i)))}),V=e=>!!(v.disabled||C.value&&e<C.value||w.value&&e>w.value),H=e=>{j.value=(0,n.startOfDay)(e),A.value=(0,n.startOfMonth)(e)};(0,t.watch)(S,e=>{if(e){H(e);return}I.value||H(x)},{immediate:!0});let U=(0,t.computed)(()=>{let e=(0,n.startOfWeek)((0,n.startOfMonth)(A.value),v.weekStartsOn);return Array.from({length:6},(t,r)=>Array.from({length:7},(t,i)=>{let a=(0,n.addDays)(e,r*7+i),o=(0,n.toDateValue)(a);return{date:a,dayLabel:a.getDate(),disabled:V(a),inMonth:a.getMonth()===A.value.getMonth(),isFocused:(0,n.isSameDay)(a,j.value),isSelected:(0,n.isSameDay)(a,S.value),isToday:(0,n.isSameDay)(a,x),key:o}}))}),W=(0,t.computed)(()=>!C.value||(0,n.startOfMonth)(A.value)>(0,n.startOfMonth)(C.value)),G=(0,t.computed)(()=>!w.value||(0,n.startOfMonth)(A.value)<(0,n.startOfMonth)(w.value)),K=()=>{let e=(0,n.toDateValue)(j.value);(0,t.nextTick)(()=>{k.get(e)?.focus()})},q=(e,t)=>{if(e instanceof HTMLButtonElement){k.set(t,e);return}k.delete(t)},J=()=>{v.disabled||(H(S.value??j.value??x),L(!0),K())},Y=(e=!1)=>{L(!1),e&&(0,t.nextTick)(()=>{O.value?.focus()})},ie=()=>{if(I.value){Y();return}J()},X=e=>{let t=(0,n.addMonths)(A.value,e);H(t),K()},Z=e=>{V(e)||(H(e),K())},Q=e=>{if(V(e))return;let t=(0,n.startOfDay)(e),r=(0,n.toDateValue)(t);H(t),y(`update:modelValue`,r),y(`select`,r),Y(!0)},ae=e=>{if(!v.disabled){if((0,n.isEscapeKey)(e)&&I.value){e.preventDefault(),Y();return}((0,n.isActivationKey)(e)||e.key===`ArrowDown`||e.key===`ArrowUp`)&&(e.preventDefault(),J())}},oe=(e,t)=>{if((0,n.isEscapeKey)(e)){e.preventDefault(),Y(!0);return}if((0,n.isActivationKey)(e)){e.preventDefault(),Q(t);return}switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((0,n.addDays)(t,-1));break;case`ArrowRight`:e.preventDefault(),Z((0,n.addDays)(t,1));break;case`ArrowUp`:e.preventDefault(),Z((0,n.addDays)(t,-7));break;case`ArrowDown`:e.preventDefault(),Z((0,n.addDays)(t,7));break;case`Home`:e.preventDefault(),Z((0,n.startOfWeek)(t,v.weekStartsOn));break;case`End`:e.preventDefault(),Z((0,n.addDays)((0,n.startOfWeek)(t,v.weekStartsOn),6));break;case`PageUp`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?-12:-1));break;case`PageDown`:e.preventDefault(),Z((0,n.addMonths)(t,e.shiftKey?12:1));break;default:break}},$=e=>{if(!I.value)return;let t=e.target;t instanceof Node&&(D.value?.contains(t)||Y())};return(0,t.watch)(I,e=>{if(e){document.addEventListener(`pointerdown`,$);return}document.removeEventListener(`pointerdown`,$)}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`pointerdown`,$)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:D,class:(0,t.normalizeClass)(P.value),style:(0,t.normalizeStyle)(F.value),"data-state":(0,t.unref)(I)?`open`:`closed`},[N.value?((0,t.openBlock)(),(0,t.createElementBlock)(`input`,{key:0,type:`hidden`,name:N.value,value:p.modelValue},null,8,a)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`button`,(0,t.mergeProps)({ref_key:`triggerRef`,ref:O},M.value,{type:`button`,class:`t-date-picker__trigger`,disabled:p.disabled,"aria-controls":(0,t.unref)(I)?(0,t.unref)(T):void 0,"aria-haspopup":`dialog`,"aria-expanded":(0,t.unref)(I),"aria-invalid":p.invalid||void 0,onClick:ie,onKeydown:ae}),[e.$slots.prefix?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,ee,[(0,t.renderSlot)(e.$slots,`prefix`)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,{class:`t-date-picker__value`,"data-placeholder":!S.value||void 0},(0,t.toDisplayString)(R.value),9,te),(0,t.createElementVNode)(`span`,s,[(0,t.renderSlot)(e.$slots,`suffix`,{},()=>[(0,t.createVNode)((0,t.unref)(h),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)])])],16,o),(0,t.createVNode)(t.Transition,{name:`t-fade`},{default:(0,t.withCtx)(()=>[(0,t.unref)(I)&&!p.disabled?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:(0,t.unref)(T),class:`t-date-picker__content`,role:`dialog`,"aria-modal":`false`,"aria-labelledby":E},[(0,t.createElementVNode)(`div`,ne,[(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!W.value,"aria-label":`Previous month`,onClick:n[0]||=e=>X(-1)},[(0,t.createVNode)((0,t.unref)(g),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,l),(0,t.createElementVNode)(`p`,{id:E,class:`t-date-picker__month`},(0,t.toDisplayString)(z.value),1),(0,t.createElementVNode)(`button`,{type:`button`,class:`t-date-picker__nav`,disabled:!G.value,"aria-label":`Next month`,onClick:n[1]||=e=>X(1)},[(0,t.createVNode)((0,t.unref)(_),(0,t.normalizeProps)((0,t.guardReactiveProps)((0,t.unref)(r.treeIconDefaults))),null,16)],8,u)]),(0,t.createElementVNode)(`div`,d,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(B.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:e,class:`t-date-picker__weekday`},(0,t.toDisplayString)(e),1))),128))]),(0,t.createElementVNode)(`div`,{class:`t-date-picker__grid`,role:`grid`,"aria-labelledby":E},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(U.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`t-date-picker__row`,role:`row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:e.key,class:`t-date-picker__cell`,role:`gridcell`,"aria-selected":e.isSelected},[(0,t.createElementVNode)(`button`,{ref_for:!0,ref:t=>q(t,e.key),type:`button`,class:(0,t.normalizeClass)([`t-date-picker__day`,{"is-muted":!e.inMonth,"is-selected":e.isSelected,"is-today":e.isToday}]),"data-date":e.key,disabled:e.disabled,tabindex:e.isFocused?0:-1,"aria-current":e.isToday?`date`:void 0,"aria-label":e.key,onClick:t=>Q(e.date),onKeydown:t=>oe(t,e.date)},(0,t.toDisplayString)(e.dayLabel),43,f)],8,re))),128))]))),128))])],8,c)):(0,t.createCommentVNode)(``,!0)]),_:1})],14,i))}});exports.default=p;
+//# sourceMappingURL=TDatePicker.vue_vue_type_script_setup_true_lang.cjs.map