@varlet/ui 3.0.6 → 3.1.0-alpha.1709284240068

package/es/action-sheet/ActionItem.mjs

@@ -0,0 +1,79 @@
+import Ripple from "../ripple/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import Hover from "../hover/index.mjs";
+import { defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("action-sheet");
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  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",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n("action-item"), _ctx.className, [_ctx.disabled, _ctx.n("--disabled")])),
+      style: _normalizeStyle({ color: _ctx.color })
+    },
+    [
+      _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+        key: 0,
+        "var-action-sheet-cover": "",
+        class: _normalizeClass(_ctx.n("action-icon")),
+        namespace: _ctx.namespace,
+        name: _ctx.icon,
+        size: _ctx.iconSize
+      }, null, 8, ["class", "namespace", "name", "size"])) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("action-name"))
+        },
+        _toDisplayString(_ctx.name),
+        3
+        /* TEXT, CLASS */
+      ),
+      _createVNode(_component_var_hover_overlay, {
+        hovering: _ctx.disabled ? false : _ctx.hovering
+      }, null, 8, ["hovering"])
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple, { disabled: _ctx.disabled }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarHoverOverlay,
+    VarIcon
+  },
+  directives: { Ripple, Hover },
+  props: {
+    name: String,
+    className: String,
+    disabled: Boolean,
+    color: String,
+    namespace: String,
+    iconSize: [String, Number],
+    icon: String
+  },
+  setup() {
+    const { hovering, handleHovering } = useHoverOverlay();
+    return {
+      hovering,
+      n,
+      classes,
+      handleHovering
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/action-sheet/ActionSheet.mjs

@@ -1,39 +1,37 @@
 import Ripple from "../ripple/index.mjs";
 import VarPopup from "../popup/index.mjs";
-import VarIcon from "../icon/index.mjs";
-import { defineComponent, ref, watch } from "vue";
+import VarActionItem from "./ActionItem.mjs";
+import { defineComponent } from "vue";
 import { props } from "./props.mjs";
 import { t } from "../locale/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { call } from "@varlet/shared";
+import { useVModel } from "@varlet/use";
 const { name, n, classes } = createNamespace("action-sheet");
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, withCtx as _withCtx, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["onClick"];
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
 function __render__(_ctx, _cache) {
-  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_action_item = _resolveComponent("var-action-item");
   const _component_var_popup = _resolveComponent("var-popup");
-  const _directive_ripple = _resolveDirective("ripple");
-  return _openBlock(), _createBlock(_component_var_popup, _mergeProps({
-    class: _ctx.n("popup-radius"),
+  return _openBlock(), _createBlock(_component_var_popup, {
     position: "bottom",
-    show: _ctx.popupShow,
+    class: _normalizeClass(_ctx.n("popup-radius")),
     overlay: _ctx.overlay,
     "overlay-class": _ctx.overlayClass,
     "overlay-style": _ctx.overlayStyle,
     "lock-scroll": _ctx.lockScroll,
     "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    "close-on-key-escape": _ctx.closeOnKeyEscape,
     teleport: _ctx.teleport,
-    "safe-area": _ctx.safeArea
-  }, {
-    "onUpdate:show": _ctx.handlePopupUpdateShow
-  }, {
+    "safe-area": _ctx.safeArea,
+    show: _ctx.show,
+    "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
     onClosed: _ctx.onClosed,
     onOpened: _ctx.onOpened,
-    onRouteChange: _ctx.onRouteChange
-  }), {
+    onRouteChange: _ctx.onRouteChange,
+    onKeyEscape: _ctx.onKeyEscape
+  }, {
     default: _withCtx(() => [
       _createElementVNode(
         "div",
@@ -60,32 +58,16 @@ function __render__(_ctx, _cache) {
               _Fragment,
               null,
               _renderList(_ctx.actions, (action) => {
-                return _withDirectives((_openBlock(), _createElementBlock("div", {
-                  class: _normalizeClass(_ctx.classes(_ctx.n("action-item"), action.className, [action.disabled, _ctx.n("--disabled")])),
+                return _openBlock(), _createBlock(_component_var_action_item, {
                   key: action.name,
-                  style: _normalizeStyle({ color: action.color }),
+                  name: action.name,
+                  namespace: action.namespace,
+                  icon: action.icon,
+                  "icon-size": action.iconSize,
+                  "class-name": action.className,
+                  color: action.color,
                   onClick: ($event) => _ctx.handleSelect(action)
-                }, [
-                  action.icon ? (_openBlock(), _createBlock(_component_var_icon, {
-                    key: 0,
-                    class: _normalizeClass(_ctx.n("action-icon")),
-                    "var-action-sheet-cover": "",
-                    namespace: action.namespace,
-                    name: action.icon,
-                    size: action.iconSize
-                  }, null, 8, ["class", "namespace", "name", "size"])) : _createCommentVNode("v-if", true),
-                  _createElementVNode(
-                    "div",
-                    {
-                      class: _normalizeClass(_ctx.n("action-name"))
-                    },
-                    _toDisplayString(action.name),
-                    3
-                    /* TEXT, CLASS */
-                  )
-                ], 14, _hoisted_1)), [
-                  [_directive_ripple, { disabled: action.disabled }]
-                ]);
+                }, null, 8, ["name", "namespace", "icon", "icon-size", "class-name", "color", "onClick"]);
               }),
               128
               /* KEYED_FRAGMENT */
@@ -98,43 +80,34 @@ function __render__(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 16, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "safe-area", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  }, 8, ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "close-on-key-escape", "teleport", "safe-area", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onKeyEscape"]);
 }
 const __sfc__ = defineComponent({
   name,
   directives: { Ripple },
   components: {
     VarPopup,
-    VarIcon
+    VarActionItem
   },
   inheritAttrs: false,
   props,
   setup(props2) {
-    const popupShow = ref(false);
-    watch(
-      () => props2.show,
-      (newValue) => {
-        popupShow.value = newValue;
-      },
-      { immediate: true }
-    );
+    const show = useVModel(props2, "show");
     function handleSelect(action) {
       if (action.disabled) {
         return;
       }
       const { closeOnClickAction, onSelect } = props2;
       call(onSelect, action);
-      closeOnClickAction && call(props2["onUpdate:show"], false);
-    }
-    function handlePopupUpdateShow(value) {
-      call(props2["onUpdate:show"], value);
+      if (closeOnClickAction) {
+        show.value = false;
+      }
     }
     return {
-      popupShow,
+      show,
       t,
       n,
       classes,
-      handlePopupUpdateShow,
       handleSelect
     };
   }

package/es/action-sheet/actionSheet.css

@@ -1 +1 @@
-:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
+:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer; position: relative;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/action-sheet/props.mjs

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

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

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

package/es/button/Button.mjs

@@ -6,7 +6,7 @@ import { computed, defineComponent, ref } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { useButtonGroup } from "./provide.mjs";
-import { isArray, call, inMobile } from "@varlet/shared";
+import { isArray, call } from "@varlet/shared";
 const { name, n, classes } = createNamespace("button");
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, 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);
@@ -42,8 +42,8 @@ function __render__(_ctx, _cache) {
     disabled: _ctx.disabled,
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
     onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
-    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isEffectFocusing = true),
-    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isEffectFocusing = false)
+    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false)
   }, [
     _ctx.loading || _ctx.pending ? (_openBlock(), _createBlock(_component_var_loading, {
       key: 0,
@@ -67,7 +67,7 @@ function __render__(_ctx, _cache) {
     ),
     _createVNode(_component_var_hover_overlay, {
       hovering: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.hovering,
-      focusing: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.isEffectFocusing
+      focusing: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.isFocusing
     }, null, 8, ["hovering", "focusing"])
   ], 46, _hoisted_1)), [
     [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple || _ctx.loading || _ctx.pending }],
@@ -83,7 +83,7 @@ const __sfc__ = defineComponent({
   directives: { Ripple, Hover },
   props,
   setup(props2) {
-    const isEffectFocusing = inMobile() ? computed(() => false) : ref(false);
+    const isFocusing = ref(false);
     const pending = ref(false);
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
@@ -146,7 +146,7 @@ const __sfc__ = defineComponent({
       handleHovering,
       handleClick,
       handleTouchstart,
-      isEffectFocusing
+      isFocusing
     };
   }
 });

package/es/checkbox/Checkbox.mjs

@@ -8,10 +8,12 @@ import { props } from "./props.mjs";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useCheckboxGroup } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { call } from "@varlet/shared";
-import { useVModel } from "@varlet/use";
+import { call, preventDefault } from "@varlet/shared";
+import { useEventListener, useVModel } from "@varlet/use";
 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";
+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, 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_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -22,7 +24,7 @@ function __render__(_ctx, _cache) {
     "div",
     {
       class: _normalizeClass(_ctx.n("wrap")),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
       _createElementVNode(
@@ -31,51 +33,50 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.n())
         },
         [
-          _withDirectives((_openBlock(), _createElementBlock(
-            "div",
-            {
-              class: _normalizeClass(
-                _ctx.classes(
-                  _ctx.n("action"),
-                  [_ctx.checked || _ctx.isIndeterminate, _ctx.n("--checked"), _ctx.n("--unchecked")],
-                  [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
-                )
-              ),
-              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.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-                  name: "minus-box",
-                  size: _ctx.iconSize,
-                  "var-checkbox-cover": ""
-                }, null, 8, ["class", "size"])
-              ]) : _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")])),
-                  name: "checkbox-marked",
-                  size: _ctx.iconSize,
-                  "var-checkbox-cover": ""
-                }, null, 8, ["class", "size"])
-              ]) : _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")])),
-                  name: "checkbox-blank-outline",
-                  size: _ctx.iconSize,
-                  "var-checkbox-cover": ""
-                }, null, 8, ["class", "size"])
-              ]) : _createCommentVNode("v-if", true),
-              _createVNode(_component_var_hover_overlay, {
-                hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering
-              }, null, 8, ["hovering"])
-            ],
-            6
-            /* CLASS, STYLE */
-          )), [
+          _withDirectives((_openBlock(), _createElementBlock("div", {
+            ref: "action",
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("action"),
+                [_ctx.checked || _ctx.isIndeterminate, _ctx.n("--checked"), _ctx.n("--unchecked")],
+                [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
+                [_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)
+          }, [
+            _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")])),
+                name: "minus-box",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : _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")])),
+                name: "checkbox-marked",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : _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")])),
+                name: "checkbox-blank-outline",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : _createCommentVNode("v-if", true),
+            _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_1)), [
             [_directive_hover, _ctx.handleHovering, "desktop"],
             [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
           ]),
@@ -117,6 +118,8 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
+    const action = ref(null);
+    const isFocusing = ref(false);
     const value = useVModel(props2, "modelValue");
     const isIndeterminate = useVModel(props2, "indeterminate");
     const checked = computed(() => value.value === props2.checkedValue);
@@ -192,10 +195,35 @@ const __sfc__ = defineComponent({
       }
       change(changedValue);
     }
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      const { key } = event;
+      if (key === "Enter" || key === " ") {
+        preventDefault(event);
+      }
+      if (key === "Enter") {
+        action.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        action.value.click();
+      }
+    }
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
     return {
+      action,
+      isFocusing,
       isIndeterminate,
       withAnimation,
       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;}@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: rgba(0, 0, 0, 0);}.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--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;}@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: rgba(0, 0, 0, 0);}.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);}

