@gct-paas/core-web 0.1.4-dev.8 → 0.1.5-dev.0

package/es/components/icon-next/src/IconNext.vue_vue_type_script_setup_true_name_IconNext_lang.mjs

@@ -0,0 +1,113 @@
+import svg_icon_default from "../../svg-icon/svg-icon.vue.mjs";
+import { IconNamespaceEnum } from "../types/index.mjs";
+import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+import { VITE_MINIO_PATH } from "@gct-paas/core";
+import { IconPark } from "@icon-park/vue-next/es/all";
+//#region src/components/icon-next/src/IconNext.vue?vue&type=script&setup=true&name=IconNext&lang.ts
+var IconNext_vue_vue_type_script_setup_true_name_IconNext_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "IconNext",
+	props: {
+		value: {
+			type: [String, Object],
+			required: true
+		},
+		color: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		background: {
+			type: String,
+			default: "transparent"
+		},
+		size: {
+			type: Number,
+			default: 24
+		}
+	},
+	setup(__props) {
+		function fileUrlParser(url) {
+			if (!url) return url;
+			return `${VITE_MINIO_PATH}${url.startsWith("/") ? "" : "/"}${url}`;
+		}
+		const props = __props;
+		/**
+		* 图标命名空间
+		*/
+		const namespace = computed(() => {
+			const value = props.value;
+			if (!value) return void 0;
+			if (value.includes(":")) return value.split(":")[0];
+			else if (value.startsWith("preset-")) return IconNamespaceEnum.Preset;
+		});
+		/**
+		* 图标实际名称
+		*/
+		const iconName = computed(() => {
+			const value = props.value;
+			if (!value) return void 0;
+			if (value.includes(":")) return value.split(":")[1];
+			return props.value;
+		});
+		const iconBgImage = computed(() => {
+			return `url('${fileUrlParser(iconName.value)}')`;
+		});
+		return (_ctx, _cache) => {
+			return namespace.value === unref(IconNamespaceEnum).IconPark ? (openBlock(), createBlock(unref(IconPark), {
+				key: `${iconName.value}-${__props.size}`,
+				type: iconName.value,
+				style: normalizeStyle({
+					"--color": __props.color,
+					"--bg-color": __props.background
+				}),
+				class: "icon-next",
+				size: __props.size
+			}, null, 8, [
+				"type",
+				"style",
+				"size"
+			])) : namespace.value === unref(IconNamespaceEnum).Preset || namespace.value === unref(IconNamespaceEnum).Platform ? (openBlock(), createBlock(svg_icon_default, {
+				key: 1,
+				name: iconName.value,
+				style: normalizeStyle({
+					"--color": __props.color,
+					"--bg-color": __props.background
+				}),
+				class: "icon-next",
+				size: __props.size
+			}, null, 8, [
+				"name",
+				"style",
+				"size"
+			])) : namespace.value === unref(IconNamespaceEnum).Asset ? (openBlock(), createElementBlock("i", {
+				key: 2,
+				class: "icon-next",
+				style: normalizeStyle({
+					"--size": __props.size + "px",
+					"--bg-image": iconBgImage.value
+				})
+			}, null, 4)) : namespace.value === unref(IconNamespaceEnum).GctIconFont ? (openBlock(), createElementBlock("i", {
+				key: 3,
+				class: normalizeClass([`gct-iconfont ${iconName.value}`, "icon-next"]),
+				style: normalizeStyle({
+					fontSize: __props.size + "px",
+					lineHeight: 1,
+					"--color": __props.color,
+					"--bg-color": __props.background,
+					"--size": __props.size + "px"
+				})
+			}, null, 6)) : (openBlock(), createElementBlock("i", {
+				key: 4,
+				class: normalizeClass([`iconfont ${iconName.value}`, "icon-next"]),
+				style: normalizeStyle({
+					fontSize: __props.size + "px",
+					lineHeight: 1,
+					"--color": __props.color,
+					"--bg-color": __props.background,
+					"--size": __props.size + "px"
+				})
+			}, null, 6));
+		};
+	}
+});
+//#endregion
+export { IconNext_vue_vue_type_script_setup_true_name_IconNext_lang_default as default };

package/es/components/icon-next/src/IconNext.vue_vue_type_style_index_0_scoped_360a87c9_lang.css

