npm - @vcmap/ui - Versions diffs - 5.0.0-rc.15 → 5.0.0-rc.16 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/config/base.config.json +4 -0
package/config/dev.config.json +5 -1
package/config/www.config.json +5 -3
package/dist/assets/{cesium.2e288a.js → cesium.430460.js} +0 -0
package/dist/assets/cesium.js +1 -1
package/dist/assets/{core.8014d3.js → core.5089ba.js} +5925 -4374
package/dist/assets/core.js +1 -1
package/dist/assets/{index.3f74fa92.js → index.854f8e2b.js} +1 -1
package/dist/assets/{ol.31c3a5.js → ol.9be53a.js} +0 -0
package/dist/assets/ol.js +1 -1
package/dist/assets/ui.49010a.css +1 -0
package/dist/assets/{ui.36f84f.js → ui.49010a.js} +3907 -3232
package/dist/assets/ui.js +1 -1
package/dist/assets/{vue.a39c10.js → vue.247c1c.js} +0 -0
package/dist/assets/vue.js +2 -2
package/dist/assets/{vuetify.378637.css → vuetify.735e58.css} +1 -1
package/dist/assets/{vuetify.378637.js → vuetify.735e58.js} +1 -1
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -1
package/index.html +77 -0
package/index.js +4 -0
package/package.json +4 -2
package/plugins/@vcmap/create-link/fallbackCreateLink.vue +4 -1
package/plugins/@vcmap/create-link/index.js +4 -1
package/plugins/@vcmap/pluginExample/exampleActions.js +45 -0
package/plugins/@vcmap/pluginExample/index.js +24 -1
package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue +70 -42
package/plugins/@vcmap/search-nominatim/nominatim.js +1 -1
package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue +4 -2
package/plugins/notifier/index.js +31 -0
package/plugins/notifier/notifierTester.vue +88 -0
package/plugins/package.json +1 -1
package/plugins/test/allIconsComponent.vue +2 -2
package/plugins/test/emptyComponent.vue +1 -1
package/plugins/test/index.js +22 -0
package/plugins/test/myCustomHeader.vue +9 -1
package/plugins/test/testList.vue +287 -0
package/plugins/test/windowManagerExample.vue +3 -0
package/plugins/wizardExample/index.js +41 -0
package/plugins/wizardExample/wizardExample.vue +77 -0
package/src/application/VcsApp.vue +18 -8
package/src/components/form-inputs-controls/VcsFormSection.vue +10 -10
package/src/components/form-inputs-controls/VcsSelect.vue +33 -1
package/src/components/form-inputs-controls/VcsTextField.vue +11 -3
package/src/components/form-inputs-controls/VcsWizard.vue +133 -0
package/src/components/imageElementInjector.vue +22 -0
package/src/components/lists/VcsList.vue +466 -0
package/src/components/lists/VcsTreeview.vue +1 -2
package/src/components/lists/VcsTreeviewLeaf.vue +18 -50
package/src/components/lists/VcsTreeviewSearchbar.vue +1 -23
package/src/components/tables/VcsTable.vue +13 -1
package/src/contentTree/LayerTree.vue +1 -1
package/src/contentTree/contentTreeItem.js +13 -13
package/src/contentTree/subContentTreeItem.js +1 -1
package/src/contentTree/vcsObjectContentTreeItem.js +1 -1
package/src/featureInfo/BalloonComponent.vue +10 -8
package/src/featureInfo/balloonFeatureInfoView.js +14 -14
package/src/featureInfo/balloonHelper.js +4 -0
package/src/featureInfo/featureInfo.js +13 -0
package/src/featureInfo/featureInfoInteraction.js +1 -1
package/src/i18n/de.js +7 -0
package/src/i18n/en.js +7 -0
package/src/icons/+all.js +4 -0
package/src/icons/WandIcon.vue +63 -0
package/src/manager/window/WindowComponent.vue +9 -2
package/src/manager/window/WindowComponentHeader.vue +33 -7
package/src/manager/window/WindowManager.vue +1 -0
package/src/manager/window/windowManager.js +11 -1
package/src/navigation/overviewMap.js +10 -9
package/src/notifier/notifier.js +121 -0
package/src/notifier/notifierComponent.vue +84 -0
package/src/styles/variables.scss +19 -3
package/src/vcsUiApp.js +19 -1
package/src/vuePlugins/vuetify.js +2 -0
package/dist/assets/ui.36f84f.css +0 -1

