@bridge-ui/vue 0.0.9 → 0.0.10

package/dist/Components/DateField/DateField.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 { useDateField as i } from "./composables/useDateField.js";
-import a from "../DatePicker/DatePicker.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 ee from "../FieldOverlay/FieldOverlay.js";
+import { useDateField as a } from "./composables/useDateField.js";
+import o from "../DatePicker/DatePicker.js";
+import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef 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/DateField/DateField.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__*/ h({
 	inheritAttrs: !1,
 	__name: "DateField",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ v({
 		classes: {},
 		clearable: {
 			type: Boolean,
@@ -62,62 +64,65 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ g([
+	emits: /*@__PURE__*/ v([
 		"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(h, { emit: v }) {
+		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
 			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, dateOnly: B, formField: V, inputBind: H, clearBind: U, clearValue: W, modelValue: G, showFooter: K, pickerClass: q, clearIconSize: J, showClearIcon: Y, handleOpenChange: X, handlePickerChange: Z, handlePickerCancel: Q, overlayCustomProps: $, datePickerCustomProps: ee } = i(N, L, P);
-		return (e, i) => (b(), l(o, null, [f(w(n), { field: w(V) }, {
-			default: E(() => [u("div", A, [u("input", y(m(w(H))), null, 16), w(Y) ? (b(), l("span", _({ key: 0 }, w(U), {
-				onClick: i[0] ||= (...e) => w(W) && w(W)(...e),
-				"aria-label": w(F)("Clear"),
-				onKeydown: [i[1] ||= D(O((...e) => w(W) && w(W)(...e), ["prevent"]), ["enter"]), i[2] ||= D(O((...e) => w(W) && w(W)(...e), ["prevent"]), ["space"])]
-			}), [f(w(t), _({
+			get: () => M(F.value) ? z.value : F.value
+		}), { open: V, overlay: H, dateOnly: U, formField: W, inputBind: G, clearBind: K, clearValue: q, modelValue: J, showFooter: Y, pickerClass: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, datePickerCustomProps: ie } = a(I, B, L);
+		return (e, a) => (S(), u(s, null, [m(D(i), { field: D(W) }, f({
+			default: k(() => [d("div", N, [d("input", x(g(D(G))), null, 16), D(Q) ? (S(), u("span", y({ key: 0 }, D(K), {
+				onClick: a[0] ||= (...e) => D(q) && D(q)(...e),
+				"aria-label": D(R)("Clear"),
+				onKeydown: [a[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
+			}), [m(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)) : l("", !0)])]),
+			_: 2
+		}, [w(D(t)(D(r), e.$slots), (t) => ({
+			name: t,
+			fn: k((n) => [T(e.$slots, t, x(g(n || {})))])
+		}))]), 1032, ["field"]), m(D(ee), {
+			modelValue: D(V),
+			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D($)],
+			overlay: D(H),
+			"custom-props": D(re)
 		}, {
-			default: E(() => [f(w(a), {
-				value: w(G),
-				class: v(w(q)),
-				range: w(B).range,
-				"show-footer": w(K),
-				"read-only": N.readonly,
-				"max-date": w(B).maxDate,
-				"min-date": w(B).minDate,
-				multiple: w(B).multiple,
-				"time-zone": w(B).timeZone,
-				"hide-years": w(B).hideYears,
-				onChange: w(Z),
-				onCancel: w(Q),
-				"hide-months": w(B).hideMonths,
-				"default-view": w(B).defaultView,
-				color: w(V).merged.value.color,
-				"start-of-week": w(B).startOfWeek,
-				"custom-props": w(ee),
-				disabled: w(V).isDisabled.value,
-				"disable-dates": w(B).disableDates,
-				"hide-weekdays": w(B).hideWeekdays,
-				"disable-years": w(B).disableYears,
-				"disable-months": w(B).disableMonths,
-				rounded: w(V).merged.value.rounded,
-				"hide-outside-days": w(B).hideOutsideDays
+			default: k(() => [m(D(o), {
+				value: D(J),
+				class: b(D(X)),
+				range: D(U).range,
+				"show-footer": D(Y),
+				"read-only": I.readonly,
+				"max-date": D(U).maxDate,
+				"min-date": D(U).minDate,
+				multiple: D(U).multiple,
+				"time-zone": D(U).timeZone,
+				"hide-years": D(U).hideYears,
+				onChange: D(te),
+				onCancel: D(ne),
+				"hide-months": D(U).hideMonths,
+				"default-view": D(U).defaultView,
+				color: D(W).merged.value.color,
+				"start-of-week": D(U).startOfWeek,
+				"custom-props": D(ie),
+				disabled: D(W).isDisabled.value,
+				"disable-dates": D(U).disableDates,
+				"hide-weekdays": D(U).hideWeekdays,
+				"disable-years": D(U).disableYears,
+				"disable-months": D(U).disableMonths,
+				rounded: D(W).merged.value.rounded,
+				"hide-outside-days": D(U).hideOutsideDays
 			}, {
-				day: E((t) => [S(e.$slots, "day", y(m(t)), () => [d(C(t.label), 1)])]),
+				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(t.label), 1)])]),
 				_: 3
 			}, 8, [
 				"value",
@@ -155,4 +160,4 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 	}
 });
 //#endregion
-export { M as default };
+export { F as default };

package/dist/Components/DateField/composables/useDateField.d.ts

@@ -710,15 +710,25 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
     handlePickerChange: (next: DatePickerModel) => 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;
+            disableAutoFocus?: boolean;
+            disableScrollLock?: boolean;
+            keepMounted?: boolean;
+            offset?: number;
+            onShowChange?: (show: boolean) => void;
+            persistent?: boolean;
+            placement: import('@floating-ui/utils').Placement;
             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>;
-            placement: import('@floating-ui/utils').Placement;
-            anchorEl: HTMLElement | null;
+            strategy?: import('@bridge-ui/core').PositionStrategy;
+            teleportTo?: false | string;
         };
     }>;
     datePickerCustomProps: import('vue').ComputedRef<import('../../DatePicker').DatePickerCustomProps | undefined>;

package/dist/Components/DateField/dateField.types.d.ts

@@ -32,19 +32,19 @@ export interface DateFieldCustomProps 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 DateFieldEmits {
     /**

package/dist/Components/DateRangeField/DateRangeField.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 { useDateRangeField as i } from "./composables/useDateRangeField.js";
-import a from "../DateRangePicker/DateRangePicker.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 ee from "../FieldOverlay/FieldOverlay.js";
+import { useDateRangeField as a } from "./composables/useDateRangeField.js";
+import o from "../DateRangePicker/DateRangePicker.js";
+import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef 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/DateRangeField/DateRangeField.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__*/ h({
 	inheritAttrs: !1,
 	__name: "DateRangeField",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ v({
 		classes: {},
 		clearable: {
 			type: Boolean,
@@ -60,60 +62,63 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ g([
+	emits: /*@__PURE__*/ v([
 		"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(h, { emit: v }) {
+		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
 			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, dateOnly: B, formField: V, inputBind: H, clearBind: U, clearValue: W, modelValue: G, showFooter: K, orientation: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, dateRangePickerCustomProps: te } = i(N, L, P);
-		return (e, i) => (b(), l(o, null, [f(w(n), { field: w(V) }, {
-			default: E(() => [u("div", A, [u("input", y(m(w(H))), null, 16), w(X) ? (b(), l("span", _({ key: 0 }, w(U), {
-				onClick: i[0] ||= (...e) => w(W) && w(W)(...e),
-				"aria-label": w(F)("Clear"),
-				onKeydown: [i[1] ||= D(O((...e) => w(W) && w(W)(...e), ["prevent"]), ["enter"]), i[2] ||= D(O((...e) => w(W) && w(W)(...e), ["prevent"]), ["space"])]
-			}), [f(w(t), _({
+			get: () => M(F.value) ? z.value : F.value
+		}), { open: V, overlay: H, dateOnly: U, formField: W, inputBind: G, clearBind: K, clearValue: q, modelValue: J, showFooter: Y, orientation: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, handleOpenChange: te, handlePickerChange: ne, handlePickerCancel: re, overlayCustomProps: ie, dateRangePickerCustomProps: ae } = a(I, B, L);
+		return (e, a) => (S(), u(s, null, [m(D(i), { field: D(W) }, f({
+			default: k(() => [d("div", N, [d("input", x(g(D(G))), null, 16), D($) ? (S(), u("span", y({ key: 0 }, D(K), {
+				onClick: a[0] ||= (...e) => D(q) && D(q)(...e),
+				"aria-label": D(R)("Clear"),
+				onKeydown: [a[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
+			}), [m(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(Q)
+			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : l("", !0)])]),
+			_: 2
+		}, [w(D(t)(D(r), e.$slots), (t) => ({
+			name: t,
+			fn: k((n) => [T(e.$slots, t, x(g(n || {})))])
+		}))]), 1032, ["field"]), m(D(ee), {
+			modelValue: D(V),
+			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D(te)],
+			overlay: D(H),
+			"custom-props": D(ie)
 		}, {
-			default: E(() => [f(a, {
-				value: w(G),
-				class: v(w(J)),
-				"show-footer": w(K),
-				orientation: w(q),
-				"read-only": N.readonly,
-				"max-date": w(B).maxDate,
-				"min-date": w(B).minDate,
-				"time-zone": w(B).timeZone,
-				onChange: w(Q),
-				onCancel: w($),
-				"hide-years": w(B).hideYears,
-				"hide-months": w(B).hideMonths,
-				color: w(V).merged.value.color,
-				"start-of-week": w(B).startOfWeek,
-				disabled: w(V).isDisabled.value,
-				"disable-dates": w(B).disableDates,
-				"hide-weekdays": w(B).hideWeekdays,
-				"disable-years": w(B).disableYears,
-				"disable-months": w(B).disableMonths,
-				rounded: w(V).merged.value.rounded,
-				"custom-props": w(te),
-				"hide-outside-days": w(B).hideOutsideDays
+			default: k(() => [m(o, {
+				value: D(J),
+				class: b(D(Z)),
+				"show-footer": D(Y),
+				orientation: D(X),
+				"read-only": I.readonly,
+				"max-date": D(U).maxDate,
+				"min-date": D(U).minDate,
+				"time-zone": D(U).timeZone,
+				onChange: D(ne),
+				onCancel: D(re),
+				"hide-years": D(U).hideYears,
+				"hide-months": D(U).hideMonths,
+				color: D(W).merged.value.color,
+				"start-of-week": D(U).startOfWeek,
+				disabled: D(W).isDisabled.value,
+				"disable-dates": D(U).disableDates,
+				"hide-weekdays": D(U).hideWeekdays,
+				"disable-years": D(U).disableYears,
+				"disable-months": D(U).disableMonths,
+				rounded: D(W).merged.value.rounded,
+				"custom-props": D(ae),
+				"hide-outside-days": D(U).hideOutsideDays
 			}, {
-				day: E((t) => [S(e.$slots, "day", y(m(t)), () => [d(C(t.label), 1)])]),
+				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(t.label), 1)])]),
 				_: 3
 			}, 8, [
 				"value",
@@ -149,4 +154,4 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 	}
 });
 //#endregion
-export { M as default };
+export { F as default };

package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts

@@ -708,15 +708,25 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
     handlePickerChange: (next: null | DateRangeValue) => 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;
+            disableAutoFocus?: boolean;
+            disableScrollLock?: boolean;
+            keepMounted?: boolean;
+            offset?: number;
+            onShowChange?: (show: boolean) => void;
+            persistent?: boolean;
+            placement: import('@floating-ui/utils').Placement;
             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>;
-            placement: import('@floating-ui/utils').Placement;
-            anchorEl: HTMLElement | null;
+            strategy?: import('@bridge-ui/core').PositionStrategy;
+            teleportTo?: false | string;
         };
     }>;
     dateRangePickerCustomProps: import('vue').ComputedRef<import('../../DateRangePicker').DateRangePickerCustomProps | undefined>;

package/dist/Components/DateRangeField/dateRangeField.types.d.ts

@@ -32,19 +32,19 @@ export interface DateRangeFieldCustomProps 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 DateRangeFieldEmits {
     /**

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 ee from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeField as a } from "./composables/useDateTimeField.js";
+import o from "../DateTimePicker/DateTimePicker.js";
+import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef 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__*/ h({
 	inheritAttrs: !1,
 	__name: "DateTimeField",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ v({
 		ampm: { type: Boolean },
 		classes: {},
 		clearable: {
@@ -66,66 +68,69 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ g([
+	emits: /*@__PURE__*/ v([
 		"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(h, { emit: v }) {
+		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
 			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: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimePickerCustomProps: ie } = a(I, B, L);
+		return (e, a) => (S(), u(s, null, [m(D(i), { field: D(U) }, f({
+			default: k(() => [d("div", N, [d("input", x(g(D(W))), null, 16), D(Q) ? (S(), u("span", y({ key: 0 }, D(G), {
+				onClick: a[0] ||= (...e) => D(K) && D(K)(...e),
+				"aria-label": D(R)("Clear"),
+				onKeydown: [a[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [m(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)) : l("", !0)])]),
+			_: 2
+		}, [w(D(t)(D(r), e.$slots), (t) => ({
+			name: t,
+			fn: k((n) => [T(e.$slots, t, x(g(n || {})))])
+		}))]), 1032, ["field"]), m(D(ee), {
+			modelValue: D(V),
+			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D($)],
+			overlay: D(H),
+			"custom-props": D(re)
 		}, {
-			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
+			default: k(() => [m(D(o), {
+				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(te),
+				onCancel: D(ne),
+				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(ie),
+				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
 			}, {
-				day: E((t) => [S(e.$slots, "day", y(m(t)), () => [d(C(t.label), 1)])]),
+				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(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("."))]),
 			_: 3
@@ -138,4 +143,4 @@ var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"],
 	}
 });
 //#endregion
-export { M as default };
+export { F as default };

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

@@ -709,15 +709,25 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
     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;
+            disableAutoFocus?: boolean;
+            disableScrollLock?: boolean;
+            keepMounted?: boolean;
+            offset?: number;
+            onShowChange?: (show: boolean) => void;
+            persistent?: boolean;
+            placement: import('@floating-ui/utils').Placement;
             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>;
-            placement: import('@floating-ui/utils').Placement;
-            anchorEl: HTMLElement | null;
+            strategy?: import('@bridge-ui/core').PositionStrategy;
+            teleportTo?: false | string;
         };
     }>;
     dateTimePickerCustomProps: import('vue').ComputedRef<import('../../DateTimePicker').DateTimePickerCustomProps | undefined>;