feat(vue): support x-slot (#2892)

* feat(vue): code improvments * feat(vue): support x-slot
alibaba · Mar 2, 2022 · 9e268aa · 9e268aa
1 parent 119fd38
commit 9e268aa
Show file tree

Hide file tree

Showing 8 changed files with 353 additions and 226 deletions.
diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts
@@ -785,6 +785,139 @@ describe('x-content', () => {
     expect(queryByTestId('previewer5')).toBeVisible()
     expect(queryByTestId('previewer5').textContent).toEqual('123')
   })
+
+  test('wrong x-content will be ignore', () => {
+    const form = createForm()
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer,
+      },
+    })
+    const { queryAllByTestId, container } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'object',
+            properties: {
+              input1: {
+                type: 'string',
+                'x-component': 'Previewer',
+                'x-content': {
+                  default: {
+                    someAttr: '123',
+                  },
+                },
+              },
+              input2: {
+                type: 'string',
+                'x-component': 'Previewer',
+                'x-content': {
+                  default: null,
+                },
+              },
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    queryAllByTestId('previewer').forEach((el) => expect(el).toBeVisible())
+    queryAllByTestId('previewer').forEach((el) =>
+      expect(el.textContent).toEqual('')
+    )
+  })
+})
+
+describe('x-slot', () => {
+  test('x-slot works in void field properties', () => {
+    const form = createForm()
+    const Content = {
+      render(h) {
+        return h('span', '123')
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer4,
+        Content,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'void',
+            'x-component': 'Previewer4',
+            properties: {
+              content: {
+                type: 'void',
+                'x-component': 'Content',
+                'x-slot': 'content',
+              },
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer4')).toBeVisible()
+    expect(queryByTestId('previewer4').textContent).toEqual('123')
+  })
+  test('x-slot works in object field properties', () => {
+    const form = createForm()
+    const Content = {
+      render(h) {
+        return h('span', '123')
+      },
+    }
+    const { SchemaField } = createSchemaField({
+      components: {
+        Previewer4,
+        Content,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField },
+      data() {
+        return {
+          form,
+          schema: new Schema({
+            type: 'object',
+            'x-component': 'Previewer4',
+            properties: {
+              content: {
+                type: 'void',
+                'x-component': 'Content',
+                'x-slot': 'content',
+              },
+            },
+          }),
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField
+          name="string"
+          :schema="schema"
+        />
+      </FormProvider>`,
+    })
+    expect(queryByTestId('previewer4')).toBeVisible()
+    expect(queryByTestId('previewer4').textContent).toEqual('123')
+  })
 })
 
 describe('scope', () => {

diff --git a/packages/vue/src/__tests__/schema.markup.spec.ts b/packages/vue/src/__tests__/schema.markup.spec.ts
@@ -332,26 +332,32 @@ describe('recursion field', () => {
         const schemaRef = useFieldSchema()
         return () => {
           return h('div', { attrs: { 'data-testid': 'object' } }, [
-            h('RecursionField', { props: { schema: schemaRef.value } }),
+            h('RecursionField', {
+              props: {
+                schema: schemaRef.value,
+                mapProperties: (schema) => {
+                  schema.default = '123'
+                  return schema
+                },
+              },
+            }),
           ])
         }
       },
     })
 
     const CustomObject2 = defineComponent({
       setup() {
-        const fieldRef = useField()
         const schemaRef = useFieldSchema()
         return () => {
           const schema = schemaRef.value
-          const field = fieldRef.value
-          return h('div', { attrs: { 'data-testid': 'only-properties' } }, [
+          return h('div', { attrs: { 'data-testid': 'object' } }, [
             h('RecursionField', {
               props: {
-                name: schema.name,
-                basePath: field.address,
                 schema,
-                onlyRenderProperties: true,
+                mapProperties: () => {
+                  return null
+                },
               },
             }),
           ])
@@ -382,15 +388,12 @@ describe('recursion field', () => {
           <SchemaObjectField x-component="CustomObject2">
             <SchemaStringField x-component="Input" />
           </SchemaObjectField>
-          <SchemaVoidField x-component="CustomObject2">
-            <SchemaStringField x-component="Input" />
-          </SchemaVoidField>
         </SchemaField>
       </FormProvider>`,
     })
-    expect(queryAllByTestId('input').length).toEqual(3)
-    expect(queryAllByTestId('object').length).toEqual(1)
-    expect(queryAllByTestId('only-properties').length).toEqual(2)
+    expect(queryAllByTestId('input').length).toEqual(2)
+    expect(queryAllByTestId('input')[0].getAttribute('value')).toEqual('123')
+    expect(queryAllByTestId('input')[1].getAttribute('value')).toBeFalsy()
   })
 
   test('filterProperties', () => {

diff --git a/packages/vue/src/components/ArrayField.ts b/packages/vue/src/components/ArrayField.ts
@@ -42,9 +42,8 @@ if (isVue2) {
             ...props,
             ...getRawComponent(props),
           },
-        } as any
-        const slots = context.slots as any
-        return _h(ReactiveField, componentData, slots)
+        } as Record<string, unknown>
+        return _h(ReactiveField, componentData, context.slots)
       }
     },
   } as unknown as DefineComponent<IArrayFieldProps>

diff --git a/packages/vue/src/components/Field.ts b/packages/vue/src/components/Field.ts
@@ -40,9 +40,8 @@ if (isVue2) {
             ...props,
             ...getRawComponent(props),
           },
-        } as any
-        const slots = context.slots as any
-        return _h(ReactiveField, componentData, slots)
+        } as Record<string, unknown>
+        return _h(ReactiveField, componentData, context.slots)
       }
     },
   } as unknown as DefineComponent<IFieldProps>

diff --git a/packages/vue/src/components/ObjectField.ts b/packages/vue/src/components/ObjectField.ts
@@ -42,9 +42,8 @@ if (isVue2) {
             ...props,
             ...getRawComponent(props),
           },
-        } as any
-        const slots = context.slots as any
-        return _h(ReactiveField, componentData, slots)
+        } as Record<string, unknown>
+        return _h(ReactiveField, componentData, context.slots)
       }
     },
   } as unknown as DefineComponent<IObjectFieldProps>