@vcmap/ui 6.0.0-rc.7 → 6.0.0-rc.9

package/src/components/tables/VcsDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-data-table">
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="$st(searchbarPlaceholder)"
@@ -133,7 +133,7 @@
   import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
   import VcsButton from '../buttons/VcsButton.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
-  import { useForwardSlots } from '../composables.js';
+  import { getForwardSlots } from '../composables.js';
 
   /**
    * @typedef {Object} UpdateItemsEvent
@@ -363,7 +363,7 @@
           props.serverItemsLength > itemsPerPageRef.value,
       );
 
-      const forwardSlots = useForwardSlots(slots, [
+      const forwardSlots = getForwardSlots(slots, [
         'prepend',
         'default',
         'append',

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

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     handleSearch: () => void;
     translatedHeaders: ComputedRef<Object[]>;
     showFooter: import("vue").ComputedRef<boolean>;
-    forwardSlots: import("vue").ComputedRef<string[]>;
+    forwardSlots: string[];
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     headers: {
         type: ArrayConstructor;

package/src/components/tables/VcsTable.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsDataTable
+    class="vcs-table"
     v-bind="$attrs"
     :items="items"
     :headers="[keyHeader, valueHeader]"

package/src/components/tables/VcsTableCell.vue

@@ -37,7 +37,7 @@
 </script>
 
 <template>
-  <td ref="td" :style="{ 'max-width': width }">
+  <td ref="td" :style="{ 'max-width': width }" class="vcs-table-cell">
     <component
       :is="tag"
       :class="{

package/src/components/vector-properties/VcsFeatureEditingWindow.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-editing-window">
     <VcsFormSection
       v-if="session?.type === SessionType.SELECT"
       heading="components.editor.modifyHeader"

package/src/components/vector-properties/VcsFeatureTransforms.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-transforms">
     <v-container class="pl-0 pr-1 py-1">
       <v-row
         no-gutters

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-vector-properties-component"
     :heading="$attrs.heading || 'components.vectorProperties.header'"
     :expandable="expandable"
     :start-open="startOpen"

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-viewpoint-component">
     <VcsFormSection
       heading="components.viewpoint.general"
       :expandable="expandable"

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <AbstractConfigEditor
+    class="vcs-viewpoint-editor"
     @submit="apply"
     @cancel="cancel"
     @reset="reset"

package/src/contentTree/LayerTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="layer-tree">
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -151,7 +151,12 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
       if (this.state === StateActionState.INACTIVE) {
         this.state = StateActionState.LOADING;
         await map.setCollection(this._collection, vp);
-        executeCallbacks(this._app, this._onActivate);
+        if (map.collection === this._collection) {
+          executeCallbacks(this._app, this._onActivate);
+        } else {
+          // failed to activate collection
+          this.state = StateActionState.INACTIVE;
+        }
       } else if (this.state === StateActionState.ACTIVE) {
         this.state = StateActionState.INACTIVE;
         await map.setCollection(defaultCollection, vp);

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="address-balloon-component">
     <template #default="{ attrs }">
       <v-list-item
         lines="two"

package/src/featureInfo/BalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mx-auto elevation-0" v-if="position">
+  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-1">
         <template #prepend="prependScope">

package/src/featureInfo/IframeComponent.vue

@@ -1,5 +1,10 @@
 <template>
-  <iframe :src="src" :title="title" :style="{ height, width }" />
+  <iframe
+    :src="src"
+    :title="title"
+    :style="{ height, width }"
+    class="iframe-component"
+  />
 </template>
 <script>
   import { inject } from 'vue';

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
     <VcsMarkdown :content="content" />
   </BalloonComponent>
 </template>

package/src/featureInfo/abstractFeatureInfoView.js

@@ -430,15 +430,16 @@ class AbstractFeatureInfoView extends VcsObject {
    * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
    */
   getWindowComponentOptions(app, featureInfo, layer) {
+    const props = this.getProperties(featureInfo, layer);
     return {
       state: getWindowState(app, this.window.state, {
-        ...this.getAttributes(featureInfo.feature),
+        ...props.attributes,
         layerName: layer.properties?.title || layer.name,
       }),
       slot: this.window.slot ?? WindowSlot.DYNAMIC_RIGHT,
       component: this.component,
       position: this.window.position,
-      props: this.getProperties(featureInfo, layer),
+      props,
     };
   }
 

