adata-ui 0.1.33 → 0.1.34

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.33",
+  "version": "0.1.34",
   "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/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

@@ -5,35 +5,19 @@
   >
     <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"
           :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 }}
       </label>
@@ -72,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: {
@@ -102,11 +87,6 @@ export default {
       type: String,
       default: "text",
     },
-    value: {
-      type: String,
-      required: true,
-      default: ""
-    },
     clearable: {
       type: Boolean,
       default: false
@@ -133,13 +113,13 @@ export default {
     },
   },
   components: {
-    PerfectScrollbar,
-    TheMask
+    PerfectScrollbar
   },
   data() {
     return {
       showAutocomplete: false,
-      showPlaceholder: false
+      showPlaceholder: false,
+      value: ""
     }
   },
   computed: {
@@ -148,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
@@ -192,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" @enter="enterPressed"></a-text-field>',
-    methods: {
-        enterPressed(){
-            console.log('test')
-        }
-    }
+    template: '<a-text-field v-bind="$props"></a-text-field>'
 })
 
 export const Clearable = Template.bind({});

package/src/components/TextField/TextField.vue

@@ -2,31 +2,16 @@
   <div class="adt-text-block">
     <div :class="['adt-text-block__field', { error: !!errorText }]">
       <input
-          v-if="!mask"
           ref="input"
+          v-mask="mask"
           :type="type"
-          :value="value"
+          v-model="value"
           :placeholder="placeholder"
           required
-          @input="$emit('input', $event.target.value)"
-          @keyup.enter="$emit('enter')"
-          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"
+          @keyup.enter="pressedEnter"
           class="adt-text-block__input"
           :class="{ error: !!errorText }"
+          @input="() => {$emit('input', value)}"
       />
       <label class="adt-text-block__label">
         {{ label }}
@@ -51,10 +36,13 @@
 </template>
 <script>
 import '../../assets/style.scss';
-import {TheMask} from 'vue-the-mask';
+import { VueMaskDirective } from "v-mask";
 
 export default {
   name: "TextField",
+  directives: {
+    mask: VueMaskDirective
+  },
   props: {
     errorText: {
       type: String,
@@ -72,10 +60,6 @@ export default {
       type: String,
       default: ""
     },
-    value: {
-      type: String,
-      required: true,
-    },
     placeholder: {
       type: String,
       default: ""
@@ -89,12 +73,10 @@ export default {
       default: false
     }
   },
-  components: {
-    TheMask
-  },
   data() {
     return {
-      showPlaceholder: false
+      showPlaceholder: false,
+      value: ""
     }
   },
   computed: {
@@ -102,5 +84,10 @@ export default {
       return this.showPlaceholder ? this.placeholder : ""
     }
   },
+  methods: {
+    pressedEnter() {
+      this.$emit('enterPressed', this.value);
+    }
+  }
 }
 </script>

package/src/main.js

@@ -1,9 +1,12 @@
-import Vue from 'vue'
-import App from './App.vue'
-import './components'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+import Vue from 'vue'
+import App from './App.vue'
+import VueMask from 'v-mask'
+import './components'
+
+Vue.use(VueMask)
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')