Skip to content

Commit d9cb520

Browse files
beizhedenglongbeizhedenglong
committed
add docs
1 parent 82c6c8d commit d9cb520

22 files changed

+9436
-33
lines changed

‎.eslintrc.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ module.exports = {
1616
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
1717
semi: ["error", "never"],
1818
"@typescript-eslint/ban-ts-ignore": "off",
19-
"@typescript-eslint/no-explicit-any": "off"
19+
"@typescript-eslint/no-explicit-any": "off",
20+
"max-len": "warn"
2021
},
2122
overrides: [
2223
{

‎README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Building forms with Vue composition API: https://beizhedenglong.github.io/vue-ho
1010
## Features
1111
- UI decoupling: Since It does not contain any UI code, It can be easily integrated with other UI libraries.
1212
- Easy to adoptable: Since form state is inherently local and ephemeral, it can be easily adopted.
13-
- Easy to use.
13+
- Easy to use: No fancy stuffs, just reactive values/errors.
1414
- TypeScript support.
1515

1616
## Usage
@@ -93,3 +93,7 @@ const {
9393
error
9494
} = useField(path, options)
9595
```
96+
97+
98+
## Credits
99+
This project was inspired by [react-hook-form](https://react-hook-form.com/), [formik](https://formik.org), and many other form libraries.

‎docs/.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
pids
2+
logs
3+
node_modules
4+
npm-debug.log
5+
coverage/
6+
run
7+
dist
8+
.DS_Store
9+
.nyc_output
10+
.basement
11+
config.local.js
12+
basement_dist

‎docs/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "vue-hooks-form",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "index.js",
6+
"authors": {
7+
"name": "",
8+
"email": ""
9+
},
10+
"repository": "/vue-hooks-form",
11+
"scripts": {
12+
"dev": "vuepress dev src",
13+
"build": "vuepress build src"
14+
},
15+
"license": "MIT",
16+
"devDependencies": {
17+
"vuepress": "^1.5.3"
18+
},
19+
"dependencies": {
20+
"raw-loader": "^4.0.2",
21+
"vue-hooks-form": "^0.1.3"
22+
}
23+
}

‎docs/src/.vuepress/components/demo.vue

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<iframe
3+
v-if="url"
4+
:src="url"
5+
:style="style"
6+
title="Vue Hooks Form Demo"
7+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
8+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
9+
></iframe>
10+
</template>
11+
12+
<script>
13+
import { getParameters } from "codesandbox/lib/api/define";
14+
15+
export default {
16+
props: ["path", "height", "defaultUrl"],
17+
data() {
18+
const height = this.height
19+
return {
20+
url: "",
21+
style: {
22+
width: '100%',
23+
height: height || '500px',
24+
border: 0,
25+
borderRadius: '4px',
26+
overflow: "hidden"
27+
}
28+
};
29+
},
30+
mounted() {
31+
if(this.defaultUrl) {
32+
this.url = this.defaultUrl
33+
return
34+
}
35+
if (this.path) {
36+
const code = require(`!!raw-loader!../demos/${this.path}`).default;
37+
const html = require(`!!raw-loader!./index.html`).default;
38+
const main = require(`!!raw-loader!./main.js`).default;
39+
const css = require(`!!raw-loader!./style.css`).default;
40+
const packageJson = require("./package.json.js");
41+
const parameters = getParameters({
42+
files: {
43+
"src/App.vue": {
44+
content: code,
45+
},
46+
"src/style.css": {
47+
content: css
48+
},
49+
"index.html": {
50+
content: html,
51+
},
52+
"src/main.js": {
53+
content: main,
54+
},
55+
"package.json": {
56+
content: packageJson,
57+
},
58+
},
59+
});
60+
const sandboxOptions = {
61+
autoresize: 1,
62+
theme: "dark",
63+
module: "/src/App.vue",
64+
hidenavigation: 1,
65+
fontsize: 14,
66+
view: "split"
67+
};
68+
const createQueryString = (data) => {
69+
return Object.keys(data)
70+
.map((key) => {
71+
let val = data[key];
72+
if (typeof val === "object") val = createQueryString(val);
73+
return `${key}=${encodeURIComponent(`${val}`.replace(/\s/g, "_"))}`;
74+
})
75+
.join("&");
76+
};
77+
const query = createQueryString({
78+
parameters,
79+
query: sandboxOptions,
80+
embed: 1,
81+
});
82+
this.url = `https://codesandbox.io/api/v1/sandboxes/define?${query}`;
83+
}
84+
},
85+
};
86+
</script>
87+
88+
<style>
89+
</style>

