Skip to content

Commit 8c0ef42

Browse files
d-koppenhagend-koppenhagen
committed
refactor(ol-attribution-control): migrate to script setup
1 parent 903f345 commit 8c0ef42

File tree

5 files changed

+176
-177
lines changed

5 files changed

+176
-177
lines changed

‎docs/componentsguide/mapcontrols/index.md‎

Lines changed: 90 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,63 @@ import MapControlDemo from "@demos/MapControlDemo.vue"
3131

3232
```vue
3333
<template>
34-
<input type="checkbox" id="fullscreencontrol" v-model="fullscreencontrol" />
35-
<label for="fullscreencontrol">fullscreencontrol</label>
36-
<input type="checkbox" id="attribution" v-model="attributioncontrol" />
37-
<label for="attribution">attributioncontrol</label>
38-
<input type="checkbox" id="zoom" v-model="zoomcontrol" />
39-
<label for="zoom">zoomcontrol</label>
40-
<input type="checkbox" id="zoomtoextent" v-model="zoomtoextentcontrol" />
41-
<label for="zoomtoextent">zoomtoextentcontrol</label>
42-
<input type="checkbox" id="zoomslider" v-model="zoomslidercontrol" />
43-
<label for="zoomslider">zoomslidercontrol</label>
44-
<input type="checkbox" id="scaleline" v-model="scalelinecontrol" />
45-
<label for="scaleline">scalelinecontrol</label>
46-
<input type="checkbox" id="overviewmap" v-model="overviewmapcontrol" />
47-
<label for="overviewmap">overviewmapcontrol</label>
48-
<input
49-
type="checkbox"
50-
id="mousepositioncontrol"
51-
v-model="mousepositioncontrol"
52-
/>
53-
<label for="mousepositioncontrol">mousepositioncontrol</label>
54-
<input type="checkbox" id="rotatecontrol" v-model="rotatecontrol" />
55-
<label for="rotatecontrol">rotatecontrol</label>
56-
<input type="checkbox" id="swipecontrol" v-model="showSwipeControl" />
57-
<label for="swipecontrol">swipe-control</label>
34+
<ul class="checkbox-list">
35+
<li>
36+
<input
37+
type="checkbox"
38+
id="fullscreencontrol"
39+
v-model="fullscreencontrol"
40+
/>
41+
<label for="fullscreencontrol">fullscreencontrol</label>
42+
</li>
43+
<li>
44+
<input type="checkbox" id="attribution" v-model="attributioncontrol" />
45+
<label for="attribution">attributioncontrol</label>
46+
</li>
47+
<li>
48+
<input type="checkbox" id="zoom" v-model="zoomcontrol" />
49+
<label for="zoom">zoomcontrol</label>
50+
</li>
51+
<li>
52+
<input type="checkbox" id="zoomtoextent" v-model="zoomtoextentcontrol" />
53+
<label for="zoomtoextent">zoomtoextentcontrol</label>
54+
</li>
55+
<li>
56+
<input type="checkbox" id="zoomslider" v-model="zoomslidercontrol" />
57+
<label for="zoomslider">zoomslidercontrol</label>
58+
</li>
59+
<li>
60+
<input type="checkbox" id="scaleline" v-model="scalelinecontrol" />
61+
<label for="scaleline">scalelinecontrol</label>
62+
</li>
63+
<li>
64+
<input type="checkbox" id="overviewmap" v-model="overviewmapcontrol" />
65+
<label for="overviewmap">overviewmapcontrol</label>
66+
</li>
67+
<li>
68+
<input
69+
type="checkbox"
70+
id="mousepositioncontrol"
71+
v-model="mousepositioncontrol"
72+
/>
73+
74+
<label for="mousepositioncontrol">mousepositioncontrol</label>
75+
</li>
76+
<li>
77+
<input type="checkbox" id="rotatecontrol" v-model="rotatecontrol" />
78+
<label for="rotatecontrol">rotatecontrol</label>
79+
</li>
80+
<li>
81+
<input type="checkbox" id="swipecontrol" v-model="showSwipeControl" />
82+
<label for="swipecontrol">swipe-control</label>
83+
</li>
84+
</ul>
5885
5986
<ol-map
6087
ref="map"
6188
:loadTilesWhileAnimating="true"
6289
:loadTilesWhileInteracting="true"
63-
style="height:400px"
90+
style="height: 400px"
6491
>
6592
<ol-view
6693
ref="view"
@@ -92,8 +119,8 @@ import MapControlDemo from "@demos/MapControlDemo.vue"
92119
93120
<ol-swipe-control
94121
ref="swipeControl"
95-
v-if="showSwipeControl"
96-
:layerList="layerList && layerList.length > 0"
122+
v-if="showSwipeControl && layerList.length > 0"
123+
:layerList="layerList"
97124
/>
98125
99126
<ol-tile-layer ref="jawgLayer" title="JAWG">
@@ -109,50 +136,42 @@ import MapControlDemo from "@demos/MapControlDemo.vue"
109136
</ol-map>
110137
</template>
111138
112-
<script>
139+
<script setup>
113140
import { ref, onMounted } from "vue";
114-
export default {
115-
setup() {
116-
const center = ref([40, 40]);
117-
const projection = ref("EPSG:4326");
118-
const zoom = ref(8);
119-
const rotation = ref(0);
120-
const layerList = ref([]);
121-
const jawgLayer = ref(null);
122-
const osmLayer = ref(null);
123-
const swipeControl = ref(null);
124-
125-
onMounted(() => {
126-
layerList.value.push(jawgLayer.value.tileLayer);
127-
layerList.value.push(osmLayer.value.tileLayer);
128-
console.log(layerList.value);
129-
});
130-
131-
return {
132-
center,
133-
projection,
134-
zoom,
135-
rotation,
136-
layerList,
137-
jawgLayer,
138-
osmLayer,
139-
swipeControl,
140-
};
141-
},
142-
data() {
143-
return {
144-
fullscreencontrol: true,
145-
attributioncontrol: true,
146-
zoomcontrol: true,
147-
zoomslidercontrol: true,
148-
zoomtoextentcontrol: true,
149-
scalelinecontrol: true,
150-
overviewmapcontrol: true,
151-
mousepositioncontrol: true,
152-
rotatecontrol: true,
153-
showSwipeControl: true,
154-
};
155-
},
156-
};
141+
const center = ref([40, 40]);
142+
const projection = ref("EPSG:4326");
143+
const zoom = ref(8);
144+
const rotation = ref(0);
145+
const layerList = ref([]);
146+
const jawgLayer = ref(null);
147+
const osmLayer = ref(null);
148+
const swipeControl = ref(null);
149+
150+
const fullscreencontrol = ref(true);
151+
const attributioncontrol = ref(true);
152+
const zoomcontrol = ref(true);
153+
const zoomslidercontrol = ref(true);
154+
const zoomtoextentcontrol = ref(true);
155+
const scalelinecontrol = ref(true);
156+
const overviewmapcontrol = ref(true);
157+
const mousepositioncontrol = ref(true);
158+
const rotatecontrol = ref(true);
159+
const showSwipeControl = ref(true);
160+
161+
onMounted(() => {
162+
layerList.value.push(jawgLayer.value.tileLayer);
163+
layerList.value.push(osmLayer.value.tileLayer);
164+
console.log(layerList.value);
165+
});
157166
</script>
167+
168+
<style>
169+
ul.checkbox-list {
170+
columns: 2;
171+
padding: 0;
172+
}
173+
ul.checkbox-list > li {
174+
list-style: none;
175+
}
176+
</style>
158177
```

