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

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-0c28ca05"]]);
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-04b8afcf"]]);
 export {
-  m as default
+  f as default
 };

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

@@ -1,104 +1,135 @@
-import { defineComponent as F, ref as f, toRef as O, computed as b, watch as T, createElementBlock as E, openBlock as y, createElementVNode as s, createVNode as e, toDisplayString as U, unref as r, isRef as k, withCtx as i, createBlock as q, createCommentVNode as J, nextTick as K } from "vue";
-import { FormKit as p } 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/ProjectDescriptionStep.vue.js";
-import H from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectNameStep.vue.js";
-import I from "../../data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectOrganisationStep.vue.js";
-import V from "../../data-provider-interface/HappyFlowComponents/ui/ButtonV3.vue.js";
-import M from "./DemoStep.vue.js";
-import z from "./ReviewStepDemo.vue.js";
-const G = { class: "demo-stepper" }, Q = { style: { "margin-bottom": "1rem", padding: "1rem", background: "#f5f5f5", "border-radius": "8px" } }, W = { class: "dev-actions" }, se = /* @__PURE__ */ F({
+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 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(X) {
-    const a = f({}), {
-      steps: _,
-      stepList: c,
-      visitedSteps: d,
-      stepPlugin: x,
-      goToNextStep: h,
-      goToPreviousStep: w,
+  setup(ae) {
+    const s = p({}), {
+      steps: w,
+      stepList: v,
+      visitedSteps: m,
+      stepPlugin: N,
+      goToNextStep: D,
+      goToPreviousStep: P,
       current: u,
-      isLast: C,
-      triggerValidationCurrentStep: N
-    } = $(), D = O(_);
-    function P(n) {
+      isLast: O,
+      triggerValidationCurrentStep: R,
+      goToStep: T
+    } = z(), B = $(w);
+    function U(n) {
       var o;
-      const t = (o = D.value) == null ? void 0 : o[n];
-      return t ? t.valid : !1;
+      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((t) => {
-        const m = t.split("/")[0];
-        n[m] || (n[m] = []), n[m].push(t);
+      return v.value.forEach((e) => {
+        const g = e.split("/")[0];
+        n[g] || (n[g] = []), n[g].push(e);
       }), n;
     });
-    function R(n) {
-      const t = v.value[n] || [];
-      return t.length > 0 && t.every((o) => d.value.includes(o));
+    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 j() {
-      P(u.value) && h();
+    f(() => Object.keys(S.value).filter((n) => j(n)));
+    function F() {
+      U(u.value) && D();
     }
-    async function B() {
-      N(), await K(), C.value ? (console.log("Form submitted", a.value), window.alert(`Form submitted: ${JSON.stringify(a.value)}`)) : j();
+    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 T(u, (n) => {
-      n === "review" && (g.value = !0, S.value++);
-    }), (n, t) => (y(), E("div", G, [
-      s("div", Q, [
-        t[3] || (t[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)
       ]),
-      e(L, {
-        checked: r(d),
-        "onUpdate:checked": t[0] || (t[0] = (o) => k(d) ? d.value = o : null),
-        current: r(u),
-        "onUpdate:current": t[1] || (t[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"]),
-      e(r(p), {
+      t(i(d), {
         id: "demo-stepper",
-        modelValue: a.value,
-        "onUpdate:modelValue": t[2] || (t[2] = (o) => a.value = o),
+        modelValue: s.value,
+        "onUpdate:modelValue": e[3] || (e[3] = (o) => s.value = o),
         type: "form",
-        plugins: [r(x)],
+        plugins: [i(N)],
         actions: !1,
         onSubmit: () => {
         }
       }, {
-        default: i(() => [
-          e(l, { name: "auffindbarkeit" }, {
-            default: i(() => [
-              e(M)
+        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(r, { name: "findability/visibility" }, {
+            default: l(() => [
+              t(ee)
             ]),
             _: 1
           }),
-          e(l, { name: "grundlegende-informationen/name" }, {
-            default: i(() => [
-              e(H)
+          t(r, { name: "grundlegende-informationen/name" }, {
+            default: l(() => [
+              t(W)
             ]),
             _: 1
           }),
-          e(l, { name: "grundlegende-informationen/description" }, {
-            default: i(() => [
-              e(A)
+          t(r, { name: "grundlegende-informationen/description" }, {
+            default: l(() => [
+              t(Q)
             ]),
             _: 1
           }),
-          e(l, { name: "grundlegende-informationen/organisation" }, {
-            default: i(() => [
-              e(I)
+          t(r, { name: "grundlegende-informationen/organisation" }, {
+            default: l(() => [
+              t(X)
             ]),
             _: 1
           }),
-          e(l, { name: "grundlegende-informationen/discoverability" }, {
-            default: i(() => [
-              e(r(p), {
+          t(r, { name: "grundlegende-informationen/discoverability" }, {
+            default: l(() => [
+              t(i(d), {
                 type: "text",
                 label: "Name",
                 name: "name",
@@ -107,15 +138,15 @@ const G = { class: "demo-stepper" }, Q = { style: { "margin-bottom": "1rem", pad
             ]),
             _: 1
           }),
-          e(l, { name: "grundlegende-informationen/essentials" }, {
-            default: i(() => [
-              e(r(p), {
+          t(r, { name: "grundlegende-informationen/essentials" }, {
+            default: l(() => [
+              t(i(d), {
                 type: "text",
                 label: "Mail",
                 name: "mail",
                 validation: "required|email"
               }),
-              e(r(p), {
+              t(i(d), {
                 type: "text",
                 label: "Homepage",
                 name: "homepage",
@@ -124,9 +155,9 @@ const G = { class: "demo-stepper" }, Q = { style: { "margin-bottom": "1rem", pad
             ]),
             _: 1
           }),
-          e(l, { name: "optinale-daten" }, {
-            default: i(() => [
-              e(r(p), {
+          t(r, { name: "optinale-daten" }, {
+            default: l(() => [
+              t(i(d), {
                 type: "textarea",
                 label: "Description",
                 name: "description"
@@ -134,34 +165,60 @@ const G = { class: "demo-stepper" }, Q = { style: { "margin-bottom": "1rem", pad
             ]),
             _: 1
           }),
-          e(l, { name: "review" }, {
-            default: i(() => [
-              g.value ? (y(), q(z, {
-                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"]),
-      t[4] || (t[4] = s("hr", null, null, -1)),
-      s("div", W, [
-        e(V, {
-          type: "button",
-          "button-text": "Previous",
-          onClick: r(w)
-        }, null, 8, ["onClick"]),
-        e(V, {
-          type: "button",
-          "button-text": "Next",
-          onClick: B
-        })
-      ])
+      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 {
-  se as default
+  Ce as default
 };

package/package.json

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