Merge pull request #2 from umijs/master

合并主仓库
KayneWang · Aug 27, 2020 · 44208f0 · 44208f0
2 parents a089790 + fa754e0
commit 44208f0
Show file tree

Hide file tree

Showing 20 changed files with 1,518 additions and 429 deletions.
diff --git a/.fatherrc.js b/.fatherrc.js
@@ -16,6 +16,7 @@ const config = {
     prettier: true,
   },
   pkgs: ['sula','umi-plugin-sula','sula-charts'],
+  extraBabelPlugins,
 };
 
 export default config;
diff --git a/README.md b/README.md
@@ -1,14 +1,17 @@
 简体中文 | [English](https://github.com/umijs/sula/blob/master/README.en-US.md)
 
-# sula (alpha)
+# sula (beta)
 
-> Sula 当前还处于 alpha 社区内测阶段，请不要直接在生产环境使用。
+> Sula 当前还处于 beta 社区内测阶段，请不要直接在生产环境使用。
+
+## 旧文档地址
+
+- https://sula.now.sh/
 
 ## 里程碑
 
-- 7月8日：发布 beta 版本
-- 7月24日：发布可视化搭建平台 sula-builder
 - 7月29日：发布 1.0 正式版
+- 8月20日：发布 Sula Builder 前后端完整版
 
 [![codecov](https://codecov.io/gh/umijs/sula/branch/master/graph/badge.svg)](https://codecov.io/gh/umijs/sula) [![CircleCI](https://circleci.com/gh/umijs/sula/tree/master.svg?style=svg)](https://circleci.com/gh/umijs/sula/tree/master) [![GitHub Actions status](https://github.com/umijs/sula/workflows/Node%20CI/badge.svg)](https://github.com/umijs/sula) ![npm](https://img.shields.io/npm/v/sula) ![npm](https://img.shields.io/npm/dm/sula) ![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)
 
@@ -27,6 +30,10 @@
 - [查询表格快速配置](https://www.bilibili.com/video/BV1qA411q7kb/) 4分钟
 - [Sula-Cooker 的使用](https://www.bilibili.com/video/BV1jz4y197EG/) 3分钟
 
+## 🔥 Sula 可视化搭建平台（尝鲜版）
+
+- [sula-builder](https://build.sula.now.sh)
+
 ## 🍳 Sula 在线配置化工具
 
 仅通过 JSON 配置就可以完成整个项目的「产品级配置」。

diff --git a/docs/basic/mins10.md b/docs/basic/mins10.md
@@ -399,7 +399,7 @@ export default () => {
       method: 'POST',
     },
 +    remoteValues: {
-+      url: 'http://www.mocky.io/v2/5ed7af12320000a0cc274b00',
++      url: 'https://www.mocky.io/v2/5ed7af12320000a0cc274b00',
 +      method: 'get',
 +    },
 +    mode: 'edit'
@@ -468,7 +468,7 @@ export default () => {
       method: 'POST',
     },
     remoteValues: {
-      url: 'http://www.mocky.io/v2/5ed7af12320000a0cc274b00',
+      url: 'https://www.mocky.io/v2/5ed7af12320000a0cc274b00',
       method: 'get'
     },
     mode: 'edit',

diff --git a/docs/sula-api/api.md b/docs/sula-api/api.md
@@ -2,7 +2,7 @@
 group: 
   title: API
   order: 6
-title: 基础API
+title: 配置API
 order: 0
 ---
 # API
@@ -156,8 +156,20 @@ validateGroupFields('groups')
   .catch(error => {})
 ```
 
+#### setFieldsValue
+设置表单的值
+- 参数类型: `({ [key: string]: any; }) => void`
+- 介绍: 用法可参考[antd/setFieldsValue](https://ant-design.gitee.io/components/form-cn/#API)
+- 用法
+```js
+setFieldsValue({
+  name: 'value1',
+  ages: 'value2',
+})
+```
+
 #### setFieldValue
-设置表单项的值
+设置单个表单项的值
 - 参数类型: `(name: NamePath, any) => void`
 - 介绍: setFieldValue执行会触发表单联动
 
@@ -166,6 +178,21 @@ validateGroupFields('groups')
 setFieldValue('name', '首富')
 ```
 
+#### setFields
+设置一组字段状态
+- 参数：`(fields: FieldData[]) => void`
+- 用法
+```js
+setFields([{
+  name: 'name',  // 字段名称
+  validating: false,  // 是否正在校验
+  value: 'value', // 字段对应值
+  // 可以在form实例isFieldValidating中获取
+  touched: true,  // 是否被用户操作过
+  errors: ['please input', 'others'],  // 错误信息
+}])
+```
+
 #### setFieldSource
 设置表单项数据源
 - 参数类型: `(name: NamePath, any) => void`
@@ -233,6 +260,7 @@ const config = {
 表单模式
 - 类型: 支持 `create: 创建模式；view: 查看模式；edit: 编辑模式`
 - 默认: `create`
+- 介绍: mode为 `create` 时不会触发remoteValues方法
 
 ### dependency
 表单关联
@@ -462,6 +490,230 @@ const config = {
 }
 ```
 
+### Field 组件
+表单域
+- 类型: `ReactElement`
+- 属性
+
+|  属性名  | 说明 | 类型 | 默认值 |
+|  ----  | ----  | ---- | - |
+| field | 表单项控件 | `FieldPlugin` | - |
+| name | 字段名(支持数组) | `FieldNamePath` | - |
+| collect | 收集值 | `boolean` | - |
+| initialDisabled | 表单项初始禁用状态 | `boolean` | - |
+| initialVisible | 表单项初始是否显示 | `boolean` | - |
+| initialSource | 表单项初始数据源 | `any` | - |
+| initialValue | 表单项初始值 | `any` | - |
+| remoteSource | 表单项远程数据源 | `RequestConfig` | - |
+| dependency | 配置表单关联 `参考 dependency` | `Dependencies` | - |
+| children | 子组件 | `ReactElement` \| `FieldPlugin[]` | - |
+| layout | 表单布局 | `'horizontal'` \| `'vertical'` \| `'inline'` | - |
+| rules | 校验规则 | `Array<Omit<Rule, 'validator'> & {validator? : ValidatorPlugin;}>` | - |
+| childrenContainer | 表单项容器 | `RenderPlugin` | - |
+
+- 示例
+```js
+import React from 'react';
+import { Form, FieldGroup, Field } from 'sula';
+
+export default () => {
+  const fieldChildren = [{
+    name: 'a',
+    label: 'a',
+    field: 'input',
+  }, {
+    name: 'b',
+    label: 'b',
+    field: 'input',
+  }, {
+    name: 'c',
+    label: 'c',
+    field: 'input',
+  }]
+  return (
+    <Form>
+      <FieldGroup>
+        <Field field="input" name="name" label="name" rules={[{ required: true, message: 'Please input' }]} />
+        <Field label="aa">
+          <div>view</div>
+        </Field>
+        <Field label="bb">
+          <>
+            <Field field="input" name="h" label="h" />
+            <Field field="input" name="f" label="f" />
+            <Field field="input" name="j" label="j" />
+          </>
+        </Field>
+        <Field label="cc" childrenContainer={{ type: 'card', props: { title: 'card' } }}>
+          {fieldChildren}
+        </Field>
+      </FieldGroup>
+    </Form>
+  )
+}
+```
+
+### FormAction 组件
+表单操作组
+- 类型: `ReactElement`
+- 属性
+
+|  属性名  | 说明 | 类型 | 默认值 |
+|  ----  | ----  | ---- | - |
+| actionsPosition | 底部操作位置 | `'default'` \| `'bottom'` \| `'right'` \| `'center'` | `'default'` |
+| actionsRender | 操作组配置 | `RenderPlugin` \| `RenderPlugin[]` | - |
+| children | 子组件 | `ReactElement` | - |
+
+- 示例
+```js
+import React from 'react';
+import { Form, FieldGroup, FormAction } from 'sula';
+
+export default () => {
+  const fields = [{
+    name: 'name',
+    label: 'name',
+    field: 'input',
+  }, {
+    name: 'age',
+    label: 'age',
+    field: 'input'
+  }]
+  return (
+    <Form>
+      <FieldGroup fields={fields} />
+      <FieldGroup>
+        {/* 属性配置 */}
+        <FormAction
+          actionsPosition="bottom"
+          actionsRender={[{
+            type: 'button',
+            props: {
+              type: 'primary',
+              children: 'submit'
+            },
+            action: [
+              'validateFields',
+              {
+                type: 'request',
+                url: 'https://www.mocky.io/v2/5ed7a8b63200001ad9274ab5',
+                method: 'post',
+                convertParams: ({ result }) => result
+              }
+            ]
+          }]}
+        />
+        {/* children */}
+        {/*
+          <FormAction>
+            <Button type='primary'>提交</Button>
+          </FormAction>
+        */}
+      </FieldGroup>
+    </Form>
+  )
+}
+```
+
+### FieldGroup 组件
+表单控件配置化管理组件
+- 类型: `ReactElement`
+- 属性
+
+|  属性名  | 说明 | 类型 | 默认值 |
+|  ----  | ----  | ---- | - |
+| name | 分组值 | `string` | - |
+| layout | 表单布局	 | `'horizontal'` \| `'vertical'` \| `'inline'` | - |
+| itemLayout | 表单项布局分布 | `{ cols?: number, span?: number, offset?: 'number', gutter?: number, wrapper?: ColProps` \| `undefined, labelCoL?: ColProps` \| `undefined  }` | - |
+| initialVisible | 表单控件组初始是否显示 | `boolean` | `true` |
+| children | 子组件 | `ReactElement` | - |
+| fields | 表单控件配置 | `Array<Field>` | - |
+| dependency | 配置表单关联 `参考dependency` | `object` | - |
+| container | 容器 `参考container插件` | `RenderPlugin` | - |
+| actionsRender | 操作组配置 | `RenderPlugin` \| `RenderPlugin[]` | - |
+| actionsPosition | 底部操作位置 | `'center'` \| `'right'` \| `'bottom'` | - |
+
+- 注意
+  - `fields` 和 `children` 不能同时生效，设置 `fields` 且不为空，`fields` 生效；否则 `children` 生效；
+  - `FieldGroup` 组件外层须包裹Form(sula暴露的Form)
+
+- 示例
+```js
+import React from 'react';
+import { Form, FieldGroup, Field, FormAction } from 'sula';
+
+export default () => {
+  const fields = [{
+    name: 'name',
+    label: 'name',
+    field: 'input',
+  }, {
+    name: 'age',
+    label: 'age',
+    field: 'input'
+  }]
+  return (
+    <Form>
+      {/* fields配置 */}
+      <FieldGroup fields={fields} />
+      {/* children */}
+      <FieldGroup>
+        <Field field="input" name="others" label="others" />
+      </FieldGroup>
+      {/* 底部事件组 */}
+      <FieldGroup>
+        <FormAction
+          actionsRender={[{
+            type: 'button',
+            props: {
+              type: 'primary',
+              children: 'submit'
+            },
+            action: [
+              'validateFields',
+              {
+                type: 'request',
+                url: 'https://www.mocky.io/v2/5ed7a8b63200001ad9274ab5',
+                method: 'post',
+                convertParams: ({ result }) => result
+              }
+            ]
+          }]}
+        />
+      </FieldGroup>
+    </Form>
+  )
+}
+```
+
+### MediaQueries组件
+媒体查询组件
+- 介绍：示例中的`matches`会根据浏览器窗口变化而变化，实现媒体查询；规则如下
+
+| 浏览器窗口`width` | matches |
+|  ----  | ----  |
+| width >= 1600 | `'xxl'` |
+| 1600 > width >= 1200 | `'xl'` |
+| 1200 > width >= 992 | `'lg'` |
+| 992 > width >= 768 | `'md'` |
+| 768 > width >= 576 | `'sm'` |
+| 576 > width | `'xs'` |
+
+- 示例
+```js
+import { MediaQueries } from 'sula';
+
+export default () => {
+  return (
+    <MediaQueries>
+      {(matches) => <span>{matches}</span>}
+    </MediaQueries>
+  )
+}
+
+```
+
+
 ## Table
 
 ### ctx