@varlet/ui 3.2.13 → 3.2.14

package/es/swipe/Swipe.mjs

@@ -26,8 +26,9 @@ 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;
 const SWIPE_OFFSET = 20;
 const { name, n, classes } = createNamespace("swipe");
@@ -50,10 +51,10 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.classes(_ctx.n("track"), [_ctx.vertical, _ctx.n("--vertical")])),
           style: _normalizeStyle({
-            width: !_ctx.vertical ? `${_ctx.trackSize}px` : void 0,
-            height: _ctx.vertical ? `${_ctx.trackSize}px` : void 0,
-            transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.trackTranslate}px)`,
-            transitionDuration: _ctx.lockDuration ? `0ms` : `${_ctx.toNumber(_ctx.duration)}ms`
+            width: !_ctx.vertical ? _ctx.toSizeUnit(_ctx.trackSize) : void 0,
+            height: _ctx.vertical ? _ctx.toSizeUnit(_ctx.trackSize) : void 0,
+            transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.toSizeUnit(_ctx.trackTranslate)})`,
+            transitionDuration: _ctx.lockDuration ? "0ms" : `${_ctx.toNumber(_ctx.duration)}ms`
           }),
           onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
           onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
@@ -235,6 +236,7 @@ const __sfc__ = defineComponent({
       vertical
     };
     bindSwipeItems(swipeProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
     call(bindPopup, null);
     watch(
       () => length.value,
@@ -406,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;
@@ -489,6 +508,7 @@ const __sfc__ = defineComponent({
       lockDuration,
       hovering,
       n,
+      toSizeUnit,
       classes,
       handleTouchstart,
       handleTouchmove,

package/es/swipe-item/SwipeItem.mjs

@@ -1,6 +1,7 @@
-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";
 const { name, n } = createNamespace("swipe-item");
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
@@ -9,24 +10,28 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.n()),
     style: _normalizeStyle({
-      width: !_ctx.vertical ? `${_ctx.size}px` : void 0,
-      height: _ctx.vertical ? `${_ctx.size}px` : void 0,
-      transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.translate}px)`
+      width: !_ctx.vertical ? _ctx.toSizeUnit(_ctx.size) : void 0,
+      height: _ctx.vertical ? _ctx.toSizeUnit(_ctx.size) : void 0,
+      transform: `translate${_ctx.vertical ? "Y" : "X"}(${_ctx.toSizeUnit(_ctx.translate)})`
     }),
     tabindex: "-1",
-    "aria-hidden": _ctx.currentIndex === _ctx.index ? "false" : "true"
+    "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);
@@ -34,12 +39,14 @@ const __sfc__ = defineComponent({
       translate.value = x;
     }
     return {
-      n,
+      isFocusing,
       size,
       index,
       currentIndex,
       vertical,
-      translate
+      translate,
+      n,
+      toSizeUnit
     };
   }
 });

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;}