@varlet/ui 3.0.7 → 3.1.0-alpha.1709537939980

package/es/switch/Switch.mjs

@@ -2,16 +2,18 @@ import VarFormDetails from "../form-details/index.mjs";
 import Ripple from "../ripple/index.mjs";
 import Hover from "../hover/index.mjs";
 import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
-import { defineComponent, computed, nextTick } from "vue";
+import { defineComponent, computed, nextTick, ref } from "vue";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { multiplySizeUnit } from "../utils/elements.mjs";
 import { useForm } from "../form/provide.mjs";
 import { props } from "./props.mjs";
-import { call } from "@varlet/shared";
+import { call, preventDefault } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("switch");
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ _createElementVNode(
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ _createElementVNode(
   "svg",
   { viewBox: "25 25 50 50" },
   [
@@ -25,8 +27,8 @@ const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ _createEle
   -1
   /* HOISTED */
 ));
-const _hoisted_2 = [
-  _hoisted_1
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function __render__(_ctx, _cache) {
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -42,9 +44,10 @@ function __render__(_ctx, _cache) {
       _createElementVNode(
         "div",
         {
+          ref: "switchRef",
           class: _normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")])),
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.switchActive && _ctx.switchActive(...args)),
-          style: _normalizeStyle(_ctx.styleComputed.switch)
+          style: _normalizeStyle(_ctx.styleComputed.switch),
+          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchActive && _ctx.switchActive(...args))
         },
         [
           _createElementVNode(
@@ -59,52 +62,52 @@ function __render__(_ctx, _cache) {
             6
             /* CLASS, STYLE */
           ),
-          _withDirectives((_openBlock(), _createElementBlock(
-            "div",
-            {
-              class: _normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
-              style: _normalizeStyle(_ctx.styleComputed.ripple)
-            },
-            [
-              _createElementVNode(
-                "div",
-                {
-                  style: _normalizeStyle(_ctx.styleComputed.handle),
-                  class: _normalizeClass(
-                    _ctx.classes(
-                      _ctx.n("handle"),
-                      _ctx.n("$-elevation--2"),
-                      [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")],
-                      [_ctx.errorMessage, _ctx.n("handle--error")]
-                    )
+          _withDirectives((_openBlock(), _createElementBlock("div", {
+            class: _normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
+            style: _normalizeStyle(_ctx.styleComputed.ripple),
+            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)
+          }, [
+            _createElementVNode(
+              "div",
+              {
+                style: _normalizeStyle(_ctx.styleComputed.handle),
+                class: _normalizeClass(
+                  _ctx.classes(
+                    _ctx.n("handle"),
+                    _ctx.n("$-elevation--2"),
+                    [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")],
+                    [_ctx.errorMessage, _ctx.n("handle--error")]
                   )
-                },
-                [
-                  _ctx.loading ? (_openBlock(), _createElementBlock(
-                    "span",
-                    {
-                      key: 0,
-                      class: _normalizeClass(_ctx.n("loading")),
-                      style: _normalizeStyle({
-                        width: _ctx.radius,
-                        height: _ctx.radius
-                      })
-                    },
-                    [..._hoisted_2],
-                    6
-                    /* CLASS, STYLE */
-                  )) : _createCommentVNode("v-if", true)
-                ],
-                6
-                /* CLASS, STYLE */
-              ),
-              _createVNode(_component_var_hover_overlay, { hovering: _ctx.hovering }, null, 8, ["hovering"])
-            ],
-            6
-            /* CLASS, STYLE */
-          )), [
+                )
+              },
+              [
+                _ctx.loading ? (_openBlock(), _createElementBlock(
+                  "span",
+                  {
+                    key: 0,
+                    class: _normalizeClass(_ctx.n("loading")),
+                    style: _normalizeStyle({
+                      width: _ctx.radius,
+                      height: _ctx.radius
+                    })
+                  },
+                  [..._hoisted_3],
+                  6
+                  /* CLASS, STYLE */
+                )) : _createCommentVNode("v-if", true)
+              ],
+              6
+              /* CLASS, STYLE */
+            ),
+            _createVNode(_component_var_hover_overlay, {
+              hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled,
+              focusing: _ctx.isFocusing && !_ctx.disabled && !_ctx.formDisabled
+            }, null, 8, ["hovering", "focusing"])
+          ], 46, _hoisted_1)), [
             [_directive_ripple, {
-              disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
+              disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly
             }]
           ])
         ],
@@ -128,6 +131,8 @@ const __sfc__ = defineComponent({
   directives: { Ripple, Hover },
   props,
   setup(props2) {
+    const switchRef = ref(null);
+    const isFocusing = ref(false);
     const { bindForm, form } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering, handleHovering } = useHoverOverlay();
@@ -166,6 +171,26 @@ const __sfc__ = defineComponent({
       resetValidation
     };
     call(bindForm, switchProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        switchRef.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value || event.key !== " ") {
+        return;
+      }
+      preventDefault(event);
+      switchRef.value.click();
+    }
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
@@ -189,8 +214,11 @@ const __sfc__ = defineComponent({
         "onUpdate:modelValue": updateModelValue,
         onBeforeChange
       } = props2;
+      if (disabled || (form == null ? void 0 : form.disabled.value)) {
+        return;
+      }
       call(onClick, event);
-      if (disabled || loading || readonly || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
+      if (loading || readonly || (form == null ? void 0 : form.readonly.value)) {
         return;
       }
       const newValue = modelValue === activeValue ? inactiveValue : activeValue;
@@ -216,7 +244,9 @@ const __sfc__ = defineComponent({
       resetValidation();
     }
     return {
+      switchRef,
       hovering,
+      isFocusing,
       radius,
       styleComputed,
       errorMessage,

package/es/switch/switch.css

@@ -1 +1 @@
-:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-disabled-opacity: var(--opacity-disabled);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; height: 24px; width: 40px; transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity)); height: 14.4px; width: 38px; border-radius: calc(20px * 2 / 3);}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; transition: 0.3s var(--cubic-bezier); width: 40px; height: 40px; left: -10px;}.var-switch__ripple--active { left: 10px;}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: 20px; height: 20px;}.var-switch__handle--active { background-color: var(--switch-handle-active-background);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch__loading { display: inline-block; width: 16px; height: 16px; animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}
+:root { --switch-track-background: #fff; --switch-track-active-background: var(--color-primary); --switch-track-error-background: var(--color-danger); --switch-ripple-color: var(--color-primary); --switch-handle-background: #fff; --switch-handle-color: #fff; --switch-handle-active-background: var(--color-primary); --switch-handle-error-background: var(--color-danger); --switch-disabled-opacity: var(--opacity-disabled);}.var-switch { display: inline-block;}.var-switch__block { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; height: 24px; width: 40px; transition: filter 0.25s;}.var-switch--disabled { filter: opacity(var(--switch-disabled-opacity)); cursor: not-allowed;}.var-switch__track { background-color: var(--switch-track-background); transition: background-color 0.25s; filter: opacity(var(--switch-disabled-opacity)); height: 14.4px; width: 38px; border-radius: calc(20px * 2 / 3);}.var-switch__track--active { background-color: var(--switch-track-active-background);}.var-switch__track--error { background-color: var(--switch-track-error-background) !important;}.var-switch__ripple { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--switch-ripple-color); border-radius: 50%; overflow: hidden; outline: none; transition: 0.3s var(--cubic-bezier); width: 40px; height: 40px; left: -10px;}.var-switch__ripple--active { left: 10px;}.var-switch__handle { border-radius: 50%; background-color: var(--switch-handle-background); display: flex; align-items: center; justify-content: center; color: var(--switch-handle-color); transition: background-color 0.25s; width: 20px; height: 20px;}.var-switch__handle--active { background-color: var(--switch-handle-active-background);}.var-switch__handle--error { background-color: var(--switch-handle-error-background) !important;}.var-switch__loading { display: inline-block; width: 16px; height: 16px; animation: circle 1.8s linear infinite;}.var-switch__loading svg { display: block; width: 100%; height: 100%;}.var-switch__loading svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}

package/es/tab/tab.css

@@ -1 +1 @@
-:root { --tab-padding: 12px; --tab-active-color: var(--color-primary); --tab-inactive-color: #646566; --tab-disabled-color: var(--color-text-disabled); --tab-font-size: var(--font-size-md); --tab-font-weight: 400;}.var-tab { display: flex; justify-content: center; align-items: center; flex: 1 0 auto; padding: 0 var(--tab-padding); font-size: var(--tab-font-size); font-weight: var(--tab-font-weight); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-tab--active { color: var(--tab-active-color);}.var-tab--inactive { color: var(--tab-inactive-color);}.var-tab--disabled { color: var(--tab-disabled-color); cursor: not-allowed;}.var-tab--horizontal { flex-direction: row;}.var-tab--vertical { flex-direction: column;}
+:root { --tab-padding: 12px; --tab-active-color: var(--color-primary); --tab-inactive-color: #646566; --tab-disabled-color: var(--color-text-disabled); --tab-font-size: var(--font-size-md); --tab-font-weight: 400; --tab-active-font-size: var(--font-size-md); --tab-active-font-weight: 400;}.var-tab { display: flex; justify-content: center; align-items: center; flex: 1 0 auto; padding: 0 var(--tab-padding); font-size: var(--tab-font-size); font-weight: var(--tab-font-weight); cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-tab--active { color: var(--tab-active-color); font-size: var(--tab-active-font-size); font-weight: var(--tab-active-font-weight);}.var-tab--inactive { color: var(--tab-inactive-color);}.var-tab--disabled { color: var(--tab-disabled-color); cursor: not-allowed;}.var-tab--horizontal { flex-direction: row;}.var-tab--vertical { flex-direction: column;}

package/es/themes/dark/link.mjs

@@ -6,7 +6,8 @@ var stdin_default = {
   "--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-font-size": "var(--font-size-md)",
+  "--link-focus-opacity": "0.8"
 };
 export {
   stdin_default as default

package/es/themes/dark/paper.mjs

@@ -1,5 +1,6 @@
 var stdin_default = {
-  "--paper-background": "var(--color-surface-container-highest)"
+  "--paper-background": "var(--color-surface-container-highest)",
+  "--paper-border-radius": "4px"
 };
 export {
   stdin_default as default

package/es/themes/dark/tab.mjs

@@ -4,7 +4,9 @@ var stdin_default = {
   "--tab-active-color": "var(--color-primary)",
   "--tab-disabled-color": "var(--color-text-disabled)",
   "--tab-font-size": "var(--font-size-md)",
-  "--tab-font-weight": "400"
+  "--tab-font-weight": "400",
+  "--tab-active-font-size": "var(--font-size-md)",
+  "--tab-active-font-weight": "400"
 };
 export {
   stdin_default as default

package/es/themes/md3-dark/link.mjs

@@ -6,7 +6,8 @@ var stdin_default = {
   "--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-font-size": "var(--font-size-md)",
+  "--link-focus-opacity": "0.8"
 };
 export {
   stdin_default as default

package/es/themes/md3-dark/paper.mjs

@@ -1,5 +1,6 @@
 var stdin_default = {
-  "--paper-background": "var(--color-surface-container-high)"
+  "--paper-background": "var(--color-surface-container-highest)",
+  "--paper-border-radius": "12px"
 };
 export {
   stdin_default as default

package/es/themes/md3-dark/tab.mjs

@@ -4,7 +4,9 @@ var stdin_default = {
   "--tab-active-color": "var(--color-primary)",
   "--tab-disabled-color": "var(--color-text-disabled)",
   "--tab-font-size": "var(--font-size-md)",
-  "--tab-font-weight": "400"
+  "--tab-font-weight": "400",
+  "--tab-active-font-size": "var(--font-size-md)",
+  "--tab-active-font-weight": "400"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/link.mjs

@@ -6,7 +6,8 @@ var stdin_default = {
   "--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-font-size": "var(--font-size-md)",
+  "--link-focus-opacity": "0.8"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/paper.mjs

@@ -1,5 +1,6 @@
 var stdin_default = {
-  "--paper-background": "var(--color-surface-container-low)"
+  "--paper-background": "var(--color-surface-container-low)",
+  "--paper-border-radius": "12px"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/tab.mjs

@@ -4,7 +4,9 @@ var stdin_default = {
   "--tab-active-color": "var(--color-primary)",
   "--tab-disabled-color": "var(--color-text-disabled)",
   "--tab-font-size": "var(--font-size-md)",
-  "--tab-font-weight": "400"
+  "--tab-font-weight": "400",
+  "--tab-active-font-size": "var(--font-size-md)",
+  "--tab-active-font-weight": "400"
 };
 export {
   stdin_default as default

package/es/tooltip/props.mjs

@@ -40,7 +40,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/uploader/Uploader.mjs

@@ -32,6 +32,7 @@ import { isHTMLSupportImage, isHTMLSupportVideo } from "../utils/shared.mjs";
 import { useValidation, createNamespace, formatElevation } from "../utils/components.mjs";
 import { useForm } from "../form/provide.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
+import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("uploader");
 let fid = 0;
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, renderSlot as _renderSlot, withCtx as _withCtx, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
@@ -39,8 +40,9 @@ const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = ["onClick"];
 const _hoisted_3 = ["src", "alt"];
-const _hoisted_4 = ["multiple", "accept", "capture", "disabled"];
-const _hoisted_5 = ["src"];
+const _hoisted_4 = ["tabindex"];
+const _hoisted_5 = ["multiple", "accept", "capture", "disabled"];
+const _hoisted_6 = ["src"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -126,45 +128,45 @@ function __render__(_ctx, _cache) {
             128
             /* KEYED_FRAGMENT */
           )),
-          !_ctx.maxlength || _ctx.modelValue.length < _ctx.toNumber(_ctx.maxlength) ? _withDirectives((_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(
-                _ctx.classes(
-                  [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
-                  [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
-                )
-              ),
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleActionClick && _ctx.handleActionClick(...args))
-            },
-            [
-              _createElementVNode("input", {
-                ref: "input",
-                type: "file",
-                class: _normalizeClass(_ctx.n("action-input")),
-                multiple: _ctx.multiple,
-                accept: _ctx.accept,
-                capture: _ctx.capture,
-                disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
-                onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
-                onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
-                }, ["stop"]))
-              }, null, 42, _hoisted_4),
-              _renderSlot(_ctx.$slots, "default", {}, () => [
-                _createVNode(_component_var_icon, {
-                  class: _normalizeClass(_ctx.n("action-icon")),
-                  "var-uploader-cover": "",
-                  name: "plus"
-                }, null, 8, ["class"]),
-                _createVNode(_component_var_hover_overlay, {
-                  hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled
-                }, null, 8, ["hovering"])
-              ])
-            ],
-            2
-            /* CLASS */
-          )), [
+          !_ctx.maxlength || _ctx.modelValue.length < _ctx.toNumber(_ctx.maxlength) ? _withDirectives((_openBlock(), _createElementBlock("div", {
+            key: 0,
+            ref: "actionRef",
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("--outline-none"),
+                [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
+                [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
+              )
+            ),
+            tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleActionClick && _ctx.handleActionClick(...args)),
+            onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.isFocusing = false)
+          }, [
+            _createElementVNode("input", {
+              ref: "input",
+              type: "file",
+              class: _normalizeClass(_ctx.n("action-input")),
+              multiple: _ctx.multiple,
+              accept: _ctx.accept,
+              capture: _ctx.capture,
+              disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
+              onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
+              onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
+              }, ["stop"]))
+            }, null, 42, _hoisted_5),
+            _renderSlot(_ctx.$slots, "default", {}, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.n("action-icon")),
+                "var-uploader-cover": "",
+                name: "plus"
+              }, null, 8, ["class"]),
+              _createVNode(_component_var_hover_overlay, {
+                hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly,
+                focusing: _ctx.isFocusing && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly
+              }, null, 8, ["hovering", "focusing"])
+            ])
+          ], 42, _hoisted_4)), [
             [_directive_ripple, {
               disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple || Boolean(_ctx.$slots.default)
             }],
@@ -194,8 +196,8 @@ function __render__(_ctx, _cache) {
         "var-uploader-cover": "",
         position: "center",
         show: _ctx.showPreview,
-        "onUpdate:show": _cache[3] || (_cache[3] = ($event) => _ctx.showPreview = $event),
-        onClosed: _cache[4] || (_cache[4] = ($event) => _ctx.currentPreview = null)
+        "onUpdate:show": _cache[5] || (_cache[5] = ($event) => _ctx.showPreview = $event),
+        onClosed: _cache[6] || (_cache[6] = ($event) => _ctx.currentPreview = null)
       }, {
         default: _withCtx(() => {
           var _a, _b;
@@ -210,7 +212,7 @@ function __render__(_ctx, _cache) {
               "x5-video-player-fullscreen": "false",
               controls: "",
               src: (_b = _ctx.currentPreview) == null ? void 0 : _b.url
-            }, null, 10, _hoisted_5)) : _createCommentVNode("v-if", true)
+            }, null, 10, _hoisted_6)) : _createCommentVNode("v-if", true)
           ];
         }),
         _: 1
@@ -232,6 +234,8 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
+    const isFocusing = ref(false);
+    const actionRef = ref(null);
     const input = ref(null);
     const showPreview = ref(false);
     const currentPreview = ref(null);
@@ -270,6 +274,8 @@ const __sfc__ = defineComponent({
       reset
     };
     call(bindForm, uploaderProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
     watch(
       () => props2.modelValue,
       () => {
@@ -278,6 +284,24 @@ const __sfc__ = defineComponent({
       },
       { deep: true }
     );
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+      }
+      if (event.key === "Enter") {
+        actionRef.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value || event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      actionRef.value.click();
+    }
     function preview(varFile) {
       const { disabled, previewed, preventDefaultPreview, onPreview } = props2;
       if ((form == null ? void 0 : form.disabled.value) || disabled || !previewed) {
@@ -448,12 +472,14 @@ const __sfc__ = defineComponent({
     }
     return {
       input,
+      actionRef,
       files,
       showPreview,
       currentPreview,
       errorMessage,
       maxlengthText,
       hovering,
+      isFocusing,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       n,

package/es/uploader/uploader.css

@@ -1 +1 @@
-:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-border-radius: 0; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-file-progress-color: var(--color-primary); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); border-radius: var(--uploader-file-border-radius); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); border-radius: var(--uploader-file-border-radius); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; width: 0; height: 0; visibility: hidden;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader__progress { width: 0%; height: 100%; background-color: var(--uploader-file-progress-color); transition: all 0.25s ease-in-out;}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}
+:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-border-radius: 0; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-file-progress-color: var(--color-primary); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); border-radius: var(--uploader-file-border-radius); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); border-radius: var(--uploader-file-border-radius); transition: background-color 0.25s; cursor: pointer;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { display: block; width: 0; height: 0; visibility: hidden;}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader__progress { width: 0%; height: 100%; background-color: var(--uploader-file-progress-color); transition: all 0.25s ease-in-out;}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color); cursor: not-allowed;}.var-uploader--outline-none { outline: none;}

package/es/utils/elements.mjs

@@ -163,7 +163,39 @@ function formatStyleVars(styleVars) {
 function padStartFlex(style) {
   return style === "start" || style === "end" ? `flex-${style}` : style;
 }
+const focusableSelector = ["button", "input", "select", "textarea", "[tabindex]", "[href]"].map((s) => `${s}:not([disabled])`).join(", ");
+function focusChildElementByKey(hostElement, parentElement, key) {
+  var _a;
+  const focusableElements = parentElement.querySelectorAll(focusableSelector);
+  if (!focusableElements.length) {
+    return;
+  }
+  const isActiveHostElement = [hostElement, ...Array.from(hostElement.querySelectorAll(focusableSelector))].findIndex(
+    (el) => el === document.activeElement
+  ) !== -1;
+  const activeElementIndex = Array.from(focusableElements).findIndex((el) => el === document.activeElement);
+  if (key === "ArrowDown") {
+    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === focusableElements.length - 1) {
+      focusableElements[0].focus();
+      return;
+    }
+    if (activeElementIndex !== -1 && activeElementIndex < focusableElements.length - 1) {
+      focusableElements[activeElementIndex + 1].focus();
+      return;
+    }
+  }
+  if (key === "ArrowUp") {
+    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === 0) {
+      (_a = focusableElements[focusableElements.length - 1]) == null ? void 0 : _a.focus();
+      return;
+    }
+    if (activeElementIndex > 0) {
+      focusableElements[activeElementIndex - 1].focus();
+    }
+  }
+}
 export {
+  focusChildElementByKey,
   formatStyleVars,
   getAllParentScroller,
   getLeft,