vxe-pc-ui 4.9.40 → 4.9.42

package/lib/vxe-tag/style/style.css

@@ -1,5 +1,49 @@
+.vxe-tag.color--gray {
+  color: #827d7d;
+  background-color: #f3f3f3;
+}
+.vxe-tag.color--orangered {
+  color: #877568;
+  background-color: #f4e9e1;
+}
+.vxe-tag.color--orange {
+  color: #9a9079;
+  background-color: #fff8e8;
+}
+.vxe-tag.color--green {
+  color: #627865;
+  background-color: #e7ffea;
+}
+.vxe-tag.color--blue {
+  color: #6b7b82;
+  background-color: #e8f8ff;
+}
+.vxe-tag.color--purple {
+  color: #8f7e97;
+  background-color: #f8e8ff;
+}
+.vxe-tag.color--pinkpurple {
+  color: #82687a;
+  background-color: #ffe8f8;
+}
+.vxe-tag.color--magenta {
+  color: #846084;
+  background-color: #f4c9f4;
+}
+.vxe-tag.color--chocolate {
+  color: #7f6e61;
+  background-color: #f7e2d2;
+}
+.vxe-tag.color--cyan {
+  color: #577474;
+  background-color: #d7f7f7;
+}
+
 .vxe-tag {
-  padding: var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.25em 0.5em;
   color: var(--vxe-ui-font-color);
   border-radius: var(--vxe-ui-base-border-radius);
 }
@@ -7,26 +51,65 @@
   color: var(--vxe-ui-font-primary-color);
   background-color: var(--vxe-ui-font-primary-tinge-color);
 }
+.vxe-tag.theme--primary.is--border {
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-tag.theme--primary > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+}
 .vxe-tag.theme--success {
   color: var(--vxe-ui-status-success-color);
   background-color: var(--vxe-ui-status-success-tinge-color);
 }
+.vxe-tag.theme--success.is--border {
+  border-color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-tag.theme--success > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-success-darken-color);
+}
 .vxe-tag.theme--info {
   color: var(--vxe-ui-status-info-color);
   background-color: var(--vxe-ui-status-info-tinge-color);
 }
+.vxe-tag.theme--info.is--border {
+  border-color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-tag.theme--info > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-info-darken-color);
+}
 .vxe-tag.theme--warning {
   color: var(--vxe-ui-status-warning-color);
   background-color: var(--vxe-ui-status-warning-tinge-color);
 }
+.vxe-tag.theme--warning.is--border {
+  border-color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-tag.theme--warning > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-warning-darken-color);
+}
 .vxe-tag.theme--danger {
   color: var(--vxe-ui-status-danger-color);
   background-color: var(--vxe-ui-status-danger-tinge-color);
 }
+.vxe-tag.theme--danger.is--border {
+  border-color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-tag.theme--danger > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-danger-darken-color);
+}
 .vxe-tag.theme--error {
   color: var(--vxe-ui-status-error-color);
   background-color: var(--vxe-ui-status-error-tinge-color);
 }
+.vxe-tag.theme--error.is--border {
+  border-color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-tag.theme--error > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-tag.is--border {
+  border: 1px solid var(--vxe-ui-font-lighten-color);
+}
 .vxe-tag.is--round {
   border-radius: 1em;
 }
@@ -51,6 +134,45 @@
   padding: 0 0.1em;
 }
 
