@vcmap/ui 5.3.7 → 6.0.0-rc.10

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;
@@ -210,6 +314,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;
@@ -234,8 +339,12 @@ declare namespace messages {
             export { header_1 as header };
             export let altitudeMode: string;
             export let clampToGround: string;
+            export let clampToTerrain: string;
+            export let clampTo3DTiles: string;
             export let absolute: string;
             export let relativeToGround: string;
+            export let relativeToTerrain: string;
+            export let relativeTo3DTiles: string;
             export let groundLevel: string;
             export let classificationType: string;
             export let none: string;
@@ -254,10 +363,28 @@ declare namespace messages {
             export let modelHeading: string;
             export let modelPitch: string;
             export let modelRoll: string;
+            export let modelAutoScale: string;
             export let baseUrl: string;
             export let extrudedHeight: string;
             export let skirt: string;
             export let modelScale: string;
+            export namespace help_1 {
+                let clampToGround_1: string;
+                export { clampToGround_1 as clampToGround };
+                let clampToTerrain_1: string;
+                export { clampToTerrain_1 as clampToTerrain };
+                let clampTo3DTiles_1: string;
+                export { clampTo3DTiles_1 as clampTo3DTiles };
+                let absolute_1: string;
+                export { absolute_1 as absolute };
+                let relativeToGround_1: string;
+                export { relativeToGround_1 as relativeToGround };
+                let relativeToTerrain_1: string;
+                export { relativeToTerrain_1 as relativeToTerrain };
+                let relativeTo3DTiles_1: string;
+                export { relativeTo3DTiles_1 as relativeTo3DTiles };
+            }
+            export { help_1 as help };
         }
         export namespace validation {
             let allowedRange: string;
@@ -287,13 +414,13 @@ declare namespace messages {
             export let light: string;
         }
     }
-    export namespace help_1 {
+    export namespace help_2 {
         let title_13: string;
         export { title_13 as title };
         let tooltip_4: string;
         export { tooltip_4 as tooltip };
     }
-    export { help_1 as help };
+    export { help_2 as help };
     export namespace featureInfo {
         let activateToolTitle: string;
         let deactivateToolTitle: 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',
@@ -193,12 +201,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',
@@ -213,9 +222,13 @@ const messages = {
     vectorProperties: {
       header: 'Vector properties',
       altitudeMode: 'Altitude mode',
-      clampToGround: 'Clamp to ground',
+      clampToGround: 'Drape on surface',
+      clampToTerrain: 'Drape on terrain',
+      clampTo3DTiles: 'Drape on objects',
       absolute: 'Absolute',
-      relativeToGround: 'Relative to ground',
+      relativeToGround: 'Relative to surface',
+      relativeToTerrain: 'Relative to terrain',
+      relativeTo3DTiles: 'Relative to objects',
       groundLevel: 'Ground level',
       classificationType: 'Classification',
       none: 'None',
@@ -234,10 +247,24 @@ const messages = {
       modelHeading: 'Model heading',
       modelPitch: 'Model pitch',
       modelRoll: 'Model roll',
+      modelAutoScale: 'Model auto scale',
       baseUrl: 'Base URL',
       extrudedHeight: 'Extrusion',
       skirt: 'Skirts',
       modelScale: 'Model scale',
+      help: {
+        clampToGround:
+          'Drape on any surface (such as terrain, mesh or buildings)',
+        clampToTerrain: 'Only drape onto the terrain.',
+        clampTo3DTiles: 'Only drape on objects (such as a mesh or buildings)',
+        absolute:
+          'Every vertex is drawn at its 3D position, not applicable to 2D features',
+        relativeToGround:
+          'Relative to any surface (such as terrain, mesh or buildings)',
+        relativeToTerrain: 'Only relative to the terrain',
+        relativeTo3DTiles:
+          'Only relative to objects (such as a mesh or buildings)',
+      },
     },
     validation: {
       allowedRange: 'Allowed value range',

package/src/i18n/i18nCollection.d.ts

@@ -16,8 +16,8 @@ export function mergeDeep(...sources: Object[]): Object;
 /**
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
- * @typedef {Object} I18nConfigurationItem
- * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @typedef {Record<string, string | object> & { name: string, properties?: object, de?: object, en?: object }} I18nConfigurationItem
+ * @property {string} name - the name for the item.
  * @property {Object} [properties]
  * @property {Object} [de]
  * @property {Object} [en]
@@ -33,17 +33,11 @@ export default I18nCollection;
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
  */
-export type I18nConfigurationItem = {
-    /**
-     * - optional name for the item. If not provided checksum is used.
-     */
-    name?: string | undefined;
-    properties?: Object | undefined;
-    de?: Object | undefined;
-    /**
-     * ...
-     */
-    en?: Object | undefined;
+export type I18nConfigurationItem = Record<string, string | object> & {
+    name: string;
+    properties?: object;
+    de?: object;
+    en?: object;
 };
 /**
  * @extends {IndexedCollection<I18nConfigurationItem>}
@@ -74,9 +68,9 @@ declare class I18nCollection extends IndexedCollection<I18nConfigurationItem> {
     /**
      * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
      * Includes all available plugin messages.
-     * @returns {Object}
+     * @returns {Record<string, object>}
      */
-    getMergedMessages(): Object;
+    getMergedMessages(): Record<string, object>;
 }
 import { IndexedCollection } from '@vcmap/core';
 import { VcsEvent } from '@vcmap/core';

package/src/i18n/i18nCollection.js

@@ -17,8 +17,8 @@ export function isObject(item) {
 /**
  * Item for internationalization containing an object with key value mapping for each locale (de, en, nl, pl, ...).
  * Other locales can be supported by adding corresponding mapping objects with associated locale key.
- * @typedef {Object} I18nConfigurationItem
- * @property {string} [name] - optional name for the item. If not provided checksum is used.
+ * @typedef {Record<string, string | object> & { name: string, properties?: object, de?: object, en?: object }} I18nConfigurationItem
+ * @property {string} name - the name for the item.
  * @property {Object} [properties]
  * @property {Object} [de]
  * @property {Object} [en]
@@ -113,7 +113,7 @@ class I18nCollection extends IndexedCollection {
   /**
    * Returns a merged Message Object with the locale as a key and an Object with all the translated keys.
    * Includes all available plugin messages.
-   * @returns {Object}
+   * @returns {Record<string, object>}
    */
   getMergedMessages() {
     const pluginMessages = [...this._pluginCollection]

package/src/init.d.ts

@@ -18,41 +18,8 @@ export function initAppFromModule(mountTarget: string, configUrl?: string | unde
  * @returns {Promise<import("@src/vcsUiApp.js").default>}
  */
 export function initAppFromAppConfig(mountTarget: string, appUrl: string): Promise<import("@src/vcsUiApp.js").default>;
-export namespace VcsUiAppConfigPattern {
-    let id: (StringConstructor | undefined)[];
-    let layers: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let maps: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let styles: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let viewpoints: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let startingViewpointName: (StringConstructor | undefined)[];
-    let startingMapName: (StringConstructor | undefined)[];
-    let projection: (ObjectConstructor | undefined)[];
-    let categories: ({
-        name: StringConstructor;
-        items: ObjectConstructor[];
-    }[] | undefined)[];
-    let obliqueCollections: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let plugins: (ObjectConstructor[] | undefined)[];
-    let contentTree: (ObjectConstructor[] | undefined)[];
-    let uiConfig: (ObjectConstructor[] | undefined)[];
-    let featureInfo: ({
-        type: StringConstructor;
-        name: StringConstructor;
-    }[] | undefined)[];
-    let i18n: (ObjectConstructor[] | undefined)[];
-}
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {Record<string, import("@vcsuite/check").Pattern}
+ */
+export const VcsUiAppConfigPattern: Record<string, import("@vcsuite/check").Pattern>;

package/src/init.js

@@ -1,9 +1,9 @@
-import Vue from 'vue';
-import { check, checkMaybe, is } from '@vcsuite/check';
+import { createApp } from 'vue';
+import { check, is, maybe, oneOf, optional } 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
@@ -15,23 +15,24 @@ const VcsObjectPattern = {
 
 /**
  * Base pattern to check VcsUiAppConfig
+ * @type {Record<string, import("@vcsuite/check").Pattern}
  */
 export const VcsUiAppConfigPattern = {
-  id: [undefined, String],
-  layers: [undefined, [VcsObjectPattern]],
-  maps: [undefined, [VcsObjectPattern]],
-  styles: [undefined, [VcsObjectPattern]],
-  viewpoints: [undefined, [VcsObjectPattern]],
-  startingViewpointName: [undefined, String],
-  startingMapName: [undefined, String],
-  projection: [undefined, Object],
-  categories: [undefined, [{ name: String, items: [Object] }]],
-  obliqueCollections: [undefined, [VcsObjectPattern]],
-  plugins: [undefined, [Object]],
-  contentTree: [undefined, [Object]],
-  uiConfig: [undefined, [Object]],
-  featureInfo: [undefined, [VcsObjectPattern]],
-  i18n: [undefined, [Object]],
+  id: optional(String),
+  layers: optional([VcsObjectPattern]),
+  maps: optional([VcsObjectPattern]),
+  styles: optional([VcsObjectPattern]),
+  viewpoints: optional([VcsObjectPattern]),
+  startingViewpointName: optional(String),
+  startingMapName: optional(String),
+  projection: optional(Object),
+  categories: optional([{ name: String, items: [Object] }]),
+  obliqueCollections: optional([VcsObjectPattern]),
+  plugins: optional([Object]),
+  contentTree: optional([Object]),
+  uiConfig: optional([Object]),
+  featureInfo: optional([VcsObjectPattern]),
+  i18n: optional([Object]),
 };
 
 /**
@@ -42,16 +43,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;
 }
@@ -64,7 +63,7 @@ export default async function initApp(mountTarget) {
  */
 export async function initAppFromModule(mountTarget, configUrl) {
   check(mountTarget, String);
-  checkMaybe(configUrl, String);
+  check(configUrl, maybe(String));
 
   const app = await initApp(mountTarget);
   if (configUrl) {
@@ -92,7 +91,7 @@ export async function initAppFromAppConfig(mountTarget, appUrl) {
    */
   const appConfig = await fetch(appUrl).then((response) => response.json());
 
-  check(appConfig.modules, [String, Object]);
+  check(appConfig.modules, [oneOf(String, Object)]);
 
   const modules = await Promise.all(
     appConfig.modules.map(async (c) => {

package/src/legend/StyleLegendItem.vue

@@ -1,13 +1,14 @@
 <template>
-  <v-list dense>
-    <v-layout wrap :column="item.colNr === 1">
-      <v-flex
+  <v-list class="style-legend-item">
+    <v-row no-gutters>
+      <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 class="pa-0" :class="determineInnerPadding(idx)">
+          <template #prepend>
             <v-img
               v-if="
                 row.type === StyleRowType.Icon ||
@@ -15,7 +16,6 @@
               "
               width="32"
               height="24"
-              contain
               :src="getImageSrcFromShape(row.image)"
             />
             <svg
@@ -39,7 +39,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 +85,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="pa-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 +120,10 @@
     name: 'StyleLegendItem',
     components: {
       VList,
-      VLayout,
-      VFlex,
+      VRow,
+      VCol,
       VListItem,
-      VListItemIcon,
       VImg,
-      VListItemContent,
       VListItemTitle,
     },
     props: {
@@ -164,6 +160,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';