vectis-ui 0.8.1 → 0.9.0

package/dist/components/VDateInput/VDateInput.vue_vue_type_script_setup_true_lang.js

@@ -1,25 +1,32 @@
-import { useMessages as e, useResolvedLocale as t } from "../../i18n/state.js";
-import n from "../VPopover/VPopover.js";
-import { useControlShape as r } from "../../composables/useControlShape.js";
-import { resolveMatcher as i } from "../../utils/matcher.js";
-import { useRootAttrs as a } from "../../composables/useRootAttrs.js";
-import { iconStartListener as o } from "../../composables/useIconClickHandlers.js";
-import { canClear as ee } from "../../composables/useClearable.js";
-import { inputGroupKey as s } from "../VInput/context.js";
-import te from "../VInput/VInput.js";
-import { digitsOf as c } from "../../utils/text.js";
-import { caretAfterDigits as l, dateMaskFor as ne, formatDateDisplay as u, formatDateMask as d, formatDisplayRange as re, isDateAllowed as ie, isValidISO as f, isoToMask as ae, maskPlaceholder as oe, parseDateMask as p } from "../../utils/date.js";
-import "../../utils/hostWarns.js";
-import se from "../VDatePicker/VDatePicker.js";
-import { calendar_today as m } from "../VIcon/icons/calendar_today.js";
-import { useFieldPanel as h } from "../../composables/useFieldPanel.js";
-import { useMaskedField as ce } from "../../composables/useMaskedField.js";
-import { computed as g, createBlock as le, createCommentVNode as ue, createElementBlock as de, createElementVNode as fe, createSlots as _, createVNode as v, defineComponent as y, guardReactiveProps as pe, inject as me, isRef as b, mergeModels as x, mergeProps as he, normalizeClass as ge, normalizeProps as S, normalizeStyle as _e, openBlock as C, ref as w, renderSlot as T, unref as E, useModel as ve, withCtx as D } from "vue";
+import { isDev as e } from "../../utils/env.js";
+import { useMessages as t, useResolvedLocale as n } from "../../i18n/state.js";
+import r from "../VPopover/VPopover.js";
+import { useControlShape as i } from "../../composables/useControlShape.js";
+import { resolveMatcher as a } from "../../utils/matcher.js";
+import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
+import { iconStartListener as ee } from "../../composables/useIconClickHandlers.js";
+import { canClear as te } from "../../composables/useClearable.js";
+import { inputGroupKey as ne } from "../VInput/context.js";
+import re from "../VInput/VInput.js";
+import { digitsOf as s } from "../../utils/text.js";
+import { compareISO as ie, formatDateDisplay as c, formatDisplayRange as ae, isDateAllowed as oe, isValidISO as l } from "../../utils/date.js";
+import { hostWarnsKey as se } from "../../utils/hostWarns.js";
+import ce from "../VDatePicker/VDatePicker.js";
+import { caretAfterDigits as u, dateMaskFor as le, formatDateMask as d, isoToMask as ue, maskPlaceholder as de, parseDateMask as f } from "./mask.js";
+import { calendar_today as p } from "../VIcon/icons/calendar_today.js";
+import { useFieldPanel as fe } from "../../composables/useFieldPanel.js";
+import { useMaskedField as m } from "../../composables/useMaskedField.js";
+import { computed as h, createBlock as pe, createCommentVNode as me, createElementBlock as he, createElementVNode as ge, createSlots as g, createVNode as _, defineComponent as v, guardReactiveProps as _e, inject as ve, isRef as y, mergeModels as b, mergeProps as ye, normalizeClass as be, normalizeProps as xe, normalizeStyle as Se, openBlock as x, provide as Ce, ref as S, renderSlot as C, unref as w, useModel as we, watchEffect as Te, withCtx as T } from "vue";
 //#region src/components/VDateInput/VDateInput.vue?vue&type=script&setup=true&lang.ts
