wotamann / vuetify-form-base Goto Github PK

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.

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.

ERROR:

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

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.

Will it support vuetify 1.5++

Thanks,
Sakthi

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)

Is there a way to force a select field to be a certain size rather than drop-down?

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,

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.

Hello there, thank you for the great extension project, there additional character in the description in the template section, from beginning at 10 rows: >

Cannot find version 0.1.4 during installation, only 0.1.3

SOLUTION: add code like this after

          <!-- 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:

in data

 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
  }
},

life state

   mounted(){
     this.$watch('schema.owner.search', function ( val ) {
     val && val !== this.schema.owner.select && this.queryUsers(val)
   })
 },

in methods

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?

is there a way to just display the data not in an editable form?

What is the best way to add custom input widget / component ?

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

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 !

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.

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.

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?

Wow, thanks a lot for this!

I will explore as I will start using this now!

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.

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.

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

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?

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", },

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.

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 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

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">

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

How to add validation rules from .json file and dynamically change or add the custom color for fields in vuetify-form-base?

"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.

How to make this dynamic so i dont need log function to push items to another array?

Thanks

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

Hi

To reproduce, add a text with a tooltip.
Add a date picker

Result: Number tooltip shown on date

Expected Result: Number tooltip to show closer to the parent control.

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.

<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/

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

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

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

This is exactly what I need for my project

https://github.com/holochain/CRISPR/wiki

Thanx so much

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
 }

}

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

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.

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.

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

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?

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",
			},
		},
	},
}

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

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!

Follow the schema that I set up:

Follow the values of schema:

And my application without form