qmap-forms 1.0.1 → 1.0.2

package/README.md

@@ -0,0 +1,129 @@
+# qmap-forms
+
+QMap Forms is a dynamic form generator that will build a form capabile of manipulating a local json object.
+
+It uses the qMap configuration specification defined [here](https://vasat.io/qmap)
+
+# Installation 
+
+## Using as UMD
+
+Declare dependencies in html head
+
+```html
+
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
+  <link href="https://use.fontawesome.com/releases/v7.0.0/css/all.css" rel="stylesheet" type="text/css">
+  <link href="https://cdn.jsdelivr.net/npm/quasar@2.34.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.2/rxjs.umd.js"></script>
+
+  <!-- Leaflet optional if your using a geo_map type compoennt -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
+   
+```
+
+Then at the end of your body tag declare dependecies for `vue`, `quasar` and the `qmap` library
+
+```html
+
+  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quasar@2.34.0/dist/quasar.umd.prod.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/qmap-forms@latest/qmap.umd.js"></script>
+
+```
+
+The UMD module exports a window variable `QMap`
+
+
+## Using as ES module 
+
+Install packages
+```sh
+npm install --save rxjs quasar qmap-forms
+```
+
+
+# Using qMAP
+
+The first thing needed is the form fields defined
+```js
+// the qMAP of the form you want
+const qmap = [ 
+      {
+        id: 'name',
+        type: 'string',
+        required: true
+      },
+      {
+        id: 'email',
+        type: 'string',
+        required: false,
+      },
+      {
+        id: 'accept',
+        type: 'boolean',
+        required: true,
+      },
+    ]
+```
+
+Followed by the plain js object you wish to use as the model
+```js
+// the model object, can be pre-populated
+const model = {name:'Joe'}
+```
+
+You then connect using the `mount` method
+
+```js
+// initialise and mound the form at designated dom selector
+const form = QMap.mount('#formNode',qmap,model)
+```
+
+You can listen to state changes by subscribing
+```js
+form.state.subscribe(a => {
+  console.log('Form altered', a) // this will be the 'model' object with changes
+})
+
+```
+
+## Using Vue Form Component
+
+When using vue you can use the vue component directly
+
+```ts
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import {Form} from 'qmap-forms';
+
+const qmap = ref([
+      {
+        id: 'name',
+        type: 'string',
+        required: true,
+       },
+      {
+        id: 'logoURL',
+        type: 'string',
+        required: false,
+      },
+      {
+        id: 'email',
+        type: 'string',
+        required: true,
+      },
+    ]);
+
+const model = ref({})
+
+</script>
+<template>
+ 
+  <Form :questions=qmap v-model="model" />
+
+</template>
+
+```
+

package/SimpleGeomEditor-D6f9x0ch.mjs

@@ -0,0 +1,40 @@
+import { M as e, St as t } from "./QPopupProxy-DMCFxQQk.mjs";
+import "vue";
+import "leaflet-editable";
+import "leaflet";
+//#region node_modules/quasar/src/components/circular-progress/circular-progress.js
+var n = {
+	...t,
+	min: {
+		type: Number,
+		default: 0
+	},
+	max: {
+		type: Number,
+		default: 100
+	},
+	color: String,
+	centerColor: String,
+	trackColor: String,
+	fontSize: String,
+	rounded: Boolean,
+	thickness: {
+		type: Number,
+		default: .2,
+		validator: (e) => e >= 0 && e <= 1
+	},
+	angle: {
+		type: Number,
+		default: 0
+	},
+	showValue: Boolean,
+	reverse: Boolean,
+	instantFeedback: Boolean
+}, r = 100 * Math.PI;
+throw Math.round(r * 1e3) / 1e3, { ...n }, Object.keys(n), {
+	...e,
+	...n
+}, Error("Could not resolve \"leaflet-path-drag\" imported by \"qmap-forms\". Is it installed?");
+//#endregion
+export { i as default };
+var i;

package/index.es.js

@@ -12587,7 +12587,7 @@ var lh = rt((e) => {
 	},
 	emits: ["qmap_change", "qmap_subquestions"],
 	setup(e, { emit: t }) {
-		let n = nt(() => import("./SimpleGeomEditor-BZlH3Pfj.mjs")), r = e, i = t, a = K(), o = z(() => r.qMap.style == "full-screen");
+		let n = nt(() => import("./SimpleGeomEditor-D6f9x0ch.mjs")), r = e, i = t, a = K(), o = z(() => r.qMap.style == "full-screen");
 		J(() => r.model, (e) => a.value = r.model[r.qMap.id]), ht(() => {
 			a.value = r.model[r.qMap.id] ? JSON.parse(r.model[r.qMap.id]) : void 0, s(a.value);
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qmap-forms",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": {
     "name": "CorrelLink",
     "email": "dev@correllink.com"