plain-design 1.0.0-beta.6 → 1.0.0-beta.61

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -1,266 +1,300 @@
-import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {unit} from "plain-utils/string/unit";
-import {removeUnit} from "plain-utils/string/removeUnit";
-import {ThemeSize, tStyleComputed} from "../../../uses/useStyle";
-
-/**
- * 表单的文本以及内容对齐方式
- * @author  韦胜健
- * @date    2022.9.4 23:06
- */
-export const eFormLabelAlign = createEnum(['left', 'center', 'right'] as const);
-
-/**
- * 表单的内容对其方式
- * @author  韦胜健
- * @date    2022.9.4 23:19
- */
-export const eFormContentAlign = createEnum([
-  'left',
-  'center',
-  'right'
-] as const);
-
-/**
- * Form布局相关属性
- * @author  韦胜健
- * @date    2022.9.4 22:46
- */
-export const FormLayoutPropsOption = {
-  size: { type: String as PropType<typeof ThemeSize.TYPE> },                              // 表单尺寸
-  column: { type: [String, Number] as PropType<string | number>, default: 1 },            // 多列表单的列数
-  columnGutter: { type: [Number, String] as PropType<string | number>, default: '16px' }, // 列之间的间距
-  singleColumnCenter: { type: Boolean as PropType<boolean> },                             // 单列的时候会使得表单内容居中，表单文本标题不计宽度，设置该属性为true则使得文本宽度参与计算居中
-  labelWidth: { type: [String, Number] as PropType<string | number> },                    // formItem 文本宽度
-  labelAlign: { type: String as PropType<typeof eFormLabelAlign.TYPE> },                  // 文本对其方式
-  contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> },              // 内容对其方式
-  singleColumnContentWidth: { type: Number },                                             // 单列的时候form item content的宽度
-  width: { type: [String, Number] as PropType<string | number>, },                        // 表单宽度
-  colon: { type: Boolean as PropType<boolean>, default: true },                           // label的冒号
-  verticalLabel: { type: Boolean as PropType<boolean> },                                  // 纵向的表单
-  gutter: { type: Number },                                                               // 列间隔
-  rowGutter: { type: Number },                                                            // 行间隔
-} as const;
-
-/**
- * FormLayoutProps属性类型
- * @author  韦胜健
- * @date    2022.9.4 22:48
- */
-export type tFormLayoutPropsType = ExtractPropTypes<typeof FormLayoutPropsOption>;
-
-/**
- * FormItem布局相关属性
- * @author  韦胜健
- * @date    2022.9.4 22:46
- */
-export const FormItemLayoutPropsOption = {
-  labelWidth: { type: [String, Number] as PropType<string | number> },                // 显示文本宽度
-  column: { type: [String, Number] as PropType<string | number>, default: 1 },        // 多列表单的列数
-  block: { type: Boolean as PropType<boolean> },                                      // 占用一行
-  labelAlign: { type: String as PropType<typeof eFormLabelAlign.TYPE> },              // label 对齐方式
-  contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> },          // content 对齐方式
-  singleColumnContentWidth: { type: Number },                                         // 单列的时候form item content的宽度
-  colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
-} as const;
-
-/**
- * FormItemLayoutProps属性类型
- * @author  韦胜健
- * @date    2022.9.4 22:49
- */
-export type tFormItemLayoutPropsType = ExtractPropTypes<typeof FormItemLayoutPropsOption>
-
-/**
- * 默认的文本宽度
- * @author  韦胜健
- * @date    2022.9.4 23:21
- */
-export const DefaultFormLabelWidth = (() => {
-  let value = '150px';
-  return { value };
-})();
-
-/**
- * 布局组合
- * @author  韦胜健
- * @date    2022.9.4 22:50
- */
-export const useFormLayout = (() => {
-
-  const FORM_LAYOUT_PROVIDER = '@@FORM_LAYOUT_PROVIDER';
-
-  const useForm = (props: tFormLayoutPropsType, styleComputed: tStyleComputed) => {
-    /*是否为单列*/
-    const isSingleColumn = computed(() => props.column === 1);
-    /*列间距*/
-    const gutter = computed((): number => {
-      if (props.gutter != null) {return removeUnit(props.gutter) as any;}
-      /*单列的情况下不设置列间距*/
-      return isSingleColumn.value ? 0 : FormSizeGutter[styleComputed.value.size];
-    });
-    /*行间距*/
-    const rowGutter = computed((): number => {
-      if (props.rowGutter != null) {return removeUnit(props.rowGutter) as any;}
-      return gutter.value || FormSizeRowsGutter[styleComputed.value.size];
-    });
-    /*根节点样式*/
-    const styles = useStyles((styles) => {
-      if (!isSingleColumn.value) {
-        styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
-      }
-    });
-    /*inner节点样式，有列间距时拓展宽度*/
-    const innerStyles = useStyles(style => {
-      if (!isSingleColumn.value && !!gutter.value) {
-        style.width = `calc(100% + ${unit(gutter.value)})`;
-        style.marginLeft = unit(-gutter.value / 2);
-      }
-    });
-    const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn };
-    provide(FORM_LAYOUT_PROVIDER, refer);
-    return refer;
-  };
-
-  const useFormItem = (props: tFormItemLayoutPropsType) => {
-    const form = inject<ReturnType<typeof useForm>>(FORM_LAYOUT_PROVIDER)!;
-
-    /**
-     * 文本宽度
-     * @author  韦胜健
-     * @date    2022.9.4 23:21
-     */
-    const labelWidth = computed((): number | string => {
-      /*纵向文本表单情况下，文本宽度占用整行*/
-      if (form.props.verticalLabel) {
-        return '100%';
-      }
-      let width = props.labelWidth != null ? props.labelWidth : form.props.labelWidth;
-
-      /*如果没有设置宽度，单列的情况下不设置宽度使得label自动撑开宽度，多列的情况下设置默认宽度*/
-      if (width == null && form.props.column !== 1) {
-        width = DefaultFormLabelWidth.value;
-      } else {
-        width = Number(width);
-      }
-      return width;
-    });
-
-    /**
-     * 占用的列数
-     * @author  韦胜健
-     * @date    2022.9.4 23:22
-     */
-    const column = computed((): number => {
-      let column = props.column || 1;
-      if (props.block) {
-        column = Number(form.props.column);
-      }
-      return Number(column);
-    });
-
-    /**
-     * 冒号
-     * @author  韦胜健
-     * @date    2022.9.4 23:22
-     */
-    const colon = computed((): boolean => {
-      if (props.colon != null) {
-        return props.colon;
-      } else {
-        return form.props.colon;
-      }
-    });
-
-    /**
-     * 文本对其方式
-     * @author  韦胜健
-     * @date    2022.9.4 23:22
-     */
-    const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || eFormLabelAlign.left);
-
-    /**
-     * 内容对其方式
-     * @author  韦胜健
-     * @date    2022.9.4 23:22
-     */
-    const contentAlign = computed(() => props.contentAlign || form.props.contentAlign || eFormContentAlign.left);
-
-    /**
-     * 根节点样式
-     * @author  韦胜健
-     * @date    2022.9.4 23:23
-     */
-    const styles = useStyles((styles) => {
-      styles.width = (() => {
-        const totalColumn = Number(form.props.column);
-        const itemColumn = column.value;
-        if (itemColumn === totalColumn) {return '100%';}
-        return `calc(${Number((itemColumn / totalColumn).toFixed(4)) * 100}%)`;
-      })();
-      styles.padding = `0 ${unit(form.gutter.value / 2)}`;
-      styles.margin = `${form.rowGutter.value / 2}px 0`;
-    });
-
-    /**
-     * label节点样式
-     * @author  韦胜健
-     * @date    2022.9.4 23:24
-     */
-    const labelStyles = useStyles(style => {
-      if (!form.isSingleColumn.value) {
-        if (!!labelWidth.value && !form.props.verticalLabel) {
-          style.width = unit(labelWidth.value);
-        }
-      }
-    });
-    /**
-     * content节点样式
-     * @author  韦胜健
-     * @date    2022/10/28 10:34
-     */
-    const contentStyles = useStyles(style => {
-      if (!form.isSingleColumn.value) {
-        if (!!labelWidth.value && !form.props.verticalLabel) {
-          style.width = `calc(100% - ${unit(labelWidth.value)})`;
-        }
-      } else {
-        style.width = unit((() => {
-          if (props.singleColumnContentWidth) {return props.singleColumnContentWidth;}
-          if (form.props.singleColumnContentWidth) {return form.props.singleColumnContentWidth;}
-          if (form.props.column === 1 && !!form.props.labelWidth) {
-            return `calc(100% - ${unit(form.props.labelWidth)})`;
-          }
-          return 300;
-        })());
-      }
-    });
-
-    return {
-      colon,
-      labelAlign,
-      contentAlign,
-      styles,
-      labelStyles,
-      contentStyles,
-      form,
-    };
-  };
-
-  return { useForm, useFormItem };
-})();
-
-const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
-  large: 16,
-  normal: 12,
-  small: 8,
-  mini: 4,
-};
-
-const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
-  large: 12,
-  normal: 8,
-  small: 4,
-  mini: 2,
-};
+import {computed, ExtractPropTypes, inject, PropType, provide, useStyles} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {unit} from "plain-utils/string/unit";
+import {removeUnit} from "plain-utils/string/removeUnit";
+import {ThemeSize, tStyleComputed} from "../../../uses/useStyle";
+
+/**
+ * 表单的文本以及内容对齐方式
+ * @author  韦胜健
+ * @date    2022.9.4 23:06
+ */
+export const eFormLabelAlign = createEnum(['left', 'center', 'right'] as const);
+
+/**
+ * 表单的内容对其方式
+ * @author  韦胜健
+ * @date    2022.9.4 23:19
+ */
+export const eFormContentAlign = createEnum([
+  'left',
+  'center',
+  'right'
+] as const);
+
+/**
+ * Form布局相关属性
+ * @author  韦胜健
+ * @date    2022.9.4 22:46
+ */
+export const FormLayoutPropsOption = {
+  size: { type: String as PropType<typeof ThemeSize.TYPE> },                              // 表单尺寸
+  column: { type: [String, Number] as PropType<string | number>, default: 1 },            // 多列表单的列数
+  columnGutter: { type: [Number, String] as PropType<string | number>, default: '16px' }, // 列之间的间距
+  singleColumnCenter: { type: Boolean as PropType<boolean> },                             // 单列的时候会使得表单内容居中，表单文本标题不计宽度，设置该属性为true则使得文本宽度参与计算居中
+  labelWidth: { type: [String, Number] as PropType<string | number> },                    // formItem 文本宽度
+  labelAlign: { type: String as PropType<typeof eFormLabelAlign.TYPE> },                  // 文本对其方式
+  contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> },              // 内容对其方式
+  singleColumnContentWidth: { type: Number },                                             // 单列的时候form item content的宽度
+  width: { type: [String, Number] as PropType<string | number>, },                        // 表单宽度
+  colon: { type: Boolean as PropType<boolean>, default: true },                           // label的冒号
+  verticalLabel: { type: Boolean as PropType<boolean> },                                  // 纵向的表单
+  gutter: { type: Number },                                                               // 列间隔
+  rowGutter: { type: Number },                                                            // 行间隔
+  validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
+} as const;
+
+/**
+ * FormLayoutProps属性类型
+ * @author  韦胜健
+ * @date    2022.9.4 22:48
+ */
+export type tFormLayoutPropsType = ExtractPropTypes<typeof FormLayoutPropsOption>;
+
+/**
+ * FormItem布局相关属性
+ * @author  韦胜健
+ * @date    2022.9.4 22:46
+ */
+export const FormItemLayoutPropsOption = {
+  labelWidth: { type: [String, Number] as PropType<string | number> },                // 显示文本宽度
+  column: { type: [String, Number] as PropType<string | number>, default: 1 },        // 多列表单的列数
+  block: { type: Boolean as PropType<boolean> },                                      // 占用一行
+  labelAlign: { type: String as PropType<typeof eFormLabelAlign.TYPE> },              // label 对齐方式
+  contentAlign: { type: String as PropType<typeof eFormContentAlign.TYPE> },          // content 对齐方式
+  singleColumnContentWidth: { type: Number },                                         // 单列的时候form item content的宽度
+  colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
+  validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
+} as const;
+
+/**
+ * FormItemLayoutProps属性类型
+ * @author  韦胜健
+ * @date    2022.9.4 22:49
+ */
+export type tFormItemLayoutPropsType = ExtractPropTypes<typeof FormItemLayoutPropsOption>
+
+/**
+ * 默认的文本宽度
+ * @author  韦胜健
+ * @date    2022.9.4 23:21
+ */
+export const DefaultFormLabelWidth = (() => {
+  let value = '150px';
+  return { value };
+})();
+
+/**
+ * 布局组合
+ * @author  韦胜健
+ * @date    2022.9.4 22:50
+ */
+export const useFormLayout = (() => {
+
+  const FORM_LAYOUT_PROVIDER = '@@FORM_LAYOUT_PROVIDER';
+
+  const useForm = (props: tFormLayoutPropsType, styleComputed: tStyleComputed) => {
+    /*是否为单列*/
+    const isSingleColumn = computed(() => props.column === 1);
+    /*列间距*/
+    const gutter = computed((): number => {
+      if (props.gutter != null) {
+        return removeUnit(props.gutter) as any;
+      }
+      /*单列的情况下不设置列间距*/
+      return isSingleColumn.value ? 0 : FormSizeGutter[styleComputed.value.size];
+    });
+    /*行间距*/
+    const rowGutter = computed((): number => {
+      if (props.rowGutter != null) {
+        return removeUnit(props.rowGutter) as any;
+      }
+      return FormSizeRowsGutter[styleComputed.value.size];
+    });
+    /*校验消息的位置*/
+    const validateMessagePosition = computed(() => {
+      if (!!props.validateMessagePosition) {return props.validateMessagePosition;}
+
+      /*纵向文本的情况下，校验消息默认放在左下角*/
+      if (props.verticalLabel) {return FormValidateMessagePosition["bottom-left"];}
+      if (isSingleColumn.value) {
+        /*单列的情况下，校验消息默认放在右侧*/
+        return FormValidateMessagePosition['right'];
+      } else {
+        /*其他都放在右下角*/
+        return FormValidateMessagePosition['bottom-right'];
+      }
+    });
+    /*根节点样式*/
+    const styles = useStyles((styles) => {
+      if (!isSingleColumn.value) {
+        // styles.padding = `${rowGutter.value / 2}px ${gutter.value}px`;
+      }
+    });
+    /*inner节点样式，有列间距时拓展宽度*/
+    const innerStyles = useStyles(style => {
+      if (!isSingleColumn.value && !!gutter.value) {
+        style.width = `calc(100% + ${unit(gutter.value)})`;
+      }
+      style.margin = `${-rowGutter.value / 2}px ${unit(-gutter.value / 2)}`;
+    });
+    const refer = { props, styles, gutter, rowGutter, innerStyles, isSingleColumn, validateMessagePosition };
+    provide(FORM_LAYOUT_PROVIDER, refer);
+    return refer;
+  };
+
+  const useFormItem = (props: tFormItemLayoutPropsType) => {
+    const form = inject<ReturnType<typeof useForm>>(FORM_LAYOUT_PROVIDER)!;
+
+    /**
+     * 文本宽度
+     * @author  韦胜健
+     * @date    2022.9.4 23:21
+     */
+    const labelWidth = computed((): number | string => {
+      /*纵向文本表单情况下，文本宽度占用整行*/
+      if (form.props.verticalLabel) {
+        return '100%';
+      }
+      let width = props.labelWidth != null ? props.labelWidth : form.props.labelWidth;
+
+      /*如果没有设置宽度，单列的情况下不设置宽度使得label自动撑开宽度，多列的情况下设置默认宽度*/
+      if (width == null && form.props.column !== 1) {
+        width = DefaultFormLabelWidth.value;
+      } else {
+        width = Number(width);
+      }
+      return width;
+    });
+
+    /**
+     * 占用的列数
+     * @author  韦胜健
+     * @date    2022.9.4 23:22
+     */
+    const column = computed((): number => {
+      let column = props.column || 1;
+      if (props.block) {
+        column = Number(form.props.column);
+      }
+      return Number(column);
+    });
+
+    /**
+     * 冒号
+     * @author  韦胜健
+     * @date    2022.9.4 23:22
+     */
+    const colon = computed((): boolean => {
+      if (props.colon != null) {
+        return props.colon;
+      } else {
+        return form.props.colon;
+      }
+    });
+
+    /**
+     * 文本对其方式
+     * @author  韦胜健
+     * @date    2022.9.4 23:22
+     */
+    const labelAlign = computed(() => props.labelAlign || form.props.labelAlign || (form.props.verticalLabel ? eFormLabelAlign.left : eFormLabelAlign.right));
+
+    /**
+     * 内容对其方式
+     * @author  韦胜健
+     * @date    2022.9.4 23:22
+     */
+    const contentAlign = computed(() => props.contentAlign || form.props.contentAlign || eFormContentAlign.left);
+
+    const validateMessagePosition = computed(() => props.validateMessagePosition || form.validateMessagePosition.value);
+    /**
+     * 根节点样式
+     * @author  韦胜健
+     * @date    2022.9.4 23:23
+     */
+    const styles = useStyles((styles) => {
+      styles.width = (() => {
+        const totalColumn = Number(form.props.column);
+        const itemColumn = column.value;
+        if (itemColumn === totalColumn) {
+          return '100%';
+        }
+        return `calc(${Number((itemColumn / totalColumn).toFixed(4)) * 100}%)`;
+      })();
+      styles.padding = `0 ${unit(form.gutter.value / 2)}`;
+      styles.margin = `${form.rowGutter.value / 2}px 0`;
+    });
+
+    /**
+     * label节点样式
+     * @author  韦胜健
+     * @date    2022.9.4 23:24
+     */
+    const labelStyles = useStyles(style => {
+      if (!form.isSingleColumn.value) {
+        if (!!labelWidth.value && !form.props.verticalLabel) {
+          style.width = unit(labelWidth.value);
+        }
+      }
+    });
+    /**
+     * content节点样式
+     * @author  韦胜健
+     * @date    2022/10/28 10:34
+     */
+    const contentStyles = useStyles(style => {
+      if (!form.isSingleColumn.value) {
+        if (!!labelWidth.value && !form.props.verticalLabel) {
+          style.width = `calc(100% - ${unit(labelWidth.value)})`;
+        }
+      } else {
+        style.width = unit((() => {
+          if (props.singleColumnContentWidth) {
+            return props.singleColumnContentWidth;
+          }
+          if (form.props.singleColumnContentWidth) {
+            return form.props.singleColumnContentWidth;
+          }
+          if (form.props.column === 1 && !!form.props.labelWidth) {
+            return `calc(100% - ${unit(form.props.labelWidth)})`;
+          }
+          return 400;
+        })());
+      }
+    });
+
+    return {
+      colon,
+      labelAlign,
+      contentAlign,
+      styles,
+      labelStyles,
+      contentStyles,
+      form,
+      validateMessagePosition,
+    };
+  };
+
+  return { useForm, useFormItem };
+})();
+
+const FormSizeGutter: Record<typeof ThemeSize.TYPE, number> = {
+  large: 16,
+  normal: 12,
+  small: 8,
+  mini: 4,
+};
+
+const FormSizeRowsGutter: Record<typeof ThemeSize.TYPE, number> = {
+  large: 32,
+  normal: 24,
+  small: 16,
+  mini: 14,
+};
+
+export const FormValidateMessagePosition = createEnum([
+  'bottom-left',
+  'bottom-right',
+  'right'
+] as const);