@pocketprep/ui-kit 3.4.90 → 3.5.1

package/lib/components/Controls/ToggleSwitch.vue

@@ -50,7 +50,8 @@ export default class ToggleSwitch extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
+@use 'sass:color';
+@use '@/styles/colors' as *;
 
 .uikit-toggle-switch {
     background-color: $steel;
@@ -104,7 +105,7 @@ export default class ToggleSwitch extends Vue {
         background-color: $brand-blue;
 
         &:hover {
-            background-color: darken($brand-blue, 10%);
+            background-color: color.adjust($brand-blue, $lightness: -10%);
         }
 
         &--dark {

package/lib/components/EmptyStates/EmptyState.vue

@@ -48,6 +48,7 @@ import Blob from '../Blobs/Blob.vue'
 import { dark } from '../../directives'
 
 @Component({
+    name: 'EmptyState',
     components: {
         Icon,
         Blob,
@@ -117,8 +118,8 @@ export default class EmptyState extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-empty-state {
     text-align: center;

package/lib/components/Exams/ExamCard.vue

@@ -110,8 +110,8 @@ export default class ExamCard extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-exam-card {
     position: relative;
@@ -135,7 +135,7 @@ export default class ExamCard extends Vue {
         width: 340px;
     }
 
-    &:not(&--cancel):not(&--disable-interaction) {
+    &:not(&--cancel, &--disable-interaction) {
         cursor: pointer;
 
         &:hover,

package/lib/components/Exams/ExamMenuCard.vue

@@ -76,8 +76,8 @@ export default class ExamMenuCard extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-exam-menu-card {
     display: flex;

package/lib/components/Filters/FilterDropdown.vue

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

package/lib/components/Filters/FilterOptions.vue

@@ -200,8 +200,8 @@ export default class FilterOptions extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .filter-options {
     background: $white;

package/lib/components/Forms/Checkbox.vue

@@ -73,8 +73,8 @@ export default class Checkbox extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-checkbox {
     background: $white;

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

@@ -40,37 +40,39 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { computed } from 'vue'
 import Icon from '../Icons/Icon.vue'
 
-@Component({
-    components: {
-        Icon,
-    },
+const props = withDefaults(defineProps<{
+    currentPage?: number
+    total?: number
+}>(), {
+    currentPage: 0,
+    total: 0,
 })
-export default class QuestionReviewPagination extends Vue {
-    @Prop({ default: 0 }) currentPage!: number
-    @Prop() total!: number
 
-    get nextPageDisabled () {
-        return this.currentPage >= Math.floor(this.total - 1)
-    }
+const emit = defineEmits<{
+    changePage: [ pageNum: number ]
+}>()
 
-    @Emit('changePage')
-    changePage (direction: 'next' | 'previous') {
-        if (direction === 'next') {
-            return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
-        } else {
-            return Math.max(0, this.currentPage - 1)
-        }
+const nextPageDisabled = computed(() => {
+    return props.currentPage >= Math.floor(props.total - 1)
+})
+
+const changePage = (direction: 'next' | 'previous') => {
+    if (direction === 'next') {
+        const pageNum = nextPageDisabled.value ? props.currentPage : props.currentPage + 1
+        emit('changePage', pageNum)
+    } else {
+        emit('changePage', Math.max(0, props.currentPage - 1))
     }
 }
 </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;