@houaoran/designer 1.0.0

package/src/config/rule/transfer.js

@@ -0,0 +1,59 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps, makeTreeOptions, makeTreeOptionsRule} from '../../utils';
+
+const label = '穿梭框';
+const name = 'elTransfer';
+
+export default {
+    menu: 'main',
+    icon: 'icon-transfer',
+    label,
+    name,
+    input: true,
+    event: ['change', 'leftCheckChange', 'rightCheckChange'],
+    validate: ['string', 'number', 'array'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.elTransfer.name'),
+            info: '',
+            $required: false,
+            props: {
+                data: makeTreeOptions(t('props.option'), {label: 'label', value: 'key'}, 1)
+            }
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            makeTreeOptionsRule(t, 'props.data', 'label', 'key'),
+            {type: 'switch', field: 'filterable'}, {
+                type: 'input',
+                field: 'filterPlaceholder'
+            }, {
+                type: 'select',
+                field: 'targetOrder',
+                warning: t('com.elTransfer.props.targetOrderInfo'),
+                options: [{label: 'original', value: 'original'}, {
+                    label: 'push',
+                    value: 'push'
+                }, {label: 'unshift', value: 'unshift'}]
+            }, {
+                type: 'TableOptions',
+                field: 'titles',
+                props: {
+                    column: [{label: t('props.value'), key: 'value'}],
+                    valueType: 'string',
+                    max: 2,
+                }
+            }, {
+                type: 'TableOptions',
+                field: 'buttonTexts',
+                props: {
+                    column: [{label: t('props.value'), key: 'value'}],
+                    valueType: 'string',
+                    max: 2,
+                }
+            }]);
+    }
+};

package/src/config/rule/tree.js

@@ -0,0 +1,70 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps, makeTreeOptions, makeTreeOptionsRule} from '../../utils/index';
+
+const label = '树形控件';
+const name = 'tree';
+
+export default {
+    menu: 'main',
+    icon: 'icon-tree',
+    label,
+    name,
+    input: true,
+    event: ['nodeClick', 'nodeContextmenu', 'checkChange', 'check', 'currentChange', 'nodeExpand', 'nodeCollapse', 'nodeDragStart', 'nodeDragEnter', 'nodeDragLeave', 'nodeDragOver', 'nodeDragEnd', 'nodeDrop'],
+    validate: ['string', 'number', 'array'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.tree.name'),
+            info: '',
+            effect: {
+                fetch: ''
+            },
+            $required: false,
+            props: {
+                props: {
+                    label: 'label',
+                },
+                showCheckbox: true,
+                nodeKey: 'id',
+                data: makeTreeOptions(t('props.option'), {label: 'label', value: 'id'}, 3),
+            },
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            makeTreeOptionsRule(t, 'props.data', 'label', 'id'),
+            {type: 'input', field: 'emptyText'}, {
+                type: 'TableOptions',
+                field: 'props',
+                props: {
+                    column: [{label: t('props.key'), key: 'label'}, {label: t('props.value'), key: 'value'}],
+                    valueType: 'object'
+                }
+            }, {
+                type: 'switch',
+                field: 'renderAfterExpand',
+                value: true
+            }, {
+                type: 'switch',
+                field: 'defaultExpandAll',
+            }, {
+                type: 'switch',
+                field: 'expandOnClickNode',
+                value: true
+            }, {
+                type: 'switch',
+                field: 'checkOnClickNode'
+            }, {type: 'switch', field: 'autoExpandParent', value: true}, {
+                type: 'switch',
+                field: 'checkStrictly'
+            }, {type: 'switch', field: 'accordion'}, {
+                type: 'inputNumber',
+                field: 'indent'
+            }, {
+                type: 'input',
+                field: 'nodeKey'
+            }]);
+    }
+};

package/src/config/rule/treeSelect.js

