@moonmangit/vue-autoform 0.1.2 → 0.1.6

package/README.md

@@ -149,11 +149,81 @@ defineEmits<{ (e: "update:modelValue", v: string): void; (e: "blur"): void }>();
 
 ```ts
 type FieldConfig = {
-  component: Component; // your Vue component
-  props?: Record<string, unknown>; // extra props passed through
+  component: Component;
+  // plain object OR a getter function (for reactive/async values)
+  props?: Record<string, unknown> | (() => Record<string, unknown>);
 };
 ```
 
+### Async options (props as a getter function)
+
+When your field needs options loaded from a server, pass `props` as a **getter function** instead of a plain object. The function is called at render time so reactive refs inside it stay live — no need to rebuild the `fields` object when data arrives.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { z } from "zod";
+import { AutoForm } from "@moonmangit/vue-autoform";
+import SelectInput from "./components/SelectInput.vue";
+import TextInput from "./components/TextInput.vue";
+
+const loading = ref(false);
+const options = ref<{ value: string; label: string }[]>([]);
+
+// Fetch however you like — the library doesn't care
+async function loadOptions() {
+  loading.value = true;
+  const res = await fetch("/api/frameworks");
+  options.value = await res.json();
+  loading.value = false;
+}
+loadOptions();
+
+const schema = z.object({
+  name: z.string().min(1),
+  framework: z.string().min(1, "Please select a framework"),
+  // array-of-object field — Zod validates each item's shape
+  tags: z.array(z.object({ value: z.string(), label: z.string() })).min(1),
+});
+
+const fields = {
+  name: { component: TextInput, props: { label: "Name" } },
+
+  framework: {
+    component: SelectInput,
+    // getter — reads `loading` and `options` reactively at render time
+    props: () => ({
+      label: "Framework",
+      disabled: loading.value,
+      options: options.value,
+    }),
+  },
+
+  tags: {
+    component: SelectInput,
+    props: () => ({
+      label: "Tags",
+      disabled: loading.value,
+      options: options.value,
+    }),
+  },
+};
+
+const formData = ref({ name: "", framework: "", tags: [] });
+</script>
+
+<template>
+  <AutoForm v-model="formData" :schema="schema" :fields="fields" />
+</template>
+```
+
+**Key points:**
+
+- Your component receives `disabled` and `options` as normal props — the library passes them through unchanged
+- `tags` value is whatever your component emits via `update:modelValue` — pass an array of objects, receive an array of objects
+- Zod validates the array contents exactly as defined in the schema
+- The library has **no opinion on how you fetch** — use `fetch`, Axios, TanStack Query, Pinia, anything
+
 ---
 
 ## Layout

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 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;
+"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;
 //# 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>\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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"}
+{"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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"}

package/dist/vue-autoform.d.ts

@@ -141,7 +141,7 @@ export declare type ExplicitLayout = {
 
 export declare interface FieldConfig {
     component: Component;
-    props?: Record<string, unknown>;
+    props?: Record<string, unknown> | (() => Record<string, unknown>);
     [key: string]: unknown;
 }
 

package/dist/vue-autoform.es.js

@@ -1,4 +1,4 @@
-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";
+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,
@@ -6,99 +6,99 @@ const G = {
   xl: 1280,
   "2xl": 1536
 };
-function C(a) {
-  return typeof a.default == "number";
+function C(n) {
+  return typeof n.default == "number";
 }
-function N(a) {
-  return Array.isArray(a.default);
+function R(n) {
+  return Array.isArray(n.default);
 }
-function tt(a, k, w, u, F, A) {
-  const l = H({}), E = S(() => ({
+function ot(n, $, S, s, w, F) {
+  const l = J({}), A = B(() => ({
     ...G,
-    ...A.value
-  })), p = S(() => Object.keys(a.shape)), v = S(() => {
-    const o = F.value;
+    ...F.value
+  })), f = B(() => Object.keys(n.shape)), g = B(() => {
+    const o = w.value;
     if (!o)
-      return p.value.map((t) => [t]);
-    if (N(o))
+      return f.value.map((e) => [e]);
+    if (R(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;
+      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 p.value.map((t) => [t]);
+    return f.value.map((e) => [e]);
   });
-  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 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";
   }
   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;
+    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;
     }), !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 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];
     }
   }
-  function x(o) {
-    if (u.value === "blur") {
-      const t = I(o, k.value[o]);
-      t ? l[o] = t : delete l[o];
+  function j(o) {
+    if (s.value === "blur") {
+      const e = E(o, $.value[o]);
+      e ? l[o] = e : delete l[o];
     }
   }
-  function m() {
-    const o = F.value;
+  function x() {
+    const o = w.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 });
+    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 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 });
+      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 e.sort((c, r) => c.minWidth - r.minWidth);
+    return t.sort((r, a) => r.minWidth - a.minWidth);
   }
   return {
     errors: l,
-    resolvedLayout: v,
-    schemaKeys: p,
-    onFieldInput: j,
-    onFieldBlur: x,
+    resolvedLayout: g,
+    schemaKeys: f,
+    onFieldInput: I,
+    onFieldBlur: j,
     validateAll: U,
-    getBreakpointLayouts: m
+    getBreakpointLayouts: x
   };
 }
-const ot = ["data-autoform-id"], et = {
+const et = ["data-autoform-id"], rt = {
   key: 1,
   class: "autoform-flat-grid"
-}, rt = ["value", "onInput", "onBlur"], at = {
+}, at = ["value", "onInput", "onBlur"], nt = {
   key: 2,
   class: "autoform-flat-grid"
-}, st = ["data-field-key"], nt = ["value", "onInput", "onBlur"], lt = /* @__PURE__ */ z({
+}, st = ["data-field-key"], ut = ["value", "onInput", "onBlur"], ct = /* @__PURE__ */ z({
   __name: "AutoForm",
   props: {
     schema: {},
@@ -109,190 +109,197 @@ const ot = ["data-autoform-id"], et = {
     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;
+  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;
+      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;
         t.push(
-          `[data-autoform-id="${o}"] .autoform-flat-grid {`,
-          `  grid-template-columns: repeat(${e.default}, minmax(0, 1fr));`,
+          `[data-autoform-id="${e}"] .autoform-flat-grid {`,
+          `  grid-template-columns: repeat(${r.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));`,
+        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));`,
             "  }",
             "}"
           );
         }
