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

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -2,15 +2,16 @@
   <div
     v-if="group.action"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
-    style="width:fit-content"
+    style="width: fit-content"
   >
     <VcsButton
       :key="group.action.tools[group.action.currentIndex].name"
       :tooltip="group.action.tools[group.action.currentIndex].title"
       :icon="group.action.tools[group.action.currentIndex].icon"
       :active="group.action.active"
+      :disabled="group.action.disabled"
       @click.stop="group.action.callback($event)"
-      v-bind="{...$attrs}"
+      v-bind="{ ...$attrs }"
       class="vcs-toolbox-action-selected"
       :min-width="32"
       :width="32"
@@ -26,6 +27,7 @@
       <template #activator="{ on, attrs }">
         <VcsButton
           :tooltip="group.action.title"
+          :disabled="group.action.disabled"
           v-bind="attrs"
           v-on="on"
           class="vcs-toolbox-action-select"
@@ -33,7 +35,7 @@
           :width="16"
           large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+          <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
         </VcsButton>
       </template>
 
@@ -50,8 +52,9 @@
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
               :icon="item.icon"
+              :disabled="item.disabled"
               @click="group.action.selected(index)"
-              v-bind="{...$attrs}"
+              v-bind="{ ...$attrs }"
               large
             />
           </div>
@@ -61,45 +64,40 @@
   </div>
 </template>
 <style lang="scss">
-@import '../../styles/shades.scss';
+  @import '../../styles/shades.scss';
 
-.vcs-toolbox-action-selected > .v-btn.vcs-button--large {
-  max-width: 40px;
-}
+  .vcs-toolbox-action-selected > .v-btn.vcs-button--large {
+    max-width: 40px;
+  }
 
-.vcs-toolbox-action-select > .v-btn.vcs-button--large {
-  max-width: 8px;
-}
+  .vcs-toolbox-action-select > .v-btn.vcs-button--large {
+    max-width: 8px;
+  }
 
-.vcs-toolbox-action-select-button--active {
-  //border: 2px solid var(--v-shades-base);
-  border-radius: 4px;
-}
-.theme--light .vcs-toolbox-action-select-button--active {
-  background: map-get($shades, 'white');
-}
-.theme--dark .vcs-toolbox-action-select-button--active {
-  background: map-get($shades, 'black');
-}
+  .vcs-toolbox-action-select-button--active {
+    //border: 2px solid var(--v-shades-base);
+    border-radius: 4px;
+  }
+  .theme--light .vcs-toolbox-action-select-button--active {
+    background: map-get($shades, 'white');
+  }
+  .theme--dark .vcs-toolbox-action-select-button--active {
+    background: map-get($shades, 'black');
+  }
 
