@varlet/ui 1.27.8 → 1.27.10

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

@@ -420,7 +420,8 @@ export default defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
     }, {
-      immediate: true
+      immediate: true,
+      deep: true
     });
     return {
       n,

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,