@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.23

package/plugins/@vcmap-show-case/table-example/index.js

@@ -0,0 +1,47 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
+import DataTableExample from './DataTableExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function iconsExample() {
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Table Example',
+          title: 'Table Example Plugin',
+        },
+        {
+          id: 'table-example',
+          component: DataTableExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Table Example',
+          },
+          position: {
+            width: 500,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/table-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/table-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/wizard-example/wizardExample.vue

@@ -10,44 +10,67 @@
       v-model.number="step"
     >
       <template #content>
-        <div>
-          This is the content of the first step.
-        </div>
-        <VcsButton
-          @click="increaseStep()"
-          class="my-2"
-        >
-          Next
-        </VcsButton>
+        <!-- px-2 because does not contain input components -->
+        <v-container class="px-2 py-0">
+          <div>
+            This is the content of the first step.
+          </div>
+          <VcsButton
+            @click="increaseStep()"
+            class="my-2"
+          >
+            Next
+          </VcsButton>
+        </v-container>
       </template>
     </VcsWizardStep>
     <VcsWizardStep
-      :rules="[() => false]"
       step="2"
       editable
       :header-actions="actions.second"
       heading="This is the second step"
       v-model.number="step"
+      :rules="[v => !!formValid]"
     >
       <template #help>
+        Allowed options:
         <ol>
-          <li>this</li>
           <li>is</li>
-          <li>the help slot</li>
+          <li>a</li>
+          <li>test</li>
         </ol>
       </template>
       <template #content>
-        <VcsSelect
-          :items="['this', 'is', 'a', 'test']"
-          v-model="selection"
-          label="Select"
-          class="my-2"
-        />
-        <VcsButton
-          @click="decreaseStep()"
-        >
-          Back
-        </VcsButton>
+        <v-container class="px-1 py-0">
+          <v-form ref="form" v-model="formValid" lazy-validation>
+            <VcsSelect
+              :items="['this', 'is', 'a', 'test']"
+              v-model="selection"
+              placeholder="Select"
+              :rules="[v => (!!v && v !== 'this') || 'Please select a valid option.']"
+            />
+            <VcsButton
+              @click="decreaseStep()"
+            >
+              Back
+            </VcsButton>
+          </v-form>
+        </v-container>
+      </template>
+    </VcsWizardStep>
+    <VcsWizardStep
+      step="3"
+      v-model.number="step"
+    >
+      <template #header>
+        <div class="d-flex flex-grow-1 flex-row-reverse">
+          <VcsButton
+            :disabled="!selection || !formValid"
+            @click="finish()"
+          >
+            Finish
+          </VcsButton>
+        </div>
       </template>
     </VcsWizardStep>
   </VcsWizard>
@@ -55,6 +78,7 @@
 
 <script>
   import { VcsWizard, VcsWizardStep, VcsButton, VcsSelect } from '@vcmap/ui';
+  import { VForm, VContainer } from 'vuetify/lib';
   import { ref } from 'vue';
 
   /** Component to showcase the VcsWizard and VcsWizardStep. */
@@ -65,10 +89,14 @@
       VcsWizardStep,
       VcsButton,
       VcsSelect,
+      VForm,
+      VContainer,
     },
     setup() {
       const step = ref(1);
       const selection = ref();
+      const form = ref();
+      const formValid = ref(false);
       const actions = {
         second: [{
           name: 'resetSecondStep',
@@ -85,6 +113,12 @@
         decreaseStep() { step.value -= 1; },
         selection,
         actions,
+        formValid,
+        form,
+        finish() {
+          step.value = 1;
+          form.value.reset();
+        },
       };
     },
   };

package/plugins/package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@vcmap/hello-world": "^1.0.7",
     "@vcmap/print": "^1.0.2",
-    "@vcmap/swipe-tool": "^1.0.3"
+    "@vcmap/swipe-tool": "^1.0.3",
+    "@vcmap/export": "^1.0.1"
   }
 }

package/src/actions/actionHelper.js

@@ -203,29 +203,18 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
   check(owner, [String, vcsAppSymbol]);
 
   const id = uuid();
+  const { position: windowPositionOptions, ...component } = modalComponent;
+  let modalActivator = null;
 
