diff --git a/.changeset/tiny-deer-travel.md b/.changeset/tiny-deer-travel.md new file mode 100644 index 0000000000..e3e441b1c6 --- /dev/null +++ b/.changeset/tiny-deer-travel.md @@ -0,0 +1,10 @@ +--- +"@stackoverflow/stacks-svelte": minor +--- + +Migrate `Modal` component to use Svelte 5 runes API. + +BREAKING CHANGES: +- Named slots (`header`, `body`, `footer`) are replaced by snippet props. Use `{#snippet header()}...{/snippet}` instead of `...`. +- `on:close` event is replaced by `onclose` callback prop. + diff --git a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte index ccf1b51d42..1317bb317a 100644 --- a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte +++ b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte @@ -18,8 +18,8 @@ @@ -38,19 +38,24 @@ visible={visible || args.visible} state={args.state} class={args.class} - on:close={() => (visible = false)} + onclose={() => (visible = false)} preventCloseOnClickOutside={args.preventCloseOnClickOutside} hideCloseButton={args.hideCloseButton} > - Modal Header -

- Nullam ornare lectus vitae lacus sagittis, at sodales leo - viverra. Suspendisse nec dignissim elit varius tempus. Cras - viverra neque at imperdiet vehicula. Curabitur condimentum id - dolor vitae ultrices. Pellentesque scelerisque nunc sit amet leo - fringilla. Etiam feugiat imperdiet mi, eu blandit arcu cursus a. -

- + {#snippet header()} + Modal Header + {/snippet} + {#snippet body()} +

+ Nullam ornare lectus vitae lacus sagittis, at sodales leo + viverra. Suspendisse nec dignissim elit varius tempus. Cras + viverra neque at imperdiet vehicula. Curabitur condimentum + id dolor vitae ultrices. Pellentesque scelerisque nunc sit + amet leo fringilla. Etiam feugiat imperdiet mi, eu blandit + arcu cursus a. +

+ {/snippet} + {#snippet footer()} -
+ {/snippet} {/snippet}
@@ -75,7 +80,7 @@ weight="filled" onclick={() => { visible = true; - state = ""; + mstate = ""; }} > Default @@ -85,7 +90,7 @@ weight="filled" onclick={() => { visible = true; - state = "danger"; + mstate = "danger"; }} > Danger @@ -94,7 +99,7 @@ weight="outlined" onclick={() => { visible = true; - state = "celebration"; + mstate = "celebration"; }} > Celebration @@ -102,28 +107,37 @@ - (visible = false)}> - Modal Header -

- Nullam ornare lectus vitae lacus sagittis, at sodales leo viverra. - Suspendisse nec dignissim elit varius tempus. Cras viverra neque at - imperdiet vehicula. Curabitur condimentum id dolor vitae ultrices. - Pellentesque scelerisque nunc sit amet leo fringilla. Etiam feugiat - imperdiet mi, eu blandit arcu cursus a. -

- + (visible = false)} + > + {#snippet header()} + Modal Header + {/snippet} + {#snippet body()} +

+ Nullam ornare lectus vitae lacus sagittis, at sodales leo + viverra. Suspendisse nec dignissim elit varius tempus. Cras + viverra neque at imperdiet vehicula. Curabitur condimentum id + dolor vitae ultrices. Pellentesque scelerisque nunc sit amet leo + fringilla. Etiam feugiat imperdiet mi, eu blandit arcu cursus a. +

+ {/snippet} + {#snippet footer()} -
+ {/snippet}
diff --git a/packages/stacks-svelte/src/components/Modal/Modal.svelte b/packages/stacks-svelte/src/components/Modal/Modal.svelte index 888cbd01ec..c7a59676e0 100644 --- a/packages/stacks-svelte/src/components/Modal/Modal.svelte +++ b/packages/stacks-svelte/src/components/Modal/Modal.svelte @@ -3,53 +3,74 @@ - +