@vcmap/ui 6.3.10 → 7.0.0-rc.1

package/src/components/notification/VcsHelpTooltip.ts.vue.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @description A component for displaying help as tooltip via an icon.
+ * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+ * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    fontSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    text: string;
+    icon: string;
+}, {}>;

package/src/components/plugins/{AbstractConfigEditor.vue → AbstractConfigEditor.ts.vue}

@@ -11,7 +11,7 @@
             {{ $st(submitButtonTitle) }}
           </VcsFormButton>
           <VcsFormButton @click.stop="cancel">
-            {{ $t('components.cancel') }}
+            {{ $st('components.cancel') }}
           </VcsFormButton>
           <VcsActionButtonList :actions="actions" button="VcsFormButton" />
         </div>
@@ -20,11 +20,15 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
   import { VContainer, VForm } from 'vuetify/components';
-  import { ref, inject } from 'vue';
-  import VcsFormButton from '../buttons/VcsFormButton.vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import type { PropType } from 'vue';
+  import { defineComponent, inject, ref } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.ts.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
+  import type VcsUiApp from '../../vcsUiApp.js';
+  import type { WindowState } from '../../manager/window/windowManager.js';
 
   /**
    * @description Basic wrapper for all config editor components using {@link https://vuetifyjs.com/en/api/v-form/ |vuetify form}.
@@ -37,7 +41,7 @@
    * @vue-event {Event} cancel - Event fired on clicking the cancel button.
    * @vue-event {Event} reset - Event fired on clicking the reset button.
    */
