@piveau/dpi 0.2.0-alpha.1 → 0.2.0-alpha.3

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

@@ -1,54 +1,131 @@
-import { defineComponent as d, inject as g, toRef as b, computed as V, createElementBlock as _, openBlock as y, createVNode as o, nextTick as h } from "vue";
-import { getNode as x } from "@formkit/core";
-import { useFormValues as C } from "../composables/useDpiFormValues.js";
-import r from "../HappyFlowComponents/ui/ButtonV3.vue.js";
-import { dpiStepperKey as N } from "../utils/injectionKeys.js";
-const S = { class: "step-actions" }, E = /* @__PURE__ */ d({
+import { defineComponent as B, inject as P, ref as h, watch as _, toRef as z, computed as E, createElementBlock as u, openBlock as i, createElementVNode as c, createBlock as F, createCommentVNode as I, renderSlot as g, createVNode as d, normalizeStyle as M, withDirectives as p, vShow as y, withCtx as x, Fragment as A, renderList as D, toDisplayString as L, createTextVNode as R, nextTick as $ } from "vue";
+import { getNode as K, isNode as W } from "@formkit/core";
+import { getValidationMessages as j } from "@formkit/validation";
+import { useFormValues as J } from "../composables/useDpiFormValues.js";
+import f from "../HappyFlowComponents/ui/ButtonV3.vue.js";
+import O from "../HappyFlowComponents/ui/Card.vue.js";
+import { dpiStepperKey as Z } from "../utils/injectionKeys.js";
+const q = { class: "step-actions-container" }, G = { class: "step-actions" }, H = { class: "step-actions__prev-and-next" }, Q = { class: "validation-errors" }, ie = /* @__PURE__ */ B({
   __name: "StepActionsSection",
-  setup(k) {
-    const { formValues: s } = C(), t = g(N);
-    t || console.warn("dpiStepper is not provided. Please use StepActionsSection inside InputPage");
-    function u(e) {
-      return e !== void 0;
+  props: {
+    hideCancel: { type: Boolean, default: !1 },
+    hidePrevious: { type: Boolean, default: !1 },
+    hideNext: { type: Boolean, default: !1 },
+    hideValidationSummary: { type: Boolean, default: !1 },
+    cancelText: { default: "Abbrechen" },
+    previousText: { default: "Zurück" },
+    nextText: { default: "Weiter" }
+  },
+  setup(U) {
+    const { formValues: C } = J(), e = P(Z);
+    e || console.warn("dpiStepper is not provided. Please use StepActionsSection inside InputPage");
+    function S(t) {
+      return t !== void 0;
     }
-    const c = b(t == null ? void 0 : t.steps);
-    function a(e) {
-      var i;
-      const n = (i = c.value) == null ? void 0 : i[e];
-      return n ? n.valid : !1;
+    const r = h(!1), a = h([]);
+    function N(t) {
+      if (!t)
+        return;
+      const o = j(t);
+      !o || o.size === 0 || (a.value = [...o.entries()].flatMap(([n, k]) => k.map((w) => String(w.value))));
+    }
+    e && _(e.activeStep, () => {
+      a.value.splice(0, a.value.length), r.value = !1;
+    });
+    const T = z(e == null ? void 0 : e.steps);
+    function v(t) {
+      var n;
+      const o = (n = T.value) == null ? void 0 : n[t];
+      return o ? o.valid : !1;
+    }
+    function V() {
+      v((e == null ? void 0 : e.activeStep.value) || "") && (e == null || e.goToNextStep());
     }
-    function l() {
-      a((t == null ? void 0 : t.activeStep.value) || "") && (t == null || t.goToNextStep());
+    function m() {
+      window.alert("WIP");
     }
-    function f() {
-      t == null || t.goToPreviousStep();
+    function s() {
+      e == null || e.goToPreviousStep();
     }
-    const m = V(() => t != null && t.activeStep.value ? x(t == null ? void 0 : t.activeStep.value) : null);
-    async function v() {
-      if (!u(t))
+    const b = E(() => e != null && e.activeStep.value ? K(e == null ? void 0 : e.activeStep.value) : null);
+    async function l() {
+      if (!S(e))
         return;
-      t.triggerValidationCurrentStep(), await h(), (m.value ? !a((t == null ? void 0 : t.activeStep.value) || "") : !1) && (t == null || t.triggerValidationCurrentStep()), t != null && t.isLast.value ? window.alert(`Form submitted: ${JSON.stringify(s.value, null, 2)}`) : l();
+      e.triggerValidationCurrentStep(), await $();
+      const t = b.value;
+      if (t ? !v((e == null ? void 0 : e.activeStep.value) || "") : !1) {
+        if (!W(t)) {
+          console.error("Current step node is not a FormKitNode", t);
+          return;
+        }
+        N(t), r.value = !0;
+      }
+      e != null && e.isLast.value ? window.alert(`Form submitted: ${JSON.stringify(C.value, null, 2)}`) : V();
     }
-    return (e, n) => (y(), _("div", S, [
-      o(r, {
-        variant: "tertiary",
-        type: "button",
-        "button-text": "Abbrechen"
-      }),
-      o(r, {
-        variant: "secondary",
-        type: "button",
-        "button-text": "Zurück",
-        onClick: f
-      }),
-      o(r, {
-        type: "button",
-        "button-text": "Weiter",
-        onClick: v
-      })
+    return (t, o) => (i(), u("div", q, [
+      c("div", G, [
+        g(t.$slots, "default", {
+          handleCancel: m,
+          handlePrevious: s,
+          handleSubmit: l
+        }, () => [
+          d(f, {
+            style: M({ opacity: t.hideCancel ? 0 : 1 }),
+            variant: "tertiary",
+            size: "large",
+            type: "button",
+            "button-text": t.cancelText,
+            onClick: m
+          }, null, 8, ["style", "button-text"]),
+          c("div", H, [
+            g(t.$slots, "prev-and-next", {
+              hidePrevious: t.hidePrevious,
+              hideNext: t.hideNext,
+              previousText: t.previousText,
+              nextText: t.nextText,
+              handlePrevious: s,
+              handleSubmit: l
+            }, () => [
+              p(d(f, {
+                variant: "secondary",
+                size: "large",
+                type: "button",
+                "button-text": t.previousText,
+                "icon-start": "CaretLeft",
+                onClick: s
+              }, null, 8, ["button-text"]), [
+                [y, !t.hidePrevious]
+              ]),
+              p(d(f, {
+                size: "large",
+                type: "button",
+                "button-text": t.nextText,
+                "icon-end": "CaretRight",
+                onClick: l
+              }, null, 8, ["button-text"]), [
+                [y, !t.hideNext]
+              ])
+            ], !0)
+          ])
+        ], !0)
+      ]),
+      r.value && a.value.length ? (i(), F(O, {
+        key: 0,
+        variant: "error"
+      }, {
+        title: x(() => o[0] || (o[0] = [
+          R(" Bitte korrigieren Sie die folgenden Fehler ", -1)
+        ])),
+        default: x(() => [
+          c("ul", Q, [
+            (i(!0), u(A, null, D(a.value, (n) => (i(), u("li", { key: n }, L(n), 1))), 128))
+          ])
+        ]),
+        _: 1
+      })) : I("", !0)
     ]));
   }
 });
 export {
-  E as default
+  ie as default
 };

package/dist/data-provider-interface/composables/useDpiStepper.js

@@ -2,8 +2,8 @@ import { useStepper as G } from "@vueuse/core";
 import { ref as H, computed as i, provide as J } from "vue";
 import { dpiStepperKey as M } from "../utils/injectionKeys.js";
 import O from "../utils/useSteps.js";
-function X() {
-  const { steps: p, activeStep: o, stepPlugin: y, visitedSteps: B, subSteps: h, triggerValidation: u, triggerValidationCurrentStep: n } = O(), s = H([]), e = G(s, o.value), r = () => {
+function Y(Q) {
+  const { steps: p, activeStep: o, stepPlugin: y, visitedSteps: B, subSteps: h, triggerValidation: n, triggerValidationCurrentStep: u } = O(), s = H([]), e = G(s, o.value), r = () => {
     e.current.value && e.current.value !== o.value && (o.value = e.current.value);
   }, c = (t) => {
     s.value.includes(t) || (s.value.push(t), s.value.length === 1 && !o.value && (o.value = t, e.goTo(t)));
@@ -50,8 +50,8 @@ function X() {
     isCurrent: x,
     isBefore: d,
     isAfter: m,
-    triggerValidation: u,
-    triggerValidationCurrentStep: n,
+    triggerValidation: n,
+    triggerValidationCurrentStep: u,
     isLast: g
   }), {
     // Original API for backward compatibility (form validation steps)
@@ -69,8 +69,8 @@ function X() {
     goToPreviousStep: a,
     goToStep: A,
     goToStepByIndex: C,
-    triggerValidation: u,
-    triggerValidationCurrentStep: n,
+    triggerValidation: n,
+    triggerValidationCurrentStep: u,
     // Extended useStepper utilities
     stepperSteps: V,
     stepNames: b,
@@ -94,5 +94,5 @@ function X() {
   };
 }
 export {
-  X as useDpiStepper
+  Y as useDpiStepper
 };