@moonmangit/vue-autoform 0.1.0

package/README.md

@@ -0,0 +1,233 @@
+# vue-autoform
+
+Headless Vue 3 auto-rendering form library with Zod schema validation, responsive CSS grid layout, and fully customisable field components.
+
+## Features
+
+- **Schema-driven** — define fields with Zod; validation is automatic
+- **Headless** — bring your own UI components; no styles imposed
+- **Responsive grid** — shorthand col-counts or explicit per-breakpoint layouts, CSS-only
+- **Flexible validation** — run on `blur`, `input`, or `submit`
+- **Full TypeScript support**
+
+## Install
+
+```bash
+pnpm add vue-autoform zod
+# or
+npm install vue-autoform zod
+```
+
+> `vue` and `zod` are peer dependencies and must be installed in your project.
+
+---
+
+## Basic Usage
+
+```vue
+<template>
+  <AutoForm
+    :schema="schema"
+    :fields="fields"
+    v-model="formData"
+    validate-on="blur"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { z } from 'zod'
+import { AutoForm } from 'vue-autoform'
+import MyTextInput from './MyTextInput.vue'
+
+const schema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Min 8 characters'),
+})
+
+const fields = {
+  email: {
+    component: MyTextInput,
+    props: { label: 'Email', type: 'email' },
+  },
+  password: {
+    component: MyTextInput,
+    props: { label: 'Password', type: 'password' },
+  },
+}
+
+const formData = reactive({ email: '', password: '' })
+</script>
+```
+
+---
+
+## Field Component Contract
+
+Your custom field components receive these props automatically:
+
+| Prop | Type | Description |
+|---|---|---|
+| `modelValue` | `unknown` | Current field value |
+| `error` | `string \| undefined` | Zod validation error message |
+| `...props` | — | Any extra props from `FieldConfig.props` |
+
+They should emit `update:modelValue` for v-model binding and `blur` for blur-based validation.
+
+```vue
+<!-- Example field component -->
+<template>
+  <div>
+    <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" @blur="emit('blur')" />
+    <span v-if="error">{{ error }}</span>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{ modelValue?: string; error?: string; label?: string }>()
+const emit = defineEmits(['update:modelValue', 'blur'])
+</script>
+```
+
+---
+
+## Layout
+
+`layout` is optional. Omitting it renders all fields in a single column in schema-key order.
+
+### Shorthand — column count per breakpoint
+
+```ts
+const layout = {
+  default: 1,   // 1 column on mobile
+  md: 2,        // 2 columns at ≥768px
+  lg: 3,        // 3 columns at ≥1024px
+}
+```
+
+Fields auto-flow into columns following schema-key order.
+
+### Explicit — full grid per breakpoint
+
+```ts
+const layout = {
+  default: [
+    ['firstName'],
+    ['lastName'],
+    ['email'],
+  ],
+  md: [
+    ['firstName', 'lastName'],
+    ['email'],
+  ],
+}
+```
+
+Each inner array is a row; each string is a field key matching the Zod schema.
+
+---
+
+## Breakpoints
+
+Default breakpoints (Tailwind-compatible):
+
+| Key | Min-width |
+|---|---|
+| `sm` | 640px |
+| `md` | 768px |
+| `lg` | 1024px |
+| `xl` | 1280px |
+| `2xl` | 1536px |
+
+Override per form with the `breakpoints` prop:
+
+```vue
+<AutoForm
+  :schema="schema"
+  :layout="{ default: 1, tablet: 2 }"
+  :breakpoints="{ tablet: 900 }"
+  :fields="fields"
+  v-model="formData"
+/>
+```
+
+---
+
+## Validation
+
+```vue
+<!-- Validate on blur (default) -->
+<AutoForm validate-on="blur" ... />
+
+<!-- Validate on every keystroke -->
+<AutoForm validate-on="input" ... />
+
+<!-- Validate only on submit -->
+<AutoForm ref="form" validate-on="submit" ... />
+```
+
+For `submit` mode, call `validateAll()` via template ref:
+
+```ts
+const form = ref()
+function handleSubmit() {
+  const valid = form.value.validateAll() // returns true/false
+}
+```
+
+---
+
+## Error Slot
+
+Use the `#error` scoped slot for custom error rendering:
+
+```vue
+<AutoForm :schema="schema" :fields="fields" v-model="formData">
+  <template #error="{ fieldKey, error }">
+    <p v-if="error" class="my-error">{{ fieldKey }}: {{ error }}</p>
+  </template>
+</AutoForm>
+```
+
+---
+
+## Props Reference
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `schema` | `ZodObject` | required | Zod object schema |
+| `fields` | `Record<string, FieldConfig>` | required | Field component map |
+| `modelValue` | `Record<string, unknown>` | required | Form data (`v-model`) |
+| `layout` | `AutoFormLayout` | undefined | Grid layout config |
+| `validateOn` | `'blur' \| 'input' \| 'submit'` | `'blur'` | Validation trigger |
+| `breakpoints` | `Partial<BreakpointMap>` | Tailwind defaults | Custom breakpoint widths |
+
+---
+
+## CSS Variables
+
+Customise spacing without overriding component styles:
+
+```css
+.autoform {
+  --autoform-gap: 1rem;      /* gap between fields in a row */
+  --autoform-row-gap: 1rem;  /* gap between rows */
+}
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run playground (port 5174)
+pnpm playground
+
+# Build library
+pnpm build
+
+# Type check
+pnpm type-check
+```

package/dist/style.css

@@ -0,0 +1 @@
+.autoform{width:100%;display:flex;flex-direction:column;gap:var(--autoform-row-gap, 1rem)}.autoform-flat-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--autoform-gap, 1rem);width:100%}.autoform-flat-grid .autoform-cell{min-width:0}.autoform-default-input{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:1rem;outline:none;box-sizing:border-box}.autoform-default-input:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}.autoform-row{display:grid;grid-template-columns:repeat(var(--autoform-cols, 1),minmax(0,1fr));gap:var(--autoform-gap, 1rem);width:100%}.autoform-cell{min-width:0}

