@type32/yaml-editor-form 0.1.2

package/dist/runtime/components/YamlFormField.d.vue.ts

@@ -0,0 +1,56 @@
+import type { YamlFieldType } from "../types/types.js";
+/**
+ * YAML Form Field - Recursive Component
+ *
+ * Schema-driven field renderer with support for custom components.
+ * Uses centralized field type registry for extensibility.
+ *
+ * To add custom field types:
+ * 1. Define your field type in the fieldTypes prop
+ * 2. Provide a custom component via slot: #field-{component}
+ *
+ * Example:
+ * <YamlFormField :fieldTypes="[{ type: 'image', label: 'Image', icon: 'i-lucide-image', defaultValue: '', component: 'image' }]">
+ *   <template #field-image="{ modelValue, readonly }">
+ *     <MyImagePicker v-model="modelValue" :disabled="readonly" />
+ *   </template>
+ * </YamlFormField>
+ */
+type YamlValue = string | number | boolean | null | Date | YamlValue[] | {
+    [key: string]: YamlValue;
+};
+type __VLS_Props = {
+    fieldKey: string;
+    readonly?: boolean;
+    depth?: number;
+    /** Custom field type definitions (merged with defaults) */
+    fieldTypes?: YamlFieldType[];
+};
+type __VLS_ModelProps = {
+    modelValue: YamlValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_147: string, __VLS_148: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+    "update:modelValue": (value: YamlValue) => any;
+    "update:fieldKey": (newKey: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
+    "onUpdate:fieldKey"?: ((newKey: string) => any) | undefined;
+}>, {
+    readonly: boolean;
+    depth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/YamlFormField.vue

@@ -0,0 +1,492 @@
+<script setup>
+import { useYamlFieldTypes } from "../composables/useYamlFieldTypes";
+import { ref, watch, computed } from "vue";
+const modelValue = defineModel({ type: [String, Number, Boolean, null, Date, Array, Object], ...{ required: true } });
+const props = defineProps({
+  fieldKey: { type: String, required: true },
+  readonly: { type: Boolean, required: false, default: false },
+  depth: { type: Number, required: false, default: 0 },
+  fieldTypes: { type: Array, required: false }
+});
+const emit = defineEmits(["remove", "update:fieldKey"]);
+const {
+  fieldTypes,
+  getFieldType,
+  detectFieldType,
+  getDefaultValue,
+  getIcon,
+  getTypeMenuItems
+} = useYamlFieldTypes(props.fieldTypes);
+function isDateObject(val) {
+  return val instanceof Date && !isNaN(val.getTime());
+}
+function isDateString(val) {
+  if (typeof val !== "string") return false;
+  const isoDateRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(\.\d{3})?(Z|[+-]\d{2}:\d{2})?)?$/;
+  if (!isoDateRegex.test(val)) return false;
+  const date = new Date(val);
+  return !isNaN(date.getTime());
+}
+function isDateTimeString(val) {
+  if (typeof val !== "string") return false;
+  return /T\d{2}:\d{2}:\d{2}/.test(val) && isDateString(val);
+}
+function isStringArray(val) {
+  if (!Array.isArray(val)) return false;
+  if (val.length === 0) return false;
+  return val.every((item) => typeof item === "string");
+}
+function isPrimitiveArray(val) {
+  if (!Array.isArray(val)) return false;
+  if (val.length === 0) return false;
+  return val.every(
+    (item) => typeof item === "string" || typeof item === "number" || typeof item === "boolean" || item === null
+  );
+}
+const valueType = computed(() => {
+  const detectedType = detectFieldType(modelValue.value);
+  return detectedType.type;
+});
+const isEditingKey = ref(false);
+const editingKeyValue = ref(props.fieldKey);
+watch(() => props.fieldKey, (newKey) => {
+  editingKeyValue.value = newKey;
+});
+function startEditingKey() {
+  if (props.readonly) return;
+  editingKeyValue.value = props.fieldKey;
+  isEditingKey.value = true;
+}
+function saveKey() {
+  const trimmedValue = editingKeyValue.value?.trim();
+  if (trimmedValue && trimmedValue !== props.fieldKey) {
+    emit("update:fieldKey", trimmedValue);
+  }
+  isEditingKey.value = false;
+}
+function isValidConversion(fromType, toType) {
+  if (fromType === toType) return true;
+  if (fromType === "null") return true;
+  const conversionRules = {
+    // Primitives can convert to other primitives and arrays
+    "string": ["number", "boolean", "date", "datetime", "string-array", "null"],
+    "number": ["string", "boolean", "null"],
+    "boolean": ["string", "number", "null"],
+    // Dates can convert to strings and each other
+    "date": ["string", "datetime", "null"],
+    "datetime": ["string", "date", "null"],
+    // String arrays can convert to regular arrays and back to string
+    "string-array": ["array", "string", "null"],
+    // Arrays can only convert to string-array or null (converting to primitives is unsafe)
+    "array": ["string-array", "null"],
+    // Objects can only convert to null (converting to primitives is useless)
+    "object": ["null"]
+  };
+  const allowedConversions = conversionRules[fromType] || [];
+  return allowedConversions.includes(toType);
+}
+function convertType(newType) {
+  const currentType = valueType.value;
+  if (!isValidConversion(currentType, newType)) {
+    console.warn(`Invalid conversion from ${currentType} to ${newType}`);
+    return;
+  }
+  const isCurrentlyArray = Array.isArray(modelValue.value);
+  const isConvertingToNonArray = !["array", "string-array"].includes(newType);
+  if (newType === "string-array") {
+    if (Array.isArray(modelValue.value)) {
+      modelValue.value = modelValue.value.map((item) => String(item));
+    } else {
+      modelValue.value = [String(modelValue.value || "")];
+    }
+    return;
+  }
+  if (currentType === "date" && newType === "datetime" || currentType === "datetime" && newType === "date") {
+    const currentValue = modelValue.value;
+    if (newType === "datetime") {
+      if (typeof currentValue === "string") {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(currentValue)) {
+          modelValue.value = `${currentValue}T00:00:00`;
+        } else {
+          modelValue.value = currentValue;
+        }
+      } else {
+        const date = isDateObject(currentValue) ? currentValue : /* @__PURE__ */ new Date();
+        modelValue.value = date.toISOString();
+      }
+    } else {
+      if (typeof currentValue === "string") {
+        modelValue.value = currentValue.split("T")[0];
+      } else {
+        const date = isDateObject(currentValue) ? currentValue : /* @__PURE__ */ new Date();
+        modelValue.value = date.toISOString().split("T")[0];
+      }
+    }
+    return;
+  }
+  if (isCurrentlyArray && isConvertingToNonArray) {
+    const arr = modelValue.value;
+    const firstItem = arr.length > 0 && arr[0] !== void 0 ? arr[0] : null;
+    if (firstItem !== null) {
+      switch (newType) {
+        case "string":
+          modelValue.value = isDateObject(firstItem) ? firstItem.toISOString() : String(firstItem);
+          return;
+        case "number":
+          modelValue.value = Number(firstItem) || 0;
+          return;
+        case "boolean":
+          modelValue.value = Boolean(firstItem);
+          return;
+        case "date":
+          const dateVal = typeof firstItem === "string" ? new Date(firstItem) : /* @__PURE__ */ new Date();
+          modelValue.value = dateVal.toISOString().split("T")[0];
+          return;
+        case "datetime":
+          const dateTimeVal = typeof firstItem === "string" ? new Date(firstItem) : /* @__PURE__ */ new Date();
+          modelValue.value = dateTimeVal.toISOString();
+          return;
+      }
+    }
+  }
+  modelValue.value = getDefaultValue(newType);
+}
+function addArrayItem(itemType) {
+  if (!Array.isArray(modelValue.value)) return;
+  if (itemType) {
+    modelValue.value.push(getDefaultValue(itemType));
+    return;
+  }
+  if (modelValue.value.length === 0) {
+    modelValue.value.push({});
+    return;
+  }
+  const firstItem = modelValue.value[0];
+  const detectedType = detectFieldType(firstItem);
+  modelValue.value.push(getDefaultValue(detectedType.type));
+}
+function removeArrayItem(index) {
+  if (!Array.isArray(modelValue.value)) return;
+  modelValue.value.splice(index, 1);
+}
+function addArrayItemFromTemplate() {
+  if (!Array.isArray(modelValue.value)) return;
+  let templateObject = null;
+  let maxFields = 0;
+  for (const item of modelValue.value) {
+    if (typeof item === "object" && !Array.isArray(item) && item !== null) {
+      const fieldCount = Object.keys(item).length;
+      if (fieldCount > maxFields) {
+        maxFields = fieldCount;
+        templateObject = item;
+      }
+    }
+  }
+  if (templateObject) {
+    const newObject = {};
+    for (const key in templateObject) {
+      const value = templateObject[key];
+      const detectedType = detectFieldType(value);
+      newObject[key] = getDefaultValue(detectedType.type);
+    }
+    modelValue.value.push(newObject);
+  } else {
+    modelValue.value.push({});
+  }
+}
+const hasObjectTemplate = computed(() => {
+  if (!Array.isArray(modelValue.value) || modelValue.value.length === 0) return false;
+  return modelValue.value.some(
+    (item) => typeof item === "object" && !Array.isArray(item) && item !== null && Object.keys(item).length > 0
+  );
+});
+function addObjectField(fieldType = "string") {
+  if (typeof modelValue.value !== "object" || Array.isArray(modelValue.value) || !modelValue.value || isDateObject(modelValue.value)) return;
+  const obj = modelValue.value;
+  const newKey = `field_${Object.keys(obj).length + 1}`;
+  obj[newKey] = getDefaultValue(fieldType);
+}
+function removeObjectField(key) {
+  if (typeof modelValue.value !== "object" || Array.isArray(modelValue.value) || !modelValue.value || isDateObject(modelValue.value)) return;
+  const obj = modelValue.value;
+  delete obj[key];
+}
+const isOpen = ref(true);
+const isArrayItem = computed(() => {
+  return /^\[\d+\]$/.test(props.fieldKey);
+});
+const itemCount = computed(() => {
+  if (valueType.value === "array" && Array.isArray(modelValue.value)) {
+    return modelValue.value.length;
+  } else if (valueType.value === "object" && typeof modelValue.value === "object" && !Array.isArray(modelValue.value) && modelValue.value !== null) {
+    return Object.keys(modelValue.value).length;
+  }
+  return 0;
+});
+const indentClass = computed(() => {
+  return props.depth > 0 ? "pl-2" : "";
+});
+const typeOptions = computed(() => {
+  const currentType = valueType.value;
+  return fieldTypes.value.filter((ft) => isValidConversion(currentType, ft.type)).map((ft) => ({
+    label: ft.label,
+    icon: ft.icon,
+    onSelect: () => convertType(ft.type)
+  }));
+});
+const selectedType = computed(() => {
+  return {
+    icon: getIcon(valueType.value)
+  };
+});
+const addFieldOptions = computed(() => {
+  return getTypeMenuItems((type) => addObjectField(type));
+});
+const addArrayItemOptions = computed(() => {
+  return getTypeMenuItems((type) => addArrayItem(type));
+});
+</script>
+
+<template>
+    <div :class="indentClass" class="space-y-1">
+        <!-- For Objects and Arrays: Use Collapsible -->
+        <template v-if="valueType === 'object' || valueType === 'array'">
+            <!-- Edit mode for field key -->
+            <UInput
+                v-if="isEditingKey"
+                v-model="editingKeyValue"
+                size="xs"
+                autofocus
+                class="mb-1"
+                @blur="saveKey"
+                @keydown.enter="saveKey"
+                @keydown.esc="isEditingKey = false"
+            />
+
+            <!-- Collapsible for non-edit mode -->
+            <YamlCollapsible v-else v-model:open="isOpen" :default-open="true" :label="fieldKey">
+                <template #badge>
+                    <UBadge size="xs" variant="soft" color="neutral">{{ itemCount }}</UBadge>
+                </template>
+
+                <template #actions>
+                    <div class="flex items-center gap-1">
+                        <!-- Edit key button (hidden for array items) -->
+                        <UButton
+                            v-if="!readonly && !isEditingKey && !isArrayItem"
+                            icon="i-lucide-pencil"
+                            variant="ghost"
+                            size="xs"
+                            color="neutral"
+                            class="text-muted"
+                            @click.stop="startEditingKey"
+                        />
+
+                        <!-- Type selector -->
+                        <UDropdownMenu
+                            :items="[typeOptions]"
+                            :disabled="readonly"
+                            size="xs"
+                        >
+                            <UButton
+                                :icon="selectedType?.icon || 'i-heroicons-circle-question-mark'"
+                                variant="soft"
+                                size="xs"
+                                :disabled="readonly"
+                            />
+                        </UDropdownMenu>
+
+                        <!-- Remove button -->
+                        <UButton
+                            v-if="!readonly"
+                            icon="i-lucide-trash"
+                            variant="ghost"
+                            size="xs"
+                            color="error"
+                            @click.stop="emit('remove')"
+                        />
+                    </div>
+                </template>
+
+                <!-- Content inside collapsible - only arrays and objects -->
+            <!-- Array (Complex items - objects/arrays) -->
+            <div v-if="valueType === 'array'" class="space-y-2">
+                <div
+                    v-if="Array.isArray(modelValue) && modelValue.length === 0"
+                    class="text-center py-4 text-sm text-muted border border-dashed border-default rounded-lg"
+                >
+                    <UIcon name="i-lucide-brackets" class="w-8 h-8 mx-auto mb-2 opacity-50" />
+                    <p>Empty array</p>
+                    <p v-if="!readonly" class="text-xs mt-1">Click "Add Item" below</p>
+                </div>
+
+                <template v-else-if="Array.isArray(modelValue)">
+                    <div
+                        v-for="(item, index) in modelValue"
+                        :key="index"
+                        class="flex items-start gap-2"
+                    >
+                        <div v-if="item !== void 0" class="flex-1">
+                            <YamlFormField
+                                :model-value="item"
+                                :field-key="`[${index}]`"
+                                :readonly="readonly"
+                                :depth="depth + 1"
+                                :field-types="fieldTypes"
+                                @update:model-value="(val) => {
+  if (Array.isArray(modelValue)) modelValue[index] = val;
+}"
+                                @remove="removeArrayItem(index)"
+                            />
+                        </div>
+                    </div>
+                </template>
+
+                <div class="flex items-center gap-2">
+                    <UDropdownMenu
+                        v-if="!readonly"
+                        :items="[addArrayItemOptions]"
+                        size="xs"
+                    >
+                        <UButton
+                            icon="i-lucide-plus"
+                            label="Add Item"
+                            variant="link"
+                            size="xs"
+                            color="neutral"
+                        />
+                    </UDropdownMenu>
+
+                    <!-- Add Item From Template button (only shown when array has objects) -->
+                    <UButton
+                        v-if="!readonly && hasObjectTemplate"
+                        icon="i-lucide-copy-plus"
+                        label="From Template"
+                        variant="link"
+                        size="xs"
+                        color="neutral"
+                        @click="addArrayItemFromTemplate"
+                    />
+                </div>
+            </div>
+
+            <!-- Object -->
+            <div v-else-if="valueType === 'object'" class="space-y-2">
+                <div
+                    v-if="typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue) && Object.keys(modelValue).length === 0"
+                    class="text-center py-4 text-sm text-muted border border-dashed border-default rounded-lg"
+                >
+                    <UIcon name="i-lucide-box-transparent" class="w-8 h-8 mx-auto mb-2 opacity-50" />
+                    <p>Empty object</p>
+                    <p v-if="!readonly" class="text-xs mt-1">Click "Add Field" below</p>
+                </div>
+
+                <template v-else-if="typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue)">
+                    <template v-for="(value, key) in modelValue" :key="String(key)">
+                        <YamlFormField
+                            v-if="value !== void 0"
+                            :model-value="value"
+                            :field-key="String(key)"
+                            :readonly="readonly"
+                            :depth="depth + 1"
+                            :field-types="fieldTypes"
+                            @update:model-value="(val) => {
+  if (typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue)) {
+    modelValue[key] = val;
+  }
+}"
+                            @remove="removeObjectField(String(key))"
+                            @update:field-key="(newKey) => {
+  if (newKey !== key && typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue) && value !== void 0) {
+    const obj = modelValue;
+    obj[newKey] = value;
+    delete obj[key];
+  }
+}"
+                        />
+                    </template>
+                </template>
+
+                <UDropdownMenu
+                    v-if="!readonly"
+                    :items="[addFieldOptions]"
+                    size="xs"
+                >
+                    <UButton
+                        icon="i-lucide-plus"
+                        label="Add Field"
+                        variant="link"
+                        size="xs"
+                        color="neutral"
+                    />
+                </UDropdownMenu>
+            </div>
+            </YamlCollapsible>
+        </template>
+
+        <!-- For Simple Types: Regular Layout -->
+        <template v-else>
+            <div class="flex items-center gap-1">
+                <!-- Field Key (editable) -->
+                <div class="flex-1 min-w-0">
+                    <UInput
+                        v-if="isEditingKey"
+                        v-model="editingKeyValue"
+                        size="xs"
+                        autofocus
+                        @blur="saveKey"
+                        @keydown.enter="saveKey"
+                        @keydown.esc="isEditingKey = false"
+                    />
+                    <UButton
+                        v-else
+                        class="text-xs font-medium text-left justify-start px-0 py-0 truncate"
+                        :label="fieldKey"
+                        block
+                        variant="link"
+                        color="neutral"
+                        :disabled="readonly || isArrayItem"
+                        @click="startEditingKey"
+                    />
+                </div>
+
+                <!-- Type selector -->
+                <UDropdownMenu
+                    :items="[typeOptions]"
+                    :disabled="readonly"
+                    size="xs"
+                >
+                    <UButton
+                        :icon="selectedType?.icon || 'i-lucide-circle-question-mark'"
+                        variant="soft"
+                        size="xs"
+                        :disabled="readonly"
+                    />
+                </UDropdownMenu>
+
+                <!-- Remove button -->
+                <UButton
+                    v-if="!readonly"
+                    icon="i-lucide-trash"
+                    variant="ghost"
+                    size="xs"
+                    color="error"
+                    @click="emit('remove')"
+                />
+            </div>
+
+            <!-- Value Input for simple types -->
+            <YamlFieldInput
+                v-model="modelValue"
+                :value-type="valueType"
+                :readonly="readonly"
+                :field-type="getFieldType(valueType)"
+            >
+                <!-- Forward all custom field component slots -->
+                <template v-for="(_, name) in $slots" #[name]="slotProps">
+                    <slot :name="name" v-bind="slotProps" />
+                </template>
+            </YamlFieldInput>
+        </template>
+    </div>
+</template>

