@varlet/ui 3.11.1 → 3.11.2

package/es/checkbox/Checkbox.mjs

@@ -12,7 +12,7 @@ import { props } from "./props.mjs";
 import { useCheckboxGroup } from "./provide.mjs";
 const { name, n, classes } = createNamespace("checkbox");
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
-const _hoisted_1 = ["tabindex"];
+const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -25,15 +25,20 @@ function __render__(_ctx, _cache) {
       class: _normalizeClass(_ctx.n("wrap"))
     },
     [
-      _createElementVNode(
-        "div",
-        {
-          class: _normalizeClass(_ctx.n()),
-          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-        },
-        [
-          _withDirectives((_openBlock(), _createElementBlock("div", {
-            ref: "action",
+      _createElementVNode("div", {
+        ref: "checkbox",
+        role: "checkbox",
+        "aria-checked": _ctx.isIndeterminate ? "mixed" : _ctx.checked,
+        "aria-disabled": _ctx.formDisabled || _ctx.disabled,
+        class: _normalizeClass(_ctx.n()),
+        tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+        onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = true),
+        onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = false),
+        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      }, [
+        _withDirectives((_openBlock(), _createElementBlock(
+          "div",
+          {
             class: _normalizeClass(
               _ctx.classes(
                 _ctx.n("action"),
@@ -42,11 +47,9 @@ function __render__(_ctx, _cache) {
                 [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
               )
             ),
-            style: _normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor }),
-            tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
-            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
-            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
-          }, [
+            style: _normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor })
+          },
+          [
             _ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "indeterminate-icon", { key: 0 }, () => [
               _createVNode(_component_var_icon, {
                 class: _normalizeClass(_ctx.n("icon")),
@@ -75,33 +78,33 @@ function __render__(_ctx, _cache) {
               hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
               focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
             }, null, 8, ["hovering", "focusing"])
-          ], 46, _hoisted_1)), [
-            [_directive_hover, _ctx.handleHovering, "desktop"],
-            [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
-          ]),
-          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(
-                _ctx.classes(
-                  _ctx.n("text"),
-                  [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
-                )
-              ),
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
-            },
-            [
-              _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
-            ],
-            2
-            /* CLASS */
-          )) : _createCommentVNode("v-if", true)
-        ],
-        2
-        /* CLASS */
-      ),
+          ],
+          6
+          /* CLASS, STYLE */
+        )), [
+          [_directive_hover, _ctx.handleHovering, "desktop"],
+          [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
+        ]),
+        _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("text"),
+                [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+              )
+            ),
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
+          },
+          [
+            _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true)
+      ], 42, _hoisted_1),
       _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
     ],
     2
@@ -118,7 +121,7 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
-    const action = ref(null);
+    const checkbox = ref(null);
     const isFocusing = ref(false);
     const value = useVModel(props2, "modelValue");
     const isIndeterminate = useVModel(props2, "indeterminate");
