@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/src/init.js

@@ -7,7 +7,6 @@ import VcsUiApp from './vcsUiApp.js';
 
 /**
  * Base pattern to check VcsObjects
- * @type {import("vcsuite/check").PatternFor<import("@vcmap/core").VcsObject>}
  */
 const VcsObjectPattern = {
   type: String,
@@ -16,7 +15,6 @@ const VcsObjectPattern = {
 
 /**
  * Base pattern to check VcsUiAppConfig
- * @type {import("vcsuite/check").PatternFor<VcsUiAppConfig>}
  */
 export const VcsUiAppConfigPattern = {
   id: [undefined, String],
@@ -39,7 +37,7 @@ export const VcsUiAppConfigPattern = {
 /**
  * creates and mounts a vcsApp
  * @param {string} mountTarget
- * @returns {Promise<VcsUiApp>}
+ * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export default async function initApp(mountTarget) {
   check(mountTarget, String);
@@ -62,7 +60,7 @@ export default async function initApp(mountTarget) {
  * Initializes app with an optional single config
  * @param {string} mountTarget
  * @param {string=} configUrl optional config
- * @returns {Promise<VcsUiApp>}
+ * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export async function initAppFromModule(mountTarget, configUrl) {
   check(mountTarget, String);
@@ -82,7 +80,7 @@ export async function initAppFromModule(mountTarget, configUrl) {
  * Initializes app with a map config containing a set of config urls
  * @param {string} mountTarget
  * @param {string} appUrl app config containing further modules to be loaded
- * @returns {Promise<VcsUiApp>}
+ * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export async function initAppFromAppConfig(mountTarget, appUrl) {
   check(mountTarget, String);

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

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<{
+    item: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    StyleRowType: {
+        Stroke: string;
+        Fill: string;
+        Circle: string;
+        Icon: string;
+        Shape: string;
+        Text: string;
+    };
+    getImageSrcFromShape: typeof getImageSrcFromShape;
+    getColor(color: any): string | null;
+    determineInnerPadding: (index: number) => string;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;
+import { getImageSrcFromShape } from './legendHelper.js';

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

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    entries: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    LegendType: {
+        Image: string;
+        Iframe: string;
+        Style: string;
+    };
+    setIframeHeight: (id: string) => void;
+    panels: import("vue").ComputedRef<number[]>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    entries: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/legend/legendHelper.d.ts

@@ -0,0 +1,172 @@
+/**
+ * @typedef {Object} LegendItem
+ * @property {LegendType} type - determines rendering, specialised properties are type based.
+ */
+/**
+ * @typedef {LegendItem & { popoutBtn?: boolean, src: string, tooltip?: string }} ImageLegendItem
+ * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
+ * @property {string} src - the source url. Can be an i18n string.
+ * @property {string} [tooltip] - Optional further explanation of the legend
+ */
+/**
+ * @typedef {LegendItem & { popoutBtn?: boolean, src: string }} IframeLegendItem
+ * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
+ * @property {string} src - the source url. Can be an i18n string.
+ */
+/**
+ * @typedef {LegendItem & { colNr?: number, rows: StyleLegendRow[] }} StyleLegendItem
+ * @property {number} [colNr=2] Number of columns. Valid values are 1 or 2. Per default 2.
+ * @property {Array<StyleLegendRow>} rows - style definitions with description
+ */
+/**
+ * @typedef {Object} StyleLegendRow
+ * @property {StyleRowType} type - determines rendering of the row, specialised properties are type based.
+ * @property {string} title - Description of the style. Can be an i18n string
+ * @property {string} [tooltip] - Optional further explanation of the legend row
+ */
+/**
+ * @typedef {StyleLegendRow & { stroke: import("ol/style/Stroke.js").Options }} StrokeLegendRow
+ */
+/**
+ * @typedef {StyleLegendRow & {
+ *   fill: import("ol/style/Fill.js").Options,
+ *   stroke?: import("ol/style/Stroke.js").Options
+ * }} FillLegendRow
+ */
+/**
+ * @typedef {StyleLegendRow & { image: import("ol/style/Circle.js").Options }} CircleLegendRow
+ */
+/**
+ * @typedef {StyleLegendRow & { image: import("ol/style/Icon.js").Options }} IconLegendRow
+ */
+/**
+ * @typedef {StyleLegendRow & { image: import("ol/style/RegularShape.js").Options }} RegularShapeLegendRow
+ */
+/**
+ * @typedef {StyleLegendRow & {
+ *   text: import("ol/style/Text.js").Options,
+ *   label?: string,
+ * }} TextLegendRow
+ * @property {import("ol/style/Text.js").Options} text
+ * @property {string} [label='Text']
+ */
+/**
+ * @param {import("ol/style/Image.js").Options} image
+ * @returns {string}
+ */
+export function getImageSrcFromShape(image: import("ol/style/Image.js").Options): string;
+/**
+ * @typedef {Object} LegendEntry
+ * @property {string} key
+ * @property {string} title - layer or entry name
+ * @property {boolean} [open=true] - panel state of entry
+ * @property {Array<LegendItem>} legend - legend properties
+ * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
+ */
+/**
+ * creates a LegendEntry with title, options and optionally popout action to the entries array
+ * @param {string} key - layerName
+ * @param {string} title
+ * @param {Array<LegendItem>} legend
+ * @returns {LegendEntry}
+ */
+export function createLayerLegendEntry(key: string, title: string, legend: Array<LegendItem>): LegendEntry;
+/**
+ *
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ */
+export function getLegendEntries(app: import("../vcsUiApp.js").default): {
+    entries: import("vue").Ref<Array<LegendEntry>>;
+    destroy: () => void;
+};
+/**
+ * *
+ */
+export type LegendType = string;
+export namespace LegendType {
+    let Image: string;
+    let Iframe: string;
+    let Style: string;
+}
+export type StyleRowType = string;
+export namespace StyleRowType {
+    let Stroke: string;
+    let Fill: string;
+    let Circle: string;
+    let Icon: string;
+    let Shape: string;
+    let Text: string;
+}
+export type LegendItem = {
+    /**
+     * - determines rendering, specialised properties are type based.
+     */
+    type: LegendType;
+};
+export type ImageLegendItem = LegendItem & {
+    popoutBtn?: boolean;
+    src: string;
+    tooltip?: string;
+};
+export type IframeLegendItem = LegendItem & {
+    popoutBtn?: boolean;
+    src: string;
+};
+export type StyleLegendItem = LegendItem & {
+    colNr?: number;
+    rows: StyleLegendRow[];
+};
+export type StyleLegendRow = {
+    /**
+     * - determines rendering of the row, specialised properties are type based.
+     */
+    type: StyleRowType;
+    /**
+     * - Description of the style. Can be an i18n string
+     */
+    title: string;
+    /**
+     * - Optional further explanation of the legend row
+     */
+    tooltip?: string | undefined;
+};
+export type StrokeLegendRow = StyleLegendRow & {
+    stroke: import("ol/style/Stroke.js").Options;
+};
+export type FillLegendRow = StyleLegendRow & {
+    fill: import("ol/style/Fill.js").Options;
+    stroke?: import("ol/style/Stroke.js").Options;
+};
+export type CircleLegendRow = StyleLegendRow & {
+    image: import("ol/style/Circle.js").Options;
+};
+export type IconLegendRow = StyleLegendRow & {
+    image: import("ol/style/Icon.js").Options;
+};
+export type RegularShapeLegendRow = StyleLegendRow & {
+    image: import("ol/style/RegularShape.js").Options;
+};
+export type TextLegendRow = StyleLegendRow & {
+    text: import("ol/style/Text.js").Options;
+    label?: string;
+};
+export type LegendEntry = {
+    key: string;
+    /**
+     * - layer or entry name
+     */
+    title: string;
+    /**
+     * - panel state of entry
+     */
+    open?: boolean | undefined;
+    /**
+     * - legend properties
+     */
+    legend: Array<LegendItem>;
+    /**
+     * - popout actions
+     */
+    actions: Array<import("../actions/actionHelper.js").VcsAction>;
+};

package/src/legend/legendHelper.js

@@ -31,20 +31,20 @@ export const StyleRowType = {
  */
 
 /**
- * @typedef {LegendItem} ImageLegendItem
+ * @typedef {LegendItem & { popoutBtn?: boolean, src: string, tooltip?: string }} ImageLegendItem
  * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
  * @property {string} src - the source url. Can be an i18n string.
  * @property {string} [tooltip] - Optional further explanation of the legend
  */
 
 /**
- * @typedef {LegendItem} IframeLegendItem
+ * @typedef {LegendItem & { popoutBtn?: boolean, src: string }} IframeLegendItem
  * @property {boolean} [popoutBtn=false] - show a button in legend title to open legend in new tab
  * @property {string} src - the source url. Can be an i18n string.
  */
 
 /**
- * @typedef {LegendItem} StyleLegendItem
+ * @typedef {LegendItem & { colNr?: number, rows: StyleLegendRow[] }} StyleLegendItem
  * @property {number} [colNr=2] Number of columns. Valid values are 1 or 2. Per default 2.
  * @property {Array<StyleLegendRow>} rows - style definitions with description
  */
@@ -57,40 +57,40 @@ export const StyleRowType = {
  */
 
 /**
- * @typedef {StyleLegendRow} StrokeLegendRow
- * @property {import("ol/style/Stroke").Options} stroke
+ * @typedef {StyleLegendRow & { stroke: import("ol/style/Stroke.js").Options }} StrokeLegendRow
  */
 
 /**
- * @typedef {StyleLegendRow} FillLegendRow
- * @property {import("ol/style/Fill").Options} fill
- * @property {import("ol/style/Stroke").Options} [stroke]
+ * @typedef {StyleLegendRow & {
+ *   fill: import("ol/style/Fill.js").Options,
+ *   stroke?: import("ol/style/Stroke.js").Options
+ * }} FillLegendRow
  */
 
 /**
- * @typedef {StyleLegendRow} CircleLegendRow
- * @property {import("ol/style/Circle").Options} image
+ * @typedef {StyleLegendRow & { image: import("ol/style/Circle.js").Options }} CircleLegendRow
  */
 
 /**
- * @typedef {StyleLegendRow} IconLegendRow
- * @property {import("ol/style/Icon").Options} image
+ * @typedef {StyleLegendRow & { image: import("ol/style/Icon.js").Options }} IconLegendRow
  */
 
 /**
- * @typedef {StyleLegendRow} RegularShapeLegendRow
- * @property {import("ol/style/RegularShape").Options} image
+ * @typedef {StyleLegendRow & { image: import("ol/style/RegularShape.js").Options }} RegularShapeLegendRow
  */
 
 /**
- * @typedef {StyleLegendRow} TextLegendRow
- * @property {import("ol/style/Text").Options} text
+ * @typedef {StyleLegendRow & {
+ *   text: import("ol/style/Text.js").Options,
+ *   label?: string,
+ * }} TextLegendRow
+ * @property {import("ol/style/Text.js").Options} text
  * @property {string} [label='Text']
  */
 
 /**
- * @type {import("ol/style/Image").Options} image
- * @return {string}
+ * @param {import("ol/style/Image.js").Options} image
+ * @returns {string}
  */
 export function getImageSrcFromShape(image) {
   if (image.src) {
@@ -107,7 +107,7 @@ export function getImageSrcFromShape(image) {
  * @property {string} title - layer or entry name
  * @property {boolean} [open=true] - panel state of entry
  * @property {Array<LegendItem>} legend - legend properties
- * @property {Array<VcsAction>} actions - popout actions
+ * @property {Array<import("../actions/actionHelper.js").VcsAction>} actions - popout actions
  */
 
 /**
@@ -135,8 +135,8 @@ export function createLayerLegendEntry(key, title, legend) {
 
 /**
  *
- * @param {VcsUiApp} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: (function():void)}}
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app) {
   /**

package/src/manager/buttonManager.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @param {number} weightA
+ * @param {number} weightB
+ * @returns {number}
+ */
+export function sortByWeight(weightA?: number, weightB?: number): number;
+export default ButtonManager;
+export type ButtonComponentOptions = {
+    /**
+     * Optional ID, If not provided an uuid will be generated.
+     */
+    id?: string | undefined;
+    /**
+     * Action performed by button.
+     */
+    action: import("../actions/actionHelper.js").VcsAction;
+    /**
+     * Optional weight affecting the displaying order
+     */
+    weight?: number | undefined;
+};
+export type ButtonComponent = {
+    id: string;
+    owner: string | symbol;
+    action: import("../actions/actionHelper.js").VcsAction;
+    weight: number;
+};
+export type IButtonManager = import("../vcsUiApp.js").VcsComponentManager<ButtonComponent, ButtonComponentOptions>;
+/**
+ * @typedef ButtonComponentOptions
+ * @property {string} [id] Optional ID, If not provided an uuid will be generated.
+ * @property {import("../actions/actionHelper.js").VcsAction} action Action performed by button.
+ * @property {number} [weight=0] Optional weight affecting the displaying order
+ */
+/**
+ * @typedef ButtonComponent
+ * @property {string} id
+ * @property {string|vcsAppSymbol} owner
+ * @property {import("../actions/actionHelper.js").VcsAction} action
+ * @property {number} weight
+ */
+/**
+ * @typedef {import("../vcsUiApp.js").VcsComponentManager<ButtonComponent,ButtonComponentOptions>} IButtonManager
+ */
+/**
+ * @class ButtonManager
+ * @description Manages a set of Map Buttons
+ * @implements {IButtonManager}
+ */
+declare class ButtonManager implements IButtonManager {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
+     */
+    added: import("@vcmap/core").VcsEvent<ButtonComponent>;
+    /**
+     * @type {import("@vcmap/core").VcsEvent<ButtonComponent>}
+     */
+    removed: import("@vcmap/core").VcsEvent<ButtonComponent>;
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    componentIds: Array<string>;
+    /**
+     * @type {Map<string, ButtonComponent>}
+     * @private
+     */
+    private _buttonComponents;
+    /**
+     * @param {string} id
+     * @returns {ButtonComponent}
+     */
+    get(id: string): ButtonComponent;
+    /**
+     * @param {string} id
+     * @returns {boolean}
+     */
+    has(id: string): boolean;
+    /**
+     * removes a button, Component will not be rendered anymore and will be destroyed. Add ButtonComponent again
+     * to show the component again
+     * @param {string} id
+     */
+    remove(id: string): void;
+    /**
+     * adds a buttonComponent
+     * @param {ButtonComponentOptions} buttonComponentOptions
+     * @param {string|symbol} owner pluginName or vcsAppSymbol
+     * @throws {Error} if a buttonComponent with the same ID has already been added
+     * @returns {ButtonComponent}
+     */
+    add(buttonComponentOptions: ButtonComponentOptions, owner: string | symbol): ButtonComponent;
+    /**
+     * removes all buttonComponents of a specific owner and fires removed Events
+     * @param {string|vcsAppSymbol} owner
+     */
+    removeOwner(owner: string | symbol): void;
+    /**
+     * removes all buttonComponents and fires removed Events
+     */
+    clear(): void;
+    /**
+     * destroys the ButtonManager;
+     */
+    destroy(): void;
+}

package/src/manager/buttonManager.js

@@ -11,14 +11,14 @@ import { getActionFromOptions } from '../actions/actionHelper.js';
  * @param {number} weightB
  * @returns {number}
  */
-export function sortByWeight(weightA, weightB) {
+export function sortByWeight(weightA = 0, weightB = 0) {
   return weightB - weightA;
 }
 
 /**
  * @typedef ButtonComponentOptions
  * @property {string} [id] Optional ID, If not provided an uuid will be generated.
- * @property {VcsAction} action Action performed by button.
+ * @property {import("../actions/actionHelper.js").VcsAction} action Action performed by button.
  * @property {number} [weight=0] Optional weight affecting the displaying order
  */
 
@@ -26,14 +26,18 @@ export function sortByWeight(weightA, weightB) {
  * @typedef ButtonComponent
  * @property {string} id
  * @property {string|vcsAppSymbol} owner
- * @property {VcsAction} action
+ * @property {import("../actions/actionHelper.js").VcsAction} action
  * @property {number} weight
  */
 
+/**
+ * @typedef {import("../vcsUiApp.js").VcsComponentManager<ButtonComponent,ButtonComponentOptions>} IButtonManager
+ */
+
 /**
  * @class ButtonManager
  * @description Manages a set of Map Buttons
- * @implements VcsComponentManager<ButtonComponent,ButtonComponentOptions>
+ * @implements {IButtonManager}
  */
 class ButtonManager {
   constructor() {

package/src/manager/collectionManager/CollectionComponent.vue

@@ -3,11 +3,14 @@
     <v-expansion-panel-header hide-actions class="px-2">
       <template #default="{ open }">
         <div class="d-flex justify-space-between">
-          <div class="d-flex align-center">
-            <v-icon class="mr-1" :class="{ rotate: !open }">
-              mdi-chevron-down
-            </v-icon>
-            {{ $t(title) }}
+          <div class="d-flex align-center gap-1">
+            <v-icon :class="{ rotate: !open }"> mdi-chevron-down </v-icon>
+            <span>
+              {{ $t(title) }}
+            </span>
+            <span v-if="selectable && selection.length > 0">
+              {{ `(${selection.length})` }}
+            </span>
           </div>
           <VcsActionButtonList
             v-if="actions?.length > 0"
@@ -40,7 +43,7 @@
 </template>
 
 <script>
-  import { inject } from 'vue';
+  import { computed, inject } from 'vue';
   import {
     VIcon,
     VExpansionPanel,
@@ -48,14 +51,12 @@
     VExpansionPanelContent,
     VSheet,
   } from 'vuetify/lib';
-  import VcsList from '../../components/lists/VcsList.vue';
+  import VcsList, {
+    createSelectionActions,
+  } from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
-  import { vcsAppSymbol } from '../../pluginHelper.js';
-  import { WindowSlot } from '../window/windowManager.js';
-  import CollectionComponentList, {
-    moveItem,
-  } from './CollectionComponentList.vue';
+  import { moveItem } from './CollectionComponentList.vue';
 
   /**
    * @description
@@ -74,14 +75,19 @@
       VSheet,
       VIcon,
     },
-    setup() {
-      /** @type {VcsUiApp} */
-      const app = inject('vcsApp');
+    setup(_props, { emit }) {
       /**
-       * @type {CollectionComponent}
+       * @type {CollectionComponentClass}
        */
       const collectionComponent = inject('collectionComponent');
-      const windowId = `${collectionComponent.id}-list`;
+
+      const selectionActions = createSelectionActions(
+        collectionComponent.items,
+        collectionComponent.selection,
+        emit,
+      );
+
+      const actions = collectionComponent.getActions();
 
       return {
         title: collectionComponent.title,
@@ -92,31 +98,20 @@
         singleSelect: collectionComponent.singleSelect,
         overflowCount: collectionComponent.overflowCount,
         limit: collectionComponent.limit,
-        actions: collectionComponent.getActions(),
+        actions: computed(() => {
+          if (
+            collectionComponent.selectable.value &&
+            !collectionComponent.singleSelect.value
+          ) {
+            return [...selectionActions, ...actions.value];
+          }
+          return actions.value;
+        }),
         move({ item, targetIndex }) {
           moveItem(collectionComponent, item, targetIndex);
         },
         openCollectionComponentList() {
-          if (app.windowManager.has(windowId)) {
-            setTimeout(() => {
-              app.windowManager.bringWindowToTop(windowId);
-            }, 0);
-          } else {
-            app.windowManager.add(
-              {
-                id: windowId,
-                component: CollectionComponentList,
-                props: {
-                  windowId,
-                },
-                provides: {
-                  collectionComponent,
-                },
-                slot: WindowSlot.DYNAMIC_LEFT,
-              },
-              vcsAppSymbol,
-            );
-          }
+          emit('openList', collectionComponent.id);
         },
       };
     },
@@ -135,6 +130,11 @@
       .v-list-item {
         padding: 4px 8px 4px 28px;
       }
+      .v-list-item__selected {
+        border-left: solid 4px;
+        border-left-color: var(--v-primary-base);
+        padding-left: 24px !important;
+      }
     }
   }
 </style>

package/src/manager/collectionManager/CollectionComponent.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    title: any;
+    items: any;
+    selection: any;
+    draggable: any;
+    selectable: any;
+    singleSelect: any;
+    overflowCount: any;
+    limit: any;
+    actions: import("vue").ComputedRef<any>;
+    move({ item, targetIndex }: {
+        item: any;
+        targetIndex: any;
+    }): void;
+    openCollectionComponentList(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;