vxe-design 0.0.1 → 3.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 xuliangzhan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,53 @@
 # vxe-design
 
+[![star](https://gitee.com/x-extends/vxe-design/badge/star.svg?theme=gvp)](https://gitee.com/x-extends/vxe-design/stargazers)
+[![npm version](https://img.shields.io/npm/v/vxe-design.svg?style=flat-square)](https://www.npmjs.com/package/vxe-design)
+[![NodeJS with Webpack](https://github.com/x-extends/vxe-design/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-design/actions/workflows/webpack.yml)
+[![npm downloads](https://img.shields.io/npm/dt/vxe-design.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-design)
+[![issues](https://img.shields.io/github/issues/x-extends/vxe-design.svg)](https://github.com/x-extends/vxe-design/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-design.svg)](https://github.com/x-extends/vxe-design/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/vxe-design.svg)](https://github.com/x-extends/vxe-design/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-design.svg)](https://github.com/x-extends/vxe-design/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+一个基于 [Vxe UI](https://github.com/x-extends/vxe-pc-ui) 的 PC 端可视化设计器，用于搭建零代码、低代码的平台
+
+## 浏览器支持
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |
+
+## 安装
+
+```shell
+npm install vxe-pc-ui@3 vxe-table@3 vxe-design@3
+```
+
+```javascript
+import Vue from 'vue'
+// ...
+import VxeUIBase from 'vxe-pc-ui'
+import 'vxe-pc-ui/es/style.css'
+
+import VxeUITable from 'vxe-table'
+import 'vxe-table/es/style.css'
+
+import VxeUIDesign from 'vxe-design'
+import 'vxe-design/lib/style.css'
+// ...
+
+Vue.use(VxeUIBase)
+Vue.use(VxeUITable)
+Vue.use(VxeUIDesign)
+```
+
+## Contributors
+
+Thank you to everyone who contributed to this project.
+
+[![vxe-design](https://contrib.rocks/image?repo=x-extends/vxe-design)](https://github.com/x-extends/vxe-design/graphs/contributors)
+
 ## License
 
 [MIT](LICENSE) © 2019-present, Xu Liangzhan

package/es/components.js

@@ -0,0 +1,28 @@
+import VxeUI from './ui';
+import VxeFlowDesign from './flow-design';
+import VxeFlowView from './flow-view';
+import VxeFormDesign from './form-design';
+import VxeFormView from './form-view';
+import VxeListDesign from './list-design';
+import VxeListView from './list-view';
+const { setConfig } = VxeUI;
+const components = [
+    VxeFlowDesign,
+    VxeFlowView,
+    VxeFormDesign,
+    VxeFormView,
+    VxeListDesign,
+    VxeListView
+];
+export function install(app, options) {
+    setConfig(options);
+    components.forEach(component => app.use(component));
+}
+export { VxeUI };
+// Components
+export * from './flow-design';
+export * from './flow-view';
+export * from './form-design';
+export * from './form-view';
+export * from './list-design';
+export * from './list-view';

package/es/flow-design/index.js

@@ -0,0 +1,15 @@
+import { VxeUI } from '@vxe-ui/core';
+import { checkDependVersion } from '../ui/src/depend';
+import VxeFlowDesignComponent from './src/flow-design';
+export const VxeFlowDesign = Object.assign({}, VxeFlowDesignComponent, {
+    install(app) {
+        checkDependVersion();
+        app.component(VxeFlowDesignComponent.name, VxeFlowDesignComponent);
+    }
+});
+if (VxeUI.dynamicApp) {
+    VxeUI.dynamicApp.use(VxeFlowDesign);
+}
+VxeUI.component(VxeFlowDesignComponent);
+export const FlowDesign = VxeFlowDesign;
+export default VxeFlowDesign;

package/es/flow-design/src/flow-design.js

@@ -0,0 +1,50 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { VxeUI } from '@vxe-ui/core';
+import XEUtils from 'xe-utils';
+const { createEvent } = VxeUI;
+export default {
+    name: 'VxeFlowDesign',
+    props: {},
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {};
+        return {
+            xID,
+            reactData
+        };
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeFlowDesign = this;
+            $xeFlowDesign.$emit(type, createEvent(evnt, { $flowDesign: $xeFlowDesign }, params));
+        },
+        emitModel(value) {
+            const $xeFlowDesign = this;
+            const { _events } = $xeFlowDesign;
+            if (_events && _events.modelValue) {
+                $xeFlowDesign.$emit('modelValue', value);
+            }
+            else {
+                $xeFlowDesign.$emit('model-value', value);
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeFlowDesign = this;
+            const slots = $xeFlowDesign.$scopedSlots;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-flow-design'
+            }, defaultSlot ? defaultSlot({}) : []);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/flow-design/src/flow-view.js

@@ -0,0 +1,50 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { VxeUI } from '@vxe-ui/core';
+import XEUtils from 'xe-utils';
+const { createEvent } = VxeUI;
+export default {
+    name: 'VxeFlowView',
+    props: {},
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {};
+        return {
+            xID,
+            reactData
+        };
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeFlowView = this;
+            $xeFlowView.$emit(type, createEvent(evnt, { $flowView: $xeFlowView }, params));
+        },
+        emitModel(value) {
+            const $xeFlowView = this;
+            const { _events } = $xeFlowView;
+            if (_events && _events.modelValue) {
+                $xeFlowView.$emit('modelValue', value);
+            }
+            else {
+                $xeFlowView.$emit('model-value', value);
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeFlowView = this;
+            const slots = $xeFlowView.$scopedSlots;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-flow-view'
+            }, defaultSlot ? defaultSlot({}) : []);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/flow-view/index.js

@@ -0,0 +1,15 @@
+import { VxeUI } from '@vxe-ui/core';
+import { checkDependVersion } from '../ui/src/depend';
+import VxeFlowViewComponent from '../flow-design/src/flow-view';
+export const VxeFlowView = Object.assign({}, VxeFlowViewComponent, {
+    install(app) {
+        checkDependVersion();
+        app.component(VxeFlowViewComponent.name, VxeFlowViewComponent);
+    }
+});
+if (VxeUI.dynamicApp) {
+    VxeUI.dynamicApp.use(VxeFlowView);
+}
+VxeUI.component(VxeFlowViewComponent);
+export const FlowView = VxeFlowView;
+export default VxeFlowView;

package/es/form-design/index.js

@@ -0,0 +1,15 @@
+import { VxeUI } from '@vxe-ui/core';
+import { checkDependVersion } from '../ui/src/depend';
+import VxeFormDesignComponent from './src/form-design';
+export const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
+    install(app) {
+        checkDependVersion();
+        app.component(VxeFormDesignComponent.name, VxeFormDesignComponent);
+    }
+});
+if (VxeUI.dynamicApp) {
+    VxeUI.dynamicApp.use(VxeFormDesign);
+}
+VxeUI.component(VxeFormDesignComponent);
+export const FormDesign = VxeFormDesign;
+export default VxeFormDesign;

package/es/form-design/src/form-design.js

@@ -0,0 +1,96 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { VxeUI } from '@vxe-ui/core';
+import XEUtils from 'xe-utils';
+const { getConfig, createEvent } = VxeUI;
+export default {
+    name: 'VxeFormDesign',
+    props: {
+        size: {
+            type: String,
+            default: () => getConfig().formDesign.size || getConfig().size
+        },
+        config: Object,
+        height: {
+            type: [String, Number],
+            default: () => getConfig().formDesign.height
+        },
+        widgets: {
+            type: Array,
+            default: () => XEUtils.clone(getConfig().formDesign.widgets) || []
+        },
+        showHeader: {
+            type: Boolean,
+            default: () => getConfig().formDesign.showHeader
+        },
+        showPc: {
+            type: Boolean,
+            default: () => getConfig().formDesign.showPc
+        },
+        showMobile: {
+            type: Boolean,
+            default: () => getConfig().formDesign.showMobile
+        },
+        showStyleSetting: {
+            type: Boolean,
+            default: () => getConfig().formDesign.showStyleSetting
+        },
+        formRender: Object,
+        menuConfig: Object
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            formData: {},
+            widgetConfigs: [],
+            widgetObjList: [],
+            dragWidget: null,
+            sortWidget: null,
+            activeWidget: null
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    computed: {
+        computeMenuOpts() {
+            const $xeFormDesign = this;
+            const props = $xeFormDesign;
+            return Object.assign({}, getConfig().calendar.menuConfig, props.menuConfig);
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeFormDesign = this;
+            $xeFormDesign.$emit(type, createEvent(evnt, { $formDesign: $xeFormDesign }, params));
+        },
+        emitModel(value) {
+            const $xeFormDesign = this;
+            const { _events } = $xeFormDesign;
+            if (_events && _events.modelValue) {
+                $xeFormDesign.$emit('modelValue', value);
+            }
+            else {
+                $xeFormDesign.$emit('model-value', value);
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeFormDesign = this;
+            const slots = $xeFormDesign.$scopedSlots;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-form-design'
+            }, defaultSlot ? defaultSlot({}) : []);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/form-design/src/form-view.js

@@ -0,0 +1,54 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { VxeUI } from '@vxe-ui/core';
+const { createEvent } = VxeUI;
+export default {
+    name: 'VxeFormView',
+    props: {},
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            formConfig: {},
+            formRules: {},
+            widgetObjList: []
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeFormView = this;
+            $xeFormView.$emit(type, createEvent(evnt, { $formView: $xeFormView }, params));
+        },
+        emitModel(value) {
+            const $xeFormView = this;
+            const { _events } = $xeFormView;
+            if (_events && _events.modelValue) {
+                $xeFormView.$emit('modelValue', value);
+            }
+            else {
+                $xeFormView.$emit('model-value', value);
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeFormView = this;
+            const slots = $xeFormView.$scopedSlots;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: 'vxe-form-view'
+            }, defaultSlot ? defaultSlot({}) : []);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};