@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/manager/toolbox/{ToolboxManager.vue → ToolboxManagerComponent.vue}

@@ -1,14 +1,14 @@
 <template>
   <v-toolbar
     v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
-    class="vcs-toolbox mx-auto marginToTop opacity-80"
+    class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
       'rounded-b': !open,
+      'vcs-toolbox__secondary': !isDefaultToolbox,
     }"
-    :height="40"
+    :height="toolboxHeight"
     :style="{ zIndex }"
     @click.stop="bringToTop"
-    style="width: fit-content"
   >
     <v-toolbar-items class="w-100 px-4 gc-1">
       <div
@@ -33,7 +33,10 @@
           :active="group.action.active"
           :background="group.action.background"
           :disabled="group.action.disabled"
-          @click="group.action.callback($event)"
+          @click.stop="
+            bringToTop();
+            group.action.callback($event);
+          "
           v-bind="{ ...$attrs }"
         />
       </div>
@@ -42,8 +45,19 @@
 </template>
 
 <style lang="scss" scoped>
-  .marginToTop {
+  .vcs-toolbox__secondary {
+    &.vcs-toolbox.v-theme {
+      &--light {
+        background-color: rgba(var(--v-theme-primary-lighten-3));
+      }
+      &--dark {
+        background-color: rgba(var(--v-theme-primary-darken-4));
+      }
+    }
+  }
+  .vcs-toolbox {
     margin-top: 2px;
+    width: fit-content;
   }
 </style>
 
@@ -61,6 +75,7 @@
   import VcsToolButton from '../../components/buttons/VcsToolButton.vue';
   import { vcsAppSymbol } from '../../pluginHelper.js';
   import { ButtonLocation } from '../navbarManager.js';
+  import { useFontSize } from '../../vuePlugins/vuetify.js';
 
   /**
    * @typedef {Object} ToolboxButtonGroup
@@ -84,7 +99,7 @@
    * @vue-computed {Array<ToolboxButtonGroup>} orderedGroups - Array of group components sorted by owner
    */
   export default {
-    name: 'VcsToolboxManager',
+    name: 'ToolboxManagerComponent',
     components: {
       ToolboxActionSelect,
       ToolboxActionGroup,
@@ -163,12 +178,12 @@
       }
       handleToolboxButton();
 
-      const stopWatching = watch(groups, () => handleToolboxButton());
+      watch(groups, () => handleToolboxButton());
 
       onUnmounted(() => {
-        stopWatching();
         nameChangeListener();
         app.windowManager.removeExternalIdFromZIndex('toolbox');
+        app.navbarManager.remove('toolbox');
       });
 
       watch(toolboxOpen, () => {
@@ -183,6 +198,10 @@
       };
 
       const { mdAndUp } = useDisplay();
+      const fontSize = useFontSize();
+      const toolboxHeight = computed(() => {
+        return fontSize.value * 3 + 1;
+      });
       return {
         mdAndUp,
         toolboxOpen,
@@ -200,6 +219,7 @@
             bringToTop();
           }
         },
+        toolboxHeight,
       };
     },
   };

package/src/manager/toolbox/{ToolboxManager.vue.d.ts → ToolboxManagerComponent.vue.d.ts}

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     open: import("vue").Ref<boolean>;
     bringToTop: () => void;
     openGroup(group: any): void;
+    toolboxHeight: import("vue").ComputedRef<number>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;
 export type ToolboxButtonGroup = {

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';
@@ -230,7 +230,7 @@ class ToolboxManager {
   }
 
   set toolboxName(name) {
-    check(name, [String, defaultToolboxName]);
+    check(name, oneOf(String, defaultToolboxName));
 
     if (this._toolboxName !== name) {
       this._toolboxName = name;
@@ -285,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(
@@ -335,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),
           },
         ],
       });
@@ -357,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,7 +1,7 @@
 <template>
   <v-sheet
     :id="`window-component--${windowState.id}`"
-    class="elevation-3 position-absolute d-flex flex-column"
+    class="elevation-3 position-absolute d-flex flex-column window-component"
     v-bind="$attrs"
     @dragstart="dragStart"
     @dragend="dragEnd"
@@ -9,8 +9,8 @@
     :class="{
       rounded: !isDocked,
       marginToTop: isDocked || !isChild,
-      'rounded-br': isDynamicLeft,
-      'rounded-bl': isDynamicRight,
+      'rounded-be': isDynamicLeft,
+      'rounded-bs': isDynamicRight,
     }"
   >
     <div
@@ -89,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/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">
@@ -52,10 +56,10 @@
 
 <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;
@@ -64,14 +68,23 @@
   .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/components';
-  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.
@@ -88,6 +101,7 @@
       VcsButton,
       VIcon,
       VDivider,
+      VTooltip,
     },
     inheritAttrs: false,
     props: {
@@ -124,6 +138,8 @@
           : vm.$st(props.windowState.headerTitle),
       );
 
