@type32/yaml-editor-form 0.1.2

package/dist/module.d.mts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@type32/yaml-editor-form",
+  "configKey": "yamlEditorForm",
+  "version": "0.1.2",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,25 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@type32/yaml-editor-form",
+    configKey: "yamlEditorForm"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({ path: resolver.resolve("runtime/components") });
+    addImportsDir(resolver.resolve("runtime/composables"));
+    _nuxt.options.build.transpile.push("js-yaml");
+    _nuxt.options.alias["@type32/yaml-editor-form"] = resolver.resolve(
+      "./runtime/types/types"
+    );
+    _nuxt.options.alias["@type32/yaml-editor-form"] = resolver.resolve(
+      "./runtime/assets/css"
+    );
+    _nuxt.options.css.unshift(resolver.resolve("./runtime/assets/css/main.css"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/css/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";@import "tailwindcss/utilities" layer(utilities);@import "@nuxt/ui";.yaml-collapsible-content{@apply mt-1 ml-2 pl-3 border-l border-l-muted}

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

@@ -0,0 +1,47 @@
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_15) => any;
+} & {
+    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, {
+    "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<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/YamlCollapsible.vue

@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: false
+  }
+});
+const open = defineModel("open", { type: Boolean, default: void 0 });
+</script>
+
+<template>
+    <UCollapsible
+        v-model:open="open"
+        :default-open="defaultOpen"
+        class="group/collapsible"
+    >
+        <div class="flex items-center justify-between gap-2 w-full">
+            <div class="flex items-center gap-2">
+                <div
+                    class="flex items-center justify-center size-3.5 rounded bg-elevated transition-colors duration-200 group-hover/collapsible:bg-accented">
+                    <UIcon
+                        name="i-lucide-chevron-right"
+                        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>
+                <slot name="badge"/>
+            </div>
+
+            <slot name="actions"/>
+        </div>
+
+        <template #content>
+            <div class="yaml-collapsible-content">
+                <slot/>
+            </div>
+        </template>
+    </UCollapsible>
+</template>

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