package/dist/assets/{vuetify.378637.js → vuetify.735e58.js} RENAMED Viewed

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.378637.css');import v from "./vue.a39c10.js";
+} await loadCss('./assets/vuetify.735e58.css');import v from "./vue.247c1c.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.378637.js";
-import { default as f } from "./vuetify.378637.js";
+export * from "./vuetify.735e58.js";
+import { default as f } from "./vuetify.735e58.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <script type="module" crossorigin src="./assets/index.3f74fa92.js"></script>
+    <script type="module" crossorigin src="./assets/index.854f8e2b.js"></script>
   </head>
   <body style="height: 100vH;">
     <noscript>

package/index.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html class="vcs-ui" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  </head>
+  <body style="height: 100vH;">
+    <noscript>
+      <strong>...</strong>
+    </noscript>
+    <div id="app">
+      <div id="loading-wrapper">
+        <div id="loading-text">LOADING</div>
+        <div id="loading-content"></div>
+      </div>
+    </div>
+    <style>
+      #loading-wrapper {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+      #loading-text {
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: #409d76;
+        width: 100px;
+        height: 30px;
+        margin: -7px 0 0 -45px;
+        text-align: center;
+        font-family: 'PT Sans Narrow', sans-serif;
+        font-size: 20px;
+      }
+      #loading-content {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        width: 170px;
+        height: 170px;
+        margin: -85px 0 0 -85px;
+      }
+      #loading-content {
+        border: 3px solid transparent;
+        border-top-color: #409d76;
+        border-bottom-color: #409d76;
+        border-radius: 50%;
+        -webkit-animation: loader 2s linear infinite;
+        -moz-animation: loader 2s linear infinite;
+        -o-animation: loader 2s linear infinite;
+        animation: loader 2s linear infinite;
+      }
+      @keyframes loader {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <script type="module" src="./start.js"></script>
+  </body>
+</html>

package/index.js CHANGED Viewed

@@ -13,6 +13,7 @@ export {
 } from './src/actions/actionHelper.js';
 export {
   createStateRefAction,
+  StateActionState,
 } from './src/actions/stateRefAction.js';
 export { default as VcsNavbar } from './src/application/VcsNavbar.vue';
@@ -102,6 +103,7 @@ export {
 } from './src/pluginHelper.js';
 export { getStateFromURL, createEmptyState, setStateToUrl } from './src/state.js';
 export { default as VcsUiApp } from './src/vcsUiApp.js';
+export { default as Notifier, NotificationType } from './src/notifier/notifier.js';
 export { default as Icons } from './src/icons/+all.js';
 export { default as VcsButton } from './src/components/buttons/VcsButton.vue';
@@ -123,11 +125,13 @@ export { default as VcsFormSection } from './src/components/form-inputs-controls
 export { default as VcsSelect } from './src/components/form-inputs-controls/VcsSelect.vue';
 export { default as VcsTextField } from './src/components/form-inputs-controls/VcsTextField.vue';
 export { default as VcsTextArea } from './src/components/form-inputs-controls/VcsTextArea.vue';
+export { default as VcsWizard } from './src/components/form-inputs-controls/VcsWizard.vue';
 export { default as VcsFormattedNumber } from './src/components/form-output/VcsFormattedNumber.vue';
 export { default as VcsActionList, validateAction, validateActions } from './src/components/lists/VcsActionList.vue';
 // export { default as VcsEndlessList } from './src/components/lists/VcsEndlessList.vue';
+export { default as VcsList } from './src/components/lists/VcsList.vue';
 export { default as VcsTreeview } from './src/components/lists/VcsTreeview.vue';
 export { default as VcsTreeviewLeaf } from './src/components/lists/VcsTreeviewLeaf.vue';
 // export { default as VcsTreeviewSearchbar } from './src/components/lists/VcsTreeviewSearchbar.vue';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.0.0-rc.15",
+  "version": "5.0.0-rc.16",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -22,6 +22,7 @@
   "files": [
     "index.js",
     "start.js",
+    "index.html",
     "map.config.json",
     "dist/",
     "src/",
@@ -42,7 +43,7 @@
   },
   "peerDependencies": {
     "@vcmap/cesium": "~1.97.1",
-    "@vcmap/core": "~5.0.0-rc.23",
+    "@vcmap/core": "~5.0.0-rc.24",
     "ol": "~7.1.0",
     "vue": "~2.7.3",
     "vuetify": "~2.6.7"
@@ -51,6 +52,7 @@
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
     "@vcsuite/eslint-config": "^2.1.1",
     "@vitest/coverage-c8": "^0.24.3",
+    "@vue/test-utils": "^1.3.3",
     "eslint": "^8.9.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "jest-canvas-mock": "^2.4.0",

package/plugins/@vcmap/create-link/fallbackCreateLink.vue CHANGED Viewed

@@ -24,7 +24,8 @@
 </template>
 <script>
-  import { VcsTextField, VcsButton, setStateToUrl } from '@vcmap/ui';
+  import { VSheet } from 'vuetify/lib';
+  import { VcsTextField, VcsButton, setStateToUrl, NotificationType } from '@vcmap/ui';
   import { getCurrentInstance, inject, ref } from 'vue';
   export default {
@@ -38,6 +39,7 @@
     components: {
       VcsTextField,
       VcsButton,
+      VSheet,
     },
     setup(props) {
       const localLink = ref(props.link);
@@ -48,6 +50,7 @@
         const element = proxy.$el.querySelector('input');
         element.select();
         document.execCommand('copy');
+        app.notifier.add({ title: 'createLink.title', message: 'createLink.copied', type: NotificationType.SUCCESS });
       };
       const refresh = async () => {

package/plugins/@vcmap/create-link/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ButtonLocation, setStateToUrl, WindowSlot } from '@vcmap/ui';
+import { ButtonLocation, NotificationType, setStateToUrl, WindowSlot } from '@vcmap/ui';
 import FallbackCreateLink from './fallbackCreateLink.vue';
 const name = '@vcmap/create-link';
@@ -34,6 +34,7 @@ export default function createLink() {
           tooltip: 'Dialog zum kopieren des Applikationslinks anzeigen.',
           copyToClipboard: 'Applikationslink in Zwischenablage kopieren',
           refreshTooltip: 'Applikationslink aktualisieren',
+          copied: 'Applikationslink in Zwischenablage kopiert.'
         },
       },
       en: {
@@ -43,6 +44,7 @@ export default function createLink() {
           tooltip: 'Open dialog to copy application link to clipboard',
           copyToClipboard: 'Copy application link to clipboard',
           refreshTooltip: 'Refresh application link',
+          copied: 'Application link copied to clipboard.',
         },
       },
     },
@@ -69,6 +71,7 @@ export default function createLink() {
               setStateToUrl(state, url);
               if (navigator.clipboard) {
                 await navigator.clipboard.writeText(url.toString());
+                app.notifier.add({ title: 'createLink.title', message: 'createLink.copied', type: NotificationType.SUCCESS });
               } else {
                 createFallbackWindow(app, url.toString());
               }

package/plugins/@vcmap/pluginExample/exampleActions.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { reactive, ref } from 'vue';
+export default function createExampleActions() {
+  const dense = ref(false);
+  const showSection = ref(true);
+  const actions = [
+    reactive({
+      name: 'denseSelection',
+      title: 'change row height',
+      icon: dense.value ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical',
+      callback() {
+        dense.value = !dense.value;
+        this.icon = dense.value ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical';
+      },
+    }),
+    { name: 'noIcon', title: 'another action without icon', callback: () => {} },
+    reactive({
+      name: 'toggleSection',
+      title: 'toggle section',
+      icon: showSection.value ? '$vcsMinus' : '$vcsPlus',
+      callback() {
+        showSection.value = !showSection.value;
+        this.icon = showSection.value ? '$vcsMinus' : '$vcsPlus';
+      },
+    }),
+    reactive({
+      name: 'toggleIcon',
+      title: 'toggle switch example',
+      icon: showSection.value ? 'mdi-toggle-switch' : 'mdi-toggle-switch-off',
+      active: showSection.value,
+      callback() {
+        showSection.value = !showSection.value;
+        this.active = showSection.value;
+      },
+    }),
+    {
+      name: 'alert',
+      icon: 'mdi-message-text',
+      callback() { alert('alert'); },
+    },
+  ];
+  return { actions, dense, showSection };
+}

package/plugins/@vcmap/pluginExample/index.js CHANGED Viewed

@@ -7,6 +7,7 @@ import packageJSON from './package.json';
 import defaultConfig from './config.json';
 import { conditionalTest, isValidEmail, isValidText } from './validation.js';
 import pluginExampleComponent from './pluginExampleComponent.vue';
+import createExampleActions from './exampleActions.js';
 /**
  * @returns {Logger}
@@ -25,6 +26,7 @@ function getLogger() {
 /**
  * @typedef PluginExampleState
  * @property {string} selected
+ * @property {Array<string>} selectedMultiple
  * @property {string} conditionalInput
  * @property {string} initialTextInput
  * @property {number} numberInput
@@ -74,11 +76,14 @@ export default function (config) {
    */
   const pluginState = reactive({
     selected: pluginConfig.selectOptions.value[0],
+    selectedMultiple: [],
     conditionalInput: '',
     initialTextInput: pluginConfig.initialTextInput.value,
     numberInput: 100.156,
     checkboxInput: false,
     email: '',
+    prependedInput: '',
+    files: [],
   });
@@ -148,6 +153,8 @@ export default function (config) {
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
+      const { actions, showSection, dense } = createExampleActions();
       const { action, destroy } = createToggleAction(
         {
           name: 'Plugin Example',
@@ -159,8 +166,14 @@ export default function (config) {
           component: pluginExampleComponent,
           slot: WindowSlot.DYNAMIC_LEFT,
           state: {
-            headerTitle: 'pluginExample.select',
+            headerTitle: 'pluginExample.title',
             headerIcon: '$vcsCircle',
+            headerActions: actions,
+          },
+          props: {
+            actions,
+            showSection,
+            dense,
           },
         },
         app.windowManager,
@@ -194,6 +207,11 @@ export default function (config) {
           help2desc: 'InitialTextInput bleibt solange im Lade-Status, bis sich der Wert \'myInitialText\' ändert.',
           help3: 'Geben Sie eine Email Adresse ein',
           help3desc: 'Email Adressen werden validiert.',
+          numbers: {
+            one: 'eins',
+            two: 'zwei',
+            three: 'drei',
+          },
         },
       },
       en: {
@@ -208,6 +226,11 @@ export default function (config) {
           help2desc: 'InitialTextInput text field stays in loading state, as long as \'myInitialText\' is not changed.',
           help3: 'Enter an email address.',
           help3desc: 'Emails get validated.',
+          numbers: {
+            one: 'one',
+            two: 'two',
+            three: 'three',
+          },
         },
       },
     },

package/plugins/@vcmap/pluginExample/pluginExampleComponent.vue CHANGED Viewed

@@ -1,30 +1,8 @@
 <template>
   <v-form v-model="isValid">
     <VcsFormSection
-      title="VcsFormSection Select & Text Inputs"
-      :title-actions="[
-        {
-          name: 'denseSelection',
-          title: 'change row height',
-          icon: dense ? 'mdi-arrow-split-horizontal' : 'mdi-arrow-collapse-vertical',
-          callback: () => this.dense = !this.dense
-        },
-        { name: 'noIcon', title: 'another action without icon', callback: () => {} },
-        {
-          name: 'toggleSection',
-          title: 'toggle section',
-          icon: showSection ? '$vcsMinus' : '$vcsPlus',
-          callback: () => this.showSection = !this.showSection
-        },
-        {
-          name: 'toggleIcon',
-          title: 'toggle switch example',
-          icon: showSection ? 'mdi-toggle-switch' : 'mdi-toggle-switch-off',
-          active: showSection,
-          callback: () => this.showSection = !this.showSection
-        },
-        { name: 'alert', icon: 'mdi-message-text', callback: alertAction },
-      ]"
+      heading="VcsFormSection Select & Text Inputs"
+      :header-actions="actions"
     >
       <template #help>
         <ol>
@@ -131,11 +109,50 @@
               />
             </v-col>
           </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="prependedInput" :dense="dense">
+                String With Icon
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="prependedInput"
+                :dense="dense"
+                prepend-icon="mdi-map-marker"
+                v-model="state.prependedInput"
+              />
+            </v-col>
+          </v-row>
+          <v-row
+            :dense="dense"
+            no-gutters
+            align="center"
+          >
+            <v-col>
+              <VcsLabel html-for="fileInput" :dense="dense">
+                Email
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField
+                id="fileInput"
+                :dense="dense"
+                type="file"
+                multiple
+                v-model="state.files"
+              />
+            </v-col>
+          </v-row>
         </v-container>
       </template>
     </VcsFormSection>
     <VcsFormSection
-      title="VcsFormSection Number Inputs"
+      heading="VcsFormSection Number Inputs"
       help-text="pluginExample.help"
     >
       <template #default>
@@ -236,7 +253,7 @@
       </template>
     </VcsFormSection>
     <VcsFormSection
-      title="VcsFormSection Radio & Checkbox"
+      heading="VcsFormSection Radio & Checkbox"
     >
       <template #default>
         <v-container>
@@ -286,34 +303,42 @@
       </template>
     </vcsformsection>
     <VcsFormSection
-      title="VcsFormSection Mixed Inputs"
+      heading="VcsFormSection Mixed Inputs"
     >
       <template #default>
         <v-container>
           <v-row
             :dense="dense"
-            no-gutters
             align="center"
           >
-            <v-col cols="1" class="px-1">
+            <v-col cols="1">
               <VcsLabel html-for="textInput" :dense="dense" class="text-caption">
                 1
               </VcsLabel>
             </v-col>
-            <v-col>
+            <v-col cols="3">
               <VcsSelect
-                :items="['A', 'B', 'C']"
+                :items="[
+                  {value: 'one', i18n: 'pluginExample.numbers.one'},
+                  {value: 'two', i18n: 'pluginExample.numbers.two'},
+                  {value: 'three', i18n: 'pluginExample.numbers.three'}]"
+                :item-text="item => item.i18n"
                 :dense="dense"
               />
             </v-col>
-            <v-col>
+            <v-col cols="3">
               <VcsSelect
-                :items="['A', 'B', 'C']"
+                :items="[
+                  {value: 'Anna', fullName: 'Annabella'},
+                  {value: 'Bella', fullName: 'Belladonna'},
+                  {value: 'Claudi', fullName: 'Claudine'}]"
+                :item-text="item => item.fullName"
                 :dense="dense"
                 multiple
