vxe-pc-ui 4.16.20 → 4.16.22

package/packages/color-picker/index.ts

@@ -2,6 +2,7 @@ import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
 import VxeColorPickerComponent from './src/color-picker'
 import { dynamicApp } from '../dynamics'
+import { parseColor, hasRgb, hasHex, toRgb, toHex, toHsl, toHsv, toRgbString, toHexString, lighten, darken } from './src/util'
 
 export const VxeColorPicker = Object.assign({}, VxeColorPickerComponent, {
   install (app: App) {
@@ -12,5 +13,19 @@ export const VxeColorPicker = Object.assign({}, VxeColorPickerComponent, {
 dynamicApp.use(VxeColorPicker)
 VxeUI.component(VxeColorPickerComponent)
 
+VxeUI.color = {
+  parseColor,
+  hasRgb,
+  hasHex,
+  toRgb,
+  toRgbString,
+  toHex,
+  toHexString,
+  toHsl,
+  toHsv,
+  lighten,
+  darken
+}
+
 export const ColorPicker = VxeColorPicker
 export default VxeColorPicker

package/packages/color-picker/src/color-picker.ts

@@ -4,12 +4,12 @@ import XEUtils from 'xe-utils'
 import { VxeUI, getIcon, getConfig, getI18n, globalEvents, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
-import { parseColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHex, hexToRgb, hsvToRgb, toRgb } from './util'
+import { parseValColor, updateColorAlpha, hexToHsv, rgbToHsv, rgbToHexVal, hexToRgb, hsvToRgb, toValRgb } from './util'
 import VxeButtonComponent from '../../button'
 import VxeInputComponent from '../../input'
 import VxeNumberInputComponent from '../../number-input'
 
-import type { ColorPickerReactData, VxeColorPickerPropTypes, VxeColorPickerEmits, ColorPickerInternalData, ColorPickerMethods, ColorPickerPrivateMethods, ValueOf, ColorPickerPrivateRef, VxeColorPickerPrivateComputed, VxeColorPickerConstructor, VxeColorPickerPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
+import type { ColorPickerReactData, VxeColorPickerPropTypes, VxeColorPickerEmits, ColorPickerInternalData, ColorPickerMethods, ColorPickerPrivateMethods, ValueOf, ColorPickerPrivateRef, VxeColorPickerPrivateComputed, VxeColorPickerConstructor, VxeColorPickerPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineVxeComponent({
@@ -82,6 +82,7 @@ export default defineVxeComponent({
     const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
     const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeCard = inject<(VxeCardConstructor & VxeCardPrivateMethods) | null>('$xeCard', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
     const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
@@ -158,7 +159,7 @@ export default defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
           return true
         }
       }
@@ -240,31 +241,41 @@ export default defineVxeComponent({
       const isRgb = computeIsRgb.value
       const hueSliderEl = refHueSliderElem.value
       const alphaSliderEl = refAlphaSliderElem.value
-      const colorRest = parseColor(selectColor)
-      reactData.hexValue = colorRest.hex
-      reactData.rValue = colorRest.r
-      reactData.gValue = colorRest.g
-      reactData.bValue = colorRest.b
-      reactData.aValue = colorRest.a
-      if (colorRest.value) {
-        if (isRgb) {
-          if (colorRest.type === 'hex') {
-            const rgbRest = hexToRgb(colorRest.hex)
-            if (rgbRest) {
-              reactData.rValue = rgbRest.r
-              reactData.gValue = rgbRest.g
-              reactData.bValue = rgbRest.b
-              reactData.aValue = rgbRest.a
-            }
-          }
+      const colorRest = parseValColor(selectColor)
+      reactData.hexValue = ''
+      reactData.rValue = 0
+      reactData.gValue = 0
+      reactData.bValue = 0
+      reactData.aValue = 1
+      if (colorRest) {
+        if (colorRest.type === 'hex') {
+          reactData.hexValue = colorRest.hex
         } else {
-          if (colorRest.type !== 'hex') {
-            reactData.hexValue = rgbToHex(colorRest)
+          reactData.rValue = colorRest.r
+          reactData.gValue = colorRest.g
+          reactData.bValue = colorRest.b
+          reactData.aValue = colorRest.a
+        }
+        if (colorRest.value) {
+          if (isRgb) {
+            if (colorRest.type === 'hex') {
+              const rgbRest = hexToRgb(colorRest.hex)
+              if (rgbRest) {
+                reactData.rValue = rgbRest.r
+                reactData.gValue = rgbRest.g
+                reactData.bValue = rgbRest.b
+                reactData.aValue = rgbRest.a
+              }
+            }
+          } else {
+            if (colorRest.type !== 'hex') {
+              reactData.hexValue = rgbToHexVal(colorRest.r, colorRest.g, colorRest.b, colorRest.a)
+            }
           }
         }
       }
       if (isAniVisible) {
-        const hsvRest = colorRest.type === 'hex' ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest)
+        const hsvRest = colorRest ? (colorRest.type === 'hex' ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest)) : null
         const colorPanelEl = refColorPanelElem.value
         if (hsvRest) {
           if (colorPanelEl) {
@@ -277,7 +288,7 @@ export default defineVxeComponent({
           }
         }
         if (alphaSliderEl) {
-          handleAlphaColor(alphaSliderEl.clientWidth * colorRest.a)
+          handleAlphaColor(alphaSliderEl.clientWidth * reactData.aValue)
         }
       }
     }
@@ -455,7 +466,7 @@ export default defineVxeComponent({
             gNum = itemNum - offsetNum
             break
         }
-        reactData.panelColor = toRgb(rNum, gNum, bNum)
+        reactData.panelColor = toValRgb(rNum, gNum, bNum)
         hueSliderBtnEl.style.left = toCssUnit(offsetLeft)
       }
     }
@@ -531,7 +542,7 @@ export default defineVxeComponent({
 
     const handleInputRgbEvent = () => {
       const { rValue, gValue, bValue, aValue } = reactData
-      reactData.selectColor = toRgb(rValue, gValue, bValue, aValue)
+      reactData.selectColor = toValRgb(rValue, gValue, bValue, aValue)
       updateModelColor()
     }
 
@@ -586,12 +597,12 @@ export default defineVxeComponent({
         const colorPanelRect = colorPanelEl.getBoundingClientRect()
         const offsetTop = Math.min(clientHeight, Math.max(0, clientY - colorPanelRect.y))
         const offsetLeft = Math.min(clientWidth, Math.max(0, clientX - colorPanelRect.x))
-        const colorRest = parseColor(panelColor)
+        const colorRest = parseValColor(panelColor)
         if (colorRest) {
           const hsvRest = colorRest.type === 'hex' ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest)
           if (hsvRest) {
             const ragRest = hsvToRgb(hsvRest.h, offsetLeft / clientWidth, (1 - offsetTop / clientHeight))
-            reactData.selectColor = toRgb(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null)
+            reactData.selectColor = toValRgb(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null)
             updateModelColor()
           }
         }
@@ -938,7 +949,7 @@ export default defineVxeComponent({
                       reactData.hexValue = val
                     },
                     onChange () {
-                      const colorRest = parseColor(reactData.hexValue)
+                      const colorRest = parseValColor(reactData.hexValue)
                       if (colorRest) {
                         if (colorRest.value) {
                           reactData.selectColor = colorRest.value

package/packages/color-picker/src/util.ts

@@ -1,5 +1,7 @@
 import XEUtils from 'xe-utils'
 
+import type { VxeColorPickerDefines } from '../../../types'
+
 const hexAlphaKeyMaps: Record<string, number> = {}
 const hexAlphaNumMaps: Record<string, string> = {}
 'FF,FC,FA,F7,F5,F2,F0,ED,EB,E8,E6,E3,E0,DE,DB,D9,D6,D4,D1,CF,CC,C9,C7,C4,C2,BF,BD,BA,B8,B5,B3,B0,AD,AB,A8,A6,A3,A1,9E,9C,99,96,94,91,8F,8C,8A,87,85,82,80,7D,7A,78,75,73,70,6E,6B,69,66,63,61,5E,5C,59,57,54,52,4F,4D,4A,47,45,42,40,3D,3B,38,36,33,30,2E,2B,29,26,24,21,1F,1C,1A,17,14,12,0F,0D,0A,08,05,03,00'.split(',').forEach((key, i) => {
@@ -10,15 +12,156 @@ const hexAlphaNumMaps: Record<string, string> = {}
 
 const rgbRE = /^rgb(a?)\((\d{1,3})[,\s]+(\d{1,3})[,\s]+(\d{1,3})([,//\s]+([0-9.]{1,4})(%?))?\)$/
 export function hasRgb (value: string) {
-  return value && rgbRE.test(value)
+  return !!(value && rgbRE.test(value))
 }
 
 const hexRE = /^(#?)([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/
 export function hasHex (value: string) {
-  return value && hexRE.test(value)
+  return !!(value && hexRE.test(value))
+}
+
+export function toRgb (value: string) {
+  if (value) {
+    if (hexRE.test(value)) {
+      return hexToRgb(value)
+    }
+    return parseRgbVal(value)
+  }
+  return null
+}
+
+export function toRgbString (value: string) {
+  const rgbRest = toRgb(value)
+  if (rgbRest) {
+    return rgbRest.label
+  }
+  return ''
+}
+
+export function toHex (value: string) {
+  if (value) {
+    if (rgbRE.test(value)) {
+      return rgbValToHex(value)
+    }
+    return parseHexVal(value)
+  }
+  return null
+}
+
+export function toHexString (value: string) {
+  const hexRest = toHex(value)
+  if (hexRest) {
+    return hexRest.label
+  }
+  return ''
+}
+
+export function toHsl (value: string) {
+  const rgbRest = toRgb(value)
+  if (rgbRest) {
+    const hslRest = rgbToHsl(rgbRest)
+    if (hslRest) {
+      const rest: VxeColorPickerDefines.HslObj = { value, type: 'hsl', ...hslRest }
+      return rest
+    }
+  }
+  return null
+}
+
+export function toHsv (value: string) {
+  const rgbRest = toRgb(value)
+  if (rgbRest) {
+    const hslRest = rgbToHsv(rgbRest)
+    if (hslRest) {
+      const rest: VxeColorPickerDefines.HsvObj = { value, type: 'hsv', ...hslRest }
+      return rest
+    }
+  }
+  return null
+}
+
+export function parseColor<T extends keyof VxeColorPickerDefines.ParseResultMap> (val: string, format?: T): VxeColorPickerDefines.ParseResultMap[T] | null {
+  if (val) {
+    if (format === 'hex') {
+      return toHex(val) as any
+    }
+    if (format === 'hsl') {
+      return toHsl(val) as any
+    }
+    if (format === 'hsv') {
+      return toHsv(val) as any
+    }
+    return toRgb(val) as any
+  }
+  return null
+}
+
+function handleNumClamp (val: number) {
+  return Math.min(1, Math.max(0, val))
+}
+
+function createLightenDarken (isAdd: number) {
+  return function (val: string, ratio?: number) {
+    const colorRest = parseColor(val)
+    const hslRest = toHsl(val)
+    if (colorRest && hslRest) {
+      ratio = ratio === 0 ? 0 : ratio || 10
+      hslRest.l += (isAdd ? ratio : -ratio) / 100
+      hslRest.l = handleNumClamp(hslRest.l)
+      const rgbRest = hslToRgb(hslRest)
+      if (rgbRest) {
+        if (colorRest?.type === 'hex') {
+          return rgbToHexVal(rgbRest.r, rgbRest.g, rgbRest.b, hslRest.a)
+        }
+        return toValRgb(rgbRest.r, rgbRest.g, rgbRest.b, hslRest.a)
+      }
+    }
+    return val
+  }
+}
+
+export const lighten = createLightenDarken(1)
+export const darken = createLightenDarken(0)
+
+function parseHexVal (value: string) {
+  if (value) {
+    const hexRest = value.match(hexRE)
+    if (hexRest) {
+      const rest:VxeColorPickerDefines.HexObj = {
+        value,
+        label: value,
+        type: 'hex',
+        hex: value,
+        hexV: hexRest[2],
+        hexA: hexRest[3] || '',
+        a: (hexRest[3] ? hexAlphaKeyMaps[hexRest[3].toUpperCase()] : 1) || 1
+      }
+      return rest
+    }
+  }
+  return null
+}
+
+function parseRgbVal (value: string) {
+  if (value) {
+    const rgbRest = value.match(rgbRE)
+    if (rgbRest) {
+      const rest: VxeColorPickerDefines.RgbObj = {
+        value,
+        label: value,
+        type: (rgbRest[6] ? 'rgba' : 'rgb') as 'rgba' | 'rgb',
+        r: parseInt(rgbRest[2]),
+        g: parseInt(rgbRest[3]),
+        b: parseInt(rgbRest[4]),
+        a: rgbRest[7] ? parseInt(rgbRest[6]) / 100 : (rgbRest[6] ? parseFloat(rgbRest[6]) : 1)
+      }
+      return rest
+    }
+  }
+  return null
 }
 
-export function parseColor (value: string) {
+export function parseValColor (value: string) {
   const rest = {
     value: '',
     type: '',
@@ -31,57 +174,47 @@ export function parseColor (value: string) {
     a: 1
   }
   if (value) {
-    const hexRest = value.match(hexRE)
-    if (hexRest) {
-      rest.value = value
-      rest.type = 'hex'
-      rest.hex = value
-      rest.hexV = hexRest[2]
-      rest.hexA = hexRest[3] || ''
-      rest.a = (hexRest[3] ? hexAlphaKeyMaps[hexRest[3].toUpperCase()] : 1) || 1
-    }
-    const rgbRest = value.match(rgbRE)
-    if (rgbRest) {
-      rest.value = value
-      rest.type = rgbRest[6] ? 'rgba' : 'rgb'
-      rest.r = parseInt(rgbRest[2])
-      rest.g = parseInt(rgbRest[3])
-      rest.b = parseInt(rgbRest[4])
-      rest.a = rgbRest[7] ? parseInt(rgbRest[6]) / 100 : (rgbRest[6] ? parseFloat(rgbRest[6]) : 1)
+    if (hexRE.test(value)) {
+      return Object.assign(rest, parseHexVal(value))
+    } else if (rgbRE.test(value)) {
+      return Object.assign(rest, parseRgbVal(value))
     }
   }
   return rest
 }
 
 export function updateColorAlpha (value: string, alpha: number = 1) {
-  const colorRest = parseColor(value)
-  const { type, hexV, r, g, b } = colorRest
-  if (type === 'rgb' || type === 'rgba') {
-    return toRgb(r, g, b, alpha)
-  }
-  if (type === 'hex') {
-    return `#${hexV}${alpha === 1 ? '' : (hexAlphaNumMaps[alpha] || '')}`
+  const colorRest = parseValColor(value)
+  if (colorRest) {
+    const { type } = colorRest
+    if (type === 'hex') {
+      return `#${colorRest.hexV}${alpha === 1 ? '' : (hexAlphaNumMaps[alpha] || '')}`
+    }
+    return toValRgb(colorRest.r, colorRest.g, colorRest.b, alpha)
   }
   return ''
 }
 
-export function toRgb (r: number, g: number, b: number, a?: number | null) {
-  if (XEUtils.eqNull(a)) {
+export function toValRgb (r: number, g: number, b: number, a?: number | null) {
+  if (XEUtils.eqNull(a) || a === 1) {
     return `rgb(${r},${g},${b})`
   }
   return `rgba(${r},${g},${b},${a})`
 }
 
-export function rgbToHex (rgbRest: {
-  r: number
-  g: number
-  b: number
-  a?: number
-}) {
-  if (!rgbRest) {
-    return ''
+function rgbValToHex (value: string) {
+  const rgbRest = parseRgbVal(value)
+  if (rgbRest) {
+    const hexVal = rgbToHexVal(rgbRest.r, rgbRest.g, rgbRest.b, rgbRest.a)
+    if (hexVal) {
+      return parseHexVal(hexVal)
+    }
   }
-  const { r, g, b, a = 1 } = rgbRest
+  return null
+}
+
+export function rgbToHexVal (r: number, g: number, b: number, a?: number) {
+  a = XEUtils.isNumber(a) ? a : 1
   const hexR = r.toString(16).padStart(2, '0')
   const hexG = g.toString(16).padStart(2, '0')
   const hexB = b.toString(16).padStart(2, '0')
@@ -136,6 +269,91 @@ export function rgbToHsv (rgbRest: {
   }
 }
 
+function rgbToHsl (rgbRest: {
+  r: number
+  g: number
+  b: number
+  a?: number
+}) {
+  if (!rgbRest) {
+    return null
+  }
+  const { r, g, b, a } = rgbRest
+  const rNorm = r / 255
+  const gNorm = g / 255
+  const bNorm = b / 255
+
+  const max = Math.max(rNorm, gNorm, bNorm)
+  const min = Math.min(rNorm, gNorm, bNorm)
+  const delta = max - min
+
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (delta !== 0) {
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min)
+    if (max === rNorm) {
+      h = ((gNorm - bNorm) / delta) % 6
+    } else if (max === gNorm) {
+      h = (bNorm - rNorm) / delta + 2
+    } else {
+      h = (rNorm - gNorm) / delta + 4
+    }
+    h *= 60
+    if (h < 0) {
+      h += 360
+    }
+  }
+
+  return {
+    h,
+    s,
+    l,
+    a: XEUtils.isNumber(a) ? a : 1
+  }
+}
+
+function hslToRgb (slRest: {
+  h: number
+  s: number
+  l: number
+}) {
+  if (!slRest) {
+    return null
+  }
+  let { h, s, l } = slRest
+  const sNorm = s
+  const lNorm = l
+
+  h = ((h % 360) + 360) % 360
+
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1))
+  const m = lNorm - c / 2
+
+  let r: number, g: number, b: number
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c
+  } else {
+    r = c; g = 0; b = x
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  }
+}
+
 export function hsvToRgb (h: number, s: number, v: number) {
   let r = 0
   let g = 0
@@ -186,11 +404,18 @@ export function hexToRgb (str: string) {
   if (str) {
     const rests = str.match(/^(#?)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})?$/)
     if (rests) {
+      const r = parseInt(rests[2], 16)
+      const g = parseInt(rests[3], 16)
+      const b = parseInt(rests[4], 16)
+      const a = (rests[5] ? hexAlphaKeyMaps[rests[5].toUpperCase()] : 1) || 1
       return {
-        r: parseInt(rests[2], 16),
-        g: parseInt(rests[3], 16),
-        b: parseInt(rests[4], 16),
-        a: (rests[5] ? hexAlphaKeyMaps[rests[5].toUpperCase()] : 1) || 1
+        value: str,
+        label: toValRgb(r, g, b, rests[5] ? a : null),
+        type: (rests[5] ? 'rgba' : 'rgb') as 'rgba' | 'rgb',
+        r,
+        g,
+        b,
+        a
       }
     }
   }

package/packages/date-picker/src/date-picker.ts

@@ -11,7 +11,7 @@ import VxeDatePanelComponent from '../../date-panel/src/date-panel'
 import VxeButtonComponent from '../../button/src/button'
 import VxeButtonGroupComponent from '../../button/src/button-group'
 
-import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, DatePickerMethods, VxeDatePanelDefines, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
+import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, DatePickerMethods, VxeDatePanelDefines, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { warnLog, errLog } = createComponentLog('date-picker')
@@ -181,6 +181,7 @@ export default defineVxeComponent({
     const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
     const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeCard = inject<(VxeCardConstructor & VxeCardPrivateMethods) | null>('$xeCard', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
     const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
@@ -223,7 +224,7 @@ export default defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
           return true
         }
       }

package/packages/date-range-picker/src/date-range-picker.ts

@@ -11,7 +11,7 @@ import VxeDatePanelComponent from '../../date-panel'
 import VxeButtonComponent from '../../button'
 import VxeButtonGroupComponent from '../../button-group'
 
-import type { VxeDateRangePickerConstructor, VxeDateRangePickerEmits, DateRangePickerInternalData, DateRangePickerReactData, DateRangePickerMethods, VxeDateRangePickerPropTypes, DateRangePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDatePanelPropTypes, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePanelEvents, VxeDateRangePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor } from '../../../types'
+import type { VxeDateRangePickerConstructor, VxeDateRangePickerEmits, DateRangePickerInternalData, DateRangePickerReactData, DateRangePickerMethods, VxeDateRangePickerPropTypes, DateRangePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDatePanelPropTypes, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePanelEvents, VxeDateRangePickerDefines, VxeButtonGroupEvents, VxeDatePanelConstructor, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { errLog } = createComponentLog('date-range-picker')
@@ -176,6 +176,7 @@ export default defineVxeComponent({
     const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null)
     const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeCard = inject<(VxeCardConstructor & VxeCardPrivateMethods) | null>('$xeCard', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null)
     const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
@@ -222,7 +223,7 @@ export default defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
           return true
         }
       }

package/packages/print/src/util.ts

@@ -8,7 +8,7 @@ import type { VxePrintProps, VxePrintPropTypes, VxePrintDefines, VxePrintConstru
 let printFrame: any
 
 // 默认导出或打印的 HTML 样式
-const defaultHtmlStyle = 'body{padding:0;color:rgba(0,0,0,0.7);font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}body *{-webkit-box-sizing:border-box;box-sizing:border-box;}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0;}.vxe-table.is--default-width,.vxe-table.is--auto-width{width:100%;}.vxe-table.is--scale-width{table-layout:fixed;}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{word-break:break-all;border-color:#D0D0D0;border-style:solid;border-width:0;}.border--default,.border--full,.border--outer{border-top-width:1px;}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px;}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px;}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9;}.vxe-table td>div,.vxe-table th>div{padding:0.5em 0.4em;}.col--center{text-align:center;}.col--right{text-align:right;}.vxe-table .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}.vxe-table--tree-node{text-align:left;}.vxe-table--tree-node-wrapper{position:relative;}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:0.5em;border-right-color:transparent;border-bottom-color:transparent;}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent;}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599;}.vxe-table--tree-cell{display:block;padding-left:1.5em;}.vxe-table input[type="checkbox"]{margin:0;}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}'
+const defaultHtmlStyle = 'body{padding:0;color:rgba(0,0,0,0.7);font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0}.vxe-table.is--default-width,.vxe-table.is--auto-width{width:100%}.vxe-table.is--scale-width{table-layout:fixed}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{white-space:pre-line;word-break:break-all;border-color:#D0D0D0;border-style:solid;border-width:0}.border--default,.border--full,.border--outer{border-top-width:1px}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9}.vxe-table td>div,.vxe-table th>div{padding:0.5em 0.4em}.col--center{text-align:center}.col--right{text-align:right}.vxe-table .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vxe-table--tree-node{text-align:left}.vxe-table--tree-node-wrapper{position:relative}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:0.5em;border-right-color:transparent;border-bottom-color:transparent}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599}.vxe-table--tree-cell{display:block;padding-left:1.5em}.vxe-table input[type="checkbox"]{margin:0}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}'
 
 export function trimHtml (html: string) {
   return `${html}`.replace(/(<!---->)/, '')

package/packages/select/src/select.ts

@@ -9,7 +9,7 @@ import { createComponentLog } from '../../ui/src/log'
 import VxeInputComponent from '../../input/src/input'
 import VxeButtonComponent from '../../button/src/button'
 
-import type { VxeSelectPropTypes, VxeSelectConstructor, SelectInternalData, SelectReactData, VxeSelectDefines, VxeButtonEvents, ValueOf, VxeSelectEmits, VxeComponentSlotType, VxeInputConstructor, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputEvents, VxeComponentStyleType } from '../../../types'
+import type { VxeSelectPropTypes, VxeSelectConstructor, SelectInternalData, SelectReactData, VxeSelectDefines, VxeButtonEvents, ValueOf, VxeSelectEmits, VxeComponentSlotType, VxeInputConstructor, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputEvents, VxeComponentStyleType, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { errLog } = createComponentLog('select')
@@ -216,6 +216,7 @@ export default defineVxeComponent({
     const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null)
     const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null)
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
+    const $xeCard = inject<(VxeCardConstructor & VxeCardPrivateMethods) | null>('$xeCard', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
     const formItemInfo = inject<VxeFormDefines.ProvideItemInfo | null>('xeFormItemInfo', null)
 
@@ -280,7 +281,7 @@ export default defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
           return true
         }
       }

package/styles/components/checkbox-button.scss

@@ -48,6 +48,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    @include baseMixin.createAnimationTransition(all, 0.2s);
   }
 }
 

package/styles/components/radio-button.scss

@@ -49,6 +49,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    @include baseMixin.createAnimationTransition(all, 0.2s);
   }
 }
 

package/styles/helpers/baseMixin.scss

@@ -8,6 +8,7 @@
   }
   .vxe-checkbox--icon {
     font-size: 1.22em;
+    @include createAnimationTransition(all, 0.2s);
   }
   .vxe-checkbox--icon {
     color: var(--vxe-ui-input-border-color);
@@ -54,6 +55,7 @@
   }
   .vxe-radio--icon {
     font-size: 1.26em;
+    @include createAnimationTransition(all, 0.2s);
   }
   .vxe-radio--icon {
     color: var(--vxe-ui-input-border-color);