@houaoran/designer 1.0.0

package/src/components/tree/FcTreeNode.vue

@@ -0,0 +1,216 @@
+<template>
+    <li
+        class="_fd-tree-node"
+        :class="nodeClass"
+        role="treeitem"
+        :aria-expanded="hasChildren ? String(expanded) : undefined"
+        :data-key="String(itemKey)"
+    >
+        <div
+            class="_fd-tree-node__content"
+            :class="contentClass"
+            :style="{ paddingLeft: padLeft }"
+            :data-key="String(itemKey)"
+            @click="onSelect"
+        >
+            <span v-if="showBeforeLine" class="_fd-tree-node__drop-line is-before"></span>
+            <span class="_fd-tree-node__expand" :class="hasChildren ? '' : 'is-leaf'" @click="onToggle">
+                <i v-if="hasChildren" class="fc-icon icon-caret-right" :class="{ down: expanded }"></i>
+                <span v-else class="_fd-tree-node__expand-placeholder"></span>
+            </span>
+            <div class="_fd-tree-node__label">
+                <slot :node="nodeCtx" :data="item" />
+            </div>
+            <span v-if="showAfterLine" class="_fd-tree-node__drop-line is-after"></span>
+        </div>
+        <ul
+            v-if="expanded"
+            class="_fd-tree-node__children"
+            role="group"
+            :data-parent-key="String(itemKey)"
+            :style="{ marginLeft: indent + 'px' }"
+        >
+            <FcTreeNode
+                v-for="child in children"
+                :key="getKey(child)"
+                :item="child"
+                :level="level + 1"
+                :indent="indent"
+                :expanded-keys="expandedKeys"
+                :get-key="getKey"
+                :get-children="getChildren"
+                :drag-state="dragState"
+                @toggle="$emit('toggle', $event)"
+                @select="$emit('select', $event)"
+            >
+                <template #default="scope">
+                    <slot v-bind="scope" />
+                </template>
+            </FcTreeNode>
+        </ul>
+    </li>
+</template>
+
+<script>
+export default {
+    name: 'FcTreeNode',
+    props: {
+        item: { type: Object, required: true },
+        level: { type: Number, required: true },
+        indent: { type: Number, required: true },
+        expandedKeys: { type: Object, required: true }, // Set
+        getKey: { type: Function, required: true },
+        getChildren: { type: Function, required: true },
+        dragState: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    emits: ['toggle', 'select'],
+    computed: {
+        itemKey() {
+            return this.getKey(this.item);
+        },
+        children() {
+            const v = this.getChildren(this.item);
+            return Array.isArray(v) ? v : [];
+        },
+        hasChildren() {
+            return this.children.length > 0;
+        },
+        expanded() {
+            return !!this.expandedKeys?.has?.(this.itemKey);
+        },
+        padLeft() {
+            return `${(this.level - 1) * this.indent}px`;
+        },
+        nodeCtx() {
+            return {
+                level: this.level,
+                expanded: this.expanded,
+                isLeaf: !this.hasChildren,
+            };
+        },
+        isDragSource() {
+            return this.dragState?.draggingKey === String(this.itemKey);
+        },
+        isHoverTarget() {
+            return this.dragState?.hoverKey === String(this.itemKey);
+        },
+        showBeforeLine() {
+            return this.isHoverTarget && this.dragState?.dropType === 'before' && this.dragState?.allowed !== false;
+        },
+        showAfterLine() {
+            return this.isHoverTarget && this.dragState?.dropType === 'after' && this.dragState?.allowed !== false;
+        },
+        contentClass() {
+            return {
+                'is-drop-inner': this.isHoverTarget && this.dragState?.dropType === 'inner' && this.dragState?.allowed !== false,
+            };
+        },
+        nodeClass() {
+            return {
+                'is-drag-source': this.isDragSource,
+            };
+        },
+    },
+    methods: {
+        onToggle(e) {
+            e?.stopPropagation?.();
+            this.$emit('toggle', this.item);
+        },
+        onSelect() {
+            this.$emit('select', this.item);
+        },
+    },
+};
+</script>
+
+<style scoped>
+._fd-tree-node__content {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+._fd-tree-node__label {
+    width: 100%;
+    min-width: 0;
+    cursor: pointer;
+    font-size: 14px;
+    min-height: 30px;
+    user-select: none;
+}
+
+._fd-tree-node__children {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    min-height: 8px; /* 空子级也能拖入（由使用方决定是否创建空 children） */
+    padding-bottom: 2px;
+    box-sizing: border-box;
+}
+
+._fd-tree-node__expand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-right: 2px;
+    cursor: pointer;
+    color: #262626;
+    flex: 0 0 auto;
+}
+
+._fd-tree-node__expand.is-leaf {
+    cursor: default;
+}
+
+._fd-tree-node__expand-placeholder {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+}
+
+._fd-tree-node__expand .icon-caret-right {
+    display: inline-block;
+    transition: transform 0.15s ease;
+}
+
+._fd-tree-node__expand .icon-caret-right.down {
+    transform: rotate(90deg);
+}
+
+._fd-tree-node.is-drag-source > ._fd-tree-node__content {
+    opacity: 0.45;
+}
+
+._fd-tree-node__content.is-drop-inner {
+    background: rgba(46, 115, 255, 0.05);
+    border-radius: 4px;
+}
+
+._fd-tree-node__content:hover {
+    background-color: rgba(46, 115, 255, 0.05);
+    color: #2e73ff !important;
+}
+
+._fd-tree-node__drop-line {
+    position: absolute;
+    left: 18px;
+    right: 0;
+    height: 2px;
+    background: rgba(46, 115, 255, 0.5);
+    pointer-events: none;
+    border-radius: 1px;
+}
+
+._fd-tree-node__drop-line.is-before {
+    top: -1px;
+}
+
+._fd-tree-node__drop-line.is-after {
+    bottom: -1px;
+}
+</style>

package/src/config/base/field.js

@@ -0,0 +1,43 @@
+export default function field({t}) {
+    return [
+        {
+            type: 'FieldInput',
+            field: 'field',
+            value: '',
+            title: t('form.field'),
+            warning: t('warning.field'),
+        }, {
+            type: 'LanguageInput',
+            field: 'title',
+            value: '',
+            title: t('form.title'),
+        }, {
+            type: 'LanguageInput',
+            field: 'info',
+            value: '',
+            title: t('form.info'),
+        }, {
+            type: 'SizeInput',
+            field: 'formCreateWrap>labelWidth',
+            value: '',
+            title: t('form.labelWidth'),
+        }, {
+            type: 'Struct',
+            field: '_control',
+            name: 'control',
+            value: [],
+            title: t('form.control'),
+            warning: t('form.controlDocument', {doc: '<a target="_blank" href="https://view.form-create.com/control" style="color: inherit;text-decoration: underline;">' + t('form.document') + '</a>'}),
+            props: {
+                placeholder: '[{ value: "value", rule: ["field1", "field2"] }]',
+                validate(val) {
+                    if (!Array.isArray(val)) return false;
+                    if (!val.length) return true;
+                    return !val.some(({rule}) => {
+                        return !Array.isArray(rule);
+                    });
+                }
+            }
+        },
+    ];
+}

package/src/config/base/form.js

@@ -0,0 +1,132 @@
+import {localeOptions} from '../../utils';
+
+export default function form({t}) {
+    return [
+        {
+            type: 'input',
+            field: 'formCreateFormName',
+            value: '',
+            title: t('form.formName'),
+        }, {
+            type: 'input',
+            field: 'class',
+            value: '',
+            title: 'Class',
+        }, {
+            type: 'radio',
+            field: 'labelPosition',
+            value: 'left',
+            title: t('form.labelPosition'),
+            options: localeOptions(t, [
+                {value: 'left', label: 'left'},
+                {value: 'right', label: 'right'},
+                {value: 'top', label: 'top'},
+            ])
+        }, {
+            type: 'radio',
+            field: 'size',
+            value: 'small',
+            title: t('form.size'),
+            options: localeOptions(t, [
+                {value: 'large', label: 'large'},
+                {value: 'default', label: 'default'},
+                {value: 'small', label: 'small'},
+            ])
+        }, {
+            type: 'input',
+            field: 'labelSuffix',
+            value: '',
+            title: t('form.labelSuffix'),
+            style: {
+                width: '150px'
+            }
+        }, {
+            type: 'SizeInput',
+            field: 'labelWidth',
+            value: '125px',
+            title: t('form.labelWidth'),
+        }, {
+            type: 'switch',
+            field: 'hideRequiredAsterisk',
+            value: false,
+            title: t('form.hideRequiredAsterisk'),
+        }, {
+            type: 'switch',
+            field: 'showMessage',
+            value: true,
+            title: t('form.showMessage'),
+        }, {
+            type: 'switch',
+            field: 'inlineMessage',
+            value: false,
+            title: t('form.inlineMessage'),
+        }, {
+            type: 'switch',
+            field: '_submitBtn>show',
+            value: true,
+            title: t('form.submitBtn'),
+        }, {
+            type: 'switch',
+            field: '_resetBtn>show',
+            value: false,
+            title: t('form.resetBtn'),
+        }, {
+            type: 'FnConfig',
+            field: 'formCreate_event',
+            name: 'event',
+            warning: t('form.controlDocument', {doc: '<a target="_blank" href="https://form-create.com/v3/guide/global-event" style="color: inherit;text-decoration: underline;">' + t('form.document') + '</a>'}),
+            value: {},
+            col: {show: true},
+            props: {
+                eventConfig: [
+                    {
+                        name: 'onSubmit',
+                        info: t('form.onSubmit'),
+                        args: ['formData', 'api'],
+                    },
+                    {
+                        name: 'onReset',
+                        info: t('form.onReset'),
+                        args: ['api'],
+                    },
+                    {
+                        name: 'onCreated',
+                        info: t('form.onCreated'),
+                        args: ['api'],
+                    },
+                    {
+                        name: 'onMounted',
+                        info: t('form.onMounted'),
+                        args: ['api'],
+                    },
+                    {
+                        name: 'onBeforeUnmount',
+                        info: t('form.onBeforeUnmount'),
+                        args: ['api'],
+                    },
+                    {
+                        name: 'onReload',
+                        info: t('form.onReload'),
+                        args: ['api'],
+                    },
+                    {
+                        name: 'onChange',
+                        info: t('form.onChange'),
+                        args: ['field', 'value', 'options'],
+                    },
+                    {
+                        name: 'beforeSubmit',
+                        info: t('form.beforeSubmit'),
+                        args: ['formData', 'data'],
+                    },
+                    {
+                        name: 'beforeFetch',
+                        info: t('form.beforeFetch'),
+                        args: ['config', 'data'],
+                    },
+                ]
+            },
+            title: t('form.event'),
+        },
+    ];
+}

package/src/config/base/style.js

@@ -0,0 +1,26 @@
+export default function field({t}) {
+    return [
+        {
+            type: 'input',
+            title: 'ID',
+            field: 'id',
+            wrap: {
+                labelWidth: '45px'
+            }
+        },
+        {
+            type: 'input',
+            title: 'Class',
+            field: 'class',
+            wrap: {
+                labelWidth: '45px'
+            }
+        },
+        {
+            type: 'StyleConfig',
+            field: 'style',
+            title: '',
+            value: {},
+        }
+    ];
+}

package/src/config/base/validate.js

@@ -0,0 +1,15 @@
+export default function validate({t}) {
+    return [
+        {
+            type: 'Required',
+            field: '$required',
+            title: t('validate.required')
+        },
+        {
+            type: 'validate',
+            field: 'validate',
+            title: t('validate.rule'),
+            value: []
+        },
+    ];
+}

package/src/config/index.js

@@ -0,0 +1,70 @@
+import radio from './rule/radio';
+import checkbox from './rule/checkbox';
+import input from './rule/input';
+import textarea from './rule/textarea';
+import password from './rule/password';
+import number from './rule/number';
+import select from './rule/select';
+import _switch from './rule/switch';
+import slider from './rule/slider';
+import time from './rule/time';
+import timeRange from './rule/timeRange';
+import date from './rule/date';
+import dateRange from './rule/dateRange';
+import rate from './rule/rate';
+import color from './rule/color';
+import row from './rule/row';
+import col from './rule/col';
+import tabPane from './rule/tabPane';
+import divider from './rule/divider';
+import cascader from './rule/cascader';
+import upload from './rule/upload';
+import transfer from './rule/transfer';
+import tree from './rule/tree';
+import alert from './rule/alert';
+import text from './rule/text';
+import space from './rule/space';
+import tabs from './rule/tabs';
+import button from './rule/button';
+import editor from './rule/editor';
+import group from './rule/group';
+import subForm from './rule/subForm';
+import card from './rule/card';
+import collapse from './rule/collapse';
+import collapseItem from './rule/collapseItem';
+import treeSelect from './rule/treeSelect';
+import tag from './rule/tag';
+import html from './rule/html';
+import table from './rule/table';
+import tableForm from './rule/tableForm';
+import tableFormColumn from './rule/tableFormColumn';
+import image from './rule/image';
+import signaturePad from './rule/signaturePad';
+import title from './rule/title';
+
+
+const ruleList = [
+    input, textarea, password, number, radio, checkbox, select, _switch, rate, time, timeRange, slider, date, dateRange, color, cascader, upload, transfer, tree, treeSelect, editor, signaturePad,
+    group, subForm, tableForm, tableFormColumn,
+    alert, button, text, title, html, divider, tag, image,
+    row, table, tabs, space, card, collapse,
+    col, tabPane, collapseItem,
+];
+
+export default ruleList;
+
+export function defaultDrag(rule) {
+    return {
+        icon: rule.field ? 'icon-input' : 'icon-cell',
+        label: rule.field || rule.type,
+        name: '_',
+        mask: true,
+        handleBtn: ['delete'],
+        rule() {
+            return rule;
+        },
+        props() {
+            return [];
+        }
+    }
+}

package/src/config/menu.js

@@ -0,0 +1,24 @@
+const menus = [
+    {
+        name: 'main',
+        title: '基础组件',
+        list: []
+    },
+    {
+        name: 'subform',
+        title: '子表单组件',
+        list: []
+    },
+    {
+        name: 'aide',
+        title: '辅助组件',
+        list: []
+    },
+    {
+        name: 'layout',
+        title: '布局组件',
+        list: []
+    },
+];
+
+export default menus;

package/src/config/rule/alert.js

@@ -0,0 +1,45 @@
+import {localeProps} from '../../utils';
+
+const label = '提示';
+const name = 'elAlert';
+
+export default {
+    menu: 'aide',
+    icon: 'icon-alert',
+    label,
+    name,
+    event: ['close'],
+    rule({t}) {
+        return {
+            type: name,
+            props: {
+                title: t('com.elAlert.name'),
+                description: t('com.elAlert.description'),
+                type: 'success',
+                effect: 'dark',
+            },
+            children: []
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{type: 'input', field: 'title'}, {
+            type: 'select',
+            field: 'type',
+            options: [{label: 'success', value: 'success'}, {label: 'warning', value: 'warning'}, {
+                label: 'info',
+                value: 'info'
+            }, {label: 'error', value: 'error'}]
+        }, {type: 'input', field: 'description'}, {
+            type: 'switch',
+            field: 'closable',
+            value: true
+        }, {type: 'switch', field: 'center', value: true}, {
+            type: 'input',
+            field: 'closeText'
+        }, {type: 'switch', field: 'showIcon'}, {
+            type: 'select',
+            field: 'effect',
+            options: [{label: 'light', value: 'light'}, {label: 'dark', value: 'dark'}]
+        }]);
+    }
+};

