klick utanför ruta stänger den

2025-02-14 14:33:16 +01:00 · 2025-02-14 14:33:16 +01:00 · be98f2b189
commit be98f2b189
parent 9da2421b31
7 changed files with 201 additions and 151 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
 	}
 }
--- a/src/components/create.svelte
+++ b/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 = () => {
-		abbForm.shortform = '';
-		abbForm.phrase = '';
-		abbForm.target = {};
-		abbForm.errors = [];
-		appState.open = '';
+		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,72 +95,78 @@
 		const el = document.getElementById('shortformEl');
 		if (el) {
 			setTimeout(() => {
+				show = true;
 				el.focus();
 			}, 15);
 		}
 	});
 </script>

-<Card.Root class="mx-auto w-[490px]">
-	<Card.Header>
-		<Card.Title>Lägg till förkortning</Card.Title>
-		<Card.Description></Card.Description>
-	</Card.Header>
-	<Card.Content class="mx-auto">
-		<form
-			class="grid gap-4 py-4"
-			method="post"
-			enctype="multipart/form-data"
-			on:submit={handleCreate}
-			autocomplete="off"
-		>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label>Förkortning</Label>
-				<Input
-					id="shortformEl"
-					bind:value={abbForm.shortform}
-					focus
-					placeholder=""
-					class="w-[290px]"
-				/>
-			</div>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label>Text</Label>
-				<Input id="phraseEl" bind:value={abbForm.phrase} placeholder="" class="w-[290px]" />
-			</div>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label>Mål</Label>
-				<Select.Root selected={abbForm.target} {onSelectedChange}>
-					<Select.Trigger class="w-[290px]">
-						<Select.Value placeholder="Ingen lista vald" />
-					</Select.Trigger>
+<div use:clickOutside={cancelCreate}>
+	<Card.Root class="mx-auto w-[490px]">
+		<Card.Header>
+			<Card.Title>Lägg till förkortning</Card.Title>
+			<Card.Description></Card.Description>
+		</Card.Header>
+		<Card.Content class="mx-auto">
+			<form
+				class="grid gap-4 py-4"
+				method="post"
+				enctype="multipart/form-data"
+				on:submit={handleCreate}
+				autocomplete="off"
+			>
+				<div class="grid grid-cols-4 items-center gap-4">
+					<Label>Förkortning</Label>
+					<Input
+						id="shortformEl"
+						bind:value={abbForm.shortform}
+						focus
+						placeholder=""
+						class="w-[290px]"
+					/>
+				</div>
+				<div class="grid grid-cols-4 items-center gap-4">
+					<Label>Text</Label>
+					<Input id="phraseEl" bind:value={abbForm.phrase} placeholder="" class="w-[290px]" />
+				</div>
+				<div class="grid grid-cols-4 items-center gap-4">
+					<Label>Mål</Label>
+					<Select.Root selected={abbForm.target} {onSelectedChange}>
+						<Select.Trigger class="w-[290px]">
+							<Select.Value placeholder="Ingen lista vald" />
+						</Select.Trigger>

-					<Select.Content>
-						{#each selectedLists as list}
-							<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</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">
-						<p class="font-bold">Fel vid import</p>
-						<ul class="p-6">
-							{#each abbForms.errors as error}
-								<li class="list-disc">{error}</li>
+						<Select.Content>
+							{#each selectedLists as list}
+								<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
 							{/each}
-						</ul>
-					</div>
-				</ScrollArea>
-			{/if}
-			<button type="submit" class="hidden" />
-		</form>
-	</Card.Content>
-	<!--
+						</Select.Content>
+					</Select.Root>
+				</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"
+						>
+							<p class="font-bold">Fel vid import</p>
+							<ul class="p-6">
+								{#each abbForms.errors as error}
+									<li class="list-disc">{error}</li>
+								{/each}
+							</ul>
+						</div>
+					</ScrollArea>
+				{/if}
+				<button type="submit" class="hidden" />
+			</form>
+		</Card.Content>
+		<!--
 	<Card.Footer class="flex justify-between">
 		<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
 		<Button on:click={handleCreate}>Importera</Button>
 	</Card.Footer>
 	-->
-</Card.Root>
+	</Card.Root>
+</div>
--- a/src/components/import/import.svelte
+++ b/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
@ -97,21 +111,25 @@ förkn=förkortningen
 			</div>

 			{#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">
-			  <p class="font-bold">Fel vid import</p>
-			  <ul class="p-6">
-				{#each importState.errors as error}
-					<li class="list-disc">{error}</li>
-				{/each}
-			  </ul>
-			</div>
-			</ScrollArea>
+				<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">
+						<p class="font-bold">Fel vid import</p>
+						<ul class="p-6">
+							{#each importState.errors as error}
+								<li class="list-disc">{error}</li>
+							{/each}
+						</ul>
+					</div>
+				</ScrollArea>
 			{/if}
 		</form>
 	</Card.Content>
 	<Card.Footer class="flex justify-between">
-		<Button on:click={cancelImport} variant="outline">Avbryt</Button>
-		<Button on:click={handleImport}>Importera</Button>
+		{#if importing}
+			<Progress value={progress} />
+		{:else}
+			<Button on:click={cancelImport} variant="outline">Avbryt</Button>
+			<Button on:click={onsubmit}>Importera</Button>
+		{/if}
 	</Card.Footer>
 </Card.Root>
--- a/src/components/listselector.svelte
+++ b/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,65 +55,78 @@
 			listSelectorForm.subject = { value: subject.id, label: subject.name };
 			console.log(listSelectorForm);
 		});
+
+		setTimeout(() => {
+			show = true;
+		}, 15);
 	});
+	const close = () => {
+		if (show == true) {
+			appState.open = '';
+		}
+	};
 </script>

-<Card.Root class="mx-auto w-[490px]">
-	<Card.Header>
-		<Card.Title>Välj förkortningslistor</Card.Title>
-		<Card.Description></Card.Description>
-	</Card.Header>
-	<Card.Content class="mx-auto">
-		<form
-			class="grid gap-4 py-4"
-			method="post"
-			enctype="multipart/form-data"
-			onsubmit={onSubmit}
-			autocomplete="off"
-		>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label>Standardlista</Label>
-				<Select.Root
-					selected={listSelectorForm.standard}
-					onSelectedChange={onSelectedStandardListChange}
+{#if show}
+	<div use:clickOutside={close}>
+		<Card.Root class="mx-auto w-[490px]">
+			<Card.Header>
+				<Card.Title>Välj förkortningslistor</Card.Title>
+				<Card.Description></Card.Description>
+			</Card.Header>
+			<Card.Content class="mx-auto">
+				<form
+					class="grid gap-4 py-4"
+					method="post"
+					enctype="multipart/form-data"
+					onsubmit={onSubmit}
+					autocomplete="off"
 				>
-					<Select.Trigger class="w-[290px]">
-						<Select.Value placeholder="Ingen lista vald" />
-					</Select.Trigger>
+					<div class="grid grid-cols-4 items-center gap-4">
+						<Label>Standardlista</Label>
+						<Select.Root
+							selected={listSelectorForm.standard}
+							onSelectedChange={onSelectedStandardListChange}
+						>
+							<Select.Trigger class="w-[290px]">
+								<Select.Value placeholder="Ingen lista vald" />
+							</Select.Trigger>

-					<Select.Content>
-						{#each standardLists as list}
-							<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label>Ämneslista</Label>
-				<Select.Root
-					selected={listSelectorForm.subject}
-					onSelectedChange={onSelectedSubjectListChange}
-					disabled={subjectLists.length < 1}
-				>
-					<Select.Trigger class="w-[290px]">
-						<Select.Value placeholder="Ingen lista vald" />
-					</Select.Trigger>
+							<Select.Content>
+								{#each standardLists as list}
+									<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+					<div class="grid grid-cols-4 items-center gap-4">
+						<Label>Ämneslista</Label>
+						<Select.Root
+							selected={listSelectorForm.subject}
+							onSelectedChange={onSelectedSubjectListChange}
+							disabled={subjectLists.length < 1}
+						>
+							<Select.Trigger class="w-[290px]">
+								<Select.Value placeholder="Ingen lista vald" />
+							</Select.Trigger>

-					<Select.Content>
-						<Select.Item value={0} label="Ingen lista vald">Ingen lista vald</Select.Item>
-						{#each subjectLists as list}
-							<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
-						{/each}
-					</Select.Content>
-				</Select.Root>
-			</div>
-			<button type="submit" class="hidden" />
-		</form>
-	</Card.Content>
-	<!--
+							<Select.Content>
+								<Select.Item value={0} label="Ingen lista vald">Ingen lista vald</Select.Item>
+								{#each subjectLists as list}
+									<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					</div>
+					<button type="submit" class="hidden" />
+				</form>
+			</Card.Content>
+			<!--
 	<Card.Footer class="flex justify-between">
 		<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
 		<Button on:click={handleCreate}>Importera</Button>
 	</Card.Footer>
 	-->
-</Card.Root>
+		</Card.Root>
+	</div>
+{/if}
--- a/src/components/textarea.svelte
+++ b/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>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -51,8 +51,8 @@
 			<ListSelector />
 		</div>
 	{/if}
+	<Menu />
 	<div class="h-full">
-		<Menu />
 		<Textarea bind:ref={textarea} />
 		<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
 		<!-- <Dashboard open={showDashboard} />-->