adata-ui 0.1.39 → 0.1.42

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.33",
+  "version": "0.1.40",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

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

package/src/App.vue

@@ -1,37 +1,11 @@
 <template>
-  <div id="app">
-<!--    <text-field label="Пример" v-model="value" @input="inputHandle" @enterPressed="inputHandle" />-->
-    <search-text-field label="Пример2" v-model="value" @input="inputHandle" @enterPressed="inputHandle" :options="options" :optionFields="['id', 'name']" />
-  </div>
+  <div id="app"></div>
 </template>
 
 <script>
-
-// import TextField from "./components/TextField/TextField";
-import SearchTextField from "./components/SearchTextField/SearchTextField";
-
 export default {
-  name: 'App',
-  components: {
-    // TextField,
-    SearchTextField
-  },
-  data() {
-    return {
-      value: "",
-      options: [{
-        id: 1,
-        name: "reg"
-      }
-      ]
-    }
-  },
-  methods: {
-    inputHandle(val) {
-      console.log(val);
-    }
-  }
-}
+  name: "App",
+};
 </script>
 
 <style>

package/src/components/Header/Header.vue

@@ -2,7 +2,7 @@
   <header class="a-header" :class="[{'bordered': isBordered}, {'fixed': isFixed}]">
     <div class="container">
       <div class="a-header__left">
-        <a class="logo" :href="toAdtdev('https://adata.kz')">
+        <a class="logo" :href="main[mode]">
           <svg class="adata-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 48">
             <path d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
             <path d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"></path>
@@ -13,7 +13,7 @@
                :key="index"
                class="menu__wrapper menu__items"
                :class="{active: item.key === activeTabKey}"
-               :href="toAdtdev(item.url)"
+               :href="item[mode]"
           >
             {{ item.name }}
           </a>
@@ -23,7 +23,7 @@
         <slot name="chooseCountry"></slot>
         <Profile
             v-bind:profileDropDown="profileDropDown"
-            :isDev="isDev"
+            :mode="mode"
             :isAuthenticated="isAuthenticated"
             :requestCount="requestCount"
             :daysRemaining="daysRemaining"
@@ -75,7 +75,7 @@
 
 <script>
 import Profile from "./Profile";