@@ -0,0 +1,77 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {localeProps, makeTreeOptions, makeTreeOptionsRule} from '../../utils/index';
+
+const label = '树形选择';
+const name = 'elTreeSelect';
+
+export default {
+    menu: 'main',
+    icon: 'icon-tree-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.elTreeSelect.name'),
+            info: '',
+            effect: {
+                fetch: ''
+            },
+            $required: false,
+            props: {
+                nodeKey: 'value',
+                showCheckbox: true,
+                data: makeTreeOptions(t('props.option'), {label: 'label', value: 'value'}, 3),
+            },
+        };
+    },
+    watch: {
+        multiple({rule}) {
+            rule.key = uniqueId();
+        }
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [
+            makeTreeOptionsRule(t, 'props.data', 'label', 'value'),
+            {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: 'TableOptions',
+                field: 'props',
+                props: {
+                    column: [{label: t('props.key'), key: 'label'}, {label: t('props.value'), key: 'value'}],
+                    valueType: 'object'
+                }
+            }, {
+                type: 'switch',
+                field: 'renderAfterExpand',
+                value: true
+            }, {
+                type: 'switch',
+                field: 'defaultExpandAll',
+            }, {
+                type: 'switch',
+                field: 'expandOnClickNode',
+                value: true
+            }, {
+                type: 'switch',
+                field: 'checkOnClickNode'
+            }, {
+                type: 'input',
+                field: 'nodeKey'
+            }]);
+    }
+};

package/src/config/rule/upload.js

@@ -0,0 +1,107 @@
+import uniqueId from '@form-create/utils/lib/unique';
+import {getInjectArg, localeOptions, localeProps} from '../../utils';
+
+const label = '上传';
+const name = 'upload';
+
+export default {
+    menu: 'main',
+    icon: 'icon-upload',
+    label,
+    name,
+    input: true,
+    event: ['change', 'remove', 'preview', 'error', 'progress', 'exceed'],
+    languageKey: ['clickToUpload'],
+    validate: ['array'],
+    rule({t}) {
+        return {
+            type: name,
+            field: uniqueId(),
+            title: t('com.upload.name'),
+            info: '',
+            $required: false,
+            props: {
+                action: '/',
+                onSuccess: '$FNX:const res = $inject.args[0];\nconst file = $inject.args[1];\n\nfile.url = res.data.url;'
+            }
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{
+            type: 'switch',
+            field: 'disabled'
+        }, {
+            type: 'select',
+            field: 'listType',
+            options: localeOptions(t, [{label: 'text', value: 'text'}, {
+                label: 'picture',
+                value: 'picture'
+            }, {
+                label: 'picture-card',
+                value: 'picture-card'
+            }]),
+        }, {type: 'switch', field: 'multiple'}, {
+            type: 'input',
+            field: 'action'
+        }, {
+            type: 'input',
+            field: 'accept'
+        }, {
+            type: 'FnInput',
+            field: 'beforeUpload',
+            props: {
+                body: true,
+                button: true,
+                fnx: true,
+                args: [getInjectArg(t)],
+                name: 'beforeUpload',
+            }
+        }, {
+            type: 'FnInput',
+            field: 'beforeRemove',
+            props: {
+                body: true,
+                button: true,
+                fnx: true,
+                args: [getInjectArg(t)],
+                name: 'beforeRemove',
+            }
+        }, {
+            type: 'FnInput',
+            field: 'onSuccess',
+            warning: t('com.upload.info'),
+            props: {
+                body: true,
+                button: true,
+                fnx: true,
+                args: [getInjectArg(t)],
+                name: 'onSuccess',
+            }
+        }, {
+            type: 'TableOptions',
+            field: 'headers',
+            props: {
+                column: [{label: t('props.key'), key: 'label'}, {label: t('props.value'), key: 'value'}],
+                valueType: 'object'
+            }
+        }, {
+            type: 'TableOptions',
+            field: 'data',
+            props: {
+                column: [{label: t('props.key'), key: 'label'}, {label: t('props.value'), key: 'value'}],
+                valueType: 'object'
+            }
+        }, {
+            type: 'switch',
+            field: 'withCredentials'
+        }, {
+            type: 'switch',
+            field: 'autoUpload',
+            value: true
+        }, {
+            type: 'inputNumber',
+            field: 'limit',
+            props: {min: 0},
+        }]);
+    }
+};

