ui-ingredients 0.3.0 → 0.4.1
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -0
- package/dist/accordion/avatar-context.svelte.js +1 -1
- package/dist/alert/alert-anatomy.d.ts +2 -0
- package/dist/alert/alert-anatomy.js +3 -0
- package/dist/alert/alert-context.d.ts +2 -0
- package/dist/alert/alert-context.js +2 -0
- package/dist/alert/alert-description.svelte +25 -0
- package/dist/alert/alert-description.svelte.d.ts +21 -0
- package/dist/alert/alert-indicator.svelte +25 -0
- package/dist/alert/alert-indicator.svelte.d.ts +21 -0
- package/dist/alert/alert-root.svelte +29 -0
- package/dist/alert/alert-root.svelte.d.ts +22 -0
- package/dist/alert/alert-title.svelte +25 -0
- package/dist/alert/alert-title.svelte.d.ts +21 -0
- package/dist/alert/alert.d.ts +4 -0
- package/dist/alert/alert.js +4 -0
- package/dist/alert/create-alert.svelte.d.ts +8 -0
- package/dist/alert/create-alert.svelte.js +31 -0
- package/dist/alert/index.d.ts +7 -0
- package/dist/alert/index.js +3 -0
- package/dist/alert-dialog/alert-dialog-anatomy.d.ts +2 -0
- package/dist/alert-dialog/alert-dialog-anatomy.js +3 -0
- package/dist/alert-dialog/alert-dialog-backdrop.svelte +49 -0
- package/dist/alert-dialog/alert-dialog-backdrop.svelte.d.ts +22 -0
- package/dist/alert-dialog/alert-dialog-close-trigger.svelte +32 -0
- package/dist/alert-dialog/alert-dialog-close-trigger.svelte.d.ts +21 -0
- package/dist/alert-dialog/alert-dialog-content.svelte +41 -0
- package/dist/alert-dialog/alert-dialog-content.svelte.d.ts +22 -0
- package/dist/alert-dialog/alert-dialog-context.svelte.d.ts +2 -0
- package/dist/alert-dialog/alert-dialog-context.svelte.js +2 -0
- package/dist/alert-dialog/alert-dialog-description.svelte +32 -0
- package/dist/alert-dialog/alert-dialog-description.svelte.d.ts +21 -0
- package/dist/alert-dialog/alert-dialog-positioner.svelte +40 -0
- package/dist/alert-dialog/alert-dialog-positioner.svelte.d.ts +21 -0
- package/dist/alert-dialog/alert-dialog-root.svelte +48 -0
- package/dist/alert-dialog/alert-dialog-root.svelte.d.ts +24 -0
- package/dist/alert-dialog/alert-dialog-title.svelte +30 -0
- package/dist/alert-dialog/alert-dialog-title.svelte.d.ts +21 -0
- package/dist/alert-dialog/alert-dialog-trigger.svelte +30 -0
- package/dist/alert-dialog/alert-dialog-trigger.svelte.d.ts +21 -0
- package/dist/alert-dialog/alert-dialog.d.ts +8 -0
- package/dist/alert-dialog/alert-dialog.js +8 -0
- package/dist/alert-dialog/create-alert-dialog.svelte.d.ts +8 -0
- package/dist/alert-dialog/create-alert-dialog.svelte.js +48 -0
- package/dist/alert-dialog/index.d.ts +11 -0
- package/dist/alert-dialog/index.js +3 -0
- package/dist/breadcrumbs/breadcrumbs-anatomy.d.ts +2 -0
- package/dist/breadcrumbs/breadcrumbs-anatomy.js +3 -0
- package/dist/breadcrumbs/breadcrumbs-context.svelte.d.ts +2 -0
- package/dist/breadcrumbs/breadcrumbs-context.svelte.js +2 -0
- package/dist/breadcrumbs/breadcrumbs-item.svelte +25 -0
- package/dist/breadcrumbs/breadcrumbs-item.svelte.d.ts +21 -0
- package/dist/breadcrumbs/breadcrumbs-link.svelte +33 -0
- package/dist/breadcrumbs/breadcrumbs-link.svelte.d.ts +22 -0
- package/dist/breadcrumbs/breadcrumbs-list.svelte +25 -0
- package/dist/breadcrumbs/breadcrumbs-list.svelte.d.ts +21 -0
- package/dist/breadcrumbs/breadcrumbs-root.svelte +29 -0
- package/dist/breadcrumbs/breadcrumbs-root.svelte.d.ts +22 -0
- package/dist/breadcrumbs/breadcrumbs-separator.svelte +25 -0
- package/dist/breadcrumbs/breadcrumbs-separator.svelte.d.ts +21 -0
- package/dist/breadcrumbs/breadcrumbs.d.ts +5 -0
- package/dist/breadcrumbs/breadcrumbs.js +5 -0
- package/dist/breadcrumbs/create-breadcrumbs.d.ts +13 -0
- package/dist/breadcrumbs/create-breadcrumbs.js +47 -0
- package/dist/breadcrumbs/index.d.ts +8 -0
- package/dist/breadcrumbs/index.js +3 -0
- package/dist/color-picker/color-picker-anatomy.d.ts +2 -2
- package/dist/color-picker/color-picker-context.svelte.js +4 -4
- package/dist/combobox/combobox-context.svelte.js +2 -2
- package/dist/date-picker/date-picker-anatomy.d.ts +2 -2
- package/dist/date-picker/date-picker-context.svelte.js +4 -4
- package/dist/dialog/create-dialog.svelte.d.ts +1 -1
- package/dist/dialog/create-dialog.svelte.js +1 -0
- package/dist/drawer/create-drawer.svelte.d.ts +12 -0
- package/dist/drawer/create-drawer.svelte.js +57 -0
- package/dist/drawer/drawer-anatomy.d.ts +2 -0
- package/dist/drawer/drawer-anatomy.js +3 -0
- package/dist/drawer/drawer-backdrop.svelte +45 -0
- package/dist/drawer/drawer-backdrop.svelte.d.ts +22 -0
- package/dist/drawer/drawer-body.svelte +30 -0
- package/dist/drawer/drawer-body.svelte.d.ts +21 -0
- package/dist/drawer/drawer-close-trigger.svelte +30 -0
- package/dist/drawer/drawer-close-trigger.svelte.d.ts +21 -0
- package/dist/drawer/drawer-content.svelte +37 -0
- package/dist/drawer/drawer-content.svelte.d.ts +22 -0
- package/dist/drawer/drawer-context.svelte.d.ts +2 -0
- package/dist/drawer/drawer-context.svelte.js +2 -0
- package/dist/drawer/drawer-description.svelte +30 -0
- package/dist/drawer/drawer-description.svelte.d.ts +21 -0
- package/dist/drawer/drawer-footer.svelte +30 -0
- package/dist/drawer/drawer-footer.svelte.d.ts +21 -0
- package/dist/drawer/drawer-header.svelte +30 -0
- package/dist/drawer/drawer-header.svelte.d.ts +21 -0
- package/dist/drawer/drawer-positioner.svelte +36 -0
- package/dist/drawer/drawer-positioner.svelte.d.ts +21 -0
- package/dist/drawer/drawer-root.svelte +48 -0
- package/dist/drawer/drawer-root.svelte.d.ts +24 -0
- package/dist/drawer/drawer-title.svelte +30 -0
- package/dist/drawer/drawer-title.svelte.d.ts +21 -0
- package/dist/drawer/drawer-trigger.svelte +30 -0
- package/dist/drawer/drawer-trigger.svelte.d.ts +21 -0
- package/dist/drawer/drawer.d.ts +11 -0
- package/dist/drawer/drawer.js +11 -0
- package/dist/drawer/index.d.ts +14 -0
- package/dist/drawer/index.js +3 -0
- package/dist/environment-provider/enviroment-provider-context.svelte.d.ts +3 -3
- package/dist/field/create-field.svelte.d.ts +8 -7
- package/dist/field/create-field.svelte.js +11 -0
- package/dist/field/field-anatomy.d.ts +2 -2
- package/dist/field/field-anatomy.js +1 -1
- package/dist/field/field-required-indicator.svelte +36 -0
- package/dist/field/field-required-indicator.svelte.d.ts +21 -0
- package/dist/field/field.d.ts +1 -0
- package/dist/field/field.js +1 -0
- package/dist/field/index.d.ts +1 -0
- package/dist/file-upload/file-upload-context.svelte.js +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/menu/menu-context.svelte.js +2 -2
- package/dist/segment-group/segment-group-anatomy.d.ts +2 -2
- package/dist/segment-group/segment-group-context.svelte.js +1 -1
- package/dist/select/select-context.svelte.js +2 -2
- package/dist/slider/slider-context.svelte.js +1 -1
- package/dist/steps/steps-context.svelte.js +1 -1
- package/dist/tags-input/tags-input-context.svelte.js +1 -1
- package/dist/timer/timer-context.svelte.js +1 -1
- package/dist/toggle/create-toggle.svelte.d.ts +1 -1
- package/dist/toggle/create-toggle.svelte.js +3 -0
- package/dist/tour/tour-anatomy.d.ts +2 -2
- package/dist/tree-view/tree-view-context.svelte.js +3 -3
- package/package.json +88 -55
@@ -0,0 +1,48 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
3
|
+
import type {Snippet} from 'svelte';
|
4
|
+
import type {
|
5
|
+
CreateAlertDialogProps,
|
6
|
+
CreateAlertDialogReturn,
|
7
|
+
} from './create-alert-dialog.svelte.js';
|
8
|
+
|
9
|
+
export interface AlertDialogProps
|
10
|
+
extends CreateAlertDialogProps,
|
11
|
+
PresenceStrategyProps {
|
12
|
+
children?: Snippet<[CreateAlertDialogReturn]>;
|
13
|
+
}
|
14
|
+
</script>
|
15
|
+
|
16
|
+
<script lang="ts">
|
17
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
18
|
+
import {
|
19
|
+
setPresenceContext,
|
20
|
+
setPresenceStrategyPropsContext,
|
21
|
+
} from '../presence/presence-context.svelte.js';
|
22
|
+
import {reflect} from '@zag-js/svelte';
|
23
|
+
import {createSplitProps} from '@zag-js/utils';
|
24
|
+
import {setAlertDialogContext} from './alert-dialog-context.svelte.js';
|
25
|
+
import {createAlertDialog} from './create-alert-dialog.svelte.js';
|
26
|
+
|
27
|
+
let {children, ...props}: AlertDialogProps = $props();
|
28
|
+
|
29
|
+
let [presenceStrategyProps, createDialogProps] = $derived(
|
30
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
31
|
+
props,
|
32
|
+
),
|
33
|
+
);
|
34
|
+
|
35
|
+
let alertDialog = createAlertDialog(reflect(() => createDialogProps));
|
36
|
+
let presence = createPresence(
|
37
|
+
reflect(() => ({
|
38
|
+
...presenceStrategyProps,
|
39
|
+
present: alertDialog.open,
|
40
|
+
})),
|
41
|
+
);
|
42
|
+
|
43
|
+
setAlertDialogContext(alertDialog);
|
44
|
+
setPresenceContext(presence);
|
45
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
46
|
+
</script>
|
47
|
+
|
48
|
+
{@render children?.(alertDialog)}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
|
2
|
+
import type { Snippet } from 'svelte';
|
3
|
+
import type { CreateAlertDialogProps, CreateAlertDialogReturn } from './create-alert-dialog.svelte.js';
|
4
|
+
export interface AlertDialogProps extends CreateAlertDialogProps, PresenceStrategyProps {
|
5
|
+
children?: Snippet<[CreateAlertDialogReturn]>;
|
6
|
+
}
|
7
|
+
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> {
|
8
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
9
|
+
$$bindings?: Bindings;
|
10
|
+
} & Exports;
|
11
|
+
(internal: unknown, props: Props & {
|
12
|
+
$$events?: Events;
|
13
|
+
$$slots?: Slots;
|
14
|
+
}): Exports & {
|
15
|
+
$set?: any;
|
16
|
+
$on?: any;
|
17
|
+
};
|
18
|
+
z_$$bindings?: Bindings;
|
19
|
+
}
|
20
|
+
declare const AlertDialogRoot: $$__sveltets_2_IsomorphicComponent<AlertDialogProps, {
|
21
|
+
[evt: string]: CustomEvent<any>;
|
22
|
+
}, {}, {}, "">;
|
23
|
+
type AlertDialogRoot = InstanceType<typeof AlertDialogRoot>;
|
24
|
+
export default AlertDialogRoot;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AlertDialogTitleProps
|
5
|
+
extends HtmlIngredientProps<'h2', HTMLHeadingElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AlertDialogTitleProps = $props();
|
18
|
+
|
19
|
+
let alertDialog = getAlertDialogContext();
|
20
|
+
|
21
|
+
let mergedProps = $derived(mergeProps(alertDialog.getTitleProps(), props));
|
22
|
+
</script>
|
23
|
+
|
24
|
+
{#if asChild}
|
25
|
+
{@render asChild(mergedProps)}
|
26
|
+
{:else}
|
27
|
+
<h2 bind:this={ref} {...mergedProps}>
|
28
|
+
{@render children?.()}
|
29
|
+
</h2>
|
30
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AlertDialogTitleProps extends HtmlIngredientProps<'h2', HTMLHeadingElement> {
|
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 AlertDialogTitle: $$__sveltets_2_IsomorphicComponent<AlertDialogTitleProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AlertDialogTitle = InstanceType<typeof AlertDialogTitle>;
|
21
|
+
export default AlertDialogTitle;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface AlertDialogTriggerProps
|
5
|
+
extends HtmlIngredientProps<'button', HTMLButtonElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
|
11
|
+
|
12
|
+
let {
|
13
|
+
ref = $bindable(null),
|
14
|
+
asChild,
|
15
|
+
children,
|
16
|
+
...props
|
17
|
+
}: AlertDialogTriggerProps = $props();
|
18
|
+
|
19
|
+
let alertDialog = getAlertDialogContext();
|
20
|
+
|
21
|
+
let mergedProps = $derived(mergeProps(alertDialog.getTriggerProps(), 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}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface AlertDialogTriggerProps 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 AlertDialogTrigger: $$__sveltets_2_IsomorphicComponent<AlertDialogTriggerProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type AlertDialogTrigger = InstanceType<typeof AlertDialogTrigger>;
|
21
|
+
export default AlertDialogTrigger;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export { default as Backdrop } from './alert-dialog-backdrop.svelte';
|
2
|
+
export { default as CloseTrigger } from './alert-dialog-close-trigger.svelte';
|
3
|
+
export { default as Content } from './alert-dialog-content.svelte';
|
4
|
+
export { default as Description } from './alert-dialog-description.svelte';
|
5
|
+
export { default as Positioner } from './alert-dialog-positioner.svelte';
|
6
|
+
export { default as Root } from './alert-dialog-root.svelte';
|
7
|
+
export { default as Title } from './alert-dialog-title.svelte';
|
8
|
+
export { default as Trigger } from './alert-dialog-trigger.svelte';
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export { default as Backdrop } from './alert-dialog-backdrop.svelte';
|
2
|
+
export { default as CloseTrigger } from './alert-dialog-close-trigger.svelte';
|
3
|
+
export { default as Content } from './alert-dialog-content.svelte';
|
4
|
+
export { default as Description } from './alert-dialog-description.svelte';
|
5
|
+
export { default as Positioner } from './alert-dialog-positioner.svelte';
|
6
|
+
export { default as Root } from './alert-dialog-root.svelte';
|
7
|
+
export { default as Title } from './alert-dialog-title.svelte';
|
8
|
+
export { default as Trigger } from './alert-dialog-trigger.svelte';
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import * as dialog from '@zag-js/dialog';
|
2
|
+
export interface CreateAlertDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'role' | 'getRootNode' | 'open.controlled'> {
|
3
|
+
id?: string;
|
4
|
+
openControlled?: boolean;
|
5
|
+
}
|
6
|
+
export interface CreateAlertDialogReturn extends dialog.Api {
|
7
|
+
}
|
8
|
+
export declare function createAlertDialog(props: CreateAlertDialogProps): CreateAlertDialogReturn;
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
|
2
|
+
import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
|
3
|
+
import { mergeProps } from '../merge-props.js';
|
4
|
+
import * as dialog from '@zag-js/dialog';
|
5
|
+
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
|
6
|
+
import { uid } from 'uid';
|
7
|
+
import { parts } from './alert-dialog-anatomy.js';
|
8
|
+
export function createAlertDialog(props) {
|
9
|
+
const locale = getLocaleContext();
|
10
|
+
const environment = getEnvironmentContext();
|
11
|
+
const id = uid();
|
12
|
+
const context = reflect(() => ({
|
13
|
+
id,
|
14
|
+
dir: locale?.dir,
|
15
|
+
role: 'alertdialog',
|
16
|
+
...props,
|
17
|
+
getRootNode: environment?.getRootNode,
|
18
|
+
'open.controlled': props.openControlled,
|
19
|
+
}));
|
20
|
+
const [state, send] = useMachine(dialog.machine(context), { context });
|
21
|
+
return reflect(() => {
|
22
|
+
const o = dialog.connect(state, send, normalizeProps);
|
23
|
+
return {
|
24
|
+
...o,
|
25
|
+
getBackdropProps() {
|
26
|
+
return mergeProps(o.getBackdropProps(), parts.backdrop.attrs);
|
27
|
+
},
|
28
|
+
getCloseTriggerProps() {
|
29
|
+
return mergeProps(o.getCloseTriggerProps(), parts.closeTrigger.attrs);
|
30
|
+
},
|
31
|
+
getContentProps() {
|
32
|
+
return mergeProps(o.getContentProps(), parts.content.attrs);
|
33
|
+
},
|
34
|
+
getDescriptionProps() {
|
35
|
+
return mergeProps(o.getDescriptionProps(), parts.description.attrs);
|
36
|
+
},
|
37
|
+
getPositionerProps() {
|
38
|
+
return mergeProps(o.getPositionerProps(), parts.positioner.attrs);
|
39
|
+
},
|
40
|
+
getTitleProps() {
|
41
|
+
return mergeProps(o.getTitleProps(), parts.title.attrs);
|
42
|
+
},
|
43
|
+
getTriggerProps() {
|
44
|
+
return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
|
45
|
+
},
|
46
|
+
};
|
47
|
+
});
|
48
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
export * as AlertDialog from './alert-dialog.js';
|
2
|
+
export type { AlertDialogBackdropProps } from './alert-dialog-backdrop.svelte';
|
3
|
+
export type { AlertDialogCloseTriggerProps } from './alert-dialog-close-trigger.svelte';
|
4
|
+
export type { AlertDialogContentProps } from './alert-dialog-content.svelte';
|
5
|
+
export type { AlertDialogDescriptionProps } from './alert-dialog-description.svelte';
|
6
|
+
export type { AlertDialogPositionerProps } from './alert-dialog-positioner.svelte';
|
7
|
+
export type { AlertDialogProps } from './alert-dialog-root.svelte';
|
8
|
+
export type { AlertDialogTitleProps } from './alert-dialog-title.svelte';
|
9
|
+
export type { AlertDialogTriggerProps } from './alert-dialog-trigger.svelte';
|
10
|
+
export { anatomy as alertDialogAnatomy } from './alert-dialog-anatomy.js';
|
11
|
+
export { getAlertDialogContext } from './alert-dialog-context.svelte.js';
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface BreadcrumbsItemProps
|
5
|
+
extends HtmlIngredientProps<'li', HTMLLIElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {createBreadcrumbs} from './create-breadcrumbs.js';
|
11
|
+
|
12
|
+
let {ref, asChild, children, ...props}: BreadcrumbsItemProps = $props();
|
13
|
+
|
14
|
+
let breadcrumbs = createBreadcrumbs();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(breadcrumbs.getItemProps(), props));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
{#if asChild}
|
20
|
+
{@render asChild(attrs)}
|
21
|
+
{:else}
|
22
|
+
<li bind:this={ref} {...attrs}>
|
23
|
+
{@render children?.()}
|
24
|
+
</li>
|
25
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface BreadcrumbsItemProps extends HtmlIngredientProps<'li', HTMLLIElement> {
|
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 BreadcrumbsItem: $$__sveltets_2_IsomorphicComponent<BreadcrumbsItemProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "">;
|
20
|
+
type BreadcrumbsItem = InstanceType<typeof BreadcrumbsItem>;
|
21
|
+
export default BreadcrumbsItem;
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {LinkProps} from './create-breadcrumbs.js';
|
4
|
+
|
5
|
+
export interface BreadcrumbsLinkProps
|
6
|
+
extends Assign<HtmlIngredientProps<'a', HTMLAnchorElement>, LinkProps> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {createSplitProps} from '@zag-js/utils';
|
12
|
+
import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
|
13
|
+
|
14
|
+
let {ref, asChild, children, ...props}: BreadcrumbsLinkProps = $props();
|
15
|
+
|
16
|
+
let [linkProps, localProps] = $derived(
|
17
|
+
createSplitProps<LinkProps>(['href', 'current'])(props),
|
18
|
+
);
|
19
|
+
|
20
|
+
let breadcrumbs = getBreadcrumbsContext();
|
21
|
+
|
22
|
+
let attrs = $derived(
|
23
|
+
mergeProps(breadcrumbs.getLinkProps(linkProps), localProps),
|
24
|
+
);
|
25
|
+
</script>
|
26
|
+
|
27
|
+
{#if asChild}
|
28
|
+
{@render asChild(attrs)}
|
29
|
+
{:else}
|
30
|
+
<a bind:this={ref} {...attrs}>
|
31
|
+
{@render children?.()}
|
32
|
+
</a>
|
33
|
+
{/if}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
+
import type { LinkProps } from './create-breadcrumbs.js';
|
3
|
+
export interface BreadcrumbsLinkProps extends Assign<HtmlIngredientProps<'a', HTMLAnchorElement>, LinkProps> {
|
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> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const BreadcrumbsLink: $$__sveltets_2_IsomorphicComponent<BreadcrumbsLinkProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type BreadcrumbsLink = InstanceType<typeof BreadcrumbsLink>;
|
22
|
+
export default BreadcrumbsLink;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface BreadcrumbsListProps
|
5
|
+
extends HtmlIngredientProps<'ol', HTMLOListElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
|
11
|
+
|
12
|
+
let {ref, asChild, children, ...props}: BreadcrumbsListProps = $props();
|
13
|
+
|
14
|
+
let breadcrumbs = getBreadcrumbsContext();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(breadcrumbs.getListProps(), props));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
{#if asChild}
|
20
|
+
{@render asChild(attrs)}
|
21
|
+
{:else}
|
22
|
+
<ol bind:this={ref} {...attrs}>
|
23
|
+
{@render children?.()}
|
24
|
+
</ol>
|
25
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface BreadcrumbsListProps extends HtmlIngredientProps<'ol', HTMLOListElement> {
|
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 BreadcrumbsList: $$__sveltets_2_IsomorphicComponent<BreadcrumbsListProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "">;
|
20
|
+
type BreadcrumbsList = InstanceType<typeof BreadcrumbsList>;
|
21
|
+
export default BreadcrumbsList;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {CreateBreadcrumbsReturn} from './create-breadcrumbs.js';
|
4
|
+
|
5
|
+
export interface BreadcrumbsProps
|
6
|
+
extends HtmlIngredientProps<'nav', HTMLElement, CreateBreadcrumbsReturn> {}
|
7
|
+
</script>
|
8
|
+
|
9
|
+
<script lang="ts">
|
10
|
+
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {setBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
|
12
|
+
import {createBreadcrumbs} from './create-breadcrumbs.js';
|
13
|
+
|
14
|
+
let {ref, asChild, children, ...props}: BreadcrumbsProps = $props();
|
15
|
+
|
16
|
+
let breadcrumbs = createBreadcrumbs();
|
17
|
+
|
18
|
+
let attrs = $derived(mergeProps(breadcrumbs.getRootProps(), props));
|
19
|
+
|
20
|
+
setBreadcrumbsContext(breadcrumbs);
|
21
|
+
</script>
|
22
|
+
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(attrs, breadcrumbs)}
|
25
|
+
{:else}
|
26
|
+
<nav bind:this={ref} {...attrs}>
|
27
|
+
{@render children?.(breadcrumbs)}
|
28
|
+
</nav>
|
29
|
+
{/if}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
import type { CreateBreadcrumbsReturn } from './create-breadcrumbs.js';
|
3
|
+
export interface BreadcrumbsProps extends HtmlIngredientProps<'nav', HTMLElement, CreateBreadcrumbsReturn> {
|
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> {
|
6
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
7
|
+
$$bindings?: Bindings;
|
8
|
+
} & Exports;
|
9
|
+
(internal: unknown, props: Props & {
|
10
|
+
$$events?: Events;
|
11
|
+
$$slots?: Slots;
|
12
|
+
}): Exports & {
|
13
|
+
$set?: any;
|
14
|
+
$on?: any;
|
15
|
+
};
|
16
|
+
z_$$bindings?: Bindings;
|
17
|
+
}
|
18
|
+
declare const BreadcrumbsRoot: $$__sveltets_2_IsomorphicComponent<BreadcrumbsProps, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type BreadcrumbsRoot = InstanceType<typeof BreadcrumbsRoot>;
|
22
|
+
export default BreadcrumbsRoot;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface BreadcrumbsSeparatorProps
|
5
|
+
extends HtmlIngredientProps<'span', HTMLSpanElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getBreadcrumbsContext} from './breadcrumbs-context.svelte.js';
|
11
|
+
|
12
|
+
let {ref, asChild, children, ...props}: BreadcrumbsSeparatorProps = $props();
|
13
|
+
|
14
|
+
let breadcrumbs = getBreadcrumbsContext();
|
15
|
+
|
16
|
+
let attrs = $derived(mergeProps(breadcrumbs.getSeparatorProps(), props));
|
17
|
+
</script>
|
18
|
+
|
19
|
+
{#if asChild}
|
20
|
+
{@render asChild(attrs)}
|
21
|
+
{:else}
|
22
|
+
<span bind:this={ref} {...attrs}>
|
23
|
+
{@render children?.()}
|
24
|
+
</span>
|
25
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface BreadcrumbsSeparatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
|
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 BreadcrumbsSeparator: $$__sveltets_2_IsomorphicComponent<BreadcrumbsSeparatorProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "">;
|
20
|
+
type BreadcrumbsSeparator = InstanceType<typeof BreadcrumbsSeparator>;
|
21
|
+
export default BreadcrumbsSeparator;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export { default as Item } from './breadcrumbs-item.svelte';
|
2
|
+
export { default as Link } from './breadcrumbs-link.svelte';
|
3
|
+
export { default as List } from './breadcrumbs-list.svelte';
|
4
|
+
export { default as Root } from './breadcrumbs-root.svelte';
|
5
|
+
export { default as Separator } from './breadcrumbs-separator.svelte';
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export { default as Item } from './breadcrumbs-item.svelte';
|
2
|
+
export { default as Link } from './breadcrumbs-link.svelte';
|
3
|
+
export { default as List } from './breadcrumbs-list.svelte';
|
4
|
+
export { default as Root } from './breadcrumbs-root.svelte';
|
5
|
+
export { default as Separator } from './breadcrumbs-separator.svelte';
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLiAttributes, HTMLOlAttributes } from 'svelte/elements';
|
2
|
+
export interface LinkProps {
|
3
|
+
href: string;
|
4
|
+
current?: boolean;
|
5
|
+
}
|
6
|
+
export interface CreateBreadcrumbsReturn {
|
7
|
+
getRootProps(): HTMLAttributes<HTMLElement>;
|
8
|
+
getListProps(): HTMLOlAttributes;
|
9
|
+
getItemProps(): HTMLLiAttributes;
|
10
|
+
getLinkProps(props: LinkProps): HTMLAnchorAttributes;
|
11
|
+
getSeparatorProps(): HTMLAttributes<HTMLElement>;
|
12
|
+
}
|
13
|
+
export declare function createBreadcrumbs(): CreateBreadcrumbsReturn;
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { ariaAttr, dataAttr } from '@zag-js/dom-query';
|
2
|
+
import { parts } from './breadcrumbs-anatomy.js';
|
3
|
+
export function createBreadcrumbs() {
|
4
|
+
function getRootProps() {
|
5
|
+
return {
|
6
|
+
role: 'navigation',
|
7
|
+
'aria-label': 'Breadcrumb',
|
8
|
+
...parts.root.attrs,
|
9
|
+
};
|
10
|
+
}
|
11
|
+
function getListProps() {
|
12
|
+
return {
|
13
|
+
role: 'list',
|
14
|
+
...parts.list.attrs,
|
15
|
+
};
|
16
|
+
}
|
17
|
+
function getItemProps() {
|
18
|
+
return {
|
19
|
+
role: 'listitem',
|
20
|
+
...parts.item.attrs,
|
21
|
+
};
|
22
|
+
}
|
23
|
+
function getLinkProps(props) {
|
24
|
+
return {
|
25
|
+
role: 'link',
|
26
|
+
href: props.current ? undefined : props.href,
|
27
|
+
'aria-current': props.current ? 'page' : undefined,
|
28
|
+
'data-current': dataAttr(props.current),
|
29
|
+
'aria-disabled': ariaAttr(props.current),
|
30
|
+
'data-disabled': dataAttr(props.current),
|
31
|
+
...parts.link.attrs,
|
32
|
+
};
|
33
|
+
}
|
34
|
+
function getSeparatorProps() {
|
35
|
+
return {
|
36
|
+
'aria-hidden': true,
|
37
|
+
...parts.separator.attrs,
|
38
|
+
};
|
39
|
+
}
|
40
|
+
return {
|
41
|
+
getRootProps,
|
42
|
+
getListProps,
|
43
|
+
getItemProps,
|
44
|
+
getLinkProps,
|
45
|
+
getSeparatorProps,
|
46
|
+
};
|
47
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export * as Breadcrumbs from './breadcrumbs.js';
|
2
|
+
export type { BreadcrumbsItemProps } from './breadcrumbs-item.svelte';
|
3
|
+
export type { BreadcrumbsLinkProps } from './breadcrumbs-link.svelte';
|
4
|
+
export type { BreadcrumbsListProps } from './breadcrumbs-list.svelte';
|
5
|
+
export type { BreadcrumbsProps } from './breadcrumbs-root.svelte';
|
6
|
+
export type { BreadcrumbsSeparatorProps } from './breadcrumbs-separator.svelte';
|
7
|
+
export { anatomy as breadcrumbsAnatomy } from './breadcrumbs-anatomy.js';
|
8
|
+
export { getBreadcrumbsContext as getBreadcrumbContext } from './breadcrumbs-context.svelte.js';
|