@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/form-inputs-controls/VcsSelect.ts.vue.d.ts

@@ -0,0 +1,76 @@
+import type { PropType } from 'vue';
+/**
+ * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-select/ |vuetify select}.
+ * Translates the items text if it is an i18n string.
+ * Provides VTooltip to show error messages
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+ * @vue-prop {string|undefined} tooltip - Optional tooltip which will be shown on hover when no error message is shown
+ * @vue-prop {Function} itemText - A function that is applied to each item and should return the item's text value.
+ * @vue-prop {boolean} multiple - allows selecting several values instead of just one
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<string | boolean | number | object>;
+        default(rawProps: {
+            multiple?: boolean;
+        }): never[] | null;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    itemText: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}, {
+    forwardSlots: string[];
+    localModelValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<string | number | boolean | object>;
+    additionalItems: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    isMultiple: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    selectFieldRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    errorTooltipRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    getTitle: (item: string | boolean | number | object) => string;
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<string | boolean | number | object>;
+        default(rawProps: {
+            multiple?: boolean;
+        }): never[] | null;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    itemText: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string | number | boolean | object;
+    multiple: boolean;
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    itemText: Function;
+}, {}>;

package/src/components/form-inputs-controls/{VcsSlider.vue → VcsSlider.ts.vue}

@@ -30,8 +30,10 @@
     </template>
   </v-slider>
 </template>
-<script>
-  import { computed, ref } from 'vue';
+
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { VSlider, VTooltip } from 'vuetify/components';
   import { getForwardSlots, usePadding } from '../composables.js';
   import { useFontSize } from '../../vuePlugins/vuetify.js';
@@ -41,7 +43,7 @@
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
    * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
-  export default {
+  export default defineComponent({
     name: 'VcsSlider',
     components: {
       VSlider,
@@ -53,28 +55,20 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
     },
-    setup(props, { attrs, slots }) {
+    setup(_, { attrs, slots }) {
       const fontSize = useFontSize();
-      const thumbSize = computed(() => {
-        return Math.floor((fontSize.value + 3) / 2);
-      });
-      const trackSize = computed(() => {
-        return Math.floor((fontSize.value + 3) / 6);
-      });
-      const tickSize = computed(() => {
-        return trackSize.value * 2;
-      });
+      const thumbSize = computed(() => Math.floor((fontSize.value + 3) / 2));
+      const trackSize = computed(() => Math.floor((fontSize.value + 3) / 6));
+      const tickSize = computed(() => trackSize.value * 2);
       const paddingProvided = usePadding(attrs);
       const forwardSlots = getForwardSlots(slots, ['append']);
       const sliderRef = ref();
       return {
-        hasAppendSlot: computed(() => {
-          return !!slots.append;
-        }),
+        hasAppendSlot: computed(() => !!slots.append),
         forwardSlots,
         sliderRef,
         thumbSize,
@@ -83,8 +77,9 @@
         paddingProvided,
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped>
   .v-input--horizontal :deep(.v-input__control) {
     min-height: calc(var(--v-vcs-font-size) * 2 - 2px);

package/src/components/form-inputs-controls/VcsSlider.ts.vue.d.ts

@@ -0,0 +1,38 @@
+import type { PropType } from 'vue';
+/**
+ * @description stylized wrapper around {@link https://vuetifyjs.com/en/components/sliders/#usage}.
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+ * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}, {
+    hasAppendSlot: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    forwardSlots: string[];
+    sliderRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    thumbSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    tickSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    trackSize: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+}, 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<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+}, {}>;

package/src/components/form-inputs-controls/{VcsTextArea.vue → VcsTextArea.ts.vue}

@@ -3,7 +3,7 @@
     ref="textAreaRef"
     variant="outlined"
     clear-icon="$close"
-    :rows="$attrs.rows"
+    :rows="$attrs.rows as number"
     color="primary"
     class="primary--placeholder vcs-text-area"
     :class="{
@@ -37,8 +37,9 @@
   </v-textarea>
 </template>
 
-<script>
-  import { ref } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { VTextarea, VTooltip } from 'vuetify/components';
   import { getForwardSlots, usePadding } from '../composables.js';
 
@@ -51,7 +52,7 @@
    * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
    * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
    */
