@piveau/dpi 0.2.0-alpha.46 → 0.2.0-alpha.48

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue.js

@@ -1,27 +1,30 @@
-import { ref as p, computed as K, watch as B, createElementBlock as s, openBlock as r, createBlock as D, createCommentVNode as h, mergeProps as G, withKeys as f, unref as C, withModifiers as V, normalizeStyle as F, normalizeClass as I, createElementVNode as _, Fragment as x, renderList as A, toDisplayString as S, nextTick as H } from "vue";
-import { onClickOutside as N } from "@vueuse/core";
-import { useI18n as J } from "vue-i18n";
-import Q from "./InputField.vue.js";
-import X from "./MoreButton.vue.js";
-import Y from "./TextButtonSmall.vue.js";
+import { ref as v, computed as T, watch as N, createElementBlock as d, openBlock as u, createBlock as S, createCommentVNode as w, mergeProps as J, withKeys as y, unref as F, withModifiers as A, createElementVNode as _, toDisplayString as D, normalizeStyle as P, normalizeClass as q, Fragment as E, renderList as K, nextTick as Q } from "vue";
+import { onClickOutside as X } from "@vueuse/core";
+import { useI18n as Y } from "vue-i18n";
+import Z from "./InputField.vue.js";
+import ee from "./MoreButton.vue.js";
+import te from "./TextButtonSmall.vue.js";
 /* empty css              */
-import Z from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const ee = { class: "dpiV3_dropdownV3" }, te = {
+import le from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const ae = { class: "dpiV3_dropdownV3" }, ne = {
+  key: 3,
+  class: "helperText"
+}, oe = {
   key: 0,
   class: "dpiV3_loading"
-}, le = {
+}, ue = {
   key: 1,
   class: "dpiV3_empty-state"
-}, ae = {
+}, re = {
   key: 2,
   class: "dpiV3_dropdown dpiV3_dropdownMulti"
-}, ne = { class: "dpiV3_multiInnerWrap" }, oe = { class: "dpiV3_multiHeader" }, ue = { class: "dpiV3_btnWrap" }, re = ["onClick", "onKeydown", "onKeyup"], de = {
+}, de = { class: "dpiV3_multiInnerWrap" }, se = { class: "dpiV3_multiHeader" }, ie = { class: "dpiV3_btnWrap" }, ce = ["onClick", "onKeydown", "onKeyup"], pe = {
   key: 0,
   class: "dpiV3_multiSeperator"
-}, se = {
+}, fe = {
   key: 3,
   class: "dpiV3_dropdown"
-}, ie = ["disabled", "onClick", "onKeydown", "onKeyup"], ce = {
+}, ve = ["disabled", "onClick", "onKeydown", "onKeyup"], ye = {
   __name: "Dropdown",
   props: {
     buttonText: {
@@ -56,7 +59,7 @@ const ee = { class: "dpiV3_dropdownV3" }, te = {
     dropdownWidth: {
       type: String,
       default: "medium",
-      validator: (g) => ["medium", "large"].includes(g)
+      validator: (p) => ["medium", "large"].includes(p)
     },
     isDisabled: {
       type: Boolean,
@@ -67,8 +70,13 @@ const ee = { class: "dpiV3_dropdownV3" }, te = {
       default: !1
     },
     modelValue: { type: String, default: "" },
-    loading: { type: Boolean, default: !1 }
-    // Loading prop from parent
+    loading: { type: Boolean, default: !1 },
+    // Loading prop from parent,
+    labelProperty: {
+      type: String,
+      default: "@value"
+    },
+    helperText: { type: String, default: "" }
   },
   emits: [
     "update:modelValue",
@@ -78,193 +86,198 @@ const ee = { class: "dpiV3_dropdownV3" }, te = {
     "chosenVocItem",
     "clickOutside"
   ],
-  setup(g, { emit: q }) {
-    const a = g, v = q, { t: M } = J(), w = p();
-    p("#0172AD");
-    let u = p(!1);
-    const y = p({});
-    p([]);
-    const o = p(0), b = p(!1);
-    function T(e) {
+  setup(p, { emit: I }) {
+    const a = p, h = I, { t: M } = Y(), b = v();
+    v("#0172AD");
+    let r = v(!1);
+    const k = v({});
+    v([]);
+    const o = v(0), V = v(!1);
+    function U(t) {
       return M(
-        `message.dataupload.datasets.dcatde:politicalGeocodingURI.titles.${e}`
+        `message.dataupload.datasets.dcatde:politicalGeocodingURI.titles.${t}`
       );
     }
-    const E = K(() => {
+    const C = T(() => {
       if (a.multi) {
         if (!a.data || !Array.isArray(a.data) || a.data.length === 0)
           return !0;
-        for (const e of a.data)
-          if (e.list && e.list.length > 0)
+        for (const t of a.data)
+          if (t.list && t.list.length > 0)
             return !1;
         return !0;
       } else
         return !a.data || !Array.isArray(a.data) || a.data.length === 0;
     });
-    B(
+    N(
       () => a.loading,
-      (e) => {
-        b.value = e;
-      }
-    );
-    const d = p(a.modelValue);
-    B(
-      () => a.modelValue,
-      (e) => {
-        d.value = e;
+      (t) => {
+        V.value = t;
       }
     );
-    function U() {
-      k(), v("deleteDropdownField");
+    const s = v(a.modelValue);
+    function W() {
+      g(), h("deleteDropdownField");
     }
-    function W(e) {
-      d.value = e.target.value, H(() => {
-        v("input", d.value);
-      }), a.autocomplete && d.value.length > 0 ? u.value = !0 : d.value.length === 0 && (u.value = !1);
+    function O(t) {
+      s.value = t.target.value, Q(() => {
+        h("input", s.value);
+      }), a.autocomplete && s.value.length > 0 ? r.value = !0 : s.value.length === 0 && (r.value = !1);
     }
-    const O = K(() => {
+    const $ = T(() => {
       if (!a.autocomplete)
         return a.dropdownWidth === "large" ? "100%" : "161px";
     });
-    function k(e) {
-      a.autocomplete || a.isDisabled || (u.value = !u.value);
+    function g(t) {
+      a.autocomplete || a.isDisabled || (r.value = !r.value);
     }
-    function $(e) {
-      if (u.value && !b.value && !E.value) {
+    function L(t) {
+      if (r.value && !V.value && !C.value) {
         o.value--;
-        const t = Array.from(
+        const e = Array.from(
           document.querySelectorAll(".dpiV3_dropdown button")
         );
-        t.length > 0 && (e.preventDefault(), o.value = (o.value + 1) % t.length, t[o.value].focus());
+        e.length > 0 && (t.preventDefault(), o.value = (o.value + 1) % e.length, e[o.value].focus());
       }
     }
-    function m(e, t) {
-      t.preventDefault(), (t.key === "Enter" || t.key === " " || t.key === "Spacebar") && (o.value = 0, y.value[e] || (y.value[e] = {}), y.value[e] = "var(--neutral-10, #fafafb)"), t.key === "Escape" && (o.value = 0, u.value = !u.value);
+    function m(t, e) {
+      e.preventDefault(), (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (o.value = 0, k.value[t] || (k.value[t] = {}), k.value[t] = "var(--neutral-10, #fafafb)"), e.key === "Escape" && (o.value = 0, r.value = !r.value);
       const l = Array.from(
         document.querySelectorAll(".dpiV3_dropdownMulti .dpiV3_btnWrap button")
       ), c = l.findIndex((n) => n === document.activeElement);
-      if (t.key === "ArrowDown") {
-        t.preventDefault();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
         const n = (c + 1) % l.length;
         l[n].focus(), o.value = n;
-      } else if (t.key === "ArrowUp") {
-        t.preventDefault();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
         const n = (c - 1 + l.length) % l.length;
         l[n].focus(), o.value = n;
       }
     }
-    function L(e, t) {
-      t.preventDefault(), (t.key === "Enter" || t.key === " " || t.key === "Spacebar") && (a.data.forEach((l) => {
+    function j(t, e) {
+      e.preventDefault(), (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (a.data.forEach((l) => {
         for (let c in l)
           l[c].forEach((n) => {
             n.selected = !1;
           });
-      }), e.selected = !e.selected, d.value = e["@value"], u.value = !1);
+      }), t.selected = !t.selected, s.value = t["@value"], r.value = !1);
     }
-    function P(e, t) {
-      t.preventDefault(), (t.key === "Enter" || t.key === " " || t.key === "Spacebar") && (y.value[e["@value"]] = "var(--neutral-10, #f1f1f3)", o.value = 0), t.key === "Escape" && (o.value = 0, u.value = !u.value);
+    function R(t, e) {
+      e.preventDefault(), (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (k.value[t["@value"]] = "var(--neutral-10, #f1f1f3)", o.value = 0), e.key === "Escape" && (o.value = 0, r.value = !r.value);
       const l = Array.from(document.querySelectorAll(".dpiV3_dropdown button"));
-      t.key === "ArrowDown" ? (t.preventDefault(), o.value = (o.value + 1) % l.length, l[o.value].focus()) : t.key === "ArrowUp" || t.key === "Tab" && t.shiftKey ? (t.preventDefault(), o.value = (o.value - 1 + l.length) % l.length, l[o.value].focus()) : t.key === "Tab" && (t.preventDefault(), o.value = (o.value + 1) % l.length, l[o.value].focus());
+      e.key === "ArrowDown" ? (e.preventDefault(), o.value = (o.value + 1) % l.length, l[o.value].focus()) : e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey ? (e.preventDefault(), o.value = (o.value - 1 + l.length) % l.length, l[o.value].focus()) : e.key === "Tab" && (e.preventDefault(), o.value = (o.value + 1) % l.length, l[o.value].focus());
     }
-    function j(e, t) {
-      t.preventDefault(), (t.key === "Enter" || t.key === " " || t.key === "Spacebar") && (a.data.forEach((l) => {
+    function z(t, e) {
+      e.preventDefault(), (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (a.data.forEach((l) => {
         l.selected = !1;
-      }), e.selected = !e.selected, y.value[e["@value"]] = "var(--neutral-5, #fafafb)", d.value = e["@value"], u.value = !1);
+      }), t.selected = !t.selected, k.value[t["@value"]] = "var(--neutral-5, #fafafb)", s.value = t["@value"], r.value = !1);
     }
-    function R(e, t, l) {
-      v("valueSent", e, l), d.value = `${e.alt_label.de} (${l})`, u.value = !1;
+    function G(t, e, l) {
+      h("valueSent", t, l), s.value = `${t.alt_label.de} (${l})`, r.value = !1;
     }
-    function z(e, t) {
-      console.log(a.notDraft), t.type === "keydown" && t.preventDefault(), t.type === "click" && (a.multi ? (a.data.forEach((l) => {
+    function H(t, e) {
+      console.log(a.notDraft), e.type === "keydown" && e.preventDefault(), e.type === "click" && (a.multi ? (a.data.forEach((l) => {
         for (let c in l)
           l[c].forEach((n) => {
             n.selected = !1;
           });
-      }), d.value = e["@value"], e.selected = !e.selected) : (a.data.forEach((l) => {
+      }), s.value = t["@value"], t.selected = !t.selected) : (a.data.forEach((l) => {
         l.selected = !1;
-      }), e.selected = !e.selected, d.value = e["@value"]), u.value = !1, e["@value"] === void 0 && (d.value = e.pref_label.de || e.pref_label.en, v("chosenVocItem", e)), e["@value"] === "Löschen" && a.notDraft && (d.value = "LöschenPublished", v("chosenVocItem", e)), v("update:modelValue", e["@value"], e));
+      }), t.selected = !t.selected, s.value = t[a.labelProperty]), r.value = !1, t["@value"] === void 0 && (s.value = t.pref_label.de || t.pref_label.en, h("chosenVocItem", t)), t["@value"] === "Löschen" && a.notDraft && (s.value = "LöschenPublished", h("chosenVocItem", t)), h("update:modelValue", t["@value"], t));
     }
-    return N(w, (e) => {
-      u.value = !1;
-    }), (e, t) => (r(), s("div", ee, [
-      a.type === "textButtonSmall" ? (r(), D(Y, {
+    return X(b, (t) => {
+      r.value = !1;
+    }), (t, e) => (u(), d("div", ae, [
+      a.type === "textButtonSmall" ? (u(), S(te, {
         key: 0,
         ref_key: "accActive",
-        ref: w,
+        ref: b,
         "button-text": a.buttonText,
-        onClick: k
-      }, null, 8, ["button-text"])) : h("", !0),
-      a.type === "moreButton" ? (r(), D(X, {
+        onClick: g
+      }, null, 8, ["button-text"])) : w("", !0),
+      a.type === "moreButton" ? (u(), S(ee, {
         key: 1,
         ref_key: "accActive",
-        ref: w,
-        onClick: k
-      }, null, 512)) : h("", !0),
-      a.type === "inputField" ? (r(), D(Q, G({ key: 2 }, a.inputFieldProps, {
+        ref: b,
+        onClick: g
+      }, null, 512)) : w("", !0),
+      a.type === "inputField" ? (u(), S(Z, J({ key: 2 }, a.inputFieldProps, {
         ref_key: "accActive",
-        ref: w,
-        "model-value": d.value,
-        "drop-down-expanded": C(u),
-        onClick: k,
+        ref: b,
+        "model-value": s.value,
+        "drop-down-expanded": F(r),
+        onClick: g,
         onKeydown: [
-          f(V(k, ["prevent"]), ["space"]),
-          f(k, ["enter"]),
-          f(V($, ["prevent"]), ["arrow-down"])
+          y(A(g, ["prevent"]), ["space"]),
+          y(g, ["enter"]),
+          y(A(L, ["prevent"]), ["arrow-down"])
         ],
-        onInput: W,
-        onDeleteButtonClicked: U
-      }), null, 16, ["model-value", "drop-down-expanded", "onKeydown"])) : h("", !0),
-      C(u) ? (r(), s("div", {
-        key: 3,
-        class: I(["dpiV3_dropdownWrapper", {
-          alignRight: a.alignment === "right"
+        onInput: O,
+        onDeleteButtonClicked: W
+      }), null, 16, ["model-value", "drop-down-expanded", "onKeydown"])) : w("", !0),
+      p.helperText.trim() ? (u(), d("div", ne, [
+        _("span", null, D(p.helperText), 1)
+      ])) : w("", !0),
+      F(r) ? (u(), d("div", {
+        key: 4,
+        class: q(["dpiV3_dropdownWrapper", {
+          alignRight: a.alignment === "right",
+          dpiV3_dropdownContainer: a.helperText.trim()
         }]),
-        style: F({ width: O.value })
+        style: P({ width: $.value })
       }, [
-        b.value ? (r(), s("div", te, t[0] || (t[0] = [
+        V.value ? (u(), d("div", oe, e[0] || (e[0] = [
           _("div", { class: "dpiV3_loading-spinner" }, null, -1),
           _("span", null, "Daten werden geladen...", -1)
-        ]))) : E.value ? (r(), s("div", le, t[1] || (t[1] = [
+        ]))) : C.value ? (u(), d("div", ue, e[1] || (e[1] = [
           _("span", null, "Keine Ergebnisse gefunden", -1)
-        ]))) : a.multi ? (r(), s("ul", ae, [
-          (r(!0), s(x, null, A(g.data, (l, c) => (r(), s("div", ne, [
-            _("div", oe, S(e.$t(
+        ]))) : a.multi ? (u(), d("ul", re, [
+          (u(!0), d(E, null, K(p.data, (l, c) => (u(), d("div", de, [
+            _("div", se, D(t.$t(
               `message.dataupload.datasets.dcatde:politicalGeocodingURI.titles.${l.headers}`
             )), 1),
-            (r(!0), s(x, null, A(l.list, (n, pe) => (r(), s("div", ue, [
-              _("button", {
-                onClick: (i) => R(
-                  n,
-                  i,
-                  T(l.headers)
-                ),
-                onKeydown: [
-                  f((i) => m(n, i), ["enter"]),
-                  f(V((i) => m(n, i), ["prevent"]), ["space"]),
-                  f((i) => m(n, i), ["arrow-down"]),
-                  f((i) => m(n, i), ["arrow-up"])
-                ],
-                onKeyup: (i) => L(n, i)
-              }, S(n.alt_label.de), 41, re)
-            ]))), 256)),
-            c - 1 != Object.values(l).length ? (r(), s("div", de)) : h("", !0)
+            (u(!0), d(E, null, K(l.list, (n, x) => {
+              var f, B;
+              return u(), d("div", ie, [
+                _("button", {
+                  onClick: (i) => G(
+                    n,
+                    i,
+                    U(l.headers)
+                  ),
+                  onKeydown: [
+                    y((i) => m(n, i), ["enter"]),
+                    y(A((i) => m(n, i), ["prevent"]), ["space"]),
+                    y((i) => m(n, i), ["arrow-down"]),
+                    y((i) => m(n, i), ["arrow-up"])
+                  ],
+                  onKeyup: (i) => j(n, i)
+                }, D(n[p.labelProperty] || ((f = n.alt_label) == null ? void 0 : f.de) || ((B = n.alt_label) == null ? void 0 : B.en)), 41, ce)
+              ]);
+            }), 256)),
+            c - 1 != Object.values(l).length ? (u(), d("div", pe)) : w("", !0)
           ]))), 256))
-        ])) : (r(), s("ul", se, [
-          (r(!0), s(x, null, A(g.data, (l, c) => (r(), s("button", {
-            disabled: l.disabled,
-            class: I({ dpiV3_selected: l.selected }),
-            style: F({
-              background: y.value[l["@value"]] || "initial"
-            }),
-            onClick: (n) => z(l, n),
-            onKeydown: (n) => P(l, n),
-            onKeyup: (n) => j(l, n)
-          }, S(l["@value"] || l.pref_label.de || l.pref_label.en), 47, ie))), 256))
+        ])) : (u(), d("ul", fe, [
+          (u(!0), d(E, null, K(p.data, (l, c) => {
+            var n, x;
+            return u(), d("button", {
+              key: l["@value"] || c,
+              disabled: l.disabled,
+              class: q({ dpiV3_selected: l.selected }),
+              style: P({
+                background: k.value[l["@value"]] || "initial"
+              }),
+              onClick: (f) => H(l, f),
+              onKeydown: (f) => R(l, f),
+              onKeyup: (f) => z(l, f)
+            }, D(l[p.labelProperty] || ((n = l.pref_label) == null ? void 0 : n.de) || ((x = l.pref_label) == null ? void 0 : x.en)), 47, ve);
+          }), 128))
         ]))
-      ], 6)) : h("", !0)
+      ], 6)) : w("", !0)
     ]));
   }
-}, me = /* @__PURE__ */ Z(ce, [["__scopeId", "data-v-fed57feb"]]);
+}, Ve = /* @__PURE__ */ le(ye, [["__scopeId", "data-v-93adf5c6"]]);
 export {
-  me as default
+  Ve as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/ModalSimpleV3.vue.js

@@ -3,7 +3,7 @@ import m from "./TextButtonSmall.vue.js";
 import _ from "./ButtonV3.vue.js";
 import V from "./CrossOutButton.vue.js";
 /* empty css                   */
-const k = { class: "dpiV3_modalBackground" }, f = { class: "dpiV3_modalWrap" }, v = { class: "dpiV3_modalMainWrap" }, y = { class: "dpiV3_modalHeaderWrap" }, b = { class: "dpiV3_modalText" }, x = {
+const k = { class: "dpiV3_modalBackground" }, f = { class: "dpiV3_modalWrap" }, y = { class: "dpiV3_modalMainWrap" }, v = { class: "dpiV3_modalHeaderWrap" }, b = { class: "dpiV3_modalText" }, x = {
   key: 0,
   class: "dpiV3AutoCompleteWrap copy-large-semi-bold"
 }, B = { class: "dpiV3_LinkInfos" }, C = {
@@ -60,8 +60,8 @@ const k = { class: "dpiV3_modalBackground" }, f = { class: "dpiV3_modalWrap" },
     };
     return (L, o) => (e(), n("div", k, [
       i("div", f, [
-        i("div", v, [
-          i("div", y, [
+        i("div", y, [
+          i("div", v, [
             i("h2", null, a(s.headerText), 1),
             u(V, {
               class: "dpiv3_modalCrossout",
@@ -79,13 +79,13 @@ const k = { class: "dpiV3_modalBackground" }, f = { class: "dpiV3_modalWrap" },
         t.dataRange && (t.optionalString_1 || t.optionalString_2) ? (e(), n("div", h, [
           i("div", A, [
             t.optionalString_1 ? (e(), n("div", W, [
-              o[0] || (o[0] = i("span", { class: "dpiV3_fromTo" }, "von", -1)),
+              o[0] || (o[0] = i("span", { class: "dpiV3_fromTo" }, "Von", -1)),
               o[1] || (o[1] = r()),
               o[2] || (o[2] = i("br", null, null, -1)),
               r(" " + a(t.optionalString_1), 1)
             ])) : l("", !0),
             t.optionalString_2 ? (e(), n("div", q, [
-              o[3] || (o[3] = i("span", { class: "dpiV3_fromTo" }, "bis", -1)),
+              o[3] || (o[3] = i("span", { class: "dpiV3_fromTo" }, "Bis", -1)),
               o[4] || (o[4] = r()),
               o[5] || (o[5] = i("br", null, null, -1)),
               r(" " + a(t.optionalString_2), 1)