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

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

@@ -0,0 +1,183 @@
+<template>
+  <v-sheet>
+    <v-sheet class="px-2 d-grid">
+      <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" class="ma-0" />
+      <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.type"
+              label="type"
+              :rules="required"
+            />
+            <vcs-text-field v-model="newItem.date" type="date" label="date" />
+            <vcs-form-button type="submit" variant="filled">
+              Add
+            </vcs-form-button>
+          </v-form>
+        </v-card>
+      </v-dialog>
+    </v-sheet>
+
+    <vcs-data-table
+      :items="items"
+      item-key="id"
+      :headers="headers"
+      :show-select="selectable"
+      :single-select="selectSingle"
+      :show-searchbar="searchable"
+      v-model="selected"
+    >
+      <!-- eslint-disable-next-line -->
+      <template v-slot:item.actions="{ item }">
+        <VcsActionButtonList
+          v-if="item.actions"
+          :actions="item.actions"
+          :block-overflow="true"
+          :overflow-count="2"
+          small
+        />
+      </template>
+    </vcs-data-table>
+  </v-sheet>
+</template>
+
+<script>
+  import {
+    VcsDataTable,
+    VcsFormButton,
+    VcsTextField,
+    VcsActionButtonList,
+  } from '@vcmap/ui';
+  import { VSwitch, VSheet, VDialog, VCard, VForm } from 'vuetify/lib';
+  import { ref } from 'vue';
+
+  const defaultHeaders = [
+    {
+      text: 'Name',
+      value: 'name',
+    },
+    {
+      text: 'Type',
+      value: 'type',
+    },
+    {
+      text: 'Datum',
+      value: 'date',
+      sort: (a, b) => new Date(b) - new Date(a),
+    },
+    { text: 'Actions', value: 'actions', sortable: false },
+  ];
+
+  const defaultItems = [
+    {
+      id: 0,
+      name: 'foo',
+      type: 'Foo',
+      date: '8/3/2023 9:24',
+      actions: [
+        {
+          name: 'console.log',
+          icon: 'mdi-printer',
+          callback() {
+            console.log('foo action');
+          },
+        },
+      ],
+    },
+    {
+      id: 1,
+      name: 'bar',
+      type: 'Bar',
+      date: '1/8/2022 19:54',
+    },
+    {
+      id: 2,
+      name: 'baz',
+      type: 'Baz',
+      date: '11/2/2012 14:03',
+    },
+  ];
+
+  export default {
+    name: 'DataTableExample',
+    components: {
+      VcsDataTable,
+      VcsFormButton,
+      VcsTextField,
+      VcsActionButtonList,
+      VSwitch,
+      VSheet,
+      VDialog,
+      VCard,
+      VForm,
+    },
+    setup() {
+      const selectable = ref(true);
+      const searchable = ref(true);
+      const selectSingle = ref(false);
+      const selected = ref([]);
+      const items = ref(defaultItems);
+      const headers = ref(defaultHeaders);
+      const newItem = ref({
+        id: items.value.length,
+        name: 'foo',
+        type: 'foo',
+        date: new Date(),
+      });
+      const dialog = ref(false);
+
+      return {
+        selectable,
+        searchable,
+        selectSingle,
+        selected,
+        items,
+        headers,
+        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,
+            type: newItem.value.type,
+            date: newItem.value.date,
+          };
+
+          items.value.push(item);
+          newItem.value = {
+            name: 'foo',
+            type: 'foo',
+            date: new Date(),
+          };
+          dialog.value = false;
+        },
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .d-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+</style>

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

@@ -0,0 +1,3 @@
+# List Example
+
+This is a show-case plugin demonstrating the usage of [VcsDataTable](../../../src/components/tables/VcsDataTable.vue).

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

@@ -0,0 +1,49 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
+import DataTableExample from './DataTableExample.vue';
+
+/**
+ * @returns {VcsPlugin}
+ */
+export default async function iconsExample() {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get vcMapVersion() {
+      return packageJSON.vcMapVersion;
+    },
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Table Example',
+          title: 'Table Example Plugin',
+        },
+        {
+          id: 'table-example',
+          component: DataTableExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Table Example',
+          },
+          position: {
+            width: 500,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add({ action }, packageJSON.name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap-show-case/table-example/package.json

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

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>