mktcms 0.3.6 → 0.3.7

package/dist/module.json

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

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

@@ -29,6 +29,30 @@ function isObjectSchema(schema) {
 function isPrimitiveSchema(schema) {
   return isRecord(schema) && ["string", "number", "date", "datetime"].includes(schema.type ?? "");
 }
+function isSelectSingleSchema(schema) {
+  if (!isRecord(schema)) {
+    return false;
+  }
+  return schema["x-ui"] === "select-single" || schema.type === "string" && Array.isArray(schema.enum);
+}
+function isSelectMultipleSchema(schema) {
+  if (!isRecord(schema)) {
+    return false;
+  }
+  if (schema["x-ui"] === "select-multiple") {
+    return true;
+  }
+  if (schema.type !== "array") {
+    return false;
+  }
+  if (Array.isArray(schema.enum)) {
+    return true;
+  }
+  if (!isRecord(schema.items)) {
+    return false;
+  }
+  return schema.items.type === "string" && Array.isArray(schema.items.enum);
+}
 function isSchemaMap(schema) {
   return isRecord(schema) && !("type" in schema);
 }
@@ -39,7 +63,18 @@ function createDefaultFromSchema(schema) {
   if (!schema || !schema.type) {
     return "";
   }
+  if (isSelectSingleSchema(schema)) {
+    const options = getSelectSingleOptionsFromSchema(schema);
+    const firstOption = options[0];
+    if (firstOption) {
+      return firstOption.value;
+    }
+    return "";
+  }
   if (schema.type === "array") {
+    if (isSelectMultipleSchema(schema)) {
+      return [];
+    }
     return [];
   }
   if (schema.type === "object") {
@@ -58,6 +93,43 @@ function createDefaultFromSchema(schema) {
   }
   return "";
 }
+function getSelectOptionsFromSchema(schema) {
+  if (!schema) {
+    return [];
+  }
+  const rawOptions = Array.isArray(schema.oneOf) ? schema.oneOf : Array.isArray(schema.enum) ? schema.enum.map((value) => ({ value })) : [];
+  return rawOptions.filter((option) => option !== null && option !== void 0).map((option) => {
+    if (typeof option === "string" || typeof option === "number") {
+      return {
+        label: String(option),
+        value: String(option)
+      };
+    }
+    if (isRecord(option) && option.value !== void 0 && option.value !== null) {
+      const optionLabel = "label" in option ? option.label : void 0;
+      return {
+        label: String(optionLabel ?? option.value),
+        value: String(option.value)
+      };
+    }
+    return null;
+  }).filter((option) => option !== null);
+}
+function getSelectSingleOptionsFromSchema(schema) {
+  return getSelectOptionsFromSchema(schema);
+}
+function getSelectMultipleOptionsFromSchema(schema) {
+  if (!schema || !isArraySchema(schema)) {
+    return [];
+  }
+  if (Array.isArray(schema.enum) || Array.isArray(schema.oneOf)) {
+    return getSelectOptionsFromSchema(schema);
+  }
+  if (schema.items && isRecord(schema.items)) {
+    return getSelectOptionsFromSchema(schema.items);
+  }
+  return [];
+}
 function ensureInitializedFromSchema() {
   const schema = props.schema;
   if (!schema) {
@@ -192,6 +264,14 @@ function removeArrayItem(arrayRef, index) {
           </label>
         </div>
 
+        <FrontmatterInput
+          v-else-if="isSelectSingleSchema(arrayItemSchema)"
+          v-model:value="frontmatter[index]"
+          label=""
+          :select-options="getSelectSingleOptionsFromSchema(arrayItemSchema)"
+          select-mode="single"
+        />
+
         <FrontmatterInput
           v-else-if="isPrimitiveSchema(arrayItemSchema)"
           v-model:value="frontmatter[index]"
@@ -247,7 +327,21 @@ function removeArrayItem(arrayRef, index) {
           </p>
 
           <FrontmatterInput
-            v-if="isPrimitiveSchema(entry[1])"
+            v-if="isSelectSingleSchema(entry[1])"
+            v-model:value="frontmatter[entry[0]]"
+            :select-options="getSelectSingleOptionsFromSchema(entry[1])"
+            select-mode="single"
+          />
+
+          <FrontmatterInput
+            v-else-if="isSelectMultipleSchema(entry[1])"
+            v-model:value="frontmatter[entry[0]]"
+            :select-options="getSelectMultipleOptionsFromSchema(entry[1])"
+            select-mode="multiple"
+          />
+
+          <FrontmatterInput
+            v-else-if="isPrimitiveSchema(entry[1])"
             v-model:value="frontmatter[entry[0]]"
             :input-type="getInputTypeFromSchema(entry[1])"
             :ui-hint="getUiHintFromSchema(entry[1])"

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

@@ -2,19 +2,29 @@ type __VLS_Props = {
     label?: string;
     inputType?: 'text' | 'number' | 'date' | 'datetime-local';
     uiHint?: 'image' | 'pdf' | 'file';
+    selectMode?: 'single' | 'multiple';
+    selectOptions?: Array<{
+        label: string;
+        value: string | number;
+    }>;
 };
 type __VLS_ModelProps = {
-    'value': string | number;
+    'value': string | number | Array<string | number>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: string | number) => any;
+    "update:value": (value: string | number | (string | number)[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:value"?: ((value: string | number) => any) | undefined;
+    "onUpdate:value"?: ((value: string | number | (string | number)[]) => any) | undefined;
 }>, {
     label: string;
     uiHint: "image" | "pdf" | "file";
     inputType: "text" | "number" | "date" | "datetime-local";
+    selectMode: "single" | "multiple";
+    selectOptions: Array<{
+        label: string;
+        value: string | number;
+    }>;
 }, {}, {}, {}, 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

@@ -4,12 +4,15 @@ import FilePickerModal from "./filePicker/modal.vue";
 const props = defineProps({
   label: { type: String, required: false, default: "" },
   inputType: { type: String, required: false, default: "text" },
-  uiHint: { type: String, required: false, default: void 0 }
+  uiHint: { type: String, required: false, default: void 0 },
+  selectMode: { type: String, required: false, default: void 0 },
+  selectOptions: { type: Array, required: false, default: () => [] }
 });
-const value = defineModel("value", { type: [String, Number], ...{
+const value = defineModel("value", { type: [String, Number, Array], ...{
   required: true
 } });
 const isPickerOpen = ref(false);
+const hasSelectInput = computed(() => props.selectMode === "single" || props.selectMode === "multiple");
 const resolvedInputType = computed(() => {
   if (props.inputType !== "text") {
     return props.inputType;
@@ -17,6 +20,14 @@ const resolvedInputType = computed(() => {
   return typeof value.value === "number" ? "number" : "text";
 });
 const isNumberInput = computed(() => resolvedInputType.value === "number");
+function normalizeOptionValue(optionValue) {
+  for (const option of props.selectOptions) {
+    if (String(option.value) === optionValue) {
+      return option.value;
+    }
+  }
+  return optionValue;
+}
 const inputValue = computed({
   get() {
     return `${value.value ?? ""}`;
@@ -30,6 +41,37 @@ const inputValue = computed({
     value.value = newValue;
   }
 });
+const singleSelectValue = computed({
+  get() {
+    if (Array.isArray(value.value)) {
+      return value.value.length > 0 ? String(value.value[0]) : "";
+    }
+    return `${value.value ?? ""}`;
+  },
+  set(newValue) {
+    value.value = normalizeOptionValue(newValue);
+  }
+});
+function isMultipleOptionSelected(optionValue) {
+  if (!Array.isArray(value.value)) {
+    return false;
+  }
+  return value.value.some((selected) => String(selected) === String(optionValue));
+}
+function toggleMultipleOption(optionValue, isChecked) {
+  const normalizedValue = normalizeOptionValue(String(optionValue));
+  const currentValues = Array.isArray(value.value) ? [...value.value] : [];
+  if (isChecked) {
+    if (!currentValues.some((selected) => String(selected) === String(normalizedValue))) {
+      currentValues.push(normalizedValue);
+    }
+  } else {
+    const nextValues = currentValues.filter((selected) => String(selected) !== String(normalizedValue));
+    value.value = nextValues;
+    return;
+  }
+  value.value = currentValues;
+}
 const pickerButtonLabel = computed(() => {
   if (props.uiHint === "image") {
     return "Bild ausw\xE4hlen";
@@ -55,7 +97,43 @@ function onPickerSelect(path) {
     >
       {{ props.label }}
     </label>
-    <div class="flex items-center gap-2">
+
+    <select
+      v-if="hasSelectInput && props.selectMode === 'single'"
+      v-model="singleSelectValue"
+      class="w-full"
+    >
+      <option
+        v-for="option in props.selectOptions"
+        :key="`${option.value}`"
+        :value="`${option.value}`"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+
+    <div
+      v-else-if="hasSelectInput && props.selectMode === 'multiple'"
+      class="flex flex-col gap-2 w-full"
+    >
+      <label
+        v-for="option in props.selectOptions"
+        :key="`${option.value}`"
+        class="inline-flex items-center gap-2"
+      >
+        <input
+          type="checkbox"
+          :checked="isMultipleOptionSelected(option.value)"
+          @change="toggleMultipleOption(option.value, $event.target.checked)"
+        >
+        {{ option.label }}
+      </label>
+    </div>
+
+    <div
+      v-else
+      class="flex items-center gap-2"
+    >
       <input
         v-model="inputValue"
         :type="resolvedInputType"

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

@@ -2,19 +2,29 @@ type __VLS_Props = {
     label?: string;
     inputType?: 'text' | 'number' | 'date' | 'datetime-local';
     uiHint?: 'image' | 'pdf' | 'file';
+    selectMode?: 'single' | 'multiple';
+    selectOptions?: Array<{
+        label: string;
+        value: string | number;
+    }>;
 };
 type __VLS_ModelProps = {
-    'value': string | number;
+    'value': string | number | Array<string | number>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: string | number) => any;
+    "update:value": (value: string | number | (string | number)[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:value"?: ((value: string | number) => any) | undefined;
+    "onUpdate:value"?: ((value: string | number | (string | number)[]) => any) | undefined;
 }>, {
     label: string;
     uiHint: "image" | "pdf" | "file";
     inputType: "text" | "number" | "date" | "datetime-local";
+    selectMode: "single" | "multiple";
+    selectOptions: Array<{
+        label: string;
+        value: string | number;
+    }>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",