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

Refactor #4953 - For Panel

pull/5206/head
mertsincan 2024-02-02 15:47:37 +00:00
parent 239b0809f4
commit dcf57813fe
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/lib/panel/Panel.vue
View File

@ -1,20 +1,20 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('header')" v-bind="ptm('header')">
<slot :id="ariaId + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
<slot :id="id + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
</slot>
<div :class="cx('icons')" v-bind="ptm('icons')">
<slot name="icons"></slot>
<button
v-if="toggleable"
:id="ariaId + '_header'"
:id="id + '_header'"
v-ripple
type="button"
role="button"
:class="cx('toggler')"
:aria-label="buttonAriaLabel"
:aria-controls="ariaId + '_content'"
:aria-controls="id + '_content'"
:aria-expanded="!d_collapsed"
@click="toggle"
@keydown="onKeyDown"
@ -27,7 +27,7 @@
</div>
</div>
<transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="cx('content')" v-bind="ptm('content')">
<slot></slot>
</div>
@ -52,14 +52,21 @@ export default {
emits: ['update:collapsed', 'toggle'],
data() {
return {
id: this.$attrs.id,
d_collapsed: this.collapsed
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
collapsed(newValue) {
this.d_collapsed = newValue;
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
toggle(event) {
this.d_collapsed = !this.d_collapsed;
@ -77,9 +84,6 @@ export default {
}
},
computed: {
ariaId() {
return UniqueComponentId();
},
buttonAriaLabel() {
return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
}