@vcmap/ui 5.0.0-rc.15 → 5.0.0-rc.17

package/src/icons/WandIcon.vue

@@ -0,0 +1,63 @@
+<!-- eslint-disable max-len -->
+
+<template>
+  <svg id="icon_wizard" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g id="wand" transform="translate(1.706 1.705)">
+      <g id="Gruppe_1465" data-name="Gruppe 1465" transform="translate(0 10.491)">
+        <g id="Gruppe_1464" data-name="Gruppe 1464">
+          <path id="Pfad_540" data-name="Pfad 540" d="M1.574,22.1a.476.476,0,0,1-.367-.157L.157,20.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,1.574,22.1Z" transform="translate(0 -20)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1467" data-name="Gruppe 1467" transform="translate(1.049 1.049)">
+        <g id="Gruppe_1466" data-name="Gruppe 1466">
+          <path id="Pfad_541" data-name="Pfad 541" d="M2.525,13.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L12.648,2.157a.519.519,0,1,1,.734.734L2.892,13.382A.476.476,0,0,1,2.525,13.54Z" transform="translate(-2 -2)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1469" data-name="Gruppe 1469" transform="translate(10.491 0)">
+        <g id="Gruppe_1468" data-name="Gruppe 1468">
+          <path id="Pfad_542" data-name="Pfad 542" d="M21.574,2.1a.476.476,0,0,1-.367-.157L20.157.892a.507.507,0,0,1,0-.734.507.507,0,0,1,.734,0l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,21.574,2.1Z" transform="translate(-20 0)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1471" data-name="Gruppe 1471" transform="translate(0 0)">
+        <g id="Gruppe_1470" data-name="Gruppe 1470">
+          <path id="Pfad_543" data-name="Pfad 543" d="M.525,11.54a.476.476,0,0,1-.367-.157.507.507,0,0,1,0-.734L10.648.157a.507.507,0,0,1,.734,0,.507.507,0,0,1,0,.734L.892,11.382A.476.476,0,0,1,.525,11.54Z" transform="translate(0 0)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1473" data-name="Gruppe 1473" transform="translate(8.393 2.098)">
+        <g id="Gruppe_1472" data-name="Gruppe 1472">
+          <path id="Pfad_544" data-name="Pfad 544" d="M17.574,6.1a.476.476,0,0,1-.367-.157L16.157,4.892a.519.519,0,0,1,.734-.734l1.049,1.049a.507.507,0,0,1,0,.734A.476.476,0,0,1,17.574,6.1Z" transform="translate(-16 -4)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1475" data-name="Gruppe 1475" transform="translate(7.344 7.344)">
+        <g id="Gruppe_1474" data-name="Gruppe 1474">
+          <path id="Pfad_545" data-name="Pfad 545" d="M14.525,16.1A.5.5,0,0,1,14,15.574V14.525a.525.525,0,1,1,1.049,0v1.049A.5.5,0,0,1,14.525,16.1Z" transform="translate(-14 -14)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1477" data-name="Gruppe 1477" transform="translate(7.344)">
+        <g id="Gruppe_1476" data-name="Gruppe 1476">
+          <path id="Pfad_546" data-name="Pfad 546" d="M14.525,2.1A.5.5,0,0,1,14,1.574V.525a.525.525,0,0,1,1.049,0V1.574A.5.5,0,0,1,14.525,2.1Z" transform="translate(-14)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1479" data-name="Gruppe 1479" transform="translate(3.147 4.196)">
+        <g id="Gruppe_1478" data-name="Gruppe 1478">
+          <path id="Pfad_547" data-name="Pfad 547" d="M7.574,9.049H6.525A.525.525,0,0,1,6.525,8H7.574a.525.525,0,0,1,0,1.049Z" transform="translate(-6 -8)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1481" data-name="Gruppe 1481" transform="translate(10.491 4.196)">
+        <g id="Gruppe_1480" data-name="Gruppe 1480">
+          <path id="Pfad_548" data-name="Pfad 548" d="M21.574,9.049H20.525a.525.525,0,0,1,0-1.049h1.049a.525.525,0,1,1,0,1.049Z" transform="translate(-20 -8)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1483" data-name="Gruppe 1483" transform="translate(3.986 0.839)">
+        <g id="Gruppe_1482" data-name="Gruppe 1482">
+          <path id="Pfad_549" data-name="Pfad 549" d="M9.279,3.8a.476.476,0,0,1-.367-.157L7.757,2.492a.519.519,0,0,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.326.326,0,0,1,9.279,3.8Z" transform="translate(-7.6 -1.6)" fill="currentColor" />
+        </g>
+      </g>
+      <g id="Gruppe_1485" data-name="Gruppe 1485" transform="translate(9.599 6.452)">
+        <g id="Gruppe_1484" data-name="Gruppe 1484">
+          <path id="Pfad_550" data-name="Pfad 550" d="M19.926,14.451a.476.476,0,0,1-.367-.157l-1.1-1.1a.519.519,0,1,1,.734-.734l1.1,1.1a.507.507,0,0,1,0,.734A.567.567,0,0,1,19.926,14.451Z" transform="translate(-18.3 -12.3)" fill="currentColor" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/manager/categoryManager/CategoryComponent.vue