+                v-model="state.selectedMultiple"
               />
             </v-col>
-            <v-col>
+            <v-col cols="5">
               <VcsTextField
                 id="textInput"
                 clearable
@@ -374,9 +399,17 @@
       VContainer,
     },
     props: {
-      windowId: {
-        type: String,
-        default: '',
+      actions: {
+        type: Array,
+        required: true,
+      },
+      dense: {
+        type: Object,
+        required: true,
+      },
+      showSection: {
+        type: Object,
+        required: true,
       },
     },
     setup() {
@@ -386,8 +419,6 @@
       watch(plugin.state, () => { newUpdate.value = true; });
       return {
-        showSection: ref(true),
-        dense: ref(true),
         // no object-destruction of reactive objects! or use toRef()
         state: plugin.state,
         // do not put the whole config here, since it would become reactive
@@ -403,9 +434,6 @@
           console.log(plugin.getSerializedState());
           newUpdate.value = false;
         },
-        alertAction() {
-          alert('alert');
-        },
       };
     },
   };

package/plugins/@vcmap/search-nominatim/nominatim.js CHANGED Viewed

@@ -14,7 +14,7 @@ function createResultItem(item) {
   feature[featureInfoViewSymbol] = new AddressBalloonFeatureInfoView({
     type: 'AddressBalloonFeatureInfoView',
     name: 'NominatimSearchBalloon',
-    subtitle: '',
+    balloonSubtitle: '',
     addressName: 'building',
     street: 'road',
     number: 'house_number',

package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue CHANGED Viewed

@@ -76,11 +76,12 @@
     VAvatar,
     VIcon,
     VDivider,
+    VSwitch,
   } from 'vuetify/lib';
   export default {
     name: 'ThemeChanger',
-    components: [
+    components: {
       VCard,
       VCardText,
       VChip,
@@ -91,7 +92,8 @@
       VAvatar,
       VIcon,
       VDivider,
-    ],
+      VSwitch,
+    },
     setup() {
       const app = inject('vcsApp');
       const plugin = app.plugins.getByKey('@vcmap/theme-changer');

package/plugins/notifier/index.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import component from './notifierTester.vue';
+export default function createNotifierPlugin() {
+  return {
+    name: 'notifier',
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Notifier',
+        },
+        {
+          id: 'notifier-editor',
+          state: {
+            headerTitle: 'Notifier Editor',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        'notifier',
+      );
+      vcsApp.navbarManager.add(
+        { id: 'notifier', action },
+        'notifier',
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/notifier/notifierTester.vue ADDED Viewed

@@ -0,0 +1,88 @@
+<template>
+  <v-sheet>
+    <v-text-field
+      v-model="message"
+      label="Message"
+    />
+    <v-text-field
+      v-model.number=timeout
+      label="Timeout"
+    />
+    <VcsCheckbox
+      v-model="hasTimeout"
+      label="Toggle Timeout"
+    />
+    <v-list>
+      <v-list-item
+        v-for="type in types"
+        :key="type"
+      >
+        {{ type }}
+        <v-list-item-action @click="notify(type)">
+          <v-icon>mdi-plus</v-icon>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <v-card>
+      Current number of notifications: {{ notifications.length }}
+    </v-card>
+  </v-sheet>
+</template>
+<script>
+  import { VSheet, VList, VListItem, VListItemAction, VTextField, VIcon, VCard, VDivider } from 'vuetify/lib';
+  import { NotificationType, VcsCheckbox } from '@vcmap/ui';
+  import { computed, inject, ref } from 'vue';
+  export default {
+    name: 'NotifierTester',
+    components: {
+      VSheet,
+      VList,
+      VListItem,
+      VListItemAction,
+      VTextField,
+      VIcon,
+      VCard,
+      VDivider,
+      VcsCheckbox,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const message = ref('Message');
+      const timeout = ref(5000);
+      return {
+        types: NotificationType,
+        message,
+        notify(type) {
+          app.notifier.add({
+            type,
+            message: message.value,
+            timeout: timeout.value,
+          });
+        },
+        notifications: app.notifier.notifications,
+        timeout,
+        hasTimeout: computed({
+          get() {
+            return timeout.value === -1;
+          },
+          set(value) {
+            if (value && timeout.value !== -1) {
+              timeout.value = -1;
+            } else if (timeout.value === -1) {
+              timeout.value = 5000;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+<style scoped>
+</style>