@piveau/dpi 0.1.0-twinby.0 → 0.2.0-alpha.1

package/dist/stories/components/DemoStep.vue.js

@@ -1,27 +1,28 @@
 import { ref as p, watch as $, createElementBlock as r, openBlock as i, createElementVNode as l, createVNode as n, unref as a, withCtx as m, Fragment as g, renderList as _, createBlock as U, createCommentVNode as F, withDirectives as w, vModelCheckbox as D, vShow as L } from "vue";
 import { FormKit as o } from "@formkit/vue";
+import T from "../../data-provider-interface/components/StepActionsSection.vue.js";
 import V from "../../data-provider-interface/HappyFlowComponents/ui/Autocomplete/AutocompleteInputDefinition.js";
 import h from "../../data-provider-interface/HappyFlowComponents/ui/ButtonV3.vue.js";
 import E from "../../data-provider-interface/HappyFlowComponents/ui/Chip.vue.js";
-import T from "../../data-provider-interface/HappyFlowComponents/ui/DpiModalBase.vue.js";
-import H from "../../data-provider-interface/HappyFlowComponents/ui/InputField.vue.js";
+import H from "../../data-provider-interface/HappyFlowComponents/ui/DpiModalBase.vue.js";
+import M from "../../data-provider-interface/HappyFlowComponents/ui/InputField.vue.js";
 import I from "../../data-provider-interface/HappyFlowComponents/ui/InputField/InputFieldDefinition.js";
-import M from "../../data-provider-interface/HappyFlowComponents/ui/ListBox/Listbox.vue.js";
+import j from "../../data-provider-interface/HappyFlowComponents/ui/ListBox/Listbox.vue.js";
 import P from "./PartnerCard.vue.js";
 /* empty css              */
-import j from "../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "dpiV3_page V3-typography" }, A = {
+import A from "../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "dpiV3_page V3-typography" }, R = {
   id: "partners-section",
   class: "funny-section"
