From 9262ace19ad0484723e1d4412eb6b7790e7e3994 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Esbj=C3=B6rn=20Stenberg?= <me@stagrim.com>
Date: Tue, 19 Nov 2024 23:40:51 +0100
Subject: [PATCH] Fixed Svelte 5 breaking changes; form inside form

---
 src/lib/components/Pagination.svelte          |   6 +-
 .../components/forms/FormSubmitButton.svelte  |   2 +
 src/routes/(app)/admin/links/+page.svelte     |  66 ++++----
 src/routes/(app)/events/EventEditor.svelte    | 118 ++++++++-------
 src/routes/(app)/events/[slug]/+page.svelte   | 141 +++++++++---------
 5 files changed, 172 insertions(+), 161 deletions(-)

diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
index e2a7f1be4..3a9e4104d 100644
--- a/src/lib/components/Pagination.svelte
+++ b/src/lib/components/Pagination.svelte
@@ -12,10 +12,10 @@ e.g. `?page=1`, `?page=2`, etc. The page number is stored in the URL query.
   import { twMerge } from "tailwind-merge";
 
   let {
-    class: clazz,
+    class: clazz = "",
     count,
-    getPageName = (n: number): string => (n + 1).toString(),
-    getPageNumber = (n: string): number => +n - 1,
+    getPageName = (n) => (n + 1).toString(),
+    getPageNumber = (n) => n - 1,
     fieldName = "page",
     showPrev = true,
     showNext = true,
diff --git a/src/lib/components/forms/FormSubmitButton.svelte b/src/lib/components/forms/FormSubmitButton.svelte
index 8ea1b05f8..7b7a3ddd3 100644
--- a/src/lib/components/forms/FormSubmitButton.svelte
+++ b/src/lib/components/forms/FormSubmitButton.svelte
@@ -10,12 +10,14 @@
   export let superform: SuperForm<T>;
   let clazz: string | undefined = undefined;
   export { clazz as class };
+  export let form: string | undefined = undefined;
   const { delayed } = superform;
 </script>
 
 <LoadingButton
   class={clazz}
   type="submit"
+  {form}
   isLoading={$delayed}
   {...$$restProps}
 >
diff --git a/src/routes/(app)/admin/links/+page.svelte b/src/routes/(app)/admin/links/+page.svelte
index 5ee3a5e7f..dc57ddb2b 100644
--- a/src/routes/(app)/admin/links/+page.svelte
+++ b/src/routes/(app)/admin/links/+page.svelte
@@ -176,7 +176,8 @@
 
 <PageHeader title={m.admin_links_table_title()} />
 
-<form action="?/delete" method="post" use:enhance>
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<form action="?/delete" method="post" id="form_delete" use:enhance>
   <div class="flex items-end gap-2">
     <button
       type="button"
@@ -201,35 +202,6 @@
     </section>
   </div>
 
-  <dialog bind:this={removeModal} class="modal modal-bottom sm:modal-middle">
-    <div class="modal-box">
-      <h3 class="text-lg font-bold">{m.admin_links_remove_title()}</h3>
-      <p class="py-4">
-        {m.admin_links_remove_confirmation({
-          amount: checkboxes.filter((c) => c).length,
-        })}
-      </p>
-      <p class="text-xs text-base-content/60">
-        {data.domains
-          .filter((_, i) => checkboxes.at(i))
-          .map(({ shortCode }) => shortCode)
-          .join(", ")}
-      </p>
-      <div class="modal-action">
-        <button
-          type="submit"
-          class="btn btn-error"
-          on:click={() => removeModal?.close()}
-        >
-          {m.admin_links_remove_submit()}
-        </button>
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button class="cursor-auto" />
-    </form>
-  </dialog>
-
   <div class="overflow-x-auto">
     <table class="table my-4">
       <thead>
@@ -266,7 +238,7 @@
               </th>
             {/if}
           {/each}
-          <th />
+          <th></th>
         </tr>
       </thead>
       <tbody>
@@ -334,6 +306,38 @@
   </div>
 </form>
 
+<dialog bind:this={removeModal} class="modal modal-bottom sm:modal-middle">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">{m.admin_links_remove_title()}</h3>
+    <p class="py-4">
+      {m.admin_links_remove_confirmation({
+        amount: checkboxes.filter((c) => c).length,
+      })}
+    </p>
+    <p class="text-xs text-base-content/60">
+      {data.domains
+        .filter((_, i) => checkboxes.at(i))
+        .map(({ shortCode }) => shortCode)
+        .join(", ")}
+    </p>
+    <div class="modal-action">
+      <button
+        type="submit"
+        form="form_delete"
+        class="btn btn-error"
+        on:click={() => removeModal?.close()}
+      >
+        {m.admin_links_remove_submit()}
+      </button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <!-- svelte-ignore a11y_consider_explicit_label -->
+    <!-- svelte-ignore element_invalid_self_closing_tag -->
+    <button class="cursor-auto" />
+  </form>
+</dialog>
+
 <dialog bind:this={editModal} class="modal modal-top sm:modal-middle">
   <div class="modal-box !overflow-y-visible">
     <form
diff --git a/src/routes/(app)/events/EventEditor.svelte b/src/routes/(app)/events/EventEditor.svelte
index 5021b103d..d4e6b2d37 100644
--- a/src/routes/(app)/events/EventEditor.svelte
+++ b/src/routes/(app)/events/EventEditor.svelte
@@ -42,6 +42,7 @@
       class="form-control items-start gap-2"
       use:enhance
       enctype="multipart/form-data"
+      id="editForm"
     >
       <slot name="form-start" />
       <LangTabs bind:activeTab class="self-stretch">
@@ -167,64 +168,6 @@
           {creating ? m.news_publish() : m.save()}
         </FormSubmitButton>
       {/if}
-      <dialog class="modal" bind:this={modal}>
-        <div class="modal-box">
-          <h3 class="text-lg font-bold">{m.events_thisIsRecurring()}</h3>
-          <div class="py-4">
-            <div class="form-control">
-              <label class="label cursor-pointer">
-                <span class="label-text">
-                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                  {@html m.events_onlyEditThis()}
-                </span>
-                <input
-                  type="radio"
-                  name="editType"
-                  class="radio"
-                  bind:group={$form.editType}
-                  value={"THIS"}
-                />
-              </label>
-            </div>
-            <div class="form-control">
-              <label class="label cursor-pointer">
-                <span class="label-text">
-                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                  {@html m.events_editThisAndFuture()}
-                </span>
-                <input
-                  type="radio"
-                  name="editType"
-                  class="radio"
-                  bind:group={$form.editType}
-                  value={"FUTURE"}
-                />
-              </label>
-            </div>
-            <div class="form-control">
-              <label class="label cursor-pointer">
-                <span class="label-text">
-                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                  {@html m.events_editAll()}
-                </span>
-                <input
-                  type="radio"
-                  name="editType"
-                  class="radio"
-                  bind:group={$form.editType}
-                  value={"ALL"}
-                />
-              </label>
-            </div>
-          </div>
-          <FormSubmitButton {superform} class="btn btn-primary my-4">
-            {creating ? m.news_publish() : m.save()}
-          </FormSubmitButton>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button>close</button>
-        </form>
-      </dialog>
     </form>
     <slot name="error" />
   </section>
@@ -257,3 +200,62 @@
     </Event>
   </section>
 </main>
+
+<dialog class="modal" bind:this={modal}>
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">{m.events_thisIsRecurring()}</h3>
+    <div class="py-4">
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html m.events_onlyEditThis()}
+          </span>
+          <input
+            type="radio"
+            name="editType"
+            class="radio"
+            bind:group={$form.editType}
+            value={"THIS"}
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html m.events_editThisAndFuture()}
+          </span>
+          <input
+            type="radio"
+            name="editType"
+            class="radio"
+            bind:group={$form.editType}
+            value={"FUTURE"}
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html m.events_editAll()}
+          </span>
+          <input
+            type="radio"
+            name="editType"
+            class="radio"
+            bind:group={$form.editType}
+            value={"ALL"}
+          />
+        </label>
+      </div>
+    </div>
+    <FormSubmitButton form="editForm" {superform} class="btn btn-primary my-4">
+      {creating ? m.news_publish() : m.save()}
+    </FormSubmitButton>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
diff --git a/src/routes/(app)/events/[slug]/+page.svelte b/src/routes/(app)/events/[slug]/+page.svelte
index 32bb21c1e..5ec693737 100644
--- a/src/routes/(app)/events/[slug]/+page.svelte
+++ b/src/routes/(app)/events/[slug]/+page.svelte
@@ -21,6 +21,7 @@
 <SetPageTitle title={event.title} />
 
 <Event {event}>
+  <!-- svelte-ignore a11y_consider_explicit_label -->
   <div slot="actions" class="flex flex-row">
     {#if data.canEdit}
       <a
@@ -28,11 +29,11 @@
         class="btn btn-square btn-ghost btn-md"
         title={m.events_edit()}
       >
-        <span class="i-mdi-edit text-xl" />
+        <span class="i-mdi-edit text-xl"></span>
       </a>
     {/if}
     {#if data.canDelete}
-      <form method="POST" action="?/removeEvent" use:enhance>
+      <form method="POST" action="?/removeEvent" id="removeEvent" use:enhance>
         <button
           type={submitString}
           class="btn btn-square btn-ghost btn-md"
@@ -43,74 +44,8 @@
             }
           }}
         >
-          <span class="i-mdi-delete text-xl" />
+          <span class="i-mdi-delete text-xl"></span>
         </button>
-        <dialog class="modal" bind:this={modal}>
-          <div class="modal-box">
-            <h3 class="text-lg font-bold">{m.events_thisIsRecurring()}</h3>
-            <div class="py-4">
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text">
-                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    {@html m.events_deleteThisEvent()}
-                  </span>
-                  <input
-                    type="radio"
-                    name="removeType"
-                    class="radio"
-                    bind:group={$form.removeType}
-                    value={"THIS"}
-                  />
-                </label>
-              </div>
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text">
-                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    {@html m.events_deleteThisAndFutureEvents()}
-                  </span>
-                  <input
-                    type="radio"
-                    name="removeType"
-                    class="radio"
-                    bind:group={$form.removeType}
-                    value={"FUTURE"}
-                  />
-                </label>
-              </div>
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text">
-                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    {@html m.events_deleteAllEvents()}
-                  </span>
-                  <input
-                    type="radio"
-                    name="removeType"
-                    class="radio"
-                    bind:group={$form.removeType}
-                    value={"ALL"}
-                  />
-                </label>
-              </div>
-            </div>
-            <div class="modal-action">
-              <button
-                class="btn btn-error"
-                type="submit"
-                on:click={() => {
-                  modal.close();
-                }}
-              >
-                {m.events_delete()}
-              </button>
-            </div>
-          </div>
-          <form method="dialog" class="modal-backdrop">
-            <button>close</button>
-          </form>
-        </dialog>
       </form>
     {/if}
   </div>
@@ -143,3 +78,71 @@
     </div>
   </div>
 </Event>
+
+<dialog class="modal" bind:this={modal}>
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">{m.events_thisIsRecurring()}</h3>
+    <div class="py-4">
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html m.events_deleteThisEvent()}
+          </span>
+          <input
+            type="radio"
+            name="removeType"
+            class="radio"
+            bind:group={$form.removeType}
+            value={"THIS"}
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html m.events_deleteThisAndFutureEvents()}
+          </span>
+          <input
+            type="radio"
+            name="removeType"
+            class="radio"
+            bind:group={$form.removeType}
+            value={"FUTURE"}
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html m.events_deleteAllEvents()}
+          </span>
+          <input
+            type="radio"
+            name="removeType"
+            class="radio"
+            bind:group={$form.removeType}
+            value={"ALL"}
+          />
+        </label>
+      </div>
+    </div>
+    <div class="modal-action">
+      <button
+        class="btn btn-error"
+        type="submit"
+        form="removeEvent"
+        on:click={() => {
+          modal.close();
+        }}
+      >
+        {m.events_delete()}
+      </button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>