adata-ui 0.1.16 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.16",
+  "version": "0.1.20",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,11 +15,12 @@
     "@storybook/addons": "^6.4.14",
     "@storybook/theming": "^6.4.14",
     "core-js": "^3.6.5",
-    "node-sass": "^5.0.0",
+    "node-sass": "^4.14.1",
     "user": "0.0.0",
     "v-click-outside": "^3.1.2",
     "vue": "^2.6.11",
-    "vue-the-mask": "^0.11.1"
+    "vue-the-mask": "^0.11.1",
+    "vue2-perfect-scrollbar": "^1.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

package/src/assets/_text_field.scss

@@ -0,0 +1,295 @@
+*: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: 9px;
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 9px;
+    }
+  }
+
+  &__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,
+    &:-webkit-autofill ~ #{$self}__label,
+    &:not(:-webkit-autofill):valid ~ #{$self}__label {
+      top: 12px;
+      font-size: var(--fs-content-micro);
+      color: #71757A;
+      @media(max-width: 1025px) {
+        font-size: var(--fs-content-nano);
+      }
+    }
+
+    &:focus ~ #{$self}__label-red,
+    &:not(:focus):valid ~ #{$self}__label-red {
+      top: 12px;
+      font-size: var(--fs-content-micro);
+      color: #ff2e43;
+      @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;
+    }
+  }
+
+  &__label-red {
+    position: absolute;
+    pointer-events: none;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 40px;
+    transition: 0.3s;
+    color: #ff2e43;
+    font-size: var(--fs-form-placeholder);
+
+    @media(max-width: 1025px) {
+      left: 12px;
+      font-size: var(--fs-content-micro);
+      line-height: 16px;
+      color: #ff2e43;
+    }
+  }
+
+
+  &__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;
+  }
+}

package/src/assets/style.scss

@@ -0,0 +1 @@
+@import "text_field";

package/src/components/Header/Header.vue

@@ -13,7 +13,7 @@
                :key="index"
                class="menu__wrapper menu__items"
                :class="{active: locationUrl.includes(toAdtdev(item.url))}"
-               :href="item.url"
+               :href="toAdtdev(item.url)"
           >
             {{ item.name }}
           </a>
@@ -59,15 +59,15 @@
                   fill="#2C3E50"></path>
           </svg>
         </div>
-        <div
+        <a
             v-for="(item, index) in subheaderItems"
             :key="index"
             class="menu_mobile-wrapper"
             :class="{'active-burger-tab': locationUrl.includes(toAdtdev(item.url))}"
-            @click="handleClick(item.url)"
+            :href="toAdtdev(item.url)"
         >
           {{ item.name }}
-        </div>
+        </a>
       </div>
     </MobileToggle>
   </header>
@@ -75,7 +75,6 @@
 
 <script>
 import Profile from "./Profile";
-import { menuList } from "../../configs/navigationBarConfig";
 import { profileDropDown } from "../../configs/profileDropDown"
 import MobileToggle from "../transitions/VerticalMobileToggle";
 
