Merge pull request #5 from WeBankFinTech/feat-antd-plugin

Feat antd plugin
WeBankFinTech · Jul 19, 2023 · 2cb2273 · 2cb2273
2 parents 63e36de + 632ca34
commit 2cb2273
Show file tree

Hide file tree

Showing 26 changed files with 12,084 additions and 9,750 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,95 @@
+## [2.0.2](https://github.com/WeBankFinTech/KoalaForm/compare/v2.0.1...v2.0.2) (2023-07-19)
+
+
+### Bug Fixes
+
+* jsx ([ea7d986](https://github.com/WeBankFinTech/KoalaForm/commit/ea7d986b4ff65d0b83bc93181acc07c9e721f4b9))
+
+
+### Features
+
+* add and design vue plugn ([758ad02](https://github.com/WeBankFinTech/KoalaForm/commit/758ad02944731a0937674588ff531f8798ea3215))
+
+
+
+## 2.0.1 (2023-07-11)
+
+
+### Bug Fixes
+
+### Features
+
+* add element plus plugin ([c1c04a5](https://github.com/WeBankFinTech/KoalaForm/commit/c1c04a582a202db0c04952df5b2857661b2a5261))
+
+
+# 2.0.0 (2023-06-07)
+
+
+### Bug Fixes
+
+* 表单赋值问题 ([4a41453](https://github.com/WeBankFinTech/KoalaForm/commit/4a41453ee836362e265a587e0d39e7fe6944230e))
+* 规则和日志 ([1635913](https://github.com/WeBankFinTech/KoalaForm/commit/1635913ab0efc3b8fb785d9f252cf86bce1f490c))
+* 规则和日志 ([d1162a6](https://github.com/WeBankFinTech/KoalaForm/commit/d1162a648e82823db85a90733d0a9d3cd0d1a5eb))
+* 接口响应数据为空处理 ([f299be4](https://github.com/WeBankFinTech/KoalaForm/commit/f299be4e9cd9e530507e78db39694d9e73f9c010))
+* 内存泄漏 ([7a87d95](https://github.com/WeBankFinTech/KoalaForm/commit/7a87d952fa540100014e399a0bb9208ebf5fb768))
+* 上下文&&上下嵌套 ([99185b9](https://github.com/WeBankFinTech/KoalaForm/commit/99185b973c7edf463b1fe4806a37eff33215b0b3))
+* fes更新导致的问题 ([4f6efc5](https://github.com/WeBankFinTech/KoalaForm/commit/4f6efc5bf608d0b20d9b33005fc0b3c906d9ba94))
+* handleAction 参数 ([f2b33b8](https://github.com/WeBankFinTech/KoalaForm/commit/f2b33b8c50f79c84eb2193f88a32cd8727cc15aa))
+* pager ([c3e1f1a](https://github.com/WeBankFinTech/KoalaForm/commit/c3e1f1ac62d72821012826ce8d4a192673070608))
+* pager ([04dbfb9](https://github.com/WeBankFinTech/KoalaForm/commit/04dbfb93d040dc4036ef6f2168acac167e487d92))
+* pager ([437db79](https://github.com/WeBankFinTech/KoalaForm/commit/437db79c1b37ef2a898d773bc21f4abd09a2d77e))
+* useFormAction Slots ([4d3fbe9](https://github.com/WeBankFinTech/KoalaForm/commit/4d3fbe9c21504bb059cbfd0b1794093f65b2bd84))
+* useModal render slowly ([fe85b45](https://github.com/WeBankFinTech/KoalaForm/commit/fe85b4552ce3770a16485e81817fb21c4fcf8cfc))
+
+
+### Features
+
+* 插件生命周期 ([3b90fb9](https://github.com/WeBankFinTech/KoalaForm/commit/3b90fb93730939fbe3105055b745aaa0201b60dd))
+* 场景实现 ([ae33932](https://github.com/WeBankFinTech/KoalaForm/commit/ae33932499dfac3352ac21fa088d9ffd3f220865))
+* 类型和变量名优化 ([7844999](https://github.com/WeBankFinTech/KoalaForm/commit/7844999f6f4747eea435db9ee10fa618d5ac711a))
+* 校验规则支持响应式 ([69867a4](https://github.com/WeBankFinTech/KoalaForm/commit/69867a43d3b54b81cc83946892bc04bfcb54ad34))
+* action slot  add formModel ([8f64a04](https://github.com/WeBankFinTech/KoalaForm/commit/8f64a0474700578f031f4dc6f9214c0af0043f96))
+* config modalMode ([0badff7](https://github.com/WeBankFinTech/KoalaForm/commit/0badff73504e876bc0bfc0227ed44b5849947157))
+* field  text/input类型 ([004bb7f](https://github.com/WeBankFinTech/KoalaForm/commit/004bb7f64bd32246f0c9f94ec7e5cb18959df99c))
+* handles ([d2cf7a6](https://github.com/WeBankFinTech/KoalaForm/commit/d2cf7a644c475a1d0093d089e507ce4cea37b313))
+* koala-form ([a6cbcf7](https://github.com/WeBankFinTech/KoalaForm/commit/a6cbcf79b505669bda7056992f478088db29aa83))
+* koalaRender ([ac371d4](https://github.com/WeBankFinTech/KoalaForm/commit/ac371d4f6258c72a15da7a82382979023ccc2278))
+* pager隐藏&&按钮属性 ([7f6027a](https://github.com/WeBankFinTech/KoalaForm/commit/7f6027acdb118cb5112a6183ba51b2d32a9df900))
+* pageSizeChange ([0124124](https://github.com/WeBankFinTech/KoalaForm/commit/01241247e7ac6f2f1c364673eaf7c9b570ae0b5a))
+* preset ([7ab8dd6](https://github.com/WeBankFinTech/KoalaForm/commit/7ab8dd653d3e86859bc005f28cb8451921250c35))
+* table操作slot扩展 ([49dd428](https://github.com/WeBankFinTech/KoalaForm/commit/49dd428ada2913509ee6d77843eb688256fefa76))
+* type_action slot ([4cd8fb2](https://github.com/WeBankFinTech/KoalaForm/commit/4cd8fb236ee6a8cc45bb3ba0aa061ed1489838d1))
+* type定义 ([33e5e2e](https://github.com/WeBankFinTech/KoalaForm/commit/33e5e2ebcd84e23df773a485a51b040270ac19b2))
+* useCurd & model修改成ModelRef ([681f84f](https://github.com/WeBankFinTech/KoalaForm/commit/681f84f28ae06f61a47405681a95e3bf2c8e8eb0))
+* v2设计 ([daece9f](https://github.com/WeBankFinTech/KoalaForm/commit/daece9fd3d50f1700baeb6710bfb72bf8a88cf9a))
+
+
+
+# 1.0.0 (2020-03-11)
+
+
+### Bug Fixes
+
+* 表单赋值问题 ([4a41453](https://github.com/WeBankFinTech/KoalaForm/commit/4a41453ee836362e265a587e0d39e7fe6944230e))
+* 接口响应数据为空处理 ([f299be4](https://github.com/WeBankFinTech/KoalaForm/commit/f299be4e9cd9e530507e78db39694d9e73f9c010))
+* fes更新导致的问题 ([4f6efc5](https://github.com/WeBankFinTech/KoalaForm/commit/4f6efc5bf608d0b20d9b33005fc0b3c906d9ba94))
+* handleAction 参数 ([f2b33b8](https://github.com/WeBankFinTech/KoalaForm/commit/f2b33b8c50f79c84eb2193f88a32cd8727cc15aa))
+* pager ([c3e1f1a](https://github.com/WeBankFinTech/KoalaForm/commit/c3e1f1ac62d72821012826ce8d4a192673070608))
+* pager ([04dbfb9](https://github.com/WeBankFinTech/KoalaForm/commit/04dbfb93d040dc4036ef6f2168acac167e487d92))
+* pager ([437db79](https://github.com/WeBankFinTech/KoalaForm/commit/437db79c1b37ef2a898d773bc21f4abd09a2d77e))
+* useFormAction Slots ([4d3fbe9](https://github.com/WeBankFinTech/KoalaForm/commit/4d3fbe9c21504bb059cbfd0b1794093f65b2bd84))
+* useModal render slowly ([fe85b45](https://github.com/WeBankFinTech/KoalaForm/commit/fe85b4552ce3770a16485e81817fb21c4fcf8cfc))
+
+
+### Features
+
+* 类型和变量名优化 ([7844999](https://github.com/WeBankFinTech/KoalaForm/commit/7844999f6f4747eea435db9ee10fa618d5ac711a))
+* action slot  add formModel ([8f64a04](https://github.com/WeBankFinTech/KoalaForm/commit/8f64a0474700578f031f4dc6f9214c0af0043f96))
+* config modalMode ([0badff7](https://github.com/WeBankFinTech/KoalaForm/commit/0badff73504e876bc0bfc0227ed44b5849947157))
+* field  text/input类型 ([004bb7f](https://github.com/WeBankFinTech/KoalaForm/commit/004bb7f64bd32246f0c9f94ec7e5cb18959df99c))
+* koala-form ([a6cbcf7](https://github.com/WeBankFinTech/KoalaForm/commit/a6cbcf79b505669bda7056992f478088db29aa83))
+* pager隐藏&&按钮属性 ([7f6027a](https://github.com/WeBankFinTech/KoalaForm/commit/7f6027acdb118cb5112a6183ba51b2d32a9df900))
+* pageSizeChange ([0124124](https://github.com/WeBankFinTech/KoalaForm/commit/01241247e7ac6f2f1c364673eaf7c9b570ae0b5a))
+* table操作slot扩展 ([49dd428](https://github.com/WeBankFinTech/KoalaForm/commit/49dd428ada2913509ee6d77843eb688256fefa76))
+* type_action slot ([4cd8fb2](https://github.com/WeBankFinTech/KoalaForm/commit/4cd8fb236ee6a8cc45bb3ba0aa061ed1489838d1))
+* type定义 ([33e5e2e](https://github.com/WeBankFinTech/KoalaForm/commit/33e5e2ebcd84e23df773a485a51b040270ac19b2))
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@
 | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
 | [@koala-form/fes-plugin](https://koala-form.mumblefe.cn/zh/ui/fes.html)                                        | Fes Design组件库的桥接插件                                            |
 | [@koala-form/element-plugin](https://koala-form.mumblefe.cn/zh/ui/element.html)                       | Element Plus组件库的桥接插件                                |
+| [@koala-form/antd-plugin](https://koala-form.mumblefe.cn/zh/ui/antd.html)                       | Ant Design Vue组件库的桥接插件                                |
 
 ## Install
 

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -16,7 +16,7 @@ export default {
     description: 'Koala Form',
     vite: {
         define: {
-            __VUE_OPTIONS_API__: false
+            __VUE_OPTIONS_API__: true
         },
         ssr: {
           // esm，ssr 渲染的时候编译成 cjs 的引入方式，会引发 nodejs 的模块加载异常错误
@@ -37,6 +37,7 @@ export default {
               '@koala-form/core': path.resolve('packages/core/src/index.ts'),
               '@koala-form/fes-plugin': path.resolve('packages/fes-plugin/src/index.ts'),
               '@koala-form/element-plugin': path.resolve('packages/element-plugin/src/index.ts'),
+              '@koala-form/antd-plugin': path.resolve('packages/antd-plugin/src/index.ts'),
           },
       },
         json: {
@@ -69,6 +70,7 @@ export default {
               items: [
                 { text: 'Fes Design Plugin', link: '/zh/ui/fes' },
                 { text: 'Element Plus Plugin', link: '/zh/ui/element' },
+                { text: 'Ant-Design-Vue Plugin', link: '/zh/ui/antd' },
               ]
             },
             // { text: '精彩示例', link: '/zh/demos/', activeMatch: '^/zh/demos' },
@@ -85,6 +87,9 @@ export default {
             '/zh/ui/element': [
               { text: 'Element Plus Plugin', link: '/zh/ui/element' },
             ],
+            '/zh/ui/antd': [
+              { text: 'Ant-Design-Vue Plugin', link: '/zh/ui/antd' },
+            ],
             '/zh/demos/': getDemosSidebar(),
         }
     }

diff --git a/docs/.vitepress/styles/index.less b/docs/.vitepress/styles/index.less
@@ -1,5 +1,5 @@
 .example-doc,
-.ant-calendar-picker-container {
+.ant-picker-panel-container, .el-picker-panel {
   table {
     border-collapse: initial;
     margin: initial;

diff --git a/docs/examples/Test.vue b/docs/examples/Test.vue
@@ -1,38 +1,32 @@
 <template>
-    <!-- <FTable :data="dataList">
-        <FTableColumn label="ID" prop="id"></FTableColumn>
-    </FTable> -->
-    <FButton v-for="(item, index) in dataList">{{ index }}</FButton>
+    <Test></Test>
 </template>
 
-<script setup>
-import { FButton } from '@fesjs/fes-design';
-import { onUnmounted, ref } from 'vue';
-
-const dataList = ref([]);
-for (let index = 0; index < 1; index++) {
-    dataList.value.push({ name: index });
-}
-
-const columns = [
-    {
-        title: '姓名',
-        dataIndex: 'name',
-        key: 'name',
+<script>
+import { defineComponent, onUnmounted, ref } from 'vue';
+const Test = defineComponent({
+    name: 'Test',
+    data() {
+        return {
+            name: 'aring',
+        };
     },
-    {
-        title: '年龄',
-        dataIndex: 'age',
-        key: 'age',
+    methods: {
+        hello: () => {
+            console.log('hello');
+        },
     },
-    {
-        title: '住址',
-        dataIndex: 'address',
-        key: 'address',
+    render() {
+        // debugger;
+        this.hello();
+        return '11111';
     },
-];
+});
 
-onUnmounted(() => {
-    console.log('------');
+export default defineComponent({
+    components: { Test },
+    setup() {
+        // to do
+    },
 });
 </script>
diff --git a/docs/examples/antdCurd.js b/docs/examples/antdCurd.js
@@ -0,0 +1,90 @@
+import { defineComponent } from 'vue';
+import {
+    ComponentType,
+    doCloseModal,
+    doOpenModal,
+    doQuery,
+    doRefresh,
+    doResetQuery,
+    formatByOptions,
+    useForm,
+    useModal,
+    usePager,
+    useSceneContext,
+    useTable,
+} from '@koala-form/core';
+import { genForm, genQueryAction, genTableAction, componentPlugin } from '@koala-form/antd-plugin';
+import { message } from 'ant-design-vue';
+
+const name = { name: 'name', label: '姓名' };
+const age = { name: 'age', label: '年龄' };
+const sex = {
+    name: 'sex',
+    label: '性别',
+    options: [
+        { value: '0', label: '女' },
+        { value: '1', label: '男' },
+    ],
+};
+
+const formFileds = [
+    { ...name, components: { name: ComponentType.Input } },
+    { ...age, components: { name: ComponentType.InputNumber } },
+    { ...sex, components: { name: ComponentType.Select } },
+];
+
+export default defineComponent({
+    setup() {
+        const {
+            ctxs: [query, table, pager, modal, edit],
+        } = useSceneContext(['query', 'table', 'pager', 'modal', 'edit'], [componentPlugin]);
+
+        let isCreate = false;
+        const queryActions = genQueryAction({
+            query: () => doQuery({ api: '/user.json', form: query, table, pager }),
+            reset: () => doResetQuery({ api: '/user.json', form: query, table, pager }),
+            create: () => {
+                doOpenModal({ modal, form: edit });
+                modal.modelRef.value.title = '新增用户';
+                isCreate = true;
+            },
+        });
+        const tableAction = genTableAction({
+            view: ({ record }) => message.info(record.name),
+            delete: ({ record }) => {
+                message.success('删除 ' + record.name);
+            },
+            update: ({ record }) => {
+                doOpenModal({ modal, form: edit, row: record });
+                modal.modelRef.value.title = '修改用户';
+                isCreate = false;
+            },
+        });
+        useForm({ ctx: query, fields: [...formFileds, queryActions], form: genForm('inline') });
+        useTable({
+            ctx: table,
+            table: { props: { style: 'margin-top: 10px' } },
+            fields: [name, age, { ...sex, format: formatByOptions }, tableAction],
+        });
+        usePager({ ctx: pager, pager: { events: { onChange: () => doRefresh({ api: '/user.json', form: query, table, pager }) } } });
+        useForm({ ctx: edit, fields: formFileds });
+        useModal({
+            ctx: modal,
+            modal: {
+                children: edit,
+                events: {
+                    async onOk() {
+                        let api = '/success.json';
+                        if (isCreate) {
+                            api = '/error.json';
+                        }
+                        await doCloseModal({ api, form: edit, modal });
+                        message.success('保存成功');
+                    },
+                },
+            },
+        });
+
+        return () => [query.render(), table.render(), pager.render(), modal.render()];
+    },
+});