-
Notifications
You must be signed in to change notification settings - Fork 61
/
Card.svelte
48 lines (42 loc) · 1.33 KB
/
Card.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script lang="ts">
import useStyles from './Card.styles';
import { Paper } from '../Paper';
import { onMount } from 'svelte';
import type { CardProps as $$CardProps } from './Card';
interface $$Props extends $$CardProps {}
export let use: $$Props['use'] = [],
element: $$Props['element'] = undefined,
className: $$Props['className'] = '',
override: $$Props['override'] = {},
padding: $$Props['padding'] = 'md';
export { className as class };
/** can only get access to children at runtime */
onMount(() => {
const nodeLength = element.children.length;
const firstChild = element.children[0] as HTMLDivElement;
const lastChild = element.children[nodeLength - 1] as HTMLDivElement;
if (firstChild?.id === 'svelteui_card_section') {
firstChild.style.marginTop = `${-1 * theme.fn.size({ size: padding, sizes: theme.space })}px`;
}
if (lastChild?.id === 'svelteui_card_section') {
// prettier-ignore
lastChild.style.marginBottom = `${-1 * theme.fn.size({ size: padding, sizes: theme.space })}px`;
}
});
$: ({ cx, classes, theme } = useStyles(null, { name: 'Card' }));
</script>
<Paper
bind:element
class={cx(className, classes.root)}
override={{
[`${theme.dark} &`]: {
backgroundColor: theme.fn.themeColor('dark', 6)
},
...override
}}
{padding}
{use}
{...$$restProps}
>
<slot />
</Paper>