adata-ui 0.1.32 → 0.1.35

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.24",
+  "version": "0.1.33",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -13152,6 +13152,11 @@
       "integrity": "sha512-X1DFb6wxXpZLLqM9NX0Wm+4xoN6xAyJn8OwuiHsV0JJvLfD18Z+wbgJ1lM7ykTVINdu8v7Mu0gIzWMvnhKWBkA==",
       "dev": true
     },
+    "flush-promises": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flush-promises/-/flush-promises-1.0.2.tgz",
+      "integrity": "sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA=="
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -25234,6 +25239,11 @@
       "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.1.2.tgz",
       "integrity": "sha512-gMdRqfRE6m6XU6SiFi3dyBlFB2MWogiXpof8Aa3LQysrl9pzTndqp/iEaAphLoadaQUFnQ0ec6fLLaxr7LiY6A=="
     },
+    "v-mask": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v-mask/-/v-mask-2.3.0.tgz",
+      "integrity": "sha512-ap7pTtCTvj25CqX4VYXqudCBd0+XvYyhiiLbzWQQR7AMQosJ2+DPu0a94P9stk0EGmGcmYxJaPkFkfjD8hquWQ=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.32",
+  "version": "0.1.35",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,9 +15,11 @@
     "@storybook/addons": "^6.4.14",
     "@storybook/theming": "^6.4.14",
     "core-js": "^3.6.5",
+    "flush-promises": "^1.0.2",
     "node-sass": "^5.0.0",
     "user": "0.0.0",
     "v-click-outside": "^3.1.2",
+    "v-mask": "^2.3.0",
     "vue": "^2.6.11",
     "vue-the-mask": "^0.11.1",
     "vue2-perfect-scrollbar": "^1.5.2"

package/src/App.vue

@@ -1,13 +1,36 @@
 <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>
 </template>
 
 <script>
 
+// import TextField from "./components/TextField/TextField";
+import SearchTextField from "./components/SearchTextField/SearchTextField";
+
 export default {
   name: 'App',
-  components: {}
+  components: {
+    // TextField,
+    SearchTextField
+  },
+  data() {
+    return {
+      value: "",
+      options: [{
+        id: 1,
+        name: "reg"
+      }
+      ]
+    }
+  },
+  methods: {
+    inputHandle(val) {
+      console.log(val);
+    }
+  }
 }
 </script>
 

package/src/assets/_text_field.scss

@@ -45,7 +45,7 @@
     font-size: 10px;
     line-height: 14px;
     color: #ff2e43;
-    margin-top: 9px;
+    margin-top: 8px;
     display: flex;
     align-items: center;
     svg {
@@ -76,7 +76,6 @@
     @media(max-width: 1025px) {
       padding: 19px 36px 7px 12px;
       height: 40px;
-      border: 1px solid #71757A;
       font-size: 12px;
     }
 
@@ -111,6 +110,7 @@
     }
 
     &.error {
+      border: 1px solid #FF2E43;
       background: #ff2e431f;
     }
   }
@@ -126,7 +126,7 @@
     line-height: 40px;
     transition: 0.3s;
     color: #71757A;
-    font-size: 12px;
+    font-size: 14px;
     @media(max-width: 1025px) {
       left: 12px;
       font-size: 14px;
@@ -171,7 +171,7 @@
   }
 
   &__required {
-    color: #FF000087;
+    color: #FF2E43;
   }
 
   &__options {
@@ -182,8 +182,7 @@
     background: #fff;
     z-index: 1000;
     border-radius: 2px;
-    border: 1px solid #71757A;
-    padding: 12px 0;
+    padding: 8px 0;
     @media(max-width: 1025px) {
       overflow: auto;
     }
@@ -202,7 +201,7 @@
       transition: 0.3s all;
       cursor: pointer;
       @media(max-width: 1025px) {
-        font-size: 10px;
+        font-size: 12px;
       }
 
       &:hover {
@@ -218,7 +217,6 @@
     height: 40px;
     width: 40px;
     min-width: 40px;
-    border: 1px solid #71757A;
     border-radius: 0 2px 2px 0;
     border-left: none;
     background: #FFCD33;
@@ -226,7 +224,6 @@
 
   &__input-mob-filter {
     background: #ffffff;
-    border: 1px solid #71757A;
     border-bottom: none;
     box-sizing: border-box;
     border-radius: 2px;
@@ -262,6 +259,7 @@
     }
 
     &.error {
+      border: 1px solid #FF2E43;
       background: #ff2e431f;
     }
   }

package/src/components/Alert/Alert.vue

@@ -50,7 +50,7 @@ export default {
   @media(max-width: 1025px) {
     width: 100%;
     font-weight: 400;
-    font-size: 10px;
+    font-size: 12px;
     line-height: 16px;
     margin: 0 0 16px;
   }

package/src/components/Button/{BaseButton.vue → AButton.vue}

@@ -2,15 +2,13 @@
   <component
     :class="[
       'btn',
-      {'full-width': fullwidth},
-      `btn-${variant}`,
-      `size size-${size}`,
-      `size-fz-${fontSize}`,
+      `btn_${variant}`,
+      `size_${size}`,
     ]"
     v-bind="$attrs"
     v-on="$listeners"
-    :is="url ? 'nuxt-link' : 'button'"
-    :to="url"
+    :is="url ? 'button' : 'button'"
+    :href="url"
     :event="event ? 'click' : ''"
   >
     <slot></slot>
@@ -20,7 +18,7 @@
 
 <script>
 export default {
-  name: "BaseButton",
+  name: "AButton",
   props: {
     variant: {
       type: String,
@@ -31,20 +29,10 @@ export default {
             'white',
             'grey',
             'yellow',
-            'danger',
-            'success',
-            'primary-outlined',
-            'primary'
-          ].includes(value)
-        );
-      },
-    },
-    fontSize: {
-      type: String,
-      validator: function (value) {
-        return (
-          [
-            'sm',
+            'red',
+            'green',
+            'blue_outlined',
+            'blue'
           ].includes(value)
         );
       },
@@ -57,28 +45,18 @@ export default {
           [
             'sm',
             'md',
-            'md-short',
-            'lg',
+            'extra_sm',
           ].includes(value)
         );
       },
     },
