@varlet/ui 1.27.7 → 1.27.9-alpha.1653036733481

package/lib/switch/Switch.js

@@ -8,7 +8,7 @@ var _vue = require("vue");
 
 var _components = require("../utils/components");
 
-var _shared = require("../utils/shared");
+var _elements = require("../utils/elements");
 
 var _provide = require("../form/provide");
 
@@ -44,18 +44,18 @@ function render(_ctx, _cache) {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.switch)
   }, [(0, _vue.createElementVNode)("div", {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.track),
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('track'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('track-active')], [_ctx.errorMessage, _ctx.n('track-error')]))
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('track'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('track--active')], [_ctx.errorMessage, _ctx.n('track--error')]))
   }, null, 6
   /* CLASS, STYLE */
   ), (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.n('ripple')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('ripple'), [_ctx.modelValue === _ctx.activeValue, _ctx.n('ripple--active')])),
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.ripple)
   }, [(0, _vue.createElementVNode)("div", {
     style: (0, _vue.normalizeStyle)(_ctx.styleComputed.handle),
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('handle'), 'var-elevation--2', [_ctx.modelValue === _ctx.activeValue, _ctx.n('handle-active')], [_ctx.errorMessage, _ctx.n('handle-error')]))
+    class: (0, _vue.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 ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 0,
-    radius: _ctx.toNumber(_ctx.size) / 2 - 2
+    radius: _ctx.radius
   }, null, 8
   /* PROPS */
   , ["radius"])) : (0, _vue.createCommentVNode)("v-if", true)], 6
@@ -112,35 +112,38 @@ var _default = (0, _vue.defineComponent)({
         loadingColor,
         activeValue
       } = props;
-      var sizeNum = (0, _shared.toNumber)(size);
-      var switchWidth = sizeNum * 2;
-      var switchHeight = sizeNum * 1.2;
       return {
         handle: {
-          width: size + "px",
-          height: size + "px",
+          width: (0, _elements.multiplySizeUnit)(size),
+          height: (0, _elements.multiplySizeUnit)(size),
           backgroundColor: modelValue === activeValue ? color || '' : closeColor || '',
           color: loadingColor && loadingColor
         },
         ripple: {
-          left: modelValue === activeValue ? sizeNum / 2 + "px" : "-" + sizeNum / 2 + "px",
+          left: modelValue === activeValue ? (0, _elements.multiplySizeUnit)(size, 0.5) : "-" + (0, _elements.multiplySizeUnit)(size, 0.5),
           color: modelValue === activeValue ? color || '' : closeColor || '#999',
-          width: sizeNum * 2 + "px",
-          height: sizeNum * 2 + "px"
+          width: (0, _elements.multiplySizeUnit)(size, 2),
+          height: (0, _elements.multiplySizeUnit)(size, 2)
         },
         track: {
-          height: switchHeight * 0.6 + "px",
-          width: switchWidth - 2 + "px",
-          borderRadius: switchWidth / 3 + "px",
+          height: (0, _elements.multiplySizeUnit)(size, 0.72),
+          width: (0, _elements.multiplySizeUnit)(size, 1.9),
+          borderRadius: (0, _elements.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: (0, _elements.multiplySizeUnit)(size, 1.2),
+          width: (0, _elements.multiplySizeUnit)(size, 2)
         }
       };
     });
