@vcmap/ui 5.0.2 → 5.1.0-rc.2

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -2,8 +2,13 @@
   <div>
     <div class="v-expansion-panel-header px-2 v-expansion-panel-header--active">
       <div class="d-flex justify-space-between">
-        <div class="d-flex align-center">
-          {{ $t(title) }}
+        <div class="d-flex align-center gap-1 pl-2">
+          <span>
+            {{ $t(title) }}
+          </span>
+          <span v-if="selectable && selection.length > 0">
+            {{ `(${selection.length})` }}
+          </span>
         </div>
         <VcsActionButtonList
           v-if="actions?.length > 0"
@@ -21,21 +26,30 @@
       :show-title="false"
       @item-moved="move"
     />
+    <v-sheet v-if="showLessButton" class="ma-2 pl-2">
+      <VcsButton @click="closeList">
+        {{ $t('collectionManager.less') }}
+      </VcsButton>
+    </v-sheet>
   </div>
 </template>
 
 <script>
-  import { inject } from 'vue';
+  import { computed, inject } from 'vue';
   import { IndexedCollection } from '@vcmap/core';
-  import VcsList from '../../components/lists/VcsList.vue';
+  import { VSheet } from 'vuetify/lib';
+  import VcsList, {
+    createSelectionActions,
+  } from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
+  import VcsButton from '../../components/buttons/VcsButton.vue';
 
   /**
    * Moves an item to a new position.
    * New position is derived from a target item in the collection.
    * This ensures correct movement, if rendered list is only a subset of the collection.
-   * @param {CollectionComponent} collectionComponent
-   * @param {VcsListItem} item
+   * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
+   * @param {import("../../components/lists/VcsList.vue").VcsListItem} item
    * @param {number} targetIndex
    */
   export function moveItem(collectionComponent, item, targetIndex) {
@@ -45,7 +59,7 @@
       const keyProperty = collection.uniqueKey;
       const targetItem = collectionComponent.items.value[targetIndex];
       const targetIndexCol = [...collection].findIndex(
-        (i) => i[keyProperty] === targetItem[keyProperty],
+        (i) => i[keyProperty] === targetItem.name,
       );
       collection.moveTo(collectionItem, targetIndexCol);
     }
@@ -53,28 +67,38 @@
 
   /**
    * @description
-   * Renders the items of a CollectionComponent in a List.
+   * Renders the items of a CollectionComponentClass in a List.
    * The collectionComponent must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
-   * @vue-prop {string} windowId
+   * @vue-prop {string} showLessButton - Show a `show less button` at the end of the list, which will emit a closeList event
    */
   export default {
     name: 'CollectionComponentList',
+    props: {
+      showLessButton: {
+        type: Boolean,
+        default: true,
+      },
+    },
     components: {
+      VcsButton,
       VcsActionButtonList,
       VcsList,
+      VSheet,
     },
-    props: {
-      windowId: {
-        type: String,
-        required: true,
-      },
-    },
-    setup() {
+    setup(_props, { emit }) {
       /**
-       * @type {CollectionComponent}
+       * @type {import("./collectionComponentClass.js").CollectionComponentClass}
        */
       const collectionComponent = inject('collectionComponent');
 
+      const selectionActions = createSelectionActions(
+        collectionComponent.items,
+        collectionComponent.selection,
+        emit,
+      );
+
+      const actions = collectionComponent.getActions();
+
       return {
         title: collectionComponent.title,
         items: collectionComponent.items,
@@ -84,10 +108,21 @@
         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);
         },
+        closeList() {
+          emit('closeList', collectionComponent.id);
+        },
       };
     },
   };

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

@@ -0,0 +1,38 @@
+/**
+ * Moves an item to a new position.
+ * New position is derived from a target item in the collection.
+ * This ensures correct movement, if rendered list is only a subset of the collection.
+ * @param {import("./collectionComponentClass.js").default<Object>} collectionComponent
+ * @param {import("../../components/lists/VcsList.vue").VcsListItem} item
+ * @param {number} targetIndex
+ */
+export function moveItem(collectionComponent: import("./collectionComponentClass.js").default<Object>, item: import("../../components/lists/VcsList.vue").VcsListItem, targetIndex: number): void;
+declare const _default: import("vue").DefineComponent<{
+    showLessButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    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;
+    closeList(): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    showLessButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    showLessButton: boolean;
+}>;
+export default _default;

