a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
add data-slot attribute to components
+72
-18
+2
app/src/lib/ui-components/heading/Heading.svelte
+2
app/src/lib/ui-components/heading/Heading.svelte
···
30
30
useEllipsis = false,
31
31
children,
32
32
class: className,
33
+
'data-slot': dataSlot = 'heading',
33
34
...restProps
34
35
}: HeadingProps = $props()
35
36
</script>
36
37
37
38
<svelte:element
38
39
this={`h${level}`} {...restProps}
40
+
data-slot={dataSlot}
39
41
class={cn(heading({ level, useEllipsis }), className)}
40
42
>
41
43
{@render children?.()}
+11
-2
app/src/lib/ui-components/heading/HeadingGroup.svelte
+11
-2
app/src/lib/ui-components/heading/HeadingGroup.svelte
···
6
6
7
7
type HeadingGroupRootElement = SvelteHTMLElements['group']
8
8
type HeadingGroupProps = WithChildren<HeadingGroupRootElement>
9
-
let { children, class: className, ...restProps }: HeadingGroupProps = $props()
9
+
let {
10
+
children,
11
+
class: className,
12
+
'data-slot': dataSlot = 'heading',
13
+
...restProps
14
+
}: HeadingGroupProps = $props()
10
15
11
16
const headingGroup = tv({
12
17
base: 'leading-4',
13
18
})
14
19
</script>
15
20
16
-
<hgroup {...restProps} class={cn(headingGroup(), className)}>
21
+
<hgroup
22
+
{...restProps}
23
+
data-slot={dataSlot}
24
+
class={cn(headingGroup(), className)}
25
+
>
17
26
{@render children?.()}
18
27
</hgroup>
+7
-1
app/src/lib/ui-components/heading/SubHeading.svelte
+7
-1
app/src/lib/ui-components/heading/SubHeading.svelte
···
17
17
isScript?: boolean,
18
18
}
19
19
20
-
let { isScript = false, children, ...restProps }: SubHeadingProps = $props()
20
+
let {
21
+
isScript = false,
22
+
children,
23
+
'data-slot': dataSlot = 'subheading',
24
+
...restProps
25
+
}: SubHeadingProps = $props()
21
26
</script>
22
27
23
28
<p
24
29
{...restProps}
30
+
data-slot={dataSlot}
25
31
class={subHeading({isScript})}
26
32
aria-hidden={isScript}
27
33
>
+2
-1
app/src/lib/ui-components/label/Label.svelte
+2
-1
app/src/lib/ui-components/label/Label.svelte
···
6
6
let {
7
7
class: className,
8
8
ref = $bindable(null),
9
+
'data-slot': dataSlot = 'label',
9
10
...restProps
10
11
}: LabelPrimitive.RootProps = $props()
11
12
···
24
25
25
26
<LabelPrimitive.Root
26
27
bind:ref
27
-
data-slot="label"
28
+
data-slot={dataSlot}
28
29
class={cn(labelTv(), className)}
29
30
{...restProps}
30
31
/>
+4
-1
app/src/lib/ui-components/segmented-control/SegmentedControlItem.svelte
+4
-1
app/src/lib/ui-components/segmented-control/SegmentedControlItem.svelte
···
5
5
type SegmentedControlItemProps = TabsPrimitive.TriggerProps
6
6
let {
7
7
class: className,
8
+
'data-slot': dataSlot = 'segmented-control-item',
8
9
...restProps
9
10
}: SegmentedControlItemProps = $props()
10
11
···
23
24
})
24
25
</script>
25
26
26
-
<TabsPrimitive.Trigger class={cn(tabTriggerTv(), className)} {...restProps} />
27
+
<TabsPrimitive.Trigger {...restProps}
28
+
data-slot={dataSlot}
29
+
class={cn(tabTriggerTv(), className)} />
+4
-1
app/src/lib/ui-components/segmented-control/SegmentedControlRoot.svelte
+4
-1
app/src/lib/ui-components/segmented-control/SegmentedControlRoot.svelte
···
5
5
type SegmentedControlRootProps = TabsPrimitive.RootProps
6
6
let {
7
7
class: className,
8
+
'data-slot': dataSlot = 'segmented-control-root',
8
9
...restProps
9
10
}: SegmentedControlRootProps = $props()
10
11
···
16
17
})
17
18
</script>
18
19
19
-
<TabsPrimitive.List class={cn(tabListTv(), className)} {...restProps} />
20
+
<TabsPrimitive.List {...restProps}
21
+
data-slot={dataSlot}
22
+
class={cn(tabListTv(), className)} />
+2
-1
app/src/lib/ui-components/separator/PhraseSeparator.svelte
+2
-1
app/src/lib/ui-components/separator/PhraseSeparator.svelte
···
16
16
17
17
let {
18
18
children,
19
+
'data-slot': dataSlot = 'phrase-separator',
19
20
...restProps
20
21
}: PhraseSeparatorProps = $props()
21
22
</script>
22
23
23
-
<Separator.Root {...restProps} class={root()}>
24
+
<Separator.Root {...restProps} data-slot={dataSlot} class={root()}>
24
25
<div class={separator()}></div>
25
26
<div class={center()}>{@render children?.()}</div>
26
27
<div class={separator()}></div>
+4
app/src/lib/ui-components/separator/Separator.svelte
+4
app/src/lib/ui-components/separator/Separator.svelte
···
52
52
isDecorative = false,
53
53
isSemiDashed = false,
54
54
class: className,
55
+
'data-slot': dataSlot = 'separator',
56
+
...restProps
55
57
}: SeparatorProps = $props()
56
58
const htmlRole = $derived.by(() => isDecorative ? 'none' : 'separator')
57
59
const htmlOrientation = $derived.by(() => !isDecorative ? 'horizontal' : undefined)
58
60
</script>
59
61
60
62
<Separator.Root
63
+
{...restProps}
61
64
bind:ref
62
65
decorative={isDecorative}
63
66
role={htmlRole}
64
67
orientation={htmlOrientation}
68
+
data-slot={dataSlot}
65
69
class={cn(root(), className)}
66
70
>
67
71
<div class={outer({isSemiDashed})}></div>
+8
-2
app/src/lib/ui-components/text/CopyText.svelte
+8
-2
app/src/lib/ui-components/text/CopyText.svelte
···
1
1
<script lang="ts">
2
2
import CopyIcon from '@lucide/svelte/icons/copy'
3
3
import type { SvelteHTMLElements } from 'svelte/elements'
4
+
import { cn } from 'tailwind-variants';
4
5
5
6
type CopyTextRootElement = SvelteHTMLElements['span']
6
7
type CopyTextProps = CopyTextRootElement & {
···
8
9
}
9
10
10
11
let isHovered = $state(false)
11
-
let { text, ...restProps }: CopyTextProps = $props()
12
+
let {
13
+
text,
14
+
class: className,
15
+
'data-slot': dataSlot = 'copy-text',
16
+
...restProps
17
+
}: CopyTextProps = $props()
12
18
13
19
const copyText = async () => {
14
20
try {
···
21
27
22
28
<span
23
29
{...restProps}
24
-
class={["inline-flex gap-1", restProps.class]}
30
+
class={cn('inline-flex gap-1', className)}
25
31
role="none"
26
32
onmouseenter={() => { isHovered = true; }}
27
33
onmouseleave={() => { isHovered = false; }}
+2
-1
app/src/lib/ui-components/text/Text.svelte
+2
-1
app/src/lib/ui-components/text/Text.svelte
···
8
8
underline,
9
9
color,
10
10
class: className,
11
+
'data-slot': dataSlot = 'text',
11
12
...restProps
12
13
}: TextProps = $props()
13
14
const styles = $derived(cn(text({ bold, underline, color }), className))
14
15
</script>
15
16
16
-
<span {...restProps} class={styles}>
17
+
<span {...restProps} data-slot={dataSlot} class={styles}>
17
18
{@render children?.()}
18
19
</span>