@macrulez/vue-form-schema 0.1.0 → 0.1.5

package/dist/valibot.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(t){if(!t||t.type!=="object"||!t.entries)throw new Error("[vue-form-schema] parseValibot expects a v.object() schema");return Object.entries(t.entries).map(([r,i])=>o(r,i))}function o(t,r){let i=!0,e=r;(e.type==="optional"||e.type==="nullable"||e.type==="nullish")&&(i=!1,e=e.wrapped??e);const a=u(e),s={type:a,name:t,required:i};return a==="select"&&(s.options=e.options.map(n=>({label:String(n),value:n}))),a==="group"&&e.entries&&(s.fields=Object.entries(e.entries).map(([n,l])=>o(n,l))),s}function u(t){const r=t.type;if(r==="string"&&Array.isArray(t.pipe)&&t.pipe.some(e=>e.type==="email"))return"email";switch(r){case"string":return"text";case"number":return"number";case"boolean":return"checkbox";case"picklist":case"enum":return"select";case"array":return"array";case"object":return"group";default:return"text"}}exports.parseValibot=p;

package/dist/valibot.d.ts

@@ -0,0 +1,84 @@
+import { Component } from 'vue';
+
+declare type AsyncValidatorFn = (value: unknown, values: Record<string, unknown>) => Promise<string | null>;
+
+declare interface FieldDefinition {
+    type: FieldType;
+    /** Dot-path for nested fields, e.g. "address.city" */
+    name: string;
+    label?: string;
+    placeholder?: string;
+    defaultValue?: unknown;
+    required?: boolean;
+    /** Static or dynamic disabled state */
+    disabled?: boolean | ((values: Record<string, unknown>) => boolean);
+    /** Static or dynamic visibility; string is evaluated as expression */
+    visible?: boolean | string | ((values: Record<string, unknown>) => boolean);
+    validators?: ValidatorFn[];
+    asyncValidators?: AsyncValidatorFn[];
+    mask?: string | MaskConfig;
+    /** For select / radio — static list, sync function, or async function */
+    options?: FieldOption[] | ((values: Record<string, unknown>) => FieldOption[] | Promise<FieldOption[]>);
+    /**
+     * Field names whose values trigger re-fetching of async options.
+     * Only relevant when `options` is an async function.
+     */
+    optionsDeps?: string[];
+    /** Internal: set by useForm when async options are loading. Read-only for consumers. */
+    optionsLoading?: boolean;
+    /** For group and array */
+    fields?: FieldDefinition[];
+    /**
+     * Applied on every setField call before the value is stored.
+     * Use for trimming, type coercion, formatting, etc.
+     */
+    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
+    /**
+     * Applied at submit time to produce the final payload value.
+     * Runs after all validation passes.
+     */
+    parse?: (raw: unknown) => unknown;
+    /**
+     * Custom Vue component to render this field.
+     * Receives FormFieldProps and must emit 'update:modelValue' and 'blur'.
+     */
+    component?: Component | string;
+}
+
+declare interface FieldOption {
+    label: string;
+    value: unknown;
+}
+
+declare type FieldType = 'text' | 'number' | 'email' | 'select' | 'checkbox' | 'radio' | 'textarea' | 'date' | 'array' | 'group';
+
+declare interface MaskConfig {
+    preset?: MaskPreset;
+    /** Custom mask pattern: '#' = digit, 'A' = letter, other chars are literals */
+    pattern?: string;
+}
+
+declare type MaskPreset = 'phone-ru' | 'phone-eu' | 'date' | 'inn' | 'iban';
+
+/**
+ * Convert a Valibot `v.object(...)` schema into a `FieldDefinition[]`.
+ *
+ * Supported field types: string → text, number, boolean → checkbox,
+ * picklist/enum → select, array, object → group.
+ * `v.optional()` / `v.nullable()` wrappers set `required: false`.
+ * `v.pipe(v.string(), v.email())` sets `type: 'email'`.
+ *
+ * @example
+ * import * as v from 'valibot'
+ * import { parseValibot } from '@macrulez/vue-form-schema/valibot'
+ *
+ * const schema = v.object({ email: v.pipe(v.string(), v.email()), age: v.number() })
+ * const fields = parseValibot(schema)
+ */
+export declare function parseValibot(schema: ValibotSchema): FieldDefinition[];
+
+declare type ValibotSchema = any;
+
+declare type ValidatorFn = (value: unknown, values: Record<string, unknown>) => string | null;
+
+export { }

