Merge branch 'master' of https://github.com/primefaces/primevue

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;

apps/showcase/scripts/build-apidoc.js

@@ -680,74 +680,6 @@ if (project) {
                     });
             });
 
-        const module_designtokens_group = module.groups?.find((g) => g.title === 'DesignTokens');
-
-        module_designtokens_group &&
-            module_designtokens_group.children.forEach((event) => {
-                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
-                let component_prop = '';
-
-                if (event.comment && event.comment.getTag('@see')) {
-                    const tag = event.comment.getTag('@see');
-                    const content = tag.content[0];
-
-                    if (content.text.includes("['")) {
-                        component_prop = `${content.target.name}${content.text}`;
-                    } else {
-                        component_prop = `${content.text === content.target?.name ? content.target.parent.name : content.target?.name}.${content.text}`;
-                    }
-                }
-
-                !doc[name]['tokens'] &&
-                    (doc[name]['tokens'] = {
-                        description: staticMessages['tokens'],
-                        values: {}
-                    });
-
-                const props = [];
-
-                const setProps = (_declaration, _name) => {
-                    if (_declaration?.groups) {
-                        const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
-
-                        event_props_group &&
-                            event_props_group.children.forEach((prop) => {
-                                if (prop.type?.declaration) {
-                                    setProps(prop.type?.declaration, prop.name);
-                                } else if (prop.comment?.getTag('@designToken')) {
-                                    props.push({
-                                        name: _name ? `${_name}.${prop.name}` : prop.name,
-                                        token: prop.comment.getTag('@designToken').content[0]?.text || '',
-                                        optional: prop.flags.isOptional,
-                                        readonly: prop.flags.isReadonly,
-                                        type: prop.type.toString(),
-                                        default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0]?.text || '' : '', // TODO: Check
-                                        description:
-                                            prop.comment &&
-                                            prop.comment.summary
-                                                .map((s) => {
-                                                    if (s.text.indexOf('[here]') > -1) {
-                                                        return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
-                                                    }
-
-                                                    return s.text || '';
-                                                })
-                                                .join(' '),
-                                        deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
-                                    });
-                                }
-                            });
-                    }
-                };
-
-                setProps(event);
-
-                doc[name]['tokens'].values[event.name] = {
-                    description: event_props_description,
-                    props
-                };
-            });
-
         // app.generateJson(module, `./api-generator/module-typedoc.json`);
     });
 

packages/primevue/src/cascadeselect/CascadeSelect.vue

@@ -30,7 +30,7 @@
                 {{ label }}
             </slot>
         </span>
-        <div :class="cx('dropdown')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdown')">
+        <div :class="cx('dropdown')" role="button" tabindex="-1" v-bind="ptm('dropdown')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
                 <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />