app/src/lib/components/Button/Button.svelte
app/src/lib/components/Button/Button.svelte
This file has not been changed.
app/src/lib/components/Button/styles.ts
app/src/lib/components/Button/styles.ts
This file has not been changed.
app/src/lib/form/Checkbox/Checkbox.svelte
app/src/lib/form/Checkbox/Checkbox.svelte
This file has not been changed.
app/src/lib/form/Checkbox/CheckboxCard.svelte
app/src/lib/form/Checkbox/CheckboxCard.svelte
This file has not been changed.
app/src/lib/form/Checkbox/CheckboxGroup.svelte
app/src/lib/form/Checkbox/CheckboxGroup.svelte
This file has not been changed.
app/src/lib/form/NumberInput/NumberInput.svelte
app/src/lib/form/NumberInput/NumberInput.svelte
This file has not been changed.
app/src/lib/form/NumberInput/index.ts
app/src/lib/form/NumberInput/index.ts
This file has not been changed.
app/src/lib/form/TextInput/TextInput.svelte
app/src/lib/form/TextInput/TextInput.svelte
This file has not been changed.
app/src/routes/+layout.svelte
app/src/routes/+layout.svelte
This file has not been changed.
app/src/routes/combat/+page.server.ts
app/src/routes/combat/+page.server.ts
This file has not been changed.
app/src/routes/combat/+page.svelte
app/src/routes/combat/+page.svelte
This file has not been changed.
app/src/routes/combat/+page.ts
app/src/routes/combat/+page.ts
This file has not been changed.
app/src/routes/species/[page=species]/+page.server.ts
app/src/routes/species/[page=species]/+page.server.ts
This file has not been changed.
app/src/routes/species/[page=species]/+page.ts
app/src/routes/species/[page=species]/+page.ts
This file has not been changed.
app/src/routes/species/new/+page.server.ts
app/src/routes/species/new/+page.server.ts
This file has not been changed.
app/src/routes/species/new/+page.svelte
app/src/routes/species/new/+page.svelte
This file has not been changed.
package.json
package.json
This file has not been changed.
pnpm-lock.yaml
pnpm-lock.yaml
This file has not been changed.
-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
}
History
2 rounds
0 comments
samanthanguyen.me
submitted
#1
expand 0 comments
pull request successfully merged
samanthanguyen.me
submitted
#0
2 commits
expand
collapse
app/form: improve form components, +number input component
lint: fix linting errors