@vcmap/ui 6.3.10 → 7.0.0-rc.1

package/src/components/style/{VcsVectorStyleComponent.vue → VcsVectorStyleComponent.ts.vue}

@@ -3,43 +3,39 @@
     <component
       v-for="key in styleComponents"
       :key="key"
-      :is="componentMap[key]"
-      :value-default="valueDefault[key]"
-      v-bind="specificProps[key]"
+      :is="componentMap[key as keyof typeof componentMap]"
+      :value-default="valueDefault?.[key as keyof typeof valueDefault]"
+      v-bind="specificProps[key as keyof typeof specificProps]"
       v-model="localValue[key]"
-      @update:model-value="(v) => updateSection(key, v)"
+      @update:model-value="(v: unknown) => $emit(`update:${key}`, v)"
     />
   </v-sheet>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import type { PropType } from 'vue';
   import { VSheet } from 'vuetify/components';
-  import VcsFillMenu from './VcsFillMenu.vue';
-  import VcsImageMenu from './VcsImageMenu.vue';
-  import VcsStrokeMenu from './VcsStrokeMenu.vue';
-  import VcsTextMenu from './VcsTextMenu.vue';
+  import type { VectorStyleItemOptions } from '@vcmap/core';
+  import type { Options as IconOptions } from 'ol/style/Icon.js';
+  import VcsFillMenu from './VcsFillMenu.ts.vue';
+  import VcsImageMenu from './VcsImageMenu.ts.vue';
+  import VcsStrokeMenu from './VcsStrokeMenu.ts.vue';
+  import VcsTextMenu from './VcsTextMenu.ts.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
-  /**
-   * @enum {string}
-   * @property {string} FILL
-   * @property {string} STROKE
-   * @property {string} IMAGE
-   * @property {string} TEXT
-   */
-  export const VectorStyleMenus = {
-    FILL: 'fill',
-    STROKE: 'stroke',
-    IMAGE: 'image',
-    TEXT: 'text',
-  };
+  export enum VectorStyleMenus {
+    FILL = 'fill',
+    STROKE = 'stroke',
+    IMAGE = 'image',
+    TEXT = 'text',
+  }
 
   const componentMap = {
-    fill: 'VcsFillMenu',
-    stroke: 'VcsStrokeMenu',
-    image: 'VcsImageMenu',
-    text: 'VcsTextMenu',
+    [VectorStyleMenus.FILL]: 'VcsFillMenu',
+    [VectorStyleMenus.STROKE]: 'VcsStrokeMenu',
+    [VectorStyleMenus.IMAGE]: 'VcsImageMenu',
+    [VectorStyleMenus.TEXT]: 'VcsTextMenu',
   };
 
   /**
@@ -50,7 +46,7 @@
    * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
    * @vue-prop {Array<import("ol/style/Icon").Options>} [iconOptions] - The icon options in the image component too choose from. Scale and opacity are ignored. The defaults are 3 different icon types with 4 different colors.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsVectorStyleComponent',
     components: {
       VcsFillMenu,
@@ -61,17 +57,17 @@
     },
     props: {
       modelValue: {
-        type: Object,
-        default: undefined,
+        type: Object as PropType<VectorStyleItemOptions>,
+        default: () => ({}),
       },
       valueDefault: {
-        type: Object,
+        type: Object as PropType<VectorStyleItemOptions>,
         default: undefined,
       },
       styleComponents: {
-        type: Array,
+        type: Array as PropType<VectorStyleMenus[]>,
         default: () => Object.values(VectorStyleMenus),
-        validator: (array) =>
+        validator: (array: VectorStyleMenus[]) =>
           array.every((component) =>
             Object.values(VectorStyleMenus).includes(component),
           ),
@@ -81,7 +77,7 @@
         default: false,
       },
       iconOptions: {
-        type: Array,
+        type: Array as PropType<IconOptions[]>,
         default: undefined,
       },
     },
@@ -93,17 +89,7 @@
           iconOptions: props.iconOptions,
         },
       }));
-      return {
-        localValue,
-        specificProps,
-        componentMap,
-        updateSection(key, value) {
-          if (key === 'text') {
-            localValue.value.label = value?.text;
-          }
-          emit(`update:${key}`, value);
-        },
-      };
+      return { localValue, specificProps, componentMap };
     },
-  };
+  });
 </script>

package/src/components/style/VcsVectorStyleComponent.ts.vue.d.ts

@@ -0,0 +1,84 @@
+import type { PropType } from 'vue';
+import type { VectorStyleItemOptions } from '@vcmap/core';
+import type { Options as IconOptions } from 'ol/style/Icon.js';
+export declare enum VectorStyleMenus {
+    FILL = "fill",
+    STROKE = "stroke",
+    IMAGE = "image",
+    TEXT = "text"
+}
+/**
+ * @description Wraps the style component into a single component so whole @vcmap/core/VectorStyleItemOptions can be modelled.
+ * @vue-prop {import("@vcmap/core").VectorStyleItemOptions} [modelValue] - The VectorStyleItemOptions that should be modelled.
+ * @vue-prop {import("@vcmap/core").VectorStyleItemOptions} [valueDefault] - The default VectorStyleItemOptions.
+ * @vue-prop {VectorStyleMenus[]} [styleComponents] - The style component that should be rendered.
+ * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
+ * @vue-prop {Array<import("ol/style/Icon").Options>} [iconOptions] - The icon options in the image component too choose from. Scale and opacity are ignored. The defaults are 3 different icon types with 4 different colors.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<VectorStyleItemOptions>;
+        default: () => {};
+    };
+    valueDefault: {
+        type: PropType<VectorStyleItemOptions>;
+        default: undefined;
+    };
+    styleComponents: {
+        type: PropType<VectorStyleMenus[]>;
+        default: () => VectorStyleMenus[];
+        validator: (array: VectorStyleMenus[]) => boolean;
+    };
+    extendedShapeSettings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconOptions: {
+        type: PropType<IconOptions[]>;
+        default: undefined;
+    };
+}, {
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<VectorStyleItemOptions>;
+    specificProps: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
+        image: {
+            extendedShapeSettings: boolean;
+            iconOptions: IconOptions[] | undefined;
+        };
+    }>;
+    componentMap: {
+        fill: string;
+        stroke: string;
+        image: string;
+        text: string;
+    };
+}, 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<{
+    modelValue: {
+        type: PropType<VectorStyleItemOptions>;
+        default: () => {};
+    };
+    valueDefault: {
+        type: PropType<VectorStyleItemOptions>;
+        default: undefined;
+    };
+    styleComponents: {
+        type: PropType<VectorStyleMenus[]>;
+        default: () => VectorStyleMenus[];
+        validator: (array: VectorStyleMenus[]) => boolean;
+    };
+    extendedShapeSettings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconOptions: {
+        type: PropType<IconOptions[]>;
+        default: undefined;
+    };
+}>>, {
+    modelValue: VectorStyleItemOptions;
+    valueDefault: VectorStyleItemOptions;
+    extendedShapeSettings: boolean;
+    iconOptions: IconOptions[];
+    styleComponents: VectorStyleMenus[];
+}, {}>;

package/src/components/style/composables.d.ts

@@ -1,9 +1,28 @@
+import type { ComputedRef } from 'vue';
+import type { Color } from 'ol/color.js';
+import type { ColorLike, PatternDescriptor } from 'ol/colorlike.js';
+import type { Options as FillOptions } from 'ol/style/Fill.js';
+import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
+/**
+ * A plain JSON representation of an ol/style/Text style as edited by the text
+ * style components. In contrast to ol's `Options`, `fill`/`stroke` are plain
+ * option objects (not runtime instances) and `text` is always a single string.
+ */
+export type TextStyleOptions = {
+    text?: string;
+    font?: string;
+    fill?: FillOptions;
+    stroke?: StrokeOptions;
+    offsetX?: number;
+    offsetY?: number;
+    textBaseline?: string;
+};
 /**
  * Computes a color object from a color array.
- * @param {function():Array<number>} colorGetter Getter that returns an array containing rgba values.
- * @returns {import("vue").ComputedRef<{r: number, g: number, b: number, a: number}>} An object with rgba keys.
+ * @param colorGetter Getter that returns an array containing rgba values.
+ * @returns An object with rgba keys.
  */
