baggachipz / q-form-builder Goto Github PK
View Code? Open in Web Editor NEWForm Building using drag-and-drop. Uses Quasar Framework and Vue.
License: MIT License
Form Building using drag-and-drop. Uses Quasar Framework and Vue.
License: 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 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.
The left panel of form controls hides itself when you are on mobile view.
How would i stop this from happening?
Hi there, they are a update for Quasar v2?
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!
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 ?
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.
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
It's an awesome component, however I can't use it inside a vue-cli created project.
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
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.
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?
Steps:
<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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.