Skip to content

Commit 24005ca

Browse files
glennmichael123glennmichael123
committed
chore: wip
1 parent d9dd92d commit 24005ca

File tree

9 files changed

+160
-238
lines changed

9 files changed

+160
-238
lines changed

‎playground/vue-samples/src/components/VectorMaps/Brasil.vue

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<template>
2-
<div class="brasil-map-container">
3-
<h3>Brasil Map</h3>
4-
<div class="map-info">
5-
<p><strong>Map Type:</strong> Brasil</p>
6-
<p><strong>Projection:</strong> Mercator</p>
7-
<p><strong>Features:</strong> Interactive states, zoom, data visualization</p>
8-
</div>
9-
<div class="map-demo">
10-
<VectorMap
11-
:options="mapOptions"
12-
map-name="brasil"
13-
height="400px"
14-
@region-click="handleRegionClick"
15-
@loaded="handleLoaded"
16-
/>
17-
</div>
18-
</div>
19-
</template>
20-
211
<script setup lang="ts">
222
import type { MapOptions } from 'ts-maps'
3+
import { VectorMap } from 'ts-maps-vue'
234
import { reactive } from 'vue'
24-
import { VectorMap } from '../../../../packages/vue/src'
255
266
const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
277
backgroundColor: '#f8f9fa',
@@ -52,16 +32,26 @@ const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
5232
},
5333
},
5434
})
55-
56-
function handleRegionClick(_event: MouseEvent, code: string) {
57-
console.log('Brasil Region clicked:', code)
58-
}
59-
60-
function handleLoaded() {
61-
console.log('Brasil Map loaded')
62-
}
6335
</script>
6436

37+
<template>
38+
<div class="brasil-map-container">
39+
<h3>Brasil Map</h3>
40+
<div class="map-info">
41+
<p><strong>Map Type:</strong> Brasil</p>
42+
<p><strong>Projection:</strong> Mercator</p>
43+
<p><strong>Features:</strong> Interactive states, zoom, data visualization</p>
44+
</div>
45+
<div class="map-demo">
46+
<VectorMap
47+
:options="mapOptions"
48+
map-name="brasil"
49+
height="400px"
50+
/>
51+
</div>
52+
</div>
53+
</template>
54+
6555
<style scoped>
6656
.brasil-map-container {
6757
padding: 20px;

‎playground/vue-samples/src/components/VectorMaps/Canada.vue

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<template>
2-
<div class="canada-map-container">
3-
<h3>Canada Map</h3>
4-
<div class="map-info">
5-
<p><strong>Map Type:</strong> Canada</p>
6-
<p><strong>Projection:</strong> Mercator</p>
7-
<p><strong>Features:</strong> Interactive provinces, zoom, data visualization</p>
8-
</div>
9-
<div class="map-demo">
10-
<VectorMap
11-
:options="mapOptions"
12-
map-name="canada"
13-
height="400px"
14-
@region-click="handleRegionClick"
15-
@loaded="handleLoaded"
16-
/>
17-
</div>
18-
</div>
19-
</template>
20-
211
<script setup lang="ts">
222
import type { MapOptions } from 'ts-maps'
3+
import { VectorMap } from 'ts-maps-vue'
234
import { reactive } from 'vue'
24-
import { VectorMap } from '../../../../packages/vue/src'
255
266
const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
277
backgroundColor: '#f8f9fa',
@@ -52,16 +32,26 @@ const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
5232
},
5333
},
5434
})
55-
56-
function handleRegionClick(_event: MouseEvent, code: string) {
57-
console.log('Canada Region clicked:', code)
58-
}
59-
60-
function handleLoaded() {
61-
console.log('Canada Map loaded')
62-
}
6335
</script>
6436