@@ -131,13 +130,33 @@ export default {
   data() {
     return {
       profileDropDown,
-      subheaderItems: [],
+      subheaderItems: [
+        {
+          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',
+        }
+      ],
       isOpen: false
     };
   },
   mounted() {
     this.setBalance(this.balance);
-    this.subheaderItems = menuList;
   },
   computed: {
     locationUrl() {
@@ -160,9 +179,6 @@ export default {
     thousandSeparator(val) {
       return val ?  val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "): '';
     },
-    handleClick(url) {
-      window.open(this.toAdtdev(url), "_self");
-    }
   },
   watch: {
     balance(newBalance) {

package/src/components/PasswordField/PasswordField.vue

@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import '../../assets/style.scss';
+
 export default {
   name: "PasswordField",
   props: {

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

@@ -0,0 +1,39 @@
+import ASearchTextField from "./SearchTextField.vue";
+
+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>>"
+}
+
+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>'
+})
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+    label: "Найти то, что нужно",
+    clearable: true,
+    isWithIcon: true,
+    isTypeRequired: true,
+    options: [
+        {
+            id: 1,
+            name: "a"
+        },
+        {
+            id: 2,
+            name: "b"
+        }
+    ],
+    optionFields: ["name"]
+}

package/src/components/SearchTextField/SearchTextField.vue

@@ -0,0 +1,207 @@
+<template>
+  <div :class="[{magnifier: isWithIcon},{'magnifier-mobile': magnifierMob}]"
+       class="adt-text-block"
+       v-click-outside="onOutsideClick"
+       @keydown.down.up.prevent="onUpOrDownClicked"
+  >
+    <div class="adt-text-block__field">
+      <input
+          ref="input"
+          :type="type"
+          :value="value"
+          required
+          @input="inputHandler($event)"
+          @keydown="handleKeyDown"
+          @keypress.enter="$emit('enterPressed')"
+          @focus="showAutocomplete = true"
+          @click="$emit('showVTour')"
+          :class="[
+          {'adt-text-block__input-mob-search' : magnifierMob},
+          {'adt-text-block__input-mob-filter' : forMobileFilter},
+          {'adt-text-block__input': !forMobileFilter}
+          ]"
+      />
+      <label
+          :class="{
+          'adt-text-block__label-red' : !forMobileFilter && getIsError,
+          'adt-text-block__label' : !forMobileFilter && !getIsError,
+          'adt-text-block__label-mob-filter' : forMobileFilter,
+        }"
+      >
+        {{ label }}
+      </label>
+      <div class="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>
+          <circle cx="6.5" cy="6.5" r="4.5" stroke="#2C3E50"></circle>
+        </svg>
+      </div>
+      <div class="adt-text-block__icon adt-text-block__magnifier" v-if="isWithIcon" @click="$emit('input', '')">
+        <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>
+          <circle cx="6.5" cy="6.5" r="4.5" stroke="#2C3E50"></circle>
+        </svg>
+      </div>
+      <div class="adt-text-block__icon" 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>
+      </div>
+    </div>
+    <div class="adt-text-block__options search-options" v-show="options && options.length > 0 && showAutocomplete">
+      <PerfectScrollbar>
+        <div class="search-options__wrapper">
+          <div
+              class="search-options__item"
+              v-for="(option, index) in options"
+              :key="index"
+              @click="onAutocompleteOptionClick(option)"
+              ref="searchOptions"
+          >
+            {{ !!optionFields.length ? textByOption(option) : option }}
+            <div class="hiddenOne" v-if="option.type && isTypeRequired"> ${{ option.type }}$</div>
+          </div>
+        </div>
+      </PerfectScrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import '../../assets/style.scss';
+import { PerfectScrollbar } from "vue2-perfect-scrollbar";
+import vClickOutside from "v-click-outside";
+
+export default {
+  name: "SearchTextField",
+  directives: {
+    clickOutside: vClickOutside.directive
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    isWithIcon: {
+      type: Boolean,
+      default: false
+    },
+    magnifierMob: {
+      type: Boolean,
+      default: false
+    },
+    forMobileFilter: {
+      type: Boolean,
+      default: false
+    },
+    isTypeRequired: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    optionFields: {
+      type: Array,
+      default: null
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    },
+    getIsError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    PerfectScrollbar
+  },
+  data() {
+    return {
+      showAutocomplete: false
+    }
+  },
+  methods: {
+    onOutsideClick() {
+      if (!this.isMobile) this.showAutocomplete = false
+    },
+    onUpOrDownClicked(e) {
+      const autoCompleteOptions = this.$refs.searchOptions;
+      const length = autoCompleteOptions ? autoCompleteOptions.length : 0;
+      if (length > 0) {
+        switch (e.which) {
+          case 40:
+            this.moveOption(autoCompleteOptions, 'nextElementSibling');
+            break;
+          case 38:
+            this.moveOption(autoCompleteOptions, 'previousElementSibling');
+            break;
+        }
+      }
+    },
+    moveOption(autoCompleteOptions, elementType) {
+      const selectedOption = autoCompleteOptions.find((option) => option.hasAttribute('id'));
+      if (selectedOption) {
+        const siblingElement = selectedOption[elementType];
+        this.$emit('castOption', siblingElement?.innerText || "");
+        if (siblingElement?.classList.contains('search-options__item')) {
+          selectedOption.removeAttribute("id");
+          siblingElement.setAttribute("id", 'searchVariant');
+          return;
+        }
+        selectedOption.removeAttribute("id");
+        return;
+      }
+      let innerText = "";
+      if (elementType === 'nextElementSibling')
+        innerText = this.getAutocompleteOptionText(autoCompleteOptions?.[0]);
+      if (elementType === 'previousElementSibling')
+        innerText = this.getAutocompleteOptionText(autoCompleteOptions?.[autoCompleteOptions.length - 1]);
+      this.$emit('castOption', innerText);
+    },
+    getAutocompleteOptionText(autocompleteOption) {
+      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;
+    },
+    onAutocompleteOptionClick(option) {
+      this.$emit('click', option);
+      this.showAutocomplete = false;
+    },
+    textByOption(obj) {
+      return this.optionFields.reduce((acc, curr, index) => {
+        if (index !== 0) acc += " - ";
+        acc += obj[curr];
+        return acc;
+      }, "");
+    }
+  }
+}
+</script>
+