@bdsoft/element 1.1.0

package/package-form/element-form/src/core/config.js

@@ -0,0 +1,62 @@
+/**
+ * 获取表单配置的函数
+ * @returns {Object} 包含表单、行、提交按钮和重置按钮配置的对象
+ */
+export default function getConfig() {
+    return {
+        // 表单的配置
+        form: {
+            // 是否为内联表单
+            inline: false,
+            // 标签的位置
+            labelPosition: 'right',
+            // 标签的宽度
+            labelWidth: '125px',
+            // 表单是否禁用
+            disabled: false,
+            // 表单的尺寸
+            size: undefined,
+        },
+        // 行的配置
+        row: {
+            // 是否显示行
+            show: true,
+            // 行的间距
+            gutter: 0,
+        },
+        // 提交按钮的配置
+        submitBtn: {
+            // 按钮的类型
+            type: 'primary',
+            // 按钮是否处于加载状态
+            loading: false,
+            // 按钮是否禁用
+            disabled: false,
+            // 按钮的内部文本
+            innerText: '',
+            // 按钮是否显示
+            show: true,
+            // 按钮所在的列配置
+            col: undefined,
+            // 按钮的点击事件处理函数
+            click: undefined,
+        },
+        // 重置按钮的配置
+        resetBtn: {
+            // 按钮的类型
+            type: 'default',
+            // 按钮是否处于加载状态
+            loading: false,
+            // 按钮是否禁用
+            disabled: false,
+            // 按钮的内部文本
+            innerText: '',
+            // 按钮是否显示
+            show: false,
+            // 按钮所在的列配置
+            col: undefined,
+            // 按钮的点击事件处理函数
+            click: undefined,
+        },
+    };
+}

package/package-form/element-form/src/core/index.js

@@ -0,0 +1,60 @@
+import components from '../components';
+import parsers from '../parsers';
+import alias from './alias';
+import manager from './manager';
+import FormCreateFactory from '../../../core/frame/index.js';
+// import makers from './maker';
+import '../style/index.css';
+import extendApi from './api';
+import required from './provider';
+
+/**
+ * 安装插件的函数，用于在 FormCreate 实例上注册组件、别名、解析器等
+ * @param {Object} FormCreate - FormCreate 实例
+ */
+function install(FormCreate) {
+    // 批量为组件设置别名，方便在表单配置中使用更简洁的名称引用组件
+    FormCreate.componentAlias(alias);
+    // 引入表单组件并注册到 FormCreate 实例中，使这些组件可以在表单中使用
+    components.forEach(component => {
+        FormCreate.component(component.name, component);
+    });
+
+    // 注册 required 提供者，用于处理表单字段的必填验证逻辑
+    FormCreate.register(required);
+
+    // 遍历解析器数组，将每个解析器注册到 FormCreate 实例中，用于解析表单配置
+    parsers.forEach((parser) => {
+        FormCreate.parser(parser);
+    });
+
+    // 以下代码被注释掉，若需要使用 makers 功能，可取消注释
+    // Object.keys(makers).forEach(name => {
+    //     FormCreate.maker[name] = makers[name];
+    // });
+
+    // 检查是否在浏览器环境中，并且是否已经引入了 ElementPlus
+    if (typeof window !== 'undefined' && window.ElementPlus) {
+        // 使用 FormCreate 的 useApp 方法，在应用初始化时安装 ElementPlus
+        FormCreate.useApp((_, app) => {
+            app.use(window.ElementPlus);
+        })
+    }
+
+}
+
+
+export default function elmFormCreate() {
+    return FormCreateFactory({
+        ui: 'process.env.UI',
+        version: 'process.env.VERSION',
+        manager,
+        extendApi,
+        install,
+        attrs: {
+            normal: ['col', 'wrap'],
+            array: ['className'],
+            key: ['title', 'info'],
+        }
+    });
+}

package/package-form/element-form/src/core/maker.js