-  const addModal = (zIndex) => {
-    const child = document.getElementById(id);
-    if (!child) {
-      const elem = document.createElement('div');
-      elem.id = id;
-      Object.assign(elem.style, {
-        position: 'absolute',
-        zIndex,
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      });
-      elem.onclick = () => { app.windowManager.remove(id); };
-      document.body.appendChild(elem);
-    }
-  };
-
-  const removeModal = () => {
-    const child = document.getElementById(id);
-    if (child) {
-      child.parentElement.removeChild(child);
+  /**
+   * Closes the modal at mousedown on an app element
+   * Requires mousedown event bubbling on app elements (same behaviour as v-menu).
+   * @param {MouseEvent} e
+   */
+  const handleMouseDown = (e) => {
+    const div = document.getElementById(`window-component--${id}`);
+    if (!div?.contains(e.target) && !modalActivator?.contains(e.target)) {
+      app.windowManager.remove(id);
     }
   };
 
@@ -236,10 +225,11 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
       if (!this.active) {
         this.active = true;
         const { left, top, width } = event.currentTarget.getBoundingClientRect();
-        const position = getWindowPositionOptions(left + width, top, app.maps.target);
+        modalActivator = event.currentTarget;
+        const position = { ...getWindowPositionOptions(left + width, top, app.maps.target), ...windowPositionOptions };
         const state = { ...modalComponent?.state, hideHeader: true };
-        app.windowManager.add({ position, ...modalComponent, id, state }, owner);
-        addModal(app.windowManager.componentIds.length - 2);
+        app.windowManager.add({ position, ...component, id, state }, owner);
+        document.addEventListener('mousedown', handleMouseDown);
       } else {
         this.active = false;
         app.windowManager.remove(id);
@@ -252,10 +242,9 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     app.windowManager.removed.addEventListener(({ id: windowId }) => {
       if (windowId === id) {
         action.active = false;
-        removeModal();
+        document.removeEventListener('mousedown', handleMouseDown);
       }
     }),
-    removeModal,
   ];
 
   const destroy = () => { listeners.forEach((cb) => { cb(); }); };

package/src/actions/styleSelector.vue

@@ -1,6 +1,16 @@
 <template>
-  <v-sheet v-if="items" class="pa-2">
-    <VcsSelect :items="items" v-model="currentStyle" />
+  <v-sheet v-if="items" class="pt-1 pb-0 px-0">
+    <v-list>
+      <v-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        @click.stop="select(item.value)"
+      >
+        <v-list-item-title :class="{ 'primary--text': item.value === currentStyleName }">
+          {{ item.text }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
     <v-list v-if="currentStyleLegend.length > 0">
       <v-list-item
         v-for="(entry, index) in currentStyleLegend"
@@ -21,18 +31,17 @@
 <script>
   import { computed, inject, onUnmounted, ref } from 'vue';
   import {
-    VChip, VList, VListItem, VListItemContent, VListItemIcon, VSheet,
+    VChip, VList, VListItem, VListItemContent, VListItemIcon, VListItemTitle, VSheet,
   } from 'vuetify/lib';
-  import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
 
   export default {
     name: 'StyleSelector',
     components: {
-      VcsSelect,
       VSheet,
       VList,
       VListItem,
       VListItemIcon,
+      VListItemTitle,
       VChip,
       VListItemContent,
     },
@@ -46,8 +55,8 @@
         required: true,
       },
     },
-    setup({ layerName, availableStyles }) {
-      /** @type {VcsApp} */
+    setup({ layerName, availableStyles }, { attrs }) {
+      /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       /** @type {import("@vcmap/core").FeatureLayer} */
       const layer = app.layers.getByKey(layerName);
@@ -68,16 +77,6 @@
         styleChangedListener();
       });
 
-      const currentStyle = computed({
-        get() { return currentStyleName.value; },
-        set(styleName) {
-          const style = styleName === defaultStyle ?
-            layer.defaultStyle :
-            app.styles.getByKey(styleName);
-          layer.setStyle(style);
-        },
-      });
-
       const items = computed(() => {
         return [
           { text: 'Default', value: defaultStyle },
@@ -85,15 +84,23 @@
         ];
       });
 
+      function select(styleName) {
+        const style = styleName === defaultStyle ?
+          layer.defaultStyle :
+          app.styles.getByKey(styleName);
+        layer.setStyle(style);
+        app.windowManager.remove(attrs['window-state'].id);
+      }
+
       return {
-        currentStyle,
+        currentStyleName,
         currentStyleLegend,
         items,
+        select,
       };
     },
   };
 </script>
 
 <style scoped>
-
 </style>

