@vcmap/ui 5.3.2 → 6.0.0-rc.1

package/src/components/style/VcsImageSelector.vue

@@ -9,7 +9,7 @@
     </v-container>
     <v-divider />
     <div class="px-1">
-      <v-tabs v-model="selectedImageTypeTab" height="40" centered>
+      <v-tabs v-model="selectedImageTypeTab" height="40" align-tabs="center">
         <v-tab
           v-for="item in Object.values(ImageType).map((value) => ({
             value,
@@ -18,22 +18,22 @@
           :key="item.value"
           light
         >
-          {{ $t(item.label) }}
+          {{ $st(item.label) }}
         </v-tab>
       </v-tabs>
     </div>
     <v-divider />
     <v-container class="px-1 pt-1 pb-0">
-      <VcsRadioGrid
+      <VcsRadio
         v-model="selectedImage"
         :items="currentItems"
         :disabled="!value"
         item-value="src"
       >
-        <template #label="{ src }" v-if="selectedType === ImageType.SHAPE">
-          <v-icon size="24">{{ src }}</v-icon>
+        <template #top-label="{ item }" v-if="selectedType === ImageType.SHAPE">
+          <v-icon size="24">{{ item.src }}</v-icon>
         </template>
-      </VcsRadioGrid>
+      </VcsRadio>
       <div v-if="selectedType === ImageType.ICON">
         <v-row no-gutters>
           <v-col>
@@ -61,11 +61,12 @@
           :key="input.name"
         >
           <v-col>
-            <VcsLabel>{{ $t(`components.style.${input.text}`) }}</VcsLabel>
+            <VcsLabel>{{ $st(`components.style.${input.text}`) }}</VcsLabel>
           </v-col>
           <v-col cols="3">
             <VcsTextField
               :id="`style-shape-${input.text}`"
+              :hide-spin-buttons="true"
               type="number"
               :unit="input.unit || ''"
               v-model.number="input.value.value"
@@ -80,11 +81,10 @@
                   !input.range ||
                   (!input.isRequired && !v) ||
                   between(v, input.range) ||
