@vcmap/ui 6.0.0-rc.6 → 6.0.0-rc.8

package/src/application/VcsApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height pa-0" absolute fluid>
+  <v-container class="fill-height pa-0 vcs-app" absolute fluid>
     <VcsSplashScreen
       v-if="splashScreen"
       :options="splashScreen"
@@ -25,8 +25,8 @@
         :text-page="dataProtection"
         :window-id="'dataProtectionWindow'"
       />
+      <v-spacer />
       <VcsAttributionsFooter
-        class="align-wrapper"
         :entries="attributionEntries"
         :attribution-action="attributionAction"
       />
@@ -38,18 +38,13 @@
   :deep(.v-application--wrap) {
     min-height: fit-content;
   }
-  .align-wrapper {
-    position: absolute;
-    right: 0;
-    margin-right: 4px !important;
-  }
 </style>
 
 <script>
   import { computed, onMounted, onUnmounted, provide, watch, ref } from 'vue';
   import { useDisplay } from 'vuetify';
   import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
-  import { VContainer, VFooter } from 'vuetify/components';
+  import { VContainer, VFooter, VSpacer } from 'vuetify/components';
   import { getLogger } from '@vcsuite/logger';
   import VcsContainer from './VcsContainer.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
@@ -253,6 +248,33 @@
       }
     };
 
+    let currentEntryLength = entries.length;
+    const watchEntries = watch(entries, (newValue) => {
+      if (
+        app.uiConfig.config.openLegendOnAdd &&
+        newValue.length > currentEntryLength &&
+        !app.windowManager.has('legend')
+      ) {
+        app.windowManager.add(
+          {
+            id: 'legend',
+            component: VcsLegend,
+            state: {
+              headerTitle: 'legend.title',
+              headerIcon: '$vcsLegend',
+              infoUrl: app.getHelpUrlCallback(
+                '/components/contentspace.html#id_legend',
+              ),
+            },
+            slot: WindowSlot.DYNAMIC_RIGHT,
+            props: { entries },
+          },
+          vcsAppSymbol,
+        );
+      }
+      currentEntryLength = newValue.length;
+    });
+
     /**
      * Handles legend button and window.
      * Adds a button, if legend definitions are available or removes legend otherwise.
@@ -289,6 +311,7 @@
     ];
 
     return () => {
+      watchEntries();
       app.navbarManager.remove('legend');
       app.windowManager.remove('legend');
       destroy();
@@ -704,6 +727,7 @@
       VcsNavbar,
       VContainer,
       VFooter,
+      VSpacer,
     },
     props: {
       appId: {

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

@@ -321,9 +321,13 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         } | undefined;
         /**
-         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
          */
         readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
     };
     showFooter: import("vue").ComputedRef<boolean>;
     footerHeight: import("vue").ComputedRef<number>;

package/src/application/VcsAppWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="vcs-app-wrapper">
     <VcsApp :app-id="appId" />
   </v-app>
 </template>

package/src/application/VcsAttributions.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-attributions">
     <v-list v-if="entries.length" class="px-2">
       <v-list-item
         v-for="{ key, title, attributions } in entries"

package/src/application/VcsAttributionsFooter.vue

@@ -1,15 +1,20 @@
 <template>
