### Vue FormilyJS Form Example with Ant Design

Source: https://vue.formilyjs.org/api/shared/connect

Demonstrates how to use FormilyJS with Ant Design Vue components. This example shows a form with an input field and a submit button, utilizing the `connect` API to integrate Ant Design's `Form.Item` and `mapProps` for custom property mapping. It includes setup for form creation, validation language, and component registration.

```html
<template>
  <FormProvider :form="form">
    <Form layout="vertical">
      <Field
        name="name"
        title="Name"
        required
        :decorator="[FormItem]"
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormConsumer>
        <template #default="{ form }">
          <div style="white-space: pre; margin-bottom: 16px">
            {{ JSON.stringify(form.values, null, 2) }}
          </div>
          <Button
            type="primary"
            @click="
              () => {
                form.submit(log)
              }
            "
          >
            Submit
          </Button>
        </template>
      </FormConsumer>
    </Form>
  </FormProvider>
</template>
```

```javascript
import { Form, Input, Button } from 'ant-design-vue'
import { createForm, setValidateLanguage } from '@formily/core'
import {
  FormProvider,
  FormConsumer,
  Field,
  connect,
  mapProps,
} from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: 'label',
      description: 'extra',
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        help: field.selfErrors?.length ? field.selfErrors : undefined,
      }
    }
  )
)

export default {
  components: {
    FormProvider,
    FormConsumer,
    Field,
    Form,
    Button,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
  methods: {
    log(...args) {
      console.log(...args)
    },
  },
}
```

--------------------------------

### FormilyJS Vue Form Example with Custom Field Component

Source: https://vue.formilyjs.org/api/hooks/use-field

Demonstrates a complete Vue form using FormilyJS, including a custom Field component ('FormItem') that utilizes the 'useField' hook. The example showcases form creation, input fields, data display, and submission, along with necessary imports and setup.

```vue
<template>
  <FormProvider :form="form">
    <Form layout="vertical">
      <Field
        name="name"
        title="Name"
        required
        :decorator="[FormItem]"
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormConsumer>
        <template #default="{ form }">
          <div style="white-space: pre; margin-bottom: 16px">
            {{ JSON.stringify(form.values, null, 2) }}
          </div>
          <Button
            type="primary"
            @click="
              () => {
                form.submit(log)
              }
            "
          >
            Submit
          </Button>
        </template>
      </FormConsumer>
    </Form>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { Form, Input, Button } from 'ant-design-vue'
import { createForm, setValidateLanguage } from '@formily/core'
import { FormProvider, FormConsumer, Field, useField } from '@formily/vue'
import { observer } from '@formily/reactive-vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = observer(
  defineComponent({
    setup(props, { slots }) {
      const fieldRef = useField()
      return () => {
        const field = fieldRef.value
        return h(
          Form.Item,
          {
            props: {
              label: field.title,
              required: field.required,
              help: field.selfErrors?.length ? field.selfErrors : undefined,
              extra: field.description,
              validateStatus: field.validateStatus,
            },
          },
          slots?.default()
        )
      }
    },
  }) 
)

export default {
  components: {
    FormProvider,
    FormConsumer,
    Field,
    Form,
    Button,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
  methods: {
    log(...args) {
      console.log(...args)
    },
  },
}
</script>

```

--------------------------------

### Register Polyfills Example

Source: https://vue.formilyjs.org/api/shared/schema

Provides an example of registering a schema polyfill for a specific version. Polyfills are used to ensure backward compatibility by transforming older schema conventions into newer ones.

```javascript
import { Schema } from '@formily/react'

Schema.registerPolyfills('1.0', (schema) => {
  schema['x-decorator'] = 'FormItem'
  return schema
})
```

--------------------------------

### Vue FormConsumer Example with Ant Design Vue

Source: https://vue.formilyjs.org/api/components/form-consumer

This example demonstrates how to use the FormConsumer component in a Vue application with Ant Design Vue. It sets up a form using FormProvider, includes an input field using Field, and displays the input's value dynamically using FormConsumer's scoped slot. The example requires importing necessary components from '@formily/vue' and 'ant-design-vue'.

```vue
<template>
  <FormProvider :form="form">
    <Field name="input" :component="[Input]" />
    <FormConsumer>
      <template #default="{ form }">
        {{ form.values.input }}
      </template>
    </FormConsumer>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field, FormConsumer } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field, FormConsumer },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>

```

--------------------------------

### Register Type Default Components Example

Source: https://vue.formilyjs.org/api/shared/schema

Shows an example of registering default components for specific schema types (e.g., string, number, array). This allows Formily to automatically use the specified components when it encounters these types in a schema.