@@ -0,0 +1,18 @@
+.icon-next[data-v-360a87c9] {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color);
+  background-color: var(--bg-color);
+  transition: all 0.3s;
+}
+.icon-next > svg[data-v-360a87c9] {
+  transform: translateY(1px);
+}
+i.icon-next[data-v-360a87c9] {
+  height: var(--size);
+  width: var(--size);
+  background-image: var(--bg-image);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}

package/es/components/icon-next/src/IconNextPicker.vue.d.ts

@@ -0,0 +1,75 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    showBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:value": (...args: any[]) => void;
+    "update:color": (...args: any[]) => void;
+    "update:background": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    showBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:color"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:background"?: ((...args: any[]) => any) | undefined;
+}>, {
+    color: string;
+    size: number;
+    disabled: boolean;
+    showColor: boolean;
+    showBackground: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    TreeScrollRef: unknown;
+    IconsScrollRef: unknown;
+}, HTMLDivElement>;
+export default _default;

package/es/components/icon-next/src/IconNextPicker.vue.mjs

@@ -0,0 +1,6 @@
+import IconNextPicker_vue_vue_type_script_setup_true_name_IconNextPicker_lang_default from "./IconNextPicker.vue_vue_type_script_setup_true_name_IconNextPicker_lang.mjs";
+import './IconNextPicker.vue_vue_type_style_index_0_lang.css';/* empty css                                                     */
+//#region src/components/icon-next/src/IconNextPicker.vue
+var IconNextPicker_default = IconNextPicker_vue_vue_type_script_setup_true_name_IconNextPicker_lang_default;
+//#endregion
+export { IconNextPicker_default as default };

package/es/components/icon-next/src/IconNextPicker.vue_vue_type_script_setup_true_name_IconNextPicker_lang.mjs

