@7pmlabs/design-system 1.0.8 → 1.0.10

package/dist/design-system217.js

@@ -1,583 +1,528 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createStaticVNode as a, createTextVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as ee, renderSlot as p, toDisplayString as m, watch as te, withKeys as ne, withModifiers as h } from "vue";
-//#region src/components/BTree/BTree.vue?vue&type=script&setup=true&lang.ts
-var re = ["aria-multiselectable"], ie = [
-	"data-node-key",
+import { useComponentId as e } from "./design-system10.js";
+import { BTimePickerPlacement as t, BTimePickerSize as n, BTimePickerVariant as r } from "./design-system216.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-selected",
-	"aria-checked",
-	"aria-disabled",
-	"aria-level",
-	"tabindex",
-	"draggable",
-	"onClick",
-	"onDblclick",
-	"onContextmenu",
-	"onDragstart",
-	"onDragenter",
-	"onDragover",
-	"onDragleave",
-	"onDragend",
-	"onDrop"
-], ae = {
+	"aria-controls",
+	"aria-describedby",
+	"aria-label",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"value"
+], oe = { class: "b-time-picker__suffix" }, se = {
 	key: 0,
-	class: "b-tree__drag-handle",
-	"aria-hidden": "true"
-}, oe = ["onClick"], se = {
-	key: 1,
-	class: "b-tree__switcher-icon b-tree__switcher-icon--spin",
+	class: "b-time-picker__icon",
+	"aria-hidden": "true",
 	viewBox: "0 0 24 24",
 	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	"aria-hidden": "true"
-}, ce = {
-	key: 2,
-	class: "b-tree__switcher b-tree__switcher--leaf",
-	"aria-hidden": "true"
-}, le = [
-	"aria-label",
-	"aria-checked",
+	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",
-	"onKeydown"
-], ue = {
-	key: 4,
-	class: "b-tree__icon",
-	"aria-hidden": "true"
-}, de = { key: 0 }, g = /* @__PURE__ */ s({
-	__name: "BTree",
-	props: {
-		treeData: { default: () => [] },
-		fieldNames: { default: () => ({}) },
-		checkable: {
+	"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
 		},
-		checkStrictly: {
+		inputReadOnly: {
 			type: Boolean,
 			default: !1
 		},
-		checkedKeys: { default: () => void 0 },
-		defaultCheckedKeys: { default: () => [] },
-		selectedKeys: { default: () => void 0 },
-		defaultSelectedKeys: { default: () => [] },
-		expandedKeys: { default: () => void 0 },
-		defaultExpandedKeys: { default: () => [] },
-		defaultExpandAll: {
+		allowClear: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		defaultExpandParent: {
+		showNow: {
 			type: Boolean,
 			default: !0
 		},
-		autoExpandParent: {
+		use12Hours: {
 			type: Boolean,
 			default: !1
 		},
-		multiple: {
+		hourStep: { default: 1 },
+		minuteStep: { default: 1 },
+		secondStep: { default: 1 },
+		format: {},
+		placement: { default: () => t.BottomLeft },
+		status: {},
+		hideDisabledOptions: {
 			type: Boolean,
 			default: !1
 		},
-		selectable: {
+		needConfirm: {
 			type: Boolean,
 			default: !0
 		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		showIcon: {
-			type: Boolean,
-			default: !1
-		},
-		showLine: {
+		changeOnScroll: {
 			type: Boolean,
 			default: !1
 		},
-		blockNode: {
+		showHour: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		draggable: {
+		showMinute: {
 			type: Boolean,
-			default: !1
-		},
-		loadData: {
-			type: Function,
-			default: void 0
-		},
-		loadedKeys: { default: () => void 0 },
-		filterTreeNode: {
-			type: Function,
-			default: void 0
+			default: !0
 		},
-		height: { default: () => void 0 },
-		virtual: {
+		showSecond: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		directory: {
+		defaultOpen: {
 			type: Boolean,
 			default: !1
 		},
-		expandAction: {
-			type: [String, Boolean],
-			default: "click"
-		}
-	},
-	emits: [
-		"check",
-		"expand",
-		"select",
-		"load",
-		"rightClick",
-		"dragStart",
-		"dragEnter",
-		"dragOver",
-		"dragLeave",
-		"dragEnd",
-		"drop",
-		"dblclick",
-		"update:checkedKeys",
-		"update:selectedKeys",
-		"update:expandedKeys",
-		"update:loadedKeys"
-	],
-	setup(s, { expose: g, emit: fe }) {
-		let _ = fe, pe = t(() => s.fieldNames.key ?? "key"), me = t(() => s.fieldNames.title ?? "title"), he = t(() => s.fieldNames.children ?? "children");
-		function v(e) {
-			return e[pe.value];
-		}
-		function y(e) {
-			return e[me.value] ?? "";
-		}
-		function b(e) {
-			return e[he.value];
-		}
-		let x = f(/* @__PURE__ */ new Set()), S = f(/* @__PURE__ */ new Set()), C = f(/* @__PURE__ */ new Set()), w = f(/* @__PURE__ */ new Set()), T = f(/* @__PURE__ */ new Set()), E = f(/* @__PURE__ */ new Set()), D = f(null), O = t(() => s.expandedKeys !== void 0), k = t(() => s.selectedKeys !== void 0), A = t(() => s.checkedKeys !== void 0), j = t(() => s.loadedKeys !== void 0), M = t(() => O.value ? new Set(s.expandedKeys) : x.value), ge = t(() => k.value ? new Set(s.selectedKeys) : S.value), _e = t(() => {
-			if (A.value) {
-				let e = s.checkedKeys;
-				return Array.isArray(e) ? new Set(e) : new Set(e.checked);
-			}
-			return C.value;
-		}), N = t(() => {
-			if (A.value) {
-				let e = s.checkedKeys;
-				if (!Array.isArray(e) && "halfChecked" in e) return new Set(e.halfChecked);
-			}
-			return w.value;
-		}), P = t(() => j.value ? new Set(s.loadedKeys) : T.value);
-		function F(e, t = 0, n = !0) {
-			let r = [];
-			for (let i of e) {
-				let e = v(i), a = M.value.has(e), o = n;
-				r.push({
-					key: e,
-					data: i,
-					depth: t,
-					visible: o
-				});
-				let s = b(i);
-				s?.length && r.push(...F(s, t + 1, o && a));
-			}
-			return r;
-		}
-		let I = t(() => F(s.treeData)), L = t(() => I.value.filter((e) => e.visible));
-		function R(e) {
-			let t = [];
-			for (let n of e) {
-				t.push(v(n));
-				let e = b(n);
-				e?.length && t.push(...R(e));
-			}
-			return t;
-		}
-		function z(e, t) {
-			let n = [];
-			function r(e) {
-				for (let i of e) {
-					let e = b(i);
-					e?.length && (e.some((e) => t.has(v(e)) || r([e]) !== void 0) && n.push(v(i)), r(e));
-				}
-			}
-			return r(e), n;
-		}
-		if (!O.value) {
-			if (s.defaultExpandAll) x.value = new Set(R(s.treeData).filter((e) => {
-				let t = I.value.find((t) => t.key === e);
-				return t ? !!b(t.data)?.length : !1;
-			}));
-			else if (s.defaultExpandedKeys.length) {
-				let e = new Set(s.defaultExpandedKeys);
-				s.defaultExpandParent && z(s.treeData, e).forEach((t) => e.add(t)), x.value = e;
-			}
-		}
-		!k.value && s.defaultSelectedKeys.length && (S.value = new Set(s.defaultSelectedKeys)), !A.value && s.defaultCheckedKeys.length && (C.value = new Set(s.defaultCheckedKeys), s.checkStrictly || B(C.value)), te(() => s.expandedKeys, (e) => {
-			if (!s.autoExpandParent || !e) return;
-			let t = new Set(e);
-			z(s.treeData, t).forEach((e) => t.add(e)), _("update:expandedKeys", [...t]);
+		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()
 		});
-		function B(e) {
-			let t = /* @__PURE__ */ new Set();
-			function n(r) {
-				let i = !0, a = !1;
-				for (let o of r) {
-					let r = v(o), s = b(o);
-					if (s?.length) {
-						let o = n(s);
-						o.all ? (e.add(r), a = !0) : o.some ? (e.delete(r), t.add(r), i = !1, a = !0) : e.has(r) ? a = !0 : i = !1;
-					} else e.has(r) ? a = !0 : i = !1;
-				}
-				return {
-					all: i,
-					some: a
-				};
+		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;
 			}
-			n(s.treeData), w.value = t;
+		}), 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 V(e) {
-			return !!b(e)?.length || !!s.loadData && !e.isLeaf;
+		function G(e) {
+			let t = e >= 12 ? "PM" : "AM";
+			return {
+				hour: e % 12 || 12,
+				period: t
+			};
 		}
-		function H(e) {
-			return M.value.has(e);
+		function K() {
+			t.disabled || (E.value = !0, D.value = !0, u("openChange", !0), y.value?.showPopover?.(), we(), d(() => Pe()));
 		}
-		function U(e) {
-			return ge.value.has(e);
+		function q() {
+			E.value = !1, D.value = !1, u("openChange", !1), y.value?.hidePopover?.(), v.value?.focus();
 		}
-		function W(e) {
-			return _e.value.has(e);
+		function Se() {
+			D.value ? q() : K();
 		}
-		function G(e) {
-			return N.value.has(e);
+		function Ce(e) {
+			let t = e.newState === "open";
+			E.value = t, D.value = t, t || u("openChange", !1);
 		}
-		function K(e) {
-			return E.value.has(e);
+		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 ve(e) {
-			return P.value.has(e);
+		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 q(e) {
-			return s.filterTreeNode ? s.filterTreeNode(e) : !1;
+		function Y(e) {
+			z.value.includes(e) || (k.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q());
 		}
-		async function J(e, t) {
-			let n = v(e);
-			if (e.disabled || s.disabled) return;
-			let r = !H(n);
-			if (r && s.loadData && !ve(n) && !K(n)) {
-				E.value.add(n);
-				try {
-					await s.loadData(e), j.value || T.value.add(n), _("update:loadedKeys", [...P.value, n]);
-				} finally {
-					E.value.delete(n);
-				}
-			}
-			let i;
-			i = O.value ? new Set(s.expandedKeys) : new Set(x.value), r ? i.add(n) : i.delete(n), O.value || (x.value = i), _("update:expandedKeys", [...i]);
-			let a = {
-				expanded: r,
-				node: e,
-				event: t
-			};
-			_("expand", [...i], a);
+		function Te(e) {
+			B.value.includes(e) || (A.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q());
 		}
-		function Y(e, t) {
-			if (!s.selectable || e.selectable === !1 || e.disabled || s.disabled) return;
-			let n = v(e), r;
-			r = k.value ? new Set(s.selectedKeys) : new Set(S.value), r.has(n) ? r.delete(n) : (s.multiple || r.clear(), r.add(n)), k.value || (S.value = r), _("update:selectedKeys", [...r]);
-			let i = {
-				event: t,
-				selected: r.has(n),
-				node: e,
-				selectedNodes: I.value.filter((e) => r.has(e.key)).map((e) => e.data),
-				nativeEvent: t
-			};
-			_("select", [...r], i);
+		function X(e) {
+			j.value = e, !t.needConfirm && !t.changeOnScroll ? Z() : t.changeOnScroll && Q();
 		}
-		function X(e, t) {
-			if (!s.checkable || e.disableCheckbox || e.disabled || s.disabled) return;
-			let n = v(e), r;
-			if (A.value) {
-				let e = s.checkedKeys;
-				r = new Set(Array.isArray(e) ? e : e.checked);
-			} else r = new Set(C.value);
-			if (r.has(n)) {
-				if (r.delete(n), !s.checkStrictly) {
-					function t(e) {
-						for (let n of e) {
-							r.delete(v(n));
-							let e = b(n);
-							e?.length && t(e);
-						}
-					}
-					let n = b(e);
-					n?.length && t(n);
-				}
-			} else if (r.add(n), !s.checkStrictly) {
-				function t(e) {
-					for (let n of e) {
-						!n.disableCheckbox && !n.disabled && r.add(v(n));
-						let e = b(n);
-						e?.length && t(e);
-					}
-				}
-				let n = b(e);
-				n?.length && t(n);
+		function Z() {
+			if (O.value !== null && k.value !== null) {
+				if (t.showSecond && A.value === null || t.use12Hours && j.value === null) return;
+				Q(), q();
 			}
-			!s.checkStrictly && !A.value && B(r);
-			let i = I.value.filter((e) => r.has(e.key)).map((e) => e.data), a = {
-				event: t,
-				node: e,
-				checked: r.has(n),
-				checkedNodes: i,
-				checkedNodesPositions: i.map((e) => ({
-					node: e,
-					pos: "0"
-				})),
-				halfCheckedKeys: [...N.value],
-				nativeEvent: t
-			};
-			A.value || (C.value = r);
-			let o = s.checkStrictly ? {
-				checked: [...r],
-				halfChecked: [...N.value]
-			} : [...r];
-			_("update:checkedKeys", o), _("check", o, a);
 		}
-		function ye(e, t) {
-			s.draggable && (D.value = v(t), e.dataTransfer?.setData("text/plain", String(v(t))), _("dragStart", {
-				event: e,
-				node: t
-			}));
+		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 be(e, t) {
-			s.draggable && (e.preventDefault(), _("dragEnter", {
-				event: e,
-				node: t,
-				expandedKeys: [...M.value]
-			}));
+		function Ee() {
+			Q(), q();
 		}
-		function xe(e, t) {
-			s.draggable && (e.preventDefault(), _("dragOver", {
-				event: e,
-				node: t
-			}));
+		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 Se(e, t) {
-			s.draggable && _("dragLeave", {
-				event: e,
-				node: t
-			});
+		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 Ce(e, t) {
-			s.draggable && (D.value = null, _("dragEnd", {
-				event: e,
-				node: t
-			}));
+		function ke(e) {
+			M.value = e.target.value;
 		}
-		function we(e, t) {
-			if (!s.draggable) return;
-			e.preventDefault();
-			let n = I.value.find((e) => e.key === D.value);
-			n && (_("drop", {
-				event: e,
-				node: t,
-				dragNode: n.data,
-				dragNodesKeys: [n.key],
-				dropPosition: 0,
-				dropToGap: !1
-			}), D.value = null);
+		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);
+			}
 		}
-		let Z = f(null), Q = f(L.value[0]?.key ?? null);
-		function Te(e) {
-			let t = L.value;
-			if (!t.length) return;
-			let n = t.findIndex((e) => e.key === Q.value), r = t[n];
-			switch (e.key) {
-				case "ArrowDown": {
-					e.preventDefault();
-					let r = t[n + 1];
-					r && (Q.value = r.key, c(() => $(r.key)));
-					break;
-				}
-				case "ArrowUp": {
+		function je(e) {
+			if (e.key === "Enter" || e.key === " ") {
+				if (!D.value) e.preventDefault(), K();
+				else if (e.key === "Enter") {
 					e.preventDefault();
-					let r = t[n - 1];
-					r && (Q.value = r.key, c(() => $(r.key)));
-					break;
+					let t = L(M.value);
+					t && (P.value = t, M.value = I(t), u("change", t, I(t))), q();
 				}
-				case "ArrowRight":
-					if (e.preventDefault(), !r) break;
-					if (V(r.data) && !H(r.key)) J(r.data, e);
-					else if (H(r.key)) {
-						let e = t[n + 1];
-						e?.depth > r.depth && (Q.value = e.key, c(() => $(e.key)));
-					}
-					break;
-				case "ArrowLeft":
-					if (e.preventDefault(), !r) break;
-					if (H(r.key)) J(r.data, e);
-					else if (r.depth > 0) {
-						for (let e = n - 1; e >= 0; e--) if (t[e].depth < r.depth) {
-							Q.value = t[e].key, c(() => $(t[e].key));
-							break;
-						}
-					}
-					break;
-				case "Enter":
-				case " ":
-					if (e.preventDefault(), !r) break;
-					s.checkable ? X(r.data, e) : s.selectable && Y(r.data, e);
-					break;
-				case "Home":
-					e.preventDefault(), t[0] && (Q.value = t[0].key, c(() => $(t[0].key)));
-					break;
-				case "End": {
-					e.preventDefault();
-					let n = t[t.length - 1];
-					n && (Q.value = n.key, c(() => $(n.key)));
-					break;
-				}
-			}
+			} else e.key === "Escape" && D.value && (e.preventDefault(), q());
 		}
-		function $(e) {
-			(Z.value?.querySelector(`[data-node-key="${String(e).replace(/["\\]/g, "\\$&")}"]`))?.focus();
-		}
-		function Ee(e, t) {
-			s.directory && s.expandAction === "click" && V(e) && J(e, t), Y(e, t);
-		}
-		function De(e, t) {
-			s.directory && s.expandAction === "doubleClick" && V(e) && J(e, t), _("dblclick", t, e);
-		}
-		function Oe(e) {
-			c(() => {
-				(Z.value?.querySelector(`[data-node-key="${String(e.key).replace(/["\\]/g, "\\$&")}"]`))?.scrollIntoView?.({ block: {
-					top: "start",
-					bottom: "end",
-					auto: "nearest"
-				}[e.align ?? "auto"] });
+		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"
 			});
 		}
-		g({ scrollTo: Oe });
-		function ke(e, t) {
-			e.preventDefault(), _("rightClick", {
-				event: e,
-				node: t
-			});
+		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);
+			}
 		}
-		return (t, c) => (d(), r("div", {
-			ref_key: "treeRef",
-			ref: Z,
-			class: l(["b-tree", {
-				"b-tree--checkable": s.checkable,
-				"b-tree--show-line": s.showLine,
-				"b-tree--block-node": s.blockNode,
-				"b-tree--directory": s.directory,
-				"b-tree--disabled": s.disabled
-			}]),
-			role: "tree",
-			"aria-multiselectable": s.multiple || void 0,
-			style: u(s.height ? {
-				height: `${s.height}px`,
-				overflowY: "auto"
-			} : void 0),
-			onKeydown: Te
-		}, [(d(!0), r(e, null, ee(L.value, (e) => (d(), r("div", {
-			key: e.key,
-			"data-node-key": String(e.key),
-			class: l(["b-tree__node", {
-				"b-tree__node--selected": U(e.key),
-				"b-tree__node--checked": W(e.key),
-				"b-tree__node--half-checked": G(e.key),
-				"b-tree__node--expanded": H(e.key),
-				"b-tree__node--disabled": e.data.disabled || s.disabled,
-				"b-tree__node--leaf": !V(e.data),
-				"b-tree__node--loading": K(e.key),
-				"b-tree__node--dragging": s.draggable && D.value === e.key,
-				"b-tree__node--filtered": q(e.data),
-				"b-tree__node--block": s.blockNode
-			}]),
-			role: "treeitem",
-			"aria-expanded": V(e.data) ? H(e.key) : void 0,
-			"aria-selected": s.selectable ? U(e.key) : void 0,
-			"aria-checked": s.checkable ? W(e.key) : void 0,
-			"aria-disabled": e.data.disabled || s.disabled || void 0,
-			"aria-level": e.depth + 1,
-			tabindex: e.key === Q.value ? 0 : -1,
-			style: u({ "--b-tree-node-indent": `${e.depth * 24}px` }),
-			draggable: s.draggable ? "true" : void 0,
-			onClick: h((t) => Ee(e.data, t), ["stop"]),
-			onDblclick: h((t) => De(e.data, t), ["stop"]),
-			onContextmenu: h((t) => ke(t, e.data), ["stop"]),
-			onDragstart: (t) => ye(t, e.data),
-			onDragenter: (t) => be(t, e.data),
-			onDragover: (t) => xe(t, e.data),
-			onDragleave: (t) => Se(t, e.data),
-			onDragend: (t) => Ce(t, e.data),
-			onDrop: (t) => we(t, e.data)
+		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
 		}, [
-			s.draggable ? (d(), r("span", ae, [...c[0] ||= [a("<svg viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" data-v-08bb45f2><circle cx=\"5\" cy=\"3.5\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"5\" cy=\"8\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"5\" cy=\"12.5\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"11\" cy=\"3.5\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"11\" cy=\"8\" r=\"1.25\" data-v-08bb45f2></circle><circle cx=\"11\" cy=\"12.5\" r=\"1.25\" data-v-08bb45f2></circle></svg>", 1)]])) : n("", !0),
-			c[4] ||= i("span", {
-				class: "b-tree__indent",
-				"aria-hidden": "true"
-			}, null, -1),
-			V(e.data) ? (d(), r("span", {
+			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: l(["b-tree__switcher", {
-					"b-tree__switcher--expanded": H(e.key),
-					"b-tree__switcher--loading": K(e.key)
-				}]),
+				class: "b-time-picker__clear",
+				type: "button",
+				"aria-label": "Clear time",
+				tabindex: "-1",
+				onClick: Oe
+			}, [...n[3] ||= [c("svg", {
 				"aria-hidden": "true",
-				onClick: h((t) => J(e.data, t), ["stop"])
-			}, [K(e.key) ? n("", !0) : p(t.$slots, "switcherIcon", {
-				key: 0,
-				node: e.data,
-				expanded: H(e.key)
-			}, () => [c[1] ||= i("svg", {
-				class: "b-tree__switcher-icon",
 				viewBox: "0 0 24 24",
 				fill: "none",
-				xmlns: "http://www.w3.org/2000/svg",
-				"aria-hidden": "true"
-			}, [i("path", {
-				d: "M9 18L15 12L9 6",
 				stroke: "currentColor",
-				"stroke-width": "2",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round"
-			})], -1)], !0), K(e.key) ? (d(), r("svg", se, [...c[2] ||= [i("circle", {
-				cx: "12",
-				cy: "12",
-				r: "9",
-				stroke: "currentColor",
-				"stroke-width": "2",
-				"stroke-dasharray": "42",
-				"stroke-dashoffset": "14",
-				"stroke-linecap": "round"
-			}, null, -1)]])) : n("", !0)], 10, oe)) : s.showLine ? (d(), r("span", ce)) : n("", !0),
-			s.checkable && e.data.checkable !== !1 ? (d(), r("span", {
+				"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,
-				class: l(["b-tree__checkbox", {
-					"b-tree__checkbox--checked": W(e.key),
-					"b-tree__checkbox--indeterminate": G(e.key),
-					"b-tree__checkbox--disabled": e.data.disableCheckbox || e.data.disabled || s.disabled
+				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: "checkbox",
-				"aria-label": y(e.data),
-				"aria-checked": G(e.key) ? "mixed" : W(e.key),
-				"aria-disabled": e.data.disableCheckbox || e.data.disabled || s.disabled || void 0,
-				tabindex: "-1",
-				onClick: h((t) => X(e.data, t), ["stop"]),
-				onKeydown: [ne(h((t) => X(e.data, t), ["prevent"]), ["enter"]), ne(h((t) => X(e.data, t), ["prevent"]), ["space"])]
-			}, [...c[3] ||= [i("span", {
-				class: "b-tree__checkbox-inner",
-				"aria-hidden": "true"
-			}, null, -1)]], 42, le)) : n("", !0),
-			s.showIcon || e.data.icon || t.$slots.icon ? (d(), r("span", ue, [p(t.$slots, "icon", { node: e.data }, () => [e.data.icon ? (d(), r("span", de, m(e.data.icon), 1)) : n("", !0)], !0)])) : n("", !0),
-			i("span", { class: l(["b-tree__title", { "b-tree__title--filtered": q(e.data) }]) }, [p(t.$slots, "title", { node: e.data }, () => [o(m(y(e.data)), 1)], !0)], 2)
-		], 46, ie))), 128))], 46, re));
+				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 { g as default };
+export { v as default };
 
 //# sourceMappingURL=design-system217.js.map