@varlet/ui 3.7.4 → 3.8.0

package/es/menu-select/MenuChildren.mjs

@@ -0,0 +1,237 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import VarMenu from "../menu/Menu.mjs";
+import VarMenuOption from "../menu-option/MenuOption.mjs";
+import { defineComponent, ref, watch } from "vue";
+import { createNamespace, defineListenerProp, pickProps } from "../utils/components.mjs";
+import { props as menuSelectProps } from "./props.mjs";
+import { focusChildElementByKey } from "../utils/elements.mjs";
+import { call, raf } from "@varlet/shared";
+const { name, n } = createNamespace("menu-children");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, createSlots as _createSlots } from "vue";
+const _hoisted_1 = { ref: "menuOptions" };
+function __render__(_ctx, _cache) {
+  const _component_var_menu_option = _resolveComponent("var-menu-option");
+  const _component_var_menu_children = _resolveComponent("var-menu-children");
+  const _component_var_menu = _resolveComponent("var-menu");
+  return _openBlock(), _createBlock(_component_var_menu, {
+    ref: "menu",
+    trigger: "hover",
+    placement: "right-start",
+    "cascade-optimization": "",
+    "var-menu-children-cover": "",
+    class: _normalizeClass(_ctx.n()),
+    disabled: _ctx.disabled,
+    teleport: false,
+    "close-on-click-reference": false,
+    show: _ctx.show,
+    "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.show = $event)
+  }, _createSlots({
+    default: _withCtx(() => [
+      _createVNode(_component_var_menu_option, {
+        ref: "trigger",
+        "children-trigger": "",
+        label: _ctx.option[_ctx.labelKey],
+        value: _ctx.option[_ctx.valueKey],
+        option: _ctx.option,
+        ripple: _ctx.option.ripple,
+        disabled: _ctx.option.disabled,
+        highlight: _ctx.highlightOptions.some((_option) => _option.value === _ctx.option.value),
+        onKeyArrowX: _ctx.handleArrowRight,
+        onMouseenter: _ctx.handleMouseenter
+      }, null, 8, ["label", "value", "option", "ripple", "disabled", "highlight", "onKeyArrowX", "onMouseenter"])
+    ]),
+    _: 2
+    /* DYNAMIC */
+  }, [
+    _ctx.options.length ? {
+      name: "menu",
+      fn: _withCtx(() => [
+        _createElementVNode(
+          "div",
+          _hoisted_1,
+          [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.options, (option) => {
+                return _openBlock(), _createElementBlock(
+                  _Fragment,
+                  {
+                    key: option[_ctx.valueKey]
+                  },
+                  [
+                    option[_ctx.childrenKey] ? (_openBlock(), _createBlock(_component_var_menu_children, {
+                      key: 0,
+                      ref_for: true,
+                      ref: "menuChildren",
+                      "parent-show": _ctx.show,
+                      option,
+                      options: option[_ctx.childrenKey],
+                      "highlight-options": _ctx.highlightOptions,
+                      disabled: option.disabled,
+                      onKeyArrowX: _ctx.handleArrowLeft,
+                      onKeyArrowRightOpen: ($event) => _ctx.allowChildrenClose(option),
+                      onMouseenter: ($event) => _ctx.allowChildrenClose(option)
+                    }, null, 8, ["parent-show", "option", "options", "highlight-options", "disabled", "onKeyArrowX", "onKeyArrowRightOpen", "onMouseenter"])) : (_openBlock(), _createBlock(_component_var_menu_option, {
+                      key: 1,
+                      label: option[_ctx.labelKey],
+                      value: option[_ctx.valueKey],
+                      option,
+                      ripple: option.ripple,
+                      disabled: option.disabled,
+                      onKeyArrowX: _ctx.handleArrowLeft,
+                      onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.allowChildrenClose())
+                    }, null, 8, ["label", "value", "option", "ripple", "disabled", "onKeyArrowX"]))
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          512
+          /* NEED_PATCH */
+        )
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["class", "disabled", "show"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarMenu,
+    VarMenuOption
+  },
+  props: __spreadValues({
+    parentShow: Boolean,
+    disabled: Boolean,
+    option: {
+      type: Object,
+      required: true
+    },
+    highlightOptions: pickProps(menuSelectProps, "options"),
+    onKeyArrowX: defineListenerProp(),
+    onKeyArrowRightOpen: defineListenerProp(),
+    onMouseenter: defineListenerProp()
+  }, pickProps(menuSelectProps, ["options", "valueKey", "labelKey", "childrenKey"])),
+  setup(props) {
+    const show = ref(false);
+    const menu = ref();
+    const trigger = ref();
+    const menuOptions = ref();
+    const menuChildren = ref();
+    watch(
+      () => props.parentShow,
+      (value) => {
+        if (!value) {
+          show.value = false;
+        }
+      },
+      { immediate: true }
+    );
+    function handleArrowRight(key) {
+      return __async(this, null, function* () {
+        var _a;
+        call(props.onKeyArrowX, key);
+        if (key !== "ArrowRight") {
+          return;
+        }
+        call(props.onKeyArrowRightOpen);
+        (_a = menu.value) == null ? void 0 : _a.open();
+        yield raf();
+        focusChildElementByKey(menu.value.$el, menuOptions.value, "ArrowDown");
+      });
+    }
+    function handleArrowLeft(key) {
+      var _a;
+      if (key !== "ArrowLeft") {
+        return;
+      }
+      allowClose();
+      close();
+      (_a = trigger.value) == null ? void 0 : _a.$el.focus();
+    }
+    function close() {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.close();
+    }
+    function allowClose() {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.allowClose();
+    }
+    function allowChildrenClose(option) {
+      var _a;
+      (_a = menuChildren.value) == null ? void 0 : _a.forEach((child) => {
+        child.allowClose();
+        if (option == null) {
+          child.close();
+          return;
+        }
+        if (child.option.value === option.value) {
+          return;
+        }
+        child.close();
+      });
+    }
+    function handleMouseenter() {
+      call(props.onMouseenter);
+    }
+    return {
+      show,
+      menu,
+      trigger,
+      menuOptions,
+      menuChildren,
+      n,
+      close,
+      handleArrowLeft,
+      handleArrowRight,
+      handleMouseenter,
+      allowClose,
+      allowChildrenClose
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/menu-select/MenuSelect.mjs

@@ -1,5 +1,25 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import VarMenu from "../menu/index.mjs";
 import VarMenuOption from "../menu-option/index.mjs";
+import VarMenuChildren from "./MenuChildren.mjs";
 import { defineComponent, computed, ref } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
@@ -9,8 +29,9 @@ import { call, preventDefault } from "@varlet/shared";
 import { useEventListener, useVModel } from "@varlet/use";
 import { focusChildElementByKey } from "../utils/elements.mjs";
 const { name, n, classes } = createNamespace("menu-select");
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, withCtx as _withCtx } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, withCtx as _withCtx } from "vue";
 function __render__(_ctx, _cache) {
+  const _component_var_menu_children = _resolveComponent("var-menu-children");
   const _component_var_menu_option = _resolveComponent("var-menu-option");
   const _component_var_menu = _resolveComponent("var-menu");
   return _openBlock(), _createBlock(_component_var_menu, {
@@ -32,7 +53,7 @@ function __render__(_ctx, _cache) {
     "close-on-click-reference": _ctx.closeOnClickReference,
     "close-on-key-escape": false,
     show: _ctx.show,
-    "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
+    "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
     onOpened: _ctx.onOpened,
     onClose: _ctx.onClose,
@@ -47,22 +68,44 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
         },
         [
-          _ctx.options.length ? (_openBlock(true), _createElementBlock(
+          (_openBlock(true), _createElementBlock(
             _Fragment,
-            { key: 0 },
+            null,
             _renderList(_ctx.options, (option) => {
-              return _openBlock(), _createBlock(_component_var_menu_option, {
-                key: option[_ctx.valueKey],
-                label: option[_ctx.labelKey],
-                value: option[_ctx.valueKey],
-                option,
-                ripple: option.ripple,
-                disabled: option.disabled
-              }, null, 8, ["label", "value", "option", "ripple", "disabled"]);
+              return _openBlock(), _createElementBlock(
+                _Fragment,
+                {
+                  key: option[_ctx.valueKey]
+                },
+                [
+                  option[_ctx.childrenKey] ? (_openBlock(), _createBlock(_component_var_menu_children, {
+                    key: 0,
+                    ref_for: true,
+                    ref: "menuChildren",
+                    "parent-show": _ctx.show,
+                    option,
+                    options: option[_ctx.childrenKey],
+                    "highlight-options": _ctx.highlightOptions,
+                    disabled: option.disabled,
+                    onKeyArrowRightOpen: ($event) => _ctx.allowChildrenClose(option),
+                    onMouseenter: ($event) => _ctx.allowChildrenClose(option)
+                  }, null, 8, ["parent-show", "option", "options", "highlight-options", "disabled", "onKeyArrowRightOpen", "onMouseenter"])) : (_openBlock(), _createBlock(_component_var_menu_option, {
+                    key: 1,
+                    label: option[_ctx.labelKey],
+                    value: option[_ctx.valueKey],
+                    option,
+                    ripple: option.ripple,
+                    disabled: option.disabled,
+                    onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.allowChildrenClose())
+                  }, null, 8, ["label", "value", "option", "ripple", "disabled"]))
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              );
             }),
             128
             /* KEYED_FRAGMENT */
-          )) : _createCommentVNode("v-if", true),
+          )),
           _renderSlot(_ctx.$slots, "options")
         ],
         2
@@ -78,18 +121,44 @@ function __render__(_ctx, _cache) {
 }
 const __sfc__ = defineComponent({
   name,
-  components: { VarMenu, VarMenuOption },
+  components: { VarMenu, VarMenuOption, VarMenuChildren },
   props,
   setup(props2) {
-    const menu = ref(null);
-    const menuOptionsRef = ref(null);
     const show = useVModel(props2, "show");
+    const menu = ref();
+    const menuOptionsRef = ref();
+    const menuChildren = ref();
+    const enhancedOptions = computed(() => enhance(props2.options));
     const { menuOptions, length, bindMenuOptions } = useMenuOptions();
-    const { computeLabel, getSelectedValue } = useSelectController({
+    const { computeLabel, getSelectedValue, getOptionProviderKey } = useSelectController({
       modelValue: () => props2.modelValue,
       multiple: () => props2.multiple,
       optionProviders: () => menuOptions,
-      optionProvidersLength: () => length.value
+      optionProvidersLength: () => length.value,
+      optionIsIndeterminate(optionProvider) {
+        var _a;
+        const enhancedOption = getEnhancedOption(optionProvider.value.value);
+        if (!enhancedOption) {
+          return false;
+        }
+        const children = ((_a = enhancedOption._children) != null ? _a : []).filter((option) => !option.disabled);
+        const selectedChildren = children.filter((option) => props2.modelValue.includes(option.value));
+        return selectedChildren.length > 0 && selectedChildren.length < children.length;
+      }
+    });
+    const highlightOptions = computed(() => {
+      const { multiple, modelValue } = props2;
+      if (multiple) {
+        return [];
+      }
+      const selectedOption = enhancedOptions.value.find((option) => option.value === modelValue);
+      const highlightOptions2 = [];
+      let parent = selectedOption == null ? void 0 : selectedOption._parent;
+      while (parent) {
+        highlightOptions2.push(parent);
+        parent = parent._parent;
+      }
+      return highlightOptions2;
     });
     const menuSelectProvider = {
       size: computed(() => props2.size),
@@ -99,14 +168,108 @@ const __sfc__ = defineComponent({
     };
     bindMenuOptions(menuSelectProvider);
     useEventListener(() => window, "keydown", handleKeydown);
-    function onSelect(option) {
+    function getEnhancedOption(value) {
+      return enhancedOptions.value.find((option) => option.value === value);
+    }
+    function getOptionProvider(value) {
+      return menuOptions.find((optionProvider) => optionProvider.value.value === value);
+    }
+    function getOptionChildren(option) {
+      return option[props2.childrenKey];
+    }
+    function flatten(options) {
+      const flattenOptions = [];
+      baseFlatten(options);
+      function baseFlatten(options2) {
+        options2.forEach((option) => {
+          flattenOptions.push(option);
+          const children = getOptionChildren(option);
+          if (children) {
+            baseFlatten(children);
+          }
+        });
+      }
+      return flattenOptions;
+    }
+    function enhance(options) {
+      function baseEnhance(options2, parent) {
+        return options2.map((option) => {
+          option = __spreadProps(__spreadValues({}, option), { _rawOption: option });
+          if (parent) {
+            option._parent = parent;
+          }
+          const children = getOptionChildren(option);
+          if (children) {
+            const enhancedChildren = baseEnhance(children, option);
+            option[props2.childrenKey] = enhancedChildren;
+            option._children = flatten(enhancedChildren);
+          }
+          return option;
+        });
+      }
+      return flatten(baseEnhance(options));
+    }
+    function onSelect(optionProvider) {
+      var _a, _b;
       const { multiple, closeOnSelect } = props2;
-      call(props2["onUpdate:modelValue"], getSelectedValue(option));
+      const { value, label, selected, disabled, ripple } = optionProvider;
+      const enhancedOption = getEnhancedOption(value.value);
+      if (enhancedOption) {
+        const childrenValues = ((_a = enhancedOption._children) != null ? _a : []).filter((option) => !option.disabled).map((option) => option.value);
+        if (multiple && selected.value) {
+          menuOptions.forEach((optionProvider2) => {
+            if (childrenValues.includes(optionProvider2.value.value)) {
+              optionProvider2.sync(true, false);
+            }
+          });
+          broadcastParentOption(enhancedOption);
+        }
+        if (multiple && !selected.value) {
+          menuOptions.forEach((optionProvider2) => {
+            if (childrenValues.includes(optionProvider2.value.value)) {
+              optionProvider2.sync(false, false);
+            }
+          });
+          broadcastParentOption(enhancedOption);
+        }
+      }
+      const selectedValue = getSelectedValue(optionProvider);
+      const selectedOption = (_b = enhancedOption == null ? void 0 : enhancedOption._rawOption) != null ? _b : {
+        value: value.value,
+        label: label.value,
+        disabled: disabled.value,
+        ripple: ripple.value
+      };
+      call(props2.onSelect, getOptionProviderKey(optionProvider), selectedOption);
+      call(props2["onUpdate:modelValue"], selectedValue);
       if (!multiple && closeOnSelect) {
         menu.value.$el.focus();
         close();
       }
     }
+    function broadcastParentOption(enhancedOption) {
+      let parentOption = enhancedOption._parent;
+      while (parentOption) {
+        const parentOptionProvider = getOptionProvider(parentOption.value);
+        const parentOptionChildren = getOptionChildren(parentOption).filter((option) => !option.disabled);
+        const isAllChildrenUnselected = parentOptionChildren.every((option) => {
+          const optionProvider = getOptionProvider(option.value);
+          return !optionProvider.selected.value;
+        });
+        const isAllChildrenSelected = parentOptionChildren.every((option) => {
+          const optionProvider = getOptionProvider(option.value);
+          return optionProvider.selected.value;
+        });
+        if (isAllChildrenUnselected) {
+          parentOptionProvider.sync(false, false);
+        } else if (isAllChildrenSelected) {
+          parentOptionProvider.sync(true, false);
+        } else {
+          parentOptionProvider.sync(false, true);
+        }
+        parentOption = parentOption._parent;
+      }
+    }
     function handleKeydown(event) {
       if (props2.disabled || !show.value) {
         return;
@@ -125,6 +288,20 @@ const __sfc__ = defineComponent({
         focusChildElementByKey(menu.value.$el, menuOptionsRef.value, key);
       }
     }
+    function allowChildrenClose(option) {
+      var _a;
+      (_a = menuChildren.value) == null ? void 0 : _a.forEach((child) => {
+        child.allowClose();
+        if (option == null) {
+          child.close();
+          return;
+        }
+        if (child.option.value === option.value) {
+          return;
+        }
+        child.close();
+      });
+    }
     function open() {
       var _a;
       (_a = menu.value) == null ? void 0 : _a.open();
@@ -145,8 +322,11 @@ const __sfc__ = defineComponent({
       show,
       menu,
       menuOptionsRef,
+      menuChildren,
+      highlightOptions,
       n,
       classes,
+      allowChildrenClose,
       formatElevation,
       open,
       close,

package/es/menu-select/menuSelect.css

@@ -1 +1 @@
-:root { --menu-select-menu-max-height: 278px; --menu-select-menu-padding: 0; --menu-select-menu-border-radius: 2px; --menu-select-menu-background-color: var(--color-surface-container-high);}.var-menu-select__menu { padding: var(--menu-select-menu-padding); border-radius: var(--menu-select-menu-border-radius); background-color: var(--menu-select-menu-background-color);}.var-menu-select--scrollable { overflow-y: auto; max-height: var(--menu-select-menu-max-height);}
+:root { --menu-select-menu-max-height: 278px; --menu-select-menu-padding: 0; --menu-select-menu-border-radius: 2px; --menu-select-menu-background-color: var(--color-surface-container-high);}.var-menu-select__menu { padding: var(--menu-select-menu-padding); border-radius: var(--menu-select-menu-border-radius); background-color: var(--menu-select-menu-background-color);}.var-menu-select--scrollable { overflow-y: auto; max-height: var(--menu-select-menu-max-height);}.var-menu-children[var-menu-children-cover] { width: 100%; display: block;}

package/es/menu-select/props.mjs

@@ -36,6 +36,10 @@ const props = __spreadProps(__spreadValues({
     type: String,
     default: "value"
   },
+  childrenKey: {
+    type: String,
+    default: "children"
+  },
   size: {
     type: String,
     default: "normal"
@@ -46,7 +50,8 @@ const props = __spreadProps(__spreadValues({
     type: Boolean,
     default: true
   },
-  "onUpdate:modelValue": defineListenerProp()
+  "onUpdate:modelValue": defineListenerProp(),
+  onSelect: defineListenerProp()
 }, pickProps(menuProps, [
   "show",
   "disabled",

package/es/option/Option.mjs

@@ -69,7 +69,7 @@ function __render__(_ctx, _cache) {
       focusing: _ctx.isFocusing && !_ctx.disabled
     }, null, 8, ["hovering", "focusing"])
   ], 46, _hoisted_1)), [
-    [_directive_ripple, { disabled: _ctx.disabled }],
+    [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
@@ -87,6 +87,12 @@ const __sfc__ = defineComponent({
     const isFocusing = ref(false);
     const optionSelected = ref(false);
     const selected = computed(() => optionSelected.value);
+    const value = computed(() => props2.value);
+    const disabled = computed(() => props2.disabled);
+    const ripple = computed(() => props2.ripple);
+    const { select, bindSelect } = useSelect();
+    const { multiple, focusColor, onSelect, computeLabel } = select;
+    const { hovering, handleHovering } = useHoverOverlay();
     const labelVNode = computed(
       () => {
         var _a;
@@ -100,13 +106,11 @@ const __sfc__ = defineComponent({
         ) : props2.label;
       }
     );
-    const value = computed(() => props2.value);
-    const { select, bindSelect } = useSelect();
-    const { multiple, focusColor, onSelect, computeLabel } = select;
-    const { hovering, handleHovering } = useHoverOverlay();
     const optionProvider = {
       label: labelVNode,
       value,
+      disabled,
+      ripple,
       selected,
       sync
     };

package/es/option/props.mjs

@@ -2,6 +2,10 @@ const props = {
   label: {},
   value: {},
   disabled: Boolean,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
   // internal
   option: Object
 };

package/es/radio/Radio.mjs

@@ -49,14 +49,14 @@ function __render__(_ctx, _cache) {
           }, [
             _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
               _createVNode(_component_var_icon, {
-                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                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.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                class: _normalizeClass(_ctx.n("icon")),
                 "var-radio-cover": "",
                 name: "radio-blank",
                 size: _ctx.iconSize
@@ -114,7 +114,6 @@ const __sfc__ = defineComponent({
     const isFocusing = ref(false);
     const value = useVModel(props2, "modelValue");
     const checked = computed(() => value.value === props2.checkedValue);
-    const withAnimation = ref(false);
     const { radioGroup, bindRadioGroup } = useRadioGroup();
     const { hovering, handleHovering } = useHoverOverlay();
     const { form, bindForm } = useForm();
@@ -190,7 +189,6 @@ const __sfc__ = defineComponent({
       if ((form == null ? void 0 : form.readonly.value) || readonly) {
         return;
       }
-      withAnimation.value = true;
       change(checked.value ? uncheckedValue : checkedValue);
     }
     function handleTextClick() {
@@ -218,7 +216,6 @@ const __sfc__ = defineComponent({
     return {
       action,
       isFocusing,
-      withAnimation,
       checked,
       errorMessage,
       radioGroupErrorMessage: radioGroup == null ? void 0 : radioGroup.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;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.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--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.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))); 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);}

package/es/select/Select.mjs

@@ -63,8 +63,9 @@ function __render__(_ctx, _cache) {
                   label: option[_ctx.labelKey],
                   value: option[_ctx.valueKey],
                   option,
-                  disabled: option.disabled
-                }, null, 8, ["label", "value", "option", "disabled"]);
+                  disabled: option.disabled,
+                  ripple: option.ripple
+                }, null, 8, ["label", "value", "option", "disabled", "ripple"]);
               }),
               128
               /* KEYED_FRAGMENT */