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

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/types/index.mjs

@@ -1,10 +1,11 @@
-var IconNamespaceEnum = /* @__PURE__ */ ((IconNamespaceEnum2) => {
-  IconNamespaceEnum2["Preset"] = "icon-preset";
-  IconNamespaceEnum2["IconPark"] = "icon-park";
-  IconNamespaceEnum2["Asset"] = "icon-assert";
-  IconNamespaceEnum2["Platform"] = "icon-platform";
-  IconNamespaceEnum2["GctIconFont"] = "gct-iconfont";
-  return IconNamespaceEnum2;
-})(IconNamespaceEnum || {});
-
+//#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

@@ -9,6 +9,7 @@ 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 { 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;
 };

package/es/components/index.mjs

@@ -1,34 +1,23 @@
-import _sfc_main from './svg-icon/svg-icon.vue.mjs';
-import './layout/view-container/view-container.css';import './code-editor/code-editor.css';import './icon-next/src/IconNextPicker.css';import './copy-module-key/copy-module-key.css';import './basic-button/basic-button.css';import './base-button/base-button.css';import './svg-icon/svg-icon.css';/* empty css                        */
-import { AssetsSvgIcon } from './assets-svg-icon/assets-svg-icon.mjs';
-import 'vue';
-import 'ant-design-vue';
-import 'lodash-es';
-import '@gct-paas/core';
-/* empty css                              */
-/* empty css                                */
-import { WuJieContainer } from './wujie-container/wujie-container.mjs';
-import 'bignumber.js';
-/* empty css                                      */
-import '@gct-paas/platform-icons';
-import IconNext from './icon-next/src/IconNext.vue2.mjs';
-import _sfc_main$1 from './icon-next/src/IconNextPicker.vue2.mjs';
-/* empty css                                  */
-import '@monaco-editor/loader';
-/* empty css                              */
-/* empty css                                           */
-
-const Comps = {
-  install(app) {
-    app.component(AssetsSvgIcon.name, AssetsSvgIcon);
-    app.component(_sfc_main.name, _sfc_main);
-    app.component(WuJieContainer.name, WuJieContainer);
-    app.component(IconNext.name || IconNext.__name, IconNext);
-    app.component(
-      _sfc_main$1.name || _sfc_main$1.__name,
-      _sfc_main$1
-    );
-  }
-};
-
-export { AssetsSvgIcon, _sfc_main as SvgIcon, WuJieContainer, Comps as default };
+import svg_icon_default from "./svg-icon/svg-icon.vue.mjs";
+import { AssetsSvgIcon } from "./assets-svg-icon/assets-svg-icon.mjs";
+import "./base-button/base-button.vue.mjs";
+import "./basic-button/basic-button.vue.mjs";
+import { WuJieContainer } from "./wujie-container/wujie-container.mjs";
+import "./double-input/double-input.vue.mjs";
+import "./copy-module-key/copy-module-key.vue.mjs";
+import IconNext_default from "./icon-next/src/IconNext.vue.mjs";
+import IconNextPicker_default from "./icon-next/src/IconNextPicker.vue.mjs";
+import "./icon-next/index.mjs";
+import "./code-editor/code-editor.mjs";
+import "./layout/view-container/view-container.mjs";
+import "./vue3-grid-dnd-item/vue3-grid-dnd-item.mjs";
+//#region src/components/index.ts
+var components_default = { install(app) {
+	app.component(AssetsSvgIcon.name, AssetsSvgIcon);
+	app.component(svg_icon_default.name, svg_icon_default);
+	app.component(WuJieContainer.name, WuJieContainer);
+	app.component(IconNext_default.name || IconNext_default.__name, IconNext_default);
+	app.component(IconNextPicker_default.name || IconNextPicker_default.__name, IconNextPicker_default);
+} };
+//#endregion
+export { components_default as default };

package/es/components/layout/view-container/view-container.mjs

@@ -1,38 +1,27 @@
-import { defineComponent, createVNode } from 'vue';
-import { useNamespace } from '@gct-paas/core';
 import './view-container.css';/* empty css                     */
