sprintify-ui 0.4.3 → 0.4.5

package/src/components/BaseDataIterator.vue

@@ -1,839 +1,839 @@
-<template>
-  <div ref="dataIteratorNode">
-    <div
-      class="grid w-full max-w-full grid-flow-row gap-4"
-      :class="{
-        'grid-cols-[1fr_300px]': hasSidebar,
-      }"
-    >
-      <div
-        class="min-w-0"
-        :class="{ 'col-span-1': !compactLayout, 'col-span-2': compactLayout }"
-      >
-        <!-- Header -->
-        <div
-          class="flex space-x-2 empty:mb-0"
-          :class="{
-            'mb-2.5': size == 'sm',
-            'mb-4': size == 'md',
-          }"
-        >
-          <!-- Search bar -->
-          <div
-            v-if="searchable"
-            class="grow"
-          >
-            <div
-              class="relative"
-              :class="{
-                'h-9': size == 'sm',
-                'h-11': size == 'md',
-              }"
-            >
-              <div
-                class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center pl-2.5"
-              >
-                <BaseIcon
-                  class="text-slate-400"
-                  :class="{
-                    'h-5 w-5': size == 'sm',
-                    'h-6 w-6': size == 'md',
-                  }"
-                  icon="heroicons:magnifying-glass"
-                />
-              </div>
-              <input
-                ref="searchInput"
-                v-model="searchQuery"
-                type="text"
-                class="w-full h-full py-0 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm placeholder:font-light placeholder:text-sm focus:ring-blue-300 focus:ring-4"
-                :class="{
-                  'pl-9 pr-8': size == 'sm',
-                  'pl-10 pr-9': size == 'md',
-                }"
-                :placeholder="t('sui.autocomplete_placeholder')"
-                @input="onSearch"
-              >
-              <div
-                v-if="searchQuery"
-                class="absolute right-0 top-0 flex h-full items-center justify-center p-1"
-              >
-                <button
-                  type="button"
-                  class="flex appearance-none items-center rounded p-1 hover:bg-slate-100"
-                  @click="searchQuery = ''; onSearch('');"
-                >
-                  <BaseIcon
-                    class="text-slate-500"
-                    :class="{
-                      'h-5 w-5': size == 'sm',
-                      'h-6 w-6': size == 'md',
-                    }"
-                    icon="heroicons:x-mark"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <template v-if="compactLayout">
-            <template
-              v-for="(section, i) in sectionsInternal"
-              :key="section.name"
-            >
-              <BaseDataIteratorSectionButton
-                :section="section"
-                :size="size"
-                @open="openSection(i)"
-              />
-            </template>
-          </template>
-
-          <!-- Menu -->
-          <BaseMenu
-            v-if="actions && actions.length"
-            tw-menu="w-52"
-            :size="size == 'sm' ? 'xs' : 'sm'"
-            :items="actions"
-          >
-            <template #button="{ open }">
-              <div
-                class="flex items-center justify-center rounded-md border border-slate-300 bg-white shadow-sm duration-150 hover:bg-slate-50"
-                :class="[
-                  open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
-                  {
-                    'h-9 w-9': size == 'sm',
-                    'h-11 w-11': size == 'md',
-                  }
-                ]"
-              >
-                <BaseIcon icon="heroicons-solid:dots-vertical" />
-              </div>
-            </template>
-          </BaseMenu>
-        </div>
-
-        <slot
-          :items="items"
-          :loading="loading"
-          :error="error"
-          :first-load="firstLoad"
-          :page="page"
-          :sort-field="sortField"
-          :sort-direction="sortDirection"
-          :on-sort-change="onSortChange"
-          :on-page-change="onPageChange"
-        />
-
-        <!-- Pagination -->
-
-        <div
-          v-if="paginationMetadata"
-          class="mt-4"
-        >
-          <p
-            class="text-center text-sm text-slate-500 sm:text-right [&>b]:font-medium [&>b]:text-slate-600"
-          >
-            {{ t('sui.pagination_detail_1') }}
-
-            <b>{{ paginationStart }}</b> - <b>{{ paginationEnd }}</b>
-
-            {{ t('sui.pagination_detail_2') }}
-
-            <b>{{ paginationMetadata.total }}</b>
-          </p>
-        </div>
-
-        <div
-          v-if="paginationMetadata"
-          class="mt-4"
-        >
-          <BasePagination
-            :model-value="page"
-            :last-page="lastPage"
-            @update:model-value="onPageChange"
-          />
-        </div>
-      </div>
-
-      <div
-        v-if="!compactLayout"
-        ref="sidebar"
-        class="space-y-3"
-      >
-        <slot
-          name="sidebarTop"
-          :pagination-metadata="paginationMetadata"
-        />
-
-        <template
-          v-for="section in sectionsInternal"
-          :key="section.name"
-        >
-          <BaseDataIteratorSectionBox :section="section">
-            <slot
-              :name="section.name"
-              :query="query"
-              :update-query="updateFilterQuery"
-              :update-query-value="updateFilterQueryValue"
-            />
-          </BaseDataIteratorSectionBox>
-        </template>
-
-        <slot
-          name="sidebarBottom"
-          :pagination-metadata="paginationMetadata"
-        />
-      </div>
-    </div>
-
-    <template
-      v-for="(section, i) in sectionsInternal"
-      :key="section.name"
-    >
-      <BaseDataIteratorSectionModal
-        :section="section"
-        :model-value="sectionModalActive == i"
-        @update:model-value="closeSection"
-      >
-        <slot
-          :name="section.name"
-          :query="query"
-          :update-query="updateFilterQuery"
-          :update-query-value="updateFilterQueryValue"
-        />
-      </BaseDataIteratorSectionModal>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { t } from '@/i18n';
-type Direction = 'asc' | 'desc';
-
-const DEFAULT_QUERY = {
-  page: 1,
-  search: '',
-  sort: '',
-  filter: {},
-} as DataTableQuery;
-</script>
-
-<script lang="ts" setup>
-import { cloneDeep, debounce, merge, set } from 'lodash';
-import hash from 'object-hash';
-import { PropType } from 'vue';
-import {
-  Collection,
-  DataIteratorSection,
-  DataTableQuery,
-  MenuItemInterface,
-  PaginatedCollection,
-  ResourceCollection,
-} from '@/types';
-
-import BaseMenu from './BaseMenu.vue';
-import BasePagination from './BasePagination.vue';
-import { config } from '@/index';
-import { useMutationObserver, useResizeObserver } from '@vueuse/core';
-import { useHasPaginatedData } from '@/composables/paginatedData';
-import BaseDataIteratorSectionButton from './BaseDataIteratorSectionButton.vue';
-import BaseDataIteratorSectionModal from './BaseDataIteratorSectionModal.vue';
-import BaseDataIteratorSectionBox from './BaseDataIteratorSectionBox.vue';
-
-const props = defineProps({
-  /**
-   * Base URL from which to make requests
-   */
-  url: {
-    required: true,
-    type: String,
-  },
-
-  /**
-   * Query params that always get applied.
-   * To add overwrite-able query params, use defaultQuery.
-   */
-  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
-   * To add query params that are always active, use urlQuery.
-   */
-  defaultQuery: {
-    default: function () {
-      return DEFAULT_QUERY;
-    },
-    type: Object as PropType<DataTableQuery>,
-  },
-
-  /**
-   * Add a search bar.
-   */
-  searchable: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Configure contextual actions.
-   */
-  actions: {
-    default: undefined,
-    type: Array as PropType<MenuItemInterface[]>,
-  },
-
-  /**
-   * Save data table state in URL.
-   */
-  historyMode: {
-    default: false,
-    type: Boolean,
-  },
-
-  /**
-   * Layout type
-   */
-  layout: {
-    default: 'default',
-    type: String as PropType<'default' | 'compact'>,
-  },
-
-  /**
-  * Overall size and spacing of the component
-  */
-  size: {
-    default: 'md',
-    type: String as PropType<'sm' | 'md'>,
-  },
-
-  /**
-   * Sections
-   */
-  sections: {
-    default: undefined,
-    type: Array as PropType<DataIteratorSection[]>,
-  },
-
-  /**
-   * Scroll to top when fetching new data
-   */
-  scrollTopOnFetch: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const http = config.http;
-
-const emit = defineEmits([
-  'click',
-  'delete',
-  'checkAll',
-  'update:checked-rows',
-  'check',
-  'update:query',
-  'will-scroll-top',
-  'fetch',
-]);
-
-const dataIteratorNode = ref<null | HTMLElement>(null);
-const searchInput = ref<null | HTMLInputElement>(null);
-
-const route = useRoute();
-const router = useRouter();
-const routeName = route.name;
-
-let willUnmount = false;
-
-onBeforeUnmount(() => {
-  willUnmount = true;
-});
-
-const width = ref(800);
-useResizeObserver(dataIteratorNode, () => {
-  width.value = dataIteratorNode.value?.clientWidth ?? 800;
-});
-
-/** Data table state */
-
-const firstLoad = ref(false);
-const loading = ref(true);
-const error = ref(false);
-const searchQuery = ref('');
-
-let lastUrl = '';
-let lastQueryHash = '';
-
-// eslint-disable-next-line vue/no-setup-props-destructure
-const query = ref<DataTableQuery>(cloneDeep(props.defaultQuery));
-const slots = useSlots();
-
-const compactLayout = computed(() => {
-  if (props.layout === 'compact') {
-    return true;
-  }
-  return width.value < 1024;
-});
-
-const hasFilters = computed((): boolean => {
-  const numberOfFilterSlots = slots.filters;
-  return numberOfFilterSlots !== undefined;
-});
-
-/*
-|--------------------------------------------------------------------------
-| Has sidebar observer
-|--------------------------------------------------------------------------
-*/
-
-const hasSidebar = ref(false);
-const sidebar = ref<null | HTMLElement>(null);
-
-function checkIfSidebarIsEmpty() {
-  hasSidebar.value = (sidebar?.value?.childElementCount ?? 0) > 0;
-}
-
-const checkIfSidebarIsEmptyDebounce = debounce(checkIfSidebarIsEmpty, 100);
-
-useMutationObserver(sidebar, checkIfSidebarIsEmptyDebounce, {
-  attributes: false,
-  childList: true,
-});
-
-onMounted(() => {
-  checkIfSidebarIsEmpty();
-});
-
-watch(
-  () => compactLayout.value,
-  () => {
-    // After the sidebar appears...
-    nextTick(() => {
-      checkIfSidebarIsEmpty();
-    });
-  }
-);
-
-/*
-|--------------------------------------------------------------------------
-| Query params
-|--------------------------------------------------------------------------
-*/
-
-function updateFilterQueryValue(key: string, value: any) {
-  let newQuery = cloneDeep(query.value);
-  newQuery = set(newQuery, key, value);
-  newQuery = set(newQuery, 'page', 1);
-  updateQuery(newQuery);
-}
-
-function updateFilterQuery(newQuery: DataTableQuery) {
-  newQuery = set(newQuery, 'page', 1);
-  updateQuery(newQuery);
-}
-
-function updateQuery(newQuery: DataTableQuery) {
-  if (!props.historyMode) {
-    query.value = newQuery;
-    fetch();
-    return;
-  }
-
-  if (route.name === null) {
-    throw new Error('Route name is required for history mode');
-  }
-
-  const newRoute = router.resolve({
-    name: route.name,
-    params: route.params,
-  });
-
-  const newParams = config.formatQueryString(newQuery);
-  const newRoutePath = newRoute.fullPath + '?' + newParams;
-
-  const oldParamString = getRouteQuery();
-  const oldParams = config.formatQueryString(oldParamString);
-
-  // Push new route if different
-  if (oldParams != newParams) {
-    if (!firstLoad.value) {
-      router.replace(newRoutePath);
-      return;
-    }
-    router.push(newRoutePath);
-    return;
-  }
-
-  // If the URL is unchanged, we must manually trigger the fetch() method
-  // on first load.
-
-  if (!firstLoad.value) {
-    query.value = newQuery;
-    fetch();
-  }
-}
-
-function queryHash(query: DataTableQuery): string {
-  return hash(query);
-}
-
-/*
-|--------------------------------------------------------------------------
-| Data fetching
-|--------------------------------------------------------------------------
-*/
-
-const url = computed<string>(() => {
-  return props.url;
-});
-
-/*
-|--------------------------------------------------------------------------
-| Handlers
-|--------------------------------------------------------------------------
-*/
-
-function onPageChange(p: number) {
-  const newQuery = cloneDeep(query.value);
-
-  newQuery.page = p;
-
-  updateQuery(newQuery);
-
-  scrollIntoView();
-}
-
-function onSortChange(field: string, direction: Direction) {
-  let newSort = field;
-
-  if (newSort && direction == 'desc') {
-    newSort = '-' + newSort;
-  }
-
-  const newQuery = cloneDeep(query.value);
-
-  newQuery.page = 1;
-  newQuery.sort = newSort;
-
-  updateQuery(newQuery);
-}
-
-const onSearch = debounce((event: any) => {
-  const newQuery = cloneDeep(query.value);
-
-  newQuery.page = 1;
-  newQuery.search = searchQuery.value;
-
-  updateQuery(newQuery);
-}, 350);
-
-/*
-|--------------------------------------------------------------------------
-| Route watcher
-|--------------------------------------------------------------------------
-*/
-
-watch(
-  () => route.query,
-  () => {
-    // Wait for the willUnmount flag to be set
-    nextTick(() => {
-      onRouteChange();
-    });
-  }
-);
-
-watch(
-  () => props.url,
-  () => {
-    fetch();
-  }
-);
-
-watch(
-  () => props.urlQuery,
-  () => {
-    fetch();
-  }
-);
-
-function getRouteQuery() {
-  return config.parseQueryString(window.location.search.replace(/^(\?)/, ''));
-}
-
-function onRouteChange() {
-  if (!props.historyMode) {
-    return;
-  }
-
-  if (willUnmount) {
-    return;
-  }
-
-  // Stop if route was changed
-  if (route.name != routeName) {
-    return;
-  }
-
-  const routeQuery = getRouteQuery();
-  const newQuery = routeQuery as DataTableQuery;
-
-  const newQueryHash = queryHash(newQuery);
-
-  if (newQueryHash == lastQueryHash) {
-    return;
-  }
-
-  lastQueryHash = newQueryHash;
-
-  query.value = newQuery;
-
-  // Update search input if not in focus
-  if (searchInput.value && searchInput.value !== document.activeElement) {
-    updateSearchInput();
-  }
-
-  fetch();
-}
-
-/*
-|--------------------------------------------------------------------------
-| Fetch
-|--------------------------------------------------------------------------
-*/
-
-function fetchWithLoading(force = false) {
-  fetch(force, true);
-}
-
-function fetchWithoutLoading(force = false) {
-  fetch(force, false);
-}
-
-function fetch(force = false, showLoading = true) {
-  if (willUnmount) {
-    return;
-  }
-
-  const urlSplit = url.value.split(/[?#]/);
-
-  const baseUrl = urlSplit[0];
-  const urlQueryString = urlSplit[1] ?? null;
-  const urlQuery = config.parseQueryString(urlQueryString);
-
-  // Ordered by priority
-  const allParams = merge(
-    cloneDeep(query.value),
-    cloneDeep(props.urlQuery),
-    cloneDeep(urlQuery)
-  );
-
-  const queryString = config.formatQueryString(allParams);
-
-  const fullUrl = baseUrl + '?' + queryString;
-
-  if (lastUrl == fullUrl && !force) {
-    return;
-  }
-
-  if (showLoading) {
-    loading.value = true;
-  }
-
-  lastUrl = fullUrl;
-
-  http
-    .get(fullUrl)
-    .then((response) => {
-      data.value = response.data;
-      loading.value = false;
-      error.value = false;
-      firstLoad.value = true;
-      emit('fetch', data.value);
-    })
-    .catch(() => {
-      data.value = null;
-      loading.value = false;
-      error.value = true;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/*
-|--------------------------------------------------------------------------
-| Data parsing
-|--------------------------------------------------------------------------
-*/
-
-const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
-  null
-);
-
-const { items, paginationMetadata, lastPage } = useHasPaginatedData(data);
-
-const page = computed((): number => {
-  if (query.value.page && parseInt(query.value.page + '')) {
-    return parseInt(query.value.page + '');
-  }
-  return 1;
-});
-
-const sortField = computed((): string => {
-  return query.value.sort?.trim().replace(/^(-)/, '') ?? '';
-});
-
-const sortDirection = computed((): Direction => {
-  if (query.value.sort && query.value.sort.length) {
-    if (query.value.sort[0] == '-') {
-      return 'desc';
-    }
-  }
-  return 'asc';
-});
-
-const searchKeywords = computed((): string => {
-  return query.value.search ?? '';
-});
-
-/*
-|--------------------------------------------------------------------------
-| Helpers
-|--------------------------------------------------------------------------
-*/
-
-/** Scroll into view */
-
-const scrollIntoView = () => {
-  emit('will-scroll-top');
-
-  if (!props.scrollTopOnFetch) {
-    return;
-  }
-
-  scrollIntoViewAction();
-};
-
-const scrollIntoViewAction = () => {
-  if (dataIteratorNode.value == null) {
-    return;
-  }
-
-  dataIteratorNode.value.scrollIntoView({
-    behavior: 'smooth',
-  });
-};
-
-function updateSearchInput() {
-  searchQuery.value = searchKeywords.value;
-}
-
-const paginationStart = computed(() => {
-  if (paginationMetadata.value == null) {
-    return '';
-  }
-
-  return (
-    paginationMetadata.value.per_page *
-    (paginationMetadata.value.current_page - 1) +
-    1
-  );
-});
-
-const paginationEnd = computed(() => {
-  if (paginationMetadata.value == null) {
-    return '';
-  }
-
-  return Math.min(
-    paginationMetadata.value.current_page * paginationMetadata.value.per_page,
-    paginationMetadata.value.total
-  );
-});
-
-/*
-|--------------------------------------------------------------------------
-| Created
-|--------------------------------------------------------------------------
-*/
-
-let newQuery = cloneDeep(query.value);
-const routeQuery = getRouteQuery();
-
-newQuery = merge(newQuery, routeQuery);
-
-updateQuery(newQuery);
-
-// Update search input on first load
-onMounted(() => {
-  updateSearchInput();
-});
-
-/*
-|--------------------------------------------------------------------------
-| Sections
-|--------------------------------------------------------------------------
-*/
-
-const sectionModalActive = ref<null | number>(null);
-
-const sectionsInternal = computed<DataIteratorSection[]>(() => {
-  const sections = props.sections ?? [];
-
-  if (hasFilters.value) {
-    return [
-      {
-        name: 'filters',
-        title: t('sui.filters'),
-        closeText: t('sui.apply_filters'),
-        icon: 'heroicons:funnel',
-        opened: true,
-      },
-      ...sections,
-    ];
-  }
-
-  return sections;
-});
-
-function openSection(index: number) {
-  if (sectionsInternal.value[index]) {
-    sectionModalActive.value = index;
-  } else {
-    sectionModalActive.value = null;
-  }
-}
-
-function closeSection() {
-  sectionModalActive.value = null;
-}
-
-/*
-|--------------------------------------------------------------------------
-| Provide
-|--------------------------------------------------------------------------
-*/
-
-provide('dataIterator:width', width);
-
-/*
-|--------------------------------------------------------------------------
-| Exposed API
-|--------------------------------------------------------------------------
-*/
-
-defineExpose({
-  fetch: () => fetch(true),
-  fetchWithLoading: () => fetchWithLoading(true),
-  fetchWithoutLoading: () => fetchWithoutLoading(true),
-  scrollIntoView: scrollIntoViewAction,
-  query,
-});
-</script>
+<template>
+  <div ref="dataIteratorNode">
+    <div
+      class="grid w-full max-w-full grid-flow-row gap-4"
+      :class="{
+        'grid-cols-[1fr_300px]': hasSidebar,
+      }"
+    >
+      <div
+        class="min-w-0"
+        :class="{ 'col-span-1': !compactLayout, 'col-span-2': compactLayout }"
+      >
+        <!-- Header -->
+        <div
+          class="flex space-x-2 empty:mb-0"
+          :class="{
+            'mb-2.5': size == 'sm',
+            'mb-4': size == 'md',
+          }"
+        >
+          <!-- Search bar -->
+          <div
+            v-if="searchable"
+            class="grow"
+          >
+            <div
+              class="relative"
+              :class="{
+                'h-9': size == 'sm',
+                'h-11': size == 'md',
+              }"
+            >
+              <div
+                class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center pl-2.5"
+              >
+                <BaseIcon
+                  class="text-slate-400"
+                  :class="{
+                    'h-5 w-5': size == 'sm',
+                    'h-6 w-6': size == 'md',
+                  }"
+                  icon="heroicons:magnifying-glass"
+                />
+              </div>
+              <input
+                ref="searchInput"
+                v-model="searchQuery"
+                type="text"
+                class="w-full h-full py-0 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm placeholder:font-light placeholder:text-sm focus:ring-blue-300 focus:ring-4"
+                :class="{
+                  'pl-9 pr-8': size == 'sm',
+                  'pl-10 pr-9': size == 'md',
+                }"
+                :placeholder="t('sui.autocomplete_placeholder')"
+                @input="onSearch"
+              >
+              <div
+                v-if="searchQuery"
+                class="absolute right-0 top-0 flex h-full items-center justify-center p-1"
+              >
+                <button
+                  type="button"
+                  class="flex appearance-none items-center rounded p-1 hover:bg-slate-100"
+                  @click="searchQuery = ''; onSearch('');"
+                >
+                  <BaseIcon
+                    class="text-slate-500"
+                    :class="{
+                      'h-5 w-5': size == 'sm',
+                      'h-6 w-6': size == 'md',
+                    }"
+                    icon="heroicons:x-mark"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <template v-if="compactLayout">
+            <template
+              v-for="(section, i) in sectionsInternal"
+              :key="section.name"
+            >
+              <BaseDataIteratorSectionButton
+                :section="section"
+                :size="size"
+                @open="openSection(i)"
+              />
+            </template>
+          </template>
+
+          <!-- Menu -->
+          <BaseMenu
+            v-if="actions && actions.length"
+            tw-menu="w-52"
+            :size="size == 'sm' ? 'xs' : 'sm'"
+            :items="actions"
+          >
+            <template #button="{ open }">
+              <div
+                class="flex items-center justify-center rounded-md border border-slate-300 bg-white shadow-sm duration-150 hover:bg-slate-50"
+                :class="[
+                  open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
+                  {
+                    'h-9 w-9': size == 'sm',
+                    'h-11 w-11': size == 'md',
+                  }
+                ]"
+              >
+                <BaseIcon icon="heroicons-solid:dots-vertical" />
+              </div>
+            </template>
+          </BaseMenu>
+        </div>
+
+        <slot
+          :items="items"
+          :loading="loading"
+          :error="error"
+          :first-load="firstLoad"
+          :page="page"
+          :sort-field="sortField"
+          :sort-direction="sortDirection"
+          :on-sort-change="onSortChange"
+          :on-page-change="onPageChange"
+        />
+
+        <!-- Pagination -->
+
+        <div
+          v-if="paginationMetadata"
+          class="mt-4"
+        >
+          <p
+            class="text-center text-sm text-slate-500 sm:text-right [&>b]:font-medium [&>b]:text-slate-600"
+          >
+            {{ t('sui.pagination_detail_1') }}
+
+            <b>{{ paginationStart }}</b> - <b>{{ paginationEnd }}</b>
+
+            {{ t('sui.pagination_detail_2') }}
+
+            <b>{{ paginationMetadata.total }}</b>
+          </p>
+        </div>
+
+        <div
+          v-if="paginationMetadata"
+          class="mt-4"
+        >
+          <BasePagination
+            :model-value="page"
+            :last-page="lastPage"
+            @update:model-value="onPageChange"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="!compactLayout"
+        ref="sidebar"
+        class="space-y-3"
+      >
+        <slot
+          name="sidebarTop"
+          :pagination-metadata="paginationMetadata"
+        />
+
+        <template
+          v-for="section in sectionsInternal"
+          :key="section.name"
+        >
+          <BaseDataIteratorSectionBox :section="section">
+            <slot
+              :name="section.name"
+              :query="query"
+              :update-query="updateFilterQuery"
+              :update-query-value="updateFilterQueryValue"
+            />
+          </BaseDataIteratorSectionBox>
+        </template>
+
+        <slot
+          name="sidebarBottom"
+          :pagination-metadata="paginationMetadata"
+        />
+      </div>
+    </div>
+
+    <template
+      v-for="(section, i) in sectionsInternal"
+      :key="section.name"
+    >
+      <BaseDataIteratorSectionModal
+        :section="section"
+        :model-value="sectionModalActive == i"
+        @update:model-value="closeSection"
+      >
+        <slot
+          :name="section.name"
+          :query="query"
+          :update-query="updateFilterQuery"
+          :update-query-value="updateFilterQueryValue"
+        />
+      </BaseDataIteratorSectionModal>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { t } from '@/i18n';
+type Direction = 'asc' | 'desc';
+
+const DEFAULT_QUERY = {
+  page: 1,
+  search: '',
+  sort: '',
+  filter: {},
+} as DataTableQuery;
+</script>
+
+<script lang="ts" setup>
+import { cloneDeep, debounce, merge, set } from 'lodash';
+import hash from 'object-hash';
+import { PropType } from 'vue';
+import {
+  Collection,
+  DataIteratorSection,
+  DataTableQuery,
+  MenuItemInterface,
+  PaginatedCollection,
+  ResourceCollection,
+} from '@/types';
+
+import BaseMenu from './BaseMenu.vue';
+import BasePagination from './BasePagination.vue';
+import { config } from '@/index';
+import { useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { useHasPaginatedData } from '@/composables/paginatedData';
+import BaseDataIteratorSectionButton from './BaseDataIteratorSectionButton.vue';
+import BaseDataIteratorSectionModal from './BaseDataIteratorSectionModal.vue';
+import BaseDataIteratorSectionBox from './BaseDataIteratorSectionBox.vue';
+
+const props = defineProps({
+  /**
+   * Base URL from which to make requests
+   */
+  url: {
+    required: true,
+    type: String,
+  },
+
+  /**
+   * Query params that always get applied.
+   * To add overwrite-able query params, use defaultQuery.
+   */
+  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
+   * To add query params that are always active, use urlQuery.
+   */
+  defaultQuery: {
+    default: function () {
+      return DEFAULT_QUERY;
+    },
+    type: Object as PropType<DataTableQuery>,
+  },
+
+  /**
+   * Add a search bar.
+   */
+  searchable: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Configure contextual actions.
+   */
+  actions: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+
+  /**
+   * Save data table state in URL.
+   */
+  historyMode: {
+    default: false,
+    type: Boolean,
+  },
+
+  /**
+   * Layout type
+   */
+  layout: {
+    default: 'default',
+    type: String as PropType<'default' | 'compact'>,
+  },
+
+  /**
+  * Overall size and spacing of the component
+  */
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
+
+  /**
+   * Sections
+   */
+  sections: {
+    default: undefined,
+    type: Array as PropType<DataIteratorSection[]>,
+  },
+
+  /**
+   * Scroll to top when fetching new data
+   */
+  scrollTopOnFetch: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const http = config.http;
+
+const emit = defineEmits([
+  'click',
+  'delete',
+  'checkAll',
+  'update:checked-rows',
+  'check',
+  'update:query',
+  'will-scroll-top',
+  'fetch',
+]);
+
+const dataIteratorNode = ref<null | HTMLElement>(null);
+const searchInput = ref<null | HTMLInputElement>(null);
+
+const route = useRoute();
+const router = useRouter();
+const routeName = route.name;
+
+let willUnmount = false;
+
+onBeforeUnmount(() => {
+  willUnmount = true;
+});
+
+const width = ref(800);
+useResizeObserver(dataIteratorNode, () => {
+  width.value = dataIteratorNode.value?.clientWidth ?? 800;
+});
+
+/** Data table state */
+
+const firstLoad = ref(false);
+const loading = ref(true);
+const error = ref(false);
+const searchQuery = ref('');
+
+let lastUrl = '';
+let lastQueryHash = '';
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const query = ref<DataTableQuery>(cloneDeep(props.defaultQuery));
+const slots = useSlots();
+
+const compactLayout = computed(() => {
+  if (props.layout === 'compact') {
+    return true;
+  }
+  return width.value < 1024;
+});
+
+const hasFilters = computed((): boolean => {
+  const numberOfFilterSlots = slots.filters;
+  return numberOfFilterSlots !== undefined;
+});
+
+/*
+|--------------------------------------------------------------------------
+| Has sidebar observer
+|--------------------------------------------------------------------------
+*/
+
+const hasSidebar = ref(false);
+const sidebar = ref<null | HTMLElement>(null);
+
+function checkIfSidebarIsEmpty() {
+  hasSidebar.value = (sidebar?.value?.childElementCount ?? 0) > 0;
+}
+
+const checkIfSidebarIsEmptyDebounce = debounce(checkIfSidebarIsEmpty, 100);
+
+useMutationObserver(sidebar, checkIfSidebarIsEmptyDebounce, {
+  attributes: false,
+  childList: true,
+});
+
+onMounted(() => {
+  checkIfSidebarIsEmpty();
+});
+
+watch(
+  () => compactLayout.value,
+  () => {
+    // After the sidebar appears...
+    nextTick(() => {
+      checkIfSidebarIsEmpty();
+    });
+  }
+);
+
+/*
+|--------------------------------------------------------------------------
+| Query params
+|--------------------------------------------------------------------------
+*/
+
+function updateFilterQueryValue(key: string, value: any) {
+  let newQuery = cloneDeep(query.value);
+  newQuery = set(newQuery, key, value);
+  newQuery = set(newQuery, 'page', 1);
+  updateQuery(newQuery);
+}
+
+function updateFilterQuery(newQuery: DataTableQuery) {
+  newQuery = set(newQuery, 'page', 1);
+  updateQuery(newQuery);
+}
+
+function updateQuery(newQuery: DataTableQuery) {
+  if (!props.historyMode) {
+    query.value = newQuery;
+    fetch();
+    return;
+  }
+
+  if (route.name === null) {
+    throw new Error('Route name is required for history mode');
+  }
+
+  const newRoute = router.resolve({
+    name: route.name,
+    params: route.params,
+  });
+
+  const newParams = config.formatQueryString(newQuery);
+  const newRoutePath = newRoute.fullPath + '?' + newParams;
+
+  const oldParamString = getRouteQuery();
+  const oldParams = config.formatQueryString(oldParamString);
+
+  // Push new route if different
+  if (oldParams != newParams) {
+    if (!firstLoad.value) {
+      router.replace(newRoutePath);
+      return;
+    }
+    router.push(newRoutePath);
+    return;
+  }
+
+  // If the URL is unchanged, we must manually trigger the fetch() method
+  // on first load.
+
+  if (!firstLoad.value) {
+    query.value = newQuery;
+    fetch();
+  }
+}
+
+function queryHash(query: DataTableQuery): string {
+  return hash(query);
+}
+
+/*
+|--------------------------------------------------------------------------
+| Data fetching
+|--------------------------------------------------------------------------
+*/
+
+const url = computed<string>(() => {
+  return props.url;
+});
+
+/*
+|--------------------------------------------------------------------------
+| Handlers
+|--------------------------------------------------------------------------
+*/
+
+function onPageChange(p: number) {
+  const newQuery = cloneDeep(query.value);
+
+  newQuery.page = p;
+
+  updateQuery(newQuery);
+
+  scrollIntoView();
+}
+
+function onSortChange(field: string, direction: Direction) {
+  let newSort = field;
+
+  if (newSort && direction == 'desc') {
+    newSort = '-' + newSort;
+  }
+
+  const newQuery = cloneDeep(query.value);
+
+  newQuery.page = 1;
+  newQuery.sort = newSort;
+
+  updateQuery(newQuery);
+}
+
+const onSearch = debounce((event: any) => {
+  const newQuery = cloneDeep(query.value);
+
+  newQuery.page = 1;
+  newQuery.search = searchQuery.value;
+
+  updateQuery(newQuery);
+}, 350);
+
+/*
+|--------------------------------------------------------------------------
+| Route watcher
+|--------------------------------------------------------------------------
+*/
+
+watch(
+  () => route.query,
+  () => {
+    // Wait for the willUnmount flag to be set
+    nextTick(() => {
+      onRouteChange();
+    });
+  }
+);
+
+watch(
+  () => props.url,
+  () => {
+    fetch();
+  }
+);
+
+watch(
+  () => props.urlQuery,
+  () => {
+    fetch();
+  }
+);
+
+function getRouteQuery() {
+  return config.parseQueryString(window.location.search.replace(/^(\?)/, ''));
+}
+
+function onRouteChange() {
+  if (!props.historyMode) {
+    return;
+  }
+
+  if (willUnmount) {
+    return;
+  }
+
+  // Stop if route was changed
+  if (route.name != routeName) {
+    return;
+  }
+
+  const routeQuery = getRouteQuery();
+  const newQuery = routeQuery as DataTableQuery;
+
+  const newQueryHash = queryHash(newQuery);
+
+  if (newQueryHash == lastQueryHash) {
+    return;
+  }
+
+  lastQueryHash = newQueryHash;
+
+  query.value = newQuery;
+
+  // Update search input if not in focus
+  if (searchInput.value && searchInput.value !== document.activeElement) {
+    updateSearchInput();
+  }
+
+  fetch();
+}
+
+/*
+|--------------------------------------------------------------------------
+| Fetch
+|--------------------------------------------------------------------------
+*/
+
+function fetchWithLoading(force = false) {
+  fetch(force, true);
+}
+
+function fetchWithoutLoading(force = false) {
+  fetch(force, false);
+}
+
+function fetch(force = false, showLoading = true) {
+  if (willUnmount) {
+    return;
+  }
+
+  const urlSplit = url.value.split(/[?#]/);
+
+  const baseUrl = urlSplit[0];
+  const urlQueryString = urlSplit[1] ?? null;
+  const urlQuery = config.parseQueryString(urlQueryString);
+
+  // Ordered by priority
+  const allParams = merge(
+    cloneDeep(query.value),
+    cloneDeep(props.urlQuery),
+    cloneDeep(urlQuery)
+  );
+
+  const queryString = config.formatQueryString(allParams);
+
+  const fullUrl = baseUrl + '?' + queryString;
+
+  if (lastUrl == fullUrl && !force) {
+    return;
+  }
+
+  if (showLoading) {
+    loading.value = true;
+  }
+
+  lastUrl = fullUrl;
+
+  http
+    .get(fullUrl)
+    .then((response) => {
+      data.value = response.data;
+      loading.value = false;
+      error.value = false;
+      firstLoad.value = true;
+      emit('fetch', data.value);
+    })
+    .catch(() => {
+      data.value = null;
+      loading.value = false;
+      error.value = true;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/*
+|--------------------------------------------------------------------------
+| Data parsing
+|--------------------------------------------------------------------------
+*/
+
+const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
+  null
+);
+
+const { items, paginationMetadata, lastPage } = useHasPaginatedData(data);
+
+const page = computed((): number => {
+  if (query.value.page && parseInt(query.value.page + '')) {
+    return parseInt(query.value.page + '');
+  }
+  return 1;
+});
+
+const sortField = computed((): string => {
+  return query.value.sort?.trim().replace(/^(-)/, '') ?? '';
+});
+
+const sortDirection = computed((): Direction => {
+  if (query.value.sort && query.value.sort.length) {
+    if (query.value.sort[0] == '-') {
+      return 'desc';
+    }
+  }
+  return 'asc';
+});
+
+const searchKeywords = computed((): string => {
+  return query.value.search ?? '';
+});
+
+/*
+|--------------------------------------------------------------------------
+| Helpers
+|--------------------------------------------------------------------------
+*/
+
+/** Scroll into view */
+
+const scrollIntoView = () => {
+  emit('will-scroll-top');
+
+  if (!props.scrollTopOnFetch) {
+    return;
+  }
+
+  scrollIntoViewAction();
+};
+
+const scrollIntoViewAction = () => {
+  if (dataIteratorNode.value == null) {
+    return;
+  }
+
+  dataIteratorNode.value.scrollIntoView({
+    behavior: 'smooth',
+  });
+};
+
+function updateSearchInput() {
+  searchQuery.value = searchKeywords.value;
+}
+
+const paginationStart = computed(() => {
+  if (paginationMetadata.value == null) {
+    return '';
+  }
+
+  return (
+    paginationMetadata.value.per_page *
+    (paginationMetadata.value.current_page - 1) +
+    1
+  );
+});
+
+const paginationEnd = computed(() => {
+  if (paginationMetadata.value == null) {
+    return '';
+  }
+
+  return Math.min(
+    paginationMetadata.value.current_page * paginationMetadata.value.per_page,
+    paginationMetadata.value.total
+  );
+});
+
+/*
+|--------------------------------------------------------------------------
+| Created
+|--------------------------------------------------------------------------
+*/
+
+let newQuery = cloneDeep(query.value);
+const routeQuery = getRouteQuery();
+
+newQuery = merge(newQuery, routeQuery);
+
+updateQuery(newQuery);
+
+// Update search input on first load
+onMounted(() => {
+  updateSearchInput();
+});
+
+/*
+|--------------------------------------------------------------------------
+| Sections
+|--------------------------------------------------------------------------
+*/
+
+const sectionModalActive = ref<null | number>(null);
+
+const sectionsInternal = computed<DataIteratorSection[]>(() => {
+  const sections = props.sections ?? [];
+
+  if (hasFilters.value) {
+    return [
+      {
+        name: 'filters',
+        title: t('sui.filters'),
+        closeText: t('sui.apply_filters'),
+        icon: 'heroicons:funnel',
+        opened: true,
+      },
+      ...sections,
+    ];
+  }
+
+  return sections;
+});
+
+function openSection(index: number) {
+  if (sectionsInternal.value[index]) {
+    sectionModalActive.value = index;
+  } else {
+    sectionModalActive.value = null;
+  }
+}
+
+function closeSection() {
+  sectionModalActive.value = null;
+}
+
+/*
+|--------------------------------------------------------------------------
+| Provide
+|--------------------------------------------------------------------------
+*/
+
+provide('dataIterator:width', width);
+
+/*
+|--------------------------------------------------------------------------
+| Exposed API
+|--------------------------------------------------------------------------
+*/
+
+defineExpose({
+  fetch: () => fetch(true),
+  fetchWithLoading: () => fetchWithLoading(true),
+  fetchWithoutLoading: () => fetchWithoutLoading(true),
+  scrollIntoView: scrollIntoViewAction,
+  query,
+});
+</script>