qmap-forms 1.0.2 → 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

@@ -11,24 +11,22 @@ It uses the qMap configuration specification defined [here](https://vasat.io/qma
 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">
+  <!-- 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/quasar@2.34.0/dist/quasar.prod.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>
+  <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
+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/quasar@2.34.0/dist/quasar.umd.prod.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/qmap-forms@latest/qmap.umd.js"></script>
 
 ```
@@ -40,7 +38,13 @@ The UMD module exports a window variable `QMap`
 
 Install packages
 ```sh
-npm install --save rxjs quasar qmap-forms
+npm install --save rxjs qmap-forms
+```
+
+Import the packaged stylesheet once in your app entry point:
+
+```ts
+import 'qmap-forms/qmap-forms.css'
 ```
 
 
@@ -126,4 +130,3 @@ const model = ref({})
 </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;