Skip to content

Commit 0b63c2c

Browse files
JenesiusJenesius
authored
Merge pull request #183 from Jenesius/issue_181
fix: update icons, #181
2 parents a00c08e + 923828b commit 0b63c2c

File tree

10 files changed

+128
-104
lines changed

10 files changed

+128
-104
lines changed

‎examples/disable-enable-form/App.vue‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<template>
2-
<div class = "container">
3-
<div class = "wrap-app">
4-
<h2>Disable/Enable Form</h2>
5-
<input-field name = "username" label = "Username" />
6-
<input-field name = "country.code" label = "Country Code" type = "select" :options = "languageOptions"/>
7-
<input-field name = "country.name" label = "Country Name"/>
8-
<button class = "button" @click = "handleMain">{{mainButton}}</button>
9-
<button class = "button" @click = "handleUsername">Disable/Enable username</button>
10-
<button class = "button" @click = "handleCountry">Disable/Enable country</button>
11-
</div>
12-
13-
</div>
2+
<div class="container">
3+
<div class="wrap-app">
4+
<h2>Disable/Enable Form</h2>
5+
<input-field name="username" label="Username"/>
6+
<input-field name="country.code" label="Country Code" type="select" :options="languageOptions"/>
7+
<input-field name="country.name" label="Country Name"/>
8+
<button class="button" @click="handleMain">{{ mainButton }}</button>
9+
<button class="button" @click="handleUsername">Disable/Enable username</button>
10+
<button class="button" @click="handleCountry">Disable/Enable country</button>
11+
</div>
12+
</div>
1413
</template>
1514

1615
<script setup lang='ts'>
@@ -23,54 +22,60 @@ const formState = useFormState(form);
2322
const mainButton = computed(() => (formState.disabled ? 'Enable' : 'Disable') + ' Form')
2423
2524
function handleMain() {
26-
(form.disabled) ? form.enable() : form.disable()
25+
(form.disabled) ? form.enable() : form.disable()
2726
}
27+
2828
function handleUsername() {
29-
(form.checkFieldDisable('username')) ? form.enable('username') : form.disable('username')
29+
(form.checkFieldDisable('username')) ? form.enable('username') : form.disable('username')
3030
}
31+
3132
function handleCountry() {
32-
(form.checkFieldDisable('country')) ? form.enable('country') : form.disable('country')
33+
(form.checkFieldDisable('country')) ? form.enable('country') : form.disable('country')
3334
}
3435
3536
3637
const languageOptions = {
37-
1: "English",
38-
2: "Dutch",
39-
3: "Chinese",
40-
4: "Portuguese",
41-
5: "Spanish",
42-
6: "Italian",
43-
7: "Russian"
38+
1: "English",
39+
2: "Dutch",
40+
3: "Chinese",
41+
4: "Portuguese",
42+
5: "Spanish",
43+
6: "Italian",
44+
7: "Russian"
4445
}
4546
4647
4748
</script>
4849

