@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system255.js

@@ -1,12 +1,528 @@
-//#region src/components/BTreeSelect/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e.Underlined = "underlined", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Error = "error", e.Warning = "warning", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
-}({});
+import { useComponentId as e } from "./design-system10.js";
+import { BTimePickerPlacement as t, BTimePickerSize as n, BTimePickerVariant as r } from "./design-system254.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, useModel as re, watch as ie } from "vue";
+//#region src/components/BTimePicker/BTimePicker.vue?vue&type=script&setup=true&lang.ts
+var ae = [
+	"id",
+	"aria-expanded",
+	"aria-controls",
+	"aria-describedby",
+	"aria-label",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"value"
+], oe = { class: "b-time-picker__suffix" }, se = {
+	key: 0,
+	class: "b-time-picker__icon",
+	"aria-hidden": "true",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2"
+}, ce = ["id"], le = ["id"], ue = {
+	class: "b-time-picker__columns",
+	role: "group",
+	"aria-label": "Time selection columns"
+}, de = ["aria-activedescendant"], fe = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick"
+], pe = ["aria-activedescendant"], me = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick"
+], he = ["aria-activedescendant"], ge = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick"
+], _e = ["aria-selected"], ve = ["aria-selected"], ye = {
+	key: 0,
+	class: "b-time-picker__footer"
+}, v = /* @__PURE__ */ l({
+	__name: "BTimePicker",
+	props: /* @__PURE__ */ u({
+		size: { default: () => n.Medium },
+		variant: { default: () => r.Outlined },
+		placeholder: { default: "Select time" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		inputReadOnly: {
+			type: Boolean,
+			default: !1
+		},
+		allowClear: {
+			type: Boolean,
+			default: !0
+		},
+		showNow: {
+			type: Boolean,
+			default: !0
+		},
+		use12Hours: {
+			type: Boolean,
+			default: !1
+		},
+		hourStep: { default: 1 },
+		minuteStep: { default: 1 },
+		secondStep: { default: 1 },
+		format: {},
+		placement: { default: () => t.BottomLeft },
+		status: {},
+		hideDisabledOptions: {
+			type: Boolean,
+			default: !1
+		},
+		needConfirm: {
+			type: Boolean,
+			default: !0
+		},
+		changeOnScroll: {
+			type: Boolean,
+			default: !1
+		},
+		showHour: {
+			type: Boolean,
+			default: !0
+		},
+		showMinute: {
+			type: Boolean,
+			default: !0
+		},
+		showSecond: {
+			type: Boolean,
+			default: !0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		defaultValue: {},
+		open: { type: Boolean },
+		disabledTime: { type: Function }
+	}, {
+		modelValue: { default: void 0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ u(["change", "openChange"], ["update:modelValue"]),
+	setup(t, { expose: n, emit: r }) {
+		let l = re(t, "modelValue"), u = r, v = m(null), y = m(null), b = m(null), x = m(null), S = m(null), C = m(null);
+		n({
+			focus: () => v.value?.focus(),
+			blur: () => v.value?.blur()
+		});
+		let { componentUID: w } = e(), T = a(() => `--b-time-picker-${w.value}`), E = m(t.defaultOpen), D = m(t.open === void 0 ? t.defaultOpen : !!t.open), be = m(t.defaultValue ?? null), O = m(null), k = m(null), A = m(null), j = m(null), M = m(""), N = m("hour"), P = a({
+			get: () => l.value ?? be.value,
+			set: (e) => {
+				be.value = e, l.value = e;
+			}
+		}), xe = a(() => {
+			if (t.format) return t.format;
+			let e = [];
+			t.showHour && e.push(t.use12Hours ? "hh" : "HH"), t.showMinute && e.push("mm"), t.showSecond && e.push("ss");
+			let n = e.join(":");
+			return t.use12Hours ? `${n} A` : n;
+		});
+		function F(e) {
+			return String(e).padStart(2, "0");
+		}
+		function I(e) {
+			if (!e) return "";
+			let n = e.getHours(), r = e.getMinutes(), i = e.getSeconds(), a = n >= 12 ? "PM" : "AM", o = xe.value;
+			if (t.use12Hours) {
+				let e = n % 12 || 12;
+				o = o.replace("hh", F(e)), o = o.replace("h", String(e)), o = o.replace("A", a), o = o.replace("a", a.toLowerCase());
+			} else o = o.replace("HH", F(n)), o = o.replace("H", String(n));
+			return o = o.replace("mm", F(r)), o = o.replace("ss", F(i)), o;
+		}
+		function L(e) {
+			if (!e.trim()) return null;
+			let n = e.match(/(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM|am|pm)?/);
+			if (!n) return null;
+			let r = parseInt(n[1], 10), i = parseInt(n[2], 10), a = n[3] ? parseInt(n[3], 10) : 0, o = n[4]?.toUpperCase();
+			if (t.use12Hours && o && (o === "PM" && r < 12 && (r += 12), o === "AM" && r === 12 && (r = 0)), r < 0 || r > 23 || i < 0 || i > 59 || a < 0 || a > 59) return null;
+			let s = /* @__PURE__ */ new Date();
+			return s.setHours(r, i, a, 0), s;
+		}
+		let R = a(() => t.disabledTime ? t.disabledTime().disabledHours?.() ?? [] : []), z = a(() => {
+			if (!t.disabledTime) return [];
+			let e = t.disabledTime(), n = O.value ?? P.value?.getHours() ?? 0;
+			return e.disabledMinutes?.(n) ?? [];
+		}), B = a(() => {
+			if (!t.disabledTime) return [];
+			let e = t.disabledTime(), n = O.value ?? P.value?.getHours() ?? 0, r = k.value ?? P.value?.getMinutes() ?? 0;
+			return e.disabledSeconds?.(n, r) ?? [];
+		}), V = a(() => {
+			let e = [];
+			if (t.use12Hours) for (let n = 1; n <= 12; n += t.hourStep) e.push(n);
+			else for (let n = 0; n < 24; n += t.hourStep) e.push(n);
+			return t.hideDisabledOptions ? e.filter((e) => !R.value.includes(t.use12Hours ? W(e, j.value ?? "AM") : e)) : e;
+		}), H = a(() => {
+			let e = [];
+			for (let n = 0; n < 60; n += t.minuteStep) e.push(n);
+			return t.hideDisabledOptions ? e.filter((e) => !z.value.includes(e)) : e;
+		}), U = a(() => {
+			let e = [];
+			for (let n = 0; n < 60; n += t.secondStep) e.push(n);
+			return t.hideDisabledOptions ? e.filter((e) => !B.value.includes(e)) : e;
+		});
+		function W(e, t) {
+			return t === "AM" ? e === 12 ? 0 : e : e === 12 ? 12 : e + 12;
+		}
+		function G(e) {
+			let t = e >= 12 ? "PM" : "AM";
+			return {
+				hour: e % 12 || 12,
+				period: t
+			};
+		}
+		function K() {
+			t.disabled || (E.value = !0, D.value = !0, u("openChange", !0), y.value?.showPopover?.(), we(), d(() => Pe()));
+		}
+		function q() {
+			E.value = !1, D.value = !1, u("openChange", !1), y.value?.hidePopover?.(), v.value?.focus();
+		}
+		function Se() {
+			D.value ? q() : K();
+		}
+		function Ce(e) {
+			let t = e.newState === "open";
+			E.value = t, D.value = t, t || u("openChange", !1);
+		}
+		function we() {
+			let e = P.value;
+			if (e) {
+				if (t.use12Hours) {
+					let { hour: t, period: n } = G(e.getHours());
+					O.value = t, j.value = n;
+				} else O.value = e.getHours();
+				k.value = e.getMinutes(), A.value = e.getSeconds();
+			} else O.value = null, k.value = null, A.value = null, j.value = null;
+		}
+		function J(e) {
+			let n = t.use12Hours ? W(e, j.value ?? "AM") : e;
+			R.value.includes(n) || (O.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q());
+		}
+		function Y(e) {
+			z.value.includes(e) || (k.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q());
+		}
+		function Te(e) {
+			B.value.includes(e) || (A.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q());
+		}
+		function X(e) {
+			j.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q();
+		}
+		function Z() {
+			if (O.value !== null && k.value !== null) {
+				if (t.showSecond && A.value === null || t.use12Hours && j.value === null) return;
+				Q(), q();
+			}
+		}
+		function Q() {
+			let e = O.value ?? 0, n = k.value ?? 0, r = A.value ?? 0, i = t.use12Hours ? W(e, j.value ?? "AM") : e, a = /* @__PURE__ */ new Date();
+			a.setHours(i, n, r, 0), P.value = a, M.value = I(a), u("change", a, I(a));
+		}
+		function Ee() {
+			Q(), q();
+		}
+		function De() {
+			let e = /* @__PURE__ */ new Date();
+			if (t.use12Hours) {
+				let { hour: t, period: n } = G(e.getHours());
+				O.value = t, j.value = n;
+			} else O.value = e.getHours();
+			k.value = e.getMinutes(), A.value = e.getSeconds(), d(() => Pe()), t.needConfirm || (Q(), q());
+		}
+		function Oe(e) {
+			e.stopPropagation(), P.value = null, M.value = "", O.value = null, k.value = null, A.value = null, j.value = null, u("change", null, "");
+		}
+		function ke(e) {
+			M.value = e.target.value;
+		}
+		function Ae() {
+			if (!D.value) {
+				let e = L(M.value);
+				e ? (P.value = e, M.value = I(e), u("change", e, I(e))) : M.value === "" ? (P.value = null, u("change", null, "")) : M.value = I(P.value);
+			}
+		}
+		function je(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				if (!D.value) e.preventDefault(), K();
+				else if (e.key === "Enter") {
+					e.preventDefault();
+					let t = L(M.value);
+					t && (P.value = t, M.value = I(t), u("change", t, I(t))), q();
+				}
+			} else e.key === "Escape" && D.value && (e.preventDefault(), q());
+		}
+		function Me(e) {
+			if (e.key === "Escape") {
+				e.preventDefault(), q();
+				return;
+			}
+			if (e.key === "Tab") {
+				let n = [];
+				t.showHour && n.push("hour"), t.showMinute && n.push("minute"), t.showSecond && n.push("second"), t.use12Hours && n.push("ampm");
+				let r = n.indexOf(N.value);
+				e.shiftKey ? r > 0 && (e.preventDefault(), N.value = n[r - 1]) : r < n.length - 1 && (e.preventDefault(), N.value = n[r + 1]);
+				return;
+			}
+			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+				e.preventDefault(), Ne(e.key === "ArrowUp" ? -1 : 1);
+				return;
+			}
+			e.key === "Enter" && (e.preventDefault(), Ee());
+		}
+		function Ne(e) {
+			if (N.value === "hour") {
+				let t = V.value, n = O.value ?? t[0], r = t.indexOf(n), i = t[Math.max(0, Math.min(t.length - 1, r + e))];
+				J(i), $(b.value, t.indexOf(i));
+			} else if (N.value === "minute") {
+				let t = H.value, n = k.value ?? t[0], r = t.indexOf(n), i = t[Math.max(0, Math.min(t.length - 1, r + e))];
+				Y(i), $(x.value, t.indexOf(i));
+			} else if (N.value === "second") {
+				let t = U.value, n = A.value ?? t[0], r = t.indexOf(n), i = t[Math.max(0, Math.min(t.length - 1, r + e))];
+				Te(i), $(S.value, t.indexOf(i));
+			} else N.value === "ampm" && X(j.value === "AM" ? "PM" : "AM");
+		}
+		function $(e, t) {
+			!e || !e.scrollTo || e.scrollTo({
+				top: t * 28,
+				behavior: "smooth"
+			});
+		}
+		function Pe() {
+			if (O.value !== null) {
+				let e = V.value.indexOf(O.value);
+				e >= 0 && $(b.value, e);
+			}
+			if (k.value !== null) {
+				let e = H.value.indexOf(k.value);
+				e >= 0 && $(x.value, e);
+			}
+			if (A.value !== null && t.showSecond) {
+				let e = U.value.indexOf(A.value);
+				e >= 0 && $(S.value, e);
+			}
+			if (j.value && t.use12Hours) {
+				let e = j.value === "AM" ? 0 : 1;
+				$(C.value, e);
+			}
+		}
+		function Fe(e) {
+			if (!D.value) return;
+			let t = e.target;
+			y.value?.contains(t) || v.value?.parentElement?.contains(t) || q();
+		}
+		ne(() => {
+			document.addEventListener("mousedown", Fe);
+		}), te(() => {
+			document.removeEventListener("mousedown", Fe);
+		}), ie(() => t.open, (e) => {
+			e !== void 0 && (e ? K() : q());
+		}), ie(P, (e) => {
+			M.value = I(e);
+		}), M.value = I(P.value);
+		let Ie = a(() => [
+			"b-time-picker",
+			`b-time-picker--${t.size}`,
+			`b-time-picker--${t.variant}`,
+			{
+				"b-time-picker--disabled": t.disabled,
+				"b-time-picker--open": D.value,
+				[`b-time-picker--${t.status}`]: !!t.status
+			}
+		]), Le = (e) => {
+			let n = t.use12Hours ? W(e, j.value ?? "AM") : e;
+			return R.value.includes(n);
+		}, Re = (e) => z.value.includes(e), ze = (e) => B.value.includes(e);
+		return (e, n) => (p(), s("div", { class: f(Ie.value) }, [c("div", {
+			class: "b-time-picker__input-wrap",
+			style: ee({ anchorName: T.value }),
+			onClick: Se
+		}, [
+			c("input", {
+				id: `b-time-picker-input-${_(w)}`,
+				ref_key: "inputEl",
+				ref: v,
+				class: "b-time-picker__input",
+				type: "text",
+				role: "combobox",
+				"aria-expanded": D.value,
+				"aria-haspopup": "dialog",
+				"aria-controls": D.value ? `b-time-picker-panel-${_(w)}` : void 0,
+				"aria-describedby": t.status ? `b-time-picker-status-${_(w)}` : void 0,
+				"aria-label": t.placeholder,
+				placeholder: t.placeholder,
+				disabled: t.disabled,
+				readonly: t.inputReadOnly,
+				value: M.value,
+				autocomplete: "off",
+				onInput: ke,
+				onBlur: Ae,
+				onKeydown: je
+			}, null, 40, ae),
+			c("span", oe, [!t.allowClear || !P.value ? (p(), s("svg", se, [...n[2] ||= [c("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}, null, -1), c("polyline", { points: "12 6 12 12 16 14" }, null, -1)]])) : (p(), s("button", {
+				key: 1,
+				class: "b-time-picker__clear",
+				type: "button",
+				"aria-label": "Clear time",
+				tabindex: "-1",
+				onClick: Oe
+			}, [...n[3] ||= [c("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2"
+			}, [
+				c("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10"
+				}),
+				c("line", {
+					x1: "15",
+					y1: "9",
+					x2: "9",
+					y2: "15"
+				}),
+				c("line", {
+					x1: "9",
+					y1: "9",
+					x2: "15",
+					y2: "15"
+				})
+			], -1)]]))]),
+			t.status ? (p(), s("span", {
+				key: 0,
+				id: `b-time-picker-status-${_(w)}`,
+				class: "b-time-picker__status-text",
+				"aria-live": "polite"
+			}, g(t.status), 9, ce)) : o("", !0)
+		], 4), c("div", {
+			id: `b-time-picker-panel-${_(w)}`,
+			ref_key: "panelEl",
+			ref: y,
+			class: "b-time-picker__panel",
+			popover: "",
+			role: "dialog",
+			"aria-label": "Time picker",
+			"aria-modal": !0,
+			style: ee({ positionAnchor: T.value }),
+			onToggle: Ce,
+			onKeydown: Me
+		}, [c("div", ue, [
+			t.showHour ? (p(), s("div", {
+				key: 0,
+				ref_key: "hourColEl",
+				ref: b,
+				class: "b-time-picker__column",
+				role: "listbox",
+				"aria-label": "Hours",
+				"aria-activedescendant": O.value === null ? void 0 : `b-time-picker-hour-${O.value}-${_(w)}`
+			}, [(p(!0), s(i, null, h(V.value, (e) => (p(), s("div", {
+				id: `b-time-picker-hour-${e}-${_(w)}`,
+				key: e,
+				class: f(["b-time-picker__cell", {
+					"b-time-picker__cell--selected": O.value === e,
+					"b-time-picker__cell--disabled": Le(e),
+					"b-time-picker__cell--focused": N.value === "hour" && O.value === e
+				}]),
+				role: "option",
+				"aria-selected": O.value === e,
+				"aria-disabled": Le(e),
+				onClick: (t) => J(e)
+			}, g(F(e)), 11, fe))), 128))], 8, de)) : o("", !0),
+			t.showMinute ? (p(), s("div", {
+				key: 1,
+				ref_key: "minuteColEl",
+				ref: x,
+				class: "b-time-picker__column",
+				role: "listbox",
+				"aria-label": "Minutes",
+				"aria-activedescendant": k.value === null ? void 0 : `b-time-picker-minute-${k.value}-${_(w)}`
+			}, [(p(!0), s(i, null, h(H.value, (e) => (p(), s("div", {
+				id: `b-time-picker-minute-${e}-${_(w)}`,
+				key: e,
+				class: f(["b-time-picker__cell", {
+					"b-time-picker__cell--selected": k.value === e,
+					"b-time-picker__cell--disabled": Re(e),
+					"b-time-picker__cell--focused": N.value === "minute" && k.value === e
+				}]),
+				role: "option",
+				"aria-selected": k.value === e,
+				"aria-disabled": Re(e),
+				onClick: (t) => Y(e)
+			}, g(F(e)), 11, me))), 128))], 8, pe)) : o("", !0),
+			t.showSecond ? (p(), s("div", {
+				key: 2,
+				ref_key: "secondColEl",
+				ref: S,
+				class: "b-time-picker__column",
+				role: "listbox",
+				"aria-label": "Seconds",
+				"aria-activedescendant": A.value === null ? void 0 : `b-time-picker-second-${A.value}-${_(w)}`
+			}, [(p(!0), s(i, null, h(U.value, (e) => (p(), s("div", {
+				id: `b-time-picker-second-${e}-${_(w)}`,
+				key: e,
+				class: f(["b-time-picker__cell", {
+					"b-time-picker__cell--selected": A.value === e,
+					"b-time-picker__cell--disabled": ze(e),
+					"b-time-picker__cell--focused": N.value === "second" && A.value === e
+				}]),
+				role: "option",
+				"aria-selected": A.value === e,
+				"aria-disabled": ze(e),
+				onClick: (t) => Te(e)
+			}, g(F(e)), 11, ge))), 128))], 8, he)) : o("", !0),
+			t.use12Hours ? (p(), s("div", {
+				key: 3,
+				ref_key: "ampmColEl",
+				ref: C,
+				class: "b-time-picker__column b-time-picker__column--ampm",
+				role: "listbox",
+				"aria-label": "AM/PM"
+			}, [c("div", {
+				class: f(["b-time-picker__cell", {
+					"b-time-picker__cell--selected": j.value === "AM",
+					"b-time-picker__cell--focused": N.value === "ampm" && j.value === "AM"
+				}]),
+				role: "option",
+				"aria-selected": j.value === "AM",
+				onClick: n[0] ||= (e) => X("AM")
+			}, " AM ", 10, _e), c("div", {
+				class: f(["b-time-picker__cell", {
+					"b-time-picker__cell--selected": j.value === "PM",
+					"b-time-picker__cell--focused": N.value === "ampm" && j.value === "PM"
+				}]),
+				role: "option",
+				"aria-selected": j.value === "PM",
+				onClick: n[1] ||= (e) => X("PM")
+			}, " PM ", 10, ve)], 512)) : o("", !0)
+		]), t.needConfirm || t.showNow ? (p(), s("div", ye, [t.showNow ? (p(), s("button", {
+			key: 0,
+			class: "b-time-picker__now-btn",
+			type: "button",
+			onClick: De
+		}, " Now ")) : o("", !0), t.needConfirm ? (p(), s("button", {
+			key: 1,
+			class: "b-time-picker__ok-btn",
+			type: "button",
+			onClick: Ee
+		}, " OK ")) : o("", !0)])) : o("", !0)], 44, le)], 2));
+	}
+});
 //#endregion
-export { n as BTreeSelectPlacement, t as BTreeSelectStatus, e as BTreeSelectVariant };
+export { v as default };
 
 //# sourceMappingURL=design-system255.js.map