a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
cleanup select component code
+76
-46
+2
-2
app/src/lib/ui/form/select/select-content.svelte
+2
-2
app/src/lib/ui/form/select/select-content.svelte
···
8
8
import { cn } from '$lib/utils.js'
9
9
import type { WithoutChild, WithoutChildrenOrChild } from '$lib/utils.js'
10
10
11
-
type Props = WithoutChild<SelectPrimitive.ContentProps> & {
11
+
type SelectContentProps = WithoutChild<SelectPrimitive.ContentProps> & {
12
12
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
13
13
}
14
14
let {
···
19
19
children,
20
20
preventScroll = true,
21
21
...restProps
22
-
}: Props = $props()
22
+
}: SelectContentProps = $props()
23
23
24
24
const styles = tv({
25
25
slots: {
+5
-5
app/src/lib/ui/form/select/select-group-heading.svelte
+5
-5
app/src/lib/ui/form/select/select-group-heading.svelte
···
1
1
<script lang="ts">
2
2
import { Select as SelectPrimitive } from 'bits-ui'
3
-
import type { ComponentProps } from 'svelte'
4
3
import { cn } from '$lib/utils'
5
4
6
-
type Props = ComponentProps<typeof SelectPrimitive.GroupHeading>
5
+
type SelectGroupHeadingProps = SelectPrimitive.GroupHeadingProps
7
6
let {
8
7
ref = $bindable(null),
9
-
class: className,
8
+
'data-slot': dataSlot = 'select-group-heading',
10
9
children,
10
+
class: className,
11
11
...restProps
12
-
}: Props = $props()
12
+
}: SelectGroupHeadingProps = $props()
13
13
</script>
14
14
15
15
<SelectPrimitive.GroupHeading
16
16
bind:ref
17
-
data-slot="select-group-heading"
17
+
data-slot={dataSlot}
18
18
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
19
19
{...restProps}
20
20
>
+4
-3
app/src/lib/ui/form/select/select-group.svelte
+4
-3
app/src/lib/ui/form/select/select-group.svelte
···
2
2
import { Select as SelectPrimitive } from 'bits-ui'
3
3
import { cn } from '$lib/utils'
4
4
5
-
type Props = SelectPrimitive.GroupProps
5
+
type SelectGroupProps = SelectPrimitive.GroupProps
6
6
let {
7
+
'data-slot': dataSlot = 'select-group',
7
8
ref = $bindable(null),
8
9
class: className,
9
10
...restProps
10
-
}: Props = $props()
11
+
}: SelectGroupProps = $props()
11
12
</script>
12
13
13
14
<SelectPrimitive.Group
14
15
bind:ref
15
-
data-slot="select-group"
16
+
data-slot={dataSlot}
16
17
class={cn("scroll-my-1 p-1", className)}
17
18
{...restProps}
18
19
/>
+12
-11
app/src/lib/ui/form/select/select-item.svelte
+12
-11
app/src/lib/ui/form/select/select-item.svelte
···
4
4
import { tv } from 'tailwind-variants'
5
5
import { cn, type WithoutChild } from '$lib/utils.js'
6
6
7
-
type Props = WithoutChild<SelectPrimitive.ItemProps>
7
+
type SelectItemProps = WithoutChild<SelectPrimitive.ItemProps>
8
8
let {
9
9
ref = $bindable(null),
10
-
class: className,
10
+
'data-slot': dataSlot = 'select-item',
11
11
value,
12
12
label,
13
+
class: className,
13
14
children: childrenProp,
14
15
...restProps
15
-
}: Props = $props()
16
+
}: SelectItemProps = $props()
16
17
17
18
const styles = tv({
18
19
base: [
19
-
"focus:bg-accent focus:text-accent-foreground",
20
-
"not-data-[variant=destructive]:focus:**:text-accent-foreground",
21
-
"min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed",
20
+
'flex w-full cursor-default items-center outline-hidden select-none',
21
+
'min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed',
22
22
"[&_svg:not([class*='size-'])]:size-3.5",
23
-
"*:[span]:last:flex *:[span]:last:items-center",
24
-
"*:[span]:last:gap-2",
23
+
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
24
+
'*:[span]:last:flex *:[span]:last:items-center',
25
+
'*:[span]:last:gap-2',
25
26
"data-highlighted:bg-accent",
26
27
"data-highlighted:text-accent-foreground",
27
28
"focus:text-accent-foreground relative",
28
-
"flex w-full cursor-default items-center outline-hidden select-none",
29
+
"focus:bg-accent focus:text-accent-foreground",
29
30
"data-disabled:pointer-events-none data-disabled:opacity-50",
30
-
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
31
+
"not-data-[variant=destructive]:focus:**:text-accent-foreground",
31
32
]
32
33
})
33
34
</script>
···
35
36
<SelectPrimitive.Item
36
37
bind:ref
37
38
{value}
38
-
data-slot="select-item"
39
+
data-slot={dataSlot}
39
40
class={cn(styles(), className)}
40
41
{...restProps}
41
42
>
+5
-4
app/src/lib/ui/form/select/select-label.svelte
+5
-4
app/src/lib/ui/form/select/select-label.svelte
···
2
2
import type { HTMLAttributes } from 'svelte/elements'
3
3
import { cn, type WithElementRef } from '$lib/utils.js'
4
4
5
-
type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>
5
+
type SelectLabelProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
6
6
let {
7
7
ref = $bindable(null),
8
-
class: className,
8
+
'data-slot': dataSlot = 'select-label',
9
9
children,
10
+
class: className,
10
11
...restProps
11
-
}: Props = $props();
12
+
}: SelectLabelProps = $props()
12
13
</script>
13
14
14
15
<div
15
16
bind:this={ref}
16
-
data-slot="select-label"
17
+
data-slot={dataSlot}
17
18
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
18
19
{...restProps}
19
20
>
+2
-2
app/src/lib/ui/form/select/select-portal.svelte
+2
-2
app/src/lib/ui/form/select/select-portal.svelte
···
1
1
<script lang="ts">
2
2
import { Select as SelectPrimitive } from 'bits-ui'
3
3
4
-
type Props = SelectPrimitive.PortalProps
5
-
let { ...restProps }: Props = $props()
4
+
type SelectPortalProps = SelectPrimitive.PortalProps
5
+
let { ...restProps }: SelectPortalProps = $props()
6
6
</script>
7
7
8
8
<SelectPrimitive.Portal {...restProps} />
+4
-3
app/src/lib/ui/form/select/select-separator.svelte
+4
-3
app/src/lib/ui/form/select/select-separator.svelte
···
2
2
import { Separator as SeparatorPrimitive } from 'bits-ui'
3
3
import { cn } from '$lib/utils'
4
4
5
-
type Props = SeparatorPrimitive.RootProps
5
+
type SelectSeparatorProps = SeparatorPrimitive.RootProps
6
6
let {
7
7
ref = $bindable(null),
8
+
'data-slot': dataSlot = 'select-separator',
8
9
class: className,
9
10
...restProps
10
-
}: Props = $props();
11
+
}: SelectSeparatorProps = $props()
11
12
</script>
12
13
13
14
<SeparatorPrimitive.Root
14
15
bind:ref
15
-
data-slot="select-separator"
16
+
data-slot={dataSlot}
16
17
class={cn("bg-border/50 -mx-1 my-1 h-px pointer-events-none", className)}
17
18
{...restProps}
18
19
/>
+7
-6
app/src/lib/ui/form/select/select-trigger.svelte
+7
-6
app/src/lib/ui/form/select/select-trigger.svelte
···
4
4
import { tv } from 'tailwind-variants'
5
5
import { cn, type WithoutChild } from '$lib/utils'
6
6
7
-
type Props = WithoutChild<SelectPrimitive.TriggerProps> & {
8
-
size?: "sm" | "default";
7
+
type SelectTriggerProps = WithoutChild<SelectPrimitive.TriggerProps> & {
8
+
size?: 'sm' | 'default',
9
9
}
10
10
let {
11
11
ref = $bindable(null),
12
-
class: className,
12
+
'data-slot': dataSlot = 'select-trigger',
13
+
size = 'default',
13
14
children,
14
-
size = "default",
15
+
class: className,
15
16
...restProps
16
-
}: Props = $props()
17
+
}: SelectTriggerProps = $props()
17
18
18
19
const styles = tv({
19
20
base: [
···
46
47
47
48
<SelectPrimitive.Trigger
48
49
bind:ref
49
-
data-slot="select-trigger"
50
+
data-slot={dataSlot}
50
51
data-size={size}
51
52
class={cn(styles(), className)}
52
53
{...restProps}
+6
-3
app/src/lib/ui/form/select/select.svelte
+6
-3
app/src/lib/ui/form/select/select.svelte
···
1
1
<script lang="ts">
2
2
import { Select as SelectPrimitive } from 'bits-ui'
3
3
4
-
type Props = SelectPrimitive.RootProps
4
+
type SelectProps = SelectPrimitive.RootProps
5
5
let {
6
6
open = $bindable(false),
7
7
value = $bindable(),
8
8
...restProps
9
-
}: Props = $props()
9
+
}: SelectProps = $props()
10
10
</script>
11
11
12
-
<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
12
+
<SelectPrimitive.Root
13
+
bind:open
14
+
bind:value={value as never}
15
+
{...restProps} />