@skeletonlabs/skeleton-svelte 2.0.0-next.7 → 2.0.0-next.8
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/components/dialog/anatomy/backdrop.svelte +30 -0
- package/dist/components/dialog/anatomy/backdrop.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/backdrop.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/close-trigger.svelte +32 -0
- package/dist/components/dialog/anatomy/close-trigger.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/close-trigger.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/content.svelte +32 -0
- package/dist/components/dialog/anatomy/content.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/content.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/description.svelte +32 -0
- package/dist/components/dialog/anatomy/description.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/description.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/positioner.svelte +32 -0
- package/dist/components/dialog/anatomy/positioner.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/positioner.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/root-context.svelte +20 -0
- package/dist/components/dialog/anatomy/root-context.svelte.d.ts +9 -0
- package/dist/components/dialog/anatomy/root-context.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/root-provider.svelte +20 -0
- package/dist/components/dialog/anatomy/root-provider.svelte.d.ts +9 -0
- package/dist/components/dialog/anatomy/root-provider.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/root.svelte +27 -0
- package/dist/components/dialog/anatomy/root.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/root.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/title.svelte +32 -0
- package/dist/components/dialog/anatomy/title.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/title.svelte.d.ts.map +1 -0
- package/dist/components/dialog/anatomy/trigger.svelte +32 -0
- package/dist/components/dialog/anatomy/trigger.svelte.d.ts +8 -0
- package/dist/components/dialog/anatomy/trigger.svelte.d.ts.map +1 -0
- package/dist/components/dialog/index.d.ts +13 -0
- package/dist/components/dialog/index.d.ts.map +1 -0
- package/dist/components/dialog/index.js +2 -0
- package/dist/components/dialog/modules/anatomy.d.ts +12 -0
- package/dist/components/dialog/modules/anatomy.d.ts.map +1 -0
- package/dist/components/dialog/modules/anatomy.js +21 -0
- package/dist/components/dialog/modules/root-context.d.ts +6 -0
- package/dist/components/dialog/modules/root-context.d.ts.map +1 -0
- package/dist/components/dialog/modules/root-context.js +2 -0
- package/dist/components/dialog/modules/use-dialog.svelte.d.ts +4 -0
- package/dist/components/dialog/modules/use-dialog.svelte.d.ts.map +1 -0
- package/dist/components/dialog/modules/use-dialog.svelte.js +7 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogBackdropProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'children'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogBackdropProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getBackdropProps(), rest, {
|
|
21
|
+
class: classesDialog.backdrop,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<div {...attributes}></div>
|
|
30
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogBackdropProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'children'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Backdrop: import("svelte").Component<DialogBackdropProps, {}, "">;
|
|
6
|
+
type Backdrop = ReturnType<typeof Backdrop>;
|
|
7
|
+
export default Backdrop;
|
|
8
|
+
//# sourceMappingURL=backdrop.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"backdrop.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/backdrop.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC;CAAG;AAmC3G,QAAA,MAAM,QAAQ,yDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogCloseTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogCloseTriggerProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getCloseTriggerProps(), rest, {
|
|
21
|
+
class: classesDialog.closeTrigger,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<button {...attributes}>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</button>
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogCloseTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
|
|
4
|
+
}
|
|
5
|
+
declare const CloseTrigger: import("svelte").Component<DialogCloseTriggerProps, {}, "">;
|
|
6
|
+
type CloseTrigger = ReturnType<typeof CloseTrigger>;
|
|
7
|
+
export default CloseTrigger;
|
|
8
|
+
//# sourceMappingURL=close-trigger.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"close-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/close-trigger.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC;CAAG;AAqCzG,QAAA,MAAM,YAAY,6DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogContentProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getContentProps(), rest, {
|
|
21
|
+
class: classesDialog.content,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<div {...attributes}>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</div>
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Content: import("svelte").Component<DialogContentProps, {}, "">;
|
|
6
|
+
type Content = ReturnType<typeof Content>;
|
|
7
|
+
export default Content;
|
|
8
|
+
//# sourceMappingURL=content.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/content.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAAG;AAqC9F,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogDescriptionProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogDescriptionProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getDescriptionProps(), rest, {
|
|
21
|
+
class: classesDialog.description,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<div {...attributes}>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</div>
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogDescriptionProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Description: import("svelte").Component<DialogDescriptionProps, {}, "">;
|
|
6
|
+
type Description = ReturnType<typeof Description>;
|
|
7
|
+
export default Description;
|
|
8
|
+
//# sourceMappingURL=description.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"description.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/description.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAAG;AAqClG,QAAA,MAAM,WAAW,4DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogPositionerProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getPositionerProps(), rest, {
|
|
21
|
+
class: classesDialog.positioner,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<div {...attributes}>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</div>
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Positioner: import("svelte").Component<DialogPositionerProps, {}, "">;
|
|
6
|
+
type Positioner = ReturnType<typeof Positioner>;
|
|
7
|
+
export default Positioner;
|
|
8
|
+
//# sourceMappingURL=positioner.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"positioner.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/positioner.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAAG;AAqCjG,QAAA,MAAM,UAAU,2DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { useDialog } from '../modules/use-dialog.svelte';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
|
|
5
|
+
export interface DialogRootContextProps {
|
|
6
|
+
children: Snippet<[ReturnType<typeof useDialog>]>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
12
|
+
|
|
13
|
+
const props: DialogRootContextProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { children } = $derived(props);
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
{@render children(dialog)}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { useDialog } from '../modules/use-dialog.svelte';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
export interface DialogRootContextProps {
|
|
4
|
+
children: Snippet<[ReturnType<typeof useDialog>]>;
|
|
5
|
+
}
|
|
6
|
+
declare const RootContext: import("svelte").Component<DialogRootContextProps, {}, "">;
|
|
7
|
+
type RootContext = ReturnType<typeof RootContext>;
|
|
8
|
+
export default RootContext;
|
|
9
|
+
//# sourceMappingURL=root-context.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root-context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/root-context.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,sBAAsB;IACtC,QAAQ,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;CAClD;AAqBF,QAAA,MAAM,WAAW,4DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { useDialog } from '../modules/use-dialog.svelte';
|
|
3
|
+
import type { PropsWithChildren } from '../../../internal/props-with-children';
|
|
4
|
+
|
|
5
|
+
export interface DialogRootProviderProps extends PropsWithChildren {
|
|
6
|
+
value: ReturnType<typeof useDialog>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
12
|
+
|
|
13
|
+
const props: DialogRootProviderProps = $props();
|
|
14
|
+
|
|
15
|
+
const { children, value: dialog } = $derived(props);
|
|
16
|
+
|
|
17
|
+
DialogRootContext.provide(() => dialog());
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
{@render children?.()}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { useDialog } from '../modules/use-dialog.svelte';
|
|
2
|
+
import type { PropsWithChildren } from '../../../internal/props-with-children';
|
|
3
|
+
export interface DialogRootProviderProps extends PropsWithChildren {
|
|
4
|
+
value: ReturnType<typeof useDialog>;
|
|
5
|
+
}
|
|
6
|
+
declare const RootProvider: import("svelte").Component<DialogRootProviderProps, {}, "">;
|
|
7
|
+
type RootProvider = ReturnType<typeof RootProvider>;
|
|
8
|
+
export default RootProvider;
|
|
9
|
+
//# sourceMappingURL=root-provider.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root-provider.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/root-provider.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAExE,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IACjE,KAAK,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;CACpC;AAqBF,QAAA,MAAM,YAAY,6DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { PropsWithChildren } from '../../../internal/props-with-children';
|
|
3
|
+
import type { Props } from '@zag-js/dialog';
|
|
4
|
+
|
|
5
|
+
export interface DialogRootProps extends Omit<Props, 'id'>, PropsWithChildren {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { useDialog } from '../modules/use-dialog.svelte';
|
|
11
|
+
import { splitProps } from '@zag-js/dialog';
|
|
12
|
+
|
|
13
|
+
const props: DialogRootProps = $props();
|
|
14
|
+
|
|
15
|
+
const [machineProps, componentProps] = $derived(splitProps(props));
|
|
16
|
+
const { children } = $derived(componentProps);
|
|
17
|
+
|
|
18
|
+
const id = $props.id();
|
|
19
|
+
const dialog = useDialog(() => ({
|
|
20
|
+
id: id,
|
|
21
|
+
...machineProps,
|
|
22
|
+
}));
|
|
23
|
+
|
|
24
|
+
DialogRootContext.provide(() => dialog());
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
{@render children?.()}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { PropsWithChildren } from '../../../internal/props-with-children';
|
|
2
|
+
import type { Props } from '@zag-js/dialog';
|
|
3
|
+
export interface DialogRootProps extends Omit<Props, 'id'>, PropsWithChildren {
|
|
4
|
+
}
|
|
5
|
+
declare const Root: import("svelte").Component<DialogRootProps, {}, "">;
|
|
6
|
+
type Root = ReturnType<typeof Root>;
|
|
7
|
+
export default Root;
|
|
8
|
+
//# sourceMappingURL=root.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/root.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,iBAAiB;CAAG;AAgCjF,QAAA,MAAM,IAAI,qDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogTitleProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getTitleProps(), rest, {
|
|
21
|
+
class: classesDialog.title,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<div {...attributes}>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</div>
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Title: import("svelte").Component<DialogTitleProps, {}, "">;
|
|
6
|
+
type Title = ReturnType<typeof Title>;
|
|
7
|
+
export default Title;
|
|
8
|
+
//# sourceMappingURL=title.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"title.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/title.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAAG;AAqC5F,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
4
|
+
|
|
5
|
+
export interface DialogTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { DialogRootContext } from '../modules/root-context';
|
|
10
|
+
import { classesDialog } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
|
|
13
|
+
const props: DialogTriggerProps = $props();
|
|
14
|
+
|
|
15
|
+
const dialog = DialogRootContext.consume();
|
|
16
|
+
|
|
17
|
+
const { element, children, ...rest } = $derived(props);
|
|
18
|
+
|
|
19
|
+
const attributes = $derived(
|
|
20
|
+
mergeProps(dialog().getTriggerProps(), rest, {
|
|
21
|
+
class: classesDialog.trigger,
|
|
22
|
+
}),
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if element}
|
|
27
|
+
{@render element(attributes)}
|
|
28
|
+
{:else}
|
|
29
|
+
<button {...attributes}>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</button>
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from '../../../internal/html-attributes';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element';
|
|
3
|
+
export interface DialogTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
|
|
4
|
+
}
|
|
5
|
+
declare const Trigger: import("svelte").Component<DialogTriggerProps, {}, "">;
|
|
6
|
+
type Trigger = ReturnType<typeof Trigger>;
|
|
7
|
+
export default Trigger;
|
|
8
|
+
//# sourceMappingURL=trigger.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/anatomy/trigger.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC;CAAG;AAqCpG,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type { DialogBackdropProps } from './anatomy/backdrop.svelte';
|
|
2
|
+
export type { DialogCloseTriggerProps } from './anatomy/close-trigger.svelte';
|
|
3
|
+
export type { DialogContentProps } from './anatomy/content.svelte';
|
|
4
|
+
export type { DialogDescriptionProps } from './anatomy/description.svelte';
|
|
5
|
+
export type { DialogPositionerProps } from './anatomy/positioner.svelte';
|
|
6
|
+
export type { DialogRootProps } from './anatomy/root.svelte';
|
|
7
|
+
export type { DialogRootContextProps } from './anatomy/root-context.svelte';
|
|
8
|
+
export type { DialogRootProviderProps } from './anatomy/root-provider.svelte';
|
|
9
|
+
export type { DialogTitleProps } from './anatomy/title.svelte';
|
|
10
|
+
export type { DialogTriggerProps } from './anatomy/trigger.svelte';
|
|
11
|
+
export { Dialog } from './modules/anatomy';
|
|
12
|
+
export { useDialog } from './modules/use-dialog.svelte';
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAC3E,YAAY,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,YAAY,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const Dialog: import("svelte").Component<import("..").DialogRootProps, {}, ""> & {
|
|
2
|
+
Provider: import("svelte").Component<import("..").DialogRootProviderProps, {}, "">;
|
|
3
|
+
Context: import("svelte").Component<import("..").DialogRootContextProps, {}, "">;
|
|
4
|
+
Trigger: import("svelte").Component<import("..").DialogTriggerProps, {}, "">;
|
|
5
|
+
Backdrop: import("svelte").Component<import("..").DialogBackdropProps, {}, "">;
|
|
6
|
+
Positioner: import("svelte").Component<import("..").DialogPositionerProps, {}, "">;
|
|
7
|
+
Content: import("svelte").Component<import("..").DialogContentProps, {}, "">;
|
|
8
|
+
Title: import("svelte").Component<import("..").DialogTitleProps, {}, "">;
|
|
9
|
+
Description: import("svelte").Component<import("..").DialogDescriptionProps, {}, "">;
|
|
10
|
+
CloseTrigger: import("svelte").Component<import("..").DialogCloseTriggerProps, {}, "">;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=anatomy.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"anatomy.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/modules/anatomy.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM;;;;;;;;;;CAUjB,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import Backdrop from '../anatomy/backdrop.svelte';
|
|
2
|
+
import CloseTrigger from '../anatomy/close-trigger.svelte';
|
|
3
|
+
import Content from '../anatomy/content.svelte';
|
|
4
|
+
import Description from '../anatomy/description.svelte';
|
|
5
|
+
import Positioner from '../anatomy/positioner.svelte';
|
|
6
|
+
import RootContext from '../anatomy/root-context.svelte';
|
|
7
|
+
import RootProvider from '../anatomy/root-provider.svelte';
|
|
8
|
+
import Root from '../anatomy/root.svelte';
|
|
9
|
+
import Title from '../anatomy/title.svelte';
|
|
10
|
+
import Trigger from '../anatomy/trigger.svelte';
|
|
11
|
+
export const Dialog = Object.assign(Root, {
|
|
12
|
+
Provider: RootProvider,
|
|
13
|
+
Context: RootContext,
|
|
14
|
+
Trigger: Trigger,
|
|
15
|
+
Backdrop: Backdrop,
|
|
16
|
+
Positioner: Positioner,
|
|
17
|
+
Content: Content,
|
|
18
|
+
Title: Title,
|
|
19
|
+
Description: Description,
|
|
20
|
+
CloseTrigger: CloseTrigger,
|
|
21
|
+
});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const DialogRootContext: {
|
|
2
|
+
key: symbol;
|
|
3
|
+
consume(): () => import("@zag-js/dialog").Api<import("@zag-js/svelte").PropTypes>;
|
|
4
|
+
provide(value: () => import("@zag-js/dialog").Api<import("@zag-js/svelte").PropTypes>): () => import("@zag-js/dialog").Api<import("@zag-js/svelte").PropTypes>;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=root-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"root-context.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/modules/root-context.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;CAAgD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/modules/use-dialog.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAoB,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE5E,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,GAAG,MAAM,GAAG,CAAC,SAAS,CAAC,CAI5E"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { connect, machine } from '@zag-js/dialog';
|
|
2
|
+
import { normalizeProps, useMachine } from '@zag-js/svelte';
|
|
3
|
+
export function useDialog(props) {
|
|
4
|
+
const service = useMachine(machine, props);
|
|
5
|
+
const dialog = $derived(connect(service, normalizeProps));
|
|
6
|
+
return () => dialog;
|
|
7
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './components/accordion/index';
|
|
2
2
|
export * from './components/avatar/index';
|
|
3
|
+
export * from './components/dialog/index';
|
|
3
4
|
export * from './components/file-upload/index';
|
|
4
5
|
export * from './components/popover/index';
|
|
5
6
|
export * from './components/progress-linear/index';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './components/accordion/index';
|
|
2
2
|
export * from './components/avatar/index';
|
|
3
|
+
export * from './components/dialog/index';
|
|
3
4
|
export * from './components/file-upload/index';
|
|
4
5
|
export * from './components/popover/index';
|
|
5
6
|
export * from './components/progress-linear/index';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonlabs/skeleton-svelte",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.8",
|
|
4
4
|
"description": "The Svelte package for Skeleton.",
|
|
5
5
|
"author": "endigo9740 <chris@skeletonlabs.dev>",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -27,9 +27,10 @@
|
|
|
27
27
|
"@zag-js/svelte": "1.24.1",
|
|
28
28
|
"@zag-js/switch": "1.24.1",
|
|
29
29
|
"@zag-js/tabs": "1.24.1",
|
|
30
|
+
"@zag-js/tags-input": "1.24.1",
|
|
30
31
|
"@zag-js/toast": "1.24.1",
|
|
31
32
|
"@zag-js/tooltip": "1.24.1",
|
|
32
|
-
"@skeletonlabs/skeleton-common": "1.0.0-next.
|
|
33
|
+
"@skeletonlabs/skeleton-common": "1.0.0-next.7"
|
|
33
34
|
},
|
|
34
35
|
"peerDependencies": {
|
|
35
36
|
"svelte": "^5.29.0"
|
|
@@ -40,7 +41,6 @@
|
|
|
40
41
|
"@sveltejs/vite-plugin-svelte": "6.1.3",
|
|
41
42
|
"@testing-library/jest-dom": "6.8.0",
|
|
42
43
|
"@testing-library/svelte": "5.2.8",
|
|
43
|
-
"@zag-js/tags-input": "1.24.1",
|
|
44
44
|
"jsdom": "26.1.0",
|
|
45
45
|
"publint": "0.3.12",
|
|
46
46
|
"svelte": "5.38.6",
|