2022-09-06 12:03:37 +00:00
|
|
|
<template>
|
2023-05-30 14:17:32 +00:00
|
|
|
<div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
|
2022-09-06 12:03:37 +00:00
|
|
|
<slot>
|
2023-07-19 12:44:39 +00:00
|
|
|
<PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps" :unstyled="unstyled" data-pc-section="button">
|
2023-06-09 12:09:21 +00:00
|
|
|
<template v-if="icon" #icon="slotProps">
|
2023-06-06 08:14:14 +00:00
|
|
|
<slot name="icon" :class="slotProps.class">
|
2023-05-30 14:59:16 +00:00
|
|
|
<span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
|
2023-04-18 10:50:13 +00:00
|
|
|
</slot>
|
|
|
|
</template>
|
|
|
|
</PVSButton>
|
2022-09-06 12:03:37 +00:00
|
|
|
</slot>
|
2022-12-08 11:04:25 +00:00
|
|
|
<PVSButton
|
|
|
|
ref="button"
|
|
|
|
type="button"
|
2023-05-30 14:17:32 +00:00
|
|
|
:class="cx('menuButton')"
|
2022-12-08 11:04:25 +00:00
|
|
|
:disabled="disabled"
|
|
|
|
aria-haspopup="true"
|
|
|
|
:aria-expanded="isExpanded"
|
|
|
|
:aria-controls="ariaId + '_overlay'"
|
|
|
|
@click="onDropdownButtonClick"
|
|
|
|
@keydown="onDropdownKeydown"
|
2023-05-02 08:00:39 +00:00
|
|
|
:pt="ptm('menuButton')"
|
|
|
|
v-bind="menuButtonProps"
|
2023-06-12 07:11:42 +00:00
|
|
|
:unstyled="unstyled"
|
2023-07-19 12:44:39 +00:00
|
|
|
data-pc-section="menubutton"
|
2023-04-10 11:57:23 +00:00
|
|
|
>
|
2023-04-19 07:50:39 +00:00
|
|
|
<template #icon="slotProps">
|
2023-06-06 08:14:14 +00:00
|
|
|
<slot name="menubuttonicon" :class="slotProps.class">
|
2023-05-30 14:59:16 +00:00
|
|
|
<component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" v-bind="ptm('menuButton')['icon']" />
|
2023-04-14 07:44:20 +00:00
|
|
|
</slot>
|
|
|
|
</template>
|
2023-04-10 11:57:23 +00:00
|
|
|
</PVSButton>
|
2023-06-05 08:10:25 +00:00
|
|
|
<PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('menu')" />
|
2022-09-06 12:03:37 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Button from 'primevue/button';
|
2023-04-18 12:53:43 +00:00
|
|
|
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
2022-09-06 12:03:37 +00:00
|
|
|
import TieredMenu from 'primevue/tieredmenu';
|
2022-09-14 11:26:01 +00:00
|
|
|
import { UniqueComponentId } from 'primevue/utils';
|
2023-05-30 14:17:32 +00:00
|
|
|
import BaseSplitButton from './BaseSplitButton.vue';
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'SplitButton',
|
2023-05-30 14:17:32 +00:00
|
|
|
extends: BaseSplitButton,
|
2022-12-31 09:51:37 +00:00
|
|
|
emits: ['click'],
|
2022-12-08 11:04:25 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isExpanded: false
|
|
|
|
};
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
2023-06-20 07:29:55 +00:00
|
|
|
mounted() {
|
|
|
|
this.$watch('$refs.menu.visible', (newValue) => {
|
|
|
|
this.isExpanded = newValue;
|
|
|
|
});
|
|
|
|
},
|
2022-09-06 12:03:37 +00:00
|
|
|
methods: {
|
2023-07-31 12:54:09 +00:00
|
|
|
onDropdownButtonClick(event) {
|
|
|
|
event.preventDefault();
|
2022-12-08 11:04:25 +00:00
|
|
|
this.$refs.menu.toggle({ currentTarget: this.$el, relatedTarget: this.$refs.button.$el });
|
2023-06-20 07:29:55 +00:00
|
|
|
this.isExpanded = this.$refs.menu.visible;
|
2022-12-08 11:04:25 +00:00
|
|
|
},
|
|
|
|
onDropdownKeydown(event) {
|
|
|
|
if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
|
|
|
|
this.onDropdownButtonClick();
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
2022-12-08 11:04:25 +00:00
|
|
|
onDefaultButtonClick(event) {
|
2023-07-31 12:54:09 +00:00
|
|
|
event.preventDefault()
|
|
|
|
|
2023-03-17 06:59:23 +00:00
|
|
|
if (this.isExpanded) {
|
|
|
|
this.$refs.menu.hide(event);
|
|
|
|
}
|
2022-12-31 09:51:37 +00:00
|
|
|
|
2023-03-17 06:59:23 +00:00
|
|
|
this.$emit('click', event);
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
ariaId() {
|
|
|
|
return UniqueComponentId();
|
|
|
|
},
|
|
|
|
containerClass() {
|
2023-05-30 14:17:32 +00:00
|
|
|
return [this.cx('root'), this.class];
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
2022-09-14 11:26:01 +00:00
|
|
|
PVSButton: Button,
|
2023-04-10 11:57:23 +00:00
|
|
|
PVSMenu: TieredMenu,
|
|
|
|
ChevronDownIcon: ChevronDownIcon
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
};
|
2022-09-06 12:03:37 +00:00
|
|
|
</script>
|