feat: switch

packages/varlet-ui/src/styles/var.less

@@ -11,10 +11,10 @@
 @icon-size-lg: 22px;
 
 //颜色
-@color-primary: rgb(33,150,243);
-@color-info: #0097A7;
-@color-success: #43A047;
-@color-warning: #FF6F00;
-@color-danger: #E53935;
-@color-background-base: #F5F5F5;
+@color-primary: #2e67ba;
+@color-info: #0097a7;
+@color-success: #43a047;
+@color-warning: #ff6f00;
+@color-danger: #e53935;
+@color-background-base: #f5f5f5;
 @color-font-md: #888;

packages/varlet-ui/src/switch/Switch.vue

@@ -0,0 +1,100 @@
+<template>
+	<div
+		class="var-switch"
+		:class="`var-switch ${disable ? ' var-switch__disable' : ''}`"
+		@click="switchActive"
+		:style="styleComputed.switch"
+	>
+		<div
+			:style="styleComputed.track"
+			:class="`var-switch__track${modelValue ? ' var-switch__track-active' : ''}`"
+		></div>
+		<div
+			class="var-switch__ripple"
+			:style="styleComputed.ripple"
+			v-ripple="{
+				disabled: !ripple || disable || loading,
+			}"
+		>
+			<div
+				:style="styleComputed.handle"
+				:class="`var-switch__handle var-elevation--2${modelValue ? ' var-switch__handle-active' : ''}`"
+			>
+				<var-loading v-if="loading" :radius="size / 2 - 2" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ComputedRef, computed } from 'vue'
+import { props } from './props'
+import Loading from '../Loading'
+import Ripple from '../ripple'
+
+type StyleProps = {
+	width: string
+	height: string
+	left: string
+	borderRadius: string
+	backgroundColor: string
+	color: string
+}
+
+export default defineComponent({
+	name: 'VarSwitch',
+	components: {
+		[Loading.name]: Loading,
+	},
+	directives: { Ripple },
+	props,
+	setup(props) {
+		const styleComputed: ComputedRef<Record<string, Partial<StyleProps>>> = computed(() => {
+			const switchWidth = +props.size * 2
+			const switchHeight = +props.size * 1.2
+
+			return {
+				handle: {
+					width: `${props.size}px`,
+					height: `${props.size}px`,
+					backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
+					color: props.loadingColor && props.loadingColor,
+				},
+				ripple: {
+					left: props.modelValue ? `${+props.size / 2}px` : `-${+props.size / 2}px`,
+					color: props.modelValue ? props.closeColor || '#999' : props.color || '',
+					width: `${+props.size * 2}px`,
+					height: `${+props.size * 2}px`,
+				},
+				track: {
+					height: `${switchHeight * 0.6}px`,
+					width: `${switchWidth - 2}px`,
+					borderRadius: `${switchWidth / 3}px`,
+					filter: props.modelValue ? 'opacity(.6)' : 'brightness(.6)',
+					backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
+				},
+				switch: {
+					height: `${switchHeight}px`,
+					width: `${switchWidth}px`,
+				},
+			}
+		})
+
+		const switchActive = () => {
+			props.onClick?.()
+			if (props.disable || props.loading) return
+			props.onChange?.(!props.modelValue)
+			props['onUpdate:modelValue']?.(!props.modelValue)
+		}
+
+		return {
+			switchActive,
+			styleComputed,
+		}
+	},
+})
+</script>
+
+<style lang="less">
+@import './switch';
+</style>

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

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

packages/varlet-ui/src/switch/example/index.vue

