@vcmap/ui 6.3.10 → 7.0.0-rc.1

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

@@ -35,11 +35,13 @@
       :activator="checkbox"
       :location="tooltipPosition"
       :text="$st(tooltip)"
-    ></v-tooltip>
+    />
   </v-checkbox>
 </template>
-<script>
-  import { ref } from 'vue';
+
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { VCheckbox, VTooltip } from 'vuetify/components';
   import { getForwardSlots, usePadding } from '../composables.js';
 
@@ -51,7 +53,7 @@
    * @vue-prop {string} [label] - Label to be displayed, will be translated.
    * @vue-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsCheckbox',
     components: {
       VTooltip,
@@ -64,7 +66,7 @@
         default: undefined,
       },
       tooltipPosition: {
-        type: String,
+        type: String as PropType<'bottom' | 'left' | 'top' | 'right'>,
         default: 'right',
       },
       label: {
@@ -72,7 +74,7 @@
         default: undefined,
       },
     },
-    setup(props, { attrs, slots }) {
+    setup(_, { attrs, slots }) {
       const checkbox = ref();
       const errorTooltip = ref();
       const paddingProvided = usePadding(attrs);
@@ -84,8 +86,9 @@
         errorTooltip,
       };
     },
-  };
+  });
 </script>
+
 <style lang="scss" scoped>
   :deep(.v-icon--size-default) {
     font-size: calc(var(--v-vcs-font-size) * (1.2 + 0.1 / 3));

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

@@ -0,0 +1,47 @@
+import type { PropType } from 'vue';
+/**
+ * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-checkbox/ |vuetify checkbox}.
+ * Provides VTooltip to show error messages
+ * @vue-prop {string} [tooltip] - A message to be displayed when there is no error.
+ * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip, see {@link https://vuetifyjs.com/en/api/v-tooltip/#props-location | vuetify tooltip}.
+ * @vue-prop {string} [label] - Label to be displayed, will be translated.
+ * @vue-data {slot} [#label] - slot to pass html for Checkbox label. Overrides label passed as prop.
+ */
+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;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {
+    forwardSlots: string[];
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    checkbox: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+    errorTooltip: import("vue", { with: { "resolution-mode": "import" } }).Ref<any>;
+}, 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;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>>, {
+    label: string;
+    tooltip: string;
+    tooltipPosition: "top" | "bottom" | "left" | "right";
+}, {}>;

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

@@ -6,7 +6,7 @@
     }"
   >
     <VcsButton
-      v-if="hasScrollbar"
+      v-if="hasScrollbar && vcsChipArrayInput"
       icon="mdi-chevron-left"
       @click="vcsChipArrayInput.scrollLeft -= scrollDx"
     />
@@ -78,20 +78,29 @@
       </div>
     </div>
     <VcsButton
-      v-if="hasScrollbar"
+      v-if="hasScrollbar && vcsChipArrayInput"
       icon="mdi-chevron-right"
       @click="vcsChipArrayInput.scrollLeft += scrollDx"
     />
   </div>
 </template>
 
