@vcmap/ui 5.3.7 → 6.0.0-rc.10

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

@@ -1,34 +1,16 @@
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     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;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>>, {
-    value: Record<string, any>;
-    disabled: boolean;
-    valueDefault: Record<string, any>;
-}>;
+    modelValue: Record<string, any>;
+}, {}>;
 export default _default;

package/src/components/style/VcsStrokeSelector.vue

@@ -1,43 +1,52 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-stroke-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>
-          <VcsLabel html-for="draw-stroke-width">
+          <VcsLabel :html-for="`${cid}-draw-stroke-width`">
             {{ $t('components.style.lineWidth') }}
           </VcsLabel>
         </v-col>
         <v-col cols="3">
           <VcsTextField
-            id="draw-stroke-width"
+            :id="`${cid}-draw-stroke-width`"
             v-model.number="width"
+            :hide-spin-buttons="true"
             type="number"
             unit="px"
-            :disabled="!value"
+            :disabled="!modelValue"
           />
         </v-col>
       </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"
+      :disabled="!modelValue"
+      width="100%"
     />
   </v-sheet>
 </template>
 
 <script>
   import { computed } from 'vue';
-  import { VSheet, VColorPicker, VContainer, VRow, VCol } from 'vuetify/lib';
+  import {
+    VSheet,
+    VColorPicker,
+    VContainer,
+    VRow,
+    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 { useColorObject } from './composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
    * @description Allows to model a JSON representation of ol/Stroke vector style with a vuetify VColorPicker.
-   * @vue-prop {import("ol/style/Stroke").Options} value - The Stroke Options
+   * @vue-prop {import("ol/style/Stroke").Options} [modelValue] - The Stroke Options
    */
   export default {
     name: 'VcsFillSelector',
@@ -51,37 +60,30 @@
       VcsTextField,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
     },
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const cid = useComponentId();
       return {
-        rgbaObject: useColorObject(() => props.value?.color),
+        rgbaObject: useColorObject(() => localValue.value?.color),
         width: computed({
           get() {
-            return props.value?.width;
+            return localValue.value?.width;
           },
           set(value) {
-            if (value > 0 && value !== props.value?.width) {
-              const stroke = {
-                width: value,
-              };
-              if (props.value?.color) {
-                stroke.color = [...props.value.color];
-              }
-              emit('input', stroke);
+            if (value > 0 && value !== localValue.value?.width) {
+              localValue.value.width = value;
             }
           },
         }),
         updateColor(rgba) {
-          const stroke = {
-            color: [rgba.r, rgba.g, rgba.b, rgba.a],
-            width: props.value?.width,
-          };
-          emit('input', stroke);
+          localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a];
         },
+        cid,
       };
     },
   };

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,13 @@ 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: {
+    cid: string;
+}, 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,23 +1,24 @@
 <template>
   <MenuWrapper
-    v-bind="{ value, valueDefault }"
+    class="vcs-text-menu"
     :value-fallback="fallbackStyle"
-    v-on="$listeners"
     name="components.style.text"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
-      <div v-if="value" class="d-flex justify-center align-center">
-        <span id="text-preview">T</span>
+      <div v-if="modelValue" class="d-flex justify-center align-center">
+        <span class="vcs-text-menu-preview">T</span>
       </div>
     </template>
     <template #content>
-      <VcsTextSelector v-bind="{ value, valueDefault }" v-on="$listeners" />
+      <VcsTextSelector v-bind="{ ...$attrs, ...$props }" />
     </template>
   </MenuWrapper>
 </template>
 
 <script>
   import { computed } from 'vue';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
   import VcsTextSelector from './VcsTextSelector.vue';
   import MenuWrapper from './MenuWrapper.vue';
   import { rgbaObjectToString, useColorObject } from './composables.js';
@@ -32,8 +33,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} value - The ol Text style options
-   * @vue-prop {import("ol/style/Text").Options} valueDefault - The default ol Text style options
+   * @vue-prop {import("ol/style/Text").Options} [modelValue] - The ol Text style options
    */
   export default {
     name: 'VcsTextMenu',
@@ -42,19 +42,18 @@
       VcsTextSelector,
     },
     props: {
-      value: {
-        type: Object,
-        default: undefined,
-      },
-      valueDefault: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
     },
-    setup(props) {
-      const fillColorObject = useColorObject(() => props.value?.fill?.color);
+    setup(props, { emit }) {
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+      const fillColorObject = useColorObject(
+        () => localValue.value?.fill?.color,
+      );
       const strokeColorObject = useColorObject(
-        () => props.value?.stroke?.color,
+        () => localValue.value?.stroke?.color,
       );
 
       return {
@@ -62,7 +61,7 @@
           rgbaObjectToString(strokeColorObject.value),
         ),
         fillColor: computed(() => rgbaObjectToString(fillColorObject.value)),
-        fontStyle: computed(() => props.value?.font),
+        fontStyle: computed(() => localValue.value?.font),
         fallbackStyle,
       };
     },
