@varlet/ui 1.27.7 → 1.27.9-alpha.1653036733481

package/es/index-bar/IndexBar.js

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
-import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
+import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo, toPxNum } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
 import { createNamespace, call } from '../utils/components';
@@ -34,7 +34,7 @@ export function render(_ctx, _cache) {
       style: _normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
-      onClick: $event => _ctx.anchorClick(anchorName)
+      onClick: $event => _ctx.anchorClick(anchorName, true)
     }, _toDisplayString(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
     , _hoisted_1);
@@ -64,7 +64,7 @@ export default defineComponent({
     var active = ref();
     var sticky = computed(() => props.sticky);
     var cssMode = computed(() => props.cssMode);
-    var stickyOffsetTop = computed(() => props.stickyOffsetTop);
+    var stickyOffsetTop = computed(() => toPxNum(props.stickyOffsetTop));
     var zIndex = computed(() => props.zIndex);
     var indexBarProvider = {
       active,
@@ -140,7 +140,7 @@ export default defineComponent({
 
 
     var scrollTo = index => {
-      requestAnimationFrame(() => anchorClick(index, true));
+      requestAnimationFrame(() => anchorClick(index));
     };
 
     watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {

package/es/index-bar/props.js

@@ -4,7 +4,7 @@ export var props = {
     default: true
   },
   stickyOffsetTop: {
-    type: Number,
+    type: [String, Number],
     default: 0
   },
   cssMode: {

package/es/loading/Loading.js

@@ -1,7 +1,7 @@
 import { computed, defineComponent } from 'vue';
 import { props } from './props';
-import { toNumber } from '../utils/shared';
 import { createNamespace, call } from '../utils/components';
+import { multiplySizeUnit } from '../utils/elements';
 var {
   n,
   classes
@@ -42,10 +42,10 @@ export function render(_ctx, _cache) {
     key: 0,
     class: _normalizeClass(_ctx.n('circle'))
   }, [_createElementVNode("span", {
-    class: _normalizeClass(_ctx.n('circle-block')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('circle-block'), _ctx.n("circle-block--" + _ctx.size))),
     style: _normalizeStyle({
-      width: _ctx.getRadius * 2 + 'px',
-      height: _ctx.getRadius * 2 + 'px',
+      width: _ctx.multiplySizeUnit(_ctx.radius, 2),
+      height: _ctx.multiplySizeUnit(_ctx.radius, 2),
       color: _ctx.color
     })
   }, _hoisted_2, 6
@@ -108,15 +108,6 @@ export default defineComponent({
       rect: 8,
       disappear: 3
     };
-    var sizeDict = {
-      mini: 9,
-      small: 12,
-      normal: 15,
-      large: 18
-    };
-    var getRadius = computed(() => {
-      return props.radius ? toNumber(props.radius) : sizeDict[props.size];
-    });
     var isShow = computed(() => {
       if (!call(slots.default)) return true;
       return props.loading;
@@ -124,8 +115,8 @@ export default defineComponent({
     return {
       n,
       classes,
+      multiplySizeUnit,
       loadingTypeDict,
-      getRadius,
       isShow
     };
   }

package/es/loading/loading.css

@@ -1 +1 @@
-:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}
+:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}

package/es/loading/loading.less

@@ -84,6 +84,26 @@
       display: inline-block;
       animation: circle 1.8s linear infinite;
 
+      &--large {
+        width: 36px;
+        height: 36px;
+      }
+
+      &--normal {
+        width: 30px;
+        height: 30px;
+      }
+
+      &--small {
+        width: 24px;
+        height: 24px;
+      }
+
+      &--mini {
+        width: 18px;
+        height: 18px;
+      }
+
       svg {
         display: block;
         width: 100%;

package/es/picker/Picker.js

@@ -109,7 +109,7 @@ export function render(_ctx, _cache) {
           key: t
         }, [_createElementVNode("div", {
           class: _normalizeClass(_ctx.n('text'))
-        }, _toDisplayString(t), 3
+        }, _toDisplayString(_ctx.textFormatter(t, c.columnIndex)), 3
         /* TEXT, CLASS */
         )], 6
         /* CLASS, STYLE */
@@ -277,7 +277,7 @@ export default defineComponent({
     };
 
     var normalizeNormalColumns = normalColumns => {
-      return normalColumns.map(column => {
+      return normalColumns.map((column, columnIndex) => {
         var _normalColumn$initial;
 
         var normalColumn = isArray(column) ? {
@@ -290,6 +290,7 @@ export default defineComponent({
           touching: false,
           translate: center.value,
           index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: normalColumn,
@@ -303,11 +304,11 @@ export default defineComponent({
 
     var normalizeCascadeColumns = cascadeColumns => {
       var scrollColumns = [];
-      createChildren(scrollColumns, cascadeColumns, true);
+      createChildren(scrollColumns, cascadeColumns, 0, true);
       return scrollColumns;
     };
 
-    var createChildren = function (scrollColumns, children, initial) {
+    var createChildren = function (scrollColumns, children, columnIndex, initial) {
       if (initial === void 0) {
         initial = false;
       }
@@ -323,6 +324,7 @@ export default defineComponent({
           touching: false,
           translate: center.value,
           index,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -334,13 +336,13 @@ export default defineComponent({
         };
         scrollColumns.push(scrollColumn);
         scrollTo(scrollColumn, scrollColumn.index, 0, true);
-        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, initial);
+        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
     };
 
     var rebuildChildren = scrollColumn => {
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
+      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children, scrollColumn.columnIndex + 1);
     };
 
     var change = scrollColumn => {
@@ -418,7 +420,8 @@ export default defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
     }, {
-      immediate: true
+      immediate: true,
+      deep: true
     });
     return {
       n,

package/es/picker/props.js

@@ -59,5 +59,9 @@ export var props = _extends({
   },
   onCancel: {
     type: Function
+  },
+  textFormatter: {
+    type: Function,
+    default: text => text
   }
 }, pickProps(popupProps, ['show', 'onUpdate:show', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', 'onRouteChange']));

package/es/progress/Progress.js

@@ -1,6 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
 import { toNumber } from '../utils/shared';
+import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements';
 import { createNamespace } from '../utils/components';
 var {
   n,
@@ -22,7 +23,7 @@ export function render(_ctx, _cache) {
   }, [_createElementVNode("div", _mergeProps({
     class: _ctx.n('linear-block'),
     style: {
-      height: _ctx.lineWidth + "px"
+      height: _ctx.toSizeUnit(_ctx.lineWidth)
     }
   }, _ctx.$attrs), [_ctx.track ? (_openBlock(), _createElementBlock("div", {
     key: 0,
@@ -55,8 +56,8 @@ export function render(_ctx, _cache) {
     key: 1,
     class: _normalizeClass(_ctx.n('circle')),
     style: _normalizeStyle({
-      width: _ctx.size + "px",
-      height: _ctx.size + "px"
+      width: _ctx.toSizeUnit(_ctx.size),
+      height: _ctx.toSizeUnit(_ctx.size)
     })
   }, [(_openBlock(), _createElementBlock("svg", {
     class: _normalizeClass(_ctx.n('circle-svg')),
@@ -67,11 +68,11 @@ export function render(_ctx, _cache) {
   }, [_ctx.track ? (_openBlock(), _createElementBlock("circle", {
     key: 0,
     class: _normalizeClass(_ctx.n('circle-background')),
-    cx: _ctx.size / 2,
-    cy: _ctx.size / 2,
+    cx: _ctx.multiplySizeUnit(_ctx.size, 0.5),
+    cy: _ctx.multiplySizeUnit(_ctx.size, 0.5),
     r: _ctx.circleProps.radius,
     fill: "transparent",
-    "stroke-width": _ctx.lineWidth,
+    "stroke-width": _ctx.toSizeUnit(_ctx.lineWidth),
     style: _normalizeStyle({
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
@@ -80,11 +81,11 @@ export function render(_ctx, _cache) {
   /* CLASS, STYLE, PROPS */
   , _hoisted_2)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
     class: _normalizeClass(_ctx.n('circle-certain')),
-    cx: _ctx.size / 2,
-    cy: _ctx.size / 2,
+    cx: _ctx.multiplySizeUnit(_ctx.size, 0.5),
+    cy: _ctx.multiplySizeUnit(_ctx.size, 0.5),
     r: _ctx.circleProps.radius,
     fill: "transparent",
-    "stroke-width": _ctx.lineWidth,
+    "stroke-width": _ctx.toSizeUnit(_ctx.lineWidth),
     style: _normalizeStyle({
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
@@ -128,9 +129,9 @@ export default defineComponent({
         lineWidth,
         value
       } = props;
-      var viewBox = "0 0 " + size + " " + size;
+      var viewBox = "0 0 " + toPxNum(size) + " " + toPxNum(size);
       var roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value));
-      var radius = (size - toNumber(lineWidth)) / 2;
+      var radius = (toPxNum(size) - toPxNum(lineWidth)) / 2;
       var perimeter = 2 * Math.PI * radius;
       var strokeDasharray = roundValue / 100 * perimeter + ", " + perimeter;
       return {
@@ -144,6 +145,8 @@ export default defineComponent({
     return {
       n,
       classes,
+      toSizeUnit,
+      multiplySizeUnit,
       linearProps,
       circleProps
     };

package/es/progress/progress.css

@@ -1 +1 @@
-:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden;}.var-progress__linear-background,.var-progress__linear-certain { width: 100%; height: 100%;}.var-progress__linear-ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0;}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress__circle { position: relative;}.var-progress__circle-background { stroke: var(--progress-track-color);}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
+:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden; height: 4px;}.var-progress__linear-background,.var-progress__linear-certain { width: 100%; height: 100%;}.var-progress__linear-ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0;}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress__circle { position: relative; width: 40px; height: 40px;}.var-progress__circle-background { stroke: var(--progress-track-color);}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

package/es/progress/progress.less

@@ -22,6 +22,7 @@
       flex: 1;
       position: relative;
       overflow: hidden;
+      height: 4px;
     }
 
     &-background,
@@ -77,6 +78,8 @@
 
   &__circle {
     position: relative;
+    width: 40px;
+    height: 40px;
 
     &-background {
       stroke: var(--progress-track-color);

package/es/progress/props.js

@@ -39,7 +39,7 @@ export var props = {
   },
   // circle 的尺寸
   size: {
-    type: Number,
+    type: [Number, String],
     default: 40
   },
   // circle的原点

package/es/rate/Rate.js

@@ -10,7 +10,7 @@ import { props } from './props';
 var {
   n
 } = createNamespace('rate');
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -33,6 +33,8 @@ export function render(_ctx, _cache) {
       class: _normalizeClass(_ctx.getClass(val)),
       onClick: $event => _ctx.handleClick(val, $event)
     }, [_createVNode(_component_var_icon, {
+      class: _normalizeClass(_ctx.n('content-icon')),
+      "var-rate-cover": "",
       transition: 0,
       namespace: _ctx.namespace,
       name: _ctx.getIconName(val),
@@ -41,7 +43,7 @@ export function render(_ctx, _cache) {
       })
     }, null, 8
     /* PROPS */
-    , ["namespace", "name", "style"])], 14
+    , ["class", "namespace", "name", "style"])], 14
     /* CLASS, STYLE, PROPS */
     , _hoisted_1)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple

package/es/rate/props.js

@@ -22,12 +22,10 @@ export var props = {
     default: 'star-outline'
   },
   size: {
-    type: [String, Number],
-    default: '24'
+    type: [String, Number]
   },
   gap: {
-    type: [String, Number],
-    default: '2'
+    type: [String, Number]
   },
   namespace: {
     type: String

package/es/rate/rate.css

@@ -1 +1 @@
-:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; display: flex; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}
+:root { --rate-disabled-color: var(--color-text-disabled); --rate-error-color: var(--color-danger); --rate-action-padding: 4px; --rate-primary-color: var(--color-primary);}.var-rate { display: flex; transform: translateX(calc(-1 * var(--rate-action-padding)));}.var-rate__content { padding: var(--rate-action-padding); box-sizing: unset; cursor: pointer; display: flex; width: 24px; height: 24px; margin-right: 2px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-rate__content-icon[var-rate-cover] { font-size: 24px;}.var-rate--primary { color: var(--rate-primary-color);}.var-rate--disabled { color: var(--rate-disabled-color); cursor: not-allowed;}.var-rate--error { color: var(--rate-error-color);}

package/es/rate/rate.less

@@ -19,7 +19,14 @@
     box-sizing: unset;
     cursor: pointer;
     display: flex;
+    width: 24px;
+    height: 24px;
+    margin-right: 2px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &-icon[var-rate-cover] {
+      font-size: 24px;
+    }
   }
 
   &--primary {

package/es/select/Select.js

@@ -248,6 +248,8 @@ export default defineComponent({
     };
 
     var findLabel = modelValue => {
+      var _option$label$value, _option;
+
       var option = options.find(_ref2 => {
         var {
           value
@@ -264,7 +266,7 @@ export default defineComponent({
         });
       }
 
-      return option.label.value;
+      return (_option$label$value = (_option = option) == null ? void 0 : _option.label.value) != null ? _option$label$value : '';
     };
 
     var computePlaceholderState = () => {

package/es/slider/Slider.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components';
 import { useForm } from '../form/provide';
-import { getLeft } from '../utils/elements';
+import { getLeft, multiplySizeUnit } from '../utils/elements';
 import { isArray, isNumber, toNumber } from '../utils/shared';
 import { props } from './props';
 import VarFormDetails from '../form-details';
@@ -31,8 +31,8 @@ export function render(_ctx, _cache) {
   }, [_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 : 3 * _ctx.toNumber(_ctx.thumbSize) + "px",
-      margin: _ctx.thumbSize === undefined ? _ctx.thumbSize : "0 " + _ctx.toNumber(_ctx.thumbSize) / 2 + "px"
+      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 () {
@@ -44,7 +44,7 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.n('track-background')),
     style: _normalizeStyle({
       background: _ctx.trackColor,
-      height: _ctx.trackHeight + 'px'
+      height: _ctx.multiplySizeUnit(_ctx.trackHeight)
     })
   }, null, 6
   /* CLASS, STYLE */
@@ -73,8 +73,8 @@ export function render(_ctx, _cache) {
       class: _normalizeClass(_ctx.n('thumb-block')),
       style: _normalizeStyle({
         background: _ctx.thumbColor,
-        height: _ctx.thumbSize + 'px',
-        width: _ctx.thumbSize + 'px'
+        height: _ctx.multiplySizeUnit(_ctx.thumbSize),
+        width: _ctx.multiplySizeUnit(_ctx.thumbSize)
       })
     }, null, 6
     /* CLASS, STYLE */
@@ -90,8 +90,8 @@ export function render(_ctx, _cache) {
       style: _normalizeStyle({
         background: _ctx.labelColor,
         color: _ctx.labelTextColor,
-        height: _ctx.thumbSize === undefined ? _ctx.thumbSize : 2 * _ctx.toNumber(_ctx.thumbSize) + "px",
-        width: _ctx.thumbSize === undefined ? _ctx.thumbSize : 2 * _ctx.toNumber(_ctx.thumbSize) + "px"
+        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
     /* TEXT */
@@ -176,7 +176,7 @@ export default defineComponent({
       var size;
 
       if (props.thumbSize !== undefined) {
-        size = thumbsProps[item.enumValue].active ? 3 * toNumber(props.thumbSize) + "px" : '0px';
+        size = thumbsProps[item.enumValue].active ? multiplySizeUnit(props.thumbSize, 3) : '0px';
       }
 
       return {
@@ -385,6 +385,7 @@ export default defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      multiplySizeUnit,
       toNumber,
       getRippleSize,
       showLabel,

package/es/snackbar/style/index.js

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'

package/es/snackbar/style/less.js

@@ -1,8 +1,8 @@
 import '../../styles/common.less'
+import '../SnackbarSfc.less'
 import '../../styles/elevation.less'
 import '../../loading/loading.less'
 import '../../button/button.less'
 import '../../icon/icon.less'
 import '../snackbar.less'
 import '../coreSfc.less'
-import '../SnackbarSfc.less'