package/dist/vue-autoform.cjs.js

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),L={sm:640,md:768,lg:1024,xl:1280,"2xl":1536};function b(a){return typeof a.default=="number"}function w(a){return Array.isArray(a.default)}function O(a,h,E,u,S,$){const s=e.reactive({}),y=e.computed(()=>({...L,...$.value})),d=e.computed(()=>Object.keys(a.shape)),p=e.computed(()=>{const o=S.value;if(!o)return d.value.map(t=>[t]);if(w(o))return o.default;if(b(o)){const t=o.default,r=d.value,c=[];for(let n=0;n<r.length;n+=t)c.push(r.slice(n,n+t));return c}return d.value.map(t=>[t])});function V(o,t){var i;const r=a.shape;if(!r[o])return;const n=r[o].safeParse(t);if(!n.success)return((i=n.error.errors[0])==null?void 0:i.message)??"Invalid value"}function I(){const o=a.safeParse(h.value);return o.success?(Object.keys(s).forEach(t=>delete s[t]),!0):(o.error.errors.forEach(t=>{const r=String(t.path[0]);s[r]=t.message}),!1)}function F(o,t){const r={...h.value,[o]:t};if(E("update:modelValue",r),u.value==="input"){const c=V(o,t);c?s[o]=c:delete s[o]}}function A(o){if(u.value==="blur"){const t=V(o,h.value[o]);t?s[o]=t:delete s[o]}}function m(){const o=S.value;if(!o)return[];const t=y.value,r=[];if(w(o)){const c=Object.keys(o).filter(n=>n!=="default");for(const n of c){const i=t[n],l=o[n];i&&l&&r.push({minWidth:i,grid:l,key:n})}}else if(b(o)){const c=Object.keys(o).filter(n=>n!=="default");for(const n of c){const i=t[n],l=o[n];if(i&&l){const f=d.value,v=[];for(let B=0;B<f.length;B+=l)v.push(f.slice(B,B+l));r.push({minWidth:i,grid:v,key:n})}}}return r.sort((c,n)=>c.minWidth-n.minWidth)}return{errors:s,resolvedLayout:p,schemaKeys:d,onFieldInput:F,onFieldBlur:A,validateAll:I,getBreakpointLayouts:m}}const U=["data-autoform-id"],P={key:1,class:"autoform-flat-grid"},T=["value","onInput","onBlur"],D={key:2,class:"autoform-flat-grid"},N=["data-field-key"],W=["value","onInput","onBlur"],M=e.defineComponent({__name:"AutoForm",props:{schema:{},layout:{},fields:{},modelValue:{},validateOn:{default:"blur"},breakpoints:{}},emits:["update:modelValue"],setup(a,{expose:h,emit:E}){const u=a,S=E,$=e.ref(`autoform-${Math.random().toString(36).slice(2,9)}`),{errors:s,schemaKeys:y,onFieldInput:d,onFieldBlur:p,validateAll:V}=O(u.schema,e.toRef(u,"modelValue"),(m,o)=>S("update:modelValue",o),e.toRef(u,"validateOn"),e.toRef(u,"layout"),e.toRef(u,"breakpoints")),I=e.computed(()=>u.layout?b(u.layout):!1),F=e.computed(()=>y.value),A=e.computed(()=>{if(!u.layout)return"";const m={...L,...u.breakpoints},o=$.value,t=[];if(b(u.layout)){const r=u.layout;t.push(`[data-autoform-id="${o}"] .autoform-flat-grid {`,`  grid-template-columns: repeat(${r.default}, minmax(0, 1fr));`,"}");const c=Object.keys(r).filter(n=>n!=="default");for(const n of c){const i=m[n],l=r[n];i&&l&&t.push(`@media (min-width: ${i}px) {`,`  [data-autoform-id="${o}"] .autoform-flat-grid {`,`    grid-template-columns: repeat(${l}, minmax(0, 1fr));`,"  }","}")}}else if(w(u.layout)){const r=u.layout,c=(l,f)=>{const v=Math.max(...l.map(k=>k.length)),B=y.value,x=new Set(l.flat()),g=[];g.push(`[data-autoform-id="${o}"] .autoform-flat-grid { grid-template-columns: repeat(${v}, minmax(0, 1fr)); }`),B.forEach(k=>{x.has(k)||g.push(`[data-autoform-id="${o}"] [data-field-key="${k}"] { display: none; }`)});let j=1;return l.forEach(k=>{let C=1;k.forEach(R=>{g.push(`[data-autoform-id="${o}"] [data-field-key="${R}"] { display: block; grid-row: ${j}; grid-column: ${C}; }`),C++}),j++}),f?[`@media (min-width: ${f}px) {`,...g.map(k=>`  ${k}`),"}"].join(`
+`):g.join(`
+`)};t.push(c(r.default));const i=Object.keys(r).filter(l=>l!=="default").sort((l,f)=>(m[l]??0)-(m[f]??0));for(const l of i){const f=m[l],v=r[l];f&&v&&t.push(c(v,String(f)))}}return t.join(`
+`)});return h({validateAll:V,errors:s}),(m,o)=>(e.openBlock(),e.createElementBlock("div",{class:"autoform","data-autoform-id":$.value},[A.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent("style"),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(A.value),1)]),_:1})):e.createCommentVNode("",!0),I.value?(e.openBlock(),e.createElementBlock("div",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(F.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t,class:"autoform-cell"},[a.fields[t]?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.fields[t].component),e.mergeProps({modelValue:a.modelValue[t],error:e.unref(s)[t]},{ref_for:!0},a.fields[t].props??{},{"onUpdate:modelValue":r=>e.unref(d)(t,r),onBlur:()=>e.unref(p)(t)}),null,16,["modelValue","error","onUpdate:modelValue","onBlur"])),e.renderSlot(m.$slots,"error",{fieldKey:t,error:e.unref(s)[t]})],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(m.$slots,`field-${t}`,{fieldKey:t,value:a.modelValue[t],error:e.unref(s)[t],onUpdate:r=>e.unref(d)(t,r),onBlur:()=>e.unref(p)(t)},()=>[e.createElementVNode("input",{class:"autoform-default-input",value:String(a.modelValue[t]??""),onInput:r=>e.unref(d)(t,r.target.value),onBlur:()=>e.unref(p)(t)},null,40,T)]),e.renderSlot(m.$slots,"error",{fieldKey:t,error:e.unref(s)[t]})],64))]))),128))])):(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(F.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t,class:"autoform-cell","data-field-key":t},[a.fields[t]?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.fields[t].component),e.mergeProps({modelValue:a.modelValue[t],error:e.unref(s)[t]},{ref_for:!0},a.fields[t].props??{},{"onUpdate:modelValue":r=>e.unref(d)(t,r),onBlur:()=>e.unref(p)(t)}),null,16,["modelValue","error","onUpdate:modelValue","onBlur"])),e.renderSlot(m.$slots,"error",{fieldKey:t,error:e.unref(s)[t]})],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(m.$slots,`field-${t}`,{fieldKey:t,value:a.modelValue[t],error:e.unref(s)[t],onUpdate:r=>e.unref(d)(t,r),onBlur:()=>e.unref(p)(t)},()=>[e.createElementVNode("input",{class:"autoform-default-input",value:String(a.modelValue[t]??""),onInput:r=>e.unref(d)(t,r.target.value),onBlur:()=>e.unref(p)(t)},null,40,W)]),e.renderSlot(m.$slots,"error",{fieldKey:t,error:e.unref(s)[t]})],64))],8,N))),128))]))],8,U))}}),q=e.defineComponent({__name:"AutoFormRow",props:{row:{}},setup(a){return(h,E)=>(e.openBlock(),e.createElementBlock("div",{class:"autoform-row",style:e.normalizeStyle({"--autoform-cols":a.row.length})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.row,u=>(e.openBlock(),e.createElementBlock("div",{key:u,class:"autoform-cell"},[e.renderSlot(h.$slots,"default",{fieldKey:u})]))),128))],4))}});exports.AutoForm=M;exports.AutoFormRow=q;exports.DEFAULT_BREAKPOINTS=L;exports.isExplicitLayout=w;exports.isShorthandLayout=b;exports.useAutoForm=O;
+//# sourceMappingURL=vue-autoform.cjs.js.map