package/src/config/rule/button.js

@@ -0,0 +1,49 @@
+import {localeOptions, localeProps} from '../../utils';
+
+const label = '按钮';
+const name = 'elButton';
+
+export default {
+    menu: 'aide',
+    icon: 'icon-button',
+    label,
+    name,
+    mask: true,
+    event: ['click'],
+    rule({t}) {
+        return {
+            type: name,
+            props: {},
+            children: [t('com.elButton.name')],
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{
+            type: 'input',
+            field: 'formCreateChild',
+        }, {
+            type: 'select',
+            field: 'size',
+            options: localeOptions(t, [{label: 'large', value: 'large'}, {label: 'default', value: 'default'}, {
+                label: 'small',
+                value: 'small'
+            }])
+        }, {
+            type: 'select',
+            field: 'type',
+            options: [{label: 'primary', value: 'primary'}, {
+                label: 'success',
+                value: 'success'
+            }, {label: 'warning', value: 'warning'}, {label: 'danger', value: 'danger'}, {
+                label: 'info',
+                value: 'info'
+            }]
+        }, {type: 'switch', field: 'plain'}, {
+            type: 'switch',
+            field: 'round'
+        }, {type: 'switch', field: 'circle'}, {
+            type: 'switch',
+            field: 'loading'
+        }, {type: 'switch', field: 'disabled'}]);
+    }
+};

package/src/config/rule/card.js

@@ -0,0 +1,40 @@
+import {localeOptions, localeProps} from '../../utils';
+
+const label = '卡片';
+const name = 'elCard';
+
+export default {
+    menu: 'layout',
+    icon: 'icon-card',
+    label,
+    name,
+    drag: true,
+    inside: false,
+    mask: false,
+    rule({t}) {
+        return {
+            type: name,
+            props: {
+                header: t('com.elCard.props.header')
+            },
+            style: {
+                width: '100%'
+            },
+            children: []
+        };
+    },
+    props(_, {t}) {
+        return localeProps(t, name + '.props', [{
+            type: 'input',
+            field: 'header',
+        }, {
+            type: 'select',
+            field: 'shadow',
+            value: 'always',
+            options: localeOptions(t, [{label: 'always', value: 'always'}, {label: 'never', value: 'never'}, {
+                label: 'hover',
+                value: 'hover'
+            }])
+        }]);
+    }
+};