QueryForm
Search form component built on top of FormGrid, Submit, and Reset, with built-in expand and collapse behavior.
Tip
QueryFormsets:fullness="true"by default, and you can override it by passing props supported byForm.QueryFormandQueryForm.Lightregister common input components andFormItemby default, so most JSON Schema scenarios do not need a manualcomponentsmap.
Note
Because this component eagerly registers almost every common input component, tree shaking may become ineffective. Use it only when bundle size is not a major concern. The components not registered by default are DatePickerPanel, Upload, ColorPickerPanel, SelectTable, Transfer, Mention, and Tree. In addition, Segmented and InputTag are not registered yet because they require relatively new dependency versions and could throw during registration in older environments.
Markup Schema Example
Tip
To span columns, you can use the data-grid-span prop from @silver-formily/grid and avoid extra GridColumn nesting.
<script setup lang="ts">
import { createForm } from '@silver-formily/core'
import {
DatePicker,
FormItem,
Input,
QueryForm,
Select,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ElMessage } from 'element-plus'
const form = createForm()
const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
components: {
QueryForm,
Input,
Select,
DatePicker,
FormItem,
},
})
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaVoidField
x-component="QueryForm"
:x-component-props="{
onAutoSubmit: handleAutoSubmit,
gridProps: {
breakpoints: [900, Infinity],
maxColumns: [3, 4],
},
}"
>
<SchemaStringField
name="input1"
title="Input 1"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaStringField
name="input2"
title="Input 2"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaStringField
name="select1"
title="Select 1"
x-component="Select"
x-decorator="FormItem"
/>
<SchemaStringField
name="select2"
title="Select 2"
x-component="Select"
x-decorator="FormItem"
/>
<SchemaStringField
name="dateRange"
title="DatePicker"
x-component="DatePicker"
x-decorator="FormItem"
:x-decorator-props="{
'data-grid-span': 2,
}"
:x-component-props="{
type: 'daterange',
}"
/>
<SchemaStringField
name="select3"
title="Select 3"
x-component="Select"
x-decorator="FormItem"
/>
</SchemaVoidField>
</SchemaField>
</FormProvider>
</template>查看源码
JSON Schema Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
input1: {
'type': 'string',
'title': 'Input 1',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
input2: {
'type': 'string',
'title': 'Input 2',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4] }"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
External Form Initial Values Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm({
initialValues: {
keyword: 'Orders',
status: 'enabled',
creator: 'Tony',
},
})
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: 'Enter a keyword',
},
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: 'Please select',
},
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
creator: {
'type': 'string',
'title': 'Created By',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: 'Enter the creator',
},
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Submitted data: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:show-toggle="false"
reset-text="Restore Initial Values"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
Vertical Layout Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
department: {
'type': 'string',
'title': 'Department',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
priority: {
'type': 'string',
'title': 'Priority',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'High', value: 'high' },
{ label: 'Medium', value: 'medium' },
{ label: 'Low', value: 'low' },
],
},
source: {
'type': 'string',
'title': 'Source',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Web', value: 'web' },
{ label: 'App', value: 'app' },
],
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
updatedAt: {
'type': 'string',
'title': 'Updated At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
layout="vertical"
:grid-props="{ breakpoints: [900, Infinity], minColumns: [3, 4], maxColumns: [3, 4] }"
/>
</template>查看源码
Expand All Search Items by Default Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
],
},
region: {
'type': 'string',
'title': 'Region',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:default-expanded="true"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 220 }"
/>
</template>查看源码
Hide the Toggle Button and Show All Search Items Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
],
},
region: {
'type': 'string',
'title': 'Region',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
tag: {
'type': 'string',
'title': 'Tag',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:default-expanded="true"
:show-toggle="false"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 220 }"
/>
</template>查看源码
Light Mode with Auto Submit on Value Change Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm, Segmented } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
granularity: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Segmented',
'enum': [
{ label: 'By Day', value: 'day' },
{ label: 'By Week', value: 'week' },
],
},
operationAt: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: 'Operation Start Time',
endPlaceholder: 'Operation End Time',
},
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto query: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm.Light
:form="form"
:schema="schema"
:throttle-wait="500"
:components="{ Segmented }"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
Light Mode with Immediate Submit and No Throttling Example
Tip
QueryForm.Lightuses an independent compact flex layout and does not rely on Grid collapse logic, sogridProps,visibleWhen, and expand/collapse-related configuration do not apply in Light mode.After Element Plus
2.5.0,Selectno longer has a default width. In Light mode you should set a width manually.If you need an even more compact layout, consider
Editable.
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: 'Keyword',
},
},
status: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: 'Status',
style: {
width: '80px',
},
},
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.info(`Real-time submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm.Light
:form="form"
:schema="schema"
:throttle-wait="0"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
Action Area Fixed to the End of the Row Example
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Category A', value: 'A' },
{ label: 'Category B', value: 'B' },
],
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 220 }"
actions-at-row-end
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
Action Slot Example
This example inserts an Export button after Query and Reset, but before the expand/collapse toggle.
Tip
The action area currently occupies only one grid cell. If the content is too wide, it will wrap, so configure breakpoints carefully to leave enough room for action buttons.
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { Download, RefreshRight, Search } from '@element-plus/icons-vue'
import { createForm } from '@silver-formily/core'
import {
QueryForm,
Reset,
Submit,
} from '@silver-formily/element-plus'
import { ElButton, ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Category A', value: 'A' },
{ label: 'Category B', value: 'B' },
],
},
operationAt: {
'type': 'string',
'title': 'Operation Time',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
},
},
},
}
function onExport() {
ElMessage.success('Exporting...')
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [1075, 1410, Infinity], maxColumns: [2, 3, 4] }"
@auto-submit="handleAutoSubmit"
>
<template #actions>
<Submit :icon="Search">
Search
</Submit>
<Reset :icon="RefreshRight">
Reset
</Reset>
<ElButton :icon="Download" @click="onExport">
Export
</ElButton>
</template>
</QueryForm>
</template>查看源码
visibleWhen Example by Field Name
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: 'Please select',
},
'enum': [
{ label: 'Category A', value: 'A' },
{ label: 'Category B', value: 'B' },
],
},
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: 'Please select',
},
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: 'Start Time',
endPlaceholder: 'End Time',
},
},
remark: {
'type': 'string',
'title': 'Notes',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 240 }"
:visible-when="(context) => {
if (!context.collapsed)
return true
const name = context.field?.address?.toString() ?? ''
const primary = ['keyword', 'status']
if (primary.includes(name))
return true
return false
}"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
visibleWhen Example with the First Two Rows Visible When Collapsed
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Category A', value: 'A' },
{ label: 'Category B', value: 'B' },
],
},
department: {
'type': 'string',
'title': 'Department',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
priority: {
'type': 'string',
'title': 'Priority',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'High', value: 'high' },
{ label: 'Medium', value: 'medium' },
{ label: 'Low', value: 'low' },
],
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: 'Start Time',
endPlaceholder: 'End Time',
},
},
updatedAt: {
'type': 'string',
'title': 'Updated At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: 'Start Time',
endPlaceholder: 'End Time',
},
},
source: {
'type': 'string',
'title': 'Source',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Web', value: 'web' },
{ label: 'App', value: 'app' },
],
},
region: {
'type': 'string',
'title': 'Region',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
tag: {
'type': 'string',
'title': 'Tags',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remark: {
'type': 'string',
'title': 'Notes',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 240 }"
:visible-when="(context) => {
if (!context.collapsed)
return true
// shadowRow starts counting from 1, and <= 2 means keeping the first two rows
return (context.node.shadowRow ?? 0) <= 2
}"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
visibleWhen Example with the First N Items Visible When Collapsed
<script setup lang="ts">
import type { ISchema } from '@silver-formily/json-schema'
import { createForm } from '@silver-formily/core'
import { QueryForm } from '@silver-formily/element-plus'
import { ElMessage } from 'element-plus'
const form = createForm()
const collapsedVisibleCount = 3
const schema: ISchema = {
type: 'object',
properties: {
keyword: {
'type': 'string',
'title': 'Keyword',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
status: {
'type': 'string',
'title': 'Status',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Enabled', value: 'enabled' },
{ label: 'Disabled', value: 'disabled' },
],
},
owner: {
'type': 'string',
'title': 'Owner',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
category: {
'type': 'string',
'title': 'Category',
'x-decorator': 'FormItem',
'x-component': 'Select',
'enum': [
{ label: 'Category A', value: 'A' },
{ label: 'Category B', value: 'B' },
],
},
createdAt: {
'type': 'string',
'title': 'Created At',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
startPlaceholder: 'Start Time',
endPlaceholder: 'End Time',
},
},
remark: {
'type': 'string',
'title': 'Notes',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
async function handleAutoSubmit(values: any) {
ElMessage.success(`Auto submit: ${JSON.stringify(values)}`)
}
</script>
<template>
<QueryForm
:form="form"
:schema="schema"
:grid-props="{ breakpoints: [900, Infinity], maxColumns: [3, 4], maxWidth: 240 }"
:visible-when="(context) => {
if (!context.collapsed)
return true
return context.index < collapsedVisibleCount
}"
@auto-submit="handleAutoSubmit"
/>
</template>查看源码
API
Tip
Both QueryForm and QueryForm.Light inherit and forward props from Form, such as form, layout, labelAlign, size, and events like onAutoSubmit, so they are not repeated here.
QueryForm Props
| Prop | Description | Type | Default |
|---|---|---|---|
schema | JSON Schema rendering | ISchema | - |
schemaField | Custom SchemaField | Component | - |
components | JSON Schema component mapping. Merged with the built-in mapping, and duplicate names override the built-ins. | Record<string, Component> | {} |
gridProps | Parameters used to create the Grid, excluding shouldVisible and maxRows | Omit<IGridOptions, 'shouldVisible' | 'maxRows'> | {} |
defaultExpanded | Whether the form is expanded initially | boolean | false |
showToggle | Whether to show the expand/collapse toggle button. When false, all search items are always shown. | boolean | true |
actionsAtRowEnd | Whether the action area is fixed to the right end of the row | boolean | false |
visibleWhen | Field visibility predicate | QueryFormVisibleContext | - |
submitText | Submit button text | string | Search |
resetText | Reset button text | string | Reset |
expandText | Expand button text | string | Expand |
collapseText | Collapse button text | string | Collapse |
showSubmit | Whether to show the submit button | boolean | true |
showReset | Whether to show the reset button | boolean | true |
submitProps | Props forwarded to Submit | Record<string, any> | - |
resetProps | Props forwarded to Reset | Record<string, any> | - |
Slots
| Slot | Description | Slot Props |
|---|---|---|
default | Form content in Markup Schema scenarios | - |
actions | Custom action-button area | { expanded, toggle, type } |
collapse | Custom expand/collapse trigger | { expanded, toggle, type } |
Tip
Possible values for type are 'incomplete-wrap' | 'collapsible' | 'complete-wrap'.
QueryForm.Light Props
| Prop | Description | Type | Default |
|---|---|---|---|
schema | JSON Schema rendering | ISchema | - |
schemaField | Custom SchemaField | Component | - |
components | Components used by JSON Schema. Merged with the default registration. | Record<string, Component> | Most commonly used QueryForm-friendly inputs |
throttleWait | Throttle duration in milliseconds for auto submission on value change | number | 300 |
QueryForm.Light Slots
| Slot | Description | Slot Props |
|---|---|---|
default | Form content in Markup Schema scenarios | - |
Tip
QueryForm.Light does not support the actions / collapse slots and does not support Grid-collapse-related configuration.
visibleWhen Context
QueryFormVisibleContext
ts
export interface QueryFormVisibleContext {
field?: GeneralField
schema?: ISchema
index: number
node: GridNode
grid: Grid<HTMLElement>
collapsed: boolean
breakpoint: number
}
export type QueryFormVisible = (context: QueryFormVisibleContext) => boolean