@vcmap/ui 6.3.11 → 7.0.0-rc.1

package/src/components/{composables.js → composables.ts}

@@ -1,15 +1,17 @@
+import type { ComputedRef, Slots, WritableComputedRef } from 'vue';
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 
 /**
  * returns a computed which is true, if the provided attributes contain one or more
  * padding classes
- * @param {Object} attrs all the Attributes of the component
- * @returns {import("vue").ComputedRef<boolean>}
+ * @param attrs all the Attributes of the component
  */
-export function usePadding(attrs) {
+export function usePadding(
+  attrs: Record<string, unknown>,
+): ComputedRef<boolean> {
   return computed(() => {
     if (attrs.class) {
-      const classes = attrs.class.split(' ');
+      const classes = (attrs.class as string).split(' ');
       return classes.some((c) => {
         return /^p[tblrsexyac]-.*/.test(c);
       });
@@ -20,29 +22,31 @@ export function usePadding(attrs) {
 
 /**
  * returns only the slotNames which are not excluded as a computed.
- * @param {import("vue").Slots} slots
- * @param {Array<string>} exclude
- * @returns {Array<string>}
  */
-export function getForwardSlots(slots, exclude = []) {
+export function getForwardSlots(
+  slots: Slots,
+  exclude: string[] = [],
+): string[] {
   return Object.keys(slots).filter((slotName) => !exclude.includes(slotName));
 }
 
-let intersectionObserver = null;
-/** @type {WeakMap<WeakKey<HTMLElement>, import("vue").ComputedRef<boolean>>} */
-const observedTargets = new WeakMap();
+let intersectionObserver: IntersectionObserver | null = null;
+const observedTargets = new WeakMap<
+  HTMLElement,
+  WritableComputedRef<boolean>
+>();
 
 /**
  * if the visibility of the element changes, the computed ref will be set.
- * @param {HTMLElement} elem
- * @param {import("vue").ComputedRef<boolean>} visible
- * @returns {() => void}}
  */
-function registerTargetWithIntersectionObserver(elem, visible) {
+function registerTargetWithIntersectionObserver(
+  elem: HTMLElement,
+  visible: WritableComputedRef<boolean>,
+): () => void {
   if (!intersectionObserver) {
     intersectionObserver = new IntersectionObserver((targets) => {
       targets.forEach((target) => {
-        const visibilityRef = observedTargets.get(target.target);
+        const visibilityRef = observedTargets.get(target.target as HTMLElement);
         if (visibilityRef) {
           visibilityRef.value = target.isIntersecting;
         }
@@ -51,23 +55,27 @@ function registerTargetWithIntersectionObserver(elem, visible) {
   }
   intersectionObserver.observe(elem);
   observedTargets.set(elem, visible);
-  return () => {
-    intersectionObserver.unobserve(elem);
+  return (): void => {
+    intersectionObserver?.unobserve(elem);
     observedTargets.delete(elem);
   };
 }
 
-/**
- * @param {import("vue").ComputedRef<HTMLElement|undefined>} parent
- * @param {import("vue").ComputedRef<string|undefined>} tooltip
- * @param {import("vue").ComputedRef<string|undefined>} title
- * @returns {import("vue").ComputedRef<string>}
- */
-export function createEllipseTooltip(parent, tooltip, title) {
+export function createEllipseTooltip(
+  parent: ComputedRef<HTMLElement | undefined>,
+  tooltip: ComputedRef<string | undefined>,
+  title: ComputedRef<string | undefined>,
+): ComputedRef<string> {
   const offsetWidth = ref(0);
   const scrollWidth = ref(0);
-  const visible = ref(false);
-  let observerListener = () => {};
+  const visibleValue = ref(false);
+  const visible = computed({
+    get: () => visibleValue.value,
+    set: (value) => {
+      visibleValue.value = value;
+    },
+  });
+  let observerListener = (): void => {};
   watch(visible, () => {
     if (visible.value && parent.value) {
       offsetWidth.value = parent.value.offsetWidth;
@@ -100,8 +108,8 @@ export function createEllipseTooltip(parent, tooltip, title) {
   watch(title, async () => {
     if (visible.value) {
       await nextTick(() => {
-        offsetWidth.value = parent.value.offsetWidth;
-        scrollWidth.value = parent.value.scrollWidth;
+        offsetWidth.value = parent.value?.offsetWidth ?? 0;
+        scrollWidth.value = parent.value?.scrollWidth ?? 0;
       });
     }
   });
@@ -125,9 +133,8 @@ let componentIdCounter = 0;
 
 /**
  * Returns a globally unique vcs component id string
- * @returns {string}
  */
-export function useComponentId() {
+export function useComponentId(): string {
   componentIdCounter += 1;
   return `vcs-${componentIdCounter}`;
 }

package/src/components/extent/{VcsExtent.vue → VcsExtent.ts.vue}

@@ -3,7 +3,7 @@
     <v-row no-gutters v-if="modelValue.projection">
       <v-col :cols="firstCols">
         <VcsLabel :html-for="`${cid}-projection`">
-          {{ $t('components.extent.projection') }}
+          {{ $st('components.extent.projection') }}
         </VcsLabel>
       </v-col>
       <v-col>
@@ -20,14 +20,14 @@
       :disabled="disabled"
       :extent="extent"
       :axis-rules="[
-        [(v) => checkInput(v, max[0])],
-        [(v) => checkInput(v, max[1])],
+        [(v: number) => checkInput(v, max[0])],
+        [(v: number) => checkInput(v, max[1])],
       ]"
     >
       <template #prepend>
         <v-col :cols="firstCols">
           <VcsLabel>
-            {{ $t('components.extent.min') }}
+            {{ $st('components.extent.min') }}
           </VcsLabel>
         </v-col>
       </template>
@@ -38,14 +38,14 @@
       :disabled="disabled"
       :extent="extent"
       :axis-rules="[
-        [(v) => checkInput(min[0], v)],
-        [(v) => checkInput(min[1], v)],
+        [(v: number) => checkInput(min[0], v)],
+        [(v: number) => checkInput(min[1], v)],
       ]"
     >
       <template #prepend>
         <v-col :cols="firstCols">
           <VcsLabel>
-            {{ $t('components.extent.max') }}
+            {{ $st('components.extent.max') }}
           </VcsLabel>
         </v-col>
       </template>
@@ -53,17 +53,19 @@
   </v-container>
 </template>
 
-<script>
-  import { computed, toRaw } from 'vue';
+<script lang="ts">
+  import type { PropType, WritableComputedRef } from 'vue';
+  import { computed, toRaw, defineComponent } from 'vue';
   import { VCol, VContainer, VRow } from 'vuetify/components';
+  import type { ExtentOptions } from '@vcmap/core';
   import { Extent, Projection } from '@vcmap/core';
-  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
-  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.ts.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { useComponentId } from '../composables.js';
 
-  function checkInput(min, max) {
+  function checkInput(min: number, max: number): boolean | string {
     return min < max || 'components.extent.invalid';
   }
 
@@ -73,7 +75,7 @@
    * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
    * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsExtent',
     components: {
       VcsCoordinate,
@@ -86,7 +88,7 @@
     inheritAttrs: false,
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<ExtentOptions>,
         default: () => new Extent().toJSON(),
       },
       disabled: {
@@ -110,15 +112,21 @@
         Infinity,
       ];
 
-      const getCoordinate = (start, end = 4) =>
-        computed({
+      const getCoordinate = (
+        start: number,
+        end = 4,
+      ): WritableComputedRef<number[]> =>
+        computed<number[]>({
           get() {
-            return localValue.value.coordinates.slice(start, end);
+            const coordinates = localValue.value.coordinates ?? [0, 0, 0, 0];
+            return coordinates.slice(start, end);
           },
           set(value) {
             const clone = structuredClone(toRaw(localValue.value));
-            clone.coordinates[start] = value[0];
-            clone.coordinates[end - 1] = value[1];
+            const coordinates = [...(clone.coordinates ?? [0, 0, 0, 0])];
+            coordinates[start] = value[0];
+            coordinates[end - 1] = value[1];
+            clone.coordinates = coordinates;
             if (Extent.validateOptions(clone)) {
               localValue.value = clone;
             }
@@ -135,7 +143,7 @@
         cid,
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/extent/VcsExtent.ts.vue.d.ts

@@ -0,0 +1,50 @@
+import type { PropType, WritableComputedRef } from 'vue';
+import type { ExtentOptions } from '@vcmap/core';
+declare function checkInput(min: number, max: number): boolean | string;
+/**
+ * An input for modelling @vcmap/core ExtentOptions
+ * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+ * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
+ * @vue-prop {number} [firstCols=4] - Property to set the column distribution. Default is 4 (one-third/two-third). Use 6 for half-half.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    min: WritableComputedRef<number[]>;
+    max: WritableComputedRef<number[]>;
+    checkInput: typeof checkInput;
+    extent: import("ol/extent.js", { with: { "resolution-mode": "import" } }).Extent;
+    cid: 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<{
+    modelValue: {
+        type: PropType<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: ExtentOptions;
+    firstCols: number;
+}, {}>;

package/src/components/extent/{VcsExtentEditor.vue → VcsExtentEditor.ts.vue}

@@ -13,23 +13,26 @@
   </VcsFormSection>
 </template>
 
-<script>
-  import { computed, inject, onUnmounted } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { computed, defineComponent, inject, onUnmounted } from 'vue';
+  import type { ExtentOptions } from '@vcmap/core';
   import { Extent } from '@vcmap/core';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { setupExtentComponentActions } from '../../actions/extentActions.js';
-  import VcsExtent from './VcsExtent.vue';
-  import VcsFormSection from '../section/VcsFormSection.vue';
+  import VcsExtent from './VcsExtent.ts.vue';
+  import VcsFormSection from '../section/VcsFormSection.ts.vue';
+  import type VcsUiApp from '../../vcsUiApp.js';
 
   /**
    * A VcsFormSection with actions to draw and edit an extent
    * Uses VcsExtent for editing the extent options via input field
    * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
    * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
-   * @vue-prop {string} [heading='component.extent.title] - Header of the form section
+   * @vue-prop {string} [heading='components.extent.title'] - Header of the form section
    * @vue-prop {boolean} [showExtentOnStartup=false] - Whether to activate the extent layer on startup
    */
-  export default {
+  export default defineComponent({
     name: 'VcsExtentEditor',
     components: {
       VcsFormSection,
@@ -38,7 +41,7 @@
     inheritAttrs: false,
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<ExtentOptions>,
         default: () => new Extent().toJSON(),
       },
       disabled: {
@@ -56,7 +59,7 @@
     },
     emits: ['update:modelValue'],
     setup(props, { emit }) {
-      const app = inject('vcsApp');
+      const app = inject('vcsApp') as VcsUiApp;
       const localValue = useProxiedComplexModel(props, 'modelValue', emit);
 
       const extent = computed({
@@ -83,7 +86,7 @@
         actions,
       };
     },
-  };
+  });
 </script>
 
 <style scoped></style>

package/src/components/extent/VcsExtentEditor.ts.vue.d.ts

@@ -0,0 +1,57 @@
+import type { PropType } from 'vue';
+import type { ExtentOptions } from '@vcmap/core';
+/**
+ * A VcsFormSection with actions to draw and edit an extent
+ * Uses VcsExtent for editing the extent options via input field
+ * @vue-prop {import("@vcmap/core").ExtentOptions} [modelValue] - the extent options to be modeled.
+ * @vue-prop {boolean} [disabled=false] - Disable coordinate input.
+ * @vue-prop {string} [heading='components.extent.title'] - Header of the form section
+ * @vue-prop {boolean} [showExtentOnStartup=false] - Whether to activate the extent layer on startup
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+    showExtentOnStartup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<ExtentOptions>;
+    actions: import("../../actions/actionHelper.js", { with: { "resolution-mode": "import" } }).VcsAction[];
+}, 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<{
+    modelValue: {
+        type: PropType<ExtentOptions>;
+        default: () => ExtentOptions;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    heading: {
+        type: StringConstructor;
+        default: string;
+    };
+    showExtentOnStartup: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: ExtentOptions;
+    heading: string;
+    showExtentOnStartup: boolean;
+}, {}>;