Reimplement sidebar completed
Bahadır Sofuoğlu
parent
e1cbbf574d
commit
80e3981e92
|
|
@ -1,20 +1,22 @@
|
|||
<template>
|
||||
<Portal>
|
||||
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
|
||||
<div :ref="headerContainerRef" class="p-sidebar-header">
|
||||
<div v-if="$slots.header" class="p-sidebar-header-content">
|
||||
<slot name="header"></slot>
|
||||
<div v-if="maskVisible" ref="mask" style="maskStyle" :class="maskClasses" @mousedown="onMaskClick">
|
||||
<transition name="p-sidebar" @after-enter="onAfterEnter" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||
<div :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
|
||||
<div :ref="headerContainerRef" class="p-sidebar-header">
|
||||
<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">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition>
|
||||
</div>
|
||||
</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() {
|
||||
this.destroyModal();
|
||||
outsideClickListener: null,
|
||||
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.disableModality();
|
||||
this.$emit('hide');
|
||||
this.unbindOutsideClickListener();
|
||||
},
|
||||
onAfterLeave() {
|
||||
if (this.autoZIndex) {
|
||||
ZIndexUtils.clear(this.mask);
|
||||
}
|
||||
},
|
||||
onAfterLeave(el) {
|
||||
if (this.autoZIndex) {
|
||||
ZIndexUtils.clear(el);
|
||||
}
|
||||
onAfterEnter() {
|
||||
this.bindOutsideClickListener();
|
||||
},
|
||||
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() {
|
||||
if (this.maskClickListener) {
|
||||
this.mask.removeEventListener('click', this.maskClickListener);
|
||||
this.maskClickListener = null;
|
||||
}
|
||||
},
|
||||
destroyModal() {
|
||||
if (this.mask) {
|
||||
this.unbindMaskClickListener();
|
||||
document.body.removeChild(this.mask);
|
||||
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||
this.mask = null;
|
||||
onMaskClick(event) {
|
||||
if (this.dismissable && this.modal && this.$refs.mask === event.target) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
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 {
|
||||
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;
|
||||
.p-sidebar-full .p-sidebar {
|
||||
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,
|
||||
.p-sidebar-right.p-sidebar-sm {
|
||||
/* Position */
|
||||
.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-right.p-sidebar-md {
|
||||
.p-sidebar-left .p-sidebar-md,
|
||||
.p-sidebar-right .p-sidebar-md {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.p-sidebar-left.p-sidebar-lg,
|
||||
.p-sidebar-right.p-sidebar-lg {
|
||||
.p-sidebar-left .p-sidebar-lg,
|
||||
.p-sidebar-right .p-sidebar-lg {
|
||||
width: 60rem;
|
||||
}
|
||||
|
||||
.p-sidebar-top.p-sidebar-sm,
|
||||
.p-sidebar-bottom.p-sidebar-sm {
|
||||
.p-sidebar-top .p-sidebar-sm,
|
||||
.p-sidebar-bottom .p-sidebar-sm {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.p-sidebar-top.p-sidebar-md,
|
||||
.p-sidebar-bottom.p-sidebar-md {
|
||||
.p-sidebar-top .p-sidebar-md,
|
||||
.p-sidebar-bottom .p-sidebar-md {
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
.p-sidebar-top.p-sidebar-lg,
|
||||
.p-sidebar-bottom.p-sidebar-lg {
|
||||
.p-sidebar-top .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-md,
|
||||
.p-sidebar-right.p-sidebar-lg,
|
||||
.p-sidebar-right.p-sidebar-md {
|
||||
.p-sidebar-left .p-sidebar-lg,
|
||||
.p-sidebar-left .p-sidebar-md,
|
||||
.p-sidebar-right .p-sidebar-lg,
|
||||
.p-sidebar-right .p-sidebar-md {
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue