@piveau/dpi 0.2.0-alpha.8 → 0.2.0-alpha.9

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/TextAreaV3.vue.js

@@ -1,10 +1,10 @@
-import { ref as o, watch as V, createElementBlock as c, openBlock as d, createElementVNode as l, createCommentVNode as p, createBlock as T, toDisplayString as f, normalizeStyle as C, normalizeClass as h, unref as u, withDirectives as H, vModelText as z } from "vue";
-import A from "./TextButtonSmall.vue.js";
+import { ref as a, watch as y, createElementBlock as c, openBlock as d, createElementVNode as l, createCommentVNode as p, createBlock as S, toDisplayString as f, normalizeStyle as T, normalizeClass as v, unref as s, withDirectives as C, vModelText as A } from "vue";
+import H from "./TextButtonSmall.vue.js";
 /* empty css                                */
 /* empty css                                 */
 /* empty css                */
 import L from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const R = { class: "dpiV3_input-field V3-typography" }, j = { class: "dpiV3_InputFieldBase" }, N = { class: "dpiV3_InputWithLabel" }, O = { class: "dpiV3_Top" }, U = { class: "dpiV3_Label" }, W = { class: "dpiV3_label copy-small-regular" }, $ = ["disabled", "maxlength", "placeholder"], q = {
+const j = { class: "dpiV3_input-field V3-typography" }, z = { class: "dpiV3_InputFieldBase" }, N = { class: "dpiV3_InputWithLabel" }, R = { class: "dpiV3_Top" }, O = { class: "dpiV3_Label" }, U = { class: "dpiV3_label copy-small-regular" }, W = ["disabled", "maxlength", "placeholder"], q = {
   key: 1,
   class: "dpiV3_errorText copy-small-regular"
 }, G = {
@@ -50,52 +50,48 @@ const R = { class: "dpiV3_input-field V3-typography" }, j = { class: "dpiV3_Inpu
     }
   },
   emits: ["update:modelValue", "deleteClicked"],
-  setup(e, { emit: g }) {
-    const n = e, v = g;
-    let s = o(!1), x = o(!1);
-    const m = o(null);
-    let w = o(!1), t = o("inset 0 0 0 1px var(--neutral-30, #687178)"), i = o(!1), b = o(!1);
-    const r = o(n.modelValue);
-    V(
-      () => n.modelValue,
-      (a) => {
-        r.value = a;
+  setup(e, { emit: V }) {
+    const o = e, h = V;
+    let n = a(!1), x = a(!1);
+    const g = a(null);
+    let w = a(!1), t = a("inset 0 0 0 1px var(--neutral-30, #687178)"), u = a(!1), m = a(!1);
+    const i = a(o.modelValue);
+    y(
+      () => o.modelValue,
+      (r) => {
+        i.value = r;
       }
-    ), V(r, (a) => {
-      v("update:modelValue", a);
+    ), y(i, (r) => {
+      h("update:modelValue", r);
     });
     function _() {
-      v("deleteClicked");
+      h("deleteClicked");
     }
     function B() {
-      w.value = !1, i.value = !0, s.value = !0, t.value = "0 0 0 2px var(--blue-70, #009FE3)";
+      w.value = !1, u.value = !0, n.value = !0, t.value = "0 0 0 2px var(--blue-70, #009FE3)";
     }
     function E() {
-      i.value = !1, s.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)";
+      u.value = !1, n.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)";
     }
     function I() {
-      b.value = !0, t.value = "inset 0 0 0 1px var(--neutral-60, #687178)", i.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
+      m.value = !0, t.value = "inset 0 0 0 1px var(--neutral-60, #687178)", u.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
     }
     function M() {
-      b.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)", i.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
+      m.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)", u.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
     }
     function F() {
-      s.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
+      n.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
     }
     function k() {
       t.value = "inset 0 0 0 2px var(--Focused)";
     }
-    function D() {
-      const a = m.value;
-      a.style.height = "268px", a.style.height = `${Math.min(a.scrollHeight, 372)}px`;
-    }
-    return (a, y) => (d(), c("div", R, [
-      l("div", j, [
+    return (r, b) => (d(), c("div", j, [
+      l("div", z, [
         l("div", N, [
-          l("div", O, [
-            l("div", U, [
-              l("label", W, f(n.label), 1),
-              e.showDeleteButton ? (d(), T(A, {
+          l("div", R, [
+            l("div", O, [
+              l("label", U, f(o.label), 1),
+              e.showDeleteButton ? (d(), S(H, {
                 key: 0,
                 "button-text": "löschen",
                 tabindex: "0",
@@ -104,23 +100,23 @@ const R = { class: "dpiV3_input-field V3-typography" }, j = { class: "dpiV3_Inpu
             ])
           ]),
           l("div", {
-            class: h(["dpiV3_Input", {
+            class: v(["dpiV3_Input", {
               dpiV3_disabled: e.isDisabled,
-              "error-state": e.showError && !u(s) && !u(x),
-              "focused-error-state": e.showError && u(s),
-              "filled-error-state": e.showError && u(x)
+              "error-state": e.showError && !s(n) && !s(x),
+              "focused-error-state": e.showError && s(n),
+              "filled-error-state": e.showError && s(x)
             }]),
-            style: C({ "box-shadow": u(t) }),
+            style: T({ "box-shadow": s(t) }),
             onMouseenter: I,
             onMouseleave: M,
             onMousedown: F
           }, [
-            H(l("textarea", {
+            C(l("textarea", {
               ref_key: "inputRef",
-              ref: m,
-              "onUpdate:modelValue": y[0] || (y[0] = (S) => r.value = S),
+              ref: g,
+              "onUpdate:modelValue": b[0] || (b[0] = (D) => i.value = D),
               type: "text",
-              class: h(["dpiV3_textArea copy-large-regular", {
+              class: v(["dpiV3_textArea copy-large-regular", {
                 "error-state": e.showError,
                 dpiV3_input_disabled: e.isDisabled
               }]),
@@ -129,16 +125,15 @@ const R = { class: "dpiV3_input-field V3-typography" }, j = { class: "dpiV3_Inpu
               placeholder: e.placeholder,
               onFocus: B,
               onBlur: E,
-              onMousedown: k,
-              onInput: D
-            }, null, 42, $), [
-              [z, r.value]
+              onMousedown: k
+            }, null, 42, W), [
+              [A, i.value]
             ])
           ], 38)
         ]),
         e.hint && !e.showError ? (d(), c("div", {
           key: 0,
-          class: h(["dpiV3_hintText", { "copy-large-semi-bold justify-content-end": n.countHint, "copy-small-regular": !n.countHint }])
+          class: v(["dpiV3_hintText", { "copy-large-semi-bold justify-content-end": o.countHint, "copy-small-regular": !o.countHint }])
         }, [
           l("span", null, f(e.hintMessage), 1)
         ], 2)) : p("", !0),
@@ -148,7 +143,7 @@ const R = { class: "dpiV3_input-field V3-typography" }, j = { class: "dpiV3_Inpu
       ])
     ]));
   }
-}, Z = /* @__PURE__ */ L(G, [["__scopeId", "data-v-609d64d4"]]);
+}, Z = /* @__PURE__ */ L(G, [["__scopeId", "data-v-d3d8298f"]]);
 export {
   Z 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 c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a83f996d"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a96dc312"]]);
 export {
-  c as default
+  a as default
 };

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

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

package/dist/packages/dpi/src/stories/components/LinkCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./LinkCard.vue2.js";
 /* empty css              */
 import r from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-242c6637"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bc004ed9"]]);
 export {
   p as default
 };

package/dist/packages/dpi/src/stories/components/LinkCard.vue2.js

@@ -2,9 +2,9 @@ import { defineComponent as p, ref as s, computed as c, createElementBlock as m,
 import { FormKit as l } from "@formkit/vue";
 import a from "../../data-provider-interface/HappyFlowComponents/ui/InputField/InputFieldDefinition.js";
 import f from "../../data-provider-interface/HappyFlowComponents/ui/TextArea/TextAreaDefinition.js";
-const b = { class: "dpiV3_Card_Tips" }, _ = { class: "action-container" }, x = 500, C = /* @__PURE__ */ p({
+const b = { class: "dpiV3_Card_Tips" }, _ = { class: "action-container" }, y = 500, C = /* @__PURE__ */ p({
   __name: "LinkCard",
-  setup(y) {
+  setup(B) {
     const n = s(""), d = c(() => {
       var t;
       return (t = n.value) == null ? void 0 : t.length;
@@ -21,7 +21,6 @@ const b = { class: "dpiV3_Card_Tips" }, _ = { class: "action-container" }, x = 5
         i(e(l), {
           type: e(a),
           name: "url",
-          "add-on-text": !0,
           "text-label": "URL",
           placeholder: "www.url.com",
           validation: "required|url"
@@ -38,7 +37,7 @@ const b = { class: "dpiV3_Card_Tips" }, _ = { class: "action-container" }, x = 5
           validation: "length:0,500",
           "validation-visibility": "live",
           hint: "true",
-          help: `${d.value} von ${x} Zeichen`,
+          help: `${d.value} von ${y} Zeichen`,
           "count-hint": !0
         }, null, 8, ["modelValue", "type", "help"]),
         v("div", _, [

package/dist/packages/dpi/src/stories/components/PartnerCard.vue.js

@@ -1,7 +1,7 @@
 import r from "./PartnerCard.vue2.js";
 /* empty css                 */
 import o from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ o(r, [["__scopeId", "data-v-9d837a2d"]]);
+const p = /* @__PURE__ */ o(r, [["__scopeId", "data-v-39b38a13"]]);
 export {
-  m as default
+  p as default
 };

package/dist/packages/dpi/src/stories/components/PartnerCard.vue2.js

@@ -1,14 +1,13 @@
-import { defineComponent as l, createElementBlock as o, openBlock as d, renderSlot as i, createVNode as n, createElementVNode as s, unref as e } from "vue";
-import { FormKit as r } from "@formkit/vue";
-import a from "../../data-provider-interface/HappyFlowComponents/ui/InputField/InputFieldDefinition.js";
-const c = { class: "dpiV3_Card_Tips" }, p = { class: "action-container" }, x = /* @__PURE__ */ l({
+import { defineComponent as a, createElementBlock as o, openBlock as d, renderSlot as i, createVNode as n, createElementVNode as s, unref as e } from "vue";
+import { FormKit as l } from "@formkit/vue";
+import r from "../../data-provider-interface/HappyFlowComponents/ui/InputField/InputFieldDefinition.js";
+const c = { class: "dpiV3_Card_Tips" }, p = { class: "action-container" }, y = /* @__PURE__ */ a({
   __name: "PartnerCard",
-  setup(u) {
-    return (t, m) => (d(), o("div", c, [
+  setup(m) {
+    return (t, u) => (d(), o("div", c, [
       i(t.$slots, "default", {}, () => [
-        n(e(r), {
-          type: e(a),
-          addOnText: !0,
+        n(e(l), {
+          type: e(r),
           name: "name",
           "text-label": "Name",
           placeholder: "Nennen Sie einen Partner.",
@@ -16,9 +15,8 @@ const c = { class: "dpiV3_Card_Tips" }, p = { class: "action-container" }, x = /
           "validation-visibility": "live",
           "trailing-text": !1
         }, null, 8, ["type"]),
-        n(e(r), {
-          type: e(a),
-          addOnText: !0,
+        n(e(l), {
+          type: e(r),
           name: "url",
           "text-label": "Website",
           placeholder: "www.url.com",
@@ -34,5 +32,5 @@ const c = { class: "dpiV3_Card_Tips" }, p = { class: "action-container" }, x = /
   }
 });
 export {
-  x as default
+  y as default
 };

package/dist/packages/dpi/src/stories/components/ScreenshotCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./ScreenshotCard.vue2.js";
 /* empty css                    */
 import r from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1d05c3a6"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fa7a352e"]]);
 export {
-  e as default
+  f as default
 };

package/dist/packages/dpi/src/stories/components/ScreenshotCard.vue2.js

@@ -1,15 +1,14 @@
 import { defineComponent as r, createElementBlock as n, openBlock as i, renderSlot as t, createVNode as a, createElementVNode as l, unref as o } from "vue";
-import { FormKit as d } from "@formkit/vue";
-import s from "../../data-provider-interface/HappyFlowComponents/ui/InputField/InputFieldDefinition.js";
-const c = { class: "dpiV3_Card_Tips" }, p = { class: "action-container" }, v = /* @__PURE__ */ r({
+import { FormKit as s } from "@formkit/vue";
+import c from "../../data-provider-interface/HappyFlowComponents/ui/InputField/InputFieldDefinition.js";
+const d = { class: "dpiV3_Card_Tips" }, p = { class: "action-container" }, v = /* @__PURE__ */ r({
   __name: "ScreenshotCard",
   setup(m) {
-    return (e, u) => (i(), n("div", c, [
+    return (e, u) => (i(), n("div", d, [
       t(e.$slots, "default", {}, () => [
-        a(o(d), {
-          type: o(s),
+        a(o(s), {
+          type: o(c),
           name: "homepage",
-          "add-on-text": !0,
           "text-label": "URL",
           "trailing-text": !1,
           validation: "required|url",

package/package.json

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