@houaoran/designer 1.0.0

package/package.json

@@ -0,0 +1,96 @@
+{
+    "name": "@houaoran/designer",
+    "version": "1.0.0",
+    "description": "好用的Vue低代码可视化表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。",
+    "unpkg": "./dist/index.umd.js",
+    "jsdelivr": "./dist/index.umd.js",
+    "typings": "./types/index.d.ts",
+    "main": "./dist/index.umd.js",
+    "module": "./dist/index.es.js",
+    "scripts": {
+        "clean": "rimraf dist/",
+        "dev": "vue-cli-service serve",
+        "build": "vite build --config ./vite.config.build.js && vite build --config ./vite.config.form.js",
+        "build:form": "vite build --config ./vite.config.form.js",
+        "build:locale": "gulp -f gulpfile.js",
+        "build:preview": "vite build --config ./vite.config.preview.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/xaboy/form-create-designer.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "keywords": [
+        "AI",
+        "可视化表单设计器",
+        "form-create",
+        "form-builder",
+        "form-designer",
+        "draggable",
+        "form",
+        "components",
+        "vue",
+        "element-plus",
+        "json-form",
+        "dynamic-form"
+    ],
+    "files": [
+        "README.md",
+        "package.json",
+        "LICENSE",
+        "src",
+        "types",
+        "dist",
+        "locale"
+    ],
+    "author": "xaboy",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/xaboy/form-create-designer/issues"
+    },
+    "homepage": "https://form-create.com",
+    "devDependencies": {
+        "@element-plus/icons-vue": "^0.2.6",
+        "@vitejs/plugin-vue": "^3.1.2",
+        "@vitejs/plugin-vue-jsx": "^2.0.1",
+        "@vue/babel-plugin-jsx": "^1.0.7",
+        "@vue/cli-plugin-babel": "^4.5.13",
+        "@vue/cli-service": "^4.5.3",
+        "@vue/compiler-sfc": "^3.0.11",
+        "babel-eslint": "^10.1.0",
+        "gulp": "^4.0.2",
+        "html-webpack-plugin": "^4.3.0",
+        "jsonlint-mod": "^1.7.6",
+        "lint-staged": "^10.2.11",
+        "rimraf": "^3.0.2",
+        "vite": "^3.1.4"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "lint-staged": {
+        "*.{js,jsx,vue}": [
+            "eslint --fix",
+            "git add"
+        ]
+    },
+    "peerDependencies": {
+        "vue": "^3.5"
+    },
+    "dependencies": {
+        "@form-create/component-wangeditor": "^3.3.0",
+        "@form-create/element-ui": "^3.3.1",
+        "@form-create/utils": "^3.3.0",
+        "codemirror": "^6.65.7",
+        "element-plus": "^2.11.1",
+        "js-beautify": "^1.15.1",
+        "marked": "^17.0.0",
+        "signature_pad": "^5.0.10",
+        "sortablejs": "1.14.0",
+        "vuedraggable": "4.1.0"
+    }
+}

package/src/components/DragBox.vue

@@ -0,0 +1,49 @@
+<script>
+import {defineComponent, h} from 'vue';
+import draggable from 'vuedraggable/src/vuedraggable';
+
+export default defineComponent({
+    name: 'DragBox',
+    props: ['rule', 'tag', 'formCreateInject', 'list'],
+    render(ctx) {
+        const attrs = {...ctx.$props.rule.props, ...ctx.$attrs};
+        let _class = '_fd-' + ctx.$props.tag + '-drag _fd-drag-box';
+        if (!Object.keys(ctx.$slots).length) {
+            _class += ' drag-holder';
+        }
+        attrs.class = _class;
+        attrs.modelValue = ctx.$props.list || [...ctx.$props.formCreateInject.children];
+
+        const keys = {};
+        if (ctx.$slots.default) {
+            const children = ctx.$slots.default();
+            children.forEach(v => {
+                if (v.key) {
+                    keys[v.key] = v;
+                }
+            })
+        }
+        return h(draggable, attrs, {
+            item: ({element, index}) => {
+                const key = element?.__fc__?.key;
+                if (key) {
+                    let vnode = keys['_' + element.slot];
+                    if (vnode) {
+                        vnode.children.forEach(v => {
+                            if (v.key === key + 'fc') {
+                                vnode = v
+                            }
+                        });
+                    } else {
+                        vnode = keys[key + 'fc'];
+                    }
+                    if (vnode) {
+                        return h('div', {class: '_fc-' + ctx.$props.tag + '-item _fd-drag-item', key}, vnode);
+                    }
+                }
+                return h('div', {class: '_fc-' + ctx.$props.tag + '-item _fd-drag-item', key: index}, null);
+            }
+        });
+    }
+});
+</script>

package/src/components/DragTool.vue

