@vcmap/ui 5.3.3 → 6.0.0-rc.2

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,

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

@@ -11,7 +11,7 @@ export const fonts: {
     Lucida: string;
 };
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -35,16 +35,16 @@ declare const _default: import("vue").DefineComponent<{
     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>;
+    selectedFill: import("vue").WritableComputedRef<unknown>;
+    selectedStroke: import("vue").WritableComputedRef<unknown>;
     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: {
+    selectedOffsetX: import("vue").WritableComputedRef<unknown>;
+    selectedOffsetY: import("vue").WritableComputedRef<unknown>;
+    selectedText: import("vue").WritableComputedRef<unknown>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -53,6 +53,6 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {
-    value: Record<string, any>;
-}>;
+    modelValue: Record<string, any>;
+}, {}>;
 export default _default;

package/src/components/style/VcsVectorStyleComponent.vue

@@ -6,7 +6,7 @@
       :is="componentMap[key]"
       :value-default="valueDefault[key]"
       v-model="selectedKeys[key].value"
-      @input="(v) => $emit(`update:${key}`, v)"
+      @update:model-value="(v) => $emit(`update:${key}`, v)"
       v-bind="specificProps[key]"
     />
   </v-sheet>
@@ -14,7 +14,7 @@
 
 <script>
   import { computed } from 'vue';
-  import { VSheet } from 'vuetify/lib';
+  import { VSheet } from 'vuetify/components';
   import VcsFillMenu from './VcsFillMenu.vue';
   import VcsImageMenu from './VcsImageMenu.vue';
   import VcsStrokeMenu from './VcsStrokeMenu.vue';
@@ -60,7 +60,7 @@
       VSheet,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
@@ -90,7 +90,7 @@
         // convert to Object with style prop names as keys and computed props as value to allow v-model.
         props.styleComponents.reduce((acc, key) => {
           acc[key] = useSelectedKey(
-            () => props.value,
+            () => props.modelValue,
             key,
             props.valueDefault[key],
             emit,

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

@@ -9,7 +9,7 @@ export namespace VectorStyleMenus {
     let TEXT: string;
 }
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -31,11 +31,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    selectedKeys: import("vue").ComputedRef<any>;
+    selectedKeys: import("vue").ComputedRef<unknown>;
     specificProps: import("vue").ComputedRef<{
         [x: string]: {
-            extendedShapeSettings: any;
-            iconOptions: any;
+            extendedShapeSettings: boolean;
+            iconOptions: unknown[] | undefined;
         };
     }>;
     componentMap: {
@@ -44,8 +44,8 @@ declare const _default: import("vue").DefineComponent<{
         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: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
@@ -67,10 +67,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    value: Record<string, any>;
+    modelValue: Record<string, any>;
     valueDefault: Record<string, any>;
     extendedShapeSettings: boolean;
     iconOptions: unknown[];
     styleComponents: unknown[];
-}>;
+}, {}>;
 export default _default;

package/src/components/style/composables.js

@@ -72,7 +72,10 @@ export function useSelectedKey(
       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 }));
+      emit(
+        'update:modelValue',
+        Object.assign(newModelObject, { [key]: newValue }),
+      );
     },
   });
 }