PT: Panel

components/base/ComponentBase.vue

@@ -0,0 +1,18 @@
+<script>
+import { ObjectUtils } from 'primevue/utils';
+
+export default {
+    name: 'ComponentBase',
+    props: {
+        pt: {
+            type: Object,
+            value: {}
+        }
+    },
+    methods: {
+        ptm(key = '', params = {}) {
+            return ObjectUtils.getItemValue((this.pt || {})[key.toLowerCase()], { props: this.$props, state: this.$data, ...params });
+        }
+    }
+};
+</script>

components/base/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "./componentbase.cjs.js",
+  "module": "./componentbase.esm.js",
+  "unpkg": "./componentbase.min.js",
+  "browser": {
+    "./sfc": "./ComponentBase.vue"
+  }
+}

components/lib/panel/Panel.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="containerClass">
-        <div class="p-panel-header">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div class="p-panel-header" v-bind="ptm('header')">
             <slot name="header">
-                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title">{{ header }}</span>
+                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
             </slot>
-            <div class="p-panel-icons">
+            <div class="p-panel-icons" v-bind="ptm('icons')">
                 <slot name="icons"></slot>
                 <button
                     v-if="toggleable"
@@ -12,21 +12,21 @@
                     v-ripple
                     type="button"
                     role="button"
-                    class="p-panel-header-icon p-panel-toggler p-link"
+                    class="p-panel-toggler p-link"
                     :aria-label="buttonAriaLabel"
                     :aria-controls="ariaId + '_content'"
                     :aria-expanded="!d_collapsed"
                     @click="toggle"
                     @keydown="onKeyDown"
-                    v-bind="toggleButtonProps"
+                    v-bind="(toggleButtonProps, ptm('toggler'))"
                 >
-                    <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
+                    <span :class="['p-panel-header-icon', { 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }]" v-bind="ptm('headericon')"></span>
                 </button>
             </div>
         </div>
         <transition name="p-toggleable-content">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
-                <div class="p-panel-content">
+            <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')">
                     <slot></slot>
                 </div>
             </div>
@@ -35,11 +35,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Panel',
+    extends: ComponentBase,
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,

nuxt.config.js

@@ -85,6 +85,7 @@ export default defineNuxtConfig({
                 'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
                 'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
                 'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
+                'primevue/base': path.resolve(__dirname, './components/base/ComponentBase.vue'),
                 'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
                 'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
                 'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),

vitest.config.js

@@ -23,6 +23,7 @@ export default {
             'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
             'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
             'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
+            'primevue/base': path.resolve(__dirname, './components/base/ComponentBase.vue'),
             'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
             'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
             'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),