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

package/dist/packages/dpi/src/data-provider-interface/components/StepActionsSection.vue.js

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

package/dist/packages/dpi/src/data-provider-interface/components/StepActionsSection.vue2.js

@@ -1,16 +1,17 @@
-import { defineComponent as U, inject as Z, ref as p, watch as q, computed as h, createElementBlock as r, openBlock as o, normalizeClass as G, createElementVNode as g, createBlock as y, createCommentVNode as N, createVNode as s, renderSlot as B, unref as E, normalizeStyle as H, withDirectives as x, vShow as C, Fragment as P, withCtx as S, renderList as J, toDisplayString as z, nextTick as Q } from "vue";
-import { getNode as X, isNode as Y } from "@formkit/core";
-import { getValidationMessages as _ } from "@formkit/validation";
-import { PhExclamationMark as ee } from "@phosphor-icons/vue";
-import u from "../HappyFlowComponents/ui/ButtonV3.vue.js";
-import te from "../HappyFlowComponents/ui/Card.vue.js";
-import { dpiStepperKey as ne } from "../utils/injectionKeys.js";
-import ae from "./TheCancelConfirmationDialog.vue.js";
-import { useEditModeInfo as oe } from "../composables/useDpiEditMode.js";
-const ie = { class: "step-actions" }, le = { class: "step-actions__prev-and-next" }, re = { style: { margin: "0" } }, se = {
+import { defineComponent as G, inject as H, ref as h, watch as J, computed as y, createElementBlock as u, openBlock as n, normalizeClass as Q, createElementVNode as x, createBlock as C, createCommentVNode as E, createVNode as c, renderSlot as P, unref as z, normalizeStyle as X, withDirectives as S, vShow as b, Fragment as D, withCtx as k, renderList as Y, toDisplayString as L, nextTick as A } from "vue";
+import { getNode as _, isNode as ee } from "@formkit/core";
+import { getValidationMessages as te } from "@formkit/validation";
+import { PhExclamationMark as oe } from "@phosphor-icons/vue";
+import { useFormKitSummary as ae } from "../composables/useFormKitSummary.js";
+import d from "../HappyFlowComponents/ui/ButtonV3.vue.js";
+import ne from "../HappyFlowComponents/ui/Card.vue.js";
+import { dpiStepperKey as ie } from "../utils/injectionKeys.js";
+import se from "./TheCancelConfirmationDialog.vue.js";
+import { useEditModeInfo as re } from "../composables/useDpiEditMode.js";
+const le = { class: "step-actions" }, ue = { class: "step-actions__prev-and-next" }, ce = { style: { margin: "0" } }, de = {
   key: 0,
   class: "validation-errors"
-}, Ce = /* @__PURE__ */ U({
+}, be = /* @__PURE__ */ G({
   __name: "StepActionsSection",
   props: {
     hideCancel: { type: Boolean, default: !1 },
@@ -27,62 +28,72 @@ const ie = { class: "step-actions" }, le = { class: "step-actions__prev-and-next
     showDetailedErrorSummary: { type: Boolean, default: !1 }
   },
   emits: ["submit", "closeWithSaving"],
-  setup(D, { emit: L }) {
-    const l = D, b = L, t = Z(ne);
+  setup(F, { emit: M }) {
+    const s = F, T = M, t = H(ie);
     t || console.warn("dpiStepper is not provided. Please use StepActionsSection inside InputPage");
-    function T(e) {
+    const { summaries: W, submit: j } = ae();
+    function N(e) {
       return e !== void 0;
     }
-    const f = p(!1), d = p(!1), i = p([]);
-    t && q(t.activeStep, () => {
-      i.value.splice(0, i.value.length), d.value = !1;
-    });
-    function k() {
-      f.value = !0;
+    const v = h(!1), f = h(!1), r = h([]);
+    function B() {
+      v.value = !0;
     }
-    function m() {
+    function p() {
       t == null || t.goToPreviousStep();
     }
-    async function v() {
-      var V, w;
-      if (!T(t))
+    function I(e) {
+      const o = (a) => {
+        for (const l in a.store) {
+          const i = a.store[l];
+          i.type === "error" || i.type === "ui" && l === "incomplete" ? a.store.remove(l) : i.type === "state" && a.store.set({ ...i, value: !1 });
+        }
+      };
+      o(e), e.walk(o);
+    }
+    async function g() {
+      var w, V;
+      if (!N(t))
         return !1;
-      t.triggerValidationCurrentStep(), await Q();
+      t.triggerValidationCurrentStep(), await A();
       const e = t.activeStep.value;
       if (!e)
         return !1;
-      const n = X(e);
-      if (!Y(n))
-        return console.error("Current step node is not a FormKitNode", n), !1;
-      n.clearErrors(!0);
-      const a = _(n), K = !!((w = (V = t.steps) == null ? void 0 : V[e]) != null && w.valid);
-      return a && a.size > 0 || !K ? (i.value = [...a.entries()].flatMap(([de, R]) => R.map((O) => String(O.value))), d.value = !0, !1) : (i.value.splice(0, i.value.length), d.value = !1, !0);
+      const o = _(e);
+      if (!ee(o))
+        return console.error("Current step node is not a FormKitNode", o), !1;
+      await j();
+      const a = te(o), l = !!((V = (w = t.steps) == null ? void 0 : w[e]) != null && V.valid), i = a && a.size > 0 || !l;
+      return i || (I(o), o.clearErrors(!0), f.value = !1, await A()), !i;
     }
-    function M(e, n) {
-      v().then((a) => {
-        a ? e() : n && typeof n == "function" && n();
+    J(W, (e) => {
+      e && e.length > 0 ? (f.value = !0, r.value = (e == null ? void 0 : e.map((o) => o.message)) || []) : (f.value = !1, r.value.splice(0, r.value.length));
+    });
+    function K(e, o) {
+      g().then((a) => {
+        a ? e() : o && typeof o == "function" && o();
       });
     }
-    function A() {
+    function $() {
       t == null || t.goToNextStep();
     }
-    async function c() {
-      !T(t) || !await v() || (t != null && t.isLast.value ? b("submit") : t == null || t.goToNextStep());
+    async function m() {
+      !N(t) || !await g() || (t != null && t.isLast.value ? T("submit") : t == null || t.goToNextStep());
     }
-    const { isEditMode: F } = oe();
-    async function W() {
-      !t || !await v() || t == null || t.goToStep(Object.keys(t.steps).pop() || "");
+    const { isEditMode: R } = re();
+    async function O() {
+      !t || !await g() || t == null || t.goToStep(Object.keys(t.steps).pop() || "");
     }
-    const j = h(() => t ? t == null ? void 0 : t.isLast.value : !0), I = h(() => [
-      { "step-actions-container--compact": l.compact },
-      l.classList
-    ]), $ = h(() => l.showDetailedErrorSummary ? "Fehler" : "Bitte füllen Sie alle Pflichtfelder aus und geben Sie gültige Formate an, bevor Sie fortfahren.");
-    return (e, n) => (o(), r("div", {
-      class: G([I.value, "step-actions-container"])
+    const U = y(() => t ? t == null ? void 0 : t.isLast.value : !0), Z = y(() => [
+      { "step-actions-container--compact": s.compact },
+      s.classList
+    ]), q = y(() => s.showDetailedErrorSummary ? "Fehler" : "Bitte füllen Sie alle Pflichtfelder aus und geben Sie gültige Formate an, bevor Sie fortfahren.");
+    return (e, o) => (n(), u("div", {
+      class: Q([Z.value, "step-actions-container"])
     }, [
-      g("div", ie, [
-        E(F) ? (o(), r(P, { key: 1 }, [
-          j.value ? x((o(), y(u, {
+      x("div", le, [
+        z(R) ? (n(), u(D, { key: 1 }, [
+          U.value ? S((n(), C(d, {
             key: 1,
             class: "edit-save-button",
             size: "large",
@@ -90,99 +101,99 @@ const ie = { class: "step-actions" }, le = { class: "step-actions__prev-and-next
             type: "button",
             "button-text": e.nextText,
             "icon-end": e.nextText === "Als Entwurf Speichern" ? null : "CaretRight",
-            loading: l.loading,
-            onClick: c
+            loading: s.loading,
+            onClick: m
           }, null, 8, ["variant", "button-text", "icon-end", "loading"])), [
-            [C, !e.hideNext]
-          ]) : (o(), y(u, {
+            [b, !e.hideNext]
+          ]) : (n(), C(d, {
             key: 0,
             class: "edit-save-button",
             size: "large",
             variant: "primary",
             type: "button",
             "button-text": "Speichern",
-            onClick: W
+            onClick: O
           }))
-        ], 64)) : B(e.$slots, "default", {
+        ], 64)) : P(e.$slots, "default", {
           key: 0,
-          handleCancel: k,
-          handlePrevious: m,
-          handleSubmit: c
+          handleCancel: B,
+          handlePrevious: p,
+          handleSubmit: m
         }, () => [
-          s(u, {
-            style: H({ opacity: e.hideCancel ? 0 : 1 }),
+          c(d, {
+            style: X({ opacity: e.hideCancel ? 0 : 1 }),
             variant: "tertiary",
             size: "large",
             type: "button",
             "button-text": e.cancelText,
-            onClick: k
+            onClick: B
           }, null, 8, ["style", "button-text"]),
-          g("div", le, [
-            B(e.$slots, "prev-and-next", {
+          x("div", ue, [
+            P(e.$slots, "prev-and-next", {
               hidePrevious: e.hidePrevious,
               hideNext: e.hideNext,
               previousText: e.previousText,
               nextText: e.nextText,
-              handleNext: A,
-              handlePrevious: m,
-              handleSubmit: c,
-              loading: l.loading,
-              validate: M
+              handleNext: $,
+              handlePrevious: p,
+              handleSubmit: m,
+              loading: s.loading,
+              validate: K
             }, () => [
-              x(s(u, {
+              S(c(d, {
                 variant: "secondary",
                 size: "large",
                 type: "button",
                 "button-text": e.previousText,
                 "icon-start": "CaretLeft",
-                onClick: m
+                onClick: p
               }, null, 8, ["button-text"]), [
-                [C, !e.hidePrevious]
+                [b, !e.hidePrevious]
               ]),
-              x(s(u, {
+              S(c(d, {
                 size: "large",
                 variant: e.nextVariant,
                 type: "button",
                 "button-text": e.nextText,
                 "icon-end": e.nextText === "Als Entwurf Speichern" || e.nextText === "Projektanlage starten" ? null : "CaretRight",
-                loading: l.loading,
-                onClick: c
+                loading: s.loading,
+                onClick: m
               }, null, 8, ["variant", "button-text", "icon-end", "loading"]), [
-                [C, !e.hideNext]
+                [b, !e.hideNext]
               ])
             ], !0)
           ])
         ], !0)
       ]),
-      d.value && i.value.length ? (o(), y(te, {
+      f.value && r.value.length ? (n(), C(ne, {
         key: 0,
         variant: "error",
         "icon-top": ""
       }, {
-        icon: S(() => [
-          s(E(ee), {
+        icon: k(() => [
+          c(z(oe), {
             size: 32,
             color: "currentColor"
           })
         ]),
-        title: S(() => [
-          g("p", re, z($.value), 1)
+        title: k(() => [
+          x("p", ce, L(q.value), 1)
         ]),
-        default: S(() => [
-          e.showDetailedErrorSummary ? (o(), r("ul", se, [
-            (o(!0), r(P, null, J(i.value, (a) => (o(), r("li", { key: a }, z(a), 1))), 128))
-          ])) : N("", !0)
+        default: k(() => [
+          e.showDetailedErrorSummary ? (n(), u("ul", de, [
+            (n(!0), u(D, null, Y(r.value, (a) => (n(), u("li", { key: a }, L(a), 1))), 128))
+          ])) : E("", !0)
         ]),
         _: 1
-      })) : N("", !0),
-      s(ae, {
-        modelValue: f.value,
-        "onUpdate:modelValue": n[0] || (n[0] = (a) => f.value = a),
-        onCloseWithSaving: n[1] || (n[1] = (a) => b("closeWithSaving"))
+      })) : E("", !0),
+      c(se, {
+        modelValue: v.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (a) => v.value = a),
+        onCloseWithSaving: o[1] || (o[1] = (a) => T("closeWithSaving"))
       }, null, 8, ["modelValue"])
     ], 2));
   }
 });
 export {
-  Ce as default
+  be as default
 };

package/dist/packages/dpi/src/data-provider-interface/composables/useFormKitMessages.js

@@ -0,0 +1,14 @@
+import { toRef as c, computed as o } from "vue";
+function g(n) {
+  const r = c(n), e = o(() => {
+    var s, t;
+    return ((t = (s = r.value) == null ? void 0 : s.context) == null ? void 0 : t.messages) || {};
+  }), a = o(() => Object.keys(e.value).length > 0);
+  return {
+    validationMessages: e,
+    hasError: a
+  };
+}
+export {
+  g as useFormKitMessages
+};

package/dist/packages/dpi/src/data-provider-interface/composables/useFormKitSummary.js

@@ -0,0 +1,46 @@
+import { parentSymbol as g } from "@formkit/vue";
+import { whenever as h } from "@vueuse/core";
+import { toRef as w, computed as n, inject as b, ref as p, nextTick as v } from "vue";
+function S(d) {
+  const o = w(d), c = n(() => (o == null ? void 0 : o.value) || b(g, void 0));
+  let s = null, r = null;
+  const a = p([]), i = p(!1), m = n(() => {
+    const e = [];
+    return a.value.forEach((t) => {
+      for (const l in t.messages) {
+        const u = t.messages[l];
+        typeof u.value == "string" && e.push({
+          message: u.value,
+          id: t.id,
+          key: `${t.id}-${u.key}`,
+          type: u.type
+        });
+      }
+    }), e;
+  }), f = () => {
+    var e;
+    a.value = [], (e = c.value) == null || e.walk(
+      (t) => t.context && a.value.push(t.context)
+    );
+  };
+  h(c, (e, t, l) => {
+    s && (t == null || t.off(s), t == null || t.off(r)), e && (s = e.on("submit-raw", async () => {
+      f(), m.value.length !== 0 && (i.value = !0, await v());
+    }), r = e.on("child", f), l(() => {
+      e == null || e.off(s || ""), e == null || e.off(r || "");
+    }));
+  }, {
+    immediate: !0
+  });
+  async function y() {
+    f(), m.value.length !== 0 && (i.value = !0, await v());
+  }
+  return {
+    summaries: m,
+    showSummaries: i,
+    submit: y
+  };
+}
+export {
+  S as useFormKitSummary
+};

package/dist/packages/dpi/src/data-provider-interface/utils/useSteps.js

@@ -1,43 +1,49 @@
-import { getNode as p, createMessage as f } from "@formkit/core";
-import { ref as s, reactive as v, watch as g, toRef as m } from "vue";
-function y() {
-  const r = s(""), a = v({});
+import { getNode as v, createMessage as o } from "@formkit/core";
+import { ref as s, reactive as f, watch as g, toRef as m } from "vue";
+function h() {
+  const i = s(""), a = f({});
   let u = s([]);
-  const i = s([]);
-  function n(t) {
-    const e = p(t);
-    e !== void 0 && e.walk((c) => {
-      c.store.set(
-        f({
+  const r = s([]);
+  function n(e) {
+    const t = v(e);
+    t !== void 0 && (t.walk((p) => {
+      p.store.set(
+        o({
           key: "submitted",
           value: !0,
           visible: !1
         })
       );
-    });
+    }), t.store.set(
+      o({
+        key: "submitted",
+        value: !0,
+        visible: !1
+      })
+    ));
   }
   function l() {
-    n(r.value);
+    n(i.value);
   }
-  function o() {
-    i.value.forEach((t) => {
-      n(t);
+  function c() {
+    r.value.forEach((e) => {
+      n(e);
     });
   }
-  return g(r, (t, e) => {
-    e && !i.value.includes(e) && i.value.push(e), o();
-  }), { visitedSteps: i, activeStep: r, steps: a, subSteps: u, stepPlugin: (t) => {
-    if (t.props.type == "group")
-      return a[t.name] = a[t.name] || {}, t.on("created", () => {
-        const e = m(t.context.state, "valid");
-        a[t.name].valid = e;
-      }), t.on("count:blocking", ({ payload: e }) => {
-        a[t.name].blockingCount = e;
-      }), t.on("count:errors", ({ payload: e }) => {
-        a[t.name].errorCount = e;
-      }), r.value === "" && (r.value = t.name), u.value.push(t.value), !1;
-  }, triggerValidation: o, triggerValidationCurrentStep: l };
+  return g(i, (e, t) => {
+    t && !r.value.includes(t) && r.value.push(t);
+  }), { visitedSteps: r, activeStep: i, steps: a, subSteps: u, stepPlugin: (e) => {
+    if (e.props.type == "group")
+      return a[e.name] = a[e.name] || {}, e.on("created", () => {
+        const t = m(e.context.state, "valid");
+        a[e.name].valid = t;
+      }), e.on("count:blocking", ({ payload: t }) => {
+        a[e.name].blockingCount = t;
+      }), e.on("count:errors", ({ payload: t }) => {
+        a[e.name].errorCount = t;
+      }), i.value === "" && (i.value = e.name), u.value.push(e.value), !1;
+  }, triggerValidation: c, triggerValidationCurrentStep: l };
 }
 export {
-  y as default
+  h as default
 };

package/dist/packages/dpi/src/utils/twinbyUtils.js

@@ -26,6 +26,7 @@ function i(e) {
 }
 i.skipEmpty = !1;
 export {
+  n as empty,
   s as generateIsInvalidMsg,
   f as generateIsRequiredMsg,
   i as requireAllIfAny

package/dist/styles/_dpi.scss

@@ -1612,3 +1612,19 @@ innerRapModalItem {
     }
   }
 }
+
+.dpiV3_errorText {
+  display: flex;
+  padding: 0px var(--Spacing-3, 16px);
+  align-items: flex-start;
+  align-self: stretch;
+
+  /* Copy/Copy-Small-Regular */
+  font-family: var(--font-family-secondary, Inter);
+  font-size: var(--copy-small-regular-font-size, 15px);
+  font-style: normal;
+  font-weight: var(--copy-small-regular-font-weight, 400);
+  line-height: var(--copy-small-regular-line-height, 24px); /* 160% */
+
+  color: var(--text-error, #a9242c);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@piveau/dpi",
   "type": "module",
-  "version": "0.2.0-alpha.41",
+  "version": "0.2.0-alpha.42",
   "private": false,
   "sideEffects": [
     "*.css",