@vcmap/ui 6.3.11 → 7.0.0-rc.1

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>

package/src/components/projection/VcsProjection.ts.vue.d.ts

@@ -0,0 +1,57 @@
+import type { PropType } from 'vue';
+import type { ProjectionOptions } from '@vcmap/core';
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ProjectionOptions>;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideRequestButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideAlias: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    modelValue: {
+        type: PropType<ProjectionOptions>;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideRequestButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideAlias: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: ProjectionOptions;
+    required: boolean;
+    hideRequestButton: boolean;
+    hideAlias: boolean;
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/src/components/section/{VcsExpansionPanel.vue → VcsExpansionPanel.ts.vue}

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
   import {
     VExpansionPanel,
     VExpansionPanelText,
@@ -7,10 +7,12 @@
     VListItemTitle,
     VTooltip,
   } from 'vuetify/components';
+  import type { PropType } from 'vue';
   import { computed, ref, useSlots } from 'vue';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
   import { createEllipseTooltip } from '../composables.js';
   import { useIconSize } from '../../vuePlugins/vuetify.js';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
   const props = defineProps({
     heading: {
@@ -22,7 +24,7 @@
       default: false,
     },
     headerActions: {
-      type: Array,
+      type: Array as PropType<VcsAction[]>,
       default: () => [],
     },
     actionButtonListOverflowCount: {
@@ -33,8 +35,7 @@
   });
 
   const slots = useSlots();
-
-  const panelHeader = ref(null);
+  const panelHeader = ref<InstanceType<typeof VListItemTitle> | null>(null);
   const panelHeaderTooltip = createEllipseTooltip(
     computed(() => panelHeader.value?.$el),
     computed(() => undefined),
@@ -42,6 +43,7 @@
   );
   const iconSize = useIconSize();
 </script>
+
 <template>
   <v-expansion-panel
     :disabled="disabled"

package/src/components/section/VcsExpansionPanel.ts.vue.d.ts

@@ -0,0 +1,58 @@
+import type { PropType } from 'vue';
+import type { VcsAction } from '../../actions/actionHelper.js';
+declare var __VLS_41: {}, __VLS_55: {};
+type __VLS_Slots = {} & {
+    'header-append'?: (props: typeof __VLS_41) => any;
+} & {
+    default?: (props: typeof __VLS_55) => any;
+};
+declare const __VLS_base: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+}, unknown, 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<{
+    heading: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    headerActions: {
+        type: PropType<VcsAction[]>;
+        default: () => never[];
+    };
+    actionButtonListOverflowCount: {
+        type: NumberConstructor;
+        required: false;
+        default: undefined;
+    };
+}>>, {
+    disabled: boolean;
+    actionButtonListOverflowCount: number;
+    heading: string;
+    headerActions: VcsAction[];
+}, {}>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};