feat(switch): add validation

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

@@ -3,14 +3,14 @@
 		<var-input
 			class="mb"
 			placeholder="请输入用户名"
-			:rules="[(v) => !!v || '用户名不能为空!', (v) => (v && v.length > 10) || '用户名不少于10个字!']"
+			:rules="[(v) => !!v || '用户名不能为空!', (v) => (v && v.length > 5) || '用户名不少于5个字!']"
 			v-model="form.username"
 		/>
 		<var-input
 			class="mb"
 			type="password"
 			placeholder="请输入密码"
-			:rules="[(v) => !!v || '密码不能为空!', (v) => (v && v.length > 10) || '密码不少于10个字!']"
+			:rules="[(v) => !!v || '密码不能为空!', (v) => (v && v.length > 5) || '密码不少于5个字!']"
 			v-model="form.password"
 		/>
 		<var-select class="mb" placeholder="请选择部门" v-model="form.department" :rules="[(v) => !!v || '必须选一个部门']">
@@ -51,6 +51,10 @@
 			<var-checkbox :checked-value="3">打游戏</var-checkbox>
 		</var-checkbox-group>
 		<var-radio class="mb" :rules="[(v) => !!v || '您必须确保同意才能提交!']" v-model="form.confirm"> 同意 </var-radio>
+		<p style="display: flex">
+			<span style="margin-right: 8px">透视锁头</span>
+			<var-switch class="mb" :rules="[(v) => !!v || '不开挂你怎么玩']" v-model="form.open" />
+		</p>
 
 		<var-button class="mt" block type="danger" @click="formEl.reset()">清空表单</var-button>
 		<var-button class="mt" block type="warning" @click="formEl.resetValidation()">清空验证</var-button>
@@ -71,6 +75,7 @@ import Checkbox from '../../checkbox'
 import RadioGroup from '../../radio-group'
 import Radio from '../../radio'
 import Button from '../../button'
