vxe-pc-ui 3.6.39 → 3.6.41

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

@@ -13,6 +13,11 @@ import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types
 
 const WinEyeDropper = typeof window !== 'undefined' ? (window as any).EyeDropper : null
 
+const typeList = [
+  { label: 'HEX', value: 'hex' },
+  { label: 'RGB', value: 'rgb' }
+]
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeColorPicker',
   mixins: [
@@ -105,7 +110,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const xID = XEUtils.uniqueId()
     const reactData: ColorPickerReactData = {
       initialized: false,
+      selectTyle: 'hex',
       selectColor: '',
+      showTypePopup: false,
       panelColor: '',
       hexValue: '',
       rValue: 0,
@@ -218,9 +225,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     computeIsRgb () {
       const $xeColorPicker = this
+      const reactData = ($xeColorPicker as any).reactData
+
+      const { selectTyle } = reactData
+      return selectTyle === 'rgb'
+    },
+    computeSelectTypeItem () {
+      const $xeColorPicker = this
+      const reactData = ($xeColorPicker as any).reactData
 
-      const valueType = $xeColorPicker.computeValueType
-      return valueType === 'rgb'
+      const { selectTyle } = reactData
+      return typeList.find(item => item.value === selectTyle)
     }
   },
   methods: {
@@ -250,6 +265,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
       reactData.selectColor = XEUtils.toValueString(value)
       $xeColorPicker.updateModelColor()
     },
+    updateType () {
+      const $xeColorPicker = this
+      const props = $xeColorPicker
+      const reactData = $xeColorPicker.reactData
+
+      const { type } = props
+      let selectTyle: VxeColorPickerPropTypes.Type = 'hex'
+      if (type === 'rgb' || type === 'rgba') {
+        selectTyle = 'rgb'
+      }
+      reactData.selectTyle = selectTyle
+      $xeColorPicker.updateMode()
+    },
     updateModelColor () {
       const $xeColorPicker = this
       const reactData = $xeColorPicker.reactData
@@ -444,6 +472,30 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeColorPicker.togglePanelEvent(evnt)
       $xeColorPicker.dispatchEvent('click', {}, evnt)
     },
+    handlePanelClickEvent () {
+      const $xeColorPicker = this
+      const reactData = $xeColorPicker.reactData
+
+      reactData.showTypePopup = false
+    },
+    toggleTypeVisibleEvent (evnt: MouseEvent) {
+      const $xeColorPicker = this
+      const reactData = $xeColorPicker.reactData
+
+      evnt.stopPropagation()
+      reactData.showTypePopup = !reactData.showTypePopup
+    },
+    handleChangeType (type: VxeColorPickerPropTypes.Type) {
+      const $xeColorPicker = this
+      const reactData = $xeColorPicker.reactData
+
+      const { selectTyle } = reactData
+      if (type !== selectTyle) {
+        reactData.selectTyle = type
+        $xeColorPicker.updateModelColor()
+      }
+      reactData.showTypePopup = false
+    },
     handleHueColor (offsetLeft: number) {
       const $xeColorPicker = this
       const reactData = $xeColorPicker.reactData
@@ -755,9 +807,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeColorPicker.reactData
 
       const { showAlpha, clickToCopy, showEyeDropper } = props
-      const { hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData
-      const valueType = $xeColorPicker.computeValueType
+      const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData
       const isRgb = $xeColorPicker.computeIsRgb
+      const selectTypeItem = $xeColorPicker.computeSelectTypeItem
       return h('div', {
         class: 'vxe-color-picker--bar-wrapper'
       }, [
@@ -775,7 +827,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 }
               }, [
                 h('i', {
-                  class: getIcon().EYE_DROPPER
+                  class: getIcon().COLOR_PICKER_EYE_DROPPER
                 })
               ])
             ])
@@ -800,7 +852,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                       }
                     }, [
                       h('i', {
-                        class: getIcon().COLOR_COPY
+                        class: getIcon().COLOR_PICKER_COLOR_COPY
                       })
                     ])
                   ]
