adata-ui 0.1.2 → 0.1.6

package/src/components/PasswordField/PasswordField.stories.js

@@ -0,0 +1,16 @@
+import PasswordField from "./PasswordField.vue";
+
+export default {
+    title: 'PasswordField',
+    component: PasswordField,
+    template: "<password-field label='Example'></password-field>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { PasswordField },
+    props: Object.keys(argTypes),
+    template: '<password-field v-bind="$props"></password-field>'
+})
+
+export const BasePasswordField = Template.bind({});
+BasePasswordField.args = {label: 'Password'}

package/src/components/PasswordField/PasswordField.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="adt-text-block">
+    <div class="adt-text-block__field">
+      <input
+        ref="input"
+        :type="type"
+        :value="value"
+        required
+        @input="$emit('input', $event.target.value)"
+        class="adt-text-block__input"
+        :class="{ error: !!errorText }"
+      />
+      <label class="adt-text-block__label">{{ label }}</label>
+      <div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
+          <path
+              d="M510.096 249.937c-4.032-5.867-100.928-143.275-254.101-143.275-131.435 0-248.555 136.619-253.483 142.443-3.349 3.968-3.349 9.792 0 13.781C7.44 268.71 124.56 405.329 255.995 405.329S504.549 268.71 509.477 262.886c3.094-3.669 3.371-8.981.619-12.949zM255.995 383.996c-105.365 0-205.547-100.48-230.997-128 25.408-27.541 125.483-128 230.997-128 123.285 0 210.304 100.331 231.552 127.424-24.534 26.645-125.291 128.576-231.552 128.576z"></path>
+          <path
+              d="M255.995 170.662c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333 85.333-38.272 85.333-85.333-38.272-85.333-85.333-85.333zm0 149.334c-35.285 0-64-28.715-64-64s28.715-64 64-64 64 28.715 64 64-28.715 64-64 64z"></path>
+        </svg>
+      </div>
+      <div v-else @click="showPassword = true" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" id="closedEye">
+          <path
+              d="M316.332 195.662c-4.16-4.16-10.923-4.16-15.083 0s-4.16 10.944 0 15.083c12.075 12.075 18.752 28.139 18.752 45.248 0 35.285-28.715 64-64 64-17.109 0-33.173-6.656-45.248-18.752-4.16-4.16-10.923-4.16-15.083 0-4.16 4.139-4.16 10.923 0 15.083 16.085 16.128 37.525 25.003 60.331 25.003 47.061 0 85.333-38.272 85.333-85.333 0-22.807-8.874-44.247-25.002-60.332zm-45.462-23.531c-4.843-.853-9.792-1.472-14.869-1.472-47.061 0-85.333 38.272-85.333 85.333 0 5.077.619 10.027 1.493 14.869.917 5.163 5.419 8.811 10.475 8.811.619 0 1.237-.043 1.877-.171 5.781-1.024 9.664-6.571 8.64-12.352-.661-3.627-1.152-7.317-1.152-11.157 0-35.285 28.715-64 64-64 3.84 0 7.531.491 11.157 1.131 5.675 1.152 11.328-2.859 12.352-8.64 1.024-5.781-2.858-11.328-8.64-12.352z"></path>
+          <path
+              d="M509.462 249.102c-2.411-2.859-60.117-70.208-139.712-111.445-5.163-2.709-11.669-.661-14.379 4.587-2.709 5.227-.661 11.669 4.587 14.379 61.312 31.744 110.293 81.28 127.04 99.371-25.429 27.541-125.504 128-230.997 128-35.797 0-71.872-8.64-107.264-25.707-5.248-2.581-11.669-.341-14.229 4.971-2.581 5.291-.341 11.669 4.971 14.229 38.293 18.496 77.504 27.84 116.523 27.84 131.435 0 248.555-136.619 253.483-142.443 3.369-3.969 3.348-9.793-.023-13.782zM325.996 118.947c-24.277-8.171-47.829-12.288-69.995-12.288-131.435 0-248.555 136.619-253.483 142.443-3.115 3.669-3.371 9.003-.597 12.992 1.472 2.112 36.736 52.181 97.856 92.779a10.48 10.48 0 005.888 1.792c3.435 0 6.827-1.664 8.875-4.8 3.264-4.885 1.92-11.52-2.987-14.763-44.885-29.845-75.605-65.877-87.104-80.533 24.555-26.667 125.291-128.576 231.552-128.576 19.861 0 41.131 3.755 63.189 11.157 5.589 2.005 11.648-1.088 13.504-6.699 1.878-5.589-1.109-11.626-6.698-13.504z"></path>
+          <path
+              d="M444.865 67.128c-4.16-4.16-10.923-4.16-15.083 0L67.116 429.795c-4.16 4.16-4.16 10.923 0 15.083a10.716 10.716 0 007.552 3.115c2.731 0 5.461-1.045 7.531-3.115L444.865 82.211c4.16-4.16 4.16-10.923 0-15.083z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="adt-text-block__error" v-if="!!errorText">
+      {{ errorText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PasswordField",
+  props: {
+    errorText: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, null],
+      required: true,
+    }
+  },
+  data() {
+    return {
+      showPassword: false
+    }
+  },
+  computed: {
+    type() {
+      return this.showPassword ? "text" : "password";
+    }
+  }
+}
+</script>
+

