@icc-grow/web-components 1.0.0

package/dist/es/components/i-color-picker/src/components/ColorSwatches.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,42 @@
+import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, renderList as s } from "vue";
+//#region src/components/i-color-picker/src/components/ColorSwatches.vue?vue&type=script&setup=true&lang.ts
+var c = {
+	key: 0,
+	class: "i-color-picker__swatches flex flex-wrap gap-1.5"
+}, l = ["title", "onClick"], u = /* @__PURE__ */ i({
+	name: "i-color-picker-swatches",
+	__name: "ColorSwatches",
+	props: { swatches: {} },
+	emits: ["select"],
+	setup(i, { emit: u }) {
+		let d = u, f = {
+			backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+			backgroundSize: "8px 8px",
+			backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+			backgroundColor: "#fff"
+		};
+		function p(e) {
+			return {
+				width: "20px",
+				height: "20px",
+				flexShrink: 0
+			};
+		}
+		return (u, m) => i.swatches.length > 0 ? (o(), n("div", c, [(o(!0), n(e, null, s(i.swatches, (e, t) => (o(), n("button", {
+			key: t,
+			class: "i-color-picker__swatch relative cursor-pointer overflow-hidden rounded border border-solid border-black-10 p-0 transition-transform hover:scale-110 hover:border-black-30 active:scale-95",
+			type: "button",
+			title: e,
+			style: a(p(e)),
+			onClick: (t) => d("select", e)
+		}, [r("div", {
+			class: "absolute inset-0 -z-10",
+			style: f
+		}), r("div", {
+			class: "absolute inset-0",
+			style: a({ backgroundColor: e })
+		}, null, 4)], 12, l))), 128))])) : t("", !0);
+	}
+});
+//#endregion
+export { u as default };

package/dist/es/components/i-color-picker/src/components/HueSlider.mjs

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

package/dist/es/components/i-color-picker/src/components/HueSlider.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,33 @@
+import { useDrag as e } from "../hooks/useDrag.mjs";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, unref as l } from "vue";
+//#region src/components/i-color-picker/src/components/HueSlider.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ i({
+	name: "i-color-picker-hue-slider",
+	__name: "HueSlider",
+	props: {
+		percent: {},
+		height: { default: 160 }
+	},
+	emits: ["change"],
+	setup(i, { emit: u }) {
+		let d = i, f = u, p = c(null), m = t(() => ({
+			top: `${d.percent * 100}%`,
+			width: "16px",
+			height: "16px"
+		})), { isDragging: h, handleMouseDown: g } = e(p, (e) => {
+			f("change", Math.round(e.y * 360));
+		});
+		return (e, t) => (s(), n("div", {
+			ref_key: "sliderRef",
+			ref: p,
+			class: "i-color-picker__hue relative w-10 cursor-pointer select-none rounded-5",
+			style: o([{ background: "linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" }, { height: `${i.height}px` }]),
+			onMousedown: t[0] ||= (...e) => l(g) && l(g)(...e)
+		}, [r("div", {
+			class: a(["i-color-picker__hue-thumb absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md transition-transform", { "scale-125": l(h) }]),
+			style: o(m.value)
+		}, null, 6)], 36));
+	}
+});
+//#endregion
+export { u as default };

package/dist/es/components/i-color-picker/src/hooks/useColorState.mjs

