ctrovalidate-vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ctrotech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# ctrovalidate-vue
+
+**Reactive form validation for Vue 3.**
+
+`ctrovalidate-vue` provides a `useCtrovalidate` composable that wraps [`ctrovalidate-core`](https://www.npmjs.com/package/ctrovalidate-core)'s validation engine with Vue 3's reactivity system. Supports `v-model`, watcher-based real-time validation, and automatic abort handling.
+
+[![npm version](https://img.shields.io/npm/v/ctrovalidate-vue.svg)](https://www.npmjs.com/package/ctrovalidate-vue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Installation
+
+```bash
+npm install ctrovalidate-vue ctrovalidate-core
+```
+
+**Requirements:** Vue ^3.0.0
+
+---
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { useCtrovalidate } from 'ctrovalidate-vue';
+
+interface LoginForm { email: string; password: string; }
+
+const { values, errors, handleBlur, validateForm, isValidating } =
+  useCtrovalidate<LoginForm>({
+    initialValues: { email: '', password: '' },
+    schema: { email: 'required|email', password: 'required|minLength:8' },
+  });
+</script>
+
+<template>
+  <form @submit.prevent="validateForm()">
+    <input v-model="values.email" @blur="handleBlur('email')" />
+    <span v-if="errors.email">{{ errors.email }}</span>
+
+    <input type="password" v-model="values.password" @blur="handleBlur('password')" />
+    <span v-if="errors.password">{{ errors.password }}</span>
+
+    <button :disabled="Object.values(isValidating).some(Boolean)">Login</button>
+  </form>
+</template>
+```
+
+---
+
+## API
+
+```typescript
+const {
+  values,         // Reactive<T> — form state, v-model ready
+  errors,         // Reactive — pre-initialized, string | undefined per field
+  isDirty,        // Reactive — tracks touched fields
+  isValidating,   // Reactive — tracks async validation
+  isValid,        // boolean — overall form validity (Ref.unwrap)
+  handleChange,   // (name, value) => void
+  handleBlur,     // (name) => void
+  validateField,  // (name) => Promise<boolean>
+  validateForm,   // () => Promise<boolean>
+  reset,          // (newValues?) => void
+} = useCtrovalidate<T>({
+  schema,              // Required: field-to-rules mapping
+  initialValues,       // Optional: form defaults (default: {})
+  validateOnBlur,      // Optional: validate on blur (default: true)
+  validateOnChange,    // Optional: watch values, validate dirty fields (default: true)
+  customRules,         // Optional: custom sync/async rule functions
+  aliases,             // Optional: rule combination aliases
+  messages,            // Optional: custom error messages
+  locale,              // Optional: locale override for translator
+});
+```
+
+---
+
+## Validation Behavior
+
+| Trigger | Condition | Action |
+|---------|-----------|--------|
+| `handleChange(name, value)` | `validateOnChange` | Updates value, marks dirty, validates |
+| `handleBlur(name)` | `validateOnBlur` | Marks dirty, validates |
+| `v-model` change | `validateOnChange` + `watch()` | Validates dirty fields |
+
+When `validateOnChange` is enabled, a `watch()` with `{ deep: true }` on `values` re-validates any dirty field whose value changed.
+
+---
+
+## Abort Handling
+
+Each field has its own `AbortController`. Re-validating a field aborts any in-flight async rule. All controllers are aborted on `onUnmounted`.
+
+---
+
+## Related Packages
+
+- **[ctrovalidate-core](https://www.npmjs.com/package/ctrovalidate-core)** — Validation engine
+- **[ctrovalidate-browser](https://www.npmjs.com/package/ctrovalidate-browser)** — Vanilla JS DOM integration
+- **[ctrovalidate-react](https://www.npmjs.com/package/ctrovalidate-react)** — React hook
+- **[ctrovalidate-svelte](https://www.npmjs.com/package/ctrovalidate-svelte)** — Svelte stores
+- **[ctrovalidate-next](https://www.npmjs.com/package/ctrovalidate-next)** — Next.js server actions
+
+---
+
+## License
+
+MIT © [Ctrotech](https://github.com/ctrotech-tutor)
+
+Full documentation: https://ctrovalidate.vercel.app

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),y=require("ctrovalidate-core");function p({schema:e,initialValues:b={},validateOnBlur:w=!0,validateOnChange:g=!0,customRules:j={},aliases:k={},messages:C={},locale:O}){const s=i.reactive({...b}),a=i.reactive(Object.keys(e).reduce((r,t)=>(r[t]=void 0,r),{})),n=i.reactive(Object.keys(e).reduce((r,t)=>(r[t]=!1,r),{})),f=i.reactive(Object.keys(e).reduce((r,t)=>(r[t]=!1,r),{})),v=i.ref(!0),l={};i.onUnmounted(()=>{Object.values(l).forEach(r=>r.abort())});const d=async r=>{var u;const t=e[r];if(!t)return!0;l[r]&&l[r].abort(),l[r]=new AbortController,f[r]=!0;try{const c=(u=(await y.validateAsync({[r]:s[r]},{[r]:t},{customRules:j,aliases:k,messages:C,locale:O,signal:l[r].signal}))[r])==null?void 0:u.error;return a[r]=c||void 0,!c}catch(o){return o instanceof Error&&o.name==="AbortError"||y.Logger.error(`Validation failed for ${String(r)}:`,o),!1}finally{f[r]=!1}};async function A(){var u;const r=await y.validateAsync(s,e,{customRules:j,aliases:k,messages:C,locale:O});let t=!0;for(const o in e){const c=(u=r[o])==null?void 0:u.error;a[o]=c||void 0,c&&(t=!1)}return v.value=t,t}const S=r=>{Object.assign(s,{...b,...r});for(const t in e)a[t]=void 0,n[t]=!1,f[t]=!1;v.value=!0},V=(r,t)=>{s[r]=t,n[r]=!0,g&&d(r)},E=r=>{n[r]=!0,w&&d(r)};return g&&i.watch(s,r=>{for(const t in r)n[t]&&d(t)},{deep:!0}),{values:s,errors:a,isDirty:n,isValidating:f,isValid:v.value,validateField:d,validateForm:A,reset:S,handleChange:V,handleBlur:E}}exports.useCtrovalidate=p;

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { AsyncRuleLogic } from 'ctrovalidate-core';
+import { RuleLogic } from 'ctrovalidate-core';
+import { SchemaRule } from 'ctrovalidate-core';
+import { ValidationSchema } from 'ctrovalidate-core';
+
+/**
+ * useCtrovalidate composable for Vue 3.
+ * Provides reactive validation logic for form state.
+ */
+export declare function useCtrovalidate<T extends object>({ schema, initialValues, validateOnBlur, validateOnChange, customRules, aliases, messages, locale, }: UseCtrovalidateOptions<T>): UseCtrovalidateReturn<T>;
+
+export declare interface UseCtrovalidateOptions<T extends object> {
+    schema: ValidationSchema;
+    initialValues?: T;
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+    customRules?: Record<string, RuleLogic | AsyncRuleLogic>;
+    aliases?: Record<string, SchemaRule>;
+    messages?: Record<string, string>;
+    locale?: string;
+}
+
+export declare interface UseCtrovalidateReturn<T extends object> {
+    values: T;
+    errors: Record<keyof T, string | undefined>;
+    isDirty: Record<keyof T, boolean>;
+    isValidating: Record<keyof T, boolean>;
+    isValid: boolean;
+    validateField: (name: keyof T) => Promise<boolean>;
+    validateForm: () => Promise<boolean>;
+    reset: (newValues?: Partial<T>) => void;
+    handleChange: (name: keyof T, value: T[keyof T]) => void;
+    handleBlur: (name: keyof T) => void;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,103 @@
+import { reactive as a, ref as F, onUnmounted as S, watch as x } from "vue";
+import { validateAsync as w, Logger as B } from "ctrovalidate-core";
+function L({
+  schema: e,
+  initialValues: y = {},
+  validateOnBlur: O = !0,
+  validateOnChange: b = !0,
+  customRules: g = {},
+  aliases: k = {},
+  messages: j = {},
+  locale: p
+}) {
+  const i = a({ ...y }), f = a(
+    Object.keys(e).reduce(
+      (r, t) => (r[t] = void 0, r),
+      {}
+    )
+  ), s = a(
+    Object.keys(e).reduce(
+      (r, t) => (r[t] = !1, r),
+      {}
+    )
+  ), c = a(
+    Object.keys(e).reduce(
+      (r, t) => (r[t] = !1, r),
+      {}
+    )
+  ), v = F(!0), n = {};
+  S(() => {
+    Object.values(n).forEach((r) => r.abort());
+  });
+  const d = async (r) => {
+    var l;
+    const t = e[r];
+    if (!t) return !0;
+    n[r] && n[r].abort(), n[r] = new AbortController(), c[r] = !0;
+    try {
+      const u = (l = (await w(
+        { [r]: i[r] },
+        { [r]: t },
+        {
+          customRules: g,
+          aliases: k,
+          messages: j,
+          locale: p,
+          signal: n[r].signal
+        }
+      ))[r]) == null ? void 0 : l.error;
+      return f[r] = u || void 0, !u;
+    } catch (o) {
+      return o instanceof Error && o.name === "AbortError" || B.error(`Validation failed for ${String(r)}:`, o), !1;
+    } finally {
+      c[r] = !1;
+    }
+  };
+  async function V() {
+    var l;
+    const r = await w(i, e, {
+      customRules: g,
+      aliases: k,
+      messages: j,
+      locale: p
+    });
+    let t = !0;
+    for (const o in e) {
+      const u = (l = r[o]) == null ? void 0 : l.error;
+      f[o] = u || void 0, u && (t = !1);
+    }
+    return v.value = t, t;
+  }
+  const A = (r) => {
+    Object.assign(i, { ...y, ...r });
+    for (const t in e)
+      f[t] = void 0, s[t] = !1, c[t] = !1;
+    v.value = !0;
+  }, C = (r, t) => {
+    i[r] = t, s[r] = !0, b && d(r);
+  }, E = (r) => {
+    s[r] = !0, O && d(r);
+  };
+  return b && x(
+    i,
+    (r) => {
+      for (const t in r)
+        s[t] && d(t);
+    },
+    { deep: !0 }
+  ), {
+    values: i,
+    errors: f,
+    isDirty: s,
+    isValidating: c,
+    isValid: v.value,
+    validateField: d,
+    validateForm: V,
+    reset: A,
+    handleChange: C,
+    handleBlur: E
+  };
+}
+export {
+  L as useCtrovalidate
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "ctrovalidate-vue",
+  "version": "1.0.0",
+  "description": "Vue 3 adapter for Ctrovalidate - The lightweight, declarative validation library.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint .",
+    "format": "prettier . --check"
+  },
+  "homepage": "https://ctrovalidate.vercel.app/api/vue",
+  "keywords": [
+    "ctrovalidate",
+    "validation",
+    "form-validation",
+    "vue",
+    "vue3"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ctrotech-tutor/ctrovalidate-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ctrotech-tutor/ctrovalidate-vue/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "ctrovalidate-core": "^1.0.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "ctrovalidate-core": "^1.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.1.0",
+    "globals": "^17.2.0",
+    "prettier": "^3.1.1",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.0.18",
+    "vue": "^3.5.0"
+  }
+}