package/dist/runtime/components/YamlFormField.vue.d.ts

@@ -0,0 +1,56 @@
+import type { YamlFieldType } from "../types/types.js";
+/**
+ * YAML Form Field - Recursive Component
+ *
+ * Schema-driven field renderer with support for custom components.
+ * Uses centralized field type registry for extensibility.
+ *
+ * To add custom field types:
+ * 1. Define your field type in the fieldTypes prop
+ * 2. Provide a custom component via slot: #field-{component}
+ *
+ * Example:
+ * <YamlFormField :fieldTypes="[{ type: 'image', label: 'Image', icon: 'i-lucide-image', defaultValue: '', component: 'image' }]">
+ *   <template #field-image="{ modelValue, readonly }">
+ *     <MyImagePicker v-model="modelValue" :disabled="readonly" />
+ *   </template>
+ * </YamlFormField>
+ */
+type YamlValue = string | number | boolean | null | Date | YamlValue[] | {
+    [key: string]: YamlValue;
+};
+type __VLS_Props = {
+    fieldKey: string;
+    readonly?: boolean;
+    depth?: number;
+    /** Custom field type definitions (merged with defaults) */
+    fieldTypes?: YamlFieldType[];
+};
+type __VLS_ModelProps = {
+    modelValue: YamlValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_147: string, __VLS_148: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_147>]?: (props: typeof __VLS_148) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+    "update:modelValue": (value: YamlValue) => any;
+    "update:fieldKey": (newKey: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
+    "onUpdate:fieldKey"?: ((newKey: string) => any) | undefined;
+}>, {
+    readonly: boolean;
+    depth: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useYamlFieldTypes.d.ts

@@ -0,0 +1,13 @@
+import type { YamlFieldType } from "../types/types.js";
+/**
+ * Composable for managing YAML field types
+ */
+export declare function useYamlFieldTypes(customTypes?: YamlFieldType[]): {
+    fieldTypes: any;
+    getFieldType: (type: string) => YamlFieldType | undefined;
+    detectFieldType: (value: any) => YamlFieldType;
+    getDefaultValue: (type: string) => any;
+    getIcon: (type: string) => string;
+    getTypeMenuItems: (onSelect: (type: string) => void) => any;
+    DEFAULT_FIELD_TYPES: YamlFieldType[];
+};