refactor: Update input-tel

examples/all-inputs/App.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<h2>Input Text</h2>
 		<input-field name = "username"/>
 		<input-field name = "username" label = "With label"/>
 		<input-field name = "username" label = "Disabled" disabled/>
@@ -9,6 +10,21 @@
 		<input-field name = "username" label = "Error array" :errors = "['Some mistake', 'Length more then 5']"/>
 		<input-field name = "username" label = "Prefix" prefix = "Login:"/>
 		<input-field name = "username" label = "Placeholder" placeholder = "Write something"/>
+
+		<h2>Input Textarea</h2>
+		<input-field name = "description" type = "textarea"/>
+		<input-field name = "description" type = "textarea" label = "With label"/>
+		<input-field name = "description" type = "textarea" label = "Disabled" disabled/>
+		<input-field name = "description" type = "textarea" label = "With Error" :errors = "['Some mistake']"/>
+		<input-field name = "description" type = "textarea" label = "Placeholder" placeholder = "Add information about user." />
+		<input-field name = "description" type = "textarea" label = "Auto resize" autoresize  />
+
+		<h2>Input Tel</h2>
+		<input-field name = "phone" type = "tel"/>
+		<input-field name = "phone" type = "tel" label = "With label"/>
+		<input-field name = "phone" type = "tel" label = "Disabled" disabled/>
+		<input-field name = "phone" type = "tel" label = "With Error" :errors = "['Some mistake']"/>
+		<input-field name = "phone" type = "tel" label = "Placeholder" placeholder = "Add information about user." />
 	</div>
 </template>
 

plugin/styles/main.css

@@ -1,20 +1,37 @@
 :root {
-    --vf-input-error:          #fa5c5c;
-    --vf-input-gray-light:     #c8c8c8;
-    --vf-input-gray-dark:      #b2b2b2;
-    --vf-input-background-disabled:       #e9e9e9;
-    --vf-input-black-dark: #333;
-    --vf-input-black-light: #646363;
+    --vf-input-active:                      #4e74ff;
+    --vf-input-active-disabled:             #bac7f8;
+    --vf-input-error:                       #fa5c5c;
+    --vf-input-white-light:                 #f6f6f6;
+    --vf-input-white-dark:                  #dadada;
+    --vf-input-gray-light:                  #c8c8c8;
+    --vf-input-gray-dark:                   #b2b2b2;
+    --vf-input-black-dark:                  #333333;
+    --vf-input-black-light:                 #646363;
+    --vf-input-color:                       #1c1c1c;
+    --vf-input-background:                  #ffffff;
+    --vf-input-background-disabled:         #e9e9e9;
+
     --vf-input-border-color: var(--vf-input-gray-light);
     --vf-input-border-color-focus: var(--vf-input-gray-dark);
-    --vf-input-color: #1c1c1c;
+
     --vf-input-font-size: 13.333px;
     --vf-input-border-radius: 4px;
-    --vf-input-active: #4e74ff;
-    --vf-input-active-disabled: #bac7f8;
+
     --vf-input-height: 35px;
-    --vf-input-background: #fff;
+
     --vf-input-border: 1px solid var(--vf-input-border-color);
     --vf-input-border-error: 1px solid var(--vf-input-error);
+    --vf-input-border-focus: 1px solid var(--vf-input-border-color-focus);
     --vf-input-label-color: var(--vf-input-black-dark);
+    --vf-input-transtion-fast: 0.1s;
+}
+.vf-input_clean {
+    border: 0;
+    outline: none;
+    background-color: transparent;
+}
+.vf-grid-center {
+    display: grid;
+    place-content: center;
 }

plugin/widgets/inputs/input-tel/widget-input-tel-code.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class = "container-code">
-        <img class = "tel-code" alt = "current tel code" :src = "`https://flagcdn.com/${countryCode}.svg`" width="24"
+    <div class = "container-input-tel-code vf-grid-center">
+        <img class = "input-tel-code" alt = "current tel code" :src = "`https://flagcdn.com/${countryCode}.svg`" width="24"
             v-if = "countryCode"
         />
-        <div class = "container-default-code tel-code" v-else>
-            <span>?</span>
+        <div class = "container-input-tel-code-default vf-grid-center" v-else>
+			<span>&#63;</span>
         </div>
     </div>
 </template>
@@ -16,26 +16,21 @@
 </script>
 
 <style scoped>
