create form and modal components, update datatable persistant filtering
This commit is contained in:
parent
b70e08026d
commit
8d9bb81fe2
23 changed files with 3502 additions and 74 deletions
332
frontend/documentation/components/DataTable.md
Normal file
332
frontend/documentation/components/DataTable.md
Normal file
|
|
@ -0,0 +1,332 @@
|
|||
# DataTable Component Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
A feature-rich data table component built with PrimeVue's DataTable. This component provides advanced functionality including pagination, sorting, filtering, row selection, and customizable column types with persistent filter state management.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<DataTable
|
||||
:columns="tableColumns"
|
||||
:data="tableData"
|
||||
table-name="my-table"
|
||||
@row-click="handleRowClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import DataTable from './components/common/DataTable.vue'
|
||||
|
||||
const tableColumns = ref([
|
||||
{
|
||||
fieldName: 'name',
|
||||
label: 'Name',
|
||||
sortable: true,
|
||||
filterable: true
|
||||
},
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: 'Status',
|
||||
type: 'status',
|
||||
sortable: true,
|
||||
filterable: true
|
||||
}
|
||||
])
|
||||
|
||||
const tableData = ref([
|
||||
{ id: 1, name: 'John Doe', status: 'completed' },
|
||||
{ id: 2, name: 'Jane Smith', status: 'in progress' }
|
||||
])
|
||||
|
||||
const handleRowClick = (event) => {
|
||||
console.log('Row clicked:', event.data)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
### `columns` (Array) - Required
|
||||
- **Description:** Array of column configuration objects that define the table structure
|
||||
- **Type:** `Array<Object>`
|
||||
- **Required:** `true`
|
||||
|
||||
### `data` (Array) - Required
|
||||
- **Description:** Array of data objects to display in the table
|
||||
- **Type:** `Array<Object>`
|
||||
- **Required:** `true`
|
||||
|
||||
### `tableName` (String) - Required
|
||||
- **Description:** Unique identifier for the table, used for persistent filter state management
|
||||
- **Type:** `String`
|
||||
- **Required:** `true`
|
||||
|
||||
### `filters` (Object)
|
||||
- **Description:** Initial filter configuration object
|
||||
- **Type:** `Object`
|
||||
- **Default:** `{ global: { value: null, matchMode: FilterMatchMode.CONTAINS } }`
|
||||
|
||||
## Column Configuration
|
||||
|
||||
Each column object in the `columns` array supports the following properties:
|
||||
|
||||
### Basic Properties
|
||||
- **`fieldName`** (String, required) - The field name in the data object
|
||||
- **`label`** (String, required) - Display label for the column header
|
||||
- **`sortable`** (Boolean, default: `false`) - Enables sorting for this column
|
||||
- **`filterable`** (Boolean, default: `false`) - Enables row-level filtering for this column
|
||||
|
||||
### Column Types
|
||||
- **`type`** (String) - Defines special rendering behavior for the column
|
||||
|
||||
#### Available Types:
|
||||
|
||||
##### `'status'` Type
|
||||
Renders values as colored tags/badges:
|
||||
```javascript
|
||||
{
|
||||
fieldName: 'status',
|
||||
label: 'Status',
|
||||
type: 'status',
|
||||
sortable: true,
|
||||
filterable: true
|
||||
}
|
||||
```
|
||||
|
||||
**Status Colors:**
|
||||
- `'completed'` → Success (green)
|
||||
- `'in progress'` → Warning (yellow/orange)
|
||||
- `'not started'` → Danger (red)
|
||||
- Other values → Info (blue)
|
||||
|
||||
##### `'button'` Type
|
||||
Renders values as clickable buttons:
|
||||
```javascript
|
||||
{
|
||||
fieldName: 'action',
|
||||
label: 'Action',
|
||||
type: 'button'
|
||||
}
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
### `rowClick`
|
||||
- **Description:** Emitted when a button-type column is clicked
|
||||
- **Payload:** PrimeVue slot properties object containing row data
|
||||
- **Usage:** `@row-click="handleRowClick"`
|
||||
|
||||
```javascript
|
||||
const handleRowClick = (slotProps) => {
|
||||
console.log('Clicked row data:', slotProps.data)
|
||||
console.log('Row index:', slotProps.index)
|
||||
}
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
### Pagination
|
||||
- **Rows per page options:** 5, 10, 20, 50
|
||||
- **Default rows per page:** 10
|
||||
- **Built-in pagination controls**
|
||||
|
||||
### Sorting
|
||||
- **Multiple column sorting** support
|
||||
- **Removable sort** - click to remove sort from a column
|
||||
- **Sort indicators** in column headers
|
||||
|
||||
### Filtering
|
||||
- **Row-level filtering** for filterable columns
|
||||
- **Text-based search** with real-time filtering
|
||||
- **Persistent filter state** across component re-renders
|
||||
- **Global search capability**
|
||||
|
||||
### Selection
|
||||
- **Multiple row selection** with checkboxes
|
||||
- **Meta key selection** (Ctrl/Cmd + click for individual selection)
|
||||
- **Unique row identification** using `dataKey="id"`
|
||||
|
||||
### Scrolling
|
||||
- **Vertical scrolling** with fixed height (70vh)
|
||||
- **Horizontal scrolling** for wide tables
|
||||
- **Fixed headers** during scroll
|
||||
|
||||
### State Management
|
||||
- **Persistent filters** using Pinia store (`useFiltersStore`)
|
||||
- **Automatic filter initialization** on component mount
|
||||
- **Cross-component filter synchronization**
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Table
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [
|
||||
{ fieldName: 'id', label: 'ID', sortable: true },
|
||||
{ fieldName: 'name', label: 'Name', sortable: true, filterable: true },
|
||||
{ fieldName: 'email', label: 'Email', filterable: true }
|
||||
]
|
||||
|
||||
const data = [
|
||||
{ id: 1, name: 'John Doe', email: 'john@example.com' },
|
||||
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
table-name="users-table"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Status Table
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [
|
||||
{ fieldName: 'task', label: 'Task', sortable: true, filterable: true },
|
||||
{ fieldName: 'status', label: 'Status', type: 'status', sortable: true, filterable: true },
|
||||
{ fieldName: 'assignee', label: 'Assignee', filterable: true }
|
||||
]
|
||||
|
||||
const data = [
|
||||
{ id: 1, task: 'Setup project', status: 'completed', assignee: 'John' },
|
||||
{ id: 2, task: 'Write tests', status: 'in progress', assignee: 'Jane' },
|
||||
{ id: 3, task: 'Deploy app', status: 'not started', assignee: 'Bob' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
table-name="tasks-table"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Interactive Table with Buttons
|
||||
```vue
|
||||
<script setup>
|
||||
const columns = [
|
||||
{ fieldName: 'name', label: 'Name', sortable: true, filterable: true },
|
||||
{ fieldName: 'status', label: 'Status', type: 'status', sortable: true },
|
||||
{ fieldName: 'action', label: 'Action', type: 'button' }
|
||||
]
|
||||
|
||||
const data = [
|
||||
{ id: 1, name: 'Project A', status: 'completed', action: 'View Details' },
|
||||
{ id: 2, name: 'Project B', status: 'in progress', action: 'Edit' }
|
||||
]
|
||||
|
||||
const handleRowClick = (slotProps) => {
|
||||
const { data, index } = slotProps
|
||||
console.log(`Action clicked for ${data.name} at row ${index}`)
|
||||
// Handle the action (navigate, open modal, etc.)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
table-name="projects-table"
|
||||
@row-click="handleRowClick"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Custom Filters
|
||||
```vue
|
||||
<script setup>
|
||||
import { FilterMatchMode } from '@primevue/core'
|
||||
|
||||
const customFilters = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
name: { value: 'John', matchMode: FilterMatchMode.STARTS_WITH }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:filters="customFilters"
|
||||
table-name="filtered-table"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Store Integration
|
||||
|
||||
The component integrates with a Pinia store (`useFiltersStore`) for persistent filter state:
|
||||
|
||||
### Store Methods Used
|
||||
- `initializeTableFilters(tableName, columns)` - Initialize filters for a table
|
||||
- `getTableFilters(tableName)` - Get current filters for a table
|
||||
- `updateTableFilter(tableName, fieldName, value, matchMode)` - Update a specific filter
|
||||
|
||||
### Filter Persistence
|
||||
- Filters are automatically saved when changed
|
||||
- Filters persist across component re-mounts
|
||||
- Each table maintains separate filter state based on `tableName`
|
||||
|
||||
## Styling
|
||||
|
||||
The component uses PrimeVue's default DataTable styling with:
|
||||
- **Scrollable layout** with fixed 70vh height
|
||||
- **Responsive design** that adapts to container width
|
||||
- **Consistent spacing** and typography
|
||||
- **Accessible color schemes** for status badges
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
### Large Datasets
|
||||
- **Virtual scrolling** is not implemented - consider for datasets > 1000 rows
|
||||
- **Client-side pagination** may impact performance with very large datasets
|
||||
- **Debounced filtering** helps with real-time search performance
|
||||
|
||||
### Memory Management
|
||||
- **Filter state persistence** may accumulate over time
|
||||
- Consider implementing filter cleanup for unused tables
|
||||
- **Component re-rendering** is optimized through computed properties
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use unique `tableName`** for each table instance to avoid filter conflicts
|
||||
2. **Define clear column labels** for better user experience
|
||||
3. **Enable sorting and filtering** on searchable/comparable columns
|
||||
4. **Use appropriate column types** (`status`, `button`) for better UX
|
||||
5. **Handle `rowClick` events** for interactive functionality
|
||||
6. **Consider data structure** - ensure `id` field exists for selection
|
||||
7. **Test with various data sizes** to ensure performance
|
||||
8. **Use consistent status values** for proper badge coloring
|
||||
|
||||
## Accessibility
|
||||
|
||||
The component includes:
|
||||
- **Keyboard navigation** support via PrimeVue
|
||||
- **Screen reader compatibility** with proper ARIA labels
|
||||
- **High contrast** status badges for visibility
|
||||
- **Focus management** for interactive elements
|
||||
- **Semantic HTML structure** for assistive technologies
|
||||
|
||||
## Browser Support
|
||||
|
||||
Compatible with all modern browsers that support:
|
||||
- Vue 3 Composition API
|
||||
- ES6+ features
|
||||
- CSS Grid and Flexbox
|
||||
- PrimeVue components
|
||||
|
||||
## Dependencies
|
||||
|
||||
- **Vue 3** with Composition API
|
||||
- **PrimeVue** DataTable, Column, Tag, Button, InputText components
|
||||
- **@primevue/core** for FilterMatchMode
|
||||
- **Pinia** store for state management (`useFiltersStore`)
|
||||
763
frontend/documentation/components/Form.md
Normal file
763
frontend/documentation/components/Form.md
Normal file
|
|
@ -0,0 +1,763 @@
|
|||
# Form Component Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
A highly flexible and configurable dynamic form component built with Vuetify. This component generates forms based on field configuration objects and supports various input types, validation, responsive layouts, and both controlled and uncontrolled form state management.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Form
|
||||
:fields="formFields"
|
||||
:form-data="formData"
|
||||
@submit="handleSubmit"
|
||||
@change="handleFieldChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Form from './components/common/Form.vue'
|
||||
|
||||
const formData = ref({})
|
||||
|
||||
const formFields = [
|
||||
{
|
||||
name: 'firstName',
|
||||
label: 'First Name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
cols: 12,
|
||||
md: 6
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
type: 'text',
|
||||
format: 'email',
|
||||
required: true,
|
||||
cols: 12,
|
||||
md: 6
|
||||
},
|
||||
{
|
||||
name: 'bio',
|
||||
label: 'Biography',
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
cols: 12
|
||||
}
|
||||
]
|
||||
|
||||
const handleSubmit = (data) => {
|
||||
console.log('Form submitted:', data)
|
||||
}
|
||||
|
||||
const handleFieldChange = (event) => {
|
||||
console.log('Field changed:', event.fieldName, event.value)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
### `fields` (Array) - Required
|
||||
- **Description:** Array of field configuration objects that define the form structure
|
||||
- **Type:** `Array<Object>`
|
||||
- **Required:** `true`
|
||||
|
||||
### `formData` (Object)
|
||||
- **Description:** External form data object for controlled form state
|
||||
- **Type:** `Object`
|
||||
- **Default:** `null`
|
||||
- **Note:** When provided, the form operates in controlled mode. When null, uses internal state.
|
||||
|
||||
### `onChange` (Function)
|
||||
- **Description:** Global change handler function called when any field changes
|
||||
- **Type:** `Function`
|
||||
- **Signature:** `(fieldName: string, value: any, formData: Object) => void`
|
||||
|
||||
### `onSubmit` (Function)
|
||||
- **Description:** Submit handler function called when form is submitted
|
||||
- **Type:** `Function`
|
||||
- **Signature:** `(formData: Object) => Promise<void> | void`
|
||||
|
||||
### `showSubmitButton` (Boolean)
|
||||
- **Description:** Controls visibility of the submit button
|
||||
- **Type:** `Boolean`
|
||||
- **Default:** `true`
|
||||
|
||||
### `showCancelButton` (Boolean)
|
||||
- **Description:** Controls visibility of the cancel button
|
||||
- **Type:** `Boolean`
|
||||
- **Default:** `false`
|
||||
|
||||
### `submitButtonText` (String)
|
||||
- **Description:** Text displayed on the submit button
|
||||
- **Type:** `String`
|
||||
- **Default:** `'Submit'`
|
||||
|
||||
### `cancelButtonText` (String)
|
||||
- **Description:** Text displayed on the cancel button
|
||||
- **Type:** `String`
|
||||
- **Default:** `'Cancel'`
|
||||
|
||||
### `validateOnChange` (Boolean)
|
||||
- **Description:** Enables real-time validation as fields change
|
||||
- **Type:** `Boolean`
|
||||
- **Default:** `true`
|
||||
|
||||
## Field Configuration
|
||||
|
||||
Each field object in the `fields` array supports the following properties:
|
||||
|
||||
### Basic Properties
|
||||
- **`name`** (String, required) - Unique identifier for the field
|
||||
- **`label`** (String, required) - Display label for the field
|
||||
- **`type`** (String, required) - Field input type
|
||||
- **`required`** (Boolean, default: `false`) - Makes the field mandatory
|
||||
- **`disabled`** (Boolean, default: `false`) - Disables the field
|
||||
- **`readonly`** (Boolean, default: `false`) - Makes the field read-only
|
||||
- **`placeholder`** (String) - Placeholder text for input fields
|
||||
- **`helpText`** (String) - Help text displayed below the field
|
||||
- **`defaultValue`** (Any) - Initial value for the field
|
||||
|
||||
### Layout Properties
|
||||
- **`cols`** (Number, default: `12`) - Column width on extra small screens
|
||||
- **`sm`** (Number, default: `12`) - Column width on small screens
|
||||
- **`md`** (Number, default: `6`) - Column width on medium screens
|
||||
- **`lg`** (Number, default: `6`) - Column width on large screens
|
||||
|
||||
### Validation Properties
|
||||
- **`validate`** (Function) - Custom validation function
|
||||
- **Signature:** `(value: any) => string | null`
|
||||
- **Returns:** Error message string or null if valid
|
||||
|
||||
### Field-Specific Properties
|
||||
- **`onChangeOverride`** (Function) - Field-specific change handler that overrides global onChange
|
||||
- **Signature:** `(value: any, fieldName: string, formData: Object) => void`
|
||||
|
||||
## Field Types
|
||||
|
||||
### Text Input (`type: 'text'`)
|
||||
Standard text input field with optional format validation.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'username',
|
||||
label: 'Username',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: 'Enter your username'
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`format`** (String) - Input format validation (`'email'` for email validation)
|
||||
|
||||
### Number Input (`type: 'number'`)
|
||||
Numeric input field with optional min/max constraints.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'age',
|
||||
label: 'Age',
|
||||
type: 'number',
|
||||
min: 0,
|
||||
max: 120,
|
||||
step: 1
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`min`** (Number) - Minimum allowed value
|
||||
- **`max`** (Number) - Maximum allowed value
|
||||
- **`step`** (Number) - Step increment for the input
|
||||
|
||||
### Textarea (`type: 'textarea'`)
|
||||
Multi-line text input for longer content.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'description',
|
||||
label: 'Description',
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
placeholder: 'Enter description...'
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`rows`** (Number, default: `3`) - Number of visible text lines
|
||||
|
||||
### Select Dropdown (`type: 'select'`)
|
||||
Dropdown selection field with predefined options.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'country',
|
||||
label: 'Country',
|
||||
type: 'select',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'United States', value: 'us' },
|
||||
{ label: 'Canada', value: 'ca' },
|
||||
{ label: 'Mexico', value: 'mx' }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`options`** (Array, required) - Array of option objects with `label` and `value` properties
|
||||
|
||||
### Checkbox (`type: 'checkbox'`)
|
||||
Boolean checkbox input.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'subscribe',
|
||||
label: 'Subscribe to newsletter',
|
||||
type: 'checkbox',
|
||||
defaultValue: false
|
||||
}
|
||||
```
|
||||
|
||||
### Radio Group (`type: 'radio'`)
|
||||
Radio button group for single selection from multiple options.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'gender',
|
||||
label: 'Gender',
|
||||
type: 'radio',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'Male', value: 'male' },
|
||||
{ label: 'Female', value: 'female' },
|
||||
{ label: 'Other', value: 'other' }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`options`** (Array, required) - Array of option objects with `label` and `value` properties
|
||||
|
||||
### Date Input (`type: 'date'`)
|
||||
Date picker input field.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'birthDate',
|
||||
label: 'Birth Date',
|
||||
type: 'date',
|
||||
required: true,
|
||||
min: '1900-01-01',
|
||||
max: '2025-12-31'
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`min`** (String) - Minimum allowed date (YYYY-MM-DD format)
|
||||
- **`max`** (String) - Maximum allowed date (YYYY-MM-DD format)
|
||||
|
||||
### DateTime Input (`type: 'datetime'`)
|
||||
Date and time picker input field.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'appointmentTime',
|
||||
label: 'Appointment Time',
|
||||
type: 'datetime',
|
||||
required: true
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`min`** (String) - Minimum allowed datetime
|
||||
- **`max`** (String) - Maximum allowed datetime
|
||||
|
||||
### File Input (`type: 'file'`)
|
||||
File upload input field.
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'resume',
|
||||
label: 'Resume',
|
||||
type: 'file',
|
||||
accept: '.pdf,.doc,.docx',
|
||||
multiple: false
|
||||
}
|
||||
```
|
||||
|
||||
**Additional Properties:**
|
||||
- **`accept`** (String) - File types to accept (MIME types or file extensions)
|
||||
- **`multiple`** (Boolean, default: `false`) - Allow multiple file selection
|
||||
|
||||
## Events
|
||||
|
||||
### `update:formData`
|
||||
- **Description:** Emitted when form data changes (controlled mode only)
|
||||
- **Payload:** Updated form data object
|
||||
- **Usage:** `@update:formData="handleFormDataUpdate"`
|
||||
|
||||
### `submit`
|
||||
- **Description:** Emitted when form is successfully submitted
|
||||
- **Payload:** Form data object
|
||||
- **Usage:** `@submit="handleSubmit"`
|
||||
|
||||
### `cancel`
|
||||
- **Description:** Emitted when cancel button is clicked
|
||||
- **Usage:** `@cancel="handleCancel"`
|
||||
|
||||
### `change`
|
||||
- **Description:** Emitted when any field value changes
|
||||
- **Payload:** Object with `fieldName`, `value`, and `formData` properties
|
||||
- **Usage:** `@change="handleFieldChange"`
|
||||
|
||||
## Exposed Methods
|
||||
|
||||
The component exposes several methods that can be accessed via template refs:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Form ref="formRef" :fields="fields" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
// Access exposed methods
|
||||
const validateForm = () => formRef.value.validateForm()
|
||||
const resetForm = () => formRef.value.resetForm()
|
||||
</script>
|
||||
```
|
||||
|
||||
### `validateForm()`
|
||||
- **Description:** Validates the entire form and returns validation status
|
||||
- **Returns:** `Boolean` - `true` if valid, `false` if invalid
|
||||
- **Side Effect:** Updates form error state
|
||||
|
||||
### `getCurrentFormData()`
|
||||
- **Description:** Gets the current form data object
|
||||
- **Returns:** `Object` - Current form data
|
||||
|
||||
### `resetForm()`
|
||||
- **Description:** Resets form to initial state and clears all errors
|
||||
- **Returns:** `void`
|
||||
|
||||
### `setFieldError(fieldName, error)`
|
||||
- **Description:** Sets an error message for a specific field
|
||||
- **Parameters:**
|
||||
- `fieldName` (String) - The field name
|
||||
- `error` (String) - Error message to display
|
||||
|
||||
### `clearFieldError(fieldName)`
|
||||
- **Description:** Clears the error for a specific field
|
||||
- **Parameters:**
|
||||
- `fieldName` (String) - The field name to clear
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Contact Form
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const formData = ref({})
|
||||
|
||||
const contactFields = [
|
||||
{
|
||||
name: 'firstName',
|
||||
label: 'First Name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
cols: 12,
|
||||
md: 6
|
||||
},
|
||||
{
|
||||
name: 'lastName',
|
||||
label: 'Last Name',
|
||||
type: 'text',
|
||||
required: true,
|
||||
cols: 12,
|
||||
md: 6
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
type: 'text',
|
||||
format: 'email',
|
||||
required: true,
|
||||
cols: 12
|
||||
},
|
||||
{
|
||||
name: 'message',
|
||||
label: 'Message',
|
||||
type: 'textarea',
|
||||
rows: 5,
|
||||
required: true,
|
||||
cols: 12
|
||||
}
|
||||
]
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
try {
|
||||
await sendContactForm(data)
|
||||
alert('Form submitted successfully!')
|
||||
} catch (error) {
|
||||
console.error('Submission failed:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
:fields="contactFields"
|
||||
v-model:form-data="formData"
|
||||
@submit="handleSubmit"
|
||||
submit-button-text="Send Message"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### User Registration Form
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const registrationData = ref({})
|
||||
|
||||
const registrationFields = [
|
||||
{
|
||||
name: 'username',
|
||||
label: 'Username',
|
||||
type: 'text',
|
||||
required: true,
|
||||
validate: (value) => {
|
||||
if (value && value.length < 3) {
|
||||
return 'Username must be at least 3 characters'
|
||||
}
|
||||
return null
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
type: 'text',
|
||||
format: 'email',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'age',
|
||||
label: 'Age',
|
||||
type: 'number',
|
||||
min: 18,
|
||||
max: 100,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
label: 'Country',
|
||||
type: 'select',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'United States', value: 'us' },
|
||||
{ label: 'Canada', value: 'ca' },
|
||||
{ label: 'United Kingdom', value: 'uk' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'terms',
|
||||
label: 'I agree to the terms and conditions',
|
||||
type: 'checkbox',
|
||||
required: true,
|
||||
validate: (value) => {
|
||||
if (!value) {
|
||||
return 'You must agree to the terms and conditions'
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
:fields="registrationFields"
|
||||
v-model:form-data="registrationData"
|
||||
@submit="handleRegistration"
|
||||
submit-button-text="Register"
|
||||
show-cancel-button
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Survey Form with Custom Validation
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const surveyData = ref({})
|
||||
|
||||
const surveyFields = [
|
||||
{
|
||||
name: 'satisfaction',
|
||||
label: 'How satisfied are you with our service?',
|
||||
type: 'radio',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'Very Satisfied', value: '5' },
|
||||
{ label: 'Satisfied', value: '4' },
|
||||
{ label: 'Neutral', value: '3' },
|
||||
{ label: 'Dissatisfied', value: '2' },
|
||||
{ label: 'Very Dissatisfied', value: '1' }
|
||||
],
|
||||
cols: 12
|
||||
},
|
||||
{
|
||||
name: 'feedback',
|
||||
label: 'Additional Feedback',
|
||||
type: 'textarea',
|
||||
rows: 4,
|
||||
placeholder: 'Please share your thoughts...',
|
||||
cols: 12,
|
||||
onChangeOverride: (value, fieldName, formData) => {
|
||||
// Custom logic for this field only
|
||||
console.log(`Feedback length: ${value?.length || 0} characters`)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'recommend',
|
||||
label: 'Would you recommend us to others?',
|
||||
type: 'checkbox',
|
||||
cols: 12
|
||||
}
|
||||
]
|
||||
|
||||
const handleSurveySubmit = (data) => {
|
||||
console.log('Survey submitted:', data)
|
||||
}
|
||||
|
||||
const handleFieldChange = (event) => {
|
||||
console.log('Global change handler:', event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
:fields="surveyFields"
|
||||
v-model:form-data="surveyData"
|
||||
@submit="handleSurveySubmit"
|
||||
@change="handleFieldChange"
|
||||
submit-button-text="Submit Survey"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### File Upload Form
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const uploadData = ref({})
|
||||
|
||||
const uploadFields = [
|
||||
{
|
||||
name: 'title',
|
||||
label: 'Document Title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
cols: 12
|
||||
},
|
||||
{
|
||||
name: 'category',
|
||||
label: 'Category',
|
||||
type: 'select',
|
||||
required: true,
|
||||
options: [
|
||||
{ label: 'Reports', value: 'reports' },
|
||||
{ label: 'Presentations', value: 'presentations' },
|
||||
{ label: 'Documents', value: 'documents' }
|
||||
],
|
||||
cols: 12,
|
||||
md: 6
|
||||
},
|
||||
{
|
||||
name: 'uploadDate',
|
||||
label: 'Upload Date',
|
||||
type: 'date',
|
||||
required: true,
|
||||
cols: 12,
|
||||
md: 6
|
||||
},
|
||||
{
|
||||
name: 'files',
|
||||
label: 'Select Files',
|
||||
type: 'file',
|
||||
accept: '.pdf,.doc,.docx,.ppt,.pptx',
|
||||
multiple: true,
|
||||
required: true,
|
||||
cols: 12
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
label: 'Description',
|
||||
type: 'textarea',
|
||||
rows: 3,
|
||||
helpText: 'Optional description of the uploaded files',
|
||||
cols: 12
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
:fields="uploadFields"
|
||||
v-model:form-data="uploadData"
|
||||
@submit="handleFileUpload"
|
||||
submit-button-text="Upload Files"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Form State Management
|
||||
|
||||
### Controlled Mode (External Form Data)
|
||||
When you provide a `formData` prop, the component operates in controlled mode:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// External form state
|
||||
const formData = ref({
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
:fields="fields"
|
||||
v-model:form-data="formData"
|
||||
@submit="handleSubmit"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Uncontrolled Mode (Internal Form Data)
|
||||
When no `formData` is provided, the component manages its own internal state:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Form
|
||||
:fields="fields"
|
||||
@submit="handleSubmit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const handleSubmit = (data) => {
|
||||
// Data is passed to the submit handler
|
||||
console.log('Form data:', data)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Validation
|
||||
|
||||
### Built-in Validation
|
||||
- **Required fields** - Validates that required fields are not empty
|
||||
- **Email format** - Validates email format when `format: 'email'` is used
|
||||
- **Number ranges** - Validates min/max values for number fields
|
||||
|
||||
### Custom Validation
|
||||
Each field can have a custom validation function:
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'password',
|
||||
label: 'Password',
|
||||
type: 'text',
|
||||
required: true,
|
||||
validate: (value) => {
|
||||
if (value && value.length < 8) {
|
||||
return 'Password must be at least 8 characters long'
|
||||
}
|
||||
if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
|
||||
return 'Password must contain at least one lowercase letter, one uppercase letter, and one number'
|
||||
}
|
||||
return null // Valid
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Validation Timing
|
||||
- **On change** - When `validateOnChange` is `true` (default)
|
||||
- **On submit** - Always validates on form submission
|
||||
- **Manual** - Using the exposed `validateForm()` method
|
||||
|
||||
## Responsive Layout
|
||||
|
||||
The component uses Vuetify's grid system for responsive layouts:
|
||||
|
||||
```javascript
|
||||
{
|
||||
name: 'field',
|
||||
label: 'Field',
|
||||
type: 'text',
|
||||
cols: 12, // Full width on extra small screens
|
||||
sm: 12, // Full width on small screens
|
||||
md: 6, // Half width on medium screens
|
||||
lg: 4 // One-third width on large screens
|
||||
}
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
The component uses Vuetify's design system with:
|
||||
- **Outlined variants** for consistent appearance
|
||||
- **Comfortable density** for optimal spacing
|
||||
- **Error state styling** for validation feedback
|
||||
- **Required field indicators** with red asterisks
|
||||
- **Responsive design** that adapts to screen size
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use meaningful field names** that reflect the data structure
|
||||
2. **Provide clear labels and help text** for better user experience
|
||||
3. **Implement proper validation** for data integrity
|
||||
4. **Consider responsive layout** for different screen sizes
|
||||
5. **Handle form submission errors** gracefully
|
||||
6. **Use controlled mode** when form data needs to be managed externally
|
||||
7. **Leverage custom validation** for business-specific rules
|
||||
8. **Test with various field combinations** to ensure proper behavior
|
||||
9. **Use appropriate field types** for better user experience
|
||||
10. **Provide meaningful default values** when appropriate
|
||||
|
||||
## Accessibility
|
||||
|
||||
The component includes:
|
||||
- **Proper form semantics** with native HTML form elements
|
||||
- **Label associations** for screen readers
|
||||
- **Error message announcements** for validation feedback
|
||||
- **Keyboard navigation** support throughout the form
|
||||
- **Focus management** for better usability
|
||||
- **Required field indicators** for clarity
|
||||
|
||||
## Browser Support
|
||||
|
||||
Compatible with all modern browsers that support:
|
||||
- Vue 3 Composition API
|
||||
- Vuetify 3 components
|
||||
- ES6+ features
|
||||
- CSS Grid and Flexbox
|
||||
|
||||
## Dependencies
|
||||
|
||||
- **Vue 3** with Composition API
|
||||
- **Vuetify 3** components (v-form, v-text-field, v-textarea, v-select, v-checkbox, v-radio-group, v-file-input, v-btn)
|
||||
- **Modern JavaScript** features (ES6+)
|
||||
268
frontend/documentation/components/Modal.md
Normal file
268
frontend/documentation/components/Modal.md
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
# Dynamic Modal Component Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
A flexible and customizable modal component built with Vuetify's v-dialog. This component provides extensive configuration options and supports slot-based content rendering.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Modal
|
||||
v-model:visible="isModalVisible"
|
||||
:options="modalOptions"
|
||||
@close="handleClose"
|
||||
@confirm="handleConfirm"
|
||||
>
|
||||
<p>Your modal content goes here</p>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Modal from './components/Modal.vue'
|
||||
|
||||
const isModalVisible = ref(false)
|
||||
const modalOptions = {
|
||||
title: 'My Modal',
|
||||
maxWidth: '500px'
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
console.log('Modal closed')
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
console.log('Modal confirmed')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
### `visible` (Boolean)
|
||||
- **Default:** `false`
|
||||
- **Description:** Controls the visibility state of the modal
|
||||
- **Usage:** Use with `v-model:visible` for two-way binding
|
||||
|
||||
### `options` (Object)
|
||||
- **Default:** `{}`
|
||||
- **Description:** Configuration object for customizing modal behavior and appearance
|
||||
|
||||
## Options Object Properties
|
||||
|
||||
### Dialog Configuration
|
||||
- **`persistent`** (Boolean, default: `false`) - Prevents closing when clicking outside or pressing escape
|
||||
- **`fullscreen`** (Boolean, default: `false`) - Makes the modal fullscreen
|
||||
- **`maxWidth`** (String, default: `'500px'`) - Maximum width of the modal
|
||||
- **`width`** (String) - Fixed width of the modal
|
||||
- **`height`** (String) - Fixed height of the modal
|
||||
- **`attach`** (String) - Element to attach the modal to
|
||||
- **`transition`** (String, default: `'dialog-transition'`) - CSS transition name
|
||||
- **`scrollable`** (Boolean, default: `false`) - Makes the modal content scrollable
|
||||
- **`retainFocus`** (Boolean, default: `true`) - Retains focus within the modal
|
||||
- **`closeOnBack`** (Boolean, default: `true`) - Closes modal on browser back button
|
||||
- **`closeOnContentClick`** (Boolean, default: `false`) - Closes modal when clicking content
|
||||
- **`closeOnOutsideClick`** (Boolean, default: `true`) - Closes modal when clicking outside
|
||||
- **`closeOnEscape`** (Boolean, default: `true`) - Closes modal when pressing escape key
|
||||
|
||||
### Styling Options
|
||||
- **`overlayColor`** (String) - Color of the backdrop overlay
|
||||
- **`overlayOpacity`** (Number) - Opacity of the backdrop overlay
|
||||
- **`zIndex`** (Number) - Z-index of the modal
|
||||
- **`dialogClass`** (String) - Additional CSS classes for the dialog
|
||||
- **`cardClass`** (String) - Additional CSS classes for the card
|
||||
- **`cardColor`** (String) - Background color of the card
|
||||
- **`cardVariant`** (String) - Vuetify card variant
|
||||
- **`elevation`** (Number) - Shadow elevation of the card
|
||||
- **`flat`** (Boolean) - Removes elevation
|
||||
- **`noRadius`** (Boolean) - Removes border radius
|
||||
|
||||
### Header Configuration
|
||||
- **`title`** (String) - Modal title text
|
||||
- **`showHeader`** (Boolean, default: `true`) - Shows/hides the header
|
||||
- **`showHeaderDivider`** (Boolean) - Shows divider below header
|
||||
- **`headerClass`** (String) - Additional CSS classes for header
|
||||
- **`showCloseButton`** (Boolean, default: `true`) - Shows/hides close button
|
||||
- **`closeButtonColor`** (String, default: `'grey'`) - Color of close button
|
||||
- **`closeIcon`** (String, default: `'mdi-close'`) - Icon for close button
|
||||
|
||||
### Content Configuration
|
||||
- **`message`** (String) - Default message content (HTML supported)
|
||||
- **`contentClass`** (String) - Additional CSS classes for content area
|
||||
- **`contentHeight`** (String) - Fixed height of content area
|
||||
- **`contentMaxHeight`** (String) - Maximum height of content area
|
||||
- **`contentMinHeight`** (String) - Minimum height of content area
|
||||
- **`noPadding`** (Boolean) - Removes padding from content area
|
||||
|
||||
### Actions Configuration
|
||||
- **`showActions`** (Boolean, default: `true`) - Shows/hides action buttons
|
||||
- **`actionsClass`** (String) - Additional CSS classes for actions area
|
||||
- **`actionsAlign`** (String) - Alignment of action buttons (`'left'`, `'center'`, `'right'`, `'space-between'`)
|
||||
|
||||
### Button Configuration
|
||||
- **`showConfirmButton`** (Boolean, default: `true`) - Shows/hides confirm button
|
||||
- **`confirmButtonText`** (String, default: `'Confirm'`) - Text for confirm button
|
||||
- **`confirmButtonColor`** (String, default: `'primary'`) - Color of confirm button
|
||||
- **`confirmButtonVariant`** (String, default: `'elevated'`) - Variant of confirm button
|
||||
- **`showCancelButton`** (Boolean, default: `true`) - Shows/hides cancel button
|
||||
- **`cancelButtonText`** (String, default: `'Cancel'`) - Text for cancel button
|
||||
- **`cancelButtonColor`** (String, default: `'grey'`) - Color of cancel button
|
||||
- **`cancelButtonVariant`** (String, default: `'text'`) - Variant of cancel button
|
||||
- **`loading`** (Boolean) - Shows loading state on confirm button
|
||||
|
||||
### Behavior Configuration
|
||||
- **`autoCloseOnConfirm`** (Boolean, default: `true`) - Auto-closes modal after confirm
|
||||
- **`autoCloseOnCancel`** (Boolean, default: `true`) - Auto-closes modal after cancel
|
||||
- **`onOpen`** (Function) - Callback function when modal opens
|
||||
- **`onClose`** (Function) - Callback function when modal closes
|
||||
|
||||
## Events
|
||||
|
||||
- **`update:visible`** - Emitted when visibility state changes
|
||||
- **`close`** - Emitted when modal is closed
|
||||
- **`confirm`** - Emitted when confirm button is clicked
|
||||
- **`cancel`** - Emitted when cancel button is clicked
|
||||
- **`outside-click`** - Emitted when clicking outside the modal
|
||||
- **`escape-key`** - Emitted when escape key is pressed
|
||||
|
||||
## Slots
|
||||
|
||||
### Default Slot
|
||||
```vue
|
||||
<Modal>
|
||||
<p>Your content here</p>
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### Title Slot
|
||||
```vue
|
||||
<Modal>
|
||||
<template #title>
|
||||
<v-icon class="mr-2">mdi-account</v-icon>
|
||||
Custom Title
|
||||
</template>
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### Actions Slot
|
||||
```vue
|
||||
<Modal>
|
||||
<template #actions="{ close, options }">
|
||||
<v-btn @click="customAction">Custom Action</v-btn>
|
||||
<v-btn @click="close">Close</v-btn>
|
||||
</template>
|
||||
</Modal>
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Modal
|
||||
```vue
|
||||
const basicOptions = {
|
||||
title: 'Information',
|
||||
maxWidth: '400px'
|
||||
}
|
||||
```
|
||||
|
||||
### Confirmation Modal
|
||||
```vue
|
||||
const confirmOptions = {
|
||||
title: 'Confirm Action',
|
||||
persistent: false,
|
||||
confirmButtonText: 'Delete',
|
||||
confirmButtonColor: 'error',
|
||||
cancelButtonText: 'Keep'
|
||||
}
|
||||
```
|
||||
|
||||
### Form Modal
|
||||
```vue
|
||||
const formOptions = {
|
||||
title: 'Add New Item',
|
||||
maxWidth: '600px',
|
||||
persistent: true,
|
||||
confirmButtonText: 'Save',
|
||||
loading: isLoading.value
|
||||
}
|
||||
```
|
||||
|
||||
### Fullscreen Modal
|
||||
```vue
|
||||
const fullscreenOptions = {
|
||||
fullscreen: true,
|
||||
showActions: false,
|
||||
scrollable: true
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Styled Modal
|
||||
```vue
|
||||
const customOptions = {
|
||||
maxWidth: '500px',
|
||||
cardColor: 'primary',
|
||||
elevation: 12,
|
||||
overlayOpacity: 0.8,
|
||||
transition: 'scale-transition'
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Usage
|
||||
|
||||
### With Reactive Options
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const formValid = ref(false)
|
||||
|
||||
const modalOptions = computed(() => ({
|
||||
title: 'Dynamic Title',
|
||||
loading: loading.value,
|
||||
confirmButtonText: formValid.value ? 'Save' : 'Validate First',
|
||||
persistent: !formValid.value
|
||||
}))
|
||||
</script>
|
||||
```
|
||||
|
||||
### Multiple Modals
|
||||
```vue
|
||||
<template>
|
||||
<!-- Each modal can have different configurations -->
|
||||
<Modal v-model:visible="modal1" :options="options1">
|
||||
Content 1
|
||||
</Modal>
|
||||
|
||||
<Modal v-model:visible="modal2" :options="options2">
|
||||
Content 2
|
||||
</Modal>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use persistent modals for forms** to prevent accidental data loss
|
||||
2. **Set appropriate maxWidth** for different screen sizes
|
||||
3. **Use loading states** for async operations
|
||||
4. **Provide clear button labels** that describe the action
|
||||
5. **Use slots for complex content** instead of the message option
|
||||
6. **Handle all events** to provide good user feedback
|
||||
7. **Test keyboard navigation** and accessibility features
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
The modal automatically adjusts for mobile devices:
|
||||
- Reduced padding on smaller screens
|
||||
- Appropriate font sizes
|
||||
- Touch-friendly button sizes
|
||||
- Proper viewport handling
|
||||
|
||||
## Accessibility
|
||||
|
||||
The component includes:
|
||||
- Proper ARIA attributes
|
||||
- Keyboard navigation support
|
||||
- Focus management
|
||||
- Screen reader compatibility
|
||||
- High contrast support
|
||||
Loading…
Add table
Add a link
Reference in a new issue