refactor: update useProviderParent and useProviderChild composable

packages/oruga/src/components/carousel/Carousel.vue

@@ -88,6 +88,7 @@ function restartTimer(): void {
     startTimer();
 }
 
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<CarouselComponent>(() => ({
     restartTimer,
     itemWidth: itemWidth.value,
@@ -96,8 +97,8 @@ const provideData = computed<CarouselComponent>(() => ({
     setActive: (index: number): void => switchTo(index),
 }));
 
-/** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent(rootRef, { data: provideData });
+/** provide functionalities and data to child item components */
+const { childItems } = useProviderParent({ rootRef, data: provideData });
 
 const activeIndex = defineModel<number>({ default: 0 });
 const scrollIndex = ref(props.modelValue);
@@ -471,6 +472,7 @@ function indicatorItemAppliedClasses(index: number): ClassBind[] {
                 -->
                 <slot />
             </div>
+
             <!--
                 @slot Override the arrows
                 @binding {boolean} has-prev has prev arrow button 
@@ -545,6 +547,7 @@ function indicatorItemAppliedClasses(index: number): ClassBind[] {
                 </div>
             </template>
         </slot>
+
         <template v-if="overlay">
             <!-- @slot Overlay element -->
             <slot name="overlay" />

packages/oruga/src/components/carousel/CarouselItem.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<CarouselItemProps>(), {
     ariaRole: () => getDefault("carousel.ariaRole", "option"),
 });
 
-// Inject functionalities and data from the parent carousel component
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<CarouselComponent>();
 
 const isActive = computed(() => parent.value.activeIndex === item.value.index);
@@ -54,8 +54,8 @@ const itemClasses = defineClasses(
         v-if="parent"
         :class="itemClasses"
         :style="itemStyle"
-        :data-id="`carousel-${item.identifier}`"
         data-oruga="carousel-item"
+        :data-id="`carousel-${item.identifier}`"
         :role="ariaRole"
         aria-roledescription="item"
         :aria-selected="isActive"

packages/oruga/src/components/dropdown/Dropdown.vue

@@ -343,16 +343,16 @@ function selectItem(value: T): void {
     }
 }
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<DropdownComponent<T>>(() => ({
     disabled: props.disabled,
     multiple: isTrueish(props.multiple),
     selected: vmodel.value,
     selectItem,
 }));
 
-/** Provide functionalities and data to child item components */
-useProviderParent(contentRef, { data: provideData });
+/** provide functionalities and data to child item components */
+useProviderParent({ data: provideData });
 
 // --- Computed Component Classes ---
 

packages/oruga/src/components/dropdown/DropdownItem.vue

@@ -39,8 +39,8 @@ const emits = defineEmits<{
     click: [value: T, event: Event];
 }>();
 
-// Inject functionalities and data from the parent component
-const { parent } = useProviderChild<DropdownComponent<T>>();
+/** inject functionalities and data from the parent component */
+const { parent, item } = useProviderChild<DropdownComponent<T>>();
 
 const isClickable = computed(
     () => !parent.value.disabled && !props.disabled && props.clickable,
@@ -81,12 +81,14 @@ const rootClasses = defineClasses(
     <component
         :is="tag"
         :class="rootClasses"
+        data-oruga="dropdown-item"
+        :data-id="`dropdown-${item.identifier}`"
         :role="ariaRole"
         :tabindex="tabindex"
-        data-oruga="dropdown-item"
         :aria-selected="isActive"
         :aria-disabled="disabled"
-        @click="selectItem">
+        @click="selectItem"
+        @keypress.enter="selectItem">
         <!--
             @slot Override the label, default is label prop 
         -->

packages/oruga/src/components/menu/Menu.vue

@@ -46,7 +46,8 @@ const provideData = computed<MenuComponent>(() => ({
 }));
 
 /** provide functionalities and data to child item components */
-const { childItems } = useProviderParent<MenuItemComponent>(rootRef, {
+const { childItems } = useProviderParent<MenuItemComponent>({
+    rootRef,
     data: provideData,
 });
 

packages/oruga/src/components/menu/MenuItem.vue

@@ -60,12 +60,12 @@ const providedData = computed<MenuItemComponent>(() => ({
     reset,
 }));
 
-// inject functionalities and data from the parent menu component
+/** inject functionalities and data from the parent menu component */
 const { parent, item } = useProviderChild<MenuComponent, MenuItemComponent>({
     data: providedData,
 });
 
-// inject functionalities and data from the parent menu-item component
+/** inject functionalities and data from the parent menu-item component */
 const providedItem = useProviderChild<MenuItemProvider>({
     key: "menu-item",
     needParent: false,
@@ -114,7 +114,7 @@ const provideData = computed<MenuItemProvider>(() => ({
 }));
 
 /** provide functionalities and data to child item components */
-useProviderParent(rootRef, { key: "menu-item", data: provideData });
+useProviderParent({ rootRef, key: "menu-item", data: provideData });
 
 // --- Computed Component Classes ---
 
@@ -148,8 +148,8 @@ const submenuClasses = defineClasses([
         ref="rootElement"
         :role="ariaRole"
         :class="itemClasses"
-        :data-id="identifier"
         data-oruga="menu-item"
+        :data-id="identifier"
         aria-roledescription="item">
         <component
             :is="tag"

packages/oruga/src/components/slider/Slider.vue

@@ -75,14 +75,14 @@ const sliderRef = useTemplateRef("sliderElement");
 const thumbStartRef = useTemplateRef("thumbStartComponent");
 const thumbEndRef = useTemplateRef("thumbEndComponent");
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<SliderComponent>(() => ({
     max: props.max,
     min: props.min,
 }));
 
-/** Provide functionalities and data to child item components */
-useProviderParent(undefined, { data: provideData });
+/** provide functionalities and data to child item components */
+useProviderParent({ data: provideData });
 
 const valueStart = ref<number>(0);
 const valueEnd = ref<number>(0);

packages/oruga/src/components/slider/SliderTick.vue

@@ -37,8 +37,8 @@ const props = defineProps({
     },
 });
 
-// Inject functionalities and data from the parent carousel component
-const { parent } = useProviderChild<SliderComponent>();
+/** inject functionalities and data from the parent component */
+const { parent } = useProviderChild<SliderComponent>({ register: false });
 
 const position = computed(() => {
     const pos =

packages/oruga/src/components/steps/StepItem.vue

@@ -47,6 +47,7 @@ const itemValue = props.value || useId();
 
 const slots = useSlots();
 
+// provided data is a computed ref to enjure reactivity
 const providedData = computed<StepItemComponent<T>>(() => ({
     ...props,
     value: itemValue,
@@ -60,7 +61,7 @@ const providedData = computed<StepItemComponent<T>>(() => ({
     deactivate,
 }));
 
-// inject functionalities and data from the parent carousel component
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<StepsComponent>({
     data: providedData,
 });
@@ -180,8 +181,8 @@ const panelClasses = defineClasses(["stepPanelClass", "o-steps__panel"]);
             v-bind="$attrs"
             :id="`tabpanel-${item.identifier}`"
             :class="panelClasses"
-            :data-id="`steps-${item.identifier}`"
             data-oruga="steps-item"
+            :data-id="`steps-${item.identifier}`"
             :aria-labelledby="`tab-${item.identifier}`"
             aria-roledescription="item">
             <template v-if="!parent.destroyOnHide || (isActive && visible)">

packages/oruga/src/components/steps/Steps.vue

@@ -89,7 +89,7 @@ const rootRef = useTemplateRef("rootElement");
 /** The selected item value, use v-model to make it two-way binding */
 const vmodel = defineModel<ModelValue>({ default: undefined });
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<StepsComponent>(() => ({
     activeIndex: activeItem.value?.index || 0,
     labelPosition: props.labelPosition,
@@ -101,10 +101,10 @@ const provideData = computed<StepsComponent>(() => ({
     variant: props.variant,
 }));
 
-/** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent<StepItemComponent<T>>(rootRef, {
+/** provide functionalities and data to child item components */
+const { childItems } = useProviderParent<StepItemComponent<T>>({
+    rootRef,
     data: provideData,
-    sorted: true,
 });
 
 const items = computed<StepItem<T>[]>(() => {

packages/oruga/src/components/table/Table.vue

@@ -352,9 +352,9 @@ const provideData = computed<TableComponent>(() => ({
 }));
 
 /** provide functionalities and data to child item components */
-const { childItems } = useProviderParent<TableColumnComponent<T>>(slotRef, {
+const { childItems } = useProviderParent<TableColumnComponent<T>>({
+    rootRef: slotRef,
     data: provideData,
-    sorted: true,
 });
 
 /** all defined columns */

packages/oruga/src/components/table/TableColumn.vue

@@ -45,6 +45,7 @@ const isHeaderUnselectable = computed(
 
 const vm = getCurrentInstance();
 
+// provided data is a computed ref to enjure reactivity
 const providedData = computed<TableColumnComponent<T>>(() => ({
     ...props,
     $el: vm!.proxy!,
@@ -54,6 +55,7 @@ const providedData = computed<TableColumnComponent<T>>(() => ({
     tdClasses: tdClasses.value,
 }));
 
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<TableComponent>({
     data: providedData,
 });
@@ -120,7 +122,7 @@ const filters = {} as Record<string, string>;
 </script>
 
 <template>
-    <span :data-id="item.identifier" data-oruga="table-column">
+    <span data-oruga="table-column" :data-id="item.identifier">
         {{ label }}
 
         <!--

packages/oruga/src/components/tabs/TabItem.vue

@@ -44,6 +44,7 @@ const itemValue = props.value || useId();
 
 const slots = useSlots();
 
+// provided data is a computed ref to enjure reactivity
 const providedData = computed<TabItemComponent<T>>(() => ({
     ...props,
     value: itemValue,
@@ -57,7 +58,7 @@ const providedData = computed<TabItemComponent<T>>(() => ({
     deactivate,
 }));
 
-// Inject functionalities and data from the parent component
+/** inject functionalities and data from the parent component */
 const { parent, item } = useProviderChild<TabsComponent>({
     data: providedData,
 });
@@ -164,8 +165,8 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
             v-bind="$attrs"
             :id="`tabpanel-${item.identifier}`"
             :class="panelClasses"
-            :data-id="`tabs-${item.identifier}`"
             data-oruga="tabs-item"
+            :data-id="`tabs-${item.identifier}`"
             :aria-labelledby="`tab-${item.identifier}`"
             aria-roledescription="item">
             <template v-if="!parent.destroyOnHide || (isActive && visible)">

packages/oruga/src/components/tabs/Tabs.vue

@@ -81,7 +81,7 @@ const rootRef = useTemplateRef("rootElement");
 /** The selected item value, use v-model to make it two-way binding */
 const vmodel = defineModel<ModelValue>({ default: undefined });
 
-// Provided data is a computed ref to enjure reactivity.
+// provided data is a computed ref to enjure reactivity
 const provideData = computed<TabsComponent>(() => ({
     activeIndex: activeItem.value?.index || 0,
     type: props.type,
@@ -92,10 +92,10 @@ const provideData = computed<TabsComponent>(() => ({
     destroyOnHide: props.destroyOnHide,
 }));
 
-/** Provide functionalities and data to child item components */
-const { childItems } = useProviderParent<TabItemComponent<T>>(rootRef, {
+/** provide functionalities and data to child item components */
+const { childItems } = useProviderParent<TabItemComponent<T>>({
+    rootRef,
     data: provideData,
-    sorted: true,
 });
 
 const items = computed<TabItem<T>[]>(() => {