@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Modal/ModalContainer.vue

@@ -11,7 +11,7 @@
         @keydown="keydownListener"
     >
         <div
-            class="uikit-modal-container__clickable" 
+            class="uikit-modal-container__clickable"
             @click.self="emitClose"
             @mousedown.self.prevent
         />
@@ -33,160 +33,162 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit, Watch } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Modal from '../Modal/Modal.vue'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        Modal,
-    },
-})
-export default class ModalContainer extends Vue {
-    @Prop({ default: false }) showCloseButton!: boolean
-    @Prop({ default: () => ({}) }) customCloseStyles?: { [key: string]: unknown }
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: true }) trapFocus!: boolean
-    @Prop({ default: false }) removeHeadBorderBottom!: boolean
-
-    focusListener: Parameters<typeof addEventListener>[1] | null = null
-    savedYPosition = 0
-    modalNumber = 0
-
-    numberOfModals () {
-        return document.querySelectorAll('.uikit-modal-container').length
+import { dark as vDark } from '../../directives'
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+
+const {
+    showCloseButton = false,
+    customCloseStyles = {},
+    isDarkMode = false,
+    trapFocus = true,
+    removeHeadBorderBottom = false,
+} = defineProps<{
+    showCloseButton?: boolean
+    customCloseStyles?: Record<string, string>
+    isDarkMode?: boolean
+    trapFocus?: boolean
+    removeHeadBorderBottom?: boolean
+}>()
+
+const emit = defineEmits<{
+    'close': []
+    'mounted': []
+    'unmounted': []
+}>()
+
+const focusListener = ref<Parameters<typeof addEventListener>[1] | null>(null)
+const modalNumber = ref(0)
+
+const modalContainerRef = useTemplateRef<HTMLElement>('modalContainer')
+
+const numberOfModals = () => {
+    return document.querySelectorAll('.uikit-modal-container').length
+}
+
+onMounted(() => {
+    modalNumber.value = numberOfModals()
+    // Prevent an error where multiple modals trigger a loop
+    // TODO: Find a way to have only the latest modal's focusListener active
+
+    const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
+
+    // Reset focus to last element in modal so next tab will move it to top
+    const modalContainerEl = modalContainerRef.value
+    const modalFocusableEls = modalContainerEl && Array.from<HTMLElement>(modalContainerEl
+        .querySelectorAll(focusableSelectors))
+        .filter(el => !('disabled' in el && el.disabled === true))
+    if (modalFocusableEls?.length) {
+        modalFocusableEls[modalFocusableEls.length - 1]?.focus()
+        modalFocusableEls[modalFocusableEls.length - 1]?.blur()
     }
 
-    mounted () {
-        this.modalNumber = this.numberOfModals()
-        // Prevent an error where multiple modals trigger a loop
-        // TODO: Find a way to have only the latest modal's focusListener active
-
-        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]'
-    
-        // Reset focus to last element in modal so next tab will move it to top
-        const modalContainerEl = this.$refs['modalContainer'] as HTMLElement
-        const modalFocusableEls = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(focusableSelectors))
-        if (modalFocusableEls.length) {
-            modalFocusableEls[modalFocusableEls.length - 1]?.focus()
-            modalFocusableEls[modalFocusableEls.length - 1]?.blur()
-        }
-    
-
-        this.focusListener = event => {
-            if (this.modalNumber === this.numberOfModals()) { // Only focus on the last open panel
-                const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
-                const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
-                const hasCalendarClass = target 
-                        && Array.from(target.classList).find(
-                            c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
-                        )
-                if (isFocusOutside && !hasCalendarClass) {
-                    const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
-                        focusableSelectors
-                    ))
-                    const firstFocusableModalChild = focusableModalChildren.find(
-                        el => !!el.getBoundingClientRect().width
-                    )
-                    const reversedModalChildren = [ ...focusableModalChildren ].reverse()
-                    const lastFocusableModalChild = reversedModalChildren.find(
-                        el => !!el.getBoundingClientRect().width
-                    )
-                    if (firstFocusableModalChild) {
-                        const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
-                        if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
-                            // If focus moves from first element -> outside modal, focus the last element instead
-                            lastFocusableModalChild.focus()
-                        } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
-                            // If focus moves from last element -> outside modal, focus the first element instead
-                            firstFocusableModalChild.focus()
-                        } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
-                            // If focus goes outside in a different way, return focus to where it came from if possible
-                            relatedTarget.focus()
-                        } else {
-                            // Otherwise, just return focus to the first element
-                            firstFocusableModalChild.focus()
-                        }
+    focusListener.value = event => {
+        if (modalNumber.value === numberOfModals()) { // Only focus on the last open panel
+            const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+            const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
+            const hasCalendarClass = target?.classList
+                && Array.from(target.classList).find(
+                    c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
+                )
+            if (isFocusOutside && !hasCalendarClass) {
+                const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
+                    focusableSelectors
+                ))
+                const firstFocusableModalChild = focusableModalChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                const reversedModalChildren = [ ...focusableModalChildren ].reverse()
+                const lastFocusableModalChild = reversedModalChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                if (firstFocusableModalChild) {
+                    const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                    if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
+                        // If focus moves from first element -> outside modal, focus the last element instead
+                        lastFocusableModalChild.focus()
+                    } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
+                        // If focus moves from last element -> outside modal, focus the first element instead
+                        firstFocusableModalChild.focus()
+                    } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
+                        // If focus goes outside in a different way, return focus to where it came from if possible
+                        relatedTarget.focus()
                     } else {
-                        // If the modal doesn't have any focusable children, focus the container instead
-                        if (modalContainerEl.tabIndex === -1) {
-                            modalContainerEl.tabIndex = 0
-                        }
-                        modalContainerEl.focus()
+                        // Otherwise, just return focus to the first element
+                        firstFocusableModalChild.focus()
                     }
