@astryx-vue/core 0.1.0 → 0.1.3

package/dist/{DateInput-zJAdXByM.js → DateInput-D2ErjXYO.js}

@@ -1,5 +1,5 @@
-import { t as _sfc_main$1 } from "./Calendar-DpYFXwgb.js";
-import { a as useAstryxMessages } from "./locale-56lkR7OK.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { t as _sfc_main$1 } from "./Calendar-CYhGDT6f.js";
 import { t as _sfc_main$2 } from "./Popover-Crhk9PNP.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, useId, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/date-input.css";
@@ -11,10 +11,13 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = ["disabled", "aria-label"];
 const _hoisted_4 = [
+	"id",
 	"value",
 	"placeholder",
 	"disabled",
 	"aria-label",
+	"aria-describedby",
+	"aria-controls",
 	"aria-expanded",
 	"title"
 ];
@@ -23,11 +26,14 @@ const _hoisted_6 = {
 	key: 2,
 	class: "astryx-date-input-suffix"
 };
-const _hoisted_7 = ["name", "value"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = ["name", "value"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDateInput",
 	__name: "DateInput",
 	props: {
+		id: {},
+		describedBy: {},
 		modelValue: { default: null },
 		placeholder: {},
 		min: {},
@@ -52,8 +58,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const inputId = `astryx-date-input-${useId()}`;
-		const popupId = `${inputId}-popup`;
+		const generatedId = `astryx-date-input-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const popupId = computed(() => `${inputId.value}-popup`);
 		const messages = useAstryxMessages();
 		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.dateInput.placeholder);
 		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.dateInput.clear(props.label));
@@ -133,7 +140,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				label: dialogLabel.value,
 				onOpenChange
 			}, {
-				content: withCtx(() => [createElementVNode("div", { id: popupId }, [createVNode(_sfc_main$1, {
+				content: withCtx(() => [createElementVNode("div", { id: popupId.value }, [createVNode(_sfc_main$1, {
 					"model-value": props.modelValue,
 					min: props.min,
 					max: props.max,
@@ -144,7 +151,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"min",
 					"max",
 					"is-date-disabled"
-				])])]),
+				])], 8, _hoisted_7)]),
 				default: withCtx(() => [createElementVNode("div", {
 					class: "astryx-date-input-wrapper",
 					"data-disabled": props.disabled ? "true" : void 0,
@@ -185,7 +192,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						})
 					], -1)])], 8, _hoisted_3),
 					createElementVNode("input", {
-						id: inputId,
+						id: inputId.value,
 						ref_key: "inputRef",
 						ref: inputRef,
 						type: "text",
@@ -195,7 +202,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						placeholder: resolvedPlaceholder.value,
 						disabled: props.disabled,
 						"aria-label": props.label,
-						"aria-controls": popupId,
+						"aria-describedby": props.describedBy,
+						"aria-controls": popupId.value,
 						"aria-expanded": isOpen.value,
 						"aria-haspopup": "dialog",
 						title: props.disabledReason,
@@ -234,7 +242,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				type: "hidden",
 				name: props.name,
 				value: formatDate(props.modelValue)
-			}, null, 8, _hoisted_7)) : createCommentVNode("v-if", true)], 2);
+			}, null, 8, _hoisted_8)) : createCommentVNode("v-if", true)], 2);
 		};
 	}
 });

package/dist/DateRangeInput/index.d.ts

@@ -0,0 +1,2 @@
+import { $n as DateRangeInputEmits, Qn as DateRange, Zn as _default, er as DateRangeInputProps, tr as DateRangePreset } from "../index-Df2YvC8o.js";
+export { type DateRange, _default as DateRangeInput, type DateRangeInputEmits, type DateRangeInputProps, type DateRangePreset };

package/dist/DateRangeInput/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../DateRangeInput-fmQlr_A7.js";
+export { _sfc_main as DateRangeInput };

package/dist/DateRangeInput-fmQlr_A7.js

@@ -0,0 +1,385 @@
+import { a as todayISODate, c as formatDateRange, f as orderRange, l as isDayOutsideSpan, n as buildMonthGrid, o as applyRangeClick, p as resolveWeekStart, t as addMonths, u as isRangeWithinSpan } from "./useMonthGrid-CmJsZTcB.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-D6ECRdc5.js";
+import { n as weekdayNames, t as formatCalendarMonth } from "./locale-Cpk_nrLA.js";
+import { t as _sfc_main$2 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$3 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$4 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$5 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$6 } from "./Popover-Crhk9PNP.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useId, useModel, withCtx } from "vue";
+import "../styles/calendar.css";
+import "../styles/date-range-input.css";
+import "../styles/bordered-control.css";
+//#region src/DateRangeInput/RangeCalendar.vue
+const _hoisted_1$1 = { class: "astryx-calendar astryx-date-range-calendar" };
+const _hoisted_2$1 = { class: "astryx-calendar-header" };
+const _hoisted_3$1 = ["aria-label"];
+const _hoisted_4$1 = { class: "astryx-calendar-month-year" };
+const _hoisted_5$1 = ["aria-label"];
+const _hoisted_6$1 = { class: "astryx-date-range-months" };
+const _hoisted_7$1 = { class: "astryx-calendar-weekdays" };
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = [
+	"disabled",
+	"aria-pressed",
+	"aria-current",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+];
+const _hoisted_10 = { class: "astryx-calendar-day" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "RangeCalendar",
+	props: /*@__PURE__*/ mergeModels({
+		cursorYear: {},
+		cursorMonth: {},
+		monthCount: { default: 2 },
+		range: { default: null },
+		pending: { default: null },
+		min: {},
+		max: {},
+		minRangeSpan: { default: 1 },
+		maxRangeSpan: {},
+		weekStartsOn: {}
+	}, {
+		"hover": { default: null },
+		"hoverModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["select", "shift"], ["update:hover"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const locale = useAstryxLocale();
+		const messages = useAstryxMessages();
+		const hover = useModel(__props, "hover");
+		const today = todayISODate();
+		const weekStart = computed(() => resolveWeekStart(props.weekStartsOn ?? (locale.value === "zh-CN" ? 1 : 0)));
+		const weekDays = computed(() => {
+			const names = weekdayNames(locale.value, "narrow");
+			const labels = weekdayNames(locale.value, "long");
+			const start = weekStart.value;
+			return Array.from({ length: 7 }, (_, index) => ({
+				name: names[(index + start) % 7],
+				label: labels[(index + start) % 7]
+			}));
+		});
+		const months = computed(() => Array.from({ length: props.monthCount }, (_, index) => {
+			const cursor = addMonths(props.cursorYear, props.cursorMonth, index);
+			return {
+				...cursor,
+				label: formatCalendarMonth(cursor.year, cursor.month, locale.value),
+				weeks: buildMonthGrid(cursor.year, cursor.month, weekStart.value)
+			};
+		}));
+		const headerLabel = computed(() => months.value.map((month) => month.label).join(" – "));
+		const preview = computed(() => {
+			if (props.pending && hover.value && hover.value !== props.pending) return orderRange(props.pending, hover.value);
+			return props.range;
+		});
+		function monthKey(iso) {
+			return iso.slice(0, 7);
+		}
+		function inSpan(day, range) {
+			return range != null && day >= range.start && day <= range.end;
+		}
+		function isDisabled(day) {
+			if (props.min && day < props.min) return true;
+			if (props.max && day > props.max) return true;
+			return isDayOutsideSpan(props.pending, day, props.minRangeSpan, props.maxRangeSpan);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("div", _hoisted_2$1, [
+				createElementVNode("button", {
+					type: "button",
+					class: "astryx-calendar-nav-button",
+					"aria-label": unref(messages).calendar.previousMonth,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("shift", -1))
+				}, [createVNode(_sfc_main$4, {
+					icon: "chevronLeft",
+					size: "sm"
+				})], 8, _hoisted_3$1),
+				createElementVNode("span", _hoisted_4$1, toDisplayString(headerLabel.value), 1),
+				createElementVNode("button", {
+					type: "button",
+					class: "astryx-calendar-nav-button",
+					"aria-label": unref(messages).calendar.nextMonth,
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("shift", 1))
+				}, [createVNode(_sfc_main$4, {
+					icon: "chevronRight",
+					size: "sm"
+				})], 8, _hoisted_5$1)
+			]), createElementVNode("div", _hoisted_6$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month) => {
+				return openBlock(), createElementBlock("div", {
+					key: `${month.year}-${month.month}`,
+					class: "astryx-date-range-month"
+				}, [createElementVNode("div", _hoisted_7$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays.value, (day) => {
+					return openBlock(), createElementBlock("div", {
+						key: day.label,
+						class: "astryx-calendar-weekday",
+						"aria-label": day.label
+					}, toDisplayString(day.name), 9, _hoisted_8);
+				}), 128))]), (openBlock(true), createElementBlock(Fragment, null, renderList(month.weeks, (week, weekIndex) => {
+					return openBlock(), createElementBlock("div", {
+						key: weekIndex,
+						class: "astryx-calendar-row"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+						return openBlock(), createElementBlock("button", {
+							key: day,
+							type: "button",
+							class: normalizeClass(["astryx-calendar-cell", {
+								"is-other-month": monthKey(day) !== `${month.year}-${String(month.month).padStart(2, "0")}`,
+								"is-today": day === unref(today),
+								"is-selected": day === preview.value?.start || day === preview.value?.end || day === __props.pending,
+								"is-in-range": inSpan(day, preview.value),
+								"is-range-start": day === preview.value?.start,
+								"is-range-end": day === preview.value?.end,
+								"is-disabled": isDisabled(day)
+							}]),
+							disabled: isDisabled(day),
+							"aria-pressed": day === preview.value?.start || day === preview.value?.end || void 0,
+							"aria-current": day === unref(today) ? "date" : void 0,
+							onClick: ($event) => emit("select", day),
+							onMouseenter: ($event) => hover.value = day,
+							onMouseleave: _cache[2] || (_cache[2] = ($event) => hover.value = null),
+							onFocus: ($event) => hover.value = day,
+							onBlur: _cache[3] || (_cache[3] = ($event) => hover.value = null)
+						}, [createElementVNode("span", _hoisted_10, toDisplayString(Number(day.slice(8))), 1)], 42, _hoisted_9);
+					}), 128))]);
+				}), 128))]);
+			}), 128))])]);
+		};
+	}
+});
+//#endregion
+//#region src/DateRangeInput/DateRangeInput.vue
+const _hoisted_1 = [
+	"data-size",
+	"data-status",
+	"data-disabled"
+];
+const _hoisted_2 = [
+	"id",
+	"disabled",
+	"aria-describedby",
+	"aria-invalid"
+];
+const _hoisted_3 = ["data-placeholder"];
+const _hoisted_4 = { class: "astryx-date-range-popover" };
+const _hoisted_5 = { class: "astryx-date-range-panel" };
+const _hoisted_6 = {
+	key: 0,
+	class: "astryx-date-range-presets"
+};
+const _hoisted_7 = ["disabled", "onClick"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDateRangeInput",
+	__name: "DateRangeInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		id: {},
+		description: {},
+		placeholder: {},
+		presets: {},
+		monthCount: { default: 2 },
+		min: {},
+		max: {},
+		minRangeSpan: { default: 1 },
+		maxRangeSpan: {},
+		weekStartsOn: {},
+		hasClear: {
+			type: Boolean,
+			default: true
+		},
+		clearLabel: {},
+		size: { default: "md" },
+		isDisabled: { type: Boolean },
+		isRequired: { type: Boolean },
+		isOptional: { type: Boolean },
+		isLabelHidden: { type: Boolean },
+		status: {},
+		statusVariant: { default: "attached" },
+		width: {}
+	}, {
+		"modelValue": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const generatedId = `astryx-date-range-${useId()}`;
+		const inputId = computed(() => props.id ?? generatedId);
+		const open = shallowRef(false);
+		const pending = shallowRef(null);
+		const today = todayISODate();
+		const cursor = shallowRef({
+			year: Number(today.slice(0, 4)),
+			month: Number(today.slice(5, 7))
+		});
+		const display = computed(() => formatDateRange(model.value, locale.value));
+		const placeholder = computed(() => props.placeholder ?? messages.value.dateRangeInput.placeholder);
+		const clearLabel = computed(() => props.clearLabel ?? messages.value.dateRangeInput.clear(props.label));
+		function commit(value) {
+			model.value = value;
+			emit("change", value);
+		}
+		function onSelect(day) {
+			const result = applyRangeClick(pending.value, day, props.minRangeSpan, props.maxRangeSpan);
+			pending.value = result.pending;
+			if (result.commit) {
+				commit(result.commit);
+				open.value = false;
+			}
+		}
+		function onShift(amount) {
+			cursor.value = addMonths(cursor.value.year, cursor.value.month, amount);
+		}
+		function onOpenChange(next) {
+			open.value = next;
+			if (next && model.value) {
+				cursor.value = {
+					year: Number(model.value.start.slice(0, 4)),
+					month: Number(model.value.start.slice(5, 7))
+				};
+				pending.value = null;
+			}
+			if (!next) pending.value = null;
+		}
+		function applyPreset(preset) {
+			const range = preset.getRange();
+			if (!isRangeWithinSpan(range, props.minRangeSpan, props.maxRangeSpan)) return;
+			commit(range);
+			pending.value = null;
+			open.value = false;
+		}
+		function presetDisabled(preset) {
+			return !isRangeWithinSpan(preset.getRange(), props.minRangeSpan, props.maxRangeSpan);
+		}
+		function clear() {
+			pending.value = null;
+			commit(null);
+			open.value = false;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$5, {
+				label: __props.label,
+				"input-id": inputId.value,
+				description: __props.description,
+				width: __props.width,
+				"is-label-hidden": __props.isLabelHidden,
+				"is-disabled": __props.isDisabled,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				status: __props.status,
+				"status-variant": __props.statusVariant
+			}, {
+				default: withCtx((field) => [createVNode(_sfc_main$6, {
+					"is-open": open.value,
+					"is-enabled": !__props.isDisabled,
+					placement: "below",
+					alignment: "start",
+					padding: 0,
+					width: "min(40rem, calc(100vw - 16px))",
+					"has-close-button": false,
+					"is-modal": false,
+					role: "dialog",
+					label: unref(messages).dateRangeInput.dialogLabel,
+					onOpenChange
+				}, {
+					content: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [__props.presets?.length ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.presets, (preset) => {
+						return openBlock(), createElementBlock("button", {
+							key: preset.label,
+							type: "button",
+							class: "astryx-date-range-preset",
+							disabled: presetDisabled(preset),
+							onClick: ($event) => applyPreset(preset)
+						}, toDisplayString(preset.label), 9, _hoisted_7);
+					}), 128))])) : createCommentVNode("v-if", true), createVNode(_sfc_main$1, {
+						"cursor-year": cursor.value.year,
+						"cursor-month": cursor.value.month,
+						"month-count": __props.monthCount,
+						range: model.value,
+						pending: pending.value,
+						min: __props.min,
+						max: __props.max,
+						"min-range-span": __props.minRangeSpan,
+						"max-range-span": __props.maxRangeSpan,
+						"week-starts-on": __props.weekStartsOn,
+						onSelect,
+						onShift
+					}, null, 8, [
+						"cursor-year",
+						"cursor-month",
+						"month-count",
+						"range",
+						"pending",
+						"min",
+						"max",
+						"min-range-span",
+						"max-range-span",
+						"week-starts-on"
+					])])])]),
+					default: withCtx(() => [createElementVNode("div", {
+						class: "astryx-date-range-input astryx-bordered-control",
+						"data-size": __props.size,
+						"data-status": __props.status?.type,
+						"data-disabled": __props.isDisabled || void 0
+					}, [
+						createElementVNode("button", {
+							id: inputId.value,
+							type: "button",
+							class: "astryx-date-range-trigger",
+							disabled: __props.isDisabled,
+							"aria-describedby": field.describedBy,
+							"aria-invalid": __props.status?.type === "error" || void 0
+						}, [createVNode(_sfc_main$4, {
+							class: "astryx-date-range-icon",
+							icon: "calendar",
+							size: "sm"
+						}), createElementVNode("span", {
+							class: "astryx-date-range-value",
+							"data-placeholder": !display.value || void 0
+						}, toDisplayString(display.value || placeholder.value), 9, _hoisted_3)], 8, _hoisted_2),
+						__props.hasClear && model.value && !__props.isDisabled ? (openBlock(), createBlock(_sfc_main$3, {
+							key: 0,
+							class: "astryx-input-clear-button",
+							variant: "ghost",
+							size: "sm",
+							label: clearLabel.value,
+							onClick: clear
+						}, {
+							default: withCtx(() => [createVNode(_sfc_main$2, { type: "clear" })]),
+							_: 1
+						}, 8, ["label"])) : createCommentVNode("v-if", true),
+						__props.status ? (openBlock(), createBlock(_sfc_main$2, {
+							key: 1,
+							type: __props.status.type
+						}, null, 8, ["type"])) : createCommentVNode("v-if", true)
+					], 8, _hoisted_1)]),
+					_: 2
+				}, 1032, [
+					"is-open",
+					"is-enabled",
+					"label"
+				])]),
+				_: 1
+			}, 8, [
+				"label",
+				"input-id",
+				"description",
+				"width",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"status",
+				"status-variant"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/DateTimeInput/index.d.ts

@@ -0,0 +1,2 @@
+import { Jn as DateTimeInputEmits, Xn as DateTimeInputSize, Yn as DateTimeInputProps, qn as _default } from "../index-Df2YvC8o.js";
+export { _default as DateTimeInput, type DateTimeInputEmits, type DateTimeInputProps, type DateTimeInputSize };

package/dist/DateTimeInput/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../DateTimeInput-Bs1JmcIp.js";
+export { _sfc_main as DateTimeInput };

package/dist/DateTimeInput-Bs1JmcIp.js

@@ -0,0 +1,196 @@
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$3 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$4 } from "./DateInput-D2ErjXYO.js";
+import { t as _sfc_main$5 } from "./TimeField-l3QzU6vC.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, ref, unref, useId, useModel, watch, withCtx } from "vue";
+import "../styles/date-time-input.css";
+//#region src/DateTimeInput/DateTimeInput.vue
+const _hoisted_1 = [
+	"data-size",
+	"data-status",
+	"data-disabled"
+];
+const _hoisted_2 = { class: "astryx-date-time-fields" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDateTimeInput",
+	__name: "DateTimeInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		id: {},
+		description: {},
+		placeholder: {},
+		hourFormat: { default: "12h" },
+		presentation: {},
+		nativePicker: {},
+		hasClear: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: {},
+		size: { default: "md" },
+		min: {},
+		max: {},
+		isDisabled: { type: Boolean },
+		isReadOnly: { type: Boolean },
+		isRequired: { type: Boolean },
+		isOptional: { type: Boolean },
+		isLabelHidden: { type: Boolean },
+		status: {},
+		statusVariant: { default: "attached" },
+		width: {}
+	}, {
+		"modelValue": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const messages = useAstryxMessages();
+		const generatedId = `astryx-date-time-${useId()}`;
+		const draftDate = ref(void 0);
+		const draftTime = ref(void 0);
+		function parseDate(value) {
+			const date = value?.slice(0, 10) ?? "";
+			if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return null;
+			const [year, month, day] = date.split("-").map(Number);
+			return new Date(year, month - 1, day);
+		}
+		function parseTime(value) {
+			const time = value?.slice(11, 16) ?? "";
+			return /^\d{2}:\d{2}$/.test(time) ? time : null;
+		}
+		function formatDate(date) {
+			const month = String(date.getMonth() + 1).padStart(2, "0");
+			const day = String(date.getDate()).padStart(2, "0");
+			return `${date.getFullYear()}-${month}-${day}`;
+		}
+		const dateValue = computed(() => draftDate.value !== void 0 ? draftDate.value : parseDate(model.value));
+		const timeValue = computed(() => draftTime.value !== void 0 ? draftTime.value : parseTime(model.value));
+		const clearLabel = computed(() => messages.value.dateTimeInput.clear());
+		function publish() {
+			const date = dateValue.value;
+			const time = timeValue.value;
+			const next = date && time ? `${formatDate(date)}T${time}` : null;
+			if (next != null) {
+				draftDate.value = void 0;
+				draftTime.value = void 0;
+			}
+			if (next !== model.value) {
+				model.value = next;
+				emit("change", next);
+			}
+		}
+		function onDate(value) {
+			draftDate.value = value;
+			publish();
+		}
+		function onTime(value) {
+			draftTime.value = value;
+			publish();
+		}
+		function clear() {
+			draftDate.value = null;
+			draftTime.value = null;
+			if (model.value !== null) {
+				model.value = null;
+				emit("change", null);
+			}
+		}
+		watch(model, (value) => {
+			if (value) {
+				draftDate.value = void 0;
+				draftTime.value = void 0;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$3, {
+				label: __props.label,
+				"input-id": generatedId,
+				description: __props.description,
+				width: __props.width,
+				"is-label-hidden": __props.isLabelHidden,
+				"is-disabled": __props.isDisabled,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				status: __props.status,
+				"status-variant": __props.statusVariant
+			}, {
+				default: withCtx((field) => [createElementVNode("div", {
+					class: "astryx-date-time-input",
+					"data-size": __props.size,
+					"data-status": __props.status?.type,
+					"data-disabled": __props.isDisabled || void 0
+				}, [createElementVNode("div", _hoisted_2, [createVNode(_sfc_main$4, {
+					id: generatedId,
+					"model-value": dateValue.value,
+					label: unref(messages).dateTimeInput.dateLabel,
+					placeholder: __props.placeholder,
+					disabled: __props.isDisabled,
+					size: __props.size,
+					"described-by": field.describedBy,
+					"onUpdate:modelValue": onDate
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder",
+					"disabled",
+					"size",
+					"described-by"
+				]), createVNode(_sfc_main$5, {
+					"model-value": timeValue.value,
+					label: unref(messages).dateTimeInput.timeLabel,
+					"described-by": field.describedBy,
+					"hour-format": __props.hourFormat,
+					presentation: __props.presentation,
+					"native-picker": __props.nativePicker,
+					min: __props.min,
+					max: __props.max,
+					size: __props.size,
+					"is-disabled": __props.isDisabled,
+					"is-read-only": __props.isReadOnly,
+					status: __props.status,
+					"onUpdate:modelValue": onTime
+				}, null, 8, [
+					"model-value",
+					"label",
+					"described-by",
+					"hour-format",
+					"presentation",
+					"native-picker",
+					"min",
+					"max",
+					"size",
+					"is-disabled",
+					"is-read-only",
+					"status"
+				])]), __props.hasClear && (dateValue.value || timeValue.value) && !__props.isDisabled ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 0,
+					class: "astryx-input-clear-button",
+					variant: "ghost",
+					size: "sm",
+					label: clearLabel.value,
+					onClick: clear
+				}, {
+					default: withCtx(() => [createVNode(_sfc_main$1, { type: "clear" })]),
+					_: 1
+				}, 8, ["label"])) : createCommentVNode("v-if", true)], 8, _hoisted_1)]),
+				_: 1
+			}, 8, [
+				"label",
+				"description",
+				"width",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"status",
+				"status-variant"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };