@vcmap/ui 6.0.14 → 6.1.0-rc.2

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

@@ -3,6 +3,22 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
+    opened: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    itemChildren: {
+        type: StringConstructor;
+        default: string;
+    };
+    openAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -15,17 +31,41 @@ 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;
+    };
 }, {
-    iconSize: import("vue").ComputedRef<number>;
     localSearchValue: import("vue").Ref<any>;
-    handleFilter: (value: string, q: string, item: Object) => number;
+    localOpenedItems: import("vue").Ref<any>;
     forwardSlots: string[];
-    itemClicked(name: any, event: any): void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:search"[], "update:search", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    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: {
         type: ArrayConstructor;
         default: () => never[];
     };
+    opened: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    itemChildren: {
+        type: StringConstructor;
+        default: string;
+    };
+    openAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openOnClick: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -38,11 +78,25 @@ 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;
 }, {
     search: string;
+    openOnClick: boolean;
     items: unknown[];
+    opened: unknown[];
+    itemChildren: string;
+    customFilter: Function;
+    openAll: boolean;
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;

package/src/components/lists/VcsTreeviewTitle.vue

@@ -8,6 +8,10 @@
       type: Object,
       default: undefined,
     },
+    cursorPointer: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const titleParent = ref();
@@ -23,14 +27,17 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
 </style>
 <template>
   <div
-    class="title-parent pr-2 vcs-treeview-title"
+    class="title-parent pr-2 vcs-treeview-title w-100"
+    :class="{ 'cursor-pointer': cursorPointer }"
     ref="titleParent"
-    @click.stop="item.clicked && !item.disabled && item.clicked($event)"
   >
-    <span>
+    <span class="w-100">
       {{ $st(item.title || item.name) }}
     </span>
     <v-tooltip v-if="tooltip" activator="parent">

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

@@ -1,6 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    cursorPointer: boolean;
     item?: Record<string, any> | undefined;
     $props: {
+        readonly cursorPointer?: boolean | undefined;
         readonly item?: Record<string, any> | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;

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/featureInfo/BalloonComponent.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
+  <v-sheet
+    class="balloon-component d-flex flex-column flex-grow-1"
+    v-if="position"
+  >
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-1">
         <template #prepend="prependScope">
@@ -32,21 +35,17 @@
 
     <v-divider />
 
-    <v-card
-      class="overflow-y-auto py-2 elevation-0"
-      :max-height="maxHeight"
-      color="transparent"
+    <div
+      class="overflow-x-hidden overflow-y-auto d-flex flex-column flex-grow-1"
     >
       <slot :attrs="{ ...$props, ...$attrs }">
-        <v-list
-          v-for="(value, key, index) in attributes"
-          :key="`attribute-${index}`"
-          color="transparent"
-        >
-          <v-list-item class="px-2">
-            <v-list-item-title>
-              {{ $st(key) }}
-            </v-list-item-title>
+        <v-list color="transparent" class="py-2">
+          <v-list-item
+            v-for="(value, key, index) in attributes"
+            :key="`attribute-${index}`"
+            class="px-2"
+            :title="$st(key)"
+          >
             <v-list-item-subtitle
               :tag="getTag(tags, key)"
               v-bind="getTagOptions(tags, key)"
@@ -56,13 +55,13 @@
           </v-list-item>
         </v-list>
       </slot>
-    </v-card>
-  </v-card>
+    </div>
+  </v-sheet>
 </template>
 <script>
-  import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
+  import { inject, onMounted, onUnmounted, watch } from 'vue';
   import {
-    VCard,
+    VSheet,
     VDivider,
     VIcon,
     VList,
@@ -70,10 +69,6 @@
     VListItemSubtitle,
     VListItemTitle,
   } from 'vuetify/components';
-  import {
-    getTargetSize,
-    posToNumber,
-  } from '../manager/window/windowHelper.js';
   import { setupBalloonPositionListener } from './balloonHelper.js';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import { getTag, getTagOptions } from '../components/tables/VcsTable.vue';
@@ -97,7 +92,7 @@
     name: 'BalloonComponent',
     components: {
       VcsButton,
-      VCard,
+      VSheet,
       VList,
       VListItem,
       VIcon,
@@ -134,28 +129,6 @@
     setup(props, { attrs }) {
       const app = inject('vcsApp');
       const windowId = attrs['window-state'].id;
-      function getMaxHeight() {
-        if (app.windowManager.get(windowId)?.position?.maxHeight) {
-          return (
-            posToNumber(
-              app.windowManager.get(windowId).position.maxHeight,
-              'maxHeight',
-              getTargetSize(app.maps.target),
-            ) - 49 // 44px header offset with padding 5px
-          );
-        }
-        if (app.windowManager.get(windowId)?.position?.height) {
-          return (
-            posToNumber(
-              app.windowManager.get(windowId).position.height,
-              'height',
-              getTargetSize(app.maps.target),
-            ) - 49 // 44px header offset with padding 5px
-          );
-        }
-        return 250;
-      }
-      const maxHeight = ref(getMaxHeight());
 
       let balloonPositionListener = null;
       const destroyListener = () => {
@@ -181,7 +154,6 @@
             windowId,
             props.position,
           );
-          maxHeight.value = getMaxHeight();
         },
       );
 
@@ -199,7 +171,6 @@
         close,
         getTag,
         getTagOptions,
-        maxHeight,
       };
     },
   };

package/src/featureInfo/BalloonComponent.vue.d.ts

@@ -28,7 +28,6 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     getTag: typeof getTag;
     getTagOptions: typeof getTagOptions;
-    maxHeight: import("vue").Ref<number>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     featureId: {
         type: StringConstructor;

package/src/featureInfo/IframeComponent.vue

@@ -2,17 +2,10 @@
   <iframe
     :src="src"
     :title="title"
-    :style="{ height, width }"
-    class="iframe-component"
+    class="h-100 w-100 border-0 d-block flex-grow-1"
   />
 </template>
 <script>
-  import { inject } from 'vue';
-  import {
-    getTargetSize,
-    posToNumber,
-  } from '../manager/window/windowHelper.js';
-
   /**
    * @description An iframe component
    * @vue-prop {string} src - Specifies the address of the document to embed in the <iframe>
@@ -38,30 +31,6 @@
         default: () => {},
       },
     },
-    setup(props, { attrs }) {
-      const app = inject('vcsApp');
-      let { height, width } = app.windowManager.get(
-        attrs['window-state'].id,
-      ).position;
-
-      // set iframe size to absolute px values
-      if (app.maps.target) {
-        const targetSize = getTargetSize(app.maps.target);
-        const heightNumber = posToNumber(height, 'height', targetSize);
-        if (heightNumber) {
-          height = `${heightNumber - 36}px`; // 32px header height + 4px margin
-        }
-        const widthNumber = posToNumber(width, 'width', targetSize);
-        if (widthNumber) {
-          width = `${widthNumber}px`;
-        }
-      }
-
-      return {
-        height,
-        width,
-      };
-    },
   };
 </script>
 

package/src/featureInfo/IframeComponent.vue.d.ts

@@ -14,10 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: () => void;
     };
-}, {
-    height: any;
-    width: any;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     src: {
         type: StringConstructor;
         required: true;

package/src/i18n/de.d.ts

@@ -147,6 +147,7 @@ declare namespace messages {
         }
     }
     export namespace navigation {
+        let rotateButton: string;
         let obliqueLeftTooltip: string;
         let obliqueRightTooltip: string;
         let zoomInTooltip: string;

package/src/i18n/de.js

@@ -46,6 +46,7 @@ const messages = {
     },
   },
   navigation: {
+    rotateButton: 'Ansicht drehen',
     obliqueLeftTooltip: 'Ansicht nach links drehen',
     obliqueRightTooltip: 'Ansicht nach rechts drehen',
     zoomInTooltip: 'Hineinzoomen',

package/src/i18n/en.d.ts

@@ -147,6 +147,7 @@ declare namespace messages {
         }
     }
     export namespace navigation {
+        let rotateButton: string;
         let obliqueLeftTooltip: string;
         let obliqueRightTooltip: string;
         let zoomInTooltip: string;

package/src/i18n/en.js

@@ -46,6 +46,7 @@ const messages = {
     },
   },
   navigation: {
+    rotateButton: 'Rotate view',
     obliqueLeftTooltip: 'Rotate view to left',
     obliqueRightTooltip: 'Rotate view to right',
     zoomInTooltip: 'Zoom in',

package/src/init.d.ts

@@ -11,6 +11,12 @@ export default function initApp(mountTarget: string): Promise<import("@src/vcsUi
  * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export function initAppFromModule(mountTarget: string, configUrl?: string | undefined): Promise<import("@src/vcsUiApp.js").default>;
+/**
+ * Creates a module from a config object or a url
+ * @param {import("@vcmap/core").VcsModuleConfig|string} c
+ * @returns {Promise<import("@vcmap/core").VcsModule|null>}
+ */
+export function createModuleFromObjectOrUrl(c: import("@vcmap/core").VcsModuleConfig | string): Promise<import("@vcmap/core").VcsModule | null>;
 /**
  * Initializes app with a map config containing a set of config urls
  * @param {string} mountTarget

package/src/init.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { check, is, maybe, oneOf, optional } from '@vcsuite/check';
 import { VcsModule } from '@vcmap/core';
+import { getLogger } from '@vcsuite/logger';
 import VcsAppComponentWrapper from './application/VcsAppWrapper.vue';
 import VcsUiApp from './vcsUiApp.js';
 import { createSafeI18n } from './vuePlugins/i18n.js';
@@ -76,6 +77,30 @@ export async function initAppFromModule(mountTarget, configUrl) {
   return app;
 }
 
+/**
+ * Creates a module from a config object or a url
+ * @param {import("@vcmap/core").VcsModuleConfig|string} c
+ * @returns {Promise<import("@vcmap/core").VcsModule|null>}
+ */
+export async function createModuleFromObjectOrUrl(c) {
+  if (is(c, Object)) {
+    if (!is(c, VcsUiAppConfigPattern)) {
+      getLogger('init').warning(
+        'Provided object is no valid VcsUiAppConfig',
+        c,
+      );
+    }
+    return new VcsModule(/** @type{import("@vcmap/core").VcsModuleConfig} */ c);
+  } else if (is(c, String)) {
+    const response = await fetch(c);
+    if (response.ok) {
+      const config = await response.json();
+      return new VcsModule(config);
+    }
+  }
+  return null;
+}
+
 /**
  * Initializes app with a map config containing a set of config urls
  * @param {string} mountTarget
@@ -95,20 +120,7 @@ export async function initAppFromAppConfig(mountTarget, appUrl) {
   check(appConfig.modules, [oneOf(String, Object)]);
 
   const modules = await Promise.all(
-    appConfig.modules.map(async (c) => {
-      if (is(c, VcsUiAppConfigPattern)) {
-        return new VcsModule(
-          /** @type{import("@vcmap/core").VcsModuleConfig} */ c,
-        );
-      } else if (is(c, String)) {
-        const response = await fetch(c);
-        if (response.ok) {
-          const config = await response.json();
-          return new VcsModule(config);
-        }
-      }
-      return null;
-    }),
+    appConfig.modules.map(createModuleFromObjectOrUrl),
   );
   // eslint-disable-next-line no-restricted-syntax
   for await (const module of modules) {

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"
               />

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <v-toolbar
-    v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
+    v-if="toolboxOpen && orderedGroups.length > 0 && smAndUp"
     class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
       'rounded-b': !open,
@@ -150,7 +150,7 @@
           .filter(filterFunc),
       );
 
-      const toolboxOpen = ref(true);
+      const toolboxOpen = app.toolboxManager.open;
       const toolboxToggleAction = {
         name: 'toolboxToggleAction',
         icon: '$vcsTools',
@@ -199,13 +199,13 @@
         app.windowManager.bringWindowToTop('toolbox');
       };
 
-      const { mdAndUp } = useDisplay();
+      const { smAndUp } = useDisplay();
       const fontSize = useFontSize();
       const toolboxHeight = computed(() => {
         return fontSize.value * 3 + 1;
       });
       return {
-        mdAndUp,
+        smAndUp,
         toolboxOpen,
         orderedGroups,
         zIndex,

package/src/manager/toolbox/ToolboxManagerComponent.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    mdAndUp: import("vue").Ref<boolean>;
-    toolboxOpen: import("vue").Ref<boolean>;
+    smAndUp: import("vue").Ref<boolean>;
+    toolboxOpen: any;
     orderedGroups: import("vue").ComputedRef<(import("../buttonManager.js", { with: { "resolution-mode": "import" } }).ButtonComponent | import("./toolboxManager.js", { with: { "resolution-mode": "import" } }).ToolboxComponent)[]>;
     zIndex: any;
     isDefaultToolbox: import("vue").ComputedRef<boolean>;

package/src/manager/toolbox/toolboxManager.d.ts

@@ -117,6 +117,11 @@ declare class ToolboxManager implements IToolboxManager {
      * @type {import("vue").UnwrapRef<string[]>}
      */
     componentIds: import("vue").UnwrapRef<string[]>;
+    /**
+     * reative boolean to show or hide the toolbox
+     * @type {import("vue").Ref<boolean>}
+     */
+    open: import("vue").Ref<boolean>;
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private

package/src/manager/toolbox/toolboxManager.js

@@ -1,7 +1,7 @@
 import { VcsEvent } from '@vcmap/core';
 import { check, maybe, ofEnum, oneOf, optional } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
-import { reactive, shallowReactive } from 'vue';
+import { reactive, ref, shallowReactive } from 'vue';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import ButtonManager from '../buttonManager.js';
 import { ActionPattern } from '../../components/lists/VcsActionList.vue';
@@ -207,6 +207,12 @@ class ToolboxManager {
      * @type {import("vue").UnwrapRef<string[]>}
      */
     this.componentIds = reactive([]);
+
+    /**
+     * reative boolean to show or hide the toolbox
+     * @type {import("vue").Ref<boolean>}
+     */
+    this.open = ref(true);
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private

package/src/manager/window/WindowComponent.vue

@@ -9,6 +9,7 @@
     :class="{
       rounded: !isDocked,
       marginToTop: isDocked || !isChild,
+      marginToTopTablet: isTabletWithOpenToolbar,
       'rounded-be': isDynamicLeft,
       'rounded-bs': isDynamicRight,
     }"
@@ -27,7 +28,7 @@
     </div>
     <v-divider v-if="!windowState.hideHeader" />
     <div
-      class="overflow-x-hidden mb-1"
+      class="overflow-x-hidden overflow-y-auto mb-1 d-flex flex-grow-1 flex-column"
       :class="{
         rounded: !isDocked,
       }"
@@ -41,11 +42,15 @@
   .marginToTop {
     margin-top: 2px;
   }
+  .marginToTopTablet {
+    margin-top: calc(var(--v-vcs-font-size) * 3 + 6px);
+  }
 </style>
 
 <script>
   import { computed, inject, provide, ref } from 'vue';
   import { VDivider, VSheet } from 'vuetify/components';
+  import { useDisplay } from 'vuetify';
   import { WindowSlot } from './windowManager.js';
 
   /**
@@ -95,6 +100,10 @@
       const isDocked = computed(
         () => props.slotWindow.value !== WindowSlot.DETACHED,
       );
+      const display = useDisplay();
+      const isTabletWithOpenToolbar = computed(
+        () => app.toolboxManager.open.value && display.sm.value,
+      );
       const isDockedLeft = computed(() => {
         return (
           props.slotWindow.value === WindowSlot.STATIC ||
@@ -156,6 +165,7 @@
         isDynamic,
         isChild,
         isDocked,
+        isTabletWithOpenToolbar,
         isDynamicLeft: isDockedLeft,
         isDynamicRight: isDockedRight,
         isDraggable,

package/src/manager/window/WindowComponent.vue.d.ts

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     isDynamic: import("vue").ComputedRef<boolean>;
     isChild: import("vue").ComputedRef<boolean>;
     isDocked: import("vue").ComputedRef<boolean>;
+    isTabletWithOpenToolbar: import("vue").ComputedRef<any>;
     isDynamicLeft: import("vue").ComputedRef<boolean>;
     isDynamicRight: import("vue").ComputedRef<boolean>;
     isDraggable: import("vue").Ref<boolean>;