@@ -851,127 +903,165 @@ export default /* define-vxe-component start */ defineVxeComponent({
           ])
         ]),
         h('div', {
-          class: `vxe-color-picker--${valueType}-wrapper`
-        }, isRgb
-          ? [
-              h('div', {
-                class: 'vxe-color-picker--input-wrapper'
+          class: 'vxe-color-picker--custom-wrapper'
+        }, [
+          h('div', {
+            class: 'vxe-color-picker--type-switch'
+          }, [
+            h('div', {
+              class: 'vxe-color-picker--type-label',
+              on: {
+                click: $xeColorPicker.toggleTypeVisibleEvent
+              }
+            }, [
+              h('span', `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
+              h('span', {
+                class: 'vxe-color-picker--type-icon'
               }, [
-                h(VxeInputComponent, {
-                  props: {
-                    type: 'integer',
-                    size: 'mini',
-                    align: 'center',
-                    min: 0,
-                    max: 255,
-                    maxLength: 3,
-                    placeholder: '',
-                    value: rValue
-                  },
-                  on: {
-                    'modelValue' (val: any) {
-                      reactData.rValue = val
-                    },
-                    change: $xeColorPicker.handleInputRgbEvent
+                h('i', {
+                  class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
+                })
+              ])
+            ]),
+            h('div', {
+              class: ['vxe-color-picker--type-popup', {
+                'is--visible': showTypePopup
+              }]
+            }, typeList.map(item => {
+              return h('div', {
+                class: 'vxe-color-picker--type-item',
+                on: {
+                  click (evnt: KeyboardEvent) {
+                    evnt.stopPropagation()
+                    $xeColorPicker.handleChangeType(item.value as VxeColorPickerPropTypes.Type)
                   }
-                }),
-                h(VxeInputComponent, {
-                  props: {
-                    type: 'integer',
-                    size: 'mini',
-                    align: 'center',
-                    min: 0,
-                    max: 255,
-                    maxLength: 3,
-                    placeholder: '',
-                    value: gValue
-                  },
-                  on: {
-                    'modelValue' (val: any) {
-                      reactData.gValue = val
+                }
+              }, item.label)
+            }))
+          ]),
+          h('div', {
+            class: `vxe-color-picker--${selectTyle}-wrapper`
+          }, isRgb
+            ? [
+                h('div', {
+                  class: 'vxe-color-picker--input-wrapper'
+                }, [
+                  h(VxeInputComponent, {
+                    props: {
+                      type: 'integer',
+                      size: 'mini',
+                      align: 'center',
+                      min: 0,
+                      max: 255,
+                      maxLength: 3,
+                      placeholder: '',
+                      value: rValue
                     },
-                    change: $xeColorPicker.handleInputRgbEvent
-                  }
-                }),
-                h(VxeInputComponent, {
-                  props: {
-                    type: 'integer',
-                    size: 'mini',
-                    align: 'center',
-                    min: 0,
-                    max: 255,
-                    maxLength: 3,
-                    placeholder: '',
-                    value: bValue
-                  },
-                  on: {
-                    'modelValue' (val: any) {
-                      reactData.bValue = val
+                    on: {
+                      'modelValue' (val: any) {
+                        reactData.rValue = val
+                      },
+                      change: $xeColorPicker.handleInputRgbEvent
+                    }
+                  }),
+                  h(VxeInputComponent, {
+                    props: {
+                      type: 'integer',
+                      size: 'mini',
+                      align: 'center',
+                      min: 0,
+                      max: 255,
+                      maxLength: 3,
+                      placeholder: '',
+                      value: gValue
                     },
-                    change: $xeColorPicker.handleInputRgbEvent
-                  }
-                }),
-                h(VxeInputComponent, {
-                  props: {
-                    type: 'number',
-                    size: 'mini',
-                    align: 'center',
-                    min: 0,
-                    max: 1,
-                    step: 0.01,
-                    maxLength: 4,
-                    placeholder: '',
-                    value: aValue
-                  },
-                  on: {
-                    'modelValue' (val: any) {
-                      reactData.aValue = val
+                    on: {
+                      'modelValue' (val: any) {
+                        reactData.gValue = val
+                      },
+                      change: $xeColorPicker.handleInputRgbEvent
+                    }
+                  }),
+                  h(VxeInputComponent, {
+                    props: {
+                      type: 'integer',
+                      size: 'mini',
+                      align: 'center',
+                      min: 0,
+                      max: 255,
+                      maxLength: 3,
+                      placeholder: '',
+                      value: bValue
                     },
-                    change: $xeColorPicker.handleInputAlphaEvent
-                  }
-                })
-              ]),
-              h('div', {
-                class: 'vxe-color-picker--input-title'
-              }, [
-                h('span', 'R'),
-                h('span', 'G'),
-                h('span', 'B'),
-                h('span', 'A')
-              ])]
-          : [
-              h('div', {
-                class: 'vxe-color-picker--input-title'
-              }, 'HEX'),
-              h('div', {
-                class: 'vxe-color-picker--input-wrapper'
-              }, [
-                h(VxeInputComponent, {
-                  props: {
-                    type: 'text',
-                    size: 'mini',
-                    align: 'center',
-                    maxLength: 9,
-                    placeholder: '',
-                    value: hexValue
-                  },
-                  on: {
-                    'modelValue' (val: any) {
-                      reactData.hexValue = val
+                    on: {
+                      'modelValue' (val: any) {
+                        reactData.bValue = val
+                      },
+                      change: $xeColorPicker.handleInputRgbEvent
+                    }
+                  }),
+                  h(VxeInputComponent, {
+                    props: {
+                      type: 'number',
+                      size: 'mini',
+                      align: 'center',
+                      min: 0,
+                      max: 1,
+                      step: 0.01,
+                      maxLength: 4,
+                      placeholder: '',
+                      value: aValue
                     },
-                    change () {
-                      const colorRest = parseColor(reactData.hexValue)
-                      if (colorRest) {
-                        if (colorRest.value) {
-                          reactData.selectColor = colorRest.value
-                          $xeColorPicker.updateModelColor()
+                    on: {
+                      'modelValue' (val: any) {
+                        reactData.aValue = val
+                      },
+                      change: $xeColorPicker.handleInputAlphaEvent
+                    }
+                  })
+                ]),
+                h('div', {
+                  class: 'vxe-color-picker--input-title'
+                }, [
+                  h('span', 'R'),
+                  h('span', 'G'),
+                  h('span', 'B'),
+                  h('span', 'A')
+                ])]
+            : [
+                h('div', {
+                  class: 'vxe-color-picker--input-wrapper'
+                }, [
+                  h(VxeInputComponent, {
+                    props: {
+                      type: 'text',
+                      size: 'mini',
+                      align: 'center',
+                      maxLength: 9,
+                      placeholder: '',
+                      value: hexValue
+                    },
+                    on: {
+                      'modelValue' (val: any) {
+                        reactData.hexValue = val
+                      },
+                      change () {
+                        const colorRest = parseColor(reactData.hexValue)
+                        if (colorRest) {
+                          if (colorRest.value) {
+                            reactData.selectColor = colorRest.value
+                            $xeColorPicker.updateModelColor()
+                          }
                         }
                       }
                     }
-                  }
-                })
+                  })
+                ]),
+                h('div', {
+                  class: 'vxe-color-picker--input-title'
+                }, getI18n('vxe.colorPicker.hex'))
               ])
-            ])
+        ])
       ])
     },
     renderQuickWrapper (h: CreateElement) {
@@ -1074,7 +1164,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }, [
           initialized && (visiblePanel || isAniVisible)
             ? h('div', {
-              class: 'vxe-color-picker--panel-wrapper'
+              class: 'vxe-color-picker--panel-wrapper',
+              on: {
+                click: $xeColorPicker.handlePanelClickEvent
+              }
             }, [
               $xeColorPicker.renderColorWrapper(h),
               $xeColorPicker.renderColorBar(h),
@@ -1115,6 +1208,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeColorPicker = this
 
       $xeColorPicker.updateMode()
+    },
+    type () {
+      const $xeColorPicker = this
+
+      $xeColorPicker.updateType()
     }
   },
   created () {
@@ -1123,7 +1221,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const reactData = $xeColorPicker.reactData
 
     reactData.selectColor = `${props.value || ''}`
-    $xeColorPicker.updateMode()
+    $xeColorPicker.updateType()
 
     globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent)
     globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent)

package/packages/language/ar-EG.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'واضح',
       confirm: 'يتأكد',
-      copySuccess: 'نسخ إلى الحافظة: {0}'
+      copySuccess: 'نسخ إلى الحافظة: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'اسم النموذج',

package/packages/language/de-DE.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Klar',
       confirm: 'bestätigen',
-      copySuccess: 'Kopieren Sie in Zwischenablage: {0}'
+      copySuccess: 'Kopieren Sie in Zwischenablage: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Formname',

package/packages/language/en-US.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Clear',
       confirm: 'confirm',
-      copySuccess: 'Copyed to clipboard: {0}'
+      copySuccess: 'Copyed to clipboard: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Form name',

package/packages/language/es-ES.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Claro',
       confirm: 'confirmar',
-      copySuccess: 'Copiado al portapapeles: {0}'
+      copySuccess: 'Copiado al portapapeles: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Nombre del formulario',

package/packages/language/fr-FR.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Clair',
       confirm: 'confirmer',
-      copySuccess: 'Copie dans le presse-papiers: {0}'
+      copySuccess: 'Copie dans le presse-papiers: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Nom de formulaire',

package/packages/language/hu-HU.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Világos',
       confirm: 'megerősít',
-      copySuccess: 'Másolva a vágólapra: {0}'
+      copySuccess: 'Másolva a vágólapra: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Forma neve',

package/packages/language/hy-AM.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: '清除',
       confirm: '确认',
-      copySuccess: '已复制到剪贴板：{0}'
+      copySuccess: '已复制到剪贴板：{0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: '表单名称',

package/packages/language/id-ID.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Jernih',
       confirm: 'mengonfirmasi',
-      copySuccess: 'Disalin ke clipboard: {0}'
+      copySuccess: 'Disalin ke clipboard: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Nama bentuk',

package/packages/language/it-IT.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Chiaro',
       confirm: 'confermare',
-      copySuccess: 'Copiato sugli appunti: {0}'
+      copySuccess: 'Copiato sugli appunti: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Nome del modulo',

package/packages/language/ja-JP.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'クリア',
       confirm: '確認する',
-      copySuccess: 'クリップボードにコピー：{0}'
+      copySuccess: 'クリップボードにコピー：{0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'フォーム名',

package/packages/language/ko-KR.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: '분명한',
       confirm: '확인하다',
-      copySuccess: '클립 보드로 복사 : {0}'
+      copySuccess: '클립 보드로 복사 : {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: '양식 이름',

package/packages/language/ms-MY.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Jelas',
       confirm: 'mengesahkan',
-      copySuccess: 'Disalin ke papan klip: {0}'
+      copySuccess: 'Disalin ke papan klip: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Nama Bentuk',

package/packages/language/nb-NO.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Klar',
       confirm: 'bekrefte',
-      copySuccess: 'Kopiert til utklippstavlen: {0}'
+      copySuccess: 'Kopiert til utklippstavlen: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Formnavn',

package/packages/language/pt-BR.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Claro',
       confirm: 'confirmar',
-      copySuccess: 'Copiado para a área de transferência: {0}'
+      copySuccess: 'Copiado para a área de transferência: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Nome do formulário',

package/packages/language/ru-RU.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Прозрачный',
       confirm: 'подтверждать',
-      copySuccess: 'Копировано в буфер обмена: {0}'
+      copySuccess: 'Копировано в буфер обмена: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Название формы',

package/packages/language/th-TH.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'ชัดเจน',
       confirm: 'ยืนยัน',
-      copySuccess: 'คัดลอกไปยังคลิปบอร์ด: {0}'
+      copySuccess: 'คัดลอกไปยังคลิปบอร์ด: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'ชื่อแบบฟอร์ม',

package/packages/language/ug-CN.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: '清除',
       confirm: '确认',
-      copySuccess: '已复制到剪贴板：{0}'
+      copySuccess: '已复制到剪贴板：{0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'جەدۋەل ئىسمى',

package/packages/language/uk-UA.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Чіткий',
       confirm: 'підтверджувати',
-      copySuccess: 'Копіюється в буфер обміну: {0}'
+      copySuccess: 'Копіюється в буфер обміну: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Назва',

package/packages/language/uz-UZ.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Aniq',
       confirm: 'tasdiqlamoq',
-      copySuccess: "Clipboardga nusxa ko'chirish: {0}"
+      copySuccess: "Clipboardga nusxa ko'chirish: {0}",
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Forma nomi',

package/packages/language/vi-VN.ts

@@ -355,7 +355,8 @@ export default {
     colorPicker: {
       clear: 'Thông thoáng',
       confirm: 'xác nhận',
-      copySuccess: 'Được sao chép vào bảng tạm: {0}'
+      copySuccess: 'Được sao chép vào bảng tạm: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Tên hình thức',