package/src/i18n/de.d.ts

@@ -156,10 +156,15 @@ declare namespace messages {
             let errorConnection: string;
             let errorPosition: string;
         }
+        namespace obliqueFallback {
+            export let message: string;
+            let title_5: string;
+            export { title_5 as title };
+        }
     }
     export namespace categoryManager {
-        let title_5: string;
-        export { title_5 as title };
+        let title_6: string;
+        export { title_6 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -236,8 +241,8 @@ declare namespace messages {
             export let general: string;
             let name_1: string;
             export { name_1 as name };
-            let title_6: string;
-            export { title_6 as title };
+            let title_7: string;
+            export { title_7 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -270,8 +275,8 @@ declare namespace messages {
         export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_7: string;
-            export { title_7 as title };
+            let title_8: string;
+            export { title_8 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -296,8 +301,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_8: string;
-            export { title_8 as title };
+            let title_9: string;
+            export { title_9 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -371,14 +376,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_9: string;
-        export { title_9 as title };
+        let title_10: string;
+        export { title_10 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_10: string;
-            export { title_10 as title };
+            let title_11: string;
+            export { title_11 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -386,15 +391,15 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_1 {
-        let title_12: string;
-        export { title_12 as title };
+        let title_13: string;
+        export { title_13 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -404,8 +409,8 @@ declare namespace messages {
         let deactivateToolTitle: string;
     }
     export namespace legend {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_2: string;
@@ -414,8 +419,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_14: string;
-        export { title_14 as title };
+        let title_15: string;
+        export { title_15 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -431,31 +436,31 @@ declare namespace messages {
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_15: string;
-        export { title_15 as title };
+        let title_16: string;
+        export { title_16 as title };
         export namespace attributions {
-            let title_16: string;
-            export { title_16 as title };
+            let title_17: string;
+            export { title_17 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_3: string;
             export { empty_3 as empty };
         }
         export namespace imprint {
-            let title_17: string;
-            export { title_17 as title };
+            let title_18: string;
+            export { title_18 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_18: string;
-            export { title_18 as title };
+            let title_19: string;
+            export { title_19 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_19: string;
-            export { title_19 as title };
+            let title_20: string;
+            export { title_20 as title };
             let projection_1: string;
             export { projection_1 as projection };
         }

package/src/i18n/de.js

@@ -58,6 +58,11 @@ const messages = {
         'Während dem ermitteln Ihrer Position wurde die Verbindung verloren',
       errorPosition: 'Ihre Position kann leider nicht erfasst werden',
     },
+    obliqueFallback: {
+      message:
+        'Für die aktuelle Position liegen bei dem ausgewählten Datensatz keine Daten vor',
+      title: 'Fehlende Daten',
+    },
   },
   categoryManager: {
     title: 'Mein Arbeitsbereich',

package/src/i18n/en.d.ts

@@ -156,10 +156,15 @@ declare namespace messages {
             let errorConnection: string;
             let errorPosition: string;
         }
+        namespace obliqueFallback {
+            export let message: string;
+            let title_5: string;
+            export { title_5 as title };
+        }
     }
     export namespace categoryManager {
-        let title_5: string;
-        export { title_5 as title };
+        let title_6: string;
+        export { title_6 as title };
         let tooltip_2: string;
         export { tooltip_2 as tooltip };
     }
@@ -236,8 +241,8 @@ declare namespace messages {
             export let general: string;
             let name_1: string;
             export { name_1 as name };
-            let title_6: string;
-            export { title_6 as title };
+            let title_7: string;
+            export { title_7 as title };
             export let titlePlaceholder: string;
             export let interpolation: string;
             export let duration: string;
@@ -270,8 +275,8 @@ declare namespace messages {
         export namespace viewpoint {
             let name_4: string;
             export { name_4 as name };
-            let title_7: string;
-            export { title_7 as title };
+            let title_8: string;
+            export { title_8 as title };
             let titlePlaceholder_1: string;
             export { titlePlaceholder_1 as titlePlaceholder };
             export let groundPosition: string;
@@ -296,8 +301,8 @@ declare namespace messages {
             let outOfRange: string;
         }
         export namespace extent {
-            let title_8: string;
-            export { title_8 as title };
+            let title_9: string;
+            export { title_9 as title };
             export let projection: string;
             export let min: string;
             export let max: string;
@@ -371,14 +376,14 @@ declare namespace messages {
         }
     }
     export namespace settings {
-        let title_9: string;
-        export { title_9 as title };
+        let title_10: string;
+        export { title_10 as title };
         let tooltip_3: string;
         export { tooltip_3 as tooltip };
         export let languageSelector: string;
         export namespace displayQuality {
-            let title_10: string;
-            export { title_10 as title };
+            let title_11: string;
+            export { title_11 as title };
             export namespace level {
                 let low: string;
                 let medium: string;
@@ -386,15 +391,15 @@ declare namespace messages {
             }
         }
         export namespace theme {
-            let title_11: string;
-            export { title_11 as title };
+            let title_12: string;
+            export { title_12 as title };
             export let dark: string;
             export let light: string;
         }
     }
     export namespace help_1 {
-        let title_12: string;
-        export { title_12 as title };
+        let title_13: string;
+        export { title_13 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
@@ -404,8 +409,8 @@ declare namespace messages {
         let deactivateToolTitle: string;
     }
     export namespace legend {
-        let title_13: string;
-        export { title_13 as title };
+        let title_14: string;
+        export { title_14 as title };
         let tooltip_5: string;
         export { tooltip_5 as tooltip };
         let empty_2: string;
@@ -414,8 +419,8 @@ declare namespace messages {
         export let defaultLabelText: string;
     }
     export namespace search_1 {
-        let title_14: string;
-        export { title_14 as title };
+        let title_15: string;
+        export { title_15 as title };
         let tooltip_6: string;
         export { tooltip_6 as tooltip };
         export let select: string;
@@ -431,31 +436,31 @@ declare namespace messages {
         export let miscellaneous: string;
     }
     export namespace footer {
-        let title_15: string;
-        export { title_15 as title };
+        let title_16: string;
+        export { title_16 as title };
         export namespace attributions {
-            let title_16: string;
-            export { title_16 as title };
+            let title_17: string;
+            export { title_17 as title };
             let tooltip_7: string;
             export { tooltip_7 as tooltip };
             let empty_3: string;
             export { empty_3 as empty };
         }
         export namespace imprint {
-            let title_17: string;
-            export { title_17 as title };
+            let title_18: string;
+            export { title_18 as title };
             let tooltip_8: string;
             export { tooltip_8 as tooltip };
         }
         export namespace dataProtection {
-            let title_18: string;
-            export { title_18 as title };
+            let title_19: string;
+            export { title_19 as title };
             let tooltip_9: string;
             export { tooltip_9 as tooltip };
         }
         export namespace positionDisplay {
-            let title_19: string;
-            export { title_19 as title };
+            let title_20: string;
+            export { title_20 as title };
             let projection_1: string;
             export { projection_1 as projection };
         }

package/src/i18n/en.js

@@ -58,6 +58,11 @@ const messages = {
         'The connection was lost while your position was being determined',
       errorPosition: 'Unfortunately, your position cannot be recorded',
     },
+    obliqueFallback: {
+      message:
+        'There is no data for the current position and selected data set.',
+      title: 'Missing Data',
+    },
   },
   categoryManager: {
     title: 'My Workspace',

package/src/legend/StyleLegendItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list>
+  <v-list class="style-legend-item">
     <v-row no-gutters>
       <v-col
         v-for="(row, idx) in item.rows"

package/src/legend/VcsLegend.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet class="overflow-y-auto">
+  <v-sheet class="overflow-y-auto vcs-legend">
     <v-expansion-panels
       variant="accordion"
       multiple

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <vcs-expansion-panel
+    class="collection-component"
     :heading="title"
     :header-actions="actions"
     :action-button-list-overflow-count="overflowCount"

package/src/manager/collectionManager/collectionComponentClass.js

@@ -81,7 +81,11 @@ export function createSupportedMapMappingFunction(
   return (item, _c, listItem) => {
     const mapNames =
       typeof supportedMaps === 'function' ? supportedMaps(item) : supportedMaps;
-    listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
+    if (mapCollection.activeMap) {
+      listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
+    } else {
+      listItem.disabled = true;
+    }
     listItem.destroyFunctions.push(
       mapCollection.mapActivated.addEventListener((map) => {
         listItem.disabled = !mapNames.includes(map.className);

package/src/manager/contextMenu/ContextMenuComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click.stop="close">
+  <div @click.stop="close" class="context-menu-component">
     <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>

package/src/manager/panel/PanelManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vcs-panel-frame"
+    class="vcs-panel-frame panel-manager-component"
     @mouseup="setResizing(undefined)"
     @mouseleave="setResizing(undefined)"
     ref="panelFrameRef"
@@ -85,7 +85,7 @@
    * @description PanelManager rendering all Panels
    */
   export default {
-    name: 'VcsPanelManager',
+    name: 'VcsPanelManagerComponent',
     components: {
       VcsMainMap,
       PanelComponent,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="orderedButtons.length > 0">
+  <div v-if="orderedButtons.length > 0" class="group-toolbox-component">
     <v-menu
       v-model="open"
       @update:model-value="$emit('toggle', open)"
@@ -66,7 +66,7 @@
    * @vue-computed {boolean} hasActiveAction - Whether the group has an active action.
    */
   export default {
-    name: 'ToolboxActionGroup',
+    name: 'GroupToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="group.action"
-    class="d-flex"
+    class="d-flex select-toolbox-component"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
   >
     <VcsToolButton
@@ -75,7 +75,7 @@
    * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
    */
   export default {
-    name: 'ToolboxActionSelect',
+    name: 'SelectToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -1,9 +1,10 @@
 <template>
   <v-toolbar
     v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
-    class="vcs-toolbox mx-auto elevation-4 opacity-80"
+    class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
       'rounded-b': !open,
+      'vcs-toolbox__secondary': !isDefaultToolbox,
     }"
     :height="toolboxHeight"
     :style="{ zIndex }"
@@ -32,7 +33,7 @@
           :active="group.action.active"
           :background="group.action.background"
           :disabled="group.action.disabled"
-          @click="group.action.callback($event)"
+          @click.stop="group.action.callback($event)"
           v-bind="{ ...$attrs }"
         />
       </div>
@@ -41,6 +42,16 @@
 </template>
 
 <style lang="scss" scoped>
+  .vcs-toolbox__secondary {
+    &.vcs-toolbox.v-theme {
+      &--light {
+        background-color: rgba(var(--v-theme-primary-lighten-3));
+      }
+      &--dark {
+        background-color: rgba(var(--v-theme-primary-darken-4));
+      }
+    }
+  }
   .vcs-toolbox {
     margin-top: 2px;
     width: fit-content;

package/src/manager/window/WindowComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-sheet
     :id="`window-component--${windowState.id}`"
-    class="elevation-3 position-absolute d-flex flex-column"
+    class="elevation-3 position-absolute d-flex flex-column window-component"
     v-bind="$attrs"
     @dragstart="dragStart"
     @dragend="dragEnd"