Reimplement sidebar completed

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,51 +61,65 @@ export default {
         modal: {
             type: Boolean,
             default: true
+        },
+        blockScroll: {
+            type: Boolean,
+            default: false
         }
     },
-    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.outsideClickListener && this.unbindOutsideClickListener();
         },
-        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.$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);
-            }
         },
         focus() {
             const findFocusableElement = (container) => {
@@ -123,54 +138,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 +159,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 +204,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 +229,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;
     }
 }