From a556b46e481dcaf72c72d430ac9515191ac6fa38 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 30 May 2023 10:59:17 +0100
Subject: [PATCH] Refactor #3965 - Update CascadeSelect and Breadcrumb

---
 .../lib/basecomponent/BaseComponent.vue       | 31 ++++++++++++-------
 components/lib/breadcrumb/BaseBreadcrumb.vue  | 22 ++++++-------
 components/lib/breadcrumb/BreadcrumbItem.vue  | 28 +++++++----------
 .../lib/cascadeselect/BaseCascadeSelect.vue   | 26 +++++++---------
 .../lib/cascadeselect/CascadeSelectSub.vue    | 12 ++-----
 components/lib/panel/BasePanel.vue            | 16 +++++-----
 components/lib/toast/ToastMessage.vue         |  2 +-
 components/lib/utils/DomHandler.js            |  2 +-
 8 files changed, 65 insertions(+), 74 deletions(-)

diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 627db1196..b7ec02fc5 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -27,6 +27,19 @@ export default {
             default: undefined
         }
     },
+    inject: {
+        $parentInstance: {
+            default: undefined
+        }
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && this.$options.css && this.$css.loadStyle();
+            }
+        }
+    },
     methods: {
         _getOptionValue(options, key = '', params = {}) {
             const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
@@ -61,16 +74,12 @@ export default {
             return this._getPTValue(obj, key, params);
         },
         cx(key = '', params = {}) {
-            return !this.isUnstyled ? this._getOptionValue(this.$options.css && this.$options.css.classes, key, { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
-        },
-        cxo(obj = {}, key = '', params = {}) {
-            // @todo
-            return !this.isUnstyled ? this._getOptionValue(obj.css && obj.css.classes, key, { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
+            return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params }) : undefined;
         },
         sx(key = '', when = true, params = {}) {
             if (when) {
-                const self = this._getOptionValue(this.$options.css && this.$options.css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
-                const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
+                const self = this._getOptionValue(this.$css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
+                const base = this._getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance, ...params });
 
                 return [base, self];
             }
@@ -80,13 +89,13 @@ export default {
     },
     computed: {
         defaultPT() {
-            return this._getOptionValue(this.$primevue.config.pt, this.$.type.name, this.defaultsParams);
-        },
-        defaultsParams() {
-            return { instance: this };
+            return this._getOptionValue(this.$primevue.config.pt, this.$.type.name, { instance: this });
         },
         isUnstyled() {
             return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
+        },
+        $css() {
+            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...(this.$parentInstance || {}).$css, ...this.$options.css };
         }
     }
 };
diff --git a/components/lib/breadcrumb/BaseBreadcrumb.vue b/components/lib/breadcrumb/BaseBreadcrumb.vue
index 87cf9f38b..c9d72908f 100644
--- a/components/lib/breadcrumb/BaseBreadcrumb.vue
+++ b/components/lib/breadcrumb/BaseBreadcrumb.vue
@@ -41,19 +41,19 @@ const classes = {
     menu: 'p-breadcrumb-list',
     home: 'p-breadcrumb-home',
     separator: 'p-menuitem-separator',
-    menuitem: ({ context }) => ['p-menuitem', { 'p-disabled': context.disabled() }],
-    action: ({ context, isActive, isExactActive }) => [
+    menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
+    action: ({ instance, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': instance.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
 
 export default {
     name: 'BaseBreadcrumb',
@@ -73,15 +73,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/breadcrumb/BreadcrumbItem.vue b/components/lib/breadcrumb/BreadcrumbItem.vue
index acdaf09eb..bae64ad74 100755
--- a/components/lib/breadcrumb/BreadcrumbItem.vue
+++ b/components/lib/breadcrumb/BreadcrumbItem.vue
@@ -1,17 +1,17 @@
 <template>
-    <li v-if="visible()" :class="[getCXOptions('menuitem'), item.class]" v-bind="ptm('menuitem')">
+    <li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem')">
         <template v-if="!templates || !templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                <a :href="href" :class="getCXOptions('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
-                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
-                    <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
-                    <span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
+                <a :href="href" :class="cx('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
+                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
+                    <span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url || '#'" :class="getCXOptions('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
-                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
-                <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
-                <span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
+            <a v-else :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
+                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon')" />
+                <span v-if="item.label" :class="cx('label')" v-bind="ptm('label')">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="templates.item" :item="item"></component>
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import BaseBreadcrumb from './BaseBreadcrumb.vue';
+import BaseComponent from 'primevue/basecomponent';
 
 export default {
     name: 'BreadcrumbItem',
-    extends: BaseBreadcrumb,
+    extends: BaseComponent,
     props: {
         item: null,
         templates: null,
@@ -31,12 +31,6 @@ export default {
         index: null
     },
     methods: {
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         onClick(event, navigate) {
             if (this.item.command) {
                 this.item.command({
diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue
index 688b8bed2..680087e75 100644
--- a/components/lib/cascadeselect/BaseCascadeSelect.vue
+++ b/components/lib/cascadeselect/BaseCascadeSelect.vue
@@ -122,13 +122,13 @@ const classes = {
     wrapper: 'p-cascadeselect-items-wrapper',
     hiddenSelectedMessage: 'p-hidden-accessible',
     list: 'p-cascadeselect-panel p-cascadeselect-items',
-    item: ({ context, processedOption }) => [
+    item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
         {
-            'p-cascadeselect-item-group': context.isOptionGroup(processedOption),
-            'p-cascadeselect-item-active p-highlight': context.isOptionActive(processedOption),
-            'p-focus': context.isOptionFocused(processedOption),
-            'p-disabled': context.isOptionDisabled(processedOption)
+            'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
+            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
+            'p-focus': instance.isOptionFocused(processedOption),
+            'p-disabled': instance.isOptionDisabled(processedOption)
         }
     ],
     content: 'p-cascadeselect-item-content',
@@ -137,7 +137,7 @@ const classes = {
     sublist: 'p-cascadeselect-sublist'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
 
 export default {
     name: 'BaseCascadeSelect',
@@ -248,15 +248,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index 969f22bf2..87fb71048 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -3,7 +3,7 @@
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
-                :class="getCXOptions('item', { processedOption })"
+                :class="cx('item', { processedOption })"
                 role="treeitem"
                 :aria-label="getOptionLabelToRender(processedOption)"
                 :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
@@ -51,14 +51,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
-import BaseCascadeSelect from './BaseCascadeSelect.vue';
 
 export default {
     name: 'CascadeSelectSub',
-    extends: BaseCascadeSelect,
+    extends: BaseComponent,
     emits: ['option-change'],
     props: {
         selectId: String,
@@ -129,12 +129,6 @@ export default {
             if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
                 this.$el.style.left = '-100%';
             }
-        },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
         }
     },
     directives: {
diff --git a/components/lib/panel/BasePanel.vue b/components/lib/panel/BasePanel.vue
index 944fdbdd2..e1e422f08 100644
--- a/components/lib/panel/BasePanel.vue
+++ b/components/lib/panel/BasePanel.vue
@@ -40,7 +40,7 @@ const classes = {
     footer: 'p-panel-footer'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
 
 export default {
     name: 'BasePanel',
@@ -55,15 +55,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/toast/ToastMessage.vue b/components/lib/toast/ToastMessage.vue
index 0590e2247..cbabd9978 100755
--- a/components/lib/toast/ToastMessage.vue
+++ b/components/lib/toast/ToastMessage.vue
@@ -19,13 +19,13 @@
 </template>
 
 <script>
-import BaseToast from './BaseToast.vue';
 import CheckIcon from 'primevue/icons/check';
 import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
 import InfoCircleIcon from 'primevue/icons/infocircle';
 import TimesIcon from 'primevue/icons/times';
 import TimesCircleIcon from 'primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
+import BaseToast from './BaseToast.vue';
 
 export default {
     name: 'ToastMessage',
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 2699b57ab..62e1140c5 100755
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -623,7 +623,7 @@ export default {
                 parentNode === 'TEXTAREA' ||
                 parentNode === 'BUTTON' ||
                 parentNode === 'A' ||
-                !!element.closest('.p-button, .p-checkbox, .p-radiobutton')
+                !!element.closest('.p-button, .p-checkbox, .p-radiobutton') // @todo Add [data-pc-section="button"]
             );
         }