@versatiles/svelte 0.1.0 → 0.1.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.
Files changed (7) hide show
  1. package/dist/components/AutoComplete.svelte +110 -77
  2. package/dist/components/AutoComplete.svelte.d.ts +16 -7
  3. package/dist/components/BBoxMap/BBoxMap.svelte +125 -99
  4. package/dist/components/BBoxMap/BBoxMap.svelte.d.ts +18 -16
  5. package/dist/components/BasicMap/BasicMap.svelte +37 -25
  6. package/dist/components/BasicMap/BasicMap.svelte.d.ts +24 -22
  7. package/package.json +19 -17
package/dist/components/AutoComplete.svelte CHANGED
@@ -1,81 +1,114 @@
1
1
  <!-- AutoComplete.svelte -->
2
- <script generics="T">import { isDarkMode } from "../utils/style.js";
3
- import { createEventDispatcher, onMount } from "svelte";
4
- const dispatch = createEventDispatcher();
5
- export let placeholder = "";
6
- export let minChar = 0;
7
- export let maxItems = 10;
8
- export let initialText = "";
9
- export let items;
10
- let inputElement;
11
- let autocompleteElement;
12
- let isOpen = false;
13
- let results = [];
14
- let inputText = initialText;
15
- let selectedIndex = 0;
16
- const regExpEscape = (s) => s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
17
- if (inputText.length >= minChar) {
18
- const r = filterResults();
19
- if (r.length > 0) {
20
- const { key, value } = r[0];
21
- inputText = key;
22
- setTimeout(() => dispatch("change", JSON.parse(JSON.stringify(value))), 0);
23
- } else {
24
- inputText = "";
25
- }
26
- }
27
- function onChange() {
28
- if (inputText.length >= minChar) {
29
- results = filterResults();
30
- selectedIndex = 0;
31
- isOpen = true;
32
- } else {
33
- isOpen = false;
34
- }
35
- }
36
- function onFocus() {
37
- inputElement.setSelectionRange(0, 1e3);
38
- }
39
- function filterResults() {
40
- const searchText = inputText.trim();
41
- const searchTextUpper = searchText.toUpperCase();
42
- const searchReg = RegExp(regExpEscape(searchText), "i");
43
- return items.filter((item) => item.key.toUpperCase().includes(searchTextUpper)).slice(0, maxItems).map((item) => ({
44
- ...item,
45
- _label: item.key.replace(searchReg, "<span>$&</span>")
46
- }));
47
- }
48
- function onKeyDown(event) {
49
- switch (event.key) {
50
- case "ArrowDown":
51
- if (selectedIndex < results.length - 1) selectedIndex += 1;
52
- break;
53
- case "ArrowUp":
54
- if (selectedIndex > 0) selectedIndex -= 1;
55
- break;
56
- case "Enter":
57
- event.preventDefault();
58
- close(selectedIndex);
59
- break;
60
- case "Escape":
61
- event.preventDefault();
62
- close();
63
- break;
64
- }
65
- }
66
- function close(index = -1) {
67
- isOpen = false;
68
- if (index > -1 && results[index]) {
69
- const { key, value } = results[index];
70
- inputText = key;
71
- dispatch("change", JSON.parse(JSON.stringify(value)));
72
- }
73
- }
74
- onMount(() => {
75
- const darkMode = isDarkMode(autocompleteElement);
76
- autocompleteElement.style.setProperty("--bg-color", darkMode ? "#000" : "#fff");
77
- autocompleteElement.style.setProperty("--fg-color", darkMode ? "#fff" : "#000");
78
- });
2
+ <script lang="ts" generics="T">
3
+ import { isDarkMode } from '../utils/style.js';
4
+ /* eslint svelte/no-at-html-tags: off */
5
+
6
+ import { createEventDispatcher, onMount } from 'svelte';
7
+ const dispatch = createEventDispatcher();
8
+
9
+ type Item = { key: string; value: T };
10
+ type ResultItem = Item & { _label: string };
11
+
12
+ // Component properties
13
+ export let placeholder: string = '';
14
+ export let minChar: number = 0;
15
+ export let maxItems: number = 10;
16
+
17
+ // Reactive variables
18
+ export let items: Item[];
19
+
20
+ let inputElement: HTMLInputElement; // Reference to DOM element
21
+ let autocompleteElement: HTMLDivElement; // Reference to DOM element
22
+ let isOpen = false;
23
+ let results: ResultItem[] = [];
24
+ let selectedIndex = 0;
25
+ let inputText: string = '';
26
+
27
+ // Escape special characters in search string for use in regex
28
+ const regExpEscape = (s: string) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
29
+
30
+ if (inputText.length >= minChar) {
31
+ const r = filterResults();
32
+ if (r.length > 0) {
33
+ const { key, value } = r[0];
34
+ inputText = key;
35
+ setTimeout(() => dispatch('change', JSON.parse(JSON.stringify(value))), 0);
36
+ } else {
37
+ inputText = '';
38
+ }
39
+ }
40
+
41
+ export function setInputText(text: string) {
42
+ console.log(text);
43
+ inputText = text;
44
+ results = filterResults();
45
+ close(0);
46
+ }
47
+
48
+ // Handle input change
49
+ function onChange() {
50
+ if (inputText.length >= minChar) {
51
+ results = filterResults();
52
+ selectedIndex = 0;
53
+ isOpen = true;
54
+ } else {
55
+ isOpen = false;
56
+ }
57
+ }
58
+
59
+ function onFocus() {
60
+ inputElement.setSelectionRange(0, 1000);
61
+ }
62
+
63
+ // Filter results based on search query
64
+ function filterResults(): ResultItem[] {
65
+ const searchText = inputText.trim();
66
+ const searchTextUpper = searchText.toUpperCase();
67
+ const searchReg = RegExp(regExpEscape(searchText), 'i');
68
+ return items
69
+ .filter((item) => item.key.toUpperCase().includes(searchTextUpper))
70
+ .slice(0, maxItems)
71
+ .map((item) => ({
72
+ ...item,
73
+ _label: item.key.replace(searchReg, '<span>$&</span>')
74
+ }));
75
+ }
76
+
77
+ // Handle keyboard navigation
78
+ function onKeyDown(event: KeyboardEvent) {
79
+ switch (event.key) {
80
+ case 'ArrowDown':
81
+ if (selectedIndex < results.length - 1) selectedIndex += 1;
82
+ break;
83
+ case 'ArrowUp':
84
+ if (selectedIndex > 0) selectedIndex -= 1;
85
+ break;
86
+ case 'Enter':
87
+ event.preventDefault();
88
+ close(selectedIndex);
89
+ break;
90
+ case 'Escape':
91
+ event.preventDefault();
92
+ close();
93
+ break;
94
+ }
95
+ }
96
+
97
+ // Close the autocomplete and select an item
98
+ function close(index = -1) {
99
+ isOpen = false;
100
+ if (index > -1 && results[index]) {
101
+ const { key, value } = results[index];
102
+ inputText = key;
103
+ dispatch('change', JSON.parse(JSON.stringify(value)));
104
+ }
105
+ }
106
+
107
+ onMount(() => {
108
+ const darkMode = isDarkMode(autocompleteElement);
109
+ autocompleteElement.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
110
+ autocompleteElement.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
111
+ });
79
112
  </script>
80
113
 
81
114
  <svelte:window on:click={() => close()} />
package/dist/components/AutoComplete.svelte.d.ts CHANGED
@@ -1,14 +1,13 @@
1
- import { SvelteComponent } from "svelte";
2
1
  declare class __sveltets_Render<T> {
3
2
  props(): {
4
3
  placeholder?: string;
5
4
  minChar?: number;
6
5
  maxItems?: number;
7
- initialText?: string;
8
6
  items: {
9
7
  key: string;
10
8
  value: T;
11
9
  }[];
10
+ setInputText?: ((text: string) => void) | undefined;
12
11
  };
13
12
  events(): {
14
13
  change: CustomEvent<any>;
@@ -16,10 +15,20 @@ declare class __sveltets_Render<T> {
16
15
  [evt: string]: CustomEvent<any>;
17
16
  };
18
17
  slots(): {};
18
+ bindings(): string;
19
+ exports(): {
20
+ setInputText: (text: string) => void;
21
+ };
19
22
  }
20
- export type AutoCompleteProps<T> = ReturnType<__sveltets_Render<T>['props']>;
21
- export type AutoCompleteEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
22
- export type AutoCompleteSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
23
- export default class AutoComplete<T> extends SvelteComponent<AutoCompleteProps<T>, AutoCompleteEvents<T>, AutoCompleteSlots<T>> {
23
+ interface $$IsomorphicComponent {
24
+ new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
25
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
26
+ } & ReturnType<__sveltets_Render<T>['exports']>;
27
+ <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
28
+ $$events?: ReturnType<__sveltets_Render<T>['events']>;
29
+ }): ReturnType<__sveltets_Render<T>['exports']>;
30
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
24
31
  }
