ui-ingredients 0.31.1 → 0.31.2
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/README.md +49 -49
- package/dist/accordion/accordion-item.svelte +64 -64
- package/dist/accordion/accordion-root.svelte +65 -65
- package/dist/alert/alert-root.svelte +45 -45
- package/dist/alert-dialog/alert-dialog-root.svelte +48 -48
- package/dist/angle-slider/angle-slider-root.svelte +58 -58
- package/dist/avatar/avatar-root.svelte +45 -45
- package/dist/carousel/carousel-root.svelte +64 -64
- package/dist/clipboard/clipboard-root.svelte +52 -52
- package/dist/collapsible/collapsible-root.svelte +73 -73
- package/dist/color-picker/color-picker-root.svelte +88 -88
- package/dist/combobox/combobox-root.svelte +102 -102
- package/dist/dialog/dialog-root.svelte +48 -48
- package/dist/drawer/drawer-root.svelte +48 -48
- package/dist/editable/editable-root.svelte +72 -72
- package/dist/field/field-root.svelte +62 -62
- package/dist/file-upload/file-upload-root.svelte +68 -68
- package/dist/floating-panel/floating-panel-root.svelte +47 -47
- package/dist/highlight/highlight.svelte +42 -42
- package/dist/hover-card/hover-card-root.svelte +51 -51
- package/dist/menu/menu-root.svelte +74 -74
- package/dist/merge-props.js +15 -17
- 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 +67 -67
- package/dist/popover/popover-root.svelte +60 -60
- package/dist/presence/presence.svelte +43 -43
- package/dist/progress/progress-root.svelte +55 -55
- package/dist/qr-code/qr-code-root.svelte +52 -52
- package/dist/radio-group/radio-group-root.svelte +55 -55
- package/dist/rating-group/rating-group-root.svelte +62 -62
- package/dist/segment-group/segment-group-root.svelte +57 -57
- package/dist/select/select-root.svelte +88 -88
- package/dist/signature-pad/signature-pad-root.svelte +59 -59
- package/dist/slider/slider-root.svelte +68 -68
- package/dist/splitter/splitter-root.svelte +52 -52
- package/dist/steps/steps-root.svelte +64 -64
- package/dist/switch/switch-root.svelte +58 -58
- package/dist/tabs/tabs-root.svelte +58 -58
- 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/toast-actor.svelte +19 -19
- package/dist/toggle/toggle-root.svelte +49 -49
- package/dist/toggle-group/toggle-group-root.svelte +57 -57
- package/dist/tooltip/tooltip-root.svelte +44 -44
- package/dist/tour/tour-root.svelte +46 -46
- package/dist/tree-view/tree-view-branch.svelte +63 -63
- package/dist/tree-view/tree-view-root.svelte +68 -68
- package/package.json +403 -411
@@ -1,45 +1,45 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import {
|
4
|
-
type CreateAvatarProps,
|
5
|
-
type CreateAvatarReturn,
|
6
|
-
} from './create-avatar.svelte.js';
|
7
|
-
|
8
|
-
export interface AvatarProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateAvatarReturn>,
|
11
|
-
CreateAvatarProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {reflect} from '@zag-js/svelte';
|
17
|
-
import {createSplitProps} from '../create-split-props.js';
|
18
|
-
import {mergeProps} from '../merge-props.js';
|
19
|
-
import {setAvatarContext} from './avatar-context.svelte.js';
|
20
|
-
import {createAvatar} from './create-avatar.svelte.js';
|
21
|
-
|
22
|
-
let {
|
23
|
-
ref = $bindable(null),
|
24
|
-
asChild,
|
25
|
-
children,
|
26
|
-
...props
|
27
|
-
}: AvatarProps = $props();
|
28
|
-
|
29
|
-
let [createAvatarProps, localProps] = $derived(
|
30
|
-
createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
|
31
|
-
);
|
32
|
-
|
33
|
-
let avatar = createAvatar(reflect(() => createAvatarProps));
|
34
|
-
let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
|
35
|
-
|
36
|
-
setAvatarContext(avatar);
|
37
|
-
</script>
|
38
|
-
|
39
|
-
{#if asChild}
|
40
|
-
{@render asChild(mergedProps, avatar)}
|
41
|
-
{:else}
|
42
|
-
<div bind:this={ref} {...mergedProps}>
|
43
|
-
{@render children?.(avatar)}
|
44
|
-
</div>
|
45
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import {
|
4
|
+
type CreateAvatarProps,
|
5
|
+
type CreateAvatarReturn,
|
6
|
+
} from './create-avatar.svelte.js';
|
7
|
+
|
8
|
+
export interface AvatarProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateAvatarReturn>,
|
11
|
+
CreateAvatarProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {reflect} from '@zag-js/svelte';
|
17
|
+
import {createSplitProps} from '../create-split-props.js';
|
18
|
+
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setAvatarContext} from './avatar-context.svelte.js';
|
20
|
+
import {createAvatar} from './create-avatar.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: AvatarProps = $props();
|
28
|
+
|
29
|
+
let [createAvatarProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
|
31
|
+
);
|
32
|
+
|
33
|
+
let avatar = createAvatar(reflect(() => createAvatarProps));
|
34
|
+
let mergedProps = $derived(mergeProps(avatar.getRootProps(), localProps));
|
35
|
+
|
36
|
+
setAvatarContext(avatar);
|
37
|
+
</script>
|
38
|
+
|
39
|
+
{#if asChild}
|
40
|
+
{@render asChild(mergedProps, avatar)}
|
41
|
+
{:else}
|
42
|
+
<div bind:this={ref} {...mergedProps}>
|
43
|
+
{@render children?.(avatar)}
|
44
|
+
</div>
|
45
|
+
{/if}
|
@@ -1,64 +1,64 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateCarouselProps,
|
5
|
-
CreateCarouselReturn,
|
6
|
-
} from './create-carousel.svelte.js';
|
7
|
-
|
8
|
-
export interface CarouselProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>,
|
11
|
-
CreateCarouselProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {reflect} from '@zag-js/svelte';
|
17
|
-
import {createSplitProps} from '../create-split-props.js';
|
18
|
-
import {mergeProps} from '../merge-props.js';
|
19
|
-
import {setCarouselContext} from './carousel-context.svelte.js';
|
20
|
-
import {createCarousel} from './create-carousel.svelte.js';
|
21
|
-
|
22
|
-
let {
|
23
|
-
ref = $bindable(null),
|
24
|
-
asChild,
|
25
|
-
children,
|
26
|
-
...props
|
27
|
-
}: CarouselProps = $props();
|
28
|
-
|
29
|
-
let [createCarouselProps, localProps] = $derived(
|
30
|
-
createSplitProps<CreateCarouselProps>([
|
31
|
-
'allowMouseDrag',
|
32
|
-
'autoplay',
|
33
|
-
'id',
|
34
|
-
'ids',
|
35
|
-
'inViewThreshold',
|
36
|
-
'loop',
|
37
|
-
'onAutoplayStatusChange',
|
38
|
-
'onDragStatusChange',
|
39
|
-
'onPageChange',
|
40
|
-
'orientation',
|
41
|
-
'padding',
|
42
|
-
'page',
|
43
|
-
'slideCount',
|
44
|
-
'slidesPerMove',
|
45
|
-
'slidesPerPage',
|
46
|
-
'snapType',
|
47
|
-
'spacing',
|
48
|
-
'translations',
|
49
|
-
])(props),
|
50
|
-
);
|
51
|
-
|
52
|
-
let carousel = createCarousel(reflect(() => createCarouselProps));
|
53
|
-
let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
|
54
|
-
|
55
|
-
setCarouselContext(carousel);
|
56
|
-
</script>
|
57
|
-
|
58
|
-
{#if asChild}
|
59
|
-
{@render asChild(mergedProps, carousel)}
|
60
|
-
{:else}
|
61
|
-
<div bind:this={ref} {...mergedProps}>
|
62
|
-
{@render children?.(carousel)}
|
63
|
-
</div>
|
64
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateCarouselProps,
|
5
|
+
CreateCarouselReturn,
|
6
|
+
} from './create-carousel.svelte.js';
|
7
|
+
|
8
|
+
export interface CarouselProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>,
|
11
|
+
CreateCarouselProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {reflect} from '@zag-js/svelte';
|
17
|
+
import {createSplitProps} from '../create-split-props.js';
|
18
|
+
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setCarouselContext} from './carousel-context.svelte.js';
|
20
|
+
import {createCarousel} from './create-carousel.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: CarouselProps = $props();
|
28
|
+
|
29
|
+
let [createCarouselProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateCarouselProps>([
|
31
|
+
'allowMouseDrag',
|
32
|
+
'autoplay',
|
33
|
+
'id',
|
34
|
+
'ids',
|
35
|
+
'inViewThreshold',
|
36
|
+
'loop',
|
37
|
+
'onAutoplayStatusChange',
|
38
|
+
'onDragStatusChange',
|
39
|
+
'onPageChange',
|
40
|
+
'orientation',
|
41
|
+
'padding',
|
42
|
+
'page',
|
43
|
+
'slideCount',
|
44
|
+
'slidesPerMove',
|
45
|
+
'slidesPerPage',
|
46
|
+
'snapType',
|
47
|
+
'spacing',
|
48
|
+
'translations',
|
49
|
+
])(props),
|
50
|
+
);
|
51
|
+
|
52
|
+
let carousel = createCarousel(reflect(() => createCarouselProps));
|
53
|
+
let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
|
54
|
+
|
55
|
+
setCarouselContext(carousel);
|
56
|
+
</script>
|
57
|
+
|
58
|
+
{#if asChild}
|
59
|
+
{@render asChild(mergedProps, carousel)}
|
60
|
+
{:else}
|
61
|
+
<div bind:this={ref} {...mergedProps}>
|
62
|
+
{@render children?.(carousel)}
|
63
|
+
</div>
|
64
|
+
{/if}
|
@@ -1,52 +1,52 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateClipboardProps,
|
5
|
-
CreateClipboardReturn,
|
6
|
-
} from './create-clipboard.svelte.js';
|
7
|
-
|
8
|
-
export interface ClipboardProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateClipboardReturn>,
|
11
|
-
CreateClipboardProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {reflect} from '@zag-js/svelte';
|
17
|
-
import {createSplitProps} from '../create-split-props.js';
|
18
|
-
import {mergeProps} from '../merge-props.js';
|
19
|
-
import {setClipboardContext} from './clipboard-context.svelte.js';
|
20
|
-
import {createClipboard} from './create-clipboard.svelte.js';
|
21
|
-
|
22
|
-
let {
|
23
|
-
ref = $bindable(null),
|
24
|
-
asChild,
|
25
|
-
children,
|
26
|
-
...props
|
27
|
-
}: ClipboardProps = $props();
|
28
|
-
|
29
|
-
let [createClipboardProps, localProps] = $derived(
|
30
|
-
createSplitProps<CreateClipboardProps>([
|
31
|
-
'id',
|
32
|
-
'ids',
|
33
|
-
'onStatusChange',
|
34
|
-
'timeout',
|
35
|
-
'value',
|
36
|
-
])(props),
|
37
|
-
);
|
38
|
-
|
39
|
-
let clipboard = createClipboard(reflect(() => createClipboardProps));
|
40
|
-
|
41
|
-
let mergedProps = $derived(mergeProps(clipboard.getRootProps(), localProps));
|
42
|
-
|
43
|
-
setClipboardContext(clipboard);
|
44
|
-
</script>
|
45
|
-
|
46
|
-
{#if asChild}
|
47
|
-
{@render asChild(mergedProps, clipboard)}
|
48
|
-
{:else}
|
49
|
-
<div bind:this={ref} {...mergedProps}>
|
50
|
-
{@render children?.(clipboard)}
|
51
|
-
</div>
|
52
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateClipboardProps,
|
5
|
+
CreateClipboardReturn,
|
6
|
+
} from './create-clipboard.svelte.js';
|
7
|
+
|
8
|
+
export interface ClipboardProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateClipboardReturn>,
|
11
|
+
CreateClipboardProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {reflect} from '@zag-js/svelte';
|
17
|
+
import {createSplitProps} from '../create-split-props.js';
|
18
|
+
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setClipboardContext} from './clipboard-context.svelte.js';
|
20
|
+
import {createClipboard} from './create-clipboard.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: ClipboardProps = $props();
|
28
|
+
|
29
|
+
let [createClipboardProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateClipboardProps>([
|
31
|
+
'id',
|
32
|
+
'ids',
|
33
|
+
'onStatusChange',
|
34
|
+
'timeout',
|
35
|
+
'value',
|
36
|
+
])(props),
|
37
|
+
);
|
38
|
+
|
39
|
+
let clipboard = createClipboard(reflect(() => createClipboardProps));
|
40
|
+
|
41
|
+
let mergedProps = $derived(mergeProps(clipboard.getRootProps(), localProps));
|
42
|
+
|
43
|
+
setClipboardContext(clipboard);
|
44
|
+
</script>
|
45
|
+
|
46
|
+
{#if asChild}
|
47
|
+
{@render asChild(mergedProps, clipboard)}
|
48
|
+
{:else}
|
49
|
+
<div bind:this={ref} {...mergedProps}>
|
50
|
+
{@render children?.(clipboard)}
|
51
|
+
</div>
|
52
|
+
{/if}
|
@@ -1,73 +1,73 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
4
|
-
import type {
|
5
|
-
CreateCollapsibleProps,
|
6
|
-
CreateCollapsibleReturn,
|
7
|
-
} from './create-collapsible.svelte.js';
|
8
|
-
|
9
|
-
export interface CollapsibleProps
|
10
|
-
extends Assign<
|
11
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>,
|
12
|
-
CreateCollapsibleProps
|
13
|
-
>,
|
14
|
-
PresenceStrategyProps {}
|
15
|
-
</script>
|
16
|
-
|
17
|
-
<script lang="ts">
|
18
|
-
import {reflect} from '@zag-js/svelte';
|
19
|
-
import {createSplitProps} from '../create-split-props.js';
|
20
|
-
import {mergeProps} from '../merge-props.js';
|
21
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
22
|
-
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
23
|
-
import {setCollapsibleContext} from './collapsible-context.svelte.js';
|
24
|
-
import {createCollapsible} from './create-collapsible.svelte.js';
|
25
|
-
|
26
|
-
let {
|
27
|
-
ref = $bindable(null),
|
28
|
-
asChild,
|
29
|
-
children,
|
30
|
-
...props
|
31
|
-
}: CollapsibleProps = $props();
|
32
|
-
|
33
|
-
let [presenceStrategyProps, rest] = $derived(
|
34
|
-
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
35
|
-
props,
|
36
|
-
),
|
37
|
-
);
|
38
|
-
|
39
|
-
let [createCollapsibleProps, localProps] = $derived(
|
40
|
-
createSplitProps<CreateCollapsibleProps>([
|
41
|
-
'disabled',
|
42
|
-
'id',
|
43
|
-
'ids',
|
44
|
-
'onExitComplete',
|
45
|
-
'onOpenChange',
|
46
|
-
'open',
|
47
|
-
'openControlled',
|
48
|
-
])(rest),
|
49
|
-
);
|
50
|
-
|
51
|
-
let collapsible = createCollapsible(reflect(() => createCollapsibleProps));
|
52
|
-
let presence = createPresence(
|
53
|
-
reflect(() => ({
|
54
|
-
present: collapsible.open,
|
55
|
-
...presenceStrategyProps,
|
56
|
-
})),
|
57
|
-
);
|
58
|
-
|
59
|
-
let mergedProps = $derived(
|
60
|
-
mergeProps(collapsible.getRootProps(), localProps),
|
61
|
-
);
|
62
|
-
|
63
|
-
setCollapsibleContext(collapsible);
|
64
|
-
setPresenceContext(presence);
|
65
|
-
</script>
|
66
|
-
|
67
|
-
{#if asChild}
|
68
|
-
{@render asChild(mergedProps, collapsible)}
|
69
|
-
{:else}
|
70
|
-
<div bind:this={ref} {...mergedProps}>
|
71
|
-
{@render children?.(collapsible)}
|
72
|
-
</div>
|
73
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
4
|
+
import type {
|
5
|
+
CreateCollapsibleProps,
|
6
|
+
CreateCollapsibleReturn,
|
7
|
+
} from './create-collapsible.svelte.js';
|
8
|
+
|
9
|
+
export interface CollapsibleProps
|
10
|
+
extends Assign<
|
11
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>,
|
12
|
+
CreateCollapsibleProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
15
|
+
</script>
|
16
|
+
|
17
|
+
<script lang="ts">
|
18
|
+
import {reflect} from '@zag-js/svelte';
|
19
|
+
import {createSplitProps} from '../create-split-props.js';
|
20
|
+
import {mergeProps} from '../merge-props.js';
|
21
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
22
|
+
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
23
|
+
import {setCollapsibleContext} from './collapsible-context.svelte.js';
|
24
|
+
import {createCollapsible} from './create-collapsible.svelte.js';
|
25
|
+
|
26
|
+
let {
|
27
|
+
ref = $bindable(null),
|
28
|
+
asChild,
|
29
|
+
children,
|
30
|
+
...props
|
31
|
+
}: CollapsibleProps = $props();
|
32
|
+
|
33
|
+
let [presenceStrategyProps, rest] = $derived(
|
34
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
35
|
+
props,
|
36
|
+
),
|
37
|
+
);
|
38
|
+
|
39
|
+
let [createCollapsibleProps, localProps] = $derived(
|
40
|
+
createSplitProps<CreateCollapsibleProps>([
|
41
|
+
'disabled',
|
42
|
+
'id',
|
43
|
+
'ids',
|
44
|
+
'onExitComplete',
|
45
|
+
'onOpenChange',
|
46
|
+
'open',
|
47
|
+
'openControlled',
|
48
|
+
])(rest),
|
49
|
+
);
|
50
|
+
|
51
|
+
let collapsible = createCollapsible(reflect(() => createCollapsibleProps));
|
52
|
+
let presence = createPresence(
|
53
|
+
reflect(() => ({
|
54
|
+
present: collapsible.open,
|
55
|
+
...presenceStrategyProps,
|
56
|
+
})),
|
57
|
+
);
|
58
|
+
|
59
|
+
let mergedProps = $derived(
|
60
|
+
mergeProps(collapsible.getRootProps(), localProps),
|
61
|
+
);
|
62
|
+
|
63
|
+
setCollapsibleContext(collapsible);
|
64
|
+
setPresenceContext(presence);
|
65
|
+
</script>
|
66
|
+
|
67
|
+
{#if asChild}
|
68
|
+
{@render asChild(mergedProps, collapsible)}
|
69
|
+
{:else}
|
70
|
+
<div bind:this={ref} {...mergedProps}>
|
71
|
+
{@render children?.(collapsible)}
|
72
|
+
</div>
|
73
|
+
{/if}
|
@@ -1,88 +1,88 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
4
|
-
import type {
|
5
|
-
CreateColorPickerProps,
|
6
|
-
CreateColorPickerReturn,
|
7
|
-
} from './create-color-picker.svelte.js';
|
8
|
-
|
9
|
-
export interface ColorPickerProps
|
10
|
-
extends Assign<
|
11
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>,
|
12
|
-
CreateColorPickerProps
|
13
|
-
>,
|
14
|
-
PresenceStrategyProps {}
|
15
|
-
</script>
|
16
|
-
|
17
|
-
<script lang="ts">
|
18
|
-
import {reflect} from '@zag-js/svelte';
|
19
|
-
import {createSplitProps} from '../create-split-props.js';
|
20
|
-
import {mergeProps} from '../merge-props.js';
|
21
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
22
|
-
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
23
|
-
import {setColorPickerContext} from './color-picker-context.svelte.js';
|
24
|
-
import {createColorPicker} from './create-color-picker.svelte.js';
|
25
|
-
|
26
|
-
let {
|
27
|
-
ref = $bindable(null),
|
28
|
-
asChild,
|
29
|
-
children,
|
30
|
-
...props
|
31
|
-
}: ColorPickerProps = $props();
|
32
|
-
|
33
|
-
let [presenceProps, etc] = $derived(
|
34
|
-
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
35
|
-
props,
|
36
|
-
),
|
37
|
-
);
|
38
|
-
|
39
|
-
let [createColorPickerProps, localProps] = $derived(
|
40
|
-
createSplitProps<CreateColorPickerProps>([
|
41
|
-
'closeOnSelect',
|
42
|
-
'disabled',
|
43
|
-
'format',
|
44
|
-
'id',
|
45
|
-
'ids',
|
46
|
-
'initialFocusEl',
|
47
|
-
'invalid',
|
48
|
-
'name',
|
49
|
-
'onFocusOutside',
|
50
|
-
'onFormatChange',
|
51
|
-
'onInteractOutside',
|
52
|
-
'onOpenChange',
|
53
|
-
'onPointerDownOutside',
|
54
|
-
'onValueChange',
|
55
|
-
'onValueChangeEnd',
|
56
|
-
'open',
|
57
|
-
'openAutoFocus',
|
58
|
-
'openControlled',
|
59
|
-
'positioning',
|
60
|
-
'readOnly',
|
61
|
-
'required',
|
62
|
-
'value',
|
63
|
-
])(etc),
|
64
|
-
);
|
65
|
-
|
66
|
-
let colorPicker = createColorPicker(reflect(() => createColorPickerProps));
|
67
|
-
let presence = createPresence(
|
68
|
-
reflect(() => ({
|
69
|
-
present: colorPicker.open,
|
70
|
-
...presenceProps,
|
71
|
-
})),
|
72
|
-
);
|
73
|
-
|
74
|
-
let mergedProps = $derived(
|
75
|
-
mergeProps(colorPicker.getRootProps(), localProps),
|
76
|
-
);
|
77
|
-
|
78
|
-
setColorPickerContext(colorPicker);
|
79
|
-
setPresenceContext(presence);
|
80
|
-
</script>
|
81
|
-
|
82
|
-
{#if asChild}
|
83
|
-
{@render asChild(mergedProps, colorPicker)}
|
84
|
-
{:else}
|
85
|
-
<div bind:this={ref} {...mergedProps}>
|
86
|
-
{@render children?.(colorPicker)}
|
87
|
-
</div>
|
88
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
4
|
+
import type {
|
5
|
+
CreateColorPickerProps,
|
6
|
+
CreateColorPickerReturn,
|
7
|
+
} from './create-color-picker.svelte.js';
|
8
|
+
|
9
|
+
export interface ColorPickerProps
|
10
|
+
extends Assign<
|
11
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>,
|
12
|
+
CreateColorPickerProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
15
|
+
</script>
|
16
|
+
|
17
|
+
<script lang="ts">
|
18
|
+
import {reflect} from '@zag-js/svelte';
|
19
|
+
import {createSplitProps} from '../create-split-props.js';
|
20
|
+
import {mergeProps} from '../merge-props.js';
|
21
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
22
|
+
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
23
|
+
import {setColorPickerContext} from './color-picker-context.svelte.js';
|
24
|
+
import {createColorPicker} from './create-color-picker.svelte.js';
|
25
|
+
|
26
|
+
let {
|
27
|
+
ref = $bindable(null),
|
28
|
+
asChild,
|
29
|
+
children,
|
30
|
+
...props
|
31
|
+
}: ColorPickerProps = $props();
|
32
|
+
|
33
|
+
let [presenceProps, etc] = $derived(
|
34
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
35
|
+
props,
|
36
|
+
),
|
37
|
+
);
|
38
|
+
|
39
|
+
let [createColorPickerProps, localProps] = $derived(
|
40
|
+
createSplitProps<CreateColorPickerProps>([
|
41
|
+
'closeOnSelect',
|
42
|
+
'disabled',
|
43
|
+
'format',
|
44
|
+
'id',
|
45
|
+
'ids',
|
46
|
+
'initialFocusEl',
|
47
|
+
'invalid',
|
48
|
+
'name',
|
49
|
+
'onFocusOutside',
|
50
|
+
'onFormatChange',
|
51
|
+
'onInteractOutside',
|
52
|
+
'onOpenChange',
|
53
|
+
'onPointerDownOutside',
|
54
|
+
'onValueChange',
|
55
|
+
'onValueChangeEnd',
|
56
|
+
'open',
|
57
|
+
'openAutoFocus',
|
58
|
+
'openControlled',
|
59
|
+
'positioning',
|
60
|
+
'readOnly',
|
61
|
+
'required',
|
62
|
+
'value',
|
63
|
+
])(etc),
|
64
|
+
);
|
65
|
+
|
66
|
+
let colorPicker = createColorPicker(reflect(() => createColorPickerProps));
|
67
|
+
let presence = createPresence(
|
68
|
+
reflect(() => ({
|
69
|
+
present: colorPicker.open,
|
70
|
+
...presenceProps,
|
71
|
+
})),
|
72
|
+
);
|
73
|
+
|
74
|
+
let mergedProps = $derived(
|
75
|
+
mergeProps(colorPicker.getRootProps(), localProps),
|
76
|
+
);
|
77
|
+
|
78
|
+
setColorPickerContext(colorPicker);
|
79
|
+
setPresenceContext(presence);
|
80
|
+
</script>
|
81
|
+
|
82
|
+
{#if asChild}
|
83
|
+
{@render asChild(mergedProps, colorPicker)}
|
84
|
+
{:else}
|
85
|
+
<div bind:this={ref} {...mergedProps}>
|
86
|
+
{@render children?.(colorPicker)}
|
87
|
+
</div>
|
88
|
+
{/if}
|