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

Initiated SplitButton

pull/12/head
cagataycivici 2019-02-13 17:03:45 +03:00
parent 9dbd8796ea
commit 254925f351
8 changed files with 238 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -38,6 +38,7 @@
<div :class="{'submenuhide': activeMenuIndex !== 1, 'submenushow': activeMenuIndex === 1}">
<div>
<router-link to="/button">&#9679; Button</router-link>
<router-link to="/splitbutton">&#9679; SplitButton</router-link>
</div>
</div>

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

@ -12,6 +12,7 @@
@import '../../components/inputtext/InputText.css';
@import '../../components/inputswitch/InputSwitch.css';
@import '../../components/listbox/Listbox.css';
@import '../../components/menu/Menu.css';
@import '../../components/message/Message.css';
@import '../../components/multiselect/MultiSelect.css';
@import '../../components/overlaypanel/OverlayPanel.css';
@ -23,6 +24,7 @@
@import '../../components/sidebar/Sidebar.css';
@import '../../components/slider/Slider.css';
@import '../../components/spinner/Spinner.css';
@import '../../components/splitbutton/SplitButton.css';
@import '../../components/tabview/TabView.css';
@import '../../components/textarea/Textarea.css';
@import '../../components/toast/Toast.css';

42
src/components/menu/Menu.css Normal file
View File

@ -0,0 +1,42 @@
.p-menu {
width: 12.5em;
padding: .25em;
}
.p-menu.p-menu-dynamic {
position: absolute;
}
.p-menu .p-menu-separator {
border-width: 1px 0 0 0;
}
.p-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.p-menu .p-submenu-header {
padding: .25em .5em;
margin: .125em 0;
}
.p-menu .p-menuitem {
margin: .125em 0;
}
.p-menu .p-menuitem-link {
padding: .25em;
display: block;
text-decoration: none;
}
.p-menu .p-menuitem-icon {
margin-right: .25em;
vertical-align: middle;
}
.p-menu .p-menuitem-text {
vertical-align: middle;
}

36
src/components/splitbutton/SplitButton.css Normal file
View File

@ -0,0 +1,36 @@
.p-splitbutton {
position: relative;
display: inline-block;
zoom: 1;
}
.p-splitbutton .p-button.p-splitbutton-menubutton {
width: 2em;
vertical-align: top;
}
.p-splitbutton.p-disabled button {
cursor: default;
}
.p-fluid .p-splitbutton {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
.p-fluid .p-splitbutton .p-button:first-child {
width: calc(100% - 2em);
}
.p-fluid .p-splitbutton .p-button.p-splitbutton-menubutton {
width: 2em;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
.p-splitbutton.p-button-secondary .p-button:first-child {
border-right: 0 none;
}

86
src/components/splitbutton/SplitButton.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div ref="container" class="p-splitbutton p-buttonset p-component">
<PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled" />
<transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div ref="overlay" class="p-menu p-menu-dynamic p-component" v-if="overlayVisible">
<ul class="p-menu-list p-reset">
<li class="p-menuitem" role="menuitem" v-for="item of model" :key="item.label">
<a :href="item.url||'#'" class="p-menuitem-link" @click="itemClick($event, item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</li>
</ul>
</div>
</transition>
</div>
</template>
<script>
import Button from '../button/Button';
import DomHandler from '../utils/DomHandler';
export default {
props: {
label: String,
icon: String,
disabled: Boolean,
tabindex: String,
model: Array
},
data() {
return {
overlayVisible: false
};
},
beforeDestroy() {
this.unbindOutsideClickListener();
},
methods: {
onClick(event) {
this.$emit('click', event);
this.overlayVisible = false;
},
onDropdownButtonClick() {
this.overlayVisible = !this.overlayVisible;
},
itemClick(event, item) {
if (item.command) {
item.command({originalEvent: event, item: item });
}
this.overlayVisible = false;
event.preventDefault();
},
onOverlayEnter() {
this.alignOverlay();
this.bindOutsideClickListener();
},
onOverlayLeave() {
this.unbindOutsideClickListener();
},
alignOverlay() {
DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.overlay && !this.$refs.container.contains(event.target)) {
this.overlayVisible = false;
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
}
},
components: {
'PVSButton': Button
}
}
</script>

2
src/main.js
View File

@ -29,6 +29,7 @@ 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 SplitButton from './components/splitbutton/SplitButton';
import Spinner from './components/spinner/Spinner';
import Textarea from './components/textarea/Textarea';
import Toast from './components/toast/Toast';
@ -77,6 +78,7 @@ Vue.component('SelectButton', SelectButton);
Vue.component('Slider', Slider);
Vue.component('Sidebar', Sidebar);
Vue.component('Spinner', Spinner);
Vue.component('SplitButton', SplitButton);
Vue.component('TabView', TabView);
Vue.component('TabPanel', TabPanel);
Vue.component('Textarea', Textarea);

5
src/router.js
View File

@ -196,6 +196,11 @@ export default new Router({
name: 'spinner',
component: () => import('./views/spinner/SpinnerDemo.vue')
},
{
path: '/splitbutton',
name: 'splitbutton',
component: () => import('./views/splitbutton/SplitButtonDemo.vue')
},
{
path: '/textarea',
name: 'textarea',

64
src/views/splitbutton/SplitButtonDemo.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>SplitButton</h1>
<p>SplitButton groups a set of commands in an overlay with a default command.</p>
</div>
</div>
<div class="content-section implementation">
<h3 className="first">Basic</h3>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
},
{ label: 'Upload',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
}
]
}
},
methods: {
save() {
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
}
}
}
</script>
<style lang="scss" scoped>
.p-splitbutton {
margin-right: .5em;
}
</style>