25
- export {};
32
+ declare const AutoComplete: $$IsomorphicComponent;
33
+ type AutoComplete<T> = InstanceType<typeof AutoComplete<T>>;
34
+ export default AutoComplete;
package/dist/components/BBoxMap/BBoxMap.svelte CHANGED
@@ -1,102 +1,128 @@
1
1
  <!-- BBoxMap.svelte -->
2
- <script>import { onMount } from "svelte";
3
- import "maplibre-gl/dist/maplibre-gl.css";
4
- import { dragBBox, getBBoxDrag, loadBBoxes, getBBoxGeometry, getCursor } from "./BBoxMap.js";
5
- import AutoComplete from "../AutoComplete.svelte";
6
- import { getCountry } from "../../utils/location.js";
7
- import BasicMap from "../BasicMap/BasicMap.svelte";
8
- import { isDarkMode } from "../../utils/style.js";
9
- let bboxes = void 0;
10
- let mapContainer;
11
- const worldBBox = [-180, -85, 180, 85];
12
- const startTime = Date.now();
13
- export let selectedBBox = worldBBox;
14
- let map;
15
- let initialCountry = getCountry();
16
- onMount(async () => {
17
- bboxes = await loadBBoxes();
18
- });
19
- function handleMapReady(event) {
20
- map = event.detail.map;
21
- map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
22
- const canvas = map.getCanvasContainer();
23
- const bboxColor = isDarkMode(mapContainer) ? "#FFFFFF" : "#000000";
24
- map.on("load", () => {
25
- map.addSource("bbox", { type: "geojson", data: getBBoxGeometry(selectedBBox) });
26
- map.addLayer({
27
- id: "bbox-line",
28
- type: "line",
29
- source: "bbox",
30
- filter: ["==", "$type", "LineString"],
31
- layout: { "line-cap": "round", "line-join": "round" },
32
- paint: { "line-color": bboxColor, "line-width": 0.5 }
33
- });
34
- map.addLayer({
35
- id: "bbox-fill",
36
- type: "fill",
37
- source: "bbox",
38
- filter: ["==", "$type", "Polygon"],
39
- paint: { "fill-color": bboxColor, "fill-opacity": 0.2 }
40
- });
41
- });
42
- function getDrag(point) {
43
- const { x: x0, y: y1 } = map.project([selectedBBox[0], selectedBBox[1]]);
44
- const { x: x1, y: y0 } = map.project([selectedBBox[2], selectedBBox[3]]);
45
- return getBBoxDrag(point, [x0, y0, x1, y1]);
46
- }
47
- let lastDrag = false;
48
- let dragging = false;
49
- map.on("mousemove", (e) => {
50
- if (dragging) {
51
- if (e.originalEvent.buttons % 2) {
52
- const { drag, bbox } = dragBBox(selectedBBox, lastDrag, e.lngLat);
53
- lastDrag = drag;
54
- selectedBBox = bbox;
55
- redrawBBox();
56
- e.preventDefault();
57
- } else {
58
- dragging = false;
59
- }
60
- } else {
61
- const drag = getDrag(e.point);
62
- if (drag !== lastDrag) {
63
- lastDrag = drag;
64
- canvas.style.cursor = getCursor(drag) || "grab";
65
- }
66
- }
67
- });
68
- map.on("mousedown", (e) => {
69
- if (e.originalEvent.buttons % 2) {
70
- const drag = getDrag(e.point);
71
- lastDrag = drag;
72
- if (drag) {
73
- dragging = true;
74
- e.preventDefault();
75
- }
76
- }
77
- });
78
- map.on("mouseup", () => dragging = false);
79
- }
80
- function redrawBBox() {
81
- const bboxSource = map.getSource("bbox");
82
- bboxSource.setData(getBBoxGeometry(selectedBBox));
83
- }
84
- function flyTo(bbox) {
85
- selectedBBox = bbox ?? worldBBox;
86
- if (map) {
87
- if (map.getSource("bbox")) redrawBBox();
88
- const transform = map.cameraForBounds(selectedBBox);
89
- if (transform == null) return;
90
- transform.zoom = transform.zoom ?? 0 - 0.5;
91
- transform.bearing = 0;
92
- transform.pitch = 0;
93
- if (Date.now() - startTime < 1e3) {
94
- map.jumpTo(transform);
95
- } else {
96
- map.flyTo({ ...transform, essential: true, speed: 5 });
97
- }
98
- }
99
- }
2
+ <script lang="ts">
3
+ import type { CameraOptions, Point, Map as MaplibreMapType, GeoJSONSource } from 'maplibre-gl';
4
+ import type { BBox, BBoxDrag } from './BBoxMap.js';
5
+ import { onMount } from 'svelte';
6
+ import 'maplibre-gl/dist/maplibre-gl.css';
7
+ import { dragBBox, getBBoxDrag, loadBBoxes, getBBoxGeometry, getCursor } from './BBoxMap.js';
8
+ import AutoComplete from '../AutoComplete.svelte';
9
+ import { getCountry } from '../../utils/location.js';
10
+ import BasicMap from '../BasicMap/BasicMap.svelte';
11
+ import { isDarkMode } from '../../utils/style.js';
12
+
13
+ let bboxes: { key: string; value: BBox }[] | undefined = undefined;
14
+ let mapContainer: HTMLDivElement;
15
+ let autoComplete: AutoComplete<BBox> | undefined = undefined;
16
+ const worldBBox: BBox = [-180, -85, 180, 85];
17
+ const startTime = Date.now();
18
+ export let selectedBBox: BBox = worldBBox;
19
+ let map: MaplibreMapType; // Declare map instance at the top level
20
+
21
+ onMount(async () => {
22
+ bboxes = await loadBBoxes();
23
+ start();
24
+ });
25
+
26
+ function handleMapReady(event: CustomEvent) {
27
+ map = event.detail.map;
28
+ map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
29
+
30
+ const canvas = map.getCanvasContainer();
31
+ const bboxColor = isDarkMode(mapContainer) ? '#FFFFFF' : '#000000';
32
+
33
+ map.on('load', () => {
34
+ map.addSource('bbox', { type: 'geojson', data: getBBoxGeometry(selectedBBox) });
35
+ map.addLayer({
36
+ id: 'bbox-line',
37
+ type: 'line',
38
+ source: 'bbox',
39
+ filter: ['==', '$type', 'LineString'],
40
+ layout: { 'line-cap': 'round', 'line-join': 'round' },
41
+ paint: { 'line-color': bboxColor, 'line-width': 0.5 }
42
+ });
43
+ map.addLayer({
44
+ id: 'bbox-fill',
45
+ type: 'fill',
46
+ source: 'bbox',
47
+ filter: ['==', '$type', 'Polygon'],
48
+ paint: { 'fill-color': bboxColor, 'fill-opacity': 0.2 }
49
+ });
50
+ });
51
+
52
+ function getDrag(point: Point): BBoxDrag {
53
+ const { x: x0, y: y1 } = map.project([selectedBBox[0], selectedBBox[1]]);
54
+ const { x: x1, y: y0 } = map.project([selectedBBox[2], selectedBBox[3]]);
55
+ return getBBoxDrag(point, [x0, y0, x1, y1]);
56
+ }
57
+
58
+ let lastDrag: BBoxDrag = false;
59
+ let dragging = false;
60
+ map.on('mousemove', (e) => {
61
+ if (dragging) {
62
+ if (e.originalEvent.buttons % 2) {
63
+ const { drag, bbox } = dragBBox(selectedBBox, lastDrag, e.lngLat);
64
+ lastDrag = drag;
65
+ selectedBBox = bbox;
66
+ redrawBBox();
67
+ e.preventDefault();
68
+ } else {
69
+ dragging = false;
70
+ }
71
+ } else {
72
+ const drag = getDrag(e.point);
73
+ if (drag !== lastDrag) {
74
+ lastDrag = drag;
75
+ canvas.style.cursor = getCursor(drag) || 'grab';
76
+ }
77
+ }
78
+ });
79
+
80
+ map.on('mousedown', (e) => {
81
+ if (e.originalEvent.buttons % 2) {
82
+ const drag = getDrag(e.point);
83
+ lastDrag = drag;
84
+ if (drag) {
85
+ dragging = true;
86
+ e.preventDefault();
87
+ }
88
+ }
89
+ });
90
+
91
+ map.on('mouseup', () => (dragging = false));
92
+
93
+ start();
94
+ }
95
+
96
+ function start() {
97
+ if (!bboxes) return;
98
+ if (!map) return;
99
+ if (!autoComplete) return;
100
+ autoComplete.setInputText(getCountry()); // Initial search text
101
+ }
102
+
103
+ function redrawBBox() {
104
+ const bboxSource = map.getSource('bbox') as GeoJSONSource;
105
+ bboxSource.setData(getBBoxGeometry(selectedBBox));
106
+ }
107
+
108
+ function flyTo(bbox: BBox) {
109
+ selectedBBox = bbox ?? worldBBox;
110
+ if (map) {
111
+ if (map.getSource('bbox')) redrawBBox();
112
+
113
+ const transform = map.cameraForBounds(selectedBBox) as CameraOptions;
114
+ if (transform == null) return;
115
+ transform.zoom = transform.zoom ?? 0 - 0.5;
116
+ transform.bearing = 0;
117
+ transform.pitch = 0;
118
+
119
+ if (Date.now() - startTime < 1000) {
120
+ map.jumpTo(transform);
121
+ } else {
122
+ map.flyTo({ ...transform, essential: true, speed: 5 });
123
+ }
124
+ }
125
+ }
100
126
  </script>
