vxe-pc-ui 3.16.21 → 3.16.23

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'
 import VxeButtonComponent from '../../button'
 import VxeButtonGroupComponent from '../../button-group'
 
-import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeButtonGroupDefines, VxeComponentSizeType, VxeDatePanelDefines, VxeDatePickerPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeDatePanelConstructor } from '../../../types'
+import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeButtonGroupDefines, VxeComponentSizeType, VxeDatePanelDefines, VxeDatePickerPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeDatePanelConstructor, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { warnLog, errLog } = createComponentLog('date-picker')
@@ -206,6 +206,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeModal(): (VxeModalConstructor & VxeModalMethods) | null
       $xeDrawer(): (VxeDrawerConstructor & VxeDrawerMethods) | null
       $xeTable(): (VxeTableConstructor & VxeTablePrivateMethods) | null
+      $xeCard(): (VxeCardConstructor & VxeCardPrivateMethods) | null
       $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
       formItemInfo(): VxeFormDefines.ProvideItemInfo | null
     }),
@@ -215,6 +216,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTable = $xeDatePicker.$xeTable
       const $xeModal = $xeDatePicker.$xeModal
       const $xeDrawer = $xeDatePicker.$xeDrawer
+      const $xeCard = $xeDatePicker.$xeCard
       const $xeForm = $xeDatePicker.$xeForm
 
       const { transfer } = props
@@ -227,7 +229,7 @@ export default /* define-vxe-component start */ 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/src/date-panel'
 import VxeButtonComponent from '../../button/src/button'
 import VxeButtonGroupComponent from '../../button/src/button-group'
 
-import type { VxeDateRangePickerConstructor, VxeDateRangePickerEmits, DateRangePickerReactData, DateRangePickerInternalData, VxeButtonGroupDefines, VxeComponentSizeType, VxeDateRangePickerPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDateRangePickerDefines, VxeDatePanelConstructor } from '../../../types'
+import type { VxeDateRangePickerConstructor, VxeDateRangePickerEmits, DateRangePickerReactData, DateRangePickerInternalData, VxeButtonGroupDefines, VxeComponentSizeType, VxeDateRangePickerPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDateRangePickerDefines, VxeDatePanelConstructor, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { errLog } = createComponentLog('date-range-picker')
@@ -199,6 +199,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeModal(): (VxeModalConstructor & VxeModalMethods) | null
       $xeDrawer(): (VxeDrawerConstructor & VxeDrawerMethods) | null
       $xeTable(): (VxeTableConstructor & VxeTablePrivateMethods) | null
+      $xeCard(): (VxeCardConstructor & VxeCardPrivateMethods) | null
       $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
       formItemInfo(): VxeFormDefines.ProvideItemInfo | null
     }),
@@ -208,6 +209,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTable = $xeDateRangePicker.$xeTable
       const $xeModal = $xeDateRangePicker.$xeModal
       const $xeDrawer = $xeDateRangePicker.$xeDrawer
+      const $xeCard = $xeDateRangePicker.$xeCard
       const $xeForm = $xeDateRangePicker.$xeForm
 
       const { transfer } = props
@@ -220,7 +222,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
           return true
         }
       }

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, SelectInternalData, ValueOf, VxeComponentSizeType, SelectReactData, VxeSelectEmits, VxeButtonDefines, VxeInputDefines, VxeSelectDefines, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputConstructor, VxeComponentSlotType, VxeComponentStyleType } from '../../../types'
+import type { VxeSelectPropTypes, SelectInternalData, ValueOf, VxeComponentSizeType, SelectReactData, VxeSelectEmits, VxeButtonDefines, VxeInputDefines, VxeSelectDefines, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputConstructor, VxeComponentSlotType, VxeComponentStyleType, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { errLog } = createComponentLog('select')
@@ -247,6 +247,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeModal(): (VxeModalConstructor & VxeModalMethods) | null
       $xeDrawer(): (VxeDrawerConstructor & VxeDrawerMethods) | null
       $xeTable(): (VxeTableConstructor & VxeTablePrivateMethods) | null
+      $xeCard(): (VxeCardConstructor & VxeCardPrivateMethods) | null
       $xeForm(): (VxeFormConstructor & VxeFormPrivateMethods) | null
       formItemInfo(): VxeFormDefines.ProvideItemInfo | null
     }),
@@ -284,6 +285,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTable = $xeSelect.$xeTable
       const $xeModal = $xeSelect.$xeModal
       const $xeDrawer = $xeSelect.$xeDrawer
+      const $xeCard = $xeSelect.$xeCard
       const $xeForm = $xeSelect.$xeForm
 
       const { transfer } = props
@@ -296,7 +298,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
           return true
         }
       }

package/styles/components/form.scss

