FormKit - OpenVue

OpenVue based FormKit Inputs for using FormKit with the OpenVue UI Framework (openvue).

Main focus of this project is to provide configuration based forms with validation.

In addition, you can use the same pattern for data output from schema using FormOutputs.

OpenVue Versions

Actual OpenVue Version of the main branch is 1.0.0.

This package replaces the former PrimeVue based @sfxcode/formkit-primevue. It uses the open source OpenVue components (openvue, @openvue/themes, @openvue/openicons) instead of PrimeVue.

Migration from PrimeVue

Migrating from @sfxcode/formkit-primevue to @sfxcode/formkit-openvue:

1. Replace the package and the UI framework

   pnpm remove @sfxcode/formkit-primevue primevue @primeuix/themes primeicons
   pnpm add @sfxcode/formkit-openvue openvue @openvue/themes @openvue/openicons

2. Update the imports (including /components, /composables and the scss file)

   // before
   import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
   // after
   import { formInputs, formOutputs } from '@sfxcode/formkit-openvue'

3. Rename the input and output types in your schemas: the prime prefix is now form

   | PrimeVue | OpenVue | |-------------------------------|------------------------------| | type: 'primeInputText' | type: 'formInputText' | | type: 'primeSelect' | type: 'formSelect' | | type: 'primeOutputText' | type: 'formOutputText' | | primeInputs, primeOutputs | formInputs, formOutputs | | usePrimeInputs() | useFormInputs() | | PrimeInputText (component) | FormInputText (component) |

   A search and replace of prime followed by an uppercase letter (prime[A-Z] -> form, Prime[A-Z] -> Form) covers most of it.

4. Replace PrimeVue with OpenVue in your app setup: use the openvue components, themes and @openvue/openicons (instead of PrimeIcons) and register them as you did with PrimeVue.

5. Update custom CSS: selectors like [data-type="primeCheckbox"] become [data-type="formCheckbox"].

Also rename the primeAttributes prop to formAttributes (prime-attributes to form-attributes in templates). Rename the i18n keys formkit.prime.true / formkit.prime.false to formkit.form.true / formkit.form.false. Not changed: the p-formkit wrapper class. The stylesheet is now formkit-openvue.scss (update imports of dist/sass/formkit-primevue.scss).

Build

Docs

Docs

Demo/Playground

Usage

Configuration

Add formkit.config.ts

import { defaultConfig, plugin } from '@formkit/vue'
import { formInputs } from '@sfxcode/formkit-openvue'

app.use(plugin, defaultConfig({
  locales: { de, en },
  // Define the active locale
  locale: 'en',
  inputs: formInputs, 
}))

or if using also the output part

import { defaultConfig, plugin } from '@formkit/vue'
import { formInputs, formOutputs } from '@sfxcode/formkit-openvue'

app.use(plugin, defaultConfig({
  locales: { de, en },
  // Define the active locale
  locale: 'en',
    inputs: { ...formInputs, ...formOutputs },
}))

Important: output elements depends on vue-i18n to style numbers, dates, ...

Limitations

Prefixing of the OpenVue component names is not supported.

Schema Helper Functions

useFormKitSchema provide functions to simplify the usage of elements, components, lists, ...

useInputEditorSchema provide functions for a component schema generation builder

Basic Styling

Basic styling is provided with the formkit-openvue.scss file or the corresponding css file in the package.

Features:

• Width of all text and dropdown elements is set to 100%
• Error Color by variable (--formkit-error-color)
• Some margins, font sizes ...

You can use it or take it as base for your own styling.

Extended Styling

• Styling outerClas, innerClass .... is provided by FormKit
• All inputs, outputs are wrapped in a div with a p-formkit class
• Most of the OpenVue Input Components have access to class / styles attributes
• PT and PTOptions are available (pass-through API of OpenVue components)
• Styling and PT demo available
• Grid Demo of the provided grid styling (col-[1-12])

Samples

Some samples for common tasks are available

• Repeater Use Repeater composable for using repeating values in your schema
• Input Editor Edit FormKit schema on the based on a provided composable
• Form Editor Basic demo as starter to create Forms visually

Showcases

Demo Application

Supported Inputs for OpenVue

• AutoComplete
• CascadeSelect
• Checkbox
• ColorPicker
• DatePicker
• Editor (HTML Editor - if you register the editor component, make sure to import quill)
• InputMask
• InputNumber
• InputOtp
• InputText
• Knob
• Listbox
• MultiSelect
• Password
• RadioButton
• Rating
• Repeater (not an OpenVue component, but provided as helper for repeating groups of inputs)
• Select
• SelectButton
• Slider
• Textarea
• ToggleButton
• ToggleSwitch
• TreeSelect