@@ -70,7 +69,7 @@
 </script>
 
 <style>
-  #text-preview {
+  .vcs-text-menu-preview {
     font: v-bind(fontStyle) !important;
     font-size: 20px !important;
     -webkit-text-stroke-color: v-bind(strokeColor);

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

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

package/src/components/style/VcsTextSelector.vue

@@ -1,34 +1,34 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-text-selector">
     <v-container class="px-1 py-0">
       <v-row no-gutters>
         <v-col>
           <VcsTextField
-            v-model="selectedText"
+            v-model="localValue.text"
             :placeholder="$t('components.style.enterText')"
           />
         </v-col>
       </v-row>
       <v-row no-gutters>
         <v-col>
-          <VcsSelect
-            :items="
-              Object.keys(fonts).map((text) => ({
-                text,
-                value: fonts[font],
-              }))
-            "
-            v-model="fontFamily"
-          >
-            <template #item="{ item }">
-              <span :style="`font-family: ${item.value} !important`">{{
-                item.text
-              }}</span>
+          <VcsSelect :items="fontItems" v-model="fontFamily">
+            <template #item="scope">
+              <v-list-item density="compact" v-bind="scope.props" role="option">
+                <template #title="{ title }">
+                  <span
+                    :style="{
+                      fontFamily: `${scope.item.value} !important`,
+                    }"
+                    >{{ title }}</span
+                  >
+                </template>
+              </v-list-item>
             </template>
           </VcsSelect>
         </v-col>
         <v-col cols="2">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
             unit="px"
             v-model="fontSize"
@@ -55,14 +55,14 @@
         </VcsButton>
       </div>
       <VcsStrokeMenu
-        v-model="selectedStroke"
+        v-model="localValue.stroke"
         :value-default="valueDefault.stroke"
-        :disabled="!value"
+        :disabled="!localValue"
       />
       <VcsFillMenu
-        v-model="selectedFill"
+        v-model="localValue.fill"
         :value-default="valueDefault.fill"
-        :disabled="!value"
+        :disabled="!localValue"
       />
       <v-row no-gutters>
         <v-col cols="6">
@@ -70,8 +70,9 @@
         </v-col>
         <v-col cols="3">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
-            v-model.number="selectedOffsetX"
+            v-model.number="localValue.offsetX"
             tooltip-position="top"
             prefix="X"
             unit="px"
@@ -80,8 +81,9 @@
         </v-col>
         <v-col cols="3">
           <VcsTextField
+            :hide-spin-buttons="true"
             type="number"
-            v-model.number="selectedOffsetY"
+            v-model.number="localValue.offsetY"
             tooltip-position="top"
             prefix="Y"
             unit="px"
@@ -95,14 +97,20 @@
 
 <script>
   import { computed } from 'vue';