-export function useColorObject(colorGetter: () => Array<number>): import("vue").ComputedRef<{
+export declare function useColorObject(colorGetter: () => Color | ColorLike | PatternDescriptor | null | undefined): ComputedRef<{
     r: number;
     g: number;
     b: number;
@@ -11,17 +30,17 @@ export function useColorObject(colorGetter: () => Array<number>): import("vue").
 }>;
 /**
  * Checks if a value is in a value range.
- * @param {number} value Value checked to see if it is in the allowed range.
- * @param {number[]} range Min and max value
- * @returns {boolean} If value is between min and max.
+ * @param value Value checked to see if it is in the allowed range.
+ * @param range Min and max value
+ * @returns If value is between min and max.
  */
-export function between(value: number, range: number[]): boolean;
+export declare function between(value: number, range: [number, number]): boolean;
 /**
  * Creates a string from a color object.
- * @param {{r: number, g: number, b: number, a: number}} rgbaObject An object with rgba keys.
- * @returns {string} A string looking like this: rgba(0,0,0,0).
+ * @param rgbaObject An object with rgba keys.
+ * @returns A string looking like this: rgba(0,0,0,0).
  */
-export function rgbaObjectToString(rgbaObject: {
+export declare function rgbaObjectToString(rgbaObject: {
     r: number;
     g: number;
     b: number;

package/src/components/style/composables.ts

@@ -0,0 +1,87 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+import type { Color } from 'ol/color.js';
+import type { ColorLike, PatternDescriptor } from 'ol/colorlike.js';
+import type { Options as FillOptions } from 'ol/style/Fill.js';
+import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
+
+/**
+ * A plain JSON representation of an ol/style/Text style as edited by the text
+ * style components. In contrast to ol's `Options`, `fill`/`stroke` are plain
+ * option objects (not runtime instances) and `text` is always a single string.
+ */
+export type TextStyleOptions = {
+  text?: string;
+  font?: string;
+  fill?: FillOptions;
+  stroke?: StrokeOptions;
+  offsetX?: number;
+  offsetY?: number;
+  textBaseline?: string;
+};
+
+/**
+ * Computes a color object from a color array.
+ * @param colorGetter Getter that returns an array containing rgba values.
+ * @returns An object with rgba keys.
+ */
+export function useColorObject(
+  colorGetter: () => Color | ColorLike | PatternDescriptor | null | undefined,
+): ComputedRef<{
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}> {
+  return computed(() => {
+    const rgba = colorGetter();
+    if (Array.isArray(rgba)) {
+      return {
+        r: rgba[0],
+        g: rgba[1],
+        b: rgba[2],
+        a: rgba[3],
+      };
+    } else if (
+      rgba &&
+      typeof rgba === 'object' &&
+      'r' in rgba &&
+      'g' in rgba &&
+      'b' in rgba &&
+      'a' in rgba
+    ) {
+      return {
+        r: Number(rgba.r),
+        g: Number(rgba.g),
+        b: Number(rgba.b),
+        a: Number(rgba.a),
+      };
+    } else {
+      return { r: 255, g: 255, b: 255, a: 0 };
+    }
+  });
+}
+
+/**
+ * Checks if a value is in a value range.
+ * @param value Value checked to see if it is in the allowed range.
+ * @param range Min and max value
+ * @returns If value is between min and max.
+ */
+export function between(value: number, range: [number, number]): boolean {
+  return value >= range[0] && value <= range[1];
+}
+
+/**
+ * Creates a string from a color object.
+ * @param rgbaObject An object with rgba keys.
+ * @returns A string looking like this: rgba(0,0,0,0).
+ */
+export function rgbaObjectToString(rgbaObject: {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}): string {
+  return `rgba(${Object.values(rgbaObject).toString()})`;
+}

package/src/components/tables/{VcsDataTable.vue → VcsDataTable.ts.vue}

@@ -20,18 +20,17 @@
       :is="baseComponent"
       :headers="translatedHeaders"
       :items="internalItems"
-      :items-per-page="itemsPerPageRef"
       :items-length="
         baseComponent === 'VDataTableServer' ? serverItemsLength : null
       "
       :search="search"
       :custom-filter="handleFilter"
       :no-data-text="
-        $attrs.noDataText ?? $t('components.vcsDataTable.noDataPlaceholder')
+        $attrs.noDataText ?? $st('components.vcsDataTable.noDataPlaceholder')
       "
       :no-results-text="
         $attrs.noResultsText ??
-        $t('components.vcsDataTable.noResultsPlaceholder')
+        $st('components.vcsDataTable.noResultsPlaceholder')
       "
       :item-selectable="itemSelectable"
       hide-default-footer
@@ -40,7 +39,9 @@
       v-bind="$attrs"
       v-model:page="page"
       v-model:items-per-page="itemsPerPageRef"
-      @update:options="(o) => $emit('update:items', { ...o, search })"
+      @update:options="
+        (o: Record<string, unknown>) => $emit('update:items', { ...o, search })
+      "
     >
       <template v-for="slot of forwardSlots" #[slot]="scope">
         <slot :name="slot" v-bind="scope ?? {}" />
@@ -98,11 +99,11 @@
                 </v-menu>
               </div>
               <span class="mx-2">{{
-                $t('components.vcsDataTable.itemsPerPage')
+                $st('components.vcsDataTable.itemsPerPage')
               }}</span>
               <span class="mx-2">
                 {{ itemsFrom }} - {{ itemsTo }}
-                {{ $t('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
+                {{ $st('components.vcsDataTable.ofItems') }} {{ numberOfItems }}
               </span>
               <VcsButton
                 icon="mdi-chevron-left"
@@ -125,8 +126,16 @@
     </component>
   </div>
 </template>
-<script>
-  import { getCurrentInstance, ref, computed, watch } from 'vue';
+
+<script lang="ts">
+  import {
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    ref,
+    watch,
+  } from 'vue';
+  import type { ComponentInternalInstance, PropType } from 'vue';
   import {
     VDataTable,
     VDataTableServer,
@@ -136,27 +145,25 @@
     VMenu,
     VIcon,
   } from 'vuetify/components';
-  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
-  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import VcsTreeviewSearchbar from '../lists/VcsTreeviewSearchbar.ts.vue';
+  import VcsButton from '../buttons/VcsButton.ts.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.ts.vue';
   import { getForwardSlots } from '../composables.js';
 
-  /**
-   * @typedef {Object} SortKey
-   * @property {string} key - The key to sort by.
-   * @property {boolean | 'asc' | 'desc'} [order] - The order of sorting, can be a boolean or 'asc' or 'desc'.
-   */
+  export type SortKey = {
+    key: string;
+    order?: boolean | 'asc' | 'desc';
+  };
 
-  /**
-   * @typedef {Object} UpdateItemsEvent
-   * @property {number} page
-   * @property {number} itemsPerPage
-   * @property {SortKey[]} sortBy
-   * @property {SortKey[]} groupBy
-   * @property {boolean} multiSort
-   * @property {boolean} mustSort
-   * @property {string} search
-   */
+  export type UpdateItemsEvent = {
+    page: number;
+    itemsPerPage: number;
+    sortBy: SortKey[];
+    groupBy: SortKey[];
+    multiSort: boolean;
+    mustSort: boolean;
+    search: string;
+  };
 
   /**
    * @description A wrapper around {@link https://vuetifyjs.com/en/api/v-data-table/#props v-data-table } with custom pagination
@@ -177,7 +184,7 @@
    * @vue-computed {number} itemsFrom - index of first item shown on current page.
    * @vue-computed {number} itemsTo - index of last item shown on current page.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsDataTable',
     components: {
       VcsCheckbox,
@@ -195,14 +202,21 @@
       baseComponent: {
         type: String,
         default: 'VDataTable',
-        validator: (type) => ['VDataTable', 'VDataTableServer'].includes(type),
+        validator: (type: string) =>
+          ['VDataTable', 'VDataTableServer'].includes(type),
       },
       headers: {
-        type: Array,
+        type: Array as PropType<
+          Array<{
+            title: string;
+            key: string;
+            width?: string;
+          }>
+        >,
         default: () => [],
       },
       items: {
-        type: Array,
+        type: Array as PropType<Array<Record<string, unknown>>>,
         default: () => [],
       },
       serverItemsLength: {
@@ -218,7 +232,7 @@
         default: 10,
       },
       itemsPerPageArray: {
-        type: Array,
+        type: Array as PropType<number[]>,
         default: () => [5, 10, 15],
       },
       showSearchbar: {
@@ -240,26 +254,21 @@
     },
     emits: ['update:items'],
     setup(props, { attrs, emit, slots }) {
-      const vm = getCurrentInstance().proxy;
+      const vm = (getCurrentInstance() as ComponentInternalInstance).proxy;
       const hovering = ref(null);
-      /**
-       * @type {Ref<UnwrapRef<string>>}
-       */
       const search = ref('');
 
-      /**
-       * @param {any} value
-       * @param {string|undefined} filter
-       * @param {Record<string,unknown>} item
-       * @returns {boolean}
-       */
-      const handleFilterInternal = (value, filter, item) => {
+      const handleFilterInternal = (
+        _: unknown,
+        filter: string | undefined,
+        item: Record<string, unknown>,
+      ): boolean => {
         if (filter) {
           const q = filter.toLocaleLowerCase();
           return Object.values(item).some((i) => {
             if (i) {
-              const content = i.toString();
-              const translated = vm.$st(content);
+              const content = (i as string | number).toString();
+              const translated = vm?.$st(content) ?? content;
               return (
                 translated.toLowerCase().includes(q) ||
                 content.toLowerCase().includes(q)
@@ -271,23 +280,22 @@
         return true;
       };
 
-      /**
-       * @param {any} value
-       * @param {string|undefined} filter
-       * @param {TableItem} item
-       * @returns {boolean}
-       */
-      const handleFilter = (value, filter, item) => {
+      const handleFilter = (
+        value: unknown,
+        filter: string | undefined,
+        item: Record<string, unknown>,
+      ): boolean => {
         if (props.customFilter) {
           return props.customFilter(value, filter, item.raw);
         }
-        return handleFilterInternal(value, filter, item.raw);
+        return handleFilterInternal(
+          value,
+          filter,
+          item.raw as Record<string, unknown>,
+        );
       };
 
-      /**
-       * Syncs disabled and isSelectable (or custom item-selectable key) on items
-       * @type {ComputedRef<Array<Object>>}
-       */
+      /** Syncs disabled and isSelectable (or custom item-selectable key) on items */
       const internalItems = computed(() =>
         props.items.map((item) => {
           if (
@@ -305,9 +313,6 @@
         }),
       );
 
-      /**
-       * @type {ComputedRef<Array<Object>>}
-       */
       const filteredItems = computed(() =>
         props.items.filter((item) => {
           if (props.customFilter) {
@@ -324,21 +329,15 @@
       });
       const totalNumber = computed(() => props.items.length);
 
-      /**
-       * @type {ComputedRef<Array<Object>>}
-       */
       const translatedHeaders = computed(() => {
         return props.headers.map((hd) => {
           return {
             ...hd,
-            title: vm.$st(hd.title),
+            title: vm?.$st(hd.title) ?? hd.title,
           };
         });
       });
 
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
       const itemsPerPageRef = ref(props.itemsPerPage);
       const numberOfPages = computed(() => {
         if (props.serverPagesLength > -1) {
@@ -346,9 +345,6 @@
         }
         return Math.ceil(numberOfItems.value / itemsPerPageRef.value);
       });
-      /**
-       * @type {Ref<UnwrapRef<number>>}
-       */
       const page = ref(1);
       const itemsFrom = computed(
         () => (page.value - 1) * itemsPerPageRef.value + 1,
@@ -358,7 +354,7 @@
         return last < numberOfItems.value ? last : numberOfItems.value;
       });
 
-      const updateItemsPerPage = (number) => {
+      const updateItemsPerPage = (number: number): void => {
         itemsPerPageRef.value = number;
       };
 
@@ -376,7 +372,7 @@
         },
       );
 
-      const handleSearch = () => {
+      const handleSearch = (): void => {
         page.value = 1;
         const { sortBy, sortDesc, groupBy, groupDesc, multiSort, mustSort } =
           attrs;
@@ -419,12 +415,12 @@
         numberOfPages,
         numberOfItems,
         totalNumber,
-        nextPage() {
+        nextPage(): void {
           if (page.value + 1 <= numberOfPages.value) {
             page.value += 1;
           }
         },
-        formerPage() {
+        formerPage(): void {
           if (page.value - 1 >= 1) {
             page.value -= 1;
           }
@@ -437,7 +433,7 @@
         forwardSlots,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>