@varlet/ui 2.12.2 → 2.12.3

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.12.2'
+const version = '2.12.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.12.2'
+const version = '2.12.3'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -47,6 +47,7 @@ function __render__(_ctx, _cache) {
     "append-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "append-icon")]),
     default: _withCtx(() => [_ctx.normalizedType === 'password' ? (_openBlock(), _createElementBlock("input", {
       key: 0,
+      tabindex: "-1",
       class: _normalizeClass(_ctx.n('autocomplete')),
       placeholder: !_ctx.hint ? _ctx.placeholder : undefined,
       style: _normalizeStyle({

package/es/progress/Progress.mjs

@@ -1,18 +1,17 @@
 import { defineComponent, computed } from 'vue';
 import { props } from './props.mjs';
 import { toNumber } from '@varlet/shared';
-import { toSizeUnit, multiplySizeUnit, toPxNum } from '../utils/elements.mjs';
+import { toSizeUnit, toPxNum } from '../utils/elements.mjs';
 import { createNamespace } from '../utils/components.mjs';
 var {
   n,
   classes
 } = createNamespace('progress');
-var ONE_HUNDRED = 100;
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 var _hoisted_1 = ["viewBox"];
-var _hoisted_2 = ["cx", "cy", "r", "stroke-width"];
-var _hoisted_3 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_2 = ["r", "stroke-width", "stroke-dasharray"];
+var _hoisted_3 = ["r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.n())
@@ -30,18 +29,32 @@ function __render__(_ctx, _cache) {
     style: _normalizeStyle({
       background: _ctx.trackColor
     })
-  }, null, 6 /* CLASS, STYLE */)) : _createCommentVNode("v-if", true), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('linear-certain'), [_ctx.ripple, _ctx.n('linear-ripple')])),
+  }, null, 6 /* CLASS, STYLE */)) : _createCommentVNode("v-if", true), _ctx.indeterminate ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    class: _normalizeClass(_ctx.classes([_ctx.indeterminate, _ctx.n('linear-indeterminate')]))
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n("linear--" + _ctx.type))),
+    style: _normalizeStyle({
+      background: _ctx.color
+    })
+  }, null, 6 /* CLASS, STYLE */), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n("linear--" + _ctx.type))),
+    style: _normalizeStyle({
+      background: _ctx.color
+    })
+  }, null, 6 /* CLASS, STYLE */)], 2 /* CLASS */)) : (_openBlock(), _createElementBlock("div", {
+    key: 2,
+    class: _normalizeClass(_ctx.classes(_ctx.n('linear-certain'), _ctx.n("linear--" + _ctx.type), [_ctx.ripple, _ctx.n('linear-ripple')])),
     style: _normalizeStyle({
       background: _ctx.color,
       width: _ctx.linearProps.width
     })
-  }, null, 6 /* CLASS, STYLE */)], 6 /* CLASS, STYLE */), _ctx.label ? (_openBlock(), _createElementBlock("div", {
+  }, null, 6 /* CLASS, STYLE */))], 6 /* CLASS, STYLE */), _ctx.label ? (_openBlock(), _createElementBlock("div", {
     key: 0,
     class: _normalizeClass(_ctx.classes(_ctx.n('linear-label'), [_ctx.labelClass, _ctx.labelClass]))
   }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.linearProps.roundValue), 1 /* TEXT */)])], 2 /* CLASS */)) : _createCommentVNode("v-if", true)], 2 /* CLASS */)) : _createCommentVNode("v-if", true), _ctx.mode === 'circle' ? (_openBlock(), _createElementBlock("div", {
     key: 1,
-    class: _normalizeClass(_ctx.n('circle')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('circle'), [_ctx.indeterminate, _ctx.n('circle-indeterminate')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.size),
       height: _ctx.toSizeUnit(_ctx.size)
@@ -55,24 +68,25 @@ function __render__(_ctx, _cache) {
   }, [_ctx.track ? (_openBlock(), _createElementBlock("circle", {
     key: 0,
     class: _normalizeClass(_ctx.n('circle-background')),
-    cx: _ctx.multiplySizeUnit(_ctx.size, 0.5),
-    cy: _ctx.multiplySizeUnit(_ctx.size, 0.5),
-    r: _ctx.circleProps.radius,
+    cx: "50%",
+    cy: "50%",
+    r: _ctx.RADIUS,
     fill: "transparent",
-    "stroke-width": _ctx.toSizeUnit(_ctx.lineWidth),
+    "stroke-width": _ctx.circleProps.strokeWidth,
+    "stroke-dasharray": _ctx.CIRCUMFERENCE,
     style: _normalizeStyle({
-      strokeDasharray: _ctx.circleProps.perimeter,
       stroke: _ctx.trackColor
     })
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_2)) : _createCommentVNode("v-if", true), _createElementVNode("circle", {
-    class: _normalizeClass(_ctx.n('circle-certain')),
-    cx: _ctx.multiplySizeUnit(_ctx.size, 0.5),
-    cy: _ctx.multiplySizeUnit(_ctx.size, 0.5),
-    r: _ctx.circleProps.radius,
+    class: _normalizeClass(_ctx.classes(_ctx.n('circle-certain'), _ctx.n("circle--" + _ctx.type), [_ctx.indeterminate, _ctx.n('circle-overlay')])),
+    cx: "50%",
+    cy: "50%",
+    r: _ctx.RADIUS,
     fill: "transparent",
-    "stroke-width": _ctx.toSizeUnit(_ctx.lineWidth),
+    "stroke-width": _ctx.circleProps.strokeWidth,
+    "stroke-dasharray": _ctx.CIRCUMFERENCE,
+    "stroke-dashoffset": _ctx.circleProps.strokeOffset,
     style: _normalizeStyle({
-      strokeDasharray: _ctx.circleProps.strokeDasharray,
       stroke: _ctx.color
     })
   }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3)], 14 /* CLASS, STYLE, PROPS */, _hoisted_1)), _ctx.label ? (_openBlock(), _createElementBlock("div", {
@@ -85,6 +99,9 @@ var __sfc__ = defineComponent({
   name: 'VarProgress',
   props,
   setup(props) {
+    var ONE_HUNDRED = 100;
+    var RADIUS = 20;
+    var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
     var linearProps = computed(() => {
       var value = toNumber(props.value);
       var width = value > ONE_HUNDRED ? ONE_HUNDRED : value;
@@ -100,16 +117,15 @@ var __sfc__ = defineComponent({
         lineWidth,
         value
       } = props;
-      var viewBox = "0 0 " + toPxNum(size) + " " + toPxNum(size);
+      var diameter = RADIUS / (1 - toPxNum(lineWidth) / toPxNum(size)) * 2;
+      var viewBox = "0 0 " + diameter + " " + diameter;
       var roundValue = toNumber(value) > ONE_HUNDRED ? ONE_HUNDRED : Math.round(toNumber(value));
-      var radius = (toPxNum(size) - toPxNum(lineWidth)) / 2;
-      var perimeter = 2 * Math.PI * radius;
-      var strokeDasharray = roundValue / ONE_HUNDRED * perimeter + ", " + perimeter;
+      var strokeOffset = "" + (ONE_HUNDRED - roundValue) / ONE_HUNDRED * CIRCUMFERENCE;
+      var strokeWidth = toPxNum(lineWidth) / toPxNum(size) * diameter;
       return {
+        strokeWidth,
         viewBox,
-        radius,
-        strokeDasharray,
-        perimeter,
+        strokeOffset,
         roundValue: roundValue + "%"
       };
     });
@@ -117,8 +133,9 @@ var __sfc__ = defineComponent({
       n,
       classes,
       toSizeUnit,
-      multiplySizeUnit,
       linearProps,
+      CIRCUMFERENCE,
+      RADIUS,
       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-label-color: #555; --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; color: var(--progress-label-color);}@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%); color: var(--progress-label-color);}
+:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-label-color: #555; --progress-background: var(--color-primary); --progress-default-color: #f5f5f5; --progress-primary-color: var(--color-primary); --progress-danger-color: var(--color-danger); --progress-success-color: var(--color-success); --progress-warning-color: var(--color-warning); --progress-info-color: var(--color-info);}.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; color: var(--progress-label-color);}.var-progress__linear-indeterminate div { bottom: 0; height: inherit; left: 0; position: absolute; right: auto; top: 0; width: auto; will-change: left, right;}.var-progress__linear-indeterminate div:first-child { animation: progress-linear-long 2.2s infinite;}.var-progress__linear-indeterminate div:last-child { animation: progress-linear-short 2.2s infinite;}.var-progress__linear--success { background-color: var(--progress-success-color);}.var-progress__linear--default { background-color: var(--progress-default-color);}.var-progress__linear--primary { background-color: var(--progress-primary-color);}.var-progress__linear--warning { background-color: var(--progress-warning-color);}.var-progress__linear--danger { background-color: var(--progress-danger-color);}.var-progress__linear--info { background-color: var(--progress-info-color);}@keyframes progress-linear-long { 0% { left: -90%; right: 100%; } 60% { left: -90%; right: 100%; } 100% { left: 100%; right: -35%; }}@keyframes progress-linear-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; }}@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); z-index: 1;}.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%); color: var(--progress-label-color);}.var-progress__circle--success { stroke: var(--progress-success-color);}.var-progress__circle--default { stroke: var(--progress-default-color);}.var-progress__circle--primary { stroke: var(--progress-primary-color);}.var-progress__circle--warning { stroke: var(--progress-warning-color);}.var-progress__circle--danger { stroke: var(--progress-danger-color);}.var-progress__circle--info { stroke: var(--progress-info-color);}.var-progress__circle-indeterminate svg { animation: progress-circle-rotate 1.4s linear infinite; transform-origin: center center; transition: all 0.2s ease-in-out; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;}.var-progress__circle-overlay { animation: progress-circle-dash 1.4s ease-in-out infinite, progress-circle-rotate 1.4s linear infinite; stroke-dasharray: 25, 200; stroke-dashoffset: 0; stroke-linecap: round; transform-origin: center center; transform: rotate(-90deg); z-index: 2;}@keyframes progress-circle-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -124px; }}@keyframes progress-circle-rotate { 100% { transform: rotate(270deg); }}

package/es/progress/props.mjs

@@ -1,6 +1,9 @@
 function modeValidator(mode) {
   return ['linear', 'circle'].includes(mode);
 }
+function typeValidator(type) {
+  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
+}
 export var props = {
   mode: {
     type: String,
@@ -43,5 +46,14 @@ export var props = {
   track: {
     type: Boolean,
     default: true
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'primary',
+    validator: typeValidator
   }
 };

package/es/pull-refresh/PullRefresh.mjs

@@ -4,7 +4,7 @@ import VarIcon from '../icon/index.mjs';
 import { defineComponent, ref, computed, watch, nextTick } from 'vue';
 import { getParentScroller, getScrollTop, getTarget, getRect } from '../utils/elements.mjs';
 import { props } from './props.mjs';
-import { isString, toNumber } from '@varlet/shared';
+import { isNumber, isString, toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
 import { useEventListener, onSmartMounted } from '@varlet/use';
 var {
@@ -97,7 +97,7 @@ var __sfc__ = defineComponent({
       eventTargetScroller = getParentScroller(event.target);
     };
     var touchMove = event => {
-      if (!isTouchable.value) {
+      if (!isTouchable.value || !eventTargetScroller) {
         return;
       }
       if (eventTargetScroller !== scroller && getScrollTop(eventTargetScroller) > 0) {
@@ -117,7 +117,7 @@ var __sfc__ = defineComponent({
         refreshStatus.value = 'pulling';
         startPosition.value = event.touches[0].clientY;
       }
-      if (isReachTop && distance.value > controlPosition.value) {
+      if (isReachTop && isNumber(distance.value) && distance.value > controlPosition.value) {
         lockEvent('add');
       }
       var moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
@@ -130,7 +130,7 @@ var __sfc__ = defineComponent({
           return;
         }
         isEnd.value = true;
-        if (distance.value >= maxDistance.value * 0.2) {
+        if (toNumber(distance.value) >= maxDistance.value * 0.2) {
           yield startIconTransition('refresh');
           refreshStatus.value = 'loading';
           distance.value = maxDistance.value * 0.3;

package/es/step/Step.mjs

@@ -2,6 +2,7 @@ import { computed, defineComponent } from 'vue';
 import { props } from './props.mjs';
 import { useSteps } from './provide.mjs';
 import VarIcon from '../icon/index.mjs';
+import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../utils/components.mjs';
 var {
   n,
@@ -71,7 +72,7 @@ var __sfc__ = defineComponent({
       clickStep
     } = steps;
     var isCurrent = computed(() => active.value === index.value);
-    var isActive = computed(() => index.value !== -1 && active.value > index.value);
+    var isActive = computed(() => index.value !== -1 && toNumber(active.value) > index.value);
     var stepProvider = {
       index
     };