@vcmap/ui 6.3.10 → 7.0.0-rc.1

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

@@ -21,12 +21,14 @@
   </StyleMenuWrapper>
 </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 type { Options as StrokeOptions } from 'ol/style/Stroke.js';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import VcsStrokeSelector from './VcsStrokeSelector.vue';
-  import StyleMenuWrapper from './StyleMenuWrapper.vue';
+  import VcsStrokeSelector from './VcsStrokeSelector.ts.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.ts.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
 
   /**
@@ -35,7 +37,7 @@
    * If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [0, 0, 0, 1], width: 1 } is emitted.
    * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsStrokeMenu',
     components: {
       VSheet,
@@ -44,7 +46,7 @@
     },
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<StrokeOptions>,
         default: undefined,
       },
     },
@@ -55,7 +57,7 @@
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };
     },
-  };
+  });
 </script>
 
 <style scoped>

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

@@ -0,0 +1,25 @@
+import type { PropType } from 'vue';
+import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
+/**
+ * @description A wrapper for the VcsStrokeSelector, that has a small color preview and a menu that pops up when clicking the preview, containing the stroke selector.
+ * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted.
+ * If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [0, 0, 0, 1], width: 1 } is emitted.
+ * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<StrokeOptions>;
+        default: undefined;
+    };
+}, {
+    rgbaString: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<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<StrokeOptions>;
+        default: undefined;
+    };
+}>>, {
+    modelValue: StrokeOptions;
+}, {}>;

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

@@ -4,14 +4,14 @@
       <v-row no-gutters>
         <v-col>
           <VcsLabel :html-for="`${cid}-draw-stroke-width`">
-            {{ $t('components.style.lineWidth') }}
+            {{ $st('components.style.lineWidth') }}
           </VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
             :id="`${cid}-draw-stroke-width`"
             v-model.number="width"
-            :hide-spin-buttons="true"
+            hide-spin-buttons
             type="number"
             unit="px"
             :disabled="!modelValue"
@@ -29,8 +29,10 @@
   </v-sheet>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import type { PropType } from 'vue';
+  import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
   import {
     VSheet,
     VColorPicker,
@@ -39,8 +41,8 @@
     VCol,
   } from 'vuetify/components';
   import { useComponentId } from '../composables.js';
-  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
   import { useColorObject } from './composables.js';
   import { useProxiedComplexModel } from '../modelHelper.js';
 
@@ -48,7 +50,7 @@
    * @description Allows to model a JSON representation of ol/Stroke vector style with a vuetify VColorPicker.
    * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsStrokeSelector',
     components: {
       VSheet,
@@ -61,8 +63,8 @@
     },
     props: {
       modelValue: {
-        type: Object,
-        default: undefined,
+        type: Object as PropType<StrokeOptions>,
+        default: () => ({}),
       },
     },
     setup(props, { emit }) {
@@ -71,21 +73,24 @@
       return {
         rgbaObject: useColorObject(() => localValue.value?.color),
         width: computed({
-          get() {
-            return localValue.value?.width;
-          },
+          get: () => localValue.value?.width,
           set(value) {
-            if (value > 0 && value !== localValue.value?.width) {
+            if (!!value && value > 0 && value !== localValue.value?.width) {
               localValue.value.width = value;
             }
           },
         }),
-        updateColor(rgba) {
+        updateColor(rgba: {
+          r: number;
+          g: number;
+          b: number;
+          a?: number;
+        }): void {
           // Ensures alpha is not null, e.g. when the color is set by the user by pastying a color code.
           localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a ?? 1];
         },
         cid,
       };
     },
-  };
+  });
 </script>

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

@@ -0,0 +1,36 @@
+import type { PropType } from 'vue';
+import type { Options as StrokeOptions } from 'ol/style/Stroke.js';
+/**
+ * @description Allows to model a JSON representation of ol/Stroke vector style with a vuetify VColorPicker.
+ * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<StrokeOptions>;
+        default: () => {};
+    };
+}, {
+    rgbaObject: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    }>;
+    width: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<number | undefined>;
+    updateColor(rgba: {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    }): void;
+    cid: 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<StrokeOptions>;
+        default: () => {};
+    };
+}>>, {
+    modelValue: StrokeOptions;
+}, {}>;

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

@@ -16,12 +16,14 @@
   </StyleMenuWrapper>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import type { PropType } from 'vue';
   import { useProxiedAtomicModel } from '../modelHelper.js';
-  import VcsTextSelector from './VcsTextSelector.vue';
-  import StyleMenuWrapper from './StyleMenuWrapper.vue';
+  import VcsTextSelector from './VcsTextSelector.ts.vue';
+  import StyleMenuWrapper from './StyleMenuWrapper.ts.vue';
   import { rgbaObjectToString, useColorObject } from './composables.js';
+  import type { TextStyleOptions } from './composables.js';
 
   export const fallbackStyle = {
     font: '10px Arial, Helvetica, sans-serif',
@@ -35,7 +37,7 @@
    * @description A wrapper for the VcsTextSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the text style selector.
    * @vue-prop {import("ol/style/Text").Options} [modelValue] - The ol Text style options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsTextMenu',
     components: {
       StyleMenuWrapper,
@@ -43,7 +45,7 @@
     },
     props: {
       modelValue: {
-        type: Object,
+        type: Object as PropType<TextStyleOptions>,
         default: undefined,
       },
     },
@@ -65,7 +67,7 @@
         fallbackStyle,
       };
     },
-  };
+  });
 </script>
 
 <style>

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

@@ -0,0 +1,49 @@
+import type { PropType } from 'vue';
+import type { TextStyleOptions } from './composables.js';
+export declare const fallbackStyle: {
+    font: string;
+    fill: {
+        color: number[];
+    };
+    stroke: {
+        color: number[];
+        width: number;
+    };
+    offsetX: number;
+    offsetY: number;
+};
+/**
+ * @description A wrapper for the VcsTextSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the text style selector.
+ * @vue-prop {import("ol/style/Text").Options} [modelValue] - The ol Text style options
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<TextStyleOptions>;
+        default: undefined;
+    };
+}, {
+    strokeColor: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string>;
+    fillColor: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string>;
+    fontStyle: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<string | undefined>;
+    fallbackStyle: {
+        font: string;
+        fill: {
+            color: number[];
+        };
+        stroke: {
+            color: number[];
+            width: number;
+        };
+        offsetX: number;
+        offsetY: number;
+    };
+}, 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<TextStyleOptions>;
+        default: undefined;
+    };
+}>>, {
+    modelValue: TextStyleOptions;
+}, {}>;

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

@@ -5,7 +5,7 @@
         <v-col>
           <VcsTextField
             v-model="localValue.text"
-            :placeholder="$t('components.style.enterText')"
+            :placeholder="$st('components.style.enterText')"
           />
         </v-col>
       </v-row>
@@ -19,8 +19,9 @@
                     :style="{
                       fontFamily: `${scope.item.value} !important`,
                     }"
-                    >{{ title }}</span
                   >
+                    {{ title }}
+                  </span>
                 </template>
               </v-list-item>
             </template>
@@ -32,7 +33,9 @@
             type="number"
             unit="px"
             v-model="fontSize"
-            :rules="[(v) => (!!v && v > 0) || 'components.validation.notValid']"
+            :rules="[
+              (v: number) => (!!v && v > 0) || 'components.validation.notValid',
+            ]"
           />
         </v-col>
       </v-row>
@@ -43,7 +46,7 @@
           class="pr-1"
           tooltip="components.style.bold"
         >
-          {{ $t('components.style.bold') }}
+          {{ $st('components.style.bold') }}
         </VcsButton>
         <VcsButton
           :active="isItalic"
@@ -51,43 +54,39 @@
           class="px-2"
           tooltip="components.style.italic"
         >
-          {{ $t('components.style.italic') }}
+          {{ $st('components.style.italic') }}
         </VcsButton>
       </div>
       <VcsStrokeMenu
         v-model="localValue.stroke"
-        :value-default="valueDefault.stroke"
+        :value-default="valueDefault?.stroke"
         :disabled="!localValue"
       />
       <VcsFillMenu
         v-model="localValue.fill"
-        :value-default="valueDefault.fill"
+        :value-default="valueDefault?.fill"
         :disabled="!localValue"
       />
       <v-row no-gutters>
         <v-col cols="6">
-          <VcsLabel>{{ $t('components.style.offset') }}</VcsLabel>
+          <VcsLabel>{{ $st('components.style.offset') }}</VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            :hide-spin-buttons="true"
+            hide-spin-buttons
             type="number"
             v-model.number="localValue.offsetX"
-            tooltip-position="top"
             prefix="X"
             unit="px"
-            tooltip="components.style.offsetX"
           />
         </v-col>
-        <v-col cols="3">
+        <v-col cols="3" class="pl-1">
           <VcsTextField
-            :hide-spin-buttons="true"
+            hide-spin-buttons
             type="number"
             v-model.number="localValue.offsetY"
-            tooltip-position="top"
             prefix="Y"
             unit="px"
-            tooltip="components.style.offsetY"
           />
         </v-col>
       </v-row>
@@ -95,8 +94,9 @@
   </v-sheet>
 </template>
 
-<script>
-  import { computed } from 'vue';
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import type { PropType } from 'vue';
   import {
     VSheet,
     VContainer,
@@ -104,20 +104,23 @@
     VCol,
     VListItem,
   } from 'vuetify/components';
-  import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
-  import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
-  import VcsSelect from '../form-inputs-controls/VcsSelect.vue';
-  import VcsButton from '../buttons/VcsButton.vue';
-  import VcsFillMenu from './VcsFillMenu.vue';
-  import VcsStrokeMenu from './VcsStrokeMenu.vue';
+  import VcsLabel from '../form-inputs-controls/VcsLabel.ts.vue';
+  import VcsTextField from '../form-inputs-controls/VcsTextField.ts.vue';
+  import VcsSelect from '../form-inputs-controls/VcsSelect.ts.vue';
+  import VcsButton from '../buttons/VcsButton.ts.vue';
+  import VcsFillMenu from './VcsFillMenu.ts.vue';
+  import VcsStrokeMenu from './VcsStrokeMenu.ts.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
+  import type { TextStyleOptions } from './composables.js';
 
-  export const fonts = {
+  export const fonts: Record<string, string> = {
     Georgia: 'Georgia, serif',
     Palatino: '"Palatino Linotype", "Book Antiqua", Palatino, serif',
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     'Times New Roman': '"Times New Roman", Times, serif',
     Arial: 'Arial, Helvetica, sans-serif',
     Impact: 'Impact, Charcoal, sans-serif',
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     'Comic Sans': '"Comic Sans MS", cursive, sans-serif',
     Trebuchet: '"Trebuchet MS", Helvetica, sans-serif',
     Verdana: 'Verdana, Geneva, sans-serif',
@@ -125,12 +128,20 @@
     Lucida: '"Lucida Console", Monaco, monospace',
   };
 
+  export const defaultFont = {
+    style: 'normal',
+    weight: 'normal',
+    size: '12px',
+    sizeNumber: 12,
+    family: '',
+  };
+
   /**
    * @description Allows to model a JSON representation of ol/style/Text style. It makes use of VcsStrokeMenu and VcsFillMenu.
    * @vue-prop {import("ol/style/Text").Options} modelValue - The ol Text style options
    * @vue-prop {import("ol/style/Text").Options} valueDefault - The default ol Text style options
    */
