Giter Site home page Giter Site logo

q-form-builder's Introduction

QFormBuilder

Simple, reusable, drag-and-drop form editor (and renderer) for Quasar (v1) and Vue.js

Live Demo Application (Live demo source)

QFormBuilder usage preview

Want to build an application where your user can drag-and-drop form components to build a form?

Well, you're in luck. This library leverages the power of Vue and the beauty of Quasar components to present a form builder. Simply invoke this component with a v-model, and all form-building activities are reflected on the @input event. You can then use the same components to render your form at runtime. This library does not handle the saving or use of the data it generates; it's up to you as the developer to watch the model and handle the output as you need. Consequently, when rendering forms created by this builder, you can use the components and definitions provided to render an interface.

This library could be handy for applications like:

  • Survey builder (aka SurveyMonkey clone)
  • Registration database
  • And an infinite world of possibilities....

Installation

npm install --save q-form-builder

Usage

<q-form-builder v-model="myForm" />
import { QFormBuilder } from 'q-form-builder'

export default {
  name: 'MyApp',
  components: {
    QFormBuilder
  },
  data: function () {
    return {
      myForm: []
    }
  }
}

In this example, the myForm data object array will be updated with form elements as they are added/modified/removed from the builder interface. You can then save that data as you see fit.

Sample Data Structure

{
  cid: [unique guid string]
  field_options: {
    description: [text used in hint] (default '')
    options: [array of options if a multiple choice type, like checkbox or radio]
  }
  field_type: [string describing the field type, e.g. 'text' or 'address']
  label: [label to use on the form] (default: 'Untitled')
  required: [boolean whether the field is "required"] (default: true)
}

The field_options property may be undefined or an empty object, as its contents are technically optional. Fields which require its use will fill that value. At a minimum, a field object will always have cid, field_type, label, and required. This data definition was used in order to be backward-compatible with the excellent (but no longer maintained) FormBuilder library.

Advanced Usage

Fields

To re-order or remove the fields available in QFormBuilder, the source-fields property can be specified on the q-form-builder tag as an array of objects specifying the type, icon, and label for each form element. The default list consists of (empty items produce an empty space in the sidebar):

[
  { type: 'text', icon: 'text_format', label: 'Text' },
  { type: 'paragraph', icon: 'text_fields', label: 'Paragraph' },
  { type: 'checkboxes', icon: 'check_box', label: 'Checkboxes' },
  { type: 'radio', icon: 'radio_button_checked', label: 'Mult. Choice' },
  { type: 'date', icon: 'event', label: 'Date' },
  { type: 'time', icon: 'access_time', label: 'Time' },
  { type: 'dropdown', icon: 'arrow_drop_down', label: 'Dropdown' },
  { type: 'email', icon: 'email', label: 'Email' },
  { type: 'name', icon: 'person', label: 'Name' },
  { type: 'simple_name', icon: 'person_outline', label: 'Simple Name' },
  { type: 'address', icon: 'home', label: 'Address' },
  { type: 'phone', icon: 'phone', label: 'Phone' },
  { type: 'file', icon: 'cloud_upload', label: 'File Upload' },
  { type: 'payment', icon: 'payment', label: 'Payment' },
  { type: 'terms', icon: 'ballot', label: 'Terms' },
  { type: '' },
  { type: '' },
  { type: '' },
  { type: 'section_break', icon: 'view_agenda', label: 'Section Break' },
  { type: 'page_break', icon: 'call_to_action', label: 'Page Break' }
]

Field Source Position

By default, the source fields appear on the left, with the form construction area on the right. To set the source fields on the right, the setting nav-position can be set to right (default is left).

Advanced Usage Example

To only include Email and Phone field objects:

<q-form-builder v-model="myForm" nav-position="right" :source-fields="mySourceFields" />
import QFormBuilder from 'q-form-builder'

