From db654f9502e50e89c7e7d9c12052b661dfdf4984 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Sep 2024 10:05:21 +0300
Subject: [PATCH] PTViewer improvements

---
 apps/showcase/components/doc/DocPTViewer.vue | 35 +++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/showcase/components/doc/DocPTViewer.vue b/apps/showcase/components/doc/DocPTViewer.vue
index 36ec906b3..d2b5396cd 100644
--- a/apps/showcase/components/doc/DocPTViewer.vue
+++ b/apps/showcase/components/doc/DocPTViewer.vue
@@ -15,7 +15,7 @@
                     <div v-for="item of handleData(doc.data)" :key="item.value" class="doc-ptoption" @mouseenter="enterSection(item, doc.key)" @mouseleave="leaveSection">
                         <span class="doc-ptoption-text">
                             {{ item.label }}
-                            <template v-if="docs.length > 1">| {{ doc.key }}</template>
+                            {{ findComponentName(item.label, doc) }}
                         </span>
                     </div>
                 </template>
@@ -26,6 +26,7 @@
 
 <script>
 import { addClass, find, removeClass } from '@primeuix/utils/dom';
+import { defaultOptions } from '@primevue/core/config';
 
 export default {
     props: ['docs'],
@@ -35,6 +36,38 @@ export default {
         };
     },
     methods: {
+        findComponentName(label, doc) {
+            let text = '';
+
+            if (this.docs.length > 1) {
+                text += `| ${doc.key}`;
+            }
+
+            if (label.includes('pc')) {
+                let reservedNames = ['Decrement', 'File', 'Increment', 'JumpToPage', 'Maximize', 'Node', 'Option', 'Prev', 'Remove', 'RowPerPage', 'Source', 'Target', 'MoveAllTo', 'MoveAll', 'MoveTop', 'MoveTo']; // the order of this list is important!
+                let whiteList = [...reservedNames, ...Object.keys(defaultOptions.locale), ...Object.keys(defaultOptions.locale.aria)];
+                let elemName = label.replace('pc', '');
+
+                if (elemName.includes('FilterContainer')) elemName = elemName.replace('FilterContainer', 'IconField');
+                else if (elemName.includes('FilterIconContainer')) elemName = elemName.replace('FilterIconContainer', 'InputIcon');
+                else if (elemName.includes('Filter')) elemName = elemName.replace('Filter', 'InputText');
+
+                if (elemName.includes('Action')) elemName = elemName.replace('Action', 'Button');
+                if (elemName.includes('Dropdown')) elemName = elemName.replace('Dropdown', 'Select');
+
+                for (const word of whiteList) {
+                    if (elemName.toLowerCase().includes(word.toLowerCase())) {
+                        const regex = new RegExp(word, 'gi');
+
+                        elemName = elemName.replace(regex, '');
+                    }
+                }
+
+                text += ` | ${elemName}`;
+            }
+
+            return text;
+        },
         enterSection(item, componentName) {
             let selector,
                 cmpName = componentName;