package/src/manager/collectionManager/CollectionComponentProvider.vue

@@ -11,7 +11,8 @@
   import CollectionComponent from './CollectionComponent.vue';
 
   /**
-   * @description Provides a CollectionComponent of a CollectionManager.
+   * @description Provides a CollectionComponentClass of a CollectionManager.
+   * Default rendering of the slot is the `CollectionComponent.vue`
    * The collectionManager must be passed via {@link https://vuejs.org/api/composition-api-dependency-injection.html |provide }.
    * @vue-prop {string} componentId - ID of the collectionComponent to be provided
    * @vue-data {slot} [#default] - Slot rendering collection component.
@@ -29,7 +30,7 @@
     },
     setup(props) {
       /**
-       * @type {CollectionManager}
+       * @type {import("./collectionManager.js").CollectionManager}
        */
       const collectionManager = inject('collectionManager');
       const collectionComponent = collectionManager.get(props.componentId);

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    componentId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, void, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    componentId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/manager/collectionManager/CollectionManager.vue

@@ -3,7 +3,7 @@
     <v-expansion-panels
       accordion
       multiple
-      v-if="componentIds.length > 0"
+      v-if="!componentView && componentIds.length > 0"
       v-model="panels"
       class="rounded-0"
     >
@@ -11,8 +11,16 @@
         v-for="componentId in componentIds"
         :component-id="componentId"
         :key="componentId"
-      />
+      >
+        <collection-component @openList="openList" />
+      </collection-component-provider>
     </v-expansion-panels>
+    <collection-component-provider
+      v-if="componentView"
+      :component-id="componentView"
+    >
+      <collection-component-list @closeList="closeList" />
+    </collection-component-provider>
   </v-container>
 </template>
 
@@ -20,6 +28,8 @@
   import { computed, inject, ref } from 'vue';
   import { VExpansionPanels, VContainer } from 'vuetify/lib';
   import CollectionComponentProvider from './CollectionComponentProvider.vue';
+  import CollectionComponentList from './CollectionComponentList.vue';
+  import CollectionComponent from './CollectionComponent.vue';
 
   /**
    * @description Renders the all managed CollectionComponents of a CollectionManager.
@@ -28,16 +38,24 @@
   export default {
     name: 'CollectionManager',
     components: {
+      CollectionComponentList,
       VExpansionPanels,
       VContainer,
       CollectionComponentProvider,
+      CollectionComponent,
     },
     setup() {
+      /**
+       * @type {import("./collectionManager.js").CollectionManager}
+       */
       const collectionManager = inject('collectionManager');
       const componentIds = ref(collectionManager.componentIds);
-
       /**
-       * @type {WritableComputedRef<number[]>}
+       * @type {import("vue").Ref<string|null>}
+       */
+      const componentView = ref(null);
+      /**
+       * @type {import("vue").WritableComputedRef<number[]>}
        */
       const panels = computed({
         get() {
@@ -56,6 +74,13 @@
       return {
         componentIds,
         panels,
+        componentView,
+        openList(id) {
+          componentView.value = id;
+        },
+        closeList() {
+          componentView.value = null;
+        },
       };
     },
   };

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

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    componentIds: any;
+    panels: import("vue").WritableComputedRef<number[]>;
+    componentView: import("vue").Ref<string | null>;
+    openList(id: any): void;
+    closeList(): 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;

package/src/manager/collectionManager/categoryManager.d.ts

@@ -0,0 +1,56 @@
+export default CategoryManager;
+export type ICategoryManager = import("../../vcsUiApp.js").VcsComponentManager<import("./collectionComponentClass.js").default<Object>, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>;
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<import("./collectionComponentClass.js").default<Object>, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>} ICategoryManager
+ */
+/**
+ * Manages all requested category collections.
+ * Provides an API to add/remove collectionsComponents.
+ * @implements {ICategoryManager}
+ * @extends CollectionManager
+ */
+declare class CategoryManager extends CollectionManager implements ICategoryManager {
+    /**
+     * @param {import("../../vcsUiApp.js").default} app
+     */
+    /**
+     * @param {import("../../vcsUiApp.js").default} app
+     */
+    constructor(app: import("../../vcsUiApp.js").default);
+    /**
+     * @type {import("../../vcsUiApp.js").default}
+     * @private
+     */
+    private _app;
+    /**
+     * @type {string}
+     * @private
+     */
+    private _dynamicModuleId;
+    /**
+     * @param {Object} item
+     * @return {boolean}
+     * @private
+     */
+    private _dynamicModuleIdFilter;
+    /**
+     * @type {(() => void)[]}
+     * @private
+     */
+    private _categoryListeners;
+    /**
+     * Requests a new or existing category and adds its collection to this manager.
+     * The collectionComponent's id is always the category's name.
+     * Returns requested category and its corresponding collectionComponent.
+     * @param {import("@vcmap/core").CategoryOptions<T>} options
+     * @param {string|symbol} owner
+     * @param {import("./collectionComponentClass.js").CollectionComponentUiOptions} collectionComponentOptions
+     * @returns {Promise<{ collectionComponent: import("./collectionComponentClass.js").default<T>, category: import("@vcmap/core").Category<T> }>}
+     * @template {Object|import("@vcmap/core").VcsObject} T
+     */
+    requestCategory<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default>(options: import("@vcmap/core").CategoryOptions<T>, owner: string | symbol, collectionComponentOptions?: import("./collectionComponentClass.js").CollectionComponentUiOptions): Promise<{
+        collectionComponent: import("./collectionComponentClass.js").default<T>;
+        category: import("@vcmap/core/dist/src/category/category.js").default<T>;
+    }>;
+}
+import CollectionManager from './collectionManager.js';

