vueform / builder Goto Github PK

View Code? Open in Web Editor NEW

224.0 6.0 26.0 10.84 MB

Drag and Drop Form Builder for Vueform

Home Page: https://builder.vueform.com

License: Other

CSS 4.68% JavaScript 89.83% SCSS 4.54% Vue 0.26% TypeScript 0.69%

dnd-tools drag-and-drop drag-drop drag-n-drop draganddrop form-builder formbuilder builder builders vue

builder's Introduction

Vueform Builder

Drag and drop form builder for Vueform.

Enable developers & non-tech workforce to build even the most complex forms without coding:

User friendly drag and drop form builder
Export forms as native Vue components
Save/load/render forms as JSON and save to database
Custom elements and config panels
Built-in theme builder
Customize the UI
Use it online or on your localhost
Integrate it into any project

Get Started

Create a Vueform Builder instance on your machine using your favourite package manager:

npm create vueform@latest -- --builder

yarn create vueform --builder

pnpm create vueform --builder

bun create vueform --builder

Manual Installation

To manually install Vueform, use our Installation Wizard. This wizard will guide you through the necessary steps for a hassle-free setup.

Documentation

For a detailed understanding of Vueform, its features, and how to use them, refer to our Documentation.

Demo

See Vueform Builder in action: demo.

License

LICENSE

builder's People

Contributors

Stargazers

Watchers

builder's Issues

Can't override container element

Environment

Reproduction

Describe the bug

Additional context

Related discussion:
#41

Logs

No response

When using AI in the Form Builder, save event does not get called

Environment

Framework
"vite": "^5.2.10",
"vue": "^3.4.25",
Package Manager
npm
Vueform and Builder versions
"builder":"1.4.6"
"vueform":"1.10.1"

Reproduction

Use the FormBuilder Vue component and use the AI feature to generate a form. The Save event handler does not get called after the AI response gets generated. To have it called, I have to manually add a new field or update one of the fields for the save handler to get called.

Describe the bug

When using the Form Builder the component should call a save event when the AI returns a form response. Currently this isn't happening and I need to either edit a field for it to call the save event or add a new field.

Additional context

I didn't add a repo but this should be a fairly simple reproduction.

Logs

No response

Layout broken on empty vue app

Environment

"@vueform/vueform": "^1.9.4",
"vue": "^3.4.21"
"@vitejs/plugin-vue": "^5.0.4",
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vue-tsc": "^2.0.6"

Reproduction

Create the following in the builder:

Expand

<template>
  <Vueform>
    <template #empty>
      <FormSteps>
        <FormStep
          name="page0"
          label="Step 1"
          :elements="[
            'h1',
            'name',
            'email',
            'mobilePhone',
          ]"
        />
        <FormStep
          name="page1"
          label="Step 2"
          :elements="[
            'verificationCode',
          ]"
        />
      </FormSteps>

      <FormElements>
        <StaticElement
          name="h1"
          tag="h1"
          content="Contact details"
        />
        <GroupElement
          name="name"
        >
          <GroupElement
            name="column1"
            :columns="{
              container: 6,
            }"
          >
            <TextElement
              name="firstName"
              label="First name"
              :rules="[
                'required',
              ]"
            />
          </GroupElement>
          <GroupElement
            name="column2"
            :columns="{
              container: 6,
            }"
          >
            <TextElement
              name="lastName"
              label="Last name"
              :rules="[
                'required',
              ]"
            />
          </GroupElement>
        </GroupElement>
        <TextElement
          name="email"
          input-type="email"
          :rules="[
            'required',
            'email',
          ]"
          label="Email"
        />
        <TextElement
          name="mobilePhone"
          input-type="tel"
          label="Mobile phone"
          placeholder="+44"
          :rules="[
            'required',
            'regex:/^\\+44[\\d]{10}$/',
          ]"
        />
        <TextElement
          name="verificationCode"
          label="Verification Code"
          input-type="number"
          :rules="[
            'required',
            'size:4',
          ]"
        />
      </FormElements>

      <FormStepsControls />
  </Vueform>
</template>

Then insert it into your own empty Vue app:

<template>
  <Vueform>
    <FormSteps>
...
  </Vueform>
</template>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Describe the bug

I expected the layout to be working out of the box, but there seems to be something missing.

Additional context

No response

Logs

No response

Can not disable validation rules for any element

Environment

@vueform/vueform 1.54
@vueform/builder 1.1.5
vue 3.3.4
vite 4.4.5

