@me-framework/me-ui-antdv-next 0.0.26 → 0.0.28

package/dist/chunks/input-icon-selector-BrrR4KK6.js

@@ -0,0 +1,228 @@
+import { t as e } from "./icon-CXjgApCy.js";
+import { Fragment as t, 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, onMounted as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveComponent as _, unref as v, watch as y, withCtx as b } from "vue";
+import * as x from "@lucide/vue";
+import S from "remixicon/fonts/remixicon.symbol.svg";
+//#region src/components/input-icon-selector/index.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "me-input-icon-selector__search" }, w = {
+	key: 0,
+	class: "me-input-icon-selector__list"
+}, T = ["title", "onClick"], E = {
+	key: 1,
+	class: "me-input-icon-selector__empty"
+}, D = { class: "me-input-icon-selector__footer" }, O = {
+	key: 0,
+	href: "https://remixicon.com/",
+	target: "_blank",
+	class: "me-input-icon-selector__link"
+}, k = {
+	key: 1,
+	href: "https://lucide.dev/icons/",
+	target: "_blank",
+	class: "me-input-icon-selector__link"
+}, A = { key: 2 }, j = /* @__PURE__ */ l({
+	name: "MeInputIconSelector",
+	__name: "index",
+	props: {
+		modelValue: { default: "" },
+		sources: { default: () => [
+			"lucide",
+			"remixicon",
+			"iconfont"
+		] },
+		iconfontData: { default: () => [] },
+		placeholder: { default: "请选择图标" },
+		searchPlaceholder: { default: "搜索图标" },
+		pageSize: { default: 30 },
+		popoverWidth: { default: 280 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "middle" },
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		iconfontPrefix: { default: "iconfont" },
+		iconfontMode: { default: "class" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(l, { emit: j }) {
+		let M = l, N = j, P = m(!1), F = m(""), I = m(1), L = m("lucide"), R = n(() => {
+			if (typeof M.popoverWidth == "number") return M.popoverWidth;
+			let e = parseInt(M.popoverWidth, 10);
+			return isNaN(e) ? 280 : e;
+		}), z = n(() => Object.keys(x).filter((e) => {
+			if (!/^[A-Z]/.test(e)) return !1;
+			let t = x[e];
+			return typeof t != "object" && typeof t != "function" || e === "icons" || e === "createLucideIcon" || e === "default" ? !1 : t && (t.render || t.setup || t.__name) ? !0 : typeof t == "function" || typeof t == "object";
+		})), B = m([]), V = !1;
+		function H() {
+			typeof document > "u" || V || (V = !0, fetch(S).then((e) => e.text()).then((e) => {
+				let t = new DOMParser().parseFromString(e, "image/svg+xml").querySelectorAll("symbol[id^=\"ri-\"]");
+				B.value = Array.from(t).map((e) => e.getAttribute("id") || "");
+			}).catch((e) => {
+				console.warn("[MeInputIconSelector] Failed to load remixicon list:", e), V = !1;
+			}));
+		}
+		f(() => {
+			H();
+		});
+		let U = {
+			lucide: {
+				label: "Lucide",
+				get data() {
+					return z.value;
+				}
+			},
+			remixicon: {
+				label: "Remixicon",
+				get data() {
+					return B.value;
+				}
+			},
+			iconfont: {
+				label: "Iconfont",
+				data: []
+			}
+		}, W = n(() => M.sources.map((e) => ({
+			key: e,
+			label: U[e].label
+		})));
+		y(() => M.sources, (e) => {
+			e.includes(L.value) || (L.value = e[0] || "lucide");
+		}, { immediate: !0 });
+		let G = n(() => L.value === "iconfont" ? M.iconfontData : U[L.value].data), K = n(() => {
+			let e = F.value.trim().toLowerCase();
+			return e ? G.value.filter((t) => t.toLowerCase().includes(e)) : G.value;
+		}), q = n(() => {
+			let e = (I.value - 1) * M.pageSize, t = e + M.pageSize;
+			return K.value.slice(e, t);
+		});
+		y(F, () => {
+			I.value = 1;
+		}), y(L, () => {
+			I.value = 1, F.value = "";
+		});
+		function J(e) {
+			N("update:modelValue", e), N("change", e), P.value = !1;
+		}
+		function Y(e) {
+			let t = typeof e == "string" ? e : e.target?.value || "";
+			N("update:modelValue", t), N("change", t);
+		}
+		function X() {
+			N("update:modelValue", ""), N("change", "");
+		}
+		return (n, f) => {
+			let m = _("a-space-addon"), y = _("a-input"), x = _("a-tab-pane"), S = _("a-tabs"), j = _("a-pagination"), N = _("a-button"), z = _("a-popover"), B = _("a-space-compact");
+			return p(), r(B, {
+				class: "me-input-icon-selector",
+				style: { width: "100%" }
+			}, {
+				default: b(() => [
+					l.modelValue ? (p(), r(m, { key: 0 }, {
+						default: b(() => [c(v(e), {
+							name: l.modelValue,
+							size: 16
+						}, null, 8, ["name"])]),
+						_: 1
+					})) : i("", !0),
+					c(y, {
+						value: l.modelValue,
+						placeholder: M.placeholder,
+						disabled: M.disabled,
+						size: M.size,
+						"allow-clear": M.clearable,
+						style: { width: "100%" },
+						"onUpdate:value": Y,
+						onChange: Y,
+						onClear: X
+					}, null, 8, [
+						"value",
+						"placeholder",
+						"disabled",
+						"size",
+						"allow-clear"
+					]),
+					c(z, {
+						open: P.value,
+						"onUpdate:open": f[3] ||= (e) => P.value = e,
+						trigger: "click",
+						placement: "bottomRight",
+						"overlay-class-name": "me-input-icon-selector-popover"
+					}, {
+						content: b(() => [o("div", {
+							class: "me-input-icon-selector__popover",
+							style: d({ width: R.value + "px" })
+						}, [
+							o("div", C, [c(y, {
+								value: F.value,
+								"onUpdate:value": f[0] ||= (e) => F.value = e,
+								"allow-clear": "",
+								placeholder: M.searchPlaceholder,
+								size: "small"
+							}, null, 8, ["value", "placeholder"])]),
+							c(S, {
+								activeKey: L.value,
+								"onUpdate:activeKey": f[1] ||= (e) => L.value = e,
+								class: "me-input-icon-selector__tabs",
+								size: "small"
+							}, {
+								default: b(() => [(p(!0), a(t, null, h(W.value, (e) => (p(), r(x, {
+									key: e.key,
+									tab: e.label
+								}, null, 8, ["tab"]))), 128))]),
+								_: 1
+							}, 8, ["activeKey"]),
+							q.value.length > 0 ? (p(), a("div", w, [(p(!0), a(t, null, h(q.value, (t, n) => (p(), a("div", {
+								key: n,
+								class: u(["icon-item", { "is-active": t === l.modelValue }]),
+								title: t,
+								onClick: (e) => J(t)
+							}, [c(v(e), {
+								name: t,
+								type: L.value,
+								size: 18,
+								"iconfont-prefix": M.iconfontPrefix,
+								"iconfont-mode": M.iconfontMode
+							}, null, 8, [
+								"name",
+								"type",
+								"iconfont-prefix",
+								"iconfont-mode"
+							])], 10, T))), 128))])) : (p(), a("div", E, " 暂无匹配的图标 ")),
+							o("div", D, [L.value === "remixicon" ? (p(), a("a", O, " remixicon.com ")) : L.value === "lucide" ? (p(), a("a", k, " lucide.dev ")) : (p(), a("span", A)), c(j, {
+								current: I.value,
+								"onUpdate:current": f[2] ||= (e) => I.value = e,
+								"page-size": M.pageSize,
+								total: K.value.length,
+								size: "small",
+								simple: "",
+								class: "me-input-icon-selector__pagination"
+							}, null, 8, [
+								"current",
+								"page-size",
+								"total"
+							])])
+						], 4)]),
+						default: b(() => [g(n.$slots, "default", {}, () => [c(N, { size: M.size }, {
+							default: b(() => [...f[4] ||= [s("选择", -1)]]),
+							_: 1
+						}, 8, ["size"])])]),
+						_: 3
+					}, 8, ["open"])
+				]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region src/components/input-icon-selector/index.ts
+j.install = (e) => {
+	e.component("MeInputIconSelector", j);
+};
+var M = j;
+//#endregion
+export { j as n, M as t };

package/dist/icon/index.js

@@ -1,4 +1,4 @@
-import { t as e } from "../chunks/icon-DdoH0MfT.js";
+import { t as e } from "../chunks/icon-CXjgApCy.js";
 //#region src/components/icon/index.ts
 e.install = (t) => {
 	t.component("MeIcon", e);