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

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

@@ -1,17 +1,26 @@
-import { defineComponent as D, mergeModels as L, useModel as h, computed as N, createElementBlock as i, openBlock as n, createVNode as d, unref as r, withCtx as s, createElementVNode as c, createBlock as m, createCommentVNode as f, renderSlot as k, createTextVNode as w, toDisplayString as _, normalizeClass as b, resolveDynamicComponent as F, Fragment as S, renderList as E } from "vue";
-import { Combobox as P, ComboboxLabel as z, ComboboxButton as I, ComboboxInput as O, ComboboxOptions as U, ComboboxOption as $ } from "@headlessui/vue";
-import { PhCaretUp as A, PhCaretDown as T } from "@phosphor-icons/vue";
-const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H = { class: "autocomplete__input-icon" }, J = {
+import { defineComponent as L, mergeModels as N, useModel as M, computed as P, createElementBlock as r, openBlock as l, createVNode as d, unref as a, withCtx as i, createElementVNode as _, createBlock as c, createCommentVNode as p, renderSlot as y, createTextVNode as z, toDisplayString as g, normalizeClass as m, resolveDynamicComponent as b, Fragment as D, renderList as E } from "vue";
+import { Combobox as F, ComboboxLabel as S, ComboboxButton as q, ComboboxInput as $, ComboboxOptions as O, ComboboxOption as U } from "@headlessui/vue";
+import { PhMagnifyingGlass as G, PhCaretUp as K, PhCaretDown as T, PhCircleNotch as j } from "@phosphor-icons/vue";
+const H = { class: "autocomplete" }, J = { class: "autocomplete__wrapper" }, Q = {
+  key: 0,
+  class: "autocomplete__input-icon autocomplete__input-icon--left"
+}, R = {
+  key: 0,
+  class: "autocomplete__loading"
+}, W = {
   key: 0,
   class: "autocomplete__no-results"
-}, W = /* @__PURE__ */ D({
+}, ee = /* @__PURE__ */ L({
   __name: "Autocomplete",
-  props: /* @__PURE__ */ L({
+  props: /* @__PURE__ */ N({
     options: {},
     label: { default: "" },
     errorMessage: { default: "" },
     placeholder: { default: "" },
     name: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    searchIcon: { type: Boolean, default: !1 },
+    inputAsButton: { type: Boolean, default: !0 },
     optionLabel: { type: Function, default: (u) => u },
     optionValue: { type: Function, default: (u) => u },
     optionDisabled: { type: Function, default: () => !1 }
@@ -23,110 +32,131 @@ const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H =
   }),
   emits: ["update:modelValue", "update:query"],
   setup(u) {
-    const l = u, p = h(u, "modelValue"), v = h(u, "query"), y = N(() => !!l.errorMessage);
-    function M(e) {
+    const t = u, f = M(u, "modelValue"), v = M(u, "query"), h = P(() => !!t.errorMessage);
+    function w(e) {
       e.open && e.event.stopPropagation();
     }
-    function q(e) {
-      return typeof e == "string" ? l.optionLabel(e) : e.name || String(e.id);
-    }
-    function g(e) {
-      return typeof e == "string" ? l.optionValue(e) : String(e.id);
+    function x(e) {
+      return typeof e == "string" ? t.optionLabel(e) : e.name || String(e.id);
     }
     function C(e) {
-      return typeof e == "string" ? l.optionDisabled(e) : !!e.unavailable;
+      return typeof e == "string" ? t.optionValue(e) : String(e.id);
     }
-    function x(e, o) {
-      if (!e || !o)
+    function V(e) {
+      return typeof e == "string" ? t.optionDisabled(e) : !!e.unavailable;
+    }
+    function I(e, n) {
+      if (!e || !n)
         return !1;
-      if (e === o)
+      if (e === n)
         return !0;
-      if (typeof e == "string" && typeof o == "string")
-        return e === o;
-      const t = g(e), a = g(o);
-      return t === a;
+      if (typeof e == "string" && typeof n == "string")
+        return e === n;
+      const s = C(e), o = C(n);
+      return s === o;
     }
-    function B(e) {
+    function A(e) {
       return !e || typeof e == "string" ? "" : e.name || "";
     }
-    return (e, o) => (n(), i("div", j, [
-      d(r(P), {
-        modelValue: p.value,
-        "onUpdate:modelValue": o[1] || (o[1] = (t) => p.value = t),
-        name: l.name,
-        by: x,
+    return (e, n) => (l(), r("div", H, [
+      d(a(F), {
+        modelValue: f.value,
+        "onUpdate:modelValue": n[1] || (n[1] = (s) => f.value = s),
+        name: t.name,
+        by: I,
         nullable: ""
       }, {
-        default: s(() => [
-          c("div", G, [
-            l.label ? (n(), m(r(z), {
+        default: i(({ open: s }) => [
+          _("div", J, [
+            t.label ? (l(), c(a(S), {
               key: 0,
               class: "autocomplete__label",
               as: "div"
             }, {
-              default: s(() => [
-                k(e.$slots, "label", {
-                  label: l.label,
-                  selected: p.value
+              default: i(() => [
+                y(e.$slots, "label", {
+                  label: t.label,
+                  selected: f.value
                 }, () => [
-                  w(_(l.label), 1)
+                  z(g(t.label), 1)
                 ], !0)
               ]),
               _: 3
-            })) : f("", !0),
-            c("div", {
-              class: b(["autocomplete__input-container", { "autocomplete__input-container--error": y.value }])
+            })) : p("", !0),
+            _("div", {
+              class: m(["autocomplete__input-container", { "autocomplete__input-container--error": h.value }])
             }, [
-              d(r(I), {
+              (l(), c(b(t.inputAsButton ? a(q) : "div"), {
                 as: "div",
                 class: "autocomplete__input-wrapper"
               }, {
-                default: s(({ open: t }) => [
-                  d(r(O), {
-                    class: "autocomplete__input",
-                    "display-value": (a) => B(a),
-                    placeholder: l.placeholder,
-                    onChange: o[0] || (o[0] = (a) => v.value = a.target.value),
-                    onClick: (a) => M({ event: a, open: t })
-                  }, null, 8, ["display-value", "placeholder", "onClick"]),
-                  c("div", H, [
-                    (n(), m(F(t ? r(A) : r(T)), { size: "1.5rem" }))
-                  ])
+                default: i(() => [
+                  t.searchIcon ? (l(), r("div", Q, [
+                    d(a(G), { size: "1.5rem" })
+                  ])) : p("", !0),
+                  d(a($), {
+                    class: m(["autocomplete__input", { "autocomplete__input--with-left-icon": t.searchIcon }]),
+                    "display-value": (o) => A(o),
+                    placeholder: t.placeholder,
+                    onChange: n[0] || (n[0] = (o) => v.value = o.target.value),
+                    onClick: (o) => w({ event: o, open: s })
+                  }, null, 8, ["class", "display-value", "placeholder", "onClick"]),
+                  t.searchIcon ? p("", !0) : (l(), c(b(t.inputAsButton ? "div" : a(q)), {
+                    key: 1,
+                    as: "div",
+                    class: "autocomplete__input-icon"
+                  }, {
+                    default: i(() => [
+                      (l(), c(b(s ? a(K) : a(T)), { size: "1.5rem" }))
+                    ]),
+                    _: 2
+                  }, 1024))
                 ]),
-                _: 1
-              })
+                _: 2
+              }, 1024))
             ], 2),
-            e.errorMessage ? (n(), i("div", {
+            e.errorMessage ? (l(), r("div", {
               key: 1,
-              class: b(["autocomplete__message", { "autocomplete__message--error": y.value }])
-            }, _(e.errorMessage), 3)) : f("", !0)
+              class: m(["autocomplete__message", { "autocomplete__message--error": h.value }])
+            }, g(e.errorMessage), 3)) : p("", !0)
           ]),
-          d(r(U), {
+          d(a(O), {
             class: "autocomplete__options",
             as: "ul"
           }, {
-            default: s(() => [
-              (n(!0), i(S, null, E(l.options, (t) => (n(), m(r($), {
-                key: typeof t == "string" ? t : t.id,
-                as: "template",
-                value: t,
-                disabled: C(t)
-              }, {
-                default: s(({ active: a, selected: V }) => [
-                  k(e.$slots, "option", {
-                    option: t,
-                    active: a,
-                    selected: V,
-                    disabled: C(t)
-                  }, () => [
-                    c("li", {
-                      class: b(["autocomplete__option", { "autocomplete__option--active": a, "autocomplete__option--selected": V }])
-                    }, _(q(t)), 3)
-                  ], !0)
-                ]),
-                _: 2
-              }, 1032, ["value", "disabled"]))), 128)),
-              l.options.length === 0 && v.value !== "" ? (n(), i("div", J, " No results found. ")) : f("", !0)
+            default: i(() => [
+              t.loading ? (l(), r("div", R, [
+                y(e.$slots, "loading", {}, () => [
+                  d(a(j), {
+                    size: "24px",
+                    color: "#0172AD",
+                    weight: "bold",
+                    class: "autocomplete__loading-spinner"
+                  })
+                ], !0)
+              ])) : (l(), r(D, { key: 1 }, [
+                (l(!0), r(D, null, E(t.options, (o) => (l(), c(a(U), {
+                  key: typeof o == "string" ? o : o.id,
+                  as: "template",
+                  value: o,
+                  disabled: V(o)
+                }, {
+                  default: i(({ active: k, selected: B }) => [
+                    y(e.$slots, "option", {
+                      option: o,
+                      active: k,
+                      selected: B,
+                      disabled: V(o)
+                    }, () => [
+                      _("li", {
+                        class: m(["autocomplete__option", { "autocomplete__option--active": k, "autocomplete__option--selected": B }])
+                      }, g(x(o)), 3)
+                    ], !0)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "disabled"]))), 128)),
+                t.options.length === 0 && v.value !== "" ? (l(), r("div", W, " Keine Ergebnisse gefunden. ")) : p("", !0)
+              ], 64))
             ]),
             _: 3
           })
@@ -137,5 +167,5 @@ const j = { class: "autocomplete" }, G = { class: "autocomplete__wrapper" }, H =
   }
 });
 export {
-  W as default
+  ee as default
 };

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

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

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

@@ -1,13 +1,14 @@
-import { defineComponent as j, mergeModels as M, computed as l, ref as I, useModel as H, watch as R, createBlock as U, openBlock as k, unref as m, createSlots as Q, withCtx as P, createElementVNode as G, createTextVNode as J, createCommentVNode as K, toDisplayString as W, renderSlot as X } from "vue";
-import { PhSpinner as Y } from "@phosphor-icons/vue";
-import { defineHubSearch as Z } from "@piveau/sdk-vue";
-import { useDebounce as _ } from "@vueuse/core";
-import w from "zod";
-import ee from "./Autocomplete.vue.js";
-const re = { class: "autocomplete-vocab__label" }, ie = /* @__PURE__ */ j({
+import { defineComponent as X, mergeModels as V, computed as o, ref as A, toRef as F, useModel as Y, watch as P, createBlock as R, openBlock as k, unref as v, createSlots as Z, withCtx as I, createElementVNode as w, createTextVNode as ee, createCommentVNode as te, toDisplayString as re, renderSlot as oe } from "vue";
+import { PhSpinner as ae } from "@phosphor-icons/vue";
+import { defineHubSearch as le } from "@piveau/sdk-vue";
+import { useDebounce as p } from "@vueuse/core";
+import se from "zod";
+import ue from "./Autocomplete.vue.js";
+const ne = { class: "autocomplete-vocab__label" }, be = /* @__PURE__ */ X({
   __name: "AutocompleteVocab",
-  props: /* @__PURE__ */ M({
-    baseUrl: { default: "https://staging.bydata.de/api/hub/search" },
+  props: /* @__PURE__ */ V({
+    by: { default: "" },
+    baseUrl: { default: "https://twin.bydata.de/api/hub/search" },
     vocabulary: {},
     resource: {},
     label: { default: "" },
@@ -15,111 +16,143 @@ const re = { class: "autocomplete-vocab__label" }, ie = /* @__PURE__ */ j({
     errorMessage: { default: "" },
     name: { default: "" },
     setupFn: {},
-    disabled: { type: Boolean, default: !1 }
+    disabled: { type: Boolean, default: !1 },
+    isAutocompleteDisabled: { type: Boolean, default: !1 },
+    postProcessFn: {},
+    sort: { default: "title.de+asc,name.de+asc,pref_label.de+asc,pref_label.en+asc,alt_label.de+asc,alt_label.en+asc" },
+    authToken: { default: "" },
+    searchIcon: { type: Boolean, default: !1 },
+    limit: { default: 24 },
+    inputAsButton: { type: Boolean, default: !0 }
   }, {
-    modelValue: { default: () => "" },
+    modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(["select"], ["update:modelValue"]),
-  setup(f, { emit: $ }) {
-    const t = f, B = $, i = l(() => !!t.vocabulary), C = l(() => t.resource === "dataset" ? "dataset" : i.value ? "vocabulary" : "resource"), D = l(() => t.resource === "dataset" ? "datasets" : i.value ? "vocabularies" : `resources/${t.resource}`), { useSearch: E, useResource: F } = Z({
+  emits: /* @__PURE__ */ V(["select"], ["update:modelValue"]),
+  setup(b, { emit: M }) {
+    const t = b, D = M, u = o(() => !!t.vocabulary), m = o(() => t.by || u.value ? "vocabulary" : "resource"), T = o(() => t.resource === "dataset" ? "dataset" : u.value ? "vocabulary" : m.value), U = o(() => t.resource === "dataset" ? "datasets" : u.value ? "vocabularies" : m.value === "resource" ? `resources/${t.resource}` : "vocabularies"), $ = o(() => !t.isAutocompleteDisabled && !!(t.resource || t.vocabulary)), { useSearch: E, useResource: L } = le({
       baseUrl: t.baseUrl,
-      index: C.value,
-      indexDetails: D.value,
-      schema: w.any()
+      index: T.value,
+      indexDetails: U.value,
+      schema: se.any()
     }, (e) => {
-      var d, V, q;
-      const r = (d = t.setupFn) == null ? void 0 : d.call(t, e), a = String((r == null ? void 0 : r.id) || (e == null ? void 0 : e.resource) || ""), u = String((r == null ? void 0 : r.name) || ((V = e == null ? void 0 : e.pref_label) == null ? void 0 : V.de) || ((q = e == null ? void 0 : e.pref_label) == null ? void 0 : q.en) || "");
+      var d, _, q;
+      const r = (d = t.setupFn) == null ? void 0 : d.call(t, e), l = String((r == null ? void 0 : r.id) || (e == null ? void 0 : e.resource) || ""), n = String((r == null ? void 0 : r.name) || ((_ = e == null ? void 0 : e.pref_label) == null ? void 0 : _.de) || ((q = e == null ? void 0 : e.pref_label) == null ? void 0 : q.en) || "");
       return {
         ...r,
-        id: a,
-        name: u
+        id: l,
+        name: n
       };
-    }), v = I(""), L = _(v, 300), p = l(() => t.vocabulary), { getSearchResultsEnhanced: N } = E({
+    }), f = A(""), z = p(f, 300), C = o(() => t.vocabulary), N = o(() => ({
+      ...t.authToken && { Authorization: `Bearer ${t.authToken}` }
+    })), { getSearchResultsEnhanced: O, isFetching: x } = E({
+      queryOptions: {
+        enabled: $
+      },
       queryParams: {
-        q: L,
-        limit: 12,
-        ...p.value ? { vocabulary: p.value } : { resource: t.resource }
-      }
-    }), o = H(f, "modelValue"), b = l(() => !(!o.value || typeof o.value == "string")), x = l(() => typeof o.value == "string");
-    function n(e) {
+        q: z,
+        limit: F(t.limit),
+        // ...vocabularyRef.value
+        //   ? { vocabulary: vocabularyRef }
+        //   : { resource: props.resource },
+        vocabulary: o(() => u.value ? C.value : ""),
+        // resource: computed(() => props.resource || ''),
+        sort: F(t.sort)
+      },
+      additionalParams: o(() => ({
+        resource: m.value === "resource" ? t.resource : ""
+      })),
+      headers: N
+    }), j = o(() => {
+      let e = O.value || [];
+      return t.postProcessFn && (e = t.postProcessFn(e)), e;
+    }), a = Y(b, "modelValue"), y = o(() => !(!a.value || typeof a.value == "string")), H = o(() => typeof a.value == "string");
+    function i(e) {
       return String(e ?? "").trim();
     }
-    const c = l(() => {
+    const c = o(() => {
       var e;
-      return typeof o.value == "string" ? n(o.value) : n((e = o.value) == null ? void 0 : e.id);
-    }), y = l(() => x.value && !!c.value), z = l(() => y.value ? i.value ? `${t.vocabulary}/vocable` : c.value : ""), A = l(() => i.value ? { resource: c.value } : {}), {
-      resultEnhanced: O,
-      isSuccess: oe,
-      isLoading: T
-    } = F(z, {
-      additionalParams: A,
+      return typeof a.value == "string" ? i(a.value) : i((e = a.value) == null ? void 0 : e.id);
+    }), h = o(() => H.value && !!c.value), Q = o(() => h.value ? u.value ? `${t.vocabulary}/vocable` : c.value : ""), G = o(() => u.value ? { resource: c.value } : {}), {
+      resultEnhanced: J,
+      isSuccess: ie,
+      isFetching: K
+    } = L(Q, {
+      additionalParams: G,
       queryOptions: {
-        enabled: y
+        enabled: h
       }
-    }), g = _(T, 350), s = I(), h = l({
+    }), g = p(K, 350), W = p(x, 350), s = A(), S = o({
       get: () => {
-        var a, u;
+        var l, n;
         const e = c.value;
         if (!e)
           return { id: "", name: "" };
-        const r = typeof o.value == "object" && o.value !== null ? o.value.name : n((a = s.value) == null ? void 0 : a.id) === e ? ((u = s.value) == null ? void 0 : u.name) ?? "" : "";
+        if (typeof a.value == "string")
+          return {
+            id: "__string",
+            name: a.value
+          };
+        const r = typeof a.value == "object" && a.value !== null ? a.value.name : i((l = s.value) == null ? void 0 : l.id) === e ? ((n = s.value) == null ? void 0 : n.name) ?? "" : "";
         return { id: e, name: r };
       },
       set: (e) => {
         if (!e) {
-          s.value = void 0, o.value = "";
+          s.value = void 0, a.value = "";
           return;
         }
         if (typeof e == "string") {
-          s.value = void 0, o.value = e.trim();
+          s.value = void 0, a.value = e.trim();
           return;
         }
-        s.value = e, o.value = n(e.id);
+        s.value = e, a.value = i(e.id);
       }
     });
-    return R(O, (e, r) => {
-      e && (r && r.id === e.id || (s.value = e, b.value && (o.value = e), b.value || (o.value = n(e.id))));
-    }, { immediate: !0 }), R(s, (e) => {
-      e && B("select", e);
-    }, { immediate: !0 }), (e, r) => (k(), U(ee, {
-      modelValue: h.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (a) => h.value = a),
-      query: v.value,
-      "onUpdate:query": r[1] || (r[1] = (a) => v.value = a),
-      options: m(N) || [],
+    return P(J, (e, r) => {
+      e && (r && r.id === e.id || (s.value = e, y.value && (a.value = e), y.value || (a.value = i(e.id))));
+    }, { immediate: !0 }), P(s, (e) => {
+      e && D("select", e);
+    }, { immediate: !0 }), (e, r) => (k(), R(ue, {
+      modelValue: S.value,
+      "onUpdate:modelValue": r[0] || (r[0] = (l) => S.value = l),
+      query: f.value,
+      "onUpdate:query": r[1] || (r[1] = (l) => f.value = l),
+      options: j.value || [],
       label: e.label,
       "error-message": e.errorMessage,
       placeholder: e.placeholder,
       name: e.name,
-      disabled: m(g) || t.disabled
-    }, Q({
-      label: P(() => [
-        G("div", re, [
-          J(W(e.label) + " ", 1),
-          m(g) ? (k(), U(m(Y), {
+      disabled: v(g) || t.disabled,
+      loading: v(W),
+      "search-icon": t.searchIcon,
+      "input-as-button": t.inputAsButton
+    }, Z({
+      label: I(() => [
+        w("div", ne, [
+          ee(re(e.label) + " ", 1),
+          v(g) ? (k(), R(v(ae), {
             key: 0,
             class: "animate-spin"
-          })) : K("", !0)
+          })) : te("", !0)
         ])
       ]),
       _: 2
     }, [
       e.$slots.option ? {
         name: "option",
-        fn: P(({ option: a, active: u, selected: S, disabled: d }) => [
-          X(e.$slots, "option", {
-            option: a,
-            active: u,
-            selected: S,
+        fn: I(({ option: l, active: n, selected: B, disabled: d }) => [
+          oe(e.$slots, "option", {
+            option: l,
+            active: n,
+            selected: B,
             disabled: d
           }, void 0, !0)
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["modelValue", "query", "options", "label", "error-message", "placeholder", "name", "disabled"]));
+    ]), 1032, ["modelValue", "query", "options", "label", "error-message", "placeholder", "name", "disabled", "loading", "search-icon", "input-as-button"]));
   }
 });
 export {
-  ie as default
+  be as default
 };

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

@@ -1,40 +1,40 @@
-import { ref as a, computed as u, createElementBlock as c, openBlock as p, createElementVNode as e, createVNode as n, unref as r, withCtx as i, createTextVNode as m } from "vue";
-import { FormKit as d } from "@formkit/vue";
+import { ref as a, computed as c, createElementBlock as u, openBlock as p, createElementVNode as e, createVNode as n, unref as r, withCtx as i, createTextVNode as d } from "vue";
+import { FormKit as m } from "@formkit/vue";
 import { PhLightbulb as h } from "@phosphor-icons/vue";
 import g from "../../../components/StepActionsSection.vue.js";
 import f from "../Card.vue.js";
-import _ from "../TextArea/TextAreaDefinition.js";
+import b from "../TextArea/TextAreaDefinition.js";
 /* empty css                            */
-import b from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-const z = { class: "dpiV3_page V3-typography" }, k = { class: "funny-section" }, v = { class: "funny-flex" }, y = { class: "funny-section" }, w = { class: "funny-section" }, x = 500, P = {
+import z from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "dpiV3_page V3-typography" }, k = { class: "funny-section" }, v = { class: "funny-flex" }, y = { class: "funny-section" }, x = { class: "funny-section" }, j = 500, w = {
   __name: "ProjectDescriptionStep",
-  setup(j) {
-    const s = a(""), o = u(() => s.value.length);
-    return (S, t) => (p(), c("div", z, [
+  setup(P) {
+    const s = a(""), o = c(() => s.value.length);
+    return (S, t) => (p(), u("div", _, [
       e("section", k, [
         e("div", v, [
           t[1] || (t[1] = e("h4", null, "Beschreiben Sie Ihr Projekt", -1)),
           t[2] || (t[2] = e("span", { class: "copy-large-regular" }, " Beschreiben Sie die wichtigsten Inhalte Ihres Projekts in wenigen, klaren Sätzen, damit interessierte Personen schnell einschätzen können, ob das Projekt für sie relevant ist. ", -1)),
-          n(r(d), {
+          n(r(m), {
             id: "projectDescription",
             modelValue: s.value,
             "onUpdate:modelValue": t[0] || (t[0] = (l) => s.value = l),
             label: "Beschreibung",
-            type: r(_),
+            type: r(b),
             name: "projectDescription",
             "text-label": "Name",
-            placeholder: "Geben Sie Ihrem Projekt einen Namen.",
+            placeholder: "Beschreiben Sie Ihr Projekt in ein paar Sätzen.",
             validation: "required|length:0,500",
             hint: "true",
-            help: `${o.value} von ${x} Zeichen`,
+            help: `${o.value} von ${j} Zeichen`,
             "count-hint": !0
           }, null, 8, ["modelValue", "type", "help"])
         ])
       ]),
       e("section", y, [
-        n(g)
+        n(g, { class: "description-step" })
       ]),
-      e("section", w, [
+      e("section", x, [
         n(f, { variant: "default" }, {
           icon: i(() => [
             n(r(h), {
@@ -43,10 +43,10 @@ const z = { class: "dpiV3_page V3-typography" }, k = { class: "funny-section" },
             })
           ]),
           title: i(() => t[3] || (t[3] = [
-            m(" Beispiel ", -1)
+            d(" Beispiel ", -1)
           ])),
           default: i(() => [
-            t[4] || (t[4] = e("div", { class: "copy-large-regular" }, [
+            t[4] || (t[4] = e("div", { class: "copy-large-regular project-description-example" }, [
               e("p", { class: "copy-large-semi-bold" }, " Name "),
               e("p", null, "Hochwasserschutzprogramm mit Prognosen"),
               e("p", { class: "copy-large-semi-bold" }, " Beschreibung "),
@@ -59,7 +59,7 @@ const z = { class: "dpiV3_page V3-typography" }, k = { class: "funny-section" },
       ])
     ]));
   }
-}, F = /* @__PURE__ */ b(P, [["__scopeId", "data-v-9f4e9fc8"]]);
+}, F = /* @__PURE__ */ z(w, [["__scopeId", "data-v-164d62b2"]]);
 export {
   F as default
 };

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

@@ -1,12 +1,12 @@
 import { createElementBlock as i, openBlock as o, createElementVNode as e, createVNode as n, unref as s, withCtx as r, createTextVNode as a } from "vue";
 import { FormKit as l } from "@formkit/vue";
-import { PhLightbulb as u } from "@phosphor-icons/vue";
-import m from "../../../components/StepActionsSection.vue.js";
-import d from "../Card.vue.js";
-import c from "../InputField/InputFieldDefinition.js";
+import { PhLightbulb as m } from "@phosphor-icons/vue";
+import u from "../../../components/StepActionsSection.vue.js";
+import c from "../Card.vue.js";
+import p from "../InputField/InputFieldDefinition.js";
 /* empty css                     */
-import p from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
-const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" }, h = { class: "funny-flex" }, _ = { class: "funny-section" }, k = { class: "funny-section" }, b = {
+import d from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" }, h = { class: "funny-flex" }, _ = { class: "funny-section" }, b = { class: "funny-section" }, k = {
   __name: "ProjectNameStep",
   setup(y) {
     return (z, t) => (o(), i("div", f, [
@@ -15,7 +15,7 @@ const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" },
           t[0] || (t[0] = e("h4", null, " Geben Sie Ihrem Projekt einen Namen ", -1)),
           t[1] || (t[1] = e("span", { class: "copy-large-regular" }, "Ein aussagekräftiger Projektname bildet den ersten Grundstein für eine gute Auffindbarkeit Ihres Projekts.", -1)),
           n(s(l), {
-            type: s(c),
+            type: s(p),
             name: "projectName",
             "text-label": "Name",
             placeholder: "Geben Sie Ihrem Projekt einen Namen.",
@@ -25,12 +25,15 @@ const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" },
         ])
       ]),
       e("section", _, [
-        n(m)
+        n(u, {
+          "hide-cancel": "",
+          class: "project-name-step-actions"
+        })
       ]),
-      e("section", k, [
-        n(d, { variant: "default" }, {
+      e("section", b, [
+        n(c, { variant: "default" }, {
           icon: r(() => [
-            n(s(u), {
+            n(s(m), {
               size: 32,
               color: "#009fe3"
             })
@@ -39,7 +42,7 @@ const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" },
             a(" Beispiel ", -1)
           ])),
           default: r(() => [
-            t[3] || (t[3] = e("div", { class: "copy-large-regular" }, [
+            t[3] || (t[3] = e("div", { class: "copy-large-regular project-name-example" }, [
               e("p", { class: "copy-large-semi-bold" }, " Name "),
               e("p", null, "Hochwasserschutzprogramm mit Prognosen"),
               e("p", { class: "copy-large-semi-bold" }, " Beschreibung "),
@@ -52,7 +55,7 @@ const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" },
       ])
     ]));
   }
-}, E = /* @__PURE__ */ p(b, [["__scopeId", "data-v-dfd03fa8"]]);
+}, E = /* @__PURE__ */ d(k, [["__scopeId", "data-v-38bfafd4"]]);
 export {
   E as default
 };