vxe-design 3.0.0 → 4.0.0-beta.0

package/README.en.md

@@ -0,0 +1,75 @@
+# vxe-design
+
+[简体中文](README.md) | [繁體中文](README.zh-TW.md) | English | [日本語](README.ja-JP.md)  
+
+[![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)
+
+A [vue](https://www.npmjs.com/package/vue) based PC component library.  
+
+## Browser Support
+
+![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+ ✔ |
+
+## Online Documents
+
+👉 [UI Document](https://vxeui.com)  
+👉 [Table Document](https://vxetable.cn)  
+
+## Use
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-pc-ui vxe-table vxe-design
+```
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll 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'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIDesign).mount('#app')
+```
+
+## Run the project
+
+Install dependencies
+
+```shell
+npm install
+```
+
+Start local debugging
+
+```shell
+npm run serve
+```
+
+Compile packaging, generated compiled directory: es,lib
+
+```shell
+npm run lib
+```
+
+## License
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

package/README.ja-JP.md

@@ -0,0 +1,75 @@
+# vxe-design
+
+[简体中文](README.md) | [繁體中文](README.zh-TW.md) | [English](README.en.md) | 日本語  
+
+[![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)
+
+[vue](https://www.npmjs.com/package/vue)ベースの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+ ✔ |
+
+## オンラインドキュメント
+
+👉 [UIドキュメント](https://vxeui.com)  
+👉 [テーブルドキュメント](https://vxetable.cn)  
+
+## インストール
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-pc-ui vxe-table vxe-design
+```
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll 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'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIDesign).mount('#app')
+```
+
+## プロジェクトの実行
+
+依存関係をインストールする
+
+```shell
+npm install
+```
+
+ローカルデバッグを開始する
+
+```shell
+npm run serve
+```
+
+コンパイルパッケージング、生成されたコンパイルディレクトリ: es,lib
+
+```shell
+npm run lib
+```
+
+## ライセンス
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

package/README.md

@@ -1,6 +1,6 @@
 # vxe-design
 
-简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md)  
+简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md) | [日本語](README.ja-JP.md)  
 
 [![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)
@@ -14,20 +14,51 @@
 
 一个基于 [Vxe UI](https://github.com/x-extends/vxe-pc-ui) 的 PC 端可视化设计器，用于搭建零代码、低代码的平台
 
+* 设计理念
+  * 面向现代浏览器，高效的简洁 API 设计
+  * 按需加载
+
 ## 浏览器支持
 
 ![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+ ✔ |
 
+## 在线文档
+
+👉 [组件文档](https://vxeui.com)
+👉 [设计器文档](https://vxeui.com)  
+👉 [表格文档](https://vxetable.cn)  
+
+## QQ 交流群
+
+该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。  
+
+![qq](https://vxeui.com/resource/donation/qq1.png)
+![qq](https://vxeui.com/resource/donation/qq2.png)
+
+## 功能点
+
+[👀 Vxe Design](https://vxeui.com)  
+
+* [ ] flow-design 工作流设计器
+* [ ] flow-view 工作流设计器-视图渲染
+* [x] form-design 表单设计器
+* [x] form-view 表单设计器-视图渲染
+* [x] list-design 列表设计器
+* [x] list-view 列表设计器-视图渲染
+
 ## 安装
 
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
 ```shell
-npm install vxe-pc-ui@3 vxe-table@3 vxe-design@3
+npm install vxe-pc-ui vxe-table vxe-design
 ```
 
+### NPM
+
 ```javascript
-import Vue from 'vue'
 // ...
 import VxeUIAll from 'vxe-pc-ui'
 import 'vxe-pc-ui/es/style.css'
@@ -39,17 +70,40 @@ import VxeUIDesign from 'vxe-design'
 import 'vxe-design/lib/style.css'
 // ...
 
-Vue.use(VxeUIAll)
-Vue.use(VxeUITable)
-Vue.use(VxeUIDesign)
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIDesign).mount('#app')
+```
+
+## 运行项目
+
+安装依赖
+
+```shell
+npm run update
+```
+
+启动本地调试
+
+```shell
+npm run serve
 ```
 
-## Contributors
+编译打包，生成编译后的目录：es,lib
+
+```shell
+npm run lib
+```
+
+## 贡献源码步骤
+
+1. 如果是修复 bug，必须有示例的复现链接
+2. 如果新功能，涉及代码风格、质量、还需有对应的示例页面
+
+## 贡献者
 
 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/README.zh-TW.md

@@ -0,0 +1,75 @@
+# vxe-design
+
+[简体中文](README.md) | 繁體中文 | [English](README.en.md) | [日本語](README.ja-JP.md)  
+
+[![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)
+
+一个基于 [vue](https://www.npmjs.com/package/vue) 的 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+ ✔ |
+
+## 線上檔案
+
+👉 [組件文檔](https://vxeui.com)  
+👉 [表格文檔](https://vxetable.cn)  
+
+## 安装
+
+版本：[vue](https://www.npmjs.com/package/vue) 3.x
+
+```shell
+npm install vxe-pc-ui vxe-table vxe-design
+```
+
+### NPM
+
+```javascript
+// ...
+import VxeUIAll 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'
+// ...
+
+createApp(App).use(VxeUIAll).use(VxeUITable).use(VxeUIDesign).mount('#app')
+```
+
+## 運行項目
+
+安裝依賴
+
+```shell
+npm install
+```
+
+啓動本地調試
+
+```shell
+npm run serve
+```
+
+編譯打包，生成編譯後的目錄：es,lib
+
+```shell
+npm run lib
+```
+
+## 許可證
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

package/es/components.js

@@ -1,4 +1,4 @@
-import { VxeUI, setConfig } from 'vxe-pc-ui';
+import { setConfig } from '@vxe-ui/core';
 import VxeFlowDesign from './flow-design';
 import VxeFlowView from './flow-view';
 import VxeFormDesign from './form-design';
@@ -17,7 +17,7 @@ export function install(app, options) {
     setConfig(options);
     components.forEach(component => app.use(component));
 }
-export { VxeUI };
+export * from './ui';
 // Components
 export * from './flow-design';
 export * from './flow-view';

package/es/flow-design/index.js

@@ -1,4 +1,4 @@
-import { VxeUI } from 'vxe-pc-ui';
+import { VxeUI } from '@vxe-ui/core';
 import VxeFlowDesignComponent from './src/flow-design';
 export const VxeFlowDesign = Object.assign({}, VxeFlowDesignComponent, {
     install(app) {

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

@@ -1,49 +1,38 @@
+import { ref, h, reactive } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { createEvent } from 'vxe-pc-ui';
-export default {
+export default defineVxeComponent({
     name: 'VxeFlowDesign',
     props: {},
-    data() {
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
         const xID = XEUtils.uniqueId();
-        const reactData = {};
-        return {
+        const refElem = ref();
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeFlowDesign = {
             xID,
-            reactData
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
         };
-    },
-    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 renderVN = () => {
             const defaultSlot = slots.default;
             return h('div', {
-                ref: 'refElem',
-                class: 'vxe-flow-design'
+                ref: refElem,
+                class: ['vxe-flow-design']
             }, defaultSlot ? defaultSlot({}) : []);
-        }
+        };
+        $xeFlowDesign.renderVN = renderVN;
+        return $xeFlowDesign;
     },
-    render(h) {
-        return this.renderVN(h);
+    render() {
+        return this.renderVN();
     }
-};
+});

package/es/flow-view/index.js

@@ -1,5 +1,5 @@
-import { VxeUI } from 'vxe-pc-ui';
-import VxeFlowViewComponent from '../flow-design/src/flow-view';
+import { VxeUI } from '@vxe-ui/core';
+import VxeFlowViewComponent from './src/flow-view';
 export const VxeFlowView = Object.assign({}, VxeFlowViewComponent, {
     install(app) {
         app.component(VxeFlowViewComponent.name, VxeFlowViewComponent);

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

@@ -0,0 +1,38 @@
+import { ref, h, reactive } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+export default defineVxeComponent({
+    name: 'VxeFlowView',
+    props: {},
+    emits: [],
+    setup(props, context) {
+        const { slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive({});
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeFlowView = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const renderVN = () => {
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-flow-view']
+            }, defaultSlot ? defaultSlot({}) : []);
+        };
+        $xeFlowView.renderVN = renderVN;
+        return $xeFlowView;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/form-design/index.js

@@ -1,13 +1,27 @@
-import { VxeUI } from 'vxe-pc-ui';
+import { VxeUI } from '@vxe-ui/core';
 import VxeFormDesignComponent from './src/form-design';
+import { useWidgetView, useWidgetName, useSubtableView, useWidgetPropDataSource } from './src/use';
+import './render';
 export const VxeFormDesign = Object.assign({}, VxeFormDesignComponent, {
     install(app) {
         app.component(VxeFormDesignComponent.name, VxeFormDesignComponent);
     }
 });
+const formDesignHandle = {
+    useWidgetName,
+    useWidgetView,
+    useSubtableView,
+    useWidgetPropDataSource
+};
 if (VxeUI.dynamicApp) {
     VxeUI.dynamicApp.use(VxeFormDesign);
 }
 VxeUI.component(VxeFormDesignComponent);
+VxeUI.formDesignHandle = formDesignHandle;
+/**
+ * 已废弃，请使用 formDesignHandle
+ * @deprecated
+ */
+VxeUI.formDesign = formDesignHandle;
 export const FormDesign = VxeFormDesign;
 export default VxeFormDesign;