@pocketprep/ui-kit 3.4.25 → 3.4.27

package/lib/components/Filters/FilterDropdown.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="filter">
+    <div class="uikit-filter">
         <Link
             v-dark="isDarkMode"
             :has-icon="true"
             :aria-expanded="showFilterDropdown ? 'true' : 'false'"
-            class="filter__link"
+            class="uikit-filter__link"
             :class="{ 
-                'filter__link--open': showFilterDropdown,
-                'filter__link--responsive': responsiveButton,
+                'uikit-filter__link--open': showFilterDropdown,
+                'uikit-filter__link--responsive': responsiveButton,
             }"
             role="button"
             type="tertiary"
@@ -17,12 +17,12 @@
         >
             <Icon 
                 type="filter"
-                class="filter__icon"
+                class="uikit-filter__icon"
             />
             <span 
-                class="filter__text"
+                class="uikit-filter__text"
                 :class="{ 
-                    'filter__text--responsive': responsiveButton,
+                    'uikit-filter__text--responsive': responsiveButton,
                 }"
             >
                 {{ filterLabel }}
@@ -31,10 +31,10 @@
         <div
             v-if="showFilterDropdown"
             v-dark="isDarkMode"
-            class="filter__dropdown"
+            class="uikit-filter__dropdown"
             :class="{
-                [`filter__dropdown--${align}`]: true, 
-                [`filter__dropdown--${size}`]: true 
+                [`uikit-filter__dropdown--${align}`]: true, 
+                [`uikit-filter__dropdown--${size}`]: true 
             }"
         >
             <slot name="filterOptions">
