@pocketprep/ui-kit 3.5.11 → 3.5.13

package/lib/components/Controls/Slider.vue

@@ -2,7 +2,10 @@
     <div
         v-dark="isDarkMode"
         class="uikit-slider"
-        :class="{ [`uikit-slider--${size}`]: true }"
+        :class="{
+            [`uikit-slider--${size}`]: true,
+            'uikit-slider--disabled': disabled
+        }"
     >
         <div v-dark="isDarkMode" class="uikit-slider__number uikit-slider__min">
             {{ min }}
@@ -11,6 +14,7 @@
             <div
                 v-dark="isDarkMode"
                 class="uikit-slider__filled"
+                :class="{'uikit-slider__filled--disabled': disabled}"
                 :style="{ width: `${filledWidth}%` }"
             />
             <input
@@ -24,7 +28,9 @@
                 :aria-valuemin="min"
                 :aria-valuemax="max"
                 :aria-valuenow="sliderValue"
+                :disabled="disabled"
                 class="uikit-slider__slide-input"
+                :class="{'uikit-slider__slide-input--disabled': disabled}"
             >
         </div>
         <div v-dark="isDarkMode" class="uikit-slider__number uikit-slider__max">
@@ -50,6 +56,7 @@ export default class Slider extends Vue {
     @Prop({ default: 'large' }) size!: 'small' | 'large'
     @Prop({ default: false }) isDarkMode!: boolean
     @Prop({ default: null }) inputId!: string | null
+    @Prop({ default: false }) disabled!: boolean
 
     sliderValue = 0
 
@@ -339,6 +346,61 @@ export default class Slider extends Vue {
                 background-color: $brand-black;
             }
         }
