@icc-grow/web-components 1.0.0

package/dist/es/components/i-time-picker/src/components/time-picker-column.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,118 @@
+import e from "../../../i-scrollbar/index.mjs";
+import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, nextTick as s, normalizeClass as c, normalizeStyle as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, watch as _, withCtx as v } from "vue";
+//#region src/components/i-time-picker/src/components/time-picker-column.vue?vue&type=script&setup=true&lang.ts
+var y = ["onClick"], b = /* @__PURE__ */ o({
+	name: "i-time-picker-column",
+	__name: "time-picker-column",
+	props: {
+		label: {},
+		value: {},
+		options: {},
+		isDisabled: {},
+		itemHeight: { default: 32 },
+		visibleCount: { default: 5 }
+	},
+	emits: ["update:value"],
+	setup(o, { emit: b }) {
+		let x = o, S = b, C = p(null), w = p(!1), T = null, E = n(() => x.itemHeight * x.visibleCount), D = n(() => Math.floor(x.visibleCount / 2) * x.itemHeight), O = n(() => ({ height: `${D.value}px` })), k = n(() => ({ height: `${x.itemHeight}px` }));
+		function A(e) {
+			return String(e).padStart(2, "0");
+		}
+		function j() {
+			T &&= (clearTimeout(T), null);
+		}
+		let M = n(() => ({
+			"--i-time-picker-column-center-offset": `${D.value}px`,
+			"--i-time-picker-column-item-height": `${x.itemHeight}px`
+		}));
+		function N(e) {
+			return x.isDisabled(e) ? ["is-disabled text-black-20 cursor-not-allowed"] : e === x.value ? ["is-active text-black"] : ["text-black-70 cursor-pointer hover:bg-black-2"];
+		}
+		function P(e) {
+			let t = x.options.length - 1, n = Math.max(0, Math.min(t, e));
+			if (!x.isDisabled(x.options[n])) return n;
+			for (let e = n + 1; e <= t; e += 1) if (!x.isDisabled(x.options[e])) return e;
+			for (let e = n - 1; e >= 0; --e) if (!x.isDisabled(x.options[e])) return e;
+			return null;
+		}
+		function F() {
+			if (typeof window < "u" && typeof window.requestAnimationFrame == "function") {
+				window.requestAnimationFrame(() => {
+					w.value = !1;
+				});
+				return;
+			}
+			setTimeout(() => {
+				w.value = !1;
+			}, 16);
+		}
+		function I(e) {
+			w.value = !0, C.value?.scrollTo({ top: e * x.itemHeight }), F();
+		}
+		function L() {
+			let e = x.options.findIndex((e) => e === x.value);
+			e < 0 || I(e);
+		}
+		function R(e) {
+			if (x.isDisabled(e)) return;
+			let t = x.options.findIndex((t) => t === e);
+			t < 0 || (I(t), S("update:value", e));
+		}
+		function z() {
+			let e = C.value?.wrapRef;
+			if (!e) return;
+			let t = P(Math.round(e.scrollTop / x.itemHeight));
+			t !== null && (I(t), S("update:value", x.options[t]));
+		}
+		function B() {
+			w.value || (j(), T = setTimeout(() => {
+				z();
+			}, 120));
+		}
+		return _(() => x.value, () => {
+			s(() => {
+				L();
+			});
+		}), d(() => {
+			s(() => {
+				L();
+			});
+		}), u(() => {
+			j();
+		}), (n, s) => (f(), r("div", {
+			class: "i-time-picker-column relative min-w-0 flex-1 overflow-hidden",
+			style: l(M.value)
+		}, [
+			s[0] ||= i("div", { class: "i-time-picker-column__fade i-time-picker-column__fade--top pointer-events-none absolute inset-x-0 top-0 z-20" }, null, -1),
+			s[1] ||= i("div", { class: "i-time-picker-column__fade i-time-picker-column__fade--bottom pointer-events-none absolute inset-x-0 bottom-0 z-20" }, null, -1),
+			a(g(e), {
+				ref_key: "scrollbarRef",
+				ref: C,
+				class: "i-time-picker-column__scrollbar relative z-0 w-full",
+				height: E.value,
+				noresize: "",
+				onScroll: B
+			}, {
+				default: v(() => [
+					i("div", {
+						class: "i-time-picker-column__spacer",
+						style: l(O.value)
+					}, null, 4),
+					(f(!0), r(t, null, m(o.options, (e) => (f(), r("div", {
+						key: e,
+						class: c(["i-time-picker-column__item flex items-center justify-center px-10 text-13 leading-16 transition-colors", N(e)]),
+						style: l(k.value),
+						onClick: (t) => R(e)
+					}, h(A(e)), 15, y))), 128)),
+					i("div", {
+						class: "i-time-picker-column__spacer",
+						style: l(O.value)
+					}, null, 4)
+				]),
+				_: 1
+			}, 8, ["height"])
+		], 4));
+	}
+});
+//#endregion
+export { b as default };

