@icc-grow/web-components 1.0.0

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

@@ -0,0 +1,81 @@
+import e from "../../i-image/src/image.mjs";
+import { ImageViewer as t } from "../../i-image-viewer/index.mjs";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, defineComponent as s, normalizeStyle as c, openBlock as l, renderList as u, toDisplayString as d } from "vue";
+//#region src/components/i-image-group/src/image-group.vue?vue&type=script&setup=true&lang.ts
+var f = /* @__PURE__ */ s({
+	name: "i-image-group",
+	__name: "image-group",
+	props: {
+		urlList: { default: () => [] },
+		limit: { default: void 0 },
+		gap: { default: "10px" },
+		width: { default: void 0 },
+		height: { default: void 0 },
+		round: {
+			type: Boolean,
+			default: !1
+		},
+		alt: {},
+		fit: { default: void 0 },
+		lazy: {
+			type: Boolean,
+			default: !1
+		},
+		initialIndex: {}
+	},
+	setup(s) {
+		let f = s, p = (e) => typeof e == "number" || /^\d+$/.test(String(e)), m = (e) => {
+			if (!(e === void 0 || e === "")) return p(e) ? `${e}px` : String(e);
+		}, h = r(() => ({ gap: m(f.gap) })), g = r(() => f.limit === void 0 ? 0 : Number(f.limit)), _ = r(() => g.value > 0 && f.urlList.length > g.value), v = r(() => _.value ? f.urlList.slice(0, g.value) : f.urlList), y = r(() => f.urlList.length - g.value), b = r(() => {
+			let e = "14px", t = "5px", n = f.height || f.width;
+			if (n) {
+				let r = String(n).match(/^(\d+)/);
+				if (r) {
+					let n = Number(r[1]);
+					e = Math.max(11, Math.round(n * .28)) + "px", t = Math.max(4, Math.round(n * .1)) + "px";
+				}
+			}
+			return {
+				color: "var(--i-color-black-30, rgba(0,0,0,0.3))",
+				fontSize: e,
+				marginLeft: t,
+				fontWeight: 400
+			};
+		}), x = () => {
+			f.urlList.length !== 0 && t.show({
+				urlList: f.urlList,
+				initialIndex: _.value ? g.value : 0
+			});
+		};
+		return (t, r) => (l(), o("div", {
+			class: "i-image-group flex flex-wrap items-center",
+			style: c(h.value)
+		}, [(l(!0), o(n, null, u(v.value, (t, n) => (l(), i(e, {
+			key: n,
+			src: t,
+			width: s.width,
+			height: s.height,
+			fit: s.fit,
+			round: s.round,
+			lazy: s.lazy,
+			"preview-src-list": s.urlList,
+			"initial-index": n
+		}, null, 8, [
+			"src",
+			"width",
+			"height",
+			"fit",
+			"round",
+			"lazy",
+			"preview-src-list",
+			"initial-index"
+		]))), 128)), _.value ? (l(), o("div", {
+			key: 0,
+			class: "i-image-group__overflow inline-flex items-center cursor-pointer hover:opacity-80 transition-opacity",
+			style: c(b.value),
+			onClick: x
+		}, " +" + d(y.value), 5)) : a("", !0)], 4));
+	}
+});
+//#endregion
+export { f as default };

package/dist/es/components/i-image-viewer/index.mjs

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

package/dist/es/components/i-image-viewer/src/image-viewer.mjs

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

