@icc-grow/web-components 1.0.0

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

@@ -0,0 +1,154 @@
+import { nextZIndex as e } from "../../../utils/z-index.mjs";
+import t from "./tooltip-content.mjs";
+import { Fragment as n, Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, onBeforeUnmount as d, openBlock as f, ref as p, renderSlot as m, useSlots as h, watch as g, withCtx as _ } from "vue";
+//#region src/components/i-tooltip/src/tooltip.vue?vue&type=script&setup=true&lang.ts
+var v = 100, y = /* @__PURE__ */ u({
+	name: "i-tooltip",
+	__name: "tooltip",
+	props: {
+		trigger: { default: "hover" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		title: { default: "" },
+		content: { default: "" },
+		placement: { default: "top" },
+		theme: { default: "light" },
+		showArrow: {
+			type: Boolean,
+			default: !0
+		},
+		offset: { default: 8 }
+	},
+	setup(u, { expose: y }) {
+		let b = u, x = h(), S = p(null), C = p(null), w = p(!1), T = p(2e3), E = null, D = null, O = i(() => !!x.content), k = i(() => O.value || !!b.title || !!b.content);
+		function A() {
+			E &&= (clearTimeout(E), null);
+		}
+		function j() {
+			D &&= (clearTimeout(D), null);
+		}
+		function M() {
+			b.disabled || !k.value || (A(), j(), T.value = e(), w.value = !0);
+		}
+		function N(e = !1) {
+			A(), j();
+			let t = () => {
+				w.value = !1;
+			};
+			if (e || b.trigger !== "hover") {
+				t();
+				return;
+			}
+			E = setTimeout(t, v);
+		}
+		function P() {
+			if (typeof document > "u") return !1;
+			let e = document.activeElement;
+			if (!(e instanceof Node)) return !1;
+			let t = S.value?.contains(e) ?? !1, n = C.value?.floatingRef?.contains(e) ?? !1;
+			return t || n;
+		}
+		function F() {
+			j(), D = setTimeout(() => {
+				P() || N(!0);
+			}, 0);
+		}
+		function I() {
+			if (b.trigger === "click") {
+				if (w.value) {
+					N(!0);
+					return;
+				}
+				M();
+			}
+		}
+		function L() {
+			b.trigger === "hover" && M();
+		}
+		function R() {
+			b.trigger === "hover" && N();
+		}
+		function z() {
+			b.trigger === "focus" && M();
+		}
+		function B() {
+			b.trigger === "focus" && F();
+		}
+		function V() {
+			b.trigger === "hover" && A();
+		}
+		function H() {
+			b.trigger === "hover" && N();
+		}
+		function U() {
+			b.trigger === "focus" && j();
+		}
+		function W() {
+			b.trigger === "focus" && F();
+		}
+		return g(() => [w.value, b.trigger], ([e, t], n, r) => {
+			if (!e || t !== "click" || typeof document > "u") return;
+			let i = (e) => {
+				let t = e.target;
+				if (!(t instanceof Node)) return;
+				let n = S.value?.contains(t) ?? !1, r = C.value?.floatingRef?.contains(t) ?? !1;
+				!n && !r && N(!0);
+			};
+			document.addEventListener("mousedown", i, !0), r(() => {
+				document.removeEventListener("mousedown", i, !0);
+			});
+		}), g(() => b.disabled, (e) => {
+			e && w.value && N(!0);
+		}), g(k, (e) => {
+			!e && w.value && N(!0);
+		}), d(() => {
+			A(), j();
+		}), y({
+			show: M,
+			hide: () => N(!0)
+		}), (e, i) => (f(), s(n, null, [c("div", {
+			ref_key: "referenceRef",
+			ref: S,
+			class: "i-tooltip__trigger inline-flex",
+			onClick: I,
+			onMouseenter: L,
+			onMouseleave: R,
+			onFocusin: z,
+			onFocusout: B
+		}, [m(e.$slots, "default")], 544), (f(), a(r, { to: "body" }, [l(t, {
+			ref_key: "contentRef",
+			ref: C,
+			visible: w.value,
+			reference: S.value,
+			title: u.title,
+			content: u.content,
+			placement: u.placement,
+			theme: u.theme,
+			"show-arrow": u.showArrow,
+			offset: u.offset,
+			"z-index": T.value,
+			interactive: "",
+			onMouseenter: V,
+			onMouseleave: H,
+			onFocusin: U,
+			onFocusout: W
+		}, {
+			default: _(() => [O.value ? m(e.$slots, "content", { key: 0 }) : o("", !0)]),
+			_: 3
+		}, 8, [
+			"visible",
+			"reference",
+			"title",
+			"content",
+			"placement",
+			"theme",
+			"show-arrow",
+			"offset",
+			"z-index"
+		])]))], 64));
+	}
+});
+//#endregion
+export { y as default };

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

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

package/dist/es/components/i-transition/src/collapse-transition.mjs

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

package/dist/es/components/i-transition/src/collapse-transition.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,46 @@
+import { Transition as e, createBlock as t, defineComponent as n, openBlock as r, renderSlot as i, withCtx as a } from "vue";
+//#region src/components/i-transition/src/collapse-transition.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ n({
+	name: "i-collapse-transition",
+	__name: "collapse-transition",
+	setup(n) {
+		function o(e) {
+			let t = e;
+			t.style.height = "0", t.style.overflow = "hidden";
+		}
+		function s(e, t) {
+			let n = e;
+			n.offsetHeight, n.style.transition = "height 200ms ease-in-out", n.style.height = `${n.scrollHeight}px`, n.addEventListener("transitionend", t, { once: !0 });
+		}
+		function c(e) {
+			let t = e;
+			t.style.transition = "", t.style.height = "", t.style.overflow = "";
+		}
+		function l(e) {
+			let t = e;
+			t.style.height = `${t.scrollHeight}px`, t.style.overflow = "hidden";
+		}
+		function u(e, t) {
+			let n = e;
+			n.offsetHeight, n.style.transition = "height 200ms ease-in-out", n.style.height = "0", n.addEventListener("transitionend", t, { once: !0 });
+		}
+		function d(e) {
+			let t = e;
+			t.style.transition = "", t.style.height = "", t.style.overflow = "";
+		}
+		return (n, f) => (r(), t(e, {
+			name: "i-collapse-transition",
+			onBeforeEnter: o,
+			onEnter: s,
+			onAfterEnter: c,
+			onBeforeLeave: l,
+			onLeave: u,
+			onAfterLeave: d
+		}, {
+			default: a(() => [i(n.$slots, "default")]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { o as default };

package/dist/es/components/i-transition/src/transition.mjs

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

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

@@ -0,0 +1,69 @@
+import { Transition as e, computed as t, createBlock as n, defineComponent as r, openBlock as i, renderSlot as a, withCtx as o } from "vue";
+//#region src/components/i-transition/src/transition.vue?vue&type=script&setup=true&lang.ts
+var s = /* @__PURE__ */ r({
+	name: "i-transition",
+	__name: "transition",
+	props: {
+		name: {},
+		duration: {},
+		appear: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"before-enter",
+		"enter",
+		"after-enter",
+		"before-leave",
+		"leave",
+		"after-leave"
+	],
+	setup(r, { emit: s }) {
+		let c = r, l = s, u = t(() => `i-${c.name}`);
+		function d() {
+			return c.duration ? typeof c.duration == "number" ? {
+				enter: c.duration,
+				leave: c.duration
+			} : {
+				enter: c.duration.enter,
+				leave: c.duration.leave
+			} : {};
+		}
+		function f(e, t) {
+			let { enter: n, leave: r } = d(), i = e;
+			t === "enter" && n && i.style.setProperty("--i-transition-enter-duration", `${n}ms`), t === "leave" && r && i.style.setProperty("--i-transition-leave-duration", `${r}ms`);
+		}
+		function p(e) {
+			let t = e;
+			t.style.removeProperty("--i-transition-enter-duration"), t.style.removeProperty("--i-transition-leave-duration");
+		}
+		function m(e) {
+			f(e, "enter"), l("before-enter", e);
+		}
+		function h(e) {
+			p(e), l("after-enter", e);
+		}
+		function g(e) {
+			f(e, "leave"), l("before-leave", e);
+		}
+		function _(e) {
+			p(e), l("after-leave", e);
+		}
+		return (t, s) => (i(), n(e, {
+			name: u.value,
+			appear: r.appear,
+			onBeforeEnter: m,
+			onAfterEnter: h,
+			onBeforeLeave: g,
+			onAfterLeave: _,
+			onEnter: s[0] ||= (e) => l("enter", e),
+			onLeave: s[1] ||= (e) => l("leave", e)
+		}, {
+			default: o(() => [a(t.$slots, "default")]),
+			_: 3
+		}, 8, ["name", "appear"]));
+	}
+});
+//#endregion
+export { s as default };

package/dist/es/components/i-transition-group/index.mjs

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

package/dist/es/components/i-transition-group/src/transition-group.mjs

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

package/dist/es/components/i-transition-group/src/transition-group.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,75 @@
+import { TransitionGroup as e, computed as t, createBlock as n, defineComponent as r, openBlock as i, renderSlot as a, withCtx as o } from "vue";
+//#region src/components/i-transition-group/src/transition-group.vue?vue&type=script&setup=true&lang.ts
+var s = /* @__PURE__ */ r({
+	name: "i-transition-group",
+	__name: "transition-group",
+	props: {
+		tag: { default: "div" },
+		name: {},
+		duration: {},
+		appear: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"before-enter",
+		"enter",
+		"after-enter",
+		"before-leave",
+		"leave",
+		"after-leave"
+	],
+	setup(r, { emit: s }) {
+		let c = r, l = s, u = t(() => `i-${c.name}`);
+		function d() {
+			return c.duration ? typeof c.duration == "number" ? {
+				enter: c.duration,
+				leave: c.duration
+			} : {
+				enter: c.duration.enter,
+				leave: c.duration.leave
+			} : {};
+		}
+		function f(e, t) {
+			let { enter: n, leave: r } = d(), i = e;
+			t === "enter" && n && i.style.setProperty("--i-transition-enter-duration", `${n}ms`), t === "leave" && r && i.style.setProperty("--i-transition-leave-duration", `${r}ms`);
+		}
+		function p(e) {
+			let t = e;
+			t.style.removeProperty("--i-transition-enter-duration"), t.style.removeProperty("--i-transition-leave-duration");
+		}
+		function m(e) {
+			f(e, "enter"), l("before-enter", e);
+		}
+		function h(e) {
+			p(e), l("after-enter", e);
+		}
+		function g(e) {
+			f(e, "leave"), l("before-leave", e);
+		}
+		function _(e) {
+			p(e), l("after-leave", e);
+		}
+		return (t, s) => (i(), n(e, {
+			name: u.value,
+			tag: r.tag,
+			appear: r.appear,
+			onBeforeEnter: m,
+			onAfterEnter: h,
+			onBeforeLeave: g,
+			onAfterLeave: _,
+			onEnter: s[0] ||= (e) => l("enter", e),
+			onLeave: s[1] ||= (e) => l("leave", e)
+		}, {
+			default: o(() => [a(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"name",
+			"tag",
+			"appear"
+		]));
+	}
+});
+//#endregion
+export { s as default };

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

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

package/dist/es/components/i-tree/src/tree-node.mjs

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

package/dist/es/components/i-tree/src/tree-node.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,76 @@
+import e from "../../i-icon/index.mjs";
+import t from "../../i-checkbox/index.mjs";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, withModifiers as g } from "vue";
+//#region src/components/i-tree/src/tree-node.vue?vue&type=script&setup=true&lang.ts
+var _ = /* @__PURE__ */ l({
+	name: "i-tree-node",
+	__name: "tree-node",
+	props: {
+		node: {},
+		showCheckbox: { type: Boolean },
+		selectable: { type: Boolean },
+		fieldNames: {}
+	},
+	emits: [
+		"expand",
+		"check",
+		"click"
+	],
+	setup(l, { emit: _ }) {
+		let v = l, y = _, b = n(() => [
+			"h-32 my-2",
+			v.node.checked ? "bg-primary-3" : "hover:bg-primary-3",
+			v.node.disabled && "opacity-50 cursor-not-allowed"
+		]), x = () => {
+			v.node.isLeaf || y("expand", v.node);
+		}, S = (e) => {
+			v.node.disabled || y("check", v.node, !!e);
+		}, C = (e) => {
+			y("click", v.node, e);
+		};
+		return (n, _) => (f(), a("div", {
+			class: u(["i-tree-node flex items-center cursor-pointer transition-colors rounded-5", b.value]),
+			style: d({
+				paddingLeft: `${l.node.level * 20 + 8}px`,
+				paddingRight: "10px"
+			}),
+			onClick: C
+		}, [
+			o("button", {
+				class: u(["flex items-center justify-center shrink-0 mr-5 size-16 transition-transform duration-200", {
+					"rotate-90": l.node.expanded,
+					invisible: l.node.isLeaf
+				}]),
+				onClick: g(x, ["stop"])
+			}, [c(h(e), {
+				name: "icon-arrow-right",
+				size: 16
+			})], 2),
+			l.showCheckbox ? (f(), r(h(t), {
+				key: 0,
+				"model-value": l.node.checked,
+				indeterminate: l.node.indeterminate,
+				disabled: l.node.disabled,
+				class: "mr-10",
+				onChange: S,
+				onClick: _[0] ||= g(() => {}, ["stop"])
+			}, null, 8, [
+				"model-value",
+				"indeterminate",
+				"disabled"
+			])) : i("", !0),
+			o("div", { class: u(["flex-1 truncate select-none text-13 leading-18 text-black-70", { "!text-black": l.node.checked }]) }, [p(n.$slots, "default", {
+				node: l.node,
+				data: l.node.raw
+			}, () => [s(m(l.node.raw[l.fieldNames.label]), 1)])], 2),
+			l.selectable && !l.showCheckbox && l.node.checked ? (f(), r(h(e), {
+				key: 1,
+				name: "icon-selected",
+				size: 14,
+				class: "shrink-0 ml-6 text-primary"
+			})) : i("", !0)
+		], 6));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/es/components/i-tree/src/tree.mjs

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

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

@@ -0,0 +1,121 @@
+import e from "../../i-virtual-list/index.mjs";
+import { useTreeStore as t } from "./useTreeStore.mjs";
+import n from "./tree-node.mjs";
+import { createBlock as r, createVNode as i, defineComponent as a, guardReactiveProps as o, normalizeProps as s, openBlock as c, renderSlot as l, unref as u, watch as d, withCtx as f } from "vue";
+//#region src/components/i-tree/src/tree.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ a({
+	name: "i-tree",
+	__name: "tree",
+	props: {
+		data: {},
+		props: {},
+		rowKey: {},
+		showCheckbox: {
+			type: [Boolean, Function],
+			default: !1
+		},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: !1
+		},
+		defaultExpandAll: { type: Boolean },
+		defaultExpandedKeys: {},
+		defaultCheckedKeys: {},
+		accordion: {
+			type: Boolean,
+			default: !1
+		},
+		leafOnly: {
+			type: Boolean,
+			default: !1
+		},
+		limit: {},
+		height: {},
+		maxHeight: { default: "" }
+	},
+	emits: [
+		"change",
+		"exceed",
+		"load",
+		"node-click"
+	],
+	setup(a, { expose: p, emit: m }) {
+		let h = a, g = m, _ = t(h), { visibleFlatList: v, fieldNames: y } = _, b = (e) => h.leafOnly && !e.isLeaf ? !1 : h.selectable || !!h.showCheckbox;
+		function x() {
+			g("change", _.getCheckedKeys(), _.getHalfCheckedKeys(), _.getCheckedNodes(), _.getHalfCheckedNodes());
+		}
+		d(() => h.data, () => {
+			_.initTreeData();
+		}, { immediate: !0 });
+		let S = (e) => h.leafOnly && !e.isLeaf ? !1 : typeof h.showCheckbox == "function" ? h.showCheckbox(e.raw, e) : !!h.showCheckbox, C = (e) => {
+			h.accordion && _.collapseSiblings(e), _.toggleExpand(e.key);
+		}, w = (e, t) => {
+			let n = _.toggleCheck(e.key, t);
+			if (n && n.exceeded) {
+				g("exceed", n.current, n.limit);
+				return;
+			}
+			x();
+		}, T = (e, t) => {
+			if (g("node-click", e.raw, e, t), !S(e) && h.selectable && !e.disabled && !(h.leafOnly && !e.isLeaf)) {
+				if (h.multiple) {
+					let t = _.toggleCheck(e.key, !e.checked);
+					if (t && t.exceeded) {
+						g("exceed", t.current, t.limit);
+						return;
+					}
+				} else _.toggleSingleSelect(e.key);
+				x();
+			}
+		};
+		function E(e) {
+			_.setCheckedKeys(e), x();
+		}
+		return p({
+			getCheckedKeys: _.getCheckedKeys,
+			getHalfCheckedKeys: _.getHalfCheckedKeys,
+			getCheckedNodes: _.getCheckedNodes,
+			getHalfCheckedNodes: _.getHalfCheckedNodes,
+			setCheckedKeys: E
+		}), (t, d) => (c(), r(u(e), {
+			data: u(v),
+			"row-key": "key",
+			height: a.height,
+			"max-height": a.maxHeight,
+			class: "i-tree h-full"
+		}, {
+			default: f(({ item: e }) => [i(n, {
+				node: e,
+				"show-checkbox": S(e),
+				selectable: b(e),
+				"field-names": u(y),
+				onExpand: C,
+				onCheck: w,
+				onClick: T
+			}, {
+				default: f((e) => [l(t.$slots, "default", s(o(e)))]),
+				_: 3
+			}, 8, [
+				"node",
+				"show-checkbox",
+				"selectable",
+				"field-names"
+			])]),
+			_: 3
+		}, 8, [
+			"data",
+			"height",
+			"max-height"
+		]));
+	}
+});
+//#endregion
+export { p as default };