@piveau/dpi 0.2.0-alpha.2 → 0.2.0-alpha.4

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

@@ -1,13 +1,14 @@
-import { defineComponent as w, mergeModels as B, computed as f, useModel as k, createElementBlock as l, openBlock as i, Fragment as S, renderList as x, withDirectives as c, createElementVNode as s, vModelCheckbox as y, unref as a, normalizeClass as C, toDisplayString as M, vShow as m } from "vue";
+import { defineComponent as O, mergeModels as V, computed as k, useModel as S, createElementBlock as i, openBlock as c, Fragment as y, renderList as x, withDirectives as a, createElementVNode as s, vModelCheckbox as C, unref as d, normalizeClass as M, toDisplayString as F, vShow as h } from "vue";
 import { looseIndexOf as b } from "@vue/shared";
-import D from "../HappyFlowComponents/img/Circle.svg.js";
-import E from "../HappyFlowComponents/img/CircleFill.svg.js";
-const F = { class: "progress-steps" }, U = ["value"], j = { class: "progress-step__headline" }, z = ["src"], I = { class: "progress-step__content" }, L = { class: "progress-step__content-line-container" }, P = { class: "progress-steps progress-steps--substep" }, R = ["value"], q = { class: "progress-step__headline" }, A = ["src"], G = { class: "progress-step__content" }, H = { class: "progress-step__content-line-container" }, W = /* @__PURE__ */ w({
+import B from "../HappyFlowComponents/img/Circle.svg.js";
+import D from "../HappyFlowComponents/img/CircleFill.svg.js";
+const w = { class: "progress-steps" }, U = ["value"], j = { class: "progress-step__headline" }, z = ["src"], I = { class: "progress-step__content" }, L = { class: "progress-step__content-line-container" }, P = { class: "progress-steps progress-steps--substep" }, R = ["value"], q = { class: "progress-step__headline" }, A = ["src"], G = { class: "progress-step__content" }, H = { class: "progress-step__content-line-container" }, W = /* @__PURE__ */ O({
   __name: "ProgressSteps",
-  props: /* @__PURE__ */ B({
+  props: /* @__PURE__ */ V({
     steps: {},
     currentStep: {},
-    visitedSteps: { default: () => [] }
+    visitedSteps: { default: () => [] },
+    hideFirst: { type: Boolean, default: !1 }
   }, {
     checked: {
       default: () => []
@@ -19,89 +20,89 @@ const F = { class: "progress-steps" }, U = ["value"], j = { class: "progress-ste
     currentModifiers: {}
   }),
   emits: ["update:checked", "update:current"],
-  setup(p) {
-    const v = p, h = f(() => {
-      const n = {};
-      return v.steps.forEach((e) => {
-        const t = e.includes("/") ? e.split("/")[0] : e;
-        n[t] || (n[t] = []), n[t].push(e);
-      }), Object.entries(n).map(([e, t]) => ({ name: e, substeps: t }));
+  setup(u) {
+    const p = u, g = k(() => {
+      const t = {};
+      return (p.hideFirst ? p.steps.slice(1) : p.steps).forEach((e) => {
+        const o = e.includes("/") ? e.split("/")[0] : e;
+        t[o] || (t[o] = []), t[o].push(e);
+      }), Object.entries(t).map(([e, o]) => ({ name: e, substeps: o }));
     });
-    function N(n) {
-      return n.includes("/") ? n.split("/")[1] : n;
+    function E(t) {
+      return t.includes("/") ? t.split("/")[1] : t;
     }
-    function g(n) {
-      return !n.includes("/");
+    function f(t) {
+      return !t.includes("/");
     }
-    const o = k(p, "checked");
-    function d(n) {
-      return b(o.value, n) !== -1;
+    const l = S(u, "checked");
+    function _(t) {
+      return b(l.value, t) !== -1;
     }
-    const u = k(p, "current");
-    return f(() => b(v.steps, u.value)), (n, e) => (i(), l("div", F, [
-      (i(!0), l(S, null, x(h.value, (t, O) => (i(), l("div", {
-        key: t.name,
+    const m = S(u, "current");
+    return k(() => b(p.steps, m.value)), (t, n) => (c(), i("div", w, [
+      (c(!0), i(y, null, x(g.value, (e, o) => (c(), i("div", {
+        key: e.name,
         class: "progress-step"
       }, [
-        c(s("input", {
-          "onUpdate:modelValue": e[0] || (e[0] = (r) => o.value = r),
+        a(s("input", {
+          "onUpdate:modelValue": n[0] || (n[0] = (r) => l.value = r),
           name: "progress-step",
           type: "checkbox",
           class: "progress-input",
-          value: t.name
+          value: e.name
         }, null, 8, U), [
-          [y, o.value]
+          [C, l.value]
         ]),
         s("div", j, [
           s("img", {
-            src: d(t.name) ? a(E) : a(D),
+            src: _(e.name) ? d(D) : d(B),
             class: "progress-step__headline__icon",
             alt: ""
           }, null, 8, z),
           s("span", {
-            class: C({ "progress-step__headline__span--checked": u.value === t.name })
-          }, M(t.name), 3)
+            class: M({ "progress-step__headline__span--checked": m.value === e.name })
+          }, F(e.name), 3)
         ]),
         s("div", I, [
-          c(s("div", L, e[2] || (e[2] = [
+          a(s("div", L, n[2] || (n[2] = [
             s("div", { class: "progress-step__content-line" }, null, -1)
           ]), 512), [
-            [m, O < h.value.length - 1]
+            [h, o < g.value.length - 1]
           ]),
-          c(s("div", P, [
-            (i(!0), l(S, null, x(t.substeps.filter((r) => !g(r)), (r, V) => (i(), l("div", {
+          a(s("div", P, [
+            (c(!0), i(y, null, x(e.substeps.filter((r) => !f(r)), (r, N) => (c(), i("div", {
               key: r,
               class: "progress-step"
             }, [
-              c(s("input", {
-                "onUpdate:modelValue": e[1] || (e[1] = (_) => o.value = _),
+              a(s("input", {
+                "onUpdate:modelValue": n[1] || (n[1] = (v) => l.value = v),
                 name: "progress-step",
                 type: "checkbox",
                 class: "progress-input",
                 value: r
               }, null, 8, R), [
-                [y, o.value]
+                [C, l.value]
               ]),
               s("div", q, [
                 s("img", {
-                  src: d(r) ? a(E) : a(D),
+                  src: _(r) ? d(D) : d(B),
                   class: "progress-step__headline__icon",
                   alt: ""
                 }, null, 8, A),
                 s("span", {
-                  class: C({ "progress-step__headline__span--checked": u.value === r })
-                }, M(N(r)), 3)
+                  class: M({ "progress-step__headline__span--checked": m.value === r })
+                }, F(E(r)), 3)
               ]),
               s("div", G, [
-                c(s("div", H, e[3] || (e[3] = [
+                a(s("div", H, n[3] || (n[3] = [
                   s("div", { class: "progress-step__content-line" }, null, -1)
                 ]), 512), [
-                  [m, V < t.substeps.filter((_) => !g(_)).length - 1]
+                  [h, N < e.substeps.filter((v) => !f(v)).length - 1]
                 ])
               ])
             ]))), 128))
           ], 512), [
-            [m, !d(t.name)]
+            [h, !_(e.name)]
           ])
         ])
       ]))), 128))

package/dist/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 a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8eb9e37a"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-25697b7a"]]);
 export {
-  a as default
+  c as default
 };

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
 };