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

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -8,19 +8,19 @@
       z-index="0"
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
-          class="vcs-toolbox-toogle-button"
+        <VcsToolButton
+          class="vcs-toolbox-toggle-button"
           width="48"
           :icon="group.icon"
+          :disabled="group.disabled"
           :tooltip="group.title"
           :active="open || hasActiveAction"
           :color="hasActiveAction ? 'primary' : ''"
           v-bind="attrs"
           v-on="on"
-          large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
-        </VcsButton>
+          <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+        </VcsToolButton>
       </template>
 
       <v-toolbar
@@ -32,15 +32,15 @@
       >
         <v-toolbar-items class="w-full">
           <div class="d-flex align-center justify-space-between w-full mx-1">
-            <VcsButton
-              v-for="({id, action}) in orderedButtons"
+            <VcsToolButton
+              v-for="{ id, action } in orderedButtons"
               :key="id"
               :tooltip="action.title"
               :icon="action.icon"
+              :disabled="action.disabled"
               :active="action.active"
               @click="action.callback($event)"
-              v-bind="{...$attrs}"
-              large
+              v-bind="{ ...$attrs }"
             />
           </div>
         </v-toolbar-items>
@@ -49,25 +49,20 @@
   </div>
 </template>
 <style lang="scss">
-.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 { computed, ref } from 'vue';
-  import {
-    VMenu,
-    VIcon,
-    VToolbar,
-    VToolbarItems,
-  } from 'vuetify/lib';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { getComponentsByOrder } from './toolboxManager.js';
 
   /**
@@ -84,7 +79,7 @@
   export default {
     name: 'ToolboxActionGroup',
     components: {
-      VcsButton,
+      VcsToolButton,
       VMenu,
       VIcon,
       VToolbar,
@@ -102,10 +97,14 @@
       const buttons = computed(() => {
         const { buttonManager } = props.group;
         const buttonIds = ref(buttonManager.componentIds);
-        return buttonIds.value.map(id => buttonManager.get(id));
+        return buttonIds.value.map((id) => buttonManager.get(id));
       });
-      const orderedButtons = computed(() => getComponentsByOrder(buttons.value));
-      const hasActiveAction = computed(() => orderedButtons.value.some(a => a.action.active));
+      const orderedButtons = computed(() =>
+        getComponentsByOrder(buttons.value),
+      );
+      const hasActiveAction = computed(() =>
+        orderedButtons.value.some((a) => a.action.active),
+      );
 
       /**
        * v-menu auto prop is not working as expected.
@@ -115,7 +114,7 @@
       const nudgeLeft = computed(() => {
         const toolboxBtnWidth = 42 + 8; // with padding
         const menuBtnWidth = 48;
-        return (buttons.value.length * (toolboxBtnWidth / 2)) - (menuBtnWidth / 2);
+        return buttons.value.length * (toolboxBtnWidth / 2) - menuBtnWidth / 2;
       });
 
       return {

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -2,19 +2,19 @@
   <div
     v-if="group.action"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
-    style="width:fit-content"
+    style="width: fit-content"
   >
-    <VcsButton
+    <VcsToolButton
       :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"
-      large
     />
     <v-menu
       v-model="open"
@@ -24,17 +24,17 @@
       z-index="0"
     >
       <template #activator="{ on, attrs }">
-        <VcsButton
+        <VcsToolButton
           :tooltip="group.action.title"
+          :disabled="group.action.disabled"
           v-bind="attrs"
           v-on="on"
           class="vcs-toolbox-action-select"
           :min-width="16"
           :width="16"
-          large
         >
-          <v-icon v-text="open ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
-        </VcsButton>
+          <v-icon>{{ open ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+        </VcsToolButton>
       </template>
 
       <v-toolbar
@@ -45,14 +45,14 @@
       >
         <v-toolbar-items class="w-full">
           <div class="d-flex align-center justify-space-between w-full mx-1">
-            <VcsButton
+            <VcsToolButton
               v-for="(item, index) in group.action.tools"
               :key="`${item.name}-${index}`"
               :tooltip="item.title"
               :icon="item.icon"
+              :disabled="item.disabled"
               @click="group.action.selected(index)"
-              v-bind="{...$attrs}"
-              large
+              v-bind="{ ...$attrs }"
             />
           </div>
         </v-toolbar-items>
@@ -61,46 +61,41 @@
   </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 VcsButton from '../../components/buttons/VcsButton.vue';
+  import { VMenu, VIcon, VToolbar, VToolbarItems } from 'vuetify/lib';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
 
   /**
    * @description
@@ -111,7 +106,7 @@
   export default {
     name: 'ToolboxActionSelect',
     components: {
-      VcsButton,
+      VcsToolButton,
       VMenu,
       VIcon,
       VToolbar,
@@ -134,7 +129,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,22 +18,22 @@
         <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
+        <VcsToolButton
           v-else
           :tooltip="group.action.title"
           :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}"
-          large
+          v-bind="{ ...$attrs }"
         />
       </div>
     </v-toolbar-items>
@@ -56,10 +58,9 @@
     margin-top: 2px;
   }
 
-  .v-toolbar__items > div{
+  .v-toolbar__items > div {
     gap: 8px;
     width: fit-content;
-    display: inline-block;
   }
 </style>
 
@@ -70,7 +71,7 @@
   import { getComponentsByOrder, ToolboxType } from './toolboxManager.js';
   import ToolboxActionSelect from './SelectToolboxComponent.vue';
   import ToolboxActionGroup from './GroupToolboxComponent.vue';
-  import VcsButton from '../../components/buttons/VcsButton.vue';
+  import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
 
   /**
    * @typedef {Object} ToolboxButtonGroup
@@ -98,7 +99,7 @@
     components: {
       ToolboxActionSelect,
       ToolboxActionGroup,
-      VcsButton,
+      VcsToolButton,
       VToolbar,
       VToolbarItems,
     },
@@ -107,7 +108,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 +122,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 = {
@@ -138,7 +145,7 @@
       };
 
       function handleToolboxButton() {
-        if (groups.value.length > 0) {
+        if (orderedGroups.value.length > 0) {
           if (!app.navbarManager.has('toolbox')) {
             app.navbarManager.add(
               {

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

@@ -7,8 +7,8 @@
     @dragend="dragEnd"
     :draggable="isDraggable"
     :class="{
-      'rounded': !isDocked,
-      'marginToTop': isDocked,
+      rounded: !isDocked,
+      marginToTop: isDocked,
       'rounded-br': isDynamicLeft,
       'rounded-bl': isDynamicRight,
     }"
@@ -24,13 +24,11 @@
     >
       <slot name="headerComponent" :props="$attrs" />
     </div>
-    <v-divider
-      v-if="!windowState.hideHeader"
-    />
+    <v-divider v-if="!windowState.hideHeader" />
     <div
       class="overflow-x-hidden mb-1"
       :class="{
-        'rounded': !isDocked,
+        rounded: !isDocked,
       }"
     >
       <slot />
@@ -39,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';
 
@@ -88,17 +82,21 @@
     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);
       /**
        * Sets window as draggable on mousedown on header.
@@ -156,4 +154,3 @@
     },
   };
 </script>
-

package/src/manager/window/WindowComponentHeader.vue

@@ -1,37 +1,34 @@
 <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"
         size="16"
-      />
-      <h3
+      >
+        {{ 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
           :actions="windowState.headerActions"
           :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"
         @click.stop="infoAction.callback()"
-        small
         :icon="infoAction.icon"
         :tooltip="infoAction.title"
         class="px-1 d-flex"
@@ -39,30 +36,31 @@
       <VcsButton
         v-if="isDockable"
         @click.stop="pin"
-        small
         icon="mdi-pin"
         tooltip="components.pin"
         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>
@@ -108,13 +106,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,
@@ -125,4 +130,3 @@
     },
   };
 </script>
-