mktcms 0.2.16 → 0.3.2

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

@@ -1,86 +1,155 @@
 <script setup>
-import { reactive } from "vue";
+import { computed, watch } from "vue";
 import FrontmatterInput from "./input.vue";
 defineOptions({
   name: "FrontmatterForm"
 });
 const props = defineProps({
-  label: { type: String, required: false, default: "" },
-  depth: { type: Number, required: false, default: 0 }
+  depth: { type: Number, required: false, default: 0 },
+  schema: { type: [Object, null], required: true }
 });
 const frontmatter = defineModel("frontmatter", { type: null, ...{
   required: true
 } });
-const openState = reactive({});
-function isBoolean(value) {
-  return typeof value === "boolean";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function isNumber(value) {
-  return typeof value === "number";
+function isBooleanSchema(schema) {
+  return isRecord(schema) && schema.type === "boolean";
 }
 function isObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+  return isRecord(value);
+}
+function isArraySchema(schema) {
+  return isRecord(schema) && schema.type === "array";
+}
+function isObjectSchema(schema) {
+  return isRecord(schema) && schema.type === "object";
 }
-function arrayItemLabel(index) {
-  return `Element ${index + 1}`;
+function isPrimitiveSchema(schema) {
+  return isRecord(schema) && ["string", "number", "date", "datetime"].includes(schema.type ?? "");
 }
-function objectKeys(value) {
-  return Object.keys(value);
+function isSchemaMap(schema) {
+  return isRecord(schema) && !("type" in schema);
 }
-function createEmptyLike(value) {
-  if (Array.isArray(value)) {
+function schemaEntries(schema) {
+  return Object.entries(schema);
+}
+function createDefaultFromSchema(schema) {
+  if (!schema || !schema.type) {
+    return "";
+  }
+  if (schema.type === "array") {
     return [];
   }
-  if (isObject(value)) {
+  if (schema.type === "object") {
     const next = {};
-    for (const key of Object.keys(value)) {
-      next[key] = createEmptyLike(value[key]);
+    const properties = schema.properties ?? {};
+    for (const key of Object.keys(properties)) {
+      next[key] = createDefaultFromSchema(properties[key]);
     }
     return next;
   }
-  if (isBoolean(value)) {
+  if (schema.type === "boolean") {
     return false;
   }
-  if (isNumber(value)) {
+  if (schema.type === "number") {
     return 0;
   }
   return "";
 }
-function addArrayItem(arrayRef) {
-  if (arrayRef.length === 0) {
-    arrayRef.push("");
+function ensureInitializedFromSchema() {
+  const schema = props.schema;
+  if (!schema) {
     return;
   }
-  const lastItem = arrayRef[arrayRef.length - 1];
-  arrayRef.push(createEmptyLike(lastItem));
-}
-function removeArrayItem(arrayRef, index) {
-  if (arrayRef.length <= 1) {
+  if (isSchemaMap(schema)) {
+    if (!isObject(frontmatter.value)) {
+      frontmatter.value = {};
+    }
+    for (const [key, fieldSchema] of schemaEntries(schema)) {
+      if (frontmatter.value[key] === void 0) {
+        frontmatter.value[key] = createDefaultFromSchema(fieldSchema);
+      }
+    }
     return;
   }
-  arrayRef.splice(index, 1);
-}
-function moveArrayItem(arrayRef, from, to) {
-  if (to < 0 || to >= arrayRef.length || from === to) {
+  if (isObjectSchema(schema)) {
+    if (!isObject(frontmatter.value)) {
+      frontmatter.value = {};
+    }
+    const properties = schema.properties ?? {};
+    for (const [key, fieldSchema] of schemaEntries(properties)) {
+      if (frontmatter.value[key] === void 0) {
+        frontmatter.value[key] = createDefaultFromSchema(fieldSchema);
+      }
+    }
     return;
   }
-  const [item] = arrayRef.splice(from, 1);
-  arrayRef.splice(to, 0, item);
+  if (isArraySchema(schema) && !Array.isArray(frontmatter.value)) {
+    frontmatter.value = [];
+  }
 }
-function arrayItemStateKey(index) {
-  return `array-${index}`;
+watch(
+  () => props.schema,
+  () => {
+    ensureInitializedFromSchema();
+  },
+  { immediate: true, deep: true }
+);
+const objectSchemaEntries = computed(() => {
+  if (!props.schema) {
+    return [];
+  }
+  if (isSchemaMap(props.schema)) {
+    return schemaEntries(props.schema);
+  }
+  if (isObjectSchema(props.schema)) {
+    return schemaEntries(props.schema.properties ?? {});
+  }
+  return [];
+});
+const arrayItemSchema = computed(() => {
+  if (!props.schema || !isArraySchema(props.schema)) {
+    return null;
+  }
+  return props.schema.items ?? null;
+});
+function addArrayItem(arrayRef, itemSchema) {
+  arrayRef.push(createDefaultFromSchema(itemSchema));
 }
-function objectItemStateKey(key) {
-  return `object-${key}`;
+function getFieldLabel(key, fieldSchema) {
+  return fieldSchema.label || key;
 }
-function isOpen(key) {
-  if (typeof openState[key] === "undefined") {
-    openState[key] = false;
+function getInputTypeFromSchema(schema) {
+  if (!schema || !schema.type) {
+    return "text";
+  }
+  if (schema.type === "number") {
+    return "number";
   }
-  return openState[key];
+  if (schema.type === "date") {
+    return "date";
+  }
+  if (schema.type === "datetime") {
+    return "datetime-local";
+  }
+  return "text";
 }
-function toggleOpen(key) {
-  openState[key] = !isOpen(key);
+function getUiHintFromSchema(schema) {
+  if (!schema || schema.type !== "string") {
+    return void 0;
+  }
+  if (schema["x-ui"] === "image" || schema["x-ui"] === "pdf" || schema["x-ui"] === "file") {
+    return schema["x-ui"];
+  }
+  return void 0;
+}
+function removeArrayItem(arrayRef, index) {
+  if (arrayRef.length <= 1) {
+    return;
+  }
+  arrayRef.splice(index, 1);
 }
 </script>
 
@@ -96,86 +165,24 @@ function toggleOpen(key) {
   'bg-gray-100/90': props.depth >= 5
 }"
   >
-    <p
-      v-if="props.label"
-      class="font-bold text-[15px]"
-    >
-      {{ props.label }}
-    </p>
-
-    <template v-if="Array.isArray(frontmatter)">
+    <template v-if="props.schema && isArraySchema(props.schema) && Array.isArray(frontmatter)">
       <div
         v-for="(item, index) in frontmatter"
         :key="index"
-        class="flex flex-col gap-0 border border-gray-200 rounded-sm bg-white/50 overflow-hidden"
+        class="flex flex-col gap-2"
       >
-        <div class="flex items-center justify-between gap-2 px-3 py-2">
+        <div class="flex items-center justify-end gap-2">
           <button
-            v-if="!isBoolean(item)"
             type="button"
-            class="flex-1 flex items-center gap-2 min-w-0 text-left rounded-sm px-2 py-1 transition-colors duration-200 hover:bg-gray-200/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300"
-            :aria-expanded="isOpen(arrayItemStateKey(index))"
-            @click="toggleOpen(arrayItemStateKey(index))"
+            class="button secondary small"
+            :disabled="frontmatter.length <= 1"
+            @click="removeArrayItem(frontmatter, index)"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-4 transition-transform duration-300"
-              :class="{ 'rotate-180': isOpen(arrayItemStateKey(index)) }"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="m19.5 8.25-7.5 7.5-7.5-7.5"
-              />
-            </svg>
-            <span class="font-bold text-sm">{{ arrayItemLabel(index) }}</span>
+            Entfernen
           </button>
-
-          <div
-            v-else
-            class="flex-1 min-w-0 px-2 py-1"
-          >
-            <span class="font-bold text-sm">{{ arrayItemLabel(index) }}</span>
-          </div>
-
-          <div class="flex items-center gap-1">
-            <button
-              type="button"
-              class="button secondary small"
-              :disabled="index === 0"
-              @click="moveArrayItem(frontmatter, index, index - 1)"
-            >
-              ↑
-            </button>
-
-            <button
-              type="button"
-              class="button secondary small"
-              :disabled="index === frontmatter.length - 1"
-              @click="moveArrayItem(frontmatter, index, index + 1)"
-            >
-              ↓
-            </button>
-
-            <button
-              type="button"
-              class="button secondary small"
-              :disabled="frontmatter.length <= 1"
-              @click="removeArrayItem(frontmatter, index)"
-            >
-              Entfernen
-            </button>
-          </div>
         </div>
 
-        <div
-          v-if="isBoolean(item)"
-          class="px-3 pb-3"
-        >
+        <div v-if="isBooleanSchema(arrayItemSchema)">
           <label class="inline-flex items-center">
             <input
               v-model="frontmatter[index]"
@@ -185,110 +192,85 @@ function toggleOpen(key) {
           </label>
         </div>
 
-        <div
-          v-else
-          class="grid transition-[grid-template-rows] duration-300 ease-in-out"
-          :class="isOpen(arrayItemStateKey(index)) ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr]'"
-        >
-          <div class="overflow-hidden px-3 pb-3">
-            <FrontmatterInput
-              v-if="typeof item === 'string' || isNumber(item)"
-              v-model:value="frontmatter[index]"
-              label=""
-            />
+        <FrontmatterInput
+          v-else-if="isPrimitiveSchema(arrayItemSchema)"
+          v-model:value="frontmatter[index]"
+          label=""
+          :input-type="getInputTypeFromSchema(arrayItemSchema)"
+          :ui-hint="getUiHintFromSchema(arrayItemSchema)"
+        />
 
-            <FrontmatterForm
-              v-else-if="isObject(item) || Array.isArray(item)"
-              v-model:frontmatter="frontmatter[index]"
-              label=""
-              :depth="props.depth + 1"
-            />
+        <FrontmatterForm
+          v-else-if="isObjectSchema(arrayItemSchema) || isArraySchema(arrayItemSchema)"
+          v-model:frontmatter="frontmatter[index]"
+          :schema="arrayItemSchema"
+          :depth="props.depth + 1"
+        />
 
-            <FrontmatterInput
-              v-else
-              v-model:value="frontmatter[index]"
-              label=""
-            />
-          </div>
-        </div>
+        <FrontmatterInput
+          v-else
+          v-model:value="frontmatter[index]"
+          label=""
+        />
       </div>
 
       <button
         type="button"
         class="button secondary small self-start"
-        @click="addArrayItem(frontmatter)"
+        @click="addArrayItem(frontmatter, arrayItemSchema)"
       >
         Element hinzufügen
       </button>
     </template>
 
-    <template v-else>
+    <template v-else-if="objectSchemaEntries.length > 0 && isObject(frontmatter)">
       <div
-        v-for="key in objectKeys(frontmatter)"
-        :key="key"
-        class="flex flex-col gap-0 border border-gray-200 rounded-sm bg-white/45 overflow-hidden"
+        v-for="entry in objectSchemaEntries"
+        :key="entry[0]"
+        class="flex flex-col gap-1"
       >
         <label
-          v-if="isBoolean(frontmatter[key])"
-          class="w-full inline-flex items-center px-3 py-2 font-bold text-sm"
+          v-if="isBooleanSchema(entry[1])"
+          class="w-full inline-flex items-center font-bold text-sm"
         >
           <input
-            v-model="frontmatter[key]"
+            v-model="frontmatter[entry[0]]"
             type="checkbox"
             class="mr-2"
           >
-          <span>{{ key }}</span>
+          <span>{{ getFieldLabel(entry[0], entry[1]) }}</span>
         </label>
 
-        <button
-          v-else
-          type="button"
-          class="w-full flex items-center gap-2 min-w-0 text-left px-3 py-2 transition-colors duration-200 hover:bg-gray-200/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300"
-          :aria-expanded="isOpen(objectItemStateKey(key))"
-          @click="toggleOpen(objectItemStateKey(key))"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="size-4 transition-transform duration-300"
-            :class="{ 'rotate-180': isOpen(objectItemStateKey(key)) }"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="m19.5 8.25-7.5 7.5-7.5-7.5"
-            />
-          </svg>
-          <span class="font-bold text-sm">{{ key }}</span>
-        </button>
+        <template v-else>
+          <p class="font-bold text-sm">
+            {{ getFieldLabel(entry[0], entry[1]) }}
+          </p>
 
-        <div
-          v-if="!isBoolean(frontmatter[key])"
-          class="grid transition-[grid-template-rows] duration-300 ease-in-out"
-          :class="isOpen(objectItemStateKey(key)) ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr]'"
-        >
-          <div class="overflow-hidden px-3 pb-3">
-            <FrontmatterInput
-              v-if="typeof frontmatter[key] === 'string' || isNumber(frontmatter[key])"
-              v-model:value="frontmatter[key]"
-            />
+          <FrontmatterInput
+            v-if="isPrimitiveSchema(entry[1])"
+            v-model:value="frontmatter[entry[0]]"
+            :input-type="getInputTypeFromSchema(entry[1])"
+            :ui-hint="getUiHintFromSchema(entry[1])"
+          />
 
-            <FrontmatterForm
-              v-else-if="isObject(frontmatter[key]) || Array.isArray(frontmatter[key])"
-              v-model:frontmatter="frontmatter[key]"
-              label=""
-              :depth="props.depth + 1"
-            />
+          <FrontmatterForm
+            v-else-if="isObjectSchema(entry[1]) || isArraySchema(entry[1])"
+            v-model:frontmatter="frontmatter[entry[0]]"
+            :schema="entry[1]"
+            :depth="props.depth + 1"
+          />
 
-            <FrontmatterInput
-              v-else
-              v-model:value="frontmatter[key]"
-            />
-          </div>
-        </div>
+          <FrontmatterInput
+            v-else
+            v-model:value="frontmatter[entry[0]]"
+          />
+        </template>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="text-sm text-gray-600">
+        Keine Felder in der Frontmatter-Konfiguration vorhanden.
       </div>
     </template>
   </div>

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
-    label?: string;
     depth?: number;
+    schema: Record<string, any> | null;
 };
 type __VLS_ModelProps = {
     'frontmatter': any;
@@ -11,7 +11,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:frontmatter"?: ((value: any) => any) | undefined;
 }>, {
-    label: string;
     depth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/content/editor/frontmatter/input.d.vue.ts

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     label?: string;
+    inputType?: 'text' | 'number' | 'date' | 'datetime-local';
+    uiHint?: 'image' | 'pdf' | 'file';
 };
 type __VLS_ModelProps = {
     'value': string | number;
@@ -11,6 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:value"?: ((value: string | number) => any) | undefined;
 }>, {
     label: string;
+    uiHint: "image" | "pdf" | "file";
+    inputType: "text" | "number" | "date" | "datetime-local";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,13 +1,22 @@
 <script setup>
 import { computed, ref } from "vue";
-import SelectFile from "../selectFile/index.vue";
+import FilePickerModal from "./filePicker/modal.vue";
 const props = defineProps({
-  label: { type: String, required: false, default: "" }
+  label: { type: String, required: false, default: "" },
+  inputType: { type: String, required: false, default: "text" },
+  uiHint: { type: String, required: false, default: void 0 }
 });
 const value = defineModel("value", { type: [String, Number], ...{
   required: true
 } });
-const isNumberInput = computed(() => typeof value.value === "number");
+const isPickerOpen = ref(false);
+const resolvedInputType = computed(() => {
+  if (props.inputType !== "text") {
+    return props.inputType;
+  }
+  return typeof value.value === "number" ? "number" : "text";
+});
+const isNumberInput = computed(() => resolvedInputType.value === "number");
 const inputValue = computed({
   get() {
     return `${value.value ?? ""}`;
@@ -21,7 +30,21 @@ const inputValue = computed({
     value.value = newValue;
   }
 });
-const showFileSelect = ref(false);
+const pickerButtonLabel = computed(() => {
+  if (props.uiHint === "image") {
+    return "Bild ausw\xE4hlen";
+  }
+  if (props.uiHint === "pdf") {
+    return "PDF ausw\xE4hlen";
+  }
+  if (props.uiHint === "file") {
+    return "Datei ausw\xE4hlen";
+  }
+  return "";
+});
+function onPickerSelect(path) {
+  value.value = path;
+}
 </script>
 
 <template>
@@ -32,41 +55,29 @@ const showFileSelect = ref(false);
     >
       {{ props.label }}
     </label>
-    <div class="relative">
+    <div class="flex items-center gap-2">
       <input
         v-model="inputValue"
-        :type="isNumberInput ? 'number' : 'text'"
+        :type="resolvedInputType"
         class="w-full"
       >
+
       <button
-        v-if="!isNumberInput"
+        v-if="props.uiHint"
         type="button"
-        class="absolute top-1/2 right-2 -translate-y-1/2 button secondary small"
-        @click="showFileSelect = true"
+        class="button secondary small whitespace-nowrap"
+        @click="isPickerOpen = true"
       >
-        <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="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-          />
-        </svg>
+        {{ pickerButtonLabel }}
       </button>
     </div>
-    <SelectFile
-      v-if="!isNumberInput"
-      :is-open="showFileSelect"
-      @close="showFileSelect = false"
-      @select="(filePath) => {
-  value = filePath;
-}"
+
+    <FilePickerModal
+      v-if="props.uiHint"
+      :is-open="isPickerOpen"
+      :ui-hint="props.uiHint"
+      @close="isPickerOpen = false"
+      @select="onPickerSelect"
     />
   </div>
 </template>

package/dist/runtime/app/components/content/editor/frontmatter/input.vue.d.ts

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     label?: string;
+    inputType?: 'text' | 'number' | 'date' | 'datetime-local';
+    uiHint?: 'image' | 'pdf' | 'file';
 };
 type __VLS_ModelProps = {
     'value': string | number;
@@ -11,6 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:value"?: ((value: string | number) => any) | undefined;
 }>, {
     label: string;
+    uiHint: "image" | "pdf" | "file";
+    inputType: "text" | "number" | "date" | "datetime-local";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/editor/frontmatter/modal.d.vue.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     isOpen: boolean;
+    schema: Record<string, any> | null;
 };
 type __VLS_ModelProps = {
     'frontmatter': any;