-  export default {
+  export default defineComponent({
     name: 'VcsTextSelector',
     components: {
       VSheet,
@@ -147,11 +158,11 @@
     },
     props: {
       modelValue: {
-        type: Object,
-        default: undefined,
+        type: Object as PropType<TextStyleOptions>,
+        default: () => ({}),
       },
       valueDefault: {
-        type: Object,
+        type: Object as PropType<TextStyleOptions>,
         default: undefined,
       },
     },
@@ -173,7 +184,7 @@
         return {};
       });
 
-      function setNewFont(fontPropertyArray) {
+      function setNewFont(fontPropertyArray: Array<string>): void {
         localValue.value.font = fontPropertyArray
           .filter((prop) => prop && prop !== 'normal')
           .join(' ');
@@ -190,27 +201,29 @@
         },
         set(newFamily) {
           setNewFont([
-            font.value.fontStyle,
-            font.value.fontWeight,
-            font.value.fontSize,
-            newFamily,
+            font.value.fontStyle || defaultFont.style,
+            font.value.fontWeight || defaultFont.weight,
+            font.value.fontSize || defaultFont.size,
+            newFamily || defaultFont.family,
           ]);
         },
       });
 
       const fontSize = computed({
         get() {
-          return parseInt(font.value.fontSize, 10);
+          return font.value.fontSize
+            ? parseInt(font.value.fontSize, 10)
+            : defaultFont.sizeNumber;
         },
         set(newSize) {
           if (!newSize || newSize < 1) {
             return;
           }
           setNewFont([
-            font.value.fontStyle,
-            font.value.fontWeight,
+            font.value.fontStyle || defaultFont.style,
+            font.value.fontWeight || defaultFont.weight,
             `${newSize}px`,
-            font.value.fontFamily,
+            font.value.fontFamily || defaultFont.family,
           ]);
         },
       });
