fix: update icons, #181

Jenesius · Nov 18, 2023 · 923828b · 923828b
1 parent a00c08e
commit 923828b
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 104 deletions.
diff --git a/examples/disable-enable-form/App.vue b/examples/disable-enable-form/App.vue
@@ -1,16 +1,15 @@
 <template>
-  <div class = "container">
-      <div class = "wrap-app">
-        <h2>Disable/Enable Form</h2>
-        <input-field name = "username" label = "Username" />
-        <input-field name = "country.code" label = "Country Code" type = "select" :options = "languageOptions"/>
-        <input-field name = "country.name" label = "Country Name"/>
-        <button class = "button" @click = "handleMain">{{mainButton}}</button>
-        <button class = "button" @click = "handleUsername">Disable/Enable username</button>
-        <button class = "button" @click = "handleCountry">Disable/Enable country</button>
-      </div>
-
-  </div>
+	<div class="container">
+		<div class="wrap-app">
+			<h2>Disable/Enable Form</h2>
+			<input-field name="username" label="Username"/>
+			<input-field name="country.code" label="Country Code" type="select" :options="languageOptions"/>
+			<input-field name="country.name" label="Country Name"/>
+			<button class="button" @click="handleMain">{{ mainButton }}</button>
+			<button class="button" @click="handleUsername">Disable/Enable username</button>
+			<button class="button" @click="handleCountry">Disable/Enable country</button>
+		</div>
+	</div>
 </template>
 
 <script setup lang='ts'>
@@ -23,54 +22,60 @@ const formState = useFormState(form);
 const mainButton = computed(() => (formState.disabled ? 'Enable' : 'Disable') + ' Form')
 
 function handleMain() {
-  (form.disabled) ? form.enable() : form.disable()
+	(form.disabled) ? form.enable() : form.disable()
 }
+
 function handleUsername() {
-  (form.checkFieldDisable('username')) ? form.enable('username') : form.disable('username')
+	(form.checkFieldDisable('username')) ? form.enable('username') : form.disable('username')
 }
+
 function handleCountry() {
-  (form.checkFieldDisable('country')) ? form.enable('country') : form.disable('country')
+	(form.checkFieldDisable('country')) ? form.enable('country') : form.disable('country')
 }
 
 
 const languageOptions = {
-  1: "English",
-  2: "Dutch",
-  3: "Chinese",
-  4: "Portuguese",
-  5: "Spanish",
-  6: "Italian",
-  7: "Russian"
+	1: "English",
+	2: "Dutch",
+	3: "Chinese",
+	4: "Portuguese",
+	5: "Spanish",
+	6: "Italian",
+	7: "Russian"
 }
 
 
 </script>
 
 <style scoped>