```javascript
import { Schema } from '@formily/vue'

Schema.registerTypeDefaultComponents({
  string: 'Input',
  number: 'NumberPicker',
  array: 'ArrayTable',
})
```

--------------------------------

### useFormEffects Hook Signature and Vue Example

Source: https://vue.formilyjs.org/api/hooks/use-form-effects

This snippet demonstrates the TypeScript signature of the useFormEffects hook and provides a comprehensive Vue.js example. It shows how to integrate useFormEffects within a custom component to listen for field changes and update other fields reactively. Dependencies include @formily/core, @formily/vue, and ant-design-vue.

```typescript
interface useFormEffects {
  (form: Form): void
}
```

```vue
<template>
  <FormProvider :form="form">
    <Field
      name="input"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: 'input' }]"
    />
    <Field name="custom" :decorator="[FormItem]" :component="[Custom]" />
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm, onFieldReact } from '@formily/core'
import { FormProvider, Field, useFormEffects } from '@formily/vue'
import { Form, Input } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const Custom = defineComponent({
  setup() {
    useFormEffects(() => {
      onFieldReact('custom.bb', (field) => {
        field.value = field.query('.aa').get('value')
      })
    })
    return () =>
      h('div', {}, [
        h(
          Field,
          {
            props: {
              name: 'aa',
              decorator: [Form.Item],
              component: [Input, { placeholder: 'aa' }],
            },
          },
          {}
        ),
        h(
          Field,
          {
            props: {
              name: 'bb',
              decorator: [Form.Item],
              component: [Input, { placeholder: 'bb' }],
            },
          },
          {}
        ),
      ])
  },
})

export default {
  components: {
    FormProvider,
    Field,
  },
  data() {
    const form = createForm({
      effects() {
        onFieldReact('custom.aa', (field) => {
          field.value = field.query('input').get('value')
        })
      },
    })
    return {
      FormItem: Form.Item,
      Input,
      Custom,
      form,
    }
  },
}
</script>

```

--------------------------------

### Enable Polyfills Example

Source: https://vue.formilyjs.org/api/shared/schema

Illustrates how to enable polyfills for specific versions. Enabling polyfills activates the compatibility layer, applying transformations like automatically setting 'FormItem' as a decorator or converting 'x-linkages' to 'x-reactions'.

```javascript
import { Schema } from '@formily/vue'

Schema.enablePolyfills(['1.0'])
```

--------------------------------

### Vue FormilyJS Example with mapProps and connect

Source: https://vue.formilyjs.org/api/shared/map-props

A complete Vue.js example demonstrating the use of `mapProps` in conjunction with the `connect` function. This snippet shows how to configure a `FormItem` component by mapping properties like 'title', 'description', and 'required' from the Formily Field to the Ant Design Vue `Form.Item` component's props. It also includes a functional mapping to display field errors as 'help' text.

```html
<template>
  <FormProvider :form="form">
    <Form layout="vertical">
      <Field
        name="name"
        title="Name"
        required
        :decorator="[FormItem]"
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormConsumer>
        <template #default="{ form }">
          <div style="white-space: pre; margin-bottom: 16px">
            {{ JSON.stringify(form.values, null, 2) }}
          </div>
          <Button
            type="primary"
            @click="
              () => {
                form.submit(log)
              }
            "
          >
            Submit
          </Button>
        </template>
      </FormConsumer>
    </Form>
  </FormProvider>
</template>
```

```javascript
import { Form, Input, Button } from 'ant-design-vue'
import { createForm, setValidateLanguage } from '@formily/core'
import { FormProvider, FormConsumer, Field, connect, mapProps } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: 'label',
      description: 'extra',
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        help: field.selfErrors?.length ? field.selfErrors : undefined,
      }
    }
  )
)

export default {
  components: {
    FormProvider,
    FormConsumer,
    Field,
    Form,
    Button,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
  methods: {
    log(...args) {
      console.log(...args)
    },
  },
}

```

--------------------------------

### FormProvider Vue Component Usage Example

Source: https://vue.formilyjs.org/api/components/form-provider

Demonstrates how to use the FormProvider component within a Vue template. It wraps Field components and requires the 'form' instance to be passed as a prop. Dependencies include 'ant-design-vue' and '@formily/vue'.

```vue
<template>
  <FormProvider :form="form">
    <Field name="input" :component="[Input]" />
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>

```

--------------------------------

### Register Void Components Example

Source: https://vue.formilyjs.org/api/shared/schema

Demonstrates how to register void components, which are typically virtual components used for layout or structural purposes. This is often used in conjunction with polyfills for version compatibility.