package/dist/valibot.js

@@ -0,0 +1,43 @@
+function u(t) {
+  if (!t || t.type !== "object" || !t.entries)
+    throw new Error("[vue-form-schema] parseValibot expects a v.object() schema");
+  return Object.entries(t.entries).map(
+    ([r, n]) => o(r, n)
+  );
+}
+function o(t, r) {
+  let n = !0, e = r;
+  (e.type === "optional" || e.type === "nullable" || e.type === "nullish") && (n = !1, e = e.wrapped ?? e);
+  const a = l(e), s = { type: a, name: t, required: n };
+  return a === "select" && (s.options = e.options.map((i) => ({
+    label: String(i),
+    value: i
+  }))), a === "group" && e.entries && (s.fields = Object.entries(e.entries).map(
+    ([i, p]) => o(i, p)
+  )), s;
+}
+function l(t) {
+  const r = t.type;
+  if (r === "string" && Array.isArray(t.pipe) && t.pipe.some((e) => e.type === "email"))
+    return "email";
+  switch (r) {
+    case "string":
+      return "text";
+    case "number":
+      return "number";
+    case "boolean":
+      return "checkbox";
+    case "picklist":
+    case "enum":
+      return "select";
+    case "array":
+      return "array";
+    case "object":
+      return "group";
+    default:
+      return "text";
+  }
+}
+export {
+  u as parseValibot
+};

package/dist/yup.d.ts

@@ -1,3 +1,5 @@
+import { Component } from 'vue';
+
 declare type AsyncValidatorFn = (value: unknown, values: Record<string, unknown>) => Promise<string | null>;
 
 declare interface FieldDefinition {
@@ -15,10 +17,32 @@ declare interface FieldDefinition {
     validators?: ValidatorFn[];
     asyncValidators?: AsyncValidatorFn[];
     mask?: string | MaskConfig;
-    /** For select / radio */
-    options?: FieldOption[];
+    /** For select / radio — static list, sync function, or async function */
+    options?: FieldOption[] | ((values: Record<string, unknown>) => FieldOption[] | Promise<FieldOption[]>);
+    /**
+     * Field names whose values trigger re-fetching of async options.
+     * Only relevant when `options` is an async function.
+     */
+    optionsDeps?: string[];
+    /** Internal: set by useForm when async options are loading. Read-only for consumers. */
+    optionsLoading?: boolean;
     /** For group and array */
     fields?: FieldDefinition[];
+    /**
+     * Applied on every setField call before the value is stored.
+     * Use for trimming, type coercion, formatting, etc.
+     */
+    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
+    /**
+     * Applied at submit time to produce the final payload value.
+     * Runs after all validation passes.
+     */
+    parse?: (raw: unknown) => unknown;
+    /**
+     * Custom Vue component to render this field.
+     * Receives FormFieldProps and must emit 'update:modelValue' and 'blur'.
+     */
+    component?: Component | string;
 }
 
 declare interface FieldOption {

package/dist/zod.d.ts

@@ -1,3 +1,5 @@
+import { Component } from 'vue';
+
 declare type AsyncValidatorFn = (value: unknown, values: Record<string, unknown>) => Promise<string | null>;
 
 declare interface FieldDefinition {
@@ -15,10 +17,32 @@ declare interface FieldDefinition {
     validators?: ValidatorFn[];
     asyncValidators?: AsyncValidatorFn[];
     mask?: string | MaskConfig;
-    /** For select / radio */
-    options?: FieldOption[];
+    /** For select / radio — static list, sync function, or async function */
+    options?: FieldOption[] | ((values: Record<string, unknown>) => FieldOption[] | Promise<FieldOption[]>);
+    /**
+     * Field names whose values trigger re-fetching of async options.
+     * Only relevant when `options` is an async function.
+     */
+    optionsDeps?: string[];
+    /** Internal: set by useForm when async options are loading. Read-only for consumers. */
+    optionsLoading?: boolean;
     /** For group and array */
     fields?: FieldDefinition[];
+    /**
+     * Applied on every setField call before the value is stored.
+     * Use for trimming, type coercion, formatting, etc.
+     */
+    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
+    /**
+     * Applied at submit time to produce the final payload value.
+     * Runs after all validation passes.
+     */
+    parse?: (raw: unknown) => unknown;
+    /**
+     * Custom Vue component to render this field.
+     * Receives FormFieldProps and must emit 'update:modelValue' and 'blur'.
+     */
+    component?: Component | string;
 }
 
 declare interface FieldOption {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@macrulez/vue-form-schema",
-  "version": "0.1.0",
-  "description": "Reactive forms from JSON/Zod/Yup schema with validation, masking and conditional UI for Vue 3",
+  "version": "0.1.5",
+  "description": "Reactive forms from JSON/Zod/Yup/Valibot schema with validation, masking and conditional UI for Vue 3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -22,10 +22,20 @@
       "require": "./dist/yup.cjs",
       "types": "./dist/yup.d.ts"
     },
+    "./valibot": {
+      "import": "./dist/valibot.js",
+      "require": "./dist/valibot.cjs",
+      "types": "./dist/valibot.d.ts"
+    },
     "./ui": {
       "import": "./dist/ui.js",
       "require": "./dist/ui.cjs",
       "types": "./dist/ui.d.ts"
+    },
+    "./ui/tailwind": {
+      "import": "./dist/ui-tailwind.js",
+      "require": "./dist/ui-tailwind.cjs",
+      "types": "./dist/ui-tailwind.d.ts"
     }
   },
   "files": [
@@ -38,10 +48,28 @@
     "dev": "vite",
     "build": "vite build && tsc -p tsconfig.build.json",
     "demo": "vite --config vite.demo.config.ts",
-    "test": "vitest",
-    "test:coverage": "vitest --coverage",
+    "test": "vitest --config vitest.config.ts",
+    "test:coverage": "vitest --config vitest.config.ts --coverage",
     "typecheck": "tsc --noEmit"
   },
+  "keywords": [
+    "vue",
+    "vue3",
+    "form",
+    "schema",
+    "validation",
+    "zod",
+    "yup",
+    "composable",
+    "mask",
+    "reactive"
+  ],
+  "author": "macrulez",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/macrulezru/vue-form-schema"
+  },
+  "homepage": "https://macrulez.ru/en",
   "peerDependencies": {
     "vue": "^3.3.0"
   },
@@ -51,14 +79,21 @@
     },
     "yup": {
       "optional": true
+    },
+    "valibot": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitest/coverage-v8": "^1.0.0",
     "@vue/test-utils": "^2.4.0",
