mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/dialog: internal refactor
This commit is contained in:
parent
9787a04e19
commit
705fac16a6
3 changed files with 14 additions and 33 deletions
|
@ -9,22 +9,11 @@
|
|||
|
||||
<div id="dialog-holder">
|
||||
{#each $dialogs as dialog}
|
||||
{#if dialog.type === "small"}
|
||||
<SmallDialog
|
||||
id={dialog.id}
|
||||
title={dialog.title}
|
||||
meowbalt={dialog.meowbalt}
|
||||
icon={dialog.icon}
|
||||
bodyText={dialog.bodyText}
|
||||
bodySubText={dialog.bodySubText}
|
||||
buttons={dialog.buttons}
|
||||
/>
|
||||
{@const { type, ...data } = dialog}
|
||||
{#if type === "small"}
|
||||
<SmallDialog {...data} />
|
||||
{:else if dialog.type === "picker"}
|
||||
<PickerDialog
|
||||
id={dialog.id}
|
||||
items={dialog.items}
|
||||
buttons={dialog.buttons}
|
||||
/>
|
||||
<PickerDialog {...data} />
|
||||
{/if}
|
||||
{/each}
|
||||
<div id="dialog-backdrop" class:visible={backdropVisible}></div>
|
||||
|
|
|
@ -15,8 +15,8 @@
|
|||
import IconBoxMultiple from "@tabler/icons-svelte/IconBoxMultiple.svelte";
|
||||
|
||||
export let id: string;
|
||||
export let items: Optional<DialogPickerItem[]>;
|
||||
export let buttons: Optional<DialogButton[]>;
|
||||
export let items: Optional<DialogPickerItem[]> = undefined;
|
||||
export let buttons: Optional<DialogButton[]> = undefined;
|
||||
|
||||
let dialogDescription = "dialog.picker.description.";
|
||||
|
||||
|
@ -50,14 +50,6 @@
|
|||
open = true;
|
||||
});
|
||||
}
|
||||
|
||||
// item id for alt text
|
||||
let counter = 0;
|
||||
|
||||
const itemNumber = () => {
|
||||
counter++
|
||||
return counter
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog
|
||||
|
@ -81,8 +73,8 @@
|
|||
</div>
|
||||
<div class="picker-body">
|
||||
{#if items}
|
||||
{#each items as item}
|
||||
<PickerItem {item} number={itemNumber()} />
|
||||
{#each items as item, i}
|
||||
<PickerItem {item} number={i + 1} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -13,12 +13,12 @@
|
|||
import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte";
|
||||
|
||||
export let id: string;
|
||||
export let meowbalt: Optional<MeowbaltEmotions>;
|
||||
export let icon: Optional<SmallDialogIcons>;
|
||||
export let title: string = "";
|
||||
export let bodyText: string = "";
|
||||
export let bodySubText: string = "";
|
||||
export let buttons: Optional<DialogButton[]>;
|
||||
export let meowbalt: Optional<MeowbaltEmotions> = undefined;
|
||||
export let icon: Optional<SmallDialogIcons> = undefined;
|
||||
export let title = "";
|
||||
export let bodyText = "";
|
||||
export let bodySubText = "";
|
||||
export let buttons: Optional<DialogButton[]> = undefined;
|
||||
|
||||
let dialogParent: HTMLDialogElement;
|
||||
|
||||
|
|
Loading…
Reference in a new issue