feat(vue): improve typings and docs(#1433)

* fix(vue): 修复@formily/vue部分组件类型推断不正确的问题

* fix(vue): 修复文档报错问题

* feat(vue): support events & slots

* feat(vue): add Q&A docs

* feat(vue): fix case error of file name

* feat(vue): optimize fragment rendering

* fix(vue): fix yarn registry error

* feat(vue): update schema field

.eslintignore

@@ -8,3 +8,4 @@ website
 gh-pages
 weex
 build.ts
+docs

package.json

@@ -66,14 +66,6 @@
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.8.2",
     "@umijs/plugin-sass": "^1.1.1",
-    "@vue/composition-api": "^1.0.0-rc.7",
-    "@vue/test-utils": "^1.1.3",
-    "@vuedx/typescript-plugin-vue": "^0.4.1",
-    "@vuepress-dumi/vuepress-plugin-dumi-previewer": "0.3.3",
-    "@vuepress-dumi/vuepress-theme-dumi": "0.3.3",
-    "@vuepress/plugin-back-to-top": "^1.8.2",
-    "@vuepress/plugin-medium-zoom": "^1.8.2",
-    "ant-design-vue": "^1.7.3",
     "antd": "^4.0.0",
     "chalk": "^2.4.2",
     "chokidar": "^2.1.2",
@@ -145,13 +137,7 @@
     "ts-loader": "^7.0.4",
     "ts-node": "^9.1.1",
     "typescript": "4.1.5",
-    "vue": "^2.6.12",
-    "vue-demi": "^0.7.5",
     "vue-eslint-parser": "^7.1.1",
-    "vue-frag": "^1.1.4",
-    "vue-template-compiler": "^2.6.12",
-    "vuepress": "^1.8.2",
-    "vuepress-plugin-typescript": "^0.3.1",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1"

packages/reactive-vue/package.json

@@ -21,31 +21,29 @@
     "npm": ">=3.0.0"
   },
   "scripts": {
-    "start": "vuepress dev docs",
-    "switch:vue3": "vue-demi-switch 3 vue3",
-    "switch:vue2": "vue-demi-switch 2 vue",
-    "build": "npm run switch:vue3 && rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && npm run switch:vue2",
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd",
     "build:cjs": "tsc --declaration",
     "build:esm": "tsc --declaration --module es2015 --outDir esm",
-    "build:umd": "rollup --config",
-    "build:docs": "vuepress build docs"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.0 || >=3.0.0-rc.0"
+    "build:umd": "rollup --config"
   },
   "devDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.7",
     "@vue/test-utils": "1.0.0-beta.22",
-    "@vuepress-dumi/vuepress-plugin-dumi-previewer": "0.3.3",
-    "@vuepress-dumi/vuepress-theme-dumi": "0.3.3",
-    "@vuepress/plugin-back-to-top": "^1.8.2",
-    "@vuepress/plugin-medium-zoom": "^1.8.2",
     "core-js": "^2.4.0",
