ui-ingredients 0.21.0 → 0.21.1
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.
- package/dist/accordion/accordion-item-content.svelte +55 -55
- package/dist/accordion/accordion-root.svelte +66 -66
- package/dist/alert-dialog/alert-dialog-backdrop.svelte +49 -49
- package/dist/alert-dialog/alert-dialog-root.svelte +48 -48
- package/dist/avatar/avatar-root.svelte +46 -46
- package/dist/carousel/carousel-root.svelte +56 -56
- package/dist/checkbox/checkbox-root.svelte +59 -59
- package/dist/clipboard/clipboard-root.svelte +52 -52
- package/dist/collapsible/collapsible-root.svelte +75 -75
- package/dist/color-picker/color-picker-root.svelte +87 -87
- package/dist/combobox/combobox-root.svelte +101 -101
- package/dist/combobox/combobox-trigger.svelte +41 -41
- package/dist/date-picker/date-picker-root.svelte +89 -89
- package/dist/dialog/dialog-backdrop.svelte +45 -45
- package/dist/dialog/dialog-root.svelte +48 -48
- package/dist/drawer/drawer-backdrop.svelte +45 -45
- package/dist/drawer/drawer-root.svelte +48 -48
- package/dist/editable/editable-root.svelte +74 -74
- package/dist/field/field-error-text.svelte +50 -50
- package/dist/field/field-root.svelte +63 -63
- package/dist/file-upload/file-upload-root.svelte +66 -66
- package/dist/floating-panel/floating-panel-root.svelte +47 -47
- package/dist/hover-card/hover-card-root.svelte +52 -52
- package/dist/menu/menu-root.svelte +74 -74
- package/dist/number-input/number-input-root.svelte +74 -74
- package/dist/pagination/pagination-root.svelte +57 -57
- package/dist/pin-input/pin-input-root.svelte +68 -68
- package/dist/popover/popover-root.svelte +60 -60
- package/dist/presence/presence.svelte +48 -48
- package/dist/progress/progress-root.svelte +54 -54
- package/dist/qr-code/qr-code-root.svelte +48 -48
- package/dist/radio-group/radio-group-root.svelte +56 -56
- package/dist/rating-group/rating-group-root.svelte +63 -63
- package/dist/segment-group/segment-group-root.svelte +58 -58
- package/dist/select/select-root.svelte +88 -88
- package/dist/signature-pad/signature-pad-root.svelte +59 -59
- package/dist/slider/slider-root.svelte +69 -69
- package/dist/splitter/splitter-root.svelte +53 -53
- package/dist/steps/steps-completed-content.svelte +51 -51
- package/dist/steps/steps-content.svelte +55 -55
- package/dist/steps/steps-root.svelte +65 -65
- package/dist/switch/switch-root.svelte +59 -59
- package/dist/tabs/tabs-root.svelte +57 -57
- package/dist/tags-input/tags-input-root.svelte +74 -74
- package/dist/time-picker/time-picker-root.svelte +81 -81
- package/dist/timer/timer-root.svelte +55 -55
- package/dist/toast/create-toaster.svelte.d.ts +1 -1
- package/dist/toast/toast-actor.svelte +19 -19
- package/dist/toast/toast-actor.svelte.d.ts +3 -3
- package/dist/toast/toaster.svelte +19 -21
- package/dist/toast/toaster.svelte.d.ts +1 -1
- package/dist/toggle/toggle-root.svelte +50 -50
- package/dist/toggle-group/toggle-group-root.svelte +58 -58
- package/dist/tooltip/tooltip-root.svelte +44 -44
- package/dist/tour/tour-backdrop.svelte +44 -44
- package/dist/tour/tour-root.svelte +47 -47
- package/dist/tree-view/tree-view-branch-content.svelte +55 -55
- package/dist/tree-view/tree-view-root.svelte +68 -68
- package/package.json +5 -5
@@ -1,45 +1,45 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {Action} from 'svelte/action';
|
4
|
-
|
5
|
-
export interface DrawerBackdropProps
|
6
|
-
extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
|
7
|
-
</script>
|
8
|
-
|
9
|
-
<script lang="ts">
|
10
|
-
import {mergeProps} from '../merge-props.js';
|
11
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
12
|
-
import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
13
|
-
import {reflect} from '@zag-js/svelte';
|
14
|
-
import {getDrawerContext} from './drawer-context.svelte.js';
|
15
|
-
|
16
|
-
let {
|
17
|
-
ref = $bindable(null),
|
18
|
-
asChild,
|
19
|
-
children,
|
20
|
-
...props
|
21
|
-
}: DrawerBackdropProps = $props();
|
22
|
-
|
23
|
-
let drawer = getDrawerContext();
|
24
|
-
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
25
|
-
let presence = createPresence(
|
26
|
-
reflect(() => ({
|
27
|
-
...presenceStrategyProps,
|
28
|
-
present: drawer.open,
|
29
|
-
})),
|
30
|
-
);
|
31
|
-
|
32
|
-
let mergedProps = $derived(
|
33
|
-
mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
|
34
|
-
);
|
35
|
-
</script>
|
36
|
-
|
37
|
-
{#if presence.mounted}
|
38
|
-
{#if asChild}
|
39
|
-
{@render asChild(presence.setReference, mergedProps)}
|
40
|
-
{:else}
|
41
|
-
<div bind:this={ref} use:presence.setReference {...mergedProps}>
|
42
|
-
{@render children?.()}
|
43
|
-
</div>
|
44
|
-
{/if}
|
45
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
4
|
+
|
5
|
+
export interface DrawerBackdropProps
|
6
|
+
extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
12
|
+
import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
13
|
+
import {reflect} from '@zag-js/svelte';
|
14
|
+
import {getDrawerContext} from './drawer-context.svelte.js';
|
15
|
+
|
16
|
+
let {
|
17
|
+
ref = $bindable(null),
|
18
|
+
asChild,
|
19
|
+
children,
|
20
|
+
...props
|
21
|
+
}: DrawerBackdropProps = $props();
|
22
|
+
|
23
|
+
let drawer = getDrawerContext();
|
24
|
+
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
25
|
+
let presence = createPresence(
|
26
|
+
reflect(() => ({
|
27
|
+
...presenceStrategyProps,
|
28
|
+
present: drawer.open,
|
29
|
+
})),
|
30
|
+
);
|
31
|
+
|
32
|
+
let mergedProps = $derived(
|
33
|
+
mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
|
34
|
+
);
|
35
|
+
</script>
|
36
|
+
|
37
|
+
{#if presence.mounted}
|
38
|
+
{#if asChild}
|
39
|
+
{@render asChild(presence.setReference, mergedProps)}
|
40
|
+
{:else}
|
41
|
+
<div bind:this={ref} use:presence.setReference {...mergedProps}>
|
42
|
+
{@render children?.()}
|
43
|
+
</div>
|
44
|
+
{/if}
|
45
|
+
{/if}
|
@@ -1,48 +1,48 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
-
import type {Snippet} from 'svelte';
|
4
|
-
import type {
|
5
|
-
CreateDrawerProps,
|
6
|
-
CreateDrawerReturn,
|
7
|
-
} from './create-drawer.svelte.js';
|
8
|
-
|
9
|
-
export interface DrawerProps
|
10
|
-
extends CreateDrawerProps,
|
11
|
-
PresenceStrategyProps {
|
12
|
-
children?: Snippet<[CreateDrawerReturn]>;
|
13
|
-
}
|
14
|
-
</script>
|
15
|
-
|
16
|
-
<script lang="ts">
|
17
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
18
|
-
import {
|
19
|
-
setPresenceContext,
|
20
|
-
setPresenceStrategyPropsContext,
|
21
|
-
} from '../presence/presence-context.svelte.js';
|
22
|
-
import {reflect} from '@zag-js/svelte';
|
23
|
-
import {createSplitProps} from '@zag-js/utils';
|
24
|
-
import {createDrawer} from './create-drawer.svelte.js';
|
25
|
-
import {setDrawerContext} from './drawer-context.svelte.js';
|
26
|
-
|
27
|
-
let {children, ...props}: DrawerProps = $props();
|
28
|
-
|
29
|
-
let [presenceStrategyProps, createDialogProps] = $derived(
|
30
|
-
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
31
|
-
props,
|
32
|
-
),
|
33
|
-
);
|
34
|
-
|
35
|
-
let drawer = createDrawer(reflect(() => createDialogProps));
|
36
|
-
let presence = createPresence(
|
37
|
-
reflect(() => ({
|
38
|
-
...presenceStrategyProps,
|
39
|
-
present: drawer.open,
|
40
|
-
})),
|
41
|
-
);
|
42
|
-
|
43
|
-
setDrawerContext(drawer);
|
44
|
-
setPresenceContext(presence);
|
45
|
-
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
46
|
-
</script>
|
47
|
-
|
48
|
-
{@render children?.(drawer)}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
+
import type {Snippet} from 'svelte';
|
4
|
+
import type {
|
5
|
+
CreateDrawerProps,
|
6
|
+
CreateDrawerReturn,
|
7
|
+
} from './create-drawer.svelte.js';
|
8
|
+
|
9
|
+
export interface DrawerProps
|
10
|
+
extends CreateDrawerProps,
|
11
|
+
PresenceStrategyProps {
|
12
|
+
children?: Snippet<[CreateDrawerReturn]>;
|
13
|
+
}
|
14
|
+
</script>
|
15
|
+
|
16
|
+
<script lang="ts">
|
17
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
18
|
+
import {
|
19
|
+
setPresenceContext,
|
20
|
+
setPresenceStrategyPropsContext,
|
21
|
+
} from '../presence/presence-context.svelte.js';
|
22
|
+
import {reflect} from '@zag-js/svelte';
|
23
|
+
import {createSplitProps} from '@zag-js/utils';
|
24
|
+
import {createDrawer} from './create-drawer.svelte.js';
|
25
|
+
import {setDrawerContext} from './drawer-context.svelte.js';
|
26
|
+
|
27
|
+
let {children, ...props}: DrawerProps = $props();
|
28
|
+
|
29
|
+
let [presenceStrategyProps, createDialogProps] = $derived(
|
30
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
31
|
+
props,
|
32
|
+
),
|
33
|
+
);
|
34
|
+
|
35
|
+
let drawer = createDrawer(reflect(() => createDialogProps));
|
36
|
+
let presence = createPresence(
|
37
|
+
reflect(() => ({
|
38
|
+
...presenceStrategyProps,
|
39
|
+
present: drawer.open,
|
40
|
+
})),
|
41
|
+
);
|
42
|
+
|
43
|
+
setDrawerContext(drawer);
|
44
|
+
setPresenceContext(presence);
|
45
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
46
|
+
</script>
|
47
|
+
|
48
|
+
{@render children?.(drawer)}
|
@@ -1,74 +1,74 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateEditableProps,
|
5
|
-
CreateEditableReturn,
|
6
|
-
} from './create-editable.svelte.js';
|
7
|
-
|
8
|
-
export interface EditableProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>,
|
11
|
-
CreateEditableProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {mergeProps} from '../merge-props.js';
|
17
|
-
import {reflect} from '@zag-js/svelte';
|
18
|
-
import {createSplitProps} from '@zag-js/utils';
|
19
|
-
import {createEditable} from './create-editable.svelte.js';
|
20
|
-
import {setEditableContext} from './editable-context.svelte.js';
|
21
|
-
|
22
|
-
let {
|
23
|
-
ref = $bindable(null),
|
24
|
-
asChild,
|
25
|
-
children,
|
26
|
-
...props
|
27
|
-
}: EditableProps = $props();
|
28
|
-
|
29
|
-
let [createEditableProps, localProps] = $derived(
|
30
|
-
createSplitProps<CreateEditableProps>([
|
31
|
-
'id',
|
32
|
-
'ids',
|
33
|
-
'name',
|
34
|
-
'form',
|
35
|
-
'edit',
|
36
|
-
'editControlled',
|
37
|
-
'value',
|
38
|
-
'invalid',
|
39
|
-
'readOnly',
|
40
|
-
'required',
|
41
|
-
'disabled',
|
42
|
-
'maxLength',
|
43
|
-
'submitMode',
|
44
|
-
'autoResize',
|
45
|
-
'placeholder',
|
46
|
-
'finalFocusEl',
|
47
|
-
'translations',
|
48
|
-
'selectOnFocus',
|
49
|
-
'onEditChange',
|
50
|
-
'onValueChange',
|
51
|
-
'onValueCommit',
|
52
|
-
'onValueRevert',
|
53
|
-
'activationMode',
|
54
|
-
'onFocusOutside',
|
55
|
-
'onInteractOutside',
|
56
|
-
'onPointerDownOutside',
|
57
|
-
'autoResize',
|
58
|
-
])(props),
|
59
|
-
);
|
60
|
-
|
61
|
-
let editable = createEditable(reflect(() => createEditableProps));
|
62
|
-
|
63
|
-
let mergedProps = $derived(mergeProps(editable.getRootProps(), localProps));
|
64
|
-
|
65
|
-
setEditableContext(editable);
|
66
|
-
</script>
|
67
|
-
|
68
|
-
{#if asChild}
|
69
|
-
{@render asChild(mergedProps, editable)}
|
70
|
-
{:else}
|
71
|
-
<div bind:this={ref} {...mergedProps}>
|
72
|
-
{@render children?.(editable)}
|
73
|
-
</div>
|
74
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateEditableProps,
|
5
|
+
CreateEditableReturn,
|
6
|
+
} from './create-editable.svelte.js';
|
7
|
+
|
8
|
+
export interface EditableProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateEditableReturn>,
|
11
|
+
CreateEditableProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {mergeProps} from '../merge-props.js';
|
17
|
+
import {reflect} from '@zag-js/svelte';
|
18
|
+
import {createSplitProps} from '@zag-js/utils';
|
19
|
+
import {createEditable} from './create-editable.svelte.js';
|
20
|
+
import {setEditableContext} from './editable-context.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: EditableProps = $props();
|
28
|
+
|
29
|
+
let [createEditableProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateEditableProps>([
|
31
|
+
'id',
|
32
|
+
'ids',
|
33
|
+
'name',
|
34
|
+
'form',
|
35
|
+
'edit',
|
36
|
+
'editControlled',
|
37
|
+
'value',
|
38
|
+
'invalid',
|
39
|
+
'readOnly',
|
40
|
+
'required',
|
41
|
+
'disabled',
|
42
|
+
'maxLength',
|
43
|
+
'submitMode',
|
44
|
+
'autoResize',
|
45
|
+
'placeholder',
|
46
|
+
'finalFocusEl',
|
47
|
+
'translations',
|
48
|
+
'selectOnFocus',
|
49
|
+
'onEditChange',
|
50
|
+
'onValueChange',
|
51
|
+
'onValueCommit',
|
52
|
+
'onValueRevert',
|
53
|
+
'activationMode',
|
54
|
+
'onFocusOutside',
|
55
|
+
'onInteractOutside',
|
56
|
+
'onPointerDownOutside',
|
57
|
+
'autoResize',
|
58
|
+
])(props),
|
59
|
+
);
|
60
|
+
|
61
|
+
let editable = createEditable(reflect(() => createEditableProps));
|
62
|
+
|
63
|
+
let mergedProps = $derived(mergeProps(editable.getRootProps(), localProps));
|
64
|
+
|
65
|
+
setEditableContext(editable);
|
66
|
+
</script>
|
67
|
+
|
68
|
+
{#if asChild}
|
69
|
+
{@render asChild(mergedProps, editable)}
|
70
|
+
{:else}
|
71
|
+
<div bind:this={ref} {...mergedProps}>
|
72
|
+
{@render children?.(editable)}
|
73
|
+
</div>
|
74
|
+
{/if}
|
@@ -1,50 +1,50 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {Action} from 'svelte/action';
|
4
|
-
|
5
|
-
export interface FieldErrorTextProps
|
6
|
-
extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
|
7
|
-
</script>
|
8
|
-
|
9
|
-
<script lang="ts">
|
10
|
-
import {mergeProps} from '../merge-props.js';
|
11
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
12
|
-
import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
13
|
-
import {reflect} from '@zag-js/svelte';
|
14
|
-
import {getFieldContext} from './field-context.svelte.js';
|
15
|
-
|
16
|
-
let {
|
17
|
-
ref = $bindable(null),
|
18
|
-
asChild,
|
19
|
-
children,
|
20
|
-
...props
|
21
|
-
}: FieldErrorTextProps = $props();
|
22
|
-
|
23
|
-
let field = getFieldContext();
|
24
|
-
|
25
|
-
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
26
|
-
let presence = createPresence(
|
27
|
-
reflect(() => ({
|
28
|
-
present: field?.invalid ?? true,
|
29
|
-
...presenceStrategyProps,
|
30
|
-
})),
|
31
|
-
);
|
32
|
-
|
33
|
-
let mergedProps = $derived(
|
34
|
-
mergeProps(
|
35
|
-
field?.getErrorTextProps() ?? {},
|
36
|
-
presence.getPresenceProps(),
|
37
|
-
props,
|
38
|
-
),
|
39
|
-
);
|
40
|
-
</script>
|
41
|
-
|
42
|
-
{#if presence.mounted}
|
43
|
-
{#if asChild}
|
44
|
-
{@render asChild(presence.setReference, mergedProps)}
|
45
|
-
{:else}
|
46
|
-
<div use:presence.setReference bind:this={ref} {...mergedProps}>
|
47
|
-
{@render children?.()}
|
48
|
-
</div>
|
49
|
-
{/if}
|
50
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
4
|
+
|
5
|
+
export interface FieldErrorTextProps
|
6
|
+
extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
12
|
+
import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
13
|
+
import {reflect} from '@zag-js/svelte';
|
14
|
+
import {getFieldContext} from './field-context.svelte.js';
|
15
|
+
|
16
|
+
let {
|
17
|
+
ref = $bindable(null),
|
18
|
+
asChild,
|
19
|
+
children,
|
20
|
+
...props
|
21
|
+
}: FieldErrorTextProps = $props();
|
22
|
+
|
23
|
+
let field = getFieldContext();
|
24
|
+
|
25
|
+
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
26
|
+
let presence = createPresence(
|
27
|
+
reflect(() => ({
|
28
|
+
present: field?.invalid ?? true,
|
29
|
+
...presenceStrategyProps,
|
30
|
+
})),
|
31
|
+
);
|
32
|
+
|
33
|
+
let mergedProps = $derived(
|
34
|
+
mergeProps(
|
35
|
+
field?.getErrorTextProps() ?? {},
|
36
|
+
presence.getPresenceProps(),
|
37
|
+
props,
|
38
|
+
),
|
39
|
+
);
|
40
|
+
</script>
|
41
|
+
|
42
|
+
{#if presence.mounted}
|
43
|
+
{#if asChild}
|
44
|
+
{@render asChild(presence.setReference, mergedProps)}
|
45
|
+
{:else}
|
46
|
+
<div use:presence.setReference bind:this={ref} {...mergedProps}>
|
47
|
+
{@render children?.()}
|
48
|
+
</div>
|
49
|
+
{/if}
|
50
|
+
{/if}
|
@@ -1,63 +1,63 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateFieldProps,
|
5
|
-
CreateFieldReturn,
|
6
|
-
} from './create-field.svelte.js';
|
7
|
-
|
8
|
-
export interface FieldProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
|
11
|
-
CreateFieldProps
|
12
|
-
>,
|
13
|
-
PresenceStrategyProps {}
|
14
|
-
</script>
|
15
|
-
|
16
|
-
<script lang="ts">
|
17
|
-
import {mergeProps} from '../merge-props.js';
|
18
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
19
|
-
import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
20
|
-
import {reflect} from '@zag-js/svelte';
|
21
|
-
import {createSplitProps} from '@zag-js/utils';
|
22
|
-
import {createField} from './create-field.svelte.js';
|
23
|
-
import {setFieldContext} from './field-context.svelte.js';
|
24
|
-
|
25
|
-
let {
|
26
|
-
ref = $bindable(null),
|
27
|
-
asChild,
|
28
|
-
children,
|
29
|
-
...props
|
30
|
-
}: FieldProps = $props();
|
31
|
-
|
32
|
-
let [presenceStrategyProps, rest] = $derived(
|
33
|
-
createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
|
34
|
-
props,
|
35
|
-
),
|
36
|
-
);
|
37
|
-
|
38
|
-
let [createFieldProps, localProps] = $derived(
|
39
|
-
createSplitProps<CreateFieldProps>([
|
40
|
-
'id',
|
41
|
-
'ids',
|
42
|
-
'invalid',
|
43
|
-
'disabled',
|
44
|
-
'readOnly',
|
45
|
-
'required',
|
46
|
-
])(rest),
|
47
|
-
);
|
48
|
-
|
49
|
-
let field = createField(reflect(() => createFieldProps));
|
50
|
-
|
51
|
-
let mergedProps = $derived(mergeProps(field.getRootProps(), localProps));
|
52
|
-
|
53
|
-
setFieldContext(field);
|
54
|
-
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
55
|
-
</script>
|
56
|
-
|
57
|
-
{#if asChild}
|
58
|
-
{@render asChild(mergedProps, field)}
|
59
|
-
{:else}
|
60
|
-
<div bind:this={ref} {...mergedProps}>
|
61
|
-
{@render children?.(field)}
|
62
|
-
</div>
|
63
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateFieldProps,
|
5
|
+
CreateFieldReturn,
|
6
|
+
} from './create-field.svelte.js';
|
7
|
+
|
8
|
+
export interface FieldProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateFieldReturn>,
|
11
|
+
CreateFieldProps
|
12
|
+
>,
|
13
|
+
PresenceStrategyProps {}
|
14
|
+
</script>
|
15
|
+
|
16
|
+
<script lang="ts">
|
17
|
+
import {mergeProps} from '../merge-props.js';
|
18
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
19
|
+
import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
20
|
+
import {reflect} from '@zag-js/svelte';
|
21
|
+
import {createSplitProps} from '@zag-js/utils';
|
22
|
+
import {createField} from './create-field.svelte.js';
|
23
|
+
import {setFieldContext} from './field-context.svelte.js';
|
24
|
+
|
25
|
+
let {
|
26
|
+
ref = $bindable(null),
|
27
|
+
asChild,
|
28
|
+
children,
|
29
|
+
...props
|
30
|
+
}: FieldProps = $props();
|
31
|
+
|
32
|
+
let [presenceStrategyProps, rest] = $derived(
|
33
|
+
createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
|
34
|
+
props,
|
35
|
+
),
|
36
|
+
);
|
37
|
+
|
38
|
+
let [createFieldProps, localProps] = $derived(
|
39
|
+
createSplitProps<CreateFieldProps>([
|
40
|
+
'id',
|
41
|
+
'ids',
|
42
|
+
'invalid',
|
43
|
+
'disabled',
|
44
|
+
'readOnly',
|
45
|
+
'required',
|
46
|
+
])(rest),
|
47
|
+
);
|
48
|
+
|
49
|
+
let field = createField(reflect(() => createFieldProps));
|
50
|
+
|
51
|
+
let mergedProps = $derived(mergeProps(field.getRootProps(), localProps));
|
52
|
+
|
53
|
+
setFieldContext(field);
|
54
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
55
|
+
</script>
|
56
|
+
|
57
|
+
{#if asChild}
|
58
|
+
{@render asChild(mergedProps, field)}
|
59
|
+
{:else}
|
60
|
+
<div bind:this={ref} {...mergedProps}>
|
61
|
+
{@render children?.(field)}
|
62
|
+
</div>
|
63
|
+
{/if}
|