@varlet/ui 1.27.8 → 1.27.10

package/es/switch/Switch.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, nextTick } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components';
-import { toNumber } from '../utils/shared';
+import { multiplySizeUnit } from '../utils/elements';
 import { useForm } from '../form/provide';
 import { props } from './props';
 import VarFormDetails from '../form-details';
@@ -28,18 +28,18 @@ export function render(_ctx, _cache) {
     style: _normalizeStyle(_ctx.styleComputed.switch)
   }, [_createElementVNode("div", {
     style: _normalizeStyle(_ctx.styleComputed.track),
-    class: _normalizeClass(_ctx.classes(_ctx.n('track'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('track-active')], [_ctx.errorMessage, _ctx.n('track-error')]))
+    class: _normalizeClass(_ctx.classes(_ctx.n('track'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('track--active')], [_ctx.errorMessage, _ctx.n('track--error')]))
   }, null, 6
   /* CLASS, STYLE */
   ), _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.n('ripple')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('ripple'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('ripple--active')])),
     style: _normalizeStyle(_ctx.styleComputed.ripple)
   }, [_createElementVNode("div", {
     style: _normalizeStyle(_ctx.styleComputed.handle),
-    class: _normalizeClass(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle-active')], [_ctx.errorMessage, _ctx.n('handle-error')]))
+    class: _normalizeClass(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle--active')], [_ctx.errorMessage, _ctx.n('handle--error')]))
   }, [_ctx.loading ? (_openBlock(), _createBlock(_component_var_loading, {
     key: 0,
-    radius: _ctx.toNumber(_ctx.size) / 2 - 2
+    radius: _ctx.radius
   }, null, 8
   /* PROPS */
   , ["radius"])) : _createCommentVNode("v-if", true)], 6
@@ -95,35 +95,38 @@ export default defineComponent({
         loadingColor,
         activeValue
       } = props;
-      var sizeNum = toNumber(size);
-      var switchWidth = sizeNum * 2;
-      var switchHeight = sizeNum * 1.2;
       return {
         handle: {
-          width: size + "px",
-          height: size + "px",
+          width: multiplySizeUnit(size),
+          height: multiplySizeUnit(size),
           backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
           color: loadingColor && loadingColor
         },
         ripple: {
-          left: modelValue === activeValue ? sizeNum / 2 + "px" : "-" + sizeNum / 2 + "px",
+          left: modelValue === activeValue ? multiplySizeUnit(size, 0.5) : "-" + multiplySizeUnit(size, 0.5),
           color: modelValue === activeValue ? color || '' : closeColor || '#999',
-          width: sizeNum * 2 + "px",
-          height: sizeNum * 2 + "px"
+          width: multiplySizeUnit(size, 2),
+          height: multiplySizeUnit(size, 2)
         },
         track: {
-          height: switchHeight * 0.6 + "px",
-          width: switchWidth - 2 + "px",
-          borderRadius: switchWidth / 3 + "px",
+          height: multiplySizeUnit(size, 0.72),
+          width: multiplySizeUnit(size, 1.9),
+          borderRadius: multiplySizeUnit(size, 2 / 3),
           filter: modelValue === activeValue || errorMessage != null && errorMessage.value ? 'opacity(.6)' : 'brightness(.6)',
           backgroundColor: modelValue === activeValue ? color || '' : closeColor || ''
         },
         switch: {
-          height: switchHeight + "px",
-          width: switchWidth + "px"
+          height: multiplySizeUnit(size, 1.2),
+          width: multiplySizeUnit(size, 2)
         }
       };
     });
+    var radius = computed(() => {
+      var {
+        size = '5.333vw'
+      } = props;
+      return multiplySizeUnit(size, 0.4);
+    });
 
     var switchActive = event => {
       var {
@@ -160,7 +163,7 @@ export default defineComponent({
       n,
       classes,
       switchActive,
-      toNumber,
+      radius,
       styleComputed,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,

package/es/switch/props.js

@@ -30,8 +30,7 @@ export var props = {
     type: String
   },
   size: {
-    type: [String, Number],
-    default: 20
+    type: [String, Number]
   },
   rules: {
     type: Array

package/es/switch/switch.css

@@ -1 +1 @@
-:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center;}.var-switch--disable { filter: opacity(0.6); cursor: not-allowed;}.var-switch__track { background: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(0.6);}.var-switch__track-active { background-color: var(--switch-track-active-background);}.var-switch__track-error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; transition: 0.3s var(--cubic-bezier);}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s;}.var-switch__handle-active { background-color: var(--switch-handle-active-background);}.var-switch__handle-error { background-color: var(--switch-handle-error-background) !important;}
+:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; height: 24px; width: 40px;}.var-switch--disable { filter: opacity(0.6); cursor: not-allowed;}.var-switch__track { background: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(0.6); height: 14.4px; width: 38px; border-radius: calc(20px * 2 / 3);}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; transition: 0.3s var(--cubic-bezier); width: 40px; height: 40px; left: -10px;}.var-switch__ripple--active { left: 10px;}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: 20px; height: 20px;}.var-switch__handle--active { background-color: var(--switch-handle-active-background);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}

package/es/switch/switch.less

@@ -28,6 +28,8 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     align-items: center;
     justify-content: center;
+    height: 24px;
+    width: 40px;
   }
 
   &--disable {
@@ -39,12 +41,15 @@
     background: var(--switch-track-background);
     transition: background-color 0.25s;
     filter: opacity(0.6);
+    height: 14.4px;
+    width: 38px;
+    border-radius: calc(20px * 2 / 3);
 
-    &-active {
+    &--active {
       background-color: var(--switch-track-active-background);
     }
 
-    &-error {
+    &--error {
       background-color: var(--switch-track-error-background) !important;
     }
   }
@@ -58,6 +63,13 @@
     border-radius: 50%;
     overflow: hidden;
     transition: 0.3s var(--cubic-bezier);
+    width: 40px;
+    height: 40px;
+    left: -10px;
+
+    &--active {
+      left: 10px;
+    }
   }
 
   &__handle {
@@ -68,12 +80,14 @@
     justify-content: center;
     color: var(--switch-handle-color);
     transition: background-color 0.25s;
+    width: 20px;
+    height: 20px;
 
-    &-active {
+    &--active {
       background-color: var(--switch-handle-active-background);
     }
 
-    &-error {
+    &--error {
       background-color: var(--switch-handle-error-background) !important;
     }
   }

package/es/utils/elements.js

@@ -145,6 +145,19 @@ export var toSizeUnit = value => {
 
   return toPxNum(value) + "px";
 };
+export var multiplySizeUnit = function (value, quantity) {
+  if (quantity === void 0) {
+    quantity = 1;
+  }
+
+  if (value == null) {
+    return undefined;
+  }
+
+  var legalSize = toSizeUnit(value);
+  var unit = legalSize.match(/(vh|%|rem|px|vw)$/)[0];
+  return "" + parseFloat(legalSize) * quantity + unit;
+};
 export function requestAnimationFrame(fn) {
   return globalThis.requestAnimationFrame ? globalThis.requestAnimationFrame(fn) : globalThis.setTimeout(fn, 16);
 }

package/es/utils/jest.js

@@ -250,4 +250,23 @@ export function mockScrollTo(Element) {
       this.scrollTop = y;
     }
   };
+}
+export function mockIndexBarOwnTop() {
+  var originForEach = Array.prototype.forEach; // eslint-disable-next-line no-extend-native
+
+  Array.prototype.forEach = function (fn, thisArg) {
+    var changedArr = this.map((value, index) => {
+      if (value.ownTop && !value.ownTop.value) value.ownTop.value = (index + 1) * 50;
+      return value;
+    });
+    originForEach.call(changedArr, fn, thisArg);
+  };
+
+  return {
+    mockRestore() {
+      // eslint-disable-next-line no-extend-native
+      Array.prototype.forEach = originForEach;
+    }
+
+  };
 }