@pocketprep/ui-kit 3.8.5 → 3.9.0

package/lib/components/Bundles/BundleSearch.vue

@@ -3,7 +3,7 @@
         ref="uikit-exam-search"
         v-breakpoint="{ breakpoints: { small: smallBreakpoint } }"
         class="uikit-exam-search"
-        :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }" 
+        :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }"
     >
         <template v-if="examSearchContainer">
             <Search
@@ -11,18 +11,18 @@
                 v-breakpoint="{
                     breakpoints: { small: smallBreakpoint },
                     containerEl: examSearchContainer
-                }" 
+                }"
                 class="uikit-exam-search__search"
                 placeholder="Search exams"
                 type="white"
                 :is-dark-mode="isDarkMode"
             />
-            <div 
-                v-if="examSearchString" 
+            <div
+                v-if="examSearchString"
                 v-breakpoint="{
                     breakpoints: { small: smallBreakpoint },
                     containerEl: examSearchContainer
-                }" 
+                }"
                 class="uikit-exam-search__search-results"
             >
                 <div class="uikit-exam-search__search-results-header">
@@ -34,14 +34,14 @@
                     >
                         {{ filteredExams.length }} Search Result{{ filteredExams.length !== 1 ? 's' : '' }}
                     </span>
-                    <Button
+                    <PocketButton
                         class="uikit-exam-search__search-reset-btn"
                         type="tertiary-small"
                         :is-dark-mode="isDarkMode"
                         @click="examSearchString = ''"
                     >
                         Browse Instead
-                    </Button>
+                    </PocketButton>
                 </div>
                 <ul class="uikit-exam-search__search-results-list">
                     <ExamCard
@@ -50,12 +50,12 @@
                         v-breakpoint="{
                             breakpoints: { small: smallBreakpoint },
                             containerEl: examSearchContainer
-                        }" 
+                        }"
                         :is-premium="premiumExamIds.includes(exam.objectId)"
                         :exam="exam"
-                        :bundle="exam.bundle" 
+                        :bundle="exam.bundle"
                         class="uikit-exam-search__search-results-card"
-                        :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
+                        :is-selected="!!(selectedExam && selectedExam.objectId === exam.objectId)"
                         :is-dark-mode="isDarkMode"
                         @select="selectExam(exam)"
                     />
@@ -71,7 +71,7 @@
                     v-breakpoint="{
                         breakpoints: { small: smallBreakpoint },
                         containerEl: examSearchContainer
-                    }" 
+                    }"
                     class="uikit-exam-search__bundle-list"
                 >
                     <div class="uikit-exam-search__browse-industry-text">
@@ -89,21 +89,21 @@
                     v-breakpoint="{
                         breakpoints: { small: smallBreakpoint },
                         containerEl: examSearchContainer
-                    }" 
+                    }"
                     class="uikit-exam-search__bundle-exam-container"
                 >
-                    <div 
+                    <div
                         v-breakpoint="{
                             breakpoints: { small: smallBreakpoint },
                             containerEl: examSearchContainer
-                        }" 
+                        }"
                         class="uikit-exam-search__bundle-exam-container-top"
                     >
                         <PocketButton
                             v-breakpoint="{
                                 breakpoints: { small: smallBreakpoint },
                                 containerEl: examSearchContainer
-                            }" 
+                            }"
                             class="uikit-exam-search__bundle-exam-back"
                             :is-dark-mode="isDarkMode"
                             type="tertiary"
@@ -111,11 +111,11 @@
                         >
                             <Icon type="arrow" /> Back to Browse
                         </PocketButton>
-                        <span 
+                        <span
                             v-breakpoint="{
                                 breakpoints: { small: smallBreakpoint },
                                 containerEl: examSearchContainer
-                            }" 
+                            }"
                             class="uikit-exam-search__bundle-exam-count"
                             tabindex="-1"
                         >
@@ -138,20 +138,20 @@
                                 v-breakpoint="{
                                     breakpoints: { small: smallBreakpoint },
                                     containerEl: examSearchContainer
-                                }" 
+                                }"
                                 :exam="exam"
                                 :is-dark-mode="isDarkMode"
                                 :bundle="exam.bundle"
                                 class="uikit-exam-search__search-results-card"
                                 :is-premium="premiumExamIds.includes(exam.objectId)"
-                                :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
+                                :is-selected="!!(selectedExam && selectedExam.objectId === exam.objectId)"
                                 @select="selectExam(exam)"
                             />