-  import { VSheet, VContainer, VRow, VCol } from 'vuetify/lib';
+  import {
+    VSheet,
+    VContainer,
+    VRow,
+    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 { useSelectedKey } from './composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   export const fonts = {
     Georgia: 'Georgia, serif',
@@ -119,7 +127,7 @@
 
   /**
    * @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} value - The ol Text style options
+   * @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 {
@@ -129,6 +137,7 @@
       VContainer,
       VRow,
       VCol,
+      VListItem,
       VcsSelect,
       VcsTextField,
       VcsButton,
@@ -137,57 +146,55 @@
       VcsLabel,
     },
     props: {
-      value: {
+      modelValue: {
         type: Object,
         default: undefined,
       },
       valueDefault: {
         type: Object,
-        required: true,
+        default: undefined,
       },
     },
     setup(props, { emit }) {
-      const font = computed({
-        get() {
-          let fontStyle = {
-            // fontStyle: 'normal',
-            // fontWeight: 'normal',
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const font = computed(() => {
+        if (localValue.value) {
+          const el = document.createElement('span');
+          el.setAttribute('style', `font: ${localValue.value.font}`);
+          const { fontStyle, fontWeight, fontSize, fontFamily } = el.style;
+          el.remove();
+          return {
+            fontStyle,
+            fontWeight,
+            fontSize,
+            fontFamily,
           };
-          if (props.value) {
-            const el = document.createElement('span');
-            el.setAttribute('style', `font: ${props.value.font}`);
-            fontStyle = el.style;
-            el.remove();
-          }
-          return fontStyle;
-        },
+        }
+        return {};
       });
 
-      function emitNewFont(key, value) {
-        font.value[key] = value;
-        const newModelObject = JSON.parse(JSON.stringify(props.value));
-        const fontPropertyArray = [
-          font.value.fontStyle,
-          font.value.fontWeight,
-          font.value.fontSize,
-          font.value.fontFamily,
-        ];
-        emit(
-          'input',
-          Object.assign(newModelObject, {
-            font: fontPropertyArray
-              .filter((prop) => prop && prop !== 'normal')
-              .join(' '),
-          }),
-        );
+      function setNewFont(fontPropertyArray) {
+        localValue.value.font = fontPropertyArray
+          .filter((prop) => prop && prop !== 'normal')
+          .join(' ');
       }
 
+      const fontItems = Object.keys(fonts).map((key) => ({
+        title: key,
+        value: fonts[key],
+      }));
+
       const fontFamily = computed({
         get() {
           return font.value.fontFamily;
         },
         set(newFamily) {
-          emitNewFont('fontFamily', newFamily);
+          setNewFont([
+            font.value.fontStyle,
+            font.value.fontWeight,
+            font.value.fontSize,
+            newFamily,
+          ]);
         },
       });
 
@@ -199,7 +206,12 @@
           if (!newSize || newSize < 1) {
             return;
           }
-          emitNewFont('fontSize', `${newSize}px`);
+          setNewFont([
+            font.value.fontStyle,
+            font.value.fontWeight,
+            `${newSize}px`,
+            font.value.fontFamily,
+          ]);
         },
       });
 
@@ -208,7 +220,12 @@
           return font.value.fontWeight === 'bold';
         },
         set(newValue) {
-          emitNewFont('fontWeight', newValue ? 'bold' : 'normal');
+          setNewFont([
+            font.value.fontStyle,
+            newValue ? 'bold' : 'normal',
+            font.value.fontSize,
+            font.value.fontFamily,
+          ]);
         },
       });
       const isItalic = computed({
@@ -216,53 +233,23 @@
           return font.value.fontStyle === 'italic';
         },
         set(newValue) {
-          emitNewFont('fontStyle', newValue ? 'italic' : 'normal');
+          setNewFont([
+            newValue ? 'italic' : 'normal',
+            font.value.fontWeight,
+            font.value.fontSize,
+            font.value.fontFamily,
+          ]);
         },
       });
 
-      const selectedFill = useSelectedKey(
-        () => props.value,
-        'fill',
-        props.valueDefault.fill,
-        emit,
-      );
-      const selectedStroke = useSelectedKey(
-        () => props.value,
-        'stroke',
-        props.valueDefault.stroke,
-        emit,
-      );
-      const selectedOffsetX = useSelectedKey(
-        () => props.value,
-        'offsetX',
-        props.valueDefault.offsetX,
-        emit,
-      );
-      const selectedOffsetY = useSelectedKey(
-        () => props.value,
-        'offsetY',
-        props.valueDefault.offsetY,
-        emit,
-      );
-      const selectedText = useSelectedKey(
-        () => props.value,
-        'text',
-        props.valueDefault.text,
-        emit,
-      );
       return {
-        fonts,
+        localValue,
+        fontItems,
         font,
         fontFamily,
         fontSize,
-        selectedFill,
-        selectedStroke,
-        emitNewFont,
         isBold,
         isItalic,
-        selectedOffsetX,
-        selectedOffsetY,
-        selectedText,
       };
     },
   };

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

@@ -11,48 +11,46 @@ export const fonts: {
     Lucida: string;
 };
 declare const _default: import("vue").DefineComponent<{
-    value: {
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
     valueDefault: {
         type: ObjectConstructor;
-        required: true;
+        default: undefined;
     };
 }, {
-    fonts: {
-        Georgia: string;
-        Palatino: string;
-        'Times New Roman': string;
-        Arial: string;
-        Impact: string;
-        'Comic Sans': string;
-        Trebuchet: string;
-        Verdana: string;
-        Courier: string;
-        Lucida: string;
-    };
-    font: import("vue").ComputedRef<any>;
-    fontFamily: import("vue").WritableComputedRef<any>;
+    localValue: import("vue").Ref<any>;
+    fontItems: {
+        title: string;
+        value: any;
+    }[];
+    font: import("vue").ComputedRef<{
+        fontStyle: string;
+        fontWeight: string;
+        fontSize: string;
+        fontFamily: string;
+    } | {
+        fontStyle?: undefined;
+        fontWeight?: undefined;
+        fontSize?: undefined;
+        fontFamily?: undefined;
+    }>;
+    fontFamily: import("vue").WritableComputedRef<string | undefined>;
     fontSize: import("vue").WritableComputedRef<number>;
-    selectedFill: import("vue").WritableComputedRef<any>;
-    selectedStroke: import("vue").WritableComputedRef<any>;
-    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: {
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
         type: ObjectConstructor;
         default: undefined;
     };
     valueDefault: {
         type: ObjectConstructor;
-        required: true;
+        default: undefined;
     };
 }>>, {
-    value: Record<string, any>;
-}>;
+    modelValue: Record<string, any>;
+    valueDefault: Record<string, any>;
+}, {}>;
 export default _default;