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

package/src/notifier/notifierComponent.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <v-snackbar
+      dark
+      v-for="(notification) in notifications"
+      :key="notification.id"
+      v-model="notification.open"
+      :timeout="notification.timeout"
+    >
+      <v-icon
+        :color="notification.type"
+      >
+        {{ icon[notification.type] }}
+      </v-icon>
+      <span class="snack-title">{{ $t(notification.title || defaultTitle[notification.type]) }}</span>
+      <template #action="{ attrs }">
+        <VcsButton
+          icon="mdi-close"
+          small
+          v-bind="attrs"
+          @click="notification.open = false"
+        />
+      </template>
+      <span>{{ $t(notification.message) }}</span>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+  import { VSnackbar, VIcon } from 'vuetify/lib';
+  import { inject } from 'vue';
+  import VcsButton from '../components/buttons/VcsButton.vue';
+  import { NotificationType } from './notifier.js';
+
+  export default {
+    components: {
+      VSnackbar,
+      VcsButton,
+      VIcon,
+    },
+    name: 'NotifierComponent',
+    setup() {
+      const app = inject('vcsApp');
+
+      return {
+        notifications: app.notifier.notifications,
+        icon: {
+          [NotificationType.ERROR]: 'mdi-alert-box',
+          [NotificationType.WARNING]: 'mdi-alert',
+          [NotificationType.INFO]: 'mdi-information',
+          [NotificationType.SUCCESS]: 'mdi-check-circle',
+        },
+        defaultTitle: {
+          [NotificationType.ERROR]: 'notification.error',
+          [NotificationType.WARNING]: 'notification.warning',
+          [NotificationType.INFO]: 'notification.information',
+          [NotificationType.SUCCESS]: 'notification.success',
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.v-snack{
+  ::v-deep{
+    .v-snack__content{
+      display: grid;
+      gap: 8px 4px;
+      grid-template-columns: 20px auto;
+      .v-icon{
+        grid-row-start: 1;
+        grid-row-end: 3;
+        align-self: start;
+        font-size: 17px;
+      }
+    }
+    .v-snack__action{
+      align-self: flex-start;
+      margin-top: 4px;
+    }
+  }
+}
+</style>

package/src/styles/variables.scss

@@ -47,7 +47,6 @@ $icon-size: 20px; // 24px !default;
 $icon-size-dense: 16px; // 20px !default;
 
 /** VcsSelect **/
-
 $select-dense-selections-margin: 4px 4px 3px 0; // 5px 4px 3px 0 !default;
 
 // list box
@@ -61,10 +60,10 @@ $list-item-min-height: 32px; // 48px !default;
 $list-dense-min-height: 24px; // 40px !default;
 $list-item-content-padding: 4px 0; // 12px 0 !default;
 $list-dense-content-padding: 0 0; // 8px 0 !default;
-$list-item-action-icon-margin: 0 0; //32px !default;
+$list-item-action-icon-margin: 0; //32px !default;
 $list-item-action-margin: 0 0; // 12px 0 !default;
 $list-item-icon-margin: auto 0; // 16px 0 !default;
-
+$list-item-content-children-margin-bottom: 0; // 2px !default;
 
 /** Treeview **/
 $treeview-node-level-width: 16px;
@@ -79,3 +78,20 @@ $expansion-panel-content-padding: 0 0 4px; // 0 24px 16px !default;
 
 /** Footer **/
 $footer-padding: 0 8px; // 6px 16px !default;
+
+/** Wizard **/
+$stepper-vertical-padding-bottom: 16px; // 36px !default;
+$stepper-vertical-step-padding: 12px 8px;
+$stepper-vertical-content-ltr-margin: -14px 0 -14px 13px; // -8px -36px -16px 36px !default;
+$stepper-vertical-content-ltr-padding: 16px 8px 16px 16px; // 16px 23px 16px 60px !default;
+$stepper-vertical-step-step-margin: 8px;
+$stepper-step-step-min-width: 12px;
+$stepper-step-step-width: 12px;
+$stepper-step-step-height: 12px;
+
+/** Snackbar **/
+$snackbar-bottom: 36px;
+$snackbar-background-color: rgba(0, 0, 0, 0.8);
+$snackbar-content-padding: 8px;
+$snackbar-action-margin: 8px;
+$snackbar-wrapper-min-height: 36px;

package/src/vcsUiApp.js

@@ -8,7 +8,7 @@ import {
   defaultDynamicContextId,
   ObliqueMap,
   Viewpoint,
-  volatileContextId,
+  volatileContextId, VcsEvent,
 } from '@vcmap/core';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import {
@@ -31,6 +31,7 @@ import UiConfig from './uiConfig.js';
 import { createEmptyState, getStateFromURL } from './state.js';
 import { version } from '../package.json';
 import Search from './search/search.js';
+import Notifier from './notifier/notifier.js';
 
 /**
  * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
@@ -135,7 +136,11 @@ class VcsUiApp extends VcsApp {
           if (this._cachedAppState.contextIds.includes(plugin[contextIdSymbol])) {
             state = this._cachedAppState.plugins.find(s => s.name === plugin.name);
           }
-          plugin.initialize(this, state?.state);
+          try {
+            plugin.initialize(this, state?.state);
+          } catch (e) {
+            getLogger().error(`Error in plugin ${plugin.name} initialize hook`, e);
+          }
         }
       }),
       this._plugins.removed.addEventListener(async (plugin) => {
@@ -219,11 +224,23 @@ class VcsUiApp extends VcsApp {
      */
     this._search = new Search(this);
 
+    /**
+     * @type {Notifier}
+     * @private
+     */
+    this._notifier = new Notifier();
+
     /**
      * @type {AppState}
      * @private
      */
     this._cachedAppState = getStateFromURL(new URL(window.location.href));
+    /**
+     * An event triggered when the VcsApp was mounted and a target was set for the maps.
+     * Provides the id of the target html element.
+     * @type {import("@vcmap/core").VcsEvent<string>}
+     */
+    this.mounted = new VcsEvent();
   }
 
   /**
@@ -304,6 +321,12 @@ class VcsUiApp extends VcsApp {
    */
   get uiConfig() { return this._uiConfig; }
 
+  /**
+   * @type {Notifier}
+   * @readonly
+   */
+  get notifier() { return this._notifier; }
+
   /**
    * Get the state of the application. When passed the forUrl flag, only a minimal set of states shall be provided for a sharable link to the current state (to ensure
    * the maximum URL length is not exceeded). This includes: layer active state & styling, active map, active viewpoint,
@@ -335,6 +358,7 @@ class VcsUiApp extends VcsApp {
           active: l.active || l.loading,
         };
         if (
+          l.style &&
           l.style.name !== l.defaultStyle.name &&
           this.styles.has(l.style) &&
           l.style[contextIdSymbol] !== defaultDynamicContextId &&

package/src/vuePlugins/vuetify.js

@@ -46,6 +46,8 @@ export function createVuetify() {
           accent: '#757575',
           warning: '#FFCE00',
           error: '#FF5252',
+          info: '#2196F3',
+          success: '#4CAF50',
         },
       },
     },