cdui-js 1.0.13 → 1.0.14

package/src/components/Form.tsx

@@ -1,7 +1,8 @@
 import { Form as i18n } from '../i18n';
 
-import { createSignal, createContext, useContext, splitProps, children, onMount, watch, createMemo } from '../reactive';
+import { createContext, useContext, splitProps, onMount, combineClass } from '../reactive';
 import { JSX } from '../jsx';
+import { replaceTemplate } from '../template';
 
 /**
  * 表单属性集
@@ -22,7 +23,7 @@ export interface FormItemProps {
   /**
    * 标签对齐方式（未设置则继承所属表单的对齐方式）
    */
-  align?: '' | 'left' | 'right' | 'top';
+  align?: '' | 'left' | 'top' | 'right';
   /**
    * 是否必填
    */
@@ -73,11 +74,6 @@ export interface ValidateTarget {
    * 表单项
    */
   item: FormItemProps;
-
-  /**
-   * 父表单数据
-   */
-  parent?: ValidateTarget;
 }
 
 /**
@@ -94,7 +90,7 @@ export interface BaseValidateRule {
    *
    * @param target 校验目标
    */
-  onvalidate?(target: ValidateTarget): string | Promise<string>;
+  onvalidate?(target: ValidateTarget, form: HTMLFormElement): string | Promise<string>;
 }
 
 export interface BooleanValidateRule extends BaseValidateRule {
@@ -184,18 +180,6 @@ export interface ObjectValidateRule extends BaseValidateRule {
   subRules?: ValidateRules;
 }
 
-export interface ArrayValidateRule extends BaseValidateRule {
-  /**
-   * 数组校验规则
-   */
-  type: 'array';
-
-  /**
-   * 子项校验规则
-   */
-  itemRules: ValidateRules;
-}
-
 /**
  * 校验规则
  */
@@ -204,8 +188,7 @@ export type ValidateRule =
   | NumberValidateRule
   | StringValidateRule
   | DateValidateRule
-  | ObjectValidateRule
-  | ArrayValidateRule;
+  | ObjectValidateRule;
 
 /**
  * 校验规则集合
@@ -214,44 +197,39 @@ export interface ValidateRules {
   [key: string]: ValidateRule;
 }
 
-const defaultContext = {
-  align: 'left',
-  width: '',
-};
-
 /**
  * 表单上下文
  */
-const FormContext = createContext();
+const FormContext = createContext<Pick<FormItemProps, 'align' | 'labelWidth'>>();
 
-const replaceError = (item: FormItemProps, error: string, value: unknown) => {
+const replaceError = (item: FormItemProps, error: string, value?: unknown) => {
   let label = item.label;
 
-  return error
+  error = error
     .replace(/\$\{label\}/g, typeof label !== 'string' ? (label as HTMLElement).textContent : label)
-    .replace(/\$\{field\}/g, item.field)
-    .replace(/\$\{value\}/g, value as string);
+    .replace(/\$\{field\}/g, item.field);
+
+  if (value !== void 0) {
+    error = error.replace(/\$\{value\}/g, value as string);
+  }
+
+  return error;
 };
 
 const validateRange = (item: FormItemProps, rule: { min?: unknown; max?: unknown }, value: unknown) => {
   let min = rule.min;
   let max = rule.max;
-  let error;
 
-  if ((min != null && value < min) || (max != null && value > max)) {
-    if (max == null) {
-      error = i18n.NotLessThan;
-    } else if (min == null) {
-      error = i18n.Between;
-    } else {
-      error = i18n.NotGreaterThan;
+  if (min != null) {
+    if (max != null) {
+      if (value < min || value > max) {
+        return replaceError(item, replaceTemplate(i18n.Between, { min, max }));
+      }
+    } else if (value < min) {
+      return replaceError(item, i18n.NotLessThan, min);
     }
-
-    item.error = replaceError(item, error, value)
-      .replace(/\$\{min\}/g, min as string)
-      .replace(/\$\{max\}/g, max as string);
-
-    return false;
+  } else if (max != null && value > max) {
+    return replaceError(item, i18n.NotGreaterThan, max);
   }
 };
 
@@ -262,19 +240,17 @@ export const validateRules = {
   number: (item: FormItemProps, rule: NumberValidateRule, value: unknown) => {
     if (value || (value = +value) === 0) {
       // 范围校验
-      if (validateRange(item, rule, value) === false) {
-        return false;
-      }
+      return validateRange(item, rule, value);
     }
   },
 
   string: (item: FormItemProps, rule: StringValidateRule, value: unknown) => {
-    let match;
-
     if (value) {
+      let match, error;
+
       // 范围校验
-      if (validateRange(item, rule, (value = '' + value)) === false) {
-        return false;
+      if ((error = validateRange(item, rule, (value = '' + value)))) {
+        return error;
       }
 
       // 正则校验
@@ -282,13 +258,15 @@ export const validateRules = {
         if (match instanceof Array) {
           for (let i = 0, l = match.length; i < l; i++) {
             if (!match[i].rule.test(value as string)) {
-              item.error = replaceError(item, match[i].error, value);
-              return false;
+              if ((error = replaceError(item, match[i].error, value))) {
+                return error;
+              }
             }
           }
         } else if (!match.rule.test(value as string)) {
-          item.error = replaceError(item, match.error, value);
-          return false;
+          if ((error = replaceError(item, match.error, value))) {
+            return error;
+          }
         }
       }
     }
@@ -308,8 +286,7 @@ export const validateRules = {
             break;
 
           default:
-            item.error = replaceError(item, i18n.NotDate, value);
-            break;
+            return replaceError(item, i18n.NotDate, value);
         }
       }
 
@@ -318,40 +295,6 @@ export const validateRules = {
   },
 };
 
-/**
- * 校验规则
- *
- * @param item 表单校验
- * @param rule 校验规则
- * @param target 校验目标
- */
-export const validateRule = async (rule: ValidateRule, target: ValidateTarget) => {
-  let type = rule && rule.type;
-  let item = target.item;
-  let value = target.value;
-
-  if (
-    item.required &&
-    (value == null || value === '' || (type === 'array' && (value as Array<unknown>).length === 0))
-  ) {
-    target.item.error = replaceError(item, item.requiredError || i18n.Required, value);
-    return false;
-  }
-
-  if (rule) {
-    if (validateRules[type] && validateRules[type](item, rule, value) === false) {
-      return false;
-    }
-
-    if (rule.onvalidate && (item.error = await rule.onvalidate(target))) {
-      return false;
-    }
-  }
-
-  // 清除错误信息
-  item.error = '';
-};
-
 /**
  * 查找指定字段的规则
  *
@@ -384,125 +327,119 @@ const findValue = (data: any, fields: string[]) => {
   return data;
 };
 
-/**
- * 更新
- */
-const update = (parent: any, labelWidth: string) => {
-  let child = parent.firstChild;
-  let label;
+const showError = (formItem: HTMLElement, error: string) => {
+  let dom = formItem.querySelector('.form-error');
 
-  while (child) {
-    // 表单项
-    if (child) {
-      // 未指定宽度
-      if (!child.labelWidth) {
-        label = child.slots.label;
-        label.style.width = labelWidth;
-        label.removeAttribute('hidden');
-      }
-    } else if (!(child instanceof Form)) {
-      // 不是表单则递归处理
-      update(child, labelWidth);
-    }
+  if (dom) {
+    dom.textContent = error;
+  } else {
+    dom = document.createElement('div');
+    dom.className = 'form-error';
+    dom.textContent = error;
+
+    formItem.querySelector('.form-body').appendChild(dom);
+  }
+};
+
+const removeError = (formItem: HTMLElement) => {
+  let dom = formItem.querySelector('.form-error');
 
-    child = child.nextSibling;
+  if (dom) {
+    dom.parentNode.removeChild(dom);
   }
 };
 
 /**
- * 校验数组项
+ * 校验规则
+ *
+ * @param rule 校验规则
+ * @param target 校验目标
+ * @param form 所属表单
  */
-const validateArray = async (
-  host: any,
-  body: any,
-  rules: ValidateRules,
-  data: object,
-  filter?: (target: ValidateTarget) => void | boolean,
-  parent?: ValidateTarget,
-) => {
-  let errors = 0;
-  let child = body.firstChild;
+export const validateRule = async (rule: ValidateRule, target: ValidateTarget, form: HTMLFormElement) => {
+  let type = rule && rule.type;
+  let item = target.item;
+  let value = target.value;
+  let error;
 
-  while (child) {
-    // 表单
-    if (child) {
-      errors += await validate(child, child, child.rules || rules, child.data || {}, filter, parent);
-    } else if (!(child instanceof FormItem)) {
-      // 不是表单和表单项则递归处理
-      errors += await validateArray(host, child, rules, data, filter, parent);
+  if (rule) {
+    if (validateRules[type] && (error = validateRules[type](item, rule, value))) {
+      return error;
     }
 
-    child = child.nextSibling;
+    if (rule.onvalidate && (error = await rule.onvalidate(target, form))) {
+      return error;
+    }
   }
-
-  return errors;
 };
 
 /**
  * 校验
  */
 const validate = async (
-  host: any,
-  body: any,
+  form: HTMLFormElement,
   rules: ValidateRules,
   data: object,
   filter?: (target: ValidateTarget) => void | boolean,
-  parent?: ValidateTarget,
 ) => {
-  let errors = 0;
-  let child = body.firstChild;
-  let field, rule: ValidateRule;
+  let result = true;
+  let child = form.firstElementChild as any;
+  let field, rule: ValidateRule, item: FormItemProps;
 
   while (child) {
     // 表单项
-    if (child as FormItemProps) {
+    if ((item = child.FORM_ITEM)) {
+      let error;
+
       // 有设置了字段且未隐藏
-      if (
-        (field = child.field) &&
-        !child.hidden &&
-        ((rule = findRule(rules, (field = field.split('.')))) || child.required)
-      ) {
-        // 当前值
-        let value = findValue(data, field);
-        // 校验目标
-        let target = {
-          data,
-          field,
-          value,
-          label: child.label,
-          item: child,
-          parent,
-        } as ValidateTarget;
-
-        // 没有过滤或符合过滤条件才校验
-        if (!filter || filter(target)) {
-          // 校验
-          if ((await validateRule(rule, target)) === false) {
-            errors++;
+      if (!item.hidden && (field = child.dataset.field)) {
+        // 必填
+        if (item.required) {
+          // 当前值
+          let value = findValue(data, field);
+
+          if (value == null || value === '') {
+            error = replaceError(item, item.requiredError || i18n.Required, value);
+          }
+        } else if ((rule = findRule(rules, (field = field.split('.'))))) {
+          // 当前值
+          let value = findValue(data, field);
+          // 校验目标
+          let target = {
+            data,
+            field,
+            value,
+            label: child.label,
+            item: child,
+            parent,
+          } as ValidateTarget;
+
+          // 没有过滤或符合过滤条件才校验
+          if (!filter || filter(target)) {
+            error = await validateRule(rule, target, form);
           }
         }
+      }
 
-        // object 和 array 校验规则继续往下遍历
-        if (rule && rule.type === 'array' && rule.itemRules) {
-          errors += await validateArray(
-            child,
-            child.slots.default,
-            rule.itemRules,
-            (value as object) || {},
-            filter,
-            target,
-          );
-        }
+      if (error) {
+        showError(child, error);
+      } else {
+        removeError(child);
+      }
+    } else if (child instanceof HTMLFormElement) {
+      // 子表单级联校验
+      child.api.validate(filter);
+    } else {
+      // 不是表单则递归
+      if (!(await validate(child, rules, data, filter))) {
+        result = false;
       }
-    } else if (!(child instanceof Form)) {
-      // 不是表单
-      errors += await validate(host, child, rules, data, filter, parent);
     }
 
-    child = child.nextSibling;
+    child = child.nextElementSibling;
   }
 
-  return errors;
+  return result;
 };
 
 /**
@@ -523,192 +460,27 @@ export const FormItem = (props?: JSX.HTMLAttributes<never> & FormItemProps) => {
     'children',
   ]);
 
-  // /**
-  //  * 属性值集合
-  //  */
-  // protected readonly [PROPERTIES] = {
-  //   /**
-  //    * 字段名
-  //    */
-  //   field: '',
-  //   /**
-  //    * 标签宽度
-  //    */
-  //   labelWidth: '',
-  //   /**
-  //    * 必填错误信息
-  //    */
-  //   requiredError: '',
-  //   /**
-  //    * 错误信息
-  //    */
-  //   error: '',
-  //   /**
-  //    * html for
-  //    */
-  //   for: '',
-  // };
-  // /**
-  //  * 关联的字段名（可使用 "." 表示嵌套字段，如："a.b.c"）
-  //  */
-  // get field(): string {
-  //   return this[PROPERTIES].field;
-  // }
-  // set field(value) {
-  //   this[PROPERTIES].field = '' + value;
-  // }
-  // /**
-  //  * 是否必填
-  //  */
-  // get required(): boolean {
-  //   return this.hasAttribute('required');
-  // }
-  // set required(value) {
-  //   if (value) {
-  //     this.setAttribute('required', '');
-  //   } else {
-  //     this.removeAttribute('required');
-  //   }
-  // }
-  // /**
-  //  * 必填校验信息
-  //  */
-  // get requiredError(): string {
-  //   return this[PROPERTIES].requiredError;
-  // }
-  // set requiredError(value) {
-  //   this[PROPERTIES].requiredError = '' + value;
-  // }
-  // /**
-  //  * 标签
-  //  *
-  //  * @example
-  //  * // 可通过 slot 定制
-  //  * <form-item>
-  //  *   <span slot="label">定制 Label 内容</span>
-  //  * </form-item>
-  //  */
-  // get label(): string {
-  //   return this.slots.label.textContent;
-  // }
-  // set label(value) {
-  //   this.slots.label.textContent = value;
-  // }
-  // /**
-  //  * 标签宽度（未设置则继承所属表单的标签宽度）
-  //  */
-  // get labelWidth(): string {
-  //   return this[PROPERTIES].labelWidth;
-  // }
-  // set labelWidth(value) {
-  //   let properties = this[PROPERTIES];
-  //   let label;
-  //   if (properties.labelWidth !== (value = '' + value)) {
-  //     label = this.slots.label;
-  //     label.style.width = properties.labelWidth = value;
-  //     if (value[0] !== '0') {
-  //       label.removeAttribute('hidden');
-  //     } else {
-  //       label.setAttribute('hidden', '');
-  //     }
-  //   }
-  // }
-  // /**
-  //  * 标签对齐方式（未设置则继承所属表单的对齐方式）
-  //  */
-  // get align(): '' | 'left' | 'right' | 'top' {
-  //   return (this.getAttribute('align') as '') || '';
-  // }
-  // set align(value) {
-  //   this.setAttribute('align', value);
-  // }
-  // /**
-  //  * 错误信息
-  //  */
-  // get error(): string {
-  //   return this[PROPERTIES].error;
-  // }
-  // set error(value) {
-  //   let properties = this[PROPERTIES];
-  //   let error = properties.error;
-  //   let dom = error && findComponent(this, 'jw-form-error');
-  //   if ((properties.error = value)) {
-  //     if (dom) {
-  //       dom.textContent = value;
-  //     } else {
-  //       dom = createComponent('div');
-  //       dom.className = 'jw-form-error';
-  //       dom.textContent = value;
-  //       this.slots.default.appendChild(dom);
-  //     }
-  //   } else if (dom) {
-  //     dom.parentNode.removeChild(dom);
-  //   }
-  // }
-  // /**
-  //  * 点击 Label 自动获取焦点的组件（选择器）
-  //  */
-  // get for(): string {
-  //   return this[PROPERTIES].for;
-  // }
-  // set for(value) {
-  //   this[PROPERTIES].for = '' + value;
-  // }
-  // /**
-  //  * 是否隐藏
-  //  */
-  // get hidden(): boolean {
-  //   return this.style.display === 'none';
-  // }
-  // set hidden(value) {
-  //   this.style.display = value ? 'none' : '';
-  // }
-  // /**
-  //  * 元素被插入到文档时触发
-  //  */
-  // connectedCallback() {
-  //   let properties = this[PROPERTIES];
-  //   let slots = this.slots;
-  //   let label = slots.label;
-  //   // 第一次初始化
-  //   if (!label.parentNode) {
-  //     this.initTemplate(label, slots.default);
-  //     BROWSER &&
-  //       label.addEventListener('click', () => {
-  //         let input = (this as unknown as HTMLElement).querySelector(
-  //           this.for || 'input,textarea,select',
-  //         ) as HTMLElement;
-  //         if (input) {
-  //           input.focus();
-  //         }
-  //       });
-  //   }
-  //   // 没有设置标签宽度
-  //   if (!properties.labelWidth) {
-  //     let parent = this.parentNode;
-  //     while (parent) {
-  //       if (parent instanceof Form) {
-  //         if (parent.labelWidth) {
-  //           label.style.width = parent.labelWidth;
-  //           label.removeAttribute('hidden');
-  //         }
-  //         break;
-  //       }
-  //       parent = parent.parentNode;
-  //     }
-  //   }
-  // }
-
   const form = useContext(FormContext) as any;
 
+  let item: HTMLElement;
+
+  onMount(() => {
+    (item as any).FORM_ITEM = props;
+  });
+
   return (
     <div
-      class={['form-item', 'from-align-' + (thisProps.align || form.align), thisProps.class]
-        .filter((item) => item)
-        .join(' ')}
+      ref={item as any}
+      class={combineClass(
+        'form-item',
+        'form-align-' + (thisProps.align || form.align || 'left'),
+        thisProps.required && 'required',
+        thisProps.hidden && 'hidden',
+        thisProps.class,
+      )}
       {...restProps}
     >
-      <label for={thisProps.for} style={{ width: thisProps.labelWidth || form.width }}>
+      <label for={thisProps.for} style={{ width: thisProps.labelWidth || form.labelWidth }}>
         {thisProps.label}
       </label>
       <div class="form-body">{thisProps.children}</div>
@@ -716,18 +488,6 @@ export const FormItem = (props?: JSX.HTMLAttributes<never> & FormItemProps) => {
   );
 };
 
-function validateForm(
-  form: HTMLFormElement,
-  items: HTMLElement[],
-  rules: ValidateRules,
-  data: object,
-  filter?: (target: ValidateTarget) => void | boolean,
-) {
-  //   return rules ? validate(this, this, rules, this.data || {}, filter) : 0;
-
-  return Promise.resolve(true);
-}
-
 function scrollToError(this: HTMLFormElement) {
   let error = this.querySelector('.form-error') as HTMLElement;
 
@@ -784,7 +544,7 @@ export const Form = (
     /**
      * label 对齐方式
      */
-    align?: 'left' | 'right' | 'top';
+    align?: 'left' | 'top' | 'right';
 
     /**
      * 标签宽度
@@ -801,59 +561,22 @@ export const Form = (
 
   let form: HTMLFormElement;
 
-  // /**
-  //  * label 对齐方式
-  //  */
-  // get align(): 'left' | 'right' | 'top' {
-  //   return this.getAttribute('align') as 'left' || 'left';
-  // }
-  // set align(value) {
-  //   this.setAttribute('align', value);
-  // }
-  // /**
-  //  * 标签宽度
-  //  */
-  // get labelWidth(): string {
-  //   return this[PROPERTIES].labelWidth;
-  // }
-  // set labelWidth(value) {
-  //   let properties = this[PROPERTIES];
-  //   value = value ? '' + value : '';
-  //   if (properties.labelWidth !== value) {
-  //     properties.labelWidth = value;
-  //     if (this.firstChild) {
-  //       update(this, value);
-  //     }
-  //   }
-  // }
-
   onMount(() => {
     // 初始化外部调用接口
     props.api &&
-      props.api({
-        validate: (filter?: (target: ValidateTarget) => void | boolean) =>
-          validateForm(form, items() as HTMLElement[], thisProps.rules, thisProps.data, filter),
-        scrollToError: scrollToError.bind(form),
-        clearErrors: clearErrors.bind(form),
-      });
+      props.api(
+        (form.api = {
+          validate: (filter?: (target: ValidateTarget) => void | boolean) =>
+            validate(form, thisProps.rules, thisProps.data, filter),
+          scrollToError: scrollToError.bind(form),
+          clearErrors: clearErrors.bind(form),
+        }),
+      );
   });
 
-  const items = () => {
-    let items = children(() => {
-      return thisProps.children;
-    })();
-
-    return items;
-  };
-
-  // const context = createMemo(() => ({
-  //   align: thisProps.align,
-  //   width: thisProps.labelWidth,
-  // }));
-
   return (
     <form ref={form as any} {...restProps}>
-      <FormContext.Provider value={thisProps}>{items()}</FormContext.Provider>
+      <FormContext.Provider value={thisProps}>{thisProps.children}</FormContext.Provider>
     </form>
   );
 };