-      } 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 = [];
+      } 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="${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; }`
+            `[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; }`
             );
           });
-          let P = 1;
-          return s.forEach((g) => {
+          let N = 1;
+          return i.forEach((k) => {
             let T = 1;
-            g.forEach((q) => {
+            k.forEach((H) => {
               y.push(
-                `[data-autoform-id="${o}"] [data-field-key="${q}"] { display: block; grid-row: ${P}; grid-column: ${T}; }`
+                `[data-autoform-id="${e}"] [data-field-key="${H}"] { display: block; grid-row: ${N}; grid-column: ${T}; }`
               ), T++;
-            }), P++;
+            }), N++;
           }), h ? [
             `@media (min-width: ${h}px) {`,
-            ...y.map((g) => `  ${g}`),
+            ...y.map((k) => `  ${k}`),
             "}"
           ].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)
+        t.push(a(r.default));
+        const p = Object.keys(r).filter((i) => i !== "default").sort(
+          (i, h) => (o[i] ?? 0) - (o[h] ?? 0)
         );
-        for (const s of f) {
-          const h = m[s], $ = e[s];
-          h && $ && t.push(c($, String(h)));
+        for (const i of p) {
+          const h = o[i], v = r[i];
+          h && v && t.push(a(v, String(h)));
         }
       }
       return t.join(`
 `);
     });
