wearebraid / vue-formulate Goto Github PK

Describe the new feature you'd like
Proposed solution for allowing classes to be overriden on any sub-element of vue-formulate:

The default would be something like:

Vue.use(VueFormulate, {
  classmap: context => ({
    "outer": `formulate-input`,
    "outer-wrapper": `formulate-input-wrapper`,
    "element-wrapper": `formulate-input-element formulate-input-element--${context.type}`,
    "element": '',
    "help": "formulate-input-help",
    "errors": "formulate-input-errors",
    "error": "formulate-input-error"
  })
}

The idea is that classMap function would be defined globally for all inputs, and then each sub-type could override it, and then as granular as individual input fields could also override each:

<FormulateInput
  type="text"
  classmap-element="form-input block w-full sm:text-sm sm:leading-5"
/>

The idea is that the above solution would allow a developer to setup their own fields using a class-based ui framework and handle 90% of a project's form styles globally for all FormulateInput elements, and then on a case by case basis easily override the styles on a per-element basis, and lastly scoped slots as a nuclear option.

I'll reiterate the goal of Vue Formulate is to make high quality form building fast and easy, so I we want to provide that 90% solution as painlessly as possible. 90% of inputs shouldn't require any additional configuration, scoped slot usage, etc.

What percentage of vue-formulate users would benefit?
Probably about 20%

I'm looking for feedback from users of frameworks like Tailwind, Tachyons, or Bootstrap.

Describe the bug
The file uploader does display errors when an incorrect mime type file is provided based on the field's validation rules.

To Reproduce
Steps to reproduce the behavior:

1. Go to vueformulate.com
2. scroll to the file upload field
3. upload a .pdf or other incorrect file
4. the file does not upload, but error messages are also not displayed

• Device: MacBook Pro
• OS: MacOS mojave
• Browser: Chrome
• Version: latest

Describe the new feature you'd like
Be able to generate the form with an openapi v3+ schema

What percentage of vue-formulate users would benefit?
Everyone that uses OpenAPI

Hello,

Thanks for creating this library. Looks refreshing. I did some testing and found some accessibility problems with your current structure:

• By default, <label>is disabled. A label is the only way for users of assistive technology to know what input they should enter; it should, therefore, be a required prop
• The help text needs to be associated with the input using aria-describedby. Otherwise, there is no way to know input and text belong together
• Same goes for error messages.

I’m a maintainer of an inclusive component library (https://github.com/tournantdev/ui/). This is our input component, in which these points are handled. If you like, I can help out with solving these issues. :)

And a mostly unrelated question: Is it possible to conditionally display validation messages? E.g. if an e-mail is required can I only show the required message and not that is the wrong format?

Best wishes,
Oscar

The documentation says:
While technically Vue Formulate does support hidden input fields, the use case is pretty minimal since you can easily inject your own "hidden" values into submitted data with your a form submission.

But when I look at that page I can't find something that answers the question (or I don't understand the code/text very well).

I guess the code for a hidden input element is:

<formulate-input
  type="hidden"
  name="secretInputField">
</formulate-input>

I'm I correct?

When uploading a new image, the attribute data-has-image should be set to true (type Boolean) and instead it is populated with the entire base64 image.

Description
Followed the Getting Started but for some reason I am not getting any style.

Steps to reproduce

1. Create new application with nuxt
   
2. Add middle-ware for using vue-formulate (note: I am getting 1 warning!)
   
3. Modify the index page (based on getting started)

<template>
  <div>
    <!-- T01 Text -->
    <FormulateInput v-model="name" type="text" label="What is your name?" />
    <strong
      >Hello <em>{{ name }}</em
      >!</strong
    >
    <!-- T02 Email -->
    <FormulateInput
      type="email"
      name="email"
      validation="required|email"
      label="What is your email address?"
    />
    <!-- T03 Checkbox -->
    <FormulateInput
      v-model="data"
      type="checkbox"
      label="Which animals make good pets?"
      :options="{ dog: 'Dogs', alligators: 'Alligators', cat: 'Cats' }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Rednas',
      data: undefined
    }
  }
}
</script>