-  <span class="d-inline-block text-truncate mr-10">
-    <span
-      v-for="attribution in mergedAttributions"
-      class="attribution"
-      :key="attribution.provider"
-    >
-      <a :href="attribution.url" target="_blank">
-        {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
-      </a>
-    </span>
+  <div
+    class="d-flex align-center justify-end overflow-hidden vcs-attributions-footer"
+  >
+    <div class="attribution-container">
+      <span
+        v-for="attribution in mergedAttributions"
+        class="attribution"
+        :key="attribution.provider"
+      >
+        <a :href="attribution.url" target="_blank">
+          {{ $st(attribution.provider) }} <span>{{ attribution.years }}</span>
+        </a>
+      </span>
+    </div>
     <VcsButton
+      class="flex-shrink-0"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"
@@ -17,10 +22,16 @@
       :disabled="attributionAction.disabled"
       @click.stop="attributionAction.callback($event)"
     />
-  </span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+  .attribution-container {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .attribution {
     font-size: smaller;
     &:before {

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

@@ -241,9 +241,13 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         } | undefined;
         /**
-         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
          */
         readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
     };
     xs: import("vue").Ref<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;

package/src/application/VcsMainMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-main-map">
     <VcsMap :map-id="mapId" />
     <MapNavigation v-if="showMapNavigation" />
   </div>

package/src/application/VcsMap.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="vcs-map"
     :id="mapId"
     @click.right.stop="
       (e) => {

package/src/application/VcsNavbar.vue

@@ -3,7 +3,7 @@
     absolute
     :density="density"
     elevation="0"
-    class="px-4"
+    class="px-4 vcs-navbar"
     :height="toolbarHeight"
     :style="xs ? { bottom: 0 } : { top: 0 }"
   >

package/src/application/VcsPositionDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <span
-    class="d-flex gc-2 px-1 h-100 align-center"
-    :class="{ 'vcs-position-display': positionDisplayAction.active }"
+    class="d-flex gc-2 px-1 h-100 align-center vcs-position-display"
+    :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
       :tooltip="positionDisplayAction.title"
@@ -52,7 +52,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .vcs-position-display {
+  .active {
     background-color: rgb(var(--v-theme-primary));
     span {
       color: rgb(var(--v-theme-on-primary));

package/src/application/VcsSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="px-1 py-0">
+  <v-container class="px-1 py-0 vcs-settings">
     <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">

package/src/application/VcsSplashScreen.vue

@@ -7,6 +7,7 @@
     :max-width="position.maxWidth"
     :max-height="position.maxHeight"
     persistent
+    class="vcs-splash-screen"
   >
     <v-card>
       <v-card-text>

package/src/application/VcsTextPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="vcs-text-page">
     <VcsMarkdown :content="$st(content)"></VcsMarkdown>
   </v-container>
 </template>

package/src/application/VcsTextPageFooter.vue

@@ -1,6 +1,8 @@
 <template v-if="textPage.title">
-  <span class="d-inline-block text-truncate mr-1">
-    <span v-if="textPage.url" class="imprint">
+  <span
+    class="d-inline-block text-truncate mr-1 flex-shrink-0 vcs-text-page-footer"
+  >
+    <span v-if="textPage.url" class="text-page-footer">
       <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>
       </a>
@@ -8,7 +10,7 @@
 
     <span
       v-else
-      class="imprint cursor-pointer text-decoration-underline"
+      class="text-page-footer cursor-pointer text-decoration-underline"
       @click="addTextPage()"
       >{{ $st(textPage.title) }}</span
     >
@@ -21,7 +23,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .imprint {
+  .text-page-footer {
     font-size: smaller;
     a {
       color: var(--v-text-color);

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="actions.length > 0" :class="classes" class="gc-2">
+  <div
+    v-if="actions.length > 0"
+    :class="classes"
+    class="gc-2 vcs-action-button-list"
+  >
     <template v-if="buttons.length > 0">
       <component
         :is="button"

package/src/components/buttons/VcsButton.vue

@@ -5,7 +5,7 @@
     variant="text"
     :color="appliedColor"
     :disabled="disabled"
-    class="vcsButton"
+    class="vcs-button"
     elevation="0"
     density="compact"
     size="small"
@@ -24,7 +24,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -41,7 +41,7 @@
   }
   .v-btn {
     padding: 0px;
-    &.vcsButton {
+    &.vcs-button {
       &:hover {
         color: rgb(var(--v-theme-primary-lighten-1)) !important;
       }

package/src/components/buttons/VcsFormButton.vue

@@ -5,7 +5,7 @@
     color="primary"
     :min-width="itemHeight * 1.5"
     :height="itemHeight"
-    class="vcsFormButton"
+    class="vcs-form-button"
     :slim="false"
     v-bind="{ ...$attrs }"
   >
@@ -22,7 +22,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>

package/src/components/buttons/VcsToolButton.vue

@@ -4,7 +4,7 @@
     :variant="buttonVariant"
     :height="itemHeight + 2"
     :min-width="itemHeight + itemHeight / 3"
-    class="vcsToolButton"
+    class="vcs-tool-button"
     :disabled="disabled"
     :class="{
       'vcs-background': background,
@@ -26,7 +26,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>

package/src/components/extent/VcsExtent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-extent">
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
         <VcsLabel :html-for="`${cid}-projection`">

package/src/components/extent/VcsExtentEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-extent-editor"
     :heading="heading"
     :header-actions="actions"
     :action-button-list-overflow-count="2"

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-flight-anchors-component"
     :heading="title"
     :expandable="expandable"
     start-open

package/src/components/flight/VcsFlightComponent.vue

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

package/src/components/flight/VcsFlightEditor.vue

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

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-flight-player">
     <VcsLabel>{{ $t('flight.player') }}</VcsLabel>
     <VcsSlider
       v-if="clock"

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

@@ -8,20 +8,32 @@
       'pa-1': !paddingProvided,
     }"
   >
-    <slot />
-    <v-tooltip
-      v-if="tooltip"
-      activator="parent"
-      :location="tooltipPosition"
-      :text="$st(tooltip)"
-    ></v-tooltip>
+    <span class="ellipsis-text" ref="labelTextRef">
+      <slot />
+      <v-tooltip
+        v-if="labelTooltip"
+        activator="parent"
+        :location="tooltipPosition"
+        :text="$st(labelTooltip)"
+      ></v-tooltip>
+    </span>
   </label>
 </template>
 
 <style lang="scss" scoped>
+  .ellipsis-text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .vcs-label {
     box-sizing: content-box;
     display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     align-items: center;
     height: calc(var(--v-vcs-font-size) * 2 - 2px);
     font-size: var(--v-vcs-font-size);
@@ -36,7 +48,8 @@
 </style>
 <script>
   import { VTooltip } from 'vuetify/components';
-  import { usePadding } from '../composables.js';
+  import { computed, ref } from 'vue';
+  import { createEllipseTooltip, usePadding } from '../composables.js';
 
   /**
    * @description Stylized wrapper around {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label |label label}.
@@ -76,8 +89,18 @@
     },
     setup(props, { attrs }) {
       const paddingProvided = usePadding(attrs);
+      const labelTextRef = ref();
+      const labelTooltip = createEllipseTooltip(
+        computed(() => {
+          return labelTextRef.value;
+        }),
+        computed(() => props.tooltip),
+        computed(() => labelTextRef.value?.textContent),
+      );
       return {
         paddingProvided,
+        labelTooltip,
+        labelTextRef,
       };
     },
   };

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

@@ -21,6 +21,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     paddingProvided: import("vue").ComputedRef<boolean>;
+    labelTooltip: import("vue").ComputedRef<string>;
+    labelTextRef: import("vue").Ref<any>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     htmlFor: {
         type: StringConstructor;

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

@@ -173,7 +173,7 @@
           if (rawProps.multiple) {
             return [];
           }
-          return '';
+          return null;
         },
       },
       tooltip: {

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

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     modelValue: {
         type: (BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
-        default(rawProps: any): never[] | "";
+        default(rawProps: any): never[] | null;
     };
     tooltip: {
         type: StringConstructor;

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

@@ -146,7 +146,7 @@
           ) {
             const v = parseFloat(localValue.value);
             if (Number.isFinite(v)) {
-              return v.toFixed(props.decimals);
+              return parseFloat(v.toFixed(props.decimals));
             }
           }
           return localValue.value ?? '';

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

@@ -1,5 +1,5 @@
 <template>
-  <v-stepper-vertical v-bind="$attrs">
+  <v-stepper-vertical v-bind="$attrs" class="vcs-wizard">
     <template #icon>
       <slot name="icon"><v-icon>mdi-circle</v-icon></slot>
     </template>

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

@@ -1,5 +1,6 @@
 <template>
   <v-stepper-vertical-item
+    class="vcs-wizard-step"
     :value="step"
     :editable="isActiveStep || editable"
     :complete="complete"

package/src/components/form-output/VcsMarkdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="marked"
+    class="marked vcs-markdown"
     :class="{
       'pa-2': !paddingProvided,
     }"

package/src/components/import/VcsFileDrop.vue

@@ -4,7 +4,7 @@
     @dragover.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
     @drop.prevent="dropped"
-    class="d-flex justify-center drop-field"
+    class="d-flex justify-center drop-field vcs-file-drop"
     :class="{ dragging: isDragging }"
     :dragging="isDragging"
     flat

package/src/components/import/VcsImportComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card flat class="pa-2">
+  <v-card flat class="pa-2 vcs-import-component">
     <vcs-file-drop
       :height="dropElementHeight"
       :multiple="multiple"

package/src/components/lists/VcsListItemComponent.vue

@@ -89,7 +89,11 @@
 </script>
 
 <template>
-  <v-list-item :disabled="item.disabled" v-bind="$attrs">
+  <v-list-item
+    :disabled="item.disabled"
+    v-bind="$attrs"
+    class="vcs-list-item-component"
+  >
     <template #prepend>
       <v-icon v-if="item.icon">
         {{ item.icon }}

package/src/components/lists/VcsTreeview.vue

@@ -17,6 +17,7 @@
       collapse-icon="mdi-chevron-down"
       v-bind="{ ...$props, ...$attrs }"
       :search="localSearchValue"
+      @click:select="itemClicked($event.id, $event.event)"
     >
       <template #title="scope">
         <slot name="title" v-bind="scope ?? {}">
@@ -143,6 +144,10 @@
       VTreeview,
     },
     props: {
+      items: {
+        type: Array,
+        default: () => [],
+      },
       search: {
         type: String,
         default: '',
@@ -190,6 +195,23 @@
         localSearchValue,
         handleFilter,
         forwardSlots,
+        itemClicked(name, event) {
+          const items = props.items.slice();
+          let item;
+          while (items.length > 0) {
+            item = items.pop();
+            if (item.name === name) {
+              break;
+            }
+            if (item.children?.length > 0) {
+              items.push(...item.children);
+            }
+          }
+
+          if (item?.clicked && !item?.disabled) {
+            item.clicked(event);
+          }
+        },
       };
     },
   };

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

@@ -1,4 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -16,7 +20,12 @@ declare const _default: import("vue").DefineComponent<{
     localSearchValue: import("vue").Ref<any>;
     handleFilter: (value: string, q: string, item: Object) => number;
     forwardSlots: import("vue").ComputedRef<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<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
     search: {
         type: StringConstructor;
         default: string;
@@ -33,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:search"?: ((...args: any[]) => any) | undefined;
 }, {
     search: string;
+    items: unknown[];
     showSearchbar: boolean;
     searchbarPlaceholder: string;
 }, {}>;