-                            <div 
+                            <div
                                 v-breakpoint="{
                                     breakpoints: { small: smallBreakpoint },
                                     containerEl: examSearchContainer
-                                }" 
+                                }"
                                 class="uikit-exam-search__exam-list-padding"
                             />
                         </div>
@@ -162,95 +162,92 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
-import BundleIcon from '../BundleIcons/BundleIcon.vue'
+<script setup lang="ts">
 import ExamCard from '../Exams/ExamCard.vue'
 import BundleList from '../Bundles/BundleList.vue'
 import Search from '../Search/Search.vue'
-import Button from '../Buttons/Button.vue'
 import PocketButton from '../Buttons/Button.vue'
 import Icon from '../Icons/Icon.vue'
 import type { Study } from '@pocketprep/types'
-import { breakpoint, dark } from '../../directives'
+import { breakpoint as vBreakpoint, dark as vDark } from '../../directives'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 
 type TBundleExam = Study.Class.ExamMetadataJSON & { bundle: Study.Class.BundleJSON }
 
-@Component({
-    components: {
-        Button,
-        BundleIcon,
-        BundleList,
-        ExamCard,
-        Search,
-        PocketButton,
-        Icon,
-    },
-    directives: {
-        breakpoint,
-        dark,
-    },
+const {
+    bundles,
+    examMetadataById,
+    premiumBundleIds = [],
+    premiumExamIds = [],
+    isDarkMode,
+} = defineProps<{
+    bundles: Study.Class.BundleJSON[]
+    examMetadataById: { [id: string]: Study.Class.ExamMetadataJSON | undefined }
+    premiumBundleIds?: string[]
+    premiumExamIds?: string[]
+    isDarkMode?: boolean
+}>()
+
+const emit = defineEmits<{
+    'search': [searchString: string]
+    'selectBundle': [selectedBundle: Study.Class.BundleJSON]
+    'select': [selectedExam: TBundleExam]
+}>()
+
+const selectedExam = ref<TBundleExam | null>(null)
+const selectedBundle = ref<Study.Class.BundleJSON | null>(null)
+const examSearchString = ref('')
+const examDisplayName = ref('')
+const examSearchContainer = useTemplateRef<HTMLElement>('uikit-exam-search')
+const smallBreakpoint = ref(420)
+
+const filteredExams = computed(() => {
+    return bundleExams.value.filter(exam =>
+        `${exam.nativeAppName} ${exam.descriptiveName}`.toLowerCase()
+            .includes(examSearchString.value.toLowerCase())
+    )
 })
-export default class BundleSearch extends Vue {
-    @Prop() bundles!: Study.Class.BundleJSON[]
-    @Prop() examMetadataById!: { [id: string]: Study.Class.ExamMetadataJSON | undefined }
-    @Prop({ default: () => ([]) }) premiumBundleIds!: string[]
-    @Prop({ default: () => ([]) }) premiumExamIds!: string[]
-    @Prop({ default: false }) isDarkMode!: boolean
-
-    selectedExam: TBundleExam | null = null
-    selectedBundle: Study.Class.BundleJSON | null = null
-    examSearchString = ''
-    examDisplayName = ''
-    examSearchContainer: null | HTMLElement = null
-    smallBreakpoint = 420
-
-    get filteredExams () {
-        return this.bundleExams.filter(exam =>
-            `${exam.nativeAppName} ${exam.descriptiveName}`.toLowerCase()
-                .includes(this.examSearchString.toLowerCase())
-        )
-    }
-
-    get selectedBundleExams () {
-        const selectedBundle = this.selectedBundle
-        if (selectedBundle) {
-            return this.bundleExams.filter(exam => exam.bundle.objectId === selectedBundle.objectId)
-        } else {
-            return []
-        }
+
+const selectedBundleExams = computed(() => {
+    const selectedBundleVal = selectedBundle.value
+    if (selectedBundleVal) {
+        return bundleExams.value.filter(exam => exam.bundle.objectId === selectedBundleVal.objectId)
+    } else {
+        return []
     }
+})
 
-    get bundleExams () {
-        return Object.values(this.bundles)
-            .filter((bundle): bundle is NonNullable<typeof bundle> => !!bundle)
-            .flatMap(bundle => bundle.exams.map(exam => {
-                const examMetadata = this.examMetadataById[exam.objectId]
-                if (examMetadata) {
-                    return {
-                        ...examMetadata,
-                        bundle,
-                    }
-                } else {
-                    return undefined
+const bundleExams = computed(() => {
+    return Object.values(bundles)
+        .filter((bundle): bundle is NonNullable<typeof bundle> => !!bundle)
+        .flatMap(bundle => bundle.exams.map(exam => {
+            const examMetadata = examMetadataById[exam.objectId]
+            if (examMetadata) {
+                return {
+                    ...examMetadata,
+                    bundle,
                 }
-            }))
-            .filter((exam): exam is NonNullable<typeof exam> => !!exam)
-            .sort((a, b) => a.nativeAppName?.localeCompare(b.nativeAppName))
-    }
+            } else {
+                return undefined
+            }
+        }))
+        .filter((exam): exam is NonNullable<typeof exam> => !!exam)
+        .sort((a, b) => a.nativeAppName?.localeCompare(b.nativeAppName))
+})
 
-    mounted () {
-        this.examSearchContainer = this.$refs['uikit-exam-search'] as HTMLElement
-    }
+const selectExam = (exam: TBundleExam) => {
+    selectedExam.value = exam
+    examDisplayName.value = exam.nativeAppName
+    emit('select', exam)
+}
 
-    @Watch('examSearchString')
-    examSearchStringChanged (newVal: string) {
-        this.emitSearch(newVal)
-    }
+watch(examSearchString, (newVal: string) => {
+    emit('search', newVal)
+})
 
-    @Watch('selectedBundle')
-    selectedBundleChanged (selectedBundle: Study.Class.BundleJSON) {
-        this.emitSelectBundle(selectedBundle)
+watch(selectedBundle, (newSelectedBundle: Study.Class.BundleJSON | null) => {
+    if (newSelectedBundle) {
+        emit('selectBundle', newSelectedBundle)
 
         // automatically select first exam
         setTimeout(() => {
@@ -258,28 +255,7 @@ export default class BundleSearch extends Vue {
             (firstCard as HTMLElement | undefined)?.focus()
         }, 1)
     }
-
-    selectExam (exam: TBundleExam) {
-        this.selectedExam = exam
-        this.examDisplayName = exam.nativeAppName
-        this.emitSelect(exam)
-    }
-
-    @Emit('search')
-    emitSearch (searchString: string) {
-        return searchString
-    }
-
-    @Emit('selectBundle')
-    emitSelectBundle (selectedBundle: Study.Class.BundleJSON) {
-        return selectedBundle
-    }
-
-    @Emit('select')
-    emitSelect (exam: TBundleExam) {
-        return exam
-    }
-}
+})
 </script>
 
 <style lang="scss">
@@ -602,4 +578,4 @@ export default class BundleSearch extends Vue {
         margin-bottom: 57px;
     }
 }
-</style>
+</style>

package/lib/components/Bundles/PremiumPill.vue

@@ -4,18 +4,12 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-import { dark } from '../../directives'
+<script setup lang="ts">
+import { dark as vDark } from '../../directives'
 
-@Component({
-    directives: {
-        dark,
-    },
-})
-export default class PremiumPill extends Vue {
-    @Prop({ default: false }) isDarkMode!: boolean
-}
+defineProps<{
+    isDarkMode?: boolean
+}>()
 </script>
 
 <style lang="scss">
@@ -41,4 +35,4 @@ export default class PremiumPill extends Vue {
         border: 1px solid $banana-bread;
     }
 }
-</style>
+</style>

package/lib/components/Buttons/Button.vue

@@ -5,7 +5,7 @@
         :class="{
             [`uikit-btn--${type}`]: true,
             [`uikit-btn--${type}--is-loading`]: isLoading,
-            'uikit-btn--icon--no-text': !$slots.default?.(),
+            'uikit-btn--icon--no-text': !$slots.default,
         }"
         :disabled="disabled"
         tabindex="0"
@@ -27,7 +27,7 @@
                 v-dark="isDarkMode"
                 class="uikit-btn-icon__icon"
                 :class="{
-                    'uikit-btn-icon__icon--no-text': !$slots.default?.(),
+                    'uikit-btn-icon__icon--no-text': !$slots.default,
                 }"
                 :title="iconTitle"
                 :type="icon"
@@ -37,41 +37,38 @@
     </button>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
 import type { TIconType } from '../Icons/icon'
-import { dark } from '../../directives'
-
-type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary' 
-| 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon' 
-| 'icon-yellow' | 'outline' | 'oval-dark'
-
-@Component({
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Button extends Vue {
-    @Prop({ default: 'primary' }) readonly type!: TButtonType
-    @Prop({ default: false }) readonly disabled!: boolean
-    @Prop({ default: false }) readonly isDarkMode!: boolean
-    @Prop({ default: null }) readonly icon!: TIconType
-    @Prop({ default: '' }) readonly iconTitle!: string
-    @Prop({ default: false }) isLoading!: boolean
-
-    buttonClicked (event: Event) {
-        if (!this.disabled && !this.isLoading) {
-            this.emitClick(event)
-        }
-    }
-
-    @Emit('click')
-    emitClick (event: Event) {
-        return event
+import { dark as vDark } from '../../directives'
+
+type TButtonType = 'primary' | 'primary-yellow' | 'primary-red' | 'secondary'
+    | 'secondary-yellow-dark' | 'tertiary' | 'tertiary-red' | 'tertiary-small' | 'tertiary-red-small' | 'icon'
+    | 'icon-yellow' | 'outline' | 'oval-dark'
+
+const {
+    type = 'primary',
+    disabled = false,
+    isDarkMode = false,
+    icon = null,
+    iconTitle = '',
+    isLoading = false,
+} = defineProps<{
+    type?: TButtonType
+    disabled?: boolean
+    isDarkMode?: boolean
+    icon?: TIconType | null
+    iconTitle?: string
+    isLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+    'click': [clickEvent: Event]
+}>()
+
+const buttonClicked = (event: Event) => {
+    if (!disabled && !isLoading) {
+        emit('click', event)
     }
 }
 </script>

package/lib/components/Buttons/Link.vue

@@ -16,40 +16,41 @@
     </a>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-import { dark } from '../../directives'
+<script setup lang="ts">
+import { dark as vDark } from '../../directives'
 
 type TLinkType = 'tertiary' | 'tertiary-red' | 'tertiary-small'
 
-/**
- * @see [Designs for Buttons](https://marvelapp.com/adf8ab3/screen/68221507)
- */
-@Component({
-    directives: {
-        dark,
-    },
-    emits: [ 'click' ],
-})
-export default class Link extends Vue {
-    @Prop({ default: 'tertiary' }) readonly type!: TLinkType
-    @Prop({ default: '#' }) readonly href!: string
-    @Prop({ default: '_self' }) readonly target!: string
-    @Prop({ default: false }) readonly disabled!: boolean
-    @Prop({ default: false }) readonly hasIcon!: boolean
-    @Prop({ default: false }) readonly isDarkMode!: boolean
-
-    clicked (event: MouseEvent) {
-        if (this.disabled) {
-            event.preventDefault()
-            event.stopImmediatePropagation()
-            return
-        }
-        if (this.href === '#') {
-            event.preventDefault()
-        }
-        this.$emit('click', event)
+const {
+    type = 'tertiary',
+    href = '#',
+    target = '_self',
+    disabled,
+    hasIcon,
+    isDarkMode,
+} = defineProps<{
+    type?: TLinkType
+    href?: string
+    target?: string
+    disabled?: boolean
+    hasIcon?: boolean
+    isDarkMode?: boolean
+}>()
+
+const emit = defineEmits<{
+    'click': [clickEvent: MouseEvent]
+}>()
+
+const clicked = (event: MouseEvent) => {
+    if (disabled) {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        return
+    }
+    if (href === '#') {
+        event.preventDefault()
     }
+    emit('click', event)
 }
 </script>
 
@@ -195,4 +196,4 @@ export default class Link extends Vue {
         cursor: default;
     }
 }
-</style>
+</style>

package/lib/components/Buttons/Tab.vue

@@ -12,24 +12,21 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
-import { dark } from '../../directives'
+<script setup lang="ts">
+import { dark as vDark } from '../../directives'
 
-@Component({
-    directives: {
-        dark,
-    },
-})
-export default class Tab extends Vue {
-    @Prop({ default: false }) disabled!: boolean
-    @Prop({ default: false }) active!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
+defineProps<{
+    disabled?: boolean
+    active?: boolean
+    isDarkMode?: boolean
+}>()
 
-    @Emit('click')
-    emitClick (event: Event) {
-        return event
-    }
+const emit = defineEmits<{
+    'click': [clickEvent: Event]
+}>()
+
+const emitClick = (event: Event) => {
+    emit('click', event)
 }
 </script>
 
@@ -101,4 +98,4 @@ export default class Tab extends Vue {
         }
     }
 }
-</style>
+</style>