@vcmap/ui 5.0.0-rc.6

package/lib/ui.js

@@ -0,0 +1 @@
+export * from '@vcmap/ui';

package/lib/uicomponents.js

@@ -0,0 +1 @@
+export * from '@vcsuite/ui-components';

package/lib/vue-composition-api.js

@@ -0,0 +1,2 @@
+export * from '@vue/composition-api';
+export { default } from '@vue/composition-api';

package/lib/vue.js

@@ -0,0 +1 @@
+export { default } from 'vue';

package/lib/vuetify.js

@@ -0,0 +1,2 @@
+export * from 'vuetify/lib';
+export { default } from 'vuetify/lib';

package/map.config.json

@@ -0,0 +1,35 @@
+{
+  "plugins": [
+    {
+      "name": "@vcmap/project-selector",
+      "entry": "plugins/@vcmap/project-selector/index.js",
+      "selected": "VC Map Base",
+      "selectedContexts": ["development"],
+      "open": true,
+      "projects": [
+        {
+          "name": "VC Map HOSTING",
+          "description": "AEROWEST DEMO (Standard Hosting Layout)",
+          "contexts": [
+            { "configUrl": "config/aerowest.config.json" }
+          ]
+        },
+        {
+          "name": "VC Map Berlin",
+          "description": "Berlin DEMO (Standard Hosting Layout)",
+          "contexts": [
+            { "configUrl": "config/base.config.json" },
+            { "configUrl": "config/berlin.config.json" }
+          ]
+        }
+      ],
+      "contexts": [
+        {
+          "name": "development",
+          "description": "context containing examples, showcases and other stuff",
+          "configUrl": "config/dev.config.json"
+        }
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@vcmap/ui",
+  "version": "5.0.0-rc.6",
+  "author": "Virtual City Systems",
+  "license": "MIT",
+  "scripts": {
+    "start": "vite",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "coverage:gitlab": "vitest run --coverage --reporter junit --outputFile test-report.xml",
+    "build-preview": "node build/buildPreview.js",
+    "preview": "vite preview",
+    "build": "node build/build.js",
+    "lint": "eslint \"{src,tests,build}/**/*.{js,mjs,vue}\"",
+    "prepack": "node build/build.js",
+    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/virtualcitySYSTEMS/map-ui.git"
+  },
+  "files": [
+    "index.js",
+    "start.js",
+    "map.config.json",
+    "dist/",
+    "src/",
+    "plugins/",
+    "lib/",
+    "build/",
+    "config/",
+    "!plugins/node_modules/"
+  ],
+  "dependencies": {
+    "@mdi/font": "^5.9.55",
+    "@vcsuite/check": "^1.1.2",
+    "@vcsuite/logger": "^1.0.1",
+    "@vcsuite/parsers": "^1.0.1",
+    "rxjs": "^6.6.6",
+    "uuid": "^8.3.2",
+    "vue-i18n": "^8.24.1"
+  },
+  "peerDependencies": {
+    "@vcmap/cesium": "~1.92.1",
+    "@vcmap/core": "^5.0.0-rc.10",
+    "@vcsuite/ui-components": "~0.1.13",
+    "@vue/composition-api": "~1.4.5",
+    "ol": "~6.13.0",
+    "vue": "~2.6.14",
+    "vuetify": "~2.6.3"
+  },
+  "devDependencies": {
+    "@vcmap/rollup-plugin-vcs-ol": "^1.0.1",
+    "@vcsuite/eslint-config": "^2.1.1",
+    "@vue/test-utils": "^1.3.0",
+    "c8": "^7.11.0",
+    "eslint": "^8.9.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "jest-canvas-mock": "^2.3.1",
+    "jsdoc": "^3.6.7",
+    "jsdoc-plugin-typescript": "^2.0.6",
+    "jsdom": "^19.0.0",
+    "rollup-plugin-strip-pragma": "^1.0.0",
+    "sass": "1.32.13",
+    "typescript": "^4.2.4",
+    "unplugin-vue-components": "^0.17.15",
+    "vite": "^2.8.6",
+    "vite-plugin-vue2": "^1.9.3",
+    "vitest": "^0.6.1",
+    "vue-loader": "^16.6.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard",
+    "rules": {
+      "selector-pseudo-element-no-unknown": [
+        true,
+        {
+          "ignorePseudoElements": [
+            "v-deep"
+          ]
+        }
+      ]
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "@vcsuite/eslint-config/vue"
+    ],
+    "plugins": [
+      "jsdoc"
+    ],
+    "settings": {
+      "import/resolver": {
+        "alias": {
+          "map": [
+            [
+              "@vcmap/ui",
+              "./index.js"
+            ]
+          ]
+        }
+      }
+    },
+    "rules": {
+      "jsdoc/check-tag-names": "off"
+    }
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "not Chrome < 97",
+    "last 2 Safari versions",
+    "not Safari < 15",
+    "last 2 iOS versions",
+    "not iOS < 15",
+    "last 2 Firefox versions",
+    "not Firefox < 91",
+    "last 2 Edge versions",
+    "not Edge < 97"
+  ],
+  "engines": {
+    "node": "^16.14.0",
+    "npm": "^8.3.1"
+  },
+  "type": "module"
+}

package/plugins/@vcmap/pluginExample/config.json

@@ -0,0 +1,6 @@
+{
+    "name": "@vcmap/pluginExample",
+    "entry": "plugins/@vcmap/pluginExample/index.js",
+    "selectOptions": ["A", "B", "C", "D"],
+    "initialTextInput": "myInitialText"
+}

package/plugins/@vcmap/pluginExample/index.js

@@ -0,0 +1,193 @@
+import { ref, reactive, watch } from '@vue/composition-api';
+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 { conditionalTest, isValidEmail, isValidText } from './validation.js';
+import pluginExampleComponent from './pluginExampleComponent.vue';
+
+/**
+ * @returns {Logger}
+ */
+function getLogger() {
+  return getLoggerByName('@vcmap/pluginExample');
+}
+
+/**
+ * @typedef PluginExampleConfig
+ * @property {string} nonReactiveProp
+ * @property {string[]} selectOptions
+ * @property {string} initialTextInput
+ */
+
+/**
+ * @typedef PluginExampleState
+ * @property {string} selected
+ * @property {string} conditionalInput
+ * @property {string} initialTextInput
+ * @property {number} numberInput
+ * @property {boolean} checkboxInput
+ * @property {string} email
+ */
+
+/**
+ * @returns {PluginExampleConfig}
+ */
+export function getDefaultConfig() {
+  return defaultConfig;
+}
+
+/**
+ *
+ * @param {PluginExampleConfig} config
+ * @returns {VcsPlugin}
+ */
+export default function (config) {
+  /**
+   * @type {PluginExampleConfig}
+   */
+  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]),
+    // ref prop with getter setter --> validation
+    _initialTextInput: ref(defaultConfig.initialTextInput),
+    set initialTextInput(value) {
+      const validation = isValidText(value);
+      if (validation === true) {
+        this._initialTextInput.value = value;
+      } else {
+        getLogger().error('Error setting initialTextInput on plugin config:', validation);
+      }
+    },
+    get initialTextInput() { return this._initialTextInput; },
+  };
+  if (config.initialTextInput) {
+    pluginConfig.initialTextInput = config.initialTextInput;
+  }
+
+  /**
+   * @type {PluginExampleState}
+   */
+  const pluginState = reactive({
+    selected: pluginConfig.selectOptions.value[0],
+    conditionalInput: '',
+    initialTextInput: pluginConfig.initialTextInput.value,
+    numberInput: 100.156,
+    checkboxInput: false,
+    email: '',
+  });
+
+
+  /**
+   * watcher to update state, when specific config properties are changed
+   * @see https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-multiple-sources
+   *
+   * additional notes:
+   * - watching refs, changes are only triggered on resigning the value
+   * - 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}
+   */
+  const stopWatching = watch(
+    [pluginConfig.selectOptions, pluginConfig.initialTextInput],
+    ([selectOptions, initialTextInput]) => {
+      if (!selectOptions.includes(pluginState.selected)) {
+        getLogger().error('invalid state', pluginState.selected);
+        pluginState.selected = selectOptions[0];
+      }
+      // XXX should initial states be overwritten on config change?
+      pluginState.initialTextInput = initialTextInput;
+    },
+  );
+
+  /**
+   * returns serializable state object
+   * @returns {PluginExampleState}
+   */
+  function getSerializedState() {
+    // use destruction to get rid of reactive getter/ setter. be careful with nested props!
+    return { ...pluginState };
+  }
+
+  /**
+   * can be async
+   * @param {PluginExampleState} stateObject
+   */
+  function setSerializedState(stateObject) {
+    /**
+     * string returns of the validation functions are treated as error
+     * @type {Object<string, true|string>}
+     */
+    const validation = {
+      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]);
+        // XXX should invalid props be assigned or not?
+        delete stateObject[key];
+      }
+    });
+    Object.assign(pluginState, stateObject);
+  }
+
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    config: pluginConfig,
+    state: pluginState,
+    getSerializedState,
+    setSerializedState,
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Plugin Example',
+          icon: '$vcsHealthCareIndustries',
+          title: 'Example Plugin Map Button Tooltip',
+        },
+        {
+          id: 'pluginExample',
+          component: pluginExampleComponent,
+          slot: WindowSlot.STATIC,
+          state: {
+            headerTitle: 'Plugin Example',
+            headerIcon: '$vcsCircle',
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add({
+        id: 'pluginExample',
+        location: ButtonLocation.TOOL,
+        action,
+      }, packageJSON.name);
+      this._destroyAction = destroy;
+    },
+    toJSON: async () => {
+      const configJson = {};
+      configJson.selectOptions = pluginConfig.selectOptions;
+      if (pluginConfig.initialTextInput !== defaultConfig.initialTextInput) {
+        configJson.initialTextInput = defaultConfig.initialTextInput;
+      }
+      return configJson;
+    },
+    destroy() {
+      // destroy watcher
+      stopWatching();
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap/pluginExample/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vcmap/plugin-example",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0",
+  "dependencies": {
+  }
+}