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

package/plugins/categoryTest/Categories.vue

@@ -13,9 +13,9 @@
     <span>
       <VcsButton icon="$vcsPlus" @click="newDialog = true" />
       <VcsButton icon="$vcsExport" @click="uploadDialog = true" />
-      <VcsButton @click="addManagedCategories"> Add Categories To Manager </VcsButton>
+      <VcsButton @click="addManagedCategories">Add Categories To Manager</VcsButton>
+      <VcsButton @click="addFoobar">Add Foobar</VcsButton>
     </span>
-
     <v-dialog
       v-model="newDialog"
     >
@@ -121,17 +121,36 @@
           '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 }, '@vcmap/categoryTest');
+            app.categoryManager.addMappingFunction(() => true, (item, c, listItem) => {
+              listItem.title = item.name;
+            }, [category.name], '@vcmap/categoryTest');
+            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;
           }
-          await app.categories.requestCategory(newCategoryValue);
+          const category = await app.categories.requestCategory(newCategoryValue);
           newCategory.value = {
             name: 'new',
-            type: 'category.Category',
+            type: 'Category',
             collectionName: null,
           };
+          app.categoryManager.add({ categoryName: category.name }, '@vcmap/categoryTest');
           newDialog.value = false;
         },
         async upload() {
@@ -141,10 +160,11 @@
               console.error('must provide name');
               return;
             }
-            await app.categories.requestCategory({ name: jsonUpload.name, type: 'Category' });
+            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.dynamicContextId);
             }
+            app.categoryManager.add({ categoryName: category.name }, '@vcmap/categoryTest');
             uploadString.value = '';
             uploadDialog.value = false;
           } catch (e) {
@@ -209,10 +229,8 @@
                 }));
               },
             }];
