@vcmap/ui 6.1.0-rc.1 → 6.1.0-rc.2

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-08446666.js";
+export * from "./ui-5135917c.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-2f81c7f8.js";
+export * from "./vue-c3c55d88.js";

package/dist/assets/{vuetify-67025c41.js → vuetify-f02b7bb9.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-67025c41.css');import { watch as X, onScopeDispose as tt, effectScope as Ul, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Ne, toRefs as Wt, capitalize as On, isVNode as Oc, Comment as Rc, unref as ot, warn as Ha, getCurrentInstance as Nc, ref as W, provide as Ae, inject as ye, defineComponent as Hc, camelize as Ir, h as jt, toRaw as Ee, createVNode as r, mergeProps as N, onBeforeUnmount as nt, readonly as Kl, onDeactivated as _r, onActivated as zc, onMounted as Ke, nextTick as Se, TransitionGroup as ql, Transition as Ht, isRef as _n, toRef as F, onBeforeMount as Xl, withDirectives as $e, resolveDirective as dt, vShow as xt, onUpdated as Wc, Text as jc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Uc, cloneVNode as Kc, createTextVNode as Pt, onUnmounted as qc, onBeforeUpdate as Xc, withModifiers as Pl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Tr } from "./vue-2f81c7f8.js";
+} await loadCss('./assets/vuetify-f02b7bb9.css');import { watch as X, onScopeDispose as tt, effectScope as Ul, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Ne, toRefs as Wt, capitalize as On, isVNode as Oc, Comment as Rc, unref as ot, warn as Ha, getCurrentInstance as Nc, ref as W, provide as Ae, inject as ye, defineComponent as Hc, camelize as Ir, h as jt, toRaw as Ee, createVNode as r, mergeProps as N, onBeforeUnmount as nt, readonly as Kl, onDeactivated as _r, onActivated as zc, onMounted as Ke, nextTick as Se, TransitionGroup as ql, Transition as Ht, isRef as _n, toRef as F, onBeforeMount as Xl, withDirectives as $e, resolveDirective as dt, vShow as xt, onUpdated as Wc, Text as jc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Uc, cloneVNode as Kc, createTextVNode as Pt, onUnmounted as qc, onBeforeUpdate as Xc, withModifiers as Pl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Tr } from "./vue-c3c55d88.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-67025c41.js";
+export * from "./vuetify-f02b7bb9.js";

package/index.d.ts

@@ -240,6 +240,8 @@ export * from "./src/components/composables.js";
 export type * from "./src/components/composables.d.ts";
 export { default as Search } from "./src/search/search.js";
 export type * from "./src/search/search.d.ts";
+export { markText } from "./src/search/markText.js";
+export type * from "./src/search/markText.d.ts";
 export { default as ResultItemComponent } from "./src/search/ResultItem.vue";
 export type * from "./src/search/ResultItem.vue.d.ts";
 export { default as ResultsComponent } from "./src/search/ResultsComponent.vue";

package/index.js

@@ -325,5 +325,6 @@ export * from './src/components/modelHelper.js';
 export * from './src/components/composables.js';
 export { LegendType, StyleRowType } from './src/legend/legendHelper.js';
 export { default as Search } from './src/search/search.js';
+export { markText } from './src/search/markText.js';
 export { default as ResultItemComponent } from './src/search/ResultItem.vue';
 export { default as ResultsComponent } from './src/search/ResultsComponent.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.1.0-rc.1",
+  "version": "6.1.0-rc.2",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {

package/src/application/VcsApp.vue.d.ts

@@ -358,6 +358,10 @@ declare const _default: import("vue").DefineComponent<{
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - can be used to apply a scale factor the the overviewMap
+         */
+        readonly overviewMapScaleFactor?: number | undefined;
     };
     showFooter: import("vue").ComputedRef<boolean>;
     footerHeight: import("vue").ComputedRef<number>;

package/src/application/VcsContainer.vue

@@ -10,13 +10,14 @@
     fluid
     absolute
   >
-    <template v-if="xs">
+    <template v-if="smAndDown">
       <img
         v-if="mobileLogo"
         :src="mobileLogo"
         alt="Logo"
         draggable="false"
         class="mobile-logo"
+        :class="{ 'mobile-logo': sm }"
       />
     </template>
     <!--VcsButton
@@ -69,7 +70,6 @@
     left: 1rem;
     z-index: 1;
   }
