Skip to content

Commit c2387d5

Browse files
giamirgiamir
committed
Merge branch 'develop' into beta
2 parents 2a46e49 + 58dbcd9 commit c2387d5

17 files changed

+810
-647
lines changed

‎.changeset/nine-wolves-share.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@stackoverflow/stacks-svelte": patch
3+
---
4+
5+
Incorporate v0.6.0 changes in the beta release tag
6+
https://github.com/StackExchange/Stacks/releases/tag/%40stackoverflow%2Fstacks-svelte%400.6.0
7+

‎package-lock.json‎

Lines changed: 40 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"@storybook/addon-links": "^9.1.3",
3535
"@storybook/addon-svelte-csf": "^5.0.8",
3636
"@storybook/svelte": "^9.1.5",
37-
"@storybook/svelte-vite": "^9.1.5",
37+
"@storybook/svelte-vite": "^9.1.15",
3838
"@sveltejs/package": "^2.5.0",
3939
"@sveltejs/vite-plugin-svelte": "^5.1.0",
4040
"@testing-library/dom": "^10.4.0",
@@ -85,7 +85,7 @@
8585
"stylelint-config-recommended": "^16.0.0",
8686
"stylelint-config-standard": "^38.0.0",
8787
"svelte": "^5.39.11",
88-
"svelte-check": "^4.3.1",
88+
"svelte-check": "^4.3.3",
8989
"svelte-preprocess": "^6.0.3",
9090
"terser-webpack-plugin": "^5.3.14",
9191
"ts-loader": "^9.5.2",

‎packages/stacks-svelte/CHANGELOG.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,84 @@
11
# @stackoverflow/stacks-svelte
22

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+
382
## 0.5.1
483
584
### Patch Changes

‎packages/stacks-svelte/src/components/Modal/Modal.stories.svelte‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
</script>
1919

2020
<script lang="ts">
21-
let visible = false;
22-
let state: State = "";
21+
let mstate = $state<State>("");
22+
let visible = $state(false);
2323
</script>
2424

2525
<Story name="Base" args={{ id: "base-modal" }}>
@@ -38,19 +38,24 @@
3838
visible={visible || args.visible}
3939
state={args.state}
4040
class={args.class}
41-
on:close={() => (visible = false)}
41+
onclose={() => (visible = false)}
4242
preventCloseOnClickOutside={args.preventCloseOnClickOutside}
4343
hideCloseButton={args.hideCloseButton}
4444
>
45-
<svelte:fragment slot="header">Modal Header</svelte:fragment>
46-
<p slot="body">
47-
Nullam ornare lectus vitae lacus sagittis, at sodales leo
48-
viverra. Suspendisse nec dignissim elit varius tempus. Cras
49-
viverra neque at imperdiet vehicula. Curabitur condimentum id
50-
dolor vitae ultrices. Pellentesque scelerisque nunc sit amet leo
51-
fringilla. Etiam feugiat imperdiet mi, eu blandit arcu cursus a.
52-
</p>
53-
<svelte:fragment slot="footer">
45+
{#snippet header()}
46+
Modal Header
47+
{/snippet}
48+
{#snippet body()}
49+
<p>
50+
Nullam ornare lectus vitae lacus sagittis, at sodales leo
51+
viverra. Suspendisse nec dignissim elit varius tempus. Cras
52+
viverra neque at imperdiet vehicula. Curabitur condimentum
53+
id dolor vitae ultrices. Pellentesque scelerisque nunc sit
54+
amet leo fringilla. Etiam feugiat imperdiet mi, eu blandit
55+
arcu cursus a.
56+
</p>
57+
{/snippet}
58+
{#snippet footer()}
5459
<Button
5560
variant={args.state === "danger" ? "danger" : ""}
5661
weight="filled"
@@ -63,7 +68,7 @@
6368
>
6469
Cancel
6570
</Button>
66-
</svelte:fragment>
71+
{/snippet}
6772
</Modal>
6873
{/snippet}
6974
</Story>
@@ -75,7 +80,7 @@
7580
weight="filled"
7681
onclick={() => {
7782
visible = true;
78-
state = "";
83+
mstate = "";
7984
}}
8085
>
8186
Default
@@ -85,7 +90,7 @@
8590
weight="filled"
8691
onclick={() => {
8792
visible = true;
88-
state = "danger";
93+
mstate = "danger";
8994
}}
9095
>
9196
Danger
@@ -94,36 +99,45 @@
9499
weight="outlined"
95100
onclick={() => {
96101
visible = true;
97-
state = "celebration";
102+
mstate = "celebration";
98103
}}
99104
>
100105
Celebration
101106
</Button>
102107
</div>
103108
</div>
104109

105-
<Modal id="states" {visible} {state} on:close={() => (visible = false)}>
106-
<svelte:fragment slot="header">Modal Header</svelte:fragment>
107-
<p slot="body">
108-
Nullam ornare lectus vitae lacus sagittis, at sodales leo viverra.
109-
Suspendisse nec dignissim elit varius tempus. Cras viverra neque at
110-
imperdiet vehicula. Curabitur condimentum id dolor vitae ultrices.
111-
Pellentesque scelerisque nunc sit amet leo fringilla. Etiam feugiat
112-
imperdiet mi, eu blandit arcu cursus a.
113-
</p>
114-
<svelte:fragment slot="footer">
110+
<Modal
111+
id="states"
112+
{visible}
113+
state={mstate}
114+
onclose={() => (visible = false)}
115+
>
116+
{#snippet header()}
117+
Modal Header
118+
{/snippet}
119+
{#snippet body()}
120+
<p>
121+
Nullam ornare lectus vitae lacus sagittis, at sodales leo
122+
viverra. Suspendisse nec dignissim elit varius tempus. Cras
123+
viverra neque at imperdiet vehicula. Curabitur condimentum id
124+
dolor vitae ultrices. Pellentesque scelerisque nunc sit amet leo
125+
fringilla. Etiam feugiat imperdiet mi, eu blandit arcu cursus a.
126+
</p>
127+
{/snippet}
128+
{#snippet footer()}
115129
<Button
116-
variant={state === "danger" ? "danger" : ""}
130+
variant={mstate === "danger" ? "danger" : ""}
117131
weight="filled"
118132
>
119133
Save changes
120134
</Button>
121135
<Button
122-
variant={state === "danger" ? "muted" : ""}
136+
variant={mstate === "danger" ? "muted" : ""}
123137
onclick={() => (visible = false)}
124138
>
125139
Cancel
126140
</Button>
127-
</svelte:fragment>
141+
{/snippet}
128142
</Modal>
129143
</Story>

0 commit comments

Comments
 (0)