@@ -0,0 +1,76 @@
+import {creatorFactory} from '@bdsoft-element/formcore/index';
+
+const maker = {};
+
+useAlias(maker);
+useSelect(maker);
+useTree(maker);
+useUpload(maker);
+useFrame(maker);
+
+function useAlias(maker) {
+    ['group', 'tree', 'switch', 'upload', 'autoComplete', 'checkbox', 'cascader', 'colorPicker', 'datePicker', 'frame', 'inputNumber', 'radio', 'rate'].forEach(name => {
+        maker[name] = creatorFactory(name);
+    });
+    maker.auto = maker.autoComplete;
+    maker.number = maker.inputNumber;
+    maker.color = maker.colorPicker;
+}
+
+function useSelect(maker) {
+    const select = 'select';
+    const multiple = 'multiple';
+    maker['selectMultiple'] = creatorFactory(select, {[multiple]: true});
+    maker['selectOne'] = creatorFactory(select, {[multiple]: false});
+}
+
+function useTree(maker) {
+    const name = 'tree';
+    const types = {'treeSelected': 'selected', 'treeChecked': 'checked'};
+
+    Object.keys(types).reduce((m, key) => {
+        m[key] = creatorFactory(name, {type: types[key]});
+        return m;
+    }, maker);
+}
+
+function useUpload(maker) {
+    const name = 'upload';
+    const types = {
+        image: ['image', 0],
+        file: ['file', 0],
+        uploadFileOne: ['file', 1],
+        uploadImageOne: ['image', 1],
+    };
+
+    Object.keys(types).reduce((m, key) => {
+        m[key] = creatorFactory(name, m => m.props({uploadType: types[key][0], maxLength: types[key][1]}));
+        return m
+    }, maker);
+
+    maker.uploadImage = maker.image;
+    maker.uploadFile = maker.file;
+}
+
+function useFrame(maker) {
+    const types = {
+        frameInputs: ['input', 0],
+        frameFiles: ['file', 0],
+        frameImages: ['image', 0],
+        frameInputOne: ['input', 1],
+        frameFileOne: ['file', 1],
+        frameImageOne: ['image', 1]
+    };
+
+    Object.keys(types).reduce((maker, key) => {
+        maker[key] = creatorFactory('frame', m => m.props({type: types[key][0], maxLength: types[key][1]}));
+        return maker
+    }, maker);
+
+    maker.frameInput = maker.frameInputs;
+    maker.frameFile = maker.frameFiles;
+    maker.frameImage = maker.frameImages;
+    return maker;
+}
+
+export default maker;

package/package-form/element-form/src/core/manager.js

@@ -0,0 +1,315 @@
+import getConfig from './config';
+import mergeProps from '@bdsoft-element/utils/lib/mergeprops';
+import is, {hasProperty} from '@bdsoft-element/utils/lib/type';
+import toString from '@bdsoft-element/utils/lib/tostring';
+import extend from '@bdsoft-element/utils/lib/extend';
+ 
+// 检查给定的信息对象是否为工具提示类型
+function isTooltip(info) {
+    return info.type === 'tooltip';
+}
+ 
+// 清理 props 对象中的指定名称属性，如果该属性是字符串，则将其转换为对象形式
+function tidy(props, name) {
+    if (!hasProperty(props, name)) return;
+    if (is.String(props[name])) {
+        props[name] = {[name]: props[name], show: true};
+    }
+}
+ 
+// 检查给定的值是否为 false
+function isFalse(val) {
+    return val === false;
+}
+ 
+// 清理选项中的布尔属性，如果属性不是对象，则将其转换为对象形式
+function tidyBool(opt, name) {
+    if (hasProperty(opt, name) && !is.Object(opt[name])) {
+        opt[name] = {show: !!opt[name]};
+    }
+}
+ 
+// 清理规则对象，删除 children 属性并返回新的规则对象
+function tidyRule(rule) {
+    const _rule = {...rule};
+    delete _rule.children;
+    return _rule;
+}
+ 
+export default {
+    // 验证整个表单
+    validate() {
+        const form = this.form();
+        if (form) {
+            return form.validate();
+        } else {
+            return new Promise(v => v());
+        }
+    },
+    // 验证表单中的单个字段
+    validateField(field) {
+        return new Promise((resolve, reject) => {
+            const form = this.form();
+            if (form) {
+                form.validateField(field, (res, err) => {
+                    err ? reject(err) : resolve(res);
+                });
+            } else {
+                resolve();
+            }
+        });
+    },
+    // 清除指定字段的验证状态
+    clearValidateState(ctx) {
+        const fItem = this.vm.refs[ctx.wrapRef];
+        if (fItem) {
+            fItem.clearValidate();
+        }
+    },
+    // 清理选项中的特定属性
+    tidyOptions(options) {
+        ['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col', 'title'].forEach(name => {
+            tidyBool(options, name);
+        })
+        return options;
+    },
+    // 清理规则中的 title 和 info 属性
+    tidyRule({prop}) {
+        tidy(prop, 'title');
+        tidy(prop, 'info');
+        return prop;
+    },
+    // 合并 props 对象中的默认值
+    mergeProp(ctx) {
+        const def = {
+            info: {
+                trigger: 'hover',
+                placement: 'top-start',
+                icon: true,
+            },
+            title: {},
+            col: {span: 24},
+            wrap: {},
+        };
+        ['info', 'wrap', 'col', 'title'].forEach(name => {
+            ctx.prop[name] = mergeProps([this.options[name] || {}, ctx.prop[name] || {}], def[name]);
+        });
+    },
+    // 获取默认配置选项
+    getDefaultOptions() {
+        return getConfig();
+    },
+    // 更新规则对象
+    update() {
+        const form = this.options.form;
+        this.rule = {
+            props: {...form},
+            on: {
+                submit: (e) => {
+                    e.preventDefault();
+                }
+            },
+            class: [form.className, form.class, 'form-create', this.$handle.preview ? 'is-preview' : ''],
+            style: form.style,
+            type: 'form',
+        };
+    },
+    // 渲染前准备规则对象
+    beforeRender() {
+        const {key, ref, $handle} = this;
+        extend(this.rule, {key, ref});
+        extend(this.rule.props, {
+            model: $handle.formData,
+        });
+    },
+    // 渲染表单组件
+    render(children) {
+        if (children.slotLen() && !this.$handle.preview) {
+            children.setSlot(undefined, () => this.makeFormBtn());
+        }
+        return this.$r(this.rule, isFalse(this.options.row.show) ? children.getSlots() : [this.makeRow(children)]);
+    },
+    // 创建包裹组件
+    makeWrap(ctx, children) {
+        const rule = ctx.prop;
+        const uni = `${this.key}${ctx.key}`;
+        const col = rule.col;
+        const isTitle = this.isTitle(rule) && rule.wrap.title !== false;
+        const labelWidth = (!col.labelWidth && !isTitle) ? 0 : col.labelWidth;
+        const {inline, col: _col} = this.rule.props;
+        delete rule.wrap.title;
+        const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
+            props: {
+                labelWidth: labelWidth === void 0 ? labelWidth : toString(labelWidth),
+                label: isTitle ? rule.title.title : undefined,
+                ...tidyRule(rule.wrap || {}),
+                prop: ctx.id,
+                rules: ctx.injectValidate(),
+            },
+            class: this.$render.mergeClass(rule.className, 'fc-form-item'),
+            key: `${uni}fi`,
+            ref: ctx.wrapRef,
+            type: 'formItem',
+        }]), {default: () => children, ...(isTitle ? {label: () => this.makeInfo(rule, uni, ctx)} : {})});
+        return (inline === true || isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
+    },
+    // 检查是否显示标题
+    isTitle(rule) {
+        if (this.options.form.title === false) return false;
+        const title = rule.title;
+        return !((!title.title && !title.native) || isFalse(title.show))
+    },
+    // 创建信息组件
+    makeInfo(rule, uni, ctx) {
+        const titleProp = {...rule.title};
+        const infoProp = {...rule.info};
+        const isTip = isTooltip(infoProp);
+        const form = this.options.form;
+        const titleSlot = this.getSlot('title');
+        const children = [titleSlot ? titleSlot({
+            title: ctx.refRule?.__$title.value,
+            rule: ctx.rule,
+            options: this.options
+        }) : ((ctx.refRule?.__$title.value) + (form.labelSuffix || form['label-suffix'] || ''))];
+ 
+        if (!isFalse(infoProp.show) && (infoProp.info || infoProp.native) && !isFalse(infoProp.icon)) {
+            const prop = {
+                type: infoProp.type || 'popover',
+                props: tidyRule(infoProp),
+                key: `${uni}pop`
+            };
+ 
+            delete prop.props.icon;
+            delete prop.props.show;
+            delete prop.props.info;
+            delete prop.props.align;
+            delete prop.props.native;
+ 
+            const field = 'content';
+            if (infoProp.info && !hasProperty(prop.props, field)) {
+                prop.props[field] = ctx.refRule?.__$info.value;
+            }
+ 
+            children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), {
+                [titleProp.slot || (isTip ? 'default' : 'reference')]: () => this.$r({
+                    type: 'ElIcon',
+                    style: 'top:2px',
+                    key: `${uni}i`
+                }, {
+                    default: () => this.$r({
+                        type: infoProp.icon === true ? 'icon-warning' : infoProp.icon
+                    })
+                }, true)
+            }));
+        }
+        const _prop = mergeProps([titleProp, {
+            props: tidyRule(titleProp),
+            key: `${uni}tit`,
+            class: 'fc-form-title',
+            type: titleProp.type || 'span',
+        }]);
+ 
+        delete _prop.props.show;
+        delete _prop.props.title;
+        delete _prop.props.native;
+ 
+        return this.$r(_prop, children);
+    },
+    // 创建列组件
+    makeCol(rule, uni, children) {
+        const col = rule.col;
+        return this.$r({
+            class: this.$render.mergeClass(col.class, 'fc-form-col'),
+            type: 'col',
+            props: col || {span: 24},
+            key: `${uni}col`
+        }, children);
+    },
+    // 创建行组件
+    makeRow(children) {
+        const row = this.options.row || {};
+        return this.$r({
+            type: 'row',
+            props: row,
+            class: this.$render.mergeClass(row.class, 'fc-form-row'),
+            key: `${this.key}row`
+        }, children)
+    },
+    // 创建表单按钮
+    makeFormBtn() {
+        let vn = [];
+        if (!isFalse(this.options.submitBtn.show)) {
+            vn.push(this.makeSubmitBtn())
+        }
+        if (!isFalse(this.options.resetBtn.show)) {
+            vn.push(this.makeResetBtn())
+        }
+        if (!vn.length) {
+            return;
+        }
+        const item = this.$r({
+            type: 'formItem',
+            class: 'fc-form-item',
+            key: `${this.key}fb`
+        }, vn);
+ 
+        return this.rule.props.inline === true
+            ? item
+            : this.$r({
+                type: 'col',
+                class: 'fc-form-col fc-form-footer',
+                props: {span: 24},
+                key: `${this.key}fc`
+            }, [item]);
+    },
+ 
+    // 创建重置按钮
+    makeResetBtn() {
+        const resetBtn = {...this.options.resetBtn};
+        const innerText = resetBtn.innerText || this.$handle.api.t('reset') || '重置';
+        delete resetBtn.innerText;
+        delete resetBtn.click;
+        delete resetBtn.col;
+        delete resetBtn.show;
+        return this.$r({
+            type: 'button',
+            props: resetBtn,
+            class: 'fc-reset-btn',
+            style: {width: resetBtn.width},
+            on: {
+                click: () => {
+                    const fApi = this.$handle.api;
+                    this.options.resetBtn.click
+                        ? this.options.resetBtn.click(fApi)
+                        : fApi.resetFields();
+                }
+            },
+            key: `${this.key}b2`,
+        }, [innerText]);
+    },
+    // 创建提交按钮
+    makeSubmitBtn() {
+        const submitBtn = {...this.options.submitBtn};
+        const innerText = submitBtn.innerText || this.$handle.api.t('submit') || '提交';
+        delete submitBtn.innerText;
+        delete submitBtn.click;
+        delete submitBtn.col;
+        delete submitBtn.show;
+        return this.$r({
+            type: 'button',
+            props: submitBtn,
+            class: 'fc-submit-btn',
+            style: {width: submitBtn.width},
+            on: {
+                click: () => {
+                    const fApi = this.$handle.api;
+                    this.options.submitBtn.click
+                        ? this.options.submitBtn.click(fApi)
+                        : fApi.submit().catch(() => {
+                        });
+                }
+            },
+            key: `${this.key}b1`,
+        }, [innerText]);
+    }
+}

