Visual components for data entry using @dynamicforms/vue-forms
npm install @dynamicforms/vuetify-inputsVisual components based on Vuetify library to support @dynamicforms/vue-forms.
@dynamicforms/vuetify-inputs provides input components for data entry that will be stored in form data. It is the
visual implementation of logical concepts from
@dynamicforms/vue-forms.
- DynamicForms Integration: Seamlessly works with @dynamicforms/vue-forms for state management and validation
- Vuetify Based: Built on top of Vuetify components for beautiful Material Design styling
- Reactive: Full Vue reactivity support with both v-model and DynamicForms Field controls
- TypeScript Support: Comprehensive type definitions for excellent developer experience
- Highly opinionated: Opinionated to ensure uniform look throughout the application.
``bash`
npm install @dynamicforms/vuetify-inputs
In your main.py
`typescript
import { DynamicFormsInputs } from '@dynamicforms/vuetify-inputs';
import '@dynamicforms/vuetify-inputs/styles.css';
...
const app = createApp(MyApp);
app.use(router);
app.use(vuetify);
// registers the library for use and optionally inputs globally
app.use(DynamicFormsInputs, { registerComponents: true, registerVuetifyComponents: false });
`
The library offers various components, including:
`vue
:choices="countries"
label="Select Country"
/>
label="Description"
:rows="5"
:max-rows="10"
/>
:comms="fileComms"
label="Upload Document"
/>
`
Detailed documentation is available as a VitePress site in the /docs folder. To view the documentation locally:
`bash``
npm run docs:dev
- InputBase: The base component for all input elements
- df-actions: An actions group.
- df-checkbox: A checkbox component.
- df-color: A color input.
- df-date-time: A date and time selection component with configurable format and type.
- df-file: A file upload component with progress indication
- df-input: A general value input.
- df-rtf-editor: A RTF editor input.
- df-select: A selection component supporting static or dynamic options, multiple selection, and tagging
- df-textarea: A textarea component with configurable rows and validation
The library is written in TypeScript and provides full type definitions for all components and interfaces.
MIT