@icc-grow/web-components 1.0.0

package/dist/es/components/i-switch/src/switch.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,77 @@
+import { useFormItemA11y as e } from "../../i-form-item/src/useFormItemA11y.mjs";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, unref as l } from "vue";
+//#region src/components/i-switch/src/switch.vue?vue&type=script&setup=true&lang.ts
+var u = [
+	"id",
+	"name",
+	"disabled",
+	"checked",
+	"value",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], d = /* @__PURE__ */ a({
+	name: "i-switch",
+	__name: "switch",
+	props: {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: void 0
+		},
+		trueValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: !0
+		},
+		falseValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		validateEvent: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(a, { emit: d }) {
+		let f = a, p = d, { formItemContext: m, inputId: h, isRequired: g, isError: _, ariaDescribedby: v } = e(), y = t(() => h.value), b = t(() => f.modelValue === f.trueValue), x = t(() => f.disabled), S = t(() => [x.value ? "is-disabled cursor-not-allowed" : "cursor-pointer", b.value ? "is-checked" : ""]), C = t(() => [x.value ? "is-disabled" : "", b.value ? "is-checked" : ""]), w = t(() => x.value ? "bg-black-5" : b.value ? "bg-primary" : "bg-primary-20"), T = t(() => [b.value ? "translate-x-[12px]" : "", x.value ? "bg-white" : ""]), E = t(() => [x.value ? "text-black-30" : "text-black-80"]);
+		function D(e) {
+			if (x.value) return;
+			let t = e.target.checked ? f.trueValue : f.falseValue;
+			p("update:modelValue", t), p("change", t), f.validateEvent && m?.validate("change");
+		}
+		return (e, t) => (s(), r("label", { class: o(["i-switch group inline-flex items-center select-none box-border", S.value]) }, [i("span", { class: o(["i-switch__input relative inline-flex shrink-0 box-border", C.value]) }, [i("input", {
+			id: l(h),
+			name: y.value,
+			type: "checkbox",
+			class: "absolute opacity-0 w-0 h-0 m-0 z-[-1]",
+			disabled: x.value,
+			checked: b.value,
+			value: a.trueValue,
+			"aria-invalid": l(_) ? "true" : void 0,
+			"aria-required": l(g) ? "true" : void 0,
+			"aria-describedby": l(v),
+			onChange: D
+		}, null, 40, u), i("span", { class: o(["i-switch__core relative inline-flex w-28 h-16 rounded-full border border-solid box-border transition-all duration-200", w.value]) }, [i("span", { class: o(["i-switch__thumb absolute top-1 left-2 w-12 h-12 rounded-full bg-white transition-all duration-200", T.value]) }, null, 2)], 2)], 2), e.$slots.default ? (s(), r("span", {
+			key: 0,
+			class: o(["i-switch__label ml-8 text-14 leading-none", E.value])
+		}, [c(e.$slots, "default", {}, void 0, !0)], 2)) : n("", !0)], 2));
+	}
+});
+//#endregion
+export { d as default };

package/dist/es/components/i-table/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as e } from "../../utils/install.mjs";
+import "./src/types.mjs";
+import t from "./src/table2.mjs";
+//#region src/components/i-table/index.ts
+var n = e(t);
+//#endregion
+export { n as default };

package/dist/es/components/i-table/src/components/table-body.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./table-body.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                            */
+//#region src/components/i-table/src/components/table-body.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-f8fdcc4e"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-table/src/components/table-body.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,101 @@
+import e from "../../../i-checkbox/index.mjs";
+import t from "../../../i-radio/index.mjs";
+import { getCellFixedClass as n, getCellFixedStyle as r, getTableCellValue as i } from "../table-utils.mjs";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withModifiers as v } from "vue";
+//#region src/components/i-table/src/components/table-body.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "i-table__body" }, b = ["onClick"], x = {
+	key: 2,
+	class: "cell-text"
+}, S = {
+	key: 3,
+	class: "cell-text"
+}, C = {
+	key: 0,
+	class: "cell-text"
+}, w = /* @__PURE__ */ u({
+	name: "i-table-body",
+	__name: "table-body",
+	props: {
+		columns: {
+			type: Array,
+			required: !0
+		},
+		data: {
+			type: Array,
+			required: !0
+		},
+		isChecked: {
+			type: Function,
+			required: !0
+		},
+		isRadioChecked: {
+			type: Function,
+			required: !0
+		},
+		isDisabled: {
+			type: Function,
+			required: !0
+		},
+		getRowKey: {
+			type: Function,
+			required: !0
+		}
+	},
+	emits: [
+		"row-click",
+		"toggle-row",
+		"toggle-radio"
+	],
+	setup(u, { emit: w }) {
+		let T = u, E = w;
+		function D(e) {
+			return { "is-selected": T.isChecked(e) || T.isRadioChecked(e) };
+		}
+		function O(e, t) {
+			return i(e, t) ?? "";
+		}
+		function k(e, t) {
+			let n = T.getRowKey(e);
+			return typeof n == "object" ? t : n;
+		}
+		function A(e, t, n) {
+			E("row-click", e, t, n);
+		}
+		return (i, w) => (p(), c("tbody", y, [(p(!0), c(a, null, m(u.data, (y, T) => (p(), c("tr", {
+			key: k(y, T),
+			class: d(["i-table__row", D(y)])
+		}, [(p(!0), c(a, null, m(u.columns, (m, E) => (p(), c("td", {
+			key: E,
+			class: d(["i-table__cell h-50 px-15 py-0 border-0 !border-b border-solid !border-black-5 box-border align-middle text-left", _(n)(m)]),
+			style: f(_(r)(m)),
+			onClick: (e) => A(y, m, e)
+		}, [m.type === "selection" ? (p(), o(_(e), {
+			key: 0,
+			"model-value": u.isChecked(y),
+			disabled: u.isDisabled(y, T),
+			onClick: w[0] ||= v(() => {}, ["stop"]),
+			"onUpdate:modelValue": (e) => i.$emit("toggle-row", y)
+		}, null, 8, [
+			"model-value",
+			"disabled",
+			"onUpdate:modelValue"
+		])) : m.type === "radio" ? (p(), o(_(t), {
+			key: 1,
+			"model-value": u.isRadioChecked(y),
+			value: !0,
+			disabled: u.isDisabled(y, T),
+			onClick: w[1] ||= v(() => {}, ["stop"]),
+			"onUpdate:modelValue": (e) => i.$emit("toggle-radio", y)
+		}, null, 8, [
+			"model-value",
+			"disabled",
+			"onUpdate:modelValue"
+		])) : m.type === "index" ? (p(), c("span", x, g(T + 1), 1)) : m.prop ? (p(), c("span", S, [h(i.$slots, m.prop, {
+			row: y,
+			column: m,
+			index: T
+		}, () => [m.formatter ? (p(), c(a, { key: 0 }, [l(g(m.formatter(y, m, O(y, m), T)), 1)], 64)) : (p(), c(a, { key: 1 }, [l(g(O(y, m)), 1)], 64))], !0)])) : (p(), c(a, { key: 4 }, [m.formatter ? (p(), c("span", C, g(m.formatter(y, m, void 0, T)), 1)) : s("", !0)], 64))], 14, b))), 128))], 2))), 128))]));
+	}
+});
+//#endregion
+export { w as default };

package/dist/es/components/i-table/src/components/table-footer.mjs

@@ -0,0 +1,5 @@
+import e from "./table-footer.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/i-table/src/components/table-footer.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/components/i-table/src/components/table-footer.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,52 @@
+import { getCellFixedClass as e, getCellFixedStyle as t, getTableCellValue as n } from "../table-utils.mjs";
+import { Fragment as r, computed as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, toDisplayString as f, unref as p } from "vue";
+//#region src/components/i-table/src/components/table-footer.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "i-table__footer" }, h = /* @__PURE__ */ s({
+	name: "i-table-footer",
+	__name: "table-footer",
+	props: {
+		columns: {
+			type: Array,
+			required: !0
+		},
+		data: {
+			type: Array,
+			required: !0
+		},
+		summaryMethod: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(s) {
+		let h = s, g = i(() => {
+			if (h.summaryMethod) return h.summaryMethod({
+				columns: h.columns,
+				data: h.data
+			});
+			let e = [];
+			return h.columns.forEach((t, r) => {
+				if (r === 0 && h.columns.length > 1) {
+					e[r] = "合计";
+					return;
+				}
+				if (!t.prop) {
+					e[r] = "";
+					return;
+				}
+				let i = h.data.map((e) => Number(n(e, t)));
+				i.every((e) => isNaN(e)) ? e[r] = "" : e[r] = i.reduce((e, t) => {
+					let n = Number(t);
+					return isNaN(n) ? e : e + n;
+				}, 0);
+			}), e;
+		});
+		return (n, i) => (u(), a("tfoot", m, [o("tr", null, [(u(!0), a(r, null, d(s.columns, (n, r) => (u(), a("td", {
+			key: r,
+			class: c(["i-table__cell h-50 px-15 py-0 border-0 !border-b border-solid !border-black-5 box-border align-middle text-left text-12 font-600 text-black-70", p(e)(n)]),
+			style: l(p(t)(n))
+		}, f(g.value[r]), 7))), 128))])]));
+	}
+});
+//#endregion
+export { h as default };