-
-const ViewContainer = /* @__PURE__ */ defineComponent({
-  name: 'ViewContainer',
-  props: {
-    context: {
-      type: Object
-    },
-    params: {
-      type: Object
-    },
-    modal: {
-      type: Object,
-      required: true
-    }
-  },
-  setup() {
-    const ns = useNamespace('view-container');
-    return {
-      ns
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": this.ns.b()
-    }, [this.$slots.header ? createVNode("div", {
-      "class": this.ns.b('header')
-    }, [this.$slots.header()]) : null, createVNode("div", {
-      "class": this.ns.b('content')
-    }, [this.$slots.default?.()]), this.$slots.footer ? createVNode("div", {
-      "class": this.ns.b('footer')
-    }, [this.$slots.footer()]) : null]);
-  }
+import { createVNode, defineComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/components/layout/view-container/view-container.tsx
+var ViewContainer = /* @__PURE__ */ defineComponent({
+	name: "ViewContainer",
+	props: {
+		context: { type: Object },
+		params: { type: Object },
+		modal: {
+			type: Object,
+			required: true
+		}
+	},
+	setup() {
+		return { ns: useNamespace("view-container") };
+	},
+	render() {
+		return createVNode("div", { "class": this.ns.b() }, [
+			this.$slots.header ? createVNode("div", { "class": this.ns.b("header") }, [this.$slots.header()]) : null,
+			createVNode("div", { "class": this.ns.b("content") }, [this.$slots.default?.()]),
+			this.$slots.footer ? createVNode("div", { "class": this.ns.b("footer") }, [this.$slots.footer()]) : null
+		]);
+	}
 });
-
+//#endregion
 export { ViewContainer };

package/es/components/svg-icon/svg-icon.vue.mjs

@@ -1,50 +1,6 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createElementVNode } from 'vue';
-import { useNamespace } from '@gct-paas/core';
-
-const _hoisted_1 = ["xlink:href"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "svg-icon",
-  props: {
-    prefix: {
-      type: String,
-      default: "icon"
-    },
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: [Number, String],
-      default: 16
-    },
-    spin: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(__props) {
-    const ns = useNamespace("svg-icon");
-    const props = __props;
-    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
-    const getStyle = computed(() => {
-      const { size } = props;
-      let s = `${size}`;
-      s = `${s.replace("px", "")}px`;
-      return {
-        width: s,
-        height: s
-      };
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", {
-        class: normalizeClass([_ctx.$attrs.class, unref(ns).b(), __props.spin && unref(ns).m("spin")]),
-        style: normalizeStyle(getStyle.value),
-        "aria-hidden": "true"
-      }, [
-        createElementVNode("use", { "xlink:href": symbolId.value }, null, 8, _hoisted_1)
-      ], 6);
-    };
-  }
-});
-
-export { _sfc_main as default };
+import svg_icon_vue_vue_type_script_setup_true_name_SvgIcon_lang_default from "./svg-icon.vue_vue_type_script_setup_true_name_SvgIcon_lang.mjs";
+import './svg-icon.vue_vue_type_style_index_0_lang.css';/* empty css                                               */
+//#region src/components/svg-icon/svg-icon.vue
+var svg_icon_default = svg_icon_vue_vue_type_script_setup_true_name_SvgIcon_lang_default;
+//#endregion
+export { svg_icon_default as default };

package/es/components/svg-icon/svg-icon.vue_vue_type_script_setup_true_name_SvgIcon_lang.mjs

@@ -0,0 +1,52 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/components/svg-icon/svg-icon.vue?vue&type=script&setup=true&name=SvgIcon&lang.ts
+var _hoisted_1 = ["xlink:href"];
+var svg_icon_vue_vue_type_script_setup_true_name_SvgIcon_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "svg-icon",
+	props: {
+		prefix: {
+			type: String,
+			default: "icon"
+		},
+		name: {
+			type: String,
+			required: true
+		},
+		size: {
+			type: [Number, String],
+			default: 16
+		},
+		spin: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const ns = useNamespace("svg-icon");
+		const props = __props;
+		const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+		const getStyle = computed(() => {
+			const { size } = props;
+			let s = `${size}`;
+			s = `${s.replace("px", "")}px`;
+			return {
+				width: s,
+				height: s
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("svg", {
+				class: normalizeClass([
+					_ctx.$attrs.class,
+					unref(ns).b(),
+					__props.spin && unref(ns).m("spin")
+				]),
+				style: normalizeStyle(getStyle.value),
+				"aria-hidden": "true"
+			}, [createElementVNode("use", { "xlink:href": symbolId.value }, null, 8, _hoisted_1)], 6);
+		};
+	}
+});
+//#endregion
+export { svg_icon_vue_vue_type_script_setup_true_name_SvgIcon_lang_default as default };