@vcmap/ui 5.0.0-rc.6

package/src/styles/_typography.scss

@@ -0,0 +1,42 @@
+.v-application {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  div,
+  span,
+  button,
+  input,
+  .caption,
+  .tooltip,
+  p {
+    &:not(.v-icon) {
+      font-family: 'Titillium Web', sans-serif !important;
+    }
+  }
+
+  h1 {
+    font-size: 16px;
+  }
+
+  h2 {
+    font-size: 14px;
+  }
+
+  h3 {
+    font-size: 12px;
+    font-weight: normal;
+  }
+
+  h4 {
+    font-size: 12px;
+    font-weight: normal;
+    color: rgba(#222222, 0.5);
+  }
+
+  .text--disabled {
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+}

package/src/styles/main.scss

@@ -0,0 +1,9 @@
+@import './utils/all';
+
+@import './theming';
+@import './typography';
+
+html.vcs-ui {
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+}

package/src/styles/utils/_all.scss

@@ -0,0 +1,12 @@
+@import './border';
+@import './cursor';
+@import './display';
+@import './fade-in';
+@import './transform';
+@import './position';
+@import './size';
+@import './slide-in';
+@import './spacing';
+@import './text';
+@import './transition';
+@import './z-index';

package/src/styles/utils/_border.scss

@@ -0,0 +1,7 @@
+.border-1--primary {
+  border: 1px solid var(--v-primary-base);
+}
+
+.border-2--primary {
+  border: 2px solid var(--v-primary-base);
+}

package/src/styles/utils/_cursor.scss

@@ -0,0 +1,15 @@
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+
+.user-select-none {
+  user-select: none;
+}

package/src/styles/utils/_display.scss

@@ -0,0 +1,3 @@
+.d-contents {
+  display: contents;
+}

package/src/styles/utils/_fade-in.scss

@@ -0,0 +1,8 @@
+.fade-in-100-ease-enter-active,
+.fade-in-100-ease-leave-active {
+  transition: opacity 0.1s ease;
+}
+.fade-in-100-ease-enter,
+.fade-in-100-ease-leave-to {
+  opacity: 0;
+}

package/src/styles/utils/_position.scss

@@ -0,0 +1,38 @@
+.position-absolute {
+  position: absolute;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.pos-a-0 {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.pos-t-0 {
+  top: 0;
+}
+
+.pos-t-11 {
+  top: 44px;
+}
+
+.pos-r-0 {
+  right: 0;
+}
+
+.pos-r-1 {
+  right: 4px;
+}
+
+.pos-r-8 {
+  right: 32px;
+}
+
+.pos-b-4 {
+  bottom: 16px;
+}

package/src/styles/utils/_size.scss

@@ -0,0 +1,79 @@
+.w-full {
+  width: 100%;
+}
+
+.w-half {
+  width: 50%;
+}
+
+.w-max-half {
+  max-width: 50% !important;
+}
+
+.w-max-unset {
+  max-width: unset !important;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-3 {
+  height: 12px;
+}
+
+.h-6 {
+  height: 24px;
+}
+
+.h-8 {
+  height: 32px;
+}
+
+.h-8 {
+  height: 32px;
+}
+
+.h-10 {
+  height: 40px;
+}
+
+.h-10\.5 {
+  height: 42px;
+}
+
+.h-12 {
+  height: 48px;
+}
+
+.h-16 {
+  height: 64px;
+}
+
+.w-3 {
+  width: 12px;
+}
+
+.w-4 {
+  width: 16px;
+}
+
+.w-8 {
+  width: 32px;
+}
+
+.w-16 {
+  width: 64px;
+}
+
+.w-12 {
+  width: 48px;
+}
+
+.w-13 {
+  width: 52px;
+}
+
+.w-max-16 {
+  max-width: 64px !important;
+}

package/src/styles/utils/_slide-in.scss

@@ -0,0 +1,26 @@
+.slide-from-left-300-ease-enter-active,
+.slide-from-left-300-ease-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-from-left-300-ease-enter,
+.slide-from-left-300-ease-leave-to {
+  transform: translateX(-120%);
+}
+
+.slide-from-top-200-ease-enter-active,
+.slide-from-top-200-ease-leave-active {
+  transition: transform 0.2s ease;
+}
+.slide-from-top-200-ease-enter,
+.slide-from-top-200-ease-leave-to {
+  transform: translateY(-120%);
+}
+
+.slide-from-top-300-ease-enter-active,
+.slide-from-top-300-ease-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-from-top-300-ease-enter,
+.slide-from-top-300-ease-leave-to {
+  transform: translateY(-120%);
+}

package/src/styles/utils/_spacing.scss

@@ -0,0 +1,11 @@
+.-mt-2 {
+  margin-top: -8px;
+}
+.-mx-2 {
+  margin-left: -8px;
+  margin-right: -8px;
+}
+.-mx-3 {
+  margin-left: -12px;
+  margin-right: -12px;
+}

package/src/styles/utils/_text.scss

@@ -0,0 +1,30 @@
+.font-size-14 {
+  font-size: 14px !important;
+}
+.font-size-12 {
+  font-size: 12px !important;
+}
+
+.line-height-1\.2 {
+  line-height: 1.2 !important;
+}
+
+.line-height-30px {
+  line-height: 30px;
+}
+
+.line-height-1 {
+  line-height: 1 !important;
+}
+
+strong.caption {
+  font-weight: bolder !important;
+}
+
+.theme--light.v-icon {
+  color: inherit !important;
+}
+
+#app.theme--light.v-application .text--primary {
+  color: var(--v-primary-base) !important;
+}

package/src/styles/utils/_transform.scss

@@ -0,0 +1,11 @@
+.flip-vertical {
+  transform: scale(-1, 1);
+}
+
+.rotate {
+  transition: 0.1s transform ease;
+
+  &-180--right {
+    transform: rotate(-180deg);
+  }
+}

package/src/styles/utils/_transition.scss

@@ -0,0 +1,11 @@
+.transition-color-100-ease {
+  transition: color 0.1s ease;
+}
+
+.transition-transform-100-ease {
+  transition: transform 0.1s ease;
+}
+
+.transition-transform-200-ease {
+  transition: transform 0.2s ease;
+}

package/src/styles/utils/_z-index.scss

@@ -0,0 +1,15 @@
+.z-index-1 {
+  z-index: 1;
+}
+
+.z-index-2 {
+  z-index: 2;
+}
+
+.z-index-99 {
+  z-index: 99;
+}
+
+.z-index-100 {
+  z-index: 100;
+}

package/src/vcsUiApp.js

@@ -0,0 +1,223 @@
+import {
+  VcsApp,
+  contextIdSymbol,
+  Collection,
+  makeOverrideCollection,
+  destroyCollection,
+  OverrideClassRegistry,
+} from '@vcmap/core';
+import { getLogger as getLoggerByName } from '@vcsuite/logger';
+import {
+  isValidPackageName,
+  loadPlugin,
+  serializePlugin,
+  deserializePlugin,
+} from './pluginHelper.js';
+import { ToolboxManager } from './manager/toolbox/toolbox-manager.js';
+import { WindowManager } from './manager/window/windowManager.js';
+import ButtonManager from './manager/buttonManager.js';
+import { createContentTreeCollection } from './contentTree/contentTreeCollection.js';
+import { contentTreeClassRegistry } from './contentTree/contentTreeItem.js';
+
+/**
+ * @typedef {import("@vcmap/core").VcsAppConfig} VcsUiAppConfig
+ * @property {Array<Object>} [plugins]
+ * @property {Array<ContentTreeItemOptions>} [contentTree]
+ */
+
+/**
+ * @typedef {Object} PluginConfig
+ * @property {string} name
+ * @property {string|undefined} entry
+ * @property {string|undefined} version
+ */
+
+/**
+ * @callback createPlugin
+ * @template {Object} P
+ * @param {P} config
+ * @returns {VcsPlugin<P>}
+ */
+
+/**
+ * @interface VcsPlugin
+ * @template {Object} P
+ * @property {string} version
+ * @property {string} name
+ * @property {function(VcsUiApp)} initialize - called on plugin added
+ * @property {function(VcsUiApp)} onVcsAppMounted - called on mounted of VcsApp.vue
+ * @property {function():P} [toJSON] - serialization
+ * @property {function():Promise<void>} destroy
+ * @api
+ */
+
+/**
+ * @interface VcsComponentManager
+ * @template {Object} T - the component type
+ * @template {Object} O - component options
+ * @property {VcsEvent<T>} added
+ * @property {VcsEvent<T>} removed
+ * @property {string[]} componentIds - all registered component ids as reactive array
+ * @property {function(string):T} get - get component by id
+ * @property {function(string):boolean} has - has component with id
+ * @property {function(string)} remove - remove component by id
+ * @property {function(O, string|vcsAppSymbol):T} add - add component of owner
+ * @property {function(string|vcsAppSymbol)} removeOwner - remove all components of owner
+ * @property {function()} clear - remove all registered components
+ * @property {function()} destroy
+ * @api
+ */
+
+/**
+ * @returns {Logger}
+ */
+function getLogger() {
+  return getLoggerByName('VcsUiApp');
+}
+
+/**
+ * @class
+ */
+class VcsUiApp extends VcsApp {
+  constructor() {
+    super();
+    /**
+     * @type {OverrideCollection<VcsPlugin>}
+     * @private
+     */
+    this._plugins = makeOverrideCollection(
+      new Collection(),
+      () => this.dynamicContextId,
+      serializePlugin,
+      deserializePlugin,
+    );
+    this._pluginAddedListener = this._plugins.added.addEventListener((plugin) => {
+      if (plugin.initialize) {
+        plugin.initialize(this);
+      }
+    });
+
+    /**
+     * @type {OverrideClassRegistry<ContentTreeItem>}
+     * @private
+     */
+    this._contentTreeClassRegistry = new OverrideClassRegistry(contentTreeClassRegistry);
+
+    /**
+     * @type {OverrideContentTreeCollection}
+     * @private
+     */
+    this._contentTree = createContentTreeCollection(this);
+
+    /**
+     * @type {ToolboxManager}
+     * @private
+     */
+    this._toolboxManager = new ToolboxManager();
+
+    /**
+     * @type {WindowManager}
+     * @private
+     */
+    this._windowManager = new WindowManager();
+    /**
+     * @type {ButtonManager}
+     * @private
+     */
+    this._navbarManager = new ButtonManager();
+  }
+
+  /**
+   * @type {OverrideCollection<VcsPlugin>}
+   * @readonly
+   */
+  get plugins() { return this._plugins; }
+
+  /**
+   * @type {OverrideCollection<ContentTreeItem>}
+   * @readonly
+   */
+  get contentTree() { return this._contentTree; }
+
+  /**
+   * @type {OverrideClassRegistry<ContentTreeItem>}
+   * @readonly
+   */
+  get contentTreeClassRegistry() { return this._contentTreeClassRegistry; }
+
+  /**
+   * @returns {ToolboxManager}
+   * @readonly
+   */
+  get toolboxManager() { return this._toolboxManager; }
+
+  /**
+   * @returns {WindowManager}
+   * @readonly
+   */
+  get windowManager() { return this._windowManager; }
+
+  /**
+   * @returns {ButtonManager}
+   * @readonly
+   */
+  get navbarManager() { return this._navbarManager; }
+
+  /**
+   * @param {import("@vcmap/core").Context} context
+   * @returns {Promise<void>}
+   * @protected
+   */
+  async _parseContext(context) {
+    const { config } = context;
+    if (Array.isArray(config.plugins)) {
+      const plugins = await Promise.all(config.plugins.map(async (pluginConfig) => {
+        const plugin = await loadPlugin(this, pluginConfig.name, pluginConfig);
+        if (!plugin) {
+          return null;
+        }
+        if (!isValidPackageName(plugin.name)) {
+          getLogger().warning(`plugin ${plugin.name} has no valid package name!`);
+        }
+        plugin[contextIdSymbol] = context.id;
+        return plugin;
+      }));
+
+      plugins
+        .filter(p => p)
+        .map(p => this._plugins.override(p))
+        .filter(p => p);
+    }
+    await super._parseContext(context);
+    await this._contentTree.parseItems(config.contentTree, context.id);
+  }
+
+  /**
+   * @param {string} contextId
+   * @returns {Promise<void>}
+   * @protected
+   */
+  async _removeContext(contextId) {
+    await Promise.all([
+      super._removeContext(contextId),
+      this._plugins.removeContext(contextId),
+      this._contentTree.removeContext(contextId),
+    ]);
+  }
+
+  /**
+   * Destroys the vcsUiApp and all its collections, their content and ui managers.
+   */
+  destroy() {
+    this.windowManager.destroy();
+    this.navbarManager.destroy();
+    // TODO destroy other manager
+    this._pluginAddedListener();
+    destroyCollection(this._plugins);
+    destroyCollection(this._contentTree);
+    this._contentTreeClassRegistry.destroy();
+    super.destroy();
+  }
+}
+
+export default VcsUiApp;

package/src/vuePlugins/i18n.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+import de from '../lang/de.js';
+import en from '../lang/en.js';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: 'de',
+  messages: {
+    en,
+    de,
+  },
+});
+
+Vue.filter('translate', (value, args) => i18n.t(value, args));
+
+// eslint-disable-next-line import/prefer-default-export
+export { i18n };

package/src/vuePlugins/vuetify.js

@@ -0,0 +1,54 @@
+import '@mdi/font/css/materialdesignicons.css';
+
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+import { Icons } from '@vcsuite/ui-components';
+
+Vue.use(Vuetify);
+
+const vuetify = new Vuetify({
+  treeShake: false,
+  defaultAssets: {
+    font: {
+      family: 'titillium-web',
+    },
+  },
+  theme: {
+    options: {
+      customProperties: true,
+    },
+    themes: {
+      light: {
+        basic: '#FFFFFF',
+        primary: '#409D76',
+        accent: '#EDEDED',
+        warning: '#FFCE00',
+        'gray-200': '#DEDEDE',
+        gray: '#707070',
+        // todo: change remaining colors
+        secondary: '#222222',
+        error: '#AA0000',
+        info: '#2196F3',
+        success: '#4CAF50',
+      },
+      dark: {
+        basic: '#000000',
+        primary: '#409D76',
+        secondary: '#FFFFFF',
+        accent: '#757575',
+        warning: '#FFCE00',
+        error: '#FF5252',
+      },
+    },
+  },
+  icons: {
+    iconfont: 'mdi',
+    values: {
+      ...Icons,
+    },
+  },
+});
+
+// eslint-disable-next-line import/prefer-default-export
+export { vuetify };

package/start.js

@@ -0,0 +1,3 @@
+import { initApp } from '@vcmap/ui';
+
+initApp('#app', 'map.config.json');