Reproduction

// builder.config.js

element: {
    props: {
      default: {
        validation: {
          validation: {
            nullable: false
          }
        },
      }
   }
}

Describe the bug

Trying to disable any validation rule will do nothing

Additional context

No response

Logs

No response

AI generates field excluded from elements in builder configuration

Environment

Framework
"vite": "^5.2.10",
"vue": "^3.4.25",
Package Manager
npm
Vueform and Builder versions
"builder":"1.4.6"
"vueform":"1.10.1"

Reproduction

https://stackblitz.com/edit/github-np1o7c?file=builder.config.js

All I have done is set AI as true and added some general elements to allow.
Now attempt to use the AI tool and for instance write "Generate an Event Registration Form"
From my previous attempts, the AI will attempt to generate a form with a location/address field.
We do not have that currently enabled yet the Form Builder AI will attempt to add that to the form.

Describe the bug

Currently with the AI assistant, when generating a form it will ignore your builder configuration (ie. location field is not enabled) and attempt to add that to the builder. This causes an issue with the builder.

Additional context

No response

Logs

Uncaught (in promise) TypeError: can't access property "maps", window.google is undefined

Radiogroup and checkboxgroup options gets overwritten when clicked after a Select

Environment

@vueform/builder ^1.1.6
@vueform/vueform ^1.6.5

Reproduction

Describe the bug

Have 3 fields: Radiogroup with options, Checkboxgroup with options, Select with options.
Click on the Select field.
Click on either the Radiogroup or the Checkboxgroup.
The options from the Select field will transfer/copy to the clicked field.

Window_and_Ändra_formuläret_för_Dolor_-_Selfcheck

Additional context

No response

Logs

No response

`not_empty` condition does not respect select value `0`

Environment

Reproduction

Describe the bug

not_empty condition does not respect select value 0

Additional context

No response

Logs

No response

HTML field doesn't escape quotes

Environment

https://builder.vueform.com/demo

Reproduction

Add some HTML in the content field, then switch to Code.

Describe the bug

Additional context

No response

Logs

No response

No padding on right panel

Environment

Reproduction

Describe the bug

Right panel is missing side paddings when used with the following configuration:

{
  leftPanel: ['elements'],
  rightPanel: ['form'],
}

Additional context

No response

Logs

No response

Condition selector does not work for custom elements

Environment

Reproduction

Describe the bug

Condition selector does not work for custom elements

Additional context

Related to #38

Logs

No response

Table feature inclusion

Describe the feature

Is there a possibility of including a table component in the drag and drop. It would really assist in arranging items and presenting them in an organized manner.

Final checks

Check existing issues and ideas.
Check roadmap.

Cloning a container with fields gives the container a unique name but not the fields within

Environment

@vueform/builder ^1.3.2
@vueform/vueform ^1.9.4

Reproduction

Describe the bug

Have a container with fields in it
Clone the container
The container receives a unique name but the fields inside the container does not

Cursor_and_Ändra_formuläret_för_Nobis_-_Selfcheck

The container with a field before cloning

The cloned container receives a unique name, the field within does not

Additional context

No response

Logs

No response

Custom Panel Config not Preserving Data When Reordering

Environment

Package manager: npm
vite: 5.2.10
vue: 3.4.25
@vueform/builder: 1.4.4
@vueform/vueform: 1.9.13

Reproduction

https://stackblitz.com/edit/github-atqf2q?file=builder.config.js

Drag Race field into the form
Drag Gender Field to the form
Click the gender field so that the configuration panel is open
notice that in the data -> items, the default mappings is set to golden retreiver
reoder the gender field to be the first element on the form
notice that the mapping field is cleared.
click on the race field, notice that the default mapping is still there
click on the gender field, notice that the default mapping is also back

Describe the bug

We've created a custom Radiogroup Input that has an extra field in the data configuration panel where users can define a mapping. The mapping options are being pulled from an API. We have set defaults for these new fields in the builder config.

If you add these two fields into your form, and then you reorder the fields, the mapping data in the config panel disappears. sometimes closing and reopening the element configuration panel brings back the original value, sometimes it doesn't

Additional context

No response

Logs

No response

vueform / builder Goto Github PK

builder's Introduction

Vueform Builder

Get Started

Manual Installation

Documentation

Demo

Follow Us

License

builder's People

Contributors

Stargazers

Watchers

Forkers

builder's Issues

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Describe the feature

Final checks

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Recommend Projects

Recommend Topics

Recommend Org