Refactor #3965 - For Panel

components/lib/panel/BasePanel.vue

@@ -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>

components/lib/panel/Panel.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="classes.root" v-bind="ptm('root')">
+    <div :class="css('root')" data-pc-name="panel" v-bind="ptm('root')">
-        <div :class="classes.header" v-bind="ptm('header')">
+        <div :class="css('header')" v-bind="ptm('header')">
-            <slot :id="ariaId + '_header'" name="header" :class="classes.title">
+            <slot :id="ariaId + '_header'" name="header" :class="css('title')">
-                <span v-if="header" :id="ariaId + '_header'" :class="classes.title" v-bind="ptm('title')">{{ header }}</span>
+                <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"
@@ -12,7 +12,7 @@
                     v-ripple
                     type="button"
                     role="button"
-                    :class="classes.toggler"
+                    :class="css('toggler')"
                     :aria-label="buttonAriaLabel"
                     :aria-controls="ariaId + '_content'"
                     :aria-expanded="!d_collapsed"
@@ -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 v-show="!d_collapsed" :id="ariaId + '_content'" :class="css('toggleablecontent')" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
-                <div :class="classes.content" v-bind="ptm('content')">
+                <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>
@@ -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';
+import BasePanel from './BasePanel';
-
-const styleInstance = useStyle(styles, { id: 'primevue_panel_style', manual: true });
 
 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
@@ -71,12 +58,6 @@ export default {
     watch: {
         collapsed(newValue) {
             this.d_collapsed = newValue;
-        },
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && styleInstance.load();
-            }
         }
     },
     methods: {
@@ -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: {

components/lib/panel/PanelStyle.js

@@ -1,32 +0,0 @@
-export 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;
-}
-`;
-
-export const getComputedClasses = (props, states) => ({
-    root: ['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'
-});