package/src/components/TextField/TextField.stories.js

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

package/src/components/TextField/TextField.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="adt-text-block">
+    <div class="adt-text-block__field">
+      <input
+          v-if="!mask"
+          ref="input"
+          :type="type"
+          :value="value"
+          :placeholder="placeholder"
+          required
+          @input="$emit('input', $event.target.value)"
+          class="adt-text-block__input"
+          :class="{ error: !!errorText }"
+      />
+      <TheMask
+          v-else
+          ref="maskInput"
+          :value="value"
+          :mask="mask"
+          :type="type"
+          :masked="false"
+          :placeholder="inputPlaceholder"
+          required
+          @input.native="$emit('input', $event.target.value)"
+          @focus.native="showPlaceholder = true"
+          @blur.native="showPlaceholder = false"
+          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>
+        </svg>
+      </div>
+    </div>
+    <div class="adt-text-block__error" v-if="!!errorText">
+      {{ errorText }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { TheMask } from 'vue-the-mask';
+
+export default {
+  name: "TextField",
+  props: {
+    errorText: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    mask: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    TheMask
+  },
+  data() {
+    return {
+      showPlaceholder: false
+    }
+  },
+  computed: {
+    inputPlaceholder() {
+      return this.showPlaceholder ? this.placeholder : ""
+    }
+  }
+}
+</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>

package/src/components/index.js

@@ -1,10 +1,17 @@
 import Vue from 'vue'
-import HelloWorld from "./HelloWorld";
-import AdataButton from "./Button"
-
+import AButton from './Button/BaseButton'
+import ATextField from './TextField/TextField'
+import APasswordField from './PasswordField/PasswordField'
+import AAlert from './Alert/Alert'
+import AHeader from './Header/Header'
+import AFooter from './Footer/Footer'
 const Components = {
-    HelloWorld,
-    AdataButton
+    AButton,
+    ATextField,
+    APasswordField,
+    AAlert,
+    AHeader,
+    AFooter
 };
 
 Object.keys(Components).forEach(name => {

package/src/components/transitions/SlideToggle.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:after-enter="afterEnter"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-on:after-leave="afterLeave"
+  >
+    <slot :animationClass="'slideToggleAnimation'" :compareNotificationClass="'compareNotification'"
+          :fastAnimation="'fastAnimation'"/>
+  </transition>
+</template>
+<script>
+export default {
+  methods: {
+    beforeEnter: function (el) {
+      el.style.height = "0";
+      el.style.overflow = "hidden";
+    },
+    enter: function (el) {
+      el.style.height = el.scrollHeight + "px";
+    },
+    afterEnter: function (el) {
+      el.style.height = "auto";
+      el.style.overflow = "initial";
+    },
+    beforeLeave: function (el) {
+      el.style.overflow = "hidden";
+      el.style.height = el.scrollHeight + "px";
+      el.scrollHeight;
+    },
+    leave: function (el) {
+      el.style.height = "0";
+    },
+    afterLeave: function (el) {
+      el.style.height = "auto";
+      el.style.overflow = "initial";
+    },
+  },
+};
+</script>
+<style scoped>
+.slideToggleAnimation {
+  transition: 0.3s all;
+}
+
+.fastAnimation {
+  transition: 0.01s all;
+}
+
+.compareNotification {
+  transition: 3s all;
+}
+</style>

package/src/components/transitions/VerticalMobileToggle.vue

@@ -0,0 +1,76 @@
+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:after-enter="afterEnter"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-on:after-leave="afterLeave"
+  >
+    <slot :animationClass="'slideToggleAnimation'" :compareNotificationClass="'compareNotification'" />
+  </transition>
+</template>
+<script>
+export default {
+  props: {
+    zIndex: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: String,
+      default: "0%"
+    },
+    overflow: {
+      type: String,
+      default: "initial"
+    }
+  },
+  methods: {
+    beforeEnter: function (el) {
+      el.style.width = "0";
+      el.style.overflowX = "hidden";
+      el.style.overflowY = "hidden";
+      el.style.position = "fixed";
+      el.style.top = "0";
+      el.style.right = "0";
+      el.style.background = "#fff";
+    },
+    afterEnter: function (el) {
+      el.style.height = "100vh";
+      el.style.width = "100vw";
+      el.style.overflowX = "hidden";
+      el.style.overflowY = "auto";
+      el.style.position = "fixed";
+      el.style.top = this.top;
+      el.style.right = "0";
+      el.style.background = "#fff";
+      el.style.zIndex = (90 + this.zIndex).toString();
+    },
+    beforeLeave: function (el) {
+      el.style.overflow = "hidden";
+      el.style.width = el.scrollHeight + "px";
+      el.scrollHeight;
+    },
+    leave: function (el) {
+      el.style.width = "0";
+    },
+    afterLeave: function (el) {
+      el.style.position = "fixed";
+      el.style.top = "0";
+      el.style.right = "0";
+      el.style.width = "auto";
+      el.style.overflow = "initial";
+    },
+  },
+};
+</script>
+<style scoped>
+.slideToggleAnimation {
+  transition: 0.3s all;
+
+}
+.compareNotification{
+  transition: 3s all;
+}
+</style>

package/src/configs/navigationBarConfig.js

@@ -0,0 +1,22 @@
+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://fines.adata.kz',
+  }
+];