package/dist/es/components/i-table/src/components/table-header.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./table-header.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                              */
+//#region src/components/i-table/src/components/table-header.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-ae052a3f"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-table/src/components/table-header.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,57 @@
+import e from "../../../i-checkbox/index.mjs";
+import { getCellFixedClass as t, getCellFixedStyle as n } from "../table-utils.mjs";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p, renderSlot as m, resolveComponent as h, toDisplayString as g, unref as _ } from "vue";
+//#region src/components/i-table/src/components/table-header.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "i-table__header" }, y = { class: "!border-t-0" }, b = ["onClick"], x = { class: "i-table__cell-content inline-flex items-center" }, S = { class: "cell-text" }, C = {
+	key: 2,
+	class: "cell-text"
+}, w = {
+	key: 3,
+	class: "i-table__sort-icons inline-flex flex-col items-center justify-center ml-6 w-14 h-14"
+}, T = /* @__PURE__ */ l({
+	name: "i-table-header",
+	__name: "table-header",
+	props: {
+		columns: {
+			type: Array,
+			required: !0
+		},
+		isAllSelected: Boolean,
+		isIndeterminate: Boolean,
+		currentSort: {
+			type: Object,
+			required: !0
+		}
+	},
+	emits: ["toggle-all", "sort-click"],
+	setup(l) {
+		return (T, E) => {
+			let D = h("i-icon");
+			return f(), o("thead", v, [s("tr", y, [(f(!0), o(r, null, p(l.columns, (r, p) => (f(), o("th", {
+				key: p,
+				class: u(["i-table__cell h-40 px-15 py-0 border-0 box-border align-middle text-left", [..._(t)(r), { "cursor-pointer select-none": r.sortable }]]),
+				style: d(_(n)(r)),
+				onClick: (e) => r.sortable ? T.$emit("sort-click", r) : void 0
+			}, [s("div", x, [r.type === "selection" ? (f(), i(_(e), {
+				key: 0,
+				"model-value": l.isAllSelected,
+				indeterminate: l.isIndeterminate,
+				"onUpdate:modelValue": E[0] ||= (e) => T.$emit("toggle-all")
+			}, null, 8, ["model-value", "indeterminate"])) : r.prop ? m(T.$slots, `header-${r.prop}`, {
+				key: 1,
+				column: r,
+				index: p
+			}, () => [s("span", S, g(r.label), 1)], !0) : (f(), o("span", C, g(r.label), 1)), r.sortable ? (f(), o("span", w, [c(D, {
+				name: "arrow-top",
+				size: 12,
+				class: u(["i-table__sort-caret block -mb-4 text-black-30", { "!text-primary": l.currentSort.prop === r.prop && l.currentSort.order === "ascending" }])
+			}, null, 8, ["class"]), c(D, {
+				name: "arrow-bottom",
+				size: 12,
+				class: u(["i-table__sort-caret block -mt-4 text-black-30", { "!text-primary": l.currentSort.prop === r.prop && l.currentSort.order === "descending" }])
+			}, null, 8, ["class"])])) : a("", !0)])], 14, b))), 128))])]);
+		};
+	}
+});
+//#endregion
+export { T as default };

package/dist/es/components/i-table/src/composables/useTableSelection.mjs

@@ -0,0 +1,116 @@
+import { getTableRowKey as e } from "../table-utils.mjs";
+import { computed as t, ref as n, watch as r } from "vue";
+//#region src/components/i-table/src/composables/useTableSelection.ts
+function i(i, a, o, s) {
+	function c(t) {
+		return e(t, i.rowKey);
+	}
+	let l = n(/* @__PURE__ */ new Set()), u = /* @__PURE__ */ new Map();
+	function d() {
+		let e = /* @__PURE__ */ new Map();
+		o.value.forEach((t) => {
+			e.set(c(t), t);
+		}), u = e;
+	}
+	function f(e) {
+		let t = c(e);
+		return o.value.findIndex((e) => c(e) === t);
+	}
+	function p() {
+		if (d(), l.value = new Set(Array.from(l.value).filter((e) => {
+			let t = u.get(e);
+			if (!t) return !1;
+			let n = f(t);
+			return n >= 0 && !g(t, n);
+		})), T.value !== null) {
+			let e = u.get(T.value), t = e ? f(e) : -1;
+			(!e || t < 0 || g(e, t)) && (T.value = null);
+		}
+	}
+	function m(e, t) {
+		let n = s.value.find((e) => e.type === "selection");
+		return n && typeof n.selectable == "function" ? !n.selectable(e, t) : !1;
+	}
+	function h(e, t) {
+		let n = s.value.find((e) => e.type === "radio");
+		return n && typeof n.selectable == "function" ? !n.selectable(e, t) : !1;
+	}
+	function g(e, t) {
+		return m(e, t) || h(e, t);
+	}
+	let _ = t(() => o.value.filter((e, t) => !m(e, t))), v = t(() => _.value.length === 0 ? !1 : _.value.every((e) => l.value.has(c(e)))), y = t(() => {
+		let e = _.value;
+		if (e.length === 0) return !1;
+		let t = e.filter((e) => l.value.has(c(e))).length;
+		return t > 0 && t < e.length;
+	});
+	function b(e, t) {
+		let n = f(e);
+		if (n >= 0 && g(e, n)) return;
+		let r = c(e), i = l.value.has(r), o = t === void 0 ? !i : t;
+		o && !i ? (l.value.add(r), u.set(r, e), a("select", S(), e, !0), a("selection-change", S())) : !o && i && (l.value.delete(r), a("select", S(), e, !1), a("selection-change", S()));
+	}
+	function x() {
+		let e = !v.value;
+		o.value.forEach((t, n) => {
+			if (!g(t, n)) {
+				let n = c(t);
+				e ? (l.value.add(n), u.set(n, t)) : l.value.delete(n);
+			}
+		}), a("select-all", S()), a("selection-change", S());
+	}
+	function S() {
+		return Array.from(l.value).map((e) => u.get(e) || e);
+	}
+	function C(e) {
+		l.value.clear(), d(), e.forEach((e) => {
+			u.has(e) && l.value.add(e);
+		}), a("selection-change", S());
+	}
+	function w() {
+		l.value.clear(), a("selection-change", S());
+	}
+	let T = n(null);
+	function E(e) {
+		let t = f(e);
+		if (t >= 0 && g(e, t)) return;
+		let n = c(e);
+		T.value = n, u.set(n, e), a("radio-change", e);
+	}
+	function D() {
+		return T.value ? u.get(T.value) || T.value : null;
+	}
+	function O(e) {
+		d(), T.value = u.has(e) ? e : null;
+	}
+	function k() {
+		T.value = null;
+	}
+	function A(e) {
+		return l.value.has(c(e));
+	}
+	function j(e) {
+		return T.value === c(e);
+	}
+	return r([o, s], () => {
+		p();
+	}, { immediate: !0 }), {
+		getRowKey: c,
+		isAllSelected: v,
+		isIndeterminate: y,
+		isRowChecked: A,
+		isRadioChecked: j,
+		isRowDisabled: g,
+		toggleRowSelection: b,
+		toggleAllSelection: x,
+		toggleRadioSelection: E,
+		getSelection: S,
+		setSelection: C,
+		clearSelection: w,
+		getSelected: D,
+		setSelected: O,
+		clearSelected: k
+	};
+}
+//#endregion
+export { i as useTableSelection };

package/dist/es/components/i-table/src/composables/useTableSort.mjs

