@vcmap/ui 6.0.0-rc.7 → 6.0.0-rc.8

package/src/components/vector-properties/VcsFeatureTransforms.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-transforms">
     <v-container class="pl-0 pr-1 py-1">
       <v-row
         no-gutters

package/src/components/vector-properties/VcsVectorPropertiesComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-vector-properties-component"
     :heading="$attrs.heading || 'components.vectorProperties.header'"
     :expandable="expandable"
     :start-open="startOpen"

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-viewpoint-component">
     <VcsFormSection
       heading="components.viewpoint.general"
       :expandable="expandable"

package/src/components/viewpoint/VcsViewpointEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <AbstractConfigEditor
+    class="vcs-viewpoint-editor"
     @submit="apply"
     @cancel="cancel"
     @reset="reset"

package/src/contentTree/LayerTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="layer-tree">
     <VcsTreeview
       v-if="tree && tree.length"
       :items="tree"

package/src/featureInfo/AddressBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="address-balloon-component">
     <template #default="{ attrs }">
       <v-list-item
         lines="two"

package/src/featureInfo/BalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mx-auto elevation-0" v-if="position">
+  <v-card class="mx-auto elevation-0 balloon-component" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
       <v-list-item class="px-1">
         <template #prepend="prependScope">

package/src/featureInfo/IframeComponent.vue

@@ -1,5 +1,10 @@
 <template>
-  <iframe :src="src" :title="title" :style="{ height, width }" />
+  <iframe
+    :src="src"
+    :title="title"
+    :style="{ height, width }"
+    class="iframe-component"
+  />
 </template>
 <script>
   import { inject } from 'vue';

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <BalloonComponent v-bind="{ ...$attrs }">
+  <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
     <VcsMarkdown :content="content" />
   </BalloonComponent>
 </template>

package/src/legend/StyleLegendItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list>
+  <v-list class="style-legend-item">
     <v-row no-gutters>
       <v-col
         v-for="(row, idx) in item.rows"

package/src/legend/VcsLegend.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet class="overflow-y-auto">
+  <v-sheet class="overflow-y-auto vcs-legend">
     <v-expansion-panels
       variant="accordion"
       multiple

package/src/manager/collectionManager/CollectionComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <vcs-expansion-panel
+    class="collection-component"
     :heading="title"
     :header-actions="actions"
     :action-button-list-overflow-count="overflowCount"

package/src/manager/contextMenu/ContextMenuComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click.stop="close">
+  <div @click.stop="close" class="context-menu-component">
     <VcsActionList :actions="actions" :show-icon="true" />
   </div>
 </template>

package/src/manager/panel/PanelManagerComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vcs-panel-frame"
+    class="vcs-panel-frame panel-manager-component"
     @mouseup="setResizing(undefined)"
     @mouseleave="setResizing(undefined)"
     ref="panelFrameRef"
@@ -85,7 +85,7 @@
    * @description PanelManager rendering all Panels
    */
   export default {
-    name: 'VcsPanelManager',
+    name: 'VcsPanelManagerComponent',
     components: {
       VcsMainMap,
       PanelComponent,

package/src/manager/toolbox/GroupToolboxComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="orderedButtons.length > 0">
+  <div v-if="orderedButtons.length > 0" class="group-toolbox-component">
     <v-menu
       v-model="open"
       @update:model-value="$emit('toggle', open)"
@@ -66,7 +66,7 @@
    * @vue-computed {boolean} hasActiveAction - Whether the group has an active action.
    */
   export default {
-    name: 'ToolboxActionGroup',
+    name: 'GroupToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,

package/src/manager/toolbox/SelectToolboxComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="group.action"
-    class="d-flex"
+    class="d-flex select-toolbox-component"
     :class="{ 'vcs-toolbox-action-select-button--active': open }"
   >
     <VcsToolButton
@@ -75,7 +75,7 @@
    * @vue-prop {SelectToolboxComponent} group - A toolbox group of type 'select'.
    */
   export default {
-    name: 'ToolboxActionSelect',
+    name: 'SelectToolboxComponent',
     components: {
       VcsToolButton,
       VMenu,

package/src/manager/toolbox/ToolboxManagerComponent.vue

@@ -1,9 +1,10 @@
 <template>
   <v-toolbar
     v-if="toolboxOpen && orderedGroups.length > 0 && mdAndUp"
-    class="vcs-toolbox mx-auto elevation-4 opacity-80"
+    class="vcs-toolbox mx-auto elevation-4 opacity-80 toolbox-manager-component"
     :class="{
       'rounded-b': !open,
+      'vcs-toolbox__secondary': !isDefaultToolbox,
     }"
     :height="toolboxHeight"
     :style="{ zIndex }"
@@ -41,6 +42,16 @@
 </template>
 
 <style lang="scss" scoped>
+  .vcs-toolbox__secondary {
+    &.vcs-toolbox.v-theme {
+      &--light {
+        background-color: rgba(var(--v-theme-primary-lighten-3));
+      }
+      &--dark {
+        background-color: rgba(var(--v-theme-primary-darken-4));
+      }
+    }
+  }
   .vcs-toolbox {
     margin-top: 2px;
     width: fit-content;

package/src/manager/window/WindowComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-sheet
     :id="`window-component--${windowState.id}`"
-    class="elevation-3 position-absolute d-flex flex-column"
+    class="elevation-3 position-absolute d-flex flex-column window-component"
     v-bind="$attrs"
     @dragstart="dragStart"
     @dragend="dragEnd"

package/src/manager/window/WindowManager.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="{ 'win-container-mobile': addMobileClass }">
+  <div
+    :class="{ 'win-container-mobile': addMobileClass }"
+    class="window-manager"
+  >
     <WindowComponent
       v-for="id in componentIds"
       :key="id"

package/src/navigation/MapNavigation.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-container :class="xs ? 'nav-container mobile' : 'nav-container'">
+  <v-container
+    :class="xs ? 'nav-container mobile' : 'nav-container'"
+    class="map-navigation"
+  >
     <v-row>
       <VcsCompass
         :view-mode="viewMode"

package/src/navigation/ObliqueRotation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex rounded vcs-oblique-orientation">
+  <div class="d-inline-flex rounded oblique-orientation">
     <div class="d-inline-flex rounded inner">
       <OrientationToolsButton
         @click="input(-90)"
@@ -56,7 +56,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .vcs-oblique-orientation {
+  .oblique-orientation {
     box-shadow: rgba(0, 0, 0, 0.15) 0 2px 2px 0;
     .inner {
       box-shadow: rgba(0, 0, 0, 0.25) 0 -2px 2px 0 inset;

package/src/navigation/OrientationToolsButton.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card
-    class="d-flex align-center justify-center text-center btn-orientation-tools"
+    class="d-flex align-center justify-center text-center btn-orientation-tools orientation-tools-button"
     v-bind="{ ...$attrs }"
     :height="height"
     :width="width"

package/src/navigation/TiltSlider.vue

@@ -1,5 +1,6 @@
 <template>
   <v-card
+    class="tilt-slider"
     :width="minWidth"
     :height="minHeight"
     v-bind="props"

package/src/navigation/VcsCompass.vue

@@ -4,7 +4,7 @@
       transform: `rotate(${compassRotation}deg)`,
     }"
     @click="$emit('update:modelValue', 0)"
-    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease"
+    class="d-flex flex-column justify-center align-center position-relative rounded-circle user-select-none transition-transform-200-ease vcs-compass"
     elevation="1"
     :height="height"
     :width="width"

package/src/navigation/VcsZoomButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded vcs-navigation-zoom">
+  <div class="rounded vcs-navigation-zoom vcs-zoom-button">
     <div class="rounded inner">
       <OrientationToolsButton
         @click="$emit('zoom-in')"

package/src/notifier/NotifierComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="notifier-component">
     <v-snackbar
       v-for="notification in notifications"
       :key="notification.id"

package/src/search/ResultItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list-item v-if="item" v-bind="$attrs">
+  <v-list-item v-if="item" v-bind="$attrs" class="result-item">
     <template #prepend v-if="item.icon">
       <v-icon>
         {{ item.icon }}

package/src/search/ResultsComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <v-list
-    class="ma-0 overflow-y-auto vcs-search-results"
+    class="ma-0 overflow-y-auto vcs-search-results results-component"
     v-model:selected="highlighted"
   >
     <ResultItem

package/src/search/SearchComponent.vue

@@ -1,6 +1,8 @@
 <template>
   <v-sheet>
-    <span class="d-flex justify-space-between align-center mt-1 ml-2">
+    <span
+      class="d-flex justify-space-between align-center mt-1 ml-2 search-component"
+    >
       <v-icon class="pa-1" :size="searchIconSize"> $vcsSearch </v-icon>
       <VcsTextField
         class="d-inline-block user-select-none w-100 mx-1"

package/src/uiConfig.d.ts

@@ -137,9 +137,13 @@ export type UiConfigObject = {
      */
     displayQuality?: import("@vcmap/core").DisplayQualityOptions | undefined;
     /**
-     * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+     * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
      */
     vuetifyTheme?: any;
+    /**
+     * - open the legend window, if new layer has a config
+     */
+    openLegendOnAdd?: boolean | undefined;
 };
 /**
  * @typedef {{
@@ -206,7 +210,8 @@ export type UiConfigObject = {
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
- * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+ * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+ * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
  */
 /**
  * @extends {Collection<UiConfigurationItem<unknown>>}
@@ -233,7 +238,7 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
      */
     private _listeners;
     /**
-     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+     * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Record<string, *> & UiConfigObject>>}
      */
     get config(): {
         readonly [x: string]: any;
@@ -472,9 +477,13 @@ declare class UiConfig extends Collection<UiConfigurationItem<unknown>> {
             } | undefined;
         } | undefined;
         /**
-         * - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+         * - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
          */
         readonly vuetifyTheme?: any;
+        /**
+         * - open the legend window, if new layer has a config
+         */
+        readonly openLegendOnAdd?: boolean | undefined;
     };
 }
 import { Collection } from '@vcmap/core';

package/src/uiConfig.js

@@ -70,7 +70,8 @@ import { reactive, readonly } from 'vue';
  * @property {boolean} [hideSettings] - can be used to hide the settings Window
  * @property {boolean} [overviewMapActiveOnStartup] - can be used to activate the overviewMap on startup
  * @property {import("@vcmap/core").DisplayQualityOptions} [displayQuality] - the display quality settings
- * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuration https://vuetifyjs.com/en/features/theme/
+ * @property {import("./vuetifyPlugins/vuetify.js").VcsThemes} [vuetifyTheme] - Vuetify Theming, also see vuetify configuraton https://vuetifyjs.com/en/features/theme/
+ * @property {boolean} [openLegendOnAdd] - open the legend window, if new layer has a config
  */
 
 /**
@@ -117,7 +118,7 @@ class UiConfig extends Collection {
   }
 
   /**
-   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Object<string, *> & UiConfigObject>>}
+   * @type {import("vue").DeepReadonly<import("vue").UnwrapNestedRefs<Record<string, *> & UiConfigObject>>}
    */
   get config() {
     return this._readonlyConfig;

package/src/vcsUiApp.d.ts

@@ -70,20 +70,21 @@ declare class VcsUiApp extends VcsApp {
      */
     themeChanged: VcsEvent<void>;
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
      * @private
      */
     private _plugins;
     /**
-     * @type {Array<function():void>}
+     * I18n Collection adds plugin listener first, so the plugin i18n data is available on plugin initialize
+     * @type {I18nCollection<Object>}
      * @private
      */
-    private _pluginListeners;
+    private _i18n;
     /**
-     * @type {I18nCollection<Object>}
+     * @type {Array<function():void>}
      * @private
      */
-    private _i18n;
+    private _pluginListeners;
     /**
      *
      * @type {import("vue-i18n").I18n}
@@ -195,9 +196,9 @@ declare class VcsUiApp extends VcsApp {
     mounted: import("@vcmap/core").VcsEvent<string>;
     _destroySiteConfig: () => void;
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
      */
-    get plugins(): import("@vcmap/core").OverrideCollection<any, Collection<any>, Object>;
+    get plugins(): import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>;
     /**
      * @type {import("@vcmap/core").OverrideCollection<ContentTreeItem, ContentTreeCollection>}
      */
@@ -250,13 +251,12 @@ declare class VcsUiApp extends VcsApp {
      * @returns {ReturnType<typeof import("vuetify").createVuetify>}
      */
     get vuetify(): {
-        install: (app: import("vue").App<any>) => void;
-        defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
-        display: import("vuetify").DisplayInstance;
-        /**
-         * @type {NavbarManager}
+        install: (app: import("vue").App<any>) => void; /**
+         * @type {WindowManager}
          * @private
          */
+        defaults: import("vue").Ref<import("vuetify").DefaultsInstance>;
+        display: import("vuetify").DisplayInstance;
         theme: import("vuetify").ThemeInstance & {
             install: (app: import("vue").App<any>) => void;
         };
@@ -291,13 +291,12 @@ declare class VcsUiApp extends VcsApp {
                 date: (value?: any) => unknown;
                 format: (date: unknown, formatString: string) => string;
                 toJsDate: (value: unknown) => Date;
-                /**
+                parseISO: (date: string) => unknown;
+                toISO: (date: unknown) => string;
+                startOfDay: (date: unknown) => unknown; /**
                  * @type {OverviewMap}
                  * @private
                  */
-                parseISO: (date: string) => unknown;
-                toISO: (date: unknown) => string;
-                startOfDay: (date: unknown) => unknown;
                 endOfDay: (date: unknown) => unknown;
                 startOfWeek: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown;
                 endOfWeek: (date: unknown) => unknown;

package/src/vcsUiApp.js

@@ -170,7 +170,7 @@ class VcsUiApp extends VcsApp {
      */
     this.themeChanged = new VcsEvent();
     /**
-     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+     * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
      * @private
      */
     this._plugins = makeOverrideCollection(
@@ -179,6 +179,17 @@ class VcsUiApp extends VcsApp {
       serializePlugin,
       deserializePlugin,
     );
+
+    /**
+     * I18n Collection adds plugin listener first, so the plugin i18n data is available on plugin initialize
+     * @type {I18nCollection<Object>}
+     * @private
+     */
+    this._i18n = makeOverrideCollection(
+      new I18nCollection(this._plugins),
+      () => this.dynamicModuleId,
+    );
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -222,15 +233,6 @@ class VcsUiApp extends VcsApp {
       }),
     ];
 
-    /**
-     * @type {I18nCollection<Object>}
-     * @private
-     */
-    this._i18n = makeOverrideCollection(
-      new I18nCollection(this._plugins),
-      () => this.dynamicModuleId,
-    );
-
     /**
      *
      * @type {import("vue-i18n").I18n}
@@ -375,7 +377,7 @@ class VcsUiApp extends VcsApp {
   }
 
   /**
-   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin, Collection<VcsPlugin>, Object>}
+   * @type {import("@vcmap/core").OverrideCollection<VcsPlugin<Object, Object>, Collection<VcsPlugin<Object, Object>>, Object>}
    */
   get plugins() {
     return this._plugins;