@pocketprep/ui-kit 3.0.2 → 3.0.4

package/lib/components/Buttons/Button.vue

@@ -63,15 +63,15 @@ export default class Button extends Vue {
     @Prop({ default: '' }) readonly iconTitle!: string
     @Prop({ default: false }) isLoading!: boolean
 
-    buttonClicked () {
+    buttonClicked (event: Event) {
         if (!this.disabled && !this.isLoading) {
-            this.emitClick()
+            this.emitClick(event)
         }
     }
 
     @Emit('click')
-    emitClick () {
-        return true
+    emitClick (event: Event) {
+        return event
     }
 }
 </script>

package/lib/components/Buttons/Tab.vue

@@ -4,8 +4,8 @@
         class="uikit-tab"
         :class="{ 'uikit-tab--disabled': disabled, 'uikit-tab--active': active }"
         :tabindex="disabled ? -1 : 0"
-        @click="emitClick()"
-        @keydown.enter="emitClick()"
+        @click="emitClick"
+        @keydown.enter="emitClick"
         @mousedown.prevent
     >
         <slot />
@@ -27,8 +27,8 @@ export default class Tab extends Vue {
     @Prop({ default: false }) isDarkMode!: boolean
 
     @Emit('click')
-    emitClick () {
-        return true
+    emitClick (event: Event) {
+        return event
     }
 }
 </script>

package/lib/components/Exams/ExamMenuCard.vue

@@ -8,7 +8,7 @@
         }"
         :tabindex="isClickable ? '0' : '-1'"
         @mousedown.prevent
-        @click="isClickable && emitClick()"
+        @click="isClickable && emitClick($event)"
         @keydown="isClickable && emitKeydown($event)"
     >
         <div class="uikit-exam-menu-card__icon">
@@ -44,12 +44,14 @@
 import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
 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 {
@@ -62,8 +64,8 @@ export default class ExamMenuCard extends Vue {
     @Prop({ default: true }) isClickable!: boolean
 
     @Emit('click')
-    emitClick () {
-        return true
+    emitClick (event: Event) {
+        return event
     }
 
     @Emit('keydown')

package/lib/components/Filters/FilterDropdown.vue

@@ -103,7 +103,7 @@ export default class FilterDropdown extends Vue {
         document.removeEventListener('keydown', this.keydownListener)
     }
 
-    @Watch('checkboxOptions')
+    @Watch('checkboxOptions', { deep: true })
     checkboxOptionsChanged (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) {
         const newEnabledFilters = newVal.filter(o => o.enabled)
         const oldEnabledFilters = oldVal.filter(o => o.enabled)
@@ -111,12 +111,12 @@ export default class FilterDropdown extends Vue {
             this.emitUpdateModelValue(newVal)
         }
     }
-    @Watch('checkboxEntries')
+    @Watch('checkboxEntries', { deep: true })
     checkboxOptionChanged (newVal: TCheckboxOption[]) {
         this.checkboxOptions = [ ...newVal ]
     }
 
-    @Watch('radioOptions')
+    @Watch('radioOptions', { deep: true })
     radioOptionsChanged (newVal: TRadioOption[], oldVal: TRadioOption[]) {
         const newEnabledFilters = newVal
         const oldEnabledFilters = oldVal
@@ -124,7 +124,7 @@ export default class FilterDropdown extends Vue {
             this.emitUpdateModelValue(newVal)
         }
     }
-    @Watch('radioEntries')
+    @Watch('radioEntries', { deep: true })
     radioOptionChanged (newVal: TRadioOption[]) {
         this.radioOptions = [ ...newVal ]
     }

package/lib/components/Filters/FilterOptions.vue

@@ -156,7 +156,7 @@ export default class FilterOptions extends Vue {
         document.addEventListener('keydown', this.keydownListener)
     }
 
-    @Watch('checkboxOptions')
+    @Watch('checkboxOptions', { deep: true })
     checkboxOptionsChanged (newVal: TCheckboxOption[], oldVal: TCheckboxOption[]) {
 
         const newEnabledFilters = newVal.filter(o => o.enabled)
@@ -165,12 +165,12 @@ export default class FilterOptions extends Vue {
             this.emitUpdateModelValue(newVal)
         }
     }
-    @Watch('checkboxEntries')
+    @Watch('checkboxEntries', { deep: true })
     checkboxOptionChanged (newVal: TCheckboxOption[]) {
         this.checkboxOptions = [ ...newVal ]
     }
 
-    @Watch('radioOptions')
+    @Watch('radioOptions', { deep: true })
     radioOptionsChanged (newVal: TRadioOption[], oldVal: TRadioOption[]) {
         const newEnabledFilters = newVal
         const oldEnabledFilters = oldVal
@@ -178,7 +178,7 @@ export default class FilterOptions extends Vue {
             this.emitUpdateModelValue(newVal)
         }
     }
-    @Watch('radioEntries')
+    @Watch('radioEntries', { deep: true })
     radioOptionChanged (newVal: TRadioOption[]) {
         this.radioOptions = [ ...newVal ]
     }

package/lib/components/Quiz/Question.vue

@@ -1503,12 +1503,12 @@ export default class Question extends Vue {
         }
     }
 
-    @Watch('previousChoices')
+    @Watch('previousChoices', { deep: true })
     previousChoicesChanged (choices: TChoiceKey[]) {
         this.updateSelectedChoices(choices)
     }
 
-    @Watch('selectedChoices')
+    @Watch('selectedChoices', { deep: true })
     selectedChoicesChanged () {
         this.emitSelectedChoices({
             isCorrect: this.selectedChoices.length === this.answerKeys.length

package/lib/components/Search/Pill.vue

@@ -4,8 +4,8 @@
         class="uikit-pill"
         :class="{ 'uikit-pill--show-close': showClose }"
         :tabindex="showClose ? 0 : -1"
-        @click="showClose && emitClick()"
-        @keydown.enter="showClose && emitClick()"
+        @click="showClose && emitClick($event)"
+        @keydown.enter="showClose && emitClick($event)"
         @mousedown.prevent
     >
         <div class="uikit-pill__label">
@@ -33,8 +33,8 @@ export default class Pill extends Vue {
     @Prop({ default: false }) isDarkMode!: boolean
 
     @Emit('click')
-    emitClick () {
-        return true
+    emitClick (event: Event) {
+        return event
     }
 }
 </script>

package/lib/components/Tables/Table.vue

@@ -238,7 +238,10 @@ export default class Table extends Vue {
     @Prop() tableCellStyles!: Record<string, string>
 
     gridStyles: Record<string, string> = {}
-    currentSort: ITableSortSettings = { column: null, direction: this.sortToggleOrder?.[0] || -1 }
+    currentSort: ITableSortSettings = {
+        column: null,
+        direction: this.sortToggleOrder?.[0] !== undefined ? this.sortToggleOrder[0] : -1,
+    }
 
     created () {
         // Use default sort, if provided
@@ -269,9 +272,10 @@ export default class Table extends Vue {
             this.currentSort.column = column
         } else {
             const currentSortDirIndex = this.sortToggleOrder.indexOf(this.currentSort.direction)
-            this.currentSort.direction = this.sortToggleOrder[
+            const newSortDirection = this.sortToggleOrder[
                 (currentSortDirIndex + 1) % this.sortToggleOrder.length
-            ] || -1
+            ]
+            this.currentSort.direction = newSortDirection !== undefined ? newSortDirection : -1
         }
         this.emitSort()
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {