klick utanför ruta stänger den

package-lock.json

@@ -14,6 +14,7 @@
 				"@oslojs/encoding": "^1.1.0",
 				"@tauri-apps/api": "^2.2.0",
 				"dexie": "^4.0.11",
+				"svelte-outside": "^0.0.3",
 				"svelte-radix": "^2.0.1"
 			},
 			"devDependencies": {
@@ -6845,6 +6846,12 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/svelte-outside": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-outside/-/svelte-outside-0.0.3.tgz",
+			"integrity": "sha512-4mJttaDRXkBBL+8JqjfA1P5Ny64qmkZL3x5zELAW3tqehic3LLHvPNDcGAk8PVRooM2qUym9Oz3TfA9lO4OctA==",
+			"license": "MIT"
+		},
 		"node_modules/svelte-radix": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-2.0.1.tgz",

package.json

@@ -58,6 +58,7 @@
 		"@oslojs/encoding": "^1.1.0",
 		"@tauri-apps/api": "^2.2.0",
 		"dexie": "^4.0.11",
+		"svelte-outside": "^0.0.3",
 		"svelte-radix": "^2.0.1"
 	}
 }

src/components/create.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
+	import { clickOutside } from 'svelte-outside';
 	import { appState, shortforms, importState } from '$lib/stores.svelte';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Input } from '$lib/components/ui/input';
@@ -69,11 +70,14 @@
 			});
 	};
 	const cancelCreate = () => {
+		if (show) {
 			abbForm.shortform = '';
 			abbForm.phrase = '';
 			abbForm.target = {};
 			abbForm.errors = [];
 			appState.open = '';
+			show = false;
+		}
 	};
 
 	const onSelectedChange = (v) => {
@@ -81,7 +85,7 @@
 		abbForm.target = v;
 	};
 	let selectedLists = [];