+      const headerRef = ref(null);
+
       const infoAction =
         props.windowState.infoUrl || props.windowState.infoUrlCallback
           ? createLinkAction(
@@ -136,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,6 +17,9 @@ declare const _default: import("vue").DefineComponent<{
     close: () => void;
     isDockable: import("vue").ComputedRef<any>;
     translatedHeaderTitle: import("vue").ComputedRef<any>;
+    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: {

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"
@@ -160,9 +163,9 @@
         const position = getPosition(windowComponent);
         moveWindow(id, translation, windowManager, targetSize.value, position);
       };
-
+      const display = useDisplay();
       const addMobileClass = computed(() => {
-        return useDisplay().xs.value && componentIds.length > 0;
+        return display.xs.value && componentIds.length > 0;
       });
 
       const setTargetSize = () => {

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

@@ -14,30 +14,48 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
 /**
  * @typedef {{
  *   id?: string,
- *   parendId?: string,
- *   component: import("vue").Component<T, unknown, unknown>,
- *   headerComponent?: import("vue").Component<T, unknown, unknown>,
- *   state? : Partial<WindowState>,
+ *   parentId?: string,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
+ *   state? : WindowStateOptions,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
- * @template {Object} [T=Object]
+ * @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<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 {Partial<WindowState>} [state]
+ * @property {WindowStateOptions} [state]
  * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
  * @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.
@@ -53,7 +71,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
 /**
  * @typedef {{
  *   id: string,
- *   parendId?: string,
+ *   parentId?: string,
  *   component: import("vue").Component<T, unknown, unknown>,
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,
@@ -129,23 +147,61 @@ export namespace WindowPositions {
     export { DETACHED_1 as DETACHED };
 }
 export default WindowManager;
-export type WindowComponentOptions<T extends Object = Object> = {
+export type WindowComponentOptions<T = any> = {
     id?: string;
-    parendId?: string;
-    component: import("vue").Component<T, unknown, unknown>;
-    headerComponent?: import("vue").Component<T, unknown, unknown>;
-    state?: Partial<WindowState>;
+    parentId?: string;
+    component: import("vue").Component<T>;
+    headerComponent?: import("vue").Component<T>;
+    state?: WindowStateOptions;
     position?: Partial<WindowPositionOptions>;
-    slot: WindowSlot;
+    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;
+    /**
+     * An optional translatable header. If an array is provided all elements are translated and joined afterward.
+     */
+    headerTitle?: OptionsOrRef<string | string[]> | undefined;
+    headerIcon?: OptionsOrRef<string> | undefined;
+    headerActions?: OptionsOrRef<import("../../actions/actionHelper.js").VcsAction[]> | undefined;
+    headerActionsOverflow?: OptionsOrRef<number> | undefined;
+    /**
+     * An optional url referencing help or further information on the window's content.
+     */
+    infoUrl?: OptionsOrRef<string> | undefined;
+    /**
+     * 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()
+     */
+    infoUrlCallback?: OptionsOrRef<() => string> | undefined;
+    /**
+     * 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
+     */
+    styles?: Record<string, string> | undefined;
+    /**
+     * 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
+     */
+    classes?: string[] | Record<string, string> | undefined;
+};
 export type WindowState = {
     id: string;
     /**
      * 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.
      */
@@ -188,7 +244,7 @@ export type WindowState = {
 };
 export type WindowComponent<T extends Object = Object> = {
     id: string;
-    parendId?: string;
+    parentId?: string;
     component: import("vue").Component<T, unknown, unknown>;
     headerComponent?: import("vue").Component<T, unknown, unknown>;
     state: Partial<WindowState>;

package/src/manager/window/windowManager.js

@@ -2,7 +2,7 @@ import { computed, reactive, ref } from 'vue';
 import { VcsEvent } from '@vcmap/core';
 import { v4 as uuidv4 } from 'uuid';
 import { parseEnumValue } from '@vcsuite/parsers';
-import { check } from '@vcsuite/check';
+import { check, oneOf } from '@vcsuite/check';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 
 /**
@@ -104,31 +104,51 @@ export function isSlotPosition(windowPosition) {
 /**
  * @typedef {{
  *   id?: string,
- *   parendId?: string,
- *   component: import("vue").Component<T, unknown, unknown>,
- *   headerComponent?: import("vue").Component<T, unknown, unknown>,
- *   state? : Partial<WindowState>,
+ *   parentId?: string,
+ *   component: import("vue").Component<T>,
+ *   headerComponent?: import("vue").Component<T>,
+ *   state? : WindowStateOptions,
  *   position? : Partial<WindowPositionOptions>,
- *   slot: WindowSlot,
+ *   slot?: WindowSlot,
  *   props?: T,
  *   provides?: Record<string, unknown>
  * }} WindowComponentOptions
- * @template {Object} [T=Object]
+ * @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<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 {Partial<WindowState>} [state]
+ * @property {WindowStateOptions} [state]
  * @property {Partial<WindowPositionOptions>} [position] Will be merged with default position for slot
  * @property {WindowSlot} [slot]
  * @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.
@@ -145,7 +165,7 @@ export function isSlotPosition(windowPosition) {
 /**
  * @typedef {{
  *   id: string,
- *   parendId?: string,
+ *   parentId?: string,
  *   component: import("vue").Component<T, unknown, unknown>,
  *   headerComponent?: import("vue").Component<T, unknown, unknown>,
  *   state : Partial<WindowState>,
@@ -563,7 +583,7 @@ class WindowManager {
    * @returns {WindowComponent}
    */
   add(windowComponentOptions, owner) {
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (
       windowComponentOptions.id &&
@@ -599,6 +619,7 @@ class WindowManager {
       ? [...(windowComponentOptions?.state?.classes ?? [])]
       : { ...windowComponentOptions?.state?.classes };
 
+    /** @type {WindowState} */
     const state = reactive({
       id,
       parentId,
@@ -747,7 +768,7 @@ class WindowManager {
    */
   addExternalIdToZIndex(id, owner) {
     check(id, String);
-    check(owner, [String, vcsAppSymbol]);
+    check(owner, oneOf(String, vcsAppSymbol));
 
     if (this.has(id)) {
       throw new Error(`Id ${id} already belongs to a window id`);