@rotki/ui-library 2.8.1 → 2.8.2

package/dist/components/tables/RuiDataTable.vue2.js

@@ -0,0 +1,943 @@
+import { defineComponent, useSlots, toRefs, computed, ref, watch, onMounted, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, unref, isRef, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, Fragment, toDisplayString, createTextVNode, Transition } from "vue";
+import RuiButton from "../buttons/button/RuiButton.vue.js";
+import RuiCheckbox from "../forms/checkbox/RuiCheckbox.vue.js";
+import RuiIcon from "../icons/RuiIcon.vue.js";
+import RuiTooltip from "../overlays/tooltip/RuiTooltip.vue.js";
+import RuiProgress from "../progress/RuiProgress.vue.js";
+import RuiExpandButton from "./RuiExpandButton.vue.js";
+import RuiTableHead from "./RuiTableHead.vue.js";
+import RuiTablePagination from "./RuiTablePagination.vue.js";
+import noDataPlaceholder from "./table_no_data_placeholder.svg.js";
+import noDataPlaceholderDark from "./table_no_data_placeholder_dark.svg.js";
+import { assert } from "../../utils/assert.js";
+import { useTable } from "../../composables/defaults/table.js";
+import { watchImmediate, isDefined } from "@vueuse/core";
+import "scule";
+import { get, set } from "@vueuse/shared";
+import { useRotkiTheme } from "../../composables/theme.js";
+import { useStickyTableHeader } from "../../composables/sticky-header.js";
+const _hoisted_1 = ["colspan"];
+const _hoisted_2 = { class: "flex items-center gap-2" };
+const _hoisted_3 = ["colspan", "rowspan"];
+const _hoisted_4 = ["colspan"];
+const _hoisted_5 = { key: 1 };
+const _hoisted_6 = ["colspan"];
+const _hoisted_7 = ["colspan"];
+const _hoisted_8 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiDataTable"
+  },
+  __name: "RuiDataTable",
+  props: {
+    rows: {},
+    rowAttr: {},
+    modelValue: { default: void 0 },
+    search: { default: "" },
+    itemsPerPage: { default: 10 },
+    pagination: { default: void 0 },
+    paginationModifiers: { default: void 0 },
+    sort: { default: void 0 },
+    sortModifiers: { default: void 0 },
+    cols: { default: void 0 },
+    columnAttr: { default: "label" },
+    dense: { type: Boolean, default: false },
+    outlined: { type: Boolean, default: false },
+    striped: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    disablePerPage: { type: Boolean, default: false },
+    empty: { default: () => ({ label: "No item found" }) },
+    hideDefaultHeader: { type: Boolean, default: false },
+    hideDefaultFooter: { type: Boolean, default: false },
+    rounded: { default: "md" },
+    expanded: { default: void 0 },
+    singleExpand: { type: Boolean, default: false },
+    stickyHeader: { type: Boolean, default: false },
+    stickyOffset: { default: void 0 },
+    globalItemsPerPage: { type: Boolean, default: void 0 },
+    group: { default: void 0 },
+    groupExpandButtonPosition: { default: "start" },
+    collapsed: { default: void 0 },
+    disabledRows: { default: void 0 },
+    multiPageSelect: { type: Boolean, default: false },
+    scroller: { default: void 0 },
+    itemClass: { type: [Function, String], default: "" }
+  },
+  emits: ["update:model-value", "update:expanded", "update:pagination", "update:sort", "update:options", "update:group", "update:collapsed", "copy:group"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const { stickyHeader, collapsed, modelValue, disabledRows } = toRefs(props);
+    const tableDefaults = useTable();
+    const { isDark } = useRotkiTheme();
+    const stickyHeaderOffset = computed(() => props.stickyOffset !== void 0 ? props.stickyOffset : get(tableDefaults.stickyOffset));
+    function isRow(item) {
+      return !("__header__" in item);
+    }
+    function isHeaderSlot(slotName) {
+      return slotName.startsWith("header.");
+    }
+    const { stick, table, tableScroller } = useStickyTableHeader(
+      stickyHeader,
+      get(stickyHeaderOffset)
+    );
+    const expandable = computed(() => props.expanded && slots["expanded-item"]);
+    const headerSlots = computed(
+      () => Object.keys(slots).filter(isHeaderSlot)
+    );
+    const globalItemsPerPageSettings = computed(() => {
+      if (props.globalItemsPerPage !== void 0)
+        return props.globalItemsPerPage;
+      return get(tableDefaults.globalItemsPerPage);
+    });
+    const getKeys = (t) => Object.keys(t);
+    const groupKeys = computed(() => {
+      const groupBy = props.group;
+      if (!groupBy) {
+        return [];
+      }
+      if (!Array.isArray(groupBy)) {
+        return [groupBy];
+      }
+      return groupBy;
+    });
+    const groupKey = computed(() => get(groupKeys).join(":"));
+    const isGrouped = computed(() => !!get(groupKey));
+    const columns = computed(() => {
+      const data = props.cols ?? getKeys(props.rows[0] ?? {}).map(
+        (key) => ({
+          key,
+          [props.columnAttr]: String(key)
+        })
+      );
+      const hasExpandColumn = data.some((row) => row.key === "expand");
+      if (get(expandable) && !hasExpandColumn) {
+        return [
+          ...data,
+          {
+            key: "expand",
+            sortable: false,
+            class: "w-16",
+            cellClass: "!py-0 w-16",
+            align: "end"
+          }
+        ];
+      }
+      const groupByKeys = get(groupKeys);
+      if (groupByKeys.length === 0)
+        return data;
+      return data.filter(
+        (column) => !groupByKeys.includes(column.key)
+      );
+    });
+    const itemsLength = ref(0);
+    const selectedData = computed({
+      get() {
+        return get(modelValue);
+      },
+      set(value) {
+        emit("update:model-value", value);
+      }
+    });
+    const internalSelectedData = ref([]);
+    watchImmediate(modelValue, (modelValue2) => {
+      set(internalSelectedData, modelValue2);
+    });
+    const rowIdentifier = computed(() => props.rowAttr);
+    const internalPaginationState = ref();
+    const collapsedRows = ref([]);
+    const pagination = computed(() => props.pagination);
+    watchImmediate(pagination, (pagination2) => {
+      set(internalPaginationState, pagination2);
+    });
+    watchImmediate(collapsed, (value) => {
+      set(collapsedRows, value ?? []);
+    });
+    const paginationData = computed({
+      get() {
+        const paginated = get(internalPaginationState);
+        if (!paginated) {
+          return {
+            total: get(itemsLength),
+            limit: props.itemsPerPage,
+            page: 1
+          };
+        }
+        if (props.paginationModifiers?.external)
+          return paginated;
+        return {
+          total: get(itemsLength),
+          limit: paginated.limit,
+          page: paginated.page,
+          limits: paginated.limits
+        };
+      },
+      set(value) {
+        set(internalPaginationState, value);
+        emit("update:pagination", value);
+        emit("update:options", {
+          pagination: value,
+          sort: props.sort
+        });
+      }
+    });
+    const sortData = computed({
+      get() {
+        return props.sort;
+      },
+      set(value) {
+        if (!props.multiPageSelect)
+          onToggleAll(false);
+        resetCheckboxShiftState();
+        emit("update:sort", value);
+        emit("update:options", {
+          sort: value,
+          pagination: get(pagination)
+        });
+      }
+    });
+    const sortedMap = computed(() => {
+      const mapped = {};
+      const sortBy = get(sortData);
+      if (!sortBy)
+        return mapped;
+      if (!Array.isArray(sortBy)) {
+        if (sortBy.column)
+          mapped[sortBy.column] = sortBy;
+        return mapped;
+      }
+      return sortBy.reduce((acc, curr) => {
+        if (!curr.column)
+          return acc;
+        return { ...acc, [curr.column]: curr };
+      }, mapped);
+    });
+    const searchData = computed(() => {
+      const query = props.search?.toLocaleLowerCase();
+      if (!query)
+        return props.rows;
+      return props.rows.filter(
+        (row) => getKeys(row).some(
+          (key) => `${row[key]}`.toLocaleLowerCase().includes(query)
+        )
+      );
+    });
+    const sorted = computed(() => {
+      const sortBy = get(sortData);
+      const data = [...get(searchData)];
+      if (!sortBy || props.sortModifiers?.external)
+        return data;
+      const sortOptions = { sensitivity: "accent", usage: "sort" };
+      const sort = (by) => {
+        data.sort((a, b) => {
+          const column = by.column;
+          if (!column)
+            return 0;
+          let [aValue, bValue] = [a[column], b[column]];
+          if (by.direction === "desc")
+            [aValue, bValue] = [bValue, aValue];
+          const aNumber = Number(aValue);
+          const bNumber = Number(bValue);
+          if (!isNaN(aNumber) && !isNaN(bNumber))
+            return aNumber - bNumber;
+          return `${aValue}`.localeCompare(
+            `${bValue}`,
+            void 0,
+            sortOptions
+          );
+        });
+      };
+      if (!Array.isArray(sortBy))
+        sort(sortBy);
+      else
+        [...sortBy].reverse().forEach(sort);
+      return data;
+    });
+    const mappedGroups = computed(() => {
+      if (!get(isGrouped)) {
+        return {};
+      }
+      const result = get(sorted);
+      const identifier = props.rowAttr;
+      return result.reduce((acc, row) => {
+        if (!isDefined(row[identifier]) || row[identifier] === "")
+          return acc;
+        const group = getRowGroup(row);
+        const groupVal = Object.values(group).filter(isDefined).join(",");
+        if (!acc[groupVal]) {
+          acc[groupVal] = [
+            {
+              __header__: true,
+              group,
+              identifier: groupVal
+            }
+          ];
+        }
+        acc[groupVal].push(row);
+        return acc;
+      }, {});
+    });
+    const grouped = computed(() => {
+      const result = get(sorted);
+      const groupByKey = get(groupKey);
+      if (!groupByKey) {
+        return result;
+      }
+      return Object.values(get(mappedGroups)).flatMap((grouped2) => grouped2);
+    });
+    const filtered = computed(() => {
+      const result = get(grouped);
+      const paginated = get(paginationData);
+      const limit = paginated.limit;
+      if (paginated && !props.paginationModifiers?.external) {
+        const start = (paginated.page - 1) * limit;
+        const end = start + limit;
+        const preGroups = result.slice(0, start + 1).filter((item) => !isRow(item));
+        const postGroups = result.slice(start + 1, end + preGroups.length).filter((item) => !isRow(item));
+        const data = result.slice(start + preGroups.length, end + preGroups.length + postGroups.length);
+        const nearestGroup = preGroups.at(-1);
+        if (data.length > 0) {
+          const firstItem = data[0];
+          assert(firstItem);
+          if (isRow(firstItem) && nearestGroup)
+            data.unshift(nearestGroup);
+          const lastItem = data.at(-1);
+          if (lastItem && !isRow(lastItem))
+            data.pop();
+        }
+        return data.filter((row) => !isHiddenRow(row));
+      }
+      return result.filter((row) => !isHiddenRow(row));
+    });
+    const visibleIdentifiers = computed(() => {
+      const selectBy = props.rowAttr;
+      if (!selectBy)
+        return [];
+      return get(filtered).filter(isRow).map((row) => row[selectBy]);
+    });
+    const isAllSelected = computed(() => {
+      const selectedRows = get(selectedData);
+      if (!selectedRows)
+        return false;
+      return selectedRows.length > 0 && get(visibleIdentifiers).every((id) => selectedRows.includes(id));
+    });
+    const indeterminate = computed(() => {
+      const selectedRows = get(selectedData);
+      if (!selectedRows)
+        return false;
+      return selectedRows.length > 0 && !get(isAllSelected);
+    });
+    const noData = computed(() => get(filtered).length === 0);
+    const colspan = computed(() => {
+      let columnLength = get(columns).length;
+      if (get(selectedData))
+        columnLength++;
+      return columnLength;
+    });
+    const isSortedBy = (key) => key in get(sortedMap);
+    function getSortIndex(key) {
+      const sortBy = get(sortData);
+      if (!sortBy || !Array.isArray(sortBy) || !isSortedBy(key))
+        return -1;
+      return sortBy.findIndex((sort) => sort.column === key) ?? -1;
+    }
+    function isSelected(identifier) {
+      const selection = get(selectedData);
+      if (!selection)
+        return false;
+      return selection.includes(identifier);
+    }
+    function isDisabledRow(rowKey) {
+      const identifier = props.rowAttr;
+      if (!identifier)
+        return false;
+      return !!get(disabledRows)?.some((disabledRow) => rowKey === disabledRow[identifier]);
+    }
+    function isExpanded(identifier) {
+      const { expanded } = props;
+      if (!expanded?.length)
+        return false;
+      return expanded.some((data) => data[props.rowAttr] === identifier);
+    }
+    function onToggleExpand(row) {
+      const { expanded } = props;
+      if (!expanded)
+        return;
+      const key = props.rowAttr;
+      const rowExpanded = isExpanded(row[key]);
+      if (props.singleExpand)
+        return emit("update:expanded", rowExpanded ? [] : [row]);
+      return emit(
+        "update:expanded",
+        rowExpanded ? expanded.filter((item) => item[key] !== row[key]) : [...expanded, row]
+      );
+    }
+    function getRowGroup(row) {
+      return get(groupKeys).reduce((acc, key) => ({ ...acc, [key]: row[key] }), {});
+    }
+    function getGroupRows(groupVal) {
+      if (!get(isGrouped))
+        return [];
+      const groupRows = get(mappedGroups)[groupVal];
+      assert(groupRows);
+      return groupRows.filter(isRow);
+    }
+    function compareGroupsFn(a, b) {
+      const group = get(groupKeys);
+      if (group.length === 0)
+        return false;
+      return group.every((key) => a[key] === b[key]);
+    }
+    function isExpandedGroup(value) {
+      return get(collapsedRows).every((row) => !compareGroupsFn(row, value));
+    }
+    function isHiddenRow(row) {
+      const identifier = props.rowAttr;
+      return get(isGrouped) && get(collapsedRows).some(
+        (value) => isRow(row) && row[identifier] === value[identifier]
+      );
+    }
+    function onToggleExpandGroup(group, value) {
+      if (!value)
+        return;
+      const collapsed2 = get(collapsedRows);
+      const groupExpanded = isExpandedGroup(group);
+      const groupRows = getGroupRows(value);
+      set(
+        collapsedRows,
+        groupExpanded ? [...collapsed2, ...groupRows] : collapsed2.filter((row) => !compareGroupsFn(row, group))
+      );
+      emit("update:collapsed", get(collapsedRows));
+    }
+    function onUngroup() {
+      set(collapsedRows, []);
+      emit("update:collapsed", []);
+      emit("update:group", Array.isArray(props.group) ? [] : void 0);
+    }
+    function onCopyGroup(value) {
+      emit("copy:group", value);
+    }
+    function onSort({
+      key,
+      direction
+    }) {
+      const sortBy = get(sortData);
+      if (!sortBy)
+        return;
+      if (!Array.isArray(sortBy)) {
+        if (isSortedBy(key)) {
+          const newDirection = !direction || direction === "asc" ? "desc" : "asc";
+          if (sortBy.direction === newDirection) {
+            set(sortData, { ...sortBy, column: void 0, direction: "asc" });
+          } else {
+            set(sortData, {
+              ...sortBy,
+              direction: sortBy.direction === "asc" ? "desc" : "asc"
+            });
+          }
+        } else {
+          set(sortData, { column: key, direction: direction || "asc" });
+        }
+        return;
+      }
+      if (isSortedBy(key)) {
+        const newDirection = !direction || direction === "asc" ? "desc" : "asc";
+        const index = getSortIndex(key);
+        const sortByCol = sortBy[index];
+        assert(sortByCol);
+        if (sortByCol.direction === newDirection)
+          sortBy.splice(index, 1);
+        else
+          sortByCol.direction = sortByCol.direction === "asc" ? "desc" : "asc";
+        set(sortData, sortBy);
+      } else {
+        set(sortData, [...sortBy, { column: key, direction: direction || "asc" }]);
+      }
+    }
+    function isSelectable(rowKey) {
+      return isSelected(rowKey) || !isDisabledRow(rowKey);
+    }
+    function mustSelect(rowKey) {
+      return isSelected(rowKey) && isDisabledRow(rowKey);
+    }
+    function onToggleAll(checked) {
+      const selectedRows = get(selectedData) ?? [];
+      if (!props.multiPageSelect) {
+        if (checked)
+          set(selectedData, get(visibleIdentifiers).filter(isSelectable));
+        else
+          set(selectedData, get(visibleIdentifiers).filter(mustSelect));
+      } else {
+        if (checked) {
+          set(
+            selectedData,
+            Array.from(/* @__PURE__ */ new Set(
+              [
+                ...selectedRows,
+                ...get(visibleIdentifiers).filter(isSelectable)
+              ]
+            ))
+          );
+        } else {
+          set(
+            selectedData,
+            selectedRows.filter((rowKey) => !get(visibleIdentifiers).includes(rowKey) || get(visibleIdentifiers).filter(mustSelect).includes(rowKey))
+          );
+        }
+      }
+    }
+    const shiftClicked = ref(false);
+    const lastSelectedIndex = ref(-1);
+    function resetCheckboxShiftState() {
+      set(shiftClicked, false);
+      set(lastSelectedIndex, -1);
+    }
+    function onSelect(checked, value, userAction = false) {
+      if (get(shiftClicked) && userAction)
+        return;
+      const selectedRows = get(internalSelectedData);
+      if (!selectedRows)
+        return false;
+      const selected = isSelected(value);
+      if (checked && !selected) {
+        set(internalSelectedData, [...selectedRows, value]);
+      } else if (!checked && selected) {
+        set(
+          internalSelectedData,
+          [...selectedRows].filter((r) => r !== value)
+        );
+      }
+      if (userAction)
+        set(selectedData, get(internalSelectedData));
+    }
+    function onCheckboxClick(event, value, index) {
+      const input = event.currentTarget.querySelector("input");
+      const nodeName = event.target.nodeName;
+      const shiftKey = event.shiftKey;
+      set(shiftClicked, shiftKey);
+      if (input && nodeName !== "INPUT") {
+        if (shiftKey) {
+          setTimeout(() => {
+            let lastIndex = get(lastSelectedIndex);
+            if (lastIndex === -1)
+              lastIndex = index;
+            const tableData = get(filtered);
+            const lastSelectedData = tableData[lastIndex];
+            assert(lastSelectedData);
+            if (isRow(lastSelectedData)) {
+              const id = get(rowIdentifier);
+              const valueToApply = isSelected(lastSelectedData[id]);
+              if (lastIndex === index) {
+                onSelect(!valueToApply, value);
+              } else {
+                const from = Math.min(lastIndex, index);
+                const to = Math.max(lastIndex, index);
+                for (let i = from; i <= to; i++) {
+                  const currSelectedData = tableData[i];
+                  assert(currSelectedData);
+                  if (isRow(currSelectedData) && !isDisabledRow(currSelectedData[id]))
+                    onSelect(valueToApply, currSelectedData[id]);
+                }
+              }
+              set(lastSelectedIndex, index);
+              set(selectedData, get(internalSelectedData));
+            }
+          }, 1);
+        } else {
+          set(lastSelectedIndex, index);
+        }
+      }
+    }
+    const search = computed(() => props.search);
+    function deselectRemovedRows() {
+      get(selectedData)?.forEach((key) => {
+        if (isSelected(key) && !get(visibleIdentifiers).includes(key))
+          onSelect(false, key, true);
+      });
+    }
+    function onPaginate() {
+      emit("update:expanded", []);
+      if (!props.multiPageSelect)
+        onToggleAll(false);
+      resetCheckboxShiftState();
+    }
+    function setInternalTotal(items) {
+      if (!props.paginationModifiers?.external)
+        set(itemsLength, items.filter(isRow).length);
+    }
+    function cellValue(row, key) {
+      return row[key];
+    }
+    watch(internalPaginationState, (pagination2) => {
+      if (pagination2?.limit && get(globalItemsPerPageSettings))
+        set(tableDefaults.itemsPerPage, pagination2.limit);
+    });
+    watch(tableDefaults.itemsPerPage, (itemsPerPage) => {
+      if (!get(globalItemsPerPageSettings))
+        return;
+      set(paginationData, {
+        ...get(paginationData),
+        limit: itemsPerPage
+      });
+    });
+    watch(search, () => {
+      set(paginationData, {
+        ...get(paginationData),
+        page: 1
+      });
+      onToggleAll(false);
+      resetCheckboxShiftState();
+    });
+    watch(sorted, (items) => {
+      if (!props.multiPageSelect)
+        deselectRemovedRows();
+      setInternalTotal(items);
+    });
+    watch(paginationData, (pagination2) => {
+      const { total, limit, page } = pagination2;
+      const maxPages = Math.ceil(total / limit);
+      if (maxPages > 0 && page > maxPages) {
+        set(paginationData, {
+          ...pagination2,
+          page: maxPages
+        });
+      }
+    });
+    onMounted(() => {
+      setInternalTotal(get(sorted));
+      if (!get(globalItemsPerPageSettings))
+        return;
+      set(paginationData, {
+        ...get(paginationData),
+        limit: get(tableDefaults.itemsPerPage)
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.wrapper,
+          _ctx.$style[`rounded__${__props.rounded}`],
+          { [_ctx.$style.outlined]: __props.outlined }
+        ])
+      }, [
+        unref(paginationData) && !__props.hideDefaultHeader ? (openBlock(), createBlock(RuiTablePagination, {
+          key: 0,
+          modelValue: unref(paginationData),
+          "onUpdate:modelValue": [
+            _cache[0] || (_cache[0] = ($event) => isRef(paginationData) ? paginationData.value = $event : null),
+            _cache[1] || (_cache[1] = ($event) => onPaginate())
+          ],
+          dense: __props.dense,
+          loading: __props.loading,
+          "disable-per-page": __props.disablePerPage,
+          "data-cy": "table-pagination"
+        }, null, 8, ["modelValue", "dense", "loading", "disable-per-page"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "tableScroller",
+          ref: tableScroller,
+          class: normalizeClass(_ctx.$style.scroller)
+        }, [
+          createElementVNode("table", {
+            ref_key: "table",
+            ref: table,
+            class: normalizeClass([_ctx.$style.table, { [_ctx.$style.dense]: __props.dense }]),
+            "aria-label": ""
+          }, [
+            createVNode(RuiTableHead, {
+              loading: __props.loading,
+              indeterminate: unref(indeterminate),
+              "capitalize-headers": !__props.cols,
+              colspan: unref(colspan),
+              "column-attr": __props.columnAttr,
+              columns: unref(columns),
+              dense: __props.dense,
+              "disable-check-all": !unref(filtered)?.length,
+              "is-all-selected": unref(isAllSelected),
+              "no-data": unref(noData),
+              selectable: !!unref(selectedData),
+              "sort-data": unref(sortData),
+              "sorted-map": unref(sortedMap),
+              stick: unref(stick),
+              "sticky-header": unref(stickyHeader),
+              onSort: _cache[2] || (_cache[2] = ($event) => onSort($event)),
+              "onSelect:all": _cache[3] || (_cache[3] = ($event) => onToggleAll($event))
+            }, createSlots({ _: 2 }, [
+              renderList(unref(headerSlots), (headerSlot) => {
+                return {
+                  name: headerSlot,
+                  fn: withCtx((slotData) => [
+                    renderSlot(_ctx.$slots, headerSlot, normalizeProps(guardReactiveProps(slotData)))
+                  ])
+                };
+              })
+            ]), 1032, ["loading", "indeterminate", "capitalize-headers", "colspan", "column-attr", "columns", "dense", "disable-check-all", "is-all-selected", "no-data", "selectable", "sort-data", "sorted-map", "stick", "sticky-header"]),
+            unref(stickyHeader) ? (openBlock(), createBlock(RuiTableHead, {
+              key: 0,
+              loading: __props.loading,
+              "capitalize-headers": !__props.cols,
+              colspan: unref(colspan),
+              "column-attr": __props.columnAttr,
+              columns: unref(columns),
+              dense: __props.dense,
+              "no-data": unref(noData),
+              selectable: !!unref(selectedData),
+              "sort-data": unref(sortData),
+              "sorted-map": unref(sortedMap),
+              "data-id": "head-clone",
+              class: "opacity-0 invisible"
+            }, createSlots({ _: 2 }, [
+              renderList(unref(headerSlots), (headerSlot) => {
+                return {
+                  name: headerSlot,
+                  fn: withCtx((slotData) => [
+                    renderSlot(_ctx.$slots, headerSlot, normalizeProps(guardReactiveProps(slotData)))
+                  ])
+                };
+              })
+            ]), 1032, ["loading", "capitalize-headers", "colspan", "column-attr", "columns", "dense", "no-data", "selectable", "sort-data", "sorted-map"])) : createCommentVNode("", true),
+            createElementVNode("tbody", {
+              class: normalizeClass([_ctx.$style.tbody, { [_ctx.$style["tbody--striped"] ?? ""]: __props.striped }])
+            }, [
+              slots["body.prepend"] ? renderSlot(_ctx.$slots, "body.prepend", {
+                key: 0,
+                colspan: unref(colspan)
+              }) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filtered), (row, index) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  !isRow(row) ? (openBlock(), createElementBlock("tr", {
+                    key: `row-${index}`,
+                    class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__group])
+                  }, [
+                    renderSlot(_ctx.$slots, "group.header", {
+                      colspan: unref(colspan),
+                      header: row,
+                      isOpen: isExpandedGroup(row.group),
+                      toggle: () => onToggleExpandGroup(row.group, row.identifier)
+                    }, () => [
+                      createElementVNode("td", {
+                        class: normalizeClass([[_ctx.$style.td], "!p-2"]),
+                        colspan: unref(colspan)
+                      }, [
+                        createElementVNode("div", _hoisted_2, [
+                          __props.groupExpandButtonPosition === "start" ? (openBlock(), createBlock(RuiExpandButton, {
+                            key: 0,
+                            expanded: isExpandedGroup(row.group),
+                            onClick: ($event) => onToggleExpandGroup(row.group, row.identifier)
+                          }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true),
+                          renderSlot(_ctx.$slots, "group.header.content", {
+                            groupKey: unref(groupKey),
+                            header: row
+                          }, () => [
+                            createElementVNode("span", null, toDisplayString(unref(groupKey)) + ": " + toDisplayString(row.identifier), 1),
+                            createVNode(RuiButton, {
+                              size: "sm",
+                              variant: "text",
+                              icon: "",
+                              onClick: ($event) => onCopyGroup({ key: unref(groupKey), value: row.group })
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(RuiIcon, {
+                                  name: "lu-copy",
+                                  size: "16"
+                                })
+                              ]),
+                              _: 1
+                            }, 8, ["onClick"])
+                          ]),
+                          createVNode(RuiTooltip, {
+                            popper: { placement: "top" },
+                            class: "ml-auto mr-2"
+                          }, {
+                            activator: withCtx(() => [
+                              createVNode(RuiButton, {
+                                size: "sm",
+                                variant: "text",
+                                icon: "",
+                                onClick: _cache[4] || (_cache[4] = ($event) => onUngroup())
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(RuiIcon, {
+                                    name: "lu-trash-2",
+                                    size: "14"
+                                  })
+                                ]),
+                                _: 1
+                              })
+                            ]),
+                            default: withCtx(() => [
+                              _cache[7] || (_cache[7] = createTextVNode(" Ungroup ", -1))
+                            ]),
+                            _: 1
+                          }),
+                          __props.groupExpandButtonPosition === "end" ? (openBlock(), createBlock(RuiExpandButton, {
+                            key: 1,
+                            expanded: isExpandedGroup(row.group),
+                            onClick: ($event) => onToggleExpandGroup(row.group, row.identifier)
+                          }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true)
+                        ])
+                      ], 10, _hoisted_1)
+                    ])
+                  ], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    (openBlock(), createElementBlock("tr", {
+                      key: `row-${index}`,
+                      class: normalizeClass([
+                        _ctx.$style.tr,
+                        { [_ctx.$style.tr__selected ?? ""]: isSelected(row[unref(rowIdentifier)]) },
+                        typeof __props.itemClass === "string" ? __props.itemClass : __props.itemClass(row)
+                      ])
+                    }, [
+                      unref(selectedData) ? (openBlock(), createElementBlock("td", {
+                        key: 0,
+                        class: normalizeClass(_ctx.$style.checkbox),
+                        colspan: "1",
+                        rowspan: "1"
+                      }, [
+                        createVNode(RuiCheckbox, {
+                          "data-cy": `table-toggle-check-${index}`,
+                          "model-value": isSelected(row[unref(rowIdentifier)]),
+                          disabled: isDisabledRow(row[unref(rowIdentifier)]),
+                          size: __props.dense ? "sm" : void 0,
+                          color: "primary",
+                          class: "select-none",
+                          "hide-details": "",
+                          "onUpdate:modelValue": ($event) => onSelect($event, row[unref(rowIdentifier)], true),
+                          onClick: ($event) => onCheckboxClick($event, row[unref(rowIdentifier)], index)
+                        }, null, 8, ["data-cy", "model-value", "disabled", "size", "onUpdate:modelValue", "onClick"])
+                      ], 2)) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(columns), (column, subIndex) => {
+                        return openBlock(), createElementBlock("td", {
+                          key: subIndex,
+                          class: normalizeClass([
+                            _ctx.$style.td,
+                            column.cellClass,
+                            _ctx.$style[`align__${column.align ?? "start"}`]
+                          ]),
+                          colspan: column.colspan ?? 1,
+                          rowspan: column.rowspan ?? 1
+                        }, [
+                          column.key === "expand" ? renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
+                            key: 0,
+                            column,
+                            row,
+                            index
+                          }, () => [
+                            !slots["item.expand"] ? (openBlock(), createBlock(RuiExpandButton, {
+                              key: 0,
+                              expanded: isExpanded(row[unref(rowIdentifier)]),
+                              onClick: ($event) => onToggleExpand(row)
+                            }, null, 8, ["expanded", "onClick"])) : createCommentVNode("", true)
+                          ]) : renderSlot(_ctx.$slots, `item.${column.key.toString()}`, {
+                            key: 1,
+                            column,
+                            index,
+                            row
+                          }, () => [
+                            createTextVNode(toDisplayString(cellValue(row, column.key)), 1)
+                          ])
+                        ], 10, _hoisted_3);
+                      }), 128))
+                    ], 2)),
+                    unref(expandable) && isExpanded(row[unref(rowIdentifier)]) ? (openBlock(), createElementBlock("tr", {
+                      key: `row-expand-${index}`,
+                      class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__expandable])
+                    }, [
+                      createElementVNode("td", {
+                        colspan: unref(colspan),
+                        class: normalizeClass([_ctx.$style.td])
+                      }, [
+                        renderSlot(_ctx.$slots, "expanded-item", {
+                          row,
+                          index
+                        })
+                      ], 10, _hoisted_4)
+                    ], 2)) : createCommentVNode("", true)
+                  ], 64))
+                ], 64);
+              }), 256)),
+              __props.loading && unref(noData) ? (openBlock(), createElementBlock("tr", _hoisted_5, [
+                createElementVNode("td", {
+                  class: normalizeClass(_ctx.$style.tbody__loader),
+                  colspan: unref(colspan)
+                }, [
+                  createVNode(RuiProgress, {
+                    color: "primary",
+                    variant: "indeterminate",
+                    circular: ""
+                  })
+                ], 10, _hoisted_6)
+              ])) : createCommentVNode("", true),
+              unref(noData) && __props.empty && !__props.loading ? (openBlock(), createElementBlock("tr", {
+                key: 2,
+                class: normalizeClass([_ctx.$style.tr, _ctx.$style.tr__empty])
+              }, [
+                createVNode(Transition, {
+                  appear: "",
+                  "enter-active-class": "transition ease-out duration-200 delay-200",
+                  "enter-from-class": "opacity-0 translate-y-1",
+                  "enter-to-class": "opacity-100 translate-y-0",
+                  "leave-active-class": "transition ease-in duration-150",
+                  "leave-from-class": "opacity-100 translate-y-0",
+                  "leave-to-class": "opacity-0 translate-y-1"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("td", {
+                      class: normalizeClass(_ctx.$style.td),
+                      colspan: unref(colspan)
+                    }, [
+                      renderSlot(_ctx.$slots, "no-data", {}, () => [
+                        createElementVNode("div", {
+                          class: normalizeClass(_ctx.$style.empty)
+                        }, [
+                          createElementVNode("img", {
+                            src: unref(isDark) ? unref(noDataPlaceholderDark) : unref(noDataPlaceholder),
+                            alt: __props.empty.label,
+                            class: "h-32"
+                          }, null, 8, _hoisted_8),
+                          __props.empty.label ? (openBlock(), createElementBlock("p", {
+                            key: 0,
+                            class: normalizeClass(_ctx.$style.empty__label)
+                          }, toDisplayString(__props.empty.label), 3)) : createCommentVNode("", true),
+                          renderSlot(_ctx.$slots, "empty-description", {}, () => [
+                            __props.empty.description ? (openBlock(), createElementBlock("p", {
+                              key: 0,
+                              class: normalizeClass(_ctx.$style.empty__description)
+                            }, toDisplayString(__props.empty.description), 3)) : createCommentVNode("", true)
+                          ])
+                        ], 2)
+                      ])
+                    ], 10, _hoisted_7)
+                  ]),
+                  _: 3
+                })
+              ], 2)) : createCommentVNode("", true),
+              slots["body.append"] ? renderSlot(_ctx.$slots, "body.append", {
+                key: 3,
+                colspan: unref(colspan)
+              }) : createCommentVNode("", true)
+            ], 2),
+            createElementVNode("tfoot", null, [
+              renderSlot(_ctx.$slots, "tfoot")
+            ])
+          ], 2)
+        ], 2),
+        unref(paginationData) && !__props.hideDefaultFooter ? (openBlock(), createBlock(RuiTablePagination, {
+          key: 1,
+          modelValue: unref(paginationData),
+          "onUpdate:modelValue": [
+            _cache[5] || (_cache[5] = ($event) => isRef(paginationData) ? paginationData.value = $event : null),
+            _cache[6] || (_cache[6] = ($event) => onPaginate())
+          ],
+          dense: __props.dense,
+          loading: __props.loading,
+          "disable-per-page": __props.disablePerPage,
+          "data-cy": "table-pagination"
+        }, null, 8, ["modelValue", "dense", "loading", "disable-per-page"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiDataTable.vue2.js.map