@@ -0,0 +1,111 @@
+import { computed as e, ref as t, watch as n } from "vue";
+import { colord as r } from "colord";
+//#region src/components/i-color-picker/src/hooks/useColorState.ts
+var i = {
+	h: 0,
+	s: 1,
+	v: 1,
+	a: 1
+};
+function a(e) {
+	if (!e) return { ...i };
+	let t = r(e);
+	if (!t.isValid()) return console.warn(`[i-color-picker] 无法解析颜色值: "${e}"，已 fallback 到 #FF0000`), { ...i };
+	let n = t.toHsv();
+	return {
+		h: Math.round(n.h),
+		s: n.s / 100,
+		v: n.v / 100,
+		a: t.alpha()
+	};
+}
+function o(e, t, n) {
+	let i = r({
+		h: e.h,
+		s: e.s * 100,
+		v: e.v * 100,
+		a: e.a
+	});
+	switch (t) {
+		case "hex": return n && e.a < 1 ? i.toHex() : i.alpha(1).toHex();
+		case "rgb": {
+			let { r: e, g: t, b: n, a: r } = i.toRgb();
+			return `rgba(${e}, ${t}, ${n}, ${r})`;
+		}
+		case "hsl": {
+			let { h: e, s: t, l: n, a: r } = i.toHsl();
+			return `hsla(${Math.round(e)}, ${Math.round(t)}%, ${Math.round(n)}%, ${r})`;
+		}
+		default: return i.toHex();
+	}
+}
+function s(i) {
+	let s = t(a(i.modelValue() ?? "")), c = !1;
+	n(() => i.modelValue(), (e) => {
+		if (c) {
+			c = !1;
+			return;
+		}
+		if (e) {
+			let t = a(e);
+			o(s.value, i.format(), i.showAlpha()) !== e && (s.value = t);
+		}
+	});
+	let l = e(() => ({
+		x: s.value.s,
+		y: 1 - s.value.v
+	})), u = e(() => s.value.h / 360), d = e(() => s.value.a), f = e(() => r({
+		h: s.value.h,
+		s: 100,
+		v: 100,
+		a: 1
+	}).toHex()), p = e(() => {
+		let { r: e, g: t, b: n } = r({
+			h: s.value.h,
+			s: s.value.s * 100,
+			v: s.value.v * 100,
+			a: 1
+		}).toRgb();
+		return `rgb(${e}, ${t}, ${n})`;
+	});
+	function m(e, t) {
+		s.value = {
+			...s.value,
+			s: e,
+			v: t
+		};
+	}
+	function h(e) {
+		s.value = {
+			...s.value,
+			h: e
+		};
+	}
+	function g(e) {
+		s.value = {
+			...s.value,
+			a: e
+		};
+	}
+	function _(e) {
+		s.value = a(e);
+	}
+	function v() {
+		return c = !0, o(s.value, i.format(), i.showAlpha());
+	}
+	return {
+		hsva: s,
+		svPosition: l,
+		huePercent: u,
+		alphaPercent: d,
+		panelBgColor: f,
+		rgbString: p,
+		updateSV: m,
+		updateHue: h,
+		updateAlpha: g,
+		setColor: _,
+		getOutput: v
+	};
+}
+//#endregion
+export { s as useColorState };

package/dist/es/components/i-color-picker/src/hooks/useDrag.mjs

@@ -0,0 +1,34 @@
+import { onUnmounted as e, ref as t } from "vue";
+//#region src/components/i-color-picker/src/hooks/useDrag.ts
+function n(n, r, i) {
+	let a = t(!1);
+	function o(e) {
+		let t = n.value;
+		if (!t) return {
+			x: 0,
+			y: 0
+		};
+		let r = t.getBoundingClientRect();
+		return {
+			x: Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)),
+			y: Math.max(0, Math.min(1, (e.clientY - r.top) / r.height))
+		};
+	}
+	function s(e) {
+		a.value && (e.preventDefault(), r(o(e)));
+	}
+	function c(e) {
+		a.value && (a.value = !1, i?.(o(e)), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", c));
+	}
+	function l(e) {
+		e.button === 0 && (e.preventDefault(), a.value = !0, r(o(e)), window.addEventListener("mousemove", s), window.addEventListener("mouseup", c));
+	}
+	return e(() => {
+		window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", c);
+	}), {
+		isDragging: a,
+		handleMouseDown: l
+	};
+}
+//#endregion
+export { n as useDrag };

package/dist/es/components/i-confirm/src/confirm-container.mjs

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