-            app.categoryManager.addCategory(layersCat.name, '@vcmap/categoryTest', actions);
-            app.categoryManager.addMappingFunction((item, category) => {
-              return category.name === 'layers';
-            }, (item, category, treeViewItem) => {
+            app.categoryManager.add({ categoryName: layersCat.name, actions }, '@vcmap/categoryTest');
+            app.categoryManager.addMappingFunction(() => true, (item, category, treeViewItem) => {
               // eslint-disable-next-line no-console
               const action = {
                 name: 'mySuperAction',
@@ -222,10 +240,6 @@
                 },
               };
               treeViewItem.actions.push(action);
-              treeViewItem.clickable = true;
-              treeViewItem.clicked = () => {
-                if (!item.active) item.activate(); else item.deactivate();
-              };
               const action2 = {
                 name: 'mySuperAction3',
                 icon: 'mdi-minus',

package/plugins/categoryTest/Category.vue

@@ -65,6 +65,8 @@
     VCard,
     VForm,
     VTextarea,
+    VSheet,
+    VBtn,
   } from 'vuetify/lib';
 
   export default {
@@ -80,6 +82,8 @@
       VCard,
       VForm,
       VTextarea,
+      VSheet,
+      VBtn,
     },
     props: {
       categoryName: {
@@ -95,6 +99,7 @@
       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' }));
       }
@@ -105,6 +110,7 @@
         jsonString,
         downloadLink,
         open,
+        link,
         async addItem() {
           try {
             const config = JSON.parse(jsonString.value);
@@ -126,7 +132,7 @@
           downloadLink.value = `data:text/json;charset=utf-8,${encodeURIComponent(stringObject)}`;
           if (downloadLink.value) {
             nextTick(() => {
-              this.$refs.link.click();
+              link.value.click();
             });
           }
         },

package/plugins/categoryTest/index.js

@@ -7,7 +7,7 @@ import Categories from './Categories.vue';
 export default async function categoryTest() {
   return {
     name: '@vcmap/categoryTest',
-    onVcsAppMounted(app) {
+    initialize(app) {
       const { action, destroy } = createToggleAction(
         {
           name: 'Category Editor',

package/plugins/notifier/index.js

@@ -0,0 +1,31 @@
+import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import component from './notifierTester.vue';
+
+export default function createNotifierPlugin() {
+  return {
+    name: 'notifier',
+    initialize(vcsApp) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Notifier',
+        },
+        {
+          id: 'notifier-editor',
+          state: {
+            headerTitle: 'Notifier Editor',
+          },
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+        },
+        vcsApp.windowManager,
+        'notifier',
+      );
+      vcsApp.navbarManager.add(
+        { id: 'notifier', action },
+        'notifier',
+        ButtonLocation.TOOL,
+      );
+      this.destroy = destroy;
+    },
+  };
+}

package/plugins/notifier/notifierTester.vue

@@ -0,0 +1,88 @@
+<template>
+  <v-sheet>
+    <v-text-field
+      v-model="message"
+      label="Message"
+    />
+    <v-text-field
+      v-model.number=timeout
+      label="Timeout"
+    />
+    <VcsCheckbox
+      v-model="hasTimeout"
+      label="Toggle Timeout"
+    />
+    <v-list>
+      <v-list-item
+        v-for="type in types"
+        :key="type"
+      >
+        {{ type }}
+        <v-list-item-action @click="notify(type)">
+          <v-icon>mdi-plus</v-icon>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-divider />
+    <v-card>
+      Current number of notifications: {{ notifications.length }}
+    </v-card>
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet, VList, VListItem, VListItemAction, VTextField, VIcon, VCard, VDivider } from 'vuetify/lib';
+  import { NotificationType, VcsCheckbox } from '@vcmap/ui';
+  import { computed, inject, ref } from 'vue';
+
+  export default {
+    name: 'NotifierTester',
+    components: {
+      VSheet,
+      VList,
+      VListItem,
+      VListItemAction,
+      VTextField,
+      VIcon,
+      VCard,
+      VDivider,
+      VcsCheckbox,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const message = ref('Message');
+      const timeout = ref(5000);
+
+      return {
+        types: NotificationType,
+        message,
+        notify(type) {
+          app.notifier.add({
+            type,
+            message: message.value,
+            timeout: timeout.value,
+          });
+        },
+        notifications: app.notifier.notifications,
+        timeout,
+        hasTimeout: computed({
+          get() {
+            return timeout.value === -1;
+          },
+          set(value) {
+            if (value && timeout.value !== -1) {
+              timeout.value = -1;
+            } else if (timeout.value === -1) {
+              timeout.value = 5000;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>
+

package/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@vcmap/hello-world": "^1.0.0",
+    "@vcmap/hello-world": "^1.0.7",
     "@vcmap/print": "^1.0.1"
   }
 }

package/plugins/test/allIconsComponent.vue

@@ -27,14 +27,14 @@
 
   export default {
     name: 'AllIconsComponent',
-    components: [
+    components: {
       VSheet,
       VList,
       VListItem,
       VListItemIcon,
       VIcon,
       VListItemTitle,
-    ],
+    },
     computed: {
       icons() {
         return Object.keys(Icons).map(n => `$${n}`);
@@ -44,7 +44,7 @@
 </script>
 
 <style scoped>
-.icons-window {
-  max-height: 600px;
-}
+/*.icons-window {*/
+/*  max-height: 600px;*/
+/*}*/
 </style>

package/plugins/test/emptyComponent.vue

@@ -11,6 +11,6 @@
 
   export default {
     name: 'EmptyComponent',
-    components: [VSheet],
+    components: { VSheet },
   };
 </script>

package/plugins/test/index.js

@@ -7,6 +7,7 @@ import { toolboxData } from './toolbox-data.js';
 import editor from './editor.vue';
 import windowManagerExample from './windowManagerExample.vue';
 import AllIconsComponent from './allIconsComponent.vue';
+import TestList from './testList.vue';
 
 let source;
 
@@ -72,7 +73,7 @@ export default async function () {
         app.windowManager,
         '@vcmap/test',
       );
-      const { action: clipboardDialogAction, destroy: destroryClipboardDialogAction } = createModalAction(
+      const { action: clipboardDialogAction, destroy: destroyClipboardDialogAction } = createModalAction(
         {
           name: 'Create Link',
         },
@@ -85,7 +86,9 @@ export default async function () {
               };
             },
             async created() {
-              this.url = setStateToUrl(await app.getState(true)).toString();
+              const url = new URL(window.location.href);
+              setStateToUrl(await app.getState(true), url);
+              this.url = url.toString();
             },
           },
           position: {
@@ -94,6 +97,21 @@ export default async function () {
             right: '8%',
           },
         },
+        app,
+        '@vcmap/test',
+      );
+      const { action: listAction, destroy: destroyList } = createToggleAction(
+        {
+          name: 'TestList',
+        },
+        {
+          id: 'testList',
+          state: {
+            headerTitle: 'Test List',
+          },
+          slot: WindowSlot.DYNAMIC_LEFT,
+          component: TestList,
+        },
         app.windowManager,
         '@vcmap/test',
       );
@@ -101,7 +119,8 @@ export default async function () {
         destroyConfigEditorAction,
         destroyWindowAction,
         destroyIconAction,
-        destroryClipboardDialogAction,
+        destroyClipboardDialogAction,
+        destroyList,
       ];
       const alertAction = {
         name: 'VC Systems',
@@ -130,6 +149,11 @@ export default async function () {
         '@vcmap/test',
         ButtonLocation.TOOL,
       );
+      app.navbarManager.add(
+        { id: 'list', action: listAction },
+        '@vcmap/test',
+        ButtonLocation.TOOL,
+      );
       app.navbarManager.add(
         {
           id: 'createLink',

package/plugins/test/myCustomHeader.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing </span>
+    <div>
+      Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing. </span>
+    </div>
+    <div>And here is '<b>{{ sample }}</b>' passed through</div>
   </div>
 </template>
 
@@ -8,6 +11,11 @@
 
   export default {
     name: 'MyCustomHeader',
+    props: {
+      sample: {
+        type: String,
+      },
+    },
     setup(props, { emit }) {
       return {
         clicked: () => {

package/plugins/test/testList.vue

@@ -0,0 +1,290 @@
+<template>
+  <v-sheet>
+    <v-sheet class="pa-2">
+      <v-switch
+        v-model="selectable"
+        label="Selectable"
+      />
+      <v-switch
+        :disabled="!selectable"
+        v-model="selectSingle"
+        label=" Single Select"
+      />
+      <v-switch
+        v-model="searchable"
+        label="Searchable"
+      />
+      <v-dialog
+        v-model="dialog"
+        width="400"
+      >
+        <template #activator="{ on }">
+          <vcs-button v-on="on">
+            Add An item
+          </vcs-button>
+        </template>
+        <v-card class="pa-2">
+          <v-form
+            @submit.prevent="add"
+          >
+            <vcs-text-field
+              v-model="newItem.name"
+              label="Name"
+              :rules="required"
+            />
+            <vcs-text-field
+              v-model="newItem.title"
+              label="Title"
+              :rules="required"
+            />
+            <v-switch label="visible" v-model="newItem.visible" />
+            <v-switch label="disabled" v-model="newItem.disabled" />
+            <v-switch label="random icon" v-model="newItem.icon" />
+            <v-switch label="console.log action" v-model="newItem.action" />
+            <v-switch label="console.log on clicked" v-model="newItem.clicked" />
+            <v-switch label="console.log selected state" v-model="newItem.selected" />
+            <vcs-button
+              type="submit"
+            >
+              Add
+            </vcs-button>
+          </v-form>
+        </v-card>
+      </v-dialog>
+      <v-divider class="ma-2" />
+      <v-switch
+        v-model="showTitle"
+        label="Show Title"
+      />
+      <vcs-text-field v-model="title" placeholder="Title" />
+      <v-switch
+        v-model="titleActions"
+        label="Title Actions"
+      />
+      <v-switch
+        v-model="titleIcon"
+        label="Title Icon"
+      />
+      <v-divider class="ma-2" />
+      <template v-if="selectable">
+        <vcs-button
+          @click="selected = []"
+        >
+          Clear Selection
+        </vcs-button>
+        <v-switch v-model="showSelection" label="Show Selection" />
+        <ul v-if="showSelection">
+          <li
+            v-for="(i, index) in selected"
+            :key="`item-${index}`"
+          >
+            {{ i.title }}
+          </li>
+        </ul>
+      </template>
+      <v-divider class="ma-2" />
+    </v-sheet>
+
+    <vcs-list
+      :items="items"
+      :selectable="selectable"
+      :single-select="selectSingle"
+      :searchable="searchable"
+      :show-title="showTitle"
+      :icon="titleIconSrc"
+      :actions="titleActionsArray"
+      :title="title"
+      v-model="selected"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { VcsList, VcsButton, VcsTextField, Icons } from '@vcmap/ui';
+  import {
+    VSwitch,
+    VDivider,
+    VSheet,
+    VDialog,
+    VCard,
+    VForm,
+  } from 'vuetify/lib';
+  import { computed, ref } from 'vue';
+
+  function getRandomIcon() {
+    const keys = Object.keys(Icons);
+    const index = Math.floor(keys.length * Math.random());
+    return `$${keys[index]}`;
+  }
+
+  const defaultItems = [
+    {
+      name: 'foo',
+      title: 'Foo',
+      tooltip: 'this is the foo',
+      icon: 'mdi-pen',
+      selectionChanged: value => console.log('changed cb foo', value),
+    },
+    {
+      name: 'bar',
+      title: 'Bar',
+      tooltip: 'just a bar',
+      actions: [
+        {
+          name: 'console.log',
+          callback() {
+            console.log('bar action');
+          },
+        },
+      ],
+      selectionChanged: value => console.log('changed cb bar', value),
+    },
+    {
+      name: 'baz',
+      title: 'Baz',
+      tooltip: 'special baz',
+      selectionChanged: value => console.log('bchanged cb baz', value),
+    },
+  ];
+
+  export default {
+    name: 'TestList',
+    components: {
+      VcsList,
+      VcsButton,
+      VcsTextField,
+      VSwitch,
+      VDivider,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const selectable = ref(true);
+      const searchable = ref(true);
+      const selectSingle = ref(false);
+      const showSelection = ref(false);
+      const showTitle = ref(true);
+      const title = ref('Title');
+      const titleActionsArray = ref([]);
+      const titleIconSrc = ref(null);
+      const selected = ref([]);
+      const items = ref(defaultItems);
+      const newItem = ref({
+        name: 'foo',
+        title: 'foo',
+        disabled: false,
+        visible: true,
+        icon: false,
+        action: false,
+        clicked: false,
+        selected: false,
+      });
+      const dialog = ref(false);
+
+      return {
+        selectable,
+        searchable,
+        selectSingle,
+        selected,
+        showSelection,
+        showTitle,
+        title,
+        titleActionsArray,
+        titleIconSrc,
+        items,
+        newItem,
+        dialog,
+        required: [
+          v => !!v || 'Input may not be null',
+          v => v.length > 0 || 'Input must have a length',
+        ],
+        add() {
+          const item = {
+            name: newItem.value.name,
+            title: newItem.value.title,
+            disabled: newItem.value.disabled,
+            visible: newItem.value.visible,
+          };
+
+          if (newItem.value.icon) {
+            item.icon = getRandomIcon();
+          }
+
+          if (newItem.value.action) {
+            item.actions = [
+              {
+                name: 'console.log',
+                callback() {
+                  console.log('hi, i\'m: ', item.name);
+                },
+              },
+            ];
+          }
+
+          if (newItem.value.clicked) {
+            item.clicked = () => {
+              console.log(`${item.name} just got clicked`);
+            };
+          }
+
+          if (newItem.value.selected) {
+            item.selectionChanged = (selected) => {
+              if (selected) {
+                console.log(`${item.name} is selected`);
+              } else {
+                console.log(`${item.name} is no longer selected`);
+              }
+            };
+          }
+          items.value.push(item);
+          newItem.value = {
+            name: 'foo',
+            title: 'foo',
+            disabled: false,
+            visible: true,
+            icon: false,
+            action: false,
+            clicked: false,
+            selected: false,
+          };
+          dialog.value = false;
+        },
+        titleActions: computed({
+          get() {
+            return titleActionsArray.value.length > 0;
+          },
+          set(value) {
+            if (value) {
+              titleActionsArray.value = [{
+                name: 'console.log foo',
+                callback() {
+                  console.log('foo');
+                },
+              }];
+            } else {
+              titleActionsArray.value = [];
+            }
+          },
+        }),
+        titleIcon: computed({
+          get() {
+            return !!titleIconSrc.value;
+          },
+          set(value) {
+            if (value) {
+              titleIconSrc.value = getRandomIcon();
+            } else {
+              titleIconSrc.value = null;
+            }
+          },
+        }),
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/plugins/test/vcsContent.vue

@@ -18,7 +18,7 @@
 
   export default {
     name: 'VcsContent',
-    components: [VSheet],
+    components: { VSheet },
     setup() {
       return { };
     },