vxe-pc-ui 3.6.39 → 3.6.41

package/lib/index.umd.js

@@ -12615,7 +12615,8 @@ setTheme();
     colorPicker: {
       clear: '清除',
       confirm: '确认',
-      copySuccess: '已复制到剪贴板：{0}'
+      copySuccess: '已复制到剪贴板：{0}',
+      hex: '十六进制'
     },
     formDesign: {
       formName: '表单名称',
@@ -13061,14 +13062,14 @@ var defineVxeComponent = function defineVxeComponent(options) {
 };
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-var log_version = "ui v".concat("3.6.39");
+var log_version = "ui v".concat("3.6.41");
 var warnLog = log.create('warn', log_version);
 var errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-var ui_version = "3.6.39";
+var ui_version = "3.6.41";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -13470,7 +13471,6 @@ setIcon({
   // icon-picker
   ICON_PICKER_OPEN: iconPrefix + 'caret-down rotate180',
   ICON_PICKER_CLOSE: iconPrefix + 'caret-down',
-  RADIO_DISABLED_UNCHECKED: iconPrefix + 'radio-unchecked-fill',
   // pager
   PAGER_HOME: iconPrefix + 'home-page',
   PAGER_END: iconPrefix + 'end-page',
@@ -13482,6 +13482,7 @@ setIcon({
   // radio
   RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
   RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
+  RADIO_DISABLED_UNCHECKED: iconPrefix + 'radio-unchecked-fill',
   // checkbox
   CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate-fill',
   CHECKBOX_CHECKED: iconPrefix + 'checkbox-checked-fill',
@@ -13622,8 +13623,10 @@ setIcon({
   RATE_CHECKED: iconPrefix + 'star-fill',
   RATE_UNCHECKED: iconPrefix + 'star',
   // color-picker
-  COLOR_COPY: iconPrefix + 'copy',
-  EYE_DROPPER: iconPrefix + 'dropper',
+  COLOR_PICKER_COLOR_COPY: iconPrefix + 'copy',
+  COLOR_PICKER_EYE_DROPPER: iconPrefix + 'dropper',
+  COLOR_PICKER_TPTY_OPEN: iconPrefix + 'arrow-down rotate180',
+  COLOR_PICKER_TPTY_CLOSE: iconPrefix + 'arrow-down',
   // split
   SPLIT_TOP_ACTION: iconPrefix + 'arrow-up',
   SPLIT_BOTTOM_ACTION: iconPrefix + 'arrow-down',
@@ -23489,7 +23492,16 @@ function toFloatValueFixed(inputValue, digitsValue) {
 
 
 
+
+
 var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
+var typeList = [{
+  label: 'HEX',
+  value: 'hex'
+}, {
+  label: 'RGB',
+  value: 'rgb'
+}];
 /* harmony default export */ var color_picker = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeColorPicker',
   mixins: [globalMixins.sizeMixin],
@@ -23598,7 +23610,9 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
     var xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     var reactData = {
       initialized: false,
+      selectTyle: 'hex',
       selectColor: '',
+      showTypePopup: false,
       panelColor: '',
       hexValue: '',
       rValue: 0,
@@ -23698,8 +23712,17 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
     },
     computeIsRgb: function computeIsRgb() {
       var $xeColorPicker = this;
-      var valueType = $xeColorPicker.computeValueType;
-      return valueType === 'rgb';
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle;
+      return selectTyle === 'rgb';
+    },
+    computeSelectTypeItem: function computeSelectTypeItem() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle;
+      return typeList.find(function (item) {
+        return item.value === selectTyle;
+      });
     }
   }),
   methods: {
@@ -23729,6 +23752,18 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
       reactData.selectColor = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(value);
       $xeColorPicker.updateModelColor();
     },
+    updateType: function updateType() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var type = props.type;
+      var selectTyle = 'hex';
+      if (type === 'rgb' || type === 'rgba') {
+        selectTyle = 'rgb';
+      }
+      reactData.selectTyle = selectTyle;
+      $xeColorPicker.updateMode();
+    },
     updateModelColor: function updateModelColor() {
       var $xeColorPicker = this;
       var reactData = $xeColorPicker.reactData;
@@ -23915,6 +23950,27 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
       $xeColorPicker.togglePanelEvent(evnt);
       $xeColorPicker.dispatchEvent('click', {}, evnt);
     },
+    handlePanelClickEvent: function handlePanelClickEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      reactData.showTypePopup = false;
+    },
+    toggleTypeVisibleEvent: function toggleTypeVisibleEvent(evnt) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      evnt.stopPropagation();
+      reactData.showTypePopup = !reactData.showTypePopup;
+    },
+    handleChangeType: function handleChangeType(type) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle;
+      if (type !== selectTyle) {
+        reactData.selectTyle = type;
+        $xeColorPicker.updateModelColor();
+      }
+      reactData.showTypePopup = false;
+    },
     handleHueColor: function handleHueColor(offsetLeft) {
       var $xeColorPicker = this;
       var reactData = $xeColorPicker.reactData;
@@ -24206,15 +24262,17 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
       var showAlpha = props.showAlpha,
         clickToCopy = props.clickToCopy,
         showEyeDropper = props.showEyeDropper;
-      var hexValue = reactData.hexValue,
+      var selectTyle = reactData.selectTyle,
+        showTypePopup = reactData.showTypePopup,
+        hexValue = reactData.hexValue,
         rValue = reactData.rValue,
         gValue = reactData.gValue,
         bValue = reactData.bValue,
         aValue = reactData.aValue,
         selectColor = reactData.selectColor,
         panelColor = reactData.panelColor;
-      var valueType = $xeColorPicker.computeValueType;
       var isRgb = $xeColorPicker.computeIsRgb;
+      var selectTypeItem = $xeColorPicker.computeSelectTypeItem;
       return h('div', {
         class: 'vxe-color-picker--bar-wrapper'
       }, [h('div', {
@@ -24227,7 +24285,7 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
           click: $xeColorPicker.handleEyeDropperEvent
         }
       }, [h('i', {
-        class: getIcon().EYE_DROPPER
+        class: getIcon().COLOR_PICKER_EYE_DROPPER
       })])]) : renderEmptyElement($xeColorPicker), h('div', {
         class: 'vxe-color-picker--slider-preview'
       }, [h('div', {
@@ -24243,7 +24301,7 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
           click: $xeColorPicker.handleCopyColorEvent
         }
       }, [h('i', {
-        class: getIcon().COLOR_COPY
+        class: getIcon().COLOR_PICKER_COLOR_COPY
       })])] : [])])]), h('div', {
         class: 'vxe-color-picker--slider-handle'
       }, [h('div', {
@@ -24276,7 +24334,34 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
           mousedown: $xeColorPicker.handleAlphaSliderMousedownEvent
         }
       })]) : renderEmptyElement($xeColorPicker)])]), h('div', {
-        class: "vxe-color-picker--".concat(valueType, "-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', "".concat(selectTypeItem ? selectTypeItem.label : selectTyle)), h('span', {
+        class: 'vxe-color-picker--type-icon'
+      }, [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(function (item) {
+        return h('div', {
+          class: 'vxe-color-picker--type-item',
+          on: {
+            click: function click(evnt) {
+              evnt.stopPropagation();
+              $xeColorPicker.handleChangeType(item.value);
+            }
+          }
+        }, item.label);
+      }))]), h('div', {
+        class: "vxe-color-picker--".concat(selectTyle, "-wrapper")
       }, isRgb ? [h('div', {
         class: 'vxe-color-picker--input-wrapper'
       }, [h(input, {
@@ -24351,8 +24436,6 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
       })]), 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(input, {
         props: {
@@ -24377,7 +24460,9 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
             }
           }
         }
-      })])])]);
+      })]), h('div', {
+        class: 'vxe-color-picker--input-title'
+      }, getI18n('vxe.colorPicker.hex'))])])]);
     },
     renderQuickWrapper: function renderQuickWrapper(h) {
       var $xeColorPicker = this;
@@ -24466,7 +24551,10 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
         },
         style: reactData.panelStyle
       }, [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), $xeColorPicker.renderQuickWrapper(h), h('div', {
         class: 'vxe-color-picker--footer-wrapper'
       }, [clearable ? h(src_button, {
@@ -24493,6 +24581,10 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
     value: function value() {
       var $xeColorPicker = this;
       $xeColorPicker.updateMode();
+    },
+    type: function type() {
+      var $xeColorPicker = this;
+      $xeColorPicker.updateType();
     }
   },
   created: function created() {
@@ -24500,7 +24592,7 @@ var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
     var props = $xeColorPicker;
     var reactData = $xeColorPicker.reactData;
     reactData.selectColor = "".concat(props.value || '');
-    $xeColorPicker.updateMode();
+    $xeColorPicker.updateType();
     globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent);
     globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent);
     globalEvents.on($xeColorPicker, 'blur', $xeColorPicker.handleGlobalBlurEvent);