baggachipz / q-form-builder Goto Github PK

View Code? Open in Web Editor NEW

149.0 149.0 38.0 3.7 MB

Form Building using drag-and-drop. Uses Quasar Framework and Vue.

License: MIT License

JavaScript 9.90% HTML 1.10% Vue 88.31% Stylus 0.69%

q-form-builder's People

Contributors

Stargazers

Watchers

q-form-builder's Issues

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?

Is possible to add custom field types from server side?

Is it possible to add custom field types from the server-side. I'm asking because I'm looking to improve one existing form builder and I need to extend the field types.

Form controls hidden at certain breakpoint

The left panel of form controls hides itself when you are on mobile view.

How would i stop this from happening?

For Quasar V2?

Hi there, they are a update for Quasar v2?

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!

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 ?

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.

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

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.

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

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

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

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.

Can't drag & drop on small laptop, tablet & menu always visible

How fix menu always visible on small screen & can't drag drop

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?

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

Steps:

Create a new project with quasar 1.0.0
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

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?

baggachipz / q-form-builder Goto Github PK

q-form-builder's People

Contributors

Stargazers

Watchers

Forkers

q-form-builder's Issues

Recommend Projects

Recommend Topics

Recommend Org