ui-ingredients 0.0.67 → 0.0.69
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/color-picker/color-picker-value-swatch.svelte +1 -1
- package/dist/color-picker/color-picker-value-text.svelte +1 -1
- package/dist/color-picker/color-picker-view.svelte +1 -1
- package/dist/is-object.d.ts +2 -0
- package/dist/{is-pojo.js → is-object.js} +1 -1
- package/dist/merge-props.js +2 -2
- package/dist/tour/create-tour.svelte.d.ts +6 -1
- package/dist/tour/create-tour.svelte.js +25 -3
- package/dist/tour/index.d.ts +5 -5
- package/dist/tour/index.js +1 -1
- package/dist/tour/tour-action-trigger.svelte +39 -0
- package/dist/tour/{tour-prev-trigger.svelte.d.ts → tour-action-trigger.svelte.d.ts} +5 -4
- package/dist/tour/tour-anatomy.d.ts +2 -0
- package/dist/tour/tour-anatomy.js +3 -0
- package/dist/tour/tour-arrow-tip.svelte +8 -6
- package/dist/tour/tour-arrow.svelte +8 -6
- package/dist/tour/{tour-overlay.svelte → tour-backdrop.svelte} +4 -4
- package/dist/tour/{tour-overlay.svelte.d.ts → tour-backdrop.svelte.d.ts} +4 -4
- package/dist/tour/tour-content.svelte +1 -0
- package/dist/tour/tour-description.svelte +5 -1
- package/dist/tour/tour-root.svelte +1 -1
- package/dist/tour/tour-title.svelte +5 -1
- package/dist/tour/{tour-prev-trigger.svelte → tour-trigger.svelte} +3 -3
- package/dist/tour/{tour-skip-trigger.svelte.d.ts → tour-trigger.svelte.d.ts} +4 -4
- package/dist/tour/tour.d.ts +3 -4
- package/dist/tour/tour.js +3 -4
- package/dist/tree-view/tree-view-branch-content.svelte +27 -8
- package/dist/tree-view/tree-view-branch-content.svelte.d.ts +2 -1
- package/dist/tree-view/tree-view-root.svelte +14 -5
- package/dist/tree-view/tree-view-root.svelte.d.ts +2 -1
- package/package.json +232 -47
- package/dist/is-pojo.d.ts +0 -2
- package/dist/tour/tour-next-trigger.svelte +0 -30
- package/dist/tour/tour-next-trigger.svelte.d.ts +0 -21
- package/dist/tour/tour-skip-trigger.svelte +0 -30
package/dist/merge-props.js
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
import { mergeProps as fn } from '@zag-js/svelte';
|
2
|
-
import {
|
2
|
+
import { isObject } from './is-object.js';
|
3
3
|
export function mergeProps(...args) {
|
4
4
|
const r = fn(...args);
|
5
5
|
const i = 'style';
|
6
|
-
if (r[i] &&
|
6
|
+
if (r[i] && isObject(r[i])) {
|
7
7
|
let s = '';
|
8
8
|
for (const k in r[i]) {
|
9
9
|
const v = r[i][k];
|
@@ -1,7 +1,12 @@
|
|
1
1
|
import * as tour from '@zag-js/tour';
|
2
|
-
|
2
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
3
|
+
export interface TourStepDetails extends Omit<tour.StepDetails, 'id'> {
|
4
|
+
}
|
5
|
+
export interface CreateTourProps extends Omit<tour.Context, 'id' | 'dir' | 'steps' | 'getRootNode'> {
|
3
6
|
id?: string;
|
7
|
+
steps?: TourStepDetails[];
|
4
8
|
}
|
5
9
|
export interface CreateTourReturn extends tour.Api<any> {
|
10
|
+
getTriggerProps(): HTMLButtonAttributes;
|
6
11
|
}
|
7
12
|
export declare function createTour(props: CreateTourProps): CreateTourReturn;
|
@@ -3,16 +3,38 @@ import { getLocaleContext } from '../locale-provider/local-provider-context.svel
|
|
3
3
|
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
4
4
|
import * as tour from '@zag-js/tour';
|
5
5
|
import { uid } from 'uid';
|
6
|
+
import { parts } from './tour-anatomy.js';
|
6
7
|
export function createTour(props) {
|
7
8
|
const locale = getLocaleContext();
|
8
9
|
const environment = getEnvironmentContext();
|
9
10
|
const id = uid();
|
11
|
+
const steps = $derived.by(() => {
|
12
|
+
return props.steps?.map((step) => ({
|
13
|
+
id: uid(),
|
14
|
+
...step,
|
15
|
+
}));
|
16
|
+
});
|
10
17
|
const context = reflect(() => ({
|
11
|
-
|
12
|
-
id: props.id ?? id,
|
18
|
+
id,
|
13
19
|
dir: locale?.dir,
|
14
20
|
getRootNode: environment?.getRootNode,
|
21
|
+
...props,
|
22
|
+
steps,
|
15
23
|
}));
|
16
24
|
const [state, send] = useMachine(tour.machine(context), { context });
|
17
|
-
return reflect(() =>
|
25
|
+
return reflect(() => {
|
26
|
+
const o = tour.connect(state, send, normalizeProps);
|
27
|
+
return {
|
28
|
+
...o,
|
29
|
+
getTriggerProps() {
|
30
|
+
return {
|
31
|
+
onclick() {
|
32
|
+
o.start();
|
33
|
+
},
|
34
|
+
'data-state': o.open ? 'open' : 'closed',
|
35
|
+
...parts.trigger.attrs,
|
36
|
+
};
|
37
|
+
},
|
38
|
+
};
|
39
|
+
});
|
18
40
|
}
|
package/dist/tour/index.d.ts
CHANGED
@@ -1,17 +1,17 @@
|
|
1
1
|
export * as Tour from './tour.js';
|
2
|
+
export type { TourActionTriggerProps } from './tour-action-trigger.svelte';
|
2
3
|
export type { TourArrowTipProps } from './tour-arrow-tip.svelte';
|
3
4
|
export type { TourArrowProps } from './tour-arrow.svelte';
|
5
|
+
export type { TourBackdropProps } from './tour-backdrop.svelte';
|
4
6
|
export type { TourCloseTriggerProps } from './tour-close-trigger.svelte';
|
5
7
|
export type { TourContentProps } from './tour-content.svelte';
|
6
8
|
export type { TourDescriptionProps } from './tour-description.svelte';
|
7
|
-
export type { TourNextTriggerProps } from './tour-next-trigger.svelte';
|
8
|
-
export type { TourOverlayProps } from './tour-overlay.svelte';
|
9
9
|
export type { TourPositionerProps } from './tour-positioner.svelte';
|
10
|
-
export type { TourPrevTriggerProps } from './tour-prev-trigger.svelte';
|
11
10
|
export type { TourProgressTextProps } from './tour-progress-text.svelte';
|
12
11
|
export type { TourProps } from './tour-root.svelte';
|
13
|
-
export type { TourSkipTriggerProps } from './tour-skip-trigger.svelte';
|
14
12
|
export type { TourSpotlightProps } from './tour-spotlight.svelte';
|
15
13
|
export type { TourTitleProps } from './tour-title.svelte';
|
16
|
-
export {
|
14
|
+
export type { TourTriggerProps } from './tour-trigger.svelte';
|
15
|
+
export type { TourStepDetails } from './create-tour.svelte.js';
|
16
|
+
export { anatomy as tourAnatomy } from './tour-anatomy.js';
|
17
17
|
export { getTourContext } from './tour-context.svelte.js';
|
package/dist/tour/index.js
CHANGED
@@ -0,0 +1,39 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {StepActionTriggerProps} from '@zag-js/tour';
|
4
|
+
|
5
|
+
export interface TourActionTriggerProps
|
6
|
+
extends StepActionTriggerProps,
|
7
|
+
HtmlIngredientProps<'button', HTMLButtonElement> {}
|
8
|
+
</script>
|
9
|
+
|
10
|
+
<script lang="ts">
|
11
|
+
import {mergeProps} from '../merge-props.js';
|
12
|
+
import {getTourContext} from './tour-context.svelte.js';
|
13
|
+
|
14
|
+
let {
|
15
|
+
ref = $bindable(null),
|
16
|
+
action,
|
17
|
+
asChild,
|
18
|
+
children,
|
19
|
+
...props
|
20
|
+
}: TourActionTriggerProps = $props();
|
21
|
+
|
22
|
+
let tour = getTourContext();
|
23
|
+
|
24
|
+
let mergedProps = $derived(
|
25
|
+
mergeProps(tour.getActionTriggerProps({action}), props),
|
26
|
+
);
|
27
|
+
</script>
|
28
|
+
|
29
|
+
{#if asChild}
|
30
|
+
{@render asChild(mergedProps)}
|
31
|
+
{:else}
|
32
|
+
<button bind:this={ref} type="button" {...mergedProps}>
|
33
|
+
{#if children}
|
34
|
+
{@render children?.()}
|
35
|
+
{:else}
|
36
|
+
{action.label}
|
37
|
+
{/if}
|
38
|
+
</button>
|
39
|
+
{/if}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
2
|
-
|
2
|
+
import type { StepActionTriggerProps } from '@zag-js/tour';
|
3
|
+
export interface TourActionTriggerProps extends StepActionTriggerProps, HtmlIngredientProps<'button', HTMLButtonElement> {
|
3
4
|
}
|
4
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -14,8 +15,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
14
15
|
};
|
15
16
|
z_$$bindings?: Bindings;
|
16
17
|
}
|
17
|
-
declare const
|
18
|
+
declare const TourActionTrigger: $$__sveltets_2_IsomorphicComponent<TourActionTriggerProps, {
|
18
19
|
[evt: string]: CustomEvent<any>;
|
19
20
|
}, {}, {}, "ref">;
|
20
|
-
type
|
21
|
-
export default
|
21
|
+
type TourActionTrigger = InstanceType<typeof TourActionTrigger>;
|
22
|
+
export default TourActionTrigger;
|
@@ -0,0 +1,2 @@
|
|
1
|
+
export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"title" | "content" | "trigger" | "positioner" | "actionTrigger" | "closeTrigger" | "progressText" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
|
2
|
+
export declare const parts: Record<"title" | "content" | "trigger" | "positioner" | "actionTrigger" | "closeTrigger" | "progressText" | "description" | "arrow" | "arrowTip" | "backdrop" | "spotlight", import("@zag-js/anatomy").AnatomyPart>;
|
@@ -21,10 +21,12 @@
|
|
21
21
|
let mergedProps = $derived(mergeProps(tour.getArrowTipProps(), props));
|
22
22
|
</script>
|
23
23
|
|
24
|
-
{#if
|
25
|
-
{
|
26
|
-
{
|
27
|
-
|
28
|
-
{
|
29
|
-
|
24
|
+
{#if tour.step?.arrow}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<span bind:this={ref} {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</span>
|
31
|
+
{/if}
|
30
32
|
{/if}
|
@@ -21,10 +21,12 @@
|
|
21
21
|
let mergedProps = $derived(mergeProps(tour.getArrowProps(), props));
|
22
22
|
</script>
|
23
23
|
|
24
|
-
{#if
|
25
|
-
{
|
26
|
-
{
|
27
|
-
|
28
|
-
{
|
29
|
-
|
24
|
+
{#if tour.step?.arrow}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<span bind:this={ref} {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</span>
|
31
|
+
{/if}
|
30
32
|
{/if}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface
|
4
|
+
export interface TourBackdropProps
|
5
5
|
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
6
|
</script>
|
7
7
|
|
@@ -17,19 +17,19 @@
|
|
17
17
|
asChild,
|
18
18
|
children,
|
19
19
|
...props
|
20
|
-
}:
|
20
|
+
}: TourBackdropProps = $props();
|
21
21
|
|
22
22
|
let tour = getTourContext();
|
23
23
|
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
24
24
|
let presence = createPresence(
|
25
25
|
reflect(() => ({
|
26
26
|
...presenceStrategyProps,
|
27
|
-
present: tour.
|
27
|
+
present: tour.step?.backdrop ? tour.open : false,
|
28
28
|
})),
|
29
29
|
);
|
30
30
|
|
31
31
|
let mergedProps = $derived(
|
32
|
-
mergeProps(tour.
|
32
|
+
mergeProps(tour.getBackdropProps(), presence.getPresenceProps(), props),
|
33
33
|
);
|
34
34
|
</script>
|
35
35
|
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
2
|
-
export interface
|
2
|
+
export interface TourBackdropProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
3
|
}
|
4
4
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
5
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
14
14
|
};
|
15
15
|
z_$$bindings?: Bindings;
|
16
16
|
}
|
17
|
-
declare const
|
17
|
+
declare const TourBackdrop: $$__sveltets_2_IsomorphicComponent<TourBackdropProps, {
|
18
18
|
[evt: string]: CustomEvent<any>;
|
19
19
|
}, {}, {}, "ref">;
|
20
|
-
type
|
21
|
-
export default
|
20
|
+
type TourBackdrop = InstanceType<typeof TourBackdrop>;
|
21
|
+
export default TourBackdrop;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface
|
4
|
+
export interface TourTriggerProps
|
5
5
|
extends HtmlIngredientProps<'button', HTMLButtonElement> {}
|
6
6
|
</script>
|
7
7
|
|
@@ -14,11 +14,11 @@
|
|
14
14
|
asChild,
|
15
15
|
children,
|
16
16
|
...props
|
17
|
-
}:
|
17
|
+
}: TourTriggerProps = $props();
|
18
18
|
|
19
19
|
let tour = getTourContext();
|
20
20
|
|
21
|
-
let mergedProps = $derived(mergeProps(tour.
|
21
|
+
let mergedProps = $derived(mergeProps(tour.getTriggerProps(), props));
|
22
22
|
</script>
|
23
23
|
|
24
24
|
{#if asChild}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
2
|
-
export interface
|
2
|
+
export interface TourTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
|
3
3
|
}
|
4
4
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
5
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -14,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
14
14
|
};
|
15
15
|
z_$$bindings?: Bindings;
|
16
16
|
}
|
17
|
-
declare const
|
17
|
+
declare const TourTrigger: $$__sveltets_2_IsomorphicComponent<TourTriggerProps, {
|
18
18
|
[evt: string]: CustomEvent<any>;
|
19
19
|
}, {}, {}, "ref">;
|
20
|
-
type
|
21
|
-
export default
|
20
|
+
type TourTrigger = InstanceType<typeof TourTrigger>;
|
21
|
+
export default TourTrigger;
|
package/dist/tour/tour.d.ts
CHANGED
@@ -1,14 +1,13 @@
|
|
1
|
+
export { default as ActionTrigger } from './tour-action-trigger.svelte';
|
1
2
|
export { default as ArrowTip } from './tour-arrow-tip.svelte';
|
2
3
|
export { default as Arrow } from './tour-arrow.svelte';
|
4
|
+
export { default as Backdrop } from './tour-backdrop.svelte';
|
3
5
|
export { default as CloseTrigger } from './tour-close-trigger.svelte';
|
4
6
|
export { default as Content } from './tour-content.svelte';
|
5
7
|
export { default as Description } from './tour-description.svelte';
|
6
|
-
export { default as NextTrigger } from './tour-next-trigger.svelte';
|
7
|
-
export { default as Overlay } from './tour-overlay.svelte';
|
8
8
|
export { default as Positioner } from './tour-positioner.svelte';
|
9
|
-
export { default as PrevTrigger } from './tour-prev-trigger.svelte';
|
10
9
|
export { default as ProgressText } from './tour-progress-text.svelte';
|
11
10
|
export { default as Root } from './tour-root.svelte';
|
12
|
-
export { default as SkipTrigger } from './tour-skip-trigger.svelte';
|
13
11
|
export { default as Spotlight } from './tour-spotlight.svelte';
|
14
12
|
export { default as Title } from './tour-title.svelte';
|
13
|
+
export { default as Trigger } from './tour-trigger.svelte';
|
package/dist/tour/tour.js
CHANGED
@@ -1,14 +1,13 @@
|
|
1
|
+
export { default as ActionTrigger } from './tour-action-trigger.svelte';
|
1
2
|
export { default as ArrowTip } from './tour-arrow-tip.svelte';
|
2
3
|
export { default as Arrow } from './tour-arrow.svelte';
|
4
|
+
export { default as Backdrop } from './tour-backdrop.svelte';
|
3
5
|
export { default as CloseTrigger } from './tour-close-trigger.svelte';
|
4
6
|
export { default as Content } from './tour-content.svelte';
|
5
7
|
export { default as Description } from './tour-description.svelte';
|
6
|
-
export { default as NextTrigger } from './tour-next-trigger.svelte';
|
7
|
-
export { default as Overlay } from './tour-overlay.svelte';
|
8
8
|
export { default as Positioner } from './tour-positioner.svelte';
|
9
|
-
export { default as PrevTrigger } from './tour-prev-trigger.svelte';
|
10
9
|
export { default as ProgressText } from './tour-progress-text.svelte';
|
11
10
|
export { default as Root } from './tour-root.svelte';
|
12
|
-
export { default as SkipTrigger } from './tour-skip-trigger.svelte';
|
13
11
|
export { default as Spotlight } from './tour-spotlight.svelte';
|
14
12
|
export { default as Title } from './tour-title.svelte';
|
13
|
+
export { default as Trigger } from './tour-trigger.svelte';
|
@@ -1,12 +1,16 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
5
|
export interface TreeViewBranchContentProps
|
5
|
-
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
|
+
extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
|
6
7
|
</script>
|
7
8
|
|
8
9
|
<script lang="ts">
|
9
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';
|
10
14
|
import {
|
11
15
|
getTreeViewBranchPropsContext,
|
12
16
|
getTreeViewContext,
|
@@ -22,16 +26,31 @@
|
|
22
26
|
let treeView = getTreeViewContext();
|
23
27
|
|
24
28
|
let branchProps = getTreeViewBranchPropsContext();
|
29
|
+
let branchState = $derived(treeView.getBranchState(branchProps));
|
30
|
+
|
31
|
+
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
32
|
+
let presence = createPresence(
|
33
|
+
reflect(() => ({
|
34
|
+
present: branchState.expanded,
|
35
|
+
...presenceStrategyProps,
|
36
|
+
})),
|
37
|
+
);
|
25
38
|
|
26
39
|
let mergedProps = $derived(
|
27
|
-
mergeProps(
|
40
|
+
mergeProps(
|
41
|
+
treeView.getBranchContentProps(branchProps),
|
42
|
+
presence.getPresenceProps(),
|
43
|
+
props,
|
44
|
+
),
|
28
45
|
);
|
29
46
|
</script>
|
30
47
|
|
31
|
-
{#if
|
32
|
-
{
|
33
|
-
{
|
34
|
-
|
35
|
-
{
|
36
|
-
|
48
|
+
{#if presence.mounted}
|
49
|
+
{#if asChild}
|
50
|
+
{@render asChild(presence.setReference, mergedProps)}
|
51
|
+
{:else}
|
52
|
+
<div bind:this={ref} {...mergedProps}>
|
53
|
+
{@render children?.()}
|
54
|
+
</div>
|
55
|
+
{/if}
|
37
56
|
{/if}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
2
|
-
|
2
|
+
import type { Action } from 'svelte/action';
|
3
|
+
export interface TreeViewBranchContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
|
3
4
|
}
|
4
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -1,4 +1,5 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
4
|
import type {
|
4
5
|
CreateTreeViewProps,
|
@@ -7,13 +8,15 @@
|
|
7
8
|
|
8
9
|
export interface TreeViewProps
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>,
|
12
|
+
CreateTreeViewProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts">
|
16
18
|
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
17
20
|
import {reflect} from '@zag-js/svelte';
|
18
21
|
import {createSplitProps} from '@zag-js/utils';
|
19
22
|
import {createTreeView} from './create-tree-view.svelte.js';
|
@@ -26,6 +29,12 @@
|
|
26
29
|
...props
|
27
30
|
}: TreeViewProps = $props();
|
28
31
|
|
32
|
+
let [presenceStrategyProps, rest] = $derived(
|
33
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
34
|
+
props,
|
35
|
+
),
|
36
|
+
);
|
37
|
+
|
29
38
|
let [createTreeViewProps, localProps] = $derived(
|
30
39
|
createSplitProps<CreateTreeViewProps>([
|
31
40
|
'id',
|
@@ -39,14 +48,14 @@
|
|
39
48
|
'onFocusChange',
|
40
49
|
'onExpandedChange',
|
41
50
|
'onSelectionChange',
|
42
|
-
])(
|
51
|
+
])(rest),
|
43
52
|
);
|
44
53
|
|
45
54
|
let treeView = createTreeView(reflect(() => createTreeViewProps));
|
46
|
-
|
47
55
|
let mergedProps = $derived(mergeProps(treeView.getRootProps(), localProps));
|
48
56
|
|
49
57
|
setTreeViewContext(treeView);
|
58
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
50
59
|
</script>
|
51
60
|
|
52
61
|
{#if asChild}
|
@@ -1,6 +1,7 @@
|
|
1
|
+
import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
|
1
2
|
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
3
|
import type { CreateTreeViewProps, CreateTreeViewReturn } from './create-tree-view.svelte.js';
|
3
|
-
export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps
|
4
|
+
export interface TreeViewProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateTreeViewReturn>, CreateTreeViewProps>, PresenceStrategyProps {
|
4
5
|
}
|
5
6
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
7
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
package/package.json
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
{
|
2
2
|
"name": "ui-ingredients",
|
3
3
|
"type": "module",
|
4
|
-
"
|
4
|
+
"license": "MIT",
|
5
|
+
"version": "0.0.69",
|
5
6
|
"packageManager": "pnpm@9.7.0",
|
6
7
|
"svelte": "./dist/index.js",
|
7
8
|
"types": "./dist/index.d.ts",
|
@@ -9,6 +10,190 @@
|
|
9
10
|
".": {
|
10
11
|
"types": "./dist/index.d.ts",
|
11
12
|
"svelte": "./dist/index.js"
|
13
|
+
},
|
14
|
+
"./accordion": {
|
15
|
+
"types": "./dist/accordion/index.d.ts",
|
16
|
+
"svelte": "./dist/accordion/index.js"
|
17
|
+
},
|
18
|
+
"./avatar": {
|
19
|
+
"types": "./dist/avatar/index.d.ts",
|
20
|
+
"svelte": "./dist/avatar/index.js"
|
21
|
+
},
|
22
|
+
"./carousel": {
|
23
|
+
"types": "./dist/carousel/index.d.ts",
|
24
|
+
"svelte": "./dist/carousel/index.js"
|
25
|
+
},
|
26
|
+
"./checkbox": {
|
27
|
+
"types": "./dist/checkbox/index.d.ts",
|
28
|
+
"svelte": "./dist/checkbox/index.js"
|
29
|
+
},
|
30
|
+
"./clipboard": {
|
31
|
+
"types": "./dist/clipboard/index.d.ts",
|
32
|
+
"svelte": "./dist/clipboard/index.js"
|
33
|
+
},
|
34
|
+
"./collapsible": {
|
35
|
+
"types": "./dist/collapsible/index.d.ts",
|
36
|
+
"svelte": "./dist/collapsible/index.js"
|
37
|
+
},
|
38
|
+
"./color-picker": {
|
39
|
+
"types": "./dist/color-picker/index.d.ts",
|
40
|
+
"svelte": "./dist/color-picker/index.js"
|
41
|
+
},
|
42
|
+
"./combobox": {
|
43
|
+
"types": "./dist/combobox/index.d.ts",
|
44
|
+
"svelte": "./dist/combobox/index.js"
|
45
|
+
},
|
46
|
+
"./date-picker": {
|
47
|
+
"types": "./dist/date-picker/index.d.ts",
|
48
|
+
"svelte": "./dist/date-picker/index.js"
|
49
|
+
},
|
50
|
+
"./dialog": {
|
51
|
+
"types": "./dist/dialog/index.d.ts",
|
52
|
+
"svelte": "./dist/dialog/index.js"
|
53
|
+
},
|
54
|
+
"./editable": {
|
55
|
+
"types": "./dist/editable/index.d.ts",
|
56
|
+
"svelte": "./dist/editable/index.js"
|
57
|
+
},
|
58
|
+
"./environment-provider": {
|
59
|
+
"types": "./dist/environment-provider/index.d.ts",
|
60
|
+
"svelte": "./dist/environment-provider/index.js"
|
61
|
+
},
|
62
|
+
"./field": {
|
63
|
+
"types": "./dist/field/index.d.ts",
|
64
|
+
"svelte": "./dist/field/index.js"
|
65
|
+
},
|
66
|
+
"./file-upload": {
|
67
|
+
"types": "./dist/file-upload/index.d.ts",
|
68
|
+
"svelte": "./dist/file-upload/index.js"
|
69
|
+
},
|
70
|
+
"./floating-panel": {
|
71
|
+
"types": "./dist/floating-panel/index.d.ts",
|
72
|
+
"svelte": "./dist/floating-panel/index.js"
|
73
|
+
},
|
74
|
+
"./highlight": {
|
75
|
+
"types": "./dist/highlight/index.d.ts",
|
76
|
+
"svelte": "./dist/highlight/index.js"
|
77
|
+
},
|
78
|
+
"./hover-card": {
|
79
|
+
"types": "./dist/hover-card/index.d.ts",
|
80
|
+
"svelte": "./dist/hover-card/index.js"
|
81
|
+
},
|
82
|
+
"./locale-provider": {
|
83
|
+
"types": "./dist/locale-provider/index.d.ts",
|
84
|
+
"svelte": "./dist/locale-provider/index.js"
|
85
|
+
},
|
86
|
+
"./menu": {
|
87
|
+
"types": "./dist/menu/index.d.ts",
|
88
|
+
"svelte": "./dist/menu/index.js"
|
89
|
+
},
|
90
|
+
"./number-input": {
|
91
|
+
"types": "./dist/number-input/index.d.ts",
|
92
|
+
"svelte": "./dist/number-input/index.js"
|
93
|
+
},
|
94
|
+
"./pagination": {
|
95
|
+
"types": "./dist/pagination/index.d.ts",
|
96
|
+
"svelte": "./dist/pagination/index.js"
|
97
|
+
},
|
98
|
+
"./pin-input": {
|
99
|
+
"types": "./dist/pin-input/index.d.ts",
|
100
|
+
"svelte": "./dist/pin-input/index.js"
|
101
|
+
},
|
102
|
+
"./popover": {
|
103
|
+
"types": "./dist/popover/index.d.ts",
|
104
|
+
"svelte": "./dist/popover/index.js"
|
105
|
+
},
|
106
|
+
"./portal": {
|
107
|
+
"types": "./dist/portal/index.d.ts",
|
108
|
+
"svelte": "./dist/portal/index.js"
|
109
|
+
},
|
110
|
+
"./presence": {
|
111
|
+
"types": "./dist/presence/index.d.ts",
|
112
|
+
"svelte": "./dist/presence/index.js"
|
113
|
+
},
|
114
|
+
"./progress": {
|
115
|
+
"types": "./dist/progress/index.d.ts",
|
116
|
+
"svelte": "./dist/progress/index.js"
|
117
|
+
},
|
118
|
+
"./qr-code": {
|
119
|
+
"types": "./dist/qr-code/index.d.ts",
|
120
|
+
"svelte": "./dist/qr-code/index.js"
|
121
|
+
},
|
122
|
+
"./radio-group": {
|
123
|
+
"types": "./dist/radio-group/index.d.ts",
|
124
|
+
"svelte": "./dist/radio-group/index.js"
|
125
|
+
},
|
126
|
+
"./rating-group": {
|
127
|
+
"types": "./dist/rating-group/index.d.ts",
|
128
|
+
"svelte": "./dist/rating-group/index.js"
|
129
|
+
},
|
130
|
+
"./segment-group": {
|
131
|
+
"types": "./dist/segment-group/index.d.ts",
|
132
|
+
"svelte": "./dist/segment-group/index.js"
|
133
|
+
},
|
134
|
+
"./select": {
|
135
|
+
"types": "./dist/select/index.d.ts",
|
136
|
+
"svelte": "./dist/select/index.js"
|
137
|
+
},
|
138
|
+
"./signature-pad": {
|
139
|
+
"types": "./dist/signature-pad/index.d.ts",
|
140
|
+
"svelte": "./dist/signature-pad/index.js"
|
141
|
+
},
|
142
|
+
"./slider": {
|
143
|
+
"types": "./dist/slider/index.d.ts",
|
144
|
+
"svelte": "./dist/slider/index.js"
|
145
|
+
},
|
146
|
+
"./splitter": {
|
147
|
+
"types": "./dist/splitter/index.d.ts",
|
148
|
+
"svelte": "./dist/splitter/index.js"
|
149
|
+
},
|
150
|
+
"./steps": {
|
151
|
+
"types": "./dist/steps/index.d.ts",
|
152
|
+
"svelte": "./dist/steps/index.js"
|
153
|
+
},
|
154
|
+
"./switch": {
|
155
|
+
"types": "./dist/switch/index.d.ts",
|
156
|
+
"svelte": "./dist/switch/index.js"
|
157
|
+
},
|
158
|
+
"./tabs": {
|
159
|
+
"types": "./dist/tabs/index.d.ts",
|
160
|
+
"svelte": "./dist/tabs/index.js"
|
161
|
+
},
|
162
|
+
"./tags-input": {
|
163
|
+
"types": "./dist/tags-input/index.d.ts",
|
164
|
+
"svelte": "./dist/tags-input/index.js"
|
165
|
+
},
|
166
|
+
"./time-picker": {
|
167
|
+
"types": "./dist/time-picker/index.d.ts",
|
168
|
+
"svelte": "./dist/time-picker/index.js"
|
169
|
+
},
|
170
|
+
"./timer": {
|
171
|
+
"types": "./dist/timer/index.d.ts",
|
172
|
+
"svelte": "./dist/timer/index.js"
|
173
|
+
},
|
174
|
+
"./toast": {
|
175
|
+
"types": "./dist/toast/index.d.ts",
|
176
|
+
"svelte": "./dist/toast/index.js"
|
177
|
+
},
|
178
|
+
"./toggle-group": {
|
179
|
+
"types": "./dist/toggle-group/index.d.ts",
|
180
|
+
"svelte": "./dist/toggle-group/index.js"
|
181
|
+
},
|
182
|
+
"./tooltip": {
|
183
|
+
"types": "./dist/tooltip/index.d.ts",
|
184
|
+
"svelte": "./dist/tooltip/index.js"
|
185
|
+
},
|
186
|
+
"./tour": {
|
187
|
+
"types": "./dist/tour/index.d.ts",
|
188
|
+
"svelte": "./dist/tour/index.js"
|
189
|
+
},
|
190
|
+
"./tree-view": {
|
191
|
+
"types": "./dist/tree-view/index.d.ts",
|
192
|
+
"svelte": "./dist/tree-view/index.js"
|
193
|
+
},
|
194
|
+
"./merge-props": {
|
195
|
+
"types": "./dist/merge-props.d.ts",
|
196
|
+
"import": "./dist/merge-props.js"
|
12
197
|
}
|
13
198
|
},
|
14
199
|
"files": [
|
@@ -85,52 +270,52 @@
|
|
85
270
|
"release": "release-it"
|
86
271
|
},
|
87
272
|
"dependencies": {
|
88
|
-
"@zag-js/accordion": "0.
|
89
|
-
"@zag-js/anatomy": "0.
|
90
|
-
"@zag-js/avatar": "0.
|
91
|
-
"@zag-js/carousel": "0.
|
92
|
-
"@zag-js/checkbox": "0.
|
93
|
-
"@zag-js/clipboard": "0.
|
94
|
-
"@zag-js/collapsible": "0.
|
95
|
-
"@zag-js/color-picker": "0.
|
96
|
-
"@zag-js/combobox": "0.
|
97
|
-
"@zag-js/core": "0.
|
98
|
-
"@zag-js/date-picker": "0.
|
99
|
-
"@zag-js/dialog": "0.
|
100
|
-
"@zag-js/dom-query": "0.
|
101
|
-
"@zag-js/editable": "0.
|
102
|
-
"@zag-js/file-upload": "0.
|
103
|
-
"@zag-js/floating-panel": "0.
|
104
|
-
"@zag-js/highlight-word": "0.
|
105
|
-
"@zag-js/hover-card": "0.
|
106
|
-
"@zag-js/i18n-utils": "0.
|
107
|
-
"@zag-js/menu": "0.
|
108
|
-
"@zag-js/number-input": "0.
|
109
|
-
"@zag-js/pagination": "0.
|
110
|
-
"@zag-js/pin-input": "0.
|
111
|
-
"@zag-js/popover": "0.
|
112
|
-
"@zag-js/presence": "0.
|
113
|
-
"@zag-js/progress": "0.
|
114
|
-
"@zag-js/qr-code": "0.
|
115
|
-
"@zag-js/radio-group": "0.
|
116
|
-
"@zag-js/rating-group": "0.
|
117
|
-
"@zag-js/select": "0.
|
118
|
-
"@zag-js/signature-pad": "0.
|
119
|
-
"@zag-js/slider": "0.
|
120
|
-
"@zag-js/splitter": "0.
|
121
|
-
"@zag-js/steps": "0.
|
122
|
-
"@zag-js/svelte": "0.
|
123
|
-
"@zag-js/switch": "0.
|
124
|
-
"@zag-js/tabs": "0.
|
125
|
-
"@zag-js/tags-input": "0.
|
126
|
-
"@zag-js/time-picker": "0.
|
127
|
-
"@zag-js/timer": "0.
|
128
|
-
"@zag-js/toast": "0.
|
129
|
-
"@zag-js/toggle-group": "0.
|
130
|
-
"@zag-js/tooltip": "0.
|
131
|
-
"@zag-js/tour": "0.
|
132
|
-
"@zag-js/tree-view": "0.
|
133
|
-
"@zag-js/utils": "0.
|
273
|
+
"@zag-js/accordion": "0.72.0",
|
274
|
+
"@zag-js/anatomy": "0.72.0",
|
275
|
+
"@zag-js/avatar": "0.72.0",
|
276
|
+
"@zag-js/carousel": "0.72.0",
|
277
|
+
"@zag-js/checkbox": "0.72.0",
|
278
|
+
"@zag-js/clipboard": "0.72.0",
|
279
|
+
"@zag-js/collapsible": "0.72.0",
|
280
|
+
"@zag-js/color-picker": "0.72.0",
|
281
|
+
"@zag-js/combobox": "0.72.0",
|
282
|
+
"@zag-js/core": "0.72.0",
|
283
|
+
"@zag-js/date-picker": "0.72.0",
|
284
|
+
"@zag-js/dialog": "0.72.0",
|
285
|
+
"@zag-js/dom-query": "0.72.0",
|
286
|
+
"@zag-js/editable": "0.72.0",
|
287
|
+
"@zag-js/file-upload": "0.72.0",
|
288
|
+
"@zag-js/floating-panel": "0.72.0",
|
289
|
+
"@zag-js/highlight-word": "0.72.0",
|
290
|
+
"@zag-js/hover-card": "0.72.0",
|
291
|
+
"@zag-js/i18n-utils": "0.72.0",
|
292
|
+
"@zag-js/menu": "0.72.0",
|
293
|
+
"@zag-js/number-input": "0.72.0",
|
294
|
+
"@zag-js/pagination": "0.72.0",
|
295
|
+
"@zag-js/pin-input": "0.72.0",
|
296
|
+
"@zag-js/popover": "0.72.0",
|
297
|
+
"@zag-js/presence": "0.72.0",
|
298
|
+
"@zag-js/progress": "0.72.0",
|
299
|
+
"@zag-js/qr-code": "0.72.0",
|
300
|
+
"@zag-js/radio-group": "0.72.0",
|
301
|
+
"@zag-js/rating-group": "0.72.0",
|
302
|
+
"@zag-js/select": "0.72.0",
|
303
|
+
"@zag-js/signature-pad": "0.72.0",
|
304
|
+
"@zag-js/slider": "0.72.0",
|
305
|
+
"@zag-js/splitter": "0.72.0",
|
306
|
+
"@zag-js/steps": "0.72.0",
|
307
|
+
"@zag-js/svelte": "0.72.0",
|
308
|
+
"@zag-js/switch": "0.72.0",
|
309
|
+
"@zag-js/tabs": "0.72.0",
|
310
|
+
"@zag-js/tags-input": "0.72.0",
|
311
|
+
"@zag-js/time-picker": "0.72.0",
|
312
|
+
"@zag-js/timer": "0.72.0",
|
313
|
+
"@zag-js/toast": "0.72.0",
|
314
|
+
"@zag-js/toggle-group": "0.72.0",
|
315
|
+
"@zag-js/tooltip": "0.72.0",
|
316
|
+
"@zag-js/tour": "0.72.0",
|
317
|
+
"@zag-js/tree-view": "0.72.0",
|
318
|
+
"@zag-js/utils": "0.72.0",
|
134
319
|
"uid": "2.0.2"
|
135
320
|
},
|
136
321
|
"peerDependencies": {
|
package/dist/is-pojo.d.ts
DELETED
@@ -1,30 +0,0 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface TourNextTriggerProps
|
5
|
-
extends HtmlIngredientProps<'button', HTMLButtonElement> {}
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<script lang="ts">
|
9
|
-
import {mergeProps} from '../merge-props.js';
|
10
|
-
import {getTourContext} from './tour-context.svelte.js';
|
11
|
-
|
12
|
-
let {
|
13
|
-
ref = $bindable(null),
|
14
|
-
asChild,
|
15
|
-
children,
|
16
|
-
...props
|
17
|
-
}: TourNextTriggerProps = $props();
|
18
|
-
|
19
|
-
let tour = getTourContext();
|
20
|
-
|
21
|
-
let mergedProps = $derived(mergeProps(tour.getNextTriggerProps(), props));
|
22
|
-
</script>
|
23
|
-
|
24
|
-
{#if asChild}
|
25
|
-
{@render asChild(mergedProps)}
|
26
|
-
{:else}
|
27
|
-
<button bind:this={ref} type="button" {...mergedProps}>
|
28
|
-
{@render children?.()}
|
29
|
-
</button>
|
30
|
-
{/if}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import type { HtmlIngredientProps } from '../types.js';
|
2
|
-
export interface TourNextTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
|
3
|
-
}
|
4
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
-
$$bindings?: Bindings;
|
7
|
-
} & Exports;
|
8
|
-
(internal: unknown, props: Props & {
|
9
|
-
$$events?: Events;
|
10
|
-
$$slots?: Slots;
|
11
|
-
}): Exports & {
|
12
|
-
$set?: any;
|
13
|
-
$on?: any;
|
14
|
-
};
|
15
|
-
z_$$bindings?: Bindings;
|
16
|
-
}
|
17
|
-
declare const TourNextTrigger: $$__sveltets_2_IsomorphicComponent<TourNextTriggerProps, {
|
18
|
-
[evt: string]: CustomEvent<any>;
|
19
|
-
}, {}, {}, "ref">;
|
20
|
-
type TourNextTrigger = InstanceType<typeof TourNextTrigger>;
|
21
|
-
export default TourNextTrigger;
|
@@ -1,30 +0,0 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {HtmlIngredientProps} from '../types.js';
|
3
|
-
|
4
|
-
export interface TourSkipTriggerProps
|
5
|
-
extends HtmlIngredientProps<'button', HTMLButtonElement> {}
|
6
|
-
</script>
|
7
|
-
|
8
|
-
<script lang="ts">
|
9
|
-
import {mergeProps} from '../merge-props.js';
|
10
|
-
import {getTourContext} from './tour-context.svelte.js';
|
11
|
-
|
12
|
-
let {
|
13
|
-
ref = $bindable(null),
|
14
|
-
asChild,
|
15
|
-
children,
|
16
|
-
...props
|
17
|
-
}: TourSkipTriggerProps = $props();
|
18
|
-
|
19
|
-
let tour = getTourContext();
|
20
|
-
|
21
|
-
let mergedProps = $derived(mergeProps(tour.getSkipTriggerProps(), props));
|
22
|
-
</script>
|
23
|
-
|
24
|
-
{#if asChild}
|
25
|
-
{@render asChild(mergedProps)}
|
26
|
-
{:else}
|
27
|
-
<button bind:this={ref} type="button" {...mergedProps}>
|
28
|
-
{@render children?.()}
|
29
|
-
</button>
|
30
|
-
{/if}
|