= (api) => {
26 | api.describe('slot-plugin');
27 |
28 | api.on('started', ({ name, ctx }) => {
29 | if (name === 'render-plugin') {
30 | const render = ctx.render;
31 | ctx.render = (slots) => {
32 | travelTree(ctx.schemes, (scheme) => {
33 | if ((scheme?.__node as ComponentDesc)?.slots) {
34 | mergeRefProps(scheme, 'slots', (scheme?.__node as ComponentDesc)?.slots);
35 | }
36 | if (slots && (scheme?.__node as ComponentDesc)?.slotName) {
37 | parseSlotName(slots, scheme, scheme.__node as ComponentDesc, ctx);
38 | }
39 | });
40 | return render(slots);
41 | };
42 | api.emit('started');
43 | }
44 | });
45 | };
46 |
--------------------------------------------------------------------------------
/examples/demo-with-fes/src/.fes/plugin-layout/views/index.jsx:
--------------------------------------------------------------------------------
1 | import { unref, defineComponent, computed } from 'vue';
2 | import { plugin } from '@@/core/coreExports';
3 | import { getRoutes } from '@@/core/routes/routes';
4 | // eslint-disable-next-line import/extensions
5 | import getConfig from '../helpers/getConfig';
6 | import fillMenu from '../helpers/fillMenu';
7 | import BaseLayout from './BaseLayout.vue';
8 |
9 | const Layout = defineComponent({
10 | name: 'Layout',
11 | setup() {
12 | const config = getConfig();
13 |
14 | const menus = typeof config.menus === 'function' ? config.menus() : config.menus;
15 |
16 | const routes = getRoutes();
17 |
18 | // 把路由的 meta 合并到 menu 配置中
19 | const filledMenuRef = computed(() => fillMenu(unref(menus) ?? [], routes));
20 |
21 | const localeShared = plugin.getShared('locale');
22 |
23 | return () => {
24 | const slots = {
25 | renderCustom: config.renderCustom,
26 | locale: () => {
27 | if (localeShared) {
28 | return ;
29 | }
30 | return null;
31 | },
32 | };
33 | return (
34 |
49 | );
50 | };
51 | },
52 | });
53 |
54 | export default Layout;
55 |
--------------------------------------------------------------------------------
/packages/fes-plugin/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
5 |
6 |
7 | Koala-Form
8 |
9 |
10 |
11 | 低代码表单解决方案，让你跟考拉一样“懒”
12 |
13 | [](../../issues)
14 | [](http://opensource.org/licenses/MIT)
15 | [](../../pulls)
16 | [](https://badges.toozhao.com/stats/01H51S4REBN596ZZ2BTNVV6566 "Get your own page views count badge on badges.toozhao.com")
17 |
18 |
19 |
20 | - 使用文档 - [https://koala-form.mumblefe.cn/zh/ui/fes.html](https://koala-form.mumblefe.cn/zh/ui/fes.html)
21 |
22 | ## Install
23 |
24 | ```bash
25 | npm i @koala-form/core
26 | npm i @koala-form/fes-plugin
27 | ```
28 |
29 | ## Usage
30 | 注册全局插件
31 | ```js
32 | import '@koala-form/fes-plugin';
33 | import { installPluginPreset } from '@koala-form/core';
34 |
35 | // 将依赖的插件安装到全局
36 | installPluginPreset();
37 | ```
38 | 写一个简单的表单
39 | ```html
40 |
41 |
42 |
43 |
44 |
68 | ```
69 |
70 |
71 | ## 反馈
--------------------------------------------------------------------------------
/docs/zh/guide/base/form.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 2
3 | ---
4 |
5 | ## 全局配置
6 | 在入口文件中，配置全局应用，比如插件、网络请求等。
7 |
8 | <<< @/examples/main.js
9 |
10 | ## 使用表单场景
11 | 表单抽象为一个场景，使用useForm，可以快速的建立一个表单。返回上下文对象
12 | ```js
13 | const ctx = useForm({ fields: [] })
14 | // ctx.render // 渲染方法
15 | // ctx.modelRef // form响应对象
16 | // ...更多操作表单的方法
17 | ```
18 |
19 | ## 添加字段
20 | 每个表单都包含多个字段，用于搜集用户输入，字段的表现有各种形式，比如输入框、下拉选择框、单选、多选等，使用Field描述表单的字段，定义字段的标签描述、属性名、默认值、组件等。
21 | ```js
22 | const name = {
23 | name: 'name', // modelRef.value.name可以访问到值
24 | label: '姓名', // 表单项的名称
25 | defaultValue: '蒙奇·D·路飞', // 默认值
26 | components: {
27 | name: ComponentType.Input, // 表单组件是输入框
28 | },
29 | }
30 |
31 | useForm({ fields: [name] })
32 |
33 | ```
34 |
35 | ## 添加操作
36 | 用户填写完表单后，会把数据提交给服务，所以我们需要给表单添加提交操作，需要用到ComponentDesc定义按钮的内容、属性和响应事件等。
37 | ```js
38 |
39 | // ...
40 | const submit = {
41 | name: ComponentType.Button, // 按钮组件
42 | children: ['提交'], // 按钮内容
43 | props: { type: 'primary' }, // 组件的属性
44 | events: {
45 | // 按钮的事件
46 | onClick: (event) => {
47 | console.log(event);
48 | },
49 | },
50 | }
51 |
52 | useForm({
53 | fields: [
54 | name,
55 | { // 添加一行，放置表单操作
56 | label: ' ',
57 | components: [submit]
58 | }
59 | ]
60 | })
61 |
62 | ```
63 |
64 | ## 上下文
65 | useForm返回场景上下文，可以进行表单重置、校验、渲染等。
66 | ```js
67 | // ...
68 |
69 | const ctx = useForm({});
70 |
71 | ctx.initFields({name: 'aring'}) // 初始默认值
72 |
73 | ctx.resetFields() // 重置
74 |
75 | ctx.validate() // 校验
76 |
77 | ctx.render() // 渲染
78 |
79 | ```
80 |
81 | ## 多个表单
82 | useSceneContext可以预创建上下文，同时有多个表单时，可以先创建上下文。
83 | ```js
84 | const [form1, form2] = useSceneContext(['form1', 'form2']);
85 | useForm({ ctx: form1 });
86 | useForm({ ctx: form2 });
87 | ```
88 |
89 | ## 完整表单
90 | 场景上下文render方法可以渲染出表单。
91 |
92 |
93 |
94 |
95 |
96 |
97 | <<< @/examples/base/form.js
98 |
99 |
100 |
--------------------------------------------------------------------------------
/docs/examples/started/useModal.jsx:
--------------------------------------------------------------------------------
1 | import { FButton, FMessage, FSpace } from '@fesjs/fes-design';
2 | import { useModal, ComponentType, doOpen, useForm } from '@koala-form/core';
3 | import { defineComponent } from 'vue';
4 |
5 | export default defineComponent({
6 | setup() {
7 | const form = useForm({
8 | fields: [
9 | {
10 | label: '名字',
11 | name: 'name',
12 | components: { name: ComponentType.Input },
13 | },
14 | {
15 | label: '年龄',
16 | name: 'age',
17 | components: { name: ComponentType.InputNumber },
18 | },
19 | ],
20 | });
21 |
22 | const modal1 = useModal({
23 | title: 'Modal',
24 | modal: {
25 | events: {
26 | onOk() {
27 | FMessage.success('点击了OK');
28 | },
29 | onCancel() {
30 | FMessage.success('点击了Cancel');
31 | },
32 | },
33 | children: form, // 嵌套表单场景
34 | },
35 | });
36 |
37 | const modal2 = useModal({
38 | title: 'Drawer',
39 | modal: {
40 | name: ComponentType.Drawer,
41 | props: { footer: true },
42 | events: {
43 | onOk() {
44 | FMessage.success('点击了OK');
45 | },
46 | onCancel() {
47 | FMessage.success('点击了Cancel');
48 | },
49 | },
50 | children: 'Drawer内容',
51 | },
52 | });
53 |
54 | return () => (
55 |
56 | doOpen(modal1)}>Open Modal
57 | doOpen(modal2)}>Open Drawer
58 | {modal1.render()}
59 | {modal2.render()}
60 |
61 | );
62 | },
63 | });
64 |
--------------------------------------------------------------------------------
/examples/demo-with-fes/src/.fes/plugin-layout/views/MenuIcon.vue:
--------------------------------------------------------------------------------
1 |
49 |
64 |
--------------------------------------------------------------------------------
/examples/demo-with-fes/src/app.jsx:
--------------------------------------------------------------------------------
1 | import { access, defineRuntimeConfig, request } from '@fesjs/fes';
2 |
3 | import PageLoading from '@/components/pageLoading.vue';
4 | import UserCenter from '@/components/userCenter.vue';
5 | import { installInGlobal, installPluginPreset, setupGlobalConfig } from '@koala-form/core';
6 |
7 | installPluginPreset();
8 | setupGlobalConfig({
9 | request: request
10 | })
11 |
12 | export default defineRuntimeConfig({
13 | beforeRender: {
14 | loading: ,
15 | action() {
16 | const { setRole } = access;
17 | return new Promise((resolve) => {
18 | setTimeout(() => {
19 | setRole('admin');
20 | // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
21 | resolve({
22 | userName: '李雷',
23 | });
24 | }, 1000);
25 | });
26 | },
27 | },
28 | layout: {
29 | renderCustom: () => ,
30 | },
31 | request: {
32 | baseURL: '/',
33 | timeout: 10000, // 默认 10s
34 | method: 'get', // 默认 post
35 | mergeRequest: false, // 是否合并请求
36 | cacheData: false, // 是否缓存
37 | dataHandler(data, response) {
38 | // 处理响应内容异常
39 | if (data.code === '10000') {
40 | return Promise.reject(data);
41 | }
42 | return data?.result ? data.result : data;
43 | },
44 | // http 异常，和插件异常
45 | errorHandler(error) {
46 | if (error.response) {
47 | // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
48 | console.log(error.response.data);
49 | console.log(error.response.status);
50 | console.log(error.response.headers);
51 | } else if (error.msg) {
52 | console.log(error.msg);
53 | } else {
54 | // 发送请求时出了点问题
55 | console.log('Error', error.message);
56 | }
57 | console.log(error.config);
58 | },
59 | },
60 | });
61 |
--------------------------------------------------------------------------------
/docs/zh/guide/index.md:
--------------------------------------------------------------------------------
1 | # Koala Form是什么
2 |
3 | 对于中后台产品的前端开发来说，最常见的场景无非是开发一个表的CURD操作：
4 | - **Create:** 创建一条新的记录
5 |
6 | - **Update:** 更新一条新的记录
7 |
8 | - **Retrieve:** 读取一条记录
9 |
10 | - **Delete:** 删除一条记录
11 |
12 | ### 举个🌰
13 | 需要实现一个用户管理页面，包含`条件查询`、`用户新增`、`用户更新`、`用户删除`、`用户详情`功能。开发步骤如下：
14 | - **Step1:** 编写一个查询`Form`用于填写查询条件，点击查询按钮后，执行接口调用。
15 |
16 | - **Step2:** 编写一个`Table`用于展示数据，需要定义哪些字段展示，并把格式化展示查询结果。
17 |
18 | - **Step3:** 编写一个用户新增`Form`用于录入用户信息，点击新增后执行接口调用。
19 |
20 | - **Step4:** 编写一个用户更新`Form`用于更改用户信息，点击更新后执行接口调用。
21 |
22 | - **Step5:** 编写一个用户详情信息展示的`Form`，执行查询详情接口或从Table中获取用户数据
23 |
24 | - **Step6:** 编写一个删除用户确认提示，点击确定后执行接口调用。
25 |
26 | - **Step7:** 编写CURD的操作按钮，并编写按钮打开对应的的表单。
27 |
28 | 接下来又要新增一个角色管理页面，一样是CURD的功能，重复上面的步骤就会发现，两个页面除了字段和接口不同，大概有80%的其他逻辑基本一样，但还是少不了那些胶水代码。
29 |
30 | **而 Koala Form 可以帮你减少这80%的胶水代码。**
31 |
32 | **Koala Form** 是一个表单页面的低代码解决方案。以Vue3为基础，围绕后台产品的表单场景进行封装，使得开发者仅需关注表单页面的字段和接口。
33 |
34 | 它主要具备以下特点：
35 | - **高效的：** 从零开发一个完整的表单页面也许需要你花一天或者几个小时，而Koala From也许仅需几分钟，你需要做的就配置字段的展示规则。
36 |
37 | - **简单的：** 内置基础的表单场景，`useScene`, `useFrom`、`useTable`、`useModal`、`usePager`, 根据传入的字段规则解析，返回场景上下文用于操作场景内容，render函数更是减少了你对UI的关注。
38 |
39 | - **灵活的：** 丰富的场景可以自由组合；所有的字段也支持vue`slot`; 可扩展自己的插件，render自己的UI。
40 |
41 |
42 | ### 基础概念
43 | - **字段描述**
44 |
45 | 字段常见于表单和列表中，因此用`Field`对字段单独描述，关键属性：
46 | - 字段名
47 | - 字段描述
48 | - 字段规则
49 | - 字段组件
50 |
51 | - **组件描述**
52 |
53 | 组件用`ComponentDesc`描述，关键属性：
54 | - 组件名
55 | - 组件事件
56 | - 组件属性
57 | - children
58 |
59 | children是用于实现多个组件的并列和嵌套的组件树。
60 |
61 | - **场景**
62 |
63 | 场景是对重复功能的聚合描述，将重复的逻辑隐藏在场景里，提供一些便利的api进行功能操作。
64 |
65 | 比如useForm是负责表单的功能，提供validate、resetFields等api；
66 |
67 | 场景定义配置（即SceneConfig），场景执行之后返回场景上下文（即SceneContext）。
68 |
69 | - **插件**
70 |
71 | 插件是运行在场景里面，插件可扩展场景的配置和上下文，定制场景的功能。
72 |
73 | 插件之间可以通过emit/on发布订阅的模式进行通信。
74 |
75 | - **handler函数**
76 |
77 | handler函数是将一系列操作分解成N个单项操作，handler就是单项操作。
78 |
79 | 使用时选择合适的handler，并灵活插入一些自定义的操作，组合成一些列完整的逻辑。
80 |
81 | 比如按查询列表数据可以分解成: 取表单数据 -> 取pager数据 -> 合并处理（自定义） -> 提交获取数据 -> 设置列表数据 -> 设置分页数据
82 |
83 | - **预设函数**
84 |
85 | 预设函数是获取一些固定的handler组合和场景描述。能快速的辅助场景的配置。
86 |
87 | 比如查询表单，提供预设函数返回固定的查询按钮、重置按钮。
--------------------------------------------------------------------------------
/packages/element-plugin/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 | Koala-Form
8 |
9 |
10 | 低代码表单解决方案，让你跟考拉一样“懒”
11 |
12 | [](../../issues)
13 | [](http://opensource.org/licenses/MIT)
14 | [](../../pulls)
15 | [](https://badges.toozhao.com/stats/01H51S4REBN596ZZ2BTNVV6566 "Get your own page views count badge on badges.toozhao.com")
16 |
17 |
18 |
19 | - 使用文档 - [https://koala-form.mumblefe.cn/zh/ui/element.html](https://koala-form.mumblefe.cn/zh/ui/element.html)
20 |
21 | ## Install
22 |
23 | ```bash
24 | npm i @koala-form/core
25 | npm i @koala-form/element-plugin
26 | ```
27 |
28 | ## Usage
29 | 注册全局插件
30 | ```js
31 | import { componentPlugin } '@koala-form/element-plugin';
32 | import { installPluginPreset, installInGlobal } from '@koala-form/core';
33 |
34 | // 将依赖的插件安装到全局
35 | installPluginPreset();
36 |
37 | installInGlobal(componentPlugin)
38 | ```
39 | 写一个简单的表单
40 | ```html
41 |
42 |
43 |
44 |
45 |
69 | ```
70 |
71 |
72 | ## 反馈
--------------------------------------------------------------------------------
/packages/antd-plugin/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 | Koala-Form Ant Design Vue插件
8 |
9 |
10 | 低代码表单解决方案，让你跟考拉一样“懒”
11 |
12 | [](../../issues)
13 | [](http://opensource.org/licenses/MIT)
14 | [](../../pulls)
15 | [](https://badges.toozhao.com/stats/01H51S4REBN596ZZ2BTNVV6566 "Get your own page views count badge on badges.toozhao.com")
16 |
17 |
18 |
19 | - 使用文档 - [https://koala-form.mumblefe.cn/zh/ui/antd.html](https://koala-form.mumblefe.cn/zh/ui/antd.html)
20 |
21 | ## Install
22 |
23 | ```bash
24 | npm i @koala-form/core
25 | npm i @koala-form/antd-plugin
26 | ```
27 |
28 | ## Usage
29 | 注册全局插件
30 | ```js
31 | import { componentPlugin } from '@koala-form/antd-plugin';
32 | import { installPluginPreset, installInGlobal } from '@koala-form/core';
33 |
34 | // 将依赖的插件安装到全局
35 | installPluginPreset();
36 |
37 | installInGlobal(componentPlugin)
38 | ```
39 | 写一个简单的表单
40 | ```html
41 |
42 |
43 |
44 |
45 |
69 | ```
70 |
71 |
72 | ## 反馈
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "koala-form",
3 | "version": "2.0.5",
4 | "description": "vue form helper",
5 | "author": "aringlai",
6 | "license": "MIT",
7 | "scripts": {
8 | "docs:dev": "vitepress dev docs",
9 | "docs:build": "vitepress build docs",
10 | "docs:serve": "vitepress serve docs",
11 | "cypress:open": "cypress open",
12 | "build": "lerna exec --scope @koala-form/$PKG tsc",
13 | "publish": "cd packages/$PKG && npm publish",
14 | "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
15 | },
16 | "dependencies": {
17 | "@fesjs/fes-design": "0.7.15",
18 | "less": "4.1.2",
19 | "lodash-es": "4.17.15",
20 | "vue": "^3.2.27",
21 | "ant-design-vue": "^4.0.0",
22 | "element-plus": "^2.3.7",
23 | "dayjs": "^1.11.9",
24 | "@koala-form/core": "^2.0.0-rc.8",
25 | "@koala-form/fes-plugin": "^2.0.0",
26 | "@koala-form/element-plugin": "^2.0.0",
27 | "@koala-form/antd-plugin": "^2.0.0"
28 | },
29 | "workspaces": [
30 | "packages/*"
31 | ],
32 | "private": true,
33 | "devDependencies": {
34 | "@babel/core": "7.22.1",
35 | "@babel/plugin-transform-runtime": "^7.17.0",
36 | "@babel/preset-env": "7.15.0",
37 | "@babel/preset-typescript": "^7.16.7",
38 | "@betit/rollup-plugin-rename-extensions": "^0.1.0",
39 | "@rollup/plugin-babel": "^5.3.0",
40 | "@rollup/plugin-commonjs": "^21.0.1",
41 | "@rollup/plugin-json": "^4.1.0",
42 | "@rollup/plugin-node-resolve": "^13.1.3",
43 | "@types/lodash-es": "4.17.5",
44 | "@vitejs/plugin-vue-jsx": "1.3.0",
45 | "@vue/repl": "0.4.4",
46 | "@vue/theme": "0.1.16",
47 | "@webank/eslint-config-ts": "1.0.0",
48 | "@webank/eslint-config-webank": "1.1.1",
49 | "eslint-plugin-react": "7.27.1",
50 | "fs-extra": "^10.0.0",
51 | "lerna": "6.6.2",
52 | "rollup": "^2.68.0",
53 | "rollup-plugin-postcss": "^4.0.2",
54 | "rollup-plugin-vue": "^6.0.0",
55 | "typescript": "5.6.2",
56 | "vitepress": "0.21.6",
57 | "cypress": "12.13.0",
58 | "@vitejs/plugin-vue": "^4.2.3",
59 | "npm-run-all": "4.1.5",
60 | "commitizen": "^4.2.1",
61 | "vite": "^4.4.7",
62 | "cz-conventional-changelog": "^3.3.0",
63 | "conventional-changelog-cli": "^2.2.2"
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/docs/examples/started/useTable.js:
--------------------------------------------------------------------------------
1 | import { FMessage } from '@fesjs/fes-design';
2 | import { ComponentType, formatByOptions, useTable, genFormatByDate } from '@koala-form/core';
3 | import { defineComponent } from 'vue';
4 |
5 | export default defineComponent({
6 | setup() {
7 | const { render, modelRef } = useTable({
8 | fields: [
9 | {
10 | name: 'name', // 每行数据取值的key
11 | label: '姓名', // 行标题
12 | },
13 | {
14 | name: 'sex',
15 | label: '性别',
16 | options: [
17 | // 枚举映射
18 | { value: '0', label: '女' },
19 | { value: '1', label: '男' },
20 | ],
21 | format: formatByOptions, // 格式化展示值
22 | },
23 | {
24 | name: 'age',
25 | label: '年龄',
26 | },
27 | {
28 | name: 'birthday',
29 | label: '生日',
30 | format: genFormatByDate(),
31 | },
32 | {
33 | label: '操作',
34 | props: { width: 100 },
35 | components: {
36 | name: ComponentType.Button,
37 | children: ['详情'],
38 | props: { type: 'link' },
39 | events: {
40 | onClick: (record, event) => {
41 | // record只有在useTable下才会存在
42 | FMessage.success(record.row.name);
43 | console.log(record, event);
44 | },
45 | },
46 | },
47 | },
48 | ],
49 | });
50 |
51 | modelRef.value = [
52 | { name: '蒙奇·D·路飞', sex: '1', age: 16, birthday: '2022-02-12' },
53 | {
54 | name: '罗罗诺亚·索隆',
55 | sex: '1',
56 | age: 18,
57 | birthday: Date.now() + '',
58 | },
59 | ];
60 | return render;
61 | },
62 | });
63 |
--------------------------------------------------------------------------------
/cypress/component/Utils.cy.tsx:
--------------------------------------------------------------------------------
1 | import { mergeWithStrategy, travelTree, turnArray } from '@koala-form/core';
2 | import { reactive, ref } from 'vue';
3 |
4 | describe('工具方法', () => {
5 | it('turnArray', () => {
6 | expect(turnArray(1)[0]).eq(1);
7 | expect(turnArray([1, 2])[1]).eq(2);
8 | expect(turnArray()[0]).eq(undefined);
9 | });
10 |
11 | it('travelTree', () => {
12 | const root = [
13 | {
14 | name: '1',
15 | children: [
16 | {
17 | name: '2-1',
18 | },
19 | {
20 | name: '2-2',
21 | children: [{ name: '3-1' }],
22 | },
23 | ],
24 | },
25 | ];
26 | const path = ['1', '2-1', '2-2', '3-1'];
27 | const tPath: typeof path = [];
28 | travelTree(root, (node) => {
29 | tPath.push(node.name);
30 | });
31 |
32 | expect(tPath.join(',')).eq(path.join(','));
33 | });
34 |
35 | it('mergeWithStrategy', () => {
36 | const obj: Record = {
37 | id: 1,
38 | children: [1, 2, 3],
39 | address: {
40 | province: '湖南',
41 | city: '长沙',
42 | },
43 | labelRef: 1,
44 | };
45 | const newAddress = reactive({ province: '广东' });
46 | mergeWithStrategy(obj, { id: 2, name: 'aring', children: [11, 22] });
47 | expect(obj.id).eq(2);
48 | expect(obj.name).eq('aring');
49 | expect(obj.children.join()).eq('11,22,3');
50 |
51 | mergeWithStrategy(obj, { children: [4] }, { array: 'concat' });
52 | expect(obj.children.join()).eq('11,22,3,4');
53 |
54 | mergeWithStrategy(obj, { children: [5, 6] }, { array: 'override' });
55 | expect(obj.children.join()).eq('5,6');
56 |
57 | mergeWithStrategy(obj, { address: newAddress, labelRef: ref(2) });
58 |
59 | expect(obj.address.province).eq('广东');
60 | expect(obj.address.city).eq(undefined);
61 | expect(obj.labelRef.value).eq(2);
62 |
63 | newAddress.province = '广西';
64 | expect(obj.address.province).eq('广西');
65 | });
66 | });
67 |
--------------------------------------------------------------------------------
/examples/demo-with-fes/src/.fes/plugin-request/helpers.js:
--------------------------------------------------------------------------------
1 | /**
2 | *判断类型
3 | * @param {*} obj 需要判断的对象
4 | */
5 | export function typeOf(obj) {
6 | const map = {
7 | '[object Boolean]': 'boolean',
8 | '[object Number]': 'number',
9 | '[object String]': 'string',
10 | '[object Function]': 'function',
11 | '[object Array]': 'array',
12 | '[object Date]': 'date',
13 | '[object RegExp]': 'regExp',
14 | '[object Undefined]': 'undefined',
15 | '[object Null]': 'null',
16 | '[object Object]': 'object',
17 | '[object URLSearchParams]': 'URLSearchParams',
18 | };
19 | return map[Object.prototype.toString.call(obj)];
20 | }
21 |
22 | export function isFunction(obj) {
23 | return typeOf(obj) === 'function';
24 | }
25 |
26 | export function isDate(obj) {
27 | return typeOf(obj) === 'date';
28 | }
29 |
30 | export function isString(obj) {
31 | return typeOf(obj) === 'string';
32 | }
33 |
34 | export function isArray(obj) {
35 | return typeOf(obj) === 'array';
36 | }
37 |
38 | export function isObject(obj) {
39 | return typeOf(obj) === 'object';
40 | }
41 |
42 | export function isURLSearchParams(obj) {
43 | return typeOf(obj) === 'URLSearchParams';
44 | }
45 |
46 | export function checkHttpRequestHasBody(method) {
47 | method = method.toUpperCase();
48 | const HTTP_METHOD = {
49 | GET: {
50 | request_body: false,
51 | },
52 | POST: {
53 | request_body: true,
54 | },
55 | PUT: {
56 | request_body: true,
57 | },
58 | DELETE: {
59 | request_body: true,
60 | },
61 | HEAD: {
62 | request_body: false,
63 | },
64 | OPTIONS: {
65 | request_body: false,
66 | },
67 | PATCH: {
68 | request_body: true,
69 | },
70 | };
71 | return HTTP_METHOD[method].request_body;
72 | }
73 |
74 | export function trimObj(obj) {
75 | if (isObject(obj)) {
76 | Object.entries(obj).forEach(([key, value]) => {
77 | if (isString(value)) {
78 | obj[key] = value.trim();
79 | } else if (isObject(value)) {
80 | trimObj(value);
81 | }
82 | });
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/examples/demo-with-vue/src/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | :root {
3 | --vt-c-white: #EEE;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 |
24 | /* semantic color variables for this project */
25 | :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | /* @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | } */
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | font-weight: normal;
59 | }
60 |
61 | body {
62 | min-height: 100vh;
63 | color: var(--color-text);
64 | background: var(--color-background);
65 | transition: color 0.5s, background-color 0.5s;
66 | line-height: 1.6;
67 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
68 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
69 | font-size: 15px;
70 | text-rendering: optimizeLegibility;
71 | -webkit-font-smoothing: antialiased;
72 | -moz-osx-font-smoothing: grayscale;
73 | }
74 |
--------------------------------------------------------------------------------
/docs/zh/guide/scene/useTable.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 3
3 | ---
4 | # useTable
5 |
6 | 表格展示数据，最主要的就是字段定义、行数据操作和数据格式转换
7 |
8 | useTable提供了一些能力，更好的使用表格。
9 |
10 | ```js
11 | const ctx = useTable({
12 | fields: [ // 设置列表头
13 | { name: 'user', label: '用户' },
14 | { name: 'date', label: '时间', format: gen },
15 | { label: '操作', slotName: 'options' }
16 | ]
17 | })
18 |
19 | // 设置数据
20 | ctx.modelRef.value = [
21 | { user: '蒙奇·D·路飞', date: Date.now() }
22 | ];
23 |
24 | ctx.render // 渲染函数
25 |
26 | ```
27 | ## API
28 |
29 | ### 参数
30 |
31 | - ctx：指定上下文
32 | - table：table组件
33 | - fields：table字段定义
34 |
35 | ```js
36 | export interface TableSceneConfig extends SceneConfig {
37 | ctx: TableSceneContext;
38 | table: ComponentDesc;
39 | fields: Field[];
40 | }
41 | ```
42 |
43 | ### 返回
44 |
45 | - ref：列表组件实例引用
46 | - modelRef：列表数据，双向绑定
47 |
48 | ```js
49 | export interface TableSceneContext extends SceneContext {
50 | ref: Ref;
51 | modelRef: Ref>;
52 | }
53 | ```
54 |
55 | ## 更新数据
56 |
57 | ```js
58 | const { modelRef } = useTable({ fields: [] })
59 | modelRef.value = [{user: '111'}, { user: '2222' }]
60 | ```
61 |
62 | ## 修改table属性
63 | ```js
64 | useTable({
65 | table: { props: { rowKey: 'id' } }
66 | fields: []
67 | })
68 |
69 | ```
70 |
71 | ## 修改列属性
72 | 通过Field.props修改列属性，比如固定位置、宽度等
73 | ```js
74 | useTable({
75 | fields: [
76 | { name: 'user', label: '用户', props: { fixed: 'left', width: 150 } },
77 | ]
78 | })
79 | ```
80 |
81 | ## 自定义渲染数据
82 | 通过Field.format
83 | ```js
84 |
85 | useTable({
86 | fields: [
87 | { name: 'user', label: '用户', format: (model, value) => value || '--' },
88 | { name: 'date', label: '时间', format: genFormatByDate() },
89 | { name: 'status', label: '状态', options: [] , format: formatByOptions },
90 | ]
91 | })
92 |
93 | ```
94 | 通过slotName
95 |
96 | ```html
97 |
98 |
99 |
100 | 自定义操作
101 |
102 |
103 |
104 |
105 |
112 | ```
--------------------------------------------------------------------------------
/cypress/component/useCurd.cy.tsx:
--------------------------------------------------------------------------------
1 | import FesdUseCurd from '../../docs/examples/fesdUseCurd.vue';
2 |
3 | describe('FesdUseCurd', () => {
4 | it('渲染成功', () => {
5 | const app = cy.mount(FesdUseCurd);
6 | app.get('.fes-form').should('exist');
7 | });
8 |
9 | it('扩展查询操作：导出、批量按钮存在', () => {
10 | const app = cy.mount(FesdUseCurd);
11 | app.get('.fes-space').contains('导出').should('exist');
12 | app.get('.fes-space').contains('批量').should('exist');
13 | });
14 |
15 | it('表格操作：审核、更新按钮存在', () => {
16 | const app = cy.mount(FesdUseCurd);
17 | app.get('.fes-table').find('.fes-space').contains('审核').should('exist');
18 | app.get('.fes-table').find('.fes-space').contains('更新').should('exist');
19 | });
20 |
21 | it('点击导出按钮', () => {
22 | const app = cy.mount(FesdUseCurd);
23 | app.get('.fes-space').contains('导出').click();
24 | app.log('执行导出操作');
25 | // 检查导出操作成功弹窗
26 | app.get('.fes-message-wrapper').should('have.text', '导出');
27 | });
28 |
29 | it('点击批量按钮-未选择任何记录', () => {
30 | const app = cy.mount(FesdUseCurd);
31 | app.get('.fes-space').contains('批量').click();
32 | app.log('执行批量操作-未选择记录');
33 | // 检查警告弹窗
34 | app.get('.fes-message-wrapper').should('have.text', '至少选择一条记录');
35 | });
36 |
37 | it('点击批量按钮-选择记录', () => {
38 | const app = cy.mount(FesdUseCurd);
39 | app.get('tbody').find('.fes-checkbox').first().click();
40 | app.get('.fes-space').contains('批量').click();
41 | app.log('执行批量操作-选择记录');
42 | // 检查批量操作成功弹窗
43 | app.get('.fes-message-wrapper').should('have.text', '批量操作 ==> ids: 1');
44 | });
45 |
46 | it('点击审核按钮', () => {
47 | const app = cy.mount(FesdUseCurd);
48 | app.get('tbody').contains('审核').first().click();
49 | app.log('执行审核操作');
50 | // 检查审核操作成功弹窗
51 | app.get('.fes-message-wrapper').should('have.text', '审核 ===> 蒙奇·D·路飞');
52 | });
53 |
54 | it('点击更新按钮', () => {
55 | const app = cy.mount(FesdUseCurd);
56 | app.get('.fes-table-row td').eq(3).click();
57 | app.get('.fes-space').contains('更新').should('not.be.disabled').click();
58 | app.log('执行更新操作');
59 | // 检查更新操作成功弹窗
60 | app.get('.fes-modal-header').should('have.text', '用户更新');
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/docs/examples/demos/login.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
欢迎使用Koala Form
4 |
5 |
登录
6 |
7 | 没有账号，去注册
8 | 忘记密码？
9 |
10 |
60 |