@@ -0,0 +1,74 @@
+<template>
+	<div>
+		<app-type>基本使用</app-type>
+		<div class="var-switch__example-block">
+			<var-switch v-model="value" />
+			<var-switch v-model="value" :ripple="false" color="green" />
+			<var-switch v-model="value1" disable />
+		</div>
+	</div>
+	<div>
+		<app-type>不同颜色</app-type>
+		<div class="var-switch__example-block">
+			<var-switch v-model="value" :ripple="false" />
+			<var-switch v-model="value" color="indigo" :ripple="false" />
+			<var-switch v-model="value" color="red" />
+			<var-switch v-model="value" color="orange" />
+		</div>
+	</div>
+
+	<div>
+		<app-type>不同大小</app-type>
+		<div class="var-switch__example-block">
+			<var-switch v-model="value" size="15" />
+			<var-switch v-model="value" />
+			<var-switch v-model="value" size="25" />
+		</div>
+	</div>
+	<div>
+		<app-type>加载状态</app-type>
+		<div class="var-switch__example-block">
+			<var-switch v-model="value" loading />
+			<var-switch v-model="value" size="25" loading />
+			<var-switch v-model="value" size="25" loading loading-color="#89ddff" />
+		</div>
+	</div>
+	<div>
+		<app-type>关闭状态</app-type>
+		<div class="var-switch__example-block">
+			<var-switch v-model="value2" size="25" />
+			<var-switch v-model="value2" size="25" close-color="#89ddff" />
+			<var-switch v-model="value2" size="25" close-color="#2772f5" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import Switch from '..'
+
+export default defineComponent({
+	name: 'SwitchExample',
+	components: {
+		[Switch.name]: Switch,
+	},
+	setup() {
+		const value = ref(true)
+		const value1 = ref(true)
+		const value2 = ref(false)
+
+		return {
+			value,
+			value1,
+			value2,
+		}
+	},
+})
+</script>
+
+<style scoped>
+.var-switch__example-block {
+	display: flex;
+	justify-content: space-between;
+}
+</style>

packages/varlet-ui/src/switch/index.ts

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

packages/varlet-ui/src/switch/props.ts

@@ -0,0 +1,39 @@
+export const props = {
+	modelValue: {
+		type: Boolean,
+	},
+	disable: {
+		type: Boolean,
+		default: false,
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	color: {
+		type: String,
+	},
+	loadingColor: {
+		type: String,
+	},
+	closeColor: {
+		type: String,
+	},
+	size: {
+		type: [String, Number],
+		default: 20,
+	},
+	ripple: {
+		type: Boolean,
+		default: true,
+	},
+	onClick: {
+		type: Function,
+	},
+	onChange: {
+		type: Function,
+	},
+	'onUpdate:modelValue': {
+		type: Function,
+	},
+}

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

@@ -0,0 +1,49 @@
+@import '../styles/var';
+@import '../styles/elevation';
+
+@var-switch-normal-width: 40px;
+@var-switch-normal-height: 24px;
+
+.var-switch {
+	position: relative;
+	display: inline-flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+
+	&__disable {
+		filter: opacity(0.6);
+		cursor: not-allowed;
+	}
+
+	&__track {
+		background: white;
+		filter: opacity(0.6);
+
+		&-active {
+			background-color: @color-primary;
+		}
+	}
+	&__ripple {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: @color-primary;
+		border-radius: 50%;
+		overflow: hidden;
+		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+	}
+	&__handle {
+		border-radius: 50%;
+		background-color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: white;
+
+		&-active {
+			background-color: @color-primary;
+		}
+	}
+}

packages/varlet-ui/varlet.config.js

@@ -89,13 +89,6 @@ module.exports = {
 				},
 				doc: 'badge',
 			},
-			{
-				text: {
-					zh_CN: 'Rate 评分',
-					en_US: 'Rate',
-				},
-				doc: 'rate',
-			},
 			{
 				text: {
 					zh_CN: 'ExpansionPanels 拓展面板',
@@ -180,6 +173,13 @@ module.exports = {
 				},
 				doc: 'index-bar',
 			},
+			{
+				text: {
+					zh_CN: 'Switch 开关',
+					en_US: 'Switch',
+				},
+				doc: 'switch',
+			},
 		],
 		language: 'zh_CN',
 	},