@@ -0,0 +1,47 @@
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    badge?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_15) => any;
+} & {
+    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, {
+    "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<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/YamlFieldInput.d.vue.ts

@@ -0,0 +1,54 @@
+import type { YamlFieldType } from "../types/types.js";
+/**
+ * YAML Field Input - Renders input components for simple field types
+ *
+ * Handles rendering of all primitive/simple type inputs:
+ * - String (UInput)
+ * - Textarea (UTextarea)
+ * - Number (UInputNumber)
+ * - Boolean (USwitch)
+ * - Date (UInputDate)
+ * - DateTime (UInputDate with granularity)
+ * - Tags (UInputTags)
+ * - Null (UInput disabled)
+ *
+ * Custom field types can be rendered via slots.
+ */
+type YamlValue = string | number | boolean | null | Date | YamlValue[] | {
+    [key: string]: YamlValue;
+};
+type __VLS_Props = {
+    /** Type of the field (string, number, boolean, etc.) */
+    valueType: string;
+    /** Whether the field is read-only */
+    readonly?: boolean;
+    /** Optional field type definition for custom component detection */
+    fieldType?: YamlFieldType;
+};
+type __VLS_ModelProps = {
+    modelValue: YamlValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: string, __VLS_3: {
+    modelValue: YamlValue;
+    readonly: boolean;
+    valueType: string;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: YamlValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
+}>, {
+    readonly: boolean;
+}, {}, {}, {}, 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/YamlFieldInput.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { CalendarDate, CalendarDateTime, parseDate, parseDateTime } from "@internationalized/date";
+import { ref, watch, computed } from "vue";
+const modelValue = defineModel({ type: [String, Number, Boolean, null, Date, Array, Object], ...{ required: true } });
+const props = defineProps({
+  valueType: { type: String, required: true },
+  readonly: { type: Boolean, required: false, default: false },
+  fieldType: { type: Object, required: false }
+});
+function isDateObject(val) {
+  return val instanceof Date && !isNaN(val.getTime());
+}
+function jsDateToCalendarDate(date) {
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+function jsDateToCalendarDateTime(date) {
+  return new CalendarDateTime(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes(),
+    date.getSeconds()
+  );
+}
+function stringToCalendarDate(str) {
+  try {
+    return parseDate(str);
+  } catch {
+    return jsDateToCalendarDate(/* @__PURE__ */ new Date());
+  }
+}
+function stringToCalendarDateTime(str) {
+  try {
+    return parseDateTime(str);
+  } catch {
+    return jsDateToCalendarDateTime(/* @__PURE__ */ new Date());
+  }
+}
+const hasCustomComponent = computed(() => {
+  return props.fieldType?.component !== void 0;
+});
+const customSlotName = computed(() => {
+  return props.fieldType?.component ? `field-${props.fieldType.component}` : void 0;
+});
+</script>
+
+<template>
+    <!-- Custom Component via Slot -->
+    <slot
+        v-if="hasCustomComponent && customSlotName"
+        :name="customSlotName"
+        :model-value="modelValue"
+        :readonly="readonly"
+        :value-type="valueType"
+    />
+
+    <!-- Built-in Input Components -->
+    <template v-else>
+        <!-- String -->
+        <UInput
+            v-if="valueType === 'string'"
+            :model-value="String(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Enter text..."
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Textarea (Long Text) -->
+        <UTextarea
+            v-else-if="valueType === 'textarea'"
+            :model-value="String(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Enter long text..."
+            :rows="4"
+            autoresize
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Number -->
+        <UInputNumber
+            v-else-if="valueType === 'number'"
+            :model-value="Number(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            placeholder="0"
+            @update:model-value="(val) => modelValue = val ?? 0"
+        />
+
+        <!-- Boolean -->
+        <USwitch
+            v-else-if="valueType === 'boolean'"
+            :model-value="Boolean(modelValue)"
+            size="xs"
+            :disabled="readonly"
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Date (Date only, no time) -->
+        <UInputDate
+            v-else-if="valueType === 'date'"
+            :model-value="typeof modelValue === 'string' ? stringToCalendarDate(modelValue) : jsDateToCalendarDate(/* @__PURE__ */ new Date())"
+            size="xs"
+            :disabled="readonly"
+            @update:model-value="(val) => {
+  if (val && 'year' in val) {
+    modelValue = `${val.year}-${String(val.month).padStart(2, '0')}-${String(val.day).padStart(2, '0')}`;
+  }
+}"
+        />
+
+        <!-- DateTime (Date + Time) - UInputDate handles both with granularity -->
+        <UInputDate
+            v-else-if="valueType === 'datetime'"
+            :model-value="typeof modelValue === 'string' ? stringToCalendarDateTime(modelValue) : jsDateToCalendarDateTime(/* @__PURE__ */ new Date())"
+            size="xs"
+            :disabled="readonly"
+            granularity="second"
+            @update:model-value="(val) => {
+  if (val && 'year' in val && 'month' in val && 'day' in val) {
+    const hour = 'hour' in val ? val.hour : 0;
+    const minute = 'minute' in val ? val.minute : 0;
+    const second = 'second' in val ? val.second : 0;
+    const newDateTime = new CalendarDateTime(val.year, val.month, val.day, hour, minute, second);
+    const isoString = `${newDateTime.year}-${String(newDateTime.month).padStart(2, '0')}-${String(newDateTime.day).padStart(2, '0')}T${String(newDateTime.hour).padStart(2, '0')}:${String(newDateTime.minute).padStart(2, '0')}:${String(newDateTime.second).padStart(2, '0')}`;
+    modelValue = isoString;
+  }
+}"
+        />
+
+        <!-- String Array (Tags) -->
+        <UInputTags
+            v-else-if="valueType === 'string-array'"
+            :model-value="Array.isArray(modelValue) ? modelValue : []"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Add tags..."
+            @update:model-value="(val) => modelValue = val"
+        />
+
+        <!-- Null -->
+        <div v-else-if="valueType === 'null'" class="text-xs text-muted italic">
+            null
+        </div>
+
+        <!-- Fallback for unknown types -->
+        <UInput
+            v-else
+            :model-value="String(modelValue || '')"
+            size="xs"
+            :disabled="readonly"
+            placeholder="Enter value..."
+            @update:model-value="(val) => modelValue = val"
+        />
+    </template>
+</template>

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

@@ -0,0 +1,54 @@
+import type { YamlFieldType } from "../types/types.js";
+/**
+ * YAML Field Input - Renders input components for simple field types
+ *
+ * Handles rendering of all primitive/simple type inputs:
+ * - String (UInput)
+ * - Textarea (UTextarea)
+ * - Number (UInputNumber)
+ * - Boolean (USwitch)
+ * - Date (UInputDate)
+ * - DateTime (UInputDate with granularity)
+ * - Tags (UInputTags)
+ * - Null (UInput disabled)
+ *
+ * Custom field types can be rendered via slots.
+ */
+type YamlValue = string | number | boolean | null | Date | YamlValue[] | {
+    [key: string]: YamlValue;
+};
+type __VLS_Props = {
+    /** Type of the field (string, number, boolean, etc.) */
+    valueType: string;
+    /** Whether the field is read-only */
+    readonly?: boolean;
+    /** Optional field type definition for custom component detection */
+    fieldType?: YamlFieldType;
+};
+type __VLS_ModelProps = {
+    modelValue: YamlValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: string, __VLS_3: {
+    modelValue: YamlValue;
+    readonly: boolean;
+    valueType: string;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: YamlValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: YamlValue) => any) | undefined;
+}>, {
+    readonly: boolean;
+}, {}, {}, {}, 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/YamlFormEditor.d.vue.ts

@@ -0,0 +1,66 @@
+import type { YamlFieldType, YamlFormData } from "../types/types.js";
+type __VLS_Props = {
+    filePath?: string;
+    readonly?: boolean;
+    /** Custom field type definitions (merged with defaults) */
+    fieldTypes?: YamlFieldType[];
+};
+type __VLS_ModelProps = {
+    /**
+     * YAML Form Data Editor
+     *
+     * Schema-driven form editor for YAML/frontmatter data.
+     * Supports custom field types through the fieldTypes prop.
+     *
+     * Features:
+     * - Primitive types (string, number, boolean, null)
+     * - Complex types (date, datetime, string-array)
+     * - Objects (nested structures)
+     * - Arrays (primitives and objects)
+     * - Recursive structures
+     * - Custom field types with custom components
+     *
+     * Can be used standalone or embedded in the rich text editor for frontmatter editing.
+     */
+    modelValue: YamlFormData;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_19: string, __VLS_20: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any) | undefined;
+}>, {
+    readonly: boolean;
+}, {}, {}, {}, 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/YamlFormEditor.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { useYamlFieldTypes } from "../composables/useYamlFieldTypes";
+import { ref, watch, computed } from "vue";
+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 }
+});
+const { getDefaultValue, getTypeMenuItems } = useYamlFieldTypes(props.fieldTypes);
+const isDirty = ref(false);
+watch(data, () => {
+  isDirty.value = true;
+}, { deep: true });
+function addField(fieldType = "string") {
+  if (!data.value) data.value = {};
+  const newKey = `field_${Object.keys(data.value).length + 1}`;
+  data.value[newKey] = getDefaultValue(fieldType);
+}
+function removeField(key) {
+  if (data.value) {
+    delete data.value[key];
+  }
+}
+const addFieldOptions = computed(() => {
+  return getTypeMenuItems((type) => addField(type));
+});
+</script>
+
+<template>
+	<ClientOnly>
+		<div class="space-y-4">
+			<div class="space-y-3">
+				<YamlFormField
+					v-for="(value, key) in data"
+					:key="String(key)"
+					v-model="data[key]"
+					:field-key="String(key)"
+					:readonly="readonly"
+					:field-types="fieldTypes"
+					@remove="removeField(String(key))"
+					@update:field-key="(newKey) => {
+  if (newKey !== key) {
+    data[newKey] = data[key];
+    delete data[key];
+  }
+}"
+				>
+					<!-- Forward all slots to YamlFormField for custom field components -->
+					<template v-for="(_, name) in $slots" #[name]="slotProps">
+						<slot :name="name" v-bind="slotProps" />
+					</template>
+				</YamlFormField>
+			</div>
+
+			<UDropdownMenu
+				v-if="!readonly"
+				:items="[addFieldOptions]"
+				size="sm"
+			>
+				<UButton
+					icon="i-lucide-plus"
+					label="Add Field"
+					variant="ghost"
+					size="sm"
+				/>
+			</UDropdownMenu>
+		</div>
+	</ClientOnly>
+</template>

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

