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

package/src/application/VcsMainMap.vue

@@ -8,27 +8,27 @@
 <style lang="scss" scoped></style>
 
 <script>
-  import { inject, onMounted, onUnmounted, ref } from 'vue';
+  import { inject, onMounted, onUnmounted, ref, computed } from 'vue';
   import { v4 as uuid } from 'uuid';
   import MapNavigation from '../navigation/MapNavigation.vue';
   import VcsMap from './VcsMap.vue';
 
   export function setupMapNavigation(app) {
-    const showMapNavigation = ref(app.maps.size < 1);
+    const mapSize = ref(app.maps.size);
 
     const listeners = [
       app.maps.added.addEventListener(() => {
-        showMapNavigation.value = true;
+        mapSize.value = app.maps.size;
       }),
       app.maps.removed.addEventListener(() => {
-        if (app.maps.size < 1) {
-          showMapNavigation.value = false;
-        }
+        mapSize.value = app.maps.size;
       }),
     ];
 
     return {
-      showMapNavigation,
+      showMapNavigation: computed(() => {
+        return mapSize.value > 0 && !app.uiConfig.config.hideMapNavigation;
+      }),
       destroy: () => {
         listeners.forEach((cb) => cb());
       },

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

@@ -1,9 +1,9 @@
 export function setupMapNavigation(app: any): {
-    showMapNavigation: import("vue").Ref<boolean>;
+    showMapNavigation: import("vue").ComputedRef<boolean>;
     destroy: () => void;
 };
 declare const _default: import("vue").DefineComponent<{}, {
     mapId: string;
-    showMapNavigation: import("vue").Ref<boolean>;
+    showMapNavigation: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/application/VcsNavbar.vue

@@ -4,6 +4,7 @@
     :density="density"
     elevation="0"
     class="px-4"
+    :height="toolbarHeight"
     :style="xs ? { bottom: 0 } : { top: 0 }"
   >
     <v-container fluid class="pa-0">
@@ -14,6 +15,7 @@
               <VcsActionButtonList
                 :actions="mapActions"
                 :overflow-count="3"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -28,6 +30,7 @@
               <VcsActionButtonList
                 :actions="contentActions"
                 :overflow-count="xs ? 3 : 4"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -38,6 +41,7 @@
               />
               <VcsActionButtonList
                 :actions="toolActions"
+                :force-overflow="false"
                 v-if="mdAndUp"
                 button="VcsToolButton"
               />
@@ -62,6 +66,7 @@
             <div class="d-flex">
               <VcsActionButtonList
                 :actions="projectActions"
+                :force-overflow="false"
                 button="VcsToolButton"
               />
               <v-divider
@@ -120,7 +125,7 @@
 
 <style lang="scss" scoped>
   .logo {
-    max-height: 36px;
+    max-height: calc(var(--v-vcs-font-size) * 3 - 3px);
     margin: 0 auto;
   }
   .v-toolbar.v-toolbar--bottom {
@@ -150,6 +155,7 @@
   import VcsToolButton from '../components/buttons/VcsToolButton.vue';
   import { createSearchButtonAction } from '../actions/actionHelper.js';
   import VcsDefaultLogo from '../logo.svg';
+  import { useFontSize } from '../vuePlugins/vuetify.js';
 
   /**
    * @description The menu bar of a VcsMap application.
@@ -186,7 +192,7 @@
         );
 
       const logo = computed(() => {
-        return app.uiConfig.config.value.logo ?? VcsDefaultLogo;
+        return app.uiConfig.config.logo ?? VcsDefaultLogo;
       });
 
       const { searchAction, destroy: destroySearchAction } =
@@ -202,6 +208,11 @@
         return xs.value ? 'comfortable' : 'compact';
       });
 
+      const fontSize = useFontSize();
+      const toolbarHeight = computed(() => {
+        return fontSize.value * 3 + 8 + 16;
+      });
+
       return {
         mapActions: getActions(ButtonLocation.MAP),
         contentActions: getActions(ButtonLocation.CONTENT),
@@ -215,6 +226,7 @@
         xs,
         density,
         mdAndUp,
+        toolbarHeight,
       };
     },
   };

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

@@ -44,5 +44,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     xs: import("vue").Ref<boolean>;
     density: import("vue").ComputedRef<"compact" | "comfortable">;
     mdAndUp: 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/application/VcsSplashScreen.vue

@@ -9,33 +9,40 @@
     persistent
   >
     <v-card>
-      <div class="px-2 pt-2 pb-1">
-        <v-card-text>
-          <VcsMarkdown :content="$st(options.content)" />
-          <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
-            <template #label>
-              <VcsMarkdown
-                :content="$st(options.checkBoxText)"
-                class="marked-checkbox-content"
-              />
-            </template>
-          </VcsCheckbox>
-        </v-card-text>
+      <v-card-text>
+        <VcsMarkdown :content="$st(options.content)" />
+        <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
+          <template #label>
+            <VcsMarkdown
+              :content="
+                $st(
+                  options.checkBoxText ||
+                    'components.splashScreen.checkBoxText',
+                )
+              "
+              class="marked-checkbox-content"
+            />
+          </template>
+        </VcsCheckbox>
+      </v-card-text>
 
-        <v-card-actions>
-          <v-row no-gutters>
-            <v-col class="text-right">
-              <VcsFormButton
-                color="primary"
-                variant="filled"
-                @click="exitScreen"
-                :disabled="options.acceptInput && !checkBox"
-                >{{ $t(options.buttonTitle) }}</VcsFormButton
-              >
-            </v-col>
-          </v-row>
-        </v-card-actions>
-      </div>
+      <v-card-actions>
+        <v-row no-gutters>
+          <v-col class="text-right">
+            <VcsFormButton
+              color="primary"
+              variant="filled"
+              @click="exitScreen"
+              :disabled="options.acceptInput && !checkBox"
+              >{{
+                $st(
+                  options.buttonTitle || 'components.splashScreen.buttonTitle',
+                )
+              }}</VcsFormButton
+            >
+          </v-col>
+        </v-row>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>

package/src/application/VcsTextPageFooter.vue

@@ -1,7 +1,7 @@
 <template v-if="textPage.title">
   <span class="d-inline-block text-truncate mr-1">
     <span v-if="textPage.url" class="imprint">
-      <a :href="textPage.url" target="_blank"
+      <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>
       </a>
     </span>
@@ -38,6 +38,7 @@
 
   /**
    * A Footer element opening either an URL in a new tab or a WindowComponent with provided content
+   * textPage title, tooltip and the url can also be i18n keys, and will be translated.
    * @vue-prop {import("../uiConfig.js").TextPageType} [textPage]
    * @vue-prop {string} windowId
    */

package/src/application/attributionsHelper.d.ts

@@ -1,24 +1,24 @@
 /**
- * @typedef {Object} Attribution.Options
+ * @typedef {Object} AttributionOptions
  * @property {string} provider - name of the data provider
  * @property {number} [year] - year of dataset
- * @property {URL} url - link to data provider
+ * @property {string} url - link to data provider
  */
 /**
  * @typedef {Object} AttributionEntry
  * @property {string} key - name of the VcsObject the attribution applies to
  * @property {string} title - title of the VcsObject the attribution applies to
- * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ * @property {AttributionOptions|Array<AttributionOptions>} attributions - attributions of a map, layer or oblique collection
  */
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
- * @returns {Array<{provider: string, years: string, url: URL}>}
+ * @returns {Array<{provider: string, years: string, url: string}>}
  */
 export function mergeAttributions(entries: Array<AttributionEntry>): Array<{
     provider: string;
     years: string;
-    url: URL;
+    url: string;
 }>;
 /**
  * Gets attributions of all active maps, layers and oblique collections and returns an array of entries.
@@ -32,22 +32,20 @@ export function getAttributions(app: import("../vcsUiApp.js").default): {
     entries: import("vue").UnwrapRef<Array<AttributionEntry>>;
     destroy: () => void;
 };
-export namespace Attribution {
-    type Options = {
-        /**
-         * - name of the data provider
-         */
-        provider: string;
-        /**
-         * - year of dataset
-         */
-        year?: number | undefined;
-        /**
-         * - link to data provider
-         */
-        url: URL;
-    };
-}
+export type AttributionOptions = {
+    /**
+     * - name of the data provider
+     */
+    provider: string;
+    /**
+     * - year of dataset
+     */
+    year?: number | undefined;
+    /**
+     * - link to data provider
+     */
+    url: string;
+};
 export type AttributionEntry = {
     /**
      * - name of the VcsObject the attribution applies to
@@ -60,5 +58,5 @@ export type AttributionEntry = {
     /**
      * - attributions of a map, layer or oblique collection
      */
-    attributions: Attribution.Options | Array<Attribution.Options>;
+    attributions: AttributionOptions | Array<AttributionOptions>;
 };

package/src/application/attributionsHelper.js

@@ -2,23 +2,23 @@ import { reactive } from 'vue';
 import { ObliqueMap } from '@vcmap/core';
 
 /**
- * @typedef {Object} Attribution.Options
+ * @typedef {Object} AttributionOptions
  * @property {string} provider - name of the data provider
  * @property {number} [year] - year of dataset
- * @property {URL} url - link to data provider
+ * @property {string} url - link to data provider
  */
 
 /**
  * @typedef {Object} AttributionEntry
  * @property {string} key - name of the VcsObject the attribution applies to
  * @property {string} title - title of the VcsObject the attribution applies to
- * @property {Attribution.Options|Array<Attribution.Options>} attributions - attributions of a map, layer or oblique collection
+ * @property {AttributionOptions|Array<AttributionOptions>} attributions - attributions of a map, layer or oblique collection
  */
 
 /**
  * merges attribution entries of same providers
  * @param {Array<AttributionEntry>} entries
- * @returns {Array<{provider: string, years: string, url: URL}>}
+ * @returns {Array<{provider: string, years: string, url: string}>}
  */
 export function mergeAttributions(entries) {
   const providers = {};

package/src/callback/vcsCallback.d.ts

@@ -5,9 +5,9 @@
  */
 export function executeCallbacks(app: import("@src/vcsUiApp.js").default, vcsCallbackOptions: Array<VcsCallbackOptions>): void;
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>}
+ * @type {ClassRegistry<typeof VcsCallback>}
  */
-export const callbackClassRegistry: ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>;
+export const callbackClassRegistry: ClassRegistry<typeof VcsCallback>;
 export default VcsCallback;
 export type VcsCallbackOptions = {
     type: string;

package/src/callback/vcsCallback.js

@@ -1,7 +1,7 @@
 import { ClassRegistry } from '@vcmap/core';
 
 /**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof VcsCallback>>}
+ * @type {ClassRegistry<typeof VcsCallback>}
  */
 export const callbackClassRegistry = new ClassRegistry();
 

package/src/components/buttons/VcsActionButtonList.vue

@@ -7,6 +7,7 @@
         v-for="(btn, index) in buttons"
         :key="`${btn.name}-${index}`"
         :tooltip="btn.title"
+        :tooltip-position="tooltipPosition"
         :icon="btn.icon"
         :active="btn.active"
         :disabled="btn.disabled || disabled"
@@ -28,12 +29,15 @@
           :disabled="disabled"
           v-bind="props"
           class="d-flex"
-        >
-          <v-icon>{{ overflowIcon }}</v-icon>
-        </component>
+          :icon="overflowIcon"
+        />
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>
+    <v-spacer
+      v-else-if="blockOverflow"
+      class="flex-grow-0 d-inline-block px-2"
+    />
   </div>
 </template>
 <script>
@@ -43,17 +47,36 @@
   import VcsFormButton from './VcsFormButton.vue';
   import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
 
+  /**
+   * compares two strings token based
+   * @param {string} str1
+   * @param {string} str2
+   * @returns {number} the convergence of both strings in percent
+   */
+  function jaccardSimilarity(str1, str2) {
+    const set1 = new Set(str1.split(' '));
+    const set2 = new Set(str2.split(' '));
+    const intersection = new Set([...set1].filter((x) => set2.has(x)));
+    const union = new Set([...set1, ...set2]);
+
+    return intersection.size / union.size;
+  }
+
   /**
    * @description
    * A component rendering a list of actions with overflow mechanic using
+   * For overflow buttons the title is only rendered, if it differs significantly from the action's name.
    * {@link VcsButton} and {@link VcsActionList}.
    * @vue-prop {Array<VcsAction>} actions - Array of actions
    * @vue-prop {string} [button='VcsButton'] - used button type (one of 'VcsButton', 'VcsToolButton' or 'VcsFormButton)
    * @vue-prop {number} [overflowCount=2] - number of buttons rendered until overflow.
    * @vue-prop {string} [overflowIcon='$vcsKebab'] - optional custom icon for overflow button
+   * @vue-prop {boolean} [blockOverflow=false] - if space for the overflow should be blocked or not (e.g. when rendering lists in a grid)
+   * @vue-prop {boolean} [forceOverflow=true] - if there is only one overflow button, this button can be rendered instead of the overflow button by setting this option to false
+   * @vue-prop {boolean} [disabled=false] - disable all actions
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  tooltipPosition - Position of the tooltip.
    * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
    * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
-   * @vue-prop {boolean} [disabled=false] - disable all actions
    */
   export default {
     name: 'VcsActionButtonList',
@@ -86,19 +109,40 @@
         type: String,
         default: '$vcsKebab',
       },
+      blockOverflow: {
+        type: Boolean,
+        default: false,
+      },
+      forceOverflow: {
+        type: Boolean,
+        default: true,
+      },
       disabled: {
         type: Boolean,
         default: false,
       },
+      tooltipPosition: {
+        type: String,
+        default: 'bottom',
+      },
     },
     computed: {
       right() {
         return this.$attrs.right !== undefined && this.$attrs.right !== false;
       },
+      computedCount() {
+        if (
+          !this.forceOverflow &&
+          this.actions.length === this.overflowCount + 1
+        ) {
+          return this.actions.length;
+        }
+        return this.overflowCount;
+      },
       buttons() {
         const buttons = this.actions
           .filter((i) => i.icon)
-          .slice(0, this.overflowCount);
+          .slice(0, this.computedCount);
         if (this.right) {
           return buttons.reverse();
         }
@@ -106,7 +150,18 @@
       },
       overflowButtons() {
         const buttonsNames = this.buttons.map((i) => i.name);
-        return this.actions.filter((i) => !buttonsNames.includes(i.name));
+        return this.actions
+          .filter((i) => !buttonsNames.includes(i.name))
+          .map((i) => {
+            const { title, ...button } = i;
+            if (
+              title &&
+              jaccardSimilarity(this.$t(i.name), this.$t(title)) > 0.5
+            ) {
+              return button;
+            }
+            return i;
+          });
       },
       classes() {
         const classes = ['d-flex', 'align-center', 'action-btn-wrap'];

package/src/components/buttons/VcsActionButtonList.vue.d.ts

@@ -17,12 +17,25 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    blockOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forceOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }, any, any, {
     right(): boolean;
+    computedCount(): any;
     buttons(): any;
     overflowButtons(): any;
     classes(): string[];
@@ -45,15 +58,30 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    blockOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    forceOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    tooltipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
 }>>, {
     button: string;
     disabled: boolean;
+    tooltipPosition: string;
     overflowCount: number;
     overflowIcon: string;
+    blockOverflow: boolean;
+    forceOverflow: boolean;
 }, {}>;
 export default _default;
 import { validateActions } from '../lists/VcsActionList.vue';

package/src/components/buttons/VcsButton.vue

@@ -64,7 +64,7 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
   import { useForwardSlots } from '../composables.js';
 
   /**
@@ -132,9 +132,7 @@
       const minHeight = computed(() => {
         return fontSize.value * 1.5;
       });
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
-      });
+      const iconSize = useIconSize();
       return {
         forwardSlots,
         hasDefaultSlot,

package/src/components/buttons/VcsButton.vue.d.ts

@@ -64,9 +64,9 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     icon: string;
+    disabled: boolean;
     active: boolean;
     hasUpdate: boolean;
-    disabled: boolean;
     color: string;
     tooltip: string;
     tooltipPosition: string;

package/src/components/buttons/VcsFormButton.vue

@@ -67,7 +67,7 @@
   import { computed } from 'vue';
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
-  import { useFontSize, useItemHeight } from '../../vuePlugins/vuetify.js';
+  import { useFontSize, useIconSize } from '../../vuePlugins/vuetify.js';
   import { useForwardSlots } from '../composables.js';
 
   /**
@@ -112,7 +112,6 @@
       },
     },
     setup(props, { slots }) {
-      const itemHeight = useItemHeight();
       const buttonVariant = computed(() => {
         if (props.variant === 'filled') {
           return 'flat';
@@ -124,8 +123,9 @@
       });
       const forwardSlots = useForwardSlots(slots, ['default']);
       const fontSize = useFontSize();
-      const iconSize = computed(() => {
-        return fontSize.value * (1.2 + 0.1 / 3);
+      const iconSize = useIconSize();
+      const itemHeight = computed(() => {
+        return fontSize.value * 2 + 6;
       });
       return {
         forwardSlots,

package/src/components/buttons/VcsToolButton.vue

@@ -70,7 +70,7 @@
   import { VBtn, VIcon, VTooltip } from 'vuetify/components';
   import VcsBadge from '../notification/VcsBadge.vue';
   import { useForwardSlots } from '../composables.js';
-  import { useItemHeight, useFontSize } from '../../vuePlugins/vuetify.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description a button with tooltip extending {@link https://vuetifyjs.com/en/api/v-btn/|vuetify v-btn} using {@link VcsTooltip}. Used for tool buttons in the Navbar.
@@ -149,7 +149,9 @@
       });
 
       const fontSize = useFontSize();
-      const itemHeight = useItemHeight();
+      const itemHeight = computed(() => {
+        return fontSize.value * 2 + 6;
+      });
       const iconSize = computed(() => {
         return fontSize.value * 1.5;
       });

package/src/components/buttons/VcsToolButton.vue.d.ts

@@ -72,11 +72,11 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    background: boolean;
     icon: string;
+    background: boolean;
+    disabled: boolean;
     active: boolean;
     hasUpdate: boolean;
-    disabled: boolean;
     color: string;
     tooltip: string;
     tooltipPosition: string;

package/src/components/composables.d.ts

@@ -19,3 +19,8 @@ export function useForwardSlots(slots: import("vue").Slots, exclude?: Array<stri
  * @returns {import("vue").ComputedRef<string>}
  */
 export function createEllipseTooltip(parent: import("vue").ComputedRef<HTMLElement | undefined>, tooltip: import("vue").ComputedRef<string | undefined>, title: import("vue").ComputedRef<string | undefined>): import("vue").ComputedRef<string>;
+/**
+ * Returns a globally unique vcs component id string
+ * @returns {string}
+ */
+export function useComponentId(): string;