@vcmap/ui 5.0.0-rc.22 → 5.0.0-rc.24

package/src/legend/vcsLegend.vue

@@ -1,7 +1,5 @@
 <template>
-  <v-sheet
-    class="overflow-y-auto"
-  >
+  <v-sheet class="overflow-y-auto">
     <v-expansion-panels
       accordion
       multiple
@@ -10,7 +8,7 @@
       class="rounded-0"
     >
       <v-expansion-panel
-        v-for="(entry,i) in entries"
+        v-for="(entry, i) in entries"
         :key="i"
         class="px-2"
         @change="entry.open = !entry.open"
@@ -19,7 +17,7 @@
           <template #default="{ open }">
             <div class="d-flex justify-space-between">
               <div class="d-flex align-center">
-                <v-icon class="mr-1" :class="{ 'rotate': !open }">
+                <v-icon class="mr-1" :class="{ rotate: !open }">
                   mdi-chevron-down
                 </v-icon>
                 {{ $t(entry.title) }}
@@ -36,14 +34,14 @@
                   :src="$t(item.src)"
                   class="legend-image"
                   :title="item.tooltip"
-                >
+                />
               </div>
               <div v-else-if="item.type === LegendType.Iframe">
                 <iframe
                   :id="`legendIframe${idx}`"
                   :src="$t(item.src)"
                   scrolling="no"
-                  style="width: 100%; height: 100%;"
+                  style="width: 100%; height: 100%"
                   frameBorder="0"
                   @load="setIframeHeight(`legendIframe${idx}`)"
                 />
@@ -61,7 +59,6 @@
 </template>
 
 <script>
