Implemented Sidebar Component

src/AppMenu.vue

@@ -78,6 +78,7 @@
                 <div>
                     <router-link to="/dialog">&#9679; Dialog</router-link>
                     <router-link to="/overlaypanel">&#9679; OverlayPanel</router-link>
+                    <router-link to="/sidebar">&#9679; Sidebar</router-link>
                 </div>
             </div>
 

src/assets/styles/primevue.css

@@ -18,6 +18,7 @@
 @import '../../components/progressbar/ProgressBar.css';
 @import '../../components/radiobutton/RadioButton.css';
 @import '../../components/rating/Rating.css';
+@import '../../components/sidebar/Sidebar.css';
 @import '../../components/slider/Slider.css';
 @import '../../components/spinner/Spinner.css';
 @import '../../components/tabview/TabView.css';

src/components/dialog/Dialog.css

@@ -114,7 +114,6 @@
 
 .p-dialog-enter-active,
 .p-dialog-leave-active {
-
     transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 

src/components/dialog/Dialog.vue

@@ -104,7 +104,3 @@ export default {
     }
 }
 </script>
-
-<style>
-
-</style>

src/components/sidebar/Sidebar.css

@@ -0,0 +1,117 @@
+.p-sidebar {
+    position: fixed;
+    padding: .5em 1em;
+    -webkit-transition: transform .3s;
+    transition: transform .3s;
+}
+
+.p-sidebar-left {
+    top: 0;
+    left: 0;
+    width: 20em;
+    height: 100%;
+}
+
+.p-sidebar-right {
+    top: 0;
+    right: 0;
+    width: 20em;
+    height: 100%;
+}
+
+.p-sidebar-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 10em;
+}
+
+.p-sidebar-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 10em;
+}
+
+.p-sidebar-full {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    -webkit-transition: none;
+    transition: none;
+}
+
+.p-sidebar-left.p-sidebar-enter,
+.p-sidebar-left.p-sidebar-leave-to {
+    transform: translateX(-100%);
+}
+
+.p-sidebar-right.p-sidebar-enter,
+.p-sidebar-right.p-sidebar-leave-to {
+    transform: translateX(100%);
+}
+
+.p-sidebar-top.p-sidebar-enter,
+.p-sidebar-top.p-sidebar-leave-to {
+    transform: translateY(-100%);
+}
+
+.p-sidebar-bottom.p-sidebar-enter,
+.p-sidebar-bottom.p-sidebar-leave-to {
+    transform: translateY(100%);
+}
+
+.p-sidebar-full.p-sidebar-enter,
+.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 {
+    width: 20em;
+}
+
+.p-sidebar-left.p-sidebar-md,
+.p-sidebar-right.p-sidebar-md {
+    width: 40em;
+}
+
+.p-sidebar-left.p-sidebar-lg,
+.p-sidebar-right.p-sidebar-lg {
+    width: 60em;
+}
+
+.p-sidebar-top.p-sidebar-sm,
+.p-sidebar-bottom.p-sidebar-sm {
+    height: 10em;
+}
+
+.p-sidebar-top.p-sidebar-md,
+.p-sidebar-bottom.p-sidebar-md {
+    height: 20em;
+}
+
+.p-sidebar-top.p-sidebar-lg,
+.p-sidebar-bottom.p-sidebar-lg {
+    height: 30em;
+}
+
+.p-sidebar-close {
+    float: right;
+    cursor: pointer;
+}
+
+@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 {
+        width: 20em;
+    }
+}

src/components/sidebar/Sidebar.vue