-}, R = { class: "partner-cards-container" }, K = { class: "action-container" }, W = { class: "funny-section" }, q = { class: "start-and-end" }, G = { class: "funny-section" }, J = {
+}, K = { class: "partner-cards-container" }, W = { class: "action-container" }, q = { class: "funny-section" }, G = { class: "start-and-end" }, J = { class: "funny-section" }, Q = {
   key: 0,
   class: "d-flex"
-}, Q = ["id", "value"], X = ["for"], Y = { class: "funny-section" }, Z = {
+}, X = ["id", "value"], Y = ["for"], Z = { class: "funny-section" }, ee = {
   key: 0,
   class: "d-flex"
-}, ee = ["id", "value"], te = ["for"], le = { class: "funny-section" }, ne = { class: "autocomplete-inputs-demo" }, ae = { class: "partner-cards-container" }, oe = { class: "action-container" }, ie = {
+}, te = ["id", "value"], le = ["for"], ne = { class: "funny-section" }, ae = { class: "autocomplete-inputs-demo" }, oe = { class: "partner-cards-container" }, ie = { class: "action-container" }, se = { class: "funny-section" }, re = {
   __name: "DemoStep",
-  setup(se) {
+  setup(ue) {
     const b = p([{}]), z = p([
       { id: "option-1", name: "Option 1" },
       { id: "option-2", name: "Option 2" },
@@ -43,10 +44,10 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
         l("h4", null, " Fügen Sie optionale Daten hinzu "),
         l("span", { class: "copy-large-regular" }, "Für viele Projekte sind weitere Informationen vorhanden und für lesende Personen hilfreich. Fügen Sie hier bei Bedarf weitere Informationen hinzu.")
       ], -1)),
-      l("section", A, [
+      l("section", R, [
         e[11] || (e[11] = l("h5", null, " Partner ", -1)),
         e[12] || (e[12] = l("span", { class: "copy-large-regular" }, "Wenn Sie mit einem oder mehreren Partnern zusammengearbeitet haben, können Sie diese hier angeben.", -1)),
-        l("div", R, [
+        l("div", K, [
           n(a(o), {
             modelValue: b.value,
             "onUpdate:modelValue": e[0] || (e[0] = (t) => b.value = t),
@@ -75,7 +76,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
                 ]),
                 _: 2
               }, 1032, ["index"]))), 128)),
-              l("div", K, [
+              l("div", W, [
                 n(h, {
                   "button-text": "Partner hinzufügen",
                   size: "small",
@@ -89,10 +90,10 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           }, 8, ["modelValue"])
         ])
       ]),
-      l("section", W, [
+      l("section", q, [
         e[13] || (e[13] = l("h5", null, " Projektzeitraum ", -1)),
         e[14] || (e[14] = l("span", { class: "copy-large-regular" }, "Für Projekte, die noch nicht abgeschlossen sind, können Sie das Enddatum frei lassen.", -1)),
-        l("div", q, [
+        l("div", G, [
           n(a(o), {
             type: a(I),
             name: "startDate",
@@ -121,7 +122,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           }, null, 8, ["type"])
         ])
       ]),
-      l("section", G, [
+      l("section", J, [
         e[15] || (e[15] = l("h5", null, "Lorem Ipsum", -1)),
         e[16] || (e[16] = l("div", null, "Funktionalitäten auswählen ", -1)),
         n(a(o), {
@@ -130,7 +131,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           type: "hidden",
           name: "demoSelectChecked"
         }, null, 8, ["modelValue"]),
-        x.value ? (i(), r("div", J, [
+        x.value ? (i(), r("div", Q, [
           (i(!0), r(g, null, _(z.value, (t) => (i(), r("div", {
             key: t.id,
             class: "label-chip"
@@ -141,7 +142,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
               class: "label-chip__input",
               type: "checkbox",
               value: t.id
-            }, null, 8, Q), [
+            }, null, 8, X), [
               [D, c.value]
             ]),
             w(l("label", {
@@ -160,12 +161,12 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
                   "@inTable": !1
                 }
               }, null, 8, ["text", "data"])
-            ], 8, X), [
+            ], 8, Y), [
               [L, c.value.includes(t.id)]
             ])
           ]))), 128))
         ])) : F("", !0),
-        n(M, {
+        n(j, {
           modelValue: x.value,
           "onUpdate:modelValue": e[3] || (e[3] = (t) => x.value = t),
           options: z.value,
@@ -173,7 +174,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           name: "demo-select"
         }, null, 8, ["modelValue", "options"])
       ]),
-      l("section", Y, [
+      l("section", Z, [
         e[17] || (e[17] = l("h5", null, "Hardware", -1)),
         e[18] || (e[18] = l("div", null, "Funktionalitäten nennen", -1)),
         n(a(o), {
@@ -182,7 +183,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           type: "hidden",
           name: "hardwareChecked"
         }, null, 8, ["modelValue"]),
-        u.value.length > 0 ? (i(), r("div", Z, [
+        u.value.length > 0 ? (i(), r("div", ee, [
           (i(!0), r(g, null, _(u.value, (t) => (i(), r("div", {
             key: t,
             class: "label-chip"
@@ -193,7 +194,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
               class: "label-chip__input",
               type: "checkbox",
               value: t
-            }, null, 8, ee), [
+            }, null, 8, te), [
               [D, u.value]
             ]),
             l("label", {
@@ -213,10 +214,10 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
                   "@inTable": !1
                 }
               }, null, 8, ["text", "data"])
-            ], 8, te)
+            ], 8, le)
           ]))), 128))
         ])) : F("", !0),
-        n(H, {
+        n(M, {
           modelValue: k.value,
           "onUpdate:modelValue": e[6] || (e[6] = (t) => k.value = t),
           label: "Hardware",
@@ -237,9 +238,9 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           onClick: e[7] || (e[7] = (t) => B(k.value))
         })
       ]),
-      l("section", le, [
+      l("section", ne, [
         e[19] || (e[19] = l("h5", null, "Autocomplete Demo", -1)),
-        l("div", ne, [
+        l("div", ae, [
           n(a(o), {
             type: a(V),
             name: "category",
@@ -273,12 +274,12 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
       l("button", {
         onClick: e[8] || (e[8] = (t) => C.value = !0)
       }, " Open Modal "),
-      n(T, {
+      n(H, {
         modelValue: C.value,
         "onUpdate:modelValue": e[10] || (e[10] = (t) => C.value = t)
       }, {
         default: m(() => [
-          l("div", ae, [
+          l("div", oe, [
             n(a(o), {
               modelValue: b.value,
               "onUpdate:modelValue": e[9] || (e[9] = (t) => b.value = t),
@@ -307,7 +308,7 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
                   ]),
                   _: 2
                 }, 1032, ["index"]))), 128)),
-                l("div", oe, [
+                l("div", ie, [
                   n(h, {
                     "button-text": "Partner hinzufügen",
                     size: "small",
@@ -322,10 +323,13 @@ const N = { class: "dpiV3_page V3-typography" }, A = {
           ])
         ]),
         _: 1
-      }, 8, ["modelValue"])
+      }, 8, ["modelValue"]),
+      l("section", se, [
+        n(T, { class: "dev-actions" })
+      ])
     ]));
   }
-}, ke = /* @__PURE__ */ j(ie, [["__scopeId", "data-v-7f00c63a"]]);
+}, Ve = /* @__PURE__ */ A(re, [["__scopeId", "data-v-4d6b6939"]]);
 export {
-  ke as default
+  Ve as default
 };

package/dist/stories/components/DemoStepper.vue.js

@@ -1,7 +1,7 @@
 import o from "./DemoStepper.vue2.js";
 /* empty css                 */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-10b457be"]]);
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-04b8afcf"]]);
 export {
-  m as default
+  f as default
 };

package/dist/stories/components/DemoStepper.vue2.js

@@ -1,97 +1,135 @@
-import { defineComponent as O, ref as f, toRef as T, computed as b, watch as j, createElementBlock as E, openBlock as y, createElementVNode as s, createVNode as t, toDisplayString as U, unref as r, isRef as k, withCtx as i, createBlock as q, createCommentVNode as J, nextTick as K } from "vue";
+import { defineComponent as L, ref as p, toRef as $, computed as f, watch as q, createElementBlock as H, openBlock as k, createElementVNode as a, createVNode as t, toDisplayString as J, unref as i, isRef as C, withCtx as l, createBlock as K, createCommentVNode as M, createTextVNode as A, nextTick as G } from "vue";
 import { FormKit as d } from "@formkit/vue";
-import l from "../../data-provider-interface/components/InputPageStep.vue.js";
-import L from "../../data-provider-interface/components/ProgressSteps.vue.js";
-import { useDpiStepper as $ } from "../../data-provider-interface/composables/useDpiStepper.js";
-import A from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectNameStep.vue.js";
-import H from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectOrganisationStep.vue.js";
-import V from "../../data-provider-interface/HappyFlowComponents/ui/ButtonV3.vue.js";
-import I from "./DemoStep.vue.js";
-import M from "./ReviewStepDemo.vue.js";
-const z = { class: "demo-stepper" }, G = { style: { "margin-bottom": "1rem", padding: "1rem", background: "#f5f5f5", "border-radius": "8px" } }, Q = { class: "dev-actions" }, ae = /* @__PURE__ */ O({
+import r from "../../data-provider-interface/components/InputPageStep.vue.js";
+import I from "../../data-provider-interface/components/ProgressSteps.vue.js";
+import { useDpiStepper as z } from "../../data-provider-interface/composables/useDpiStepper.js";
+import Q from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectDescriptionStep.vue.js";
+import W from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectNameStep.vue.js";
+import X from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectOrganisationStep.vue.js";
+import y from "../../data-provider-interface/HappyFlowComponents/ui/ButtonV3.vue.js";
+import Y from "../../data-provider-interface/HappyFlowComponents/ui/Card.vue.js";
+import Z from "../../data-provider-interface/HappyFlowComponents/ui/DpiModalBase.vue.js";
+import ee from "../../data-provider-interface/HappyFlowComponents/ui/Findability/DiscoverabilityStep.vue.js";
+import te from "../../data-provider-interface/HappyFlowComponents/ui/ListBox/Listbox.vue.js";
+import _ from "./DemoStep.vue.js";
+import ne from "./ReviewStepDemo.vue.js";
+const oe = { class: "demo-stepper" }, le = { style: { "margin-bottom": "1rem", padding: "1rem", background: "#f5f5f5", "border-radius": "8px" } }, ie = { style: { display: "flex", "flex-direction": "column", gap: "2.5rem" } }, re = { class: "dev-actions" }, Ce = /* @__PURE__ */ L({
   __name: "DemoStepper",
-  setup(W) {
-    const a = f({}), {
-      steps: x,
-      stepList: c,
+  setup(ae) {
+    const s = p({}), {
+      steps: w,
+      stepList: v,
       visitedSteps: m,
-      stepPlugin: _,
-      goToNextStep: h,
-      goToPreviousStep: w,
+      stepPlugin: N,
+      goToNextStep: D,
+      goToPreviousStep: P,
       current: u,
-      isLast: C,
-      triggerValidationCurrentStep: N
-    } = $(), D = T(x);
-    function P(n) {
+      isLast: O,
+      triggerValidationCurrentStep: R,
+      goToStep: T
+    } = z(), B = $(w);
+    function U(n) {
       var o;
-      const e = (o = D.value) == null ? void 0 : o[n];
+      const e = (o = B.value) == null ? void 0 : o[n];
       return e ? e.valid : !1;
     }
-    const v = b(() => {
+    const S = f(() => {
       const n = {};
-      return c.value.forEach((e) => {
-        const p = e.split("/")[0];
-        n[p] || (n[p] = []), n[p].push(e);
+      return v.value.forEach((e) => {
+        const g = e.split("/")[0];
+        n[g] || (n[g] = []), n[g].push(e);
       }), n;
     });
-    function R(n) {
-      const e = v.value[n] || [];
+    function j(n) {
+      const e = S.value[n] || [];
       return e.length > 0 && e.every((o) => m.value.includes(o));
     }
-    b(() => Object.keys(v.value).filter((n) => R(n)));
-    function B() {
-      P(u.value) && h();
+    f(() => Object.keys(S.value).filter((n) => j(n)));
+    function F() {
+      U(u.value) && D();
     }
-    async function F() {
-      N(), await K(), C.value ? (console.log("Form submitted", a.value), window.alert(`Form submitted: ${JSON.stringify(a.value)}`)) : B();
+    async function h() {
+      R(), await G(), O.value ? (console.log("Form submitted", s.value), window.alert(`Form submitted: ${JSON.stringify(s.value)}`)) : F();
     }
-    const g = f(!1), S = f(0);
-    return j(u, (n) => {
-      n === "review" && (g.value = !0, S.value++);
-    }), (n, e) => (y(), E("div", z, [
-      s("div", G, [
-        e[3] || (e[3] = s("strong", null, "Form Values:", -1)),
-        s("pre", null, U(JSON.stringify(a.value, null, 2)), 1)
+    const b = p(!1), V = p(0);
+    q(u, (n) => {
+      n === "review" && (b.value = !0, V.value++);
+    });
+    const c = p(!1), E = f(() => v.value.map((n) => ({ id: n, name: n }))), x = f({
+      get() {
+        return { id: u.value, name: u.value };
+      },
+      set(n) {
+        T(n.id);
+      }
+    });
+    return (n, e) => (k(), H("div", oe, [
+      a("div", le, [
+        e[6] || (e[6] = a("strong", null, "Form Values:", -1)),
+        a("pre", null, J(JSON.stringify(s.value, null, 2)), 1)
       ]),
-      t(L, {
-        checked: r(m),
-        "onUpdate:checked": e[0] || (e[0] = (o) => k(m) ? m.value = o : null),
-        current: r(u),
-        "onUpdate:current": e[1] || (e[1] = (o) => k(u) ? u.value = o : null),
-        steps: r(c) || []
+      t(I, {
+        checked: i(m),
+        "onUpdate:checked": e[0] || (e[0] = (o) => C(m) ? m.value = o : null),
+        current: i(u),
+        "onUpdate:current": e[1] || (e[1] = (o) => C(u) ? u.value = o : null),
+        steps: i(v) || []
       }, null, 8, ["checked", "current", "steps"]),
-      t(r(d), {
+      t(i(d), {
         id: "demo-stepper",
-        modelValue: a.value,
-        "onUpdate:modelValue": e[2] || (e[2] = (o) => a.value = o),
+        modelValue: s.value,
+        "onUpdate:modelValue": e[3] || (e[3] = (o) => s.value = o),
         type: "form",
-        plugins: [r(_)],
+        plugins: [i(N)],
         actions: !1,
         onSubmit: () => {
         }
       }, {
-        default: i(() => [
-          t(l, { name: "auffindbarkeit" }, {
-            default: i(() => [
-              t(I)
+        default: l(() => [
+          t(r, { name: "auffindbarkeit" }, {
+            default: l(() => [
+              t(_),
+              t(Z, {
+                modelValue: c.value,
+                "onUpdate:modelValue": e[2] || (e[2] = (o) => c.value = o)
+              }, {
+                default: l(() => [
+                  a("div", null, [
+                    t(_)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
             ]),
             _: 1
           }),
-          t(l, { name: "grundlegende-informationen/name" }, {
-            default: i(() => [
-              t(A)
+          t(r, { name: "findability/visibility" }, {
+            default: l(() => [
+              t(ee)
             ]),
             _: 1
           }),
-          t(l, { name: "grundlegende-informationen/organisation" }, {
-            default: i(() => [
-              t(H)
+          t(r, { name: "grundlegende-informationen/name" }, {
+            default: l(() => [
+              t(W)
             ]),
             _: 1
           }),
-          t(l, { name: "grundlegende-informationen/discoverability" }, {
-            default: i(() => [
-              t(r(d), {
+          t(r, { name: "grundlegende-informationen/description" }, {
+            default: l(() => [
+              t(Q)
+            ]),
+            _: 1
+          }),
+          t(r, { name: "grundlegende-informationen/organisation" }, {
+            default: l(() => [
+              t(X)
+            ]),
+            _: 1
+          }),
+          t(r, { name: "grundlegende-informationen/discoverability" }, {
+            default: l(() => [
+              t(i(d), {
                 type: "text",
                 label: "Name",
                 name: "name",
@@ -100,15 +138,15 @@ const z = { class: "demo-stepper" }, G = { style: { "margin-bottom": "1rem", pad
             ]),
             _: 1
           }),
-          t(l, { name: "grundlegende-informationen/essentials" }, {
-            default: i(() => [
-              t(r(d), {
+          t(r, { name: "grundlegende-informationen/essentials" }, {
+            default: l(() => [
+              t(i(d), {
                 type: "text",
                 label: "Mail",
                 name: "mail",
                 validation: "required|email"
               }),
-              t(r(d), {
+              t(i(d), {
                 type: "text",
                 label: "Homepage",
                 name: "homepage",
@@ -117,9 +155,9 @@ const z = { class: "demo-stepper" }, G = { style: { "margin-bottom": "1rem", pad
             ]),
             _: 1
           }),
-          t(l, { name: "optinale-daten" }, {
-            default: i(() => [
-              t(r(d), {
+          t(r, { name: "optinale-daten" }, {
+            default: l(() => [
+              t(i(d), {
                 type: "textarea",
                 label: "Description",
                 name: "description"
@@ -127,34 +165,60 @@ const z = { class: "demo-stepper" }, G = { style: { "margin-bottom": "1rem", pad
             ]),
             _: 1
           }),
-          t(l, { name: "review" }, {
-            default: i(() => [
-              g.value ? (y(), q(M, {
-                key: S.value,
-                values: a.value
-              }, null, 8, ["values"])) : J("", !0)
+          t(r, { name: "review" }, {
+            default: l(() => [
+              b.value ? (k(), K(ne, {
+                key: V.value,
+                values: s.value
+              }, null, 8, ["values"])) : M("", !0)
             ]),
             _: 1
           })
         ]),
         _: 1
       }, 8, ["modelValue", "plugins"]),
-      e[4] || (e[4] = s("hr", null, null, -1)),
-      s("div", Q, [
-        t(V, {
-          type: "button",
-          "button-text": "Previous",
-          onClick: r(w)
-        }, null, 8, ["onClick"]),
-        t(V, {
-          type: "button",
-          "button-text": "Next",
-          onClick: F
-        })
-      ])
+      e[8] || (e[8] = a("hr", null, null, -1)),
+      t(Y, null, {
+        title: l(() => e[7] || (e[7] = [
+          A(" dev view ", -1)
+        ])),
+        default: l(() => [
+          a("div", ie, [
+            a("div", re, [
+              t(y, {
+                type: "button",
+                variant: "secondary",
+                "button-text": "Open Hologram",
+                onClick: e[4] || (e[4] = (o) => c.value = !0)
+              }),
+              t(y, {
+                type: "button",
+                variant: "secondary",
+                "button-text": "Previous",
+                onClick: i(P)
+              }, null, 8, ["onClick"]),
+              t(y, {
+                type: "button",
+                variant: "secondary",
+                "button-text": "Next",
+                onClick: h
+              })
+            ]),
+            a("div", null, [
+              t(te, {
+                modelValue: x.value,
+                "onUpdate:modelValue": e[5] || (e[5] = (o) => x.value = o),
+                label: "Go to step",
+                options: E.value
+              }, null, 8, ["modelValue", "options"])
+            ])
+          ])
+        ]),
+        _: 1
+      })
     ]));
   }
 });
 export {
-  ae as default
+  Ce as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@piveau/dpi",
   "type": "module",
-  "version": "0.1.0-twinby.0",
+  "version": "0.2.0-alpha.1",
   "private": false,
   "sideEffects": [
     "*.css"
@@ -41,6 +41,8 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.19.0",
+    "@fontsource-variable/inter": "^5.2.6",
+    "@fontsource/inter": "^5.2.6",
     "@formkit/core": "^1.6.9",
     "@formkit/themes": "^1.6.9",
     "@formkit/utils": "^1.6.9",