fix: correctly handle styles prop

Author: d-koppenhagen

docs/componentsguide/interactions/modify/index.md

@@ -34,7 +34,7 @@ import SnapModifyDemo from "@demos/SnapModifyDemo.vue"
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-vector-layer :style="vectorStyle">
+    <ol-vector-layer :styles="vectorStyle">
       <ol-source-vector :features="zones">
         <ol-interaction-modify
           v-if="modifyEnabled"

docs/componentsguide/interactions/snap/index.md

@@ -34,7 +34,7 @@ import SnapModifyDemo from "@demos/SnapModifyDemo.vue"
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-vector-layer :style="vectorStyle">
+    <ol-vector-layer :styles="vectorStyle">
       <ol-source-vector :features="zones">
         <ol-interaction-modify
           v-if="modifyEnabled"

docs/componentsguide/layers/tilelayer/index.md

@@ -33,7 +33,7 @@ Example below shows how to use ol-layer-tile component together with ol-source-w
         :matrixSet="matrixSet"
         :format="format"
         :layer="layerName"
-        :style="styleName"
+        :styles="styleName"
       ></ol-source-wmts>
     </ol-tile-layer>
   </ol-map>

docs/componentsguide/layers/webglpointslayer/index.md

@@ -28,7 +28,7 @@ import WebglPointsLayerDemo from "@demos/WebglPointsLayerDemo.vue"
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-webglpoints-layer :style="webglPointsStyle">
+    <ol-webglpoints-layer :styles="webglPointsStyle">
       <ol-source-webglpoints
         :format="geoJson"
         url="https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson"

docs/componentsguide/sources/wmts/index.md

@@ -34,7 +34,7 @@ Example below shows how to use ol-layer-tile component together with ol-source-w
         :matrixSet="matrixSet"
         :format="format"
         :layer="layerName"
-        :style="styleName"
+        :styles="styleName"
       ></ol-source-wmts>
     </ol-tile-layer>
   </ol-map>

docs/demo.md

@@ -269,7 +269,7 @@ import AppDemo from "@demos/AppDemo.vue"
       </ol-source-vector>
     </ol-vector-layer>
 
-    <ol-webglpoints-layer :style="webglPointsStyle">
+    <ol-webglpoints-layer :styles="webglPointsStyle">
       <ol-source-webglpoints
         :format="geoJson"
         url="https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson"

src/App.vue

@@ -275,7 +275,7 @@
         </ol-animation-path>
       </ol-source-vector>
     </ol-vector-layer>
-    <ol-webglpoints-layer :style="webglPointsStyle">
+    <ol-webglpoints-layer :styles="webglPointsStyle">
       <ol-source-webglpoints
         :format="geoJson"
         url="https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson"

src/composables/usePropsAsObjectProperties.js

@@ -4,31 +4,28 @@ import { toRefs, watch, reactive } from "vue";
  * We can't use 'style' as a component prop since it's a reserved property
  * This function will map the special `styles` prop to `style`
  */
-function getRevisedProps(props) {
-  const revisedProps = { ...props };
-  delete revisedProps.styles;
-  if (props.styles) {
-    props.style = props.styles;
+function checkAndUpdateStylePropDef(options, key) {
+  if (key === "styles") {
+    options.style = options[key].value;
   }
-  return revisedProps;
 }
 
 export default function usePropsAsObjectProperties(props, ignoredKeys = []) {
-  const revisedProps = getRevisedProps(props);
-
-  let options = toRefs(revisedProps);
+  let options = toRefs(props);
   Object.keys(options).forEach((key) => {
+    checkAndUpdateStylePropDef(options, key);
     options[key] = options[key].value;
   });
 
   const properties = reactive({
     ...options,
   });
 
-  watch(props, (newVal) => {
-    options = toRefs(getRevisedProps(newVal));
+  watch(props, () => {
+    options = toRefs(props);
     Object.keys(options).forEach((key) => {
       if (properties[key] != options[key].value && !ignoredKeys.includes(key)) {
+        checkAndUpdateStylePropDef(options, key);
         properties[key] = options[key].value;
       }
     });

src/demos/AppDemo.vue

@@ -246,7 +246,7 @@
       </ol-source-vector>
     </ol-vector-layer>
 
-    <ol-webglpoints-layer :style="webglPointsStyle">
+    <ol-webglpoints-layer :styles="webglPointsStyle">
       <ol-source-webglpoints
         :format="geoJson"
         url="https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson"

src/demos/SnapModifyDemo.vue

@@ -19,7 +19,7 @@
       <ol-source-osm />
     </ol-tile-layer>
 
-    <ol-vector-layer :style="vectorStyle">
+    <ol-vector-layer :styles="vectorStyle">
       <ol-source-vector :features="zones">
         <ol-interaction-modify
           v-if="modifyEnabled"