npm - @auronui/vue - Versions diffs - 1.0.3 → 1.0.5 - Mend

@auronui/vue 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/components/combo-box/ComboBoxContent.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { motion } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/motion/index.js";
 import { AnimatePresence_default } from "../../node_modules/.pnpm/motion-v@2.2.1_@vueuse_core@14.2.1_vue@3.5.32_typescript@6.0.2___react-dom@19.2.5_react_8b28b23614a2152514812dba6ef76a55/node_modules/motion-v/dist/es/components/animate-presence/AnimatePresence.js";
 import { useComboBoxInject } from "./ComboBox.context.js";
-import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots, watchEffect, withCtx } from "vue";
 import { ComboboxContent, ComboboxPortal, ComboboxViewport, injectComboboxRootContext } from "reka-ui";
 //#region src/components/combo-box/ComboBoxContent.vue?vue&type=script&setup=true&lang.ts
 var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -14,6 +14,40 @@ var ComboBoxContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		const props = __props;
 		const ctx = useComboBoxInject();
 		const comboboxRootContext = injectComboboxRootContext();
+		const slots = useSlots();
+		function extractNodeText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractNodeText(n.children);
+				return "";
+			}).join("");
+		}
+		function walkAndRegister(nodes) {
+			for (const node of nodes) {
+				if (node.props && typeof node.props.value === "string") {
+					const value = node.props.value;
+					const children = node.children;
+					if (children && typeof children === "object" && "default" in children) {
+						const slotFn = children.default;
+						if (typeof slotFn === "function") {
+							const text = extractNodeText(slotFn()).trim();
+							if (text) ctx.registerItem(value, text);
+						}
+					} else if (typeof children === "string") {
+						const text = children.trim();
+						if (text) ctx.registerItem(value, text);
+					} else if (Array.isArray(children)) {
+						const text = extractNodeText(children).trim();
+						if (text) ctx.registerItem(value, text);
+					}
+				}
+				if (Array.isArray(node.children)) walkAndRegister(node.children);
+			}
+		}
+		watchEffect(() => {
+			const vnodes = slots.default?.();
+			if (vnodes) walkAndRegister(vnodes);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxPortal), null, {
 				default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {

package/dist/components/combo-box/ComboBoxContent.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n sideOffset?: number\n class?: string\n}>(), {\n sideOffset: 8,\n class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n</script>\n\n<template>\n <ComboboxPortal>\n <AnimatePresence>\n <ComboboxContent\n v-if=\"comboboxRootContext.open.value\"\n position=\"popper\"\n :side-offset=\"props.sideOffset\"\n as-child\n data-slot=\"popover\"\n >\n <motion.div\n :class=\"ctx.slots.value.popover()\"\n :initial=\"{ opacity: 0, scale: 0.95 }\"\n :animate=\"{ opacity: 1, scale: 1 }\"\n :exit=\"{ opacity: 0, scale: 0.95 }\"\n :transition=\"{ duration: 0.15 }\"\n >\n <ComboboxViewport data-slot=\"list-box\">\n <slot />\n <slot name=\"empty\" />\n </ComboboxViewport>\n </motion.div>\n </ComboboxContent>\n </AnimatePresence>\n </ComboboxPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;~~EAKA~~,MAAM,QAAQ;EAQd,MAAM,MAAM,mBAAkB;EAC9B,MAAM,sBAAsB,2BAA0B;;~~uBAIpD~~,YAuBiB,MAAA,eAAA,EAAA,MAAA;2BADG,CArBlB,YAqBkB,MAAA,wBAAA,EAAA,MAAA;4BADE,CAlBV,MAAA,oBAAmB,CAAC,KAAK,SAAA,WAAA,EADjC,YAmBkB,MAAA,gBAAA,EAAA;;MAjBhB,UAAS;MACR,eAAa,MAAM;MACpB,YAAA;MACA,aAAU;;6BAaG,CAXb,YAWa,MAAA,OAAA,CAAA,KAAA;OAVV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS;QAAA,SAAA;QAAA,OAAA;QAA2B;OACpC,SAAS;QAAA,SAAA;QAAA,OAAA;QAAwB;OACjC,MAAM;QAAA,SAAA;QAAA,OAAA;QAA2B;OACjC,YAAY,EAAA,UAAA,KAAkB;;8BAKZ,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,aAAU,YAAU,EAAA;+BAC5B,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"ComboBoxContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxPortal, ComboboxContent, ComboboxViewport, injectComboboxRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { useSlots, watchEffect, type VNode } from 'vue'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n sideOffset?: number\n class?: string\n}>(), {\n sideOffset: 8,\n class: undefined,\n})\n\nconst ctx = useComboBoxInject()\nconst comboboxRootContext = injectComboboxRootContext()\n\n// Pre-walk slot VNodes to extract value→label pairs synchronously.\n// This runs before the portal opens so the bridge can resolve labels on initial render.\nconst slots = useSlots()\n\nfunction extractNodeText(nodes: VNode[]): string {\n return nodes.map(n => {\n if (typeof n.children === 'string') return n.children\n if (Array.isArray(n.children)) return extractNodeText(n.children as VNode[])\n return ''\n }).join('')\n}\n\nfunction walkAndRegister(nodes: VNode[]) {\n for (const node of nodes) {\n // ComboBoxItem VNodes have a `value` prop; extract their text children\n if (node.props && typeof node.props.value === 'string') {\n const value = node.props.value as string\n const children = node.children\n if (children && typeof children === 'object' && 'default' in children) {\n const slotFn = (children as Record<string, () => VNode[]>).default\n if (typeof slotFn === 'function') {\n const text = extractNodeText(slotFn()).trim()\n if (text) ctx.registerItem(value, text)\n }\n } else if (typeof children === 'string') {\n const text = children.trim()\n if (text) ctx.registerItem(value, text)\n } else if (Array.isArray(children)) {\n const text = extractNodeText(children as VNode[]).trim()\n if (text) ctx.registerItem(value, text)\n }\n }\n // Recurse into children arrays\n if (Array.isArray(node.children)) {\n walkAndRegister(node.children as VNode[])\n }\n }\n}\n\n// Run synchronously at setup time and whenever the slot content changes\nwatchEffect(() => {\n const vnodes = slots.default?.()\n if (vnodes) walkAndRegister(vnodes)\n})\n</script>\n\n<template>\n <ComboboxPortal>\n <AnimatePresence>\n <ComboboxContent\n v-if=\"comboboxRootContext.open.value\"\n position=\"popper\"\n :side-offset=\"props.sideOffset\"\n as-child\n data-slot=\"popover\"\n >\n <motion.div\n :class=\"ctx.slots.value.popover()\"\n :initial=\"{ opacity: 0, scale: 0.95 }\"\n :animate=\"{ opacity: 1, scale: 1 }\"\n :exit=\"{ opacity: 0, scale: 0.95 }\"\n :transition=\"{ duration: 0.15 }\"\n >\n <ComboboxViewport data-slot=\"list-box\">\n <slot />\n <slot name=\"empty\" />\n </ComboboxViewport>\n </motion.div>\n </ComboboxContent>\n </AnimatePresence>\n </ComboboxPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAQd,MAAM,MAAM,mBAAkB;EAC9B,MAAM,sBAAsB,2BAA0B;EAItD,MAAM,QAAQ,UAAS;EAEvB,SAAS,gBAAgB,OAAwB;AAC/C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,gBAAgB,EAAE,SAAmB;AAC3E,WAAO;KACP,CAAC,KAAK,GAAE;;EAGZ,SAAS,gBAAgB,OAAgB;AACvC,QAAK,MAAM,QAAQ,OAAO;AAExB,QAAI,KAAK,SAAS,OAAO,KAAK,MAAM,UAAU,UAAU;KACtD,MAAM,QAAQ,KAAK,MAAM;KACzB,MAAM,WAAW,KAAK;AACtB,SAAI,YAAY,OAAO,aAAa,YAAY,aAAa,UAAU;MACrE,MAAM,SAAU,SAA2C;AAC3D,UAAI,OAAO,WAAW,YAAY;OAChC,MAAM,OAAO,gBAAgB,QAAQ,CAAC,CAAC,MAAK;AAC5C,WAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;gBAE/B,OAAO,aAAa,UAAU;MACvC,MAAM,OAAO,SAAS,MAAK;AAC3B,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;gBAC7B,MAAM,QAAQ,SAAS,EAAE;MAClC,MAAM,OAAO,gBAAgB,SAAoB,CAAC,MAAK;AACvD,UAAI,KAAM,KAAI,aAAa,OAAO,KAAI;;;AAI1C,QAAI,MAAM,QAAQ,KAAK,SAAS,CAC9B,iBAAgB,KAAK,SAAmB;;;AAM9C,oBAAkB;GAChB,MAAM,SAAS,MAAM,WAAU;AAC/B,OAAI,OAAQ,iBAAgB,OAAM;IACnC;;uBAIC,YAuBiB,MAAA,eAAA,EAAA,MAAA;2BADG,CArBlB,YAqBkB,MAAA,wBAAA,EAAA,MAAA;4BADE,CAlBV,MAAA,oBAAmB,CAAC,KAAK,SAAA,WAAA,EADjC,YAmBkB,MAAA,gBAAA,EAAA;;MAjBhB,UAAS;MACR,eAAa,MAAM;MACpB,YAAA;MACA,aAAU;;6BAaG,CAXb,YAWa,MAAA,OAAA,CAAA,KAAA;OAVV,OAAK,eAAE,MAAA,IAAG,CAAC,MAAM,MAAM,SAAO,CAAA;OAC9B,SAAS;QAAA,SAAA;QAAA,OAAA;QAA2B;OACpC,SAAS;QAAA,SAAA;QAAA,OAAA;QAAwB;OACjC,MAAM;QAAA,SAAA;QAAA,OAAA;QAA2B;OACjC,YAAY,EAAA,UAAA,KAAkB;;8BAKZ,CAHnB,YAGmB,MAAA,iBAAA,EAAA,EAHD,aAAU,YAAU,EAAA;+BAC5B,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,WAAqB,KAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/combo-box/ComboBoxItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxItem.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n value: string\n ~~textValue?: string\n~~ isDisabled?: boolean\n class?: string\n}>(), {\n ~~textValue: undefined,\n~~ isDisabled: false,\n class: undefined,\n})\n</script>\n\n<template>\n <ComboboxItem\n :value=\"~~props.value~~\"\n :text-value=\"~~props.textValue ?? props.value~~\"\n :disabled=\"props.isDisabled\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <slot />\n <ComboboxItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </ComboboxItemIndicator>\n <slot name=\"endContent\" />\n </ComboboxItem>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"ComboBoxItem.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n value: string\n isDisabled?: boolean\n class?: string\n}>(), {\n isDisabled: false,\n class: undefined,\n})\n\nconst slots = useSlots()\nconst ctx = useComboBoxInject()\n\n// Extract plain text from default slot VNodes at render time.\nfunction extractText(nodes: VNode[]): string {\n return nodes.map(n => {\n if (typeof n.children === 'string') return n.children\n if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n return ''\n }).join('')\n}\n\n// The display text Reka writes into the input when this item is selected.\n// Reads slot text content — no extra props needed.\nconst displayText = computed(() => {\n const vnodes = slots.default?.()\n if (!vnodes) return props.value\n return extractText(vnodes).trim() \|\| props.value\n})\n\n// Register this item's value→label mapping with the parent ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n <ComboboxItem\n :value=\"displayText\"\n :text-value=\"displayText\"\n :disabled=\"props.isDisabled\"\n :data-item-value=\"props.value\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <slot />\n <ComboboxItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </ComboboxItemIndicator>\n <slot name=\"endContent\" />\n </ComboboxItem>\n</template>\n"],"mappings":""}

package/dist/components/combo-box/ComboBoxItem.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { useComboBoxInject } from "./ComboBox.context.js";
+import { computed, createBlock, createElementVNode, createVNode, defineComponent, onMounted, onUnmounted, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
 import { ComboboxItem, ComboboxItemIndicator } from "reka-ui";
 //#region src/components/combo-box/ComboBoxItem.vue?vue&type=script&setup=true&lang.ts
 var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ComboBoxItem",
 	props: {
 		value: {},
-		textValue: { default: void 0 },
 		isDisabled: {
 			type: Boolean,
 			default: false
@@ -14,11 +14,32 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
+		const ctx = useComboBoxInject();
+		function extractText(nodes) {
+			return nodes.map((n) => {
+				if (typeof n.children === "string") return n.children;
+				if (Array.isArray(n.children)) return extractText(n.children);
+				return "";
+			}).join("");
+		}
+		const displayText = computed(() => {
+			const vnodes = slots.default?.();
+			if (!vnodes) return props.value;
+			return extractText(vnodes).trim() || props.value;
+		});
+		onMounted(() => {
+			ctx.registerItem(props.value, displayText.value);
+		});
+		onUnmounted(() => {
+			ctx.unregisterItem(props.value);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ComboboxItem), {
-				value: props.value,
-				"text-value": props.textValue ?? props.value,
+				value: displayText.value,
+				"text-value": displayText.value,
 				disabled: props.isDisabled,
+				"data-item-value": props.value,
 				class: "list-box-item list-box-item--default",
 				"data-slot": "list-box-item"
 			}, {
@@ -50,7 +71,8 @@ var ComboBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			}, 8, [
 				"value",
 				"text-value",
-				"disabled"
+				"disabled",
+				"data-item-value"
 			]);
 		};
 	}

package/dist/components/combo-box/ComboBoxItem.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n value: string\n ~~textValue?: string\n~~ isDisabled?: boolean\n class?: string\n}>(), {\n ~~textValue: undefined,\n~~ isDisabled: false,\n class: undefined,\n})\n</script>\n\n<template>\n <ComboboxItem\n :value=\"~~props.value~~\"\n :text-value=\"~~props.textValue ?? props.value~~\"\n :disabled=\"props.isDisabled\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <slot />\n <ComboboxItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </ComboboxItemIndicator>\n <slot name=\"endContent\" />\n </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;~~EAGA~~,MAAM,QAAQ;;~~uBAaZ~~,~~YAgCe~~,~~MAAA~~,~~aAAA~~,~~EAAA~~;IA/BZ,~~OAAO~~,MAAM;~~IACb~~,~~cAAY~~,MAAM,aAAa,MAAM;~~IACrC~~,UAAU,MAAM;~~IACjB~~,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,YAqBwB,MAAA,sBAAA,EAAA;MApBtB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}
1	+ {"version":3,"file":"ComboBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, useSlots, type VNode } from 'vue'\nimport { ComboboxItem, ComboboxItemIndicator } from 'reka-ui'\nimport { useComboBoxInject } from './ComboBox.context'\n\nconst props = withDefaults(defineProps<{\n value: string\n isDisabled?: boolean\n class?: string\n}>(), {\n isDisabled: false,\n class: undefined,\n})\n\nconst slots = useSlots()\nconst ctx = useComboBoxInject()\n\n// Extract plain text from default slot VNodes at render time.\nfunction extractText(nodes: VNode[]): string {\n return nodes.map(n => {\n if (typeof n.children === 'string') return n.children\n if (Array.isArray(n.children)) return extractText(n.children as VNode[])\n return ''\n }).join('')\n}\n\n// The display text Reka writes into the input when this item is selected.\n// Reads slot text content — no extra props needed.\nconst displayText = computed(() => {\n const vnodes = slots.default?.()\n if (!vnodes) return props.value\n return extractText(vnodes).trim() \|\| props.value\n})\n\n// Register this item's value→label mapping with the parent ComboBox bridge\n// so displayValue() and handleModelValueUpdate() can translate correctly.\nonMounted(() => {\n ctx.registerItem(props.value, displayText.value)\n})\n\nonUnmounted(() => {\n ctx.unregisterItem(props.value)\n})\n</script>\n\n<template>\n <ComboboxItem\n :value=\"displayText\"\n :text-value=\"displayText\"\n :disabled=\"props.isDisabled\"\n :data-item-value=\"props.value\"\n class=\"list-box-item list-box-item--default\"\n data-slot=\"list-box-item\"\n >\n <slot name=\"startContent\" />\n <slot />\n <ComboboxItemIndicator\n class=\"list-box-item__indicator\"\n data-slot=\"list-box-item-indicator\"\n >\n <slot name=\"selectedIcon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n data-slot=\"list-box-item-indicator--checkmark\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n </slot>\n </ComboboxItemIndicator>\n <slot name=\"endContent\" />\n </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,QAAQ,UAAS;EACvB,MAAM,MAAM,mBAAkB;EAG9B,SAAS,YAAY,OAAwB;AAC3C,UAAO,MAAM,KAAI,MAAK;AACpB,QAAI,OAAO,EAAE,aAAa,SAAU,QAAO,EAAE;AAC7C,QAAI,MAAM,QAAQ,EAAE,SAAS,CAAE,QAAO,YAAY,EAAE,SAAmB;AACvE,WAAO;KACP,CAAC,KAAK,GAAE;;EAKZ,MAAM,cAAc,eAAe;GACjC,MAAM,SAAS,MAAM,WAAU;AAC/B,OAAI,CAAC,OAAQ,QAAO,MAAM;AAC1B,UAAO,YAAY,OAAO,CAAC,MAAM,IAAI,MAAM;IAC5C;AAID,kBAAgB;AACd,OAAI,aAAa,MAAM,OAAO,YAAY,MAAK;IAChD;AAED,oBAAkB;AAChB,OAAI,eAAe,MAAM,MAAK;IAC/B;;uBAIC,YAiCe,MAAA,aAAA,EAAA;IAhCZ,OAAO,YAAA;IACP,cAAY,YAAA;IACZ,UAAU,MAAM;IAChB,mBAAiB,MAAM;IACxB,OAAM;IACN,aAAU;;2BAEkB;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,YAqBwB,MAAA,sBAAA,EAAA;MApBtB,OAAM;MACN,aAAU;;6BAkBH,CAhBP,WAgBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA;;;KAIvC,WAA0B,KAAA,QAAA,aAAA"}

