sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseDataTable.vue

@@ -1,966 +1,966 @@
-<template>
-  <BaseDataIterator
-    ref="dataIteratorRef"
-    :items="items"
-    :per-page="perPage"
-    :url="url"
-    :url-query="urlQuery"
-    :default-query="defaultQuery"
-    :searchable="searchable"
-    :actions="actions"
-    :history-mode="historyMode"
-    :layout="layout"
-    :size="sizeInternal.size.value"
-    :sections="sectionsInternal"
-    :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
-    :filters-position="filtersPosition"
-    :search="search"
-    @fetch="onFetch"
-    @will-scroll-top="onWillScrollTop"
-  >
-    <template #default="dataIteratorProps">
-      <BaseCard
-        clipped
-        class="w-full overflow-hidden"
-      >
-        <div v-if="newCheckedRows.length">
-          <div
-            class="flex items-center justify-between border-b border-slate-200 bg-slate-50 py-2 pl-3 pr-2 text-sm"
-          >
-            <div>
-              <span class="mr-3 text-slate-500">{{
-                t('sui.x_rows_selected', {
-                  count: newCheckedRows.length,
-                })
-              }}.</span>
-              <button
-                type="button"
-                class="mr-3 inline text-slate-800 underline underline-offset-1 decoration-slate-400 decoration-2 decoration-dashed"
-                @click="uncheckAll()"
-              >
-                {{ t('sui.deselect_all') }}
-              </button>
-            </div>
-            <BaseActionButtons
-              v-if="checkableActions?.length"
-              :actions="checkableActions"
-              :max-actions="2"
-              variant="button-group"
-            />
-          </div>
-        </div>
-
-        <BaseDataTableTemplate
-          ref="table"
-          :checked-rows="newCheckedRows"
-          :data="dataIteratorProps.items"
-          :loading="dataIteratorProps.loading"
-          :detailed="detailed"
-          :has-detailed-visible="hasDetailedVisible"
-          :checkable="checkable"
-          :is-row-checkable="isRowCheckable"
-          :sort-field="dataIteratorProps.sortField"
-          :sort-direction="dataIteratorProps.sortDirection"
-          :max-height="maxHeight"
-          :visible-columns="visibleColumns"
-          :column-order="columnOrder"
-          :size="sizeInternal.size.value"
-          :row-to="rowToInternal"
-          :row-href="rowHref"
-          :row-key="rowKey"
-          :row-selected="rowSelected"
-          :virtual-scrolling="virtualScrolling"
-          @update:checked-rows="onCheckedRowsUpdate"
-          @sort="dataIteratorProps.onSortChange"
-          @row-click="onRowClick"
-        >
-          <template #default>
-            <slot :data="dataIteratorProps.data" />
-
-            <BaseTableColumn
-              v-slot="{ row }"
-              :visible="rowActionsInternal.length > 0"
-              :toggle="false"
-              ignore-row-interactions
-              :custom-key="customKeyActions"
-              class="overflow-hidden"
-            >
-              <div class="flex justify-end gap-1 text-right w-full">
-                <div class="btn-group">
-                  <template
-                    v-for="rowAction in visibleRowActions"
-                    :key="rowAction.icon"
-                  >
-                    <BaseDataTableRowAction
-                      :row="row"
-                      :row-action="rowAction"
-                      :size="sizeInternal.size.value"
-                    />
-                  </template>
-                  <BaseMenu
-                    v-if="showRowActionMenu"
-                    :items="rowActionMenuItems(row)"
-                    :size="menuSize"
-                  >
-                    <template #button>
-                      <BaseButton
-                        as="div"
-                        :size="menuSize"
-                        icon="heroicons-solid:dots-vertical"
-                      />
-                    </template>
-                  </BaseMenu>
-                </div>
-              </div>
-            </BaseTableColumn>
-          </template>
-
-          <template #detail="propsDetail">
-            <slot
-              name="detail"
-              v-bind="propsDetail"
-            />
-          </template>
-
-          <template #checkedHeader="propsCheckHeader">
-            <slot
-              name="checkedHeader"
-              v-bind="propsCheckHeader"
-            />
-          </template>
-
-          <template #empty>
-            <div
-              v-if="dataIteratorProps.error"
-              class="flex items-center justify-center py-16"
-            >
-              <div class="flex flex-col items-center justify-center">
-                <BaseIcon
-                  icon="heroicons:x-circle"
-                  class="h-10 w-10 text-red-600"
-                />
-                <p class="mt-3 text-center text-sm text-slate-600">
-                  {{ t('sui.whoops') }}
-                </p>
-              </div>
-            </div>
-            <div
-              v-else-if="dataIteratorProps.firstLoad"
-            >
-              <slot name="empty">
-                <div class="flex items-center justify-center py-16">
-                  <div class="flex flex-col items-center">
-                    <BaseEmptyState class="w-24" />
-                    
-                    <p class="mt-3 text-center text-sm text-slate-600">
-                      {{ t('sui.nothing_found') }}
-                    </p>
-                  </div>
-                </div>
-              </slot>
-            </div>
-          </template>
-        </BaseDataTableTemplate>
-      </BaseCard>
-    </template>
-
-    <template
-      v-if="$slots.filters"
-      #filters="{ query, updateQuery, updateQueryValue, updateQueryValueDebounce }"
-    >
-      <slot
-        name="filters"
-        :query="query"
-        :update-query="updateQuery"
-        :update-query-value="updateQueryValue"
-        :update-query-value-debounce="updateQueryValueDebounce"
-      />
-    </template>
-
-    <template #sidebarTop="sidebarProps">
-      <slot
-        name="sidebarTop"
-        v-bind="sidebarProps"
-      />
-    </template>
-
-    <template #sidebarBottom="sidebarProps">
-      <slot
-        name="sidebarBottom"
-        v-bind="sidebarProps"
-      />
-    </template>
-
-    <template
-      v-if="toggleable"
-      #columns
-    >
-      <BaseDataIteratorSectionColumns
-        :table="table"
-        :visible-columns="visibleColumns"
-        :column-order="columnOrder"
-        @update:visible-columns="onUpdateVisibleColumn"
-        @update:column-order="onUpdateColumnOrder"
-      />
-    </template>
-
-    <template
-      v-for="section in sections"
-      :key="section.name"
-      #[section.name]
-    >
-      <slot :name="section.name" />
-    </template>
-  </BaseDataIterator>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { t } from '@/i18n';
-import {
-  Collection,
-  CollectionItem,
-  DataIteratorSection,
-  DataTableQuery,
-  PaginatedCollection,
-  ResourceCollection,
-  RowAction,
-} from '@/types';
-import { useDialogsStore } from '@/stores/dialogs';
-import { useSnackbarsStore } from '../stores/snackbars';
-import BaseDataIterator from './BaseDataIterator.vue';
-import { cloneDeep, isArray } from 'lodash';
-
-import BaseCard from './BaseCard.vue';
-import BaseTableColumn from './BaseTableColumn.vue';
-import BaseDataIteratorSectionColumns from './BaseDataIteratorSectionColumns.vue';
-import { BaseIcon, config } from '@/index';
-import BaseEmptyState from '../svg/BaseEmptyState.vue';
-import { RouteLocationRaw } from 'vue-router';
-import BaseMenu from './BaseMenu.vue';
-import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
-import { ActionItem } from '@/types';
-import { Size } from '@/utils/sizes';
-import { useInputSize } from '@/composables/inputSize';
-import BaseButton from './BaseButton.vue';
-import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
-import { customKeyActions } from '@/services/table/customKeyActions';
-import BaseActionButtons from './BaseActionButtons.vue';
-
-const http = config.http;
-
-const dialogs = useDialogsStore();
-const snackbars = useSnackbarsStore();
-
-const table = ref<null | InstanceType<typeof BaseDataTableTemplate>>(null);
-
-const props = defineProps({
-
-  /**
-   * Data table items
-   */
-  items: {
-    default: undefined,
-    type: Array as PropType<CollectionItem[] | undefined>,
-  },
-
-  /**
-   * Per page (only when using local data)
-   */
-  perPage: {
-    default: undefined,
-    type: Number,
-  },
-
-  /**
-   * Base URL from which to make requests
-   */
-  url: {
-    default: undefined,
-    type: String as PropType<string | undefined>,
-  },
-
-  /**
-   * Query params that always get applied
-   */
-  urlQuery: {
-    default: undefined,
-    type: Object as PropType<Record<string, any>>,
-  },
-
-  /**
-   * Query params that gets applied by default
-   * These may be overwritten by URL params generated by the data-table or filters
-   */
-  defaultQuery: {
-    default: undefined,
-    type: Object as PropType<DataTableQuery>,
-  },
-
-  /**
-   * Show url for router link
-   */
-  showUrl: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => RouteLocationRaw) | undefined
-    >,
-  },
-
-  rowTo: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => RouteLocationRaw) | undefined
-    >,
-  },
-
-  rowHref: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => string) | undefined
-    >,
-  },
-
-  rowSelected: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => boolean) | undefined
-    >,
-  },
-
-  onRowClick: {
-    default: undefined,
-    type: Function as PropType<(row: CollectionItem, index: number, event: MouseEvent) => void>,
-  },
-
-  /**
-   * Show/Hide edit button
-   */
-  editButton: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Edit url for router link
-   */
-  editUrl: {
-    default: undefined,
-    type: Function as PropType<
-      ((row: CollectionItem) => RouteLocationRaw) | undefined
-    >,
-  },
-
-  /**
-   * Show/Hide delete button
-   */
-  deleteButton: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Delete endpoint to delete an item
-   */
-  deleteUrl: {
-    default: undefined,
-    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
-  },
-
-  /**
-   * Delete label
-   */
-  deleteLabel: {
-    default: '',
-    type: String,
-  },
-
-  /**
-   * Delete message
-   */
-  deleteMessage: {
-    default: '',
-    type: String,
-  },
-
-  /**
-   * Show toggle-able details on each row
-   */
-  detailed: {
-    default: false,
-    type: Boolean,
-  },
-
-  /**
-   * Check is a given row has details
-   */
-  hasDetailedVisible: {
-    default() {
-      return true;
-    },
-    type: Function as PropType<(row: any) => boolean>,
-  },
-
-  /**
-   * Makes row checkable
-   */
-  checkable: {
-    default: false,
-    type: Boolean,
-  },
-
-  /**
-   * Actions on each row
-   */
-  checkableActions: {
-    default: undefined,
-    type: Array as PropType<ActionItem[]>,
-  },
-
-  /**
-   * Checked rows array
-   */
-  checkedRows: {
-    default() {
-      return [];
-    },
-    type: Array as PropType<Record<string, any>[]>,
-  },
-
-  /**
-   * Check is a given row is checkable
-   */
-  isRowCheckable: {
-    default() {
-      return () => true;
-    },
-    type: Function,
-  },
-
-  /**
-   * Adds a search bar
-   */
-  searchable: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Shows the column toggle utility
-   */
-  toggleable: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Actions
-   */
-  actions: {
-    default: undefined,
-    type: Array as PropType<ActionItem[]>,
-  },
-
-  /**
-   * Save data table state in URL
-   */
-  historyMode: {
-    default: false,
-    type: Boolean,
-  },
-
-  /*
-   * Max height (in px)
-   */
-  maxHeight: {
-    default: undefined,
-    type: Number,
-  },
-
-  /**
-   * Layout type
-   * 
-   * default: Layout with a sidebar
-   * compact: Layout without a sidebar, this is the default layout for mobile, even if you don't specify it
-   */
-  layout: {
-    default: 'default',
-    type: String as PropType<'default' | 'compact'>,
-  },
-
-  /**
-   * Overall size and spacing of the component
-   */
-  size: {
-    default: 'md',
-    type: String as PropType<Size>,
-  },
-
-  /**
-   * Data iterator sections
-   */
-  sections: {
-    default: undefined,
-    type: Array as PropType<DataIteratorSection[]>,
-  },
-
-  /**
-   * Row actions
-   */
-  rowActions: {
-    default: undefined,
-    type: Array as PropType<RowAction[]>,
-  },
-
-  /**
-   * Number of visible row actions
-   */
-  numberOfVisibleRowActions: {
-    default: 2,
-    type: Number,
-  },
-
-  /**
-   * Scroll to top when fetching new data
-   */
-  scrollTopOnFetch: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Filters position
-   */
-  filtersPosition: {
-    default: 'section',
-    type: String as PropType<'top' | 'section'>,
-  },
-
-  /**
-   * Row key. Used to identify rows for faster rendering. 
-   * If not provided, it will use the id, key or uuid, or create a hash from the row object.
-   */
-  rowKey: {
-    default: undefined,
-    type: Function as PropType<(row: CollectionItem) => string | number>,
-  },
-
-  /**
-   * Virtual scrolling
-   */
-  virtualScrolling: {
-    default: false,
-    type: Boolean,
-  },
-
-  /**
-   * Storage key to save visible columns and order settings.
-   * By default, it uses the current URL path, without query params.
-   */
-  storageKey: {
-    type: String,
-    default() {
-      return window.location.pathname;
-    },
-  },
-
-  /**
-   * Function to search local data
-   */
-  search: {
-    default: undefined,
-    type: Function as PropType<(items: Collection, search: string | null) => Collection>,
-  }
-});
-
-const sizeInternal = useInputSize(props.size);
-
-const menuSize = computed(() => {
-  if (sizeInternal.size.value == 'md') {
-    return 'sm';
-  }
-  if (sizeInternal.size.value == 'sm') {
-    return 'xs';
-  }
-  return 'xs';
-})
-
-const emit = defineEmits([
-  'delete',
-  'update:checked-rows',
-  'fetch',
-]);
-
-const dataIteratorRef = ref<null | InstanceType<typeof BaseDataIterator>>(null);
-
-const rowToInternal = computed(() => {
-  if (props.showUrl) {
-    console.warn('showUrl is deprecated, use rowTo instead');
-    return props.showUrl;
-  }
-
-  return props.rowTo;
-});
-
-/*
-|--------------------------------------------------------------------------
-| Gate helpers
-|--------------------------------------------------------------------------
-*/
-
-const gate = (row: CollectionItem, action: string): boolean => {
-  if (row.can && Object.prototype.hasOwnProperty.call(row.can, action)) {
-    return row.can[action];
-  }
-  return true;
-};
-
-const canUpdate = (row: CollectionItem): boolean => {
-  return gate(row, 'update');
-};
-
-const canDelete = (row: CollectionItem): boolean => {
-  return gate(row, 'delete');
-};
-
-function onDeleteClick(row: CollectionItem) {
-  return new Promise<void>((resolve) => {
-    dialogs.push({
-      title: props.deleteLabel ? props.deleteLabel : (t('sui.delete_record') + '?'),
-      message: props.deleteMessage ? props.deleteMessage : t('sui.delete_record_description'),
-      color: 'danger',
-      closeOnOutsideClick: true,
-      confirmText: t('sui.yes_delete'),
-      onConfirm: async () => {
-        await onDelete(row),
-          resolve();
-      },
-      onCancel: () => {
-        resolve();
-      },
-    });
-  });
-}
-
-async function onDelete(row: CollectionItem) {
-  if (!props.deleteUrl) {
-    return;
-  }
-
-  try {
-
-    const response = await http.delete(props.deleteUrl(row));
-
-    if (response.data && response.data.message) {
-      snackbars.push({
-        title: t('sui.success'),
-        text: response.data.message,
-        color: 'success',
-      });
-    }
-
-    emit('delete', row);
-
-    // Refetch even if URL is the same
-    fetch();
-
-  } catch (error: any) {
-    snackbars.push({
-      title: t('sui.error'),
-      text: error.response.data?.message ?? 'Unknown error',
-      color: 'danger',
-    });
-  }
-}
-
-const componentStorageKey = 'base_data_table.';
-const settingsStorage = config.settingsStorage;
-
-/*
-|--------------------------------------------------------------------------
-| Toggle columns
-|--------------------------------------------------------------------------
-*/
-
-const visibleColumns = ref<string[]>([]);
-const visibleColumnsKey = componentStorageKey + props.storageKey + '.visible_columns';
-
-onMounted(async () => {
-
-  const value = await settingsStorage.get(visibleColumnsKey);
-
-  let visibleColumnsFromStorage = [];
-
-  if (typeof value === 'string') {
-    try {
-      visibleColumnsFromStorage.push(...JSON.parse(value));
-    } catch (e) {
-      console.error('Error parsing visible columns from storage', e);
-    }
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    visibleColumnsFromStorage.push(Object.values(value));
-  }
-
-  if (Array.isArray(value)) {
-    visibleColumnsFromStorage = value;
-  }
-
-  // If found, set visibleColumns
-  if (
-    visibleColumnsFromStorage &&
-    isArray(visibleColumnsFromStorage) &&
-    visibleColumnsFromStorage.length > 0
-  ) {
-    visibleColumns.value = visibleColumnsFromStorage;
-  }
-
-  if (
-    table.value &&
-    table.value.newColumns.length &&
-    visibleColumns.value.length == 0
-  ) {
-    visibleColumns.value = table.value.newColumns
-      .filter((c) => c.toggle)
-      .filter((c) => c.toggleDefault ?? true)
-      .map((c) => c.newKey);
-  }
-});
-
-/**
- * Update local storage when check input update
- */
-function onUpdateVisibleColumn(columns: string[]) {
-
-  visibleColumns.value = columns;
-
-  settingsStorage.set(
-    visibleColumnsKey,
-    JSON.stringify(visibleColumns.value)
-  );
-}
-
-/*
-|--------------------------------------------------------------------------
-| Order columns
-|--------------------------------------------------------------------------
-*/
-
-const columnOrder = ref<string[]>([]);
-
-const columnOrderKey = componentStorageKey + props.storageKey + '.column_order';
-
-onMounted(async () => {
-
-  const value = await settingsStorage.get(columnOrderKey);
-
-  let columnOrderFromStorage = [];
-
-  if (typeof value === 'string') {
-    try {
-      columnOrderFromStorage.push(...JSON.parse(value));
-    } catch (e) {
-      console.error('Error parsing visible columns from storage', e);
-    }
-  }
-
-  if (typeof value === 'object' && value !== null) {
-    columnOrderFromStorage.push(Object.values(value));
-  }
-
-  if (Array.isArray(value)) {
-    columnOrderFromStorage = value;
-  }
-
-  // If found, set columnOrder
-  if (
-    columnOrderFromStorage &&
-    isArray(columnOrderFromStorage) &&
-    columnOrderFromStorage.length > 0
-  ) {
-
-    const colKeys = table.value?.newColumns.map((c) => c.newKey) ?? [];
-
-    columnOrder.value = columnOrderFromStorage.filter((c) => {
-      return colKeys.includes(c);
-    });
-  }
-});
-
-function onUpdateColumnOrder(value: string[]) {
-
-  columnOrder.value = value;
-
-  settingsStorage.set(
-    columnOrderKey,
-    JSON.stringify(value)
-  );
-
-}
-
-/*
-|--------------------------------------------------------------------------
-| Row Actions
-|--------------------------------------------------------------------------
-*/
-
-const rowActionsInternal = computed<RowAction[]>(() => {
-  const actions = [];
-
-  if (props.editUrl && props.editButton) {
-    actions.push({
-      label: t('sui.edit'),
-      icon: 'heroicons:cog-6-tooth-solid',
-      to: (row: CollectionItem) => (props.editUrl ? props.editUrl(row) : ''),
-      disabled: (row: CollectionItem) => !canUpdate(row),
-    });
-  }
-
-  actions.push(...cloneDeep(props.rowActions) ?? []);
-
-  if (props.deleteUrl && props.deleteButton) {
-    actions.push({
-      label: t('sui.delete'),
-      icon: 'heroicons:trash-20-solid',
-      action: onDeleteClick,
-      disabled: (row: CollectionItem) => !canDelete(row),
-    });
-  }
-
-  return actions;
-});
-
-const visibleRowActions = computed<RowAction[]>(() => {
-  return rowActionsInternal.value.slice(0, props.numberOfVisibleRowActions);
-});
-
-const showRowActionMenu = computed<boolean>(() => {
-  return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
-});
-
-function rowActionMenuItems(row: CollectionItem): ActionItem[] {
-  return rowActionsInternal.value.map((action) => {
-    return {
-      label: action.label,
-      icon: action.icon,
-      disabled: action.disabled && action.disabled(row),
-      action: action.action
-        ? () => {
-          if (action.action) action.action(row);
-        }
-        : undefined,
-      to: action.to ? action.to(row) : undefined,
-      href: action.href ? action.href(row) : undefined,
-    };
-  });
-}
-
-/*
-|--------------------------------------------------------------------------
-| Checkable
-|--------------------------------------------------------------------------
-*/
-
-const newCheckedRows = ref<Record<string, any>[]>([]);
-
-watch(
-  () => props.checkedRows,
-  (checkedRows) => {
-    newCheckedRows.value = checkedRows;
-  }
-);
-
-function uncheckAll() {
-  table.value?.uncheckAll();
-}
-
-const sectionsInternal = computed<DataIteratorSection[]>(() => {
-  const sections = props.sections ?? [];
-
-  if (props.toggleable) {
-    return [
-      ...sections,
-      {
-        name: 'columns',
-        icon: 'heroicons:view-columns',
-        title: t('sui.columns'),
-        closeText: t('sui.apply'),
-        opened: false,
-      },
-    ];
-  }
-
-  return sections;
-});
-
-function onCheckedRowsUpdate(checkedRows: Record<string, any>[]) {
-  newCheckedRows.value = checkedRows;
-  emit('update:checked-rows', checkedRows);
-}
-
-/*
-|--------------------------------------------------------------------------
-| Scrolling behavior
-|--------------------------------------------------------------------------
-*/
-
-function onWillScrollTop() {
-  if (!props.scrollTopOnFetch) {
-    return;
-  }
-
-  if (props.maxHeight) {
-    table.value?.scrollTop();
-
-    const top = dataIteratorRef.value?.$el?.getBoundingClientRect()?.top ?? 0;
-
-    if (top < 0) {
-      dataIteratorRef.value?.scrollIntoView();
-    }
-  }
-}
-
-/*
-|--------------------------------------------------------------------------
-| On fetch
-|--------------------------------------------------------------------------
-*/
-
-function onFetch(
-  payload: null | ResourceCollection | PaginatedCollection | Collection
-) {
-  emit('fetch', payload);
-}
-
-/*
-|--------------------------------------------------------------------------
-| Exposed functions
-|--------------------------------------------------------------------------
-*/
-
-function fetch() {
-  if (!dataIteratorRef.value) {
-    return;
-  }
-  dataIteratorRef.value.fetch();
-}
-
-function fetchWithoutLoading() {
-  if (!dataIteratorRef.value) {
-    return;
-  }
-  dataIteratorRef.value.fetchWithoutLoading();
-}
-
-const dataIteratorQuery = computed((): DataTableQuery | null => {
-  return dataIteratorRef.value?.query ?? null;
-});
-
-defineExpose({
-  fetch,
-  fetchWithoutLoading,
-  query: dataIteratorQuery,
-  data: computed(() => dataIteratorRef.value?.data ?? undefined),
-});
-</script>
+<template>
+  <BaseDataIterator
+    ref="dataIteratorRef"
+    :items="items"
+    :per-page="perPage"
+    :url="url"
+    :url-query="urlQuery"
+    :default-query="defaultQuery"
+    :searchable="searchable"
+    :actions="actions"
+    :history-mode="historyMode"
+    :layout="layout"
+    :size="sizeInternal.size.value"
+    :sections="sectionsInternal"
+    :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
+    :filters-position="filtersPosition"
+    :search="search"
+    @fetch="onFetch"
+    @will-scroll-top="onWillScrollTop"
+  >
+    <template #default="dataIteratorProps">
+      <BaseCard
+        clipped
+        class="w-full overflow-hidden"
+      >
+        <div v-if="newCheckedRows.length">
+          <div
+            class="flex items-center justify-between border-b border-slate-200 bg-slate-50 py-2 pl-3 pr-2 text-sm"
+          >
+            <div>
+              <span class="mr-3 text-slate-500">{{
+                t('sui.x_rows_selected', {
+                  count: newCheckedRows.length,
+                })
+              }}.</span>
+              <button
+                type="button"
+                class="mr-3 inline text-slate-800 underline underline-offset-1 decoration-slate-400 decoration-2 decoration-dashed"
+                @click="uncheckAll()"
+              >
+                {{ t('sui.deselect_all') }}
+              </button>
+            </div>
+            <BaseActionButtons
+              v-if="checkableActions?.length"
+              :actions="checkableActions"
+              :max-actions="2"
+              variant="button-group"
+            />
+          </div>
+        </div>
+
+        <BaseDataTableTemplate
+          ref="table"
+          :checked-rows="newCheckedRows"
+          :data="dataIteratorProps.items"
+          :loading="dataIteratorProps.loading"
+          :detailed="detailed"
+          :has-detailed-visible="hasDetailedVisible"
+          :checkable="checkable"
+          :is-row-checkable="isRowCheckable"
+          :sort-field="dataIteratorProps.sortField"
+          :sort-direction="dataIteratorProps.sortDirection"
+          :max-height="maxHeight"
+          :visible-columns="visibleColumns"
+          :column-order="columnOrder"
+          :size="sizeInternal.size.value"
+          :row-to="rowToInternal"
+          :row-href="rowHref"
+          :row-key="rowKey"
+          :row-selected="rowSelected"
+          :virtual-scrolling="virtualScrolling"
+          @update:checked-rows="onCheckedRowsUpdate"
+          @sort="dataIteratorProps.onSortChange"
+          @row-click="onRowClick"
+        >
+          <template #default>
+            <slot :data="dataIteratorProps.data" />
+
+            <BaseTableColumn
+              v-slot="{ row }"
+              :visible="rowActionsInternal.length > 0"
+              :toggle="false"
+              ignore-row-interactions
+              :custom-key="customKeyActions"
+              class="overflow-hidden"
+            >
+              <div class="flex justify-end gap-1 text-right w-full">
+                <div class="btn-group">
+                  <template
+                    v-for="rowAction in visibleRowActions"
+                    :key="rowAction.icon"
+                  >
+                    <BaseDataTableRowAction
+                      :row="row"
+                      :row-action="rowAction"
+                      :size="sizeInternal.size.value"
+                    />
+                  </template>
+                  <BaseMenu
+                    v-if="showRowActionMenu"
+                    :items="rowActionMenuItems(row)"
+                    :size="menuSize"
+                  >
+                    <template #button>
+                      <BaseButton
+                        as="div"
+                        :size="menuSize"
+                        icon="heroicons-solid:dots-vertical"
+                      />
+                    </template>
+                  </BaseMenu>
+                </div>
+              </div>
+            </BaseTableColumn>
+          </template>
+
+          <template #detail="propsDetail">
+            <slot
+              name="detail"
+              v-bind="propsDetail"
+            />
+          </template>
+
+          <template #checkedHeader="propsCheckHeader">
+            <slot
+              name="checkedHeader"
+              v-bind="propsCheckHeader"
+            />
+          </template>
+
+          <template #empty>
+            <div
+              v-if="dataIteratorProps.error"
+              class="flex items-center justify-center py-16"
+            >
+              <div class="flex flex-col items-center justify-center">
+                <BaseIcon
+                  icon="heroicons:x-circle"
+                  class="h-10 w-10 text-red-600"
+                />
+                <p class="mt-3 text-center text-sm text-slate-600">
+                  {{ t('sui.whoops') }}
+                </p>
+              </div>
+            </div>
+            <div
+              v-else-if="dataIteratorProps.firstLoad"
+            >
+              <slot name="empty">
+                <div class="flex items-center justify-center py-16">
+                  <div class="flex flex-col items-center">
+                    <BaseEmptyState class="w-24" />
+                    
+                    <p class="mt-3 text-center text-sm text-slate-600">
+                      {{ t('sui.nothing_found') }}
+                    </p>
+                  </div>
+                </div>
+              </slot>
+            </div>
+          </template>
+        </BaseDataTableTemplate>
+      </BaseCard>
+    </template>
+
+    <template
+      v-if="$slots.filters"
+      #filters="{ query, updateQuery, updateQueryValue, updateQueryValueDebounce }"
+    >
+      <slot
+        name="filters"
+        :query="query"
+        :update-query="updateQuery"
+        :update-query-value="updateQueryValue"
+        :update-query-value-debounce="updateQueryValueDebounce"
+      />
+    </template>
+
+    <template #sidebarTop="sidebarProps">
+      <slot
+        name="sidebarTop"
+        v-bind="sidebarProps"
+      />
+    </template>
+
+    <template #sidebarBottom="sidebarProps">
+      <slot
+        name="sidebarBottom"
+        v-bind="sidebarProps"
+      />
+    </template>
+
+    <template
+      v-if="toggleable"
+      #columns
+    >
+      <BaseDataIteratorSectionColumns
+        :table="table"
+        :visible-columns="visibleColumns"
+        :column-order="columnOrder"
+        @update:visible-columns="onUpdateVisibleColumn"
+        @update:column-order="onUpdateColumnOrder"
+      />
+    </template>
+
+    <template
+      v-for="section in sections"
+      :key="section.name"
+      #[section.name]
+    >
+      <slot :name="section.name" />
+    </template>
+  </BaseDataIterator>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { t } from '@/i18n';
+import {
+  Collection,
+  CollectionItem,
+  DataIteratorSection,
+  DataTableQuery,
+  PaginatedCollection,
+  ResourceCollection,
+  RowAction,
+} from '@/types';
+import { useDialogsStore } from '@/stores/dialogs';
+import { useSnackbarsStore } from '../stores/snackbars';
+import BaseDataIterator from './BaseDataIterator.vue';
+import { cloneDeep, isArray } from 'lodash';
+
+import BaseCard from './BaseCard.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+import BaseDataIteratorSectionColumns from './BaseDataIteratorSectionColumns.vue';
+import { BaseIcon, config } from '@/index';
+import BaseEmptyState from '../svg/BaseEmptyState.vue';
+import { RouteLocationRaw } from 'vue-router';
+import BaseMenu from './BaseMenu.vue';
+import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
+import { ActionItem } from '@/types';
+import { Size } from '@/utils/sizes';
+import { useInputSize } from '@/composables/inputSize';
+import BaseButton from './BaseButton.vue';
+import BaseDataTableTemplate from './BaseDataTableTemplate.vue';
+import { customKeyActions } from '@/services/table/customKeyActions';
+import BaseActionButtons from './BaseActionButtons.vue';
+
+const http = config.http;
+
+const dialogs = useDialogsStore();
+const snackbars = useSnackbarsStore();
+
+const table = ref<null | InstanceType<typeof BaseDataTableTemplate>>(null);
+
+const props = defineProps({
+
+  /**
+   * Data table items
+   */
+  items: {
+    default: undefined,
+    type: Array as PropType<CollectionItem[] | undefined>,
+  },
+
+  /**
+   * Per page (only when using local data)
+   */
+  perPage: {
+    default: undefined,
+    type: Number,
+  },
+
+  /**
+   * Base URL from which to make requests
+   */
+  url: {
+    default: undefined,
+    type: String as PropType<string | undefined>,
+  },
+
+  /**
+   * Query params that always get applied
+   */
+  urlQuery: {
+    default: undefined,
+    type: Object as PropType<Record<string, any>>,
+  },
+
+  /**
+   * Query params that gets applied by default
+   * These may be overwritten by URL params generated by the data-table or filters
+   */
+  defaultQuery: {
+    default: undefined,
+    type: Object as PropType<DataTableQuery>,
+  },
+
+  /**
+   * Show url for router link
+   */
+  showUrl: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
+  rowTo: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
+  rowHref: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => string) | undefined
+    >,
+  },
+
+  rowSelected: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => boolean) | undefined
+    >,
+  },
+
+  onRowClick: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem, index: number, event: MouseEvent) => void>,
+  },
+
+  /**
+   * Show/Hide edit button
+   */
+  editButton: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Edit url for router link
+   */
+  editUrl: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
+  /**
+   * Show/Hide delete button
+   */
+  deleteButton: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Delete endpoint to delete an item
+   */
+  deleteUrl: {
+    default: undefined,
+    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
+  },
+
+  /**
+   * Delete label
+   */
+  deleteLabel: {
+    default: '',
+    type: String,
+  },
+
+  /**
+   * Delete message
+   */
+  deleteMessage: {
+    default: '',
+    type: String,
+  },
+
+  /**
+   * Show toggle-able details on each row
+   */
+  detailed: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Check is a given row has details
+   */
+  hasDetailedVisible: {
+    default() {
+      return true;
+    },
+    type: Function as PropType<(row: any) => boolean>,
+  },
+
+  /**
+   * Makes row checkable
+   */
+  checkable: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Actions on each row
+   */
+  checkableActions: {
+    default: undefined,
+    type: Array as PropType<ActionItem[]>,
+  },
+
+  /**
+   * Checked rows array
+   */
+  checkedRows: {
+    default() {
+      return [];
+    },
+    type: Array as PropType<Record<string, any>[]>,
+  },
+
+  /**
+   * Check is a given row is checkable
+   */
+  isRowCheckable: {
+    default() {
+      return () => true;
+    },
+    type: Function,
+  },
+
+  /**
+   * Adds a search bar
+   */
+  searchable: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Shows the column toggle utility
+   */
+  toggleable: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Actions
+   */
+  actions: {
+    default: undefined,
+    type: Array as PropType<ActionItem[]>,
+  },
+
+  /**
+   * Save data table state in URL
+   */
+  historyMode: {
+    default: false,
+    type: Boolean,
+  },
+
+  /*
+   * Max height (in px)
+   */
+  maxHeight: {
+    default: undefined,
+    type: Number,
+  },
+
+  /**
+   * Layout type
+   * 
+   * default: Layout with a sidebar
+   * compact: Layout without a sidebar, this is the default layout for mobile, even if you don't specify it
+   */
+  layout: {
+    default: 'default',
+    type: String as PropType<'default' | 'compact'>,
+  },
+
+  /**
+   * Overall size and spacing of the component
+   */
+  size: {
+    default: 'md',
+    type: String as PropType<Size>,
+  },
+
+  /**
+   * Data iterator sections
+   */
+  sections: {
+    default: undefined,
+    type: Array as PropType<DataIteratorSection[]>,
+  },
+
+  /**
+   * Row actions
+   */
+  rowActions: {
+    default: undefined,
+    type: Array as PropType<RowAction[]>,
+  },
+
+  /**
+   * Number of visible row actions
+   */
+  numberOfVisibleRowActions: {
+    default: 2,
+    type: Number,
+  },
+
+  /**
+   * Scroll to top when fetching new data
+   */
+  scrollTopOnFetch: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Filters position
+   */
+  filtersPosition: {
+    default: 'section',
+    type: String as PropType<'top' | 'section'>,
+  },
+
+  /**
+   * Row key. Used to identify rows for faster rendering. 
+   * If not provided, it will use the id, key or uuid, or create a hash from the row object.
+   */
+  rowKey: {
+    default: undefined,
+    type: Function as PropType<(row: CollectionItem) => string | number>,
+  },
+
+  /**
+   * Virtual scrolling
+   */
+  virtualScrolling: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Storage key to save visible columns and order settings.
+   * By default, it uses the current URL path, without query params.
+   */
+  storageKey: {
+    type: String,
+    default() {
+      return window.location.pathname;
+    },
+  },
+
+  /**
+   * Function to search local data
+   */
+  search: {
+    default: undefined,
+    type: Function as PropType<(items: Collection, search: string | null) => Collection>,
+  }
+});
+
+const sizeInternal = useInputSize(props.size);
+
+const menuSize = computed(() => {
+  if (sizeInternal.size.value == 'md') {
+    return 'sm';
+  }
+  if (sizeInternal.size.value == 'sm') {
+    return 'xs';
+  }
+  return 'xs';
+})
+
+const emit = defineEmits([
+  'delete',
+  'update:checked-rows',
+  'fetch',
+]);
+
+const dataIteratorRef = ref<null | InstanceType<typeof BaseDataIterator>>(null);
+
+const rowToInternal = computed(() => {
+  if (props.showUrl) {
+    console.warn('showUrl is deprecated, use rowTo instead');
+    return props.showUrl;
+  }
+
+  return props.rowTo;
+});
+
+/*
+|--------------------------------------------------------------------------
+| Gate helpers
+|--------------------------------------------------------------------------
+*/
+
+const gate = (row: CollectionItem, action: string): boolean => {
+  if (row.can && Object.prototype.hasOwnProperty.call(row.can, action)) {
+    return row.can[action];
+  }
+  return true;
+};
+
+const canUpdate = (row: CollectionItem): boolean => {
+  return gate(row, 'update');
+};
+
+const canDelete = (row: CollectionItem): boolean => {
+  return gate(row, 'delete');
+};
+
+function onDeleteClick(row: CollectionItem) {
+  return new Promise<void>((resolve) => {
+    dialogs.push({
+      title: props.deleteLabel ? props.deleteLabel : (t('sui.delete_record') + '?'),
+      message: props.deleteMessage ? props.deleteMessage : t('sui.delete_record_description'),
+      color: 'danger',
+      closeOnOutsideClick: true,
+      confirmText: t('sui.yes_delete'),
+      onConfirm: async () => {
+        await onDelete(row),
+          resolve();
+      },
+      onCancel: () => {
+        resolve();
+      },
+    });
+  });
+}
+
+async function onDelete(row: CollectionItem) {
+  if (!props.deleteUrl) {
+    return;
+  }
+
+  try {
+
+    const response = await http.delete(props.deleteUrl(row));
+
+    if (response.data && response.data.message) {
+      snackbars.push({
+        title: t('sui.success'),
+        text: response.data.message,
+        color: 'success',
+      });
+    }
+
+    emit('delete', row);
+
+    // Refetch even if URL is the same
+    fetch();
+
+  } catch (error: any) {
+    snackbars.push({
+      title: t('sui.error'),
+      text: error.response.data?.message ?? 'Unknown error',
+      color: 'danger',
+    });
+  }
+}
+
+const componentStorageKey = 'base_data_table.';
+const settingsStorage = config.settingsStorage;
+
+/*
+|--------------------------------------------------------------------------
+| Toggle columns
+|--------------------------------------------------------------------------
+*/
+
+const visibleColumns = ref<string[]>([]);
+const visibleColumnsKey = componentStorageKey + props.storageKey + '.visible_columns';
+
+onMounted(async () => {
+
+  const value = await settingsStorage.get(visibleColumnsKey);
+
+  let visibleColumnsFromStorage = [];
+
+  if (typeof value === 'string') {
+    try {
+      visibleColumnsFromStorage.push(...JSON.parse(value));
+    } catch (e) {
+      console.error('Error parsing visible columns from storage', e);
+    }
+  }
+
+  if (typeof value === 'object' && value !== null) {
+    visibleColumnsFromStorage.push(Object.values(value));
+  }
+
+  if (Array.isArray(value)) {
+    visibleColumnsFromStorage = value;
+  }
+
+  // If found, set visibleColumns
+  if (
+    visibleColumnsFromStorage &&
+    isArray(visibleColumnsFromStorage) &&
+    visibleColumnsFromStorage.length > 0
+  ) {
+    visibleColumns.value = visibleColumnsFromStorage;
+  }
+
+  if (
+    table.value &&
+    table.value.newColumns.length &&
+    visibleColumns.value.length == 0
+  ) {
+    visibleColumns.value = table.value.newColumns
+      .filter((c) => c.toggle)
+      .filter((c) => c.toggleDefault ?? true)
+      .map((c) => c.newKey);
+  }
+});
+
+/**
+ * Update local storage when check input update
+ */
+function onUpdateVisibleColumn(columns: string[]) {
+
+  visibleColumns.value = columns;
+
+  settingsStorage.set(
+    visibleColumnsKey,
+    JSON.stringify(visibleColumns.value)
+  );
+}
+
+/*
+|--------------------------------------------------------------------------
+| Order columns
+|--------------------------------------------------------------------------
+*/
+
+const columnOrder = ref<string[]>([]);
+
+const columnOrderKey = componentStorageKey + props.storageKey + '.column_order';
+
+onMounted(async () => {
+
+  const value = await settingsStorage.get(columnOrderKey);
+
+  let columnOrderFromStorage = [];
+
+  if (typeof value === 'string') {
+    try {
+      columnOrderFromStorage.push(...JSON.parse(value));
+    } catch (e) {
+      console.error('Error parsing visible columns from storage', e);
+    }
+  }
+
+  if (typeof value === 'object' && value !== null) {
+    columnOrderFromStorage.push(Object.values(value));
+  }
+
+  if (Array.isArray(value)) {
+    columnOrderFromStorage = value;
+  }
+
+  // If found, set columnOrder
+  if (
+    columnOrderFromStorage &&
+    isArray(columnOrderFromStorage) &&
+    columnOrderFromStorage.length > 0
+  ) {
+
+    const colKeys = table.value?.newColumns.map((c) => c.newKey) ?? [];
+
+    columnOrder.value = columnOrderFromStorage.filter((c) => {
+      return colKeys.includes(c);
+    });
+  }
+});
+
+function onUpdateColumnOrder(value: string[]) {
+
+  columnOrder.value = value;
+
+  settingsStorage.set(
+    columnOrderKey,
+    JSON.stringify(value)
+  );
+
+}
+
+/*
+|--------------------------------------------------------------------------
+| Row Actions
+|--------------------------------------------------------------------------
+*/
+
+const rowActionsInternal = computed<RowAction[]>(() => {
+  const actions = [];
+
+  if (props.editUrl && props.editButton) {
+    actions.push({
+      label: t('sui.edit'),
+      icon: 'heroicons:cog-6-tooth-solid',
+      to: (row: CollectionItem) => (props.editUrl ? props.editUrl(row) : ''),
+      disabled: (row: CollectionItem) => !canUpdate(row),
+    });
+  }
+
+  actions.push(...cloneDeep(props.rowActions) ?? []);
+
+  if (props.deleteUrl && props.deleteButton) {
+    actions.push({
+      label: t('sui.delete'),
+      icon: 'heroicons:trash-20-solid',
+      action: onDeleteClick,
+      disabled: (row: CollectionItem) => !canDelete(row),
+    });
+  }
+
+  return actions;
+});
+
+const visibleRowActions = computed<RowAction[]>(() => {
+  return rowActionsInternal.value.slice(0, props.numberOfVisibleRowActions);
+});
+
+const showRowActionMenu = computed<boolean>(() => {
+  return rowActionsInternal.value.length > props.numberOfVisibleRowActions;
+});
+
+function rowActionMenuItems(row: CollectionItem): ActionItem[] {
+  return rowActionsInternal.value.map((action) => {
+    return {
+      label: action.label,
+      icon: action.icon,
+      disabled: action.disabled && action.disabled(row),
+      action: action.action
+        ? () => {
+          if (action.action) action.action(row);
+        }
+        : undefined,
+      to: action.to ? action.to(row) : undefined,
+      href: action.href ? action.href(row) : undefined,
+    };
+  });
+}
+
+/*
+|--------------------------------------------------------------------------
+| Checkable
+|--------------------------------------------------------------------------
+*/
+
+const newCheckedRows = ref<Record<string, any>[]>([]);
+
+watch(
+  () => props.checkedRows,
+  (checkedRows) => {
+    newCheckedRows.value = checkedRows;
+  }
+);
+
+function uncheckAll() {
+  table.value?.uncheckAll();
+}
+
+const sectionsInternal = computed<DataIteratorSection[]>(() => {
+  const sections = props.sections ?? [];
+
+  if (props.toggleable) {
+    return [
+      ...sections,
+      {
+        name: 'columns',
+        icon: 'heroicons:view-columns',
+        title: t('sui.columns'),
+        closeText: t('sui.apply'),
+        opened: false,
+      },
+    ];
+  }
+
+  return sections;
+});
+
+function onCheckedRowsUpdate(checkedRows: Record<string, any>[]) {
+  newCheckedRows.value = checkedRows;
+  emit('update:checked-rows', checkedRows);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Scrolling behavior
+|--------------------------------------------------------------------------
+*/
+
+function onWillScrollTop() {
+  if (!props.scrollTopOnFetch) {
+    return;
+  }
+
+  if (props.maxHeight) {
+    table.value?.scrollTop();
+
+    const top = dataIteratorRef.value?.$el?.getBoundingClientRect()?.top ?? 0;
+
+    if (top < 0) {
+      dataIteratorRef.value?.scrollIntoView();
+    }
+  }
+}
+
+/*
+|--------------------------------------------------------------------------
+| On fetch
+|--------------------------------------------------------------------------
+*/
+
+function onFetch(
+  payload: null | ResourceCollection | PaginatedCollection | Collection
+) {
+  emit('fetch', payload);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Exposed functions
+|--------------------------------------------------------------------------
+*/
+
+function fetch() {
+  if (!dataIteratorRef.value) {
+    return;
+  }
+  dataIteratorRef.value.fetch();
+}
+
+function fetchWithoutLoading() {
+  if (!dataIteratorRef.value) {
+    return;
+  }
+  dataIteratorRef.value.fetchWithoutLoading();
+}
+
+const dataIteratorQuery = computed((): DataTableQuery | null => {
+  return dataIteratorRef.value?.query ?? null;
+});
+
+defineExpose({
+  fetch,
+  fetchWithoutLoading,
+  query: dataIteratorQuery,
+  data: computed(() => dataIteratorRef.value?.data ?? undefined),
+});
+</script>