npm - @vcmap/ui - Versions diffs - 5.0.0-rc.27 → 5.0.0-rc.29 - Mend

@vcmap/ui 5.0.0-rc.27 → 5.0.0-rc.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/build/bundle.js +2 -1
package/config/base.config.json +22 -0
package/config/www.config.json +1 -1
package/dist/assets/cesium/Workers/cesiumWorkerBootstrapper.js +1 -1
package/dist/assets/cesium/Workers/package.js +1 -1
package/dist/assets/cesium/Workers/transferTypedArrayTest.js +1 -1
package/dist/assets/{cesium.82fdbe.js → cesium.16590b.js} +29788 -29589
package/dist/assets/cesium.js +1 -1
package/dist/assets/{core.df069a.js → core.74da2a.js} +4330 -4231
package/dist/assets/core.js +1 -1
package/dist/assets/index-cb070eff.js +1 -0
package/dist/assets/{ol.90a5d0.js → ol.50a512.js} +11405 -11126
package/dist/assets/ol.js +1 -1
package/dist/assets/{ui.3ed7ff.css → ui.d3054c.css} +2 -2
package/dist/assets/{ui.3ed7ff.js → ui.d3054c.js} +2811 -2711
package/dist/assets/ui.js +1 -1
package/dist/assets/vue.js +2 -2
package/dist/assets/{vuetify.614278.js → vuetify.946bd8.js} +1 -1
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -1
package/index.js +1 -0
package/lib/olLib.js +6 -0
package/package.json +4 -4
package/plugins/@vcmap-show-case/window-tester/WindowExample.vue +27 -9
package/plugins/@vcmap-show-case/window-tester/index.js +13 -1
package/plugins/@vcmap-show-case/window-tester/windowExampleToggleChild.vue +11 -10
package/src/actions/actionHelper.js +7 -3
package/src/application/VcsApp.vue +31 -0
package/src/components/form-inputs-controls/VcsTextField.vue +3 -2
package/src/components/icons/+all.js +3 -3
package/src/components/lists/VcsTreeviewLeaf.vue +1 -1
package/src/components/lists/VcsTreeviewSearchbar.vue +9 -4
package/src/components/tables/VcsDataTable.vue +100 -13
package/src/contentTree/contentTreeCollection.js +22 -11
package/src/featureInfo/abstractFeatureInfoView.js +3 -1
package/src/featureInfo/balloonFeatureInfoView.js +3 -2
package/src/featureInfo/featureInfo.js +1 -0
package/src/i18n/de.js +4 -0
package/src/i18n/en.js +4 -0
package/src/manager/collectionManager/CollectionComponent.vue +6 -1
package/src/manager/collectionManager/collectionComponent.js +6 -0
package/src/manager/window/WindowComponent.vue +4 -1
package/src/manager/window/WindowComponentHeader.vue +25 -13
package/src/manager/window/windowManager.js +6 -2
package/src/navigation/overviewMap.js +1 -1
package/src/uiConfig.js +1 -0
package/src/vcsUiApp.js +29 -8
package/dist/assets/index-1cff371d.js +0 -1
/package/dist/assets/{vue.537ff3.js → vue.30740e.js} +0 -0
/package/dist/assets/{vuetify.614278.css → vuetify.946bd8.css} +0 -0
/package/src/components/icons/{PolygonIcon.vue → PointIcon.vue} +0 -0

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~3ed7ff~~.js";
1	+ export * from "./ui.d3054c.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.537ff3.js";
-import { default as f } from "./vue.537ff3.js";
+export * from "./vue.30740e.js";
+import { default as f } from "./vue.30740e.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.614278.js → vuetify.946bd8.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.614278.css');import v from "./vue.537ff3.js";
+} await loadCss('./assets/vuetify.946bd8.css');import v from "./vue.30740e.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.614278.js";
-import { default as f } from "./vuetify.614278.js";
+export * from "./vuetify.946bd8.js";
+import { default as f } from "./vuetify.946bd8.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -29,7 +29,7 @@
     />
     <link rel="icon" type="image/svg+xml" href="./assets/favicon.d5ec97.svg" />
-    <script type="module" crossorigin src="./assets/index-1cff371d.js"></script>
+    <script type="module" crossorigin src="./assets/index-cb070eff.js"></script>
   </head>
   <body style="height: 100vh">
     <noscript>

package/index.js CHANGED Viewed