-
+	let show = false;
 	onMount(() => {
 		db.lists.get(shortforms.standardList).then((l) => {
 			selectedLists.push({ value: l.id, label: l.name });
@@ -91,12 +95,14 @@
 		const el = document.getElementById('shortformEl');
 		if (el) {
 			setTimeout(() => {
+				show = true;
 				el.focus();
 			}, 15);
 		}
 	});
 </script>
 
+<div use:clickOutside={cancelCreate}>
 	<Card.Root class="mx-auto w-[490px]">
 		<Card.Header>
 			<Card.Title>Lägg till förkortning</Card.Title>
@@ -140,7 +146,10 @@
 				</div>
 				{#if abbForm.errors.length > 0}
 					<ScrollArea class="max-h-48 rounded-md">
-					<div class="border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700" role="alert">
+						<div
+							class="border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700"
+							role="alert"
+						>
 							<p class="font-bold">Fel vid import</p>
 							<ul class="p-6">
 								{#each abbForms.errors as error}
@@ -160,3 +169,4 @@
 	</Card.Footer>
 	-->
 	</Card.Root>
+</div>

src/components/import/import.svelte

@@ -16,7 +16,7 @@
 	import { importDefaultShortforms, importShortforms } from '../../db/import';
 	import { createShortformList, type List } from '../../db/main';
 
-	import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
 	$: form = {
 		textarea: '',
@@ -26,35 +26,48 @@
 	let importing = false;
 	let progress = 0;
 	const handleImport = async () => {
-		importState.errors = []
-		if (form.textarea == "") {
-			console.error("no name error")
-			importState.errors.push("Importfältet är tomt")
-			return
+		importState.errors = [];
+		if (form.textarea == '') {
+			console.error('no name error');
+			importState.errors.push('Importfältet är tomt');
+			return;
 		}
-		if (form.name == "") {
-			console.error("no name error")
-			importState.errors.push("Du måste döpa förkortningslistan till något")
-			return
+		if (form.name == '') {
+			console.error('no name error');
+			importState.errors.push('Du måste döpa förkortningslistan till något');
+			return;
 		}
 		importing = true;
 		const l: List = { name: form.name, type: form.type ? 1 : 0, updated: new Date() };
 		const listid = await createShortformList(l);
-		let sfs = []
-		form.textarea.split('\n').forEach((line) => {
-			const fields = line.split("=")
+		let sfs = [];
+		const lines = form.textarea.split('\n');
+		for (let i = 0; i < lines.length; i += 1) {
+			const fields = lines[i].split('=');
 			if (fields.length == 2) {
-				sfs.push({shortform: fields[0], phrase: fields[1], used: 0, listid: listid})
+				sfs.push({ shortform: fields[0], phrase: fields[1], used: 0, listid: listid });
+				setTimeout(() => {
+					progress = ((i + 1) / lines.length) * 100;
+				}, 1);
 			}
-		});
-		importShortforms(sfs)
+		}
+		importShortforms(sfs);
+		goto('/');
 	};
+
 	const cancelImport = () => {
 		importState.data = '';
 		importState.errors = [];
-		importState.name = "";
-		appState.open = ""
+		importState.name = '';
+		appState.open = '';
 	};
+
+	const onsubmit = (e) => {
+		e.preventDefault();
+		console.log('yooo');
+		handleImport();
+	};
+
 	const importDefaultList = () => {
 		importState.data = '';
 		importState.errors = [];
@@ -62,6 +75,7 @@
 			importState.data += sf.sf + '=' + sf.p + '\n';
 		});
 	};
+
 	onMount(() => {
 		form.textarea = importState.data;
 	});
@@ -73,7 +87,7 @@
 		<Card.Description>Nån annan hjälptext.</Card.Description>
 	</Card.Header>
 	<Card.Content class="mx-auto">
-		<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data">
+		<form class="grid gap-4 py-4" {onsubmit}>
 			<div class="grid grid-cols-4 items-center gap-4">
 				<Label>Förkortningar</Label>
 				<textarea
@@ -98,7 +112,7 @@ förkn=förkortningen
 
 			{#if importState.errors.length > 0}
 				<ScrollArea class="max-h-48 rounded-md">
-			<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
+					<div class="border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700" role="alert">
 						<p class="font-bold">Fel vid import</p>
 						<ul class="p-6">
 							{#each importState.errors as error}
@@ -111,7 +125,11 @@ förkn=förkortningen
 		</form>
 	</Card.Content>
 	<Card.Footer class="flex justify-between">
+		{#if importing}
+			<Progress value={progress} />
+		{:else}
 			<Button on:click={cancelImport} variant="outline">Avbryt</Button>
-		<Button on:click={handleImport}>Importera</Button>
+			<Button on:click={onsubmit}>Importera</Button>
+		{/if}
 	</Card.Footer>
 </Card.Root>

src/components/listselector.svelte

@@ -1,12 +1,12 @@
 <script>
 	import { onMount } from 'svelte';
-
+	import { clickOutside } from 'svelte-outside';
 	import * as Card from '$lib/components/ui/card/index';
 	import * as Select from '$lib/components/ui/select';
 	import { Label } from '$lib/components/ui/label';
 	import { db } from '../db/main';
 	import { liveQuery } from 'dexie';
-	import { shortforms } from '$lib/stores.svelte';
+	import { appState, shortforms } from '$lib/stores.svelte';
 	import { cacheShortforms } from '../modules/shortforms';
 
 	const onSelectedStandardListChange = (e) => {
@@ -43,7 +43,8 @@
 
 	let standardLists = [];
 	let subjectLists = [];
-	onMount(() => {
+	let show = false;
+	onMount(async () => {
 		//console.log($state.snapshot(shortforms));
 		db.lists.toArray().then((lists) => {
 			standardLists = lists.filter((l) => l.type == 0);
@@ -54,9 +55,20 @@
 			listSelectorForm.subject = { value: subject.id, label: subject.name };
 			console.log(listSelectorForm);
 		});
+
+		setTimeout(() => {
+			show = true;
+		}, 15);
 	});
+	const close = () => {
+		if (show == true) {
+			appState.open = '';
+		}
+	};
 </script>
 
+{#if show}
+	<div use:clickOutside={close}>
 		<Card.Root class="mx-auto w-[490px]">
 			<Card.Header>
 				<Card.Title>Välj förkortningslistor</Card.Title>
@@ -116,3 +128,5 @@
 	</Card.Footer>
 	-->
 		</Card.Root>
+	</div>
+{/if}

src/components/textarea.svelte

@@ -114,8 +114,8 @@
 		"
 		class="textarea h-full flex-grow"
 		id="doc"
-		on:keyup={change}
-		on:beforeinput={input}
+		onkeyup={change}
+		onbeforeinput={input}
 		bind:value={appState.text}
 		spellcheck="false"
 	></textarea>

src/routes/+page.svelte

@@ -51,8 +51,8 @@
 			<ListSelector />
 		</div>
 	{/if}
-	<div class="h-full">
 	<Menu />
+	<div class="h-full">
 		<Textarea bind:ref={textarea} />
 		<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
 		<!-- <Dashboard open={showDashboard} />-->