@pocketprep/ui-kit 3.0.17 → 3.0.19

package/lib/components/Icons/Icon.md

@@ -75,6 +75,8 @@
             <Icon type="review-flag" title="review-flag" />
             <Icon type="levelup" title="levelup" />
             <Icon type="lightbulb" title="lightbulb" />
+            <Icon type="chat" title="chat" />
+            <Icon type="preview" title="preview" />
         </div>
     </div>
 </template>

package/lib/components/Icons/Icon.vue

@@ -64,6 +64,8 @@
     <IconLaunch v-else-if="type === 'launch'" :title="title" />
     <IconLevelUp v-else-if="type === 'levelup'" :title="title" />
     <IconLightbulb v-else-if="type === 'lightbulb'" :title="title" />
+    <IconChat v-else-if="type === 'chat'" :title="title" />
+    <IconPreview v-else-if="type === 'preview'" :title="title" />
 </template>
 
 <script lang="ts">
@@ -125,6 +127,8 @@ import IconList from './IconList.vue'
 import IconLaunch from './IconLaunch.vue'
 import IconLevelUp from './IconLevelUp.vue'
 import IconLightbulb from './IconLightbulb.vue'
+import IconChat from './IconChat.vue'
+import IconPreview from './IconPreview.vue'
 import type { TIconType } from './icon'
 
 @Component({
@@ -186,6 +190,8 @@ import type { TIconType } from './icon'
         IconLaunch,
         IconLevelUp,
         IconLightbulb,
+        IconChat,
+        IconPreview,
     },
 })
 export default class Icon extends Vue {

package/lib/components/Icons/IconChat.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="chat" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconChat.vue

@@ -0,0 +1,18 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.75001 8.5C1.75001 7.27755 2.42412 6.10753 3.64023 5.21572C4.85589 4.32423 6.57164 3.75 8.50001 3.75C10.4284 3.75 12.1441 4.32423 13.3598 5.21572C14.4185 5.99209 15.0664 6.97931 15.2164 8.02842C15.4742 8.00962 15.7356 8 16 8C16.245 8 16.4874 8.00826 16.7268 8.02443C16.5685 6.40937 15.6128 5.00779 14.2468 4.00611C12.748 2.90699 10.7138 2.25 8.50001 2.25C6.28624 2.25 4.25198 2.90699 2.75318 4.00611C1.25483 5.1049 0.250006 6.68489 0.250006 8.5C0.250006 9.86533 0.819982 11.1006 1.74075 12.0955C1.53032 12.3132 1.28822 12.5421 1.00995 12.7823L0.0957642 13.5716L1.20857 14.041C2.75827 14.6948 4.19221 14.6652 5.38996 14.2938C6.2229 14.5491 7.12207 14.7043 8.06046 14.7413C8.02055 14.4984 8 14.251 8 14C8 13.7426 8.02161 13.489 8.06355 13.2401C7.19311 13.2006 6.37011 13.0439 5.6237 12.7937L5.37696 12.7109L5.132 12.7988C4.50107 13.0252 3.76711 13.1309 2.95171 12.9983C3.09984 12.8391 3.23614 12.6822 3.36133 12.5274L3.81754 11.9631L3.26858 11.4885C2.28708 10.64 1.75001 9.5932 1.75001 8.5Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.9687 19.6781C21.3237 19.6332 20.7087 19.4233 20.1491 19.131C18.9393 19.6824 17.5191 20 16 20C11.5817 20 8 17.3137 8 14C8 10.6863 11.5817 8 16 8C20.4183 8 24 10.6863 24 14C24 15.3328 23.4206 16.5641 22.4403 17.56C22.5258 17.7312 22.6279 17.9166 22.7487 18.1186C22.9696 18.4877 23.253 18.912 23.6119 19.4057C23.0532 19.6398 22.5008 19.7151 21.9687 19.6781ZM24.2661 17.7161C25.0337 16.6469 25.5 15.3821 25.5 14C25.5 11.7652 24.2887 9.85625 22.5569 8.55736C20.8255 7.25882 18.5023 6.5 16 6.5C13.4977 6.5 11.1745 7.25882 9.44315 8.55736C7.71129 9.85625 6.5 11.7652 6.5 14C6.5 16.2348 7.71129 18.1438 9.44315 19.4426C11.1745 20.7412 13.4977 21.5 16 21.5C17.4667 21.5 18.8667 21.2397 20.121 20.7663C21.286 21.2276 22.7063 21.4114 24.1915 20.7892L25.9395 20.0568L24.8252 18.5238C24.6046 18.2203 24.4201 17.9526 24.2661 17.7161Z" fill="currentColor"/>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconChat extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconPreview.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="preview" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconPreview.vue

@@ -0,0 +1,19 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M23 4.5H3C2.72386 4.5 2.5 4.72386 2.5 5V19C2.5 19.2761 2.72386 19.5 3 19.5H23C23.2761 19.5 23.5 19.2761 23.5 19V5C23.5 4.72386 23.2761 4.5 23 4.5ZM3 3C1.89543 3 1 3.89543 1 5V19C1 20.1046 1.89543 21 3 21H23C24.1046 21 25 20.1046 25 19V5C25 3.89543 24.1046 3 23 3H3Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.26099 14.75C7.26099 14.3358 7.59677 14 8.01099 14H17.9892C18.4035 14 18.7392 14.3358 18.7392 14.75C18.7392 15.1642 18.4035 15.5 17.9892 15.5H8.01099C7.59677 15.5 7.26099 15.1642 7.26099 14.75ZM7.26099 17.25C7.26099 16.8358 7.59677 16.5 8.01099 16.5H17.9892C18.4035 16.5 18.7392 16.8358 18.7392 17.25C18.7392 17.6642 18.4035 18 17.9892 18H8.01099C7.59677 18 7.26099 17.6642 7.26099 17.25ZM8.01099 19C7.59677 19 7.26099 19.3358 7.26099 19.75C7.26099 20.1642 7.59677 20.5 8.01099 20.5H17.9892C18.4035 20.5 18.7392 20.1642 18.7392 19.75C18.7392 19.3358 18.4035 19 17.9892 19H8.01099Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.67383 8.5V10.5H19.326V8.5H6.67383ZM5.67383 7C5.39769 7 5.17383 7.22386 5.17383 7.5V11.5C5.17383 11.7761 5.39769 12 5.67383 12H20.326C20.6021 12 20.826 11.7761 20.826 11.5V7.5C20.826 7.22386 20.6021 7 20.326 7H5.67383Z" fill="currentColor"/>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconPreview extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/icon.d.ts

@@ -55,4 +55,6 @@ export type TIconType =
     | 'review-flag'
     | 'launch'
     | 'levelup'
-    | 'lightbulb'
+    | 'lightbulb'
+    | 'chat'
+    | 'preview'

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.19",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {