@vcmap/ui 5.0.1 → 5.1.0-rc.1

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

@@ -0,0 +1,23 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}, {
+    rgbaObject: import("vue").ComputedRef<{
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    }>;
+    width: import("vue").WritableComputedRef<any>;
+    updateColor(rgba: any): void;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}>>, {
+    value: Record<string, any>;
+}>;
+export default _default;

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

@@ -0,0 +1,52 @@
+export namespace fallbackStyle {
+    let font: string;
+    namespace fill {
+        let color: number[];
+    }
+    namespace stroke {
+        let color_1: number[];
+        export { color_1 as color };
+        export let width: number;
+    }
+    let offsetX: number;
+    let offsetY: number;
+}
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}, {
+    strokeColor: import("vue").ComputedRef<string>;
+    fillColor: import("vue").ComputedRef<string>;
+    fontStyle: import("vue").ComputedRef<any>;
+    fallbackStyle: {
+        font: string;
+        fill: {
+            color: number[];
+        };
+        stroke: {
+            color: number[];
+            width: number;
+        };
+        offsetX: number;
+        offsetY: number;
+    };
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}>>, {
+    value: Record<string, any>;
+    valueDefault: Record<string, any>;
+}>;
+export default _default;

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

@@ -0,0 +1,58 @@
+export const fonts: {
+    Georgia: string;
+    Palatino: string;
+    'Times New Roman': string;
+    Arial: string;
+    Impact: string;
+    'Comic Sans': string;
+    Trebuchet: string;
+    Verdana: string;
+    Courier: string;
+    Lucida: string;
+};
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}, {
+    fonts: {
+        Georgia: string;
+        Palatino: string;
+        'Times New Roman': string;
+        Arial: string;
+        Impact: string;
+        'Comic Sans': string;
+        Trebuchet: string;
+        Verdana: string;
+        Courier: string;
+        Lucida: string;
+    };
+    font: import("vue").ComputedRef<any>;
+    fontFamily: import("vue").WritableComputedRef<any>;
+    fontSize: import("vue").WritableComputedRef<number>;
+    selectedFill: import("vue").WritableComputedRef<any>;
+    selectedStroke: import("vue").WritableComputedRef<any>;
+    emitNewFont: (key: any, value: any) => void;
+    isBold: import("vue").WritableComputedRef<boolean>;
+    isItalic: import("vue").WritableComputedRef<boolean>;
+    selectedOffsetX: import("vue").WritableComputedRef<any>;
+    selectedOffsetY: import("vue").WritableComputedRef<any>;
+    selectedText: import("vue").WritableComputedRef<any>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>>, {
+    value: Record<string, any>;
+}>;
+export default _default;

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

@@ -0,0 +1,76 @@
+/**
+ * *
+ */
+export type VectorStyleMenus = string;
+export namespace VectorStyleMenus {
+    let FILL: string;
+    let STROKE: string;
+    let IMAGE: string;
+    let TEXT: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    styleComponents: {
+        type: ArrayConstructor;
+        default: () => string[];
+        validator: (array: unknown) => any;
+    };
+    extendedShapeSettings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconOptions: {
+        type: ArrayConstructor;
+        default: undefined;
+    };
+}, {
+    selectedKeys: import("vue").ComputedRef<any>;
+    specificProps: import("vue").ComputedRef<{
+        [x: string]: {
+            extendedShapeSettings: any;
+            iconOptions: any;
+        };
+    }>;
+    componentMap: {
+        fill: string;
+        stroke: string;
+        image: string;
+        text: string;
+    };
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    valueDefault: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    styleComponents: {
+        type: ArrayConstructor;
+        default: () => string[];
+        validator: (array: unknown) => any;
+    };
+    extendedShapeSettings: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconOptions: {
+        type: ArrayConstructor;
+        default: undefined;
+    };
+}>>, {
+    value: Record<string, any>;
+    valueDefault: Record<string, any>;
+    extendedShapeSettings: boolean;
+    iconOptions: unknown[];
+    styleComponents: unknown[];
+}>;
+export default _default;

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

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+export function useColorObject(colorGetter: () => Array<number>): import("vue").ComputedRef<{
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}>;
+/**
+ * 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.
+ */
+export function between(value: number, range: number[]): boolean;
+/**
+ * Creates a computed property with a getter and a setter for a specific object property/key of the value prop. If the value prop is an object, this composable allows to pass this computed to an v-model of a sub component. The getter returns the value of the key or, if it is undefined, a default value. The setter merges the passed value with the other object properties of the value prop and emits the whole object as a input event.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be return on get and updated on set.
+ * @param {U} defaultValue Default value for the key of the modelObject.
+ * @param {function(string, ...unknown[]):void} emit The emit function of the component context that is using this composable.
+ * @param {Array<number>} [range] The allowed range of numbers.
+ * @param {boolean} [isRequired] If value is required.
+ * @returns {import("vue").WritableComputedRef<T[K]>} The value to the key param if the getter is called.
+ * @template {Object} T
+ * @template {string} K
+ * @template U
+ */
+export function useSelectedKey<T extends Object, K extends string, U>(modelObject: () => T, key: K, defaultValue: U, emit: (arg0: string, ...args: unknown[][]) => void, range?: number[] | undefined, isRequired?: boolean | undefined): import("vue").WritableComputedRef<T[K]>;
+/**
+ * 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).
+ */
+export function rgbaObjectToString(rgbaObject: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}): string;

