adata-ui 0.1.32 → 0.1.35

package/src/components/TextField/TextField.vue

@@ -1,35 +1,22 @@
 <template>
   <div class="adt-text-block">
-    <div class="adt-text-block__field">
+    <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="enterPressed"
+          @keyup.enter="pressedEnter"
           class="adt-text-block__input"
           :class="{ error: !!errorText }"
+          @input="() => {$emit('input', value)}"
       />
-      <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>
+      <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">
@@ -49,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,
@@ -70,10 +60,6 @@ export default {
       type: String,
       default: ""
     },
-    value: {
-      type: String,
-      required: true,
-    },
     placeholder: {
       type: String,
       default: ""
@@ -87,12 +73,10 @@ export default {
       default: false
     }
   },
-  components: {
-    TheMask
-  },
   data() {
     return {
-      showPlaceholder: false
+      showPlaceholder: false,
+      value: ""
     }
   },
   computed: {
@@ -101,10 +85,9 @@ export default {
     }
   },
   methods: {
-    enterPressed() {
-      this.$emit('enterPressed')
-    },
-
+    pressedEnter() {
+      this.$emit('enterPressed', this.value);
+    }
   }
 }
-</script>
+</script>

package/src/components/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import AButton from './Button/BaseButton'
+import AButton from './Button/AButton'
 import ATextField from './TextField/TextField'
 import APasswordField from './PasswordField/PasswordField'
 import AAlert from './Alert/Alert'

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')