@piveau/dpi 0.2.0-alpha.6 → 0.2.0-alpha.7

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

@@ -0,0 +1,4 @@
+import f from "./ReviewStep.vue.js";
+export {
+  f as default
+};

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 a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-74ea6547"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4b1aabda"]]);
 export {
-  a as default
+  c as default
 };

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

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

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

@@ -0,0 +1,7 @@
+import o from "./TheCancelConfirmationDialog.vue2.js";
+/* empty css                                 */
+import a from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const i = /* @__PURE__ */ a(o, [["__scopeId", "data-v-f89364fa"]]);
+export {
+  i as default
+};

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

@@ -0,0 +1,42 @@
+import { defineComponent as u, mergeModels as s, useModel as p, createBlock as f, openBlock as v, withCtx as t, createElementVNode as i, createVNode as a } from "vue";
+import r from "../HappyFlowComponents/ui/ButtonV3.vue.js";
+import V from "../HappyFlowComponents/ui/DpiModalBase.vue.js";
+const k = /* @__PURE__ */ u({
+  __name: "TheCancelConfirmationDialog",
+  props: {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  },
+  emits: /* @__PURE__ */ s(["closeWithoutSaving", "closeWithSaving"], ["update:modelValue"]),
+  setup(m, { emit: d }) {
+    const l = d, n = p(m, "modelValue");
+    return (C, e) => (v(), f(V, {
+      modelValue: n.value,
+      "onUpdate:modelValue": e[2] || (e[2] = (o) => n.value = o)
+    }, {
+      header: t(() => e[3] || (e[3] = [
+        i("h4", null, "Title", -1)
+      ])),
+      footer: t(() => [
+        a(r, {
+          "button-text": "Cancel",
+          variant: "secondary",
+          onClick: e[0] || (e[0] = (o) => l("closeWithoutSaving"))
+        }),
+        a(r, {
+          "button-text": "Confirm",
+          variant: "primary",
+          onClick: e[1] || (e[1] = (o) => l("closeWithSaving"))
+        })
+      ]),
+      default: t(() => [
+        e[4] || (e[4] = i("div", null, " body ", -1))
+      ]),
+      _: 1,
+      __: [4]
+    }, 8, ["modelValue"]));
+  }
+});
+export {
+  k as default
+};

package/dist/packages/dpi/src/data-provider-interface/components/dev-tools/ProjectDpiDevTools.vue.js

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

package/dist/packages/dpi/src/data-provider-interface/components/dev-tools/ProjectDpiDevTools.vue2.js

@@ -0,0 +1,249 @@
+import { defineComponent as T, useModel as V, ref as f, createBlock as _, openBlock as v, withCtx as o, createElementVNode as n, createVNode as t, unref as l, createTextVNode as y, createElementBlock as N } from "vue";
+import { TabGroup as w, TabList as E, Tab as g, TabPanels as A, TabPanel as O } from "@headlessui/vue";
+import { PhStar as F, PhFloppyDisk as x } from "@phosphor-icons/vue";
+import { useStorage as B } from "@vueuse/core";
+import { decodeProject as M } from "../../composables/project-transformer/decodeProject.js";
+import { encodeProject as G } from "../../composables/project-transformer/encodeProject.js";
+import { useFormValues as z } from "../../composables/useDpiFormValues.js";
+import u from "../../HappyFlowComponents/ui/ButtonV3.vue.js";
+import b from "../../HappyFlowComponents/ui/Card.vue.js";
+import I from "../../HappyFlowComponents/ui/DpiModalBase.vue.js";
+import U from "../../HappyFlowComponents/ui/ListBox/Listbox.vue.js";
+import H from "../../HappyFlowComponents/ui/TextAreaV3.vue.js";
+import { fullProject as K } from "./fixtures.js";
+const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-actions" }, Q = {
+  key: 0,
+  class: "hurry-flurry"
+}, W = {
+  key: 1,
+  class: "hurry-flurry-empty"
+}, X = { class: "hurry" }, Z = { class: "hurry-actions" }, $ = "dpi:project:snapshots", me = /* @__PURE__ */ T({
+  __name: "ProjectDpiDevTools",
+  props: {
+    modelValue: { type: Boolean },
+    modelModifiers: {},
+    nonce: {
+      default: 0
+    },
+    nonceModifiers: {}
+  },
+  emits: ["update:modelValue", "update:nonce"],
+  setup(h) {
+    const S = V(h, "modelValue"), m = V(h, "nonce"), { formValues: p } = z(), c = f(""), i = f("");
+    function k() {
+      m.value++, p.value = K.formValuesFn();
+    }
+    const d = B($, []), s = f("");
+    function C(a) {
+      return new Date(a).toLocaleString();
+    }
+    function J() {
+      const a = Date.now(), e = {
+        id: String(a),
+        name: C(a),
+        createdAt: a,
+        // ensure we store a plain JSON object without references
+        data: JSON.parse(JSON.stringify(p.value))
+      };
+      d.value = [...d.value, e], s.value = e;
+    }
+    function L() {
+      !s.value || typeof s.value == "string" || (m.value++, p.value = JSON.parse(JSON.stringify(s.value.data)));
+    }
+    async function D() {
+      i.value = "";
+      try {
+        const a = JSON.parse(c.value), e = await M(a);
+        m.value++, p.value = JSON.parse(JSON.stringify(e));
+      } catch (a) {
+        i.value = a instanceof Error ? a.message : "Failed to load JSON-LD";
+      }
+    }
+    async function P() {
+      i.value = "";
+      try {
+        const a = G(p.value), e = JSON.stringify(a, null, 2);
+        c.value = e;
+      } catch (a) {
+        i.value = a instanceof Error ? a.message : "Failed to encode project";
+      }
+    }
+    function j() {
+      d.value = [], s.value = "";
+    }
+    return (a, e) => (v(), _(I, {
+      modelValue: S.value,
+      "onUpdate:modelValue": e[2] || (e[2] = (r) => S.value = r)
+    }, {
+      header: o(() => e[3] || (e[3] = [
+        n("h4", null, "DPI Tools for Devs", -1)
+      ])),
+      default: o(() => [
+        n("div", R, [
+          t(l(w), null, {
+            default: o(() => [
+              t(l(E), { class: "tab-list" }, {
+                default: o(() => [
+                  t(l(g), { as: "template" }, {
+                    default: o(({ selected: r }) => [
+                      t(u, {
+                        variant: r ? "secondary" : "tertiary",
+                        "button-text": "Form"
+                      }, null, 8, ["variant"])
+                    ]),
+                    _: 1
+                  }),
+                  t(l(g), { as: "template" }, {
+                    default: o(({ selected: r }) => [
+                      t(u, {
+                        variant: r ? "secondary" : "tertiary",
+                        "button-text": "Edit Mode"
+                      }, null, 8, ["variant"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t(l(A), { class: "tab-panels" }, {
+                default: o(() => [
+                  t(l(O), null, {
+                    default: o(() => [
+                      e[9] || (e[9] = n("p", null, "Manage current state of the form data model", -1)),
+                      t(b, null, {
+                        title: o(() => e[4] || (e[4] = [
+                          y(" Presets ", -1)
+                        ])),
+                        icon: o(() => [
+                          t(l(F), {
+                            size: 32,
+                            color: "#009fe3"
+                          })
+                        ]),
+                        default: o(() => [
+                          n("div", null, [
+                            t(u, {
+                              "icon-start": "Check",
+                              "button-text": "Autofill inputs and reload DPI",
+                              variant: "primary",
+                              onClick: k
+                            }),
+                            e[5] || (e[5] = n("p", { class: "mt-3" }, " Preset contains complete form values ", -1))
+                          ])
+                        ]),
+                        _: 1
+                      }),
+                      t(b, { class: "mt-3" }, {
+                        title: o(() => e[6] || (e[6] = [
+                          y(" Snapshots ", -1)
+                        ])),
+                        icon: o(() => [
+                          t(l(x), {
+                            size: 32,
+                            color: "#009fe3"
+                          })
+                        ]),
+                        default: o(() => [
+                          n("div", Y, [
+                            e[8] || (e[8] = n("p", null, " Snapshots are stored locally in your browser ", -1)),
+                            n("div", q, [
+                              t(u, {
+                                class: "mb-3",
+                                "icon-start": "plus",
+                                "button-text": "Save snapshot",
+                                variant: "secondary",
+                                onClick: J
+                              }),
+                              t(u, {
+                                class: "mb-3",
+                                "icon-start": "trash",
+                                "button-text": "Clear all snapshots",
+                                variant: "tertiary",
+                                disabled: !l(d).length,
+                                onClick: j
+                              }, null, 8, ["disabled"])
+                            ]),
+                            l(d).length ? (v(), N("div", Q, [
+                              t(U, {
+                                modelValue: s.value,
+                                "onUpdate:modelValue": e[0] || (e[0] = (r) => s.value = r),
+                                label: "Select snapshot",
+                                placeholder: "Choose a snapshot",
+                                options: l(d)
+                              }, null, 8, ["modelValue", "options"]),
+                              t(u, {
+                                "icon-end": "Check",
+                                "button-text": "Load snapshot",
+                                variant: "tertiary",
+                                disabled: !s.value,
+                                onClick: L
+                              }, null, 8, ["disabled"])
+                            ])) : (v(), N("div", W, e[7] || (e[7] = [
+                              n("span", { class: "copy-small-regular" }, "No snapshots saved", -1)
+                            ])))
+                          ])
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1,
+                    __: [9]
+                  }),
+                  t(l(O), null, {
+                    default: o(() => [
+                      t(b, null, {
+                        title: o(() => e[10] || (e[10] = [
+                          y(" Load from JSON-LD ", -1)
+                        ])),
+                        icon: o(() => [
+                          t(l(x), {
+                            size: 32,
+                            color: "#009fe3"
+                          })
+                        ]),
+                        default: o(() => [
+                          n("div", X, [
+                            t(H, {
+                              modelValue: c.value,
+                              "onUpdate:modelValue": e[1] || (e[1] = (r) => c.value = r),
+                              label: "JSON-LD",
+                              placeholder: "Paste a JSON-LD document here (GraphObject or NodeObject)",
+                              "show-error": !!i.value,
+                              "error-message": i.value
+                            }, null, 8, ["modelValue", "show-error", "error-message"]),
+                            n("div", Z, [
+                              t(u, {
+                                "button-text": "Generate JSON-LD in textarea",
+                                variant: "secondary",
+                                onClick: P
+                              }),
+                              t(u, {
+                                "icon-end": "Check",
+                                "button-text": "Load from json-ld",
+                                variant: "primary",
+                                disabled: !c.value,
+                                onClick: D
+                              }, null, 8, ["disabled"])
+                            ])
+                          ])
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+});
+export {
+  me as default
+};