@varlet/ui 3.0.7 → 3.1.0-alpha.1709537939980

package/es/field-decorator/FieldDecorator.mjs

@@ -23,7 +23,7 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(
             _ctx.classes(
               _ctx.n("controller"),
-              [_ctx.isFocus, _ctx.n("--focus")],
+              [_ctx.isFocusing, _ctx.n("--focus")],
               [_ctx.errorMessage, _ctx.n("--error")],
               [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
             )
@@ -67,7 +67,7 @@ function __render__(_ctx, _cache) {
               _ctx.classes(
                 _ctx.n("placeholder"),
                 _ctx.n("$--ellipsis"),
-                [_ctx.isFocus, _ctx.n("--focus")],
+                [_ctx.isFocusing, _ctx.n("--focus")],
                 [_ctx.hintCenter, _ctx.n("--hint-center")],
                 [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
                 [_ctx.errorMessage, _ctx.n("--error")],
@@ -94,7 +94,10 @@ function __render__(_ctx, _cache) {
               class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")]))
             },
             [
-              _ctx.clearable && !_ctx.isEmpty(_ctx.value) ? _renderSlot(_ctx.$slots, "clear-icon", { key: 0 }, () => [
+              _ctx.clearable && !_ctx.isEmpty(_ctx.value) ? _renderSlot(_ctx.$slots, "clear-icon", {
+                key: 0,
+                clear: _ctx.handleClear
+              }, () => [
                 _createVNode(_component_var_icon, {
                   class: _normalizeClass(_ctx.n("clear-icon")),
                   "var-field-decorator-cover": "",
@@ -122,7 +125,7 @@ function __render__(_ctx, _cache) {
               class: _normalizeClass(
                 _ctx.classes(
                   _ctx.n("line"),
-                  [_ctx.isFocus, _ctx.n("--line-focus")],
+                  [_ctx.isFocusing, _ctx.n("--line-focus")],
                   [_ctx.errorMessage, _ctx.n("--line-error")],
                   [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")]
                 )
@@ -175,7 +178,7 @@ function __render__(_ctx, _cache) {
                   class: _normalizeClass(
                     _ctx.classes(
                       _ctx.n("dot"),
-                      [_ctx.isFocus, _ctx.n("--line-focus")],
+                      [_ctx.isFocusing, _ctx.n("--line-focus")],
                       [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")],
                       [_ctx.errorMessage, _ctx.n("--line-error")]
                     )
@@ -211,9 +214,9 @@ const __sfc__ = defineComponent({
     const middleOffsetWidth = ref("0px");
     const middleOffsetHeight = ref("0px");
     const transitionDisabled = ref(true);
-    const isFloating = computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocus));
+    const isFloating = computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocusing));
     const color = computed(
-      () => !props2.errorMessage ? props2.isFocus ? props2.focusColor : props2.blurColor : void 0
+      () => !props2.errorMessage ? props2.isFocusing ? props2.focusColor : props2.blurColor : void 0
     );
     onWindowResize(resize);
     onSmartMounted(() => {

package/es/field-decorator/props.mjs

@@ -8,7 +8,7 @@ const props = {
     type: String,
     default: ""
   },
-  isFocus: Boolean,
+  isFocusing: Boolean,
   size: {
     type: String,
     default: "normal"

package/es/hover-overlay/HoverOverlay.mjs

@@ -1,13 +1,14 @@
 import { defineComponent } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
+import { inMobile } from "@varlet/shared";
 const { name, n, classes } = createNamespace("hover-overlay");
 import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing, _ctx.n("--focusing")]))
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing && !_ctx.inMobile(), _ctx.n("--focusing")]))
     },
     null,
     2
@@ -19,7 +20,8 @@ const __sfc__ = defineComponent({
   props,
   setup: () => ({
     n,
-    classes
+    classes,
+    inMobile
   })
 });
 __sfc__.render = __render__;

package/es/image-preview/ImagePreview.mjs

@@ -2,9 +2,9 @@ import VarSwipe from "../swipe/index.mjs";
 import VarSwipeItem from "../swipe-item/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import VarPopup from "../popup/index.mjs";
-import { defineComponent, ref, computed, watch } from "vue";
+import { defineComponent, ref, computed } from "vue";
 import { toNumber, clamp, preventDefault, call } from "@varlet/shared";
-import { useEventListener, useTouch } from "@varlet/use";
+import { useEventListener, useTouch, useVModel } from "@varlet/use";
 import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
 const { name, n, classes } = createNamespace("image-preview");
@@ -24,18 +24,21 @@ function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_popup = _resolveComponent("var-popup");
   return _openBlock(), _createBlock(_component_var_popup, {
-    class: _normalizeClass(_ctx.n("popup")),
     "var-image-preview-cover": "",
+    class: _normalizeClass(_ctx.n("popup")),
     transition: _ctx.n("$-fade"),
-    show: _ctx.popupShow,
     overlay: false,
     "close-on-click-overlay": false,
+    "close-on-key-escape": _ctx.closeOnKeyEscape,
     "lock-scroll": _ctx.lockScroll,
     teleport: _ctx.teleport,
+    show: _ctx.show,
+    "onUpdate:show": _cache[3] || (_cache[3] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
     onClosed: _ctx.onClosed,
     onOpened: _ctx.onOpened,
+    onKeyEscape: _ctx.onKeyEscape,
     onRouteChange: _ctx.onRouteChange
   }, {
     default: _withCtx(() => [
@@ -132,7 +135,7 @@ function __render__(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["class", "transition", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  }, 8, ["class", "transition", "close-on-key-escape", "lock-scroll", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onKeyEscape", "onRouteChange"]);
 }
 const __sfc__ = defineComponent({
   name,
@@ -145,7 +148,7 @@ const __sfc__ = defineComponent({
   inheritAttrs: false,
   props,
   setup(props2) {
-    const popupShow = ref(false);
+    const show = useVModel(props2, "show");
     const scale = ref(1);
     const translateX = ref(0);
     const translateY = ref(0);
@@ -155,8 +158,8 @@ const __sfc__ = defineComponent({
     const swipeRef = ref(null);
     const { moveX, moveY, distance, startTime, startTouch, moveTouch, endTouch } = useTouch();
     const isPreventDefault = computed(() => {
-      const { imagePreventDefault, show } = props2;
-      return show && imagePreventDefault;
+      const { imagePreventDefault, show: show2 } = props2;
+      return show2 && imagePreventDefault;
     });
     let closeRunner = null;
     let longPressRunner = null;
@@ -166,13 +169,6 @@ const __sfc__ = defineComponent({
       prev: null
     };
     useEventListener(() => document, "contextmenu", preventImageDefault);
-    watch(
-      () => props2.show,
-      (newShow) => {
-        popupShow.value = newShow;
-      },
-      { immediate: true }
-    );
     function zoomIn(ratio) {
       scale.value = toNumber(ratio);
       canSwipe.value = false;
@@ -313,7 +309,7 @@ const __sfc__ = defineComponent({
     return {
       swipeRef,
       isPreventDefault,
-      popupShow,
+      show,
       scale,
       translateX,
       translateY,

package/es/image-preview/props.mjs

@@ -43,7 +43,10 @@ const props = __spreadValues(__spreadValues({
   "onOpened",
   "onClosed",
   // internal for function call closes the dialog
-  "onRouteChange"
+  "onRouteChange",
+  // internal for esc
+  "closeOnKeyEscape",
+  "onKeyEscape"
 ]));
 export {
   props

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.0.7'
+const version = '3.1.0-alpha.1709537939980'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.0.7'
+const version = '3.1.0-alpha.1709537939980'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -35,7 +35,7 @@ function __render__(_ctx, _cache) {
           textColor: _ctx.textColor,
           focusColor: _ctx.focusColor,
           blurColor: _ctx.blurColor,
-          isFocus: _ctx.isFocus,
+          isFocusing: _ctx.isFocusing,
           errorMessage: _ctx.errorMessage,
           formDisabled: _ctx.formDisabled,
           disabled: _ctx.disabled,
@@ -47,8 +47,8 @@ function __render__(_ctx, _cache) {
           onClear: _ctx.handleClear
         })),
         _createSlots({
-          "clear-icon": _withCtx(() => [
-            _renderSlot(_ctx.$slots, "clear-icon")
+          "clear-icon": _withCtx(({ clear }) => [
+            _renderSlot(_ctx.$slots, "clear-icon", { clear })
           ]),
           "append-icon": _withCtx(() => [
             _renderSlot(_ctx.$slots, "append-icon")
@@ -179,7 +179,7 @@ const __sfc__ = defineComponent({
   setup(props2) {
     const id = useId();
     const el = ref(null);
-    const isFocus = ref(false);
+    const isFocusing = ref(false);
     const isComposing = ref(false);
     const { bindForm, form } = useForm();
     const {
@@ -214,7 +214,7 @@ const __sfc__ = defineComponent({
       if (errorMessage.value) {
         return "var(--field-decorator-error-color)";
       }
-      if (isFocus.value) {
+      if (isFocusing.value) {
         return focusColor || "var(--field-decorator-focus-color)";
       }
       return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
@@ -237,12 +237,12 @@ const __sfc__ = defineComponent({
       });
     }
     function handleFocus(e) {
-      isFocus.value = true;
+      isFocusing.value = true;
       call(props2.onFocus, e);
       validateWithTrigger("onFocus");
     }
     function handleBlur(e) {
-      isFocus.value = false;
+      isFocusing.value = false;
       call(props2.onBlur, e);
       validateWithTrigger("onBlur");
     }
@@ -343,7 +343,7 @@ const __sfc__ = defineComponent({
     return {
       el,
       id,
-      isFocus,
+      isFocusing,
       isComposing,
       errorMessage,
       placeholderColor,

package/es/link/Link.mjs

@@ -1,8 +1,8 @@
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
-import { call } from "@varlet/shared";
+import { call, inMobile } from "@varlet/shared";
 const { name, n, classes } = createNamespace("link");
 import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -13,13 +13,16 @@ function __render__(_ctx, _cache) {
       _ctx.n("$--inline-flex"),
       _ctx.n(`--${_ctx.type}`),
       [_ctx.underline !== "none", _ctx.n(`--underline-${_ctx.underline}`)],
-      [_ctx.disabled, _ctx.n("--disabled")]
+      [_ctx.disabled, _ctx.n("--disabled")],
+      [_ctx.isFocusing && !_ctx.inMobile(), _ctx.n("--focusing")]
     ),
     style: {
       color: _ctx.textColor,
       fontSize: _ctx.toSizeUnit(_ctx.textSize)
     },
-    onClick: _ctx.handleClick
+    onClick: _ctx.handleClick,
+    onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
   }), {
     default: _withCtx(() => [
       _renderSlot(_ctx.$slots, "default")
@@ -32,6 +35,7 @@ const __sfc__ = defineComponent({
   name,
   props,
   setup(props2) {
+    const isFocusing = ref(false);
     const tag = computed(() => {
       const { disabled, href, to } = props2;
       if (disabled) {
@@ -67,6 +71,8 @@ const __sfc__ = defineComponent({
     return {
       tag,
       linkProps,
+      isFocusing,
+      inMobile,
       n,
       classes,
       handleClick,

package/es/link/link.css

@@ -1 +1 @@
-:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md);}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size);}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}
+:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md); --link-focus-opacity: 0.8;}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size); transition: opacity 0.15s;}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}.var-link--focusing { opacity: var(--link-focus-opacity);}

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;}.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-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);}

package/es/menu/props.mjs

@@ -43,7 +43,12 @@ const props = {
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
   onClickOutside: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  // internal for esc
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 export {
   props

package/es/menu/usePopover.mjs

@@ -40,12 +40,13 @@ var __async = (__this, __arguments, generator) => {
 import flip from "@popperjs/core/lib/modifiers/flip.js";
 import offset from "@popperjs/core/lib/modifiers/offset.js";
 import computeStyles from "@popperjs/core/lib/modifiers/computeStyles.js";
-import { onWindowResize, useClickOutside, useVModel } from "@varlet/use";
-import { doubleRaf, getStyle, call } from "@varlet/shared";
+import { onWindowResize, useClickOutside, useEventListener, useVModel } from "@varlet/use";
+import { doubleRaf, getStyle, call, preventDefault } from "@varlet/shared";
 import { toPxNum } from "../utils/elements.mjs";
 import { onMounted, onUnmounted, ref, watch } from "vue";
 import { createPopper } from "@popperjs/core/lib/popper-lite.js";
 import { useZIndex } from "../context/zIndex.mjs";
+import { useStack } from "../context/stack.mjs";
 function usePopover(options) {
   const host = ref(null);
   const popover = ref(null);
@@ -63,6 +64,7 @@ function usePopover(options) {
     }
   });
   const { zIndex } = useZIndex(() => show.value, 1);
+  useStack(() => show.value, zIndex);
   let popoverInstance = null;
   let enterPopover = false;
   let enterHost = false;
@@ -288,6 +290,13 @@ function usePopover(options) {
     };
   };
   const getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value;
+  const handleKeydown = (event) => {
+    const { closeOnKeyEscape = false } = options;
+    if (event.key === "Escape" && closeOnKeyEscape && show.value) {
+      preventDefault(event);
+      close();
+    }
+  };
   const resize = () => {
     popoverInstance.setOptions(getPopperOptions());
   };
@@ -303,6 +312,7 @@ function usePopover(options) {
     show.value = false;
     call(options["onUpdate:show"], false);
   };
+  useEventListener(() => window, "keydown", handleKeydown);
   useClickOutside(getReference, "click", handleClickOutside);
   onWindowResize(resize);
   watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);

package/es/menu-option/MenuOption.mjs

@@ -6,59 +6,62 @@ import { defineComponent, computed, ref, watch } from "vue";
 import { useMenuSelect } from "./provide.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
+import { preventDefault } 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, toDisplayString as _toDisplayString, 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, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_checkbox = _resolveComponent("var-checkbox");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _directive_ripple = _resolveDirective("ripple");
   const _directive_hover = _resolveDirective("hover");
-  return _withDirectives((_openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(
-        _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.size}`), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])
-      ),
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-    },
-    [
+  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")])
+    ),
+    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)
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")]))
+      },
+      null,
+      2
+      /* CLASS */
+    ),
+    _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
+      key: 0,
+      ref: "checkbox",
+      modelValue: _ctx.optionSelected,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+      disabled: _ctx.disabled,
+      onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
+      }, ["stop"])),
+      onChange: _ctx.handleSelect
+    }, null, 8, ["modelValue", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
+    _renderSlot(_ctx.$slots, "default", {}, () => [
       _createElementVNode(
         "div",
         {
-          class: _normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")]))
+          class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        null,
-        2
-        /* CLASS */
-      ),
-      _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
-        key: 0,
-        ref: "checkbox",
-        modelValue: _ctx.optionSelected,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
-        disabled: _ctx.disabled,
-        onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
-        }, ["stop"])),
-        onChange: _ctx.handleSelect
-      }, null, 8, ["modelValue", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
-      _renderSlot(_ctx.$slots, "default", {}, () => [
-        _createElementVNode(
-          "div",
-          {
-            class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
-          },
-          _toDisplayString(_ctx.label),
-          3
-          /* TEXT, CLASS */
-        )
-      ]),
-      _createVNode(_component_var_hover_overlay, {
-        hovering: _ctx.hovering && !_ctx.disabled
-      }, null, 8, ["hovering"])
-    ],
-    2
-    /* CLASS */
-  )), [
+        _toDisplayString(_ctx.label),
+        3
+        /* TEXT, CLASS */
+      )
+    ]),
+    _createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.hovering && !_ctx.disabled,
+      focusing: _ctx.isFocusing && !_ctx.disabled
+    }, null, 8, ["hovering", "focusing"])
+  ], 42, _hoisted_1)), [
     [_directive_ripple, { disabled: _ctx.disabled }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
@@ -72,6 +75,8 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
+    const root = ref();
+    const isFocusing = ref(false);
     const optionSelected = ref(false);
     const selected = computed(() => optionSelected.value);
     const label = computed(() => props2.label);
@@ -87,12 +92,34 @@ const __sfc__ = defineComponent({
     };
     watch([() => props2.label, () => props2.value], computeLabel);
     bindMenuSelect(menuOptionProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
     function handleClick() {
       if (props2.disabled) {
         return;
       }
       handleSelect();
     }
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        root.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        root.value.click();
+      }
+    }
     function handleSelect() {
       if (multiple.value) {
         optionSelected.value = !optionSelected.value;
@@ -103,10 +130,12 @@ const __sfc__ = defineComponent({
       optionSelected.value = checked;
     }
     return {
+      root,
       optionSelected,
       size,
       multiple,
       hovering,
+      isFocusing,
       n,
       classes,
       handleHovering,

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: rgba(0, 0, 0, 0); color: var(--menu-option-text-color);}.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;}.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);}.var-menu-option { position: relative; display: flex; align-items: center; padding: var(--menu-option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 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;}.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-select/MenuSelect.mjs

@@ -4,14 +4,16 @@ import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useMenuOptions } from "./provide.mjs";
 import { useSelectController } from "../select/useSelectController.mjs";
-import { call } from "@varlet/shared";
-import { useVModel } from "@varlet/use";
+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, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_menu = _resolveComponent("var-menu");
   return _openBlock(), _createBlock(_component_var_menu, {
     ref: "menu",
+    tabindex: "-1",
     class: _normalizeClass(_ctx.n()),
     disabled: _ctx.disabled,
     trigger: _ctx.trigger,
@@ -26,6 +28,7 @@ function __render__(_ctx, _cache) {
     "default-style": false,
     "popover-class": _ctx.popoverClass,
     "close-on-click-reference": _ctx.closeOnClickReference,
+    "close-on-key-escape": false,
     show: _ctx.show,
     "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
@@ -38,6 +41,7 @@ function __render__(_ctx, _cache) {
       _createElementVNode(
         "div",
         {
+          ref: "menuOptionsRef",
           class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
         },
         [
@@ -60,6 +64,7 @@ const __sfc__ = defineComponent({
   props,
   setup(props2) {
     const menu = ref(null);
+    const menuOptionsRef = ref(null);
     const show = useVModel(props2, "show");
     const { menuOptions, length, bindMenuOptions } = useMenuOptions();
     const { computeLabel, getSelectedValue } = useSelectController({
@@ -75,11 +80,30 @@ const __sfc__ = defineComponent({
       onSelect
     };
     bindMenuOptions(menuSelectProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
     function onSelect(option) {
       const { multiple, closeOnSelect } = props2;
       call(props2["onUpdate:modelValue"], getSelectedValue(option));
       if (!multiple && closeOnSelect) {
-        show.value = false;
+        menu.value.$el.focus();
+        close();
+      }
+    }
+    function handleKeydown(event) {
+      if (props2.disabled || !show.value) {
+        return;
+      }
+      const { key } = event;
+      if (["Escape", "ArrowDown", "ArrowUp"].includes(key)) {
+        preventDefault(event);
+      }
+      if (key === "Escape") {
+        menu.value.$el.focus();
+        close();
+        return;
+      }
+      if (key === "ArrowDown" || key === "ArrowUp") {
+        focusChildElementByKey(menu.value.$el, menuOptionsRef.value, key);
       }
     }
     function open() {
@@ -97,6 +121,7 @@ const __sfc__ = defineComponent({
     return {
       show,
       menu,
+      menuOptionsRef,
       n,
       classes,
       formatElevation,