feat(element): improve docs & add components (#1821)

packages/element/docs/.vuepress/config.js

@@ -1,4 +1,10 @@
 const path = require('path')
+const utils = require('./util')
+
+const componentFiles = utils
+  .getFiles(path.resolve(__dirname, '../guide'))
+  .map((item) => item.replace(/(\.md)/g, ''))
+  .filter((item) => !['el-form', 'el-form-item', 'index'].includes(item))
 
 module.exports = {
   title: 'Formily Element',
@@ -25,7 +31,7 @@ module.exports = {
     nav: [
       {
         text: '指南',
-        link: '/guide/form',
+        link: '/guide/',
       },
       {
         text: '主站',
@@ -37,29 +43,7 @@ module.exports = {
       },
     ],
     sidebar: {
-      '/guide/': [
-        'form',
-        'form-item',
-        'form-layout',
-        'form-grid',
-        'form-button-group',
-        'array-table',
-        'space',
-        'reset',
-        'submit',
-        'input',
-        'input-number',
-        'password',
-        'select',
-        'cascader',
-        'checkbox',
-        'radio',
-        'switch',
-        'date-picker',
-        'time-picker',
-        'transfer',
-        'upload',
-      ],
+      '/guide/': ['', ...componentFiles],
     },
     lastUpdated: 'Last Updated',
     smoothScroll: true,

packages/element/docs/.vuepress/util.js

@@ -0,0 +1,7 @@
+const fs = require('fs')
+
+module.exports = {
+  getFiles(dir) {
+    return fs.readdirSync(dir)
+  },
+}

packages/element/docs/README.md

@@ -3,7 +3,7 @@ home: true
 heroText: FORMILY ELEMENT
 tagline: 基于 Element UI 封装的Formily2.x组件体系
 actionText: 开发指南
-actionLink: /guide/form
+actionLink: /guide/
 features:
   - title: 更易用
     details: 开箱即用，案例丰富

packages/element/docs/demos/guide/array-cards/effects-json-schema.vue

@@ -0,0 +1,135 @@
+<template>
+  <FormProvider :form="form">
+    <SchemaField :schema="schema" />
+    <Submit @submit="log">提交</Submit>
+  </FormProvider>
+</template>
+
+<script>
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/vue'
+import {
+  FormItem,
+  FormButtonGroup,
+  Submit,
+  Input,
+  ArrayCards,
+  ArrayCardsRemove,
+  ArrayCardsMoveDown,
+  ArrayCardsMoveUp,
+  ArrayCardsAddition,
+  ArrayCardsIndex,
+} from '@formily/element'
+import { Button } from 'element-ui'
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    ArrayCards,
+    ArrayCardsRemove,
+    ArrayCardsMoveDown,
+    ArrayCardsMoveUp,
+    ArrayCardsAddition,
+    ArrayCardsIndex,
+  },
+})
+
+export default {
+  components: {
+    FormProvider,
+    FormButtonGroup,
+    Button,
+    Submit,
+    ...SchemaField,
+  },
+
+  data() {
+    const form = createForm()
+    const schema = {
+      type: 'object',
+      properties: {
+        array: {
+          type: 'array',
+          'x-component': 'ArrayCards',
+          maxItems: 3,
+          title: '对象数组',
+          items: {
+            type: 'object',
+            properties: {
+              index: {
+                type: 'void',
+                'x-component': 'ArrayCardsIndex',
+              },
+              aa: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                title: 'AA',
+                required: true,
+                'x-component': 'Input',
+                description: '输入123',
+              },
+              bb: {
+                type: 'string',
+                title: 'BB',
+                required: true,
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                'x-reactions': [
+                  {
+                    dependencies: ['.aa'],
+                    when: "{{$deps[0] != '123'}}",
+                    fulfill: {
+                      schema: {
+                        title: 'BB',
+                        'x-disabled': true,
+                      },
+                    },
+                    otherwise: {
+                      schema: {
+                        title: 'Changed',
+                        'x-disabled': false,
+                      },
+                    },
+                  },
+                ],
+              },
+              remove: {
+                type: 'void',
+                'x-component': 'ArrayCardsRemove',
+              },
+              moveUp: {
+                type: 'void',
+                'x-component': 'ArrayCardsMoveUp',
+              },
+              moveDown: {
+                type: 'void',
+                'x-component': 'ArrayCardsMoveDown',
+              },
+            },
+          },
+          properties: {
+            addition: {
+              type: 'void',
+              title: '添加条目',
+              'x-component': 'ArrayCardsAddition',
+            },
+          },
+        },
+      },
+    }
+
+    return {
+      form,
+      schema,
+    }
+  },
+  methods: {
+    log(values) {
+      console.log(values)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>