@vcmap/ui 6.3.11 → 7.0.0-rc.1

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>

package/src/components/tables/VcsDataTable.ts.vue.d.ts

@@ -0,0 +1,178 @@
+import type { PropType } from 'vue';
+export type SortKey = {
+    key: string;
+    order?: boolean | 'asc' | 'desc';
+};
+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
+ * Passes all slots to v-data-table and 'prepend', 'default' and 'append' slots to VcsSearchbar
+ * @vue-prop {Array<Object>} items - array of items, where each item must provide a unique key
+ * @vue-prop {number} serverItemsLength - number of total items on a backend. Used for server-side pagination.
+ * @vue-prop {number} serverPagesLength - number of total pages on a backend. Used for server-side pagination.
+ * @vue-prop {Array<{title: string, value: string}>} [headers] - optional array defining column names. Text will be translated
+ * @vue-prop {boolean} [showSearchbar=true] - whether to show searchbar
+ * @vue-prop {string} [searchbarPlaceholder] - placeholder for searchbar
+ * @vue-prop {string} [itemSelectable='isSelectable'] - The property on each item that is used to determine if it is selectable or not. Non-selectable items are automatically disabled.
+ * @vue-prop {function(any, string|undefined, TableItem):boolean} [customFilter] - a function to customize filtering when searching. The first parameter represents the item values, with the function called for each of them. The second is the search term. The third is the complete item.
+ * @vue-event {UpdateItemsEvent} update:items - Emits when one of the options properties is updated or on search input. Can be used to update items via API call to a server.
+ * @vue-computed {Array<TableItem>} filteredItems - array of items with search filter applied on. If search string is empty, same as items array.
+ * @vue-computed {Array<import("vuetify").DataTableHeader>} translatedHeaders - array of translated header items.
+ * @vue-computed {number} numberOfItems - number of filtered items (depending on search).
+ * @vue-computed {number} numberOfPages - number of pages depending on number of items, search and itemsPerPage.
+ * @vue-computed {number} itemsFrom - index of first item shown on current page.
+ * @vue-computed {number} itemsTo - index of last item shown on current page.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    baseComponent: {
+        type: StringConstructor;
+        default: string;
+        validator: (type: string) => boolean;
+    };
+    headers: {
+        type: PropType<Array<{
+            title: string;
+            key: string;
+            width?: string;
+        }>>;
+        default: () => never[];
+    };
+    items: {
+        type: PropType<Array<Record<string, unknown>>>;
+        default: () => never[];
+    };
+    serverItemsLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    serverPagesLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPageArray: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    showSearchbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemSelectable: {
+        type: StringConstructor;
+        default: string;
+    };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}, {
+    hovering: import("vue", { with: { "resolution-mode": "import" } }).Ref<null>;
+    search: import("vue", { with: { "resolution-mode": "import" } }).Ref<string>;
+    page: import("vue", { with: { "resolution-mode": "import" } }).Ref<number>;
+    internalItems: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<Record<string, unknown>[]>;
+    filteredItems: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<Record<string, unknown>[]>;
+    itemsPerPageRef: import("vue", { with: { "resolution-mode": "import" } }).Ref<number>;
+    itemsFrom: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    itemsTo: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    numberOfPages: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    numberOfItems: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    totalNumber: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<number>;
+    nextPage(): void;
+    formerPage(): void;
+    updateItemsPerPage: (number: number) => void;
+    handleFilter: (value: unknown, filter: string | undefined, item: Record<string, unknown>) => boolean;
+    handleSearch: () => void;
+    translatedHeaders: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
+        title: string;
+        key: string;
+        width?: string;
+    }[]>;
+    showFooter: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    forwardSlots: string[];
+}, unknown, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, "update:items"[], "update:items", import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<import("vue", { with: { "resolution-mode": "import" } }).ExtractPropTypes<{
+    baseComponent: {
+        type: StringConstructor;
+        default: string;
+        validator: (type: string) => boolean;
+    };
+    headers: {
+        type: PropType<Array<{
+            title: string;
+            key: string;
+            width?: string;
+        }>>;
+        default: () => never[];
+    };
+    items: {
+        type: PropType<Array<Record<string, unknown>>>;
+        default: () => never[];
+    };
+    serverItemsLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    serverPagesLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPageArray: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    showSearchbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    itemSelectable: {
+        type: StringConstructor;
+        default: string;
+    };
+    customFilter: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>> & {
+    "onUpdate:items"?: ((...args: any[]) => any) | undefined;
+}, {
+    items: Record<string, unknown>[];
+    customFilter: Function;
+    showSearchbar: boolean;
+    searchbarPlaceholder: string;
+    headers: {
+        title: string;
+        key: string;
+        width?: string;
+    }[];
+    itemSelectable: string;
+    itemsPerPage: number;
+    baseComponent: string;
+    serverItemsLength: number;
+    serverPagesLength: number;
+    itemsPerPageArray: number[];
+}, {}>;