vxe-pc-ui 3.3.43 → 3.3.45

package/packages/number-input/src/number-input.ts

@@ -401,7 +401,7 @@ export default defineVxeComponent({
       const reactData = $xeNumberInput.reactData
 
       const inpImmediate = $xeNumberInput.computeInpImmediate
-      const value = inputValue === '' || XEUtils.eqNull(inputValue) ? null : XEUtils.toNumber(inputValue)
+      const value = inputValue === eqEmptyValue(inputValue) ? null : XEUtils.toNumber(inputValue)
       reactData.inputValue = inputValue
       if (inpImmediate) {
         $xeNumberInput.handleChange(value, inputValue, evnt)
@@ -428,6 +428,8 @@ export default defineVxeComponent({
       const $xeNumberInput = this
       const reactData = $xeNumberInput.reactData
 
+      const { inputValue } = reactData
+      reactData.inputValue = eqEmptyValue(inputValue) ? '' : `${XEUtils.toNumber(inputValue)}`
       reactData.isFocus = true
       reactData.isActivated = true
       $xeNumberInput.triggerEvent(evnt)

package/packages/slider/src/slider.ts

@@ -216,8 +216,6 @@ export default defineVxeComponent({
       const minNum = $xeSlider.computeMinNum
       if (!(formReadonly || isDisabled)) {
         evnt.preventDefault()
-        const domMousemove = document.onmousemove
-        const domMouseup = document.onmouseup
         document.onmousemove = evnt => {
           evnt.preventDefault()
           const barElem = $xeSlider.$refs.refBarElem as HTMLDivElement
@@ -233,8 +231,8 @@ export default defineVxeComponent({
           $xeSlider.updateBarStyle()
         }
         document.onmouseup = (evnt: MouseEvent) => {
-          document.onmousemove = domMousemove
-          document.onmouseup = domMouseup
+          document.onmousemove = null
+          document.onmouseup = null
           $xeSlider.changeEvent(evnt)
           $xeSlider.updateBarStyle()
         }

package/packages/ui/index.ts

@@ -79,7 +79,14 @@ setConfig({
   },
   collapsePane: {},
   countdown: {},
-  colorPicker: {},
+  colorPicker: {
+    type: 'hex',
+    clearable: true,
+    showAlpha: true,
+    clickToCopy: true,
+    showColorExtractor: true,
+    showQuick: true
+  },
   datePicker: {
     // size: null,
     // transfer: false
@@ -535,7 +542,10 @@ setIcon({
 
   // rate
   RATE_CHECKED: iconPrefix + 'star-fill',
-  RATE_UNCHECKED: iconPrefix + 'star'
+  RATE_UNCHECKED: iconPrefix + 'star',
+
+  // color-picker
+  COLOR_COPY: iconPrefix + 'copy'
 })
 
 export * from '@vxe-ui/core'

package/styles/components/button.scss

@@ -271,7 +271,7 @@ $btnThemeList: (
   &+.vxe-button-wrapper,
   &+.vxe-button.type--button,
   &+.vxe-button--dropdown {
-    margin-left: 12px;
+    margin-left: 0.72em;
   }
 }
 .vxe-button--loading-icon,

package/styles/components/color-picker.scss

@@ -0,0 +1,365 @@
+@use '../helpers/baseMixin.scss';
+
+.vxe-color-picker {
+  &.is--selected {
+    .vxe-color-picker--inner-color {
+      color: #fff;
+    }
+  }
+  &.is--active {
+    border-color: var(--vxe-ui-font-primary-color);
+  }
+}
+.vxe-color-picker,
+.vxe-color-picker--readonly {
+  position: relative;
+  display: inline-block;
+  width: 2.4em;
+  padding: 0.25em;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-color-picker--inner,
+.vxe-color-picker--preview-btn,
+.vxe-color-picker--bar-alpha-slider {
+  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
+}
+
+.vxe-color-picker--inner,
+.vxe-color-picker--readonly-color {
+  width: 100%;
+  height: 100%;
+  background-size: 1em 1em;
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-color-picker--readonly-color {
+  border: 1px solid var(--vxe-ui-input-border-color);
+}
+
+.vxe-color-picker--inner {
+  cursor: pointer;
+}
+.vxe-color-picker--input {
+  position: absolute;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  outline: 0;
+  border: 0;
+}
+.vxe-color-picker--inner-color {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-color-picker--panel-wrapper {
+  position: relative;
+  width: 23.4em;
+  border-radius: var(--vxe-ui-base-border-radius);
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-color-picker--panel {
+  display: none;
+  position: absolute;
+  left: 0;
+  padding: 4px 0;
+  color: var(--vxe-ui-font-color);
+  text-align: left;
+  &:not(.is--transfer) {
+    min-width: 100%;
+  }
+  &.is--transfer {
+    position: fixed;
+  }
+  &.ani--leave {
+    display: block;
+    opacity: 0;
+    transform: scaleY(0.5);
+    transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
+    transform-origin: center top;
+    backface-visibility: hidden;
+    &[placement="top"] {
+      transform-origin: center bottom;
+    }
+  }
+  &.ani--enter {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+.vxe-color-picker--color-wrapper {
+  position: relative;
+  height: 130px;
+  overflow: hidden;
+}
+.vxe-color-picker--white-bg,
+.vxe-color-picker--black-bg,
+.vxe-color-picker--color-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.vxe-color-picker--white-bg {
+  background: linear-gradient(to right,#fff,#fff0);
+}
+.vxe-color-picker--black-bg {
+  background: linear-gradient(to top, #000, #fff0);
+}
+.vxe-color-picker--color-active {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 50%;
+  border: 1px solid #ffffff;
+  background-color: transparent;
+  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
+  transform: translate(-0.4em, -0.4em);
+}
+
+.vxe-color-picker--quick-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 9.2em;
+}
+.vxe-color-picker--quick-item {
+  width: 1.5em;
+  height: 1.5em;
+  margin: 0.4em;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  cursor: pointer;
+  @include baseMixin.createAnimationTransition(transform, 0.1s);
+  &:hover {
+    transform: scale(1.2);
+    border-color: var(--vxe-ui-font-primary-lighten-color);
+  }
+  &:active {
+    transform: scale(0.8);
+  }
+}
+
+.vxe-color-picker--bar-wrapper {
+  margin-top: 0.4em;
+}
+
+.vxe-color-picker--slider-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+.vxe-color-picker--slider-preview {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  padding-left: 0.5em;
+}
+.vxe-color-picker--preview-btn,
+.vxe-color-picker--preview-color {
+  width: 2.2em;
+  height: 2.2em;
+  border-radius: 50%;
+}
+.vxe-color-picker--preview-btn {
+  background-size: 0.8em 0.8em ;
+}
+.vxe-color-picker--preview-color {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  &:hover {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.3);
+      z-index: 0;
+    }
+    .vxe-color-picker--preview-copy-btn {
+      display: block;
+      z-index: 1;
+    }
+  }
+  &:active {
+    .vxe-color-picker--preview-copy-btn {
+      font-size: 0.8em;
+    }
+  }
+}
+.vxe-color-picker--preview-copy-btn {
+  display: none;
+  color: #ffffff;
+  cursor: pointer;
+}
+.vxe-color-picker--slider-handle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  padding: 0 0.6em;
+}
+.vxe-color-picker--bar-hue-slider,
+.vxe-color-picker--bar-alpha-slider {
+  position: relative;
+  height: 1em;
+  width: 100%;
+  margin: 0.4em 0;
+  cursor: pointer;
+}
+.vxe-color-picker--bar-hue-slider,
+.vxe-color-picker--bar-alpha-slider,
+.vxe-color-picker--bar-alpha-bg {
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-color-picker--bar-hue-slider {
+  background: linear-gradient(to left,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);
+}
+.vxe-color-picker--bar-hue-btn,
+.vxe-color-picker--bar-alpha-btn {
+  position: absolute;
+  left: 0;
+  top: -4px;
+  width: 0.6em;
+  height: calc(100% + 8px);
+  border-radius: 0.2em;
+  background-color: #fff;
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+  transform: translateX(-0.3em);
+  cursor: grab;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
+  @include baseMixin.createAnimationTransition(transform, 0.1s);
+  &:hover {
+    transform: translateX(-0.3em) scale(1.1);
+  }
+  &:active {
+    transform: translateX(-0.3em) scale(1.2);
+    cursor: grabbing;
+  }
+}
+.vxe-color-picker--bar-alpha-slider {
+  background-size: 1em 1em;
+  .vxe-color-picker--bar-alpha-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.vxe-color-picker--hex-wrapper,
+.vxe-color-picker--rgb-wrapper {
+  text-align: center;
+  margin-top: 0.4em;
+}
+
+.vxe-color-picker--hex-wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 0 1.8em;
+  .vxe-color-picker--input-wrapper{
+    & > .vxe-input {
+      width: 12em;
+    }
+  }
+  .vxe-color-picker--input-title {
+    padding: 0 0.6em;
+  }
+}
+
+.vxe-color-picker--input-title {
+  color: var(--vxe-ui-input-placeholder-color);
+}
+
+.vxe-color-picker--rgb-wrapper {
+  .vxe-color-picker--input-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    & > .vxe-input {
+      width: 5.4em;
+      margin: 0 0.4em;
+    }
+  }
+  .vxe-color-picker--input-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.4em;
+    & > span {
+      display: block;
+      width: 50px;
+      margin: 0 0.4em;
+    }
+  }
+}
+
+.vxe-color-picker--footer-wrapper {
+  text-align: right;
+  margin-top: 0.4em;
+  padding: 0 0.4em 0.4em 0.4em;
+}
+
+.vxe-color-picker,
+.vxe-color-picker--readonly {
+  height: var(--vxe-ui-input-height-default);
+  line-height: var(--vxe-ui-input-height-default);
+  &.size--medium {
+    height: var(--vxe-ui-input-height-medium);
+    line-height: var(--vxe-ui-input-height-medium);
+  }
+  &.size--small {
+    height: var(--vxe-ui-input-height-small);
+    line-height: var(--vxe-ui-input-height-small);
+  }
+  &.size--mini {
+    height: var(--vxe-ui-input-height-mini);
+    line-height: var(--vxe-ui-input-height-mini);
+  }
+}
+
+.vxe-color-picker,
+.vxe-color-picker--readonly,
+.vxe-color-picker--panel {
+  font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+  }
+}

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

@@ -18,11 +18,20 @@ export interface VxeColorPickerPrivateRef extends ColorPickerPrivateRef { }
 export namespace VxeColorPickerPropTypes {
   export type ModelValue = string
   export type Size = VxeComponentSizeType
+  export type Type = 'rgb' | 'rgba' | 'hex'
   export type ClassName = string | ((params: { $colorPicker: VxeColorPickerConstructor }) => string)
   export type PopupClassName = string | ((params: {$colorPicker: VxeColorPickerConstructor }) => string)
+  export type Colors = string[] | {
+    label?: string
+    value: string
+  }[]
+  export type ShowAlpha = boolean
+  export type ShowColorExtractor = boolean
+  export type ShowQuick = boolean
   export type Readonly = boolean
   export type Disabled = boolean
   export type Placeholder = string
+  export type ClickToCopy = boolean
   export type Clearable = boolean
   export type Placement = 'top' | 'bottom' | '' | null
   export type Transfer = boolean
@@ -34,11 +43,17 @@ export interface VxeColorPickerProps {
    */
   modelValue?: VxeColorPickerPropTypes.ModelValue
   size?: VxeColorPickerPropTypes.Size
+  type?: VxeColorPickerPropTypes.Type
   className?: VxeColorPickerPropTypes.ClassName
   popupClassName?: VxeColorPickerPropTypes.PopupClassName
+  colors?: VxeColorPickerPropTypes.Colors
+  showAlpha?: VxeColorPickerPropTypes.ShowAlpha
+  showColorExtractor?: VxeColorPickerPropTypes.ShowColorExtractor
+  showQuick?: VxeColorPickerPropTypes.ShowQuick
   readonly?: VxeColorPickerPropTypes.Readonly
   disabled?: VxeColorPickerPropTypes.Disabled
   placeholder?: VxeColorPickerPropTypes.Placeholder
+  clickToCopy?: VxeColorPickerPropTypes.ClickToCopy
   clearable?: VxeColorPickerPropTypes.Clearable
   placement?: VxeColorPickerPropTypes.Placement
   transfer?: VxeColorPickerPropTypes.Transfer
@@ -51,6 +66,12 @@ export interface VxeColorPickerPrivateComputed extends ColorPickerPrivateCompute
 export interface ColorPickerReactData {
   initialized: boolean
   selectColor: string
+  panelColor: string
+  hexValue: string
+  rValue: number
+  gValue: number
+  bValue: number
+  aValue: number
   panelIndex: number
   panelStyle: VxeComponentStyleType
   panelPlacement: any

package/types/components/table.d.ts

@@ -1486,13 +1486,15 @@ export namespace VxeTablePropTypes {
       row: DT
       column: VxeTableDefines.ColumnInfo<DT>
       cellValue: any
+      findValue: string
+      replaceValue: string
     }) => void
     /**
      * 自定义单元格替换之前的方法，可以通过返回 false 阻止替换行为
      */
     beforeReplaceMethod?:(params: {
       isAll: boolean
-      findValue: string | null
+      findValue: string
       replaceValue: string
       $table: VxeTableConstructor<DT> & VxeTablePrivateMethods<DT>
       $grid: VxeGridConstructor<DT> | null | undefined
@@ -1502,7 +1504,7 @@ export namespace VxeTablePropTypes {
      */
     afterReplaceMethod?:(params: {
       isAll: boolean
-      findValue: string | null
+      findValue: string
       replaceValue: string
       result: VxeTableProDefines.FindAndReplaceResult[]
       $table: VxeTableConstructor<DT> & VxeTablePrivateMethods<DT>

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

@@ -234,5 +234,8 @@ declare module '@vxe-ui/core' {
     // rate
     RATE_CHECKED?: string
     RATE_UNCHECKED?: string
+
+    // color-picker
+    COLOR_COPY?: string
   }
 }