@@ -103,7 +103,7 @@ export default class FilterDropdown extends Vue {
     clickListener (e: MouseEvent) {
         if (this.showFilterDropdown) {
             const targetEl = e.target as HTMLElement
-            if (!targetEl?.closest('.filter') 
+            if (!targetEl?.closest('.uikit-filter') 
                 && this.showFilterDropdown !== 'checkbox'
                 && document.body.contains(targetEl)
             ) {
@@ -155,7 +155,7 @@ export default class FilterDropdown extends Vue {
 @import '../../styles/colors';
 @import '../../styles/breakpoints';
 
-.filter {
+.uikit-filter {
     position: relative;
     z-index: 2;
 
@@ -199,13 +199,13 @@ export default class FilterDropdown extends Vue {
         z-index: 1;
         box-sizing: border-box;
         background: $white;
-        box-shadow: 0 6px 22px 0 rgba($brand-black, 0.1);
+        box-shadow: 0 6px 22px 0 rgba($brand-black, 0.2);
         max-height: 305px;
         overflow: auto;
 
         &--dark {
             background: $brand-black;
-            box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
+            box-shadow: 0 6px 22px 0 rgba($jet, 0.6);
         }
 
         &--left {

package/lib/components/Icons/Icon.vue

@@ -10,6 +10,7 @@
     <IconHelp v-else-if="type === 'help'" :title="title" />
     <IconArrow v-else-if="type === 'arrow'" :title="title" />
     <IconPaginationArrow v-else-if="type === 'paginationArrow'" :title="title" />
+    <IconPaginationArrowDouble v-else-if="type === 'paginationArrowDouble'" :title="title" />
     <IconAccordionArrow v-else-if="type === 'accordionArrow'" :title="title" />
     <IconQuestions v-else-if="type === 'questions'" :title="title" />
     <IconSubject v-else-if="type === 'subject'" :title="title" />
@@ -88,6 +89,7 @@ import IconHelp from './IconHelp.vue'
 import IconArrow from './IconArrow.vue'
 import IconAccordionArrow from './IconAccordionArrow.vue'
 import IconPaginationArrow from './IconPaginationArrow.vue'
+import IconPaginationArrowDouble from './IconPaginationArrowDouble.vue'
 import IconQuestions from './IconQuestions.vue'
 import IconSubject from './IconSubject.vue'
 import IconFlag from './IconFlag.vue'
@@ -157,6 +159,7 @@ import IconPresent from './IconPresent.vue'
         IconArrow,
         IconCheck,
         IconPaginationArrow,
+        IconPaginationArrowDouble,
         IconQuestions,
         IconSubject,
         IconFlag,

package/lib/components/Icons/IconPaginationArrowDouble.vue

@@ -0,0 +1,25 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
+        <g clip-path="url(#clip0_1238_216)">
+            <path d="M0.888889 9.11111C0.433035 9.56697 0.400474 10.2858 0.791206 10.7792L0.888889 10.8889L7.11111 17.1111C7.60203 17.602 8.39797 17.602 8.88889 17.1111C9.34474 16.6553 9.3773 15.9364 8.98657 15.443L8.88889 15.3333L3.55489 9.99934L8.88889 4.66667C9.34474 4.21081 9.3773 3.49196 8.98657 2.99853L8.88889 2.88889C8.43303 2.43303 7.71418 2.40047 7.22075 2.79121L7.11111 2.88889L0.888889 9.11111Z"/>
+            <path d="M7.38889 9.11111C6.93303 9.56697 6.90047 10.2858 7.29121 10.7792L7.38889 10.8889L13.6111 17.1111C14.102 17.602 14.898 17.602 15.3889 17.1111C15.8447 16.6553 15.8773 15.9364 15.4866 15.443L15.3889 15.3333L10.0549 9.99934L15.3889 4.66667C15.8447 4.21081 15.8773 3.49196 15.4866 2.99853L15.3889 2.88889C14.933 2.43303 14.2142 2.40047 13.7208 2.79121L13.6111 2.88889L7.38889 9.11111Z"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_1238_216">
+                <rect width="16" height="20" fill="white"/>
+            </clipPath>
+        </defs>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconPaginationArrowDouble extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/icon.d.ts

@@ -11,6 +11,7 @@ export type TIconType =
     | 'help'
     | 'arrow'
     | 'paginationArrow'
+    | 'paginationArrowDouble'
     | 'questions'
     | 'subject'
     | 'flag'

package/lib/components/Modal/Modal.vue

@@ -56,14 +56,14 @@ export default class Modal extends Vue {
 
 .uikit-modal {
     border-radius: 12px;
-    box-shadow: 0 2px 30px 0 rgba($brand-black, 0.1);
+    box-shadow: 0 1px 40px 0 rgba($brand-black, 0.5);
     z-index: 10001;
     background-color: $white;
 
     &--dark {
         background-color: $moonlit-ocean;
         color: $white;
-        box-shadow: 0 1px 6px 0 rgba($jet, 0.3);
+        box-shadow: 0 1px 40px 0 $jet;
     }
 
     &__head {

package/lib/components/Pagination/TablePagination.vue

@@ -13,6 +13,20 @@
             {{ nextPageDisabled ? total : (currentPage * perPage) + perPage }}
             of {{ total }} {{ unit }} <slot />
         </div>
+        <div
+            v-if="showAdvancedPagination"
+            v-dark="isDarkMode"
+            class="uikit-table-pagination__first-page"
+            :class="{ 'uikit-table-pagination__first-page--disabled': currentPage === 0 }"
+            :tabindex="currentPage === 0 ? -1 : 0"
+            aria-label="First Page"
+            :aria-disabled="currentPage === 0"
+            @keydown.enter="changePage('previous')"
+            @click="changePage('first')"
+            @mousedown.prevent
+        >
+            <Icon type="paginationArrowDouble" />
+        </div>
         <div
             v-dark="isDarkMode"
             class="uikit-table-pagination__previous"
@@ -39,6 +53,20 @@
         >
             <Icon type="accordionArrow" />
         </div>
+        <div
+            v-if="showAdvancedPagination"
+            v-dark="isDarkMode"
+            class="uikit-table-pagination__last-page"
+            :class="{ 'uikit-table-pagination__first-page--disabled': nextPageDisabled }"
+            :tabindex="currentPage === 0 ? -1 : 0"
+            aria-label="First Page"
+            :aria-disabled="currentPage === 0"
+            @keydown.enter="changePage('previous')"
+            @click="changePage('last')"
+            @mousedown.prevent
+        >
+            <Icon type="paginationArrowDouble" />
+        </div>
     </div>
 </template>
 
@@ -61,17 +89,30 @@ export default class TablePagination extends Vue {
     @Prop() total!: number
     @Prop() unit!: string
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) showFirstAndLastBtn!: boolean
 
     get nextPageDisabled () {
         return this.currentPage >= Math.floor((this.total - 1) / this.perPage)
     }
 
+    get showAdvancedPagination () {
+        if (!this.showFirstAndLastBtn) {
+            return false
+        } else {
+            return Math.floor((this.total - 1) / this.perPage) >= 3
+        }
+    }
+
     @Emit('changePage')
-    changePage (direction: 'next' | 'previous') {
+    changePage (direction: 'next' | 'previous' | 'first' | 'last') {
         const paginationInfo = this.$refs['pagination_info'] as HTMLElement
         paginationInfo.focus()
         if (direction === 'next') {
             return this.nextPageDisabled ? this.currentPage : this.currentPage + 1
+        } else if (direction === 'first') {
+            return 0
+        } else if (direction === 'last') {
+            return Math.floor((this.total - 1) / this.perPage)
         } else {
             return Math.max(0, this.currentPage - 1)
         }
@@ -149,5 +190,48 @@ export default class TablePagination extends Vue {
     &__next {
         transform: rotate(-90deg);
     }
+
+    &__first-page {
+        color: $brand-blue;
+        cursor: pointer;
+        user-select: none;
+        width: 16px;
+        height: 20px;
+        outline: none;
+        position: relative;
+        margin-right: 10px;
+
+        &--disabled {
+            opacity: 0.35;
+            cursor: default;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__last-page {
+        color: $brand-blue;
+        cursor: pointer;
+        user-select: none;
+        width: 16px;
+        height: 20px;
+        outline: none;
+        position: relative;
+        margin-left: 10px;
+        transform: rotate(180deg);
+
+        &--disabled {
+            opacity: 0.35;
+            cursor: default;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
 }
 </style>

package/package.json

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