Giter Site home page Giter Site logo

vueform / builder Goto Github PK

View Code? Open in Web Editor NEW
163.0 1.0 16.0 7.93 MB

Drag and Drop Form Builder for Vueform

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

License: Other

CSS 7.51% 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 Issues

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

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:

image

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.

image

Additional context

No response

Logs

No response

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

  1. Have a container with fields in it
  2. Clone the container
  3. The container receives a unique name but the fields inside the container does not
Cursor_and_Ändra_formuläret_för_Nobis_-_Selfcheck

The container with a field before cloning

Cursor_and_Ändra_formuläret_för_Nobis_-_Selfcheck

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

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

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

  1. Have 3 fields: Radiogroup with options, Checkboxgroup with options, Select with options.
  2. Click on the Select field.
  3. Click on either the Radiogroup or the Checkboxgroup.
  4. The options from the Select field will transfer/copy to the clicked field.
Window_and_Ändra_formuläret_för_Dolor_-_Selfcheck

Additional context

No response

Logs

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.