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

package/src/application/VcsApp.vue

@@ -63,7 +63,11 @@
   import VcsSettings from './VcsSettings.vue';
   import { WindowSlot } from '../manager/window/windowManager.js';
   import CollectionManager from '../manager/collectionManager/CollectionManager.vue';
-  import { defaultPrimaryColor, useFontSize } from '../vuePlugins/vuetify.js';
+  import {
+    createVcsThemes,
+    setTheme,
+    useFontSize,
+  } from '../vuePlugins/vuetify.js';
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
@@ -590,25 +594,19 @@
    * @returns {function():void} - call to stop syncing
    */
   export function setupUiConfigTheming(app) {
+    function updateTheme(item) {
+      if (item.name === 'primaryColor' || item.name === 'vuetifyTheme') {
+        const mergedThemes = createVcsThemes(
+          app.uiConfig.getByKey('vuetifyTheme')?.value,
+          app.uiConfig.getByKey('primaryColor')?.value,
+        );
+        setTheme(app.vuetify, mergedThemes);
+        app.themeChanged.raiseEvent();
+      }
+    }
     const listeners = [
-      app.uiConfig.added.addEventListener((item) => {
-        if (item.name === 'primaryColor') {
-          app.vuetify.theme.themes.value.dark.colors.primary =
-            item.value?.dark || item.value;
-          app.vuetify.theme.themes.value.light.colors.primary =
-            item.value?.light || item.value;
-          app.themeChanged.raiseEvent();
-        }
-      }),
-      app.uiConfig.removed.addEventListener((item) => {
-        if (item.name === 'primaryColor') {
-          app.vuetify.theme.themes.value.dark.colors.primary =
-            defaultPrimaryColor.dark;
-          app.vuetify.theme.themes.value.light.colors.primary =
-            defaultPrimaryColor.light;
-          app.themeChanged.raiseEvent();
-        }
-      }),
+      app.uiConfig.added.addEventListener(updateTheme),
+      app.uiConfig.removed.addEventListener(updateTheme),
     ];
     const stopWatching = watch(
       () => app.vuetify.theme.current.value.dark,

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

@@ -99,7 +99,7 @@ declare const _default: import("vue").DefineComponent<{
          */
         readonly appTitle?: string | undefined;
         /**
-         * - an optional primary color to use in all themes
+         * - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
          */
         readonly primaryColor?: string | undefined;
         /**
@@ -320,6 +320,10 @@ declare const _default: import("vue").DefineComponent<{
                 readonly layerSSEFactor?: number | undefined;
             } | undefined;
         } | undefined;
+        /**
+         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         */
+        readonly vuetifyTheme?: any;
     };
     showFooter: import("vue").ComputedRef<boolean>;
     footerHeight: import("vue").ComputedRef<number>;

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedAttributions: import("vue").ComputedRef<{
         provider: string;
         years: string;
-        url: URL;
+        url: string;
     }[]>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {

package/src/application/VcsContainer.vue

@@ -41,7 +41,7 @@
     top: 0px;
   }
   .with-header {
-    top: 48px;
+    top: calc(var(--v-vcs-font-size) * 3 + 9px);
   }
   .vcs-container {
     position: absolute;
@@ -87,7 +87,7 @@
   import { VContainer } from 'vuetify/components';
   import PanelManagerComponent from '../manager/panel/PanelManagerComponent.vue';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
-  import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
+  import ToolboxManagerComponent from '../manager/toolbox/ToolboxManagerComponent.vue';
   import NotifierComponent from '../notifier/NotifierComponent.vue';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
 

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

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
          */
         readonly appTitle?: string | undefined;
         /**
-         * - an optional primary color to use in all themes
+         * - an optional primary color to use in all themes, can be overwritten by `vuetifyTheme`
          */
         readonly primaryColor?: string | undefined;
         /**
@@ -240,6 +240,10 @@ declare const _default: import("vue").DefineComponent<{
                 readonly layerSSEFactor?: number | undefined;
             } | undefined;
         } | undefined;
+        /**
+         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         */
+        readonly vuetifyTheme?: any;
     };
     xs: import("vue").Ref<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;

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">
@@ -124,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 {
@@ -154,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.
@@ -206,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),
@@ -219,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

@@ -14,7 +14,12 @@
         <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
           <template #label>
             <VcsMarkdown
-              :content="$st(options.checkBoxText)"
+              :content="
+                $st(
+                  options.checkBoxText ||
+                    'components.splashScreen.checkBoxText',
+                )
+              "
               class="marked-checkbox-content"
             />
           </template>
@@ -29,7 +34,11 @@
               variant="filled"
               @click="exitScreen"
               :disabled="options.acceptInput && !checkBox"
-              >{{ $t(options.buttonTitle) }}</VcsFormButton
+              >{{
+                $st(
+                  options.buttonTitle || 'components.splashScreen.buttonTitle',
+                )
+              }}</VcsFormButton
             >
           </v-col>
         </v-row>

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

@@ -29,9 +29,8 @@
           :disabled="disabled"
           v-bind="props"
           class="d-flex"
-        >
-          <v-icon>{{ overflowIcon }}</v-icon>
-        </component>
+          :icon="overflowIcon"
+        />
       </template>
       <VcsActionList :actions="overflowButtons" :disabled="disabled" />
     </v-menu>

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;

package/src/components/composables.js

@@ -1,4 +1,4 @@
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
 /**
  * returns a computed which is true, if the provided attributes contain one or more
@@ -30,6 +30,35 @@ export function useForwardSlots(slots, exclude = []) {
   });
 }
 
+let intersectionObserver = null;
+/** @type {WeakMap<WeakKey<HTMLElement>, import("vue").ComputedRef<boolean>>} */
+const observedTargets = new WeakMap();
+
+/**
+ * if the visibility of the element changes, the computed ref will be set.
+ * @param {HTMLElement} elem
+ * @param {import("vue").ComputedRef<boolean>} visible
+ * @returns {() => void}}
+ */
+function registerTargetWithIntersectionObserver(elem, visible) {
+  if (!intersectionObserver) {
+    intersectionObserver = new IntersectionObserver((targets) => {
+      targets.forEach((target) => {
+        const visibilityRef = observedTargets.get(target.target);
+        if (visibilityRef) {
+          visibilityRef.value = target.isIntersecting;
+        }
+      });
+    });
+  }
+  intersectionObserver.observe(elem);
+  observedTargets.set(elem, visible);
+  return () => {
+    intersectionObserver.unobserve(elem);
+    observedTargets.delete(elem);
+  };
+}
+
 /**
  * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
  * @param {import("vue").ComputedRef<string|undefined>} tooltip
@@ -39,19 +68,49 @@ export function useForwardSlots(slots, exclude = []) {
 export function createEllipseTooltip(parent, tooltip, title) {
   const offsetWidth = ref(0);
   const scrollWidth = ref(0);
-
-  watch([parent, title], async () => {
-    const elem = parent.value;
-    if (elem) {
-      await nextTick(() => {
-        offsetWidth.value = elem.offsetWidth;
-        scrollWidth.value = elem.scrollWidth;
-      });
+  const visible = ref(false);
+  let observerListener = () => {};
+  watch(visible, () => {
+    if (visible.value && parent.value) {
+      offsetWidth.value = parent.value.offsetWidth;
+      scrollWidth.value = parent.value.scrollWidth;
     } else {
       offsetWidth.value = 0;
       scrollWidth.value = 0;
     }
   });
+  watch(
+    parent,
+    () => {
+      observerListener();
+      visible.value = false;
+      const elem = parent.value;
+      if (elem) {
+        if (elem.checkVisibility()) {
+          visible.value = true;
+        } else {
+          observerListener = registerTargetWithIntersectionObserver(
+            elem,
+            visible,
+          );
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(title, async () => {
+    if (visible.value) {
+      await nextTick(() => {
+        offsetWidth.value = parent.value.offsetWidth;
+        scrollWidth.value = parent.value.scrollWidth;
+      });
+    }
+  });
+
+  onUnmounted(() => {
+    observerListener();
+  });
 
   return computed(() => {
     if (tooltip.value) {
@@ -63,3 +122,14 @@ export function createEllipseTooltip(parent, tooltip, title) {
     return '';
   });
 }
+
+let componentIdCounter = 0;
+
+/**
+ * Returns a globally unique vcs component id string
+ * @returns {string}
+ */
+export function useComponentId() {
+  componentIdCounter += 1;
+  return `vcs-${componentIdCounter}`;
+}

package/src/components/extent/VcsExtent.vue

@@ -2,13 +2,13 @@
   <v-container class="py-0 px-1">
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
-        <VcsLabel html-for="projection">
+        <VcsLabel :html-for="`${cid}-projection`">
           {{ $t('components.extent.projection') }}
         </VcsLabel>
       </v-col>
       <v-col>
         <VcsTextField
-          id="projection"
+          :id="`${cid}-projection`"
           disabled
           :model-value="modelValue.projection.epsg"
         />
@@ -23,9 +23,9 @@
         [(v) => checkInput(v, max[1])],
       ]"
     >
-      <template #prepend="{ prefixes }">
+      <template #prepend>
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`">
+          <VcsLabel>
             {{ $t('components.extent.min') }}
           </VcsLabel>
         </v-col>
@@ -40,9 +40,9 @@
         [(v) => checkInput(min[1], v)],
       ]"
     >
-      <template #prepend="{ prefixes }">
+      <template #prepend>
         <v-col :cols="firstCols">
-          <VcsLabel :html-for="`${prefixes[0]}-coordinate`">
+          <VcsLabel>
             {{ $t('components.extent.max') }}
           </VcsLabel>
         </v-col>
@@ -59,6 +59,7 @@
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
+  import { useComponentId } from '../composables.js';
 
   function checkInput(min, max) {
     return min < max || 'components.extent.invalid';
@@ -114,10 +115,13 @@
           },
         });
 
+      const cid = useComponentId();
+
       return {
         min: getCoordinate(0, 2),
         max: getCoordinate(2),
         checkInput,
+        cid,
       };
     },
   };

package/src/components/extent/VcsExtent.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     min: import("vue").WritableComputedRef<any>;
     max: import("vue").WritableComputedRef<any>;
     checkInput: typeof checkInput;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;