@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/src/actions/listActions.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Creates an action for renaming an item in a VcsList. Sho VcsTextfield in VcsList.
+ * @param {import("../components/lists/VcsList.vue").VcsListItem} item
+ * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createListItemRenameAction(item: import("../components/lists/VcsList.vue").VcsListItem, actionOptions?: Partial<import("./actionHelper.js").ActionOptions> | undefined): import("./actionHelper.js").VcsAction;
+/**
+ * Creates an action for renaming an item in a VcsList.
+ * @param {import("@vcmap/core").Collection<T>} collection
+ * @param {T} item
+ * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
+ * @template {Object} T
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createListItemDeleteAction<T extends Object>(collection: import("@vcmap/core/dist/src/util/collection.js").default<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("./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 & {
+    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("./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): {
+    action: import("../manager/collectionManager/collectionManager.js").OwnedAction;
+    destroy: (() => void);
+};
+/**
+ *
+ * @param {function(File[]):void|Promise<void>} importCallback
+ * @param {import("../manager/window/windowManager.js").default} windowManager
+ * @param {string|symbol} owner
+ * @param {string} parentId
+ * @returns {{action: import("../manager/collectionManager/collectionManager.js").OwnedAction, destroy: (function(): void)}}
+ */
+export function createListImportAction(importCallback: (arg0: File[]) => void | Promise<void>, windowManager: import("../manager/window/windowManager.js").default, owner: string | symbol, parentId: string): {
+    action: import("../manager/collectionManager/collectionManager.js").OwnedAction;
+    destroy: (() => void);
+};
+/**
+ * @param {import("vue").Ref<Array<import("../manager/collectionManager/collectionComponentClass.js").CollectionComponentListItem>>} selection
+ * @param {function(T):void} editCallback
+ * @param {import("../manager/window/windowManager.js").default} windowManager
+ * @param {string|symbol} owner
+ * @param {string} multiEditorId
+ * @template {Object} T
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: function(): void}}
+ */
+export function createListEditAction<T extends Object>(selection: import("vue").Ref<Array<import("../manager/collectionManager/collectionComponentClass.js").CollectionComponentListItem>>, editCallback: (arg0: T) => void, windowManager: import("../manager/window/windowManager.js").default, owner: string | symbol, multiEditorId: string): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};

package/src/actions/listActions.js

