@aures5g/vue-component-library 3.73.0 → 3.75.0

package/dist/vue-component-library.js

@@ -4397,6 +4397,7 @@ var Nc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAA
 }, Bc = { class: "grow truncate @max-[3.625rem]:hidden" }, Vc = [
 	"aria-rowindex",
 	"data-row-index",
+	"data-active-row",
 	"onClick",
 	"onDblclick",
 	"onKeyup",
@@ -4582,12 +4583,13 @@ var Nc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAA
 			onVisible: ie
 		}, me({
 			default: H(({ item: r, index: s }) => [O("div", {
-				class: N(["lg:h-[calc(2.5rem+0.0625rem)] lg:after:h-[0.0625rem] lg:after:w-[calc(100%-2rem)] lg:after:bg-outline/12 lg:after:mx-[1rem] lg:after:absolute lg:after:bottom-0 relative flex flex-col lg:gap-[0.25rem] lg:flex-row max-lg:bg-surface hover:bg-(--row-hover-color,var(--row-default-hover-color)) hover:after:content-none focus:bg-(--row-focus-color,var(--row-default-hover-color)) focus:after:content-none outline-hidden cursor-pointer focus:before focus:before:lg:absolute focus:before:lg:left-[-0.125rem] focus:before:lg:w-[0.125rem] focus:before:lg:h-[2.5rem] focus:before:lg:bg-primary", [{ "bg-secondary-container after:content-none [--row-default-hover-color:#C3D4EE]": Array.isArray(b.value) && b.value.includes(r[e.dataKey]) }, e.getRowClass ? e.getRowClass(r) : null]]),
+				class: N(["lg:h-[calc(2.5rem+0.0625rem)] lg:after:h-[0.0625rem] lg:after:w-[calc(100%-2rem)] lg:after:bg-outline/12 lg:after:mx-[1rem] lg:after:absolute lg:after:bottom-0 relative flex flex-col lg:gap-[0.25rem] lg:flex-row max-lg:bg-surface hover:bg-(--row-hover-color,var(--row-default-hover-color)) hover:after:content-none focus:bg-(--row-focus-color,var(--row-default-hover-color)) data-active-row:bg-(--row-focus-color,var(--row-default-hover-color)) focus:after:content-none data-active-row:after:content-none outline-hidden cursor-pointer focus:before focus:before:lg:absolute focus:before:lg:left-[-0.125rem] focus:before:lg:w-[0.125rem] focus:before:lg:h-[2.5rem] focus:before:lg:bg-primary data-active-row:before data-active-row:before:lg:absolute data-active-row:before:lg:left-[-0.125rem] data-active-row:before:lg:w-[0.125rem] data-active-row:before:lg:h-[2.5rem] data-active-row:before:lg:bg-primary", [{ "bg-secondary-container after:content-none [--row-default-hover-color:#C3D4EE]": Array.isArray(b.value) && b.value.includes(r[e.dataKey]) }, e.getRowClass ? e.getRowClass(r) : null]]),
 				style: Se(e.getRowStyle ? e.getRowStyle(r) : null),
 				tabindex: "-1",
 				role: "row",
 				"aria-rowindex": s,
 				"data-row-index": s,
+				"data-active-row": s === m.value || void 0,
 				onClick: (e) => a("rowClick", {
 					originalEvent: e,
 					data: r,
@@ -8334,6 +8336,7 @@ var Am = { class: "text-body-large" }, jm = {
 	key: 1,
 	class: "flex flex-col gap-[0.5rem] pb-[1.25rem] h-[22.75rem]"
 }, Gm = { class: "h-[4rem] flex justify-between items-center pl-[3.5rem] pr-[3.875rem] shrink-0 border-b border-outline/16" }, Km = 1900, qm = 2100, Jm = /* @__PURE__ */ A({
+	inheritAttrs: !1,
 	__name: "UIDatePicker",
 	props: /*@__PURE__*/ j({
 		label: {},
@@ -8344,97 +8347,96 @@ var Am = { class: "text-body-large" }, jm = {
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = B(e, "modelValue"), n = $.now().startOf("day"), r = w(() => $.fromISO(t.value)), i = F(r.value.isValid ? r.value.startOf("month") : $.now().startOf("month")), a = F("calendar");
-		function o(e) {
-			i.value = i.value.set({ month: e }), a.value = "calendar";
-		}
+		let t = Pe(), n = B(e, "modelValue"), r = $.now().startOf("day"), i = w(() => $.fromISO(n.value)), a = F(i.value.isValid ? i.value.startOf("month") : $.now().startOf("month")), o = F("calendar");
 		function s(e) {
-			i.value = i.value.set({ year: e }), a.value = "calendar";
+			a.value = a.value.set({ month: e }), o.value = "calendar";
 		}
-		let c = w(() => ({
-			month: i.value.month,
-			year: i.value.year,
-			interval: Dp.fromDateTimes(i.value.startOf("month").startOf("week"), i.value.endOf("month").endOf("week"))
+		function c(e) {
+			a.value = a.value.set({ year: e }), o.value = "calendar";
+		}
+		let l = w(() => ({
+			month: a.value.month,
+			year: a.value.year,
+			interval: Dp.fromDateTimes(a.value.startOf("month").startOf("week"), a.value.endOf("month").endOf("week"))
 		}));
-		function* l(e) {
+		function* u(e) {
 			if (!e.start || !e.end) return;
 			let t = e.start.startOf("day");
 			for (; t < e.end;) yield t, t = t.plus({ days: 1 });
 		}
-		let u = w(() => {
+		let d = w(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of l(c.value.interval)) {
+			for (let t of u(l.value.interval)) {
 				let n = e.getOrInsert(t.weekNumber, []);
 				n[t.weekday - 1] = t;
 			}
 			return [...e.values()];
-		}), d = Op.months("short"), f = w(() => {
+		}), f = Op.months("short"), p = w(() => {
 			let e = [];
 			for (let t = Km; t < qm; t++) e.push(t);
 			return e;
-		}), p = w(() => a.value === "month" ? Op.months().map((e, t) => ({
+		}), m = w(() => o.value === "month" ? Op.months().map((e, t) => ({
 			label: e,
 			value: t + 1
-		})) : f.value.map((e) => ({
+		})) : p.value.map((e) => ({
 			label: `${e}`,
 			value: e
-		}))), m = w({
+		}))), h = w({
 			get() {
-				return a.value === "month" ? c.value.month : c.value.year;
+				return o.value === "month" ? l.value.month : l.value.year;
 			},
 			set(e) {
-				if (a.value === "month") return o(e);
-				s(e);
+				if (o.value === "month") return s(e);
+				c(e);
 			}
-		}), h = Le("pickerDialog"), g = !1;
-		function _() {
-			if (g) {
-				g = !1;
+		}), g = Le("pickerDialog"), _ = !1;
+		function v() {
+			if (_) {
+				_ = !1;
 				return;
 			}
-			h.value?.show();
+			g.value?.show();
 		}
-		function v() {
-			g = !0, h.value?.close(), Promise.resolve().then(() => {
-				g = !1;
+		function y() {
+			_ = !0, g.value?.close(), Promise.resolve().then(() => {
+				_ = !1;
 			});
 		}
-		function y() {
-			h.value?.open && v();
+		function ee() {
+			g.value?.open && y();
 		}
 		bt(document, "keydown", (e) => {
-			e.key === "Escape" && y();
+			e.key === "Escape" && ee();
 		});
-		function ee() {
-			h.value?.open && v();
+		function b() {
+			g.value?.open && y();
 		}
-		let b = Le("rootRef");
-		ut(b, () => {
-			h.value?.open && v();
+		let x = Le("rootRef");
+		ut(x, () => {
+			g.value?.open && y();
 		});
-		function x(e) {
-			t.value = e.toISO() || "", v();
+		function te(e) {
+			n.value = e.toISO() || "", y();
 		}
-		let te = w(() => r.value.isValid ? r.value.toLocaleString() : "");
-		function ne(e) {
-			let t = e.hasSame(n, "day"), i = e.hasSame(r.value, "day"), a = e.month === c.value.month;
+		let ne = w(() => i.value.isValid ? i.value.toLocaleString() : "");
+		function re(e) {
+			let t = e.hasSame(r, "day"), n = e.hasSame(i.value, "day"), a = e.month === l.value.month;
 			return {
-				"text-primary border border-primary hover:bg-primary/8": t && !i,
-				"bg-primary text-on-primary hover:bg-[color-mix(in_oklab,var(--color-primary),rgba(from_var(--color-on-primary)_r_g_b/8%))]": i,
-				"hover:bg-on-surface-variant/8": a && !i
+				"text-primary border border-primary hover:bg-primary/8": t && !n,
+				"bg-primary text-on-primary hover:bg-[color-mix(in_oklab,var(--color-primary),rgba(from_var(--color-on-primary)_r_g_b/8%))]": n,
+				"hover:bg-on-surface-variant/8": a && !n
 			};
 		}
-		return (t, n) => (P(), D("div", {
+		return (n, r) => (P(), D("div", {
 			ref_key: "rootRef",
-			ref: b,
+			ref: x,
 			class: "relative"
-		}, [k(Ia, {
+		}, [k(Ia, M({
 			color: e.color,
 			label: e.label,
-			"model-value": te.value,
-			"trailing-icon": z(Dt),
-			onFocus: _
-		}, null, 8, [
+			"model-value": ne.value,
+			"trailing-icon": z(Dt)
+		}, z(t), { onFocus: v }), null, 16, [
 			"color",
 			"label",
 			"model-value",
@@ -8442,51 +8444,51 @@ var Am = { class: "text-body-large" }, jm = {
 		]), O("dialog", {
 			ref: "pickerDialog",
 			class: "select-none absolute top-full left-0 bg-surface-container-high rounded-extra-large z-5 w-[22.5rem] min-h-[22.75rem]",
-			onClose: ee
-		}, [a.value === "calendar" ? (P(), D("div", Rm, [O("div", zm, [k(Mm, {
-			label: z(d)[c.value.month - 1] ?? "??",
-			onMoveLeft: n[0] ||= (e) => o(c.value.month - 1),
-			onMoveRight: n[1] ||= (e) => o(c.value.month + 1),
-			onOpen: n[2] ||= (e) => a.value = "month"
+			onClose: b
+		}, [o.value === "calendar" ? (P(), D("div", Rm, [O("div", zm, [k(Mm, {
+			label: z(f)[l.value.month - 1] ?? "??",
+			onMoveLeft: r[0] ||= (e) => s(l.value.month - 1),
+			onMoveRight: r[1] ||= (e) => s(l.value.month + 1),
+			onOpen: r[2] ||= (e) => o.value = "month"
 		}, null, 8, ["label"]), k(Mm, {
-			label: `${c.value.year}`,
-			onMoveLeft: n[3] ||= (e) => s(c.value.year - 1),
-			onMoveRight: n[4] ||= (e) => s(c.value.year + 1),
-			onOpen: n[5] ||= (e) => a.value = "year"
+			label: `${l.value.year}`,
+			onMoveLeft: r[3] ||= (e) => c(l.value.year - 1),
+			onMoveRight: r[4] ||= (e) => c(l.value.year + 1),
+			onOpen: r[5] ||= (e) => o.value = "year"
 		}, null, 8, ["label"])]), O("div", Bm, [O("div", Vm, [(P(!0), D(C, null, I(z(Op).weekdays("short"), (e) => (P(), D("div", {
 			key: e,
 			class: "p-[0.25rem] size-[3rem]"
-		}, [O("div", Hm, R(e), 1)]))), 128)), (P(!0), D(C, null, I(u.value, (e, t) => (P(), D(C, { key: t }, [(P(!0), D(C, null, I(e, (e) => (P(), D("div", {
+		}, [O("div", Hm, R(e), 1)]))), 128)), (P(!0), D(C, null, I(d.value, (e, t) => (P(), D(C, { key: t }, [(P(!0), D(C, null, I(e, (e) => (P(), D("div", {
 			key: `${t}-${e.day}`,
-			class: N(["p-[0.25rem] size-[3rem] cursor-pointer", { "opacity-38 hover:opacity-100": e.month !== c.value.month }])
+			class: N(["p-[0.25rem] size-[3rem] cursor-pointer", { "opacity-38 hover:opacity-100": e.month !== l.value.month }])
 		}, [O("div", {
-			class: N(["size-[2.5rem] inline-flex justify-center items-center rounded-full", ne(e)]),
-			onClick: (t) => x(e)
-		}, R(e.day), 11, Um)], 2))), 128))], 64))), 128))])])])) : a.value === "month" || a.value === "year" ? (P(), D("div", Wm, [O("div", Gm, [k(Mm, {
-			label: z(d)[c.value.month - 1] ?? "??",
+			class: N(["size-[2.5rem] inline-flex justify-center items-center rounded-full", re(e)]),
+			onClick: (t) => te(e)
+		}, R(e.day), 11, Um)], 2))), 128))], 64))), 128))])])])) : o.value === "month" || o.value === "year" ? (P(), D("div", Wm, [O("div", Gm, [k(Mm, {
+			label: z(f)[l.value.month - 1] ?? "??",
 			"show-arrows": !1,
-			"show-dropdown": a.value === "month",
-			disabled: a.value === "year",
-			onOpen: n[6] ||= (e) => a.value = "calendar"
+			"show-dropdown": o.value === "month",
+			disabled: o.value === "year",
+			onOpen: r[6] ||= (e) => o.value = "calendar"
 		}, null, 8, [
 			"label",
 			"show-dropdown",
 			"disabled"
 		]), k(Mm, {
-			label: `${c.value.year}`,
+			label: `${l.value.year}`,
 			"show-arrows": !1,
-			"show-dropdown": a.value === "year",
-			disabled: a.value === "month",
-			onOpen: n[7] ||= (e) => a.value = "calendar"
+			"show-dropdown": o.value === "year",
+			disabled: o.value === "month",
+			onOpen: r[7] ||= (e) => o.value = "calendar"
 		}, null, 8, [
 			"label",
 			"show-dropdown",
 			"disabled"
 		])]), k(Lm, {
-			modelValue: m.value,
-			"onUpdate:modelValue": n[8] ||= (e) => m.value = e,
-			list: p.value,
-			"big-row": a.value === "month"
+			modelValue: h.value,
+			"onUpdate:modelValue": r[8] ||= (e) => h.value = e,
+			list: m.value,
+			"big-row": o.value === "month"
 		}, null, 8, [
 			"modelValue",
 			"list",