+.vxe-tag--icon > i,
+.vxe-tag--loading > i {
+  font-size: 1em;
+  line-height: 1em;
+}
+
+.vxe-tag--close,
+.vxe-tag--loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.1em 0;
+  border-radius: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  line-height: 1em;
+}
+
+.vxe-tag--close {
+  transition: all 0.3s;
+  cursor: pointer;
+}
+.vxe-tag--close:hover {
+  color: #fff;
+  background-color: var(--vxe-ui-font-darken-color);
+}
+.vxe-tag--close > i {
+  font-size: 0.7em;
+  line-height: 0.7em;
+}
+
+.vxe-tag--icon,
+.vxe-tag--close,
+.vxe-tag--loading {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .vxe-tag.size--medium {
   font-size: var(--vxe-ui-font-size-medium);
 }

package/lib/vxe-tag/style/style.min.css

@@ -1 +1 @@
-.vxe-tag{padding:var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-tag.color--gray{color:#827d7d;background-color:#f3f3f3}.vxe-tag.color--orangered{color:#877568;background-color:#f4e9e1}.vxe-tag.color--orange{color:#9a9079;background-color:#fff8e8}.vxe-tag.color--green{color:#627865;background-color:#e7ffea}.vxe-tag.color--blue{color:#6b7b82;background-color:#e8f8ff}.vxe-tag.color--purple{color:#8f7e97;background-color:#f8e8ff}.vxe-tag.color--pinkpurple{color:#82687a;background-color:#ffe8f8}.vxe-tag.color--magenta{color:#846084;background-color:#f4c9f4}.vxe-tag.color--chocolate{color:#7f6e61;background-color:#f7e2d2}.vxe-tag.color--cyan{color:#577474;background-color:#d7f7f7}.vxe-tag{display:inline-flex;flex-direction:row;align-items:center;padding:.25em .5em;color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--primary.is--border{border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tag.theme--primary>.vxe-tag--close:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--success.is--border{border-color:var(--vxe-ui-status-success-lighten-color)}.vxe-tag.theme--success>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--info.is--border{border-color:var(--vxe-ui-status-info-lighten-color)}.vxe-tag.theme--info>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--warning.is--border{border-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-tag.theme--warning>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--danger.is--border{border-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-tag.theme--danger>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.theme--error.is--border{border-color:var(--vxe-ui-status-error-lighten-color)}.vxe-tag.theme--error>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-tag.is--border{border:1px solid var(--vxe-ui-font-lighten-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag--icon>i,.vxe-tag--loading>i{font-size:1em;line-height:1em}.vxe-tag--close,.vxe-tag--loading{display:inline-flex;align-items:center;justify-content:center;padding:.1em 0;border-radius:50%;width:1.2em;height:1.2em;line-height:1em}.vxe-tag--close{transition:all .3s;cursor:pointer}.vxe-tag--close:hover{color:#fff;background-color:var(--vxe-ui-font-darken-color)}.vxe-tag--close>i{font-size:.7em;line-height:.7em}.vxe-tag--close,.vxe-tag--icon,.vxe-tag--loading{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.9.40",
+  "version": "4.9.42",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/tag/src/tag.ts

@@ -1,26 +1,46 @@
-import { ref, h, reactive, PropType } from 'vue'
+import { ref, h, reactive, PropType, watch } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui'
-import { getSlotVNs } from '../../ui/src/vn'
+import { getConfig, getIcon, createEvent, useSize, renderEmptyElement } from '../../ui'
 
 import type { VxeTagPropTypes, TagReactData, TagPrivateRef, VxeTagEmits, VxeTagPrivateComputed, TagMethods, TagPrivateMethods, VxeTagConstructor, VxeTagPrivateMethods, ValueOf } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeTag',
   props: {
+    border: {
+      type: Boolean as PropType<VxeTagPropTypes.Border>,
+      default: () => getConfig().tag.border
+    },
+    visible: {
+      type: Boolean as PropType<VxeTagPropTypes.Visible>,
+      default: null
+    },
     status: String as PropType<VxeTagPropTypes.Status>,
     title: [String, Number] as PropType<VxeTagPropTypes.Title>,
     icon: String as PropType<VxeTagPropTypes.Icon>,
+    closeIcon: {
+      type: String as PropType<VxeTagPropTypes.CloseIcon>,
+      default: () => getConfig().tag.closeIcon
+    },
     content: [String, Number] as PropType<VxeTagPropTypes.Content>,
     round: Boolean as PropType<VxeTagPropTypes.Round>,
+    closable: {
+      type: Boolean as PropType<VxeTagPropTypes.Closable>,
+      default: () => getConfig().tag.closable
+    },
+    color: String as PropType<VxeTagPropTypes.Color>,
+    loading: Boolean as PropType<VxeTagPropTypes.Loading>,
     size: {
       type: String as PropType<VxeTagPropTypes.Size>,
       default: () => getConfig().tag.size || getConfig().size
     }
   },
   emits: [
-    'click'
+    'click',
+    'dblclick',
+    'close',
+    'update:visible'
   ] as VxeTagEmits,
   setup (props, context) {
     const { slots, emit } = context
@@ -32,6 +52,7 @@ export default defineVxeComponent({
     const refElem = ref<HTMLDivElement>()
 
     const reactData = reactive<TagReactData>({
+      showTag: props.visible !== false
     })
 
     const refMaps: TagPrivateRef = {
@@ -62,22 +83,47 @@ export default defineVxeComponent({
     const tagPrivateMethods: TagPrivateMethods = {
     }
 
+    const updateVisible = () => {
+      reactData.showTag = props.visible !== false
+    }
+
     const clickEvent = (evnt: MouseEvent) => {
-      dispatchEvent('click', {}, evnt)
+      const { loading } = props
+      if (!loading) {
+        dispatchEvent('click', {}, evnt)
+      }
+    }
+
+    const dblclickEvent = (evnt: MouseEvent) => {
+      const { loading } = props
+      if (!loading) {
+        dispatchEvent('dblclick', {}, evnt)
+      }
+    }
+
+    const closeEvent = (evnt: MouseEvent) => {
+      const { loading } = props
+      if (!loading) {
+        const visible = !reactData.showTag
+        reactData.showTag = visible
+        emit('update:visible', visible)
+        dispatchEvent('close', { visible }, evnt)
+      }
     }
 
     Object.assign($xeTag, tagMethods, tagPrivateMethods)
 
     const renderContent = () => {
-      const { icon, content } = props
+      const { icon, content, closable, closeIcon, loading } = props
       const defaultSlot = slots.default
       const iconSlot = slots.icon
+      const closeIconSlot = slots.closeIcon || slots['close-icon']
       return [
         iconSlot || icon
           ? h('span', {
             class: 'vxe-tag--icon'
           }, iconSlot
-            ? getSlotVNs(iconSlot({}))
+            ? iconSlot({})
             : [
                 h('i', {
                   class: icon
@@ -86,25 +132,51 @@ export default defineVxeComponent({
           : renderEmptyElement($xeTag),
         h('span', {
           class: 'vxe-tag--content'
-        }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content))
+        }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content)),
+        loading || closable
+          ? h('span', {
+            class: loading ? 'vxe-tag--loading' : 'vxe-tag--close',
+            onClick: closeEvent
+          }, !loading && closeIconSlot
+            ? closeIconSlot({})
+            : [
+                h('i', {
+                  class: loading ? getIcon().TAG_LOADING : (closeIcon || getIcon().TAG_CLOSE)
+                })
+              ])
+          : renderEmptyElement($xeTag)
       ]
     }
 
     const renderVN = () => {
-      const { status, title, round } = props
+      const { status, color, title, round, border, loading } = props
+      const { showTag } = reactData
       const vSize = computeSize.value
+      if (!showTag) {
+        return renderEmptyElement($xeTag)
+      }
       return h('span', {
         ref: refElem,
         class: ['vxe-tag', {
           [`size--${vSize}`]: vSize,
-          [`theme--${status}`]: status,
-          'is--round': round
+          [`theme--${status}`]: status && !color,
+          [`color--${color}`]: color && !status,
+          'is--round': round,
+          'is--border': border,
+          'is--loading': loading
         }],
         title,
-        onClick: clickEvent
+        onClick: clickEvent,
+        onDblclick: dblclickEvent
       }, renderContent())
     }
 
+    watch(() => props.visible, () => {
+      updateVisible()
+    })
+
+    updateVisible()
+
     $xeTag.renderVN = renderVN
 
     return $xeTag

package/packages/ui/index.ts

@@ -608,6 +608,10 @@ setIcon({
   TEXT_COPY: iconPrefix + 'copy',
   TEXT_LOADING: iconPrefix + 'spinner roll',
 
+  // tag
+  TAG_CLOSE: iconPrefix + 'close',
+  TAG_LOADING: iconPrefix + 'spinner roll',
+
   // carousel
   CAROUSEL_HORIZONTAL_PREVIOUS: iconPrefix + 'arrow-left',
   CAROUSEL_HORIZONTAL_NEXT: iconPrefix + 'arrow-right',

package/packages/upload/src/upload.ts

@@ -719,6 +719,8 @@ export default defineVxeComponent({
       const cacheMaps = Object.assign({}, reactData.fileCacheMaps)
       const newFileList = multiple ? fileList : []
       const uploadPromiseRests: any[] = []
+      reactData.fileList = newFileList
+      reactData.fileCacheMaps = cacheMaps
       selectFiles.forEach(file => {
         const { name } = file
         const fileKey = getUniqueKey()
@@ -746,8 +748,6 @@ export default defineVxeComponent({
         newFileList.push(item)
         dispatchEvent('add', { option: item }, evnt)
       })
-      reactData.fileList = newFileList
-      reactData.fileCacheMaps = cacheMaps
       Promise.all(urlMode ? uploadPromiseRests : []).then(() => {
         handleChange(newFileList)
         // 自动更新校验状态

package/styles/components/tag.scss

@@ -1,50 +1,119 @@
 @use "sass:map";
 @use "sass:list";
 
-$tagsThemeList: (
+$tagThemeList: (
   (
     name: "primary",
     textColor: var(--vxe-ui-font-primary-color),
-    bgColor: var(--vxe-ui-font-primary-tinge-color)
+    bgColor: var(--vxe-ui-font-primary-tinge-color),
+    brColor: var(--vxe-ui-font-primary-lighten-color),
+    btnBgColor: var(--vxe-ui-font-primary-darken-color)
   ),
   (
     name: "success",
     textColor: var(--vxe-ui-status-success-color),
-    bgColor: var(--vxe-ui-status-success-tinge-color)
+    bgColor: var(--vxe-ui-status-success-tinge-color),
+    brColor: var(--vxe-ui-status-success-lighten-color),
+    btnBgColor: var(--vxe-ui-status-success-darken-color)
   ),
   (
     name: "info",
     textColor: var(--vxe-ui-status-info-color),
-    bgColor: var(--vxe-ui-status-info-tinge-color)
+    bgColor: var(--vxe-ui-status-info-tinge-color),
+    brColor: var(--vxe-ui-status-info-lighten-color),
+    btnBgColor: var(--vxe-ui-status-info-darken-color)
   ),
   (
     name: "warning",
     textColor: var(--vxe-ui-status-warning-color),
-    bgColor: var(--vxe-ui-status-warning-tinge-color)
+    bgColor: var(--vxe-ui-status-warning-tinge-color),
+    brColor: var(--vxe-ui-status-warning-lighten-color),
+    btnBgColor: var(--vxe-ui-status-warning-darken-color)
   ),
   (
     name: "danger",
     textColor: var(--vxe-ui-status-danger-color),
-    bgColor: var(--vxe-ui-status-danger-tinge-color)
+    bgColor: var(--vxe-ui-status-danger-tinge-color),
+    brColor: var(--vxe-ui-status-danger-lighten-color),
+    btnBgColor: var(--vxe-ui-status-danger-darken-color)
   ),
   (
     name: "error",
     textColor: var(--vxe-ui-status-error-color),
-    bgColor: var(--vxe-ui-status-error-tinge-color)
+    bgColor: var(--vxe-ui-status-error-tinge-color),
+    brColor: var(--vxe-ui-status-error-lighten-color),
+    btnBgColor: var(--vxe-ui-status-error-darken-color)
   )
 );
 
 .vxe-tag {
-  padding: var(--vxe-ui-layout-padding-half) var(--vxe-ui-layout-padding-default);
+  &.color--gray {
+    color: #827d7d;
+    background-color: #f3f3f3;
+  }
+  &.color--orangered {
+    color: #877568;
+    background-color: #f4e9e1;
+  }
+  &.color--orange {
+    color: #9a9079;
+    background-color: #fff8e8;
+  }
+  &.color--green {
+    color: #627865;
+    background-color: #e7ffea;
+  }
+  &.color--blue {
+    color: #6b7b82;
+    background-color: #e8f8ff;
+  }
+  &.color--purple {
+    color: #8f7e97;
+    background-color: #f8e8ff;
+  }
+  &.color--pinkpurple {
+    color: #82687a;
+    background-color: #ffe8f8;
+  }
+  &.color--magenta {
+    color: #846084;
+    background-color: #f4c9f4;
+  }
+  &.color--chocolate {
+    color: #7f6e61;
+    background-color: #f7e2d2;
+  }
+  &.color--cyan {
+    color: #577474;
+    background-color: #d7f7f7;
+  }
+}
+
+.vxe-tag {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.25em 0.5em;
   color: var(--vxe-ui-font-color);
   border-radius: var(--vxe-ui-base-border-radius);
-  @for $index from 0 to list.length($tagsThemeList) {
-    $item: list.nth($tagsThemeList, $index + 1);
+  @for $index from 0 to list.length($tagThemeList) {
+    $item: list.nth($tagThemeList, $index + 1);
     &.theme--#{map.get($item, name)} {
       color: map.get($item, textColor);
       background-color: map.get($item, bgColor);
+      &.is--border {
+        border-color: map.get($item, brColor);
+      }
+      & > .vxe-tag--close {
+        &:hover {
+          background-color: map.get($item, btnBgColor);
+        }
+      }
     }
   }
+  &.is--border {
+    border: 1px solid var(--vxe-ui-font-lighten-color);
+  }
   &.is--round {
     border-radius: 1em;
   }
@@ -67,6 +136,41 @@ $tagsThemeList: (
 .vxe-tag--content {
   padding: 0 0.1em;
 }
+.vxe-tag--icon,
+.vxe-tag--loading {
+  & > i {
+    font-size: 1em;
+    line-height: 1em;
+  }
+}
+.vxe-tag--close,
+.vxe-tag--loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.1em 0;
+  border-radius: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  line-height: 1em;
+}
+.vxe-tag--close {
+  transition: all 0.3s;
+  &:hover {
+    color: #fff;
+    background-color: var(--vxe-ui-font-darken-color);
+  }
+  & > i {
+    font-size: 0.7em;
+    line-height: 0.7em;
+  }
+  cursor: pointer;
+}
+.vxe-tag--icon,
+.vxe-tag--close,
+.vxe-tag--loading {
+  user-select: none;
+}
 
 .vxe-tag {
   &.size--medium {

package/types/components/tag.d.ts

@@ -23,21 +23,33 @@ export interface TagPrivateRef {
 export interface VxeTagPrivateRef extends TagPrivateRef { }
 
 export namespace VxeTagPropTypes {
+  export type Border = boolean
   export type Status = VxeComponentStatusType
+  export type Visible = boolean
   export type Title = string | number
   export type Icon = string
+  export type CloseIcon = string
   export type Content = string | number
   export type Round = boolean
   export type Size = VxeComponentSizeType
+  export type Closable = boolean
+  export type Color = 'gray' | 'orangered' | 'orange' | 'green' | 'blue' | 'purple' | 'pinkpurple' | 'magenta' | 'chocolate' | 'cyan'
+  export type Loading = boolean
 }
 
 export type VxeTagProps = {
+  border?: VxeTagPropTypes.Border
   status?: VxeTagPropTypes.Status
+  visible?: VxeTagPropTypes.Visible
   title?: VxeTagPropTypes.Title
   icon?: VxeTagPropTypes.Icon
+  closeIcon?: VxeTagPropTypes.CloseIcon
   content?: VxeTagPropTypes.Content
   round?: VxeTagPropTypes.Round
   size?: VxeTagPropTypes.Size
+  closable?: VxeTagPropTypes.Closable
+  color?: VxeTagPropTypes.Color
+  loading?: VxeTagPropTypes.Loading
 }
 
 export interface TagPrivateComputed {
@@ -45,6 +57,7 @@ export interface TagPrivateComputed {
 export interface VxeTagPrivateComputed extends TagPrivateComputed { }
 
 export interface TagReactData {
+  showTag: boolean
 }
 
 export interface TagMethods {
@@ -56,7 +69,10 @@ export interface TagPrivateMethods { }
 export interface VxeTagPrivateMethods extends TagPrivateMethods { }
 
 export type VxeTagEmits = [
-  'click'
+  'click',
+  'dblclick',
+  'close',
+  'update:visible'
 ]
 
 export namespace VxeTagDefines {
@@ -64,21 +80,23 @@ export namespace VxeTagDefines {
     $tag: VxeTagConstructor
   }
 
-  export interface ClickParams {
-  }
-  export interface ClickEventParams extends TagEventParams, ClickParams { }
+  export interface ClickEventParams extends TagEventParams { }
+  export interface CloseEventParams extends TagEventParams { }
 }
 
 export type VxeTagEventProps = {
   onClick?: VxeTagEvents.Click
+  onClose?: VxeTagEvents.Close
 }
 
 export interface VxeTagListeners {
   click?: VxeTagEvents.Click
+  close?: VxeTagEvents.Close
 }
 
 export namespace VxeTagEvents {
   export type Click = (params: VxeTagDefines.ClickEventParams) => void
+  export type Close = (params: VxeTagDefines.CloseEventParams) => void
 }
 
 export namespace VxeTagSlotTypes {
@@ -88,6 +106,8 @@ export namespace VxeTagSlotTypes {
 export interface VxeTagSlots {
   default?: (params: VxeTagSlotTypes.DefaultSlotParams) => any
   icon?: (params: VxeTagSlotTypes.DefaultSlotParams) => any
+  closeIcon?: (params: VxeTagSlotTypes.DefaultSlotParams) => any
+  'close-icon'?: (params: VxeTagSlotTypes.DefaultSlotParams) => any
 }
 
 export const Tag: typeof VxeTag

package/types/ui/global-icon.d.ts

@@ -229,6 +229,10 @@ declare module '@vxe-ui/core' {
     TEXT_COPY?: string
     TEXT_LOADING?: string
 
+    // tag
+    TAG_CLOSE?: string
+    TAG_LOADING?: string
+
     // carousel
     CAROUSEL_HORIZONTAL_PREVIOUS?: string
     CAROUSEL_HORIZONTAL_NEXT?: string