4950
<style scoped>
50-
.container{
51-
display: flex;
51+
.container {
52+
display: flex;
5253
}
53-
.wrap-app{
54-
width: 100%;
55-
max-width: 600px;
56-
margin: auto auto;
54+
55+
.wrap-app {
56+
width: 100%;
57+
max-width: 600px;
58+
margin: auto auto;
5759
}
5860
59-
.padding_10{
60-
padding: 10px 0;
61+
.padding_10 {
62+
padding: 10px 0;
6163
}
62-
.container-values{
63-
width: 300px;
64-
padding: 20px 0;
64+
65+
.container-values {
66+
width: 300px;
67+
padding: 20px 0;
6568
}
66-
.button{
67-
cursor: pointer;
68-
padding: 6px 10px;
69-
border: 1px solid lightgray;
70-
background-color: white;
71-
transition: transform;
69+
70+
.button {
71+
cursor: pointer;
72+
padding: 6px 10px;
73+
border: 1px solid lightgray;
74+
background-color: white;
75+
transition: transform;
7276
}
77+
7378
.button:hover {
74-
transform: scale(.96);
79+
transform: scale(.96);
7580
}
7681
</style>

‎project/pages/inputs/App.vue‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<template>
22
<div class="container-examples">
3-
<input-field type = "single-checkbox" name = "check" label = "Test" />
4-
<input-field type = "single-checkbox" name = "check-with-values" label = "Values" :values = "['A', 'R']" />
5-
<input-field type = "text" name = "test" label = "Test" prefix = "V89" required/>
6-
<input-field type = "text" name = "test" label = "Test" prefix = "V89" disabled/>
3+
<div>
4+
<form-field name = "mainAddress" type = "address" />
5+
<form-field name = "mainAddress.city" label = "Just city" />
6+
</div>
77
{{values}}
88
</div>
99
</template>
1010

1111
<script setup lang='ts'>
1212
import {Form, useFormValues, InputField} from "../../../src";
13+
import FormField from "./../../../src/widgets/form-field.vue";
1314
1415
const form = new Form();
1516
1617
const values = useFormValues(form);
17-
18-
form.validate()
19-
20-
window.form = form;
18+
form.validate();
2119
2220
</script>
2321

2422
<style>
25-
23+
.container-examples {
24+
display: grid;
25+
gap: 10px;
26+
}
2627
</style>

‎project/pages/inputs/input-address.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class = "input-address">
3+
<form-field name = "country" label = "Address country"/>
4+
<form-field name = "city" label = "Address city"/>
5+
</div>
6+
</template>
7+
8+
<script setup lang = "ts">
9+
import {Form, FormField} from "./../../../src/index";
10+
11+
const props = defineProps<{
12+
name: string,
13+
}>()
14+
15+
const form = new Form({
16+
name: props.name
17+
})
18+
</script>
19+
20+
<style scoped>
21+
22+
.input-address {
23+
display: grid;
24+
gap: 10px;
25+
}
26+
27+
</style>

‎project/pages/inputs/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3+
import {config} from "./../../../src/index";
4+
import InputAddress from "./input-address.vue";
5+
6+
config({
7+
inputTypes: {
8+
address: InputAddress
9+
}
10+
})
311

412
createApp(App).mount('#app')

‎src/widgets/icons/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Try not to use icons in this library. She's still aiming
2+
for functional use. If an icon is needed, it
3+
must be described in Figma and added via a component.

‎src/widgets/icons/icon-calendar.vue‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
<template>
2-
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" id="calendar">
3-
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"
4-
stroke-width="1.5" transform="translate(3 2)">
5-
<line x1=".093" x2="17.917" y1="7.404" y2="7.404"></line>
6-
<line x1="13.442" x2="13.451" y1="11.31" y2="11.31"></line>
7-
<line x1="9.005" x2="9.014" y1="11.31" y2="11.31"></line>
8-
<line x1="4.558" x2="4.567" y1="11.31" y2="11.31"></line>
9-
<line x1="13.442" x2="13.451" y1="15.196" y2="15.196"></line>
10-
<line x1="9.005" x2="9.014" y1="15.196" y2="15.196"></line>
11-
<line x1="4.558" x2="4.567" y1="15.196" y2="15.196"></line>
12-
<line x1="13.044" x2="13.044" y2="3.291"></line>
13-
<line x1="4.966" x2="4.966" y2="3.291"></line>
14-
<path
15-
d="M13.2382655,1.57919622 L4.77096342,1.57919622 C1.83427331,1.57919622 0,3.21513002 0,6.22222222 L0,15.2718676 C0,18.3262411 1.83427331,20 4.77096342,20 L13.2290015,20 C16.1749556,20 18,18.3546099 18,15.3475177 L18,6.22222222 C18.0092289,3.21513002 16.1842196,1.57919622 13.2382655,1.57919622 Z"></path>
16-
</g>
2+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<path d="M3.093 9.40405H20.917" stroke-linecap="round" stroke-linejoin="round"/>
4+
<path d="M16.442 13.3101H16.451" stroke-linecap="round" stroke-linejoin="round"/>
5+
<path d="M12.005 13.3101H12.014" stroke-linecap="round" stroke-linejoin="round"/>
6+
<path d="M7.558 13.3101H7.567" stroke-linecap="round" stroke-linejoin="round"/>
7+
<path d="M16.442 17.196H16.451" stroke-linecap="round" stroke-linejoin="round"/>
8+
<path d="M12.005 17.196H12.014" stroke-linecap="round" stroke-linejoin="round"/>
9+
<path d="M7.558 17.196H7.567" stroke-linecap="round" stroke-linejoin="round"/>
10+
<path d="M16.044 2V5.291" stroke-linecap="round" stroke-linejoin="round"/>
11+
<path d="M7.966 2V5.291" stroke-linecap="round" stroke-linejoin="round"/>
12+
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2383 3.5791H7.77096C4.83427 3.5791 3 5.21504 3 8.22213V17.2718C3 20.3261 4.83427 21.9999 7.77096 21.9999H16.229C19.175 21.9999 21 20.3545 21 17.3474V8.22213C21.0092 5.21504 19.1842 3.5791 16.2383 3.5791Z" stroke-linecap="round" stroke-linejoin="round"/>
1713
</svg>
14+
1815
</template>
1916

2017
<script>

‎src/widgets/icons/icon-eye.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<g clip-path="url(#clip0_208_97)">
4+
<path d="M5.5 6.5L18.5 17.5" stroke-linecap="round" v-if = "crossed"/>
5+
<circle cx="12" cy="12" r="3" />
6+
<path d="M21.4977 11.9958C21.4982 11.9976 21.4987 11.999 21.499 12C21.4987 12.001 21.4982 12.0024 21.4977 12.0042C21.4909 12.0278 21.4641 12.12 21.363 12.2963C21.2482 12.4967 21.0701 12.7501 20.8295 13.0399C20.3492 13.6183 19.645 14.311 18.7686 14.9769C17.0095 16.3135 14.6139 17.5 12 17.5C9.38615 17.5 6.99054 16.3135 5.23143 14.9769C4.35501 14.311 3.65076 13.6183 3.17051 13.0399C2.92986 12.7501 2.75184 12.4967 2.63697 12.2963C2.53594 12.12 2.50914 12.0278 2.50228 12.0042C2.50175 12.0024 2.50135 12.001 2.50103 12C2.50135 11.999 2.50175 11.9976 2.50228 11.9958C2.50914 11.9722 2.53594 11.88 2.63697 11.7037C2.75184 11.5033 2.92986 11.2499 3.17051 10.9601C3.65076 10.3817 4.35501 9.68904 5.23143 9.02312C6.99054 7.68651 9.38615 6.5 12 6.5C14.6139 6.5 17.0095 7.68651 18.7686 9.02312C19.645 9.68904 20.3492 10.3817 20.8295 10.9601C21.0701 11.2499 21.2482 11.5033 21.363 11.7037C21.4641 11.88 21.4909 11.9722 21.4977 11.9958Z" />
7+
</g>
8+
</svg>
9+
</template>
10+
11+
<script setup lang = "ts">
12+
defineProps<{
13+
crossed: boolean
14+
}>()
15+
</script>
16+
17+
<style scoped>
18+
19+
</style>

‎src/widgets/icons/icons-calendar.gif‎

-12 KB
Binary file not shown.

‎src/widgets/inputs/input-date/input-date.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ watch(() => props.modelValue, v => insideValue.value = v, {immediate: true})
187187
cursor: pointer;
188188
display: grid;
189189
place-content: center;
190-
stroke: var(--vf-input-gray-dark);
190+
stroke: var(--vf-input-gray-deep);
191191
transition: var(--vf-input-transtion-fast);
192192
padding: 0 6px;
193193
}

‎src/widgets/inputs/input-password/widget-input-password.vue‎

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,7 @@
1515
:autofocus="autofocus || false"
1616
/>
1717
<div class="input-password-toggle" @click="toggleType()">
18-
<div
19-
class="input-password-toggle-eye"
20-
:class="{
21-
'input-password-toggle-eye_cross': typeInput === 'text'
22-
}"
23-
></div>
18+
<icon-eye :crossed = "typeInput === 'text'"/>
2419
</div>
2520

2621
</div>
@@ -30,6 +25,7 @@
3025
<script setup lang="ts">
3126
import FieldWrap from "../field-wrap.vue";
3227
import {ref} from "vue";
28+
import IconEye from "../../icons/icon-eye.vue";
3329
3430
interface Props {
3531
label?: string,
@@ -97,39 +93,7 @@ function toggleType() {
9793
display: grid;
9894
place-content: center;
9995
cursor: pointer;
100-
}
101-
102-
.input-password-toggle-eye {
103-
box-sizing: content-box;
104-
width: 13px;
105-
height: 13px;
106-
border: solid 1px #000;
107-
border-radius: 75% 15%;
108-
position: relative;
109-
transform: rotate(45deg);
110-
}
111-
112-
.input-password-toggle-eye:before {
113-
content: '';
114-
display: block;
115-
position: absolute;
116-
width: 5px;
117-
height: 5px;
118-
border: solid 1px #000;
119-
border-radius: 50%;
120-
left: 3px;
121-
top: 3px;
122-
}
123-
124-
.input-password-toggle-eye_cross:after {
125-
content: '';
126-
display: block;
127-
position: absolute;
128-
height: 1px;
129-
width: 16px;
130-
background-color: black;
131-
left: -21%;
132-
top: 48%;
96+
stroke: var(--vf-input-gray-deep);
13397
}
13498
13599
.container-input-password_error {

0 commit comments

Comments
 (0)