package/dist/es/components/i-image-viewer/src/image-viewer.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,128 @@
+import { nextZIndex as e } from "../../../utils/z-index.mjs";
+import t from "../../i-icon/index.mjs";
+import n from "../../i-overlay/index.mjs";
+import { useImageTransform as r } from "./use-image-transform.mjs";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as ee, onMounted as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, watch as y, withModifiers as b } from "vue";
+//#region src/components/i-image-viewer/src/image-viewer.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	key: 0,
+	class: "absolute top-0 right-0 p-16 flex gap-16 z-10 text-white text-14 select-none bg-black bg-opacity-40 rounded-bl-10"
+}, S = ["onClick"], C = {
+	key: 3,
+	class: "relative w-full h-full flex items-center justify-center overflow-hidden"
+}, w = ["src"], T = {
+	key: 4,
+	class: "absolute bottom-16 left-1/2 -translate-x-1/2 z-10 flex gap-8 py-8 px-12 bg-black bg-opacity-60 rounded-8 overflow-x-auto max-w-[80vw]"
+}, E = ["onClick"], D = ["src"], O = "absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 text-white opacity-40 hover:opacity-100 bg-black bg-opacity-40 rounded-full size-40 flex items-center justify-center transition-all select-none", k = /* @__PURE__ */ u({
+	name: "i-image-viewer",
+	__name: "image-viewer",
+	props: {
+		urlList: {},
+		initialIndex: { default: 0 }
+	},
+	emits: ["close"],
+	setup(u, { emit: k }) {
+		let A = u, j = k, M = e(), N = a(() => A.urlList.length > 0), P = h(Math.max(0, Math.min(A.initialIndex, A.urlList.length - 1))), F = a(() => A.urlList[P.value]), I = h(), { transform: L, reset: R, handleZoom: z, zoomIn: B, zoomOut: V, rotateLeft: H, rotateRight: U, resetScale: W, onMouseDown: G, imageTransformStyle: K, cleanup: q } = r(I), J = a(() => [
+			{
+				label: "放大",
+				handler: B
+			},
+			{
+				label: "缩小",
+				handler: V
+			},
+			{
+				label: "1:1",
+				handler: W
+			},
+			{
+				label: "左转",
+				handler: H
+			},
+			{
+				label: "右转",
+				handler: U
+			},
+			{
+				label: "关闭",
+				handler: Z,
+				extraClass: "ml-16"
+			}
+		]);
+		y(P, () => {
+			R();
+		});
+		function Y() {
+			P.value = (P.value + 1) % A.urlList.length;
+		}
+		function X() {
+			P.value = (P.value - 1 + A.urlList.length) % A.urlList.length;
+		}
+		function Z() {
+			j("close");
+		}
+		function Q(e) {
+			e.key === "Escape" ? Z() : e.key === "ArrowLeft" ? X() : e.key === "ArrowRight" && Y();
+		}
+		let $ = "";
+		return p(() => {
+			$ = document.body.style.overflow, document.body.style.overflow = "hidden", window.addEventListener("keydown", Q);
+		}), ee(() => {
+			document.body.style.overflow = $, window.removeEventListener("keydown", Q), q();
+		}), (e, r) => (m(), s("div", {
+			class: "i-image-viewer fixed inset-0 flex items-center justify-center select-none box-border outline-none pointer-events-auto",
+			style: f({ zIndex: v(M) }),
+			tabindex: "-1"
+		}, [
+			l(v(n), {
+				visible: !0,
+				absolute: "",
+				onClick: Z
+			}),
+			N.value ? (m(), s("div", x, [(m(!0), s(i, null, g(J.value, (e) => (m(), s("div", {
+				key: e.label,
+				class: d(["cursor-pointer opacity-70 hover:opacity-100 transition-opacity", e.extraClass]),
+				onClick: e.handler
+			}, _(e.label), 11, S))), 128))])) : o("", !0),
+			u.urlList.length > 1 ? (m(), s("button", {
+				key: 1,
+				class: d(["left-16", O]),
+				onClick: X
+			}, [l(v(t), {
+				name: "icon-arrow-left",
+				size: "24"
+			})])) : o("", !0),
+			u.urlList.length > 1 ? (m(), s("button", {
+				key: 2,
+				class: d(["right-16", O]),
+				onClick: Y
+			}, [l(v(t), {
+				name: "icon-arrow-right",
+				size: "24"
+			})])) : o("", !0),
+			N.value ? (m(), s("div", C, [c("img", {
+				ref_key: "imgRef",
+				ref: I,
+				src: F.value,
+				class: "w-1/2 h-1/2 object-contain pointer-events-auto cursor-grab active:cursor-grabbing border-none outline-none",
+				style: f({
+					transform: v(K),
+					transition: v(L).enableTransition ? "transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)" : "none"
+				}),
+				onMousedown: r[0] ||= (...e) => v(G) && v(G)(...e),
+				onWheel: r[1] ||= b((...e) => v(z) && v(z)(...e), ["prevent"])
+			}, null, 44, w)])) : o("", !0),
+			u.urlList.length > 1 ? (m(), s("div", T, [(m(!0), s(i, null, g(u.urlList, (e, t) => (m(), s("div", {
+				key: e,
+				class: d(["w-64 h-64 border-2 box-border cursor-pointer transition-colors overflow-hidden rounded-4 flex-shrink-0", t === P.value ? "border-white" : "border-transparent hover:border-black-10"]),
+				onClick: (e) => P.value = t
+			}, [c("img", {
+				src: e,
+				loading: "lazy",
+				class: "w-full h-full object-cover"
+			}, null, 8, D)], 10, E))), 128))])) : o("", !0)
+		], 4));
+	}
+});
+//#endregion
+export { k as default };

