notform 2.1.0 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -6
- package/dist/index.d.ts +268 -255
- package/dist/index.js +578 -523
- package/package.json +28 -25
package/README.md
CHANGED
|
@@ -1,15 +1,108 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>notform</h1>
|
|
3
|
+
<p><strong>Vue Forms Without the Friction</strong></p>
|
|
4
|
+
<p>
|
|
5
|
+
<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/v/notform.svg?style=plastic&label=NPM%20Version&color=blue" alt="NPM Version"></a>
|
|
6
|
+
<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/dw/notform.svg?style=plastic&label=NPM%20Downloads&color=blue" alt="NPM Downloads"></a>
|
|
7
|
+
<a href="https://npmx.dev/package/notform"><img src="https://img.shields.io/npm/unpacked-size/notform?style=plastic&label=NPM%20Unpacked%20Size&color=blue" alt="NPM Unpacked Size"></a>
|
|
8
|
+
</p>
|
|
9
|
+
</div>
|
|
2
10
|
|
|
3
|
-
|
|
4
|
-
[](https://npmx.dev/package/notform)
|
|
5
|
-
[](https://npmx.dev/package/notform)
|
|
11
|
+
<br>
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
`notform` is the core package of the NotForm ecosystem. It provides type-safe form validation and state management for Vue 3 applications with minimal boilerplate. Built with TypeScript from the ground up, it offers a composable API that integrates perfectly with Vue 3's Composition API.
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add notform
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## How It Works
|
|
22
|
+
|
|
23
|
+
NotForm follows a **composable-first** approach. Forms are managed through the `useNotForm` composable which handles validation, state, and submission logic in a type-safe manner.
|
|
24
|
+
|
|
25
|
+
Each form consists of:
|
|
26
|
+
|
|
27
|
+
- **A schema** — Defined using any validation library that supports [Standard Schema](https://standard-schema.dev/) (Zod, Yup, etc.)
|
|
28
|
+
- **Form state** — Managed reactively with full TypeScript support
|
|
29
|
+
- **Validation** — Automatic validation based on your schema with error messages
|
|
30
|
+
- **Submission handling** — Built-in submission lifecycle with loading states
|
|
31
|
+
|
|
32
|
+
### Basic Usage
|
|
33
|
+
|
|
34
|
+
```vue
|
|
35
|
+
<script setup lang="ts">
|
|
36
|
+
import { NotField, NotForm, NotMessage, useNotForm } from 'notform'
|
|
37
|
+
import { z } from 'zod'
|
|
38
|
+
|
|
39
|
+
const schema = z.object({
|
|
40
|
+
email: z.string().email('Invalid email'),
|
|
41
|
+
name: z.string().min(1, 'Name is required'),
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
const form = useNotForm({
|
|
45
|
+
onSubmit: (values) => {
|
|
46
|
+
console.log('Form submitted:', values)
|
|
47
|
+
},
|
|
48
|
+
schema,
|
|
49
|
+
})
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<template>
|
|
53
|
+
<NotForm
|
|
54
|
+
:form="form"
|
|
55
|
+
@submit="form.submit"
|
|
56
|
+
>
|
|
57
|
+
<NotField path="name">
|
|
58
|
+
<input
|
|
59
|
+
v-model="form.values.name"
|
|
60
|
+
type="text"
|
|
61
|
+
>
|
|
62
|
+
|
|
63
|
+
<NotMessage path="name" />
|
|
64
|
+
</NotField>
|
|
65
|
+
|
|
66
|
+
<NotField path="email">
|
|
67
|
+
<input
|
|
68
|
+
v-model="form.values.email"
|
|
69
|
+
type="email"
|
|
70
|
+
>
|
|
71
|
+
|
|
72
|
+
<NotMessage path="email" />
|
|
73
|
+
</NotField>
|
|
74
|
+
|
|
75
|
+
<button type="submit">
|
|
76
|
+
Submit
|
|
77
|
+
</button>
|
|
78
|
+
</NotForm>
|
|
79
|
+
</template>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Validation Libraries
|
|
83
|
+
|
|
84
|
+
NotForm works with any validation library that implements the Standard Schema interface:
|
|
85
|
+
|
|
86
|
+
- **Zod** — TypeScript-first schema validation
|
|
87
|
+
- **Yup** — JavaScript schema builder
|
|
88
|
+
- **Valibot** — Modular and type-safe schema validation
|
|
89
|
+
- And any other Standard Schema-compatible library
|
|
90
|
+
|
|
91
|
+
## Features
|
|
92
|
+
|
|
93
|
+
- **Type-safe** — Full TypeScript support with inferred types from your schema
|
|
94
|
+
- **Composable** — Use with Vue 3 Composition API for flexible form management
|
|
95
|
+
- **Lightweight** — Tiny footprint with tree-shaking support
|
|
96
|
+
- **Flexible** — Works with any Standard Schema-compatible validation library
|
|
97
|
+
- **Array fields** — Built-in support for dynamic array fields with add/remove operations
|
|
98
|
+
- **Minimal boilerplate** — Get started quickly with simple, intuitive APIs
|
|
10
99
|
|
|
11
100
|
## Documentation
|
|
12
101
|
|
|
13
102
|
For detailed guides, API reference, and examples, visit:
|
|
14
103
|
**[notformdocs.vercel.app](https://notformdocs.vercel.app/)**
|
|
15
104
|
|
|
105
|
+
## License
|
|
106
|
+
|
|
107
|
+
[MIT](../../LICENSE) © [Favour Emeka](https://github.com/favorodera)
|
|
108
|
+
|