‎docs/src/.vuepress/components/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
10+
<title><%= htmlWebpackPlugin.options.title %></title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
16+
Please enable it to continue.</strong>
17+
</noscript>
18+
<div id="app" class="section"></div>
19+
<!-- built files will be auto injected -->
20+
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
21+
</body>
22+
23+
</html>

‎docs/src/.vuepress/components/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import "./style.css"
4+
5+
createApp(App).mount('#app')

‎docs/src/.vuepress/components/package.json.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
"name": "Demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build"
8+
},
9+
"dependencies": {
10+
"core-js": "^3.6.5",
11+
"vue": "^3.0.0-0",
12+
"vue-hooks-form": "latest",
13+
},
14+
"devDependencies": {
15+
"@vue/cli-plugin-babel": "~4.5.0",
16+
"@vue/cli-service": "~4.5.0",
17+
"@vue/compiler-sfc": "^3.0.0-0",
18+
},
19+
"browserslist": ["> 1%", "last 2 versions", "not dead"],
20+
"keywords": [],
21+
"description": ""
22+
}

‎docs/src/.vuepress/components/style.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
body {
2+
background: rgb(21, 21, 21);
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5+
sans-serif;
6+
}
7+
8+
form {
9+
max-width: 500px;
10+
margin: 0 auto;
11+
}
12+
13+
h1 {
14+
font-weight: 100;
15+
color: white;
16+
text-align: center;
17+
padding-bottom: 10px;
18+
border-bottom: 1px solid rgb(79, 98, 148);
19+
}
20+
21+
.form {
22+
background: #0e101c;
23+
max-width: 400px;
24+
margin: 0 auto;
25+
}
26+
27+
p {
28+
color: #DA5961;
29+
}
30+
31+
p::before {
32+
display: inline;
33+
content: "⚠ ";
34+
}
35+
36+
input {
37+
display: block;
38+
box-sizing: border-box;
39+
width: 100%;
40+
border-radius: 4px;
41+
border: 1px solid white;
42+
padding: 10px 15px;
43+
margin-bottom: 10px;
44+
font-size: 14px;
45+
outline: none;
46+
}
47+
48+
label {
49+
line-height: 2;
50+
text-align: left;
51+
display: block;
52+
margin-bottom: 13px;
53+
margin-top: 20px;
54+
color: white;
55+
font-size: 14px;
56+
font-weight: 200;
57+
}
58+
59+
button[type="submit"],
60+
input[type="submit"] {
61+
background: #3eaf7c;
62+
color: white;
63+
text-transform: uppercase;
64+
border: none;
65+
margin-top: 40px;
66+
padding: 20px;
67+
font-size: 16px;
68+
font-weight: 100;
69+
letter-spacing: 10px;
70+
width: 100%;
71+
}
72+
73+
button[type="submit"]:hover,
74+
input[type="submit"]:hover {
75+
background: #4abf8a;
76+
}
77+
78+
button[type="submit"]:active,
79+
input[type="button"]:active,
80+
input[type="submit"]:active {
81+
transition: 0.3s all;
82+
transform: translateY(3px);
83+
border: 1px solid transparent;
84+
opacity: 0.8;
85+
}
86+
87+
input:disabled {
88+
opacity: 0.4;
89+
}
90+
91+
input[type="button"]:hover {
92+
transition: 0.3s all;
93+
}
94+
95+
button[type="submit"],
96+
input[type="button"],
97+
input[type="submit"] {
98+
-webkit-appearance: none;
99+
}
100+
101+
.App {
102+
max-width: 600px;
103+
margin: 0 auto;
104+
}
105+
106+
button[type="button"] {
107+
display: block;
108+
appearance: none;
109+
background: #333;
110+
color: white;
111+
border: none;
112+
text-transform: uppercase;
113+
padding: 10px 20px;
114+
border-radius: 4px;
115+
}
116+
117+
hr {
118+
margin-top: 30px;
119+
}
120+
121+
button {
122+
display: block;
123+
appearance: none;
124+
margin-top: 40px;
125+
border: 1px solid #333;
126+
margin-bottom: 20px;
127+
text-transform: uppercase;
128+
padding: 10px 8px;
129+
border-radius: 4px;
130+
outline: none;
131+
}

0 commit comments

Comments
 (0)