package/dist/es/components/i-time-picker/src/time-picker.mjs

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

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

@@ -0,0 +1,267 @@
+import e from "../../i-popover/index.mjs";
+import { FORM_ITEM_CONTEXT_KEY as t } from "../../i-form/src/context.mjs";
+import n from "../../i-icon/index.mjs";
+import r from "../../i-button/index.mjs";
+import i from "../../i-input/index.mjs";
+import a from "./components/time-picker-column.mjs";
+import { computed as o, createBlock as s, createCommentVNode as ee, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, inject as te, nextTick as f, normalizeStyle as p, openBlock as m, ref as h, unref as g, watch as _, withCtx as v, withKeys as y, withModifiers as b } from "vue";
+//#region src/components/i-time-picker/src/time-picker.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "i-time-picker__panel flex w-full min-w-170 flex-col gap-10 box-border" }, S = { class: "i-time-picker__footer flex justify-end gap-8 border-t border-solid border-black-5 pt-10" }, C = 32, ne = 5, w = /* @__PURE__ */ d({
+	name: "i-time-picker",
+	__name: "time-picker",
+	props: {
+		modelValue: { default: void 0 },
+		placeholder: { default: "请选择时间" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		validateEvent: {
+			type: Boolean,
+			default: !0
+		},
+		disabledHours: {
+			type: Function,
+			default: void 0
+		},
+		disabledMinutes: {
+			type: Function,
+			default: void 0
+		},
+		disabledSeconds: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"visible-change"
+	],
+	setup(d, { expose: w, emit: T }) {
+		let E = d, D = T, O = Array.from({ length: 24 }, (e, t) => t), k = Array.from({ length: 60 }, (e, t) => t), A = Array.from({ length: 60 }, (e, t) => t), j = h(null), M = h(!1), N = h(H()), P = te(t, void 0), F = o(() => E.modelValue ?? ""), I = o(() => E.clearable && !E.disabled && !!E.modelValue), L = o(() => ({
+			"--i-time-picker-selection-top": `${Math.floor(ne / 2) * C}px`,
+			"--i-time-picker-selection-height": `${C}px`
+		})), R = o(() => O.some((e) => !G(e))), z = o(() => k.some((e) => !K(e, N.value.hour))), B = o(() => A.some((e) => !q(e, N.value.hour, N.value.minute))), V = o(() => !R.value || !z.value || !B.value ? !1 : !G(N.value.hour) && !K(N.value.minute, N.value.hour) && !q(N.value.second, N.value.hour, N.value.minute));
+		function H() {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				hour: e.getHours(),
+				minute: e.getMinutes(),
+				second: e.getSeconds()
+			};
+		}
+		function U(e) {
+			if (!e) return null;
+			let t = /^(\d{2}):(\d{2}):(\d{2})$/.exec(e);
+			if (!t) return null;
+			let n = Number(t[1]), r = Number(t[2]), i = Number(t[3]);
+			return n > 23 || r > 59 || i > 59 ? null : {
+				hour: n,
+				minute: r,
+				second: i
+			};
+		}
+		function W(e) {
+			return [
+				e.hour,
+				e.minute,
+				e.second
+			].map((e) => String(e).padStart(2, "0")).join(":");
+		}
+		function G(e) {
+			return E.disabledHours?.(e) ?? !1;
+		}
+		function K(e, t) {
+			return E.disabledMinutes?.(e, t) ?? !1;
+		}
+		function q(e, t, n) {
+			return E.disabledSeconds?.(e, t, n) ?? !1;
+		}
+		function J(e, t, n) {
+			let r = e.findIndex((e) => e === t), i = r >= 0 ? r : 0;
+			if (!n(e[i])) return e[i];
+			for (let t = i + 1; t < e.length; t += 1) if (!n(e[t])) return e[t];
+			for (let t = i - 1; t >= 0; --t) if (!n(e[t])) return e[t];
+			return null;
+		}
+		function Y(e) {
+			let t = Math.max(0, k.indexOf(e));
+			return [...k.slice(t), ...k.slice(0, t)];
+		}
+		function X() {
+			let e = U(E.modelValue) ?? H();
+			for (let t of [...O.slice(e.hour), ...O.slice(0, e.hour)]) if (!G(t)) for (let n of Y(e.minute)) {
+				if (K(n, t)) continue;
+				let r = J(A, e.second, (e) => q(e, t, n));
+				if (r !== null) return {
+					hour: t,
+					minute: n,
+					second: r
+				};
+			}
+			return e;
+		}
+		function Z() {
+			E.validateEvent && P?.validate("change");
+		}
+		function re(e) {
+			return K(e, N.value.hour);
+		}
+		function ie(e) {
+			return q(e, N.value.hour, N.value.minute);
+		}
+		function Q() {
+			E.disabled || (M.value = !0);
+		}
+		function ae(e) {
+			let t = J(O, e, G);
+			if (t === null) return;
+			N.value.hour = t;
+			let n = J(k, N.value.minute, (e) => K(e, t));
+			if (n !== null) {
+				N.value.minute = n;
+				let e = J(A, N.value.second, (e) => q(e, t, n));
+				e !== null && (N.value.second = e);
+			}
+		}
+		function $(e) {
+			let t = J(k, e, (e) => K(e, N.value.hour));
+			if (t === null) return;
+			N.value.minute = t;
+			let n = J(A, N.value.second, (e) => q(e, N.value.hour, t));
+			n !== null && (N.value.second = n);
+		}
+		function oe(e) {
+			let t = J(A, e, (e) => q(e, N.value.hour, N.value.minute));
+			t !== null && (N.value.second = t);
+		}
+		function se() {
+			if (!V.value) return;
+			let e = W(N.value);
+			D("update:modelValue", e), D("change", e), Z(), M.value = !1;
+		}
+		function ce() {
+			M.value = !1;
+		}
+		function le() {
+			D("update:modelValue", void 0), D("change", void 0), D("clear"), Z(), M.value = !1;
+		}
+		function ue() {
+			D("visible-change", !0);
+		}
+		function de() {
+			D("visible-change", !1);
+		}
+		return _(M, (e) => {
+			e && (N.value = X());
+		}), w({
+			show: () => {
+				E.disabled || (M.value = !0);
+			},
+			hide: () => {
+				M.value = !1;
+			},
+			focus: () => {
+				f(() => {
+					j.value?.focus();
+				});
+			},
+			blur: () => {
+				j.value?.blur();
+			}
+		}), (t, o) => (m(), s(g(e), {
+			visible: M.value,
+			"onUpdate:visible": o[1] ||= (e) => M.value = e,
+			trigger: "click",
+			placement: "bottom-start",
+			"show-arrow": !1,
+			offset: 4,
+			disabled: d.disabled,
+			"same-width": "",
+			onShow: ue,
+			onHide: de
+		}, {
+			content: v(() => [c("div", x, [c("div", {
+				class: "i-time-picker__columns relative flex gap-5 overflow-hidden",
+				style: p(L.value)
+			}, [
+				o[2] ||= c("div", { class: "i-time-picker__selection pointer-events-none absolute left-0 right-0 z-10" }, null, -1),
+				u(a, {
+					value: N.value.hour,
+					options: g(O),
+					"is-disabled": G,
+					"onUpdate:value": ae
+				}, null, 8, ["value", "options"]),
+				u(a, {
+					value: N.value.minute,
+					options: g(k),
+					"is-disabled": re,
+					"onUpdate:value": $
+				}, null, 8, ["value", "options"]),
+				u(a, {
+					value: N.value.second,
+					options: g(A),
+					"is-disabled": ie,
+					"onUpdate:value": oe
+				}, null, 8, ["value", "options"])
+			], 4), c("div", S, [u(g(r), {
+				type: "black",
+				plain: "",
+				size: "medium",
+				onClick: ce
+			}, {
+				default: v(() => [...o[3] ||= [l("取消", -1)]]),
+				_: 1
+			}), u(g(r), {
+				size: "medium",
+				disabled: !V.value,
+				onClick: se
+			}, {
+				default: v(() => [...o[4] ||= [l("确定", -1)]]),
+				_: 1
+			}, 8, ["disabled"])])])]),
+			default: v(() => [u(g(i), {
+				ref_key: "triggerRef",
+				ref: j,
+				class: "i-time-picker",
+				"model-value": F.value,
+				placeholder: d.placeholder,
+				disabled: d.disabled,
+				readonly: "",
+				"validate-event": !1,
+				onKeydown: [y(b(Q, ["prevent"]), ["enter"]), y(b(Q, ["prevent"]), ["space"])]
+			}, {
+				prefix: v(() => [u(g(n), {
+					class: "i-time-picker__prefix text-black-30",
+					name: "icon-time",
+					width: 20,
+					height: 20
+				})]),
+				suffix: v(() => [I.value ? (m(), s(g(n), {
+					key: 0,
+					class: "i-time-picker__clear cursor-pointer text-black-30 hover:text-black-50",
+					name: "icon-clear-fill",
+					width: 20,
+					height: 20,
+					onMousedown: o[0] ||= b(() => {}, ["prevent"]),
+					onClick: b(le, ["stop"])
+				})) : ee("", !0)]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"placeholder",
+				"disabled",
+				"onKeydown"
+			])]),
+			_: 1
+		}, 8, ["visible", "disabled"]));
+	}
+});
+//#endregion
+export { w as default };

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

