refactor(ol-view): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/view/index.md

@@ -21,7 +21,7 @@ See also documentation of ol-map component
 
 ```vue
 <template>
-  <ol-map style="height:400px">
+  <ol-map style="height: 400px">
     <ol-view
       ref="view"
       :center="center"
@@ -45,45 +45,31 @@ See also documentation of ol-map component
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(8);
-    const rotation = ref(0);
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-    };
-  },
-  data() {
-    return {
-      currentCenter: this.center,
-      currentZoom: this.zoom,
-      currentResolution: this.resolution,
-      currentRotation: this.rotation,
-    };
-  },
-  methods: {
-    zoomChanged(currentZoom) {
-      this.currentZoom = currentZoom;
-    },
-    resolutionChanged(resolution) {
-      this.currentResolution = resolution;
-    },
-    centerChanged(center) {
-      this.currentCenter = center;
-    },
-    rotationChanged(rotation) {
-      this.currentRotation = rotation;
-    },
-  },
-};
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+const rotation = ref(0);
+
+const currentCenter = ref(0);
+const currentZoom = ref(0);
+const currentResolution = ref(0);
+const currentRotation = ref(0);
+
+function zoomChanged(z) {
+  currentZoom.value = z;
+}
+function resolutionChanged(r) {
+  currentResolution.value = r;
+}
+function centerChanged(c) {
+  currentCenter.value = c;
+}
+function rotationChanged(r) {
+  currentRotation.value = r;
+}
 </script>
 ```
 

src/components/map/OlView.vue

@@ -0,0 +1,102 @@
+<template lang="">
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import useView from "@/composables/useView";
+
+const props = defineProps({
+  center: {
+    type: Array,
+    default: () => [0, 0],
+  },
+  constrainRotation: {
+    type: Boolean,
+    default: true,
+  },
+  enableRotation: {
+    type: Boolean,
+    default: true,
+  },
+  extent: {
+    type: Array,
+  },
+  constrainOnlyCenter: {
+    type: Boolean,
+    default: false,
+  },
+  smoothExtentConstraint: {
+    type: Boolean,
+    default: true,
+  },
+  maxResolution: {
+    type: Number,
+  },
+  minResolution: {
+    type: Number,
+  },
+  maxZoom: {
+    type: Number,
+    default: 28,
+  },
+  minZoom: {
+    type: Number,
+    default: 0,
+  },
+  multiWorld: {
+    type: Boolean,
+    default: false,
+  },
+  constrainResolution: {
+    type: Boolean,
+    default: false,
+  },
+  smoothResolutionConstraint: {
+    type: Boolean,
+    default: true,
+  },
+  showFullExtent: {
+    type: Boolean,
+    default: false,
+  },
+  projection: {
+    type: [String, Object],
+    default: "EPSG:3857",
+  },
+  resolution: {
+    type: Number,
+  },
+  resolutions: {
+    type: Array,
+  },
+  rotation: {
+    type: Number,
+  },
+  zoom: {
+    type: Number,
+    default: 0,
+  },
+  zoomFactor: {
+    type: Number,
+    default: 2,
+  },
+  padding: {
+    type: Array,
+    default: () => [0, 0, 0, 0],
+  },
+});
+
+const emit = defineEmits([
+  "centerChanged",
+  "zoomChanged",
+  "resolutionChanged",
+  "rotationChanged",
+]);
+const view = useView(props, emit);
+
+defineExpose({
+  ...view,
+});
+</script>
+
+<style lang=""></style>

src/components/map/View.vue

@@ -3,7 +3,7 @@ import OlGeoLocation from "./OlGeoLocation.vue";
 import OlMap from "./OlMap.vue";
 import OlOverlay from "./OlOverlay.vue";
 import OlProjectionRegister from "./OlProjectionRegister.vue";
-import View from "./View.vue";
+import OlView from "./OlView.vue";
 
 function install(app) {
   if (install.installed) {
@@ -17,7 +17,7 @@ function install(app) {
   app.component("ol-map", OlMap);
   app.component("ol-overlay", OlOverlay);
   app.component("ol-projection-register", OlProjectionRegister);
-  app.component(View.name, View);
+  app.component("ol-view", OlView);
 }
 
 export default install;
@@ -29,5 +29,5 @@ export {
   OlMap,
   OlOverlay,
   OlProjectionRegister,
-  View,
+  OlView,
 };

src/components/map/index.js

@@ -23,43 +23,29 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(8);
-    const rotation = ref(0);
 
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-    };
-  },
-  data() {
-    return {
-      currentCenter: this.center,
-      currentZoom: this.zoom,
-      currentResolution: this.resolution,
-      currentRotation: this.rotation,
-    };
-  },
-  methods: {
-    zoomChanged(currentZoom) {
-      this.currentZoom = currentZoom;
-    },
-    resolutionChanged(resolution) {
-      this.currentResolution = resolution;
-    },
-    centerChanged(center) {
-      this.currentCenter = center;
-    },
-    rotationChanged(rotation) {
-      this.currentRotation = rotation;
-    },
-  },
-};
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+const rotation = ref(0);
+
+const currentCenter = ref(0);
+const currentZoom = ref(0);
+const currentResolution = ref(0);
+const currentRotation = ref(0);
+
+function zoomChanged(z) {
+  currentZoom.value = z;
+}
+function resolutionChanged(r) {
+  currentResolution.value = r;
+}
+function centerChanged(c) {
+  currentCenter.value = c;
+}
+function rotationChanged(r) {
+  currentRotation.value = r;
+}
 </script>