@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/plugins/@vcmap-show-case/form-inputs-example/src/exampleActions.js

@@ -0,0 +1,36 @@
+import { reactive, ref } from 'vue';
+
+export default function createExampleActions() {
+  const dense = ref(false);
+  const showSection = ref(true);
+
+  const actions = [
+    reactive({
+      name: 'denseSelection',
+      title: 'change row height',
+      icon: dense.value
+        ? 'mdi-arrow-split-horizontal'
+        : 'mdi-arrow-collapse-vertical',
+      callback() {
+        dense.value = !dense.value;
+        this.icon = dense.value
+          ? 'mdi-arrow-split-horizontal'
+          : 'mdi-arrow-collapse-vertical';
+      },
+    }),
+    {
+      name: 'noIcon',
+      title: 'another action without icon',
+      callback: () => {},
+    },
+    {
+      name: 'alert',
+      icon: 'mdi-message-text',
+      callback() {
+        alert('alert');
+      },
+    },
+  ];
+
+  return { actions, dense, showSection };
+}

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

@@ -1,30 +1,32 @@
-import { ref, reactive, watch } from '@vue/composition-api';
+import { ref, reactive, watch } from 'vue';
 import { getLogger as getLoggerByName } from '@vcsuite/logger';
 
-
 import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
-import packageJSON from './package.json';
-import defaultConfig from './config.json';
+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 {Array<number>} arrayInput
  * @property {string} conditionalInput
  * @property {string} initialTextInput
  * @property {number} numberInput
