@bridge-ui/vue 0.0.11 → 0.1.1

package/dist/Components/ColorPicker/composables/useColorPicker.js

@@ -0,0 +1,253 @@
+import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { FIELD_OVERLAY_INJECTION_KEY as i } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as a, inject as o, ref as s, toValue as c, useAttrs as ee, watch as te } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { DEFAULT_COLOR_FORMAT as d, DEFAULT_HSVA as f, colorStringsEqual as p, formatColor as m, hueToCssRgb as ne, parseColor as h, resolveColorAlpha as g, saturationValueFromPointer as _, toCssRgba as v, unitFromPointer as y } from "@bridge-ui/core/Domain";
+import { colorPickerRoundedProps as b, colorPickerSizeProps as re } from "@bridge-ui/core/Tokens";
+import { cn as x, mergeBridgeUILayeredClasses as S, splitComponentProps as ie } from "@bridge-ui/core/Utils";
+//#region src/Components/ColorPicker/composables/useColorPicker.ts
+var ae = [
+	"fill",
+	"alpha",
+	"value",
+	"format",
+	"classes",
+	"rounded",
+	"disabled",
+	"readOnly",
+	"swatches",
+	"showFooter",
+	"customProps",
+	"defaultValue"
+];
+function C(e) {
+	return h(e) ?? f;
+}
+function w(f, w, T) {
+	let oe = ee(), E = o(i, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), D = e(), O = a(() => ie({
+		bridgeKeys: ae,
+		props: {
+			...oe,
+			...c(f)
+		}
+	})), { merged: k, entry: A } = n({
+		libDefaults: w,
+		componentName: "ColorPicker",
+		props: () => O.value.componentProps
+	}), j = a(() => k.value.customProps), M = a(() => u(O.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), N = r({
+		entry: A,
+		props: () => O.value.componentProps
+	}), P = a(() => c(f)), F = a(() => P.value.value !== void 0), I = s(k.value.defaultValue ?? null), L = a(() => F.value ? P.value.value ?? null : I.value), R = a(() => k.value.format ?? d), z = s(C(L.value));
+	te(() => [L.value, k.value.showFooter], ([e, t]) => {
+		t && (z.value = C(e));
+	});
+	let B = a(() => k.value.showFooter ? z.value : C(L.value)), V = a(() => g(k.value.alpha, R.value)), H = a(() => m(B.value, R.value)), U = a(() => v(B.value)), W = a(() => ne(B.value.h)), G = a(() => v({
+		...B.value,
+		a: 1
+	})), K = a(() => {
+		let e = S(re, A.value?.tokens?.size);
+		return l(e, ["md", "swatch"]) ?? "";
+	}), q = a(() => {
+		let e = S(b, A.value?.tokens?.rounded);
+		return l(e, k.value.rounded ?? "md") ?? "";
+	}), J = a(() => (k.value.swatches ?? []).filter((e) => h(e))), Y = a(() => !k.value.disabled && !k.value.readOnly), X = (e) => {
+		F.value || (I.value = e), T("change", e);
+	}, Z = (e) => {
+		if (k.value.showFooter) {
+			z.value = e;
+			return;
+		}
+		X(m(e, R.value));
+	}, Q = (e) => {
+		Z({
+			...B.value,
+			...e
+		});
+	}, se = (e) => {
+		let t = h(e);
+		!t || !Y.value || Z(t);
+	}, ce = () => {
+		X(m(z.value, R.value)), T("apply"), E.apply();
+	}, le = () => {
+		z.value = C(L.value), T("cancel"), E.cancel();
+	}, ue = (e) => {
+		if (!Y.value) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = _(e.clientX, e.clientY, t);
+		Q(n);
+	}, de = (e) => {
+		if (!Y.value) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = y(e.clientX, t.left, t.width);
+		Q({ h: n * 360 });
+	}, fe = (e) => {
+		if (!Y.value) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = y(e.clientX, t.left, t.width);
+		Q({ a: n });
+	}, $ = (e) => ({
+		onPointerdown: (t) => {
+			t.preventDefault(), t.currentTarget.setPointerCapture(t.pointerId), e(t);
+		},
+		onPointermove: (t) => {
+			t.currentTarget.hasPointerCapture(t.pointerId) && e(t);
+		}
+	}), pe = (e) => {
+		if (!Y.value) return;
+		let t = e.shiftKey ? 10 : 1;
+		e.key === "ArrowLeft" ? (e.preventDefault(), Q({ s: B.value.s - t })) : e.key === "ArrowRight" ? (e.preventDefault(), Q({ s: B.value.s + t })) : e.key === "ArrowDown" ? (e.preventDefault(), Q({ v: B.value.v - t })) : e.key === "ArrowUp" && (e.preventDefault(), Q({ v: B.value.v + t }));
+	}, me = (e) => {
+		if (!Y.value) return;
+		let t = e.shiftKey ? 10 : 1;
+		e.key === "ArrowLeft" || e.key === "ArrowDown" ? (e.preventDefault(), Q({ h: B.value.h - t })) : (e.key === "ArrowRight" || e.key === "ArrowUp") && (e.preventDefault(), Q({ h: B.value.h + t }));
+	}, he = (e) => {
+		if (!Y.value) return;
+		let t = e.shiftKey ? .1 : .01;
+		e.key === "ArrowLeft" || e.key === "ArrowDown" ? (e.preventDefault(), Q({ a: B.value.a - t })) : (e.key === "ArrowRight" || e.key === "ArrowUp") && (e.preventDefault(), Q({ a: B.value.a + t }));
+	}, ge = a(() => t(j.value?.root, M.value, x({
+		"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+		"w-full": k.value.fill,
+		"w-72": !k.value.fill,
+		[q.value]: !0,
+		[N.value.root ?? ""]: !0
+	}))), _e = a(() => x({ "flex flex-col gap-3 p-3": !0 })), ve = a(() => t(j.value?.area, {
+		...$(ue),
+		role: "slider",
+		onKeydown: pe,
+		tabindex: Y.value ? 0 : -1,
+		style: { backgroundColor: W.value },
+		"aria-label": D("Saturation and brightness"),
+		"aria-valuetext": `Saturation ${Math.round(B.value.s)}%, Brightness ${Math.round(B.value.v)}%`
+	}, x({
+		"relative h-40 w-full cursor-crosshair overflow-hidden touch-none": !0,
+		[q.value]: !0,
+		"cursor-not-allowed": !Y.value,
+		[N.value.area ?? ""]: !0
+	}))), ye = a(() => ({
+		"aria-hidden": !0,
+		style: {
+			left: `${B.value.s}%`,
+			top: `${100 - B.value.v}%`
+		},
+		class: "pointer-events-none absolute z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+	})), be = a(() => t(j.value?.hue, {
+		...$(de),
+		role: "slider",
+		"aria-valuemin": 0,
+		"aria-valuemax": 360,
+		onKeydown: me,
+		"aria-label": D("Hue"),
+		tabindex: Y.value ? 0 : -1,
+		"aria-valuenow": Math.round(B.value.h),
+		style: { backgroundImage: "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)" }
+	}, x({
+		"relative h-3 w-full cursor-pointer touch-none": !0,
+		"rounded-full": !0,
+		"cursor-not-allowed": !Y.value,
+		[N.value.hue ?? ""]: !0
+	}))), xe = a(() => ({
+		"aria-hidden": !0,
+		style: {
+			backgroundColor: W.value,
+			left: `${B.value.h / 360 * 100}%`
+		},
+		class: "pointer-events-none absolute top-1/2 z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+	})), Se = a(() => t(j.value?.alpha, {
+		...$(fe),
+		role: "slider",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		onKeydown: he,
+		tabindex: Y.value ? 0 : -1,
+		"aria-label": D("Alpha"),
+		"aria-valuenow": Math.round(B.value.a * 100)
+	}, x({
+		"relative h-3 w-full cursor-pointer overflow-hidden touch-none": !0,
+		"bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]": !0,
+		"rounded-full": !0,
+		"cursor-not-allowed": !Y.value,
+		[N.value.alpha ?? ""]: !0
+	}))), Ce = a(() => ({
+		"aria-hidden": !0,
+		class: "pointer-events-none absolute inset-0",
+		style: { backgroundImage: `linear-gradient(to right, transparent, ${G.value})` }
+	})), we = a(() => ({
+		"aria-hidden": !0,
+		style: {
+			backgroundColor: U.value,
+			left: `${B.value.a * 100}%`
+		},
+		class: "pointer-events-none absolute top-1/2 z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+	})), Te = a(() => t(j.value?.preview, {}, x({
+		"flex items-center gap-2": !0,
+		[N.value.preview ?? ""]: !0
+	}))), Ee = a(() => ({
+		"aria-hidden": !0,
+		class: x({
+			"relative shrink-0 overflow-hidden": !0,
+			"bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]": !0,
+			[K.value]: !0,
+			[q.value]: !0
+		})
+	})), De = a(() => ({
+		class: "absolute inset-0",
+		style: { backgroundColor: U.value }
+	})), Oe = a(() => t(j.value?.swatches, {}, x({
+		"flex flex-wrap gap-2": !0,
+		[N.value.swatches ?? ""]: !0
+	})));
+	return {
+		merged: k,
+		hueBind: be,
+		rootBind: ge,
+		areaBind: ve,
+		cssColor: U,
+		alphaBind: Se,
+		showAlpha: V,
+		footerBind: a(() => t(j.value?.footer, {}, x({
+			"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,
+			[N.value.footer ?? ""]: !0
+		}))),
+		showFooter: a(() => !!k.value.showFooter),
+		previewBind: Te,
+		contentBind: _e,
+		handleApply: ce,
+		swatchesBind: Oe,
+		handleCancel: le,
+		hueThumbBind: xe,
+		areaThumbBind: ye,
+		alphaFillBind: Ce,
+		formattedValue: H,
+		alphaThumbBind: we,
+		presetSwatches: J,
+		previewSwatchBind: Ee,
+		handleSwatchClick: se,
+		swatchButtonClass: a(() => x({
+			"relative shrink-0 overflow-hidden": !0,
+			"bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]": !0,
+			[K.value]: !0,
+			[q.value]: !0,
+			"border border-black/10 dark:border-white/15": !0,
+			"hover:ring-2 hover:ring-dark-300 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-dark-500 dark:hover:ring-offset-dark-900": Y.value,
+			"cursor-not-allowed opacity-50": !Y.value
+		})),
+		swatchSelectedClass: a(() => "ring-2 ring-dark-500 ring-offset-2 ring-offset-white dark:ring-dark-400 dark:ring-offset-dark-900"),
+		previewSwatchFillBind: De,
+		applyLabel: a(() => D("Apply")),
+		cancelLabel: a(() => D("Cancel")),
+		applyButtonProps: a(() => j.value?.applyButton),
+		cancelButtonProps: a(() => j.value?.cancelButton),
+		isSwatchSelected: (e) => p(e, H.value),
+		swatchCss: (e) => {
+			let t = h(e);
+			return t ? v(t) : void 0;
+		}
+	};
+}
+//#endregion
+export { w as useColorPicker };

