Skip to content

Commit

Permalink
Refactor #3965 - For Panel
Browse files Browse the repository at this point in the history
  • Loading branch information
mertsincan committed May 19, 2023
1 parent b13d188 commit 69d6ed9
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 65 deletions.
69 changes: 69 additions & 0 deletions components/lib/panel/BasePanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
}
`;
const classes = {
root: ({ props }) => [
'p-panel p-component',
{
'p-panel-toggleable': props.toggleable
}
],
header: 'p-panel-header',
title: 'p-panel-title',
icons: 'p-panel-icons',
toggler: 'p-panel-header-icon p-panel-toggler p-link',
toggleablecontent: 'p-toggleable-content',
content: 'p-panel-content',
footer: 'p-panel-footer'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
export default {
name: 'BasePanel',
extends: BaseComponent,
props: {
header: String,
toggleable: Boolean,
collapsed: Boolean,
toggleButtonProps: {
type: null,
default: null
}
},
style: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>
44 changes: 11 additions & 33 deletions components/lib/panel/Panel.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<template>
<div :class="classes.root" v-bind="ptm('root')">
<div :class="classes.header" v-bind="ptm('header')">
<slot :id="ariaId + '_header'" name="header" :class="classes.title">
<span v-if="header" :id="ariaId + '_header'" :class="classes.title" v-bind="ptm('title')">{{ header }}</span>
<div :class="css('root')" data-pc-name="panel" v-bind="ptm('root')">
<div :class="css('header')" v-bind="ptm('header')">
<slot :id="ariaId + '_header'" name="header" :class="css('title')">
<span v-if="header" :id="ariaId + '_header'" :class="css('title')" v-bind="ptm('title')">{{ header }}</span>
</slot>
<div :class="classes.icons" v-bind="ptm('icons')">
<div :class="css('icons')" v-bind="ptm('icons')">
<slot name="icons"></slot>
<button
v-if="toggleable"
:id="ariaId + '_header'"
v-ripple
type="button"
role="button"
:class="classes.toggler"
:class="css('toggler')"
:aria-label="buttonAriaLabel"
:aria-controls="ariaId + '_content'"
:aria-expanded="!d_collapsed"
Expand All @@ -27,11 +27,11 @@
</div>
</div>
<transition name="p-toggleable-content">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="classes.toggleablecontent" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="classes.content" v-bind="ptm('content')">
<div v-show="!d_collapsed" :id="ariaId + '_content'" :class="css('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
<div :class="css('content')" v-bind="ptm('content')">
<slot></slot>
</div>
<div v-if="$slots.footer" :class="classes.footer" v-bind="ptm('footer')">
<div v-if="$slots.footer" :class="css('footer')" v-bind="ptm('footer')">
<slot name="footer"></slot>
</div>
</div>
Expand All @@ -40,29 +40,16 @@
</template>

<script>
import BaseComponent from 'primevue/basecomponent';
import MinusIcon from 'primevue/icons/minus';
import PlusIcon from 'primevue/icons/plus';
import Ripple from 'primevue/ripple';
import { useStyle } from 'primevue/usestyle';
import { UniqueComponentId } from 'primevue/utils';
import { getComputedClasses, styles } from './PanelStyle';
const styleInstance = useStyle(styles, { id: 'primevue_panel_style', manual: true });
import BasePanel from './BasePanel';
export default {
name: 'Panel',
extends: BaseComponent,
extends: BasePanel,
emits: ['update:collapsed', 'toggle'],
props: {
header: String,
toggleable: Boolean,
collapsed: Boolean,
toggleButtonProps: {
type: null,
default: null
}
},
data() {
return {
d_collapsed: this.collapsed
Expand All @@ -71,12 +58,6 @@ export default {
watch: {
collapsed(newValue) {
this.d_collapsed = newValue;
},
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && styleInstance.load();
}
}
},
methods: {
Expand All @@ -101,9 +82,6 @@ export default {
},
buttonAriaLabel() {
return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
},
classes() {
return this.isUnstyled ? {} : getComputedClasses(this.$props, this.$data);
}
},
components: {
Expand Down
32 changes: 0 additions & 32 deletions components/lib/panel/PanelStyle.js

This file was deleted.

0 comments on commit 69d6ed9

Please sign in to comment.