feat(swipe): support navigation prop and prev and next slots (#1177)

varletjs · Sep 18, 2023 · d717f0c · d717f0c
1 parent 0fbcce8
commit d717f0c
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/image-preview/__tests__/__snapshots__/component.spec.js.snap b/packages/varlet-ui/src/image-preview/__tests__/__snapshots__/component.spec.js.snap
@@ -13,6 +13,8 @@ exports[`test image preview imagePreventDefault 1`] = `
             </div>
           </div>
           <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
         </div>
         <!--v-if-->
         <div class=\\"var-image-preview__extra\\"></div>
@@ -37,6 +39,8 @@ exports[`test image preview initialIndex 1`] = `
               <div class=\\"var-image-preview__zoom-container\\" style=\\"transform: scale(1) translate(0px, 0px);\\"><img class=\\"var-image-preview__image\\" src=\\"https://varlet.gitee.io/varlet-ui/cat2.jpg\\" alt=\\"https://varlet.gitee.io/varlet-ui/cat2.jpg\\"></div>
             </div>
           </div>
+          <!--v-if-->
+          <!--v-if-->
           <div class=\\"var-image-preview__indicators\\">2 / 2</div>
         </div>
         <!--v-if-->

diff --git a/packages/varlet-ui/src/swipe/Swipe.vue b/packages/varlet-ui/src/swipe/Swipe.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="n()" ref="swipeEl">
+  <div :class="n()" ref="swipeEl" v-hover:desktop="handleHovering">
     <div
       :class="classes(n('track'), [vertical, n('--vertical')])"
       :style="{
@@ -15,6 +15,34 @@
       <slot />
     </div>
 
+    <slot v-if="navigation" name="prev" :index="index" :length="length" :prev="prev" :next="next" :to="to">
+      <transition :name="navigation === 'hover' ? n('--navigation-prev-transition') : ''">
+        <div
+          v-if="hovering || navigation === true"
+          :class="classes(n('navigation'), n('navigation-prev'))"
+          @click="prev()"
+        >
+          <var-button var-swipe-cover :class="n('navigation-prev-button')">
+            <var-icon var-swipe-cover :class="n('navigation-prev-button-icon')" name="chevron-left" />
+          </var-button>
+        </div>
+      </transition>
+    </slot>
+
+    <slot v-if="navigation" name="next" :index="index" :length="length" :prev="prev" :next="next" :to="to">
+      <transition :name="navigation === 'hover' ? n('--navigation-next-transition') : ''">
+        <div
+          v-if="hovering || navigation === true"
+          :class="classes(n('navigation'), n('navigation-next'))"
+          @click="next()"
+        >
+          <var-button var-swipe-cover :class="n('navigation-next-button')">
+            <var-icon var-swipe-cover :class="n('navigation-next-button-icon')" name="chevron-right" />
+          </var-button>
+        </div>
+      </transition>
+    </slot>
+
     <slot name="indicator" :index="index" :length="length" :prev="prev" :next="next" :to="to">
       <div :class="classes(n('indicators'), [vertical, n('--indicators-vertical')])" v-if="indicator && length">
         <div
@@ -32,6 +60,8 @@
 </template>
 
 <script lang="ts">
+import VarButton from '../button'
+import Hover from '../hover'
 import { defineComponent, ref, computed, watch, onActivated } from 'vue'
 import { useSwipeItems, type SwipeProvider } from './provide'
 import { props, type SwipeToOptions } from './props'
@@ -48,6 +78,8 @@ const { name, n, classes } = createNamespace('swipe')
 
 export default defineComponent({
   name,
+  directives: { Hover },
+  components: { VarButton },
   props,
   setup(props) {
     const swipeEl = ref<HTMLElement | null>(null)
@@ -57,6 +89,7 @@ export default defineComponent({
     const trackTranslate = ref(0)
     const lockDuration = ref(false)
     const index = ref(0)
+    const hovering = ref(false)
     const { swipeItems, bindSwipeItems, length } = useSwipeItems()
     const { popup, bindPopup } = usePopup()
     const {
@@ -399,13 +432,20 @@ export default defineComponent({
       })
     }
 
+    const handleHovering = (value: boolean) => {
+      if (props.navigation === 'hover') {
+        hovering.value = value
+      }
+    }
+
     return {
       length,
       index,
       swipeEl,
       trackSize,
       trackTranslate,
       lockDuration,
+      hovering,
       n,
       classes,
       handleTouchstart,
@@ -416,6 +456,7 @@ export default defineComponent({
       to,
       resize,
       toNumber,
+      handleHovering,
     }
   },
 })

diff --git a/packages/varlet-ui/src/swipe/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/swipe/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,68 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test swipe component props > test swipe navigation 1`] = `
+"<div class=\\"var-swipe\\" style=\\"width: 100px; height: 100px;\\">
+  <div class=\\"var-swipe__track\\" style=\\"width: 0px; transform: translateX(0px); transition-duration: 300ms;\\">
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">1</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">2</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">3</div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`test swipe component props > test swipe navigation 2`] = `
+"<div class=\\"var-swipe\\" style=\\"width: 100px; height: 100px;\\">
+  <div class=\\"var-swipe__track\\" style=\\"width: 0px; transform: translateX(0px); transition-duration: 300ms;\\">
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">1</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">2</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">3</div>
+  </div>
+  <transition-stub name=\\"var-swipe--navigation-prev-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <div class=\\"var-swipe__navigation var-swipe__navigation-prev\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2 var-swipe__navigation-prev-button\\" type=\\"button\\" var-swipe-cover=\\"\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">
+          <var-icon var-swipe-cover=\\"\\" class=\\"var-swipe__navigation-prev-button-icon\\" name=\\"chevron-left\\"></var-icon>
+        </div>
+        <div class=\\"var-hover-overlay\\"></div>
+      </button></div>
+  </transition-stub>
+  <transition-stub name=\\"var-swipe--navigation-next-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <div class=\\"var-swipe__navigation var-swipe__navigation-next\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2 var-swipe__navigation-next-button\\" type=\\"button\\" var-swipe-cover=\\"\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">
+          <var-icon var-swipe-cover=\\"\\" class=\\"var-swipe__navigation-next-button-icon\\" name=\\"chevron-right\\"></var-icon>
+        </div>
+        <div class=\\"var-hover-overlay\\"></div>
+      </button></div>
+  </transition-stub>
+  <div class=\\"var-swipe__indicators\\">
+    <div class=\\"var-swipe__indicator var-swipe--indicator-active\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`test swipe component props > test swipe navigation 3`] = `
+"<div class=\\"var-swipe\\" style=\\"width: 100px; height: 100px;\\">
+  <div class=\\"var-swipe__track\\" style=\\"width: 0px; transform: translateX(0px); transition-duration: 300ms;\\">
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">1</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">2</div>
+    <div class=\\"var-swipe-item\\" style=\\"width: 0px; transform: translateX(0px);\\">3</div>
+  </div>
+  <transition-stub name=\\"var-swipe--navigation-prev-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub name=\\"var-swipe--navigation-next-transition\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <!--v-if-->
+  </transition-stub>
+  <div class=\\"var-swipe__indicators\\">
+    <div class=\\"var-swipe__indicator var-swipe--indicator-active\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+    <div class=\\"var-swipe__indicator\\"></div>
+  </div>
+</div>"
+`;
diff --git a/packages/varlet-ui/src/swipe/__tests__/index.spec.js b/packages/varlet-ui/src/swipe/__tests__/index.spec.js
@@ -196,4 +196,26 @@ describe('test swipe component props', () => {
     expect(onChange).toHaveBeenCalledTimes(0)
     wrapper.unmount()
   })
+
+  test('test swipe navigation', async () => {
+    const wrapper = mount(Wrapper, {
+      props: {
+        navigation: true,
+      },
+    })
+
+    expect(wrapper.find('.var-swipe__navigation').exists()).toBe(true)
+    await wrapper.setProps({ navigation: false })
+    expect(wrapper.find('.var-swipe__navigation').exists()).toBe(false)
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ navigation: 'hover' })
+
+    await wrapper.trigger('mouseenter')
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.trigger('mouseleave')
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.unmount()
+  })
 })
diff --git a/packages/varlet-ui/src/swipe/docs/en-US.md b/packages/varlet-ui/src/swipe/docs/en-US.md
@@ -124,6 +124,37 @@
 </style>
 ```
 
+### Navigation
+
+```html
+<template>
+  <var-swipe class="swipe-example" navigation="hover">
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat2.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat3.jpg">
+    </var-swipe-item>
+  </var-swipe>
+</template>
+
+<style>
+.swipe-example {
+  height: 160px;
+}
+
+.swipe-example-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+</style>
+```
+
 ### Handle Change
 
 ```html
@@ -239,6 +270,7 @@ import { Snackbar } from '@varlet/ui'
 | `indicator-color` | Indicator color                  | _string_           | `-`     |
 | `vertical`        | Whether to enable vertical swipe | _boolean_          | `false` |
 | `touchable`       | Whether to enable touch          | _boolean_          | `true`  |
+| `navigation` | Whether to show navigation arrows | _boolean \| string_ | `false` |
 
 ### Methods
 
@@ -268,6 +300,8 @@ import { Snackbar } from '@varlet/ui'
 | Name | Description | SlotProps |
 | --- |--------------------| --- |
 | `default`   | Swipe content           | `-`                                   |
+| `prev`   | Preview page button         | `index: number` <br> `length: number` <br> `to`、`prev`、`next`: The type is consistent with the method of the same name |
+| `next`   | Next page button         | `index: number` <br> `length: number` <br> `to`、`prev`、`next`: The type is consistent with the method of the same name |
 | `indicator` | Swipe indicator content | `index: number` <br> `length: number` <br> `to`、`prev`、`next`: The type is consistent with the method of the same name |
 
 #### SwipeItem Slots
@@ -285,3 +319,9 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--swipe-indicator-color`   | `#fff`  |
 | `--swipe-indicators-offset` | `10px`  |
 | `--swipe-indicator-offset`  | `4px`   |
+| `--swipe-navigation-button-width` | `36px` |
+| `--swipe-navigation-button-height` | `36px` |
+| `--swipe-navigation-button-border-radius` | `50%` |
+| `--swipe-navigation-icon-size` | `20px` |
+| `--swipe-navigation-prev-left` | `8px`  |  
+| `--swipe-navigation-next-right` | `8px` |
diff --git a/packages/varlet-ui/src/swipe/docs/zh-CN.md b/packages/varlet-ui/src/swipe/docs/zh-CN.md
@@ -124,6 +124,37 @@
 </style>
 ```
 
+### 导航
+
+```html
+<template>
+  <var-swipe class="swipe-example" navigation="hover">
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat2.jpg">
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat3.jpg">
+    </var-swipe-item>
+  </var-swipe>
+</template>
+
+<style>
+.swipe-example {
+  height: 160px;
+}
+
+.swipe-example-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+</style>
+```
+
 ### 监听切换
 
 ```html
@@ -238,6 +269,7 @@ import { Snackbar } from '@varlet/ui'
 | `indicator-color` | 指示器颜色 | _string_ | `-` |
 | `vertical` | 是否开启垂直轮播 | _boolean_ | `false` |
 | `touchable` | 是否可以拖动 | _boolean_ | `true` |
+| `navigation` | 是否显示导航箭头 | _boolean \| string_ | `false` |
 
 ### 方法
 
@@ -267,6 +299,8 @@ import { Snackbar } from '@varlet/ui'
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
 | `default` | 轮播内容 | `-` |
+| `prev` | 上一页按钮 | `index: number` 轮播索引 <br> `length: number` 轮播总数 <br> `to`、`prev`、`next`: 类型和同名方法一致 |
+| `next` | 下一页按钮 | `index: number` 轮播索引 <br> `length: number` 轮播总数 <br> `to`、`prev`、`next`: 类型和同名方法一致 |
 | `indicator` | 指示器内容 | `index: number` 轮播索引 <br> `length: number` 轮播总数 <br> `to`、`prev`、`next`: 类型和同名方法一致 |
 
 #### SwipeItem Slots
@@ -284,3 +318,9 @@ import { Snackbar } from '@varlet/ui'
 | `--swipe-indicator-color` | `#fff` |
 | `--swipe-indicators-offset` | `10px` |
 | `--swipe-indicator-offset` | `4px` |
+| `--swipe-navigation-button-width` | `36px` |
+| `--swipe-navigation-button-height` | `36px` |
+| `--swipe-navigation-button-border-radius` | `50%` |
+| `--swipe-navigation-icon-size` | `20px` |
+| `--swipe-navigation-prev-left` | `8px`  |  
+| `--swipe-navigation-next-right` | `8px` |
diff --git a/packages/varlet-ui/src/swipe/example/index.vue b/packages/varlet-ui/src/swipe/example/index.vue
@@ -61,6 +61,19 @@ watchLang(use)
     </var-swipe-item>
   </var-swipe>
 
+  <app-type>{{ pack.navigation }}</app-type>
+  <var-swipe class="swipe" navigation="hover">
+    <var-swipe-item>
+      <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat.jpg" alt="" />
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat2.jpg" alt="" />
+    </var-swipe-item>
+    <var-swipe-item>
+      <img class="swipe-item" src="https://varlet.gitee.io/varlet-ui/cat3.jpg" alt="" />
+    </var-swipe-item>
+  </var-swipe>
+
   <app-type>{{ pack.handleChange }}</app-type>
   <var-swipe class="swipe" @change="(index) => Snackbar(String(index))">
     <var-swipe-item>

diff --git a/packages/varlet-ui/src/swipe/example/locale/en-US.ts b/packages/varlet-ui/src/swipe/example/locale/en-US.ts
@@ -3,6 +3,7 @@ export default {
   forbidLoop: 'Forbid Loop',
   autoplay: 'Autoplay',
   vertical: 'Vertical Swipe',
+  navigation: 'Navigation',
   handleChange: 'Handle Change',
   customIndicator: 'Custom Indicator',
 }
diff --git a/packages/varlet-ui/src/swipe/example/locale/zh-CN.ts b/packages/varlet-ui/src/swipe/example/locale/zh-CN.ts
@@ -3,6 +3,7 @@ export default {
   forbidLoop: '禁止循环轮播',
   autoplay: '开启自动播放',
   vertical: '垂直轮播',
+  navigation: '导航',
   handleChange: '监听切换',
   customIndicator: '自定义指示器',
 }