@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

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

@@ -7,9 +7,15 @@ import WizardExample from './wizardExample.vue';
  */
 export default async () => {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {

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

@@ -1,7 +1,5 @@
 <template>
-  <VcsWizard
-    v-model.number="step"
-  >
+  <VcsWizard v-model.number="step">
     <VcsWizardStep
       step="1"
       :complete="step > 1"
@@ -12,15 +10,10 @@
       <template #content>
         <!-- 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"
-          >
+          <div>This is the content of the first step.</div>
+          <VcsFormButton @click="increaseStep()" class="my-2">
             Next
-          </VcsButton>
+          </VcsFormButton>
         </v-container>
       </template>
     </VcsWizardStep>
@@ -30,7 +23,7 @@
       :header-actions="actions.second"
       heading="This is the second step"
       v-model.number="step"
-      :rules="[v => !!formValid]"
+      :rules="[(v) => !!formValid]"
     >
       <template #help>
         Allowed options:
@@ -47,29 +40,25 @@
               :items="['this', 'is', 'a', 'test']"
               v-model="selection"
               placeholder="Select"
-              :rules="[v => (!!v && v !== 'this') || 'Please select a valid option.']"
+              :rules="[
+                (v) => (!!v && v !== 'this') || 'Please select a valid option.',
+              ]"
             />
-            <VcsButton
-              @click="decreaseStep()"
-            >
-              Back
-            </VcsButton>
+            <VcsFormButton @click="decreaseStep()"> Back </VcsFormButton>
           </v-form>
         </v-container>
       </template>
     </VcsWizardStep>
-    <VcsWizardStep
-      step="3"
-      v-model.number="step"
-    >
+    <VcsWizardStep step="3" v-model.number="step">
       <template #header>
         <div class="d-flex flex-grow-1 flex-row-reverse">
-          <VcsButton
+          <VcsFormButton
             :disabled="!selection || !formValid"
             @click="finish()"
+            variant="filled"
           >
             Finish
-          </VcsButton>
+          </VcsFormButton>
         </div>
       </template>
     </VcsWizardStep>
@@ -77,7 +66,12 @@
 </template>
 
 <script>
-  import { VcsWizard, VcsWizardStep, VcsButton, VcsSelect } from '@vcmap/ui';
+  import {
+    VcsWizard,
+    VcsWizardStep,
+    VcsFormButton,
+    VcsSelect,
+  } from '@vcmap/ui';
   import { VForm, VContainer } from 'vuetify/lib';
   import { ref } from 'vue';
 
@@ -87,7 +81,7 @@
     components: {
       VcsWizard,
       VcsWizardStep,
-      VcsButton,
+      VcsFormButton,
       VcsSelect,
       VForm,
       VContainer,
@@ -98,19 +92,25 @@
       const form = ref();
       const formValid = ref(false);
       const actions = {
-        second: [{
-          name: 'resetSecondStep',
-          title: 'Reset step',
-          icon: '$vcsReturn',
-          callback() {
-            selection.value = undefined;
+        second: [
+          {
+            name: 'resetSecondStep',
+            title: 'Reset step',
+            icon: '$vcsReturn',
+            callback() {
+              selection.value = undefined;
+            },
           },
-        }],
+        ],
       };
       return {
         step,
-        increaseStep() { step.value += 1; },
-        decreaseStep() { step.value -= 1; },
+        increaseStep() {
+          step.value += 1;
+        },
+        decreaseStep() {
+          step.value -= 1;
+        },
         selection,
         actions,
         formValid,
@@ -124,6 +124,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/actions/actionHelper.js

@@ -1,7 +1,11 @@
 import { v4 as uuid } from 'uuid';
 import { check } from '@vcsuite/check';
 import {
-  Collection, Extent, MapCollection, mercatorProjection, Viewpoint,
+  Collection,
+  Extent,
+  MapCollection,
+  mercatorProjection,
+  Viewpoint,
 } from '@vcmap/core';
 import { Feature } from 'ol';
 import { reactive, ref } from 'vue';
@@ -55,7 +59,12 @@ export function createMapButtonAction(actionOptions, mapName, maps) {
  * @param {string|symbol} owner
  * @returns {{action: VcsAction, destroy: Function}}
  */
-export function createToggleAction(actionOptions, windowComponent, windowManager, owner) {
+export function createToggleAction(
+  actionOptions,
+  windowComponent,
+  windowManager,
+  owner,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -90,7 +99,11 @@ export function createToggleAction(actionOptions, windowComponent, windowManager
     }),
   ];
 
-  const destroy = () => { listeners.forEach((cb) => { cb(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
@@ -140,7 +153,9 @@ export function createSearchButtonAction(app) {
   ];
   const destroy = () => {
     destroyAction();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
 
   return { searchAction, destroy };
@@ -153,7 +168,11 @@ export function createSearchButtonAction(app) {
  * @param {WindowManager}  windowManager
  * @returns {(function(): void)|*}
  */
-export function createOverviewMapAction(overviewMap, windowComponent, windowManager) {
+export function createOverviewMapAction(
+  overviewMap,
+  windowComponent,
+  windowManager,
+) {
   const { action, destroy } = createToggleAction(
     {
       name: 'overviewMapToggle',
@@ -180,7 +199,9 @@ export function createOverviewMapAction(overviewMap, windowComponent, windowMana
 
   const destroyAction = () => {
     destroy();
-    listeners.forEach((cb) => { cb(); });
+    listeners.forEach((cb) => {
+      cb();
+    });
   };
   return { action, destroy: destroyAction };
 }
@@ -203,29 +224,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);
     }
   };
 
@@ -235,11 +245,16 @@ export function createModalAction(actionOptions, modalComponent, app, owner) {
     callback(event) {
       if (!this.active) {
         this.active = true;
-        const { left, top, width } = event.currentTarget.getBoundingClientRect();
-        const position = getWindowPositionOptions(left + width, top, app.maps.target);
+        const { left, top, width } =
+          event.currentTarget.getBoundingClientRect();
+        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,13 +267,16 @@ 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(); }); };
+  const destroy = () => {
+    listeners.forEach((cb) => {
+      cb();
+    });
+  };
   return { action, destroy };
 }
 
@@ -294,7 +312,12 @@ export function createLinkAction(actionOptions, url) {
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction}
  */
-export function createGoToViewpointAction(actionOptions, viewpoint, viewpointCollection, mapCollection) {
+export function createGoToViewpointAction(
+  actionOptions,
+  viewpoint,
+  viewpointCollection,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],
@@ -343,7 +366,11 @@ export function getViewpointFromFeature(feature) {
  * @param {import("@vcmap/core").MapCollection} mapCollection
  * @returns {VcsAction|null} returns null if the feature does not have a geometry with a valid extent
  */
-export function createZoomToFeatureAction(actionOptions, feature, mapCollection) {
+export function createZoomToFeatureAction(
+  actionOptions,
+  feature,
+  mapCollection,
+) {
   check(actionOptions, {
     name: String,
     icon: [undefined, String],

package/src/actions/styleSelector.vue

@@ -1,6 +1,18 @@
 <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 +33,23 @@
 <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,11 +63,11 @@
         required: true,
       },
     },
-    setup({ layerName, availableStyles }) {
-      /** @type {VcsApp} */
+    setup(props, { attrs }) {
+      /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       /** @type {import("@vcmap/core").FeatureLayer} */
-      const layer = app.layers.getByKey(layerName);
+      const layer = app.layers.getByKey(props.layerName);
       const currentStyleName = ref(layer.style.name);
       const currentStyleLegend = ref([]);
       const defaultStyle = layer.defaultStyle.name;
@@ -63,37 +80,36 @@
       }
       setStyle(layer.style);
       // TODO error handling if layer is missing or not a feature layer
-      const styleChangedListener = layer.styleChanged.addEventListener(setStyle);
+      const styleChangedListener =
+        layer.styleChanged.addEventListener(setStyle);
       onUnmounted(() => {
         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 },
-          ...availableStyles.map(s => ({ text: s, value: s })),
+          ...props.availableStyles.map((s) => ({ text: s, value: s })),
         ];
       });
 
+      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>
+<style scoped></style>