compote-ui 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,9 +3,36 @@
|
|
|
3
3
|
import type { FieldRootProps } from './types';
|
|
4
4
|
import { cn } from 'tailwind-variants';
|
|
5
5
|
|
|
6
|
-
let {
|
|
6
|
+
let {
|
|
7
|
+
form,
|
|
8
|
+
field,
|
|
9
|
+
label,
|
|
10
|
+
helperText,
|
|
11
|
+
class: className,
|
|
12
|
+
invalid,
|
|
13
|
+
required,
|
|
14
|
+
children,
|
|
15
|
+
...rest
|
|
16
|
+
}: FieldRootProps = $props();
|
|
17
|
+
|
|
18
|
+
const isInvalid = $derived(form && field ? form.invalid(field) : (invalid ?? false));
|
|
19
|
+
const isRequired = $derived(form && field ? form.isRequired(field) : (required ?? false));
|
|
20
|
+
const errorText = $derived(form && field ? (form.errors[field]?.[0] ?? null) : null);
|
|
7
21
|
</script>
|
|
8
22
|
|
|
9
|
-
<Field.Root
|
|
23
|
+
<Field.Root
|
|
24
|
+
{...rest}
|
|
25
|
+
invalid={isInvalid}
|
|
26
|
+
required={isRequired}
|
|
27
|
+
class={cn('group flex flex-col gap-1.5', className)}
|
|
28
|
+
>
|
|
29
|
+
{#if label}
|
|
30
|
+
<Field.Label>{label}<Field.RequiredIndicator /></Field.Label>
|
|
31
|
+
{/if}
|
|
10
32
|
{@render children?.()}
|
|
33
|
+
{#if errorText}
|
|
34
|
+
<Field.ErrorText>{errorText}</Field.ErrorText>
|
|
35
|
+
{:else if helperText}
|
|
36
|
+
<Field.HelperText>{helperText}</Field.HelperText>
|
|
37
|
+
{/if}
|
|
11
38
|
</Field.Root>
|
|
@@ -4,4 +4,4 @@ export { default as Input } from './field-input.svelte';
|
|
|
4
4
|
export { default as Textarea } from './field-textarea.svelte';
|
|
5
5
|
export { default as HelperText } from './field-helper-text.svelte';
|
|
6
6
|
export { default as ErrorText } from './field-error-text.svelte';
|
|
7
|
-
export type { FieldRootProps, FieldLabelProps, FieldInputProps, FieldTextareaProps, FieldHelperTextProps, FieldErrorTextProps } from './types';
|
|
7
|
+
export type { FormAdapter, FieldRootProps, FieldLabelProps, FieldInputProps, FieldTextareaProps, FieldHelperTextProps, FieldErrorTextProps } from './types';
|
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
import type { FieldRootBaseProps, FieldLabelBaseProps, FieldInputProps as ArkFieldInputProps, FieldTextareaProps as ArkFieldTextareaProps, FieldHelperTextBaseProps, FieldErrorTextBaseProps } from '@ark-ui/svelte/field';
|
|
3
|
+
export interface FormAdapter {
|
|
4
|
+
invalid(field: string): boolean;
|
|
5
|
+
isRequired(field: string): boolean;
|
|
6
|
+
errors: Record<string, string[]>;
|
|
7
|
+
}
|
|
3
8
|
export interface FieldRootProps extends FieldRootBaseProps {
|
|
4
9
|
class?: string;
|
|
10
|
+
form?: FormAdapter;
|
|
11
|
+
field?: string;
|
|
12
|
+
label?: string;
|
|
13
|
+
helperText?: string;
|
|
5
14
|
}
|
|
6
15
|
export interface FieldLabelProps extends FieldLabelBaseProps {
|
|
7
16
|
class?: string;
|
|
@@ -17,9 +17,6 @@
|
|
|
17
17
|
name,
|
|
18
18
|
...restProps
|
|
19
19
|
}: SelectProps<T> = $props();
|
|
20
|
-
const rootClass = $derived(
|
|
21
|
-
layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5'
|
|
22
|
-
);
|
|
23
20
|
|
|
24
21
|
const collection = $derived(createListCollection(items));
|
|
25
22
|
</script>
|
|
@@ -30,7 +27,7 @@
|
|
|
30
27
|
deselectable
|
|
31
28
|
value={value ? [value.toString()] : []}
|
|
32
29
|
onValueChange={(valueChangeDetails) => {
|
|
33
|
-
if (valueChangeDetails.items
|
|
30
|
+
if (valueChangeDetails.items == null || valueChangeDetails.items.length === 0) {
|
|
34
31
|
value = null;
|
|
35
32
|
} else {
|
|
36
33
|
value = valueChangeDetails.items[0].value;
|
|
@@ -39,7 +36,7 @@
|
|
|
39
36
|
restProps.onValueChange(valueChangeDetails);
|
|
40
37
|
}
|
|
41
38
|
}}
|
|
42
|
-
class={
|
|
39
|
+
class={cn(layout === 'horizontal' ? 'flex items-center gap-1.5' : 'grid gap-1.5')}
|
|
43
40
|
>
|
|
44
41
|
{#if label}
|
|
45
42
|
<Select.Label>
|
|
@@ -53,7 +50,7 @@
|
|
|
53
50
|
>
|
|
54
51
|
<div class="flex items-center gap-2">
|
|
55
52
|
<Select.ValueText
|
|
56
|
-
placeholder={placeholder ?? 'Select
|
|
53
|
+
placeholder={placeholder ?? 'Select an item'}
|
|
57
54
|
class={cn('text-nowrap', value ? '' : 'text-ink-dim')}
|
|
58
55
|
/>
|
|
59
56
|
</div>
|
|
@@ -84,5 +81,4 @@
|
|
|
84
81
|
</Select.Positioner>
|
|
85
82
|
</Portal>
|
|
86
83
|
<input type="hidden" {name} value={value ?? ''} />
|
|
87
|
-
<Select.HiddenSelect />
|
|
88
84
|
</Select.Root>
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
import PhCaretRight from '../../icons/PhCaretRight.svelte';
|
|
9
9
|
import PhMinus from '../../icons/PhMinus.svelte';
|
|
10
10
|
import PhCheck from '../../icons/PhCheck.svelte';
|
|
11
|
-
import PhListMagnifyingGlass from '../../icons/PhListMagnifyingGlass.svelte';
|
|
12
11
|
import PhArrowsInSimple from '../../icons/PhArrowsInSimple.svelte';
|
|
13
12
|
import { Button, Field } from '../..';
|
|
14
13
|
import { SvelteSet } from 'svelte/reactivity';
|