@@ -0,0 +1,11 @@
+import { withInstall as e } from "../../utils/install.mjs";
+import t from "./src/tooltip.mjs";
+import { vTooltip as n } from "./src/directive.mjs";
+//#region src/components/i-tooltip/index.ts
+var r = e(t), i = n;
+i.install = (e) => {
+	e.directive("tooltip", i);
+};
+var a = i;
+//#endregion
+export { i as ITooltipDirective, r as default, a as vTooltipDirective };

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

@@ -0,0 +1,59 @@
+import { ensureSingletonMounted as e, getCurrentTooltipReference as t, hideTooltip as n, showTooltip as r } from "./singleton.mjs";
+//#region src/components/i-tooltip/src/directive.ts
+function i(e) {
+	return typeof e == "string" ? { content: e } : e ?? { content: "" };
+}
+function a(e, t) {
+	return {
+		reference: e,
+		title: t.title ?? "",
+		content: t.content ?? "",
+		placement: t.placement ?? "top",
+		theme: t.theme ?? "light",
+		showArrow: t.showArrow ?? !0,
+		offset: t.offset ?? 8
+	};
+}
+function o(e, t) {
+	!t.content && !t.title || t.disabled || r(a(e, t));
+}
+var s = {
+	getSSRProps() {
+		return {};
+	},
+	mounted(t, r) {
+		e();
+		let a = t, s = {
+			options: i(r.value),
+			handleMouseEnter: () => {
+				o(a, s.options);
+			},
+			handleMouseLeave: () => {
+				n();
+			},
+			handleFocusIn: () => {
+				o(a, s.options);
+			},
+			handleFocusOut: () => {
+				n();
+			}
+		};
+		a.__iTooltipState = s, a.addEventListener("mouseenter", s.handleMouseEnter), a.addEventListener("mouseleave", s.handleMouseLeave), a.addEventListener("focusin", s.handleFocusIn), a.addEventListener("focusout", s.handleFocusOut);
+	},
+	updated(e, r) {
+		let a = e, s = a.__iTooltipState;
+		if (s && (s.options = i(r.value), t() === a)) {
+			if (!s.options.content && !s.options.title || s.options.disabled) {
+				n(!0);
+				return;
+			}
+			o(a, s.options);
+		}
+	},
+	unmounted(e) {
+		let r = e, i = r.__iTooltipState;
+		i && (r.removeEventListener("mouseenter", i.handleMouseEnter), r.removeEventListener("mouseleave", i.handleMouseLeave), r.removeEventListener("focusin", i.handleFocusIn), r.removeEventListener("focusout", i.handleFocusOut), t() === r && n(!0), delete r.__iTooltipState);
+	}
+};
+//#endregion
+export { s as vTooltip };

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

