@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/lists/FSDataTableUI.vue

@@ -1,66 +1,85 @@
 <template>
   <FSCol
     gap="16px"
+    style="position: relative;"
   >
     <FSRow
-      align="bottom-center"
-      :wrap="isExtraSmall ? false : true"
+      v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
+      align="top-left"
+      :wrap="isMobileSized ? false : true"
       width="fill"
     >
       <slot
-        v-if="!isExtraSmall"
+        v-if="!isMobileSized"
         name="prepend-toolbar"
       />
-      <template
-        v-if="$props.showSearch"
+      <FSRow
+        align="top-left"
       >
-        <FSSearchField
-          prependInnerIcon="mdi-magnify"
-          :hideHeader="true"
-          v-model="innerSearch"
-        />
-        <FSButton
-          v-if="filterableHeaders.length > 0"
-          prependIcon="mdi-filter-variant"
-          :variant="showFilters ? 'full' : 'standard'"
-          @click="showFilters = !showFilters"
+        <FSRow
+          v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
+          align="bottom-left"
+        >
+          <FSSearchField
+            :hideHeader="true"
+            v-model="innerSearch"
+          />
+          <FSButton
+            v-if="filterableHeaders.length > 0"
+            prependIcon="mdi-filter-variant"
+            :variant="innerShowFilters ? 'full' : 'standard'"
+            @click="innerShowFilters = !innerShowFilters"
+          />
+          <slot
+            v-if="!isMobileSized"
+            name="toolbar"
+          />
+        </FSRow>
+        <slot
+          v-if="!isMobileSized"
+          name="append-toolbar"
         />
-      </template>
-      <slot
-        v-if="!isExtraSmall"
-        name="toolbar"
-      />
+      </FSRow>
       <template
-        v-if="!$props.disableTable && !$props.disableIterator"
+        v-if="(!$props.disableTable && !$props.disableIterator)"
       >
-        <v-spacer />
         <FSRow
-          align="center-right"
+          align="top-right"
+          width="hug"
+          :wrap="false"
         >
           <FSOptionGroup
+            v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"
             :singleColor="true"
             :required="true"
+            variant="slide"
             v-model="innerMode"
           />
         </FSRow>
       </template>
     </FSRow>
     <FSRow
-      v-if="isExtraSmall && hasToolbar"
+      v-if="isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])"
     >
-      <FSWrapGroup>
+      <FSSlideGroup>
+        <slot
+          name="prepend-toolbar"
+        />
         <slot
           name="toolbar"
         />
-      </FSWrapGroup>
+        <slot
+          name="append-toolbar"
+        />
+      </FSSlideGroup>
     </FSRow>
     <FSRow
       v-if="showFiltersRow"
       gap="16px"
     >
       <FSCol
-        v-if="showFilters && hasVisibleFilters"
+        v-if="innerShowFilters && hasVisibleFilters"
         width="hug"
       >
         <FSRow
@@ -94,12 +113,12 @@
           gap="8px"
         >
           <FSChip
-            v-if="showFilters && resetable"
+            v-if="innerShowFilters && resetable"
             variant="standard"
-            :label="$tr('ui.data-table.reset-filters', 'Reset')"
+            :label="$tr('data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
             :color="ColorEnum.Error"
-            :editable="true"
+            :clickable="true"
             @click="resetFilter"
           />
           <FSHiddenButton
@@ -122,7 +141,7 @@
         :headers="extraHeaders.concat(innerHeaders)"
         :sortBy="innerSortBy ? [innerSortBy] : []"
         :itemsPerPage="innerRowsPerPage"
-        :showSelect="$props.showSelect"
+        :selectable="$props.selectable"
         :hover="!$props.sortDraggable"
         :itemValue="$props.itemValue"
         :loading="$props.loading"
@@ -148,7 +167,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -245,7 +264,7 @@
                     width="hug"
                   >
                     <FSCheckbox
