Skip to content

Commit 8c8e677

Browse files
JenesiusJenesius
committed
Update App.vue for simple-form. Update Gif for Readme.md. Resolve #110 
1 parent 4294934 commit 8c8e677

File tree

5 files changed

+92
-59
lines changed

5 files changed

+92
-59
lines changed

‎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)