@@ -221,10 +234,10 @@
         },
         set(newValue) {
           setNewFont([
-            font.value.fontStyle,
-            newValue ? 'bold' : 'normal',
-            font.value.fontSize,
-            font.value.fontFamily,
+            font.value.fontStyle || defaultFont.style,
+            newValue ? 'bold' : defaultFont.weight,
+            font.value.fontSize || defaultFont.size,
+            font.value.fontFamily || defaultFont.family,
           ]);
         },
       });
@@ -234,10 +247,10 @@
         },
         set(newValue) {
           setNewFont([
-            newValue ? 'italic' : 'normal',
-            font.value.fontWeight,
-            font.value.fontSize,
-            font.value.fontFamily,
+            newValue ? 'italic' : defaultFont.style,
+            font.value.fontWeight || defaultFont.weight,
+            font.value.fontSize || defaultFont.size,
+            font.value.fontFamily || defaultFont.family,
           ]);
         },
       });
@@ -252,5 +265,5 @@
         isItalic,
       };
     },
-  };
+  });
 </script>

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

@@ -0,0 +1,60 @@
+import type { PropType } from 'vue';
+import type { TextStyleOptions } from './composables.js';
+export declare const fonts: Record<string, string>;
+export declare const defaultFont: {
+    style: string;
+    weight: string;
+    size: string;
+    sizeNumber: number;
+    family: string;
+};
+/**
+ * @description Allows to model a JSON representation of ol/style/Text style. It makes use of VcsStrokeMenu and VcsFillMenu.
+ * @vue-prop {import("ol/style/Text").Options} modelValue - The ol Text style options
+ * @vue-prop {import("ol/style/Text").Options} valueDefault - The default ol Text style options
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{
+    modelValue: {
+        type: PropType<TextStyleOptions>;
+        default: () => {};
+    };
+    valueDefault: {
+        type: PropType<TextStyleOptions>;
+        default: undefined;
+    };
+}, {
+    localValue: import("vue", { with: { "resolution-mode": "import" } }).Ref<TextStyleOptions>;
+    fontItems: {
+        title: string;
+        value: string;
+    }[];
+    font: import("vue", { with: { "resolution-mode": "import" } }).ComputedRef<{
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        fontFamily: string;
+    } | {
+        fontStyle?: undefined;
+        fontWeight?: undefined;
+        fontSize?: undefined;
+        fontFamily?: undefined;
+    }>;
+    fontFamily: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<string | undefined>;
+    fontSize: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<number>;
+    isBold: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<boolean>;
+    isItalic: import("vue", { with: { "resolution-mode": "import" } }).WritableComputedRef<boolean>;
+}, 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<TextStyleOptions>;
+        default: () => {};
+    };
+    valueDefault: {
+        type: PropType<TextStyleOptions>;
+        default: undefined;
+    };
+}>>, {
+    modelValue: TextStyleOptions;
+    valueDefault: TextStyleOptions;
+}, {}>;