feat(element): add FormCollapse component (#2119)

alibaba · Sep 7, 2021 · 48ed7b0 · 48ed7b0
1 parent 54072a6
commit 48ed7b0
Show file tree

Hide file tree

Showing 18 changed files with 599 additions and 31 deletions.
diff --git a/packages/element/docs/demos/guide/form-collapse/json-schema.vue b/packages/element/docs/demos/guide/form-collapse/json-schema.vue
@@ -0,0 +1,148 @@
+<template>
+  <FormProvider :form="form">
+    <FormLayout :label-col="6" :wrapper-col="10">
+      <SchemaField :schema="schema" :scope="{ formCollapse }" />
+      <FormButtonGroup alignFormItem>
+        <Button
+          @click="
+            () => {
+              form.query('tab3').take((field) => {
+                field.visible = !field.visible
+              })
+            }
+          "
+        >
+          显示/隐藏最后一个Tab
+        </Button>
+        <Button
+          @click="
+            () => {
+              formCollapse.toggleActiveKey('tab2')
+            }
+          "
+        >
+          切换第二个Tab
+        </Button>
+        <Submit @submit="log">提交</Submit>
+      </FormButtonGroup>
+    </FormLayout>
+  </FormProvider>
+</template>
+
+<script>
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/vue'
+import {
+  FormItem,
+  FormCollapse,
+  FormButtonGroup,
+  Form,
+  FormLayout,
+  Submit,
+  Input,
+} from '@formily/element'
+import { Button } from 'element-ui'
+
+const { SchemaField } = createSchemaField({
+  components: {
+    FormItem,
+    FormCollapse,
+    Input,
+  },
+})
+
+const schema = {
+  type: 'object',
+  properties: {
+    collapse: {
+      type: 'void',
+      title: '折叠面板',
+      'x-decorator': 'FormItem',
+      'x-component': 'FormCollapse',
+      'x-component-props': {
+        formCollapse: '{{formCollapse}}',
+      },
+      properties: {
+        tab1: {
+          type: 'void',
+          'x-component': 'FormCollapse.Item',
+          'x-component-props': {
+            title: 'A1',
+          },
+          properties: {
+            aaa: {
+              type: 'string',
+              title: 'AAA',
+              'x-decorator': 'FormItem',
+              required: true,
+              'x-component': 'Input',
+            },
+          },
+        },
+        tab2: {
+          type: 'void',
+          'x-component': 'FormCollapse.Item',
+          'x-component-props': {
+            title: 'A2',
+          },
+          properties: {
+            bbb: {
+              type: 'string',
+              title: 'BBB',
+              'x-decorator': 'FormItem',
+              required: true,
+              'x-component': 'Input',
+            },
+          },
+        },
+        tab3: {
+          type: 'void',
+          'x-component': 'FormCollapse.Item',
+          'x-component-props': {
+            title: 'A3',
+          },
+          properties: {
+            ccc: {
+              type: 'string',
+              title: 'CCC',
+              'x-decorator': 'FormItem',
+              required: true,
+              'x-component': 'Input',
+            },
+          },
+        },
+      },
+    },
+  },
+}
+
+export default {
+  components: {
+    Form,
+    FormButtonGroup,
+    Button,
+    Submit,
+    SchemaField,
+    FormProvider,
+    FormLayout,
+  },
+
+  data() {
+    const form = createForm()
+    const formCollapse = FormCollapse.createFormCollapse()
+
+    return {
+      schema,
+      form,
+      formCollapse,
+    }
+  },
+  methods: {
+    log(values) {
+      console.log(values)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/packages/element/docs/demos/guide/form-collapse/markup-schema.vue b/packages/element/docs/demos/guide/form-collapse/markup-schema.vue
@@ -0,0 +1,126 @@
+<template>
+  <Form :form="form" :label-col="6" :wrapper-col="10">
+    <SchemaField>
+      <SchemaVoidField
+        type="void"
+        title="折叠面板"
+        x-decorator="FormItem"
+        x-component="FormCollapse"
+        :x-component-props="{ formCollapse }"
+      >
+        <SchemaVoidField
+          type="void"
+          name="tab1"
+          x-component="FormCollapse.Item"
+          :x-component-props="{ title: 'A1' }"
+        >
+          <SchemaStringField
+            name="aaa"
+            x-decorator="FormItem"
+            title="AAA"
+            required
+            x-component="Input"
+          />
+        </SchemaVoidField>
+        <SchemaVoidField
+          name="tab2"
+          x-component="FormCollapse.Item"
+          :x-component-props="{ title: 'A2' }"
+        >
+          <SchemaStringField
+            name="bbb"
+            x-decorator="FormItem"
+            title="BBB"
+            required
+            x-component="Input"
+          />
+        </SchemaVoidField>
+        <SchemaVoidField
+          name="tab3"
+          x-component="FormCollapse.Item"
+          :x-component-props="{ title: 'A3' }"
+        >
+          <SchemaStringField
+            name="ccc"
+            x-decorator="FormItem"
+            title="CCC"
+            required
+            x-component="Input"
+          />
+        </SchemaVoidField>
+      </SchemaVoidField>
+    </SchemaField>
+    <FormButtonGroup alignFormItem>
+      <Button
+        @click="
+          () => {
+            form.query('tab3').take((field) => {
+              field.visible = !field.visible
+            })
+          }
+        "
+      >
+        显示/隐藏最后一个Tab
+      </Button>
+      <Button
+        @click="
+          () => {
+            formCollapse.toggleActiveKey('tab2')
+          }
+        "
+      >
+        切换第二个Tab
+      </Button>
+      <Submit @submit="log">提交</Submit>
+    </FormButtonGroup>
+  </Form>
+</template>
+
+<script>
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/vue'
+import {
+  FormItem,
+  FormCollapse,
+  FormButtonGroup,
+  Submit,
+  Input,
+  Form,
+} from '@formily/element'
+import { Button } from 'element-ui'
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    FormCollapse,
+    Input,
+  },
+})
+
+export default {
+  components: {
+    Form,
+    FormButtonGroup,
+    Button,
+    Submit,
+    ...SchemaField,
+  },
+
+  data() {
+    const form = createForm()
+    const formCollapse = FormCollapse.createFormCollapse()
+
+    return {
+      form,
+      formCollapse,
+    }
+  },
+  methods: {
+    log(values) {
+      console.log(values)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/packages/element/docs/guide/form-collapse.md b/packages/element/docs/guide/form-collapse.md
@@ -0,0 +1,53 @@
+# FormCollapse
+
+> 折叠面板，通常用在布局空间要求较高的表单场景
+>
+> 注意：只能用在 Schema 场景
+
+## Markup Schema 案例
+
+<dumi-previewer demoPath="guide/form-collapse/markup-schema" />
+
+## JSON Schema 案例
+
+<dumi-previewer demoPath="guide/form-collapse/json-schema" />
+
+## API
+
+### FormCollapse
+
+| 属性名       | 类型          | 描述                                                       | 默认值 |
+| ------------ | ------------- | ---------------------------------------------------------- | ------ |
+| formCollapse | IFormCollapse | 传入通过 createFormCollapse/useFormCollapse 创建出来的模型 |        |
+
+其余参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
+
+### FormCollapse.Item
+
+参考 [https://element.eleme.io/#/zh-CN/component/collapse](https://element.eleme.io/#/zh-CN/component/collapse)
+
+### FormCollapse.createFormCollapse
+
+```ts pure
+type ActiveKey = string | number
+type ActiveKeys = string | number | Array<string | number>
+
+interface createFormCollapse {
+  (defaultActiveKeys?: ActiveKeys): IFormCollpase
+}
+
+interface IFormCollapse {
+  //激活主键列表
+  activeKeys: ActiveKeys
+  //是否存在该激活主键
+  hasActiveKey(key: ActiveKey): boolean
+  //设置激活主键列表
+  setActiveKeys(keys: ActiveKeys): void
+  //添加激活主键
+  addActiveKey(key: ActiveKey): void
+  //删除激活主键
+  removeActiveKey(key: ActiveKey): void
+  //开关切换激活主键
+  toggleActiveKey(key: ActiveKey): void
+}
+```
diff --git a/packages/element/src/__builtins__/index.ts b/packages/element/src/__builtins__/index.ts
@@ -0,0 +1,2 @@
+export * from './configs'
+export * from './shared'
diff --git a/packages/element/src/array-base/index.ts b/packages/element/src/array-base/index.ts
@@ -201,10 +201,12 @@ const ArrayBaseIndex = defineComponent({
   name: 'ArrayBaseIndex',
   setup(props, { attrs }) {
     const index = useIndex()
+    const prefixCls = `${stylePrefix}-array-base`
     return () => {
       return h(
         'span',
         {
+          class: `${prefixCls}-index`,
           attrs,
         },
         {

diff --git a/packages/element/src/array-collapse/style.scss b/packages/element/src/array-collapse/style.scss
@@ -17,6 +17,7 @@ $array-table-prefix-cls: '#{$formily-prefix}-array-collapse';
 
   .#{$array-table-prefix-cls}-errors-badge {
     line-height: 1;
+    vertical-align: initial;
   }
 
   .#{$formily-prefix}-array-base-addition {

diff --git a/packages/element/src/array-table/index.ts b/packages/element/src/array-table/index.ts
@@ -230,7 +230,7 @@ const StatusSelect = observer(
       options: Array,
       pageSize: Number,
     },
-    setup(props, { attrs }) {
+    setup(props) {
       const formRef = useForm()
       const fieldRef = useField<ArrayField>()
       const prefixCls = `${stylePrefix}-array-table`

diff --git a/packages/element/src/array-tabs/style.scss b/packages/element/src/array-tabs/style.scss
@@ -11,5 +11,6 @@ $array-table-prefix-cls: '#{$formily-prefix}-array-tabs';
 
   .#{$array-table-prefix-cls}-errors-badge {
     line-height: 1;
+    vertical-align: initial;
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './configs'
		export * from './shared'