@varlet/ui 3.2.14-alpha.1717685185218 → 3.2.14

package/es/swipe/Swipe.mjs

@@ -26,7 +26,7 @@ import { useSwipeItems } from "./provide.mjs";
 import { props } from "./props.mjs";
 import { clamp, isNumber, toNumber, doubleRaf, preventDefault, call } from "@varlet/shared";
 import { createNamespace } from "../utils/components.mjs";
-import { onSmartUnmounted, onWindowResize, useTouch } from "@varlet/use";
+import { onSmartUnmounted, onWindowResize, useEventListener, useTouch } from "@varlet/use";
 import { usePopup } from "../popup/provide.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 const SWIPE_DELAY = 250;
@@ -236,6 +236,7 @@ const __sfc__ = defineComponent({
       vertical
     };
     bindSwipeItems(swipeProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
     call(bindPopup, null);
     watch(
       () => length.value,
@@ -407,6 +408,23 @@ const __sfc__ = defineComponent({
       }
       return n(`--navigation${props2.vertical ? "-vertical" : ""}-${type}-animation`);
     }
+    function handleKeydown(event) {
+      if (!swipeItems.length) {
+        return;
+      }
+      const focusingSwipeItemIndex = swipeItems.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingSwipeItemIndex === -1) {
+        return;
+      }
+      const { key } = event;
+      preventDefault(event);
+      if (key === "ArrowLeft") {
+        prev();
+      }
+      if (key === "ArrowRight") {
+        next();
+      }
+    }
     function resize() {
       if (!swipeEl.value) {
         return;

package/es/swipe-item/SwipeItem.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useSwipe } from "./provide.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
@@ -15,19 +15,23 @@ function __render__(_ctx, _cache) {
       transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.toSizeUnit(_ctx.translate)})`
     }),
     tabindex: "-1",
-    "aria-hidden": _ctx.currentIndex !== _ctx.index
+    "aria-hidden": _ctx.currentIndex !== _ctx.index,
+    onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
   }, [
     _renderSlot(_ctx.$slots, "default")
-  ], 14, _hoisted_1);
+  ], 46, _hoisted_1);
 }
 const __sfc__ = defineComponent({
   name,
   setup() {
     const translate = ref(0);
+    const isFocusing = ref(false);
     const { swipe, bindSwipe, index } = useSwipe();
     const { size, currentIndex, vertical } = swipe;
     const swipeItemProvider = {
       index,
+      isFocusing: computed(() => isFocusing.value),
       setTranslate
     };
     bindSwipe(swipeItemProvider);
@@ -35,6 +39,7 @@ const __sfc__ = defineComponent({
       translate.value = x;
     }
     return {
+      isFocusing,
       size,
       index,
       currentIndex,

package/es/swipe-item/swipeItem.css

@@ -1 +1 @@
-.var-swipe-item { flex-shrink: 0; width: 100%; height: 100%;}
+.var-swipe-item { flex-shrink: 0; width: 100%; height: 100%;}.var-swipe-item:focus { outline: none;}