Add missing TypeScript types and general cleanup

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

.gitignore

@@ -1,9 +1,5 @@
 ### Svelte ###
 .svelte-kit/
-.eslintignore
-.prettierignore
-.prettierrc
-.eslintrc.cjs
 
 ### Node.js and npm ###
 node_modules/

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -15,12 +15,15 @@ Parameters
 - **fields**: An array of valid fields for autocompletion suggestions.
 - **callbackSearch**: A callback function to search for parameters based on the provided field and search query.
 
-```javascript
-<script>
-    const callbackSearch = (field, search) => {
-        // Dummy data retrieval and search logic
-        const values = dummyData[field.toLowerCase()];
-        return levenshtein.levenshteinSearchSort(values, search).slice(0, 10);
+```svelte
+<script lang="ts">
+
+    const callbackSearch = (field: string, search: string): (string | { label: string })[] => {
+        // Placeholder for search functionality
+        // Replace with actual search logic
+    
+        // Return dummy search result for example
+        return [label: '"some result"'];
     };
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dasmaql-svelte",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "A Svelte component providing an example of how DasmaQL can be utilized. DasmaQL is a lightweight query language used for data retrieval.",
 	"scripts": {
 		"dev": "vite dev",
@@ -29,7 +29,7 @@
 		"svelte": "^4.0.0"
 	},
 	"dependencies": {
-		"dasmaql": "^0.1.14"
+		"dasmaql": "^0.2.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",

src/lib/CaretHandler.ts

@@ -1,5 +1,6 @@
 export class CaretHandler {
-	static getCaretCharacterOffsetWithin(element: HTMLElement): number {
+	static getCaretCharacterOffsetWithin(element: Node | null): number | undefined {
+		if (!element) return undefined;
 		let caretOffset = 0;
 		const selection = window.getSelection();
 
@@ -20,14 +21,12 @@ export class CaretHandler {
 		let currentNode: Node | null = null;
 		let previousNode: Node | null = null;
 
-		for (let i = 0; i < element.childNodes.length; i++) {
+		for (const childNode of element.childNodes) {
 			previousNode = currentNode;
-			currentNode = element.childNodes[i];
-
+			currentNode = childNode;
 			while (currentNode && currentNode.childNodes.length > 0) {
 				currentNode = currentNode.childNodes[0];
 			}
-
 			if (previousNode != null) {
 				offset -= previousNode.textContent?.length || 0;
 			}
@@ -52,7 +51,7 @@ export class CaretHandler {
 		const range = window.getSelection()?.getRangeAt(0);
 		const rect = range?.getClientRects()[0];
 		const caretHeight = range?.getClientRects()[0]?.height || 0;
-		const yOffset = caretHeight ? caretHeight : 0;
+		const yOffset = caretHeight || 0;
 
 		return rect ? { x: rect.left + 2, y: rect.top + yOffset } : { x: 0, y: 0 };
 	}

src/lib/DasmaAutocomplete.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
-	export let suggestions = [];
+	import type { MouseEventHandler } from 'svelte/elements';
+
+	export let suggestions: string[] = [];
 	export let position = { x: 0, y: 0 };
 	export let visible = false;
 
 	export let selectedSuggestion: string | { key: string; label: string } = '';
 	export let selectedIndex = -1;
 
-	let menuElement;
+	let menuElement: HTMLElement;
 
-	export const handleMouseClick = (event) => {
-		const selectedIndex = Array.from(menuElement.children).indexOf(event.target);
+	export const handleMouseClick: MouseEventHandler<HTMLLIElement> = (event) => {
+		if (!event.target) return;
+		const selectedIndex = Array.from(menuElement.children).indexOf(<Element>event.target);
 		if (selectedIndex !== -1 && selectedIndex < suggestions.length) {
 			selectedSuggestion = getKey(suggestions[selectedIndex]);
 		}
 	};
-	export const handleKeyEvent = (event) => {
+	export const handleKeyEvent = (event: KeyboardEvent) => {
 		if (event.key === 'ArrowDown') {
 			event.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
@@ -28,39 +31,46 @@
 		}
 	};
 
-	function getLabel(suggestion) {
+	const getLabel = (suggestion: { label: string } | string) => {
 		if (typeof suggestion === 'object' && suggestion.label) {
 			return suggestion.label;
 		} else if (typeof suggestion === 'string') {
 			return suggestion;
 		}
 		return '';
-	}
+	};
 
-	function getKey(suggestion) {
+	const getKey = (suggestion: { key: string } | string) => {
 		if (typeof suggestion === 'object' && suggestion.key) {
 			return suggestion.key;
 		} else if (typeof suggestion === 'string') {
 			return suggestion;
 		}
 		return '';
-	}
+	};
 </script>
 
 {#if visible}
 	<ul
+		role="menu"
 		style="left: {position.x}px; top: {position.y}px;"
 		bind:this={menuElement}
 		class="dasma-autocomplete"
 	>
 		{#each suggestions as suggestion, index}
-			<li role="listitem" class:selected={index === selectedIndex} on:click={handleMouseClick}>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<li
+				role="menuitem"
+				tabindex={index}
+				class:selected={index === selectedIndex}
+				on:click={handleMouseClick}
+			>
 				{getLabel(suggestion)}
 			</li>
 		{/each}
 	</ul>
 {/if}
 
 <style lang="css">
-	@import 'static/dasma-autocomplete.css';
+	@import 'dasma-autocomplete.css';
 </style>