-import { profileDropDown } from "@/configs/profileDropDown"
+import { profileDropDown } from "../../configs/profileDropDown"
 import MobileToggle from "../transitions/VerticalMobileToggle";
 
 export default {
@@ -133,6 +133,11 @@ export default {
   data() {
     return {
       profileDropDown,
+      main: {
+        dev: 'https://adtdev.kz',
+        prod: 'https://adata.kz',
+        staging: 'https://adada.kz'
+      },
       subheaderItems: [
         {
           id: 1,

package/src/components/Header/Profile.vue

@@ -241,9 +241,12 @@ export default {
     clickOutside: vClickOutside.directive,
   },
   props: {
-    isDev: {
-      type: Boolean,
-      default: false
+    mode: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ['prod', 'dev', 'staging'].indexOf(value) !== -1
+      }
     },
     profileDropDown: {
       type: Array,
@@ -316,28 +319,25 @@ export default {
     },
     async showModal(url, name) {
       if (name.includes('Текущий')) {
-        if(window.location.href.includes(this.toAdtdev(url))) {
+        if(window.location.href.includes(url)) {
           this.$emit("setIsReplenishModal", true);
           this.setShowModal(true);
         } else {
-          await window.open(this.toAdtdev(url) + "&modal=show", "_self")
+          await window.open(url + "&modal=show", "_self")
         }
       }
     },
     handleClick(url, name) {
       if (!name.includes('Текущий')) {
-        window.open(this.toAdtdev(url), "_self");
-        this.active = false;
-        if (this.chosenElem) this.chosenElem.opened = false;
+        window.open(url, "_self");
+        // this.active = false;
+        // if (this.chosenElem) this.chosenElem.opened = false;
       }
     },
     rotateItem(index) {
       this.chosenElem = this.listDropDown[index];
       this.$set(this.listDropDown[index], 'opened', !this.listDropDown[index].opened)
     },
-    toAdtdev(url) {
-      return this.isDev ? url.replace("adata", "adtdev") : url;
-    }
   }
 };
 </script>

package/src/components/SearchTextField/SearchTextField.vue

@@ -1,52 +1,86 @@
 <template>
-  <div class="adt-text-block"
-       v-click-outside="onOutsideClick"
-       @keydown.down.up.prevent="onUpOrDownClicked"
+  <div
+    class="adt-text-block"
+    v-click-outside="onOutsideClick"
+    @keydown.down.up.prevent="onUpOrDownClicked"
   >
     <div :class="['adt-text-block__field', { error: !!errorText }]">
       <input
-          ref="input"
-          :type="type"
-          v-mask="mask"
-          v-model="value"
-          :placeholder="placeholder"
-          required
-          @keyup.enter="pressedEnter"
-          @input="inputHandler"
-          @focus="showAutocomplete = true"
-          @click="$emit('showVTour')"
-          class="adt-text-block__input"
-          :class="{ error: !!errorText }"
+        ref="input"
+        :type="type"
+        :value="value"
+        :placeholder="placeholder"
+        required
+        @keyup.enter="enterPressed"
+        @input="$emit('input', $event.target.value)"
+        @focus="showAutocomplete = true"
+        @click="$emit('showVTour')"
+        class="adt-text-block__input"
+        :class="{ error: !!errorText }"
       />
       <label class="adt-text-block__label">
         {{ label }}
       </label>
-      <div class="adt-text-block__icon" v-if="clearable && value" @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>
+      <div
+        class="adt-text-block__icon"
+        v-if="clearable && value"
+        @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__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
+        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 class="adt-text-block__options search-options" v-show="options && options.length > 0 && showAutocomplete">
+    <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"
+            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 class="hiddenOne" v-if="option.type && isTypeRequired">
+              ${{ option.type }}$
+            </div>
           </div>
         </div>
       </PerfectScrollbar>
@@ -55,8 +89,8 @@
 </template>
 
 <script>
-import '../../assets/style.scss';
-import { VueMaskDirective } from "v-mask";
+import "../../assets/style.scss";
+
 import { PerfectScrollbar } from "vue2-perfect-scrollbar";
 import vClickOutside from "v-click-outside";
 
@@ -64,20 +98,24 @@ export default {
   name: "SearchTextField",
   directives: {
     clickOutside: vClickOutside.directive,
-    mask: VueMaskDirective
   },
   props: {
     errorText: {
       type: String,
-      default: ""
+      default: "",
     },
     placeholder: {
       type: String,
-      default: ""
+      default: "",
     },
     mask: {
       type: String,
-      default: ""
+      default: "",
+    },
+    value: {
+      type: String,
+      required: true,
+      default: "",
     },
     label: {
       type: String,
@@ -89,15 +127,15 @@ export default {
     },
     clearable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isWithIcon: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isTypeRequired: {
       type: Boolean,
-      default: false
+      default: false,
     },
     options: {
       type: Array,
@@ -105,34 +143,33 @@ export default {
     },
     optionFields: {
       type: Array,
-      default: null
+      default: null,
     },
     isMobile: {
       type: Boolean,
-      default: false
+      default: false,
     },
   },
   components: {
-    PerfectScrollbar
+    PerfectScrollbar,
   },
   data() {
     return {
       showAutocomplete: false,
       showPlaceholder: false,
-      value: ""
-    }
+    };
   },
   computed: {
     inputPlaceholder() {
-      return this.showPlaceholder ? this.placeholder : ""
-    }
+      return this.showPlaceholder ? this.placeholder : "";
+    },
   },
   methods: {
-    pressedEnter() {
-      this.$emit('enter', this.showAutocomplete, this.value);
+    enterPressed() {
+      this.$emit("enterPressed", this.showAutocomplete);
     },
     onOutsideClick() {
-      if (!this.isMobile) this.showAutocomplete = false
+      if (!this.isMobile) this.showAutocomplete = false;
     },
     onUpOrDownClicked(e) {
       const autoCompleteOptions = this.$refs.searchOptions;
@@ -140,44 +177,48 @@ export default {
       if (length > 0) {
         switch (e.which) {
           case 40:
-            this.moveOption(autoCompleteOptions, 'nextElementSibling');
+            this.moveOption(autoCompleteOptions, "nextElementSibling");
             break;
           case 38:
-            this.moveOption(autoCompleteOptions, 'previousElementSibling');
+            this.moveOption(autoCompleteOptions, "previousElementSibling");
             break;
         }
       }
     },
     moveOption(autoCompleteOptions, elementType) {
-      const selectedOption = autoCompleteOptions.find((option) => option.hasAttribute('id'));
+      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')) {
+        this.$emit("castOption", siblingElement?.innerText || "");
+        if (siblingElement?.classList.contains("search-options__item")) {
           selectedOption.removeAttribute("id");
-          siblingElement.setAttribute("id", 'searchVariant');
+          siblingElement.setAttribute("id", "searchVariant");
           return;
         }
         selectedOption.removeAttribute("id");
         return;
       }
       let innerText = "";
-      if (elementType === 'nextElementSibling')
+      if (elementType === "nextElementSibling")
         innerText = this.getAutocompleteOptionText(autoCompleteOptions?.[0]);
-      if (elementType === 'previousElementSibling')
-        innerText = this.getAutocompleteOptionText(autoCompleteOptions?.[autoCompleteOptions.length - 1]);
-      this.$emit('castOption', innerText);
+      if (elementType === "previousElementSibling")
+        innerText = this.getAutocompleteOptionText(
+          autoCompleteOptions?.[autoCompleteOptions.length - 1]
+        );
+      this.$emit("castOption", innerText);
     },
     getAutocompleteOptionText(autocompleteOption) {
-      autocompleteOption.setAttribute("id", 'searchVariant');
+      autocompleteOption.setAttribute("id", "searchVariant");
       return autocompleteOption.innerText;
     },
-    inputHandler() {
-      this.$emit('input', this.value);
+    inputHandler(e) {
+      this.$emit("input", e.target.value);
       this.showAutocomplete = true;
     },
     onAutocompleteOptionClick(option) {
-      this.$emit('click', option);
+      this.$emit("click", option);
       this.showAutocomplete = false;
     },
     textByOption(obj) {
@@ -186,8 +227,7 @@ export default {
         acc += obj[curr];
         return acc;
       }, "");
-    }
-  }
-}
+    },
+  },
+};
 </script>
-

package/src/components/TextField/TextField.vue

@@ -2,51 +2,74 @@
   <div class="adt-text-block">
     <div :class="['adt-text-block__field', { error: !!errorText }]">
       <input
-          ref="input"
-          v-mask="mask"
-          :type="type"
-          v-model="value"
-          :placeholder="placeholder"
-          required
-          @keyup.enter="pressedEnter"
-          class="adt-text-block__input"
-          :class="{ error: !!errorText }"
-          @input="() => {$emit('input', value)}"
+        ref="input"
+        :type="type"
+        :value="value"
+        :placeholder="placeholder"
+        required
+        @input="$emit('input', $event.target.value)"
+        @keyup.enter="enterPressed"
+        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', '')">
-        <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>
+      <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>
       </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
+        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>
 </template>
 <script>
-import '../../assets/style.scss';
-import { VueMaskDirective } from "v-mask";
+import "../../assets/style.scss";
 
 export default {
   name: "TextField",
-  directives: {
-    mask: VueMaskDirective
-  },
   props: {
     errorText: {
       type: String,
-      default: ""
+      default: "",
     },
     label: {
       type: String,
@@ -56,38 +79,42 @@ export default {
       type: String,
       default: "text",
     },
-    mask: {
+    value: {
       type: String,
-      default: ""
+      required: true,
+      default: "",
     },
     placeholder: {
       type: String,
-      default: ""
+      default: "",
     },
     clearable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     required: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       showPlaceholder: false,
-      value: ""
-    }
+    };
   },
   computed: {
     inputPlaceholder() {
-      return this.showPlaceholder ? this.placeholder : ""
-    }
+      return this.showPlaceholder ? this.placeholder : "";
+    },
   },
   methods: {
-    pressedEnter() {
-      this.$emit('enterPressed', this.value);
-    }
-  }
-}
+    enterPressed() {
+      this.$emit("enterPressed", this.showAutocomplete);
+    },
+    inputHandler(e) {
+      this.$emit("input", e.target.value);
+      this.showAutocomplete = true;
+    },
+  },
+};
 </script>