adata-ui 0.1.17 → 0.1.21

package/src/components/TextField/TextField.vue

@@ -27,8 +27,10 @@
           class="adt-text-block__input"
           :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label">{{ label }}<span v-if="required" class="adt-text-block__required">*</span></label>
-      <div class="adt-text-block__icon desktop" v-if="clearable && value && value.length > 0" @click="$emit('input', '')">
+      <label class="adt-text-block__label">{{ label }}<span v-if="required"
+                                                            class="adt-text-block__required">*</span></label>
+      <div class="adt-text-block__icon desktop" v-if="clearable && value && value.length > 0"
+           @click="$emit('input', '')">
         <svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="clearIcon">
           <path d="M2 2l12 12m0-12L2 14" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"></path>
         </svg>
@@ -39,9 +41,9 @@
     </div>
   </div>
 </template>
-
 <script>
-import { TheMask } from 'vue-the-mask';
+import '../../assets/style.scss';
+import {TheMask} from 'vue-the-mask';
 
 export default {
   name: "TextField",
@@ -93,263 +95,4 @@ export default {
     }
   }
 }
-</script>
-
-<style lang="scss">
-*:focus {
-  outline: none;
-}
-
-.adt-text-block {
-  $self: &;
-  position: relative;
-  width: 100%;
-
-  &.magnifier {
-    #{$self}__input {
-      padding: 19px 40px 5px 40px;
-    }
-
-    #{$self}__label {
-      left: 40px;
-    }
-  }
-
-  &.magnifier-mobile {
-    #{$self}__magnifier {
-      display: block;
-    }
-
-    #{$self}__input {
-      padding: 19px 8px 5px 11px;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      -webkit-appearance: none;
-    }
-
-    #{$self}__label {
-      left: 12px;
-    }
-  }
-
-  &__input-mob-search {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    -webkit-appearance: none;
-  }
-
-  &__error {
-    text-align: left;
-    font-size: var(--fs-content-micro);
-    line-height: 14px;
-    color: #ff2e43;
-    margin-top: 6px;
-  }
-
-  &__field {
-    position: relative;
-    overflow: hidden;
-    @media(max-width: 1025px) {
-      width: 100%;
-      display: flex;
-    }
-  }
-
-  &__input {
-    background: #ffffff;
-    border: 1px solid #c4c4c4;
-    box-sizing: border-box;
-    border-radius: 2px;
-    width: 100%;
-    height: 40px;
-    font-size: var(--fs-form);
-    color: #1A2030;
-    padding: 19px 40px 5px 16px;
-    transition: 0.3s all;
-    @media(max-width: 1025px) {
-      padding: 19px 36px 7px 12px;
-      height: 40px;
-      border: 1px solid #71757A;
-      font-size: var(--fs-content-mini);
-    }
-
-    &:focus ~ #{$self}__label,
-    &:not(:focus):valid ~ #{$self}__label {
-      top: 12px;
-      font-size: var(--fs-content-micro);
-      color: #71757A;
-      @media(max-width: 1025px) {
-        font-size: var(--fs-content-nano);
-      }
-    }
-
-    &:focus {
-      border: 1px solid #2c3e50;
-    }
-
-    &::placeholder {
-      font-size: 12px;
-    }
-
-    &.error {
-      background: #ff2e431f;
-    }
-  }
-
-  &__label {
-    position: absolute;
-    pointer-events: none;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    white-space: nowrap;
-    overflow: hidden;
-    line-height: 40px;
-    transition: 0.3s;
-    color: #71757A;
-    font-size: var(--fs-form-placeholder);
-    @media(max-width: 1025px) {
-      left: 12px;
-      font-size: var(--fs-content-micro);
-      line-height: 16px;
-      color: #71757A;
-    }
-  }
-
-  &__icon {
-    position: absolute;
-    right: 16px;
-    height: 100%;
-    top: 0;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__required {
-    color: #FF000087;
-  }
-
-  &__options {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    width: 100%;
-    background: #fff;
-    z-index: 1000;
-    border-radius: 2px;
-    border: 1px solid #71757A;
-    padding: 12px 0;
-    @media(max-width: 1025px) {
-      overflow: auto;
-    }
-
-    #searchVariant {
-      background: #eef0f5;
-    }
-  }
-
-  .search-options {
-    &__item {
-      padding: 5px 16px;
-      line-height: 16px;
-      font-size: 14px;
-      color: var(--newGray);
-      transition: 0.3s all;
-      cursor: pointer;
-      @media(max-width: 1025px) {
-        font-size: 10px;
-      }
-
-      &:hover {
-        background: #eef0f5;
-      }
-    }
-  }
-
-  .mobile-magnifier {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 40px;
-    width: 40px;
-    min-width: 40px;
-    border: 1px solid #71757A;
-    border-radius: 0 2px 2px 0;
-    border-left: none;
-    background: #FFCD33;
-  }
-
-  &__input-mob-filter {
-    background: #ffffff;
-    border: 1px solid #71757A;
-    border-bottom: none;
-    box-sizing: border-box;
-    border-radius: 2px;
-    width: 100%;
-    height: 48px;
-    font-size: 16px;
-    line-height: 19px;
-    display: flex;
-    align-items: center;
-    color: #1A2030;
-    padding: 19px 40px 5px 16px;
-    transition: 0.3s all;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    &:focus ~ #{$self}__label-mob-filter,
-    &:not(:focus):valid ~ #{$self}__label-mob-filter {
-      top: 11px;
-      font-size: 10px;
-      color: #71757A;
-      @media(max-width: 1025px) {
-        font-size: 7px;
-      }
-    }
-
-    &:focus {
-      border: 1px solid #2c3e50;
-    }
-
-    &::placeholder {
-      font-size: 12px;
-    }
-
-    &.error {
-      background: #ff2e431f;
-    }
-  }
-
-  &__label-mob-filter {
-    position: absolute;
-    pointer-events: none;
-    left: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    white-space: nowrap;
-    overflow: hidden;
-    line-height: 40px;
-    transition: 0.3s;
-    color: #71757A;
-    @media(max-width: 1025px) {
-      left: 16px;
-      font-size: 14px;
-      line-height: 16px;
-      color: #71757A;
-    }
-
-    &__red {
-      color: rgba(255, 0, 0, 0.53);
-    }
-  }
-  &__magnifier {
-    left: 8px;
-    width: fit-content;
-  }
-}
-</style>
+</script>

package/src/components/index.js

@@ -5,13 +5,15 @@ import APasswordField from './PasswordField/PasswordField'
 import AAlert from './Alert/Alert'
 import AHeader from './Header/Header'
 import AFooter from './Footer/Footer'
+import ASearchTextField from './SearchTextField/SearchTextField'
 const Components = {
     AButton,
     ATextField,
     APasswordField,
     AAlert,
     AHeader,
-    AFooter
+    AFooter,
+    ASearchTextField
 };
 
 Object.keys(Components).forEach(name => {

package/src/configs/navigationBarConfig.js

@@ -1,22 +0,0 @@
-export const menuList = [
-  {
-    id: 1,
-    name: "Контрагенты",
-    url: 'https://pk.adata.kz',
-  },
-  {
-    id: 2,
-    name: "Тендеры",
-    url: 'https://tender.adata.kz',
-  },
-  {
-    id: 3,
-    name: "Работа",
-    url: 'https://work.adata.kz',
-  },
-  {
-    id: 4,
-    name: "Штрафы",
-    url: 'https://avto.adata.kz',
-  }
-];