@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/DateTimeField/DateTimeField.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 { useDateTimeField as i } from "./composables/useDateTimeField.js";
-import a from "../DateTimePicker/DateTimePicker.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 { useDateTimeField as o } from "./composables/useDateTimeField.js";
+import s from "../DateTimePicker/DateTimePicker.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/DateTimeField/DateTimeField.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: "DateTimeField",
-	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"],
 		minDate: {},
 		minTime: {},
 		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, pickerClass: K, dateTimeOnly: q, clearIconSize: J, showClearIcon: Y, handleOpenChange: X, handlePickerChange: Z, handlePickerCancel: Q, overlayCustomProps: $, dateTimePickerCustomProps: ee } = 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(Y) ? (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: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: ee, handlePickerCancel: te, overlayCustomProps: ne, dateTimePickerCustomProps: re } = o(I, B, L);
+		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(U) }, p({
+			default: k(() => [f("div", N, [f("input", x(_(D(W))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(G), {
+				onClick: o[0] ||= (...e) => D(K) && D(K)(...e),
+				"aria-label": D(R)("Clear"),
+				onKeydown: [o[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [h(D(n), y({
 				icon: "clear",
-				size: w(J)
-			}, 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(X)],
-			overlay: w(z),
-			"custom-props": w($)
+				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(H),
+			"model-value": D(V),
+			"custom-props": D(ne),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: E(() => [f(w(a), {
-				value: w(W),
-				class: v(w(K)),
-				ampm: w(q).ampm,
-				"show-footer": w(G),
-				"read-only": N.readonly,
-				"max-date": w(q).maxDate,
-				"min-date": w(q).minDate,
-				"max-time": w(q).maxTime,
-				"min-time": w(q).minTime,
-				onChange: w(Z),
-				onCancel: w(Q),
-				interval: w(q).interval,
-				"time-zone": w(q).timeZone,
-				"hide-years": w(q).hideYears,
-				color: w(B).merged.value.color,
-				"hide-months": w(q).hideMonths,
-				disabled: w(B).isDisabled.value,
-				"show-seconds": w(q).showSeconds,
-				"default-view": w(q).defaultView,
-				"start-of-week": w(q).startOfWeek,
-				"custom-props": w(ee),
-				rounded: w(B).merged.value.rounded,
-				"disable-dates": w(q).disableDates,
-				"hide-weekdays": w(q).hideWeekdays,
-				"disable-times": w(q).disableTimes,
-				"disable-years": w(q).disableYears,
-				"disable-months": w(q).disableMonths,
-				"hide-outside-days": w(q).hideOutsideDays
-			}, {
-				day: E((t) => [S(e.$slots, "day", y(m(t)), () => [d(C(t.label), 1)])]),
-				_: 3
-			}, 8, /* @__PURE__ */ "value.class.ampm.show-footer.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
+			default: k(() => [h(D(s), {
+				value: D(q),
+				class: b(D(Y)),
+				ampm: D(X).ampm,
+				"show-footer": 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(ee),
+				onCancel: D(te),
+				interval: D(X).interval,
+				"time-zone": D(X).timeZone,
+				"hide-years": D(X).hideYears,
+				color: D(U).merged.value.color,
+				"hide-months": D(X).hideMonths,
+				disabled: D(U).isDisabled.value,
+				"show-seconds": D(X).showSeconds,
+				"default-view": D(X).defaultView,
+				"start-of-week": D(X).startOfWeek,
+				"custom-props": D(re),
+				rounded: D(U).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,
+				"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.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
 			_: 3
 		}, 8, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));
 	}
 });
 //#endregion
-export { M as default };
+export { F as default };

package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts

@@ -6,23 +6,23 @@ import { FormFieldOwnProps } from '../../FormField/formField.types';
  */
 export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Ref<Date | null | undefined>, emit: SetupContext<DateTimeFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
-    overlay: import('vue').ComputedRef<import('@bridge-ui/core').FieldOverlayMode | undefined>;
+    overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
     formField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
         }>;
         merged: import('vue').ComputedRef<Omit<FormFieldOwnProps, "color" | "size" | "rounded" | "variant" | "errorIcon" | "showErrorIcon"> & {
-            color: NonNullable<keyof import('@bridge-ui/core').FormFieldColor | undefined>;
-            size: NonNullable<keyof import('@bridge-ui/core').FormFieldSize | undefined>;
-            rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
-            variant: NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>;
+            color: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldColor | undefined>;
+            size: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldSize | undefined>;
+            rounded: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
+            variant: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             errorIcon: NonNullable<import('../../..').IconSource | undefined>;
             showErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
-        endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        endBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             onCopy?: ((payload: ClipboardEvent) => void) | undefined;
             onCut?: ((payload: ClipboardEvent) => void) | undefined;
             onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -142,7 +142,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             'aria-expanded'?: (boolean | "true" | "false") | undefined;
             'aria-flowto'?: string | undefined | undefined;
             'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-            'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-haspopup'?: "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | "dialog" | undefined;
             'aria-hidden'?: (boolean | "true" | "false") | undefined;
             'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
             'aria-keyshortcuts'?: string | undefined | undefined;
@@ -178,7 +178,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
+            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -212,9 +212,9 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             class: string;
         }>>;
         controlId: import('vue').ComputedRef<string>;
-        errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        errorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         errorIcon: import('vue').ComputedRef<NonNullable<import('../../..').IconSource | undefined>>;
-        inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
+        inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;
             readonly: boolean;
@@ -438,31 +438,31 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
-        startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
-        variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>>;
-        endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>>;
+        endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
-            "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
+        containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
-        startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
-        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
-        insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+        insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
-    inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<import('@bridge-ui/core').MergePartBind<object, "class", {
+    inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
         id: string;
         disabled: boolean;
         readonly: boolean;
@@ -690,7 +690,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         onKeydown: (event: KeyboardEvent) => void;
     }, undefined>>;
     clearable: import('vue').ComputedRef<boolean>;
-    clearBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    clearBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         tabindex: number;
         role: string;
         "data-field-clear": boolean;
@@ -701,23 +701,33 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
     modelValue: import('vue').ComputedRef<Date | null>;
     showFooter: import('vue').ComputedRef<boolean>;
     pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "classes" | "customProps" | "overlay" | "showFooter" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
-    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
+    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;
     handleOpenChange: (next: boolean) => void;
     handlePickerChange: (next: Date | null) => void;
     handlePickerCancel: () => void;
     overlayCustomProps: import('vue').ComputedRef<{
-        modal: Partial<Pick<import('../../Modal').ModalOwnProps, "size" | "classes" | "customProps" | "blur" | "transition" | "align">> | undefined;
-        drawer: Partial<Pick<import('../../Drawer').DrawerOwnProps, "size" | "classes" | "customProps" | "blur" | "placement" | "transition">> | undefined;
+        modal: Partial<import('../../Modal').ModalOwnProps> | undefined;
+        drawer: Partial<import('../../Drawer').DrawerOwnProps> | undefined;
         menu: {
+            anchorEl: null | HTMLElement;
             classes?: import('../../Menu').MenuClasses;
+            closeOnClickAway?: boolean;
+            closeOnEscape?: boolean;
             customProps?: import('../../Menu').MenuCustomProps;
-            rounded?: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('../../Menu').MenuRoundedOverrides>;
-            shadow?: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('../../Menu').MenuShadowOverrides>;
+            disableAutoFocus?: boolean;
+            disableScrollLock?: boolean;
+            keepMounted?: boolean;
+            offset?: number;
+            onShowChange?: (show: boolean) => void;
+            persistent?: boolean;
             placement: import('@floating-ui/utils').Placement;
-            anchorEl: HTMLElement | null;
+            rounded?: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuRounded, import('../../Menu').MenuRoundedOverrides>;
+            shadow?: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuShadow, import('../../Menu').MenuShadowOverrides>;
+            strategy?: import('@bridge-ui/core/Runtime').PositionStrategy;
+            teleportTo?: false | string;
         };
     }>;
     dateTimePickerCustomProps: import('vue').ComputedRef<import('../../DateTimePicker').DateTimePickerCustomProps | undefined>;

package/dist/Components/DateTimeField/composables/useDateTimeField.js

@@ -1,12 +1,13 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as i, resolveFieldAdornmentIconSize as a } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as o, useFormField as s } from "../../FormField/composables/useFormField.js";
-import { computed as c, ref as l, useAttrs as u, useSlots as d } from "vue";
-import { cn as f, isFieldOverlayDialog as p, resolveFieldOverlay as m, resolveFieldShowFooter as h, splitComponentProps as g } from "@bridge-ui/core";
-import { get as _, isNil as v, omit as y } from "es-toolkit/compat";
-import { colorProps as b } from "@bridge-ui/core/Tokens/Listbox";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as s, useFormField as c } from "../../FormField/composables/useFormField.js";
+import { computed as l, ref as u, useAttrs as d, useSlots as f } from "vue";
+import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
+import { isFieldOverlayDialog as g, resolveFieldOverlay as _ } from "@bridge-ui/core/Domain";
+import { listboxColorProps as v } from "@bridge-ui/core/Tokens";
+import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimeField/composables/useDateTimeField.ts
 var x = [
 	"ampm",
@@ -35,29 +36,29 @@ var x = [
 	"hideOutsideDays"
 ];
 function S(e, t, n, r, i) {
-	return v(e) ? "" : `${t.format(e, n)} ${t.formatTime(e, n, {
+	return m(e) ? "" : `${t.format(e, n)} ${t.formatTime(e, n, {
 		ampm: r,
 		showSeconds: i
 	})}`.trim();
 }
 function C(C, w, T) {
-	let E = u(), D = d(), O = e(), k = r(), A = t(), j = l(!1), M = l(null), N = c(() => g({
+	let E = d(), D = f(), O = e(), k = r(), A = t(), j = u(!1), M = u(null), N = l(() => b({
 		props: {
 			...E,
 			...C
 		},
 		bridgeKeys: x
-	})), P = c(() => N.value.componentProps), F = c(() => A(P.value.timeZone)), I = c(() => w.value ?? null), L = c(() => P.value.clearable !== !1), R = c(() => !v(I.value)), z = c(() => m(P.value.overlay, k.mobile)), B = c(() => p(z.value) ? "w-full shadow-none" : void 0), ee = (e) => {
+	})), P = l(() => N.value.componentProps), F = l(() => A(P.value.timeZone)), I = l(() => w.value ?? null), L = l(() => P.value.clearable !== !1), R = l(() => !m(I.value)), z = l(() => _(P.value.overlay, k.mobile)), B = l(() => g(z.value) ? "w-full shadow-none" : void 0), V = (e) => {
 		M.value = e instanceof HTMLElement ? e : null;
 	};
-	function V(e) {
-		j.value = e, T(e ? "open" : "close");
+	function H(e) {
+		j.value !== e && (j.value = e, T(e ? "open" : "close"));
 	}
-	let H = c(() => y(N.value.inheritedAttrs, ["class"])), U = c(() => {
-		let e = g({
-			bridgeKeys: o,
-			props: H.value
-		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimePicker: s, ...c } = P.value.customProps ?? {};
+	let ee = l(() => h(N.value.inheritedAttrs, ["class"])), U = l(() => {
+		let e = b({
+			bridgeKeys: s,
+			props: ee.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimePicker: o, ...c } = P.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
@@ -65,47 +66,55 @@ function C(C, w, T) {
 			customProps: {
 				...c,
 				container: i(c.container, {}, {
-					ref: ee,
-					class: f({ "cursor-pointer": !C.disabled && !C.readonly }),
+					ref: V,
+					class: y({ "cursor-pointer": !C.disabled && !C.readonly }),
 					onClick: (e) => {
-						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || V(!0);
+						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || H(!0);
 					}
 				})
 			}
 		};
-	}), W = s(() => U.value, {
+	}), W = c(() => U.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateTimeField" }), G = c(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = c(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	}, { componentName: "DateTimeField" }), G = l(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = l(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
 	function q(e) {
 		w.value = e, T("change", e);
 	}
-	let J = c(() => h(P.value.showFooter, k.mobile));
+	let J = o({
+		overlay: z,
+		componentName: "DateTimeField",
+		showFooter: () => P.value.showFooter
+	});
 	function Y(e) {
-		q(e), V(!1);
+		if (q(e), J.value) {
+			T("apply");
+			return;
+		}
+		H(!1);
 	}
 	function X() {
-		V(!1);
+		T("cancel");
 	}
 	function Z(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), V(!1));
+		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), H(!1));
 	}
 	function Q(e) {
 		e.preventDefault();
 	}
-	let $ = c(() => i({
+	let $ = l(() => i({
 		readonly: !0,
 		value: K.value,
 		onFocus: (e) => {
-			W.inputBind.value.onFocus?.(e), V(!0);
+			W.inputBind.value.onFocus?.(e), H(!0);
 		},
 		onKeydown: (e) => {
-			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && V(!1);
+			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && H(!1);
 		}
-	}, void 0, W.inputBind.value)), te = c(() => P.value.overlay), ne = c(() => ({
+	}, void 0, W.inputBind.value)), te = l(() => P.value.overlay), ne = l(() => ({
 		modal: P.value.customProps?.modal,
 		drawer: P.value.customProps?.drawer,
 		menu: {
@@ -113,7 +122,7 @@ function C(C, w, T) {
 			placement: "bottom-start",
 			...P.value.customProps?.menu
 		}
-	})), re = c(() => P.value.customProps?.dateTimePicker), ie = c(() => a(W.merged.value.size)), ae = c(() => _(b, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), re = l(() => P.value.customProps?.dateTimePicker), ie = l(() => a(W.merged.value.size)), ae = l(() => p(v, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
 		open: j,
 		overlay: te,
@@ -121,12 +130,12 @@ function C(C, w, T) {
 		formField: W,
 		inputBind: $,
 		clearable: L,
-		clearBind: c(() => i({}, {}, {
+		clearBind: l(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
 			onMousedown: Q,
-			class: f({
+			class: y({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
 				[ae.value]: !0,
 				[P.value.classes?.clear ?? ""]: !0
@@ -140,7 +149,7 @@ function C(C, w, T) {
 		containerRef: M,
 		clearIconSize: ie,
 		showClearIcon: G,
-		handleOpenChange: V,
+		handleOpenChange: H,
 		handlePickerChange: Y,
 		handlePickerCancel: X,
 		overlayCustomProps: ne,

package/dist/Components/DateTimeField/dateTimeField.types.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, Slot } from 'vue';
-import { DisableDatesInput, DisableTimesInput, FieldOverlayMode, MergeHtmlProps, StartOfWeek } from '@bridge-ui/core';
+import { DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, FieldOverlayMode, StartOfWeek } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { CalendarView } from '../Calendar/calendar.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
 import { DateTimePickerCustomProps } from '../DateTimePicker/dateTimePicker.types';
@@ -32,21 +33,29 @@ export interface DateTimeFieldCustomProps extends FormFieldCustomProps {
      *
      * @default undefined
      */
-    drawer?: Partial<Pick<DrawerOwnProps, "blur" | "size" | "classes" | "placement" | "transition" | "customProps">>;
+    drawer?: Partial<DrawerOwnProps>;
     /**
      * Props forwarded to the floating `Menu` when overlay resolves to menu.
      *
      * @default undefined
      */
-    menu?: Partial<Pick<MenuOwnProps, "shadow" | "classes" | "rounded" | "placement" | "customProps">>;
+    menu?: Partial<MenuOwnProps>;
     /**
      * Props forwarded to the nested `Modal` when overlay resolves to modal.
      *
      * @default undefined
      */
-    modal?: Partial<Pick<ModalOwnProps, "blur" | "size" | "align" | "classes" | "transition" | "customProps">>;
+    modal?: Partial<ModalOwnProps>;
 }
 export interface DateTimeFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selected date-time changes.
      */
@@ -187,10 +196,10 @@ export interface DateTimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" |
      */
     overlay?: FieldOverlayMode;
     /**
-     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true`
-     * on mobile.
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`).
      *
-     * @default false
+     * @default false (`true` for `modal` / `drawer` when unset)
      */
     showFooter?: boolean;
     /**
@@ -219,6 +228,13 @@ export interface DateTimeFieldSlots extends FormFieldSlots {
      * @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 type DateTimeFieldProps = MergeHtmlProps<DateTimeFieldOwnProps, InputHTMLAttributes> & {
     /**

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

@@ -1,12 +1,16 @@
 import { DateTimePickerOwnProps, DateTimePickerSlots } from './dateTimePicker.types';
 type __VLS_Slots = DateTimePickerSlots;
 declare const __VLS_base: import('vue').DefineComponent<DateTimePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => any;
     cancel: () => any;
     change: (value: Date | null) => any;
 }, string, import('vue').PublicProps, Readonly<DateTimePickerOwnProps> & Readonly<{
+    onApply?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    showFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;