export default {
  name: 'MyApp',
  components: {
    QFormBuilder
  },
  data: function () {
    return {
      myForm: [],
      mySourceFields: [
        { type: 'email', icon: 'email', label: 'Email' },
        { type: 'phone', icon: 'phone', label: 'Phone' }
      ]
    }
  }
}

Development and Example Application

To run the example application, clone the project from https://github.com/baggachipz/q-form-builder.

Enter the project directory, install npm dependencies, and run a local server

cd q-form-builder
npm install
npm run serve

This example allows you to add form components and logs the full v-model to the debug console with every change.

Development Roadmap

  • Additional field type(s): Terms & Conditions
  • Add form rendering example to Sample Application
  • Ability to load and use custom field types

q-form-builder's People

Contributors

baggachipz avatar dependabot[bot] avatar mattcurtisox avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

q-form-builder's Issues

Can't select to edit the field or delete

Hello, i'ts very good, i liked, congrats!

But i have a big problem, i can't select to edit the field or delete

Captura de Tela 2021-02-11 às 13 33 46

like u see in photo, i can interact with the form, but in the demo it's not possible, that's why i can't edit the field.

Cannot use it with vue-cli + quasar

It's an awesome component, however I can't use it inside a vue-cli created project.

I got the following error
image

And the error came from Platform.is.firefox.

!0 === Platform.is.firefox && preventDraggable(t, !0), removeObserver(r), !0 !== i && setObserver(t, e, r);

I think is the build issue that ignored Platform. current I can only clone the whole repo and build it from source

Q-form-builder with laravel mix

Hey,
I have used this code as Vue and it is a good platform. I really like it.
and I want to use this builder into Laravel as a dynamic builder for form creation. you have any suggestion regarding this as npm package is not working fine.
so I hope you can suggest something to me for this.

failed to locate @import file ~quasar-variables.styl

Steps:

  1. Create a new project with quasar 1.0.0
  2. Replace MyLayout.vue with
<template>
  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      Start
      <q-form-builder v-model="myForm" />
      End
    </q-page-container>
  </q-layout>
</template>

<script>
import QFormBuilder from 'q-form-builder'

export default {
  name: 'MyApp',
  components: {
    QFormBuilder
  },
  data: function () {
    return {
      myForm: []
    }
  }
}
</script>
Failed to compile.

./node_modules/q-form-builder/src/components/QFormBuilder.vue?vue&type=style&index=0&id=5590e2fa&scoped=true&lang=stylus& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-stylus-variables.js!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/q-form-builder/src/components/QFormBuilder.vue?vue&type=style&index=0&id=5590e2fa&scoped=true&lang=stylus&)
Module build failed (from ./node_modules/stylus-loader/index.js):
  Error: C:\temp\teste\node_modules\q-form-builder\src\components\QFormBuilder.vue:187:9
     183| 
     184| <style scoped lang="stylus">
     185|   @import '~quasar-variables'
     186| 
     187|   .q-btn.source-field
  ----------------^
     188|     width 129px
     189|     margin 0px 2px 5px 2px
     190| 
  failed to locate @import file ~quasar-variables.styl
  
  - evaluator.js:157 CachedPathEvaluator.visitImport
    [teste]/[stylus-loader]/lib/evaluator.js:157:21
  
  - index.js:28 CachedPathEvaluator.Visitor.visit
    [teste]/[stylus]/lib/visitor/index.js:28:40
  
  - evaluator.js:160 CachedPathEvaluator.Evaluator.visit
    [teste]/[stylus]/lib/visitor/evaluator.js:160:18
  
  - evaluator.js:707 CachedPathEvaluator.Evaluator.visitRoot
    [teste]/[stylus]/lib/visitor/evaluator.js:707:27
  
  - index.js:28 CachedPathEvaluator.Visitor.visit
    [teste]/[stylus]/lib/visitor/index.js:28:40
  
  - evaluator.js:160 CachedPathEvaluator.Evaluator.visit
    [teste]/[stylus]/lib/visitor/evaluator.js:160:18
  
  - evaluator.js:247 CachedPathEvaluator.Evaluator.evaluate
    [teste]/[stylus]/lib/visitor/evaluator.js:247:15
  
  - renderer.js:86 Renderer.render
    [teste]/[stylus]/lib/renderer.js:86:26
  
  - index.js:167 
    [teste]/[stylus-loader]/index.js:167:12
  
  - makePromise.js:840 tryCatchReject
    [teste]/[when]/lib/makePromise.js:840:30
  
  - makePromise.js:799 runContinuation1
    [teste]/[when]/lib/makePromise.js:799:4
  
  - makePromise.js:590 Fulfilled.when
    [teste]/[when]/lib/makePromise.js:590:4
  
  - makePromise.js:481 Pending.run
    [teste]/[when]/lib/makePromise.js:481:13
  
  - Scheduler.js:62 Scheduler._drain
    [teste]/[when]/lib/Scheduler.js:62:19
  
  - Scheduler.js:27 Scheduler.drain
    [teste]/[when]/lib/Scheduler.js:27:9
  
  - next_tick.js:172 process._tickCallback
    internal/process/next_tick.js:172:11  