package/es/context/stack.mjs

@@ -0,0 +1,46 @@
+import { getCurrentInstance, watch } from "vue";
+import { removeItem } from "@varlet/shared";
+import { onSmartUnmounted, onSmartMounted } from "@varlet/use";
+const stack = [];
+function useStack(activeGetter, zIndex) {
+  const { uid } = getCurrentInstance();
+  watch(activeGetter, (isActive) => {
+    if (isActive && !getStackItem(uid)) {
+      pushStackItem();
+    } else {
+      setTimeout(() => {
+        removeItem(stack, getStackItem(uid));
+      });
+    }
+  });
+  onSmartMounted(() => {
+    if (activeGetter()) {
+      pushStackItem();
+    }
+  });
+  onSmartUnmounted(() => {
+    removeItem(stack, getStackItem(uid));
+  });
+  function onStackTop() {
+    if (stack.length === 0) {
+      return true;
+    }
+    stack.sort((a, b) => a.zIndex.value - b.zIndex.value);
+    return stack[stack.length - 1].uid === uid;
+  }
+  function pushStackItem() {
+    if (getStackItem(uid)) {
+      return;
+    }
+    stack.push({ uid, zIndex });
+  }
+  function getStackItem(uid2) {
+    return stack.find((item) => item.uid === uid2);
+  }
+  return {
+    onStackTop
+  };
+}
+export {
+  useStack
+};

