adata-ui 0.1.68 → 0.1.71

package/package.json

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

package/src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div id="app"><a-header active-tab-key="" login-url="" mode="" is-authenticated request-count="199" days-remaining="18 часов 44 минуты"/></div>
+  <div id="app">
+  </div>
 </template>
 
 <script>

package/src/assets/_text_field.scss

@@ -62,7 +62,7 @@
     }
   }
 
-  &__input {
+  &__input, &__textarea {
     background: #ffffff;
     border: 0.5px solid #c4c4c4;
     box-sizing: border-box;
@@ -86,6 +86,8 @@
       top: 12px;
       font-size: 10px;
       color: #71757A;
+      text-overflow: inherit;
+      width: 100%;
       @media(max-width: 1025px) {
         font-size: 8px;
       }
@@ -128,6 +130,21 @@
     }
   }
 
+  &__textarea {
+    min-height: 120px;
+    resize: none;
+  }
+
+  &__textarea + label {
+    top: 20px;
+  }
+
+  &--ellipsis {
+    width: calc(100% - 56px);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   &__icon {
     position: absolute;
     right: 16px;

package/src/components/MailTo/MailTo.vue

@@ -1,111 +1,149 @@
 <template>
   <div class="mail">
-    <h2 class="mail__title">Интересует больше данных?</h2>
-    <p class="mail__subtitle">
-      Отправьте ваш запрос на
-      <a class="mail__link" href="mailto:info@adata.kz">info@adata.kz</a>
-    </p>
     <div class="mail__img-wrapper">
-      <svg
-        width="126"
-        height="120"
-        viewBox="0 0 126 120"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="63" cy="60" r="60" fill="#BDC7CE" fill-opacity="0.15" />
-        <g clip-path="url(#clip0_2878_18164)">
-          <path
-            d="M103.97 17.2671L5.64253 38.4363C2.12229 39.1942 -0.117059 42.6623 0.640828 46.1825L13.8374 107.478C14.5953 110.998 18.0634 113.238 21.5837 112.48L119.911 91.3105C123.431 90.5526 125.67 87.0845 124.912 83.5643L111.716 22.2687C110.958 18.7485 107.49 16.5092 103.97 17.2671Z"
-            fill="white"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            opacity="0.6"
-            d="M61.5601 77.2102C56.4501 78.3102 52.2901 72.8102 43.4901 67.3502C25.6601 56.3002 9.6001 45.6602 9.6001 45.6602L11.9101 56.6602L49.0601 80.2402C55.0601 83.3502 65.0601 81.7402 70.3101 75.0202C69.1401 74.7002 67.7001 75.8902 61.5601 77.2102Z"
-            fill="#BDC7CE"
-            fill-opacity="0.4"
-          />
-          <path
-            opacity="0.6"
-            d="M28.77 97.0891C27.7509 97.3094 26.6984 97.3266 25.6726 97.1397C24.6468 96.9528 23.6679 96.5654 22.792 95.9998C21.9161 95.4341 21.1604 94.7013 20.568 93.8432C19.9757 92.9851 19.5584 92.0186 19.34 90.9991L9.41003 44.8891L3.28002 41.5391C2.42002 41.7291 0.0200244 43.2791 0.940024 47.5391L13.55 106.069C13.7685 107.088 14.1854 108.053 14.7771 108.91C15.3688 109.768 16.1236 110.5 16.9984 111.066C17.8732 111.631 18.8508 112.019 19.8754 112.206C20.9001 112.394 21.9516 112.378 22.97 112.159L118.53 91.5891C120.58 91.1313 122.367 89.8858 123.507 88.1215C124.646 86.3572 125.046 84.2157 124.62 82.1591L123.44 76.6891L28.77 97.0891Z"
-            fill="#BDC7CE"
-            fill-opacity="0.4"
-          />
-          <path
-            d="M2.46973 40.9509L55.2897 75.1109C56.7268 76.0398 58.3331 76.6758 60.0164 76.9825C61.6998 77.2892 63.4272 77.2606 65.0995 76.8983C66.7718 76.536 68.3561 75.8471 69.7616 74.8711C71.1671 73.8951 72.366 72.6513 73.2897 71.2109L107.19 18.2109"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M82.5601 56.9102L122.68 88.5802"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M39.2497 65.2207L17.4297 111.241"
-            stroke="#9DA3AC"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M107.69 30.8C114.538 30.8 120.09 25.2483 120.09 18.4C120.09 11.5517 114.538 6 107.69 6C100.842 6 95.29 11.5517 95.29 18.4C95.29 25.2483 100.842 30.8 107.69 30.8Z"
-            fill="#E83949"
-          />
-          <path
-            d="M110.67 24.1891L108.6 24.6391L106.82 16.3391C106.6 15.3391 106.46 14.5591 106.38 13.9691C106.27 14.1391 106.14 14.3291 105.98 14.5391C105.82 14.7491 105.28 15.4391 104.36 16.5391L103.04 15.4491L106.18 11.6691L107.9 11.2891L110.67 24.1891Z"
-            fill="white"
-          />
+      <svg class="mail__img" width="100" height="85" viewBox="0 0 100 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_518_22722)">
+          <path d="M82.8046 8.94045L4.49388 25.7383C1.69026 26.3397 -0.0932329 29.0916 0.510373 31.8849L11.0206 80.5231C11.6242 83.3164 14.3863 85.0933 17.1899 84.4919L95.5007 67.6941C98.3043 67.0927 100.088 64.3408 99.4842 61.5475L88.974 12.9093C88.3704 10.116 85.6083 8.33906 82.8046 8.94045Z" fill="white" stroke="#9DA3AC" stroke-linecap="round" stroke-linejoin="round"/>
+          <path opacity="0.6" d="M49.0286 56.5055C44.9588 57.3783 41.6457 53.0141 34.6371 48.6815C20.4367 39.9133 7.646 31.4705 7.646 31.4705L9.48575 40.199L39.0732 58.9098C43.8518 61.3776 51.8161 60.1 55.9974 54.7677C55.0656 54.5138 53.9187 55.458 49.0286 56.5055Z" fill="#BDC7CE" fill-opacity="0.4"/>
+          <path opacity="0.6" d="M22.9133 72.2794C22.1016 72.4542 21.2633 72.4679 20.4463 72.3196C19.6294 72.1713 18.8498 71.8639 18.1522 71.415C17.4546 70.9662 16.8527 70.3847 16.3809 69.7038C15.9092 69.0229 15.5768 68.256 15.4029 67.447L7.49433 30.8586L2.6122 28.2003C1.92726 28.3511 0.0158305 29.581 0.748548 32.9613L10.7916 79.405C10.9655 80.2132 11.2976 80.9794 11.7689 81.6596C12.2401 82.3399 12.8412 82.9211 13.5379 83.3698C14.2346 83.8186 15.0132 84.1262 15.8293 84.275C16.6454 84.4239 17.4828 84.4112 18.2939 84.2375L94.401 67.9151C96.0335 67.5519 97.4571 66.5636 98.3645 65.1636C99.272 63.7637 99.5905 62.0643 99.2513 60.4324L98.3115 56.0919L22.9133 72.2794Z" fill="#BDC7CE" fill-opacity="0.4"/>
+          <path d="M1.9668 27.7336L44.0343 54.8397C45.1788 55.5767 46.4581 56.0814 47.7988 56.3248C49.1396 56.5682 50.5153 56.5455 51.8471 56.258C53.179 55.9704 54.4408 55.4238 55.5602 54.6494C56.6796 53.8749 57.6344 52.888 58.3701 51.745L85.3692 9.68939" stroke="#9DA3AC" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M65.7535 40.3973L97.7063 65.5276" stroke="#9DA3AC" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M31.2595 46.9918L13.8813 83.5087" stroke="#9DA3AC" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M85.7678 19.6789C91.222 19.6789 95.6435 15.2736 95.6435 9.83943C95.6435 4.40526 91.222 0 85.7678 0C80.3135 0 75.892 4.40526 75.892 9.83943C75.892 15.2736 80.3135 19.6789 85.7678 19.6789Z" fill="#E83949"/>
+          <path d="M88.1413 14.433L86.4927 14.7901L85.075 8.20403C84.8998 7.41053 84.7883 6.7916 84.7246 6.32343C84.637 6.45833 84.5335 6.60909 84.406 6.77572C84.2786 6.94236 83.8485 7.48987 83.1158 8.36273L82.0645 7.49781L84.5653 4.49837L85.9352 4.19684L88.1413 14.433Z" fill="white"/>
         </g>
         <defs>
-          <clipPath id="clip0_2878_18164">
-            <rect
-              width="125.56"
-              height="107.12"
-              fill="white"
-              transform="translate(0 6)"
-            />
+          <clipPath id="clip0_518_22722">
+            <rect width="100" height="85" fill="white"/>
           </clipPath>
         </defs>
       </svg>
     </div>
+    <h2 class="mail__title">Интересует больше данных?</h2>
     <p class="mail__text">
-      Мы обязательно ответим вам <br />
-      в кратчайшие сроки.
+      Оставьте комментарий мы обязательно ответим Вам в кратчайшие сроки
     </p>
+    <form class="mail__form" novalidate>
+      <a-text-field
+        class="mail__form-input"
+        label="Введите email"
+        :error-text="emailError"
+        :value="userEmail ? userEmail : email"
+        @input="setEmail"
+        required
+      />
+      <a-text-field
+        class="mail__form-input"
+        label="Введите номер телефона"
+        v-mask="'8 (###) ###-##-##'"
+        v-model="phoneNumber"
+      />
+      <a-text-area
+        class="mail__form-input"
+        label="Ваш комментарий"
+        :error-text="messageError"
+        v-model="message"
+        required
+      />
+      <a-button
+        class="mail__form-btn"
+        @click.prevent="onSubmitForm"
+      >
+        Отправить
+      </a-button>
+    </form>
   </div>
 </template>
 
 <script>
 export default {
-  name: "MailTo",
+  name: "MailToTemplate",
+  props: {
+    userEmail: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      email: '',
+      phoneNumber: '',
+      message: '',
+      emailError: '',
+      messageError: ''
+    }
+  },
+  methods: {
+    setEmail(data) {
+      this.email = data;
+    },
+    onSubmitForm() {
+      const regex = new RegExp('^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$')
+      this.email = this.userEmail
+      if(!this.email.length || !regex.test(this.email)) {
+        this.emailError = 'Введите валидыный email';
+        return;
+      } else {
+        this.emailError = '';
+      }
+
+      if(this.message.length < 20) {
+        this.messageError = 'Введите больше чем 20 символов';
+        return;
+      } else {
+        this.messageError = '';
+      }
+
+      this.requestSupport()
+    },
+    async requestSupport() {
+      const requestBody = {
+        sender_name: this.email,
+        email: this.email,
+        phone_number: this.phoneNumber ? this.phoneNumber : this.email,
+        message: this.message
+      }
+
+      try {
+        const response = await fetch('https://users.adata.kz/api/v1/message/regards', {
+          method: "POST",
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(requestBody)
+        });
+
+        const result = await response.json()
+
+        if(result.success) {
+          this.$emit('success', result);
+        }
+      } catch (e) {
+        this.$emit('error', e);
+      }
+
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .mail {
-  padding: 25px 0px 50px;
+  padding: 50px 0px;
+  @media (max-width: 560px){
+    padding: 32px 0;
+  }
   &__title {
-    font-size: 20px;
-    line-height: 27px;
+    font-size: 24px;
+    line-height: 33px;
     color: #2c3e50;
     font-weight: 700;
     text-align: center;
     margin-bottom: 16px;
-  }
-  &__subtitle {
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-    color: #2c3e50;
-  }
-  &__link {
-    color: #007aff;
-    text-decoration: underline;
+    @media (max-width: 560px){
+      font-size: 16px;
+      line-height: 22px;
+    }
   }
   &__img-wrapper {
     padding: 24px;
@@ -118,10 +156,22 @@ export default {
     object-fit: contain;
   }
   &__text {
-    font-size: 14px;
+    font-size: 16px;
     line-height: 22px;
     text-align: center;
     color: #2c3e50;
+    margin-bottom: 16px;
+  }
+  &__form {
+    max-width: 370px;
+    margin: 0 auto;
+    &-input {
+      margin-bottom: 16px;
+    }
+    &-btn {
+      margin: 0 auto;
+      display: block;
+    }
   }
 }
 </style>

package/src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,17 @@
+import ATextArea from "./TextArea.vue";
+
+export default {
+    title: 'TextArea',
+    component: ATextArea,
+    data: () => ({ value: "" }),
+    template: "<a-text-area @input='(val) => {this.value = val}' label='Example'></a-text-area>>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { ATextArea },
+    props: Object.keys(argTypes),
+    template: '<a-text-area v-bind="$props"></a-text-area>'
+})
+
+export const Clearable = Template.bind({});
+Clearable.args = {label: 'Clearable', clearable: true}

package/src/components/TextArea/TextArea.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="adt-text-block">
+    <div :class="['adt-text-block__field', { error: !!errorText }]">
+      <textarea
+        ref="textarea"
+        :type="type"
+        :value="value"
+        :placeholder="placeholder"
+        required
+        @input="$emit('input', $event.target.value)"
+        @keyup.enter="enterPressed"
+        class="adt-text-block__textarea"
+        :class="{ error: !!errorText }"
+      />
+      <label class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
+        {{ 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>
+      </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>
+</template>
+<script>
+import "../../assets/style.scss";
+
+export default {
+  name: "TextArea",
+  props: {
+    errorText: {
+      type: String,
+      default: "",
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    isEllipsis: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      showPlaceholder: false,
+    };
+  },
+  computed: {
+    inputPlaceholder() {
+      return this.showPlaceholder ? this.placeholder : "";
+    },
+  },
+  methods: {
+    enterPressed() {
+      this.$emit("enterPressed", this.value);
+    },
+    inputHandler(e) {
+      this.$emit("input", e.target.value);
+    },
+  },
+};
+</script>

package/src/components/TextField/TextField.vue

@@ -12,7 +12,7 @@
         class="adt-text-block__input"
         :class="{ error: !!errorText }"
       />
-      <label class="adt-text-block__label">
+      <label class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
         {{ label }}
         <span v-if="required" class="adt-text-block__required">*</span>
       </label>
@@ -95,6 +95,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isEllipsis: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {

package/src/components/index.js

@@ -3,6 +3,7 @@ import ACheckbox from "./Checkbox/ACheckbox";
 import ACheckboxMenu from "./CheckboxMenu/CheckboxMenu";
 import AButton from "./Button/AButton";
 import ATextField from "./TextField/TextField";
+import ATextArea from "./TextArea/TextArea";
 import APasswordField from "./PasswordField/PasswordField";
 import AAlert from "./Alert/Alert";
 import AHeader from "./Header/Header";
@@ -15,6 +16,7 @@ const Components = {
   ACheckbox,
   AButton,
   ATextField,
+  ATextArea,
   APasswordField,
   AAlert,
   AHeader,