package/dist/Components/ColorPicker/index.d.ts

@@ -0,0 +1,3 @@
+export type { ColorPickerClasses, ColorPickerCustomProps, ColorPickerEmits, ColorPickerOwnProps, ColorPickerProps, ColorPickerRoundedOverrides, ColorPickerSlots, } from './colorPicker.types';
+export { default as ColorPicker } from './ColorPicker.vue';
+export { useColorPicker } from './composables/useColorPicker';

package/dist/Components/ColorPicker/index.js

@@ -0,0 +1,3 @@
+import { useColorPicker as e } from "./composables/useColorPicker.js";
+import t from "./ColorPicker.js";
+export { t as ColorPicker, e as useColorPicker };

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

@@ -23,6 +23,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: DatePickerModel | undefined) => any) | undefined;
 }>, {
+    fill: boolean;
     showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;

package/dist/Components/DateField/DateField.vue_vue_type_script_setup_true_lang.js

@@ -24,6 +24,11 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		disableDates: {},
 		disableMonths: {},
 		disableYears: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -81,7 +86,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				F.value = e, z.value = e;
 			},
 			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: ee, handlePickerCancel: te, overlayCustomProps: ne, datePickerCustomProps: re } = o(I, B, L);
+		}), { open: V, fill: ee, 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 } = o(I, B, L);
 		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(W) }, p({
 			default: k(() => [f("div", N, [f("input", x(_(D(G))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(K), {
 				onClick: o[0] ||= (...e) => D(q) && D(q)(...e),
@@ -98,10 +103,11 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		}))]), 1032, ["field"]), h(D(a), {
 			overlay: D(H),
 			"model-value": D(V),
-			"custom-props": D(ne),
+			"custom-props": D(re),
 			"onUpdate:modelValue": D($)
 		}, {
 			default: k(() => [h(D(s), {
+				fill: D(ee),
 				value: D(J),
 				class: b(D(X)),
 				range: D(U).range,
@@ -112,13 +118,14 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				multiple: D(U).multiple,
 				"time-zone": D(U).timeZone,
 				"hide-years": D(U).hideYears,
-				onChange: D(ee),
-				onCancel: D(te),
+				onChange: D(te),
+				onCancel: D(ne),
 				"hide-months": D(U).hideMonths,
 				"default-view": D(U).defaultView,
+				error: D(W).invalidated.value,
 				color: D(W).merged.value.color,
 				"start-of-week": D(U).startOfWeek,
-				"custom-props": D(re),
+				"custom-props": D(ie),
 				disabled: D(W).isDisabled.value,
 				"disable-dates": D(U).disableDates,
 				"hide-weekdays": D(U).hideWeekdays,
@@ -133,32 +140,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				name: "footer",
 				fn: k((t) => [T(e.$slots, "footer", x(_(t)))]),
 				key: "0"
-			} : void 0]), 1032, [
-				"value",
-				"class",
-				"range",
-				"show-footer",
-				"read-only",
-				"max-date",
-				"min-date",
-				"multiple",
-				"time-zone",
-				"hide-years",
-				"onChange",
-				"onCancel",
-				"hide-months",
-				"default-view",
-				"color",
-				"start-of-week",
-				"custom-props",
-				"disabled",
-				"disable-dates",
-				"hide-weekdays",
-				"disable-years",
-				"disable-months",
-				"rounded",
-				"hide-outside-days"
-			])]),
+			} : void 0]), 1032, /* @__PURE__ */ "fill.value.class.range.show-footer.read-only.max-date.min-date.multiple.time-zone.hide-years.onChange.onCancel.hide-months.default-view.error.color.start-of-week.custom-props.disabled.disable-dates.hide-weekdays.disable-years.disable-months.rounded.hide-outside-days".split("."))]),
 			_: 3
 		}, 8, [
 			"overlay",

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

@@ -5,9 +5,10 @@ import { FormFieldOwnProps } from '../../FormField/formField.types';
 export declare function useDateField(props: DateFieldOwnProps, model: Ref<null | undefined | DatePickerModel>, emit: SetupContext<DateFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
     mode: import('vue').ComputedRef<import('@bridge-ui/core/Domain').DatePickerMode>;
+    fill: import('vue').ComputedRef<boolean>;
     overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
-    dateOnly: import('vue').ComputedRef<Pick<DateFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "multiple" | "range" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>;
+    dateOnly: import('vue').ComputedRef<Pick<DateFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "multiple" | "range" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "editable">>;
     formField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
@@ -686,9 +687,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
     }, 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">>>, "class", {
         value: string;
         readonly: boolean;
-        onBlur: (event: FocusEvent) => void;
         onFocus: (event: FocusEvent) => void;
-        onInput: (event: Event) => void;
         onKeydown: (event: KeyboardEvent) => void;
     }, undefined>>;
     clearable: import('vue').ComputedRef<boolean>;
