feat(Form): 增加校验消息提示类型参数 (#570)

* feat(Form): 增加消息提示类型参数

Author: xingyan95

packages/devui-vue/devui/form/index.ts

@@ -4,7 +4,6 @@ import FormLabel from './src/components/form-label/form-label';
 import FormItem from './src/components/form-item/form-item';
 import FormControl from './src/components/form-control/form-control';
 import FormOperation from './src/components/form-operation/form-operation';
-import dValidateRules from './src/directives/d-validate-rules';
 
 export { Form, FormLabel, FormItem, FormControl, FormOperation };
 
@@ -18,7 +17,6 @@ export default {
  status: '75%',
  install(app: App): void {
  app.component(Form.name, Form);
- app.directive('d-validate-rules', dValidateRules);
  app.component(FormLabel.name, FormLabel);
  app.component(FormItem.name, FormItem);
  app.component(FormControl.name, FormControl);

packages/devui-vue/devui/form/src/components/form-control/form-control.scss

@@ -16,6 +16,11 @@
  .devui-form__control-container {
  position: relative;
 
+ // 临时解决popover影响输入控件宽度的问题
+ .devui-popover-reference {
+ width: 100%;
+ }
+
  .devui-form__control-feedback {
  position: absolute;
  top: 50%;

packages/devui-vue/devui/form/src/components/form-control/form-control.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, ref } from 'vue';
 import type { SetupContext } from 'vue';
-import { uniqueId } from 'lodash';
 import { formControlProps, FormControlProps } from './form-control-types';
+import { Popover } from '../../../../popover';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import { useFormControl, useFormControlValidate } from './use-form-control';
 import './form-control.scss';
@@ -11,20 +11,26 @@ export default defineComponent({
  props: formControlProps,
  setup(props: FormControlProps, ctx: SetupContext) {
  const formControl = ref();
- const uid = uniqueId('dfc-');
  const ns = useNamespace('form');
  const { controlClasses, controlContainerClasses } = useFormControl(props);
- const { errorMessage } = useFormControlValidate();
+ const { showPopover, showMessage, errorMessage, popPosition } = useFormControlValidate();
 
  return () => (
- <div class={controlClasses.value} ref={formControl} data-uid={uid}>
+ <div class={controlClasses.value} ref={formControl}>
  <div class={controlContainerClasses.value}>
- <div class={ns.e('control-content')} id={uid}>
- {ctx.slots.default?.()}
- </div>
+ <Popover
+ is-open={showPopover.value}
+ trigger="manually"
+ content={errorMessage.value}
+ pop-type="error"
+ position={popPosition.value}>
+ {{
+ reference: () => <div class={ns.e('control-content')}>{ctx.slots.default?.()}</div>,
+ }}
+ </Popover>
  </div>
  <div class={ns.e('control-info')}>
- {errorMessage.value && <div class="error-message">{errorMessage.value}</div>}
+ {showMessage.value && <div class="error-message">{errorMessage.value}</div>}
  {props.extraInfo && <div class={ns.e('control-extra')}>{props.extraInfo}</div>}
  </div>
  </div>

packages/devui-vue/devui/form/src/components/form-control/use-form-control.ts

@@ -1,23 +1,22 @@
-import { computed, reactive, inject, toRefs } from 'vue';
+import { computed, inject, toRefs } from 'vue';
 import { FORM_TOKEN, FormContext } from '../../form-types';
 import { FormControlProps, UseFormControl } from './form-control-types';
 import { FormItemContext, FORM_ITEM_TOKEN } from '../form-item/form-item-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 
 export function useFormControl(props: FormControlProps): UseFormControl {
  const formContext = inject(FORM_TOKEN) as FormContext;
- const labelData = reactive(formContext.labelData);
  const ns = useNamespace('form');
  const { feedbackStatus } = toRefs(props);
 
  const controlClasses = computed(() => ({
  [`${ns.e('control')}`]: true,
- [`${ns.em('control', 'horizontal')}`]: labelData.layout === 'horizontal',
+ [`${ns.em('control', 'horizontal')}`]: formContext.layout === 'horizontal',
  }));
 
  const controlContainerClasses = computed(() => ({
  [`${ns.e('control-container')}`]: true,
- [`${ns.em('control-container', 'horizontal')}`]: labelData.layout === 'horizontal',
+ [`${ns.em('control-container', 'horizontal')}`]: formContext.layout === 'horizontal',
  [`${ns.em('control-container', 'has-feedback')}`]: Boolean(feedbackStatus.value),
  [`${ns.em('control-container', 'feedback-error')}`]: Boolean(feedbackStatus.value === 'error'),
  }));
@@ -27,7 +26,10 @@ export function useFormControl(props: FormControlProps): UseFormControl {
 
 export function useFormControlValidate() {
  const formItemContext = inject(FORM_ITEM_TOKEN) as FormItemContext;
+ const showPopover = computed(() => formItemContext.messageType === 'popover' && formItemContext.validateState === 'error');
+ const showMessage = computed(() => formItemContext.messageType === 'text' && formItemContext.validateState === 'error');
  const errorMessage = computed(() => formItemContext.validateMessage);
+ const popPosition = computed(() => formItemContext.popPosition);
 
- return { errorMessage };
+ return { showPopover, showMessage, errorMessage, popPosition };
 }

packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts

@@ -2,6 +2,20 @@ import type { RuleItem, ValidateFieldsError } from 'async-validator';
 import type { ComputedRef, ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue';
 
 export type FormItemValidateState = '' | 'error' | 'pending' | 'success';
+export type MessageType = 'popover' | 'text' | 'none';
+export type PopPosition =
+ | 'top'
+ | 'right'
+ | 'bottom'
+ | 'left'
+ | 'top-start'
+ | 'top-end'
+ | 'right-start'
+ | 'right-end'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left-start'
+ | 'left-end';
 
 export interface FormRuleItem extends RuleItem {
  trigger?: Array<string>;
@@ -20,6 +34,12 @@ export const formItemProps = {
  type: Boolean,
  default: false,
  },
+ messageType: {
+ type: String as PropType<MessageType>,
+ },
+ popPosition: {
+ type: Array as PropType<Array<PopPosition>>,
+ },
  rules: {
  type: [Object, Array] as PropType<[FormRuleItem, Array<FormRuleItem>]>,
  },

packages/devui-vue/devui/form/src/components/form-item/form-item.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, onMounted, inject, reactive, toRefs, onBeforeUnmount, provide, toRef } from 'vue';
+import { defineComponent, onMounted, inject, reactive, toRefs, onBeforeUnmount, provide, computed } from 'vue';
 import type { SetupContext } from 'vue';
-import { FORM_TOKEN } from '../../form-types';
+import { FormContext, FORM_TOKEN } from '../../form-types';
 import { FormItemContext, formItemProps, FormItemProps, FORM_ITEM_TOKEN } from './form-item-types';
 import { useFormItem, useFormItemRule, useFormItemValidate } from './use-form-item';
 import './form-item.scss';
@@ -9,12 +9,17 @@ export default defineComponent({
  name: 'DFormItem',
  props: formItemProps,
  setup(props: FormItemProps, ctx: SetupContext) {
- const formContext = inject(FORM_TOKEN);
+ const formContext = inject(FORM_TOKEN) as FormContext;
+ const { messageType: itemMessageType, popPosition: itemPopPosition, ...otherProps } = toRefs(props);
+ const messageType = computed(() => itemMessageType?.value || formContext.messageType);
+ const popPosition = computed(() => itemPopPosition?.value || formContext.popPosition);
  const { _rules } = useFormItemRule(props);
  const { validateState, validateMessage, validate } = useFormItemValidate(props, _rules);
- const { itemClasses, isRequired } = useFormItem(_rules, validateState);
+ const { itemClasses, isRequired } = useFormItem(messageType, _rules, validateState);
  const context: FormItemContext = reactive({
- ...toRefs(props),
+ ...otherProps,
+ messageType,
+ popPosition,
  isRequired,
  validateState,
  validateMessage,

packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { castArray, get, isFunction } from 'lodash';
 import Schema from 'async-validator';
 import type { ComputedRef, Ref } from 'vue';
@@ -11,18 +11,22 @@ import {
  FormValidateCallback,
  FormRuleItem,
  UseFormItemValidate,
+ MessageType,
 } from './form-item-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 
-export function useFormItem(_rules: ComputedRef<FormRuleItem[]>, validateState: Ref<FormItemValidateState>): UseFormItem {
- const formContext = reactive(inject(FORM_TOKEN) as FormContext);
- const labelData = reactive(formContext.labelData);
+export function useFormItem(
+ messageType: ComputedRef<MessageType>,
+ _rules: ComputedRef<FormRuleItem[]>,
+ validateState: Ref<FormItemValidateState>
+): UseFormItem {
+ const formContext = inject(FORM_TOKEN) as FormContext;
  const ns = useNamespace('form');
 
  const itemClasses = computed(() => ({
- [`${ns.em('item', 'horizontal')}`]: labelData.layout === 'horizontal',
- [`${ns.em('item', 'vertical')}`]: labelData.layout === 'vertical',
- [`${ns.em('item', 'error')}`]: validateState.value === 'error',
+ [`${ns.em('item', 'horizontal')}`]: formContext.layout === 'horizontal',
+ [`${ns.em('item', 'vertical')}`]: formContext.layout === 'vertical',
+ [`${ns.em('item', 'error')}`]: messageType.value === 'text' && validateState.value === 'error',
  }));
 
  const isRequired = computed(() => _rules.value.some((rule) => Boolean(rule.required)));
@@ -61,7 +65,7 @@ export function useFormItemValidate(props: FormItemProps, _rules: ComputedRef<Fo
  return typeof props.field === 'string' ? props.field : '';
  });
  const fieldValue = computed(() => {
- const formData = formContext.formData;
+ const formData = formContext.data;
  if (!formData || !props.field) {
  return;
  }

packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts

@@ -5,15 +5,15 @@ import { UseFormLabel } from './form-label-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 
 export function useFormLabel(): UseFormLabel {
- const { labelData } = inject(FORM_TOKEN) as FormContext;
+ const formContext = inject(FORM_TOKEN) as FormContext;
  const formItemContext = inject(FORM_ITEM_TOKEN) as FormItemContext;
  const ns = useNamespace('form');
 
  const labelClasses = computed(() => ({
  [`${ns.e('label')}`]: true,
- [`${ns.em('label', 'vertical')}`]: labelData.layout === 'vertical',
- [`${ns.em('label', labelData.labelSize)}`]: labelData.layout === 'horizontal',
- [`${ns.em('label', labelData.labelAlign)}`]: labelData.layout === 'horizontal',
+ [`${ns.em('label', 'vertical')}`]: formContext.layout === 'vertical',
+ [`${ns.em('label', formContext.labelSize)}`]: formContext.layout === 'horizontal',
+ [`${ns.em('label', formContext.labelAlign)}`]: formContext.layout === 'horizontal',
  }));
 
  const labelInnerClasses = computed(() => ({

packages/devui-vue/devui/form/src/components/form-operation/form-operation.tsx

@@ -1,19 +1,18 @@
-import { defineComponent, computed, reactive, inject } from 'vue';
+import { defineComponent, computed, inject } from 'vue';
 import { FORM_TOKEN, FormContext, LabelSize } from '../../form-types';
 import './form-operation.scss';
 
 export default defineComponent({
  name: 'DFormOperation',
  setup(props, ctx) {
- const formContext = reactive(inject(FORM_TOKEN) as FormContext);
- const labelData = reactive(formContext.labelData);
+ const formContext = inject(FORM_TOKEN) as FormContext;
  const LabelSizeMap: Record<LabelSize, number> = {
  sm: 80,
  md: 100,
  lg: 150,
  };
  const styles = computed(() => ({
- marginLeft: labelData.layout === 'horizontal' ? `${LabelSizeMap[labelData.labelSize] + 16}px` : undefined,
+ marginLeft: formContext.layout === 'horizontal' ? `${LabelSizeMap[formContext.labelSize] + 16}px` : undefined,
  }));
  return () => (
  <div class="devui-form-operation" style={styles.value}>