gi-component 0.0.38 → 0.0.40

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, getCurrentInstance, useAttrs, computed, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, useSlots, normalizeClass, createCommentVNode, normalizeStyle, createVNode, ref, onMounted, Fragment, renderList, createSlots, resolveDynamicComponent, mergeModels, useModel, resolveComponent, h, createApp, watch, onUpdated, onUnmounted, inject, toRefs, watchEffect, reactive, provide, normalizeProps, guardReactiveProps, useTemplateRef } from "vue";
+import { defineComponent, createElementBlock, openBlock, createElementVNode, getCurrentInstance, useAttrs, computed, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, useSlots, normalizeClass, createCommentVNode, normalizeStyle, createVNode, createSlots, Fragment, renderList, mergeModels, useModel, ref, resolveDynamicComponent, resolveComponent, h, createApp, watch, onMounted, onUpdated, onUnmounted, inject, toRefs, watchEffect, reactive, provide, normalizeProps, guardReactiveProps, useTemplateRef } from "vue";
 import * as El from "element-plus";
 import El__default, { ElButton, ElSpace, ElDescriptions, ElDescriptionsItem, ElDialog, ElDrawer, ElInput, ElForm, ElTable, ElTableColumn, ElFormItem, ElText, ElMessage, ElIcon, ElSplitter, ElSplitterPanel, ElRow, ElPagination, ElTabs, ElTabPane, ElCheckbox, ElScrollbar, ElTree, ElCheckboxGroup, ElEmpty } from "element-plus";
 /*! Element Plus Icons Vue v2.3.2 */
