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

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

@@ -7,9 +7,15 @@ import AllIconsComponent from './allIconsComponent.vue';
  */
 export default async function iconsExample() {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {
@@ -27,11 +33,7 @@ export default async function iconsExample() {
         app.windowManager,
         packageJSON.name,
       );
-      app.navbarManager.add(
-        { action },
-        packageJSON.name,
-        ButtonLocation.TOOL,
-      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
       this._destroyAction = destroy;
     },
     destroy() {

package/plugins/@vcmap-show-case/list-example/ListExample.vue

@@ -1,92 +1,182 @@
 <template>
   <v-sheet>
-    <v-sheet class="px-2 d-grid">
-      <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"
+    <VcsFormSection heading="Settings">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              v-model="selectable"
+              label="Selectable"
+              class="ma-0"
+              dense
+            />
+          </v-col>
+          <v-col>
+            <v-switch
+              :disabled="!selectable"
+              v-model="selectSingle"
+              label=" Single Select"
+              class="ma-0"
+              dense
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              dense
+              v-model="searchable"
+              label="Searchable"
+              class="ma-0"
             />
+          </v-col>
+          <v-col>
+            <v-switch
+              dense
+              v-model="draggable"
+              label="Draggable"
+              class="ma-0"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Title">
+      <v-container class="py-0 px-1">
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              dense
+              v-model="showTitle"
+              label="Show Title"
+              class="ma-0"
+            />
+          </v-col>
+          <v-col>
             <vcs-text-field
-              v-model="newItem.title"
-              label="Title"
-              :rules="required"
+              v-model="title"
+              placeholder="Title"
+              :disabled="!showTitle"
+            />
+          </v-col>
+        </v-row>
+        <v-row no-gutters>
+          <v-col>
+            <v-switch
+              v-model="titleActions"
+              label="Title Actions"
+              class="ma-0"
+              dense
             />
-            <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>
+          </v-col>
+          <v-col>
+            <v-switch
+              dense
+              v-model="titleIcon"
+              label="Title Icon"
+              class="ma-0"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Item">
+      <v-container class="py-1 px-1">
+        <v-row no-gutters>
+          <v-dialog v-model="dialog" width="400">
+            <template #activator="{ on }">
+              <vcs-form-button v-on="on"> Add An item </vcs-form-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
+                  dense
+                  label="visible"
+                  v-model="newItem.visible"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="disabled"
+                  v-model="newItem.disabled"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="random icon"
+                  v-model="newItem.icon"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="hasUpdate"
+                  v-model="newItem.hasUpdate"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="console.log action"
+                  v-model="newItem.action"
+                  class="ma-0"
+                />
+                <v-switch
+                  label="console.log on clicked"
+                  v-model="newItem.clicked"
+                  class="ma-0"
+                />
+                <v-switch
+                  dense
+                  label="console.log selected state"
+                  v-model="newItem.selected"
+                  class="ma-0"
+                />
+                <vcs-form-button type="submit"> Add </vcs-form-button>
+              </v-form>
+            </v-card>
+          </v-dialog>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
+    <VcsFormSection heading="Selection">
+      <v-container class="py-1 px-1">
+        <v-row no-gutters>
+          <template v-if="selectable">
+            <v-col>
+              <vcs-form-button @click="selected = []"> Clear </vcs-form-button>
+            </v-col>
+            <v-col>
+              <v-switch
+                v-model="showSelection"
+                label="Show Selection"
+                dense
+                class="ma-0"
+              />
+            </v-col>
+          </template>
+        </v-row>
+        <v-row no-gutters>
+          <ul v-if="showSelection" class="mx-2">
+            <li v-for="(i, index) in selected" :key="`item-${index}`">
+              {{ i.title }}
+            </li>
+          </ul>
+        </v-row>
+      </v-container>
+    </VcsFormSection>
 
     <vcs-list
       :items="items"
+      :draggable="draggable"
       :selectable="selectable"
       :single-select="selectSingle"
       :searchable="searchable"
@@ -95,19 +185,28 @@
       :actions="titleActionsArray"
       :title="title"
       v-model="selected"
+      @item-moved="move"
     />
   </v-sheet>
 </template>
 
 <script>
-  import { VcsList, VcsButton, VcsTextField, Icons } from '@vcmap/ui';
+  import {
+    VcsList,
+    VcsFormButton,
+    VcsTextField,
+    Icons,
+    VcsFormSection,
+  } from '@vcmap/ui';
   import {
     VSwitch,
-    VDivider,
     VSheet,
     VDialog,
     VCard,
     VForm,
+    VContainer,
+    VRow,
+    VCol,
   } from 'vuetify/lib';
   import { computed, ref } from 'vue';
 
@@ -123,12 +222,11 @@
       title: 'Foo',
       tooltip: 'this is the foo',
       icon: 'mdi-pen',
-      selectionChanged: value => console.log('changed cb foo', value),
+      selectionChanged: (value) => console.log('changed cb foo', value),
     },
     {
       name: 'bar',
       title: 'Bar',
-      tooltip: 'just a bar',
       actions: [
         {
           name: 'console.log',
@@ -137,13 +235,13 @@
           },
         },
       ],
-      selectionChanged: value => console.log('changed cb bar', value),
+      selectionChanged: (value) => console.log('changed cb bar', value),
     },
     {
       name: 'baz',
       title: 'Baz',
       tooltip: 'special baz',
-      selectionChanged: value => console.log('bchanged cb baz', value),
+      selectionChanged: (value) => console.log('bchanged cb baz', value),
     },
   ];
 