@@ -0,0 +1,115 @@
+<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-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>
+</template>
+
+<script>
+  import { computed, inject, ref } from 'vue';
+  import { VIcon, VContainer, VRow, VCol } from 'vuetify/lib';
+  import VcsList 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 CategoryComponentList from './CategoryComponentList.vue';
+  import { WindowSlot } from '../window/windowManager.js';
+
+  export default {
+    name: 'CategoryComponent',
+    components: {
+      VcsActionButtonList,
+      VcsList,
+      VContainer,
+      VRow,
+      VcsButton,
+      VCol,
+      VIcon,
+    },
+    props: {
+      /** @type {ManagedCategory} */
+      category: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup({ category }) {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+      const windowId = `${category.id}-category-list`;
+      const open = ref(false);
+
+      const selection = computed({
+        get() { return category.selection; },
+        set(value) {
+          // eslint-disable-next-line vue/no-mutating-props
+          category.selection = value;
+        },
+      });
+
+      return {
+        selection,
+        open,
+        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,
+              },
+              slot: WindowSlot.DYNAMIC_LEFT,
+            }, vcsAppSymbol);
+          }
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/manager/categoryManager/CategoryComponentList.vue

@@ -0,0 +1,57 @@
+<template>
+  <vcs-list
+    :items="category.items"
+    :selectable="category.selectable"
+    :single-select="category.singleSelect"
+    v-model="selection"
+    :title="category.title"
+  />
+</template>
+
+<script>
+  import { computed, inject, watch } from 'vue';
+  import VcsList from '../../components/lists/VcsList.vue';
+
+  export default {
+    name: 'CategoryComponenList',
+    components: {
+      VcsList,
+    },
+    props: {
+      category: {
+        type: Object,
+        required: true,
+      },
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup({ category, windowId }) {
+      /** @type {VcsUiApp} */
+      const app = inject('vcsApp');
+
+      const selection = computed({
+        get() { return category.selection; },
+        set(value) {
+          // eslint-disable-next-line vue/no-mutating-props
+          category.selection = value;
+        },
+      });
+
+      watch(app.categoryManager.componentIds, () => {
+        if (!app.categoryManager.get(category.id)) {
+          app.windowManager.remove(windowId);
+        }
+      });
+
+      return {
+        selection,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

package/src/manager/categoryManager/CategoryManager.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="categories.length > 0"
+  >
+    <category-component
+      v-for="category in categories"
+      :category="category"
+      :key="category.categoryName"
+    />
+  </div>
+</template>
+
+<script>
+  import { inject, ref, computed } from 'vue';
+  import CategoryComponent from './CategoryComponent.vue';
+
+  /**
+   * @description
+   * uses a VcsList and renders 'a components Window' based on the "categoryManager"
+   * Uses the provided 'vcsApp'
+   */
+  export default {
+    name: 'CategoryManager',
+    components: { CategoryComponent },
+    setup() {
+      const app = inject('vcsApp');
+      const categoryIds = ref(app.categoryManager.componentIds);
+      const categories = computed(() => categoryIds.value.map(id => app.categoryManager.get(id)));
+
+      return {
+        categories,
+      };
+    },
+  };
+</script>