-                      v-if="$props.showSelect"
+                      v-if="$props.selectable"
                       :modelValue="props.item.items.every((item) => $props.modelValue.includes(item.key))"
                       :indeterminate="$props.modelValue.some((id) => props.item.items.some((item) => item.key === id)) && !props.item.items.every((item) => $props.modelValue.includes(item.key))"
                       @update:modelValue="toggleSelectGroup(props.item)"
@@ -290,25 +309,29 @@
               <slot
                 :name="`${header.slotName}-append`"
               />
-              <v-spacer />
-              <slot
-                :name="`${header.slotName}-configuration`"
+              <FSRow
+                align="center-right"
+                :wrap="false"
               >
-                <FSHeaderButton
-                  :first="index === 0"
-                  :last="index === headersSlots.length - 1"
-                  @update:hide="updateHeader(header, 'hidden', !header.hidden)"
-                  @update:left="updateHeader(header, 'index', -1)"
-                  @update:right="updateHeader(header, 'index', 1)"
-                />
-                <FSButton
-                  v-if="header.sortable"
-                  variant="icon"
-                  :color="sortColor(header, props)"
-                  :icon="sortIcon(header, props)"
-                  @click="toggleSort(header)"
-                />
-              </slot>
+                <slot
+                  :name="`${header.slotName}-configuration`"
+                >
+                  <FSHeaderButton
+                    :first="index === 0"
+                    :last="index === headersSlots.length - 1"
+                    @update:hide="updateHeader(header, 'hidden', !header.hidden)"
+                    @update:left="updateHeader(header, 'index', -1)"
+                    @update:right="updateHeader(header, 'index', 1)"
+                  />
+                  <FSButton
+                    v-if="header.sortable"
+                    variant="icon"
+                    :color="sortColor(header, props)"
+                    :icon="sortIcon(header, props)"
+                    @click="toggleSort(header)"
+                  />
+                </slot>
+              </FSRow>
             </FSRow>
           </slot>
         </template>
