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

package/src/actions/actionHelper.d.ts

@@ -1,11 +1,8 @@
 /**
- * @typedef {Object} ActionOptions
- * @property {string} name
- * @property {string} [title]
- * @property {string} [icon]
+ * @typedef {Omit<VcsAction, 'callback'>} ActionOptions
  */
 /**
- * @typedef {function(PointerEvent): void | Promise<void>} ActionCallback
+ * @typedef {(p?: PointerEvent) => (void | Promise<void>)} ActionCallback
  */
 /**
  * @typedef {Object} VcsAction
@@ -110,12 +107,8 @@ export function getViewpointFromFeature(feature: import("ol").Feature): Viewpoin
  * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
  */
 export function createZoomToFeatureAction(actionOptions: ActionOptions, feature: import("ol").Feature, mapCollection: import("@vcmap/core").MapCollection): VcsAction | null;
-export type ActionOptions = {
-    name: string;
-    title?: string | undefined;
-    icon?: string | undefined;
-};
-export type ActionCallback = (arg0: PointerEvent) => void | Promise<void>;
+export type ActionOptions = Omit<VcsAction, 'callback'>;
+export type ActionCallback = (p?: PointerEvent) => (void | Promise<void>);
 export type VcsAction = {
     /**
      * - reactive and translatable name rendered in overflow

package/src/actions/actionHelper.js

@@ -19,14 +19,11 @@ import {
 import SearchComponent from '../search/SearchComponent.vue';
 
 /**
- * @typedef {Object} ActionOptions
- * @property {string} name
- * @property {string} [title]
- * @property {string} [icon]
+ * @typedef {Omit<VcsAction, 'callback'>} ActionOptions
  */
 
 /**
- * @typedef {function(PointerEvent): void | Promise<void>} ActionCallback
+ * @typedef {(p?: PointerEvent) => (void | Promise<void>)} ActionCallback
  */
 
 /**

package/src/actions/listActions.d.ts

@@ -6,14 +6,14 @@
  * @template {Object} T
  * @returns {import("./actionHelper.js").VcsAction}
  */
-export function createListItemDeleteAction<T extends Object>(collection: import("@vcmap/core").Collection<T>, item: T, actionOptions?: Partial<import("./actionHelper.js").ActionOptions> | undefined): import("./actionHelper.js").VcsAction;
+export function createListItemDeleteAction<T extends Object>(collection: import("@vcmap/core").Collection<T>, item: T, actionOptions?: Partial<Omit<import("./actionHelper.js").VcsAction, "callback">> | undefined): import("./actionHelper.js").VcsAction;
 /**
  * Creates an action based on a provided selection
  * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionOptions & {callback:import("./actionHelper.js").ActionCallback}} [actionOptions]
  * @returns {{action: import("vue").UnwrapRef<import("./actionHelper.js").VcsAction>, destroy: import("vue").WatchStopHandle}}
  */
-export function createListItemBulkAction(selection: import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>, actionOptions?: (import("./actionHelper.js").ActionOptions & {
+export function createListItemBulkAction(selection: import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>, actionOptions?: (Omit<import("./actionHelper.js").VcsAction, "callback"> & {
     callback: import("./actionHelper.js").ActionCallback;
 }) | undefined): {
     action: import("vue").UnwrapRef<import("./actionHelper.js").VcsAction>;

package/src/application/VcsApp.vue

@@ -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';
@@ -63,7 +58,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 +589,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,
@@ -706,6 +699,7 @@
       VcsNavbar,
       VContainer,
       VFooter,
+      VSpacer,
     },
     props: {
       appId: {

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

@@ -1,15 +1,18 @@
 <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">
+    <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 +20,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/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/VcsTextPageFooter.vue

@@ -1,6 +1,6 @@
 <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">
+    <span v-if="textPage.url" class="text-page-footer">
       <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>
       </a>
@@ -8,7 +8,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 +21,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .imprint {
+  .text-page-footer {
     font-size: smaller;
     a {
       color: var(--v-text-color);

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;