package/dist/es/components/i-image-viewer/src/service.mjs

@@ -0,0 +1,19 @@
+import e from "./image-viewer.mjs";
+import { createVNode as t, render as n } from "vue";
+//#region src/components/i-image-viewer/src/service.ts
+var r = null, i = { show(i) {
+	if (typeof document > "u") return { close: () => {} };
+	r && r();
+	let a = i.container || document.body, o = document.createElement("div");
+	o.className = "i-image-viewer-container", a.appendChild(o);
+	let s = null, c = () => {
+		s &&= (n(null, o), o.parentNode && o.parentNode.removeChild(o), null), r === c && (r = null);
+	};
+	return r = c, s = t(e, {
+		urlList: i.urlList,
+		initialIndex: i.initialIndex,
+		onClose: c
+	}), n(s, o), { close: c };
+} };
+//#endregion
+export { i as ImageViewer };

package/dist/es/components/i-image-viewer/src/use-image-transform.mjs

@@ -0,0 +1,68 @@
+import { computed as e, ref as t } from "vue";
+//#region src/components/i-image-viewer/src/use-image-transform.ts
+var n = .15, r = .5, i = .2, a = 5;
+function o(o) {
+	let s = t({
+		offsetX: 0,
+		offsetY: 0,
+		scale: 1,
+		rotateDeg: 0,
+		enableTransition: !0
+	}), c = () => {
+		s.value = {
+			offsetX: 0,
+			offsetY: 0,
+			scale: 1,
+			rotateDeg: 0,
+			enableTransition: !0
+		};
+	}, l = () => {
+		if (!o.value) return;
+		let e = o.value.clientWidth * s.value.scale, t = o.value.clientHeight * s.value.scale, n = e / 2, r = t / 2, i = s.value.rotateDeg % 180 != 0, a = i ? r : n, c = i ? n : r;
+		s.value.offsetX = Math.max(-a, Math.min(a, s.value.offsetX)), s.value.offsetY = Math.max(-c, Math.min(c, s.value.offsetY));
+	}, u = (e) => {
+		e.preventDefault();
+		let t = e.deltaY < 0 ? n : -n, r = s.value.scale, o = Math.max(i, Math.min(r + t, a));
+		if (o === r) return;
+		let c = o / r, u = e.clientX - window.innerWidth / 2, d = e.clientY - window.innerHeight / 2;
+		s.value.enableTransition = !1, s.value.offsetX = s.value.offsetX - (u - s.value.offsetX) * (c - 1), s.value.offsetY = s.value.offsetY - (d - s.value.offsetY) * (c - 1), s.value.scale = o, l();
+	}, d = () => {
+		s.value.enableTransition = !0, s.value.scale = Math.min(s.value.scale + r, a);
+	}, f = () => {
+		s.value.enableTransition = !0, s.value.scale = Math.max(s.value.scale - r, i);
+	}, p = () => {
+		s.value.enableTransition = !0, s.value.rotateDeg -= 90;
+	}, m = () => {
+		s.value.enableTransition = !0, s.value.rotateDeg += 90;
+	}, h = () => {
+		s.value.enableTransition = !0, s.value.scale = 1, s.value.offsetX = 0, s.value.offsetY = 0;
+	}, g = !1, _ = 0, v = 0, y = 0, b = 0, x = (e) => {
+		e.preventDefault(), g = !0, _ = e.clientX, v = e.clientY, y = s.value.offsetX, b = s.value.offsetY, s.value.enableTransition = !1, document.addEventListener("mousemove", S), document.addEventListener("mouseup", C);
+	}, S = (e) => {
+		if (!g || !o.value) return;
+		let t = e.clientX - _, n = e.clientY - v;
+		s.value.offsetX = y + t, s.value.offsetY = b + n, l();
+	}, C = () => {
+		g = !1, document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", C);
+	};
+	return {
+		transform: s,
+		reset: c,
+		handleZoom: u,
+		zoomIn: d,
+		zoomOut: f,
+		rotateLeft: p,
+		rotateRight: m,
+		resetScale: h,
+		onMouseDown: x,
+		imageTransformStyle: e(() => {
+			let { offsetX: e, offsetY: t, scale: n, rotateDeg: r } = s.value;
+			return `translate(${e}px, ${t}px) scale(${n}) rotate(${r}deg)`;
+		}),
+		cleanup: () => {
+			g = !1, document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", C);
+		}
+	};
+}
+//#endregion
+export { o as useImageTransform };

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

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

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

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

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

