@pocketprep/ui-kit 3.5.0 → 3.5.1

package/lib/components/Quiz/QuizProgress.vue

@@ -35,104 +35,100 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import QuizProgressBar from '../Quiz/QuizProgressBar.vue'
 import { ResizeObserver as ResizeObserverPonyFill } from 'resize-observer'
 
-@Component({
-    components: {
-        QuizProgressBar,
-    },
+const props = withDefaults(defineProps<{
+    answeredIndexList: number[]
+    selectedIndex: number
+    numQuestions: number
+    forceSlider?: boolean
+}>(), {
+    forceSlider: false,
 })
-export default class QuizProgress extends Vue {
-    @Prop() answeredIndexList!: number[]
-    @Prop() selectedIndex!: number
-    @Prop() numQuestions!: number
-    @Prop({ default: false }) forceSlider!: boolean
 
-    containerWidth = 0
-    mutationObserver: ResizeObserver | null = null
+const emit = defineEmits<{
+    'barClicked': [ index: number ]
+}>()
 
-    get isSlider () {
-        return this.forceSlider || this.numQuestions > 100
-    }
+const containerWidth = ref(0)
+const mutationObserver = ref<ResizeObserver | null>(null)
 
-    get barMaxMargin () {
-        return this.numQuestions > 100 || this.forceSlider
-            ? 0 // No margin for >100 questions or slider mode
-            : this.numQuestions < 50
-                ? 2
-                : 2.5
-    }
+const isSlider = computed(() => {
+    return props.forceSlider || props.numQuestions > 100
+})
 
-    get barWidth () {
-        const numGaps = this.numQuestions - 1
-        const totalMarginWidth = numGaps * this.barMaxMargin * 2
-        const availableWidth = this.containerWidth - totalMarginWidth
-        const barWidth = (this.forceSlider || this.numQuestions > 100)
-            ? availableWidth / this.numQuestions
-            : Math.floor(Math.max(availableWidth / this.numQuestions, 1))
-        return barWidth
-    }
+const barMaxMargin = computed(() => {
+    return props.numQuestions > 100 || props.forceSlider
+        ? 0 // No margin for >100 questions or slider mode
+        : props.numQuestions < 50
+            ? 2
+            : 2.5
+})
 
-    get barMargin () {
-        const maxMargin = ((this.containerWidth - (this.barWidth * this.numQuestions)) / (this.numQuestions - 1)) / 2
+const barWidth = computed(() => {
+    const numGaps = props.numQuestions - 1
+    const totalMarginWidth = numGaps * barMaxMargin.value * 2
+    const availableWidth = containerWidth.value - totalMarginWidth
+    const calculatedBarWidth = (props.forceSlider || props.numQuestions > 100)
+        ? availableWidth / props.numQuestions
+        : Math.floor(Math.max(availableWidth / props.numQuestions, 1))
+    return calculatedBarWidth
+})
 
-        return Math.max(
-            Math.min(this.barMaxMargin, Math.floor(maxMargin)),
-            0
-        )
-    }
+const barMargin = computed(() => {
+    const maxMargin = ((containerWidth.value - (barWidth.value * props.numQuestions)) / (props.numQuestions - 1)) / 2
 
-    get barWidthString () {
-        return `${this.barWidth}px`
-    }
+    return Math.max(
+        Math.min(barMaxMargin.value, Math.floor(maxMargin)),
+        0
+    )
+})
 
-    get barMarginString () {
-        return `${this.barMargin}px`
-    }
+const barWidthString = computed(() => {
+    return `${barWidth.value}px`
+})
 
-    mounted () {
-        this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
-        const el = document.querySelector('.uikit-quiz-progress') as Element
-        const resizeMutationObserver = window.ResizeObserver
-            ? new ResizeObserver(() => {
-                this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
-            })
-            : new ResizeObserverPonyFill(() => {
-                this.containerWidth = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
-            })
-        this.mutationObserver = resizeMutationObserver
-        this.mutationObserver.observe(el)
-    }
+onMounted(() => {
+    containerWidth.value = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+    const el = document.querySelector('.uikit-quiz-progress') as Element
+    const resizeMutationObserver = window.ResizeObserver
+        ? new ResizeObserver(() => {
+            containerWidth.value = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+        })
+        : new ResizeObserverPonyFill(() => {
+            containerWidth.value = document.querySelector('.uikit-quiz-progress')?.getBoundingClientRect().width || 0
+        })
+    mutationObserver.value = resizeMutationObserver
+    mutationObserver.value.observe(el)
+})
 
-    beforeUnmount () {
-        this.mutationObserver?.disconnect()
-    }
+onBeforeUnmount(() => {
+    mutationObserver.value?.disconnect()
+})
 
-    clickAndFocus (index: number) {
-        const bars = document.querySelectorAll('.uikit-quiz-progress__bar')
-        const bar = bars[index - 1] as HTMLElement
-        if (bar) {
-            this.emitBarClicked(index)
-            setTimeout(() => {
-                this.$nextTick(() => {
-                    bar.focus()
-                })
-            }, 50)
-        }
+const clickAndFocus = (index: number) => {
+    const bars = document.querySelectorAll('.uikit-quiz-progress__bar')
+    const bar = bars[index - 1] as HTMLElement
+    if (bar) {
+        emitBarClicked(index)
+        setTimeout(() => {
+            nextTick(() => {
+                bar.focus()
+            })
+        }, 50)
     }
+}
 
-    @Emit('barClicked')
-    emitBarClicked (index: number) {
-        return index
-    }
+const emitBarClicked = (index: number) => {
+    emit('barClicked', index)
 }
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
 
 .uikit-quiz-progress {
     display: flex;

package/lib/components/Quiz/QuizProgressBar.vue

@@ -18,6 +18,7 @@ import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
 import { breakpoint } from '../../directives'
 
 @Component({
+    name: 'QuizProgressBar',
     directives: {
         breakpoint,
     },
@@ -40,8 +41,8 @@ export default class QuizProgressBar extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-quiz-progress-bar {
     flex: 1;

package/lib/components/Search/Pill.vue

@@ -40,8 +40,8 @@ export default class Pill extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-pill {
     background: $brand-black;

package/lib/components/Search/Search.vue

@@ -124,8 +124,8 @@ export default class Search extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-search {
     position: relative;

package/lib/components/SidePanels/SidePanel.vue

@@ -128,6 +128,7 @@ import Icon from '../Icons/Icon.vue'
 import { dark } from '../../directives'
 
 @Component({
+    name: 'SidePanel',
     components: {
         Icon,
         PocketButton: Button,
@@ -150,7 +151,7 @@ export default class SidePanel extends Vue {
     @Prop({ default: false }) isDarkMode!: boolean
 
     openSidePanel = false
-    notContentHeight = this.tabs && this.tabs.length ? 262 : 218
+    notContentHeight = this.tabs?.length ? 262 : 218
     focusListener: Parameters<typeof addEventListener>[1] | null = null
     savedYPosition = 0
     sidePanelNumber = 0
@@ -289,8 +290,8 @@ export default class SidePanel extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-page-overlay {
     background: rgba($brand-black, 0);
@@ -588,6 +589,10 @@ export default class SidePanel extends Vue {
 
         &--teach-side-panel {
             background-color: $white;
+
+            &--dark {
+                background: $charcoal;
+            }
         }
 
         &--dark {

package/lib/components/Tables/Table.vue

@@ -379,8 +379,9 @@ export default class Table extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use 'sass:color';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-table {
     &__container {
@@ -584,7 +585,7 @@ export default class Table extends Vue {
 
         &--hover-focus {
             &:hover {
-                background-color: mix($barely-background, $brand-black, 96%);
+                background-color: color.mix($barely-background, $brand-black, 96%);
             }
 
             &:focus {

package/lib/components/Tables/TableActions.vue

@@ -77,7 +77,7 @@ export default class TableActions extends Vue {
     }
 
     actionClicked (action: ITableAction | ITableSubAction) {
-        if ('menu' in action && action.menu && action.menu.length) {
+        if ('menu' in action && action.menu?.length) {
             if (this.visibleMenuActionId !== action.id) {
                 this.focusedMenuOptionIndex = null
                 this.visibleMenuActionId = action.id
@@ -139,8 +139,8 @@ export default class TableActions extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-table-actions {
     display: flex;

package/lib/components/Tags/Tag.vue

@@ -64,8 +64,8 @@ export default class Tag extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-tag {
     box-sizing: border-box;

package/lib/components/Toasts/Toast.vue

@@ -80,7 +80,9 @@ export default class Toast extends Vue {
     }
 
     clearCloseTimeout () {
-        this.closeTimeout && clearTimeout(this.closeTimeout)
+        if (this.closeTimeout) {
+            clearTimeout(this.closeTimeout)
+        }
     }
 
     @Emit('close')
@@ -91,8 +93,8 @@ export default class Toast extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .toast {
     background-color: rgba($charcoal, 0.9);

package/lib/components/Tooltips/OverflowTooltip.vue

@@ -82,8 +82,8 @@ export default class OverflowTooltip extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/breakpoints';
-@import '../../styles/colors';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-overflow-tooltip {
     position: relative;

package/lib/components/Tooltips/Tooltip.vue

@@ -103,8 +103,8 @@ export default class Tooltip extends Vue {
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-tooltip-popup {
     color: $white;

package/lib/directives.ts

@@ -77,7 +77,7 @@ const eventListeners: Partial<Record<string, () => void>> = {}
 const mutationObservers: Partial<Record<string, MutationObserver>> = {}
 const resizeObservers: Partial<Record<string, ResizeObserver>> = {}
 
-export const fixed: Directive = {
+export const fixed: Directive<HTMLElement> = {
     beforeMount: el => {
         if (!el.dataset.breakpointId) {
             const { top, left } = el.getBoundingClientRect()

package/lib/pocketprep-export.module.scss

@@ -1,5 +1,5 @@
-@import './styles/breakpoints';
-@import './styles/colors';
+@use './styles/breakpoints' as *;
+@use './styles/colors' as *;
 
 /* stylelint-disable property-case */
 :export {
@@ -10,6 +10,7 @@
     blackBear: $black-bear;
     koalaBear: $koala-bear;
     teddyBear: $teddy-bear;
+
     // colors
     white: $white;
     pickledBluewood: $pickled-bluewood;

package/lib/pocketprep.scss

@@ -1,5 +1,5 @@
-@import './styles/breakpoints';
-@import './styles/colors';
+@use './styles/breakpoints' as *;
+@use './styles/colors' as *;
 
 body,
 html {

package/lib/styles/_breakpoints.scss

@@ -8,23 +8,17 @@ $teddy-bear: 319;
 @mixin breakpoint($point) {
     @if $point == 'polar-bear' {
         @media (max-width: ($polar-bear + 'px')) { @content; }
-    }
-    @else if $point == 'grizzly-bear' {
+    } @else if $point == 'grizzly-bear' {
         @media (max-width: ($grizzly-bear + 'px')) { @content; }
-    }
-    @else if $point == 'brown-bear' {
+    } @else if $point == 'brown-bear' {
         @media (max-width: ($brown-bear + 'px')) { @content; }
-    }
-    @else if $point == 'black-bear' {
+    } @else if $point == 'black-bear' {
         @media (max-width: ($black-bear + 'px')) { @content; }
-    }
-    @else if $point == 'koala-bear' {
+    } @else if $point == 'koala-bear' {
         @media (max-width: ($koala-bear + 'px')) { @content; }
-    }
-    @else if $point == 'teddy-bear' {
+    } @else if $point == 'teddy-bear' {
         @media (max-width: ($teddy-bear + 'px')) { @content; }
-    }
-    @else {
+    } @else {
         @media (max-width: $point) { @content; }
     }
 }

package/lib/styles/_colors.scss

@@ -98,6 +98,5 @@ $electric-violet: #d819eb;
 $aqua-oasis: #bce6dc;
 $peacock-green: #056c50;
 $green-hint: #e7f9f5;
-
 $victoria-green: #00664a;
 $london-rain: #064fc1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -8,7 +8,7 @@
     "build": "run-p type-check build-only",
     "build-only": "vite build && vite build --config vite.config.docs.ts",
     "preview": "vite preview --config vite.config.docs.ts",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore && stylelint '**/*.{scss,vue}'",
+    "lint": "eslint . && stylelint '**/*.{scss,vue}'",
     "type-check": "vue-tsc --noEmit -p tsconfig.cypress-ct.json --composite false",
     "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
@@ -25,8 +25,8 @@
   "files": [
     "lib",
     "dist",
-    ".eslintrc.cjs",
-    "stylelint.config.cjs",
+    "eslint.config.ts",
+    "stylelint.config.js",
     "index.d.ts"
   ],
   "exports": {
@@ -41,8 +41,8 @@
       }
     },
     "./styles": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
+      "import": "./dist/@pocketprep/ui-kit.css",
+      "require": "./dist/@pocketprep/ui-kit.css"
     },
     "./pocketprep.scss": {
       "import": "./lib/pocketprep.scss",
@@ -67,6 +67,10 @@
     "./colors": {
       "import": "./lib/styles/_colors.scss",
       "require": "./lib/styles/_colors.scss"
+    },
+    "./eslint.config": {
+      "import": "./eslint.config.ts",
+      "require": "./eslint.config.ts"
     }
   },
   "dependencies": {
@@ -74,29 +78,34 @@
     "litepicker": "2.0.12",
     "resize-observer": "1.0.4",
     "vue": "3.5.13",
-    "vue-facing-decorator": "2.1.20",
-    "vue-router": "4.2.5"
+    "vue-facing-decorator": "3.0.4",
+    "vue-router": "4.5.0"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.14.20",
-    "@tsconfig/node16": "1.0.3",
-    "@types/node": "16.18.25",
-    "@vitejs/plugin-vue": "4.6.2",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/tsconfig": "0.3.2",
-    "cypress": "12.0.2",
-    "eslint": "8.34.0",
-    "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-vue": "9.32.0",
-    "npm-run-all": "4.1.5",
-    "postcss-html": "1.5.0",
-    "sass": "1.58.3",
-    "stylelint": "15.10.3",
-    "stylelint-config-recommended-scss": "9.0.1",
-    "stylelint-config-recommended-vue": "1.4.0",
-    "typescript": "5.0.4",
-    "vite": "4.3.4",
-    "vue-tsc": "1.6.3",
+    "@pocketprep/types": "1.14.43",
+    "@stylistic/eslint-plugin-ts": "4.2.0",
+    "@tsconfig/node22": "22.0.0",
+    "@types/node": "22.13.10",
+    "@vitejs/plugin-vue": "5.2.3",
+    "@vue/eslint-config-typescript": "14.5.0",
+    "@vue/tsconfig": "0.7.0",
+    "cypress": "14.2.0",
+    "eslint": "9.22.0",
+    "eslint-plugin-cypress": "4.2.0",
+    "eslint-plugin-vue": "10.0.0",
+    "jiti": "2.4.2",
+    "npm-run-all2": "7.0.2",
+    "postcss-html": "1.8.0",
+    "sass": "1.86.0",
+    "start-server-and-test": "2.0.11",
+    "stylelint": "16.16.0",
+    "stylelint-config-recommended-scss": "14.1.0",
+    "stylelint-config-recommended-vue": "1.6.0",
+    "stylelint-config-standard-scss": "14.0.0",
+    "typescript": "5.8.2",
+    "vite": "6.2.2",
+    "vite-plugin-vue-devtools": "7.7.2",
+    "vue-tsc": "2.2.8",
     "yorkie": "2.0.0"
   },
   "bugs": {

package/stylelint.config.js

@@ -0,0 +1,38 @@
+/** @type {import('stylelint').Config} */
+export default {
+    'extends': [
+        'stylelint-config-standard-scss',
+        'stylelint-config-recommended-vue',
+    ],
+    'rules': {
+        'at-rule-no-unknown': null,
+        'selector-pseudo-class-no-unknown': [
+            true,
+            {
+                'ignorePseudoClasses': [ 'export', 'deep' ],
+            },
+        ],
+        'selector-pseudo-element-no-unknown': null,
+        'selector-type-no-unknown': null,
+        'selector-class-pattern': null,
+        'no-descending-specificity': null,
+        'property-no-unknown': null,
+        'alpha-value-notation': 'number',
+        'scss/at-import-no-partial-leading-underscore': null,
+        'scss/no-global-function-names': null,
+        'declaration-property-value-no-unknown': null,
+        'scss/declaration-property-value-no-unknown': true,
+        'shorthand-property-no-redundant-values': null,
+        'scss/at-else-closing-brace-newline-after': null,
+        'scss/dollar-variable-colon-space-after': null,
+        'scss/at-if-closing-brace-newline-after': null,
+        'scss/at-else-closing-brace-space-after': null,
+        'scss/at-if-closing-brace-space-after': null,
+        'color-function-notation': null,
+        'length-zero-no-unit': null,
+        'declaration-block-no-redundant-longhand-properties': null,
+        'rule-empty-line-before': null,
+        'media-feature-range-notation': null,
+        'declaration-property-value-no-unknown': null,
+    },
+}