package/src/manager/collectionManager/categoryManager.js

@@ -2,24 +2,28 @@ import { moduleIdSymbol } from '@vcmap/core';
 import { vcsAppSymbol } from '../../pluginHelper.js';
 import CollectionManager from './collectionManager.js';
 
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<import("./collectionComponentClass.js").default<Object>, import("./collectionComponentClass.js").CollectionComponentClassOptions<Object>>} ICategoryManager
+ */
+
 /**
  * Manages all requested category collections.
  * Provides an API to add/remove collectionsComponents.
- * @implements {VcsComponentManager<CollectionComponent, CollectionComponentOptions>}
+ * @implements {ICategoryManager}
  * @extends CollectionManager
  */
 class CategoryManager extends CollectionManager {
   /**
-   * @param {import("@vcmap/ui").VcsUiApp} app
+   * @param {import("../../vcsUiApp.js").default} app
    */
   /**
-   * @param {import("@vcmap/ui").VcsUiApp} app
+   * @param {import("../../vcsUiApp.js").default} app
    */
   constructor(app) {
     super();
 
     /**
-     * @type {import("@vcmap/ui").VcsUiApp}
+     * @type {import("../../vcsUiApp.js").default}
      * @private
      */
     this._app = app;
@@ -29,11 +33,20 @@ class CategoryManager extends CollectionManager {
      */
     this._dynamicModuleId = this._app.dynamicModuleId;
 
+    /**
+     * @param {Object} item
+     * @return {boolean}
+     * @private
+     */
     this._dynamicModuleIdFilter = (item) =>
       item[moduleIdSymbol] === this._dynamicModuleId;
 
     this.addFilterFunction(this._dynamicModuleIdFilter, vcsAppSymbol);
 
+    /**
+     * @type {(() => void)[]}
+     * @private
+     */
     this._categoryListeners = [
       this._app.dynamicModuleIdChanged.addEventListener((id) => {
         this._dynamicModuleId = id;
@@ -50,10 +63,11 @@ class CategoryManager extends CollectionManager {
    * Requests a new or existing category and adds its collection to this manager.
    * The collectionComponent's id is always the category's name.
    * Returns requested category and its corresponding collectionComponent.
-   * @param {import("@vcmap/core").CategoryOptions} options
+   * @param {import("@vcmap/core").CategoryOptions<T>} options
    * @param {string|symbol} owner
-   * @param {CollectionComponentUiOptions} collectionComponentOptions
-   * @return {{ collectionComponent:CollectionComponent,category:import("@vcmap/core").Category }}
+   * @param {import("./collectionComponentClass.js").CollectionComponentUiOptions} collectionComponentOptions
+   * @returns {Promise<{ collectionComponent: import("./collectionComponentClass.js").default<T>, category: import("@vcmap/core").Category<T> }>}
+   * @template {Object|import("@vcmap/core").VcsObject} T
    */
   async requestCategory(options, owner, collectionComponentOptions = {}) {
     const category = await this._app.categories.requestCategory(options);

package/src/manager/collectionManager/collectionComponentClass.d.ts

@@ -0,0 +1,257 @@
+export default CollectionComponentClass;
+export type CollectionComponentUiOptions = {
+    id?: string | undefined;
+    title?: string | undefined;
+    /**
+     * - only supported for IndexedCollections
+     */
+    draggable?: boolean | undefined;
+    /**
+     * - adds actions to rename items from list. Sets a default titleChanged callback on all list items, which can be overwritten in the mapping function, if necessary.
+     */
+    renamable?: boolean | undefined;
+    /**
+     * - adds actions to remove items from list. Also adds a header action to delete selected, if selectable is set to true.
+     */
+    removable?: boolean | undefined;
+    selectable?: boolean | undefined;
+    singleSelect?: boolean | undefined;
+    /**
+     * - number of header action buttons rendered until overflow
+     */
+    overflowCount?: number | undefined;
+    /**
+     * - limit number of items in rendered list (more items are rendered in extra window)
+     */
+    limit?: number | undefined;
+};
+export type CollectionComponentClassOptions<T extends Object> = CollectionComponentUiOptions & {
+    collection: import("@vcmap/core").Collection<T>;
+};
+export type CollectionComponentListItem = import("../../components/lists/VcsList.vue").VcsListItem & {
+    actions: Array<import("../../actions/actionHelper.js").VcsAction & {
+        weight?: number;
+    }>;
+    clickedCallbacks: Array<(arg0: PointerEvent) => void>;
+    destroy: () => void | undefined;
+    destroyFunctions: Array<() => void>;
+};
+/**
+ * Manages one collection and creates a mirrored items array with ListItems.
+ * Listens to all collection events and synchronizes changes to the items array.
+ * The Collection Items will be transformed and filtered with the given itemMappings and itemFilter functions
+ * @class
+ * @template {Object|import("@vcmap/core").VcsObject} T
+ */
+declare class CollectionComponentClass<T extends Object | import("@vcmap/core/dist/src/vcsObject.js").default> {
+    /**
+     * @param {CollectionComponentClassOptions<T>} options
+     * @param {string|import("../../pluginHelper.js").vcsAppSymbol} owner
+     */
+    constructor(options: CollectionComponentClassOptions<T>, owner: string | symbol);
+    /**
+     * @type {import("@vcmap/core").Collection<T>}
+     * @private
+     */
+    private _collection;
+    /**
+     * @type {string}
+     * @private
+     */
+    private _id;
+    /**
+     * @type {import("vue").Ref<string>}
+     */
+    title: import("vue").Ref<string>;
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    open: import("vue").Ref<boolean>;
+    /**
+     *
+     * @type {import("vue").Ref<number>}
+     */
+    overflowCount: import("vue").Ref<number>;
+    /**
+     *
+     * @type {import("vue").Ref<number>}
+     */
+    limit: import("vue").Ref<number>;
+    /**
+     * @type {import("vue").Ref<boolean>}
+     * @private
+     */
+    private _draggable;
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    renamable: import("vue").Ref<boolean>;
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    removable: import("vue").Ref<boolean>;
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    selectable: import("vue").Ref<boolean>;
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    singleSelect: import("vue").Ref<boolean>;
+    /**
+     * @type {string|vcsAppSymbol}
+     * @private
+     */
+    private _owner;
+    /**
+     * @type {import("vue").Ref<Array<import("./collectionManager.js").OwnedAction>>}
+     */
+    _actions: import("vue").Ref<Array<import("./collectionManager.js").OwnedAction>>;
+    /**
+     * @type {Array<import("./collectionManager.js").ItemMapping<T>>}
+     * @private
+     */
+    private _itemMappings;
+    /**
+     * @type {Array<import("./collectionManager.js").ItemFilter<T>>}
+     * @private
+     */
+    private _itemFilters;
+    /**
+     * @type {import("vue").Ref<Array<CollectionComponentListItem>>}
+     * @private
+     */
+    private _listItems;
+    /**
+     * @type {import("vue").Ref<Array<CollectionComponentListItem>>}
+     */
+    selection: import("vue").Ref<Array<CollectionComponentListItem>>;
+    _resetWatchers: import("vue").WatchStopHandle[];
+    _destroyBulkDelete: () => void;
+    _listeners: (() => void)[];
+    /**
+     * @type {string}
+     */
+    get id(): string;
+    /**
+     * @type {import("@vcmap/core").Collection<T>}
+     */
+    get collection(): import("@vcmap/core/dist/src/util/collection.js").default<T>;
+    /**
+     * @type {import("vue").Ref<Array<CollectionComponentListItem>>}
+     */
+    get items(): import("vue").Ref<CollectionComponentListItem[]>;
+    /**
+     * @param {boolean} value
+     * @deprecated
+     */
+    set draggable(arg: import("vue").Ref<boolean>);
+    /**
+     * @type {import("vue").Ref<boolean>}
+     */
+    get draggable(): import("vue").Ref<boolean>;
+    /**
+     * @type {string|import("../../pluginHelper.js").vcsAppSymbol}
+     */
+    get owner(): string | symbol;
+    /**
+     * @returns {import("vue").ComputedRef<import("../../actions/actionHelper.js").VcsAction[]>}
+     */
+    getActions(): import("vue").ComputedRef<import("../../actions/actionHelper.js").VcsAction[]>;
+    /**
+     * @private
+     */
+    private _addBulkDeleteAction;
+    /**
+     * @private
+     */
+    private _removeBulkDeleteAction;
+    /**
+     * uses the itemMappings to transform the given Item to an CollectionComponentListItem usable in the VcsList
+     * @param {T} item
+     * @returns {CollectionComponentListItem}
+     * @template T
+     * @private
+     */
+    private _transformItem;
+    /**
+     * Inserts the listItem into the list items array at the correct relative position in respect to the position of the listItem
+     * in the collection
+     * @param {CollectionComponentListItem} listItem
+     * @private
+     */
+    private _insertListItem;
+    /**
+     * synchronizes the collection items with the internal items list.
+     * @param {T} item
+     * @template T
+     * @private
+     */
+    private _handleItemAdded;
+    /**
+     * synchronizes the collection items with the internal items list by preserving previous selection
+     * @param {import("@vcmap/core").ReplacedEvent<T>} replaced
+     * @private
+     */
+    private _handleItemReplaced;
+    /**
+     * synchronizes the order of the list items with respect to the order of the items in the collection.
+     * removes and reinserts the moved item.
+     * @param {T} item
+     * @template T
+     * @private
+     */
+    private _handleItemMoved;
+    /**
+     * synchronizes the collection items with the internal list items.
+     * @param {T} item
+     * @template T
+     * @private
+     */
+    private _handleItemRemoved;
+    /**
+     * @param {T} item
+     * @template T
+     * @returns {CollectionComponentListItem|undefined}
+     */
+    getListItemForItem<T_1>(item: T_1): CollectionComponentListItem | undefined;
+    /**
+     * recreates the items array with the new Mapping Function
+     * @param {import("./collectionManager.js").ItemMapping<T>} itemMapping
+     */
+    addItemMapping(itemMapping: import("./collectionManager.js").ItemMapping<T>): void;
+    /**
+     * recreates the items array with the new Mapping Function
+     * @param {import("./collectionManager.js").ItemMapping<T>} itemMapping
+     */
+    removeItemMapping(itemMapping: import("./collectionManager.js").ItemMapping<T>): void;
+    /**
+     * recreates the items array with the new Filter Function
+     * @param {import("./collectionManager.js").ItemFilter<T>} itemFilter
+     */
+    addItemFilter(itemFilter: import("./collectionManager.js").ItemFilter<T>): void;
+    /**
+     * recreates the items array with the new Filter Function
+     * @param {import("./collectionManager.js").ItemFilter<T>} itemFilter
+     */
+    removeItemFilter(itemFilter: import("./collectionManager.js").ItemFilter<T>): void;
+    /**
+     * @param {Array<import("./collectionManager.js").OwnedAction>} ownedActions
+     */
+    addActions(ownedActions: Array<import("./collectionManager.js").OwnedAction>): void;
+    /**
+     * @param {Array<import("./collectionManager.js").OwnedAction>} ownedActions
+     */
+    removeActions(ownedActions: Array<import("./collectionManager.js").OwnedAction>): void;
+    /**
+     * removes itemMapping, itemFilter and actions of provided owner and resets all list items
+     * @param {string | symbol} owner
+     */
+    removeOwner(owner: string | symbol): void;
+    /**
+     * resets this collection component by destroying all list items and
+     * re-adding them from the collection applying current filter and mapping functions
+     */
+    reset(): void;
+    destroy(): void;
+}