fix(ui/swipe, swipe-item): 原型完成

affects: @varlet/ui

packages/varlet-ui/src/checkbox-group/checkboxGroup.less

@@ -1,4 +1,4 @@
-@checkbox-group-form-details-margin-left: 8px;
+@checkbox-group-form-details-margin-left: 2px;
 
 .var-checkbox-group {
 	display: flex;

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

@@ -5,7 +5,7 @@
 @checkbox-disabled-color: #aaa;
 @checkbox-error-color: @color-danger;
 
-@checkbox-form-details-margin-left: 8px;
+@checkbox-form-details-margin-left: 2px;
 
 .var-checkbox {
 	display: flex;
@@ -20,7 +20,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		padding: 7px;
+		padding: 6px;
 		border-radius: 50%;
 	}
 

packages/varlet-ui/src/radio-group/radioGroup.less

@@ -1,4 +1,4 @@
-@radio-group-form-details-margin-left: 8px;
+@radio-group-form-details-margin-left: 2px;
 
 .var-radio-group {
 	display: flex;

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

@@ -5,7 +5,7 @@
 @radio-disabled-color: #aaa;
 @radio-error-color: @color-danger;
 
-@checkbox-form-details-margin-left: 8px;
+@checkbox-form-details-margin-left: 2px;
 
 .var-radio {
 	display: flex;
@@ -20,7 +20,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		padding: 7px;
+		padding: 6px;
 		border-radius: 50%;
 	}
 

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

@@ -0,0 +1,59 @@
+<template>
+	<div
+		class="var-swipe-item"
+		:style="{
+			width: !vertical ? `${size}px` : null,
+			height: vertical ? `${size}px` : null,
+			transform: `translate${vertical ? 'Y' : 'X'}(${translate}px)`,
+		}"
+		v-bind="$attrs"
+	>
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref } from 'vue'
+import { useAtParentIndex, useParent } from '../utils/components'
+import { SWIPE_BIND_SWIPE_ITEM_KEY, SWIPE_COUNT_SWIPE_ITEM_KEY, SwipeProvider } from '../swipe/provide'
+import { SwipeItemProvider } from './provide'
+
+export default defineComponent({
+	name: 'VarSwipeItem',
+	inheritAttrs: false,
+	setup() {
+		const { bindParent: bindSwipe, parentProvider: swipeProvider } = useParent<SwipeProvider, SwipeItemProvider>(
+			SWIPE_BIND_SWIPE_ITEM_KEY
+		)
+		const { index } = useAtParentIndex(SWIPE_COUNT_SWIPE_ITEM_KEY)
+		if (!bindSwipe || !swipeProvider || !index) {
+			throw Error('<var-swipe-item/> must in <var-swipe/>')
+		}
+
+		const translate: Ref<number> = ref(0)
+
+		const setTranslate = (x: number) => {
+			translate.value = x
+		}
+
+		const { size, vertical } = swipeProvider
+
+		const swipeItemProvider: SwipeItemProvider = {
+			index,
+			setTranslate,
+		}
+
+		bindSwipe(swipeItemProvider)
+
+		return {
+			size,
+			vertical,
+			translate,
+		}
+	},
+})
+</script>
+
+<style lang="less">
+@import './swipeItem';
+</style>

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

@@ -0,0 +1,7 @@
+const SwipeItem = require('../../../cjs/swipe-item').default
+const { render } = require('@testing-library/vue')
+
+test('test swipeItem', async () => {
+	const wrapper = render(SwipeItem)
+	console.log(wrapper)
+})

packages/varlet-ui/src/swipe-item/example/index.vue

@@ -0,0 +1,21 @@
+<template>
+	<var-swipe-item />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import SwipeItem from '..'
+
+export default defineComponent({
+	name: 'SwipeItemExample',
+	components: {
+		[SwipeItem.name]: SwipeItem,
+	},
+})
+</script>
+
+<style scoped>
+.example {
+	background: antiquewhite;
+}
+</style>

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

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import SwipeItem from './SwipeItem.vue'
+
+SwipeItem.install = function (app: App) {
+	app.component(SwipeItem.name, SwipeItem)
+}
+
+export default SwipeItem

packages/varlet-ui/src/swipe-item/provide.ts

@@ -0,0 +1,6 @@
+import { ComputedRef } from 'vue'
+
+export interface SwipeItemProvider {
+	index: ComputedRef<number>
+	setTranslate(x: number): void
+}

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

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