@@ -284,7 +284,7 @@ function useBemClass() {
   const b = (name = "") => `${prefix}-${name ? `${name}` : ""}`;
   return { b };
 }
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "button",
   props: {
     type: { default: "" },
@@ -349,7 +349,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "card",
   props: {
     title: { default: "" },
@@ -434,117 +434,113 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Card = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0733140b"]]);
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const Card = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0733140b"]]);
+const _hoisted_1$5 = { key: 2 };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "descriptions",
   props: {
-    data: {},
     columns: { default: () => [] },
-    dictRequest: {}
+    data: { default: () => ({}) },
+    border: { type: Boolean, default: false },
+    column: { default: 3 },
+    direction: { default: "horizontal" },
+    size: { default: "default" },
+    title: { default: "" },
+    extra: { default: "" }
   },
   setup(__props) {
     const props = __props;
-    const attrs = useAttrs();
-    const { b } = useBemClass();
-    const instance = getCurrentInstance();
-    const globalConfig = instance == null ? void 0 : instance.appContext.config.globalProperties.$config;
-    const dictData = ref({});
-    const loadDictData = async () => {
-      var _a;
-      const dictCodes = (_a = props.columns) == null ? void 0 : _a.filter((item) => item.dictCode).map((item) => item.dictCode).filter((code, index2, arr) => arr.indexOf(code) === index2);
-      if (!(dictCodes == null ? void 0 : dictCodes.length)) return;
-      const dictRequest = props.dictRequest || (globalConfig == null ? void 0 : globalConfig.dictRequest);
-      if (!dictRequest) {
-        return;
-      }
-      try {
-        const dictResponses = await Promise.all(
-          dictCodes.map(
-            (code) => dictRequest(code).then((response) => ({ code, response })).catch((error) => {
-              console.error(`获取字典 ${code} 失败:`, error);
-              return { code, response: [] };
-            })
-          )
-        );
-        dictResponses.forEach(({ code, response }) => {
-          dictData.value[code] = response;
-        });
-      } catch (error) {
-        console.error("获取字典数据失败:", error);
+    const NodeRenderer = defineComponent({
+      name: "NodeRenderer",
+      props: {
+        getNode: { type: Function, required: true }
+      },
+      setup(props2) {
+        return () => props2.getNode();
       }
-    };
-    onMounted(() => {
-      loadDictData();
     });
-    const filteredColumns = computed(() => {
-      return props.columns.filter((item) => {
-        if (typeof item.hide === "boolean") return !item.hide;
-        if (typeof item.hide === "function") return !item.hide(props.data);
-        return true;
-      });
-    });
-    const descriptionsProps = computed(() => {
-      const { data, columns, dictRequest, ...restProps } = props;
-      return { ...attrs, ...restProps };
-    });
-    const getClass = computed(() => {
-      return [b("descriptions")];
-    });
-    const getValue = (item) => {
-      if (!item.field || !props.data) return "";
-      return props.data[item.field] ?? "";
-    };
-    const getDictValue = (item) => {
+    const slots = useSlots();
+    const useColumns = computed(() => {
       var _a;
-      if (!item.dictCode || !item.field) return "";
-      const value = (_a = props.data) == null ? void 0 : _a[item.field];
-      const dictList = dictData.value[item.dictCode] || [];
-      const dictItem = dictList.find((d) => d.value === value || d.code === value);
-      return (dictItem == null ? void 0 : dictItem.label) ?? (dictItem == null ? void 0 : dictItem.name) ?? value ?? "";
-    };
+      return (((_a = props.columns) == null ? void 0 : _a.length) ?? 0) > 0;
+    });
+    function hasColumnSlot(name) {
+      return !!name && !!slots[name];
+    }
+    function getFieldValue(col) {
+      if (!props.data || col.value === void 0 || col.value === null)
+        return "";
+      return props.data[col.value];
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElDescriptions), mergeProps({ class: getClass.value }, descriptionsProps.value), {
+      return openBlock(), createBlock(unref(ElDescriptions), {
+        border: _ctx.border,
+        column: _ctx.column,
+        direction: _ctx.direction,
+        size: _ctx.size,
+        title: _ctx.title,
+        extra: _ctx.extra
+      }, createSlots({
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(filteredColumns.value, (item, index2) => {
-            return openBlock(), createBlock(unref(ElDescriptionsItem), mergeProps({
-              key: index2,
-              ref_for: true
-            }, item.props, {
-              label: item.label,
-              span: item.span
-            }), createSlots({
+          useColumns.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.columns, (col, idx) => {
+            return openBlock(), createBlock(unref(ElDescriptionsItem), {
+              key: col.value ?? idx,
+              label: typeof col.label === "string" ? col.label : "",
+              span: col.span ?? 1,
+              width: col.width,
+              "min-width": col.minWidth,
+              align: col.align ?? "left",
+              "label-align": col.labelAlign,
+              "class-name": col.className,
+              "label-class-name": col.labelClassName
+            }, createSlots({
               default: withCtx(() => [
-                item.type === "slot" ? renderSlot(_ctx.$slots, item.field, {
+                hasColumnSlot(col.value) ? renderSlot(_ctx.$slots, col.value, {
                   key: 0,
-                  item,
-                  value: getValue(item)
-                }, void 0, true) : item.type === "dict" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(getDictValue(item)), 1)
-                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                  createTextVNode(toDisplayString(getValue(item)), 1)
-                ], 64))
+                  value: getFieldValue(col),
+                  data: _ctx.data,
+                  column: col
+                }) : col.render && _ctx.data ? (openBlock(), createBlock(unref(NodeRenderer), {
+                  key: 1,
+                  "get-node": () => col.render({ value: getFieldValue(col), data: _ctx.data, column: col })
+                }, null, 8, ["get-node"])) : (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(getFieldValue(col)), 1))
               ]),
               _: 2
             }, [
-              (item == null ? void 0 : item.labelRender) ? {
+              typeof col.label === "function" ? {
                 name: "label",
                 fn: withCtx(() => [
-                  (openBlock(), createBlock(resolveDynamicComponent(item.labelRender)))
+                  createVNode(unref(NodeRenderer), {
+                    "get-node": () => col.label(col)
+                  }, null, 8, ["get-node"])
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["label", "span"]);
-          }), 128)),
-          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]), 1032, ["label", "span", "width", "min-width", "align", "label-align", "class-name", "label-class-name"]);
+          }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
         ]),
-        _: 3
-      }, 16, ["class"]);
+        _: 2
+      }, [
+        _ctx.$slots.title ? {
+          name: "title",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "title")
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.extra ? {
+          name: "extra",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "extra")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["border", "column", "direction", "size", "title", "extra"]);
     };
   }
 });
