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

refactor: #7090 for PanelMenu

pull/7064/merge
Mert Sincan 2025-01-14 11:12:15 +00:00
parent 0be05110a8
commit 1095fecced
1 changed files with 5 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/primevue/src/panel/Panel.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('header')" v-bind="ptm('header')"> <div :class="cx('header')" v-bind="ptm('header')">
<slot :id="id + '_header'" name="header" :class="cx('title')"> <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> <span v-if="header" :id="$id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
</slot> </slot>
<div :class="cx('headerActions')" v-bind="ptm('headerActions')"> <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
<slot name="icons"></slot> <slot name="icons"></slot>
<Button <Button
v-if="toggleable" v-if="toggleable"
:id="id + '_header'" :id="$id + '_header'"
:class="cx('pcToggleButton')" :class="cx('pcToggleButton')"
:aria-label="buttonAriaLabel" :aria-label="buttonAriaLabel"
:aria-controls="id + '_content'" :aria-controls="$id + '_content'"
:aria-expanded="!d_collapsed" :aria-expanded="!d_collapsed"
:unstyled="unstyled" :unstyled="unstyled"
@click="toggle" @click="toggle"
@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<transition name="p-toggleable-content" v-bind="ptm('transition')"> <transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')"> <div v-show="!d_collapsed" :id="$id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="$id + '_header'" v-bind="ptm('contentContainer')">
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<slot></slot> <slot></slot>
</div> </div>
@ -42,7 +42,6 @@
</template> </template>
<script> <script>
import { UniqueComponentId } from '@primevue/core/utils';
import MinusIcon from '@primevue/icons/minus'; import MinusIcon from '@primevue/icons/minus';
import PlusIcon from '@primevue/icons/plus'; import PlusIcon from '@primevue/icons/plus';
import Button from 'primevue/button'; import Button from 'primevue/button';
@ -56,21 +55,14 @@ export default {
emits: ['update:collapsed', 'toggle'], emits: ['update:collapsed', 'toggle'],
data() { data() {
return { return {
id: this.$attrs.id,
d_collapsed: this.collapsed d_collapsed: this.collapsed
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
collapsed(newValue) { collapsed(newValue) {
this.d_collapsed = newValue; this.d_collapsed = newValue;
} }
}, },
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: { methods: {
toggle(event) { toggle(event) {
this.d_collapsed = !this.d_collapsed; this.d_collapsed = !this.d_collapsed;