@type32/yaml-editor-form 0.1.5 → 0.2.1

package/README.md

@@ -100,6 +100,35 @@ const data = ref({
 </template>
 ```
 
+### With Writable Computed
+
+The editor fully supports writable computed refs for v-model:
+
+```vue
+<script setup lang="ts">
+const rawData = ref({
+    title: 'Article',
+    published: false
+})
+
+// Writable computed with getter/setter
+const data = computed({
+    get: () => rawData.value,
+    set: (value) => {
+        console.log('Data updated:', value)
+        rawData.value = value
+        // You can add validation, transformations, API calls, etc.
+    }
+})
+</script>
+
+<template>
+    <YamlFormEditor v-model="data" />
+</template>
+```
+
+**Note:** The editor properly triggers computed setters by creating new object references instead of mutating in place, ensuring full compatibility with writable computed refs.
+
 ### With Custom Field Types
 
 ```vue
@@ -1043,20 +1072,20 @@ This function captures the parent's `modelValue` ref and updates it directly, ma
 
 Even if your color field is deeply nested (`data.theme.colors.primary`), the slot works identically because slots are forwarded at every level.
 
-### Type Priority
+### Type Priority & Detection Order
 
-**Detection Order (NEW in v0.2.0):**
+**Detection Order:**
 
-Custom types with `detect` functions are now checked **before** default types:
+Custom types with `detect` functions are **always** checked **before** default types:
 
 1. **Custom types** (checked first) - Your custom types take priority
 2. **Default types** (checked second) - Built-in types as fallback
-3. First matching type wins
+3. **First matching type wins** - Detection stops at first match
 
-This means:
+This ensures:
 - ✅ Your `color` type will be detected before the default `string` type
 - ✅ Custom types override default detection behavior
-- ✅ More specific types should still have more specific detect functions
+- ✅ Custom types appear first in "Add Field" dropdowns
 
 **Example:**
 ```typescript
@@ -1070,6 +1099,48 @@ const customTypes = [{
 // Value '#FF0000' will match 'color' before 'string'
 ```
 
+**Important: Make Your Detect Functions Specific!**
+
+Since detection stops at the first match, make sure your `detect` functions are specific enough:
+
+```typescript
+// ❌ TOO BROAD - will match ALL strings
+{
+    type: 'email',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string'  // Too general!
+}
+
+// ✅ SPECIFIC - only matches email-like strings
+{
+    type: 'email',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^[^@]+@[^@]+\.[^@]+$/.test(v)
+}
+
+// ✅ SPECIFIC - only matches hex colors
+{
+    type: 'color',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^#[0-9A-Fa-f]{6}$/.test(v)
+}
+
+// ✅ SPECIFIC - only matches URLs
+{
+    type: 'url',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^https?:\/\//.test(v)
+}
+```
+
+**Troubleshooting Detection Issues:**
+
+If your custom type isn't being detected:
+1. Check that `detect` function is specific enough
+2. Ensure `detect` returns `true` for your value
+3. Remember: first matching type wins (order matters!)
+4. Test your detect function in isolation
+
 **Base Type Conversions:**
 
 When using `baseType`, conversion rules follow this logic:
@@ -1087,12 +1158,91 @@ When using `baseType`, conversion rules follow this logic:
 ]
 ```
 
+### Writable Computed Support
+
+**✅ Fully Compatible** - The editor now fully supports writable computed refs through `defineModel` and nested components.
+
+All internal operations use **immutable updates** to ensure computed setters are properly triggered:
+
+```typescript
+// ✅ All operations create new references (triggers computed setter)
+data.value = { ...data.value, newField: 'value' }           // Add field
+data.value = { ...data.value, [key]: newValue }             // Update field
+const { [key]: removed, ...rest } = data.value              // Remove field
+data.value = rest
+
+// ✅ Array operations also use immutable patterns
+array.value = [...array.value, newItem]                     // Add item
+array.value = array.value.filter((_, i) => i !== index)    // Remove item
+const newArr = [...array.value]; newArr[i] = val            // Update item
+array.value = newArr
+```
+
+**✅ Works Through Multiple Component Layers:**
+
+The editor correctly handles writable computed passed through `defineModel` in nested components:
+
+```vue
+<!-- Parent Component -->
+<script setup lang="ts">
+const rawData = ref({ title: 'Article' })
+
+// Writable computed with validation
+const data = computed({
+    get: () => rawData.value,
+    set: (value) => {
+        console.log('Data updated:', value)
+        // Add validation, transformations, etc.
+        rawData.value = value
+    }
+})
+</script>
+
+<template>
+    <!-- Works! Passes through DataEditorForm → YamlFormEditor -->
+    <DataEditorForm v-model="data" />
+</template>
+```
+
+**Use Cases for Writable Computed:**
+- ✅ Validation before saving
+- ✅ Transform data on save (e.g., serialize dates)
+- ✅ Sync with external state management (Pinia, Vuex)
+- ✅ Trigger side effects on changes (API calls, logging)
+- ✅ Implement undo/redo functionality
+- ✅ Complex editor integrations (TipTap, Monaco, etc.)
+
+**Example with Pinia:**
+```typescript
+const store = useMyStore()
+
+const data = computed({
+    get: () => store.formData,
+    set: (value) => store.updateFormData(value)
+})
+```
+
+**Example with TipTap Editor Integration:**
+```typescript
+const editorInstance = defineModel('editorInstance', { required: true })
+const $ef = useEditorFrontmatter(editorInstance)
+
+const data = computed({
+    get: () => $ef.getFrontmatter().data || {},
+    set: (newValue) => {
+        // Updates editor content directly
+        $ef.setFrontmatterProperties({ ...newValue })
+    }
+})
+```
+
 ### Performance Considerations
 
 **Reactivity:**
 - Uses Vue 3 `ref` and `computed` for optimal reactivity
 - Deep watching is used only where necessary
 - Recursive rendering is optimized with `v-if` conditionals
+- **Immutable updates** ensure computed setters are triggered properly
 
 **Large Arrays:**
 - Each array item is independently reactive
@@ -1103,6 +1253,7 @@ When using `baseType`, conversion rules follow this logic:
 - Date helper functions are minimal
 - No global state except type registry
 - Components clean up properly on unmount
+- Immutable updates create minimal object copies (spread operator is fast)
 
 ### Validation (Future)
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@type32/yaml-editor-form",
   "configKey": "yamlEditorForm",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -26,9 +26,9 @@ type __VLS_ModelProps = {
     modelValue: YamlFormData;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_19: string, __VLS_20: any;
+declare var __VLS_20: string, __VLS_21: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {

package/dist/runtime/components/YamlFormEditor.vue

@@ -16,11 +16,15 @@ watch(data, () => {
 function addField(fieldType = "string") {
   if (!data.value) data.value = {};
   const newKey = `field_${Object.keys(data.value).length + 1}`;
-  data.value[newKey] = getDefaultValue(fieldType);
+  data.value = {
+    ...data.value,
+    [newKey]: getDefaultValue(fieldType)
+  };
 }
 function removeField(key) {
   if (data.value) {
-    delete data.value[key];
+    const { [key]: removed, ...rest } = data.value;
+    data.value = rest;
   }
 }
 const addFieldOptions = computed(() => {
@@ -35,16 +39,22 @@ const addFieldOptions = computed(() => {
 				<YamlFormField
 					v-for="(value, key) in data"
 					:key="String(key)"
-					v-model="data[key]"
+					:model-value="data[key]"
 					:field-key="String(key)"
 					:readonly="readonly"
 					:field-types="fieldTypes"
 					:size="size"
+					@update:model-value="(newValue) => {
+  data = { ...data, [key]: newValue };
+}"
 					@remove="removeField(String(key))"
 					@update:field-key="(newKey) => {
-  if (newKey !== key) {
-    data[newKey] = data[key];
-    delete data[key];
+  if (newKey !== key && data) {
+    const { [key]: value, ...rest } = data;
+    data = {
+      ...rest,
+      [newKey]: value
+    };
   }
 }"
 				>

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

@@ -26,9 +26,9 @@ type __VLS_ModelProps = {
     modelValue: YamlFormData;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_19: string, __VLS_20: any;
+declare var __VLS_20: string, __VLS_21: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {

package/dist/runtime/components/YamlFormField.vue

@@ -164,20 +164,20 @@ function convertType(newType) {
 function addArrayItem(itemType) {
   if (!Array.isArray(modelValue.value)) return;
   if (itemType) {
-    modelValue.value.push(getDefaultValue(itemType));
+    modelValue.value = [...modelValue.value, getDefaultValue(itemType)];
     return;
   }
   if (modelValue.value.length === 0) {
-    modelValue.value.push({});
+    modelValue.value = [...modelValue.value, {}];
     return;
   }
   const firstItem = modelValue.value[0];
   const detectedType = detectFieldType(firstItem);
-  modelValue.value.push(getDefaultValue(detectedType.type));
+  modelValue.value = [...modelValue.value, getDefaultValue(detectedType.type)];
 }
 function removeArrayItem(index) {
   if (!Array.isArray(modelValue.value)) return;
-  modelValue.value.splice(index, 1);
+  modelValue.value = modelValue.value.filter((_, i) => i !== index);
 }
 function addArrayItemFromTemplate() {
   if (!Array.isArray(modelValue.value)) return;
@@ -199,9 +199,9 @@ function addArrayItemFromTemplate() {
       const detectedType = detectFieldType(value);
       newObject[key] = getDefaultValue(detectedType.type);
     }
-    modelValue.value.push(newObject);
+    modelValue.value = [...modelValue.value, newObject];
   } else {
-    modelValue.value.push({});
+    modelValue.value = [...modelValue.value, {}];
   }
 }
 const hasObjectTemplate = computed(() => {
@@ -214,12 +214,16 @@ 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);
+  modelValue.value = {
+    ...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 { [key]: removed, ...rest } = obj;
+  modelValue.value = rest;
 }
 const isOpen = ref(true);
 const isArrayItem = computed(() => {
@@ -344,7 +348,11 @@ const addArrayItemOptions = computed(() => {
                                 :depth="depth + 1"
                                 :field-types="fieldTypes"
                                 @update:model-value="(val) => {
-  if (Array.isArray(modelValue)) modelValue[index] = val;
+  if (Array.isArray(modelValue)) {
+    const newArray = [...modelValue];
+    newArray[index] = val;
+    modelValue = newArray;
+  }
 }"
                                 @remove="removeArrayItem(index)"
 								:size="size"
@@ -404,15 +412,20 @@ const addArrayItemOptions = computed(() => {
 							:size="size"
                             @update:model-value="(val) => {
   if (typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue)) {
-    modelValue[key] = val;
+    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];
+    const { [key]: oldValue, ...rest } = modelValue;
+    modelValue = {
+      ...rest,
+      [newKey]: oldValue
+    };
   }
 }"
                         />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@type32/yaml-editor-form",
-	"version": "0.1.5",
+	"version": "0.2.1",
 	"description": "YAML Editor Form Component for Nuxt.",
 	"repository": "https://github.com/CTRL-Neo-Studios/yaml-editor-form",
 	"license": "MIT",