-  export default {
+  export default defineComponent({
     name: 'AbstractConfigEditor',
     components: {
       VContainer,
@@ -51,7 +55,7 @@
         default: false,
       },
       actions: {
-        type: Array,
+        type: Array as PropType<VcsAction[]>,
         default: () => [],
       },
       submitButtonTitle: {
@@ -69,34 +73,35 @@
     },
     emits: ['submit', 'cancel', 'reset'],
     setup(props, { attrs, emit }) {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
 
-      const close = () => {
-        if (app.windowManager.has(attrs['window-state'].id)) {
-          app.windowManager.remove(attrs['window-state'].id);
+      const close = (): void => {
+        const windowState = attrs['window-state'] as WindowState;
+        if (app.windowManager.has(windowState.id)) {
+          app.windowManager.remove(windowState.id);
         }
       };
 
       return {
         isValid: ref(true),
-        submit(e) {
+        submit(e: Event): void {
           emit('submit', e);
           if (props.autoClose) {
             close();
           }
         },
-        cancel(e) {
+        cancel(e: Event): void {
           emit('cancel', e);
           if (props.autoClose) {
             close();
           }
         },
-        reset(e) {
+        reset(e: Event): void {
           emit('reset', e);
         },
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/plugins/AbstractConfigEditor.ts.vue.d.ts

@@ -0,0 +1,73 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+/**
+ * @description Basic wrapper for all config editor components using {@link https://vuetifyjs.com/en/api/v-form/ |vuetify form}.
+ * Providing a footer with submit, cancel and optionally reset button.
+ * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
+ * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
+ * @vue-prop {string} [submitButtonTitle='components.apply'] - Option to change the submit button title, e.g. to 'components.add'.
+ * @vue-prop {boolean} [autoClose=true] - Whether window component shall be close on submit or cancel.
+ * @vue-event {Event} submit - Event fired on clicking the submit button.
+ * @vue-event {Event} cancel - Event fired on clicking the cancel button.
+ * @vue-event {Event} reset - Event fired on clicking the reset button.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    showReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+    submitButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    setConfigOnCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    isValid: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    submit(e: Event): void;
+    cancel(e: Event): void;
+    reset(e: Event): void;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, ("reset" | "submit" | "cancel")[], "reset" | "submit" | "cancel", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    showReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    actions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+    submitButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    setConfigOnCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onReset?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+}, {
+    actions: VcsAction[];
+    showReset: boolean;
+    submitButtonTitle: string;
+    setConfigOnCancel: boolean;
+    autoClose: boolean;
+}, {}>;

package/src/components/plugins/{VcsLoadingOverlay.vue → VcsLoadingOverlay.ts.vue}

@@ -7,10 +7,10 @@
   >
     <v-card class="pa-1">
       <v-card-title v-if="title" class="title loading">
-        {{ $t(title) }}
+        {{ $st(title) }}
       </v-card-title>
       <v-card-text v-if="text" class="px-4">
-        {{ $t(text) }}
+        {{ $st(text) }}
       </v-card-text>
       <div class="d-flex justify-end px-4" v-if="hasProgress">
         {{ localProgress }}%
@@ -25,7 +25,7 @@
       <template #actions v-if="cancellable">
         <div class="pa-2">
           <VcsFormButton @click="show = false">
-            {{ $t('components.cancel') }}
+            {{ $st('components.cancel') }}
           </VcsFormButton>
         </div>
       </template>
@@ -33,7 +33,7 @@
   </v-dialog>
 </template>
 
-<script>
+<script lang="ts">
   import {
     VDialog,
     VCard,
@@ -41,8 +41,9 @@
     VProgressLinear,
     VCardTitle,
   } from 'vuetify/components';
-  import { computed, ref, watch } from 'vue';
-  import VcsFormButton from '../buttons/VcsFormButton.vue';
+  import type { PropType, Ref } from 'vue';
+  import { computed, defineComponent, ref, watch } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.ts.vue';
 
   /**
    * @description Basic overlay to display a progress bar on a VCard, with optional text and cancel button.
@@ -53,7 +54,7 @@
    * @vue-prop {string|number} [maxWidth='500'] - Optional max-width for the dialog.
    * @vue-prop {boolean} [persistent=true] - Whether the dialog should be persistent (not dismissible by clicking outside).
    */
-  export default {
+  export default defineComponent({
     name: 'VcsLoadingOverlay',
     components: {
       VDialog,
@@ -65,7 +66,7 @@
     },
     props: {
       progress: {
-        type: [Object, Number, undefined],
+        type: Object as PropType<Ref<number>>,
         default: undefined,
       },
       title: {
@@ -108,7 +109,7 @@
         }),
       };
     },
-  };
+  });
 </script>
 
 <style scoped lang="scss">

package/src/components/plugins/VcsLoadingOverlay.ts.vue.d.ts

@@ -0,0 +1,76 @@
+import type { PropType, Ref } from 'vue';
+/**
+ * @description Basic overlay to display a progress bar on a VCard, with optional text and cancel button.
+ * @vue-prop {import("vue").Ref<number>|undefined} [progress] - The current progress value, between 0 and 1.
+ * @vue-prop {string} [title] - The title of the overlay. Will be translated.
+ * @vue-prop {string} [text=''] - Optional text to display in the overlay. Will be translated.
+ * @vue-prop {boolean} [cancellable=true] - Whether the overlay can be cancelled by the user.
+ * @vue-prop {string|number} [maxWidth='500'] - Optional max-width for the dialog.
+ * @vue-prop {boolean} [persistent=true] - Whether the dialog should be persistent (not dismissible by clicking outside).
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    progress: {
+        type: PropType<Ref<number>>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancellable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    show: Ref<boolean>;
+    hasProgress: boolean;
+    localProgress: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "cancel"[], "cancel", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    progress: {
+        type: PropType<Ref<number>>;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancellable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+}, {
+    progress: Ref<number>;
+    title: string;
+    text: string;
+    persistent: boolean;
+    maxWidth: string | number;
+    cancellable: boolean;
+}, {}>;

package/src/components/plugins/{VcsWorkspaceWrapper.vue → VcsWorkspaceWrapper.ts.vue}

@@ -28,11 +28,14 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
   import { VContainer, VDivider } from 'vuetify/components';
-  import { computed, inject } from 'vue';
-  import VcsFormButton from '../buttons/VcsFormButton.vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, inject } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.ts.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
+  import type VcsUiApp from '../../vcsUiApp.js';
 
   /**
    * @description Basic wrapper for all plugins interacting with MyWorkspace.
@@ -49,7 +52,7 @@
    * @vue-event {Event} newClicked - Event fired on clicking the cancel button.
    * @vue-slot secondaryButton An optionnal named slot to add a secondary button to the footer, rendered filled on the left of the new button.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsWorkspaceWrapper',
     components: {
       VContainer,
@@ -87,18 +90,18 @@
         default: '',
       },
       actions: {
-        type: Array,
+        type: Array as PropType<VcsAction[]>,
         default: () => [],
       },
     },
     emits: ['addClicked', 'newClicked'],
     setup() {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
       return {
         workspaceHidden: computed(() => !!app.uiConfig.config.workspaceHidden),
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/plugins/VcsWorkspaceWrapper.ts.vue.d.ts

@@ -0,0 +1,100 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+/**
+ * @description Basic wrapper for all plugins interacting with MyWorkspace.
+ * Providing a footer with add and new buttons.
+ * @vue-prop {boolean} [showFooter=true] - Flag to hide the footer.
+ * @vue-prop {boolean} [showAdd=true] - Flag to show an add button in the footer. You need to handle @addClicked in a child component.
+ * @vue-prop {boolean} [disableAdd=false] - Flag to render add button disabled.
+ * @vue-prop {boolean} [tooltipAdd='components.addToMyWorkspace'] - Option to change the add button tooltip.
+ * @vue-prop {boolean} [disableNew=false] - Flag to render new button disabled.
+ * @vue-prop {boolean} [tooltipNew=''] - Option to change the add a tooltip to the new button.
+ * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
+ * @vue-prop {string} [newButtonTitle='components.new'] - Option to change the new button title, e.g. to 'components.apply'.
+ * @vue-event {Event} addClicked - Event fired on clicking the reset button.
+ * @vue-event {Event} newClicked - Event fired on clicking the cancel button.
+ * @vue-slot secondaryButton An optionnal named slot to add a secondary button to the footer, rendered filled on the left of the new button.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipAdd: {
+        type: StringConstructor;
+        default: string;
+    };
+    newButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipNew: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+}, {
+    workspaceHidden: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, ("addClicked" | "newClicked")[], "addClicked" | "newClicked", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disableAdd: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipAdd: {
+        type: StringConstructor;
+        default: string;
+    };
+    newButtonTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    disableNew: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipNew: {
+        type: StringConstructor;
+        default: string;
+    };
+    actions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+}>> & {
+    onAddClicked?: ((...args: any[]) => any) | undefined;
+    onNewClicked?: ((...args: any[]) => any) | undefined;
+}, {
+    actions: VcsAction[];
+    showFooter: boolean;
+    showAdd: boolean;
+    disableAdd: boolean;
+    tooltipAdd: string;
+    newButtonTitle: string;
+    disableNew: boolean;
+    tooltipNew: string;
+}, {}>;

package/src/components/projection/{VcsProjection.vue → VcsProjection.ts.vue}

@@ -1,20 +1,26 @@
-<script setup>
+<script setup lang="ts">
+  import type { PropType } from 'vue';
   import { computed, inject, ref, toRaw, useAttrs, watch } from 'vue';
   import { VRow, VCol, VContainer } from 'vuetify/components';
-  import { Projection } from '@vcmap/core';
+  import { getCaughtError, Projection } from '@vcmap/core';
+  import type { ProjectionOptions } from '@vcmap/core';
   import deepEqual from 'fast-deep-equal';
   import { getLogger } from '@vcsuite/logger';
-  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
-  import VcsChipArrayInput from '../form-inputs-controls/VcsChipArrayInput.vue';
-  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.ts.vue';
+  import VcsButton from '../buttons/VcsButton.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsChipArrayInput from '../form-inputs-controls/VcsChipArrayInput.ts.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
   import { NotificationType } from '../../notifier/notifier.js';
   import { useComponentId, usePadding } from '../composables.js';
+  import type VcsUiApp from '../../vcsUiApp.js';
 
   const epsgRegex = /^([a-zA-Z]+:)*(\d{4,6})$/i;
 
-  function parseEPSGCode(epsg) {
+  function parseEPSGCode(epsg: string | number | undefined): {
+    prefix?: string | null;
+    code?: string;
+  } {
     if (!epsg) {
       return {};
     }
@@ -37,7 +43,7 @@
    * @param {string|number} epsgCode
    * @returns {Promise<string>}
    */
-  function getProj4FromEPSGIo(epsgCode) {
+  function getProj4FromEPSGIo(epsgCode: string | number): Promise<string> {
     return fetch(`https://epsg.io/${epsgCode}.proj4`)
       .then((response) => {
         if (!response.ok) {
@@ -54,11 +60,8 @@
   }
 
   const props = defineProps({
-    /**
-     * @type {import("@vcmap/core").ProjectionOptions}
-     */
     modelValue: {
-      type: Object,
+      type: Object as PropType<ProjectionOptions>,
       default: undefined,
     },
     required: {
@@ -99,10 +102,7 @@
         );
       }
     },
-    {
-      deep: true,
-      immediate: true,
-    },
+    { deep: true, immediate: true },
   );
 
   const hasLocalValue = computed({
@@ -110,7 +110,7 @@
       return Object.keys(localValue?.value ?? {}).length > 0;
     },
     set(value) {
-      localValue.value = value ? { epsg: null } : undefined;
+      localValue.value = value ? { epsg: undefined } : undefined;
     },
   });
 
@@ -118,44 +118,50 @@
     () => localValue.value?.epsg,
     () => {
       const { code, prefix } = parseEPSGCode(localValue.value?.epsg);
-      if (code && code !== localValue.value.code) {
+      if (code && localValue.value && code !== localValue.value.epsg) {
         localValue.value.epsg = code;
       }
-      if (prefix && prefix !== localValue.value.prefix) {
+      if (prefix && localValue.value && prefix !== localValue.value.prefix) {
         localValue.value.prefix = prefix;
       }
     },
     { immediate: true },
   );
 
-  const app = inject('vcsApp');
+  const app = inject('vcsApp') as VcsUiApp;
 
   const requesting = ref(false);
 
-  async function requestProj4() {
+  async function requestProj4(): Promise<void> {
     try {
       requesting.value = true;
-      localValue.value.proj4 = await getProj4FromEPSGIo(localValue.value.epsg);
-    } catch (err) {
+      if (localValue.value) {
+        localValue.value.proj4 = await getProj4FromEPSGIo(
+          localValue.value.epsg as string,
+        );
+      }
+    } catch (err: unknown) {
+      const { message } = getCaughtError(err);
       app.notifier.add({
         type: NotificationType.ERROR,
         title: 'components.projection.epsgIoRequestFailed',
+        message,
       });
-      getLogger('VcsProjection').error(err);
+      getLogger('VcsProjection').error(message);
     } finally {
       requesting.value = false;
     }
   }
 
-  function validateProj4(proj4) {
+  function validateProj4(proj4: string | undefined): true | string {
     return (
       Projection.validateOptions({ ...localValue.value, proj4 }) ||
       'components.projection.invalidProj4'
     );
   }
 
-  function validateEpsg(epsg) {
-    return /^\d{4,6}$/.test(epsg) || 'components.projection.invalidProj4';
+  function validateEpsg(epsg: string | undefined): true | string {
+    return /^\d{4,6}$/.test(epsg ?? '') || 'components.projection.invalidProj4';
   }
 
   watch(
@@ -167,7 +173,7 @@
         newValue !== undefined &&
         (deepEqual(value, newValue) ||
           !(
-            validateEpsg(newValue?.epsg) === true &&
+            validateEpsg(newValue?.epsg as string | undefined) === true &&
             Projection.validateOptions(newValue)
           ))
       ) {
@@ -262,7 +268,7 @@
       <v-row no-gutters>
         <v-col cols="4">
           <VcsLabel :html-for="`${cid}-epsg`" required>
-            {{ $t('components.projection.epsg') }}
+            {{ $st('components.projection.epsg') }}
           </VcsLabel>
         </v-col>
         <v-col>
@@ -283,7 +289,7 @@
       <v-row no-gutters>
         <v-col cols="4">
           <VcsLabel :html-for="`${cid}-proj4`">
-            {{ $t('components.projection.proj4') }}
+            {{ $st('components.projection.proj4') }}
           </VcsLabel>
         </v-col>
         <v-col>
@@ -301,7 +307,7 @@
                 icon="mdi-download"
                 tooltip="components.projection.proj4Tooltip"
                 :loading="requesting"
-                :disabled="!/^\d{4,6}$/.test(epsg)"
+                :disabled="!/^\d{4,6}$/.test(epsg as string)"
                 @click="requestProj4"
               />
             </template>
@@ -311,7 +317,7 @@
       <v-row no-gutters v-if="!hideAlias">
         <v-col cols="4">
           <VcsLabel :html-for="`${cid}-alias`">
-            {{ $t('components.projection.alias') }}
+            {{ $st('components.projection.alias') }}
           </VcsLabel>
         </v-col>
         <v-col>