@houaoran/designer 1.0.0

package/src/config/rule/html.js

@@ -0,0 +1,43 @@
+import {localeProps} from '../../utils';
+
+const label = 'HTML';
+const name = 'html';
+
+export default {
+    menu: 'aide',
+    icon: 'icon-html',
+    label,
+    name,
+    rule() {
+        return {
+            type: name,
+            title: '',
+            native: true,
+            attrs: {
+                innerHTML: ''
+            },
+            style: {
+                display: 'block',
+                width: '100%',
+            },
+            children: ['<div style="color:blue;">\n' +
+            ' html html html html html html html html html\n' +
+            '  </div>'],
+        };
+    },
+    watch: {
+        formCreateNative({value, rule}) {
+            if (value) {
+                rule.title = '';
+            }
+        }
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {
+                type: 'HtmlEditor',
+                field: 'formCreateChild',
+            }
+        ]);
+    }
+};

package/src/config/rule/image.js

@@ -0,0 +1,32 @@
+import {localeProps} from '../../utils';
+
+const label = '图片';
+const name = 'elImage';
+
+export default {
+    menu: 'aide',
+    icon: 'icon-image',
+    label,
+    name,
+    rule() {
+        return {
+            type: name,
+            title: '',
+            style: {
+                width: '100px',
+                height: '100px',
+            },
+            props: {
+                src: 'https://static.form-create.com/example.png',
+            }
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {
+                type: 'input',
+                field: 'src',
+            }
+        ]);
+    }
+};

package/src/config/rule/input.js

@@ -0,0 +1,62 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeOptions, localeProps} from '../../utils';
+
+const label = '输入框';
+const name = 'input';
+
+export default {
+    menu: 'main',
+    icon: 'icon-input',
+    label,
+    name,
+    input: true,
+    event: ['blur', 'focus', 'change', 'input', 'clear'],
+    validate: ['string', 'url', 'email'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.input.name'),
+            info: '',
+            $required: false,
+            props: {}
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {
+                type: 'switch',
+                field: 'disabled'
+            },
+            {
+                type: 'switch',
+                field: 'readonly'
+            },
+            {
+                type: 'select',
+                field: 'type',
+                options: localeOptions(t, [
+                    {label: 'text', value: 'text'},
+                    {label: 'number', value: 'number'},
+                    {label: 'time', value: 'time'},
+                    {label: 'date', value: 'date'},
+                    {label: 'month', value: 'month'},
+                    {label: 'datetime-local', value: 'datetime-local'},
+                ])
+            },
+            {
+                type: 'inputNumber',
+                field: 'maxlength',
+                props: {min: 0}
+            },
+            {
+                type: 'input',
+                field: 'placeholder'
+            },
+            {
+                type: 'switch',
+                field: 'clearable'
+            },
+        ]);
+    }
+};

package/src/config/rule/number.js

@@ -0,0 +1,49 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeOptions, localeProps} from '../../utils';
+
+const label = '计数器';
+const name = 'inputNumber';
+
+export default {
+    menu: 'main',
+    icon: 'icon-number',
+    label,
+    name,
+    input: true,
+    event: ['blur', 'focus', 'change'],
+    validate: ['number', 'integer', 'float'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.inputNumber.name'),
+            info: '',
+            $required: false,
+            props: {}
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{type: 'switch', field: 'disabled'}, {
+            type: 'inputNumber',
+            field: 'min'
+        }, {
+            type: 'inputNumber',
+            field: 'max',
+        },  {
+            type: 'inputNumber',
+            title: 'precision',
+            field: 'precision',
+        }, {type: 'inputNumber', field: 'step', props: {min: 0}}, {
+            type: 'switch',
+            field: 'stepStrictly'
+        }, {
+            type: 'switch',
+            field: 'controls',
+            value: true
+        }, {
+            type: 'select',
+            field: 'controlsPosition',
+            options: localeOptions(t, [{label: 'default', value: ''}, {label: 'right', value: 'right'}])
+        }, {type: 'input', field: 'placeholder'}]);
+    }
+};

package/src/config/rule/password.js

@@ -0,0 +1,52 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps} from '../../utils';
+
+const label = '密码输入框';
+const name = 'password';
+
+export default {
+    menu: 'main',
+    icon: 'icon-password',
+    label,
+    name,
+    input: true,
+    event: ['blur', 'focus', 'change', 'input', 'clear'],
+    validate: ['string'],
+    rule({t}) {
+        return {
+            type: 'input',
+            field: uniqueId(),
+            title: t('com.password.name'),
+            info: '',
+            $required: false,
+            props: {
+                type: 'password'
+            }
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {
+                type: 'switch',
+                field: 'disabled'
+            },
+            {
+                type: 'switch',
+                field: 'readonly'
+            },
+            {
+                type: 'inputNumber',
+                field: 'maxlength',
+                props: {min: 0}
+            },
+            {
+                type: 'input',
+                field: 'placeholder'
+            },
+            {
+                type: 'switch',
+                field: 'clearable'
+            },
+        ]);
+    }
+};

