@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/fluid.md

@@ -0,0 +1,104 @@
+# Fluid
+
+Fluid is a layout component to make descendant components span full width of their container.
+
+## Basic
+
+Components with the fluid option like InputText have the ability to span the full width of their component. Enabling the fluid for each component individually may be cumbersome so wrap the content with Fluid instead for an easier alternative.
+
+```vue
+<template>
+    <div>
+        <Fluid>
+            <Label for="with-fluid" class="font-bold! mb-2 block">With Fluid</Label>
+            <InputText id="with-fluid" placeholder="Type..." />
+        </Fluid>
+    </div>
+</template>
+
+<script setup>
+import Fluid from 'primevue/fluid';
+import InputText from 'primevue/inputtext';
+import Label from 'primevue/label';
+<\/script>
+```
+
+## Comparison
+
+The fluid property can be enabled per component, or applied to a group of components by wrapping them with Fluid . A child component's own fluid property takes precedence over the container, as shown in the last sample.
+
+```vue
+<template>
+    <div class="flex flex-col gap-6">
+        <div>
+            <Label for="non-fluid" class="font-bold! mb-2 block">Non-Fluid</Label>
+            <InputText id="non-fluid" />
+        </div>
+
+        <div>
+            <Label for="fluid" class="font-bold! mb-2 block">Fluid Prop</Label>
+            <InputText id="fluid" fluid />
+        </div>
+
+        <Fluid>
+            <span class="font-bold mb-2 block">Fluid Container</span>
+            <div class="grid grid-cols-2 gap-4">
+                <div>
+                    <InputText />
+                </div>
+                <div>
+                    <InputText />
+                </div>
+                <div class="col-span-full">
+                    <InputText />
+                </div>
+                <div>
+                    <InputText :fluid="false" placeholder="Non-Fluid" />
+                </div>
+            </div>
+        </Fluid>
+    </div>
+</template>
+
+<script setup>
+import Fluid from 'primevue/fluid';
+import InputText from 'primevue/inputtext';
+import Label from 'primevue/label';
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader Fluid does not require any roles and attributes. Keyboard Support Component does not include any interactive elements.
+
+## Fluid API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<FluidPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Slots
+
+| Name |Parameters |Description |
+| --- | --- | --- |
+| default | Function |  |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | FluidPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-fluid | Class name of the root element |

package/data/llms/components/focustrap.md

@@ -0,0 +1,59 @@
+# Focus Trap
+
+Focus Trap keeps focus within a certain DOM element while tabbing.
+
+## Basic
+
+FocusTrap is applied to a container element with the v-focustrap directive.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <div v-focustrap class="w-full sm:w-80 flex flex-col gap-5">
+            <IconField>
+                <InputIcon>
+                    <User />
+                </InputIcon>
+                <InputText id="input" v-model="name" type="text" placeholder="Name" autofocus fluid />
+            </IconField>
+
+            <IconField>
+                <InputIcon>
+                    <Envelope />
+                </InputIcon>
+                <InputText id="email" v-model="email" type="email" placeholder="Email" fluid />
+            </IconField>
+
+            <div class="flex items-center gap-2">
+                <Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
+                <label for="accept" class="text-sm">I agree to the terms and conditions.</label>
+            </div>
+
+            <Button type="submit" class="mt-2 w-full">Submit</Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Envelope from '@primeicons/vue/envelope';
+import User from '@primeicons/vue/user';
+
+const name = ref();
+const email = ref();
+const accept = ref(false);
+<\/script>
+```
+
+## Focus Trap API
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | FocusTrapDirectivePassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| firstFocusableElement | FocusTrapDirectivePassThroughOptionType | Used to pass attributes to the first focusable element's DOM element. |
+| lastFocusableElement | FocusTrapDirectivePassThroughOptionType | Used to pass attributes to the last focusable element's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming

package/data/llms/components/forms.md

