vxe-pc-ui 4.2.13 → 4.2.14

package/lib/index.umd.js

@@ -4080,7 +4080,7 @@ function handleBooleanDefaultValue(value) {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.2.13"}`;
+const log_version = `ui v${"4.2.14"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
@@ -4088,7 +4088,7 @@ const errLog = log.create('error', log_version);
 
 
 
-const ui_version = "4.2.13";
+const ui_version = "4.2.14";
 core_VxeUI.version = ui_version;
 core_VxeUI.uiVersion = ui_version;
 core_VxeUI.tableVersion = '';
@@ -4331,7 +4331,10 @@ setConfig({
   select: {
     multiCharOverflow: 8
   },
-  slider: {},
+  slider: {
+    max: 100,
+    min: 0
+  },
   steps: {},
   switch: {},
   tabPane: {},
@@ -40958,18 +40961,91 @@ const Select = VxeSelect;
 
 /* harmony default export */ var slider = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
   name: 'VxeSlider',
-  props: {},
-  emits: [],
+  props: {
+    modelValue: [String, Number, Array],
+    vertical: Boolean,
+    max: {
+      type: [String, Number],
+      default: () => getConfig().slider.max
+    },
+    min: {
+      type: [String, Number],
+      default: () => getConfig().slider.min
+    },
+    step: {
+      type: [String, Number],
+      default: () => getConfig().slider.step
+    },
+    size: {
+      type: String,
+      default: () => getConfig().slider.size || getConfig().size
+    },
+    range: {
+      type: Boolean,
+      default: () => getConfig().slider.range
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    }
+  },
+  emits: ['update:modelValue', 'change'],
   setup(props, context) {
     const {
       emit
     } = context;
+    const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
+    const formItemInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('xeFormItemInfo', null);
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const {
+      computeSize
+    } = useSize(props);
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
+    const refBarElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refStartBtnElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refEndBtnElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
+      startValue: 0,
+      endValue: 0
+    });
     const refMaps = {
       refElem
     };
+    const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        readonly
+      } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
+    const computeMaxNum = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(props.max || 0);
+    });
+    const computeMinNum = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(props.min || 0);
+    });
     const computeMaps = {};
     const $xeSlider = {
       xID,
@@ -40979,6 +41055,9 @@ const Select = VxeSelect;
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
     const dispatchEvent = (type, params, evnt) => {
       emit(type, createEvent(evnt, {
         $slider: $xeSlider
@@ -40987,14 +41066,165 @@ const Select = VxeSelect;
     const collapsePaneMethods = {
       dispatchEvent
     };
+    const getStartPercent = startValue => {
+      const {
+        range
+      } = props;
+      const maxNum = computeMaxNum.value;
+      const minNum = computeMinNum.value;
+      return range ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor((startValue - minNum) / external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(maxNum - minNum) * 100) : 0;
+    };
+    const getEndPercent = (startValue, endValue) => {
+      const {
+        range
+      } = props;
+      const maxNum = computeMaxNum.value;
+      const minNum = computeMinNum.value;
+      return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor((endValue - (range ? startValue : 0) - minNum) / external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(maxNum - minNum) * 100);
+    };
+    const updateModel = () => {
+      const {
+        modelValue
+      } = props;
+      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue)) {
+        const [sVal, eVal] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().clone(modelValue, true).sort();
+        reactData.startValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sVal || 0));
+        reactData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(eVal || 0));
+      } else {
+        reactData.startValue = 0;
+        reactData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(modelValue || 0));
+      }
+    };
+    const updateBarStyle = () => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const trackElem = refTrackElem.value;
+      const startBtnElem = refStartBtnElem.value;
+      const endBtnElem = refEndBtnElem.value;
+      let startPercent = 0;
+      let endPercent = 0;
+      if (startValue > endValue) {
+        startPercent = getStartPercent(endValue);
+        endPercent = getEndPercent(endValue, startValue);
+      } else {
+        startPercent = getStartPercent(startValue);
+        endPercent = getEndPercent(startValue, endValue);
+      }
+      if (trackElem) {
+        trackElem.style.left = `${startPercent}%`;
+        trackElem.style.width = `${endPercent}%`;
+      }
+      if (startBtnElem) {
+        startBtnElem.style.left = `${startPercent}%`;
+      }
+      if (endBtnElem) {
+        endBtnElem.style.left = `${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(startPercent + endPercent)}%`;
+      }
+    };
+    const changeEvent = evnt => {
+      const {
+        range
+      } = props;
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const value = range ? [startValue, endValue].sort() : endValue;
+      emitModel(value);
+      dispatchEvent('change', {
+        value
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    };
+    const handleMousedownEvent = (evnt, isEnd) => {
+      const formReadonly = computeFormReadonly.value;
+      const isDisabled = computeIsDisabled.value;
+      const maxNum = computeMaxNum.value;
+      const minNum = computeMinNum.value;
+      if (!(formReadonly || isDisabled)) {
+        evnt.preventDefault();
+        const domMousemove = document.onmousemove;
+        const domMouseup = document.onmouseup;
+        document.onmousemove = evnt => {
+          evnt.preventDefault();
+          const barElem = refBarElem.value;
+          if (barElem) {
+            const barRect = barElem.getBoundingClientRect();
+            const trackWidth = (evnt.clientX - barRect.left) / 914;
+            if (isEnd) {
+              reactData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)));
+            } else {
+              reactData.startValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))));
+            }
+          }
+          updateBarStyle();
+        };
+        document.onmouseup = evnt => {
+          document.onmousemove = domMousemove;
+          document.onmouseup = domMouseup;
+          changeEvent(evnt);
+          updateBarStyle();
+        };
+      }
+    };
+    const handleStartMousedownEvent = evnt => {
+      const endBtnElem = refEndBtnElem.value;
+      const startBtnElem = evnt.currentTarget;
+      handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false);
+    };
+    const handleEndMousedownEvent = evnt => {
+      const startBtnElem = refStartBtnElem.value;
+      const endBtnElem = evnt.currentTarget;
+      handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true);
+    };
     const collapsePanePrivateMethods = {};
     Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
     const renderVN = () => {
+      const {
+        vertical,
+        range
+      } = props;
+      const vSize = computeSize.value;
+      const formReadonly = computeFormReadonly.value;
+      const isDisabled = computeIsDisabled.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: 'vxe-slider'
-      }, []);
+        class: ['vxe-slider', {
+          [`size--${vSize}`]: vSize,
+          'is--vertical': vertical,
+          'is--readonly': formReadonly,
+          'is--disabled': isDisabled
+        }]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-slider--inner'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refBarElem,
+        class: 'vxe-slider--bar-wrapper'
+      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackElem,
+        class: 'vxe-slider--bar-track'
+      }), formReadonly || !range ? renderEmptyElement($xeSlider) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refStartBtnElem,
+        class: 'vxe-slider--bar-btn vxe-slider--start-btn',
+        onMousedown: handleStartMousedownEvent
+      }), formReadonly ? renderEmptyElement($xeSlider) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refEndBtnElem,
+        class: 'vxe-slider--bar-btn vxe-slider--end-btn',
+        onMousedown: handleEndMousedownEvent
+      })])]);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
+      updateModel();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      updateBarStyle();
+    });
+    updateModel();
     $xeSlider.renderVN = renderVN;
     return $xeSlider;
   },