@vcmap/ui 6.3.11 → 7.0.0-rc.1

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;
+}, {}>;

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[];
+}, {}>;