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

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

@@ -0,0 +1,34 @@
+import { version, name } from './package.json';
+import SwitchMapCallback from './SwitchMapCallback.js';
+
+/**
+ * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<T>}
+ * @template {Object} T
+ */
+export default function switchMapCallbackExample() {
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     */
+    initialize(vcsUiApp) {
+      this._app = vcsUiApp;
+      this._app.callbackClassRegistry.registerClass(
+        this._app.dynamicModuleId,
+        SwitchMapCallback.className,
+        SwitchMapCallback,
+      );
+    },
+    destroy() {
+      this._app.callbackClassRegistry.unregisterClass(
+        this._app.dynamicModuleId,
+        SwitchMapCallback.className,
+      );
+    },
+  };
+}

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

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/switch-map-callback-example",
+  "version": "1.0.0",
+  "description": "An Example plugin to add a Map Switcher Callback"
+}

package/plugins/@vcmap-show-case/table-example/DataTableExample.vue

@@ -1,32 +1,20 @@
 <template>
   <v-sheet>
     <v-sheet class="px-2 d-grid">
-      <v-switch
-        v-model="selectable"
-        label="Selectable"
-      />
+      <v-switch v-model="selectable" label="Selectable" class="ma-0" />
       <v-switch
         :disabled="!selectable"
         v-model="selectSingle"
         label=" Single Select"
+        class="ma-0"
       />
-      <v-switch
-        v-model="searchable"
-        label="Searchable"
-      />
-      <v-dialog
-        v-model="dialog"
-        width="400"
-      >
+      <v-switch v-model="searchable" label="Searchable" class="ma-0" />
+      <v-dialog v-model="dialog" width="400">
         <template #activator="{ on }">
-          <vcs-button v-on="on">
-            Add An item
-          </vcs-button>
+          <vcs-form-button v-on="on"> Add An item </vcs-form-button>
         </template>
         <v-card class="pa-2">
-          <v-form
-            @submit.prevent="add"
-          >
+          <v-form @submit.prevent="add">
             <vcs-text-field
               v-model="newItem.name"
               label="Name"
@@ -37,16 +25,10 @@
               label="type"
               :rules="required"
             />
-            <vcs-text-field
-              v-model="newItem.date"
-              type="date"
-              label="date"
-            />
-            <vcs-button
-              type="submit"
-            >
+            <vcs-text-field v-model="newItem.date" type="date" label="date" />
+            <vcs-form-button type="submit" variant="filled">
               Add
-            </vcs-button>
+            </vcs-form-button>
           </v-form>
         </v-card>
       </v-dialog>
@@ -68,7 +50,6 @@
           :actions="item.actions"
           :block-overflow="true"
           :overflow-count="2"
-          small
         />
       </template>
     </vcs-data-table>
@@ -76,14 +57,13 @@
 </template>
 
 <script>