package/dist/components/date-time-picker/DateTimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n DatePickerRoot,\n DatePickerTrigger,\n DatePickerContent,\n} from 'reka-ui'\nimport {\n type DateValue,\n CalendarDateTime,\n toCalendarDate,\n today,\n getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' \| 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n variant?: 'flat' \| 'bordered' \| 'faded' \| 'underlined'\n size?: 'sm' \| 'md' \| 'lg'\n color?: 'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'\n labelPlacement?: 'inside' \| 'outside' \| 'outside-left'\n fullWidth?: boolean\n label?: string\n description?: string\n errorMessage?: string\n isInvalid?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n name?: string\n class?: string\n granularity?: 'minute' \| 'second'\n hourCycle?: 12 \| 24\n hideTimeZone?: boolean\n defaultOpen?: boolean\n closeOnSelect?: boolean\n locale?: string\n defaultValue?: CalendarDateTime\n minValue?: CalendarDateTime\n maxValue?: CalendarDateTime\n isDateUnavailable?: (date: DateValue) => boolean\n isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadOnly: false,\n isRequired: false,\n hideTimeZone: false,\n granularity: 'minute',\n defaultOpen: false,\n closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime \| null \| undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n date: 'Pick a date',\n time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue \| null \| undefined) {\n if (!(v instanceof CalendarDateTime)) return\n internalValue.value = v\n modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 \| -1>(1)\n\nwatch(openModel, (open) => {\n if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n const from = STEP_ORDER.indexOf(activeStep.value)\n const to = STEP_ORDER.indexOf(step)\n direction.value = to > from ? 1 : -1\n activeStep.value = step\n}\n\nfunction goBack() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx < STEP_ORDER.length - 1) {\n goTo(STEP_ORDER[idx + 1])\n } else if (props.closeOnSelect) {\n openModel.value = false\n }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue \| undefined>({\n // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n // onDateChange. The setter reconstructs the full CalendarDateTime.\n get: () => toCalendarDate(internalValue.value),\n set: (val) => {\n if (!val) return\n internalValue.value = internalValue.value.set({\n year: val.year,\n month: val.month,\n day: val.day,\n })\n modelValue.value = internalValue.value\n goTo('time')\n },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n internalValue.value = val\n modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n dateTimePickerVariants({\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n fullWidth: props.fullWidth,\n }),\n)\n</script>\n\n<template>\n <DatePickerRoot\n v-model=\"modelValue\"\n v-model:open=\"openModel\"\n :default-value=\"defaultValue\"\n :default-open=\"defaultOpen\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-unavailable=\"isDateUnavailable\"\n :is-date-disabled=\"isDateDisabled\"\n :locale=\"locale\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\n :class=\"composeClassName(slotFns.base(), props.class)\"\n data-slot=\"date-time-picker\"\n >\n <DateInput\n :model-value=\"internalValue\"\n @update:model-value=\"onInputChange\"\n :variant=\"variant\"\n :size=\"size\"\n :color=\"color\"\n :label-placement=\"labelPlacement\"\n :full-width=\"fullWidth\"\n :default-value=\"defaultValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :locale=\"locale\"\n :label=\"label\"\n :description=\"description\"\n :error-message=\"errorMessage\"\n :is-invalid=\"isInvalid\"\n :is-disabled=\"isDisabled\"\n :is-read-only=\"isReadOnly\"\n :is-required=\"isRequired\"\n :name=\"name\"\n :hide-time-zone=\"hideTimeZone\"\n >\n <template #endContent>\n <DatePickerTrigger\n :class=\"slotFns.trigger()\"\n aria-label=\"Open date time picker\"\n @mousedown.prevent\n >\n <slot name=\"selectorIcon\">\n <svg\n :class=\"slotFns.triggerIndicator()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" />\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" />\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\" />\n </svg>\n </slot>\n </DatePickerTrigger>\n </template>\n </DateInput>\n\n <DatePickerContent\n :class=\"slotFns.popover()\"\n data-slot=\"popover\"\n :side-offset=\"8\"\n >\n <!-- Step header -->\n <div :class=\"slotFns.stepHeader()\" data-slot=\"step-header\">\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n aria-label=\"Previous step\"\n data-slot=\"back-button\"\n @click=\"goBack\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n </button>\n\n <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n data-slot=\"forward-button\"\n @click=\"goForward\"\n >\n <span v-if=\"activeStep === 'time'\" :class=\"slotFns.doneLabel()\">Done</span>\n <svg v-else width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </button>\n </div>\n\n <!-- Sliding panels -->\n <div :class=\"slotFns.panelWrap()\" style=\"overflow: hidden;\">\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n v-if=\"activeStep === 'date'\"\n key=\"date\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n class=\"px-3 pb-3\"\n data-slot=\"calendar-panel\"\n >\n <Calendar\n v-model=\"calendarValue\"\n :default-value=\"defaultValue\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-disabled=\"isDateDisabled\"\n :is-date-unavailable=\"isDateUnavailable\"\n :locale=\"locale\"\n :readonly=\"isReadOnly\"\n :disabled=\"isDisabled\"\n />\n </motion.div>\n\n <motion.div\n v-else-if=\"activeStep === 'time'\"\n key=\"time\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n >\n <DateTimePickerTimeScroller\n :model-value=\"internalValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n @update:model-value=\"onTimeUpdate\"\n />\n </motion.div>\n\n </AnimatePresence>\n </div>\n </DatePickerContent>\n </DatePickerRoot>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"DateTimePicker.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n DatePickerRoot,\n DatePickerTrigger,\n DatePickerContent,\n} from 'reka-ui'\nimport {\n type DateValue,\n CalendarDateTime,\n toCalendarDate,\n today,\n getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' \| 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n variant?: 'flat' \| 'bordered' \| 'faded' \| 'underlined'\n size?: 'sm' \| 'md' \| 'lg'\n color?: 'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'\n labelPlacement?: 'inside' \| 'outside' \| 'outside-left'\n fullWidth?: boolean\n label?: string\n description?: string\n errorMessage?: string\n isInvalid?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n name?: string\n class?: string\n granularity?: 'minute' \| 'second'\n hourCycle?: 12 \| 24\n hideTimeZone?: boolean\n defaultOpen?: boolean\n closeOnSelect?: boolean\n locale?: string\n defaultValue?: CalendarDateTime\n minValue?: CalendarDateTime\n maxValue?: CalendarDateTime\n isDateUnavailable?: (date: DateValue) => boolean\n isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadOnly: false,\n isRequired: false,\n hideTimeZone: false,\n granularity: 'minute',\n defaultOpen: false,\n closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime \| null \| undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n date: 'Pick a date',\n time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue \| null \| undefined) {\n if (!(v instanceof CalendarDateTime)) return\n internalValue.value = v\n modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 \| -1>(1)\n\nwatch(openModel, (open) => {\n if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n const from = STEP_ORDER.indexOf(activeStep.value)\n const to = STEP_ORDER.indexOf(step)\n direction.value = to > from ? 1 : -1\n activeStep.value = step\n}\n\nfunction goBack() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx < STEP_ORDER.length - 1) {\n goTo(STEP_ORDER[idx + 1])\n } else if (props.closeOnSelect) {\n openModel.value = false\n }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue \| undefined>({\n // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n // onDateChange. The setter reconstructs the full CalendarDateTime.\n get: () => toCalendarDate(internalValue.value),\n set: (val) => {\n if (!val) return\n internalValue.value = internalValue.value.set({\n year: val.year,\n month: val.month,\n day: val.day,\n })\n modelValue.value = internalValue.value\n goTo('time')\n },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n internalValue.value = val\n modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n dateTimePickerVariants({\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n fullWidth: props.fullWidth,\n }),\n)\n</script>\n\n<template>\n <DatePickerRoot\n v-model=\"modelValue\"\n v-model:open=\"openModel\"\n :default-value=\"defaultValue\"\n :default-open=\"defaultOpen\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-unavailable=\"isDateUnavailable\"\n :is-date-disabled=\"isDateDisabled\"\n :locale=\"locale\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\n :class=\"composeClassName(slotFns.base(), props.class)\"\n data-slot=\"date-time-picker\"\n >\n <DateInput\n :model-value=\"internalValue\"\n :variant=\"variant\"\n :size=\"size\"\n :color=\"color\"\n :label-placement=\"labelPlacement\"\n :full-width=\"fullWidth\"\n :default-value=\"defaultValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :locale=\"locale\"\n :label=\"label\"\n :description=\"description\"\n :error-message=\"errorMessage\"\n :is-invalid=\"isInvalid\"\n :is-disabled=\"isDisabled\"\n :is-read-only=\"isReadOnly\"\n :is-required=\"isRequired\"\n :name=\"name\"\n :hide-time-zone=\"hideTimeZone\"\n @update:model-value=\"onInputChange\"\n >\n <template #endContent>\n <DatePickerTrigger\n :class=\"slotFns.trigger()\"\n aria-label=\"Open date time picker\"\n @mousedown.prevent\n >\n <slot name=\"selectorIcon\">\n <svg\n :class=\"slotFns.triggerIndicator()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n x=\"3\"\n y=\"4\"\n width=\"18\"\n height=\"18\"\n rx=\"2\"\n ry=\"2\"\n />\n <line\n x1=\"16\"\n y1=\"2\"\n x2=\"16\"\n y2=\"6\"\n />\n <line\n x1=\"8\"\n y1=\"2\"\n x2=\"8\"\n y2=\"6\"\n />\n <line\n x1=\"3\"\n y1=\"10\"\n x2=\"21\"\n y2=\"10\"\n />\n </svg>\n </slot>\n </DatePickerTrigger>\n </template>\n </DateInput>\n\n <DatePickerContent\n :class=\"slotFns.popover()\"\n data-slot=\"popover\"\n :side-offset=\"8\"\n >\n <!-- Step header -->\n <div\n :class=\"slotFns.stepHeader()\"\n data-slot=\"step-header\"\n >\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n aria-label=\"Previous step\"\n data-slot=\"back-button\"\n @click=\"goBack\"\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n </button>\n\n <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n data-slot=\"forward-button\"\n @click=\"goForward\"\n >\n <span\n v-if=\"activeStep === 'time'\"\n :class=\"slotFns.doneLabel()\"\n >Done</span>\n <svg\n v-else\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </button>\n </div>\n\n <!-- Sliding panels -->\n <div\n :class=\"slotFns.panelWrap()\"\n style=\"overflow: hidden;\"\n >\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n v-if=\"activeStep === 'date'\"\n key=\"date\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n class=\"px-3 pb-3\"\n data-slot=\"calendar-panel\"\n >\n <Calendar\n v-model=\"calendarValue\"\n :default-value=\"defaultValue\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-disabled=\"isDateDisabled\"\n :is-date-unavailable=\"isDateUnavailable\"\n :locale=\"locale\"\n :readonly=\"isReadOnly\"\n :disabled=\"isDisabled\"\n />\n </motion.div>\n\n <motion.div\n v-else-if=\"activeStep === 'time'\"\n key=\"time\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n >\n <DateTimePickerTimeScroller\n :model-value=\"internalValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n @update:model-value=\"onTimeUpdate\"\n />\n </motion.div>\n </AnimatePresence>\n </div>\n </DatePickerContent>\n </DatePickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -185,7 +185,6 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			}, {
 				default: withCtx(() => [createVNode(DateInput_default, {
 					"model-value": internalValue.value,
-					"onUpdate:modelValue": onInputChange,
 					variant: __props.variant,
 					size: __props.size,
 					color: __props.color,
@@ -203,7 +202,8 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"is-read-only": __props.isReadOnly,
 					"is-required": __props.isRequired,
 					name: __props.name,
-					"hide-time-zone": __props.hideTimeZone
+					"hide-time-zone": __props.hideTimeZone,
+					"onUpdate:modelValue": onInputChange
 				}, {
 					endContent: withCtx(() => [createVNode(unref(DatePickerTrigger), {
 						class: normalizeClass(slotFns.value.trigger()),

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n DatePickerRoot,\n DatePickerTrigger,\n DatePickerContent,\n} from 'reka-ui'\nimport {\n type DateValue,\n CalendarDateTime,\n toCalendarDate,\n today,\n getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' \| 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n variant?: 'flat' \| 'bordered' \| 'faded' \| 'underlined'\n size?: 'sm' \| 'md' \| 'lg'\n color?: 'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'\n labelPlacement?: 'inside' \| 'outside' \| 'outside-left'\n fullWidth?: boolean\n label?: string\n description?: string\n errorMessage?: string\n isInvalid?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n name?: string\n class?: string\n granularity?: 'minute' \| 'second'\n hourCycle?: 12 \| 24\n hideTimeZone?: boolean\n defaultOpen?: boolean\n closeOnSelect?: boolean\n locale?: string\n defaultValue?: CalendarDateTime\n minValue?: CalendarDateTime\n maxValue?: CalendarDateTime\n isDateUnavailable?: (date: DateValue) => boolean\n isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadOnly: false,\n isRequired: false,\n hideTimeZone: false,\n granularity: 'minute',\n defaultOpen: false,\n closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime \| null \| undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n date: 'Pick a date',\n time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue \| null \| undefined) {\n if (!(v instanceof CalendarDateTime)) return\n internalValue.value = v\n modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 \| -1>(1)\n\nwatch(openModel, (open) => {\n if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n const from = STEP_ORDER.indexOf(activeStep.value)\n const to = STEP_ORDER.indexOf(step)\n direction.value = to > from ? 1 : -1\n activeStep.value = step\n}\n\nfunction goBack() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx < STEP_ORDER.length - 1) {\n goTo(STEP_ORDER[idx + 1])\n } else if (props.closeOnSelect) {\n openModel.value = false\n }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue \| undefined>({\n // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n // onDateChange. The setter reconstructs the full CalendarDateTime.\n get: () => toCalendarDate(internalValue.value),\n set: (val) => {\n if (!val) return\n internalValue.value = internalValue.value.set({\n year: val.year,\n month: val.month,\n day: val.day,\n })\n modelValue.value = internalValue.value\n goTo('time')\n },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n internalValue.value = val\n modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n dateTimePickerVariants({\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n fullWidth: props.fullWidth,\n }),\n)\n</script>\n\n<template>\n <DatePickerRoot\n v-model=\"modelValue\"\n v-model:open=\"openModel\"\n :default-value=\"defaultValue\"\n :default-open=\"defaultOpen\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-unavailable=\"isDateUnavailable\"\n :is-date-disabled=\"isDateDisabled\"\n :locale=\"locale\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\n :class=\"composeClassName(slotFns.base(), props.class)\"\n data-slot=\"date-time-picker\"\n >\n <DateInput\n :model-value=\"internalValue\"\n @update:model-value=\"onInputChange\"\n :variant=\"variant\"\n :size=\"size\"\n :color=\"color\"\n :label-placement=\"labelPlacement\"\n :full-width=\"fullWidth\"\n :default-value=\"defaultValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :locale=\"locale\"\n :label=\"label\"\n :description=\"description\"\n :error-message=\"errorMessage\"\n :is-invalid=\"isInvalid\"\n :is-disabled=\"isDisabled\"\n :is-read-only=\"isReadOnly\"\n :is-required=\"isRequired\"\n :name=\"name\"\n :hide-time-zone=\"hideTimeZone\"\n >\n <template #endContent>\n <DatePickerTrigger\n :class=\"slotFns.trigger()\"\n aria-label=\"Open date time picker\"\n @mousedown.prevent\n >\n <slot name=\"selectorIcon\">\n <svg\n :class=\"slotFns.triggerIndicator()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" />\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" />\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\" />\n </svg>\n </slot>\n </DatePickerTrigger>\n </template>\n </DateInput>\n\n <DatePickerContent\n :class=\"slotFns.popover()\"\n data-slot=\"popover\"\n :side-offset=\"8\"\n >\n <!-- Step header -->\n <div :class=\"slotFns.stepHeader()\" data-slot=\"step-header\">\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n aria-label=\"Previous step\"\n data-slot=\"back-button\"\n @click=\"goBack\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n </button>\n\n <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n data-slot=\"forward-button\"\n @click=\"goForward\"\n >\n <span v-if=\"activeStep === 'time'\" :class=\"slotFns.doneLabel()\">Done</span>\n <svg v-else width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </button>\n </div>\n\n <!-- Sliding panels -->\n <div :class=\"slotFns.panelWrap()\" style=\"overflow: hidden;\">\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n v-if=\"activeStep === 'date'\"\n key=\"date\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n class=\"px-3 pb-3\"\n data-slot=\"calendar-panel\"\n >\n <Calendar\n v-model=\"calendarValue\"\n :default-value=\"defaultValue\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-disabled=\"isDateDisabled\"\n :is-date-unavailable=\"isDateUnavailable\"\n :locale=\"locale\"\n :readonly=\"isReadOnly\"\n :disabled=\"isDisabled\"\n />\n </motion.div>\n\n <motion.div\n v-else-if=\"activeStep === 'time'\"\n key=\"time\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n >\n <DateTimePickerTimeScroller\n :model-value=\"internalValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n @update:model-value=\"onTimeUpdate\"\n />\n </motion.div>\n\n </AnimatePresence>\n </div>\n </DatePickerContent>\n </DatePickerRoot>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n DatePickerRoot,\n DatePickerTrigger,\n DatePickerContent,\n} from 'reka-ui'\nimport {\n type DateValue,\n CalendarDateTime,\n toCalendarDate,\n today,\n getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' \| 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n variant?: 'flat' \| 'bordered' \| 'faded' \| 'underlined'\n size?: 'sm' \| 'md' \| 'lg'\n color?: 'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'\n labelPlacement?: 'inside' \| 'outside' \| 'outside-left'\n fullWidth?: boolean\n label?: string\n description?: string\n errorMessage?: string\n isInvalid?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n name?: string\n class?: string\n granularity?: 'minute' \| 'second'\n hourCycle?: 12 \| 24\n hideTimeZone?: boolean\n defaultOpen?: boolean\n closeOnSelect?: boolean\n locale?: string\n defaultValue?: CalendarDateTime\n minValue?: CalendarDateTime\n maxValue?: CalendarDateTime\n isDateUnavailable?: (date: DateValue) => boolean\n isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n size: 'md',\n color: 'default',\n labelPlacement: 'inside',\n fullWidth: false,\n isInvalid: false,\n isDisabled: false,\n isReadOnly: false,\n isRequired: false,\n hideTimeZone: false,\n granularity: 'minute',\n defaultOpen: false,\n closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime \| null \| undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n date: 'Pick a date',\n time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue \| null \| undefined) {\n if (!(v instanceof CalendarDateTime)) return\n internalValue.value = v\n modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 \| -1>(1)\n\nwatch(openModel, (open) => {\n if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n const from = STEP_ORDER.indexOf(activeStep.value)\n const to = STEP_ORDER.indexOf(step)\n direction.value = to > from ? 1 : -1\n activeStep.value = step\n}\n\nfunction goBack() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n const idx = STEP_ORDER.indexOf(activeStep.value)\n if (idx < STEP_ORDER.length - 1) {\n goTo(STEP_ORDER[idx + 1])\n } else if (props.closeOnSelect) {\n openModel.value = false\n }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue \| undefined>({\n // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n // onDateChange. The setter reconstructs the full CalendarDateTime.\n get: () => toCalendarDate(internalValue.value),\n set: (val) => {\n if (!val) return\n internalValue.value = internalValue.value.set({\n year: val.year,\n month: val.month,\n day: val.day,\n })\n modelValue.value = internalValue.value\n goTo('time')\n },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n internalValue.value = val\n modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n dateTimePickerVariants({\n isInvalid: props.isInvalid,\n isDisabled: props.isDisabled,\n fullWidth: props.fullWidth,\n }),\n)\n</script>\n\n<template>\n <DatePickerRoot\n v-model=\"modelValue\"\n v-model:open=\"openModel\"\n :default-value=\"defaultValue\"\n :default-open=\"defaultOpen\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-unavailable=\"isDateUnavailable\"\n :is-date-disabled=\"isDateDisabled\"\n :locale=\"locale\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadOnly\"\n :name=\"name\"\n :class=\"composeClassName(slotFns.base(), props.class)\"\n data-slot=\"date-time-picker\"\n >\n <DateInput\n :model-value=\"internalValue\"\n :variant=\"variant\"\n :size=\"size\"\n :color=\"color\"\n :label-placement=\"labelPlacement\"\n :full-width=\"fullWidth\"\n :default-value=\"defaultValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n :locale=\"locale\"\n :label=\"label\"\n :description=\"description\"\n :error-message=\"errorMessage\"\n :is-invalid=\"isInvalid\"\n :is-disabled=\"isDisabled\"\n :is-read-only=\"isReadOnly\"\n :is-required=\"isRequired\"\n :name=\"name\"\n :hide-time-zone=\"hideTimeZone\"\n @update:model-value=\"onInputChange\"\n >\n <template #endContent>\n <DatePickerTrigger\n :class=\"slotFns.trigger()\"\n aria-label=\"Open date time picker\"\n @mousedown.prevent\n >\n <slot name=\"selectorIcon\">\n <svg\n :class=\"slotFns.triggerIndicator()\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n x=\"3\"\n y=\"4\"\n width=\"18\"\n height=\"18\"\n rx=\"2\"\n ry=\"2\"\n />\n <line\n x1=\"16\"\n y1=\"2\"\n x2=\"16\"\n y2=\"6\"\n />\n <line\n x1=\"8\"\n y1=\"2\"\n x2=\"8\"\n y2=\"6\"\n />\n <line\n x1=\"3\"\n y1=\"10\"\n x2=\"21\"\n y2=\"10\"\n />\n </svg>\n </slot>\n </DatePickerTrigger>\n </template>\n </DateInput>\n\n <DatePickerContent\n :class=\"slotFns.popover()\"\n data-slot=\"popover\"\n :side-offset=\"8\"\n >\n <!-- Step header -->\n <div\n :class=\"slotFns.stepHeader()\"\n data-slot=\"step-header\"\n >\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n aria-label=\"Previous step\"\n data-slot=\"back-button\"\n @click=\"goBack\"\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n </button>\n\n <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n <button\n type=\"button\"\n :class=\"slotFns.navButton()\"\n :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n data-slot=\"forward-button\"\n @click=\"goForward\"\n >\n <span\n v-if=\"activeStep === 'time'\"\n :class=\"slotFns.doneLabel()\"\n >Done</span>\n <svg\n v-else\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"9 18 15 12 9 6\" />\n </svg>\n </button>\n </div>\n\n <!-- Sliding panels -->\n <div\n :class=\"slotFns.panelWrap()\"\n style=\"overflow: hidden;\"\n >\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n v-if=\"activeStep === 'date'\"\n key=\"date\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n class=\"px-3 pb-3\"\n data-slot=\"calendar-panel\"\n >\n <Calendar\n v-model=\"calendarValue\"\n :default-value=\"defaultValue\"\n :min-value=\"minValue\"\n :max-value=\"maxValue\"\n :is-date-disabled=\"isDateDisabled\"\n :is-date-unavailable=\"isDateUnavailable\"\n :locale=\"locale\"\n :readonly=\"isReadOnly\"\n :disabled=\"isDisabled\"\n />\n </motion.div>\n\n <motion.div\n v-else-if=\"activeStep === 'time'\"\n key=\"time\"\n :initial=\"panelInitial\"\n :animate=\"panelAnimate\"\n :exit=\"panelExit\"\n :transition=\"{ duration: 0.15 }\"\n >\n <DateTimePickerTimeScroller\n :model-value=\"internalValue\"\n :granularity=\"granularity\"\n :hour-cycle=\"hourCycle\"\n @update:model-value=\"onTimeUpdate\"\n />\n </motion.div>\n </AnimatePresence>\n </div>\n </DatePickerContent>\n </DatePickerRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/form/Form.js ADDED Viewed

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

package/dist/components/form/Form.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n defineProps<{\n validationMode?: ValidationMode\n isDisabled?: boolean\n class?: string\n }>(),\n {\n validationMode: 'on-submit',\n isDisabled: false,\n class: undefined,\n },\n)\n\nconst emit = defineEmits<{\n submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n invalid: [errors: Record<string, string>]\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst fields = new Map<string, FieldRegistration>()\n\nfunction registerField(reg: FieldRegistration): void {\n fields.set(reg.name, reg)\n}\n\nfunction unregisterField(name: string): void {\n fields.delete(name)\n const next = { ...errors.value }\n delete next[name]\n errors.value = next\n}\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n const field = fields.get(name)\n if (!field) return\n const error = await runValidation(field.getValue(), field.rules, field.validate)\n const next = { ...errors.value }\n if (error) {\n next[name] = error\n } else {\n delete next[name]\n }\n errors.value = next\n}\n\nfunction setErrors(newErrors: Record<string, string>): void {\n errors.value = { ...errors.value, ...newErrors }\n isSubmitting.value = false\n}\n\nasync function handleSubmit(): Promise<void> {\n isSubmitting.value = true\n\n const results = await Promise.all(\n [...fields.entries()].map(async ([name, field]) => {\n const error = await runValidation(field.getValue(), field.rules, field.validate)\n return { name, error }\n }),\n )\n\n const nextErrors: Record<string, string> = {}\n for (const { name, error } of results) {\n if (error) nextErrors[name] = error\n }\n\n if (Object.keys(nextErrors).length > 0) {\n errors.value = nextErrors\n isSubmitting.value = false\n emit('invalid', nextErrors)\n return\n }\n\n errors.value = {}\n\n const values: Record<string, unknown> = {}\n for (const [name, field] of fields.entries()) {\n values[name] = field.getValue()\n }\n\n emit('submit', { values, setErrors })\n}\n\nconst ctx: FormContext = {\n errors,\n isSubmitting,\n isDisabled: computed(() => props.isDisabled),\n validationMode: computed(() => props.validationMode),\n registerField,\n unregisterField,\n triggerFieldValidation,\n setErrors,\n}\n\nprovide(formContextKey, ctx)\n</script>\n\n<template>\n <form\n :class=\"props.class\"\n novalidate\n @submit.prevent=\"handleSubmit\"\n >\n <slot\n :is-submitting=\"isSubmitting\"\n :is-disabled=\"props.isDisabled\"\n :errors=\"errors\"\n />\n </form>\n</template>\n"],"mappings":""}

package/dist/components/form/Form.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,97 @@
+import { formContextKey } from "./form.context.js";
+import { runValidation } from "./validation.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, ref, renderSlot, withModifiers } from "vue";
+//#region src/components/form/Form.vue?vue&type=script&setup=true&lang.ts
+var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: {
+		validationMode: { default: "on-submit" },
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		class: { default: void 0 }
+	},
+	emits: ["submit", "invalid"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const errors = ref({});
+		const isSubmitting = ref(false);
+		const fields = /* @__PURE__ */ new Map();
+		function registerField(reg) {
+			fields.set(reg.name, reg);
+		}
+		function unregisterField(name) {
+			fields.delete(name);
+			const next = { ...errors.value };
+			delete next[name];
+			errors.value = next;
+		}
+		async function triggerFieldValidation(name) {
+			const field = fields.get(name);
+			if (!field) return;
+			const error = await runValidation(field.getValue(), field.rules, field.validate);
+			const next = { ...errors.value };
+			if (error) next[name] = error;
+			else delete next[name];
+			errors.value = next;
+		}
+		function setErrors(newErrors) {
+			errors.value = {
+				...errors.value,
+				...newErrors
+			};
+			isSubmitting.value = false;
+		}
+		async function handleSubmit() {
+			isSubmitting.value = true;
+			const results = await Promise.all([...fields.entries()].map(async ([name, field]) => {
+				return {
+					name,
+					error: await runValidation(field.getValue(), field.rules, field.validate)
+				};
+			}));
+			const nextErrors = {};
+			for (const { name, error } of results) if (error) nextErrors[name] = error;
+			if (Object.keys(nextErrors).length > 0) {
+				errors.value = nextErrors;
+				isSubmitting.value = false;
+				emit("invalid", nextErrors);
+				return;
+			}
+			errors.value = {};
+			const values = {};
+			for (const [name, field] of fields.entries()) values[name] = field.getValue();
+			emit("submit", {
+				values,
+				setErrors
+			});
+		}
+		provide(formContextKey, {
+			errors,
+			isSubmitting,
+			isDisabled: computed(() => props.isDisabled),
+			validationMode: computed(() => props.validationMode),
+			registerField,
+			unregisterField,
+			triggerFieldValidation,
+			setErrors
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: normalizeClass(props.class),
+				novalidate: "",
+				onSubmit: withModifiers(handleSubmit, ["prevent"])
+			}, [renderSlot(_ctx.$slots, "default", {
+				isSubmitting: isSubmitting.value,
+				isDisabled: props.isDisabled,
+				errors: errors.value
+			})], 34);
+		};
+	}
+});
+//#endregion
+export { Form_vue_vue_type_script_setup_true_lang_default as default };
+//# sourceMappingURL=Form.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/form/Form.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Form.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/Form.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, provide } from 'vue'\nimport { formContextKey } from './form.context'\nimport { runValidation } from './validation'\nimport type { ValidationMode, FieldRegistration, FormContext } from './form.context'\n\nconst props = withDefaults(\n defineProps<{\n validationMode?: ValidationMode\n isDisabled?: boolean\n class?: string\n }>(),\n {\n validationMode: 'on-submit',\n isDisabled: false,\n class: undefined,\n },\n)\n\nconst emit = defineEmits<{\n submit: [payload: { values: Record<string, unknown>; setErrors: (e: Record<string, string>) => void }]\n invalid: [errors: Record<string, string>]\n}>()\n\nconst errors = ref<Record<string, string>>({})\nconst isSubmitting = ref(false)\nconst fields = new Map<string, FieldRegistration>()\n\nfunction registerField(reg: FieldRegistration): void {\n fields.set(reg.name, reg)\n}\n\nfunction unregisterField(name: string): void {\n fields.delete(name)\n const next = { ...errors.value }\n delete next[name]\n errors.value = next\n}\n\nasync function triggerFieldValidation(name: string): Promise<void> {\n const field = fields.get(name)\n if (!field) return\n const error = await runValidation(field.getValue(), field.rules, field.validate)\n const next = { ...errors.value }\n if (error) {\n next[name] = error\n } else {\n delete next[name]\n }\n errors.value = next\n}\n\nfunction setErrors(newErrors: Record<string, string>): void {\n errors.value = { ...errors.value, ...newErrors }\n isSubmitting.value = false\n}\n\nasync function handleSubmit(): Promise<void> {\n isSubmitting.value = true\n\n const results = await Promise.all(\n [...fields.entries()].map(async ([name, field]) => {\n const error = await runValidation(field.getValue(), field.rules, field.validate)\n return { name, error }\n }),\n )\n\n const nextErrors: Record<string, string> = {}\n for (const { name, error } of results) {\n if (error) nextErrors[name] = error\n }\n\n if (Object.keys(nextErrors).length > 0) {\n errors.value = nextErrors\n isSubmitting.value = false\n emit('invalid', nextErrors)\n return\n }\n\n errors.value = {}\n\n const values: Record<string, unknown> = {}\n for (const [name, field] of fields.entries()) {\n values[name] = field.getValue()\n }\n\n emit('submit', { values, setErrors })\n}\n\nconst ctx: FormContext = {\n errors,\n isSubmitting,\n isDisabled: computed(() => props.isDisabled),\n validationMode: computed(() => props.validationMode),\n registerField,\n unregisterField,\n triggerFieldValidation,\n setErrors,\n}\n\nprovide(formContextKey, ctx)\n</script>\n\n<template>\n <form\n :class=\"props.class\"\n novalidate\n @submit.prevent=\"handleSubmit\"\n >\n <slot\n :is-submitting=\"isSubmitting\"\n :is-disabled=\"props.isDisabled\"\n :errors=\"errors\"\n />\n </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAad,MAAM,OAAO;EAKb,MAAM,SAAS,IAA4B,EAAE,CAAA;EAC7C,MAAM,eAAe,IAAI,MAAK;EAC9B,MAAM,yBAAS,IAAI,KAA+B;EAElD,SAAS,cAAc,KAA8B;AACnD,UAAO,IAAI,IAAI,MAAM,IAAG;;EAG1B,SAAS,gBAAgB,MAAoB;AAC3C,UAAO,OAAO,KAAI;GAClB,MAAM,OAAO,EAAE,GAAG,OAAO,OAAM;AAC/B,UAAO,KAAK;AACZ,UAAO,QAAQ;;EAGjB,eAAe,uBAAuB,MAA6B;GACjE,MAAM,QAAQ,OAAO,IAAI,KAAI;AAC7B,OAAI,CAAC,MAAO;GACZ,MAAM,QAAQ,MAAM,cAAc,MAAM,UAAU,EAAE,MAAM,OAAO,MAAM,SAAQ;GAC/E,MAAM,OAAO,EAAE,GAAG,OAAO,OAAM;AAC/B,OAAI,MACF,MAAK,QAAQ;OAEb,QAAO,KAAK;AAEd,UAAO,QAAQ;;EAGjB,SAAS,UAAU,WAAyC;AAC1D,UAAO,QAAQ;IAAE,GAAG,OAAO;IAAO,GAAG;IAAU;AAC/C,gBAAa,QAAQ;;EAGvB,eAAe,eAA8B;AAC3C,gBAAa,QAAQ;GAErB,MAAM,UAAU,MAAM,QAAQ,IAC5B,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,WAAW;AAEjD,WAAO;KAAE;KAAM,OADD,MAAM,cAAc,MAAM,UAAU,EAAE,MAAM,OAAO,MAAM,SAAQ;KAC1D;KACrB,CACJ;GAEA,MAAM,aAAqC,EAAC;AAC5C,QAAK,MAAM,EAAE,MAAM,WAAW,QAC5B,KAAI,MAAO,YAAW,QAAQ;AAGhC,OAAI,OAAO,KAAK,WAAW,CAAC,SAAS,GAAG;AACtC,WAAO,QAAQ;AACf,iBAAa,QAAQ;AACrB,SAAK,WAAW,WAAU;AAC1B;;AAGF,UAAO,QAAQ,EAAC;GAEhB,MAAM,SAAkC,EAAC;AACzC,QAAK,MAAM,CAAC,MAAM,UAAU,OAAO,SAAS,CAC1C,QAAO,QAAQ,MAAM,UAAS;AAGhC,QAAK,UAAU;IAAE;IAAQ;IAAW,CAAA;;AActC,UAAQ,gBAXiB;GACvB;GACA;GACA,YAAY,eAAe,MAAM,WAAW;GAC5C,gBAAgB,eAAe,MAAM,eAAe;GACpD;GACA;GACA;GACA;GACF,CAE2B;;uBAIzB,mBAUO,QAAA;IATJ,OAAK,eAAE,MAAM,MAAK;IACnB,YAAA;IACC,UAAM,cAAU,cAAY,CAAA,UAAA,CAAA;OAE7B,WAIE,KAAA,QAAA,WAAA;IAHC,cAAe,aAAA;IACf,YAAa,MAAM;IACnB,QAAQ,OAAA"}

package/dist/components/form/FormField.js ADDED Viewed

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

package/dist/components/form/FormField.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormField.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n name: string\n rules?: FieldRules\n validate?: CustomValidator\n /** Override validation mode — used in standalone mode (outside <Form>) or to override the Form's mode for a single field. */\n validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// Standalone mode: local error state when used outside <Form>\nconst localError = ref<string | undefined>(undefined)\n\nconst fieldError = computed<string | undefined>(() =>\n ctx ? ctx.errors.value[props.name] : localError.value,\n)\n\n// Once a field has shown an error, validate on every change so errors clear as the user types.\nconst hasBeenInvalid = ref(false)\nwatch(fieldError, (error) => { if (error) hasBeenInvalid.value = true })\nconst isInvalid = computed(() => !!fieldError.value)\nconst isDisabled = computed(() => ctx?.isDisabled.value ?? false)\nconst validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? 'on-submit')\n\nonMounted(() => {\n ctx?.registerField({\n name: props.name,\n getValue: () => modelValue.value,\n rules: props.rules,\n validate: props.validate,\n })\n})\n\nonUnmounted(() => {\n ctx?.unregisterField(props.name)\n})\n\nasync function triggerValidation(val: unknown): Promise<void> {\n const error = await runValidation(val, props.rules, props.validate)\n if (ctx) {\n const next = { ...ctx.errors.value }\n if (error) {\n next[props.name] = error\n } else {\n delete next[props.name]\n }\n ctx.errors.value = next\n } else {\n localError.value = error\n }\n}\n\nasync function handleUpdate(val: unknown): Promise<void> {\n modelValue.value = val\n if (validationMode.value === 'on-change' || hasBeenInvalid.value) {\n await triggerValidation(val)\n }\n}\n\nasync function handleBlur(): Promise<void> {\n if (validationMode.value === 'on-blur') {\n await triggerValidation(modelValue.value)\n }\n}\n\nconst fieldProps = computed(() => ({\n name: props.name,\n modelValue: modelValue.value,\n 'onUpdate:modelValue': handleUpdate,\n isInvalid: isInvalid.value,\n errorMessage: fieldError.value,\n isDisabled: isDisabled.value,\n onBlur: handleBlur,\n}))\n</script>\n\n<template>\n <slot :field-props=\"fieldProps\" />\n</template>\n"],"mappings":""}

package/dist/components/form/FormField.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { useFormInject } from "./form.context.js";
+import { runValidation } from "./validation.js";
+import { computed, defineComponent, mergeModels, onMounted, onUnmounted, ref, renderSlot, useModel, watch } from "vue";
+//#region src/components/form/FormField.vue?vue&type=script&setup=true&lang.ts
+var FormField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "FormField",
+	props: /* @__PURE__ */ mergeModels({
+		name: {},
+		rules: {},
+		validate: { type: Function },
+		validationMode: {}
+	}, {
+		"modelValue": { default: void 0 },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		const ctx = useFormInject();
+		const localError = ref(void 0);
+		const fieldError = computed(() => ctx ? ctx.errors.value[props.name] : localError.value);
+		const hasBeenInvalid = ref(false);
+		watch(fieldError, (error) => {
+			if (error) hasBeenInvalid.value = true;
+		});
+		const isInvalid = computed(() => !!fieldError.value);
+		const isDisabled = computed(() => ctx?.isDisabled.value ?? false);
+		const validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? "on-submit");
+		onMounted(() => {
+			ctx?.registerField({
+				name: props.name,
+				getValue: () => modelValue.value,
+				rules: props.rules,
+				validate: props.validate
+			});
+		});
+		onUnmounted(() => {
+			ctx?.unregisterField(props.name);
+		});
+		async function triggerValidation(val) {
+			const error = await runValidation(val, props.rules, props.validate);
+			if (ctx) {
+				const next = { ...ctx.errors.value };
+				if (error) next[props.name] = error;
+				else delete next[props.name];
+				ctx.errors.value = next;
+			} else localError.value = error;
+		}
+		async function handleUpdate(val) {
+			modelValue.value = val;
+			if (validationMode.value === "on-change" || hasBeenInvalid.value) await triggerValidation(val);
+		}
+		async function handleBlur() {
+			if (validationMode.value === "on-blur") await triggerValidation(modelValue.value);
+		}
+		const fieldProps = computed(() => ({
+			name: props.name,
+			modelValue: modelValue.value,
+			"onUpdate:modelValue": handleUpdate,
+			isInvalid: isInvalid.value,
+			errorMessage: fieldError.value,
+			isDisabled: isDisabled.value,
+			onBlur: handleBlur
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", { fieldProps: fieldProps.value });
+		};
+	}
+});
+//#endregion
+export { FormField_vue_vue_type_script_setup_true_lang_default as default };
+//# sourceMappingURL=FormField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/form/FormField.vue_vue_type_script_setup_true_lang.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/form/FormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { useFormInject } from './form.context'\nimport { runValidation } from './validation'\nimport type { FieldRules, CustomValidator } from './validation'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = defineProps<{\n name: string\n rules?: FieldRules\n validate?: CustomValidator\n /** Override validation mode — used in standalone mode (outside <Form>) or to override the Form's mode for a single field. */\n validationMode?: 'on-submit' | 'on-blur' | 'on-change'\n}>()\n\nconst modelValue = defineModel<unknown>({ default: undefined })\n\nconst ctx = useFormInject()\n\n// Standalone mode: local error state when used outside <Form>\nconst localError = ref<string | undefined>(undefined)\n\nconst fieldError = computed<string | undefined>(() =>\n ctx ? ctx.errors.value[props.name] : localError.value,\n)\n\n// Once a field has shown an error, validate on every change so errors clear as the user types.\nconst hasBeenInvalid = ref(false)\nwatch(fieldError, (error) => { if (error) hasBeenInvalid.value = true })\nconst isInvalid = computed(() => !!fieldError.value)\nconst isDisabled = computed(() => ctx?.isDisabled.value ?? false)\nconst validationMode = computed(() => props.validationMode ?? ctx?.validationMode.value ?? 'on-submit')\n\nonMounted(() => {\n ctx?.registerField({\n name: props.name,\n getValue: () => modelValue.value,\n rules: props.rules,\n validate: props.validate,\n })\n})\n\nonUnmounted(() => {\n ctx?.unregisterField(props.name)\n})\n\nasync function triggerValidation(val: unknown): Promise<void> {\n const error = await runValidation(val, props.rules, props.validate)\n if (ctx) {\n const next = { ...ctx.errors.value }\n if (error) {\n next[props.name] = error\n } else {\n delete next[props.name]\n }\n ctx.errors.value = next\n } else {\n localError.value = error\n }\n}\n\nasync function handleUpdate(val: unknown): Promise<void> {\n modelValue.value = val\n if (validationMode.value === 'on-change' || hasBeenInvalid.value) {\n await triggerValidation(val)\n }\n}\n\nasync function handleBlur(): Promise<void> {\n if (validationMode.value === 'on-blur') {\n await triggerValidation(modelValue.value)\n }\n}\n\nconst fieldProps = computed(() => ({\n name: props.name,\n modelValue: modelValue.value,\n 'onUpdate:modelValue': handleUpdate,\n isInvalid: isInvalid.value,\n errorMessage: fieldError.value,\n isDisabled: isDisabled.value,\n onBlur: handleBlur,\n}))\n</script>\n\n<template>\n <slot :field-props=\"fieldProps\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAQd,MAAM,aAAa,SAAoB,SAAA,aAAuB;EAE9D,MAAM,MAAM,eAAc;EAG1B,MAAM,aAAa,IAAwB,KAAA,EAAS;EAEpD,MAAM,aAAa,eACjB,MAAM,IAAI,OAAO,MAAM,MAAM,QAAQ,WAAW,MAClD;EAGA,MAAM,iBAAiB,IAAI,MAAK;AAChC,QAAM,aAAa,UAAU;AAAE,OAAI,MAAO,gBAAe,QAAQ;IAAM;EACvE,MAAM,YAAY,eAAe,CAAC,CAAC,WAAW,MAAK;EACnD,MAAM,aAAa,eAAe,KAAK,WAAW,SAAS,MAAK;EAChE,MAAM,iBAAiB,eAAe,MAAM,kBAAkB,KAAK,eAAe,SAAS,YAAW;AAEtG,kBAAgB;AACd,QAAK,cAAc;IACjB,MAAM,MAAM;IACZ,gBAAgB,WAAW;IAC3B,OAAO,MAAM;IACb,UAAU,MAAM;IACjB,CAAA;IACF;AAED,oBAAkB;AAChB,QAAK,gBAAgB,MAAM,KAAI;IAChC;EAED,eAAe,kBAAkB,KAA6B;GAC5D,MAAM,QAAQ,MAAM,cAAc,KAAK,MAAM,OAAO,MAAM,SAAQ;AAClE,OAAI,KAAK;IACP,MAAM,OAAO,EAAE,GAAG,IAAI,OAAO,OAAM;AACnC,QAAI,MACF,MAAK,MAAM,QAAQ;QAEnB,QAAO,KAAK,MAAM;AAEpB,QAAI,OAAO,QAAQ;SAEnB,YAAW,QAAQ;;EAIvB,eAAe,aAAa,KAA6B;AACvD,cAAW,QAAQ;AACnB,OAAI,eAAe,UAAU,eAAe,eAAe,MACzD,OAAM,kBAAkB,IAAG;;EAI/B,eAAe,aAA4B;AACzC,OAAI,eAAe,UAAU,UAC3B,OAAM,kBAAkB,WAAW,MAAK;;EAI5C,MAAM,aAAa,gBAAgB;GACjC,MAAM,MAAM;GACZ,YAAY,WAAW;GACvB,uBAAuB;GACvB,WAAW,UAAU;GACrB,cAAc,WAAW;GACzB,YAAY,WAAW;GACvB,QAAQ;GACT,EAAC;;UAIA,WAAkC,KAAA,QAAA,WAAA,EAA3B,YAAa,WAAA,OAAU,CAAA"}

package/dist/components/form/form.context.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { createContext } from "../../utils/context.js";
+import { inject } from "vue";
+//#region src/components/form/form.context.ts
+var { useProvide: useFormProvide, useInject: _useFormInjectStrict, key: formContextKey } = createContext("Form");
+/**
+* Inject Form context. Returns null when called outside a <Form> — callers
+* handle standalone mode themselves.
+*/
+function useFormInject() {
+	return inject(formContextKey, null);
+}
+//#endregion
+export { formContextKey, useFormInject };
+//# sourceMappingURL=form.context.js.map

package/dist/components/form/form.context.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form.context.js","names":[],"sources":["../../../src/components/form/form.context.ts"],"sourcesContent":["import { inject, type Ref, type ComputedRef } from 'vue'\nimport { createContext } from '../../utils/context'\nimport type { FieldRules, CustomValidator } from './validation'\n\nexport type { FieldRules, CustomValidator }\n\nexport type ValidationMode = 'on-submit' | 'on-blur' | 'on-change'\n\nexport interface FieldRegistration {\n name: string\n getValue: () => unknown\n rules?: FieldRules\n validate?: CustomValidator\n}\n\nexport interface FormContext {\n errors: Ref<Record<string, string>>\n isSubmitting: Ref<boolean>\n isDisabled: ComputedRef<boolean>\n validationMode: ComputedRef<ValidationMode>\n registerField(reg: FieldRegistration): void\n unregisterField(name: string): void\n triggerFieldValidation(name: string): Promise<void>\n setErrors(newErrors: Record<string, string>): void\n}\n\nexport const {\n useProvide: useFormProvide,\n useInject: _useFormInjectStrict,\n key: formContextKey,\n} = createContext<FormContext>('Form')\n\n/**\n * Inject Form context. Returns null when called outside a <Form> — callers\n * handle standalone mode themselves.\n */\nexport function useFormInject(): FormContext | null {\n return inject(formContextKey, null)\n}\n"],"mappings":";;;AA0BA,IAAa,EACX,YAAY,gBACZ,WAAW,sBACX,KAAK,mBACH,cAA2B,OAAO;;;;;AAMtC,SAAgB,gBAAoC;AAClD,QAAO,OAAO,gBAAgB,KAAK"}