@@ -181,7 +184,7 @@ const __sfc__ = defineComponent({
       change(checked.value ? uncheckedValue : checkedValue2);
     }
     function handleTextClick() {
-      action.value.focus();
+      checkbox.value.focus();
     }
     function sync(values) {
       const { checkedValue: checkedValue2, uncheckedValue } = props2;
@@ -208,7 +211,7 @@ const __sfc__ = defineComponent({
         preventDefault(event);
       }
       if (key === "Enter") {
-        action.value.click();
+        checkbox.value.click();
       }
     }
     function handleKeyup(event) {
@@ -217,14 +220,14 @@ const __sfc__ = defineComponent({
       }
       if (event.key === " ") {
         preventDefault(event);
-        action.value.click();
+        checkbox.value.click();
       }
     }
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
     return {
-      action,
+      checkbox,
       isFocusing,
       isIndeterminate,
       checked,

package/es/checkbox/checkbox.css

@@ -1 +1 @@
-:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}.var-checkbox { display: flex; align-items: center; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s; outline: none;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
+:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}.var-checkbox { display: flex; align-items: center; outline: none; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}

package/es/index.bundle.mjs

@@ -283,7 +283,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.11.1'
+const version = '3.11.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -188,7 +188,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.11.1'
+const version = '3.11.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu-select/MenuSelect.mjs

@@ -299,12 +299,12 @@ const __sfc__ = defineComponent({
       }
     }
     function getActiveElementParent(activeElement) {
-      var _a, _b, _c;
+      var _a, _b;
       if (activeElement.classList.contains("var-menu-option--children-trigger")) {
         return (_a = activeElement.parentNode) == null ? void 0 : _a.parentNode;
       }
-      if (activeElement.classList.contains("var-checkbox__action")) {
-        const optionElement = (_c = (_b = activeElement.parentNode) == null ? void 0 : _b.parentNode) == null ? void 0 : _c.parentNode;
+      if (activeElement.classList.contains("var-checkbox")) {
+        const optionElement = (_b = activeElement.parentNode) == null ? void 0 : _b.parentNode;
         if (optionElement) {
           return getActiveElementParent(optionElement);
         }

package/es/radio/Radio.mjs

@@ -12,8 +12,7 @@ import { props } from "./props.mjs";
 import { useRadioGroup } from "./provide.mjs";
 const { name, n, classes } = createNamespace("radio");
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
-const _hoisted_1 = ["aria-checked"];
-const _hoisted_2 = ["tabindex"];
+const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -27,47 +26,54 @@ function __render__(_ctx, _cache) {
     },
     [
       _createElementVNode("div", _mergeProps({
+        ref: "radio",
         role: "radio",
+        class: _ctx.n(),
         "aria-checked": _ctx.checked,
-        class: _ctx.n()
+        "aria-disabled": _ctx.formDisabled || _ctx.disabled
       }, _ctx.$attrs, {
-        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+        tabindex: _ctx.tabIndex,
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+        onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
+        onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false)
       }), [
-        _withDirectives((_openBlock(), _createElementBlock("div", {
-          ref: "action",
-          class: _normalizeClass(
-            _ctx.classes(
-              _ctx.n("action"),
-              [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
-              [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
-              [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
-            )
-          ),
-          tabindex: _ctx.tabIndex,
-          style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor }),
-          onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
-          onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
-        }, [
-          _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
-            _createVNode(_component_var_icon, {
-              class: _normalizeClass(_ctx.n("icon")),
-              "var-radio-cover": "",
-              name: "radio-marked",
-              size: _ctx.iconSize
-            }, null, 8, ["class", "size"])
-          ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
-            _createVNode(_component_var_icon, {
-              class: _normalizeClass(_ctx.n("icon")),
-              "var-radio-cover": "",
-              name: "radio-blank",
-              size: _ctx.iconSize
-            }, null, 8, ["class", "size"])
-          ]),
-          _createVNode(_component_var_hover_overlay, {
-            hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
-            focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
-          }, null, 8, ["hovering", "focusing"])
-        ], 46, _hoisted_2)), [
+        _withDirectives((_openBlock(), _createElementBlock(
+          "div",
+          {
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("action"),
+                [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
+                [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+              )
+            ),
+            style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor })
+          },
+          [
+            _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.n("icon")),
+                "var-radio-cover": "",
+                name: "radio-marked",
+                size: _ctx.iconSize
+              }, null, 8, ["class", "size"])
+            ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.n("icon")),
+                "var-radio-cover": "",
+                name: "radio-blank",
+                size: _ctx.iconSize
+              }, null, 8, ["class", "size"])
+            ]),
+            _createVNode(_component_var_hover_overlay, {
+              hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
+              focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
+            }, null, 8, ["hovering", "focusing"])
+          ],
+          6
+          /* CLASS, STYLE */
+        )), [
           [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
           [_directive_hover, _ctx.handleHovering, "desktop"]
         ]),
@@ -82,7 +88,7 @@ function __render__(_ctx, _cache) {
                 [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
               )
             ),
-            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
           },
           [
             _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
@@ -108,7 +114,7 @@ const __sfc__ = defineComponent({
   inheritAttrs: false,
   props,
   setup(props2) {
-    const action = ref();
+    const radio = ref();
     const isFocusing = ref(false);
     const value = useVModel(props2, "modelValue");
     const checked = computed(() => value.value === props2.checkedValue);
@@ -142,8 +148,8 @@ const __sfc__ = defineComponent({
       isFocusing: computed(() => isFocusing.value),
       // keyboard arrow move
       move() {
-        action.value.focus();
-        action.value.click();
+        radio.value.focus();
+        radio.value.click();
       },
       moveable() {
         return !(form == null ? void 0 : form.disabled.value) && !props2.disabled && !(form == null ? void 0 : form.readonly.value) && !props2.readonly;
@@ -162,7 +168,7 @@ const __sfc__ = defineComponent({
         preventDefault(event);
       }
       if (key === "Enter") {
-        action.value.click();
+        radio.value.click();
       }
     }
     function handleKeyup(event) {
@@ -171,7 +177,7 @@ const __sfc__ = defineComponent({
       }
       if (event.key === " ") {
         preventDefault(event);
-        action.value.click();
+        radio.value.click();
       }
     }
     function validateWithTrigger(trigger) {
@@ -202,7 +208,7 @@ const __sfc__ = defineComponent({
       change(checked.value ? uncheckedValue : checkedValue);
     }
     function handleTextClick() {
-      action.value.focus();
+      radio.value.focus();
     }
     function sync(v2) {
       const { checkedValue, uncheckedValue } = props2;
@@ -226,7 +232,7 @@ const __sfc__ = defineComponent({
       change(changedValue);
     }
     return {
-      action,
+      radio,
       isFocusing,
       checked,
       errorMessage,

package/es/radio/radio.css

@@ -1 +1 @@
-:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; outline: none; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'