@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/i18n/de.d.ts

@@ -1,5 +1,109 @@
 export default messages;
 declare namespace messages {
+    export let $vuetify: {
+        dataIterator: {
+            rowsPerPageText: string;
+            pageText: string;
+            noResultsText: string;
+            loadingText: string;
+        };
+        badge: string;
+        open: string;
+        close: string;
+        dismiss: string;
+        confirmEdit: {
+            ok: string;
+            cancel: string;
+        };
+        dataTable: {
+            itemsPerPageText: string;
+            ariaLabel: {
+                sortDescending: string;
+                sortAscending: string;
+                sortNone: string;
+                activateNone: string;
+                activateDescending: string;
+                activateAscending: string;
+            };
+            sortBy: string;
+        };
+        dataFooter: {
+            itemsPerPageText: string;
+            itemsPerPageAll: string;
+            nextPage: string;
+            prevPage: string;
+            firstPage: string;
+            lastPage: string;
+            pageText: string;
+        };
+        dateRangeInput: {
+            divider: string;
+        };
+        datePicker: {
+            itemsSelected: string;
+            range: {
+                title: string;
+                header: string;
+            };
+            title: string;
+            header: string;
+            input: {
+                placeholder: string;
+            };
+        };
+        noDataText: string;
+        carousel: {
+            prev: string;
+            next: string;
+            ariaLabel: {
+                delimiter: string;
+            };
+        };
+        calendar: {
+            moreEvents: string;
+            today: string;
+        };
+        input: {
+            clear: string;
+            prependAction: string;
+            appendAction: string;
+            otp: string;
+        };
+        fileInput: {
+            counter: string;
+            counterSize: string;
+        };
+        timePicker: {
+            am: string;
+            pm: string;
+            title: string;
+        };
+        pagination: {
+            ariaLabel: {
+                root: string;
+                next: string;
+                previous: string;
+                page: string;
+                currentPage: string;
+                first: string;
+                last: string;
+            };
+        };
+        stepper: {
+            next: string;
+            prev: string;
+        };
+        rating: {
+            ariaLabel: {
+                item: string;
+            };
+        };
+        loading: string;
+        infiniteScroll: {
+            loadMore: string;
+            empty: string;
+        };
+    };
     export namespace navbar {
         namespace maps {
             let CesiumMap: string;
@@ -205,6 +309,7 @@ declare namespace messages {
             export let invalid: string;
             export let editVertices: string;
             export let translate: string;
+            export let toggle: string;
         }
         export namespace editor {
             let translate_1: string;

package/src/i18n/de.js

@@ -1,6 +1,14 @@
-import { TransformationMode } from '@vcmap/core';
+import { de } from 'vuetify/locale';
 
 const messages = {
+  $vuetify: {
+    ...de,
+    dataIterator: {
+      ...de.dataIterator,
+      rowsPerPageText: 'Elemente pro Seite:',
+      pageText: '{0}-{1} von {2}',
+    },
+  },
   navbar: {
     maps: {
       CesiumMap: '3D-Karte aktivieren',
@@ -188,12 +196,13 @@ const messages = {
       invalid: 'Koordinaten ergeben keine valide Ausdehnung!',
       editVertices: 'Ecken bearbeiten',
       translate: 'Ausdehnung verschieben',
+      toggle: 'Extent an-/ausschalten',
     },
     editor: {
-      [TransformationMode.TRANSLATE]: 'Objekt verschieben',
-      [TransformationMode.ROTATE]: 'Objekt rotieren',
-      [TransformationMode.SCALE]: 'Objekt skalieren',
-      [TransformationMode.EXTRUDE]: 'Objekt extrudieren',
+      translate: 'Objekt verschieben',
+      rotate: 'Objekt rotieren',
+      scale: 'Objekt skalieren',
+      extrude: 'Objekt extrudieren',
       header: 'Transformieren',
       placeOnTerrain: 'Auf Gelände plazieren',
       cw: '90° rechtsherum drehen',

package/src/i18n/en.d.ts

@@ -1,5 +1,109 @@
 export default messages;
 declare namespace messages {
+    export let $vuetify: {
+        dataIterator: {
+            rowsPerPageText: string;
+            pageText: string;
+            noResultsText: string;
+            loadingText: string;
+        };
+        badge: string;
+        open: string;
+        close: string;
+        dismiss: string;
+        confirmEdit: {
+            ok: string;
+            cancel: string;
+        };
+        dataTable: {
+            itemsPerPageText: string;
+            ariaLabel: {
+                sortDescending: string;
+                sortAscending: string;
+                sortNone: string;
+                activateNone: string;
+                activateDescending: string;
+                activateAscending: string;
+            };
+            sortBy: string;
+        };
+        dataFooter: {
+            itemsPerPageText: string;
+            itemsPerPageAll: string;
+            nextPage: string;
+            prevPage: string;
+            firstPage: string;
+            lastPage: string;
+            pageText: string;
+        };
+        dateRangeInput: {
+            divider: string;
+        };
+        datePicker: {
+            itemsSelected: string;
+            range: {
+                title: string;
+                header: string;
+            };
+            title: string;
+            header: string;
+            input: {
+                placeholder: string;
+            };
+        };
+        noDataText: string;
+        carousel: {
+            prev: string;
+            next: string;
+            ariaLabel: {
+                delimiter: string;
+            };
+        };
+        calendar: {
+            moreEvents: string;
+            today: string;
+        };
+        input: {
+            clear: string;
+            prependAction: string;
+            appendAction: string;
+            otp: string;
+        };
+        fileInput: {
+            counter: string;
+            counterSize: string;
+        };
+        timePicker: {
+            am: string;
+            pm: string;
+            title: string;
+        };
+        pagination: {
+            ariaLabel: {
+                root: string;
+                next: string;
+                previous: string;
+                page: string;
+                currentPage: string;
+                first: string;
+                last: string;
+            };
+        };
+        stepper: {
+            next: string;
+            prev: string;
+        };
+        rating: {
+            ariaLabel: {
+                item: string;
+            };
+        };
+        loading: string;
+        infiniteScroll: {
+            loadMore: string;
+            empty: string;
+        };
+    };
     export namespace navbar {
         namespace maps {
             let CesiumMap: string;
@@ -205,6 +309,7 @@ declare namespace messages {
             export let invalid: string;
             export let editVertices: string;
             export let translate: string;
+            export let toggle: string;
         }
         export namespace editor {
             let translate_1: string;

package/src/i18n/en.js

@@ -1,6 +1,14 @@
-import { TransformationMode } from '@vcmap/core';
+import { en } from 'vuetify/locale';
 
 const messages = {
+  $vuetify: {
+    ...en,
+    dataIterator: {
+      ...en.dataIterator,
+      rowsPerPageText: 'Items per page:',
+      pageText: '{0}-{1} of {2}',
+    },
+  },
   navbar: {
     maps: {
       CesiumMap: 'Enable 3D map',
@@ -188,12 +196,13 @@ const messages = {
       invalid: 'Coordinates do not result in a valid extent!',
       editVertices: 'Edit extent corners',
       translate: 'Translate extent',
+      toggle: 'Toggle extent',
     },
     editor: {
-      [TransformationMode.TRANSLATE]: 'Translate features',
-      [TransformationMode.ROTATE]: 'Rotate features',
-      [TransformationMode.SCALE]: 'Scale features',
-      [TransformationMode.EXTRUDE]: 'Extrude features',
+      translate: 'Translate features',
+      rotate: 'Rotate features',
+      scale: 'Scale features',
+      extrude: 'Extrude features',
       header: 'Transform',
       placeOnTerrain: 'Place on terrain',
       cw: 'Rotate 90° clockwise',

package/src/init.js

@@ -1,9 +1,9 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { check, checkMaybe, is } from '@vcsuite/check';
 import { VcsModule } from '@vcmap/core';
 import VcsAppComponentWrapper from './application/VcsAppWrapper.vue';
-import { vuetify } from './vuePlugins/vuetify.js';
 import VcsUiApp from './vcsUiApp.js';
+import { createSafeI18n } from './vuePlugins/i18n.js';
 
 /**
  * Base pattern to check VcsObjects
@@ -42,16 +42,14 @@ export const VcsUiAppConfigPattern = {
 export default async function initApp(mountTarget) {
   check(mountTarget, String);
   const app = new VcsUiApp();
-  new Vue({
-    vuetify,
-    i18n: app.vueI18n,
-    render: (h) =>
-      h(VcsAppComponentWrapper, {
-        props: {
-          appId: app.id,
-        },
-      }),
-  }).$mount(mountTarget);
+  const vueApp = createApp(VcsAppComponentWrapper, {
+    appId: app.id,
+  });
+  vueApp.use(app.vueI18nPlugin);
+  const safeI18nPlugin = createSafeI18n();
+  vueApp.use(safeI18nPlugin);
+  vueApp.use(app.vuetify);
+  vueApp.mount(mountTarget);
 
   return app;
 }

package/src/legend/StyleLegendItem.vue

@@ -1,13 +1,18 @@
 <template>
-  <v-list dense>
-    <v-layout wrap :column="item.colNr === 1">
-      <v-flex
+  <v-list density="compact">
+    <v-row>
+      <v-col
         v-for="(row, idx) in item.rows"
         :key="idx"
-        :class="{ 'w-full': item.colNr === 1, 'w-half': item.colNr !== 1 }"
+        :cols="cols"
+        :class="{ 'w-100': item.colNr === 1, 'w-50': item.colNr !== 1 }"
       >
-        <v-list-item dense class="pa-0" :class="determineInnerPadding(idx)">
-          <v-list-item-icon class="pr-2">
+        <v-list-item
+          density="compact"
+          class="pa-0"
+          :class="determineInnerPadding(idx)"
+        >
+          <template #prepend>
             <v-img
               v-if="
                 row.type === StyleRowType.Icon ||
@@ -15,7 +20,7 @@
               "
               width="32"
               height="24"
-              contain
+              cover
               :src="getImageSrcFromShape(row.image)"
             />
             <svg
@@ -39,7 +44,7 @@
                 :stroke-width="row.text?.stroke?.width"
                 :fill="getColor(row.text?.fill?.color) || 'rgba(255,255,255,0)'"
               >
-                {{ $t(row.label || 'legend.defaultLabelText') }}
+                {{ $st(row.label || 'legend.defaultLabelText') }}
               </text>
               <line
                 v-else-if="row.type === StyleRowType.Stroke"
@@ -85,33 +90,31 @@
                 "
               />
             </svg>
-          </v-list-item-icon>
-          <v-list-item-content>
-            <v-list-item-title
-              class="pt-2"
-              :title="$t(row.tooltip || row.title)"
-            >
-              {{ $t(row.title) }}
-            </v-list-item-title>
-          </v-list-item-content>
+          </template>
+
+          <v-list-item-title
+            class="pt-2"
+            :title="$st(row.tooltip || row.title)"
+          >
+            {{ $st(row.title) }}
+          </v-list-item-title>
         </v-list-item>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
   </v-list>
 </template>
 
 <script>
   import { getStringColor } from '@vcmap/core';
   import {
-    VFlex,
+    VRow,
     VImg,
-    VLayout,
+    VCol,
     VList,
     VListItem,
-    VListItemContent,
-    VListItemIcon,
     VListItemTitle,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
+  import { computed } from 'vue';
   import { StyleRowType, getImageSrcFromShape } from './legendHelper.js';
 
   /**
@@ -122,12 +125,10 @@
     name: 'StyleLegendItem',
     components: {
       VList,
-      VLayout,
-      VFlex,
+      VRow,
+      VCol,
       VListItem,
-      VListItemIcon,
       VImg,
-      VListItemContent,
       VListItemTitle,
     },
     props: {
@@ -164,6 +165,9 @@
           return null;
         },
         determineInnerPadding,
+        cols: computed(() => {
+          return props.item.colNr === 1 ? 12 : 6;
+        }),
       };
     },
   };

package/src/legend/StyleLegendItem.vue.d.ts

@@ -15,11 +15,12 @@ declare const _default: import("vue").DefineComponent<{
     getImageSrcFromShape: typeof getImageSrcFromShape;
     getColor(color: any): string | null;
     determineInnerPadding: (index: number) => string;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    cols: import("vue").ComputedRef<6 | 12>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         type: ObjectConstructor;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;
 import { getImageSrcFromShape } from './legendHelper.js';

package/src/legend/VcsLegend.vue

@@ -1,37 +1,36 @@
 <template>
   <v-sheet class="overflow-y-auto">
     <v-expansion-panels
-      accordion
+      variant="accordion"
       multiple
       v-if="entries.length > 0"
-      v-model="panels"
       class="rounded-0"
     >
       <v-expansion-panel
         v-for="(entry, i) in entries"
         :key="i"
         class="px-2"
-        @change="entry.open = !entry.open"
+        @group:selected="entry.open = !entry.open"
       >
-        <v-expansion-panel-header hide-actions>
+        <v-expansion-panel-title hide-actions>
           <template #default="{ open }">
             <div class="d-flex justify-space-between">
               <div class="d-flex align-center">
                 <v-icon class="mr-1" :class="{ rotate: !open }">
                   mdi-chevron-down
                 </v-icon>
-                {{ $t(entry.title) }}
+                {{ $st(entry.title) }}
               </div>
               <VcsActionButtonList :actions="entry.actions" />
             </div>
           </template>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content class="pl-6 pb-2">
-          <v-list dense>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="pl-6 pb-2">
+          <v-list density="compact">
             <div v-for="(item, idx) in entry.legend" :key="idx">
               <div v-if="item.type === LegendType.Image">
                 <img
-                  :src="$t(item.src)"
+                  :src="$st(item.src)"
                   :alt="item.src"
                   class="legend-image"
                   :title="item.tooltip"
@@ -40,7 +39,7 @@
               <div v-else-if="item.type === LegendType.Iframe">
                 <iframe
                   :id="`legendIframe${idx}`"
-                  :src="$t(item.src)"
+                  :src="$st(item.src)"
                   scrolling="no"
                   style="width: 100%; height: 100%"
                   frameBorder="0"
@@ -50,7 +49,7 @@
               <style-legend-item v-else :item="item" />
             </div>
           </v-list>
-        </v-expansion-panel-content>
+        </v-expansion-panel-text>
       </v-expansion-panel>
     </v-expansion-panels>
     <v-sheet v-else class="ma-2">
@@ -63,12 +62,12 @@
   import {
     VExpansionPanels,
     VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
+    VExpansionPanelText,
+    VExpansionPanelTitle,
     VIcon,
     VList,
     VSheet,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './StyleLegendItem.vue';
@@ -76,7 +75,7 @@
 
   /**
    * @description A component rendering configured legend information for active layers.
-   * @vue-prop {import("vue").Ref<Array<LegendEntry>>} entries - legend entries to be displayed
+   * @vue-prop {import("vue").UnwrapRef<Array<LegendEntry>>} entries - legend entries to be displayed
    * @vue-computed {import("vue").ComputedRef<number[]>} panels - derives indices from entries array to define all panels as open
    */
   export default {
@@ -86,16 +85,16 @@
       StyleLegendItem,
       VExpansionPanels,
       VExpansionPanel,
-      VExpansionPanelHeader,
-      VExpansionPanelContent,
+      VExpansionPanelText,
+      VExpansionPanelTitle,
       VIcon,
       VList,
       VSheet,
     },
     props: {
       entries: {
-        type: Object,
-        required: true,
+        type: Array,
+        default: () => [],
       },
     },
     setup(props) {
@@ -123,7 +122,7 @@
       return {
         LegendType,
         setIframeHeight,
-        panels,
+        panels, // TODO
       };
     },
   };

package/src/legend/VcsLegend.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{
     entries: {
-        type: ObjectConstructor;
-        required: true;
+        type: ArrayConstructor;
+        default: () => never[];
     };
 }, {
     LegendType: {
@@ -11,10 +11,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     setIframeHeight: (id: string) => void;
     panels: import("vue").ComputedRef<number[]>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     entries: {
-        type: ObjectConstructor;
-        required: true;
+        type: ArrayConstructor;
+        default: () => never[];
     };
-}>>, {}>;
+}>>, {
+    entries: unknown[];
+}, {}>;
 export default _default;

package/src/legend/legendHelper.d.ts

@@ -74,10 +74,10 @@ export function createLayerLegendEntry(key: string, title: string, legend: Array
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ * @returns {{entries: import("vue").UnwrapRef<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app: import("../vcsUiApp.js").default): {
-    entries: import("vue").Ref<Array<LegendEntry>>;
+    entries: import("vue").UnwrapRef<Array<LegendEntry>>;
     destroy: () => void;
 };
 /**

package/src/legend/legendHelper.js

@@ -1,5 +1,5 @@
 import { getShapeFromOptions } from '@vcmap/core';
-import { shallowRef } from 'vue';
+import { reactive } from 'vue';
 
 /**
  * @enum {string}
@@ -136,13 +136,13 @@ export function createLayerLegendEntry(key, title, legend) {
 /**
  *
  * @param {import("../vcsUiApp.js").default} app
- * @returns {{entries: import("vue").Ref<Array<LegendEntry>>, destroy: function():void }}
+ * @returns {{entries: import("vue").UnwrapRef<Array<LegendEntry>>, destroy: function():void }}
  */
 export function getLegendEntries(app) {
   /**
-   * @type {import("vue").Ref<Array<LegendEntry>>}>}
+   * @type {import("vue").UnwrapRef<Array<LegendEntry>>}>}
    */
-  const entries = shallowRef([]);
+  const entries = reactive([]);
   /**
    * @type {Object<string,function():void>}
    */
@@ -153,8 +153,10 @@ export function getLegendEntries(app) {
    */
   function removeEntryForLayer(layer) {
     const layerName = layer.name;
-    // reassign to trigger update
-    entries.value = entries.value.filter(({ key }) => key !== layerName);
+    const entryIndex = entries.findIndex(({ key }) => key === layerName);
+    if (entryIndex >= 0) {
+      entries.splice(entryIndex, 1);
+    }
     if (styleChangedListener[layerName]) {
       styleChangedListener[layerName]();
       delete styleChangedListener[layerName];
@@ -175,8 +177,7 @@ export function getLegendEntries(app) {
         layer.style?.properties?.legend ?? layer.properties?.legend;
       if (legend) {
         const legendEntry = createLayerLegendEntry(key, title, legend);
-        // use spread since push won't trigger updates. Put new entries at the start
-        entries.value = [legendEntry, ...entries.value];
+        entries.unshift(legendEntry);
       }
       if (layer.styleChanged) {
         styleChangedListener[layer.name] = layer.styleChanged.addEventListener(