@varlet/ui 3.0.7 → 3.1.0-alpha.1709537939980

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: 4px;}.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

package/es/radio/Radio.mjs

@@ -8,10 +8,12 @@ import { props } from "./props.mjs";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useRadioGroup } 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("radio");
-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, mergeProps as _mergeProps, 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, mergeProps as _mergeProps, 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");
@@ -28,45 +30,44 @@ function __render__(_ctx, _cache) {
         "div",
         _mergeProps({
           class: _ctx.n(),
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
         }, _ctx.$attrs),
         [
-          _withDirectives((_openBlock(), _createElementBlock(
-            "div",
-            {
-              class: _normalizeClass(
-                _ctx.classes(
-                  _ctx.n("action"),
-                  [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
-                  [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
-                )
-              ),
-              style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor })
-            },
-            [
-              _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
-                _createVNode(_component_var_icon, {
-                  class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-                  "var-radio-cover": "",
-                  name: "radio-marked",
-                  size: _ctx.iconSize
-                }, null, 8, ["class", "size"])
-              ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
-                _createVNode(_component_var_icon, {
-                  class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-                  "var-radio-cover": "",
-                  name: "radio-blank",
-                  size: _ctx.iconSize
-                }, null, 8, ["class", "size"])
-              ]),
-              _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.n("--checked"), _ctx.n("--unchecked")],
+                [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+              )
+            ),
+            tabindex: _ctx.formDisabled || _ctx.disabled ? void 0 : "0",
+            style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor }),
+            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+          }, [
+            _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                "var-radio-cover": "",
+                name: "radio-marked",
+                size: _ctx.iconSize
+              }, null, 8, ["class", "size"])
+            ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                "var-radio-cover": "",
+                name: "radio-blank",
+                size: _ctx.iconSize
+              }, null, 8, ["class", "size"])
+            ]),
+            _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_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
             [_directive_hover, _ctx.handleHovering, "desktop"]
           ]),
@@ -80,7 +81,8 @@ function __render__(_ctx, _cache) {
                   [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
                   [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
                 )
-              )
+              ),
+              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
             },
             [
               _renderSlot(_ctx.$slots, "default")
@@ -109,6 +111,8 @@ const __sfc__ = defineComponent({
   inheritAttrs: false,
   props,
   setup(props2) {
+    const action = ref();
+    const isFocusing = ref(false);
     const value = useVModel(props2, "modelValue");
     const checked = computed(() => value.value === props2.checkedValue);
     const withAnimation = ref(false);
@@ -126,10 +130,42 @@ const __sfc__ = defineComponent({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      isFocusing: computed(() => isFocusing.value),
+      // keyboard arrow move
+      move() {
+        action.value.focus();
+        action.value.click();
+      },
+      moveable() {
+        return !(form == null ? void 0 : form.disabled.value) && !props2.disabled && !(form == null ? void 0 : form.readonly.value) && !props2.readonly;
+      }
     };
     call(bindRadioGroup, radioProvider);
     call(bindForm, radioProvider);
+    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 validateWithTrigger(trigger) {
       nextTick(() => {
         const { validateTrigger, rules, modelValue } = props2;
@@ -158,6 +194,9 @@ const __sfc__ = defineComponent({
       withAnimation.value = true;
       change(checked.value ? uncheckedValue : checkedValue);
     }
+    function handleTextClick() {
+      action.value.focus();
+    }
     function sync(v2) {
       const { checkedValue, uncheckedValue } = props2;
       value.value = v2 === checkedValue ? checkedValue : uncheckedValue;
@@ -178,6 +217,8 @@ const __sfc__ = defineComponent({
       change(changedValue);
     }
     return {
+      action,
+      isFocusing,
       withAnimation,
       checked,
       errorMessage,
@@ -189,6 +230,7 @@ const __sfc__ = defineComponent({
       n,
       classes,
       handleClick,
+      handleTextClick,
       toggle,
       reset,
       validate,

package/es/radio/radio.css

@@ -1 +1 @@
-:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; outline: none; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}

package/es/radio-group/RadioGroup.mjs

@@ -4,7 +4,8 @@ import { props } from "./props.mjs";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useRadios } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { call } from "@varlet/shared";
+import { call, preventDefault } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("radio-group");
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -58,6 +59,47 @@ const __sfc__ = defineComponent({
     watch(() => length.value, syncRadios);
     call(bindForm, radioGroupProvider);
     bindRadios(radioGroupProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    function handleKeydown(event) {
+      const focusingRadioIndex = radios.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingRadioIndex === -1) {
+        return;
+      }
+      const hasMoveableRadio = radios.some(({ moveable }, index) => index === focusingRadioIndex ? false : moveable());
+      if (!hasMoveableRadio) {
+        return;
+      }
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+        preventDefault(event);
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        moveRadio(focusingRadioIndex, "prev");
+        return;
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        moveRadio(focusingRadioIndex, "next");
+      }
+    }
+    function moveRadio(fromIndex, method) {
+      while (true) {
+        if (method === "prev") {
+          fromIndex--;
+        } else {
+          fromIndex++;
+        }
+        if (fromIndex < 0) {
+          fromIndex = radios.length - 1;
+        }
+        if (fromIndex > radios.length - 1) {
+          fromIndex = 0;
+        }
+        const radio = radios[fromIndex];
+        if (radio.moveable()) {
+          radio.move();
+          break;
+        }
+      }
+    }
     function validateWithTrigger(trigger) {
       nextTick(() => {
         const { validateTrigger, rules, modelValue } = props2;