-.container{
-  display: flex;
+.container {
+	display: flex;
 }
-.wrap-app{
-  width: 100%;
-  max-width: 600px;
-  margin:  auto auto;
+
+.wrap-app {
+	width: 100%;
+	max-width: 600px;
+	margin: auto auto;
 }
 
-.padding_10{
-  padding: 10px 0;
+.padding_10 {
+	padding: 10px 0;
 }
-.container-values{
-  width: 300px;
-  padding: 20px 0;
+
+.container-values {
+	width: 300px;
+	padding: 20px 0;
 }
-.button{
-  cursor: pointer;
-  padding: 6px 10px;
-  border: 1px solid lightgray;
-  background-color: white;
-  transition: transform;
+
+.button {
+	cursor: pointer;
+	padding: 6px 10px;
+	border: 1px solid lightgray;
+	background-color: white;
+	transition: transform;
 }
+
 .button:hover {
-  transform: scale(.96);
+	transform: scale(.96);
 }
 </style>
diff --git a/project/pages/inputs/App.vue b/project/pages/inputs/App.vue
@@ -1,26 +1,27 @@
 <template>
 	<div class="container-examples">
-		<input-field type = "single-checkbox" name = "check" label = "Test" 	/>
-		<input-field type = "single-checkbox" name = "check-with-values" label = "Values" :values = "['A', 'R']" />
-		<input-field type = "text" name = "test" label = "Test" prefix = "V89"	required/>
-		<input-field type = "text" name = "test" label = "Test" prefix = "V89"	disabled/>
+		<div>
+			<form-field name = "mainAddress" type = "address" />
+			<form-field name = "mainAddress.city" label = "Just city" />
+		</div>
 		{{values}}
 	</div>
 </template>
 
 <script setup lang='ts'>
 import {Form, useFormValues, InputField} from "../../../src";
+import FormField from "./../../../src/widgets/form-field.vue";
 
 const form = new Form();
 
 const values = useFormValues(form);
-
-form.validate()
-
-window.form = form;
+form.validate();
 
 </script>
 
 <style>
-
+	.container-examples {
+		display: grid;
+		gap: 10px;
+	}
 </style>
diff --git a/project/pages/inputs/input-address.vue b/project/pages/inputs/input-address.vue
@@ -0,0 +1,27 @@
+<template>
+	<div class = "input-address">
+		<form-field name = "country" label = "Address country"/>
+		<form-field name = "city" label = "Address city"/>
+	</div>
+</template>
+
+<script setup lang = "ts">
+import {Form, FormField} from "./../../../src/index";
+
+const props = defineProps<{
+	name: string,
+}>()
+
+const form = new Form({
+	name: props.name
+})
+</script>
+
+<style scoped>
+
+.input-address {
+	display: grid;
+	gap: 10px;
+}
+
+</style>
diff --git a/project/pages/inputs/main.ts b/project/pages/inputs/main.ts
@@ -1,4 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import {config} from "./../../../src/index";
+import InputAddress from "./input-address.vue";
+
+config({
+	inputTypes: {
+		address: InputAddress
+	}
+})
 
 createApp(App).mount('#app')
diff --git a/src/widgets/icons/README.md b/src/widgets/icons/README.md
@@ -0,0 +1,3 @@
+Try not to use icons in this library. She's still aiming
+for functional use. If an icon is needed, it
+must be described in Figma and added via a component.
diff --git a/src/widgets/icons/icon-calendar.vue b/src/widgets/icons/icon-calendar.vue
@@ -1,20 +1,17 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" id="calendar">
-		<g fill="none" fill-rule="evenodd"  stroke-linecap="round" stroke-linejoin="round"
-		   stroke-width="1.5" transform="translate(3 2)">
-			<line x1=".093" x2="17.917" y1="7.404" y2="7.404"></line>
-			<line x1="13.442" x2="13.451" y1="11.31" y2="11.31"></line>
-			<line x1="9.005" x2="9.014" y1="11.31" y2="11.31"></line>
-			<line x1="4.558" x2="4.567" y1="11.31" y2="11.31"></line>
-			<line x1="13.442" x2="13.451" y1="15.196" y2="15.196"></line>
-			<line x1="9.005" x2="9.014" y1="15.196" y2="15.196"></line>
-			<line x1="4.558" x2="4.567" y1="15.196" y2="15.196"></line>
-			<line x1="13.044" x2="13.044" y2="3.291"></line>
-			<line x1="4.966" x2="4.966" y2="3.291"></line>
-			<path
-				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>
-		</g>
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M3.093 9.40405H20.917"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M16.442 13.3101H16.451"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M12.005 13.3101H12.014"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M7.558 13.3101H7.567"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M16.442 17.196H16.451"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M12.005 17.196H12.014"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M7.558 17.196H7.567"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M16.044 2V5.291"  stroke-linecap="round" stroke-linejoin="round"/>
+		<path d="M7.966 2V5.291"  stroke-linecap="round" stroke-linejoin="round"/>
+		<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"/>
 	</svg>
+
 </template>
 
 <script>

diff --git a/src/widgets/icons/icon-eye.vue b/src/widgets/icons/icon-eye.vue
@@ -0,0 +1,19 @@
+<template>
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_208_97)">
+			<path d="M5.5 6.5L18.5 17.5" stroke-linecap="round" v-if = "crossed"/>
+			<circle cx="12" cy="12" r="3" />
+			<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" />
+		</g>
+	</svg>
+</template>
+
+<script setup lang = "ts">
+defineProps<{
+	crossed: boolean
+}>()
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/widgets/icons/icons-calendar.gif b/src/widgets/icons/icons-calendar.gif
diff --git a/src/widgets/inputs/input-date/input-date.vue b/src/widgets/inputs/input-date/input-date.vue
@@ -187,7 +187,7 @@ watch(() => props.modelValue, v => insideValue.value = v, {immediate: true})
 	cursor: pointer;
 	display: grid;
 	place-content: center;
-	stroke: var(--vf-input-gray-dark);
+	stroke: var(--vf-input-gray-deep);
 	transition: var(--vf-input-transtion-fast);
 	padding: 0 6px;
 }

diff --git a/src/widgets/inputs/input-password/widget-input-password.vue b/src/widgets/inputs/input-password/widget-input-password.vue
@@ -15,12 +15,7 @@
 				:autofocus="autofocus || false"
 			/>
 			<div class="input-password-toggle" @click="toggleType()">
-				<div
-					class="input-password-toggle-eye"
-					:class="{
-                    'input-password-toggle-eye_cross': typeInput === 'text'
-                }"
-				></div>
+				<icon-eye :crossed = "typeInput === 'text'"/>
 			</div>
 
 		</div>
@@ -30,6 +25,7 @@
 <script setup lang="ts">
 import FieldWrap from "../field-wrap.vue";
 import {ref} from "vue";
+import IconEye from "../../icons/icon-eye.vue";
 
 interface Props {
 	label?: string,
@@ -97,39 +93,7 @@ function toggleType() {
 	display: grid;
 	place-content: center;
 	cursor: pointer;
-}
-
-.input-password-toggle-eye {
-	box-sizing: content-box;
-	width: 13px;
-	height: 13px;
-	border: solid 1px #000;
-	border-radius: 75% 15%;
-	position: relative;
-	transform: rotate(45deg);
-}
-
-.input-password-toggle-eye:before {
-	content: '';
-	display: block;
-	position: absolute;
-	width: 5px;
-	height: 5px;
-	border: solid 1px #000;
-	border-radius: 50%;
-	left: 3px;
-	top: 3px;
-}
-
-.input-password-toggle-eye_cross:after {
-	content: '';
-	display: block;
-	position: absolute;
-	height: 1px;
-	width: 16px;
-	background-color: black;
-	left: -21%;
-	top: 48%;
+	stroke: var(--vf-input-gray-deep);
 }
 
 .container-input-password_error {