From 041eeab642c0b81ba7310d3cf1f99d37708962ad Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Sun, 10 Mar 2024 18:48:13 +0100
Subject: [PATCH] refactor: enhance useParentProvider composable type support
 (#851)

---
 .../src/components/carousel/Carousel.vue      |  5 +++--
 .../src/components/carousel/CarouselItem.vue  |  5 +++--
 .../oruga/src/components/carousel/types.ts    |  7 ++++++
 .../src/components/dropdown/DropdownItem.vue  |  4 ++--
 packages/oruga/src/components/menu/Menu.vue   |  7 +++---
 .../oruga/src/components/menu/MenuItem.vue    | 19 +++++++++-------
 packages/oruga/src/components/menu/types.ts   | 15 +++++++++++++
 .../src/components/slider/SliderTick.vue      |  4 ++--
 .../oruga/src/components/steps/StepItem.vue   |  6 ++---
 packages/oruga/src/components/table/Table.vue |  3 +--
 .../oruga/src/components/tabs/TabItem.vue     |  6 ++---
 .../src/composables/useParentProvider.ts      | 22 ++++++++++++-------
 12 files changed, 68 insertions(+), 35 deletions(-)
 create mode 100644 packages/oruga/src/components/carousel/types.ts
 create mode 100644 packages/oruga/src/components/menu/types.ts

diff --git a/packages/oruga/src/components/carousel/Carousel.vue b/packages/oruga/src/components/carousel/Carousel.vue
index ec987953b..09655d713 100644
--- a/packages/oruga/src/components/carousel/Carousel.vue
+++ b/packages/oruga/src/components/carousel/Carousel.vue
@@ -23,6 +23,7 @@ import {
     useProviderParent,
 } from "@/composables";
 
+import type { CarouselComponent } from "./types";
 import type { ComponentClass, ClassBind } from "@/types";
 
 /**
@@ -234,11 +235,11 @@ function restartTimer(): void {
     startTimer();
 }
 
-const provideData = computed(() => ({
+const provideData = computed<CarouselComponent>(() => ({
     restartTimer,
     itemWidth: itemWidth.value,
     activeIndex: scrollIndex.value,
-    onClick: (event: MouseEvent): void => emits("click", event),
+    onClick: (event: Event): void => emits("click", event),
     setActive: (index: number): void => switchTo(index),
 }));
 
diff --git a/packages/oruga/src/components/carousel/CarouselItem.vue b/packages/oruga/src/components/carousel/CarouselItem.vue
index 8eab9ff62..18c50ab78 100644
--- a/packages/oruga/src/components/carousel/CarouselItem.vue
+++ b/packages/oruga/src/components/carousel/CarouselItem.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, type PropType, type Ref } from "vue";
+import { computed, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { defineClasses, useProviderChild } from "@/composables";
 
+import type { CarouselComponent } from "./types";
 import type { ComponentClass } from "@/types";
 
 /**
@@ -45,7 +46,7 @@ const props = defineProps({
 });
 
 // Inject functionalities and data from the parent carousel component
-const { parent, item } = useProviderChild<Ref<any>>();
+const { parent, item } = useProviderChild<CarouselComponent>();
 
 const isActive = computed(() => parent.value.activeIndex === item.value.index);
 
diff --git a/packages/oruga/src/components/carousel/types.ts b/packages/oruga/src/components/carousel/types.ts
new file mode 100644
index 000000000..b866162f7
--- /dev/null
+++ b/packages/oruga/src/components/carousel/types.ts
@@ -0,0 +1,7 @@
+export type CarouselComponent = {
+    restartTimer: () => void;
+    itemWidth: number;
+    activeIndex: number;
+    onClick: (event: Event) => void;
+    setActive: (index: number) => void;
+};
diff --git a/packages/oruga/src/components/dropdown/DropdownItem.vue b/packages/oruga/src/components/dropdown/DropdownItem.vue
index aa2b7e566..f4b93999d 100644
--- a/packages/oruga/src/components/dropdown/DropdownItem.vue
+++ b/packages/oruga/src/components/dropdown/DropdownItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T">
-import { computed, type ComputedRef, type PropType } from "vue";
+import { computed, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { uuid, isEqual } from "@/utils/helpers";
@@ -80,7 +80,7 @@ const emits = defineEmits<{
 const itemValue = computed(() => (props.value || uuid()) as T);
 
 // Inject functionalities and data from the parent component
-const { parent } = useProviderChild<ComputedRef<DropdownComponent<T>>>();
+const { parent } = useProviderChild<DropdownComponent<T>>();
 
 const isClickable = computed(
     () => !parent.value.props.disabled && !props.disabled && props.clickable,
diff --git a/packages/oruga/src/components/menu/Menu.vue b/packages/oruga/src/components/menu/Menu.vue
index 9369d185b..f8a76ed30 100644
--- a/packages/oruga/src/components/menu/Menu.vue
+++ b/packages/oruga/src/components/menu/Menu.vue
@@ -8,6 +8,7 @@ import {
     type ProviderItem,
 } from "@/composables";
 
+import type { MenuComponent, MenuItemComponent } from "./types";
 import type { ComponentClass } from "@/types";
 
 /**
@@ -81,20 +82,20 @@ const props = defineProps({
 const rootRef = ref();
 
 // Provided data is a computed ref to enjure reactivity.
-const provideData = computed(() => ({
+const provideData = computed<MenuComponent>(() => ({
     activable: props.activable,
     accordion: props.accordion,
     resetMenu,
 }));
 
 /** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent<{ reset: () => void }>(rootRef, {
+const { childItems } = useProviderParent<MenuItemComponent>(rootRef, {
     data: provideData,
 });
 
 function resetMenu(excludedItems: ProviderItem[] = []): void {
     childItems.value.forEach((item) => {
-        if (!excludedItems.includes(toRaw(item))) item.data.reset();
+        if (!excludedItems.includes(toRaw(item))) item.data.value.reset();
     });
 }
 
diff --git a/packages/oruga/src/components/menu/MenuItem.vue b/packages/oruga/src/components/menu/MenuItem.vue
index a4e8f176d..981618429 100644
--- a/packages/oruga/src/components/menu/MenuItem.vue
+++ b/packages/oruga/src/components/menu/MenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, toRaw, type PropType, type Ref } from "vue";
+import { ref, computed, toRaw, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import {
@@ -10,6 +10,11 @@ import {
     type ProviderItem,
 } from "@/composables";
 
+import type {
+    MenuComponent,
+    MenuItemComponent,
+    MenuItemProvider,
+} from "./types";
 import type { ComponentClass, DynamicComponent } from "@/types";
 
 /**
@@ -116,19 +121,17 @@ const emits = defineEmits<{
     (e: "update:expanded", value: boolean): void;
 }>();
 
-const providedData = computed(() => ({
+const providedData = computed<MenuItemComponent>(() => ({
     reset,
 }));
 
 // Inject functionalities and data from the parent menu component
-const { parent, item } = useProviderChild<Ref<any>>({
+const { parent, item } = useProviderChild<MenuComponent>({
     data: providedData,
 });
 
 // Inject functionalities and data from the parent menu-item component
-const providedItem = useProviderChild<
-    Ref<{ triggerReset: typeof triggerReset } | undefined>
->({
+const providedItem = useProviderChild<MenuItemProvider>({
     key: "menu-item",
     needParent: false,
 });
@@ -173,12 +176,12 @@ function reset(): void {
 const rootRef = ref();
 
 // Provided data is a computed ref to enjure reactivity.
-const provideData = computed(() => ({
+const provideData = computed<MenuItemProvider>(() => ({
     triggerReset,
 }));
 
 /** Provide functionalities and data to child item components */
-useProviderParent(rootRef, { data: provideData, key: "menu-item" });
+useProviderParent(rootRef, { key: "menu-item", data: provideData });
 
 // --- Computed Component Classes ---
 
diff --git a/packages/oruga/src/components/menu/types.ts b/packages/oruga/src/components/menu/types.ts
new file mode 100644
index 000000000..70cdb930d
--- /dev/null
+++ b/packages/oruga/src/components/menu/types.ts
@@ -0,0 +1,15 @@
+import type { ProviderItem } from "@/composables";
+
+export type MenuComponent = {
+    activable: boolean;
+    accordion: boolean;
+    resetMenu: (excludedItems?: ProviderItem[]) => void;
+};
+
+export type MenuItemComponent = {
+    reset: () => void;
+};
+
+export type MenuItemProvider = {
+    triggerReset: (child?: ProviderItem) => void;
+};
diff --git a/packages/oruga/src/components/slider/SliderTick.vue b/packages/oruga/src/components/slider/SliderTick.vue
index 046747689..005cf7508 100644
--- a/packages/oruga/src/components/slider/SliderTick.vue
+++ b/packages/oruga/src/components/slider/SliderTick.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type ComputedRef, type PropType } from "vue";
+import { computed, type PropType } from "vue";
 import { defineClasses, useProviderChild } from "@/composables";
 
 import type { SliderComponent } from "./types";