@@ -139,6 +139,7 @@ export { default as VcsCompass } from './src/navigation/vcsCompass.vue';
 export { default as VcsZoomButton } from './src/navigation/vcsZoomButton.vue';
 export { createVueI18n, setupI18n } from './src/vuePlugins/i18n.js';
+export { i18nPluginSymbol } from './src/i18n/i18nCollection.js';
 export {
   createVuetify,
   vuetify,

package/lib/olLib.js CHANGED Viewed

@@ -50,6 +50,7 @@ export {default as ol$ViewHint} from 'ol/ViewHint';
 export {default as ol$ViewProperty} from 'ol/ViewProperty';
 export {binarySearch as ol$array$binarySearch} from 'ol/array';
 export {ascending as ol$array$ascending} from 'ol/array';
+export {descending as ol$array$descending} from 'ol/array';
 export {linearFindNearest as ol$array$linearFindNearest} from 'ol/array';
 export {reverseSubArray as ol$array$reverseSubArray} from 'ol/array';
 export {extend as ol$array$extend} from 'ol/array';
@@ -124,6 +125,8 @@ export {preventDefault as ol$events$Event$preventDefault} from 'ol/events/Event'
 export {default as ol$events$Event} from 'ol/events/Event';
 export {default as ol$events$EventType} from 'ol/events/EventType';
 export {default as ol$events$Key} from 'ol/events/Key';
+export {SnapEventType as ol$events$SnapEvent$SnapEventType} from 'ol/events/SnapEvent';
+export {SnapEvent as ol$events$SnapEvent$SnapEvent} from 'ol/events/SnapEvent';
 export {default as ol$events$Target} from 'ol/events/Target';
 export {all as ol$events$condition$all} from 'ol/events/condition';
 export {altKeyOnly as ol$events$condition$altKeyOnly} from 'ol/events/condition';
@@ -139,6 +142,7 @@ export {singleClick as ol$events$condition$singleClick} from 'ol/events/conditio
 export {doubleClick as ol$events$condition$doubleClick} from 'ol/events/condition';
 export {noModifierKeys as ol$events$condition$noModifierKeys} from 'ol/events/condition';
 export {platformModifierKeyOnly as ol$events$condition$platformModifierKeyOnly} from 'ol/events/condition';
+export {platformModifierKey as ol$events$condition$platformModifierKey} from 'ol/events/condition';
 export {shiftKeyOnly as ol$events$condition$shiftKeyOnly} from 'ol/events/condition';
 export {targetNotEditable as ol$events$condition$targetNotEditable} from 'ol/events/condition';
 export {mouseOnly as ol$events$condition$mouseOnly} from 'ol/events/condition';
@@ -507,6 +511,7 @@ export {register as ol$proj$proj4$register} from 'ol/proj/proj4';
 export {setEPSGLookup as ol$proj$proj4$setEPSGLookup} from 'ol/proj/proj4';
 export {getEPSGLookup as ol$proj$proj4$getEPSGLookup} from 'ol/proj/proj4';
 export {fromEPSGCode as ol$proj$proj4$fromEPSGCode} from 'ol/proj/proj4';
+export {epsgLookupMapTiler as ol$proj$proj4$epsgLookupMapTiler} from 'ol/proj/proj4';
 export {clear as ol$proj$projections$clear} from 'ol/proj/projections';
 export {get as ol$proj$projections$get} from 'ol/proj/projections';
 export {add as ol$proj$projections$add} from 'ol/proj/projections';
@@ -751,6 +756,7 @@ export {expressionToGlsl as ol$style$expressions$expressionToGlsl} from 'ol/styl
 export {uniformNameForVariable as ol$style$expressions$uniformNameForVariable} from 'ol/style/expressions';
 export {PALETTE_TEXTURE_ARRAY as ol$style$expressions$PALETTE_TEXTURE_ARRAY} from 'ol/style/expressions';
 export {toStyle as ol$style$flat$toStyle} from 'ol/style/flat';
+export {createDefaultStyle as ol$style$flat$createDefaultStyle} from 'ol/style/flat';
 export {SymbolType as ol$style$literal$SymbolType} from 'ol/style/literal';
 export {createOrUpdate as ol$tilecoord$createOrUpdate} from 'ol/tilecoord';
 export {getKeyZXY as ol$tilecoord$getKeyZXY} from 'ol/tilecoord';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.27",
+  "version": "5.0.0-rc.29",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -44,9 +44,9 @@
     "vue-i18n": "^8.24.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "~2.4.1",
-    "@vcmap/core": "^5.0.0-rc.35",
-    "ol": "~7.4.0",
+    "@vcmap-cesium/engine": "~2.4.3",
+    "@vcmap/core": "^5.0.0-rc.37",
+    "ol": "~7.5.1",
     "vue": "~2.7.3",
     "vuetify": "~2.6.7"
   },

