vxe-pc-ui 3.9.39 → 3.9.41

package/packages/tag/src/tag.ts

@@ -1,8 +1,7 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, globalMixins, renderEmptyElement } from '../../ui'
-import { getSlotVNs } from '../../ui/src/vn'
+import { getConfig, getIcon, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 
 import type { VxeTagPropTypes, TagReactData, VxeTagEmits, VxeComponentPermissionInfo, VxeComponentSizeType, ValueOf } from '../../../types'
 
@@ -13,11 +12,29 @@ export default /* define-vxe-component start */ defineVxeComponent({
     globalMixins.permissionMixin
   ],
   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
@@ -25,6 +42,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
   },
   data () {
     const reactData: TagReactData = {
+      showTag: true
     }
     return {
       xID: XEUtils.uniqueId(),
@@ -37,6 +55,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       computeSize(): VxeComponentSizeType
     })
   },
+  watch: {
+    visible () {
+      const $xeTag = this
+
+      $xeTag.updateVisible()
+    }
+  },
   methods: {
     //
     // Method
@@ -45,10 +70,43 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTag = this
       $xeTag.$emit(type, createEvent(evnt, { $tag: $xeTag }, params))
     },
+    updateVisible () {
+      const $xeTag = this
+      const props = $xeTag
+      const reactData = $xeTag.reactData
+
+      reactData.showTag = props.visible !== false
+    },
     clickEvent  (evnt: MouseEvent) {
       const $xeTag = this
+      const props = $xeTag
+
+      const { loading } = props
+      if (!loading) {
+        $xeTag.dispatchEvent('click', {}, evnt)
+      }
+    },
+    dblclickEvent  (evnt: MouseEvent) {
+      const $xeTag = this
+      const props = $xeTag
+
+      const { loading } = props
+      if (!loading) {
+        $xeTag.dispatchEvent('dblclick', {}, evnt)
+      }
+    },
+    closeEvent (evnt: MouseEvent) {
+      const $xeTag = this
+      const props = $xeTag
+      const reactData = $xeTag.reactData
 
-      $xeTag.dispatchEvent('click', {}, evnt)
+      const { loading } = props
+      if (!loading) {
+        const visible = !reactData.showTag
+        reactData.showTag = visible
+        $xeTag.$emit('update:visible', visible)
+        $xeTag.dispatchEvent('close', { visible }, evnt)
+      }
     },
 
     //
@@ -59,15 +117,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeTag
       const slots = $xeTag.$scopedSlots
 
-      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
@@ -76,31 +135,60 @@ export default /* define-vxe-component start */ 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',
+            on: {
+              click: $xeTag.closeEvent
+            }
+          }, !loading && closeIconSlot
+            ? closeIconSlot({})
+            : [
+                h('i', {
+                  class: loading ? getIcon().TAG_LOADING : (closeIcon || getIcon().TAG_CLOSE)
+                })
+              ])
+          : renderEmptyElement($xeTag)
       ]
     },
     renderVN  (h: CreateElement): VNode {
       const $xeTag = this
       const props = $xeTag
+      const reactData = $xeTag.reactData
 
-      const { status, title, round } = props
+      const { status, color, title, round, border, loading } = props
+      const { showTag } = reactData
       const vSize = $xeTag.computeSize
+      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--color': color,
+          'is--round': round,
+          'is--border': border,
+          'is--loading': loading
         }],
         attrs: {
           title
         },
         on: {
-          click: $xeTag.clickEvent
+          click: $xeTag.clickEvent,
+          dblclick: $xeTag.dblclickEvent
         }
       }, $xeTag.renderContent(h))
     }
   },
+  created () {
+    const $xeTag = this
+
+    $xeTag.updateVisible()
+  },
   render (this: any, h) {
     return this.renderVN(h)
   }

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/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/column.d.ts

@@ -647,7 +647,7 @@ export namespace VxeColumnSlotTypes {
     columnIndex: number
     $columnIndex: number
     $rowIndex: number
-    option: VxeColumnPropTypes.FilterItem | null
+    option: VxeColumnPropTypes.FilterItem
   }
   export interface FloatingFilterSlotParams<D = any> extends VxeTableDefines.CellFloatingFilterParams<D> { }
 

package/types/components/grid.d.ts

@@ -850,7 +850,7 @@ export namespace VxeGridSlotTypes {
      */
     _columnIndex: number
 
-    option: VxeColumnPropTypes.FilterItem | null
+    option: VxeColumnPropTypes.FilterItem
 
     type: string
     fixed: VxeColumnPropTypes.Fixed

package/types/components/table.d.ts

@@ -5730,7 +5730,7 @@ export namespace VxeTableDefines {
     type: string
     isHidden: boolean
     hasFilter: boolean
-    option: VxeColumnPropTypes.FilterItem | null
+    option: VxeColumnPropTypes.FilterItem
   }
 
   export interface CellRenderHeaderParams<D = any> {
@@ -5746,7 +5746,7 @@ export namespace VxeTableDefines {
     type: string
     isHidden: boolean
     hasFilter: boolean
-    firstFilterOption: VxeColumnPropTypes.FilterItem | null
+    firstFilterOption: VxeColumnPropTypes.FilterItem
 
     checked?: boolean
     indeterminate?: boolean

package/types/components/tag.d.ts

@@ -16,21 +16,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 interface VxeTagProps {
+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 {
@@ -38,6 +50,7 @@ export interface TagPrivateComputed {
 export interface VxeTagPrivateComputed extends TagPrivateComputed { }
 
 export interface TagReactData {
+  showTag: boolean
 }
 
 export interface TagMethods {
@@ -49,7 +62,10 @@ export interface TagPrivateMethods { }
 export interface VxeTagPrivateMethods extends TagPrivateMethods { }
 
 export type VxeTagEmits = [
-  'click'
+  'click',
+  'dblclick',
+  'close',
+  'update:visible'
 ]
 
 export namespace VxeTagDefines {
@@ -57,21 +73,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 {
@@ -81,6 +99,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