package/package-form/element-form/src/core/provider.js

@@ -0,0 +1,79 @@
+import is from '@bdsoft-element/utils/lib/type'
+
+const required = {
+  name: 'required',
+  /**
+   * 加载验证规则的方法
+   * @param {Object} inject - 注入对象，包含获取值、清除属性等方法
+   * @param {Object} rule - 当前字段的规则对象
+   * @param {Object} api - 表单 API 对象，包含同步、清除验证状态等方法
+   */
+  load(inject, rule, api) {
+    // 解析注入的值
+    const val = parseVal(inject.getValue())
+    // 如果解析后的值中 required 为 false
+    if (val.required === false) {
+      // 清除注入的属性
+      inject.clearProp()
+      // 清除指定字段的验证状态
+      api.clearValidateState([rule.field])
+    } else {
+      // 定义验证规则对象
+      const validate = {
+        // 字段为必填项
+        required: true,
+        /**
+         * 自定义验证函数
+         * @param {Object} _ - 表单数据对象（此处未使用）
+         * @param {any} v - 当前字段的值
+         * @param {Function} call - 验证回调函数，用于返回验证结果
+         */
+        validator(_, v, call) {
+          // 如果值为空，则调用回调函数并传入错误信息
+          is.empty(v) ? call(validate.message) : call()
+        },
+        // 合并解析后的值
+        ...val
+      }
+      // 获取字段的标题
+      const title = rule.__fc__.refRule.__$title.value
+      // 如果验证规则中没有定义错误信息
+      if (!validate.message) {
+        // 尝试从 API 中获取国际化的错误信息，如果没有则使用默认信息
+        validate.message = api.t('required', { title }) || title + (api.getLocale() === 'en' ? ' is required' : '不能为空')
+      } else {
+        // 检查错误信息是否为国际化占位符
+        const match = validate.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/)
+        if (match) {
+          // 如果是占位符，则从 API 中获取国际化的错误信息
+          validate.message = api.t(match[1], { title })
+        }
+      }
+      // 将验证规则添加到注入属性的 validate 数组中
+      inject.getProp().validate = [validate]
+    }
+    // 同步表单规则
+    api.sync(rule)
+  },
+  watch(...args) {
+    required.load(...args)
+  }
+}
+
+function parseVal(val) {
+  if (is.Boolean(val)) {
+    return { required: val }
+  } else if (is.String(val)) {
+    return { message: val }
+  } else if (is.Undef(val)) {
+    return { required: false }
+  } else if (is.Function(val)) {
+    return { validator: val }
+  } else if (!is.Object(val)) {
+    return {}
+  } else {
+    return val
+  }
+}
+
+export default required

