@pocketprep/ui-kit 3.1.5 → 3.2.0

package/lib/components/BundleIcons/BundleIcon.vue

@@ -1,5 +1,5 @@
+<!-- eslint-disable -->
 <template>
-    <!-- eslint-disable -->
     <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">
@@ -23,8 +23,8 @@
             </g>
         </svg>
     </div>
-    <!-- eslint-enable -->
 </template>
+<!-- eslint-enable -->
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-facing-decorator'

package/lib/components/Filters/FilterDropdown.vue

@@ -12,8 +12,8 @@
             role="button"
             type="tertiary"
             tabindex="0"
-            @keypress.enter="showFilterDropdown"
-            @click="showFilterDropdown = !showFilterDropdown"
+            @keypress.enter="() => showFilterDropdown = !showFilterDropdown"
+            @click="() => showFilterDropdown = !showFilterDropdown"
         >
             <Icon 
                 type="filter"

package/lib/components/Tooltips/OverflowTooltip.vue

@@ -7,9 +7,9 @@
         >
             <slot />
         </Tooltip>
-        <template v-if="id">
+        <template v-if="uid">
             <div
-                :ref="`content_${id}`"
+                :ref="`content_${uid}`"
                 class="uikit-overflow-tooltip__content"
                 @mouseenter="showTooltip = true"
                 @mouseleave="showTooltip = false"
@@ -18,7 +18,7 @@
             </div>
             <div
                 v-if="!measurementComplete"
-                :ref="`content_fullwidth_${id}`"
+                :ref="`content_fullwidth_${uid}`"
                 class="uikit-overflow-tooltip__content uikit-overflow-tooltip__content--full-width"
             >
                 <slot />
