color-star-custom-components 0.0.15 → 0.0.17

package/es/chunks/IconSelect.DjNvTfvM.js

@@ -0,0 +1,162 @@
+import { t as withInstall } from "./utils.BFFtVZUp.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.BgwWMokO.js";
+import { t as layout_default$1 } from "./layout.FqoRQKdx.js";
+import { n as getIconLibrary, r as iconLibraryMap, t as getIconComponent } from "./config.t_HHFoB9.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, markRaw, normalizeClass, onMounted, openBlock, ref, renderList, resolveDynamicComponent, shallowRef, unref, useCssVars, watch, withCtx } from "vue";
+import { ElIcon, ElInput, ElPopover } from "element-plus";
+import '../assets/IconSelect.css';var _hoisted_1 = { class: "icon-select-content flex flex-col overflow-hidden" }, _hoisted_2 = {
+	key: 0,
+	class: "no-data flex items-center justify-center w-full"
+}, _hoisted_3 = {
+	key: 1,
+	class: "icon-select-grid overflow-y-auto display-grid"
+}, _hoisted_4 = {
+	key: 0,
+	class: "loading-text flex items-center justify-center w-full"
+}, _hoisted_5 = ["title", "onClick"];
+const IconSelect = withInstall(/* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ Object.assign({ name: "IconSelect" }, {
+	__name: "layout",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: "请选择图标"
+		},
+		width: {
+			type: Number,
+			default: 520
+		},
+		iconSize: {
+			type: Number,
+			default: 62
+		},
+		library: {
+			type: String,
+			default: iconLibraryMap.lingyun,
+			validator: (c) => Object.values(iconLibraryMap).includes(c)
+		},
+		iconSearch: {
+			type: Object,
+			default: null
+		},
+		iconAdd: {
+			type: Object,
+			default: null
+		},
+		iconEmpty: {
+			type: Object,
+			default: null
+		},
+		iconColor: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(c, { emit: M }) {
+		useCssVars((M) => ({ v051e54a2: c.iconColor }));
+		let P = c, F = M, I = ref(!1), L = ref(""), R = ref(P.modelValue), z = ref(null), B = ref([]), V = ref(!1), H = shallowRef({
+			IconSearch: null,
+			IconAdd: null
+		}), U = async (c) => {
+			let M = c === "search" ? P.iconSearch : P.iconAdd;
+			if (M) return M;
+			try {
+				return (await import("color-message-lingyun-vue"))[c === "search" ? "IconSearch" : "IconAdd"];
+			} catch {
+				return console.warn(`color-message-lingyun-vue not found, ${c} icon will not be displayed`), null;
+			}
+		}, W = async () => {
+			let [c, M] = await Promise.all([U("search"), U("add")]);
+			return {
+				IconSearch: c,
+				IconAdd: M
+			};
+		}, G = async () => {
+			V.value = !0;
+			try {
+				let c = await getIconLibrary(P.library);
+				B.value = Object.entries(c).filter(([c]) => c.toLowerCase() && !["default", "icons"]?.includes(c)).map(([c, M]) => ({
+					name: c,
+					component: markRaw(M)
+				}));
+			} catch (c) {
+				console.error("Failed to load icons:", c), B.value = [];
+			} finally {
+				V.value = !1;
+			}
+		}, K = computed(() => L.value ? B.value.filter((c) => c.name.toLowerCase().includes(L.value.toLowerCase())) : B.value), q = async () => {
+			if (!R.value) {
+				z.value = null;
+				return;
+			}
+			let c = await getIconComponent(P.library, R.value);
+			z.value = c ? markRaw(c) : null;
+		}, J = (c) => {
+			R.value = c.name, F("update:modelValue", c.name), I.value = !1;
+		};
+		return watch(() => P.modelValue, (c) => {
+			R.value = c, q();
+		}), watch(() => P.library, () => {
+			G(), q();
+		}), watch(() => R.value, () => {
+			q();
+		}), onMounted(async () => {
+			H.value = await W(), G(), q();
+		}), (M, N) => (openBlock(), createBlock(unref(ElPopover), {
+			visible: I.value,
+			"onUpdate:visible": N[1] ||= (c) => I.value = c,
+			placement: "bottom-start",
+			width: c.width,
+			trigger: "click"
+		}, {
+			reference: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex items-center pointer radius-16 justify-center w-icon-item", {
+				"select-icon-box bg-fcfdff text-202434 fz-14 flex-col": !z.value,
+				"icon-item": R.value
+			}]) }, [z.value ? (openBlock(), createBlock(unref(ElIcon), {
+				key: 0,
+				size: c.iconSize
+			}, {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(z.value)))]),
+				_: 1
+			}, 8, ["size"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [H.value.IconAdd ? (openBlock(), createBlock(unref(ElIcon), {
+				key: 0,
+				size: 16
+			}, {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(H.value.IconAdd)))]),
+				_: 1
+			})) : createCommentVNode("", !0), N[2] ||= createTextVNode(" 上传 ", -1)], 64))], 2)]),
+			default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(ElInput), {
+				class: "mg-b-12",
+				modelValue: L.value,
+				"onUpdate:modelValue": N[0] ||= (c) => L.value = c,
+				placeholder: "搜索图标",
+				clearable: ""
+			}, createSlots({ _: 2 }, [H.value.IconSearch ? {
+				name: "prefix",
+				fn: withCtx(() => [createVNode(unref(ElIcon), { size: 16 }, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(H.value.IconSearch)))]),
+					_: 1
+				})]),
+				key: "0"
+			} : void 0]), 1032, ["modelValue"]), K.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(layout_default$1, {
+				icon: c.iconEmpty,
+				text: "未找到相关图标"
+			}, null, 8, ["icon"])])) : (openBlock(), createElementBlock("div", _hoisted_3, [V.value ? (openBlock(), createElementBlock("div", _hoisted_4, " 加载中... ")) : (openBlock(!0), createElementBlock(Fragment, { key: 1 }, renderList(K.value, (c) => (openBlock(), createElementBlock("div", {
+				key: c.name,
+				class: normalizeClass(["icon-item radius-8 justify-center items-center pointer flex w-icon-item", { active: R.value === c.name }]),
+				title: c.name,
+				onClick: (M) => J(c)
+			}, [createVNode(unref(ElIcon), { size: 50 }, {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(c.component)))]),
+				_: 2
+			}, 1024)], 10, _hoisted_5))), 128))]))])]),
+			_: 1
+		}, 8, ["visible", "width"]));
+	}
+}), [["__scopeId", "data-v-4106dcd4"]]));
+var IconSelect_default = IconSelect;
+export { IconSelect_default as n, IconSelect as t };