feat(table): update thAttrs and tdAttrs properties (#958)

packages/oruga/src/components/pagination/Pagination.vue

@@ -424,7 +424,7 @@ defineExpose({ last, first, prev, next });
             v-bind="getPage(currentPage - 1, ariaPreviousLabel)">
             <o-pagination-button
                 v-bind="getPage(currentPage - 1, ariaPreviousLabel)"
-                :class="prevBtnClasses"
+                :root-class="prevBtnClasses"
                 :link-class="linkClasses"
                 :link-current-class="linkCurrentClasses">
                 <o-icon
@@ -444,7 +444,7 @@ defineExpose({ last, first, prev, next });
         <slot name="next" v-bind="getPage(currentPage + 1, ariaNextLabel)">
             <o-pagination-button
                 v-bind="getPage(currentPage + 1, ariaNextLabel)"
-                :class="nextBtnClasses"
+                :root-class="nextBtnClasses"
                 :link-class="linkClasses"
                 :link-current-class="linkCurrentClasses">
                 <o-icon

packages/oruga/src/components/pagination/PaginationButton.vue

@@ -22,7 +22,7 @@ const props = defineProps({
         type: [String, Object, Function] as PropType<DynamicComponent>,
         default: "button" as DynamicComponent,
     },
-    class: { type: Array as PropType<ClassBind[]>, default: () => [] },
+    rootClass: { type: Array as PropType<ClassBind[]>, default: () => [] },
     linkClass: {
         type: Array as PropType<ClassBind[]>,
         required: true,
@@ -36,8 +36,8 @@ const props = defineProps({
 // --- Computed Component Classes ---
 
 const linkClasses = computed(() => [
+    ...props.rootClass,
     ...props.linkClass,
-    ...props.class,
     ...(props.isCurrent ? props.linkCurrentClass : []),
 ]);
 </script>

packages/oruga/src/components/pagination/tests/__snapshots__/pagination.test.ts.snap

@@ -8,14 +8,14 @@ exports[`OPagination tests > render correctly 1`] = `
             @binding {boolean} isCurrent - if page is current
             @binding {(event:Event): void} click - onClick handler
             @binding {string} ariaLabel - aria-label attribute
-        --><button role="button" tabindex="0" class="o-pag__link o - p a g _ _ p r e v i o u s o - p a g _ _ l i n k - - d i s a b l e d" aria-label="Previous page" aria-current="false"><span class="o-icon" data-oruga="icon" aria-hidden="true"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span></button>
+        --><button role="button" tabindex="0" class="o-pag__previous o-pag__link--disabled o-pag__link" aria-label="Previous page" aria-current="false"><span class="o-icon" data-oruga="icon" aria-hidden="true"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span></button>
   <!-- 
             @slot Next button slot
             @binding {number} number - page number 
             @binding {boolean} isCurrent - if page is current
             @binding {(event:Event): void} click - onClick handler
             @binding {string} ariaLabel - aria-label attribute
-        --><button role="button" tabindex="0" class="o-pag__link o - p a g _ _ n e x t o - p a g _ _ l i n k - - d i s a b l e d" aria-label="Next page" aria-current="false"><span class="o-icon" data-oruga="icon" aria-hidden="true"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span></button>
+        --><button role="button" tabindex="0" class="o-pag__next o-pag__link--disabled o-pag__link" aria-label="Next page" aria-current="false"><span class="o-icon" data-oruga="icon" aria-hidden="true"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span></button>
   <ul class="o-pag__list">
     <!--First-->
     <!--v-if-->

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

@@ -79,6 +79,16 @@ const props = defineProps({
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             getOption("table.rowClass", (row, index) => "")(row, index),
     },
+    /** Adds native attributes to a column th element */
+    thAttrs: {
+        type: Function as PropType<(column: TableColumn<T>) => object>,
+        default: undefined,
+    },
+    /** Adds native attributes to column td element of a row */
+    tdAttrs: {
+        type: Function as PropType<(row: T, column: TableColumn<T>) => object>,
+        default: undefined,
+    },
     /**
      * Define a custom comparison function to check whether two row elements are equal.
      * By default a `rowKey` comparison is performed if given. Otherwise a simple object comparison is done.
@@ -856,13 +866,18 @@ watch([visibleRows, visibleColumns], () => {
     if (visibleColumns.value.length && visibleRows.value.length) {
         for (let i = 0; i < visibleColumns.value.length; i++) {
             const col = visibleColumns.value[i];
-            col.thAttrsData =
-                typeof col.thAttrs === "function" ? col.thAttrs(col) : {};
-            col.tdAttrsData = visibleRows.value.map((data) =>
-                typeof col.tdAttrs === "function"
-                    ? col.tdAttrs(data.value, col)
-                    : {},
-            );
+            // create additional th attrs data
+            const thAttrs =
+                typeof props.thAttrs === "function" ? props.thAttrs(col) : {};
+            col.thAttrsData = Object.assign(thAttrs, col.thAttrs);
+            // create additional td attrs data
+            col.tdAttrsData = visibleRows.value.map((data) => {
+                const tdAttrs =
+                    typeof props.tdAttrs === "function"
+                        ? props.tdAttrs(data.value, col)
+                        : {};
+                return Object.assign(tdAttrs, col.tdAttrs);
+            });
         }
     }
 });

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

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T">
-import { toRaw, computed, getCurrentInstance, type PropType } from "vue";
+import { computed, getCurrentInstance, type PropType } from "vue";
 
 import { useProviderChild } from "@/composables";
 import { toCssDimension } from "@/utils/helpers";
@@ -66,22 +66,10 @@ const props = defineProps({
         type: Function as PropType<(row: T, filter: string) => boolean>,
         default: undefined,
     },
-    /**
-     * Adds native attributes to th
-     * @deprecated will be moved to table component in v0.9
-     */
-    thAttrs: {
-        type: Function as PropType<(column: typeof props) => object>,
-        default: () => ({}),
-    },
-    /**
-     * Adds native attributes to td
-     * @deprecated will be moved to table component in v0.9
-     */
-    tdAttrs: {
-        type: Function as PropType<(row: T, column: typeof props) => object>,
-        default: () => ({}),
-    },
+    /** Adds native attributes to th */
+    thAttrs: { type: Object, default: undefined },
+    /** Adds native attributes to td */
+    tdAttrs: { type: Object, default: undefined },
 });
 
 const style = computed(() => ({
@@ -94,22 +82,8 @@ const isHeaderUnselectable = computed(
 
 const vm = getCurrentInstance();
 
-const providedData = computed<TableColumnComponent>(() => ({
-    ...toRaw(props), // TODO: remove toRaw when tdAttrs/thAttrs are moved to table component
-    label: props.label,
-    field: props.field,
-    subheading: props.subheading,
-    meta: props.meta,
-    width: props.width,
-    numeric: props.numeric,
-    position: props.position,
-    searchable: props.searchable,
-    sortable: props.sortable,
-    visible: props.visible,
-    customSort: props.customSort,
-    customSearch: props.customSearch,
-    sticky: props.sticky,
-    headerSelectable: props.headerSelectable,
+const providedData = computed<TableColumnComponent<T>>(() => ({
+    ...props,
     $el: vm.proxy,
     $slots: vm.slots,
     style: style.value,

packages/oruga/src/components/table/examples/sticky.vue

@@ -10,8 +10,8 @@ const columns = ref<TableColumn[]>([
         width: "40",
         numeric: true,
         sticky: true,
-        thAttrs: () => ({ class: "is-sticky-column-one" }),
-        tdAttrs: () => ({ class: "is-sticky-column-one" }),
+        thAttrs: { class: "is-sticky-column-one" },
+        tdAttrs: { class: "is-sticky-column-one" },
     },
     {
         field: "user.first_name",
@@ -26,8 +26,8 @@ const columns = ref<TableColumn[]>([
         label: "Date",
         position: "centered",
         sticky: true,
-        thAttrs: () => ({ class: "is-sticky-column-two" }),
-        tdAttrs: () => ({ class: "is-sticky-column-two" }),
+        thAttrs: { class: "is-sticky-column-two" },
+        tdAttrs: { class: "is-sticky-column-two" },
     },
     {
         field: "gender",