A flexible, schema driven form component for Vue 3.

Related tags

vue3-live-form
Overview

Vue 3 Live Form

This component, written using TypeScript and the Vue 3 composition API, creates a schema-driven form that allows you to modify the state of an object. This component is currently a work in progress and is an early step in creating more flexible, open source versions of components I have developed in the past.

Features / Notes

  • Each key on the object/model being modified can be targeted with a number of different input types.
  • Input types that accept multiple options or values can be configured to use an array existing on the original object, or a custom array provided in the schema.
  • Multiple rows in the form can be set to modify the same key of the master model object, as seen in the example below where multiple form inputs are modifying the value of the "select" key.
  • A row type of "nested" allows you to selectively modify a nested array of objects, and selected keys within them. All of the form's input types are compatible with this. Nesting multiple "nested" input types is possible allowing you to deeply modify a data structure, although the UI is not currently optimized for this. An example of a nested input within a nested input can bee seen below.
  • The visibility of rows can be determined conditionally

Future features / To-Do list:

  • Schema driven form validation
  • Improved styling
  • Expandable UI for deeply nested editors
  • Additional & Custom field options
  • Ability to re-order in the 'nested' input type
  • Ability to target a deeply nested field/key using dot notation.

Installation

npm install vue3-live-form

Usage

Import the component:

import { Vue3LiveForm } from  'vue3-live-form';

Register the component if using the Vue options API (Not required if using the Vue 3 composition API with the setup tag):

export  default {
	name:  'MyComponent',
	components: { Vue3LiveForm},
}

Pass a schema parameter into the component and attach an object/model to it using v-model:

<Vue3LiveForm :schema="schema" v-model="data" />

Schema Guide

Property Type Description
labelWidth string Width of the label column.
rows array An Array of Objects following the row schema below.

Row Schema

Property Type Description
type String The type of input to be rendered. Accepted values: text password date number checkbox boolean textarea textbox select radio nested. The 'select' and radio input types require the options property to be configured. The 'nested' input type requires field be configured to reference an array of objects on the data source object/model.
readonly Boolean optional Applies the "readonly" attribute to an input field.
field String optional The key of the data source object/model you wish to modify.
options String or Array Applies to select & radio input types. Enter an array of options for input types with multiple options. A string can also be entered representing an existing key with an array on the master object. The array values can be strings, numbers or objects with multiple keys.
optionLabel String optional Allows you to specify which key will act as the label for the options property when objects are being used. If this value is not provided, the entire object structure will be rendered in the select or radio options.
optionValue String optional Allows you to specify which key will act as the value for the options property when objects are being used. If this value is not provided, the entire object will be used in the source data object/model.
label String optional Label for the input row. If no label is provided, the field name will be used.
columns Array<RowSchema> optional Only used when the input type is 'nested'. Allows you to define a schema for columns of the nested editor. The same schema used for rows can be applied to nested columns.
criteria Array['field','operator','value'] optional Sets a condition for the row to be rendered. field represents the property/key of the model that will be compared against the value parameter of the array. Current valid operators are == and !=.
Issues
Owner
Nick Tupy
I am currently in the process of open sourcing tools and components from my private repos, so things may seem empty here momentarily.
Nick Tupy
A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js

vue-mobiscroll A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js Support swipping up / down, mouse dragging up / down , m

茶布多先生 15 Aug 17, 2021
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 393 Sep 28, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 37 Oct 10, 2021
Adds a directive that listens for click events and scrolls to elements.

vue-scrollto DEMO Scrolling to elements was never this easy! This is for vue 2.x and vue 3.x (since v2.19.0) For vue 1.x use [email protected] (note

Igor Randjelovic 1.8k Oct 13, 2021
A vue2 component based on Iscroll

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 45 Mar 4, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 180 Sep 8, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 180 Sep 8, 2021
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
The virtual responsive crossbrowser scrollbar component for VueJS 2x

VBar The virtual responsive crossbrowser scrollbar component for VueJS 2x DEMO Usage Install Using NPM npm i v-bar Using yarn yarn add v-bar In your .

Luigui Delyer 222 Oct 2, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021
infinite list based on vue2

vue-infinite-list infinite list based on vue2. Installation npm i vue-infinite-list demo npm run start Basic Use import and register the infinite li

null 27 Sep 26, 2020
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 52 Aug 12, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021
A Vue component to add intersection-observer to a Vue component or HTML element.

Vue Intersect A Vue component to add intersection-observer to a Vue component or HTML element. Table of content Introduction Demo Installation Usage P

WEAREHEAVY® 306 Sep 30, 2021
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

CoddiCat 4 Aug 28, 2021
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 31 Aug 12, 2021
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Oct 1, 2021