101
127
 
102
128
  <div class="container">
@@ -105,8 +131,8 @@ function flyTo(bbox) {
105
131
  <AutoComplete
106
132
  items={bboxes}
107
133
  placeholder="Find country, region or city …"
108
- initialText={initialCountry}
109
134
  on:change={(e) => flyTo(e.detail)}
135
+ bind:this={autoComplete}
110
136
  />
111
137
  </div>
112
138
  {/if}
package/dist/components/BBoxMap/BBoxMap.svelte.d.ts CHANGED
@@ -1,20 +1,22 @@
1
- import { SvelteComponent } from "svelte";
2
1
  import type { BBox } from './BBoxMap.js';
3
2
  import 'maplibre-gl/dist/maplibre-gl.css';
4
- declare const __propDef: {
5
- props: {
6
- selectedBBox?: BBox;
3
+ 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> {
4
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
5
+ $$bindings?: Bindings;
6
+ } & Exports;
7
+ (internal: unknown, props: Props & {
8
+ $$events?: Events;
9
+ $$slots?: Slots;
10
+ }): Exports & {
11
+ $set?: any;
12
+ $on?: any;
7
13
  };
8
- events: {
9
- [evt: string]: CustomEvent<any>;
10
- };
11
- slots: {};
12
- exports?: {} | undefined;
13
- bindings?: string | undefined;
14
- };
15
- export type BBoxMapProps = typeof __propDef.props;
16
- export type BBoxMapEvents = typeof __propDef.events;
17
- export type BBoxMapSlots = typeof __propDef.slots;
18
- export default class BBoxMap extends SvelteComponent<BBoxMapProps, BBoxMapEvents, BBoxMapSlots> {
14
+ z_$$bindings?: Bindings;
19
15
  }
20
- export {};
16
+ declare const BBoxMap: $$__sveltets_2_IsomorphicComponent<{
17
+ selectedBBox?: BBox;
18
+ }, {
19
+ [evt: string]: CustomEvent<any>;
20
+ }, {}, {}, string>;
21
+ type BBoxMap = InstanceType<typeof BBoxMap>;
22
+ export default BBoxMap;
package/dist/components/BasicMap/BasicMap.svelte CHANGED
@@ -1,29 +1,41 @@
1
1
  <!-- BasicMap.svelte -->
2
- <script>import { onMount, createEventDispatcher } from "svelte";
3
- import "maplibre-gl/dist/maplibre-gl.css";
4
- import { getMapStyle, isDarkMode } from "../../utils/style.js";
5
- export let style = "position:absolute; left:0px; top:0px; width:100%; height:100%;";
6
- export let container = void 0;
7
- export let map = void 0;
8
- export let styleOptions = {};
9
- export let mapOptions = {};
10
- const dispatch = createEventDispatcher();
11
- onMount(async () => {
12
- let MaplibreMap = (await import("maplibre-gl")).Map;
13
- if (!container) throw Error();
14
- const darkMode = isDarkMode(container);
15
- container.style.setProperty("--bg-color", darkMode ? "#000" : "#fff");
16
- container.style.setProperty("--fg-color", darkMode ? "#fff" : "#000");
17
- map = new MaplibreMap({
18
- container,
19
- style: getMapStyle(darkMode, styleOptions),
20
- renderWorldCopies: false,
21
- dragRotate: false,
22
- attributionControl: { compact: false },
23
- ...mapOptions
24
- });
25
- dispatch("mapReady", { map });
26
- });
2
+ <script lang="ts">
3
+ import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
4
+ import { onMount, createEventDispatcher } from 'svelte';
5
+ import 'maplibre-gl/dist/maplibre-gl.css';
6
+ import { getMapStyle, isDarkMode } from '../../utils/style.js';
7
+ import type { ColorfulOptions } from '@versatiles/style';
8
+
9
+ // Props
10
+ export let style: string = 'position:absolute; left:0px; top:0px; width:100%; height:100%;';
11
+ export let container: HTMLDivElement | undefined = undefined;
12
+ export let map: MaplibreMapType | undefined = undefined;
13
+ export let styleOptions: ColorfulOptions = {};
14
+ export let mapOptions: Partial<MapOptions> = {};
15
+
16
+ // Create the event dispatcher
17
+ const dispatch = createEventDispatcher();
18
+
19
+ onMount(async (): Promise<void> => {
20
+ let MaplibreMap: typeof MaplibreMapType = (await import('maplibre-gl')).Map;
21
+
22
+ if (!container) throw Error();
23
+
24
+ const darkMode = isDarkMode(container);
25
+ container.style.setProperty('--bg-color', darkMode ? '#000' : '#fff');
26
+ container.style.setProperty('--fg-color', darkMode ? '#fff' : '#000');
27
+
28
+ map = new MaplibreMap({
29
+ container,
30
+ style: getMapStyle(darkMode, styleOptions),
31
+ renderWorldCopies: false,
32
+ dragRotate: false,
33
+ attributionControl: { compact: false },
34
+ ...mapOptions
35
+ });
36
+
37
+ dispatch('mapReady', { map });
38
+ });
27
39
  </script>
28
40
 
29
41
  <div class="map" {style} bind:this={container}></div>
package/dist/components/BasicMap/BasicMap.svelte.d.ts CHANGED
@@ -1,27 +1,29 @@
1
- import { SvelteComponent } from "svelte";
2
1
  import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
3
2
  import 'maplibre-gl/dist/maplibre-gl.css';
4
3
  import type { ColorfulOptions } from '@versatiles/style';
5
- declare const __propDef: {
6
- props: {
7
- style?: string;
8
- container?: HTMLDivElement | undefined;
9
- map?: MaplibreMapType | undefined;
10
- styleOptions?: ColorfulOptions;
11
- mapOptions?: Partial<MapOptions>;
4
+ 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> {
5
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
6
+ $$bindings?: Bindings;
7
+ } & Exports;
8
+ (internal: unknown, props: Props & {
9
+ $$events?: Events;
10
+ $$slots?: Slots;
11
+ }): Exports & {
12
+ $set?: any;
13
+ $on?: any;
12
14
  };
13
- events: {
14
- mapReady: CustomEvent<any>;
15
- } & {
16
- [evt: string]: CustomEvent<any>;
17
- };
18
- slots: {};
19
- exports?: {} | undefined;
20
- bindings?: string | undefined;
21
- };
22
- export type BasicMapProps = typeof __propDef.props;
23
- export type BasicMapEvents = typeof __propDef.events;
24
- export type BasicMapSlots = typeof __propDef.slots;
25
- export default class BasicMap extends SvelteComponent<BasicMapProps, BasicMapEvents, BasicMapSlots> {
15
+ z_$$bindings?: Bindings;
26
16
  }
27
- export {};
17
+ declare const BasicMap: $$__sveltets_2_IsomorphicComponent<{
18
+ style?: string;
19
+ container?: HTMLDivElement | undefined;
20
+ map?: MaplibreMapType | undefined;
21
+ styleOptions?: ColorfulOptions;
22
+ mapOptions?: Partial<MapOptions>;
23
+ }, {
24
+ mapReady: CustomEvent<any>;
25
+ } & {
26
+ [evt: string]: CustomEvent<any>;
27
+ }, {}, {}, string>;
28
+ type BasicMap = InstanceType<typeof BasicMap>;
29
+ export default BasicMap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versatiles/svelte",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "scripts": {
5
5
  "build": "vite build && npm run package",
6
6
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -17,7 +17,7 @@
17
17
  "test:integration": "playwright test",
18
18
  "test:unit": "vitest run",
19
19
  "test": "npm run test:integration && npm run test:unit",
20
- "upgrade": "npm-check-updates -u && rm -f package-lock.json; rm -rf node_modules; npm i && npm update"
20
+ "upgrade": "npm-check-updates -u && rm -f package-lock.json; rm -rf node_modules; npm update --save && npm install"
21
21
  },
22
22
  "exports": {
23
23
  ".": {
@@ -33,35 +33,37 @@
33
33
  "!dist/BBoxMap/helpers/*"
34
34
  ],
35
35
  "peerDependencies": {
36
- "svelte": "^4.0.0"
36
+ "svelte": "^5.0.3"
37
37
  },
38
38
  "devDependencies": {
39
- "@playwright/test": "^1.47.2",
39
+ "@playwright/test": "^1.48.1",
40
40
  "@sveltejs/adapter-auto": "^3.2.5",
41
- "@sveltejs/kit": "^2.5.28",
41
+ "@sveltejs/kit": "^2.7.2",
42
42
  "@sveltejs/package": "^2.3.5",
43
- "@sveltejs/vite-plugin-svelte": "^3.1.2",
43
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
44
44
  "@turf/turf": "^7.1.0",
45
45
  "@types/eslint": "^9.6.1",
46
- "@types/node": "^22.5.5",
46
+ "@types/node": "^22.7.7",
47
47
  "@types/split2": "^4.2.3",
48
48
  "@versatiles/release-tool": "^1.2.6",
49
- "eslint": "^9.11.0",
49
+ "cookie": "^1.0.1",
50
+ "eslint": "^9.13.0",
50
51
  "eslint-config-prettier": "^9.1.0",
51
- "eslint-plugin-svelte": "^2.44.0",
52
+ "eslint-plugin-svelte": "^2.45.1",
52
53
  "geojson": "^0.5.0",
53
- "globals": "^15.9.0",
54
+ "globals": "^15.11.0",
55
+ "npm-check-updates": "^17.1.4",
54
56
  "prettier": "^3.3.3",
55
- "prettier-plugin-svelte": "^3.2.6",
57
+ "prettier-plugin-svelte": "^3.2.7",
56
58
  "publint": "^0.2.11",
57
59
  "split2": "^4.2.0",
58
- "svelte": "^4.2.19",
59
- "svelte-check": "^4.0.2",
60
+ "svelte": "^5.0.3",
61
+ "svelte-check": "^4.0.5",
60
62
  "tsx": "^4.19.1",
61
- "typescript": "^5.6.2",
62
- "typescript-eslint": "^8.6.0",
63
- "vite": "^5.4.7",
64
- "vitest": "^2.1.1"
63
+ "typescript": "^5.6.3",
64
+ "typescript-eslint": "^8.10.0",
65
+ "vite": "^5.4.9",
66
+ "vitest": "^2.1.3"
65
67
  },
66
68
  "svelte": "./dist/index.js",
67
69
  "types": "./dist/index.d.ts",