Skip to content

Commit a2b12e4

Browse files
nolimits4webnolimits4web
committed
feat(svelte): updated Card components
1 parent 37202ea commit a2b12e4

4 files changed

Lines changed: 90 additions & 77 deletions

File tree

‎src/svelte/components/card-content.svelte‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<script>
22
import { colorClasses } from '../shared/mixins.js';
33
import { classNames } from '../shared/utils.js';
4-
import { restProps } from '../shared/rest-props.js';
54
6-
let className = undefined;
7-
export { className as class };
5+
let {
6+
class: className,
7+
padding = true,
8+
children,
9+
...restProps
10+
} = $props();
811
9-
export let padding = true;
10-
11-
$: classes = classNames(
12+
const classes = $derived(classNames(
1213
className,
1314
'card-content',
1415
{
1516
'card-content-padding': padding,
1617
},
17-
colorClasses($$props),
18-
);
18+
colorClasses(restProps),
19+
));
1920
</script>
2021

21-
<div class={classes} {...restProps($$restProps)}>
22-
<slot />
22+
<div class={classes} {...restProps}>
23+
{@render children?.()}
2324
</div>

‎src/svelte/components/card-footer.svelte‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<script>
22
import { colorClasses } from '../shared/mixins.js';
33
import { classNames } from '../shared/utils.js';
4-
import { restProps } from '../shared/rest-props.js';
54
6-
let className = undefined;
7-
export { className as class };
5+
let {
6+
class: className,
7+
children,
8+
...restProps
9+
} = $props();
810
9-
$: classes = classNames(className, 'card-footer', colorClasses($$props));
11+
const classes = $derived(classNames(className, 'card-footer', colorClasses(restProps)));
1012
</script>
1113

12-
<div class={classes} {...restProps($$restProps)}>
13-
<slot />
14+
<div class={classes} {...restProps}>
15+
{@render children?.()}
1416
</div>

‎src/svelte/components/card-header.svelte‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<script>
22
import { colorClasses } from '../shared/mixins.js';
33
import { classNames } from '../shared/utils.js';
4-
import { restProps } from '../shared/rest-props.js';
54
6-
let className = undefined;
7-
export { className as class };
5+
let {
6+
class: className,
7+
children,
8+
...restProps
9+
} = $props();
810
9-
$: classes = classNames(className, 'card-header', colorClasses($$props));
11+
const classes = $derived(classNames(className, 'card-header', colorClasses(restProps)));
1012
</script>
1113

12-
<div class={classes} {...restProps($$restProps)}>
13-
<slot />
14+
<div class={classes} {...restProps}>
15+
{@render children?.()}
1416
</div>

