@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -31,14 +31,21 @@ var b = /*@__PURE__*/ u({
 		minTime: {},
 		readOnly: { type: Boolean },
 		rounded: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
 		tokens: {},
 		value: {}
 	},
-	emits: ["cancel", "change"],
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
 	setup(u, { emit: b }) {
 		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, timeTokens: E, handleApply: D, cancelLabel: O, contentBind: k, displayValue: A, handleCancel: j, calendarBind: M, timeFillBind: N, timeSizerBind: P, timePanelBind: F, calendarTokens: I, applyButtonProps: L, cancelButtonProps: R, handlePanelChange: z, handleCalendarChange: B, timePanelCustomProps: V } = n(u, {
 			ampm: !1,
@@ -46,7 +53,6 @@ var b = /*@__PURE__*/ u({
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary",
-			showFooter: !1,
 			showSeconds: !1,
 			defaultView: "date"
 		}, b);
@@ -139,7 +145,10 @@ var b = /*@__PURE__*/ u({
 			"show-seconds",
 			"disable-times",
 			"custom-props"
-		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [l(v(e), f({
+		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [g(n.$slots, "footer", {
+			apply: v(D),
+			cancel: v(j)
+		}, () => [l(v(e), f({
 			variant: "flat",
 			color: "secondary",
 			onClick: v(j)
@@ -149,7 +158,7 @@ var b = /*@__PURE__*/ u({
 		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(L), { onClick: v(D) }), {
 			default: y(() => [c(_(v(T)), 1)]),
 			_: 1
-		}, 16, ["onClick"])], 16)) : a("", !0)], 16));
+		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));
 	}
 });
 //#endregion

package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts

@@ -1,21 +1,19 @@
-import { MaybeRefOrGetter } from 'vue';
-import { DatePickerModel, LibDefaultsShape, MergeLibDefaults, TimeValue } from '@bridge-ui/core';
-import { DateTimePickerOwnProps } from '../dateTimePicker.types';
-type DateTimePickerLibDefaults = LibDefaultsShape<DateTimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "defaultView" | "showSeconds" | "startOfWeek">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { DatePickerModel, TimeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { DateTimePickerEmits, DateTimePickerOwnProps } from '../dateTimePicker.types';
+type DateTimePickerLibDefaults = LibDefaultsShape<DateTimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "defaultView" | "showSeconds" | "startOfWeek">;
 type DateTimePickerMerged = MergeLibDefaults<DateTimePickerOwnProps, DateTimePickerLibDefaults>;
 /**
  * Owns controlled/uncontrolled datetime value, optional footer draft, and binds.
  */
-export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: {
-    (event: "change", value: Date | null): void;
-    (event: "cancel"): void;
-}): {
+export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: SetupContext<DateTimePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
-    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     timeTokens: import('vue').ComputedRef<{
-        color: Record<string, Partial<import('@bridge-ui/core').TimeColorItem>> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').TimeColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     handleApply: () => void;
@@ -27,8 +25,8 @@ export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePicker
     timeSizerBind: import('vue').ComputedRef<string>;
     timePanelBind: import('vue').ComputedRef<string>;
     calendarTokens: import('vue').ComputedRef<{
-        day: Partial<import('@bridge-ui/core').CalendarDay> | undefined;
-        color: Record<string, Partial<import('@bridge-ui/core').CalendarColorItem>> | undefined;
+        day: Partial<import('@bridge-ui/core/Tokens').CalendarDay> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').CalendarColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     handlePanelChange: (next: null | TimeValue) => void;

package/dist/Components/DateTimePicker/composables/useDateTimePicker.js

@@ -1,98 +1,112 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { computed as o, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
-import { cn as d, combineDateAndTime as f, isDateRangeValue as p, splitComponentProps as m } from "@bridge-ui/core";
-import { isArray as h, isNil as g, omit as _ } from "es-toolkit/compat";
+import { FIELD_OVERLAY_INJECTION_KEY as o } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as s, inject as c, ref as l, toValue as u, useAttrs as d, watch as f } from "vue";
+import { get as p, isArray as m, isNil as h, omit as g } from "es-toolkit/compat";
+import { combineDateAndTime as _, isDateRangeValue as v } from "@bridge-ui/core/Domain";
+import { menuRoundedProps as y } from "@bridge-ui/core/Tokens";
+import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimePicker/composables/useDateTimePicker.ts
-var v = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.defaultView.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
-function y(y, b, x) {
-	let S = l(), C = e(), w = n(), T = t(), E = o(() => m({
-		bridgeKeys: v,
+var S = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.defaultView.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function C(C, w, T) {
+	let E = d(), D = c(o, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), O = e(), k = n(), A = t(), j = s(() => x({
+		bridgeKeys: S,
 		props: {
-			...S,
-			...c(y)
+			...E,
+			...u(C)
 		}
-	})), { merged: D, entry: O } = i({
-		libDefaults: b,
+	})), { merged: M, entry: N } = i({
+		libDefaults: w,
 		componentName: "DateTimePicker",
-		props: () => E.value.componentProps
-	}), k = o(() => D.value.customProps), A = o(() => _(E.value.inheritedAttrs, ["onChange", "onCancel"])), j = a({
-		entry: O,
-		props: () => E.value.componentProps
-	}), M = o(() => c(y)), N = o(() => T(D.value.timeZone)), P = o(() => !g(M.value.value)), F = s(D.value.defaultValue ?? null), I = o(() => P.value ? M.value.value ?? null : F.value), L = s(I.value);
-	u(() => [I.value, D.value.showFooter], ([e, t]) => {
-		t && (L.value = e);
+		props: () => j.value.componentProps
+	}), P = s(() => M.value.customProps), F = s(() => g(j.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), I = a({
+		entry: N,
+		props: () => j.value.componentProps
+	}), L = s(() => u(C)), R = s(() => A(M.value.timeZone)), z = s(() => !h(L.value.value)), B = l(M.value.defaultValue ?? null), V = s(() => z.value ? L.value.value ?? null : B.value), H = l(V.value);
+	f(() => [V.value, M.value.showFooter], ([e, t]) => {
+		t && (H.value = e);
 	});
-	let R = o(() => D.value.showFooter ? L.value : I.value), z = o(() => ({
-		day: D.value.tokens?.calendar?.day ?? D.value.tokens?.day,
-		color: D.value.tokens?.calendar?.color ?? D.value.tokens?.color,
-		rounded: D.value.tokens?.calendar?.rounded ?? D.value.tokens?.rounded
-	})), B = o(() => ({
-		color: D.value.tokens?.time?.color ?? D.value.tokens?.color,
-		rounded: D.value.tokens?.time?.rounded ?? D.value.tokens?.rounded
-	})), V = (e) => {
-		P.value || (F.value = e), x("change", e);
-	}, H = (e) => {
-		if (D.value.showFooter) {
-			L.value = e;
+	let U = s(() => M.value.showFooter ? H.value : V.value), W = s(() => ({
+		day: M.value.tokens?.calendar?.day ?? M.value.tokens?.day,
+		color: M.value.tokens?.calendar?.color ?? M.value.tokens?.color,
+		rounded: M.value.tokens?.calendar?.rounded ?? M.value.tokens?.rounded
+	})), G = s(() => ({
+		color: M.value.tokens?.time?.color ?? M.value.tokens?.color,
+		rounded: M.value.tokens?.time?.rounded ?? M.value.tokens?.rounded
+	})), K = (e) => {
+		z.value || (B.value = e), T("change", e);
+	}, q = (e) => {
+		if (M.value.showFooter) {
+			H.value = e;
 			return;
 		}
-		V(e);
-	}, U = (e) => {
-		if (g(e) || h(e) || p(e)) {
-			H(null);
+		K(e);
+	}, J = (e) => {
+		if (h(e) || m(e) || v(e)) {
+			q(null);
 			return;
 		}
-		let t = f(e, R.value ?? C.value.now(N.value), C.value, N.value);
-		H(t);
-	}, W = (e) => {
-		if (g(e)) {
-			H(null);
+		let t = _(e, U.value ?? O.value.now(R.value), O.value, R.value);
+		q(t);
+	}, Y = (e) => {
+		if (h(e)) {
+			q(null);
 			return;
 		}
-		let t = f(R.value ?? C.value.now(N.value), e, C.value, N.value);
-		H(t);
-	}, G = () => {
-		V(L.value);
-	}, K = () => {
-		L.value = I.value, x("cancel");
-	}, q = o(() => r(k.value?.root, A.value, d({
-		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-		[j.value.root ?? ""]: !0
-	}))), J = o(() => d({ "flex w-full flex-row items-stretch": !0 })), Y = o(() => d({
+		let t = _(U.value ?? O.value.now(R.value), e, O.value, R.value);
+		q(t);
+	}, X = () => {
+		K(H.value), T("apply"), D.apply();
+	}, Z = () => {
+		H.value = V.value, T("cancel"), D.cancel();
+	}, Q = s(() => {
+		let e = p(y, M.value.rounded ?? "md");
+		return r(P.value?.root, F.value, b({
+			"flex w-fit flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			[e]: !0,
+			[I.value.root ?? ""]: !0
+		}));
+	}), $ = s(() => b({ "flex w-full flex-row items-stretch": !0 })), ee = s(() => b({
 		"min-w-0 flex-1": !0,
-		[j.value.calendar ?? ""]: !0
-	})), X = o(() => r(k.value?.footer, {}, d({
+		[I.value.calendar ?? ""]: !0
+	})), te = s(() => r(P.value?.footer, {}, b({
 		"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-		[j.value.footer ?? ""]: !0
-	}))), Z = o(() => d({
+		[I.value.footer ?? ""]: !0
+	}))), ne = s(() => b({
 		"relative isolate shrink-0 self-stretch overflow-hidden border-l border-dark-100 dark:border-dark-800": !0,
-		[j.value.time ?? ""]: !0
-	})), Q = o(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), $ = o(() => d({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), ee = o(() => d({ "absolute inset-0 flex w-full px-2.5": !0 }));
+		[I.value.time ?? ""]: !0
+	})), re = s(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ie = s(() => b({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), ae = s(() => b({ "absolute inset-0 flex w-full px-2.5": !0 }));
 	return {
-		merged: D,
-		rootBind: q,
-		footerBind: X,
-		showFooter: o(() => !!D.value.showFooter),
-		timeTokens: B,
-		handleApply: G,
-		contentBind: J,
-		displayValue: R,
-		handleCancel: K,
-		calendarBind: Y,
-		timeFillBind: ee,
-		timeSizerBind: $,
-		timePanelBind: Z,
-		calendarTokens: z,
-		handlePanelChange: W,
-		handleCalendarChange: U,
-		timePanelCustomProps: Q,
-		applyLabel: o(() => w("Apply")),
-		cancelLabel: o(() => w("Cancel")),
-		applyButtonProps: o(() => k.value?.applyButton),
-		cancelButtonProps: o(() => k.value?.cancelButton)
+		merged: M,
+		rootBind: Q,
+		footerBind: te,
+		showFooter: s(() => !!M.value.showFooter),
+		timeTokens: G,
+		handleApply: X,
+		contentBind: $,
+		displayValue: U,
+		handleCancel: Z,
+		calendarBind: ee,
+		timeFillBind: ae,
+		timeSizerBind: ie,
+		timePanelBind: ne,
+		calendarTokens: W,
+		handlePanelChange: Y,
+		handleCalendarChange: J,
+		timePanelCustomProps: re,
+		applyLabel: s(() => k("Apply")),
+		cancelLabel: s(() => k("Cancel")),
+		applyButtonProps: s(() => P.value?.applyButton),
+		cancelButtonProps: s(() => P.value?.cancelButton)
 	};
 }
 //#endregion
-export { y as useDateTimePicker };
+export { C as useDateTimePicker };

package/dist/Components/DateTimePicker/dateTimePicker.types.d.ts

@@ -1,5 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DisableDatesInput, DisableTimesInput, MergeHtmlProps, MergeProps, StartOfWeek, TimeColorItem } from '@bridge-ui/core';
+import { DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 import { CalendarView } from '../Calendar/calendar.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
@@ -50,6 +52,10 @@ export interface DateTimePickerCustomProps {
     root?: HTMLAttributes;
 }
 export interface DateTimePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -59,43 +65,6 @@ export interface DateTimePickerEmits {
      */
     change: [value: Date | null];
 }
-export interface DateTimePickerSlots {
-    /**
-     * Custom content inside each day button on the nested calendar.
-     *
-     * @default undefined
-     */
-    day?: Slot<CalendarDateDayCell>;
-}
-export interface DateTimePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides for the calendar (and time when `time` is unset).
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-    /**
-     * Nested time panel token overrides.
-     */
-    time?: {
-        color?: Record<string, Partial<TimeColorItem>>;
-        rounded?: Record<string, string>;
-    };
-}
 export interface DateTimePickerOwnProps {
     /**
      * Uses a 12-hour clock with an AM/PM column.
@@ -224,7 +193,10 @@ export interface DateTimePickerOwnProps {
      */
     readOnly?: boolean;
     /**
-     * Border radius of calendar / time tiles and chrome.
+     * Border radius of the picker shell, calendar / time tiles, and chrome.
+     *
+     * The shell uses the Menu panel scale (`full` caps at `rounded-panel-full`).
+     * Tiles keep a true pill when `rounded` is `full`.
      *
      * `DateTimeField` always forwards its own `rounded` here so the picker matches
      * the field, independent of `DateTimePicker.defaultProps`.
@@ -234,6 +206,7 @@ export interface DateTimePickerOwnProps {
     rounded?: MergeProps<CalendarRounded, DateTimePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -269,4 +242,48 @@ export interface DateTimePickerOwnProps {
      */
     value?: Date | null;
 }
+export interface DateTimePickerSlots {
+    /**
+     * Custom content inside each day button on the nested calendar.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
+}
+export interface DateTimePickerTokens {
+    /**
+     * Nested calendar token overrides.
+     */
+    calendar?: {
+        color?: Record<string, Partial<CalendarColorItem>>;
+        day?: Partial<CalendarDay>;
+        rounded?: Record<string, string>;
+    };
+    /**
+     * Color token map overrides for the calendar (and time when `time` is unset).
+     */
+    color?: Record<string, Partial<CalendarColorItem>>;
+    /**
+     * Day chrome overrides.
+     */
+    day?: Partial<CalendarDay>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+    /**
+     * Nested time panel token overrides.
+     */
+    time?: {
+        color?: Record<string, Partial<TimeColorItem>>;
+        rounded?: Record<string, string>;
+    };
+}
 export type DateTimePickerProps = MergeHtmlProps<DateTimePickerOwnProps, HTMLAttributes>;

package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue.d.ts

@@ -1,4 +1,4 @@
-import { DateRangeValue } from '@bridge-ui/core';
+import { DateRangeValue } from '@bridge-ui/core/Domain';
 import { DateTimeRangeFieldOwnProps, DateTimeRangeFieldSlots } from './dateTimeRangeField.types';
 type __VLS_Slots = DateTimeRangeFieldSlots;
 type __VLS_Props = DateTimeRangeFieldOwnProps;
@@ -8,17 +8,22 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clear: () => any;
+    apply: () => any;
+    cancel: () => any;
     change: (value: DateRangeValue | null) => any;
     close: () => any;
     open: () => any;
     "update:modelValue": (value: DateRangeValue | null | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: DateRangeValue | null) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: DateRangeValue | null | undefined) => any) | undefined;
 }>, {
+    showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,18 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
-import t from "../Icon/Icon.js";
-import n from "../FormField/FormField.js";
-import r from "../FieldOverlay/FieldOverlay.js";
-import { useDateTimeRangeField as i } from "./composables/useDateTimeRangeField.js";
-import a from "../DateTimeRangePicker/DateTimeRangePicker.js";
-import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, isRef as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, ref as x, renderSlot as S, toDisplayString as C, unref as w, useModel as T, withCtx as E, withKeys as D, withModifiers as O } from "vue";
-import { isUndefined as k } from "es-toolkit/compat";
+import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
+import i from "../FormField/FormField.js";
+import a from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeRangeField as o } from "./composables/useDateTimeRangeField.js";
+import s from "../DateTimeRangePicker/DateTimeRangePicker.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
+import { isUndefined as M } from "es-toolkit/compat";
 //#region src/Components/DateTimeRangeField/DateTimeRangeField.vue?vue&type=script&setup=true&lang.ts
-var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"], M = /*@__PURE__*/ p({
+var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateTimeRangeField",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ v({
 		ampm: { type: Boolean },
 		classes: {},
 		clearable: {
@@ -34,7 +36,10 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 		minTime: {},
 		orientation: {},
 		overlay: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
@@ -66,76 +71,85 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ g([
+	emits: /*@__PURE__*/ v([
+		"apply",
+		"cancel",
 		"change",
 		"clear",
 		"close",
 		"open"
 	], ["update:modelValue"]),
-	setup(p, { emit: g }) {
-		let M = T(p, "modelValue"), N = p, P = g, F = e(), I = x(N.defaultValue ?? null), L = s({
+	setup(g, { emit: v }) {
+		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
 			set: (e) => {
-				M.value = e, I.value = e;
+				F.value = e, z.value = e;
 			},
-			get: () => k(M.value) ? I.value : M.value
-		}), { open: R, overlay: z, formField: B, inputBind: V, clearBind: H, clearValue: U, modelValue: W, showFooter: G, orientation: K, pickerClass: q, dateTimeOnly: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, dateTimeRangePickerCustomProps: te } = i(N, L, P);
-		return (e, i) => (b(), l(o, null, [f(w(n), { field: w(B) }, {
-			default: E(() => [u("div", A, [u("input", y(m(w(V))), null, 16), w(X) ? (b(), l("span", _({ key: 0 }, w(H), {
-				onClick: i[0] ||= (...e) => w(U) && w(U)(...e),
-				"aria-label": w(F)("Clear"),
-				onKeydown: [i[1] ||= D(O((...e) => w(U) && w(U)(...e), ["prevent"]), ["enter"]), i[2] ||= D(O((...e) => w(U) && w(U)(...e), ["prevent"]), ["space"])]
-			}), [f(w(t), _({
+			get: () => M(F.value) ? z.value : F.value
+		}), { open: V, overlay: ee, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, orientation: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimeRangePickerCustomProps: ie } = o(I, B, L);
+		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(H) }, p({
+			default: k(() => [f("div", N, [f("input", x(_(D(U))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(W), {
+				onClick: o[0] ||= (...e) => D(G) && D(G)(...e),
+				"aria-label": D(R)("Clear"),
+				onKeydown: [o[1] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["space"])]
+			}), [h(D(n), y({
 				icon: "clear",
-				size: w(Y)
-			}, N.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : c("", !0)])]),
-			_: 1
-		}, 8, ["field"]), f(w(r), {
-			modelValue: w(R),
-			"onUpdate:modelValue": [i[3] ||= (e) => h(R) ? R.value = e : null, w(Z)],
-			overlay: w(z),
-			"custom-props": w(ee)
+				size: D(Z)
+			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+			_: 2
+		}, [w(D(t)(D(r), e.$slots), (t) => ({
+			name: t,
+			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
+		}))]), 1032, ["field"]), h(D(a), {
+			overlay: D(ee),
+			"model-value": D(V),
+			"custom-props": D(re),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: E(() => [f(w(a), {
-				value: w(W),
-				class: v(w(q)),
-				ampm: w(J).ampm,
-				"show-footer": w(G),
-				orientation: w(K),
-				"read-only": N.readonly,
-				"max-date": w(J).maxDate,
-				"min-date": w(J).minDate,
-				"max-time": w(J).maxTime,
-				"min-time": w(J).minTime,
-				onChange: w(Q),
-				onCancel: w($),
-				interval: w(J).interval,
-				"time-zone": w(J).timeZone,
-				"hide-years": w(J).hideYears,
-				color: w(B).merged.value.color,
-				"hide-months": w(J).hideMonths,
-				disabled: w(B).isDisabled.value,
-				"show-seconds": w(J).showSeconds,
-				"start-of-week": w(J).startOfWeek,
-				rounded: w(B).merged.value.rounded,
-				"disable-dates": w(J).disableDates,
-				"hide-weekdays": w(J).hideWeekdays,
-				"disable-times": w(J).disableTimes,
-				"disable-years": w(J).disableYears,
-				"disable-months": w(J).disableMonths,
-				"custom-props": w(te),
-				"hide-outside-days": w(J).hideOutsideDays
-			}, {
-				day: E((t) => [S(e.$slots, "day", y(m(t)), () => [d(C(t.label), 1)])]),
-				_: 3
-			}, 8, /* @__PURE__ */ "value.class.ampm.show-footer.orientation.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.start-of-week.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.custom-props.hide-outside-days".split("."))]),
+			default: k(() => [h(D(s), {
+				value: D(K),
+				class: b(D(Y)),
+				ampm: D(X).ampm,
+				"show-footer": D(q),
+				orientation: D(J),
+				"read-only": I.readonly,
+				"max-date": D(X).maxDate,
+				"min-date": D(X).minDate,
+				"max-time": D(X).maxTime,
+				"min-time": D(X).minTime,
+				onChange: D(te),
+				onCancel: D(ne),
+				interval: D(X).interval,
+				"time-zone": D(X).timeZone,
+				"hide-years": D(X).hideYears,
+				color: D(H).merged.value.color,
+				"hide-months": D(X).hideMonths,
+				disabled: D(H).isDisabled.value,
+				"show-seconds": D(X).showSeconds,
+				"start-of-week": D(X).startOfWeek,
+				rounded: D(H).merged.value.rounded,
+				"disable-dates": D(X).disableDates,
+				"hide-weekdays": D(X).hideWeekdays,
+				"disable-times": D(X).disableTimes,
+				"disable-years": D(X).disableYears,
+				"disable-months": D(X).disableMonths,
+				"custom-props": D(ie),
+				"hide-outside-days": D(X).hideOutsideDays
+			}, p({
+				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
+				_: 2
+			}, [e.$slots.footer ? {
+				name: "footer",
+				fn: k((t) => [T(e.$slots, "footer", x(_(t)))]),
+				key: "0"
+			} : void 0]), 1032, /* @__PURE__ */ "value.class.ampm.show-footer.orientation.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.start-of-week.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.custom-props.hide-outside-days".split("."))]),
 			_: 3
 		}, 8, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));
 	}
 });
 //#endregion
-export { M as default };
+export { F as default };