@longhongguo/form-create-ant-design-vue 3.2.36

package/src/core/manager.js

@@ -0,0 +1,303 @@
+import getConfig from './config';
+import mergeProps from '@form-create/utils/lib/mergeprops';
+import is, {hasProperty} from '@form-create/utils/lib/type';
+import extend from '@form-create/utils/lib/extend';
+
+function isTooltip(info) {
+    return info.type === 'tooltip';
+}
+
+function tidy(props, name) {
+    if (!hasProperty(props, name)) return;
+    if (is.String(props[name])) {
+        props[name] = {[name]: props[name], show: true};
+    }
+}
+
+function isFalse(val) {
+    return val === false;
+}
+
+function tidyBool(opt, name) {
+    if (hasProperty(opt, name) && !is.Object(opt[name])) {
+        opt[name] = {show: !!opt[name]};
+    }
+}
+
+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) {
+        const form = this.form();
+        if (form) {
+            return form.validateFields(field);
+        } else {
+            return new Promise(v => v());
+        }
+    },
+    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;
+    },
+    tidyRule({prop}) {
+        tidy(prop, 'title');
+        tidy(prop, 'info');
+        return prop;
+    },
+    mergeProp(ctx) {
+        const def = {
+            info: {
+                type: 'popover',
+                placement: 'topLeft',
+                icon: 'QuestionCircleOutlined'
+            },
+            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();
+    },
+    adapterValidate(validate, validator) {
+        validate.validator = (rule, value) => {
+            return new Promise((resolve, reject) => {
+                const callback = (err) => {
+                    if (err) {
+                        reject(err);
+                    } else {
+                        resolve();
+                    }
+                }
+                return validator(value, callback);
+            })
+        }
+        return validate;
+    },
+    update() {
+        const form = this.options.form;
+        this.rule = {
+            props: {...form},
+            on: {
+                submit: (e) => {
+                    e.preventDefault();
+                }
+            },
+            style: form.style,
+            type: 'form',
+        };
+    },
+    beforeRender() {
+        const {key, ref, $handle} = this;
+        const form = this.options.form;
+        extend(this.rule, {key, ref, class: [form.className, form.class, 'form-create', this.$handle.preview ? 'is-preview' : '']});
+        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 {layout, col: _col} = this.rule.props;
+        const cls = rule.wrap.class;
+        delete rule.wrap.class;
+        delete rule.wrap.title;
+        const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
+            props: {
+                ...tidyRule(rule.wrap || {}),
+                name: ctx.id,
+                rules: ctx.injectValidate(),
+                ...(layout !== 'horizontal' ? {labelCol: {}, wrapperCol: {}} : {})
+            },
+            class: this.$render.mergeClass(cls || rule.className, 'fc-form-item'),
+            key: `${uni}fi`,
+            ref: ctx.wrapRef,
+            type: 'formItem',
+        }]), {default: () => children, ...(isTitle ? {label: () => this.makeInfo(rule, uni, ctx)} : {})});
+        return (layout === 'inline' || 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};
+        if (this.options.form.title === false) return false;
+        if ((!titleProp.title && !titleProp.native) || isFalse(titleProp.show)) return;
+        const isTip = isTooltip(infoProp);
+        const titleSlot = this.getSlot('title');
+        const children = [titleSlot ? titleSlot({title: ctx.refRule?.__$title?.value, rule: ctx.rule, options: this.options}) : ctx.refRule?.__$title?.value];
+
+        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 = isTip ? 'title' : '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 || 'default']: () => this.$r({
+                    type: infoProp.icon === true ? 'QuestionCircleOutlined' : (infoProp.icon || ''),
+                    props: {type: infoProp.icon === true ? 'QuestionCircleOutlined' : infoProp.icon},
+                    key: `${uni}i`
+                })
+            }))
+        }
+
+        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;
+        }
+        let {labelCol, wrapperCol, layout} = this.rule.props;
+        if (layout !== 'horizontal') {
+            labelCol = wrapperCol = {};
+        }
+        const item = this.$r({
+            type: 'formItem',
+            class: 'fc-form-item fc-form-footer',
+            key: `${this.key}fb`,
+            props: {
+                labelCol,
+                wrapperCol,
+                label: ' ', colon: false
+            }
+        }, vn);
+
+        return layout === 'inline'
+            ? item
+            : this.$r({
+                type: 'col',
+                class: 'fc-form-col',
+                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, marginLeft: '10px'},
+            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/src/core/modelFields.js

@@ -0,0 +1,11 @@
+export default {
+    autoComplete: 'value',
+    cascader: 'value',
+    inputNumber: 'value',
+    inputPassword: 'value',
+    textarea: 'value',
+    rate: 'value',
+    slider: 'value',
+    treeSelect: 'value',
+    switch: 'checked',
+}

package/src/core/provider.js

@@ -0,0 +1,55 @@
+import is from '@form-create/utils/lib/type';
+
+const required = {
+    name: 'required',
+    load(inject, rule, api) {
+        const val = parseVal(inject.getValue());
+        if (val.required === false) {
+            inject.clearProp();
+            api.clearValidateState([rule.field]);
+        } else {
+            const validate = {
+                required: true,
+                validator(_, v) {
+                    return new Promise((resolve, reject) => {
+                        is.empty(v) ? reject(validate.message) : resolve();
+                    })
+                },
+                ...val,
+            };
+            const title = rule.__fc__.refRule?.__$title?.value;
+            if (!validate.message) {
+                validate.message = api.t('required', {title}) || (title + (api.getLocale() === 'en' ? ' is required' : '不能为空'));
+            } else {
+                const match = validate.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+                if (match) {
+                    validate.message = api.t(match[1], {title});
+                }
+            }
+            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/src/index.js

@@ -0,0 +1,13 @@
+import antdvFormCreate from './core/index';
+
+const FormCreate = antdvFormCreate();
+
+if (typeof window !== 'undefined') {
+    window.formCreate = FormCreate;
+}
+
+const maker = FormCreate.maker;
+
+export {maker}
+
+export default FormCreate;

package/src/parsers/cascader.js

@@ -0,0 +1,35 @@
+import { hasProperty } from '@form-create/utils/lib/type'
+
+export default {
+  name: 'cascader',
+  mergeProp(ctx) {
+    const props = ctx.prop.props
+    if (!hasProperty(props, 'options')) props.options = ctx.prop.options || []
+
+    // 检测 loading 状态：从 effectData('fetch') 中获取 loading 状态
+    const fetchData = ctx.effectData('fetch')
+    const isLoading = fetchData && fetchData.loading === true
+
+    // 如果正在加载，设置 disabled 和 loading
+    if (isLoading) {
+      props.disabled = true
+      props.loading = true
+    }
+  },
+  render(children, ctx) {
+    // 检测 loading 状态（与 mergeProp 中的逻辑保持一致）
+    const fetchData = ctx.effectData('fetch')
+    const isLoading = fetchData && fetchData.loading === true
+
+    // 如果有 loading 插槽且正在加载，将 loading 插槽传递给组件的 notFoundContent 插槽
+    if (isLoading && children.loading) {
+      // 将 loading 插槽合并到 children 中，作为 notFoundContent
+      const newChildren = { ...children }
+      newChildren.notFoundContent = children.loading
+      return ctx.$render.defaultRender(ctx, newChildren)
+    }
+
+    // 调用默认渲染
+    return ctx.$render.defaultRender(ctx, children)
+  }
+}

package/src/parsers/checkbox.js

@@ -0,0 +1,12 @@
+import {hasProperty} from '@form-create/utils/lib/type';
+
+export default {
+    name: 'checkbox',
+    modelField: 'value',
+    mergeProp(ctx) {
+        const props = ctx.prop.props;
+        if (!hasProperty(props, 'options'))
+            props.options = ctx.prop.options || [];
+    }
+
+}

package/src/parsers/datePicker.js

@@ -0,0 +1,44 @@
+import { creatorFactory } from '@longhongguo/form-create-core/src/index'
+
+const FORMAT_TYPE = {
+  date: 'YYYY-MM-DD',
+  month: 'YYYY-MM',
+  week: 'YYYY-wo',
+  quarter: 'YYYY-qQ',
+  year: 'YYYY'
+}
+
+const name = 'datePicker'
+
+export default {
+  name,
+  maker: (function () {
+    return ['date', 'month', 'week'].reduce(
+      (initial, type) => {
+        initial[type] = creatorFactory(name, { type })
+        return initial
+      },
+      {
+        dateRange: creatorFactory(name, { type: 'range' }),
+        datetimeRange: creatorFactory(name, (m) =>
+          m.props({ type: 'range', showTime: true })
+        )
+      }
+    )
+  })(),
+  modelField: 'value',
+  mergeProp(ctx) {
+    const props = ctx.prop.props
+    const type = props.type || props.picker
+    if (!props.valueFormat) {
+      props.valueFormat =
+        (FORMAT_TYPE[type] || FORMAT_TYPE['date']) +
+        (props.showTime && (!type || type === 'date') ? ' HH:mm:ss' : '')
+    }
+  },
+  render(children, ctx) {
+    return ctx.$render.vNode[
+      (ctx.prop.props.range === true ? 'range' : 'date') + 'Picker'
+    ](ctx.prop, children)
+  }
+}

package/src/parsers/hidden.js

@@ -0,0 +1,13 @@
+import { creatorFactory } from '@longhongguo/form-create-core/src/index'
+
+const name = 'hidden'
+
+export default {
+  name,
+  maker: {
+    [name]: (field, value) => creatorFactory(name)('', field, value)
+  },
+  render() {
+    return []
+  }
+}

package/src/parsers/index.js

@@ -0,0 +1,27 @@
+import checkbox from './checkbox'
+import radio from './radio'
+import select from './select'
+import cascader from './cascader'
+import datePicker from './datePicker'
+import hidden from './hidden'
+import input from './input'
+import timePicker from './timePicker'
+import tree from './tree'
+import row from './row'
+import rangePicker from './rangePicker'
+import timeRangePicker from './timeRangePicker'
+
+export default [
+  checkbox,
+  datePicker,
+  rangePicker,
+  hidden,
+  input,
+  timePicker,
+  timeRangePicker,
+  tree,
+  radio,
+  select,
+  cascader,
+  row
+]

package/src/parsers/input.js

@@ -0,0 +1,30 @@
+import { creatorFactory } from '@longhongguo/form-create-core/src/index'
+
+const name = 'input'
+export default {
+  name,
+  maker: (function () {
+    return ['password', 'url', 'email', 'text', 'textarea', 'search'].reduce(
+      (maker, type) => {
+        maker[type] = creatorFactory(name, { type })
+        return maker
+      },
+      {
+        idate: creatorFactory(name, { type: 'date' })
+      }
+    )
+  })(),
+  modelField: 'value',
+  render(children, ctx) {
+    let type = ctx.prop.props.type
+    if (['textarea', 'search', 'password'].indexOf(type) === -1) type = 'input'
+
+    type =
+      {
+        textarea: 'aTextarea',
+        search: 'aInputSearch',
+        password: 'aInputPassword'
+      }[type] || 'aInput'
+    return ctx.$render.vNode.make(type, ctx.prop, children)
+  }
+}

package/src/parsers/radio.js

@@ -0,0 +1,5 @@
+import checkbox from './checkbox';
+
+export default {
+    ...checkbox, name: 'radio'
+};

package/src/parsers/rangePicker.js

@@ -0,0 +1,12 @@
+import datePicker from './datePicker';
+
+const name = 'rangePicker';
+
+export default {
+    ...datePicker,
+    name,
+    maker: {},
+    render(children, ctx) {
+        return ctx.$render.vNode['rangePicker'](ctx.prop, children);
+    }
+}

package/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, _)
+            ]
+        })
+    }
+}