‎src/svelte/components/card.svelte‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
11
<script>
2-
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
2+
import { onMount, onDestroy } from 'svelte';
33
import { colorClasses } from '../shared/mixins.js';
4-
import { classNames, plainText, createEmitter } from '../shared/utils.js';
5-
import { restProps } from '../shared/rest-props.js';
4+
import { classNames, plainText } from '../shared/utils.js';
65
import { app, f7ready } from '../shared/f7.js';
76
87
import CardHeader from './card-header.svelte';
98
import CardContent from './card-content.svelte';
109
import CardFooter from './card-footer.svelte';
1110
12-
const emit = createEmitter(createEventDispatcher, $$props);
13-
14-
let className = undefined;
15-
export { className as class };
16-
17-
export let title = undefined;
18-
export let content = undefined;
19-
export let footer = undefined;
20-
export let raised = false;
21-
export let outline = false;
22-
export let outlineIos = false;
23-
export let outlineMd = false;
24-
export let headerDivider = false;
25-
export let footerDivider = false;
26-
export let expandable = false;
27-
export let expandableAnimateWidth = false;
28-
export let expandableOpened = false;
29-
export let animate = undefined;
30-
export let hideNavbarOnOpen = undefined;
31-
export let hideToolbarOnOpen = undefined;
32-
export let hideStatusbarOnOpen = undefined;
33-
export let scrollableEl = undefined;
34-
export let swipeToClose = undefined;
35-
export let closeByBackdropClick = undefined;
36-
export let backdrop = undefined;
37-
export let backdropEl = undefined;
38-
export let padding = true;
11+
let {
12+
class: className,
13+
title = undefined,
14+
raised = false,
15+
outline = false,
16+
outlineIos = false,
17+
outlineMd = false,
18+
headerDivider = false,
19+
footerDivider = false,
20+
expandable = false,
21+
expandableAnimateWidth = false,
22+
expandableOpened = false,
23+
animate = undefined,
24+
hideNavbarOnOpen = undefined,
25+
hideToolbarOnOpen = undefined,
26+
hideStatusbarOnOpen = undefined,
27+
scrollableEl = undefined,
28+
swipeToClose = undefined,
29+
closeByBackdropClick = undefined,
30+
backdrop = undefined,
31+
backdropEl = undefined,
32+
padding = true,
33+
children,
34+
header,
35+
content,
36+
footer,
37+
...restProps
38+
} = $props();
39+
40+
41+
42+
3943
4044
let el;
4145
42-
$: classes = classNames(
46+
const classes = $derived(classNames(
4347
className,
4448
'card',
4549
{
@@ -52,14 +56,8 @@
5256
'card-expandable': expandable,
5357
'card-expandable-animate-width': expandableAnimateWidth,
5458
},
55-
colorClasses($$props),
56-
);
57-
58-
/* eslint-disable no-undef */
59-
$: hasHeaderSlots = $$slots.header;
60-
$: hasContentSlots = $$slots.content;
61-
$: hasFooterSlots = $$slots.footer;
62-
/* eslint-enable no-undef */
59+
colorClasses(restProps),
60+
));
6361
6462
function open() {
6563
app.f7.card.open(el);
@@ -82,28 +80,28 @@
8280
}
8381
}
8482
85-
$: watchOpened(expandableOpened);
83+
$effect(() => watchOpened(expandableOpened));
8684
8785
function onBeforeOpen(cardEl, prevent) {
8886
if (cardEl !== el) return;
89-
emit('cardBeforeOpen', [el, prevent]);
87+
restProps.cardBeforeOpen?.(el, prevent);
9088
}
9189
function onOpen(cardEl) {
9290
if (cardEl !== el) return;
93-
emit('cardOpen', [el]);
91+
restProps.cardOpen?.(el);
9492
expandableOpened = true;
9593
}
9694
function onOpened(cardEl, pageEl) {
9795
if (cardEl !== el) return;
98-
emit('cardOpened', [el, pageEl]);
96+
restProps.cardOpened?.(el, pageEl);
9997
}
10098
function onClose(cardEl) {
10199
if (cardEl !== el) return;
102-
emit('cardClose', [el]);
100+
restProps.cardClose?.(el);
103101
}
104102
function onClosed(cardEl, pageEl) {
105103
if (cardEl !== el) return;
106-
emit('cardClosed', [el, pageEl]);
104+
restProps.cardClosed?.(el, pageEl);
107105
expandableOpened = false;
108106
}
109107
@@ -152,25 +150,35 @@
152150
: closeByBackdropClick.toString()}
153151
data-backdrop={typeof backdrop === 'undefined' ? backdrop : backdrop.toString()}
154152
data-backdrop-el={backdropEl}
155-
{...restProps($$restProps)}
153+
{...restProps}
156154
>
157-
{#if typeof title !== 'undefined' || hasHeaderSlots}
155+
{#if typeof title !== 'undefined' || typeof header !== 'undefined'}
158156
<CardHeader>
159157
{plainText(title)}
160-
<slot name="header" />
158+
{#if typeof header === 'function'}
159+
{@render header?.()}
160+
{:else if (typeof header !== 'undefined')}
161+
{header}
162+
{/if}
161163
</CardHeader>
162164
{/if}
163-
{#if typeof content !== 'undefined' || hasContentSlots}
165+
{#if typeof content !== 'undefined' || typeof content !== 'undefined'}
164166
<CardContent {padding}>
165-
{plainText(content)}
166-
<slot name="content" />
167+
{#if typeof content === 'function'}
168+
{@render content?.()}
169+
{:else if (typeof content !== 'undefined')}
170+
{content}
171+
{/if}
167172
</CardContent>
168173
{/if}
169-
{#if typeof footer !== 'undefined' || hasFooterSlots}
174+
{#if typeof footer !== 'undefined' || typeof footer !== 'undefined'}
170175
<CardFooter>
171-
{plainText(footer)}
172-
<slot name="footer" />
176+
{#if typeof footer === 'function'}
177+
{@render footer?.()}
178+
{:else if (typeof footer !== 'undefined')}
179+
{footer}
180+
{/if}
173181
</CardFooter>
174182
{/if}
175-
<slot />
183+
{@render children?.()}
176184
</div>

0 commit comments

Comments
 (0)