@@ -161,7 +161,7 @@
 .vxe-form-item--valid-error-tip {
   position: absolute;
   width: 100%;
-  font-size: 0.9em;
+  font-size: var(--vxe-ui-form-validate-error-font-size, var(--vxe-ui-form-current-font-size));
   line-height: 1em;
   color: var(--vxe-ui-form-validate-error-color);
   background-color: var(--vxe-ui-form-validate-error-background-color);
@@ -176,7 +176,7 @@
     pointer-events: auto;
   }
   .vxe-form-item--valid-error-theme-beautify {
-    padding: 0.15em 0.6em 0.2em 0.6em;
+    padding: var(--vxe-ui-form-validate-error-padding, 0.2em 0.6em);
     color: #fff;
     background-color: var(--vxe-ui-status-error-color);
     .vxe-form-item--valid-error-msg {

package/types/components/color-picker.d.ts

@@ -139,6 +139,53 @@ export interface VxeColorPickerMethods extends ColorPickerMethods { }
 export interface ColorPickerPrivateMethods { }
 export interface VxeColorPickerPrivateMethods extends ColorPickerPrivateMethods { }
 
+export interface ColorController {
+  /**
+   * 解析颜色
+   */
+  parseColor<T extends keyof VxeColorPickerDefines.ParseResultMap>(color: string, format?: T): VxeColorPickerDefines.ParseResultMap[T] | null
+  /**
+   * 判断颜色是否 RGB 格式
+   */
+  hasRgb(color: string): boolean
+  /**
+   * 判断颜色是否 HEX 格式
+   */
+  hasHex(color: string): boolean
+  /**
+   * 转成 RGB 格式
+   */
+  toRgb(color: string): VxeColorPickerDefines.RgbObj | null
+  /**
+   * 转成 RGB 字符串格式
+   */
+  toRgbString(color: string): string
+  /**
+   * 转成 HEX 格式
+   */
+  toHex(color: string): VxeColorPickerDefines.HexObj | null
+  /**
+   * 转成 HEX 字符串格式
+   */
+  toHexString(color: string): string
+  /**
+   * 转成 HSL 格式
+   */
+  toHsl(color: string): VxeColorPickerDefines.HslObj | null
+  /**
+   * 转成 HSV 格式
+   */
+  toHsv(color: string): VxeColorPickerDefines.HsvObj | null
+  /**
+   * 对颜色进行高亮
+   */
+  lighten(color: string, ratio: number): string
+  /**
+   * 对颜色进行加深
+   */
+  darken(color: string, ratio: number): string
+}
+
 export type VxeColorPickerEmits = [
   'model-value',
   'modelValue',
@@ -151,6 +198,52 @@ export namespace VxeColorPickerDefines {
   export interface ColorPickerEventParams extends VxeComponentEventParams {
     $colorPicker: VxeColorPickerConstructor
   }
+
+  export type ParseResultMap = {
+    '': VxeColorPickerDefines.RgbObj
+    'rgb': VxeColorPickerDefines.RgbObj
+    'rgba': VxeColorPickerDefines.RgbObj
+    'hex': VxeColorPickerDefines.HexObj
+    'hsl': VxeColorPickerDefines.HslObj
+    'hsv': VxeColorPickerDefines.HsvObj
+  }
+
+  export interface RgbObj {
+    type: 'rgba' | 'rgb'
+    value: string
+    label: string
+    r: number
+    g: number
+    b: number
+    a: number
+  }
+
+  export interface HexObj {
+    type: 'hex'
+    value: string
+    label: string
+    hex: string
+    hexV: string
+    hexA: string
+    a: number
+  }
+
+  export interface HslObj {
+    type: 'hsl'
+    value: string
+    h: number
+    s: number
+    l: number
+    a: number
+  }
+
+  export interface HsvObj {
+    type: 'hsv'
+    value: string
+    h: number
+    s: number
+    v: number
+  }
 }
 
 export type VxeColorPickerEventProps = {}

package/types/components/grid.d.ts

@@ -417,6 +417,12 @@ export interface GridMethods<D = any> {
     }
     pendingRecords: D[]
   } | null
+  /**
+   * 获取个性化设置分页数据
+   */
+  getCustomPagerData(): {
+    pSize?: number
+  },
   /**
    * 获取自定义的 params 属性
    */

package/types/components/table.d.ts

@@ -7089,8 +7089,8 @@ export namespace VxeTableDefines {
   export type CustomEventType = 'reset' | 'confirm' | 'update:width' | 'update:fixed' | 'update:sort' | 'update:visible' | 'update:align' | 'update:headerAlign' | 'update:footerAlign' | 'update:aggGroup' | 'update:aggFunc'
 
   export interface CustomStoreData {
-    pageData?: {
-      ps?: number
+    pagerData?: {
+      pSize?: number
     }
     alignData?: Record<string, VxeColumnPropTypes.Align>
     headerAlignData?: Record<string, VxeColumnPropTypes.HeaderAlign>

package/types/ui/index.d.ts

@@ -1,5 +1,6 @@
 import { VxeUI, getI18n, setConfig } from '@vxe-ui/core'
 import { LoadingController } from '../components/loading'
+import { ColorController } from '../components/color-picker'
 import { ModalController } from '../components/modal'
 import { DrawerController } from '../components/drawer'
 import { WatermarkController } from '../components/watermark'
@@ -44,6 +45,7 @@ export const readFile: VxeUploadDefines.ReadFileFunction
 declare module '@vxe-ui/core' {
   export interface VxeUIExport {
     loading: LoadingController
+    color: ColorController
     modal: ModalController
     drawer: DrawerController
     watermark: WatermarkController