@king-design/vue 2.1.3 → 2.1.4

package/components/slider/index.vdt.js

@@ -7,72 +7,63 @@ import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
-
   var _this$get = this.get(),
-      disabled = _this$get.disabled,
-      className = _this$get.className,
-      max = _this$get.max,
-      min = _this$get.min,
-      unit = _this$get.unit,
-      showInput = _this$get.showInput,
-      range = _this$get.range,
-      step = _this$get.step,
-      value = _this$get.value,
-      spinnerProps = _this$get.spinnerProps,
-      showEnd = _this$get.showEnd,
-      showTooltip = _this$get.showTooltip,
-      animate = _this$get.animate,
-      forceStep = _this$get.forceStep;
-
+    disabled = _this$get.disabled,
+    className = _this$get.className,
+    max = _this$get.max,
+    min = _this$get.min,
+    unit = _this$get.unit,
+    showInput = _this$get.showInput,
+    range = _this$get.range,
+    step = _this$get.step,
+    value = _this$get.value,
+    spinnerProps = _this$get.spinnerProps,
+    showEnd = _this$get.showEnd,
+    showTooltip = _this$get.showTooltip,
+    animate = _this$get.animate,
+    forceStep = _this$get.forceStep;
   var _this$draggable = this.draggable,
-      onStart = _this$draggable.onStart,
-      trackRef = _this$draggable.trackRef,
-      dragging = _this$draggable.dragging,
-      firstThumbRef = _this$draggable.firstThumbRef,
-      secondThumbRef = _this$draggable.secondThumbRef,
-      onFocusin = _this$draggable.onFocusin;
+    onStart = _this$draggable.onStart,
+    trackRef = _this$draggable.trackRef,
+    dragging = _this$draggable.dragging,
+    firstThumbRef = _this$draggable.firstThumbRef,
+    secondThumbRef = _this$draggable.secondThumbRef,
+    onFocusin = _this$draggable.onFocusin;
   var classNameObj = (_classNameObj = {
     'k-slider': true,
     'k-disabled': disabled,
     'k-dragging': dragging.value || !animate
   }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
-
   var _this$styles = this.styles(),
-      barStyle = _this$styles.barStyle,
-      thumbFirstStyle = _this$styles.thumbFirstStyle,
-      thumbSecondStyle = _this$styles.thumbSecondStyle;
-
+    barStyle = _this$styles.barStyle,
+    thumbFirstStyle = _this$styles.thumbFirstStyle,
+    thumbSecondStyle = _this$styles.thumbSecondStyle;
   var onSpinnerChange = this.value.onSpinnerChange;
   var _this$keyboard = this.keyboard,
-      onKeydown = _this$keyboard.onKeydown,
-      onKeyup = _this$keyboard.onKeyup;
+    onKeydown = _this$keyboard.onKeydown,
+    onKeyup = _this$keyboard.onKeyup;
   var _this$tooltip = this.tooltip,
-      firstTooltipRef = _this$tooltip.firstTooltipRef,
-      secondTooltipRef = _this$tooltip.secondTooltipRef,
-      getTooltipProps = _this$tooltip.getTooltipProps,
-      hide = _this$tooltip.hide;
+    firstTooltipRef = _this$tooltip.firstTooltipRef,
+    secondTooltipRef = _this$tooltip.secondTooltipRef,
+    getTooltipProps = _this$tooltip.getTooltipProps,
+    hide = _this$tooltip.hide;
   var tooltipProps = getTooltipProps();
-
   var tooltip = function tooltip(value) {
     return _$blocks['tooltip'] = function ($super) {
       return value;
     }, __$blocks['tooltip'] = function ($super, data) {
       var block = $blocks['tooltip'];
-
       var callBlock = function callBlock() {
         return _$blocks['tooltip'].call($this, $super, data);
       };
-
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['tooltip'](_$no, value);
   };
-
   var createThumb = function createThumb(thumbStyle, isFirst, ref, value, tooltipRef) {
     return _$ce(2, 'div', _$cc(Tooltip, _extends({
       'disabled': !showTooltip,
@@ -89,17 +80,14 @@ export default function ($props, $blocks, $__proto__) {
       }, null, ref),
       '$blocks': function ($blocks) {
         var _$blocks = {},
-            __$blocks = _$ex({}, $blocks);
-
+          __$blocks = _$ex({}, $blocks);
         return (_$blocks['content'] = function ($super) {
           return tooltip(value);
         }, __$blocks['content'] = function ($super, data) {
           var block = $blocks['content'];
-
           var callBlock = function callBlock() {
             return _$blocks['content'].call($this, $super, data);
           };
-
           return block ? block.call($this, callBlock, data) : callBlock();
         }), __$blocks;
       }.call($this, _$em)
@@ -107,10 +95,9 @@ export default function ($props, $blocks, $__proto__) {
       'style': thumbStyle
     });
   };
-
   var _this$click = this.click,
-      onClickTrack = _this$click.onClickTrack,
-      setOneValue = _this$click.setOneValue;
+    onClickTrack = _this$click.onClickTrack,
+    setOneValue = _this$click.setOneValue;
   var points = this.points();
   var marks = this.marks();
   return _$cv('div', _extends({

package/components/slider/styles.js

@@ -6,23 +6,18 @@ var defaults = {
   get transition() {
     return theme.transition.middle;
   },
-
   height: '4px',
   bgColor: '#e5e5e5',
-
   get barColor() {
     return theme.color.primary;
   },
-
   borderRadius: '2px',
   thumb: {
     height: '12px',
     width: '12px',
-
     get border() {
       return "2px solid " + slider.barColor;
     },
-
     borderRadius: '50%',
     bgColor: '#fff',
     hoverTransform: 'scale(1.5)',
@@ -34,40 +29,31 @@ var defaults = {
     get color() {
       return theme.color.disabled;
     },
-
     get bgColor() {
       return theme.color.disabledBg;
     }
-
   },
   // spinnerWidth: '124px',
   spinnerGap: '16px',
   point: {
     width: '8px',
-
     get height() {
       return slider.point.width;
     },
-
     bgColor: '#fff',
     borderRadius: '50%',
-
     get border() {
       return "2px solid " + slider.bgColor;
     },
-
     get activeBorderColor() {
       return slider.barColor;
     }
-
   },
   marks: {
     height: '26px',
-
     get activeColor() {
       return theme.color.primary;
     }
-
   }
 };
 var slider;

package/components/slider/useClick.js

@@ -1,42 +1,33 @@
 import { useInstance } from 'intact-vue-next';
 export function useClick(getSlidingValue, fixValue, showValue, setValue) {
   var instance = useInstance();
-
   function onClickTrack(e) {
     if (instance.get('disabled')) return;
     var newValue = getSlidingValue(e.clientX);
-
     if (instance.get('range')) {
       newValue = generateRangeValue(newValue);
     }
-
     fixValue(newValue, true);
   }
-
   function generateRangeValue(v) {
     var _instance$get = instance.get('value'),
-        min = _instance$get[0],
-        max = _instance$get[1];
-
+      min = _instance$get[0],
+      max = _instance$get[1];
     if (Math.abs(min - v) <= Math.abs(max - v)) {
       return [v, max];
     } else {
       return [min, v];
     }
   }
-
   function setOneValue(v) {
     if (instance.get('disabled')) return;
     var newValue = v;
-
     if (instance.get('range')) {
       newValue = generateRangeValue(v);
     }
-
     showValue.set(newValue);
     setValue(newValue);
   }
-
   return {
     onClickTrack: onClickTrack,
     setOneValue: setOneValue

package/components/slider/useDraggable.js

@@ -7,42 +7,36 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
   var secondThumbRef = createRef();
   var _isFirst2 = true;
   var oldValue;
-
   var _useBaseDraggable = useBaseDraggable({
-    onMove: function onMove(e) {
-      var tempValue = getNewValue(getSlidingValue(e.clientX));
-      fixValue(tempValue, false);
-      showTooltip();
-    },
-    onEnd: function onEnd() {
-      if (instance.$unmounted) return;
-      (_isFirst2 ? firstThumbRef.value : secondThumbRef.value).blur();
-      showValue.set(instance.get('value'));
-      triggerChangeEvent(oldValue);
-    }
-  }),
-      start = _useBaseDraggable.start,
-      dragging = _useBaseDraggable.dragging;
-
+      onMove: function onMove(e) {
+        var tempValue = getNewValue(getSlidingValue(e.clientX));
+        fixValue(tempValue, false);
+        showTooltip();
+      },
+      onEnd: function onEnd() {
+        if (instance.$unmounted) return;
+        (_isFirst2 ? firstThumbRef.value : secondThumbRef.value).blur();
+        showValue.set(instance.get('value'));
+        triggerChangeEvent(oldValue);
+      }
+    }),
+    start = _useBaseDraggable.start,
+    dragging = _useBaseDraggable.dragging;
   function onStart(e) {
-    if (instance.get('disabled')) return; // remain the old value to detect whether it changed to trigger change event
-
-    oldValue = instance.get('value'); // use Focusin to set the flag, because it will be used on operating by keyboard
+    if (instance.get('disabled')) return;
+    // remain the old value to detect whether it changed to trigger change event
+    oldValue = instance.get('value');
+    // use Focusin to set the flag, because it will be used on operating by keyboard
     // isFirst = _isFirst;
-
     start(e);
   }
-
   function getSlidingValue(pos) {
     var rect = trackRef.value.getBoundingClientRect();
     var percent = (pos - rect.left) / rect.width;
-
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min;
-
+      max = _instance$get.max,
+      min = _instance$get.min;
     var sliderWidth = max - min;
-
     if (percent <= 0) {
       return min;
     } else if (percent >= 1) {
@@ -51,16 +45,13 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
       return min + sliderWidth * percent;
     }
   }
-
   function getNewValue(value) {
     var _instance$get2 = instance.get(),
-        range = _instance$get2.range,
-        oldValue = _instance$get2.value;
-
+      range = _instance$get2.range,
+      oldValue = _instance$get2.value;
     if (!range) return value;
     var min = oldValue[0],
-        max = oldValue[1];
-
+      max = oldValue[1];
     if (_isFirst2) {
       if (value > max) {
         // exchange the thumb
@@ -83,12 +74,10 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
       }
     }
   }
-
   function onFocusin(_isFirst) {
     _isFirst2 = _isFirst;
     showTooltip();
   }
-
   return {
     onStart: onStart,
     dragging: dragging,

package/components/slider/useKeyboard.js

@@ -2,54 +2,43 @@ import { useInstance } from 'intact-vue-next';
 export function useKeyboard(getStep, getNewValue, fixValue, isFirst, dragging, triggerChangeEvent) {
   var instance = useInstance();
   var oldValue;
-
   function onKeydown(_ref) {
     var keyCode = _ref.keyCode;
     if (instance.get('disabled')) return;
-
     var _instance$get = instance.get(),
-        value = _instance$get.value,
-        range = _instance$get.range; // remain the old value to detect whether it changed to trigger change event
-
-
+      value = _instance$get.value,
+      range = _instance$get.range;
+    // remain the old value to detect whether it changed to trigger change event
     oldValue = value;
-
     if (range) {
       var _value = value,
-          min = _value[0],
-          max = _value[1];
+        min = _value[0],
+        max = _value[1];
       value = isFirst() ? min : max;
     }
-
     if (keyCode === 37) {
       // left
       var _getStep = getStep(value, 'decrease'),
-          step = _getStep[0];
-
+        step = _getStep[0];
       updateValue(value - step);
     } else if (keyCode === 39) {
       var _getStep2 = getStep(value, 'increase'),
-          _step = _getStep2[0];
-
+        _step = _getStep2[0];
       updateValue(value + _step);
     }
   }
-
   function updateValue(value) {
     // disable transition
     dragging.set(true);
     fixValue(getNewValue(value), true);
   }
-
   function onKeyup(_ref2) {
     var keyCode = _ref2.keyCode;
-
     if (keyCode === 37 || keyCode === 39) {
       dragging.set(false);
       triggerChangeEvent(oldValue);
     }
   }
-
   return {
     onKeydown: onKeydown,
     onKeyup: onKeyup

package/components/slider/useMarks.d.ts

@@ -1,14 +1,14 @@
-declare type MarkKey = string | number;
-declare type MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey];
-export declare type Marks = Record<MarkKey, MarkValue>;
-declare type Mark = {
+type MarkKey = string | number;
+type MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey];
+export type Marks = Record<MarkKey, MarkValue>;
+type Mark = {
     value: number;
     raw: MarkValue;
     style: Style;
     active: boolean;
     text: string | number;
 };
-declare type Style = {
+type Style = {
     left: string;
 };
 export declare function useMarks(): () => Mark[];

package/components/slider/useMarks.js

@@ -6,12 +6,10 @@ export function useMarks() {
   var marks = [];
   useReceive(['marks', 'value'], function () {
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min,
-        _marks = _instance$get.marks;
-
+      max = _instance$get.max,
+      min = _instance$get.min,
+      _marks = _instance$get.marks;
     marks = [];
-
     for (var key in _marks) {
       var mark = _marks[key];
       var value = +key;
@@ -25,32 +23,26 @@ export function useMarks() {
         text: ''
       });
     }
-
     addText();
   });
   instance.on('$change:value', addText);
-
   function addText() {
     var _instance$get2 = instance.get(),
-        value = _instance$get2.value,
-        range = _instance$get2.range;
-
+      value = _instance$get2.value,
+      range = _instance$get2.range;
     marks.forEach(function (mark) {
       var active = !range ? mark.value === value : _includesInstanceProperty(value).call(value, mark.value);
       var text;
       var raw = mark.raw;
-
       if (Array.isArray(raw)) {
         text = active && raw[1] !== undefined ? raw[1] : raw[0];
       } else {
         text = raw;
       }
-
       mark.active = active;
       mark.text = text;
     });
   }
-
   return function () {
     return marks;
   };

package/components/slider/usePoints.d.ts

@@ -1,12 +1,12 @@
 import { State } from '../../hooks/useState';
 import type { NormalizedGetStep } from '../spinner/useStep';
 import { Value } from './useValue';
-declare type Point = {
+type Point = {
     value: number;
     style: Style;
     active: boolean;
 };
-declare type Style = {
+type Style = {
     left: string;
 };
 export declare function usePoints(showValue: State<Value>, getStep: NormalizedGetStep): () => Point[];

package/components/slider/usePoints.js

@@ -15,45 +15,34 @@ export function usePoints(showValue, getStep) {
     }
   });
   watchState(showValue, addActive);
-
   function makeStepPoints() {
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min,
-        step = _instance$get.step;
-
+      max = _instance$get.max,
+      min = _instance$get.min,
+      step = _instance$get.step;
     if (!step) {
       if (process.env.NODE_ENV !== 'production') {
         error('[Slider]: Step cannot be 0 if you want to show step points.');
       }
-
       return;
     }
-
     var results = [];
     var i = min;
-
     while (true) {
       var _getStep = getStep(i, 'increase'),
-          _step = _getStep[0];
-
+        _step = _getStep[0];
       i = i + _step;
-
       if (Number(i.toFixed(10)) >= max) {
         break;
       }
-
       results.push(i);
     }
-
     addStyle(results);
   }
-
   function addStyle(values) {
     var _instance$get2 = instance.get(),
-        min = _instance$get2.min,
-        max = _instance$get2.max;
-
+      min = _instance$get2.min,
+      max = _instance$get2.max;
     var total = max - min;
     points = _mapInstanceProperty(values).call(values, function (point) {
       return {
@@ -66,17 +55,14 @@ export function usePoints(showValue, getStep) {
     });
     addActive();
   }
-
   function addActive() {
     var _instance$get3 = instance.get(),
-        range = _instance$get3.range;
-
+      range = _instance$get3.range;
     var value = showValue.value;
     points.forEach(function (point) {
       point.active = !range ? point.value <= value : point.value >= value[0] && point.value <= value[1];
     });
   }
-
   return function () {
     return points;
   };

package/components/slider/useStyles.d.ts

@@ -1,6 +1,6 @@
 import { State } from '../../hooks/useState';
 import { Value } from './useValue';
-declare type Style = Record<string, string>;
+type Style = Record<string, string>;
 export declare function useStyles(showValue: State<Value>): () => {
     barStyle: Style;
     thumbFirstStyle: Style;

package/components/slider/useStyles.js

@@ -4,20 +4,17 @@ export function useStyles(showValue) {
   var barStyle;
   var thumbFirstStyle;
   var thumbSecondStyle;
-
   function updateStyle() {
     var _instance$get = instance.get(),
-        max = _instance$get.max,
-        min = _instance$get.min,
-        range = _instance$get.range;
-
+      max = _instance$get.max,
+      min = _instance$get.min,
+      range = _instance$get.range;
     var total = max - min;
-
     if (total > 0) {
       if (range) {
         var _showValue$value = showValue.value,
-            first = _showValue$value[0],
-            second = _showValue$value[1];
+          first = _showValue$value[0],
+          second = _showValue$value[1];
         barStyle = {
           width: toPercent(Math.abs(second - first), total),
           left: toPercent(Math.min(first, second) - min, total)
@@ -50,7 +47,6 @@ export function useStyles(showValue) {
       };
     }
   }
-
   onBeforeUpdate(updateStyle);
   onBeforeMount(updateStyle);
   return function () {
@@ -61,7 +57,6 @@ export function useStyles(showValue) {
     };
   };
 }
-
 function toPercent(value, total) {
   return value / total * 100 + '%';
 }

package/components/slider/useTooltip.js

@@ -15,13 +15,11 @@ export function useTooltip(showValue) {
   var tooltipProps = defaultTooltipProps;
   useReceive(['always', 'tooltipProps'], function () {
     var _instance$get = instance.get(),
-        always = _instance$get.always,
-        props = _instance$get.tooltipProps;
-
+      always = _instance$get.always,
+      props = _instance$get.tooltipProps;
     tooltipProps = _extends({}, defaultTooltipProps, {
       always: always
     }, props);
-
     if (always) {
       tooltipProps.value = true;
     }
@@ -31,33 +29,27 @@ export function useTooltip(showValue) {
       show();
     }
   });
-
   function getTooltipProps() {
     return tooltipProps;
   }
-
   function show() {
     if (!instance.get('showTooltip')) return;
     var first = firstTooltipRef.value;
     var second = secondTooltipRef.value;
     first.show();
     first.position();
-
     if (second) {
       second.show();
       second.position();
     }
   }
-
   function hide() {
     firstTooltipRef.value.hide(false);
     var second = secondTooltipRef.value;
-
     if (second) {
       second.hide(false);
     }
   }
-
   return {
     firstTooltipRef: firstTooltipRef,
     secondTooltipRef: secondTooltipRef,

package/components/slider/useValue.d.ts

@@ -1,5 +1,5 @@
 import { NormalizedGetStep } from '../spinner/useStep';
-export declare type Value<Range extends boolean = boolean> = Range extends true ? [number, number] : number;
+export type Value<Range extends boolean = boolean> = Range extends true ? [number, number] : number;
 export declare function useValue(getStep: NormalizedGetStep, getDragging: () => boolean): {
     showValue: import("../../hooks/useState").State<number | [number, number]>;
     onSpinnerChange: (v: number) => void;