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

package/src/actions/StyleSelector.vue

@@ -7,7 +7,7 @@
         @click.stop="select(item.value)"
       >
         <v-list-item-title
-          :class="{ 'primary--text': item.value === currentStyleName }"
+          :class="{ 'text-primary': item.value === currentStyleName }"
         >
           {{ $st(item.text) }}
         </v-list-item-title>

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
  */
 
 /**
@@ -153,11 +150,17 @@ export function createToggleAction(
 export function createSearchButtonAction(app) {
   let destroyAction = () => {};
   const searchAction = ref(null);
+  const uiConfig = app.uiConfig.config;
+
   const determineAction = () => {
     if (app.windowManager.has('searchId')) {
       app.windowManager.remove('searchId');
     }
-    if (app.search.size > 0 && searchAction.value === null) {
+    if (
+      !uiConfig.hideSearch &&
+      app.search.size > 0 &&
+      searchAction.value === null
+    ) {
       const action = createToggleAction(
         {
           name: 'search.title',
@@ -178,7 +181,10 @@ export function createSearchButtonAction(app) {
       );
       destroyAction = action.destroy;
       searchAction.value = reactive(action.action);
-    } else if (app.search.size === 0 && searchAction.value !== null) {
+    } else if (
+      (uiConfig.hideSearch || app.search.size === 0) &&
+      searchAction.value !== null
+    ) {
       destroyAction();
       destroyAction = () => {};
       searchAction.value = null;
@@ -186,6 +192,8 @@ export function createSearchButtonAction(app) {
   };
   determineAction();
   const listeners = [
+    app.uiConfig.added.addEventListener(determineAction),
+    app.uiConfig.removed.addEventListener(determineAction),
     app.search.added.addEventListener(determineAction),
     app.search.removed.addEventListener(determineAction),
   ];

package/src/actions/listActions.d.ts

@@ -6,26 +6,26 @@
  * @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/VcsList.vue").VcsListItem>>} 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/VcsList.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>;
     destroy: import("vue").WatchStopHandle;
 };
 /**
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionCallback} exportCallback
  * @param {string|symbol} owner
  * @returns {{action: import("../manager/collectionManager/collectionManager.js").OwnedAction, destroy: (function(): void)}}
  */
