Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/dialog: internal refactor

Browse source
This commit is contained in:
dumbmoron 2024-07-22 09:24:17 +00:00 committed by wukko
parent 9787a04e19
commit 705fac16a6
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 14 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
web/src/components/dialog/DialogHolder.svelte
View file

@ -9,22 +9,11 @@
<div id="dialog-holder"> <div id="dialog-holder">
{#each $dialogs as dialog} {#each $dialogs as dialog}
{#if dialog.type === "small"} {@const { type, ...data } = dialog}
<SmallDialog {#if type === "small"}
id={dialog.id} <SmallDialog {...data} />
title={dialog.title}
meowbalt={dialog.meowbalt}
icon={dialog.icon}
bodyText={dialog.bodyText}
bodySubText={dialog.bodySubText}
buttons={dialog.buttons}
/>
{:else if dialog.type === "picker"} {:else if dialog.type === "picker"}
<PickerDialog <PickerDialog {...data} />
id={dialog.id}
items={dialog.items}
buttons={dialog.buttons}
/>
{/if} {/if}
{/each} {/each}
<div id="dialog-backdrop" class:visible={backdropVisible}></div> <div id="dialog-backdrop" class:visible={backdropVisible}></div>

16
web/src/components/dialog/PickerDialog.svelte
View file

@ -15,8 +15,8 @@
import IconBoxMultiple from "@tabler/icons-svelte/IconBoxMultiple.svelte"; import IconBoxMultiple from "@tabler/icons-svelte/IconBoxMultiple.svelte";
export let id: string; export let id: string;
export let items: Optional<DialogPickerItem[]>; export let items: Optional<DialogPickerItem[]> = undefined;
export let buttons: Optional<DialogButton[]>; export let buttons: Optional<DialogButton[]> = undefined;
let dialogDescription = "dialog.picker.description."; let dialogDescription = "dialog.picker.description.";
@ -50,14 +50,6 @@
open = true; open = true;
}); });
} }
// item id for alt text
let counter = 0;
const itemNumber = () => {
counter++
return counter
}
</script> </script>
<dialog <dialog
@ -81,8 +73,8 @@
</div> </div>
<div class="picker-body"> <div class="picker-body">
{#if items} {#if items}
{#each items as item} {#each items as item, i}
<PickerItem {item} number={itemNumber()} /> <PickerItem {item} number={i + 1} />
{/each} {/each}
{/if} {/if}
</div> </div>

12
web/src/components/dialog/SmallDialog.svelte
View file

@ -13,12 +13,12 @@
import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte"; import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte";
export let id: string; export let id: string;
export let meowbalt: Optional<MeowbaltEmotions>; export let meowbalt: Optional<MeowbaltEmotions> = undefined;
export let icon: Optional<SmallDialogIcons>; export let icon: Optional<SmallDialogIcons> = undefined;
export let title: string = ""; export let title = "";
export let bodyText: string = ""; export let bodyText = "";
export let bodySubText: string = ""; export let bodySubText = "";
export let buttons: Optional<DialogButton[]>; export let buttons: Optional<DialogButton[]> = undefined;
let dialogParent: HTMLDialogElement; let dialogParent: HTMLDialogElement;