@@ -38,7 +38,7 @@ const props = defineProps({
 });
 
 // Inject functionalities and data from the parent carousel component
-const { parent } = useProviderChild<ComputedRef<SliderComponent>>();
+const { parent } = useProviderChild<SliderComponent>();
 
 const position = computed(() => {
     const pos =
diff --git a/packages/oruga/src/components/steps/StepItem.vue b/packages/oruga/src/components/steps/StepItem.vue
index d60187bd6..b8e4028f6 100644
--- a/packages/oruga/src/components/steps/StepItem.vue
+++ b/packages/oruga/src/components/steps/StepItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useSlots, type ComputedRef, type PropType } from "vue";
+import { computed, toRaw, ref, useSlots, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { isEqual, uuid } from "@/utils/helpers";
@@ -99,7 +99,7 @@ const emits = defineEmits<{
 const slots = useSlots();
 
 const providedData = computed<StepItemComponent>(() => ({
-    ...props,
+    ...toRaw(props),
     $slots: slots,
     isTransitioning: isTransitioning.value,
     activate,
@@ -107,7 +107,7 @@ const providedData = computed<StepItemComponent>(() => ({
 }));
 
 // Inject functionalities and data from the parent carousel component
-const { parent, item } = useProviderChild<ComputedRef<StepsComponent>>({
+const { parent, item } = useProviderChild<StepsComponent>({
     data: providedData,
 });
 
diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
index 6944319e1..64cdc3763 100644
--- a/packages/oruga/src/components/table/Table.vue
+++ b/packages/oruga/src/components/table/Table.vue
@@ -8,7 +8,6 @@ import {
     useSlots,
     toValue,
     type PropType,
-    type ComputedRef,
 } from "vue";
 
 import OCheckbox from "../checkbox/Checkbox.vue";
@@ -709,7 +708,7 @@ const rootRef = ref<HTMLElement>();
 const slotRef = ref<HTMLElement>();
 
 /** Provide functionalities and data to child item components */
-const provider = useProviderParent<ComputedRef<TableColumnComponent>>(slotRef);
+const provider = useProviderParent<TableColumnComponent>(slotRef);
 
 const tableColumns = computed<TableColumn[]>(() =>
     provider.sortedItems.value.map((column) => ({
diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
index c452d7b0a..8ee965372 100644
--- a/packages/oruga/src/components/tabs/TabItem.vue
+++ b/packages/oruga/src/components/tabs/TabItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useSlots, type ComputedRef, type PropType } from "vue";
+import { computed, toRaw, ref, useSlots, type PropType } from "vue";
 
 import { getOption } from "@/utils/config";
 import { isEqual, uuid } from "@/utils/helpers";
@@ -98,7 +98,7 @@ const emits = defineEmits<{
 const slots = useSlots();
 
 const providedData = computed<TabItemComponent>(() => ({
-    ...props,
+    ...toRaw(props),
     $slots: slots,
     headerIconClasses: headerIconClasses.value,
     headerTextClasses: headerTextClasses.value,
@@ -108,7 +108,7 @@ const providedData = computed<TabItemComponent>(() => ({
 }));
 
 // Inject functionalities and data from the parent component
-const { parent, item } = useProviderChild<ComputedRef<TabsComponent>>({
+const { parent, item } = useProviderChild<TabsComponent>({
     data: providedData,
 });
 
diff --git a/packages/oruga/src/composables/useParentProvider.ts b/packages/oruga/src/composables/useParentProvider.ts
index 78476b648..ced2f6bb4 100644
--- a/packages/oruga/src/composables/useParentProvider.ts
+++ b/packages/oruga/src/composables/useParentProvider.ts
@@ -6,19 +6,20 @@ import {
     onUnmounted,
     provide,
     ref,
+    type ComputedRef,
     type Ref,
 } from "vue";
 
 export type ProviderItem<T = unknown> = {
     index: number;
-    data: T;
+    data: ComputedRef<T>;
     identifier: string;
 };
 
 type PovidedData<P, I = unknown> = {
-    registerItem: (data: I) => ProviderItem<I>;
+    registerItem: (data: ComputedRef<I>) => ProviderItem<I>;
     unregisterItem: (item: ProviderItem<I>) => void;
-    data?: P;
+    data?: ComputedRef<P>;
 };
 
 type ProviderParentOptions<T = unknown> = {
@@ -30,7 +31,7 @@ type ProviderParentOptions<T = unknown> = {
     /**
      * Additional data provided for the child to the item
      */
-    data?: T;
+    data?: ComputedRef<T>;
 };
 
 /**
@@ -42,7 +43,10 @@ type ProviderParentOptions<T = unknown> = {
 export function useProviderParent<ItemData = unknown, ParentData = unknown>(
     rootRef?: Ref<HTMLElement>,
     options?: ProviderParentOptions<ParentData>,
-) {
+): {
+    childItems: Ref<ProviderItem<ItemData>[]>;
+    sortedItems: Ref<ProviderItem<ItemData>[]>;
+} {
     // getting a hold of the internal instance in setup()
     const vm = getCurrentInstance();
     if (!vm)
@@ -65,7 +69,9 @@ export function useProviderParent<ItemData = unknown, ParentData = unknown>(
         childItems.value.slice().sort((a, b) => a.index - b.index),
     );
 
-    function registerItem(data?: ItemData): ProviderItem<ItemData> {
+    function registerItem(
+        data?: ComputedRef<ItemData>,
+    ): ProviderItem<ItemData> {
         const index = childItems.value.length;
         const identifier = nextSequence();
         const item = { index, data, identifier };
@@ -124,7 +130,7 @@ type ProviderChildOptions<T = unknown> = {
     /**
      * Additional data appended to the item
      */
-    data?: T;
+    data?: ComputedRef<T>;
     /**
      * Register child on parent
      * @default true
@@ -138,7 +144,7 @@ type ProviderChildOptions<T = unknown> = {
  */
 export function useProviderChild<ParentData, ItemData = unknown>(
     options: ProviderChildOptions<ItemData> = { needParent: true },
-): { parent: ParentData; item: Ref<ProviderItem<ItemData>> } {
+): { parent: ComputedRef<ParentData>; item: Ref<ProviderItem<ItemData>> } {
     // getting a hold of the internal instance in setup()
     const vm = getCurrentInstance();
     if (!vm)