+                } else {
+                    // If the modal doesn't have any focusable children, focus the container instead
+                    if (modalContainerEl.tabIndex === -1) {
+                        modalContainerEl.tabIndex = 0
+                    }
+                    modalContainerEl.focus()
                 }
             }
         }
-        // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
-        if (this.trapFocus) {
-            document.addEventListener('focusin', this.focusListener)
-        }
-
-        // prevent scrolling outside of modal
-        const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
-        document.body.setAttribute('data-openModalCount', String(openModalCount + 1))
-        document.body.classList.add('uikit-modal-open')
-
-        this.emitMounted()
     }
-
-    beforeUnmount () {
-        if (this.focusListener) {
-            document.removeEventListener('focusin', this.focusListener)
-        }
-
-        const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
-        document.body.setAttribute('data-openModalCount', String(openModalCount - 1))
-        if (openModalCount <= 1) {
-            document.body.classList.remove('uikit-modal-open')
-        }
-        this.emitUnmounted()
+    // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
+    if (trapFocus) {
+        document.addEventListener('focusin', focusListener.value)
     }
 
-    keydownListener (e: Event | KeyboardEvent) {
-        if (!('key' in e)) {
-            return
-        }
+    // prevent scrolling outside of modal
+    const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
+    document.body.setAttribute('data-openModalCount', String(openModalCount + 1))
+    document.body.classList.add('uikit-modal-open')
 
-        if (e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
-            e.stopPropagation()
-        }
+    emitMounted()
+})
 
