@bridge-ui/vue 0.8.0 → 0.9.0

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

@@ -23,7 +23,7 @@ function C(C, w, T) {
 			...C
 		},
 		bridgeKeys: S
-	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable !== !1), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
+	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable === !0), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
 		overlay: z,
 		componentName: "DateTimeField",
 		fill: () => P.value.fill

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

@@ -89,7 +89,7 @@ export interface DateTimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" |
     /**
      * Whether the value can be cleared.
      *
-     * @default true
+     * @default false
      */
     clearable?: boolean;
     /**

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

@@ -1,4 +1,4 @@
-import e from "../Button/Button.js";
+import e from "../ActionFooter/ActionFooter.js";
 import t from "../Calendar/Calendar.js";
 import { useDateTimePicker as n } from "./composables/useDateTimePicker.js";
 import { TIME_PANEL_COLUMN_WIDTH_CLASS as r } from "../TimePanel/composables/useTimePanel.js";
@@ -48,7 +48,7 @@ var b = /*@__PURE__*/ u({
 		"change"
 	],
 	setup(u, { emit: b }) {
-		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, handleApply: E, cancelLabel: D, contentBind: O, displayValue: k, handleCancel: A, calendarBind: j, timeFillBind: M, timeSizerBind: N, timePanelBind: P, applyButtonProps: F, cancelButtonProps: I, handlePanelChange: L, handleCalendarChange: R, timePanelCustomProps: z } = n(u, {
+		let { merged: x, rootBind: S, footerBind: C, showFooter: w, handleApply: T, contentBind: E, displayValue: D, handleCancel: O, calendarBind: k, timeFillBind: A, timeSizerBind: j, timePanelBind: M, applyButtonProps: N, cancelButtonProps: P, handlePanelChange: F, handleCalendarChange: I, timePanelCustomProps: L } = n(u, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
@@ -57,10 +57,10 @@ var b = /*@__PURE__*/ u({
 			showSeconds: !1,
 			defaultView: "date"
 		}, b);
-		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(O)) }, [s("div", { class: p(v(j)) }, [l(t, {
+		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(E)) }, [s("div", { class: p(v(k)) }, [l(t, {
 			fill: v(x).fill,
 			color: v(x).color,
-			value: v(k),
+			value: v(D),
 			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
@@ -70,7 +70,7 @@ var b = /*@__PURE__*/ u({
 			"time-zone": v(x).timeZone,
 			"hide-years": v(x).hideYears,
 			"hide-months": v(x).hideMonths,
-			onChange: v(R),
+			onChange: v(I),
 			"default-view": v(x).defaultView,
 			"start-of-week": v(x).startOfWeek,
 			"disable-dates": v(x).disableDates,
@@ -102,9 +102,9 @@ var b = /*@__PURE__*/ u({
 			"disable-years",
 			"disable-months",
 			"hide-outside-days"
-		])], 2), s("div", { class: p(v(P)) }, [s("div", {
+		])], 2), s("div", { class: p(v(M)) }, [s("div", {
 			"aria-hidden": "true",
-			class: p(v(N))
+			class: p(v(j))
 		}, [
 			s("div", { class: p(v(r)) }, null, 2),
 			s("div", { class: p(v(r)) }, null, 2),
@@ -116,11 +116,11 @@ var b = /*@__PURE__*/ u({
 				key: 1,
 				class: p(v(r))
 			}, null, 2)) : a("", !0)
-		], 2), s("div", { class: p(v(M)) }, [l(v(i), {
+		], 2), s("div", { class: p(v(A)) }, [l(v(i), {
 			ampm: v(x).ampm,
 			fill: v(x).fill,
 			color: v(x).color,
-			value: v(k),
+			value: v(D),
 			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-time": v(x).maxTime,
@@ -129,10 +129,10 @@ var b = /*@__PURE__*/ u({
 			interval: v(x).interval,
 			"read-only": v(x).readOnly,
 			"time-zone": v(x).timeZone,
-			onChange: v(L),
+			onChange: v(F),
 			"show-seconds": v(x).showSeconds,
 			"disable-times": v(x).disableTimes,
-			"custom-props": v(z)
+			"custom-props": v(L)
 		}, null, 8, [
 			"ampm",
 			"fill",
@@ -151,19 +151,20 @@ var b = /*@__PURE__*/ u({
 			"disable-times",
 			"custom-props"
 		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [g(n.$slots, "footer", {
-			apply: v(E),
-			cancel: v(A)
-		}, () => [l(v(e), f({
-			variant: "flat",
-			color: "secondary",
-			onClick: v(A)
-		}, v(I)), {
-			default: y(() => [c(_(v(D)), 1)]),
-			_: 1
-		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(F), { onClick: v(E) }), {
-			default: y(() => [c(_(v(T)), 1)]),
-			_: 1
-		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));
+			apply: v(T),
+			cancel: v(O)
+		}, () => [l(v(e), {
+			onApply: v(T),
+			onCancel: v(O),
+			"custom-props": {
+				applyButton: v(N),
+				cancelButton: v(P)
+			}
+		}, null, 8, [
+			"onApply",
+			"onCancel",
+			"custom-props"
+		])])], 16)) : a("", !0)], 16));
 	}
 });
 //#endregion

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

@@ -9,7 +9,7 @@ type DateTimePickerMerged = MergeLibDefaults<DateTimePickerOwnProps, DateTimePic
  */
 export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: SetupContext<DateTimePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "defaultView" | "disableTimes" | "maxTime" | "minTime">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "showFooter" | "customProps" | "disabled" | "rounded" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "defaultView" | "disableTimes" | "maxTime" | "minTime">>>>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     handleApply: () => void;
@@ -27,8 +27,6 @@ export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePicker
             class: string;
         };
     }>;
-    applyLabel: import('vue').ComputedRef<string>;
-    cancelLabel: import('vue').ComputedRef<string>;
     applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
     cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
 };

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

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

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

@@ -17,7 +17,7 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		classes: {},
 		clearable: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		customProps: {},
 		defaultValue: {},

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts

@@ -437,7 +437,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -688,7 +688,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, "class", {
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>, "class", {
         value: string;
         readonly: boolean;
         onFocus: (event: FocusEvent) => void;

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.js

@@ -26,7 +26,7 @@ function T(g, T, E) {
 			...g
 		},
 		bridgeKeys: C
-	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => T.value ?? null), L = u(() => P.value.clearable !== !1), R = u(() => !h(I.value)), z = (e) => {
+	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => T.value ?? null), L = u(() => P.value.clearable === !0), R = u(() => !h(I.value)), z = (e) => {
 		M.value = e instanceof HTMLElement ? e : null;
 	};
 	function B(e) {

package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts

@@ -89,7 +89,7 @@ export interface DateTimeRangeFieldOwnProps extends Omit<FormFieldOwnProps, "fie
     /**
      * Whether the value can be cleared.
      *
-     * @default true
+     * @default false
      */
     clearable?: boolean;
     /**

package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import e from "../Button/Button.js";
+import e from "../ActionFooter/ActionFooter.js";
 import t from "../CalendarRange/CalendarRange.js";
 import { TIME_PANEL_COLUMN_WIDTH_CLASS as n } from "../TimePanel/composables/useTimePanel.js";
 import r from "../TimePanel/TimePanel.js";
@@ -48,7 +48,7 @@ var b = /*@__PURE__*/ u({
 		"change"
 	],
 	setup(u, { emit: b }) {
-		let { merged: x, rootBind: S, timeBind: C, footerBind: w, showFooter: T, applyLabel: E, handleApply: D, cancelLabel: O, contentBind: k, displayValue: A, handleCancel: j, calendarBind: M, timeFillBind: N, endTimeValue: P, timeSizerBind: F, startTimeValue: I, applyButtonProps: L, cancelButtonProps: R, handleCalendarChange: z, handleEndPanelChange: B, timePanelCustomProps: V, handleStartPanelChange: H } = i(u, {
+		let { merged: x, rootBind: S, timeBind: C, footerBind: w, showFooter: T, handleApply: E, contentBind: D, displayValue: O, handleCancel: k, calendarBind: A, timeFillBind: j, endTimeValue: M, timeSizerBind: N, startTimeValue: P, applyButtonProps: F, cancelButtonProps: I, handleCalendarChange: L, handleEndPanelChange: R, timePanelCustomProps: z, handleStartPanelChange: B } = i(u, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
@@ -57,11 +57,11 @@ var b = /*@__PURE__*/ u({
 			showSeconds: !1,
 			orientation: "horizontal"
 		}, b);
-		return (i, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(k)) }, [s("div", { class: p(v(M)) }, [l(t, {
+		return (i, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(D)) }, [s("div", { class: p(v(A)) }, [l(t, {
 			fill: v(x).fill,
 			color: v(x).color,
 			error: v(x).error,
-			value: v(A),
+			value: v(O),
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
 			"min-date": v(x).minDate,
@@ -71,7 +71,7 @@ var b = /*@__PURE__*/ u({
 			"hide-years": v(x).hideYears,
 			"hide-months": v(x).hideMonths,
 			orientation: v(x).orientation,
-			onChange: v(z),
+			onChange: v(L),
 			"start-of-week": v(x).startOfWeek,
 			"disable-dates": v(x).disableDates,
 			"hide-weekdays": v(x).hideWeekdays,
@@ -82,7 +82,7 @@ var b = /*@__PURE__*/ u({
 			day: y((e) => [g(i.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
 			startAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {
 				"aria-hidden": "true",
-				class: p(v(F))
+				class: p(v(N))
 			}, [
 				s("div", { class: p(v(n)) }, null, 2),
 				s("div", { class: p(v(n)) }, null, 2),
@@ -94,12 +94,12 @@ var b = /*@__PURE__*/ u({
 					key: 1,
 					class: p(v(n))
 				}, null, 2)) : a("", !0)
-			], 2), s("div", { class: p(v(N)) }, [l(v(r), {
+			], 2), s("div", { class: p(v(j)) }, [l(v(r), {
 				ampm: v(x).ampm,
 				fill: v(x).fill,
 				color: v(x).color,
 				error: v(x).error,
-				value: v(I),
+				value: v(P),
 				rounded: v(x).rounded,
 				"max-time": v(x).maxTime,
 				"min-time": v(x).minTime,
@@ -108,9 +108,9 @@ var b = /*@__PURE__*/ u({
 				"read-only": v(x).readOnly,
 				"time-zone": v(x).timeZone,
 				"show-seconds": v(x).showSeconds,
-				onChange: v(H),
+				onChange: v(B),
 				"disable-times": v(x).disableTimes,
-				"custom-props": v(V)
+				"custom-props": v(z)
 			}, null, 8, [
 				"ampm",
 				"fill",
@@ -131,7 +131,7 @@ var b = /*@__PURE__*/ u({
 			])], 2)], 2)]),
 			endAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {
 				"aria-hidden": "true",
-				class: p(v(F))
+				class: p(v(N))
 			}, [
 				s("div", { class: p(v(n)) }, null, 2),
 				s("div", { class: p(v(n)) }, null, 2),
@@ -143,11 +143,11 @@ var b = /*@__PURE__*/ u({
 					key: 1,
 					class: p(v(n))
 				}, null, 2)) : a("", !0)
-			], 2), s("div", { class: p(v(N)) }, [l(v(r), {
+			], 2), s("div", { class: p(v(j)) }, [l(v(r), {
 				ampm: v(x).ampm,
 				fill: v(x).fill,
 				color: v(x).color,
-				value: v(P),
+				value: v(M),
 				error: v(x).error,
 				rounded: v(x).rounded,
 				"max-time": v(x).maxTime,
@@ -157,9 +157,9 @@ var b = /*@__PURE__*/ u({
 				"read-only": v(x).readOnly,
 				"time-zone": v(x).timeZone,
 				"show-seconds": v(x).showSeconds,
-				onChange: v(B),
+				onChange: v(R),
 				"disable-times": v(x).disableTimes,
-				"custom-props": v(V)
+				"custom-props": v(z)
 			}, null, 8, [
 				"ampm",
 				"fill",
@@ -201,19 +201,20 @@ var b = /*@__PURE__*/ u({
 			"disable-months",
 			"hide-outside-days"
 		])], 2)], 2), v(T) ? (h(), o("div", m(f({ key: 0 }, v(w))), [g(i.$slots, "footer", {
-			apply: v(D),
-			cancel: v(j)
-		}, () => [l(v(e), f({
-			variant: "flat",
-			color: "secondary",
-			onClick: v(j)
-		}, v(R)), {
-			default: y(() => [c(_(v(O)), 1)]),
-			_: 1
-		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(L), { onClick: v(D) }), {
-			default: y(() => [c(_(v(E)), 1)]),
-			_: 1
-		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));
+			apply: v(E),
+			cancel: v(k)
+		}, () => [l(v(e), {
+			onApply: v(E),
+			onCancel: v(k),
+			"custom-props": {
+				applyButton: v(F),
+				cancelButton: v(I)
+			}
+		}, null, 8, [
+			"onApply",
+			"onCancel",
+			"custom-props"
+		])])], 16)) : a("", !0)], 16));
 	}
 });
 //#endregion

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts

@@ -9,7 +9,7 @@ type DateTimeRangePickerMerged = MergeLibDefaults<DateTimeRangePickerOwnProps, D
  */
 export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeRangePickerOwnProps>, libDefaults: DateTimeRangePickerLibDefaults, emit: SetupContext<DateTimeRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimeRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "disableTimes" | "maxTime" | "minTime">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "disabled" | "rounded" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "disableTimes" | "maxTime" | "minTime">>>>;
     timeBind: import('vue').ComputedRef<string>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
@@ -30,8 +30,6 @@ export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeR
         };
     }>;
     handleStartPanelChange: (next: null | TimeValue) => void;
-    applyLabel: import('vue').ComputedRef<string>;
-    cancelLabel: import('vue').ComputedRef<string>;
     applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
     cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
 };