diff --git a/packages/vue/src/__tests__/schema.json.spec.ts b/packages/vue/src/__tests__/schema.json.spec.ts index d76cf0bba6d..5bd85638089 100644 --- a/packages/vue/src/__tests__/schema.json.spec.ts +++ b/packages/vue/src/__tests__/schema.json.spec.ts @@ -1,6 +1,6 @@ -import { createForm } from '@formily/core' +import { createForm, isField } from '@formily/core' import { Schema } from '@formily/json-schema' -import { render } from '@testing-library/vue' +import { render, waitFor } from '@testing-library/vue' import Vue, { FunctionalComponentOptions } from 'vue' import { FormProvider, createSchemaField } from '../vue2-components' @@ -21,6 +21,21 @@ const Input: FunctionalComponentOptions = { }, } +const Input2: FunctionalComponentOptions = { + functional: true, + render(h, context) { + return h('input', { + attrs: { + value: context.props.value, + 'data-testid': 'input2', + }, + on: { + input: context.listeners.change, + }, + }) + }, +} + const Previewer: FunctionalComponentOptions = { functional: true, render(h, context) { @@ -296,3 +311,103 @@ describe('x-content', () => { expect(queryByTestId('previewer2').textContent).toEqual('123') }) }) + +describe('scope', () => { + test('scope in prop', async () => { + const form = createForm() + const { SchemaField } = createSchemaField({ + components: { + Input, + Input2, + Previewer, + }, + }) + const { queryByTestId } = render({ + components: { SchemaField }, + data() { + return { + form, + schema: { + type: 'object', + properties: { + input1: { + type: 'string', + 'x-component': 'Input', + 'x-reactions': { + target: 'input2', + fulfill: { + state: { + value: '{{ test }}', + }, + }, + }, + }, + input2: { + type: 'string', + 'x-component': 'Input2', + }, + }, + }, + } + }, + template: ` + + `, + }) + expect(queryByTestId('input2').getAttribute('value')).toEqual('123') + }) + + test('scope in options of createSchemaField', async () => { + const form = createForm() + const { SchemaField } = createSchemaField({ + components: { + Input, + Input2, + Previewer, + }, + scope: { + test: '123', + }, + }) + const { queryByTestId } = render({ + components: { SchemaField }, + data() { + return { + form, + schema: { + type: 'object', + properties: { + input1: { + type: 'string', + 'x-component': 'Input', + 'x-reactions': { + target: 'input2', + fulfill: { + state: { + value: '{{ test }}', + }, + }, + }, + }, + input2: { + type: 'string', + 'x-component': 'Input2', + }, + }, + }, + } + }, + template: ` + + `, + }) + expect(queryByTestId('input2').getAttribute('value')).toEqual('123') + }) +}) diff --git a/packages/vue/src/components/RecursionField.ts b/packages/vue/src/components/RecursionField.ts index 3d325661e8a..bf7fd374fd5 100644 --- a/packages/vue/src/components/RecursionField.ts +++ b/packages/vue/src/components/RecursionField.ts @@ -57,10 +57,7 @@ const RecursionField = observer( const createSchema = (schemaProp: IRecursionFieldProps['schema']) => new Schema(schemaProp) const createFieldSchema = (schema: Schema) => - schema.compile?.({ - ...optionsRef.value.scope, - ...scopeRef.value, - }) + schema.compile?.(scopeRef.value) const schemaRef = shallowRef(createSchema(props.schema)) const fieldSchemaRef = shallowRef(createFieldSchema(schemaRef.value)) watch([() => props.schema, scopeRef, optionsRef], () => { @@ -69,7 +66,7 @@ const RecursionField = observer( }) const getPropsFromSchema = (schema: Schema) => - schema?.toFieldProps?.(optionsRef.value) + schema?.toFieldProps?.({ ...optionsRef.value, scope: scopeRef.value }) const fieldPropsRef = shallowRef(getPropsFromSchema(fieldSchemaRef.value)) watch([fieldSchemaRef, optionsRef], () => { fieldPropsRef.value = getPropsFromSchema(fieldSchemaRef.value)