Refactor SplitButton to use menu
parent
a4457368e7
commit
bfc8fae132
|
@ -5,5 +5,4 @@
|
||||||
@import '../../components/inputtext/InputText.css';
|
@import '../../components/inputtext/InputText.css';
|
||||||
@import '../../components/password/Password.css';
|
@import '../../components/password/Password.css';
|
||||||
@import '../../components/radiobutton/RadioButton.css';
|
@import '../../components/radiobutton/RadioButton.css';
|
||||||
@import '../../components/splitbutton/SplitButton.css';
|
|
||||||
@import '../../components/tooltip/Tooltip.css';
|
@import '../../components/tooltip/Tooltip.css';
|
|
@ -41,6 +41,10 @@ export default {
|
||||||
baseZIndex: {
|
baseZIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
|
},
|
||||||
|
align: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -85,7 +89,9 @@ export default {
|
||||||
},
|
},
|
||||||
onEnter() {
|
onEnter() {
|
||||||
this.appendContainer();
|
this.appendContainer();
|
||||||
|
if (this.align) {
|
||||||
this.alignOverlay();
|
this.alignOverlay();
|
||||||
|
}
|
||||||
this.bindOutsideClickListener();
|
this.bindOutsideClickListener();
|
||||||
this.bindResizeListener();
|
this.bindResizeListener();
|
||||||
|
|
||||||
|
|
|
@ -1,36 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="container" class="p-splitbutton p-buttonset p-component">
|
<div class="p-splitbutton p-buttonset p-component">
|
||||||
<PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
|
<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"
|
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
|
||||||
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
|
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
|
||||||
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" />
|
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :align="false" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -48,7 +48,7 @@ export default {
|
||||||
this.$emit('click', event);
|
this.$emit('click', event);
|
||||||
},
|
},
|
||||||
onDropdownButtonClick() {
|
onDropdownButtonClick() {
|
||||||
this.$refs.menu.toggle(event);
|
this.$refs.menu.toggle({currentTarget: this.$el});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -62,3 +62,47 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.p-splitbutton {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton .p-button.p-splitbutton-menubutton {
|
||||||
|
width: 2em;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-splitbutton .p-menu {
|
||||||
|
left: auto;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue