@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Exams/ExamCard.vue

@@ -2,8 +2,8 @@
     <div
         v-dark="isDarkMode"
         class="uikit-exam-card"
-        :class="{ 
-            'uikit-exam-card--cancel': showCancelButton, 
+        :class="{
+            'uikit-exam-card--cancel': showCancelButton,
             'uikit-exam-card--disable-interaction': disableInteraction,
             'uikit-exam-card--exam-selected': !showCancelButton && !disableInteraction && isSelected
         }"
@@ -13,7 +13,7 @@
         @mousedown.prevent
     >
         <div
-            v-if="showCancelButton" 
+            v-if="showCancelButton"
             class="uikit-exam-card__cancel"
             tabindex="0"
             aria-label="Clear exam selection"
@@ -41,7 +41,7 @@
             </span> Subjects
         </div>
         <span
-            class="uikit-exam-card__label" 
+            class="uikit-exam-card__label"
             aria-hidden="true"
             :style="{ color: bundleColor || '' }"
         >
@@ -56,56 +56,68 @@
     </div>
 </template>
 
-<script lang="ts">
-import type { ComponentPublicInstance } from 'vue'
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef, type ComponentPublicInstance } from 'vue'
 import BundleIcon from '../BundleIcons/BundleIcon.vue'
 import Icon from '../Icons/Icon.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,
