@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/src/components/style/VcsStrokeSelector.vue

@@ -1,20 +1,20 @@
 <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>
@@ -23,7 +23,8 @@
       :model-value="rgbaObject"
       @update:model-value="updateColor"
       mode="rgba"
-      :disabled="!value"
+      :disabled="!modelValue"
+      width="100%"
     />
   </v-sheet>
 </template>
@@ -37,13 +38,15 @@
     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',
@@ -63,31 +66,24 @@
       },
     },
     setup(props, { emit }) {
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
+      const cid = useComponentId();
       return {
-        rgbaObject: useColorObject(() => props.modelValue?.color),
+        rgbaObject: useColorObject(() => localValue.value?.color),
         width: computed({
           get() {
-            return props.modelValue?.width;
+            return localValue.value?.width;
           },
           set(value) {
-            if (value > 0 && value !== props.modelValue?.width) {
-              const stroke = {
-                width: value,
-              };
-              if (props.modelValue?.color) {
-                stroke.color = [...props.modelValue.color];
-              }
-              emit('update:modelValue', 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.modelValue?.width,
-          };
-          emit('update:modelValue', stroke);
+          localValue.value.color = [rgba.r, rgba.g, rgba.b, rgba.a];
         },
+        cid,
       };
     },
   };

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

@@ -12,6 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     width: import("vue").WritableComputedRef<any>;
     updateColor(rgba: any): void;
+    cid: string;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ObjectConstructor;

package/src/components/style/VcsTextMenu.vue

@@ -1,22 +1,24 @@
 <template>
   <MenuWrapper
-    v-bind="{ ...$attrs, modelValue, valueDefault }"
+    class="vcs-text-menu"
     :value-fallback="fallbackStyle"
     name="components.style.text"
+    v-bind="{ ...$attrs, ...$props }"
   >
     <template #preview>
       <div v-if="modelValue" class="d-flex justify-center align-center">
-        <span id="text-preview">T</span>
+        <span class="vcs-text-menu-preview">T</span>
       </div>
     </template>
     <template #content>
-      <VcsTextSelector v-bind="{ ...$attrs, modelValue, valueDefault }" />
+      <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';
@@ -31,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',
@@ -45,17 +46,14 @@
         type: Object,
         default: undefined,
       },
-      valueDefault: {
-        type: Object,
-        default: undefined,
-      },
     },
-    setup(props) {
+    setup(props, { emit }) {
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
       const fillColorObject = useColorObject(
-        () => props.modelValue?.fill?.color,
+        () => localValue.value?.fill?.color,
       );
       const strokeColorObject = useColorObject(
-        () => props.modelValue?.stroke?.color,
+        () => localValue.value?.stroke?.color,
       );
 
       return {
@@ -63,7 +61,7 @@
           rgbaObjectToString(strokeColorObject.value),
         ),
         fillColor: computed(() => rgbaObjectToString(fillColorObject.value)),
-        fontStyle: computed(() => props.modelValue?.font),
+        fontStyle: computed(() => localValue.value?.font),
         fallbackStyle,
       };
     },
@@ -71,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

@@ -16,10 +16,6 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
 }, {
     strokeColor: import("vue").ComputedRef<string>;
     fillColor: import("vue").ComputedRef<string>;
@@ -41,12 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         default: undefined;
     };
-    valueDefault: {
-        type: ObjectConstructor;
-        default: undefined;
-    };
 }>>, {
     modelValue: Record<string, any>;
-    valueDefault: Record<string, any>;
 }, {}>;
 export default _default;

package/src/components/style/VcsTextSelector.vue

@@ -1,29 +1,28 @@
 <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>
@@ -56,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">
@@ -73,7 +72,7 @@
           <VcsTextField
             :hide-spin-buttons="true"
             type="number"
-            v-model.number="selectedOffsetX"
+            v-model.number="localValue.offsetX"
             tooltip-position="top"
             prefix="X"
             unit="px"
@@ -84,7 +83,7 @@
           <VcsTextField
             :hide-spin-buttons="true"
             type="number"
-            v-model.number="selectedOffsetY"
+            v-model.number="localValue.offsetY"
             tooltip-position="top"
             prefix="Y"
             unit="px"
@@ -98,14 +97,20 @@
 
 <script>
   import { computed } from 'vue';
-  import { VSheet, VContainer, VRow, VCol } from 'vuetify/components';
+  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',
@@ -122,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 {
@@ -132,6 +137,7 @@
       VContainer,
       VRow,
       VCol,
+      VListItem,
       VcsSelect,
       VcsTextField,
       VcsButton,
@@ -146,51 +152,49 @@
       },
       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.modelValue) {
-            const el = document.createElement('span');
-            el.setAttribute('style', `font: ${props.modelValue.font}`);
-            fontStyle = el.style;
-            el.remove();
-          }
-          return fontStyle;
-        },
+        }
+        return {};
       });
 
-      function emitNewFont(key, value) {
-        font.value[key] = value;
-        const newModelObject = JSON.parse(JSON.stringify(props.modelValue));
-        const fontPropertyArray = [
-          font.value.fontStyle,
-          font.value.fontWeight,
-          font.value.fontSize,
-          font.value.fontFamily,
-        ];
-        emit(
-          'update:modelValue',
-          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,
+          ]);
         },
       });
 
@@ -202,7 +206,12 @@
           if (!newSize || newSize < 1) {
             return;
           }
-          emitNewFont('fontSize', `${newSize}px`);
+          setNewFont([
+            font.value.fontStyle,
+            font.value.fontWeight,
+            `${newSize}px`,
+            font.value.fontFamily,
+          ]);
         },
       });
 
@@ -211,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({
@@ -219,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.modelValue,
-        'fill',
-        props.valueDefault.fill,
-        emit,
-      );
-      const selectedStroke = useSelectedKey(
-        () => props.modelValue,
-        'stroke',
-        props.valueDefault.stroke,
-        emit,
-      );
-      const selectedOffsetX = useSelectedKey(
-        () => props.modelValue,
-        'offsetX',
-        props.valueDefault.offsetX,
-        emit,
-      );
-      const selectedOffsetY = useSelectedKey(
-        () => props.modelValue,
-        'offsetY',
-        props.valueDefault.offsetY,
-        emit,
-      );
-      const selectedText = useSelectedKey(
-        () => props.modelValue,
-        '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

@@ -17,32 +17,29 @@ declare const _default: import("vue").DefineComponent<{
     };
     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<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<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;
@@ -50,9 +47,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     valueDefault: {
         type: ObjectConstructor;
-        required: true;
+        default: undefined;
     };
 }>>, {
     modelValue: Record<string, any>;
+    valueDefault: Record<string, any>;
 }, {}>;
 export default _default;

package/src/components/style/VcsVectorStyleComponent.vue

@@ -1,13 +1,13 @@
 <template>
-  <v-sheet>
+  <v-sheet class="vcs-vector-style-component">
     <component
       v-for="key in styleComponents"
       :key="key"
       :is="componentMap[key]"
       :value-default="valueDefault[key]"
-      v-model="selectedKeys[key].value"
-      @update:model-value="(v) => $emit(`update:${key}`, v)"
       v-bind="specificProps[key]"
+      v-model="localValue[key]"
+      @update:model-value="(v) => $emit(`update:${key}`, v)"
     />
   </v-sheet>
 </template>
@@ -19,7 +19,7 @@
   import VcsImageMenu from './VcsImageMenu.vue';
   import VcsStrokeMenu from './VcsStrokeMenu.vue';
   import VcsTextMenu from './VcsTextMenu.vue';
-  import { useSelectedKey } from './composables.js';
+  import { useProxiedComplexModel } from '../modelHelper.js';
 
   /**
    * @enum {string}
@@ -44,9 +44,9 @@
 
   /**
    * @description Wraps the style component into a single component so whole @vcmap/core/VectorStyleItemOptions can be modelled.
-   * @vue-prop {import("@vcmap/core").VectorStyleItemOptions} value - 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 {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.
    */
@@ -86,18 +86,7 @@
       },
     },
     setup(props, { emit }) {
-      const selectedKeys = computed(() =>
-        // 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.modelValue,
-            key,
-            props.valueDefault[key],
-            emit,
-          );
-          return acc;
-        }, {}),
-      );
+      const localValue = useProxiedComplexModel(props, 'modelValue', emit);
       const specificProps = computed(() => ({
         [VectorStyleMenus.IMAGE]: {
           extendedShapeSettings: props.extendedShapeSettings,
@@ -105,7 +94,7 @@
         },
       }));
       return {
-        selectedKeys,
+        localValue,
         specificProps,
         componentMap,
       };

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

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }, {
-    selectedKeys: import("vue").ComputedRef<unknown>;
+    localValue: import("vue").Ref<any>;
     specificProps: import("vue").ComputedRef<{
         [x: string]: {
             extendedShapeSettings: boolean;

package/src/components/style/composables.d.ts

@@ -16,20 +16,6 @@ export function useColorObject(colorGetter: () => Array<number>): import("vue").
  * @returns {boolean} If value is between min and max.
  */
 export function between(value: number, range: number[]): boolean;
-/**
- * Creates a computed property with a getter and a setter for a specific object property/key of the value prop. If the value prop is an object, this composable allows to pass this computed to an v-model of a sub component. The getter returns the value of the key or, if it is undefined, a default value. The setter merges the passed value with the other object properties of the value prop and emits the whole object as a input event.
- * @param {function():T} modelObject Getter for the property that is modelled by the component and should be updated with input event, usually this is the 'value' prop.
- * @param {K} key The key of the modelObject that should be return on get and updated on set.
- * @param {U} defaultValue Default value for the key of the modelObject.
- * @param {function(string, ...unknown[]):void} emit The emit function of the component context that is using this composable.
- * @param {Array<number>} [range] The allowed range of numbers.
- * @param {boolean} [isRequired] If value is required.
- * @returns {import("vue").WritableComputedRef<T[K]>} The value to the key param if the getter is called.
- * @template {Object} T
- * @template {string} K
- * @template U
- */
-export function useSelectedKey<T extends Object, K extends string, U>(modelObject: () => T, key: K, defaultValue: U, emit: (arg0: string, ...args: unknown[][]) => void, range?: number[] | undefined, isRequired?: boolean | undefined): import("vue").WritableComputedRef<T[K]>;
 /**
  * Creates a string from a color object.
  * @param {{r: number, g: number, b: number, a: number}} rgbaObject An object with rgba keys.