-.vcs-toolbox-2 {
-  .v-toolbar__content {
-    padding: 0;
+  .vcs-toolbox-2 {
+    .v-toolbar__content {
+      padding: 0;
+    }
   }
-}
 
-.marginToTop {
-  margin-top: 3px;
-}
+  .marginToTop {
+    margin-top: 3px;
+  }
 </style>
 <script>
   import { ref, computed } from 'vue';
-  import {
-    VMenu,
-    VIcon,
-    VToolbar,
-    VToolbarItems,
-  } from 'vuetify/lib';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
   import VcsButton from '../../components/buttons/VcsButton.vue';
 
   /**
@@ -134,7 +132,10 @@
       const nudgeLeft = computed(() => {
         const toolboxBtnWidth = 42 + 8; // with padding
         const menuBtnWidth = 16;
-        return (props.group.action.tools.length * (toolboxBtnWidth / 2)) + (menuBtnWidth / 2);
+        return (
+          props.group.action.tools.length * (toolboxBtnWidth / 2) +
+          menuBtnWidth / 2
+        );
       });
 
       return {

package/src/manager/toolbox/ToolboxManager.vue

@@ -1,6 +1,8 @@
 <template>
   <v-toolbar
-    v-if="toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp"
+    v-if="
+      toolboxOpen && orderedGroups.length > 0 && $vuetify.breakpoint.mdAndUp
+    "
     class="vcs-toolbox toolbar__secondary mx-auto v-sheet marginToTop"
     :class="{ 'rounded-b': !open }"
     :height="40"
@@ -16,12 +18,12 @@
         <ToolboxActionGroup
           v-if="group.type === ToolboxType.GROUP"
           :group="group"
-          @toggle="(groupOpen) => open = groupOpen"
+          @toggle="(groupOpen) => (open = groupOpen)"
         />
         <ToolboxActionSelect
           v-else-if="group.type === ToolboxType.SELECT"
           :group="group"
-          @toggle="(selectOpen) => open = selectOpen"
+          @toggle="(selectOpen) => (open = selectOpen)"
         />
         <VcsButton
           v-else
@@ -29,8 +31,9 @@
           :icon="group.action.icon"
           :active="group.action.active"
           :background="group.action.background"
+          :disabled="group.action.disabled"
           @click.stop="group.action.callback($event)"
-          v-bind="{...$attrs}"
+          v-bind="{ ...$attrs }"
           large
         />
       </div>
@@ -56,10 +59,9 @@
     margin-top: 2px;
   }
 
-  .v-toolbar__items > div{
+  .v-toolbar__items > div {
     gap: 8px;
     width: fit-content;
-    display: inline-block;
   }
 </style>
 
@@ -107,7 +109,9 @@
 
       const toolboxComponentIds = ref(app.toolboxManager.componentIds);
       const groups = computed(() => {
-        return toolboxComponentIds.value.map(id => app.toolboxManager.get(id));
+        return toolboxComponentIds.value.map((id) =>
+          app.toolboxManager.get(id),
+        );
       });
 
       /**
@@ -119,11 +123,15 @@
        * @returns {boolean}
        */
       function filterFunc(c) {
-        return c.type === ToolboxType.SINGLE ||
+        return (
+          c.type === ToolboxType.SINGLE ||
           c?.action?.tools?.length > 1 ||
-          c.buttonManager?.componentIds?.length > 0;
+          c.buttonManager?.componentIds?.length > 0
+        );
       }
-      const orderedGroups = computed(() => getComponentsByOrder(groups.value).filter(filterFunc));
+      const orderedGroups = computed(() =>
+        getComponentsByOrder(groups.value).filter(filterFunc),
+      );
 
       const toolboxOpen = ref(true);
       const toolboxToggleAction = {

package/src/manager/toolbox/toolboxManager.js

@@ -39,6 +39,7 @@ export const ToolboxType = {
  * @typedef {ToolboxComponentOptions} GroupToolboxComponentOptions
  * @property {string} icon - Group icon
  * @property {string} [title] - Optional group title, for dropdown
+ * @property {boolean} [disabled=false]
  */
 
 /**
@@ -58,6 +59,7 @@ export const ToolboxType = {
  * @property {string|undefined} icon
  * @property {string|undefined} title
  * @property {ButtonManager} buttonManager
+ * @property {boolean} [disabled=false]
  */
 
 /**
@@ -77,6 +79,7 @@ export const ToolboxType = {
  * @property {string} name
  * @property {string} [title]
  * @property {string} icon
+ * @property {boolean} [disabled=false]
  */
 
 /**
@@ -143,9 +146,12 @@ export function sortByOwner(compA, compB, order = []) {
  * @param {function(ownerA:string, ownerB:string, order: string[]):number} [compareFn=sortByOwner] Per default components are sorted by owner: app first, then plugins
  * @returns {Array<ToolboxComponent|ButtonComponent>}
  */
-export function getComponentsByOrder(components, order = [], compareFn = sortByOwner) {
-  return [...components]
-    .sort((a, b) => compareFn(a, b, order));
+export function getComponentsByOrder(
+  components,
+  order = [],
+  compareFn = sortByOwner,
+) {
+  return [...components].sort((a, b) => compareFn(a, b, order));
 }
 
 /**
@@ -155,7 +161,9 @@ export function getComponentsByOrder(components, order = [], compareFn = sortByO
  * @param {Array<ToolboxComponentOptions>} groups
  */
 export function setupDefaultGroups(toolboxManager, groups = defaultGroups) {
-  groups.forEach(toolboxComponentOptions => toolboxManager.add(toolboxComponentOptions, vcsAppSymbol));
+  groups.forEach((toolboxComponentOptions) =>
+    toolboxManager.add(toolboxComponentOptions, vcsAppSymbol),
+  );
 }
 
 /**
@@ -234,7 +242,9 @@ class ToolboxManager {
     check(owner, [String, vcsAppSymbol]);
 
     if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
-      throw new Error(`A toolGroup with id ${toolboxComponentOptions.id} has already been registered.`);
+      throw new Error(
+        `A toolGroup with id ${toolboxComponentOptions.id} has already been registered.`,
+      );
     }
     const id = toolboxComponentOptions.id || uuidv4();
     const { type } = toolboxComponentOptions;
@@ -270,11 +280,15 @@ class ToolboxManager {
         ...ActionPattern,
         selected: Function,
         currentIndex: Number,
-        tools: [{
-          name: String,
-          title: [undefined, String],
-          icon: String,
-        }],
+        disabled: [undefined, Boolean],
+        tools: [
+          {
+            name: String,
+            title: [undefined, String],
+            icon: String,
+            disabled: [undefined, Boolean],
+          },
+        ],
       });
       /**
        * @type {SelectToolboxComponent}
@@ -288,13 +302,15 @@ class ToolboxManager {
     } else {
       check(toolboxComponentOptions.icon, String);
       checkMaybe(toolboxComponentOptions.title, String);
-      const { icon, title = undefined } = toolboxComponentOptions;
+      checkMaybe(toolboxComponentOptions.disabled, Boolean);
+      const { icon, title = undefined, disabled } = toolboxComponentOptions;
       const buttonManager = new ButtonManager();
       /**
        * @type {GroupToolboxComponent}
        */
       toolboxComponent = {
         ...toolboxComponent,
+        disabled,
         get icon() {
           return icon;
         },
@@ -335,7 +351,9 @@ class ToolboxManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**

package/src/manager/window/WindowComponent.vue

@@ -2,13 +2,13 @@
   <v-sheet
     :id="`window-component--${windowState.id}`"
     class="elevation-3 position-absolute d-flex flex-column"
-    @click="clicked"
+    v-on="{ ...$listeners }"
     @dragstart="dragStart"
     @dragend="dragEnd"
     :draggable="isDraggable"
     :class="{
-      'rounded': !isDocked,
-      'marginToTop': isDocked,
+      rounded: !isDocked,
+      marginToTop: isDocked,
       'rounded-br': isDynamicLeft,
       'rounded-bl': isDynamicRight,
     }"
@@ -24,9 +24,12 @@
     >
       <slot name="headerComponent" :props="$attrs" />
     </div>
-    <v-divider />
+    <v-divider v-if="!windowState.hideHeader" />
     <div
       class="overflow-x-hidden mb-1"
+      :class="{
+        rounded: !isDocked,
+      }"
     >
       <slot />
     </div>
@@ -34,17 +37,13 @@
 </template>
 
 <style scoped>
-
- .marginToTop {
-   margin-top: 2px;
- }
-
+  .marginToTop {
+    margin-top: 2px;
+  }
 </style>
 
 <script>
-  import {
-    computed, inject, provide, ref,
-  } from 'vue';
+  import { computed, inject, provide, ref } from 'vue';
   import { VDivider, VSheet } from 'vuetify/lib';
   import { WindowSlot } from './windowManager.js';
 
@@ -53,7 +52,8 @@
    * @vue-prop {WindowState} windowState
    * @vue-prop {boolean} isOnTop - Whether the component is focused
    * @vue-prop {Object} slotWindow - slot ref of the window
-   * @vue-event {PointerEvent} clicked - raised when the component is clicked
+   * @vue-event {PointerEvent} click - raised when the component is clicked
+   * @vue-event {MouseEvent} mousedown - raised when the component is mousedown
    * @vue-event {{dx: number, dy: number}} move - raised when the component is moved (dragged)
    * @vue-data {slot} [#default] - slot with the window content
    * @vue-data {slot} [#headerComponent] - slot to override the default header
@@ -82,33 +82,30 @@
     setup(props, { emit }) {
       const app = inject('vcsApp');
       const { provides } = app.windowManager.get(props.windowState.id);
-      Object.entries(provides)
-        .forEach(([key, value]) => {
-          provide(key, value);
-        });
+      Object.entries(provides).forEach(([key, value]) => {
+        provide(key, value);
+      });
 
       const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
       const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
       const isDockedLeft = computed(() => {
-        return props.slotWindow === WindowSlot.STATIC || props.slotWindow === WindowSlot.DYNAMIC_LEFT;
+        return (
+          props.slotWindow === WindowSlot.STATIC ||
+          props.slotWindow === WindowSlot.DYNAMIC_LEFT
+        );
       });
-      const isDockedRight = computed(() => props.slotWindow === WindowSlot.DYNAMIC_RIGHT);
+      const isDockedRight = computed(
+        () => props.slotWindow === WindowSlot.DYNAMIC_RIGHT,
+      );
       const isDraggable = ref(false);
-      /**
-       * @param {PointerEvent} e
-       */
-      const clicked = (e) => {
-        emit('click', e);
-      };
       /**
        * Sets window as draggable on mousedown on header.
        * Stops bubbling of header action buttons.
        * @param {MouseEvent} e
        */
       const mousedown = (e) => {
+        emit('mousedown', e);
         if (e.target.closest('button')) {
-          e.preventDefault();
-          e.stopPropagation();
           return;
         }
         isDraggable.value = isDynamic.value;
@@ -128,9 +125,6 @@
         startEvent = e;
         // set mouse cursor to move
         e.dataTransfer.effectAllowed = 'move';
-        const preventDefaultDragover = dragOverEvent => dragOverEvent.preventDefault();
-        e.target.parentElement.ondragover = preventDefaultDragover;
-        app.maps.target.ondragover = preventDefaultDragover;
       };
       /**
        * @param {DragEvent} endEvent
@@ -153,7 +147,6 @@
         isDynamicLeft: isDockedLeft,
         isDynamicRight: isDockedRight,
         isDraggable,
-        clicked,
         dragStart,
         dragEnd,
         mousedown,
@@ -161,4 +154,3 @@
     },
   };
 </script>
-

package/src/manager/window/WindowComponentHeader.vue

@@ -1,19 +1,23 @@
 <template>
-  <span class="d-flex justify-space-between align-center window-component-header">
-    <span>
+  <div
+    class="d-flex justify-space-between align-center window-component-header"
+  >
+    <h3 class="d-flex align-center">
       <v-icon
         v-if="windowState.headerIcon"
-        class="mr-2"
+        class="mr-1"
         :class="{ 'primary--text': isOnTop }"
-        v-text="windowState.headerIcon"
-      />
-      <h3
+        size="16"
+      >
+        {{ windowState.headerIcon }}
+      </v-icon>
+      <span
         class="d-inline-block user-select-none font-weight-bold"
         :class="{ 'text--primary': isOnTop }"
       >
         {{ $t(windowState.headerTitle) }}
-      </h3>
-    </span>
+      </span>
+    </h3>
     <div class="d-flex justify-space-between align-center">
       <template v-if="windowState.headerActions?.length > 0">
         <VcsActionButtonList
@@ -21,11 +25,7 @@
           :overflow-count="windowState.headerActionsOverflow ?? 3"
           small
         />
-        <v-divider
-          vertical
-          inset
-          class="mx-1"
-        />
+        <v-divider vertical inset class="mx-1" />
       </template>
       <VcsButton
         v-if="windowState.infoUrl"
@@ -33,7 +33,7 @@
         small
         :icon="infoAction.icon"
         :tooltip="infoAction.title"
-        class="px-1"
+        class="px-1 d-flex"
       />
       <VcsButton
         v-if="isDockable"
@@ -41,26 +41,30 @@
         small
         icon="mdi-pin"
         tooltip="components.pin"
-        class="px-1"
+        class="px-1 d-flex"
       />
       <VcsButton
         @click.stop="close"
         small
         icon="mdi-close-thick"
         tooltip="components.close"
+        class="d-flex"
       />
     </div>
-  </span>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.window-component-header{
-  max-height: 16px;
+  .window-component-header {
+    max-height: 16px;
 
-  .v-divider--vertical.v-divider--inset {
-    margin-top: 2px;
+    h3 {
+      line-height: 16px;
+    }
+    .v-divider--vertical.v-divider--inset {
+      margin-top: 2px;
+    }
   }
-}
 </style>
 
 <script>
@@ -106,13 +110,20 @@
       const close = () => {
         emit('close');
       };
-      const isDockable = computed(() => !props.windowState.hidePin && props.windowState.dockable);
+      const isDockable = computed(
+        () => !props.windowState.hidePin && props.windowState.dockable,
+      );
 
-      const infoAction = props.windowState.infoUrl ? createLinkAction({
-        name: 'info',
-        title: 'content.infoAction.title',
-        icon: '$vcsInfo',
-      }, props.windowState.infoUrl) : {};
+      const infoAction = props.windowState.infoUrl
+        ? createLinkAction(
+            {
+              name: 'info',
+              title: 'content.infoAction.title',
+              icon: '$vcsInfo',
+            },
+            props.windowState.infoUrl,
+          )
+        : {};
 
       return {
         pin,
@@ -123,4 +134,3 @@
     },
   };
 </script>
-