@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/DateField/DateField.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 { 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 a from "../FieldOverlay/FieldOverlay.js";
+import { useDateField as o } from "./composables/useDateField.js";
+import s from "../DatePicker/DatePicker.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/DateField/DateField.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: "DateField",
 	props: /*@__PURE__*/ v({
@@ -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 },
@@ -33,7 +38,10 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		multiple: { type: Boolean },
 		overlay: {},
 		range: { type: Boolean },
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		startOfWeek: {},
 		timeZone: {},
 		color: {},
@@ -65,38 +73,41 @@ 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, 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),
+		}), { 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),
 				"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({
+				onKeydown: [o[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(q) && D(q)(...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(re),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: k(() => [m(D(o), {
+			default: k(() => [h(D(s), {
+				fill: D(ee),
 				value: D(J),
 				class: b(D(X)),
 				range: D(U).range,
@@ -111,6 +122,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				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(ie),
@@ -121,39 +133,18 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"disable-months": D(U).disableMonths,
 				rounded: D(W).merged.value.rounded,
 				"hide-outside-days": D(U).hideOutsideDays
-			}, {
-				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(t.label), 1)])]),
-				_: 3
-			}, 8, [
-				"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"
-			])]),
+			}, 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__ */ "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, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));

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

@@ -1,28 +1,29 @@
 import { Ref, SetupContext } from 'vue';
-import { DatePickerModel } from '@bridge-ui/core';
+import { DatePickerModel } from '@bridge-ui/core/Domain';
 import { DateFieldEmits, DateFieldOwnProps } from '../dateField.types';
 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').DatePickerMode>;
-    overlay: import('vue').ComputedRef<import('@bridge-ui/core').FieldOverlayMode | undefined>;
+    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" | "customProps" | "multiple" | "range" | "overlay" | "showFooter" | "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;
         }>;
         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 +143,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             '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 +179,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             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 +213,9 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             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 +439,31 @@ 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">>>>;
         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;
@@ -686,13 +687,11 @@ 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>;
-    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;
@@ -702,9 +701,9 @@ 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').IconSize>;
+    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;
     handleOpenChange: (next: boolean) => void;
     handlePickerChange: (next: DatePickerModel) => void;
@@ -725,9 +724,9 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             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/DateField/composables/useDateField.js

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