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

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?

Is there an option to give an array as the input for the select input?

For example, something like this

FormulateInput v-model="value" :options="{Name 1, Name 2, Name 3, Name 4}" type="select" placeholder="Select a Name from the list"

Basically the usecase is, I have a list of names fetched from database which is in an array format and user has to select a name from only that list. How can I use vueformulate in this case?

Describe the new feature you'd like Capture @click from type button in a FormulateForm generated by a schema. Alternatively be able to use multiple submit buttons in a schema and differentiate between the one @clicked. The @click is not processed by the FormulateForm and have tried looking for ways for adding the event listeners on mounted() but all looks messy. If I use multiple 'submits' the $event payload does not enable me to differentiate between the different submit buttons. I could clone the FormulateForm and add some functions - but would be great if I could capture a button click and read/process the properties from that. I am not sure if I am missing anything but dont see a way of doing this without ending up with a subpar solution.

btw - love the library! tried a number but this seems the best with good documentation.

What percentage of vue-formulate users would benefit? 80% - well all those wanting to use the FormuateForm with a schema.

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?

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.

Is there an option to give the date format for vue-formulate? If it is not there it would be a really good option to give it. I was trying to give date format MM-DD-YYYY. But by default it i coming in DD-MM-YYYY format.

Add array support for storing lists/arrays

Something like this whereby the index is used for storing in the correct index

<div class="border border-black p-6">
      <FormulateInput
        v-for="(item, index) in items"
        :key="index + 1"
        type="text"
        :name="item"
        :index="index+1"
        :value="item"
        placeholder="Add item"
        class="mb-1"
        element-class="w-full"
      />
</div>

This wil now store data in the form like

item[1]='input1'
item[2]='input2'
item[3]='input3'

Describe the bug I am trying to create a form with an optional URL field. When applying the URL validation rule to this field, it automatically fails validation if the field remains empty. This occurs because isUrl rejects if passed an empty string. Note this occurs on both type="text" and type="url" fields. Because of this, optional text fields cannot be used in a form with URL validation.

Link to the URL validation function, which rejects if passed an empty string (I tested this with that npm package): https://github.com/wearebraid/vue-formulate/blob/c6ffe1995be0df608c9c735186f4158662449fc8/src/libs/rules.js#L283

You can actually see this bug on the validation documentation page. Upon page load, the URL validation field already has an error message because the field starts empty: https://vueformulate.com/guide/validation/#url

To Reproduce https://codepen.io/mjlehrke/pen/jOWyyrq

1. Create a URL or text field with FormulateInput
2. Add URL validation with validation="url"
3. Attempt to submit form with empty field
4. It will fail validation

Reproduction Submit empty fields in this codepen. It will automatically fail validation. https://codepen.io/mjlehrke/pen/jOWyyrq

Expected behavior An optional text field with URL validation should not automatically fail validation if that optional field is empty. Bigger picture, any Formulate field should only go through validation if it is not empty or it has the 'required' rule.

Thinking about this further, maybe there should be an 'optional' validation rule that bails out of validation if the field is empty? This would allow you to add validation to a field, but make that field optional, and only validate anything if it is not empty. (I can make a new feature request if needed)

Screenshots

If I duplicate a repeatable input group, it automatically fails validation

Device information:

• Device: PC
• OS: Windows 10
• Browser: Firefox & Chrome
• Version 2.4.0 (it was also happening in 2.3.8)

Currently you can only guess when the form is initialized.

I think there are 2 possible solutions for this

Solution 1: Trigger the input event after the form is fully loaded

  <FormulateForm
    v-model="data"
    :schema="items"
    @input="update($event)" // Emitted on change (only after mounted event and when the form is fully initialized!) 
/>

Solution 2: Add an additional event

  <FormulateForm
    v-model="data"
    :schema="items"
    @input="update($event)" //  Emitted on change (only after mounted!)
    @mounted="update($event)" //  Emitted when the form is fully initialized/mounted
  />

Actual behaviour

  <FormulateForm
    v-model="data"
    :schema="items"
    @input="update($event)" // Emitted on change (also during mount/initialization! Why is this necessary?)
   />

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Describe the bug When conditionally rendering a textarea component using tsx templates it first emits the character typed followed by the value false

To Reproduce Steps to reproduce the behavior:

Given a component like this:

import type { VNode } from "vue";
import { Component, Vue } from "vue-property-decorator";

const typeOptions = [
    { value: "text", label: "Text" },
    { value: "select", label: "Dropdown" }
];

@Component
export class MyForm extends Vue {

    private values: any = {};

    public render(): VNode {
        return (
            <formulate-form
                v-model={this.values}
            >
                <formulate-input
                    name="type"
                    label="Type"
                    type="select"
                    options={typeOptions}
                    validation="required"
                />

                {this.values?.type === "select" && (
                    <formulate-input
                        name="selectOptions"
                        label="Options"
                        type="textarea"
                        help="Enter a new line for each option"
                        onInput={this.onOptionsInput}
                        validation="required"
                    />
                )}
            </formulate-form>
        );
    }

    private onOptionsInput(value) {
        console.log("options: ", value);
    }
}

1. Select the select/dropdown type
2. Type something in the newly shown options text area

Expected behavior It should show the value you typed in the textarea It should only log once for each key press and it should log only what was typed

Actual behaviour It logs twice:

• the key initially pressed
• the value false

Screenshots

Device information:

• Device: Laptop
• OS: Windows 11
• Browser Chrome
• Version 107.0.5304.107

Notes:

• I tried reproducing this in the code sandbox but was unable to so have assumed this is only reproducible in tsx rather than more traditional SFC.
• In my own code I have removed and added the conditional statement wrapping the component to verify this is part of the problem
• I tried adding the keep-model-data prop to the input but this did not resolve the issue

NOTE: If you have a question about how to use Vue Formulate, please do not file a bug report. Instead checkout the community page of the documentation for details on the best places to ask those questions.

https://vueformulate.com/guide/community/

Describe the bug

• While using uploader option, how to track the removal of file in ith input. Also in case of multiple file uploads, i am not getting the entire file list instaed uploader is invoking for each file upload.
• Upload function is executed twice when the file is being uploaded and when the form is being submitted. How to avoid this, I tried using upload-behaviour="delayed" but it is not working.
• It will be very useful for me, i tried few things but couldn't get it.
• Please help. I am not sure where to post my question so created a bug for it.
• It will be good if a community forum is avalable to discuss/clear things as i could find any slack issues/yuoutube tutorials regardin vue-formulate.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Type '....'
4. See error

Reproduction It's hugely helpful if you can isolate the bug in a CodePen or CodeSandbox. You can use VueFormulate via CDN to show the issue. This isn't a requirement just a big productivity boost. To help, we've produce starters you can easily fork:

CodePen:

CodePen is perfect for simple reproductions. Vue Formulate is already loaded and ready to use:

https://codepen.io/boyd/pen/YzyJPor

CodeSandbox

This is better for occasions when you need to show issues with registering Vue Formulate or configuring base options.

https://codesandbox.io/s/vue-formulate-reproduction-template-p5c1i?file=/src/components/Reproduction.vue

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Device information:

• Device: [e.g. iPhone6, 1997 Dell]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]