-    .container-code{
+    .container-input-tel-code{
         padding: 0 10px;
-        display: grid;
-        place-content: center;
     }
-    .container-default-code{
-        width:  24px;
-        height: 16px;
-		display: grid;
-
-        background-color: #dadada;
-        text-align: center;
-    }
-
-    .tel-code{
+    .input-tel-code{
         user-select: none;
-        border: 1px solid #f6f6f6;
+        border: 1px solid var(--vf-input-white-light);
     }
-	.container-default-code>span{
-		color: gray;
+	.container-input-tel-code-default{
+		width:  24px;
+		height: 16px;
+
+		background-color: var(--vf-input-white-dark);
+	}
+	.container-input-tel-code-default>span{
+		color: var(--vf-input-black-light);
 		font-size: 11px;
 		line-height: 13px;
 	}

plugin/widgets/inputs/input-tel/widget-input-tel.vue

@@ -1,11 +1,11 @@
 <template>
     <widget-wrap :label = "label" :errors = "errors">
         <div class = "container-input-tel" @click = "inputTel?.focus()"             :class = "{
-                    'input-tel_disabled': disabled,
-                    'input-tel_error': errors.length
+                    'container-input-tel_disabled': disabled,
+                    'container-input-tel_error': errors.length
                 }">
             <widget-input-tel-code :country-code="countryCode"/>
-            <input type = "text" class = "input-tel" ref = "inputTel"
+            <input type = "text" class = "vf-input_clean input-tel" ref = "inputTel"
                    @input = "onInput"
                    :value = "prettyValue"
                    :disabled = "disabled"
@@ -75,27 +75,24 @@ function onInput(e: any) {
 <style scoped>
     .container-input-tel{
         display: flex;
-        height: 35px;
-        max-height: 35px;
+        height: var(--vf-input-height);
 
 	    border-radius: var(--vf-input-border-radius);
-	    border: 1px solid var(--vf-input-border-color);
-        background-color: white;
+	    border: var(--vf-input-border);
+        background-color: var(--vf-input-background);
     }
-    .input-tel_disabled{
+    .container-input-tel_disabled{
 	    background-color: var(--vf-input-background-disabled);
     }
+	.container-input-tel:focus-within {
+		border: var(--vf-input-border-focus);
+	}
     .input-tel{
-        border: 0;
-        outline: none;
-        background-color: transparent;
-
+		font-size: var(--vf-input-font-size);
 	    color: var(--vf-input-color);
         flex-grow: 1;
-		width: 100%;
-		font-size: var(--vf-input-font-size);
     }
-	.input-tel_error{
-		border: 1px solid var(--vf-input-error);
+	.container-input-tel_error {
+		border: var(--vf-input-border-error);
 	}
 </style>

plugin/widgets/inputs/input-text/widget-input-text.vue

@@ -1,16 +1,16 @@
 <template>
 	<input-wrap :label="label" :errors="errors">
 		<div
-			class = "container-widget-input-text"
+			class = "container-input-text"
 			:class="{
-					'container-widget-input-text_error': errors.length !== 0,
-					'container-widget-input-text_disabled': disabled
+					'container-input-text_error': errors.length !== 0,
+					'container-input-text_disabled': disabled
 			}"
 		>
-			<span class = "widget-input-text-prefix" v-if = "prefix">{{prefix}}</span>
+			<span class = "input-text-prefix" v-if = "prefix">{{prefix}}</span>
 			<input
 				ref="refInput"
-				class="widget-input-text"
+				class="vf-input_clean input-text"
 				type="text"
 				:value="pretty(modelValue)"
 				:disabled="disabled"
@@ -70,33 +70,30 @@ watch(() => props.maxLength, () => onInput(props.modelValue));
 </script>
 
 <style scoped>
-.container-widget-input-text {
+.container-input-text {
 	display: flex;
 	height: var(--vf-input-height);
 	border-radius: var(--vf-input-border-radius);
 	border: var(--vf-input-border);
 	background-color: var(--vf-input-background);
 }
-.container-widget-input-text:focus-within {
+.container-input-text:focus-within {
 	border-color: var(--vf-input-gray-dark);
 }
-.container-widget-input-text_disabled {
+.container-input-text_disabled {
 	background-color: var(--vf-input-background-disabled);
 }
-.container-widget-input-text_error {
+.container-input-text_error {
 	border: var(--vf-input-border-error);
 }
-.widget-input-text-prefix {
+.input-text-prefix {
 	color: #646363;
 	line-height: var(--vf-input-height);
 	font-size: var(--vf-input-font-size);
 	padding: 0 0 0 4px;
 }
-.widget-input-text {
+.input-text {
 	flex-grow: 1;
-	outline: none;
-	border: 0;
-	background-color: transparent;
 	padding: 0 4px;
 	color: var(--vf-input-color);
 	font-size: var(--vf-input-font-size);

plugin/widgets/inputs/input-textarea/widget-input-textarea.vue

@@ -2,7 +2,7 @@
 	<input-wrap :label="label" :errors="errors">
     <textarea
 		ref="refInput"
-		class="widget-input-textarea"
+		class="input-textarea"
 		:value="modelValue"
 		@input="onInput($event.target.value)"
 		:disabled="disabled"
@@ -73,29 +73,25 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.widget-input-textarea {
+.input-textarea {
 	border-radius: var(--vf-input-border-radius);
-	border: 1px solid var(--vf-input-border-color);
-	transition: border-color 0.1s;
+	border: var(--vf-input-border);
+	transition: border-color var(--vf-input-transtion-fast);
 	outline: none;
 	max-width: 100%;
 	padding: 4px;
 	box-sizing: border-box;
 	min-height: 70px;
-	line-height: 20px;
 	font-size: var(--vf-input-font-size);
-	background-color: white;
+	background-color: var(--vf-input-background);
 	color: var(--vf-input-color);
 }
-
-.widget-input-textarea:focus {
+.input-textarea:focus {
 	border-color: var(--vf-input-border-color-focus);
 }
-
-.widget-input-textarea:disabled {
+.input-textarea:disabled {
 	background-color: var(--vf-input-background-disabled)
 }
-
 .input-textarea_error {
 	border-color: var(--vf-input-error);
 }

plugin/widgets/inputs/input-wrap.vue

@@ -22,7 +22,8 @@
 
 <style scoped>
     .container-input-wrap{
-
+        display: flex;
+        flex-direction: column;
     }
     .container-input-wrap-label{
         color: var(--vf-input-label-color);