|
1 | 1 | # @stackoverflow/stacks-svelte |
2 | 2 |
|
| 3 | +## 0.6.0 |
| 4 | + |
| 5 | +### Minor Changes |
| 6 | + |
| 7 | +- [#2018](https://github.com/StackExchange/Stacks/pull/2018) [`9cfbe19`](https://github.com/StackExchange/Stacks/commit/9cfbe19f066ae1146bf2065e78c2812f89a2df18) Thanks [@giamir](https://github.com/giamir)! - Migrate `Pagination` components to use Svelte 5 runes API. |
| 8 | + |
| 9 | + BREAKING CHANGES: |
| 10 | + - `PaginationItem`: `on:click` event forwarding is replaced by `onclick` callback prop. |
| 11 | + - `PaginationController`: `on:pagechange` event is replaced by `onpagechange` callback prop with simplified signature. Previously the event passed `{ detail: pageNumber }`, now the callback directly receives the page number as the argument: `onpagechange(pageNumber)`. |
| 12 | + |
| 13 | + Migration example: |
| 14 | + |
| 15 | + ```svelte |
| 16 | + <!-- Before (Svelte 4) --> |
| 17 | + <PaginationController on:pagechange={(e) => handlePageChange(e.detail)} /> |
| 18 | +
|
| 19 | + <!-- After (Svelte 5) --> |
| 20 | + <PaginationController |
| 21 | + onpagechange={(pageNumber) => handlePageChange(pageNumber)} |
| 22 | + /> |
| 23 | + ``` |
| 24 | +
|
| 25 | +- [#2016](https://github.com/StackExchange/Stacks/pull/2016) [`6712bc2`](https://github.com/StackExchange/Stacks/commit/6712bc29f22579ae368f8ec5211a25fc257f0cb9) Thanks [@giamir](https://github.com/giamir)! - Migrate `Popover`, `PopoverReference`, `PopoverContent`, and `PopoverCloseButton` components to use Svelte 5 runes API |
| 26 | +
|
| 27 | + BREAKING CHANGES: |
| 28 | +
|
| 29 | + **Popover component:** |
| 30 | + - Slot props (`let:visible`, `let:open`, `let:close`) are not available anymore. Snippet parameters should be used instead: `{#snippet children({ visible, open, close })}...{/snippet}` |
| 31 | + - `on:open` and `on:close` events are not available anymore. The new callback props should be used instead: `onopen`, `onclose`. |
| 32 | +
|
| 33 | + **PopoverCloseButton component:** |
| 34 | + - `on:click` event forwarding is not available anymore. The new callback prop should be used instead: `onclick`. |
| 35 | +
|
| 36 | + **Migration examples:** |
| 37 | +
|
| 38 | + ```svelte |
| 39 | + <!-- Before (Svelte 4 API) --> |
| 40 | + <Popover |
| 41 | + id="my-popover" |
| 42 | + on:open={() => console.log("opened")} |
| 43 | + on:close={() => console.log("closed")} |
| 44 | + let:visible |
| 45 | + let:close |
| 46 | + > |
| 47 | + <PopoverReference> |
| 48 | + <button>Trigger</button> |
| 49 | + </PopoverReference> |
| 50 | + <PopoverContent> |
| 51 | + <p>Content here</p> |
| 52 | + <PopoverCloseButton on:click={handleClick} /> |
| 53 | + </PopoverContent> |
| 54 | + <p>Visible: {visible}</p> |
| 55 | + </Popover> |
| 56 | +
|
| 57 | + <!-- After (Svelte 5 API) --> |
| 58 | + <Popover |
| 59 | + id="my-popover" |
| 60 | + onopen={() => console.log("opened")} |
| 61 | + onclose={() => console.log("closed")} |
| 62 | + > |
| 63 | + {#snippet children({ visible, close })} |
| 64 | + <PopoverReference> |
| 65 | + <button>Trigger</button> |
| 66 | + </PopoverReference> |
| 67 | + <PopoverContent> |
| 68 | + <p>Content here</p> |
| 69 | + <PopoverCloseButton onclick={handleClick} /> |
| 70 | + </PopoverContent> |
| 71 | + <p>Visible: {visible}</p> |
| 72 | + {/snippet} |
| 73 | + </Popover> |
| 74 | + ``` |
| 75 | +
|
| 76 | +- [#2017](https://github.com/StackExchange/Stacks/pull/2017) [`067d647`](https://github.com/StackExchange/Stacks/commit/067d6476aedab2f683e379bfae37ee54374997d5) Thanks [@giamir](https://github.com/giamir)! - Migrate `Modal` component to use Svelte 5 runes API. |
| 77 | +
|
| 78 | + BREAKING CHANGES: |
| 79 | + - Named slots (`header`, `body`, `footer`) are replaced by snippet props. Use `{#snippet header()}...{/snippet}` instead of `<svelte:fragment slot="header">...</svelte:fragment>`. |
| 80 | + - `on:close` event is replaced by `onclose` callback prop. |
| 81 | +
|
3 | 82 | ## 0.5.1 |
4 | 83 |
|
5 | 84 | ### Patch Changes |
|
0 commit comments