@type32/yaml-editor-form 0.1.3 → 0.1.4

package/README.md

@@ -96,7 +96,7 @@ const data = ref({
 </script>
 
 <template>
-    <YamlForm v-model="data" />
+    <YamlFormEditor v-model="data" />
 </template>
 ```
 
@@ -104,7 +104,7 @@ const data = ref({
 
 ```vue
 <script setup lang="ts">
-import type { YamlFieldType } from './useYamlFieldTypes'
+import type { YamlFieldType } from '@type32/yaml-editor-form'
 
 const customTypes: YamlFieldType[] = [
     {
@@ -123,11 +123,15 @@ const data = ref({
 </script>
 
 <template>
-    <YamlForm v-model="data" :field-types="customTypes">
-        <template #field-image="{ modelValue, readonly }">
-            <MyImagePicker v-model="modelValue" :disabled="readonly" />
+    <YamlFormEditor v-model="data" :field-types="customTypes">
+        <template #field-image="{ modelValue, readonly, updateModelValue }">
+            <MyImagePicker 
+                :model-value="modelValue" 
+                :disabled="readonly"
+                @update:model-value="updateModelValue"
+            />
         </template>
-    </YamlForm>
+    </YamlFormEditor>
 </template>
 ```
 
@@ -136,7 +140,7 @@ const data = ref({
 ### Component Hierarchy
 
 ```
-YamlForm.vue (Entry Point)
+YamlFormEditor.vue (Entry Point)
 └── YamlFormField.vue (Recursive Component)
     ├── YamlFieldInput.vue (Simple Types)
     │   ├── UInput (string)
@@ -147,7 +151,7 @@ YamlForm.vue (Entry Point)
     │   ├── UInputTags (string-array)
     │   └── Custom Slots (user-defined)
     └── YamlFormField.vue (Complex Types - Recursive)
-        ├── Collapsible (objects/arrays)
+        ├── YamlCollapsible (objects/arrays)
         └── Array/Object rendering
 ```
 
@@ -160,7 +164,7 @@ YamlFieldInput (v-model)
     ↓
 YamlFormField (v-model)
     ↓
-YamlForm (v-model)
+YamlFormEditor (v-model)
     ↓
 Parent Component (data binding)
 ```
@@ -179,7 +183,7 @@ Components (Rendering)
 
 ## Component API
 
-### YamlForm
+### YamlFormEditor
 
 Main entry point for the editor.
 
@@ -207,8 +211,33 @@ Main entry point for the editor.
 All custom field component slots are supported:
 
 ```vue
-<template #field-{component}="{ modelValue, readonly, valueType }">
+<template #field-{component}="{ modelValue, readonly, valueType, updateModelValue }">
     <!-- Your custom component -->
+    <!-- Use :model-value and @update:model-value, NOT v-model -->
+</template>
+```
+
+**Slot Props:**
+- `modelValue`: Current field value (read-only prop)
+- `readonly`: Whether field is in read-only mode
+- `valueType`: Type identifier string
+- `updateModelValue`: Function to update value: `(newValue) => void`
+
+**Important:** You cannot use `v-model` on slot props (they're read-only). Use `:model-value` and `@update:model-value` instead:
+
+```vue
+<!-- ❌ WRONG - v-model doesn't work on slot props -->
+<template #field-color="{ modelValue, readonly }">
+    <UColorPicker v-model="modelValue" :disabled="readonly" />
+</template>
+
+<!-- ✅ CORRECT - use updateModelValue function -->
+<template #field-color="{ modelValue, readonly, updateModelValue }">
+    <UColorPicker 
+        :model-value="modelValue" 
+        :disabled="readonly"
+        @update:model-value="updateModelValue"
+    />
 </template>
 ```
 
@@ -240,7 +269,7 @@ Recursive component that handles individual fields.
 
 #### Slots
 
-Same as YamlForm - all custom field slots are forwarded.
+Same as YamlFormEditor - all custom field slots are forwarded through the recursive hierarchy.
 
 ### YamlFieldInput
 
@@ -268,26 +297,73 @@ Renders input components for simple types.
 #### Slots
 
 ```vue
-<template #field-{component}="{ modelValue, readonly, valueType }">
+<template #field-{component}="{ modelValue, readonly, valueType, updateModelValue }">
     <!-- Custom input component -->
+    <!-- Use updateModelValue function for two-way binding -->
 </template>
 ```
 
+**Slot Props:**
+- `modelValue`: Current value (read-only)
+- `readonly`: Whether field is read-only
+- `valueType`: Type identifier
+- `updateModelValue`: Update function `(val) => void`
+
 ## Field Types
 
 ### Type Definition
 
 ```typescript
+// Valid base types (type-safe!)
+type YamlBaseType = 
+    | 'string'       // Text primitives
+    | 'number'       // Numeric primitives
+    | 'boolean'      // Boolean primitives
+    | 'date'         // Date without time
+    | 'datetime'     // Date with time
+    | 'string-array' // Array of strings (tags)
+    | 'array'        // Generic array
+    | 'object'       // Generic object
+    | 'null'         // Null value
+
 interface YamlFieldType {
-    type: string              // Unique type identifier
+    type: string              // Unique type identifier (e.g., 'color', 'email')
     label: string             // Display name in dropdowns
     icon: string              // Lucide icon name (i-lucide-*)
     defaultValue: any         // Default value or factory function
+    baseType: YamlBaseType    // REQUIRED: Base type for conversion rules
     component?: string        // Optional: slot name for custom rendering
     detect?: (value: any) => boolean  // Optional: auto-detection function
 }
 ```
 
+**The `baseType` Field (Type-Safe!):**
+
+The `baseType` field is **required** and must be one of the predefined base types. This provides:
+- ✅ **TypeScript autocomplete** - IntelliSense suggests valid base types
+- ✅ **Compile-time safety** - Typos are caught immediately
+- ✅ **Conversion inheritance** - Custom types inherit conversion rules from their base
+- ✅ **Clear semantics** - Explicit relationship between custom and base types
+
+**Examples:**
+```typescript
+// ✅ Valid - 'string' is a valid YamlBaseType
+{ type: 'color', baseType: 'string' }
+
+// ✅ Valid - 'number' is a valid YamlBaseType
+{ type: 'percentage', baseType: 'number' }
+
+// ❌ Invalid - TypeScript error (not a valid base type)
+{ type: 'custom', baseType: 'invalid' }  // Type error!
+```
+
+**Conversion Inheritance:**
+- A `color` type with `baseType: 'string'` can convert to/from anything a string can
+- A `percentage` type with `baseType: 'number'` inherits number conversions
+- Custom types can also convert directly to/from their base type
+
+This enables powerful type hierarchies without duplicating conversion logic.
+
 ### Built-in Types
 
 ```typescript
@@ -427,7 +503,7 @@ const customTypes: YamlFieldType[] = [
 ```
 
 ```vue
-<YamlForm v-model="data" :field-types="customTypes" />
+<YamlFormEditor v-model="data" :field-types="customTypes" />
 ```
 
 ### Adding a Runtime Type (With Custom Component)
@@ -439,23 +515,25 @@ const customTypes: YamlFieldType[] = [
         label: 'Color',
         icon: 'i-lucide-palette',
         defaultValue: '#000000',
+        baseType: 'string',  // Inherits string conversions
         component: 'color',  // Enables slot
-        detect: (value) => /^#[0-9A-Fa-f]{6}$/.test(value)
+        detect: (value) => typeof value === 'string' && /^#[0-9A-Fa-f]{6}$/.test(value)
     }
 ]
 ```
 
 ```vue
-<YamlForm v-model="data" :field-types="customTypes">
-    <template #field-color="{ modelValue, readonly }">
+<YamlFormEditor v-model="data" :field-types="customTypes">
+    <template #field-color="{ modelValue, readonly, updateModelValue }">
         <input 
             type="color" 
-            v-model="modelValue"
+            :value="modelValue"
             :disabled="readonly"
+            @input="(e) => updateModelValue(e.target.value)"
             class="w-full h-10 rounded"
         />
     </template>
-</YamlForm>
+</YamlFormEditor>
 ```
 
 ### Overriding Built-in Types
@@ -473,11 +551,15 @@ const customTypes: YamlFieldType[] = [
 ```
 
 ```vue
-<YamlForm v-model="data" :field-types="customTypes">
-    <template #field-richtext="{ modelValue, readonly }">
-        <MyRichTextEditor v-model="modelValue" :read-only="readonly" />
+<YamlFormEditor v-model="data" :field-types="customTypes">
+    <template #field-richtext="{ modelValue, readonly, updateModelValue }">
+        <MyRichTextEditor 
+            :model-value="modelValue" 
+            :read-only="readonly"
+            @update:model-value="updateModelValue"
+        />
     </template>
-</YamlForm>
+</YamlFormEditor>
 ```
 
 ## Schema System
@@ -558,7 +640,7 @@ const config = ref({
 </script>
 
 <template>
-    <YamlForm v-model="config" />
+    <YamlFormEditor v-model="config" />
 </template>
 ```
 
@@ -577,7 +659,7 @@ const article = ref({
 </script>
 
 <template>
-    <YamlForm v-model="article" />
+    <YamlFormEditor v-model="article" />
 </template>
 ```
 
@@ -594,7 +676,7 @@ const data = ref({
 </script>
 
 <template>
-    <YamlForm v-model="data" />
+    <YamlFormEditor v-model="data" />
 </template>
 ```
 
@@ -602,7 +684,7 @@ const data = ref({
 
 ```vue
 <script setup lang="ts">
-import type { YamlFieldType } from './useYamlFieldTypes'
+import type { YamlFieldType } from '@type32/yaml-editor-form'
 
 // Define custom types
 const customTypes: YamlFieldType[] = [
@@ -630,23 +712,25 @@ const post = ref({
 </script>
 
 <template>
-    <YamlForm v-model="post" :field-types="customTypes">
+    <YamlFormEditor v-model="post" :field-types="customTypes">
         <!-- Image picker component -->
-        <template #field-image="{ modelValue, readonly }">
+        <template #field-image="{ modelValue, readonly, updateModelValue }">
             <MyImagePicker 
-                v-model="modelValue" 
+                :model-value="modelValue" 
                 :disabled="readonly"
+                @update:model-value="updateModelValue"
             />
         </template>
         
         <!-- Markdown editor component -->
-        <template #field-markdown="{ modelValue, readonly }">
+        <template #field-markdown="{ modelValue, readonly, updateModelValue }">
             <MyMarkdownEditor 
-                v-model="modelValue"
+                :model-value="modelValue"
                 :read-only="readonly"
+                @update:model-value="updateModelValue"
             />
         </template>
-    </YamlForm>
+    </YamlFormEditor>
 </template>
 ```
 
@@ -672,7 +756,7 @@ const customTypes: YamlFieldType[] = [
 </script>
 
 <template>
-    <YamlForm v-model="data" :field-types="customTypes" />
+    <YamlFormEditor v-model="data" :field-types="customTypes" />
 </template>
 ```
 
@@ -680,7 +764,7 @@ const customTypes: YamlFieldType[] = [
 
 ```vue
 <template>
-    <YamlForm v-model="data" readonly />
+    <YamlFormEditor v-model="data" readonly />
 </template>
 ```
 
@@ -712,7 +796,7 @@ const complexData = ref({
 </script>
 
 <template>
-    <YamlForm v-model="complexData" />
+    <YamlFormEditor v-model="complexData" />
 </template>
 ```
 
@@ -720,10 +804,10 @@ const complexData = ref({
 
 ```
 components/
-├── YamlForm.vue                           ← Entry component
+├── YamlFormEditor.vue                     ← Entry component
 ├── YamlFormField.vue                      ← Recursive field component
 ├── YamlFieldInput.vue                     ← Input rendering component
-└── Collapsible.vue                        ← Collapsible UI component
+└── YamlCollapsible.vue                    ← Collapsible UI component
 
 composables/
 └── useYamlFieldTypes.ts                   ← Type registry & composable
@@ -903,27 +987,89 @@ interface YamlFieldInputProps {
 
 ### Slot Forwarding
 
-Slots are automatically forwarded through the component hierarchy:
+Slots are automatically forwarded through the component hierarchy using Vue 3's dynamic slot forwarding:
+
+```
+YamlFormEditor (receives slot from parent)
+    ↓ forwards all slots with v-bind="slotProps"
+YamlFormField (receives & forwards slots)
+    ↓ forwards all slots with v-bind="slotProps"
+    ↓ (recursively for nested structures)
+YamlFieldInput (terminal - uses slot)
+    ↓ renders slot: #field-{component}
+    ↓ provides props: { modelValue, readonly, valueType, updateModelValue }
+Custom Component
+```
+
+**How It Works:**
+
+1. **YamlFormEditor** (lines 89-92): Receives slots and forwards to YamlFormField
+2. **YamlFormField** (lines 634-636): Forwards slots to YamlFieldInput OR itself (for recursion)
+3. **YamlFieldInput** (lines 88-95): Final destination - renders slot with props
 
+**Slot Props Flow:**
+
+The `updateModelValue` function is created at the YamlFieldInput level and allows your custom component to update the value:
+
+```typescript
+// In YamlFieldInput.vue
+:update-model-value="(val: YamlValue) => modelValue = val"
 ```
-YamlForm (defines slot)
-    ↓ forwards
-YamlFormField (forwards slot)
-    ↓ forwards
-YamlFieldInput (uses slot)
+
+This function captures the parent's `modelValue` ref and updates it directly, maintaining reactivity throughout the hierarchy.
+
+**Example with Nested Structure:**
+
+```vue
+<!-- Works at any depth! -->
+<YamlFormEditor v-model="data" :field-types="customTypes">
+    <template #field-color="{ modelValue, updateModelValue }">
+        <UColorPicker 
+            :model-value="modelValue"
+            @update:model-value="updateModelValue"
+        />
+    </template>
+</YamlFormEditor>
 ```
 
-This allows custom components to work at any nesting level.
+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
 
-When multiple types have `detect` functions that match:
+**Detection Order (NEW in v0.2.0):**
+
+Custom types with `detect` functions are now 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
+
+This means:
+- ✅ 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
 
-1. Types are checked in array order
-2. First matching type wins
-3. More specific types should come before general types
+**Example:**
+```typescript
+// Custom color type checked FIRST
+const customTypes = [{
+    type: 'color',
+    baseType: 'string',
+    detect: (v) => typeof v === 'string' && /^#[0-9A-Fa-f]{6}$/.test(v)
+}]
+
+// Value '#FF0000' will match 'color' before 'string'
+```
+
+**Base Type Conversions:**
 
-**Example order:**
+When using `baseType`, conversion rules follow this logic:
+
+1. Can convert between type and its baseType (e.g., `color` ↔ `string`)
+2. Can convert to anything the baseType can (e.g., `color` → `number` because `string` → `number`)
+3. Custom conversion rules take precedence over inherited rules
+
+**Example order for default types:**
 ```typescript
 [
     { type: 'datetime', detect: (v) => isDateTimeString(v) },  // Specific
@@ -1046,11 +1192,11 @@ For issues, questions, or feature requests, refer to the main Vertex project doc
 
 ### Core Components
 
-- **YamlForm**: Entry point component for the editor
+- **YamlFormEditor**: Entry point component for the editor
 - **YamlFormField**: Recursive component handling individual fields
 - **YamlFieldInput**: Input rendering component for simple types
+- **YamlCollapsible**: UI component for collapsible sections
 - **useYamlFieldTypes**: Composable for type registry and management
-- **Collapsible**: UI component for collapsible sections
 
 ### Key Concepts
 
@@ -1077,11 +1223,15 @@ For issues, questions, or feature requests, refer to the main Vertex project doc
 
 **Add Custom Component:**
 ```vue
-<YamlForm>
-  <template #field-{type}="props">
-    <Component v-bind="props" />
+<YamlFormEditor v-model="data" :field-types="customTypes">
+  <template #field-{type}="{ modelValue, readonly, updateModelValue }">
+    <MyComponent 
+      :model-value="modelValue"
+      :disabled="readonly"
+      @update:model-value="updateModelValue"
+    />
   </template>
-</YamlForm>
+</YamlFormEditor>
 ```
 
 **Type Conversion:**

package/dist/module.json

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

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

@@ -1,3 +1,13 @@
+type __VLS_Props = {
+    label: string;
+    defaultOpen?: boolean;
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
+};
+declare const open: import("vue").ModelRef<boolean, string, boolean, boolean>;
+type __VLS_ModelProps = {
+    'open'?: typeof open['value'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
     badge?: (props: typeof __VLS_13) => any;
@@ -6,37 +16,14 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_18) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     defaultOpen: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    size: "xl" | "lg" | "md" | "sm" | "xs";
+}, {}, {}, {}, 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;

package/dist/runtime/components/YamlCollapsible.vue

@@ -1,13 +1,8 @@
 <script setup>
 defineProps({
-  label: {
-    type: String,
-    required: true
-  },
-  defaultOpen: {
-    type: Boolean,
-    default: false
-  }
+  label: { type: String, required: true },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "xs" }
 });
 const open = defineModel("open", { type: Boolean, default: void 0 });
 </script>
@@ -17,6 +12,7 @@ const open = defineModel("open", { type: Boolean, default: void 0 });
         v-model:open="open"
         :default-open="defaultOpen"
         class="group/collapsible"
+		:size="size"
     >
         <div class="flex items-center justify-between gap-2 w-full">
             <div class="flex items-center gap-2">
@@ -27,7 +23,7 @@ const open = defineModel("open", { type: Boolean, default: void 0 });
                         class="size-2.5 text-muted transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                     />
                 </div>
-                <span class="text-xs font-medium text-highlighted tracking-tight">{{ label }}</span>
+                <span :class="`text-${size}`" class="font-medium text-highlighted tracking-tight">{{ label }}</span>
                 <slot name="badge"/>
             </div>
 

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

@@ -1,3 +1,13 @@
+type __VLS_Props = {
+    label: string;
+    defaultOpen?: boolean;
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
+};
+declare const open: import("vue").ModelRef<boolean, string, boolean, boolean>;
+type __VLS_ModelProps = {
+    'open'?: typeof open['value'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
     badge?: (props: typeof __VLS_13) => any;
@@ -6,37 +16,14 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_18) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    defaultOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    open: {
-        type: import("vue").PropType<boolean>;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     defaultOpen: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    size: "xl" | "lg" | "md" | "sm" | "xs";
+}, {}, {}, {}, 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;

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

@@ -24,6 +24,7 @@ type __VLS_Props = {
     readonly?: boolean;
     /** Optional field type definition for custom component detection */
     fieldType?: YamlFieldType;
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
 };
 type __VLS_ModelProps = {
     modelValue: YamlValue;
@@ -33,6 +34,7 @@ declare var __VLS_2: string, __VLS_3: {
     modelValue: YamlValue;
     readonly: boolean;
     valueType: string;
+    updateModelValue: (val: YamlValue) => YamlValue;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
@@ -42,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
 }>, {
+    size: "xl" | "lg" | "md" | "sm" | "xs";
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/YamlFieldInput.vue

@@ -5,7 +5,8 @@ const modelValue = defineModel({ type: [String, Number, Boolean, null, Date, Arr
 const props = defineProps({
   valueType: { type: String, required: true },
   readonly: { type: Boolean, required: false, default: false },
-  fieldType: { type: Object, required: false }
+  fieldType: { type: Object, required: false },
+  size: { type: String, required: false, default: "xs" }
 });
 function isDateObject(val) {
   return val instanceof Date && !isNaN(val.getTime());
@@ -53,6 +54,7 @@ const customSlotName = computed(() => {
         :model-value="modelValue"
         :readonly="readonly"
         :value-type="valueType"
+        :update-model-value="(val) => modelValue = val"
     />
 
     <!-- Built-in Input Components -->
@@ -61,7 +63,7 @@ const customSlotName = computed(() => {
         <UInput
             v-if="valueType === 'string'"
             :model-value="String(modelValue)"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             placeholder="Enter text..."
             @update:model-value="(val) => modelValue = val"
@@ -71,7 +73,7 @@ const customSlotName = computed(() => {
         <UTextarea
             v-else-if="valueType === 'textarea'"
             :model-value="String(modelValue)"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             placeholder="Enter long text..."
             :rows="4"
@@ -83,7 +85,7 @@ const customSlotName = computed(() => {
         <UInputNumber
             v-else-if="valueType === 'number'"
             :model-value="Number(modelValue)"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             placeholder="0"
             @update:model-value="(val) => modelValue = val ?? 0"
@@ -93,7 +95,7 @@ const customSlotName = computed(() => {
         <USwitch
             v-else-if="valueType === 'boolean'"
             :model-value="Boolean(modelValue)"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             @update:model-value="(val) => modelValue = val"
         />
@@ -102,7 +104,7 @@ const customSlotName = computed(() => {
         <UInputDate
             v-else-if="valueType === 'date'"
             :model-value="typeof modelValue === 'string' ? stringToCalendarDate(modelValue) : jsDateToCalendarDate(/* @__PURE__ */ new Date())"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             @update:model-value="(val) => {
   if (val && 'year' in val) {
@@ -115,7 +117,7 @@ const customSlotName = computed(() => {
         <UInputDate
             v-else-if="valueType === 'datetime'"
             :model-value="typeof modelValue === 'string' ? stringToCalendarDateTime(modelValue) : jsDateToCalendarDateTime(/* @__PURE__ */ new Date())"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             granularity="second"
             @update:model-value="(val) => {
@@ -134,7 +136,7 @@ const customSlotName = computed(() => {
         <UInputTags
             v-else-if="valueType === 'string-array'"
             :model-value="Array.isArray(modelValue) ? modelValue : []"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             placeholder="Add tags..."
             @update:model-value="(val) => modelValue = val"
@@ -149,7 +151,7 @@ const customSlotName = computed(() => {
         <UInput
             v-else
             :model-value="String(modelValue || '')"
-            size="xs"
+            :size="size"
             :disabled="readonly"
             placeholder="Enter value..."
             @update:model-value="(val) => modelValue = val"

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

@@ -24,6 +24,7 @@ type __VLS_Props = {
     readonly?: boolean;
     /** Optional field type definition for custom component detection */
     fieldType?: YamlFieldType;
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
 };
 type __VLS_ModelProps = {
     modelValue: YamlValue;
@@ -33,6 +34,7 @@ declare var __VLS_2: string, __VLS_3: {
     modelValue: YamlValue;
     readonly: boolean;
     valueType: string;
+    updateModelValue: (val: YamlValue) => YamlValue;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
@@ -42,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
 }>, {
+    size: "xl" | "lg" | "md" | "sm" | "xs";
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     readonly?: boolean;
     /** Custom field type definitions (merged with defaults) */
     fieldTypes?: YamlFieldType[];
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
 };
 type __VLS_ModelProps = {
     /**
@@ -54,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
         slug?: string;
     }) => any) | undefined;
 }>, {
+    size: "xl" | "lg" | "md" | "sm" | "xs";
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/YamlFormEditor.vue

@@ -5,7 +5,8 @@ const data = defineModel({ type: null, ...{ required: true } });
 const props = defineProps({
   filePath: { type: String, required: false },
   readonly: { type: Boolean, required: false, default: false },
-  fieldTypes: { type: Array, required: false }
+  fieldTypes: { type: Array, required: false },
+  size: { type: String, required: false, default: "xs" }
 });
 const { getDefaultValue, getTypeMenuItems } = useYamlFieldTypes(props.fieldTypes);
 const isDirty = ref(false);
@@ -38,6 +39,7 @@ const addFieldOptions = computed(() => {
 					:field-key="String(key)"
 					:readonly="readonly"
 					:field-types="fieldTypes"
+					:size="size"
 					@remove="removeField(String(key))"
 					@update:field-key="(newKey) => {
   if (newKey !== key) {
@@ -56,13 +58,13 @@ const addFieldOptions = computed(() => {
 			<UDropdownMenu
 				v-if="!readonly"
 				:items="[addFieldOptions]"
-				size="sm"
+				:size="size"
 			>
 				<UButton
 					icon="i-lucide-plus"
 					label="Add Field"
 					variant="ghost"
-					size="sm"
+					:size="size"
 				/>
 			</UDropdownMenu>
 		</div>

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     readonly?: boolean;
     /** Custom field type definitions (merged with defaults) */
     fieldTypes?: YamlFieldType[];
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
 };
 type __VLS_ModelProps = {
     /**
@@ -54,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
         slug?: string;
     }) => any) | undefined;
 }>, {
+    size: "xl" | "lg" | "md" | "sm" | "xs";
     readonly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -25,6 +25,7 @@ type __VLS_Props = {
     depth?: number;
     /** Custom field type definitions (merged with defaults) */
     fieldTypes?: YamlFieldType[];
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
 };
 type __VLS_ModelProps = {
     modelValue: YamlValue;
@@ -43,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
     "onUpdate:fieldKey"?: ((newKey: string) => any) | undefined;
 }>, {
+    size: "xl" | "lg" | "md" | "sm" | "xs";
     readonly: boolean;
     depth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/YamlFormField.vue

@@ -6,7 +6,8 @@ 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 }
+  fieldTypes: { type: Array, required: false },
+  size: { type: String, required: false, default: "xs" }
 });
 const emit = defineEmits(["remove", "update:fieldKey"]);
 const {
@@ -67,6 +68,13 @@ function saveKey() {
 function isValidConversion(fromType, toType) {
   if (fromType === toType) return true;
   if (fromType === "null") return true;
+  const fromFieldType = getFieldType(fromType);
+  const toFieldType = getFieldType(toType);
+  if (!fromFieldType || !toFieldType) return false;
+  const fromBase = fromFieldType.baseType;
+  const toBase = toFieldType.baseType;
+  if (fromType === toBase || toType === fromBase) return true;
+  if (fromBase === toType || toBase === fromType) return true;
   const conversionRules = {
     // Primitives can convert to other primitives and arrays
     "string": ["number", "boolean", "date", "datetime", "string-array", "null"],
@@ -80,10 +88,12 @@ function isValidConversion(fromType, toType) {
     // 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"]
+    "object": ["null"],
+    // Null is always terminal
+    "null": []
   };
-  const allowedConversions = conversionRules[fromType] || [];
-  return allowedConversions.includes(toType);
+  const allowedConversions = conversionRules[fromBase] || [];
+  return allowedConversions.includes(toBase);
 }
 function convertType(newType) {
   const currentType = valueType.value;
@@ -255,7 +265,7 @@ const addArrayItemOptions = computed(() => {
             <UInput
                 v-if="isEditingKey"
                 v-model="editingKeyValue"
-                size="xs"
+                :size="size"
                 autofocus
                 class="mb-1"
                 @blur="saveKey"
@@ -266,7 +276,7 @@ const addArrayItemOptions = computed(() => {
             <!-- 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>
+                    <UBadge :size="size" variant="soft" color="neutral">{{ itemCount }}</UBadge>
                 </template>
 
                 <template #actions>
@@ -276,7 +286,7 @@ const addArrayItemOptions = computed(() => {
                             v-if="!readonly && !isEditingKey && !isArrayItem"
                             icon="i-lucide-pencil"
                             variant="ghost"
-                            size="xs"
+                            :size="size"
                             color="neutral"
                             class="text-muted"
                             @click.stop="startEditingKey"
@@ -286,12 +296,12 @@ const addArrayItemOptions = computed(() => {
                         <UDropdownMenu
                             :items="[typeOptions]"
                             :disabled="readonly"
-                            size="xs"
+                            :size="size"
                         >
                             <UButton
                                 :icon="selectedType?.icon || 'i-heroicons-circle-question-mark'"
                                 variant="soft"
-                                size="xs"
+                                :size="size"
                                 :disabled="readonly"
                             />
                         </UDropdownMenu>
@@ -301,7 +311,7 @@ const addArrayItemOptions = computed(() => {
                             v-if="!readonly"
                             icon="i-lucide-trash"
                             variant="ghost"
-                            size="xs"
+                            :size="size"
                             color="error"
                             @click.stop="emit('remove')"
                         />
@@ -337,6 +347,7 @@ const addArrayItemOptions = computed(() => {
   if (Array.isArray(modelValue)) modelValue[index] = val;
 }"
                                 @remove="removeArrayItem(index)"
+								:size="size"
                             />
                         </div>
                     </div>
@@ -346,13 +357,13 @@ const addArrayItemOptions = computed(() => {
                     <UDropdownMenu
                         v-if="!readonly"
                         :items="[addArrayItemOptions]"
-                        size="xs"
+                        :size="size"
                     >
                         <UButton
                             icon="i-lucide-plus"
                             label="Add Item"
                             variant="link"
-                            size="xs"
+                            :size="size"
                             color="neutral"
                         />
                     </UDropdownMenu>
@@ -363,7 +374,7 @@ const addArrayItemOptions = computed(() => {
                         icon="i-lucide-copy-plus"
                         label="From Template"
                         variant="link"
-                        size="xs"
+                        :size="size"
                         color="neutral"
                         @click="addArrayItemFromTemplate"
                     />
@@ -390,6 +401,7 @@ const addArrayItemOptions = computed(() => {
                             :readonly="readonly"
                             :depth="depth + 1"
                             :field-types="fieldTypes"
+							:size="size"
                             @update:model-value="(val) => {
   if (typeof modelValue === 'object' && !Array.isArray(modelValue) && modelValue !== null && !isDateObject(modelValue)) {
     modelValue[key] = val;
@@ -410,13 +422,13 @@ const addArrayItemOptions = computed(() => {
                 <UDropdownMenu
                     v-if="!readonly"
                     :items="[addFieldOptions]"
-                    size="xs"
+                    :size="size"
                 >
                     <UButton
                         icon="i-lucide-plus"
                         label="Add Field"
                         variant="link"
-                        size="xs"
+                        :size="size"
                         color="neutral"
                     />
                 </UDropdownMenu>
@@ -432,7 +444,7 @@ const addArrayItemOptions = computed(() => {
                     <UInput
                         v-if="isEditingKey"
                         v-model="editingKeyValue"
-                        size="xs"
+                        :size="size"
                         autofocus
                         @blur="saveKey"
                         @keydown.enter="saveKey"
@@ -454,12 +466,12 @@ const addArrayItemOptions = computed(() => {
                 <UDropdownMenu
                     :items="[typeOptions]"
                     :disabled="readonly"
-                    size="xs"
+                    :size="size"
                 >
                     <UButton
                         :icon="selectedType?.icon || 'i-lucide-circle-question-mark'"
                         variant="soft"
-                        size="xs"
+                        :size="size"
                         :disabled="readonly"
                     />
                 </UDropdownMenu>
@@ -469,7 +481,7 @@ const addArrayItemOptions = computed(() => {
                     v-if="!readonly"
                     icon="i-lucide-trash"
                     variant="ghost"
-                    size="xs"
+                    :size="size"
                     color="error"
                     @click="emit('remove')"
                 />
@@ -480,6 +492,7 @@ const addArrayItemOptions = computed(() => {
                 v-model="modelValue"
                 :value-type="valueType"
                 :readonly="readonly"
+				:size="size"
                 :field-type="getFieldType(valueType)"
             >
                 <!-- Forward all custom field component slots -->

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

@@ -25,6 +25,7 @@ type __VLS_Props = {
     depth?: number;
     /** Custom field type definitions (merged with defaults) */
     fieldTypes?: YamlFieldType[];
+    size?: "xl" | "lg" | "md" | "sm" | "xs";
 };
 type __VLS_ModelProps = {
     modelValue: YamlValue;
@@ -43,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
     "onUpdate:fieldKey"?: ((newKey: string) => any) | undefined;
 }>, {
+    size: "xl" | "lg" | "md" | "sm" | "xs";
     readonly: boolean;
     depth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/composables/useYamlFieldTypes.js

@@ -20,6 +20,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Text",
       icon: "i-lucide-type",
       defaultValue: "",
+      baseType: "string",
       detect: (value) => typeof value === "string" && !isDateString(value) && !isDateTimeString(value)
     },
     {
@@ -27,6 +28,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Long Text",
       icon: "i-lucide-align-left",
       defaultValue: "",
+      baseType: "string",
       component: "textarea"
     },
     {
@@ -34,6 +36,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Number",
       icon: "i-lucide-hash",
       defaultValue: 0,
+      baseType: "number",
       detect: (value) => typeof value === "number"
     },
     {
@@ -41,6 +44,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Boolean",
       icon: "i-lucide-circle-check",
       defaultValue: false,
+      baseType: "boolean",
       detect: (value) => typeof value === "boolean"
     },
     {
@@ -48,6 +52,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Date",
       icon: "i-lucide-calendar",
       defaultValue: () => /* @__PURE__ */ new Date(),
+      baseType: "date",
       detect: (value) => isDateObject(value) || isDateString(value)
     },
     {
@@ -55,6 +60,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Date & Time",
       icon: "i-lucide-calendar-clock",
       defaultValue: () => /* @__PURE__ */ new Date(),
+      baseType: "datetime",
       detect: (value) => isDateTimeString(value)
     },
     {
@@ -62,6 +68,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Tags",
       icon: "i-lucide-tags",
       defaultValue: [],
+      baseType: "string-array",
       detect: (value) => isStringArray(value)
     },
     {
@@ -69,6 +76,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Array",
       icon: "i-lucide-list",
       defaultValue: [],
+      baseType: "array",
       detect: (value) => Array.isArray(value) && !isStringArray(value)
     },
     {
@@ -76,6 +84,7 @@ export function useYamlFieldTypes(customTypes) {
       label: "Object",
       icon: "i-lucide-box",
       defaultValue: {},
+      baseType: "object",
       detect: (value) => typeof value === "object" && value !== null && !Array.isArray(value) && !isDateObject(value)
     },
     {
@@ -83,22 +92,24 @@ export function useYamlFieldTypes(customTypes) {
       label: "Null",
       icon: "i-lucide-circle-slash",
       defaultValue: null,
+      baseType: "null",
       detect: (value) => value === null
     }
   ];
   const fieldTypes = computed(() => {
     const types = [...DEFAULT_FIELD_TYPES];
+    const newCustomTypes = [];
     if (customTypes) {
       for (const customType of customTypes) {
         const existingIndex = types.findIndex((t) => t.type === customType.type);
         if (existingIndex >= 0) {
           types[existingIndex] = customType;
         } else {
-          types.push(customType);
+          newCustomTypes.push(customType);
         }
       }
     }
-    return types;
+    return [...newCustomTypes, ...types];
   });
   const getFieldType = (type) => {
     return fieldTypes.value.find((t) => t.type === type);

package/dist/runtime/types/types.d.ts

@@ -10,20 +10,43 @@ export type YamlFormData<T extends object = {}> = {
 	[key: string]: any;
 } & T
 
+/**
+ * Base types that define conversion rules
+ * Custom types inherit conversion rules from these base types
+ */
+export type YamlBaseType = 
+	| 'string'       // Text primitives
+	| 'number'       // Numeric primitives
+	| 'boolean'      // Boolean primitives
+	| 'date'         // Date without time
+	| 'datetime'     // Date with time
+	| 'string-array' // Array of strings (tags)
+	| 'array'        // Generic array
+	| 'object'       // Generic object
+	| 'null'         // Null value
+
 /**
  * YAML Field Type Definition
  * Centralized schema for all field types supported by the YAML editor
  */
 export interface YamlFieldType {
-	/** Unique type identifier */
+	/** Unique type identifier (can be custom, e.g. 'color', 'email', 'url') */
 	type: string
-	/** Display label */
+	/** Display label shown in dropdowns */
 	label: string
-	/** Lucide icon name */
+	/** Lucide icon name (e.g. 'i-lucide-palette') */
 	icon: string
 	/** Default value when creating new field of this type */
 	defaultValue: any
-	/** Optional slot name for custom component rendering */
+	/** 
+	 * Base type for conversion rules - determines what this type can convert to/from
+	 * Custom types inherit conversion rules from their base type
+	 * @example
+	 * - color → 'string' (can convert to/from string, number, boolean, etc.)
+	 * - percentage → 'number' (can convert to/from number, string, boolean)
+	 */
+	baseType: YamlBaseType
+	/** Optional slot name for custom component rendering (e.g. 'color' → #field-color) */
 	component?: string
 	/** Optional detection function for auto-typing existing values */
 	detect?: (value: any) => boolean

package/package.json

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