From b6ec58de6547b254562644fed466e591e22c25f5 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 30 May 2023 12:03:42 +0100
Subject: [PATCH] Refactor #3965 - Update Base components

---
 components/lib/accordion/BaseAccordion.vue       | 16 +++++++---------
 components/lib/accordiontab/BaseAccordionTab.vue |  5 +++++
 components/lib/autocomplete/AutoComplete.vue     |  2 +-
 components/lib/autocomplete/BaseAutoComplete.vue | 16 +++++++---------
 components/lib/calendar/BaseCalendar.vue         | 16 +++++++---------
 components/lib/checkbox/BaseCheckbox.vue         | 16 +++++++---------
 components/lib/chips/BaseChips.vue               | 16 +++++++---------
 components/lib/colorpicker/BaseColorPicker.vue   | 16 +++++++---------
 components/lib/dropdown/BaseDropdown.vue         | 16 +++++++---------
 components/lib/fieldset/BaseFieldset.vue         | 16 +++++++---------
 10 files changed, 62 insertions(+), 73 deletions(-)

diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue
index 7880a763a..3d1d18657 100644
--- a/components/lib/accordion/BaseAccordion.vue
+++ b/components/lib/accordion/BaseAccordion.vue
@@ -45,7 +45,7 @@ const classes = {
     }
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
 
 export default {
     name: 'BaseAccordion',
@@ -81,15 +81,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/accordiontab/BaseAccordionTab.vue b/components/lib/accordiontab/BaseAccordionTab.vue
index 298d02d7b..4426ba212 100644
--- a/components/lib/accordiontab/BaseAccordionTab.vue
+++ b/components/lib/accordiontab/BaseAccordionTab.vue
@@ -14,6 +14,11 @@ export default {
         contentClass: null,
         contentProps: null,
         disabled: Boolean
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 6c33e8073..3ebb8b52c 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -146,7 +146,7 @@
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                         :data-p-highlight="isSelected(option)"
-                                        :data-p-focus="focusedOptionIndex === getOptionIndex(index, getItemOptions)"
+                                        :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                         :data-p-disabled="isOptionDisabled(option)"
                                         v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                     >
diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index 90bc9a05a..706a545ba 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -148,7 +148,7 @@ const classes = {
     hiddenSelectedMessage: 'p-hidden-accessible'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
 
 export default {
     name: 'BaseAutoComplete',
@@ -312,15 +312,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/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 52a6c9614..1c084f7a4 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -222,7 +222,7 @@ const classes = {
     clearButton: 'p-button-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
 
 export default {
     name: 'BaseCalendar',
@@ -445,15 +445,13 @@ export default {
     },
     css: {
         inlineStyles,
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/checkbox/BaseCheckbox.vue b/components/lib/checkbox/BaseCheckbox.vue
index 35c96539e..b4f287e72 100644
--- a/components/lib/checkbox/BaseCheckbox.vue
+++ b/components/lib/checkbox/BaseCheckbox.vue
@@ -43,7 +43,7 @@ const classes = {
     icon: 'p-checkbox-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
 
 export default {
     name: 'BaseCheckbox',
@@ -106,15 +106,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/chips/BaseChips.vue b/components/lib/chips/BaseChips.vue
index dc217a0d5..b9307501d 100644
--- a/components/lib/chips/BaseChips.vue
+++ b/components/lib/chips/BaseChips.vue
@@ -67,7 +67,7 @@ const classes = {
     inputToken: 'p-chips-input-token'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
 
 export default {
     name: 'BaseChips',
@@ -131,15 +131,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/colorpicker/BaseColorPicker.vue b/components/lib/colorpicker/BaseColorPicker.vue
index a5b12c034..dcff42087 100644
--- a/components/lib/colorpicker/BaseColorPicker.vue
+++ b/components/lib/colorpicker/BaseColorPicker.vue
@@ -32,7 +32,7 @@ const classes = {
     hueHandle: 'p-colorpicker-hue-handle'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
 
 export default {
     name: 'BaseColorPicker',
@@ -77,15 +77,13 @@ export default {
         panelClass: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue
index 4d6e45e9b..14757dd71 100644
--- a/components/lib/dropdown/BaseDropdown.vue
+++ b/components/lib/dropdown/BaseDropdown.vue
@@ -153,7 +153,7 @@ const classes = {
     hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
 
 export default {
     name: 'BaseDropdown',
@@ -310,15 +310,13 @@ export default {
     },
     css: {
         inlineStyles,
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>
diff --git a/components/lib/fieldset/BaseFieldset.vue b/components/lib/fieldset/BaseFieldset.vue
index e327f229d..4add0b86c 100644
--- a/components/lib/fieldset/BaseFieldset.vue
+++ b/components/lib/fieldset/BaseFieldset.vue
@@ -38,7 +38,7 @@ const classes = {
     content: 'p-fieldset-content'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
 
 export default {
     name: 'BaseFieldset',
@@ -53,15 +53,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
-        isUnstyled: {
-            immediate: true,
-            handler(newValue) {
-                !newValue && loadStyle();
-            }
-        }
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>