@versatiles/svelte 0.0.4 → 0.1.1

package/README.md

@@ -14,6 +14,11 @@ npm i @versatiles/svelte
 		<th>Light Mode</th>
 		<th>Dark Mode</th>
 	</tr>
+	<tr>
+		<th>BasicMap</th>
+		<td><img src="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/basic-map-light.png"></td>
+		<td><img src="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/basic-map-dark.png"></td>
+	</tr>
 	<tr>
 		<th>BBoxMap</th>
 		<td><img src="https://github.com/versatiles-org/node-versatiles-svelte/releases/latest/download/bbox-map-light.png"></td>

package/dist/components/AutoComplete.svelte

@@ -1,16 +1,17 @@
 <!-- AutoComplete.svelte -->
-<script generics="T">import { createEventDispatcher } from "svelte";
+<script generics="T">import { isDarkMode } from "../utils/style.js";
+import { createEventDispatcher, onMount } from "svelte";
 const dispatch = createEventDispatcher();
 export let placeholder = "";
 export let minChar = 0;
 export let maxItems = 10;
-export let initialText = "";
 export let items;
-let input;
+let inputElement;
+let autocompleteElement;
 let isOpen = false;
 let results = [];
-let inputText = initialText;
 let selectedIndex = 0;
+let inputText = "";
 const regExpEscape = (s) => s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
 if (inputText.length >= minChar) {
   const r = filterResults();
@@ -22,6 +23,12 @@ if (inputText.length >= minChar) {
     inputText = "";
   }
 }