package/src/parsers/select.js

@@ -0,0 +1,37 @@
+import checkbox from './checkbox'
+import { hasProperty } from '@form-create/utils/lib/type'
+
+export default {
+  ...checkbox,
+  name: 'select',
+  mergeProp(ctx) {
+    const props = ctx.prop.props
+    if (!hasProperty(props, 'options')) props.options = ctx.prop.options || []
+
+    // 检测 loading 状态：从 effectData('fetch') 中获取 loading 状态
+    const fetchData = ctx.effectData('fetch')
+    const isLoading = fetchData && fetchData.loading === true
+
+    // 如果正在加载，设置 disabled 和 loading
+    if (isLoading) {
+      props.disabled = true
+      props.loading = true
+    }
+  },
+  render(children, ctx) {
+    // 检测 loading 状态（与 mergeProp 中的逻辑保持一致）
+    const fetchData = ctx.effectData('fetch')
+    const isLoading = fetchData && fetchData.loading === true
+
+    // 如果有 loading 插槽且正在加载，将 loading 插槽传递给组件的 notFoundContent 插槽
+    if (isLoading && children.loading) {
+      // 将 loading 插槽合并到 children 中，作为 notFoundContent
+      const newChildren = { ...children }
+      newChildren.notFoundContent = children.loading
+      return ctx.$render.defaultRender(ctx, newChildren)
+    }
+
+    // 调用默认渲染
+    return ctx.$render.defaultRender(ctx, children)
+  }
+}

