refactor(element): redesign form-grid and improve form-layout (#2337)

* refactor(element): redesign form-grid and improve form-layout * fix(gird): fix element type
alibaba · Oct 21, 2021 · 9e468fa · 9e468fa
1 parent 506eb12
commit 9e468fa
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 425 deletions.
diff --git a/packages/element/docs/demos/guide/form-grid/native.vue b/packages/element/docs/demos/guide/form-grid/native.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>maxColumns 3 + minColumns 2</p>
-    <FormGrid :maxColumns="3" :minColumns="2">
+    <FormGrid :maxColumns="3" :minColumns="2" :columnGap="4">
       <FormGridColumn :gridSpan="4">
         <Cell>1</Cell>
       </FormGridColumn>
@@ -22,7 +22,7 @@
       </FormGridColumn>
     </FormGrid>
     <p>maxColumns 3</p>
-    <FormGrid :maxColumns="3">
+    <FormGrid :maxColumns="3" :columnGap="4">
       <FormGridColumn :gridSpan="2">
         <Cell>1</Cell>
       </FormGridColumn>
@@ -43,7 +43,7 @@
       </FormGridColumn>
     </FormGrid>
     <p>minColumns 2</p>
-    <FormGrid :minColumns="2">
+    <FormGrid :minColumns="2" :columnGap="4">
       <FormGridColumn :gridSpan="2">
         <Cell>1</Cell>
       </FormGridColumn>
@@ -64,7 +64,7 @@
       </FormGridColumn>
     </FormGrid>
     <p>Null</p>
-    <FormGrid>
+    <FormGrid :columnGap="4">
       <FormGridColumn :gridSpan="2">
         <Cell>1</Cell>
       </FormGridColumn>
@@ -85,7 +85,7 @@
       </FormGridColumn>
     </FormGrid>
     <p>minWidth 150 +maxColumns 3</p>
-    <FormGrid :minWidth="150" :maxColumns="3">
+    <FormGrid :minWidth="150" :maxColumns="3" :columnGap="4">
       <FormGridColumn :gridSpan="2">
         <Cell>1</Cell>
       </FormGridColumn>
@@ -106,7 +106,7 @@
       </FormGridColumn>
     </FormGrid>
     <p>maxWidth 120+minColumns 2</p>
-    <FormGrid :maxWidth="120" :minColumns="2">
+    <FormGrid :maxWidth="120" :minColumns="2" :columnGap="4">
       <FormGridColumn :gridSpan="2">
         <Cell>1</Cell>
       </FormGridColumn>
@@ -126,6 +126,18 @@
         <Cell>6</Cell>
       </FormGridColumn>
     </FormGrid>
+    <p>maxWidth 120 + gridSpan -1</p>
+    <FormGrid :maxWidth="120" :columnGap="4">
+      <FormGridColumn :gridSpan="2">
+        <Cell>1</Cell>
+      </FormGridColumn>
+      <FormGridColumn>
+        <Cell>2</Cell>
+      </FormGridColumn>
+      <FormGridColumn :gridSpan="-1">
+        <Cell>3</Cell>
+      </FormGridColumn>
+    </FormGrid>
   </div>
 </template>
 
@@ -141,7 +153,7 @@ const Cell = {
         style: {
           backgroundColor: '#AAA',
           color: '#FFF',
-          height: 30,
+          height: '30px',
           display: 'flex',
           alignItems: 'center',
           padding: '0 10px',

diff --git a/packages/element/docs/guide/form-grid.md b/packages/element/docs/guide/form-grid.md
@@ -18,16 +18,16 @@
 
 ### FormGrid
 
-| 属性名      | 类型     | 描述         | 默认值            |
-| ----------- | -------- | ------------ | ----------------- | --- |
-| minWidth    | `number  | number[]`    | 元素最小宽度      | 100 |
-| maxWidth    | `number  | number[]`    | 元素最大宽度      | -   |
-| minColumns  | `number  | number[]`    | 最小列数          | 0   |
-| maxColumns  | `number  | number[]`    | 最大列数          | -   |
-| breakpoints | number[] | 容器尺寸断点 | `[720,1280,1920]` |
-| columnGap   | number   | 列间距       | 10                |
-| rowGap      | number   | 行间距       | 5                 |
-| colWrap     | boolean  | 自动换行     | true              |
+| 属性名      | 类型                | 描述         | 默认值            |
+| ----------- | ------------------- | ------------ | ----------------- |
+| minWidth    | `number / number[]` | 元素最小宽度 | 100               |
+| maxWidth    | `number / number[]` | 元素最大宽度 | -                 |
+| minColumns  | `number / number[]` | 最小列数     | 0                 |
+| maxColumns  | `number / number[]` | 最大列数     | -                 |
+| breakpoints | number[]            | 容器尺寸断点 | `[720,1280,1920]` |
+| columnGap   | number              | 列间距       | 8                 |
+| rowGap      | number              | 行间距       | 4                 |
+| colWrap     | boolean             | 自动换行     | true              |
 
 注意：
 
@@ -37,9 +37,9 @@
 
 ### FormGrid.GridColumn
 
-| 属性名   | 类型   | 描述         | 默认值 |
-| -------- | ------ | ------------ | ------ |
-| gridSpan | number | 元素所跨列数 | 1      |
+| 属性名   | 类型   | 描述                                                 | 默认值 |
+| -------- | ------ | ---------------------------------------------------- | ------ |
+| gridSpan | number | 元素所跨列数，如果为-1，那么会自动反向跨列填补单元格 | 1      |
 
 ### FormGrid.useGridSpan
 

diff --git a/packages/element/docs/guide/form-layout.md b/packages/element/docs/guide/form-layout.md
@@ -33,6 +33,11 @@
 | size           | `'small'             | 'default'               | 'large'`       | 组件尺寸 | default    |
 | layout         | `'vertical'          | 'horizontal'            | 'inline'`      | 布局模式 | horizontal |
 | direction      | `'rtl'               | 'ltr'`                  | 方向(暂不支持) | ltr      |
+| inset          | boolean              | 内联布局                | false          |
 | shallow        | boolean              | 上下文浅层传递          | true           |
 | feedbackLayout | `'loose'             | 'terse'                 | 'popover'      | 'none'`  | 反馈布局   | true |
 | tooltipLayout  | `'icon'` \| `'text'` | 问提示布局              | `"icon"`       |
+| bordered       | boolean              | 是否有边框              | true           |
+| gridColumnGap  | number               | 网格布局列间距          | 8              |
+| gridRowGap     | number               | 网格布局行间距          | 4              |
+| spaceGap       | number               | 弹性间距                | 8              |
diff --git a/packages/element/package.json b/packages/element/package.json
@@ -52,6 +52,7 @@
     "@formily/reactive-vue": "2.0.0-rc.15",
     "@formily/shared": "2.0.0-rc.15",
     "@formily/vue": "2.0.0-rc.15",
+    "@formily/grid": "2.0.0-rc.15",
     "portal-vue": "^2.1.7",
     "vue-slicksort": "^1.2.0"
   },