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'; import Ripple from '../ripple/Ripple';
export default { export default {
inheritAttrs: false,
props: { props: {
item: null item: null
}, },

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

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

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

@ -78,6 +78,7 @@ export default {
</CodeHighlight> </CodeHighlight>
<h5>Properties</h5> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -107,18 +108,6 @@ export default {
<td>null</td> <td>null</td>
<td>MenuModel instance to define the overlay items.</td> <td>MenuModel instance to define the overlay items.</td>
</tr> </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> <tr>
<td>autoZIndex</td> <td>autoZIndex</td>
<td>boolean</td> <td>boolean</td>
@ -142,6 +131,7 @@ export default {
</div> </div>
<h5>Events</h5> <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"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -152,11 +142,11 @@ export default {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>click</td> <td>click</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Callback to invoke when main button is clicked.</td> <td>Callback to invoke when main button is clicked.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -202,13 +192,13 @@ export default {
&lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt; &lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt;
&lt;h3&gt;Severities&lt;/h3&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-mb-2"&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-secondary p-mb-2"&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-success p-mb-2"&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-info p-mb-2"&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-warning p-mb-2"&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-help p-mb-2"&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-button-danger p-mb-2"&gt;&lt;/SplitButton&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>