‎src/components/mapControls/AttributionControl.vue‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/components/mapControls/OlAttributionControl.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template lang="">
2+
<div v-if="false"></div>
3+
</template>
4+
5+
<script setup>
6+
import { Attribution } from "ol/control";
7+
import useControl from "@/composables/useControl";
8+
import { useAttrs, useSlots } from "vue";
9+
10+
const props = defineProps({
11+
className: {
12+
type: String,
13+
default: "ol-attribution",
14+
},
15+
target: {
16+
type: HTMLElement,
17+
},
18+
collapsible: {
19+
type: Boolean,
20+
},
21+
collapsed: {
22+
type: Boolean,
23+
default: true,
24+
},
25+
tipLabel: {
26+
type: String,
27+
default: "Attributions",
28+
},
29+
30+
label: {
31+
type: String,
32+
default: "i",
33+
},
34+
expandClassName: {
35+
type: String,
36+
default: "ol-attribution-expand",
37+
},
38+
collapseLabel: {
39+
type: String,
40+
default: "»",
41+
},
42+
collapseClassName: {
43+
type: String,
44+
default: "ol-attribution-collapse",
45+
},
46+
render: {
47+
type: Function,
48+
},
49+
});
50+
51+
const attrs = useAttrs();
52+
const { control } = useControl(Attribution, props, { attrs });
53+
54+
defineExpose({
55+
control,
56+
});
57+
</script>
58+
59+
<style lang=""></style>

‎src/components/mapControls/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import OlAttributionControl from "./OlAttributionControl.vue";
12
import FullScreenControl from "./FullScreenControl.vue";
23
import MousePositionControl from "./MousePositionControl.vue";
3-
import AttributionControl from "./AttributionControl.vue";
44
import OverviewMapControl from "./OverviewMapControl.vue";
55
import ScaleLineControl from "./ScaleLineControl.vue";
66
import ZoomControl from "./ZoomControl.vue";
@@ -24,9 +24,9 @@ function install(app) {
2424

2525
install.installed = true;
2626

27+
app.component("ol-attribution-control", OlAttributionControl);
2728
app.component(FullScreenControl.name, FullScreenControl);
2829
app.component(MousePositionControl.name, MousePositionControl);
29-
app.component(AttributionControl.name, AttributionControl);
3030
app.component(OverviewMapControl.name, OverviewMapControl);
3131
app.component(ScaleLineControl.name, ScaleLineControl);
3232
app.component(ZoomControl.name, ZoomControl);
@@ -49,9 +49,9 @@ export default install;
4949

5050
export {
5151
install,
52+
OlAttributionControl,
5253
FullScreenControl,
5354
MousePositionControl,
54-
AttributionControl,
5555
OverviewMapControl,
5656
ScaleLineControl,
5757
ZoomControl,

0 commit comments

Comments
 (0)