@pocketprep/ui-kit 3.5.0 → 3.5.1

package/lib/components/Forms/CheckboxOption.vue

@@ -70,8 +70,8 @@ export default class CheckboxOption extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-checkbox-option {
     font-size: 15px;

package/lib/components/Forms/Errors.vue

@@ -55,8 +55,8 @@ export default class Errors extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-errors {
     border: 1px solid rgba($red-pegasus, 0.5);

package/lib/components/Forms/Input.vue

@@ -146,8 +146,8 @@ export default class Input extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-input {
     &__input {

package/lib/components/Forms/Radio.vue

@@ -35,7 +35,7 @@
                     'uikit-radio__item--has-helper-text': !!(item.helperText)
                 }"
                 role="radio"
-                :aria-checked="modelValue && item.value === modelValue.value"
+                :aria-checked="!!modelValue && item.value === modelValue.value"
                 :aria-label="`${item.label}${ item.helperText ? ` ${item.helperText}` : '' }`"
                 @click="!(disabled || item.disabled ) && selectItem(item)"
                 @keydown.enter.space="keyPressedItem"
@@ -66,59 +66,57 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
-import { dark } from '../../directives'
+<script setup lang="ts">
+import { ref } from 'vue'
+import { dark as vDark } from '../../directives'
 import RadioButton from './RadioButton.vue'
 
 interface IItem {
-    value: string
-    label: string
+    value: string | number
+    label?: string
     helperText?: string
     disabled?: boolean
 }
 
-@Component({
-    components: {
-        RadioButton,
-    },
-    directives: {
-        dark,
-    },
+const props = withDefaults(defineProps<{
+    label?: string
+    data: IItem[]
+    center?: boolean
+    modelValue: IItem | null
+    disabled?: boolean
+    isDarkMode?: boolean
+    labelledBy?: string | false
+}>(), {
+    label: '',
+    isDarkMode: false,
+    labelledBy: false,
 })
-export default class Radio extends Vue {
-    @Prop() label?: string
-    @Prop() data!: IItem[]
-    @Prop() center?: boolean
-    @Prop() modelValue!: IItem
-    @Prop() disabled?: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) labelledBy!: string | false
-    
-    uid = Math.floor(Math.random() * 1e9)
-    hover = false
-    focus = false
 
-    @Emit('update:modelValue')
-    selectItem (item: IItem) {
-        return item
-    }
+const emit = defineEmits<{
+    'update:modelValue': [ item: IItem ]
+}>()
 
-    keyPressedItem (e: KeyboardEvent) {
-        // select option on enter or space
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
-            const item = this.data.find(i => String(i.value) === itemValue)
-            item && this.selectItem(item)
-        }
+const uid = Math.floor(Math.random() * 1e9)
+const hover = ref(false)
+
+const selectItem = (item: IItem) => {
+    emit('update:modelValue', item)
+}
+
+const keyPressedItem = (e: KeyboardEvent) => {
+    // select option on enter or space
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        const itemValue = (e.target as HTMLElement).getAttribute('data-value')
+        const item = props.data.find(i => String(i.value) === itemValue)
+        item && selectItem(item)
     }
 }
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-radio {
     &__label {

package/lib/components/Forms/RadioButton.vue

@@ -23,7 +23,7 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-radio-btn {
     width: 18px;

package/lib/components/Forms/Select.vue

@@ -163,6 +163,7 @@ interface IItem {
  * @see [Designs for Inputs](https://marvelapp.com/adf8ab3/screen/70331421)
  */
 @Component({
+    name: 'PocketSelect',
     components: {
         Icon,
     },
@@ -447,8 +448,8 @@ export default class Select extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-select {
     position: relative;
@@ -595,13 +596,13 @@ export default class Select extends Vue {
         margin: 4px 0 0 0;
 
         &--dark {
-            &--hover {
-                background-color: $charcoal;
-            }
-
             border-color: $pewter;
             color: $fog;
             caret-color: $banana-bread;
+            
+            &--hover {
+                background-color: $charcoal;
+            }
         }
     }
 

package/lib/components/Forms/Textarea.vue

@@ -100,8 +100,8 @@ export default class Textarea extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-textarea {
     &__container {

package/lib/components/Icons/Icon.vue

@@ -148,6 +148,7 @@ import IconPresent from './IconPresent.vue'
 import IconLink from './IconLink.vue'
 
 @Component({
+    name: 'Icon',
     components: {
         IconAdd,
         IconEdit,

package/lib/components/Icons/IconEdit.vue

@@ -14,8 +14,10 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-facing-decorator'
 
-@Component
+@Component({
+    name: 'IconEdit',
+})
 export default class IconEdit extends Vue {
     @Prop() title!: string
 }
-</script>
+</script>

package/lib/components/Icons/IconFullViewActive.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- eslint-disable -->
     <svg width="28px" height="20px" viewBox="0 0 28 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <title>icon/full view toggle active</title>
+        <title>{{ title }}</title>
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g transform="translate(-50.000000, -9.000000)">
                 <g transform="translate(52.000000, 10.500000)">

package/lib/components/Icons/IconLoading2.vue

@@ -15,7 +15,7 @@ export default class IconLoading2 extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-loading {
     height: 100%;
@@ -40,12 +40,10 @@ export default class IconLoading2 extends Vue {
 
 @keyframes spin {
     from {
-        -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
 
     to {
-        -webkit-transform: rotate(359deg);
         transform: rotate(359deg);
     }
 }

package/lib/components/Loaders/SkeletonLoader.vue

@@ -12,8 +12,8 @@ export default class SkeletonLoader extends Vue {}
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-skeleton-loader {
     // Using width and height of parent

package/lib/components/Messaging/InfoMessage.vue

@@ -14,8 +14,8 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .info-message {
     padding: 11px 16px;

package/lib/components/Modal/Modal.vue

@@ -51,8 +51,8 @@ export default class Modal extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-modal {
     border-radius: 12px;

package/lib/components/Modal/ModalContainer.vue

@@ -163,8 +163,8 @@ export default class ModalContainer extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-modal-container {
     position: absolute;

package/lib/components/Onboarding/EmailAuth.vue

@@ -84,7 +84,7 @@ export default class EmailAuth extends Vue {
         }
     }
 
-    async submitSignIn () {
+    submitSignIn () {
         this.isLoading = true
         this.errorMessage = ''
 
@@ -99,7 +99,7 @@ export default class EmailAuth extends Vue {
         this.isLoading = false
     }
 
-    async resendEmail () {
+    resendEmail () {
         this.errorMessage = ''
         this.isResending = true
         this.emitResend({ email: this.email })
@@ -107,7 +107,7 @@ export default class EmailAuth extends Vue {
     }
 
     @Emit('submit')
-    emitSubmit (results: { email: string; code: string}) {
+    emitSubmit (results: { email: string; code: string }) {
         return results
     }
 
@@ -124,8 +124,8 @@ export default class EmailAuth extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-email-auth {
     &__form {

package/lib/components/Onboarding/MagicCodeEntry.vue

@@ -42,8 +42,8 @@ export default class MagicCodeEntry extends Vue {
     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') as HTMLElement | null
-            if (codeInputEl) {
+            const codeInputEl = document.querySelector('.uikit-magic-code__code-input')
+            if (codeInputEl instanceof HTMLElement) {
                 codeInputEl.style.letterSpacing = '35.5px'
             }
         }, 500)
@@ -127,7 +127,7 @@ export default class MagicCodeEntry extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-magic-code {
     position: relative;
@@ -184,7 +184,6 @@ export default class MagicCodeEntry extends Vue {
         appearance: none;
 
         &::selection {
-            color: none;
             background: none;
         }
     }

package/lib/components/Pagination/QuestionReviewPagination.vue

@@ -45,8 +45,8 @@ import { computed } from 'vue'
 import Icon from '../Icons/Icon.vue'
 
 const props = withDefaults(defineProps<{
-    currentPage: number
-    total: number
+    currentPage?: number
+    total?: number
 }>(), {
     currentPage: 0,
     total: 0,
@@ -71,8 +71,8 @@ const changePage = (direction: 'next' | 'previous') => {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-review-pagination {
     display: flex;

package/lib/components/Pagination/TablePagination.vue

@@ -121,8 +121,8 @@ export default class TablePagination extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-table-pagination {
     display: flex;

package/lib/components/Quiz/FlagToggle.vue

@@ -93,8 +93,8 @@ export default class FlagToggle extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-flag-toggle {
     position: relative;

package/lib/components/Quiz/GlobalMetricsToggle.vue

@@ -47,6 +47,7 @@ import Icon from '../Icons/Icon.vue'
 import BrandColors from '../../pocketprep-export.module.scss'
 
 @Component({
+    name: 'GlobalMetricsToggle',
     components: {
         Tooltip,
         Icon,
@@ -74,8 +75,8 @@ export default class GlobalMetricsToggle extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-global-metrics-toggle {
     position: relative;

package/lib/components/Quiz/KeyboardShortcutsButton.vue

@@ -60,7 +60,7 @@ export default class KeyboardShortcutsButton extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-keyboard-shortcuts-btn {
     position: relative;

package/lib/components/Quiz/KeyboardShortcutsModal.vue

@@ -180,7 +180,7 @@ export default class KeyboardShortcutsModal extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use '@/styles/colors' as *;
 
 .uikit-keyboard-modal {
     box-sizing: border-box;

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -377,8 +377,9 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-choices-container {
     display: contents;
@@ -814,7 +815,7 @@ const handleClick = (event: MouseEvent) => {
             color: $white;
 
             &:hover {
-                background-color: mix($brand-blue, black, 90%);
+                background-color: color.mix($brand-blue, black, 90%);
             }
 
             &:focus {

package/lib/components/Quiz/Question/DropdownExplanation.vue

@@ -113,8 +113,8 @@ const toggleDropdownExplanationImageLongAlt = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-dropdown-explanation {
     &__dropdown-explanation {

package/lib/components/Quiz/Question/Explanation.vue

@@ -138,8 +138,8 @@ const toggleExplanation = () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-explanation {
     position: relative;

package/lib/components/Quiz/Question/MatrixChoicesContainer.vue

@@ -204,7 +204,6 @@ const emit = defineEmits<{
 
 const {
     // questionEl is used by the breakpoint directive
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     questionEl,
     question,
     isMatrixQuestionCorrect,
@@ -272,7 +271,7 @@ const convertSelectedMatrixChoiceToCheckboxGrid = () => {
     selectedMatrixChoices.value.forEach(choice => {
         const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
         const colIndex = Number(choice.split('_').pop()) - 1
-        const row = checkboxGrid && checkboxGrid[rowIndex]
+        const row = checkboxGrid?.[rowIndex]
         if (row) {
             row[colIndex] = true
         }
@@ -284,7 +283,7 @@ const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
     const radioBtnGrid = defaultRadioButtonGrid.value
     selectedMatrixChoices.value.forEach(choice => {
         const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-        const row = radioBtnGrid && radioBtnGrid[rowIndex]
+        const row = radioBtnGrid?.[rowIndex]
         if (row) {
             row.value = choice
         }
@@ -334,7 +333,7 @@ const correctlySelectedChoice = (rowIndex: number, colIndex: number) => {
 const incorrectlySelectedChoice = (rowIndex: number, colIndex: number) => {
     if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
         const selectedChoice = selectedChoiceKey(rowIndex, colIndex)
-        if (selectedChoice && selectedChoice.startsWith('d')) {
+        if (selectedChoice?.startsWith('d')) {
             return true
         }
     }
@@ -348,11 +347,11 @@ const correctAnswerButNotSelected = (rowIndex: number, colIndex: number) => {
 }
 
 const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
     // check box is correctlySelected
     if (isReviewMode && correctlySelectedChoice(rowIndex, columnIndex)) {
-        const borderColor = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const borderColor = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             borderColor: `${borderColor} !important`,
             background: `${borderColor} !important`,
@@ -375,9 +374,9 @@ const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
 }
 
 const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
-    const isReviewMode = showMatrixAnswers.value || reviewMode
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
     if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
-        const color = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        const color = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
         return {
             color: `${color} !important`,
         }
@@ -401,11 +400,7 @@ watch(matrixCheckboxGrid, () => {
 
         matrixCheckboxGrid.value?.forEach((row, rowIndex) => {
             row.forEach((choice, choiceIndex) => {
-                if (
-                    choice && 
-                        matrixChoiceLayout.value?.[rowIndex] && 
-                        matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex]
-                ) {
+                if (choice && matrixChoiceLayout?.value?.[rowIndex]?.[choiceIndex]) {
                     const choiceKey = matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex] as TMatrixChoiceKey | null
                     if (choiceKey) {
                         selectedCheckboxChoices.push(choiceKey)
@@ -432,12 +427,12 @@ watch(matrixRadioGrid, () => {
 }, { deep: true })
 
 watch(selectedMatrixChoices, () => {
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
         const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
-    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
         const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
@@ -446,8 +441,8 @@ watch(selectedMatrixChoices, () => {
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-matrix-choices-container {
     width: 100%;

package/lib/components/Quiz/Question/MatrixRadioGroup.vue

@@ -74,8 +74,8 @@ const selectChoice = (choiceKey: TMatrixChoiceKey) => {
 </template>
 
 <style lang="scss" scoped>
-@import '../../../styles/breakpoints';
-@import '../../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-matrix-radio-group {
     display: flex;