-    tag: {
-      type: String,
-      default: "button",
-    },
     url: {
-      type: [String, Boolean],
-      default: false
+      type: String,
     },
     event: {
       type: Boolean,
       default: true
     },
-    fullwidth: {
-      type: Boolean,
-      default: false
-    },
     disabled: {
       type: Boolean,
       default: false
@@ -92,13 +70,15 @@ export default {
 .btn {
   cursor: pointer;
   border: none;
+  border-radius: 2px;
+  font-size: 14px;
 
-  &:disabled {
-    cursor: not-allowed;
+  @media screen and (max-width: 560px) {
+    width: 100%;
   }
 
-  &.full-width {
-    width: 100%;
+  svg {
+    margin-right: 8px;
   }
 
   &:disabled {
@@ -106,39 +86,21 @@ export default {
   }
 
   &.size {
-    box-sizing: border-box;
-
-    &-sm {
-      padding: 6px 16px;
-      font-size: 12px;
-      line-height: 18px;
+    &_extra_sm {
+      padding: 2px 16px;
+      line-height: 20px;
     }
-
-    &-md {
-      padding: 8px 36px;
-      font-size: 14px;
-      line-height: 24px;
-
-      &-short {
-        padding: 8px 16px;
-        font-size: 14px;
-        line-height: 24px;
-      }
+    &_sm {
+      padding: 6px 20px;
+      line-height: 20px;
     }
-
-    &-lg {
-      padding: 8px 40px;
-      font-size: 14px;
+    &_md {
+      padding: 8px 30px;
       line-height: 24px;
     }
-
-    &-fz-sm {
-      font-size: 12px;
-      line-height: 20px;
-    }
   }
 
-  &-grey {
+  &_grey {
     color: var(--newGray);
     border: 1px solid #9da3ac;
     background: #fff;
@@ -165,23 +127,23 @@ export default {
     }
   }
 
-  &-yellow {
-    background: #FFCD33;
+  &_yellow {
+    background: linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);
     color: #333333;
 
     &:hover {
-      background: rgba(255, 205, 51, 0.7);
+      background: linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);
     }
 
     &:active {
-      background: #fab619;
+      background: linear-gradient(236.46deg, #FFE364 -2.39%, #FBC920 79.1%);
     }
   }
 
-  &-danger {
+  &_red {
     border: 1px solid #FF2E43;
     color: #FF2E43;
-
+    background-color: transparent;
     &:hover {
       background: #FF2E43;
       color: #fff;
@@ -193,7 +155,7 @@ export default {
     }
   }
 
-  &-success {
+  &_green {
     background: #00B92D;
     color: #fff;
 
@@ -206,9 +168,10 @@ export default {
     }
   }
 
-  &-primary-outlined {
+  &_blue_outlined {
     border: 1px solid #007AFF;
     color: #007AFF;
+    background-color: transparent;
 
     &:hover {
       background: #007AFF;
@@ -221,7 +184,7 @@ export default {
     }
   }
 
-  &-primary {
+  &_blue {
     background: #1E88E5;
     color: #FFF;
 
@@ -236,6 +199,9 @@ export default {
     }
   }
 
-  box-sizing: border-box;
+  box-sizing: border-box !important;
+  -webkit-box-sizing: border-box !important;
+  -moz-box-sizing: border-box !important;
+  -ms-box-sizing: border-box !important;
 }
 </style>

package/src/components/Button/Button.stories.js

@@ -1,4 +1,4 @@
-import AButton from './BaseButton.vue'
+import AButton from './AButton.vue'
 import { action } from "@storybook/addon-actions"
 
 export default {

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

@@ -11,12 +11,7 @@ export default {
 const Template = (args, { argTypes }) => ({
     components: { ASearchTextField },
     props: Object.keys(argTypes),
-    template: '<a-search-text-field  v-bind="$props" @enterPressed="enterPressed"></a-search-text-field>',
-    methods: {
-        enterPressed(){
-            console.log('hihi')
-        }
-    }
+    template: '<a-search-text-field  v-bind="$props" @enterPressed="enterPressed"></a-search-text-field>'
 })
 
 export const WithIcon = Template.bind({});

package/src/components/SearchTextField/SearchTextField.vue

@@ -1,72 +1,40 @@
 <template>
-  <div :class="[{magnifier: isWithIcon},{'magnifier-mobile': magnifierMob}]"
-       class="adt-text-block"
+  <div class="adt-text-block"
        v-click-outside="onOutsideClick"
        @keydown.down.up.prevent="onUpOrDownClicked"
   >
-    <div class="adt-text-block__field">
+    <div :class="['adt-text-block__field', { error: !!errorText }]">
       <input
-          v-if="!mask"
           ref="input"
           :type="type"
-          :value="value"
+          v-mask="mask"
+          v-model="value"
           :placeholder="placeholder"
           required
-          @input="$emit('input', $event.target.value)"
-          @keyup.enter="enterPressed"
+          @keyup.enter="pressedEnter"
+          @input="inputHandler"
           @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}
-          ]"
-      />
-      <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-red' : !forMobileFilter && getIsError,
-          'adt-text-block__label' : !forMobileFilter && !getIsError,
-          'adt-text-block__label-mob-filter' : forMobileFilter,
-        }"
-      >
+      <label class="adt-text-block__label">
         {{ label }}
       </label>
-      <div class="mobile 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', '')">
+      <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>
+      {{ errorText }}
+    </div>
     <div class="adt-text-block__options search-options" v-show="options && options.length > 0 && showAutocomplete">
       <PerfectScrollbar>
         <div class="search-options__wrapper">
@@ -88,14 +56,15 @@
 
 <script>
 import '../../assets/style.scss';
-import {TheMask} from 'vue-the-mask';
+import { VueMaskDirective } from "v-mask";
 import { PerfectScrollbar } from "vue2-perfect-scrollbar";
 import vClickOutside from "v-click-outside";
 
 export default {
   name: "SearchTextField",
   directives: {
-    clickOutside: vClickOutside.directive
+    clickOutside: vClickOutside.directive,
+    mask: VueMaskDirective
   },
   props: {
     errorText: {
@@ -118,11 +87,6 @@ export default {
       type: String,
       default: "text",
     },
-    value: {
-      type: String,
-      required: true,
-      default: ""
-    },
     clearable: {
       type: Boolean,
       default: false
@@ -131,14 +95,6 @@ export default {
       type: Boolean,
       default: false
     },
-    magnifierMob: {
-      type: Boolean,
-      default: false
-    },
-    forMobileFilter: {
-      type: Boolean,
-      default: false
-    },
     isTypeRequired: {
       type: Boolean,
       default: false
@@ -155,19 +111,15 @@ export default {
       type: Boolean,
       default: false
     },
-    getIsError: {
-      type: Boolean,
-      default: false
-    }
   },
   components: {
-    PerfectScrollbar,
-    TheMask
+    PerfectScrollbar
   },
   data() {
     return {
       showAutocomplete: false,
-      showPlaceholder: false
+      showPlaceholder: false,
+      value: ""
     }
   },
   computed: {
@@ -176,8 +128,8 @@ export default {
     }
   },
   methods: {
-    enterPressed() {
-      this.$emit('enterPressed', this.showAutocomplete)
+    pressedEnter() {
+      this.$emit('enter', this.showAutocomplete, this.value);
     },
     onOutsideClick() {
       if (!this.isMobile) this.showAutocomplete = false
@@ -220,8 +172,8 @@ export default {
       autocompleteOption.setAttribute("id", 'searchVariant');
       return autocompleteOption.innerText;
     },
-    inputHandler(e) {
-      this.$emit('input', e.target.value);
+    inputHandler() {
+      this.$emit('input', this.value);
       this.showAutocomplete = true;
     },
     onAutocompleteOptionClick(option) {

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

@@ -10,12 +10,7 @@ export default {
 const Template = (args, { argTypes }) => ({
     components: { ATextField },
     props: Object.keys(argTypes),
-    template: '<a-text-field v-bind="$props" @enterPressed="enterPressed"></a-text-field>',
-    methods: {
-        enterPressed(){
-            console.log('hihi')
-        }
-    }
+    template: '<a-text-field v-bind="$props"></a-text-field>'
 })
 
 export const Clearable = Template.bind({});