@varlet/ui 2.16.6 → 2.16.7-alpha.1695050636971

package/lib/varlet.cjs.js

@@ -13848,6 +13848,10 @@ var props$E = {
     type: [String, Number],
     default: 0
   },
+  navigation: {
+    type: [Boolean, String],
+    default: false
+  },
   indicator: {
     type: Boolean,
     default: true
@@ -13898,7 +13902,10 @@ var {
 } = createNamespace("swipe");
 var _hoisted_1$k = ["onClick"];
 function __render__$I(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock(
+  var _component_var_icon = vue.resolveComponent("var-icon");
+  var _component_var_button = vue.resolveComponent("var-button");
+  var _directive_hover = vue.resolveDirective("hover");
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "div",
     {
       class: vue.normalizeClass(_ctx.n()),
@@ -13927,13 +13934,88 @@ function __render__$I(_ctx, _cache) {
       [vue.renderSlot(_ctx.$slots, "default")],
       38
       /* CLASS, STYLE, HYDRATE_EVENTS */
-    ), vue.renderSlot(_ctx.$slots, "indicator", {
+    ), _ctx.navigation ? vue.renderSlot(_ctx.$slots, "prev", vue.normalizeProps(vue.mergeProps({
+      key: 0
+    }, {
+      index: _ctx.index,
+      length: _ctx.length,
+      prev: _ctx.prev,
+      next: _ctx.next,
+      to: _ctx.to,
+      hovering: _ctx.hovering
+    })), () => [vue.createVNode(vue.Transition, {
+      name: _ctx.getNavigationAnimation("prev")
+    }, {
+      default: vue.withCtx(() => [_ctx.navigation === true || _ctx.hovering ? (vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("navigation"), _ctx.n("navigation-prev"), [_ctx.vertical, _ctx.n("--navigation-vertical-prev")]))
+        },
+        [vue.createVNode(_component_var_button, {
+          "var-swipe-cover": "",
+          disabled: !_ctx.loop && _ctx.index === 0,
+          class: vue.normalizeClass(_ctx.n("navigation-prev-button")),
+          onClick: _cache[3] || (_cache[3] = ($event) => _ctx.prev())
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(_component_var_icon, {
+            "var-swipe-cover": "",
+            class: vue.normalizeClass(_ctx.n("navigation-prev-button-icon")),
+            name: _ctx.vertical ? "chevron-up" : "chevron-left"
+          }, null, 8, ["class", "name"])]),
+          _: 1
+          /* STABLE */
+        }, 8, ["disabled", "class"])],
+        2
+        /* CLASS */
+      )) : vue.createCommentVNode("v-if", true)]),
+      _: 1
+      /* STABLE */
+    }, 8, ["name"])]) : vue.createCommentVNode("v-if", true), _ctx.navigation ? vue.renderSlot(_ctx.$slots, "next", vue.normalizeProps(vue.mergeProps({
+      key: 1
+    }, {
+      index: _ctx.index,
+      length: _ctx.length,
+      hovering: _ctx.hovering,
+      prev: _ctx.prev,
+      next: _ctx.next,
+      to: _ctx.to
+    })), () => [vue.createVNode(vue.Transition, {
+      name: _ctx.getNavigationAnimation("next")
+    }, {
+      default: vue.withCtx(() => [_ctx.navigation === true || _ctx.hovering ? (vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("navigation"), _ctx.n("navigation-next"), [_ctx.vertical, _ctx.n("--navigation-vertical-next")]))
+        },
+        [vue.createVNode(_component_var_button, {
+          "var-swipe-cover": "",
+          class: vue.normalizeClass(_ctx.n("navigation-next-button")),
+          disabled: !_ctx.loop && _ctx.index === _ctx.length - 1,
+          onClick: _cache[4] || (_cache[4] = ($event) => _ctx.next())
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(_component_var_icon, {
+            "var-swipe-cover": "",
+            class: vue.normalizeClass(_ctx.n("navigation-next-button-icon")),
+            name: _ctx.vertical ? "chevron-down" : "chevron-right"
+          }, null, 8, ["class", "name"])]),
+          _: 1
+          /* STABLE */
+        }, 8, ["class", "disabled"])],
+        2
+        /* CLASS */
+      )) : vue.createCommentVNode("v-if", true)]),
+      _: 1
+      /* STABLE */
+    }, 8, ["name"])]) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "indicator", vue.normalizeProps(vue.guardReactiveProps({
       index: _ctx.index,
       length: _ctx.length,
+      hovering: _ctx.hovering,
       prev: _ctx.prev,
       next: _ctx.next,
       to: _ctx.to
-    }, () => [_ctx.indicator && _ctx.length ? (vue.openBlock(), vue.createElementBlock(
+    })), () => [_ctx.indicator && _ctx.length ? (vue.openBlock(), vue.createElementBlock(
       "div",
       {
         key: 0,
@@ -13960,10 +14042,17 @@ function __render__$I(_ctx, _cache) {
     )) : vue.createCommentVNode("v-if", true)])],
     2
     /* CLASS */
-  );
+  )), [[_directive_hover, _ctx.handleHovering]]);
 }
 var __sfc__$J = vue.defineComponent({
   name: name$E,
+  directives: {
+    Hover: Hover$1
+  },
+  components: {
+    VarButton: Button,
+    VarIcon: Icon
+  },
   props: props$E,
   setup(props2) {
     var swipeEl = vue.ref(null);
@@ -13973,6 +14062,7 @@ var __sfc__$J = vue.defineComponent({
     var trackTranslate = vue.ref(0);
     var lockDuration = vue.ref(false);
     var index = vue.ref(0);
+    var hovering = vue.ref(false);
     var {
       swipeItems,
       bindSwipeItems,
@@ -14283,6 +14373,17 @@ var __sfc__$J = vue.defineComponent({
         });
       });
     }
+    var handleHovering = (value) => {
+      if (props2.navigation === "hover") {
+        hovering.value = value;
+      }
+    };
+    function getNavigationAnimation(type) {
+      if (props2.navigation !== "hover") {
+        return "";
+      }
+      return props2.vertical ? n$H("--navigation-vertical-" + type + "-animation") : n$H("--navigation-" + type + "-animation");
+    }
     return {
       length,
       index,
@@ -14290,6 +14391,7 @@ var __sfc__$J = vue.defineComponent({
       trackSize,
       trackTranslate,
       lockDuration,
+      hovering,
       n: n$H,
       classes: classes$A,
       handleTouchstart,
@@ -14299,7 +14401,9 @@ var __sfc__$J = vue.defineComponent({
       prev,
       to,
       resize,
-      toNumber
+      toNumber,
+      handleHovering,
+      getNavigationAnimation
     };
   }
 });
@@ -24748,7 +24852,7 @@ const uploader = "";
 const UploaderSfc = "";
 const watermark = "";
 const WatermarkSfc = "";
-const version = "2.16.6";
+const version = "2.16.7-alpha.1695050636971";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.16.6",
+  "version": "2.16.7-alpha.1695050636971",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.16.6",
-    "@varlet/use": "2.16.6",
-    "@varlet/shared": "2.16.6"
+    "@varlet/icons": "2.16.7-alpha.1695050636971",
+    "@varlet/shared": "2.16.7-alpha.1695050636971",
+    "@varlet/use": "2.16.7-alpha.1695050636971"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.16.6",
-    "@varlet/touch-emulator": "2.16.6",
-    "@varlet/ui": "2.16.6"
+    "@varlet/touch-emulator": "2.16.7-alpha.1695050636971",
+    "@varlet/ui": "2.16.7-alpha.1695050636971",
+    "@varlet/cli": "2.16.7-alpha.1695050636971"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/swipe.d.ts

@@ -7,6 +7,8 @@ export interface SwipeToOptions {
   event?: boolean
 }
 
+export type SwipeNavigation = 'hover'
+
 export interface SwipeProps extends BasicAttributes {
   loop?: boolean
   autoplay?: string | number
@@ -16,6 +18,7 @@ export interface SwipeProps extends BasicAttributes {
   indicatorColor?: string
   vertical?: boolean
   touchable?: boolean
+  navigation?: boolean | SwipeNavigation
   onChange?: ListenerProp<(index: number) => void>
 }
 
@@ -28,6 +31,7 @@ export type SwipeTo = (index: number, options?: SwipeToOptions) => void
 export interface SwipeIndicatorData {
   index: number
   length: number
+  hovering: boolean
   prev: SwipePrev
   next: SwipeNext
   to: SwipeTo
@@ -38,6 +42,8 @@ export class Swipe extends VarComponent {
 
   $slots: {
     default(): VNode[]
+    prev(data: SwipeIndicatorData): VNode[]
+    next(data: SwipeIndicatorData): VNode[]
     indicator(data: SwipeIndicatorData): VNode[]
   }