package/dist/vue-autoform.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-autoform.cjs.js","sources":["../src/types.ts","../src/composables/useAutoForm.ts","../src/components/AutoForm.vue","../src/components/AutoFormRow.vue"],"sourcesContent":["import type { Component } from 'vue'\nimport type { ZodObject, ZodRawShape } from 'zod'\n\nexport type BreakpointKey = 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport type BreakpointMap = Record<BreakpointKey, number>\n\nexport const DEFAULT_BREAKPOINTS: BreakpointMap = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n}\n\nexport interface FieldConfig {\n  component: Component\n  props?: Record<string, unknown>\n  [key: string]: unknown\n}\n\nexport type LayoutRow = string[]\n\nexport type LayoutGrid = LayoutRow[]\n\nexport type ShorthandLayout = { default: number } & Partial<Record<BreakpointKey, number>>\n\nexport type ExplicitLayout = { default: LayoutGrid } & Partial<Record<BreakpointKey, LayoutGrid>>\n\nexport type AutoFormLayout = ShorthandLayout | ExplicitLayout\n\nexport function isShorthandLayout(layout: AutoFormLayout): layout is ShorthandLayout {\n  return typeof layout.default === 'number'\n}\n\nexport function isExplicitLayout(layout: AutoFormLayout): layout is ExplicitLayout {\n  return Array.isArray(layout.default)\n}\n\nexport interface AutoFormProps {\n  schema: ZodObject<ZodRawShape>\n  layout?: AutoFormLayout\n  fields: Record<string, FieldConfig>\n  modelValue: Record<string, unknown>\n  validateOn?: 'blur' | 'input' | 'submit'\n  breakpoints?: Partial<BreakpointMap>\n}\n\nexport interface FieldRenderInfo {\n  key: string\n  config: FieldConfig | undefined\n  value: unknown\n  error: string | undefined\n}\n","import { reactive, computed } from 'vue'\nimport type { Ref } from 'vue'\nimport type { ZodObject, ZodRawShape } from 'zod'\nimport type { BreakpointMap, AutoFormLayout, LayoutGrid } from '../types'\nimport {\n  DEFAULT_BREAKPOINTS,\n  isShorthandLayout,\n  isExplicitLayout,\n} from '../types'\n\nexport function useAutoForm(\n  schema: ZodObject<ZodRawShape>,\n  modelValue: Ref<Record<string, unknown>>,\n  emit: (event: 'update:modelValue', value: Record<string, unknown>) => void,\n  validateOn: Ref<'blur' | 'input' | 'submit'>,\n  layout: Ref<AutoFormLayout | undefined>,\n  breakpointsOverride: Ref<Partial<BreakpointMap> | undefined>,\n) {\n  const errors = reactive<Record<string, string>>({})\n\n  const breakpoints = computed<BreakpointMap>(() => ({\n    ...DEFAULT_BREAKPOINTS,\n    ...breakpointsOverride.value,\n  }))\n\n  const schemaKeys = computed<string[]>(() => Object.keys(schema.shape))\n\n  const resolvedLayout = computed<LayoutGrid>(() => {\n    const l = layout.value\n    if (!l) {\n      return schemaKeys.value.map((key: string) => [key])\n    }\n    if (isExplicitLayout(l)) {\n      return l.default\n    }\n    if (isShorthandLayout(l)) {\n      const cols = l.default\n      const keys = schemaKeys.value\n      const rows: LayoutGrid = []\n      for (let i = 0; i < keys.length; i += cols) {\n        rows.push(keys.slice(i, i + cols))\n      }\n      return rows\n    }\n    return schemaKeys.value.map((key: string) => [key])\n  })\n\n  function validateField(key: string, value: unknown): string | undefined {\n    const shape = schema.shape\n    if (!shape[key]) return undefined\n    const fieldSchema = shape[key]\n    const result = fieldSchema.safeParse(value)\n    if (!result.success) {\n      return result.error.errors[0]?.message ?? 'Invalid value'\n    }\n    return undefined\n  }\n\n  function validateAll(): boolean {\n    const result = schema.safeParse(modelValue.value)\n    if (!result.success) {\n      result.error.errors.forEach((err) => {\n        const key = String(err.path[0])\n        errors[key] = err.message\n      })\n      return false\n    }\n    Object.keys(errors).forEach((k: string) => delete errors[k])\n    return true\n  }\n\n  function onFieldInput(key: string, value: unknown) {\n    const updated = { ...modelValue.value, [key]: value }\n    emit('update:modelValue', updated)\n    if (validateOn.value === 'input') {\n      const msg = validateField(key, value)\n      if (msg) {\n        errors[key] = msg\n      } else {\n        delete errors[key]\n      }\n    }\n  }\n\n  function onFieldBlur(key: string) {\n    if (validateOn.value === 'blur') {\n      const msg = validateField(key, modelValue.value[key])\n      if (msg) {\n        errors[key] = msg\n      } else {\n        delete errors[key]\n      }\n    }\n  }\n\n  function getBreakpointLayouts(): Array<{ minWidth: number; grid: LayoutGrid; key: string }> {\n    const l = layout.value\n    if (!l) return []\n\n    const bps = breakpoints.value\n    const result: Array<{ minWidth: number; grid: LayoutGrid; key: string }> = []\n\n    if (isExplicitLayout(l)) {\n      const bpKeys = Object.keys(l).filter((k) => k !== 'default') as Array<keyof typeof l>\n      for (const bpKey of bpKeys) {\n        const minWidth = bps[bpKey as keyof BreakpointMap]\n        const grid = l[bpKey as keyof typeof l] as LayoutGrid\n        if (minWidth && grid) {\n          result.push({ minWidth, grid, key: bpKey })\n        }\n      }\n    } else if (isShorthandLayout(l)) {\n      const bpKeys = Object.keys(l).filter((k) => k !== 'default') as Array<keyof typeof l>\n      for (const bpKey of bpKeys) {\n        const minWidth = bps[bpKey as keyof BreakpointMap]\n        const cols = l[bpKey as keyof typeof l] as number\n        if (minWidth && cols) {\n          const keys = schemaKeys.value\n          const rows: LayoutGrid = []\n          for (let i = 0; i < keys.length; i += cols) {\n            rows.push(keys.slice(i, i + cols))\n          }\n          result.push({ minWidth, grid: rows, key: bpKey })\n        }\n      }\n    }\n\n    return result.sort((a, b) => a.minWidth - b.minWidth)\n  }\n\n  return {\n    errors,\n    resolvedLayout,\n    schemaKeys,\n    onFieldInput,\n    onFieldBlur,\n    validateAll,\n    getBreakpointLayouts,\n  }\n}\n","<template>\n  <div class=\"autoform\" :data-autoform-id=\"formId\">\n    <component :is=\"'style'\" v-if=\"mediaQueryCss\">{{\n      mediaQueryCss\n    }}</component>\n\n    <!-- Shorthand layout: single flat grid, CSS handles column count per breakpoint -->\n    <div v-if=\"isShorthand\" class=\"autoform-flat-grid\">\n      <div v-for=\"fieldKey in flatKeys\" :key=\"fieldKey\" class=\"autoform-cell\">\n        <template v-if=\"fields[fieldKey]\">\n          <component\n            :is=\"fields[fieldKey].component\"\n            :modelValue=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            v-bind=\"fields[fieldKey].props ?? {}\"\n            @update:modelValue=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            @blur=\"() => onFieldBlur(fieldKey)\"\n          />\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n        <template v-else>\n          <slot\n            :name=\"`field-${fieldKey}`\"\n            :fieldKey=\"fieldKey\"\n            :value=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            :onUpdate=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            :onBlur=\"() => onFieldBlur(fieldKey)\"\n          >\n            <input\n              class=\"autoform-default-input\"\n              :value=\"String(modelValue[fieldKey] ?? '')\"\n              @input=\"\n                (e: Event) =>\n                  onFieldInput(fieldKey, (e.target as HTMLInputElement).value)\n              \"\n              @blur=\"() => onFieldBlur(fieldKey)\"\n            />\n          </slot>\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n      </div>\n    </div>\n\n    <!-- Explicit layout / no layout: flat grid, CSS positions each field per breakpoint -->\n    <div v-else class=\"autoform-flat-grid\">\n      <div\n        v-for=\"fieldKey in flatKeys\"\n        :key=\"fieldKey\"\n        class=\"autoform-cell\"\n        :data-field-key=\"fieldKey\"\n      >\n        <template v-if=\"fields[fieldKey]\">\n          <component\n            :is=\"fields[fieldKey].component\"\n            :modelValue=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            v-bind=\"fields[fieldKey].props ?? {}\"\n            @update:modelValue=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            @blur=\"() => onFieldBlur(fieldKey)\"\n          />\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n        <template v-else>\n          <slot\n            :name=\"`field-${fieldKey}`\"\n            :fieldKey=\"fieldKey\"\n            :value=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            :onUpdate=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            :onBlur=\"() => onFieldBlur(fieldKey)\"\n          >\n            <input\n              class=\"autoform-default-input\"\n              :value=\"String(modelValue[fieldKey] ?? '')\"\n              @input=\"\n                (e: Event) =>\n                  onFieldInput(fieldKey, (e.target as HTMLInputElement).value)\n              \"\n              @blur=\"() => onFieldBlur(fieldKey)\"\n            />\n          </slot>\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, toRef } from \"vue\";\nimport type { ZodObject, ZodRawShape } from \"zod\";\nimport { useAutoForm } from \"../composables/useAutoForm\";\nimport type {\n  AutoFormLayout,\n  BreakpointMap,\n  FieldConfig,\n  LayoutGrid,\n} from \"../types\";\nimport {\n  isExplicitLayout,\n  isShorthandLayout,\n  DEFAULT_BREAKPOINTS,\n} from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    schema: ZodObject<ZodRawShape>;\n    layout?: AutoFormLayout;\n    fields: Record<string, FieldConfig>;\n    modelValue: Record<string, unknown>;\n    validateOn?: \"blur\" | \"input\" | \"submit\";\n    breakpoints?: Partial<BreakpointMap>;\n  }>(),\n  {\n    validateOn: \"blur\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: Record<string, unknown>): void;\n}>();\n\nconst formId = ref(`autoform-${Math.random().toString(36).slice(2, 9)}`);\n\nconst { errors, schemaKeys, onFieldInput, onFieldBlur, validateAll } =\n  useAutoForm(\n    props.schema,\n    toRef(props, \"modelValue\"),\n    (_, val) => emit(\"update:modelValue\", val),\n    toRef(props, \"validateOn\"),\n    toRef(props, \"layout\"),\n    toRef(props, \"breakpoints\"),\n  );\n\nconst isShorthand = computed(() =>\n  props.layout ? isShorthandLayout(props.layout) : false,\n);\n\nconst flatKeys = computed(() => schemaKeys.value);\n\nconst mediaQueryCss = computed<string>(() => {\n  if (!props.layout) return \"\";\n\n  const bps: BreakpointMap = { ...DEFAULT_BREAKPOINTS, ...props.breakpoints };\n  const id = formId.value;\n  const lines: string[] = [];\n\n  if (isShorthandLayout(props.layout)) {\n    const layout = props.layout;\n    // Base columns for the flat grid\n    lines.push(\n      `[data-autoform-id=\"${id}\"] .autoform-flat-grid {`,\n      `  grid-template-columns: repeat(${layout.default}, minmax(0, 1fr));`,\n      `}`,\n    );\n    const bpKeys = Object.keys(layout).filter((k) => k !== \"default\") as Array<\n      keyof typeof layout\n    >;\n    for (const bpKey of bpKeys) {\n      const minWidth = bps[bpKey as keyof BreakpointMap];\n      const cols = layout[bpKey as keyof typeof layout] as number;\n      if (minWidth && cols) {\n        lines.push(\n          `@media (min-width: ${minWidth}px) {`,\n          `  [data-autoform-id=\"${id}\"] .autoform-flat-grid {`,\n          `    grid-template-columns: repeat(${cols}, minmax(0, 1fr));`,\n          `  }`,\n          `}`,\n        );\n      }\n    }\n  } else if (isExplicitLayout(props.layout)) {\n    const layout = props.layout;\n    // Helper: build CSS rules for a given grid at a given scope (media query or base)\n    const gridToCss = (grid: LayoutGrid, wrap?: string): string => {\n      const maxCols = Math.max(...grid.map((r: string[]) => r.length));\n      const allKeys = schemaKeys.value;\n      const keysInGrid = new Set(grid.flat());\n      const fieldRules: string[] = [];\n\n      // Set grid column count\n      fieldRules.push(\n        `[data-autoform-id=\"${id}\"] .autoform-flat-grid { grid-template-columns: repeat(${maxCols}, minmax(0, 1fr)); }`,\n      );\n\n      // Hide fields not in this layout\n      allKeys.forEach((key: string) => {\n        if (!keysInGrid.has(key)) {\n          fieldRules.push(\n            `[data-autoform-id=\"${id}\"] [data-field-key=\"${key}\"] { display: none; }`,\n          );\n        }\n      });\n\n      // Position each field\n      let rowStart = 1;\n      grid.forEach((row: string[]) => {\n        let colStart = 1;\n        row.forEach((key: string) => {\n          fieldRules.push(\n            `[data-autoform-id=\"${id}\"] [data-field-key=\"${key}\"] { display: block; grid-row: ${rowStart}; grid-column: ${colStart}; }`,\n          );\n          colStart++;\n        });\n        rowStart++;\n      });\n\n      if (wrap) {\n        return [\n          `@media (min-width: ${wrap}px) {`,\n          ...fieldRules.map((r) => `  ${r}`),\n          `}`,\n        ].join(\"\\n\");\n      }\n      return fieldRules.join(\"\\n\");\n    };\n\n    // Default layout base styles\n    lines.push(gridToCss(layout.default));\n\n    // Per-breakpoint overrides\n    const bpKeys = Object.keys(layout).filter((k) => k !== \"default\") as Array<\n      keyof typeof layout\n    >;\n    const sortedBpKeys = bpKeys.sort(\n      (a, b) =>\n        (bps[a as keyof BreakpointMap] ?? 0) -\n        (bps[b as keyof BreakpointMap] ?? 0),\n    );\n    for (const bpKey of sortedBpKeys) {\n      const minWidth = bps[bpKey as keyof BreakpointMap];\n      const grid = layout[bpKey as keyof typeof layout] as LayoutGrid;\n      if (minWidth && grid) {\n        lines.push(gridToCss(grid, String(minWidth)));\n      }\n    }\n  }\n\n  return lines.join(\"\\n\");\n});\n\ndefineExpose({ validateAll, errors });\n</script>\n\n<style>\n.autoform {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--autoform-row-gap, 1rem);\n}\n\n.autoform-flat-grid {\n  display: grid;\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n  gap: var(--autoform-gap, 1rem);\n  width: 100%;\n}\n\n.autoform-flat-grid .autoform-cell {\n  min-width: 0;\n}\n\n.autoform-default-input {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.autoform-default-input:focus {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);\n}\n</style>\n","<template>\n  <div\n    class=\"autoform-row\"\n    :style=\"{ '--autoform-cols': row.length }\"\n  >\n    <div\n      v-for=\"fieldKey in row\"\n      :key=\"fieldKey\"\n      class=\"autoform-cell\"\n    >\n      <slot :fieldKey=\"fieldKey\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  row: string[]\n}>()\n</script>\n\n<style>\n.autoform-row {\n  display: grid;\n  grid-template-columns: repeat(var(--autoform-cols, 1), minmax(0, 1fr));\n  gap: var(--autoform-gap, 1rem);\n  width: 100%;\n}\n\n.autoform-cell {\n  min-width: 0;\n}\n</style>\n"],"names":["DEFAULT_BREAKPOINTS","isShorthandLayout","layout","isExplicitLayout","useAutoForm","schema","modelValue","emit","validateOn","breakpointsOverride","errors","reactive","breakpoints","computed","schemaKeys","resolvedLayout","l","key","cols","keys","rows","i","validateField","value","shape","result","_a","validateAll","k","err","onFieldInput","updated","msg","onFieldBlur","getBreakpointLayouts","bps","bpKeys","bpKey","minWidth","grid","a","b","props","__props","__emit","formId","ref","toRef","_","val","isShorthand","flatKeys","mediaQueryCss","id","lines","gridToCss","wrap","maxCols","r","allKeys","keysInGrid","fieldRules","rowStart","row","colStart","sortedBpKeys","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_2","_Fragment","_renderList","fieldKey","_mergeProps","_unref","_renderSlot","_ctx","_createElementVNode","e","_hoisted_4","_normalizeStyle"],"mappings":"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"}