-<script>
-  import { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import {
+    computed,
+    defineComponent,
+    nextTick,
+    onMounted,
+    ref,
+    shallowRef,
+    watch,
+  } from 'vue';
   import { VChip, VIcon } from 'vuetify/components';
   import { v4 as uuid } from 'uuid';
   import { usePadding } from '../composables.js';
-  import VcsButton from '../buttons/VcsButton.vue';
-  import VcsTextField from './VcsTextField.vue';
+  import VcsButton from '../buttons/VcsButton.ts.vue';
+  import VcsTextField from './VcsTextField.ts.vue';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
 
   /**
@@ -106,7 +115,7 @@
    * @vue-prop {boolean}                                [deletableChips=true] - Adds a delete button to elements to remove them from array
    * @vue-prop {number}                                 [inputWidth=75] - Width of the text fields in px.
    */
-  export default {
+  export default defineComponent({
     name: 'VcsChipArrayInput',
     components: {
       VcsButton,
@@ -116,7 +125,7 @@
     },
     props: {
       modelValue: {
-        type: Array,
+        type: Array as PropType<(string | number)[]>,
         default: () => [],
       },
       deletableChips: {
@@ -144,13 +153,13 @@
     setup(props, { attrs, emit }) {
       const selected = ref(-1);
       const adding = ref(false);
-      const editValue = ref(null);
-      const newValue = ref(null);
-      const vcsChipArrayInput = ref();
-      const hasScrollbar = ref();
+      const editValue = ref<string | number | undefined>(undefined);
+      const newValue = ref<string | number | undefined>(undefined);
+      const vcsChipArrayInput = ref<HTMLElement | null>(null);
+      const hasScrollbar = ref(false);
 
-      function updateHasScrollbar() {
-        if (!props.column) {
+      function updateHasScrollbar(): void {
+        if (!props.column && vcsChipArrayInput.value) {
           hasScrollbar.value =
             vcsChipArrayInput.value.scrollWidth -
               vcsChipArrayInput.value.clientWidth >
@@ -158,32 +167,42 @@
         }
       }
 
-      onMounted(() => updateHasScrollbar());
+      onMounted(() => {
+        updateHasScrollbar();
+      });
 
-      function isValid(value) {
+      function isValid(value: string | number): boolean {
         if (attrs.rules) {
-          return !attrs.rules.some((r) => {
-            if (typeof r === 'function') {
-              return r(value) !== true;
-            }
-            return r !== true;
-          });
+          return !(attrs.rules as ((value: string | number) => boolean)[]).some(
+            (r) => {
+              if (typeof r === 'function') {
+                return !r(value);
+              }
+              return r !== true;
+            },
+          );
         }
         return true;
       }
 
-      function parseValue(value) {
-        return attrs.type === 'number' ? parseFloat(value) : value;
+      function parseValue(value: string | number): string | number {
+        return attrs.type === 'number'
+          ? parseFloat(String(value))
+          : String(value);
       }
 
-      function mapModelValue(modelValue) {
+      function mapModelValue(
+        modelValue: (string | number)[],
+      ): { key: string; value: string | number }[] {
         return modelValue.map((value) => ({
           key: uuid(),
           value: parseValue(value),
         }));
       }
 
-      function emitValue(value) {
+      function emitValue(
+        value: { key: string; value: string | number }[],
+      ): void {
         emit(
           'update:modelValue',
           value.map((i) => i.value),
@@ -199,23 +218,23 @@
         },
       );
 
-      function remove(index) {
+      function remove(index: number): void {
         localValue.value.splice(index, 1);
         emitValue(localValue.value);
         updateHasScrollbar();
       }
 
-      function select(index) {
+      function select(index: number): void {
         if (!props.disabled) {
           selected.value = index;
           editValue.value = localValue.value[index].value;
         }
       }
 
-      function submitChange(e) {
+      function submitChange(e: Event): void {
         e.stopPropagation();
         e.preventDefault();
-        const value = parseValue(editValue.value);
+        const value = parseValue(editValue.value as string | number);
         if (!isValid(value)) {
           return;
         }
@@ -224,12 +243,15 @@
         selected.value = -1;
       }
 
-      function cancel() {
-        newValue.value = null;
+      function cancel(): void {
+        newValue.value = undefined;
         adding.value = false;
       }
 
-      async function add(e, v) {
+      async function add(
+        e: Event,
+        v: string | number | undefined,
+      ): Promise<void> {
         e.stopPropagation();
         e.preventDefault();
 
@@ -246,10 +268,12 @@
           await nextTick();
           updateHasScrollbar();
           await nextTick();
-          vcsChipArrayInput.value.scrollLeft =
-            vcsChipArrayInput.value.scrollWidth;
+          if (vcsChipArrayInput.value) {
+            vcsChipArrayInput.value.scrollLeft =
+              vcsChipArrayInput.value.scrollWidth;
+          }
         }
-        newValue.value = null;
+        newValue.value = undefined;
         adding.value = true;
       }
 
@@ -274,7 +298,7 @@
         cancel,
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,93 @@
+import type { PropType } from 'vue';
+/**
+ * @description Renders elements of an array as chips with an input field to edit or add new elements.
+ * Provides a tooltip to show error messages on focus
+ * When clicking esc key, previous input is restored.
+ * @vue-prop {T[]} modelValue
+ * @vue-prop {string}                                 [type] - The input type (string or number)
+ * @vue-prop {boolean}                                [disabled] - Disables adding or removing new elements
+ * @vue-prop {boolean}                                [column] - Remove horizontal pagination and wrap items as needed
+ * @vue-prop {boolean}                                [scrollDx=20] - scroll amount in px
+ * @vue-prop {boolean}                                [deletableChips=true] - Adds a delete button to elements to remove them from array
+ * @vue-prop {number}                                 [inputWidth=75] - Width of the text fields in px.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
+    };
+    deletableChips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    column: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollDx: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).ShallowRef<{
+        key: string;
+        value: string | number;
+    }[]>;
+    noListenerAttrs: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<Record<string, unknown>>;
+    selected: import("vue", { with: { "resolution-mode": "import" } }).Ref<number>;
+    adding: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    editValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<string | number | undefined>;
+    newValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<string | number | undefined>;
+    vcsChipArrayInput: import("vue", { with: { "resolution-mode": "import" } }).Ref<HTMLElement | null>;
+    hasScrollbar: import("vue", { with: { "resolution-mode": "import" } }).Ref<boolean>;
+    remove: (index: number) => void;
+    select: (index: number) => void;
+    submitChange: (e: Event) => void;
+    add: (e: Event, v: string | number | undefined) => Promise<void>;
+    cancel: () => void;
+}, 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<(string | number)[]>;
+        default: () => never[];
+    };
+    deletableChips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    column: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollDx: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: (string | number)[];
+    deletableChips: boolean;
+    inputWidth: number;
+    column: boolean;
+    scrollDx: number;
+}, {}>;

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

@@ -3,9 +3,7 @@
     no-gutters
     v-if="localValue"
     class="vcs-coordinate"
-    :class="{
-      'py-1': !paddingProvided,
-    }"
+    :class="{ 'py-1': !paddingProvided }"
   >
     <slot name="prepend" v-bind="{ ...$props }" />
     <template v-for="(_, idx) in localValue">
@@ -32,22 +30,22 @@
   </v-row>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import type { Extent } from 'ol/extent.js';
+  import type { Coordinate } from 'ol/coordinate.js';
+  import type { PropType } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { VRow, VCol } from 'vuetify/components';
-  import VcsTextField from './VcsTextField.vue';
+  import VcsTextField from './VcsTextField.ts.vue';
   import { between } from '../style/composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { removeListenersFromAttrs } from '../attrsHelpers.js';
   import { usePadding } from '../composables.js';
 
-  /**
-   *
-   * @param {number} idx
-   * @param {import("ol/extent").Extent} extent
-   * @returns {undefined|number[]}
-   */
-  function getRangeFromExtent(idx, extent) {
+  function getRangeFromExtent(
+    idx: number,
+    extent: Extent,
+  ): undefined | [number, number] {
     if (idx === 0) {
       return [extent[0], extent[2]];
     } else if (idx === 1) {
@@ -56,12 +54,10 @@
     return undefined;
   }
 
-  /**
-   * @param {number} number
-   * @param {number[]} range
-   * @returns {boolean|string}
-   */
-  function isInRange(number, range) {
+  function isInRange(
+    number: number,
+    range: [number, number],
+  ): boolean | string {
     return between(number, range) || 'components.coordinate.outOfRange';
   }
 
@@ -79,7 +75,7 @@
    * @vue-data {slot}  [#prepend] - A slot to prepend column(s) in row
    * @vue-data {slot}  [#append] - A slot to append column(s) in row
    */
-  export default {
+  export default defineComponent({
     name: 'VcsCoordinate',
     components: {
       VRow,
@@ -89,7 +85,7 @@
     inheritAttrs: false,
     props: {
       modelValue: {
-        type: Array,
+        type: Array as PropType<Coordinate>,
         default: () => [0, 0, 0],
       },
       hideZ: {
@@ -97,27 +93,27 @@
         default: false,
       },
       prefixes: {
-        type: Array,
+        type: Array as PropType<string[]>,
         default: () => ['X', 'Y', 'Z'],
       },
       units: {
-        type: Array,
+        type: Array as PropType<string[]>,
         default: () => ['°', '°', 'm'],
       },
       decimals: {
-        type: Array,
+        type: Array as PropType<number[]>,
         default: () => [8, 8, 2],
       },
       steps: {
-        type: Array,
+        type: Array as PropType<number[]>,
         default: () => [0.00001, 0.00001, 1],
       },
       extent: {
-        type: Array,
+        type: Array as PropType<number[]>,
         default: () => [-180, -90, 180, 90],
       },
       axisRules: {
-        type: Array,
+        type: Array as PropType<Array<(v: number) => boolean | string>[]>,
         default: () => [[], [], []],
       },
     },
@@ -132,11 +128,11 @@
         localValue,
         noListenerAttrs,
         getRangeFromExtent,
-        getRulesForAxis(idx) {
+        getRulesForAxis(idx: number): Array<(v: number) => boolean | string> {
           const rules = [];
           const range = getRangeFromExtent(idx, props.extent);
           if (range) {
-            rules.push((v) => isInRange(v, range));
+            rules.push((v: number) => isInRange(v, range));
           }
           if (Array.isArray(props.axisRules[idx])) {
             rules.push(...props.axisRules[idx]);
@@ -148,7 +144,7 @@
         },
       };
     },
-  };
+  });
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -0,0 +1,104 @@
+import type { Extent } from 'ol/extent.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { PropType } from 'vue';
+declare function getRangeFromExtent(idx: number, extent: Extent): undefined | [number, number];
+/**
+ * @description An input for a coordinate providing a VcsTextField for each dimension.
+ * All attrs and listeners are forwarded to the input fields.
+ * @vue-prop {import("ol").Coordinate}  modelValue - A coordinate, with x, y and optionally z value.
+ * @vue-prop {boolean}  [hideZ=false] - Hide z input field.
+ * @vue-prop {Array<string>}  [prefixes=['X','Y','Z']] - An optional array of length three, with prefixes for each input
+ * @vue-prop {Array<string>}  [units=['°','°','m']] - An optional array of length three, with units for each input
+ * @vue-prop {Array<number>}  [decimals=[8,8,2]] - An optional array of length three, with number of decimal places for each input
+ * @vue-prop {Array<number>}  [steps=[0.00001,0.00001,1]] - An optional array of length three, with step for each input. Default steps are for WGS84 coordinates.
+ * @vue-prop {import("ol/extent").Extent}  [extent=[-180,-90,180,90]] - An optional extent as range for x and y inputs. Default is WGS84 extent.
+ * @vue-prop {Array<Array<()=>boolean|string)>>}  [axisRules] - An optional array of length three, with additional rules for corresponding input
+ * @vue-data {slot}  [#prepend] - A slot to prepend column(s) in row
+ * @vue-data {slot}  [#append] - A slot to append column(s) in row
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<Coordinate>;
+        default: () => number[];
+    };
+    hideZ: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixes: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    units: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    decimals: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    steps: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    extent: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    axisRules: {
+        type: PropType<Array<(v: number) => boolean | string>[]>;
+        default: () => never[][];
+    };
+}, {
+    paddingProvided: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<boolean>;
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<Coordinate>;
+    noListenerAttrs: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<Record<string, unknown>>;
+    getRangeFromExtent: typeof getRangeFromExtent;
+    getRulesForAxis(idx: number): Array<(v: number) => boolean | 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<Coordinate>;
+        default: () => number[];
+    };
+    hideZ: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prefixes: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    units: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    decimals: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    steps: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    extent: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    axisRules: {
+        type: PropType<Array<(v: number) => boolean | string>[]>;
+        default: () => never[][];
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: Coordinate;
+    decimals: number[];
+    hideZ: boolean;
+    prefixes: string[];
+    units: string[];
+    steps: number[];
+    extent: number[];
+    axisRules: ((v: number) => boolean | string)[][];
+}, {}>;