@pocketprep/ui-kit 3.8.4 → 3.9.0

package/eslint.config.ts

@@ -1,4 +1,4 @@
-import stylisticTs from '@stylistic/eslint-plugin-ts'
+import stylisticTs from '@stylistic/eslint-plugin'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -25,25 +25,51 @@ export default defineConfigWithVueTs(
     pluginVue.configs['flat/recommended'],
     {
         rules: {
-            '@stylistic/ts/quotes': [ 'error', 'single' ],
-            '@stylistic/ts/quote-props': 'off',
-            '@stylistic/ts/comma-dangle': [ 'error', {
+            '@stylistic/quotes': [ 'error', 'single' ],
+            '@stylistic/quote-props': 'off',
+            '@stylistic/comma-dangle': [ 'error', {
                 'arrays': 'always-multiline',
                 'objects': 'always-multiline',
                 'imports': 'always-multiline',
                 'exports': 'always-multiline',
                 'functions': 'never',
             }],
-            '@stylistic/ts/semi': [ 'error', 'never' ],
-            '@stylistic/ts/object-property-newline': [ 'error', { allowAllPropertiesOnSameLine: true }],
-            '@stylistic/ts/no-extra-parens': 'off',
-            '@stylistic/ts/lines-between-class-members': 'off',
-            '@stylistic/ts/lines-around-comment': 'off',
+            '@stylistic/semi': [ 'error', 'never' ],
+            '@stylistic/object-property-newline': [ 'error', { allowAllPropertiesOnSameLine: true }],
+            '@stylistic/no-extra-parens': 'off',
+            '@stylistic/lines-between-class-members': 'off',
+            '@stylistic/lines-around-comment': 'off',
+            '@stylistic/multiline-comment-style': 'off',
+            '@stylistic/array-bracket-spacing': [
+                'error',
+                'always',
+                {
+                    objectsInArrays: false,
+                    arraysInArrays: false,
+                },
+            ],
+            '@stylistic/array-element-newline': [ 'error', 'consistent' ],
+            '@stylistic/array-bracket-newline': [ 'error', 'consistent' ],
+            '@stylistic/function-call-argument-newline': [ 'error', 'consistent' ],
+            '@stylistic/padded-blocks': 'off',
+            '@stylistic/no-multi-spaces': [ 'error', { ignoreEOLComments: true }],
+            '@stylistic/arrow-parens': 'off',
+            '@stylistic/indent-binary-ops': [ 'error', 4 ],
+            '@stylistic/operator-linebreak': [ 'error', 'before', { overrides: { '=': 'after' } }],
+            '@stylistic/multiline-ternary': [ 'error', 'always-multiline' ],
+            '@stylistic/dot-location': [ 'error', 'property' ],
+            '@stylistic/implicit-arrow-linebreak': 'off',
+            '@stylistic/function-paren-newline': 'off',
+            '@stylistic/no-confusing-arrow': 'off',
+            '@stylistic/semi-style': 'off',
+            '@stylistic/wrap-regex': 'off',
+            '@stylistic/newline-per-chained-call': [ 'error', { ignoreChainWithDepth: 3 }],
+            '@stylistic/spaced-comment': [ 'error', 'always', { 'exceptions': [ '*' ] }],
             'no-console': 'warn',
             'max-len': [ 'error', { 'code': 120 }],
             'brace-style': 'error',
             'keyword-spacing': [ 'error', { 'before': true, 'after': true }],
-            '@stylistic/ts/object-curly-spacing': [ 'error', 'always' ],
+            '@stylistic/object-curly-spacing': [ 'error', 'always' ],
             'array-bracket-spacing': [ 'error', 'always', { 'objectsInArrays': false, 'arraysInArrays': false }],
             'space-in-parens': [ 'error', 'never' ],
             'space-before-function-paren': [ 'error', 'always' ],
@@ -72,7 +98,7 @@ export default defineConfigWithVueTs(
             'dot-location': [ 'error', 'property' ],
             'eqeqeq': 'error',
             'no-implicit-globals': [ 'error', { 'lexicalBindings': true }],
-            '@stylistic/ts/member-delimiter-style': [ 'error', { 'multiline': { delimiter: 'none' } }],
+            '@stylistic/member-delimiter-style': [ 'error', { 'multiline': { delimiter: 'none' } }],
             '@typescript-eslint/no-angle-bracket-type-assertion': 'off',
             '@typescript-eslint/explicit-function-return-type': 'off',
             '@typescript-eslint/explicit-member-accessibility': 'off',
@@ -99,6 +125,7 @@ export default defineConfigWithVueTs(
             '@typescript-eslint/unbound-method': 'off',
             '@typescript-eslint/no-unused-vars': [ 'error', { caughtErrors: 'none' }],
             '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'off',
+            '@typescript-eslint/no-useless-default-assignment': 'off',
         },
     },
     {

package/lib/SVGDefinitions.vue

@@ -37,44 +37,41 @@
     <!-- eslint-enable -->
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-facing-decorator'
+<script setup lang="ts">
 import BrandColors from './pocketprep-export.module.scss'
 
-@Component
-export default class SVGDefinitions extends Vue {
-    colors = {
-        grayscale: {
-            color1: '#647D8F',
-            color2: BrandColors.brandBlack,
-        },
-        silver: {
-            color1: BrandColors.white,
-            color2: BrandColors.grayDivider,
-        },
-        red: {
-            color1: '#FF4747',
-            color2: BrandColors.redPegasus,
-        },
-        purple: {
-            color1: '#CE45FF',
-            color2: BrandColors.vibrantPurple,
-        },
-        green: {
-            color1: '#05A881',
-            color2: BrandColors.spectralGreen,
-        },
-        blue: {
-            color1: '#448EFF',
-            color2: BrandColors.brandBlue,
-        },
-        pocketprep: {
-            color1: '#0064FF',
-            color2: '#1671FF',
-        },
-    }
+const colors = {
+    grayscale: {
+        color1: '#647D8F',
+        color2: BrandColors.brandBlack,
+    },
+    silver: {
+        color1: BrandColors.white,
+        color2: BrandColors.grayDivider,
+    },
+    red: {
+        color1: '#FF4747',
+        color2: BrandColors.redPegasus,
+    },
+    purple: {
+        color1: '#CE45FF',
+        color2: BrandColors.vibrantPurple,
+    },
+    green: {
+        color1: '#05A881',
+        color2: BrandColors.spectralGreen,
+    },
+    blue: {
+        color1: '#448EFF',
+        color2: BrandColors.brandBlue,
+    },
+    pocketprep: {
+        color1: '#0064FF',
+        color2: '#1671FF',
+    },
 }
 </script>
+
 <style lang="scss">
 .uikit-svg-definitions {
     position: absolute;
@@ -82,4 +79,4 @@ export default class SVGDefinitions extends Vue {
     top: 0;
     z-index: -10000;
 }
-</style>
+</style>

package/lib/components/Banners/Banner.vue

@@ -7,12 +7,12 @@
             <div class="uikit-banner__content">
                 <slot name="bannerImage">
                     <img
-                        class="uikit-banner__content-icon" 
+                        class="uikit-banner__content-icon"
                         src="../../assets/emojis/tada.png"
                         alt=""
                     >
                 </slot>
-                <div 
+                <div
                     v-dark="isDarkMode"
                     class="uikit-banner__content-text"
                 >
@@ -25,20 +25,16 @@
     </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,
-    },
+withDefaults(defineProps<{
+    text?: string
+    isDarkMode?: boolean
+}>(), {
+    text: '',
+    isDarkMode: false,
 })
-export default class Banner extends Vue {
-    @Prop({ default: () => ('') }) text!: string
-    @Prop({ default: false }) isDarkMode!: boolean
-    
-}
 </script>
 
 <style lang="scss" scoped>

package/lib/components/Blobs/Blob.vue

@@ -6,20 +6,12 @@
     />
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
 import BlobEmptyState from './BlobEmptyState.vue'
 
-@Component({
-    components: {
-        BlobEmptyState,
-    },
-})
-export default class Blob extends Vue {
-    @Prop() type!: string
-    @Prop() title!: string
-    @Prop() isDarkMode!: boolean
-    @Prop() primaryColor!: string
-    @Prop({ default: 'currentColor' }) secondaryColor!: string
-}
+defineProps<{
+    type: string
+    title?: string
+    primaryColor?: string
+}>()
 </script>

package/lib/components/Blobs/BlobEmptyState.vue

@@ -11,13 +11,14 @@
     <!-- eslint-enable -->
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
 import BrandColors from '../../pocketprep-export.module.scss'
 
-@Component
-export default class BlobEmptyState extends Vue {
-    @Prop() title!: string
-    @Prop({ default: BrandColors.fog }) primaryColor!: string
-}
-</script>
+withDefaults(defineProps<{
+    title?: string
+    primaryColor?: string
+}>(), {
+    title: '',
+    primaryColor: BrandColors.fog,
+})
+</script>

package/lib/components/Blobs/blob.d.ts

@@ -1,2 +1,2 @@
 export type TBlobType =
-    'empty'
+    'empty'

package/lib/components/BundleIcons/BundleIcon.vue

@@ -3,7 +3,7 @@
     <div class="uikit-bundle-icon">
         <AMTA v-if="bundleId === 'VEcpw3DhnA' && theme === 'color'" />
         <svg v-else width="209px" height="209px" viewBox="0 0 209 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-            <title>{{ title }}</title>
+            <title></title>
             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <path :fill="`url(#${fillId})`" v-if="bundleId === 'mO5EIsoZ9H'" transform="translate(17.000000, 39.500000)" d="M143.5,0 C151.402759,0 157.828899,6.32215635 157.99664,14.1846885 L158,14.5 L158,106.079719 C158,111.653415 154.806654,116.722754 149.805173,119.137109 L149.496713,119.281591 L93.4967126,144.718582 C89.8091624,146.393585 85.5952671,146.447618 81.8737592,144.880679 L81.5032874,144.718582 L25.5032874,119.281591 C20.4285821,116.976498 17.133742,111.972532 17.0039782,106.420317 L17,106.079719 L17.0003788,36.2611986 C12.8365027,35.3406758 8.72130782,34.9623625 4.65479428,35.126259 L3.9663954,35.1595043 C1.89314634,35.2736838 0.119885158,33.6855441 0.00570570248,31.612295 C-0.0666396373,30.2986619 0.552941044,29.042775 1.63939092,28.3008233 C6.60149467,24.9144431 11.7217104,22.4414978 17.0001989,20.8822228 L17,14.5 C17,6.59724124 23.3221564,0.171101224 31.1846885,0.00336048213 L31.5,0 L143.5,0 Z M143.5,9 L31.5,9 C28.5365209,9 26.1204609,11.34378 26.0043672,14.2787929 L26,14.5 L26.0002291,19.1239124 C31.1782215,18.6135029 36.4988763,18.9263002 41.9623309,20.0625055 C59.9825747,23.8100788 76.016079,30.361181 90.0628438,39.7158122 L90.9034068,40.2802459 C91.7817882,40.8756264 92.3676626,41.814478 92.5164656,42.8651394 C93.3878402,49.0329817 96.49972,53.6634056 101.852587,56.756343 C107.17735,59.8330415 112.83623,59.9763513 118.829228,57.1862722 C119.89432,56.6883221 121.130982,56.7192801 122.170771,57.2681057 L135.037788,64.0730934 C136.873288,65.0438353 137.574312,67.3187435 136.60357,69.1542431 L136.573315,69.2102971 L136.573315,69.2102971 L118.777528,101.522173 C117.775828,103.340963 115.489369,104.003345 113.67058,103.001646 C113.646637,102.988459 113.622838,102.975012 113.599189,102.961306 L102.227266,96.3709628 C101.117783,95.7283719 100.412421,94.564579 100.355977,93.2836842 C100.065895,86.7176817 96.8023768,81.596884 90.5654214,77.9212911 C84.0528815,74.0832894 77.5665999,73.6590806 71.1065768,76.6486648 C70.4596442,76.9438326 69.9118395,77.4189005 69.5232315,78.0144052 L66.3767824,82.8783367 C65.3189188,84.5136329 63.1873364,85.0703126 61.4649539,84.1610998 L43.5424222,74.7001378 C41.7473502,73.7525536 41.0285582,71.5511685 41.9185572,69.7268602 L44.9257767,63.5627011 C45.1551028,63.0911969 45.2837168,62.57705 45.3024088,62.0530677 C45.6561716,52.3147724 39.6139791,44.8134014 27.1758313,39.5489546 C26.7835788,39.3829337 26.3917425,39.221548 26.0003224,39.0647975 L26,98.215 L36.3983255,79.5186249 C37.4173859,77.686307 39.668922,76.9614528 41.554598,77.8236699 L41.7418868,77.9151996 L59.3853871,87.1050955 C59.4175332,87.1218393 59.4494503,87.1390193 59.4811295,87.1566307 C61.349673,88.1954092 62.0609075,90.509741 61.1320077,92.4079085 L61.0336327,92.5962753 L46.413,118.894 L85.2253849,136.524316 C86.5857144,137.142222 88.1348815,137.178569 89.5174272,136.633358 L89.7746151,136.524316 L145.774615,111.087326 C147.66604,110.22818 148.905613,108.380609 148.994838,106.318556 L149,106.079719 L149,14.5 C149,11.4624339 146.537566,9 143.5,9 Z" fill-rule="nonzero"></path>
                 <path :fill="`url(#${fillId})`" v-else-if="bundleId === 'uKLwvbsbPV'" d="M160.5,39.5 C168.508129,39.5 175,45.9918711 175,54 L175,54 L175,145.579719 C175,151.267164 171.674983,156.429455 166.496713,158.781591 L166.496713,158.781591 L110.496713,184.218582 C106.686244,185.949419 102.313756,185.949419 98.5032874,184.218582 L98.5032874,184.218582 L42.5032874,158.781591 C37.3250167,156.429455 34,151.267164 34,145.579719 L34,145.579719 L34.0011059,127.105076 C30.3242184,126.140626 26.332642,125.108935 22.0263767,124.010003 L22,124 C20,123.5 18.5,121.5 18,119.5 C17.7664307,118.565723 17.6419707,113.812624 17.6266198,108.757571 L17.6257089,106.978261 C17.6361059,101.779773 17.7608696,96.6956522 18,95.5 C18.4499637,93.2501813 19.709797,92.6201015 21.7794997,93.2453488 L22.0171593,93.3410468 C26.2944372,95.0583479 30.2891026,96.6539691 34.0011553,98.1279104 L34,54 C34,45.9918711 40.4918711,39.5 48.5,39.5 L48.5,39.5 Z M160.5,48.5 L48.5,48.5 C45.4624339,48.5 43,50.9624339 43,54 L43,54 L43.0015671,101.680443 C60.4610565,108.52436 69.6272008,111.797545 70.5,111.5 C73.3345096,110.53369 77.5821351,109.454318 83.2428767,108.261885 C83.9655585,108.109652 84.7071182,108.072881 85.440045,108.15232 L85.7535477,108.193482 L111.795905,112.213057 C115.795905,113.213057 118.06249,115.579509 117.795905,119.713057 C117.52932,123.846605 113.5,124.5 107.5,124.5 C104.288095,124.5 98.8380681,125.037309 91.1499187,126.111927 C92.3647434,126.592316 93.4720866,127.031896 94.4719593,127.430668 L95.8911667,127.998219 C97.452875,128.624653 98.6854711,129.12611 99.5890132,129.502586 C101.614446,130.346516 108.163199,130.623077 112.586428,129.5 C115.698067,128.709941 119.28163,127.691921 122.827757,126.604101 L123.945747,126.258444 C129.895391,124.404529 135.586754,122.399848 138.586428,121 C146.086428,117.5 148.586428,117.5 151.586428,121 C154.538808,124.444444 150.399727,129.231698 145.334788,131.876308 L145.089013,132.002586 L107.586428,156 C104.274157,157.674334 100.32404,157.475692 97.1964522,155.477511 C89.4121824,150.695841 82.9662865,146.771573 77.8587643,143.704709 L77.0634357,143.227592 C71.5739908,139.937653 67.7195122,137.695122 65.5,136.5 C63.2513379,135.289182 55.7517147,132.956364 43.0011302,129.501545 L43,145.579719 C43,147.737026 44.2612132,149.695136 46.2253849,150.587326 L46.2253849,150.587326 L102.225385,176.024316 C103.670735,176.680841 105.329265,176.680841 106.774615,176.024316 L106.774615,176.024316 L162.774615,150.587326 C164.738787,149.695136 166,147.737026 166,145.579719 L166,145.579719 L166,54 C166,50.9624339 163.537566,48.5 160.5,48.5 L160.5,48.5 Z M124.753991,66.0904817 C127.490487,69.196825 125.438115,77.8255563 121.333371,83.3479444 C116.745685,89.5200677 112.093015,94.7425949 106.624706,100.260258 C104.964699,101.935247 104.271402,100.358787 103.222071,99.516353 L103.12566,99.4419011 L88.1533594,83.3479444 C83.0224297,76.7901086 83.0224297,70.577422 86.1009875,66.0904817 C87.7936365,63.6234775 88.8374833,62.9841384 92.600165,62.9841384 C96.3628468,62.9841384 100.809652,64.3647354 103.88821,70.577422 C106.624706,67.1259294 108.335016,65.4001832 113.123884,62.9841384 C117.912751,60.5680936 122.017495,62.9841384 124.753991,66.0904817 Z" fill-rule="nonzero"></path>
@@ -26,77 +26,50 @@
 </template>
 <!-- eslint-enable -->
 
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-import type { TBundleIds } from './bundleIcon'
+<script setup lang="ts">
 import AMTA from './AMTA.vue'
+import { computed, onMounted } from 'vue'
 
-@Component({
-    components: {
-        AMTA,
-    },
+const props = withDefaults(defineProps<{
+    bundleId?: string
+    grayscale?: boolean
+    theme?: 'color' | 'grayscale' | 'silver'
+}>(), {
+    bundleId: 'mO5EIsoZ9H',
+    grayscale: false,
+    theme: 'color',
 })
-export default class BundleIcon extends Vue {
-    @Prop({ default: 'mO5EIsoZ9H' }) bundleId!: TBundleIds
-    @Prop({ default: false }) grayscale!: boolean
-    @Prop({ default: 'color' }) theme!: 'color' | 'grayscale' | 'silver'
 
-    get title () {
-        // if (this.bundleId === 'vtgI9oxCI4') {
-        //     return 'Test Prep icon'
-        // } else if (this.bundleId === 'mO5EIsoZ9H') {
-        //     return 'Skilled Trades bundle icon'
-        // } else if (this.bundleId === 'gAlCkoUVLl') {
-        //     return 'EMS bundle icon'
-        // } else if (this.bundleId === '4dTgUX97Dk') {
-        //     return 'Nursing bundle icon'
-        // } else if (this.bundleId === 'uKLwvbsbPV') {
-        //     return 'Behavioral Health bundle icon'
-        // } else if (this.bundleId === '9970muCFGV') {
-        //     return 'Nursing School bundle icon'
-        // } else if (this.bundleId === 'GVCNrq4ixh') {
-        //     return 'Finance bundle icon'
-        // } else if (this.bundleId === '1kS20KPPkH') {
-        //     return 'IT & Cybersecurity bundle icon'
-        // } else if (this.bundleId === 'DO5jBm0OJo') {
-        //     return 'Essentials'
-        // } else {
-        //     return 'Bundle icon'
-        // }
-        return ''
+const fillId = computed(() => {
+    if (props.theme === 'grayscale' || props.grayscale) {
+        return 'bundle-icon-gradient-grayscale'
+    }
+    if (props.theme === 'silver') {
+        return 'bundle-icon-gradient-silver'
     }
 
-    get fillId () {
-        if (this.theme === 'grayscale' || this.grayscale) {
-            return 'bundle-icon-gradient-grayscale'
-        }
-        if (this.theme === 'silver') {
-            return 'bundle-icon-gradient-silver'
-        }
-
-        if (this.bundleId === 'vtgI9oxCI4') {
-            return 'bundle-icon-gradient-pocketprep'
-        }
-        if (this.bundleId === 'mO5EIsoZ9H' || this.bundleId === 'gAlCkoUVLl' || this.bundleId === '4dTgUX97Dk') {
-            return 'bundle-icon-gradient-red'
-        }
-        if (this.bundleId === 'uKLwvbsbPV' || this.bundleId === '9970muCFGV') {
-            return 'bundle-icon-gradient-purple'
-        }
-        if (this.bundleId === 'GVCNrq4ixh' || this.bundleId === '1kS20KPPkH') {
-            return 'bundle-icon-gradient-green'
-        }
-
-        return 'bundle-icon-gradient-blue'
+    if (props.bundleId === 'vtgI9oxCI4') {
+        return 'bundle-icon-gradient-pocketprep'
+    }
+    if (props.bundleId === 'mO5EIsoZ9H' || props.bundleId === 'gAlCkoUVLl' || props.bundleId === '4dTgUX97Dk') {
+        return 'bundle-icon-gradient-red'
+    }
+    if (props.bundleId === 'uKLwvbsbPV' || props.bundleId === '9970muCFGV') {
+        return 'bundle-icon-gradient-purple'
     }
+    if (props.bundleId === 'GVCNrq4ixh' || props.bundleId === '1kS20KPPkH') {
+        return 'bundle-icon-gradient-green'
+    }
+
+    return 'bundle-icon-gradient-blue'
+})
 
-    mounted () {
-        if (!document.querySelector('.uikit-svg-definitions')) {
-            // eslint-disable-next-line no-console
-            console.error('You must include SVGDefintions.vue component somewhere in the app for bundle icons to work.')
-        }
+onMounted(() => {
+    if (!document.querySelector('.uikit-svg-definitions')) {
+        // eslint-disable-next-line no-console
+        console.error('You must include SVGDefintions.vue component somewhere in the app for bundle icons to work.')
     }
-}
+})
 </script>
 
 <style lang="scss">

package/lib/components/BundleIcons/bundleIcon.d.ts

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

package/lib/components/Bundles/BundleList.vue

@@ -21,8 +21,9 @@
         >
             <span>
                 <BundleIcon
-                    :ref="bundle.objectId"
+                    ref="bundleIcons"
                     class="uikit-bundle-list__icon"
+                    :data-bundle-id="bundle.objectId"
                     :bundle-id="bundle.objectId"
                     :theme="isDarkMode
                         ? 'silver'
@@ -40,74 +41,85 @@
     </ul>
 </template>
 
-<script lang="ts">
-import type { ComponentPublicInstance } from 'vue'
-import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch, type ComponentPublicInstance } from 'vue'
 import BundleIcon from '../BundleIcons/BundleIcon.vue'
 import type { Study } from '@pocketprep/types'
-import { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
 import PremiumPill from '../Bundles/PremiumPill.vue'
 
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        BundleIcon,
-        PremiumPill,
-    },
-})
-export default class BundleSearch extends Vue {
-    @Prop() bundles!: Study.Class.BundleJSON[]
-    @Prop({ default: null }) modelValue!: Study.Class.BundleJSON
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: () => ([]) }) premiumBundleIds!: string[]
-    
-    hoverBundleId: string | null = null
-    hoverBundleColor: string | null = null
-    selectedBundleColor: string | null = null
-
-    mounted () {
-        this.modelValue && this.selectBundle(this.modelValue)
-    }
-
-    selectBundle (bundle: Study.Class.BundleJSON) {
-        const selectedBundleId = bundle.objectId
-        this.hoverBundleId = selectedBundleId
-        this.$nextTick(() => {
-            this.updateBundleColor()
-            this.selectedBundleColor = this.hoverBundleColor
+const {
+    modelValue = null,
+    isDarkMode,
+    premiumBundleIds = [],
+} = defineProps<{
+    bundles: Study.Class.BundleJSON[]
+    modelValue?: Study.Class.BundleJSON | null
+    isDarkMode?: boolean
+    premiumBundleIds?: string[]
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [val: Study.Class.BundleJSON]
+}>()
+
+const hoverBundleId = ref<string | null>(null)
+const hoverBundleColor = ref<string | null>(null)
+const selectedBundleColor = ref<string | null>(null)
+const bundleIconRefs = useTemplateRef<ComponentPublicInstance[]>('bundleIcons')
+
+const hoverBundleRef = computed(() => {
+    if (hoverBundleId.value) {
+        return bundleIconRefs.value?.find(bundleIconRef => {
+            const bundleIconEl: HTMLElement = bundleIconRef.$el
+            return hoverBundleId.value === bundleIconEl.getAttribute('data-bundle-id')
         })
-        this.emitUpdateModelValue(bundle)
+    } else {
+        return null
     }
+})
 
-    updateBundleColor () {
-        if (this.hoverBundleId) {
-            try {
-                const bundleIcon = this.$refs[this.hoverBundleId] as ComponentPublicInstance[]
-                const gId = bundleIcon[0]?.$el?.querySelector('path')?.getAttribute('fill')?.split('#')[1].split(')')[0]
-                const stopColor = document.querySelectorAll(`#${gId} stop`)[1]?.getAttribute('stop-color')
-                this.hoverBundleColor = stopColor || null
-            } catch (err) {
-                // no-op
-            }
-        } else {
-            this.hoverBundleColor = null
-        }
-    }
+onMounted(() => {
+    modelValue && selectBundle(modelValue)
+})
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (val: Study.Class.BundleJSON) {
-        return val
-    }
+const selectBundle = (bundle: Study.Class.BundleJSON) => {
+    const selectedBundleId = bundle.objectId
+    hoverBundleId.value = selectedBundleId
+    nextTick(() => {
+        updateBundleColor()
+        selectedBundleColor.value = hoverBundleColor.value
+    })
+    emitUpdateModelValue(bundle)
+}
 
-    @Watch('hoverBundleId')
-    hoverBundleIdChanged () {
-        this.$nextTick(() => {
-            this.updateBundleColor()
-        })
+const updateBundleColor = () => {
+    if (hoverBundleId.value) {
+        try {
+            const gId = hoverBundleRef.value?.$el
+                ?.querySelector('path')
+                ?.getAttribute('fill')
+                ?.split('#')[1]
+                ?.split(')')[0]
+            const stopColor = document.querySelectorAll(`#${gId} stop`)[1]?.getAttribute('stop-color')
+            hoverBundleColor.value = stopColor || null
+        } catch (err) {
+            // no-op
+        }
+    } else {
+        hoverBundleColor.value = null
     }
 }
+
+const emitUpdateModelValue = (val: Study.Class.BundleJSON) => {
+    emit('update:modelValue', val)
+}
+
+watch(hoverBundleId, () => {
+    nextTick(() => {
+        updateBundleColor()
+    })
+})
 </script>
 
 <style lang="scss">
@@ -167,4 +179,4 @@ export default class BundleSearch extends Vue {
         margin-right: 9px;
     }
 }
-</style>
+</style>