@@ -0,0 +1,235 @@
+<template>
+    <div class="_fd-drag-tool" @click.stop="active" :class="{active: fcx.active === id}">
+        <div class="_fd-drag-mask" v-if="mask"></div>
+        <div class="_fd-drag-hidden" v-if="hidden"><i class="fc-icon icon-eye-close"></i> {{ t('props.hide') }}</div>
+        <div class="_fd-drag-l" v-if="!hiddenBtn && permission.move !== false" @click.stop>
+            <div class="_fd-drag-btn" v-if="dragBtn !== false" v-show="fcx.active === id" style="cursor: move;">
+                <i class="fc-icon icon-move"></i>
+            </div>
+        </div>
+        <div class="_fd-drag-r" v-if="btns !== false && !hiddenMenu && permission.dragMenu !== false">
+            <slot name="handle">
+                <div class="_fd-drag-btn" v-if="permission.create !== false && isCreate && (btns === true || btns.indexOf('create') > -1)"
+                     @click.stop="$emit('create')">
+                    <i class="fc-icon icon-add"></i>
+                </div>
+                <div class="_fd-drag-btn" v-if="permission.copy !== false && !only && (btns === true || btns.indexOf('copy') > -1)"
+                     @click.stop="$emit('copy')">
+                    <i class="fc-icon icon-copy"></i>
+                </div>
+                <div class="_fd-drag-btn" v-if="permission.addChild !== false && children && (btns === true || btns.indexOf('addChild') > -1)"
+                     @click.stop="$emit('addChild')">
+                    <i class="fc-icon icon-add-child"></i>
+                </div>
+                <div class="_fd-drag-btn _fd-drag-danger" v-if="permission.delete !== false && (btns === true || btns.indexOf('delete') > -1)"
+                     @click.stop="$emit('delete')">
+                    <i class="fc-icon icon-delete"></i>
+                </div>
+            </slot>
+        </div>
+        <slot name="default"></slot>
+    </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+    name: 'DragTool',
+    emits: ['create', 'copy', 'addChild', 'delete', 'active', 'fc.el'],
+    props: {
+        dragBtn: Boolean,
+        children: String,
+        mask: Boolean,
+        hidden: Boolean,
+        handleBtn: [Boolean, Array],
+        formCreateInject: Object,
+        unique: String,
+        only: Boolean
+    },
+    inject: {
+        fcx: {
+            default: null
+        },
+        designer: {
+            default: null
+        },
+        dragTool: {
+            default: null
+        },
+    },
+    provide() {
+        return {
+            dragTool: this
+        }
+    },
+    computed: {
+        isCreate() {
+            return this.dragTool ? !!this.dragTool.children : false;
+        },
+        btns() {
+            if (Array.isArray(this.handleBtn)) {
+                return this.handleBtn.length ? this.handleBtn : false;
+            }
+            return this.handleBtn !== false;
+        },
+        id() {
+            return this.unique || this.formCreateInject.id;
+        },
+        hiddenMenu() {
+            return this.designer.ctx.hiddenDragMenu;
+        },
+        hiddenBtn() {
+            return this.designer.ctx.hiddenDragBtn;
+        },
+        rule() {
+            return this.formCreateInject?.rule?._config._get();
+        },
+        t() {
+            return this.designer.setupState.t;
+        },
+        permission() {
+            if (!this.rule) {
+                return {};
+            } else {
+                return this.designer.setupState.getPermission(this.rule);
+            }
+        },
+    },
+    methods: {
+        active() {
+            if (this.fcx.active === this.id) return;
+            this.fcx.active = this.id;
+            this.$emit('active');
+        }
+    },
+    mounted() {
+        this.$emit('fc.el', this);
+    },
+});
+</script>
+
+<style>
+._fd-drag-tool {
+    position: relative;
+    display: block;
+    min-height: 20px;
+    box-sizing: border-box;
+    padding: 2px;
+    outline: 1px dashed var(--fc-tool-border-color);
+    overflow: hidden;
+    word-wrap: break-word;
+    word-break: break-all;
+    z-index: 0;
+}
+
+._fd-drag-tool ._fd-drag-tool {
+    height: calc(100% - 6px);
+    margin: 3px;
+}
+
+._fd-drag-tool + ._fd-drag-tool {
+    margin-top: 5px;
+}
+
+._fd-drag-tool.active {
+    outline: 1px solid #2E73FF;
+}
+
+._fd-drag-tool.active > div > ._fd-drag-btn {
+    display: flex;
+}
+
+._fd-drag-tool:not(.active):hover > div > ._fd-drag-btn {
+    display: flex !important;
+    opacity: 0.7;
+}
+
+._fd-drag-tool._fd-drop-hover ._fd-drag-box {
+    padding-top: 15px !important;
+    padding-bottom: 15px !important;
+}
+
+._fd-drag-tool ._fd-drag-btn {
+    display: none;
+}
+
+._fd-drag-r {
+    position: absolute;
+    right: 2px;
+    top: calc(100% - 20px);
+    z-index: 1904;
+}
+
+._fd-drag-l {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1904
+
+}
+
+._fd-drag-btn {
+    height: 18px;
+    width: 18px;
+    color: #fff;
+    background-color: #2E73FF;
+    text-align: center;
+    line-height: 20px;
+    padding-bottom: 1px;
+    float: left;
+    cursor: pointer;
+    justify-content: center;
+}
+
+._fd-drag-btn + ._fd-drag-btn {
+    margin-left: 2px;
+}
+
+._fd-drag-danger {
+    background-color: #FF2E2E;
+}
+
+._fd-drag-btn i {
+    font-size: 14px;
+}
+
+._fd-drag-mask,
+._fd-drag-hidden {
+    z-index: 1900;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+._fd-drag-hidden {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(51, 51, 51, 0.7);
+    color: #ffffff;
+    font-size: 14px;
+}
+
+._fd-drag-tool:hover ._fd-drag-hidden,
+._fd-drag-tool.active ._fd-drag-hidden,
+._fd-drag-tool:has(._fd-drag-tool.active) ._fd-drag-hidden {
+    display: none;
+}
+
+._fd-drag-hidden .fc-icon {
+    margin-right: 5px;
+}
+
+._fd-drag-tool:hover {
+    outline-color: rgba(46, 115, 255, 0.5);
+    outline-style: solid;
+    z-index: 1;
+}
+
+._fd-drag-tool:has(._fd-drag-tool:not(.active):hover, ._fd-drag-tool.active:hover) > div > ._fd-drag-btn {
+    display: none !important;
+}
+</style>