@@ -33,7 +35,7 @@ function getLogger() {
  */
 
 /**
- * @returns {PluginExampleConfig}
+ * @returns {FormInputsExampleConfig}
  */
 export function getDefaultConfig() {
   return defaultConfig;
@@ -41,18 +43,20 @@ export function getDefaultConfig() {
 
 /**
  *
- * @param {PluginExampleConfig} config
+ * @param {FormInputsExampleConfig} config
  * @returns {VcsPlugin}
  */
-export default function (config) {
+export default function formInputsExample(config) {
   /**
-   * @type {PluginExampleConfig}
+   * @type {FormInputsExampleConfig}
    */
   const pluginConfig = {
     // not reactive can be put without using reactive or ref
     nonReactiveProp: 'nonReactive',
     // no validation, ref to track config changes; use reactive on nested arrays or objects
-    selectOptions: ref([...config.selectOptions] || [...defaultConfig.selectOptions]),
+    selectOptions: ref(
+      [...config.selectOptions] || [...defaultConfig.selectOptions],
+    ),
     // ref prop with getter setter --> validation
     _initialTextInput: ref(defaultConfig.initialTextInput),
     set initialTextInput(value) {
@@ -60,27 +64,40 @@ export default function (config) {
       if (validation === true) {
         this._initialTextInput.value = value;
       } else {
-        getLogger().error('Error setting initialTextInput on plugin config:', validation);
+        getLogger().error(
+          'Error setting initialTextInput on plugin config:',
+          validation,
+        );
       }
     },
-    get initialTextInput() { return this._initialTextInput; },
+    get initialTextInput() {
+      return this._initialTextInput;
+    },
   };
   if (config.initialTextInput) {
     pluginConfig.initialTextInput = config.initialTextInput;
   }
 
   /**
-   * @type {PluginExampleState}
+   * @type {FormInputsExampleState}
    */
-  const pluginState = reactive({
+  const pluginState = {
     selected: pluginConfig.selectOptions.value[0],
+    selectedMultiple: [],
+    arrayInput: [1, 2, 3],
+    arrayInputString: ['a', 'b', 'c'],
     conditionalInput: '',
     initialTextInput: pluginConfig.initialTextInput.value,
     numberInput: 100.156,
-    checkboxInput: false,
+    checkboxInput: true,
     email: '',
-  });
+    prependedInput: '',
+    files: [],
+    dateInput: '',
+  };
 
+  /** @type {FormInputsExampleState} */
+  const defaultState = JSON.parse(JSON.stringify(pluginState));
 
   /**
    * watcher to update state, when specific config properties are changed
@@ -91,7 +108,7 @@ export default function (config) {
    * - if reactive objects or arrays shall be watched, you'll need to add option `{ deep: true }`
    *   @see https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects
    *   in this case you may need a separate watcher, since watching multiple sources seems only to work for refs
-   * @returns {WatchStopHandle}
+   * @returns {import("vue").WatchStopHandle}
    */
   const stopWatching = watch(
     [pluginConfig.selectOptions, pluginConfig.initialTextInput],
@@ -107,7 +124,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!
@@ -116,7 +133,7 @@ export default function (config) {
 
   /**
    * can be async
-   * @param {PluginExampleState} stateObject
+   * @param {FormInputsExampleState} stateObject
    */
   function setSerializedState(stateObject) {
     /**
@@ -124,14 +141,20 @@ export default function (config) {
      * @type {Object<string, true|string>}
      */
     const validation = {
-      conditionalInput: conditionalTest(stateObject.conditionalInput, stateObject.selected),
+      conditionalInput: conditionalTest(
+        stateObject.conditionalInput,
+        stateObject.selected,
+      ),
       initialTextInput: isValidText(stateObject.initialTextInput),
       email: isValidEmail(stateObject.email),
     };
     Object.keys(validation).forEach((key) => {
       if (validation[key] !== true) {
         // XXX warning or error???
-        getLogger().warning(`Validation failed for state property "${key}":`, validation[key]);
+        getLogger().warning(
+          `Validation failed for state property "${key}":`,
+          validation[key],
+        );
         // XXX should invalid props be assigned or not?
         delete stateObject[key];
       }
@@ -140,34 +163,51 @@ export default function (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 mapVersion() {
+      return packageJSON.mapVersion;
+    },
     config: pluginConfig,
-    state: pluginState,
+    state: reactive(pluginState),
+    resetState: () =>
+      Object.assign(pluginState, JSON.parse(JSON.stringify(defaultState))),
     getSerializedState,
     setSerializedState,
     onVcsAppMounted(app) {
+      const { actions, dense } = createExampleActions();
+
       const { action, destroy } = createToggleAction(
         {
-          name: 'Plugin Example',
+          name: 'Form Inputs Example',
           icon: '$vcsHealthCareIndustries',
-          title: 'Example Plugin Map Button Tooltip',
+          title: 'form-inputs-example.tooltip',
         },
         {
-          id: 'pluginExample',
-          component: pluginExampleComponent,
-          slot: WindowSlot.STATIC,
+          id: 'formInputsExample',
+          component: FormInputsExample,
+          slot: WindowSlot.DYNAMIC_LEFT,
           state: {
-            headerTitle: 'Plugin Example',
+            headerTitle: 'form-inputs-example.title',
             headerIcon: '$vcsCircle',
+            headerActions: actions,
+            headerActionsOverflow: 2,
+            infoUrl: 'https://vc.systems',
+          },
+          props: {
+            actions,
+            dense,
           },
         },
         app.windowManager,
         packageJSON.name,
       );
       app.navbarManager.add(
-        { id: 'pluginExample', action },
+        { id: 'formInputsExample', action },
         packageJSON.name,
         ButtonLocation.TOOL,
       );
@@ -181,6 +221,50 @@ export default function (config) {
       }
       return configJson;
     },
+    i18n: {
+      de: {
+        'form-inputs-example': {
+          title: 'Form Inputs Beispiel',
+          select: 'Select Feld',
+          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.",
+          help2: "Ändern Sie den Wert von 'myInitialText'",
+          help2desc:
+            "InitialTextInput bleibt solange im Lade-Status, bis sich der Wert 'myInitialText' ändert.",
+          help3: 'Geben Sie eine Email Adresse ein',
+          help3desc: 'Email Adressen werden validiert.',
+          numbers: {
+            one: 'eins',
+            two: 'zwei',
+            three: 'drei',
+          },
+        },
+      },
+      en: {
+        'form-inputs-example': {
+          title: 'Form Inputs Example',
+          select: 'Select field',
+          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'.",
+          help2: "Change 'myInitialText' to some other value",
+          help2desc:
+            "InitialTextInput text field stays in loading state, as long as 'myInitialText' is not changed.",
+          help3: 'Enter an email address.',
+          help3desc: 'Emails get validated.',
+          numbers: {
+            one: 'one',
+            two: 'two',
+            three: 'three',
+          },
+        },
+      },
+    },
     destroy() {
       // destroy watcher
       stopWatching();

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

@@ -13,18 +13,30 @@ export function isValidText(value) {
  * @returns {boolean|string}
  */
 export function conditionalTest(value, condition) {
-  if (condition === 'Option A') {
+  if (condition === 'B') {
     return value === 'test' || `input ${value} must be "test"`;
   } else {
     return true;
   }
 }
 
+/**
+ * @param {number[]} value
+ * @returns {boolean|string}
+ */
+export function arrayTest(value) {
+  if (value > 10) {
+    return 'Input must be lower 10';
+  }
+  return true;
+}
+
 /**
  * @param {string} value
  * @returns {boolean|string}
  */
 export function isValidEmail(value) {
-  const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  const pattern =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return pattern.test(value) || 'Invalid e-mail.';
 }

package/plugins/@vcmap-show-case/hello-world/README.md

@@ -0,0 +1,31 @@
+# @vcmap/hello-world
+
+> Part of the [VC Map Project](https://github.com/virtualcitySYSTEMS/map-ui)
+
+This is the `@vcmap/ui` **Hello World** plugin!
+
+## Content
+
+The plugin provides a minimal show-case working example including:
+
+- implementing the VcsPlugin interface [index.js](./src/index.js)
+  - plugin config
+  - plugin state (set and getState)
+  - plugin hooks
+    - initialize
+    - onVcsAppMounted
+    - destroy
+  - serializing (toJSON)
+  - getDefaultOptions
+  - internationalization (i18n)
+- sample ui-component [helloWorld.vue](./src/helloWorld.vue)
+  - using vcs and vuetify components
+  - plugin assets (getPluginAssetUrl)
+- plugin API testing [spec](./tests/helloWorld.spec.js)
+
+## Notes
+
+The plugin is loaded by [config/dev.config.json](../../../config/dev.config.json) with `showComponent` set to false.
+You can change the configuration to see the component.
+
+To run the test spec, call `npm run test plugins/@vcmap-show-case/hello-world/tests/helloWorld.spec.js` from the ui root directory.

package/plugins/@vcmap-show-case/hello-world/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@vcmap/hello-world",
+  "description": "A small hello world plugin",
+  "version": "1.0.8",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/hello-world/src/defaultOptions.js

@@ -0,0 +1,4 @@
+export default () => ({
+  showLogHelloWorld: true,
+  showComponent: true,
+});

package/plugins/@vcmap-show-case/hello-world/src/helloWorld.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-sheet class="hello-world">
+    <v-card class="pa-2 ma-2">
+      <v-container>
+        <v-row class="justify-center mb-4">
+          <h1>{{ $t('helloWorld.helloWorld') }}</h1>
+        </v-row>
+        <v-row class="justify-center mb-4">
+          <v-img :src="logoUrl" alt="plugin-assets example" max-width="200" />
+        </v-row>
+        <v-row class="justify-center">
+          <VcsButton
+            v-if="showHelloWorldBtn"
+            icon="mdi-times"
+            tooltip="helloWorld.logTooltip"
+            @click="helloWorld"
+          >
+            {{ $t('helloWorld.log') }}
+          </VcsButton>
+          <VcsButton icon="mdi-times" @click="closeSelf">
+            {{ $t('helloWorld.close') }}
+          </VcsButton>
+        </v-row>
+      </v-container>
+    </v-card>
+  </v-sheet>
+</template>
+
+<style scoped lang="scss">
+  .hello-world {
+    background-color: aqua;
+  }
+</style>
+<script>
+  import { inject } from 'vue';
+  import { VcsButton, getPluginAssetUrl } from '@vcmap/ui';
+  import { VSheet, VCard, VContainer, VRow, VImg } from 'vuetify/lib';
+  import { name } from '../package.json';
+
+  export const windowId = 'hello_world_window_id';
+
+  export default {
+    name: 'HelloWorld',
+    components: {
+      VcsButton,
+      VSheet,
+      VCard,
+      VContainer,
+      VRow,
+      VImg,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const { helloWorld, showHelloWorldBtn } = app.plugins.getByKey(name);
+
+      return {
+        closeSelf() {
+          app.windowManager.remove(windowId);
+        },
+        helloWorld() {
+          // eslint-disable-next-line no-console
+          console.log(helloWorld());
+        },
+        showHelloWorldBtn,
+        logoUrl: getPluginAssetUrl(app, name, 'plugin-assets/vcs_logo.png'),
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/hello-world/src/index.js

@@ -0,0 +1,142 @@
+import { WindowSlot } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+import getDefaultOptions from './defaultOptions.js';
+import HelloWorld, { windowId } from './helloWorld.vue';
+
+/**
+ * @typedef {Object} PluginConfig
+ * @property {boolean} [showLogHelloWorld]
+ * @property {boolean} [showComponent=true] - Whether to show the HelloWorld Vue component or just log 'Hello World!' to console
+ */
+
+/**
+ * @typedef {Object} PluginState
+ * @property {import("@vcmap/ui").WindowPositionOptions} [windowPosition]
+ * @property {boolean} active
+ */
+
+/**
+ * A function returning 'Hello World!'.
+ * @returns {string}
+ */
+export function helloWorld() {
+  return 'Hello World!';
+}
+
+/**
+ * @param {PluginConfig} config - the configuration of this plugin instance, passed in from the app.
+ * @param {string} baseUrl - the absolute URL from which the plugin was loaded (without filename, ending on /)
+ * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<PluginConfig, PluginState>}
+ */
+export default function helloWorldPlugin(config, baseUrl) {
+  // eslint-disable-next-line no-console
+  console.log(config, baseUrl);
+  return {
+    get name() {
+      return name;
+    },
+    get version() {
+      return version;
+    },
+    get mapVersion() {
+      return mapVersion;
+    },
+    get config() {
+      return { ...getDefaultOptions(), ...config };
+    },
+    helloWorld,
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     * @param {PluginState=} state
+     */
+    initialize(vcsUiApp, state) {
+      // eslint-disable-next-line no-console
+      console.log(
+        'Called before loading the rest of the current context. Passed in the containing Vcs UI App ',
+        vcsUiApp,
+        state,
+      );
+      this._app = vcsUiApp;
+    },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     * @returns {Promise<void>}
+     */
+    async onVcsAppMounted(vcsUiApp) {
+      if (this.config.showComponent) {
+        vcsUiApp.windowManager.add(
+          {
+            id: windowId,
+            component: HelloWorld,
+            WindowSlot: WindowSlot.DETACHED,
+            position: {
+              left: '40%',
+              right: '40%',
+            },
+            state: {
+              headerTitle: name,
+            },
+          },
+          name,
+        );
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(name, helloWorld());
+      }
+    },
+    /**
+     * @param {boolean} forUrl
+     * @returns {PluginState}
+     */
+    getState(forUrl) {
+      // eslint-disable-next-line no-console
+      console.log('Called when collecting state, e.g. for create link', forUrl);
+      const state = {
+        active: this._app.windowManager.has(windowId),
+      };
+      if (!forUrl) {
+        state.position = this._app.windowManager.get(windowId).position;
+      }
+      return state;
+    },
+    getDefaultOptions,
+    /**
+     * @returns {PluginConfig}
+     */
+    toJSON() {
+      // eslint-disable-next-line no-console
+      console.log('Called when serializing this plugin instance');
+      const defaultOptions = getDefaultOptions();
+      const options = {};
+      if (this.config.showLogHelloWorld !== defaultOptions.showLogHelloWorld) {
+        options.showLogHelloWorld = this.config.showLogHelloWorld;
+      }
+      if (this.config.showComponent !== defaultOptions.showComponent) {
+        options.showComponent = this.config.showComponent;
+      }
+      return options;
+    },
+    i18n: {
+      en: {
+        helloWorld: {
+          helloWorld: 'Hello World',
+          close: 'Close',
+          log: 'Log',
+          logTooltip: 'Log Hello World to console',
+        },
+      },
+      de: {
+        helloWorld: {
+          helloWorld: 'Hallo Welt',
+          close: 'Schließen',
+          log: 'Loggen',
+          logTooltip: 'Logge Hello World in Console',
+        },
+      },
+    },
+    destroy() {
+      // eslint-disable-next-line no-console
+      console.log('hook to cleanup');
+    },
+  };
+}

package/plugins/@vcmap-show-case/hello-world/tests/helloWorld.spec.js

@@ -0,0 +1,53 @@
+import { vi, describe, it, expect, beforeAll } from 'vitest';
+import { VcsUiApp } from '@vcmap/ui';
+import { VcsModule } from '@vcmap/core';
+import { helloWorld } from '../src/index.js';
+import { name } from '../package.json';
+
+describe('HelloWorld', () => {
+  describe('helloWorld', () => {
+    it('should return hello World', () => {
+      const val = helloWorld();
+      expect(val).to.equal('Hello World!');
+    });
+  });
+
+  describe('addModule', () => {
+    let module;
+    /** @type {VcsUiApp} */
+    let app;
+    let added;
+
+    beforeAll(async () => {
+      module = new VcsModule({
+        plugins: [
+          {
+            name,
+          },
+        ],
+      });
+      app = new VcsUiApp();
+      added = vi.fn();
+      app.moduleAdded.addEventListener(added);
+      // since plugin's entry cannot be resolved, we mock the _parseContext method and call override on the plugins collection
+      vi.spyOn(app, '_parseModule').mockImplementationOnce(() => {
+        app.plugins.override({ name });
+      });
+      await app.addModule(module);
+    });
+
+    it('should add the module', () => {
+      expect(app.getModuleById(module._id)).to.equal(module);
+    });
+
+    it('should raise the contextAdded event', () => {
+      expect(added).toHaveBeenCalledTimes(1);
+    });
+
+    it('should add plugins part of the module', () => {
+      const plugin = app.plugins.getByKey(name);
+      // eslint-disable-next-line no-unused-expressions
+      expect(plugin).not.to.be.undefined;
+    });
+  });
+});

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/package.json

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