+import Switch from '../../switch'
 
 export default defineComponent({
 	name: 'FormExample',
@@ -83,6 +88,7 @@ export default defineComponent({
 		[RadioGroup.name]: RadioGroup,
 		[Radio.name]: Radio,
 		[Option.name]: Option,
+		[Switch.name]: Switch,
 		[Button.name]: Button,
 	},
 	setup() {
@@ -92,6 +98,7 @@ export default defineComponent({
 			department: undefined,
 			gender: undefined,
 			confirm: false,
+			open: false,
 			group: [],
 			skill: [],
 			like: [],

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

@@ -15,6 +15,6 @@
 @color-info: #0097a7;
 @color-success: #43a047;
 @color-warning: #ff6f00;
-@color-danger: #e53935;
+@color-danger: #ed5f59;
 @color-background-base: #f5f5f5;
 @color-font-md: #888;

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

@@ -1,34 +1,43 @@
 <template>
-	<div
-		class="var-switch"
-		:class="`var-switch ${disabled ? ' var-switch__disable' : ''}`"
-		@click="switchActive"
-		:style="styleComputed.switch"
-	>
+	<div class="var-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 || disabled || loading,
-			}"
+			class="var-switch-block"
+			:class="[disabled || formDisabled ? 'var-switch__disable' : null]"
+			@click="switchActive"
+			:style="styleComputed.switch"
 		>
 			<div
-				:style="styleComputed.handle"
-				:class="`var-switch__handle var-elevation--2${modelValue ? ' var-switch__handle-active' : ''}`"
+				:style="styleComputed.track"
+				class="var-switch__track"
+				:class="[modelValue ? 'var-switch__track-active' : null, errorMessage ? 'var-switch__track-error' : null]"
+			></div>
+			<div
+				class="var-switch__ripple"
+				:style="styleComputed.ripple"
+				v-ripple="{
+					disabled: !ripple || disabled || loading || formDisabled,
+				}"
 			>
-				<var-loading v-if="loading" :radius="size / 2 - 2" />
+				<div
+					:style="styleComputed.handle"
+					class="var-switch__handle var-elevation--2"
+					:class="[modelValue ? 'var-switch__handle-active' : null, errorMessage ? 'var-switch__handle-error' : null]"
+				>
+					<var-loading v-if="loading" :radius="size / 2 - 2" />
+				</div>
 			</div>
 		</div>
+		<var-form-details :error-message="errorMessage" />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ComputedRef, computed } from 'vue'
+import { defineComponent, ComputedRef, computed, nextTick } from 'vue'
+import { useParent, useValidation } from '../utils/components'
+import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
+import { SwitchProvider } from './provide'
 import { props } from './props'
+import FormDetails from '../form-details'
 import Loading from '../Loading'
 import Ripple from '../ripple'
 
@@ -45,10 +54,20 @@ export default defineComponent({
 	name: 'VarSwitch',
 	components: {
 		[Loading.name]: Loading,
+		[FormDetails.name]: FormDetails,
 	},
 	directives: { Ripple },
 	props,
 	setup(props) {
+		const { bindParent: bindForm, parentProvider: formProvider } = useParent<FormProvider, SwitchProvider>(
+			FORM_BIND_FORM_ITEM_KEY
+		)
+		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+
+		const validate = () => v(props.rules, props.modelValue)
+
+		const validateWithTrigger = () => nextTick(() => vt(['onChange'], 'onChange', props.rules, props.modelValue))
+
 		const styleComputed: ComputedRef<Record<string, Partial<StyleProps>>> = computed(() => {
 			const switchWidth = +props.size * 2
 			const switchHeight = +props.size * 1.2
@@ -62,15 +81,15 @@ export default defineComponent({
 				},
 				ripple: {
 					left: props.modelValue ? `${+props.size / 2}px` : `-${+props.size / 2}px`,
-					color: props.modelValue ? props.closeColor || '#999' : props.color || '',
+					color: props.modelValue ? props.color || '' : props.closeColor || '#999',
 					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)',
+					filter: props.modelValue || errorMessage?.value ? 'opacity(.6)' : 'brightness(.6)',
 					backgroundColor: props.modelValue ? props.color || '' : props.closeColor || '',
 				},
 				switch: {
@@ -82,14 +101,38 @@ export default defineComponent({
 
 		const switchActive = () => {
 			props.onClick?.()
-			if (props.disabled || props.loading) return
+			if (
+				props.disabled ||
+				props.loading ||
+				props.readonly ||
+				formProvider?.disabled.value ||
+				formProvider?.readonly.value
+			)
+				return
 			props.onChange?.(!props.modelValue)
 			props['onUpdate:modelValue']?.(!props.modelValue)
+			validateWithTrigger()
 		}
 
+		const reset = () => {
+			props['onUpdate:modelValue']?.(false)
+			resetValidation()
+		}
+
+		const switchProvider: SwitchProvider = {
+			reset,
+			validate,
+			resetValidation,
+		}
+
+		bindForm?.(switchProvider)
+
 		return {
 			switchActive,
 			styleComputed,
+			errorMessage,
+			formDisabled: formProvider?.disabled,
+			formReadonly: formProvider?.readonly,
 		}
 	},
 })

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

@@ -4,7 +4,8 @@
 		<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 />
+			<var-switch v-model="value1" disabled />
+			<var-switch v-model="value3" readonly />
 		</div>
 	</div>
 	<div>
@@ -56,11 +57,13 @@ export default defineComponent({
 		const value = ref(true)
 		const value1 = ref(true)
 		const value2 = ref(false)
+		const value3 = ref(true)
 
 		return {
 			value,
 			value1,
 			value2,
+			value3,
 		}
 	},
 })

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

@@ -1,3 +1,5 @@
+import { PropType } from 'vue'
+
 export const props = {
 	modelValue: {
 		type: Boolean,
@@ -6,6 +8,10 @@ export const props = {
 		type: Boolean,
 		default: false,
 	},
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
 	loading: {
 		type: Boolean,
 		default: false,
@@ -23,6 +29,9 @@ export const props = {
 		type: [String, Number],
 		default: 20,
 	},
+	rules: {
+		type: Array as PropType<Array<(v: boolean) => any>>,
+	},
 	ripple: {
 		type: Boolean,
 		default: true,

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

@@ -0,0 +1,3 @@
+import { Validation } from '../form/provide'
+
+export type SwitchProvider = Validation

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

@@ -5,11 +5,15 @@
 @var-switch-normal-height: 24px;
 
 .var-switch {
-	position: relative;
-	display: inline-flex;
-	cursor: pointer;
-	align-items: center;
-	justify-content: center;
+	display: inline-block;
+
+	&-block {
+		position: relative;
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+		justify-content: center;
+	}
 
 	&__disable {
 		filter: opacity(0.6);
@@ -23,7 +27,12 @@
 		&-active {
 			background-color: @color-primary;
 		}
+
+		&-error {
+			background-color: @color-danger !important;
+		}
 	}
+
 	&__ripple {
 		position: absolute;
 		display: flex;
@@ -34,6 +43,7 @@
 		overflow: hidden;
 		transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
 	}
+
 	&__handle {
 		border-radius: 50%;
 		background-color: white;
@@ -45,5 +55,9 @@
 		&-active {
 			background-color: @color-primary;
 		}
+
+		&-error {
+			background-color: @color-danger !important;
+		}
 	}
 }