@@ -0,0 +1,57 @@
+import { nextZIndex as e } from "../../../utils/z-index.mjs";
+import t from "./tooltip-content.mjs";
+import { createVNode as n, render as r } from "vue";
+//#region src/components/i-tooltip/src/singleton.ts
+var i = 100, a = null, o = null, s = null;
+function c() {
+	return {
+		visible: !1,
+		title: "",
+		content: "",
+		placement: "top",
+		theme: "light",
+		showArrow: !0,
+		offset: 8,
+		zIndex: e(),
+		interactive: !1,
+		reference: null
+	};
+}
+function l() {
+	s &&= (clearTimeout(s), null);
+}
+function u() {
+	!a || !o || r(n(t, { ...o }), a);
+}
+function d() {
+	typeof document > "u" || (a || (a = document.createElement("div"), a.dataset.iTooltipContainer = "", a.style.position = "fixed", a.style.inset = "0", a.style.pointerEvents = "none", a.style.zIndex = "2147483647", document.body.appendChild(a)), o ||= c(), u());
+}
+function f(t) {
+	d(), l(), o && (o = {
+		...o,
+		...t,
+		visible: !0,
+		interactive: !1,
+		zIndex: e()
+	}, u());
+}
+function p(e = !1) {
+	l();
+	let t = () => {
+		o && (o = {
+			...o,
+			visible: !1,
+			reference: null
+		}, u());
+	};
+	if (e) {
+		t();
+		return;
+	}
+	s = setTimeout(t, i);
+}
+function m() {
+	return o?.reference ?? null;
+}
+//#endregion
+export { d as ensureSingletonMounted, m as getCurrentTooltipReference, p as hideTooltip, f as showTooltip };

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

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

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

