Skip to content

Commit dbabb13

Browse files
hperrinhperrin
committed
feat: migrate components in card to runes
1 parent d1368a6 commit dbabb13

File tree

10 files changed

+116
-67
lines changed

10 files changed

+116
-67
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
158158
- [x] Top App Bar
159159
- [x] Badge
160160
- [ ] Banner
161-
- [ ] Card
161+
- [x] Card
162162
- [x] Common
163163
- [ ] Data Table
164164
- [ ] Dialog

‎packages/card/src/Actions.svelte

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<svelte:options runes={false} />
1+
<svelte:options runes />
22

33
<div
44
bind:this={element}
@@ -8,29 +8,41 @@
88
'mdc-card__actions': true,
99
'mdc-card__actions--full-bleed': fullBleed,
1010
})}
11-
{...$$restProps}
11+
{...restProps}
1212
>
13-
<slot />
13+
{@render children?.()}
1414
</div>
1515

1616
<script lang="ts">
17+
import type { Snippet } from 'svelte';
1718
import { setContext } from 'svelte';
1819
import type { SmuiAttrs } from '@smui/common';
1920
import type { ActionArray } from '@smui/common/internal';
2021
import { classMap, useActions } from '@smui/common/internal';
2122
2223
type OwnProps = {
24+
/**
25+
* An array of Action or [Action, ActionProps] to be applied to the element.
26+
*/
2327
use?: ActionArray;
28+
/**
29+
* A space separated list of CSS classes.
30+
*/
2431
class?: string;
32+
/**
33+
* Style the actions to stretch across the full card.
34+
*/
2535
fullBleed?: boolean;
26-
};
27-
type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
2836
29-
// Remember to update $$Props if you add/remove/rename props.
30-
export let use: ActionArray = [];
31-
let className = '';
32-
export { className as class };
33-
export let fullBleed = false;
37+
children?: Snippet;
38+
};
39+
let {
40+
use = [],
41+
class: className = '',
42+
fullBleed = false,
43+
children,
44+
...restProps
45+
}: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
3446
3547
let element: HTMLDivElement;
3648

‎packages/card/src/Card.svelte

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<svelte:options runes={false} />
1+
<svelte:options runes />
22

33
<div
44
bind:this={element}
@@ -9,30 +9,45 @@
99
'mdc-card--outlined': variant === 'outlined',
1010
'smui-card--padded': padded,
1111
})}
12-
{...$$restProps}
12+
{...restProps}
1313
>
14-
<slot />
14+
{@render children?.()}
1515
</div>
1616

1717
<script lang="ts">
18+
import type { Snippet } from 'svelte';
1819
import type { SmuiAttrs } from '@smui/common';
1920
import type { ActionArray } from '@smui/common/internal';
2021
import { classMap, useActions } from '@smui/common/internal';
2122
2223
type OwnProps = {
24+
/**
25+
* An array of Action or [Action, ActionProps] to be applied to the element.
26+
*/
2327
use?: ActionArray;
28+
/**
29+
* A space separated list of CSS classes.
30+
*/
2431
class?: string;
32+
/**
33+
* The styling variant of the card.
34+
*/
2535
variant?: 'raised' | 'outlined';
36+
/**
37+
* Whether to add padding.
38+
*/
2639
padded?: boolean;
27-
};
28-
type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
2940
30-
// Remember to update $$Props if you add/remove/rename props.
31-
export let use: ActionArray = [];
32-
let className = '';
33-
export { className as class };
34-
export let variant: 'raised' | 'outlined' = 'raised';
35-
export let padded = false;
41+
children?: Snippet;
42+
};
43+
let {
44+
use = [],
45+
class: className = '',
46+
variant = 'raised',
47+
padded = false,
48+
children,
49+
...restProps
50+
}: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
3651
3752
let element: HTMLDivElement;
3853

‎packages/card/src/Media.svelte

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<svelte:options runes={false} />
1+
<svelte:options runes />
22

33
<div
44
bind:this={element}
@@ -9,28 +9,40 @@
99
'mdc-card__media--square': aspectRatio === 'square',
1010
'mdc-card__media--16-9': aspectRatio === '16x9',
1111
})}
12-
{...$$restProps}
12+
{...restProps}
1313
>
14-
<slot />
14+
{@render children?.()}
1515
</div>
1616

1717
<script lang="ts">
18+
import type { Snippet } from 'svelte';
1819
import type { SmuiAttrs } from '@smui/common';
1920
import type { ActionArray } from '@smui/common/internal';
2021
import { classMap, useActions } from '@smui/common/internal';
2122
2223
type OwnProps = {
24+
/**
25+
* An array of Action or [Action, ActionProps] to be applied to the element.
26+
*/
2327
use?: ActionArray;
28+
/**
29+
* A space separated list of CSS classes.
30+
*/
2431
class?: string;
25-
aspectRatio?: 'square' | '16x9' | undefined;
26-
};
27-
type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
32+
/**
33+
* Force an aspect ratio.
34+
*/
35+
aspectRatio?: 'square' | '16x9';
2836
29-
// Remember to update $$Props if you add/remove/rename props.
30-
export let use: ActionArray = [];
31-
let className = '';
32-
export { className as class };
33-
export let aspectRatio: 'square' | '16x9' | undefined = undefined;
37+
children?: Snippet;
38+
};
39+
let {
40+
use = [],
41+
class: className = '',
42+
aspectRatio,
43+
children,
44+
...restProps
45+
}: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
3446
3547
let element: HTMLDivElement;
3648