@@ -40,14 +40,12 @@ export default class OverflowTooltip extends Vue {
     showTooltip = false
     textOverflows = false
     measurementComplete = false
-    id: string | null = null
-    created () {
-        this.id = (this as unknown as { _uid: string })._uid
-    }
+    uid = Math.floor(Math.random() * 1e9)
 
     mounted () {
-        const content = this.$refs[`content_${this.id}`] as HTMLElement
-        const contentFullWidth = this.$refs[`content_fullwidth_${this.id}`] as HTMLElement
+        const content = this.$refs[`content_${this.uid}`] as HTMLElement
+        const contentFullWidth = this.$refs[`content_fullwidth_${this.uid}`] as HTMLElement
+
         this.$nextTick(() => {
             const truncatedWidth = content.getBoundingClientRect().width
             const fullWidth = contentFullWidth.getBoundingClientRect().width

package/lib/pocketprep.scss

@@ -26,30 +26,30 @@ textarea {
             .uikit-slider__slide-input {
                 &:focus {
                     &::-webkit-slider-thumb {
-                        background-image: url("./assets/images/thumb-small.svg") !important;
+                        background-image: url("@/assets/images/thumb-small.svg") !important;
                     }
 
                     &::-moz-range-thumb {
-                        background-image: url("./assets/images/thumb-small.svg") !important;
+                        background-image: url("@/assets/images/thumb-small.svg") !important;
                     }
 
                     &::-ms-thumb {
-                        background-image: url("./assets/images/thumb-small.svg") !important;
+                        background-image: url("@/assets/images/thumb-small.svg") !important;
                     }
                 }
 
                 &--dark {
                     &:focus {
                         &::-webkit-slider-thumb {
-                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
+                            background-image: url("@/assets/images/thumb-small-dark.svg") !important;
                         }
 
                         &::-moz-range-thumb {
-                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
+                            background-image: url("@/assets/images/thumb-small-dark.svg") !important;
                         }
 
                         &::-ms-thumb {
-                            background-image: url("./assets/images/thumb-small-dark.svg") !important;
+                            background-image: url("@/assets/images/thumb-small-dark.svg") !important;
                         }
                     }
                 }
@@ -61,30 +61,30 @@ textarea {
         .uikit-slider__slide-input {
             &:focus {
                 &::-webkit-slider-thumb {
-                    background-image: url("./assets/images/thumb-large.svg") !important;
+                    background-image: url("@/assets/images/thumb-large.svg") !important;
                 }
 
                 &::-moz-range-thumb {
-                    background-image: url("./assets/images/thumb-large.svg") !important;
+                    background-image: url("@/assets/images/thumb-large.svg") !important;
                 }
 
                 &::-ms-thumb {
-                    background-image: url("./assets/images/thumb-large.svg") !important;
+                    background-image: url("@/assets/images/thumb-large.svg") !important;
                 }
             }
 
             &--dark {
                 &:focus {
                     &::-webkit-slider-thumb {
-                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
+                        background-image: url("@/assets/images/thumb-large-dark.svg") !important;
                     }
 
                     &::-moz-range-thumb {
-                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
+                        background-image: url("@/assets/images/thumb-large-dark.svg") !important;
                     }
 
                     &::-ms-thumb {
-                        background-image: url("./assets/images/thumb-large-dark.svg") !important;
+                        background-image: url("@/assets/images/thumb-large-dark.svg") !important;
                     }
                 }
             }

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --config vite.config.docs.ts",
     "build": "run-p type-check build-only",
-    "preview": "vite preview",
+    "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}'",
+    "type-check": "vue-tsc --noEmit -p tsconfig.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'",
     "test:unit": "cypress run --component",
     "test:unit:dev": "cypress open --component",
-    "build-only": "vite build",
-    "minor": "npm version minor --no-git-tag-version",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false",
     "patch": "npm version patch --no-git-tag-version",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore && stylelint '**/*.{scss,vue}'",
+    "minor": "npm version minor --no-git-tag-version",
     "uikit-copy": "npm run build && pwd | pbcopy"
   },
   "type": "module",
@@ -73,14 +73,15 @@
     "highcharts": "10.3.3",
     "litepicker": "2.0.12",
     "resize-observer": "1.0.4",
-    "vue": "3.2.47",
-    "vue-facing-decorator": "2.1.20"
+    "vue": "3.4.15",
+    "vue-facing-decorator": "2.1.20",
+    "vue-router": "4.2.5"
   },
   "devDependencies": {
     "@pocketprep/types": "1.11.1",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
-    "@vitejs/plugin-vue": "4.2.1",
+    "@vitejs/plugin-vue": "4.6.2",
     "@vue/eslint-config-typescript": "11.0.2",
     "@vue/tsconfig": "0.3.2",
     "cypress": "12.0.2",
@@ -102,7 +103,7 @@
     "url": "https://github.com/Pocket-Prep/ui-kit/issues"
   },
   "gitHooks": {
-    "pre-commit": "npm run build"
+    "pre-commit": "npm run lint && npm run type-check && npm run build && git add docs/"
   },
   "homepage": "https://github.com/Pocket-Prep/ui-kit#readme",
   "keywords": [
@@ -114,7 +115,7 @@
     "url": "git+https://github.com/Pocket-Prep/ui-kit.git"
   },
   "engines": {
-    "node": "16.14.0",
-    "npm": "8.3.1"
+    "node": "20.10.0",
+    "npm": "10.2.3"
   }
 }

package/lib/components/Banners/Banner.md

@@ -1,41 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <Banner text="Default text." />
-        </div>
-        <div class="dark">
-            <Banner 
-                :isDarkMode="true"
-                text="Default text, but in dark mode."/>
-        </div>
-        <div class="light">
-            <Banner>Override at BANNER level!</Banner>
-        </div>
-        <div class="light">
-            <Banner>
-                <template #bannerText>
-                    Someone sent you 20% off your first subscription with Pocket Prep. Sweet!
-                </template>
-            </Banner>
-        </div>
-        <div class="light">
-            <Banner>
-                <template #bannerImage><div></div></template>
-                <template #bannerText>I don't want an image!</template>
-            </Banner>
-        </div>
-    </div>
-</template>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```

package/lib/components/Blobs/Blob.md

@@ -1,10 +0,0 @@
-```vue
-<template>
-    <div>
-        <Blob
-            type="empty"
-            title="emptyBlob"
-        />
-    </div>
-</template>
-```

package/lib/components/Blobs/BlobEmptyState.md

@@ -1,9 +0,0 @@
-```vue
-<template>
-    <div>
-        <Blob
-            type="empty"
-        />
-    </div>
-</template>
-```

package/lib/components/BundleIcons/BundleIcon.md

@@ -1,60 +0,0 @@
-```vue
-<template>
-    <div>
-        <SVGDefinitions />
-        <Select v-model="theme" :data="themeOptions" />
-        <div class="icons">
-            <BundleIcon bundleId="mO5EIsoZ9H" :theme="theme.value"/>
-            <BundleIcon bundleId="uKLwvbsbPV" :theme="theme.value"/>
-            <BundleIcon bundleId="gAlCkoUVLl" :theme="theme.value"/>
-            <BundleIcon bundleId="GVCNrq4ixh" :theme="theme.value"/>
-            <BundleIcon bundleId="PusoOu7qGQ" :theme="theme.value"/>
-            <BundleIcon bundleId="1kS20KPPkH" :theme="theme.value"/>
-            <BundleIcon bundleId="tVMt7KCrkQ" :theme="theme.value"/>
-            <BundleIcon bundleId="4dTgUX97Dk" :theme="theme.value"/>
-            <BundleIcon bundleId="9970muCFGV" :theme="theme.value"/>
-            <BundleIcon bundleId="k9T5L3kC0U" :theme="theme.value"/>
-            <BundleIcon bundleId="DO5jBm0OJo" :theme="theme.value"/>
-            <BundleIcon bundleId="vtgI9oxCI4" :theme="theme.value"/>
-            <BundleIcon bundleId="VEcpw3DhnA" :theme="theme.value"/>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data () {
-        return {
-            theme: { label: 'Color', value: 'color' },
-            themeOptions: [
-                {
-                    label: 'Color',
-                    value: 'color',
-                },
-                { 
-                    label: 'Grayscale',
-                    value: 'grayscale',
-                },
-                {
-                    label: 'Silver',
-                    value: 'silver',
-                }
-            ]
-        }
-    }
-}
-</script>
-
-<style>
-.icons {
-    display: flex;
-    align-items: center;
-    background: black;
-}
-
-.icons > div {
-    margin: 5px;
-    width: 50px;
-}
-</style>
-```

package/lib/components/Bundles/BundleList.md

@@ -1,63 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
-        <div class="bundles" :class="{ dark: isDarkMode }">
-            <SVGDefinitions />
-            Selected Bundle: {{ selectedBundle?.objectId }}<br><br>
-            <BundleList :isDarkMode="isDarkMode" v-model="selectedBundle" :bundles="bundles" :premiumBundleIds="[ 'tVMt7KCrkQ' ]" />
-        </div>
-    </div>
-</template>
-
-<script>
-import Button from '../Buttons/Button.vue'
-
-const bundles = [
-    {
-        objectId: 'tVMt7KCrkQ',
-        name: 'AMTA',
-    },
-    {
-        objectId: 'k9T5L3kC0U',
-        name: 'Professional',
-    },
-    {
-        objectId: '1kS20KPPkH',
-        name: 'IT & Cybersecurity',
-    },
-    {
-        objectId: '9970muCFGV',
-        name: 'Nursing School',
-    }
-]
-
-export default {
-    components: {
-        Button
-    },
-    data () {
-        return {
-            bundles,
-            selectedBundle: bundles[2],
-            isDarkMode: false,
-        }
-    }
-}
-</script>
-
-<style>
-.bundles {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-    color: #fff;
-}
-
-.uikit-btn {
-    margin-bottom: 30px;
-}
-</style>
-```

package/lib/components/Bundles/BundleSearch.md

@@ -1,195 +0,0 @@
-```vue
-<template>
-    <div>
-        <Button @click="showBundleSearch = !showBundleSearch">Toggle Bundle Search</Button>
-        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button><br>
-        Selected Exam: {{ selectedExam?.objectId }}
-        <div class="bundle-search-container" :class="{ dark: isDarkMode }">
-            <BundleSearch 
-                v-if="showBundleSearch"
-                @select="exam => selectedExam = exam" 
-                :bundles="bundles" 
-                :isDarkMode="isDarkMode"
-                :examMetadataById="examMetadata" 
-                :premiumBundleIds="[ 'k9T5L3kC0U' ]"
-                :premiumExamIds="[ 'W54AAON6ZP', 'LIjSJZQEB1' ]"
-            />
-        </div>
-    </div>
-</template>
-
-<script>
-const bundles = [
-    {
-        objectId: 'tVMt7KCrkQ',
-        name: 'AMTA',
-        exams: [
-            {
-                "objectId": "icX2CYGp2P"
-            }
-        ]
-    },
-    {
-        objectId: 'k9T5L3kC0U',
-        name: 'Professional',
-        exams: [
-            {
-                "objectId": "W54AAON6ZP"
-            },
-            {
-                "objectId": "LIjSJZQEB1"
-            },
-        ]
-    },
-    {
-        objectId: '1kS20KPPkH',
-        name: 'IT & Cybersecurity',
-        exams: [
-            {
-                "objectId": "rGNBApGBEg"
-            },
-            {
-                "objectId": "rGNBApGBEg2"
-            },
-            {
-                "objectId": "rGNBApGBEg3"
-            },
-            {
-                "objectId": "rGNBApGBEg4"
-            },
-            {
-                "objectId": "rGNBApGBEg5"
-            },
-            {
-                "objectId": "rGNBApGBEg6"
-            },
-            {
-                "objectId": "rGNBApGBEg7"
-            },
-        ]
-    },
-    {
-        objectId: '9970muCFGV',
-        name: 'Nursing School',
-        exams: [
-            {
-                "objectId": "o98Hn8iUO4"
-            }
-        ]
-    }
-]
-const examMetadata = {
-    icX2CYGp2P: {
-        objectId: 'icX2CYGp2P',
-        nativeAppName: 'AMTA mBLEX',
-        descriptiveName: 'The AMTA Exam',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    W54AAON6ZP: {
-        objectId: 'W54AAON6ZP',
-        nativeAppName: 'BCSP ASP®',
-        descriptiveName: 'Associate Safety Professional Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    LIjSJZQEB1: {
-        objectId: 'LIjSJZQEB1',
-        nativeAppName: 'ASP',
-        descriptiveName: 'Board of Certified Safety Professionals: Associate Safety Professional',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg: {
-        objectId: 'rGNBApGBEg',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg2: {
-        objectId: 'rGNBApGBEg2',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg3: {
-        objectId: 'rGNBApGBEg3',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg4: {
-        objectId: 'rGNBApGBEg4',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg5: {
-        objectId: 'rGNBApGBEg5',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg6: {
-        objectId: 'rGNBApGBEg6',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    rGNBApGBEg7: {
-        objectId: 'rGNBApGBEg7',
-        nativeAppName: 'EC-Council® CEH™',
-        descriptiveName: 'Certified Ethical Hacker™ v10 Prep',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    },
-    o98Hn8iUO4: {
-        objectId: 'o98Hn8iUO4',
-        nativeAppName: 'College Biology',
-        descriptiveName: 'College-level Biology Practice',
-        itemCount: '100',
-        archivedCount: '2',
-        knowledgeAreas: ['', ''],
-    }
-}
-export default {
-    data () {
-        return {
-            isDarkMode: false,
-            bundles,
-            selectedExam: null,
-            examMetadata,
-            showBundleSearch: true,
-        }
-    }
-}
-</script>
-
-<style>
-.dark {
-    background-color: #1f3545;
-    color: #fff;
-}
-
-.bundle-search-container {
-    height: 400px;
-    padding: 30px 0;
-}
-</style>
-```

package/lib/components/Bundles/PremiumPill.md

@@ -1,23 +0,0 @@
-```vue
-<template>
-    <div>
-        <div class="light">
-            <PremiumPill />
-        </div>
-        <div class="dark">
-            <PremiumPill :isDarkMode="true" />
-        </div>
-    </div>
-</template>
-
-<style>
-.light,
-.dark {
-    padding: 30px;
-}
-
-.dark {
-    background-color: #1f3545;
-}
-</style>
-```