```javascript
import { Schema } from '@formily/react'

Schema.registerVoidComponents(['card', 'tab', 'step'])
```

--------------------------------

### Use useFieldSchema Hook in Vue FormilyJS

Source: https://vue.formilyjs.org/api/hooks/use-field-schema

This example demonstrates how to use the `useFieldSchema` hook within a custom Vue component in FormilyJS. The hook retrieves the schema for the current field, which is then displayed. It requires FormilyJS core and Vue setup, along with Ant Design CSS.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaObjectField
        name="custom"
        x-component="Custom"
        :x-component-props="{
          schema: {
            type: 'object',
            properties: {
              input: {
                type: 'string',
                'x-component': 'Custom'
              }
            }
          }
        }"
      />
    </SchemaField>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField, useFieldSchema } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

const Custom = defineComponent({
  setup() {
    const schemaRef = useFieldSchema()
    return () => {
      const schema = schemaRef.value
      return h(
        'div',
        {
          style: { whiteSpace: 'pre' },
        },
        [JSON.stringify(schema.toJSON(), null, 4)]
      )
    }
  },
})

const { SchemaField, SchemaObjectField } = createSchemaField({
  components: {
    Custom,
  },
})

export default {
  components: { FormProvider, SchemaField, SchemaObjectField },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      form,
    }
  },
}
</script>

```

--------------------------------

### Vue ObjectField Example: Dynamic Form with Input and Button

Source: https://vue.formilyjs.org/api/components/object-field

This Vue.js example demonstrates the usage of the ObjectField component to create a dynamic form. It allows users to add and remove properties with associated input fields and buttons. It utilizes FormilyJS core functionalities like createForm, FormProvider, ObjectField, and Field, along with Ant Design Vue components.

```html
<template>
  <FormProvider :form="form">
    <ObjectField name="object">
      <template #default="{ field }">
        <div
          v-for="key in Object.keys(field.value || {})">
          :key="key"
          :style="{ marginBottom: '10px' }"
        >
          <Space>
            <Field :name="key" :component="[Input, { placeholder: key }]" />
            <Button @click="field.removeProperty(key)"> Remove </Button>
          </Space>
        </div>
        <Space>
          <Field
            name="propertyName"
            basePath=""
            required
            :component="[Input, { placeholder: 'Property Name' }]"
          />
          <Button @click="addPropertyToField(field)"> Add </Button>
        </Space>
      </template>
    </ObjectField>
  </FormProvider>