Actual behaviour in chrome with no errors/warnings in the console

Expected behavior like in the Getting Started

Am I missing a step somewhere or is not compatible with nuxt somehow?

Describe the new feature you'd like
A label slot so we can add our own label format.
or
Label hover tooltips with slot possibility (so we can add our own icons where we can hover over.)

What percentage of vue-formulate users would benefit?
80%

Describe the bug
Hi guru,
Is there a way to display the radios or checkboxes input horizontally?

Thanks on advance

Add something like this for number inputs:

<input type=”text” inputmode=”numeric” pattern="[0-9]*">

It would help with accessibility, for since the buttons on mobile will be bigger and this pattern is being recognized by (https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)

Describe the bug
Initialising FormulateInput type=select with options set to an empty array causes a Range Error
Error in render: "RangeError: Maximum call stack size exceeded"

To Reproduce
Open page view console.

Reproduction
View
Code

Expected behavior
Passing an empty Array should should render the placeholder value in the select element. The same as passing an empty Object.

Device information:
Any browser

Currently FormulateForm will show errors on the blur event as well as on submitting the form with errors. I was wondering if it would be/is possible to set error-behavior such that errors are only shown when submitting a FormulateForm.

Describe the new feature you'd like
Add the ability to add more files or images to a file input, after files have already been selected. Currently the only option is to remove all files before adding new ones. The best option would probably be to add a prop to allow for adding files/images.

This feature would eliminate the need to re-select all files/images if you missed some on the first time, reduce the amount of uploads (upload-behaviour="live") and gives to opportunity to add files on fields with pre-filled files/images.

This option should only be available to inputs with the multiple prop.

What percentage of vue-formulate users would benefit?
80%

Describe the new feature you'd like
We need to set custom css classes on the different html elements. This could be most likely get done by adding options.

What percentage of vue-formulate users would benefit?
100%

Describe the bug
Validation runs are only checked when the user changes field values. This breaks the confirm validation rules.

To Reproduce
Docs Example

Add a New password e.g "123"
Add matching password to Confirm password - Validation passes

Change New Password & Submit. The form will pass validation even though the values are not the same any more.

Reproduction
See docs example

Expected behavior
Validation should fail if the values are not the same.

To address this behavior we should add something like remove-behavior="remove|keep" on field and form elements to remove or keep a field's value if it is removed from a form (using v-if or the like)

I worked through the documentation, and I have the following questions (in case I've missed something in the docs):

• Field Groups: Is there an option to group fields together on a form? E.g. on a user profile form having a section for person details (fields for name, last name, etc), a section for profile (fields for user name, avatar image), section with contact details (fields for phone, email, etc)

• Theming: the theming section in the docs mention that you can style the field elements using SCSS variables. Is it possible to use components from another UI library, e.g. Vue Ant Design?

Describe the new feature you'd like
I have a large form with up to 20 fields. Some fields are required, some are not. When I hit submit, nothing happens when there are fields that do not pass the validation. However, my form is too large to see the validation messages below these individual fields.

I would like to be able to add a general message below the form to show there are validation issues for the user to fix before the form can be submitted.

I added the component below my submit button and expected that with showValidationErrors this would be automatic but alas.

Question: is this possible in the current version?

What percentage of vue-formulate users would benefit?
80%

I'm trying to enable/disable submit buttons depending on the validation status of other fields in the form. How might I do this? i.e. which property or chain of properties can I access to determine the validation status?

Describe the new feature you'd like
In an address form with zipcode and country we often have strict rules for the zipcode based on the country. I created a custom rule for both the zipcode and the country field using the getFormValues but this is not enough for all situations.
When the zipcode validation fails due to the wrong country selected and the user changes the country for which the zipcode does match, the zipcode validation message remains as the zipcode field is not validated at that point.
Even more so, blurring from the zipcode field (without changing it) also does not revalidate and the validation message remains.

The requested feature would be the option to validate another field when the current field is changed.

What percentage of vue-formulate users would benefit?
I am not sure, but when working with addresses I think this would benefit a lot of users.

I am trying to raise an error as soon as the input value is different then "Rednas"


Tried:
data.name => works but of course if the name is set to name and only when in async because otherwise data is not initialized yet
@input="emit = $emit" => returns a function?

Similar to something like Laravel's bail. There are a few ways we could go about implementing it from a syntax standpoint. Laravel has chosen (and we've largely mirrored) to use rules, or almost pseudo-rules to allow modification of the validation "runtime" examples: bail and sometimes

