@varlet/ui 2.0.6 → 2.1.0-alpha.1667210582672

package/es/collapse/CollapseSfc.css

@@ -1 +1 @@
-.var-collapse { position: relative; width: 100%;}
+.var-collapse { position: relative; width: 100%; z-index: 0;}

package/es/select/Select.js

@@ -108,14 +108,16 @@ export function render(_ctx, _cache) {
     /* TEXT, CLASS */
     ))])) : (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.label), 1
     /* TEXT */
-    )), _createVNode(_component_var_icon, {
+    )), _renderSlot(_ctx.$slots, "arrow-icon", {
+      focus: _ctx.isFocus
+    }, () => [_createVNode(_component_var_icon, {
       class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
       "var-select-cover": "",
       name: "menu-down",
       transition: 300
     }, null, 8
     /* PROPS */
-    , ["class"])], 6
+    , ["class"])])], 6
     /* CLASS, STYLE */
     ), _createElementVNode("label", {
       class: _normalizeClass(_ctx.classes(_ctx.n('placeholder'), 'var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),

package/es/slider/Slider.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components';
 import { useForm } from '../form/provide';
@@ -30,10 +28,6 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.n())
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('block'), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
-    style: _normalizeStyle({
-      height: _ctx.thumbSize === undefined ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 3),
-      margin: _ctx.thumbSize === undefined ? _ctx.thumbSize : "0 " + _ctx.multiplySizeUnit(_ctx.thumbSize, 0.5)
-    }),
     ref: "sliderEl",
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.click && _ctx.click(...arguments);
@@ -68,21 +62,19 @@ export function render(_ctx, _cache) {
       onTouchend: $event => _ctx.end(item.enumValue),
       onTouchcancel: $event => _ctx.end(item.enumValue)
     }, [_renderSlot(_ctx.$slots, "button", {
-      currentValue: item.value
+      currentValue: item.text
     }, () => [_createElementVNode("div", {
       class: _normalizeClass(_ctx.n('thumb-block')),
       style: _normalizeStyle({
-        background: _ctx.thumbColor,
-        height: _ctx.multiplySizeUnit(_ctx.thumbSize),
-        width: _ctx.multiplySizeUnit(_ctx.thumbSize)
+        background: _ctx.thumbColor
       })
     }, null, 6
     /* CLASS, STYLE */
     ), _createElementVNode("div", {
       class: _normalizeClass(_ctx.classes(_ctx.n('thumb-ripple'), [_ctx.thumbsProps[item.enumValue].active, _ctx.n('thumb-ripple--active')])),
-      style: _normalizeStyle(_extends({
+      style: _normalizeStyle({
         background: _ctx.thumbColor
-      }, _ctx.getRippleSize(item)))
+      })
     }, null, 6
     /* CLASS, STYLE */
     ), _createElementVNode("div", {
@@ -93,7 +85,7 @@ export function render(_ctx, _cache) {
         height: _ctx.thumbSize === undefined ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 2),
         width: _ctx.thumbSize === undefined ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 2)
       })
-    }, [_createElementVNode("span", null, _toDisplayString(item.value), 1
+    }, [_createElementVNode("span", null, _toDisplayString(item.text), 1
     /* TEXT */
     )], 6
     /* CLASS, STYLE */
@@ -102,8 +94,8 @@ export function render(_ctx, _cache) {
     , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 6
-  /* CLASS, STYLE */
+  ))], 2
+  /* CLASS */
   ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
     class: _normalizeClass(_ctx.n('form')),
@@ -152,53 +144,43 @@ export default defineComponent({
       [Thumbs.First]: getThumbProps(),
       [Thumbs.Second]: getThumbProps()
     });
-    var unitWidth = computed(() => maxWidth.value / 100 * toNumber(props.step));
+    var scope = computed(() => toNumber(props.max) - toNumber(props.min));
+    var unitWidth = computed(() => maxWidth.value / scope.value * toNumber(props.step));
     var thumbList = computed(() => {
-      var list = [{
-        value: props.modelValue,
-        enumValue: Thumbs.First
-      }];
+      var {
+        modelValue,
+        range
+      } = props;
+      var list = [];
 
-      if (props.range && isArray(props.modelValue)) {
+      if (range && isArray(modelValue)) {
         list = [{
-          value: props.modelValue[0],
-          enumValue: Thumbs.First
+          value: getValue(modelValue[0]),
+          enumValue: Thumbs.First,
+          text: toPrecision(modelValue[0])
         }, {
-          value: props.modelValue[1],
-          enumValue: Thumbs.Second
+          value: getValue(modelValue[1]),
+          enumValue: Thumbs.Second,
+          text: toPrecision(modelValue[1])
+        }];
+      } else if (isNumber(modelValue)) {
+        list = [{
+          value: getValue(modelValue),
+          enumValue: Thumbs.First,
+          text: toPrecision(modelValue)
         }];
       }
 
       return list;
     });
-
-    var getRippleSize = item => {
-      var size;
-
-      if (props.thumbSize !== undefined) {
-        size = thumbsProps[item.enumValue].active ? multiplySizeUnit(props.thumbSize, 3) : '0px';
-      }
-
-      return {
-        height: size,
-        width: size
-      };
-    };
-
-    var showLabel = type => {
-      if (props.labelVisible === 'always') return true;
-      if (props.labelVisible === 'never') return false;
-      return thumbsProps[type].active;
-    };
-
     var getFillStyle = computed(() => {
       var {
         activeColor,
         range,
         modelValue
       } = props;
-      var width = range && isArray(modelValue) ? Math.abs(modelValue[0] - modelValue[1]) : modelValue;
-      var left = range && isArray(modelValue) ? Math.min(modelValue[0], modelValue[1]) : 0;
+      var left = range && isArray(modelValue) ? getValue(Math.min(modelValue[0], modelValue[1])) : 0;
+      var width = range && isArray(modelValue) ? getValue(Math.max(modelValue[0], modelValue[1])) - left : getValue(modelValue);
       return {
         width: width + "%",
         left: left + "%",
@@ -208,26 +190,52 @@ export default defineComponent({
     var isDisabled = computed(() => props.disabled || (form == null ? void 0 : form.disabled.value));
     var isReadonly = computed(() => props.readonly || (form == null ? void 0 : form.readonly.value));
 
+    var showLabel = type => {
+      if (props.labelVisible === 'always') return true;
+      if (props.labelVisible === 'never') return false;
+      return thumbsProps[type].active;
+    };
+
+    var getValue = value => {
+      var {
+        min,
+        max
+      } = props;
+      if (value < toNumber(min)) return 0;
+      if (value > toNumber(max)) return 100;
+      return (value - toNumber(min)) / scope.value * 100;
+    };
+
+    var toPrecision = value => {
+      if (!isNumber(value)) return 0;
+      var num = value;
+      if (num < Number(props.min)) num = Number(props.min);
+      if (num > Number(props.max)) num = Number(props.max);
+      var isInteger = parseInt("" + num, 10) === num;
+      return isInteger ? num : toNumber(num.toPrecision(5));
+    };
+
     var setPercent = (moveDistance, type) => {
       var rangeValue = [];
       var {
         step,
         range,
         modelValue,
-        onChange
+        onChange,
+        min
       } = props;
       var stepNumber = toNumber(step);
       var roundDistance = Math.round(moveDistance / unitWidth.value);
-      var curValue = roundDistance * stepNumber;
-      var prevValue = thumbsProps[type].percentValue;
-      thumbsProps[type].percentValue = curValue / stepNumber;
+      var curValue = roundDistance * stepNumber + toNumber(min);
+      var prevValue = thumbsProps[type].percentValue * stepNumber + toNumber(min);
+      thumbsProps[type].percentValue = roundDistance;
 
       if (range && isArray(modelValue)) {
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
       }
 
       if (prevValue !== curValue) {
-        var value = range ? rangeValue : curValue;
+        var value = range ? rangeValue.map(value => toPrecision(value)) : toPrecision(curValue);
         call(onChange, value);
         call(props['onUpdate:modelValue'], value);
         validateWithTrigger();
@@ -263,13 +271,15 @@ export default defineComponent({
       var {
         range,
         modelValue,
-        onEnd
+        onEnd,
+        step,
+        min
       } = props;
       if (isDisabled.value || isReadonly.value) return;
       var rangeValue = [];
       thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value;
       thumbsProps[type].active = false;
-      var curValue = thumbsProps[type].percentValue;
+      var curValue = thumbsProps[type].percentValue * toNumber(step) + toNumber(min);
 
       if (range && isArray(modelValue)) {
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
@@ -296,13 +306,8 @@ export default defineComponent({
         return false;
       }
 
-      if (stepNumber < 1 || stepNumber > 100) {
-        console.warn('[Varlet] Slider: "step" should be >= 0 and <= 100');
-        return false;
-      }
-
-      if (parseInt("" + props.step, 10) !== stepNumber) {
-        console.warn('[Varlet] Slider: "step" should be an Integer');
+      if (stepNumber < 0) {
+        console.warn('[Varlet] Slider: "step" should be > 0');
         return false;
       }
 
@@ -342,27 +347,26 @@ export default defineComponent({
         step = toNumber(props.step);
       }
 
+      var getPercent = value => {
+        var {
+          min,
+          max
+        } = props;
+        if (value < toNumber(min)) return 0;
+        if (value > toNumber(max)) return scope.value / step;
+        return (value - toNumber(min)) / step;
+      };
+
       if (props.range && isArray(modelValue)) {
-        thumbsProps[Thumbs.First].percentValue = modelValue[0] / step;
+        thumbsProps[Thumbs.First].percentValue = getPercent(modelValue[0]);
         thumbsProps[Thumbs.First].currentLeft = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
-        thumbsProps[Thumbs.Second].percentValue = modelValue[1] / step;
+        thumbsProps[Thumbs.Second].percentValue = getPercent(modelValue[1]);
         thumbsProps[Thumbs.Second].currentLeft = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
       } else if (isNumber(modelValue)) {
-        thumbsProps[Thumbs.First].currentLeft = modelValue / step * unitWidth.value;
+        thumbsProps[Thumbs.First].currentLeft = getPercent(modelValue) * unitWidth.value;
       }
     };
 
-    watch([() => props.modelValue, () => props.step], _ref => {
-      var [modelValue, step] = _ref;
-      if (!stepValidator() || !valueValidator() || isScroll.value) return;
-      setProps(modelValue, toNumber(step));
-    });
-    watch(maxWidth, () => setProps());
-    onMounted(() => {
-      if (!stepValidator() || !valueValidator()) return;
-      maxWidth.value = sliderEl.value.offsetWidth;
-    });
-
     var reset = () => {
       var resetValue = props.range ? [0, 0] : 0;
       call(props['onUpdate:modelValue'], resetValue);
@@ -375,6 +379,16 @@ export default defineComponent({
       resetValidation
     };
     call(bindForm, sliderProvider);
+    watch([() => props.modelValue, () => props.step], _ref => {
+      var [modelValue, step] = _ref;
+      if (!stepValidator() || !valueValidator() || isScroll.value) return;
+      setProps(modelValue, toNumber(step));
+    });
+    watch(maxWidth, () => setProps());
+    onMounted(() => {
+      if (!stepValidator() || !valueValidator()) return;
+      maxWidth.value = sliderEl.value.offsetWidth;
+    });
     return {
       n,
       classes,
@@ -387,7 +401,6 @@ export default defineComponent({
       thumbList,
       multiplySizeUnit,
       toNumber,
-      getRippleSize,
       showLabel,
       start,
       move,

package/es/slider/props.js

@@ -41,6 +41,14 @@ export var props = {
   trackHeight: {
     type: [String, Number]
   },
+  max: {
+    type: [String, Number],
+    default: 100
+  },
+  min: {
+    type: [String, Number],
+    default: 0
+  },
   thumbSize: {
     type: [String, Number]
   },

package/es/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}