vectis-ui 0.1.0 → 0.8.0

package/dist/components/VTimePicker/VTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,257 +1,322 @@
-import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import { useMessages as e, useResolvedLocale as t } from "../../i18n/state.js";
 import n from "../VButton/VButton.js";
-import r from "../VToggle/VToggle.js";
-import i from "../VToggle/VToggleItem.js";
-import { pad2 as a } from "../../utils/text.js";
-import { angleToIndex as o, dialIndexToHour24 as s, distanceFraction as ee, formatTime as c, hour24ToDial as l, hourCycleFor as u, parseTime as d, snapMinute as f, to12h as p, to24h as m } from "../../utils/time.js";
-import { Fragment as te, computed as h, createBlock as ne, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, mergeModels as S, normalizeStyle as C, openBlock as w, ref as T, renderList as re, renderSlot as ie, toDisplayString as E, unref as D, useModel as ae, withCtx as O } from "vue";
+import { useAriaLabel as r } from "../../composables/useAriaLabel.js";
+import i from "../VToggle/VToggle.js";
+import a from "../VToggle/VToggleItem.js";
+import { pad2 as o } from "../../utils/text.js";
+import "../../utils/hostWarns.js";
+import { angleToIndex as s, dialIndexToHour24 as ee, distanceFraction as te, formatTime as ne, hour24ToDial as re, hourCycleFor as ie, hourWithMeridiem as ae, parseTime as oe, snapMinute as c, to12h as l, to24h as u } from "../../utils/time.js";
+import { allowedMinutesFor as se, firstAllowed as d, isHourAllowed as ce, isTimeAllowed as f, minuteInterval as p, nearestAllowedMinute as le, resolveLimits as ue } from "./limits.js";
+import { Fragment as de, computed as m, createBlock as fe, createCommentVNode as pe, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, normalizeStyle as x, openBlock as S, ref as C, renderList as me, renderSlot as he, toDisplayString as w, unref as T, useModel as ge, withCtx as E } from "vue";
 //#region src/components/VTimePicker/VTimePicker.vue?vue&type=script&setup=true&lang.ts