@@ -0,0 +1,379 @@
+import { IconNamespaceEnum } from "../types/index.mjs";
+import IconNext_default from "./IconNext.vue.mjs";
+import { useIconAsset } from "../hooks/useIconAsset.mjs";
+import { useIconPark } from "../hooks/useIconPark.mjs";
+import { useIconPlatform } from "../hooks/useIconPlatform.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, vModelText, withCtx, withDirectives } from "vue";
+import { cloneDeep, debounce } from "lodash-es";
+import { usePlatformConfigStore } from "@gct-paas/core";
+import { Empty, Form } from "ant-design-vue";
+import "overlayscrollbars-vue";
+//#region src/components/icon-next/src/IconNextPicker.vue?vue&type=script&setup=true&name=IconNextPicker&lang.ts
+var _hoisted_1 = { class: "icon-picker-next" };
+var _hoisted_2 = { class: "p-12px" };
+var _hoisted_3 = { class: "flex icon-picker-next__container" };
+var _hoisted_4 = { class: "icon-picker-next__cats" };
+var _hoisted_5 = [
+	"title",
+	"data-id",
+	"onClick"
+];
+var _hoisted_6 = { class: "icon-picker-next__panel" };
+var _hoisted_7 = { class: "icon-picker-next__icons" };
+var _hoisted_8 = { class: "icon__list" };
+var _hoisted_9 = [
+	"title",
+	"data-id",
+	"onClick"
+];
+var _hoisted_10 = {
+	key: 0,
+	class: "color__setting"
+};
+var _hoisted_11 = { class: "color__list" };
+var _hoisted_12 = ["onClick"];
+var _hoisted_13 = { class: "color__input" };
+var _hoisted_14 = {
+	key: 1,
+	class: "color__setting"
+};
+var _hoisted_15 = { class: "color__list" };
+var _hoisted_16 = ["onClick"];
+var _hoisted_17 = { class: "color__input" };
+var _hoisted_18 = {
+	key: 1,
+	class: "flex items-center justify-center h-full"
+};
+var DEFAULT_COLOR = "#FFFFFF";
+var DEFAULT_BACKGROUND = "#3370FF";
+var IconNextPicker_vue_vue_type_script_setup_true_name_IconNextPicker_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "IconNextPicker",
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		color: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		size: {
+			type: Number,
+			default: 30
+		},
+		showColor: {
+			type: Boolean,
+			default: false
+		},
+		background: { type: String },
+		showBackground: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:value",
+		"update:color",
+		"update:background"
+	],
+	setup(__props, { emit: __emit }) {
+		const { themeSetting } = usePlatformConfigStore();
+		const props = __props;
+		const emit = __emit;
+		const { getIconAssetCats } = useIconAsset();
+		const { getIconParkCats } = useIconPark();
+		const { getIconPlatformCats } = useIconPlatform();
+		const { onFieldChange } = Form.useInjectFormItemContext();
+		const TreeScrollRef = ref();
+		const IconsScrollRef = ref();
+		const spinning = ref(false);
+		const BASIC_COLORS = [
+			"#3370FF",
+			"#0DAA9C",
+			"#EF3232",
+			"#EFA332",
+			"#18C8D3",
+			"#A33FF2"
+		];
+		const ICON_COLOR = [DEFAULT_COLOR, ...BASIC_COLORS];
+		const ICON_BACKGROUND = ["transparent", ...BASIC_COLORS];
+		const customColor = ref(DEFAULT_COLOR);
+		const customColorChecked = ref(false);
+		const customBackground = ref(DEFAULT_COLOR);
+		const customBackgroundChecked = ref(false);
+		let catTreeCache = [];
+		const catTree = ref([]);
+		const catIcons = ref([]);
+		const selectedKeys = ref([]);
+		const searchKey = ref("");
+		const supportColor = computed(() => {
+			return catIcons.value.length > 0 && !catIcons.value[0].id.startsWith(IconNamespaceEnum.Asset);
+		});
+		/**
+		* 激活默认
+		*/
+		const activeDefault = () => {
+			let cat = catTree.value[0] || {};
+			let selectCat = void 0;
+			if (cat) selectCat = cat.icons ? cat : cat.children?.[0];
+			if (selectCat) {
+				selectedKeys.value = [selectCat.id];
+				catIcons.value = selectCat.icons;
+			} else {
+				selectedKeys.value = [];
+				catIcons.value = [];
+			}
+		};
+		/**
+		*  激活已选
+		*/
+		const activeSelected = async () => {
+			if (props.value) {
+				let cat = catTree.value.reduce((total, c) => {
+					if ("children" in c) total.push(...c.children);
+					else total.push(c);
+					return total;
+				}, []).find((c) => c.icons.map((i) => i.id).includes(props.value));
+				if (cat) {
+					selectedKeys.value = [cat.id];
+					catIcons.value = cat.icons;
+					await nextTick();
+					TreeScrollRef.value?.getElement()?.scrollIntoView({ block: "center" });
+					IconsScrollRef.value?.getElement()?.scrollIntoView({ block: "center" });
+				} else activeDefault();
+			} else activeDefault();
+		};
+		const handleVisibleChange = async (visible) => {
+			if (!visible) {
+				searchKey.value = "";
+				return;
+			}
+			spinning.value = true;
+			if (catTreeCache.length > 0) catTree.value = catTreeCache;
+			else {
+				const iconParkCats = getIconParkCats();
+				const iconAssetCats = await getIconAssetCats();
+				const iconPlatformCats = getIconPlatformCats();
+				catTreeCache = iconAssetCats.concat(iconParkCats).concat(iconPlatformCats);
+				catTree.value = catTreeCache;
+			}
+			if (!props.color) emit("update:color", DEFAULT_COLOR);
+			else if (ICON_COLOR.includes(props.color)) {
+				customColor.value = DEFAULT_COLOR;
+				customColorChecked.value = false;
+			} else {
+				customColor.value = props.color;
+				customColorChecked.value = true;
+			}
+			if (!props.background) emit("update:background", DEFAULT_BACKGROUND);
+			else if (ICON_BACKGROUND.includes(props.background)) {
+				customBackground.value = DEFAULT_COLOR;
+				customBackgroundChecked.value = false;
+			} else {
+				customBackground.value = props.background;
+				customBackgroundChecked.value = true;
+			}
+			activeSelected();
+			spinning.value = false;
+		};
+		function recursiveIcons(arr, searchKey) {
+			return arr.map((tree) => {
+				const childKey = ["children", "icons"].find((key) => !!tree[key]);
+				if (childKey) {
+					tree[childKey] = recursiveIcons(tree[childKey], searchKey);
+					if (tree[childKey].length > 0) return tree;
+					return;
+				} else {
+					if (tree._filter_.some((k) => k.includes(searchKey))) return tree;
+					return;
+				}
+			}).filter(Boolean);
+		}
+		/**
+		* 关键字过滤，基于_filter_字段过滤，支持文件名 name title tags
+		* 仅支持标准两级结构 T_T
+		* @param e
+		*/
+		const searchKeyHandler = (e) => {
+			spinning.value = true;
+			const key = e.target.value?.trim();
+			if (!key) catTree.value = catTreeCache;
+			else catTree.value = recursiveIcons(cloneDeep(catTreeCache), key);
+			activeDefault();
+			spinning.value = false;
+		};
+		const handleSearchKeyChange = debounce(searchKeyHandler, 500);
+		const handleCategoryClick = (data) => {
+			if (data?.children && data?.children.length) return;
+			catIcons.value = data.icons ?? [];
+			selectedKeys.value = [data.id];
+		};
+		function handleIconClick(icon) {
+			emit("update:value", icon);
+			onFieldChange();
+		}
+		const handleSelectColor = (color, custom = false) => {
+			customColorChecked.value = custom;
+			emit("update:color", color);
+			onFieldChange();
+		};
+		const handleCustomColorChange = () => {
+			if (customColorChecked.value) {
+				emit("update:color", customColor.value);
+				onFieldChange();
+			}
+		};
+		const handleSelectBackground = (color, custom = false) => {
+			customBackgroundChecked.value = custom;
+			emit("update:background", color);
+			onFieldChange();
+		};
+		const handleCustomBackgroundChange = () => {
+			if (customBackgroundChecked.value) {
+				emit("update:background", customBackground.value);
+				onFieldChange();
+			}
+		};
+		return (_ctx, _cache) => {
+			const _component_a_input = resolveComponent("a-input");
+			const _component_a_tree = resolveComponent("a-tree");
+			const _component_overlayScrollbarsComponent = resolveComponent("overlayScrollbarsComponent");
+			const _component_CheckOutlined = resolveComponent("CheckOutlined");
+			const _component_a_empty = resolveComponent("a-empty");
+			const _component_a_spin = resolveComponent("a-spin");
+			const _component_a_popover = resolveComponent("a-popover");
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_a_popover, {
+				placement: "bottomLeft",
+				trigger: "click",
+				"overlay-class-name": "icon-picker-next__popover",
+				onVisibleChange: handleVisibleChange
+			}, {
+				content: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(_component_a_input, {
+					value: searchKey.value,
+					"onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchKey.value = $event),
+					class: "icon-picker-next__search",
+					placeholder: "搜索图标",
+					"allow-clear": "",
+					onChange: _cache[1] || (_cache[1] = (e) => {
+						spinning.value = true;
+						unref(handleSearchKeyChange)(e);
+					})
+				}, {
+					prefix: withCtx(() => [..._cache[6] || (_cache[6] = [createElementVNode("i", { class: "iconfont icon-sousuo1" }, null, -1)])]),
+					_: 1
+				}, 8, ["value"])]), createVNode(_component_a_spin, { spinning: spinning.value }, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createVNode(_component_overlayScrollbarsComponent, {
+						ref_key: "TreeScrollRef",
+						ref: TreeScrollRef
+					}, {
+						default: withCtx(() => [catTree.value.length > 0 ? (openBlock(), createBlock(_component_a_tree, {
+							key: 0,
+							"selected-keys": selectedKeys.value,
+							"default-expand-all": "",
+							"block-node": "",
+							"field-names": {
+								children: "children",
+								title: "name",
+								key: "id"
+							},
+							"tree-data": catTree.value
+						}, {
+							title: withCtx(({ data }) => [createElementVNode("div", {
+								class: "ell",
+								title: data.name,
+								"data-id": data.id,
+								onClick: ($event) => handleCategoryClick(data)
+							}, toDisplayString(data.name), 9, _hoisted_5)]),
+							_: 1
+						}, 8, ["selected-keys", "tree-data"])) : createCommentVNode("", true)]),
+						_: 1
+					}, 512)]), createElementVNode("div", _hoisted_6, [catIcons.value?.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+						createElementVNode("div", _hoisted_7, [createVNode(_component_overlayScrollbarsComponent, {
+							ref_key: "IconsScrollRef",
+							ref: IconsScrollRef
+						}, {
+							default: withCtx(() => [createElementVNode("ul", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(catIcons.value, (icon) => {
+								return openBlock(), createElementBlock("li", {
+									key: icon.name,
+									style: normalizeStyle({ "--background": __props.background || unref(themeSetting).themeColor }),
+									class: normalizeClass({ "icon-picker-next--selected": icon.id === __props.value }),
+									title: icon.name,
+									"data-id": icon.id,
+									onClick: ($event) => handleIconClick(icon.id)
+								}, [createVNode(IconNext_default, {
+									value: icon.id,
+									color: icon.id === __props.value ? __props.color : DEFAULT_COLOR
+								}, null, 8, ["value", "color"])], 14, _hoisted_9);
+							}), 128))])]),
+							_: 1
+						}, 512)]),
+						__props.showBackground ? (openBlock(), createElementBlock("div", _hoisted_10, [
+							_cache[7] || (_cache[7] = createElementVNode("div", { class: "color__title" }, "背景颜色", -1)),
+							createElementVNode("div", _hoisted_11, [(openBlock(), createElementBlock(Fragment, null, renderList(ICON_BACKGROUND, (colorItem) => {
+								return createElementVNode("span", {
+									key: colorItem,
+									class: normalizeClass(["color__item", "color__item--" + colorItem]),
+									style: normalizeStyle({ backgroundColor: colorItem }),
+									onClick: () => handleSelectBackground(colorItem)
+								}, [__props.background === colorItem ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)], 14, _hoisted_12);
+							}), 64))]),
+							createElementVNode("div", _hoisted_13, [createElementVNode("div", {
+								class: "color__preview",
+								style: normalizeStyle({ "--custom-bg": customBackground.value }),
+								onClick: _cache[2] || (_cache[2] = () => handleSelectBackground(customBackground.value, true))
+							}, [customBackgroundChecked.value ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)], 4), withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => customBackground.value = $event),
+								type: "text",
+								onBlur: handleCustomBackgroundChange
+							}, null, 544), [[vModelText, customBackground.value]])])
+						])) : createCommentVNode("", true),
+						__props.showColor && supportColor.value ? (openBlock(), createElementBlock("div", _hoisted_14, [
+							_cache[8] || (_cache[8] = createElementVNode("div", { class: "color__title" }, "图标色", -1)),
+							createElementVNode("div", _hoisted_15, [(openBlock(), createElementBlock(Fragment, null, renderList(ICON_COLOR, (colorItem) => {
+								return createElementVNode("span", {
+									key: colorItem,
+									class: "color__item",
+									style: normalizeStyle({ backgroundColor: colorItem }),
+									onClick: () => handleSelectColor(colorItem)
+								}, [__props.color === colorItem ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)], 12, _hoisted_16);
+							}), 64))]),
+							createElementVNode("div", _hoisted_17, [createElementVNode("div", {
+								class: "color__preview",
+								style: normalizeStyle({ "--custom-bg": customColor.value }),
+								onClick: _cache[4] || (_cache[4] = () => handleSelectColor(customColor.value, true))
+							}, [customColorChecked.value ? (openBlock(), createBlock(_component_CheckOutlined, { key: 0 })) : createCommentVNode("", true)], 4), withDirectives(createElementVNode("input", {
+								"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => customColor.value = $event),
+								type: "text",
+								onBlur: handleCustomColorChange
+							}, null, 544), [[vModelText, customColor.value]])])
+						])) : createCommentVNode("", true)
+					], 64)) : (openBlock(), createElementBlock("div", _hoisted_18, [createVNode(_component_a_empty, {
+						image: unref(Empty).PRESENTED_IMAGE_SIMPLE,
+						description: null
+					}, null, 8, ["image"])]))])])]),
+					_: 1
+				}, 8, ["spinning"])]),
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(["icon-picker-next__trigger cursor-pointer", { "icon-picker-next--selected": __props.value }]),
+					style: normalizeStyle({ "--background": __props.background || unref(themeSetting).themeColor })
+				}, [__props.value ? (openBlock(), createBlock(IconNext_default, {
+					key: 0,
+					value: __props.value,
+					size: __props.size,
+					color: __props.color
+				}, null, 8, [
+					"value",
+					"size",
+					"color"
+				])) : createCommentVNode("", true), _cache[9] || (_cache[9] = createElementVNode("div", null, [createElementVNode("i", { class: "iconfont icon-bianji" })], -1))], 6)]),
+				_: 1
+			})]);
+		};
+	}
+});
+//#endregion
+export { IconNextPicker_vue_vue_type_script_setup_true_name_IconNextPicker_lang_default as default };