@king-design/vue 2.1.4 → 2.1.6

package/components/slider/index.vdt.js

@@ -7,63 +7,72 @@ 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,
@@ -80,14 +89,17 @@ 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)
@@ -95,9 +107,10 @@ 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,18 +6,23 @@ 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)',
@@ -29,31 +34,40 @@ 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,33 +1,42 @@
 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,36 +7,42 @@ 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) {
@@ -45,13 +51,16 @@ 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
@@ -74,10 +83,12 @@ export function useDraggable(showValue, fixValue, triggerChangeEvent, showToolti
       }
     }
   }
+
   function onFocusin(_isFirst) {
     _isFirst2 = _isFirst;
     showTooltip();
   }
+
   return {
     onStart: onStart,
     dragging: dragging,

package/components/slider/useKeyboard.js

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

package/components/slider/useMarks.js

@@ -6,10 +6,12 @@ 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;
@@ -23,26 +25,32 @@ 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';
-type Point = {
+declare type Point = {
     value: number;
     style: Style;
     active: boolean;
 };
-type Style = {
+declare type Style = {
     left: string;
 };
 export declare function usePoints(showValue: State<Value>, getStep: NormalizedGetStep): () => Point[];

package/components/slider/usePoints.js

@@ -15,34 +15,45 @@ 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 {
@@ -55,14 +66,17 @@ 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';
-type Style = Record<string, string>;
+declare type Style = Record<string, string>;
 export declare function useStyles(showValue: State<Value>): () => {
     barStyle: Style;
     thumbFirstStyle: Style;

package/components/slider/useStyles.js

@@ -4,17 +4,20 @@ 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)
@@ -47,6 +50,7 @@ export function useStyles(showValue) {
       };
     }
   }
+
   onBeforeUpdate(updateStyle);
   onBeforeMount(updateStyle);
   return function () {
@@ -57,6 +61,7 @@ export function useStyles(showValue) {
     };
   };
 }
+
 function toPercent(value, total) {
   return value / total * 100 + '%';
 }

package/components/slider/useTooltip.js

@@ -15,11 +15,13 @@ 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;
     }
@@ -29,27 +31,33 @@ 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 type Value<Range extends boolean = boolean> = Range extends true ? [number, number] : number;
+export declare 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;