Merge pull request #3465 from primefaces/issue-1823

Sidebar: reimplement

api-generator/components/sidebar.js

@@ -46,6 +46,12 @@ const SidebarProps = [
         type: 'string',
         default: 'close',
         description: 'Aria label of the close icon.'
+    },
+    {
+        name: 'blockScroll',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether background scroll should be blocked when sidebar is visible.'
     }
 ];
 

components/sidebar/Sidebar.d.ts

@@ -44,6 +44,10 @@ export interface SidebarProps {
      * Default value is true.
      */
     modal?: boolean | undefined;
+    /**
+     * Whether background scroll should be blocked when sidebar is visible.
+     */
+    blockScroll?: boolean | undefined;
 }
 
 export interface SidebarSlots {

components/sidebar/Sidebar.spec.js

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
 import { describe, expect, it } from 'vitest';
 import Sidebar from './Sidebar.vue';
-
 describe('Sidebar.vue', () => {
     let wrapper;
 
@@ -15,7 +14,7 @@ describe('Sidebar.vue', () => {
                 }
             },
             props: {
-                visible: true,
+                visible: false,
                 bazeZIndex: 1000
             },
             slots: {
@@ -23,95 +22,76 @@ describe('Sidebar.vue', () => {
                 header: `<span class="header">Header Template</span>`
             }
         });
+        wrapper.setProps({ visible: true });
     });
 
-    it('should exist', () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('When component is mounted, sidebar should be exist', () => {
         expect(wrapper.find('.p-sidebar.p-component').exists()).toBe(true);
         expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-left');
-        expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-active');
     });
 
-    it('should close', async () => {
+    it('When mask element triggered, sidebar should be hide', async () => {
-        await wrapper.vm.hide();
+        const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener');
 
-        expect(wrapper.emitted()['update:visible'][0]).toEqual([false]);
+        await wrapper.find('.p-sidebar-mask').trigger('mousedown');
 
-        await wrapper.setProps({ visible: false });
+        expect(wrapper.emitted()['update:visible'].length).toBe(1);
-
+        expect(unbindOutsideClickListenerSpy).toHaveBeenCalled();
-        expect(wrapper.find('.p-sidebar.p-component').exists()).toBe(false);
     });
 
-    it('should set position', async () => {
+    it('When transition trigger to onEnter, sidebar should be visible', async () => {
-        await wrapper.setProps({ position: 'bottom' });
+        const focusSpy = vi.spyOn(wrapper.vm, 'focus');
 
-        expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-bottom');
+        await wrapper.vm.onEnter();
+
+        expect(wrapper.emitted().show.length).toBe(1);
+        expect(wrapper.vm.maskVisible).toBeTruthy();
+        expect(focusSpy).toHaveBeenCalled();
     });
 
-    it('should set position', async () => {
+    it('When transition trigger to onLeave, unbindOutsideClickListener should be triggered', async () => {
-        await wrapper.setProps({ position: 'full' });
+        const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener');
 
-        expect(wrapper.vm.fullScreen).toBe(true);
+        await wrapper.vm.onLeave();
-        expect(wrapper.find('.p-sidebar').classes()).toContain('p-sidebar-full');
+
+        expect(wrapper.emitted().hide.length).toBe(1);
+        expect(unbindOutsideClickListenerSpy).toHaveBeenCalled();
     });
 
-    it('should have custom close icon when provided', async () => {
+    it('When transition trigger to onAfterEnter, bindOutsideClickListener should be triggered', async () => {
-        await wrapper.setProps({ closeIcon: 'pi pi-discord' });
+        const bindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'bindOutsideClickListener');
-        const icon = wrapper.find('.p-sidebar-close-icon');
 
-        expect(icon.classes()).toContain('pi-discord');
+        await wrapper.vm.onAfterEnter();
+
+        expect(bindOutsideClickListenerSpy).toHaveBeenCalled();
     });
 
-    it('should header slot rendered', () => {
+    it('When keydown is triggered , hide method should be triggered', async () => {
-        expect(wrapper.find('.p-sidebar-header').exists()).toBe(true);
+        const hideSpy = vi.spyOn(wrapper.vm, 'hide');
-        expect(wrapper.find('.p-sidebar-header-content').exists()).toBe(true);
+
-        expect(wrapper.find('span.header').exists()).toBe(true);
+        await wrapper.find('.p-sidebar').trigger('keydown', { code: 'Escape' });
-        expect(wrapper.find('span.header').text()).toBe('Header Template');
+
+        expect(hideSpy).toHaveBeenCalled();
     });
 
-    it('should default slot rendered', () => {
+    it('When keydown is triggered , hide method should be triggered', async () => {
-        expect(wrapper.find('h3').exists()).toBe(true);
+        const hideSpy = vi.spyOn(wrapper.vm, 'hide');
-        expect(wrapper.find('h3').text()).toBe('Left Sidebar');
+
+        await wrapper.find('.p-sidebar-close').trigger('click');
+
+        expect(hideSpy).toHaveBeenCalled();
     });
 
-    it('should keydown work', async () => {
+    it('When component is unmount , unbindOutsideClickListenerSpy method should be triggered', async () => {
-        const event = { code: 'Escape' };
+        const unbindOutsideClickListenerSpy = vi.spyOn(wrapper.vm, 'unbindOutsideClickListener');
 
-        await wrapper.vm.onKeydown(event);
+        await wrapper.unmount();
 
-        expect(wrapper.emitted()['update:visible'][0]).toEqual([false]);
+        expect(unbindOutsideClickListenerSpy).toHaveBeenCalled();
-    });
+        expect(Sidebar.container).toBe(null);
-});
-
-describe('when visible is false', () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(Sidebar, {
-            global: {
-                plugins: [PrimeVue],
-                stubs: {
-                    teleport: true,
-                    transition: false
-                }
-            },
-            props: {
-                visible: true,
-                bazeZIndex: 1000
-            }
-        });
-    });
-
-    it('should show and hide emit work', async () => {
-        expect(wrapper.emitted()['show'][0]).toEqual([]);
-
-        await wrapper.setProps({ visible: false });
-
-        expect(wrapper.emitted()['hide'][0]).toEqual([]);
-    });
-
-    it('should be destroyed', () => {
-        wrapper.unmount();
-        expect(wrapper.componentVM.container).toBe(null);
-        expect(wrapper.componentVM.mask).toBe(null);
     });
 });

components/sidebar/Sidebar.vue

@@ -1,20 +1,22 @@
 <template>
     <Portal>
-        <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
+        <div v-if="maskVisible" ref="mask" style="maskStyle" :class="maskClasses" @mousedown="onMaskClick">
-            <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
+            <transition name="p-sidebar" @after-enter="onAfterEnter" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div :ref="headerContainerRef" class="p-sidebar-header">
+                <div :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
-                    <div v-if="$slots.header" class="p-sidebar-header-content">
+                    <div :ref="headerContainerRef" class="p-sidebar-header">
-                        <slot name="header"></slot>
+                        <div v-if="$slots.header" class="p-sidebar-header-content">
+                            <slot name="header"></slot>
+                        </div>
+                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
+                            <span :class="['p-sidebar-close-icon', closeIcon]" />
+                        </button>
+                    </div>
+                    <div :ref="contentRef" class="p-sidebar-content">
+                        <slot></slot>
                     </div>
-                    <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
-                        <span :class="['p-sidebar-close-icon', closeIcon]" />
-                    </button>
                 </div>
-                <div :ref="contentRef" class="p-sidebar-content">
+            </transition>
-                    <slot></slot>
+        </div>
-                </div>
-            </div>
-        </transition>
     </Portal>
 </template>
 
@@ -26,7 +28,6 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Sidebar',
-    inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide'],
     props: {
         visible: {
@@ -60,50 +61,69 @@ export default {
         modal: {
             type: Boolean,
             default: true
+        },
+        blockScroll: {
+            type: Boolean,
+            default: true
         }
     },
-    mask: null,
-    maskClickListener: null,
     container: null,
     content: null,
     headerContainer: null,
     closeButton: null,
-    beforeUnmount() {
+    outsideClickListener: null,
-        this.destroyModal();
+    data() {
+        return {
+            maskVisible: false
+        };
+    },
+    watch: {
+        visible(val) {
+            this.maskVisible = val;
+        }
+    },
 
+    beforeUnmount() {
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
 
+        this.unbindOutsideClickListener();
         this.container = null;
     },
     methods: {
         hide() {
             this.$emit('update:visible', false);
+
+            this.unbindOutsideClickListener();
+            this.blockScroll && DomHandler.removeClass(document.body, 'p-overflow-hidden');
         },
-        onEnter(el) {
+        onEnter() {
             this.$emit('show');
 
             if (this.autoZIndex) {
-                ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
+                ZIndexUtils.set('modal', this.$refs.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
             }
 
+            this.maskVisible = true;
             this.focus();
-
-            if (this.modal && !this.fullScreen) {
-                this.enableModality();
-            }
         },
         onLeave() {
-            this.$emit('hide');
+            DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
 
-            if (this.modal && !this.fullScreen) {
+            this.$emit('hide');
-                this.disableModality();
+            this.unbindOutsideClickListener();
+        },
+        onAfterLeave() {
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(this.mask);
             }
         },
-        onAfterLeave(el) {
+        onAfterEnter() {
-            if (this.autoZIndex) {
+            this.bindOutsideClickListener();
-                ZIndexUtils.clear(el);
+
+            if (this.blockScroll) {
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         focus() {
@@ -123,54 +143,14 @@ export default {
 
             focusTarget && focusTarget.focus();
         },
-        enableModality() {
-            if (!this.mask) {
-                this.mask = document.createElement('div');
-                this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter');
-                this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
-
-                if (this.dismissable) {
-                    this.bindMaskClickListener();
-                }
-
-                document.body.appendChild(this.mask);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-            }
-        },
-        disableModality() {
-            if (this.mask) {
-                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
-                this.mask.addEventListener('animationend', () => {
-                    this.destroyModal();
-                });
-            }
-        },
-        bindMaskClickListener() {
-            if (!this.maskClickListener) {
-                this.maskClickListener = () => {
-                    this.hide();
-                };
-
-                this.mask.addEventListener('click', this.maskClickListener);
-            }
-        },
         onKeydown(event) {
             if (event.code === 'Escape') {
                 this.hide();
             }
         },
-        unbindMaskClickListener() {
+        onMaskClick(event) {
-            if (this.maskClickListener) {
+            if (this.dismissable && this.modal && this.$refs.mask === event.target) {
-                this.mask.removeEventListener('click', this.maskClickListener);
+                this.hide();
-                this.maskClickListener = null;
-            }
-        },
-        destroyModal() {
-            if (this.mask) {
-                this.unbindMaskClickListener();
-                document.body.removeChild(this.mask);
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                this.mask = null;
             }
         },
         containerRef(el) {
@@ -184,16 +164,43 @@ export default {
         },
         closeButtonRef(el) {
             this.closeButton = el;
+        },
+        getPositionClass() {
+            const positions = ['left', 'right', 'top', 'bottom'];
+            const pos = positions.find((item) => item === this.position);
+
+            return pos ? `p-sidebar-${pos}` : '';
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (!this.modal && this.isOutsideClicked(event) && this.dismissable) {
+                        this.hide();
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return this.container && !this.container.contains(event.target);
         }
     },
     computed: {
         containerClass() {
             return [
-                'p-sidebar p-component p-sidebar-' + this.position,
+                'p-sidebar p-component',
+                this.getPositionClass(),
                 {
-                    'p-sidebar-active': this.visible,
                     'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                    'p-ripple-disabled': this.$primevue.config.ripple === false,
+                    'p-sidebar-full': this.fullScreen
                 }
             ];
         },
@@ -202,6 +209,18 @@ export default {
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        },
+        maskClasses() {
+            return [
+                'p-sidebar-mask',
+                this.getPositionClass(),
+                {
+                    'p-component-overlay p-component-overlay-enter': this.modal,
+                    'p-sidebar-mask-scrollblocker': this.blockScroll,
+                    'p-sidebar-visible': this.maskVisible,
+                    'p-sidebar-full': this.fullScreen
+                }
+            ];
         }
     },
     directives: {
@@ -215,134 +234,183 @@ export default {
 </script>
 
 <style>
-.p-sidebar {
+.p-sidebar-mask {
     position: fixed;
-    transition: transform 0.3s;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    background-color: transparent;
+    transition-property: background-color;
+}
+
+.p-sidebar-visible {
+    display: flex;
+}
+
+.p-sidebar-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-sidebar {
     display: flex;
     flex-direction: column;
+    pointer-events: auto;
+    transform: translate3d(0px, 0px, 0px);
+    position: relative;
+    transition: transform 0.3s;
 }
 
 .p-sidebar-content {
-    position: relative;
     overflow-y: auto;
+    flex-grow: 1;
 }
 
 .p-sidebar-header {
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    flex-shrink: 0;
 }
 
 .p-sidebar-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    position: relative;
     overflow: hidden;
+    position: relative;
 }
 
-.p-sidebar-left {
+.p-sidebar-full .p-sidebar {
-    top: 0;
-    left: 0;
-    width: 20rem;
-    height: 100%;
-}
-
-.p-sidebar-right {
-    top: 0;
-    right: 0;
-    width: 20rem;
-    height: 100%;
-}
-
-.p-sidebar-top {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 10rem;
-}
-
-.p-sidebar-bottom {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 10rem;
-}
-
-.p-sidebar-full {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    -webkit-transition: none;
     transition: none;
+    transform: none;
+    width: 100vw !important;
+    height: 100vh !important;
+    max-height: 100%;
+    top: 0px !important;
+    left: 0px !important;
 }
 
+/* Animation */
+/* Center */
 .p-sidebar-left.p-sidebar-enter-from,
 .p-sidebar-left.p-sidebar-leave-to {
     transform: translateX(-100%);
 }
-
 .p-sidebar-right.p-sidebar-enter-from,
 .p-sidebar-right.p-sidebar-leave-to {
     transform: translateX(100%);
 }
-
 .p-sidebar-top.p-sidebar-enter-from,
 .p-sidebar-top.p-sidebar-leave-to {
     transform: translateY(-100%);
 }
-
 .p-sidebar-bottom.p-sidebar-enter-from,
 .p-sidebar-bottom.p-sidebar-leave-to {
     transform: translateY(100%);
 }
-
 .p-sidebar-full.p-sidebar-enter-from,
 .p-sidebar-full.p-sidebar-leave-to {
     opacity: 0;
 }
-
 .p-sidebar-full.p-sidebar-enter-active,
 .p-sidebar-full.p-sidebar-leave-active {
     transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.p-sidebar-left.p-sidebar-sm,
+/* Position */
-.p-sidebar-right.p-sidebar-sm {
+.p-sidebar-left {
+    justify-content: flex-start;
+}
+
+.p-sidebar-right {
+    justify-content: flex-end;
+}
+
+.p-sidebar-top {
+    align-items: flex-start;
+}
+
+.p-sidebar-bottom {
+    align-items: flex-end;
+}
+
+/* Size */
+.p-sidebar-left .p-sidebar {
+    width: 20rem;
+    height: 100%;
+}
+
+.p-sidebar-right .p-sidebar {
+    width: 20rem;
+    height: 100%;
+}
+
+.p-sidebar-top .p-sidebar {
+    height: 10rem;
+    width: 100%;
+}
+
+.p-sidebar-bottom .p-sidebar {
+    height: 10rem;
+    width: 100%;
+}
+
+.p-sidebar-left .p-sidebar-sm,
+.p-sidebar-right .p-sidebar-sm {
     width: 20rem;
 }
 
-.p-sidebar-left.p-sidebar-md,
+.p-sidebar-left .p-sidebar-md,
-.p-sidebar-right.p-sidebar-md {
+.p-sidebar-right .p-sidebar-md {
     width: 40rem;
 }
 
-.p-sidebar-left.p-sidebar-lg,
+.p-sidebar-left .p-sidebar-lg,
-.p-sidebar-right.p-sidebar-lg {
+.p-sidebar-right .p-sidebar-lg {
     width: 60rem;
 }
 
-.p-sidebar-top.p-sidebar-sm,
+.p-sidebar-top .p-sidebar-sm,
-.p-sidebar-bottom.p-sidebar-sm {
+.p-sidebar-bottom .p-sidebar-sm {
     height: 10rem;
 }
 
-.p-sidebar-top.p-sidebar-md,
+.p-sidebar-top .p-sidebar-md,
-.p-sidebar-bottom.p-sidebar-md {
+.p-sidebar-bottom .p-sidebar-md {
     height: 20rem;
 }
 
-.p-sidebar-top.p-sidebar-lg,
+.p-sidebar-top .p-sidebar-lg,
-.p-sidebar-bottom.p-sidebar-lg {
+.p-sidebar-bottom .p-sidebar-lg {
     height: 30rem;
 }
 
+.p-sidebar-left .p-sidebar-view,
+.p-sidebar-right .p-sidebar-view,
+.p-sidebar-top .p-sidebar-view,
+.p-sidebar-bottom .p-sidebar-view {
+    width: 100%;
+    height: 100%;
+}
+
+.p-sidebar-left .p-sidebar-content,
+.p-sidebar-right .p-sidebar-content,
+.p-sidebar-top .p-sidebar-content,
+.p-sidebar-bottom .p-sidebar-content {
+    width: 100%;
+    height: 100%;
+}
+
 @media screen and (max-width: 64em) {
-    .p-sidebar-left.p-sidebar-lg,
+    .p-sidebar-left .p-sidebar-lg,
-    .p-sidebar-left.p-sidebar-md,
+    .p-sidebar-left .p-sidebar-md,
-    .p-sidebar-right.p-sidebar-lg,
+    .p-sidebar-right .p-sidebar-lg,
-    .p-sidebar-right.p-sidebar-md {
+    .p-sidebar-right .p-sidebar-md {
         width: 20rem;
     }
 }

pages/sidebar/SidebarDoc.vue

@@ -121,6 +121,12 @@ import Sidebar from 'primevue/sidebar';
                             <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
                         </td>
                     </tr>
+                    <tr>
+                        <td>blockScroll</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether background scroll should be blocked when sidebar is visible.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>