@@ -0,0 +1,156 @@
+import e from "../../i-icon/index.mjs";
+import t from "../../i-space/index.mjs";
+import n from "../../i-field-shell/index.mjs";
+import { useInputBase as r } from "./useInputBase.mjs";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, mergeModels as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, withCtx as v, withModifiers as y } from "vue";
+//#region src/components/i-input/src/input.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "i-input__body flex h-full min-w-0 flex-1 items-center px-12" }, x = {
+	key: 0,
+	class: "i-input__prefix flex items-center shrink-0 text-black-50 mr-8"
+}, S = [
+	"id",
+	"name",
+	"type",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"maxlength",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], C = {
+	key: 1,
+	class: "i-input__suffix flex items-center shrink-0 text-black-50 ml-8"
+}, w = {
+	key: 0,
+	class: "i-input__count shrink-0 text-12 leading-15 text-black-30"
+}, T = { class: "i-input__count-current text-black" }, E = /* @__PURE__ */ u({
+	name: "i-input",
+	__name: "input",
+	props: /* @__PURE__ */ d({
+		type: { default: "text" },
+		placeholder: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		showPassword: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		maxlength: { default: void 0 },
+		showWordLimit: {
+			type: Boolean,
+			default: !1
+		},
+		validateEvent: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ d([
+		"focus",
+		"blur",
+		"clear",
+		"input",
+		"change"
+	], ["update:modelValue"]),
+	setup(u, { expose: d, emit: E }) {
+		let D = u, O = E, k = _(u, "modelValue"), A = p(), j = p(!1), { isFocused: M, isError: N, currentLength: P, isShowWordLimit: F, handleInput: I, handleFocus: L, handleBlur: R, handleChange: z, triggerValidate: B, inputId: V, inputName: H, isRequired: U, ariaDescribedby: W } = r({
+			props: D,
+			modelValue: k,
+			emit: O
+		}), G = i(() => D.type === "password" ? j.value ? "text" : "password" : D.type), K = i(() => D.clearable && !D.disabled && !D.readonly && String(k.value ?? "").length > 0), q = i(() => D.showPassword && D.type === "password" && !D.disabled);
+		function J() {
+			k.value = "", O("clear"), A.value?.focus(), B("change");
+		}
+		function Y() {
+			j.value = !j.value;
+		}
+		return d({
+			focus: () => A.value?.focus(),
+			blur: () => A.value?.blur(),
+			select: () => A.value?.select()
+		}), (r, i) => (f(), a(g(n), {
+			class: "i-input",
+			disabled: u.disabled,
+			readonly: u.readonly,
+			focused: g(M),
+			error: g(N)
+		}, {
+			default: v(() => [c("div", b, [
+				r.$slots.prefix ? (f(), s("span", x, [m(r.$slots, "prefix", {}, void 0, !0)])) : o("", !0),
+				c("input", {
+					id: g(V),
+					ref_key: "inputRef",
+					ref: A,
+					name: g(H),
+					class: "i-input__inner w-full min-w-0 border-none outline-none bg-transparent text-black text-13 leading-16",
+					type: G.value,
+					value: k.value,
+					placeholder: u.placeholder,
+					disabled: u.disabled,
+					readonly: u.readonly,
+					maxlength: u.maxlength,
+					"aria-invalid": g(N) ? "true" : void 0,
+					"aria-required": g(U) ? "true" : void 0,
+					"aria-describedby": g(W),
+					onInput: i[0] ||= (...e) => g(I) && g(I)(...e),
+					onFocus: i[1] ||= (...e) => g(L) && g(L)(...e),
+					onBlur: i[2] ||= (...e) => g(R) && g(R)(...e),
+					onChange: i[3] ||= (...e) => g(z) && g(z)(...e)
+				}, null, 40, S),
+				r.$slots.suffix ? (f(), s("span", C, [m(r.$slots, "suffix", {}, void 0, !0)])) : o("", !0),
+				g(F) || K.value || q.value ? (f(), a(g(t), {
+					key: 2,
+					class: "i-input__actions shrink-0 ml-8",
+					size: 8,
+					align: "center"
+				}, {
+					default: v(() => [
+						g(F) ? (f(), s("span", w, [c("span", T, h(g(P)), 1), l("/" + h(u.maxlength), 1)])) : o("", !0),
+						K.value ? (f(), a(g(e), {
+							key: 1,
+							class: "i-input__clear shrink-0 cursor-pointer text-black-30 hover:text-black-50",
+							name: "icon-clear-fill",
+							width: 20,
+							height: 20,
+							onMousedown: i[4] ||= y(() => {}, ["prevent"]),
+							onClick: J
+						})) : o("", !0),
+						q.value ? (f(), a(g(e), {
+							key: 2,
+							class: "i-input__password-toggle shrink-0 cursor-pointer text-black-30 hover:text-black-50",
+							name: j.value ? "icon-eye" : "icon-eye-close",
+							width: 20,
+							height: 20,
+							onMousedown: i[5] ||= y(() => {}, ["prevent"]),
+							onClick: Y
+						}, null, 8, ["name"])) : o("", !0)
+					]),
+					_: 1
+				})) : o("", !0)
+			])]),
+			_: 3
+		}, 8, [
+			"disabled",
+			"readonly",
+			"focused",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { E as default };

package/dist/es/components/i-input/src/useInputBase.mjs

@@ -0,0 +1,40 @@
+import { useFormItemA11y as e } from "../../i-form-item/src/useFormItemA11y.mjs";
+import { computed as t, ref as n } from "vue";
+//#region src/components/i-input/src/useInputBase.ts
+function r(r) {
+	let { props: i, modelValue: a, emit: o } = r, s = n(!1), { formItemContext: c, inputId: l, isRequired: u, isError: d, ariaDescribedby: f } = e(), p = t(() => l.value), m = t(() => String(a.value ?? "").length), h = t(() => i.showWordLimit && i.maxlength != null);
+	function g(e) {
+		i.validateEvent && c?.validate(e);
+	}
+	function _(e) {
+		let t = e.target.value;
+		a.value = t, o("input", t), g("change");
+	}
+	function v(e) {
+		s.value = !0, o("focus", e);
+	}
+	function y(e) {
+		s.value = !1, o("blur", e), g("blur");
+	}
+	function b(e) {
+		let t = e.target.value;
+		o("change", t);
+	}
+	return {
+		isFocused: s,
+		isError: d,
+		currentLength: m,
+		isShowWordLimit: h,
+		handleInput: _,
+		handleFocus: v,
+		handleBlur: y,
+		handleChange: b,
+		triggerValidate: g,
+		inputId: l,
+		inputName: p,
+		isRequired: u,
+		ariaDescribedby: f
+	};
+}
+//#endregion
+export { r as useInputBase };

package/dist/es/components/i-input-number/index.mjs

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

package/dist/es/components/i-input-number/src/input-number.mjs

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