ui-ingredients 0.0.25 → 0.0.27
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +80 -80
- package/dist/accordion/item-content.svelte +13 -7
- package/dist/accordion/item-indicator.svelte +13 -7
- package/dist/accordion/item-trigger.svelte +13 -7
- package/dist/accordion/item.svelte +11 -6
- package/dist/accordion/root.svelte +11 -5
- package/dist/avatar/fallback.svelte +13 -7
- package/dist/avatar/image.svelte +11 -5
- package/dist/avatar/root.svelte +11 -13
- package/dist/carousel/indicator-group.svelte +13 -7
- package/dist/carousel/indicator.svelte +13 -7
- package/dist/carousel/item-group.svelte +13 -7
- package/dist/carousel/item.svelte +12 -8
- package/dist/carousel/next-trigger.svelte +13 -7
- package/dist/carousel/prev-trigger.svelte +13 -7
- package/dist/carousel/root.svelte +11 -5
- package/dist/carousel/viewport.svelte +13 -7
- package/dist/checkbox/control.svelte +13 -7
- package/dist/checkbox/hidden-input.svelte +1 -1
- package/dist/checkbox/indicator.svelte +13 -7
- package/dist/checkbox/label.svelte +13 -7
- package/dist/checkbox/root.svelte +11 -5
- package/dist/clipboard/control.svelte +13 -7
- package/dist/clipboard/indicator.svelte +13 -7
- package/dist/clipboard/input.svelte +11 -5
- package/dist/clipboard/label.svelte +13 -7
- package/dist/clipboard/root.svelte +11 -5
- package/dist/clipboard/trigger.svelte +13 -7
- package/dist/collapsible/content.svelte +13 -7
- package/dist/collapsible/root.svelte +12 -6
- package/dist/collapsible/trigger.svelte +13 -7
- package/dist/color-picker/area-background.svelte +21 -0
- package/dist/color-picker/area-background.svelte.d.ts +18 -0
- package/dist/color-picker/area-thumb.svelte +21 -0
- package/dist/color-picker/area-thumb.svelte.d.ts +18 -0
- package/dist/color-picker/area.svelte +27 -0
- package/dist/color-picker/area.svelte.d.ts +18 -0
- package/dist/color-picker/channel-input.svelte +28 -0
- package/dist/color-picker/channel-input.svelte.d.ts +18 -0
- package/dist/color-picker/channel-slider-label.svelte +25 -0
- package/dist/color-picker/channel-slider-label.svelte.d.ts +18 -0
- package/dist/color-picker/channel-slider-thumb.svelte +23 -0
- package/dist/color-picker/channel-slider-thumb.svelte.d.ts +18 -0
- package/dist/color-picker/channel-slider-track.svelte +23 -0
- package/dist/color-picker/channel-slider-track.svelte.d.ts +18 -0
- package/dist/color-picker/channel-slider-value-text.svelte +29 -0
- package/dist/color-picker/channel-slider-value-text.svelte.d.ts +18 -0
- package/dist/color-picker/channel-slider.svelte +29 -0
- package/dist/color-picker/channel-slider.svelte.d.ts +18 -0
- package/dist/color-picker/color-picker.d.ts +26 -0
- package/dist/color-picker/color-picker.js +26 -0
- package/dist/color-picker/content.svelte +20 -0
- package/dist/color-picker/content.svelte.d.ts +18 -0
- package/dist/color-picker/context.svelte.d.ts +8 -0
- package/dist/color-picker/context.svelte.js +6 -0
- package/dist/color-picker/control.svelte +20 -0
- package/dist/color-picker/control.svelte.d.ts +18 -0
- package/dist/color-picker/create-color-picker.svelte.d.ts +9 -0
- package/dist/color-picker/create-color-picker.svelte.js +20 -0
- package/dist/color-picker/eye-dropper-trigger.svelte +20 -0
- package/dist/color-picker/eye-dropper-trigger.svelte.d.ts +18 -0
- package/dist/color-picker/format-select.svelte +28 -0
- package/dist/color-picker/format-select.svelte.d.ts +18 -0
- package/dist/color-picker/format-trigger.svelte +20 -0
- package/dist/color-picker/format-trigger.svelte.d.ts +18 -0
- package/dist/color-picker/hidden-input.svelte +18 -0
- package/dist/color-picker/hidden-input.svelte.d.ts +18 -0
- package/dist/color-picker/index.d.ts +26 -0
- package/dist/color-picker/index.js +1 -0
- package/dist/color-picker/label.svelte +20 -0
- package/dist/color-picker/label.svelte.d.ts +18 -0
- package/dist/color-picker/positioner.svelte +20 -0
- package/dist/color-picker/positioner.svelte.d.ts +18 -0
- package/dist/color-picker/root.svelte +75 -0
- package/dist/color-picker/root.svelte.d.ts +18 -0
- package/dist/color-picker/swatch-group.svelte +20 -0
- package/dist/color-picker/swatch-group.svelte.d.ts +18 -0
- package/dist/color-picker/swatch-indicator.svelte +21 -0
- package/dist/color-picker/swatch-indicator.svelte.d.ts +18 -0
- package/dist/color-picker/swatch-trigger.svelte +31 -0
- package/dist/color-picker/swatch-trigger.svelte.d.ts +18 -0
- package/dist/color-picker/swatch.svelte +27 -0
- package/dist/color-picker/swatch.svelte.d.ts +18 -0
- package/dist/color-picker/transparency-grid.svelte +29 -0
- package/dist/color-picker/transparency-grid.svelte.d.ts +18 -0
- package/dist/color-picker/trigger.svelte +20 -0
- package/dist/color-picker/trigger.svelte.d.ts +18 -0
- package/dist/color-picker/value-text.svelte +24 -0
- package/dist/color-picker/value-text.svelte.d.ts +18 -0
- package/dist/combobox/clear-trigger.svelte +13 -7
- package/dist/combobox/content.svelte +13 -7
- package/dist/combobox/control.svelte +13 -7
- package/dist/combobox/input.svelte +11 -5
- package/dist/combobox/item-group-label.svelte +13 -7
- package/dist/combobox/item-group.svelte +13 -8
- package/dist/combobox/item-indicator.svelte +13 -7
- package/dist/combobox/item-text.svelte +17 -11
- package/dist/combobox/item.svelte +11 -6
- package/dist/combobox/label.svelte +13 -7
- package/dist/combobox/list.svelte +13 -7
- package/dist/combobox/positioner.svelte +13 -7
- package/dist/combobox/root.svelte +11 -5
- package/dist/combobox/trigger.svelte +13 -7
- package/dist/date-picker/clear-trigger.svelte +13 -7
- package/dist/date-picker/content.svelte +13 -7
- package/dist/date-picker/control.svelte +13 -7
- package/dist/date-picker/create-date-picker.svelte.d.ts +2 -0
- package/dist/date-picker/create-date-picker.svelte.js +11 -1
- package/dist/date-picker/day-table-cell-trigger.svelte +13 -7
- package/dist/date-picker/day-table-cell.svelte +13 -14
- package/dist/date-picker/input.svelte +11 -5
- package/dist/date-picker/label.svelte +13 -7
- package/dist/date-picker/month-select.svelte +19 -13
- package/dist/date-picker/month-table-cell-trigger.svelte +13 -7
- package/dist/date-picker/month-table-cell.svelte +13 -14
- package/dist/date-picker/next-trigger.svelte +13 -7
- package/dist/date-picker/positioner.svelte +13 -7
- package/dist/date-picker/preset-trigger.svelte +13 -7
- package/dist/date-picker/prev-trigger.svelte +13 -7
- package/dist/date-picker/range-text.svelte +17 -11
- package/dist/date-picker/root.svelte +11 -5
- package/dist/date-picker/table-body.svelte +13 -7
- package/dist/date-picker/table-head.svelte +13 -7
- package/dist/date-picker/table-header.svelte +13 -7
- package/dist/date-picker/table-row.svelte +13 -7
- package/dist/date-picker/table.svelte +13 -7
- package/dist/date-picker/trigger.svelte +13 -7
- package/dist/date-picker/view-control.svelte +13 -7
- package/dist/date-picker/view-trigger.svelte +13 -7
- package/dist/date-picker/view.svelte +21 -9
- package/dist/date-picker/year-select.svelte +19 -13
- package/dist/date-picker/year-table-cell-trigger.svelte +13 -7
- package/dist/date-picker/year-table-cell.svelte +13 -14
- package/dist/dialog/backdrop.svelte +13 -7
- package/dist/dialog/close-trigger.svelte +13 -7
- package/dist/dialog/content.svelte +13 -7
- package/dist/dialog/description.svelte +13 -7
- package/dist/dialog/positioner.svelte +14 -7
- package/dist/dialog/title.svelte +13 -7
- package/dist/dialog/trigger.svelte +13 -7
- package/dist/editable/area.svelte +13 -7
- package/dist/editable/cancel-trigger.svelte +13 -7
- package/dist/editable/control.svelte +13 -7
- package/dist/editable/edit-trigger.svelte +13 -7
- package/dist/editable/input.svelte +11 -5
- package/dist/editable/label.svelte +13 -7
- package/dist/editable/preview.svelte +17 -11
- package/dist/editable/root.svelte +73 -4
- package/dist/editable/submit-trigger.svelte +13 -7
- package/dist/file-upload/dropzone.svelte +13 -7
- package/dist/file-upload/hidden-input.svelte +1 -1
- package/dist/file-upload/item-delete-trigger.svelte +13 -7
- package/dist/file-upload/item-group.svelte +13 -7
- package/dist/file-upload/item-name.svelte +17 -11
- package/dist/file-upload/item-preview-image.svelte +11 -5
- package/dist/file-upload/item-preview.svelte +13 -7
- package/dist/file-upload/item-size-text.svelte +17 -11
- package/dist/file-upload/item.svelte +13 -7
- package/dist/file-upload/label.svelte +13 -7
- package/dist/file-upload/root.svelte +11 -5
- package/dist/file-upload/trigger.svelte +13 -7
- package/dist/hover-card/arrow-tip.svelte +13 -7
- package/dist/hover-card/arrow.svelte +13 -7
- package/dist/hover-card/content.svelte +13 -7
- package/dist/hover-card/positioner.svelte +13 -7
- package/dist/hover-card/trigger.svelte +13 -7
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/menu/arrow-tip.svelte +13 -7
- package/dist/menu/arrow.svelte +13 -7
- package/dist/menu/content.svelte +13 -7
- package/dist/menu/context-trigger.svelte +13 -7
- package/dist/menu/indicator.svelte +13 -7
- package/dist/menu/item-group-label.svelte +13 -7
- package/dist/menu/item-group.svelte +13 -9
- package/dist/menu/item.svelte +12 -6
- package/dist/menu/option-item-indicator.svelte +13 -7
- package/dist/menu/option-item-text.svelte +17 -11
- package/dist/menu/option-item.svelte +11 -5
- package/dist/menu/positioner.svelte +13 -7
- package/dist/menu/separator.svelte +13 -7
- package/dist/menu/trigger-item.svelte +13 -7
- package/dist/menu/trigger.svelte +13 -7
- package/dist/number-input/control.svelte +13 -7
- package/dist/number-input/decrement-trigger.svelte +13 -7
- package/dist/number-input/increment-trigger.svelte +13 -7
- package/dist/number-input/input.svelte +11 -5
- package/dist/number-input/label.svelte +13 -7
- package/dist/number-input/root.svelte +11 -5
- package/dist/number-input/scrubber.svelte +13 -7
- package/dist/pagination/ellipsis.svelte +13 -7
- package/dist/pagination/item.svelte +13 -7
- package/dist/pagination/next-trigger.svelte +13 -7
- package/dist/pagination/prev-trigger.svelte +13 -7
- package/dist/pagination/root.svelte +11 -5
- package/dist/pin-input/anatomy.js +3 -0
- package/dist/pin-input/clear-trigger.svelte +18 -13
- package/dist/pin-input/create-pin-input.svelte.d.ts +2 -0
- package/dist/pin-input/create-pin-input.svelte.js +13 -1
- package/dist/pin-input/hidden-input.svelte +1 -1
- package/dist/pin-input/input.svelte +11 -5
- package/dist/pin-input/label.svelte +13 -7
- package/dist/pin-input/pin-input.d.ts +1 -1
- package/dist/pin-input/pin-input.js +1 -1
- package/dist/pin-input/root.svelte +11 -5
- package/dist/popover/arrow-tip.svelte +13 -7
- package/dist/popover/arrow.svelte +13 -7
- package/dist/popover/close-trigger.svelte +13 -7
- package/dist/popover/content.svelte +13 -7
- package/dist/popover/description.svelte +13 -7
- package/dist/popover/positioner.svelte +13 -7
- package/dist/popover/title.svelte +13 -7
- package/dist/popover/trigger.svelte +13 -7
- package/dist/presence/context.svelte.d.ts +3 -0
- package/dist/presence/context.svelte.js +2 -0
- package/dist/presence/create-presence.svelte.d.ts +11 -4
- package/dist/presence/create-presence.svelte.js +19 -3
- package/dist/presence/root.svelte +9 -9
- package/dist/presence/root.svelte.d.ts +1 -1
- package/dist/progress/circle-range.svelte +13 -7
- package/dist/progress/circle-track.svelte +13 -7
- package/dist/progress/circle.svelte +13 -7
- package/dist/progress/label.svelte +13 -7
- package/dist/progress/range.svelte +13 -7
- package/dist/progress/root.svelte +11 -5
- package/dist/progress/track.svelte +13 -7
- package/dist/progress/value-text.svelte +17 -11
- package/dist/progress/view.svelte +13 -7
- package/dist/qr-code/frame.svelte +13 -7
- package/dist/qr-code/overlay.svelte +13 -7
- package/dist/qr-code/pattern.svelte +13 -7
- package/dist/qr-code/root.svelte +11 -5
- package/dist/radio-group/indicator.svelte +13 -7
- package/dist/radio-group/item-control.svelte +13 -7
- package/dist/radio-group/item-hidden-input.svelte +1 -1
- package/dist/radio-group/item-text.svelte +13 -7
- package/dist/radio-group/item.svelte +11 -13
- package/dist/radio-group/label.svelte +13 -7
- package/dist/radio-group/root.svelte +11 -5
- package/dist/rating-group/control.svelte +15 -9
- package/dist/rating-group/hidden-input.svelte +1 -1
- package/dist/rating-group/item.svelte +14 -9
- package/dist/rating-group/label.svelte +15 -9
- package/dist/rating-group/root.svelte +15 -9
- package/dist/segment-group/indicator.svelte +13 -8
- package/dist/segment-group/item-control.svelte +13 -8
- package/dist/segment-group/item-hidden-input.svelte +1 -1
- package/dist/segment-group/item-text.svelte +13 -8
- package/dist/segment-group/item.svelte +11 -6
- package/dist/segment-group/label.svelte +13 -8
- package/dist/segment-group/root.svelte +11 -6
- package/dist/select/clear-trigger.svelte +13 -7
- package/dist/select/content.svelte +13 -7
- package/dist/select/control.svelte +13 -7
- package/dist/select/hidden-select.svelte +1 -1
- package/dist/select/indicator.svelte +13 -7
- package/dist/select/item-group-label.svelte +13 -7
- package/dist/select/item-group.svelte +13 -8
- package/dist/select/item-indicator.svelte +13 -7
- package/dist/select/item-text.svelte +17 -11
- package/dist/select/item.svelte +11 -6
- package/dist/select/label.svelte +13 -7
- package/dist/select/list.svelte +13 -7
- package/dist/select/positioner.svelte +13 -7
- package/dist/select/root.svelte +12 -6
- package/dist/select/trigger.svelte +13 -7
- package/dist/select/value-text.svelte +19 -13
- package/dist/signature-pad/clear-trigger.svelte +13 -7
- package/dist/signature-pad/control.svelte +13 -7
- package/dist/signature-pad/current-segment-path.svelte +13 -7
- package/dist/signature-pad/guide.svelte +13 -7
- package/dist/signature-pad/hidden-input.svelte +1 -1
- package/dist/signature-pad/label.svelte +13 -7
- package/dist/signature-pad/root.svelte +11 -5
- package/dist/signature-pad/segment-path.svelte +13 -7
- package/dist/signature-pad/segment.svelte +13 -7
- package/dist/slider/control.svelte +13 -7
- package/dist/slider/hidden-input.svelte +1 -1
- package/dist/slider/label.svelte +13 -7
- package/dist/slider/marker-group.svelte +13 -7
- package/dist/slider/marker.svelte +13 -7
- package/dist/slider/range.svelte +13 -7
- package/dist/slider/root.svelte +11 -5
- package/dist/slider/thumb.svelte +13 -7
- package/dist/slider/track.svelte +13 -7
- package/dist/slider/value-text.svelte +17 -11
- package/dist/splitter/panel.svelte +13 -7
- package/dist/splitter/resize-trigger.svelte +11 -6
- package/dist/splitter/root.svelte +11 -5
- package/dist/steps/completed-content.svelte +13 -7
- package/dist/steps/content.svelte +13 -7
- package/dist/steps/indicator.svelte +13 -7
- package/dist/steps/item.svelte +11 -6
- package/dist/steps/list.svelte +13 -7
- package/dist/steps/next-trigger.svelte +13 -7
- package/dist/steps/prev-trigger.svelte +13 -7
- package/dist/steps/progress.svelte +13 -7
- package/dist/steps/root.svelte +12 -6
- package/dist/steps/separator.svelte +13 -7
- package/dist/steps/trigger.svelte +13 -7
- package/dist/switch/control.svelte +13 -7
- package/dist/switch/hidden-input.svelte +1 -1
- package/dist/switch/label.svelte +13 -7
- package/dist/switch/root.svelte +11 -5
- package/dist/switch/thumb.svelte +13 -7
- package/dist/tabs/content.svelte +13 -7
- package/dist/tabs/list.svelte +13 -7
- package/dist/tabs/root.svelte +12 -6
- package/dist/tabs/trigger.svelte +13 -7
- package/dist/tags-input/clear-trigger.svelte +13 -7
- package/dist/tags-input/control.svelte +13 -7
- package/dist/tags-input/hidden-input.svelte +1 -1
- package/dist/tags-input/input.svelte +11 -5
- package/dist/tags-input/item-delete-trigger.svelte +13 -7
- package/dist/tags-input/item-input.svelte +11 -5
- package/dist/tags-input/item-preview.svelte +13 -7
- package/dist/tags-input/item-text.svelte +13 -7
- package/dist/tags-input/item.svelte +11 -13
- package/dist/tags-input/label.svelte +13 -7
- package/dist/tags-input/root.svelte +12 -6
- package/dist/time-picker/clear-trigger.svelte +13 -7
- package/dist/time-picker/column.svelte +13 -7
- package/dist/time-picker/content.svelte +13 -7
- package/dist/time-picker/control.svelte +13 -7
- package/dist/time-picker/hour-cell.svelte +13 -7
- package/dist/time-picker/input.svelte +11 -5
- package/dist/time-picker/label.svelte +13 -7
- package/dist/time-picker/minute-cell.svelte +13 -7
- package/dist/time-picker/period-cell.svelte +13 -7
- package/dist/time-picker/positioner.svelte +13 -7
- package/dist/time-picker/root.svelte +11 -5
- package/dist/time-picker/second-cell.svelte +13 -7
- package/dist/time-picker/spacer.svelte +13 -7
- package/dist/time-picker/trigger.svelte +13 -7
- package/dist/timer/action-trigger.svelte +13 -8
- package/dist/timer/item-label.svelte +13 -7
- package/dist/timer/item-value.svelte +17 -11
- package/dist/timer/item.svelte +13 -7
- package/dist/timer/root.svelte +11 -5
- package/dist/timer/separator.svelte +13 -7
- package/dist/toast/action-trigger.svelte +13 -7
- package/dist/toast/actor.svelte +6 -6
- package/dist/toast/actor.svelte.d.ts +3 -3
- package/dist/toast/close-trigger.svelte +13 -7
- package/dist/toast/description.svelte +17 -11
- package/dist/toast/ghost-after.svelte +18 -0
- package/dist/toast/ghost-after.svelte.d.ts +18 -0
- package/dist/toast/ghost-before.svelte +18 -0
- package/dist/toast/ghost-before.svelte.d.ts +18 -0
- package/dist/toast/index.d.ts +2 -0
- package/dist/toast/root.svelte +16 -14
- package/dist/toast/title.svelte +17 -11
- package/dist/toast/toast.d.ts +2 -0
- package/dist/toast/toast.js +2 -0
- package/dist/toast/toaster.svelte +6 -5
- package/dist/toggle-group/item.svelte +11 -6
- package/dist/toggle-group/root.svelte +12 -6
- package/dist/tooltip/arrow-tip.svelte +13 -7
- package/dist/tooltip/arrow.svelte +13 -7
- package/dist/tooltip/content.svelte +13 -7
- package/dist/tooltip/positioner.svelte +13 -7
- package/dist/tooltip/trigger.svelte +13 -7
- package/dist/tree-view/branch-content.svelte +13 -7
- package/dist/tree-view/branch-control.svelte +13 -7
- package/dist/tree-view/branch-indicator.svelte +13 -7
- package/dist/tree-view/branch-text.svelte +13 -7
- package/dist/tree-view/branch-trigger.svelte +13 -7
- package/dist/tree-view/branch.svelte +11 -13
- package/dist/tree-view/item-indicator.svelte +13 -7
- package/dist/tree-view/item-text.svelte +13 -7
- package/dist/tree-view/item.svelte +11 -13
- package/dist/tree-view/label.svelte +13 -7
- package/dist/tree-view/root.svelte +12 -6
- package/dist/tree-view/tree.svelte +13 -7
- package/dist/types.d.ts +8 -1
- package/dist/utils.svelte.d.ts +2 -5
- package/dist/utils.svelte.js +9 -9
- package/package.json +4 -3
- package/dist/color-picker/.gitkeep +0 -0
@@ -1,5 +1,5 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
|
3
3
|
import type {Snippet} from 'svelte';
|
4
4
|
import type {
|
5
5
|
CreateToggleGroupProps,
|
@@ -8,12 +8,13 @@
|
|
8
8
|
|
9
9
|
export interface ToggleGroupProps
|
10
10
|
extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateToggleGroupProps> {
|
11
|
-
|
11
|
+
asChild?: AsChild<GenericHtmlProps, CreateToggleGroupReturn>;
|
12
|
+
children?: Snippet<[toggleGroup: CreateToggleGroupReturn]>;
|
12
13
|
}
|
13
14
|
</script>
|
14
15
|
|
15
16
|
<script lang="ts">
|
16
|
-
import {mergeProps} from '
|
17
|
+
import {mergeProps} from '../utils.svelte.js';
|
17
18
|
import {toggleGroupContext} from './context.svelte.js';
|
18
19
|
import {createToggleGroup} from './create-toggle-group.svelte.js';
|
19
20
|
|
@@ -27,6 +28,7 @@
|
|
27
28
|
rovingFocus,
|
28
29
|
orientation,
|
29
30
|
onValueChange,
|
31
|
+
asChild,
|
30
32
|
children,
|
31
33
|
...props
|
32
34
|
}: ToggleGroupProps = $props();
|
@@ -48,6 +50,10 @@
|
|
48
50
|
toggleGroupContext.set(toggleGroup);
|
49
51
|
</script>
|
50
52
|
|
51
|
-
|
52
|
-
{@render
|
53
|
-
|
53
|
+
{#if asChild}
|
54
|
+
{@render asChild(attrs, toggleGroup)}
|
55
|
+
{:else}
|
56
|
+
<div {...attrs}>
|
57
|
+
{@render children?.(toggleGroup)}
|
58
|
+
</div>
|
59
|
+
{/if}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TooltipArrowTipProps extends HtmlProps<'
|
4
|
+
export interface TooltipArrowTipProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {tooltipContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TooltipArrowTipProps = $props();
|
13
|
+
let {asChild, children, ...props}: TooltipArrowTipProps = $props();
|
12
14
|
|
13
15
|
let tooltip = tooltipContext.get();
|
14
16
|
|
15
17
|
let attrs = $derived(mergeProps(props, tooltip.getArrowTipProps()));
|
16
18
|
</script>
|
17
19
|
|
18
|
-
|
19
|
-
{@render
|
20
|
-
|
20
|
+
{#if asChild}
|
21
|
+
{@render asChild(attrs)}
|
22
|
+
{:else}
|
23
|
+
<span {...attrs}>
|
24
|
+
{@render children?.()}
|
25
|
+
</span>
|
26
|
+
{/if}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TooltipArrowProps extends HtmlProps<'
|
4
|
+
export interface TooltipArrowProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {tooltipContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TooltipArrowProps = $props();
|
13
|
+
let {asChild, children, ...props}: TooltipArrowProps = $props();
|
12
14
|
|
13
15
|
let tooltip = tooltipContext.get();
|
14
16
|
|
15
17
|
let attrs = $derived(mergeProps(props, tooltip.getArrowProps()));
|
16
18
|
</script>
|
17
19
|
|
18
|
-
|
19
|
-
{@render
|
20
|
-
|
20
|
+
{#if asChild}
|
21
|
+
{@render asChild(attrs)}
|
22
|
+
{:else}
|
23
|
+
<span {...attrs}>
|
24
|
+
{@render children?.()}
|
25
|
+
</span>
|
26
|
+
{/if}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TooltipContentProps extends HtmlProps<'div'> {
|
4
|
+
export interface TooltipContentProps extends HtmlProps<'div'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {tooltipContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TooltipContentProps = $props();
|
13
|
+
let {asChild, children, ...props}: TooltipContentProps = $props();
|
12
14
|
|
13
15
|
let tooltip = tooltipContext.get();
|
14
16
|
|
15
17
|
let attrs = $derived(mergeProps(props, tooltip.getContentProps()));
|
16
18
|
</script>
|
17
19
|
|
18
|
-
|
19
|
-
{@render
|
20
|
-
|
20
|
+
{#if asChild}
|
21
|
+
{@render asChild(attrs)}
|
22
|
+
{:else}
|
23
|
+
<div {...attrs}>
|
24
|
+
{@render children?.()}
|
25
|
+
</div>
|
26
|
+
{/if}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TooltipPositionerProps extends HtmlProps<'div'> {
|
4
|
+
export interface TooltipPositionerProps extends HtmlProps<'div'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {tooltipContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TooltipPositionerProps = $props();
|
13
|
+
let {asChild, children, ...props}: TooltipPositionerProps = $props();
|
12
14
|
|
13
15
|
let tooltip = tooltipContext.get();
|
14
16
|
|
15
17
|
let attrs = $derived(mergeProps(props, tooltip.getPositionerProps()));
|
16
18
|
</script>
|
17
19
|
|
18
|
-
|
19
|
-
{@render
|
20
|
-
|
20
|
+
{#if asChild}
|
21
|
+
{@render asChild(attrs)}
|
22
|
+
{:else}
|
23
|
+
<div {...attrs}>
|
24
|
+
{@render children?.()}
|
25
|
+
</div>
|
26
|
+
{/if}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TooltipTriggerProps extends HtmlProps<'button'> {
|
4
|
+
export interface TooltipTriggerProps extends HtmlProps<'button'> {
|
5
|
+
asChild?: AsChild<HtmlProps<'button'>>;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {tooltipContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TooltipTriggerProps = $props();
|
13
|
+
let {asChild, children, ...props}: TooltipTriggerProps = $props();
|
12
14
|
|
13
15
|
let tooltip = tooltipContext.get();
|
14
16
|
|
15
17
|
let attrs = $derived(mergeProps(props, tooltip.getTriggerProps()));
|
16
18
|
</script>
|
17
19
|
|
18
|
-
|
19
|
-
{@render
|
20
|
-
|
20
|
+
{#if asChild}
|
21
|
+
{@render asChild(attrs)}
|
22
|
+
{:else}
|
23
|
+
<button type="button" {...attrs}>
|
24
|
+
{@render children?.()}
|
25
|
+
</button>
|
26
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewBranchContentProps extends HtmlProps<'div'> {
|
4
|
+
export interface TreeViewBranchContentProps extends HtmlProps<'div'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewBranchContentProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewBranchContentProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let branchProps = treeViewBranchPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getBranchContentProps(branchProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<div {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</div>
|
27
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewBranchControlProps extends HtmlProps<'div'> {
|
4
|
+
export interface TreeViewBranchControlProps extends HtmlProps<'div'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewBranchControlProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewBranchControlProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let branchProps = treeViewBranchPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getBranchControlProps(branchProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<div {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</div>
|
27
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewBranchIndicatorProps extends HtmlProps<'span'> {
|
4
|
+
export interface TreeViewBranchIndicatorProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewBranchIndicatorProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewBranchIndicatorProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let branchProps = treeViewBranchPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getBranchIndicatorProps(branchProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<span {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</span>
|
27
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewBranchTextProps extends HtmlProps<'span'> {
|
4
|
+
export interface TreeViewBranchTextProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewBranchTextProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewBranchTextProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let branchProps = treeViewBranchPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getBranchTextProps(branchProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<span {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</span>
|
27
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {
|
4
|
+
export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewBranchTriggerProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewBranchTriggerProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let branchProps = treeViewBranchPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getBranchTriggerProps(branchProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<div {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</div>
|
27
|
+
{/if}
|
@@ -1,26 +1,20 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
|
3
3
|
import type {BranchProps, BranchState} from '@zag-js/tree-view';
|
4
4
|
import type {Snippet} from 'svelte';
|
5
5
|
|
6
6
|
export interface TreeViewBranchProps
|
7
7
|
extends Assign<Omit<HtmlProps<'div'>, 'children'>, BranchProps> {
|
8
|
+
asChild?: AsChild<GenericHtmlProps, BranchState>;
|
8
9
|
children?: Snippet<[state: BranchState]>;
|
9
10
|
}
|
10
11
|
</script>
|
11
12
|
|
12
13
|
<script lang="ts">
|
13
|
-
import {mergeProps} from '
|
14
|
+
import {mergeProps} from '../utils.svelte.js';
|
14
15
|
import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
|
15
16
|
|
16
|
-
let {
|
17
|
-
/**/
|
18
|
-
depth,
|
19
|
-
value,
|
20
|
-
disabled,
|
21
|
-
children,
|
22
|
-
...props
|
23
|
-
}: TreeViewBranchProps = $props();
|
17
|
+
let {depth, value, disabled, asChild, children, ...props}: TreeViewBranchProps = $props();
|
24
18
|
|
25
19
|
let treeView = treeViewContext.get();
|
26
20
|
let branchProps: BranchProps = $derived({
|
@@ -35,6 +29,10 @@
|
|
35
29
|
treeViewBranchPropsContext.set(() => branchProps);
|
36
30
|
</script>
|
37
31
|
|
38
|
-
|
39
|
-
{@render
|
40
|
-
|
32
|
+
{#if asChild}
|
33
|
+
{@render asChild(attrs, state)}
|
34
|
+
{:else}
|
35
|
+
<div {...attrs}>
|
36
|
+
{@render children?.(state)}
|
37
|
+
</div>
|
38
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {
|
4
|
+
export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewItemIndicatorProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewItemIndicatorProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let itemProps = treeViewItemPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getItemIndicatorProps(itemProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<span {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</span>
|
27
|
+
{/if}
|
@@ -1,14 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewItemTextProps extends HtmlProps<'span'> {
|
4
|
+
export interface TreeViewItemTextProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewItemTextProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewItemTextProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
let itemProps = treeViewItemPropsContext.get();
|
@@ -16,6 +18,10 @@
|
|
16
18
|
let attrs = $derived(mergeProps(props, treeView.getItemTextProps(itemProps)));
|
17
19
|
</script>
|
18
20
|
|
19
|
-
|
20
|
-
{@render
|
21
|
-
|
21
|
+
{#if asChild}
|
22
|
+
{@render asChild(attrs)}
|
23
|
+
{:else}
|
24
|
+
<span {...attrs}>
|
25
|
+
{@render children?.()}
|
26
|
+
</span>
|
27
|
+
{/if}
|
@@ -1,25 +1,19 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
|
3
3
|
import type {ItemProps, ItemState} from '@zag-js/tree-view';
|
4
4
|
import type {Snippet} from 'svelte';
|
5
5
|
|
6
6
|
export interface TreeViewItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
|
7
|
+
asChild?: AsChild<GenericHtmlProps, ItemState>;
|
7
8
|
children?: Snippet<[state: ItemState]>;
|
8
9
|
}
|
9
10
|
</script>
|
10
11
|
|
11
12
|
<script lang="ts">
|
12
|
-
import {mergeProps} from '
|
13
|
+
import {mergeProps} from '../utils.svelte.js';
|
13
14
|
import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
|
14
15
|
|
15
|
-
let {
|
16
|
-
/**/
|
17
|
-
depth,
|
18
|
-
value,
|
19
|
-
disabled,
|
20
|
-
children,
|
21
|
-
...props
|
22
|
-
}: TreeViewItemProps = $props();
|
16
|
+
let {depth, value, disabled, asChild, children, ...props}: TreeViewItemProps = $props();
|
23
17
|
|
24
18
|
let treeView = treeViewContext.get();
|
25
19
|
let itemProps: ItemProps = $derived({
|
@@ -34,6 +28,10 @@
|
|
34
28
|
treeViewItemPropsContext.set(() => itemProps);
|
35
29
|
</script>
|
36
30
|
|
37
|
-
|
38
|
-
{@render
|
39
|
-
|
31
|
+
{#if asChild}
|
32
|
+
{@render asChild(attrs, state)}
|
33
|
+
{:else}
|
34
|
+
<div {...attrs}>
|
35
|
+
{@render children?.(state)}
|
36
|
+
</div>
|
37
|
+
{/if}
|
@@ -1,20 +1,26 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, HtmlProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TreeViewLabelProps extends HtmlProps<'span'> {
|
4
|
+
export interface TreeViewLabelProps extends HtmlProps<'span'> {
|
5
|
+
asChild?: AsChild;
|
6
|
+
}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
|
-
import {mergeProps} from '
|
10
|
+
import {mergeProps} from '../utils.svelte.js';
|
9
11
|
import {treeViewContext} from './context.svelte.js';
|
10
12
|
|
11
|
-
let {children, ...props}: TreeViewLabelProps = $props();
|
13
|
+
let {asChild, children, ...props}: TreeViewLabelProps = $props();
|
12
14
|
|
13
15
|
let treeView = treeViewContext.get();
|
14
16
|
|
15
17
|
let attrs = $derived(mergeProps(props, treeView.getLabelProps()));
|
16
18
|
</script>
|
17
19
|
|
18
|
-
|
19
|
-
{@render
|
20
|
-
|
20
|
+
{#if asChild}
|
21
|
+
{@render asChild(attrs)}
|
22
|
+
{:else}
|
23
|
+
<span {...attrs}>
|
24
|
+
{@render children?.()}
|
25
|
+
</span>
|
26
|
+
{/if}
|
@@ -1,16 +1,17 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlProps} from '../types.js';
|
2
|
+
import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
|
3
3
|
import type {Snippet} from 'svelte';
|
4
4
|
import type {CreateTreeViewProps, CreateTreeViewReturn} from './create-tree-view.svelte.js';
|
5
5
|
|
6
6
|
export interface TreeViewProps
|
7
7
|
extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTreeViewProps> {
|
8
|
+
asChild?: AsChild<GenericHtmlProps, CreateTreeViewReturn>;
|
8
9
|
children?: Snippet<[treeView: CreateTreeViewReturn]>;
|
9
10
|
}
|
10
11
|
</script>
|
11
12
|
|
12
13
|
<script lang="ts">
|
13
|
-
import {mergeProps} from '
|
14
|
+
import {mergeProps} from '../utils.svelte.js';
|
14
15
|
import {treeViewContext} from './context.svelte.js';
|
15
16
|
import {createTreeView} from './create-tree-view.svelte.js';
|
16
17
|
|
@@ -26,6 +27,7 @@
|
|
26
27
|
onFocusChange,
|
27
28
|
onExpandedChange,
|
28
29
|
onSelectionChange,
|
30
|
+
asChild,
|
29
31
|
children,
|
30
32
|
...props
|
31
33
|
}: TreeViewProps = $props();
|
@@ -44,11 +46,15 @@
|
|
44
46
|
onSelectionChange,
|
45
47
|
});
|
46
48
|
|
47
|
-
let attrs = $derived(mergeProps(props, treeView.getRootProps()));
|
49
|
+
let attrs = $derived(mergeProps<Record<string, any>>(props, treeView.getRootProps()));
|
48
50
|
|
49
51
|
treeViewContext.set(treeView);
|
50
52
|
</script>
|
51
53
|
|
52
|
-
|
53
|
-
{@render
|
54
|
-
|
54
|
+
{#if asChild}
|
55
|
+
{@render asChild(attrs, treeView)}
|
56
|
+
{:else}
|
57
|
+
<div {...attrs}>
|
58
|
+
{@render children?.(treeView)}
|
59
|
+
</div>
|
60
|
+
{/if}
|