‎packages/card/src/PrimaryAction.svelte

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<svelte:options runes={false} />
1+
<svelte:options runes />
22

33
<div
44
bind:this={element}
@@ -23,42 +23,66 @@
2323
.join(' ')}
2424
{tabindex}
2525
role="button"
26-
{...$$restProps}
26+
{...restProps}
2727
>
2828
<div class="mdc-card__ripple"></div>
29-
<slot />
29+
{@render children?.()}
3030
</div>
3131

3232
<script lang="ts">
33+
import type { Snippet } from 'svelte';
3334
import type { SmuiAttrs } from '@smui/common';
3435
import type { ActionArray } from '@smui/common/internal';
3536
import { classMap, useActions } from '@smui/common/internal';
3637
import Ripple from '@smui/ripple';
3738
3839
type OwnProps = {
40+
/**
41+
* An array of Action or [Action, ActionProps] to be applied to the element.
42+
*/
3943
use?: ActionArray;
44+
/**
45+
* A space separated list of CSS classes.
46+
*/
4047
class?: string;
48+
/**
49+
* A list of CSS styles.
50+
*/
4151
style?: string;
52+
/**
53+
* Whether to show a ripple animation.
54+
*/
4255
ripple?: boolean;
56+
/**
57+
* The color of the action.
58+
*/
4359
color?: 'primary' | 'secondary' | undefined;
60+
/**
61+
* Whether to add padding.
62+
*/
4463
padded?: boolean;
64+
/**
65+
* The tab index.
66+
*/
4567
tabindex?: number;
46-
};
47-
type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
4868
49-
// Remember to update $$Props if you add/remove/rename props.
50-
export let use: ActionArray = [];
51-
let className = '';
52-
export { className as class };
53-
export let style = '';
54-
export let ripple = true;
55-
export let color: 'primary' | 'secondary' | undefined = undefined;
56-
export let padded = false;
57-
export let tabindex = 0;
69+
children?: Snippet;
70+
};
71+
let {
72+
use = [],
73+
class: className = '',
74+
style = '',
75+
ripple = true,
76+
color,
77+
padded = false,
78+
tabindex = 0,
79+
children,
80+
...restProps
81+
}: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
5882
5983
let element: HTMLDivElement;
60-
let internalClasses: { [k: string]: boolean } = {};
61-
let internalStyles: { [k: string]: string } = {};
84+
let internalClasses: { [k: string]: boolean } = $state({});
85+
let internalStyles: { [k: string]: string } = $state({});
6286
6387
function addClass(className: string) {
6488
if (!internalClasses[className]) {

‎packages/site/src/routes/demo/card/_Actions.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="card-display">
42
<div class="card-container">
53
<Card>
@@ -113,5 +111,5 @@
113111
import Button, { Label } from '@smui/button';
114112
import IconButton, { Icon } from '@smui/icon-button';
115113
116-
let clicked = 0;
114+
let clicked = $state(0);
117115
</script>

‎packages/site/src/routes/demo/card/_Complex.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="card-display">
42
<div class="card-container">
53
<Card>
@@ -123,7 +121,7 @@
123121
import Button, { Label } from '@smui/button';
124122
import IconButton, { Icon } from '@smui/icon-button';
125123
126-
let clicked = 0;
124+
let clicked = $state(0);
127125
</script>
128126

129127
<style>

‎packages/site/src/routes/demo/card/_List.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="card-display">
42
<div class="card-container">
53
<Card>
@@ -23,5 +21,5 @@
2321
import Card, { Content } from '@smui/card';
2422
import List, { Item, Text } from '@smui/list';
2523
26-
let clicked = 0;
24+
let clicked = $state(0);
2725
</script>

‎packages/site/src/routes/demo/card/_Media.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="card-display">
42
<div class="card-container">
53
<Card>
@@ -63,7 +61,7 @@
6361
MediaContent,
6462
} from '@smui/card';
6563
66-
let clicked = 0;
64+
let clicked = $state(0);
6765
</script>
6866

6967
<style>

‎packages/site/src/routes/demo/card/_Simple.svelte

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="card-display">
42
<div class="card-container">
53
<Card padded>A simple padded card.</Card>
@@ -16,10 +14,6 @@
1614
</div>
1715
</div>
1816

19-
<pre class="status">Clicked: {clicked}</pre>
20-
2117
<script lang="ts">
2218
import Card, { Content } from '@smui/card';
23-
24-
let clicked = 0;
2519
</script>

0 commit comments

Comments
 (0)