@@ -702,7 +701,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
     clearValue: (event?: Event) => void;
     modelValue: import('vue').ComputedRef<Date | Date[] | null>;
     showFooter: import('vue').ComputedRef<boolean>;
-    pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
+    pickerClass: import('vue').ComputedRef<string | undefined>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

package/dist/Components/DateField/composables/useDateField.js

@@ -1,20 +1,22 @@
 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, 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, isArray as m, isNil as h, omit as g } from "es-toolkit/compat";
-import { isDateRangeValue as _, isFieldOverlayDialog as ee, resolveDatePickerMode as v, resolveFieldOverlay as y } from "@bridge-ui/core/Domain";
-import { listboxColorProps as te } from "@bridge-ui/core/Tokens";
-import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o, usePickerFill as s } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as c, useFormField as l } from "../../FormField/composables/useFormField.js";
+import { computed as u, ref as d, useAttrs as f, useSlots as p } from "vue";
+import { get as m, isArray as h, isNil as g, omit as _ } from "es-toolkit/compat";
+import { isDateRangeValue as v, resolveDatePickerMode as y, resolveFieldOverlay as b, resolveFieldPickerClassName as x } from "@bridge-ui/core/Domain";
+import { listboxColorProps as S } from "@bridge-ui/core/Tokens";
+import { cn as C, splitComponentProps as w } from "@bridge-ui/core/Utils";
 //#region src/Components/DateField/composables/useDateField.ts