package/plugins/@vcmap-show-case/window-tester/WindowExample.vue CHANGED Viewed

@@ -35,14 +35,16 @@
       const exampleWindows = [
         {
           id: 'dynamicLeft',
-          headerTitle: 'Example dynamicLeft',
+          state: {
+            headerTitle: ['windowTester.title', '-', 'Example dynamicLeft'],
+          },
           component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         {
           id: 'dynamicLeft2',
           state: {
-            headerTitle: 'Example dynamicLeft2',
+            headerTitle: ['windowTester.title', '-', 'Example dynamicLeft2'],
           },
           component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
@@ -50,7 +52,11 @@
         {
           id: 'dynamicLeft2 large',
           state: {
-            headerTitle: 'Example dynamicLeft2 with 1000px width',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example dynamicLeft2 with 1000px width',
+            ],
           },
           component: WindowExampleToggleChild,
           slot: WindowSlot.DYNAMIC_LEFT,
@@ -61,7 +67,7 @@
         {
           id: 'dynamicRight',
           state: {
-            headerTitle: 'Example dynamicRight',
+            headerTitle: ['windowTester.title', '-', 'Example dynamicRight'],
           },
           component: WindowExampleContent,
           headerComponent: MyCustomHeader,
@@ -73,7 +79,7 @@
         {
           id: 'dynamicRight2',
           state: {
-            headerTitle: 'Example dynamicRight2',
+            headerTitle: ['windowTester.title', '-', 'Example dynamicRight2'],
           },
           component: WindowExampleContent,
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -81,7 +87,7 @@
         {
           id: 'static',
           state: {
-            headerTitle: 'Example static',
+            headerTitle: ['windowTester.title', '-', 'Example static'],
             styles: { 'background-color': 'red' },
           },
           component: WindowExampleToggleChild,
@@ -90,7 +96,11 @@
         {
           id: 'static2',
           state: {
-            headerTitle: 'Example static2 With TestClass',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example static2 With TestClass',
+            ],
             classes: {
               vcsTest: computed(() => {
                 return showTestClass.value;
@@ -103,7 +113,11 @@
         {
           id: 'position1',
           state: {
-            headerTitle: 'Example position1 relative',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example position1 relative',
+            ],
           },
           component: WindowExampleToggleChild,
           position: {
@@ -117,7 +131,11 @@
           id: 'position2',
           state: {
             hideHeader: false,
-            headerTitle: 'Example position2 absolute',
+            headerTitle: [
+              'windowTester.title',
+              '-',
+              'Example position2 absolute',
+            ],
           },
           component: WindowExampleToggleChild,
           position: {

package/plugins/@vcmap-show-case/window-tester/index.js CHANGED Viewed

@@ -25,7 +25,7 @@ export default async function windowTester() {
         {
           id: 'window-tester',
           state: {
-            headerTitle: 'Window Tester',
+            headerTitle: 'windowTester.title',
           },
           component: windowExample,
           position: {
@@ -58,6 +58,18 @@ export default async function windowTester() {
       );
       this._destroyAction = [destroy, destroyToolboxData];
     },
+    i18n: {
+      de: {
+        windowTester: {
+          title: 'Fenster Tester',
+        },
+      },
+      en: {
+        windowTester: {
+          title: 'Window Tester',
+        },
+      },
+    },
     destroy() {
       if (this._destroyActions) {
         this._destroyActions.forEach((cb) => cb());

package/plugins/@vcmap-show-case/window-tester/windowExampleToggleChild.vue CHANGED Viewed

@@ -19,6 +19,16 @@
       const app = inject('vcsApp');
       const parentId = attrs['window-state'].id;
       const childId = `dynamicChild-${parentId}`;
+      const childComponent = {
+        id: childId,
+        parentId,
+        state: {
+          headerTitle: 'Example dynamicChild',
+          headerIcon: 'mdi-human-child',
+        },
+        component: WindowExampleContent,
+        slot: WindowSlot.DYNAMIC_CHILD,
+      };
       return {
         toggle(e) {
@@ -26,16 +36,7 @@
             app.windowManager.remove(childId);
           } else {
             e.stopPropagation();
-            app.windowManager.add(
-              {
-                id: childId,
-                parentId,
-                headerTitle: 'Example dynamicChild',
-                component: WindowExampleContent,
-                slot: WindowSlot.DYNAMIC_CHILD,
-              },
-              owner,
-            );
+            app.windowManager.add(childComponent, owner);
           }
         },
       };

package/src/actions/actionHelper.js CHANGED Viewed

@@ -284,7 +284,7 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
 /**
  * Creates an action which opens a given link in a new tab
  * @param {ActionOptions} actionOptions
- * @param {string} url
+ * @param {string|function():string} url
  * @returns {VcsAction}
  */
 export function createLinkAction(actionOptions, url) {
@@ -293,13 +293,17 @@ export function createLinkAction(actionOptions, url) {
     icon: [undefined, String],
     title: [undefined, String],
   });
-  check(url, String);
+  check(url, [String, Function]);
   return {
     ...actionOptions,
     callback() {
       const link = document.createElement('a');
-      link.href = url;
+      if (typeof url === 'string') {
+        link.href = url;
+      } else {
+        link.href = url();
+      }
       link.target = '_blank';
       link.click();
     },

package/src/application/VcsApp.vue CHANGED Viewed

@@ -94,6 +94,7 @@
   import VcsMap from './VcsMap.vue';
   import VcsNavbar from './VcsNavbar.vue';
   import {
+    createLinkAction,
     createMapButtonAction,
     createToggleAction,
   } from '../actions/actionHelper.js';
@@ -226,6 +227,9 @@
         state: {
           headerTitle: 'legend.title',
           headerIcon: '$vcsLegend',
+          infoUrl: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_legend',
+          ),
         },
         slot: WindowSlot.DYNAMIC_RIGHT,
         props: { entries },
@@ -324,6 +328,29 @@
     };
   }
+  /**
+   * This helper function will add a help action button referencing VC Map help page to the apps NavbarManager MENU location.
+   * @param {VcsUiApp} app
+   */
+  export function setupHelpButton(app) {
+    const helpAction = createLinkAction(
+      {
+        name: 'help.title',
+        title: 'help.tooltip',
+        icon: '$vcsHelp',
+      },
+      app.getHelpUrlCallback(),
+    );
+    app.navbarManager.add(
+      {
+        id: 'helpButton',
+        action: helpAction,
+      },
+      vcsAppSymbol,
+      ButtonLocation.MENU,
+    );
+  }
   /**
    * This helper function will add a category manager button to the navbar. The category Manager
    * will only be shown if there is at least one category under management in the categoryManager.
@@ -343,6 +370,9 @@
         state: {
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
+          infoUrl: app.getHelpUrlCallback(
+            '/components/contentspace.html#id_myWorkspace',
+          ),
         },
         component: CollectionManager,
         provides: {
@@ -517,6 +547,7 @@
       const mapNavbarListener = setupMapNavbar(app);
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
+      setupHelpButton(app);
       const destroyComponentsWindow = setupCategoryManagerWindow(app);
       const destroyThemingListener = setupUiConfigTheming(
         app,

package/src/components/form-inputs-controls/VcsTextField.vue CHANGED Viewed

@@ -233,8 +233,9 @@
             return attrs.value ?? '';
           }
         },
-        set(event) {
-          emit('input', event);
+        set() {
+          // emit is not needed, the vuetify component already emits an @input event. (forwarded listeners)
+          // emit('input', event);
         },
       });
       const type = computed(() => {

package/src/components/icons/+all.js CHANGED Viewed

@@ -63,7 +63,7 @@ import PlayCircleIcon from './PlayCircleIcon.vue';
 import PlusIcon from './PlusIcon.vue';
 import PoiIcon from './PoiIcon.vue';
 import PointSelectIcon from './PointSelectIcon.vue';
-import PolygonIcon from './PolygonIcon.vue';
+import PointIcon from './PointIcon.vue';
 import QueryIcon from './QueryIcon.vue';
 import PresentationModeIcon from './PresentationModeIcon.vue';
 import RectangleIcon from './RectangleIcon.vue';
@@ -328,8 +328,8 @@ const IconMap = {
   pointSelect: {
     component: PointSelectIcon,
   },
-  polygon: {
-    component: PolygonIcon,
+  point: {
+    component: PointIcon,
   },
   query: {
     component: QueryIcon,

package/src/components/lists/VcsTreeviewLeaf.vue CHANGED Viewed

@@ -14,7 +14,7 @@
             v-on="on"
             class="d-inline-block text-truncate"
             ref="titleElem"
-            >{{ $t(item.title) }}</span
+            >{{ $t(item.title || item.name) }}</span
           >
         </template>
       </VcsTooltip>

package/src/components/lists/VcsTreeviewSearchbar.vue CHANGED Viewed

@@ -6,7 +6,7 @@
       <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
     </slot>
-    <slot>
+    <slot v-bind="{ ...$props, on: $listeners }">
       <v-text-field
         solo
         dense
@@ -19,7 +19,7 @@
       />
     </slot>
-    <slot name="append">
+    <slot name="append" :has-filter="hasFilter">
       <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
     </slot>
   </div>
@@ -111,9 +111,14 @@
   import { VIcon, VTextField } from 'vuetify/lib';
   /**
-   * @description Stylized wrapper around vuetify divider
-   * @vue-prop {number} height - Height of the component.
+   * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
    * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
+   * @vue-prop {string[]} [customClasses] - CSS classes to customize style
+   * @vue-prop {string} [value] - The search value
+   * @vue-prop {boolean} [hasFilter=false] - Appends a filter icon
+   * @vue-data {slot} [prepend] - prepend slot overwriting search icon
+   * @vue-data {slot} [default] - default slot overwriting search input text field. binds all props
+   * @vue-data {slot} [append] - append slot overwriting filter icon. binds hasFilter prop
    */
   export default {
     name: 'VcsTreeviewSearchbar',

package/src/components/tables/VcsDataTable.vue CHANGED Viewed

@@ -4,7 +4,18 @@
       v-if="showSearchbar"
       :placeholder="$t(searchbarPlaceholder)"
       v-model="search"
-    />
+      @input="handleSearch"
+    >
+      <template #prepend="scope">
+        <slot name="prepend" v-bind="scope" />
+      </template>
+      <template #default="scope">
+        <slot v-bind="scope" />
+      </template>
+      <template #append="scope">
+        <slot name="append" v-bind="scope" />
+      </template>
+    </VcsTreeviewSearchbar>
     <v-data-table
       dense
       :headers="translatedHeaders"
@@ -22,14 +33,20 @@
         $t('components.vcsDataTable.noResultsPlaceholder')
       "
       :single-select="singleSelect"
+      :server-items-length="serverItemsLength"
       hide-default-footer
       v-bind="$attrs"
       v-on="$listeners"
       class="vcs-table rounded-0"
+      @update:options="(o) => $emit('update:items', { ...o, search })"
     >
       <!-- eslint-disable-next-line -->
       <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
-        <slot :name="slot" v-bind="scope" />
+        <slot
+          v-if="!['prepend', 'default', 'append'].includes(slot)"
+          :name="slot"
+          v-bind="scope"
+        />
       </template>
       <!-- eslint-disable-next-line -->
       <template v-slot:header.data-table-select="{ props, on }">
@@ -54,10 +71,11 @@
         </div>
       </template>
       <!-- eslint-disable-next-line -->
-      <template v-slot:item.data-table-select="{ isSelected, select, index }">
+      <template #item.data-table-select="{ isSelected, select, item, index }">
         <div @mouseover="hovering = index" @mouseout="hovering = null">
           <v-icon
             v-if="isSelected"
+            :disabled="item.disabled"
             @click="select(!isSelected)"
             class="vcs-select-icon"
           >
@@ -67,17 +85,23 @@
             v-else-if="
               hovering === index || (!singleSelect && value.length > 0)
             "
+            :disabled="item.disabled"
             @click="select(!isSelected)"
             class="vcs-select-icon"
           >
             mdi-circle-outline
           </v-icon>
-          <v-icon v-else @click="select(!isSelected)" class="vcs-select-icon">
+          <v-icon
+            v-else
+            :disabled="item.disabled"
+            @click="select(!isSelected)"
+            class="vcs-select-icon"
+          >
             mdi-circle-small
           </v-icon>
         </div>
       </template>
-      <template #footer v-if="items.length > itemsPerPageRef">
+      <template #footer v-if="showFooter">
         <v-divider />
         <v-container class="pa-2 vcs-pagination-bar">
           <v-row dense no-gutters justify="center" class="align-center">
@@ -143,14 +167,31 @@
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
+  /**
+   * @typedef {Object} UpdateItemsEvent
+   * @property {number} page
+   * @property {number} itemsPerPage
+   * @property {string[]} sortBy
+   * @property {boolean[]} sortDesc
+   * @property {string[]} groupBy
+   * @property {boolean[]} groupDesc
+   * @property {boolean} multiSort
+   * @property {boolean} mustSort
+   * @property {string} search
+   */
   /**
    * @description A wrapper around {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table } with custom pagination
+   * Passes all slots to v-data-table and 'prepend', 'default' and 'append' slots to VcsSearchbar
    * @vue-prop {Array<Object>} items - array of items, where each item must provide a unique key
    * @vue-prop {string} itemKey - the key property, which is unique on all items.
+   * @vue-prop {number} serverItemsLength - number of total items on a backend. Used for server-side pagination.
+   * @vue-prop {number} serverPagesLength - number of total pages on a backend. Used for server-side pagination.
    * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names. Text will be translated
    * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
    * @vue-prop {string} [searchbarPlaceholder] - placeholder for searchbar
    * @vue-prop {boolean} [singleSelect=false]
+   * @vue-event {UpdateItemsEvent} update:items - Emits when one of the options properties is updated or on search input. Can be used to update items via API call to a server.
    * @vue-computed {Array<TableItem>} filteredItems - array of items with search filter applied on. If search string is empty, same as items array.
    * @vue-computed {Array<import("vuetify").DataTableHeader>} translatedHeaders - array of translated header items.
    * @vue-computed {number} numberOfItems - number of filtered items (depending on search).
@@ -187,6 +228,14 @@
         type: String,
         required: true,
       },
+      serverItemsLength: {
+        type: Number,
+        default: -1,
+      },
+      serverPagesLength: {
+        type: Number,
+        default: -1,
+      },
       itemsPerPage: {
         type: Number,
         default: 10,
@@ -212,7 +261,7 @@
         default: () => [],
       },
     },
-    setup(props) {
+    setup(props, { attrs, emit }) {
       const vm = getCurrentInstance().proxy;
       const hovering = ref(null);
       /**
@@ -230,12 +279,15 @@
         if (filter) {
           const q = filter.toLocaleLowerCase();
           return Object.values(item).some((i) => {
-            const content = i.toString();
-            const translated = vm.$t(content);
-            return (
-              translated.toLowerCase().includes(q) ||
-              content.toLowerCase().includes(q)
-            );
+            if (i) {
+              const content = i.toString();
+              const translated = vm.$t(content);
+              return (
+                translated.toLowerCase().includes(q) ||
+                content.toLowerCase().includes(q)
+              );
+            }
+            return false;
           });
         }
         return true;
@@ -249,7 +301,12 @@
           handleFilter(item.value, search.value, item),
         ),
       );
-      const numberOfItems = computed(() => filteredItems.value.length);
+      const numberOfItems = computed(() => {
+        if (props.serverItemsLength > -1) {
+          return props.serverItemsLength;
+        }
+        return filteredItems.value.length;
+      });
       const totalNumber = computed(() => props.items.length);
       /**
@@ -267,6 +324,9 @@
        */
       const itemsPerPageRef = ref(props.itemsPerPage);
       const numberOfPages = computed(() => {
+        if (props.serverPagesLength > -1) {
+          return props.serverPagesLength;
+        }
         return Math.ceil(numberOfItems.value / itemsPerPageRef.value);
       });
       /**
@@ -281,6 +341,31 @@
         return last < numberOfItems.value ? last : numberOfItems.value;
       });
+      const handleSearch = () => {
+        page.value = 1;
+        const { sortBy, sortDesc, groupBy, groupDesc, multiSort, mustSort } =
+          attrs;
+        // attrs of v-data-table cannot be accessed outside this component but are necessary for server-side pagination and search
+        // hence all relevant variables are emitted
+        emit('update:items', {
+          page: page.value,
+          itemsPerPage: itemsPerPageRef.value,
+          sortBy,
+          sortDesc,
+          groupBy,
+          groupDesc,
+          multiSort,
+          mustSort,
+          search: search.value,
+        });
+      };
+      const showFooter = computed(
+        () =>
+          props.items.length > itemsPerPageRef.value ||
+          props.serverItemsLength > itemsPerPageRef.value,
+      );
       return {
         hovering,
         search,
@@ -306,7 +391,9 @@
           itemsPerPageRef.value = number;
         },
         handleFilter,
+        handleSearch,
         translatedHeaders,
+        showFooter,
       };
     },
   };