@@ -0,0 +1,185 @@
+import { reactive, watch } from 'vue';
+import { check } from '@vcsuite/check';
+import { createToggleAction } from './actionHelper.js';
+import ImportComponent from '../components/import/ImportComponent.vue';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import { vcsAppSymbol } from '../pluginHelper.js';
+
+/**
+ * Creates an action for renaming an item in a VcsList. Sho VcsTextfield in VcsList.
+ * @param {import("../components/lists/VcsList.vue").VcsListItem} item
+ * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createListItemRenameAction(item, actionOptions = {}) {
+  return {
+    name: 'list.renameItem',
+    ...actionOptions,
+    callback: () => {
+      item.rename = true;
+    },
+  };
+}
+
+/**
+ * Creates an action for renaming an item in a VcsList.
+ * @param {import("@vcmap/core").Collection<T>} collection
+ * @param {T} item
+ * @param {Partial<import("./actionHelper.js").ActionOptions>} [actionOptions={}]
+ * @template {Object} T
+ * @returns {import("./actionHelper.js").VcsAction}
+ */
+export function createListItemDeleteAction(
+  collection,
+  item,
+  actionOptions = {},
+) {
+  return {
+    name: 'list.deleteItem',
+    ...actionOptions,
+    callback: () => {
+      if (collection.has(item)) {
+        collection.remove(item);
+      }
+    },
+  };
+}
+
+/**
+ * Creates an action based on a provided selection
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsList.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, actionOptions) {
+  check(actionOptions, {
+    name: String,
+    icon: [undefined, String],
+    title: [undefined, String],
+    callback: Function,
+  });
+
+  const action = reactive({
+    disabled: true,
+    ...actionOptions,
+  });
+
+  const destroy = watch(selection, () => {
+    action.disabled = selection.value.length < 1;
+  });
+
+  return { action, destroy };
+}
+
+/**
+ * @param {import("vue").Ref<Array<import("../components/lists/VcsList.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, exportCallback, owner) {
+  const { action, destroy } = createListItemBulkAction(selection, {
+    name: 'list.export',
+    callback: exportCallback,
+  });
+
+  return {
+    action: {
+      action,
+      owner,
+      weight: 99,
+    },
+    destroy,
+  };
+}
+
+/**
+ *
+ * @param {function(File[]):void|Promise<void>} importCallback
+ * @param {import("../manager/window/windowManager.js").default} windowManager
+ * @param {string|symbol} owner
+ * @param {string} parentId
+ * @returns {{action: import("../manager/collectionManager/collectionManager.js").OwnedAction, destroy: (function(): void)}}
+ */
+export function createListImportAction(
+  importCallback,
+  windowManager,
+  owner,
+  parentId,
+) {
+  check(importCallback, Function);
+  check(owner, [String, vcsAppSymbol]);
+  check(parentId, String);
+
+  const { action, destroy } = createToggleAction(
+    {
+      name: `list.import`,
+    },
+    {
+      id: `list-import`,
+      parentId,
+      component: ImportComponent,
+      slot: WindowSlot.DYNAMIC_CHILD,
+      state: {
+        headerTitle: `list.import`,
+        headerIcon: '$vcsPlus',
+      },
+      props: {
+        importFiles: importCallback,
+      },
+    },
+    windowManager,
+    owner,
+  );
+
+  return {
+    action: {
+      action,
+      owner,
+      weight: 98,
+    },
+    destroy,
+  };
+}
+
+/**
+ * @param {import("vue").Ref<Array<import("../manager/collectionManager/collectionComponentClass.js").CollectionComponentListItem>>} selection
+ * @param {function(T):void} editCallback
+ * @param {import("../manager/window/windowManager.js").default} windowManager
+ * @param {string|symbol} owner
+ * @param {string} multiEditorId
+ * @template {Object} T
+ * @returns {{action: import("./actionHelper.js").VcsAction, destroy: function(): void}}
+ */
+export function createListEditAction(
+  selection,
+  editCallback,
+  windowManager,
+  owner,
+  multiEditorId,
+) {
+  const { action, destroy: destroyEditSelected } = createListItemBulkAction(
+    selection,
+    {
+      name: 'list.edit',
+      callback: editCallback,
+    },
+  );
+
+  function handleWindowChanged() {
+    action.active = windowManager.has(multiEditorId);
+  }
+
+  const editorStateListener = [
+    windowManager.added.addEventListener(handleWindowChanged),
+    windowManager.removed.addEventListener(handleWindowChanged),
+  ];
+
+  return {
+    action,
+    destroy: () => {
+      destroyEditSelected();
+      editorStateListener.forEach((cb) => cb());
+    },
+  };
+}

package/src/actions/stateRefAction.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Creates an action
+ * @param {string} name
+ * @param {import("vue").Ref<StateActionState>} stateRef
+ * @param {function():void} callback
+ * @returns {{ action: import("./actionHelper.js").VcsAction, destroy: function():void }}
+ */
+export function createStateRefAction(name: string, stateRef: import("vue").Ref<StateActionState>, callback: () => void): {
+    action: import("./actionHelper.js").VcsAction;
+    destroy: () => void;
+};
+export type StateActionState = number;
+export namespace StateActionState {
+    let NONE: number;
+    let INACTIVE: number;
+    let LOADING: number;
+    let ACTIVE: number;
+    let INDETERMINATE: number;
+}

package/src/actions/stateRefAction.js

