@varlet/ui 3.7.4 → 3.8.0

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/checkbox/Checkbox.mjs

@@ -49,7 +49,7 @@ function __render__(_ctx, _cache) {
           }, [
             _ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "indeterminate-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")),
                 name: "minus-box",
                 size: _ctx.iconSize,
                 "var-checkbox-cover": ""
@@ -57,7 +57,7 @@ function __render__(_ctx, _cache) {
             ]) : _createCommentVNode("v-if", true),
             _ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "checked-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")),
                 name: "checkbox-marked",
                 size: _ctx.iconSize,
                 "var-checkbox-cover": ""
@@ -65,7 +65,7 @@ function __render__(_ctx, _cache) {
             ]) : _createCommentVNode("v-if", true),
             !_ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "unchecked-icon", { key: 2 }, () => [
               _createVNode(_component_var_icon, {
-                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                class: _normalizeClass(_ctx.n("icon")),
                 name: "checkbox-blank-outline",
                 size: _ctx.iconSize,
                 "var-checkbox-cover": ""
@@ -124,7 +124,6 @@ const __sfc__ = defineComponent({
     const isIndeterminate = useVModel(props2, "indeterminate");
     const checked = computed(() => value.value === props2.checkedValue);
     const checkedValue = computed(() => props2.checkedValue);
-    const withAnimation = ref(false);
     const { checkboxGroup, bindCheckboxGroup } = useCheckboxGroup();
     const { hovering, handleHovering } = useHoverOverlay();
     const { form, bindForm } = useForm();
@@ -141,8 +140,7 @@ const __sfc__ = defineComponent({
       sync,
       validate,
       resetValidation,
-      reset,
-      resetWithAnimation
+      reset
     };
     call(bindCheckboxGroup, checkboxProvider);
     call(bindForm, checkboxProvider);
@@ -157,8 +155,7 @@ const __sfc__ = defineComponent({
     function change(changedValue) {
       const { checkedValue: checkedValue2, onChange } = props2;
       value.value = changedValue;
-      isIndeterminate.value = false;
-      call(onChange, value.value);
+      call(onChange, value.value, isIndeterminate.value);
       validateWithTrigger("onChange");
       changedValue === checkedValue2 ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue2) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue2);
     }
@@ -171,7 +168,12 @@ const __sfc__ = defineComponent({
       if ((form == null ? void 0 : form.readonly.value) || readonly) {
         return;
       }
-      withAnimation.value = true;
+      if (isIndeterminate.value === true) {
+        isIndeterminate.value = false;
+        call(props2.onChange, value.value, isIndeterminate.value);
+        validateWithTrigger("onChange");
+        return;
+      }
       const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
       if (!checked.value && maximum) {
         return;
@@ -185,9 +187,6 @@ const __sfc__ = defineComponent({
       const { checkedValue: checkedValue2, uncheckedValue } = props2;
       value.value = values.includes(checkedValue2) ? checkedValue2 : uncheckedValue;
     }
-    function resetWithAnimation() {
-      withAnimation.value = false;
-    }
     function reset() {
       value.value = props2.uncheckedValue;
       resetValidation();
@@ -228,7 +227,6 @@ const __sfc__ = defineComponent({
       action,
       isFocusing,
       isIndeterminate,
-      withAnimation,
       checked,
       errorMessage,
       checkboxGroupErrorMessage: checkboxGroup == null ? void 0 : checkboxGroup.errorMessage,

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;}@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-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--with-animation { animation: var-vibrate-animation 0.25s;}.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; 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);}

package/es/checkbox-group/CheckboxGroup.mjs

@@ -114,20 +114,15 @@ const __sfc__ = defineComponent({
     function syncCheckboxes() {
       checkboxes.forEach(({ sync }) => sync(props2.modelValue));
     }
-    function resetWithAnimation() {
-      checkboxes.forEach((checkbox) => checkbox.resetWithAnimation());
-    }
     function checkAll() {
       const checkedValues = checkboxes.map(({ checkedValue }) => checkedValue.value);
       const changedModelValue = uniq(checkedValues);
-      resetWithAnimation();
       call(props2["onUpdate:modelValue"], changedModelValue);
       return changedModelValue;
     }
     function inverseAll() {
       const checkedValues = checkboxes.filter(({ checked }) => !checked.value).map(({ checkedValue }) => checkedValue.value);
       const changedModelValue = uniq(checkedValues);
-      resetWithAnimation();
       call(props2["onUpdate:modelValue"], changedModelValue);
       return changedModelValue;
     }

package/es/index.bundle.mjs

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

package/es/index.mjs

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

package/es/menu/Menu.mjs

@@ -80,6 +80,7 @@ const __sfc__ = defineComponent({
       handlePopoverMouseleave,
       handlePopoverClose,
       handleClosed,
+      setAllowClose,
       // expose
       open,
       // expose
@@ -89,6 +90,9 @@ const __sfc__ = defineComponent({
       // expose
       setReference
     } = usePopover(props2);
+    function allowClose() {
+      setAllowClose(true);
+    }
     return {
       popover,
       host,
@@ -96,6 +100,7 @@ const __sfc__ = defineComponent({
       show,
       zIndex,
       teleportDisabled,
+      allowClose,
       formatElevation,
       toSizeUnit,
       n,

package/es/menu/menu.css

@@ -1 +1 @@
-:root { --menu-background-color: var(--color-surface-container-high); --menu-border-radius: 2px;}.var-menu { display: inline-block; outline: none;}.var-menu__menu { border-radius: var(--menu-border-radius);}.var-menu-enter-from,.var-menu-leave-to { opacity: 0; transform: scale(0.8);}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-menu--menu-background-color { background: var(--menu-background-color);}
+:root { --menu-background-color: var(--color-surface-container-high); --menu-border-radius: 2px;}.var-menu { display: inline-flex; outline: none;}.var-menu__menu { border-radius: var(--menu-border-radius);}.var-menu-enter-from,.var-menu-leave-to { opacity: 0; transform: scale(0.8);}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-menu--menu-background-color { background: var(--menu-background-color);}

package/es/menu/props.mjs

@@ -47,7 +47,10 @@ const props = {
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
   onClickOutside: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  // internal start
+  cascadeOptimization: Boolean
+  // internal end
 };
 export {
   props

package/es/menu/usePopover.mjs

@@ -68,6 +68,7 @@ function usePopover(options) {
   let reference = void 0;
   let enterPopover = false;
   let enterReference = false;
+  let allowClose = true;
   useEventListener(() => window, "keydown", handleKeydown);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
   watch(() => options.disabled, close);
@@ -168,6 +169,9 @@ function usePopover(options) {
       return;
     }
     enterPopover = true;
+    if (options.cascadeOptimization) {
+      allowClose = false;
+    }
   }
   function handlePopoverMouseleave() {
     return __async(this, null, function* () {
@@ -340,6 +344,9 @@ function usePopover(options) {
     }
     return targetReference;
   }
+  function setAllowClose(value) {
+    allowClose = value;
+  }
   function setReference(newReference) {
     destroyPopperInstance();
     reference = newReference;
@@ -363,6 +370,9 @@ function usePopover(options) {
     call(options["onUpdate:show"], true);
   }
   function close() {
+    if (!allowClose) {
+      return;
+    }
     show.value = false;
     call(options["onUpdate:show"], false);
   }
@@ -377,6 +387,7 @@ function usePopover(options) {
     handlePopoverMouseleave,
     handleClosed,
     setReference,
+    setAllowClose,
     resize,
     open,
     close

package/es/menu-option/MenuOption.mjs

@@ -1,31 +1,60 @@
+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 VarCheckbox from "../checkbox/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import Ripple from "../ripple/index.mjs";
 import Hover from "../hover/index.mjs";
-import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
-import { defineComponent, computed, ref, watch } from "vue";
+import { defineComponent, computed, ref, watch, nextTick } from "vue";
 import { useMenuSelect } from "./provide.mjs";
 import { createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { props } from "./props.mjs";
-import { preventDefault, isFunction } from "@varlet/shared";
+import { preventDefault, isFunction, isBoolean, call } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("menu-option");
-import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createVNode as _createVNode, createElementBlock as _createElementBlock, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 const _hoisted_1 = ["tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_checkbox = _resolveComponent("var-checkbox");
   const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _directive_ripple = _resolveDirective("ripple");
   const _directive_hover = _resolveDirective("hover");
   return _withDirectives((_openBlock(), _createElementBlock("div", {
     ref: "root",
     class: _normalizeClass(
-      _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.size}`), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])
+      _ctx.classes(
+        _ctx.n(),
+        _ctx.n("$--box"),
+        _ctx.n(`--${_ctx.size}`),
+        [_ctx.optionSelected, _ctx.n("--selected-color")],
+        [_ctx.disabled, _ctx.n("--disabled")],
+        [_ctx.childrenTrigger, _ctx.n("--children-trigger")]
+      )
     ),
     tabindex: _ctx.disabled ? void 0 : "-1",
-    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
-    onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = true),
-    onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.isFocusing = false)
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onFocus: _cache[4] || (_cache[4] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[5] || (_cache[5] = ($event) => _ctx.isFocusing = false)
   }, [
     _createElementVNode(
       "div",
@@ -41,11 +70,13 @@ function __render__(_ctx, _cache) {
       ref: "checkbox",
       modelValue: _ctx.optionSelected,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+      indeterminate: _ctx.optionIndeterminate,
+      "onUpdate:indeterminate": _cache[1] || (_cache[1] = ($event) => _ctx.optionIndeterminate = $event),
       disabled: _ctx.disabled,
-      onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
+      onClick: _cache[2] || (_cache[2] = _withModifiers(() => {
       }, ["stop"])),
       onChange: _ctx.handleSelect
-    }, null, 8, ["modelValue", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
+    }, null, 8, ["modelValue", "indeterminate", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
     _renderSlot(_ctx.$slots, "default", {}, () => [
       _createElementVNode(
         "div",
@@ -62,8 +93,24 @@ function __render__(_ctx, _cache) {
         /* CLASS */
       )
     ]),
+    _ctx.childrenTrigger ? (_openBlock(), _createElementBlock(
+      "div",
+      {
+        key: 1,
+        class: _normalizeClass(_ctx.n("arrow"))
+      },
+      [
+        _createVNode(_component_var_icon, {
+          "var-menu-option-cover": "",
+          class: _normalizeClass(_ctx.n("arrow-icon")),
+          name: "chevron-right"
+        }, null, 8, ["class"])
+      ],
+      2
+      /* CLASS */
+    )) : _createCommentVNode("v-if", true),
     _createVNode(_component_var_hover_overlay, {
-      hovering: _ctx.hovering && !_ctx.disabled,
+      hovering: (_ctx.hovering || _ctx.highlight) && !_ctx.disabled,
       focusing: _ctx.isFocusing && !_ctx.disabled
     }, null, 8, ["hovering", "focusing"])
   ], 42, _hoisted_1)), [
@@ -77,14 +124,24 @@ const __sfc__ = defineComponent({
   components: {
     VarCheckbox,
     VarHoverOverlay,
+    VarIcon,
     MaybeVNode
   },
   props,
   setup(props2) {
     const root = ref();
+    const checkbox = ref();
     const isFocusing = ref(false);
     const optionSelected = ref(false);
+    const optionIndeterminate = ref(false);
     const selected = computed(() => optionSelected.value);
+    const indeterminate = computed(() => optionIndeterminate.value);
+    const value = computed(() => props2.value);
+    const disabled = computed(() => props2.disabled);
+    const ripple = computed(() => props2.ripple);
+    const { menuSelect, bindMenuSelect } = useMenuSelect();
+    const { size, multiple, onSelect, computeLabel } = menuSelect;
+    const { hovering, handleHovering } = useHoverOverlay();
     const labelVNode = computed(
       () => {
         var _a;
@@ -99,14 +156,13 @@ const __sfc__ = defineComponent({
         ) : props2.label;
       }
     );
-    const value = computed(() => props2.value);
-    const { menuSelect, bindMenuSelect } = useMenuSelect();
-    const { size, multiple, onSelect, computeLabel } = menuSelect;
-    const { hovering, handleHovering } = useHoverOverlay();
     const menuOptionProvider = {
       label: labelVNode,
       value,
       selected,
+      disabled,
+      ripple,
+      indeterminate,
       sync
     };
     watch([() => props2.label, () => props2.value], computeLabel);
@@ -117,9 +173,31 @@ const __sfc__ = defineComponent({
       if (props2.disabled) {
         return;
       }
-      handleSelect();
+      if (!multiple.value && props2.childrenTrigger) {
+        return;
+      }
+      if (multiple.value && optionIndeterminate.value) {
+        optionIndeterminate.value = false;
+        optionSelected.value = false;
+        onSelect(menuOptionProvider);
+        return;
+      }
+      if (multiple.value && !optionIndeterminate.value) {
+        optionSelected.value = !optionSelected.value;
+      }
+      onSelect(menuOptionProvider);
     }
     function handleKeydown(event) {
+      var _a;
+      if (!isFocusing.value && !((_a = checkbox.value) == null ? void 0 : _a.isFocusing)) {
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        call(props2.onKeyArrowX, event.key);
+      }
+      if (event.key === "ArrowLeft") {
+        call(props2.onKeyArrowX, event.key);
+      }
       if (!isFocusing.value) {
         return;
       }
@@ -140,17 +218,22 @@ const __sfc__ = defineComponent({
       }
     }
     function handleSelect() {
-      if (multiple.value) {
-        optionSelected.value = !optionSelected.value;
-      }
-      onSelect(menuOptionProvider);
+      return __async(this, null, function* () {
+        yield nextTick();
+        onSelect(menuOptionProvider);
+      });
     }
-    function sync(checked) {
+    function sync(checked, indeterminate2) {
       optionSelected.value = checked;
+      if (isBoolean(indeterminate2)) {
+        optionIndeterminate.value = indeterminate2;
+      }
     }
     return {
       root,
+      checkbox,
       optionSelected,
+      optionIndeterminate,
       size,
       multiple,
       hovering,

package/es/menu-option/menuOption.css

@@ -1 +1 @@
-:root { --menu-option-normal-height: 38px; --menu-option-small-height: 30px; --menu-option-mini-height: 24px; --menu-option-large-height: 46px; --menu-option-padding: 0 12px; --menu-option-normal-font-size: var(--font-size-md); --menu-option-small-font-size: var(--font-size-sm); --menu-option-mini-font-size: var(--font-size-xs); --menu-option-large-font-size: var(--font-size-lg); --menu-option-selected-background: var(--color-primary); --menu-option-text-color: #555; --menu-option-disabled-color: var(--color-text-disabled);}.var-menu-option { position: relative; display: flex; align-items: center; padding: var(--menu-option-padding); cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--menu-option-text-color); outline: none;}.var-menu-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-menu-option__text { display: flex; align-items: center; overflow-x: hidden;}.var-menu-option--normal { height: var(--menu-option-normal-height); font-size: var(--menu-option-normal-font-size);}.var-menu-option--large { height: var(--menu-option-large-height); font-size: var(--menu-option-large-font-size);}.var-menu-option--small { height: var(--menu-option-small-height); font-size: var(--menu-option-small-font-size);}.var-menu-option--mini { height: var(--menu-option-mini-height); font-size: var(--menu-option-mini-font-size);}.var-menu-option--selected-background { background: var(--menu-option-selected-background);}.var-menu-option--selected-color { color: var(--menu-option-selected-background);}.var-menu-option--disabled { color: var(--menu-option-disabled-color); cursor: not-allowed;}
+:root { --menu-option-normal-height: 38px; --menu-option-small-height: 30px; --menu-option-mini-height: 24px; --menu-option-large-height: 46px; --menu-option-padding: 0 12px; --menu-option-normal-font-size: var(--font-size-md); --menu-option-small-font-size: var(--font-size-sm); --menu-option-mini-font-size: var(--font-size-xs); --menu-option-large-font-size: var(--font-size-lg); --menu-option-selected-background: var(--color-primary); --menu-option-text-color: #555; --menu-option-disabled-color: var(--color-text-disabled); --menu-option-arrow-padding: 0 6px 0 8px; --menu-option-arrow-icon-size: 18px;}.var-menu-option { position: relative; display: flex; align-items: center; padding: var(--menu-option-padding); cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--menu-option-text-color); outline: none;}.var-menu-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-menu-option__text { display: flex; align-items: center; overflow-x: hidden;}.var-menu-option__arrow { padding: var(--menu-option-arrow-padding);}.var-menu-option__arrow-icon[var-menu-option-cover] { font-size: var(--menu-option-arrow-icon-size);}.var-menu-option--children-trigger { padding-right: 0;}.var-menu-option--normal { height: var(--menu-option-normal-height); font-size: var(--menu-option-normal-font-size);}.var-menu-option--large { height: var(--menu-option-large-height); font-size: var(--menu-option-large-font-size);}.var-menu-option--small { height: var(--menu-option-small-height); font-size: var(--menu-option-small-font-size);}.var-menu-option--mini { height: var(--menu-option-mini-height); font-size: var(--menu-option-mini-font-size);}.var-menu-option--selected-background { background: var(--menu-option-selected-background);}.var-menu-option--selected-color { color: var(--menu-option-selected-background);}.var-menu-option--disabled { color: var(--menu-option-disabled-color); cursor: not-allowed;}

package/es/menu-option/props.mjs

@@ -1,3 +1,4 @@
+import { defineListenerProp } from "../utils/components.mjs";
 const props = {
   label: {},
   value: {},
@@ -6,8 +7,12 @@ const props = {
     type: Boolean,
     default: true
   },
-  // internal
-  option: Object
+  // internal start
+  option: Object,
+  childrenTrigger: Boolean,
+  highlight: Boolean,
+  onKeyArrowX: defineListenerProp()
+  // internal end
 };
 export {
   props

package/es/menu-option/style/index.mjs

@@ -1,4 +1,5 @@
 import '../../styles/common.css'
+import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../checkbox/checkbox.css'
 import '../menuOption.css'