Skip to content

Commit 1a12e8b

Browse files
JenesiusJenesius
authored
Merge pull request #159 from Jenesius/issue_110
Issue 110
2 parents 8d18e2c + 8c8e677 commit 1a12e8b

File tree

6 files changed

+116
-128
lines changed

6 files changed

+116
-128
lines changed

‎README.md‎

Lines changed: 24 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1+
<p align="center"><a href="https://form.jenesius.com/" target="_blank" rel="noopener noreferrer"><img height="100" src="https://form.jenesius.com/images/logo.svg" alt="Vue logo"></a></p>
2+
3+
<p align="center">
4+
<a href="https://img.shields.io/npm/dm/jenesius-vue-form"><img src="https://img.shields.io/npm/dm/jenesius-vue-form" alt="Downloads"></a>
5+
<a href="https://img.shields.io/npm/dt/jenesius-vue-form"><img src="https://img.shields.io/npm/dt/jenesius-vue-form" alt="Downloads"></a>
6+
<a href="https://github.com/Jenesius/vue-form/actions/workflows/node.js.yml/badge.svg"><img src="https://github.com/Jenesius/vue-form/actions/workflows/node.js.yml/badge.svg" ></a>
7+
<a href="https://img.shields.io/github/issues/Jenesius/vue-form"><img src="https://img.shields.io/github/issues/Jenesius/vue-form" alt="Issue"></a>
8+
<a href="https://img.shields.io/github/stars/Jenesius/vue-form"><img src="https://img.shields.io/github/stars/Jenesius/vue-form" alt="Stars"></a>
9+
</p>
10+
111
# Jenesius Vue Form
212
Heavy form system for Vue.js ( **Only 3 Version** ). Library provides a wide range of
313
functionality and interaction with form elements.
414

