@bridge-ui/vue 0.0.10 → 0.0.11

package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts

@@ -1,5 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+import { DateRangeValue, DisableDatesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
 import { CalendarRangeOrientation } from '../CalendarRange';
@@ -42,6 +44,10 @@ export interface DateRangePickerCustomProps {
     root?: HTMLAttributes;
 }
 export interface DateRangePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -149,13 +155,17 @@ export interface DateRangePickerOwnProps {
      */
     readOnly?: boolean;
     /**
-     * Border radius of calendar tiles and chrome.
+     * Border radius of the picker shell, calendar tiles, and chrome.
+     *
+     * The shell uses the Menu panel scale (`full` caps at `rounded-panel-full`).
+     * Calendar tiles keep a true pill when `rounded` is `full`.
      *
      * @default "md"
      */
     rounded?: MergeProps<CalendarRounded, DateRangePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -192,6 +202,13 @@ export interface DateRangePickerSlots {
      * @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 DateRangePickerTokens {
     /**

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

@@ -7,17 +7,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: Date | null) => any;
     close: () => any;
     open: () => any;
     "update:modelValue": (value: Date | null | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Date | null | undefined) => any) | undefined;
 }>, {
+    showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js

@@ -3,13 +3,13 @@ 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 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 N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ h({
+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__*/ v({
@@ -36,7 +36,10 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		minDate: {},
 		minTime: {},
 		overlay: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
@@ -69,38 +72,40 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ v([
+		"apply",
+		"cancel",
 		"change",
 		"clear",
 		"close",
 		"open"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
+	setup(g, { emit: v }) {
+		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
 			set: (e) => {
 				F.value = e, z.value = e;
 			},
 			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),
+		}), { 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: [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({
+				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: D(Z)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : l("", !0)])]),
+			}, 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(g(n || {})))])
-		}))]), 1032, ["field"]), m(D(ee), {
-			modelValue: D(V),
-			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D($)],
+			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
+		}))]), 1032, ["field"]), h(D(a), {
 			overlay: D(H),
-			"custom-props": D(re)
+			"model-value": D(V),
+			"custom-props": D(ne),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: k(() => [m(D(o), {
+			default: k(() => [h(D(s), {
 				value: D(q),
 				class: b(D(Y)),
 				ampm: D(X).ampm,
@@ -110,8 +115,8 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"min-date": D(X).minDate,
 				"max-time": D(X).maxTime,
 				"min-time": D(X).minTime,
-				onChange: D(te),
-				onCancel: D(ne),
+				onChange: D(ee),
+				onCancel: D(te),
 				interval: D(X).interval,
 				"time-zone": D(X).timeZone,
 				"hide-years": D(X).hideYears,
@@ -121,7 +126,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"show-seconds": D(X).showSeconds,
 				"default-view": D(X).defaultView,
 				"start-of-week": D(X).startOfWeek,
-				"custom-props": D(ie),
+				"custom-props": D(re),
 				rounded: D(U).merged.value.rounded,
 				"disable-dates": D(X).disableDates,
 				"hide-weekdays": D(X).hideWeekdays,
@@ -129,14 +134,18 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"disable-years": D(X).disableYears,
 				"disable-months": D(X).disableMonths,
 				"hide-outside-days": D(X).hideOutsideDays
-			}, {
-				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("."))]),
+			}, 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));

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,9 +701,9 @@ 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;
@@ -724,9 +724,9 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             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>;
-            strategy?: import('@bridge-ui/core').PositionStrategy;
+            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;
         };
     }>;

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';
@@ -47,6 +48,14 @@ export interface DateTimeFieldCustomProps extends FormFieldCustomProps {
     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;