samanthanguyen.me
a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
app/forms: remove some unused components
-153
-35
app/src/lib/form/Field/FieldGroup.svelte
-35
app/src/lib/form/Field/FieldGroup.svelte
···
1
-
<script lang="ts">
2
-
import type { WithElementRef } from 'bits-ui'
3
-
import type { SvelteHTMLElements } from 'svelte/elements'
4
-
import { tv } from 'tailwind-variants'
5
-
import { cn } from '$lib/utils'
6
-
7
-
type FieldGroupRootElement = SvelteHTMLElements['div']
8
-
type FieldGroupProps = WithElementRef<FieldGroupRootElement>
9
-
10
-
let {
11
-
ref = $bindable(null),
12
-
class: className,
13
-
children,
14
-
'data-slot': dataSlot = 'field-group',
15
-
...restProps
16
-
}: FieldGroupProps = $props()
17
-
18
-
const fieldGroup = tv({
19
-
base: [
20
-
'group/field-group @container/field-group',
21
-
'flex w-full flex-col gap-7',
22
-
'data-[slot=checkbox-group]:gap-3',
23
-
'*:data-[slot=field-group]:gap-4',
24
-
]
25
-
})
26
-
</script>
27
-
28
-
<div
29
-
bind:this={ref}
30
-
data-slot={dataSlot}
31
-
class={cn(fieldGroup(), className)}
32
-
{...restProps}
33
-
>
34
-
{@render children?.()}
35
-
</div>
-38
app/src/lib/form/Field/FieldLegend.svelte
-38
app/src/lib/form/Field/FieldLegend.svelte
···
1
-
<script lang="ts">
2
-
import type { WithElementRef } from 'bits-ui'
3
-
import type { SvelteHTMLElements } from 'svelte/elements'
4
-
import { tv } from 'tailwind-variants'
5
-
import { cn } from '$lib/utils'
6
-
7
-
type FieldLegendRootElement = SvelteHTMLElements['legend']
8
-
type FieldLegendProps = WithElementRef<FieldLegendRootElement> & {
9
-
variant?: 'legend' | 'label',
10
-
}
11
-
12
-
let {
13
-
ref = $bindable(null),
14
-
class: className,
15
-
variant = 'legend',
16
-
children,
17
-
'data-slot': dataSlot = 'field-legend',
18
-
...restProps
19
-
}: FieldLegendProps = $props()
20
-
21
-
const fieldLegend = tv({
22
-
base: [
23
-
'mb-3 font-medium',
24
-
'data-[variant=legend]:text-base',
25
-
'data-[variant=label]:text-sm',
26
-
]
27
-
})
28
-
</script>
29
-
30
-
<legend
31
-
bind:this={ref}
32
-
data-slot={dataSlot}
33
-
data-variant={variant}
34
-
class={cn(fieldLegend(), className)}
35
-
{...restProps}
36
-
>
37
-
{@render children?.()}
38
-
</legend>
-34
app/src/lib/form/Field/FieldSet.svelte
-34
app/src/lib/form/Field/FieldSet.svelte
···
1
-
<script lang="ts">
2
-
import type { WithElementRef } from 'bits-ui'
3
-
import type { SvelteHTMLElements } from 'svelte/elements'
4
-
import { tv } from 'tailwind-variants'
5
-
import { cn } from '$lib/utils'
6
-
7
-
type FieldSetRootElement = SvelteHTMLElements['fieldset']
8
-
type FieldSetProps = WithElementRef<FieldSetRootElement>
9
-
10
-
let {
11
-
ref = $bindable(null),
12
-
class: className,
13
-
children,
14
-
'data-slot': dataSlot = 'field-set',
15
-
...restProps
16
-
}: FieldSetProps = $props()
17
-
18
-
const fieldSet = tv({
19
-
base: [
20
-
'flex flex-col gap-6',
21
-
'has-[>[data-slot=checkbox-group]]:gap-3',
22
-
'has-[>[data-slot=radio-group]]:gap-3',
23
-
]
24
-
})
25
-
</script>
26
-
27
-
<fieldset
28
-
bind:this={ref}
29
-
data-slot={dataSlot}
30
-
class={cn(fieldSet(), className)}
31
-
{...restProps}
32
-
>
33
-
{@render children?.()}
34
-
</fieldset>
-34
app/src/lib/form/Field/FieldTitle.svelte
-34
app/src/lib/form/Field/FieldTitle.svelte
···
1
-
<script lang="ts">
2
-
import type { WithElementRef } from 'bits-ui'
3
-
import type { SvelteHTMLElements } from 'svelte/elements'
4
-
import { tv } from 'tailwind-variants'
5
-
import { cn } from '$lib/utils'
6
-
7
-
type FieldTitleRootElement = SvelteHTMLElements['div']
8
-
type FieldTitleProps = WithElementRef<FieldTitleRootElement>
9
-
10
-
let {
11
-
ref = $bindable(null),
12
-
class: className,
13
-
children,
14
-
'data-slot': dataSlot = 'field-title',
15
-
...restProps
16
-
}: FieldTitleProps = $props()
17
-
18
-
const fieldTitle = tv({
19
-
base: [
20
-
'flex items-center gap-2 w-fit',
21
-
'text-sm leading-snug font-medium',
22
-
'group-data-[disabled=true]/field:opacity-50',
23
-
]
24
-
})
25
-
</script>
26
-
27
-
<div
28
-
bind:this={ref}
29
-
data-slot={dataSlot}
30
-
class={cn(fieldTitle(),className)}
31
-
{...restProps}
32
-
>
33
-
{@render children?.()}
34
-
</div>
-12
app/src/lib/form/Field/index.ts
-12
app/src/lib/form/Field/index.ts
···
1
1
import Field from './Field.svelte'
2
-
import Set from './FieldSet.svelte'
3
-
import Legend from './FieldLegend.svelte'
4
-
import Group from './FieldGroup.svelte'
5
2
import Content from './FieldContent.svelte'
6
3
import Label from './FieldLabel.svelte'
7
-
import Title from './FieldTitle.svelte'
8
4
import Description from './FieldDescription.svelte'
9
5
import Error from './FieldError.svelte'
10
6
11
7
export {
12
8
Field,
13
-
Set,
14
-
Legend,
15
-
Group,
16
9
Content,
17
10
Label,
18
-
Title,
19
11
Description,
20
12
Error,
21
13
//
22
-
Set as FieldSet,
23
-
Legend as FieldLegend,
24
-
Group as FieldGroup,
25
14
Content as FieldContent,
26
15
Label as FieldLabel,
27
-
Title as FieldTitle,
28
16
Description as FieldDescription,
29
17
Error as FieldError,
30
18
}