+
+        &--disabled {
+            cursor: default;
+
+            &:hover {
+                &::-webkit-slider-thumb {
+                    background: $white;
+                    cursor: default;
+                }
+
+                &::-moz-range-thumb {
+                    background: $white;
+                    cursor: default;
+                }
+
+                &::-ms-thumb {
+                    background: $white;
+                    cursor: default;
+                }
+            }
+
+            &::-webkit-slider-runnable-track {
+                background: $pearl;
+                cursor: default;
+            }
+
+            &::-moz-range-track {
+                background: $pearl;
+                cursor: default;
+            }
+
+            &::-webkit-slider-thumb {
+                border-color: $steel;
+
+                &:hover {
+                    background: $white;
+                }
+            }
+
+            &::-moz-range-thumb {
+                border-color: $steel;
+
+                &:hover {
+                    background: $white;
+                }
+            }
+
+            &::-ms-thumb {
+                border-color: $steel;
+
+                &:hover {
+                    background: $white;
+                }
+            }
+        }
     }
 
     &__filled {
@@ -349,6 +411,10 @@ export default class Slider extends Vue {
         top: 13px;
         border-radius: 3px;
 
+        &--disabled {
+            background: $steel;
+        }
+
         &--dark {
             background: $banana-bread;
         }

package/lib/components/Icons/IconAdd.vue

@@ -12,7 +12,9 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-facing-decorator'
 
-@Component
+@Component({
+    name: 'IconAdd',
+})
 export default class IconAdd extends Vue {
     @Prop() title!: string
 }

package/lib/components/Modal/ModalContainer.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+import { Vue, Component, Prop, Emit, Watch } from 'vue-facing-decorator'
 import Modal from '../Modal/Modal.vue'
 import { dark } from '../../directives'
 
@@ -74,52 +74,53 @@ export default class ModalContainer extends Vue {
             modalFocusableEls[modalFocusableEls.length - 1]?.blur()
         }
     
-        // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
-        if (this.trapFocus) {
-            this.focusListener = event => {
-                if (this.modalNumber === this.numberOfModals()) { // Only focus on the last open panel
-                    const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
-                    const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
-                    const hasCalendarClass = target 
+
+        this.focusListener = event => {
+            if (this.modalNumber === this.numberOfModals()) { // Only focus on the last open panel
+                const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+                const isFocusOutside = target && modalContainerEl && !modalContainerEl.contains(target)
+                const hasCalendarClass = target 
                         && Array.from(target.classList).find(
                             c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
                         )
-                    if (isFocusOutside && !hasCalendarClass) {
-                        const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
-                            focusableSelectors
-                        ))
-                        const firstFocusableModalChild = focusableModalChildren.find(
-                            el => !!el.getBoundingClientRect().width
-                        )
-                        const reversedModalChildren = [ ...focusableModalChildren ].reverse()
-                        const lastFocusableModalChild = reversedModalChildren.find(
-                            el => !!el.getBoundingClientRect().width
-                        )
-                        if (firstFocusableModalChild) {
-                            const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
-                            if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
+                if (isFocusOutside && !hasCalendarClass) {
+                    const focusableModalChildren = Array.from<HTMLElement>(modalContainerEl.querySelectorAll(
+                        focusableSelectors
+                    ))
+                    const firstFocusableModalChild = focusableModalChildren.find(
+                        el => !!el.getBoundingClientRect().width
+                    )
+                    const reversedModalChildren = [ ...focusableModalChildren ].reverse()
+                    const lastFocusableModalChild = reversedModalChildren.find(
+                        el => !!el.getBoundingClientRect().width
+                    )
+                    if (firstFocusableModalChild) {
+                        const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                        if (relatedTarget === firstFocusableModalChild && lastFocusableModalChild) {
                             // If focus moves from first element -> outside modal, focus the last element instead
-                                lastFocusableModalChild.focus()
-                            } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
+                            lastFocusableModalChild.focus()
+                        } else if (relatedTarget === lastFocusableModalChild && firstFocusableModalChild) {
                             // If focus moves from last element -> outside modal, focus the first element instead
-                                firstFocusableModalChild.focus()
-                            } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
+                            firstFocusableModalChild.focus()
+                        } else if (relatedTarget && relatedTarget instanceof HTMLElement) {
                             // If focus goes outside in a different way, return focus to where it came from if possible
-                                relatedTarget.focus()
-                            } else {
-                            // Otherwise, just return focus to the first element
-                                firstFocusableModalChild.focus()
-                            }
+                            relatedTarget.focus()
                         } else {
+                            // Otherwise, just return focus to the first element
+                            firstFocusableModalChild.focus()
+                        }
+                    } else {
                         // If the modal doesn't have any focusable children, focus the container instead
-                            if (modalContainerEl.tabIndex === -1) {
-                                modalContainerEl.tabIndex = 0
-                            }
-                            modalContainerEl.focus()
+                        if (modalContainerEl.tabIndex === -1) {
+                            modalContainerEl.tabIndex = 0
                         }
+                        modalContainerEl.focus()
                     }
                 }
             }
+        }
+        // Trap the user's focus within the modal - don't allow focusing elements behind the overlay
+        if (this.trapFocus) {
             document.addEventListener('focusin', this.focusListener)
         }
 
@@ -127,6 +128,8 @@ export default class ModalContainer extends Vue {
         const openModalCount = Number(document.body.getAttribute('data-openModalCount'))
         document.body.setAttribute('data-openModalCount', String(openModalCount + 1))
         document.body.classList.add('uikit-modal-open')
+
+        this.emitMounted()
     }
 
     beforeUnmount () {
@@ -139,6 +142,7 @@ export default class ModalContainer extends Vue {
         if (openModalCount <= 1) {
             document.body.classList.remove('uikit-modal-open')
         }
+        this.emitUnmounted()
     }
 
     keydownListener (e: Event | KeyboardEvent) {
@@ -159,6 +163,27 @@ export default class ModalContainer extends Vue {
     emitClose () {
         return true
     }
+
+    @Emit('mounted')
+    emitMounted () {
+        return true
+    }
+
+    @Emit('unmounted')
+    emitUnmounted () {
+        return true
+    }
+
+    @Watch('trapFocus')
+    toggleTrapFocus () {
+        if (this.focusListener) {
+            if (this.trapFocus) {
+                document.addEventListener('focusin', this.focusListener)
+            } else {
+                document.removeEventListener('focusin', this.focusListener)
+            }
+        }
+    }
 }
 </script>
 

package/lib/components/SidePanels/SidePanel.vue

@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import { Component, Vue, Prop, Emit, Watch } from 'vue-facing-decorator'
 import Button from '../Buttons/Button.vue'
 import Icon from '../Icons/Icon.vue'
 import { dark } from '../../directives'
@@ -151,6 +151,7 @@ export default class SidePanel extends Vue {
     @Prop({ default: false }) isTeachSidePanel!: boolean
     @Prop({ default: false }) isDarkMode!: boolean
     @Prop({ default: true }) showCancelButton!: boolean
+    @Prop({ default: true }) trapFocus!: boolean
 
     openSidePanel = false
     notContentHeight = this.tabs?.length ? 262 : 218
@@ -227,12 +228,16 @@ export default class SidePanel extends Vue {
             }
         }
 
-        document.addEventListener('focusin', this.focusListener)
+        if (this.trapFocus) {
+            document.addEventListener('focusin', this.focusListener)
+        }
 
         // prevent scrolling outside of modal
         const openSidePanelCount = Number(document.body.getAttribute('data-openSidePanelCount'))
         document.body.setAttribute('data-openSidePanelCount', String(openSidePanelCount + 1))
         document.body.classList.add('uikit-sidepanel-open')
+
+        this.emitMounted()
     }
 
     beforeUnmount () {
@@ -246,6 +251,8 @@ export default class SidePanel extends Vue {
             document.body.classList.remove('uikit-sidepanel-open')
             document.body.scrollTo(0, 0)
         }
+
+        this.emitUnmounted()
     }
 
     selectTab (e: MouseEvent | KeyboardEvent, tabName: string) {
@@ -288,6 +295,28 @@ export default class SidePanel extends Vue {
     emitSelectTab (tabName: string) {
         return tabName
     }
+
+    @Emit('mounted')
+    emitMounted () {
+        return true
+    }
+
+    @Emit('unmounted')
+    emitUnmounted () {
+        return true
+    }
+
+
+    @Watch('trapFocus')
+    toggleTrapFocus () {
+        if (this.focusListener) {
+            if (this.trapFocus) {
+                document.addEventListener('focusin', this.focusListener)
+            } else {
+                document.removeEventListener('focusin', this.focusListener)
+            }
+        }
+    }
 }
 </script>
 

package/package.json

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