package/package-form/element-form/src/parsers/datePicker.js

@@ -0,0 +1,31 @@
+import {creatorFactory} from '@bdsoft-element/formcore/index';
+
+const DEFAULT_FORMATS = {
+    date: 'YYYY-MM-DD',
+    month: 'YYYY-MM',
+    week: 'YYYY-wo',
+    datetime: 'YYYY-MM-DD HH:mm:ss',
+    timerange: 'HH:mm:ss',
+    daterange: 'YYYY-MM-DD',
+    monthrange: 'YYYY-MM',
+    datetimerange: 'YYYY-MM-DD HH:mm:ss',
+    year: 'YYYY'
+};
+
+const name = 'datePicker';
+
+export default {
+    name,
+    maker: (function () {
+        return ['year', 'month', 'date', 'dates', 'week', 'datetime', 'datetimeRange', 'dateRange', 'monthRange'].reduce((initial, type) => {
+            initial[type] = creatorFactory(name, {type: type.toLowerCase()});
+            return initial
+        }, {});
+    }()),
+    mergeProp(ctx) {
+        const props = ctx.prop.props;
+        if (!props.valueFormat) {
+            props.valueFormat = DEFAULT_FORMATS[props.type] || DEFAULT_FORMATS['date'];
+        }
+    }
+}

package/package-form/element-form/src/parsers/hidden.js

@@ -0,0 +1,12 @@
+import {creatorFactory} from '@bdsoft-element/formcore/index';
+
+const name = 'hidden';
+export default {
+    name,
+    maker: {
+        [name]: (field, value) => creatorFactory(name)('', field, value)
+    },
+    render() {
+        return [];
+    }
+}

package/package-form/element-form/src/parsers/index.js

@@ -0,0 +1,17 @@
+import datePicker from './datePicker';
+import hidden from './hidden';
+import input from './input';
+import slider from './slider';
+import timePicker from './timePicker';
+import row from './row';
+import select from './select';
+
+export default [
+    datePicker,
+    hidden,
+    input,
+    slider,
+    timePicker,
+    row,
+    select
+]

package/package-form/element-form/src/parsers/input.js

@@ -0,0 +1,21 @@
+import {creatorFactory} from '@bdsoft-element/formcore/index';
+
+const name = 'input';
+export default {
+    name,
+    maker: (function () {
+        const maker = ['password', 'url', 'email', 'text', 'textarea'].reduce((maker, type) => {
+            maker[type] = creatorFactory(name, {type});
+            return maker;
+        }, {});
+
+        maker.idate = creatorFactory(name, {type:'date'});
+        return maker;
+    }()),
+    mergeProp(ctx) {
+        let {props} = ctx.prop;
+        if (props && props.autosize && props.autosize.minRows) {
+            props.rows = props.autosize.minRows || 2;
+        }
+    }
+}

package/package-form/element-form/src/parsers/row.js

@@ -0,0 +1,10 @@
+export default {
+    name: 'FcRow',
+    render(_, ctx) {
+        return ctx.vNode.col({props: {span: 24}}, {
+            default:()=>[
+                ctx.vNode.row(ctx.prop, _)
+            ]
+        })
+    }
+}