mktcms 0.1.21 → 0.1.23

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "mktcms",
   "configKey": "mktcms",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -45,22 +45,52 @@ const module$1 = defineNuxtModule({
       handler: resolver.resolve("./runtime/server/api/admin/logout")
     });
     addServerHandler({
-      route: "/api/admin/content/list",
-      handler: resolver.resolve("./runtime/server/api/admin/content/list")
+      route: "/api/admin/list",
+      handler: resolver.resolve("./runtime/server/api/admin/list")
     });
     addServerHandler({
-      route: "/api/admin/content/:path",
-      method: "get",
-      handler: resolver.resolve("./runtime/server/api/admin/content/[path]")
+      route: "/api/admin/delete",
+      method: "delete",
+      handler: resolver.resolve("./runtime/server/api/admin/delete")
     });
     addServerHandler({
-      route: "/api/admin/content/:path",
+      route: "/api/admin/csv",
+      handler: resolver.resolve("./runtime/server/api/admin/csv")
+    });
+    addServerHandler({
+      route: "/api/admin/csv",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/admin/csv.post")
+    });
+    addServerHandler({
+      route: "/api/admin/md",
+      handler: resolver.resolve("./runtime/server/api/admin/md")
+    });
+    addServerHandler({
+      route: "/api/admin/md",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/admin/md.post")
+    });
+    addServerHandler({
+      route: "/api/admin/txt",
+      handler: resolver.resolve("./runtime/server/api/admin/txt")
+    });
+    addServerHandler({
+      route: "/api/admin/txt",
       method: "post",
-      handler: resolver.resolve("./runtime/server/api/admin/content/[path].post")
+      handler: resolver.resolve("./runtime/server/api/admin/txt.post")
+    });
+    addServerHandler({
+      route: "/api/admin/blob",
+      handler: resolver.resolve("./runtime/server/api/admin/blob")
+    });
+    addServerHandler({
+      route: "/api/admin/upload",
+      handler: resolver.resolve("./runtime/server/api/admin/upload")
     });
     addServerHandler({
-      route: "/api/admin/content/upload",
-      handler: resolver.resolve("./runtime/server/api/admin/content/upload")
+      route: "/api/admin/download",
+      handler: resolver.resolve("./runtime/server/api/admin/download")
     });
     addServerHandler({
       route: "/api/content/list",
@@ -77,14 +107,14 @@ const module$1 = defineNuxtModule({
         file: resolver.resolve("./runtime/app/pages/admin/index.vue")
       });
       pages.push({
-        name: "Admin Text Editor",
-        path: "/admin/edit/text/:path",
-        file: resolver.resolve("./runtime/app/pages/admin/edit/text/[path].vue")
+        name: "Admin Editor",
+        path: "/admin/edit/:path",
+        file: resolver.resolve("./runtime/app/pages/admin/edit/[path].vue")
       });
       pages.push({
-        name: "Admin Blob Editor",
-        path: "/admin/edit/blob/:path",
-        file: resolver.resolve("./runtime/app/pages/admin/edit/blob/[path].vue")
+        name: "Admin Delete",
+        path: "/admin/delete/:path",
+        file: resolver.resolve("./runtime/app/pages/admin/delete/[path].vue")
       });
       pages.push({
         name: "Admin New Content",

package/dist/runtime/app/components/admin.vue

@@ -5,5 +5,5 @@
 </template>
 
 <style>
-*{box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0}#mktcms-admin{--mktcms-primary-color:#3cb371;--mktcms-primary-color-hover:#45a049;background-color:#f9f9f9;margin:0 auto;max-width:800px;padding:20px}#mktcms-admin h1{color:#333}#mktcms-admin .button,#mktcms-admin button{background-color:var(--mktcms-primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s}#mktcms-admin .button:hover,#mktcms-admin button:hover{background-color:var(--mktcms-primary-color-hover)}#mktcms-admin .button.soft,#mktcms-admin button.soft{background-color:#eee;color:#666}#mktcms-admin .button.soft:hover,#mktcms-admin button.soft:hover{background-color:#ddd}#mktcms-admin .button-icon{height:20px;vertical-align:middle;width:20px}#mktcms-admin input[type=email],#mktcms-admin input[type=password],#mktcms-admin input[type=text],#mktcms-admin select,#mktcms-admin textarea{background-color:#fff;border:1px solid #ccc;border-radius:5px;font-size:16px;padding:10px;width:100%}#mktcms-admin .breadcrumbs{color:#888;font-size:1rem;margin:20px 0}#mktcms-admin .breadcrumbs a{background-color:#eee;border-radius:4px;color:#888;padding:2px 6px;text-decoration:none}#mktcms-admin .breadcrumbs a:hover{text-decoration:underline}#mktcms-admin .dirs,#mktcms-admin .files{display:flex;flex-direction:column;gap:8px}#mktcms-admin .dirs a,#mktcms-admin .files a{border-radius:4px;display:block;padding:8px 12px;text-decoration:none}#mktcms-admin .dirs a:hover,#mktcms-admin .files a:hover{text-decoration:underline}#mktcms-admin .files a{background-color:#fff;color:#555}#mktcms-admin .dirs a{background-color:#555;color:#fff;display:flex;justify-content:space-between}
+@import "../styles/admin.min.css";
 </style>

package/dist/runtime/app/components/content/breadcrumb.d.vue.ts

@@ -1,6 +1,3 @@
-type __VLS_Props = {
-    parts: string[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/breadcrumb.vue

@@ -1,20 +1,36 @@
 <script setup>
-defineProps({
-  parts: { type: Array, required: true }
-});
+import { useRoute } from "#app";
+const path = useRoute().params.path || "";
+const parts = path.split(":").filter((part) => part.length > 0);
+parts.unshift("Hauptordner");
 </script>
 
 <template>
-  <div class="breadcrumbs">
-    <NuxtLink to="/admin">Hauptordner</NuxtLink>
-    <span
+  <div class="text-gray-500 text-base mt-12 mb-6 flex items-center gap-1">
+    <div
       v-for="(part, index) in parts"
       :key="index"
+      class="flex items-center gap-1"
     >
-      /
+      <svg
+        v-if="index > 0"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m8.25 4.5 7.5 7.5-7.5 7.5"
+        />
+      </svg>
       <NuxtLink
         v-if="index < parts.length - 1"
-        :to="`/admin/${parts.slice(0, index + 1).join(':')}`"
+        :to="`/admin/${index > 0 ? parts.slice(1, index + 1).join(':') : ''}`"
+        class="button secondary small"
       >
         {{ part }}
       </NuxtLink>
@@ -24,6 +40,6 @@ defineProps({
       >
         {{ part }}
       </span>
-    </span>
+    </div>
   </div>
 </template>

package/dist/runtime/app/components/content/breadcrumb.vue.d.ts

@@ -1,6 +1,3 @@
-type __VLS_Props = {
-    parts: string[];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/delete.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { navigateTo } from "#app";
+import usePathParam from "../../composables/usePathParam";
+const { path, pathParts } = usePathParam();
+const parentPath = pathParts.slice(0, -1).join(":");
+async function deleteContent() {
+  await fetch(`/api/admin/delete?path=${path}`, {
+    method: "DELETE"
+  });
+  await navigateTo(`/admin/${parentPath}`);
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="text-2xl font-bold mb-4">
+      Datei löschen
+    </h1>
+    <p class="mb-4">
+      Sind Sie sicher, dass Sie
+      <strong>{{ pathParts[pathParts.length - 1] }}</strong>
+      aus
+      <strong>{{ parentPath || "Hauptordner" }}</strong>
+      löschen möchten? Die Datei kann nicht wiederhergestellt werden!
+    </p>
+    <div class="flex gap-2">
+      <NuxtLink
+        :to="`/admin/${parentPath}`"
+        class="button secondary flex-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+          />
+        </svg>
+        Abbrechen
+      </NuxtLink>
+      <button
+        class="button danger"
+        @click="deleteContent"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+          />
+        </svg>
+        Datei löschen
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/content/dirs.d.vue.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    path: string;
     dirs: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/app/components/content/dirs.vue

@@ -1,21 +1,37 @@
 <script setup>
+import usePathParam from "../../composables/usePathParam";
 defineProps({
-  path: { type: String, required: true },
   dirs: { type: Array, required: true }
 });
+const { path } = usePathParam();
 </script>
 
 <template>
-  <div class="dirs">
+  <div class="flex flex-col gap-2">
     <NuxtLink
       v-for="dir in dirs"
       :key="dir"
       :to="`/admin/${path ? path + ':' : ''}${dir}`"
+      class="button secondary"
     >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-6 opacity-20"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776"
+        />
+      </svg>
       <span>
         {{ dir }}
       </span>
-      <span>
+      <span class="ml-auto">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"

package/dist/runtime/app/components/content/dirs.vue.d.ts

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    path: string;
     dirs: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/app/components/content/editor/csv.vue

@@ -0,0 +1,310 @@
+<script setup>
+import { ref } from "vue";
+import Saved from "../saved.vue";
+import usePathParam from "../../../composables/usePathParam";
+import { useFetch } from "#imports";
+const { path } = usePathParam();
+const { data: table } = await useFetch(`/api/admin/csv?path=${path}`);
+const isSaving = ref(false);
+const savingSuccessful = ref(false);
+async function saveCsv() {
+  if (!table.value) return;
+  isSaving.value = true;
+  savingSuccessful.value = false;
+  try {
+    await useFetch(`/api/admin/csv?path=${path}`, {
+      method: "POST",
+      body: {
+        table: table.value
+      }
+    });
+    savingSuccessful.value = true;
+  } catch (e) {
+    console.error("Fehler beim Speichern der CSV-Datei:", e);
+  } finally {
+    isSaving.value = false;
+  }
+}
+function insertRow(atIndex) {
+  if (!table.value) return;
+  const newRow = [];
+  const headerCount = table.value.headers.length;
+  for (let i = 0; i < headerCount; i++) {
+    newRow[i] = "-";
+  }
+  table.value = {
+    headers: table.value.headers,
+    rows: [
+      ...table.value.rows.slice(0, atIndex),
+      newRow,
+      ...table.value.rows.slice(atIndex)
+    ]
+  };
+}
+function removeRow(rowIndex) {
+  if (!table.value) return;
+  table.value = {
+    headers: table.value.headers,
+    rows: table.value.rows.filter((_, index) => index !== rowIndex)
+  };
+}
+function moveRowUp(rowIndex) {
+  if (!table.value || rowIndex <= 0) return;
+  const row = table.value.rows.splice(rowIndex, 1)[0];
+  if (!row) return;
+  table.value = {
+    headers: table.value.headers,
+    rows: [
+      ...table.value.rows.slice(0, rowIndex - 1),
+      row,
+      ...table.value.rows.slice(rowIndex - 1)
+    ]
+  };
+}
+function moveRowDown(rowIndex) {
+  if (!table.value || rowIndex >= table.value.rows.length - 1) return;
+  const row = table.value.rows.splice(rowIndex, 1)[0];
+  if (!row) return;
+  table.value = {
+    headers: table.value.headers,
+    rows: [
+      ...table.value.rows.slice(0, rowIndex + 1),
+      row,
+      ...table.value.rows.slice(rowIndex + 1)
+    ]
+  };
+}
+const editingCell = ref(null);
+const editBuffer = ref("");
+function startEdit(rowIndex, colIndex) {
+  if (!table.value) return;
+  editingCell.value = { rowIndex, colIndex };
+  editBuffer.value = table.value.rows[rowIndex][colIndex] || "";
+}
+function saveEdit() {
+  if (!table.value) return;
+  if (!editingCell.value) return;
+  const { rowIndex, colIndex } = editingCell.value;
+  table.value.rows[rowIndex][colIndex] = editBuffer.value;
+  cancelEdit();
+}
+function cancelEdit() {
+  editingCell.value = null;
+  editBuffer.value = "";
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div
+      v-if="table"
+      class="bg-white"
+    >
+      <div class="flex items-center h-0 justify-center border border-gray-200 rounded-sm mb-6">
+        <button
+          type="button"
+          class="button small soft"
+          @click="insertRow(0)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 4.5v15m7.5-7.5h-15"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div>
+        <template
+          v-for="(r, rowIndex) in table.rows"
+          :key="rowIndex"
+        >
+          <div
+            class="flex items-stretch rounded-sm border border-gray-200"
+          >
+            <div class="flex-1 min-w-0 overflow-x-auto overflow-y-hidden">
+              <div class="grid grid-flow-col auto-cols-[minmax(160px,1fr)] max-[640px]:auto-cols-[minmax(220px,1fr)]">
+                <div
+                  v-for="(cell, colIndex) in r"
+                  :key="colIndex"
+                  class="p-1.5 border-r border-gray-200 box-border last:border-r-0"
+                >
+                  <div class="text-xs mb-1.5 leading-tight wrap-break-word flex items-center justify-between gap-1">
+                    <div class="font-bold">
+                      {{ table.headers[colIndex] || "Spalte " + (colIndex + 1) }}
+                    </div>
+                  </div>
+                  <div
+                    class="text-xs whitespace-pre-line wrap-break-word border border-gray-300/70 rounded bg-gray-50 p-1.5 min-h-9.5 leading-[1.35] box-border overflow-hidden line-clamp-4 h-[calc(4*1.35*1em+12px)] max-[640px]:line-clamp-3 max-[640px]:h-[calc(3*1.35*1em+12px)] cursor-pointer"
+                    :title="cell"
+                    @click="startEdit(rowIndex, colIndex)"
+                  >
+                    {{ cell || "\u2014" }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex-none flex flex-col items-start gap-1 p-1.5 border-l border-gray-200 bg-white max-[640px]:px-1 max-[640px]:gap-0.5">
+              <button
+                type="button"
+                class="button small"
+                :disabled="rowIndex === 0"
+                aria-label="Zeile nach oben"
+                title="Nach oben"
+                @click="moveRowUp(rowIndex)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+                  />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="button small"
+                :disabled="rowIndex === table.rows.length - 1"
+                aria-label="Zeile nach unten"
+                title="Nach unten"
+                @click="moveRowDown(rowIndex)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                  />
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="button small"
+                aria-label="Zeile löschen"
+                title="Löschen"
+                @click="removeRow(rowIndex)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="h-0 flex items-center justify-center border border-gray-200 rounded-sm my-6">
+            <button
+              type="button"
+              class="button small"
+              :disabled="table.headers.length === 0"
+              @click="insertRow(rowIndex + 1)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-4"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 4.5v15m7.5-7.5h-15"
+                />
+              </svg>
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="button w-full mt-3 justify-center"
+      @click="saveCsv"
+    >
+      <span v-if="isSaving">Speichern...</span>
+      <span v-else>Speichern</span>
+    </button>
+    <Saved v-if="savingSuccessful" />
+
+    <div
+      v-if="editingCell"
+      class="fixed inset-0 bg-black/45 flex items-center justify-center p-4 z-9999"
+      role="presentation"
+      @click.self="cancelEdit()"
+    >
+      <div
+        class="w-full max-w-180 bg-white rounded-[10px] border border-black/10 shadow-[0_10px_40px_rgba(0,0,0,0.28)] p-3.5 flex flex-col gap-2.5"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Zelle bearbeiten"
+      >
+        <div class="flex flex-col gap-0.5">
+          <div class="font-bold">
+            {{ table?.headers[editingCell.colIndex] || "Spalte " + (editingCell.colIndex + 1) }}
+          </div>
+        </div>
+
+        <textarea
+          id="csv-edit-textarea"
+          v-model="editBuffer"
+          class="w-full box-border p-2.5 border border-gray-300 rounded-lg resize-y min-h-40 font-[inherit] focus:outline-none focus:ring-2 focus:ring-emerald-500/30"
+          rows="8"
+        />
+
+        <div class="flex justify-end gap-2">
+          <button
+            type="button"
+            class="button"
+            @click="saveEdit()"
+          >
+            schließen
+          </button>
+          <button
+            type="button"
+            class="button secondary"
+            @click="cancelEdit()"
+          >
+            zurücksetzen
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/content/editor/{blob/image.d.vue.ts → frontmatter/form.d.vue.ts}

@@ -1,10 +1,10 @@
 type __VLS_ModelProps = {
-    'path'?: string;
+    'frontmatter': Record<string, any>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:path": (value: string | undefined) => any;
+    "update:frontmatter": (value: Record<string, any>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:path"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:frontmatter"?: ((value: Record<string, any>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/editor/frontmatter/form.vue

@@ -0,0 +1,17 @@
+<script setup>
+import FrontmatterInput from "./input.vue";
+const frontmatter = defineModel("frontmatter", { type: Object, ...{
+  required: true
+} });
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <FrontmatterInput
+      v-for="key in Object.keys(frontmatter)"
+      :key="key"
+      v-model:value="frontmatter[key]"
+      :label="key"
+    />
+  </div>
+</template>

package/dist/runtime/app/components/content/editor/{text/csv.d.vue.ts → frontmatter/form.vue.d.ts}

@@ -1,10 +1,10 @@
 type __VLS_ModelProps = {
-    'content'?: string;
+    'frontmatter': Record<string, any>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:content": (value: string) => any;
+    "update:frontmatter": (value: Record<string, any>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:content"?: ((value: string) => any) | undefined;
+    "onUpdate:frontmatter"?: ((value: Record<string, any>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;