Forms documentation updates
tugcekucukoglu
parent
ff8de145ed
commit
ac099a2c92
|
|
@ -1,4 +1,446 @@
|
||||||
{
|
{
|
||||||
|
"form": {
|
||||||
|
"description": "Form provides validation functionality and manages form state.\n\n[Live Demo](https://www.primevue.org/form/)",
|
||||||
|
"components": {
|
||||||
|
"default": {
|
||||||
|
"description": "Form provides validation functionality and manages form state.",
|
||||||
|
"methods": {
|
||||||
|
"description": "Defines methods that can be accessed by the component's reference.",
|
||||||
|
"values": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interfaces": {
|
||||||
|
"description": "Defines the custom interfaces used by the module.",
|
||||||
|
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||||
|
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||||
|
"typeDescription": "Defines the custom types used by the module.",
|
||||||
|
"values": {
|
||||||
|
"PassThroughOptions": {
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "mergeSections",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "mergeProps",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "PassThroughMergePropsType",
|
||||||
|
"default": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"FormPassThroughMethodOptions": {
|
||||||
|
"description": "Custom passthrough(pt) option method.",
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "instance",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any",
|
||||||
|
"default": "",
|
||||||
|
"description": "Defines instance."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "props",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "FormProps",
|
||||||
|
"default": "",
|
||||||
|
"description": "Defines valid properties."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "attrs",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any",
|
||||||
|
"default": "",
|
||||||
|
"description": "Defines valid attributes."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "parent",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any",
|
||||||
|
"default": "",
|
||||||
|
"description": "Defines parent options."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "global",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "undefined | object",
|
||||||
|
"default": "",
|
||||||
|
"description": "Defines passthrough(pt) options in global config."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"FormPassThroughOptions": {
|
||||||
|
"description": "Custom passthrough(pt) options.",
|
||||||
|
"relatedProp": "FormProps.pt",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "root",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "FormPassThroughOptionType",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to pass attributes to the root's DOM element."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "hooks",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to manage all lifecycle hooks."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"FormPassThroughAttributes": {
|
||||||
|
"description": "Custom passthrough attributes for each DOM elements",
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "[key: string]",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"FormProps": {
|
||||||
|
"description": "Defines valid properties in Form component.",
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "resolver",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "initialValues",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Record<string, any>",
|
||||||
|
"default": "",
|
||||||
|
"description": "The initial values for the form fields."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnValueUpdate",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": "true",
|
||||||
|
"description": "Whether to validate the form fields when the values change."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnBlur",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": "false",
|
||||||
|
"description": "Whether to validate the form fields when they lose focus (on blur)."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnMount",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": "false",
|
||||||
|
"description": "Whether to validate the form fields immediately after the form is mounted."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnSubmit",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": "true",
|
||||||
|
"description": "Whether to validate the form fields when the form is submitted."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "dt",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any",
|
||||||
|
"default": "",
|
||||||
|
"description": "It generates scoped CSS variables using design tokens for the component."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "pt",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "PassThrough<FormPassThroughOptions>",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to pass attributes to DOM elements inside the component."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ptOptions",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "PassThroughOptions",
|
||||||
|
"default": "",
|
||||||
|
"description": "Used to configure passthrough(pt) options of the component."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "unstyled",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean",
|
||||||
|
"default": "false",
|
||||||
|
"description": "When enabled, it removes component related styles in the core."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"FormSlots": {
|
||||||
|
"description": "Defines valid slots in Form component.",
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "default",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"FormEmitsOptions": {
|
||||||
|
"description": "Defines valid emits in Form component.",
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "submit",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tokens": {
|
||||||
|
"description": "Define design tokens used by the component.",
|
||||||
|
"values": {
|
||||||
|
"PassThroughOptions": {
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"FormPassThroughMethodOptions": {
|
||||||
|
"description": "Custom passthrough(pt) option method.",
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"FormPassThroughOptions": {
|
||||||
|
"description": "Custom passthrough(pt) options.",
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"FormPassThroughAttributes": {
|
||||||
|
"description": "Custom passthrough attributes for each DOM elements",
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"FormProps": {
|
||||||
|
"description": "Defines valid properties in Form component.",
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"FormSlots": {
|
||||||
|
"description": "Defines valid slots in Form component.",
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"FormEmitsOptions": {
|
||||||
|
"description": "Defines valid emits in Form component.",
|
||||||
|
"props": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"types": {
|
||||||
|
"description": "Defines the custom types used by the module.",
|
||||||
|
"values": {
|
||||||
|
"PassThroughMergePropsType": {
|
||||||
|
"values": "(args: any) => undefined | boolean | undefined",
|
||||||
|
"description": "From primevue/passthrough/index.d.ts"
|
||||||
|
},
|
||||||
|
"FormPassThroughOptionType": {
|
||||||
|
"values": "FormPassThroughAttributes | (options: FormPassThroughMethodOptions) => undefined | string | null | undefined"
|
||||||
|
},
|
||||||
|
"FormEmits": {
|
||||||
|
"values": "EmitFn<FormEmitsOptions>"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"formstyle": {
|
||||||
|
"description": "[Live Demo](https://www.primevue.org/form/)",
|
||||||
|
"interfaces": {
|
||||||
|
"description": "Defines the custom interfaces used by the module.",
|
||||||
|
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||||
|
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||||
|
"typeDescription": "Defines the custom types used by the module.",
|
||||||
|
"values": {
|
||||||
|
"FormStyle": {
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [],
|
||||||
|
"methods": [],
|
||||||
|
"extendedTypes": "default"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tokens": {
|
||||||
|
"description": "Define design tokens used by the component.",
|
||||||
|
"values": {
|
||||||
|
"FormStyle": {
|
||||||
|
"props": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"form/src/resolvers": {},
|
||||||
|
"form/src/useform": {
|
||||||
|
"functions": {
|
||||||
|
"description": "Defines the custom functions used by the module.",
|
||||||
|
"values": {
|
||||||
|
"useForm": {
|
||||||
|
"name": "useForm",
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"name": "options",
|
||||||
|
"type": "useFormOptions"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"returnType": "useFormReturn"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interfaces": {
|
||||||
|
"description": "Defines the custom interfaces used by the module.",
|
||||||
|
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||||
|
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||||
|
"typeDescription": "Defines the custom types used by the module.",
|
||||||
|
"values": {
|
||||||
|
"useFormReturn": {
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "defineField",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "handleSubmit",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validate",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "reset",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "valid",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "states",
|
||||||
|
"optional": false,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "any",
|
||||||
|
"default": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
},
|
||||||
|
"useFormOptions": {
|
||||||
|
"relatedProp": "",
|
||||||
|
"props": [
|
||||||
|
{
|
||||||
|
"name": "resolver",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Function",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "initialValues",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "Record<string, any>",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnValueUpdate",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnBlur",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnMount",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "validateOnSubmit",
|
||||||
|
"optional": true,
|
||||||
|
"readonly": false,
|
||||||
|
"type": "boolean | string[]",
|
||||||
|
"default": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"methods": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tokens": {
|
||||||
|
"description": "Define design tokens used by the component.",
|
||||||
|
"values": {
|
||||||
|
"useFormReturn": {
|
||||||
|
"props": []
|
||||||
|
},
|
||||||
|
"useFormOptions": {
|
||||||
|
"props": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"accordion": {
|
"accordion": {
|
||||||
"description": "Accordion groups a collection of contents in tabs.\n\n[Live Demo](https://www.primevue.org/accordion/)",
|
"description": "Accordion groups a collection of contents in tabs.\n\n[Live Demo](https://www.primevue.org/accordion/)",
|
||||||
"components": {
|
"components": {
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,45 @@
|
||||||
<template>
|
<template>
|
||||||
<DocPTViewer :docs="docs">
|
<DocPTViewer :docs="docs">
|
||||||
<Card style="width: 25rem">
|
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||||
<template #title>Advanced Card</template>
|
<div class="flex flex-col gap-2">
|
||||||
<template #subtitle>Card subtitle</template>
|
<InputText name="username" type="text" placeholder="Username" fluid />
|
||||||
<template #content>
|
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.errors[0]?.message }}</Message>
|
||||||
<p class="m-0">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
|
|
||||||
quas!
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
<template #footer>
|
|
||||||
<div class="flex gap-4 mt-1">
|
|
||||||
<Button label="Cancel" severity="secondary" outlined class="w-full" />
|
|
||||||
<Button label="Save" class="w-full" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<Button type="submit" severity="secondary" label="Submit" />
|
||||||
</Card>
|
</Form>
|
||||||
</DocPTViewer>
|
</DocPTViewer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getPTOptions } from '@/components/doc/helpers';
|
import { getPTOptions } from '@/components/doc/helpers';
|
||||||
|
import { zodResolver } from '@primevue/form/resolvers';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
docs: [
|
docs: [
|
||||||
{
|
{
|
||||||
data: getPTOptions('Card'),
|
data: getPTOptions('Form'),
|
||||||
key: 'Card'
|
key: 'Form'
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
initialValues: {
|
||||||
|
username: ''
|
||||||
|
},
|
||||||
|
resolver: zodResolver(
|
||||||
|
z.object({
|
||||||
|
username: z.string().min(1, { message: 'Username is required.' })
|
||||||
|
})
|
||||||
|
)
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onFormSubmit({ valid }) {
|
||||||
|
if (valid) {
|
||||||
|
this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Component does not apply any styling.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>
|
|
||||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
|
|
||||||
PrimeVue components with Tailwind CSS.
|
|
||||||
</p>
|
|
||||||
</DocSectionText>
|
|
||||||
</template>
|
|
||||||
|
|
@ -9,9 +9,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
import StyledDoc from './StyledDoc.vue';
|
||||||
import { getStyleOptions } from '@/components/doc/helpers';
|
|
||||||
import TailwindDoc from './TailwindDoc.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -20,27 +18,7 @@ export default {
|
||||||
{
|
{
|
||||||
id: 'theming.styled',
|
id: 'theming.styled',
|
||||||
label: 'Styled',
|
label: 'Styled',
|
||||||
children: [
|
component: StyledDoc
|
||||||
{
|
|
||||||
id: 'theming.classes',
|
|
||||||
label: 'CSS Classes',
|
|
||||||
description: 'List of class names used in the styled mode.',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getStyleOptions('Form')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'theming.unstyled',
|
|
||||||
label: 'Unstyled',
|
|
||||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 'theming.tailwind',
|
|
||||||
label: 'Tailwind',
|
|
||||||
component: TailwindDoc
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,14 @@
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"incremental": true
|
"incremental": true
|
||||||
},
|
},
|
||||||
"include": ["../../packages/primevue/src/**/*.d.ts", "../../packages/primevue/src/**/style/*.d.ts", "../../packages/themes/types", "../packages/themes/src/**/**/index.js", "../packages/form/src/**/*.d.ts"],
|
"include": [
|
||||||
|
"../../packages/primevue/src/**/*.d.ts",
|
||||||
|
"../../packages/primevue/src/**/style/*.d.ts",
|
||||||
|
"../../packages/themes/types",
|
||||||
|
"../packages/themes/src/**/**/index.js",
|
||||||
|
"../packages/form/src/**/*.d.ts",
|
||||||
|
"../../packages/form/src/**/*.d.ts",
|
||||||
|
"../../packages/form/src/**/style/*.d.ts"
|
||||||
|
],
|
||||||
"exclude": ["node_modules", "**/node_modules", "**/dist"]
|
"exclude": ["node_modules", "**/node_modules", "**/dist"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue