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

package/plugins/@vcmap-show-case/category-tester/CategoriesExample.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <v-container class="pa-0">
+      <v-expansion-panels
+        accordion
+        multiple
+        v-if="componentIds.length > 0"
+        class="rounded-0"
+      >
+        <collection-component-provider
+          v-for="componentId in componentIds"
+          :component-id="componentId"
+          :key="componentId"
+        >
+          <collection-component-options />
+        </collection-component-provider>
+      </v-expansion-panels>
+    </v-container>
+    <div class="d-flex gap-2 px-2 pt-2 pb-1">
+      <div class="d-flex gap-2 w-full justify-end">
+        <VcsFormButton @click="newDialog = true" variant="filled"
+          >Request Category</VcsFormButton
+        >
+        <VcsFormButton @click="requestFoobar">Request Foobar</VcsFormButton>
+        <VcsFormButton @click="clear">Clear</VcsFormButton>
+      </div>
+    </div>
+    <v-dialog v-model="newDialog" width="200">
+      <v-card class="pa-2">
+        <v-form @submit.prevent="requestCategory">
+          <VcsTextField
+            v-model="categoryName"
+            :rules="[(value) => value !== '' || 'Please provide a name!']"
+          />
+          <VcsFormButton type="submit"> Request </VcsFormButton>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import { inject, provide, ref } from 'vue';
+  import {
+    VcsFormButton,
+    VcsTextField,
+    CollectionComponentProvider,
+  } from '@vcmap/ui';
+  import {
+    VContainer,
+    VExpansionPanels,
+    VCard,
+    VForm,
+    VDialog,
+  } from 'vuetify/lib';
+  import { name as owner } from './package.json';
+  import CollectionComponentOptions from './CollectionComponentOptions.vue';
+
+  const foobarMappingFunction = (item, c, listItem) => {
+    listItem.title = item.name;
+    listItem.actions = [{ name: 'foobar', callback: () => {} }];
+  };
+
+  export default {
+    name: 'CategoriesExample',
+    components: {
+      CollectionComponentProvider,
+      CollectionComponentOptions,
+      VcsFormButton,
+      VcsTextField,
+      VContainer,
+      VExpansionPanels,
+      VCard,
+      VForm,
+      VDialog,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      provide('collectionManager', app.categoryManager);
+      const componentIds = ref(app.categoryManager.componentIds);
+      const newDialog = ref(false);
+      const categoryName = ref('');
+
+      function requestCategory() {
+        app.categoryManager.requestCategory(
+          { name: categoryName.value },
+          owner,
+        );
+        newDialog.value = false;
+      }
+
+      function clear() {
+        app.categoryManager.clear();
+      }
+
+      async function requestFoobar() {
+        const { collectionComponent, category } =
+          await app.categoryManager.requestCategory(
+            {
+              name: 'foobar',
+              title: 'Foobar',
+            },
+            owner,
+            {
+              actions: [{ name: 'foobar', callback: () => {} }],
+              draggable: true,
+            },
+          );
+
+        app.categoryManager.addMappingFunction(
+          () => true,
+          foobarMappingFunction,
+          owner,
+          [collectionComponent.id],
+        );
+        for (let i = 0; i <= 12; i++) {
+          category.collection.add({
+            name: `foobar-${i}`,
+          });
+        }
+      }
+
+      return {
+        componentIds,
+        categoryName,
+        newDialog,
+        requestCategory,
+        requestFoobar,
+        clear,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/category-tester/CollectionComponentOptions.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <v-expansion-panel @change="active = !active">
+      <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>
+            <VcsActionButtonList
+              v-if="actions?.length > 0"
+              :actions="actions"
+            />
+          </div>
+        </template>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content class="pb-1">
+        <v-container class="py-0 px-2">
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="title" dense>
+                {{ $t('categoryTester.title') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsTextField id="title" clearable dense v-model="title" />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="draggable" dense>
+                {{ $t('categoryTester.draggable') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsCheckbox id="draggable" dense v-model="draggable" />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="selectable" dense>
+                {{ $t('categoryTester.selectable') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsCheckbox id="selectable" dense v-model="selectable" />
+            </v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col>
+              <VcsLabel html-for="singleSelect" dense>
+                {{ $t('categoryTester.singleSelect') }}
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsCheckbox id="singleSelect" dense v-model="singleSelect" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-dialog v-model="dialog" width="300">
+      <v-card class="pa-2">
+        <v-form @submit.prevent="addItem">
+          <vcs-text-area v-model="jsonString" />
+          <vcs-form-button type="submit"> Add </vcs-form-button>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import { inject, ref } from 'vue';
+  import {
+    VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VIcon,
+    VContainer,
+    VRow,
+    VCol,
+    VDialog,
+    VCard,
+    VForm,
+  } from 'vuetify/lib';
+  import {
+    VcsCheckbox,
+    VcsLabel,
+    VcsTextField,
+    VcsTextArea,
+    VcsActionButtonList,
+    VcsFormButton,
+    downloadText,
+  } from '@vcmap/ui';
+  import { getObjectFromClassRegistry } from '@vcmap/core';
+
+  /**
+   * Shows CollectionComponentOptions of a provided collectionComponent
+   */
+  export default {
+    name: 'CollectionComponent',
+    components: {
+      VcsFormButton,
+      VcsActionButtonList,
+      VcsCheckbox,
+      VcsLabel,
+      VcsTextField,
+      VcsTextArea,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VIcon,
+      VContainer,
+      VRow,
+      VCol,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      /**
+       * @type {CollectionComponent}
+       */
+      const collectionComponent = inject('collectionComponent');
+      const category = app.categories.getByKey(collectionComponent.id);
+      const active = ref(false);
+      const dialog = ref(false);
+      const jsonString = ref(JSON.stringify({ name: 'newItem' }, null, 2));
+
+      async function addItem() {
+        try {
+          const config = JSON.parse(jsonString.value);
+          if (category.classRegistryName) {
+            category.collection.add(
+              getObjectFromClassRegistry(
+                app[category.classRegistryName],
+                config,
+              ),
+            );
+          } else {
+            category.collection.add(config);
+          }
+          jsonString.value = JSON.stringify({ name: 'newItem' }, null, 2);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('invalid JSON');
+        }
+        dialog.value = false;
+      }
+
+      function download() {
+        const stringObject = JSON.stringify(
+          category.serializeModule(app.dynamicModuleId),
+          null,
+          2,
+        );
+        downloadText(stringObject, `${category.name}.json`);
+      }
+
+      const actions = [
+        {
+          name: 'add',
+          icon: '$vcsPlus',
+          callback() {
+            dialog.value = true;
+          },
+        },
+        {
+          name: 'download',
+          icon: 'mdi-download',
+          callback: download,
+        },
+      ];
+
+      return {
+        title: collectionComponent.title,
+        draggable: collectionComponent.draggable,
+        selectable: collectionComponent.selectable,
+        singleSelect: collectionComponent.singleSelect,
+        active,
+        dialog,
+        jsonString,
+        actions,
+        addItem,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .rotate {
+    transform: rotate(-90deg);
+  }
+  .v-icon {
+    font-size: 16px;
+  }
+  ::v-deep {
+    .v-list {
+      .v-list-item {
+        padding: 4px 8px 4px 28px;
+      }
+    }
+  }
+</style>

package/plugins/@vcmap-show-case/category-tester/index.js

@@ -1,6 +1,6 @@
 import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from './package.json';
-import Categories from './Categories.vue';
+import Categories from './CategoriesExample.vue';
 
 /**
  * @returns {VcsPlugin}
@@ -45,6 +45,24 @@ export default async function categoryTest() {
       );
       this._destroyAction = destroy;
     },
+    i18n: {
+      de: {
+        categoryTester: {
+          title: 'Titel',
+          draggable: 'verschiebbar',
+          selectable: 'selektierbar',
+          singleSelect: 'Einfachauswahl',
+        },
+      },
+      en: {
+        categoryTester: {
+          title: 'Title',
+          draggable: 'draggable',
+          selectable: 'selectable',
+          singleSelect: 'single select',
+        },
+      },
+    },
     destroy() {
       if (this._destroyAction) {
         this._destroyAction();

package/plugins/@vcmap-show-case/collection-manager-example/CollectionManagerExample.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <VcsFormSection heading="Collection Manager" v-if="componentIds.length > 0">
+      <CollectionManagerComponent />
+    </VcsFormSection>
+    <VcsFormSection heading="Tester Settings">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <VcsLabel html-for="selectInput" dense>
+              {{ $t('collectionManagerExample.select') }}
+            </VcsLabel>
+          </v-col>
+          <v-col>
+            <VcsSelect
+              id="selectInput"
+              :items="appCollections"
+              dense
+              v-model="selected"
+            />
+          </v-col>
+        </v-row>
+        <div class="d-flex gap-2 w-full justify-end">
+          <VcsFormButton @click="addCollection" variant="filled"
+            >Add Collection</VcsFormButton
+          >
+          <VcsFormButton @click="clear">Clear</VcsFormButton>
+        </div>
+      </v-container>
+    </VcsFormSection>
+  </div>
+</template>
+
+<script>
+  import { inject, onMounted, onUnmounted, ref } from 'vue';
+  import {
+    VcsFormSection,
+    CollectionManagerComponent,
+    VcsFormButton,
+    VcsSelect,
+    VcsLabel,
+    NotificationType,
+  } from '@vcmap/ui';
+  import { VContainer, VRow, VCol } from 'vuetify/lib';
+  import { name as owner } from './package.json';
+
+  /**
+   * a sample mapping function adding a console log to all list items
+   * @param {T} i
+   * @param {CollectionComponent} c
+   * @param {VcsListItem} l
+   */
+  const mappingFunction = (i, c, l) => {
+    l.actions = [
+      ...l.actions,
+      {
+        name: 'console.log',
+        title: 'log item, collectionComponent and listItem',
+        icon: 'mdi-printer',
+        callback: () => console.log(i, c, l),
+      },
+    ];
+  };
+
+  export default {
+    name: 'CollectionManagerExample',
+    components: {
+      VcsFormSection,
+      CollectionManagerComponent,
+      VcsFormButton,
+      VcsLabel,
+      VcsSelect,
+      VContainer,
+      VRow,
+      VCol,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const collectionManager = inject('collectionManager');
+      const componentIds = ref(collectionManager.componentIds);
+      const appCollections = [
+        'maps',
+        'layers',
+        'obliqueCollections',
+        'styles',
+        'featureInfo',
+        'plugins',
+        'viewpoints',
+      ];
+      const selected = ref(appCollections[0]);
+
+      onMounted(() => {
+        /**
+         * add general mapping function applied to all collections
+         */
+        collectionManager.addMappingFunction(
+          () => true,
+          mappingFunction,
+          owner,
+        );
+      });
+
+      onUnmounted(() => {
+        collectionManager.removeMappingFunction(mappingFunction, owner);
+      });
+
+      /**
+       * add item filter to collection of provided id
+       * @param {string} id
+       */
+      function addFilterActions(id) {
+        /**
+         * Filters all items having an 'a' within title or name
+         * @param {T} item
+         * @returns {boolean}
+         */
+        const filterFunction = (item) =>
+          item?.properties?.title?.includes('a') || item.name.includes('a');
+        collectionManager.addActions(
+          [
+            {
+              name: 'addFilter',
+              title: 'show only items including an "a" in title or name',
+              icon: 'mdi-filter-plus',
+              callback: () => {
+                collectionManager.addFilterFunction(filterFunction, owner, [
+                  id,
+                ]);
+              },
+            },
+            {
+              name: 'removeFilter',
+              title: 'remove filtering',
+              icon: 'mdi-filter-remove',
+              callback: () => {
+                collectionManager.removeFilterFunction(filterFunction, owner);
+              },
+            },
+          ],
+          owner,
+          [id],
+        );
+      }
+
+      /**
+       * add new collection to manager
+       */
+      function addCollection() {
+        if (!collectionManager.has(selected.value)) {
+          collectionManager.add(
+            {
+              id: selected.value,
+              title: selected.value,
+              collection: app[selected.value],
+            },
+            owner,
+          );
+          addFilterActions(selected.value);
+        } else {
+          app.notifier.add({
+            message: 'collectionManagerExample.addFailed',
+            type: NotificationType.ERROR,
+          });
+        }
+      }
+
+      function clear() {
+        collectionManager.clear();
+      }
+
+      return {
+        componentIds,
+        appCollections,
+        selected,
+        addCollection,
+        clear,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/collection-manager-example/README.md

@@ -0,0 +1,3 @@
+# Collection Manager Tester
+
+This is a show-case plugin demonstrating the usage of [Collection Manager](../../../documentation/COLLECTIONS.md).

package/plugins/@vcmap-show-case/collection-manager-example/index.js

@@ -0,0 +1,74 @@
+import {
+  ButtonLocation,
+  createToggleAction,
+  WindowSlot,
+  CollectionManager,
+} from '@vcmap/ui';
+import packageJSON from './package.json';
+import CollectionManagerExample from './CollectionManagerExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function collectionManagerExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    initialize(app) {
+      const collectionManager = new CollectionManager(app);
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Collection Manager Tester',
+          title: 'Collection Manager Tester',
+          icon: '$vcsPen',
+        },
+        {
+          id: 'collection-editor',
+          component: CollectionManagerExample,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Collection Manager Tester',
+            headerIcon: '$vcsPen',
+          },
+          position: {
+            width: 500,
+          },
+          provides: {
+            collectionManager,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'collection-editor', action },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+      this._destroyAction = destroy;
+    },
+    i18n: {
+      de: {
+        select: 'Collection',
+        addFailed: 'Die gewählte Collection wurde bereits hinzugefügt!',
+      },
+      en: {
+        select: 'Collection',
+        addFailed: 'The selected collection is already added!',
+      },
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/collection-manager-example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/collection-manager-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0"
+}

package/plugins/@vcmap-show-case/form-inputs-example/FormInputsExample.vue

@@ -18,19 +18,18 @@
       <template #default v-if="showSection">
         <v-container class="py-0 px-1">
           <v-row no-gutters>
-            <v-col>
+            <v-col class="w-max-half">
               <VcsLabel html-for="selectInput" :dense="dense">
                 {{ $t('form-inputs-example.select') }}
               </VcsLabel>
             </v-col>
-            <v-col>
+            <v-col class="w-max-half">
               <VcsSelect
                 id="selectInput"
                 :items="selectOptions"
                 :dense="dense"
                 :rules="[(v) => v !== 'D' || 'D is not allowed']"
                 v-model="state.selected"
-                color="purple"
               />
             </v-col>
           </v-row>
@@ -161,6 +160,22 @@
               />
             </v-col>
           </v-row>
+          <v-row no-gutters class="align-center">
+            <v-col>
+              <VcsLabel html-for="sliderInput" :dense="dense">
+                Slider
+              </VcsLabel>
+            </v-col>
+            <v-col>
+              <VcsSlider
+                id="sliderInput"
+                :dense="dense"
+                type="number"
+                step="1"
+                v-model.number="state.numberInput"
+              />
+            </v-col>
+          </v-row>
           <v-row no-gutters>
             <v-col>
               <VcsLabel html-for="formattedNumber" :dense="dense">
@@ -355,6 +370,7 @@
     VcsLabel,
     VcsTextArea,
     VcsDatePicker,
+    VcsSlider,
   } from '@vcmap/ui';
   import { VCol, VContainer, VForm, VRow } from 'vuetify/lib';
   import packageJSON from './package.json';
@@ -377,6 +393,7 @@
       VCol,
       VContainer,
       VcsDatePicker,
+      VcsSlider,
     },
     props: {
       actions: {