package/es/dialog/Dialog.mjs

@@ -36,11 +36,13 @@ function __render__(_ctx, _cache) {
     "overlay-style": _ctx.overlayStyle,
     "lock-scroll": _ctx.lockScroll,
     "close-on-click-overlay": _ctx.popupCloseOnClickOverlay,
+    "close-on-key-escape": false,
     teleport: _ctx.teleport,
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
     onClosed: _ctx.onClosed,
     onOpened: _ctx.onOpened,
+    onKeyEscape: _ctx.handleKeyEscape,
     onRouteChange: _ctx.onRouteChange,
     onClickOverlay: _ctx.handleClickOverlay
   }, {
@@ -151,7 +153,7 @@ function __render__(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
+  }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onKeyEscape", "onRouteChange", "onClickOverlay"]);
 }
 const __sfc__ = defineComponent({
   name,
@@ -215,6 +217,13 @@ const __sfc__ = defineComponent({
       }
       call(props2["onUpdate:show"], false);
     }
+    function handleKeyEscape() {
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      cancel();
+    }
     return {
       t,
       popupShow,
@@ -224,7 +233,8 @@ const __sfc__ = defineComponent({
       handleClickOverlay,
       confirm,
       cancel,
-      toSizeUnit
+      toSizeUnit,
+      handleKeyEscape
     };
   }
 });

package/es/dialog/props.mjs

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

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(() => {