@varlet/ui 3.0.6 → 3.1.0-alpha.1709284240068

package/es/option/Option.mjs

@@ -6,64 +6,67 @@ import { defineComponent, computed, ref, watch } from "vue";
 import { useSelect } 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("option");
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, 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, normalizeStyle as _normalizeStyle, 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.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
-      style: _normalizeStyle({
-        color: _ctx.optionSelected ? _ctx.focusColor : void 0
-      }),
-      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.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
+    style: _normalizeStyle({
+      color: _ctx.optionSelected ? _ctx.focusColor : void 0
+    }),
+    tabindex: _ctx.disabled ? void 0 : "-1",
+    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false),
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")])),
+        style: _normalizeStyle({
+          background: _ctx.optionSelected ? _ctx.focusColor : void 0
+        })
+      },
+      null,
+      6
+      /* CLASS, STYLE */
+    ),
+    _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
+      key: 0,
+      ref: "checkbox",
+      modelValue: _ctx.optionSelected,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+      "checked-color": _ctx.focusColor,
+      disabled: _ctx.disabled,
+      onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
+      }, ["stop"])),
+      onChange: _ctx.handleSelect
+    }, null, 8, ["modelValue", "checked-color", "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")])),
-          style: _normalizeStyle({
-            background: _ctx.optionSelected ? _ctx.focusColor : void 0
-          })
+          class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        null,
-        6
-        /* CLASS, STYLE */
-      ),
-      _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
-        key: 0,
-        ref: "checkbox",
-        modelValue: _ctx.optionSelected,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
-        "checked-color": _ctx.focusColor,
-        disabled: _ctx.disabled,
-        onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
-        }, ["stop"])),
-        onChange: _ctx.handleSelect
-      }, null, 8, ["modelValue", "checked-color", "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"])
-    ],
-    6
-    /* CLASS, STYLE */
-  )), [
+        _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"])
+  ], 46, _hoisted_1)), [
     [_directive_ripple, { disabled: _ctx.disabled }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
@@ -77,6 +80,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);
@@ -92,12 +97,34 @@ const __sfc__ = defineComponent({
     };
     watch([() => props2.label, () => props2.value], computeLabel);
     bindSelect(optionProvider);
+    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;
@@ -108,10 +135,12 @@ const __sfc__ = defineComponent({
       optionSelected.value = checked;
     }
     return {
+      root,
       optionSelected,
       multiple,
       focusColor,
       hovering,
+      isFocusing,
       n,
       classes,
       handleHovering,

package/es/option/option.css

@@ -1 +1 @@
-:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}
+:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color); outline: none;}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}

package/es/overlay/Overlay.mjs

@@ -4,9 +4,11 @@ import { props } from "./props.mjs";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
 import { createNamespace, useTeleport } from "../utils/components.mjs";
-import { call } from "@varlet/shared";
+import { call, preventDefault } from "@varlet/shared";
 
 
+import { useStack } from "../context/stack.mjs";
+import { useEventListener } from "@varlet/use";
 const {
   name,
   n
@@ -22,10 +24,25 @@ var stdin_default = defineComponent({
     const {
       zIndex
     } = useZIndex(() => props2.show, 1);
+    const {
+      onStackTop
+    } = useStack(() => props2.show, zIndex);
     const {
       disabled
     } = useTeleport();
     useLock(() => props2.show, () => props2.lockScroll);
+    useEventListener(window, "keydown", handleKeydown);
+    function handleKeydown(event) {
+      if (!onStackTop() || event.key !== "Escape" || !props2.show) {
+        return;
+      }
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      preventDefault(event);
+      call(props2["onUpdate:show"], false);
+    }
     function handleClickOverlay() {
       call(props2.onClick);
       call(props2["onUpdate:show"], false);
@@ -34,7 +51,7 @@ var stdin_default = defineComponent({
       return _createVNode("div", _mergeProps({
         "class": n(),
         "style": {
-          zIndex: zIndex.value - 1
+          zIndex: zIndex.value
         }
       }, attrs, {
         "onClick": handleClickOverlay

package/es/overlay/props.mjs

@@ -7,7 +7,13 @@ const props = {
   },
   teleport: [String, Object, Boolean],
   onClick: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  // internal for esc
+  onKeyEscape: defineListenerProp(),
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 export {
   props

package/es/paper/paper.css

@@ -1 +1 @@
-:root { --paper-background: var(--color-surface-container-highest);}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}
+:root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 0;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius);}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}

package/es/picker/Picker.mjs

@@ -30,7 +30,9 @@ function __render__(_ctx, _cache) {
         onClosed: _ctx.onClosed,
         onClickOverlay: _ctx.onClickOverlay,
         onRouteChange: _ctx.onRouteChange,
+        onKeyEscape: _ctx.onKeyEscape,
         closeOnClickOverlay: _ctx.closeOnClickOverlay,
+        closeOnKeyEscape: _ctx.closeOnKeyEscape,
         teleport: _ctx.teleport,
         show: _ctx.show,
         safeArea: _ctx.safeArea,

package/es/picker/props.mjs

@@ -72,7 +72,10 @@ const props = __spreadValues({
   "onOpened",
   "onClosed",
   "onClickOverlay",
-  "onRouteChange"
+  "onRouteChange",
+  // internal for esc
+  "onKeyEscape",
+  "closeOnKeyEscape"
 ]));
 export {
   props

package/es/popup/Popup.mjs

@@ -19,10 +19,11 @@ import { defineComponent, watch, Transition, Teleport, computed } from "vue";
 import { props } from "./props.mjs";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
+import { useStack } from "../context/stack.mjs";
 import { useRouteListener, useTeleport, createNamespace } from "../utils/components.mjs";
 import { usePopupItems } from "./provide.mjs";
-import { useInitialized } from "@varlet/use";
-import { call } from "@varlet/shared";
+import { useEventListener, useInitialized } from "@varlet/use";
+import { call, preventDefault } from "@varlet/shared";
 
 
 const {
@@ -42,6 +43,9 @@ var stdin_default = defineComponent({
     const {
       zIndex
     } = useZIndex(() => props2.show, 3);
+    const {
+      onStackTop
+    } = useStack(() => props2.show, zIndex);
     const {
       disabled
     } = useTeleport();
@@ -55,6 +59,7 @@ var stdin_default = defineComponent({
     bindPopupItems({
       show: computed(() => props2.show)
     });
+    useEventListener(window, "keydown", handleKeydown);
     useRouteListener(() => call(props2.onRouteChange));
     function hidePopup() {
       const {
@@ -106,6 +111,17 @@ var stdin_default = defineComponent({
         })]), [[_vShow, props2.show]])]
       });
     }
+    function handleKeydown(event) {
+      if (!onStackTop() || event.key !== "Escape" || !props2.show) {
+        return;
+      }
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      preventDefault(event);
+      call(props2["onUpdate:show"], false);
+    }
     return () => {
       const {
         teleport

package/es/popup/props.mjs

@@ -37,7 +37,13 @@ const props = {
   onClickOverlay: defineListenerProp(),
   "onUpdate:show": defineListenerProp(),
   // internal for Dialog
-  onRouteChange: defineListenerProp()
+  onRouteChange: defineListenerProp(),
+  // internal for esc
+  onKeyEscape: defineListenerProp(),
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 export {
   props