@@ -0,0 +1,344 @@
+# Forms
+
+The PrimeVue Forms library provides comprehensive form state management with built-in validation support.
+
+## Download
+
+Forms add-on is available for download on the npm registry.
+
+```vue
+# Using npm
+npm install @primevue/forms
+
+# Using yarn
+yarn add @primevue/forms
+
+# Using pnpm
+pnpm add @primevue/forms
+```
+
+## Import
+
+The form component is responsible for managing the form state and must encapsulate the form fields.
+
+```vue
+import { Form } from '@primevue/forms';
+```
+
+## Basic
+
+All PrimeVue form components are designed for seamless integration with the forms library. Instead of using the standard v-model , the name property is used to link a state object that tracks values, errors, and actions. The form component provides four key properties for state management.
+
+```vue
+<template>
+    <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <div class="flex flex-col gap-1">
+            <InputText name="username" type="text" placeholder="Username" fluid />
+            <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
+        </div>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## States
+
+The $form object tracks the state management of the fields. Each field is linked with the name property. View the FormFieldState type in the API documentation for details about each property.
+
+```vue
+<template>
+    <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="grid lg:grid-cols-2 gap-4 w-full">
+        <div class="flex flex-col justify-center items-center gap-4">
+            <InputText name="username" type="text" placeholder="Username" class="w-full sm:w-56" />
+            <Button type="submit" severity="secondary" class="w-full sm:w-56">Submit</Button>
+        </div>
+        <Fieldset legend="Form States" class="h-80 overflow-auto">
+            <pre class="whitespace-pre-wrap">{{ $form }}</pre>
+        </Fieldset>
+    </Form>
+</template>
+```
+
+## Resolvers
+
+Validations are implemented with the resolver property. A custom resolver is responsible for handling the validation and returning an errors object with key-value pairs where key is the form field name and value is an array of error object data. For productivity, we recommend using a schema validation library instead of building your own custom validation logic. The forms library provide built-in resolvers for popular options including Zod , Yup , Joi , Valibot , and Superstruct that can be imported from @primevue/forms/resolvers path.
+
+```vue
+<template>
+    <Form v-slot="$form" :initialValues :resolver="resolver" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <div class="flex flex-col gap-1">
+            <InputText name="username" type="text" placeholder="Username" fluid />
+            <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
+        </div>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## ValidateOn
+
+Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission. These behaviors can be configured at form level or on specific fields via the validateOnValueUpdate , validateOnBlur , validateOnMount , and validateOnSubmit options of the formControl property. In this example, form disables validateOnValueUpdate and enables validateOnBlur at form level, and validates firstName on mount. The firstName field, overrides the form level setting locally.
+
+```vue
+<template>
+    <Form v-slot="$form" :initialValues :resolver :validateOnValueUpdate="false" :validateOnBlur="true" :validateOnMount="['firstName']" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <div class="flex flex-col gap-1">
+            <InputText name="username" type="text" placeholder="Username" fluid />
+            <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText name="firstName" type="text" placeholder="First Name" fluid :formControl="{ validateOnValueUpdate: true }" />
+            <Message v-if="$form.firstName?.invalid" severity="error" size="small" variant="simple">{{ $form.firstName.error.message }}</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText name="lastName" type="text" placeholder="Last Name" fluid />
+            <Message v-if="$form.lastName?.invalid" severity="error" size="small" variant="simple">{{ $form.lastName.error.message }}</Message>
+        </div>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## Import
+
+The FormField is a helper component that provides validation and tracking for input elements, offering a more flexible structure to bind PrimeVue, non-PrimeVue components or native HTML elements to Form API. Additionally, with props like validateOn* , initialValue , resolver , and name , behaviors can be controlled directly from this component.
+
+```vue
+import { FormField } from '@primevue/forms';
+```
+
+## Built-in
+
+Although PrimeVue components have built-in support for the Form API, you may still prefer to utilize the components as wrapped with the FormField. This is a matter of preference, for example in case you are also using FormField for other 3rd party components, your own custom components, and native elements, for consistency it may be an option.
+
+```vue
+<template>
+    <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
+            <InputText type="text" placeholder="Username" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## Non PrimeVue
+
+Form API is not strictly tied to PrimeVue components, providing a flexible way to manage validation and state for any native HTML elements, your own custom components or third-party libraries.
+
+```vue
+<template>
+    <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <FormField v-slot="$field" name="username" initialValue="" class="flex flex-col gap-1">
+            <input type="text" placeholder="Username" :class="[{ error: $field?.invalid }]" v-bind="$field.props" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <FormField v-slot="$field" name="password" initialValue="PrimeVue" class="flex flex-col gap-1">
+            <input v-model="$field.value" type="password" placeholder="Password" :class="[{ error: $field?.invalid }]" @input="$field.onInput" @blur="$field.onBlur" @change="$field.onChange" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## Resolver
+
+Each FormField can have its own dedicated resolver, allowing you to define custom validation logic for individual fields. This flexibility enables tailored validation rules, ensuring that each form field meets specific criteria.
+
+```vue
+<template>
+    <Form :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-80">
+        <FormField v-slot="$field" name="username" initialValue="" :resolver="zodUserNameResolver" class="flex flex-col gap-1">
+            <InputText type="text" placeholder="Username" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <FormField v-slot="$field" name="firstname" initialValue="" :resolver="yupFirstNameResolver" class="flex flex-col gap-1">
+            <InputText type="text" placeholder="First Name" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <FormField v-slot="$field" name="lastname" initialValue="" :resolver="valibotLastNameResolver" class="flex flex-col gap-1">
+            <InputText type="text" placeholder="Last Name" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <FormField v-slot="$field" name="password" initialValue="" :resolver="customPasswordResolver" class="flex flex-col gap-1">
+            <Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <FormField v-slot="$field" name="details" class="flex flex-col gap-1">
+            <Textarea placeholder="Details" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## Template
+
+It renders as a HTML div element, but this behavior can be modified using the as and asChild props to render different HTML elements or to pass a custom component, allowing for greater flexibility in form structure.
+
+```vue
+<template>
+    <Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
+        <FormField v-slot="$field" as="section" name="username" initialValue="" class="flex flex-col gap-2">
+            <InputText type="text" placeholder="Username" />
+            <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+        </FormField>
+        <FormField v-slot="$field" asChild name="password" initialValue="">
+            <section class="flex flex-col gap-2">
+                <Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
+                <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
+            </section>
+        </FormField>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## Submit
+
+The submit callback returns an object that encapsulates the form's validity, any existing errors, and its current state. This enables access to the form values, validation status, and any errors present at the time of submission. View the FormSubmitEvent in the API documentation for more information about the available event data.
+
+```vue
+<template>
+    <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
+        <div class="flex flex-col gap-1">
+            <InputText name="username" type="text" placeholder="Username" fluid />
+            <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
+            <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+                <ul class="my-0 px-4 flex flex-col gap-1">
+                    <li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
+                </ul>
+            </Message>
+        </div>
+        <Button type="submit" severity="secondary">Submit</Button>
+    </Form>
+</template>
+```
+
+## Dynamic
+
+This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures. The components named Dynamic* shown in this example are not built-in, and only available for sampling purposes. First form uses a declarative approach whereas second form goes for a programmatic approach. We suggest running this sample in StackBlitz to view the comprehensive implementation.
+
+```vue
+<template>
+    <Fieldset legend="Form 1" pt:content:class="flex justify-center">
+        <DynamicForm @submit="onFormSubmit('Form 1', $event)">
+            <DynamicFormField groupId="userId_1" name="username">
+                <DynamicFormLabel>Username</DynamicFormLabel>
+                <DynamicFormControl defaultValue="PrimeVue" fluid :schema="userNameSchema" />
+                <DynamicFormMessage />
+            </DynamicFormField>
+            <DynamicFormField groupId="passId_1" name="password">
+                <DynamicFormLabel>Password</DynamicFormLabel>
+                <DynamicFormControl as="Password" :feedback="false" toggleMask fluid :schema="passwordSchema" />
+                <DynamicFormMessage errorType="minimum" />
+                <DynamicFormMessage errorType="maximum" />
+                <DynamicFormMessage errorType="uppercase" severity="warn" />
+                <DynamicFormMessage errorType="lowercase" severity="warn" />
+                <DynamicFormMessage errorType="number" severity="secondary" />
+            </DynamicFormField>
+            <DynamicFormSubmit />
+        </DynamicForm>
+    </Fieldset>
+
+    <Fieldset legend="Form 2" pt:content:class="flex justify-center">
+        <DynamicForm :fields @submit="onFormSubmit('Form 2', $event)" />
+    </Fieldset>
+</template>
+```
+
+## Accessibility
+
+Screen Reader Form does not require any roles and attributes. Keyboard Support Component does not include any interactive elements.
+
+## Form API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| resolver | Function | - |  |
+| initialValues | Record<string, any> | - | The initial values for the form fields. |
+| validateOnValueUpdate | boolean \| string[] | true | Whether to validate the form fields when the values change. |
+| validateOnBlur | boolean \| string[] | false | Whether to validate the form fields when they lose focus (on blur). |
+| validateOnMount | boolean \| string[] | false | Whether to validate the form fields immediately after the form is mounted. |
+| validateOnSubmit | boolean \| string[] | true | Whether to validate the form fields when the form is submitted. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<FormPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | PassThroughOptions | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Slots
+
+| Name |Parameters |Description |
+| --- | --- | --- |
+| default | Function |  |
+
+### Emits
+
+| Name |Parameters |Description |
+| --- | --- | --- |
+| submit | Function |  |
+| reset | Function |  |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | FormPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-form | The class of root element |
+
+## Form Field API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| name | string | - | The name of the form field. |
+| resolver | Function | - |  |
+| initialValue | any | - | The initial value for the form field. |
+| validateOnValueUpdate | boolean | - | Whether to validate the form field when the value change. |
+| validateOnBlur | boolean | - | Whether to validate the form field when it loses focus (on blur). |
+| validateOnMount | boolean | - | Whether to validate the form field immediately after the form is mounted. |
+| validateOnSubmit | boolean | - | Whether to validate the form field when the form is submitted. |
+| as | string \| Component | DIV | Use to change the HTML tag of root element. |
+| asChild | boolean | false | When enabled, it changes the default rendered element for the one passed as a child element. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<FormFieldPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | PassThroughOptions | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Slots
+
+| Name |Parameters |Description |
+| --- | --- | --- |
+| default | Function |  |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | FormFieldPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-formfield | The class of root element |