+export function setInputText(text) {
+  console.log(text);
+  inputText = text;
+  results = filterResults();
+  close(0);
+}
 function onChange() {
   if (inputText.length >= minChar) {
     results = filterResults();
@@ -32,7 +39,7 @@ function onChange() {
   }
 }
 function onFocus() {
-  input.setSelectionRange(0, 1e3);
+  inputElement.setSelectionRange(0, 1e3);
 }
 function filterResults() {
   const searchText = inputText.trim();
@@ -69,11 +76,16 @@ function close(index = -1) {
     dispatch("change", JSON.parse(JSON.stringify(value)));
   }
 }
+onMount(() => {
+  const darkMode = isDarkMode(autocompleteElement);
+  autocompleteElement.style.setProperty("--bg-color", darkMode ? "#000" : "#fff");
+  autocompleteElement.style.setProperty("--fg-color", darkMode ? "#fff" : "#000");
+});
 </script>
 
 <svelte:window on:click={() => close()} />
 
-<div class="autocomplete">
+<div class="autocomplete" bind:this={autocompleteElement}>
 	<input
 		type="text"
 		bind:value={inputText}
@@ -83,7 +95,7 @@ function close(index = -1) {
 		on:keydown={onKeyDown}
 		on:focusin={onFocus}
 		on:click={(e) => e.stopPropagation()}
-		bind:this={input}
+		bind:this={inputElement}
 		aria-activedescendant={isOpen ? `result-${selectedIndex}` : undefined}
 		aria-autocomplete="list"
 		aria-controls="autocomplete-results"
@@ -104,8 +116,6 @@ function close(index = -1) {
 
 <style>
 	.autocomplete {
-		--bg-color: var(--autocomplete-bg-color, light-dark(white, black));
-		--fg-color: var(--autocomplete-text-color, light-dark(black, white));
 		position: relative;
 		border-radius: 0.5em;
 		background: color-mix(in srgb, var(--bg-color) 80%, transparent);

package/dist/components/AutoComplete.svelte.d.ts

@@ -4,11 +4,11 @@ declare class __sveltets_Render<T> {
         placeholder?: string;
         minChar?: number;
         maxItems?: number;
-        initialText?: string;
         items: {
             key: string;
             value: T;
         }[];
+        setInputText?: ((text: string) => void) | undefined;
     };
     events(): {
         change: CustomEvent<any>;
@@ -21,5 +21,6 @@ export type AutoCompleteProps<T> = ReturnType<__sveltets_Render<T>['props']>;
 export type AutoCompleteEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
 export type AutoCompleteSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 export default class AutoComplete<T> extends SvelteComponent<AutoCompleteProps<T>, AutoCompleteEvents<T>, AutoCompleteSlots<T>> {
+    get setInputText(): (text: string) => void;
 }
 export {};

package/dist/components/BBoxMap/BBoxMap.svelte

@@ -3,37 +3,25 @@
 import "maplibre-gl/dist/maplibre-gl.css";
 import { dragBBox, getBBoxDrag, loadBBoxes, getBBoxGeometry, getCursor } from "./BBoxMap.js";
 import AutoComplete from "../AutoComplete.svelte";
-import { getMapStyle, isDarkMode } from "../../utils/style.js";
 import { getCountry } from "../../utils/location.js";
+import BasicMap from "../BasicMap/BasicMap.svelte";
+import { isDarkMode } from "../../utils/style.js";
 let bboxes = void 0;
-let container;
+let mapContainer;
+let autoComplete = void 0;
 const worldBBox = [-180, -85, 180, 85];
 const startTime = Date.now();
 export let selectedBBox = worldBBox;
 let map;
-let initialCountry = getCountry();
-onMount(() => init());
-async function init() {
-  let MaplibreMap = void 0;
-  await Promise.all([
-    (async () => bboxes = await loadBBoxes())(),
-    (async () => MaplibreMap = (await import("maplibre-gl")).Map)()
-  ]);
-  if (MaplibreMap == null) throw Error();
-  initMap(MaplibreMap);
-}
-function initMap(MaplibreMap) {
-  const darkMode = isDarkMode(container);
-  map = new MaplibreMap({
-    container,
-    style: getMapStyle(darkMode),
-    bounds: selectedBBox,
-    renderWorldCopies: false,
-    dragRotate: false,
-    attributionControl: { compact: false }
-  });
+onMount(async () => {
+  bboxes = await loadBBoxes();
+  start();
+});
+function handleMapReady(event) {
+  map = event.detail.map;
   map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
   const canvas = map.getCanvasContainer();
+  const bboxColor = isDarkMode(mapContainer) ? "#FFFFFF" : "#000000";
   map.on("load", () => {
     map.addSource("bbox", { type: "geojson", data: getBBoxGeometry(selectedBBox) });
     map.addLayer({
@@ -42,14 +30,14 @@ function initMap(MaplibreMap) {
       source: "bbox",
       filter: ["==", "$type", "LineString"],
       layout: { "line-cap": "round", "line-join": "round" },
-      paint: { "line-color": darkMode ? "#FFFFFF" : "#000000", "line-width": 0.5 }
+      paint: { "line-color": bboxColor, "line-width": 0.5 }
     });
     map.addLayer({
       id: "bbox-fill",
       type: "fill",
       source: "bbox",
       filter: ["==", "$type", "Polygon"],
-      paint: { "fill-color": darkMode ? "#FFFFFF" : "#000000", "fill-opacity": 0.2 }
+      paint: { "fill-color": bboxColor, "fill-opacity": 0.2 }
     });
   });
   function getDrag(point) {
@@ -89,7 +77,13 @@ function initMap(MaplibreMap) {
     }
   });
   map.on("mouseup", () => dragging = false);
-  return () => map.remove();
+  start();
+}
+function start() {
+  if (!bboxes) return;
+  if (!map) return;
+  if (!autoComplete) return;
+  autoComplete.setInputText(getCountry());
 }
 function redrawBBox() {
   const bboxSource = map.getSource("bbox");
@@ -119,41 +113,21 @@ function flyTo(bbox) {
 			<AutoComplete
 				items={bboxes}
 				placeholder="Find country, region or city …"
-				initialText={initialCountry}
 				on:change={(e) => flyTo(e.detail)}
+				bind:this={autoComplete}
 			/>
 		</div>
 	{/if}
-	<div class="map" bind:this={container}></div>
+	<BasicMap {map} bind:container={mapContainer} on:mapReady={handleMapReady}></BasicMap>
 </div>
 
 <style>
 	.container {
-		--bg-color: var(--bboxmap-bg-color, light-dark(white, black));
-		--fg-color: var(--bboxmap-text-color, light-dark(black, white));
 		width: 100%;
 		height: 100%;
 		position: relative;
 		min-height: 6em;
 	}
-	.map {
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		bottom: 0px;
-		right: 0px;
-	}
-	:global(.maplibregl-ctrl-attrib) {
-		background-color: color-mix(in srgb, var(--bg-color) 50%, transparent) !important;
-		color: var(--fg-color) !important;
-		opacity: 0.5;
-		font-size: 0.85em;
-		padding: 0.1em !important;
-		line-height: normal !important;
-	}
-	:global(.maplibregl-ctrl-attrib a) {
-		color: var(--fg-color) !important;
-	}
 	.input {
 		position: absolute;
 		top: 0.5em;

package/dist/components/BasicMap/BasicMap.svelte

@@ -0,0 +1,42 @@
+<!-- BasicMap.svelte -->
+<script>import { onMount, createEventDispatcher } from "svelte";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { getMapStyle, isDarkMode } from "../../utils/style.js";
+export let style = "position:absolute; left:0px; top:0px; width:100%; height:100%;";
+export let container = void 0;
+export let map = void 0;
+export let styleOptions = {};
+export let mapOptions = {};
+const dispatch = createEventDispatcher();
+onMount(async () => {
+  let MaplibreMap = (await import("maplibre-gl")).Map;
+  if (!container) throw Error();
+  const darkMode = isDarkMode(container);
+  container.style.setProperty("--bg-color", darkMode ? "#000" : "#fff");
+  container.style.setProperty("--fg-color", darkMode ? "#fff" : "#000");
+  map = new MaplibreMap({
+    container,
+    style: getMapStyle(darkMode, styleOptions),
+    renderWorldCopies: false,
+    dragRotate: false,
+    attributionControl: { compact: false },
+    ...mapOptions
+  });
+  dispatch("mapReady", { map });
+});
+</script>
+
+<div class="map" {style} bind:this={container}></div>
+
+<style>
+	.map :global(.maplibregl-ctrl-attrib) {
+		background-color: color-mix(in srgb, var(--bg-color) 50%, transparent) !important;
+		color: var(--fg-color) !important;
+		opacity: 0.5;
+		font-size: 0.85em;
+		line-height: normal !important;
+	}
+	.map :global(.maplibregl-ctrl-attrib a) {
+		color: var(--fg-color) !important;
+	}
+</style>

package/dist/components/BasicMap/BasicMap.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import type { ColorfulOptions } from '@versatiles/style';
+declare const __propDef: {
+    props: {
+        style?: string;
+        container?: HTMLDivElement | undefined;
+        map?: MaplibreMapType | undefined;
+        styleOptions?: ColorfulOptions;
+        mapOptions?: Partial<MapOptions>;
+    };
+    events: {
+        mapReady: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type BasicMapProps = typeof __propDef.props;
+export type BasicMapEvents = typeof __propDef.events;
+export type BasicMapSlots = typeof __propDef.slots;
+export default class BasicMap extends SvelteComponent<BasicMapProps, BasicMapEvents, BasicMapSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+import BasicMap from './components/BasicMap/BasicMap.svelte';
 import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
-export { BBoxMap };
+export { BasicMap, BBoxMap };

package/dist/index.js

@@ -1,2 +1,3 @@
+import BasicMap from './components/BasicMap/BasicMap.svelte';
 import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
-export { BBoxMap };
+export { BasicMap, BBoxMap };

package/dist/utils/style.d.ts

@@ -1,3 +1,3 @@
-import { styles } from '@versatiles/style';
-export declare function getMapStyle(darkMode: boolean): styles.MaplibreStyle;
+import { styles, type ColorfulOptions } from '@versatiles/style';
+export declare function getMapStyle(darkMode: boolean, styleOptions?: ColorfulOptions): styles.MaplibreStyle;
 export declare function isDarkMode(element: HTMLElement): boolean;

package/dist/utils/style.js

@@ -1,13 +1,14 @@
 import { styles } from '@versatiles/style';
 import { getLanguage } from './location.js';
-export function getMapStyle(darkMode) {
+export function getMapStyle(darkMode, styleOptions = {}) {
     return styles.colorful({
         baseUrl: 'https://tiles.versatiles.org',
         languageSuffix: getLanguage(),
         recolor: {
             invertBrightness: darkMode,
             gamma: darkMode ? 0.5 : 1
-        }
+        },
+        ...styleOptions
     });
 }
 export function isDarkMode(element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/svelte",
-  "version": "0.0.4",
+  "version": "0.1.1",
   "scripts": {
     "build": "vite build && npm run package",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -15,7 +15,7 @@
     "screenshots": "npm run build && npx tsx ./scripts/screenshots.ts",
     "release": "npm run build && npx vrt release-npm",
     "test:integration": "playwright test",
-    "test:unit": "vitest",
+    "test:unit": "vitest run",
     "test": "npm run test:integration && npm run test:unit",
     "upgrade": "npm-check-updates -u && rm -f package-lock.json; rm -rf node_modules; npm i && npm update"
   },
@@ -36,38 +36,38 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.46.1",
-    "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.22",
-    "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@playwright/test": "^1.47.2",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/kit": "^2.5.28",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@turf/turf": "^7.1.0",
-    "@types/eslint": "^9.6.0",
-    "@types/node": "^22.4.0",
+    "@types/eslint": "^9.6.1",
+    "@types/node": "^22.5.5",
     "@types/split2": "^4.2.3",
-    "@versatiles/release-tool": "^1.2.5",
-    "eslint": "^9.9.0",
+    "@versatiles/release-tool": "^1.2.6",
+    "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
+    "eslint-plugin-svelte": "^2.44.0",
     "geojson": "^0.5.0",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
-    "publint": "^0.2.10",
+    "publint": "^0.2.11",
     "split2": "^4.2.0",
-    "svelte": "^4.2.18",
-    "svelte-check": "^3.8.5",
-    "tsx": "^4.17.0",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.1.0",
-    "vite": "^5.4.1",
-    "vitest": "^2.0.5"
+    "svelte": "^4.2.19",
+    "svelte-check": "^4.0.2",
+    "tsx": "^4.19.1",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.6.0",
+    "vite": "^5.4.7",
+    "vitest": "^2.1.1"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
     "@versatiles/style": "^4.4.1",
-    "maplibre-gl": "^4.5.2"
+    "maplibre-gl": "^4.7.1"
   }
 }