@@ -0,0 +1,60 @@
+import { getTableCellValue as e } from "../table-utils.mjs";
+import { computed as t, ref as n } from "vue";
+//#region src/components/i-table/src/composables/useTableSort.ts
+function r(r, i) {
+	let a = n({
+		column: null,
+		prop: "",
+		order: null
+	});
+	function o(e) {
+		return a.value.prop !== (e.prop || "") || a.value.order === null ? "ascending" : a.value.order === "ascending" ? "descending" : null;
+	}
+	function s(e) {
+		if (!e.sortable) return;
+		let t = o(e);
+		a.value = {
+			column: t ? e : null,
+			prop: t && e.prop || "",
+			order: t
+		}, i("sort-change", {
+			column: e,
+			prop: e.prop || "",
+			order: t
+		});
+	}
+	function c() {
+		if (a.value.order !== null) {
+			let e = a.value.column;
+			a.value = {
+				column: null,
+				prop: "",
+				order: null
+			}, e && i("sort-change", {
+				column: e,
+				prop: e.prop || "",
+				order: null
+			});
+		}
+	}
+	function l(e, t) {
+		return e === t ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e > t ? 1 : -1 : String(e).localeCompare(String(t));
+	}
+	return {
+		currentSort: a,
+		handleSortClick: s,
+		clearSort: c,
+		sortedData: t(() => {
+			let { column: t, prop: n, order: i } = a.value;
+			if (!t || !i || t.sortable === "custom") return r.value;
+			let o = [...r.value], s = t.sortMethod;
+			return o.sort((t, r) => {
+				if (s) return i === "ascending" ? s(t, r) : -s(t, r);
+				let a = l(e(t, { prop: n }), e(r, { prop: n }));
+				return i === "ascending" ? a : -a;
+			}), o;
+		})
+	};
+}
+//#endregion
+export { r as useTableSort };

package/dist/es/components/i-table/src/composables/useTableStyle.mjs

@@ -0,0 +1,44 @@
+import { computed as e, ref as t } from "vue";
+//#region src/components/i-table/src/composables/useTableStyle.ts
+function n(n) {
+	function r(e) {
+		return typeof e == "number" ? e : typeof e == "string" && parseInt(e, 10) || 0;
+	}
+	let i = e(() => {
+		let e = -1, t = -1;
+		for (let t = 0; t < n.value.length; t++) n.value[t].fixed === "left" && (e = t);
+		for (let e = n.value.length - 1; e >= 0; e--) n.value[e].fixed === "right" && (t = e);
+		let i = [], a = 0, o = 0;
+		for (let o = 0; o < n.value.length; o++) {
+			let s = n.value[o];
+			i.push({
+				...s,
+				_index: o,
+				_leftOffset: `${a}px`,
+				_rightOffset: "0px",
+				_isLastLeftFixed: o === e,
+				_isFirstRightFixed: o === t
+			}), s.fixed === "left" && (a += r(s.width || s.minWidth));
+		}
+		for (let e = n.value.length - 1; e >= 0; e--) {
+			let t = n.value[e];
+			i[e]._rightOffset = `${o}px`, t.fixed === "right" && (o += r(t.width || t.minWidth));
+		}
+		return i;
+	}), a = t("none");
+	function o(e) {
+		let { scrollLeft: t, scrollWidth: n, clientWidth: r } = e;
+		n <= r ? a.value = "none" : t === 0 ? a.value = "left" : Math.abs(n - t - r) < 2 ? a.value = "right" : a.value = "middle";
+	}
+	function s(e) {
+		o(e.target);
+	}
+	return {
+		resolvedColumns: i,
+		scrollState: a,
+		handleScroll: s,
+		updateScrollState: o
+	};
+}
+//#endregion
+export { n as useTableStyle };

package/dist/es/components/i-table/src/table-utils.mjs

@@ -0,0 +1,19 @@
+//#region src/components/i-table/src/table-utils.ts
+function e(e, t) {
+	if (t.prop) return t.prop.split(".").reduce((e, t) => {
+		if (!(typeof e != "object" || !e)) return e[t];
+	}, e);
+}
+function t(e, t) {
+	return typeof t == "function" ? t(e) : typeof t == "string" && t ? e[t] : e;
+}
+function n(e) {
+	let t = [`i-table__cell-${e.prop}`];
+	return e.fixed === "left" ? (t.push("i-table__cell--fixed-left"), e._isLastLeftFixed && t.push("i-table__cell--fixed-left-last")) : e.fixed === "right" && (t.push("i-table__cell--fixed-right"), e._isFirstRightFixed && t.push("i-table__cell--fixed-right-first")), t;
+}
+function r(e) {
+	let t = {};
+	return e.align && (t.textAlign = e.align), e.fixed === "left" ? t.left = e._leftOffset : e.fixed === "right" && (t.right = e._rightOffset), t;
+}
+//#endregion
+export { n as getCellFixedClass, r as getCellFixedStyle, e as getTableCellValue, t as getTableRowKey };