@varlet/ui 1.27.8 → 1.27.10

package/lib/card/card.less

@@ -2,53 +2,98 @@
 @card-background: #fff;
 @card-border-radius: 4px;
 @card-image-width: 100%;
+@card-row-image-width: 140px;
+@card-row-height: 140px;
 @card-image-height: 200px;
 @card-title-color: #333;
 @card-title-font-size: 20px;
 @card-title-padding: 0 12px;
 @card-title-margin: 15px 0 0 0;
+@card-title-row-margin: 12px 0;
 @card-subtitle-color: rgba(0, 0, 0, 0.6);
 @card-subtitle-font-size: 14px;
-@card-subtitle-padding: 0 13px;
+@card-subtitle-padding: 0 12px;
+@card-subtitle-row-margin: -8px 0 0 0;
 @card-subtitle-margin: 10px 0 0 0;
 @card-description-color: rgba(0, 0, 0, 0.6);
 @card-description-font-size: 14px;
 @card-description-margin: 20px 0 0 0;
 @card-description-padding: 0 13px;
 @card-footer-padding: 0 12px;
+@card-footer-right: 13px;
+@card-footer-bottom: 9px;
 @card-footer-margin: 30px 0 0px 0;
 @card-line-height: 22px;
+@card-row-line-height: 1.5;
+@card-floating-buttons-bottom: 16px;
+@card-floating-buttons-right: 16px;
+@card-floating-buttons-color: #fff;
+@card-close-button-icon-size: 24px;
+@card-close-button-size: 56px;
+@card-close-button-primary-color: #212121;
 
 :root {
   --card-padding: @card-padding;
   --card-background: @card-background;
   --card-border-radius: @card-border-radius;
   --card-image-width: @card-image-width;
+  --card-row-image-width: @card-row-image-width;
   --card-image-height: @card-image-height;
+  --card-row-height: @card-row-height;
   --card-title-color: @card-title-color;
   --card-title-font-size: @card-title-font-size;
   --card-title-padding: @card-title-padding;
   --card-title-margin: @card-title-margin;
+  --card-title-row-margin: @card-title-row-margin;
   --card-subtitle-color: @card-subtitle-color;
   --card-subtitle-font-size: @card-subtitle-font-size;
   --card-subtitle-padding: @card-subtitle-padding;
   --card-subtitle-margin: @card-subtitle-margin;
+  --card-subtitle-row-margin: @card-subtitle-row-margin;
   --card-description-color: @card-description-color;
   --card-description-font-size: @card-description-font-size;
   --card-description-margin: @card-description-margin;
   --card-description-padding: @card-description-padding;
   --card-footer-padding: @card-footer-padding;
+  --card-footer-right: @card-footer-right;
+  --card-footer-bottom: @card-footer-bottom;
   --card-footer-margin: @card-footer-margin;
   --card-line-height: @card-line-height;
+  --card-row-line-height: @card-row-line-height;
+  --card-floating-buttons-bottom: @card-floating-buttons-bottom;
+  --card-floating-buttons-right: @card-floating-buttons-right;
+  --card-floating-buttons-color: @card-floating-buttons-color;
+  --card-close-button-icon-size: @card-close-button-icon-size;
+  --card-close-button-size: @card-close-button-size;
+  --card-close-button-primary-color: @card-close-button-primary-color;
 }
 
 .var-card {
   border-radius: var(--card-border-radius);
   overflow: hidden;
-  padding: var(--card-padding);
-  line-height: var(--card-line-height);
-  background: var(--card-background);
-  transition: background-color 0.25s;
+
+  &__floater {
+    display: flex;
+    flex-direction: column;
+    position: static;
+    line-height: var(--card-line-height);
+    background: var(--card-background);
+    transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
+  }
+
+  &__container {
+    padding: var(--card-padding);
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &--layout-row &__floater {
+    min-height: var(--card-row-height);
+    height: 100%;
+    flex-direction: row;
+    position: relative;
+    line-height: var(--card-row-line-height);
+  }
 
   &__image {
     width: var(--card-image-width);
@@ -56,11 +101,27 @@
     display: block;
   }
 
+  &--layout-row &__image {
+    width: var(--card-row-image-width);
+    height: auto;
+    display: block;
+    flex-shrink: 0;
+  }
+
   &__title {
     font-size: var(--card-title-font-size);
     padding: var(--card-title-padding);
     margin: var(--card-title-margin);
     color: var(--card-title-color);
+    word-break: break-word;
+  }
+
+  &--layout-row &__title {
+    max-width: 100%;
+    overflow: hidden;
+    margin: var(--card-title-row-margin);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__subtitle {
@@ -68,6 +129,16 @@
     color: var(--card-subtitle-color);
     padding: var(--card-subtitle-padding);
     margin: var(--card-subtitle-margin);
+    word-break: break-word;
+  }
+
+  &--layout-row &__subtitle {
+    margin: var(--card-subtitle-row-margin);
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
   }
 
   &__description {
@@ -79,7 +150,39 @@
   }
 
   &__footer {
+    display: flex;
+    justify-content: flex-end;
     padding: var(--card-footer-padding);
     margin: var(--card-footer-margin);
   }
+
+  &--layout-row &__footer {
+    position: absolute;
+    padding: 0;
+    right: var(--card-footer-right);
+    bottom: var(--card-footer-bottom);
+  }
+
+  &__content {
+    overflow: hidden;
+    transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
+  }
+
+  &__floating-buttons {
+    position: fixed;
+    bottom: var(--card-floating-buttons-bottom);
+    right: var(--card-floating-buttons-right);
+    color: var(--card-floating-buttons-color);
+  }
+
+  &__close-button[var-card-cover] {
+    padding: var(--card-close-button-padding);
+    width: var(--card-close-button-size);
+    height: var(--card-close-button-size);
+    background-color: var(--card-close-button-primary-color);
+  }
+
+  &__close-button-icon[var-card-cover] {
+    font-size: var(--card-close-button-icon-size);
+  }
 }

package/lib/card/props.js

@@ -16,9 +16,34 @@ var props = {
     validator: fitValidator,
     default: 'cover'
   },
+
+  /**
+   * @deprecated use imageHeight instead
+   */
   height: {
     type: [String, Number]
   },
+  imageHeight: {
+    type: [String, Number]
+  },
+  imageWidth: {
+    type: [String, Number]
+  },
+  layout: {
+    type: String,
+    default: 'column'
+  },
+  floating: {
+    type: Boolean,
+    default: false
+  },
+  'onUpdate:floating': {
+    type: Function
+  },
+  floatingDuration: {
+    type: Number,
+    default: 250
+  },
   alt: {
     type: String
   },

package/lib/index-bar/IndexBar.js

@@ -46,7 +46,7 @@ function render(_ctx, _cache) {
       style: (0, _vue.normalizeStyle)({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
-      onClick: $event => _ctx.anchorClick(anchorName)
+      onClick: $event => _ctx.anchorClick(anchorName, true)
     }, (0, _vue.toDisplayString)(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
     , _hoisted_1);
@@ -77,7 +77,7 @@ var _default = (0, _vue.defineComponent)({
     var active = (0, _vue.ref)();
     var sticky = (0, _vue.computed)(() => props.sticky);
     var cssMode = (0, _vue.computed)(() => props.cssMode);
-    var stickyOffsetTop = (0, _vue.computed)(() => props.stickyOffsetTop);
+    var stickyOffsetTop = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.stickyOffsetTop));
     var zIndex = (0, _vue.computed)(() => props.zIndex);
     var indexBarProvider = {
       active,
@@ -153,7 +153,7 @@ var _default = (0, _vue.defineComponent)({
 
 
     var scrollTo = index => {
-      (0, _elements.requestAnimationFrame)(() => anchorClick(index, true));
+      (0, _elements.requestAnimationFrame)(() => anchorClick(index));
     };
 
     (0, _vue.watch)(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {

package/lib/index-bar/props.js

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

package/lib/loading/Loading.js

@@ -8,10 +8,10 @@ var _vue = require("vue");
 
 var _props = require("./props");
 
-var _shared = require("../utils/shared");
-
 var _components = require("../utils/components");
 
+var _elements = require("../utils/elements");
+
 var {
   n,
   classes
@@ -52,10 +52,10 @@ function render(_ctx, _cache) {
     key: 0,
     class: (0, _vue.normalizeClass)(_ctx.n('circle'))
   }, [(0, _vue.createElementVNode)("span", {
-    class: (0, _vue.normalizeClass)(_ctx.n('circle-block')),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('circle-block'), _ctx.n("circle-block--" + _ctx.size))),
     style: (0, _vue.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
@@ -119,15 +119,6 @@ var _default = (0, _vue.defineComponent)({
       rect: 8,
       disappear: 3
     };
-    var sizeDict = {
-      mini: 9,
-      small: 12,
-      normal: 15,
-      large: 18
-    };
-    var getRadius = (0, _vue.computed)(() => {
-      return props.radius ? (0, _shared.toNumber)(props.radius) : sizeDict[props.size];
-    });
     var isShow = (0, _vue.computed)(() => {
       if (!(0, _components.call)(slots.default)) return true;
       return props.loading;
@@ -135,8 +126,8 @@ var _default = (0, _vue.defineComponent)({
     return {
       n,
       classes,
+      multiplySizeUnit: _elements.multiplySizeUnit,
       loadingTypeDict,
-      getRadius,
       isShow
     };
   }

package/lib/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/lib/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/lib/picker/Picker.js

@@ -437,7 +437,8 @@ var _default = (0, _vue.defineComponent)({
       } = getPicked();
       prevIndexes = [...indexes];
     }, {
-      immediate: true
+      immediate: true,
+      deep: true
     });
     return {
       n,

package/lib/progress/Progress.js

@@ -10,6 +10,8 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _elements = require("../utils/elements");
+
 var _components = require("../utils/components");
 
 var {
@@ -32,7 +34,7 @@ function render(_ctx, _cache) {
   }, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
     class: _ctx.n('linear-block'),
     style: {
-      height: _ctx.lineWidth + "px"
+      height: _ctx.toSizeUnit(_ctx.lineWidth)
     }
   }, _ctx.$attrs), [_ctx.track ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
@@ -65,8 +67,8 @@ function render(_ctx, _cache) {
     key: 1,
     class: (0, _vue.normalizeClass)(_ctx.n('circle')),
     style: (0, _vue.normalizeStyle)({
-      width: _ctx.size + "px",
-      height: _ctx.size + "px"
+      width: _ctx.toSizeUnit(_ctx.size),
+      height: _ctx.toSizeUnit(_ctx.size)
     })
   }, [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", {
     class: (0, _vue.normalizeClass)(_ctx.n('circle-svg')),
@@ -77,11 +79,11 @@ function render(_ctx, _cache) {
   }, [_ctx.track ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("circle", {
     key: 0,
     class: (0, _vue.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: (0, _vue.normalizeStyle)({
       strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
@@ -90,11 +92,11 @@ function render(_ctx, _cache) {
   /* CLASS, STYLE, PROPS */
   , _hoisted_2)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("circle", {
     class: (0, _vue.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: (0, _vue.normalizeStyle)({
       strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
@@ -139,9 +141,9 @@ var _default = (0, _vue.defineComponent)({
         lineWidth,
         value
       } = props;
-      var viewBox = "0 0 " + size + " " + size;
+      var viewBox = "0 0 " + (0, _elements.toPxNum)(size) + " " + (0, _elements.toPxNum)(size);
       var roundValue = (0, _shared.toNumber)(value) > 100 ? 100 : Math.round((0, _shared.toNumber)(value));
-      var radius = (size - (0, _shared.toNumber)(lineWidth)) / 2;
+      var radius = ((0, _elements.toPxNum)(size) - (0, _elements.toPxNum)(lineWidth)) / 2;
       var perimeter = 2 * Math.PI * radius;
       var strokeDasharray = roundValue / 100 * perimeter + ", " + perimeter;
       return {
@@ -155,6 +157,8 @@ var _default = (0, _vue.defineComponent)({
     return {
       n,
       classes,
+      toSizeUnit: _elements.toSizeUnit,
+      multiplySizeUnit: _elements.multiplySizeUnit,
       linearProps,
       circleProps
     };

package/lib/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/lib/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/lib/progress/props.js

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

package/lib/rate/Rate.js

@@ -50,6 +50,8 @@ function render(_ctx, _cache) {
       class: (0, _vue.normalizeClass)(_ctx.getClass(val)),
       onClick: $event => _ctx.handleClick(val, $event)
     }, [(0, _vue.createVNode)(_component_var_icon, {
+      class: (0, _vue.normalizeClass)(_ctx.n('content-icon')),
+      "var-rate-cover": "",
       transition: 0,
       namespace: _ctx.namespace,
       name: _ctx.getIconName(val),
@@ -58,7 +60,7 @@ 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/lib/rate/props.js

@@ -26,12 +26,10 @@ 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/lib/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/lib/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/lib/select/Select.js

@@ -268,6 +268,8 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var findLabel = modelValue => {
+      var _option$label$value, _option;
+
       var option = options.find(_ref2 => {
         var {
           value
@@ -284,7 +286,7 @@ var _default = (0, _vue.defineComponent)({
         });
       }
 
-      return option.label.value;
+      return (_option$label$value = (_option = option) == null ? void 0 : _option.label.value) != null ? _option$label$value : '';
     };
 
     var computePlaceholderState = () => {

package/lib/slider/Slider.js

@@ -45,8 +45,8 @@ function render(_ctx, _cache) {
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('block'), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
     style: (0, _vue.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 () {
@@ -58,7 +58,7 @@ function render(_ctx, _cache) {
     class: (0, _vue.normalizeClass)(_ctx.n('track-background')),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.trackColor,
-      height: _ctx.trackHeight + 'px'
+      height: _ctx.multiplySizeUnit(_ctx.trackHeight)
     })
   }, null, 6
   /* CLASS, STYLE */
@@ -87,8 +87,8 @@ function render(_ctx, _cache) {
       class: (0, _vue.normalizeClass)(_ctx.n('thumb-block')),
       style: (0, _vue.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 */
@@ -104,8 +104,8 @@ function render(_ctx, _cache) {
       style: (0, _vue.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)
       })
     }, [(0, _vue.createElementVNode)("span", null, (0, _vue.toDisplayString)(item.value), 1
     /* TEXT */
@@ -191,7 +191,7 @@ var _default = (0, _vue.defineComponent)({
       var size;
 
       if (props.thumbSize !== undefined) {
-        size = thumbsProps[item.enumValue].active ? 3 * (0, _shared.toNumber)(props.thumbSize) + "px" : '0px';
+        size = thumbsProps[item.enumValue].active ? (0, _elements.multiplySizeUnit)(props.thumbSize, 3) : '0px';
       }
 
       return {
@@ -400,6 +400,7 @@ var _default = (0, _vue.defineComponent)({
       errorMessage,
       thumbsProps,
       thumbList,
+      multiplySizeUnit: _elements.multiplySizeUnit,
       toNumber: _shared.toNumber,
       getRippleSize,
       showLabel,