janiskelemen/formvuelar

Vue form components with server-side validation in mind

formvuelar's Issues

Date Picker component not documented

Hi,

Thank you for the great component package! I am just wondering if the docs (https://formvuelar.netlify.com/) will be updated to include a little more information about the Date Picker and its api surface?

I understand it is based off flatpickr library and I have been doing some tweaking around to get some desired results but it would be great to be following the best practices of your package like I have been with the other components - in particular at the moment I am looking for the best way to change the predetermined date ranges on the left hand side of the extended date picker.

Any help would be greatly appreciated!

Headers

Hi Janis,

Thanks for the great package! I'm having a bit of an issue though when submitting the form I need a Bearer token header to authenticate the request. I'm currently adding this via a axios interceptor but after some testing, this section of code below seems to not respect any headers already set. I'm not sure of the best way to address this as I would just do a pull request for you?

headers: this.multipart ? { 'Content-Type': 'multipart/form-data' } : {},
Barry

Easy change of default teal color

Hi,

Thanks for doing these components, very nice! I have a question. How can I easily change the default teal color to a color of my choosing?

Thanks!

FvlSelect.vue

Hi Janis,

I was having issues with the select box updating my value or even rendering with the supplied value, after a little bit of digging it seems that FvlSelect is missing the value prop and line 16 should read:

@change="$emit('update:value', $event.target.value); $parent.dirty(name);"

To correctly emit the value/event?

Barry

[IDEA] @keydown

@janiskelemen thanks for making those nice components

I would like to see support of Keydown events:

`<fvl-textarea @keydown="func()"></>

For quick form submissions

[QUESTION]Will there be a migration to Vue3 in the future

I came across this wonderful library while looking for form components for a project I'm doing in Vue3 and was wondering if there will be a migration for vue3 in the future.

@error response

Hey,

It should be changed in the file FvlForm.vue :

// from
$this.$emit('error', error)
// to
$this.$emit('error', error.response)

Otherwise we can not use the returned object on the component

<FvlForm @error="onError">

onError(error) {
   console.log(error.data)
  // from: undefined
 // to: Error Object
}

Look for the explanation axios/axios#960 (comment)

Having forked your code and modified it a bit I do not know if it's the same with formvuelar. Seem yes.

How to use it with Nuxt

How to use it with Nuxt?

[QUESTION] - Is it possible to build form using JSON schema

This is great library. I was wondering if we can build form based on JSON schema?

Use different axios instance?

I cant find a way to use a custom instance of axios?

It will be nice to use it so you can use the interceptors, a baseUrl, default headers and other stuff.

I implemented it like this but don't know if its the right way

...

let method = this.multipart && (this.method == 'patch' || this.method == 'put') ? 'post' : this.method

// this chage
let _axios = this.axios || this.$http || axios

_axios({
 method: method,
 url: this.url,

...

Using @success / @error functions

Hi,

First of all, thanks for the great plugin, also works wonders with Lumen. Can you get me an example of using the @success and @error functions? Trying to access the data from the axios call for setting custom variables in Vue.

Thanks in advance.

FvlForm.vue

Hi Janis,

I have been having an issue receiving files uploaded via FvlMultiFile.vue (not tested dropzone), server-side I'm not receiving the files just a string of File, File, File.

From what I can see:

Object.keys(rawData).map(e => { formData.append(e, rawData[e]) })

Is not picking up on the fact there are multiple files in the array representing the multiple files.

Barry

Allow auto resize for FvlTextarea.vue

Hey,
first of all, i love your library. Very awesome work, thanks.

I noticed one thing that would be very useful. Maybe you could add a property to the textarea that allows for auto resizing the test area while people type in it. I am sure a lot of people would find this useful.

Thanks so much!
Leo

Errors

Hi. first that all thanks for the plugin.

i'm have a problem with this function hasErrors:

TypeError: **_vm.$parent.hasErrors** is not a function at Proxy.FvlSearchSelectvue_type_template_id_18b3ecd3_render (app.js:32391) at VueComponent.Vue._render (app.js:146950) at VueComponent.updateComponent (app.js:147466) at Watcher.get (app.js:147877) at new Watcher (app.js:147866) at mountComponent (app.js:147473) at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:152443) at VueComponent../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:155328) at init (app.js:146530) at createComponent (app.js:149372)

just import a component FvlSearchSelect

import { FvlSearchSelect } from "formvuelar";

<FvlSearchSelect :option-key="'id'" :option-value="'title'" :searchKeys="['id', 'title']" :name="'tags'" :options="[{title:'titulo1',id:15},{title:'titulo2',id:1}]"/>

how can i fix this issue?

Wrong Tailwind link inside the doc

The Tailwind link inside the doc is wrong

I'm using Tailwind CSS for the examples. Feel free to use the predefined css component classes for your own projects. You can import them like this:

Change tailwind.com to tailwindcss.com

cannot access the full document

I tried to learn formvuelar and want to access the full document.

Open https://formvuelar.netlify.app/ the browser shows a blank page, with below errors

Failed to load resource: net::ERR_CONNECTION_REFUSED
vue.min.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
docsify.min.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
search.min.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
docsify-pagination.min.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
prism-bash.min.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
/%3C%=%20BASE_URL%20%%3Eformvuelar/docs/img/favicon32x32.png:1 Failed to load resource: the server responded with a status of 400 ()
/%3C%=%20BASE_URL%20%%3Eformvuelar/docs/img/favicon16x16.png:1 Failed to load resource: the server responded with a status of 400 ()
/%3C%=%20BASE_URL%20%%3Eformvuelar/docs/img/favicon64x64.png:1 Failed to load resource: the server responded with a status of 400 ()