package/dist/es/components/i-confirm/src/confirm-container.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,42 @@
+import e from "./confirm.mjs";
+import { Fragment as t, computed as n, createElementBlock as r, createVNode as i, defineComponent as a, normalizeStyle as o, openBlock as s, renderList as c } from "vue";
+//#region src/components/i-confirm/src/confirm-container.vue?vue&type=script&setup=true&lang.ts
+var l = /* @__PURE__ */ a({
+	name: "i-confirm-container",
+	__name: "confirm-container",
+	props: { instances: {} },
+	emits: [
+		"confirm",
+		"cancel",
+		"close",
+		"afterLeave"
+	],
+	setup(a, { emit: l }) {
+		let u = a, d = l, f = n(() => ({ zIndex: u.instances.reduce((e, t) => Math.max(e, t.zIndex), 1e3) }));
+		function p(e) {
+			d("afterLeave", e);
+		}
+		return (n, l) => (s(), r("div", {
+			class: "i-confirm-container fixed inset-0 pointer-events-none",
+			style: o(f.value)
+		}, [(s(!0), r(t, null, c(a.instances, (t) => (s(), r("div", {
+			key: t.id,
+			class: "i-confirm-container__item absolute inset-0",
+			style: o({ zIndex: t.zIndex })
+		}, [i(e, {
+			instance: t,
+			onConfirm: (e) => d("confirm", t.id),
+			onCancel: (e) => d("cancel", t.id),
+			onClose: (e) => d("close", t.id),
+			onAfterLeave: (e) => p(t.id)
+		}, null, 8, [
+			"instance",
+			"onConfirm",
+			"onCancel",
+			"onClose",
+			"onAfterLeave"
+		])], 4))), 128))], 4));
+	}
+});
+//#endregion
+export { l as default };

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

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

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

@@ -0,0 +1,98 @@
+import e from "../../i-transition/index.mjs";
+import t from "../../i-icon/index.mjs";
+import n from "../../i-button/index.mjs";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, isVNode as d, normalizeClass as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g, withModifiers as _ } from "vue";
+//#region src/components/i-confirm/src/confirm.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "i-confirm relative flex min-h-full w-full items-center justify-center px-16 py-24 pointer-events-none" }, y = { class: "i-confirm__body flex flex-col gap-8" }, b = {
+	key: 0,
+	class: "i-confirm__title text-16 font-semibold leading-19 text-black"
+}, x = { class: "i-confirm__content text-12 leading-18 text-black-50" }, S = { key: 0 }, C = { class: "i-confirm__actions flex justify-end gap-20 pt-39" }, w = /* @__PURE__ */ u({
+	name: "i-confirm",
+	__name: "confirm",
+	props: { instance: {} },
+	emits: [
+		"confirm",
+		"cancel",
+		"close",
+		"after-leave"
+	],
+	setup(w, { emit: T }) {
+		let E = w, D = T, O = {
+			primary: "i-confirm--info border border-solid border-primary-10",
+			warning: "i-confirm--warning border border-solid border-warning-10",
+			error: "i-confirm--error border border-solid border-danger-10"
+		}, k = {
+			primary: "primary",
+			warning: "primary",
+			error: "danger"
+		}, A = u({
+			name: "ConfirmVNodeContent",
+			props: { content: {
+				type: Object,
+				required: !0
+			} },
+			setup(e) {
+				return () => e.content;
+			}
+		}), j = r(() => typeof E.instance.content == "string"), M = r(() => d(E.instance.content) ? E.instance.content : null), N = r(() => O[E.instance.type]), P = r(() => k[E.instance.type]);
+		function F() {
+			E.instance.closeOnClickOverlay && D("close");
+		}
+		return (r, u) => (p(), o("div", v, [l(h(e), {
+			name: "fade",
+			appear: ""
+		}, {
+			default: g(() => [w.instance.visible ? (p(), o("div", {
+				key: 0,
+				class: "i-confirm__overlay fixed inset-0 bg-black-30 pointer-events-auto",
+				onClick: F
+			})) : a("", !0)]),
+			_: 1
+		}), l(h(e), {
+			name: "fade-down",
+			appear: "",
+			onAfterLeave: u[4] ||= (e) => D("after-leave")
+		}, {
+			default: g(() => [w.instance.visible ? (p(), o("div", {
+				key: 0,
+				class: f(["i-confirm__panel pointer-events-auto relative z-10 flex w-full max-w-400 flex-col rounded-10 bg-white px-30 pt-45 pb-30", N.value]),
+				onClick: u[3] ||= _(() => {}, ["stop"])
+			}, [
+				w.instance.closable ? (p(), o("button", {
+					key: 0,
+					type: "button",
+					class: "i-confirm__close absolute right-15 top-15 flex size-16 items-center justify-center border-none bg-transparent p-0 text-black-30",
+					onClick: u[0] ||= (e) => D("close")
+				}, [l(h(t), {
+					name: "icon-close",
+					size: 16,
+					class: "pointer-events-none"
+				})])) : a("", !0),
+				s("div", y, [w.instance.title ? (p(), o("div", b, m(w.instance.title), 1)) : a("", !0), s("div", x, [j.value ? (p(), o("span", S, m(w.instance.content), 1)) : M.value ? (p(), i(h(A), {
+					key: 1,
+					content: M.value
+				}, null, 8, ["content"])) : a("", !0)])]),
+				s("div", C, [w.instance.showCancelButton ? (p(), i(h(n), {
+					key: 0,
+					type: "black",
+					plain: "",
+					class: "i-confirm__cancel shrink-0 min-w-100",
+					onClick: u[1] ||= (e) => D("cancel")
+				}, {
+					default: g(() => [c(m(w.instance.cancelText), 1)]),
+					_: 1
+				})) : a("", !0), l(h(n), {
+					type: P.value,
+					class: "i-confirm__confirm shrink-0 min-w-120",
+					onClick: u[2] ||= (e) => D("confirm")
+				}, {
+					default: g(() => [c(m(w.instance.confirmText), 1)]),
+					_: 1
+				}, 8, ["type"])])
+			], 2)) : a("", !0)]),
+			_: 1
+		})]));
+	}
+});
+//#endregion
+export { w as default };