-export function createListExportAction(selection: import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>, exportCallback: import("./actionHelper.js").ActionCallback, owner: string | symbol): {
+export function createListExportAction(selection: import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>, exportCallback: import("./actionHelper.js").ActionCallback, owner: string | symbol): {
     action: import("../manager/collectionManager/collectionManager.js").OwnedAction;
     destroy: (() => void);
 };

package/src/actions/listActions.js

@@ -34,7 +34,7 @@ export function createListItemDeleteAction(
 
 /**
  * Creates an action based on a provided selection
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} 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}}
  */
@@ -59,7 +59,7 @@ export function createListItemBulkAction(selection, actionOptions) {
 }
 
 /**
- * @param {import("vue").Ref<Array<import("../components/lists/VcsList.vue").VcsListItem>>} selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsListItemComponent.vue").VcsListItem>>} selection
  * @param {import("./actionHelper.js").ActionCallback} exportCallback
  * @param {string|symbol} owner
  * @returns {{action: import("../manager/collectionManager/collectionManager.js").OwnedAction, destroy: (function(): void)}}

package/src/application/VcsApp.vue

@@ -5,10 +5,10 @@
       :options="splashScreen"
       v-model="splashScreenRef"
     ></VcsSplashScreen>
-    <VcsNavbar />
+    <VcsNavbar v-if="!config.hideHeader" />
     <VcsContainer :attribution-action="attributionAction" />
     <v-footer
-      v-if="smAndUp"
+      v-if="showFooter"
       app
       absolute
       :height="footerHeight"
@@ -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';
@@ -75,6 +79,37 @@
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
   import VcsPositionDisplay from './VcsPositionDisplay.vue';
 
+  /**
+   * This helper checks the uiConfig and depending on the value will setup/teardown the providedSetupFunction
+   * @param {import("../vcsUiApp.js").default} app
+   * @param {(import("../vcsUiApp.js").default) => () => void} setupFunction
+   * @param {string} configOption parameter name of a uiConfig parameter, for example `app.uiConfig.config.hideContentTree`
+   * @returns {function():void} - cleanup function
+   */
+  export function setupUIConfigDependency(app, setupFunction, configOption) {
+    let destroyFunction = null;
+    function handler() {
+      if (!app.uiConfig.config[configOption] && !destroyFunction) {
+        destroyFunction = setupFunction(app);
+      } else if (app.uiConfig.config[configOption] && destroyFunction) {
+        destroyFunction();
+        destroyFunction = null;
+      }
+    }
+    handler();
+    const listeners = [
+      app.uiConfig.added.addEventListener(handler),
+      app.uiConfig.added.addEventListener(handler),
+    ];
+
+    return () => {
+      if (destroyFunction) {
+        destroyFunction();
+      }
+      listeners.forEach((cb) => cb());
+    };
+  }
+
   /**
    * You should call this function in the component providing the vcsUiApp to your
    * application in the components mounted hook. This will call VcsAppMounted on all plugins in the app
@@ -109,6 +144,7 @@
   /**
    * This helper function will add a map action button based on the default icons
    * to the apps NavbarManager. Furthermore, all maps on the app are synced for adding and removing.
+   * The buttons can be removed with the uiConfig hideMapButtons
    * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
@@ -231,8 +267,11 @@
       if (layersWithLegend < 1 && stylesWithLegend < 1) {
         app.navbarManager.remove('legend');
         app.windowManager.remove('legend');
+      } else {
+        addLegend();
       }
     };
+    handleLegend();
 
     const listeners = [
       app.layers.added.addEventListener((layer) => {
@@ -250,6 +289,8 @@
     ];
 
     return () => {
+      app.navbarManager.remove('legend');
+      app.windowManager.remove('legend');
       destroy();
       legendDestroy();
       listeners.forEach((cb) => cb());
@@ -263,7 +304,7 @@
    */
   function setupCustomScreen(app) {
     function setupCustomScreenAction() {
-      const { customScreen } = app.uiConfig.config.value;
+      const { customScreen } = app.uiConfig.config;
       const { action: customScreenAction, destroy: customScreenDestroy } =
         createToggleAction(
           {
@@ -301,7 +342,7 @@
     }
     let customScreen;
     const stopCustomScreenWatcher = watch(
-      () => app.uiConfig.config.value.customScreen,
+      () => app.uiConfig.config.customScreen,
       (newCustomScreen) => {
         if (app.navbarManager.has('customScreenToggle')) {
           app.navbarManager.remove('customScreenToggle');
@@ -327,7 +368,7 @@
    */
   function setupSplashScreen(app, splashScreenRef) {
     function setupSplashScreenAction() {
-      const { splashScreen } = app.uiConfig.config.value;
+      const { splashScreen } = app.uiConfig.config;
       if (splashScreen) {
         splashScreenRef.value = true;
       }
@@ -379,6 +420,7 @@
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
+    const settingsWindowId = 'vcsSettings';
     const { action: settingsAction, destroy: settingsDestroy } =
       createToggleAction(
         {
@@ -387,7 +429,7 @@
           title: 'settings.tooltip',
         },
         {
-          id: 'settingsId',
+          id: settingsWindowId,
           component: VcsSettings,
           state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -397,13 +439,15 @@
       );
     app.navbarManager.add(
       {
-        id: 'settingsToggle',
+        id: settingsWindowId,
         action: settingsAction,
       },
       vcsAppSymbol,
       ButtonLocation.MENU,
     );
     return () => {
+      app.navbarManager.remove(settingsWindowId);
+      app.windowManager.remove(settingsWindowId);
       settingsDestroy();
     };
   }
@@ -431,6 +475,11 @@
     );
   }
 
+  /**
+   * @type {string}
+   */
+  export const categoryManagerWindowId = 'category-manager';
+
   /**
    * This helper function will add a category manager button to the navbar. The category Manager
    * will only be shown if there is at least one category under management in the categoryManager.
@@ -438,15 +487,14 @@
    * @returns {function():void}
    */
   export function setupCategoryManagerWindow(app) {
-    const id = 'category-manager';
     const { action: categoryManagerAction, destroy } = createToggleAction(
       {
-        name: id,
+        name: categoryManagerWindowId,
         icon: '$vcsComponents',
         title: 'categoryManager.tooltip',
       },
       {
-        id,
+        id: categoryManagerWindowId,
         state: {
           headerTitle: 'categoryManager.title',
           headerIcon: '$vcsComponents',
@@ -472,9 +520,9 @@
      * @param {import("../manager/collectionManager/collectionComponentClass.js").default} collectionComponent
      */
     function handleAdded(collectionComponent) {
-      if (!app.navbarManager.has(id)) {
+      if (!app.navbarManager.has(categoryManagerWindowId)) {
         app.navbarManager.add(
-          { id, action: categoryManagerAction },
+          { id: categoryManagerWindowId, action: categoryManagerAction },
           vcsAppSymbol,
           ButtonLocation.CONTENT,
         );
@@ -483,7 +531,7 @@
         collectionComponent.id,
         collectionComponent.collection.added.addEventListener((item) => {
           if (
-            !app.windowManager.has(id) &&
+            !app.windowManager.has(categoryManagerWindowId) &&
             item[moduleIdSymbol] === app.dynamicModuleId
           ) {
             categoryManagerAction.hasUpdate = true;
@@ -502,8 +550,8 @@
       collectionListeners.delete(collectionComponent.id);
 
       if (!app.categoryManager.componentIds.length) {
-        app.windowManager.remove(id);
-        app.navbarManager.remove(id);
+        app.windowManager.remove(categoryManagerWindowId);
+        app.navbarManager.remove(categoryManagerWindowId);
         categoryManagerAction.hasUpdate = false;
       }
     }
@@ -520,13 +568,15 @@
 
     const windowListener = app.windowManager.added.addEventListener(
       (windowComponent) => {
-        if (windowComponent.id === id) {
+        if (windowComponent.id === categoryManagerWindowId) {
           categoryManagerAction.hasUpdate = false;
         }
       },
     );
 
     return () => {
+      app.windowManager.remove(categoryManagerWindowId);
+      app.navbarManager.remove(categoryManagerWindowId);
       destroy();
       addedListener();
       removedListener();
@@ -544,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,
@@ -671,14 +715,30 @@
       /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
-      const mapNavbarListener = setupMapNavbar(app);
-      const legendDestroy = setupLegendWindow(app);
-      const settingsDestroy = setupSettingsWindow(app);
+      const mapNavbarListener = setupUIConfigDependency(
+        app,
+        setupMapNavbar,
+        'hideMapButtons',
+      );
+      const legendDestroy = setupUIConfigDependency(
+        app,
+        setupLegendWindow,
+        'hideLegend',
+      );
+      const settingsDestroy = setupUIConfigDependency(
+        app,
+        setupSettingsWindow,
+        'hideSettings',
+      );
       const stopCustomScreen = setupCustomScreen(app);
       const splashScreenRef = ref(true);
       const stopSplashScreen = setupSplashScreen(app, splashScreenRef);
       setupHelpButton(app);
-      const destroyComponentsWindow = setupCategoryManagerWindow(app);
+      const destroyMyWorkspace = setupUIConfigDependency(
+        app,
+        setupCategoryManagerWindow,
+        'hideMyWorkspace',
+      );
       const destroyThemingListener = setupUiConfigTheming(app);
       const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
@@ -698,10 +758,10 @@
         settingsDestroy();
         stopCustomScreen();
         stopSplashScreen();
-        destroyComponentsWindow();
+        destroyMyWorkspace();
         destroyThemingListener();
-        destroyAttributions();
         destroyDisplayQualityListener();
+        destroyAttributions();
       });
 
       const { smAndUp } = useDisplay();
@@ -711,37 +771,40 @@
       });
 
       return {
-        smAndUp,
+        config: app.uiConfig.config,
+        showFooter: computed(() => {
+          return !app.uiConfig.config.hideFooter && smAndUp.value;
+        }),
         footerHeight,
         mobileLogo: computed(
           () =>
-            app.uiConfig.config.value.mobileLogo ??
-            app.uiConfig.config.value.logo ??
+            app.uiConfig.config.mobileLogo ??
+            app.uiConfig.config.logo ??
             VcsDefaultLogoMobile,
         ),
         imprint: computed(() => {
-          if (app.uiConfig.config.value.imprint) {
+          if (app.uiConfig.config.imprint) {
             return {
               title: 'footer.imprint.title',
               tooltip: 'footer.imprint.tooltip',
-              ...app.uiConfig.config.value.imprint,
+              ...app.uiConfig.config.imprint,
             };
           }
           return undefined;
         }),
         dataProtection: computed(() => {
-          if (app.uiConfig.config.value.dataProtection) {
+          if (app.uiConfig.config.dataProtection) {
             return {
               title: 'footer.dataProtection.title',
               tooltip: 'footer.dataProtection.tooltip',
-              ...app.uiConfig.config.value.dataProtection,
+              ...app.uiConfig.config.dataProtection,
             };
           }
           return undefined;
         }),
         splashScreenRef,
         splashScreen: computed(() => {
-          if (app.uiConfig.config.value.splashScreen) {
+          if (app.uiConfig.config.splashScreen) {
             return {
               title: 'components.splashScreen.name',
               tooltip: 'components.splashScreen.tooltip',
@@ -749,7 +812,7 @@
                 width: '800px',
                 height: '400px',
               },
-              ...app.uiConfig.config.value.splashScreen,
+              ...app.uiConfig.config.splashScreen,
             };
           }
           return undefined;