@vcmap/ui 5.0.0-rc.18 → 5.0.0-rc.20

package/plugins/{@vcmap/pluginExample → @vcmap-show-case/form-inputs-example}/index.js

@@ -6,25 +6,25 @@ import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
 import packageJSON from './package.json';
 import defaultConfig from './config.json';
 import { conditionalTest, isValidEmail, isValidText } from './validation.js';
-import pluginExampleComponent from './pluginExampleComponent.vue';
+import FormInputsExample from './FormInputsExample.vue';
 import createExampleActions from './exampleActions.js';
 
 /**
  * @returns {Logger}
  */
 function getLogger() {
-  return getLoggerByName('@vcmap/pluginExample');
+  return getLoggerByName(packageJSON.name);
 }
 
 /**
- * @typedef PluginExampleConfig
+ * @typedef FormInputsExampleConfig
  * @property {string} nonReactiveProp
  * @property {string[]} selectOptions
  * @property {string} initialTextInput
  */
 
 /**
- * @typedef PluginExampleState
+ * @typedef FormInputsExampleState
  * @property {string} selected
  * @property {Array<string>} selectedMultiple
  * @property {string} conditionalInput
@@ -35,7 +35,7 @@ function getLogger() {
  */
 
 /**
- * @returns {PluginExampleConfig}
+ * @returns {FormInputsExampleConfig}
  */
 export function getDefaultConfig() {
   return defaultConfig;
@@ -43,12 +43,12 @@ export function getDefaultConfig() {
 
 /**
  *
- * @param {PluginExampleConfig} config
+ * @param {FormInputsExampleConfig} config
  * @returns {VcsPlugin}
  */
 export default function (config) {
   /**
-   * @type {PluginExampleConfig}
+   * @type {FormInputsExampleConfig}
    */
   const pluginConfig = {
     // not reactive can be put without using reactive or ref
@@ -72,7 +72,7 @@ export default function (config) {
   }
 
   /**
-   * @type {PluginExampleState}
+   * @type {FormInputsExampleState}
    */
   const pluginState = reactive({
     selected: pluginConfig.selectOptions.value[0],
@@ -112,7 +112,7 @@ export default function (config) {
 
   /**
    * returns serializable state object
-   * @returns {PluginExampleState}
+   * @returns {FormInputsExampleState}
    */
   function getSerializedState() {
     // use destruction to get rid of reactive getter/ setter. be careful with nested props!
@@ -121,7 +121,7 @@ export default function (config) {
 
   /**
    * can be async
-   * @param {PluginExampleState} stateObject
+   * @param {FormInputsExampleState} stateObject
    */
   function setSerializedState(stateObject) {
     /**
@@ -157,18 +157,19 @@ export default function (config) {
 
       const { action, destroy } = createToggleAction(
         {
-          name: 'Plugin Example',
+          name: 'Form Inputs Example',
           icon: '$vcsHealthCareIndustries',
-          title: 'pluginExample.tooltip',
+          title: 'form-inputs-example.tooltip',
         },
         {
-          id: 'pluginExample',
-          component: pluginExampleComponent,
+          id: 'formInputsExample',
+          component: FormInputsExample,
           slot: WindowSlot.DYNAMIC_LEFT,
           state: {
-            headerTitle: 'pluginExample.title',
+            headerTitle: 'form-inputs-example.title',
             headerIcon: '$vcsCircle',
             headerActions: actions,
+            headerActionsOverflow: 2,
             infoUrl: 'https://vc.systems',
           },
           props: {
@@ -181,7 +182,7 @@ export default function (config) {
         packageJSON.name,
       );
       app.navbarManager.add(
-        { id: 'pluginExample', action },
+        { id: 'formInputsExample', action },
         packageJSON.name,
         ButtonLocation.TOOL,
       );
@@ -197,10 +198,10 @@ export default function (config) {
     },
     i18n: {
       de: {
-        pluginExample: {
-          title: 'Plugin Beispiel',
+        'form-inputs-example': {
+          title: 'Form Inputs Beispiel',
           select: 'Select Feld',
-          tooltip: 'Beispiel Plugin Map Button Tooltip',
+          tooltip: 'Form Inputs Beispiel Plugin',
           help: 'Geben Sie eine Zahl in das Feld NumberInput ein. VcsFormattedNumber rundet auf eine Dezimalstelle.',
           help1: 'Wählen Sie eine Option',
           help1desc: 'Wenn \'Option A\' gewählt ist, muss der bedingte Input \'test\' sein.',
@@ -216,10 +217,10 @@ export default function (config) {
         },
       },
       en: {
-        pluginExample: {
-          title: 'Plugin Example',
+        'form-inputs-example': {
+          title: 'Form Inputs Example',
           select: 'Select field',
-          tooltip: 'Example Plugin Map Button Tooltip',
+          tooltip: 'Form Inputs Example Plugin',
           help: 'Enter a number to the NumberInput field. VcsFormattedNumber rounds to one decimal digit.',
           help1: 'Select an option',
           help1desc: 'If \'Option A\' is chosen, conditional input must be \'test\'.',

package/plugins/@vcmap-show-case/form-inputs-example/package.json

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

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

@@ -0,0 +1,5 @@
+# Icons Example
+
+This is a show-case plugin demonstrating the usage of icons. 
+Lists all available VCS icons.
+See [icons](../../../src/components/icons) for the used components.

package/plugins/@vcmap-show-case/icons-example/allIconsComponent.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-sheet class="overflow-auto icons-window">
+    <vcs-list
+      :items="icons"
+      :searchable="true"
+      :show-title="false"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { Icons, VcsList } from '@vcmap/ui';
+  import { VSheet } from 'vuetify/lib';
+  import { computed } from 'vue';
+
+  export default {
+    name: 'AllIconsComponent',
+    components: {
+      VcsList,
+      VSheet,
+    },
+    setup() {
+      const createListItem = (icon) => {
+        const key = `$${icon}`;
+        return {
+          name: key,
+          title: key,
+          icon: key,
+          actions: [
+            {
+              name: 'copy-icon-to-clipboard',
+              icon: 'mdi-content-copy',
+              title: `Copy ${key}`,
+              callback: async () => { await navigator.clipboard.writeText(key); },
+            },
+          ],
+        };
+      };
+
+      return {
+        icons: computed(() => Object.keys(Icons).map(icon => createListItem(icon))),
+      };
+    },
+  };
+</script>
+
+<style scoped>
+.icons-window {
+  max-height: 600px;
+}
+</style>

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

@@ -0,0 +1,44 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
+import AllIconsComponent from './allIconsComponent.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: 'Icons Examples',
+          title: 'Icons Example Plugin',
+        },
+        {
+          id: 'icons-example',
+          component: AllIconsComponent,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Icons Example',
+          },
+        },
+        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/icons-example/package.json

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

package/plugins/{test/testList.vue → @vcmap-show-case/list-example/ListExample.vue}

@@ -148,7 +148,7 @@
   ];
 
   export default {
-    name: 'TestList',
+    name: 'ListExample',
     components: {
       VcsList,
       VcsButton,

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

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

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

@@ -0,0 +1,44 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
+import ListExample from './ListExample.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: 'List Examples',
+          title: 'List Example Plugin',
+        },
+        {
+          id: 'list-example',
+          component: ListExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'List Example',
+          },
+        },
+        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/list-example/package.json

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

package/plugins/@vcmap-show-case/notifier-tester/README.md

@@ -0,0 +1,3 @@
+# Notifier Tester
+
+This is a show-case plugin demonstrating the concept of [Notifier](../../../documentation/NOTIFIER.md).

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

@@ -1,28 +1,33 @@
 import { WindowSlot, createToggleAction, ButtonLocation } from '@vcmap/ui';
+import packageJSON from './package.json';
 import component from './notifierTester.vue';
 
 export default function createNotifierPlugin() {
   return {
-    name: 'notifier',
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
     initialize(vcsApp) {
       const { action, destroy } = createToggleAction(
         {
-          name: 'Notifier',
+          name: 'Notifier Tester',
+          icon: '$vcsComment',
         },
         {
-          id: 'notifier-editor',
+          id: 'notifier-tester',
           state: {
-            headerTitle: 'Notifier Editor',
+            headerTitle: 'Notifier Tester',
+            headerIcon: '$vcsComment',
           },
           component,
           slot: WindowSlot.DYNAMIC_LEFT,
         },
         vcsApp.windowManager,
-        'notifier',
+        packageJSON.name,
       );
       vcsApp.navbarManager.add(
         { id: 'notifier', action },
-        'notifier',
+        packageJSON.name,
         ButtonLocation.TOOL,
       );
       this.destroy = destroy;

package/plugins/@vcmap-show-case/notifier-tester/package.json

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

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

@@ -0,0 +1,3 @@
+# Textfields Example
+
+This is a show-case plugin demonstrating the usage of textfields in a grid.

package/plugins/{example/mySuperComponent.vue → @vcmap-show-case/textfields-example/TextfieldsExample.vue}

@@ -98,11 +98,6 @@
         </v-col>
       </v-row>
     </v-container>
-    <button
-      @click="outlined = !outlined"
-    >
-      test
-    </button>
   </v-sheet>
 </template>
 <script>
@@ -116,7 +111,7 @@
   } from 'vuetify/lib';
 
   export default {
-    name: 'MySuperComponent',
+    name: 'TextfieldsExample',
     components: {
       VSheet,
       VContainer,
@@ -130,7 +125,6 @@
         hover2: false,
         hover3: false,
         hover4: false,
-        outlined: false,
         email: 'test',
       };
     },

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

@@ -1,62 +1,58 @@
-/* eslint-disable no-console */
-import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import mySuperComponent from './mySuperComponent.vue';
-
-/**
- *
- * @param {PluginExampleConfig} config
- * @returns {VcsPlugin}
- */
-export default async function (config) {
-  return {
-    name: '@vcmap/example',
-    initialize(app) {
-      console.log('initialize', app, config);
-    },
-    onVcsAppMounted(app) {
-      console.log('onVcsAppMounted', app, config);
-      // XXX supportedMaps: ['vcs.vcm.maps.Openlayers', 'vcs.vcm.maps.Cesium'],
-      const { action, destroy } = createToggleAction(
-        {
-          name: 'Example',
-          icon: '$vcsPointSelect',
-        },
-        {
-          id: '228',
-          component: mySuperComponent,
-          slot: WindowSlot.DETACHED,
-          position: {
-            width: 1200,
-          },
-        },
-        app.windowManager,
-        '@vcmap/example',
-      );
-      this._destroyAction = destroy;
-      app.navbarManager.add(
-        {
-          action,
-        },
-        '@vcmap/example',
-        ButtonLocation.TOOL,
-      );
-      const miscGroup = app.toolboxManager.get('miscellaneous');
-      miscGroup.buttonManager.add({
-        id: 'example',
-        action: {
-          name: 'example',
-          title: 'example',
-          icon: 'mdi-circle-small',
-          active: false,
-          callback() { this.active = !this.active; },
-        },
-      }, '@vcmap/example');
-    },
-    destroy() {
-      if (this._destroyAction) {
-        this._destroyAction();
-        this._destroyAction = null;
-      }
-    },
-  };
-}
+/* eslint-disable no-console */
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import packageJSON from './package.json';
+import mySuperComponent from './TextfieldsExample.vue';
+
+/**
+ *
+ * @param {FormInputsExampleConfig} config
+ * @returns {VcsPlugin}
+ */
+export default async function (config) {
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    initialize(app) {
+      console.log('initialize', app, config);
+    },
+    onVcsAppMounted(app) {
+      console.log('onVcsAppMounted', app, config);
+      // XXX supportedMaps: ['vcs.vcm.maps.Openlayers', 'vcs.vcm.maps.Cesium'],
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Textfields Example',
+          icon: '$vcsPen',
+        },
+        {
+          id: '228',
+          component: mySuperComponent,
+          slot: WindowSlot.DETACHED,
+          state: {
+            headerTitle: 'Textfields Example',
+            headerIcon: '$vcsPen',
+          },
+          position: {
+            width: 1200,
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      this._destroyAction = destroy;
+      app.navbarManager.add(
+        {
+          action,
+        },
+        packageJSON.name,
+        ButtonLocation.TOOL,
+      );
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

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

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

package/plugins/@vcmap-show-case/window-tester/README.md

@@ -0,0 +1,3 @@
+# Window Tester
+
+This is a show-case plugin demonstrating the concept of [WINDOWS](../../../documentation/WINDOWS.md).