+    var radius = (0, _vue.computed)(() => {
+      var {
+        size = '5.333vw'
+      } = props;
+      return (0, _elements.multiplySizeUnit)(size, 0.4);
+    });
 
     var switchActive = event => {
       var {
@@ -177,7 +180,7 @@ var _default = (0, _vue.defineComponent)({
       n,
       classes,
       switchActive,
-      toNumber: _shared.toNumber,
+      radius,
       styleComputed,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,

package/lib/switch/props.js

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

package/lib/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/lib/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/lib/utils/elements.js

@@ -12,7 +12,7 @@ exports.getScrollTop = getScrollTop;
 exports.getTop = getTop;
 exports.getTranslate = getTranslate;
 exports.inViewport = inViewport;
-exports.isVw = exports.isVh = exports.isRem = exports.isPx = exports.isPercent = void 0;
+exports.multiplySizeUnit = exports.isVw = exports.isVh = exports.isRem = exports.isPx = exports.isPercent = void 0;
 exports.nextTickFrame = nextTickFrame;
 exports.requestAnimationFrame = requestAnimationFrame;
 exports.scrollTo = scrollTo;
@@ -195,6 +195,22 @@ var toSizeUnit = value => {
 
 exports.toSizeUnit = toSizeUnit;
 
+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;
+};
+
+exports.multiplySizeUnit = multiplySizeUnit;
+
 function requestAnimationFrame(fn) {
   return globalThis.requestAnimationFrame ? globalThis.requestAnimationFrame(fn) : globalThis.setTimeout(fn, 16);
 }

package/lib/utils/jest.js

@@ -7,6 +7,7 @@ exports.mockConsole = mockConsole;
 exports.mockDoubleRaf = mockDoubleRaf;
 exports.mockFileReader = mockFileReader;
 exports.mockImageNaturalSize = mockImageNaturalSize;
+exports.mockIndexBarOwnTop = mockIndexBarOwnTop;
 exports.mockOffset = mockOffset;
 exports.mockScrollTo = mockScrollTo;
 exports.mockStubs = mockStubs;
@@ -281,4 +282,24 @@ function mockScrollTo(Element) {
       this.scrollTop = y;
     }
   };
+}
+
+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;
+    }
+
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "1.27.7",
+  "version": "1.27.9-alpha.1653036733481",
   "description": "A material like components library",
   "module": "es/index.js",
   "main": "lib/index.js",
@@ -39,21 +39,22 @@
   },
   "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
   "dependencies": {
-    "@varlet/icons": "1.27.7",
+    "@varlet/icons": "1.27.9-alpha.1653036733481",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1"
   },
   "devDependencies": {
-    "@varlet/cli": "1.27.7",
-    "@varlet/touch-emulator": "1.27.7",
-    "@vue/test-utils": "2.0.0-rc.6",
+    "@varlet/cli": "1.27.9-alpha.1653036733481",
+    "@varlet/touch-emulator": "1.27.9-alpha.1653036733481",
     "@vue/runtime-core": "3.2.25",
-    "typescript": "^4.4.4",
-    "lodash-es": "^4.17.21",
+    "@vue/test-utils": "2.0.0-rc.6",
     "clipboard": "^2.0.6",
+    "live-server": "^1.2.1",
+    "lodash-es": "^4.17.21",
+    "postcss-px-to-viewport": "^1.1.1",
+    "typescript": "^4.4.4",
     "vue": "3.2.25",
-    "vue-router": "4.0.12",
-    "live-server": "^1.2.1"
+    "vue-router": "4.0.12"
   },
   "browserslist": [
     "Chrome >= 51",

package/types/card.d.ts

@@ -4,6 +4,8 @@ export interface CardProps {
   src?: string
   fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
   height?: string | number
+  width?: string | number
+  direction?: 'row' | 'column'
   alt?: string
   title?: string
   subtitle?: string

package/types/indexBar.d.ts

@@ -2,7 +2,7 @@ import { VarComponent } from './varComponent'
 
 export interface IndexBarProps {
   sticky?: boolean
-  stickyOffsetTop?: number
+  stickyOffsetTop?: number | string
   hideList?: boolean
   cssMode?: boolean
   zIndex?: number | string

package/types/picker.d.ts

@@ -20,6 +20,7 @@ export interface PickerProps {
   toolbar?: boolean
   cascade?: boolean
   cascadeInitialIndexes: number[]
+  textFormatter?: (text: any, columnIndex: number) => any
   optionHeight?: string | number
   optionCount?: string | number
   confirmButtonText?: string
@@ -60,6 +61,7 @@ export interface PickerOptions {
   cancelButtonText?: string
   confirmButtonTextColor?: string
   cancelButtonTextColor?: string
+  textFormatter?: (text: any, columnIndex: number) => any
   onOpen?: () => void
   onOpened?: () => void
   onClose?: () => void