-var ye = ["data-open", "data-mode"], O = 2e3, k = /*@__PURE__*/ y({
+var Ee = [
+	"data-open",
+	"data-mode",
+	"data-disabled",
+	"data-readonly"
+], E = 2e3, D = /*@__PURE__*/ v({
 	inheritAttrs: !1,
 	__name: "VDateInput",
-	props: /*@__PURE__*/ x({
+	props: /*@__PURE__*/ b({
 		selection: { default: "single" },
 		locale: { default: void 0 },
 		firstDayOfWeek: { default: void 0 },
@@ -70,199 +77,212 @@ var ye = ["data-open", "data-mode"], O = 2e3, k = /*@__PURE__*/ y({
 			type: Boolean,
 			default: !1
 		},
-		loadingLabel: { default: void 0 },
+		loadingText: { default: void 0 },
 		clearable: {
 			type: Boolean,
 			default: !1
 		},
 		clearLabel: { default: void 0 },
-		pickerIcon: { default: () => m },
+		pickerIcon: { default: () => p },
 		displayFormat: { default: void 0 },
 		placement: { default: "bottom-start" }
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ x(["clear", "click:icon-start"], ["update:modelValue"]),
-	setup(m, { expose: y, emit: x }) {
-		let k = ["picker", "input"], be = {
+	emits: /*@__PURE__*/ b(["clear", "click:icon-start"], ["update:modelValue"]),
+	setup(v, { expose: b, emit: D }) {
+		let O = ["picker", "input"], De = {
 			day: "numeric",
 			month: "short",
 			year: "numeric"
-		}, A = m, j = ve(m, "modelValue"), M = x, { rootClass: N, rootStyle: xe, forwardedAttrs: Se } = a(), Ce = o((e) => M("click:icon-start", e)), we = g(() => ({
-			...Se.value,
-			...Ce
-		})), P = w(null), F = w(null), I = w(null), L = w(null), Te = g(() => I.value?.el ?? null), Ee = g(() => A.mode !== void 0 && k.includes(A.mode) ? A.mode : "input"), R = g(() => Ee.value === "input" && A.selection === "single" ? "input" : "picker"), z = g(() => R.value === "input"), B = g(() => !A.readonly && (!z.value || A.showPicker)), { size: De, compact: Oe, disabled: V } = r(A, me(s, null)), { open: H, panelId: U, closeAndFocus: W, focusField: ke, onFieldFocus: Ae, toggleFromIcon: je, onControlClick: G, onFocusout: K, onKeydown: q, onPanelMousedown: Me } = h({
-			rootEl: P,
-			panelRef: F,
-			field: I,
-			disabled: () => V.value || !B.value,
-			focusInPanel: () => L.value?.focus(),
-			onOpen: () => L.value?.reset(),
-			onClose: () => L.value?.reset(),
-			openOnFocus: () => z.value
-		}), Ne = g(() => {
-			if (A.selection === "multiple") return Array.isArray(j.value) && j.value.length > 0;
-			if (A.selection === "range") {
-				let e = j.value;
+		}, k = v, A = we(v, "modelValue"), j = D, { rootClass: Oe, rootStyle: ke, forwardedAttrs: Ae } = o(), je = ee((e) => j("click:icon-start", e)), M = h(() => ({
+			...Ae.value,
+			...je
+		})), N = S(null), P = S(null), F = S(null), I = S(null), Me = h(() => F.value?.el ?? null), Ne = h(() => k.mode !== void 0 && O.includes(k.mode) ? k.mode : "input"), L = h(() => Ne.value === "input" && k.selection === "single" ? "input" : "picker"), R = h(() => L.value === "input"), z = h(() => !k.readonly && (!R.value || k.showPicker));
+		e && (Ce(se, !0), Te(() => {
+			if (k.min && k.max && ie(k.min, k.max) > 0 && console.warn(`[VDateInput] min "${k.min}" falls after max "${k.max}", so no date can be chosen.`), R.value && !k.showPicker) {
+				let e = [].concat(k.pickerIcon === p ? [] : "pickerIcon", k.pickerIconLabel ? "pickerIconLabel" : []);
+				e.length > 0 && console.warn(`[VDateInput] ${e.join(", ")} ${e.length > 1 ? "are" : "is"} ignored without showPicker: a field one types into has no calendar icon unless it offers the calendar.`);
+			}
+			k.mode !== void 0 && !O.includes(k.mode) && console.warn(`[VDateInput] unknown mode "${k.mode}": use "input" (the default) or "picker".`), k.mode === "input" && k.selection !== "single" && console.warn(`[VDateInput] mode="input" ignored in "${k.selection}" selection: a range or a list of dates cannot be typed on the keyboard.`), k.displayFormat && R.value && console.warn("[VDateInput] displayFormat is ignored in \"input\" mode (the default): the field displays the locale's numeric mask, the only typeable format. Pass mode=\"picker\" for a formatted display.");
+		}));
+		let { size: Pe, compact: Fe, disabled: B } = i(k, ve(ne, null)), { open: V, panelId: H, closeAndFocus: U, focusField: Ie, onFieldFocus: Le, toggleFromIcon: Re, onControlClick: W, onFocusout: G, onKeydown: K, onPanelMousedown: ze } = fe({
+			rootEl: N,
+			panelRef: P,
+			field: F,
+			disabled: () => B.value || !z.value,
+			focusInPanel: () => I.value?.focus(),
+			onOpen: () => I.value?.reset(),
+			onClose: () => I.value?.reset(),
+			openOnFocus: () => R.value
+		}), Be = h(() => z.value ? {
+			...M.value,
+			role: "combobox",
+			"aria-haspopup": "dialog",
+			"aria-expanded": V.value,
+			"aria-controls": H
+		} : M.value), Ve = h(() => {
+			if (k.selection === "multiple") return Array.isArray(A.value) && A.value.length > 0;
+			if (k.selection === "range") {
+				let e = A.value;
 				return !!(e && (e.start || e.end));
 			}
-			return typeof j.value == "string" && !!j.value;
-		}), J = t(() => A.locale), Pe = g(() => {
-			let e = J.value, t = A.displayFormat ?? be;
-			if (A.selection === "single") return typeof j.value == "string" && f(j.value) ? u(j.value, e, t) : "";
-			if (A.selection === "range") {
-				let n = j.value;
-				return n?.start ? n.end ? re(n.start, n.end, e, t) : u(n.start, e, t) : "";
+			return typeof A.value == "string" && !!A.value;
+		}), q = n(() => k.locale), He = h(() => {
+			let e = q.value, t = k.displayFormat ?? De;
+			if (k.selection === "single") return typeof A.value == "string" && l(A.value) ? c(A.value, e, t) : "";
+			if (k.selection === "range") {
+				let n = A.value;
+				return n?.start ? n.end ? ae(n.start, n.end, e, t) : c(n.start, e, t) : "";
 			}
-			return (Array.isArray(j.value) ? j.value : []).map((n) => u(n, e, t)).join(", ");
-		}), Y = g(() => ne(J.value)), Fe = g(() => oe(J.value, Y.value)), Ie = g(() => i(A.disabledDates)), { draft: Le, fieldModel: X, writeField: Z, commitOrRevert: Q, onFieldInput: Re, onKeydown: ze, onPaste: Be } = ce({
-			fieldEl: Te,
-			typing: () => z.value,
-			displayText: () => Pe.value,
-			readValue: () => typeof j.value == "string" && f(j.value) ? j.value : null,
+			return (Array.isArray(A.value) ? A.value : []).map((n) => c(n, e, t)).join(", ");
+		}), J = h(() => le(q.value)), Ue = h(() => de(q.value, J.value)), We = h(() => a(k.disabledDates)), { draft: Ge, fieldModel: Y, writeField: X, commitOrRevert: Z, onFieldInput: Ke, onKeydown: qe, onPaste: Je } = m({
+			fieldEl: Me,
+			typing: () => R.value,
+			displayText: () => He.value,
+			readValue: () => typeof A.value == "string" && l(A.value) ? A.value : null,
 			writeValue: (e) => {
-				j.value = e;
+				A.value = e;
 			},
-			maxDigits: () => Y.value.size,
-			format: (e) => d(e, Y.value),
-			caret: (e, t, n) => l(e, t, n ? Y.value.separator : void 0),
-			parse: (e, t) => p(e, Y.value, t ? { yearPivot: O } : void 0),
-			toMask: (e) => e ? ae(e, Y.value) : "",
-			acceptable: (e) => ie(e, A.min, A.max, Ie.value)
+			maxDigits: () => J.value.size,
+			format: (e) => d(e, J.value),
+			caret: (e, t, n) => u(e, t, n ? J.value.separator : void 0),
+			parse: (e, t) => f(e, J.value, t ? { yearPivot: E } : void 0),
+			toMask: (e) => e ? ue(e, J.value) : "",
+			acceptable: (e) => oe(e, k.min, k.max, We.value)
 		});
-		function Ve(e) {
-			let t = e.selectionStart ?? e.value.length, n = c(e.value.slice(0, t)).length, r = c(e.value), i = 0;
-			for (let e = 0; e < Y.value.order.length; e++) {
-				let t = Y.value.lengths[e];
+		function Ye(e) {
+			let t = e.selectionStart ?? e.value.length, n = s(e.value.slice(0, t)).length, r = s(e.value), i = 0;
+			for (let e = 0; e < J.value.order.length; e++) {
+				let t = J.value.lengths[e];
 				if (n < i + t) {
 					let a = n - i;
-					if (Y.value.order[e] === "year" || a !== t - 1) return;
-					let o = d((r.slice(0, i) + "0".repeat(t - a) + r.slice(i)).slice(0, Y.value.size), Y.value);
-					Z(o, l(o, i + t, Y.value.separator));
+					if (J.value.order[e] === "year" || a !== t - 1) return;
+					let o = d((r.slice(0, i) + "0".repeat(t - a) + r.slice(i)).slice(0, J.value.size), J.value);
+					X(o, u(o, i + t, J.value.separator));
 					return;
 				}
 				i += t;
 			}
 		}
-		function He(e) {
-			ze(e, {
-				onSeparator: Ve,
-				onArrowDown: () => H.value ? (L.value?.focus(), !0) : !1,
-				onEnter: W
+		function Q(e) {
+			qe(e, {
+				onSeparator: Ye,
+				onArrowDown: () => V.value ? (I.value?.focus(), !0) : !1,
+				onEnter: U
 			});
 		}
-		function Ue(e) {
-			Be(e, (e) => f(e) ? e : p(e, Y.value, { yearPivot: O }));
+		function Xe(e) {
+			Je(e, (e) => l(e) ? e : f(e, J.value, { yearPivot: E }));
 		}
-		let We = g(() => ee(A, V.value, Ne.value || z.value && !!Le.value)), Ge = g(() => B.value ? A.pickerIcon : void 0), $ = e(), Ke = g(() => A.pickerIconLabel ?? $.value.dateInput.openPicker), qe = g(() => A.clearLabel ?? $.value.dateInput.clear);
-		function Je() {
-			j.value = A.selection === "multiple" ? [] : A.selection === "range" ? {
+		let Ze = h(() => te(k, B.value, Ve.value || R.value && !!Ge.value)), Qe = h(() => z.value ? k.pickerIcon : void 0), $ = t(), $e = h(() => k.pickerIconLabel ?? $.value.dateInput.openPicker), et = h(() => k.clearLabel ?? $.value.dateInput.clear);
+		function tt() {
+			A.value = k.selection === "multiple" ? [] : k.selection === "range" ? {
 				start: null,
 				end: null
-			} : null, z.value && Z(""), ke(), M("clear");
+			} : null, R.value && X(""), Ie(), j("clear");
 		}
-		function Ye() {
-			A.selection === "single" && W();
+		function nt() {
+			k.selection === "single" && U();
 		}
-		return y({
-			focus: (e) => I.value?.focus(e),
-			select: () => I.value?.select(),
-			el: g(() => I.value?.el ?? null)
-		}), (e, t) => (C(), de("div", {
+		return b({
+			focus: (e) => F.value?.focus(e),
+			select: () => F.value?.select(),
+			el: h(() => F.value?.el ?? null)
+		}), (e, t) => (x(), he("div", {
 			ref_key: "rootEl",
-			ref: P,
-			class: ge(["v-date-input", E(N)]),
-			style: _e(E(xe)),
-			"data-open": E(H) ? "" : void 0,
-			"data-mode": R.value,
-			onFocusout: t[4] ||= (...e) => E(K) && E(K)(...e),
-			onKeydown: t[5] ||= (...e) => E(q) && E(q)(...e)
-		}, [fe("div", {
+			ref: N,
+			class: be(["v-date-input", w(Oe)]),
+			style: Se(w(ke)),
+			"data-open": w(V) ? "" : void 0,
+			"data-mode": L.value,
+			"data-disabled": w(B) ? "" : void 0,
+			"data-readonly": v.readonly ? "" : void 0,
+			onFocusout: t[4] ||= (...e) => w(G) && w(G)(...e),
+			onKeydown: t[5] ||= (...e) => w(K) && w(K)(...e)
+		}, [ge("div", {
 			class: "v-date-input-control",
-			onClick: t[1] ||= (...e) => E(G) && E(G)(...e)
-		}, [v(te, he({
+			onClick: t[1] ||= (...e) => w(W) && w(W)(...e)
+		}, [_(re, ye({
 			ref_key: "inputRef",
-			ref: I,
-			modelValue: E(X),
-			"onUpdate:modelValue": t[0] ||= (e) => b(X) ? X.value = e : null,
-			inputmode: z.value ? "numeric" : void 0,
-			autocomplete: z.value ? "off" : void 0
-		}, we.value, {
-			readonly: !z.value || m.readonly,
-			label: m.label,
-			hint: m.hint,
-			placeholder: m.placeholder ?? (z.value ? Fe.value : void 0),
-			size: E(De),
-			compact: E(Oe),
-			disabled: E(V),
-			invalid: m.invalid,
-			clearable: m.clearable,
-			"clear-visible": We.value,
-			"clear-label": qe.value,
-			"icon-start": m.iconStart,
-			"icon-start-label": m.iconStartLabel,
-			loading: m.loading,
-			"loading-label": m.loadingLabel,
-			"icon-end": Ge.value,
-			"icon-end-label": Ke.value,
-			role: B.value ? "combobox" : void 0,
-			"aria-haspopup": B.value ? "dialog" : void 0,
-			"aria-expanded": B.value ? E(H) : void 0,
-			"aria-controls": B.value ? E(U) : void 0,
-			"onClick:iconEnd": E(je),
-			onClear: Je,
-			onFocus: E(Ae),
-			onInput: E(Re),
-			onChange: E(Q),
-			onBlur: E(Q),
-			onKeydown: He,
-			onPaste: Ue
-		}), _({ _: 2 }, [e.$slots.start ? {
+			ref: F,
+			modelValue: w(Y),
+			"onUpdate:modelValue": t[0] ||= (e) => y(Y) ? Y.value = e : null,
+			inputmode: R.value ? "numeric" : void 0,
+			autocomplete: R.value ? "off" : void 0
+		}, Be.value, {
+			readonly: v.readonly,
+			"no-typing": !R.value,
+			label: v.label,
+			hint: v.hint,
+			placeholder: v.placeholder ?? (R.value ? Ue.value : void 0),
+			size: w(Pe),
+			compact: w(Fe),
+			disabled: w(B),
+			invalid: v.invalid,
+			clearable: v.clearable,
+			"clear-visible": Ze.value,
+			"clear-label": et.value,
+			"icon-start": v.iconStart,
+			"icon-start-label": v.iconStartLabel,
+			loading: v.loading,
+			"loading-text": v.loadingText,
+			"icon-end": Qe.value,
+			"icon-end-label": $e.value,
+			"onClick:iconEnd": w(Re),
+			onClear: tt,
+			onFocus: w(Le),
+			onInput: w(Ke),
+			onChange: w(Z),
+			onBlur: w(Z),
+			onKeydown: Q,
+			onPaste: Xe
+		}), g({ _: 2 }, [e.$slots.start ? {
 			name: "start",
-			fn: D(() => [T(e.$slots, "start")]),
+			fn: T(() => [C(e.$slots, "start")]),
 			key: "0"
 		} : void 0, e.$slots["value-end"] ? {
 			name: "value-end",
-			fn: D(() => [T(e.$slots, "value-end")]),
+			fn: T(() => [C(e.$slots, "value-end")]),
 			key: "1"
-		} : void 0]), 1040, /* @__PURE__ */ "modelValue.inputmode.autocomplete.readonly.label.hint.placeholder.size.compact.disabled.invalid.clearable.clear-visible.clear-label.icon-start.icon-start-label.loading.loading-label.icon-end.icon-end-label.role.aria-haspopup.aria-expanded.aria-controls.onClick:iconEnd.onFocus.onInput.onChange.onBlur".split("."))]), B.value ? (C(), le(n, {
+		} : void 0]), 1040, /* @__PURE__ */ "modelValue.inputmode.autocomplete.readonly.no-typing.label.hint.placeholder.size.compact.disabled.invalid.clearable.clear-visible.clear-label.icon-start.icon-start-label.loading.loading-text.icon-end.icon-end-label.onClick:iconEnd.onFocus.onInput.onChange.onBlur".split("."))]), z.value ? (x(), pe(r, {
 			key: 0,
-			id: E(U),
+			id: w(H),
 			ref_key: "panelRef",
-			ref: F,
-			open: E(H),
-			"onUpdate:open": t[3] ||= (e) => b(H) ? H.value = e : null,
+			ref: P,
+			open: w(V),
+			"onUpdate:open": t[3] ||= (e) => y(V) ? V.value = e : null,
 			mode: "manual",
 			anchor: "--date-input-anchor",
-			placement: m.placement,
+			placement: v.placement,
 			role: "dialog",
-			"aria-label": m.label ?? E($).dateInput.pickerLabel,
+			"aria-label": v.label ?? w($).dateInput.pickerLabel,
 			class: "v-date-input-panel",
-			onMousedown: E(Me)
+			onMousedown: w(ze)
 		}, {
-			default: D(() => [v(se, {
+			default: T(() => [_(ce, {
 				ref_key: "pickerRef",
-				ref: L,
-				modelValue: j.value,
-				"onUpdate:modelValue": t[2] ||= (e) => j.value = e,
-				selection: m.selection,
-				locale: E(J),
-				"first-day-of-week": m.firstDayOfWeek,
-				min: m.min,
-				max: m.max,
-				"disabled-dates": m.disabledDates,
-				"show-adjacent-days": m.showAdjacentDays,
-				"select-adjacent-days": m.selectAdjacentDays,
-				events: m.events,
-				onSelect: Ye
-			}, _({ _: 2 }, [e.$slots.day ? {
+				ref: I,
+				modelValue: A.value,
+				"onUpdate:modelValue": t[2] ||= (e) => A.value = e,
+				selection: v.selection,
+				locale: w(q),
+				"first-day-of-week": v.firstDayOfWeek,
+				min: v.min,
+				max: v.max,
+				"disabled-dates": v.disabledDates,
+				"show-adjacent-days": v.showAdjacentDays,
+				"select-adjacent-days": v.selectAdjacentDays,
+				events: v.events,
+				onSelect: nt
+			}, g({ _: 2 }, [e.$slots.day ? {
 				name: "day",
-				fn: D((t) => [T(e.$slots, "day", S(pe(t)))]),
+				fn: T((t) => [C(e.$slots, "day", xe(_e(t)))]),
 				key: "0"
 			} : void 0, e.$slots.footer ? {
 				name: "footer",
-				fn: D(() => [T(e.$slots, "footer", { close: E(W) })]),
+				fn: T(() => [C(e.$slots, "footer", { close: w(U) })]),
 				key: "1"
 			} : void 0]), 1032, [
 				"modelValue",
@@ -283,10 +303,10 @@ var ye = ["data-open", "data-mode"], O = 2e3, k = /*@__PURE__*/ y({
 			"placement",
 			"aria-label",
 			"onMousedown"
-		])) : ue("", !0)], 46, ye));
+		])) : me("", !0)], 46, Ee));
 	}
 });
 //#endregion
-export { k as default };
+export { D as default };
 
 //# sourceMappingURL=VDateInput.vue_vue_type_script_setup_true_lang.js.map