-
   .mobile-attribution-btn {
     position: fixed;
     right: 2px;
@@ -111,10 +111,12 @@
     setup() {
       /** @type {import("../vcsUiApp.js").default} */
       const app = inject('vcsApp');
-      const { xs } = useDisplay();
+      const { smAndDown, xs, sm } = useDisplay();
       return {
         config: app.uiConfig.config,
+        smAndDown,
         xs,
+        sm,
         mobileLogo: computed(
           () =>
             app.uiConfig.config.mobileLogo ??

package/src/application/VcsContainer.vue.d.ts

@@ -278,8 +278,14 @@ declare const _default: import("vue").DefineComponent<{
          * - open the legend window, if new layer has a config
          */
         readonly openLegendOnAdd?: boolean | undefined;
+        /**
+         * - can be used to apply a scale factor the the overviewMap
+         */
+        readonly overviewMapScaleFactor?: number | undefined;
     };
+    smAndDown: import("vue").Ref<boolean>;
     xs: import("vue").Ref<boolean>;
+    sm: import("vue").Ref<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     attributionAction: {

package/src/application/VcsNavbar.vue

@@ -14,7 +14,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="mapActions"
-                :overflow-count="3"
+                :overflow-count="smAndDown ? 2 : 3"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -29,7 +29,7 @@
               />
               <VcsActionButtonList
                 :actions="contentActions"
-                :overflow-count="xs ? 3 : 4"
+                :overflow-count="smAndDown ? 2 : 3"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -41,8 +41,9 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                :overflow-count="smAndDown ? 1 : 2"
                 :force-overflow="false"
-                v-if="mdAndUp"
+                v-if="smAndUp"
                 button="VcsToolButton"
               />
             </div>
@@ -50,7 +51,7 @@
         </v-col>
         <v-col class="d-flex justify-center flex-grow-2 mx-2">
           <div class="d-flex align-center">
-            <template v-if="!xs">
+            <template v-if="!smAndDown">
               <img class="logo" :src="logo" draggable="false" alt="Logo" />
             </template>
             <div
@@ -63,10 +64,11 @@
           </div>
         </v-col>
         <v-col class="align-content-end d-flex justify-end">
-          <v-toolbar-items v-if="mdAndUp">
+          <v-toolbar-items v-if="smAndUp">
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :overflow-count="smAndDown ? 1 : 2"
                 :force-overflow="false"
                 button="VcsToolButton"
               />
@@ -206,7 +208,7 @@
         destroySearchAction();
       });
 
-      const { xs, mdAndUp } = useDisplay();
+      const { xs, mdAndUp, smAndDown, smAndUp } = useDisplay();
 
       const density = computed(() => {
         return xs.value ? 'comfortable' : 'compact';
@@ -228,8 +230,10 @@
         config: app.uiConfig.config,
         logo,
         xs,
+        smAndDown,
         density,
         mdAndUp,
+        smAndUp,
         toolbarHeight,
       };
     },

package/src/application/VcsNavbar.vue.d.ts

@@ -42,8 +42,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     config: any;
     logo: import("vue").ComputedRef<any>;
     xs: import("vue").Ref<boolean>;
+    smAndDown: import("vue").Ref<boolean>;
     density: import("vue").ComputedRef<"compact" | "comfortable">;
     mdAndUp: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
     toolbarHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/components/buttons/VcsActionButtonList.vue

@@ -38,12 +38,14 @@
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
-    <v-spacer
-      v-else-if="blockOverflow"
-      class="flex-grow-0 d-inline-block px-2"
-    />
+    <v-spacer v-else-if="blockOverflow" />
   </div>
 </template>
+<style scoped lang="scss">
+  :deep(.v-spacer) {
+    width: calc(var(--v-vcs-font-size) * 1.25);
+  }
+</style>
 <script>
   import { VIcon, VMenu, VSpacer } from 'vuetify/components';
   import VcsButton from './VcsButton.vue';

package/src/components/buttons/VcsToolButton.vue

@@ -82,7 +82,6 @@
    * @vue-prop {string}                                 icon - When given, will display an icon in the button. Replaces vuetify icon property.
    * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
-   * @vue-prop {Object<string, any>}                    tooltipProps - Properties to be passed to the tooltip {@link https://vuetifyjs.com/en/api/v-tooltip/#props|vuetify v-tooltip}
    * @vue-computed {string}                             appliedColor - color applied to button, depending on size and state
    * @vue-computed {boolean}                            hasDefaultSlot
    */

package/src/components/form-inputs-controls/VcsDatePicker.vue

@@ -18,7 +18,8 @@
         v-model="localValue"
         hide-header
         @update:model-value="menuOpen = false"
-        color="primary"
+        :color="datePickerProps.color ?? 'primary'"
+        v-bind="{ ...datePickerProps }"
       >
         <template #actions>
           <v-btn color="primary" @click="goToToday">
@@ -40,6 +41,7 @@
    * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/date-pickers/#internationalization}.
    * @vue-prop {Date} modelValue - value of the date picker as a Date (changes to the Date Object are not tracked, handled as atomic value)
    * @vue-prop {string} [icon] - specify optional prepend icon, defaults to mdi-calendar
+   * @vue-prop {Object} [datePickerProps] - props that are passed to the {@link https://vuetifyjs.com/en/api/v-date-picker/ | VDatePicker}
    */
   export default {
     name: 'VcsDatePicker',
@@ -52,6 +54,10 @@
         type: String,
         default: 'mdi-calendar',
       },
+      datePickerProps: {
+        type: Object,
+        default: () => ({}),
+      },
     },
     components: {
       VMenu,

package/src/components/form-inputs-controls/VcsDatePicker.vue.d.ts

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    datePickerProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     formattedDate: import("vue").WritableComputedRef<string>;
     localValue: import("vue").WritableComputedRef<Date>;
@@ -22,10 +26,15 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    datePickerProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     icon: string;
     modelValue: Date;
+    datePickerProps: Record<string, any>;
 }, {}>;
 export default _default;

package/src/components/form-inputs-controls/VcsTextArea.vue

@@ -110,7 +110,7 @@
   // Not color, just used if label is given
   :deep(.v-field--focused:not(.v-field--error) .v-field__outline *::after) {
     border-color: rgb(var(--v-theme-primary));
-    border-width: 1px !important;
+    border-width: 0 0 1px !important;
   }
 
   // remove margin from prepended Icon

package/src/components/import/VcsImportComponent.vue

@@ -12,6 +12,7 @@
       v-bind="noListenerAttrs"
       v-model="files"
     />
+    <slot />
     <div class="d-flex justify-end gc-1 mx-3 pt-2 pb-1">
       <vcs-form-button
         variant="filled"
@@ -41,6 +42,7 @@
    * @vue-prop {function(Array<File>):boolean} importFiles - the callback to
    * @vue-prop {string[]} [fileTypes=[]] - accepted file types, see https://html.spec.whatwg.org/multipage/input.html#attr-input-accept
    * @vue-prop {boolean} [multiple=true] - allows or disallows importing multiple files at once
+   * @vue-data {#default} - Slot to add additional html after file input and before the buttons
    */
   export default {
     name: 'VcsImportComponent',

package/src/components/lists/VcsList.vue

@@ -85,7 +85,6 @@
   import {
     computed,
     getCurrentInstance,
-    inject,
     isReactive,
     reactive,
     ref,
@@ -169,7 +168,8 @@
    * @vue-prop {boolean} [selectable=false]
    * @vue-prop {boolean} [singleSelect=false]
    * @vue-prop {Array<import("./VcsListItemComponent.vue").VcsListItem>} [value=[]] - the initial items to be selected.
-   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched. you can provide your own predicate function by providing "filterPredicate" which is of type function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean
+   * @vue-prop {boolean} [searchable=false] - if this list can have its items searched.
+   * @vue-prop {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string} [searchbarPlaceholder] - placeholder to render inside the search field
    * @vue-prop {boolean} [showTitle=true] - show the title component
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
@@ -221,6 +221,10 @@
         type: Boolean,
         default: false,
       },
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
       searchbarPlaceholder: {
         type: String,
         default: undefined,
@@ -313,15 +317,15 @@
 
       const vm = getCurrentInstance().proxy;
       /** @type {function(import("./VcsListItemComponent.vue").VcsListItem, string):boolean} */
-      const filterPredicate = inject(
-        'filterPredicate',
-        (item, queryString = '') => {
-          const translatedTitle = vm.$st(item.title);
-          return translatedTitle
-            .toLocaleLowerCase()
-            .includes(queryString.toLocaleLowerCase());
-        },
-      );
+      const filterPredicate = (item, queryString = '') => {
+        if (props.customFilter) {
+          return props.customFilter(item, queryString);
+        }
+        const translatedTitle = vm.$st(item.title);
+        return translatedTitle
+          .toLocaleLowerCase()
+          .includes(queryString.toLocaleLowerCase());
+      };
 
       /**
        * @type {import("./VcsListItemComponent.vue").VcsListItem|null}

package/src/components/lists/VcsList.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
     searchbarPlaceholder: {
         type: StringConstructor;
         default: undefined;
@@ -119,6 +123,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
     searchbarPlaceholder: {
         type: StringConstructor;
         default: undefined;
@@ -160,6 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     tooltip: string;
     selectable: boolean;
     actions: unknown[];
+    customFilter: Function;
     searchbarPlaceholder: string;
     actionButtonListOverflowCount: number;
     singleSelect: boolean;

package/src/components/lists/VcsTreeNode.vue

@@ -10,7 +10,7 @@
         class="chevron-btn"
         variant="text"
         :icon="isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'"
-        @click="isOpen = !isOpen"
+        @click="bubbleItemToggled(item.name)"
       />
       <slot name="prepend" v-bind="{ item }">
         <span class="prepend">
@@ -49,11 +49,12 @@
           :key="child.name"
           :item="child"
           :search="search"
+          :custom-filter="customFilter"
           :level="level + 1"
           :open-on-click="openOnClick"
           :item-children="itemChildren"
           :opened="opened"
-          @item-toggled="bubbleItemToggled(child, e)"
+          @item-toggled="bubbleItemToggled"
           @click="bubbleItemClicked"
         >
           <template v-for="slot of forwardSlots" #[slot]="scope">
@@ -98,6 +99,7 @@
    * @vue-prop {string} [itemChildren='children'] - The property key of the children.
    * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click..
    * @vue-prop {string} [search] - The search string to filter the tree.
+   * @vue-prop {function(VcsTreeNodeItem, string|undefined):boolean}} [customFilter] - a function to customize filtering when searching.
    * @vue-data {slot} [#prepend] - A slot prepended to the item, binding the item. Default fallback renders an image.
    * @vue-data {slot} [#title] - A slot to render the item title, binding the item. Default fallback renders a translatable title using the VcsTreeviewTitle component.
    * @vue-data {slot} [#append] - A slot appended to the item, binding the item. Default fallback renders the VcsActionButtonList if the item has an array of Actions.
@@ -139,6 +141,14 @@
         type: String,
         default: undefined,
       },
+      /**
+       * @param {VcsTreeNodeItem} item The item to check the match for.
+       * @param {string} search The search value.
+       */
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
     },
     emits: ['itemToggled', 'click'],
     setup(props, { emit, slots }) {
@@ -146,19 +156,16 @@
       const iconSize = useIconSize();
       const forwardSlots = getForwardSlots(slots);
 
-      const isOpen = computed({
-        get: () => props.opened?.includes(props.item.name),
-        set: (value) => {
-          emit('itemToggled', props.item.name, value);
-        },
-      });
-
+      const isOpen = computed(() => props.opened.includes(props.item.name));
       const children = computed(() => props.item[props.itemChildren] ?? []);
 
       const matchFilter = computed(() => {
         if (!props.search) {
           return true;
         }
+        if (props.customFilter) {
+          return props.customFilter(props.item, props.search);
+        }
         const translatedTitle = (item) =>
           item.title ? vm.$t(item.title) : item.name;
 
@@ -179,8 +186,8 @@
         children,
 
         // Bubble up events for the nested tree-items
-        bubbleItemToggled: (itemName, openState) => {
-          emit('itemToggled', itemName, openState);
+        bubbleItemToggled: (itemName) => {
+          emit('itemToggled', itemName);
         },
         bubbleItemClicked: (item, event) => {
           emit('click', item, event);

package/src/components/lists/VcsTreeview.vue

@@ -11,6 +11,7 @@
         :item="item"
         :search="localSearchValue"
         v-model:opened="localOpenedItems"
+        :custom-filter="customFilter"
         :open-on-click="openOnClick"
         :item-children="itemChildren"
         @item-toggled="itemToggled"
@@ -46,6 +47,7 @@
    * @vue-prop {boolean} [openOnClick=false] - Whether to open items on title click.
    * @vue-prop {string} [search=''] - The value used to filter the items.
    * @vue-prop {boolean} [showSearchbar=false] - Whether there is a searchbar for this treeview.
+   * @vue-prop {function(import("./VcsTreeNode.vue").VcsTreeNodeItem, string|undefined):boolean}} [customFilter] - a function to customize filtering when searching.
    * @vue-prop {string}  [searchbarPlaceholder] - Placeholder text for the searchbar, will be translated.
    */
   export default {
@@ -87,6 +89,14 @@
         type: String,
         default: undefined,
       },
+      /**
+       * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+       * @param {string} search The query value.
+       */
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
     },
     emits: ['update:search', 'update:opened'],
     setup(props, { emit, slots }) {
@@ -107,14 +117,12 @@
         );
       }
 
-      function itemToggled(name, state) {
-        if (state) {
-          localOpenedItems.value.push(name);
+      function itemToggled(itemName) {
+        const idx = localOpenedItems.value.indexOf(itemName);
+        if (idx >= 0) {
+          localOpenedItems.value.splice(idx, 1);
         } else {
-          const idx = localOpenedItems.value.indexOf(name);
-          if (idx >= 0) {
-            localOpenedItems.value.splice(idx, 1);
-          }
+          localOpenedItems.value.push(itemName);
         }
       }
 
@@ -129,7 +137,7 @@
               item.clicked(event);
             }
           } else if ((props.openOnClick ?? false) !== false) {
-            itemToggled(item.name, !localOpenedItems.value.includes(item.name));
+            itemToggled(item.name);
           }
         },
       };

package/src/components/lists/VcsTreeview.vue.d.ts

@@ -31,11 +31,19 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+     * @param {string} search The query value.
+     */
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }, {
     localSearchValue: import("vue").Ref<any>;
     localOpenedItems: import("vue").Ref<any>;
     forwardSlots: string[];
-    itemToggled: (name: any, state: any) => void;
+    itemToggled: (itemName: any) => void;
     itemClicked(item: any, event: any): void;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:opened" | "update:search")[], "update:opened" | "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
@@ -70,6 +78,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    /**
+     * @param {import("./VcsTreeNode.vue").VcsTreeNodeItem} item The item to filter.
+     * @param {string} search The query value.
+     */
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }>> & {
     "onUpdate:opened"?: ((...args: any[]) => any) | undefined;
     "onUpdate:search"?: ((...args: any[]) => any) | undefined;
@@ -79,6 +95,7 @@ declare const _default: import("vue").DefineComponent<{
     items: unknown[];
     opened: unknown[];
     itemChildren: string;
+    customFilter: Function;
     openAll: boolean;
     showSearchbar: boolean;
     searchbarPlaceholder: string;

package/src/components/tables/VcsDataTable.vue

@@ -168,6 +168,7 @@
    * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
    * @vue-prop {string} [searchbarPlaceholder] - placeholder for searchbar
    * @vue-prop {string} [itemSelectable='isSelectable'] - The property on each item that is used to determine if it is selectable or not. Non-selectable items are automatically disabled.
+   * @vue-prop {function(any, string|undefined, TableItem):boolean} [customFilter] - a function to customize filtering when searching. The first parameter represents the item values, with the function called for each of them. The second is the search term. The third is the complete item.
    * @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.
@@ -232,6 +233,10 @@
         type: String,
         default: 'isSelectable',
       },
+      customFilter: {
+        type: Function,
+        default: undefined,
+      },
     },
     setup(props, { attrs, emit, slots }) {
       const vm = getCurrentInstance().proxy;
@@ -272,6 +277,9 @@
        * @returns {boolean}
        */
       const handleFilter = (value, filter, item) => {
+        if (props.customFilter) {
+          return props.customFilter(value, filter, item.raw);
+        }
         return handleFilterInternal(value, filter, item.raw);
       };
 
@@ -300,9 +308,12 @@
        * @type {ComputedRef<Array<Object>>}
        */
       const filteredItems = computed(() =>
-        props.items.filter((item) =>
-          handleFilterInternal(item.value, search.value, item),
-        ),
+        props.items.filter((item) => {
+          if (props.customFilter) {
+            return props.customFilter(item.value, search.value, item);
+          }
+          return handleFilterInternal(item.value, search.value, item);
+        }),
       );
       const numberOfItems = computed(() => {
         if (props.serverItemsLength > -1) {

package/src/components/tables/VcsDataTable.vue.d.ts

@@ -40,6 +40,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }, {
     hovering: import("vue").Ref<null>;
     search: Ref<UnwrapRef<string>>;
@@ -102,8 +106,13 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
 }>>, {
     items: unknown[];
+    customFilter: Function;
     showSearchbar: boolean;
     searchbarPlaceholder: string;
     headers: unknown[];

package/src/legend/VcsLegend.vue

@@ -19,7 +19,7 @@
             <div v-if="item.type === LegendType.Image">
               <img
                 :src="$st(item.src)"
-                :alt="item.src"
+                :alt="$st(item.src)"
                 class="legend-image"
                 :title="item.tooltip"
               />