@@ -24,7 +24,7 @@ const stateIconMap = {
  * @param {string} name
  * @param {import("vue").Ref<StateActionState>} stateRef
  * @param {function():void} callback
- * @returns {{ action: VcsAction, destroy: function():void }}
+ * @returns {{ action: import("./actionHelper.js").VcsAction, destroy: function():void }}
  */
 export function createStateRefAction(name, stateRef, callback) {
   check(name, String);

package/src/application/VcsApp.vue

@@ -31,11 +31,29 @@
       <WindowManagerComponent />
       <NotifierComponent />
     </v-container>
-    <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
+    <v-footer
+      absolute
+      v-if="$vuetify.breakpoint.smAndUp"
+      min-height="22px"
+      class="d-flex gap-1 pa-0"
+    >
+      <VcsPositionDisplay />
+
+      <VcsTextPageFooter
+        v-if="imprint"
+        :text-page="imprint"
+        :window-id="'imprintWindow'"
+      />
+      <VcsTextPageFooter
+        v-if="dataProtection"
+        :text-page="dataProtection"
+        :window-id="'dataProtectionWindow'"
+      />
       <VcsAttributionsFooter
+        class="align-wrapper"
         :entries="attributionEntries"
         :attribution-action="attributionAction"
-      />
+      ></VcsAttributionsFooter>
     </v-footer>
   </v-container>
 </template>
@@ -44,6 +62,11 @@
   ::v-deep .v-application--wrap {
     min-height: fit-content;
   }
+  .align-wrapper {
+    position: absolute;
+    right: 0;
+    margin-right: 4px !important;
+  }
   .vcs-main {
     position: absolute;
     top: 48px;
@@ -84,7 +107,7 @@
     ref,
     watch,
   } from 'vue';
-  import { getVcsAppById } from '@vcmap/core';
+  import { getVcsAppById, moduleIdSymbol } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
   import { getLogger } from '@vcsuite/logger';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
@@ -106,24 +129,26 @@
   import VcsLegend from '../legend/VcsLegend.vue';
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
+  import VcsTextPageFooter from './VcsTextPageFooter.vue';
   import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import NotifierComponent from '../notifier/NotifierComponent.vue';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
+  import VcsPositionDisplay from './VcsPositionDisplay.vue';
 
   /**
    * 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
    * and add a listener to call. Returns a destroy hook to stop listening to the added event. If you use the VcsApp
    * component, do not call this function, since the component will do this for you.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
   export function setupPluginMountedListeners(app) {
     /**
      * wrapped execution of onVcsAppMounted hook
-     * @param {VcsPlugin} plugin
+     * @param {import("@src/vcsUiApp.js").VcsPlugin} plugin
      */
     function onVcsAppMounted(plugin) {
       if (plugin.onVcsAppMounted) {
@@ -146,7 +171,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.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
   export function setupMapNavbar(app) {
@@ -209,7 +234,7 @@
   /**
    * This helper function will add a legend action button to the apps NavbarManager TOOL location, if legend entries are available.
    * Watches number of legend entries.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
   export function setupLegendWindow(app) {
@@ -295,7 +320,7 @@
 
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
   export function setupSettingsWindow(app) {
@@ -330,7 +355,7 @@
 
   /**
    * This helper function will add a help action button referencing VC Map help page to the apps NavbarManager MENU location.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    */
   export function setupHelpButton(app) {
     const helpAction = createLinkAction(
@@ -354,7 +379,7 @@
   /**
    * 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.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    * @returns {function():void}
    */
   export function setupCategoryManagerWindow(app) {
@@ -384,30 +409,74 @@
       vcsAppSymbol,
     );
 
-    const setupCategories = () => {
-      if (app.categoryManager.componentIds.length > 0) {
-        if (!app.navbarManager.has(id)) {
-          app.navbarManager.add(
-            { id, action: categoryManagerAction },
-            vcsAppSymbol,
-            ButtonLocation.CONTENT,
-          );
-        }
-      } else {
+    const collectionListeners = new Map();
+
+    /**
+     * Makes sure that the category-manager button is in the navbar.
+     * Adds listener to the collectionComponents collection to display hasUpdate if new item is added to collection AND category-manager window is closed.
+     * @param {import("../manager/collectionManager/collectionComponentClass.js").default} collectionComponent
+     */
+    function handleAdded(collectionComponent) {
+      if (!app.navbarManager.has(id)) {
+        app.navbarManager.add(
+          { id, action: categoryManagerAction },
+          vcsAppSymbol,
+          ButtonLocation.CONTENT,
+        );
+      }
+      collectionListeners.set(
+        collectionComponent.id,
+        collectionComponent.collection.added.addEventListener((item) => {
+          if (
+            !app.windowManager.has(id) &&
+            item[moduleIdSymbol] === app.dynamicModuleId
+          ) {
+            categoryManagerAction.hasUpdate = true;
+          }
+        }),
+      );
+    }
+
+    /**
+     * Removes listener on collection of collectionComponent.
+     * Removes collection-manager button in navbar, if categoryManager has no more collectionComponents.
+     * @param {import("../manager/collectionManager/collectionComponentClass.js").default} collectionComponent
+     */
+    function handleRemoved(collectionComponent) {
+      collectionListeners.get(collectionComponent.id)?.();
+      collectionListeners.delete(collectionComponent.id);
+
+      if (!app.categoryManager.componentIds.length) {
         app.windowManager.remove(id);
         app.navbarManager.remove(id);
+        categoryManagerAction.hasUpdate = false;
       }
-    };
+    }
+
     const addedListener =
-      app.categoryManager.added.addEventListener(setupCategories);
+      app.categoryManager.added.addEventListener(handleAdded);
     const removedListener =
-      app.categoryManager.removed.addEventListener(setupCategories);
-    setupCategories();
+      app.categoryManager.removed.addEventListener(handleRemoved);
+
+    // setup existing collectionComponents
+    app.categoryManager.componentIds.forEach((componentId) =>
+      handleAdded(app.categoryManager.get(componentId)),
+    );
+
+    const windowListener = app.windowManager.added.addEventListener(
+      (windowComponent) => {
+        if (windowComponent.id === id) {
+          categoryManagerAction.hasUpdate = false;
+        }
+      },
+    );
 
     return () => {
       destroy();
       addedListener();
       removedListener();
+      collectionListeners.forEach((value) => value());
+      windowListener();
     };
   }
 
@@ -416,7 +485,7 @@
    * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
    * the theming keys. Returns a function to stop syncing.
    * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
-   * @param {VcsUiApp} app
+   * @param {import("../vcsUiApp.js").default} app
    * @param {import("vuetify").Framework} vuetify
    * @returns {function():void} - call to stop syncing
    */
@@ -454,8 +523,8 @@
   /**
    * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
    * It also returns a attributionAction to toggle the attributions window and a destroy function.
-   * @param {VcsUiApp} app
-   * @returns {{attributionEntries: import("vue").Ref<Array<AttributionEntry>>, attributionAction: VcsAction, destroyAttributions: function():void}}
+   * @param {import("../vcsUiApp.js").default} app
+   * @returns {{ attributionEntries: import("vue").Ref<Array<import("./attributionsHelper.js").AttributionEntry>>, attributionAction: import("../actions/actionHelper.js").VcsAction, destroyAttributions: function():void }}
    */
   export function setupAttributions(app) {
     const { entries, destroy } = getAttributions(app);
@@ -521,7 +590,9 @@
   export default {
     components: {
       VcsButton,
+      VcsPositionDisplay,
       VcsAttributionsFooter,
+      VcsTextPageFooter,
       MapNavigation,
       VcsNavbar,
       VcsMap,
@@ -540,7 +611,7 @@
     setup(props) {
       const id = uuid();
       const mapId = `mapCollection-${id}`;
-      /** @type {VcsUiApp} */
+      /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
 
@@ -586,6 +657,10 @@
             app.uiConfig.config.value.logo ??
             VcsDefaultLogoMobile,
         ),
+        imprint: computed(() => app.uiConfig.config.value.imprint),
+        dataProtection: computed(
+          () => app.uiConfig.config.value.dataProtection,
+        ),
         attributionEntries,
         attributionAction,
         showMapNavigation,

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

@@ -0,0 +1,86 @@
+/**
+ * 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
+ * and add a listener to call. Returns a destroy hook to stop listening to the added event. If you use the VcsApp
+ * component, do not call this function, since the component will do this for you.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void}
+ */
+export function setupPluginMountedListeners(app: import("../vcsUiApp.js").default): () => void;
+/**
+ * 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.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void}
+ */
+export function setupMapNavbar(app: import("../vcsUiApp.js").default): () => void;
+/**
+ * This helper function will add a legend action button to the apps NavbarManager TOOL location, if legend entries are available.
+ * Watches number of legend entries.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void}
+ */
+export function setupLegendWindow(app: import("../vcsUiApp.js").default): () => void;
+/**
+ * This helper function will add a settings action button to the apps NavbarManager MENU location.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void}
+ */
+export function setupSettingsWindow(app: import("../vcsUiApp.js").default): () => void;
+/**
+ * This helper function will add a help action button referencing VC Map help page to the apps NavbarManager MENU location.
+ * @param {import("../vcsUiApp.js").default} app
+ */
+export function setupHelpButton(app: import("../vcsUiApp.js").default): void;
+/**
+ * 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.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void}
+ */
+export function setupCategoryManagerWindow(app: import("../vcsUiApp.js").default): () => void;
+/**
+ * This helper sets up a listener to sync the theming relevant keys from the {@see UiConfigObject}
+ * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
+ * the theming keys. Returns a function to stop syncing.
+ * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
+ * @param {import("../vcsUiApp.js").default} app
+ * @param {import("vuetify").Framework} vuetify
+ * @returns {function():void} - call to stop syncing
+ */
+export function setupUiConfigTheming(app: import("../vcsUiApp.js").default, vuetify: import("vuetify").Framework): () => void;
+/**
+ * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
+ * It also returns a attributionAction to toggle the attributions window and a destroy function.
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{ attributionEntries: import("vue").Ref<Array<import("./attributionsHelper.js").AttributionEntry>>, attributionAction: import("../actions/actionHelper.js").VcsAction, destroyAttributions: function():void }}
+ */
+export function setupAttributions(app: import("../vcsUiApp.js").default): {
+    attributionEntries: import("vue").Ref<Array<import("./attributionsHelper.js").AttributionEntry>>;
+    attributionAction: import("../actions/actionHelper.js").VcsAction;
+    destroyAttributions: () => void;
+};
+export function setupMapNavigation(app: any): {
+    showMapNavigation: import("vue").Ref<boolean>;
+    destroy: () => void;
+};
+declare const _default: import("vue").DefineComponent<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    mapId: string;
+    mobileLogo: import("vue").ComputedRef<any>;
+    imprint: import("vue").ComputedRef<unknown>;
+    dataProtection: import("vue").ComputedRef<unknown>;
+    attributionEntries: import("vue").Ref<import("./attributionsHelper.js").AttributionEntry[]>;
+    attributionAction: import("../actions/actionHelper.js").VcsAction;
+    showMapNavigation: import("vue").Ref<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    appId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    entries: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    entries: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>>, {
+    entries: Record<string, any>;
+}>;
+export default _default;

package/src/application/VcsAttributionsFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="d-inline-block text-truncate mr-10 attribution-wrap">
+  <span class="d-inline-block text-truncate mr-10">
     <span
       v-for="attribution in mergedAttributions"
       class="attribution-span"
@@ -10,7 +10,6 @@
       </a>
     </span>
     <VcsButton
-      class="d-flex"
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
       :icon="attributionAction.icon"
@@ -23,8 +22,6 @@
 
 <style lang="scss" scoped>
   .attribution-wrap .vcs-button-wrap {
-    position: absolute;
-    right: 4px;
     bottom: 3px;
   }