-var ne = [
+var T = [
+	"fill",
 	"range",
 	"classes",
 	"maxDate",
 	"minDate",
 	"overlay",
+	"editable",
 	"multiple",
 	"timeZone",
 	"clearable",
@@ -31,148 +33,134 @@ var ne = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function S(e, t, n) {
-	return h(e) ? "" : _(e) ? `${t.format(e[0], n)} – ${t.format(e[1], n)}` : m(e) ? e.map((e) => t.format(e, n)).join(", ") : t.format(e, n);
+function E(e, t, n) {
+	return g(e) ? "" : v(e) ? `${t.format(e[0], n)} – ${t.format(e[1], n)}` : h(e) ? e.map((e) => t.format(e, n)).join(", ") : t.format(e, n);
 }
-function C(e) {
-	return h(e) ? !1 : !m(e) || e.length > 0;
+function ee(e) {
+	return g(e) ? !1 : !h(e) || e.length > 0;
 }
-function w(m, _, w) {
-	let T = d(), E = f(), D = e(), O = r(), k = t(), A = u(!1), j = u(null), M = u(null), N = l(() => x({
+function D(h, g, v) {
+	let D = f(), O = p(), k = e(), A = r(), j = t(), M = d(!1), N = d(null), P = u(() => w({
 		props: {
-			...T,
-			...m
+			...D,
+			...h
 		},
-		bridgeKeys: ne
-	})), P = l(() => N.value.componentProps), F = l(() => k(P.value.timeZone)), I = l(() => v({
-		range: P.value.range,
-		multiple: P.value.multiple
-	})), L = l(() => y(P.value.overlay, O.mobile)), R = o({
-		overlay: L,
+		bridgeKeys: T
+	})), F = u(() => P.value.componentProps), I = u(() => j(F.value.timeZone)), L = u(() => y({
+		range: F.value.range,
+		multiple: F.value.multiple
+	})), R = u(() => b(F.value.overlay, A.mobile)), z = o({
+		overlay: R,
 		componentName: "DateField",
-		showFooter: () => P.value.showFooter
-	}), z = l(() => _.value ?? null), B = l(() => P.value.clearable !== !1), V = l(() => C(z.value)), H = l(() => ee(L.value) ? "w-full shadow-none" : void 0), U = (e) => {
-		M.value = e instanceof HTMLElement ? e : null;
+		showFooter: () => F.value.showFooter
+	}), B = u(() => g.value ?? null), V = u(() => F.value.clearable !== !1), H = u(() => ee(B.value)), U = s({
+		overlay: R,
+		componentName: "DateField",
+		fill: () => F.value.fill
+	}), W = u(() => x(U.value, R.value)), G = (e) => {
+		N.value = e instanceof HTMLElement ? e : null;
 	};
-	function W(e) {
-		A.value !== e && (A.value = e, e ? w("open") : (w("close"), j.value = null));
+	function K(e) {
+		M.value !== e && (M.value = e, v(e ? "open" : "close"));
 	}
-	let G = l(() => g(N.value.inheritedAttrs, ["class"])), K = l(() => {
-		let e = x({
-			bridgeKeys: s,
-			props: G.value
-		}).componentProps, t = e.endIcon ?? (n(E, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, datePicker: o, ...c } = P.value.customProps ?? {};
+	let q = u(() => _(P.value.inheritedAttrs, ["class"])), J = u(() => {
+		let e = w({
+			bridgeKeys: c,
+			props: q.value
+		}).componentProps, t = e.endIcon ?? (n(O, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, datePicker: o, ...s } = F.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
-			classes: P.value.classes,
+			classes: F.value.classes,
 			customProps: {
-				...c,
-				container: i(c.container, {}, {
-					ref: U,
-					class: b({ "cursor-pointer": !m.disabled && !m.readonly }),
+				...s,
+				container: i(s.container, {}, {
+					ref: G,
+					class: C({ "cursor-pointer": !h.disabled && !h.readonly }),
 					onClick: (e) => {
-						m.disabled || m.readonly || e.target.closest("[data-field-clear]") || W(!0);
+						h.disabled || h.readonly || e.target.closest("[data-field-clear]") || K(!0);
 					}
 				})
 			}
 		};
-	}), q = c(() => K.value, {
+	}), Y = l(() => J.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateField" }), J = l(() => V.value && B.value && !m.readonly && !q.isDisabled.value), Y = l(() => h(j.value) ? S(z.value, D.value, F.value) : j.value);
-	function X(e) {
-		_.value = e, w("change", e);
+	}, { componentName: "DateField" }), X = u(() => H.value && V.value && !h.readonly && !Y.isDisabled.value), Z = u(() => E(B.value, k.value, I.value));
+	function Q(e) {
+		g.value = e, v("change", e);
 	}
-	function Z(e) {
-		if (X(e), j.value = null, R.value) {
-			w("apply");
+	function $(e) {
+		if (Q(e), z.value) {
+			v("apply");
 			return;
 		}
-		I.value === "single" && W(!1);
+		L.value === "single" && K(!1);
 	}
-	function re() {
-		w("cancel");
+	function te() {
+		v("cancel");
 	}
-	function Q(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(m.disabled || m.readonly) && (X(null), j.value = null, w("clear"), W(!1));
+	function ne(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(h.disabled || h.readonly) && (Q(null), v("clear"), K(!1));
 	}
-	function ie(e) {
+	function re(e) {
 		e.preventDefault();
 	}
-	function $() {
-		if (h(j.value)) return;
-		if (j.value.trim() === "") {
-			X(null), j.value = null;
-			return;
-		}
-		if (I.value !== "single") {
-			j.value = null;
-			return;
-		}
-		let e = D.value.parse(j.value, F.value);
-		h(e) || X(e), j.value = null;
-	}
-	let ae = l(() => i({
-		value: Y.value,
-		readonly: I.value !== "single" || q.inputBind.value.readonly,
-		onBlur: (e) => {
-			q.inputBind.value.onBlur?.(e), $();
-		},
+	let ie = u(() => i({
+		value: Z.value,
+		readonly: !F.value.editable || Y.inputBind.value.readonly,
 		onFocus: (e) => {
-			q.inputBind.value.onFocus?.(e), W(!0);
-		},
-		onInput: (e) => {
-			I.value === "single" && (j.value = e.target.value);
+			Y.inputBind.value.onFocus?.(e), K(!0);
 		},
 		onKeydown: (e) => {
-			q.inputBind.value.onKeydown?.(e), e.key === "Enter" && $(), e.key === "Escape" && (j.value = null, W(!1));
+			Y.inputBind.value.onKeydown?.(e), e.key === "Escape" && K(!1);
 		}
-	}, void 0, q.inputBind.value)), oe = l(() => P.value.overlay), se = l(() => ({
-		modal: P.value.customProps?.modal,
-		drawer: P.value.customProps?.drawer,
+	}, void 0, Y.inputBind.value)), ae = u(() => F.value.overlay), oe = u(() => ({
+		modal: F.value.customProps?.modal,
+		drawer: F.value.customProps?.drawer,
 		menu: {
-			anchorEl: M.value,
+			anchorEl: N.value,
 			placement: "bottom-start",
-			...P.value.customProps?.menu
+			...F.value.customProps?.menu
 		}
-	})), ce = l(() => P.value.customProps?.datePicker), le = l(() => a(q.merged.value.size)), ue = l(() => p(te, [q.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), se = u(() => F.value.customProps?.datePicker), ce = u(() => a(Y.merged.value.size)), le = u(() => m(S, [Y.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
-		open: A,
-		mode: I,
-		overlay: oe,
-		hasValue: V,
-		dateOnly: P,
-		formField: q,
-		inputBind: ae,
-		clearable: B,
-		clearBind: l(() => i({}, {}, {
+		open: M,
+		mode: L,
+		fill: U,
+		overlay: ae,
+		hasValue: H,
+		dateOnly: F,
+		formField: Y,
+		inputBind: ie,
+		clearable: V,
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: ie,
-			class: b({
+			onMousedown: re,
+			class: C({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-				[ue.value]: !0,
-				[P.value.classes?.clear ?? ""]: !0
+				[le.value]: !0,
+				[F.value.classes?.clear ?? ""]: !0
 			})
 		})),
-		clearValue: Q,
-		modelValue: z,
-		showFooter: R,
-		pickerClass: H,
-		containerRef: M,
-		clearIconSize: le,
-		showClearIcon: J,
-		handleOpenChange: W,
-		handlePickerChange: Z,
-		handlePickerCancel: re,
-		overlayCustomProps: se,
-		datePickerCustomProps: ce
+		clearValue: ne,
+		modelValue: B,
+		showFooter: z,
+		pickerClass: W,
+		containerRef: N,
+		clearIconSize: ce,
+		showClearIcon: X,
+		handleOpenChange: K,
+		handlePickerChange: $,
+		handlePickerCancel: te,
+		overlayCustomProps: oe,
+		datePickerCustomProps: se
 	};
 }
 //#endregion
-export { w as useDateField };
+export { D as useDateField };