-    "vue3": "npm:vue@3",
-    "vuepress": "^1.8.2"
+    "vue": "^2.6.12"
   },
   "dependencies": {
     "@formily/reactive": "2.0.0-beta.48",
-    "vue-demi": "^0.7.5"
+    "vue-demi": "^0.9.0"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-beta.1",
+    "vue": "^2.6.0 || >=3.0.0-rc.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"

packages/reactive-vue/src/observer/index.ts

@@ -1,17 +1,16 @@
-import { isVue2, defineComponent } from 'vue-demi'
+import { isVue2 } from 'vue-demi'
 import { observer as observerV2 } from './observerInVue2'
 import { observer as observerV3 } from './observerInVue3'
 import collectData from './collectData'
 import { IObserverOptions } from '../types'
 
-// There's no type that is compatible with vue2 & vue3 currently.
-export function observer<P extends object = {}>(baseComponent: any,
+export function observer<C>(baseComponent: C,
   options?: IObserverOptions & { forwardRef: true }
-) {
+): C {
   if (isVue2) {
-    return defineComponent<P>(observerV2(baseComponent, options))
+    return observerV2(baseComponent, options)
   } else {
-    return defineComponent<P>(observerV3(baseComponent, options))
+    return observerV3(baseComponent, options)
   }
 }
 

packages/vue/README.md

@@ -8,240 +8,3 @@ Or
 
 vue>=3.0.0-rc.0
 
-### Quick Start
-
-```html
-<template>
-  <FormProvider :form="form" class="demo">
-    <Field
-      name="bb"
-      required
-      description="122333"
-      title="BB"
-      validator="url"
-      :decorator="[FormItem,{tooltips:'xxx',labelCol:{span:3}}]"
-      :component="[Input,{placeholder:'xxx'}]"
-    />
-    <Field
-      name="kk"
-      title="KK"
-      required
-      :decorator="[FormItem,{tooltips:'xxx',labelCol:{span:3}}]"
-      :component="[Input]"
-    />
-    <Field
-      name="aa"
-      title="AA"
-      :decorator="[FormItem,{tooltips:'xxx',labelCol:{span:3}}]"
-    >
-      <ArrayField
-        name="cc"
-        title="CC"
-        :decorator="[FormItem,{tooltips:'xxx',labelCol:{span:3}}]"
-      >
-        <template #default="{ field }">
-          <div>
-            <div v-for="(item, index) in field.value || []" :key="item.id">
-              <Field :name="`${index}.dd`" required :component="[Input]" />
-              <Field :name="`${index}.ee`" :component="[Input]" />
-              <button
-                @click="() => {
-                  field.moveUp(index)
-                }"
-              >
-                上移
-              </button>
-              <button
-                @click="() => {
-                  field.moveDown(index)
-                }"
-              >
-                下移
-              </button>
-              <button
-                @click="e => {
-                  e.preventDefault()
-                  field.remove(index)
-                }"
-              >
-                移除
-              </button>
-            </div>
-            <button
-              @click="e => {
-                e.preventDefault()
-                field.push({ id: new Date().getTime() })
-              }"
-            >
-              添加
-            </button>
-          </div>
-        </template>
-      </ArrayField>
-      <ObjectField
-        title="XX"
-        :decorator="[FormItem,{tooltips:'xxx',labelCol:{span:3}}]"
-        name="xx"
-      >
-        <template #default="{ field }">
-          <div>
-            <div v-for="(value, key) in field.value || []" :key="key">
-              <Field :name="`${key}.yy`" required :component="[Input]" />
-              <Field :name="`${key}.zz`" :component="[Input]" />
-              <button
-                @click="e => {
-                  e.preventDefault()
-                  field.removeProperty(key)
-                }"
-              >
-                移除
-              </button>
-            </div>
-            <button
-              @click="e => {
-                e.preventDefault()
-                field.addProperty(new Date().getTime(), {})
-              }"
-            >
-              添加
-            </button>
-          </div>
-        </template>
-      </ObjectField>
-    </Field>
-    <FormConsumer>
-      <template #default="{ form }">
-        {{ JSON.stringify(form.query('aa').get().value) }}
-      </template>
-    </FormConsumer>
-    <FormConsumer>
-      <template #default="{ form }">
-        {{ form.errors.length > 0 ? JSON.stringify(form.errors) : '' }}
-      </template>
-    </FormConsumer>
-    <button
-      @click="() => {
-        form.submit(log)
-      }"
-    >
-      提交
-    </button>
-    <button
-      @click="() => {
-        form.setPattern('editable')
-      }"
-    >
-      编辑
-    </button>
-    <button
-      @click="() => {
-        form.setPattern('disabled')
-      }"
-    >
-      禁用
-    </button>
-  </FormProvider>
-</template>
-
-<script>
-  import { Form, Input, Select, Card, Button } from 'ant-design-vue'
-  import {
-    createForm,
-    FormProvider,
-    FormConsumer,
-    Field,
-    ArrayField,
-    ObjectField,
-    onFieldReact,
-    connect,
-    mapProps,
-    isVoidField,
-  } from '@formily/vue'
-
-  const FormItem = connect(
-    Form.Item,
-    mapProps(
-      { extract: 'validateStatus' },
-      { extract: 'title', to: 'label' },
-      (props, field) => {
-        if (isVoidField(field)) return props
-        if (field.invalid) {
-          return {
-            help: field.errors.reduce(
-              (msg, info) => msg.concat(info.messages),
-              []
-            ),
-          }
-        } else {
-          return {
-            help: field.description,
-          }
-        }
-      }
-    )
-  )
-
-  export default {
-    name: 'demo',
-    components: {
-      FormProvider,
-      FormConsumer,
-      Field,
-      ArrayField,
-      ObjectField,
-      Button,
-    },
-    data() {
-      const form = createForm({
-        pattern: 'disabled',
-        values: {
-          bb: '123',
-          aa: {
-            cc: [
-              {
-                ee: '12',
-              },
-            ],
-          },
-        },
-        effects: () => {
-          onFieldReact('kk', (field, form) => {
-            field.setDisplay(form.values.bb === '321' ? 'visible' : 'none')
-          })
-          onFieldReact('aa.cc.*.dd', (field) => {
-            const value = field.query('.ee').get((field) => field.value)
-            field.setPattern(value === '123' ? 'disabled' : 'editable')
-          })
-        },
-      })
-      return {
-        form,
-        FormItem,
-        Input,
-        Select,
-        Card,
-      }
-    },
-    methods: {
-      log(...v) {
-        console.log(...v)
-      },
-    },
-  }
-</script>
-
-<style>
-  .demo {
-    width: 600px;
-    padding: 16px;
-    margin: 200px auto;
-    border: 1px solid #ccc;
-    word-break: break-all;
-    border-radius: 3px;
-  }
-
-  .ant-btn + .ant-btn {
-    margin-left: 8px;
-  }
-</style>
-```