feat(Form): 集成Checkbox，增加disabled&size&校验 (DevCloudFE#829)

Author: xingyan95

packages/devui-vue/devui/checkbox/src/use-checkbox.ts

@@ -1,4 +1,5 @@
-import { computed, inject, SetupContext, toRef, provide } from 'vue';
+import { computed, inject, SetupContext, toRef, provide, watch } from 'vue';
+import { FORM_TOKEN, FORM_ITEM_TOKEN } from '../../form';
 import {
  CheckboxProps,
  UseCheckboxFn,
@@ -9,6 +10,8 @@ import {
 } from './checkbox-types';
 
 export function useCheckbox(props: CheckboxProps, ctx: SetupContext): UseCheckboxFn {
+ const formContext = inject(FORM_TOKEN, undefined);
+ const formItemContext = inject(FORM_ITEM_TOKEN, undefined);
  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
 
  const isChecked = computed(() => props.checked || props.modelValue);
@@ -20,7 +23,7 @@ export function useCheckbox(props: CheckboxProps, ctx: SetupContext): UseCheckbo
  return !!max && checkboxGroupConf?.modelValue.value.length >= max && !mergedChecked.value;
  });
  const mergedDisabled = computed(() => {
- return checkboxGroupConf?.disabled.value || props.disabled || isLimitDisabled.value;
+ return checkboxGroupConf?.disabled.value || props.disabled || formContext?.disabled || isLimitDisabled.value;
  });
  const mergedIsShowTitle = computed(() => {
  return checkboxGroupConf?.isShowTitle.value ?? props.isShowTitle;
@@ -59,8 +62,14 @@ export function useCheckbox(props: CheckboxProps, ctx: SetupContext): UseCheckbo
  const handleClick = () => {
  canChange(!isChecked.value, props.label).then((res) => res && toggle());
  };
- const size = computed(() => checkboxGroupConf?.size.value ?? props.size);
+ const size = computed(() => formContext?.size || checkboxGroupConf?.size.value || props.size);
  const border = computed(() => checkboxGroupConf?.border.value ?? props.border);
+ watch(
+ () => props.modelValue,
+ () => {
+ formItemContext?.validate('change').catch((err) => console.warn(err));
+ }
+ );
  return {
  mergedChecked,
  mergedDisabled,
@@ -76,6 +85,7 @@ export function useCheckbox(props: CheckboxProps, ctx: SetupContext): UseCheckbo
 }
 
 export function useCheckboxGroup(props: CheckboxGroupProps, ctx: SetupContext): UseCheckboxGroupFn {
+ const formItemContext = inject(FORM_ITEM_TOKEN, undefined);
  const valList = toRef(props, 'modelValue');
 
  const defaultOpt = {
@@ -117,6 +127,13 @@ export function useCheckboxGroup(props: CheckboxGroupProps, ctx: SetupContext):
  return valList.value.some((item) => item.value === itemVal);
  }
  };
+ watch(
+ () => props.modelValue,
+ () => {
+ formItemContext?.validate('change').catch((err) => console.warn(err));
+ },
+ { deep: true }
+ );
 
  provide(checkboxGroupInjectionKey, {
  disabled: toRef(props, 'disabled'),

packages/devui-vue/docs/components/form/index.md

@@ -448,6 +448,17 @@ export default defineComponent({
  <d-form-item field="age" label="年龄">
  <d-input v-model="formData.age" />
  </d-form-item>
+ <d-form-item field="executionDay" label="Execution day">
+ <d-checkbox-group v-model="formData.executionDay" label="Execution day" direction="row">
+ <d-checkbox label="Mon" value="Mon" />
+ <d-checkbox label="Tue" value="Tue" />
+ <d-checkbox label="Wed" value="Wed" />
+ <d-checkbox label="Thur" value="Thur" />
+ <d-checkbox label="Fri" value="Fri" />
+ <d-checkbox label="Sat" value="Sat" />
+ <d-checkbox label="Sun" value="Sun" />
+ </d-checkbox-group>
+ </d-form-item>
  <d-form-operation class="form-operation-wrap">
  <d-button variant="solid" @click="onClick">提交</d-button>
  <d-button @click="onClear">清除校验结果</d-button>
@@ -457,7 +468,7 @@ export default defineComponent({
 </template>
 
 <script>
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, reactive, ref, watch } from 'vue';
 
 export default defineComponent({
  setup() {
@@ -466,6 +477,7 @@ export default defineComponent({
  username: '',
  userInfo: '',
  age: '',
+ executionDay: [],
  });
  const checkAge = (rule, value, callback) => {
  if (!value) {
@@ -483,6 +495,7 @@ export default defineComponent({
  username: [{ min: 3, max: 6, message: '用户名需不小于3个字符，不大于6个字符', trigger: 'change' }],
  userInfo: [{ required: true, message: '用户信息不能为空', trigger: 'blur' }],
  age: [{ validator: checkAge }],
+ executionDay: [{ type: 'array', required: true, message: '请至少选择一个执行时间', trigger: 'change' }],
  };
 
  const onClick = () => {