@swr-data-lab/components 1.13.1 → 1.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -4
- package/dist/Autocomplete/Autocomplete.stories.svelte +0 -61
- package/dist/Autocomplete/Autocomplete.stories.svelte.d.ts +0 -27
- package/dist/Button/Button.stories.svelte +0 -19
- package/dist/Button/Button.stories.svelte.d.ts +0 -19
- package/dist/Caption/Caption.stories.svelte +0 -24
- package/dist/Caption/Caption.stories.svelte.d.ts +0 -27
- package/dist/Card/Card.stories.svelte +0 -17
- package/dist/Card/Card.stories.svelte.d.ts +0 -19
- package/dist/ChartFooter/ChartFooter.stories.svelte +0 -32
- package/dist/ChartFooter/ChartFooter.stories.svelte.d.ts +0 -27
- package/dist/ChartHeader/ChartHeader.stories.svelte +0 -31
- package/dist/ChartHeader/ChartHeader.stories.svelte.d.ts +0 -27
- package/dist/ChartList/ChartList.stories.svelte +0 -48
- package/dist/ChartList/ChartList.stories.svelte.d.ts +0 -27
- package/dist/Copy/Copy.stories.svelte +0 -32
- package/dist/Copy/Copy.stories.svelte.d.ts +0 -27
- package/dist/FormLabel/FormLabel.stories.svelte +0 -52
- package/dist/FormLabel/FormLabel.stories.svelte.d.ts +0 -27
- package/dist/Headline/Headline.stories.svelte +0 -17
- package/dist/Headline/Headline.stories.svelte.d.ts +0 -27
- package/dist/HighlightCard/HighlightCard.stories.svelte +0 -55
- package/dist/HighlightCard/HighlightCard.stories.svelte.d.ts +0 -19
- package/dist/Logotype/Logotype.stories.svelte +0 -14
- package/dist/Logotype/Logotype.stories.svelte.d.ts +0 -19
- package/dist/Middot/Middot.stories.svelte +0 -14
- package/dist/Middot/Middot.stories.svelte.d.ts +0 -19
- package/dist/Note/Note.stories.svelte +0 -23
- package/dist/Note/Note.stories.svelte.d.ts +0 -27
- package/dist/Select/Select.stories.svelte +0 -202
- package/dist/Select/Select.stories.svelte.d.ts +0 -19
- package/dist/Select/SelectStoriesTemplate.svelte +0 -31
- package/dist/Select/SelectStoriesTemplate.svelte.d.ts +0 -15
- package/dist/Switcher/Switcher.stories.svelte +0 -44
- package/dist/Switcher/Switcher.stories.svelte.d.ts +0 -27
- package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte +0 -27
- package/dist/maplibre/AttributionControl/AttributionControl.stories.svelte.d.ts +0 -19
- package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte +0 -74
- package/dist/maplibre/GeocoderControl/GeocoderControl.stories.svelte.d.ts +0 -19
- package/dist/maplibre/Map/Map.stories.svelte +0 -113
- package/dist/maplibre/Map/Map.stories.svelte.d.ts +0 -19
- package/dist/maplibre/MapControl/MapControl.stories.svelte +0 -46
- package/dist/maplibre/MapControl/MapControl.stories.svelte.d.ts +0 -19
- package/dist/maplibre/MapStyle/SWRDataLabLight.stories.svelte +0 -39
- package/dist/maplibre/MapStyle/SWRDataLabLight.stories.svelte.d.ts +0 -18
- package/dist/maplibre/NavigationControl/NavigationControl.stories.svelte +0 -37
- package/dist/maplibre/NavigationControl/NavigationControl.stories.svelte.d.ts +0 -19
- package/dist/maplibre/ScaleControl/ScaleControl.stories.svelte +0 -68
- package/dist/maplibre/ScaleControl/ScaleControl.stories.svelte.d.ts +0 -19
- package/dist/maplibre/Source/MapSource.stories.svelte +0 -7
- package/dist/maplibre/Source/MapSource.stories.svelte.d.ts +0 -19
- package/dist/maplibre/Tooltip/Tooltip.stories.svelte +0 -186
- package/dist/maplibre/Tooltip/Tooltip.stories.svelte.d.ts +0 -19
- package/dist/maplibre/VectorLayer/VectorLayer.stories.svelte +0 -62
- package/dist/maplibre/VectorLayer/VectorLayer.stories.svelte.d.ts +0 -19
- package/dist/maplibre/VectorTileSource/VectorTileSource.stories.svelte +0 -44
- package/dist/maplibre/VectorTileSource/VectorTileSource.stories.svelte.d.ts +0 -19
- package/dist/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte +0 -27
- package/dist/maplibre/WithLinkLocation/WithLinkLocation.stories.svelte.d.ts +0 -19
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import GeocoderControl from './GeocoderControl.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const GeocoderControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type GeocoderControl = InstanceType<typeof GeocoderControl>;
|
|
19
|
-
export default GeocoderControl;
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
2
|
-
import { within, expect } from 'storybook/test';
|
|
3
|
-
import Map from './Map.svelte';
|
|
4
|
-
import ScaleControl from '../ScaleControl/ScaleControl.svelte';
|
|
5
|
-
import NavigationControl from '../NavigationControl/NavigationControl.svelte';
|
|
6
|
-
import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
|
|
7
|
-
import AttributionControl from '../AttributionControl/AttributionControl.svelte';
|
|
8
|
-
import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
|
|
9
|
-
import { SWRDataLabLight } from '../MapStyle';
|
|
10
|
-
import { eclipse } from '@versatiles/style';
|
|
11
|
-
const alternateStyle = eclipse({
|
|
12
|
-
language: 'de',
|
|
13
|
-
baseUrl: 'https://tiles.versatiles.org',
|
|
14
|
-
glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
|
|
15
|
-
});
|
|
16
|
-
const { Story } = defineMeta({
|
|
17
|
-
title: 'Maplibre/Map',
|
|
18
|
-
component: Map
|
|
19
|
-
});
|
|
20
|
-
</script>
|
|
21
|
-
|
|
22
|
-
<Story
|
|
23
|
-
asChild
|
|
24
|
-
name="Default"
|
|
25
|
-
play={async ({ canvasElement, step }) => {
|
|
26
|
-
const canvas = within(canvasElement);
|
|
27
|
-
const containerEl = canvas.getByTestId('map-container');
|
|
28
|
-
|
|
29
|
-
await step('Map canvas renders', async () => {
|
|
30
|
-
const mapEl = containerEl.querySelector('.maplibregl-canvas');
|
|
31
|
-
expect(mapEl).toBeTruthy();
|
|
32
|
-
});
|
|
33
|
-
await step('Scale control renders', async () => {
|
|
34
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-scale');
|
|
35
|
-
expect(el).toBeTruthy();
|
|
36
|
-
});
|
|
37
|
-
await step('Scale renders expected value', async () => {
|
|
38
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-scale');
|
|
39
|
-
expect(el).toHaveTextContent('100 km');
|
|
40
|
-
});
|
|
41
|
-
await step('Navigation control renders', async () => {
|
|
42
|
-
const zoomInEl = containerEl.querySelector('.maplibregl-ctrl-zoom-in');
|
|
43
|
-
const zoomOutEl = containerEl.querySelector('.maplibregl-ctrl-zoom-out');
|
|
44
|
-
expect(zoomInEl).toBeTruthy();
|
|
45
|
-
expect(zoomInEl).toHaveRole('button');
|
|
46
|
-
expect(zoomOutEl).toBeTruthy();
|
|
47
|
-
expect(zoomOutEl).toHaveRole('button');
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
await step('Attribution control renders', async () => {
|
|
51
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-attrib');
|
|
52
|
-
expect(el).toBeTruthy();
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
await step('Geocoder control renders', async () => {
|
|
56
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-geocoder');
|
|
57
|
-
expect(el).toBeTruthy();
|
|
58
|
-
});
|
|
59
|
-
}}
|
|
60
|
-
>
|
|
61
|
-
<div class="container">
|
|
62
|
-
<DesignTokens>
|
|
63
|
-
<Map style={SWRDataLabLight}>
|
|
64
|
-
<ScaleControl />
|
|
65
|
-
<AttributionControl />
|
|
66
|
-
<NavigationControl showCompass visualizePitch />
|
|
67
|
-
<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
|
|
68
|
-
</Map>
|
|
69
|
-
</DesignTokens>
|
|
70
|
-
</div>
|
|
71
|
-
</Story>
|
|
72
|
-
|
|
73
|
-
<Story asChild name="Globe Projection">
|
|
74
|
-
<div class="container dark">
|
|
75
|
-
<DesignTokens>
|
|
76
|
-
<Map
|
|
77
|
-
style={SWRDataLabLight}
|
|
78
|
-
showDebug
|
|
79
|
-
projection={{ type: 'globe' }}
|
|
80
|
-
pitch={52}
|
|
81
|
-
initialLocation={{ lat: 51.3, lng: 10.2, zoom: 3.5 }}
|
|
82
|
-
>
|
|
83
|
-
<ScaleControl />
|
|
84
|
-
<AttributionControl />
|
|
85
|
-
<NavigationControl showCompass visualizePitch />
|
|
86
|
-
<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
|
|
87
|
-
</Map>
|
|
88
|
-
</DesignTokens>
|
|
89
|
-
</div>
|
|
90
|
-
</Story>
|
|
91
|
-
|
|
92
|
-
<Story asChild name="Alternate Style">
|
|
93
|
-
<div class="container dark">
|
|
94
|
-
<DesignTokens>
|
|
95
|
-
<Map style={alternateStyle}>
|
|
96
|
-
<ScaleControl />
|
|
97
|
-
<AttributionControl />
|
|
98
|
-
<NavigationControl showCompass visualizePitch />
|
|
99
|
-
<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
|
|
100
|
-
</Map>
|
|
101
|
-
</DesignTokens>
|
|
102
|
-
</div>
|
|
103
|
-
</Story>
|
|
104
|
-
|
|
105
|
-
<style>
|
|
106
|
-
.container {
|
|
107
|
-
width: 100%;
|
|
108
|
-
height: 600px;
|
|
109
|
-
}
|
|
110
|
-
.dark {
|
|
111
|
-
color: rgb(230, 230, 230);
|
|
112
|
-
}
|
|
113
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import Map from './Map.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const Map: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type Map = InstanceType<typeof Map>;
|
|
19
|
-
export default Map;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
2
|
-
import MapControl from './MapControl.svelte';
|
|
3
|
-
import { SWRDataLabLight } from '../MapStyle';
|
|
4
|
-
import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
|
|
5
|
-
import Switcher from '../../Switcher/Switcher.svelte';
|
|
6
|
-
import Map from '../Map/Map.svelte';
|
|
7
|
-
import { eclipse } from '@versatiles/style';
|
|
8
|
-
const eclipseStyle = eclipse({
|
|
9
|
-
language: 'de',
|
|
10
|
-
baseUrl: 'https://tiles.versatiles.org',
|
|
11
|
-
glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf'
|
|
12
|
-
});
|
|
13
|
-
const { Story } = defineMeta({
|
|
14
|
-
title: 'Maplibre/Control/MapControl',
|
|
15
|
-
component: MapControl
|
|
16
|
-
});
|
|
17
|
-
const themes = {
|
|
18
|
-
'SWRDL Light': SWRDataLabLight,
|
|
19
|
-
Eclipse: eclipseStyle
|
|
20
|
-
};
|
|
21
|
-
let currentTheme = $state('SWRDL Light');
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
|
-
<Story asChild name="Custom HTML Control">
|
|
25
|
-
<DesignTokens>
|
|
26
|
-
<div class="container">
|
|
27
|
-
<Map style={themes[currentTheme]} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
|
|
28
|
-
<MapControl position="top-left">
|
|
29
|
-
<Switcher
|
|
30
|
-
options={Object.keys(themes)}
|
|
31
|
-
bind:value={currentTheme}
|
|
32
|
-
label="Select theme"
|
|
33
|
-
size="small"
|
|
34
|
-
/>
|
|
35
|
-
</MapControl>
|
|
36
|
-
</Map>
|
|
37
|
-
</div>
|
|
38
|
-
</DesignTokens>
|
|
39
|
-
</Story>
|
|
40
|
-
|
|
41
|
-
<style>
|
|
42
|
-
.container {
|
|
43
|
-
width: 500px;
|
|
44
|
-
height: 300px;
|
|
45
|
-
}
|
|
46
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import MapControl from './MapControl.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const MapControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type MapControl = InstanceType<typeof MapControl>;
|
|
19
|
-
export default MapControl;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
2
|
-
import Map from '../Map/Map.svelte';
|
|
3
|
-
import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
|
|
4
|
-
import AttributionControl from '../AttributionControl/AttributionControl.svelte';
|
|
5
|
-
import GeocoderControl from '../GeocoderControl/GeocoderControl.svelte';
|
|
6
|
-
import { SWRDataLabLight } from './index';
|
|
7
|
-
const { Story } = defineMeta({
|
|
8
|
-
title: 'Maplibre/Style/SWR Data Lab Light',
|
|
9
|
-
component: Map
|
|
10
|
-
});
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<Story asChild name="Default">
|
|
14
|
-
<DesignTokens>
|
|
15
|
-
<div class="grid">
|
|
16
|
-
<div class="container">
|
|
17
|
-
<Map
|
|
18
|
-
style={SWRDataLabLight}
|
|
19
|
-
initialLocation={{ lng: 8.239451072800875, lat: 48.75692609731408, zoom: 14.99 }}
|
|
20
|
-
>
|
|
21
|
-
<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
|
|
22
|
-
<AttributionControl position="bottom-left" />
|
|
23
|
-
</Map>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</DesignTokens>
|
|
27
|
-
</Story>
|
|
28
|
-
|
|
29
|
-
<style>
|
|
30
|
-
.grid {
|
|
31
|
-
display: grid;
|
|
32
|
-
grid-template-columns: repeat(1, 1fr);
|
|
33
|
-
grid-template-rows: auto;
|
|
34
|
-
height: 700px;
|
|
35
|
-
}
|
|
36
|
-
.container {
|
|
37
|
-
overflow: hidden;
|
|
38
|
-
}
|
|
39
|
-
</style>
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
-
$$bindings?: Bindings;
|
|
4
|
-
} & Exports;
|
|
5
|
-
(internal: unknown, props: {
|
|
6
|
-
$$events?: Events;
|
|
7
|
-
$$slots?: Slots;
|
|
8
|
-
}): Exports & {
|
|
9
|
-
$set?: any;
|
|
10
|
-
$on?: any;
|
|
11
|
-
};
|
|
12
|
-
z_$$bindings?: Bindings;
|
|
13
|
-
}
|
|
14
|
-
declare const SwrDataLabLight: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
}, {}, {}, string>;
|
|
17
|
-
type SwrDataLabLight = InstanceType<typeof SwrDataLabLight>;
|
|
18
|
-
export default SwrDataLabLight;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
2
|
-
import NavigationControl from './NavigationControl.svelte';
|
|
3
|
-
import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
|
|
4
|
-
import { SWRDataLabLight } from '../MapStyle';
|
|
5
|
-
import Map from '../Map/Map.svelte';
|
|
6
|
-
const { Story } = defineMeta({
|
|
7
|
-
title: 'Maplibre/Control/NavigationControl',
|
|
8
|
-
component: NavigationControl
|
|
9
|
-
});
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<Story asChild name="Default">
|
|
13
|
-
<DesignTokens>
|
|
14
|
-
<div class="container">
|
|
15
|
-
<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
|
|
16
|
-
<NavigationControl />
|
|
17
|
-
</Map>
|
|
18
|
-
</div>
|
|
19
|
-
</DesignTokens>
|
|
20
|
-
</Story>
|
|
21
|
-
|
|
22
|
-
<Story asChild name="With compass">
|
|
23
|
-
<DesignTokens>
|
|
24
|
-
<div class="container">
|
|
25
|
-
<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
|
|
26
|
-
<NavigationControl showCompass visualizePitch />
|
|
27
|
-
</Map>
|
|
28
|
-
</div>
|
|
29
|
-
</DesignTokens>
|
|
30
|
-
</Story>
|
|
31
|
-
|
|
32
|
-
<style>
|
|
33
|
-
.container {
|
|
34
|
-
width: 500px;
|
|
35
|
-
height: 200px;
|
|
36
|
-
}
|
|
37
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import NavigationControl from './NavigationControl.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const NavigationControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type NavigationControl = InstanceType<typeof NavigationControl>;
|
|
19
|
-
export default NavigationControl;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
2
|
-
import { within, expect } from 'storybook/test';
|
|
3
|
-
import ScaleControl from './ScaleControl.svelte';
|
|
4
|
-
import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
|
|
5
|
-
import Map from '../Map/Map.svelte';
|
|
6
|
-
import { SWRDataLabLight } from '../MapStyle';
|
|
7
|
-
const { Story } = defineMeta({
|
|
8
|
-
title: 'Maplibre/Control/ScaleControl',
|
|
9
|
-
component: ScaleControl
|
|
10
|
-
});
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<Story
|
|
14
|
-
asChild
|
|
15
|
-
name="Default"
|
|
16
|
-
play={async ({ canvasElement, step }) => {
|
|
17
|
-
const canvas = within(canvasElement);
|
|
18
|
-
const containerEl = canvas.getByTestId('map-container');
|
|
19
|
-
await step('Scale control renders', async () => {
|
|
20
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-scale');
|
|
21
|
-
expect(el).toBeTruthy();
|
|
22
|
-
});
|
|
23
|
-
await step('Distance is rendered in metric units', async () => {
|
|
24
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-scale');
|
|
25
|
-
expect(el).toHaveTextContent('100 m');
|
|
26
|
-
});
|
|
27
|
-
}}
|
|
28
|
-
>
|
|
29
|
-
<DesignTokens>
|
|
30
|
-
<div class="container">
|
|
31
|
-
<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
|
|
32
|
-
<ScaleControl />
|
|
33
|
-
</Map>
|
|
34
|
-
</div>
|
|
35
|
-
</DesignTokens>
|
|
36
|
-
</Story>
|
|
37
|
-
|
|
38
|
-
<Story
|
|
39
|
-
asChild
|
|
40
|
-
name="Imperial units"
|
|
41
|
-
play={async ({ canvasElement, step }) => {
|
|
42
|
-
const canvas = within(canvasElement);
|
|
43
|
-
const containerEl = canvas.getByTestId('map-container');
|
|
44
|
-
await step('Scale control renders', async () => {
|
|
45
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-scale');
|
|
46
|
-
expect(el).toBeTruthy();
|
|
47
|
-
});
|
|
48
|
-
await step('Distance is rendered in imperial units', async () => {
|
|
49
|
-
const el = containerEl.querySelector('.maplibregl-ctrl-scale');
|
|
50
|
-
expect(el).toHaveTextContent('300 ft');
|
|
51
|
-
});
|
|
52
|
-
}}
|
|
53
|
-
>
|
|
54
|
-
<DesignTokens>
|
|
55
|
-
<div class="container">
|
|
56
|
-
<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
|
|
57
|
-
<ScaleControl unit="imperial" />
|
|
58
|
-
</Map>
|
|
59
|
-
</div>
|
|
60
|
-
</DesignTokens>
|
|
61
|
-
</Story>
|
|
62
|
-
|
|
63
|
-
<style>
|
|
64
|
-
.container {
|
|
65
|
-
width: 500px;
|
|
66
|
-
height: 200px;
|
|
67
|
-
}
|
|
68
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import ScaleControl from './ScaleControl.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const ScaleControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type ScaleControl = InstanceType<typeof ScaleControl>;
|
|
19
|
-
export default ScaleControl;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import MapSource from './MapSource.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const MapSource: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type MapSource = InstanceType<typeof MapSource>;
|
|
19
|
-
export default MapSource;
|
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
2
|
-
import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
|
|
3
|
-
import Map from '../Map/Map.svelte';
|
|
4
|
-
import VectorTileSource from '../VectorTileSource/VectorTileSource.svelte';
|
|
5
|
-
import VectorLayer from '../VectorLayer/VectorLayer.svelte';
|
|
6
|
-
import AttributionControl from '../AttributionControl/AttributionControl.svelte';
|
|
7
|
-
import Tooltip from './Tooltip.svelte';
|
|
8
|
-
import { SWRDataLabLight } from '../MapStyle';
|
|
9
|
-
const { Story } = defineMeta({
|
|
10
|
-
title: 'Maplibre/Extras/Tooltip',
|
|
11
|
-
component: Tooltip
|
|
12
|
-
});
|
|
13
|
-
let hovered = $state();
|
|
14
|
-
let hovered2 = $state();
|
|
15
|
-
let hoverCoords = $state([0, 0]);
|
|
16
|
-
let selected = $state();
|
|
17
|
-
let selectCoords = $state([0, 0]);
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
<Story asChild name="Default">
|
|
21
|
-
<DesignTokens>
|
|
22
|
-
<div class="container">
|
|
23
|
-
<Map
|
|
24
|
-
style={SWRDataLabLight}
|
|
25
|
-
initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
|
|
26
|
-
allowZoom={false}
|
|
27
|
-
>
|
|
28
|
-
<VectorTileSource
|
|
29
|
-
id="ev-infra-source"
|
|
30
|
-
url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
|
|
31
|
-
/>
|
|
32
|
-
<VectorLayer
|
|
33
|
-
sourceId="ev-infra-source"
|
|
34
|
-
type="fill"
|
|
35
|
-
id="coverage-fill"
|
|
36
|
-
sourceLayer="coverage"
|
|
37
|
-
placeBelow="street-residential"
|
|
38
|
-
onmousemove={(e) => {
|
|
39
|
-
hovered = e.features?.[0];
|
|
40
|
-
hoverCoords = e.lngLat;
|
|
41
|
-
}}
|
|
42
|
-
onmouseleave={() => (hovered = undefined)}
|
|
43
|
-
paint={{
|
|
44
|
-
'fill-color': ['step', ['get', 'coverage_2025'], 'white', 1, '#ffcfcc', 1.3, '#FF4D20']
|
|
45
|
-
}}
|
|
46
|
-
/>
|
|
47
|
-
<VectorLayer
|
|
48
|
-
{hovered}
|
|
49
|
-
sourceId="ev-infra-source"
|
|
50
|
-
sourceLayer="coverage"
|
|
51
|
-
id="ev-infra-outline"
|
|
52
|
-
placeBelow="label-place-city"
|
|
53
|
-
type="line"
|
|
54
|
-
layout={{
|
|
55
|
-
'line-join': 'round'
|
|
56
|
-
}}
|
|
57
|
-
paint={{
|
|
58
|
-
'line-width': [
|
|
59
|
-
'case',
|
|
60
|
-
['any', ['boolean', ['feature-state', 'hovered'], false]],
|
|
61
|
-
1.5,
|
|
62
|
-
0.5
|
|
63
|
-
],
|
|
64
|
-
'line-color': [
|
|
65
|
-
'case',
|
|
66
|
-
['any', ['boolean', ['feature-state', 'hovered'], false]],
|
|
67
|
-
'#000',
|
|
68
|
-
'#555'
|
|
69
|
-
],
|
|
70
|
-
'line-opacity': 1
|
|
71
|
-
}}
|
|
72
|
-
/>
|
|
73
|
-
|
|
74
|
-
{#if hovered}
|
|
75
|
-
<Tooltip
|
|
76
|
-
position={hoverCoords}
|
|
77
|
-
mouseEvents={false}
|
|
78
|
-
showCloseButton={false}
|
|
79
|
-
closeOnClick={false}
|
|
80
|
-
>
|
|
81
|
-
<pre>{Object.entries(hovered.properties)
|
|
82
|
-
.map(([key, val]) => `${key}: ${val}`)
|
|
83
|
-
.join('\n')}</pre>
|
|
84
|
-
</Tooltip>
|
|
85
|
-
{/if}
|
|
86
|
-
<AttributionControl position="bottom-left" />
|
|
87
|
-
</Map>
|
|
88
|
-
</div>
|
|
89
|
-
</DesignTokens>
|
|
90
|
-
</Story>
|
|
91
|
-
|
|
92
|
-
<Story asChild name="Show on Click">
|
|
93
|
-
<DesignTokens>
|
|
94
|
-
<div class="container">
|
|
95
|
-
<Map
|
|
96
|
-
style={SWRDataLabLight}
|
|
97
|
-
initialLocation={{ lat: 51, lng: 10, zoom: 8 }}
|
|
98
|
-
allowZoom={false}
|
|
99
|
-
>
|
|
100
|
-
<VectorTileSource
|
|
101
|
-
id="ev-infra-source"
|
|
102
|
-
url={`https://static.datenhub.net/data/p108_e_auto_check/ev_infra_merged.versatiles?tiles/{z}/{x}/{y}`}
|
|
103
|
-
/>
|
|
104
|
-
<VectorLayer
|
|
105
|
-
sourceId="ev-infra-source"
|
|
106
|
-
type="fill"
|
|
107
|
-
id="coverage-fill"
|
|
108
|
-
sourceLayer="coverage"
|
|
109
|
-
placeBelow="street-residential"
|
|
110
|
-
onmousemove={(e) => {
|
|
111
|
-
hovered2 = e.features?.[0];
|
|
112
|
-
}}
|
|
113
|
-
onclick={(e) => {
|
|
114
|
-
selected = e.features?.[0];
|
|
115
|
-
selectCoords = e.lngLat;
|
|
116
|
-
}}
|
|
117
|
-
onmouseleave={() => (hovered2 = undefined)}
|
|
118
|
-
paint={{
|
|
119
|
-
'fill-color': ['step', ['get', 'coverage_2025'], 'white', 1, '#CCDCFF', 1.3, '#6280E5']
|
|
120
|
-
}}
|
|
121
|
-
/>
|
|
122
|
-
<VectorLayer
|
|
123
|
-
hovered={hovered2}
|
|
124
|
-
{selected}
|
|
125
|
-
sourceId="ev-infra-source"
|
|
126
|
-
sourceLayer="coverage"
|
|
127
|
-
id="ev-infra-outline"
|
|
128
|
-
placeBelow="label-place-city"
|
|
129
|
-
type="line"
|
|
130
|
-
layout={{
|
|
131
|
-
'line-join': 'round'
|
|
132
|
-
}}
|
|
133
|
-
paint={{
|
|
134
|
-
'line-width': [
|
|
135
|
-
'case',
|
|
136
|
-
[
|
|
137
|
-
'any',
|
|
138
|
-
['boolean', ['feature-state', 'hovered'], false],
|
|
139
|
-
['boolean', ['feature-state', 'selected'], false]
|
|
140
|
-
],
|
|
141
|
-
2,
|
|
142
|
-
0.5
|
|
143
|
-
],
|
|
144
|
-
'line-color': [
|
|
145
|
-
'case',
|
|
146
|
-
[
|
|
147
|
-
'any',
|
|
148
|
-
['boolean', ['feature-state', 'hovered'], false],
|
|
149
|
-
['boolean', ['feature-state', 'selected'], false]
|
|
150
|
-
],
|
|
151
|
-
'#000',
|
|
152
|
-
'#555'
|
|
153
|
-
],
|
|
154
|
-
'line-opacity': 1
|
|
155
|
-
}}
|
|
156
|
-
/>
|
|
157
|
-
{#if selected}
|
|
158
|
-
<Tooltip
|
|
159
|
-
position={selectCoords}
|
|
160
|
-
mouseEvents={true}
|
|
161
|
-
showCloseButton={true}
|
|
162
|
-
onClose={() => {
|
|
163
|
-
selected = undefined;
|
|
164
|
-
}}
|
|
165
|
-
>
|
|
166
|
-
<pre class="padRight">{Object.entries(selected.properties)
|
|
167
|
-
.map(([key, val]) => `${key}: ${val}`)
|
|
168
|
-
.join('\n')}</pre>
|
|
169
|
-
</Tooltip>
|
|
170
|
-
{/if}
|
|
171
|
-
<AttributionControl position="bottom-left" />
|
|
172
|
-
</Map>
|
|
173
|
-
</div>
|
|
174
|
-
</DesignTokens>
|
|
175
|
-
</Story>
|
|
176
|
-
|
|
177
|
-
<style>
|
|
178
|
-
.container {
|
|
179
|
-
width: 100%;
|
|
180
|
-
height: 600px;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.padRight {
|
|
184
|
-
padding-right: 2.5em;
|
|
185
|
-
}
|
|
186
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import Tooltip from './Tooltip.svelte';
|
|
2
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
-
$$bindings?: Bindings;
|
|
5
|
-
} & Exports;
|
|
6
|
-
(internal: unknown, props: {
|
|
7
|
-
$$events?: Events;
|
|
8
|
-
$$slots?: Slots;
|
|
9
|
-
}): Exports & {
|
|
10
|
-
$set?: any;
|
|
11
|
-
$on?: any;
|
|
12
|
-
};
|
|
13
|
-
z_$$bindings?: Bindings;
|
|
14
|
-
}
|
|
15
|
-
declare const Tooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
}, {}, {}, string>;
|
|
18
|
-
type Tooltip = InstanceType<typeof Tooltip>;
|
|
19
|
-
export default Tooltip;
|