fix(ui/form, checkbox-group checkbox select input): 抽离了form-details u…

…seValidation affects: @varlet/icons, @varlet/ui
varletjs · Jan 25, 2021 · 53f9cde · 53f9cde
1 parent d2ac037
commit 53f9cde
Show file tree

Hide file tree

Showing 47 changed files with 1,076 additions and 504 deletions.
diff --git a/packages/varlet-icons/svg/uF012-menu-down.svg b/packages/varlet-icons/svg/uF012-menu-down.svg
diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
@@ -4,7 +4,7 @@
 		class="var--box var-button"
 		:class="[
 			`var-button--${size}`,
-			block ? 'var--flex' : null,
+			block ? 'var--flex' : 'var--inline-flex',
 			disabled ? 'var-button--disabled' : null,
 			plain ? `var-button--plain-${type}` : `var-button--${type}`,
 			plain ? 'var-button--plain' : 'var-elevation--2',

diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less
@@ -1,6 +1,6 @@
-@import "../styles/var";
-@import "../styles/elevation";
-@import "../styles/common";
+@import '../styles/var';
+@import '../styles/elevation';
+@import '../styles/common';
 
 @button-border-radius: 4px;
 
@@ -10,121 +10,118 @@
 @button-mini-padding: 3.5px 9px;
 @button-round-padding: 6px;
 
-@button-disabled-color: rgba(0,0,0,.26);
-@button-disabled-background-color: rgba(0,0,0,.12);
+@button-disabled-color: rgba(0, 0, 0, 0.26);
+@button-disabled-background-color: rgba(0, 0, 0, 0.12);
 
 .var-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  outline: none;
-  border: none;
-  line-height: 1.2;
-  border-radius: @button-border-radius;
-  user-select: none;
-  transition: box-shadow .1s linear;
-  will-change: box-shadow;
-
-  &:active {
-    box-shadow:
-      0 5px 5px -3px @shadow-key-umbra-opacity,
-      0 8px 10px 1px @shadow-key-penumbra-opacity,
-      0 3px 14px 2px @shadow-key-ambient-opacity
-  }
-
-  &--default {
-    color: inherit;
-    background-color: @color-background-base;
-  }
-
-  &--primary {
-    color: #fff;
-    background-color: @color-primary;
-  }
-
-  &--info {
-    color: #fff;
-    background-color: @color-info;
-  }
-
-  &--success {
-    color: #fff;
-    background-color: @color-success;
-  }
-
-  &--warning {
-    color: #fff;
-    background-color: @color-warning;
-  }
-
-  &--danger {
-    color: #fff;
-    background-color: @color-danger;
-  }
-
-  &--plain-default {
-    color: inherit;
-  }
-
-  &--plain-primary {
-    color: @color-primary;
-  }
-
-  &--plain-info {
-    color: @color-info;
-  }
-
-  &--plain-success {
-    color: @color-success;;
-  }
-
-  &--plain-warning {
-    color: @color-warning;
-  }
-
-  &--plain-danger {
-    color: @color-danger;
-  }
-
-  &--normal {
-    padding: @button-normal-padding;
-    font-size: @font-size-md;
-  }
-
-  &--large {
-    padding: @button-large-padding;
-    font-size: @font-size-lg;
-  }
-
-  &--small {
-    padding: @button-small-padding;
-    font-size: @font-size-sm;
-  }
-
-  &--mini {
-    padding: @button-mini-padding;
-    font-size: @font-size-xs;
-  }
-
-  &--round {
-    padding: @button-round-padding;
-    border-radius: 50%;
-  }
-
-  &--disabled {
-    background-color: @button-disabled-background-color;
-    color: @button-disabled-color;
-  }
-
-  &--outline {
-    border: thin solid currentColor;
-  }
-
-  &--plain {
-    background-color: transparent;
-
-    &:active {
-      box-shadow: none;
-    }
-  }
+	justify-content: center;
+	align-items: center;
+	outline: none;
+	border: none;
+	line-height: 1.2;
+	border-radius: @button-border-radius;
+	user-select: none;
+	transition: box-shadow 0.1s linear;
+	will-change: box-shadow;
+
+	&:active {
+		box-shadow: 0 5px 5px -3px @shadow-key-umbra-opacity, 0 8px 10px 1px @shadow-key-penumbra-opacity,
+			0 3px 14px 2px @shadow-key-ambient-opacity;
+	}
+
+	&--default {
+		color: inherit;
+		background-color: @color-background-base;
+	}
+
+	&--primary {
+		color: #fff;
+		background-color: @color-primary;
+	}
+
+	&--info {
+		color: #fff;
+		background-color: @color-info;
+	}
+
+	&--success {
+		color: #fff;
+		background-color: @color-success;
+	}
+
+	&--warning {
+		color: #fff;
+		background-color: @color-warning;
+	}
+
+	&--danger {
+		color: #fff;
+		background-color: @color-danger;
+	}
+
+	&--plain-default {
+		color: inherit;
+	}
+
+	&--plain-primary {
+		color: @color-primary;
+	}
+
+	&--plain-info {
+		color: @color-info;
+	}
+
+	&--plain-success {
+		color: @color-success;
+	}
+
+	&--plain-warning {
+		color: @color-warning;
+	}
+
+	&--plain-danger {
+		color: @color-danger;
+	}
+
+	&--normal {
+		padding: @button-normal-padding;
+		font-size: @font-size-md;
+	}
+
+	&--large {
+		padding: @button-large-padding;
+		font-size: @font-size-lg;
+	}
+
+	&--small {
+		padding: @button-small-padding;
+		font-size: @font-size-sm;
+	}
+
+	&--mini {
+		padding: @button-mini-padding;
+		font-size: @font-size-xs;
+	}
+
+	&--round {
+		padding: @button-round-padding;
+		border-radius: 50%;
+	}
+
+	&--disabled {
+		background-color: @button-disabled-background-color;
+		color: @button-disabled-color;
+	}
+
+	&--outline {
+		border: thin solid currentColor;
+	}
+
+	&--plain {
+		background-color: transparent;
+
+		&:active {
+			box-shadow: none;
+		}
+	}
 }
diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -1,35 +1,57 @@
 <template>
-	<div class="var-checkbox-group" :class="[`var-checkbox-group--${direction}`]" v-bind="$attrs">
-		<slot />
+	<div class="var-checkbox-group__wrap">
+		<div class="var-checkbox-group" :class="[`var-checkbox-group--${direction}`]" v-bind="$attrs">
+			<slot />
+		</div>
+		<var-form-details class="var-checkbox-group__form-details" :error-message="errorMessage" />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ComputedRef, watch } from 'vue'
-import { props } from './props'
-import { useAtChildrenCounter, useChildren } from '../utils/components'
+import { defineComponent, computed, ComputedRef, watch, nextTick } from 'vue'
+import { props, ValidateTriggers } from './props'
+import { useAtChildrenCounter, useChildren, useParent, useValidation } from '../utils/components'
 import { CHECKBOX_GROUP_BIND_CHECKBOX_KEY, CHECKBOX_GROUP_COUNT_CHECKBOX_KEY, CheckboxGroupProvider } from './provide'
 import { CheckboxProvider } from '../checkbox/provide'
+import { FORM_BIND_FORM_ITEM_KEY, FormProvider } from '../form/provide'
+import FormDetails from '../form-details'
 
 export default defineComponent({
 	name: 'VarCheckboxGroup',
+	components: {
+		[FormDetails.name]: FormDetails,
+	},
 	inheritAttrs: false,
 	props,
 	setup(props) {
-		const { bindChildren, childProviders: checkboxProviders } = useChildren<CheckboxGroupProvider, CheckboxProvider>(
-			CHECKBOX_GROUP_BIND_CHECKBOX_KEY
-		)
+		const { bindChildren: bindCheckbox, childProviders: checkboxProviders } = useChildren<
+			CheckboxGroupProvider,
+			CheckboxProvider
+		>(CHECKBOX_GROUP_BIND_CHECKBOX_KEY)
+		const { bindParent: bindForm } = useParent<FormProvider, CheckboxGroupProvider>(FORM_BIND_FORM_ITEM_KEY)
 		const { length } = useAtChildrenCounter(CHECKBOX_GROUP_COUNT_CHECKBOX_KEY)
 
 		const checkedCount: ComputedRef<number> = computed(() => props.modelValue.length)
 		const max: ComputedRef<number | string | undefined> = computed(() => props.max)
 
+		const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation()
+		const errorMessageComputed: ComputedRef<string> = computed(() => errorMessage.value)
+
+		const validate = () => v(props.rules, props.modelValue)
+
+		const validateWithTrigger = (trigger: ValidateTriggers) =>
+			nextTick(() => vt(props.validateTrigger, trigger, props.rules, props.modelValue))
+
+		const change = (changedModelValue: any) => {
+			props['onUpdate:modelValue']?.(changedModelValue)
+			props.onChange?.(changedModelValue)
+
+			validateWithTrigger('onChange')
+		}
+
 		const onChecked = (changedValue: any) => {
 			if (!props.modelValue.includes(changedValue)) {
-				const changedModelValue = [...props.modelValue, changedValue]
-
-				props['onUpdate:modelValue']?.(changedModelValue)
-				props.onChange?.(changedModelValue)
+				change([...props.modelValue, changedValue])
 			}
 		}
 
@@ -38,10 +60,7 @@ export default defineComponent({
 				return
 			}
 
-			const changedModelValue = props.modelValue.filter((value) => value !== changedValue)
-
-			props['onUpdate:modelValue']?.(changedModelValue)
-			props.onChange?.(changedModelValue)
+			change(props.modelValue.filter((value) => value !== changedValue))
 		}
 
 		const syncAllCheckbox = () => {
@@ -77,22 +96,37 @@ export default defineComponent({
 			return changedModelValue
 		}
 
+		const reset = () => {
+			props['onUpdate:modelValue']?.([])
+			resetValidation()
+		}
+
 		watch(() => props.modelValue, syncAllCheckbox, { deep: true })
 
-		// checkbox insert or remove
 		watch(() => length.value, syncAllCheckbox)
 
-		bindChildren({
+		const checkboxGroupProvider: CheckboxGroupProvider = {
 			checkedCount,
 			max,
 			onChecked,
 			onUnchecked,
-		})
+			validate,
+			resetValidation,
+			reset,
+			errorMessage: errorMessageComputed,
+		}
+
+		bindCheckbox(checkboxGroupProvider)
+		bindForm?.(checkboxGroupProvider)
 
 		return {
+			errorMessage,
 			checkAll,
 			uncheckAll,
 			inverseAll,
+			reset,
+			validate,
+			resetValidation,
 		}
 	},
 })

diff --git a/packages/varlet-ui/src/checkbox-group/checkboxGroup.less b/packages/varlet-ui/src/checkbox-group/checkboxGroup.less
@@ -1,3 +1,5 @@
+@checkbox-group-form-details-margin-left: 8px;
+
 .var-checkbox-group {
 	display: flex;
 	flex-wrap: wrap;
@@ -9,4 +11,8 @@
 	&--vertical {
 		flex-direction: column;
 	}
+
+	&__form-details {
+		margin-left: @checkbox-group-form-details-margin-left;
+	}
 }