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

package/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.0",
+    "@vcmap/hello-world": "^1.0.7",
     "@vcmap/print": "^1.0.1"
   }
 }

package/plugins/test/allIconsComponent.vue

@@ -27,14 +27,14 @@
 
   export default {
     name: 'AllIconsComponent',
-    components: [
+    components: {
       VSheet,
       VList,
       VListItem,
       VListItemIcon,
       VIcon,
       VListItemTitle,
-    ],
+    },
     computed: {
       icons() {
         return Object.keys(Icons).map(n => `$${n}`);

package/plugins/test/emptyComponent.vue

@@ -11,6 +11,6 @@
 
   export default {
     name: 'EmptyComponent',
-    components: [VSheet],
+    components: { VSheet },
   };
 </script>

package/plugins/test/index.js

@@ -7,6 +7,7 @@ import { toolboxData } from './toolbox-data.js';
 import editor from './editor.vue';
 import windowManagerExample from './windowManagerExample.vue';
 import AllIconsComponent from './allIconsComponent.vue';
+import TestList from './testList.vue';
 
 let source;
 
@@ -97,11 +98,27 @@ export default async function () {
         app.windowManager,
         '@vcmap/test',
       );
+      const { action: listAction, destroy: destroyList } = createToggleAction(
+        {
+          name: 'TestList',
+        },
+        {
+          id: 'testList',
+          state: {
+            headerTitle: 'Test List',
+          },
+          slot: WindowSlot.DYNAMIC_LEFT,
+          component: TestList,
+        },
+        app.windowManager,
+        '@vcmap/test',
+      );
       this._destroyActions = [
         destroyConfigEditorAction,
         destroyWindowAction,
         destroyIconAction,
         destroryClipboardDialogAction,
+        destroyList,
       ];
       const alertAction = {
         name: 'VC Systems',
@@ -130,6 +147,11 @@ export default async function () {
         '@vcmap/test',
         ButtonLocation.TOOL,
       );
+      app.navbarManager.add(
+        { id: 'list', action: listAction },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
       app.navbarManager.add(
         {
           id: 'createLink',

package/plugins/test/myCustomHeader.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing </span>
+    <div>
+      Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing. </span>
+    </div>
+    <div>And here is '<b>{{ sample }}</b>' passed through</div>
   </div>
 </template>
 
@@ -8,6 +11,11 @@
 
   export default {
     name: 'MyCustomHeader',
+    props: {
+      sample: {
+        type: String,
+      },
+    },
     setup(props, { emit }) {
       return {
         clicked: () => {

package/plugins/test/testList.vue

@@ -0,0 +1,287 @@
+<template>
+  <v-sheet>
+    <v-sheet class="pa-2">
+      <v-switch
+        v-model="selectable"
+        label="Selectable"
+      />
+      <v-switch
+        :disabled="!selectable"
+        v-model="selectSingle"
+        label=" Single Select"
+      />
+      <v-switch
+        v-model="searchable"
+        label="Searchable"
+      />
+      <v-dialog
+        v-model="dialog"
+        width="400"
+      >
+        <template #activator="{ on }">
+          <vcs-button v-on="on">
+            Add An item
+          </vcs-button>
+        </template>
+        <v-card class="pa-2">
+          <v-form
+            @submit.prevent="add"
+          >
+            <vcs-text-field
+              v-model="newItem.name"
+              label="Name"
+              :rules="required"
+            />
+            <vcs-text-field
+              v-model="newItem.title"
+              label="Title"
+              :rules="required"
+            />
+            <v-switch label="visible" v-model="newItem.visible" />
+            <v-switch label="disabled" v-model="newItem.disabled" />
+            <v-switch label="random icon" v-model="newItem.icon" />
+            <v-switch label="console.log action" v-model="newItem.action" />
+            <v-switch label="console.log on clicked" v-model="newItem.clicked" />
+            <v-switch label="console.log selected state" v-model="newItem.selected" />
+            <vcs-button
+              type="submit"
+            >
+              Add
+            </vcs-button>
+          </v-form>
+        </v-card>
+      </v-dialog>
+      <v-divider class="ma-2" />
+      <v-switch
+        v-model="showTitle"
+        label="Show Title"
+      />
+      <vcs-text-field v-model="title" placeholder="Title" />
+      <v-switch
+        v-model="titleActions"
+        label="Title Actions"
+      />
+      <v-switch
+        v-model="titleIcon"
+        label="Title Icon"
+      />
+      <v-divider class="ma-2" />
+      <template v-if="selectable">
+        <vcs-button
+          @click="selected = []"
+        >
+          Clear Selection
+        </vcs-button>
+        <v-switch v-model="showSelection" label="Show Selection" />
+        <ul v-if="showSelection">
+          <li
+            v-for="(i, index) in selected"
+            :key="`item-${index}`"
+          >
+            {{ i.title }}
+          </li>
+        </ul>
+      </template>
+      <v-divider class="ma-2" />
+    </v-sheet>
+
+    <vcs-list
+      :items="items"
+      :selectable="selectable"
+      :single-select="selectSingle"
+      :searchable="searchable"
+      :show-title="showTitle"
+      :icon="titleIconSrc"
+      :actions="titleActionsArray"
+      :title="title"
+      v-model="selected"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { VcsList, VcsButton, VcsTextField, Icons } from '@vcmap/ui';
+  import {
+    VSwitch,
+    VDivider,
+    VSheet,
+    VDialog,
+    VCard,
+    VForm,
+  } from 'vuetify/lib';
+  import { computed, ref } from 'vue';
+
+  function getRandomIcon() {
+    const keys = Object.keys(Icons);
+    const index = Math.floor(keys.length * Math.random());
+    return `$${keys[index]}`;
+  }
+
+  const defaultItems = [
+    {
+      name: 'foo',
+      title: 'Foo',
+      tooltip: 'this is the foo',
+      icon: 'mdi-pen',
+    },
+    {
+      name: 'bar',
+      title: 'Bar',
+      tooltip: 'just a bar',
+      actions: [
+        {
+          name: 'console.log',
+          callback() {
+            console.log('bar action');
+          },
+        },
+      ],
+    },
+    {
+      name: 'bar',
+      title: 'Baz',
+      tooltip: 'special baz',
+    },
+  ];
+
+  export default {
+    name: 'TestList',
+    components: {
+      VcsList,
+      VcsButton,
+      VcsTextField,
+      VSwitch,
+      VDivider,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const selectable = ref(true);
+      const searchable = ref(true);
+      const selectSingle = ref(false);
+      const showSelection = ref(false);
+      const showTitle = ref(true);
+      const title = ref('Title');
+      const titleActionsArray = ref([]);
+      const titleIconSrc = ref(null);
+      const selected = ref([]);
+      const items = ref(defaultItems);
+      const newItem = ref({
+        name: 'foo',
+        title: 'foo',
+        disabled: false,
+        visible: true,
+        icon: false,
+        action: false,
+        clicked: false,
+        selected: false,
+      });
+      const dialog = ref(false);
+
+      return {
+        selectable,
+        searchable,
+        selectSingle,
+        selected,
+        showSelection,
+        showTitle,
+        title,
+        titleActionsArray,
+        titleIconSrc,
+        items,
+        newItem,
+        dialog,
+        required: [
+          v => !!v || 'Input may not be null',
+          v => v.length > 0 || 'Input must have a length',
+        ],
+        add() {
+          const item = {
+            name: newItem.value.name,
+            title: newItem.value.title,
+            disabled: newItem.value.disabled,
+            visible: newItem.value.visible,
+          };
+
+          if (newItem.value.icon) {
+            item.icon = getRandomIcon();
+          }
+
+          if (newItem.value.action) {
+            item.actions = [
+              {
+                name: 'console.log',
+                callback() {
+                  console.log('hi, i\'m: ', item.name);
+                },
+              },
+            ];
+          }
+
+          if (newItem.value.clicked) {
+            item.clicked = () => {
+              console.log(`${item.name} just got clicked`);
+            };
+          }
+
+          if (newItem.value.selected) {
+            item.selectionChanged = (selected) => {
+              if (selected) {
+                console.log(`${item.name} is selected`);
+              } else {
+                console.log(`${item.name} is no longer selected`);
+              }
+            };
+          }
+          items.value.push(item);
+          newItem.value = {
+            name: 'foo',
+            title: 'foo',
+            disabled: false,
+            visible: true,
+            icon: false,
+            action: false,
+            clicked: false,
+            selected: false,
+          };
+          dialog.value = false;
+        },
+        titleActions: computed({
+          get() {
+            return titleActionsArray.value.length > 0;
+          },
+          set(value) {
+            if (value) {
+              titleActionsArray.value = [{
+                name: 'console.log foo',
+                callback() {
+                  console.log('foo');
+                },
+              }];
+            } else {
+              titleActionsArray.value = [];
+            }
+          },
+        }),
+        titleIcon: computed({
+          get() {
+            return !!titleIconSrc.value;
+          },
+          set(value) {
+            if (value) {
+              titleIconSrc.value = getRandomIcon();
+            } else {
+              titleIconSrc.value = null;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/plugins/test/windowManagerExample.vue

@@ -51,6 +51,9 @@
           component: EmptyComponent,
           headerComponent: MyCustomHeader,
           slot: WindowSlot.DYNAMIC_RIGHT,
+          props: {
+            sample: 'A window property',
+          },
         },
         {
           id: 'dynamicRight2',

package/plugins/wizardExample/index.js

@@ -0,0 +1,41 @@
+import { createToggleAction, ButtonLocation, WindowSlot } from '@vcmap/ui';
+import WizardExample from './wizardExample.vue';
+
+export default async () => {
+  return {
+    name: 'wizardExample',
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'wizardExample',
+          icon: '$vcsLegend',
+          title: 'VCS Wizard Example',
+        },
+        {
+          id: 'wizard-example',
+          component: WizardExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'VCS Wizard',
+            headerIcon: '$vcsWand',
+            styles: { width: '350px', height: 'auto' },
+          },
+        },
+        app.windowManager,
+        'wizardExample',
+      );
+      app.navbarManager.add(
+        { id: 'wizard-example', action },
+        'wizardExample',
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+};

package/plugins/wizardExample/wizardExample.vue

@@ -0,0 +1,77 @@
+<template>
+  <VcsWizard
+    v-model="step"
+  >
+    <v-stepper-step
+      step="1"
+      editable
+      :complete="step > 1"
+    >
+      This is the first step
+    </v-stepper-step>
+    <v-stepper-content
+      step="1"
+    >
+      <v-sheet>
+        This is the content of the first step.
+      </v-sheet>
+      <VcsButton
+        @click="increaseStep()"
+        class="my-2"
+      >
+        Next
+      </VcsButton>
+    </v-stepper-content>
+    <v-stepper-step
+      :rules="[() => false]"
+      step="2"
+      editable
+    >
+      This is the second step
+    </v-stepper-step>
+    <v-stepper-content
+      step="2"
+    >
+      <VcsSelect
+        :items="['this', 'is', 'a', 'test']"
+        label="Select"
+        class="my-2"
+      />
+      <VcsButton
+        @click="decreaseStep()"
+      >
+        Back
+      </VcsButton>
+    </v-stepper-content>
+  </VcsWizard>
+</template>
+
+<script>
+  import { VcsWizard, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { VStepperStep, VStepperContent, VSheet } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  export default {
+    name: 'WizardExample',
+    components: {
+      VcsWizard,
+      VStepperStep,
+      VStepperContent,
+      VSheet,
+      VcsButton,
+      VcsSelect,
+    },
+    setup() {
+      const step = ref(1);
+      return {
+        step,
+        increaseStep() { step.value += 1; },
+        decreaseStep() { step.value -= 1; },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/application/VcsApp.vue

@@ -20,6 +20,7 @@
       <MapNavigation />
       <ToolboxManagerComponent />
       <WindowManagerComponent />
+      <NotifierComponent />
     </v-container>
     <v-footer absolute v-if="$vuetify.breakpoint.smAndUp" min-height="22px">
       <VcsAttributionsFooter :entries="attributionEntries" :attribution-action="attributionAction" />
@@ -73,6 +74,7 @@
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
+  import { getLogger } from '@vcsuite/logger';
   import WindowManagerComponent from '../manager/window/WindowManager.vue';
   import ToolboxManagerComponent from '../manager/toolbox/ToolboxManager.vue';
   import { ButtonLocation } from '../manager/navbarManager.js';
@@ -91,6 +93,7 @@
   import VcsButton from '../components/buttons/VcsButton.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
+  import NotifierComponent from '../notifier/notifierComponent.vue';
 
   /**
    * You should call this function in the component providing the vcsUiApp to your
@@ -101,17 +104,23 @@
    * @returns {function():void}
    */
   export function setupPluginMountedListeners(app) {
-    [...app.plugins].forEach((plugin) => {
+    /**
+     * wrapped execution of onVcsAppMounted hook
+     * @param {VcsPlugin} plugin
+     */
+    function onVcsAppMounted(plugin) {
       if (plugin.onVcsAppMounted) {
-        plugin.onVcsAppMounted(app);
+        try {
+          plugin.onVcsAppMounted(app);
+        } catch (e) {
+          getLogger('VcsUiApp').error(`Error in plugin ${plugin.name} onVcsAppMounted hook`, e);
+        }
       }
-    });
+    }
 
-    return app.plugins.added.addEventListener((plugin) => {
-      if (plugin.onVcsAppMounted) {
-        plugin.onVcsAppMounted(app);
-      }
-    });
+    [...app.plugins].forEach(onVcsAppMounted);
+
+    return app.plugins.added.addEventListener(onVcsAppMounted);
   }
 
   /**
@@ -405,6 +414,7 @@
       ToolboxManagerComponent,
       VContainer,
       VFooter,
+      NotifierComponent,
     },
     props: {
       appId: {

package/src/components/form-inputs-controls/VcsFormSection.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="vcs-form-section">
-    <slot name="title">
+    <slot name="header">
       <article class="pa-2 accent">
         <div class="form-section-header d-flex justify-space-between align-center">
-          <strong class="caption">{{ $t(title) }}</strong>
+          <strong class="caption">{{ $t(heading) }}</strong>
           <VcsActionButtonList
             :actions="actions"
             small
@@ -37,13 +37,13 @@
   /**
    * @description
    * Stylized form section with action buttons
-   * @vue-data {slot} [#title] - slot to override form section header
+   * @vue-data {slot} [#header] - slot to override form section header
    * @vue-data {slot} [#default] - slot with the section content
    * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
-   * @vue-prop {string} title - Title to be displayed, will be translated.
-   * @vue-prop {Array<VcsAction>}    titleActions - Icons to be displayed on the right side
+   * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
+   * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
-   * @vue-computed {Array<VcsAction>} actions - Returns title actions extended by a help action, if help prop is passed or help slot is used.
+   * @vue-computed {Array<VcsAction>} actions - Returns header actions extended by a help action, if help prop is passed or help slot is used.
    */
   export default {
     name: 'VcsFormSection',
@@ -52,11 +52,11 @@
       VAlert,
     },
     props: {
-      title: {
+      heading: {
         type: String,
         default: undefined,
       },
-      titleActions: {
+      headerActions: {
         type: Array,
         default: () => ([]),
       },
@@ -78,9 +78,9 @@
        */
       const actions = computed(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
-          return [helpAction, ...props.titleActions];
+          return [helpAction, ...props.headerActions];
         }
-        return props.titleActions;
+        return props.headerActions;
       });
 
       return {