vxe-pc-ui 4.9.39 → 4.9.41

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/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

@@ -653,7 +653,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

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

package/types/components/table.d.ts

@@ -5708,7 +5708,7 @@ export namespace VxeTableDefines {
     type: string
     isHidden: boolean
     hasFilter: boolean
-    option: VxeColumnPropTypes.FilterItem | null
+    option: VxeColumnPropTypes.FilterItem
   }
 
   export interface CellRenderHeaderParams<D = any> {
@@ -5724,7 +5724,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

@@ -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