-  import { VcsDataTable, VcsButton, VcsTextField, VcsActionButtonList } from '@vcmap/ui';
   import {
-    VSwitch,
-    VSheet,
-    VDialog,
-    VCard,
-    VForm,
-  } from 'vuetify/lib';
+    VcsDataTable,
+    VcsFormButton,
+    VcsTextField,
+    VcsActionButtonList,
+  } from '@vcmap/ui';
+  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/lib';
   import { ref } from 'vue';
 
   const defaultHeaders = [
@@ -137,7 +117,7 @@
     name: 'DataTableExample',
     components: {
       VcsDataTable,
-      VcsButton,
+      VcsFormButton,
       VcsTextField,
       VcsActionButtonList,
       VSwitch,
@@ -171,8 +151,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 = {
@@ -195,8 +175,8 @@
 </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/table-example/index.js

@@ -7,9 +7,15 @@ import DataTableExample from './DataTableExample.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(
         {
@@ -30,11 +36,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/textfields-example/TextfieldsExample.vue

@@ -1,10 +1,7 @@
 <template>
   <v-sheet style="height: 100%">
     <v-container class="pa-2">
-      <v-row
-        dense
-        align="center"
-      >
+      <v-row dense>
         <v-col>
           <label> test</label>
         </v-col>
@@ -12,9 +9,7 @@
           <v-text-field hide-details dense outlined />
         </v-col>
       </v-row>
-      <v-row
-        dense
-      >
+      <v-row dense>
         <v-col>
           <v-text-field dense hide-details outlined class="ma-0" />
         </v-col>
@@ -28,32 +23,21 @@
           <v-text-field label="test" dense hide-details class="ma-0" />
         </v-col>
       </v-row>
-      <v-row
-        dense
-      >
+      <v-row dense>
         <v-col>
           <v-text-field hide-details outlined />
         </v-col>
         <v-col>
-          <v-text-field
-            hide-details
-            class="ma-0 pb-1 pt-1"
-          />
+          <v-text-field hide-details class="ma-0 pb-1 pt-1" />
         </v-col>
         <v-col>
           <v-text-field label="test" hide-details outlined />
         </v-col>
         <v-col>
-          <v-text-field
-            label="test"
-            hide-details
-            class="ma-0 pb-1 pt-1"
-          />
+          <v-text-field label="test" hide-details class="ma-0 pb-1 pt-1" />
         </v-col>
       </v-row>
-      <v-row
-        dense
-      >
+      <v-row dense>
         <v-col>
           <v-text-field
             dense
@@ -101,14 +85,7 @@
   </v-sheet>
 </template>
 <script>
-
-  import {
-    VSheet,
-    VContainer,
-    VRow,
-    VCol,
-    VTextField,
-  } from 'vuetify/lib';
+  import { VSheet, VContainer, VRow, VCol, VTextField } from 'vuetify/lib';
 
   export default {
     name: 'TextfieldsExample',

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

@@ -8,11 +8,17 @@ import mySuperComponent from './TextfieldsExample.vue';
  * @param {FormInputsExampleConfig} config
  * @returns {VcsPlugin}
  */
-export default async function (config) {
+export default async function textfieldsExample(config) {
   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(app) {
       console.log('initialize', app, config);
     },

package/plugins/@vcmap-show-case/window-tester/WindowExample.vue

@@ -1,27 +1,25 @@
 <template>
   <div>
-    <VcsButton
+    <VcsFormButton
       v-for="(example, index) in examples"
       :key="`b-${index}`"
       @click="(e) => toggle(e, example)"
+      class="pa-1"
     >
       toggle {{ example }}
-    </VcsButton>
+    </VcsFormButton>
 
-    <VcsButton @click="toggleClass()" :active="showTestClass">
+    <VcsFormButton @click="toggleClass()" :active="showTestClass" class="pa-1">
       Change Static2 TestClass
-    </VcsButton>
+    </VcsFormButton>
   </div>
 </template>
-<style>
-
-
-</style>
+<style></style>
 <script>
   import { inject, onUnmounted, ref, computed } from 'vue';
   import { getLogger } from '@vcsuite/logger';
 
-  import { WindowSlot, VcsButton } from '@vcmap/ui';
+  import { WindowSlot, VcsFormButton } from '@vcmap/ui';
   import VcsContent from './windowExampleContent.vue';
   import MyCustomHeader from './myCustomHeader.vue';
   import EmptyComponent from './emptyComponent.vue';
@@ -30,7 +28,7 @@
 
   export default {
     name: 'WindowExample',
-    components: { VcsButton },
+    components: { VcsFormButton },
     setup() {
       const exampleWindows = [
         {
@@ -154,11 +152,16 @@
             app.windowManager.remove(windowId);
           } else {
             e.stopPropagation();
-            const windowComponentOptions = exampleWindows.find(item => item.id === windowId);
-            app.windowManager.add(windowComponentOptions, 'WindowManagerExample');
+            const windowComponentOptions = exampleWindows.find(
+              (item) => item.id === windowId,
+            );
+            app.windowManager.add(
+              windowComponentOptions,
+              'WindowManagerExample',
+            );
           }
         },
-        examples: exampleWindows.map(item => item.id),
+        examples: exampleWindows.map((item) => item.id),
       };
     },
   };

package/plugins/@vcmap-show-case/window-tester/emptyComponent.vue

@@ -1,17 +1,14 @@
 <template>
   <v-sheet style="height: 100%">
-    <span>
-      Static Window
-    </span>
+    <span> Static Window </span>
   </v-sheet>
 </template>
 <style scoped>
-.vcsTest span {
-  background-color: red;
-}
+  .vcsTest span {
+    background-color: red;
+  }
 </style>
 <script>
-
   import { VSheet } from 'vuetify/lib';
 
   export default {

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

@@ -1,6 +1,4 @@
-import {
-  ButtonLocation, createToggleAction, ToolboxType,
-} from '@vcmap/ui';
+import { ButtonLocation, createToggleAction, ToolboxType } from '@vcmap/ui';
 import packageJSON from './package.json';
 import { getToolboxData } from './toolbox-data.js';
 import windowExample from './WindowExample.vue';
@@ -8,11 +6,17 @@ import windowExample from './WindowExample.vue';
 /**
  * @returns {VcsPlugin}
  */
-export default async function () {
+export default async function windowTester() {
   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(
         {
@@ -25,7 +29,7 @@ export default async function () {
           },
           component: windowExample,
           position: {
-            left: '60%',
+            left: '55%',
             right: '10%',
             top: '10%',
           },
@@ -39,22 +43,24 @@ export default async function () {
         ButtonLocation.TOOL,
       );
       const { toolboxData, destroy: destroyToolboxData } = getToolboxData(app);
-      toolboxData.forEach(([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
-        let group;
-        if (app.toolboxManager.has(toolboxComponentOptions.id)) {
-          group = app.toolboxManager.get(toolboxComponentOptions.id);
-        } else {
-          group = app.toolboxManager.add(toolboxComponentOptions, owner);
-        }
-        if (group.type === ToolboxType.GROUP && buttonComponents) {
-          buttonComponents.forEach(c => group.buttonManager.add(c, owner));
-        }
-      });
+      toolboxData.forEach(
+        ([{ buttonComponents, ...toolboxComponentOptions }, owner]) => {
+          let group;
+          if (app.toolboxManager.has(toolboxComponentOptions.id)) {
+            group = app.toolboxManager.get(toolboxComponentOptions.id);
+          } else {
+            group = app.toolboxManager.add(toolboxComponentOptions, owner);
+          }
+          if (group.type === ToolboxType.GROUP && buttonComponents) {
+            buttonComponents.forEach((c) => group.buttonManager.add(c, owner));
+          }
+        },
+      );
       this._destroyAction = [destroy, destroyToolboxData];
     },
     destroy() {
       if (this._destroyActions) {
-        this._destroyActions.forEach(cb => cb());
+        this._destroyActions.forEach((cb) => cb());
         this._destroyActions = null;
       }
     },

package/plugins/@vcmap-show-case/window-tester/myCustomHeader.vue

@@ -1,19 +1,23 @@
 <template>
   <div>
     <div>
-      Ha, this is a custom Header with a <span @click="clicked"> CLOSE thing. </span>
+      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>And here is '<b>{{ sample }}</b>' passed through</div>
   </div>
 </template>
 
 <script>
-
   export default {
     name: 'MyCustomHeader',
     props: {
       sample: {
         type: String,
+        default: 'MyCustomHeader',
       },
     },
     setup(props, { emit }) {

package/plugins/@vcmap-show-case/window-tester/toolbox-data.js

@@ -12,7 +12,7 @@ const dummySelectAction = {
     this.active = false;
   },
   _start() {
-    const startSession = tool => ({ type: tool });
+    const startSession = (tool) => ({ type: tool });
     this._session = startSession(this.tools[this.currentIndex].name);
     this.active = true;
     console.log('starting session', this._session);
@@ -83,7 +83,7 @@ function createDummyTriStateAction(app) {
     if (app.windowManager.has(windowComponent.id)) {
       app.windowManager.remove(windowComponent.id);
     }
-    listeners.forEach(cb => cb());
+    listeners.forEach((cb) => cb());
   };
 
   return { action, destroy };
@@ -103,7 +103,29 @@ export function getToolboxData(app) {
           title: 'single select',
           icon: '$vcsPointSelect',
           active: false,
-          callback() { this.active = !this.active; },
+          callback() {
+            this.active = !this.active;
+          },
+        },
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'singleSelect2',
+        type: ToolboxType.SINGLE,
+        action: {
+          name: 'select',
+          title: 'single select',
+          icon: 'mdi-eye',
+          active: false,
+          disabled: false,
+          callback() {
+            this.disabled = true;
+            setTimeout(() => {
+              this.disabled = false;
+            }, 2000);
+          },
         },
       },
       packageJSON.name,
@@ -160,6 +182,7 @@ export function getToolboxData(app) {
               name: 'area3D',
               title: '3D area',
               icon: '$vcs3dArea',
+              disabled: true,
             },
           ],
         },
@@ -188,7 +211,9 @@ export function getToolboxData(app) {
               title: 'add flight',
               icon: 'mdi-camera-plus',
               active: false,
-              callback() { this.active = !this.active; },
+              callback() {
+                this.active = !this.active;
+              },
             },
           },
           {
@@ -197,14 +222,66 @@ export function getToolboxData(app) {
               name: 'export',
               title: 'export flight',
               icon: '$vcsExportFlight',
+              disabled: true,
+              active: false,
+              callback() {
+                this.active = !this.active;
+              },
+            },
+          },
+        ],
+      },
+      packageJSON.name,
+    ],
+    [
+      {
+        id: 'flight2',
+        type: ToolboxType.GROUP,
+        icon: '$vcsVideoRecorder',
+        title: 'flight2',
+        disabled: true,
+        buttonComponents: [
+          {
+            id: 'flight',
+            action: {
+              name: 'flight',
+              title: 'add flight',
+              icon: 'mdi-camera-plus',
               active: false,
-              callback() { this.active = !this.active; },
+              callback() {
+                this.active = !this.active;
+              },
             },
           },
         ],
       },
       packageJSON.name,
     ],
+    [
+      {
+        id: 'multiSelect2',
+        type: ToolboxType.SELECT,
+        action: {
+          name: 'multiSelect',
+          title: 'multi select',
+          disabled: true,
+          ...dummySelectAction,
+          tools: [
+            {
+              name: 'pen',
+              title: 'Item 3',
+              icon: '$vcsPen',
+            },
+            {
+              name: 'object',
+              title: 'Item 4',
+              icon: '$vcsObjectSelect',
+            },
+          ],
+        },
+      },
+      packageJSON.name,
+    ],
   ];
 
   return { toolboxData, destroy };

package/plugins/@vcmap-show-case/window-tester/windowExampleContent.vue

@@ -1,14 +1,10 @@
 <template>
   <v-sheet>
-    <span>
-      content
-    </span>
+    <span> content </span>
   </v-sheet>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 <script>
   import { VSheet } from 'vuetify/lib';
 
@@ -16,7 +12,7 @@
     name: 'WindowExampleContent',
     components: { VSheet },
     setup() {
-      return { };
+      return {};
     },
   };
 </script>

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

@@ -7,9 +7,15 @@ import WizardExample from './wizardExample.vue';
  */
 export default async () => {
   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(
         {