@varlet/ui 1.27.7 → 1.27.9-alpha.1653036733481

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,

package/lib/snackbar/style/index.js

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

package/lib/snackbar/style/less.js

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