+    "autoprefixer": "^10.5.0",
     "happy-dom": "^20.9.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.3.0",
+    "valibot": "^1.4.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.7.0",
     "vitest": "^1.0.0",

package/dist/MaskEngine-D22m29OM.js

@@ -1,157 +0,0 @@
-const y = (t) => t == null || t === "" || Array.isArray(t) && t.length === 0 ? "This field is required" : null, M = (t, e) => (r) => typeof r != "string" && !Array.isArray(r) || r.length >= t ? null : e ?? `Minimum length is ${t}`, T = (t, e) => (r) => typeof r != "string" && !Array.isArray(r) || r.length <= t ? null : e ?? `Maximum length is ${t}`, v = (t, e) => (r) => {
-  const s = Number(r);
-  return isNaN(s) || s >= t ? null : e ?? `Minimum value is ${t}`;
-}, x = (t, e) => (r) => {
-  const s = Number(r);
-  return isNaN(s) || s <= t ? null : e ?? `Maximum value is ${t}`;
-}, I = (t, e) => (r) => typeof r != "string" || t.test(r) ? null : e ?? "Invalid format", b = (t) => t ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(t)) ? null : "Invalid email address" : null, E = (t) => {
-  if (!t) return null;
-  try {
-    return new URL(String(t)), null;
-  } catch {
-    return "Invalid URL";
-  }
-};
-class w {
-  constructor(e = 300) {
-    this.asyncTimers = /* @__PURE__ */ new Map(), this.debounceMs = e;
-  }
-  /** Run sync validators for a single field; returns list of error messages */
-  validateField(e, r, s) {
-    const i = [];
-    if (e.required) {
-      const n = y(r);
-      n && i.push(n);
-    }
-    for (const n of e.validators ?? []) {
-      const o = n(r, s);
-      o && i.push(o);
-    }
-    return i;
-  }
-  /** Run all sync validators across all visible fields */
-  validateAll(e, r) {
-    const s = {};
-    return this.collectErrors(e, r, s), s;
-  }
-  collectErrors(e, r, s) {
-    for (const i of e) {
-      const n = p(r, i.name), o = this.validateField(i, n, r);
-      o.length && (s[i.name] = o), (i.type === "group" || i.type === "array") && i.fields && this.collectErrors(i.fields, r, s);
-    }
-  }
-  /** Run async validators with debounce; calls onResult when done */
-  validateAsync(e, r, s, i) {
-    var l;
-    if (!((l = e.asyncValidators) != null && l.length)) return;
-    const n = this.asyncTimers.get(e.name);
-    n && clearTimeout(n);
-    const o = setTimeout(async () => {
-      const c = (await Promise.all(
-        e.asyncValidators.map((u) => u(r, s))
-      )).filter((u) => u !== null);
-      i(e.name, c), this.asyncTimers.delete(e.name);
-    }, this.debounceMs);
-    this.asyncTimers.set(e.name, o);
-  }
-  destroy() {
-    for (const e of this.asyncTimers.values()) clearTimeout(e);
-    this.asyncTimers.clear();
-  }
-}
-function p(t, e) {
-  return e.split(".").reduce((r, s) => {
-    if (r && typeof r == "object") return r[s];
-  }, t);
-}
-function P(t, e, r) {
-  const s = e.split("."), i = { ...t };
-  let n = i;
-  for (let o = 0; o < s.length - 1; o++) {
-    const l = s[o];
-    n[l] = n[l] && typeof n[l] == "object" ? { ...n[l] } : {}, n = n[l];
-  }
-  return n[s[s.length - 1]] = r, i;
-}
-const A = {
-  "phone-ru": "+7 (###) ###-##-##",
-  "phone-eu": "+## (##) ###-##-##",
-  date: "##.##.####",
-  inn: "############",
-  iban: "AA## #### #### #### #### #### ####"
-};
-function m(t) {
-  return t.preset ? A[t.preset] : t.pattern ?? "";
-}
-function f(t) {
-  return t === "#" || t === "A";
-}
-function h(t, e) {
-  return e === "#" ? /\d/.test(t) : e === "A" ? /[a-zA-Z]/.test(t) : !1;
-}
-function d(t, e) {
-  const s = m(typeof e == "string" ? { pattern: e } : e);
-  if (!s) return t;
-  const i = Array.from(t);
-  let n = 0, o = -1;
-  for (let a = 0; a < s.length && n < i.length; a++) {
-    const c = s[a];
-    if (f(c)) {
-      for (; n < i.length && !h(i[n], c); ) n++;
-      n < i.length && (o = a, n++);
-    }
-  }
-  if (o === -1) return "";
-  let l = "";
-  n = 0;
-  for (let a = 0; a <= o; a++) {
-    const c = s[a];
-    if (f(c)) {
-      for (; n < i.length && !h(i[n], c); ) n++;
-      n < i.length && (l += c === "A" ? i[n++].toUpperCase() : i[n++]);
-    } else
-      l += c;
-  }
-  return l;
-}
-function g(t, e) {
-  const s = m(typeof e == "string" ? { pattern: e } : e);
-  if (!s) return t;
-  const i = [];
-  let n = 0;
-  for (let o = 0; o < s.length && n < t.length; o++) {
-    const l = s[o], a = t[n];
-    f(l) ? (i.push(a), n++) : a === l && n++;
-  }
-  return i.join("");
-}
-function S(t, e) {
-  function r() {
-    const i = g(t.value, e), n = d(i, e);
-    if (t.value !== n) {
-      const o = t.selectionStart ?? n.length;
-      t.value = n;
-      const l = Math.min(o, n.length);
-      t.setSelectionRange(l, l);
-    }
-  }
-  t.addEventListener("input", r);
-  const s = d(g(t.value, e), e);
-  return t.value !== s && s && (t.value = s), () => t.removeEventListener("input", r);
-}
-export {
-  w as V,
-  d as a,
-  S as b,
-  T as c,
-  v as d,
-  b as e,
-  M as f,
-  p as g,
-  y as h,
-  x as m,
-  I as p,
-  g as r,
-  P as s,
-  E as u
-};