Quasar Info

Operating System - Windows_NT(10.0.17134) - win32/x64
NodeJs - 10.0.0

Global packages
  NPM - 6.9.2
  yarn - 1.9.4
  @quasar/cli - 1.0.0
  cordova - 9.0.0

Important local packages
  quasar - 1.0.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 1.0.2 -- Quasar Framework local CLI
  @quasar/extras - 1.1.4 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.5.0 -- Babel compiler core.
  webpack - 4.34.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  *None installed*

Networking
  Host - DU1792
  vEthernet (Opção Padrão) - 172.29.140.97
  vEthernet (Internet) - 192.168.1.111

Can't add to Quasar app

Having run yarn add q-form-builder and added import QFormBuilder from 'q-form-builder' to a page I see the following error when running quasar dev.

I have confirmed this with a blank project created by the quasar command line tool (i.e. quasar create).

If I am missing something please let me know.

This dependency was not found:

* q-form-builder in ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib??ref--2-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Index.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save q-form-builder

MIT License?

I'd love to use your code but the license is unknown. Can you add an MIT Licence file add it to the bottom of your README?

Question: рow to render final form?

OK, I see the user created a form and saved it. Now I want other users open that form without edit, just form to enter data. Is there a render component or only builder?

Unable to edit loaded fields from database

Hi, first of all its so great. Actually it is fantastic. I love it.

I need a little help. When the user create a form for the first time, I save the formData as JSON in database and after that when the user reloads the old schema ans it is json parsed into formData there is no way to delete and/or edit old fields.

any suggestions would be appreciated.

Once an element is added to the list it can't be deleted.

Using QFormBuilder Demo, an item can be added to the end of the list and for a time it's available for deletion. But as soon as the next element is added, the garbage can icon disappears from that element seemingly permanently. So other than rearranging the order of elements, you must start over from the beginning if an element is incorrectly added.

While this state of affairs is OK for one-off designs, it fails in the case of where the an end-user is allowed to dynamically change element ordering and remove existing entries.

I'm considering adding elements for video, audio, images, embedded iframes, and markdown for an app where the end-user is dynamically adjusting the layout.

Can the garbage can be permanently (perhaps optionally) available for each element?

Can't use as a component

Hi, that form builder looks very promising, exactly what I need.
However I can't make it work following ReadMe.

I have installed it with npm, used template example ( copy - paste), but looks like
import QFormBuilder from 'q-form-builde
doesn't give component, rather it gives object with different components for field types.
so I am getting error:
[Vue warn]: Failed to mount component: template or render function not defined.

does it work as an npm package ? or I have to make it manually from your code ?

Conditional fields

It would be neat to be able to show/hide a field based on another fields value. Any suggestions on how to accomplish this? Really neat project!

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.