wotamann / vuetify-form-base Goto Github PK
View Code? Open in Web Editor NEWSchema-based Form Generator - Vue.js 2.0 Component based on Vuetify 2.0
Home Page: https://wotamann.github.io/vuetify
Schema-based Form Generator - Vue.js 2.0 Component based on Vuetify 2.0
Home Page: https://wotamann.github.io/vuetify
Can you share example of how to use vuetify-form-base with Vuelidate plugin.
I tried, but it is giving error cannot update the model
Tried copy pasting the example and I get console errors:
[Vuetify] [UPGRADE] 'v-content' is deprecated, use 'v-main' instead.
found in
---> <VMain>
<App> at src/App.vue
<Root>
Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuetify": "^2.3.7",
"vuetify-form-base": "^0.2.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
main.js:
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
Vuetify does in fact work.
Installed using vue-cli 4.4.6 and vue add vuetify
Using a-la-carte.
I try to follow as stated in the documentation, however, when I put in place to mask as in vuetifyjs does not run.
Vuetify: 2.0.0
Vue: 2.6.10
Lodash: 4.17.3
Hi,
It'd be great to have support for @blur event handler added to the code base. I believe it's just matter of a few lines of code. Than you.
<!-- autocomplete -->
<v-autocomplete
v-else-if="obj.schema.type === 'autocomplete'"
v-bind="bindSchema(obj)"
:value="setValue(obj)"
:obj="obj"
**:search-input.sync="obj.schema.search"**
@focus="onEvent($event, obj)"
@blur="onEvent($event, obj)"
@click:append="onEvent($event, obj, append)"
@click:append-outer="onEvent($event, obj, appendOuter)"
@click:clear="onEvent($event, obj, clear )"
@click:prepend="onEvent($event, obj, prepend )"
@click:prepend-inner="onEvent($event, obj, prependInner )"
@input="onInput($event, obj)"
/>
<!-- END autocomplete -->
Using:
schema: {
date: { type: 'date', ext:'text', flex: 4, locale:'ru', label: 'Дата' },
name: { type: 'text', label: 'Имя', flex: 4 },
owner: { type:'autocomplete', label:'Owner',
itemText:'login',
itemValue:'id',
items: [],
loading: false,
**search: '',**
hideNoData: true
}
},
mounted(){
this.$watch('schema.owner.search', function ( val ) {
val && val !== this.schema.owner.select && this.queryUsers(val)
})
},
async queryUsers( v ){
try {
const { data } = await this.$apollo.query( {
query: user.fetchByName,
variables:{
name: v+'%'
}
})
this.schema.owner.items = data.users
} catch ( err ) {
this.schema.owner.items = []
console.log({ err })
}
},
It is working examle for my proect
I'm trying to change the form schema dinamically, but I'm getting some troubles...
Here's some example:
<template>
<div>
<v-form>
<v-select center :items="strategy_list" label="Strategy" v-model="strategy" **@input= "updateForm"**> </v-select>
<v-form-base :value="values" :schema="schema" />
</v-form>
</div>
</template>
...
data() {
return {
values: {
name: 'Jumo',
},
schema: {
name: { type: 'text', label: 'Name' },
password: { type: 'password', label: 'Password' },
}
}
},
methods: {
updateForm() {
console.log(this.strategy);
**this.schema = {};
this.values = {};**
...
**// Updates the schema based on strategy's new data**
What am i doing wrong?
How to make this dynamic so i dont need log function to push items to another array?
Thanks
Hi there
In the examples for the radio, its using an array. How can one use an array of objects like the select with itemValue & itemText for selects etc.
Thanks
Is there a way to force a select field to be a certain size rather than drop-down?
This works
model: { values: [{}, {}, {}] }, schema: { name: { type: 'text', label: 'Name', }, values: { type: 'array', schema: { value: 'text' } } }
How to create array of text values instead of array of objects?
Next does not work:
model: { values: ['','',''] }, schema: { name: { type: 'text', label: 'Name', }, values: [ type: 'text', ] }
I need to create in example select2 field with tag style. Autocomlete + create not existing.
How to add validation rules from .json file and dynamically change or add the custom color for fields in vuetify-form-base?
import Vue from 'vue';
import Vuetify,{VTextField,VAutocomplete,VSelect,VCombobox,Touch} from 'vuetify/lib';
export default new Vuetify({
});
Vue.use(Vuetify,{ components: {
VTextField,VAutocomplete,VSelect,VCombobox,Touch
}});
I have an custom number input, and I'm increasing or decreasing it's value based on user's click, but I want it to change with up and down keys too
Template:
v-form-base(:value="values" :schema="schema" @update="update")
Schema:
value: {
type: 'text',
label: 'Value',
flex: 3,
appendIcon: 'add',
prependInnerIcon: 'remove',
outlined: true,
dense: true
}
Update event:
update({ on, key, params }) {
if (on == 'click' && key == 'value') {
if (params.text == 'add') {
this.values.value++
}
if (params.text == 'remove' && this.values.value > 0) {
this.values.value--
}
}
}
Hey, before all, i need thank you for this amazing package! But i have a problem with him.
I created a schema in back end to mount the front end's form, but when I change the value( this event is responsible for get data for back end) the form doesn't appear in the screen...
Can you help me please? Thanks!
Hi.
First of all, thanks for your amazing component, it reminds me of Symfony's FormType.
Here i came after using your component and i was wondering something.
I'm using Vuex with Vuex-Orm and it works like a charm.
I have a Client model and schema like this :
Schema :
export const ClientSchema = {
email: {
type: 'text',
label: 'Email',
flex: 4,
class: 'mx-2',
outlined: true
},
siret: {
type: 'text',
label: 'Siret',
flex: 4,
class: 'mx-2',
outlined: true
},
siteWeb: {
type: 'text',
label: 'Site web',
flex: 4,
class: 'mx-2',
outlined: true
},
raisonSociale: {
type: 'text',
label: 'Raison sociale',
flex: 4,
class: 'mx-2',
outlined: true
},
code: {
type: 'text',
label: 'Code',
flex: 4,
class: 'mx-2',
outlined: true
},
telephoneMobile: {
type: 'text',
label: 'Téléphone Mobile',
flex: 4,
class: 'mx-2',
outlined: true
},
telephoneFixe: {
type: 'text',
label: 'Téléphone Fixe',
flex: 4,
class: 'mx-2',
outlined: true
},
codeNaf: {
type: 'text',
label: 'Code naf',
flex: 4,
class: 'mx-2',
outlined: true
},
fax: {
type: 'text',
label: 'Fax',
flex: 4,
class: 'mx-2',
outlined: true
},
}
Model :
import {Model} from '@vuex-orm/core'
export class Client extends Model {
static entity = 'Client'
static fields() {
return {
id: this.string(null),
email: this.string(''),
siret: this.string(''),
siteWeb: this.string(''),
commentaire: this.string(''),
raisonSociale: this.string(''),
code: this.string(''),
telephoneMobile: this.string(''),
telephoneFixe: this.string(''),
codeNaf: this.string(''),
fax: this.string(''),
actif: this.boolean('')
}
}
}
This is only the first and little part i'm implenting.
I would like to know if i can group attributes, like Group 1 : label => Infos within a v-card and another group Legal within another card.
It would be very great to use groups for large form.
Example : https://vue-generators.gitbook.io/vue-generators/groups
Regards.
What is the best way to add custom input widget / component ?
Hi,
Is there a way to close the picker menu once the month is selected? currently i need to click outside the picker menu to close it.
Originally posted by @nuluferdmello in #52 (comment)
Hello. I'm going to try your component. In examples i see vuetify v1.5. But what if i use vuetify v2 branch? How compatible are they with this component?
Looks very promising for basic schema forms (thank you), but I'm struggling to find an approach to integrate a date picker into a v-text-field. Have tried using both slots and a custom typeToComponent extension without luck. Any guidance or hints would be greatly appreciated. TIA
Hello,
I am trying to sync two fields, so the second field can use the value of the first one:
email: {
type: 'text',
label: 'Email',
rules: [rules.email],
},
username: {
type: 'text',
label: 'Username',
readonly: true,
toCtrl: ({ data }) => data && data.email,
fromCtrl: ({ data }) => data && data.email,
},
}
on the ui, the value is change whenever email field is modified, but when the form is submitted the username model value is empty.
Is there other way I can synchronize the fields or this is a bug?
using:
"vuetify": "2.3.4",
"vuetify-form-base": "^0.1.22",
thanks
Hello,
First, thanks for sharing this lib, seems really impressive! 👍
I am trying to use it, creating a component with a dialog and the v-form-base inside, code below, but I am getting an error on the console. The form is using the schema and model from the readme file. I am using the version 0.2.6.
CODE:
<template>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-form>
<v-form-base
cols="12"
:model="myModel"
:schema="mySchema"
@input="handleInput"
/>
</v-form>
</v-card>
</v-dialog>
</template>
<script>
import VFormBase from 'vuetify-form-base';
export default {
name: 'NewProductDialog',
components: { VFormBase },
props: {
dialog: { type: Boolean, default: false },
},
data() {
return {
myModel: {
name: 'Jumo',
password: '123456',
email: '[email protected]',
checkbox: true,
select: 'Jobs',
},
mySchema: {
name: { type: 'text', label: 'Name' },
password: { type: 'password', label: 'Password' },
email: { type: 'email', label: 'Email' },
checkbox: { type: 'checkbox', label: 'Checkbox' },
select: {
type: 'select',
label: 'Select',
items: ['Tesla', 'Jobs', 'Taleb'],
},
},
};
},
methods: {
handleInput(val) {
console.log(val);
},
},
};
</script>
<style scoped></style>
Can anyone help with this problem?
Cheers
Hello wotamann,
you have done a great job with vFormBase. I enjoy using it very much.
I am wondering if it is possible to store the value and schema objects in a database and load them dynamically.
Somewhat like that.
Value: {
}
Schema: {
}
axios.get('/')
.then(function (response) {
this.Value = response.data.Value
this.Schema = response.data.Schema
}
}
Will it support vuetify 1.5++
Thanks,
Sakthi
If i create something like this
template
<v-form> <VFormBase :value="myValue" :schema="mySchema" @change="test('change')" @input="test('input')" /> </v-form>
script
` myValue: {
group1: {
name: 'John',
},
},
mySchema: {
group1: {
type: 'card',
title: 'Card Title',
schema: {
name: { type: 'text', label: 'Name label' },
},
},
},
methods: {
test(e) {
console.log(e);
},
},
`
Change event not emitted for card type the same issue for array type.
Wow, thanks a lot for this!
I will explore as I will start using this now!
Hello there, thank you for the great extension project, there additional character in the description in the template section, from beginning at 10 rows: >
Hello, is there a possibility to integrate tooltips via slots? I have not been able to do it yet and would be very grateful for a hint. My current solution includes a modification of VFormBase.vue, which I'm not really happy about. It would be great to control the tooltips via the schema. TIA
Is it possible to populate model field with an object value?
Im trying to do it like in example below - but it cannot be handled in flattenObjects method .
thanks!
model:
{
"somefield": "{id:1,value:'Some value'}",
}
schema:
"somefield": { "type": "select", "returnObject": true itemText: "value", itemValue: "id", },
Hi there
For a while I have been working on a designer app using Vuetify and now want to adopt some part of it to vuetify-form-base. Below is the schema of what my app gets to build, this I later to create an UI at runtime as a mock. Im using this basically for code generation.
I want now to somehow provide a preview-screen of what the for will look like using a dialog.
Name - the database table field name
Title - should appear on the label of each component
Component - the type of component to render
R - row
C - column
OS - OX - offsets
SS - SX - size per device
Most of the details here are linked to an underlying database table. For example, for each field, I provide it a title, the row location and column location. This also goes for the component type. As one can use different devices, I also indicate the sizes for the devices. What Id like to know is what is the best approach to bring a schema like this to vuetify-form-base? Do I create schemas per each row for vuetify-form-base? considering that some rows might have different sizes per device?
This is my output from my designer without using vuetify-form-base at the moment generated from the definitions above.
Thank you.
is there a way to just display the data not in an editable form?
Hi,
i need help about how to add subheader to nested object.
So if i create object data like this:
mySchema: {
section_title: { type: 'text', label: 'Section title'},
section_subtitle: { type: 'text', label: 'Section subtitle'},
feature_1:{
title: { type: 'text', label: 'Title'},
subtitle: { type: 'text', label: 'Subtitle'},
} ,
feature_2:{
title: { type: 'text', label: 'Title'},
subtitle: { type: 'text', label: 'Subtitle'},
}
feature_3:{
title: { type: 'text', label: 'Title'},
subtitle: { type: 'text', label: 'Subtitle'},
}
}
How to separate it in groups so it goes:
Section title input
Section subtitle input
Subheader: Feature 1
Title input
Subtitle input
Subheader: Feature 2
Title input
Subtitle input
Subheader: Feature 3
Title input
Subtitle input
Because now inputs are one after another.
Hi,
You should add vue-the-mask dependencies in package.json as it keep saying "vue-the-mask is missing".
solve it using npm i vue-the-mask --save
Hi, in my project I am trying to use the month picker in menu, but i didn't find the correct options in vuetify-form-base schema's. Please suggest a solution to fix my issue.
<template>
<v-container fluid>
<h4>Textfields and Fileselector with Mask and Tooltips</h4>
<v-form>
<v-form-base
:value="myValue"
:schema="mySchema"
@input="log"
/>
</v-form>
<infoline
:value="myValue"
:schema="mySchema"
:path="$options._componentTag"
/>
</v-container>
</template>
<script>
import VFormBase from '@/components/vFormBase'
import Infoline from '@/components/infoline'
import log from '@/lib'
const mask = '####-####-####-####'
const accept = 'image/*'
export default {
name: 'Textfields',
components: { VFormBase, Infoline },
data () {
return {
myValue: {
name: 'Base',
creditcard: '12345678',
password: 'abcdefgh',
file: [] // array of File objects
},
mySchema: {
name: 'text',
password: {
type: 'password',
clearable: true,
flex: 12
},
creditcard: {
type: 'text',
label: 'Creditcard',
prependInnerIcon: 'credit_card',
hint: mask,
mask,
tooltip: 'Creditcard',
flex: 12
},
file: {
type: 'file',
label: 'Files',
accept,
multiple: true,
tooltip: { color: 'green', label: 'File Selection', top: true },
flex: 12
}
}
}
},
methods: {
log
}
}
</script>
From the above code tooltip is applied for entire textfield by using tooltip: 'Creditcard' but i want tooltip only for icon. Now tooltip is applied on hover of entire text field but it should display only on hover of icon.
Reference :1. https://github.com/wotamann/vuetify-form-base 2. https://wotamann.github.io/
"vue": "2.6.11",
"vuetify": "2.3.4",
"vuetify-form-base": "0.1.22",
ERROR vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "No 'model' definition found. Use '<formbase :model="myData" />' "
Schema - { "start": { "type": "group", "label": "Start", "schema": { "to": { "type": "group", "label": "To", "test": { "type": "text", "label": "Test" } }, "from": { "type": "text", "label": "From" } } } }
Model - { "start": { "from": "some text" } }
In some cases model can be empty or not with all fields.
Thanks for your time.
Hi !
The project is awesome so first of all, congratulations.
I'm checking the docs but I couldn't find any related to use Vuetify element classes like "Solo", "Box" and the rest.
There's any way to use them?
Thank you !
I want to listen to the input event so i can dynamically add items on autocomplete
.
The selection will be updated as the user type in the value on the autocomple.
However, the onInput
method never get called.
<v-form-base :schema="schema" :value="value" @input="onInput">
Errors in SSR mode:
SyntaxError
Unexpected token '<'
in SPA - all works
I got message:
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing . Bailing hydration and performing full client-side render.
when using the form in ssr
<v-form-base
:model="model"
:schema="schema"
@input="handleInput"
/>
data: () =>({
dialog: true,
item_idx: -1,
item: {
date: '',
name: 'My Name',
},
schema: {
date: { type: 'date', ext:'text', locale:'ru', label: 'Дата' },
name: { type: 'text', label: 'Имя' },
},
}),
Error somwere in:
flattenObjects()
because after i commented body of the function all start works on SSR, but incorrectly (no form),
after i uncommenter the fuction and nuxt updated page on client side ONLY form was shown
Then i update page in browser (reread from server) - error comes back
error messages
pages/test.js:1340:63
vFormBase.vue:905:
VueComponent.flattenObjects
vFormBase.vue:941:
VueComponent.flattenAndCombineToArray
vFormBase.vue:964:
VueComponent.rebuildArrays
vFormBase.vue:969:
VueComponent.created
Hi there
Instead of specifiying items for selects etc like items = ['A', 'B', 'C']
How do I achieve the same by assigning such to the state like :items="itemSource", where itemSource is stored on the Vue instance?
Thank you.
First, I love this component. I was just about to homebrew something of my own like it, then I thought, "I should check if anyone has already invented that wheel." I'm glad I did.
I do have a problem, though. When I set an element's type property to "select" or "combobox," I get an error saying "Unknown custom element: <v-select>
" (or v-combobox
).
My schema looks like this:
{
initiativeBonus: {
type: "number",
label: "Initiative Bonus",
col: 12
},
addWeapon: {
type: "text",
prependIcon: "mdi-plus-circle",
ext: "hidden",
flat: true,
solo: true,
col: 1,
},
weapons: {
type: "array",
col: 11,
schema: {
name: {
type: "text",
label: "Name",
},
type: {
type: "select",
label: "Type",
items: [
"Simple Melee",
"Simple Ranged",
"Martial Melee",
"Martial Ranged",
],
},
range: {
type: "text",
label: "Range",
},
damageType: {
type: "combobox",
label: "Damage Type",
items: [
"Acid",
"Bludgeoning",
"Cold",
"Fire",
"Force",
"Lightning",
"Necrotic",
"Piercing",
"Poison",
"Psychic",
"Radiant",
"Slashing",
"Thunder",
],
},
bonuses: {
type: "group",
label: "Bonuses",
col: 12,
schema: {
toHit: {
type: "number",
label: "To Hit",
},
toDamage: {
type: "number",
label: "To Damage",
},
},
},
damage: {
type: "text",
label: "Damage",
hint: "1d8, 2d10, ...",
},
link: {
type: "text",
label: "Info Link",
},
},
},
}
Could you please clarify the documentation on data-arrays? Trying to use them, I get that the custom component v-array is not defined.
Are we supposed to create a custom component ourselves, and if so, could you provide a sample component?
Otherwise, which Vuetify component should we be using, list ie. change 'array' to 'list'? The array data might require manipulating to fit the component in this case.
Thanks
How can i add for example - solo
or outlined
or filled
etc just like in vuetify ?
It will be great to configure text-field with this functionality.
Thanks for your time and work, its really awesome.
hi Team,
I want to populate the data from Server in to form base. I couldn't generate the JSON like your format. I able to hard code manually but from array i am not able generate as generic.
Thanks,
Sakthi
While trying to implement your simple form example (copy paste), I get the following error for checkbox and select types:
Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Text works. I have not tried other control types.
Vue 3.3.0
Good day, I am using vuetify via the cdn version and thus not using imports.
Is it possible for you to also provide a compiled version of your component to JavaScript please. If there is a way I can use it as is on the <script> tag that will also be fine you can advise.
Thank you again for this wonderful amazing piece of art.
Cannot find version 0.1.4 during installation, only 0.1.3
for example using
<v-form-base :model="test" :schema="test"/>
...
<script>
...
<!-- at some point in the code -->
this.test = {item:"something"}
...
</script>
While the "test" variable has the value, but it won't show up in generated form. It shows an empty form. I got this bug after I updated vue and vuetify to the newest version. Looking at the code it seems setValue not updating correctly. Is there a solution for this?
I have a schema with this setup:
stats: {
type: "group",
label: "Stats",
col: 6,
class: "bordered overline pa-2",
schema: {
str: {
type: "number",
label: "STR",
col: 2,
},
dex: {
type: "number",
label: "DEX",
col: 2,
},
con: {
type: "number",
label: "CON",
col: 2,
},
int: {
type: "number",
label: "INT",
col: 2,
},
wis: {
type: "number",
label: "WIS",
col: 2,
},
cha: {
type: "number",
label: "CHA",
col: 2,
},
},
},
It works fine, but I'd like to put some gutters between the fields. I did that globally on the rest of the form with: :row="{ justify: 'center', align: 'center', noGutters: false }"
and it works like a charm, but that global setting doesn't carry through into the grouped items.
Am I overlooking something?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.