@varlet/ui 3.2.3 → 3.2.5

package/es/progress/Progress.mjs

@@ -1,195 +1,195 @@
 import { defineComponent, computed } from "vue";
 import { props } from "./props.mjs";
-import { isPlainObject, toNumber } from "@varlet/shared";
+import { isPlainObject, toNumber, clamp } from "@varlet/shared";
 import { useId } from "@varlet/use";
 import { toSizeUnit, toPxNum } from "../utils/elements.mjs";
 import { createNamespace } from "../utils/components.mjs";
-const ONE_HUNDRED = 100;
+const MAX = 100;
+const MIN = 0;
 const RADIUS = 20;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const { name, n, classes } = createNamespace("progress");
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, renderList as _renderList, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["viewBox"];
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = ["id"];
-const _hoisted_4 = ["offset", "stop-color"];
-const _hoisted_5 = ["d", "stroke-width", "stroke-dasharray"];
-const _hoisted_6 = ["d", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
+const _hoisted_1 = ["aria-valuenow"];
+const _hoisted_2 = ["viewBox"];
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["id"];
+const _hoisted_5 = ["offset", "stop-color"];
+const _hoisted_6 = ["d", "stroke-width", "stroke-dasharray"];
+const _hoisted_7 = ["d", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
 function __render__(_ctx, _cache) {
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.n())
-    },
-    [
-      _ctx.mode === "linear" ? (_openBlock(), _createElementBlock(
-        "div",
-        {
-          key: 0,
-          class: _normalizeClass(_ctx.n("linear"))
-        },
-        [
-          _createElementVNode(
-            "div",
-            {
-              class: _normalizeClass(_ctx.classes(_ctx.n("linear-block"), [_ctx.track, _ctx.n("linear-background")])),
-              style: _normalizeStyle({ height: _ctx.toSizeUnit(_ctx.lineWidth), background: _ctx.trackColor })
-            },
-            [
-              _ctx.indeterminate ? (_openBlock(), _createElementBlock(
-                "div",
-                {
-                  key: 0,
-                  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.progressColor })
-                    },
-                    null,
-                    6
-                    /* CLASS, STYLE */
-                  ),
-                  _createElementVNode(
-                    "div",
-                    {
-                      class: _normalizeClass(_ctx.classes(_ctx.n(`linear--${_ctx.type}`))),
-                      style: _normalizeStyle({ background: _ctx.progressColor })
-                    },
-                    null,
-                    6
-                    /* CLASS, STYLE */
-                  )
-                ],
-                2
-                /* CLASS */
-              )) : (_openBlock(), _createElementBlock(
-                "div",
-                {
-                  key: 1,
-                  class: _normalizeClass(_ctx.classes(_ctx.n("linear-certain"), _ctx.n(`linear--${_ctx.type}`))),
-                  style: _normalizeStyle({ background: _ctx.progressColor, width: _ctx.linearProps.width })
-                },
-                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.classes(_ctx.n("circle"), [_ctx.indeterminate, _ctx.n("circle-indeterminate")])),
-          style: _normalizeStyle({ width: _ctx.toSizeUnit(_ctx.size), height: _ctx.toSizeUnit(_ctx.size) })
-        },
-        [
-          (_openBlock(), _createElementBlock("svg", {
-            class: _normalizeClass(_ctx.n("circle-svg")),
-            viewBox: _ctx.circleProps.viewBox
-          }, [
-            _ctx.isPlainObject(_ctx.color) ? (_openBlock(), _createElementBlock("defs", _hoisted_2, [
-              _createElementVNode("linearGradient", {
-                id: _ctx.id,
-                x1: "100%",
-                y1: "0%",
-                x2: "0%",
-                y2: "0%"
-              }, [
-                (_openBlock(true), _createElementBlock(
-                  _Fragment,
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n()),
+    role: "progressbar",
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "aria-valuenow": _ctx.indeterminate ? void 0 : _ctx.mode === "linear" ? _ctx.linearProps.value : _ctx.circleProps.value
+  }, [
+    _ctx.mode === "linear" ? (_openBlock(), _createElementBlock(
+      "div",
+      {
+        key: 0,
+        class: _normalizeClass(_ctx.n("linear"))
+      },
+      [
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.classes(_ctx.n("linear-block"), [_ctx.track, _ctx.n("linear-background")])),
+            style: _normalizeStyle({ height: _ctx.toSizeUnit(_ctx.lineWidth), background: _ctx.trackColor })
+          },
+          [
+            _ctx.indeterminate ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.n("linear-indeterminate"))
+              },
+              [
+                _createElementVNode(
+                  "div",
+                  {
+                    class: _normalizeClass(_ctx.classes(_ctx.n(`linear--${_ctx.type}`))),
+                    style: _normalizeStyle({ background: _ctx.progressColor })
+                  },
+                  null,
+                  6
+                  /* CLASS, STYLE */
+                ),
+                _createElementVNode(
+                  "div",
+                  {
+                    class: _normalizeClass(_ctx.classes(_ctx.n(`linear--${_ctx.type}`))),
+                    style: _normalizeStyle({ background: _ctx.progressColor })
+                  },
                   null,
-                  _renderList(_ctx.linearGradientProgress, (progress, idx) => {
-                    return _openBlock(), _createElementBlock("stop", {
-                      key: idx,
-                      offset: progress,
-                      "stop-color": _ctx.color[progress]
-                    }, null, 8, _hoisted_4);
-                  }),
-                  128
-                  /* KEYED_FRAGMENT */
-                ))
-              ], 8, _hoisted_3)
-            ])) : _createCommentVNode("v-if", true),
-            _ctx.track ? (_openBlock(), _createElementBlock("path", {
-              key: 1,
-              class: _normalizeClass(_ctx.n("circle-background")),
-              d: _ctx.circleProps.path,
-              fill: "transparent",
-              "stroke-width": _ctx.circleProps.strokeWidth,
-              "stroke-dasharray": _ctx.CIRCUMFERENCE,
-              style: _normalizeStyle({
-                stroke: _ctx.trackColor
-              })
-            }, null, 14, _hoisted_5)) : _createCommentVNode("v-if", true),
-            _createElementVNode("path", {
-              class: _normalizeClass(_ctx.classes(_ctx.n("circle-certain"), _ctx.n(`circle--${_ctx.type}`), [_ctx.indeterminate, _ctx.n("circle-overlay")])),
-              d: _ctx.circleProps.path,
-              fill: "transparent",
-              "stroke-width": _ctx.circleProps.strokeWidth,
-              "stroke-dasharray": _ctx.CIRCUMFERENCE,
-              "stroke-dashoffset": _ctx.circleProps.strokeOffset,
-              style: _normalizeStyle({
-                stroke: _ctx.progressColor,
-                transform: `rotateZ(${_ctx.rotate}deg)`,
-                transformOrigin: "50% 50%"
-              })
-            }, null, 14, _hoisted_6)
-          ], 10, _hoisted_1)),
-          _ctx.label ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(_ctx.classes(_ctx.n("circle-label"), [_ctx.labelClass, _ctx.labelClass]))
-            },
-            [
-              _renderSlot(_ctx.$slots, "default", {}, () => [
-                _createTextVNode(
-                  _toDisplayString(_ctx.circleProps.roundValue),
-                  1
-                  /* TEXT */
+                  6
+                  /* CLASS, STYLE */
                 )
-              ])
-            ],
-            2
-            /* CLASS */
-          )) : _createCommentVNode("v-if", true)
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : _createCommentVNode("v-if", true)
-    ],
-    2
-    /* CLASS */
-  );
+              ],
+              2
+              /* CLASS */
+            )) : (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 1,
+                class: _normalizeClass(_ctx.classes(_ctx.n("linear-certain"), _ctx.n(`linear--${_ctx.type}`))),
+                style: _normalizeStyle({ background: _ctx.progressColor, width: _ctx.linearProps.width })
+              },
+              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.classes(_ctx.n("circle"), [_ctx.indeterminate, _ctx.n("circle-indeterminate")])),
+        style: _normalizeStyle({ width: _ctx.toSizeUnit(_ctx.size), height: _ctx.toSizeUnit(_ctx.size) })
+      },
+      [
+        (_openBlock(), _createElementBlock("svg", {
+          class: _normalizeClass(_ctx.n("circle-svg")),
+          viewBox: _ctx.circleProps.viewBox
+        }, [
+          _ctx.isPlainObject(_ctx.color) ? (_openBlock(), _createElementBlock("defs", _hoisted_3, [
+            _createElementVNode("linearGradient", {
+              id: _ctx.id,
+              x1: "100%",
+              y1: "0%",
+              x2: "0%",
+              y2: "0%"
+            }, [
+              (_openBlock(true), _createElementBlock(
+                _Fragment,
+                null,
+                _renderList(_ctx.linearGradientProgress, (progress, idx) => {
+                  return _openBlock(), _createElementBlock("stop", {
+                    key: idx,
+                    offset: progress,
+                    "stop-color": _ctx.color[progress]
+                  }, null, 8, _hoisted_5);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ], 8, _hoisted_4)
+          ])) : _createCommentVNode("v-if", true),
+          _ctx.track ? (_openBlock(), _createElementBlock("path", {
+            key: 1,
+            class: _normalizeClass(_ctx.n("circle-background")),
+            d: _ctx.circleProps.path,
+            fill: "transparent",
+            "stroke-width": _ctx.circleProps.strokeWidth,
+            "stroke-dasharray": _ctx.CIRCUMFERENCE,
+            style: _normalizeStyle({
+              stroke: _ctx.trackColor
+            })
+          }, null, 14, _hoisted_6)) : _createCommentVNode("v-if", true),
+          _createElementVNode("path", {
+            class: _normalizeClass(_ctx.classes(_ctx.n("circle-certain"), _ctx.n(`circle--${_ctx.type}`), [_ctx.indeterminate, _ctx.n("circle-overlay")])),
+            d: _ctx.circleProps.path,
+            fill: "transparent",
+            "stroke-width": _ctx.circleProps.strokeWidth,
+            "stroke-dasharray": _ctx.CIRCUMFERENCE,
+            "stroke-dashoffset": _ctx.circleProps.strokeOffset,
+            style: _normalizeStyle({
+              stroke: _ctx.progressColor,
+              transform: `rotateZ(${_ctx.rotate}deg)`,
+              transformOrigin: "50% 50%"
+            })
+          }, null, 14, _hoisted_7)
+        ], 10, _hoisted_2)),
+        _ctx.label ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: _normalizeClass(_ctx.classes(_ctx.n("circle-label"), _ctx.labelClass))
+          },
+          [
+            _renderSlot(_ctx.$slots, "default", {}, () => [
+              _createTextVNode(
+                _toDisplayString(_ctx.circleProps.roundValue),
+                1
+                /* TEXT */
+              )
+            ])
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true)
+      ],
+      6
+      /* CLASS, STYLE */
+    )) : _createCommentVNode("v-if", true)
+  ], 10, _hoisted_1);
 }
 const __sfc__ = defineComponent({
   name,
@@ -198,19 +198,20 @@ const __sfc__ = defineComponent({
     const id = useId();
     const linearProps = computed(() => {
       const value = toNumber(props2.value);
-      const width = value > ONE_HUNDRED ? ONE_HUNDRED : value;
-      const roundValue = value > ONE_HUNDRED ? ONE_HUNDRED : Math.round(value);
+      const width = clamp(value, MIN, MAX);
+      const roundValue = clamp(Math.round(value), MIN, MAX);
       return {
         width: `${width}%`,
-        roundValue: `${roundValue}%`
+        roundValue: `${roundValue}%`,
+        value: width
       };
     });
     const circleProps = computed(() => {
       const { size, lineWidth, value } = props2;
       const diameter = RADIUS / (1 - toPxNum(lineWidth) / toPxNum(size)) * 2;
       const viewBox = `0 0 ${diameter} ${diameter}`;
-      const roundValue = toNumber(value) > ONE_HUNDRED ? ONE_HUNDRED : Math.round(toNumber(value));
-      const strokeOffset = `${(ONE_HUNDRED - roundValue) / ONE_HUNDRED * CIRCUMFERENCE}`;
+      const roundValue = clamp(Math.round(toNumber(value)), MIN, MAX);
+      const strokeOffset = `${(MAX - roundValue) / MAX * CIRCUMFERENCE}`;
       const strokeWidth = toPxNum(lineWidth) / toPxNum(size) * diameter;
       const beginPositionX = 0;
       const beginPositionY = -RADIUS;
@@ -223,7 +224,8 @@ const __sfc__ = defineComponent({
         viewBox,
         strokeOffset,
         roundValue: `${roundValue}%`,
-        path
+        path,
+        value: clamp(toNumber(value), MIN, MAX)
       };
     });
     const progressColor = computed(() => {

package/es/slider/Slider.mjs

@@ -6,13 +6,13 @@ import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useForm } from "../form/provide.mjs";
 import { getLeft, toSizeUnit } from "../utils/elements.mjs";
 import { warn } from "../utils/logger.mjs";
-import { isArray, isNumber, toNumber, getRect, preventDefault, call, hasOwn } from "@varlet/shared";
+import { isArray, isNumber, toNumber, getRect, preventDefault, call, hasOwn, clamp } from "@varlet/shared";
 import { props, Thumbs } from "./props.mjs";
 import { onSmartMounted, onWindowResize, useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("slider");
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, resolveDirective as _resolveDirective, withDirectives as _withDirectives, resolveComponent as _resolveComponent, createVNode as _createVNode, toDisplayString as _toDisplayString, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["tabindex", "onTouchstart", "onFocusin", "onFocusout"];
+const _hoisted_1 = ["tabindex", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-disabled", "aria-valuetext", "onTouchstart", "onFocusin", "onFocusout"];
 function __render__(_ctx, _cache) {
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _component_var_form_details = _resolveComponent("var-form-details");
@@ -28,7 +28,7 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.classes(_ctx.n(`${_ctx.direction}-block`), [_ctx.isDisabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n(`${_ctx.direction}--error`)])),
           ref: "sliderEl",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args))
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
         },
         [
           _createElementVNode(
@@ -74,6 +74,12 @@ function __render__(_ctx, _cache) {
                 key: item.enumValue,
                 style: _normalizeStyle(_ctx.thumbStyle(item)),
                 tabindex: _ctx.isDisabled ? void 0 : "0",
+                role: "slider",
+                "aria-valuemin": _ctx.min,
+                "aria-valuemax": _ctx.max,
+                "aria-valuenow": item.value,
+                "aria-disabled": _ctx.isDisabled,
+                "aria-valuetext": `${item.text}`,
                 onTouchstart: _withModifiers(($event) => _ctx.start($event, item.enumValue), ["stop"]),
                 onFocusin: ($event) => _ctx.handleFocus(item),
                 onFocusout: ($event) => _ctx.handleBlur(item)
@@ -330,13 +336,7 @@ const __sfc__ = defineComponent({
       if (!isNumber(value)) {
         return 0;
       }
-      let num = value;
-      if (num < Number(props2.min)) {
-        num = Number(props2.min);
-      }
-      if (num > Number(props2.max)) {
-        num = Number(props2.max);
-      }
+      const num = clamp(value, toNumber(props2.min), toNumber(props2.max));
       const isInteger = parseInt(`${num}`, 10) === num;
       return isInteger ? num : toNumber(num.toPrecision(5));
     }
@@ -435,11 +435,13 @@ const __sfc__ = defineComponent({
       call(onEnd, range ? rangeValue : curValue);
       isScroll.value = false;
     }
-    function click(event) {
-      if (isDisabled.value || isReadonly.value)
+    function handleClick(event) {
+      if (isDisabled.value || isReadonly.value) {
         return;
-      if (event.target.closest(`.${n("thumb")}`))
+      }
+      if (event.target.closest(`.${n("thumb")}`)) {
         return;
+      }
       const offset = getOffset(event);
       const type = getType(offset);
       activeThumb = type;
@@ -447,13 +449,8 @@ const __sfc__ = defineComponent({
       end();
     }
     function stepValidator() {
-      const stepNumber = toNumber(props2.step);
-      if (isNaN(stepNumber)) {
-        warn("Slider", 'type of prop "step" should be Number');
-        return false;
-      }
-      if (stepNumber < 0) {
-        warn("Slider", '"step" should be > 0');
+      if (toNumber(props2.step) <= 0) {
+        warn("[Varlet] Slider", '"step" should be > 0');
         return false;
       }
       return true;
@@ -500,7 +497,7 @@ const __sfc__ = defineComponent({
       resetValidation();
     }
     function moveFocusingThumb(offset, value) {
-      const stepValue = Number(props2.step);
+      const stepValue = toNumber(props2.step);
       if (isArray(value)) {
         const updatedFirstValue = value[0] + (focusingFirst.value ? offset * stepValue : 0);
         const updatedSecondValue = value[1] + (focusingSecond.value ? offset * stepValue : 0);
@@ -540,7 +537,6 @@ const __sfc__ = defineComponent({
       item.handleFocusing(false);
     }
     return {
-      Thumbs,
       sliderEl,
       getFillStyle,
       isDisabled,
@@ -560,7 +556,7 @@ const __sfc__ = defineComponent({
       start,
       move,
       end,
-      click
+      handleClick
     };
   }
 });