@pocketprep/ui-kit 3.0.17 → 3.0.18

package/lib/components/Onboarding/EmailAuth.vue

@@ -12,7 +12,8 @@
                 'uikit-email-auth__magic-code-entry--error': errorMessage,
             }"
             :error="errorMessage"
-            @update:modelValue="magicCodeChange" 
+            :modelValue="modelValue"
+            @update:modelValue="emitUpdateModelValue" 
             @error="(err: string) => errorMessage = err"
             @submit="submitSignIn"
         />
@@ -25,8 +26,8 @@
             :class="{
                 'uikit-email-auth__sign-in-btn--error': errorMessage,
             }"
-            :disabled="code.length !== 6 || isLoading"
-            :autofocus="code.length === 6"
+            :disabled="modelValue.length !== 6 || isLoading"
+            :autofocus="modelValue.length === 6"
             @click="submitSignIn"
         >
             Sign In
@@ -60,8 +61,8 @@ import MagicCodeEntry from '../Onboarding/MagicCodeEntry.vue'
 export default class EmailAuth extends Vue {
     @Prop({ default: '' }) parentError!: string
     @Prop() email!: string
+    @Prop({ default: '' }) modelValue!: string
 
-    code = ''
     errorMessage = ''
     isLoading = false
     isResending = false
@@ -78,11 +79,11 @@ export default class EmailAuth extends Vue {
         this.isLoading = true
         this.errorMessage = ''
 
-        if (this.email && this.code) {
-            if (this.code.trim().length !== 6) {
+        if (this.email && this.modelValue) {
+            if (this.modelValue.trim().length !== 6) {
                 this.errorMessage = 'Code must be six digits'
             } else {
-                this.emitSubmit({ email: this.email, code: this.code })
+                this.emitSubmit({ email: this.email, code: this.modelValue })
             }
         }
 
@@ -96,11 +97,6 @@ export default class EmailAuth extends Vue {
         this.isResending = false
     }
 
-    magicCodeChange (code: string) {
-        this.code = code
-        this.emitUpdateModelValue(code)
-    }
-
     @Emit('submit')
     emitSubmit (results: { email: string; code: string}) {
         return results

package/lib/components/Onboarding/MagicCodeEntry.vue

@@ -10,12 +10,16 @@
             }"
         />
         <input
-            v-model="code"
+            :value="modelValue"
+            @input="event => event.target
+                && 'value' in event.target
+                && emitUpdateModelValue(event.target.value as string)
+            "
             aria-label="Magic code input field"
             class="uikit-magic-code__code-input"
             type="text"
             maxlength="6"
-            :autofocus="code.length !== 6"
+            :autofocus="modelValue.length !== 6"
             @focus="highlightInput = true"
             @blur="highlightInput = false"
             @click="handleClick"
@@ -25,15 +29,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, Prop, Emit } from 'vue-facing-decorator'
+import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
 
 @Component
 export default class MagicCodeEntry extends Vue {
     @Prop({ default: false }) error!: boolean
+    @Prop({ default: '' }) modelValue!: string
 
     highlightInput = false
     cursorIndex = 0
-    code = ''
 
     mounted () {
         // Ensure proper letter spacing for magic code in case of a11y browser extension overrides
@@ -65,18 +69,22 @@ export default class MagicCodeEntry extends Vue {
         }
 
         if (event.key.match(/[0-9]/)) {
-            this.code = this.code.slice(0, this.cursorIndex) + event.key + this.code.slice(this.cursorIndex + 1)
+            const code = this.modelValue.slice(0, this.cursorIndex)
+                + event.key + this.modelValue.slice(this.cursorIndex + 1)
+            this.emitUpdateModelValue(code)
             this.cursorIndex = Math.min(this.cursorIndex + 1, 5)
         } else if (event.key === 'ArrowLeft') {
             this.cursorIndex = Math.max(this.cursorIndex - 1, 0)
         } else if (event.key === 'ArrowRight') {
             this.cursorIndex = Math.min(this.cursorIndex + 1, 5)
         } else if (event.key === 'Backspace') {
-            if (this.code[this.cursorIndex]) {
-                this.code = (this.code.slice(0, this.cursorIndex) + ' ' + this.code.slice(this.cursorIndex + 1))
-                    .trimRight()
+            if (this.modelValue[this.cursorIndex]) {
+                const code = (
+                    this.modelValue.slice(0, this.cursorIndex) + ' ' + this.modelValue.slice(this.cursorIndex + 1)
+                ).trimEnd()
+                this.emitUpdateModelValue(code)
             }
-            this.cursorIndex = Math.min(Math.max(this.cursorIndex - 1, 0), this.code.length)
+            this.cursorIndex = Math.min(Math.max(this.cursorIndex - 1, 0), this.modelValue.length)
         } else if (event.key === 'Enter') {
             this.emitSubmit()
         }
@@ -93,7 +101,7 @@ export default class MagicCodeEntry extends Vue {
         this.emitError('')
         const pasteValue = event.clipboardData?.getData('text')
         if (pasteValue && typeof Number(pasteValue) === 'number' && pasteValue.length === 6) {
-            this.code = ''
+            this.emitUpdateModelValue('')
             this.cursorIndex = Math.min(pasteValue.length, 5)
         } else if (pasteValue) {
             this.emitError(`Invalid code: ${pasteValue}. Code must be six digits`)
@@ -101,11 +109,6 @@ export default class MagicCodeEntry extends Vue {
         }
     }
 
-    @Watch('code')
-    codeChanged (newVal: string) {
-        this.emitUpdateModelValue(newVal)
-    }
-
     @Emit('submit')
     emitSubmit () {
         return true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.0.17",
+  "version": "3.0.18",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {