@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/SidePanels/SidePanel.vue

@@ -3,7 +3,7 @@
         ref="sidepanelContainer"
         v-dark="isDarkMode"
         class="uikit-page-overlay"
-        :class="{ 
+        :class="{
             'uikit-page-overlay--open': openSidePanel,
             'uikit-page-overlay--disable-transition': disableTransition
         }"
@@ -19,10 +19,10 @@
             class="uikit-side-panel"
             :style="{ width: `${sidePanelWidth}px`, right: `-${sidePanelWidth}px` }"
         >
-            <div 
-                v-dark="isDarkMode" 
+            <div
+                v-dark="isDarkMode"
                 class="uikit-side-panel__head"
-                :class="{ 
+                :class="{
                     'uikit-side-panel__head--has-tabs': tabs && tabs.length,
                     'uikit-side-panel__head--has-stepped-tabs': tabs && tabs.length && steppedTabs,
                     'uikit-side-panel__head--teach-side-panel': isTeachSidePanel,
@@ -62,7 +62,7 @@
                         :key="tab"
                         v-dark="isDarkMode"
                         class="uikit-side-panel__tab"
-                        :class="{ 
+                        :class="{
                             'uikit-side-panel__tab--active': activeTabName === tab,
                             'uikit-side-panel__tab--stepper': steppedTabs,
                         }"
@@ -81,10 +81,10 @@
                 </div>
             </div>
             <slot name="sidePanelContent">
-                <div 
+                <div
                     v-dark="isDarkMode"
                     class="uikit-side-panel__content"
-                    :class="{ 
+                    :class="{
                         'uikit-side-panel__content--has-tabs': tabs && tabs.length,
                         'uikit-side-panel__content--teach-side-panel': isTeachSidePanel,
                     }"
@@ -94,9 +94,9 @@
                 </div>
             </slot>
             <slot name="sidePanelFooter">
-                <div 
-                    class="uikit-side-panel__foot" 
-                    :class="{ 
+                <div
+                    class="uikit-side-panel__foot"
+                    :class="{
                         'uikit-side-panel__foot--dark': isDarkMode,
                         'uikit-side-panel__foot--teach-side-panel': isTeachSidePanel,
                     }"
@@ -122,202 +122,196 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit, Watch } from 'vue-facing-decorator'
-import Button from '../Buttons/Button.vue'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
-
-@Component({
-    name: 'SidePanel',
-    components: {
-        Icon,
-        PocketButton: Button,
-    },
-    directives: {
-        dark,
-    },
+import PocketButton from '../Buttons/Button.vue'
+import { dark as vDark } from '../../directives'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+
+const {
+    name,
+    tabs = [],
+    activeTabName = undefined,
+    steppedTabs = false,
+    cancelButtonText = 'Cancel',
+    customCancelButtonAction = false,
+    customContentStyles = {},
+    width = 'large',
+    disableTransition = false,
+    isTeachSidePanel = false,
+    isDarkMode = false,
+    showCancelButton = true,
+    trapFocus = true,
+} = defineProps<{
+    name: string
+    tabs?: string[]
+    activeTabName?: string
+    steppedTabs?: boolean
+    cancelButtonText?: string
+    customCancelButtonAction?: boolean
+    customContentStyles?: Record<string, string>
+    width?: 'large' | 'medium' | number
+    disableTransition?: boolean
+    isTeachSidePanel?: boolean
+    isDarkMode?: boolean
+    showCancelButton?: boolean
+    trapFocus?: boolean
+}>()
+
+const emit = defineEmits<{
+    'mounted': []
+    'unmounted': []
+    'selectTab': [tabName: string]
+    'close': []
+    'close-button': []
+}>()
+
+const openSidePanel = ref(false)
+const focusListener = ref<Parameters<typeof addEventListener>[1] | null>(null)
+const sidePanelNumber = ref(0)
+
+const sidePanelRef = useTemplateRef<HTMLElement>('uikit-side-panel')
+const titleRef = useTemplateRef<HTMLElement>('uikit-side-panel__title')
+const sidePanelContainerRef = useTemplateRef<HTMLElement>('sidepanelContainer')
+
+const sidePanelWidth = computed(() => {
+    return width === 'large'
+        ? 572
+        : width === 'medium'
+            ? 460
+            : width
 })
-export default class SidePanel extends Vue {
-    @Prop() name!: string
-    @Prop({ default: () => [] }) tabs!: string[]
-    @Prop({ default: undefined }) activeTabName!: string
-    @Prop({ default: false }) steppedTabs!: boolean
-    @Prop({ default: 'Cancel' }) cancelButtonText!: string
-    @Prop({ default: false }) customCancelButtonAction!: boolean
-    @Prop({ default: () => ({}) }) customContentStyles!: { [key: string]: string }
-    @Prop({ default: 'large' }) width!: 'large' | 'medium' | number
-    @Prop({ default: false }) disableTransition!: boolean
-    @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
-    focusListener: Parameters<typeof addEventListener>[1] | null = null
-    savedYPosition = 0
-    sidePanelNumber = 0
-
-    get sidePanelWidth () {
-        return this.width === 'large'
-            ? 572
-            : this.width === 'medium'
-                ? 460
-                : this.width
-    }
-    
-    numberOfSidepanels () {
-        return document.querySelectorAll('.uikit-side-panel').length
-    }
 
-    mounted () {
-        this.sidePanelNumber = this.numberOfSidepanels()
-
-        // delay opening to show animation
-        setTimeout(() => {
-            this.openSidePanel = true
-        }, 1)
-
-   
-        // Focus title after opening transition
-        const sidePanelEl = this.$refs['uikit-side-panel'] as HTMLElement | undefined
-        sidePanelEl?.addEventListener('transitionend', () => {
-            const titleEl = this.$refs['uikit-side-panel__title'] as HTMLElement | undefined
-            titleEl?.focus()
-        })
-            
-        // Trap the user's focus within the side panel - don't allow focusing elements behind the overlay
-        this.focusListener = event => {
-            if (this.sidePanelNumber === this.numberOfSidepanels()) { // Only focus on the last open panel
-                const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
-                const sidePanelContainerEl = this.$refs['sidepanelContainer'] as HTMLElement
-                const isFocusOutside = target && sidePanelContainerEl && !sidePanelContainerEl.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 focusableSidePanelChildren = Array.from<HTMLElement>(sidePanelContainerEl.querySelectorAll(
-                        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-                    ))
-                    const firstFocusableSidePanelChild = focusableSidePanelChildren.find(
-                        el => !!el.getBoundingClientRect().width
-                    )
-                    const reversedSidePanelChildren = [ ...focusableSidePanelChildren ].reverse()
-                    const lastFocusableSidePanelChild = reversedSidePanelChildren.find(
-                        el => !!el.getBoundingClientRect().width
-                    )
-                    if (firstFocusableSidePanelChild) {
-                        const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
-                        if (relatedTarget === firstFocusableSidePanelChild && lastFocusableSidePanelChild) {
-                            // If focus moves from first element -> outside side panel, focus the last element instead
-                            lastFocusableSidePanelChild.focus()
-                        } else {
-                            // If focus goes outside the side panel in any other way, focus the first element
-                            firstFocusableSidePanelChild.focus()
-                        }
+onMounted(() => {
+    sidePanelNumber.value = numberOfSidepanels()
+
+    // delay opening to show animation
+    setTimeout(() => {
+        openSidePanel.value = true
+    }, 1)
+
+
+    // Focus title after opening transition
+    sidePanelRef.value?.addEventListener('transitionend', () => {
+        titleRef.value?.focus()
+    })
+
+    // Trap the user's focus within the side panel - don't allow focusing elements behind the overlay
+    focusListener.value = event => {
+        if (sidePanelNumber.value === numberOfSidepanels()) { // Only focus on the last open panel
+            const target = (event as FocusEvent).target as HTMLElement  // The element receiving focus
+            const isFocusOutside = target
+                && sidePanelContainerRef.value
+                && !sidePanelContainerRef.value.contains(target)
+            const hasCalendarClass = target?.classList
+                && Array.from(target.classList).find(
+                    c => c === 'button-next-month' || c === 'button-previous-month' || c === 'day-item'
+                )
+            if (isFocusOutside && !hasCalendarClass) {
+                const focusableSidePanelChildren = Array.from<HTMLElement>(sidePanelContainerRef.value.querySelectorAll(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                ))
+                const firstFocusableSidePanelChild = focusableSidePanelChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                const reversedSidePanelChildren = [ ...focusableSidePanelChildren ].reverse()
+                const lastFocusableSidePanelChild = reversedSidePanelChildren.find(
+                    el => !!el.getBoundingClientRect().width
+                )
+                if (firstFocusableSidePanelChild) {
+                    const relatedTarget = (event as FocusEvent).relatedTarget   // The element last focused
+                    if (relatedTarget === firstFocusableSidePanelChild && lastFocusableSidePanelChild) {
+                        // If focus moves from first element -> outside side panel, focus the last element instead
+                        lastFocusableSidePanelChild.focus()
                     } else {
-                        // If the side panel doesn't have any focusable children, focus the container instead
-                        if (sidePanelContainerEl.tabIndex === -1) {
-                            sidePanelContainerEl.tabIndex = 0
-                        }
-                        sidePanelContainerEl.focus()
+                        // If focus goes outside the side panel in any other way, focus the first element
+                        firstFocusableSidePanelChild.focus()
                     }
+                } else {
+                    // If the side panel doesn't have any focusable children, focus the container instead
+                    if (sidePanelContainerRef.value.tabIndex === -1) {
+                        sidePanelContainerRef.value.tabIndex = 0
+                    }
+                    sidePanelContainerRef.value.focus()
                 }
             }
         }
+    }
 
-        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()
+    if (trapFocus) {
+        document.addEventListener('focusin', focusListener.value)
     }
 
-    beforeUnmount () {
-        if (this.focusListener) {
-            document.removeEventListener('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')
 
-        const openSidePanelCount = Number(document.body.getAttribute('data-openSidePanelCount'))
-        document.body.setAttribute('data-openSidePanelCount', String(openSidePanelCount - 1))
-        if (openSidePanelCount <= 1) {
-            document.body.classList.remove('uikit-sidepanel-open')
-            document.body.scrollTo(0, 0)
-        }
+    emit('mounted')
+})
 
-        this.emitUnmounted()
+onBeforeUnmount(() => {
+    if (focusListener.value) {
+        document.removeEventListener('focusin', focusListener.value)
     }
 
-    selectTab (e: MouseEvent | KeyboardEvent, tabName: string) {
-        e.preventDefault()
-        this.emitSelectTab(tabName)
+    const openSidePanelCount = Number(document.body.getAttribute('data-openSidePanelCount'))
+    document.body.setAttribute('data-openSidePanelCount', String(openSidePanelCount - 1))
+    if (openSidePanelCount <= 1) {
+        document.body.classList.remove('uikit-sidepanel-open')
+        document.body.scrollTo(0, 0)
     }
 
-    keydownListener (e: Event | KeyboardEvent) {
-        if (!('key' in e)) {
-            return
-        }
-
-        if (e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
-            e.stopPropagation()
-        }
+    emit('unmounted')
+})
 
-        if (e.key === 'Escape') {
-            this.emitClose()
-        }
-    }
+const numberOfSidepanels = () => {
+    return document.querySelectorAll('.uikit-side-panel').length
+}
 
-    closeKeyPress (e: KeyboardEvent) {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            this.emitClose()
-        }
-    }
+const selectTab = (e: MouseEvent | KeyboardEvent, tabName: string) => {
+    e.preventDefault()
+    emit('selectTab', tabName)
+}
 
-    @Emit('close')
-    emitClose () {
-        return true
+const keydownListener = (e: Event | KeyboardEvent) => {
+    if (!('key' in e)) {
+        return
     }
 
-    @Emit('close-button')
-    emitCloseButton () {
-        return true
+    if (e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+        e.stopPropagation()
     }
 
-    @Emit('selectTab')
-    emitSelectTab (tabName: string) {
-        return tabName
+    if (e.key === 'Escape') {
+        emitClose()
     }
+}
 
-    @Emit('mounted')
-    emitMounted () {
-        return true
+const closeKeyPress = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        emitClose()
     }
+}
 
-    @Emit('unmounted')
-    emitUnmounted () {
-        return true
-    }
+const emitClose = () => {
+    emit('close')
+}
 
+const emitCloseButton = () => {
+    emit('close-button')
+}
 
-    @Watch('trapFocus')
-    toggleTrapFocus () {
-        if (this.focusListener) {
-            if (this.trapFocus) {
-                document.addEventListener('focusin', this.focusListener)
-            } else {
-                document.removeEventListener('focusin', this.focusListener)
-            }
+watch(() => trapFocus, () => {
+    if (focusListener.value) {
+        if (trapFocus) {
+            document.addEventListener('focusin', focusListener.value)
+        } else {
+            document.removeEventListener('focusin', focusListener.value)
         }
     }
-}
+})
 </script>
 
 <style lang="scss">