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

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.js

@@ -153,11 +153,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 +184,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 +195,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

@@ -9,23 +9,23 @@
 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;
 /**
  * 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?: (import("./actionHelper.js").ActionOptions & {
     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"
@@ -75,6 +75,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 +140,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 +263,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 +285,8 @@
     ];
 
     return () => {
+      app.navbarManager.remove('legend');
+      app.windowManager.remove('legend');
       destroy();
       legendDestroy();
       listeners.forEach((cb) => cb());
@@ -263,7 +300,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 +338,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 +364,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 +416,7 @@
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
+    const settingsWindowId = 'vcsSettings';
     const { action: settingsAction, destroy: settingsDestroy } =
       createToggleAction(
         {
@@ -387,7 +425,7 @@
           title: 'settings.tooltip',
         },
         {
-          id: 'settingsId',
+          id: settingsWindowId,
           component: VcsSettings,
           state: { headerIcon: 'mdi-cog', headerTitle: 'settings.title' },
           slot: WindowSlot.DYNAMIC_RIGHT,
@@ -397,13 +435,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 +471,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 +483,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 +516,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 +527,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 +546,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 +564,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();
@@ -671,14 +717,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 +760,10 @@
         settingsDestroy();
         stopCustomScreen();
         stopSplashScreen();
-        destroyComponentsWindow();
+        destroyMyWorkspace();
         destroyThemingListener();
-        destroyAttributions();
         destroyDisplayQualityListener();
+        destroyAttributions();
       });
 
       const { smAndUp } = useDisplay();
@@ -711,37 +773,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 +814,7 @@
                 width: '800px',
                 height: '400px',
               },
-              ...app.uiConfig.config.value.splashScreen,
+              ...app.uiConfig.config.splashScreen,
             };
           }
           return undefined;