@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.17

package/src/manager/window/windowManager.js

@@ -8,10 +8,10 @@ import { vcsAppSymbol } from '../../pluginHelper.js';
 /**
  * @readonly
  * @enum {string}
- * @property {string} STATIC
- * @property {string} DYNAMIC_LEFT
- * @property {string} DYNAMIC_RIGHT
- * @property {string} DETACHED
+ * @property {string} STATIC - Static windows cannot be moved and will be positioned top-left.
+ * @property {string} DYNAMIC_LEFT - Positioned top-left, if no static window is present. Can be moved by user interaction.
+ * @property {string} DYNAMIC_RIGHT - Positioned top-right. Can be moved by user interaction.
+ * @property {string} DETACHED - Positioned at initial provided position. Can be moved by user interaction.
  */
 export const WindowSlot = {
   STATIC: 'static',
@@ -22,38 +22,47 @@ export const WindowSlot = {
 
 
 /**
- * @typedef WindowPositionOptions
+ * @typedef {Object} WindowPositionOptions
  * @property {string|number|undefined} left Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
  * @property {string|number|undefined} top Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
  * @property {string|number|undefined} right Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
  * @property {string|number|undefined} bottom Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
- * @property {string|number|undefined} width Can be a css position string (e.g. '320px') number values are treated as `px` values
- * @property {string|number|undefined} height Can be pixel-value string (e.g. '320px') number values are treated as `px` values
+ * @property {string|number|undefined} width Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} height Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} maxHeight Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} maxWidth Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} minHeight Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
+ * @property {string|number|undefined} minWidth Can be a css position string (e.g. '320px' or '50%') number values are treated as `px` values
  */
 
 /**
- * @typedef WindowPosition
- * @property {string} left - absolute to map container
- * @property {string} top - absolute to map container
- * @property {string} right - absolute to map container
- * @property {string} bottom - absolute to map container
- * @property {string} width
- * @property {string} height
+ * @typedef {Object} WindowPosition
+ * @property {string} left - The left CSS property participates in specifying the horizontal position of a window.
+ * @property {string} top - The top CSS property participates in specifying the vertical position of a window.
+ * @property {string} right - The right CSS property participates in specifying the horizontal position of a window.
+ * @property {string} bottom - The bottom CSS property participates in specifying the vertical position of a window.
+ * @property {string} width - The width CSS property sets an element's width.
+ * @property {string} height - The height CSS property sets an element's height.
+ * @property {string} [maxHeight] -  It prevents the used value of the height property from becoming larger than the value specified for max-height. (max is target height, will be automatically updated)
+ * @property {string} [maxWidth] - It prevents the used value of the width property from becoming larger than the value specified by max-width. (max is target width, will be automatically updated)
+ * @property {string} [minHeight] - It prevents the used value of the height property from becoming smaller than the value specified for min-height.
+ * @property {string} [minWidth] - It prevents the used value of the width property from becoming smaller than the value specified for min-width.
  */
 
 /**
  * @readonly
- * @enum {WindowPositionOptions}
- * @property {Position} TOP_LEFT position of the DYNAMIC_LEFT or STATIC Slot
- * @property {Position} TOP_LEFT2 position of the DYNAMIC_LEFT Slot if a STATIC is present
- * @property {Position} TOP_RIGHT position of the DYNAMIC_RIGHT Slot
- * @property {Position} DETACHED default position of DETACHED Windows if no position is given
+ * @enum {WindowPosition}
+ * @property {WindowPosition} TOP_LEFT position of the DYNAMIC_LEFT or STATIC Slot
+ * @property {WindowPosition} TOP_LEFT2 position of the DYNAMIC_LEFT Slot if a STATIC is present
+ * @property {WindowPosition} TOP_RIGHT position of the DYNAMIC_RIGHT Slot
+ * @property {WindowPosition} DETACHED default position of DETACHED Windows if no position is given
  * @private
  */
 export const WindowPositions = {
   TOP_LEFT: {
     left: '0px',
     top: '0px',
+    maxWidth: '320px',
   },
   TOP_LEFT2: {
     left: '320px',
@@ -62,6 +71,7 @@ export const WindowPositions = {
   TOP_RIGHT: {
     right: '0px',
     top: '0px',
+    maxHeight: '70%',
   },
   DETACHED: {
     left: '200px',
@@ -69,15 +79,36 @@ export const WindowPositions = {
   },
 };
 
+/**
+ * Return true, if all values of pos1 match with the corresponding values of pos2
+ * @param {WindowPosition} pos1
+ * @param {WindowPosition} pos2
+ * @returns {boolean}
+ */
+export function compareWindowPositions(pos1, pos2) {
+  return !(Object.keys(pos1).some(key => pos1[key] !== pos2[key]));
+}
+
+/**
+ * Returns true, if the provided position is a slot position
+ * @param {WindowPosition} windowPosition
+ * @returns {boolean}
+ */
+export function isSlotPosition(windowPosition) {
+  return [WindowPositions.TOP_LEFT, WindowPositions.TOP_LEFT2, WindowPositions.TOP_RIGHT]
+    .some(s => compareWindowPositions(s, windowPosition));
+}
+
 /**
  * @typedef WindowComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {import("vue").Component} component Main Component which is shown below the header.
  * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
- * @property {WindowPositionOptions} [position] Will be ignored if WindowSlot !== DETACHED, can be given otherwise or default will be used
  * @property {WindowState} [state]
+ * @property {WindowPositionOptions} [position] Will be ignored if WindowSlot !== DETACHED, can be given otherwise or default will be used
  * @property {WindowSlot} [slot] If WindowSlot is not detached the position will be ignored
  * @property {Object} [props]
+ * @property {Object} [provides]
  */
 
 /**
@@ -85,9 +116,14 @@ export const WindowPositions = {
  * @property {string} id
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
  * @property {boolean} [hideHeader] be used to not show the header.
+ * @property {boolean} [hidePin] be used to not show the pin button.
  * @property {string} [headerTitle]
  * @property {string} [headerIcon]
- * @property {Object<string, string>} styles[styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<VcsAction>} [headerActions]
+ * @property {number} [headerActionsOverflowCount]
+ * @property {string} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {boolean} [dockable] Auto derived from hidePin, current slot, current position and initial position.
+ * @property {Object<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
  * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
  */
 
@@ -96,17 +132,20 @@ export const WindowPositions = {
  * @property {string} id
  * @property {import("vue").Component} component
  * @property {import("vue").Component} [headerComponent]
- * @property {WindowPosition} position
  * @property {WindowState} state
- * @property {Ref<UnwrapRef<WindowSlot>>} slot
+ * @property {WindowPosition} position
+ * @property {WindowPositionOptions} initialPositionOptions
+ * @property {import("vue").Ref<WindowSlot>} slot
+ * @property {WindowSlot} initialSlot
  * @property {Object} props
+ * @property {Object} provides
  */
 
 /**
  * @param {string|number|undefined} pos
  * @returns {string|undefined}
  */
-function parsePosition(pos) {
+export function posToPixel(pos) {
   if (typeof pos === 'number') {
     return `${pos}px`;
   }
@@ -114,17 +153,18 @@ function parsePosition(pos) {
 }
 
 /**
+ * Returns CSS position string properties
  * @param {WindowPositionOptions} windowPositionOptions
  * @param {WindowPosition=} windowPosition
  * @returns {WindowPosition}
  */
 export function windowPositionFromOptions(windowPositionOptions, windowPosition = {}) {
-  let left = parsePosition(windowPositionOptions.left) || 'unset';
-  const right = parsePosition(windowPositionOptions.right) || 'unset';
-  let top = parsePosition(windowPositionOptions.top) || 'unset';
-  const bottom = parsePosition(windowPositionOptions.bottom) || 'unset';
-  let width = parsePosition(windowPositionOptions.width) || 'auto';
-  let height = parsePosition(windowPositionOptions.height) || 'auto';
+  let left = posToPixel(windowPositionOptions.left) || 'unset';
+  const right = posToPixel(windowPositionOptions.right) || 'unset';
+  let top = posToPixel(windowPositionOptions.top) || 'unset';
+  const bottom = posToPixel(windowPositionOptions.bottom) || 'unset';
+  let width = posToPixel(windowPositionOptions.width) || 'auto';
+  let height = posToPixel(windowPositionOptions.height) || 'auto';
   if (left !== 'unset' && right !== 'unset') {
     width = 'auto'; // left + right takes precedence over configured width
   } else if (width === 'auto') {
@@ -147,127 +187,37 @@ export function windowPositionFromOptions(windowPositionOptions, windowPosition
     width,
     height,
   };
-  return Object.assign(windowPosition, result);
-}
-
-/**
- * @enum {number}
- * @property {number} TOP_LEFT
- * @property {number} TOP_RIGHT
- * @property {number} BOTTOM_LEFT
- * @property {number} BOTTOM_RIGHT
- */
-export const WindowAlignment = {
-  TOP_LEFT: 1,
-  TOP_RIGHT: 2,
-  BOTTOM_LEFT: 3,
-  BOTTOM_RIGHT: 4,
-};
-
-/**
- * @returns {HTMLElement|null}
- */
-function getActiveMapElement() {
-  const mapElements = document.getElementsByClassName('mapElement');
-  for (let i = 0; i < mapElements.length; i++) {
-    const element = mapElements.item(i);
-    if (element.style.display !== 'none') {
-      return element;
-    }
+  if (windowPositionOptions.maxWidth) {
+    result.maxWidth = posToPixel(windowPositionOptions.maxWidth);
   }
-  return null;
-}
-
-/**
- * WindowPositionOptions from client position relative to a HTMLElement
- * @param {number} x - client pixel position
- * @param {number} y - client pixel position
- * @param {HTMLElement} [element='mapElement'] - the element. if none is provided, the currently active mapElement will be taken
- * @param {WindowAlignment} [alignment=WindowAlignment.TOP_LEFT]
- * @returns {WindowPositionOptions}
- */
-export function getWindowPositionOptions(x, y, element, alignment = WindowAlignment.TOP_LEFT) {
-  const mapElement = element ?? getActiveMapElement();
-  if (!mapElement) {
-    return { left: x, top: y };
-  }
-
-  const { left, top, width, height } = mapElement.getBoundingClientRect();
-  if (alignment === WindowAlignment.TOP_LEFT) {
-    return { left: x - left, top: y - top };
-  } else if (alignment === WindowAlignment.TOP_RIGHT) {
-    return { right: (left + width) - x, top: y - top };
-  } else if (alignment === WindowAlignment.BOTTOM_LEFT) {
-    return { left: x - left, bottom: (height + top) - y };
+  if (windowPositionOptions.maxHeight) {
+    result.maxHeight = posToPixel(windowPositionOptions.maxHeight);
   }
-  return { right: (left + width) - x, bottom: (height + top) - y };
-}
-
-/**
- * Get window position options based on a pixel in the map
- * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
- * @param {WindowAlignment} [alignment]
- * @returns {WindowPositionOptions}
- */
-export function getWindowPositionOptionsFromMapEvent(windowPosition, alignment) {
-  const mapElement = getActiveMapElement();
-  if (!mapElement) {
-    return { left: windowPosition.x, top: windowPosition.y };
+  if (windowPositionOptions.minHeight) {
+    result.minHeight = posToPixel(windowPositionOptions.minHeight);
   }
-
-  const { left, top } = mapElement.getBoundingClientRect();
-  return getWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, mapElement, alignment);
-}
-
-
-/**
- * Fits a window aligned top left so it fits into the parent. this will change the alignment to be bottom or right depending
- * on if the window would not fit into the parent.
- * @param {number} x - client pixel position
- * @param {number} y - client pixel position
- * @param {number} width - window width to fit
- * @param {number} height - window height to fit
- * @param {HTMLElement} [element='mapElement'] - the element. if none is provided, the currently active mapElement will be taken
- * @returns {WindowPositionOptions}
- */
-export function getFittedWindowPositionOptions(x, y, width, height, element) {
-  const mapElement = element ?? getActiveMapElement();
-  if (!mapElement) {
-    return { left: x, top: y };
+  if (windowPositionOptions.minWidth) {
+    result.minWidth = posToPixel(windowPositionOptions.minWidth);
   }
 
-  const { width: parentWidth, height: parentHeight } = mapElement.getBoundingClientRect();
-  const bottom = y + height > parentHeight;
-  const right = x + width > parentWidth;
-  let alignment = WindowAlignment.TOP_LEFT;
-  if (bottom) {
-    if (right) {
-      alignment = WindowAlignment.BOTTOM_RIGHT;
-    } else {
-      alignment = WindowAlignment.BOTTOM_LEFT;
-    }
-  } else if (right) {
-    alignment = WindowAlignment.TOP_RIGHT;
-  }
-  return getWindowPositionOptions(x, y, mapElement, alignment);
+  return Object.assign(windowPosition, result);
 }
 
 /**
- * Fits a window aligned top left so it fits into currently active map. this will change the alignment to be bottom or right depending
- * on if the window would not fit into active map element.
- * @param {import("@vcmap/cesium").Cartesian2} windowPosition - the window position, as retrieved from an InteractionEvent
- * @param {number} width
- * @param {number} height
- * @returns {WindowPositionOptions}
+ * Sets a position on a component. Updates dockable state.
+ * @param {WindowComponent} windowComponent
+ * @param {WindowComponentOptions} windowPositionOptions
  */
-export function getFittedWindowPositionOptionsFromMapEvent(windowPosition, width, height) {
-  const mapElement = getActiveMapElement();
-  if (!mapElement) {
-    return { left: windowPosition.x, top: windowPosition.y };
+function setWindowPosition(windowComponent, windowPositionOptions) {
+  const windowPosition = windowPositionFromOptions(windowPositionOptions, windowComponent.position);
+  // not one of the default Positions, so we also have to DETACH the windowState.
+  if (!isSlotPosition(windowPosition)) {
+    windowComponent.slot.value = WindowSlot.DETACHED;
   }
-
-  const { left, top } = mapElement.getBoundingClientRect();
-  return getFittedWindowPositionOptions(windowPosition.x + left, windowPosition.y + top, width, height, mapElement);
+  // check dockable state
+  const initialWindowPosition = windowPositionFromOptions(windowComponent.initialPositionOptions);
+  windowComponent.state.dockable = windowComponent.slot.value === WindowSlot.DETACHED &&
+    !compareWindowPositions(windowPosition, initialWindowPosition);
 }
 
 /**
@@ -296,6 +246,11 @@ class WindowManager {
      * @private
      */
     this._windowComponents = new Map();
+    /**
+     * @type {Map<string, WindowPosition>}
+     * @private
+     */
+    this._windowPositionsCache = new Map();
   }
 
   /**
@@ -323,6 +278,7 @@ class WindowManager {
     check(id, String);
     const windowComponent = this._windowComponents.get(id);
     if (windowComponent) {
+      this._cachePosition(windowComponent);
       const index = this.componentIds.indexOf(id);
       this.componentIds.splice(index, 1);
       this._windowComponents.delete(id);
@@ -338,14 +294,7 @@ class WindowManager {
   setWindowPositionOptions(id, windowPositionOptions) {
     const windowComponent = this._windowComponents.get(id);
     if (windowComponent) {
-      const isSlotPosition = windowPositionOptions === WindowPositions.TOP_LEFT ||
-        windowPositionOptions === WindowPositions.TOP_LEFT2 ||
-        windowPositionOptions === WindowPositions.TOP_RIGHT;
-      // not one of the default Positions, so we also have to DETACH the windowState.
-      if (!isSlotPosition) {
-        windowComponent.slot.value = WindowSlot.DETACHED;
-      }
-      windowPositionFromOptions(windowPositionOptions, windowComponent.position);
+      setWindowPosition(windowComponent, windowPositionOptions);
     }
   }
 
@@ -414,10 +363,46 @@ class WindowManager {
     }
   }
 
+  /**
+   * @param {string} id
+   * @returns {WindowPosition|undefined}
+   */
+  getCachedPosition(id) {
+    return this._windowPositionsCache.get(id);
+  }
+
+  /**
+   * Caches the position, if it differs from the initial position
+   * @param {WindowComponent} windowComponent
+   * @private
+   */
+  _cachePosition(windowComponent) {
+    const initialWindowPosition = windowPositionFromOptions(windowComponent.initialPositionOptions);
+    if (!compareWindowPositions(initialWindowPosition, windowComponent.position)) {
+      this._windowPositionsCache.set(windowComponent.id, { ...windowComponent.position });
+    }
+  }
+
+  /**
+   * Returns true, if cached position was assigned.
+   * @param {WindowComponent} windowComponent
+   * @returns {boolean}
+   * @private
+   */
+  _assignCachedPosition(windowComponent) {
+    if (this._windowPositionsCache.has(windowComponent.id)) {
+      const windowPosition = this.getCachedPosition(windowComponent.id);
+      setWindowPosition(windowComponent, windowPosition);
+      this._windowPositionsCache.delete(windowComponent.id);
+      return true;
+    }
+    return false;
+  }
+
   /**
    * adds a windowComponent to the WindowManager and renders the Window at the provided position/slot.
    * The reactive WindowState Object can be used to watch Changes on position/WindowSlot.
-   * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, styles and classes
+   * The WindowState Object can also be used to change hideHeader, headerTitle, headerIcon, headerActions, styles and classes
    * @param {WindowComponentOptions|WindowComponent} windowComponentOptions
    * @param {string|symbol} owner pluginName or vcsAppSymbol
    * @throws {Error} if a windowComponent with the same ID has already been added
@@ -448,15 +433,22 @@ class WindowManager {
       id,
       owner,
       hideHeader: !!windowComponentOptions?.state?.hideHeader,
+      hidePin: !!windowComponentOptions?.state?.hidePin,
       headerTitle: windowComponentOptions?.state?.headerTitle,
       headerIcon: windowComponentOptions?.state?.headerIcon,
+      headerActions: windowComponentOptions?.state?.headerActions,
+      headerActionsOverflow: windowComponentOptions?.state?.headerActionsOverflow,
+      dockable: false,
+      infoUrl: windowComponentOptions?.state?.infoUrl,
       classes,
       styles,
     });
 
     const props = windowComponentOptions.props || {};
+    const provides = windowComponentOptions.provides || {};
 
     const position = reactive(windowPosition);
+    const initialPosition = { ...windowPositionOptions };
     /**
      * @type {WindowComponent}
      */
@@ -476,14 +468,26 @@ class WindowManager {
       get slot() {
         return slotRef;
       },
+      get initialSlot() {
+        return slot;
+      },
       get position() {
         return position;
       },
+      get initialPositionOptions() {
+        return initialPosition;
+      },
       get props() {
         return props;
       },
+      get provides() {
+        return provides;
+      },
     };
-    this._removeWindowAtSlot(slot);
+    const cached = this._assignCachedPosition(windowComponent);
+    if (!cached) {
+      this._removeWindowAtSlot(slot);
+    }
     this._windowComponents.set(id, windowComponent);
     this.componentIds.push(id);
     this._handleSlotsChanged(slot);
@@ -505,6 +509,24 @@ class WindowManager {
     }
   }
 
+  /**
+   * Docks a window by resetting detached to its initial slot.
+   * Updates position according to its initial slot or initial position.
+   * Clears any cached position for this window.
+   * @param {string} id
+   */
+  pinWindow(id) {
+    const component = this.get(id);
+    if (!component?.state?.dockable) {
+      return;
+    }
+    this._removeWindowAtSlot(component.initialSlot);
+    component.slot.value = component.initialSlot;
+    const dockedPosition = this._getPositionOptionsForSlot(component.initialSlot, component.initialPositionOptions);
+    this.setWindowPositionOptions(id, dockedPosition);
+    this._windowPositionsCache.delete(id);
+  }
+
   /**
    * removes all windowComponents of a specific owner (plugin) and fires removed Events
    * @param {string|vcsAppSymbol} owner

package/src/navigation/overviewMap.js

@@ -205,7 +205,7 @@ class OverviewMap {
           clone.activate();
           const idx = this._map.layerCollection.indexOf(clone);
           if (idx < 0) {
-            this._map.layerCollection.add(clone);
+            this._map.layerCollection.add(clone, 0);
           } else {
             this._map.layerCollection.remove(clone);
             this._map.layerCollection.add(clone, idx);
@@ -298,6 +298,7 @@ class OverviewMap {
       this._setupMapInteraction();
     }
     await this._map.activate();
+    this.map.setTarget('overview-map-container');
     if (!this._active) {
       this._mapActivatedListener = this._app.maps.mapActivated.addEventListener(() => {
         this._clearListeners();
@@ -323,7 +324,6 @@ class OverviewMap {
       this._app.windowManager.add(getWindowComponentOptions(), vcsAppSymbol);
     }
     await this._activate();
-    this.map.setTarget('overview-map-container');
   }
 
   /**
@@ -347,9 +347,10 @@ class OverviewMap {
   async _initializePostRenderHandler(map) {
     if (!this._cameraIconLayer) {
       this._setupCameraIconLayer();
+      this._syncCameraViewAndFeature();
     }
     const navRemover = this._addNavigationListener(map);
-    const prRemover = map.postRender.addEventListener(this._addCameraFeature.bind(this));
+    const prRemover = map.postRender.addEventListener(this._syncCameraViewAndFeature.bind(this));
     const cleanupTasks = () => {
       prRemover();
       navRemover();
@@ -513,7 +514,7 @@ class OverviewMap {
    * Adds and maintains the view and camera feature
    * @private
    */
-  _addCameraFeature() {
+  _syncCameraViewAndFeature() {
     const viewpoint = this._app.maps.activeMap?.getViewpointSync();
     if (!viewpoint || !viewpoint.isValid() || viewpoint.equals(this._cachedViewpoint)) {
       return;
@@ -525,8 +526,6 @@ class OverviewMap {
     let { distance } = viewpoint;
     if (position[2] && !(distance && distance < position[2] * 4)) {
       distance = position[2] * 4;
-    } else if (position[2] == null) {
-      position[2] = distance;
     }
 
     distance = distance > this.minimumHeight ? distance : this.minimumHeight;
@@ -551,9 +550,11 @@ class OverviewMap {
     this.cameraIconStyle.image.setRotation(rotationRadians);
 
     viewpoint.heading = 0;
-    viewpoint.cameraPosition = position;
-    viewpoint.groundPosition = null;
-    viewpoint.distance = distance * 4;
+    if (viewpoint.cameraPosition) {
+      viewpoint.cameraPosition = position;
+      viewpoint.groundPosition = null;
+      viewpoint.distance = distance * 4;
+    }
     this._map.gotoViewpoint(viewpoint);
   }
 

package/src/notifier/notifier.js

@@ -0,0 +1,120 @@
+import { ref, shallowRef } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * @typedef {Object} NotificationOptions
+ * @property {string} message
+ * @property {NotificationType} type
+ * @property {string} [title]
+ * @property {number} [timeout=5000]
+ */
+
+/**
+ * @typedef {Object} Notification
+ * @property {string} id
+ * @property {string} message
+ * @property {NotificationType} type
+ * @property {string} [title]
+ * @property {number} timeout
+ * @property {import("vue").Ref<boolean>} open
+ * @property {function():void} close
+ */
+
+/**
+ * @enum {string}
+ */
+export const NotificationType = {
+  ERROR: 'error',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCESS: 'success',
+};
+
+/**
+ * @param {NotificationOptions} options
+ * @param {Notifier} notifier
+ * @returns {Notification}
+ */
+function createNotification(options, notifier) {
+  const {
+    type,
+    title,
+    message,
+    timeout,
+  } = options;
+  const id = uuidv4();
+  const open = ref(true);
+
+  return {
+    get id() { return id; },
+    get type() { return type; },
+    get title() { return title; },
+    get message() { return message; },
+    get timeout() { return timeout ?? 5000; },
+    get open() { return open; },
+    set open(value) {
+      open.value = value?.value ?? value; // when used as a v-model, this is set as a boolean
+      if (!open.value) {
+        this.close();
+      }
+    },
+    close() {
+      open.value = false;
+      setTimeout(() => {
+        notifier.remove(this);
+      }, 100);
+    },
+  };
+}
+
+/**
+ * API for adding snackbar notification to the VcsUiApp. This is simply a container and on its own will not render anything.
+ * Typically, you do not need to instantiate this yourself, but use the notifier on the {@see VcsUiApp}.
+ * @class
+ */
+class Notifier {
+  constructor() {
+    /**
+     * @type {import("vue").Ref<Array<Notification>>}
+     * @private
+     */
+    this._notifications = shallowRef([]);
+  }
+
+  /**
+   * @type {import("vue").Ref<Array<Notification>>}
+   * @readonly
+   */
+  get notifications() {
+    return this._notifications;
+  }
+
+  /**
+   * @param {NotificationOptions} notification
+   * @returns {Notification}
+   */
+  add(notification) {
+    const note = createNotification(notification, this);
+    // use spread since push won't trigger updates
+    this._notifications.value = [...this._notifications.value, note];
+    return note;
+  }
+
+  /**
+   * @param {Notification} notification
+   */
+  remove(notification) {
+    // reassign to trigger update
+    this._notifications.value = this._notifications.value.filter(n => n !== notification);
+  }
+
+  /**
+   * @param {Notification} notification
+   * @returns {boolean}
+   */
+  has(notification) {
+    return this._notifications.value.includes(notification);
+  }
+}
+
+export default Notifier;