package/src/config/rule/radio.js

@@ -0,0 +1,43 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps, makeOptionsRule, makeTreeOptions} from '../../utils/index';
+
+const label = '单选框';
+const name = 'radio';
+
+export default {
+    menu: 'main',
+    icon: 'icon-radio',
+    label,
+    name,
+    input: true,
+    event: ['change'],
+    validate: ['string', 'number'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.radio.name'),
+            info: '',
+            effect: {
+                fetch: ''
+            },
+            $required: false,
+            props: {},
+            options: makeTreeOptions(t('props.option'), {label: 'label', value: 'value'}, 1)
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            makeOptionsRule(t, 'options'),
+            {type: 'switch', field: 'disabled'},
+            {type: 'switch', field: 'input'},
+            {
+                type: 'switch',
+                field: 'type',
+                props: {activeValue: 'button', inactiveValue: 'default'}
+            }, {type: 'ColorInput', field: 'textColor'}, {
+                type: 'ColorInput',
+                field: 'fill'
+            }]);
+    }
+};

package/src/config/rule/rate.js

@@ -0,0 +1,44 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps} from '../../utils';
+
+const label = '评分';
+const name = 'rate';
+
+export default {
+    menu: 'main',
+    icon: 'icon-rate',
+    label,
+    name,
+    input: true,
+    event: ['change'],
+    validate: ['number'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.rate.name'),
+            info: '',
+            $required: false,
+            props: {},
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {type: 'inputNumber', field: 'max', props: {min: 0}}, {
+                type: 'switch',
+                field: 'disabled'
+            }, {type: 'switch', field: 'allowHalf'}, {
+                type: 'ColorInput',
+                field: 'voidColor'
+            }, {type: 'ColorInput', field: 'disabledVoidColor'}, {
+                type: 'input',
+                field: 'voidIconClass'
+            }, {type: 'input', field: 'disabledVoidIconClass'}, {
+                type: 'switch',
+                field: 'showScore'
+            }, {type: 'ColorInput', field: 'textColor'}, {
+                type: 'input',
+                field: 'scoreTemplate'
+            }]);
+    }
+};

package/src/config/rule/row.js

@@ -0,0 +1,46 @@
+import {localeProps} from '../../utils';
+
+const label = '栅格布局';
+const name = 'fcRow';
+
+export default {
+    menu: 'layout',
+    icon: 'icon-row',
+    label,
+    name,
+    mask: false,
+    children: 'col',
+    childrenLen: 2,
+    rule() {
+        return {
+            type: name,
+            props: {},
+            children: []
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{
+            type: 'inputNumber',
+            field: 'gutter',
+            props: {min: 0}
+        }, {
+            type: 'switch',
+            field: 'type',
+            props: {activeValue: 'flex', inactiveValue: 'default'}
+        }, {
+            type: 'select',
+            field: 'justify',
+            options: [{label: 'start', value: 'start'}, {label: 'end', value: 'end'}, {
+                label: 'center',
+                value: 'center'
+            }, {label: 'space-around', value: 'space-around'}, {label: 'space-between', value: 'space-between'}]
+        }, {
+            type: 'select',
+            field: 'align',
+            options: [{label: 'top', value: 'top'}, {label: 'middle', value: 'middle'}, {
+                label: 'bottom',
+                value: 'bottom'
+            }]
+        }]);
+    }
+};

package/src/config/rule/select.js

@@ -0,0 +1,70 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {getInjectArg, localeProps, makeOptionsRule, makeTreeOptions} from '../../utils/index';
+
+const label = '选择器';
+const name = 'select';
+
+export default {
+    menu: 'main',
+    icon: 'icon-select',
+    label,
+    name,
+    input: true,
+    event: ['change', 'visibleChange', 'removeTag', 'clear', 'blur', 'focus'],
+    validate: ['string', 'number', 'array'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.select.name'),
+            info: '',
+            effect: {
+                fetch: ''
+            },
+            $required: false,
+            props: {},
+            options: makeTreeOptions(t('props.option'), {label: 'label', value: 'value'}, 1)
+        };
+    },
+    watch: {
+        multiple({rule}) {
+            rule.key = uniqueId();
+        }
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            makeOptionsRule(t, 'options'),
+            {type: 'switch', field: 'multiple'}, {
+                type: 'switch',
+                field: 'disabled'
+            }, {type: 'switch', field: 'clearable'}, {
+                type: 'switch',
+                field: 'collapseTags'
+            }, {
+                type: 'inputNumber',
+                field: 'multipleLimit',
+                props: {min: 0}
+            }, {type: 'input', field: 'placeholder'}, {
+                type: 'switch',
+                field: 'filterable'
+            }, {
+                type: 'switch',
+                field: 'remote',
+            }, {
+                type: 'FnInput',
+                field: 'remoteMethod',
+                props: {
+                    body: true,
+                    fnx: true,
+                    name: 'remoteMethod',
+                    args: [getInjectArg(t)],
+                },
+            }, {type: 'switch', field: 'allowCreate'}, {
+                type: 'input',
+                field: 'noMatchText'
+            }, {type: 'input', field: 'noDataText'}, {
+                type: 'switch',
+                field: 'reserveKeyword'
+            }, {type: 'switch', field: 'defaultFirstOption'}])
+    }
+};