package/dist/es/components/i-confirm/src/manager.mjs

@@ -0,0 +1,86 @@
+import { createFeedbackChannel as e } from "../../../feedback/core/manager.mjs";
+import t from "./confirm-container.mjs";
+import { isVNode as n, reactive as r } from "vue";
+//#region src/components/i-confirm/src/manager.ts
+var i = "确定", a = "取消", o = 0, s = !1;
+function c(e) {
+	return typeof e == "object" && !!e && !n(e) && "content" in e;
+}
+function l(e) {
+	return c(e) ? e : { content: e };
+}
+function u(e, t) {
+	e.settled || (e.settled = !0, e.resolver(t));
+}
+function d() {
+	if (typeof document > "u") return;
+	let e = m.instances.some((e) => e.visible && e.closeOnPressEscape);
+	if (e && !s) {
+		document.addEventListener("keydown", p), s = !0;
+		return;
+	}
+	!e && s && (document.removeEventListener("keydown", p), s = !1);
+}
+function f(e) {
+	m.get(e) && (m.remove(e), d());
+}
+function p(e) {
+	if (e.key !== "Escape") return;
+	let t = [...m.instances].reverse().find((e) => e.visible && e.closeOnPressEscape);
+	t && (e.preventDefault(), h(t.id, "close"));
+}
+var m = e({
+	namespace: "confirm",
+	container: t,
+	props: {
+		onConfirm: (e) => {
+			h(e, "confirm");
+		},
+		onCancel: (e) => {
+			h(e, "cancel");
+		},
+		onClose: (e) => {
+			h(e, "close");
+		},
+		onAfterLeave: f
+	}
+});
+function h(e, t) {
+	let n = m.get(e);
+	!n || !n.visible || (n.visible = !1, u(n, t), d());
+}
+function g(e, t) {
+	let n = l(t);
+	return new Promise((t) => {
+		let s = r({
+			id: ++o,
+			visible: !0,
+			zIndex: m.nextLayer(),
+			type: e,
+			title: n.title,
+			content: n.content,
+			confirmText: n.confirmText ?? i,
+			cancelText: n.cancelText ?? a,
+			showCancelButton: n.showCancelButton ?? !0,
+			closable: n.closable ?? !0,
+			closeOnClickOverlay: n.closeOnClickOverlay ?? !0,
+			closeOnPressEscape: n.closeOnPressEscape ?? !0,
+			settled: !1,
+			resolver: t
+		});
+		m.add(s), d();
+	});
+}
+var _ = {
+	info(e) {
+		return g("primary", e);
+	},
+	warning(e) {
+		return g("warning", e);
+	},
+	error(e) {
+		return g("error", e);
+	}
+};
+//#endregion
+export { _ as IConfirm };

package/dist/es/components/i-date-picker/index.mjs

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

package/dist/es/components/i-date-picker/src/components/date-panel.mjs

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