-const Descriptions = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-621af6b6"]]);
 const _hoisted_1$4 = { key: 0 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "dialog",
   props: /* @__PURE__ */ mergeModels({
     content: {},
@@ -703,7 +699,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$3 = { class: "el-message-box__message" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "dialog-content",
   props: {
     type: { default: "info" },
@@ -732,7 +728,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-2a6a2293"]]);
+const DialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-2a6a2293"]]);
 const DEF_OPTIONS$1 = {
   // width: '600px',
   // center: false,
@@ -755,7 +751,7 @@ function createDialog() {
             dialogApp.unmount();
             container.remove();
           };
-          return () => h(_sfc_main$f, {
+          return () => h(_sfc_main$h, {
             ...dialogOptions.value,
             "modelValue": visible.value,
             "onUpdate:modelValue": (val) => visible.value = val,
@@ -826,7 +822,7 @@ function createDialog() {
 }
 const Dialog = createDialog();
 void [Dialog.info, Dialog.success, Dialog.warning, Dialog.error];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "dot",
   props: {
     type: { default: "circle" },
@@ -866,9 +862,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Dot = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-575d79dc"]]);
+const Dot = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-575d79dc"]]);
 const _hoisted_1$2 = { key: 0 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "drawer",
   props: /* @__PURE__ */ mergeModels({
     content: {},
@@ -1044,7 +1040,7 @@ function createDrawer() {
             drawerApp.unmount();
             container.remove();
           };
-          return () => h(_sfc_main$c, {
+          return () => h(_sfc_main$e, {
             ...dialogOptions.value,
             "modelValue": visible.value,
             "onUpdate:modelValue": (val) => visible.value = val,
@@ -1078,7 +1074,7 @@ function createDrawer() {
   return Drawer2;
 }
 const Drawer = createDrawer();
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "input-group",
   setup(__props) {
     const { b } = useBemClass();
@@ -1091,8 +1087,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InputGroup = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-edd7f8aa"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const InputGroup = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-edd7f8aa"]]);
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "input-search",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1146,9 +1142,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InputSearch = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-bb801bd6"]]);
+const InputSearch = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-bb801bd6"]]);
 const clearable = false;
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "edit-table",
   props: {
     rowKey: { default: "id" },
@@ -1333,7 +1329,69 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EditTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-b88099ba"]]);
+const EditTable = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-b88099ba"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "flex",
+  props: {
+    vertical: { type: Boolean, default: false },
+    wrap: { type: [String, Boolean], default: false },
+    justify: { default: "normal" },
+    align: { default: "normal" },
+    flex: { default: "normal" },
+    gap: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { b } = useBemClass();
+    const classNames = computed(() => [b("flex")]);
+    const gapMap = {
+      small: "8px",
+      middle: "16px",
+      large: "24px"
+    };
+    const resolvedGap = computed(() => {
+      if (props.gap === void 0 || props.gap === null || props.gap === "")
+        return void 0;
+      if (typeof props.gap === "number")
+        return `${props.gap}px`;
+      if (gapMap[props.gap])
+        return gapMap[props.gap];
+      return String(props.gap);
+    });
+    const resolvedWrap = computed(() => {
+      if (typeof props.wrap === "boolean")
+        return props.wrap ? "wrap" : "nowrap";
+      if (props.wrap === "")
+        return "wrap";
+      return props.wrap;
+    });
+    const style = computed(() => {
+      const obj = {
+        display: "flex",
+        flexDirection: props.vertical ? "column" : "row",
+        flexWrap: resolvedWrap.value,
+        justifyContent: props.justify,
+        alignItems: props.align
+      };
+      if (props.flex !== "normal") {
+        obj.flex = props.flex;
+      }
+      if (resolvedGap.value) {
+        obj.gap = resolvedGap.value;
+      }
+      return obj;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(classNames.value),
+        style: normalizeStyle(style.value)
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 6);
+    };
+  }
+});
+const Flex = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-959cee10"]]);
 const GridContextInjectionKey = Symbol(
   "GridContextInjectionKey"
 );
@@ -1588,7 +1646,7 @@ function getPrefixCls(name) {
   const { b } = useBemClass();
   return b(name);
 }
-const _sfc_main$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "GridItem",
   props: {
     /**
@@ -1706,8 +1764,8 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", { overflow: _ctx.overflow })
   ], 6);
 }
-const GridItem = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
-const _sfc_main$7 = defineComponent({
+const GridItem = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$1]]);
+const _sfc_main$8 = defineComponent({
   name: "Grid",
   props: {
     /**
@@ -1821,12 +1879,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {}, void 0, true)
   ], 6);
 }
-const Grid = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__scopeId", "data-v-6eabaf75"]]);
+const Grid = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render], ["__scopeId", "data-v-6eabaf75"]]);
 const _hoisted_1$1 = {
   key: 0,
   class: "w-full"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "form",
   props: {
     modelValue: {},
@@ -2246,8 +2304,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Form = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-85d6c1a1"]]);
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const Form = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-85d6c1a1"]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "split-button",
   props: {
     collapsed: { type: Boolean, default: false },
@@ -2298,8 +2356,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SplitButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ad431228"]]);
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const SplitButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-ad431228"]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "page-layout",
   props: {
     size: { default: 270 },
@@ -2405,8 +2463,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a35bb713"]]);
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const PageLayout = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-a35bb713"]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "TableColumn",
   props: {
     column: {}
@@ -2421,7 +2479,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(ElTableColumn), normalizeProps(guardReactiveProps(columnProps.value)), createSlots({
         default: withCtx(() => [
           _ctx.column.children && _ctx.column.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.column.children, (child) => {
-            return openBlock(), createBlock(_sfc_main$3, {
+            return openBlock(), createBlock(_sfc_main$4, {
               key: child.prop || child.label,
               column: child
             }, createSlots({ _: 2 }, [
@@ -2457,7 +2515,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "table",
   props: {
     data: { default: () => [] },
@@ -2544,7 +2602,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }), {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (item) => {
-              return openBlock(), createBlock(_sfc_main$3, {
+              return openBlock(), createBlock(_sfc_main$4, {
                 key: item.prop || item.label,
                 column: item
               }, createSlots({ _: 2 }, [
@@ -2578,7 +2636,126 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Table = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-763fcf58"]]);
+const Table = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-763fcf58"]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "tag",
+  props: {
+    type: { default: "light" },
+    status: { default: "primary" },
+    color: { default: "" },
+    size: { default: "small" },
+    closable: { type: Boolean, default: false }
+  },
+  emits: ["click", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const BASE_COLORS = {
+      red: "#FF0000",
+      orangered: "#f77234",
+      orange: "#ff7d00",
+      gold: "#f7ba1e",
+      lime: "#9fdb1d",
+      green: "#00b42a",
+      cyan: "#14c9c9",
+      blue: "#3491fa",
+      purple: "#722ed1",
+      pink: "#f5319d",
+      gray: "#86909c"
+    };
+    function resolveColorToken(input) {
+      return BASE_COLORS[input] || input;
+    }
+    function hexToRgb(hex) {
+      const body = hex.startsWith("#") ? hex.slice(1) : hex;
+      const full = body.length === 3 ? body.split("").map((c) => c + c).join("") : body;
+      return {
+        r: Number.parseInt(full.slice(0, 2), 16),
+        g: Number.parseInt(full.slice(2, 4), 16),
+        b: Number.parseInt(full.slice(4, 6), 16)
+      };
+    }
+    function stylesForType(type, color, rgb) {
+      const { r, g, b } = rgb;
+      const bgTint = `rgba(${r}, ${g}, ${b}, 0.1)`;
+      const borderTint = `rgba(${r}, ${g}, ${b}, 0.2)`;
+      const closeHoverBg = { "--tag-close-hover-bg-color": color };
+      switch (type) {
+        case "dark":
+          return {
+            color: "#fff",
+            backgroundColor: color,
+            "--tag-close-hover-color": color,
+            "--tag-close-hover-bg-color": "rgba(255, 255, 255, 0.9)"
+          };
+        case "outline":
+          return {
+            color,
+            backgroundColor: "transparent",
+            borderColor: color,
+            ...closeHoverBg
+          };
+        case "light-outline":
+          return {
+            color,
+            backgroundColor: bgTint,
+            borderColor: borderTint,
+            ...closeHoverBg
+          };
+        case "light":
+        default:
+          return {
+            color,
+            backgroundColor: bgTint,
+            ...closeHoverBg
+          };
+      }
+    }
+    const className = computed(
+      () => [
+        "gi-tag",
+        props.type && `gi-tag__type--${props.type}`,
+        props.size && `gi-tag__size--${props.size}`,
+        props.status && `gi-tag__status--${props.status}`
+      ].filter(Boolean).join(" ")
+    );
+    const tagStyle = computed(() => {
+      if (!props.color)
+        return {};
+      const color = resolveColorToken(props.color);
+      return stylesForType(props.type ?? "light", color, hexToRgb(color));
+    });
+    function handleClick() {
+      emit("click");
+    }
+    function handleClose(event) {
+      event.stopPropagation();
+      emit("close");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(className.value),
+        style: normalizeStyle(tagStyle.value),
+        onClick: handleClick
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true),
+        _ctx.closable ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: "gi-tag-close-btn",
+          onClick: handleClose
+        }, [
+          createVNode(unref(ElIcon), { class: "close-icon" }, {
+            default: withCtx(() => [
+              createVNode(unref(close_default))
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const Tag = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d4945925"]]);
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "tabs",
   props: /* @__PURE__ */ mergeModels({
@@ -8369,38 +8546,42 @@ const createSelectDialog = (params) => {
 };
 void [Dialog.info, Dialog.success, Dialog.warning, Dialog.error];
 const components = {
-  Button: _sfc_main$i,
+  Button: _sfc_main$k,
   Card,
-  Descriptions,
-  Drawer: _sfc_main$c,
+  Descriptions: _sfc_main$i,
+  Drawer: _sfc_main$e,
   Dot,
   Tabs,
   InputGroup,
   InputSearch,
+  Flex,
   Grid,
   GridItem,
   Form,
   PageLayout,
-  Dialog: _sfc_main$f,
+  Dialog: _sfc_main$h,
   EditTable,
   Table,
+  Tag,
   TreeTransfer
 };
-const GiButton = _sfc_main$i;
+const GiButton = _sfc_main$k;
 const GiCard = Card;
-const GiDescriptions = Descriptions;
-const GiDrawer = _sfc_main$c;
+const GiDescriptions = _sfc_main$i;
+const GiDrawer = _sfc_main$e;
 const GiDot = Dot;
 const GiTabs = Tabs;
 const GiInputGroup = InputGroup;
 const GiInputSearch = InputSearch;
+const GiFlex = Flex;
 const GiGrid = Grid;
 const GiGridItem = GridItem;
 const GiForm = Form;
 const GiPageLayout = PageLayout;
-const GiDialog = _sfc_main$f;
+const GiDialog = _sfc_main$h;
 const GiEditTable = EditTable;
 const GiTable = Table;
+const GiTag = Tag;
 const GiTreeTransfer = TreeTransfer;
 function capitalizeWord(word) {
   if (typeof word !== "string" || word.length === 0) {
@@ -8427,6 +8608,7 @@ export {
   GiDot,
   GiDrawer,
   GiEditTable,
+  GiFlex,
   GiForm,
   GiGrid,
   GiGridItem,
@@ -8435,6 +8617,7 @@ export {
   GiPageLayout,
   GiTable,
   GiTabs,
+  GiTag,
   GiTreeTransfer,
   createDialog,
   createDrawer,