@vcmap/ui 5.0.1 → 5.1.0-rc.1

package/src/manager/collectionManager/CollectionComponentList.vue

@@ -1,26 +1,55 @@
 <template>
-  <vcs-list
-    :items="items"
-    :draggable="draggable"
-    :selectable="selectable"
-    :single-select="singleSelect"
-    v-model="selection"
-    :title="title"
-    @item-moved="move"
-  />
+  <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 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"
+          :actions="actions"
+          :overflow-count="overflowCount"
+        />
+      </div>
+    </div>
+    <vcs-list
+      :items="items"
+      :draggable="draggable"
+      :selectable="selectable"
+      :single-select="singleSelect"
+      v-model="selection"
+      :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) {
@@ -30,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);
     }
@@ -38,27 +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',
-    components: {
-      VcsList,
-    },
     props: {
-      windowId: {
-        type: String,
-        required: true,
+      showLessButton: {
+        type: Boolean,
+        default: true,
       },
     },
-    setup() {
+    components: {
+      VcsButton,
+      VcsActionButtonList,
+      VcsList,
+      VSheet,
+    },
+    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,
@@ -66,9 +106,23 @@
         draggable: collectionComponent.draggable,
         selectable: collectionComponent.selectable,
         singleSelect: collectionComponent.singleSelect,
+        overflowCount: collectionComponent.overflowCount,
+        limit: collectionComponent.limit,
+        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);