vueform / builder Goto Github PK

View Code? Open in Web Editor NEW

159.0 1.0 15.0 7.93 MB

Drag and Drop Form Builder for Vueform

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

License: Other

CSS 7.50% JavaScript 83.67% SCSS 7.29% Vue 0.45% TypeScript 1.09%

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

builder's Introduction

Vueform

Vueform is an open-source form framework for Vue.js.

It standardizes the entire form building process, while taking care of everything from rendering to validation and processing:

25+ form elements with multi-file uploads, date pickers and rich text editor
element nesting and repeating
a complete theming and templating system with Tailwind support
50+ validators with async, dependent and custom rules
conditional logic with and/or condition groups
built-in form steps support
translating form contents and global i18n support
fully accessible
... and many more

Get Started

Create your first Vueform project using your favourite package manager:

npm create vueform@latest

yarn create vueform

pnpm create vueform

bun create vueform

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.

Examples

Explore real-world applications of Vueform with some of our examples. Whether you're building a simple contact form or a complex multi-step questionnaire, these examples will give you ideas how to leverage Vueform features in your projects.

Drag and Drop

Build forms even quicker using our drag and drop form builder tool and export the code as a native Vue component: https://builder.vueform.com/demo

Contribute

We welcome contributors of all levels and backgrounds. Whether you're fixing bugs, enhancing functionality, or updating documentation, your efforts help strengthen Vueform for everyone.

Here are a few ideas how can your contribute:

Report bugs to help us maintain stability. Please check our reporting bugs guide.
Share ideas for innovative features or improvements in Ideas.
Ask questions to clarify doubts in Questions and let others find it later.
Send pull requests for code enhancements or fixes. Please check our contribution guide.
Help with translating Vueform to new languages.

Development

For those interested in diving deeper into Vueform's inner workings, you can set up a local development environment. Please follow our guide for setup instructions.

Clone

Clone Vueform into your local environment.

git clone https://github.com/vueform/vueform.git

Setup

Setup Vueform in a test environment and import the source files for Vueform plugin.

import { vueform } from '@vueform/vueform/src'

Now you can make changes in the src directory and you should see their effect in your test environment.

Test

Once you're finished make sure that all the tests are still passing.

npm run test

Build

If everything looks good, run the build script.

npm run build

License

MIT

builder's People

Contributors

Stargazers

Watchers

Forkers

rmeltonmi yunchanchhaya bhanu2217 terry455217 jclaudan bright-spark buildinred strykstaguy enmanuelplc lyhiving vinoddevela1-gep ritzcod3 danielroe stonezhao28 palash-mandal

builder's Issues

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

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

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

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

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

`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

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

vueform / builder Goto Github PK

builder's Introduction

Vueform

Get Started

Manual Installation

Documentation

Examples

Drag and Drop

Contribute

Development

Clone

Setup

Test

Build

Follow Us

License

builder's People

Contributors

Stargazers

Watchers

Forkers

builder's Issues

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

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

Recommend Projects

Recommend Topics

Recommend Org