@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Quiz/QuizProgressBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        v-breakpoint="{ small: 2 }"
+        v-breakpoint="{ breakpoints: { small: 2 } }"
         class="uikit-quiz-progress-bar"
         :class="{
             'uikit-quiz-progress-bar--selected': isSelected,
@@ -13,30 +13,30 @@
     />
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
-import { breakpoint } from '../../directives'
+<script setup lang="ts">
+import { breakpoint as vBreakpoint } from '../../directives'
 
-@Component({
-    name: 'QuizProgressBar',
-    directives: {
-        breakpoint,
-    },
-})
-export default class QuizProgressBar extends Vue {
-    @Prop({ default: false }) isSelected!: boolean
-    @Prop({ default: false }) isAnswered!: boolean
-    @Prop({ default: true }) isFocusable!: boolean
+const {
+    isSelected = false,
+    isAnswered = false,
+    isFocusable = true,
+} = defineProps<{
+    isSelected?: boolean
+    isAnswered?: boolean
+    isFocusable?: boolean
+}>()
 
-    @Emit('click')
-    emitClick (event: MouseEvent) {
-        return event
-    }
+const emit = defineEmits<{
+    'click': [event: MouseEvent]
+    'keydown': [event: KeyboardEvent]
+}>()
 
-    @Emit('keydown')
-    emitKeydown (event: KeyboardEvent) {
-        return event
-    }
+const emitClick = (event: MouseEvent) => {
+    emit('click', event)
+}
+
+const emitKeydown = (event: KeyboardEvent) => {
+    emit('keydown', event)
 }
 </script>
 
@@ -94,4 +94,4 @@ export default class QuizProgressBar extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Quiz/question.d.ts

@@ -1,7 +1,7 @@
 export type Ref = HTMLElement | null
 
 export type TChoiceKey = `${'a' | 'd'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
-export type TMatrixChoiceKey = `${'a' | 'd'}${1 | 2 | 3 }_${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+export type TMatrixChoiceKey = `${'a' | 'd'}${1 | 2 | 3}_${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
 export type TBuildListChoiceKey = `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
 
 export type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
@@ -17,7 +17,7 @@ export type TBreakPointsObject = {
 
 export type TChoice = { text?: string; key: TChoiceKey }
 export type TBuildListChoice = { text?: string; key: TBuildListChoiceKey }
-export type TMPMCChoice = { 
+export type TMPMCChoice = {
     text?: string
     id?: string
     isCorrect?: boolean
@@ -67,4 +67,4 @@ export interface IRadioOptions {
 
 export interface IScenarioSerial {
     serial: string
-}
+}

package/lib/components/Search/Pill.vue

@@ -15,27 +15,24 @@
     </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 { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
 
-@Component({
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Pill extends Vue {
-    @Prop({ default: false }) showClose!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
+const {
+    showClose = false,
+    isDarkMode = false,
+} = defineProps<{
+    showClose?: boolean
+    isDarkMode?: boolean
+}>()
 
-    @Emit('click')
-    emitClick (event: Event) {
-        return event
-    }
+const emit = defineEmits<{
+    'click': [event: Event]
+}>()
+
+const emitClick = (event: Event) => {
+    emit('click', event)
 }
 </script>
 
@@ -114,4 +111,4 @@ export default class Pill extends Vue {
         right: 4.5px;
     }
 }
-</style>
+</style>

package/lib/components/Search/Search.vue

@@ -5,7 +5,7 @@
         @mouseout="hover = false"
     >
         <div @click="focusInput">
-            <Icon 
+            <Icon
                 v-dark="isDarkMode"
                 type="search"
                 class="uikit-search__icon"
@@ -22,7 +22,7 @@
             ref="search__field"
             v-dark="isDarkMode"
             class="uikit-search__input"
-            :class="{ 
+            :class="{
                 [`uikit-search__input--${type}`]: true,
                 'uikit-search__input--show-results-info': !!searchResultInfo,
                 'uikit-search__input--hover': hover,
@@ -70,56 +70,61 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        Icon,
-    },
-})
-export default class Search extends Vue {
-    @Prop({ default: 'gray' }) type!: 'white' | 'gray'
-    @Prop() placeholder?: string
-    @Prop({ default: '524288' }) maxlength?: string // that's the default input field length
-    @Prop() modelValue!: string
-    @Prop({ default: false }) autoFocus!: boolean
-    @Prop({ default: '' }) searchResultInfo?: string
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) disabled!: boolean
-
-    hover = false
-    focus = false
-    clearHover = false
-    clearFocus = false
-
-    keyDownClearSearch (e: KeyboardEvent) {
-        // select option on enter or space
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            this.clearSearch()
-        }
+import { dark as vDark } from '../../directives'
+import { ref, useTemplateRef } from 'vue'
+
+const {
+    type = 'gray',
+    placeholder = undefined,
+    maxlength = '524288',   // the default input field length
+    modelValue = null,
+    autoFocus = false,
+    searchResultInfo = '',
+    isDarkMode = false,
+    disabled = false,
+} = defineProps<{
+    type?: 'white' | 'gray'
+    placeholder?: string
+    maxlength?: string
+    modelValue?: string | null
+    autoFocus?: boolean
+    searchResultInfo?: string
+    isDarkMode?: boolean
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [modelVal: string]
+}>()
+
+const hover = ref(false)
+const focus = ref(false)
+const clearHover = ref(false)
+const clearFocus = ref(false)
+
+const searchFieldRef = useTemplateRef<HTMLElement>('search__field')
+
+const keyDownClearSearch = (e: KeyboardEvent) => {
+    // select option on enter or space
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        clearSearch()
     }
+}
 
-    focusInput () {
-        (this.$refs['search__field'] as HTMLInputElement).focus()
-    }
+const focusInput = () => {
+    searchFieldRef.value?.focus()
+}
 
-    @Emit('update:modelValue')
-    valueChange ($event: Event) {
-        return ($event.target as HTMLInputElement).value
-    }
+const valueChange = ($event: Event) => {
+    emit('update:modelValue', ($event.target as HTMLInputElement | undefined)?.value || '')
+}
 
-    @Emit('update:modelValue')
-    clearSearch () {
-        this.focusInput()
-        return ''
-    }
+const clearSearch = () => {
+    emit('update:modelValue', '')
+    focusInput()
 }
 </script>