Skip to content

Commit

Permalink
Fixed Svelte 5 breaking changes; form inside form
Browse files Browse the repository at this point in the history
  • Loading branch information
@stagrim
stagrim committed Nov 19, 2024
1 parent e2a752f commit 9262ace
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 161 deletions.
6 changes: 3 additions & 3 deletions src/lib/components/Pagination.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions src/lib/components/forms/FormSubmitButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
66 changes: 35 additions & 31 deletions src/routes/(app)/admin/links/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -266,7 +238,7 @@
</th>
{/if}
{/each}
<th />
<th></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -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
Expand Down
118 changes: 60 additions & 58 deletions src/routes/(app)/events/EventEditor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Loading

0 comments on commit 9262ace

Please sign in to comment.