adata-ui 0.1.86 → 0.1.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.86",
+  "version": "0.1.89",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/_text_field.scss

@@ -56,13 +56,14 @@
   &__field {
     position: relative;
     overflow: hidden;
-    @media(max-width: 1025px) {
+    @media (max-width: 1025px) {
       width: 100%;
       display: flex;
     }
   }
 
-  &__input, &__textarea textarea {
+  &__input,
+  &__textarea textarea {
     background: #ffffff;
     border: 0.5px solid #c4c4c4;
     box-sizing: border-box;
@@ -70,10 +71,10 @@
     width: 100%;
     height: 40px;
     font-size: 14px;
-    color: #1A2030;
+    color: #1a2030;
     padding: 19px 40px 5px 16px;
     transition: 0.3s all;
-    @media(max-width: 1025px) {
+    @media (max-width: 1025px) {
       padding: 19px 36px 7px 12px;
       height: 40px;
       font-size: 12px;
@@ -85,29 +86,24 @@
     &:not(:-webkit-autofill):valid ~ #{$self}__label {
       top: 12px;
       font-size: 10px;
-      color: #71757A;
+      color: #71757a;
       text-overflow: inherit;
       width: 100%;
-      @media(max-width: 1025px) {
+      @media (max-width: 1025px) {
         font-size: 8px;
       }
     }
     &:hover {
-      border: 0.5px solid #2C3E50;
+      border: 0.5px solid #2c3e50;
     }
 
     &:focus {
-      border: 0.5px solid #2C3E50;
+      border: 0.5px solid #2c3e50;
     }
 
     &::placeholder {
       font-size: 12px;
     }
-
-    &.error {
-      border: 1px solid #FF2E43;
-      background: #ff2e431f;
-    }
   }
 
   &__textarea {
@@ -118,14 +114,25 @@
     justify-content: flex-end;
     position: relative;
     overflow: hidden;
-    &:focus, &:hover {
-      border: 0.5px solid #2C3E50;
+    &--error {
+      border: none;
+      border: 0.5px solid #ff2e43;
+      background: #ff2e431f;
+      textarea {
+        background: transparent;
+      }
+    }
+    &:focus,
+    &:hover {
+      border: 0.5px solid #2c3e50;
     }
     textarea {
       border: none;
       height: 92px;
       padding: 0 40px 5px 16px;
-      &:focus, &:hover {
+      resize: none;
+      &:focus,
+      &:hover {
         border: none;
       }
     }
@@ -144,21 +151,16 @@
     overflow: hidden;
     line-height: 40px;
     transition: 0.3s;
-    color: #71757A;
+    color: #71757a;
     font-size: 14px;
-    @media(max-width: 1025px) {
+    @media (max-width: 1025px) {
       left: 12px;
       font-size: 14px;
       line-height: 16px;
-      color: #71757A;
+      color: #71757a;
     }
   }
 
-  &__textarea {
-    min-height: 120px;
-    resize: none;
-  }
-
   &__textarea + label {
     top: 20px;
   }
@@ -183,7 +185,7 @@
   }
 
   &__required {
-    color: #FF2E43;
+    color: #ff2e43;
   }
 
   &__options {
@@ -211,7 +213,7 @@
       color: #71757a;
       transition: 0.3s all;
       cursor: pointer;
-      @media(max-width: 1025px) {
+      @media (max-width: 1025px) {
         font-size: 12px;
       }
 

package/src/components/Button/AButton.vue

@@ -95,6 +95,7 @@ export default {
       height: 24px;
       padding: 2px 16px;
       line-height: 20px;
+      font-size: 12px;
     }
     &_sm {
       height: 32px;

package/src/components/Footer/Footer.vue

@@ -31,7 +31,7 @@
             </svg>
           </a>
           <a target="_blank" rel="nofollow"
-             href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/about">
+             href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured">
             <svg fill="none" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 16 16" class="social__icon">
               <path fill-rule="evenodd" clip-rule="evenodd"

package/src/components/Header/Header.vue

@@ -38,6 +38,7 @@
               {{ item.name }}
             </a>
           </div>
+          <slot name="mobileSearch"></slot>
         </div>
         <div class="header__right" v-show="!noAuth">
           <slot name="chooseCountry"></slot>

package/src/components/PasswordField/PasswordField.vue

@@ -2,6 +2,7 @@
   <div class="adt-text-block">
     <div class="adt-text-block__field">
       <input
+        :id="id"
         ref="input"
         :type="type"
         :value="value"
@@ -10,7 +11,7 @@
         class="adt-text-block__input"
         :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label">{{ label }}</label>
+      <label :for="id" class="adt-text-block__label">{{ label }}</label>
       <div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
         <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
           <path
@@ -47,6 +48,10 @@ import '../../assets/style.scss';
 export default {
   name: "PasswordField",
   props: {
+    id: {
+      type: String,
+      default: ""
+    },
     errorText: {
       type: String,
       default: ""

package/src/components/SearchTextField/SearchTextField.vue

@@ -6,6 +6,7 @@
   >
     <div :class="['adt-text-block__field', { error: !!errorText }]">
       <input
+        :id="id"
         ref="input"
         :type="type"
         :value="value"
@@ -19,7 +20,7 @@
         class="adt-text-block__input"
         :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
+      <label :for="id" class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
         {{ label }}
       </label>
       <div
@@ -101,6 +102,10 @@ export default {
     clickOutside: vClickOutside.directive,
   },
   props: {
+    id: {
+      type: String,
+      default: ""
+    },
     errorText: {
       type: String,
       default: "",

package/src/components/TextArea/TextArea.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="adt-text-block__textarea">
+  <div class="adt-text-block__wrapper">
+    <div
+      class="adt-text-block__textarea"
+      :class="{ 'adt-text-block__textarea--error': !!errorText }"
+    >
       <textarea
+        :id="id"
         ref="textarea"
         :type="type"
         :value="value"
@@ -8,9 +13,12 @@
         required
         @input="$emit('input', $event.target.value)"
         @keyup.enter="enterPressed"
-        :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
+      <label
+         :for="id"
+        class="adt-text-block__label"
+        :class="{ 'adt-text-block--ellipsis': isEllipsis }"
+      >
         {{ label }}
         <span v-if="required" class="adt-text-block__required">*</span>
       </label>
@@ -34,6 +42,7 @@
             stroke-linejoin="round"
           ></path>
         </svg>
+      </div>
     </div>
     <div class="adt-text-block__error" v-if="!!errorText">
       <svg
@@ -64,6 +73,10 @@ import "../../assets/style.scss";
 export default {
   name: "TextArea",
   props: {
+    id: {
+      type: String,
+      default: ""
+    },
     errorText: {
       type: String,
       default: "",
@@ -95,7 +108,7 @@ export default {
     isEllipsis: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {

package/src/components/TextField/TextField.vue

@@ -2,6 +2,7 @@
   <div class="adt-text-block">
     <div :class="['adt-text-block__field', { error: !!errorText }]">
       <input
+        :id="id"
         ref="input"
         :type="type"
         :value="value"
@@ -12,7 +13,7 @@
         class="adt-text-block__input"
         :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label">
+      <label :for="id" class="adt-text-block__label">
         {{ label }}
         <span v-if="required" class="adt-text-block__required">*</span>
       </label>
@@ -67,6 +68,10 @@ import "../../assets/style.scss";
 export default {
   name: "TextField",
   props: {
+    id: {
+      type: String,
+      default: ""
+    },
     errorText: {
       type: String,
       default: "",