-  export default {
+  export default defineComponent({
     name: 'VcsTextArea',
     components: {
       VTooltip,
@@ -63,11 +64,11 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
     },
-    setup(_p, { attrs, slots }) {
+    setup(_, { attrs, slots }) {
       const textAreaRef = ref();
       const errorTooltipRef = ref();
 
@@ -81,7 +82,7 @@
         paddingProvided,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

package/src/components/form-inputs-controls/VcsTextArea.ts.vue.d.ts

@@ -0,0 +1,39 @@
+import type { PropType } from 'vue';
+/**
+ * @description extends API of {@link https://vuetifyjs.com/en/api/v-textarea/|vuetify v-textarea}.
+ * Default for number of rows can be overwritten using the vuetify API.
+ * Provides a tooltip to
+ * - show error messages on focus
+ * - show tooltips, if no error messages are available
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+ * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}, {
+    forwardSlots: string[];
+    textAreaRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    errorTooltipRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+}, 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<{
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+}>>, {
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+}, {}>;

package/src/components/form-inputs-controls/{VcsTextField.vue → VcsTextField.ts.vue}

@@ -13,7 +13,7 @@
       'no-prepended-content': !prependedContent,
     }"
     v-bind="$attrs"
-    :prefix="forcePrefix ? undefined : $attrs.prefix"
+    :prefix="forcePrefix ? undefined : ($attrs.prefix as string)"
     v-model="visibleValue"
     v-model:focused="focused"
   >
@@ -34,14 +34,14 @@
       />
       <slot name="message" v-bind="scope ?? {}"></slot>
     </template>
-    <template #default="scope">
+    <template #default>
       <v-tooltip
         v-if="tooltip && !errorTooltipRef"
         :activator="textFieldRef"
         :location="tooltipPosition"
         :text="$st(tooltip)"
       ></v-tooltip>
-      <slot name="default" v-bind="scope ?? {}"></slot>
+      <slot name="default" v-bind="{}"></slot>
     </template>
     <!-- use slot to show prefix always, independent of modelValue (unlike prefix prop) -->
     <template #prepend-inner="prependInnerScope">
@@ -54,13 +54,14 @@
   </v-text-field>
 </template>
 
-<script>
-  import { computed, ref } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { VTextField, VTooltip } from 'vuetify/components';
   import { getForwardSlots, usePadding } from '../composables.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
 
-  function countDecimalPlaces(value) {
+  function countDecimalPlaces(value: number | string | undefined): number {
     if (value) {
       const str = value.toString();
       const decimalIndex = str.indexOf('.');
@@ -83,7 +84,7 @@
    * @vue-prop {number|undefined}                       [decimals] - An optional number of decimal places the visible value will be rounded to. Does not affect the input value!
    * @vue-prop {boolean}                                [forcePrefix=false] - If set, forces the prefix to be always rendered independent of modelValue by using prepend-inner slot
    */
-  export default {
+  export default defineComponent({
     name: 'VcsTextField',
     components: {
       VTooltip,
@@ -97,7 +98,7 @@
       },
       modelValue: {
         type: [String, Number],
-        default(rawProps) {
+        default(rawProps: { type: string }) {
           if (rawProps.type === 'number') {
             return 0;
           }
@@ -109,7 +110,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
       unit: {
@@ -128,7 +129,7 @@
     setup(props, { attrs, slots }) {
       const textFieldRef = ref();
       const errorTooltipRef = ref();
-      const focused = ref(attrs.autofocus);
+      const focused = ref<boolean>(!!attrs.autofocus);
 
       // local value without emitting new value
       const localValue = useProxiedAtomicModel(props, 'modelValue', () => {});
@@ -141,7 +142,7 @@
             props.decimals &&
             countDecimalPlaces(localValue.value) > props.decimals
           ) {
-            const v = parseFloat(localValue.value);
+            const v = parseFloat(localValue.value as string);
             if (Number.isFinite(v)) {
               return parseFloat(v.toFixed(props.decimals));
             }
@@ -151,20 +152,20 @@
         set(value) {
           // emit is not needed since the vuetify component already emits an @input event. (forwarded listeners)
           if (props.type === 'number') {
-            localValue.value = parseFloat(value);
+            localValue.value = parseFloat(value as string);
           } else {
             localValue.value = value;
           }
         },
       });
 
-      const rules = computed(() => {
+      const rules = computed((): ((v: string) => boolean)[] => {
         if (attrs.type === 'number' && Array.isArray(attrs.rules)) {
           return attrs.rules.map((rule) => {
-            return (value) => rule(parseFloat(value));
+            return (value: string) => rule(parseFloat(value));
           });
         } else {
-          return attrs.rules;
+          return attrs.rules as ((v: string) => boolean)[];
         }
       });
 
@@ -185,8 +186,9 @@
         focused,
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped>
   @use './vcsTextField.scss';
 </style>

package/src/components/form-inputs-controls/VcsTextField.ts.vue.d.ts

@@ -0,0 +1,95 @@
+import type { PropType } from 'vue';
+/**
+ * @description extends API of {@link https://vuetifyjs.com/en/api/v-text-field v-text-field}.
+ * Provides a tooltip to
+ * - show error messages on focus
+ * - show tooltips, if no error messages are available
+ * When clicking esc key, previous input is restored.
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the tooltip.
+ * @vue-prop {string|undefined}                       tooltip - Optional tooltip which will be shown on hover when no error message is shown
+ * @vue-prop {string}                                 unit - Unit for number input fields. Is displayed behind the number.
+ * @vue-prop {number|undefined}                       [decimals] - An optional number of decimal places the visible value will be rounded to. Does not affect the input value!
+ * @vue-prop {boolean}                                [forcePrefix=false] - If set, forces the prefix to be always rendered independent of modelValue by using prepend-inner slot
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default(rawProps: {
+            type: string;
+        }): 0 | "";
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    unit: {
+        type: StringConstructor;
+        default: string;
+    };
+    decimals: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    prependedContent: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{}>;
+    forwardSlots: string[];
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    visibleValue: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<string | number>;
+    rules: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<((v: string) => boolean)[]>;
+    textFieldRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    errorTooltipRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    focused: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+}, 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<{
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default(rawProps: {
+            type: string;
+        }): 0 | "";
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltipPosition: {
+        type: PropType<"bottom" | "left" | "top" | "right">;
+        default: string;
+    };
+    unit: {
+        type: StringConstructor;
+        default: string;
+    };
+    decimals: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    forcePrefix: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    type: string;
+    modelValue: string | number;
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+    unit: string;
+    decimals: number;
+    forcePrefix: boolean;
+}, {}>;

package/src/components/form-inputs-controls/{VcsWizard.vue → VcsWizard.ts.vue}

@@ -9,7 +9,8 @@
   </v-stepper-vertical>
 </template>
 
-<script>
+<script lang="ts">
+  import { defineComponent } from 'vue';
   import { VStepperVertical } from 'vuetify/labs/VStepperVertical';
   import { VIcon } from 'vuetify/components';
   import { getForwardSlots } from '../composables.js';
@@ -18,21 +19,20 @@
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-vertical/ |vuetify stepper vertical}per.
    * @vue-data {slot} [#default] - Slot to add VcsWizardSteps.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsWizard',
     components: {
       VStepperVertical,
       VIcon,
     },
-    setup(_p, { slots }) {
+    setup(_, { slots }) {
       const forwardSlots = getForwardSlots(slots, ['icon']);
 
-      return {
-        forwardSlots,
-      };
+      return { forwardSlots };
     },
-  };
+  });
 </script>
+
 <style scoped lang="scss">
   :deep(.v-expansion-panel-title) {
     height: calc(var(--v-vcs-font-size) * 2 + 6px);

package/src/components/form-inputs-controls/VcsWizard.ts.vue.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-vertical/ |vuetify stepper vertical}per.
+ * @vue-data {slot} [#default] - Slot to add VcsWizardSteps.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {
+    forwardSlots: string[];
+}, {}, {}, {}, 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/components/form-inputs-controls/{VcsWizardStep.vue → VcsWizardStep.ts.vue}

@@ -47,14 +47,16 @@
   </v-stepper-vertical-item>
 </template>
 
-<script>
-  import { computed, reactive, watch } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, reactive, watch } from 'vue';
   import { VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
   import { VSpacer } from 'vuetify/components';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { getForwardSlots } from '../composables.js';
-  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
-  import VcsHelp from '../notification/VcsHelp.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.ts.vue';
+  import VcsHelp from '../notification/VcsHelp.ts.vue';
+  import type { VcsAction } from '../../actions/actionHelper.js';
 
   /**
    * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-stepper-step/ |vuetify VStepperStep} and
@@ -64,7 +66,7 @@
    * @vue-prop {number | string} step - Declares which step of the VcsWizard this VcsWizardStep is.
    * @vue-prop {boolean} [editable=false] - If this step is editable. If so, user can jump to that step by clicking on the v-stepper-step.
    * @vue-prop {boolean} [complete=false] - If this step is completed. Has effect on the look of the v-stepper-step.
-   * @vue-prop {Array} [rules] - Vuetify rules.
+   * @vue-prop {Array<() => boolean>} [rules] - Vuetify rules.
    * @vue-prop {string} [heading] - The heading of this step. Is rendered in the v-stepper-step.
    * @vue-prop {Array<VcsAction>} [headerActions] - Action buttons to be displayed on the right side of the v-stepper-step.
    * @vue-prop {number} [actionButtonListOverflowCount] - Overflow count to use for the headerActions.
@@ -73,7 +75,7 @@
    * @vue-data {slot} [#content] - Slot to add content to the step. Is rendered in v-stepper-content.
    * @vue-data {slot} [#help] - Slot to add html to the help section. Overrides content of helpText prop.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsWizardStep',
     components: {
       VSpacer,
@@ -88,7 +90,7 @@
       },
       modelValue: {
         type: [Array, String, Boolean, Number],
-        default(rawProps) {
+        default(rawProps: { multiple?: boolean }) {
           if (rawProps.multiple) {
             return [];
           }
@@ -108,7 +110,7 @@
         default: false,
       },
       rules: {
-        type: Array,
+        type: Array as PropType<(() => boolean)[]>,
         default: () => [],
       },
       heading: {
@@ -116,7 +118,7 @@
         default: undefined,
       },
       headerActions: {
-        type: Array,
+        type: Array as PropType<VcsAction[]>,
         default: () => [],
       },
       actionButtonListOverflowCount: {
@@ -135,7 +137,7 @@
         () => Number(props.step) === Number(localValue.value),
       );
 
-      const helpAction = reactive({
+      const helpAction = reactive<VcsAction>({
         name: 'help',
         title: 'components.vcsFormSection.help',
         active: true,
@@ -151,16 +153,14 @@
       // deactivate help when leaving a step
       watch(
         () => localValue,
-        (currentStep, previousStep) => {
+        (_, previousStep) => {
           if (Number(previousStep) === Number(props.step)) {
             helpAction.active = false;
           }
         },
       );
-      /**
-       * @type {import("vue").ComputedRef<VcsAction>}
-       */
-      const actions = computed(() => {
+
+      const actions = computed<VcsAction[]>(() => {
         if (props.helpText || (slots.help && slots.help().length > 0)) {
           return [...props.headerActions, helpAction];
         }
@@ -176,6 +176,7 @@
         forwardSlots,
       };
     },
-  };
+  });
 </script>
+
 <style scoped lang="scss"></style>