adata-ui 0.1.19 → 0.1.23

package/package.json

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

package/src/assets/_text_field.scss

@@ -42,7 +42,7 @@
 
   &__error {
     text-align: left;
-    font-size: var(--fs-content-micro);
+    font-size: 10px;
     line-height: 14px;
     color: #ff2e43;
     margin-top: 9px;
@@ -69,7 +69,7 @@
     border-radius: 2px;
     width: 100%;
     height: 40px;
-    font-size: var(--fs-form);
+    font-size: 14px;
     color: #1A2030;
     padding: 19px 40px 5px 16px;
     transition: 0.3s all;
@@ -77,7 +77,7 @@
       padding: 19px 36px 7px 12px;
       height: 40px;
       border: 1px solid #71757A;
-      font-size: var(--fs-content-mini);
+      font-size: 12px;
     }
 
     &:focus ~ #{$self}__label,
@@ -85,20 +85,20 @@
     &:-webkit-autofill ~ #{$self}__label,
     &:not(:-webkit-autofill):valid ~ #{$self}__label {
       top: 12px;
-      font-size: var(--fs-content-micro);
+      font-size: 10px;
       color: #71757A;
       @media(max-width: 1025px) {
-        font-size: var(--fs-content-nano);
+        font-size: 8px;
       }
     }
 
     &:focus ~ #{$self}__label-red,
     &:not(:focus):valid ~ #{$self}__label-red {
       top: 12px;
-      font-size: var(--fs-content-micro);
+      font-size: 10px;
       color: #ff2e43;
       @media(max-width: 1025px) {
-        font-size: var(--fs-content-nano);
+        font-size: 8px;
       }
     }
 
@@ -126,10 +126,10 @@
     line-height: 40px;
     transition: 0.3s;
     color: #71757A;
-    font-size: var(--fs-form-placeholder);
+    font-size: 12px;
     @media(max-width: 1025px) {
       left: 12px;
-      font-size: var(--fs-content-micro);
+      font-size: 10px;
       line-height: 16px;
       color: #71757A;
     }
@@ -146,11 +146,11 @@
     line-height: 40px;
     transition: 0.3s;
     color: #ff2e43;
-    font-size: var(--fs-form-placeholder);
+    font-size: 12px;
 
     @media(max-width: 1025px) {
       left: 12px;
-      font-size: var(--fs-content-micro);
+      font-size: 10px;
       line-height: 16px;
       color: #ff2e43;
     }
@@ -198,7 +198,7 @@
       padding: 5px 16px;
       line-height: 16px;
       font-size: 14px;