-        Icon,
-        PremiumPill,
-    },
-})
-export default class ExamCard extends Vue {
-    @Prop() exam!: Study.Class.ExamMetadataJSON
-    @Prop() bundle!: Study.Class.BundleJSON
-    @Prop({ default: false }) showCancelButton!: boolean
-    @Prop({ default: false }) disableInteraction!: boolean
-    @Prop({ default: false }) isPremium!: boolean
-    @Prop({ default: false }) isSelected!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-
-    bundleColor: string | null = null
-    
-    mounted () {
-        try {
-            const bundleIcon = this.$refs.bundleIcon as ComponentPublicInstance
-            const gId = bundleIcon.$el?.querySelector('path')?.getAttribute('fill')?.split('#')[1].split(')')[0]
-            const stopColor = document.querySelectorAll(`#${gId} stop`)[1]?.getAttribute('stop-color')
-            this.bundleColor = stopColor || null
-        } catch (e) {
-            // noop
-        }
+const {
+    exam,
+    bundle,
+    showCancelButton = false,
+    disableInteraction = false,
+    isPremium = false,
+    isSelected = false,
+    isDarkMode = false,
+} = defineProps<{
+    exam: {
+        nativeAppName: string
+        descriptiveName: string
+        itemCount: number
+        archivedCount: number
+        knowledgeAreas: Record<string, unknown>
     }
-
-    @Emit('select')
-    emitSelect () {
-        return true
+    bundle: {
+        objectId: string
+        name: string
     }
+    showCancelButton?: boolean
+    disableInteraction?: boolean
+    isPremium?: boolean
+    isSelected?: boolean
+    isDarkMode?: boolean
+}>()
+
+const emit = defineEmits<{
+    'select': []
+    'cancel': []
+}>()
 
-    @Emit('cancel')
-    emitCancel () {
-        return true
+const bundleIcon = useTemplateRef<ComponentPublicInstance>('bundleIcon')
+const bundleColor = ref<string | null>(null)
+
+onMounted(() => {
+    try {
+        const gId = bundleIcon.value?.$el
+            ?.querySelector('path')
+            ?.getAttribute('fill')
+            ?.split('#')[1]
+            ?.split(')')[0]
+        const stopColor = document.querySelectorAll(`#${gId} stop`)[1]?.getAttribute('stop-color')
+        bundleColor.value = stopColor || null
+    } catch (e) {
+        // noop
     }
+})
+
+const emitSelect = () => {
+    emit('select')
+}
+
+const emitCancel = () => {
+    emit('cancel')
 }
 </script>
 
@@ -254,4 +266,4 @@ export default class ExamCard extends Vue {
         margin-right: 4px;
     }
 }
-</style>
+</style>

package/lib/components/Exams/ExamMenuCard.vue

@@ -40,38 +40,40 @@
     </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 BundleIcon from '../BundleIcons/BundleIcon.vue'
 import PremiumPill from '../Bundles/PremiumPill.vue'
-import type { Study } from '@pocketprep/types'
-
-@Component({
-    components: {
-        BundleIcon,
-        Icon,
-        PremiumPill,
-    },
-})
-export default class ExamMenuCard extends Vue {
-    @Prop() exam!: Study.Class.ExamMetadataJSON
-    @Prop() bundleId!: string
-    @Prop({ default: 'color' }) theme!: 'color' | 'grayscale' | 'silver'
-    @Prop({ default: false }) isPremium!: boolean
-    @Prop({ default: false }) showMenuArrow!: boolean
-    @Prop({ default: 'down' }) menuArrowDirection!: 'up' | 'down'
-    @Prop({ default: true }) isClickable!: boolean
-
-    @Emit('click')
-    emitClick (event: Event) {
-        return event
-    }
 
-    @Emit('keydown')
-    emitKeydown (keyEvent: KeyboardEvent) {
-        return keyEvent
-    }
+const {
+    exam,
+    bundleId,
+    theme = 'color',
+    isPremium = false,
+    showMenuArrow = false,
+    menuArrowDirection = 'down',
+    isClickable = true,
+} = defineProps<{
+    exam: { nativeAppName: string; descriptiveName: string }
+    bundleId: string
+    theme?: 'color' | 'grayscale' | 'silver'
+    isPremium?: boolean
+    showMenuArrow?: boolean
+    menuArrowDirection?: 'up' | 'down'
+    isClickable?: boolean
+}>()
+
+const emit = defineEmits<{
+    'click': [event: Event]
+    'keydown': [keyEvent: KeyboardEvent]
+}>()
+
+const emitClick = (event: Event) => {
+    emit('click', event)
+}
+
+const emitKeydown = (keyEvent: KeyboardEvent) => {
+    emit('keydown', keyEvent)
 }
 </script>
 

package/lib/components/Filters/FilterDropdown.vue

@@ -5,7 +5,7 @@
             :has-icon="true"
             :aria-expanded="showFilterDropdown ? 'true' : 'false'"
             class="uikit-filter__link"
-            :class="{ 
+            :class="{
                 'uikit-filter__link--open': showFilterDropdown,
                 'uikit-filter__link--responsive': responsiveButton,
             }"
@@ -15,13 +15,13 @@
             @keypress.enter="() => showFilterDropdown = !showFilterDropdown"
             @click="() => showFilterDropdown = !showFilterDropdown"
         >
-            <Icon 
+            <Icon
                 type="filter"
                 class="uikit-filter__icon"
             />
-            <span 
+            <span
                 class="uikit-filter__text"
-                :class="{ 
+                :class="{
                     'uikit-filter__text--responsive': responsiveButton,
                 }"
             >
@@ -33,8 +33,8 @@
             v-dark="isDarkMode"
             class="uikit-filter__dropdown"
             :class="{
-                [`uikit-filter__dropdown--${align}`]: true, 
-                [`uikit-filter__dropdown--${size}`]: true 
+                [`uikit-filter__dropdown--${align}`]: true,
+                [`uikit-filter__dropdown--${size}`]: true
             }"
         >
             <slot name="filterOptions">
@@ -53,102 +53,99 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Link from '../Buttons/Link.vue'
 import Icon from '../Icons/Icon.vue'
 import FilterOptions from '../Filters/FilterOptions.vue'
-import { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
 import type { TRadioOption, TCheckboxOption } from './filterOptions'
-
-@Component({
-    components: {
-        FilterOptions,
-        Icon,
-        Link,
-    },
-    directives: {
-        dark,
-    },
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const {
+    radioEntries,
+    checkboxEntries,
+    filterLabel,
+    align = 'right',
+    size = 'small',
+    isDarkMode = false,
+    responsiveButton = false,
+    filterOptionsLabel = 'FILTER BY SUBJECT',
+} = defineProps<{
+    radioEntries: TRadioOption[]
+    checkboxEntries: TCheckboxOption[]
+    filterLabel: string
+    align?: 'left' | 'right'
+    size?: 'small' | 'large'
+    isDarkMode?: boolean
+    responsiveButton?: boolean
+    filterOptionsLabel?: string
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [options: TCheckboxOption[] | TRadioOption[]]
+}>()
+
+const radioOptions = ref<TRadioOption[]>([])
+const checkboxOptions = ref<TCheckboxOption[]>([])
+const showFilterDropdown = ref<boolean | 'checkbox'>(false)
+
+onMounted(() => {
+    document.addEventListener('click', clickListener)
+    document.addEventListener('keydown', keydownListener)
+    radioOptions.value = [ ...radioEntries ]
+    checkboxOptions.value = [ ...checkboxEntries ]
 })
 
-export default class FilterDropdown extends Vue {
-    @Prop() radioEntries!: TRadioOption[]
-    @Prop() checkboxEntries!: TCheckboxOption[]
-    @Prop() filterLabel!: string
-    @Prop({ default: 'right' }) align!: 'left' | 'right'
-    @Prop({ default: 'small' }) size!: 'small' | 'large'
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) responsiveButton!: boolean
-    @Prop({ default: 'FILTER BY SUBJECT' }) filterOptionsLabel?: string
-
-    radioOptions: TRadioOption[] = []
-    checkboxOptions: TCheckboxOption[] = []
-
-    showFilterDropdown: boolean | 'checkbox' = false
-
-    mounted () {
-        document.addEventListener('click', this.clickListener)
-        document.addEventListener('keydown', this.keydownListener)
-        this.radioOptions = [ ...this.radioEntries ]
-        this.checkboxOptions = [ ...this.checkboxEntries ]
-    }
+onBeforeUnmount(() => {
+    document.removeEventListener('click', clickListener)
+    document.removeEventListener('keydown', keydownListener)
+})
 
-    keydownListener (e: KeyboardEvent) {
-        if (e.code === 'Escape') {
-            e.stopPropagation()
-            this.showFilterDropdown = false
-        }
+const keydownListener = (e: KeyboardEvent) => {
+    if (e.code === 'Escape') {
+        e.stopPropagation()
+        showFilterDropdown.value = false
     }
-    clickListener (e: MouseEvent) {
-        if (this.showFilterDropdown) {
-            const targetEl = e.target as HTMLElement
-            if (!targetEl?.closest('.uikit-filter') 
-                && this.showFilterDropdown !== 'checkbox'
-                && document.body.contains(targetEl)
-            ) {
-                this.showFilterDropdown = false
-            }
+}
+const clickListener = (e: MouseEvent) => {
+    if (showFilterDropdown.value) {
+        const targetEl = e.target as HTMLElement
+        if (!targetEl?.closest('.uikit-filter')
+            && showFilterDropdown.value !== 'checkbox'
+            && document.body.contains(targetEl)
+        ) {
+            showFilterDropdown.value = false
         }
     }
+}
 
-    beforeUnmount () {
-        document.removeEventListener('click', this.clickListener)
-        document.removeEventListener('keydown', this.keydownListener)
+watch(checkboxOptions, (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) => {
+    const newEnabledFilters = newVal.filter(o => o.enabled)
+    const oldEnabledFilters = oldVal.filter(o => o.enabled)
+    if (newEnabledFilters.length !== oldEnabledFilters.length) {
+        emitUpdateModelValue(newVal)
     }
+}, { deep: true })
 
-    @Watch('checkboxOptions', { deep: true })
-    checkboxOptionsChanged (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) {
-        const newEnabledFilters = newVal.filter(o => o.enabled)
-        const oldEnabledFilters = oldVal.filter(o => o.enabled)
-        if (newEnabledFilters.length !== oldEnabledFilters.length) {
-            this.emitUpdateModelValue(newVal)
-        }
-    }
-    @Watch('checkboxEntries', { deep: true })
-    checkboxOptionChanged (newVal: TCheckboxOption[]) {
-        this.checkboxOptions = [ ...newVal ]
-    }
+watch(() => checkboxEntries, (newVal: TCheckboxOption[]) => {
+    checkboxOptions.value = [ ...newVal ]
+}, { deep: true })
 
-    @Watch('radioOptions', { deep: true })
-    radioOptionsChanged (newVal: TRadioOption[], oldVal: TRadioOption[]) {
-        const newEnabledFilters = newVal
-        const oldEnabledFilters = oldVal
-        if (newEnabledFilters.length !== oldEnabledFilters.length) {
-            this.emitUpdateModelValue(newVal)
-        }
-    }
-    @Watch('radioEntries', { deep: true })
-    radioOptionChanged (newVal: TRadioOption[]) {
-        this.radioOptions = [ ...newVal ]
+watch(radioOptions, (newVal: TRadioOption[], oldVal: TRadioOption[]) => {
+    const newEnabledFilters = newVal
+    const oldEnabledFilters = oldVal
+    if (newEnabledFilters.length !== oldEnabledFilters.length) {
+        emitUpdateModelValue(newVal)
     }
+}, { deep: true })
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (options: TCheckboxOption[] | TRadioOption[]) {
-        return options
-    }
-}
+watch(() => radioEntries, (newVal: TRadioOption[]) => {
+    radioOptions.value = [ ...newVal ]
+}, { deep: true })
 
+const emitUpdateModelValue = (options: TCheckboxOption[] | TRadioOption[]) => {
+    emit('update:modelValue', options)
+}
 </script>
 
 <style lang="scss">
@@ -218,4 +215,4 @@ export default class FilterDropdown extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Filters/FilterOptions.vue

@@ -2,9 +2,9 @@
     <div
         v-dark="isDarkMode"
         class="filter-options"
-        :class="{ 
-            [`filter-options--${align}`]: true, 
-            [`filter-options-${size}`]: true 
+        :class="{
+            [`filter-options--${align}`]: true,
+            [`filter-options-${size}`]: true
         }"
     >
         <slot name="radioLabel">
@@ -28,7 +28,7 @@
                     />
                 </slot>
             </div>
-        </slot>    
+        </slot>
         <slot name="radio">
             <Radio
                 v-if="showRadioOptions"
@@ -93,108 +93,103 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from 'vue-facing-decorator'
+<script setup lang="ts">
 import CheckboxOption from '../Forms/CheckboxOption.vue'
-import Link from '../Buttons/Link.vue'
 import Radio from '../Forms/Radio.vue'
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
 import type { TRadioOption, TCheckboxOption } from './filterOptions'
+import { onMounted, ref, watch } from 'vue'
 
-@Component({
-    components: {
-        CheckboxOption,
-        Link,
-        Radio,
-        Icon,
-    },
-    directives: {
-        dark,
-    },
-})
+const {
+    defaultRadioEntry = '',
+    radioEntries,
+    checkboxEntries,
+    align = 'right',
+    size = 'small',
+    isDarkMode = false,
+    filterOptionsLabel = 'FILTER BY SUBJECT',
+} = defineProps<{
+    defaultRadioEntry?: string
+    radioEntries: TRadioOption[]
+    checkboxEntries: TCheckboxOption[]
+    align?: 'left' | 'right'
+    size?: 'small' | 'large'
+    isDarkMode?: boolean
+    filterOptionsLabel?: string
+}>()
 
+const emit = defineEmits<{
+    'update:modelValue': [options: TCheckboxOption[] | TRadioOption[]]
+}>()
 
-export default class FilterOptions extends Vue {
-    @Prop({ default: '' }) defaultRadioEntry?: string
-    @Prop() radioEntries!: TRadioOption[]
-    @Prop() checkboxEntries!: TCheckboxOption[]
-    @Prop({ default: 'right' }) align!: 'left' | 'right'
-    @Prop({ default: 'small' }) size!: 'small' | 'large'
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: 'FILTER BY SUBJECT' }) filterOptionsLabel?: string
+const radioOptions = ref<TRadioOption[]>([])
+const checkboxOptions = ref<TCheckboxOption[]>([])
 
-    radioOptions: TRadioOption[] = []
-    checkboxOptions: TCheckboxOption[] = []
+const showFilterDropdown = ref<boolean | 'checkbox'>(false)
+const showRadioOptions = ref(true)
+const showCheckboxOptions = ref(false)
 
-    showFilterDropdown: boolean | 'checkbox' = false
-    showRadioOptions = true
-    showCheckboxOptions = false
+const radioEntry = ref<{ label: string; value: string } | null>(radioOptions.value.find(
+    o => o.value === defaultRadioEntry
+) || null)
 
-    radioEntry: { label: string; value: string } | null = this.radioOptions.find(
-        o => o.value === this.defaultRadioEntry
-    ) || null
+const stringHasSpaces = (val: string) => {
+    return val.includes(' ')
+}
 
-    stringHasSpaces (val: string) {
-        return val.includes(' ')
+const keydownListener = (e: KeyboardEvent) => {
+    if (e.code === 'Escape') {
+        e.stopPropagation()
+        showFilterDropdown.value = false
     }
-
-    keydownListener (e: KeyboardEvent) {
-        if (e.code === 'Escape') {
-            e.stopPropagation()
-            this.showFilterDropdown = false
-        }
-    }
-    clickListener (e: MouseEvent) {
-        if (this.showFilterDropdown) {
-            const targetEl = e.target as HTMLElement
-            if (!targetEl?.closest('.filter') 
-                && this.showFilterDropdown !== 'checkbox'
-                && document.body.contains(targetEl)
-            ) {
-                this.showFilterDropdown = false
-            }
+}
+const clickListener = (e: MouseEvent) => {
+    if (showFilterDropdown.value) {
+        const targetEl = e.target as HTMLElement
+        if (!targetEl?.closest('.filter')
+            && showFilterDropdown.value !== 'checkbox'
+            && document.body.contains(targetEl)
+        ) {
+            showFilterDropdown.value = false
         }
     }
+}
 
-    mounted () {
-        document.addEventListener('click', this.clickListener)
-        document.addEventListener('keydown', this.keydownListener)
-        this.radioOptions = [ ...this.radioEntries ]
-        this.checkboxOptions = [ ...this.checkboxEntries ]
-    }
+onMounted(() => {
+    document.addEventListener('click', clickListener)
+    document.addEventListener('keydown', keydownListener)
+    radioOptions.value = [ ...radioEntries ]
+    checkboxOptions.value = [ ...checkboxEntries ]
+})
 
-    @Watch('checkboxOptions', { deep: true })
-    checkboxOptionsChanged (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) {
+watch(checkboxOptions, (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) => {
 
-        const newEnabledFilters = newVal.filter(o => o.enabled)
-        const oldEnabledFilters = oldVal.filter(o => o.enabled)
-        if (newEnabledFilters.length !== oldEnabledFilters.length) {
-            this.emitUpdateModelValue(newVal)
-        }
-    }
-    @Watch('checkboxEntries', { deep: true })
-    checkboxOptionChanged (newVal: TCheckboxOption[]) {
-        this.checkboxOptions = [ ...newVal ]
+    const newEnabledFilters = newVal.filter(o => o.enabled)
+    const oldEnabledFilters = oldVal.filter(o => o.enabled)
+    if (newEnabledFilters.length !== oldEnabledFilters.length) {
+        emitUpdateModelValue(newVal)
     }
+}, { deep: true })
 
-    @Watch('radioOptions', { deep: true })
-    radioOptionsChanged (newVal: TRadioOption[], oldVal: TRadioOption[]) {
-        const newEnabledFilters = newVal
-        const oldEnabledFilters = oldVal
-        if (newEnabledFilters.length !== oldEnabledFilters.length) {
-            this.emitUpdateModelValue(newVal)
-        }
-    }
-    @Watch('radioEntries', { deep: true })
-    radioOptionChanged (newVal: TRadioOption[]) {
-        this.radioOptions = [ ...newVal ]
-    }
+watch(() => checkboxEntries, (newVal: TCheckboxOption[]) => {
+    checkboxOptions.value = [ ...newVal ]
+}, { deep: true })
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (options: TCheckboxOption[] | TRadioOption[]) {
-        return options
+watch(radioOptions, (newVal: TRadioOption[], oldVal: TRadioOption[]) => {
+    const newEnabledFilters = newVal
+    const oldEnabledFilters = oldVal
+    if (newEnabledFilters.length !== oldEnabledFilters.length) {
+        emitUpdateModelValue(newVal)
     }
+}, { deep: true })
+
+watch(() => radioEntries, (newVal: TRadioOption[]) => {
+    radioOptions.value = [ ...newVal ]
+}, { deep: true })
+
+const emitUpdateModelValue = (options: TCheckboxOption[] | TRadioOption[]) => {
+    emit('update:modelValue', options)
 }
 
 </script>
@@ -234,7 +229,7 @@ export default class FilterOptions extends Vue {
         }
 
         &:hover {
-            svg, 
+            svg,
             span {
                 color: $brand-blue;
                 cursor: pointer;
@@ -262,7 +257,7 @@ export default class FilterOptions extends Vue {
             }
 
             &:hover {
-                svg, 
+                svg,
                 span {
                     color: $banana-bread;
                     cursor: pointer;
@@ -299,4 +294,4 @@ export default class FilterOptions extends Vue {
         }
     }
 }
-</style>
+</style>