-    return k({ validateAll: I, errors: l }), (m, o) => (i(), d("div", {
+    return $({ validateAll: E, errors: l }), (o, e) => (c(), d("div", {
       class: "autoform",
-      "data-autoform-id": A.value
+      "data-autoform-id": F.value
     }, [
-      x.value ? (i(), L(W("style"), { key: 0 }, {
-        default: X(() => [
-          Y(Z(x.value), 1)
+      x.value ? (c(), L(W("style"), { key: 0 }, {
+        default: 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", {
+      })) : 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"
         }, [
-          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)
+          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(m.$slots, "error", {
+            V(o.$slots, "error", {
               fieldKey: t,
-              error: n(l)[t]
+              error: u(l)[t]
             })
-          ], 64)) : (i(), d(b, { key: 1 }, [
-            V(m.$slots, `field-${t}`, {
+          ], 64)) : (c(), d(b, { key: 1 }, [
+            V(o.$slots, `field-${t}`, {
               fieldKey: t,
-              value: a.modelValue[t],
-              error: n(l)[t],
-              onUpdate: (e) => n(p)(t, e),
-              onBlur: () => n(v)(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(a.modelValue[t] ?? ""),
-                onInput: (e) => n(p)(t, e.target.value),
-                onBlur: () => n(v)(t)
-              }, null, 40, rt)
+                value: String(n.modelValue[t] ?? ""),
+                onInput: (r) => u(f)(t, r.target.value),
+                onBlur: () => u(g)(t)
+              }, null, 40, at)
             ]),
-            V(m.$slots, "error", {
+            V(o.$slots, "error", {
               fieldKey: t,
-              error: n(l)[t]
+              error: u(l)[t]
             })
           ], 64))
         ]))), 128))
-      ])) : (i(), d("div", at, [
-        (i(!0), d(b, null, R(j.value, (t) => (i(), d("div", {
+      ])) : (c(), d("div", nt, [
+        (c(!0), d(b, null, P(I.value, (t) => (c(), 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)
+          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(m.$slots, "error", {
+            V(o.$slots, "error", {
               fieldKey: t,
-              error: n(l)[t]
+              error: u(l)[t]
             })
-          ], 64)) : (i(), d(b, { key: 1 }, [
-            V(m.$slots, `field-${t}`, {
+          ], 64)) : (c(), d(b, { key: 1 }, [
+            V(o.$slots, `field-${t}`, {
               fieldKey: t,
-              value: a.modelValue[t],
-              error: n(l)[t],
-              onUpdate: (e) => n(p)(t, e),
-              onBlur: () => n(v)(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(a.modelValue[t] ?? ""),
-                onInput: (e) => n(p)(t, e.target.value),
-                onBlur: () => n(v)(t)
-              }, null, 40, nt)
+                value: String(n.modelValue[t] ?? ""),
+                onInput: (r) => u(f)(t, r.target.value),
+                onBlur: () => u(g)(t)
+              }, null, 40, ut)
             ]),
-            V(m.$slots, "error", {
+            V(o.$slots, "error", {
               fieldKey: t,
-              error: n(l)[t]
+              error: u(l)[t]
             })
           ], 64))
         ], 8, st))), 128))
       ]))
-    ], 8, ot));
+    ], 8, et));
   }
-}), ct = /* @__PURE__ */ z({
+}), it = /* @__PURE__ */ z({
   __name: "AutoFormRow",
   props: {
     row: {}
   },
-  setup(a) {
-    return (k, w) => (i(), d("div", {
+  setup(n) {
+    return ($, S) => (c(), d("div", {
       class: "autoform-row",
-      style: K({ "--autoform-cols": a.row.length })
+      style: tt({ "--autoform-cols": n.row.length })
     }, [
-      (i(!0), d(b, null, R(a.row, (u) => (i(), d("div", {
-        key: u,
+      (c(!0), d(b, null, P(n.row, (s) => (c(), d("div", {
+        key: s,
         class: "autoform-cell"
       }, [
-        V(k.$slots, "default", { fieldKey: u })
+        V($.$slots, "default", { fieldKey: s })
       ]))), 128))
     ], 4));
   }
 });
 export {
-  lt as AutoForm,
-  ct as AutoFormRow,
+  ct as AutoForm,
+  it as AutoFormRow,
   G as DEFAULT_BREAKPOINTS,
-  N as isExplicitLayout,
+  R as isExplicitLayout,
   C as isShorthandLayout,
-  tt as useAutoForm
+  ot 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>\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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"}
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moonmangit/vue-autoform",
-  "version": "0.1.2",
+  "version": "0.1.6",
   "description": "Headless Vue 3 auto-rendering form library with Zod schema validation and responsive grid layout",
   "type": "module",
   "main": "./dist/vue-autoform.cjs.js",
@@ -25,6 +25,7 @@
     "@eslint/js": "^10.0.1",
     "@types/node": "^25.9.2",
     "@vitejs/plugin-vue": "^5.0.0",
+    "changelogen": "^0.6.2",
     "eslint": "^10.4.1",
     "eslint-plugin-vue": "^10.9.2",
     "jiti": "^2.7.0",