@@ -0,0 +1,80 @@
+import e from "../../i-transition/index.mjs";
+import { usePopper as t } from "../../i-popover/src/usePopper.mjs";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, toRef as m, unref as h, useSlots as g, withCtx as _ } from "vue";
+//#region src/components/i-tooltip/src/tooltip-content.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "i-tooltip__inner break-words overflow-x-hidden overflow-y-auto" }, y = /* @__PURE__ */ s({
+	name: "i-tooltip-content",
+	__name: "tooltip-content",
+	props: {
+		visible: {
+			type: Boolean,
+			default: !1
+		},
+		reference: { default: null },
+		zIndex: { default: 2e3 },
+		interactive: {
+			type: Boolean,
+			default: !1
+		},
+		title: { default: "" },
+		content: { default: "" },
+		placement: { default: "top" },
+		theme: { default: "light" },
+		showArrow: {
+			type: Boolean,
+			default: !0
+		},
+		offset: { default: 8 }
+	},
+	emits: [
+		"mouseenter",
+		"mouseleave",
+		"focusin",
+		"focusout"
+	],
+	setup(s, { expose: y, emit: b }) {
+		let x = s, S = b, C = {
+			dark: "i-tooltip--dark bg-black text-white",
+			light: "i-tooltip--light bg-white text-black"
+		}, w = g(), T = d(null), E = d(null), D = n(() => !!w.default || !!x.title || !!x.content), O = n(() => C[x.theme]), { floatingStyles: k, arrowStyles: A, isPositioned: j } = t(m(x, "reference"), T, E, {
+			placement: m(x, "placement"),
+			showArrow: m(x, "showArrow"),
+			offset: m(x, "offset"),
+			open: m(x, "visible")
+		}), M = n(() => {
+			let e = {
+				...k.value,
+				zIndex: x.zIndex,
+				pointerEvents: x.interactive ? "auto" : "none",
+				boxShadow: x.theme === "light" ? "0px 10px 50px 10px var(--i-color-black-10)" : "0px 10px 50px 0px var(--i-color-black-10)"
+			};
+			return j.value || (e.visibility = "hidden"), e;
+		});
+		return y({ floatingRef: T }), (t, n) => (u(), r(h(e), { name: "fade" }, {
+			default: _(() => [s.visible && D.value ? (u(), a("div", {
+				key: 0,
+				ref_key: "floatingRef",
+				ref: T,
+				class: c(["i-tooltip absolute box-border rounded-10 pl-16 pr-15 py-13 break-words", O.value]),
+				style: l(M.value),
+				role: "tooltip",
+				onMouseenter: n[0] ||= (e) => S("mouseenter"),
+				onMouseleave: n[1] ||= (e) => S("mouseleave"),
+				onFocusin: n[2] ||= (e) => S("focusin"),
+				onFocusout: n[3] ||= (e) => S("focusout")
+			}, [s.showArrow ? (u(), a("div", {
+				key: 0,
+				ref_key: "arrowRef",
+				ref: E,
+				class: "i-tooltip__arrow",
+				style: l(h(A))
+			}, null, 4)) : i("", !0), o("div", v, [f(t.$slots, "default", {}, () => [s.title ? (u(), a("div", {
+				key: 0,
+				class: c(["i-tooltip__title mb-5 text-14 font-semibold leading-18", [s.theme === "dark" ? "text-white" : "text-black"]])
+			}, p(s.title), 3)) : i("", !0), o("div", { class: c(["i-tooltip__content text-13 leading-16", [s.theme === "dark" ? "text-white" : "text-black"]]) }, p(s.content), 3)], !0)])], 38)) : i("", !0)]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { y as default };

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

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