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

package/src/notifier/notifier.js

@@ -0,0 +1,121 @@
+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);
+    this._notifications.value.push(note);
+    return note;
+  }
+
+  /**
+   * @param {Notification} notification
+   */
+  remove(notification) {
+    const index = this._notifications.value.indexOf(notification);
+    if (index > -1) {
+      this._notifications.value.splice(index, 1);
+    }
+  }
+
+  /**
+   * @param {Notification} notification
+   * @returns {boolean}
+   */
+  has(notification) {
+    return this._notifications.value.includes(notification);
+  }
+}
+
+export default Notifier;

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

@@ -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,6 +224,12 @@ class VcsUiApp extends VcsApp {
      */
     this._search = new Search(this);
 
+    /**
+     * @type {Notifier}
+     * @private
+     */
+    this._notifier = new Notifier();
+
     /**
      * @type {AppState}
      * @private
@@ -304,6 +315,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 +352,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',
         },
       },
     },