feat(vue): add components prop for schema-field (#1686)

* feat(vue): add components prop for schema-field * feat(vue): update types * feat(vue): support object style of component "style" * feat(vue): add test cases for x-content
alibaba · Jun 29, 2021 · e9dec48 · e9dec48
1 parent dbb2258
commit e9dec48
Show file tree

Hide file tree

Showing 26 changed files with 501 additions and 230 deletions.
diff --git a/packages/vue/docs/api/shared/schema.md b/packages/vue/docs/api/shared/schema.md
@@ -461,7 +461,7 @@ Schema.registerVoidComponents(['card', 'tab', 'step'])
 ```
 
 <Alert type="warning">
-  注意，该 api 需要配合 <code>enablePolyfills(['1.0'])</code> 使用
+  <p>注意，该 api 需要配合 <code>enablePolyfills(['1.0'])</code> 使用</p>
 </Alert>
 
 ### registerTypeDefaultComponents

diff --git a/packages/vue/docs/demos/api/shared/observer.vue b/packages/vue/docs/demos/api/shared/observer.vue
@@ -15,34 +15,37 @@
 <script>
 import { defineComponent, h } from '@vue/composition-api'
 import { createForm } from '@formily/core'
-import { FormProvider, Field, useForm, observer } from '@formily/vue'
+import { FormProvider, Field, useForm } from '@formily/vue'
+import { observer } from '@formily/reactive-vue'
 import { Input, Space } from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 
-const FormPreviewer = observer(defineComponent({
-  name: 'FormPreviewer',
-  setup() {
-    const formRef = useForm()
-    return () => {
-      const form = formRef.value
-      return h('div', [JSON.stringify(form.values)])
-    }
-  }
-}))
+const FormPreviewer = observer(
+  defineComponent({
+    name: 'FormPreviewer',
+    setup() {
+      const formRef = useForm()
+      return () => {
+        const form = formRef.value
+        return h('div', [JSON.stringify(form.values)])
+      }
+    },
+  })
+)
 
 export default {
   components: {
     FormProvider,
     Field,
     FormPreviewer,
-    Space
+    Space,
   },
   data() {
     const form = createForm({ validateFirst: true })
     return {
       Input,
-      form
+      form,
     }
-  }
+  },
 }
 </script>
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -42,6 +42,7 @@
     "@formily/shared": "2.0.0-beta.72",
     "@formily/validator": "2.0.0-beta.72",
     "@type-helper/vue3": "npm:vue@3",
+    "@type-helper/vue2": "npm:vue@2",
     "vue-demi": "^0.9.0",
     "vue-frag": "^1.1.4"
   },

diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts
@@ -2,18 +2,14 @@ import Vue, { FunctionalComponentOptions } from 'vue'
 import { render, fireEvent, waitFor } from '@testing-library/vue'
 import { defineComponent, h } from '@vue/composition-api'
 import { createForm } from '@formily/core'
+import { useField, useFormEffects, connect, mapProps, mapReadPretty } from '../'
 import {
   FormProvider,
   ArrayField,
   ObjectField,
   VoidField,
   Field,
-  useField,
-  useFormEffects,
-  connect,
-  mapProps,
-  mapReadPretty,
-} from '../'
+} from '../vue2-components'
 import ReactiveField from '../components/ReactiveField'
 // import { expectThrowError } from './shared'
 import { isField, isVoidField, onFieldChange } from '@formily/core'
@@ -23,7 +19,7 @@ Vue.component('ArrayField', ArrayField)
 Vue.component('ObjectField', ObjectField)
 Vue.component('VoidField', VoidField)
 Vue.component('Field', Field)
-Vue.component('ReactiveField', ReactiveField)
+Vue.component('ReactiveField', ReactiveField as unknown as Vue)
 
 const Decorator: FunctionalComponentOptions = {
   functional: true,

diff --git a/packages/vue/src/__tests__/form.spec.ts b/packages/vue/src/__tests__/form.spec.ts
@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import { render } from '@testing-library/vue'
 import { createForm } from '@formily/core'
-import { FormProvider } from '../'
-import { FormConsumer } from '../components'
+import { FormProvider, FormConsumer } from '../vue2-components'
 
 Vue.component('FormProvider', FormProvider)
 Vue.component('FormConsumer', FormConsumer)

diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts
@@ -1,8 +1,8 @@
 import { createForm } from '@formily/core'
-import { FormProvider, createSchemaField } from '../index'
 import { Schema } from '@formily/json-schema'
 import { render } from '@testing-library/vue'
 import Vue, { FunctionalComponentOptions } from 'vue'
+import { FormProvider, createSchemaField } from '../vue2-components'
 
 Vue.component('FormProvider', FormProvider)
 
@@ -21,6 +21,36 @@ const Input: FunctionalComponentOptions = {
   },
 }
 
+const Previewer: FunctionalComponentOptions = {
+  functional: true,
+  render(h, context) {
+    return h(
+      'div',
+      {
+        attrs: {
+          'data-testid': 'previewer',
+        },
+      },
+      context.children
+    )
+  },
+}
+
+const Previewer2: FunctionalComponentOptions = {
+  functional: true,
+  render(h, context) {
+    return h(
+      'div',
+      {
+        attrs: {
+          'data-testid': 'previewer2',
+        },
+      },
+      [context.scopedSlots.content({})]
+    )
+  },
+}
+
 describe('json schema field', () => {
   test('string field', () => {
     const form = createForm()
@@ -85,3 +115,184 @@ describe('json schema field', () => {
     expect(queryByTestId('input')).toBeVisible()
   })
 })
+
+describe('x-content', () => {
+  test('default slot', () => {
+    const form = createForm()
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            'x-component': 'Previewer',
+            'x-content': '123',
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer')).toBeVisible()
+    expect(queryByTestId('previewer').textContent).toEqual('123')
+  })
+
+  test('default slot with component', () => {
+    const form = createForm()
+    const Content = {
+      render(h) {
+        return h('span', '123')
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            'x-component': 'Previewer',
+            'x-content': Content,
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer')).toBeVisible()
+    expect(queryByTestId('previewer').textContent).toEqual('123')
+  })
+
+  test('default slot with name default', () => {
+    const form = createForm()
+    const Content = {
+      render(h) {
+        return h('span', '123')
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            'x-component': 'Previewer',
+            'x-content': {
+              default: Content,
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer')).toBeVisible()
+    expect(queryByTestId('previewer').textContent).toEqual('123')
+  })
+
+  test('named slot', () => {
+    const form = createForm()
+    const Content = {
+      render(h) {
+        return h('span', '123')
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer2,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            'x-component': 'Previewer2',
+            'x-content': {
+              content: Content,
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer2')).toBeVisible()
+    expect(queryByTestId('previewer2').textContent).toEqual('123')
+  })
+
+  test('named slot with scope', () => {
+    const form = createForm()
+    const Content = {
+      render(h) {
+        return h('span', '123')
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer2,
+      },
+      scope: {
+        Content,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'string',
+            'x-component': 'Previewer2',
+            'x-content': {
+              content: '{{Content}}',
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer2')).toBeVisible()
+    expect(queryByTestId('previewer2').textContent).toEqual('123')
+  })
+})
diff --git a/packages/vue/src/__tests__/schema.markup.spec.ts b/packages/vue/src/__tests__/schema.markup.spec.ts
@@ -1,12 +1,10 @@
 import { createForm } from '@formily/core'
+import { useFieldSchema, useField, Schema } from '../'
 import {
   FormProvider,
-  createSchemaField,
-  useFieldSchema,
-  useField,
   RecursionField,
-  Schema,
-} from '../index'
+  createSchemaField,
+} from '../vue2-components'
 import { render } from '@testing-library/vue'
 import { mount, createLocalVue } from '@vue/test-utils'
 import Vue, { CreateElement } from 'vue'

diff --git a/packages/vue/src/__tests__/shared.spec.ts b/packages/vue/src/__tests__/shared.spec.ts
@@ -0,0 +1,7 @@
+import { createForm } from '../'
+import { isRaw } from '@vue/composition-api'
+
+test('createForm returns an un reactive form instance.', () => {
+  const form = createForm()
+  expect(isRaw(form)).toBeTruthy()
+})