@vcmap/ui 6.0.0-rc.8 → 6.0.0

package/src/legend/VcsLegend.vue.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         Style: string;
     };
     setIframeHeight: (id: string) => void;
-    panels: import("vue").ComputedRef<number[]>;
+    panels: import("vue").Ref<string[]>;
     cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {

package/src/legend/legendHelper.js

@@ -170,7 +170,7 @@ export function getLegendEntries(app) {
    */
   function syncLayerLegendEntries(layer) {
     removeEntryForLayer(layer);
-    if (layer.active) {
+    if (layer.active && layer.isSupported(app.maps.activeMap)) {
       const key = layer.name;
       const title = layer.properties.title || layer.name;
       const legend =
@@ -187,6 +187,10 @@ export function getLegendEntries(app) {
     }
   }
 
+  const destroyMapListener = app.maps.mapActivated.addEventListener(() =>
+    [...app.layers].forEach(syncLayerLegendEntries),
+  );
+
   const destroyChangedListener = app.layers.stateChanged.addEventListener(
     syncLayerLegendEntries,
   );
@@ -196,6 +200,7 @@ export function getLegendEntries(app) {
   [...app.layers].forEach(syncLayerLegendEntries);
 
   const destroy = () => {
+    destroyMapListener();
     destroyChangedListener();
     destroyRemovedListener();
     Object.values(styleChangedListener).forEach((cb) => cb());

package/src/manager/collectionManager/collectionComponentClass.js

@@ -81,7 +81,11 @@ export function createSupportedMapMappingFunction(
   return (item, _c, listItem) => {
     const mapNames =
       typeof supportedMaps === 'function' ? supportedMaps(item) : supportedMaps;
-    listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
+    if (mapCollection.activeMap) {
+      listItem.disabled = !mapNames.includes(mapCollection.activeMap.className);
+    } else {
+      listItem.disabled = true;
+    }
     listItem.destroyFunctions.push(
       mapCollection.mapActivated.addEventListener((map) => {
         listItem.disabled = !mapNames.includes(map.className);
@@ -317,6 +321,7 @@ class CollectionComponentClass {
         [...this.selection.value].forEach((listItem) => {
           this._collection.remove(this._collection.getByKey(listItem.name));
         });
+        this.selection.value = [];
       },
     });
     this._destroyBulkDelete = destroy;
@@ -509,10 +514,9 @@ class CollectionComponentClass {
     });
     if (index > -1) {
       const listItem = this._listItems.value[index];
-      const selectionIdx = this.selection.value.indexOf(listItem);
-      if (selectionIdx > -1) {
-        this.selection.value.splice(selectionIdx, 1);
-      }
+      this.selection.value = this.selection.value.filter(
+        (i) => i.name !== listItem.name,
+      );
       destroyListItem(this._listItems.value[index]);
       this._listItems.value.splice(index, 1);
     }

package/src/manager/collectionManager/editorCollectionComponentClass.js

@@ -218,9 +218,11 @@ export function makeEditorCollectionComponentClass(
   );
 
   const itemRemovedListener =
-    editorCollectionComponent.collection.removed.addEventListener(
-      closeEditorWindow,
-    );
+    editorCollectionComponent.collection.removed.addEventListener((item) => {
+      if (predicate(item)) {
+        closeEditorWindow(item);
+      }
+    });
 
   editorCollectionComponent.addItemMapping({
     predicate,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -34,7 +34,12 @@
               :icon="action.icon"
               :disabled="action.disabled"
               :active="action.active"
-              @click="action.callback($event)"
+              @click.stop="
+                () => {
+                  $emit('click', $event);
+                  action.callback($event);
+                }
+              "
               v-bind="{ ...$attrs }"
             />
           </div>

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -11,7 +11,12 @@
       :active="group.action.active"
       :disabled="group.action.disabled"
       :background="group.action.background"
-      @click="group.action.callback($event)"
+      @click.stop="
+        () => {
+          $emit('click', $event);
+          group.action.callback($event);
+        }
+      "
       v-bind="{ ...$attrs }"
       class="vcs-toolbox-action-selected"
       :min-width="32"
@@ -39,7 +44,6 @@
       <v-toolbar
         class="vcs-toolbox-2 mx-auto marginToTop rounded-b elevation-4 opacity-80 px-1"
         :height="toolboxHeight"
-        dense
       >
         <v-toolbar-items class="w-100">
           <div class="d-flex align-center justify-space-between gc-1 w-100">

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -20,11 +20,13 @@
           v-if="group.type === ToolboxType.GROUP"
           :group="group"
           @toggle="openGroup"
+          @click="bringToTop"
         />
         <ToolboxActionSelect
           v-else-if="group.type === ToolboxType.SELECT"
           :group="group"
           @toggle="openGroup"
+          @click="bringToTop"
         />
         <VcsToolButton
           v-else
@@ -33,7 +35,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>
@@ -149,7 +154,7 @@
       const toolboxToggleAction = {
         name: 'toolboxToggleAction',
         icon: '$vcsTools',
-        title: 'Toolbox',
+        title: 'toolbox.title',
         active: true,
         callback() {
           this.active = !this.active;

package/src/manager/window/WindowComponentHeader.vue

@@ -145,7 +145,7 @@
           ? createLinkAction(
               {
                 name: 'info',
-                title: 'content.infoAction.title',
+                title: 'content.helpAction.title',
                 icon: '$vcsHelp',
               },
               props.windowState.infoUrl || props.windowState.infoUrlCallback,

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

@@ -17,7 +17,7 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  *   parentId?: string,
  *   component: import("vue").Component<T>,
  *   headerComponent?: import("vue").Component<T>,
- *   state? : Partial<WindowState>,
+ *   state? : WindowStateOptions,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
@@ -28,16 +28,34 @@ export function isSlotPosition(windowPosition: WindowPosition): boolean;
  * @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.
@@ -134,18 +152,56 @@ export type WindowComponentOptions<T = any> = {
     parentId?: string;
     component: import("vue").Component<T>;
     headerComponent?: import("vue").Component<T>;
-    state?: Partial<WindowState>;
+    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;
+    /**
+     * 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.
      */

package/src/manager/window/windowManager.js

@@ -107,7 +107,7 @@ export function isSlotPosition(windowPosition) {
  *   parentId?: string,
  *   component: import("vue").Component<T>,
  *   headerComponent?: import("vue").Component<T>,
- *   state? : Partial<WindowState>,
+ *   state? : WindowStateOptions,
  *   position? : Partial<WindowPositionOptions>,
  *   slot?: WindowSlot,
  *   props?: T,
@@ -118,17 +118,37 @@ export function isSlotPosition(windowPosition) {
  * @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.
@@ -599,6 +619,7 @@ class WindowManager {
       ? [...(windowComponentOptions?.state?.classes ?? [])]
       : { ...windowComponentOptions?.state?.classes };
 
+    /** @type {WindowState} */
     const state = reactive({
       id,
       parentId,