qmap-forms 1.0.1 → 1.0.3

package/FieldControl-D0e9k9sx.mjs

@@ -0,0 +1,112 @@
+import { Fragment as e, Teleport as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, withCtx as _, withKeys as v } from "vue";
+//#endregion
+//#region src/components/simple/BtnTooltip.vue
+var y = /* @__PURE__ */ c({
+	__name: "BtnTooltip",
+	props: { label: {} },
+	setup(o) {
+		let s = m(!1), c = m({
+			top: "50px",
+			left: "50px",
+			position: "absolute",
+			zIndex: "999"
+		});
+		m(null);
+		let u = m(null), _ = m(null), y = `info-btn-tooltip-${Math.random().toString(36).slice(2)}`;
+		function b() {
+			s.value || (s.value = !0, l(() => {
+				C();
+			}), document.addEventListener("mousedown", S));
+		}
+		function x() {
+			s.value = !1, document.removeEventListener("mousedown", S);
+		}
+		function S(e) {
+			_.value && u.value && !_.value.contains(e.target) && !u.value.contains(e.target) && x();
+		}
+		function C() {
+			if (u.value && _.value) {
+				let e = u.value.getBoundingClientRect(), t = _.value.getBoundingClientRect(), n = e.bottom + window.scrollY + 8, r = Math.max(e.left + window.scrollX + e.width / 2 - t.width / 2, 0);
+				c.value = {
+					top: `${n}px`,
+					left: `${r}px`,
+					position: "absolute",
+					zIndex: "999"
+				};
+			}
+		}
+		return f(() => {
+			document.removeEventListener("mousedown", S);
+		}), (l, f) => (p(), i(e, null, [a("button", {
+			ref_key: "button",
+			ref: u,
+			onClick: b,
+			onBlur: x,
+			onMouseover: b,
+			class: "qmap-button",
+			onMouseleave: x,
+			onKeydown: v(x, ["esc"]),
+			style: {
+				border: "none",
+				background: "none"
+			},
+			"aria-describedby": y
+		}, [h(l.$slots, "default")], 544), (p(), n(t, { to: "body" }, [s.value ? (p(), i("div", {
+			key: 0,
+			id: y,
+			class: "tooltip",
+			style: d(c.value),
+			ref_key: "tooltip",
+			ref: _,
+			tabindex: "-1"
+		}, g(o.label), 5)) : r("", !0)]))], 64));
+	}
+}), b = /* @__PURE__ */ c({
+	__name: "subtitle-button",
+	props: { qMap: {} },
+	setup(e) {
+		return (t, i) => e.qMap.subtitle ? (p(), n(y, {
+			key: 0,
+			label: e.qMap.subtitle
+		}, {
+			default: _(() => [...i[0] ||= [a("i", { class: "fa fa-question-circle" }, null, -1)]]),
+			_: 1
+		}, 8, ["label"])) : r("", !0);
+	}
+}), x = { class: "block" }, S = /* @__PURE__ */ c({
+	__name: "title-block",
+	props: { qMap: {} },
+	setup(e) {
+		return (t, n) => (p(), i("span", x, [
+			o(g(e.qMap.title || (e.qMap.id !== "#" && e.qMap.type !== "col" && e.qMap.type !== "group" ? e.qMap.id : "")) + " ", 1),
+			h(t.$slots, "default"),
+			s(b, { "q-map": e.qMap }, null, 8, ["q-map"])
+		]));
+	}
+}), C = {
+	key: 0,
+	class: "inline-flex shrink-0 items-center gap-1 qmap-control-prepend"
+}, w = {
+	key: 1,
+	class: "inline-flex shrink-0 items-center gap-1 qmap-control-append"
+}, T = /* @__PURE__ */ c({
+	__name: "FieldControl",
+	props: {
+		invalid: { type: Boolean },
+		disabled: { type: Boolean },
+		multiline: { type: Boolean }
+	},
+	setup(e) {
+		return (t, n) => (p(), i("div", { class: u(["flex items-center gap-2 min-w-0 min-h-10 px-3 qmap-control", {
+			"items-start": e.multiline,
+			"qmap-control-invalid": e.invalid,
+			"qmap-control-disabled": e.disabled
+		}]) }, [
+			t.$slots.prepend ? (p(), i("div", C, [h(t.$slots, "prepend")])) : r("", !0),
+			h(t.$slots, "default"),
+			t.$slots.append ? (p(), i("div", w, [h(t.$slots, "append")])) : r("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { S as n, b as r, T as t };

package/README.md

@@ -0,0 +1,132 @@
+# 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
+  <!-- stylesheets --> 
+  <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/qmap-forms@latest/qmap-forms.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 dependencies for `vue` 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/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 qmap-forms
+```
+
+Import the packaged stylesheet once in your app entry point:
+
+```ts
+import 'qmap-forms/qmap-forms.css'
+```
+
+
+# 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-G898Fulb.mjs

@@ -0,0 +1,8 @@
+import "./FieldControl-D0e9k9sx.mjs";
+import "vue";
+import "leaflet-editable";
+import "leaflet";
+throw Error("Could not resolve \"leaflet-path-drag\" imported by \"qmap-forms\". Is it installed?");
+//#endregion
+export { e as default };
+var e;