@fouro/elx - npm Package Compare versions

Comparing version 1.0.54 to 1.0.55

package.json

 {
   "name": "@fouro/elx",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "description": "element-ui components",
@@ -5,0 +5,0 @@ "main": "/src",

src/fields/Password.vue

 <template>
-  <el-input type='text' v-model="inputValue" v-bind="$attrs"></el-input>
+  <div @paste="onPaste" @copy="onCopy" @keydown="onKeydown">
+    <el-input ref="input" type='text' v-model="inputValue" v-bind="$attrs"></el-input>
+  </div>
 </template>
@@ -61,2 +63,7 @@ <script>
       encoded: false,
+      deleting: false,
+      backspacing: false,
+      selectionStart: null,
+      selectionEnd: null,
+      target: null
     }
@@ -68,17 +75,28 @@ },
         if (!this.encoded) {
-          if ((newValue.length == oldValue.length + 1) && newValue.indexOf(oldValue) == 0) {
-            // user inputs
-            this.realValue += newValue.slice(oldValue.length)
-            this.inputValue = this.realValue.replace(/[\S\s]/g, '*')
-            this.encoded = true
-          } else if ((newValue.length == oldValue.length - 1) && oldValue.indexOf(newValue) == 0) {
-            // user deletes
-            this.realValue = this.realValue.slice(0, newValue.length)
+          if (this.deleting) {
+            if (this.selectionStart == this.selectionEnd) {
+              this.realValue = this.realValue.slice(0, this.selectionStart) + this.realValue.slice(this.selectionEnd + 1)
+            } else {
+              this.realValue = this.realValue.slice(0, this.selectionStart) + this.realValue.slice(this.selectionEnd)
+            }
+            this.deleting = false
+          } else if (this.backspacing) {
+            if (this.selectionStart == this.selectionEnd) {
+              this.realValue = this.realValue.slice(0, this.selectionStart - 1) + this.realValue.slice(this.selectionEnd)
+            } else {
+              this.realValue = this.realValue.slice(0, this.selectionStart) + this.realValue.slice(this.selectionEnd)
+            }
+            this.backspacing = false
           } else {
-            // user pastes or something
-            this.realValue = newValue
+            if (this.realValue) this.realValue = this.realValue.slice(0, this.selectionStart) + newValue.slice(this.selectionStart, this.target.selectionEnd) + this.realValue.slice(this.selectionEnd)
+            else this.realValue = newValue
             this.inputValue = this.realValue.replace(/[\S\s]/g, '*')
             this.encoded = true
           }
+          this.selectionStart = this.target.selectionStart
+          this.selectionEnd = this.target.selectionEnd
         } else {
+          this.$nextTick(() => {
+            this.target.setSelectionRange(this.selectionStart, this.selectionEnd)
+          })
           this.encoded = false
@@ -94,4 +112,30 @@ }
     this.inputValue = this.value
-  }
+  },
+  methods: {
+    onPaste(e) {
+      this.selectionStart = e.target.selectionStart
+      this.selectionEnd = e.target.selectionEnd
+    },
+    onCopy(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.clipboardData.setData('text/plain', this.realValue.slice(e.target.selectionStart, e.target.selectionEnd))
+    },
+    onKeydown(e) {
+      this.selectionStart = e.target.selectionStart
+      this.selectionEnd = e.target.selectionEnd
+      if (!(this.selectionStart == 0 && this.selectionEnd == 0)) {
+        if (e.key == 'Backspace') {
+          this.backspacing = true
+        } else if (e.key == 'Delete') {
+          this.deleting = true
+        }
+      } else {
+        this.backspacing = false
+        this.deleting = false
+      }
+      if (!this.target) this.target = e.target
+    }
+  },
 }
 </script>

No alert changes

Improved metrics

Total package byte prevSize

910396

0.19%

No dependency changes