Getting Started

Installation

npm install @dynamicforms/vuetify-inputs

In your main.ts

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 });

TIP

you may also import a list of components like so:

import { VuetifyComponents } from '@dynamicforms/vuetify-inputs';

...

Object.entries(VuetifyComponents).map(([name, component]) => app.component(name, component));

Resolving a component by its tag

dfInputComponentsByTag holds every component of this library under its tag, for a rendering layer that looks a component up in a map instead of through Vue's resolver, e.g. one that renders a serialized layout naming df-select. DfInputComponentTag is the union of those tags.

import { dfInputComponentsByTag } from '@dynamicforms/vuetify-inputs';

const components = { ...dfInputComponentsByTag, ...myOwnComponents };

@dynamicforms/vuetify-modal-form-kit passes this map to its layout renderer. A component added to this library in a later version is in the map; a hand-written list does not contain it.

Basic Usage

@dynamicforms/vuetify-inputs provides Vuetify-based input components that work with @dynamicforms/vue-forms for form state management.

Setting up the components

Import the components you need:

import { DfSelect, DfTextArea, DfFile } from '@dynamicforms/vuetify-inputs';

Using with DynamicForms

A component bound to a @dynamicforms/vue-forms element through control:

<template>
  <form>
    <!-- Basic text area with DynamicForms integration -->
    <df-text-area
      :control="form.fields.description"
      label="Description"
      hint="Enter a detailed description"
      :rows="5"
      :max-rows="10"
    />
    
    <!-- Select field with choices -->
    <df-select
      :control="form.fields.category"
      :choices="categoryOptions"
      label="Category"
    />
  </form>
</template>

<script setup>
import { Group, Field } from '@dynamicforms/vue-forms';
import { DfTextArea, DfSelect } from '@dynamicforms/vuetify-inputs';

// Create a form group with fields
const form = new Group({
  description: new Field({ value: '' }),
  category: new Field({ value: null }),
});

// Define options for the select field
const categoryOptions = [
  { id: 1, text: 'Category 1' },
  { id: 2, text: 'Category 2' },
  { id: 3, text: 'Category 3' },
];
</script>

Using without DynamicForms

The components also work with v-model:

<template>
  <df-text-area
    v-model="description"
    label="Description"
    hint="Enter a detailed description"
  />
  
  <df-select
    v-model="selectedCategory"
    :choices="categoryOptions"
    label="Category"
  />
</template>

<script setup>
import { ref } from 'vue';
import { DfTextArea, DfSelect } from '@dynamicforms/vuetify-inputs';

const description = ref('');
const selectedCategory = ref(null);
const categoryOptions = [
  { id: 1, text: 'Category 1' },
  { id: 2, text: 'Category 2' },
  { id: 3, text: 'Category 3' },
];
</script>

Available Components

• 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-input-hint: Renders a field's or a group's errors, falling back to its hint text.
• df-rtf-editor: A RTF editor input.
• df-select: A selection component supporting static or dynamic options, multiple selection, and tagging.
• df-text-area: A textarea component with configurable rows and validation.

Localisation

The library renders a few English strings of its own: the labels of the RTF editor's toolbar, the buttons of the pickers, and the upload and download prompts of <df-image> and <df-file>. translateStrings(), or the translate setting per app, connects them to the application's translation function. Errors render as the errorText setting converts them, and DateTimeLocaleConfig, or the dateTimeLocale setting per app, sets the date-fns locale <df-date-time> formats and parses with.

Localisation lists every translatable key with its default and where it appears, describes translating errors, and has an example that keeps all three on the application's current locale.

Next Steps

The Examples section documents every component and feature.