</template>
```

```javascript
import { Input, Space, Button } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, ObjectField, Field } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, ObjectField, Field, Space, Button },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
  methods: {
    addPropertyToField(field) {
      const name = this.form.values.propertyName
      if (name && !this.form.existValuesIn(`object.${name}`)) {
        field.addProperty(name, '')
        this.form.deleteValuesIn('propertyName')
      }
    },
  },
}
```

--------------------------------

### Vue FormilyJS Custom Component Example with useForm

Source: https://vue.formilyjs.org/api/hooks/use-form

Demonstrates a Vue.js custom component ('Custom') that utilizes the useForm hook to access and display values from the form. It showcases how to integrate FormilyJS components and hooks within a Vue template and script.

```vue
<template>
  <FormProvider :form="form">
    <Space>
      <Field name="input" :component="[Input]" />
      <Field name="custom" :component="[Custom]" />
    </Space>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
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 Custom = observer(
  defineComponent({
    setup() {
      const formRef = useForm()
      return () => {
        const form = formRef.value
        return h('div', {}, [form.values.input])
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    Field,
    Space,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      Input,
      Custom,
      form,
    }
  },
}
</script>

```

--------------------------------

### Vue.js Example Using RecursionField for Custom Components

Source: https://vue.formilyjs.org/api/components/recursion-field

Demonstrates how to use RecursionField within a Vue.js application. It shows a custom component 'Custom' that utilizes RecursionField to render properties from a provided schema, integrated with Formily's FormProvider and SchemaField.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaObjectField
        name="custom"
        x-component="Custom"
        :x-component-props="{
          schema: {
            type: 'object',
            properties: {
              input: {
                type: 'string',
                'x-component': 'Input',
              },
            },
          },
        }"
      />
    </SchemaField>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField, RecursionField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

// functional component in vue2
const Custom = {
  functional: true,
  render(h, { props }) {
    return h(RecursionField, {
      props: {
        name: props.name,
        schema: props.schema,
        onlyRenderProperties: true,
      },
    })
  },
}

const { SchemaField, SchemaObjectField } = createSchemaField({
  components: {
    Custom,
    Input,
  },
})

export default {
  components: { FormProvider, SchemaField, SchemaObjectField },
  data() {
    return {
      form: createForm(),
    }
  },
}
</script>

```

--------------------------------

### Vue useParentForm Hook Example

Source: https://vue.formilyjs.org/api/hooks/use-parent-form

Demonstrates how to use the useParentForm hook within a Vue component to access the parent Form instance. This allows custom components to interact with the form's methods and properties.

```vue
<template>
  <FormProvider :form="form">
    <ObjectField name="object">
      <Custom></Custom>
    </ObjectField>
    <Custom></Custom>
    <VoidField name="void">
      <Custom></Custom>
    </VoidField>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
import {
  FormProvider,
  ObjectField,
  VoidField,
  useParentForm,
} from '@formily/vue'
import { observer } from '@formily/reactive-vue'

const Custom = observer(
  defineComponent({
    setup() {
      const formRef = useParentForm()
      return () => {
        const form = formRef.value
        return h('div', {}, [form.displayName])
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    ObjectField,
    VoidField,
    VoidField,
    Custom,
  },
  data() {
    const form = createForm()
    return {
      form,
    }
  },
}
</script>
```

--------------------------------

### Vue VoidField Example: Controlling Child Node Visibility

Source: https://vue.formilyjs.org/api/components/void-field

This example demonstrates using VoidField to control the visibility of child nodes. When VoidField is hidden (visible: false), its child node data is cleared. Upon becoming visible again, the state is fully restored thanks to Formily Core's internal capabilities.

```vue
<template>
  <FormProvider :form="form">
    <Space>
      <VoidField name="layout">
        <Field name="input" :component="[Input]" />
      </VoidField>
      <FormConsumer>
        <template #default="{ form }">
          <Space>
            <Button
              @click="
                () => {
                  form
                    .query('layout')
                    .take()
                    .setState((state) => {
                      state.visible = !state.visible
                    })
                }
              "
            >
              {{ form.query('layout').get('visible') ? 'Hide' : 'Show' }}
            </Button>
            <div>{{ JSON.stringify(form.values, null, 2) }}</div>
          </Space>
        </template>
      </FormConsumer>
    </Space>
  </FormProvider>
</template>

<script>
import { Input, Space, Button } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field, FormConsumer, VoidField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field, FormConsumer, VoidField, Space, Button },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>

```

--------------------------------

### Vue FormilyJS: Dynamic Array with RecursionField

Source: https://vue.formilyjs.org/api/components/recursion-field-with-component

This snippet demonstrates how to create a dynamic, self-incrementing list component in Vue using FormilyJS. It utilizes `RecursionField` to render array items and includes buttons for adding and removing entries. Dependencies include `@formily/core`, `@formily/vue`, and `ant-design-vue`. The input is a schema defining the array structure, and the output is a renderable form component.

```html
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaArrayField name="custom" x-component="ArrayItems">
        <SchemaObjectField>
          <SchemaStringField name="input" x-component="Input" />
        </SchemaObjectField>
      </SchemaArrayField>
    </SchemaField>
  </FormProvider>
</template>
```

```javascript
import { defineComponent, h } from '@vue/composition-api'
// or "import { defineComponent, h } from 'vue'" if using vue3
import { Input, Button, Space } from 'ant-design-vue'
import { createForm } from '@formily/core'
import {
  FormProvider,
  createSchemaField,
  RecursionField,
  useField,
  useFieldSchema,
} from '@formily/vue'
import { observer } from '@formily/reactive-vue'
import 'ant-design-vue/dist/antd.css'

const ArrayItems = observer(
  defineComponent({
    setup() {
      const fieldRef = useField()
      const schemaRef = useFieldSchema()

      return () => {
        const field = fieldRef.value
        const schema = schemaRef.value
        const items = field.value?.map((item, index) => {
          return h('div', { key: item.id, style: { marginBottom: '10px' } }, [
            h(Space, [
              // params of render function is different in vue3
              h(RecursionField, {
                props: { schema: schema.items, name: index },
              }),
              h(Button, { on: { click: () => field.remove(index) } }, [
                'Remove',
              ]),
            ]),
          ])
        })
        const button = h(
          Button, 
          { on: { click: () => field.push({ id: Date.now() }) } }, 
          ['Add']
        )
        return h('div', [items, button])
      }
    },
  })
)

const { SchemaField, SchemaStringField, SchemaArrayField, SchemaObjectField } = createSchemaField({
  components: {
    ArrayItems,
    Input,
  },
})

export default {
  components: {
    FormProvider,
    SchemaField,
    SchemaStringField,
    SchemaArrayField,
    SchemaObjectField,
  },
  data() {
    return {
      form: createForm(),
    }
  },
}

```

--------------------------------

### Render Form with JSON Schema using Vue and FormilyJS

Source: https://vue.formilyjs.org/api/components/schema-field-with-schema

This code snippet demonstrates how to use the SchemaField component from FormilyJS in a Vue.js application to render a form based on a JSON Schema object. It requires Formily core, Vue, and Ant Design Vue components. The example shows defining a simple input field within the schema.

```html
<template>
  <FormProvider :form="form">
    <SchemaField
      :schema="{
        type: 'object',
        properties: {
          input: {
            type: 'string',
            'x-component': 'Input'
          },
        }
      }">
    </SchemaField>
  </FormProvider>
</template>
```

```javascript
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

const { SchemaField } = createSchemaField({
  components: {
    Input,
  },
})

export default {
  components: { FormProvider, SchemaField },
  data() {
    return {
      form: createForm(),
    }
  },
}
```

--------------------------------

### Map Component to Read-Only State with mapReadPretty in Vue FormilyJS

Source: https://vue.formilyjs.org/api/shared/map-read-pretty

This example demonstrates how to use the mapReadPretty higher-order component to transform a standard input component into a read-only display component. It takes an existing Vue component and returns a new component that renders the value in a specified read-only format, such as a div. This is particularly useful when integrating with third-party UI libraries that might not have built-in support for read-only states.

```javascript
import {
  FormProvider,
  Field,
  connect,
  mapProps,
  mapReadPretty,
} from '@formily/vue'
import { createForm, setValidateLanguage } from '@formily/core'
import { Form, Input as AntdInput } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

setValidateLanguage('en')

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: 'label',
      description: 'extra',
      required: true,
      validateStatus: true,
    },
    (props, field) => {
      return {
        ...props,
        help: field.selfErrors?.length ? field.selfErrors : undefined,
      }
    }
  )
)

const Input = connect(
  AntdInput,
  mapReadPretty({
    props: ['value'],
    // you need import "h" from "vue" in vue3
    render(h) {
      return h('div', [this.value])
    },
  })
)

export default {
  components: {
    FormProvider,
    Field,
    Form,
  },
  data() {
    const form = createForm({ validateFirst: true, readPretty: true })
    return {
      FormItem,
      Input,
      form,
    }
  },
}
```

--------------------------------

### Observer for Responsive Vue Component

Source: https://vue.formilyjs.org/api/shared/observer

This snippet demonstrates how to use the 'observer' higher-order component to make a Vue component responsive. It integrates with FormilyJS to display form values reactively. Dependencies include '@formily/core', '@formily/vue', '@formily/reactive-vue', and 'ant-design-vue'.

```vue
<template>
  <FormProvider :form="form">
    <Space>
      <Field
        name="name"
        title="Name"
        required
        :component="[Input, { placeholder: 'Please Input' }]"
      />
      <FormPreviewer />
    </Space>
  </FormProvider>
</template>

<script>
import { defineComponent, h } from '@vue/composition-api'
import { createForm } from '@formily/core'
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)])
      }
    },
  })
)

export default {
  components: {
    FormProvider,
    Field,
    FormPreviewer,
    Space,
  },
  data() {
    const form = createForm({ validateFirst: true })
    return {
      Input,
      form,
    }
  },
}
</script>

```

--------------------------------

### Schema Methods

Source: https://vue.formilyjs.org/api/shared/schema

Provides documentation for the methods available on the Schema class, used for manipulating schema properties and structure.

```APIDOC
## Schema Methods

### addProperty

*   **Description**: Adds a property description to the schema.
*   **Signature**: `addProperty(key: string | number, schema: ISchema): Schema`
    *   Returns the modified Schema object.

### removeProperty

*   **Description**: Removes a property description from the schema.
*   **Signature**: `removeProperty(key: string | number): Schema`
    *   Returns the removed Schema object.

### setProperties

*   **Description**: Overwrites and updates property descriptions.
*   **Signature**: `setProperties(properties: SchemaProperties): Schema`
    *   Returns the current Schema object.
    *   `SchemaProperties` refers to the schema property definitions.

### addPatternProperty

*   **Description**: Adds a dynamic property description based on a regular expression.
*   **Signature**: `addPatternProperty(regexp: string, schema: ISchema): Schema`
    *   Returns the modified Schema object.

### removePatternProperty

*   **Description**: Removes a dynamic property description based on a regular expression.
*   **Signature**: `removePatternProperty(regexp: string): Schema`
    *   Returns the removed Schema object.

### setPatternProperties

*   **Description**: Overwrites and updates dynamic property descriptions.
*   **Signature**: `setPatternProperties(properties: SchemaProperties): Schema`
    *   Returns the current Schema object.
    *   `SchemaProperties` refers to the schema property definitions.

### setAdditionalProperties

*   **Description**: Overwrites and updates the schema for additional properties.
*   **Signature**: `setAdditionalProperties(properties: ISchema): Schema`
    *   Returns the updated Schema object for additional properties.

### setItems

*   **Description**: Overwrites and updates the schema for array items.
*   **Signature**: `setItems(items: SchemaItems): SchemaItems`
    *   Returns the updated `SchemaItems` object.
    *   `SchemaItems` refers to the schema item definitions.

### setAdditionalItems

*   **Description**: Overwrites and updates the schema for additional array items.
*   **Signature**: `setAdditionalItems(items: ISchema): Schema`
    *   Returns the updated Schema object for additional items.

### mapProperties

*   **Description**: Iterates and maps over the current schema's properties, respecting `x-index` order.
*   **Signature**: `mapProperties<T>(mapper: (property: Schema, key: string | number) => T): T[]`
    *   Applies the `mapper` function to each property and returns an array of the results.

### mapPatternProperties

*   **Description**: Iterates and maps over the current schema's `patternProperties`, respecting `x-index` order.
*   **Signature**: `mapPatternProperties<T>(mapper: (property: Schema, key: string | number) => T): T[]`
    *   Applies the `mapper` function to each pattern property and returns an array of the results.
```

--------------------------------

### Schema Class Constructor

Source: https://vue.formilyjs.org/api/shared/schema

Initializes a Schema instance from JSON schema data, creating a Schema Tree where each node has associated methods. It takes the JSON schema and an optional parent schema as arguments.

```typescript
class Schema {
  constructor(json: ISchema, parent?: ISchema)
}
```

--------------------------------

### Schema Compatibility and Registration Utilities

Source: https://vue.formilyjs.org/api/shared/schema

Includes utilities for registering void components, default component types for schema types, and polyfills for version compatibility. These methods help in aligning Formily schemas with different versions and conventions.

```typescript
interface registerVoidComponents {
  (components: string[]): void
}
```

```typescript
interface registerTypeDefaultComponents {
  (maps: Record<string, string>): void
}
```

```typescript
type SchemaPatch = (schema: ISchema) => ISchema

interface registerPolyfills {
  (version: string, patch: SchemaPatch): void
}
```

```typescript
interface enablePolyfills {
  (versions: string[]): void
}
```

--------------------------------

### FormilyJS connect API Interfaces and Types

Source: https://vue.formilyjs.org/api/shared/connect

Defines the TypeScript interfaces for the `IComponentMapper` and `connect` function, which are crucial for integrating third-party Vue components into FormilyJS. These interfaces outline the expected structure for component mappers and the connect function itself.

```typescript
interface IComponentMapper<T extends Vue.Component> {
  (target: T): Vue.Component
}
interface connect<T extends Vue.Component> {
  (target: T, ...args: IComponentMapper<T>[]): Vue.Component
}
```

--------------------------------

### Vue - Create and Use SchemaField Component

Source: https://vue.formilyjs.org/api/components/schema-field

This snippet demonstrates how to create a SchemaField component using the `createSchemaField` factory function and then use it within a Vue template. It includes setting up `FormProvider` and defining form fields based on schema.

```vue
<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField name="input" x-component="Input" />
    </SchemaField>
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

const { SchemaField, SchemaStringField } = createSchemaField({
  components: {
    Input,
  },
})

export default {
  components: { FormProvider, SchemaField, SchemaStringField },
  data() {
    return {
      form: createForm(),
    }
  },
}
</script>

```

--------------------------------

### Schema Properties

Source: https://vue.formilyjs.org/api/shared/schema

Details the various properties available on a Schema instance, mapping JSON Schema fields to Formily's specific configurations and UI properties.

```APIDOC
## Schema Properties

This table outlines the properties of a Schema object and their corresponding mappings to Formily's Field Model or UI configurations.

| Property | Description | Type | Field Model Mapping |
|---|---|---|---|
| `type` | Schema type | `SchemaTypes` | `GeneralField` |
| `title` | Field title | `React.ReactNode` | `title` |
| `description` | Field description | `React.ReactNode` | `description` |
| `default` | Default value | `Any` | `initialValue` |
| `readOnly` | Read-only flag | `Boolean` | `readOnly` |
| `writeOnly` | Write-only flag | `Boolean` | `editable` |
| `enum` | Enumeration values | `SchemaEnum` | `dataSource` |
| `const` | Value equality validation | `Any` | `validator` |
| `multipleOf` | Divisibility validation | `Number` | `validator` |
| `maximum` | Maximum value (exclusive) | `Number` | `validator` |
| `exclusiveMaximum` | Maximum value (inclusive) | `Number` | `validator` |
| `minimum` | Minimum value (exclusive) | `Number` | `validator` |
| `exclusiveMinimum` | Minimum value (inclusive) | `Number` | `validator` |
| `maxLength` | Maximum string length | `Number` | `validator` |
| `minLength` | Minimum string length | `Number` | `validator` |
| `pattern` | Regular expression pattern | `RegExpString` | `validator` |
| `maxItems` | Maximum array items | `Number` | `validator` |
| `minItems` | Minimum array items | `Number` | `validator` |
| `uniqueItems` | Unique items validation | `Boolean` | `validator` |
| `maxProperties` | Maximum object properties | `Number` | `validator` |
| `minProperties` | Minimum object properties | `Number` | `validator` |
| `required` | Required field validation | `Boolean` | `validator` |
| `format` | Standardized format validation | `ValidatorFormats` | `validator` |
| `properties` | Nested schema properties | `SchemaProperties` | - |
| `items` | Array item schema | `SchemaItems` | - |
| `additionalItems` | Schema for additional array items | `Schema` | - |
| `patternProperties` | Dynamic property schemas based on regex | `SchemaProperties` | - |
| `additionalProperties` | Schema for additional object properties | `Schema` | - |
| `x-index` | UI display order | `Number` | - |
| `x-pattern` | UI interaction pattern | `FieldPatternTypes` | `pattern` |
| `x-display` | UI display type | `FieldDisplayTypes` | `display` |
| `x-validator` | Custom field validator | `FieldValidator` | `validator` |
| `x-decorator` | UI decorator component | `String | React.FC` | `decorator` |
| `x-decorator-props` | Props for the decorator component | `Any` | `decorator` |
| `x-component` | UI component | `String | React.FC` | `component` |
| `x-component-props` | Props for the component | `Any` | `component` |
| `x-reactions` | Field interaction reactions | `SchemaReactions` | `reactions` |
| `x-content` | Children content for a component | `React.ReactNode` | `ReactChildren` |
| `x-visible` | Field visibility | `Boolean` | `visible` |
| `x-hidden` | Field UI hidden (data preserved) | `Boolean` | `hidden` |
| `x-disabled` | Field disabled state | `Boolean` | `disabled` |
| `x-editable` | Field editable state | `Boolean` | `editable` |
| `x-read-only` | Field read-only state | `Boolean` | `readOnly` |
| `x-read-pretty` | Field read-pretty state | `Boolean` | `readPretty` |
| `definitions` | Predefined schemas | `SchemaProperties` | - |
| `$ref` | Reference to a predefined schema | `String` | - |
| `x-data` | Extended custom data | `Object` | `data` |

### Detailed Notes
*   `x-component` and `x-decorator` identifiers must match keys in the component collection passed to `createSchemaField`.
*   Schema properties can utilize string expressions like `{{expression}}`. Variables for these expressions can originate from `createSchemaField` or the `SchemaField` component.
*   The `$ref` format must be like `#/definitions/address`; it does not support loading remote JSON Schemas.
```

--------------------------------

### Schema Class: addProperty Method

Source: https://vue.formilyjs.org/api/shared/schema

Adds a property description to the current schema. It takes a key (string or number) and a schema object as input and returns the modified Schema object.

```typescript
interface addProperty {
  (key: string | number, schema: ISchema): Schema
}
```

--------------------------------

### Schema Class: addPatternProperty Method

Source: https://vue.formilyjs.org/api/shared/schema

Adds a regular expression-based property description to the schema. It accepts a regular expression string and a schema object, returning the updated Schema object.

```typescript
interface addPatternProperty {
  (regexp: string, schema: ISchema): Schema
}
```

--------------------------------

### TypeScript - SchemaField and Related Type Definitions

Source: https://vue.formilyjs.org/api/components/schema-field

This TypeScript code defines the types for the SchemaField component and its factory function. It outlines the structure of `ComposeSchemaField`, `ISchemaFieldFactoryProps`, and `ISchemaFieldProps`, essential for understanding how to configure and use SchemaField.

```typescript
type ComposeSchemaField = {
  SchemaField: Vue.Component<any, any, any, ISchemaFieldProps>
  SchemaMarkupField: Vue.Component<any, any, any, ISchema>
  SchemaStringField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaObjectField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaArrayField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaBooleanField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaDateField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaDateTimeField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaVoidField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
  SchemaNumberField: Vue.Component<any, any, any, Omit<ISchema, 'type'>>
}

//工厂函数参数属性
interface ISchemaFieldFactoryProps {
  components?: {
    [key: string]: Vue.Component //组件列表
  }
  scope?: any //全局作用域，用于实现协议表达式变量注入
}

//SchemaField属性
interface ISchemaFieldProps extends IFieldFactoryProps {
  schema?: ISchema //字段schema
  scope?: any //协议表达式作用域
  name?: string //字段名称
}

//工厂函数
interface createSchemaField {
  (props: ISchemaFieldFactoryProps): ComposeSchemaField
}

```

--------------------------------

### Schema Class: setPatternProperties Method

Source: https://vue.formilyjs.org/api/shared/schema

Overrides and updates the pattern property descriptions of the current schema. It takes a SchemaProperties object and returns the current Schema object.

```typescript
interface setPatternProperties {
  (properties: SchemaProperties): Schema
}
```

--------------------------------

### Static Schema Utility Methods

Source: https://vue.formilyjs.org/api/shared/schema

Offers static methods for schema utilities, including retrieving ordered properties, compiling and shallow compiling expressions within targets, controlling compilation silency, checking schema instance types, and registering custom compilers and patches.

```typescript
interface getOrderProperties {
  (schema: ISchema = {}, propertiesName: keyof ISchema = 'properties'): ISchema
}
```

```typescript
interface shallowCompile {
  (target: any, scope: any): any
}
```

```typescript
interface silent {
  (value?: boolean): void
}
```

```typescript
interface isSchemaInstance {
  (target: any): target is Schema
}
```

```typescript
interface registerCompiler {
  (compiler: (expression: string, scope: any) => any): void
}
```

```typescript
type SchemaPatch = (schema: ISchema) => ISchema

interface registerPatches {
  (...args: SchemaPatch[]): void
}
```

--------------------------------

### FormProvider Vue Component Signature

Source: https://vue.formilyjs.org/api/components/form-provider

Defines the type signature for the FormProvider Vue component. It accepts a 'form' prop, which is an instance created by createForm().

```typescript
type FormProvider = Vue.Component<
  any,
  any,
  any,
  {
    form: Form //通过createForm创建的form实例
  }
>

```

--------------------------------

### Schema Class: setAdditionalProperties Method

Source: https://vue.formilyjs.org/api/shared/schema

Overrides and updates the description for additional properties not explicitly defined in the schema. It takes an ISchema object and returns the updated Schema object.

```typescript
interface setAdditionalProperties {
  (properties: ISchema): Schema
}
```

--------------------------------

### Schema Class: mapPatternProperties Method

Source: https://vue.formilyjs.org/api/shared/schema

Iterates and maps over the 'patternProperties' of the current Schema, respecting the 'x-index' order. It applies a mapper function to each pattern property.

```typescript
interface mapPatternProperties
  (mapper: (property: Schema, key: string) => T): T[]

```

--------------------------------

### Schema Class: setProperties Method

Source: https://vue.formilyjs.org/api/shared/schema

Overrides and updates the property descriptions of the current schema with a new set of properties. It returns the current Schema object.

```typescript
interface setProperties {
  (properties: SchemaProperties): Schema
}
```

--------------------------------

### Inject Schema Options Context in Vue with @formily/vue

Source: https://vue.formilyjs.org/api/shared/injections

Retrieve global schema options passed during the creation of a schema field using SchemaOptionsContext. This injection from @formily/vue is useful for accessing factory options.

```javascript
const SchemaOptionsContext =
  inject<ISchemaFieldFactoryOptions>(SchemaOptionsSymbol);
```

--------------------------------

### Vue Field Component Usage

Source: https://vue.formilyjs.org/api/components/field

Demonstrates how to use the Vue Field component for form input binding. It requires a FormProvider and specifies the input component along with its props. The 'name' prop is mandatory.

```vue
<template>
  <FormProvider :form="form">
    <Field name="input" :component="[Input, { placeholder: '请输入' }]" />
  </FormProvider>
</template>

<script>
import { Input } from 'ant-design-vue'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/vue'
import 'ant-design-vue/dist/antd.css'

export default {
  components: { FormProvider, Field },
  data() {
    return {
      Input,
      form: createForm(),
    }
  },
}
</script>

```

--------------------------------

### Schema Class: mapProperties Method

Source: https://vue.formilyjs.org/api/shared/schema

Iterates and maps over the 'properties' of the current Schema, respecting the 'x-index' order. It applies a mapper function to each property and returns an array of the results.

```typescript
interface mapProperties<T> {
  (mapper: (property: Schema, key: string | number) => T): T[]
}
```