package/src/components/style/composables.js

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 /**
  * Computes a color object from a color array.
  * @param {function():Array<number>} colorGetter Getter that returns an array containing rgba values.
- * @returns {{r: number, g: number, b: number, a: number}} An object with rgba keys.
+ * @returns {import("vue").ComputedRef<{r: number, g: number, b: number, a: number}>} An object with rgba keys.
  */
 export function useColorObject(colorGetter) {
   return computed(() => {
@@ -33,13 +33,16 @@ export function between(value, range) {
 
 /**
  * Creates a computed property with a getter and a setter for a specific object property/key of the value prop. If the value prop is an object, this composable allows to pass this computed to an v-model of a sub component. The getter returns the value of the key or, if it is undefined, a default value. The setter merges the passed value with the other object properties of the value prop and emits the whole object as a input event.
- * @param {function():Object} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {string} key The key of the modelObject that should be return on get and updated on set.
- * @param {*} defaultValue Default value for the key of the modelObject.
- * @param {function(event: string, ...args: any[]):void} emit The emit function of the component context that is using this composable.
+ * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
+ * @param {K} key The key of the modelObject that should be return on get and updated on set.
+ * @param {U} defaultValue Default value for the key of the modelObject.
+ * @param {function(string, ...unknown[]):void} emit The emit function of the component context that is using this composable.
  * @param {Array<number>} [range] The allowed range of numbers.
- * @param {Array<number>} [isRequired] If value is required.
- * @returns {*} The value to the key param if the getter is called.
+ * @param {boolean} [isRequired] If value is required.
+ * @returns {import("vue").WritableComputedRef<T[K]>} The value to the key param if the getter is called.
+ * @template {Object} T
+ * @template {string} K
+ * @template U
  */
 export function useSelectedKey(
   modelObject,
@@ -66,7 +69,7 @@ export function useSelectedKey(
       ) {
         return;
       }
-      const newModelObject = JSON.parse(JSON.stringify(modelObject()));
+      const newModelObject = structuredClone(modelObject());
       // is needed to get e.g. from square shape to x by setting radius2 from 0 to undefined
       const newValue = value === '' ? undefined : value;
       emit('input', Object.assign(newModelObject, { [key]: newValue }));

package/src/components/tables/VcsDataTable.vue

@@ -142,7 +142,7 @@
   </v-card>
 </template>
 <script>
-  import { getCurrentInstance, ref, computed } from 'vue';
+  import { getCurrentInstance, ref, computed, watch } from 'vue';
   import {
     VCard,
     VDivider,
@@ -331,8 +331,10 @@
        */
       const translatedHeaders = computed(() => {
         return props.headers.map((hd) => {
-          hd.text = vm.$t(hd.text);
-          return hd;
+          return {
+            ...hd,
+            text: vm.$t(hd.text),
+          };
         });
       });
 
@@ -357,6 +359,12 @@
         const last = page.value * itemsPerPageRef.value;
         return last < numberOfItems.value ? last : numberOfItems.value;
       });
+      watch(
+        () => props.items,
+        () => {
+          page.value = 1;
+        },
+      );
 
       const handleSearch = () => {
         page.value = 1;

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

@@ -0,0 +1,142 @@
+declare const _default: import("vue").DefineComponent<{
+    headers: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    itemKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    serverItemsLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    serverPagesLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPageArray: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    showSearchbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectableKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {
+    hovering: import("vue").Ref<null>;
+    search: Ref<UnwrapRef<string>>;
+    page: Ref<UnwrapRef<number>>;
+    internalItems: ComputedRef<Object[]>;
+    filteredItems: ComputedRef<Object[]>;
+    itemsPerPageRef: Ref<UnwrapRef<number>>;
+    itemsFrom: import("vue").ComputedRef<number>;
+    itemsTo: import("vue").ComputedRef<any>;
+    numberOfPages: import("vue").ComputedRef<any>;
+    numberOfItems: import("vue").ComputedRef<any>;
+    totalNumber: import("vue").ComputedRef<any>;
+    nextPage(): void;
+    formerPage(): void;
+    updateItemsPerPage(number: any): void;
+    handleFilter: (value: any, filter: string | undefined, item: TableItem) => boolean;
+    handleSearch: () => void;
+    translatedHeaders: ComputedRef<Object[]>;
+    showFooter: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    headers: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    itemKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    serverItemsLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    serverPagesLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPage: {
+        type: NumberConstructor;
+        default: number;
+    };
+    itemsPerPageArray: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    showSearchbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbarPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectableKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>>, {
+    value: unknown[];
+    headers: unknown[];
+    showSearchbar: boolean;
+    searchbarPlaceholder: string;
+    items: unknown[];
+    singleSelect: boolean;
+    serverItemsLength: number;
+    serverPagesLength: number;
+    itemsPerPage: number;
+    itemsPerPageArray: unknown[];
+    selectableKey: string;
+}>;
+export default _default;
+export type UpdateItemsEvent = {
+    page: number;
+    itemsPerPage: number;
+    sortBy: string[];
+    sortDesc: boolean[];
+    groupBy: string[];
+    groupDesc: boolean[];
+    multiSort: boolean;
+    mustSort: boolean;
+    search: string;
+};

package/src/components/tables/VcsTable.vue

@@ -20,14 +20,16 @@
         class="vcs-table px-2 overflow-max-width rounded-0 noBorder"
         :style="{ 'max-width': headers[1].width }"
       >
-        <span
+        <component
+          :is="getTag(tags, item.key)"
+          v-bind="getTagOptions(tags, item.key)"
           :class="{
             'single-line': !/\s/.test(item.value),
             'multi-line': /\s/.test(item.value),
           }"
         >
           {{ $t(item.value) }}
-        </span>
+        </component>
       </td>
     </template>
   </VcsDataTable>
@@ -68,10 +70,71 @@
     return items;
   }
 
+  /**
+   * Defines which HTML tags can be used within the VcsTable value column and provides default options
+   * @type {Object<string,Object<string,*>>}
+   */
+  export const defaultTagOptions = {
+    a: {
+      href: undefined,
+      target: '_blank',
+    },
+    audio: {
+      controls: '',
+      src: undefined,
+    },
+    b: {},
+    i: {},
+    iframe: {
+      src: undefined,
+      width: undefined,
+      height: undefined,
+    },
+    img: {
+      src: undefined,
+      width: undefined,
+    },
+    meter: {
+      value: undefined,
+    },
+    progress: {
+      value: undefined,
+    },
+    s: {},
+    strong: {},
+    video: {
+      controls: '',
+      src: undefined,
+      width: 175,
+    },
+  };
+
+  /**
+   * @param {import("../../featureInfo/abstractFeatureInfoView.js").HTMLTagOptions} tags
+   * @param {string} key
+   * @returns {string}
+   */
+  export function getTag(tags, key) {
+    return tags?.[key]?.tag ?? 'div';
+  }
+
+  /**
+   * @param {Object} tags
+   * @param {string} key
+   * @returns {import("../../featureInfo/abstractFeatureInfoView.js").HTMLTagOptions|Record<never, never>}
+   */
+  export function getTagOptions(tags, key) {
+    if (tags?.[key]) {
+      return { ...defaultTagOptions[tags[key].tag], ...tags[key] };
+    }
+    return {};
+  }
+
   /**
    * @description A table view for feature attributes using VcsDataTable
    * @vue-prop {string} featureId - feature's id
    * @vue-prop {Object} attributes - feature's attributes
+   * @vue-prop {Object} tags - Allows to render the value column for specific attribute keys with special html elements. See 'defaultTagOptions' for supported html tags.
    * @vue-prop {Array<{text: string, value: string}>} [headers] - optional array defining column names
    * @vue-computed {Array<TableItem>} items - from attributes derived table items
    */
@@ -89,6 +152,10 @@
         type: Object,
         required: true,
       },
+      tags: {
+        type: Object,
+        default: undefined,
+      },
       headers: {
         type: Array,
         default: () => [
@@ -110,6 +177,8 @@
 
       return {
         items,
+        getTag,
+        getTagOptions,
       };
     },
   };

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

@@ -0,0 +1,88 @@
+/**
+ * @typedef {Object} TableItem
+ * @property {string} key
+ * @property {string} value
+ */
+/**
+ * @param {Object} attributes
+ * @param {Array<TableItem>} [items]
+ * @param {string} [parent]
+ * @returns {Array<TableItem>}
+ */
+export function attributesToItems(attributes: Object, items?: TableItem[] | undefined, parent?: string | undefined): Array<TableItem>;
+/**
+ * @param {import("../../featureInfo/abstractFeatureInfoView.js").HTMLTagOptions} tags
+ * @param {string} key
+ * @returns {string}
+ */
+export function getTag(tags: import("../../featureInfo/abstractFeatureInfoView.js").HTMLTagOptions, key: string): string;
+/**
+ * @param {Object} tags
+ * @param {string} key
+ * @returns {import("../../featureInfo/abstractFeatureInfoView.js").HTMLTagOptions|Record<never, never>}
+ */
+export function getTagOptions(tags: Object, key: string): import("../../featureInfo/abstractFeatureInfoView.js").HTMLTagOptions | Record<never, never>;
+/**
+ * Defines which HTML tags can be used within the VcsTable value column and provides default options
+ * @type {Object<string,Object<string,*>>}
+ */
+export const defaultTagOptions: {
+    [x: string]: {
+        [x: string]: any;
+    };
+};
+declare const _default: import("vue").DefineComponent<{
+    featureId: {
+        type: StringConstructor;
+        required: true;
+    };
+    attributes: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    tags: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    headers: {
+        type: ArrayConstructor;
+        default: () => {
+            text: string;
+            value: string;
+            width: string;
+        }[];
+    };
+}, {
+    items: ComputedRef<TableItem[]>;
+    getTag: typeof getTag;
+    getTagOptions: typeof getTagOptions;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    featureId: {
+        type: StringConstructor;
+        required: true;
+    };
+    attributes: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    tags: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    headers: {
+        type: ArrayConstructor;
+        default: () => {
+            text: string;
+            value: string;
+            width: string;
+        }[];
+    };
+}>>, {
+    headers: unknown[];
+    tags: Record<string, any>;
+}>;
+export default _default;
+export type TableItem = {
+    key: string;
+    value: string;
+};