@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Onboarding/MagicCodeEntry.vue

@@ -28,101 +28,106 @@
     </div>
 </template>
 
-<script lang="ts">
-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
-
-    mounted () {
-        // Ensure proper letter spacing for magic code in case of a11y browser extension overrides
-        setTimeout(() => {
-            const codeInputEl = document.querySelector('.uikit-magic-code__code-input')
-            if (codeInputEl instanceof HTMLElement) {
-                codeInputEl.style.letterSpacing = '35.5px'
-            }
-        }, 500)
-    }
-
-    handleKeyDown (event: Event | KeyboardEvent) {
-        if (!('key' in event)) {
-            return
-        }
-
-        // Allow tab, refresh, and paste events to pass through, otherwise prevent default keydown behavior
-        if (
-            !event.metaKey
-            && (
-                event.key.match(/^[0-9]$/)
-                || event.key === 'ArrowLeft'
-                || event.key === 'ArrowRight'
-                || event.key === 'Backspace'
-                || event.key === 'Enter'
-            )
-        ) {
-            event.preventDefault()
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const {
+    error = false,
+    modelValue = '',
+} = defineProps<{
+    error?: boolean
+    modelValue?: string
+}>()
+
+const emit = defineEmits<{
+    'submit': []
+    'error': [errorMessage: string]
+    'update:modelValue': [code: string]
+}>()
+
+const highlightInput = ref(false)
+const cursorIndex = ref(0)
+
+onMounted(() => {
+    // Ensure proper letter spacing for magic code in case of a11y browser extension overrides
+    setTimeout(() => {
+        const codeInputEl = document.querySelector('.uikit-magic-code__code-input')
+        if (codeInputEl instanceof HTMLElement) {
+            codeInputEl.style.letterSpacing = '35.5px'
         }
+    }, 500)
+})
 
-        if (event.key.match(/[0-9]/)) {
-            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.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.modelValue.length)
-        } else if (event.key === 'Enter') {
-            this.emitSubmit()
-        }
+const handleKeyDown = (event: Event | KeyboardEvent) => {
+    if (!('key' in event)) {
+        return
     }
 
-    handleClick (event: MouseEvent) {
-        const selectionEnd = (event.target as HTMLInputElement)?.selectionEnd
-        if (selectionEnd !== null) {
-            this.cursorIndex = selectionEnd
-        }
+    // Allow tab, refresh, and paste events to pass through, otherwise prevent default keydown behavior
+    if (
+        !event.metaKey
+        && (
+            event.key.match(/^[0-9]$/)
+            || event.key === 'ArrowLeft'
+            || event.key === 'ArrowRight'
+            || event.key === 'Backspace'
+            || event.key === 'Enter'
+        )
+    ) {
+        event.preventDefault()
     }
 
-    handlePaste (event: ClipboardEvent) {
-        this.emitError('')
-        const pasteValue = event.clipboardData?.getData('text')
-        if (pasteValue && typeof Number(pasteValue) === 'number' && pasteValue.length === 6) {
-            this.emitUpdateModelValue('')
-            this.cursorIndex = Math.min(pasteValue.length, 5)
-        } else if (pasteValue) {
-            this.emitError(`Invalid code: ${pasteValue}. Code must be six digits`)
-            event.preventDefault()
+    if (event.key.match(/[0-9]/)) {
+        const code = modelValue.slice(0, cursorIndex.value)
+            + event.key + modelValue.slice(cursorIndex.value + 1)
+        emitUpdateModelValue(code)
+        cursorIndex.value = Math.min(cursorIndex.value + 1, 5)
+    } else if (event.key === 'ArrowLeft') {
+        cursorIndex.value = Math.max(cursorIndex.value - 1, 0)
+    } else if (event.key === 'ArrowRight') {
+        cursorIndex.value = Math.min(cursorIndex.value + 1, 5)
+    } else if (event.key === 'Backspace') {
+        if (modelValue[cursorIndex.value]) {
+            const code = (
+                modelValue.slice(0, cursorIndex.value) + ' ' + modelValue.slice(cursorIndex.value + 1)
+            ).trimEnd()
+            emitUpdateModelValue(code)
         }
+        cursorIndex.value = Math.min(Math.max(cursorIndex.value - 1, 0), modelValue.length)
+    } else if (event.key === 'Enter') {
+        emitSubmit()
     }
+}
 
-    @Emit('submit')
-    emitSubmit () {
-        return true
+const handleClick = (event: MouseEvent) => {
+    const selectionEnd = (event.target as HTMLInputElement)?.selectionEnd
+    if (selectionEnd !== null) {
+        cursorIndex.value = selectionEnd
     }
+}
 
-    @Emit('error')
-    emitError (errorMessage: string) {
-        return errorMessage
+const handlePaste = (event: ClipboardEvent) => {
+    emitError('')
+    const pasteValue = event.clipboardData?.getData('text')
+    if (pasteValue && typeof Number(pasteValue) === 'number' && pasteValue.length === 6) {
+        emitUpdateModelValue('')
+        cursorIndex.value = Math.min(pasteValue.length, 5)
+    } else if (pasteValue) {
+        emitError(`Invalid code: ${pasteValue}. Code must be six digits`)
+        event.preventDefault()
     }
+}
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (code: string) {
-        return code
-    }
+const emitSubmit = () => {
+    emit('submit')
+}
+
+const emitError = (errorMessage: string) => {
+    emit('error', errorMessage)
+}
+
+const emitUpdateModelValue = (code: string) => {
+    emit('update:modelValue', code)
 }
 </script>
 
@@ -188,4 +193,4 @@ export default class MagicCodeEntry extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Pagination/QuestionReviewPagination.vue

@@ -15,7 +15,7 @@
             <Icon
                 type="paginationArrow"
                 class="uikit-question-review-pagination__previous-icon"
-            />  
+            />
         </div>
         <span class="uikit-question-review-pagination__info">
             {{ currentPage + 1 }} / {{ total }} <slot />
@@ -35,7 +35,7 @@
             <Icon
                 type="paginationArrow"
                 class="uikit-question-review-pagination__next-icon"
-            />    
+            />
         </div>
     </div>
 </template>
@@ -119,4 +119,4 @@ const changePage = (direction: 'next' | 'previous') => {
         height: 24px;
     }
 }
-</style>
+</style>

package/lib/components/Pagination/TablePagination.vue

@@ -1,9 +1,9 @@
 <template>
-    <div 
+    <div
         v-dark="isDarkMode"
         class="uikit-table-pagination"
     >
-        <div 
+        <div
             ref="pagination_info"
             v-dark="isDarkMode"
             class="uikit-table-pagination__info"
@@ -70,52 +70,55 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
-
-@Component({
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-    },
+import { dark as vDark } from '../../directives'
+import { computed, useTemplateRef } from 'vue'
+
+const {
+    perPage = 10,
+    currentPage = 0,
+    total,
+    unit,
+    isDarkMode = false,
+    showFirstAndLastBtn = false,
+} = defineProps<{
+    perPage?: number
+    currentPage?: number
+    total: number
+    unit: string
+    isDarkMode?: boolean
+    showFirstAndLastBtn?: boolean
+}>()
+
+const emit = defineEmits<{
+    'changePage': [pageNum: number]
+}>()
+
+const paginationInfoRef = useTemplateRef<HTMLElement>('pagination_info')
+
+const nextPageDisabled = computed(() => {
+    return currentPage >= Math.floor((total - 1) / perPage)
 })
-export default class TablePagination extends Vue {
-    @Prop({ default: 10 }) perPage!: number
-    @Prop({ default: 0 }) currentPage!: number
-    @Prop() total!: number
-    @Prop() unit!: string
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) showFirstAndLastBtn!: boolean
-
-    get nextPageDisabled () {
-        return this.currentPage >= Math.floor((this.total - 1) / this.perPage)
-    }
 
-    get showAdvancedPagination () {
-        if (!this.showFirstAndLastBtn) {
-            return false
-        } else {
-            return Math.floor((this.total - 1) / this.perPage) >= 3
-        }
+const showAdvancedPagination = computed(() => {
+    if (!showFirstAndLastBtn) {
+        return false
+    } else {
+        return Math.floor((total - 1) / perPage) >= 3
     }
+})
 
-    @Emit('changePage')
-    changePage (direction: 'next' | 'previous' | 'first' | 'last') {
-        const paginationInfo = this.$refs['pagination_info'] as HTMLElement
-        paginationInfo.focus()
-        if (direction === 'next') {
-            return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
-        } else if (direction === 'first') {
-            return 0
-        } else if (direction === 'last') {
-            return Math.floor((this.total - 1) / this.perPage)
-        } else {
-            return Math.max(0, this.currentPage - 1)
-        }
+const changePage = (direction: 'next' | 'previous' | 'first' | 'last') => {
+    paginationInfoRef.value?.focus()
+    if (direction === 'next') {
+        emit('changePage', nextPageDisabled.value ? currentPage : currentPage + 1)
+    } else if (direction === 'first') {
+        emit('changePage', 0)
+    } else if (direction === 'last') {
+        emit('changePage', Math.floor((total - 1) / perPage))
+    } else {
+        emit('changePage', Math.max(0, currentPage - 1))
     }
 }
 </script>
@@ -234,4 +237,4 @@ export default class TablePagination extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/PhonePerson/PhonePerson.vue

@@ -12,8 +12,7 @@
     <img v-else-if="bundleId === 'k9T5L3kC0U'" :src="urls.PhonePersonProfessional">
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
 import type { TBundleIds } from './phonePerson'
 import PhonePersonBehavioralHealth from './phoneperson-behavioralhealth@2x.png'
 import PhonePersonEMT from './phoneperson-emt@2x.png'
@@ -27,22 +26,23 @@ import PhonePersonNursingSchool from './phoneperson-nursingschool@2x.png'
 import PhonePersonProfessional from './phoneperson-professional@2x.png'
 import PhonePersonSkilledTrades from './phoneperson-skilledtrades@2x.png'
 
-@Component
-export default class PhonePerson extends Vue {
-    @Prop({ default: 'mO5EIsoZ9H' }) bundleId!: TBundleIds
+const {
+    bundleId = 'mO5EIsoZ9H',
+} = defineProps<{
+    bundleId?: TBundleIds
+}>()
 
-    urls = {
-        PhonePersonBehavioralHealth,
-        PhonePersonEMT,
-        PhonePersonEssentials,
-        PhonePersonFinance,
-        PhonePersonFitness,
-        PhonePersonIT,
-        PhonePersonMedical,
-        PhonePersonNursing,
-        PhonePersonNursingSchool,
-        PhonePersonProfessional,
-        PhonePersonSkilledTrades,
-    }
+const urls = {
+    PhonePersonBehavioralHealth,
+    PhonePersonEMT,
+    PhonePersonEssentials,
+    PhonePersonFinance,
+    PhonePersonFitness,
+    PhonePersonIT,
+    PhonePersonMedical,
+    PhonePersonNursing,
+    PhonePersonNursingSchool,
+    PhonePersonProfessional,
+    PhonePersonSkilledTrades,
 }
 </script>

package/lib/components/PhonePerson/phonePerson.d.ts

@@ -1,4 +1,4 @@
-export type TBundleIds = 
+export type TBundleIds =
     'mO5EIsoZ9H'
     | 'uKLwvbsbPV'
     | 'gAlCkoUVLl'

package/lib/components/Quiz/FlagToggle.vue

@@ -16,11 +16,11 @@
     >
         <Tooltip
             v-if="showFlagTooltip && enableFlagTooltip && !disabled"
-            :key="isFlagged"
+            :key="String(isFlagged)"
             class="uikit-flag-toggle__tooltip"
             :styles="{
-                backgroundColor: brandColors.grayDivider,
-                color: brandColors.brandBlack,
+                backgroundColor: BrandColors.grayDivider || 'gray',
+                color: BrandColors.brandBlack || 'black',
             }"
         >
             {{ isFlagged ? 'Unflag' : 'Flag' }}
@@ -36,59 +36,60 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Tooltip from '../Tooltips/Tooltip.vue'
 import Icon from '../Icons/Icon.vue'
 import BrandColors from '../../pocketprep-export.module.scss'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const {
+    isFlagged = false,
+    enableFlagKeyboardShortcut = false,
+    enableFlagTooltip = true,
+    disabled = false,
+} = defineProps<{
+    isFlagged?: boolean
+    enableFlagKeyboardShortcut?: boolean
+    enableFlagTooltip?: boolean
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    'toggleFlag': [isFlagged: boolean]
+}>()
+
+const showFlagTooltip = ref(false)
+
+onMounted(() => {
+    if (enableFlagKeyboardShortcut) {
+        window.addEventListener('keydown', keydownListener)
+    }
+})
 
-@Component({
-    components: {
-        Tooltip,
-        Icon,
-    },
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', keydownListener)
 })
-export default class FlagToggle extends Vue {
-    @Prop() isFlagged!: boolean
-    @Prop({ default: false }) enableFlagKeyboardShortcut!: boolean
-    @Prop({ default: true }) enableFlagTooltip!: boolean
-    @Prop({ default: false }) disabled!: boolean
-
-    brandColors = BrandColors
-    showFlagTooltip = false
-
-    mounted () {
-        if (this.enableFlagKeyboardShortcut) {
-            window.addEventListener('keydown', this.keydownListener)
-        }
-    }
 
-    beforeUnmount () {
-        window.removeEventListener('keydown', this.keydownListener)
+const keydownListener = (e: KeyboardEvent) => {
+    if (disabled) {
+        return
     }
 
-    keydownListener (e: KeyboardEvent) {
-        if (this.disabled) {
-            return
-        }
-
-        if (e.code === 'KeyP') {
-            this.emitToggleFlag(!this.isFlagged)
-        }
+    if (e.code === 'KeyP') {
+        emitToggleFlag(!isFlagged)
     }
+}
 
-    toggleFlag () {
-        if (this.disabled) {
-            return
-        }
-
-        this.emitToggleFlag(!this.isFlagged)
+const toggleFlag = () => {
+    if (disabled) {
+        return
     }
 
-    @Emit('toggleFlag')
-    emitToggleFlag (isFlagged: boolean) {
-        return isFlagged
-    }
+    emitToggleFlag(!isFlagged)
+}
+
+const emitToggleFlag = (newIsFlagged: boolean) => {
+    emit('toggleFlag', newIsFlagged)
 }
 </script>
 

package/lib/components/Quiz/GlobalMetricsToggle.vue

@@ -16,11 +16,11 @@
     >
         <Tooltip
             v-if="!disabled && showGlobalMetricsToolTip"
-            :key="showGlobalMetrics"
+            :key="String(showGlobalMetrics)"
             :theme="tooltipTheme"
             :styles="{
-                backgroundColor: brandColors.grayDivider,
-                color: brandColors.brandBlack,
+                backgroundColor: BrandColors.grayDivider || 'gray',
+                color: BrandColors.brandBlack || 'black',
                 ...customTooltipStyles,
             }"
             :is-dark-mode="isDarkMode"
@@ -40,37 +40,38 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Tooltip from '../Tooltips/Tooltip.vue'
 import Icon from '../Icons/Icon.vue'
 import BrandColors from '../../pocketprep-export.module.scss'
+import { ref } from 'vue'
 
-@Component({
-    name: 'GlobalMetricsToggle',
-    components: {
-        Tooltip,
-        Icon,
-    },
-})
-export default class GlobalMetricsToggle extends Vue {
-    @Prop() showGlobalMetrics!: boolean
-    @Prop({ default: false }) disabled!: boolean
-    @Prop() customTooltipStyles!: { [key: string]: unknown }
-    @Prop() tooltipTheme!: 'leftalign' | 'rightalign'
-    @Prop({ default: false }) isDarkMode!: boolean
+const {
+    showGlobalMetrics,
+    disabled = false,
+    customTooltipStyles = {},
+    tooltipTheme = '',
+    isDarkMode = false,
+} = defineProps<{
+    showGlobalMetrics?: boolean
+    disabled?: boolean
+    customTooltipStyles?: Record<string, unknown>
+    tooltipTheme?: 'leftalign' | 'rightalign' | ''
+    isDarkMode?: boolean
+}>()
 
-    brandColors = BrandColors
-    showGlobalMetricsToolTip = false
+const emit = defineEmits<{
+    'toggleGlobalMetrics': [showGlobalMetrics: boolean]
+}>()
 
-    toggleGlobalMetrics () {
-        this.emitToggleGlobalMetrics(!this.showGlobalMetrics)
-    }
+const showGlobalMetricsToolTip = ref(false)
 
-    @Emit('toggleGlobalMetrics')
-    emitToggleGlobalMetrics (showGlobalMetrics: boolean) {
-        return showGlobalMetrics
-    }
+const toggleGlobalMetrics = () => {
+    emitToggleGlobalMetrics(!showGlobalMetrics)
+}
+
+const emitToggleGlobalMetrics = (newShowGlobalMetrics: boolean) => {
+    emit('toggleGlobalMetrics', newShowGlobalMetrics)
 }
 </script>
 
@@ -124,4 +125,4 @@ export default class GlobalMetricsToggle extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Quiz/KeyboardShortcutsButton.vue

@@ -24,8 +24,8 @@
                 v-if="showKeyboardTooltip"
                 :theme="tooltipTheme"
                 :styles="{
-                    backgroundColor: brandColors.grayDivider,
-                    color: brandColors.brandBlack,
+                    ...(BrandColors.grayDivider && { backgroundColor: BrandColors.grayDivider}),
+                    ...(BrandColors.brandBlack && { color: BrandColors.brandBlack }),
                 }"
             >
                 Keyboard Shortcuts
@@ -38,33 +38,26 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-import KeyboardShortcutsModal from '../Quiz/KeyboardShortcutsModal.vue'
+<script setup lang="ts">
 import Tooltip from '../Tooltips/Tooltip.vue'
 import Icon from '../Icons/Icon.vue'
 import BrandColors from '../../pocketprep-export.module.scss'
+import { ref } from 'vue'
 
-@Component({
-    components: {
-        KeyboardShortcutsModal,
-        Tooltip,
-        Icon,
-    },
-})
-export default class KeyboardShortcutsButton extends Vue {
-    @Prop() tooltipTheme!: 'leftalign' | 'rightalign'
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop() disabled?: boolean
+const {
+    tooltipTheme = '',
+    disabled = false,
+} = defineProps<{
+    tooltipTheme?: 'leftalign' | 'rightalign'
+    disabled?: boolean
+}>()
 
-    brandColors = BrandColors
-    showKeyboardTooltip = false
-    showKeyboardShortcutsModal = false
+const showKeyboardTooltip = ref(false)
+const showKeyboardShortcutsModal = ref(false)
 
-    toggleShowModal () {
-        if (!this.disabled) {
-            this.showKeyboardShortcutsModal = !this.showKeyboardShortcutsModal
-        }
+const toggleShowModal = () => {
+    if (!disabled) {
+        showKeyboardShortcutsModal.value = !showKeyboardShortcutsModal.value
     }
 }
 </script>