Skip to content

Commit dcb4ba1

Browse files
kolirtkolirt
committed
update
1 parent a730c99 commit dcb4ba1

29 files changed

+8291
-2
lines changed

‎README.md‎

Lines changed: 105 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ A lightweight, Laravel-inspired validation package for Vue 3. Effortlessly valid
1515
- [Installation](#installation)
1616
- [Setup](#setup)
1717
- [Usage](#usage)
18-
- [Basic usage](#basic-usage)
18+
- [Validate field](#validate-field)
19+
- [Validate object](#validate-object)
20+
- [Rules](#rules)
1921
- [Demo](#demo)
2022
- [Example](#example)
2123
- [Faq](#faq)
@@ -82,14 +84,115 @@ app.mount('#app')
8284

8385
# Usage
8486

85-
## Basic usage
87+
## Validate field
8688

8789
```vue
8890
<script setup lang="ts">
91+
import { useForm, ValidationField, ValidationForm } from '@kolirt/vue-validation-kit'
92+
import { required, min } from '@kolirt/vue-validation-kit/rules'
8993
94+
type Payload = {
95+
email: string
96+
}
97+
98+
const form = useForm<Payload>(
99+
{
100+
name: null,
101+
},
102+
{
103+
name: [required(), min(3)]
104+
}
105+
)
106+
107+
function send() {
108+
form.validate()
109+
.then(() => {
110+
console.log('Success validation')
111+
})
112+
.catch(() => {
113+
console.log('Error validation')
114+
})
115+
}
90116
</script>
117+
118+
<template>
119+
<ValidationForm @submit="send" :form="form">
120+
<ValidationField name="name" v-slot="{ fieldName, firstError }">
121+
<label :for="fieldName">{{ fieldName }}</label>
122+
<input :id="fieldName" :name="fieldName" type="text" v-model="form.payload.name"/>
123+
<div v-if="firstError">{{ firstError }}</div>
124+
</ValidationField>
125+
</ValidationForm>
126+
</template>
91127
```
92128

129+
## Validate object
130+
131+
```vue
132+
<script setup lang="ts">
133+
import { useForm, ValidationField, ValidationForm } from '@kolirt/vue-validation-kit'
134+
import { required, min } from '@kolirt/vue-validation-kit/rules'
135+
136+
type Payload = {
137+
city: {
138+
name: string
139+
lat: number
140+
lon: number
141+
}
142+
}
143+
144+
const form = useForm<Payload>(
145+
{
146+
city: {
147+
name: null,
148+
population: null,
149+
}
150+
},
151+
{
152+
'city.name': [required(), min(3)],
153+
'city.population': [required()]
154+
}
155+
)
156+
157+
function send() {
158+
form.validate()
159+
.then(() => {
160+
console.log('Success validation')
161+
})
162+
.catch(() => {
163+
console.log('Error validation')
164+
})
165+
}
166+
</script>
167+
168+
<template>
169+
<ValidationForm @submit="send" :form="form">
170+
<ValidationField name="city.name" v-slot="{ fieldName, firstError }">
171+
<label :for="fieldName">{{ fieldName }}</label>
172+
<input :id="fieldName" :name="fieldName" type="text" v-model="form.payload.city.name"/>
173+
<div v-if="firstError">{{ firstError }}</div>
174+
</ValidationField>
175+
176+
<ValidationField name="city.population" v-slot="{ fieldName, firstError }">
177+
<label :for="fieldName">{{ fieldName }}</label>
178+
<input :id="fieldName" :name="fieldName" type="text" v-model="form.payload.city.population"/>
179+
<div v-if="firstError">{{ firstError }}</div>
180+
</ValidationField>
181+
</ValidationForm>
182+
</template>
183+
```
184+
185+
186+
# Rules
187+
188+
- [included](./lib/rules/included.ts)
189+
- [index](./lib/rules/index.ts)
190+
- [is](./lib/rules/is.ts)
191+
- [max](./lib/rules/max.ts)
192+
- [min](./lib/rules/min.ts)
193+
- [required](./lib/rules/required.ts)
194+
- [sameAs](./lib/rules/sameAs.ts)
195+
- [url](./lib/rules/url.ts)
93196

94197

95198
# Demo

‎examples/vite/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vite/.prettierrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"bracketSpacing": true,
3+
"trailingComma": "none",
4+
"tabWidth": 2,
5+
"printWidth": 120,
6+
"semi": false,
7+
"singleQuote": true,
8+
"endOfLine": "auto",
9+
"plugins": [
10+
"prettier-plugin-organize-imports"
11+
]
12+
}

‎examples/vite/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8+
9+
## Type Support For `.vue` Imports in TS
10+
11+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12+
13+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14+
15+
1. Disable the built-in TypeScript Extension
16+
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17+
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

‎examples/vite/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/vite/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "vite",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"format": "prettier --write \"**/*.{ts,js,cjs,vue,json}\""
11+
},
12+
"dependencies": {
13+
"@kolirt/vue-validation-kit": "^1.0.2",
14+
"@kyvg/vue3-notification": "^3.0.2",
15+
"bootstrap": "^5.3.2",
16+
"vue": "^3.3.8"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^4.5.0",
20+
"prettier": "^3.2.5",
21+
"prettier-plugin-organize-imports": "^3.2.4",
22+
"typescript": "^5.2.2",
23+
"vite": "^5.0.0",
24+
"vue-tsc": "^1.8.22"
25+
}
26+
}

‎examples/vite/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)