package/src/parsers/timePicker.js

@@ -0,0 +1,15 @@
+export default {
+    name: 'timePicker',
+    modelField: 'value',
+    mergeProp(ctx) {
+        const props = ctx.prop.props;
+        if (!props.valueFormat) {
+            props.valueFormat = 'HH:mm:ss';
+        }
+    },
+    render(children, ctx) {
+        return ctx.$render.vNode['time' +( ctx.prop.props.range === true ? 'Range' : '') + 'Picker'](ctx.prop, children);
+    }
+
+}
+

package/src/parsers/timeRangePicker.js

@@ -0,0 +1,11 @@
+import timePicker from './timePicker';
+
+const name = 'timeRangePicker';
+
+export default {
+    ...timePicker,
+    name,
+    render(children, ctx) {
+        return ctx.$render.vNode['timeRangePicker'](ctx.prop, children);
+    }
+}

package/src/parsers/tree.js

@@ -0,0 +1,16 @@
+export default {
+    name: 'tree',
+    modelField: 'checkedKeys',
+    mergeProp(ctx) {
+        const props = ctx.prop.props;
+        if (!props.fieldNames)
+            props.fieldNames = {
+                key: 'id'
+            };
+        else if (!props.fieldNames.key) props.fieldNames.key = 'id';
+        props.checkedKeys = ctx.rule.value;
+        props.checkable = true;
+    },
+
+}
+

package/src/style/index.css

@@ -0,0 +1,23 @@
+.form-create .form-create .ant-form-item {
+    margin-bottom: 22px;
+}
+
+.form-create .form-create .ant-form-item.ant-form-item-with-help {
+    margin-bottom: 3px;
+}
+
+.form-create .form-create .ant-form-item .ant-form-item.ant-form-item-with-help {
+    margin-bottom: -22px;
+}
+
+.form-create{
+    width: 100%;
+}
+
+.form-create.is-preview .fc-clock, .form-create .fc-none, .form-create.is-preview .ant-form-item .ant-form-item-label >label.ant-form-item-required::before {
+    display: none !important;
+}
+
+.fc-form-footer {
+    margin-top: 12px;
+}