package/dist/MaskEngine-hd5xHed7.cjs

@@ -1 +0,0 @@
-"use strict";const m=t=>t==null||t===""||Array.isArray(t)&&t.length===0?"This field is required":null,A=(t,e)=>r=>typeof r!="string"&&!Array.isArray(r)||r.length>=t?null:e??`Minimum length is ${t}`,M=(t,e)=>r=>typeof r!="string"&&!Array.isArray(r)||r.length<=t?null:e??`Maximum length is ${t}`,v=(t,e)=>r=>{const s=Number(r);return isNaN(s)||s>=t?null:e??`Minimum value is ${t}`},T=(t,e)=>r=>{const s=Number(r);return isNaN(s)||s<=t?null:e??`Maximum value is ${t}`},x=(t,e)=>r=>typeof r!="string"||t.test(r)?null:e??"Invalid format",E=t=>t?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(t))?null:"Invalid email address":null,I=t=>{if(!t)return null;try{return new URL(String(t)),null}catch{return"Invalid URL"}};class b{constructor(e=300){this.asyncTimers=new Map,this.debounceMs=e}validateField(e,r,s){const i=[];if(e.required){const n=m(r);n&&i.push(n)}for(const n of e.validators??[]){const o=n(r,s);o&&i.push(o)}return i}validateAll(e,r){const s={};return this.collectErrors(e,r,s),s}collectErrors(e,r,s){for(const i of e){const n=y(r,i.name),o=this.validateField(i,n,r);o.length&&(s[i.name]=o),(i.type==="group"||i.type==="array")&&i.fields&&this.collectErrors(i.fields,r,s)}}validateAsync(e,r,s,i){var l;if(!((l=e.asyncValidators)!=null&&l.length))return;const n=this.asyncTimers.get(e.name);n&&clearTimeout(n);const o=setTimeout(async()=>{const c=(await Promise.all(e.asyncValidators.map(u=>u(r,s)))).filter(u=>u!==null);i(e.name,c),this.asyncTimers.delete(e.name)},this.debounceMs);this.asyncTimers.set(e.name,o)}destroy(){for(const e of this.asyncTimers.values())clearTimeout(e);this.asyncTimers.clear()}}function y(t,e){return e.split(".").reduce((r,s)=>{if(r&&typeof r=="object")return r[s]},t)}function P(t,e,r){const s=e.split("."),i={...t};let n=i;for(let o=0;o<s.length-1;o++){const l=s[o];n[l]=n[l]&&typeof n[l]=="object"?{...n[l]}:{},n=n[l]}return n[s[s.length-1]]=r,i}const w={"phone-ru":"+7 (###) ###-##-##","phone-eu":"+## (##) ###-##-##",date:"##.##.####",inn:"############",iban:"AA## #### #### #### #### #### ####"};function p(t){return t.preset?w[t.preset]:t.pattern??""}function f(t){return t==="#"||t==="A"}function g(t,e){return e==="#"?/\d/.test(t):e==="A"?/[a-zA-Z]/.test(t):!1}function h(t,e){const s=p(typeof e=="string"?{pattern:e}:e);if(!s)return t;const i=Array.from(t);let n=0,o=-1;for(let a=0;a<s.length&&n<i.length;a++){const c=s[a];if(f(c)){for(;n<i.length&&!g(i[n],c);)n++;n<i.length&&(o=a,n++)}}if(o===-1)return"";let l="";n=0;for(let a=0;a<=o;a++){const c=s[a];if(f(c)){for(;n<i.length&&!g(i[n],c);)n++;n<i.length&&(l+=c==="A"?i[n++].toUpperCase():i[n++])}else l+=c}return l}function d(t,e){const s=p(typeof e=="string"?{pattern:e}:e);if(!s)return t;const i=[];let n=0;for(let o=0;o<s.length&&n<t.length;o++){const l=s[o],a=t[n];f(l)?(i.push(a),n++):a===l&&n++}return i.join("")}function L(t,e){function r(){const i=d(t.value,e),n=h(i,e);if(t.value!==n){const o=t.selectionStart??n.length;t.value=n;const l=Math.min(o,n.length);t.setSelectionRange(l,l)}}t.addEventListener("input",r);const s=h(d(t.value,e),e);return t.value!==s&&s&&(t.value=s),()=>t.removeEventListener("input",r)}exports.ValidationEngine=b;exports.applyMask=h;exports.bindMask=L;exports.email=E;exports.getByPath=y;exports.max=T;exports.maxLength=M;exports.min=v;exports.minLength=A;exports.pattern=x;exports.removeMask=d;exports.required=m;exports.setByPath=P;exports.url=I;