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

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-c6eb55a5.js";
+export * from "./ui-bf3d1f84.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-aefad438.js";
+export * from "./vue-43880c5a.js";

package/dist/assets/{vuetify-c3b6c9b3.js → vuetify-99bf601c.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-c3b6c9b3.css');import { watch as Z, onScopeDispose as tt, effectScope as Ul, shallowRef as K, Fragment as le, reactive as gt, computed as y, watchEffect as Le, toRefs as Wt, capitalize as On, isVNode as Lc, Comment as Rc, unref as it, warn as Ha, getCurrentInstance as Nc, ref as W, provide as Be, inject as be, defineComponent as Hc, camelize as Ir, h as jt, toRaw as _e, createVNode as r, mergeProps as N, onBeforeUnmount as nt, readonly as Kl, onDeactivated as _r, onActivated as zc, onMounted as Ge, nextTick as we, TransitionGroup as ql, Transition as Ht, isRef as _n, toRef as O, onBeforeMount as Tr, withDirectives as $e, resolveDirective as ct, vShow as xt, onUpdated as Wc, Text as jc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Uc, cloneVNode as Kc, createTextVNode as Pt, onUnmounted as qc, onBeforeUpdate as Xc, withModifiers as Pl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-aefad438.js";
+} await loadCss('./assets/vuetify-99bf601c.css');import { watch as Z, onScopeDispose as tt, effectScope as Ul, shallowRef as K, Fragment as le, reactive as gt, computed as y, watchEffect as Le, toRefs as Wt, capitalize as On, isVNode as Lc, Comment as Rc, unref as it, warn as Ha, getCurrentInstance as Nc, ref as W, provide as Be, inject as be, defineComponent as Hc, camelize as Ir, h as jt, toRaw as _e, createVNode as r, mergeProps as N, onBeforeUnmount as nt, readonly as Kl, onDeactivated as _r, onActivated as zc, onMounted as Ge, nextTick as we, TransitionGroup as ql, Transition as Ht, isRef as _n, toRef as O, onBeforeMount as Tr, withDirectives as $e, resolveDirective as ct, vShow as xt, onUpdated as Wc, Text as jc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Uc, cloneVNode as Kc, createTextVNode as Pt, onUnmounted as qc, onBeforeUpdate as Xc, withModifiers as Pl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-43880c5a.js";
 function ot(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-c3b6c9b3.js";
+export * from "./vuetify-99bf601c.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.0.0-rc.7",
+  "version": "6.0.0-rc.8",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -57,7 +57,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.2",
-    "@vcmap/core": "^6.0.0-rc.7",
+    "@vcmap/core": "^6.0.0-rc.8",
     "ol": "^10.0.0",
     "vue": "~3.4.38",
     "vuetify": "^3.7.1"

package/plugins/@vcmap-show-case/plugin-editors/src/PluginEditors.vue

@@ -39,10 +39,9 @@
                   parentId: name,
                   slot: WindowSlot.DYNAMIC_CHILD,
                   props: {
-                    getConfig: () =>
-                      Promise.resolve(
-                        vcsApp.plugins.getSerializedByKey(plugin.name),
-                      ),
+                    getConfig: () => {
+                      return vcsApp.plugins.getSerializedByKey(plugin.name);
+                    },
                     setConfig(config) {
                       if (config) {
                         vcsApp.notifier.add({

package/src/actions/StyleSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet v-if="items" class="pt-1 pb-0 px-0">
+  <v-sheet v-if="items" class="pt-1 pb-0 px-0 style-selector">
     <v-list>
       <v-list-item
         v-for="(item, index) in items"

package/src/application/VcsApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="fill-height pa-0" absolute fluid>
+  <v-container class="fill-height pa-0 vcs-app" absolute fluid>
     <VcsSplashScreen
       v-if="splashScreen"
       :options="splashScreen"
@@ -248,6 +248,33 @@
       }
     };
 
+    let currentEntryLength = entries.length;
+    const watchEntries = watch(entries, (newValue) => {
+      if (
+        app.uiConfig.config.openLegendOnAdd &&
+        newValue.length > currentEntryLength &&
+        !app.windowManager.has('legend')
+      ) {
+        app.windowManager.add(
+          {
+            id: 'legend',
+            component: VcsLegend,
+            state: {
+              headerTitle: 'legend.title',
+              headerIcon: '$vcsLegend',
+              infoUrl: app.getHelpUrlCallback(
+                '/components/contentspace.html#id_legend',
+              ),
+            },
+            slot: WindowSlot.DYNAMIC_RIGHT,
+            props: { entries },
+          },
+          vcsAppSymbol,
+        );
+      }
+      currentEntryLength = newValue.length;
+    });
+
     /**
      * Handles legend button and window.
      * Adds a button, if legend definitions are available or removes legend otherwise.
@@ -284,6 +311,7 @@
     ];
 
     return () => {
+      watchEntries();
       app.navbarManager.remove('legend');
       app.windowManager.remove('legend');
       destroy();

package/src/application/VcsApp.vue.d.ts

@@ -321,9 +321,13 @@ declare const _default: import("vue").DefineComponent<{
             } | 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;
     };
     showFooter: import("vue").ComputedRef<boolean>;
     footerHeight: import("vue").ComputedRef<number>;

package/src/application/VcsAppWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app class="vcs-app-wrapper">
     <VcsApp :app-id="appId" />
   </v-app>
 </template>

package/src/application/VcsAttributions.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-attributions">
     <v-list v-if="entries.length" class="px-2">
       <v-list-item
         v-for="{ key, title, attributions } in entries"

package/src/application/VcsAttributionsFooter.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="d-flex align-center justify-end overflow-hidden">
+  <div
+    class="d-flex align-center justify-end overflow-hidden vcs-attributions-footer"
+  >
     <div class="attribution-container">
       <span
         v-for="attribution in mergedAttributions"

package/src/application/VcsContainer.vue.d.ts

@@ -241,9 +241,13 @@ declare const _default: import("vue").DefineComponent<{
             } | 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;
     };
     xs: import("vue").Ref<boolean>;
     mobileLogo: import("vue").ComputedRef<any>;

package/src/application/VcsMainMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-main-map">
     <VcsMap :map-id="mapId" />
     <MapNavigation v-if="showMapNavigation" />
   </div>

package/src/application/VcsMap.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    class="vcs-map"
     :id="mapId"
     @click.right.stop="
       (e) => {

package/src/application/VcsNavbar.vue

@@ -3,7 +3,7 @@
     absolute
     :density="density"
     elevation="0"
-    class="px-4"
+    class="px-4 vcs-navbar"
     :height="toolbarHeight"
     :style="xs ? { bottom: 0 } : { top: 0 }"
   >

package/src/application/VcsPositionDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <span
-    class="d-flex gc-2 px-1 h-100 align-center"
-    :class="{ 'vcs-position-display': positionDisplayAction.active }"
+    class="d-flex gc-2 px-1 h-100 align-center vcs-position-display"
+    :class="{ active: positionDisplayAction.active }"
   >
     <VcsButton
       :tooltip="positionDisplayAction.title"
@@ -52,7 +52,7 @@
 </template>
 
 <style lang="scss" scoped>
-  .vcs-position-display {
+  .active {
     background-color: rgb(var(--v-theme-primary));
     span {
       color: rgb(var(--v-theme-on-primary));

package/src/application/VcsSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="px-1 py-0">
+  <v-container class="px-1 py-0 vcs-settings">
     <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">

package/src/application/VcsSplashScreen.vue

@@ -7,6 +7,7 @@
     :max-width="position.maxWidth"
     :max-height="position.maxHeight"
     persistent
+    class="vcs-splash-screen"
   >
     <v-card>
       <v-card-text>

package/src/application/VcsTextPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="vcs-text-page">
     <VcsMarkdown :content="$st(content)"></VcsMarkdown>
   </v-container>
 </template>

package/src/application/VcsTextPageFooter.vue

@@ -1,5 +1,7 @@
 <template v-if="textPage.title">
-  <span class="d-inline-block text-truncate mr-1 flex-shrink-0">
+  <span
+    class="d-inline-block text-truncate mr-1 flex-shrink-0 vcs-text-page-footer"
+  >
     <span v-if="textPage.url" class="text-page-footer">
       <a :href="$st(textPage.url)" target="_blank"
         >{{ $st(textPage.title) }} <span></span>

package/src/components/buttons/VcsActionButtonList.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="actions.length > 0" :class="classes" class="gc-2">
+  <div
+    v-if="actions.length > 0"
+    :class="classes"
+    class="gc-2 vcs-action-button-list"
+  >
     <template v-if="buttons.length > 0">
       <component
         :is="button"

package/src/components/buttons/VcsButton.vue

@@ -5,7 +5,7 @@
     variant="text"
     :color="appliedColor"
     :disabled="disabled"
-    class="vcsButton"
+    class="vcs-button"
     elevation="0"
     density="compact"
     size="small"
@@ -24,7 +24,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>
@@ -41,7 +41,7 @@
   }
   .v-btn {
     padding: 0px;
-    &.vcsButton {
+    &.vcs-button {
       &:hover {
         color: rgb(var(--v-theme-primary-lighten-1)) !important;
       }

package/src/components/buttons/VcsFormButton.vue

@@ -5,7 +5,7 @@
     color="primary"
     :min-width="itemHeight * 1.5"
     :height="itemHeight"
-    class="vcsFormButton"
+    class="vcs-form-button"
     :slim="false"
     v-bind="{ ...$attrs }"
   >
@@ -22,7 +22,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>

package/src/components/buttons/VcsToolButton.vue

@@ -4,7 +4,7 @@
     :variant="buttonVariant"
     :height="itemHeight + 2"
     :min-width="itemHeight + itemHeight / 3"
-    class="vcsToolButton"
+    class="vcs-tool-button"
     :disabled="disabled"
     :class="{
       'vcs-background': background,
@@ -26,7 +26,7 @@
       <VcsBadge
         v-if="hasUpdate"
         :color="'bg-warning'"
-        class="position-absolute"
+        class="position-absolute badge"
       />
       <slot name="default" v-bind="scope ?? {}" />
     </template>

package/src/components/extent/VcsExtent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-extent">
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
         <VcsLabel :html-for="`${cid}-projection`">

package/src/components/extent/VcsExtentEditor.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-extent-editor"
     :heading="heading"
     :header-actions="actions"
     :action-button-list-overflow-count="2"

package/src/components/flight/VcsFlightAnchorsComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsFormSection
+    class="vcs-flight-anchors-component"
     :heading="title"
     :expandable="expandable"
     start-open

package/src/components/flight/VcsFlightComponent.vue

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

package/src/components/flight/VcsFlightEditor.vue

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

package/src/components/flight/VcsFlightPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="py-0 px-1">
+  <v-container class="py-0 px-1 vcs-flight-player">
     <VcsLabel>{{ $t('flight.player') }}</VcsLabel>
     <VcsSlider
       v-if="clock"

package/src/components/form-inputs-controls/VcsTextField.vue

@@ -146,7 +146,7 @@
           ) {
             const v = parseFloat(localValue.value);
             if (Number.isFinite(v)) {
-              return v.toFixed(props.decimals);
+              return parseFloat(v.toFixed(props.decimals));
             }
           }
           return localValue.value ?? '';

package/src/components/form-inputs-controls/VcsWizard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-stepper-vertical v-bind="$attrs">
+  <v-stepper-vertical v-bind="$attrs" class="vcs-wizard">
     <template #icon>
       <slot name="icon"><v-icon>mdi-circle</v-icon></slot>
     </template>

package/src/components/form-inputs-controls/VcsWizardStep.vue

@@ -1,5 +1,6 @@
 <template>
   <v-stepper-vertical-item
+    class="vcs-wizard-step"
     :value="step"
     :editable="isActiveStep || editable"
     :complete="complete"

package/src/components/form-output/VcsMarkdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="marked"
+    class="marked vcs-markdown"
     :class="{
       'pa-2': !paddingProvided,
     }"

package/src/components/import/VcsFileDrop.vue

@@ -4,7 +4,7 @@
     @dragover.prevent="isDragging = true"
     @dragleave.prevent="isDragging = false"
     @drop.prevent="dropped"
-    class="d-flex justify-center drop-field"
+    class="d-flex justify-center drop-field vcs-file-drop"
     :class="{ dragging: isDragging }"
     :dragging="isDragging"
     flat

package/src/components/import/VcsImportComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card flat class="pa-2">
+  <v-card flat class="pa-2 vcs-import-component">
     <vcs-file-drop
       :height="dropElementHeight"
       :multiple="multiple"

package/src/components/lists/VcsListItemComponent.vue

@@ -89,7 +89,11 @@
 </script>
 
 <template>
-  <v-list-item :disabled="item.disabled" v-bind="$attrs">
+  <v-list-item
+    :disabled="item.disabled"
+    v-bind="$attrs"
+    class="vcs-list-item-component"
+  >
     <template #prepend>
       <v-icon v-if="item.icon">
         {{ item.icon }}

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+    class="pa-2 bg-base-lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0 vcs-treeview-searchbar"
   >
     <slot name="prepend">
       <v-icon class="search-icon my-0 ml-1" :size="iconSize - 4">

package/src/components/lists/VcsTreeviewTitle.vue

@@ -26,7 +26,7 @@
 </style>
 <template>
   <div
-    class="title-parent pr-2"
+    class="title-parent pr-2 vcs-treeview-title"
     ref="titleParent"
     @click.stop="item.clicked && !item.disabled && item.clicked($event)"
   >

package/src/components/notification/VcsBadge.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+  <span class="vcs-badge rounded-circle h-3 w-3" :class="[color]" />
 </template>
 
 <style lang="scss" scoped>
-  .badge {
+  .vcs-badge {
     border: 1px solid rgb(var(--v-theme-surface)) !important;
   }
   .h-3 {

package/src/components/notification/VcsHelp.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$slots.default || text"
-    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4"
+    class="ma-0 font-weight-regular rounded-0 bg-base-lighten-4 vcs-help"
   >
     <v-container class="py-1 px-2 vcs-help">
       <slot>

package/src/components/plugins/AbstractConfigEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-0">
+  <v-container class="pa-0 abstract-config-editor">
     <v-form v-model="isValid" @submit.prevent="submit">
       <slot />
       <div class="d-flex gc-2 px-2 pt-2 pb-1">

package/src/components/section/VcsExpansionPanel.vue

@@ -43,7 +43,11 @@
   const iconSize = useIconSize();
 </script>
 <template>
-  <v-expansion-panel :disabled="disabled" v-bind="$attrs">
+  <v-expansion-panel
+    :disabled="disabled"
+    v-bind="$attrs"
+    class="vcs-expansion-panel"
+  >
     <v-expansion-panel-title static class="px-2">
       <template #default="{ expanded }">
         <v-list-item-title ref="panelHeader">

package/src/components/style/MenuWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="menu-wrapper">
     <div class="d-flex align-center py-1">
       <VcsCheckbox
         :model-value="!!modelValue"

package/src/components/style/VcsFeatureStyleComponent.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsVectorStyleComponent
+    class="vcs-feature-style-component"
     :model-value="styleOptions"
     @update:fill="updateFill"
     @update:stroke="updateStroke"

package/src/components/style/VcsFillMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-fill-menu"
     :value-fallback="{ color: [255, 255, 255, 1] }"
     name="components.style.fill"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsFillSelector.vue

@@ -1,5 +1,6 @@
 <template>
   <v-color-picker
+    class="vcs-fill-selector"
     :model-value="rgbaObject"
     @update:model-value="updateColor"
     mode="rgba"

package/src/components/style/VcsImageMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-image-menu"
     :value-fallback="{
       radius: 10,
       fill: { color: [255, 255, 255, 1] },

package/src/components/style/VcsImageSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-image-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col class="d-flex justify-center py-1">

package/src/components/style/VcsStrokeMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-stroke-menu"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
     name="components.style.stroke"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsStrokeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-stroke-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>

package/src/components/style/VcsTextMenu.vue

@@ -1,5 +1,6 @@
 <template>
   <MenuWrapper
+    class="vcs-text-menu"
     :value-fallback="fallbackStyle"
     name="components.style.text"
     v-bind="{ ...$attrs, ...$props }"

package/src/components/style/VcsTextSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-text-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>

package/src/components/style/VcsVectorStyleComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-vector-style-component">
     <component
       v-for="key in styleComponents"
       :key="key"

package/src/components/tables/VcsDataTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vcs-data-table">
     <VcsTreeviewSearchbar
       v-if="showSearchbar"
       :placeholder="$st(searchbarPlaceholder)"

package/src/components/tables/VcsTable.vue

@@ -1,5 +1,6 @@
 <template>
   <VcsDataTable
+    class="vcs-table"
     v-bind="$attrs"
     :items="items"
     :headers="[keyHeader, valueHeader]"

package/src/components/tables/VcsTableCell.vue

@@ -37,7 +37,7 @@
 </script>
 
 <template>
-  <td ref="td" :style="{ 'max-width': width }">
+  <td ref="td" :style="{ 'max-width': width }" class="vcs-table-cell">
     <component
       :is="tag"
       :class="{

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

@@ -1,5 +1,5 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-feature-editing-window">
     <VcsFormSection
       v-if="session?.type === SessionType.SELECT"
       heading="components.editor.modifyHeader"