-                  `${$t(
+                  `${$st(
                     'components.validation.allowedRange',
                   )}: ${input.range.join(' - ')}`,
               ]"
-              :show-spin-buttons="true"
             />
           </v-col>
         </v-row>
@@ -99,6 +99,7 @@
         <v-col cols="3">
           <VcsTextField
             id="style-shape-scale"
+            :hide-spin-buttons="true"
             type="number"
             v-model.number="selectedScale"
             placeholder="1"
@@ -134,14 +135,14 @@
     VIcon,
     VTabs,
     VTab,
-  } from 'vuetify/lib';
+  } from 'vuetify/components';
   import { Circle, Fill, Icon, RegularShape, Stroke, Style } from 'ol/style.js';
   import { toContext } from 'ol/render.js';
   import { Point } from 'ol/geom.js';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
-  import VcsRadioGrid from '../form-inputs-controls/VcsRadioGrid.vue';
+  import VcsRadio from '../form-inputs-controls/VcsRadio.vue';
   import VcsFillMenu from './VcsFillMenu.vue';
   import VcsStrokeMenu from './VcsStrokeMenu.vue';
   import { useSelectedKey, between } from './composables.js';
@@ -766,11 +767,11 @@
       VcsTextField,
       VcsFillMenu,
       VcsStrokeMenu,
-      VcsRadioGrid,
+      VcsRadio,
       VcsSlider,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -789,9 +790,9 @@
     },
     setup(props, { emit }) {
       const currentType = computed(() => {
-        if (props.value?.radius) {
+        if (props.modelValue?.radius) {
           return ImageType.SHAPE;
-        } else if (props.value?.src) {
+        } else if (props.modelValue?.src) {
           return ImageType.ICON;
         } else {
           return undefined;
@@ -828,7 +829,7 @@
           return {
             text: input.name,
             value: useSelectedKey(
-              () => props.value,
+              () => props.modelValue,
               input.name,
               props.valueDefault[input.name],
               emit,
@@ -844,39 +845,42 @@
 
       const selectedScale = computed({
         get() {
-          if (Array.isArray(props.value?.scale)) {
-            return props.value.scale[0];
+          if (Array.isArray(props.modelValue?.scale)) {
+            return props.modelValue.scale[0];
           } else {
-            return props.value?.scale;
+            return props.modelValue?.scale;
           }
         },
         set(value) {
           if (!value) {
-            const newImage = structuredClone(props.value);
+            const newImage = structuredClone(props.modelValue);
             delete newImage.scale;
-            emit('input', newImage);
+            emit('update:modelValue', newImage);
           } else if (value > 0) {
-            const newImage = structuredClone(props.value);
-            emit('input', Object.assign(newImage, { scale: value }));
+            const newImage = structuredClone(props.modelValue);
+            emit(
+              'update:modelValue',
+              Object.assign(newImage, { scale: value }),
+            );
           }
         },
       });
 
       const selectedOpacity = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'opacity',
         props.valueDefault.opacity,
         emit,
       );
 
       const selectedFill = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'fill',
         props.valueDefault.fill,
         emit,
       );
       const selectedStroke = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'stroke',
         props.valueDefault.stroke,
         emit,
@@ -888,7 +892,7 @@
             return undefined;
           } else if (currentType.value === ImageType.SHAPE) {
             const equalShape = defaultShapes.find((preset) =>
-              isEqualShape(props.value, preset.value),
+              isEqualShape(props.modelValue, preset.value),
             );
             if (equalShape) {
               return equalShape.src;
@@ -896,7 +900,7 @@
               return customIcon;
             }
           } else if (currentType.value === ImageType.ICON) {
-            return props.value?.src;
+            return props.modelValue?.src;
           } else {
             return undefined;
           }
@@ -938,7 +942,7 @@
               opacity: selectedOpacity.value || 1,
             });
           }
-          emit('input', JSON.parse(JSON.stringify(newImage)));
+          emit('update:modelValue', JSON.parse(JSON.stringify(newImage)));
         },
       });
 
@@ -956,11 +960,11 @@
       });
 
       onMounted(() => {
-        drawImageStyle(canvas.value, props.value);
+        drawImageStyle(canvas.value, props.modelValue);
         watch(
-          () => props.value,
+          () => props.modelValue,
           () => {
-            drawImageStyle(canvas.value, props.value);
+            drawImageStyle(canvas.value, props.modelValue);
           },
           { deep: true },
         );

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

@@ -4,7 +4,7 @@
  * @param {import("ol/style/Image").Options} imageOptions The JSON options of the image style.
  * @param {boolean} fitToCanvas If the circle, shape or icon should be fitted into the canvas or if it should be draw with it's actual size.
  */
-export function drawImageStyle(canvas: HTMLCanvasElement, imageOptions: any, fitToCanvas?: boolean): Promise<void>;
+export function drawImageStyle(canvas: HTMLCanvasElement, imageOptions: import("ol/style/Image").Options, fitToCanvas?: boolean): Promise<void>;
 /**
  * *
  */
@@ -56,7 +56,7 @@ export const defaultIcons: {
     anchor: number[];
 }[];
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -86,20 +86,20 @@ declare const _default: import("vue").DefineComponent<{
     canvas: import("vue").Ref<any>;
     shapeSingleValueInputs: import("vue").ComputedRef<{
         text: string;
-        value: import("vue").WritableComputedRef<any>;
+        value: import("vue").WritableComputedRef<unknown>;
         unit: string;
         range: number[];
         step: any;
     }[]>;
     selectedScale: import("vue").WritableComputedRef<any>;
-    selectedOpacity: import("vue").WritableComputedRef<any>;
-    selectedFill: import("vue").WritableComputedRef<any>;
-    selectedStroke: import("vue").WritableComputedRef<any>;
+    selectedOpacity: import("vue").WritableComputedRef<unknown>;
+    selectedFill: import("vue").WritableComputedRef<unknown>;
+    selectedStroke: import("vue").WritableComputedRef<unknown>;
     between: typeof between;
-    currentItems: import("vue").ComputedRef<any>;
+    currentItems: import("vue").ComputedRef<any[]>;
     selectedImageTypeTab: import("vue").Ref<number>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -119,10 +119,10 @@ declare const _default: import("vue").DefineComponent<{
         }[];
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
     extendedShapeSettings: boolean;
     iconOptions: unknown[];
-}>;
+}, {}>;
 export default _default;
 import { between } from './composables.js';

package/src/components/style/VcsStrokeMenu.vue

@@ -1,8 +1,7 @@
 <template>
   <MenuWrapper
-    v-bind="{ value, valueDefault, disabled }"
+    v-bind="{ ...$attrs, value, valueDefault, disabled }"
     :value-fallback="{ color: [0, 0, 0, 1], width: 1 }"
-    v-on="$listeners"
     name="components.style.stroke"
   >
     <template #preview>
@@ -16,14 +15,14 @@
       />
     </template>
     <template #content>
-      <VcsStrokeSelector :value="value" v-on="$listeners" />
+      <VcsStrokeSelector :model-value="modelValue" v-bind="$attrs" />
     </template>
   </MenuWrapper>
 </template>
 
 <script>
   import { computed } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import VcsStrokeSelector from './VcsStrokeSelector.vue';
   import MenuWrapper from './MenuWrapper.vue';
   import { useColorObject, rgbaObjectToString } from './composables.js';
@@ -31,7 +30,7 @@
   /**
    * @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} [value] - The Stroke Options
+   * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
    * @vue-prop {import("ol/style/Stroke").Options} [valueDefault] - The default Stroke Options.
    * @vue-prop {boolean} [disabled=false] - Disable the input
    */
@@ -43,7 +42,7 @@
       MenuWrapper,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -57,7 +56,7 @@
       },
     },
     setup(props) {
-      const rgbaObject = useColorObject(() => props.value?.color);
+      const rgbaObject = useColorObject(() => props.modelValue?.color);
       return {
         rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
       };

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -13,8 +13,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     rgbaString: import("vue").ComputedRef<string>;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
-    value: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -27,8 +27,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    value: Record<string, any>;
     disabled: boolean;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
-}>;
+}, {}>;
 export default _default;

package/src/components/style/VcsStrokeSelector.vue

@@ -11,6 +11,7 @@
           <VcsTextField
             id="draw-stroke-width"
             v-model.number="width"
+            :hide-spin-buttons="true"
             type="number"
             unit="px"
             :disabled="!value"
@@ -19,10 +20,9 @@
       </v-row>
     </v-container>
     <v-color-picker
-      :value="rgbaObject"
-      @input="updateColor"
+      :model-value="rgbaObject"
+      @update:model-value="updateColor"
       mode="rgba"
-      :hide-mode-switch="true"
       :disabled="!value"
     />
   </v-sheet>
@@ -30,7 +30,13 @@
 
 <script>
   import { computed } from 'vue';
-  import { VSheet, VColorPicker, VContainer, VRow, VCol } from 'vuetify/lib';
+  import {
+    VSheet,
+    VColorPicker,
+    VContainer,
+    VRow,
+    VCol,
+  } from 'vuetify/components';
   import VcsLabel from '../form-inputs-controls/VcsLabel.vue';
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import { useColorObject } from './composables.js';
@@ -51,36 +57,36 @@
       VcsTextField,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
     },
     setup(props, { emit }) {
       return {
-        rgbaObject: useColorObject(() => props.value?.color),
+        rgbaObject: useColorObject(() => props.modelValue?.color),
         width: computed({
           get() {
-            return props.value?.width;
+            return props.modelValue?.width;
           },
           set(value) {
-            if (value > 0 && value !== props.value?.width) {
+            if (value > 0 && value !== props.modelValue?.width) {
               const stroke = {
                 width: value,
               };
-              if (props.value?.color) {
-                stroke.color = [...props.value.color];
+              if (props.modelValue?.color) {
+                stroke.color = [...props.modelValue.color];
               }
-              emit('input', stroke);
+              emit('update:modelValue', stroke);
             }
           },
         }),
         updateColor(rgba) {
           const stroke = {
             color: [rgba.r, rgba.g, rgba.b, rgba.a],
-            width: props.value?.width,
+            width: props.modelValue?.width,
           };
-          emit('input', stroke);
+          emit('update:modelValue', stroke);
         },
       };
     },

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -12,12 +12,12 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     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: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
 }>>, {
-    value: Record<string, any>;
-}>;
+    modelValue: Record<string, any>;
+}, {}>;
 export default _default;

package/src/components/style/VcsTextMenu.vue

@@ -1,17 +1,16 @@
 <template>
   <MenuWrapper
-    v-bind="{ value, valueDefault }"
+    v-bind="{ ...$attrs, modelValue, valueDefault }"
     :value-fallback="fallbackStyle"
-    v-on="$listeners"
     name="components.style.text"
   >
     <template #preview>
-      <div v-if="value" class="d-flex justify-center align-center">
+      <div v-if="modelValue" class="d-flex justify-center align-center">
         <span id="text-preview">T</span>
       </div>
     </template>
     <template #content>
-      <VcsTextSelector v-bind="{ value, valueDefault }" v-on="$listeners" />
+      <VcsTextSelector v-bind="{ ...$attrs, modelValue, valueDefault }" />
     </template>
   </MenuWrapper>
 </template>
@@ -42,7 +41,7 @@
       VcsTextSelector,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -52,9 +51,11 @@
       },
     },
     setup(props) {
-      const fillColorObject = useColorObject(() => props.value?.fill?.color);
+      const fillColorObject = useColorObject(
+        () => props.modelValue?.fill?.color,
+      );
       const strokeColorObject = useColorObject(
-        () => props.value?.stroke?.color,
+        () => props.modelValue?.stroke?.color,
       );
 
       return {
@@ -62,7 +63,7 @@
           rgbaObjectToString(strokeColorObject.value),
         ),
         fillColor: computed(() => rgbaObjectToString(fillColorObject.value)),
-        fontStyle: computed(() => props.value?.font),
+        fontStyle: computed(() => props.modelValue?.font),
         fallbackStyle,
       };
     },

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

@@ -12,7 +12,7 @@ export namespace fallbackStyle {
     let offsetY: number;
 }
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -36,8 +36,8 @@ declare const _default: import("vue").DefineComponent<{
         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: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
-}>;
+}, {}>;
 export default _default;

package/src/components/style/VcsTextSelector.vue

@@ -29,6 +29,7 @@
         </v-col>
         <v-col cols="2">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             unit="px"
             v-model="fontSize"
@@ -70,6 +71,7 @@
         </v-col>
         <v-col cols="3">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             v-model.number="selectedOffsetX"
             tooltip-position="top"
@@ -80,6 +82,7 @@
         </v-col>
         <v-col cols="3">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             v-model.number="selectedOffsetY"
             tooltip-position="top"
@@ -95,7 +98,7 @@
 
 <script>
   import { computed } from 'vue';
-  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import { VSheet, VContainer, VRow, VCol } 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';
@@ -137,7 +140,7 @@
       VcsLabel,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -153,9 +156,9 @@
             // fontStyle: 'normal',
             // fontWeight: 'normal',
           };
-          if (props.value) {
+          if (props.modelValue) {
             const el = document.createElement('span');
-            el.setAttribute('style', `font: ${props.value.font}`);
+            el.setAttribute('style', `font: ${props.modelValue.font}`);
             fontStyle = el.style;
             el.remove();
           }
@@ -165,7 +168,7 @@
 
       function emitNewFont(key, value) {
         font.value[key] = value;
-        const newModelObject = JSON.parse(JSON.stringify(props.value));
+        const newModelObject = JSON.parse(JSON.stringify(props.modelValue));
         const fontPropertyArray = [
           font.value.fontStyle,
           font.value.fontWeight,
@@ -173,7 +176,7 @@
           font.value.fontFamily,
         ];
         emit(
-          'input',
+          'update:modelValue',
           Object.assign(newModelObject, {
             font: fontPropertyArray
               .filter((prop) => prop && prop !== 'normal')
@@ -221,31 +224,31 @@
       });
 
       const selectedFill = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'fill',
         props.valueDefault.fill,
         emit,
       );
       const selectedStroke = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'stroke',
         props.valueDefault.stroke,
         emit,
       );
       const selectedOffsetX = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'offsetX',
         props.valueDefault.offsetX,
         emit,
       );
       const selectedOffsetY = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'offsetY',
         props.valueDefault.offsetY,
         emit,
       );
       const selectedText = useSelectedKey(
-        () => props.value,
+        () => props.modelValue,
         'text',
         props.valueDefault.text,
         emit,