-      color: var(--newGray);
+      color: #71757a;
       transition: 0.3s all;
       cursor: pointer;
       @media(max-width: 1025px) {

package/src/components/Header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="a-header" :class="[{'bordered': isBordered}, {'fixed': isFixed}]">
+  <header v-if="windowOpen" class="a-header" :class="[{'bordered': isBordered}, {'fixed': isFixed}]">
     <div class="container">
       <div class="a-header__left">
         <a class="logo" :href="toAdtdev('https://adata.kz')">
@@ -130,6 +130,7 @@ export default {
   data() {
     return {
       profileDropDown,
+      windowOpen: false,
       subheaderItems: [
         {
           id: 1,
@@ -156,11 +157,15 @@ export default {
     };
   },
   mounted() {
+    this.windowOpen = true;
     this.setBalance(this.balance);
   },
   computed: {
     locationUrl() {
-      return window.location.href;
+      if (window)
+        return window.location.href;
+      else
+        return ''
     }
   },
   methods: {

package/src/components/PasswordField/PasswordField.vue

@@ -31,6 +31,11 @@
       </div>
     </div>
     <div class="adt-text-block__error" v-if="!!errorText">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon__attention">
+        <path d="M8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4H8.5ZM7.5 9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9H7.5ZM7.5 4V9H8.5V4H7.5Z" fill="#FF2E43"/>
+        <path d="M8.5 11C8.5 10.7239 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.7239 7.5 11H8.5ZM7.5 11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5H7.5ZM7.5 11V11.5H8.5V11H7.5Z" fill="#FF2E43"/>
+        <circle cx="8" cy="8" r="7" stroke="#FF2E43"/>
+      </svg>
       {{ errorText }}
     </div>
   </div>

package/src/components/SearchTextField/SearchTextField.stories.js

@@ -4,19 +4,14 @@ export default {
     title: 'SearchTextField',
     component: ASearchTextField,
     data: () => ({ value: "" }),
-    methods: {
-      inputHandle(val) {
-          console.log(val);
-      }
-    },
-    template: "<a-search-text-field v-model='value' @input='inputHandle' label='Example'></a-search-text-field>>"
+    template: "<a-search-text-field @input='(val) => {this.value = val}' label='Example'></a-search-text-field>>"
 }
 
+
 const Template = (args, { argTypes }) => ({
     components: { ASearchTextField },
     props: Object.keys(argTypes),
-    data: () => ({ val: "" }),
-    template: '<a-search-text-field v-model="val" v-bind="$props"></a-search-text-field>'
+    template: '<a-search-text-field  v-bind="$props"></a-search-text-field>'
 })
 
 export const WithIcon = Template.bind({});

package/src/components/SearchTextField/SearchTextField.vue

@@ -10,8 +10,7 @@
           :type="type"
           :value="value"
           required
-          @input="inputHandler($event)"
-          @keydown="handleKeyDown"
+          @input="$emit('input', $event.target.value)"
           @keypress.enter="$emit('enterPressed')"
           @focus="showAutocomplete = true"
           @click="$emit('showVTour')"
@@ -30,7 +29,7 @@
       >
         {{ label }}
       </label>
-      <div class="mobile-magnifier" v-if="magnifierMob" @click="$emit('onMagnifierClick')">
+      <div class="mobile mobile-magnifier" v-if="magnifierMob" @click="$emit('onMagnifierClick')">
         <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="magnifier">
           <path d="M13.95 13.95L10 10" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
           </path>
@@ -91,6 +90,7 @@ export default {
     value: {
       type: String,
       required: true,
+      default: ""
     },
     clearable: {
       type: Boolean,
@@ -179,13 +179,6 @@ export default {
       autocompleteOption.setAttribute("id", 'searchVariant');
       return autocompleteOption.innerText;
     },
-    handleKeyDown(e) {
-      if (+e.keyCode === 9) this.showAutocomplete = false;
-      const specialKeys = [8, 188, 190, 110] // 8 - Backspace, 188 - ",", 190 and 110 - "."
-      const charCode = e.keyCode
-      if ((charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105) || specialKeys.indexOf(charCode) !== -1) return;
-      else e.preventDefault()
-    },
     inputHandler(e) {
       this.$emit('input', e.target.value);
       this.showAutocomplete = true;

package/src/components/TextField/TextField.vue

@@ -37,6 +37,11 @@
       </div>
     </div>
     <div class="adt-text-block__error" v-if="!!errorText">
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon__attention">
+        <path d="M8.5 4C8.5 3.72386 8.27614 3.5 8 3.5C7.72386 3.5 7.5 3.72386 7.5 4H8.5ZM7.5 9C7.5 9.27614 7.72386 9.5 8 9.5C8.27614 9.5 8.5 9.27614 8.5 9H7.5ZM7.5 4V9H8.5V4H7.5Z" fill="#FF2E43"/>
+        <path d="M8.5 11C8.5 10.7239 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.7239 7.5 11H8.5ZM7.5 11.5C7.5 11.7761 7.72386 12 8 12C8.27614 12 8.5 11.7761 8.5 11.5H7.5ZM7.5 11V11.5H8.5V11H7.5Z" fill="#FF2E43"/>
+        <circle cx="8" cy="8" r="7" stroke="#FF2E43"/>
+      </svg>
       {{ errorText }}
     </div>
   </div>

package/src/components/index.js

@@ -6,6 +6,7 @@ import AAlert from './Alert/Alert'
 import AHeader from './Header/Header'
 import AFooter from './Footer/Footer'
 import ASearchTextField from './SearchTextField/SearchTextField'
+
 const Components = {
     AButton,
     ATextField,