package/src/config/rule/signaturePad.js

@@ -0,0 +1,59 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {getInjectArg, localeProps} from '../../utils';
+
+const label = '手写签名';
+const name = 'signaturePad';
+
+export default {
+    menu: 'main',
+    icon: 'icon-sign',
+    label: label,
+    name: name,
+    input: true,
+    mask: true,
+    languageKey: ['signaturePadTip', 'signaturePadTitle', 'reset', 'ok'],
+    event: ['change', 'remove'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.signaturePad.name'),
+            info: '',
+            $required: false,
+            props: {},
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            {
+                type: 'input',
+                field: 'tip',
+            },
+            {
+                type: 'input',
+                field: 'padTitle',
+            },
+            {
+                type: 'ColorInput',
+                field: 'penColor',
+            },
+            {
+                type: 'switch',
+                field: 'disabled',
+            },
+            {
+                type: 'FnInput',
+                field: 'beforeRemove',
+                warning: t('com.signaturePad.info'),
+                props: {
+                    body: true,
+                    button: true,
+                    fnx: true,
+                    args: [getInjectArg(t)],
+                    name: 'beforeRemove',
+                }
+            },
+        ]);
+    },
+};
+

package/src/config/rule/slider.js

@@ -0,0 +1,53 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps} from '../../utils';
+
+const label = '滑块';
+const name = 'slider';
+
+export default {
+    menu: 'main',
+    icon: 'icon-slider',
+    label,
+    name,
+    input: true,
+    event: ['change', 'input'],
+    validate: ['number', 'array'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.slider.name'),
+            info: '',
+            $required: false,
+            props: {},
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{type: 'switch', field: 'disabled'}, {
+            type: 'switch',
+            field: 'range'
+        }, {
+            type: 'inputNumber',
+            field: 'min',
+            props: {min: 0}
+        }, {
+            type: 'inputNumber',
+            field: 'max',
+            props: {min: 0},
+        }, {
+            type: 'inputNumber',
+            field: 'step',
+            props: {min: 0},
+        }, {type: 'switch', field: 'showInput'}, {
+            type: 'switch',
+            field: 'showInputControls',
+            value: true
+        }, {type: 'switch', field: 'showStops'}, {
+            type: 'switch',
+            field: 'vertical'
+        }, {
+            type: 'input',
+            field: 'height'
+        }]);
+    }
+};

package/src/config/rule/space.js

@@ -0,0 +1,44 @@
+import {localeProps} from '../../utils';
+
+const label = '间距';
+const name = 'space';
+
+export default {
+    menu: 'layout',
+    icon: 'icon-space',
+    label,
+    name,
+    rule() {
+        return {
+            type: 'div',
+            wrap: {
+                show: false
+            },
+            native: true,
+            style: {
+                width: '100%',
+                height: '20px',
+            },
+            children: []
+        };
+    },
+    props(_, {t}) {
+        return [
+            {
+                type: 'object',
+                field: 'formCreateStyle',
+                native: true,
+                props: {
+                    rule: localeProps(t, name + '.props', [
+                        {
+                            type: 'input',
+                            field: 'height',
+                            title: 'height',
+                        },
+                    ])
+                }
+            }
+
+        ];
+    }
+};

package/src/config/rule/subForm.js

@@ -0,0 +1,47 @@
+import {localeProps} from '../../utils';
+import uniqueId from '@form-create/utils/lib/unique';
+
+const label = '分组';
+const name = 'subForm';
+
+export default {
+    menu: 'subform',
+    icon: 'icon-group',
+    label,
+    name,
+    inside: false,
+    drag: true,
+    dragBtn: true,
+    mask: false,
+    input: true,
+    subForm: 'object',
+    event: ['change'],
+    loadRule(rule) {
+        rule.children = rule.props.rule || [];
+        rule.type = 'FcRow';
+        delete rule.props.rule;
+    },
+    parseRule(rule) {
+        rule.props.rule = rule.children;
+        rule.type = 'subForm';
+        delete rule.children;
+    },
+    rule({t}) {
+        return {
+            type: 'fcRow',
+            field: uniqueId(),
+            title: t('com.subForm.name'),
+            info: '',
+            $required: false,
+            props: {},
+            children: []
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{
+            type: 'switch',
+            field: 'disabled'
+        }, {type: 'switch', field: 'syncDisabled', value: true},
+        ]);
+    }
+};