feat(ui/swipe): add component swipe

packages/varlet-vue2-ui/src/col/Col.vue

@@ -29,12 +29,16 @@ import { createChildrenMixin } from '../utils/mixins/relation'
 
 export default defineComponent({
   name: 'VarCol',
+
+  mixins: [createChildrenMixin('row', { childrenKey: 'cols' })],
+
+  props,
+
   data: () => ({
     padding: { left: 0, right: 0 },
     toSizeUnit,
   }),
-  mixins: [createChildrenMixin('row', { childrenKey: 'cols' })],
-  props,
+
   watch: {
     span: {
       handler() {
@@ -43,6 +47,7 @@ export default defineComponent({
       immediate: true,
     },
   },
+
   methods: {
     handleClick(e) {
       const { getListeners } = this
@@ -53,9 +58,11 @@ export default defineComponent({
       }
       onClick(e)
     },
+
     setPadding(pad) {
       this.padding = pad
     },
+
     getSize(mode, size) {
       const classes = []
 

packages/varlet-vue2-ui/src/row/Row.vue

@@ -22,28 +22,35 @@ import { createParentMixin } from '../utils/mixins/relation'
 
 export default defineComponent({
   name: 'VarRow',
-  props,
+
   mixins: [createParentMixin('row', { childrenKey: 'cols' })],
+
+  props,
+
   computed: {
     average() {
       return toPxNum(this.gutter) / 2
     },
   },
+
   watch: {
     gutter() {
       this.computePadding()
     },
+
     cols() {
       this.computePadding()
     },
   },
+
   methods: {
     computePadding() {
       const { average } = this
       this.cols.forEach((col) => {
         col.setPadding({ left: average.value, right: average.value })
       })
     },
+
     handleClick(e) {
       const { getListeners } = this
       const { onClick } = getListeners()

packages/varlet-vue2-ui/src/swipe-item/SwipeItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="var-swipe-item"
+    :style="{
+      width: !vertical ? `${size}px` : undefined,
+      height: vertical ? `${size}px` : undefined,
+      transform: `translate${vertical ? 'Y' : 'X'}(${translate}px)`,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '../utils/create'
+import { createChildrenMixin } from '../utils/mixins/relation'
+
+export default defineComponent({
+  name: 'VarSwipeItem',
+
+  mixins: [createChildrenMixin('swipe', { parentKey: 'swipe', childrenKey: 'swipeItems' })],
+
+  data: () => ({
+    translate: 0,
+  }),
+
+  computed: {
+    size() {
+      return this.swipe.size
+    },
+
+    vertical() {
+      return this.swipe.vertical
+    },
+  },
+
+  methods: {
+    setTranslate(x) {
+      this.translate = x
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './swipeItem';
+</style>

packages/varlet-vue2-ui/src/swipe-item/docs/zh-CN.md

@@ -0,0 +1 @@
+# 轮播项

packages/varlet-vue2-ui/src/swipe-item/index.ts

@@ -0,0 +1,10 @@
+import type { VueConstructor } from 'vue'
+import SwipeItem from './SwipeItem.vue'
+
+SwipeItem.install = function (app: VueConstructor) {
+  app.component(SwipeItem.name, SwipeItem)
+}
+
+export const _SwipeItemComponent = SwipeItem
+
+export default SwipeItem

packages/varlet-vue2-ui/src/swipe-item/swipeItem.less

@@ -0,0 +1,5 @@
+.var-swipe-item {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+}