@@ -356,22 +379,23 @@
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                    {{ $tr("data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
-                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                    {{ $tr("data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
               <template
                 v-else
               >
-                <FSText>
-                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-                </FSText>
+                <FSRow>
+                  <FSText>
+                    {{ $tr("data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
+                  </FSText>
+                </FSRow>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               width="hug"
@@ -380,7 +404,7 @@
               <FSText
                 font="text-overline"
               >
-                {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
+                {{ $tr("data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSSelectField
                 class="fs-data-table-rows-per-page fs-small-input"
@@ -432,7 +456,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -446,7 +470,7 @@
               v-for="(item, index) in items"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -460,18 +484,20 @@
               >
                 <FSDataIteratorItem
                   v-if="item.type === 'item'"
-                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
+                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :clickable="onClickLibrary.clickable"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
+                  :selectable="$props.selectable"
+                  :singleSelect="$props.singleSelect"
+                  :to="$props.itemTo"
+                  :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
-                  @update:modelValue="toggleSelect"
-                  @auxclick="() => onClickLibrary.mobile($event, item)"
-                  @click="() => onClickLibrary.mobile($event, item)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect(item.raw)"
+                  v-bind="onClickLibrary.clickable ? {
+                    onClick: (event) => onClickLibrary.mobile(event, item),
+                    onAuxclick: (event) => onClickLibrary.mobile(event, item)
+                  } : {}"
                 >
                   <template
                     #item.top="props"
@@ -530,22 +556,23 @@
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                    {{ $tr("data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
-                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                    {{ $tr("data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
               <template
                 v-else
               >
-                <FSText>
-                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-                </FSText>
+                <FSRow>
+                  <FSText>
+                    {{ $tr("data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
+                  </FSText>
+                </FSRow>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               :wrap="false"
@@ -553,7 +580,7 @@
               <FSText
                 font="text-overline"
               >
-                {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
+                {{ $tr("data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSRow
                 width="120px"
@@ -602,7 +629,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -617,7 +644,7 @@
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -630,18 +657,20 @@
                 v-bind="{ index, item: item.raw, toggleSelect }"
               >
                 <FSDataIteratorItem
-                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
+                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :clickable="onClickLibrary.clickable"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
+                  :selectable="$props.selectable"
+                  :singleSelect="$props.singleSelect"
+                  :to="$props.itemTo"
+                  :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
-                  @update:modelValue="toggleSelect"
-                  @auxclick="() => onClickLibrary.mobile($event, item)"
-                  @click="() => onClickLibrary.mobile($event, item)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect(item.raw)"
+                  v-bind="onClickLibrary.clickable ? {
+                    onClick: (event) => onClickLibrary.mobile(event, item),
+                    onAuxclick: (event) => onClickLibrary.mobile(event, item)
+                  } : {}"
                 >
                   <template
                     #item.top="props"
@@ -684,7 +713,7 @@
     <div
       class="fs-data-table-intersection"
       :id="elementId"
-    />
+    /> 
   </FSCol>
 </template>
 
@@ -695,6 +724,7 @@ import { useRouter } from "vue-router";
 import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
 
 import { alphanumericSort, containsSearchTerm, sizeToVar } from "../../utils";
@@ -745,6 +775,11 @@ export default defineComponent({
       type: Array as PropType<FSDataTableColumn[]>,
       required: true
     },
+    showFilters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     filters: {
       type: Object as PropType<{ [key: string]: FSDataTableFilter[] }>,
       required: false,
@@ -804,7 +839,7 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    showSelect: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -814,6 +849,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    noSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     singleSelect: {
       type: Boolean,
       required: false,
@@ -832,7 +872,7 @@ export default defineComponent({
     mode: {
       type: String as PropType<"table" | "iterator">,
       required: false,
-      default: "iterator"
+      default: "table"
     },
     disableTable: {
       type: Boolean,
@@ -880,9 +920,10 @@ export default defineComponent({
       default: "12px"
     },
   },
-  emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
+  emits: ["update:modelValue", "update:headers", "update:search", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+    const { isExtraSmall, isMobileSized } = useBreakpoints();
+    const { handleRoutingEvent } = useRouting();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
     const router = useRouter();
@@ -894,9 +935,9 @@ export default defineComponent({
     const innerSearch: Ref<string | null> = ref(null);
     const innerRowsPerPage = ref(props.rowsPerPage);
     const innerSortBy = ref(props.sortBy);
-    const innerMode = ref(props.mode);
+    const innerMode = ref(props.disableTable ? "iterator" : props.disableIterator ? "table" : props.mode);
     const innerPage = ref(props.page);
-    const showFilters = ref(true);
+    const innerShowFilters = ref(props.showFilters);
     const resetable = ref(false);
 
     const intersectionObserver = ref<IntersectionObserver | null>(null);
@@ -913,11 +954,18 @@ export default defineComponent({
       { id: 5, label: "5" },
       { id: 10, label: "10" },
       { id: 30, label: "30" },
-      { id: -1, label: $tr("ui.data-table.all-rows", "All") }
+      { id: -1, label: $tr("ui.common.all", "All") }
     ];
 
     const showFiltersRow = computed((): boolean => {
-      return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+      switch (innerMode.value) {
+        case "iterator": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0);
+        }
+        case "table": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+        }
+      }
     });
 
     const hasVisibleFilters = computed((): boolean => {
@@ -925,11 +973,15 @@ export default defineComponent({
     });
 
     const showFiltersDivider = computed((): boolean => {
-      return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
-    });
-
-    const hasToolbar = computed((): boolean => {
-      return !!useSlots().slots["toolbar"];
+      switch (innerMode.value) {
+        case "iterator": {
+          return resetable.value;
+        }
+        case "table": {
+          return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+        }
+      }
+      
     });
 
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
@@ -989,7 +1041,7 @@ export default defineComponent({
           width: "0%"
         });
       }
-      if (props.showSelect) {
+      if (props.selectable) {
         extra.push({
           key: "data-table-select",
           width: "0%"
@@ -1020,20 +1072,27 @@ export default defineComponent({
     });
 
     const innerItems = computed((): any[] => {
-      const activeFilters: { key: string, filter: FSDataTableFilter }[] = Object.keys(filters.value).reduce((acc, key) => {
-        return acc.concat(filters.value[key].filter((filter) => filter.hidden).map((filter) => ({ key, filter })));
-      }, [] as { key: string, filter: FSDataTableFilter }[]);
+      // Select only the filters where a value is hidden, for others, accept all values
+      const activeFilters: { [key: string]: FSDataTableFilter[] } = Object.keys(filters.value).reduce((acc, key) => {
+        if (filters.value[key].some((filter) => filter.hidden)) {
+          acc[key] = filters.value[key].filter((filter) => !filter.hidden);
+        }
+        return acc;
+      }, {} as { [key: string]: FSDataTableFilter[] });
+
       if (props.items && props.items.length) {
         const innerSearchFormatted = innerSearch.value ? innerSearch.value.toLowerCase() : null;
         return props.items.filter((item) => {
           if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
-          if (innerSearchFormatted) {
-            return containsSearchTerm(item, innerSearchFormatted);
+          for (const property in activeFilters) {
+            if (!activeFilters[property].some((filter) => filter.filter && filter.filter(filter.value, item[property], item))) {
+              return false;
+            }
           }
-          if (activeFilters.some(af => af.filter.filter && af.filter.filter(af.filter.value, item[af.key], item))) {
-            return false;
+          if (!props.noSearch && innerSearchFormatted) {
+            return containsSearchTerm(item, innerSearchFormatted);
           }
           return true;
         });
@@ -1077,17 +1136,13 @@ export default defineComponent({
     });
 
     const onClickLibrary = computed((): { [key: string]: Function | boolean } => {
+      console.log(props["onClick:row"]);
       if (props["onClick:row"] || props.itemTo) {
         return {
           clickable: true,
           row: (event: PointerEvent, row: any) => {
             if (props.itemTo && router) {
-              if (event.metaKey || event.ctrlKey || event.button === 1) {
-                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
-              }
-              else {
-                router.push(props.itemTo(row.item));
-              }
+              handleRoutingEvent(event, props.itemTo(row.item), true);
             }
             else {
               emit("click:row", row.item);
@@ -1212,39 +1267,52 @@ export default defineComponent({
         const key = header.value!;
         const currentFilters = filters.value[key];
 
+        const getPath = (object: any, keys: string[]) => keys.reduce((acc, key) => acc[key] ?? null, object);
+
         let value: FSDataTableFilter[] = [];
 
         if (header.fixedFilters) {
           value = header.fixedFilters.map((ff): FSDataTableFilter => ({
             hidden: currentFilters?.find((cf) => cf.value == (ff.value || null))?.hidden ?? false,
             text: ff.text?.toString() ?? "—",
-            value: ff.value || null,
-            filter: header.methodFilter ?? ((value, property) => {
-              property = [property].flat();
-              return Array.isArray(property) ? property.includes(value) || (!value && property.length == 0) : (!value && !property) || value == property;
+            value: ff.value ?? null,
+            filter: header.methodFilter ?? ((_, property, item) => {
+              if (header.methodFilterRaw) {
+                return header.methodFilterRaw(ff.value, item);
+              }
+              const flat = property = [property].flat();
+              return (!ff.value && flat.length == 0) || flat.some(f => f == ff.value);
             })
           }));
+          filterDictionary[key] = value;
         }
         else {
           if (props.items && props.items.length) {
             const mapToInnerValue = header.innerValue ? header.innerValue : (i: any) => i;
-            const itemValues = props.items.flatMap((item) => Array.isArray(item[key]) && item[key].length == 0 ? undefined : item[key]).map(mapToInnerValue);
+            const itemValues = props.items.flatMap((item) => {
+              return Array.isArray(getPath(item, key.split("."))) && getPath(item, key.split(".")).length == 0 ? undefined : getPath(item, key.split("."))
+            }).map(mapToInnerValue);
             const distinctValues = [...new Set(itemValues)];
 
-            value = distinctValues.map((dv): FSDataTableFilter => ({
-              hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
-              text: dv?.toString() ?? "—",
-              value: dv || null,
-              filter: header.methodFilter ?? ((_, property) => {
-                property = [property].flat().map(mapToInnerValue);
-                return Array.isArray(property) ? property.includes(dv) || (!dv && property.length == 0) : (!dv && !property) || dv == property;
-              })
-            }));
+            value = distinctValues.map((dv): FSDataTableFilter => {
+              return {
+                hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
+                text: dv?.toString() ?? "—",
+                value: dv || null,
+                filter: header.methodFilter ?? ((_, property, item) => {
+                  if (header.methodFilterRaw) {
+                    return header.methodFilterRaw(dv, item);
+                  }
+                  const flat = [property].flat().map(mapToInnerValue);
+                  return (!dv && flat.length == 0) || flat.some(f => f == dv);
+                })
+              }
+            });
           }
+          filterDictionary[key] = value.sort((v1, v2) => {
+            return v1.text.localeCompare(v2.text, undefined, { numeric: true });
+          });
         }
-        filterDictionary[key] = value.sort((v1, v2) => {
-          return v1.text.localeCompare(v2.text, undefined, { numeric: true });
-        });
       }
       for (const [key, filters] of Object.entries(props.filters)) {
         for (const filter of filters) {
@@ -1311,6 +1379,7 @@ export default defineComponent({
             }, { threshold: [0.9] });
           }
           if (document.querySelector(`#${elementId}`)) {
+            intersectionObserver.value.unobserve(document.querySelector(`#${elementId}`)!);
             intersectionObserver.value.observe(document.querySelector(`#${elementId}`)!);
           }
           return;
@@ -1347,10 +1416,10 @@ export default defineComponent({
     };
 
     const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
+      if (initialIndex > currentIndex && tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
       }
-      else {
+      else if(tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
       }
     };
@@ -1466,8 +1535,17 @@ export default defineComponent({
       }
     });
 
+    watch(() => props.showFilters, () => {
+      innerShowFilters.value = props.showFilters;
+    });
+
     watch(innerSearch, () => {
       innerPage.value = 1;
+      emit("update:search", innerSearch.value);
+    });
+
+    watch(innerShowFilters, () => {
+      emit("update:showFilters", innerShowFilters.value);
     });
 
     watch(filters, () => {
@@ -1475,6 +1553,10 @@ export default defineComponent({
         .some((key) => filters.value[key].some((filter) => filter.hidden));
     }, { deep: true });
 
+    watch(size, () => {
+      observeIntersection();
+    });
+
     watch(innerMode, () => {
       emit("update:mode", innerMode.value);
       size.value = props.sizeIterator;
@@ -1499,13 +1581,14 @@ export default defineComponent({
 
     watch(() => props.items, async () => {
       computeFilters();
+      observeIntersection();
       if (innerPage.value !== 1) {
         const formerPage = innerPage.value;
         innerPage.value = 1;
         await nextTick();
         innerPage.value = formerPage;
       }
-    });
+    }, { deep: true });
 
     return {
       ColorEnum,
@@ -1516,9 +1599,8 @@ export default defineComponent({
       innerMode,
       modeOptions,
       innerPage,
-      hasToolbar,
       pageOptions,
-      showFilters,
+      innerShowFilters,
       showFiltersRow,
       showFiltersDivider,
       hasVisibleFilters,
@@ -1535,6 +1617,7 @@ export default defineComponent({
       classes,
       style,
       size,
+      isMobileSized,
       isExtraSmall,
       draggableDisabled,
       elementId,