vueless 0.0.210 → 0.0.211

package/ui.data-table/composables/attrs.composable.js

@@ -3,263 +3,198 @@ import defaultConfig from "../configs/default.config";
 import { cva, cx } from "../../service.ui";
 import { computed } from "vue";
 
-export function useAttrs(
+export default function useAttrs(
   props,
   { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const {
-    stickyHeaderCell,
-    headerCell,
-    footerRow,
-    bodyCell,
-    headerCellGeneral,
-    stickyHeaderCounter,
-    headerCounter,
-  } = config.value;
-
-  const cvaHeaderCellGeneral = cva({
-    base: headerCellGeneral.base,
-    variants: headerCellGeneral.variants,
-    compoundVariants: headerCellGeneral.compoundVariants,
-  });
-
-  const cvaCustomHeaderItem = cva({
-    base: stickyHeaderCell.base,
-    variants: stickyHeaderCell.variants,
-    compoundVariants: stickyHeaderCell.compoundVariants,
-  });
-
-  const cvaHeaderCell = cva({
-    base: headerCell.base,
-    variants: headerCell.variants,
-    compoundVariants: headerCell.compoundVariants,
-  });
-
-  const cvaFooterRow = cva({
-    base: footerRow.base,
-    variants: footerRow.variants,
-    compoundVariants: footerRow.compoundVariants,
-  });
-
-  const cvaBodyCell = cva({
-    base: bodyCell.base,
-    variants: bodyCell.variants,
-    compoundVariants: bodyCell.compoundVariants,
-  });
-
-  const cvaStickyHeaderCounter = cva({
-    base: stickyHeaderCounter.base,
-    variants: stickyHeaderCounter.variants,
-    compoundVariants: stickyHeaderCounter.compoundVariants,
-  });
-
-  const cvaHeaderCounter = cva({
-    base: headerCounter.base,
-    variants: headerCounter.variants,
-    compoundVariants: headerCounter.compoundVariants,
-  });
-
-  const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
-  const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
-  const footerRowClasses = computed(() => cvaFooterRow({ compact: props.compact }));
-  const bodyCellClasses = computed(() => cvaBodyCell({ compact: props.compact }));
-  const headerCellGeneralClasses = computed(() => cvaHeaderCellGeneral({ compact: props.compact }));
-  const headerCounterClasses = computed(() => cvaHeaderCounter({ compact: props.compact }));
-  const stickyHeaderCounterClasses = computed(() =>
-    cvaStickyHeaderCounter({ compact: props.compact }),
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
-  const stickyHeaderCellAttrsRaw = getAttrs("stickyHeaderCell", {
-    classes: stickyHeaderCellClasses,
-  });
-  const headerCounterAttrsRaw = getAttrs("headerCounter", { classes: headerCounterClasses });
-  const stickyHeaderCounterAttrsRaw = getAttrs("stickyHeaderCounter", {
-    classes: stickyHeaderCounterClasses,
-  });
-  const stickyHeaderActionsCounterAttrsRaw = getAttrs("stickyHeaderActionsCounter");
-  const stickyHeaderCheckboxAttrs = getAttrs("stickyHeaderCheckbox", {
-    isComponent: true,
-  });
-  const stickyHeaderActionsCheckboxAttrs = getAttrs("stickyHeaderActionsCheckbox", {
-    isComponent: true,
-  });
-  const stickyHeaderLoaderAttrs = getAttrs("stickyHeaderLoader", { isComponent: true });
-  const tableWrapperAttrs = getAttrs("tableWrapper");
-  const tableAttrs = getAttrs("table");
-  const headerAttrs = getAttrs("header");
-  const headerRowAttrsRaw = getAttrs("headerRow");
-  const headerCellAttrsRaw = getAttrs("headerCell", { classes: headerCellClasses });
-  const headerCheckboxAttrs = getAttrs("headerCheckbox", { isComponent: true });
-  const headerLoaderAttrs = getAttrs("headerLoader", { isComponent: true });
-  const bodyCellNestedExpandIconAttrs = getAttrs("bodyCellNestedExpandIcon", { isComponent: true });
-  const bodyCellNestedCollapseIconAttrs = getAttrs("bodyCellNestedCollapseIcon", {
-    isComponent: true,
-  });
-  const bodyAttrs = getAttrs("body");
-  const bodyCellAttrsRaw = getAttrs("bodyCell", { classes: bodyCellClasses });
-  const bodyCheckboxAttrs = getAttrs("bodyCheckbox", { isComponent: true });
-  const bodyCellDateSeparatorAttrs = getAttrs("bodyCellDateSeparator");
-  const bodyDateSeparatorAttrs = getAttrs("bodyDateSeparator", { isComponent: true });
-  const bodyCellNestedAttrs = getAttrs("bodyCellNested");
-  const bodyCellSecondaryAttrs = getAttrs("bodyCellSecondary");
-  const bodyCellSecondaryEmptyAttrs = getAttrs("bodyCellSecondaryEmpty");
-  const footerAttrsRaw = getAttrs("footer");
-  const footerRowAttrs = getAttrs("footerRow", { classes: footerRowClasses });
-  const stickyFooterRowAttrs = getAttrs("stickyFooterRow");
-  const bodyEmptyStateAttrs = getAttrs("bodyEmptyState", { isComponent: true });
-  const bodyRowBeforeAttrsRaw = getAttrs("bodyRowBefore");
-  const bodyRowBeforeCellAttrsRaw = getAttrs("bodyRowBeforeCell");
-  const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
-  const bodyRowAfterCellAttrsRaw = getAttrs("bodyRowAfterCell");
-  const bodyCellPrimaryAttrs = getAttrs("bodyCellPrimary");
-
-  const bodyRowAttrsRaw = getAttrs("bodyRow");
-
-  const bodyCellAttrs = computed(() => (classes) => ({
-    ...bodyCellAttrsRaw.value,
-    class: cx([bodyCellAttrsRaw.value.class, classes || ""]),
-  }));
-
-  const bodyRowBeforeCellAttrs = computed(() => ({
-    ...bodyRowBeforeAttrsRaw.value,
-    class: cx([bodyCellAttrs.value().class, bodyRowBeforeCellAttrsRaw.value.class]),
-  }));
-
-  const bodyRowAfterCellAttrs = computed(() => ({
-    ...bodyRowAfterCellAttrsRaw.value,
-    class: cx([bodyCellAttrs.value().class, bodyRowAfterCellAttrsRaw.value.class]),
-  }));
-
-  const bodyRowAttrs = computed(() => (row) => ({
-    ...bodyRowAttrsRaw.value,
-    class: cx([bodyRowAttrsRaw.value.class, row]),
-  }));
-
-  const headerCellAttrs = computed(() => (classes) => ({
-    ...headerCellAttrsRaw.value,
-    class: cx([headerCellGeneralClasses.value, headerCellAttrsRaw.value.class, classes]),
-  }));
-
-  const stickyHeaderActionsCounterAttrs = computed(() => ({
-    ...stickyHeaderActionsCounterAttrsRaw.value,
-    class: cx([config.value.headerCounterGeneral, stickyHeaderActionsCounterAttrsRaw.value.class]),
-  }));
-
-  const stickyHeaderCounterAttrs = computed(() => ({
-    ...stickyHeaderCounterAttrsRaw.value,
-    class: cx([config.value.headerCounterGeneral, stickyHeaderCounterAttrsRaw.value.class]),
-  }));
-
-  const headerCounterAttrs = computed(() => ({
-    ...headerCounterAttrsRaw.value,
-    class: cx([config.value.headerCounterGeneral, headerCounterAttrsRaw.value.class]),
-  }));
-
-  const bodyRowBeforeAttrs = computed(() => ({
-    ...bodyRowBeforeAttrsRaw.value,
-    class: cx([
-      bodyRowBeforeAttrsRaw.value.class,
-      tableRows.value[0]?.isChecked ? config.value.bodyRowChecked : "",
-    ]),
-  }));
-
-  const headerRowAttrs = computed(() => {
-    return {
-      ...headerRowAttrsRaw.value,
-      class: cx([headerRowAttrsRaw.value.class]),
-    };
+  const headerCellGeneralClasses = computed(() => {
+    return cva(config.value.headerCellGeneral)({
+      ...props,
+      compact: Boolean(props.compact),
+    });
   });
 
-  const stickyHeaderAttrs = computed(() => {
-    const actionHeaderClasses = cx([
-      stickyHeaderAttrsRaw.value.class,
-      config.value.stickyHeaderActions,
-    ]);
-
-    const actionHeaderStickyClasses = cx([
-      config.value.stickyHeaderActions,
-      stickyHeaderAttrsRaw.value.class,
-    ]);
-
-    const stickyHeaderRowClasses = cx([
-      stickyHeaderAttrsRaw.value.class,
-      config.value.stickyHeaderRow,
-    ]);
-
-    return {
-      ...stickyHeaderAttrsRaw.value,
-      class: cx([
-        isShownActionsHeader.value && actionHeaderClasses,
-        isShownActionsHeader.value && isHeaderSticky.value && actionHeaderStickyClasses,
-        !isShownActionsHeader.value && isHeaderSticky.value && stickyHeaderRowClasses,
-      ]),
-    };
+  const bodyCellClasses = computed(() => {
+    return cva(config.value.bodyCell)({
+      ...props,
+      compact: Boolean(props.compact),
+    });
   });
 
-  const footerClassesAttrs = computed(() => ({
-    ...footerAttrsRaw.value,
-    class: cx([footerAttrsRaw.value.class, isFooterSticky.value && config.value.stickyFooter]),
-  }));
-
-  const stickyHeaderCellAttrs = computed(() => (classes) => ({
-    ...stickyHeaderCellAttrsRaw.value,
-    class: cx([headerCellGeneralClasses.value, stickyHeaderCellAttrsRaw.value.class, classes]),
-  }));
-
-  const bodyRowDateSeparatorAttrs = (rowIndex) => {
-    const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
-    const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
-
-    const activeClass =
-      (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
-        ? config.value.bodyRowChecked
-        : "";
-
-    return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
-  };
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          compact: Boolean(props.compact),
+        });
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "stickyHeader") {
+      const stickyHeaderAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => {
+        const actionHeaderClasses = cx([
+          stickyHeaderAttrs.value.class,
+          config.value.stickyHeaderActions,
+        ]);
+
+        const actionHeaderStickyClasses = cx([
+          config.value.stickyHeaderActions,
+          stickyHeaderAttrs.value.class,
+        ]);
+
+        const stickyHeaderRowClasses = cx([
+          stickyHeaderAttrs.value.class,
+          config.value.stickyHeaderRow,
+        ]);
+
+        return {
+          ...stickyHeaderAttrs,
+          class: cx([
+            isShownActionsHeader.value && actionHeaderClasses,
+            isShownActionsHeader.value && isHeaderSticky.value && actionHeaderStickyClasses,
+            !isShownActionsHeader.value && isHeaderSticky.value && stickyHeaderRowClasses,
+          ]),
+        };
+      });
+    }
+
+    if (key === "stickyHeaderCell") {
+      const stickyHeaderCellAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => (classes) => ({
+        ...stickyHeaderCellAttrs,
+        class: cx([headerCellGeneralClasses.value, stickyHeaderCellAttrs.value.class, classes]),
+      }));
+    }
+
+    if (key === "headerCounter") {
+      const headerCounterAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...headerCounterAttrs.value,
+        class: cx([config.value.headerCounterGeneral, headerCounterAttrs.value.class]),
+      }));
+    }
+
+    if (key === "stickyHeaderCounter") {
+      const stickyHeaderCounterAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...stickyHeaderCounterAttrs.value,
+        class: cx([config.value.headerCounterGeneral, stickyHeaderCounterAttrs.value.class]),
+      }));
+    }
+
+    if (key === "stickyHeaderActionsCounter") {
+      const stickyHeaderActionsCounterAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...stickyHeaderActionsCounterAttrs.value,
+        class: cx([config.value.headerCounterGeneral, stickyHeaderActionsCounterAttrs.value.class]),
+      }));
+    }
+
+    if (key === "headerCell") {
+      const headerCellAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => (classes) => ({
+        ...headerCellAttrs,
+        class: cx([headerCellGeneralClasses.value, headerCellAttrs.value.class, classes]),
+      }));
+    }
+
+    if (key === "bodyCell") {
+      const bodyCellAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => (classes) => ({
+        ...bodyCellAttrs,
+        class: cx([bodyCellClasses.value, bodyCellAttrs.value.class, classes]),
+      }));
+    }
+
+    if (key === "bodyRowBeforeCell") {
+      const bodyRowBeforeCellAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...bodyRowBeforeCellAttrs.value,
+        class: cx([bodyCellClasses.value, bodyRowBeforeCellAttrs.value.class]),
+      }));
+    }
+
+    if (key === "bodyRowAfterCell") {
+      const bodyRowAfterCellAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...bodyRowAfterCellAttrs.value,
+        class: cx([bodyCellClasses.value, bodyRowAfterCellAttrs.value.class]),
+      }));
+    }
+
+    if (key === "bodyRow") {
+      const bodyRowAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => (row) => ({
+        ...bodyRowAttrs,
+        class: cx([bodyRowAttrs.value.class, row]),
+      }));
+    }
+
+    if (key === "footer") {
+      const footerAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...footerAttrs.value,
+        class: cx([footerAttrs.value.class, isFooterSticky.value && config.value.stickyFooter]),
+      }));
+    }
+
+    if (key === "bodyRowBefore") {
+      const bodyRowBeforeAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...bodyRowBeforeAttrs.value,
+        class: cx([
+          bodyRowBeforeAttrs.value.class,
+          tableRows.value[0]?.isChecked ? config.value.bodyRowChecked : "",
+        ]),
+      }));
+    }
+
+    if (key === "bodyRowDateSeparator") {
+      attrs[`${key}Attrs`] = (rowIndex) => {
+        const isCheckedRowBefore = tableRows.value[rowIndex - 1]?.isChecked;
+        const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
+
+        const activeClass =
+          (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
+            ? config.value.bodyRowChecked
+            : "";
+
+        return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
+      };
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    stickyHeaderCellAttrs,
-    stickyHeaderAttrs,
-    tableWrapperAttrs,
-    headerCellAttrs,
-    headerRowAttrs,
-    bodyRowAttrs,
-    footerClassesAttrs,
-    bodyRowAfterAttrs,
-    bodyRowAfterCellAttrs,
-    bodyRowBeforeAttrs,
-    bodyRowBeforeCellAttrs,
-    bodyRowDateSeparatorAttrs,
-    bodyCellAttrs,
-    stickyHeaderCounterAttrs,
-    stickyHeaderActionsCounterAttrs,
-    headerCounterAttrs,
-    headerCheckboxAttrs,
-    bodyCheckboxAttrs,
-    bodyCellNestedCollapseIconAttrs,
-    bodyCellNestedExpandIconAttrs,
-    bodyEmptyStateAttrs,
-    bodyDateSeparatorAttrs,
-    bodyCellDateSeparatorAttrs,
-    stickyHeaderCheckboxAttrs,
-    stickyHeaderActionsCheckboxAttrs,
-    stickyHeaderLoaderAttrs,
-    tableAttrs,
-    headerLoaderAttrs,
-    bodyAttrs,
-    bodyCellNestedAttrs,
-    bodyCellSecondaryAttrs,
-    bodyCellSecondaryEmptyAttrs,
-    footerRowAttrs,
-    stickyFooterRowAttrs,
     hasSlotContent,
-    headerAttrs,
-    bodyCellPrimaryAttrs,
   };
 }

package/ui.data-table/configs/default.config.js

@@ -12,7 +12,7 @@ export default /*tw*/ {
   stickyHeader: "fixed top-0 flex items-center z-30 overflow-hidden rounded-none border",
   stickyHeaderRow: "border-gray-200 bg-white",
   stickyHeaderCell: "flex-none whitespace-nowrap",
-  stickyHeaderCheckbox: "",
+  stickyHeaderCheckbox: "{UCheckbox}",
   stickyHeaderCounter: {
     base: "absolute top-5 left-11 bg-gradient-to-r from-white from-80%",
     variants: {
@@ -21,9 +21,9 @@ export default /*tw*/ {
       },
     },
   },
-  stickyHeaderLoader: "",
+  stickyHeaderLoader: "{ULoader}",
   stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
-  stickyHeaderActionsCheckbox: "",
+  stickyHeaderActionsCheckbox: "{UCheckbox}",
   stickyHeaderActionsCounter: "-ml-2",
   tableWrapper: "border border-gray-200 rounded-lg bg-white",
   table: "min-w-full border-none text-sm w-full table-fixed",
@@ -31,7 +31,7 @@ export default /*tw*/ {
   headerRow: "",
   headerCell: "",
   headerCellCheckbox: "w-10",
-  headerCheckbox: "",
+  headerCheckbox: "{UCheckbox}",
   headerCounter: {
     base: "absolute top-5 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
     variants: {
@@ -40,7 +40,7 @@ export default /*tw*/ {
       },
     },
   },
-  headerLoader: "absolute !top-auto",
+  headerLoader: "{ULoader} absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
   bodyRowChecked: "bg-gray-100 transition",
@@ -64,18 +64,18 @@ export default /*tw*/ {
   bodyCellDateSeparator: "",
   bodyCellNested: "mr-2 mt-0.5",
   bodyCellNestedExpandIcon: {
-    wrapper: "rounded-sm",
+    wrapper: "{UIcon} rounded-sm",
     container: "bg-gray-200",
   },
   bodyCellNestedExpandIconName: "add",
   bodyCellNestedCollapseIcon: {
-    wrapper: "rounded-sm",
+    wrapper: "{UIcon} rounded-sm",
     container: "bg-gray-200",
   },
   bodyCellNestedCollapseIconName: "remove",
-  bodyCheckbox: "",
-  bodyDateSeparator: "",
-  bodyEmptyState: "my-8",
+  bodyCheckbox: "{UCheckbox}",
+  bodyDateSeparator: "{UDivider}",
+  bodyEmptyState: "{UEmpty} my-8",
   footer: "group/footer border-t border-solid border-gray-200",
   footerRow: {
     base: "[&_td]:p-[1.125rem] [&_td]:py-5 first:[&_td]:p-5",

package/ui.data-table/index.vue

@@ -24,7 +24,10 @@
           v-text="selectedRows.length"
         />
 
-        <!-- @slot Use it to add action buttons instead of table row when some rows are selected. -->
+        <!--
+          @slot Use it to add action buttons instead of table row when some rows are selected.
+          @binding {array} selected-rows
+        -->
         <slot name="header-actions" :selected-rows="selectedRows" />
       </template>
 
@@ -52,7 +55,11 @@
           v-bind="stickyHeaderCellAttrs(column.thClass)"
         >
           <template v-if="hasSlotContent($slots[`header-${column.key}`])">
-            <!-- @slot Use it to customise table column. -->
+            <!--
+              @slot Use it to customise table column.
+              @binding {string} name
+              @binding {number} column
+            -->
             <slot :name="`header-${column.key}`" :column="column" />
           </template>
 
@@ -60,7 +67,11 @@
             {{ column.label }}
           </template>
 
-          <!-- @slot Use it to add content after table column. -->
+          <!--
+            @slot Use it to add something after the table column.
+            @binding {string} name
+            @binding {number} column
+          -->
           <slot :name="`header-${column.key}-after`" :column="column" />
         </div>
       </template>
@@ -81,7 +92,10 @@
               :colspan="colsCount"
               v-bind="headerCellAttrs()"
             >
-              <!-- @slot Use it to add something before header row. -->
+              <!--
+                @slot Use it to add something before header row.
+                @binding {number} cols-count
+              -->
               <slot name="before-header" :cols-count="colsCount" />
             </td>
           </tr>
@@ -110,7 +124,11 @@
               :key="index"
               v-bind="headerCellAttrs(column.thClass)"
             >
-              <!-- @slot Use it to customise table column. -->
+              <!--
+                @slot Use it to customise table column.
+                @binding {string} name
+                @binding {number} column
+              -->
               <slot
                 v-if="hasSlotContent($slots[`header-${column.key}`])"
                 :name="`header-${column.key}`"
@@ -121,7 +139,11 @@
                 {{ column.label }}
               </template>
 
-              <!-- @slot Use it to add content after table column. -->
+              <!--
+                @slot Use it to add something after the table column.
+                @binding {string} name
+                @binding {number} column
+              -->
               <slot :name="`header-${column.key}-after`" :column="column" />
             </th>
           </tr>
@@ -211,18 +233,24 @@
           </tr>
         </tbody>
 
-        <tfoot v-if="hasSlotContent($slots['footer'])" v-bind="footerClassesAttrs">
+        <tfoot v-if="hasSlotContent($slots['footer'])" v-bind="footerAttrs">
           <tr ref="footerRowRef" v-bind="footerRowAttrs">
             <td v-if="selectable" />
 
-            <!-- @slot Use it to add something in table footer. -->
+            <!--
+              @slot Use it to add something into the table footer.
+              @binding {number} cols-count
+            -->
             <slot name="footer" :cols-count="colsCount" />
           </tr>
 
           <tr ref="stickyFooterRowRef" :style="tableRowWidthStyle" v-bind="stickyFooterRowAttrs">
             <td v-if="selectable" />
 
-            <!-- @slot Use it to add something in table footer. -->
+            <!--
+              @slot Use it to add something into the table footer.
+              @binding {number} cols-count
+            -->
             <slot name="footer" :cols-count="colsCount" />
           </tr>
         </tfoot>
@@ -265,7 +293,7 @@ import {
 
 import { PX_IN_REM } from "../service.ui";
 import { UTable } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
 
 /* Should be a string for correct web-types gen */
@@ -353,7 +381,19 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["clickRow", "update:rows"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the row is clicked.
+   * @property {object} row
+   */
+  "clickRow",
+
+  /**
+   * Triggers when table rows are updated.
+   * @property {array} tableRows
+   */
+  "update:rows",
+]);
 
 defineExpose({ clearSelectedItems });
 
@@ -444,7 +484,7 @@ const {
   bodyRowBeforeAttrs,
   bodyRowBeforeCellAttrs,
   bodyRowAttrs,
-  footerClassesAttrs,
+  footerAttrs,
   bodyRowDateSeparatorAttrs,
   headerCellAttrs,
   bodyCellAttrs,