@piveau/dpi 0.2.0-alpha.40 → 0.2.0-alpha.42

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Findability/ApplicationsStep.vue2.js

@@ -1,17 +1,18 @@
-import { defineComponent as w, ref as p, computed as k, watch as _, createElementBlock as o, openBlock as u, createElementVNode as n, createVNode as a, createCommentVNode as V, unref as d, Fragment as y, renderList as z, withDirectives as x, vModelCheckbox as A, withCtx as s, createTextVNode as g } from "vue";
-import { FormKit as S } from "@formkit/vue";
-import { PhLightbulb as f } from "@phosphor-icons/vue";
-import C from "../../../components/StepActionsSection.vue.js";
-import h from "../Card.vue.js";
-import U from "../Chip.vue.js";
-import I from "../ListBox/Listbox.vue.js";
-const B = { class: "dpiV3_page V3-typography" }, E = { class: "funny-section" }, L = { class: "funny-flex" }, P = {
+import { defineComponent as z, ref as f, computed as S, watch as h, createElementBlock as d, openBlock as m, createElementVNode as n, createVNode as a, createCommentVNode as x, unref as s, Fragment as A, renderList as C, withDirectives as I, vModelCheckbox as U, withCtx as l, createTextVNode as b } from "vue";
+import { useFormKitNodeById as B, FormKit as E } from "@formkit/vue";
+import { PhLightbulb as v } from "@phosphor-icons/vue";
+import M from "../../../components/StepActionsSection.vue.js";
+import { useFormKitMessages as L } from "../../../composables/useFormKitMessages.js";
+import w from "../Card.vue.js";
+import N from "../Chip.vue.js";
+import P from "../ListBox/Listbox.vue.js";
+const j = { class: "dpiV3_page V3-typography" }, D = { class: "funny-section" }, K = { class: "funny-flex" }, W = {
   key: 0,
   class: "d-flex selected-applications"
-}, D = ["id", "value"], M = { class: "funny-section action-section" }, N = { class: "action-section" }, W = { class: "action-section" }, G = /* @__PURE__ */ w({
+}, H = ["id", "value"], F = { class: "funny-section action-section" }, T = { class: "action-section" }, $ = { class: "action-section" }, ee = /* @__PURE__ */ z({
   __name: "ApplicationsStep",
-  setup(H) {
-    const i = p([]), l = p(""), b = [
+  setup(q) {
+    const i = f([]), r = f(""), k = [
       "Abfallmanagement",
       "Abwassermanagement",
       "Baumanagement",
@@ -49,106 +50,116 @@ const B = { class: "dpiV3_page V3-typography" }, E = { class: "funny-section" },
       "Wasserqualität",
       "Wasserversorgung",
       "Wirtschaftsflächenmanagement"
-    ], m = k(() => i.value);
-    return _(l, (r) => {
-      l.value = "", r && (i.value.includes(r) || i.value.push(r));
-    }), (r, e) => (u(), o("div", B, [
-      n("section", E, [
-        n("div", L, [
-          e[3] || (e[3] = n("h4", null, " Geben Sie Anwendungsbereiche an ", -1)),
-          e[4] || (e[4] = n("span", { class: "copy-large-regular" }, "Wenn Ihr Projekt mehrere Anwendungsbereiche abdeckt, wählen Sie diese in der Liste aus. ", -1)),
-          a(d(S), {
-            modelValue: i.value,
-            "onUpdate:modelValue": e[0] || (e[0] = (t) => i.value = t),
-            name: "applications",
-            type: "list",
-            validation: "required",
-            "validation-label": "Anwendungsbereiche",
-            hidden: ""
-          }, null, 8, ["modelValue"]),
-          m.value.length > 0 ? (u(), o("div", P, [
-            (u(!0), o(y, null, z(m.value, (t, c) => (u(), o("div", {
-              key: `application-${t}@${c}`,
-              class: "label-chip"
-            }, [
-              x(n("input", {
-                id: `application-${t}@${c}`,
-                "onUpdate:modelValue": e[1] || (e[1] = (v) => i.value = v),
-                class: "label-chip__input",
-                type: "checkbox",
-                value: t
-              }, null, 8, D), [
-                [A, i.value]
-              ]),
-              a(U, {
-                as: "label",
-                for: t,
-                class: "label-chip__inner",
-                text: t,
-                data: { "@value": t, URI: "https://example.com/default" },
-                setup: { "@type": "selected", "@icon": "suffix", "@inTable": !1, "@selected": !0 }
-              }, null, 8, ["for", "text", "data"])
-            ]))), 128))
-          ])) : V("", !0),
-          a(I, {
-            modelValue: l.value,
-            "onUpdate:modelValue": e[2] || (e[2] = (t) => l.value = t),
-            options: b,
-            placeholder: "Wählen Sie Ihre Anwendungsbereiche.",
-            label: "Anwendungsbereich auswählen",
-            filterable: "",
-            taggable: "",
-            "create-option": "",
-            clearable: ""
-          }, null, 8, ["modelValue"])
+    ], c = S(() => i.value);
+    h(r, (u) => {
+      r.value = "", u && (i.value.includes(u) || i.value.push(u));
+    });
+    const _ = B("applications"), { validationMessages: o, hasError: y } = L(_);
+    return h(o, () => {
+      console.log("validationMessages", o.value);
+    }), (u, e) => {
+      var p;
+      return m(), d("div", j, [
+        n("section", D, [
+          n("div", K, [
+            e[3] || (e[3] = n("h4", null, " Geben Sie Anwendungsbereiche an ", -1)),
+            e[4] || (e[4] = n("span", { class: "copy-large-regular" }, "Wenn Ihr Projekt mehrere Anwendungsbereiche abdeckt, wählen Sie diese in der Liste aus. ", -1)),
+            a(s(E), {
+              id: "applications",
+              modelValue: i.value,
+              "onUpdate:modelValue": e[0] || (e[0] = (t) => i.value = t),
+              name: "applications",
+              type: "list",
+              validation: "required",
+              "validation-label": "Anwendungsbereiche",
+              hidden: ""
+            }, null, 8, ["modelValue"]),
+            c.value.length > 0 ? (m(), d("div", W, [
+              (m(!0), d(A, null, C(c.value, (t, g) => (m(), d("div", {
+                key: `application-${t}@${g}`,
+                class: "label-chip"
+              }, [
+                I(n("input", {
+                  id: `application-${t}@${g}`,
+                  "onUpdate:modelValue": e[1] || (e[1] = (V) => i.value = V),
+                  class: "label-chip__input",
+                  type: "checkbox",
+                  value: t
+                }, null, 8, H), [
+                  [U, i.value]
+                ]),
+                a(N, {
+                  as: "label",
+                  for: t,
+                  class: "label-chip__inner",
+                  text: t,
+                  data: { "@value": t, URI: "https://example.com/default" },
+                  setup: { "@type": "selected", "@icon": "suffix", "@inTable": !1, "@selected": !0 }
+                }, null, 8, ["for", "text", "data"])
+              ]))), 128))
+            ])) : x("", !0),
+            a(P, {
+              modelValue: r.value,
+              "onUpdate:modelValue": e[2] || (e[2] = (t) => r.value = t),
+              options: k,
+              placeholder: "Wählen Sie Ihre Anwendungsbereiche.",
+              label: "Anwendungsbereich auswählen",
+              filterable: "",
+              taggable: "",
+              "create-option": "",
+              clearable: "",
+              error: s(y),
+              "error-message": Object.values(s(o)).length > 0 ? String((p = Object.values(s(o))[0]) == null ? void 0 : p.value) : ""
+            }, null, 8, ["modelValue", "error", "error-message"])
+          ])
+        ]),
+        n("section", F, [
+          a(M, { "hide-cancel": "" })
+        ]),
+        n("section", T, [
+          a(w, { variant: "default" }, {
+            icon: l(() => [
+              a(s(v), {
+                size: 32,
+                color: "#009fe3"
+              })
+            ]),
+            title: l(() => e[5] || (e[5] = [
+              b(" Information ", -1)
+            ])),
+            default: l(() => [
+              e[6] || (e[6] = n("div", { class: "application-information" }, [
+                n("p", null, " Ein Projekt beschreibt einen Use Case, der mithilfe eines Digitalen Zwillings umgesetzt wurde – nicht den gesamten Digitalen Zwilling. Ein Use Case kann unterschiedliche kommunale Anwendungsbereiche betreffen, die Sie für Ihr Projekt im Verlauf der Anlage benennen können. ")
+              ], -1))
+            ]),
+            _: 1,
+            __: [6]
+          })
+        ]),
+        n("section", $, [
+          a(w, { variant: "default" }, {
+            icon: l(() => [
+              a(s(v), {
+                size: 32,
+                color: "#009fe3"
+              })
+            ]),
+            title: l(() => e[7] || (e[7] = [
+              b(" Beispiel ", -1)
+            ])),
+            default: l(() => [
+              e[8] || (e[8] = n("div", { class: "application-information" }, [
+                n("p", null, " In Ihrem Projekt „Hochwasserschutzprogramm mit Prognosen“ wird mit Hilfe eines Digitalen Zwillings des lokalen Wassersystems die Hochwasserlage überwacht und vorhergesagt. Dieser Use Case betrifft mehrere Anwendungsbereiche wie Katastrophenschutz, Stadtplanung, Umwelt, Infrastrukturschutz und Bürgerinformation. ")
+              ], -1))
+            ]),
+            _: 1,
+            __: [8]
+          })
         ])
-      ]),
-      n("section", M, [
-        a(C, { "hide-cancel": "" })
-      ]),
-      n("section", N, [
-        a(h, { variant: "default" }, {
-          icon: s(() => [
-            a(d(f), {
-              size: 32,
-              color: "#009fe3"
-            })
-          ]),
-          title: s(() => e[5] || (e[5] = [
-            g(" Information ", -1)
-          ])),
-          default: s(() => [
-            e[6] || (e[6] = n("div", { class: "application-information" }, [
-              n("p", null, " Ein Projekt beschreibt einen Use Case, der mithilfe eines Digitalen Zwillings umgesetzt wurde – nicht den gesamten Digitalen Zwilling. Ein Use Case kann unterschiedliche kommunale Anwendungsbereiche betreffen, die Sie für Ihr Projekt im Verlauf der Anlage benennen können. ")
-            ], -1))
-          ]),
-          _: 1,
-          __: [6]
-        })
-      ]),
-      n("section", W, [
-        a(h, { variant: "default" }, {
-          icon: s(() => [
-            a(d(f), {
-              size: 32,
-              color: "#009fe3"
-            })
-          ]),
-          title: s(() => e[7] || (e[7] = [
-            g(" Beispiel ", -1)
-          ])),
-          default: s(() => [
-            e[8] || (e[8] = n("div", { class: "application-information" }, [
-              n("p", null, " In Ihrem Projekt „Hochwasserschutzprogramm mit Prognosen“ wird mit Hilfe eines Digitalen Zwillings des lokalen Wassersystems die Hochwasserlage überwacht und vorhergesagt. Dieser Use Case betrifft mehrere Anwendungsbereiche wie Katastrophenschutz, Stadtplanung, Umwelt, Infrastrukturschutz und Bürgerinformation. ")
-            ], -1))
-          ]),
-          _: 1,
-          __: [8]
-        })
-      ])
-    ]));
+      ]);
+    };
   }
 });
 export {
-  G as default
+  ee as default
 };

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

@@ -1,7 +1,7 @@
 import o from "./CategoriesStep.vue2.js";
 /* empty css                    */
 import t from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-61aa715e"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-17f9d4b6"]]);
 export {
-  p as default
+  a as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Findability/CategoriesStep.vue2.js

@@ -1,67 +1,89 @@
-import { defineComponent as d, ref as c, computed as f, resolveComponent as v, createElementBlock as h, openBlock as g, createElementVNode as i, createVNode as l } from "vue";
-import { defineHubSearch as y } from "@piveau/sdk-vue";
-import * as b from "zod";
-import _ from "../../../components/StepActionsSection.vue.js";
-import S from "../ChipToggleList/ChipToggleList.vue.js";
-const V = { class: "dpiV3_page V3-typography" }, C = { class: "funny-section" }, P = { class: "funny-flex" }, k = { class: "funny-section" }, z = /* @__PURE__ */ d({
+import { defineComponent as g, ref as m, computed as h, watch as y, resolveComponent as _, createElementBlock as b, openBlock as V, createElementVNode as s, createVNode as r, unref as u } from "vue";
+import { getValidationMessages as S } from "@formkit/validation";
+import { useFormKitNodeById as x, FormKitMessages as C } from "@formkit/vue";
+import { defineHubSearch as K } from "@piveau/sdk-vue";
+import * as P from "zod";
+import { useRuntimeEnv as U } from "../../../../composables/useRuntimeEnv.js";
+import k from "../../../components/StepActionsSection.vue.js";
+import q from "../ChipToggleList/ChipToggleList.vue.js";
+const E = { class: "dpiV3_page V3-typography" }, F = { class: "funny-section" }, O = { class: "funny-flex" }, R = { style: { display: "flex", "flex-direction": "column", gap: ".5rem" } }, z = { class: "funny-section" }, D = /* @__PURE__ */ g({
   __name: "CategoriesStep",
-  setup(q) {
-    const s = c([]), u = c(""), { useSearch: m } = y({
-      baseUrl: "https://staging.bydata.de/api/hub/search",
+  setup(B) {
+    const n = m([]), d = U(), p = m(""), { useSearch: f } = K({
+      baseUrl: d.api.baseUrl,
       index: "vocabulary",
-      schema: b.any()
+      schema: P.any()
     }, (e) => {
-      var t, a;
-      const o = String((e == null ? void 0 : e.resource) || ""), n = String(((t = e == null ? void 0 : e.pref_label) == null ? void 0 : t.de) || ((a = e == null ? void 0 : e.pref_label) == null ? void 0 : a.en) || "");
+      var t, c;
+      const o = String((e == null ? void 0 : e.resource) || ""), i = String(((t = e == null ? void 0 : e.pref_label) == null ? void 0 : t.de) || ((c = e == null ? void 0 : e.pref_label) == null ? void 0 : c.en) || "");
       return {
         id: o,
-        name: n
+        name: i
       };
-    }), { getSearchResultsEnhanced: r } = m({
+    }), { getSearchResultsEnhanced: a } = f({
       queryParams: {
-        q: u,
+        q: p,
         limit: 40,
         vocabulary: "data-theme",
         sort: "title+asc"
       }
-    }), p = f(() => {
+    }), v = h(() => {
       var e;
-      return r.value ? (e = [...r.value].filter((o) => !o.id.endsWith("OP_DATPRO"))) == null ? void 0 : e.sort((o, n) => o.name.localeCompare(n.name)) : [];
-    });
-    return (e, o) => {
-      const n = v("FormKit");
-      return g(), h("div", V, [
-        i("section", C, [
-          i("div", P, [
-            o[2] || (o[2] = i("div", null, [
-              i("h4", null, " Machen Sie Ihr Projekt leicht auffindbar "),
-              i("div", { class: "visibility-description" }, [
-                i("p", { class: "copy-large-regular" }, " Um sicherzustellen, dass Ihr Projekt für andere leicht zu finden ist, wählen Sie die relevanten, übergeordneten Kategorien aus. ")
+      return a.value ? (e = [...a.value].filter((o) => !o.id.endsWith("OP_DATPRO"))) == null ? void 0 : e.sort((o, i) => o.name.localeCompare(i.name)) : [];
+    }), l = x("categories");
+    return y(n, (e, o) => {
+      if (!l.value)
+        return;
+      const i = S(l.value);
+      console.log("le messages", i, e, o);
+    }), (e, o) => {
+      const i = _("FormKit");
+      return V(), b("div", E, [
+        s("section", F, [
+          s("div", O, [
+            o[2] || (o[2] = s("div", null, [
+              s("h4", null, " Machen Sie Ihr Projekt leicht auffindbar "),
+              s("div", { class: "visibility-description" }, [
+                s("p", { class: "copy-large-regular" }, " Um sicherzustellen, dass Ihr Projekt für andere leicht zu finden ist, wählen Sie die relevanten, übergeordneten Kategorien aus. ")
               ])
             ], -1)),
-            l(n, {
-              modelValue: s.value,
-              "onUpdate:modelValue": o[0] || (o[0] = (t) => s.value = t),
+            r(i, {
+              id: "categories",
+              modelValue: n.value,
+              "onUpdate:modelValue": o[0] || (o[0] = (t) => n.value = t),
               type: "list",
               name: "categories",
               validation: "required",
               "validation-visibility": "submit",
               "validation-label": "Kategorien"
             }, null, 8, ["modelValue"]),
-            l(S, {
-              modelValue: s.value,
-              "onUpdate:modelValue": o[1] || (o[1] = (t) => s.value = t),
-              options: p.value || []
-            }, null, 8, ["modelValue", "options"])
+            s("div", R, [
+              r(q, {
+                modelValue: n.value,
+                "onUpdate:modelValue": o[1] || (o[1] = (t) => n.value = t),
+                options: v.value || []
+              }, null, 8, ["modelValue", "options"]),
+              r(u(C), {
+                node: u(l),
+                "sections-schema": {
+                  message: {
+                    $el: "div",
+                    attrs: {
+                      class: "dpiV3_errorText"
+                    }
+                  }
+                }
+              }, null, 8, ["node"])
+            ])
           ])
         ]),
-        i("section", k, [
-          l(_, { "hide-cancel": "" })
+        s("section", z, [
+          r(k, { "hide-cancel": "" })
         ])
       ]);
     };
   }
 });
 export {
-  z as default
+  D as default
 };

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

@@ -1,7 +1,8 @@
-import { defineComponent as f, toRef as m, computed as r, createBlock as g, openBlock as y, unref as c, isRef as h } from "vue";
-import { useField as v } from "vee-validate";
-import B from "../InputField.vue.js";
-const M = /* @__PURE__ */ f({
+import { defineComponent as g, toRef as c, computed as s, ref as y, watch as h, createBlock as v, openBlock as B, unref as T, isRef as k } from "vue";
+import { watchOnce as V } from "@vueuse/core";
+import { useField as x } from "vee-validate";
+import M from "../InputField.vue.js";
+const F = /* @__PURE__ */ g({
   __name: "InputFieldVeeValidate",
   props: {
     modelValue: {},
@@ -28,16 +29,21 @@ const M = /* @__PURE__ */ f({
     errorMessage: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(s) {
-    const t = s, p = m(t, "name"), { value: a, errorMessage: l, meta: i } = v(p, void 0, {
+  setup(u) {
+    const t = u, p = c(t, "name"), { value: a, errorMessage: o, meta: l, validate: f } = x(p, void 0, {
       syncVModel: !0,
       form: t.form,
       validateOnValueUpdate: !1,
-      validateOnMount: !1
-    }), o = r(() => !!((i.touched || i.dirty) && (l.value || t.errorMessage))), n = r(() => l.value || t.errorMessage || "");
-    return (e, d) => (y(), g(B, {
-      modelValue: c(a),
-      "onUpdate:modelValue": d[0] || (d[0] = (u) => h(a) ? a.value = u : null),
+      validateOnMount: !1,
+      keepValueOnUnmount: !1
+    }), i = s(() => !!((l.touched || l.dirty) && (o.value || t.errorMessage))), n = s(() => o.value || t.errorMessage || ""), d = y(!1);
+    return V(i, (e) => {
+      e && (d.value = !0);
+    }), h(a, () => {
+      d.value && l.validated && f({ mode: "force" });
+    }), (e, r) => (B(), v(M, {
+      modelValue: T(a),
+      "onUpdate:modelValue": r[0] || (r[0] = (m) => k(a) ? a.value = m : null),
       label: e.label,
       placeholder: e.placeholder,
       "input-type": e.inputType,
@@ -54,13 +60,13 @@ const M = /* @__PURE__ */ f({
       "is-disabled": e.isDisabled,
       "input-field-size": e.inputFieldSize,
       "input-style": e.inputStyle,
-      "show-error": o.value,
+      "show-error": i.value,
       error_message: n.value,
       "supporting-hint-message": n.value || e.supportingHintMessage,
-      "initial-hint-text": o.value || e.initialHintText
+      "initial-hint-text": i.value || e.initialHintText
     }, null, 8, ["modelValue", "label", "placeholder", "input-type", "add-on-text", "add-on-leading-text", "trailing-text", "trailing_text", "date-picker", "time-picker", "info-icon", "tooltip-text", "pre-icon", "show-end-icon", "is-disabled", "input-field-size", "input-style", "show-error", "error_message", "supporting-hint-message", "initial-hint-text"]));
   }
 });
 export {
-  M as default
+  F as default
 };

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

@@ -1,7 +1,8 @@
-import { defineComponent as p, toRef as u, computed as r, createBlock as m, openBlock as f, unref as b, isRef as V } from "vue";
-import { useField as c } from "vee-validate";
-import v from "./Listbox.vue.js";
-const L = /* @__PURE__ */ p({
+import { defineComponent as b, toRef as c, computed as r, ref as v, watch as V, createBlock as h, openBlock as y, unref as g, isRef as B } from "vue";
+import { watchOnce as F } from "@vueuse/core";
+import { useField as L } from "vee-validate";
+import M from "./Listbox.vue.js";
+const D = /* @__PURE__ */ b({
   __name: "ListboxVeeValidate",
   props: {
     modelValue: {},
@@ -17,15 +18,19 @@ const L = /* @__PURE__ */ p({
   },
   emits: ["update:modelValue"],
   setup(o) {
-    const l = o, n = u(l, "name"), { value: a, errorMessage: d } = c(n, void 0, {
+    const l = o, s = c(l, "name"), { value: a, errorMessage: n, validate: p, meta: t } = L(s, void 0, {
       syncVModel: !0,
       form: l.form,
       validateOnValueUpdate: !1,
       validateOnMount: !1
-    }), i = r(() => d.value || "");
-    return (e, t) => (f(), m(v, {
-      modelValue: b(a),
-      "onUpdate:modelValue": t[0] || (t[0] = (s) => V(a) ? a.value = s : null),
+    }), u = r(() => !!((t.touched || t.dirty) && n.value)), m = r(() => n.value || ""), d = v(!1);
+    return F(u, (e) => {
+      e && (d.value = !0);
+    }), V(a, () => {
+      d.value && t.validated && p({ mode: "force" });
+    }), (e, i) => (y(), h(M, {
+      modelValue: g(a),
+      "onUpdate:modelValue": i[0] || (i[0] = (f) => B(a) ? a.value = f : null),
       options: e.options,
       label: e.label,
       placeholder: e.placeholder,
@@ -33,11 +38,11 @@ const L = /* @__PURE__ */ p({
       "option-value": e.optionValue,
       "option-disabled": e.optionDisabled,
       disabled: e.disabled,
-      "error-message": i.value,
+      "error-message": m.value,
       name: l.name
     }, null, 8, ["modelValue", "options", "label", "placeholder", "option-label", "option-value", "option-disabled", "disabled", "error-message", "name"]));
   }
 });
 export {
-  L as default
+  D as default
 };

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

@@ -1,7 +1,7 @@
 import t from "./OptionalDataStep.vue2.js";
 /* empty css                      */
 import o from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ o(t, [["__scopeId", "data-v-c0f37be8"]]);
+const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-d206ff46"]]);
 export {
-  e as default
+  r as default
 };