-
   import {
     VExpansionPanels,
     VExpansionPanel,
@@ -115,8 +112,9 @@
        * @type {import("vue").ComputedRef<number[]>}
        */
       const panels = computed(() => {
-        return [...Array(props.entries.length).keys()]
-          .filter((p, idx) => !!props.entries[idx].open);
+        return [...Array(props.entries.length).keys()].filter(
+          (p, idx) => !!props.entries[idx].open,
+        );
       });
 
       return {
@@ -129,11 +127,11 @@
 </script>
 
 <style lang="scss" scoped>
-.legend-image {
-  max-width: 100%;
-  height: auto;
-}
-.rotate {
-  transform: rotate(-90deg);
-}
+  .legend-image {
+    max-width: 100%;
+    height: auto;
+  }
+  .rotate {
+    transform: rotate(-90deg);
+  }
 </style>

package/src/manager/buttonManager.js

@@ -45,7 +45,6 @@ class ButtonManager {
     this._buttonComponents = new Map();
   }
 
-
   /**
    * @param {string} id
    * @returns {ButtonComponent}
@@ -91,7 +90,9 @@ class ButtonManager {
     check(owner, [String, vcsAppSymbol]);
 
     if (buttonComponentOptions.id && this.has(buttonComponentOptions.id)) {
-      throw new Error(`A button with id ${buttonComponentOptions.id} has already been registered.`);
+      throw new Error(
+        `A button with id ${buttonComponentOptions.id} has already been registered.`,
+      );
     }
     const id = buttonComponentOptions.id || uuidv4();
 
@@ -134,7 +135,9 @@ class ButtonManager {
    */
   clear() {
     const componentIds = [...this.componentIds];
-    componentIds.forEach((id) => { this.remove(id); });
+    componentIds.forEach((id) => {
+      this.remove(id);
+    });
   }
 
   /**

package/src/manager/categoryManager/CategoryComponent.vue

@@ -1,48 +1,55 @@
 <template>
-  <v-container>
-    <v-row @click="open = !open" class="px-2 py-1 cursor-pointer">
-      <span>
-        <v-icon v-if="open">mdi-chevron-up</v-icon>
-        <v-icon v-else>mdi-chevron-down</v-icon>
-      </span>
-      <span class="flex-grow-1 flex-shrink-1">{{ $t(category.title) }}</span>
-      <vcs-action-button-list
-        v-if="category.actions?.length > 0"
-        :actions="category.actions"
-        small
-      />
-    </v-row>
-    <template v-if="open">
-      <v-row>
-        <v-col class="pa-0">
-          <vcs-list
-            :items="category.items.slice(0, 10)"
-            :selectable="category.selectable"
-            :single-select="category.singleSelect"
-            v-model="selection"
-            :show-title="false"
+  <v-expansion-panel class="px-2" @change="active = !active">
+    <v-expansion-panel-header hide-actions>
+      <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(category.title) }}
+          </div>
+          <VcsActionButtonList
+            v-if="category.actions?.length > 0"
+            :actions="category.actions"
+            small
+            class="float-end"
           />
-        </v-col>
-      </v-row>
-      <v-row v-if="category.items.length > 10">
-        <v-col class="pa-0">
-          <VcsButton @click="openCategoryItemWindow" class="pa-2" small>
-            {{ $t('categoryManager.more') }}
-          </VcsButton>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="category.items.length === 0">
-        <v-col class="pa-2">
-          {{ $t('categoryManager.empty') }}
-        </v-col>
-      </v-row>
-    </template>
-  </v-container>
+        </div>
+      </template>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content class="pb-1">
+      <vcs-list
+        :items="category.items.slice(0, 10)"
+        :draggable="category.draggable"
+        :selectable="category.selectable"
+        :single-select="category.singleSelect"
+        v-model="selection"
+        :show-title="false"
+        @itemMoved="move"
+      />
+      <v-sheet v-if="category.items.length > 10" class="ma-2 pl-2">
+        <VcsButton @click="openCategoryItemWindow" small>
+          {{ $t('categoryManager.more') }}
+        </VcsButton>
+      </v-sheet>
+      <v-sheet v-else-if="category.items.length === 0" class="ma-2 pl-2">
+        {{ $t('categoryManager.empty') }}
+      </v-sheet>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
 </template>
 
 <script>
   import { computed, inject, ref } from 'vue';
-  import { VIcon, VContainer, VRow, VCol } from 'vuetify/lib';
+  import {
+    VIcon,
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VSheet,
+  } from 'vuetify/lib';
+  import { IndexedCollection } from '@vcmap/core';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
@@ -54,55 +61,82 @@
     name: 'CategoryComponent',
     components: {
       VcsActionButtonList,
-      VcsList,
-      VContainer,
-      VRow,
       VcsButton,
-      VCol,
+      VcsList,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VSheet,
       VIcon,
     },
     props: {
-      /** @type {ManagedCategory} */
       category: {
         type: Object,
         required: true,
       },
     },
-    setup({ category }) {
+    setup(props) {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
-      const windowId = `${category.id}-category-list`;
-      const open = ref(false);
+      const windowId = `${props.category.id}-category-list`;
+      const active = ref(false);
 
       const selection = computed({
-        get() { return category.selection; },
+        get() {
+          return props.category.selection;
+        },
         set(value) {
           // eslint-disable-next-line vue/no-mutating-props
-          category.selection = value;
+          props.category.selection = value;
         },
       });
 
+      const { collection } = app.categories.getByKey(
+        props.category.categoryName,
+      );
+      /**
+       * index of the first item within the collection
+       * @type {ComputedRef<number>}
+       */
+      const collectionItemOffset = computed(() => {
+        return [...collection].findIndex(
+          (i) => i[collection.uniqueKey] === props.category.items[0]?.id,
+        );
+      });
+
       return {
         selection,
-        open,
+        active,
         openCategoryItemWindow() {
           if (app.windowManager.has(windowId)) {
             setTimeout(() => {
               app.windowManager.bringWindowToTop(windowId);
             }, 0);
           } else {
-            app.windowManager.add({
-              id: windowId,
-              component: CategoryComponentList,
-              props: {
-                category,
-                windowId,
-              },
-              provides: {
-                selection,
+            app.windowManager.add(
+              {
+                id: windowId,
+                component: CategoryComponentList,
+                props: {
+                  category: props.category,
+                  windowId,
+                },
+                provides: {
+                  selection,
+                },
+                slot: WindowSlot.DYNAMIC_LEFT,
               },
-              slot: WindowSlot.DYNAMIC_LEFT,
-            }, vcsAppSymbol);
+              vcsAppSymbol,
+            );
+          }
+        },
+        move({ item, targetIndex }) {
+          if (collection instanceof IndexedCollection) {
+            const collectionItem = collection.getByKey(item.id);
+            collection.moveTo(
+              collectionItem,
+              targetIndex + collectionItemOffset.value,
+            );
           }
         },
       };
@@ -110,6 +144,8 @@
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .rotate {
+    transform: rotate(-90deg);
+  }
 </style>

package/src/manager/categoryManager/CategoryComponentList.vue

@@ -1,15 +1,18 @@
 <template>
   <vcs-list
     :items="category.items"
+    :draggable="category.draggable"
     :selectable="category.selectable"
     :single-select="category.singleSelect"
     v-model="selection"
     :title="category.title"
+    @item-moved="move"
   />
 </template>
 
 <script>
   import { computed, inject, watch } from 'vue';
+  import { IndexedCollection } from '@vcmap/core';
   import VcsList from '../../components/lists/VcsList.vue';
 
   export default {
@@ -27,31 +30,53 @@
         required: true,
       },
     },
-    setup({ category, windowId }) {
+    setup(props) {
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
 
       const selection = computed({
-        get() { return category.selection; },
+        get() {
+          return props.category.selection;
+        },
         set(value) {
           // eslint-disable-next-line vue/no-mutating-props
-          category.selection = value;
+          props.category.selection = value;
         },
       });
 
       watch(app.categoryManager.componentIds, () => {
-        if (!app.categoryManager.get(category.id)) {
-          app.windowManager.remove(windowId);
+        if (!app.categoryManager.get(props.category.id)) {
+          app.windowManager.remove(props.windowId);
         }
       });
 
+      const { collection } = app.categories.getByKey(
+        props.category.categoryName,
+      );
+      /**
+       * index of the first item within the collection
+       * @type {ComputedRef<number>}
+       */
+      const collectionItemOffset = computed(() => {
+        return [...collection].findIndex(
+          (i) => i[collection.uniqueKey] === props.category.items[0]?.id,
+        );
+      });
+
       return {
         selection,
+        move({ item, targetIndex }) {
+          if (collection instanceof IndexedCollection) {
+            const collectionItem = collection.getByKey(item.id);
+            collection.moveTo(
+              collectionItem,
+              targetIndex + collectionItemOffset.value,
+            );
+          }
+        },
       };
     },
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/manager/categoryManager/CategoryManager.vue

@@ -1,17 +1,23 @@
 <template>
-  <div
-    v-if="categories.length > 0"
-  >
-    <category-component
-      v-for="category in categories"
-      :category="category"
-      :key="category.categoryName"
-    />
-  </div>
+  <v-sheet>
+    <v-expansion-panels
+      accordion
+      multiple
+      v-if="categories.length > 0"
+      class="rounded-0"
+    >
+      <category-component
+        v-for="category in categories"
+        :category="category"
+        :key="category.categoryName"
+      />
+    </v-expansion-panels>
+  </v-sheet>
 </template>
 
 <script>
   import { inject, ref, computed } from 'vue';
+  import { VExpansionPanels, VSheet } from 'vuetify/lib';
   import CategoryComponent from './CategoryComponent.vue';
 
   /**
@@ -21,11 +27,17 @@
    */
   export default {
     name: 'CategoryManager',
-    components: { CategoryComponent },
+    components: {
+      VExpansionPanels,
+      VSheet,
+      CategoryComponent,
+    },
     setup() {
       const app = inject('vcsApp');
       const categoryIds = ref(app.categoryManager.componentIds);
-      const categories = computed(() => categoryIds.value.map(id => app.categoryManager.get(id)));
+      const categories = computed(() =>
+        categoryIds.value.map((id) => app.categoryManager.get(id)),
+      );
 
       return {
         categories,