5-
## Links
6-
- [Documentation](https://form.jenesius.com/)
7-
- [Examples](https://form.jenesius.com/examples/list.html)
8-
- [GitHub](https://github.com/Jenesius/vue-form)
9-
## Reason For Use
15+
## Documentation
16+
17+
To check out [live examples](https://form.jenesius.com/examples/list.html) and docs, visit [form.jenesius.com](https://form.jenesius.com/).
1018

11-
![](https://img.shields.io/npm/dm/jenesius-vue-form)
12-
![](https://img.shields.io/npm/dt/jenesius-vue-form)
13-
![Greet everyone](https://github.com/Jenesius/vue-form/actions/workflows/node.js.yml/badge.svg)
14-
![](https://img.shields.io/github/issues/Jenesius/vue-form)
15-
![](https://img.shields.io/github/stars/Jenesius/vue-form)
19+
## Questions and Issues
1620

17-
- 💪 The functionality of the form allows you to flexibly work with dependent elements.
18-
- 🤝 Create complex interfaces with lots of dependencies. One page can contain many
19-
forms that will be managed from one place.
20-
- ✍ Connect your own input fields to the form. This gives flexibility and
21-
independence on the part of the site design.
21+
For questions and support please use [the GitHub repo](https://github.com/Jenesius/vue-form).
2222

23-
*Where the spirit does not work with the hand there is no art.* @Leonardo da Vinci
23+
## Quick Example
2424

2525
![Alt Text](./gif-example.gif)
2626

@@ -29,12 +29,12 @@ This example demonstrates a simple use of this library using the login form as a
2929

3030
```vue
3131
<template>
32-
<input-field name = "login"/>
33-
<input-field name = "password" type = "password"/>
32+
<form-field name = "login"/>
33+
<form-field name = "password" type = "password"/>
3434
<button @click = "handleLogin">Login</button>
3535
</template>
3636
<script setup>
37-
import {InputField, Form} from "jenesius-vue-form";
37+
import {FormField, Form} from "jenesius-vue-form";
3838
3939
const form = new Form();
4040
function handleLogin() {
@@ -43,56 +43,11 @@ function handleLogin() {
4343
</script>
4444
```
4545

46-
## Main Form
47-
To create a form, you just need to create an instance. JenesiusVueForm will do
48-
most of the work for you.
49-
```ts
50-
import {Form} from "jenesius-vue-form"
51-
const form = new Form()
52-
```
53-
54-
### Main Form state
55-
The reactive form state can be obtained from the **useFormState** hook, and reactive values from
56-
**useFormValues**:
57-
```js
58-
import {useFormState, useFormValues} from "jenesius-vue-form"
59-
const state = useFormState(form) // disabled changed
60-
const state = useFormValues(form) // disabled changed
61-
```
62-
63-
## Proxy Form
64-
You can flexibly create complex inputs (compound) using FormProxy.
65-
[More Information](https://github.com/Jenesius/vue-form/tree/main/examples/form-proxy)
46+
We connected two fields (login, password), arranged the corresponding types of provided libraries, industrial-level instances.
47+
a form and creating a handler for entering which takes on the value of the form. This is an example of the simplest form of use.
6648

49+
## License
6750

68-
## Example
69-
The current example shows the simplest binding of two fields to a form and working with them
70-
```vue
71-
<template>
72-
<input-field name = "username"/>
73-
<input-field name = "password" type = "password"/>
74-
75-
<button @click = "showValues">values</button>
76-
<button @click = "setUsername">set default name</button>
77-
</template>
78-
<script setup >
79-
import {Form, InputField} from "jenesius-vue-form"
80-
const form = new Form();
81-
82-
// Getting values from Form
83-
function showValues() {
84-
console.log(form.values);
85-
}
86-
// Setting username
87-
function setUsername() {
88-
form.change({
89-
username: 'Jack'
90-
})
91-
}
92-
</script>
93-
```
51+
[MIT](https://opensource.org/licenses/MIT)
9452

95-
## Full Functionality
96-
I recommend going to the [documentation site](http://form.jenesius.com/),
97-
which provides information on
98-
validation, form lock/unlock, and all the states of the form and input fields.
53+
Copyright (c) 2022-present, Jenesius

‎examples/simple-form/App.vue‎

Lines changed: 85 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
<template>
2-
<div class = "container">
3-
<div>
4-
<h2>Values</h2>
5-
<pre class = "container-values">{{JSON.stringify(values, undefined, 4)}}</pre>
6-
</div>
7-
8-
<div class = "wrap-app">
9-
<h2>Simple Form</h2>
10-
<input-field name = "username" label = "Username"/>
11-
<input-field name = "about" label = "About yourself" type = "textarea"/>
12-
<input-field name = "gender" label = "Gender" type = "radio" :options = "sexOptions"/>
13-
<input-field name = "language" label = "Language" type = "select" :options = "languageOptions" />
14-
<input-field name = "age" label = "Age" type = "number"/>
15-
<input-field name = "mobile" type = "tel" label = "Mobile phone" required/>
16-
<input-field name = "range" type = "range" label = "Volume"/>
17-
<input-field name = "isProgrammer" label = "You are programmer" type = "switch" class="padding_10"/>
18-
19-
<input-field name = "programLanguages" label = "Program language" type = "checkbox"
20-
:options = "programLanguageOptions" v-if = "computedIsProgrammer"/>
21-
<button class = "button" @click = "form.cleanValues()">Clean Form</button>
22-
</div>
23-
</div>
2+
<div class="container">
3+
<div>
4+
<pre class="container-values">{{ JSON.stringify(values, undefined, 4) }}</pre>
5+
</div>
6+
7+
<div class="wrap-app">
8+
<div class = "container-navigation">
9+
<button class="button" @click="form.cleanValues()">Clean Form</button>
10+
<button class="button" @click="form.validate()">Validate</button>
11+
</div>
12+
<div class = "container-inputs">
13+
<input-field name="username" label="Username"/>
14+
<input-field name="gender" label="Gender" type="radio" :options="sexOptions"/>
15+
<input-field name="about" label="About yourself" type="textarea" class = "grid-full"/>
16+
17+
<input-field name="age" label="Age" type="number"/>
18+
<input-field name="birthday" label="Birthday" type="date"/>
19+
<input-field name="language" label="Language" type="select" :options="languageOptions"/>
20+
21+
<input-field name="mobile" type="tel" label="Mobile phone" required/>
22+
<input-field name="isProgrammer" label="You are programmer" type="switch" class="padding_10"/>
23+
24+
<input-field name="programLanguages" label="Program language" type="checkbox"
25+
:options="programLanguageOptions" v-if="computedIsProgrammer"/>
26+
</div>
27+
28+
</div>
29+
</div>
2430
</template>
2531

2632
<script setup lang='ts'>
@@ -33,59 +39,81 @@ const values = useFormValues(form);
3339
3440
/*JUST ENUMS*/
3541
const sexOptions = {
36-
0: "female",
37-
1: "male"
42+
0: "female",
43+
1: "male"
3844
}
3945
const languageOptions = {
40-
1: "English",
41-
2: "Dutch",
42-
3: "Chinese",
43-
4: "Portuguese",
44-
5: "Spanish",
45-
6: "Italian",
46-
7: "Russian"
46+
en: "English",
47+
de: "Dutch",
48+
ch: "Chinese",
49+
po: "Portuguese",
50+
sp: "Spanish",
51+
it: "Italian",
52+
ru: "Russian"
4753
}
4854
const programLanguageOptions = {
49-
1: "JavaScript",
50-
2: "TypeScript",
51-
3: "Assembler",
52-
4: "C++"
55+
js: "JavaScript",
56+
ts: "TypeScript",
57+
asm: "Assembler",
58+
cpp: "C++",
59+
py: 'Python'
5360
}
5461
5562
</script>
5663

5764
<style>
58-
.container{
59-
display: flex;
65+
.container-inputs {
66+
display: grid;
67+
grid-template-columns: 1fr 1fr;
68+
gap: 10px;
69+
}
70+
.grid-full {
71+
grid-column: 1/3;
72+
}
73+
.container-navigation {
74+
display: flex;
75+
gap: 10px;
76+
padding: 20px 0;
77+
}
78+
79+
.container {
80+
display: flex;
6081
}
82+
6183
@media screen and (max-width: 768px) {
62-
.container{
63-
flex-direction: column;
64-
}
84+
.container {
85+
flex-direction: column;
86+
}
6587
}
66-
.wrap-app{
67-
width: 100%;
68-
max-width: 600px;
69-
margin: auto auto;
88+
89+
.wrap-app {
90+
width: 100%;
91+
max-width: 600px;
92+
margin: auto auto;
7093
}
94+
7195
body {
72-
font-family: sans-serif;
96+
font-family: sans-serif;
7397
}
74-
.padding_10{
75-
padding: 10px 0;
98+
99+
.padding_10 {
100+
padding: 10px 0;
76101
}
77-
.container-values{
78-
width: 300px;
79-
padding: 20px 0;
102+
103+
.container-values {
104+
width: 300px;
105+
padding: 20px 0;
80106
}
81-
.button{
82-
cursor: pointer;
83-
padding: 6px 10px;
84-
border: 1px solid lightgray;
85-
background-color: white;
86-
transition: transform;
107+
108+
.button {
109+
cursor: pointer;
110+
padding: 6px 10px;
111+
border: 1px solid lightgray;
112+
background-color: white;
113+
transition: transform;
87114
}
115+
88116
.button:hover {
89-
transform: scale(.96);
117+
transform: scale(.96);
90118
}
91119
</style>

‎gif-example.gif‎

679 KB
Loading

‎public/favicon.ico‎

-4.19 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
7+
<link rel="icon" href="<%= BASE_URL %>logo.png">
88
<title><%= htmlWebpackPlugin.options.title %></title>
99
</head>
1010
<body>
@@ -15,6 +15,11 @@
1515
<!-- built files will be auto injected -->
1616
<link rel="preconnect" href="https://fonts.googleapis.com">
1717
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
18+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
19+
<style>
20+
* {
21+
font-family: 'Open Sans', sans-serif;
22+
}
23+
</style>
1924
</body>
2025
</html>

‎public/logo.png‎

847 Bytes
Loading

0 commit comments

Comments
 (0)