package/src/form/index.js

@@ -0,0 +1,19 @@
+import formCreate from '@form-create/element-ui';
+import FcEditor from '@form-create/component-wangeditor';
+import FcTitle from '../components/FcTitle.vue';
+import SignaturePad from '../components/SignaturePad.vue';
+import TableForm from '../components/tableForm/TableForm.vue';
+import Table from '../components/table/Table.vue';
+import '../style/icon.css';
+
+const install = (formCreate) => {
+    formCreate.component('FcEditor', FcEditor);
+    formCreate.component('FcTitle', FcTitle);
+    formCreate.component('SignaturePad', SignaturePad);
+    formCreate.component('TableForm', TableForm);
+    formCreate.component('FcTable', Table);
+}
+
+install(formCreate);
+
+export default install;

package/src/index.js

@@ -0,0 +1,173 @@
+import FcDesigner from './components/FcDesigner.vue';
+import DragTool from './components/DragTool.vue';
+import Struct from './components/Struct.vue';
+import OptionTextInput from './components/OptionsTextInput.vue';
+import Row from './components/Row.vue';
+import HtmlEditor from './components/HtmlEditor.vue';
+import FnEditor from './components/FnEditor.vue';
+import FnInput from './components/FnInput.vue';
+import FetchConfig from './components/FetchConfig.vue';
+import ConfigItem from './components/style/ConfigItem.vue';
+import FieldInput from './components/FieldInput.vue';
+import EventConfig from './components/EventConfig.vue';
+import FnConfig from './components/FnConfig.vue';
+import TableView from './components/table/TableView.vue';
+import Table from './components/table/Table.vue';
+import Validate from './components/Validate.vue';
+import DragBox from './components/DragBox.vue';
+import Required from './components/Required.vue';
+import TableOptions from './components/TableOptions.vue';
+import TreeOptions from './components/TreeOptions.vue';
+import TableFormView from './components/tableForm/TableFormView.vue';
+import TableForm from './components/tableForm/TableForm.vue';
+import SignaturePad from './components/SignaturePad.vue';
+import FcTitle from './components/FcTitle.vue';
+import TableFormColumnView from './components/tableForm/TableFormColumnView.vue';
+import SizeInput from './components/style/SizeInput.vue';
+import ColorInput from './components/style/ColorInput.vue';
+import StyleConfig from './components/style/StyleConfig.vue';
+import LanguageInput from './components/language/LanguageInput.vue';
+import ValueInput from './components/ValueInput.vue';
+import formCreate, {designerForm} from './utils/form';
+import FcEditor from '@form-create/component-wangeditor';
+import draggable from 'vuedraggable/src/vuedraggable';
+import {
+    compareVersion,
+    copyTextToClipboard,
+    getInjectArg,
+    localeOptions,
+    localeProps,
+    makeOptionsRule,
+    makeRequiredRule,
+    makeTreeOptions,
+    makeTreeOptionsRule,
+    toJSON
+} from './utils/index';
+import globalUseLocale, {t} from './utils/locale';
+import './style/index.css';
+import './style/icon.css';
+import './utils/highlight/style.css';
+import menus from './config/menu';
+import dragRuleList from './config/index';
+
+const addComponent = (id, component, previewComponent) => {
+    designerForm.component(id, previewComponent || component);
+    formCreate.component(id, component);
+}
+
+designerForm.component('draggable', draggable);
+designerForm.component('DragTool', DragTool);
+designerForm.component('DragBox', DragBox);
+designerForm.component('Validate', Validate);
+designerForm.component('Struct', Struct);
+designerForm.component('OptionTextInput', OptionTextInput);
+designerForm.component('HtmlEditor', HtmlEditor);
+designerForm.component('FetchConfig', FetchConfig);
+designerForm.component('FnEditor', FnEditor);
+designerForm.component('FnInput', FnInput);
+designerForm.component('Required', Required);
+designerForm.component('TableOptions', TableOptions);
+designerForm.component('TreeOptions', TreeOptions);
+designerForm.component('TableFormColumn', TableFormColumnView);
+designerForm.component('EventConfig', EventConfig);
+designerForm.component('ColorInput', ColorInput);
+designerForm.component('SizeInput', SizeInput);
+designerForm.component('StyleConfig', StyleConfig);
+designerForm.component('LanguageInput', LanguageInput);
+designerForm.component('ConfigItem', ConfigItem);
+designerForm.component('FieldInput', FieldInput);
+designerForm.component('FnConfig', FnConfig);
+designerForm.component('FcRow', Row);
+designerForm.component('ValueInput', ValueInput);
+addComponent('FcEditor', FcEditor);
+addComponent('FcTitle', FcTitle);
+addComponent('SignaturePad', SignaturePad);
+addComponent('TableForm', TableForm, TableFormView);
+addComponent('FcTable', Table, TableView);
+
+const install = function (Vue) {
+    Vue.component('FcDesigner', FcDesigner);
+};
+
+const addMenu = function (menu, before) {
+    if (!Array.isArray(menu)) {
+        menu = [menu];
+    }
+    if (before) {
+        menus.unshift(...menu);
+    } else {
+        menus.push(...menu);
+    }
+}
+
+const addDragRule = function (dragRule, before) {
+    if (!Array.isArray(dragRule)) {
+        dragRule = [dragRule];
+    }
+    if (before) {
+        dragRuleList.unshift(...dragRule);
+    } else {
+        dragRuleList.push(...dragRule);
+    }
+}
+
+FcDesigner.install = install;
+FcDesigner.makeOptionsRule = makeOptionsRule;
+FcDesigner.copyTextToClipboard = copyTextToClipboard;
+FcDesigner.getInjectArg = getInjectArg;
+FcDesigner.localeOptions = localeOptions;
+FcDesigner.localeProps = localeProps;
+FcDesigner.makeRequiredRule = makeRequiredRule;
+FcDesigner.makeTreeOptions = makeTreeOptions;
+FcDesigner.makeTreeOptionsRule = makeTreeOptionsRule;
+FcDesigner.toJSON = toJSON;
+FcDesigner.formCreate = formCreate;
+FcDesigner.designerForm = designerForm;
+FcDesigner.component = addComponent;
+FcDesigner.useLocale = globalUseLocale;
+FcDesigner.addMenu = addMenu;
+FcDesigner.addDragRule = addDragRule;
+FcDesigner.t = t;
+
+FcDesigner.utils = {
+    copyTextToClipboard,
+    getInjectArg,
+    localeOptions,
+    localeProps,
+    makeOptionsRule,
+    makeRequiredRule,
+    makeTreeOptions,
+    makeTreeOptionsRule,
+    toJSON
+}
+
+const minVersion = '3.2.24';
+
+if (compareVersion(minVersion, formCreate.version) === 1) {
+    console.warn('Please use FormCreate version ' + minVersion + ' or greater, see https://github.com/xaboy/form-create.');
+}
+
+FcDesigner.version = '3.5.0';
+
+if (typeof window !== 'undefined') {
+    window.FcDesigner = FcDesigner;
+}
+
+export default FcDesigner;
+
+export {
+    formCreate,
+    designerForm,
+    install,
+    copyTextToClipboard,
+    getInjectArg,
+    localeOptions,
+    localeProps,
+    makeOptionsRule,
+    makeRequiredRule,
+    makeTreeOptions,
+    makeTreeOptionsRule,
+    addDragRule,
+    addMenu,
+    toJSON
+};