2022-09-06 12:03:37 +00:00
|
|
|
<template>
|
2023-03-21 12:05:24 +00:00
|
|
|
<div :class="containerClass" v-bind="ptm('root')">
|
|
|
|
<div class="p-panel-header" v-bind="ptm('header')">
|
2023-04-26 11:18:19 +00:00
|
|
|
<slot :id="ariaId + '_header'" name="header" class="p-panel-title">
|
2023-03-21 12:05:24 +00:00
|
|
|
<span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
|
2022-09-06 12:03:37 +00:00
|
|
|
</slot>
|
2023-03-21 12:05:24 +00:00
|
|
|
<div class="p-panel-icons" v-bind="ptm('icons')">
|
2022-09-06 12:03:37 +00:00
|
|
|
<slot name="icons"></slot>
|
2022-09-14 11:26:01 +00:00
|
|
|
<button
|
|
|
|
v-if="toggleable"
|
|
|
|
:id="ariaId + '_header'"
|
|
|
|
v-ripple
|
|
|
|
type="button"
|
|
|
|
role="button"
|
2023-03-21 15:53:39 +00:00
|
|
|
class="p-panel-header-icon p-panel-toggler p-link"
|
2022-12-08 11:04:25 +00:00
|
|
|
:aria-label="buttonAriaLabel"
|
2022-09-14 11:26:01 +00:00
|
|
|
:aria-controls="ariaId + '_content'"
|
|
|
|
:aria-expanded="!d_collapsed"
|
|
|
|
@click="toggle"
|
|
|
|
@keydown="onKeyDown"
|
2023-03-21 12:24:34 +00:00
|
|
|
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
|
2022-09-14 11:26:01 +00:00
|
|
|
>
|
2023-04-05 08:07:25 +00:00
|
|
|
<slot name="togglericon" :collapsed="d_collapsed">
|
|
|
|
<component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" v-bind="ptm('togglericon')" />
|
2023-03-21 15:53:39 +00:00
|
|
|
</slot>
|
2022-09-06 12:03:37 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<transition name="p-toggleable-content">
|
2023-03-21 12:05:24 +00:00
|
|
|
<div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
|
|
|
|
<div class="p-panel-content" v-bind="ptm('content')">
|
2022-09-06 12:03:37 +00:00
|
|
|
<slot></slot>
|
|
|
|
</div>
|
2023-03-31 13:42:19 +00:00
|
|
|
<div v-if="$slots.footer" class="p-panel-footer" v-bind="ptm('footer')">
|
|
|
|
<slot name="footer"></slot>
|
|
|
|
</div>
|
2022-09-06 12:03:37 +00:00
|
|
|
</div>
|
|
|
|
</transition>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2023-03-31 21:51:41 +00:00
|
|
|
import BaseComponent from 'primevue/basecomponent';
|
2023-04-18 12:53:43 +00:00
|
|
|
import MinusIcon from 'primevue/icons/minus';
|
|
|
|
import PlusIcon from 'primevue/icons/plus';
|
2022-09-06 12:03:37 +00:00
|
|
|
import Ripple from 'primevue/ripple';
|
2022-12-08 11:04:25 +00:00
|
|
|
import { UniqueComponentId } from 'primevue/utils';
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Panel',
|
2023-03-31 21:51:41 +00:00
|
|
|
extends: BaseComponent,
|
2022-09-06 12:03:37 +00:00
|
|
|
emits: ['update:collapsed', 'toggle'],
|
|
|
|
props: {
|
|
|
|
header: String,
|
|
|
|
toggleable: Boolean,
|
2022-09-14 11:26:01 +00:00
|
|
|
collapsed: Boolean,
|
2022-12-08 11:04:25 +00:00
|
|
|
toggleButtonProps: {
|
|
|
|
type: null,
|
2022-12-29 13:16:58 +00:00
|
|
|
default: null
|
2022-12-08 11:04:25 +00:00
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
d_collapsed: this.collapsed
|
2022-09-14 11:26:01 +00:00
|
|
|
};
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
collapsed(newValue) {
|
|
|
|
this.d_collapsed = newValue;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggle(event) {
|
|
|
|
this.d_collapsed = !this.d_collapsed;
|
|
|
|
this.$emit('update:collapsed', this.d_collapsed);
|
|
|
|
this.$emit('toggle', {
|
|
|
|
originalEvent: event,
|
|
|
|
value: this.d_collapsed
|
|
|
|
});
|
2022-09-14 11:26:01 +00:00
|
|
|
},
|
|
|
|
onKeyDown(event) {
|
|
|
|
if (event.code === 'Enter' || event.code === 'Space') {
|
|
|
|
this.toggle(event);
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
ariaId() {
|
|
|
|
return UniqueComponentId();
|
|
|
|
},
|
|
|
|
containerClass() {
|
2022-09-14 11:26:01 +00:00
|
|
|
return ['p-panel p-component', { 'p-panel-toggleable': this.toggleable }];
|
2022-12-08 11:04:25 +00:00
|
|
|
},
|
|
|
|
buttonAriaLabel() {
|
|
|
|
return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
2023-04-03 08:27:41 +00:00
|
|
|
components: {
|
|
|
|
PlusIcon,
|
|
|
|
MinusIcon
|
|
|
|
},
|
2022-09-06 12:03:37 +00:00
|
|
|
directives: {
|
2022-09-14 11:26:01 +00:00
|
|
|
ripple: Ripple
|
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>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.p-panel-header {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.p-panel-title {
|
|
|
|
line-height: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.p-panel-header-icon {
|
|
|
|
display: inline-flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
cursor: pointer;
|
|
|
|
text-decoration: none;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
</style>
|