sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseDataIterator.vue

@@ -1,986 +1,986 @@
-<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': sizeInternal.size.value == 'sm',
-            'mb-4': sizeInternal.size.value == 'md',
-          }"
-        >
-          <!-- Search bar -->
-          <div
-            v-if="searchable"
-            class="grow min-w-0"
-          >
-            <BaseInput
-              v-model="searchQuery"
-              :placeholder="t('sui.autocomplete_placeholder')"
-              :size="sizeInternal.size.value"
-              class="w-full"
-              :required="false"
-              icon-left="heroicons:magnifying-glass"
-              :icon-right="searchQuery ? 'heroicons:x-mark' : undefined"
-              @icon-right-click="searchQuery = ''; onSearch('');"
-              @update:model-value="onSearch"
-              @focus="searchInputFocus = true"
-              @blur="searchInputFocus = false"
-            />
-          </div>
-
-          <template v-if="compactLayout">
-            <BaseDataIteratorSectionButton
-              v-for="(section, i) in sectionsInternal"
-              :key="section.name"
-              :section="section"
-              :size="sizeInternal.size.value"
-              @open="openSection(i)"
-            />
-          </template>
-
-          <!-- Menu -->
-          <BaseMenu
-            v-if="actions && actions.length"
-            :size="sizeInternal.size.value == 'sm' ? 'xs' : 'sm'"
-            :items="actions"
-          >
-            <template #button="{ open }">
-              <BaseButton
-                as="div"
-                :size="sizeInternal.size.value"
-                :class="[
-                  open ? 'input-focus' : '',
-                ]"
-                icon="heroicons-solid:dots-vertical"
-              />
-            </template>
-          </BaseMenu>
-        </div>
-
-        <div
-          v-if="filtersPosition == 'top' && hasFilters"
-          :class="{
-            'mb-2.5': sizeInternal.size.value == 'sm',
-            'mb-4': sizeInternal.size.value == 'md',
-          }"
-        >
-          <BaseDataIteratorSectionBox :section="sectionFilter">
-            <slot
-              :name="sectionFilter.name"
-              :query="query"
-              :update-query="updateFilterQuery"
-              :update-query-value="updateFilterQueryValue"
-              :update-query-value-debounce="updateFilterQueryValueDebounce"
-            />
-          </BaseDataIteratorSectionBox>
-        </div>
-        <slot
-          :data="data"
-          :items="itemsInternal"
-          :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"
-              :update-query-value-debounce="updateFilterQueryValueDebounce"
-            />
-          </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"
-          :update-query-value-debounce="updateFilterQueryValueDebounce"
-        />
-      </BaseDataIteratorSectionModal>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { t } from '@/i18n';
-type Direction = 'asc' | 'desc';
-import { Size } from '@/utils/sizes';
-import BaseInput from './BaseInput.vue';
-import { useInputSize } from '@/composables/inputSize';
-import { deepIncludes } from '@/utils/deepIncludes';
-
-const DEFAULT_QUERY = {
-  page: 1,
-  search: '',
-  sort: '',
-  filter: {},
-} as DataTableQuery;
-</script>
-
-<script lang="ts" setup>
-import { cloneDeep, debounce, merge, set, sortBy, uniqueId } from 'lodash';
-import hash from 'object-hash';
-import { PropType } from 'vue';
-import {
-  Collection,
-  DataIteratorSection,
-  DataTableQuery,
-  PaginatedCollection,
-  ResourceCollection,
-} from '@/types';
-import { ActionItem } from '@/types';
-
-import BaseMenu from './BaseMenu.vue';
-import BaseButton from './BaseButton.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({
-
-  /**
-   * Data to display
-   */
-  items: {
-    default: undefined,
-    type: Array as PropType<Collection | undefined>,
-  },
-
-  /**
-   * Base URL from which to make requests
-   */
-  url: {
-    default: undefined,
-    type: String as PropType<string | undefined>,
-  },
-
-  /**
-   * 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<ActionItem[]>,
-  },
-
-  /**
-   * 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<Size>,
-  },
-
-  /**
-   * Sections
-   */
-  sections: {
-    default: undefined,
-    type: Array as PropType<DataIteratorSection[]>,
-  },
-
-  /**
-   * Scroll to top when fetching new data
-   */
-  scrollTopOnFetch: {
-    default: true,
-    type: Boolean,
-  },
-
-  /**
-   * Filters position
-   */
-  filtersPosition: {
-    default: 'section',
-    type: String as PropType<'section' | 'top'>,
-  },
-
-  /**
-   * Per page (only when using local data)
-   */
-  perPage: {
-    default: undefined,
-    type: Number,
-  },
-
-  /**
-   * Function to search local data
-   */
-  search: {
-    default: undefined,
-    type: Function as PropType<(items: Collection, search: string | null) => Collection>,
-  }
-});
-
-const LOCAL = 'local';
-const REMOTE = 'remote';
-
-const http = config.http;
-
-const emit = defineEmits([
-  'click',
-  'delete',
-  'checkAll',
-  'update:checked-rows',
-  'check',
-  'update:query',
-  'will-scroll-top',
-  'fetch',
-]);
-
-const dataMode = computed(() => {
-  if (props.url) {
-    return REMOTE;
-  }
-
-  return LOCAL;
-});
-
-const dataIteratorNode = ref<null | HTMLElement>(null);
-const searchInputFocus = ref(false);
-
-const route = useRoute();
-const router = useRouter();
-const routeName = route.name;
-
-const sizeInternal = useInputSize(props.size);
-
-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(false);
-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 | DataTableQuery, value?: any) {
-
-  if (typeof key === 'object') {
-    // If the key is an object, merge it into the query
-    let newQuery = cloneDeep(query.value);
-    newQuery = merge(newQuery, key);
-    newQuery = set(newQuery, 'page', 1);
-
-    updateQuery(newQuery);
-    return;
-  }
-
-  let newQuery = cloneDeep(query.value);
-  newQuery = set(newQuery, key, value);
-  newQuery = set(newQuery, 'page', 1);
-  updateQuery(newQuery);
-}
-
-const updateFilterQueryValueDebounce = debounce((key: string, value: any) => {
-  updateFilterQueryValue(key, value);
-}, 350);
-
-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 | undefined>(() => {
-  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);
-}, dataMode.value == REMOTE ? 350 : 0);
-
-/*
-|--------------------------------------------------------------------------
-| 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() {
-  if (!props.historyMode) {
-    return {};
-  }
-  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 (!searchInputFocus.value) {
-    updateSearchInput();
-  }
-
-  fetch();
-}
-
-/*
-|--------------------------------------------------------------------------
-| Fetch
-|--------------------------------------------------------------------------
-*/
-
-const fullQuery = computed(() => {
-
-  const urlSplit = (url.value + '').split(/[?#]/);
-  const urlQueryString = urlSplit[1] ?? null;
-  const urlQuery = config.parseQueryString(urlQueryString);
-
-  // Ordered by priority
-  const allParams = merge(
-    cloneDeep(query.value),
-    cloneDeep(props.urlQuery),
-    cloneDeep(urlQuery)
-  );
-
-  return allParams;
-});
-
-function fetchWithLoading(force = false) {
-  fetch(force, true);
-}
-
-function fetchWithoutLoading(force = false) {
-  fetch(force, false);
-}
-
-let requestId = '';
-
-function fetch(force = false, showLoading = true) {
-  if (willUnmount) {
-    return;
-  }
-
-  if (url.value == null) {
-    firstLoad.value = true;
-    return;
-  }
-
-  const fullQueryInternal = fullQuery.value;
-  const fullQueryString = config.formatQueryString(fullQueryInternal);
-
-  const urlSplit = url.value.split(/[?#]/);
-  const baseUrl = urlSplit[0];
-  const fullUrl = baseUrl + '?' + fullQueryString;
-
-  if (lastUrl == fullUrl && !force) {
-    return;
-  }
-
-  const requestIdInternal = uniqueId();
-  requestId = requestIdInternal;
-
-  if (showLoading) {
-    loading.value = true;
-  }
-
-  lastUrl = fullUrl;
-
-  http
-    .get(fullUrl)
-    .then((response) => {
-      if (requestIdInternal !== requestId) {
-        return;
-      }
-
-      data.value = response.data;
-      error.value = false;
-      firstLoad.value = true;
-      emit('fetch', data.value);
-    })
-    .catch(() => {
-      data.value = null;
-      error.value = true;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-/*
-|--------------------------------------------------------------------------
-| Data parsing
-|--------------------------------------------------------------------------
-*/
-
-const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
-  null
-);
-
-const page = computed((): number => {
-  if (query.value.page && parseInt(query.value.page + '')) {
-    return parseInt(query.value.page + '');
-  }
-
-  return 1;
-});
-
-const dataInternal = computed<ResourceCollection | PaginatedCollection | Collection | null | undefined>(() => {
-  if (dataMode.value == REMOTE) {
-    return data.value;
-  }
-
-  return searchItems(props.items);
-});
-
-const { items, paginationMetadata, lastPage } = useHasPaginatedData(
-  dataInternal,
-  page,
-  computed(() => {
-    if (dataMode.value == REMOTE) {
-      return undefined;
-    }
-
-    return props.perPage;
-  }),
-);
-
-const itemsInternal = computed(() => {
-  if (dataMode.value == REMOTE) {
-    return items.value;
-  }
-
-  return paginateItems(sortItems(items.value));
-});
-
-/*
-|--------------------------------------------------------------------------
-| Local data filtering, sorting and pagination
-|--------------------------------------------------------------------------
-*/
-
-function searchItems(items: Collection | undefined) {
-
-  if (!items) {
-    return [];
-  }
-
-  if (props.search) {
-    return props.search(items, searchKeywords.value);
-  }
-
-  return items.filter((it) => deepIncludes(it, searchKeywords.value));
-}
-
-function sortItems(items: Collection | undefined) {
-  if (!items) {
-    return [];
-  }
-
-  if (!sortField.value) {
-    return items;
-  }
-
-  if (!sortDirection.value) {
-    return items;
-  }
-
-  if (sortDirection.value == 'asc') {
-    return sortBy(items, sortField.value);
-  }
-
-  return sortBy(items, sortField.value).reverse();
-}
-
-function paginateItems(items: Collection | undefined) {
-  if (!items) {
-    return [];
-  }
-
-  if (!props.perPage) {
-    return items;
-  }
-
-  return items.slice(
-    (page.value - 1) * props.perPage,
-    page.value * props.perPage
-  );
-}
-
-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 sectionFilter = computed(() => {
-  return {
-    name: 'filters',
-    title: t('sui.filters'),
-    closeText: t('sui.apply_filters'),
-    icon: 'heroicons:funnel',
-    opened: true,
-  };
-});
-
-const sectionsInternal = computed<DataIteratorSection[]>(() => {
-  const sections = props.sections ?? [];
-
-  if (hasFilters.value && props.filtersPosition == 'section') {
-    return [
-      sectionFilter.value,
-      ...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: computed(() => fullQuery.value),
-  data: computed(() => dataInternal.value),
-});
-</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': sizeInternal.size.value == 'sm',
+            'mb-4': sizeInternal.size.value == 'md',
+          }"
+        >
+          <!-- Search bar -->
+          <div
+            v-if="searchable"
+            class="grow min-w-0"
+          >
+            <BaseInput
+              v-model="searchQuery"
+              :placeholder="t('sui.autocomplete_placeholder')"
+              :size="sizeInternal.size.value"
+              class="w-full"
+              :required="false"
+              icon-left="heroicons:magnifying-glass"
+              :icon-right="searchQuery ? 'heroicons:x-mark' : undefined"
+              @icon-right-click="searchQuery = ''; onSearch('');"
+              @update:model-value="onSearch"
+              @focus="searchInputFocus = true"
+              @blur="searchInputFocus = false"
+            />
+          </div>
+
+          <template v-if="compactLayout">
+            <BaseDataIteratorSectionButton
+              v-for="(section, i) in sectionsInternal"
+              :key="section.name"
+              :section="section"
+              :size="sizeInternal.size.value"
+              @open="openSection(i)"
+            />
+          </template>
+
+          <!-- Menu -->
+          <BaseMenu
+            v-if="actions && actions.length"
+            :size="sizeInternal.size.value == 'sm' ? 'xs' : 'sm'"
+            :items="actions"
+          >
+            <template #button="{ open }">
+              <BaseButton
+                as="div"
+                :size="sizeInternal.size.value"
+                :class="[
+                  open ? 'input-focus' : '',
+                ]"
+                icon="heroicons-solid:dots-vertical"
+              />
+            </template>
+          </BaseMenu>
+        </div>
+
+        <div
+          v-if="filtersPosition == 'top' && hasFilters"
+          :class="{
+            'mb-2.5': sizeInternal.size.value == 'sm',
+            'mb-4': sizeInternal.size.value == 'md',
+          }"
+        >
+          <BaseDataIteratorSectionBox :section="sectionFilter">
+            <slot
+              :name="sectionFilter.name"
+              :query="query"
+              :update-query="updateFilterQuery"
+              :update-query-value="updateFilterQueryValue"
+              :update-query-value-debounce="updateFilterQueryValueDebounce"
+            />
+          </BaseDataIteratorSectionBox>
+        </div>
+        <slot
+          :data="data"
+          :items="itemsInternal"
+          :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"
+              :update-query-value-debounce="updateFilterQueryValueDebounce"
+            />
+          </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"
+          :update-query-value-debounce="updateFilterQueryValueDebounce"
+        />
+      </BaseDataIteratorSectionModal>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { t } from '@/i18n';
+type Direction = 'asc' | 'desc';
+import { Size } from '@/utils/sizes';
+import BaseInput from './BaseInput.vue';
+import { useInputSize } from '@/composables/inputSize';
+import { deepIncludes } from '@/utils/deepIncludes';
+
+const DEFAULT_QUERY = {
+  page: 1,
+  search: '',
+  sort: '',
+  filter: {},
+} as DataTableQuery;
+</script>
+
+<script lang="ts" setup>
+import { cloneDeep, debounce, merge, set, sortBy, uniqueId } from 'lodash';
+import hash from 'object-hash';
+import { PropType } from 'vue';
+import {
+  Collection,
+  DataIteratorSection,
+  DataTableQuery,
+  PaginatedCollection,
+  ResourceCollection,
+} from '@/types';
+import { ActionItem } from '@/types';
+
+import BaseMenu from './BaseMenu.vue';
+import BaseButton from './BaseButton.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({
+
+  /**
+   * Data to display
+   */
+  items: {
+    default: undefined,
+    type: Array as PropType<Collection | undefined>,
+  },
+
+  /**
+   * Base URL from which to make requests
+   */
+  url: {
+    default: undefined,
+    type: String as PropType<string | undefined>,
+  },
+
+  /**
+   * 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<ActionItem[]>,
+  },
+
+  /**
+   * 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<Size>,
+  },
+
+  /**
+   * Sections
+   */
+  sections: {
+    default: undefined,
+    type: Array as PropType<DataIteratorSection[]>,
+  },
+
+  /**
+   * Scroll to top when fetching new data
+   */
+  scrollTopOnFetch: {
+    default: true,
+    type: Boolean,
+  },
+
+  /**
+   * Filters position
+   */
+  filtersPosition: {
+    default: 'section',
+    type: String as PropType<'section' | 'top'>,
+  },
+
+  /**
+   * Per page (only when using local data)
+   */
+  perPage: {
+    default: undefined,
+    type: Number,
+  },
+
+  /**
+   * Function to search local data
+   */
+  search: {
+    default: undefined,
+    type: Function as PropType<(items: Collection, search: string | null) => Collection>,
+  }
+});
+
+const LOCAL = 'local';
+const REMOTE = 'remote';
+
+const http = config.http;
+
+const emit = defineEmits([
+  'click',
+  'delete',
+  'checkAll',
+  'update:checked-rows',
+  'check',
+  'update:query',
+  'will-scroll-top',
+  'fetch',
+]);
+
+const dataMode = computed(() => {
+  if (props.url) {
+    return REMOTE;
+  }
+
+  return LOCAL;
+});
+
+const dataIteratorNode = ref<null | HTMLElement>(null);
+const searchInputFocus = ref(false);
+
+const route = useRoute();
+const router = useRouter();
+const routeName = route.name;
+
+const sizeInternal = useInputSize(props.size);
+
+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(false);
+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 | DataTableQuery, value?: any) {
+
+  if (typeof key === 'object') {
+    // If the key is an object, merge it into the query
+    let newQuery = cloneDeep(query.value);
+    newQuery = merge(newQuery, key);
+    newQuery = set(newQuery, 'page', 1);
+
+    updateQuery(newQuery);
+    return;
+  }
+
+  let newQuery = cloneDeep(query.value);
+  newQuery = set(newQuery, key, value);
+  newQuery = set(newQuery, 'page', 1);
+  updateQuery(newQuery);
+}
+
+const updateFilterQueryValueDebounce = debounce((key: string, value: any) => {
+  updateFilterQueryValue(key, value);
+}, 350);
+
+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 | undefined>(() => {
+  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);
+}, dataMode.value == REMOTE ? 350 : 0);
+
+/*
+|--------------------------------------------------------------------------
+| 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() {
+  if (!props.historyMode) {
+    return {};
+  }
+  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 (!searchInputFocus.value) {
+    updateSearchInput();
+  }
+
+  fetch();
+}
+
+/*
+|--------------------------------------------------------------------------
+| Fetch
+|--------------------------------------------------------------------------
+*/
+
+const fullQuery = computed(() => {
+
+  const urlSplit = (url.value + '').split(/[?#]/);
+  const urlQueryString = urlSplit[1] ?? null;
+  const urlQuery = config.parseQueryString(urlQueryString);
+
+  // Ordered by priority
+  const allParams = merge(
+    cloneDeep(query.value),
+    cloneDeep(props.urlQuery),
+    cloneDeep(urlQuery)
+  );
+
+  return allParams;
+});
+
+function fetchWithLoading(force = false) {
+  fetch(force, true);
+}
+
+function fetchWithoutLoading(force = false) {
+  fetch(force, false);
+}
+
+let requestId = '';
+
+function fetch(force = false, showLoading = true) {
+  if (willUnmount) {
+    return;
+  }
+
+  if (url.value == null) {
+    firstLoad.value = true;
+    return;
+  }
+
+  const fullQueryInternal = fullQuery.value;
+  const fullQueryString = config.formatQueryString(fullQueryInternal);
+
+  const urlSplit = url.value.split(/[?#]/);
+  const baseUrl = urlSplit[0];
+  const fullUrl = baseUrl + '?' + fullQueryString;
+
+  if (lastUrl == fullUrl && !force) {
+    return;
+  }
+
+  const requestIdInternal = uniqueId();
+  requestId = requestIdInternal;
+
+  if (showLoading) {
+    loading.value = true;
+  }
+
+  lastUrl = fullUrl;
+
+  http
+    .get(fullUrl)
+    .then((response) => {
+      if (requestIdInternal !== requestId) {
+        return;
+      }
+
+      data.value = response.data;
+      error.value = false;
+      firstLoad.value = true;
+      emit('fetch', data.value);
+    })
+    .catch(() => {
+      data.value = null;
+      error.value = true;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/*
+|--------------------------------------------------------------------------
+| Data parsing
+|--------------------------------------------------------------------------
+*/
+
+const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
+  null
+);
+
+const page = computed((): number => {
+  if (query.value.page && parseInt(query.value.page + '')) {
+    return parseInt(query.value.page + '');
+  }
+
+  return 1;
+});
+
+const dataInternal = computed<ResourceCollection | PaginatedCollection | Collection | null | undefined>(() => {
+  if (dataMode.value == REMOTE) {
+    return data.value;
+  }
+
+  return searchItems(props.items);
+});
+
+const { items, paginationMetadata, lastPage } = useHasPaginatedData(
+  dataInternal,
+  page,
+  computed(() => {
+    if (dataMode.value == REMOTE) {
+      return undefined;
+    }
+
+    return props.perPage;
+  }),
+);
+
+const itemsInternal = computed(() => {
+  if (dataMode.value == REMOTE) {
+    return items.value;
+  }
+
+  return paginateItems(sortItems(items.value));
+});
+
+/*
+|--------------------------------------------------------------------------
+| Local data filtering, sorting and pagination
+|--------------------------------------------------------------------------
+*/
+
+function searchItems(items: Collection | undefined) {
+
+  if (!items) {
+    return [];
+  }
+
+  if (props.search) {
+    return props.search(items, searchKeywords.value);
+  }
+
+  return items.filter((it) => deepIncludes(it, searchKeywords.value));
+}
+
+function sortItems(items: Collection | undefined) {
+  if (!items) {
+    return [];
+  }
+
+  if (!sortField.value) {
+    return items;
+  }
+
+  if (!sortDirection.value) {
+    return items;
+  }
+
+  if (sortDirection.value == 'asc') {
+    return sortBy(items, sortField.value);
+  }
+
+  return sortBy(items, sortField.value).reverse();
+}
+
+function paginateItems(items: Collection | undefined) {
+  if (!items) {
+    return [];
+  }
+
+  if (!props.perPage) {
+    return items;
+  }
+
+  return items.slice(
+    (page.value - 1) * props.perPage,
+    page.value * props.perPage
+  );
+}
+
+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 sectionFilter = computed(() => {
+  return {
+    name: 'filters',
+    title: t('sui.filters'),
+    closeText: t('sui.apply_filters'),
+    icon: 'heroicons:funnel',
+    opened: true,
+  };
+});
+
+const sectionsInternal = computed<DataIteratorSection[]>(() => {
+  const sections = props.sections ?? [];
+
+  if (hasFilters.value && props.filtersPosition == 'section') {
+    return [
+      sectionFilter.value,
+      ...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: computed(() => fullQuery.value),
+  data: computed(() => dataInternal.value),
+});
+</script>