@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/application/VcsPanoramaFooter.vue.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {}, {}, {}, {}, 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<{}>>, {}, {}>;

package/src/application/VcsPositionDisplay.vue

@@ -75,8 +75,8 @@
     wgs84Projection,
   } from '@vcmap/core';
   import { VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components';
-  import VcsButton from '../components/buttons/VcsButton.vue';
-  import VcsFormattedNumber from '../components/form-output/VcsFormattedNumber.vue';
+  import VcsButton from '../components/buttons/VcsButton.ts.vue';
+  import VcsFormattedNumber from '../components/form-output/VcsFormattedNumber.ts.vue';
   import PositionDisplayInteraction from './positionDisplayInteraction.js';
 
   /**

package/src/application/VcsPositionDisplay.vue.d.ts

@@ -1,4 +1,6 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {
     positionDisplayAction: {
         name: string;
         title: string;
@@ -6,12 +8,11 @@ declare const _default: import("vue").DefineComponent<{}, {
         active: boolean;
         callback: () => void;
     };
-    transformedPosition: import("vue").ComputedRef<import("ol/coordinate.js", { with: { "resolution-mode": "import" } }).Coordinate>;
-    fractionDigits: import("vue").ComputedRef<2 | 6>;
-    selectedEPSG: import("vue").Ref<string[]>;
-    items: import("vue").Ref<{
+    transformedPosition: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<import("ol/coordinate.js", { with: { "resolution-mode": "import" } }).Coordinate>;
+    fractionDigits: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<2 | 6>;
+    selectedEPSG: import("vue", { with: { "resolution-mode": "import" } }).Ref<string[]>;
+    items: import("vue", { with: { "resolution-mode": "import" } }).Ref<{
         text: any;
         value: string;
     }[]>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;
+}, {}, {}, {}, 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<{}>>, {}, {}>;

package/src/application/VcsSettings.vue

@@ -58,10 +58,10 @@
   import { ref, inject, onUnmounted, computed } from 'vue';
   import { useTheme } from 'vuetify';
   import { VCol, VContainer, VRow } from 'vuetify/components';
-  import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
-  import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
-  import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
-  import VcsSlider from '../components/form-inputs-controls/VcsSlider.vue';
+  import VcsLabel from '../components/form-inputs-controls/VcsLabel.ts.vue';
+  import VcsSelect from '../components/form-inputs-controls/VcsSelect.ts.vue';
+  import VcsRadio from '../components/form-inputs-controls/VcsRadio.ts.vue';
+  import VcsSlider from '../components/form-inputs-controls/VcsSlider.ts.vue';
 
   /**
    * @description The settings window of a VcsMap application

package/src/application/VcsSettings.vue.d.ts

@@ -1,8 +1,9 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    themeMode: import("vue").WritableComputedRef<boolean>;
-    language: import("vue").WritableComputedRef<string>;
-    languages: import("vue").Ref<never[]>;
-    displaySettings: import("vue").WritableComputedRef<any>;
-    is3D: import("vue").Ref<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {
+    themeMode: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<boolean>;
+    language: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<string>;
+    languages: import("vue", { with: { "resolution-mode": "import" } }).Ref<never[]>;
+    displaySettings: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<any>;
+    is3D: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+}, {}, {}, {}, 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<{}>>, {}, {}>;

package/src/application/VcsSplashScreen.vue

@@ -79,10 +79,10 @@
     setToLocalStorage,
   } from '../localStorage.js';
   import { executeCallbacks } from '../callback/vcsCallback.js';
-  import VcsFormButton from '../components/buttons/VcsFormButton.vue';
-  import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
-  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
-  import { useProxiedAtomicModel } from '../components/modelHelper.js';
+  import VcsFormButton from '../components/buttons/VcsFormButton.ts.vue';
+  import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.ts.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.ts.vue';
+  import { useProxiedAtomicModel } from '../components/modelHelper.ts';
   import { name } from '../../package.json';
 
   /**

package/src/application/VcsSplashScreen.vue.d.ts

@@ -9,7 +9,9 @@ export function getSplashScreenHash(app: import("@vcmap/ui").VcsUiApp): Promise<
  * @returns {boolean} - true if the SplashScreenConfigHash of the local storage is different from the current SplashScreenConfigHash
  */
 export function shouldShowSplashSceen(app: import("../vcsUiApp.js").default): boolean;
-declare const _default: import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -19,18 +21,18 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {
-    localValue: import("vue").Ref<any>;
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<boolean>;
     exitScreen: () => void;
     secondaryButtonClicked: () => void;
-    checkBox: import("vue").Ref<boolean>;
-    dontShowAgain: import("vue").Ref<boolean>;
-    position: import("vue").ComputedRef<{
+    checkBox: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    dontShowAgain: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    position: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
         width: any;
         height: any;
         maxWidth: any;
         maxHeight: any;
     }>;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, 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<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -42,4 +44,3 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     modelValue: boolean;
 }, {}>;
-export default _default;

package/src/application/VcsTextPage.vue

@@ -6,7 +6,7 @@
 
 <script>
   import { VContainer } from 'vuetify/components';
-  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.ts.vue';
 
   /**
    * @description Container wrapper around VcsMarkdown

package/src/application/VcsTextPage.vue.d.ts

@@ -1,12 +1,13 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
     content: {
         type: StringConstructor;
         required: true;
     };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, any, {}, {}, 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<{
     content: {
         type: StringConstructor;
         required: true;
     };
 }>>, {}, {}>;
-export default _default;

package/src/application/VcsTextPageFooter.vue.d.ts

@@ -1,4 +1,6 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
     textPage: {
         type: ObjectConstructor;
         default: () => void;
@@ -9,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     addTextPage: () => void;
-}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, any, {}, {}, 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<{
     textPage: {
         type: ObjectConstructor;
         default: () => void;
@@ -21,4 +23,3 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     textPage: Record<string, any>;
 }, {}>;
-export default _default;

package/src/application/uiConfigHelper.d.ts

@@ -3,22 +3,22 @@
  * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
  * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
  */
-export function getDataProtection(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType | undefined>;
+export function getDataProtection(uiConfig: import("../uiConfig.js").UiConfigObject): import("vue").ComputedRef<import("../uiConfig.js").TextPageType | undefined>;
 /**
  * Creates a computed property for imprint configuration.
  * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
  * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType|undefined>}
  */
-export function getImprint(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType | undefined>;
+export function getImprint(uiConfig: import("../uiConfig.js").UiConfigObject): import("vue").ComputedRef<import("../uiConfig.js").TextPageType | undefined>;
 /**
  * Creates a computed property for additional footer information configuration.
  * @param {import("../uiConfig.js").UiConfigObject} uiConfig - The UI configuration object from the app.
  * @returns {import('vue').ComputedRef<import('../uiConfig.js').TextPageType[]|undefined>}
  */
-export function getFooterInformation(uiConfig: import("../uiConfig.js").UiConfigObject): import('vue').ComputedRef<import('../uiConfig.js').TextPageType[] | undefined>;
+export function getFooterInformation(uiConfig: import("../uiConfig.js").UiConfigObject): import("vue").ComputedRef<import("../uiConfig.js").TextPageType[] | undefined>;
 /**
  * Creates a computed property for mobile logo.
  * @param {import("../vcsUiApp.js").default} app - The VcsUiApp.
  * @returns {import('vue').ComputedRef<string>}
  */
-export function getMobileLogo(app: import("../vcsUiApp.js").default): import('vue').ComputedRef<string>;
+export function getMobileLogo(app: import("../vcsUiApp.js").default): import("vue").ComputedRef<string>;

package/src/callback/hideObjectsCallback.d.ts

@@ -12,7 +12,7 @@ export default class HideObjectsCallback extends VcsCallback {
      * @param {HideObjectsCallbackOptions} options
      * @param {import('@vcmap/ui').VcsUiApp} app
      */
-    constructor(options: HideObjectsCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    constructor(options: HideObjectsCallbackOptions, app: import("@vcmap/ui").VcsUiApp);
     /** @type {string | undefined} */
     _layerName: string | undefined;
     /** @type {string[]} */
@@ -21,7 +21,7 @@ export default class HideObjectsCallback extends VcsCallback {
     /** @returns {HideObjectsCallbackOptions} */
     toJSON(): HideObjectsCallbackOptions;
 }
-export type HideObjectsCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+export type HideObjectsCallbackOptions = import("@vcmap/ui").VcsCallbackOptions & {
     layerName?: string;
     objectIds: string[];
 };

package/src/callback/highlightObjectsCallback.d.ts

@@ -15,7 +15,7 @@ export default class HighlightObjectsCallback extends VcsCallback {
      * @param {HighlightObjectsCallbackOptions} options
      * @param {import('@vcmap/ui').VcsUiApp} app
      */
-    constructor(options: HighlightObjectsCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    constructor(options: HighlightObjectsCallbackOptions, app: import("@vcmap/ui").VcsUiApp);
     /** @type {string} */
     _layerName: string;
     /** @type {Record<string, VectorStyleItemOptions>} */
@@ -24,8 +24,8 @@ export default class HighlightObjectsCallback extends VcsCallback {
     /** @returns {HighlightObjectsCallbackOptions} */
     toJSON(): HighlightObjectsCallbackOptions;
 }
-export type VectorStyleItemOptions = import('@vcmap/core').VectorStyleItemOptions;
-export type HighlightObjectsCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+export type VectorStyleItemOptions = import("@vcmap/core").VectorStyleItemOptions;
+export type HighlightObjectsCallbackOptions = import("@vcmap/ui").VcsCallbackOptions & {
     layerName: string;
     toHighlight: Record<string, VectorStyleItemOptions>;
 };

package/src/callback/showObjectsCallback.d.ts

@@ -12,7 +12,7 @@ export default class ShowObjectsCallback extends VcsCallback {
      * @param {ShowObjectsCallbackOptions} options
      * @param {import('@vcmap/ui').VcsUiApp} app
      */
-    constructor(options: ShowObjectsCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    constructor(options: ShowObjectsCallbackOptions, app: import("@vcmap/ui").VcsUiApp);
     /** @type {string | undefined} */
     _layerName: string | undefined;
     /** @type {string[]} */
@@ -21,7 +21,7 @@ export default class ShowObjectsCallback extends VcsCallback {
     /** @returns {ShowObjectsCallbackOptions} */
     toJSON(): ShowObjectsCallbackOptions;
 }
-export type ShowObjectsCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+export type ShowObjectsCallbackOptions = import("@vcmap/ui").VcsCallbackOptions & {
     layerName?: string;
     objectIds: string[];
 };

package/src/callback/startFlightCallback.d.ts

@@ -14,7 +14,7 @@ export default class StartFlightCallback extends VcsCallback {
      * @param {StartFlightCallbackOptions} options
      * @param {import('@vcmap/ui').VcsUiApp} app
      */
-    constructor(options: StartFlightCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    constructor(options: StartFlightCallbackOptions, app: import("@vcmap/ui").VcsUiApp);
     /** @type {string | FlightInstanceOptions} */
     _flight: string | FlightInstanceOptions;
     /** @returns {Promise<void>} */
@@ -22,8 +22,8 @@ export default class StartFlightCallback extends VcsCallback {
     /** @returns {StartFlightCallbackOptions} */
     toJSON(): StartFlightCallbackOptions;
 }
-export type FlightInstanceOptions = import('@vcmap/core').FlightInstanceOptions;
-export type StartFlightCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+export type FlightInstanceOptions = import("@vcmap/core").FlightInstanceOptions;
+export type StartFlightCallbackOptions = import("@vcmap/ui").VcsCallbackOptions & {
     flight: string | FlightInstanceOptions;
 };
 import VcsCallback from './vcsCallback.js';

package/src/callback/stopFlightCallback.d.ts

@@ -11,14 +11,14 @@ export default class StopFlightCallback extends VcsCallback {
      * @param {StopFlightCallbackOptions} options
      * @param {import('@vcmap/ui').VcsUiApp} app
      */
-    constructor(options: StopFlightCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    constructor(options: StopFlightCallbackOptions, app: import("@vcmap/ui").VcsUiApp);
     /** @type {string} */
     _flightName: string;
     callback(): void;
     /** @returns {StopFlightCallbackOptions} */
     toJSON(): StopFlightCallbackOptions;
 }
-export type StopFlightCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+export type StopFlightCallbackOptions = import("@vcmap/ui").VcsCallbackOptions & {
     flightName: string;
 };
 import VcsCallback from './vcsCallback.js';

package/src/callback/unHighlightObjectsCallback.d.ts

@@ -12,7 +12,7 @@ export default class UnHighlightObjectsCallback extends VcsCallback {
      * @param {UnHighlightObjectsCallbackOptions} options
      * @param {import('@vcmap/ui').VcsUiApp} app
      */
-    constructor(options: UnHighlightObjectsCallbackOptions, app: import('@vcmap/ui').VcsUiApp);
+    constructor(options: UnHighlightObjectsCallbackOptions, app: import("@vcmap/ui").VcsUiApp);
     /** @type {string} */
     _layerName: string;
     /** @type {(string | number)[]} */
@@ -21,7 +21,7 @@ export default class UnHighlightObjectsCallback extends VcsCallback {
     /** @returns {UnHighlightObjectsCallbackOptions} */
     toJSON(): UnHighlightObjectsCallbackOptions;
 }
-export type UnHighlightObjectsCallbackOptions = import('@vcmap/ui').VcsCallbackOptions & {
+export type UnHighlightObjectsCallbackOptions = import("@vcmap/ui").VcsCallbackOptions & {
     layerName: string;
     toUnHighlight: (string | number)[];
 };

package/src/components/{ImageElementInjector.vue → ImageElementInjector.ts.vue}

@@ -2,12 +2,13 @@
   <div />
 </template>
 
-<script>
+<script lang="ts">
+  import { defineComponent } from 'vue';
   /**
    * @description A component injecting an HTMLCanvasElement or HTMLImageElement in a div.
    * @vue-prop {HTMLCanvasElement|HTMLImageElement} element
    */
-  export default {
+  export default defineComponent({
     name: 'ImageElementInjector',
     props: {
       element: {
@@ -18,7 +19,7 @@
     mounted() {
       this.$el.replaceWith(this.element);
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/ImageElementInjector.ts.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @description A component injecting an HTMLCanvasElement or HTMLImageElement in a div.
+ * @vue-prop {HTMLCanvasElement|HTMLImageElement} element
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    element: {
+        type: ({
+            new (): HTMLCanvasElement;
+            prototype: HTMLCanvasElement;
+        } | {
+            new (): HTMLImageElement;
+            prototype: HTMLImageElement;
+        })[];
+        required: true;
+    };
+}, 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<{
+    element: {
+        type: ({
+            new (): HTMLCanvasElement;
+            prototype: HTMLCanvasElement;
+        } | {
+            new (): HTMLImageElement;
+            prototype: HTMLImageElement;
+        })[];
+        required: true;
+    };
+}>>, {}, {}>;

package/src/components/attrsHelpers.d.ts

@@ -1,5 +1 @@
-/**
- * @param {Record<string, unknown>} attrs
- * @returns {Record<string, unknown>}
- */
-export function removeListenersFromAttrs(attrs: Record<string, unknown>): Record<string, unknown>;
+export declare function removeListenersFromAttrs(attrs: Record<string, unknown>): Record<string, unknown>;

package/src/components/attrsHelpers.ts

@@ -0,0 +1,11 @@
+import { is } from '@vcsuite/check';
+
+export function removeListenersFromAttrs(
+  attrs: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(
+      ([key, value]): boolean => !(key.startsWith('on') && is(value, Function)),
+    ),
+  );
+}

package/src/components/buttons/{VcsActionButtonList.vue → VcsActionButtonList.ts.vue}

@@ -42,20 +42,24 @@
     <v-spacer v-else-if="blockOverflow" />
   </div>
 </template>
-<script>
+
+<script lang="ts">
   import { VIcon, VMenu, VSpacer } from 'vuetify/components';
-  import VcsButton from './VcsButton.vue';
-  import VcsToolButton from './VcsToolButton.vue';
-  import VcsFormButton from './VcsFormButton.vue';
-  import VcsActionList, { validateActions } from '../lists/VcsActionList.vue';
+  import { computed, defineComponent, inject, type PropType } from 'vue';
+  import type VcsUiApp from '../../vcsUiApp.js';
+  import VcsButton from './VcsButton.ts.vue';
+  import VcsToolButton from './VcsToolButton.ts.vue';
+  import VcsFormButton from './VcsFormButton.ts.vue';
+  import VcsActionList, {
+    validateActions,
+  } from '../lists/VcsActionList.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
   /**
    * compares two strings token based
-   * @param {string} str1
-   * @param {string} str2
-   * @returns {number} the convergence of both strings in percent
+   * @returns the convergence of both strings in percent
    */
-  function jaccardSimilarity(str1, str2) {
+  function jaccardSimilarity(str1: string, str2: string): number {
     const set1 = new Set(str1.split(' '));
     const set2 = new Set(str2.split(' '));
     const intersection = new Set([...set1].filter((x) => set2.has(x)));
@@ -80,7 +84,7 @@
    * @vue-computed {Array<VcsAction>} buttons - buttons rendered directly, have to provide an icon
    * @vue-computed {Array<VcsAction>} overflowButtons - rest of buttons rendered in overflow
    */
-  export default {
+  export default defineComponent({
     name: 'VcsActionButtonList',
     components: {
       VcsActionList,
@@ -93,14 +97,14 @@
     },
     props: {
       actions: {
-        type: Array,
+        type: Array as PropType<VcsAction[]>,
         required: true,
         validator: validateActions,
       },
       button: {
         type: String,
         default: 'VcsButton',
-        validator: (type) =>
+        validator: (type: string) =>
           ['VcsButton', 'VcsToolButton', 'VcsFormButton'].includes(type),
       },
       overflowCount: {
@@ -128,52 +132,58 @@
         default: 'bottom',
       },
     },
-    computed: {
-      right() {
-        return this.$attrs.right !== undefined && this.$attrs.right !== false;
-      },
-      computedCount() {
+    setup(props, { attrs }) {
+      const app = inject('vcsApp') as VcsUiApp;
+      const right = computed(
+        () => attrs.right !== undefined && attrs.right !== false,
+      );
+      const computedCount = computed(() => {
         if (
-          !this.forceOverflow &&
-          this.actions.length === this.overflowCount + 1
+          !props.forceOverflow &&
+          props.actions.length === props.overflowCount + 1
         ) {
-          return this.actions.length;
+          return props.actions.length;
         }
-        return this.overflowCount;
-      },
-      buttons() {
-        const buttons = this.actions
+        return props.overflowCount;
+      });
+      const buttons = computed(() => {
+        const b = props.actions
           .filter((i) => i.icon)
-          .slice(0, this.computedCount);
-        if (this.right) {
-          return buttons.reverse();
-        }
-        return buttons;
-      },
-      overflowButtons() {
-        const buttonsNames = this.buttons.map((i) => i.name);
-        return this.actions
-          .filter((i) => !buttonsNames.includes(i.name))
-          .map((i) => {
-            const { title, ...button } = i;
-            if (
-              title &&
-              jaccardSimilarity(this.$t(i.name), this.$t(title)) > 0.5
-            ) {
-              return button;
-            }
-            return i;
-          });
-      },
-      classes() {
-        const classes = ['d-flex', 'align-center', 'action-btn-wrap'];
-        if (this.right) {
-          classes.push('justify-end');
+          .slice(0, computedCount.value);
+        if (right.value) {
+          return b.reverse();
         }
-        return classes;
-      },
+        return b;
+      });
+
+      return {
+        buttons,
+        overflowButtons: computed(() => {
+          const buttonsNames = buttons.value.map((i) => i.name);
+          return props.actions
+            .filter((i) => !buttonsNames.includes(i.name))
+            .map((i) => {
+              const { title, ...button } = i;
+              if (
+                title &&
+                jaccardSimilarity(app.vueI18n.t(i.name), app.vueI18n.t(title)) >
+                  0.5
+              ) {
+                return button;
+              }
+              return i;
+            });
+        }),
+        classes: computed(() => {
+          const classes = ['d-flex', 'align-center', 'action-btn-wrap'];
+          if (right.value) {
+            classes.push('justify-end');
+          }
+          return classes;
+        }),
+      };
     },
-  };
+  });
 </script>
 <style scoped lang="scss">
   :deep(.v-spacer) {