@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.12

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 };

package/es/components/icon-next/src/IconNextPicker.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,195 @@
+.icon-picker-next {
+  width: var(--box-size, 48px);
+  height: var(--box-size, 48px);
+}
+.icon-picker-next__popover .ant-popover-inner-content {
+  padding: 0;
+}
+.icon-picker-next__search {
+  border-color: #f5f5f5 !important;
+  background: #f5f5f5;
+}
+.icon-picker-next__search .ant-input {
+  background: transparent;
+}
+.icon-picker-next__search .ant-input-prefix {
+  color: #999;
+}
+.icon-picker-next__container {
+  --tree-width: 100px;
+  width: 456px;
+  height: 300px;
+}
+.icon-picker-next__cats {
+  width: var(--tree-width);
+  height: 100%;
+  background-color: #f5f5f5;
+}
+.icon-picker-next__cats .ant-tree {
+  --tree-node-sizet: 32px;
+  background: transparent;
+}
+.icon-picker-next__cats .ant-tree .ant-tree-treenode {
+  padding: 0;
+  transition: all 0.3s;
+}
+.icon-picker-next__cats .ant-tree .ant-tree-treenode:hover {
+  background-color: #eaeaea;
+}
+.icon-picker-next__cats .ant-tree .ant-tree-treenode.ant-tree-treenode-selected {
+  background-color: #eaeaea;
+  color: var(--ant-primary-color);
+}
+.icon-picker-next__cats .ant-tree .ant-tree-switcher {
+  height: var(--tree-node-sizet);
+  line-height: var(--tree-node-sizet);
+}
+.icon-picker-next__cats .ant-tree .ant-tree-node-content-wrapper {
+  width: 1px;
+  height: var(--tree-node-sizet);
+  background-color: transparent !important;
+  line-height: var(--tree-node-sizet);
+}
+.icon-picker-next__cats .ant-tree .ant-tree-indent {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.icon-picker-next__panel {
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - var(--tree-width));
+  background-color: #fff;
+}
+.icon-picker-next__icons {
+  flex: 1;
+  height: 1px;
+}
+.icon-picker-next__trigger {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  background: #e1e1e1;
+  color: #fff;
+  cursor: pointer;
+}
+.icon-picker-next__trigger div {
+  display: flex;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  background: rgba(0, 0, 0, 0.3);
+  font-size: 12px;
+}
+.icon-picker-next__trigger div .iconfont {
+  transform: scale(0.6);
+}
+.icon-picker-next--selected {
+  background: var(--background) !important;
+}
+.color__setting {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+  padding: 0 12px;
+}
+.color__setting:last-child {
+  padding-bottom: 10px;
+}
+.color__setting .color__title {
+  flex: none;
+  width: 56px;
+  overflow: hidden;
+  color: #999;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.color__setting .color__list {
+  display: flex;
+  flex: none;
+  column-gap: 8px;
+}
+.color__setting .color__list .color__item {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: transparent;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+}
+.color__setting .color__list .color__item:nth-child(1) {
+  border: 1px solid #d9d9d9;
+  color: var(--ant-primary-color);
+}
+.color__setting .color__input {
+  display: flex;
+  position: relative;
+  align-items: center;
+  margin-left: 8px;
+  padding-left: 8px;
+}
+.color__setting .color__input::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1px;
+  height: 12px;
+  transform: translateY(-50%);
+  background: #eaeaea;
+}
+.color__setting .color__input .color__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background-color: var(--custom-bg);
+  font-size: 12px;
+}
+.color__setting .color__input input {
+  width: 60px;
+  border: none;
+  font-size: 12px;
+}
+.icon__list {
+  display: grid;
+  grid-gap: 7px;
+  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+  margin: 0;
+  padding: 0 12px;
+  list-style: none;
+}
+.icon__list > li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  transition: all 0.3s;
+  border-radius: 4px;
+  background: #e1e1e1;
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+}
+.icon__list > li > span {
+  display: flex;
+}
+.icon__list > li:hover {
+  background-color: #c0c0c0;
+}

package/es/components/icon-next/types/index.d.ts

@@ -0,0 +1,17 @@
+export interface ICategory {
+    id: string;
+    name: string;
+    icons?: {
+        id: string;
+        name: string;
+        _filter_: string[];
+    }[];
+    children?: ICategory[];
+}
+export declare enum IconNamespaceEnum {
+    Preset = "icon-preset",
+    IconPark = "icon-park",
+    Asset = "icon-assert",
+    Platform = "icon-platform",
+    GctIconFont = "gct-iconfont"
+}

package/es/components/icon-next/types/index.mjs

@@ -0,0 +1,11 @@
+//#region src/components/icon-next/types/index.ts
+var IconNamespaceEnum = /* @__PURE__ */ function(IconNamespaceEnum) {
+	IconNamespaceEnum["Preset"] = "icon-preset";
+	IconNamespaceEnum["IconPark"] = "icon-park";
+	IconNamespaceEnum["Asset"] = "icon-assert";
+	IconNamespaceEnum["Platform"] = "icon-platform";
+	IconNamespaceEnum["GctIconFont"] = "gct-iconfont";
+	return IconNamespaceEnum;
+}({});
+//#endregion
+export { IconNamespaceEnum };

package/es/components/index.d.ts

@@ -8,10 +8,8 @@ import { default as DoubleInput } from './double-input/double-input.vue';
 import { default as CopyModuleKey } from './copy-module-key/copy-module-key.vue';
 export { SvgIcon, AssetsSvgIcon, BaseButton, BasicButton, WuJieContainer, DoubleInput, CopyModuleKey, };
 export { CodeEditor } from './code-editor/code-editor';
-export { FlexContainer } from './layout/flex-container/flex-container';
-export { FlexItem } from './layout/flex-item/flex-item';
-export { GridContainer } from './layout/grid-container/grid-container';
 export { ViewContainer } from './layout/view-container/view-container';
+export { Vue3GridDndItem } from './vue3-grid-dnd-item/vue3-grid-dnd-item';
 declare const _default: {
     install(app: App): void;
 };