granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

migrate dialog consumers to ModalHeader/Body/Footer pattern

Browse source
This commit is contained in:
Justin Edmund 2025-12-13 14:55:46 -08:00
parent a3c5676c4c
commit 789494e773
4 changed files with 277 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/lib/components/collection/AddToCollectionModal.svelte
View file

@ -12,6 +12,9 @@
useAddSummonsToCollection
} from '$lib/api/mutations/collection.mutations'
import Dialog from '$lib/components/ui/Dialog.svelte'
import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
import ModalBody from '$lib/components/ui/ModalBody.svelte'
import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
import Button from '$lib/components/ui/Button.svelte'
import Icon from '$lib/components/Icon.svelte'
import CollectionFilters, {
@ -316,8 +319,9 @@
})
</script>
<Dialog bind:open {onOpenChange} title={dialogTitle} size="large">
<Dialog bind:open {onOpenChange} size="large">
{#snippet children()}
<ModalHeader title={dialogTitle} />
<div class="modal-content">
<!-- Search input -->
<div class="search-bar">
@ -441,9 +445,8 @@
{/if}
</div>
</div>
{/snippet}
{#snippet footer()}
<ModalFooter>
{#snippet children()}
<div class="modal-footer">
<div class="footer-left">
{#if selectedCount > 0}
@ -476,6 +479,8 @@
</div>
</div>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
<style lang="scss">

17
src/lib/components/dialogs/ConflictDialog.svelte
View file

@ -18,6 +18,9 @@
-->
<script lang="ts">
import Dialog from '$lib/components/ui/Dialog.svelte'
import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
import ModalBody from '$lib/components/ui/ModalBody.svelte'
import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
import Button from '$lib/components/ui/Button.svelte'
import type { ConflictData } from '$lib/types/api/conflict'
import type { GridCharacter, GridWeapon } from '$lib/types/api/party'
@ -167,7 +170,11 @@
}
</script>
<Dialog bind:open onOpenChange={handleOpenChange} title={m.conflict_title()}>
<Dialog bind:open onOpenChange={handleOpenChange}>
{#snippet children()}
<ModalHeader title={m.conflict_title()} />
<ModalBody>
{#snippet children()}
{#if conflict}
<div class={styles.content}>
<p class={styles.message}>{conflictMessage}</p>
@ -224,8 +231,10 @@
</div>
</div>
{/if}
{#snippet footer()}
{/snippet}
</ModalBody>
<ModalFooter>
{#snippet children()}
<Button variant="ghost" onclick={handleCancel} disabled={isLoading}>
{m.conflict_cancel()}
</Button>
@ -233,4 +242,6 @@
{m.conflict_confirm()}
</Button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>

27
src/lib/components/party/Party.svelte
View file

@ -46,6 +46,9 @@
import type { AddItemResult } from '$lib/types/api/search'
import { GridType } from '$lib/types/enums'
import Dialog from '$lib/components/ui/Dialog.svelte'
import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
import ModalBody from '$lib/components/ui/ModalBody.svelte'
import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
import Button from '$lib/components/ui/Button.svelte'
import Icon from '$lib/components/Icon.svelte'
import DescriptionRenderer from '$lib/components/DescriptionRenderer.svelte'
@ -1003,8 +1006,10 @@
</div>
<!-- Edit Dialog -->
<Dialog bind:open={editDialogOpen} title="Edit Party Details">
<Dialog bind:open={editDialogOpen}>
{#snippet children()}
<ModalHeader title="Edit Party Details" />
<ModalBody>
<div class="edit-form">
<label for="party-title">Party Title</label>
<input
@ -1015,9 +1020,9 @@
disabled={loading}
/>
</div>
{/snippet}
{#snippet footer()}
</ModalBody>
<ModalFooter>
{#snippet children()}
<button class="btn-secondary" onclick={() => (editDialogOpen = false)} disabled={loading}>
Cancel
</button>
@ -1025,19 +1030,23 @@
{loading ? 'Saving...' : 'Save'}
</button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
<!-- Delete Confirmation Dialog -->
<Dialog bind:open={deleteDialogOpen} title="Delete Party">
<Dialog bind:open={deleteDialogOpen}>
{#snippet children()}
<ModalHeader title="Delete Party" />
<ModalBody>
<div class="delete-confirmation">
<p>Are you sure you want to delete this party?</p>
<p><strong>{party.name || 'Unnamed Party'}</strong></p>
<p class="warning">⚠️ This action cannot be undone.</p>
</div>
{/snippet}
{#snippet footer()}
</ModalBody>
<ModalFooter>
{#snippet children()}
<button class="btn-secondary" onclick={() => (deleteDialogOpen = false)} disabled={deleting}>
Cancel
</button>
@ -1045,6 +1054,8 @@
{deleting ? 'Deleting...' : 'Delete Party'}
</button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
<!-- Conflict Resolution Dialog -->

65
src/stories/components/ui/Dialog.stories.svelte
View file

@ -1,6 +1,9 @@
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf'
import Dialog from '$lib/components/ui/Dialog.svelte'
import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
import ModalBody from '$lib/components/ui/ModalBody.svelte'
import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
import Button from '$lib/components/ui/Button.svelte'
const { Story } = defineMeta({
@ -22,10 +25,15 @@
<Story name="Default">
<div>
<Button onclick={() => (defaultOpen = true)}>Open Dialog</Button>
<Dialog bind:open={defaultOpen} title="Dialog Title">
<Dialog bind:open={defaultOpen}>
{#snippet children()}
<ModalHeader title="Dialog Title" />
<ModalBody>
{#snippet children()}
<p>This is the dialog content. You can put any content here.</p>
{/snippet}
</ModalBody>
{/snippet}
</Dialog>
</div>
</Story>
@ -34,14 +42,15 @@
<Story name="With Description">
<div>
<Button onclick={() => (withDescOpen = true)}>Open Dialog</Button>
<Dialog
bind:open={withDescOpen}
title="Account Settings"
description="Make changes to your account settings here."
>
<Dialog bind:open={withDescOpen}>
{#snippet children()}
<ModalHeader title="Account Settings" description="Make changes to your account settings here." />
<ModalBody>
{#snippet children()}
<p>Your account settings form would go here.</p>
{/snippet}
</ModalBody>
{/snippet}
</Dialog>
</div>
</Story>
@ -50,14 +59,21 @@
<Story name="With Footer">
<div>
<Button onclick={() => (withFooterOpen = true)}>Open Dialog</Button>
<Dialog bind:open={withFooterOpen} title="Confirm Action">
<Dialog bind:open={withFooterOpen}>
{#snippet children()}
<ModalHeader title="Confirm Action" />
<ModalBody>
{#snippet children()}
<p>Are you sure you want to proceed with this action?</p>
{/snippet}
{#snippet footer()}
</ModalBody>
<ModalFooter>
{#snippet children()}
<Button variant="secondary" onclick={() => (withFooterOpen = false)}>Cancel</Button>
<Button variant="primary" onclick={() => (withFooterOpen = false)}>Confirm</Button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
</div>
</Story>
@ -66,7 +82,10 @@
<Story name="Long Content">
<div>
<Button onclick={() => (longContentOpen = true)}>Open Long Dialog</Button>
<Dialog bind:open={longContentOpen} title="Terms and Conditions">
<Dialog bind:open={longContentOpen}>
{#snippet children()}
<ModalHeader title="Terms and Conditions" />
<ModalBody>
{#snippet children()}
<div style="display: flex; flex-direction: column; gap: 16px;">
<p>
@ -92,10 +111,14 @@
</p>
</div>
{/snippet}
{#snippet footer()}
</ModalBody>
<ModalFooter>
{#snippet children()}
<Button variant="secondary" onclick={() => (longContentOpen = false)}>Decline</Button>
<Button variant="primary" onclick={() => (longContentOpen = false)}>Accept</Button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
</div>
</Story>
@ -104,7 +127,10 @@
<Story name="Form Dialog">
<div>
<Button onclick={() => (formOpen = true)}>Edit Profile</Button>
<Dialog bind:open={formOpen} title="Edit Profile" description="Update your profile information.">
<Dialog bind:open={formOpen}>
{#snippet children()}
<ModalHeader title="Edit Profile" description="Update your profile information." />
<ModalBody>
{#snippet children()}
<div style="display: flex; flex-direction: column; gap: 16px;">
<div>
@ -133,10 +159,14 @@
</div>
</div>
{/snippet}
{#snippet footer()}
</ModalBody>
<ModalFooter>
{#snippet children()}
<Button variant="secondary" onclick={() => (formOpen = false)}>Cancel</Button>
<Button variant="primary" onclick={() => (formOpen = false)}>Save Changes</Button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
</div>
</Story>
@ -145,17 +175,24 @@
<Story name="Confirmation Dialog">
<div>
<Button variant="destructive" onclick={() => (confirmOpen = true)}>Delete Item</Button>
<Dialog bind:open={confirmOpen} title="Delete Item">
<Dialog bind:open={confirmOpen}>
{#snippet children()}
<ModalHeader title="Delete Item" />
<ModalBody>
{#snippet children()}
<p>
Are you sure you want to delete this item? This action cannot be undone and all associated
data will be permanently removed.
</p>
{/snippet}
{#snippet footer()}
</ModalBody>
<ModalFooter>
{#snippet children()}
<Button variant="secondary" onclick={() => (confirmOpen = false)}>Cancel</Button>
<Button variant="destructive" onclick={() => (confirmOpen = false)}>Delete</Button>
{/snippet}
</ModalFooter>
{/snippet}
</Dialog>
</div>
</Story>