@moonmangit/vue-autoform 0.1.6 → 0.1.9

package/dist/style.css

@@ -1 +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}
+.autoform{width:100%}.autoform-flat-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:var(--autoform-gap, 1rem);row-gap:var(--autoform-row-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}

package/dist/vue-autoform.cjs.js

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

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

@@ -1 +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> | (() => 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=\"resolveProps(fieldKey)\"\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=\"resolveProps(fieldKey)\"\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\nfunction resolveProps(fieldKey: string): Record<string, unknown> {\n  const cfg = props.fields[fieldKey];\n  if (!cfg) return {};\n  const p = cfg.props;\n  return typeof p === \"function\" ? p() : (p ?? {});\n}\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","resolveProps","fieldKey","cfg","p","mediaQueryCss","id","lines","gridToCss","wrap","maxCols","r","allKeys","keysInGrid","fieldRules","rowStart","row","colStart","sortedBpKeys","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_2","_Fragment","_renderList","_mergeProps","_unref","_renderSlot","_ctx","_createElementVNode","e","_hoisted_4","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"vue-autoform.cjs.js","sources":["../src/composables/useAutoForm.ts","../src/types.ts","../src/components/AutoForm.vue"],"sourcesContent":["import { reactive, computed } from 'vue'\nimport type { Ref } from 'vue'\nimport type { ZodObject, ZodRawShape } from 'zod'\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) {\n  const errors = reactive<Record<string, string>>({})\n\n  const schemaKeys = computed<string[]>(() => Object.keys(schema.shape))\n\n  function validateField(key: string, value: unknown): string | undefined {\n    const shape = schema.shape\n    if (!(key in shape)) 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  const lastValue: Record<string, unknown> = {}\n\n  function onFieldInput(key: string, value: unknown) {\n    lastValue[key] = value\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      // Use lastValue if available — modelValue prop may not have propagated yet\n      // when blur fires immediately after update:modelValue (e.g. checkbox toggles)\n      const value = key in lastValue ? lastValue[key] : modelValue.value[key]\n      const msg = validateField(key, value)\n      if (msg) {\n        errors[key] = msg\n      } else {\n        delete errors[key]\n      }\n    }\n  }\n\n  return {\n    errors,\n    schemaKeys,\n    onFieldInput,\n    onFieldBlur,\n    validateAll,\n  }\n}\n","import type { Component } from 'vue'\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> | (() => Record<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 FieldRenderInfo {\n  key: string\n  config: FieldConfig | undefined\n  value: unknown\n  error: string | undefined\n}\n","<template>\n  <div class=\"autoform\" :data-autoform-id=\"formId\">\n    <component :is=\"'style'\" v-if=\"mediaQueryCss\">{{\n      mediaQueryCss\n    }}</component>\n\n    <!-- Flat grid: CSS handles column count (shorthand) or per-field position (explicit/none) -->\n    <div class=\"autoform-flat-grid\">\n      <div\n        v-for=\"fieldKey in schemaKeys\"\n        :key=\"fieldKey\"\n        class=\"autoform-cell\"\n        :data-field-key=\"isExplicit ? fieldKey : undefined\"\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=\"resolveProps(fieldKey)\"\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    (event, val) => emit(event, val),\n    toRef(props, \"validateOn\"),\n  );\n\nconst isExplicit = computed(() =>\n  props.layout ? isExplicitLayout(props.layout) : true,\n);\n\nfunction resolveProps(fieldKey: string): Record<string, unknown> {\n  const cfg = props.fields[fieldKey];\n  if (!cfg) return {};\n  const p = cfg.props;\n  return typeof p === \"function\" ? p() : (p ?? {});\n}\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}\n\n.autoform-flat-grid {\n  display: grid;\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n  column-gap: var(--autoform-gap, 1rem);\n  row-gap: var(--autoform-row-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"],"names":["useAutoForm","schema","modelValue","emit","validateOn","errors","reactive","schemaKeys","computed","validateField","key","value","shape","result","_a","validateAll","k","err","lastValue","onFieldInput","updated","msg","onFieldBlur","DEFAULT_BREAKPOINTS","isShorthandLayout","layout","isExplicitLayout","props","__props","__emit","formId","ref","toRef","event","val","isExplicit","resolveProps","fieldKey","cfg","p","mediaQueryCss","bps","id","lines","bpKeys","bpKey","minWidth","cols","gridToCss","grid","wrap","maxCols","r","allKeys","keysInGrid","fieldRules","rowStart","row","colStart","sortedBpKeys","a","b","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_hoisted_2","_Fragment","_renderList","_unref","_mergeProps","_renderSlot","_ctx","e"],"mappings":"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"}

package/dist/vue-autoform.d.ts

@@ -39,16 +39,8 @@ validateOn: string;
 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];
 } & {};
@@ -59,12 +51,6 @@ declare function __VLS_template(): Partial<Record<`field-${string}`, (_: {
     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;
@@ -72,12 +58,6 @@ declare function __VLS_template(): Partial<Record<`field-${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]>>;
@@ -87,15 +67,6 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 
-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];
@@ -108,27 +79,10 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-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>;
@@ -142,14 +96,6 @@ export declare type ExplicitLayout = {
 export declare interface FieldConfig {
     component: Component;
     props?: Record<string, unknown> | (() => 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;
@@ -164,18 +110,12 @@ 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>): {
+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'>): {
     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

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

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

@@ -1 +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> | (() => 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=\"resolveProps(fieldKey)\"\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=\"resolveProps(fieldKey)\"\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\nfunction resolveProps(fieldKey: string): Record<string, unknown> {\n  const cfg = props.fields[fieldKey];\n  if (!cfg) return {};\n  const p = cfg.props;\n  return typeof p === \"function\" ? p() : (p ?? {});\n}\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","resolveProps","fieldKey","cfg","p","mediaQueryCss","id","lines","gridToCss","wrap","maxCols","r","allKeys","keysInGrid","fieldRules","rowStart","row","colStart","sortedBpKeys","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_hoisted_2","_Fragment","_renderList","_mergeProps","_unref","_renderSlot","_ctx","_createElementVNode","e","_hoisted_4","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"vue-autoform.es.js","sources":["../src/composables/useAutoForm.ts","../src/types.ts","../src/components/AutoForm.vue"],"sourcesContent":["import { reactive, computed } from 'vue'\nimport type { Ref } from 'vue'\nimport type { ZodObject, ZodRawShape } from 'zod'\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) {\n  const errors = reactive<Record<string, string>>({})\n\n  const schemaKeys = computed<string[]>(() => Object.keys(schema.shape))\n\n  function validateField(key: string, value: unknown): string | undefined {\n    const shape = schema.shape\n    if (!(key in shape)) 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  const lastValue: Record<string, unknown> = {}\n\n  function onFieldInput(key: string, value: unknown) {\n    lastValue[key] = value\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      // Use lastValue if available — modelValue prop may not have propagated yet\n      // when blur fires immediately after update:modelValue (e.g. checkbox toggles)\n      const value = key in lastValue ? lastValue[key] : modelValue.value[key]\n      const msg = validateField(key, value)\n      if (msg) {\n        errors[key] = msg\n      } else {\n        delete errors[key]\n      }\n    }\n  }\n\n  return {\n    errors,\n    schemaKeys,\n    onFieldInput,\n    onFieldBlur,\n    validateAll,\n  }\n}\n","import type { Component } from 'vue'\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> | (() => Record<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 FieldRenderInfo {\n  key: string\n  config: FieldConfig | undefined\n  value: unknown\n  error: string | undefined\n}\n","<template>\n  <div class=\"autoform\" :data-autoform-id=\"formId\">\n    <component :is=\"'style'\" v-if=\"mediaQueryCss\">{{\n      mediaQueryCss\n    }}</component>\n\n    <!-- Flat grid: CSS handles column count (shorthand) or per-field position (explicit/none) -->\n    <div class=\"autoform-flat-grid\">\n      <div\n        v-for=\"fieldKey in schemaKeys\"\n        :key=\"fieldKey\"\n        class=\"autoform-cell\"\n        :data-field-key=\"isExplicit ? fieldKey : undefined\"\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=\"resolveProps(fieldKey)\"\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    (event, val) => emit(event, val),\n    toRef(props, \"validateOn\"),\n  );\n\nconst isExplicit = computed(() =>\n  props.layout ? isExplicitLayout(props.layout) : true,\n);\n\nfunction resolveProps(fieldKey: string): Record<string, unknown> {\n  const cfg = props.fields[fieldKey];\n  if (!cfg) return {};\n  const p = cfg.props;\n  return typeof p === \"function\" ? p() : (p ?? {});\n}\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}\n\n.autoform-flat-grid {\n  display: grid;\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n  column-gap: var(--autoform-gap, 1rem);\n  row-gap: var(--autoform-row-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"],"names":["useAutoForm","schema","modelValue","emit","validateOn","errors","reactive","schemaKeys","computed","validateField","key","value","shape","result","_a","validateAll","k","err","lastValue","onFieldInput","updated","msg","onFieldBlur","DEFAULT_BREAKPOINTS","isShorthandLayout","layout","isExplicitLayout","props","__props","__emit","formId","ref","toRef","event","val","isExplicit","resolveProps","fieldKey","cfg","p","mediaQueryCss","bps","id","lines","bpKeys","bpKey","minWidth","cols","gridToCss","grid","wrap","maxCols","r","allKeys","keysInGrid","fieldRules","rowStart","row","colStart","sortedBpKeys","a","b","__expose","_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_hoisted_2","_Fragment","_renderList","_unref","_mergeProps","_renderSlot","_ctx","e"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moonmangit/vue-autoform",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "Headless Vue 3 auto-rendering form library with Zod schema validation and responsive grid layout",
   "type": "module",
   "main": "./dist/vue-autoform.cjs.js",