From 0fb7c0f7e70ffa578b27a708542bd6640f8d57df Mon Sep 17 00:00:00 2001
From: Mohammed Alamri <modev32@gmail.com>
Date: Wed, 4 Dec 2024 23:24:39 +0300
Subject: [PATCH] add confirm before removing field

---
 src/lib/form/Form.svelte | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/lib/form/Form.svelte b/src/lib/form/Form.svelte
index 1b98964..8c0f8b3 100644
--- a/src/lib/form/Form.svelte
+++ b/src/lib/form/Form.svelte
@@ -8,6 +8,7 @@
 	import elements from '$lib/elements';
 	import { slide } from 'svelte/transition';
 	import type { Component } from 'svelte';
+	import Popover from '$lib/components/Popover.svelte';
 
 	// Components
 	import Button from '$lib/components/Button.svelte';
@@ -55,7 +56,7 @@
 
 	// Remove field.
 	const removeField = (fieldId: string): void => {
-				form.activeElement = null;
+		form.activeElement = null;
 		form.fields = form.fields.filter((f) => f.id !== fieldId);
 	};
 
@@ -70,7 +71,7 @@
 			const field = prepareField(event.item.dataset.type);
 			const { newIndex } = event;
 			form.fields = [...form.fields.slice(0, newIndex), field, ...form.fields.slice(newIndex)];
-							form.activeElement = form.fields[newIndex];
+			form.activeElement = form.fields[newIndex];
 		},
 		onRemove(event: SortableEvent) {
 			const { oldDraggableIndex } = event;
@@ -92,10 +93,10 @@
 <form
 	onsubmit={onSubmit}
 	onreset={onReset}
-	class="border-slate-200 shadow-sm border rounded-sm p-1 md:p-2 mb-1 select-none mx-auto"
+	class="relative border-slate-200 shadow-sm border rounded-sm p-1 md:p-2 mb-1 select-none mx-auto"
 	class:md:max-w-[80%]={isPreview.state}
 >
-	<div class="p-2 border {isDragging.state ? 'shadow-inner rounded-sm bg-yellow-100/20' : 'border-transparent'}">
+	<div class="relative p-2 border {isDragging.state ? 'shadow-inner rounded-sm bg-yellow-100/20' : 'border-transparent'}">
 		<!-- Empty form -->
 		{#if form.fields.length === 0}
 			<div class="flex items-center justify-center">
@@ -109,19 +110,25 @@
 				<div
 					class:border={!isPreview.state}
 					class:shadow-sm={!isPreview.state}
-					class="flex {isActive ? 'border-blue-600' : 'border-slate-300'} rounded-sm"
+					class="relative flex {isActive ? 'border-blue-600' : 'border-slate-300'} rounded-sm"
 					data-fieldid={field.id}
 					use:elementClick={() => (form.activeElement = field)}
 				>
 					{#if !isPreview.state}
 						<div
-							class="flex flex-col border-e border-slate-300 bg-slate-50/50 hover:bg-slate-100 rounded-sm p-1 space-y-2"
+							class="flex flex-col border-e border-slate-300 bg-slate-50/50 hover:bg-slate-100 rounded-sm p-1 gap-2"
 							transition:slide={{ axis: 'x', duration: 100 }}
 						>
 							<Icon icon="fluent:drag-24-regular" class="handle cursor-move text-slate-600" />
-							<button type="button" onclick={() => removeField(field.id)}>
-								<Icon icon="material-symbols:delete-outline-rounded" class="text-slate-600" />
-							</button>
+							<Popover positioning={{ placement: 'top' }} portalled={true} class="bg-slate-900/60 backdrop-blur-sm">
+								{#snippet trigger()}
+									<Icon icon="material-symbols:delete-outline-rounded" class="text-slate-600" />
+								{/snippet}
+								<div class="flex items-center space-x-2 p-1">
+									<p class="text-white text-xs leading-none">Remove this field?</p>
+									<Button size="sm" class="min-w-10" onclick={() => removeField(field.id)} text="Yes" variant="danger" />
+								</div>
+							</Popover>
 						</div>
 					{/if}
 					<div class="relative flex flex-col justify-center p-2 w-full bg-white">
@@ -135,7 +142,7 @@
 		</Dropzone>
 	</div>
 	<div class="flex space-x-2 mt-2">
-		<Button type="submit" text={submitBtn.text} />
-		<Button type="reset" text={resetBtn.text} />
+		<Button variant="primary" text={submitBtn.text} />
+		<Button variant="secondary" text={resetBtn.text} />
 	</div>
 </form>