@vcmap/ui 5.0.0-rc.23 → 5.0.0-rc.25

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

@@ -1,264 +0,0 @@
-<template>
-  <div>
-    <div
-      class="overflow-auto"
-    >
-      <Category
-        v-for="category in categories"
-        :key="category"
-        :category-name="category"
-      />
-    </div>
-    <hr>
-    <span>
-      <VcsButton icon="$vcsPlus" @click="newDialog = true" />
-      <VcsButton icon="$vcsExport" @click="uploadDialog = true" />
-      <VcsButton @click="addManagedCategories">Add Categories To Manager</VcsButton>
-      <VcsButton @click="addFoobar">Add Foobar</VcsButton>
-    </span>
-    <v-dialog
-      v-model="newDialog"
-    >
-      <v-card
-        class="pa-2"
-      >
-        <v-form
-          @submit.prevent="add"
-        >
-          <v-select v-model="newCategory.type" :items="['Category', 'AppBackedCategory']" />
-          <v-select
-            v-model="newCategory.collectionName"
-            v-if="newCategory.type === 'category.AppBackedCategory'"
-            :items="appBackedCollectionNames"
-            placeholder="Collection Name"
-          />
-          <v-text-field v-model="newCategory.name" v-else />
-          <v-btn type="submit">
-            Add
-          </v-btn>
-        </v-form>
-      </v-card>
-    </v-dialog>
-    <v-dialog
-      v-model="uploadDialog"
-    >
-      <v-card>
-        <v-form
-          @submit.prevent="upload"
-        >
-          <v-textarea v-model="uploadString" />
-          <v-btn type="submit">
-            Upload
-          </v-btn>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-  import { inject, ref, onUnmounted } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
-  import { GeoJSONLayer } from '@vcmap/core';
-  import {
-    VDialog,
-    VCard,
-    VForm,
-    VSelect,
-    VTextField,
-    VBtn,
-    VTextarea,
-  } from 'vuetify/lib';
-  import packageJSON from './package.json';
-  import Category from './Category.vue';
-
-  export default {
-    name: 'CategoriesComponent',
-    components: {
-      Category,
-      VcsButton,
-      VDialog,
-      VCard,
-      VForm,
-      VSelect,
-      VTextField,
-      VBtn,
-      VTextarea,
-    },
-    setup() {
-      const app = inject('vcsApp');
-      const categories = ref([...app.categories].map(c => c.name));
-      const newDialog = ref(false);
-      const uploadDialog = ref(false);
-      const uploadString = ref('');
-      const newCategory = ref({
-        name: 'new',
-        type: 'Category',
-        collectionName: null,
-      });
-      const listeners = [
-        app.categories.added.addEventListener(() => {
-          categories.value = [...app.categories].map(c => c.name);
-        }),
-        app.categories.removed.addEventListener(() => {
-          categories.value = [...app.categories].map(c => c.name);
-        }),
-      ];
-
-      onUnmounted(() => {
-        listeners.forEach((cb) => { cb(); });
-      });
-
-      return {
-        categories,
-        newDialog,
-        newCategory,
-        uploadDialog,
-        uploadString,
-        appBackedCollectionNames: [
-          'layers',
-          'maps',
-          'plugins',
-          'viewpoints',
-          'styles',
-        ],
-        async addFoobar() {
-          if (!app.categories.hasKey('foobar')) {
-            const category = await app.categories.requestCategory({
-              name: 'foobar',
-              type: 'Category',
-              title: 'Foobar',
-            });
-            app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
-            app.categoryManager.addMappingFunction(() => true, (item, c, listItem) => {
-              listItem.title = item.name;
-            }, [category.name], packageJSON.name);
-            for (let i = 0; i <= 12; i++) {
-              category.collection.add({
-                name: `foobar-${i}`,
-              });
-            }
-          }
-        },
-        async add() {
-          const { value: newCategoryValue } = newCategory;
-          if (newCategoryValue.type === 'AppBackedCategory') {
-            newCategoryValue.name = newCategoryValue.collectionName;
-          }
-          const category = await app.categories.requestCategory(newCategoryValue);
-          newCategory.value = {
-            name: 'new',
-            type: 'Category',
-            collectionName: null,
-          };
-          app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
-          newDialog.value = false;
-        },
-        async upload() {
-          try {
-            const jsonUpload = JSON.parse(uploadString.value);
-            if (!jsonUpload.name) {
-              console.error('must provide name');
-              return;
-            }
-            const category = await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
-            if (jsonUpload?.items?.length > 0) {
-              await app.categories.parseCategoryItems(jsonUpload.name, jsonUpload.items, app.dynamicModuleId);
-            }
-            app.categoryManager.add({ categoryName: category.name }, packageJSON.name);
-            uploadString.value = '';
-            uploadDialog.value = false;
-          } catch (e) {
-            console.error('not a valid JSON');
-          }
-        },
-        async addManagedCategories() {
-          if (!app.categories.hasKey('layers')) {
-            const layersCat = await app.categories.requestCategory({
-              name: 'layers',
-              type: 'Category',
-              collectionName: 'layers',
-              title: 'categories.layers',
-            });
-            const actions = [{
-              name: 'mySuperAction',
-              icon: 'mdi-plus',
-              callback: () => {
-                layersCat.collection.add(new GeoJSONLayer({
-                  features: [
-                    {
-                      type: 'Feature',
-                      properties: {},
-                      geometry: {
-                        type: 'Polygon',
-                        coordinates: [
-                          [
-                            [
-                              13.376044753386196,
-                              52.51700747314845,
-                              34.434221826595746,
-                            ],
-                            [
-                              13.375890137534464,
-                              52.51683412207231,
-                              34.43535288837092,
-                            ],
-                            [
-                              13.376141126603242,
-                              52.51641627693124,
-                              34.66410424636929,
-                            ],
-                            [
-                              13.376773170085109,
-                              52.516279904694215,
-                              34.73478984011562,
-                            ],
-                            [
-                              13.376887028670879,
-                              52.51695485856382,
-                              34.72412287410914,
-                            ],
-                            [
-                              13.376044753386196,
-                              52.51700747314845,
-                              34.434221826595746,
-                            ],
-                          ],
-                        ],
-                      },
-                    }],
-                }));
-              },
-            }];
-            app.categoryManager.add({ categoryName: layersCat.name, actions }, packageJSON.name);
-            app.categoryManager.addMappingFunction(() => true, (item, category, treeViewItem) => {
-              // eslint-disable-next-line no-console
-              const action = {
-                name: 'mySuperAction',
-                icon: '$vcsSimpleCircleFilled',
-                callback: () => {
-                  console.log(item, category, treeViewItem);
-                },
-              };
-              treeViewItem.actions.push(action);
-              const action2 = {
-                name: 'mySuperAction3',
-                icon: 'mdi-minus',
-                callback: () => {
-                  category.collection.remove(item);
-                },
-              };
-              treeViewItem.actions.push(action2);
-            }, ['layers'], packageJSON.name);
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped>
-.max-height {
-  max-height: 50%;
-}
-</style>

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

@@ -1,144 +0,0 @@
-<template>
-  <v-sheet>
-    <span class="pa-1 mb-2" @click.stop="open = !open">
-      <span class="headline">
-        {{ categoryName }}
-      </span>
-      <span class="float-right">
-        <vcs-button icon="$vcsPlus" @click="dialog = true" />
-        <vcs-button icon="mdi-download" @click="download" />
-        <a :href="downloadLink" target="_blank" ref="link" download="category.json" />
-      </span>
-    </span>
-
-
-    <v-virtual-scroll
-      item-height="44px"
-      v-if="open"
-      :height="6 * 44"
-      :items="category"
-      :bench="6"
-      width="100%"
-    >
-      <template #default="{item}">
-        <v-list-item
-          :key="item.name"
-          class="mb-1"
-        >
-          <v-list-item-content>
-            <v-list-item-title class="subtitle-1">
-              {{ item.name }}
-            </v-list-item-title>
-            <v-list-item-subtitle>{{ item.type }}</v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-      </template>
-    </v-virtual-scroll>
-    <v-dialog
-      v-model="dialog"
-    >
-      <v-card>
-        <v-form
-          @submit.prevent="addItem"
-        >
-          <v-textarea v-model="jsonString" />
-          <vcs-button type="submit">
-            Add
-          </vcs-button>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </v-sheet>
-</template>
-
-<script>
-  import { inject, nextTick, ref } from 'vue';
-  import { VcsButton } from '@vcmap/ui';
-  import { getObjectFromClassRegistry } from '@vcmap/core';
-  import {
-    VSheet,
-    VVirtualScroll,
-    VListItem,
-    VListItemContent,
-    VListItemTitle,
-    VListItemSubtitle,
-    VDialog,
-    VCard,
-    VForm,
-    VTextarea,
-  } from 'vuetify/lib';
-
-  export default {
-    name: 'CategoryComponent',
-    components: {
-      VcsButton,
-      VVirtualScroll,
-      VListItem,
-      VListItemContent,
-      VListItemTitle,
-      VListItemSubtitle,
-      VDialog,
-      VCard,
-      VForm,
-      VTextarea,
-      VSheet,
-    },
-    props: {
-      categoryName: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      const app = inject('vcsApp');
-      const categoryObject = app.categories.getByKey(props.categoryName);
-      const dialog = ref(false);
-      const jsonString = ref('{\n}');
-      const category = ref([]);
-      const downloadLink = ref('');
-      const open = ref(true);
-      const link = ref(null);
-      if (categoryObject) {
-        category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
-      }
-
-      return {
-        dialog,
-        category,
-        jsonString,
-        downloadLink,
-        open,
-        link,
-        async addItem() {
-          try {
-            const config = JSON.parse(jsonString.value);
-            if (categoryObject.classRegistryName) {
-              categoryObject.collection.add(getObjectFromClassRegistry(app[categoryObject.classRegistryName], config));
-            } else {
-              categoryObject.collection.add(config);
-            }
-            category.value = [...categoryObject.collection].map(c => ({ name: c.name, type: c.className || 'Object' }));
-            jsonString.value = '{\n}';
-          } catch (e) {
-            // eslint-disable-next-line no-console
-            console.error('invalid JSON');
-          }
-          dialog.value = false;
-        },
-        download() {
-          const stringObject = JSON.stringify(categoryObject.serializeModule(app.dynamicModuleId), null, 2);
-          downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
-          if (downloadLink.value) {
-            nextTick(() => {
-              link.value.click();
-            });
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

package/src/manager/categoryManager/CategoryComponent.vue

@@ -1,124 +0,0 @@
-<template>
-  <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"
-          />
-        </div>
-      </template>
-    </v-expansion-panel-header>
-    <v-expansion-panel-content class="pb-1">
-      <vcs-list
-        :items="category.items.slice(0, 10)"
-        :selectable="category.selectable"
-        :single-select="category.singleSelect"
-        v-model="selection"
-        :show-title="false"
-      />
-      <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, VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
-    VSheet,
-  } 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,
-      VcsButton,
-      VcsList,
-      VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
-      VSheet,
-      VIcon,
-    },
-    props: {
-      /** @type {ManagedCategory} */
-      category: {
-        type: Object,
-        required: true,
-      },
-    },
-    setup({ category }) {
-      /** @type {VcsUiApp} */
-      const app = inject('vcsApp');
-      const windowId = `${category.id}-category-list`;
-      const active = ref(false);
-
-      const selection = computed({
-        get() { return category.selection; },
-        set(value) {
-          // eslint-disable-next-line vue/no-mutating-props
-          category.selection = value;
-        },
-      });
-
-      return {
-        selection,
-        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,
-              },
-              slot: WindowSlot.DYNAMIC_LEFT,
-            }, vcsAppSymbol);
-          }
-        },
-      };
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-.rotate {
-  transform: rotate(-90deg);
-}
-</style>

package/src/manager/categoryManager/CategoryComponentList.vue

@@ -1,57 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<template>
-  <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';
-
-  /**
-   * @description
-   * uses a VcsList and renders 'a components Window' based on the "categoryManager"
-   * Uses the provided 'vcsApp'
-   */
-  export default {
-    name: 'CategoryManager',
-    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)));
-
-      return {
-        categories,
-      };
-    },
-  };
-</script>