feat(swipe): support hover

packages/varlet-ui/src/swipe/Swipe.vue

@@ -16,15 +16,27 @@
     </div>
 
     <slot v-if="navigation" name="prev" :index="index" :length="length" :prev="prev" :next="next" :to="to">
-      <div :class="classes(n('navigation'), n('navigation--prev'))" @click="prev()">
-        <var-button round><var-icon name="chevron-left" /></var-button>
-      </div>
+      <transition :name="navigation === 'hover' ? 'prev' : ''">
+        <div
+          v-if="hovering || navigation === true"
+          :class="classes(n('navigation'), n('navigation--prev'))"
+          @click="prev()"
+        >
+          <var-button round><var-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">
-      <div :class="classes(n('navigation'), n('navigation--next'))" @click="next()">
-        <var-button round><var-icon name="chevron-right" /></var-button>
-      </div>
+      <transition :name="navigation === 'hover' ? 'next' : ''">
+        <div
+          v-if="hovering || navigation === true"
+          :class="classes(n('navigation'), n('navigation--next'))"
+          @click="next()"
+        >
+          <var-button round><var-icon name="chevron-right" /></var-button>
+        </div>
+      </transition>
     </slot>
 
     <slot name="indicator" :index="index" :length="length" :prev="prev" :next="next" :to="to">
@@ -417,7 +429,9 @@ export default defineComponent({
     }
 
     const handleHovering = (value: boolean) => {
-      hovering.value = value
+      if (props.navigation === 'hover') {
+        hovering.value = value
+      }
     }
 
     return {
@@ -427,6 +441,7 @@ export default defineComponent({
       trackSize,
       trackTranslate,
       lockDuration,
+      hovering,
       n,
       classes,
       handleTouchstart,

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=\\"prev\\" 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-button--round\\" type=\\"button\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">
+          <var-icon name=\\"chevron-left\\"></var-icon>
+        </div>
+        <div class=\\"var-hover-overlay\\"></div>
+      </button></div>
+  </transition-stub>
+  <transition-stub name=\\"next\\" 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-button--round\\" type=\\"button\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">
+          <var-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=\\"prev\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+    <!--v-if-->
+  </transition-stub>
+  <transition-stub name=\\"next\\" 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>"
+`;

packages/varlet-ui/src/swipe/__tests__/index.spec.js

@@ -207,6 +207,15 @@ describe('test swipe component props', () => {
     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()
   })
 })

packages/varlet-ui/src/swipe/swipe.less

@@ -71,3 +71,39 @@
     margin: var(--swipe-indicator-offset) 0;
   }
 }
+
+.prev-enter-active {
+  transition: left 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.prev-leave-active {
+  transition: left 0.3s cubic-bezier(1, 0.5, 0.8, 0.25);
+}
+
+.prev-enter-from,
+.prev-leave-to {
+  left: -100%;
+}
+
+.prev-enter-to,
+.prev-leave-from {
+  left: var(--swipe-navigation-prev-left);
+}
+
+.next-enter-active {
+  transition: right 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.next-leave-active {
+  transition: right 0.3s cubic-bezier(1, 0.5, 0.8, 0.25);
+}
+
+.next-enter-from,
+.next-leave-to {
+  right: -100%;
+}
+
+.next-enter-to,
+.next-leave-from {
+  right: var(--swipe-navigation-next-right);
+}