@@ -0,0 +1,122 @@
+<template>
+    <transition name="p-sidebar" @enter="onEnter" @leave="onLeave">
+        <div :class="containerClass" v-if="visible" ref="container">
+            <button class="p-sidebar-close p-link" @click="hide">
+                <span class="p-sidebar-close-icon pi pi-times" />
+            </button>
+            <slot></slot>
+        </div>
+    </transition>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        position: {
+            type: String,
+            default: 'left'
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        dismissable: {
+            type: Boolean,
+            default: true
+        },
+        showCloseIcon: {
+            type: Boolean,
+            default: true
+        },
+        modal: {
+            type: Boolean,
+            default: true
+        }
+    },
+    mask: null,
+    maskClickListener: null,
+    methods: {
+        hide() {
+            this.$emit('update:visible', false);
+        },
+        onEnter() {
+            this.$emit('show');
+
+            if (this.autoZIndex) {
+                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+            this.focus();
+            if (this.modal && !this.fullScreen) {
+                this.enableModality();
+            }
+        },
+        onLeave() {
+            this.$emit('hide');
+
+            if (this.modal && !this.fullScreen) {
+                this.disableModality();
+            }
+        },
+        focus() {
+            let focusable = DomHandler.findSingle(this.$refs.container, 'input,button');
+            if (focusable) {
+                focusable.focus();
+            }
+        },
+        enableModality() {
+            if (!this.mask) {
+                this.mask = document.createElement('div');
+                this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
+                DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-fadein');
+                if (this.dismissable) {
+                    this.bindMaskClickListener();
+                }
+                document.body.appendChild(this.mask);
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
+            }
+        },
+        disableModality() {
+            if (this.mask) {
+                this.unbindMaskClickListener();
+                document.body.removeChild(this.mask);
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                this.mask = null;
+            }
+        },
+        bindMaskClickListener() {
+            if (!this.maskClickListener) {
+                this.maskClickListener = (event) => {
+                    this.hide();
+                };
+                this.mask.addEventListener('click', this.maskClickListener);
+            }
+        },
+        unbindMaskClickListener() {
+            if (this.maskClickListener) {
+                this.mask.removeEventListener('click', this.maskClickListener);
+                this.maskClickListener = null;
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-sidebar p-component p-sidebar-' + this.position , {
+                'p-sidebar-active': this.visible
+            }];
+        },
+        fullScreen() {
+            return this.position === 'full';
+        }
+    }
+}
+</script>

src/main.js

@@ -26,6 +26,7 @@ import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import SelectButton from './components/selectbutton/SelectButton';
 import Slider from './components/slider/Slider';
+import Sidebar from './components/sidebar/Sidebar';
 import Spinner from './components/spinner/Spinner';
 import Textarea from './components/textarea/Textarea';
 import Toolbar from './components/toolbar/Toolbar';
@@ -65,6 +66,7 @@ Vue.component('RadioButton', RadioButton);
 Vue.component('Rating', Rating);
 Vue.component('SelectButton', SelectButton);
 Vue.component('Slider', Slider);
+Vue.component('Sidebar', Sidebar);
 Vue.component('Spinner', Spinner);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);

src/router.js

@@ -171,6 +171,11 @@ export default new Router({
         name: 'selectbutton',
         component: () => import('./views/selectbutton/SelectButtonDemo.vue')
     },
+    {
+        path: '/sidebar',
+        name: 'sidebar',
+        component: () => import('./views/sidebar/SidebarDemo.vue')
+    },
     {
         path: '/slider',
         name: 'slider',

src/views/sidebar/SidebarDemo.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Sidebar</h1>
+                <p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
+                <h1 style="fontWeight:normal">Left Sidebar</h1>
+                <Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
+                <Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
+            </Sidebar>
+
+            <Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
+                <h1 style="fontWeight:normal">Right Sidebar</h1>
+                <Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
+                <Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
+            </Sidebar>
+
+            <Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
+                <h1 style="fontWeight:normal">Top Sidebar</h1>
+                <Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
+                <Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
+            </Sidebar>
+
+            <Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
+                <h1 style="fontWeight:normal">Bottom Sidebar</h1>
+                <Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
+                <Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
+            </Sidebar>
+
+            <Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
+                <h1 style="fontWeight:normal">Full Screen</h1>
+                <Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
+                <Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
+            </Sidebar>
+
+            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
+            <Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
+            <Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
+            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
+            <Button icon="pi pi-th-large" @click="visibleFull = true"  />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visibleLeft: false,
+            visibleRight: false,
+            visibleTop: false,
+            visibleBottom: false,
+            visibleFull: false
+        }
+    }
+}
+</script>