ablok-components 0.3.57 → 0.3.59

package/dist/components/molecules/base-map/base-map.vue.js

@@ -0,0 +1,386 @@
+import { defineComponent as q, shallowRef as G, ref as C, onMounted as H, markRaw as m, watch as S, computed as f, nextTick as J, openBlock as u, createElementBlock as k, renderSlot as K, toDisplayString as w, createCommentVNode as y, createElementVNode as Q, normalizeStyle as X, normalizeClass as ee, createBlock as d, resolveDynamicComponent as p, withCtx as h, Fragment as te, renderList as ae, createTextVNode as U } from "vue";
+/* empty css                                                                              */
+const le = { class: "base-map" }, ne = {
+  key: 0,
+  class: "base-map__label"
+}, re = {
+  key: 0,
+  class: "base-map__hint"
+}, se = /* @__PURE__ */ q({
+  __name: "base-map",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: Object,
+      default: null
+    },
+    center: {
+      type: Object,
+      default: () => ({ lat: 48.8566, lng: 2.3522 })
+    },
+    zoom: {
+      type: Number,
+      default: 13
+    },
+    markers: {
+      type: Array,
+      default: () => []
+    },
+    routeCoordinates: {
+      type: Array,
+      default: () => []
+    },
+    routeColor: {
+      type: String,
+      default: "#2563eb"
+    },
+    routeWeight: {
+      type: Number,
+      default: 5
+    },
+    selectionRadius: {
+      type: Number,
+      default: 0
+    },
+    selectionRadiusCenter: {
+      type: Object,
+      default: null
+    },
+    selectionRadiusColor: {
+      type: String,
+      default: "#2563eb"
+    },
+    selectionRadiusFillColor: {
+      type: String,
+      default: "#60a5fa"
+    },
+    selectionRadiusFillOpacity: {
+      type: Number,
+      default: 0.14
+    },
+    selectionRadiusOpacity: {
+      type: Number,
+      default: 0.65
+    },
+    selectionRadiusStrokeWeight: {
+      type: Number,
+      default: 2
+    },
+    userLocation: {
+      type: Object,
+      default: null
+    },
+    userLocationLabel: {
+      type: String,
+      default: "Your location"
+    },
+    selectedLocationLabel: {
+      type: String,
+      default: "Selected location"
+    },
+    height: {
+      type: String,
+      default: "20rem"
+    },
+    interactive: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    showSelectedMarker: {
+      type: Boolean,
+      default: !0
+    },
+    helperText: {
+      type: String,
+      default: ""
+    },
+    mapStyle: {
+      type: String,
+      default: "streets"
+    },
+    tileLayerUrl: {
+      type: String,
+      default: ""
+    },
+    tileLayerAttribution: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "update:center", "update:zoom", "map-click", "marker-click"],
+  setup(n, { emit: $ }) {
+    function v(e, t) {
+      return t({
+        className: "base-map__marker-wrapper",
+        html: `<span class="base-map__marker-pin base-map__marker-pin--${e}"><span class="base-map__marker-core"></span></span>`,
+        iconSize: [24, 24],
+        iconAnchor: [12, 24],
+        popupAnchor: [0, -20]
+      });
+    }
+    const N = {
+      lat: 48.8566,
+      lng: 2.3522
+    }, x = {
+      streets: {
+        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      },
+      light: {
+        url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+      },
+      dark: {
+        url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+      },
+      minimal: {
+        url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+      },
+      popover: {
+        url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+      }
+    }, a = n, c = $, s = G(null), L = C(null), M = C(null), z = C(a.zoom), r = C(o(a.modelValue));
+    H(async () => {
+      if (typeof window > "u")
+        return;
+      const [e, t] = await Promise.all([
+        import("@vue-leaflet/vue-leaflet"),
+        import("leaflet")
+      ]), l = e.default ?? e, i = t.default ?? t;
+      s.value = m({
+        LCircle: m(l.LCircle),
+        LMap: m(l.LMap),
+        LMarker: m(l.LMarker),
+        LPopup: m(l.LPopup),
+        LPolyline: m(l.LPolyline),
+        LTileLayer: m(l.LTileLayer)
+      }), L.value = {
+        list: v("list", i.divIcon),
+        selected: v("selected", i.divIcon),
+        search: v("search", i.divIcon),
+        user: v("user", i.divIcon)
+      };
+    }), S(() => a.zoom, (e) => {
+      z.value = e;
+    }), S(() => a.modelValue, (e) => {
+      r.value = o(e);
+    }), S(() => a.center, (e) => {
+      const t = o(e);
+      t && g(t);
+    }, { deep: !0 }), S(
+      () => [
+        a.height,
+        a.markers.length,
+        a.routeCoordinates.length,
+        a.center?.lat,
+        a.center?.lng,
+        a.modelValue?.lat,
+        a.modelValue?.lng,
+        a.userLocation?.lat,
+        a.userLocation?.lng
+      ],
+      () => {
+        V();
+      },
+      { flush: "post" }
+    );
+    const b = f(() => o(a.userLocation)), R = f(() => o(a.selectionRadiusCenter) || r.value), B = f(() => {
+      const e = (a.markers || []).map((t) => {
+        const l = o(t);
+        return l ? {
+          ...t,
+          ...l,
+          type: t.type || (r.value && P(t, r.value) ? "selected" : "list")
+        } : null;
+      }).filter((t) => !!t);
+      return a.showSelectedMarker && r.value && !e.some((t) => P(t, r.value)) && e.push({
+        id: "selected-location",
+        label: a.selectedLocationLabel,
+        type: "search",
+        ...r.value
+      }), e;
+    }), T = f(() => (a.routeCoordinates || []).map((e) => W(e)).filter((e) => !!e)), E = f(() => {
+      const e = o(a.center) || r.value || o(a.markers[0]) || N;
+      return [e.lat, e.lng];
+    }), I = f(() => {
+      if (a.tileLayerUrl.trim())
+        return a.tileLayerUrl;
+      const e = a.mapStyle === "custom" ? "streets" : a.mapStyle;
+      return x[e].url;
+    }), j = f(() => {
+      if (a.tileLayerAttribution.trim())
+        return a.tileLayerAttribution;
+      const e = a.mapStyle === "custom" ? "streets" : a.mapStyle;
+      return x[e].attribution;
+    });
+    function O(e = "list") {
+      if (L.value)
+        return L.value[e] || L.value.list;
+    }
+    function A(e = "list") {
+      switch (e) {
+        case "user":
+          return 450;
+        case "selected":
+          return 350;
+        case "search":
+          return 250;
+        default:
+          return 150;
+      }
+    }
+    function o(e) {
+      if (!e)
+        return null;
+      const t = Number(e.lat), l = Number(e.lng);
+      return Number.isNaN(t) || Number.isNaN(l) ? null : { lat: t, lng: l };
+    }
+    function W(e) {
+      if (Array.isArray(e)) {
+        const l = Number(e[0]), i = Number(e[1]);
+        return Number.isFinite(l) && Number.isFinite(i) ? [l, i] : null;
+      }
+      const t = o(e);
+      return t ? [t.lat, t.lng] : null;
+    }
+    function P(e, t) {
+      const l = o(e), i = o(t);
+      return !l || !i ? !1 : Math.abs(l.lat - i.lat) < 1e-6 && Math.abs(l.lng - i.lng) < 1e-6;
+    }
+    async function V() {
+      await J(), M.value?.invalidateSize();
+    }
+    function g(e) {
+      M.value?.panTo([e.lat, e.lng]);
+    }
+    function D(e) {
+      M.value = e, g(o(a.center) || r.value || N), V();
+    }
+    function Z(e) {
+      z.value = e, c("update:zoom", e);
+    }
+    function Y(e) {
+      const t = o(e);
+      t && (g(t), c("update:center", t));
+    }
+    function _(e) {
+      if (!a.interactive || a.disabled)
+        return;
+      const t = {
+        lat: Number(e.latlng.lat.toFixed(6)),
+        lng: Number(e.latlng.lng.toFixed(6))
+      };
+      r.value = t, g(t), c("update:modelValue", t), c("update:center", t), c("map-click", t);
+    }
+    function F(e) {
+      r.value = {
+        lat: Number(e.lat),
+        lng: Number(e.lng)
+      }, g(r.value), c("update:modelValue", r.value), c("update:center", r.value), c("marker-click", e);
+    }
+    return (e, t) => (u(), k("div", le, [
+      K(e.$slots, "label", {}, () => [
+        n.label ? (u(), k("label", ne, w(n.label), 1)) : y("", !0)
+      ]),
+      Q("div", {
+        class: ee(["base-map__frame", {
+          "base-map__frame--interactive": n.interactive && !n.disabled,
+          "base-map__frame--disabled": n.disabled
+        }]),
+        style: X({ height: n.height }),
+        "data-testid": "base-map"
+      }, [
+        s.value ? (u(), d(p(s.value?.LMap), {
+          key: 0,
+          class: "base-map__canvas",
+          "use-global-leaflet": !1,
+          zoom: z.value,
+          center: E.value,
+          onReady: D,
+          onClick: _,
+          "onUpdate:zoom": Z,
+          "onUpdate:center": Y
+        }, {
+          default: h(() => [
+            (u(), d(p(s.value.LTileLayer), {
+              url: I.value,
+              attribution: j.value,
+              "layer-type": "base",
+              name: "OpenStreetMap"
+            }, null, 8, ["url", "attribution"])),
+            T.value.length > 1 ? (u(), d(p(s.value.LPolyline), {
+              key: 0,
+              "lat-lngs": T.value,
+              color: n.routeColor,
+              weight: n.routeWeight
+            }, null, 8, ["lat-lngs", "color", "weight"])) : y("", !0),
+            R.value && n.selectionRadius > 0 ? (u(), d(p(s.value.LCircle), {
+              key: 1,
+              "lat-lng": [R.value.lat, R.value.lng],
+              radius: n.selectionRadius,
+              color: n.selectionRadiusColor,
+              "fill-color": n.selectionRadiusFillColor,
+              "fill-opacity": n.selectionRadiusFillOpacity,
+              opacity: n.selectionRadiusOpacity,
+              weight: n.selectionRadiusStrokeWeight
+            }, null, 8, ["lat-lng", "radius", "color", "fill-color", "fill-opacity", "opacity", "weight"])) : y("", !0),
+            (u(!0), k(te, null, ae(B.value, (l, i) => (u(), d(p(s.value.LMarker), {
+              key: l.id ?? `${l.lat}-${l.lng}-${i}`,
+              "lat-lng": [l.lat, l.lng],
+              icon: O(l.type),
+              "z-index-offset": A(l.type),
+              onClick: (oe) => F(l)
+            }, {
+              default: h(() => [
+                l.label ? (u(), d(p(s.value.LPopup), { key: 0 }, {
+                  default: h(() => [
+                    U(w(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : y("", !0)
+              ]),
+              _: 2
+            }, 1032, ["lat-lng", "icon", "z-index-offset", "onClick"]))), 128)),
+            b.value ? (u(), d(p(s.value.LMarker), {
+              key: `user-${b.value.lat}-${b.value.lng}`,
+              "lat-lng": [b.value.lat, b.value.lng],
+              icon: O("user"),
+              "z-index-offset": A("user"),
+              onClick: t[0] || (t[0] = (l) => F({
+                id: "user-location",
+                label: n.userLocationLabel,
+                type: "user",
+                ...b.value
+              }))
+            }, {
+              default: h(() => [
+                (u(), d(p(s.value.LPopup), null, {
+                  default: h(() => [
+                    U(w(n.userLocationLabel), 1)
+                  ]),
+                  _: 1
+                }))
+              ]),
+              _: 1
+            }, 8, ["lat-lng", "icon", "z-index-offset"])) : y("", !0)
+          ]),
+          _: 1
+        }, 40, ["zoom", "center"])) : y("", !0)
+      ], 6),
+      n.interactive && n.helperText ? (u(), k("p", re, w(n.helperText), 1)) : y("", !0)
+    ]));
+  }
+});
+export {
+  se as default
+};

package/dist/components/molecules/base-map/base-map.vue3.js

@@ -0,0 +1,5 @@
+import o from "./base-map.vue.js";
+/* empty css              */
+export {
+  o as default
+};

package/dist/components/molecules/color-palette/color-palette.vue.js

@@ -0,0 +1,72 @@
+import { defineComponent as u, computed as m, openBlock as s, createElementBlock as c, createVNode as f, withCtx as p, createElementVNode as b, normalizeStyle as y } from "vue";
+import { uniqueId as d } from "../../../utilities/helpers.js";
+import V from "../../atoms/radio-group/radio-group.vue.js";
+/* empty css                                       */
+const g = { class: "color-palette" }, x = ["for"], B = /* @__PURE__ */ u({
+  __name: "color-palette",
+  props: {
+    modelValue: {
+      type: [String],
+      default: ""
+    },
+    colors: {
+      type: Array,
+      default: ["#000000", "#FFFFFF"]
+    },
+    name: {
+      type: String,
+      default: () => d()
+    },
+    id: {
+      type: String,
+      default: () => d()
+    },
+    label: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: i }) {
+    const n = e, r = i, t = m({
+      get() {
+        return n.modelValue;
+      },
+      set(o) {
+        r("update:modelValue", o);
+      }
+    });
+    return (o, a) => (s(), c("div", g, [
+      f(V, {
+        modelValue: t.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (l) => t.value = l),
+        options: e.colors,
+        name: e.name,
+        id: e.id,
+        label: e.label,
+        disabled: e.disabled,
+        required: e.required,
+        class: "d-flex flex-wrap flex-row gap-2"
+      }, {
+        "option-label": p((l) => [
+          b("label", {
+            for: `${e.id}-${l.index}`,
+            class: "d-block rounded-circle",
+            style: y({ backgroundColor: l.option })
+          }, null, 12, x)
+        ]),
+        _: 1
+      }, 8, ["modelValue", "options", "name", "id", "label", "disabled", "required"])
+    ]));
+  }
+});
+export {
+  B as default
+};

package/dist/components/molecules/color-palette/color-palette.vue3.js

@@ -0,0 +1,5 @@
+import o from "./color-palette.vue.js";
+/* empty css                   */
+export {
+  o as default
+};

package/dist/components/molecules/dom-renderer/dom-renderer.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent as v, ref as l, onMounted as y, onBeforeUnmount as b, openBlock as h, createElementBlock as C, normalizeStyle as B, normalizeClass as w, renderSlot as x } from "vue";
+import { debounce as P } from "lodash";
+import R from "html2canvas";
+const M = /* @__PURE__ */ v({
+  __name: "dom-renderer",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    fixedWidth: {
+      type: Number,
+      default: 0
+    },
+    renderUpdates: {
+      type: Boolean,
+      default: !1
+    },
+    exportToSvg: {
+      type: Boolean,
+      default: !1
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    pending: {
+      type: Boolean,
+      default: !1
+    },
+    emitPending: {
+      type: Boolean,
+      default: !1
+    },
+    debug: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "update:pending"],
+  setup(o, { emit: c }) {
+    const e = o, n = c, r = l(), m = l(""), i = l(), d = l(!0);
+    async function p() {
+      if (!r.value || !d.value)
+        return "";
+      const t = r.value;
+      if (!t.isConnected)
+        return "";
+      try {
+        e.emitPending && n("update:pending", !0);
+        const a = t.firstElementChild;
+        if (!a)
+          return "";
+        const g = await R(a, {
+          backgroundColor: "rgba(0, 0, 0, 0)",
+          scale: 1,
+          ...e.options
+        });
+        if (!d.value || !r.value || !t.isConnected)
+          return "";
+        const s = g.toDataURL();
+        if (n("update:modelValue", s), e.emitPending && n("update:pending", !1), e.debug) {
+          const f = new Image();
+          f.src = s, document.body.appendChild(f);
+        }
+        return s;
+      } catch (a) {
+        return d.value && e.emitPending && n("update:pending", !1), console.warn("dom-renderer: Render failed", a), "";
+      }
+    }
+    const u = P(async () => {
+      m.value = await p();
+    }, 300, { trailing: !0, leading: !1 });
+    return y(() => {
+      const t = r.value;
+      e.renderUpdates && (i.value = new MutationObserver(async (a) => {
+        !d.value || !t.isConnected || (e.emitPending && n("update:pending", !0), u());
+      }), i.value.observe(t, {
+        attributes: !0,
+        childList: !0,
+        characterData: !0,
+        subtree: !0
+      })), setTimeout(() => {
+        e.emitPending && n("update:pending", !0), u();
+      }, 500);
+    }), b(() => {
+      d.value = !1, i.value && i.value.disconnect(), u.cancel();
+    }), (t, a) => (h(), C("div", {
+      class: w(["dom-renderer", {
+        "off-screen": !o.debug
+      }]),
+      ref_key: "renderer",
+      ref: r,
+      style: B(o.fixedWidth > 0 ? { width: `${o.fixedWidth}px` } : {})
+    }, [
+      x(t.$slots, "default")
+    ], 6));
+  }
+});
+export {
+  M as default
+};

package/dist/components/molecules/dom-renderer/dom-renderer.vue2.js

@@ -0,0 +1,4 @@
+import f from "./dom-renderer.vue.js";
+export {
+  f as default
+};