vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented Sidebar Component

pull/12/head
cagataycivici 2019-02-05 06:40:53 +03:00
parent 2c22533039
commit b7a7f7ff3c
9 changed files with 310 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -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>

1
src/assets/styles/primevue.css
View File

@ -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';

1
src/components/dialog/Dialog.css
View File

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

4
src/components/dialog/Dialog.vue
View File

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

117
src/components/sidebar/Sidebar.css Normal file
View File

@ -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;
}
}

122
src/components/sidebar/Sidebar.vue Normal file
View File

@ -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>

2
src/main.js
View File

@ -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);

5
src/router.js
View File

@ -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',

62
src/views/sidebar/SidebarDemo.vue Normal file
View File

@ -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>