37+
<template>
38+
<div class="canada-map-container">
39+
<h3>Canada Map</h3>
40+
<div class="map-info">
41+
<p><strong>Map Type:</strong> Canada</p>
42+
<p><strong>Projection:</strong> Mercator</p>
43+
<p><strong>Features:</strong> Interactive provinces, zoom, data visualization</p>
44+
</div>
45+
<div class="map-demo">
46+
<VectorMap
47+
:options="mapOptions"
48+
map-name="canada"
49+
height="400px"
50+
/>
51+
</div>
52+
</div>
53+
</template>
54+
6555
<style scoped>
6656
.canada-map-container {
6757
padding: 20px;

‎playground/vue-samples/src/components/VectorMaps/Iraq.vue

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<template>
2-
<div class="iraq-map-container">
3-
<h3>Iraq Map</h3>
4-
<div class="map-info">
5-
<p><strong>Map Type:</strong> Iraq</p>
6-
<p><strong>Projection:</strong> Mercator</p>
7-
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
8-
</div>
9-
<div class="map-demo">
10-
<VectorMap
11-
:options="mapOptions"
12-
map-name="iraq"
13-
height="400px"
14-
@region-click="handleRegionClick"
15-
@loaded="handleLoaded"
16-
/>
17-
</div>
18-
</div>
19-
</template>
20-
211
<script setup lang="ts">
222
import type { MapOptions } from 'ts-maps'
3+
import { VectorMap } from 'ts-maps-vue'
234
import { reactive } from 'vue'
24-
import { VectorMap } from '../../../../packages/vue/src'
255
266
const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
277
backgroundColor: '#f8f9fa',
@@ -52,16 +32,28 @@ const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
5232
},
5333
},
5434
})
55-
56-
function handleRegionClick(_event: MouseEvent, code: string) {
57-
console.log('Iraq Region clicked:', code)
58-
}
59-
60-
function handleLoaded() {
61-
console.log('Iraq Map loaded')
62-
}
6335
</script>
6436

37+
<template>
38+
<div class="iraq-map-container">
39+
<h3>Iraq Map</h3>
40+
<div class="map-info">
41+
<p><strong>Map Type:</strong> Iraq</p>
42+
<p><strong>Projection:</strong> Mercator</p>
43+
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
44+
</div>
45+
<div class="map-demo">
46+
<VectorMap
47+
:options="mapOptions"
48+
map-name="iraq"
49+
height="400px"
50+
@region-click="handleRegionClick"
51+
@loaded="handleLoaded"
52+
/>
53+
</div>
54+
</div>
55+
</template>
56+
6557
<style scoped>
6658
.iraq-map-container {
6759
padding: 20px;

‎playground/vue-samples/src/components/VectorMaps/Italy.vue

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<template>
2-
<div class="italy-map-container">
3-
<h3>Italy Map</h3>
4-
<div class="map-info">
5-
<p><strong>Map Type:</strong> Italy</p>
6-
<p><strong>Projection:</strong> Mercator</p>
7-
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
8-
</div>
9-
<div class="map-demo">
10-
<VectorMap
11-
:options="mapOptions"
12-
map-name="italy"
13-
height="400px"
14-
@region-click="handleRegionClick"
15-
@loaded="handleLoaded"
16-
/>
17-
</div>
18-
</div>
19-
</template>
20-
211
<script setup lang="ts">
222
import type { MapOptions } from 'ts-maps'
3+
import { VectorMap } from 'ts-maps-vue'
234
import { reactive } from 'vue'
24-
import { VectorMap } from '../../../../packages/vue/src'
255
266
const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
277
backgroundColor: '#f8f9fa',
@@ -52,16 +32,26 @@ const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
5232
},
5333
},
5434
})
55-
56-
function handleRegionClick(_event: MouseEvent, code: string) {
57-
console.log('Italy Region clicked:', code)
58-
}
59-
60-
function handleLoaded() {
61-
console.log('Italy Map loaded')
62-
}
6335
</script>
6436

