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

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

@@ -19,14 +19,14 @@ const E = { class: "V3-typography dpiV3_Frame_3841" }, T = { class: "copy-large-
     const { t: x } = _(), { isEditMode: p } = V(), c = d;
     let e = m([{ isValid: "unset", "@value": "", "@language": "de" }]);
     p.value || c.context.node.input(e);
-    const f = (t) => {
+    const u = (t) => {
       t.target.value != "" ? e.value[0].isValid = !0 : e.value[0].isValid = !1, e.value[0]["@value"] = t.target.value;
     };
     return (t, o) => (l(), s("div", E, [
       a("h4", null, n(t.$t("message.dataupload.datasets.dct:title.title")), 1),
       a("div", T, n(t.$t("message.dataupload.datasets.dct:title.description")), 1),
       r(h, {
-        onInput: f,
+        onInput: u,
         addOnText: !1,
         datePicker: !1,
         infoIcon: !1,
@@ -37,7 +37,7 @@ const E = { class: "V3-typography dpiV3_Frame_3841" }, T = { class: "copy-large-
         showEndIcon: !1,
         showError: i(e)[0].isValid === !1
       }, null, 8, ["showError"]),
-      i(e).find((u) => u.isValid === !1) ? (l(), s("div", y, [
+      i(e).find((f) => f.isValid === !1) ? (l(), s("div", y, [
         r(i(v), {
           size: 16,
           weight: "fill"
@@ -46,7 +46,7 @@ const E = { class: "V3-typography dpiV3_Frame_3841" }, T = { class: "copy-large-
       ])) : g("", !0)
     ]));
   }
-}, M = /* @__PURE__ */ I(b, [["__scopeId", "data-v-56919f9a"]]);
+}, M = /* @__PURE__ */ I(b, [["__scopeId", "data-v-d4e351cd"]]);
 export {
   M as default
 };

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

@@ -1,10 +1,10 @@
-import { ref as d, createElementBlock as u, openBlock as p, createElementVNode as o, toDisplayString as r, createVNode as c, createCommentVNode as _, unref as l } from "vue";
+import { ref as u, createElementBlock as d, openBlock as p, createElementVNode as s, toDisplayString as r, createVNode as c, createCommentVNode as _, unref as o } from "vue";
 import { PhWarning as D } from "@phosphor-icons/vue";
 import V from "../HappyFlowComponents/ui/InputField.vue.js";
 /* empty css                */
 import w from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import { useEditModeInfo as S } from "../composables/useDpiEditMode.js";
-const y = { class: "V3-typography" }, I = { class: "dpiV3InnerComponentWrap" }, b = { class: "copy-large-regular" }, M = { class: "input-container" }, T = {
+const y = { class: "V3-typography" }, I = { class: "dpiV3InnerComponentWrap" }, M = { class: "copy-large-regular" }, T = { class: "input-container" }, b = {
   key: 0,
   class: "dpiV3_errormsgWrapper"
 }, k = { class: "copy-mini-regular" }, E = {
@@ -13,36 +13,40 @@ const y = { class: "V3-typography" }, I = { class: "dpiV3InnerComponentWrap" },
     context: Object
   },
   setup(f) {
-    const m = f, a = /* @__PURE__ */ new Date();
-    a.getFullYear(), String(a.getMonth() + 1).padStart(2, "0"), String(a.getDate()).padStart(2, "0");
-    let e = d([{ isValid: "unset", "@type": "http://www.w3.org/2001/XMLSchema#date" }]), s = d("Bitte geben Sie ein Aktualisierungsdatum ein, bevor Sie fortfahren.");
-    const { isEditMode: g } = S();
-    g.value || m.context.node.input(e);
-    const h = (n) => {
-      const t = n.target.value;
+    const g = f, i = /* @__PURE__ */ new Date();
+    i.getFullYear(), String(i.getMonth() + 1).padStart(2, "0"), String(i.getDate()).padStart(2, "0");
+    let e = u([{ isValid: "unset", "@type": "http://www.w3.org/2001/XMLSchema#date" }]), n = u("Bitte geben Sie ein Aktualisierungsdatum ein, bevor Sie fortfahren.");
+    const { isEditMode: m } = S();
+    m.value || g.context.node.input(e);
+    const v = (l) => {
+      const t = l.target.value;
       if (t === "") {
-        e.value[0].isValid = !1, s.value = "Bitte geben Sie ein Aktualisierungsdatum ein, bevor Sie fortfahren.", e.value[0]["@value"] = t;
+        e.value[0].isValid = !1, n.value = "Bitte geben Sie ein Aktualisierungsdatum ein, bevor Sie fortfahren.", e.value[0]["@value"] = t;
         return;
       }
-      const i = new Date(t);
-      if (isNaN(i.getTime())) {
-        e.value[0].isValid = !1, s.value = "Bitte geben Sie ein gültiges Datum ein.", e.value[0]["@value"] = t;
+      const a = new Date(t);
+      if (isNaN(a.getTime())) {
+        e.value[0].isValid = !1, n.value = "Bitte geben Sie ein gültiges Datum ein.", e.value[0]["@value"] = t;
         return;
       }
-      const v = new Date(a.getFullYear(), a.getMonth(), a.getDate());
-      if (new Date(i.getFullYear(), i.getMonth(), i.getDate()) > v) {
-        e.value[0].isValid = !1, s.value = "Das Datum darf nicht in der Zukunft liegen.", e.value[0]["@value"] = t;
+      if (a.getFullYear() < 1950) {
+        e.value[0].isValid = !1, n.value = "Das Jahr darf nicht vor 1950 liegen.", e.value[0]["@value"] = t;
+        return;
+      }
+      const h = new Date(i.getFullYear(), i.getMonth(), i.getDate());
+      if (new Date(a.getFullYear(), a.getMonth(), a.getDate()) > h) {
+        e.value[0].isValid = !1, n.value = "Das Datum darf nicht in der Zukunft liegen.", e.value[0]["@value"] = t;
         return;
       }
       e.value[0].isValid = !0, e.value[0]["@value"] = t;
     };
-    return (n, t) => (p(), u("div", y, [
-      o("div", I, [
-        o("h4", null, r(n.$t("message.dataupload.datasets.dct:modified.title")), 1),
-        o("div", b, r(n.$t("message.dataupload.datasets.dct:modified.description")), 1),
-        o("div", M, [
+    return (l, t) => (p(), d("div", y, [
+      s("div", I, [
+        s("h4", null, r(l.$t("message.dataupload.datasets.dct:modified.title")), 1),
+        s("div", M, r(l.$t("message.dataupload.datasets.dct:modified.description")), 1),
+        s("div", T, [
           c(V, {
-            onInput: h,
+            onInput: v,
             defaultInput: !0,
             addOnText: !1,
             eraseable: !1,
@@ -55,21 +59,21 @@ const y = { class: "V3-typography" }, I = { class: "dpiV3InnerComponentWrap" },
             initialHintText: !1,
             showEndIcon: !1,
             inputType: "date",
-            showError: l(e)[0].isValid === !1,
-            modelValue: n.todayDate
+            showError: o(e)[0].isValid === !1,
+            modelValue: l.todayDate
           }, null, 8, ["showError", "modelValue"]),
-          l(e).find((i) => i.isValid === !1) ? (p(), u("div", T, [
-            c(l(D), {
+          o(e).find((a) => a.isValid === !1) ? (p(), d("div", b, [
+            c(o(D), {
               size: 16,
               weight: "fill"
             }),
-            o("span", k, r(l(s)), 1)
+            s("span", k, r(o(n)), 1)
           ])) : _("", !0)
         ])
       ])
     ]));
   }
-}, Y = /* @__PURE__ */ w(E, [["__scopeId", "data-v-2dbc8fb6"]]);
+}, A = /* @__PURE__ */ w(E, [["__scopeId", "data-v-4eff5f78"]]);
 export {
-  Y as default
+  A as default
 };

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

@@ -0,0 +1,121 @@
+import { mergeModels as F, useModel as M, ref as N, watch as O, computed as C, createElementBlock as n, openBlock as r, createElementVNode as t, createCommentVNode as P, createVNode as h, unref as i, Fragment as T, toDisplayString as a, createTextVNode as c } from "vue";
+import { PhWarning as W } from "@phosphor-icons/vue";
+import { useI18n as j } from "vue-i18n";
+import { useEditModeInfo as z } from "../composables/useDpiEditMode.js";
+import { useFormValues as B } from "../composables/useDpiFormValues.js";
+import q from "../HappyFlowComponents/ui/Dropdown.vue.js";
+/* empty css                    */
+import H from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const U = { class: "dpiV3InnerComponentWrap" }, A = { class: "dpiV3_Frame_840 V3-typography" }, G = { class: "copy-large-regular description-text" }, J = { class: "visibility-options-description" }, K = { class: "visibility-option" }, L = { class: "option-title" }, Q = { class: "visibility-option" }, R = { class: "option-title" }, X = { class: "visibility-option" }, Y = { class: "option-title" }, Z = {
+  key: 0,
+  class: "dpiV3_errormsgWrapper"
+}, $ = { class: "copy-mini-regular" }, ii = {
+  __name: "VisibilityPage",
+  props: /* @__PURE__ */ F({
+    context: Object
+  }, {
+    selectedVisibility: {
+      type: String,
+      default: ""
+    },
+    selectedVisibilityModifiers: {}
+  }),
+  emits: ["update:selectedVisibility"],
+  setup(D, { expose: x }) {
+    const o = M(D, "selectedVisibility"), { t: s } = j(), { isEditMode: p } = z(), { formValues: l } = B(), w = N([
+      { "@value": "public", label: "Öffentlich" },
+      { "@value": "restricted", label: "Eingeschränkt" },
+      { "@value": "internal", label: "Intern" }
+    ]);
+    p.value || Object.keys(l.value.Discoverability.visibilityPage).length === 0 && (l.value.Discoverability.visibilityPage = [{ isValid: "unset" }]);
+    function I(e) {
+      o.value = e, u(e);
+    }
+    function u(e) {
+      e && e !== "" ? l.value.Discoverability.visibilityPage = [
+        { isValid: !0, visibility: e }
+      ] : l.value.Discoverability.visibilityPage = [
+        { isValid: !1, visibility: "" }
+      ], console.log("Visibility validation state:", l.value.Discoverability.visibilityPage);
+    }
+    O(o, (e) => {
+      e !== void 0 && u(e);
+    });
+    const k = C(() => {
+      var e, d;
+      return ((d = (e = l.value.Discoverability.visibilityPage) == null ? void 0 : e[0]) == null ? void 0 : d.isValid) === !0;
+    });
+    function E() {
+      return o.value !== "" ? (l.value.Discoverability.visibilityPage[0].isValid = !0, !0) : (l.value.Discoverability.visibilityPage = [{ isValid: !1 }], !1);
+    }
+    return x({
+      validateVisibilitySelection: E,
+      canProceed: k
+    }), (e, d) => {
+      var v, b, y, g, m, f, _, V;
+      return r(), n("div", U, [
+        t("div", A, [
+          i(p) ? P("", !0) : (r(), n(T, { key: 0 }, [
+            t("h4", null, a(i(s)("message.dataupload.datasets.visibilityPage.title")), 1),
+            t("div", G, [
+              t("p", null, a(i(s)("message.dataupload.datasets.visibilityPage.intro-text")), 1),
+              t("p", null, a(i(s)("message.dataupload.datasets.visibilityPage.recommendation-text")), 1),
+              t("ul", J, [
+                t("li", K, [
+                  t("span", L, '"' + a(i(s)("message.dataupload.datasets.visibilityPage.visibility-option-public")) + '":', 1),
+                  c(" " + a(i(s)("message.dataupload.datasets.visibilityPage.visibility-option-public-desc")), 1)
+                ]),
+                t("li", Q, [
+                  t("span", R, '"' + a(i(s)("message.dataupload.datasets.visibilityPage.visibility-option-restricted")) + '":', 1),
+                  c(" " + a(i(s)("message.dataupload.datasets.visibilityPage.visibility-option-restricted-desc")), 1)
+                ]),
+                t("li", X, [
+                  t("span", Y, '"' + a(i(s)("message.dataupload.datasets.visibilityPage.visibility-option-internal")) + '":', 1),
+                  c(" " + a(i(s)("message.dataupload.datasets.visibilityPage.visibility-option-internal-desc")), 1)
+                ])
+              ]),
+              t("p", null, a(i(s)("message.dataupload.datasets.visibilityPage.registration-note")), 1)
+            ])
+          ], 64)),
+          h(q, {
+            modelValue: o.value,
+            "onUpdate:modelValue": [
+              d[0] || (d[0] = (S) => o.value = S),
+              I
+            ],
+            "dropdown-width": "large",
+            type: "inputField",
+            class: "visibility-dropdown",
+            "input-field-props": {
+              addOnText: !1,
+              initialHintText: !1,
+              datePicker: !1,
+              infoIcon: !1,
+              preIcon: !1,
+              label: i(s)("message.dataupload.datasets.visibilityPage.dropdown-label"),
+              dropdown_dpiV3: !0,
+              placeholder: i(s)("message.dataupload.datasets.visibilityPage.dropdown-placeholder"),
+              inputFieldSize: "large",
+              modelValue: o.value,
+              defaultInput: !0,
+              showError: ((g = (y = (b = (v = i(l)) == null ? void 0 : v.Discoverability) == null ? void 0 : b.visibilityPage) == null ? void 0 : y[0]) == null ? void 0 : g.isValid) === !1,
+              required: !0
+            },
+            "label-property": "label",
+            data: w.value
+          }, null, 8, ["modelValue", "input-field-props", "data"])
+        ]),
+        ((V = (_ = (f = (m = i(l)) == null ? void 0 : m.Discoverability) == null ? void 0 : f.visibilityPage) == null ? void 0 : _[0]) == null ? void 0 : V.isValid) === !1 ? (r(), n("div", Z, [
+          h(i(W), {
+            size: 16,
+            weight: "fill"
+          }),
+          t("span", $, a(i(s)("message.dataupload.datasets.visibilityPage.error-message")), 1)
+        ])) : P("", !0)
+      ]);
+    };
+  }
+}, ri = /* @__PURE__ */ H(ii, [["__scopeId", "data-v-df9473cc"]]);
+export {
+  ri as default
+};

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

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

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

@@ -1,23 +1,25 @@
-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 = {
+import { defineComponent as w, useModel as O, ref as f, createBlock as I, openBlock as h, withCtx as o, createElementVNode as n, createVNode as t, unref as l, createTextVNode as v, createElementBlock as g } from "vue";
+import { TabGroup as F, TabList as A, Tab as x, TabPanels as B, TabPanel as D } from "@headlessui/vue";
+import { PhStar as M, PhFloppyDisk as S } from "@phosphor-icons/vue";
+import { useStorage as z } from "@vueuse/core";
+import { useRouter as G } from "vue-router";
+import { decodeProject as U } from "../../composables/project-transformer/decodeProject.js";
+import { encodeProject as R } from "../../composables/project-transformer/encodeProject.js";
+import { useFormValues as q } from "../../composables/useDpiFormValues.js";
+import s from "../../HappyFlowComponents/ui/ButtonV3.vue.js";
+import y from "../../HappyFlowComponents/ui/Card.vue.js";
+import H from "../../HappyFlowComponents/ui/DpiModalBase.vue.js";
+import K from "../../HappyFlowComponents/ui/InputField.vue.js";
+import Y from "../../HappyFlowComponents/ui/ListBox/Listbox.vue.js";
+import Q from "../../HappyFlowComponents/ui/TextAreaV3.vue.js";
+import { fullProject as W } from "./fixtures.js";
+const X = { class: "tab-wrapper" }, Z = { class: "hurry" }, $ = { class: "hurry-actions" }, ee = {
   key: 0,
   class: "hurry-flurry"
-}, W = {
+}, te = {
   key: 1,
   class: "hurry-flurry-empty"
-}, X = { class: "hurry" }, Z = { class: "hurry-actions" }, $ = "dpi:project:snapshots", me = /* @__PURE__ */ T({
+}, oe = { class: "hurry" }, ae = { class: "hurry-actions" }, le = { class: "hurry" }, ne = { class: "hurry-actions" }, re = "dpi:project:snapshots", Oe = /* @__PURE__ */ w({
   __name: "ProjectDpiDevTools",
   props: {
     modelValue: { type: Boolean },
@@ -28,74 +30,80 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
     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();
+  setup(V) {
+    const k = G(), N = O(V, "modelValue"), b = O(V, "nonce"), { formValues: p } = q(), c = f(""), u = f(""), m = f("");
+    function C() {
+      b.value++, p.value = W.formValuesFn();
     }
-    const d = B($, []), s = f("");
-    function C(a) {
+    const d = z(re, []), i = f("");
+    function J(a) {
       return new Date(a).toLocaleString();
     }
-    function J() {
+    function L() {
       const a = Date.now(), e = {
         id: String(a),
-        name: C(a),
+        name: J(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;
+      d.value = [...d.value, e], i.value = e;
     }
-    function L() {
-      !s.value || typeof s.value == "string" || (m.value++, p.value = JSON.parse(JSON.stringify(s.value.data)));
+    function P() {
+      !i.value || typeof i.value == "string" || (b.value++, p.value = JSON.parse(JSON.stringify(i.value.data)));
     }
-    async function D() {
-      i.value = "";
+    async function T() {
+      u.value = "";
       try {
-        const a = JSON.parse(c.value), e = await M(a);
-        m.value++, p.value = JSON.parse(JSON.stringify(e));
+        const a = JSON.parse(c.value), e = await U(a);
+        b.value++, p.value = JSON.parse(JSON.stringify(e));
       } catch (a) {
-        i.value = a instanceof Error ? a.message : "Failed to load JSON-LD";
+        u.value = a instanceof Error ? a.message : "Failed to load JSON-LD";
       }
     }
-    async function P() {
-      i.value = "";
+    async function j() {
+      u.value = "";
       try {
-        const a = G(p.value), e = JSON.stringify(a, null, 2);
+        const a = R(p.value, { identifier: "TODO" }), e = JSON.stringify(a, null, 2);
         c.value = e;
       } catch (a) {
-        i.value = a instanceof Error ? a.message : "Failed to encode project";
+        u.value = a instanceof Error ? a.message : "Failed to encode project";
       }
     }
-    function j() {
-      d.value = [], s.value = "";
+    function _() {
+      m.value && k.push({
+        path: "/dpi/project/datasets",
+        query: { locale: "de", edit: "true", id: m.value }
+      });
+    }
+    function E() {
+      d.value = [], i.value = "";
     }
-    return (a, e) => (v(), _(I, {
-      modelValue: S.value,
-      "onUpdate:modelValue": e[2] || (e[2] = (r) => S.value = r)
+    return (a, e) => (h(), I(H, {
+      modelValue: N.value,
+      "onUpdate:modelValue": e[3] || (e[3] = (r) => N.value = r)
     }, {
-      header: o(() => e[3] || (e[3] = [
+      header: o(() => e[4] || (e[4] = [
         n("h4", null, "DPI Tools for Devs", -1)
       ])),
       default: o(() => [
-        n("div", R, [
-          t(l(w), null, {
+        n("div", X, [
+          t(l(F), null, {
             default: o(() => [
-              t(l(E), { class: "tab-list" }, {
+              t(l(A), { class: "tab-list" }, {
                 default: o(() => [
-                  t(l(g), { as: "template" }, {
+                  t(l(x), { as: "template" }, {
                     default: o(({ selected: r }) => [
-                      t(u, {
+                      t(s, {
                         variant: r ? "secondary" : "tertiary",
                         "button-text": "Form"
                       }, null, 8, ["variant"])
                     ]),
                     _: 1
                   }),
-                  t(l(g), { as: "template" }, {
+                  t(l(x), { as: "template" }, {
                     default: o(({ selected: r }) => [
-                      t(u, {
+                      t(s, {
                         variant: r ? "secondary" : "tertiary",
                         "button-text": "Edit Mode"
                       }, null, 8, ["variant"])
@@ -105,80 +113,80 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
                 ]),
                 _: 1
               }),
-              t(l(A), { class: "tab-panels" }, {
+              t(l(B), { class: "tab-panels" }, {
                 default: o(() => [
-                  t(l(O), null, {
+                  t(l(D), 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)
+                      e[10] || (e[10] = n("p", null, "Manage current state of the form data model", -1)),
+                      t(y, null, {
+                        title: o(() => e[5] || (e[5] = [
+                          v(" Presets ", -1)
                         ])),
                         icon: o(() => [
-                          t(l(F), {
+                          t(l(M), {
                             size: 32,
                             color: "#009fe3"
                           })
                         ]),
                         default: o(() => [
                           n("div", null, [
-                            t(u, {
+                            t(s, {
                               "icon-start": "Check",
                               "button-text": "Autofill inputs and reload DPI",
                               variant: "primary",
-                              onClick: k
+                              onClick: C
                             }),
-                            e[5] || (e[5] = n("p", { class: "mt-3" }, " Preset contains complete form values ", -1))
+                            e[6] || (e[6] = 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)
+                      t(y, { class: "mt-3" }, {
+                        title: o(() => e[7] || (e[7] = [
+                          v(" Snapshots ", -1)
                         ])),
                         icon: o(() => [
-                          t(l(x), {
+                          t(l(S), {
                             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, {
+                          n("div", Z, [
+                            e[9] || (e[9] = n("p", null, " Snapshots are stored locally in your browser ", -1)),
+                            n("div", $, [
+                              t(s, {
                                 class: "mb-3",
                                 "icon-start": "plus",
                                 "button-text": "Save snapshot",
                                 variant: "secondary",
-                                onClick: J
+                                onClick: L
                               }),
-                              t(u, {
+                              t(s, {
                                 class: "mb-3",
                                 "icon-start": "trash",
                                 "button-text": "Clear all snapshots",
                                 variant: "tertiary",
                                 disabled: !l(d).length,
-                                onClick: j
+                                onClick: E
                               }, 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),
+                            l(d).length ? (h(), g("div", ee, [
+                              t(Y, {
+                                modelValue: i.value,
+                                "onUpdate:modelValue": e[0] || (e[0] = (r) => i.value = r),
                                 label: "Select snapshot",
                                 placeholder: "Choose a snapshot",
                                 options: l(d)
                               }, null, 8, ["modelValue", "options"]),
-                              t(u, {
+                              t(s, {
                                 "icon-end": "Check",
                                 "button-text": "Load snapshot",
                                 variant: "tertiary",
-                                disabled: !s.value,
-                                onClick: L
+                                disabled: !i.value,
+                                onClick: P
                               }, null, 8, ["disabled"])
-                            ])) : (v(), N("div", W, e[7] || (e[7] = [
+                            ])) : (h(), g("div", te, e[8] || (e[8] = [
                               n("span", { class: "copy-small-regular" }, "No snapshots saved", -1)
                             ])))
                           ])
@@ -187,42 +195,77 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
                       })
                     ]),
                     _: 1,
-                    __: [9]
+                    __: [10]
                   }),
-                  t(l(O), null, {
+                  t(l(D), null, {
                     default: o(() => [
-                      t(b, null, {
-                        title: o(() => e[10] || (e[10] = [
-                          y(" Load from JSON-LD ", -1)
+                      t(y, null, {
+                        title: o(() => e[11] || (e[11] = [
+                          v(" Load from JSON-LD ", -1)
                         ])),
                         icon: o(() => [
-                          t(l(x), {
+                          t(l(S), {
                             size: 32,
                             color: "#009fe3"
                           })
                         ]),
                         default: o(() => [
-                          n("div", X, [
-                            t(H, {
+                          n("div", oe, [
+                            t(Q, {
                               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
+                              "show-error": !!u.value,
+                              "error-message": u.value
                             }, null, 8, ["modelValue", "show-error", "error-message"]),
-                            n("div", Z, [
-                              t(u, {
+                            n("div", ae, [
+                              t(s, {
                                 "button-text": "Generate JSON-LD in textarea",
                                 variant: "secondary",
-                                onClick: P
+                                onClick: j
                               }),
-                              t(u, {
+                              t(s, {
                                 "icon-end": "Check",
                                 "button-text": "Load from json-ld",
                                 variant: "primary",
                                 disabled: !c.value,
-                                onClick: D
+                                onClick: T
+                              }, null, 8, ["disabled"])
+                            ])
+                          ])
+                        ]),
+                        _: 1
+                      }),
+                      t(y, { class: "mt-3" }, {
+                        title: o(() => e[12] || (e[12] = [
+                          v(" Edit by ID ", -1)
+                        ])),
+                        icon: o(() => [
+                          t(l(S), {
+                            size: 32,
+                            color: "#009fe3"
+                          })
+                        ]),
+                        default: o(() => [
+                          n("div", le, [
+                            t(K, {
+                              modelValue: m.value,
+                              "onUpdate:modelValue": e[2] || (e[2] = (r) => m.value = r),
+                              label: "ID",
+                              placeholder: "Enter ID to edit",
+                              "add-on-text": !1,
+                              "date-picker": !1,
+                              "info-icon": !1,
+                              "show-end-icon": !1,
+                              "pre-icon": !1
+                            }, null, 8, ["modelValue"]),
+                            n("div", ne, [
+                              t(s, {
+                                "button-text": "Open edit mode",
+                                variant: "primary",
+                                disabled: !m.value,
+                                onClick: _
                               }, null, 8, ["disabled"])
                             ])
                           ])
@@ -245,5 +288,5 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
   }
 });
 export {
-  me as default
+  Oe as default
 };