@vcmap/ui 5.3.7 → 6.0.0-rc.10

package/src/manager/toolbox/toolboxManager.js

@@ -1,5 +1,5 @@
 import { VcsEvent } from '@vcmap/core';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum, oneOf, optional } from '@vcsuite/check';
 import { v4 as uuidv4 } from 'uuid';
 import { reactive, shallowReactive } from 'vue';
 import { vcsAppSymbol } from '../../pluginHelper.js';
@@ -204,10 +204,9 @@ class ToolboxManager {
     this.removed = new VcsEvent();
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    this.componentIds = [];
-
+    this.componentIds = reactive([]);
     /**
      * @type {Map<string, ToolboxComponent>}
      * @private
@@ -231,7 +230,7 @@ class ToolboxManager {
   }
 
   set toolboxName(name) {
-    check(name, [String, defaultToolboxName]);
+    check(name, oneOf(String, defaultToolboxName));
 
     if (this._toolboxName !== name) {
       this._toolboxName = name;
@@ -286,9 +285,9 @@ class ToolboxManager {
    * @returns {SingleToolboxComponent|SelectToolboxComponent|import("vue").ShallowReactive<GroupToolboxComponent>}
    */
   add(toolboxComponentOptions, owner) {
-    checkMaybe(toolboxComponentOptions.id, String);
-    check(toolboxComponentOptions.type, Object.values(ToolboxType));
-    check(owner, [String, vcsAppSymbol]);
+    check(toolboxComponentOptions.id, maybe(String));
+    check(toolboxComponentOptions.type, ofEnum(ToolboxType));
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (toolboxComponentOptions.id && this.has(toolboxComponentOptions.id)) {
       throw new Error(
@@ -336,13 +335,13 @@ class ToolboxManager {
         ...ActionPattern,
         selected: Function,
         currentIndex: Number,
-        disabled: [undefined, Boolean],
+        disabled: optional(Boolean),
         tools: [
           {
             name: String,
-            title: [undefined, String],
+            title: optional(String),
             icon: String,
-            disabled: [undefined, Boolean],
+            disabled: optional(Boolean),
           },
         ],
       });
@@ -358,8 +357,8 @@ class ToolboxManager {
       };
     } else {
       check(toolboxComponentOptions.icon, String);
-      checkMaybe(toolboxComponentOptions.title, String);
-      checkMaybe(toolboxComponentOptions.disabled, Boolean);
+      check(toolboxComponentOptions.title, maybe(String));
+      check(toolboxComponentOptions.disabled, maybe(Boolean));
       const {
         icon,
         title = undefined,

package/src/manager/window/WindowComponent.vue

@@ -1,16 +1,16 @@
 <template>
   <v-sheet
     :id="`window-component--${windowState.id}`"
-    class="elevation-3 position-absolute d-flex flex-column"
-    v-on="{ ...$listeners }"
+    class="elevation-3 position-absolute d-flex flex-column window-component"
+    v-bind="$attrs"
     @dragstart="dragStart"
     @dragend="dragEnd"
     :draggable="isDraggable"
     :class="{
       rounded: !isDocked,
       marginToTop: isDocked || !isChild,
-      'rounded-br': isDynamicLeft,
-      'rounded-bl': isDynamicRight,
+      'rounded-be': isDynamicLeft,
+      'rounded-bs': isDynamicRight,
     }"
   >
     <div
@@ -45,7 +45,7 @@
 
 <script>
   import { computed, inject, provide, ref } from 'vue';
-  import { VDivider, VSheet } from 'vuetify/lib';
+  import { VDivider, VSheet } from 'vuetify/components';
   import { WindowSlot } from './windowManager.js';
 
   /**
@@ -61,6 +61,7 @@
    */
   export default {
     name: 'WindowComponent',
+    inheritAttrs: false,
     components: {
       VSheet,
       VDivider,
@@ -88,17 +89,21 @@
       });
 
       const isChild = computed(() => !!props.windowState.parentId);
-      const isDynamic = computed(() => props.slotWindow !== WindowSlot.STATIC);
-      const isDocked = computed(() => props.slotWindow !== WindowSlot.DETACHED);
+      const isDynamic = computed(
+        () => props.slotWindow.value !== WindowSlot.STATIC,
+      );
+      const isDocked = computed(
+        () => props.slotWindow.value !== WindowSlot.DETACHED,
+      );
       const isDockedLeft = computed(() => {
         return (
-          props.slotWindow === WindowSlot.STATIC ||
-          props.slotWindow === WindowSlot.DYNAMIC_LEFT ||
-          props.slotWindow === WindowSlot.DYNAMIC_CHILD
+          props.slotWindow.value === WindowSlot.STATIC ||
+          props.slotWindow.value === WindowSlot.DYNAMIC_LEFT ||
+          props.slotWindow.value === WindowSlot.DYNAMIC_CHILD
         );
       });
       const isDockedRight = computed(
-        () => props.slotWindow === WindowSlot.DYNAMIC_RIGHT,
+        () => props.slotWindow.value === WindowSlot.DYNAMIC_RIGHT,
       );
       const isDraggable = ref(false);
       /**

package/src/manager/window/WindowComponent.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     dragStart: (e: DragEvent) => void;
     dragEnd: (endEvent: DragEvent) => void;
     mousedown: (e: MouseEvent) => void;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;
         required: true;
@@ -36,5 +36,5 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/window/WindowComponentHeader.vue

@@ -2,21 +2,25 @@
   <div
     class="d-flex justify-space-between align-center window-component-header"
   >
-    <h3 class="d-flex align-center">
+    <h3 class="d-flex align-center flex-grow-1">
       <v-icon
         v-if="windowState.headerIcon"
         class="mr-1"
-        :class="{ 'primary--text': isOnTop }"
-        size="16"
+        :class="{ 'text-primary': isOnTop }"
+        :size="iconSize"
       >
         {{ windowState.headerIcon }}
       </v-icon>
       <span
-        class="d-inline-block user-select-none font-weight-bold"
-        :class="{ 'primary--text': isOnTop }"
+        ref="headerRef"
+        class="d-inline-block user-select-none font-weight-bold vcs-window-header-title"
+        :class="{ 'text-primary': isOnTop }"
       >
         {{ translatedHeaderTitle }}
       </span>
+      <v-tooltip v-if="headerTooltip" activator="parent">
+        {{ $st(headerTooltip) }}
+      </v-tooltip>
     </h3>
     <div class="d-flex justify-space-between align-center">
       <template v-if="windowState.headerActions?.length > 0">
@@ -24,7 +28,7 @@
           :actions="windowState.headerActions"
           :overflow-count="windowState.headerActionsOverflow ?? 3"
         />
-        <v-divider vertical inset class="mx-1" />
+        <v-divider vertical inset class="mx-1 my-1" />
       </template>
       <VcsButton
         v-if="infoAction"
@@ -52,23 +56,35 @@
 
 <style lang="scss" scoped>
   .window-component-header {
-    max-height: 16px;
+    max-height: calc(var(--v-vcs-font-size) * 2 - 10px);
 
     h3 {
-      line-height: 16px;
+      line-height: calc(var(--v-vcs-font-size) * 2 - 10px);
     }
     .v-divider--vertical.v-divider--inset {
       margin-top: 2px;
     }
   }
+  .user-select-none {
+    user-select: none;
+  }
+  .vcs-window-header-title {
+    width: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
 </style>
 
 <script>
-  import { VIcon, VDivider } from 'vuetify/lib';
-  import { computed, getCurrentInstance } from 'vue';
+  import { VIcon, VDivider, VTooltip } from 'vuetify/components';
+  import { computed, getCurrentInstance, ref } from 'vue';
+  import { createEllipseTooltip } from '../../components/composables.js';
   import VcsButton from '../../components/buttons/VcsButton.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import { createLinkAction } from '../../actions/actionHelper.js';
+  import { useIconSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @description Default window component header with drag functionality close action and further optional window actions.
@@ -85,7 +101,9 @@
       VcsButton,
       VIcon,
       VDivider,
+      VTooltip,
     },
+    inheritAttrs: false,
     props: {
       windowState: {
         type: Object,
@@ -116,10 +134,12 @@
 
       const translatedHeaderTitle = computed(() =>
         Array.isArray(props.windowState.headerTitle)
-          ? props.windowState.headerTitle.map((t) => vm.$t(t)).join(' ')
-          : vm.$t(props.windowState.headerTitle),
+          ? props.windowState.headerTitle.map((t) => vm.$st(t)).join(' ')
+          : vm.$st(props.windowState.headerTitle),
       );
 
+      const headerRef = ref(null);
+
       const infoAction =
         props.windowState.infoUrl || props.windowState.infoUrlCallback
           ? createLinkAction(
@@ -132,11 +152,19 @@
             )
           : undefined;
 
+      const iconSize = useIconSize();
       return {
         pin,
         close,
         isDockable,
         translatedHeaderTitle,
+        headerRef,
+        iconSize,
+        headerTooltip: createEllipseTooltip(
+          computed(() => headerRef.value),
+          computed(() => undefined),
+          translatedHeaderTitle,
+        ),
         infoAction,
       };
     },

package/src/manager/window/WindowComponentHeader.vue.d.ts

@@ -17,8 +17,11 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     isDockable: import("vue").ComputedRef<any>;
     translatedHeaderTitle: import("vue").ComputedRef<any>;
-    infoAction: import("../../actions/actionHelper.js").VcsAction | undefined;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    headerRef: import("vue").Ref<null>;
+    iconSize: import("vue").ComputedRef<number>;
+    headerTooltip: import("vue").ComputedRef<string>;
+    infoAction: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction | undefined;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     windowState: {
         type: ObjectConstructor;
         required: true;
@@ -32,5 +35,5 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="{ 'win-container-mobile': addMobileClass }">
+  <div
+    :class="{ 'win-container-mobile': addMobileClass }"
+    class="window-manager"
+  >
     <WindowComponent
       v-for="id in componentIds"
       :key="id"
@@ -56,8 +59,8 @@
 </style>
 
 <script>
-  import { computed, getCurrentInstance, inject, onUnmounted, ref } from 'vue';
-
+  import { computed, inject, onUnmounted, ref } from 'vue';
+  import { useDisplay } from 'vuetify';
   import WindowComponent from './WindowComponent.vue';
   import WindowComponentHeader from './WindowComponentHeader.vue';
   import BalloonComponent from '../../featureInfo/BalloonComponent.vue';
@@ -160,14 +163,9 @@
         const position = getPosition(windowComponent);
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
-
-      const componentIdRef = ref(componentIds);
-
+      const display = useDisplay();
       const addMobileClass = computed(() => {
-        return (
-          getCurrentInstance().proxy.$vuetify.breakpoint.xs &&
-          componentIdRef.value.length > 0
-        );
+        return display.xs.value && componentIds.length > 0;
       });
 
       const setTargetSize = () => {
@@ -183,7 +181,7 @@
       });
 
       return {
-        componentIds: componentIdRef,
+        componentIds,
         getComponent: (id) => windowManager.get(id).component,
         getHeaderComponent: (id) =>
           windowManager.get(id).headerComponent || WindowComponentHeader,

package/src/manager/window/WindowManager.vue.d.ts

@@ -14,6 +14,6 @@ declare const _default: import("vue").DefineComponent<{}, {
         dx: number;
         dy: number;
     }) => void;
-    addMobileClass: import("vue").ComputedRef<any>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    addMobileClass: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/manager/window/windowManager.d.ts

@@ -12,21 +12,50 @@ export function compareWindowPositions(pos1: WindowPosition, pos2: WindowPositio
  */
 export function isSlotPosition(windowPosition: WindowPosition): boolean;
 /**
- * @typedef {Object} WindowComponentOptions
+ * @typedef {{
+ *   id?: string,
+ *   parentId?: string,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
+ *   state? : WindowStateOptions,
+ *   position? : Partial<WindowPositionOptions>,
+ *   slot?: WindowSlot,
+ *   props?: T,
+ *   provides?: Record<string, unknown>
+ * }} WindowComponentOptions
+ * @template [T=any]
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
  * @property {string} [parentId] An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
- * @property {import("vue").Component} component Main Component which is shown below the header.
- * @property {import("vue").Component} [headerComponent] Replaces the Header Component.
- * @property {Partial<WindowState>} [state]
+ * @property {import("vue").Component<T, unknown, unknown>} component Main Component which is shown below the header.
+ * @property {import("vue").Component<T, unknown, unknown>} [headerComponent] Replaces the Header Component.
+ * @property {WindowStateOptions} [state]
  * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
- * @property {Object} [props]
+ * @property {T} [props]
  * @property {Object} [provides]
  */
+/**
+ * @typedef {T|import('vue').Ref<T>|import('vue').ComputedRef<T>} OptionsOrRef
+ * @template T
+ */
+/**
+ * @typedef {Object} WindowStateOptions
+ * @property {OptionsOrRef<boolean>} [hideHeader] be used to not show the header.
+ * @property {OptionsOrRef<boolean>} [hidePin] be used to not show the pin button.
+ * @property {OptionsOrRef<string|string[]>} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
+ * @property {OptionsOrRef<string>} [headerIcon]
+ * @property {OptionsOrRef<Array<import("../../actions/actionHelper.js").VcsAction>>} [headerActions]
+ * @property {OptionsOrRef<number>} [headerActionsOverflow]
+ * @property {OptionsOrRef<string>} [infoUrl] An optional url referencing help or further information on the window's content.
+ * @property {OptionsOrRef<function():string>} [infoUrlCallback] An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
+ * @property {Record<string, string>} [styles] Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Record<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
 /**
  * @typedef {Object} WindowState
  * @property {string} id
  * @property {string|vcsAppSymbol} owner Owner of the window, set by windowManager on add
+ * @property {string|undefined} parentId - the parent of this window
  * @property {boolean} [hideHeader] be used to not show the header.
  * @property {boolean} [hidePin] be used to not show the pin button.
  * @property {string|string[]} [headerTitle] An optional translatable header. If an array is provided all elements are translated and joined afterward.
@@ -40,17 +69,29 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
  */
 /**
- * @typedef {Object} WindowComponent
+ * @typedef {{
+ *   id: string,
+ *   parentId?: string,
+ *   component: import("vue").Component<T, unknown, unknown>,
+ *   headerComponent?: import("vue").Component<T, unknown, unknown>,
+ *   state : Partial<WindowState>,
+ *   position : Partial<WindowPositionOptions>,
+ *   slot: WindowSlot,
+ *   props: T,
+ *   provides: Record<string, unknown>,
+ *   zIndex: import("vue").ComputedGetter<number>
+ * }} WindowComponent
+ * @template {Object} [T=Object]
  * @property {string} id
  * @property {string} [parentId]
- * @property {import("vue").Component} component
- * @property {import("vue").Component} [headerComponent]
+ * @property {import("vue").Component<T, unknown, unknown>} component
+ * @property {import("vue").Component<T, unknown, unknown>} [headerComponent]
  * @property {WindowState} state
  * @property {WindowPosition} [position]
  * @property {WindowPositionOptions} initialPositionOptions
  * @property {import("vue").Ref<WindowSlot>} slot
  * @property {WindowSlot} initialSlot
- * @property {Object} props
+ * @property {T} props
  * @property {Object} provides
  * @property {import("vue").ComputedGetter<number>} zIndex
  */
@@ -106,31 +147,50 @@ export namespace WindowPositions {
     export { DETACHED_1 as DETACHED };
 }
 export default WindowManager;
-export type WindowComponentOptions = {
+export type WindowComponentOptions<T = any> = {
+    id?: string;
+    parentId?: string;
+    component: import("vue").Component<T>;
+    headerComponent?: import("vue").Component<T>;
+    state?: WindowStateOptions;
+    position?: Partial<WindowPositionOptions>;
+    slot?: WindowSlot;
+    props?: T;
+    provides?: Record<string, unknown>;
+};
+export type OptionsOrRef<T> = T | import('vue').Ref<T> | import('vue').ComputedRef<T>;
+export type WindowStateOptions = {
+    /**
+     * be used to not show the header.
+     */
+    hideHeader?: OptionsOrRef<boolean> | undefined;
+    /**
+     * be used to not show the pin button.
+     */
+    hidePin?: OptionsOrRef<boolean> | undefined;
     /**
-     * Optional ID, If not provided an uuid will be generated.
+     * An optional translatable header. If an array is provided all elements are translated and joined afterward.
      */
-    id?: string | undefined;
+    headerTitle?: OptionsOrRef<string | string[]> | undefined;
+    headerIcon?: OptionsOrRef<string> | undefined;
+    headerActions?: OptionsOrRef<import("../../actions/actionHelper.js").VcsAction[]> | undefined;
+    headerActionsOverflow?: OptionsOrRef<number> | undefined;
     /**
-     * An optional ID of a parent window for 'dynamicChild' slot. Parent windows with slot dynamicRight are not supported.
+     * An optional url referencing help or further information on the window's content.
      */
-    parentId?: string | undefined;
+    infoUrl?: OptionsOrRef<string> | undefined;
     /**
-     * Main Component which is shown below the header.
+     * An optional function returning an url referencing help or further information. Can be used for urls depending on the app's locale, e.g. app.getHelpUrl()
      */
-    component: import("vue").Component;
+    infoUrlCallback?: OptionsOrRef<() => string> | undefined;
     /**
-     * Replaces the Header Component.
+     * Can be used to add additional styles to the root WindowComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
      */
-    headerComponent?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
-    state?: Partial<WindowState> | undefined;
+    styles?: Record<string, string> | undefined;
     /**
-     * Will be merged with default position for slot
+     * Can be used to add additional classes to the root WindowComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
      */
-    position?: Partial<WindowPositionOptions> | undefined;
-    slot?: string | undefined;
-    props?: Object | undefined;
-    provides?: Object | undefined;
+    classes?: string[] | Record<string, string> | undefined;
 };
 export type WindowState = {
     id: string;
@@ -138,6 +198,10 @@ export type WindowState = {
      * Owner of the window, set by windowManager on add
      */
     owner: string | symbol;
+    /**
+     * - the parent of this window
+     */
+    parentId: string | undefined;
     /**
      * be used to not show the header.
      */
@@ -178,18 +242,16 @@ export type WindowState = {
         [x: string]: string;
     } | undefined;
 };
-export type WindowComponent = {
+export type WindowComponent<T extends Object = Object> = {
     id: string;
-    parentId?: string | undefined;
-    component: import("vue").Component;
-    headerComponent?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
-    state: WindowState;
-    position?: WindowPosition | undefined;
-    initialPositionOptions: WindowPositionOptions;
-    slot: import("vue").Ref<WindowSlot>;
-    initialSlot: WindowSlot;
-    props: Object;
-    provides: Object;
+    parentId?: string;
+    component: import("vue").Component<T, unknown, unknown>;
+    headerComponent?: import("vue").Component<T, unknown, unknown>;
+    state: Partial<WindowState>;
+    position: Partial<WindowPositionOptions>;
+    slot: WindowSlot;
+    props: T;
+    provides: Record<string, unknown>;
     zIndex: import("vue").ComputedGetter<number>;
 };
 export type WindowPositionOptions = {
@@ -296,9 +358,9 @@ declare class WindowManager implements IWindowManager {
     removed: import("@vcmap/core").VcsEvent<WindowComponent>;
     /**
      * reactive ordered array of ids,
-     * @type {Array<string>}
+     * @type {import("vue").UnwrapRef<string[]>}
      */
-    componentIds: Array<string>;
+    componentIds: import("vue").UnwrapRef<string[]>;
     /**
      * reactive ordered array of ids, defining the zIndex of a component
      * @type {import("vue").Ref<Array<string>>}