@well-insight/ui 0.1.7 → 0.1.9

package/dist/switch/style.js

@@ -0,0 +1,3 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Switch/styles.css'

package/dist/table/index.js

@@ -0,0 +1,508 @@
+import { t as e } from "../Icon-B6gOD07E.js";
+import { t } from "../Checkbox-BtgWgkHI.js";
+import { t as n } from "../Pagination-C-F_ZDXr.js";
+import { t as r } from "../Renderable-IhqISc5E.js";
+import { t as i } from "../ProgressSpinner-YThgaSzb.js";
+import { o as a } from "../config-DWwce9jA.js";
+import { n as o, t as s } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as ee, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as te, onMounted as ne, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, watch as w, withModifiers as T } from "vue";
+function E(e) {
+	if (e == null || e === "") return;
+	if (typeof e == "number") return Number.isFinite(e) ? e : void 0;
+	let t = Number.parseFloat(e);
+	return Number.isFinite(t) ? t : void 0;
+}
+function re(e, t, n = {}) {
+	let r = n.fit !== !1, i = [];
+	n.selection && i.push({
+		key: "__selection__",
+		width: 48,
+		minWidth: 48,
+		realWidth: 48,
+		isSelection: !0,
+		fixed: "left"
+	}), n.expand && i.push({
+		key: "__expand__",
+		width: 40,
+		minWidth: 40,
+		realWidth: 40,
+		isExpand: !0,
+		fixed: "left"
+	});
+	for (let t of e) {
+		let e = E(t.width), n = E(t.minWidth) ?? 80;
+		i.push({
+			key: t.key,
+			width: e,
+			minWidth: n,
+			realWidth: e ?? n,
+			fixed: t.fixed
+		});
+	}
+	let a = i.filter((e) => e.width == null && !e.isSelection && !e.isExpand), o = 0;
+	if (a.length > 0 && r) {
+		if (i.forEach((e) => {
+			o += e.width ?? e.minWidth;
+		}), o <= t) {
+			let e = t - o;
+			if (a.length === 1) a[0].realWidth = a[0].minWidth + e;
+			else {
+				let t = e / a.reduce((e, t) => e + t.minWidth, 0), n = 0;
+				a.forEach((e, r) => {
+					if (r === 0) return;
+					let i = Math.floor(e.minWidth * t);
+					n += i, e.realWidth = e.minWidth + i;
+				}), a[0].realWidth = a[0].minWidth + e - n;
+			}
+			return {
+				columns: i,
+				bodyWidth: Math.max(o, t),
+				scrollX: !1
+			};
+		}
+		return a.forEach((e) => {
+			e.realWidth = e.minWidth;
+		}), {
+			columns: i,
+			bodyWidth: Math.max(o, t),
+			scrollX: !0
+		};
+	}
+	return i.forEach((e) => {
+		e.realWidth = e.width ?? e.minWidth, o += e.realWidth;
+	}), {
+		columns: i,
+		bodyWidth: o,
+		scrollX: o > t
+	};
+}
+function ie(e) {
+	let t = {}, n = {}, r = 0;
+	for (let n of e) n.fixed === "left" && (t[n.key] = r, r += n.realWidth);
+	let i = 0;
+	for (let t = e.length - 1; t >= 0; --t) {
+		let r = e[t];
+		r.fixed === "right" && (n[r.key] = i, i += r.realWidth);
+	}
+	return {
+		left: t,
+		right: n
+	};
+}
+//#endregion
+//#region src/components/Table/Table.vue?vue&type=script&setup=true&lang.ts
+var ae = ["aria-sort"], oe = { class: "wi-table__th-inner" }, se = ["onClick"], ce = {
+	class: "wi-table__sort-icon",
+	"aria-hidden": "true"
+}, le = { key: 1 }, ue = {
+	key: 2,
+	class: "wi-table__filter"
+}, de = [
+	"aria-expanded",
+	"aria-label",
+	"onClick"
+], fe = ["value", "onChange"], pe = { value: "" }, me = ["value"], he = [
+	"value",
+	"placeholder",
+	"onInput"
+], ge = ["onClick"], _e = [
+	"aria-expanded",
+	"aria-label",
+	"onClick"
+], ve = { key: 0 }, ye = ["colspan"], be = { key: 0 }, xe = ["colspan"], Se = { class: "wi-table__empty-content" }, Ce = { class: "wi-table__empty-title" }, we = {
+	key: 0,
+	class: "wi-table__empty-desc"
+}, Te = {
+	key: 0,
+	class: "wi-table__paginator"
+}, Ee = ["aria-label"], De = { class: "wi-table__loading-text" }, D = /* @__PURE__ */ h({
+	__name: "Table",
+	props: {
+		columns: {},
+		rows: {},
+		rowKey: { default: "id" },
+		emptyText: { default: void 0 },
+		emptyDescription: {},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingText: { default: void 0 },
+		size: {},
+		sortField: {},
+		sortOrder: {},
+		sortMode: { default: "client" },
+		fit: {
+			type: Boolean,
+			default: !0
+		},
+		striped: {
+			type: Boolean,
+			default: !1
+		},
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		highlightCurrent: {
+			type: Boolean,
+			default: !1
+		},
+		rowHover: {
+			type: Boolean,
+			default: !0
+		},
+		selectionMode: {},
+		selection: {},
+		filters: { default: () => ({}) },
+		paginator: {
+			type: Boolean,
+			default: !1
+		},
+		rowsPerPage: { default: 10 },
+		page: { default: 1 },
+		expandable: {
+			type: Boolean,
+			default: !1
+		},
+		expandedRowKeys: {},
+		rowExpandable: {}
+	},
+	emits: [
+		"update:sortField",
+		"update:sortOrder",
+		"sort",
+		"update:selection",
+		"update:filters",
+		"filter",
+		"update:page",
+		"page",
+		"row-click",
+		"current-change",
+		"update:expandedRowKeys",
+		"expand"
+	],
+	setup(h, { emit: E }) {
+		let D = h, O = E, k = o(), Oe = a("Table", () => D.size), ke = l(() => D.emptyText ?? k.value.emptyMessage), A = l(() => D.loadingText ?? k.value.loading), j = y(D.sortField), M = y(R(D.sortOrder)), N = y({ ...D.filters }), P = y(D.page), F = y([...D.expandedRowKeys ?? []]), I = y(null), L = y(null);
+		w(() => D.sortField, (e) => {
+			j.value = e;
+		}), w(() => D.sortOrder, (e) => {
+			M.value = R(e);
+		}), w(() => D.filters, (e) => {
+			N.value = { ...e };
+		}, { deep: !0 }), w(() => D.page, (e) => {
+			P.value = e;
+		}), w(() => D.expandedRowKeys, (e) => {
+			e && (F.value = [...e]);
+		});
+		function R(e) {
+			return e === 1 || e === "asc" ? "asc" : e === -1 || e === "desc" ? "desc" : null;
+		}
+		function Ae(e) {
+			return e === "asc" || e === 1 ? 1 : e === "desc" || e === -1 ? -1 : 0;
+		}
+		function z(e, t) {
+			return e[D.rowKey] ?? t;
+		}
+		let B = y(null), V = y(0), H = null;
+		ne(() => {
+			let e = B.value;
+			if (!e) return;
+			let t = () => {
+				V.value = e.clientWidth;
+			};
+			t(), H = new ResizeObserver(t), H.observe(e);
+		}), te(() => {
+			H?.disconnect(), H = null;
+		});
+		let U = l(() => re(D.columns, V.value || 0, {
+			fit: D.fit,
+			selection: !!D.selectionMode,
+			expand: D.expandable
+		})), je = l(() => new Map(U.value.columns.map((e) => [e.key, e]))), W = l(() => ie(U.value.columns)), Me = l(() => {
+			if (U.value.scrollX) return {
+				width: `${U.value.bodyWidth}px`,
+				minWidth: "100%"
+			};
+		});
+		function G(e) {
+			let t = je.value.get(e.key)?.realWidth, n = {};
+			if (t != null && (n.width = `${t}px`, n.minWidth = `${t}px`), e.fixed === "left") {
+				let t = W.value.left[e.key];
+				t != null && (n.left = `${t}px`);
+			}
+			if (e.fixed === "right") {
+				let t = W.value.right[e.key];
+				t != null && (n.right = `${t}px`);
+			}
+			return Object.keys(n).length ? n : void 0;
+		}
+		function K() {
+			let e = W.value.left.__selection__;
+			return {
+				width: "48px",
+				minWidth: "48px",
+				left: e == null ? "0" : `${e}px`
+			};
+		}
+		function Ne() {
+			let e = W.value.left.__expand__;
+			return {
+				width: "40px",
+				minWidth: "40px",
+				left: e == null ? void 0 : `${e}px`
+			};
+		}
+		let Pe = l(() => {
+			let e = Object.entries(N.value).filter(([, e]) => e != null && e !== "");
+			return e.length ? D.rows.filter((t) => e.every(([e, n]) => {
+				let r = t[e];
+				return typeof n == "string" ? String(r ?? "").toLowerCase().includes(n.toLowerCase()) : r === n;
+			})) : D.rows;
+		}), q = l(() => {
+			let e = j.value, t = Ae(M.value);
+			return D.sortMode === "emit" || !e || !t ? Pe.value : [...Pe.value].sort((n, r) => {
+				let i = n[e], a = r[e];
+				return i == null && a == null ? 0 : i == null ? -1 * t : a == null ? 1 * t : typeof i == "number" && typeof a == "number" ? (i - a) * t : String(i).localeCompare(String(a), void 0, { numeric: !0 }) * t;
+			});
+		}), Fe = l(() => q.value.length), J = l(() => {
+			if (!D.paginator) return q.value;
+			let e = D.rowsPerPage, t = (P.value - 1) * e;
+			return q.value.slice(t, t + e);
+		}), Ie = l(() => !D.loading && J.value.length === 0), Le = l(() => D.columns.length + +!!D.selectionMode + +!!D.expandable), Y = l(() => D.selectionMode ? D.selectionMode === "multiple" ? Array.isArray(D.selection) ? D.selection : [] : D.selection && !Array.isArray(D.selection) ? [D.selection] : [] : []), X = l(() => D.selectionMode !== "multiple" || !J.value.length ? !1 : J.value.every((e, t) => Y.value.some((n) => z(n, -1) === z(e, t))));
+		function Z(e, t) {
+			let n = z(e, t);
+			return Y.value.some((e) => z(e, -1) === n);
+		}
+		function Re(e, t) {
+			if (!D.selectionMode) return;
+			if (D.selectionMode === "single") {
+				let n = Z(e, t) ? null : e;
+				O("update:selection", n);
+				return;
+			}
+			let n = z(e, t), r = Y.value.some((e) => z(e, -1) === n) ? Y.value.filter((e) => z(e, -1) !== n) : [...Y.value, e];
+			O("update:selection", r);
+		}
+		function ze() {
+			if (D.selectionMode === "multiple") {
+				if (X.value) {
+					let e = new Set(J.value.map((e, t) => z(e, t)));
+					O("update:selection", Y.value.filter((t) => !e.has(z(t, -1))));
+				} else {
+					let e = new Map(Y.value.map((e) => [z(e, -1), e]));
+					J.value.forEach((t, n) => e.set(z(t, n), t)), O("update:selection", [...e.values()]);
+				}
+			}
+		}
+		function Be(e, t) {
+			if (!t) return;
+			let n = e, r = "asc";
+			j.value === e && (M.value === "asc" ? r = "desc" : M.value === "desc" && (n = void 0, r = null)), j.value = n, M.value = r, O("update:sortField", n), O("update:sortOrder", r), O("sort", {
+				sortField: n,
+				sortOrder: r
+			});
+		}
+		function Ve(e) {
+			return j.value === e ? M.value === "asc" ? "↑" : M.value === "desc" ? "↓" : "↕" : "↕";
+		}
+		function He(e, t) {
+			let n = {
+				...N.value,
+				[e]: t === "" ? void 0 : t
+			};
+			n[e] ?? delete n[e], N.value = n, O("update:filters", n), O("filter", n), P.value = 1, O("update:page", 1), O("page", 1);
+		}
+		function Ue(e) {
+			P.value = e, O("update:page", e), O("page", e);
+		}
+		function We(e, t) {
+			O("row-click", {
+				row: e,
+				index: t
+			}), D.highlightCurrent && (I.value = z(e, t), O("current-change", e));
+		}
+		function Ge(e) {
+			return D.expandable ? !D.rowExpandable || D.rowExpandable(e) : !1;
+		}
+		function Q(e, t) {
+			return F.value.includes(z(e, t));
+		}
+		function Ke(e, t) {
+			if (!Ge(e)) return;
+			let n = z(e, t), r = F.value.includes(n);
+			F.value = r ? F.value.filter((e) => e !== n) : [...F.value, n], O("update:expandedRowKeys", F.value), O("expand", {
+				row: e,
+				expanded: !r
+			});
+		}
+		function $(e) {
+			if (e.fixed) return `wi-table__cell--fixed-${e.fixed}`;
+		}
+		return (a, o) => (v(), f("div", { class: g(["wi-table-wrapper", [{
+			"wi-table-wrapper--loading": h.loading,
+			"wi-table-wrapper--bordered": h.bordered,
+			"wi-table-wrapper--striped": h.striped,
+			"wi-table-wrapper--row-hover": h.rowHover
+		}]]) }, [
+			p("div", {
+				ref_key: "scrollRef",
+				ref: B,
+				class: g(["wi-table-scroll", { "wi-table-scroll--x": U.value.scrollX }])
+			}, [p("table", {
+				class: g(["wi-table", `wi-table--${C(Oe)}`]),
+				style: _(Me.value)
+			}, [
+				p("colgroup", null, [(v(!0), f(c, null, b(U.value.columns, (e) => (v(), f("col", {
+					key: e.key,
+					style: _({ width: `${e.realWidth}px` })
+				}, null, 4))), 128))]),
+				p("thead", null, [p("tr", null, [
+					h.selectionMode ? (v(), f("th", {
+						key: 0,
+						class: "wi-table__selection wi-table__cell--fixed-left",
+						scope: "col",
+						style: _(K())
+					}, [h.selectionMode === "multiple" ? (v(), u(t, {
+						key: 0,
+						"model-value": X.value,
+						"aria-label": C(k).selectAllPage,
+						"onUpdate:modelValue": ze
+					}, null, 8, ["model-value", "aria-label"])) : d("", !0)], 4)) : d("", !0),
+					h.expandable ? (v(), f("th", {
+						key: 1,
+						class: "wi-table__expand wi-table__cell--fixed-left",
+						scope: "col",
+						style: _(Ne())
+					}, null, 4)) : d("", !0),
+					(v(!0), f(c, null, b(h.columns, (t) => (v(), f("th", {
+						key: t.key,
+						scope: "col",
+						class: g([
+							`wi-table__cell--${t.align ?? "start"}`,
+							$(t),
+							{ "wi-table__th--sortable": t.sortable }
+						]),
+						style: _(G(t)),
+						"aria-sort": t.sortable && j.value === t.key ? M.value === "asc" ? "ascending" : M.value === "desc" ? "descending" : "none" : t.sortable ? "none" : void 0
+					}, [p("div", oe, [t.sortable ? (v(), f("button", {
+						key: 0,
+						type: "button",
+						class: "wi-table__sort",
+						onClick: (e) => Be(t.key, !0)
+					}, [p("span", null, S(t.label), 1), p("span", ce, S(Ve(t.key)), 1)], 8, se)) : (v(), f("span", le, S(t.label), 1)), t.filterable ? (v(), f("div", ue, [p("button", {
+						type: "button",
+						class: "wi-table__filter-btn",
+						"aria-expanded": L.value === t.key,
+						"aria-label": C(s)(C(k).filterColumn, { label: t.label }),
+						onClick: T((e) => L.value = L.value === t.key ? null : t.key, ["stop"])
+					}, [m(e, {
+						name: "filter",
+						size: "sm"
+					})], 8, de), L.value === t.key ? (v(), f("div", {
+						key: 0,
+						class: "wi-table__filter-panel",
+						onClick: o[0] ||= T(() => {}, ["stop"])
+					}, [t.filters?.length ? (v(), f("select", {
+						key: 0,
+						class: "wi-table__filter-control",
+						value: String(N.value[t.key] ?? ""),
+						onChange: (e) => He(t.key, e.target.value || null)
+					}, [p("option", pe, S(C(k).filterAll), 1), (v(!0), f(c, null, b(t.filters, (e) => (v(), f("option", {
+						key: String(e.value),
+						value: String(e.value ?? "")
+					}, S(e.label), 9, me))), 128))], 40, fe)) : (v(), f("input", {
+						key: 1,
+						class: "wi-table__filter-control",
+						type: "search",
+						value: String(N.value[t.key] ?? ""),
+						placeholder: C(k).filterOptions,
+						onInput: (e) => He(t.key, e.target.value)
+					}, null, 40, he))])) : d("", !0)])) : d("", !0)])], 14, ae))), 128))
+				])]),
+				p("tbody", null, [(v(!0), f(c, null, b(J.value, (e, n) => (v(), f(c, { key: String(z(e, n)) }, [p("tr", {
+					class: g({
+						"wi-table__row--selected": Z(e, n),
+						"wi-table__row--current": h.highlightCurrent && I.value === z(e, n)
+					}),
+					onClick: (t) => We(e, n)
+				}, [
+					h.selectionMode ? (v(), f("td", {
+						key: 0,
+						class: "wi-table__selection wi-table__cell--fixed-left",
+						style: _(K()),
+						onClick: o[1] ||= T(() => {}, ["stop"])
+					}, [m(t, {
+						"model-value": Z(e, n),
+						"aria-label": C(s)(C(k).selectRow, { index: n + 1 }),
+						"onUpdate:modelValue": (t) => Re(e, n)
+					}, null, 8, [
+						"model-value",
+						"aria-label",
+						"onUpdate:modelValue"
+					])], 4)) : d("", !0),
+					h.expandable ? (v(), f("td", {
+						key: 1,
+						class: "wi-table__expand wi-table__cell--fixed-left",
+						style: _(Ne()),
+						onClick: o[2] ||= T(() => {}, ["stop"])
+					}, [Ge(e) ? (v(), f("button", {
+						key: 0,
+						type: "button",
+						class: "wi-table__expand-btn",
+						"aria-expanded": Q(e, n),
+						"aria-label": Q(e, n) ? C(k).collapse : C(k).expand,
+						onClick: (t) => Ke(e, n)
+					}, S(Q(e, n) ? "▾" : "▸"), 9, _e)) : d("", !0)], 4)) : d("", !0),
+					(v(!0), f(c, null, b(h.columns, (t) => (v(), f("td", {
+						key: t.key,
+						class: g([`wi-table__cell--${t.align ?? "start"}`, $(t)]),
+						style: _(G(t))
+					}, [x(a.$slots, "body-cell", {
+						row: e,
+						column: t,
+						value: e[t.key]
+					}, () => [x(a.$slots, `cell-${t.key}`, {
+						row: e,
+						value: e[t.key]
+					}, () => [t.render ? (v(), u(C(r), {
+						key: 0,
+						value: t.render(e, t)
+					}, null, 8, ["value"])) : (v(), f(c, { key: 1 }, [ee(S(e[t.key]), 1)], 64))])])], 6))), 128))
+				], 10, ge), h.expandable && Q(e, n) ? (v(), f("tr", ve, [p("td", {
+					class: "wi-table__expansion",
+					colspan: Le.value
+				}, [x(a.$slots, "expansion", { row: e })], 8, ye)])) : d("", !0)], 64))), 128)), Ie.value ? (v(), f("tr", be, [p("td", {
+					class: "wi-table__empty",
+					colspan: Le.value
+				}, [x(a.$slots, "empty", {}, () => [p("div", Se, [
+					o[3] ||= p("div", {
+						class: "wi-table__empty-glyph",
+						"aria-hidden": "true"
+					}, "∅", -1),
+					p("p", Ce, S(ke.value), 1),
+					h.emptyDescription ? (v(), f("p", we, S(h.emptyDescription), 1)) : d("", !0)
+				])])], 8, xe)])) : d("", !0)])
+			], 6)], 2),
+			h.paginator ? (v(), f("div", Te, [m(n, {
+				"model-value": P.value,
+				"total-records": Fe.value,
+				rows: h.rowsPerPage,
+				"onUpdate:modelValue": Ue
+			}, null, 8, [
+				"model-value",
+				"total-records",
+				"rows"
+			])])) : d("", !0),
+			h.loading ? (v(), f("div", {
+				key: 1,
+				class: "wi-table__loading",
+				role: "status",
+				"aria-label": A.value
+			}, [x(a.$slots, "loading", {}, () => [m(i), p("span", De, S(A.value), 1)])], 8, Ee)) : d("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { D as WiTable };