package/dist/es/components/i-date-picker/src/components/date-panel.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,68 @@
+import { useDatePanel as e } from "../composables/useDatePanel.mjs";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderList as s, toDisplayString as c, unref as l } from "vue";
+//#region src/components/i-date-picker/src/components/date-panel.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "i-date-panel w-full" }, d = { class: "i-date-panel__weekdays grid grid-cols-7 gap-10 mb-10" }, f = { class: "i-date-panel__body flex flex-col gap-6" }, p = [
+	"disabled",
+	"onClick",
+	"onMouseenter"
+], m = /* @__PURE__ */ i({
+	name: "i-date-picker-date-panel",
+	__name: "date-panel",
+	props: {
+		year: {},
+		month: {},
+		selectedDates: {},
+		weekMode: {
+			type: Boolean,
+			default: !1
+		},
+		disabledDate: {
+			type: Function,
+			default: void 0
+		},
+		rangeStart: { default: void 0 },
+		rangeEnd: { default: void 0 },
+		hoverDate: { default: void 0 }
+	},
+	emits: ["pick", "hover"],
+	setup(i, { emit: m }) {
+		let h = i, g = m, { weekLabels: _, rows: v } = e(() => h.year, () => h.month, () => h.selectedDates, {
+			disabledDate: () => h.disabledDate,
+			rangeStart: () => h.rangeStart,
+			rangeEnd: () => h.rangeEnd,
+			hoverDate: () => h.hoverDate
+		});
+		function y(e) {
+			let t = [];
+			e.isCurrent ? !e.isSelected && !e.isRangeStart && !e.isRangeEnd && t.push("text-black") : t.push("text-black-30"), e.isDisabled && t.push("is-disabled text-black-20 cursor-not-allowed"), e.isToday && !e.isSelected && !e.isRangeStart && !e.isRangeEnd && t.push("is-today text-primary");
+			let n = !1;
+			return e.isRangeStart && (t.push("is-range-start bg-primary text-white rounded-50 shadow-[0px_7px_30px_0px_rgba(253,107,126,0.2)]"), n = !0), e.isRangeEnd && !e.isRangeStart && (t.push("is-range-end bg-primary text-white rounded-50 shadow-[0px_7px_30px_0px_rgba(253,107,126,0.2)]"), n = !0), e.isSelected && !h.weekMode && !n && (t.push("is-selected bg-primary text-white rounded-50 shadow-[0px_10px_30px_7px_rgba(0,0,0,0.07),0px_-2px_10px_0px_rgba(0,0,0,0.02)]"), n = !0), e.isInRange && !e.isRangeStart && !e.isRangeEnd && !e.isSelected && t.push("bg-primary-3"), n || t.push("rounded-50"), t;
+		}
+		function b(e, t) {
+			return h.weekMode && e.some((e) => e.isSelected) ? ["bg-primary-3 rounded-50"] : [];
+		}
+		function x(e) {
+			e.isDisabled || g("pick", e.date);
+		}
+		function S(e) {
+			e.isDisabled || g("hover", e.date);
+		}
+		return (e, i) => (o(), n("div", u, [r("div", d, [(o(!0), n(t, null, s(l(_), (e) => (o(), n("span", {
+			key: e,
+			class: "i-date-panel__weekday flex items-center justify-center w-30 h-30 text-12 font-600 text-black-30 select-none"
+		}, c(e), 1))), 128))]), r("div", f, [(o(!0), n(t, null, s(l(v), (e, r) => (o(), n("div", {
+			key: r,
+			class: a(["i-date-panel__row grid grid-cols-7 gap-6", b(e, r)])
+		}, [(o(!0), n(t, null, s(e, (e) => (o(), n("button", {
+			key: e.date.valueOf(),
+			type: "button",
+			class: a(["i-date-panel__cell flex items-center justify-center size-34 text-13 font-600 border-0 border-solid cursor-pointer transition-colors select-none box-border", y(e)]),
+			disabled: e.isDisabled,
+			onClick: (t) => x(e),
+			onMouseenter: (t) => S(e),
+			onMouseleave: i[0] ||= (e) => g("hover", void 0)
+		}, c(e.text), 43, p))), 128))], 2))), 128))])]));
+	}
+});
+//#endregion
+export { m as default };

package/dist/es/components/i-date-picker/src/components/date-trigger.mjs

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