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

Migrated Menu and SplitButton to V3

pull/496/head
Cagatay Civici 2020-09-21 15:47:24 +03:00
parent e27dfcf54e
commit 4a680fad9f
4 changed files with 32 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/menu/Menuitem.vue
View File

@ -15,6 +15,7 @@
import Ripple from '../ripple/Ripple';
export default {
inheritAttrs: false,
props: {
item: null
},

25
src/components/splitbutton/SplitButton.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="p-splitbutton p-component">
<PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="disabled"
<div :class="containerClass" :style="style">
<PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled"
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
:baseZIndex="baseZIndex" :appendTo="appendTo" />
@ -14,6 +14,7 @@ import Menu from '../menu/Menu';
import UniqueComponentId from '../utils/UniqueComponentId';
export default {
inheritAttrs: false,
props: {
label: {
type: String,
@ -27,14 +28,6 @@ export default {
type: Array,
default: null
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: String,
default: null
},
autoZIndex: {
type: Boolean,
default: true
@ -46,12 +39,11 @@ export default {
appendTo: {
type: String,
default: null
}
},
class: null,
style: null
},
methods: {
onClick(event) {
this.$emit('click', event);
},
onDropdownButtonClick() {
this.$refs.menu.toggle({currentTarget: this.$el, relativeAlign: this.appendTo == null});
}
@ -59,6 +51,9 @@ export default {
computed: {
ariaId() {
return UniqueComponentId();
},
containerClass() {
return ['p-splitbutton p-component', this.class];
}
},
components: {

14
src/views/splitbutton/SplitButtonDemo.vue
View File

@ -13,13 +13,13 @@
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
<h5>Severities</h5>
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
</div>
</div>

38
src/views/splitbutton/SplitButtonDoc.vue
View File

@ -78,6 +78,7 @@ export default {
</CodeHighlight>
<h5>Properties</h5>
<p>Any property such as tabindex are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -107,18 +108,6 @@ export default {
<td>null</td>
<td>MenuModel instance to define the overlay items.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>tabindex</td>
<td>string</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
@ -142,6 +131,7 @@ export default {
</div>
<h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying button element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -152,11 +142,11 @@ export default {
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke when main button is clicked.</td>
</tr>
<tr>
<td>click</td>
<td>event: Browser event</td>
<td>Callback to invoke when main button is clicked.</td>
</tr>
</tbody>
</table>
</div>
@ -202,13 +192,13 @@ export default {
&lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt;
&lt;h3&gt;Severities&lt;/h3&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"&gt;&lt;/SplitButton&gt;
</template>
</CodeHighlight>