plain-design 1.0.0-beta.23 → 1.0.0-beta.25

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

@@ -1,266 +1,266 @@
-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 },                                                            // 行间隔
+} 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,
+};

package/src/packages/components/Form/types/any.tsx

@@ -1,54 +1,54 @@
-import {toArray} from "plain-utils/utils/toArray";
-import {iValidation} from "../validate/createValidation";
-import i18n from "../../i18n";
-
-export function registryAnyValidationType(Validation: iValidation) {
-  Validation.registryValidateType('any', async ({ value, rule, required, getMessage }) => {
-
-    /*是否没有值*/
-    let isEmpty = (
-      /*null, undefined*/
-      value == null ||
-      /*空字符串*/
-      (typeof value === "string" && value.trim() === '') ||
-      /*空数组*/
-      (Array.isArray(value) && value.length === 0)
-    );
-
-    /*any值的必填校验*/
-    if (required) {
-      if (isEmpty) {
-        return getMessage(i18n('base.validate.require').d('必填'));
-      }
-    }
-
-    /*正则匹配*/
-    const pattern = rule.pattern as RegExp;
-    if (!!pattern && !isEmpty) {
-      if (!pattern.test(String(value))) {
-        return getMessage(`${i18n('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
-      }
-    }
-
-    /*最小值*/
-    if (rule.min != null) {
-      return getMessage(i18n('base.validate.canNotUseMinInAnyType').d('any类型无法使用min校验'));
-    }
-    /*最大值*/
-    if (rule.max != null) {
-      return getMessage(i18n('base.validate.canNotUseMaxInAnyType').d('any类型无法使用max校验'));
-    }
-    /*固定长度*/
-    if (rule.len != null) {
-      return getMessage(i18n('base.validate.canNotUseLenInAnyType').d('any类型无法使用len校验'));
-    }
-
-    /*枚举范围（取值范围）*/
-    const _enum = rule.enum;
-    if (_enum && !isEmpty) {
-      if (toArray(value).some(i => _enum.indexOf(i) === -1)) {
-        return getMessage(i18n('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
-      }
-    }
-  });
-}
+import {toArray} from "plain-utils/utils/toArray";
+import {iValidation} from "../validate/createValidation";
+import i18n from "../../i18n";
+
+export function registryAnyValidationType(Validation: iValidation) {
+  Validation.registryValidateType('any', async ({ value, rule, required, getMessage }) => {
+
+    /*是否没有值*/
+    let isEmpty = (
+      /*null, undefined*/
+      value == null ||
+      /*空字符串*/
+      (typeof value === "string" && value.trim() === '') ||
+      /*空数组*/
+      (Array.isArray(value) && value.length === 0)
+    );
+
+    /*any值的必填校验*/
+    if (required) {
+      if (isEmpty) {
+        return getMessage(i18n('base.validate.require').d('必填'));
+      }
+    }
+
+    /*正则匹配*/
+    const pattern = rule.pattern as RegExp;
+    if (!!pattern && !isEmpty) {
+      if (!pattern.test(String(value))) {
+        return getMessage(`${i18n('base.validate.notMatchPattern').d('不符合表达式')}：${pattern.source}`);
+      }
+    }
+
+    /*最小值*/
+    if (rule.min != null) {
+      return getMessage(i18n('base.validate.canNotUseMinInAnyType').d('any类型无法使用min校验'));
+    }
+    /*最大值*/
+    if (rule.max != null) {
+      return getMessage(i18n('base.validate.canNotUseMaxInAnyType').d('any类型无法使用max校验'));
+    }
+    /*固定长度*/
+    if (rule.len != null) {
+      return getMessage(i18n('base.validate.canNotUseLenInAnyType').d('any类型无法使用len校验'));
+    }
+
+    /*枚举范围（取值范围）*/
+    const _enum = rule.enum;
+    if (_enum && !isEmpty) {
+      if (toArray(value).some(i => _enum.indexOf(i) === -1)) {
+        return getMessage(i18n('base.validate.outOfRange', { value, range: _enum }).d(`值${value}超出了范围${_enum}`));
+      }
+    }
+  });
+}