@@ -0,0 +1,66 @@
+import type { YamlFieldType, YamlFormData } from "../types/types.js";
+type __VLS_Props = {
+    filePath?: string;
+    readonly?: boolean;
+    /** Custom field type definitions (merged with defaults) */
+    fieldTypes?: YamlFieldType[];
+};
+type __VLS_ModelProps = {
+    /**
+     * YAML Form Data Editor
+     *
+     * Schema-driven form editor for YAML/frontmatter data.
+     * Supports custom field types through the fieldTypes prop.
+     *
+     * Features:
+     * - Primitive types (string, number, boolean, null)
+     * - Complex types (date, datetime, string-array)
+     * - Objects (nested structures)
+     * - Arrays (primitives and objects)
+     * - Recursive structures
+     * - Custom field types with custom components
+     *
+     * Can be used standalone or embedded in the rich text editor for frontmatter editing.
+     */
+    modelValue: YamlFormData;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_19: string, __VLS_20: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        [key: string]: any;
+        title?: string;
+        description?: string;
+        date?: Date;
+        draft?: boolean;
+        tags?: string[];
+        categories?: string[];
+        image?: string;
+        slug?: string;
+    }) => any) | undefined;
+}>, {
+    readonly: boolean;
+}, {}, {}, {}, 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;
+    };
+};