@vcmap/ui 5.3.3 → 6.0.0-rc.2

package/src/featureInfo/MarkdownComponent.vue

@@ -0,0 +1,16 @@
+<script setup>
+  defineOptions({});
+
+  defineProps({
+    html: {
+      type: String,
+      required: true,
+    },
+  });
+</script>
+
+<template>
+  <div class="pa-2" v-html="html" />
+</template>
+
+<style scoped lang="scss"></style>

package/src/featureInfo/MarkdownComponent.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    html: string;
+    $props: {
+        readonly html?: string | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -117,9 +117,9 @@ declare class AbstractFeatureInfoView extends VcsObject {
     static getDefaultOptions(): FeatureInfoViewOptions;
     /**
      * @param {FeatureInfoViewOptions} options
-     * @param {import("vue").Component} component
+     * @param {import("vue").Component<FeatureInfoProps, unknown, unknown>} component
      */
-    constructor(options: FeatureInfoViewOptions, component: import("vue").Component);
+    constructor(options: FeatureInfoViewOptions, component: import("vue").Component<FeatureInfoProps, unknown, unknown>);
     /**
      * @type {string[]}
      */
@@ -158,12 +158,12 @@ declare class AbstractFeatureInfoView extends VcsObject {
      * window options, configured in a module, used only internally by AbstractFeatureInfoView or subclass
      * @type {import("../manager/window/windowManager.js").WindowComponentOptions|Object}
      */
-    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions;
+    get window(): Object | import("../manager/window/windowManager.js").WindowComponentOptions<Object>;
     /**
      * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
-     * @type {import("vue").Component|undefined}
+     * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
      */
-    get component(): import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    get component(): import("vue").Component<FeatureInfoProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
     /**
      * This method returns all relevant attributes for this view.
      * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.

package/src/featureInfo/abstractFeatureInfoView.js

@@ -294,7 +294,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * @param {FeatureInfoViewOptions} options
-   * @param {import("vue").Component} component
+   * @param {import("vue").Component<FeatureInfoProps, unknown, unknown>} component
    */
   constructor(options, component) {
     super(options);
@@ -337,7 +337,7 @@ class AbstractFeatureInfoView extends VcsObject {
 
   /**
    * component provided by a FeatureInfoView class, passed to featureInfo via `getWindowComponentOptions()`
-   * @type {import("vue").Component|undefined}
+   * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
    */
   get component() {
     return this._component;

package/src/featureInfo/balloonFeatureInfoView.d.ts

@@ -24,9 +24,9 @@ export type BalloonFeatureInfoViewProps = import("./abstractFeatureInfoView.js")
 declare class BalloonFeatureInfoView extends AbstractFeatureInfoView {
     /**
      * @param {BalloonFeatureInfoViewOptions} options
-     * @param {import("vue").Component} [component=BalloonComponent]
+     * @param {import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown>} [component=BalloonComponent]
      */
-    constructor(options: BalloonFeatureInfoViewOptions, component?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined);
+    constructor(options: BalloonFeatureInfoViewOptions, component?: import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined);
     /**
      * @type {string}
      */

package/src/featureInfo/balloonFeatureInfoView.js

@@ -81,7 +81,7 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
 
   /**
    * @param {BalloonFeatureInfoViewOptions} options
-   * @param {import("vue").Component} [component=BalloonComponent]
+   * @param {import("vue").Component<BalloonFeatureInfoViewProps, unknown, unknown>} [component=BalloonComponent]
    */
   constructor(options, component) {
     super(options, component || BalloonComponent);

package/src/featureInfo/featureInfo.js

@@ -417,7 +417,7 @@ class FeatureInfo extends Collection {
             feature,
             layer,
             this._app.uiConfig.config.value.primaryColor ??
-              getDefaultPrimaryColor(),
+              getDefaultPrimaryColor(this._app),
           ),
         });
         this._clearHighlightingCb = () =>
@@ -429,7 +429,7 @@ class FeatureInfo extends Collection {
             feature,
             layer,
             this._app.uiConfig.config.value.primaryColor ??
-              getDefaultPrimaryColor(),
+              getDefaultPrimaryColor(this._app),
           ),
         });
         this._clearHighlightingCb = () =>

package/src/featureInfo/markdownFeatureInfoView.js

@@ -3,21 +3,7 @@ import {
   parseAndSanitizeMarkdown,
   replaceAttributes,
 } from '../application/markdownHelper.js';
-
-/**
- * @description A component to render markdown html
- * @vue-prop {string} html - the html to render
- */
-const MarkdownComponent = {
-  name: 'MarkdownComponent',
-  props: {
-    html: {
-      type: String,
-      required: true,
-    },
-  },
-  template: '<div class="pa-2" v-html="html" />',
-};
+import MarkdownComponent from './MarkdownComponent.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { template: string | string[] }} MarkdownFeatureInfoViewOptions

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';