package/src/application/VcsApp.vue

@@ -69,7 +69,7 @@
     getCurrentInstance,
     onMounted,
     onUnmounted,
-    provide,
+    provide, watch,
   } from 'vue';
   import { getVcsAppById } from '@vcmap/core';
   import { VContainer, VFooter } from 'vuetify/lib';
@@ -350,6 +350,7 @@
    * This helper sets up a listener to sync the theming relevant keys from the {@see UiConfigObject}
    * with a given vuetify instance. Use this helper, if you do not use the VcsApp component and wish to evaluate
    * the theming keys. Returns a function to stop syncing.
+   * Also adds a watcher to vuetify theme, which triggers themeChanged event on the VcsUiApp.
    * @param {VcsUiApp} app
    * @param {import("vuetify").Framework} vuetify
    * @returns {function():void} - call to stop syncing
@@ -358,21 +359,28 @@
     const listeners = [
       app.uiConfig.added.addEventListener((item) => {
         if (item.name === 'primaryColor') {
-          vuetify.theme.themes.dark.primary = item.value;
-          vuetify.theme.themes.light.primary = item.value;
+          vuetify.theme.themes.dark.primary = item.value?.dark || item.value;
+          vuetify.theme.themes.light.primary = item.value?.light || item.value;
+          app.themeChanged.raiseEvent();
         }
       }),
       app.uiConfig.removed.addEventListener((item) => {
         if (item.name === 'primaryColor') {
-          vuetify.theme.themes.dark.primary = defaultPrimaryColor;
-          vuetify.theme.themes.light.primary = defaultPrimaryColor;
+          vuetify.theme.themes.dark.primary = defaultPrimaryColor.dark;
+          vuetify.theme.themes.light.primary = defaultPrimaryColor.light;
+          app.themeChanged.raiseEvent();
         }
       }),
     ];
+    const stopWatching = watch(
+      () => vuetify.theme.dark,
+      () => app.themeChanged.raiseEvent(),
+    );
 
     return () => {
       listeners.forEach((cb) => { cb(); });
       listeners.splice(0);
+      stopWatching();
     };
   }
 

package/src/application/VcsAttributions.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-list>
-    <v-list-item v-for="({key, title, attributions}) in entries" :key="key">
+  <v-list class="px-1">
+    <v-list-item v-for="({key, title, attributions}) in entries" :key="key" class="px-1">
       <v-list-item-content>
         <v-list-item-title>{{ $t(title) }}</v-list-item-title>
         <v-list-item-subtitle
@@ -11,7 +11,6 @@
           <a
             :href="attribution.url"
             target="_blank"
-            class="text--secondary"
           >
             {{ $t(attribution.provider) }} {{ attribution.year }}
           </a>

package/src/application/VcsAttributionsFooter.vue

@@ -1,14 +1,13 @@
 <template>
-  <span class="attribution-wrap">
+  <span class="d-inline-block text-truncate mr-10 attribution-wrap">
     <span v-for="attribution in mergedAttributions" class="attribution-span" :key="attribution.provider">
       <a
         :href="attribution.url"
         target="_blank"
-        class="text--secondary"
       >{{ $t(attribution.provider) }} <span>{{ attribution.years }}</span></a>
     </span>
     <VcsButton
-      class="d-flex text--secondary"
+      class="d-flex"
       small
       :key="attributionAction.name"
       :tooltip="attributionAction.title"
@@ -20,18 +19,13 @@
 </template>
 
 <style lang="scss" scoped>