37+
<template>
38+
<div class="italy-map-container">
39+
<h3>Italy Map</h3>
40+
<div class="map-info">
41+
<p><strong>Map Type:</strong> Italy</p>
42+
<p><strong>Projection:</strong> Mercator</p>
43+
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
44+
</div>
45+
<div class="map-demo">
46+
<VectorMap
47+
:options="mapOptions"
48+
map-name="italy"
49+
height="400px"
50+
/>
51+
</div>
52+
</div>
53+
</template>
54+
6555
<style scoped>
6656
.italy-map-container {
6757
padding: 20px;

‎playground/vue-samples/src/components/VectorMaps/Russia.vue

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<template>
2-
<div class="russia-map-container">
3-
<h3>Russia Map</h3>
4-
<div class="map-info">
5-
<p><strong>Map Type:</strong> Russia</p>
6-
<p><strong>Projection:</strong> Mercator</p>
7-
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
8-
</div>
9-
<div class="map-demo">
10-
<VectorMap
11-
:options="mapOptions"
12-
map-name="russia"
13-
height="400px"
14-
@region-click="handleRegionClick"
15-
@loaded="handleLoaded"
16-
/>
17-
</div>
18-
</div>
19-
</template>
20-
211
<script setup lang="ts">
222
import type { MapOptions } from 'ts-maps'
3+
import { VectorMap } from 'ts-maps-vue'
234
import { reactive } from 'vue'
24-
import { VectorMap } from '../../../../packages/vue/src'
255
266
const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
277
backgroundColor: '#f8f9fa',
@@ -52,16 +32,26 @@ const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
5232
},
5333
},
5434
})
55-
56-
function handleRegionClick(_event: MouseEvent, code: string) {
57-
console.log('Russia Region clicked:', code)
58-
}
59-
60-
function handleLoaded() {
61-
console.log('Russia Map loaded')
62-
}
6335
</script>
6436

37+
<template>
38+
<div class="russia-map-container">
39+
<h3>Russia Map</h3>
40+
<div class="map-info">
41+
<p><strong>Map Type:</strong> Russia</p>
42+
<p><strong>Projection:</strong> Mercator</p>
43+
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
44+
</div>
45+
<div class="map-demo">
46+
<VectorMap
47+
:options="mapOptions"
48+
map-name="russia"
49+
height="400px"
50+
/>
51+
</div>
52+
</div>
53+
</template>
54+
6555
<style scoped>
6656
.russia-map-container {
6757
padding: 20px;

‎playground/vue-samples/src/components/VectorMaps/Spain.vue

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
<template>
2-
<div class="spain-map-container">
3-
<h3>Spain Map</h3>
4-
<div class="map-info">
5-
<p><strong>Map Type:</strong> Spain</p>
6-
<p><strong>Projection:</strong> Mercator</p>
7-
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
8-
</div>
9-
<div class="map-demo">
10-
<VectorMap
11-
:options="mapOptions"
12-
map-name="spain"
13-
height="400px"
14-
@region-click="handleRegionClick"
15-
@loaded="handleLoaded"
16-
/>
17-
</div>
18-
</div>
19-
</template>
20-
211
<script setup lang="ts">
222
import type { MapOptions } from 'ts-maps'
3+
import { VectorMap } from 'ts-maps-vue'
234
import { reactive } from 'vue'
24-
import { VectorMap } from '../../../../packages/vue/src'
255
266
const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
277
backgroundColor: '#f8f9fa',
@@ -52,16 +32,26 @@ const mapOptions = reactive<Omit<MapOptions, 'selector'>>({
5232
},
5333
},
5434
})
55-
56-
function handleRegionClick(_event: MouseEvent, code: string) {
57-
console.log('Spain Region clicked:', code)
58-
}
59-
60-
function handleLoaded() {
61-
console.log('Spain Map loaded')
62-
}
6335
</script>
6436

37+
<template>
38+
<div class="spain-map-container">
39+
<h3>Spain Map</h3>
40+
<div class="map-info">
41+
<p><strong>Map Type:</strong> Spain</p>
42+
<p><strong>Projection:</strong> Mercator</p>
43+
<p><strong>Features:</strong> Interactive regions, zoom, data visualization</p>
44+
</div>
45+
<div class="map-demo">
46+
<VectorMap
47+
:options="mapOptions"
48+
map-name="spain"
49+
height="400px"
50+
/>
51+
</div>
52+
</div>
53+
</template>
54+
6555
<style scoped>
6656
.spain-map-container {
6757
padding: 20px;

0 commit comments

Comments
 (0)