package/dist/vue-autoform.d.ts

@@ -0,0 +1,181 @@
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { ZodObject } from 'zod';
+import { ZodRawShape } from 'zod';
+
+declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+schema: ZodObject<ZodRawShape>;
+layout?: AutoFormLayout;
+fields: Record<string, FieldConfig>;
+modelValue: Record<string, unknown>;
+validateOn?: "blur" | "input" | "submit";
+breakpoints?: Partial<BreakpointMap>;
+}>, {
+validateOn: string;
+}>>, {
+validateAll: () => boolean;
+errors: Record<string, string>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: Record<string, unknown>) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+schema: ZodObject<ZodRawShape>;
+layout?: AutoFormLayout;
+fields: Record<string, FieldConfig>;
+modelValue: Record<string, unknown>;
+validateOn?: "blur" | "input" | "submit";
+breakpoints?: Partial<BreakpointMap>;
+}>, {
+validateOn: string;
+}>>> & Readonly<{
+"onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {
+validateOn: "blur" | "input" | "submit";
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare const __VLS_component_2: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
+row: string[];
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
+row: string[];
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare function __VLS_template(): Partial<Record<`field-${string}`, (_: {
+    fieldKey: string;
+    value: unknown;
+    error: string;
+    onUpdate: (val: unknown) => void;
+    onBlur: () => void;
+}) => any>> & Partial<Record<`field-${string}`, (_: {
+    fieldKey: string;
+    value: unknown;
+    error: string;
+    onUpdate: (val: unknown) => void;
+    onBlur: () => void;
+}) => any>> & {
+    error?(_: {
+        fieldKey: string;
+        error: string;
+    }): any;
+};
+
+declare function __VLS_template_2(): {
+    default?(_: {
+        fieldKey: string;
+    }): any;
+};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_2<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const AutoForm: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+
+export declare type AutoFormLayout = ShorthandLayout | ExplicitLayout;
+
+export declare interface AutoFormProps {
+    schema: ZodObject<ZodRawShape>;
+    layout?: AutoFormLayout;
+    fields: Record<string, FieldConfig>;
+    modelValue: Record<string, unknown>;
+    validateOn?: 'blur' | 'input' | 'submit';
+    breakpoints?: Partial<BreakpointMap>;
+}
+
+export declare const AutoFormRow: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, ReturnType<typeof __VLS_template_2>>;
+
+export declare type BreakpointKey = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export declare type BreakpointMap = Record<BreakpointKey, number>;
+
+export declare const DEFAULT_BREAKPOINTS: BreakpointMap;
+
+export declare type ExplicitLayout = {
+    default: LayoutGrid;
+} & Partial<Record<BreakpointKey, LayoutGrid>>;
+
+export declare interface FieldConfig {
+    component: Component;
+    props?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+
+export declare interface FieldRenderInfo {
+    key: string;
+    config: FieldConfig | undefined;
+    value: unknown;
+    error: string | undefined;
+}
+
+export declare function isExplicitLayout(layout: AutoFormLayout): layout is ExplicitLayout;
+
+export declare function isShorthandLayout(layout: AutoFormLayout): layout is ShorthandLayout;
+
+export declare type LayoutGrid = LayoutRow[];
+
+export declare type LayoutRow = string[];
+
+export declare type ShorthandLayout = {
+    default: number;
+} & Partial<Record<BreakpointKey, number>>;
+
+export declare function useAutoForm(schema: ZodObject<ZodRawShape>, modelValue: Ref<Record<string, unknown>>, emit: (event: 'update:modelValue', value: Record<string, unknown>) => void, validateOn: Ref<'blur' | 'input' | 'submit'>, layout: Ref<AutoFormLayout | undefined>, breakpointsOverride: Ref<Partial<BreakpointMap> | undefined>): {
+    errors: Record<string, string>;
+    resolvedLayout: ComputedRef<LayoutGrid>;
+    schemaKeys: ComputedRef<string[]>;
+    onFieldInput: (key: string, value: unknown) => void;
+    onFieldBlur: (key: string) => void;
+    validateAll: () => boolean;
+    getBreakpointLayouts: () => Array<{
+        minWidth: number;
+        grid: LayoutGrid;
+        key: string;
+    }>;
+};
+
+export { }

package/dist/vue-autoform.es.js

@@ -0,0 +1,298 @@
+import { reactive as H, computed as S, defineComponent as z, ref as J, toRef as O, openBlock as i, createElementBlock as d, createBlock as L, resolveDynamicComponent as W, withCtx as X, createTextVNode as Y, toDisplayString as Z, createCommentVNode as _, Fragment as b, renderList as R, mergeProps as D, unref as n, renderSlot as V, createElementVNode as M, normalizeStyle as K } from "vue";
+const G = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function C(a) {
+  return typeof a.default == "number";
+}
+function N(a) {
+  return Array.isArray(a.default);
+}
+function tt(a, k, w, u, F, A) {
+  const l = H({}), E = S(() => ({
+    ...G,
+    ...A.value
+  })), p = S(() => Object.keys(a.shape)), v = S(() => {
+    const o = F.value;
+    if (!o)
+      return p.value.map((t) => [t]);
+    if (N(o))
+      return o.default;
+    if (C(o)) {
+      const t = o.default, e = p.value, c = [];
+      for (let r = 0; r < e.length; r += t)
+        c.push(e.slice(r, r + t));
+      return c;
+    }
+    return p.value.map((t) => [t]);
+  });
+  function I(o, t) {
+    var f;
+    const e = a.shape;
+    if (!e[o]) return;
+    const r = e[o].safeParse(t);
+    if (!r.success)
+      return ((f = r.error.errors[0]) == null ? void 0 : f.message) ?? "Invalid value";
+  }
+  function U() {
+    const o = a.safeParse(k.value);
+    return o.success ? (Object.keys(l).forEach((t) => delete l[t]), !0) : (o.error.errors.forEach((t) => {
+      const e = String(t.path[0]);
+      l[e] = t.message;
+    }), !1);
+  }
+  function j(o, t) {
+    const e = { ...k.value, [o]: t };
+    if (w("update:modelValue", e), u.value === "input") {
+      const c = I(o, t);
+      c ? l[o] = c : delete l[o];
+    }
+  }
+  function x(o) {
+    if (u.value === "blur") {
+      const t = I(o, k.value[o]);
+      t ? l[o] = t : delete l[o];
+    }
+  }
+  function m() {
+    const o = F.value;
+    if (!o) return [];
+    const t = E.value, e = [];
+    if (N(o)) {
+      const c = Object.keys(o).filter((r) => r !== "default");
+      for (const r of c) {
+        const f = t[r], s = o[r];
+        f && s && e.push({ minWidth: f, grid: s, key: r });
+      }
+    } else if (C(o)) {
+      const c = Object.keys(o).filter((r) => r !== "default");
+      for (const r of c) {
+        const f = t[r], s = o[r];
+        if (f && s) {
+          const h = p.value, $ = [];
+          for (let B = 0; B < h.length; B += s)
+            $.push(h.slice(B, B + s));
+          e.push({ minWidth: f, grid: $, key: r });
+        }
+      }
+    }
+    return e.sort((c, r) => c.minWidth - r.minWidth);
+  }
+  return {
+    errors: l,
+    resolvedLayout: v,
+    schemaKeys: p,
+    onFieldInput: j,
+    onFieldBlur: x,
+    validateAll: U,
+    getBreakpointLayouts: m
+  };
+}
+const ot = ["data-autoform-id"], et = {
+  key: 1,
+  class: "autoform-flat-grid"
+}, rt = ["value", "onInput", "onBlur"], at = {
+  key: 2,
+  class: "autoform-flat-grid"
+}, st = ["data-field-key"], nt = ["value", "onInput", "onBlur"], lt = /* @__PURE__ */ z({
+  __name: "AutoForm",
+  props: {
+    schema: {},
+    layout: {},
+    fields: {},
+    modelValue: {},
+    validateOn: { default: "blur" },
+    breakpoints: {}
+  },
+  emits: ["update:modelValue"],
+  setup(a, { expose: k, emit: w }) {
+    const u = a, F = w, A = J(`autoform-${Math.random().toString(36).slice(2, 9)}`), { errors: l, schemaKeys: E, onFieldInput: p, onFieldBlur: v, validateAll: I } = tt(
+      u.schema,
+      O(u, "modelValue"),
+      (m, o) => F("update:modelValue", o),
+      O(u, "validateOn"),
+      O(u, "layout"),
+      O(u, "breakpoints")
+    ), U = S(
+      () => u.layout ? C(u.layout) : !1
+    ), j = S(() => E.value), x = S(() => {
+      if (!u.layout) return "";
+      const m = { ...G, ...u.breakpoints }, o = A.value, t = [];
+      if (C(u.layout)) {
+        const e = u.layout;
+        t.push(
+          `[data-autoform-id="${o}"] .autoform-flat-grid {`,
+          `  grid-template-columns: repeat(${e.default}, minmax(0, 1fr));`,
+          "}"
+        );
+        const c = Object.keys(e).filter((r) => r !== "default");
+        for (const r of c) {
+          const f = m[r], s = e[r];
+          f && s && t.push(
+            `@media (min-width: ${f}px) {`,
+            `  [data-autoform-id="${o}"] .autoform-flat-grid {`,
+            `    grid-template-columns: repeat(${s}, minmax(0, 1fr));`,
+            "  }",
+            "}"
+          );
+        }
+      } else if (N(u.layout)) {
+        const e = u.layout, c = (s, h) => {
+          const $ = Math.max(...s.map((g) => g.length)), B = E.value, Q = new Set(s.flat()), y = [];
+          y.push(
+            `[data-autoform-id="${o}"] .autoform-flat-grid { grid-template-columns: repeat(${$}, minmax(0, 1fr)); }`
+          ), B.forEach((g) => {
+            Q.has(g) || y.push(
+              `[data-autoform-id="${o}"] [data-field-key="${g}"] { display: none; }`
+            );
+          });
+          let P = 1;
+          return s.forEach((g) => {
+            let T = 1;
+            g.forEach((q) => {
+              y.push(
+                `[data-autoform-id="${o}"] [data-field-key="${q}"] { display: block; grid-row: ${P}; grid-column: ${T}; }`
+              ), T++;
+            }), P++;
+          }), h ? [
+            `@media (min-width: ${h}px) {`,
+            ...y.map((g) => `  ${g}`),
+            "}"
+          ].join(`
+`) : y.join(`
+`);
+        };
+        t.push(c(e.default));
+        const f = Object.keys(e).filter((s) => s !== "default").sort(
+          (s, h) => (m[s] ?? 0) - (m[h] ?? 0)
+        );
+        for (const s of f) {
+          const h = m[s], $ = e[s];
+          h && $ && t.push(c($, String(h)));
+        }
+      }
+      return t.join(`
+`);
+    });
+    return k({ validateAll: I, errors: l }), (m, o) => (i(), d("div", {
+      class: "autoform",
+      "data-autoform-id": A.value
+    }, [
+      x.value ? (i(), L(W("style"), { key: 0 }, {
+        default: X(() => [
+          Y(Z(x.value), 1)
+        ]),
+        _: 1
+      })) : _("", !0),
+      U.value ? (i(), d("div", et, [
+        (i(!0), d(b, null, R(j.value, (t) => (i(), d("div", {
+          key: t,
+          class: "autoform-cell"
+        }, [
+          a.fields[t] ? (i(), d(b, { key: 0 }, [
+            (i(), L(W(a.fields[t].component), D({
+              modelValue: a.modelValue[t],
+              error: n(l)[t]
+            }, { ref_for: !0 }, a.fields[t].props ?? {}, {
+              "onUpdate:modelValue": (e) => n(p)(t, e),
+              onBlur: () => n(v)(t)
+            }), null, 16, ["modelValue", "error", "onUpdate:modelValue", "onBlur"])),
+            V(m.$slots, "error", {
+              fieldKey: t,
+              error: n(l)[t]
+            })
+          ], 64)) : (i(), d(b, { key: 1 }, [
+            V(m.$slots, `field-${t}`, {
+              fieldKey: t,
+              value: a.modelValue[t],
+              error: n(l)[t],
+              onUpdate: (e) => n(p)(t, e),
+              onBlur: () => n(v)(t)
+            }, () => [
+              M("input", {
+                class: "autoform-default-input",
+                value: String(a.modelValue[t] ?? ""),
+                onInput: (e) => n(p)(t, e.target.value),
+                onBlur: () => n(v)(t)
+              }, null, 40, rt)
+            ]),
+            V(m.$slots, "error", {
+              fieldKey: t,
+              error: n(l)[t]
+            })
+          ], 64))
+        ]))), 128))
+      ])) : (i(), d("div", at, [
+        (i(!0), d(b, null, R(j.value, (t) => (i(), d("div", {
+          key: t,
+          class: "autoform-cell",
+          "data-field-key": t
+        }, [
+          a.fields[t] ? (i(), d(b, { key: 0 }, [
+            (i(), L(W(a.fields[t].component), D({
+              modelValue: a.modelValue[t],
+              error: n(l)[t]
+            }, { ref_for: !0 }, a.fields[t].props ?? {}, {
+              "onUpdate:modelValue": (e) => n(p)(t, e),
+              onBlur: () => n(v)(t)
+            }), null, 16, ["modelValue", "error", "onUpdate:modelValue", "onBlur"])),
+            V(m.$slots, "error", {
+              fieldKey: t,
+              error: n(l)[t]
+            })
+          ], 64)) : (i(), d(b, { key: 1 }, [
+            V(m.$slots, `field-${t}`, {
+              fieldKey: t,
+              value: a.modelValue[t],
+              error: n(l)[t],
+              onUpdate: (e) => n(p)(t, e),
+              onBlur: () => n(v)(t)
+            }, () => [
+              M("input", {
+                class: "autoform-default-input",
+                value: String(a.modelValue[t] ?? ""),
+                onInput: (e) => n(p)(t, e.target.value),
+                onBlur: () => n(v)(t)
+              }, null, 40, nt)
+            ]),
+            V(m.$slots, "error", {
+              fieldKey: t,
+              error: n(l)[t]
+            })
+          ], 64))
+        ], 8, st))), 128))
+      ]))
+    ], 8, ot));
+  }
+}), ct = /* @__PURE__ */ z({
+  __name: "AutoFormRow",
+  props: {
+    row: {}
+  },
+  setup(a) {
+    return (k, w) => (i(), d("div", {
+      class: "autoform-row",
+      style: K({ "--autoform-cols": a.row.length })
+    }, [
+      (i(!0), d(b, null, R(a.row, (u) => (i(), d("div", {
+        key: u,
+        class: "autoform-cell"
+      }, [
+        V(k.$slots, "default", { fieldKey: u })
+      ]))), 128))
+    ], 4));
+  }
+});
+export {
+  lt as AutoForm,
+  ct as AutoFormRow,
+  G as DEFAULT_BREAKPOINTS,
+  N as isExplicitLayout,
+  C as isShorthandLayout,
+  tt as useAutoForm
+};
+//# sourceMappingURL=vue-autoform.es.js.map

package/dist/vue-autoform.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-autoform.es.js","sources":["../src/types.ts","../src/composables/useAutoForm.ts","../src/components/AutoForm.vue","../src/components/AutoFormRow.vue"],"sourcesContent":["import type { Component } from 'vue'\nimport type { ZodObject, ZodRawShape } from 'zod'\n\nexport type BreakpointKey = 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport type BreakpointMap = Record<BreakpointKey, number>\n\nexport const DEFAULT_BREAKPOINTS: BreakpointMap = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n}\n\nexport interface FieldConfig {\n  component: Component\n  props?: Record<string, unknown>\n  [key: string]: unknown\n}\n\nexport type LayoutRow = string[]\n\nexport type LayoutGrid = LayoutRow[]\n\nexport type ShorthandLayout = { default: number } & Partial<Record<BreakpointKey, number>>\n\nexport type ExplicitLayout = { default: LayoutGrid } & Partial<Record<BreakpointKey, LayoutGrid>>\n\nexport type AutoFormLayout = ShorthandLayout | ExplicitLayout\n\nexport function isShorthandLayout(layout: AutoFormLayout): layout is ShorthandLayout {\n  return typeof layout.default === 'number'\n}\n\nexport function isExplicitLayout(layout: AutoFormLayout): layout is ExplicitLayout {\n  return Array.isArray(layout.default)\n}\n\nexport interface AutoFormProps {\n  schema: ZodObject<ZodRawShape>\n  layout?: AutoFormLayout\n  fields: Record<string, FieldConfig>\n  modelValue: Record<string, unknown>\n  validateOn?: 'blur' | 'input' | 'submit'\n  breakpoints?: Partial<BreakpointMap>\n}\n\nexport interface FieldRenderInfo {\n  key: string\n  config: FieldConfig | undefined\n  value: unknown\n  error: string | undefined\n}\n","import { reactive, computed } from 'vue'\nimport type { Ref } from 'vue'\nimport type { ZodObject, ZodRawShape } from 'zod'\nimport type { BreakpointMap, AutoFormLayout, LayoutGrid } from '../types'\nimport {\n  DEFAULT_BREAKPOINTS,\n  isShorthandLayout,\n  isExplicitLayout,\n} from '../types'\n\nexport function useAutoForm(\n  schema: ZodObject<ZodRawShape>,\n  modelValue: Ref<Record<string, unknown>>,\n  emit: (event: 'update:modelValue', value: Record<string, unknown>) => void,\n  validateOn: Ref<'blur' | 'input' | 'submit'>,\n  layout: Ref<AutoFormLayout | undefined>,\n  breakpointsOverride: Ref<Partial<BreakpointMap> | undefined>,\n) {\n  const errors = reactive<Record<string, string>>({})\n\n  const breakpoints = computed<BreakpointMap>(() => ({\n    ...DEFAULT_BREAKPOINTS,\n    ...breakpointsOverride.value,\n  }))\n\n  const schemaKeys = computed<string[]>(() => Object.keys(schema.shape))\n\n  const resolvedLayout = computed<LayoutGrid>(() => {\n    const l = layout.value\n    if (!l) {\n      return schemaKeys.value.map((key: string) => [key])\n    }\n    if (isExplicitLayout(l)) {\n      return l.default\n    }\n    if (isShorthandLayout(l)) {\n      const cols = l.default\n      const keys = schemaKeys.value\n      const rows: LayoutGrid = []\n      for (let i = 0; i < keys.length; i += cols) {\n        rows.push(keys.slice(i, i + cols))\n      }\n      return rows\n    }\n    return schemaKeys.value.map((key: string) => [key])\n  })\n\n  function validateField(key: string, value: unknown): string | undefined {\n    const shape = schema.shape\n    if (!shape[key]) return undefined\n    const fieldSchema = shape[key]\n    const result = fieldSchema.safeParse(value)\n    if (!result.success) {\n      return result.error.errors[0]?.message ?? 'Invalid value'\n    }\n    return undefined\n  }\n\n  function validateAll(): boolean {\n    const result = schema.safeParse(modelValue.value)\n    if (!result.success) {\n      result.error.errors.forEach((err) => {\n        const key = String(err.path[0])\n        errors[key] = err.message\n      })\n      return false\n    }\n    Object.keys(errors).forEach((k: string) => delete errors[k])\n    return true\n  }\n\n  function onFieldInput(key: string, value: unknown) {\n    const updated = { ...modelValue.value, [key]: value }\n    emit('update:modelValue', updated)\n    if (validateOn.value === 'input') {\n      const msg = validateField(key, value)\n      if (msg) {\n        errors[key] = msg\n      } else {\n        delete errors[key]\n      }\n    }\n  }\n\n  function onFieldBlur(key: string) {\n    if (validateOn.value === 'blur') {\n      const msg = validateField(key, modelValue.value[key])\n      if (msg) {\n        errors[key] = msg\n      } else {\n        delete errors[key]\n      }\n    }\n  }\n\n  function getBreakpointLayouts(): Array<{ minWidth: number; grid: LayoutGrid; key: string }> {\n    const l = layout.value\n    if (!l) return []\n\n    const bps = breakpoints.value\n    const result: Array<{ minWidth: number; grid: LayoutGrid; key: string }> = []\n\n    if (isExplicitLayout(l)) {\n      const bpKeys = Object.keys(l).filter((k) => k !== 'default') as Array<keyof typeof l>\n      for (const bpKey of bpKeys) {\n        const minWidth = bps[bpKey as keyof BreakpointMap]\n        const grid = l[bpKey as keyof typeof l] as LayoutGrid\n        if (minWidth && grid) {\n          result.push({ minWidth, grid, key: bpKey })\n        }\n      }\n    } else if (isShorthandLayout(l)) {\n      const bpKeys = Object.keys(l).filter((k) => k !== 'default') as Array<keyof typeof l>\n      for (const bpKey of bpKeys) {\n        const minWidth = bps[bpKey as keyof BreakpointMap]\n        const cols = l[bpKey as keyof typeof l] as number\n        if (minWidth && cols) {\n          const keys = schemaKeys.value\n          const rows: LayoutGrid = []\n          for (let i = 0; i < keys.length; i += cols) {\n            rows.push(keys.slice(i, i + cols))\n          }\n          result.push({ minWidth, grid: rows, key: bpKey })\n        }\n      }\n    }\n\n    return result.sort((a, b) => a.minWidth - b.minWidth)\n  }\n\n  return {\n    errors,\n    resolvedLayout,\n    schemaKeys,\n    onFieldInput,\n    onFieldBlur,\n    validateAll,\n    getBreakpointLayouts,\n  }\n}\n","<template>\n  <div class=\"autoform\" :data-autoform-id=\"formId\">\n    <component :is=\"'style'\" v-if=\"mediaQueryCss\">{{\n      mediaQueryCss\n    }}</component>\n\n    <!-- Shorthand layout: single flat grid, CSS handles column count per breakpoint -->\n    <div v-if=\"isShorthand\" class=\"autoform-flat-grid\">\n      <div v-for=\"fieldKey in flatKeys\" :key=\"fieldKey\" class=\"autoform-cell\">\n        <template v-if=\"fields[fieldKey]\">\n          <component\n            :is=\"fields[fieldKey].component\"\n            :modelValue=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            v-bind=\"fields[fieldKey].props ?? {}\"\n            @update:modelValue=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            @blur=\"() => onFieldBlur(fieldKey)\"\n          />\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n        <template v-else>\n          <slot\n            :name=\"`field-${fieldKey}`\"\n            :fieldKey=\"fieldKey\"\n            :value=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            :onUpdate=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            :onBlur=\"() => onFieldBlur(fieldKey)\"\n          >\n            <input\n              class=\"autoform-default-input\"\n              :value=\"String(modelValue[fieldKey] ?? '')\"\n              @input=\"\n                (e: Event) =>\n                  onFieldInput(fieldKey, (e.target as HTMLInputElement).value)\n              \"\n              @blur=\"() => onFieldBlur(fieldKey)\"\n            />\n          </slot>\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n      </div>\n    </div>\n\n    <!-- Explicit layout / no layout: flat grid, CSS positions each field per breakpoint -->\n    <div v-else class=\"autoform-flat-grid\">\n      <div\n        v-for=\"fieldKey in flatKeys\"\n        :key=\"fieldKey\"\n        class=\"autoform-cell\"\n        :data-field-key=\"fieldKey\"\n      >\n        <template v-if=\"fields[fieldKey]\">\n          <component\n            :is=\"fields[fieldKey].component\"\n            :modelValue=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            v-bind=\"fields[fieldKey].props ?? {}\"\n            @update:modelValue=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            @blur=\"() => onFieldBlur(fieldKey)\"\n          />\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n        <template v-else>\n          <slot\n            :name=\"`field-${fieldKey}`\"\n            :fieldKey=\"fieldKey\"\n            :value=\"modelValue[fieldKey]\"\n            :error=\"errors[fieldKey]\"\n            :onUpdate=\"(val: unknown) => onFieldInput(fieldKey, val)\"\n            :onBlur=\"() => onFieldBlur(fieldKey)\"\n          >\n            <input\n              class=\"autoform-default-input\"\n              :value=\"String(modelValue[fieldKey] ?? '')\"\n              @input=\"\n                (e: Event) =>\n                  onFieldInput(fieldKey, (e.target as HTMLInputElement).value)\n              \"\n              @blur=\"() => onFieldBlur(fieldKey)\"\n            />\n          </slot>\n          <slot name=\"error\" :fieldKey=\"fieldKey\" :error=\"errors[fieldKey]\" />\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, toRef } from \"vue\";\nimport type { ZodObject, ZodRawShape } from \"zod\";\nimport { useAutoForm } from \"../composables/useAutoForm\";\nimport type {\n  AutoFormLayout,\n  BreakpointMap,\n  FieldConfig,\n  LayoutGrid,\n} from \"../types\";\nimport {\n  isExplicitLayout,\n  isShorthandLayout,\n  DEFAULT_BREAKPOINTS,\n} from \"../types\";\n\nconst props = withDefaults(\n  defineProps<{\n    schema: ZodObject<ZodRawShape>;\n    layout?: AutoFormLayout;\n    fields: Record<string, FieldConfig>;\n    modelValue: Record<string, unknown>;\n    validateOn?: \"blur\" | \"input\" | \"submit\";\n    breakpoints?: Partial<BreakpointMap>;\n  }>(),\n  {\n    validateOn: \"blur\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: Record<string, unknown>): void;\n}>();\n\nconst formId = ref(`autoform-${Math.random().toString(36).slice(2, 9)}`);\n\nconst { errors, schemaKeys, onFieldInput, onFieldBlur, validateAll } =\n  useAutoForm(\n    props.schema,\n    toRef(props, \"modelValue\"),\n    (_, val) => emit(\"update:modelValue\", val),\n    toRef(props, \"validateOn\"),\n    toRef(props, \"layout\"),\n    toRef(props, \"breakpoints\"),\n  );\n\nconst isShorthand = computed(() =>\n  props.layout ? isShorthandLayout(props.layout) : false,\n);\n\nconst flatKeys = computed(() => schemaKeys.value);\n\nconst mediaQueryCss = computed<string>(() => {\n  if (!props.layout) return \"\";\n\n  const bps: BreakpointMap = { ...DEFAULT_BREAKPOINTS, ...props.breakpoints };\n  const id = formId.value;\n  const lines: string[] = [];\n\n  if (isShorthandLayout(props.layout)) {\n    const layout = props.layout;\n    // Base columns for the flat grid\n    lines.push(\n      `[data-autoform-id=\"${id}\"] .autoform-flat-grid {`,\n      `  grid-template-columns: repeat(${layout.default}, minmax(0, 1fr));`,\n      `}`,\n    );\n    const bpKeys = Object.keys(layout).filter((k) => k !== \"default\") as Array<\n      keyof typeof layout\n    >;\n    for (const bpKey of bpKeys) {\n      const minWidth = bps[bpKey as keyof BreakpointMap];\n      const cols = layout[bpKey as keyof typeof layout] as number;\n      if (minWidth && cols) {\n        lines.push(\n          `@media (min-width: ${minWidth}px) {`,\n          `  [data-autoform-id=\"${id}\"] .autoform-flat-grid {`,\n          `    grid-template-columns: repeat(${cols}, minmax(0, 1fr));`,\n          `  }`,\n          `}`,\n        );\n      }\n    }\n  } else if (isExplicitLayout(props.layout)) {\n    const layout = props.layout;\n    // Helper: build CSS rules for a given grid at a given scope (media query or base)\n    const gridToCss = (grid: LayoutGrid, wrap?: string): string => {\n      const maxCols = Math.max(...grid.map((r: string[]) => r.length));\n      const allKeys = schemaKeys.value;\n      const keysInGrid = new Set(grid.flat());\n      const fieldRules: string[] = [];\n\n      // Set grid column count\n      fieldRules.push(\n        `[data-autoform-id=\"${id}\"] .autoform-flat-grid { grid-template-columns: repeat(${maxCols}, minmax(0, 1fr)); }`,\n      );\n\n      // Hide fields not in this layout\n      allKeys.forEach((key: string) => {\n        if (!keysInGrid.has(key)) {\n          fieldRules.push(\n            `[data-autoform-id=\"${id}\"] [data-field-key=\"${key}\"] { display: none; }`,\n          );\n        }\n      });\n\n      // Position each field\n      let rowStart = 1;\n      grid.forEach((row: string[]) => {\n        let colStart = 1;\n        row.forEach((key: string) => {\n          fieldRules.push(\n            `[data-autoform-id=\"${id}\"] [data-field-key=\"${key}\"] { display: block; grid-row: ${rowStart}; grid-column: ${colStart}; }`,\n          );\n          colStart++;\n        });\n        rowStart++;\n      });\n\n      if (wrap) {\n        return [\n          `@media (min-width: ${wrap}px) {`,\n          ...fieldRules.map((r) => `  ${r}`),\n          `}`,\n        ].join(\"\\n\");\n      }\n      return fieldRules.join(\"\\n\");\n    };\n\n    // Default layout base styles\n    lines.push(gridToCss(layout.default));\n\n    // Per-breakpoint overrides\n    const bpKeys = Object.keys(layout).filter((k) => k !== \"default\") as Array<\n      keyof typeof layout\n    >;\n    const sortedBpKeys = bpKeys.sort(\n      (a, b) =>\n        (bps[a as keyof BreakpointMap] ?? 0) -\n        (bps[b as keyof BreakpointMap] ?? 0),\n    );\n    for (const bpKey of sortedBpKeys) {\n      const minWidth = bps[bpKey as keyof BreakpointMap];\n      const grid = layout[bpKey as keyof typeof layout] as LayoutGrid;\n      if (minWidth && grid) {\n        lines.push(gridToCss(grid, String(minWidth)));\n      }\n    }\n  }\n\n  return lines.join(\"\\n\");\n});\n\ndefineExpose({ validateAll, errors });\n</script>\n\n<style>\n.autoform {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--autoform-row-gap, 1rem);\n}\n\n.autoform-flat-grid {\n  display: grid;\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n  gap: var(--autoform-gap, 1rem);\n  width: 100%;\n}\n\n.autoform-flat-grid .autoform-cell {\n  min-width: 0;\n}\n\n.autoform-default-input {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid #d1d5db;\n  border-radius: 0.375rem;\n  font-size: 1rem;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.autoform-default-input:focus {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);\n}\n</style>\n","<template>\n  <div\n    class=\"autoform-row\"\n    :style=\"{ '--autoform-cols': row.length }\"\n  >\n    <div\n      v-for=\"fieldKey in row\"\n      :key=\"fieldKey\"\n      class=\"autoform-cell\"\n    >\n      <slot :fieldKey=\"fieldKey\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  row: string[]\n}>()\n</script>\n\n<style>\n.autoform-row {\n  display: grid;\n  grid-template-columns: repeat(var(--autoform-cols, 1), minmax(0, 1fr));\n  gap: var(--autoform-gap, 1rem);\n  width: 100%;\n}\n\n.autoform-cell {\n  min-width: 0;\n}\n</style>\n"],"names":["DEFAULT_BREAKPOINTS","isShorthandLayout","layout","isExplicitLayout","useAutoForm","schema","modelValue","emit","validateOn","breakpointsOverride","errors","reactive","breakpoints","computed","schemaKeys","resolvedLayout","l","key","cols","keys","rows","i","validateField","value","shape","result","_a","validateAll","k","err","onFieldInput","updated","msg","onFieldBlur","getBreakpointLayouts","bps","bpKeys","bpKey","minWidth","grid","a","b","props","__props","__emit","formId","ref","toRef","_","val","isShorthand","flatKeys","mediaQueryCss","id","lines","gridToCss","wrap","maxCols","r","allKeys","keysInGrid","fieldRules","rowStart","row","colStart","sortedBpKeys","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_2","_Fragment","_renderList","fieldKey","_mergeProps","_unref","_renderSlot","_ctx","_createElementVNode","_hoisted_4","_normalizeStyle"],"mappings":"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"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@moonmangit/vue-autoform",
+  "version": "0.1.0",
+  "description": "Headless Vue 3 auto-rendering form library with Zod schema validation and responsive grid layout",
+  "type": "module",
+  "main": "./dist/vue-autoform.cjs.js",
+  "module": "./dist/vue-autoform.es.js",
+  "types": "./dist/vue-autoform.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-autoform.es.js",
+      "require": "./dist/vue-autoform.cjs.js",
+      "types": "./dist/vue-autoform.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "zod": "^3.22.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.9.2",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^10.4.1",
+    "eslint-plugin-vue": "^10.9.2",
+    "jiti": "^2.7.0",
+    "typescript": "^5.3.0",
+    "typescript-eslint": "^8.60.1",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vue": "^3.4.0",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^2.0.0",
+    "zod": "^3.22.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "form",
+    "autoform",
+    "zod",
+    "schema",
+    "headless"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "playground": "vite --config playground/vite.config.ts",
+    "type-check": "vue-tsc --noEmit --project tsconfig.lib.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}