-  .attribution-wrap{
-    white-space: nowrap;
-    margin-right: 40px;
-    overflow: hidden;
-    text-overflow: ellipsis;
 
-    .vcs-button-wrap{
-      position: absolute;
-      right: 4px;
-      bottom: 3px;
-    }
+  .attribution-wrap .vcs-button-wrap {
+    position: absolute;
+    right: 4px;
+    bottom: 3px;
   }
+
   a:before {
     content: '\00a9\00a0';
   }
@@ -40,17 +34,17 @@
     &:before {
       content: '\00a0\007c\00a0';
     }
-    &:first-child::before{
+    &:first-child::before {
       content: '';
     }
-    span{
+    span {
       font-size: inherit;
     }
   }
 
 </style>
 
-<script >
+<script>
 
   import { computed } from 'vue';
   import { mergeAttributions } from './attributionsHelper.js';

package/src/application/VcsNavbar.vue

@@ -4,7 +4,6 @@
     dense
     elevation="0"
     :height="$vuetify.breakpoint.xs ? '56px' : '48px'"
-    :color="'var(--v-basic-base)'"
     :bottom="$vuetify.breakpoint.xs ? 'bottom' : undefined"
     width="100%"
   >
@@ -31,7 +30,7 @@
               />
               <v-divider
                 v-if="contentActions.length > 0 && toolActions.length > 0"
-                class="mx-2"
+                class="mx-2 base lighten-2"
                 vertical
                 inset
               />

package/src/application/VcsSettings.vue

@@ -1,14 +1,21 @@
 <template>
-  <v-container class="pa-2">
+  <v-container class="px-1 py-0">
     <v-row
       no-gutters
       align="center"
     >
       <v-col>
-        <VcsLabel>
-          {{ $t('settings.languageTitle') }}
+        <VcsLabel html-for="settingsLanguageSelect">
+          {{ $t('settings.languageSelector') }}
         </VcsLabel>
       </v-col>
+      <v-col>
+        <VcsSelect
+          id="settingsLanguageSelect"
+          :items="languages"
+          v-model="language"
+        />
+      </v-col>
     </v-row>
     <v-row
       no-gutters
@@ -16,14 +23,18 @@
     >
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
-          {{ $t('settings.languageSelector') }}
+          {{ $t('settings.theme.title') }}
         </VcsLabel>
       </v-col>
       <v-col>
-        <VcsSelect
-          id="settingsLanguageSelect"
-          :items="languages"
-          v-model="language"
+        <VcsRadio
+          dense
+          :items="[
+            { label: 'settings.theme.light', value: false },
+            { label: 'settings.theme.dark', value: true },
+          ]"
+          v-model="$vuetify.theme.dark"
+          row
         />
       </v-col>
     </v-row>
@@ -37,11 +48,13 @@
   import { VCol, VContainer, VRow } from 'vuetify/lib';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
+  import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
 
   export default {
     name: 'VcsSettings',
     components: {
       VcsSelect,
+      VcsRadio,
       VcsLabel,
       VContainer,
       VRow,

package/src/assets/favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="SvgjsSvg1004" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" style="fill: none;"/>
+  <g>
+    <path id="SvgjsPath1003" d="m120.44,41.1l-22.64,22.9-30.07-30.44c-.98-1-2.33-1.56-3.73-1.56h52.71c1.4,0,2.73.56,3.73,1.56,2.04,2.05,2.06,5.4.05,7.48,0,0-.05.06-.05.06Z" style="fill: #86b110; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1002" d="m97.8,64l-30.09,30.44c-2.06,2.08-5.39,2.08-7.45,0-.98-1-1.55-2.36-1.55-3.78v-53.32c0-1.41.56-2.77,1.55-3.78,2.06-2.08,5.39-2.08,7.45,0l30.09,30.44Z" style="fill: #005434; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1001" d="m58.71,37.34v53.32c0,1.41.56,2.77,1.55,3.78L7.54,41.1c-2.04-2.05-2.06-5.4-.05-7.48l.05-.06c1-1,2.33-1.56,3.73-1.56h52.71c-1.4,0-2.73.56-3.73,1.56-.98.99-1.55,2.34-1.55,3.78Z" style="fill: #409d76; isolation: isolate; opacity: .9;"/>
+    <path id="SvgjsPath1000" d="m120.44,94.44c-.98,1-2.33,1.56-3.73,1.56h-52.71c1.4,0,2.73-.56,3.73-1.56l30.09-30.44,22.64,22.9c2.04,2.05,2.06,5.4.05,7.48l-.05.06h-.02Z" style="fill: #00a0ba; isolation: isolate; opacity: .9;"/>
+  </g>
+</svg>

package/src/components/buttons/VcsButton.vue

@@ -52,7 +52,7 @@
         font-size: 12px;
         border: 1px solid transparent;
         &:hover{
-          color: var(--v-accent-lighten5) !important;
+          color: var(--v-base-lighten5) !important;
           border-color: var(--v-primary-base);
           background-color: var(--v-primary-base);
         }
@@ -87,8 +87,7 @@
 
         &.vcs-button--active-background {
           border: 2px solid var(--v-primary-base);
-          color: var(--v-secondary-base);
-          background-color: var(--v-accent-darken1) !important;
+          background-color: var(--v-base-lighten2) !important;
         }
 
         &.v-btn--disabled {