From fe7600a67e5f666882067db66870bf036e98d297 Mon Sep 17 00:00:00 2001
From: TatLead <hkdsethomas@gmail.com>
Date: Wed, 8 May 2024 18:15:31 +0800
Subject: [PATCH] Update routes

---
 package.json                |  2 +-
 src/routes/Clipboard.svelte | 52 +++++++++++++++----------------------
 src/routes/Terminal.svelte  | 11 ++------
 3 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index 4a13e98..c2dff2e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@battlefieldduck/xterm-svelte",
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"description": "A SvelteKit wrapper for Xterm.js, enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless updates with the latest SvelteKit and Xterm.js versions.",
 	"keywords": ["svelte", "xterm", "xterm-js", "sveltekit", "xterm-svelte"],
 	"repository": {
diff --git a/src/routes/Clipboard.svelte b/src/routes/Clipboard.svelte
index b44fe94..1546baf 100644
--- a/src/routes/Clipboard.svelte
+++ b/src/routes/Clipboard.svelte
@@ -1,49 +1,38 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
-	let copyClipboard: HTMLElement;
 	let copyButton: HTMLElement;
 	let defaultIcon: HTMLElement;
 	let successIcon: HTMLElement;
 	let defaultTooltipMessage: HTMLElement;
 	let successTooltipMessage: HTMLElement;
 
-	onMount(() => {
-		const clipboard = FlowbiteInstances.getInstance('CopyClipboard', copyClipboard.id);
-		const tooltip = FlowbiteInstances.getInstance('Tooltip', copyButton.id);
-
-		clipboard.updateOnCopyCallback(() => {
-			showSuccess();
+	const onCopyButtonClick = () => {
+		showSuccess();
+		setTimeout(() => resetToDefault(), 2000);
+	};
 
-			// reset to default state
-			setTimeout(() => {
-				resetToDefault();
-			}, 2000);
-		});
-
-		const showSuccess = () => {
-			defaultIcon.classList.add('hidden');
-			successIcon.classList.remove('hidden');
-			defaultTooltipMessage.classList.add('hidden');
-			successTooltipMessage.classList.remove('hidden');
-			tooltip.show();
-		};
+	const showSuccess = () => {
+		defaultIcon.classList.add('hidden');
+		successIcon.classList.remove('hidden');
+		defaultTooltipMessage.classList.add('hidden');
+		successTooltipMessage.classList.remove('hidden');
+		const tooltip = FlowbiteInstances.getInstance('Tooltip', copyButton.id);
+		tooltip.show();
+	};
 
-		const resetToDefault = () => {
-			defaultIcon.classList.remove('hidden');
-			successIcon.classList.add('hidden');
-			defaultTooltipMessage.classList.remove('hidden');
-			successTooltipMessage.classList.add('hidden');
-			tooltip.hide();
-		};
-	});
+	const resetToDefault = () => {
+		defaultIcon.classList.remove('hidden');
+		successIcon.classList.add('hidden');
+		defaultTooltipMessage.classList.remove('hidden');
+		successTooltipMessage.classList.add('hidden');
+		const tooltip = FlowbiteInstances.getInstance('Tooltip', copyButton.id);
+		tooltip.hide();
+	};
 </script>
 
 <div class="mb-10 w-full max-w-[24rem] dark">
 	<div class="relative">
 		<label for="npm-install-copy-button" class="sr-only">Label</label>
 		<input
-			bind:this={copyClipboard}
 			id="npm-install-copy-button"
 			type="text"
 			class="col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-900 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-100 dark:focus:ring-blue-500 dark:focus:border-blue-500"
@@ -52,6 +41,7 @@
 			readonly
 		/>
 		<button
+			on:click={onCopyButtonClick}
 			data-copy-to-clipboard-target="npm-install-copy-button"
 			data-tooltip-target="tooltip-copy-npm-install-copy-button"
 			class="absolute end-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center"
diff --git a/src/routes/Terminal.svelte b/src/routes/Terminal.svelte
index ec4a8c6..bb89e15 100644
--- a/src/routes/Terminal.svelte
+++ b/src/routes/Terminal.svelte
@@ -6,7 +6,6 @@
 		Terminal,
 		FitAddon
 	} from '$lib/index.js';
-	import { onMount } from 'svelte';
 
 	let handleResize: () => void;
 	let runCommand: () => void;
@@ -37,13 +36,6 @@
 			isCommandRunning = false;
 		};
 	}
-
-	onMount(() => {
-		return () => {
-			window.removeEventListener('resize', handleResize);
-		};
-	});
-
 	async function onLoad(event: CustomEvent<{ terminal: Terminal }>) {
 		const terminal = event.detail.terminal;
 		terminal.write('C:\\Users\\Administrator>ping 1.1.1.1');
@@ -55,7 +47,6 @@
 		fitAddon.fit();
 
 		handleResize = createResizeHandler(fitAddon);
-		window.addEventListener('resize', handleResize);
 	}
 
 	function onKey(event: CustomEvent<{ key: string; domEvent: KeyboardEvent }>) {
@@ -76,6 +67,8 @@
 	};
 </script>
 
+<svelte:window on:resize={handleResize} />
+
 <div
 	class="p-1 block border border-gray-200 rounded-lg border-gray-700 shadow"
 	style="background-color:{options.theme?.background}"