a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
cleanup ui components
+85
-38
+16
-4
app/src/lib/ui/components/card/card-body.svelte
+16
-4
app/src/lib/ui/components/card/card-body.svelte
···
1
1
<script lang="ts">
2
2
import type { WithChildren } from 'bits-ui'
3
3
import type { SvelteHTMLElements } from 'svelte/elements'
4
-
import { tv } from 'tailwind-variants'
4
+
import type { WithElementRef } from '$lib/utils'
5
+
import { cn, tv } from 'tailwind-variants'
5
6
6
7
export type CardBodyRootElement = SvelteHTMLElements['span']
7
-
export type CardBodyProps = WithChildren<CardBodyRootElement>
8
-
let { children, ...restProps }: CardBodyProps = $props()
8
+
export type CardBodyProps = WithElementRef<WithChildren<CardBodyRootElement>>
9
+
let {
10
+
ref = $bindable(null),
11
+
'data-slot': dataSlot = 'card-body',
12
+
children,
13
+
class: className,
14
+
...restProps
15
+
}: CardBodyProps = $props()
9
16
10
17
const cardBody = tv({
11
18
base: [
···
15
22
})
16
23
</script>
17
24
18
-
<span {...restProps} class={cardBody()}>
25
+
<span
26
+
{...restProps}
27
+
bind:this={ref}
28
+
data-slot={dataSlot}
29
+
class={cn(cardBody(), className)}
30
+
>
19
31
{@render children?.()}
20
32
</span>
+17
-4
app/src/lib/ui/components/card/card-heading.svelte
+17
-4
app/src/lib/ui/components/card/card-heading.svelte
···
2
2
import type { WithChildren } from 'bits-ui'
3
3
import type { Snippet } from 'svelte'
4
4
import type { SvelteHTMLElements } from 'svelte/elements'
5
-
import { tv } from 'tailwind-variants'
5
+
import { cn, tv } from 'tailwind-variants'
6
+
import type { WithElementRef } from '$lib/utils'
6
7
import { Heading, HeadingGroup, SubHeading } from '$ui/components/heading'
7
8
8
9
export type CardHeadingRootElement = SvelteHTMLElements['header']
9
-
export type CardHeadingProps = WithChildren<CardHeadingRootElement> & {
10
+
export type CardHeadingProps = WithElementRef<WithChildren<CardHeadingRootElement>> & {
10
11
sideContent?: Snippet,
11
12
}
12
-
let { children, sideContent, ...restProps }: CardHeadingProps = $props()
13
+
let {
14
+
ref = $bindable(null),
15
+
'data-slot': dataSlot = 'card-heading',
16
+
sideContent,
17
+
children,
18
+
class: className,
19
+
...restProps
20
+
}: CardHeadingProps = $props()
13
21
14
22
const cardHeader = tv({
15
23
slots: {
···
21
29
const { header, heading, subHeading } = cardHeader()
22
30
</script>
23
31
24
-
<header {...restProps} class={header()}>
32
+
<header
33
+
{...restProps}
34
+
bind:this={ref}
35
+
data-slot={dataSlot}
36
+
class={cn(header(), className)}
37
+
>
25
38
<HeadingGroup>
26
39
<Heading level={3} useEllipsis class={heading()}>{@render children?.()}</Heading>
27
40
<SubHeading isScript class={subHeading()}>{@render children?.()}</SubHeading>
+4
-4
app/src/lib/ui/components/card/card.stories.svelte
+4
-4
app/src/lib/ui/components/card/card.stories.svelte
···
1
1
<script module>
2
2
import { defineMeta } from '@storybook/addon-svelte-csf'
3
-
import Card from './Card.svelte'
4
-
import CardBody from './CardBody.svelte'
5
-
import CardFooter from './CardFooter.svelte'
6
-
import CardHeading from './CardHeading.svelte'
3
+
import Card from './card.svelte'
4
+
import CardBody from './card-body.svelte'
5
+
import CardFooter from './card-footer.svelte'
6
+
import CardHeading from './card-heading.svelte'
7
7
8
8
const { Story } = defineMeta({
9
9
component: Card,
+8
-3
app/src/lib/ui/components/card/card.svelte
+8
-3
app/src/lib/ui/components/card/card.svelte
···
3
3
import { cn } from '$lib/utils'
4
4
import type { CardProps } from './types'
5
5
6
+
let {
7
+
ref = $bindable(null),
8
+
'data-slot': dataSlot = 'card',
9
+
children,
10
+
class: className,
11
+
...restProps
12
+
}: CardProps = $props()
6
13
const card = tv({
7
14
base: [
8
15
'flex flex-col gap-4 p-4',
···
11
18
'dark:shadow-lg',
12
19
]
13
20
})
14
-
15
-
let { children, class: className, ...restProps }: CardProps = $props()
16
21
</script>
17
22
18
-
<div {...restProps} class={cn(card(), className)}>
23
+
<div bind:this={ref} {...restProps} class={cn(card(), className)}>
19
24
{@render children?.()}
20
25
</div>
+2
-1
app/src/lib/ui/components/card/types.ts
+2
-1
app/src/lib/ui/components/card/types.ts
···
1
1
import type { WithChildren } from 'bits-ui'
2
2
import type { SvelteHTMLElements } from 'svelte/elements'
3
+
import type { WithElementRef } from '$lib/utils'
3
4
4
5
export type CardRootElement = SvelteHTMLElements['div']
5
-
export type CardProps = WithChildren<CardRootElement>
6
+
export type CardProps = WithElementRef<WithChildren<CardRootElement>>
+7
-2
app/src/lib/ui/form/checkbox/checkbox-group.svelte
+7
-2
app/src/lib/ui/form/checkbox/checkbox-group.svelte
···
1
1
<script lang="ts">
2
2
import { Checkbox, type CheckboxGroupProps as BitsProps } from 'bits-ui'
3
3
import { tv } from 'tailwind-variants'
4
+
import { cn } from '$lib/utils'
4
5
5
6
type CheckboxGroupRootElement = BitsProps
6
7
type CheckboxGroupProps = CheckboxGroupRootElement
7
8
let {
9
+
value = $bindable(),
8
10
children,
9
-
value = $bindable(),
11
+
class: className,
10
12
...restProps
11
13
}: CheckboxGroupProps = $props()
12
14
···
15
17
})
16
18
</script>
17
19
18
-
<Checkbox.Group {...restProps} class={checkboxGroup()}>
20
+
<Checkbox.Group
21
+
{...restProps}
22
+
class={cn(checkboxGroup(), className)}
23
+
>
19
24
{@render children?.()}
20
25
</Checkbox.Group>
+15
-15
app/src/lib/ui/form/field/Field.svelte
+15
-15
app/src/lib/ui/form/field/Field.svelte
···
33
33
</script>
34
34
35
35
<script lang='ts'>
36
-
import type { WithElementRef } from 'bits-ui'
37
-
import type { SvelteHTMLElements } from 'svelte/elements'
38
-
import { cn } from '$lib/utils'
36
+
import type { WithElementRef } from 'bits-ui'
37
+
import type { SvelteHTMLElements } from 'svelte/elements'
38
+
import { cn } from '$lib/utils'
39
39
40
-
type FieldRootElement = SvelteHTMLElements['div']
41
-
type FieldProps = WithElementRef<FieldRootElement> & {
42
-
orientation?: FieldOrientation,
43
-
}
40
+
type FieldRootElement = SvelteHTMLElements['div']
41
+
type FieldProps = WithElementRef<FieldRootElement> & {
42
+
orientation?: FieldOrientation,
43
+
}
44
44
45
-
let {
46
-
ref = $bindable(null),
47
-
class: className,
48
-
orientation = 'vertical',
49
-
children,
50
-
'data-slot': dataSlot = 'field',
51
-
...restProps
52
-
}: FieldProps = $props()
45
+
let {
46
+
ref = $bindable(null),
47
+
class: className,
48
+
orientation = 'vertical',
49
+
children,
50
+
'data-slot': dataSlot = 'field',
51
+
...restProps
52
+
}: FieldProps = $props()
53
53
</script>
54
54
55
55
<div