-        if (e.key === 'Escape') {
-            this.emitClose()
-        }
+onBeforeUnmount(() => {
+    if (focusListener.value) {
+        document.removeEventListener('focusin', focusListener.value)
     }
 
-    @Emit('close')
-    emitClose () {
-        return true
+    const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
+    document.body.setAttribute('data-openModalCount', String(openModalCount - 1))
+    if (openModalCount <= 1) {
+        document.body.classList.remove('uikit-modal-open')
     }
+    emitUnmounted()
+})
 
-    @Emit('mounted')
-    emitMounted () {
-        return true
+const keydownListener = (e: Event | KeyboardEvent) => {
+    if (!('key' in e)) {
+        return
     }
 
-    @Emit('unmounted')
-    emitUnmounted () {
-        return true
+    if (e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+        e.stopPropagation()
     }
 
-    @Watch('trapFocus')
-    toggleTrapFocus () {
-        if (this.focusListener) {
-            if (this.trapFocus) {
-                document.addEventListener('focusin', this.focusListener)
-            } else {
-                document.removeEventListener('focusin', this.focusListener)
-            }
-        }
+    if (e.key === 'Escape') {
+        emitClose()
     }
 }
+
+const emitClose = () => {
+    emit('close')
+}
+
+const emitMounted = () => {
+    emit('mounted')
+}
+
+const emitUnmounted = () => {
+    emit('unmounted')
+}
+
+watch(() => trapFocus, () => {
+    if (focusListener.value) {
+        if (trapFocus) {
+            document.addEventListener('focusin', focusListener.value)
+        } else {
+            document.removeEventListener('focusin', focusListener.value)
+        }
+    }
+})
 </script>
 
 <style lang="scss">
@@ -246,4 +248,4 @@ export default class ModalContainer extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Onboarding/EmailAuth.vue

@@ -11,9 +11,9 @@
             :class="{
                 'uikit-email-auth__magic-code-entry--error': errorMessage,
             }"
-            :error="errorMessage"
+            :error="!!errorMessage"
             :modelValue="modelValue"
-            @update:modelValue="emitUpdateModelValue" 
+            @update:modelValue="emitUpdateModelValue"
             @error="(err: string) => errorMessage = err"
             @submit="submitSignIn"
         />
@@ -21,7 +21,7 @@
             <Icon class="uikit-email-auth__error-message-icon" type="warning" />
             <span>{{ errorMessage }}</span>
         </div>
-        <Button
+        <PocketButton
             class="uikit-email-auth__sign-in-btn"
             :class="{
                 'uikit-email-auth__sign-in-btn--error': errorMessage,
@@ -32,94 +32,90 @@
             @click="submitSignIn"
         >
             Sign In
-        </Button>
-        <Button
+        </PocketButton>
+        <PocketButton
             type="tertiary"
             class="uikit-email-auth__resend-email-btn"
             :disabled="isResending"
             @click="resendEmail"
         >
             Resend Email
-        </Button>
+        </PocketButton>
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import Button from '../Buttons/Button.vue'
-import Link from '../Buttons/Link.vue'
+import PocketButton from '../Buttons/Button.vue'
 import MagicCodeEntry from '../Onboarding/MagicCodeEntry.vue'
-
-@Component({
-    components: {
-        Button,
-        Link,
-        Icon,
-        MagicCodeEntry,
-    },
-})
-export default class EmailAuth extends Vue {
-    @Prop({ default: '' }) parentError!: string
-    @Prop({ default: false }) parentIsLoading!: boolean
-    @Prop() email!: string
-    @Prop({ default: '' }) modelValue!: string
-
-    errorMessage = ''
-    isLoading = false
-    isResending = false
-    highlightInput = false
-
-    @Watch('parentError')
-    parentErrorChanged (newVal: string, oldVal: string) {
-        if (newVal !== oldVal) {
-            this.errorMessage = newVal
-        }
-    }
-
-    @Watch('parentIsLoading')
-    parentIsLoadingChanged (newVal: boolean, oldVal: boolean) {
-        if (newVal !== oldVal) {
-            this.isLoading = newVal
+import { ref, watch } from 'vue'
+
+const {
+    parentError = '',
+    parentIsLoading = false,
+    email,
+    modelValue = '',
+} = defineProps<{
+    parentError?: string
+    parentIsLoading?: boolean
+    email: string
+    modelValue?: string
+}>()
+
+const emit = defineEmits<{
+    'submit': [results: { email: string; code: string }]
+    'resend': [resendInfo: { email: string }]
+    'update:modelValue': [code: string]
+}>()
+
+const errorMessage = ref('')
+const isLoading = ref(false)
+const isResending = ref(false)
+
+const submitSignIn = () => {
+    isLoading.value = true
+    errorMessage.value = ''
+
+    if (email && modelValue) {
+        if (modelValue.trim().length !== 6) {
+            errorMessage.value = 'Code must be six digits'
+        } else {
+            emitSubmit({ email, code: modelValue })
         }
     }
 
-    submitSignIn () {
-        this.isLoading = true
-        this.errorMessage = ''
+    isLoading.value = false
+}
 
-        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.modelValue })
-            }
-        }
+const resendEmail = () => {
+    errorMessage.value = ''
+    isResending.value = true
+    emitResend({ email })
+    isResending.value = false
+}
 
-        this.isLoading = false
+watch(() => parentError, (newVal: string, oldVal: string) => {
+    if (newVal !== oldVal) {
+        errorMessage.value = newVal
     }
+})
 
-    resendEmail () {
-        this.errorMessage = ''
-        this.isResending = true
-        this.emitResend({ email: this.email })
-        this.isResending = false
+watch(() => parentIsLoading, (newVal: boolean, oldVal: boolean) => {
+    if (newVal !== oldVal) {
+        isLoading.value = newVal
     }
+})
 
-    @Emit('submit')
-    emitSubmit (results: { email: string; code: string }) {
-        return results
-    }
+const emitSubmit = (results: { email: string; code: string }) => {
+    emit('submit', results)
+}
 
-    @Emit('resend')
-    emitResend (resendInfo: { email: string }) {
-        return resendInfo
-    }
+const emitResend = (resendInfo: { email: string }) => {
+    emit('resend', resendInfo)
+}
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (code: string) {
-        return code
-    }
+const emitUpdateModelValue = (code: string) => {
+    emit('update:modelValue', code)
 }
 </script>
 
@@ -220,4 +216,4 @@ export default class EmailAuth extends Vue {
         }
     }
 }
-</style>
+</style>