required|bail|between:0,100

This keeps the syntax all familiar – although I've always found these "modifiers" a little opaque to read. Are they sequential? global (they are global), etc.

I think we could keep this mirroring, but I wonder if there's any appetite for a modifier on a rule. Possible syntax:

validation="^required|between:0,100"

In this case, the rest of the validation rules would run only if required passes, but if it does the rest of the rules would run even if one of them fails (not just first failure like bail).

Just started yesterday with this framework and already decided to use it for my further projects. The current documentation is good for learning the basics. But is not ideal for during programming.

For example something like this

If needed I can of course share this document

Describe the new feature you'd like
Right now, you can't generate a form from a schema-like json file with several fields on the same line, as they are full width by default. Fields on the same line have to be put in a flex div by hand.

Not sure if this could be achieved, but maybe fields could by default by in a flex div and have a "group" (e.g. group=namefields) and "width" (1/3, 1/2, etc.) attribute so they could automagically be assembled into a more complex layout.

Thanks in advance for the consideration.

What percentage of vue-formulate users would benefit?
80% ?

Describe the new feature you'd like
A form I'm trying to make has many options that change the form, like:

<label><input type="checkbox">Show Input></label>
<label>Only shown when above is checked<input type="text"></label>

Is there a way to do that or is that a planned feature? I can certainly do that with v-if sprinkled everywhere and that might be just as clear, but before I do that I was wondering if there was a better recommendation.

I will also be creating the form with a JSON object, so I'm planning on using the https://vueformulate.com/guide/forms/#generating-forms method and probably just adding additional info about what fields are dependent on others.

What percentage of vue-formulate users would benefit?
I have no idea. It's a common case in the apps that I build.

Describe the new feature you'd like
It's not uncommon for a field to be dependent on another field's value. This is no-problem using Vue's computed properties; however, if I need to have a repeatable group of such fields, there isn't a way to for me to use the current group's model as context for the values of my dropdown.

For example, consider a form where I can order coffees. I would have a grouped input for selecting the beverage type and it's options. If I have a selection for "Cream?" with the values Yes and No, I might then want an input for "How much cream?" to appear when the user selects "Yes".

Perhaps I'm missing something, but it doesn't seem like there's an easy way to do this right now.
Using VueFormGenerator, you were able to pass a function into the "options" parameter of a Select field. The first argument of that function would be the current state of that particular group's model. Additionally, fields have a "visible" attribute that would also accept a boolean or similar callback. This gives you the ability to contextually hide a field.

What percentage of vue-formulate users would benefit?
70%

Describe the new feature you'd like
A select all toggle for checkboxes with options.

What percentage of vue-formulate users would benefit?
80%

As mentioned on #21, we should move to language tags while it's early.

If this project gets big, using two letter language identifications (i.e. en fr pt) would generate regional issues. We should move to en-US en-UK pt-BR pt-PT.

In English some words can be a little different...

... but in Portuguese the sentence can change a lot.

Describe the bug
Calling function in Input Button not working.

To Reproduce
<FormulateInput type="button" label="Show Dialog" v-on:click="showdialog()" />

My Function
showdialog () { this.showformDialog = true }

Describe the bug
When running my Vue x Nuxt.js application on Internet Explorer 11, I get the following error:

Translation: Multiple definitions of a property not allowed in strict mode

I have tried desperately to fix this issue myself, but I'm not that deep into programming yet, unfortunately.

To Reproduce
Steps to reproduce the behavior:

1. Install basic nuxt application
2. Install vue-formulate
3. Use vue-formulate in the application and run in IE 11

Expected behavior
A clear and concise description of what you expected to happen.
Running everything without the error which is causing the entire Nuxt application to crash

Screenshots
If applicable, add screenshots to help explain your problem.
When trying to trace back where the multiple definitions have been defined, I came across this line

I strongly believe this is causing the error..

Device information:

• Device: PC
• OS: Windows 10
• Browser: IE11, works good on Edge, Chrome and others
• Version 11

Hello Vue Formulate developers,

I have the feeling that I miss something: I created a form with Vue Formulate and everything works fine except that if I click on submit button nothing happens.

`

 <formulate-form
     action="https://api.staticforms.xyz/submit"
     method="post"
 >
 
     <formulate-input
      type="hidden"
      name="accessKey"
      value="[secret key]"
    >
    </formulate-input>

     <formulate-input
      type="hidden"
      name="redirectTo"
      value="[private address]"
    >
    </formulate-input>

    <formulate-input
      id="honeypot"
      type="text"
      name="honeypot"
    >
    </formulate-input>
 
    <formulate-input
      type="text"
      name="name"
      label="Naam"
      placeholder="Voer hier uw voor- en achternaam in"
      validation="required|max:50,length"
      :validation-messages="{
          required: 'Voer hier uw voor- en achternaam in.',
          max: 'De voor- en achternaam mogen samen niet langer zijn dan 50 tekens.'
      }"
    >
    </formulate-input>

    <formulate-input
      type="email"
      name="email"
      label="E-mailadres"
      placeholder="Voer hier uw e-mailadres in"
      validation="email|max:50,length"
      :validation-messages="{              
          email: 'Voer een geldig e-mailadres in.',
          max: 'Het e-mailadres mag niet langer zijn dan 50 karakters.'
      }"
    >
    </formulate-input>

    <formulate-input
      type="textarea"
      name="message"
      label="Bericht"
      placeholder="Voer hier uw bericht in"
      validation="required|max:1000,length"
      :validation-messages="{              
          required: 'Voer hier uw bericht in.',
          max: 'Het bericht mag niet langer zijn dan 1000 karakters.'
      }"
    >
    </formulate-input>

     <formulate-input
      type="submit"
      name="Verzenden"          
    >
    </formulate-input>
                   
</formulate-form> 

For privacy concerns I removed the access key and private address in the code.

Is there something missing in the above code? Is there something that I should add?

I guess the action attribute should just work?

So first of: Great Plugin, absolute time saver since you don't have to write the same logic over and over again! I love it!

Anyhow, I found a bug with the radio buttons: If a default value is set, you can click the label to select an option, but not the icon. Also this sometimes just seems to happen at random. Needless to say, most users would push the radio button and not the label.

Reproduction

1. Go to this page in the docs: https://vueformulate.com/guide/inputs/box/#radio
   Here it doesn't work to click the circle icons to select an option

2. Go to this page in the docs: https://vueformulate.com/guide/#double-binding
   Here clicking on the circle icon works

Expected behavior
Consistently working radio icons

Device information:

• Device: PC & OnePlus 7
• OS: Windows 10, Andorid 9
• Browser: Chrome, Firefox, Android: Chrome
• Version: Chr: 81.0.4044.129 ,FF: 76.0b8 (64-Bit), Android Chr: 81.0.4044.117

I'm putting together some homepage demos on vueformulate.com which is using @braid/vue-formulate at version 2.0.4 and in the process have noticed that the "checkbox" and "radio" input types do not validate as I expect.

checkbox

When creating an input with type of checkbox the value is present without an interaction as an empty array rather than the key not existing in the returned object all.

My expectation would be to have it dropped from the modeled data entirely. Additionally, even though the demo has a validation rule of required|min:1 it is not failing the check when I submit the form.

radio

A similar issue exists when the input is set to radio. The Initial value without any user interaction to the form appears to be the last option in the array of choices.

This means that it also does not fail the validation rule check because there's a mapped value by default in the v-modeled values object.

When using a FormulateForm with FormulateInput type image, I wish to keep the uploader prop, so I can use it for Parse server File Upload.

Example:

<template>
    <div>
            <FormulateForm
                    class="login-form"
                    @submit="setImage"
            >
                <FormulateInput
                        type="text"
                        name="name"
                        label="Image Name"
                        placeholder="image name..."
                        validation="required"
                />

                <FormulateInput
                        type="image"
                        name="image"
                        label="Select an image to upload"
                        help="Select a png, jpg or gif to upload."
                        validation="mime:image/jpeg,image/png,image/gif"
                        upload-behavior="delayed"
                        :uploader="uploadImage"
                />

                <FormulateInput
                        type="submit"
                        label="Add an Image"
                />

            </FormulateForm>
    </div>
</template>
<script>
export default {
        data() {
            return {
                upImgProps: {}
            }
        },
        methods: {
            setImage(data) {
                this.$store.dispatch('a_uploadImage', {data, ...this.upImgProps});
            },
            uploadImage(file, progress, error, option) {
                this.upImgProps = {file, progress, error, option};
            }
        }
    }
</script>

As shown in code above, I can accomplish this by attaching 2 methods. The question is, is there a simpler way that i use the submit event, at time same time access the image' uploader props (file, progress ... etc)?

Describe the bug
Whenever I try to add validation to an input, I get an error

To Reproduce
Steps to reproduce the behavior:

1. Add simple example to my code

<FormulateInput
              type="email"
              name="email"
              label="What is your email address"
              help="Where should we contact you?"
              validation="required|email"
            />

2. See Error Uncaught (in promise) TypeError: t.split is not a function

I'm running VueJS 2 with Typescript and Webpack using Single Files.

Expected behavior
Simple working example.

Screenshots

Device information:

• OS: Mac OS
• Browser Chrome

Describe the bug
While reading the documentation about how to add a slider I noticed that the horizontal line of the slider isn't visible when you are using Firefox.

To Reproduce
Steps to reproduce the behavior:

1. Start Firefox (75).
2. Open the following page: https://vueformulate.com/guide/inputs/sliders/.
3. Result: no horizontal line in the slider widget.

Expected behavior
I expect to see a horizontal line (like in Google Chrome/Chromium 80).

Screenshots

Firefox 75

Chromium 80

Device information:

• Device: Dell XPS 13
• OS: Fedora 32 (Silverblue)
• Browser: Firefox
• Version: 75

Describe the bug
Whilst trying to deploy to Netlify we get the following error:

4:52:53 PM: error @braid/[email protected]: The engine "node" is incompatible with this module. Expected version ">=11". Got "10.20.1"
4:52:53 PM: error Found incompatible module.

Reproduction
Your package.json is set as the following:

"engines": {
    "node": ">=11"
  },

Expected behavior
To be able to deploy on node versions less than 11 as it works fine on my local machine using node v10.18.1.

Is there a reason the engine requirement is 11+?

Any plans to support TypeScript?

I see typescript in dependencies:
https://github.com/wearebraid/vue-formulate/blob/master/package.json#L80

But don't see any declarations 🙂

P.S. Formulate looks like a great solution for building forms. Well documented, customizable, friendly API... I totally want to try it in my next application.

Describe the new feature you'd like
While building a form recently with Formulate, I found myself clearing the input (a password reset form) after I received a successful response from the server. When I set the value to an empty string, I noticed that the validation rules are running again. Does Formulate expose some helpers or way to clear a value (or values) without triggering validations? I've attached a screenshot of the issue.

What percentage of vue-formulate users would benefit?
Unknown, but I assume others will ask how to clear inputs without triggering validations eventually.

Library breaks in IE 11 - See screenshot

To Reproduce:
Visit vueformulate.com > Open F12

Another one

Describe the new feature you'd like
autocomplete prop so browsers like chrome can automatically fill in the forms
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

What percentage of vue-formulate users would benefit?
80%

To address this, we should add something like a new group type that allows nesting of fields. Example API:

<FormulateInput
  type="group"
  name="users"
  repeatable="true"
  limit="2"
  #default="{ groupState }"
>
  <FormulateInput
     name="username"
  />
  <FormulateInput
    value="password"
    type="password"
  />
</FormulateInput>

The modeled data output for the above would be something like:

{
  users: [
    {
      username: 'jane',
      password: 'secret'
    },
    {
      username: 'jill',
      password: 'shhh'
    }
  ]

Yooo, i got a new one :P

Describe the new feature you'd like
Passing tab order as a prop

What percentage of vue-formulate users would benefit?
40%

Describe the new feature you'd like

Many times we have to mask input values for better UX.

VueFormulate already have really good features and be able to mask a value is the only missing feature that makes me add an extra dependency to handle my forms.

Today I use vue-the-mask (https://github.com/vuejs-tips/vue-the-mask) but it seen dead, doesn't have any activity from the maintainer and a lot of good contributors PR to get merged.

What percentage of vue-formulate users would benefit?

80%

Let's talk about it.

Describe the new feature you'd like
I would like to be able to listen for keypress events on a FormulateInput component. Perhaps I'm doing something wrong, but

<FormulateInput
        type="text"
        placeholder="Test"
        v-model="test"
       @keyup.tab="someFunction"
/>

does not trigger someFunction when the tab key is pressed. This is not limited to this key, I have tried other keys as well.

What percentage of vue-formulate users would benefit?
I don't know if this is a common use case, but in my case, I want to be able to trigger the creation of a new item when tab is pressed.

Whenever validation occurs, it would be nice to emit validation with the validationErrors array in the case of inputs or {inputName: []} for Forms. This would allow easily implementing your own handling of errors.

If that sounds good I could start on it, my current idea would be to do it in .then(errorMessages => { this.validationErrors = errorMessages }) of FormulateInput.performValidation

Hello! First of all, its a really cool project you’ve got here. It’s something I’ve been trying to do myself for a really long time with little success.

Is it possible to do server side validation and pass in the error messages for each field after form submission?

Describe the new feature you'd like
Currently vue-formulate uses scoped slots internally, but this API is not public. It would be great to have an optionally public API (well documented) for using it.

<FormulateInput>
  <template #label="{ label }">
    <label>I want my own label code!</label>
  </template>
</FormulateInput>

So technically the above code works in 2.0.0 already, but its not fully fleshed out and does not have access to the entire context object, we should give each slot access to the same internal context object which holds all the information about the component.

What percentage of vue-formulate users would benefit?
I hope not more than 40% because while scoped slots are super powerful, they require a much more in-depth understanding fo the inner-workings of vue-formulate and the goal is for this to be super easy to use. But we do need to be able to handle more complex use cases.

Describe the new feature you'd like
In my case I'm doing a form wizard, and when navigating from a step to another I can't go back and started again because some field, that aren't available anymore (destroyed) are still register and blocking the submit event.

What percentage of vue-formulate users would benefit?
50%

Here I see how the input register itself on form
https://github.com/wearebraid/vue-formulate/blob/master/src/FormulateInput.vue#L244

What about implement a deregister method on FormulateForm called from FormulateInput when destroyed?

Thanks!

First of all, I really want to thank you all for coming up with this,
I deeply appreciate it is saving me a lot of hours

Just 4 days ago I stumble on this and I am loving it,
I seek help to understand form field Select :options,
My data is coming from database, as an Object/Array/JSON
everything shows up as the first option only,

Illuminate\Support\Collection {#1647 ▼ #items: array:3 [▼ 1 => "Restaurant" 2 => "Social Media" 3 => "Shopping" ] }
JSON
"{"1":"Restaurant","2":"Social Media","3":"Shopping"}"

this is what I get

Please appreciate any heads up or better way to do it