@@ -151,16 +249,20 @@
     name: 'ListExample',
     components: {
       VcsList,
-      VcsButton,
+      VcsFormButton,
       VcsTextField,
+      VcsFormSection,
       VSwitch,
-      VDivider,
       VSheet,
       VDialog,
       VCard,
       VForm,
+      VContainer,
+      VRow,
+      VCol,
     },
     setup() {
+      const draggable = ref(true);
       const selectable = ref(true);
       const searchable = ref(true);
       const selectSingle = ref(false);
@@ -184,6 +286,7 @@
       const dialog = ref(false);
 
       return {
+        draggable,
         selectable,
         searchable,
         selectSingle,
@@ -197,8 +300,8 @@
         newItem,
         dialog,
         required: [
-          v => !!v || 'Input may not be null',
-          v => v.length > 0 || 'Input must have a length',
+          (v) => !!v || 'Input may not be null',
+          (v) => v.length > 0 || 'Input must have a length',
         ],
         add() {
           const item = {
@@ -206,6 +309,7 @@
             title: newItem.value.title,
             disabled: newItem.value.disabled,
             visible: newItem.value.visible,
+            hasUpdate: newItem.value.hasUpdate,
           };
 
           if (newItem.value.icon) {
@@ -217,7 +321,7 @@
               {
                 name: 'console.log',
                 callback() {
-                  console.log('hi, i\'m: ', item.name);
+                  console.log("hi, i'm: ", item.name);
                 },
               },
             ];
@@ -230,8 +334,8 @@
           }
 
           if (newItem.value.selected) {
-            item.selectionChanged = (selected) => {
-              if (selected) {
+            item.selectionChanged = (selectedValue) => {
+              if (selectedValue) {
                 console.log(`${item.name} is selected`);
               } else {
                 console.log(`${item.name} is no longer selected`);
@@ -248,6 +352,7 @@
             action: false,
             clicked: false,
             selected: false,
+            hasUpdate: false,
           };
           dialog.value = false;
         },
@@ -257,12 +362,14 @@
           },
           set(value) {
             if (value) {
-              titleActionsArray.value = [{
-                name: 'console.log foo',
-                callback() {
-                  console.log('foo');
+              titleActionsArray.value = [
+                {
+                  name: 'console.log foo',
+                  callback() {
+                    console.log('foo');
+                  },
                 },
-              }];
+              ];
             } else {
               titleActionsArray.value = [];
             }
@@ -280,14 +387,25 @@
             }
           },
         }),
+        move({ item, targetIndex }) {
+          let target = targetIndex;
+          target = target >= 0 ? target : 0;
+          target =
+            target < items.value.length ? target : items.value.length - 1;
+          const from = items.value.indexOf(item);
+          if (from !== target) {
+            items.value.splice(from, 1);
+            items.value.splice(target, 0, item);
+          }
+        },
       };
     },
   };
 </script>
 
 <style lang="scss" scoped>
-.d-grid{
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
+  .d-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
 </style>

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

@@ -7,9 +7,15 @@ import ListExample from './ListExample.vue';
  */
 export default async function iconsExample() {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     onVcsAppMounted(app) {
       const { action, destroy } = createToggleAction(
         {
@@ -27,11 +33,7 @@ export default async function iconsExample() {
         app.windowManager,
         packageJSON.name,
       );
-      app.navbarManager.add(
-        { action },
-        packageJSON.name,
-        ButtonLocation.TOOL,
-      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
       this._destroyAction = destroy;
     },
     destroy() {

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

@@ -4,9 +4,15 @@ import component from './notifierTester.vue';
 
 export default function createNotifierPlugin() {
   return {
-    get name() { return packageJSON.name; },
-    get version() { return packageJSON.version; },
-    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
     initialize(vcsApp) {
       const { action, destroy } = createToggleAction(
         {

package/plugins/@vcmap-show-case/notifier-tester/notifierTester.vue

@@ -1,22 +1,10 @@
 <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-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"
-      >
+      <v-list-item v-for="type in types" :key="type">
         {{ type }}
         <v-list-item-action @click="notify(type)">
           <v-icon>mdi-plus</v-icon>
@@ -31,7 +19,16 @@
 </template>
 
 <script>
-  import { VSheet, VList, VListItem, VListItemAction, VTextField, VIcon, VCard, VDivider } from 'vuetify/lib';
+  import {
+    VSheet,
+    VList,
+    VListItem,
+    VListItemAction,
+    VTextField,
+    VIcon,
+    VCard,
+    VDivider,
+  } from 'vuetify/lib';
   import { NotificationType, VcsCheckbox } from '@vcmap/ui';
   import { computed, inject, ref } from 'vue';
 
@@ -82,7 +79,4 @@
   };
 </script>
 
-<style scoped>
-
-</style>
-
+<style scoped></style>

package/plugins/@vcmap-show-case/switch-map-callback-example/README.md

@@ -0,0 +1,21 @@
+# @vcmap-show-case/switch-map-callback-example
+
+This plugin adds a MapSwitcherCallback to the uiApp.
+
+This can be used to switch the map i the ContentTree,
+on Click of an Item.
+
+```json
+
+    {
+      "name": "myMapSwitcherEntry",
+      "type": "ContentTreeItem",
+      "title": "SwitchMapCallback Test",
+      "onClick": [
+        {
+          "type": "SwitchMapCallback",
+          "mapName": "ol3"
+        }
+      ]
+    },
+```

package/plugins/@vcmap-show-case/switch-map-callback-example/SwitchMapCallback.js

@@ -0,0 +1,47 @@
+import { VcsCallback } from '@vcmap/ui';
+
+/**
+ * @typedef {VcsCallbackOptions} SwitchMapCallbackOptions
+ * @property {string} mapName - name of the map
+ */
+
+/**
+ * @class
+ * @extends {VcsCallback}
+ */
+class SwitchMapCallback extends VcsCallback {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'SwitchMapCallback';
+  }
+
+  /**
+   * @param {SwitchMapCallbackOptions} options
+   * @param {VcsUiApp} app
+   */
+  constructor(options, app) {
+    super(options, app);
+    /**
+     * @type {string}
+     * @private
+     */
+    this._mapName = options.mapName;
+  }
+
+  callback() {
+    this._app.maps.setActiveMap(this._mapName);
+  }
+
+  /**
+   * @returns {SwitchMapCallbackOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    config.mapName = this._mapName;
+    return config;
+  }
+}
+
+export default SwitchMapCallback;

package/plugins/@vcmap-show-case/switch-map-callback-example/config.json

@@ -0,0 +1,3 @@
+{
+  "name": "@vcmap-show-case/switch-map-callback-example"
+}