-var k = ["data-step"], A = { class: "v-time-picker-header" }, oe = { class: "v-time-picker-time" }, se = [
+var _e = [
+	"aria-label",
+	"data-step",
+	"data-disabled",
+	"data-readonly"
+], ve = { class: "v-time-picker-header" }, ye = { class: "v-time-picker-time" }, be = [
+	"tabindex",
 	"aria-label",
 	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
-	"data-dragging"
-], ce = ["data-ring", "data-minor"], le = ["data-ring", "data-selected"], ue = {
+	"data-dragging",
+	"aria-disabled",
+	"aria-readonly"
+], xe = ["data-ring", "data-minor"], Se = ["data-ring", "data-selected"], Ce = {
 	class: "v-visually-hidden",
 	"aria-live": "polite"
-}, de = {
+}, we = {
 	key: 0,
 	class: "v-time-picker-footer"
-}, j = /*@__PURE__*/ x({
+}, D = /*@__PURE__*/ y({
 	__name: "VTimePicker",
-	props: /*@__PURE__*/ S({
+	props: /*@__PURE__*/ b({
 		format: { default: void 0 },
 		locale: { default: void 0 },
-		minuteStep: { default: 1 }
+		minuteStep: { default: 1 },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		allowedHours: {
+			type: [Array, Function],
+			default: void 0
+		},
+		allowedMinutes: {
+			type: [Array, Function],
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 }
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ S(["confirm"], ["update:modelValue"]),
-	setup(x, { expose: S, emit: j }) {
-		let M = x, N = ae(x, "modelValue"), P = j, F = t(), fe = e(), I = h(() => M.locale ?? fe.value), L = h(() => M.format ?? u(I.value)), R = T("hour"), z = h(() => d(N.value) ?? {
+	emits: /*@__PURE__*/ b(["confirm"], ["update:modelValue"]),
+	setup(y, { expose: b, emit: D }) {
+		let O = y, k = ge(y, "modelValue"), Te = D, A = e(), Ee = r(() => O.label ?? A.value.timePicker.label), De = t(() => O.locale), j = m(() => O.format ?? ie(De.value)), M = m(() => ue(O)), Oe = m(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t = 0; t < 24; t += 1) ce(t, M.value) && e.add(t);
+			return e;
+		}), N = (e) => Oe.value.has(e), P = C("hour"), F = m(() => oe(k.value) ?? {
 			hour: 0,
 			minute: 0
-		}), B = h(() => z.value.hour), V = h(() => z.value.minute);
-		function H(e) {
-			N.value = c(e, V.value);
+		}), I = m(() => F.value.hour), L = m(() => F.value.minute);
+		function R(e) {
+			if (O.disabled || O.readonly || e === null) return;
+			let t = f(e, L.value, M.value) ? L.value : le(e, L.value, M.value);
+			t !== null && (k.value = ne(e, t));
+		}
+		function z(e) {
+			O.disabled || O.readonly || e === null || !f(I.value, e, M.value) || (k.value = ne(I.value, e));
 		}
-		function U(e) {
-			N.value = c(B.value, e);
+		let B = C("");
+		function V(e) {
+			P.value = e, B.value = e === "minute" ? A.value.timePicker.choosingMinutes : A.value.timePicker.choosingHour;
 		}
-		let W = T("");
-		function G(e) {
-			R.value = e, W.value = e === "minute" ? F.value.timePicker.minuteStep : F.value.timePicker.hourStep;
+		function H(e, t) {
+			return j.value === "24h" ? ee(e, t) : u(e === 0 ? 12 : e, G.value);
 		}
-		let pe = h(() => {
-			if (R.value === "minute") return Array.from({ length: 12 }, (e, t) => ({
-				key: `m-${t}`,
-				label: a(t * 5),
-				turn: t / 12,
+		let U = m(() => {
+			let e = p(O.minuteStep), t = 60 / e <= 12 ? e : 5, n = [];
+			for (let r = 0; r < 60; r += t) r % e === 0 && f(I.value, r, M.value) && n.push(r);
+			return n;
+		}), ke = m(() => {
+			if (P.value === "minute") return U.value.map((e) => ({
+				key: `m-${e}`,
+				label: o(e),
+				turn: e / 60,
 				ring: "outer",
-				selected: V.value === t * 5
+				selected: L.value === e
 			}));
-			let e = Array.from({ length: 12 }, (e, t) => {
-				let n = s(t, "outer");
-				return {
-					key: `o-${t}`,
-					label: String(t === 0 ? 12 : t),
-					turn: t / 12,
-					ring: "outer",
-					selected: L.value === "24h" ? B.value === n : p(B.value).hour === (t === 0 ? 12 : t)
-				};
-			});
-			if (L.value === "12h") return e;
-			let t = Array.from({ length: 12 }, (e, t) => {
-				let n = s(t, "inner");
-				return {
-					key: `i-${t}`,
-					label: a(n),
-					turn: t / 12,
-					ring: "inner",
-					selected: B.value === n
-				};
-			});
-			return [...e, ...t];
-		}), me = h(() => R.value === "minute" ? V.value / 60 : (L.value === "24h" ? l(B.value).index : p(B.value).hour % 12) / 12), he = h(() => R.value === "hour" && L.value === "24h" ? l(B.value).ring : "outer"), ge = h(() => R.value === "minute" && V.value % 5 != 0), _e = h(() => a(L.value === "12h" ? p(B.value).hour : B.value)), K = T("AM"), q = h(() => N.value ? p(B.value).meridiem : K.value), J = h({
-			get: () => q.value,
+			let e = j.value === "12h", t = l(I.value).hour, n = e ? ["outer"] : ["outer", "inner"], r = [];
+			for (let i of n) for (let n = 0; n < 12; n += 1) {
+				let a = H(n, i);
+				if (!N(a)) continue;
+				let s = n === 0 ? 12 : n;
+				r.push({
+					key: `${i === "outer" ? "o" : "i"}-${n}`,
+					label: i === "inner" ? o(a) : String(s),
+					turn: n / 12,
+					ring: i,
+					selected: e ? t === s : I.value === a
+				});
+			}
+			return r;
+		}), Ae = m(() => P.value === "minute" ? L.value / 60 : (j.value === "24h" ? re(I.value).index : l(I.value).hour % 12) / 12), je = m(() => P.value === "hour" && j.value === "24h" ? re(I.value).ring : "outer"), Me = m(() => P.value === "minute" && !U.value.includes(L.value)), Ne = m(() => o(j.value === "12h" ? l(I.value).hour : I.value)), W = C("AM"), G = m(() => k.value ? l(I.value).meridiem : W.value), K = m({
+			get: () => G.value,
 			set: (e) => {
 				let t = e === "PM" ? "PM" : "AM";
-				K.value = t, N.value && H(m(p(B.value).hour, t));
+				if (W.value = t, !k.value) return;
+				let n = ae(I.value, t);
+				R(N(n) ? n : d(12, (e) => u(e, t), N));
 			}
-		}), Y = h(() => R.value === "minute" ? V.value : L.value === "12h" ? p(B.value).hour : B.value), ve = h(() => R.value === "minute" ? 0 : +(L.value === "12h")), ye = h(() => R.value === "minute" ? 59 : L.value === "12h" ? 12 : 23), be = h(() => R.value === "minute" ? F.value.timePicker.minutesValue(V.value) : F.value.timePicker.hoursValue(Y.value));
-		function X(e) {
-			R.value === "hour" ? G("minute") : e === "keyboard" && P("confirm");
+		}), q = m(() => ({
+			AM: d(12, (e) => u(e, "AM"), N) !== null,
+			PM: d(12, (e) => u(e, "PM"), N) !== null
+		})), J = m(() => P.value === "minute" ? L.value : j.value === "12h" ? l(I.value).hour : I.value), Pe = m(() => P.value === "minute" ? 0 : +(j.value === "12h")), Fe = m(() => P.value === "minute" ? 59 : j.value === "12h" ? 12 : 23), Ie = m(() => P.value === "minute" ? A.value.timePicker.minutesValue(L.value) : A.value.timePicker.hourValue(J.value));
+		function Y(e) {
+			P.value === "hour" ? V("minute") : e === "keyboard" && Te("confirm", k.value);
 		}
-		let Z = T(null), Q = T(!1);
-		function $(e) {
-			let t = Z.value;
-			if (!t) return;
+		let X = C(null), Z = C(!1), Q = !1;
+		function Le(e) {
+			let t = X.value;
+			if (!t) return !1;
 			let n = t.getBoundingClientRect(), r = e.clientX - (n.left + n.width / 2), i = e.clientY - (n.top + n.height / 2);
-			if (R.value === "minute") {
-				U(f(o(r, i, 60), M.minuteStep));
-				return;
+			if (P.value === "minute") {
+				let e = c(s(r, i, 60), O.minuteStep);
+				return f(I.value, e, M.value) ? (z(e), !0) : !1;
 			}
-			let a = o(r, i, 12);
-			L.value === "24h" ? H(s(a, ee(r, i, n.width / 2) < .625 ? "inner" : "outer")) : H(m(a === 0 ? 12 : a, q.value));
+			let a = H(s(r, i, 12), j.value === "24h" && te(r, i, n.width / 2) < .625 ? "inner" : "outer");
+			return N(a) ? (R(a), !0) : !1;
 		}
-		function xe(e) {
+		function Re(e) {
 			try {
-				Z.value?.setPointerCapture(e.pointerId);
+				X.value?.setPointerCapture(e.pointerId);
 			} catch {}
-			Q.value = !0, $(e);
+			Z.value = !0, Q = Le(e);
 		}
-		function Se(e) {
-			Q.value && $(e);
+		function ze(e) {
+			Z.value && Le(e) && (Q = !0);
 		}
-		function Ce() {
-			Q.value && (Q.value = !1, X("pointer"));
+		function Be() {
+			Z.value && (Z.value = !1, Q && Y("pointer"));
 		}
-		function we() {
-			Q.value = !1;
+		function Ve() {
+			Z.value = !1;
 		}
-		function Te(e) {
-			if (L.value === "24h") {
-				H((B.value + e + 24) % 24);
+		function He(e) {
+			if (j.value === "24h") {
+				R(d(23, (t) => (I.value + e * t + 24) % 24, N));
 				return;
 			}
-			let t = p(B.value).hour;
-			H(m((t - 1 + e + 12) % 12 + 1, q.value));
+			let t = l(I.value).hour;
+			R(d(11, (n) => u((t - 1 + e * n + 12) % 12 + 1, G.value), N));
+		}
+		function Ue(e) {
+			return j.value === "24h" ? d(24, (t) => e === "first" ? t - 1 : 24 - t, N) : d(12, (t) => u(e === "first" ? t : 13 - t, G.value), N);
+		}
+		function $(e, t) {
+			let n = p(O.minuteStep), r = (e) => f(I.value, e, M.value);
+			return r(e) ? e : d(Math.ceil(60 / n), (r) => c(e + t * r * n, n), r);
 		}
-		function Ee(e) {
+		function We(e) {
 			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), X("keyboard");
+				e.preventDefault(), Y("keyboard");
 				return;
 			}
 			let t = e.key === "ArrowUp" || e.key === "ArrowRight" ? 1 : e.key === "ArrowDown" || e.key === "ArrowLeft" ? -1 : 0;
-			if (R.value === "hour") {
-				if (t) Te(t);
-				else if (e.key === "Home") H(L.value === "12h" ? m(1, q.value) : 0);
-				else if (e.key === "End") H(L.value === "12h" ? m(12, q.value) : 23);
+			if (P.value === "hour") {
+				if (t) He(t);
+				else if (e.key === "Home") R(Ue("first"));
+				else if (e.key === "End") R(Ue("last"));
 				else return;
 				e.preventDefault();
 				return;
 			}
-			if (t) U(f(V.value + t * M.minuteStep, M.minuteStep));
-			else if (e.key === "PageUp") U(f(V.value + 5, M.minuteStep));
-			else if (e.key === "PageDown") U(f(V.value - 5, M.minuteStep));
-			else if (e.key === "Home") U(0);
-			else if (e.key === "End") U(f(60 - M.minuteStep, M.minuteStep));
+			if (t) z($(c(L.value + t * O.minuteStep, O.minuteStep), t));
+			else if (e.key === "PageUp") z($(c(L.value + 5, O.minuteStep), 1));
+			else if (e.key === "PageDown") z($(c(L.value - 5, O.minuteStep), -1));
+			else if (e.key === "Home") z(se(I.value, M.value)[0] ?? null);
+			else if (e.key === "End") z(se(I.value, M.value).at(-1) ?? null);
 			else return;
 			e.preventDefault();
 		}
-		return S({
-			focus: (e) => Z.value?.focus(e),
+		return b({
+			focus: (e) => X.value?.focus(e),
 			reset: () => {
-				R.value = "hour", W.value = "";
+				P.value = "hour", B.value = "";
 			}
-		}), (e, t) => (w(), _("div", {
+		}), (e, t) => (S(), h("div", {
 			class: "v-time-picker",
-			"data-step": R.value
+			role: "group",
+			"aria-label": T(Ee),
+			"data-step": P.value,
+			"data-disabled": y.disabled ? "" : void 0,
+			"data-readonly": y.readonly ? "" : void 0
 		}, [
-			v("div", A, [v("div", oe, [
-				b(n, {
+			g("div", ve, [g("div", ye, [
+				v(n, {
 					class: "v-time-picker-cell",
 					variant: "ghost",
 					size: "lg",
-					tone: R.value === "hour" ? "accent" : "neutral",
-					"aria-pressed": R.value === "hour" ? "true" : "false",
-					"aria-label": D(F).timePicker.selectHour,
-					onClick: t[0] ||= (e) => G("hour")
+					tone: P.value === "hour" ? "accent" : "neutral",
+					"aria-pressed": P.value === "hour" ? "true" : "false",
+					"aria-label": T(A).timePicker.selectHour,
+					disabled: y.disabled,
+					onClick: t[0] ||= (e) => V("hour")
 				}, {
-					default: O(() => [y(E(_e.value), 1)]),
+					default: E(() => [_(w(Ne.value), 1)]),
 					_: 1
 				}, 8, [
 					"tone",
 					"aria-pressed",
-					"aria-label"
+					"aria-label",
+					"disabled"
 				]),
-				t[3] ||= v("span", {
+				t[3] ||= g("span", {
 					class: "v-time-picker-sep",
 					"aria-hidden": "true"
 				}, ":", -1),
-				b(n, {
+				v(n, {
 					class: "v-time-picker-cell",
 					variant: "ghost",
 					size: "lg",
-					tone: R.value === "minute" ? "accent" : "neutral",
-					"aria-pressed": R.value === "minute" ? "true" : "false",
-					"aria-label": D(F).timePicker.selectMinute,
-					onClick: t[1] ||= (e) => G("minute")
+					tone: P.value === "minute" ? "accent" : "neutral",
+					"aria-pressed": P.value === "minute" ? "true" : "false",
+					"aria-label": T(A).timePicker.selectMinutes,
+					disabled: y.disabled,
+					onClick: t[1] ||= (e) => V("minute")
 				}, {
-					default: O(() => [y(E(D(a)(V.value)), 1)]),
+					default: E(() => [_(w(T(o)(L.value)), 1)]),
 					_: 1
 				}, 8, [
 					"tone",
 					"aria-pressed",
-					"aria-label"
+					"aria-label",
+					"disabled"
 				])
-			]), L.value === "12h" ? (w(), ne(r, {
+			]), j.value === "12h" ? (S(), fe(i, {
 				key: 0,
-				modelValue: J.value,
-				"onUpdate:modelValue": t[2] ||= (e) => J.value = e,
+				modelValue: K.value,
+				"onUpdate:modelValue": t[2] ||= (e) => K.value = e,
 				class: "v-time-picker-meridiem",
 				mandatory: "",
 				variant: "outline",
+				"selected-variant": "soft",
 				orientation: "vertical",
 				size: "sm",
-				label: D(F).timePicker.meridiem
+				label: T(A).timePicker.meridiem,
+				disabled: y.disabled || y.readonly
 			}, {
-				default: O(() => [b(i, {
+				default: E(() => [v(a, {
 					value: "AM",
-					label: D(F).timePicker.am
-				}, null, 8, ["label"]), b(i, {
+					label: T(A).timePicker.am,
+					disabled: !q.value.AM
+				}, null, 8, ["label", "disabled"]), v(a, {
 					value: "PM",
-					label: D(F).timePicker.pm
-				}, null, 8, ["label"])]),
+					label: T(A).timePicker.pm,
+					disabled: !q.value.PM
+				}, null, 8, ["label", "disabled"])]),
 				_: 1
-			}, 8, ["modelValue", "label"])) : g("", !0)]),
-			v("div", {
+			}, 8, [
+				"modelValue",
+				"label",
+				"disabled"
+			])) : pe("", !0)]),
+			g("div", {
 				ref_key: "faceEl",
-				ref: Z,
+				ref: X,
 				role: "slider",
-				tabindex: "0",
+				tabindex: y.disabled ? -1 : 0,
 				class: "v-time-picker-face",
-				"aria-label": R.value === "hour" ? D(F).timePicker.hour : D(F).timePicker.minutes,
-				"aria-valuemin": ve.value,
-				"aria-valuemax": ye.value,
-				"aria-valuenow": Y.value,
-				"aria-valuetext": be.value,
-				"data-dragging": Q.value ? "" : void 0,
-				onPointerdown: xe,
-				onPointermove: Se,
-				onPointerup: Ce,
-				onPointercancel: we,
-				onKeydown: Ee
+				"aria-label": P.value === "hour" ? T(A).timePicker.hour : T(A).timePicker.minutes,
+				"aria-valuemin": Pe.value,
+				"aria-valuemax": Fe.value,
+				"aria-valuenow": J.value,
+				"aria-valuetext": Ie.value,
+				"data-dragging": Z.value ? "" : void 0,
+				"aria-disabled": y.disabled ? "true" : void 0,
+				"aria-readonly": y.readonly ? "true" : void 0,
+				onPointerdown: Re,
+				onPointermove: ze,
+				onPointerup: Be,
+				onPointercancel: Ve,
+				onKeydown: We
 			}, [
-				v("div", {
+				g("div", {
 					class: "v-time-picker-hand",
 					"aria-hidden": "true",
-					"data-ring": he.value,
-					"data-minor": ge.value ? "" : void 0,
-					style: C({ "--dial-turn": String(me.value) })
-				}, null, 12, ce),
-				t[4] ||= v("span", {
+					"data-ring": je.value,
+					"data-minor": Me.value ? "" : void 0,
+					style: x({ "--dial-turn": String(Ae.value) })
+				}, null, 12, xe),
+				t[4] ||= g("span", {
 					class: "v-time-picker-center",
 					"aria-hidden": "true"
 				}, null, -1),
-				(w(!0), _(te, null, re(pe.value, (e) => (w(), _("span", {
+				(S(!0), h(de, null, me(ke.value, (e) => (S(), h("span", {
 					key: e.key,
 					class: "v-time-picker-number",
 					"aria-hidden": "true",
 					"data-ring": e.ring,
 					"data-selected": e.selected ? "" : void 0,
-					style: C({ "--dial-turn": String(e.turn) })
-				}, E(e.label), 13, le))), 128))
-			], 40, se),
-			v("div", ue, E(W.value), 1),
-			e.$slots.footer ? (w(), _("div", de, [ie(e.$slots, "footer")])) : g("", !0)
-		], 8, k));
+					style: x({ "--dial-turn": String(e.turn) })
+				}, w(e.label), 13, Se))), 128))
+			], 40, be),
+			g("div", Ce, w(B.value), 1),
+			e.$slots.footer ? (S(), h("div", we, [he(e.$slots, "footer")])) : pe("", !0)
+		], 8, _e));
 	}
 });
 //#endregion
-export { j as default };
+export { D as default };
 
 //# sourceMappingURL=VTimePicker.vue_vue_type_script_setup_true_lang.js.map