@skeletonlabs/skeleton-svelte 1.6.0-next.0 → 2.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{composed → components}/accordion/anatomy/accordion-content.svelte +9 -2
- package/dist/components/accordion/anatomy/accordion-content.svelte.d.ts +7 -0
- package/dist/{composed → components}/accordion/anatomy/accordion-heading.svelte +14 -1
- package/dist/components/accordion/anatomy/accordion-heading.svelte.d.ts +13 -0
- package/dist/{composed → components}/accordion/anatomy/accordion-indicator.svelte +9 -2
- package/dist/components/accordion/anatomy/accordion-indicator.svelte.d.ts +7 -0
- package/dist/components/accordion/anatomy/accordion-item-context.svelte +17 -0
- package/dist/components/accordion/anatomy/accordion-item-context.svelte.d.ts +9 -0
- package/dist/components/accordion/anatomy/accordion-item.svelte +45 -0
- package/dist/components/accordion/anatomy/accordion-item.svelte.d.ts +8 -0
- package/dist/components/accordion/anatomy/accordion-root-context.svelte +17 -0
- package/dist/components/accordion/anatomy/accordion-root-context.svelte.d.ts +9 -0
- package/dist/components/accordion/anatomy/accordion-root.svelte +49 -0
- package/dist/components/accordion/anatomy/accordion-root.svelte.d.ts +8 -0
- package/dist/{composed → components}/accordion/anatomy/accordion-trigger.svelte +9 -2
- package/dist/components/accordion/anatomy/accordion-trigger.svelte.d.ts +7 -0
- package/dist/components/accordion/index.d.ts +11 -0
- package/dist/components/accordion/index.js +1 -0
- package/dist/components/accordion/modules/accordion-anatomy.d.ts +9 -0
- package/dist/{composed/accordion/modules/anatomy.js → components/accordion/modules/accordion-anatomy.js} +5 -2
- package/dist/components/accordion/modules/accordion-item-context.d.ts +10 -0
- package/dist/components/accordion/modules/accordion-item-context.js +2 -0
- package/dist/components/accordion/modules/accordion-root-context.d.ts +9 -0
- package/dist/components/accordion/modules/accordion-root-context.js +2 -0
- package/dist/{composed → components}/avatar/anatomy/avatar-fallback.svelte +8 -2
- package/dist/components/avatar/anatomy/avatar-fallback.svelte.d.ts +7 -0
- package/dist/{composed → components}/avatar/anatomy/avatar-image.svelte +8 -2
- package/dist/components/avatar/anatomy/avatar-image.svelte.d.ts +7 -0
- package/dist/components/avatar/anatomy/avatar-root-context.svelte +17 -0
- package/dist/components/avatar/anatomy/avatar-root-context.svelte.d.ts +9 -0
- package/dist/{composed → components}/avatar/anatomy/avatar-root.svelte +13 -6
- package/dist/components/avatar/anatomy/avatar-root.svelte.d.ts +8 -0
- package/dist/components/avatar/index.d.ts +6 -0
- package/dist/components/avatar/index.js +1 -0
- package/dist/components/avatar/modules/avatar-anatomy.d.ts +5 -0
- package/dist/{composed/avatar/modules/anatomy.js → components/avatar/modules/avatar-anatomy.js} +3 -2
- package/dist/components/avatar/modules/avatar-root-context.d.ts +9 -0
- package/dist/components/avatar/modules/avatar-root-context.js +2 -0
- package/dist/components/rating-group/anatomy/rating-group-control.svelte +31 -0
- package/dist/components/rating-group/anatomy/rating-group-control.svelte.d.ts +7 -0
- package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte +33 -0
- package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte.d.ts +7 -0
- package/dist/components/rating-group/anatomy/rating-group-item-context.svelte +17 -0
- package/dist/components/rating-group/anatomy/rating-group-item-context.svelte.d.ts +9 -0
- package/dist/components/rating-group/anatomy/rating-group-item.svelte +89 -0
- package/dist/components/rating-group/anatomy/rating-group-item.svelte.d.ts +27 -0
- package/dist/components/rating-group/anatomy/rating-group-label.svelte +31 -0
- package/dist/components/rating-group/anatomy/rating-group-label.svelte.d.ts +7 -0
- package/dist/components/rating-group/anatomy/rating-group-root-context.svelte +17 -0
- package/dist/components/rating-group/anatomy/rating-group-root-context.svelte.d.ts +9 -0
- package/dist/components/rating-group/anatomy/rating-group-root.svelte +52 -0
- package/dist/components/rating-group/anatomy/rating-group-root.svelte.d.ts +8 -0
- package/dist/components/rating-group/index.d.ts +10 -0
- package/dist/components/rating-group/index.js +1 -0
- package/dist/components/rating-group/modules/rating-group-anatomy.d.ts +8 -0
- package/dist/components/rating-group/modules/rating-group-anatomy.js +15 -0
- package/dist/components/rating-group/modules/rating-group-item-context.d.ts +9 -0
- package/dist/components/rating-group/modules/rating-group-item-context.js +2 -0
- package/dist/components/rating-group/modules/rating-group-root-context.d.ts +9 -0
- package/dist/components/rating-group/modules/rating-group-root-context.js +2 -0
- package/dist/components/tabs/anatomy/tabs-content.svelte +36 -0
- package/dist/components/tabs/anatomy/tabs-content.svelte.d.ts +8 -0
- package/dist/components/tabs/anatomy/tabs-indicator.svelte +31 -0
- package/dist/components/tabs/anatomy/tabs-indicator.svelte.d.ts +7 -0
- package/dist/components/tabs/anatomy/tabs-list.svelte +33 -0
- package/dist/components/tabs/anatomy/tabs-list.svelte.d.ts +7 -0
- package/dist/components/tabs/anatomy/tabs-root-context.svelte +17 -0
- package/dist/components/tabs/anatomy/tabs-root-context.svelte.d.ts +9 -0
- package/dist/components/tabs/anatomy/tabs-root.svelte +49 -0
- package/dist/components/tabs/anatomy/tabs-root.svelte.d.ts +8 -0
- package/dist/components/tabs/anatomy/tabs-trigger.svelte +36 -0
- package/dist/components/tabs/anatomy/tabs-trigger.svelte.d.ts +8 -0
- package/dist/components/tabs/index.d.ts +1 -0
- package/dist/components/tabs/index.js +1 -0
- package/dist/components/tabs/modules/tabs-anatomy.d.ts +7 -0
- package/dist/components/tabs/modules/tabs-anatomy.js +13 -0
- package/dist/components/tabs/modules/tabs-root-context.d.ts +9 -0
- package/dist/components/tabs/modules/tabs-root-context.js +2 -0
- package/dist/index.css +2 -0
- package/dist/index.d.ts +4 -21
- package/dist/index.js +4 -29
- package/dist/internal/components/star-empty.svelte +12 -0
- package/dist/internal/components/star-empty.svelte.d.ts +26 -0
- package/dist/internal/components/star-full.svelte +12 -0
- package/dist/internal/components/star-full.svelte.d.ts +26 -0
- package/dist/internal/components/star-half.svelte +19 -0
- package/dist/internal/components/star-half.svelte.d.ts +26 -0
- package/dist/internal/create-context.d.ts +5 -6
- package/dist/internal/create-context.js +10 -9
- package/dist/internal/props-with-element.d.ts +3 -0
- package/package.json +30 -39
- package/dist/components/Accordion/Accordion.svelte +0 -55
- package/dist/components/Accordion/Accordion.svelte.d.ts +0 -5
- package/dist/components/Accordion/AccordionItem.svelte +0 -90
- package/dist/components/Accordion/AccordionItem.svelte.d.ts +0 -5
- package/dist/components/Accordion/context.d.ts +0 -2
- package/dist/components/Accordion/context.js +0 -3
- package/dist/components/Accordion/index.d.ts +0 -4
- package/dist/components/Accordion/index.js +0 -3
- package/dist/components/Accordion/types.d.ts +0 -74
- package/dist/components/Accordion/types.js +0 -1
- package/dist/components/AppBar/AppBar.svelte +0 -72
- package/dist/components/AppBar/AppBar.svelte.d.ts +0 -5
- package/dist/components/AppBar/types.d.ts +0 -61
- package/dist/components/AppBar/types.js +0 -1
- package/dist/components/Avatar/Avatar.svelte +0 -68
- package/dist/components/Avatar/Avatar.svelte.d.ts +0 -5
- package/dist/components/Avatar/types.d.ts +0 -39
- package/dist/components/Avatar/types.js +0 -1
- package/dist/components/Combobox/Combobox.svelte +0 -154
- package/dist/components/Combobox/Combobox.svelte.d.ts +0 -18
- package/dist/components/Combobox/types.d.ts +0 -66
- package/dist/components/Combobox/types.js +0 -1
- package/dist/components/FileUpload/FileUpload.svelte +0 -132
- package/dist/components/FileUpload/FileUpload.svelte.d.ts +0 -5
- package/dist/components/FileUpload/types.d.ts +0 -74
- package/dist/components/FileUpload/types.js +0 -1
- package/dist/components/Modal/Modal.svelte +0 -87
- package/dist/components/Modal/Modal.svelte.d.ts +0 -4
- package/dist/components/Modal/types.d.ts +0 -58
- package/dist/components/Modal/types.js +0 -1
- package/dist/components/Navigation/NavBar.svelte +0 -48
- package/dist/components/Navigation/NavBar.svelte.d.ts +0 -5
- package/dist/components/Navigation/NavRail.svelte +0 -90
- package/dist/components/Navigation/NavRail.svelte.d.ts +0 -5
- package/dist/components/Navigation/NavTile.svelte +0 -87
- package/dist/components/Navigation/NavTile.svelte.d.ts +0 -5
- package/dist/components/Navigation/context.d.ts +0 -2
- package/dist/components/Navigation/context.js +0 -6
- package/dist/components/Navigation/index.d.ts +0 -6
- package/dist/components/Navigation/index.js +0 -4
- package/dist/components/Navigation/types.d.ts +0 -132
- package/dist/components/Navigation/types.js +0 -1
- package/dist/components/Pagination/Pagination.svelte +0 -146
- package/dist/components/Pagination/Pagination.svelte.d.ts +0 -4
- package/dist/components/Pagination/types.d.ts +0 -56
- package/dist/components/Pagination/types.js +0 -1
- package/dist/components/Popover/Popover.svelte +0 -74
- package/dist/components/Popover/Popover.svelte.d.ts +0 -4
- package/dist/components/Popover/types.d.ts +0 -45
- package/dist/components/Popover/types.js +0 -1
- package/dist/components/Progress/Progress.svelte +0 -63
- package/dist/components/Progress/Progress.svelte.d.ts +0 -5
- package/dist/components/Progress/types.d.ts +0 -44
- package/dist/components/Progress/types.js +0 -1
- package/dist/components/ProgressRing/ProgressRing.svelte +0 -98
- package/dist/components/ProgressRing/ProgressRing.svelte.d.ts +0 -5
- package/dist/components/ProgressRing/types.d.ts +0 -56
- package/dist/components/ProgressRing/types.js +0 -1
- package/dist/components/Rating/Rating.svelte +0 -135
- package/dist/components/Rating/Rating.svelte.d.ts +0 -5
- package/dist/components/Rating/index.d.ts +0 -2
- package/dist/components/Rating/index.js +0 -2
- package/dist/components/Rating/types.d.ts +0 -36
- package/dist/components/Rating/types.js +0 -1
- package/dist/components/Segment/Segment.svelte +0 -77
- package/dist/components/Segment/Segment.svelte.d.ts +0 -5
- package/dist/components/Segment/SegmentItem.svelte +0 -40
- package/dist/components/Segment/SegmentItem.svelte.d.ts +0 -5
- package/dist/components/Segment/context.d.ts +0 -2
- package/dist/components/Segment/context.js +0 -6
- package/dist/components/Segment/index.d.ts +0 -4
- package/dist/components/Segment/index.js +0 -3
- package/dist/components/Segment/types.d.ts +0 -64
- package/dist/components/Segment/types.js +0 -1
- package/dist/components/Slider/Slider.svelte +0 -105
- package/dist/components/Slider/Slider.svelte.d.ts +0 -4
- package/dist/components/Slider/types.d.ts +0 -68
- package/dist/components/Slider/types.js +0 -1
- package/dist/components/Switch/Switch.svelte +0 -102
- package/dist/components/Switch/Switch.svelte.d.ts +0 -5
- package/dist/components/Switch/types.d.ts +0 -64
- package/dist/components/Switch/types.js +0 -1
- package/dist/components/Tabs/Tabs.svelte +0 -59
- package/dist/components/Tabs/Tabs.svelte.d.ts +0 -5
- package/dist/components/Tabs/TabsControl.svelte +0 -51
- package/dist/components/Tabs/TabsControl.svelte.d.ts +0 -5
- package/dist/components/Tabs/TabsPanel.svelte +0 -23
- package/dist/components/Tabs/TabsPanel.svelte.d.ts +0 -5
- package/dist/components/Tabs/context.d.ts +0 -2
- package/dist/components/Tabs/context.js +0 -6
- package/dist/components/Tabs/index.d.ts +0 -5
- package/dist/components/Tabs/index.js +0 -4
- package/dist/components/Tabs/types.d.ts +0 -68
- package/dist/components/Tabs/types.js +0 -1
- package/dist/components/TagsInput/TagsInput.svelte +0 -96
- package/dist/components/TagsInput/TagsInput.svelte.d.ts +0 -5
- package/dist/components/TagsInput/types.d.ts +0 -40
- package/dist/components/TagsInput/types.js +0 -1
- package/dist/components/Toast/Toast.svelte +0 -76
- package/dist/components/Toast/Toast.svelte.d.ts +0 -4
- package/dist/components/Toast/Toaster.svelte +0 -72
- package/dist/components/Toast/Toaster.svelte.d.ts +0 -4
- package/dist/components/Toast/create-toaster.d.ts +0 -2
- package/dist/components/Toast/create-toaster.js +0 -4
- package/dist/components/Toast/types.d.ts +0 -47
- package/dist/components/Toast/types.js +0 -1
- package/dist/components/Tooltip/Tooltip.svelte +0 -78
- package/dist/components/Tooltip/Tooltip.svelte.d.ts +0 -4
- package/dist/components/Tooltip/types.d.ts +0 -47
- package/dist/components/Tooltip/types.js +0 -1
- package/dist/composed/accordion/anatomy/accordion-content.svelte.d.ts +0 -4
- package/dist/composed/accordion/anatomy/accordion-heading.svelte.d.ts +0 -4
- package/dist/composed/accordion/anatomy/accordion-indicator.svelte.d.ts +0 -4
- package/dist/composed/accordion/anatomy/accordion-item.svelte +0 -34
- package/dist/composed/accordion/anatomy/accordion-item.svelte.d.ts +0 -4
- package/dist/composed/accordion/anatomy/accordion-root.svelte +0 -39
- package/dist/composed/accordion/anatomy/accordion-root.svelte.d.ts +0 -4
- package/dist/composed/accordion/anatomy/accordion-trigger.svelte.d.ts +0 -4
- package/dist/composed/accordion/index.d.ts +0 -2
- package/dist/composed/accordion/index.js +0 -2
- package/dist/composed/accordion/modules/anatomy.d.ts +0 -8
- package/dist/composed/accordion/modules/context.d.ts +0 -12
- package/dist/composed/accordion/modules/context.js +0 -4
- package/dist/composed/accordion/modules/types.d.ts +0 -29
- package/dist/composed/accordion/modules/types.js +0 -1
- package/dist/composed/avatar/anatomy/avatar-fallback.svelte.d.ts +0 -4
- package/dist/composed/avatar/anatomy/avatar-image.svelte.d.ts +0 -4
- package/dist/composed/avatar/anatomy/avatar-root.svelte.d.ts +0 -4
- package/dist/composed/avatar/index.d.ts +0 -2
- package/dist/composed/avatar/index.js +0 -2
- package/dist/composed/avatar/modules/anatomy.d.ts +0 -5
- package/dist/composed/avatar/modules/context.d.ts +0 -7
- package/dist/composed/avatar/modules/context.js +0 -3
- package/dist/composed/avatar/modules/types.d.ts +0 -14
- package/dist/composed/avatar/modules/types.js +0 -1
- package/dist/composed/index.d.ts +0 -2
- package/dist/composed/index.js +0 -2
- package/dist/internal/create-context-new.d.ts +0 -5
- package/dist/internal/create-context-new.js +0 -13
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
|
|
5
|
+
export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
1
8
|
<script lang="ts">
|
|
2
9
|
import { mergeProps } from '@zag-js/svelte';
|
|
3
|
-
import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
|
|
4
10
|
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
5
|
-
import
|
|
11
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
12
|
+
import { AccordionItemContext } from '../modules/accordion-item-context.js';
|
|
6
13
|
|
|
7
14
|
const rootContext = AccordionRootContext.consume();
|
|
8
15
|
const itemContext = AccordionItemContext.consume();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
}
|
|
5
|
+
declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "">;
|
|
6
|
+
type AccordionContent = ReturnType<typeof AccordionContent>;
|
|
7
|
+
export default AccordionContent;
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
|
|
5
|
+
export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
|
|
6
|
+
/**
|
|
7
|
+
* The level of the heading. This is used to determine the heading level for accessibility purposes.
|
|
8
|
+
*
|
|
9
|
+
* @default 3
|
|
10
|
+
*/
|
|
11
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
|
|
1
15
|
<script lang="ts">
|
|
2
16
|
import { mergeProps } from '@zag-js/svelte';
|
|
3
17
|
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
4
|
-
import type { AccordionHeadingProps } from '../modules/types.js';
|
|
5
18
|
|
|
6
19
|
const props: AccordionHeadingProps = $props();
|
|
7
20
|
const { level = 3, element, children, ...restAttributes } = $derived(props);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
|
|
4
|
+
/**
|
|
5
|
+
* The level of the heading. This is used to determine the heading level for accessibility purposes.
|
|
6
|
+
*
|
|
7
|
+
* @default 3
|
|
8
|
+
*/
|
|
9
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
10
|
+
}
|
|
11
|
+
declare const AccordionHeading: import("svelte").Component<AccordionHeadingProps, {}, "">;
|
|
12
|
+
type AccordionHeading = ReturnType<typeof AccordionHeading>;
|
|
13
|
+
export default AccordionHeading;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
1
8
|
<script lang="ts">
|
|
2
9
|
import { mergeProps } from '@zag-js/svelte';
|
|
3
10
|
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
4
|
-
import { AccordionRootContext
|
|
5
|
-
import
|
|
11
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
12
|
+
import { AccordionItemContext } from '../modules/accordion-item-context.js';
|
|
6
13
|
|
|
7
14
|
const rootContext = AccordionRootContext.consume();
|
|
8
15
|
const itemContext = AccordionItemContext.consume();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
}
|
|
5
|
+
declare const AccordionIndicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
|
|
6
|
+
type AccordionIndicator = ReturnType<typeof AccordionIndicator>;
|
|
7
|
+
export default AccordionIndicator;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { AccordionItemContextType } from '../modules/accordion-item-context.js';
|
|
4
|
+
|
|
5
|
+
export interface AccordionItemContextProps {
|
|
6
|
+
children: Snippet<[AccordionItemContextType]>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { AccordionItemContext } from '../modules/accordion-item-context.js';
|
|
12
|
+
|
|
13
|
+
const props: AccordionItemContextProps = $props();
|
|
14
|
+
const itemContext = AccordionItemContext.consume();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{@render props.children(itemContext)}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { AccordionItemContextType } from '../modules/accordion-item-context.js';
|
|
3
|
+
export interface AccordionItemContextProps {
|
|
4
|
+
children: Snippet<[AccordionItemContextType]>;
|
|
5
|
+
}
|
|
6
|
+
import { AccordionItemContext } from '../modules/accordion-item-context.js';
|
|
7
|
+
declare const AccordionItemContext: import("svelte").Component<AccordionItemContextProps, {}, "">;
|
|
8
|
+
type AccordionItemContext = ReturnType<typeof AccordionItemContext>;
|
|
9
|
+
export default AccordionItemContext;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
import type { ItemProps } from '@zag-js/accordion';
|
|
5
|
+
|
|
6
|
+
export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
11
|
+
import { splitItemProps } from '@zag-js/accordion';
|
|
12
|
+
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
13
|
+
import { AccordionItemContext } from '../modules/accordion-item-context.js';
|
|
14
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
15
|
+
|
|
16
|
+
const rootContext = AccordionRootContext.consume();
|
|
17
|
+
const props: AccordionItemProps = $props();
|
|
18
|
+
const [itemProps, componentProps] = $derived(splitItemProps(props));
|
|
19
|
+
const { element, children, ...restAttributes } = $derived(componentProps);
|
|
20
|
+
const attributes = $derived(
|
|
21
|
+
mergeProps(
|
|
22
|
+
rootContext.api.getItemProps(itemProps),
|
|
23
|
+
{
|
|
24
|
+
class: classesAccordion.item
|
|
25
|
+
},
|
|
26
|
+
restAttributes
|
|
27
|
+
)
|
|
28
|
+
);
|
|
29
|
+
AccordionItemContext.provide({
|
|
30
|
+
get itemProps() {
|
|
31
|
+
return itemProps;
|
|
32
|
+
},
|
|
33
|
+
get itemState() {
|
|
34
|
+
return rootContext.api.getItemState(itemProps);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
{#if element}
|
|
40
|
+
{@render element({ attributes })}
|
|
41
|
+
{:else}
|
|
42
|
+
<div {...attributes}>
|
|
43
|
+
{@render children?.()}
|
|
44
|
+
</div>
|
|
45
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
import type { ItemProps } from '@zag-js/accordion';
|
|
4
|
+
export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
}
|
|
6
|
+
declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
|
|
7
|
+
type AccordionItem = ReturnType<typeof AccordionItem>;
|
|
8
|
+
export default AccordionItem;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { AccordionRootContextType } from '../modules/accordion-root-context.js';
|
|
4
|
+
|
|
5
|
+
export interface AccordionRootContextProps {
|
|
6
|
+
children: Snippet<[AccordionRootContextType]>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
12
|
+
|
|
13
|
+
const props: AccordionRootContextProps = $props();
|
|
14
|
+
const rootContext = AccordionRootContext.consume();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{@render props.children(rootContext)}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { AccordionRootContextType } from '../modules/accordion-root-context.js';
|
|
3
|
+
export interface AccordionRootContextProps {
|
|
4
|
+
children: Snippet<[AccordionRootContextType]>;
|
|
5
|
+
}
|
|
6
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
7
|
+
declare const AccordionRootContext: import("svelte").Component<AccordionRootContextProps, {}, "">;
|
|
8
|
+
type AccordionRootContext = ReturnType<typeof AccordionRootContext>;
|
|
9
|
+
export default AccordionRootContext;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Props } from '@zag-js/accordion';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
5
|
+
|
|
6
|
+
export interface AccordionRootProps
|
|
7
|
+
extends PropsWithElement,
|
|
8
|
+
Omit<Props, 'id'>,
|
|
9
|
+
Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<script lang="ts">
|
|
13
|
+
import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
|
|
14
|
+
import { machine, connect, splitProps } from '@zag-js/accordion';
|
|
15
|
+
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
16
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
17
|
+
|
|
18
|
+
const props: AccordionRootProps = $props();
|
|
19
|
+
const [machineProps, componentProps] = $derived(splitProps(props));
|
|
20
|
+
const { element, children, ...restAttributes } = $derived(componentProps);
|
|
21
|
+
const id = $props.id();
|
|
22
|
+
const service = useMachine(machine, () => ({
|
|
23
|
+
id: id,
|
|
24
|
+
...machineProps
|
|
25
|
+
}));
|
|
26
|
+
const api = $derived(connect(service, normalizeProps));
|
|
27
|
+
const attributes = $derived(
|
|
28
|
+
mergeProps(
|
|
29
|
+
api.getRootProps(),
|
|
30
|
+
{
|
|
31
|
+
class: classesAccordion.root
|
|
32
|
+
},
|
|
33
|
+
restAttributes
|
|
34
|
+
)
|
|
35
|
+
);
|
|
36
|
+
AccordionRootContext.provide({
|
|
37
|
+
get api() {
|
|
38
|
+
return api;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
{#if element}
|
|
44
|
+
{@render element({ attributes })}
|
|
45
|
+
{:else}
|
|
46
|
+
<div {...attributes}>
|
|
47
|
+
{@render children?.()}
|
|
48
|
+
</div>
|
|
49
|
+
{/if}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Props } from '@zag-js/accordion';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
export interface AccordionRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
|
|
5
|
+
}
|
|
6
|
+
declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "">;
|
|
7
|
+
type AccordionRoot = ReturnType<typeof AccordionRoot>;
|
|
8
|
+
export default AccordionRoot;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
|
|
5
|
+
export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
1
8
|
<script lang="ts">
|
|
2
9
|
import { mergeProps } from '@zag-js/svelte';
|
|
3
|
-
import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
|
|
4
10
|
import { classesAccordion } from '@skeletonlabs/skeleton-common';
|
|
5
|
-
import
|
|
11
|
+
import { AccordionItemContext } from '../modules/accordion-item-context.js';
|
|
12
|
+
import { AccordionRootContext } from '../modules/accordion-root-context.js';
|
|
6
13
|
|
|
7
14
|
const rootContext = AccordionRootContext.consume();
|
|
8
15
|
const itemContext = AccordionItemContext.consume();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {
|
|
4
|
+
}
|
|
5
|
+
declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
|
|
6
|
+
type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
|
|
7
|
+
export default AccordionTrigger;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { Accordion } from './modules/accordion-anatomy';
|
|
2
|
+
export type { AccordionRootProps } from './anatomy/accordion-root.svelte';
|
|
3
|
+
export type { AccordionRootContextProps } from './anatomy/accordion-root-context.svelte';
|
|
4
|
+
export type { AccordionItemProps } from './anatomy/accordion-item.svelte';
|
|
5
|
+
export type { AccordionItemContextProps } from './anatomy/accordion-item-context.svelte';
|
|
6
|
+
export type { AccordionHeadingProps } from './anatomy/accordion-heading.svelte';
|
|
7
|
+
export type { AccordionTriggerProps } from './anatomy/accordion-trigger.svelte';
|
|
8
|
+
export type { AccordionIndicatorProps } from './anatomy/accordion-indicator.svelte';
|
|
9
|
+
export type { AccordionContentProps } from './anatomy/accordion-content.svelte';
|
|
10
|
+
export type { AccordionRootContextType as AccordionRootContext } from './modules/accordion-root-context.js';
|
|
11
|
+
export type { AccordionItemContextType as AccordionItemContext } from './modules/accordion-item-context.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Accordion } from './modules/accordion-anatomy';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const Accordion: import("svelte").Component<import("../anatomy/accordion-root.svelte").AccordionRootProps, {}, ""> & {
|
|
2
|
+
Context: import("svelte").Component<import("../anatomy/accordion-root-context.svelte").AccordionRootContextProps, {}, "">;
|
|
3
|
+
Item: import("svelte").Component<import("../anatomy/accordion-item.svelte").AccordionItemProps, {}, "">;
|
|
4
|
+
ItemContext: import("svelte").Component<import("../anatomy/accordion-item-context.svelte").AccordionItemContextProps, {}, "">;
|
|
5
|
+
Heading: import("svelte").Component<import("../anatomy/accordion-heading.svelte").AccordionHeadingProps, {}, "">;
|
|
6
|
+
Trigger: import("svelte").Component<import("../anatomy/accordion-trigger.svelte").AccordionTriggerProps, {}, "">;
|
|
7
|
+
Indicator: import("svelte").Component<import("../anatomy/accordion-indicator.svelte").AccordionIndicatorProps, {}, "">;
|
|
8
|
+
Content: import("svelte").Component<import("../anatomy/accordion-content.svelte").AccordionContentProps, {}, "">;
|
|
9
|
+
};
|
|
@@ -4,11 +4,14 @@ import AccordionHeading from '../anatomy/accordion-heading.svelte';
|
|
|
4
4
|
import AccordionTrigger from '../anatomy/accordion-trigger.svelte';
|
|
5
5
|
import AccordionIndicator from '../anatomy/accordion-indicator.svelte';
|
|
6
6
|
import AccordionContent from '../anatomy/accordion-content.svelte';
|
|
7
|
-
|
|
7
|
+
import AccordionRootContext from '../anatomy/accordion-root-context.svelte';
|
|
8
|
+
import AccordionItemContext from '../anatomy/accordion-item-context.svelte';
|
|
9
|
+
export const Accordion = Object.assign(AccordionRoot, {
|
|
10
|
+
Context: AccordionRootContext,
|
|
8
11
|
Item: AccordionItem,
|
|
12
|
+
ItemContext: AccordionItemContext,
|
|
9
13
|
Heading: AccordionHeading,
|
|
10
14
|
Trigger: AccordionTrigger,
|
|
11
15
|
Indicator: AccordionIndicator,
|
|
12
16
|
Content: AccordionContent
|
|
13
17
|
});
|
|
14
|
-
export { Accordion };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ItemProps, ItemState } from '@zag-js/accordion';
|
|
2
|
+
export interface AccordionItemContextType {
|
|
3
|
+
itemProps: ItemProps;
|
|
4
|
+
itemState: ItemState;
|
|
5
|
+
}
|
|
6
|
+
export declare const AccordionItemContext: {
|
|
7
|
+
key: symbol;
|
|
8
|
+
consume(): AccordionItemContextType;
|
|
9
|
+
provide(value: AccordionItemContextType): AccordionItemContextType;
|
|
10
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Api } from '@zag-js/accordion';
|
|
2
|
+
export interface AccordionRootContextType {
|
|
3
|
+
api: Api;
|
|
4
|
+
}
|
|
5
|
+
export declare const AccordionRootContext: {
|
|
6
|
+
key: symbol;
|
|
7
|
+
consume(): AccordionRootContextType;
|
|
8
|
+
provide(value: AccordionRootContextType): AccordionRootContextType;
|
|
9
|
+
};
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
export interface AvatarFallbackProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
1
8
|
<script lang="ts">
|
|
2
9
|
import { mergeProps } from '@zag-js/svelte';
|
|
3
10
|
import { classesAvatar } from '@skeletonlabs/skeleton-common';
|
|
4
|
-
import { AvatarRootContext } from '../modules/context.js';
|
|
5
|
-
import type { AvatarFallbackProps } from '../modules/types.js';
|
|
11
|
+
import { AvatarRootContext } from '../modules/avatar-root-context.js';
|
|
6
12
|
|
|
7
13
|
const rootContext = AvatarRootContext.consume();
|
|
8
14
|
const props: AvatarFallbackProps = $props();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
export interface AvatarFallbackProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {
|
|
4
|
+
}
|
|
5
|
+
declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
|
|
6
|
+
type AvatarFallback = ReturnType<typeof AvatarFallback>;
|
|
7
|
+
export default AvatarFallback;
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
export interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
1
8
|
<script lang="ts">
|
|
2
9
|
import { mergeProps } from '@zag-js/svelte';
|
|
3
10
|
import { classesAvatar } from '@skeletonlabs/skeleton-common';
|
|
4
|
-
import { AvatarRootContext } from '../modules/context.js';
|
|
5
|
-
import type { AvatarImageProps } from '../modules/types.js';
|
|
11
|
+
import { AvatarRootContext } from '../modules/avatar-root-context.js';
|
|
6
12
|
|
|
7
13
|
const rootContext = AvatarRootContext.consume();
|
|
8
14
|
const props: AvatarImageProps = $props();
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
2
|
+
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
3
|
+
export interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {
|
|
4
|
+
}
|
|
5
|
+
declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "">;
|
|
6
|
+
type AvatarImage = ReturnType<typeof AvatarImage>;
|
|
7
|
+
export default AvatarImage;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { AvatarRootContextType } from '../modules/avatar-root-context.js';
|
|
4
|
+
|
|
5
|
+
export interface AvatarRootContextProps {
|
|
6
|
+
children: Snippet<[AvatarRootContextType]>;
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { AvatarRootContext } from '../modules/avatar-root-context.js';
|
|
12
|
+
|
|
13
|
+
const props: AvatarRootContextProps = $props();
|
|
14
|
+
const rootContext = AvatarRootContext.consume();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{@render props.children(rootContext)}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { AvatarRootContextType } from '../modules/avatar-root-context.js';
|
|
3
|
+
export interface AvatarRootContextProps {
|
|
4
|
+
children: Snippet<[AvatarRootContextType]>;
|
|
5
|
+
}
|
|
6
|
+
import { AvatarRootContext } from '../modules/avatar-root-context.js';
|
|
7
|
+
declare const AvatarRootContext: import("svelte").Component<AvatarRootContextProps, {}, "">;
|
|
8
|
+
type AvatarRootContext = ReturnType<typeof AvatarRootContext>;
|
|
9
|
+
export default AvatarRootContext;
|
|
@@ -1,19 +1,26 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
import type { Props } from '@zag-js/avatar';
|
|
5
|
+
|
|
6
|
+
export interface AvatarRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
1
9
|
<script lang="ts">
|
|
2
|
-
import * as avatar from '@zag-js/avatar';
|
|
3
10
|
import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
|
|
4
11
|
import { classesAvatar } from '@skeletonlabs/skeleton-common';
|
|
5
|
-
import { AvatarRootContext } from '../modules/context.js';
|
|
6
|
-
import
|
|
12
|
+
import { AvatarRootContext } from '../modules/avatar-root-context.js';
|
|
13
|
+
import { connect, machine, splitProps } from '@zag-js/avatar';
|
|
7
14
|
|
|
8
15
|
const props: AvatarRootProps = $props();
|
|
9
|
-
const [machineProps, componentProps] = $derived(
|
|
16
|
+
const [machineProps, componentProps] = $derived(splitProps(props));
|
|
10
17
|
const { element, children, ...restAttributes } = $derived(componentProps);
|
|
11
18
|
const id = $props.id();
|
|
12
|
-
const service = useMachine(
|
|
19
|
+
const service = useMachine(machine, () => ({
|
|
13
20
|
id: id,
|
|
14
21
|
...machineProps
|
|
15
22
|
}));
|
|
16
|
-
const api = $derived(
|
|
23
|
+
const api = $derived(connect(service, normalizeProps));
|
|
17
24
|
const attributes = $derived(
|
|
18
25
|
mergeProps(
|
|
19
26
|
api.getRootProps(),
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
import type { Props } from '@zag-js/avatar';
|
|
4
|
+
export interface AvatarRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {
|
|
5
|
+
}
|
|
6
|
+
declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "">;
|
|
7
|
+
type AvatarRoot = ReturnType<typeof AvatarRoot>;
|
|
8
|
+
export default AvatarRoot;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { Avatar } from './modules/avatar-anatomy';
|
|
2
|
+
export type { AvatarRootProps } from './anatomy/avatar-root.svelte';
|
|
3
|
+
export type { AvatarRootContextProps } from './anatomy/avatar-root-context.svelte';
|
|
4
|
+
export type { AvatarImageProps } from './anatomy/avatar-image.svelte';
|
|
5
|
+
export type { AvatarFallbackProps } from './anatomy/avatar-fallback.svelte';
|
|
6
|
+
export type { AvatarRootContextType as AvatarRootContext } from './modules/avatar-root-context.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Avatar } from './modules/avatar-anatomy';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const Avatar: import("svelte").Component<import("../anatomy/avatar-root.svelte").AvatarRootProps, {}, ""> & {
|
|
2
|
+
Context: import("svelte").Component<import("../anatomy/avatar-root-context.svelte").AvatarRootContextProps, {}, "">;
|
|
3
|
+
Image: import("svelte").Component<import("../anatomy/avatar-image.svelte").AvatarImageProps, {}, "">;
|
|
4
|
+
Fallback: import("svelte").Component<import("../anatomy/avatar-fallback.svelte").AvatarFallbackProps, {}, "">;
|
|
5
|
+
};
|
package/dist/{composed/avatar/modules/anatomy.js → components/avatar/modules/avatar-anatomy.js}
RENAMED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import AvatarRoot from '../anatomy/avatar-root.svelte';
|
|
2
2
|
import AvatarImage from '../anatomy/avatar-image.svelte';
|
|
3
3
|
import AvatarFallback from '../anatomy/avatar-fallback.svelte';
|
|
4
|
-
|
|
4
|
+
import AvatarRootContext from '../anatomy/avatar-root-context.svelte';
|
|
5
|
+
export const Avatar = Object.assign(AvatarRoot, {
|
|
6
|
+
Context: AvatarRootContext,
|
|
5
7
|
Image: AvatarImage,
|
|
6
8
|
Fallback: AvatarFallback
|
|
7
9
|
});
|
|
8
|
-
export { Avatar };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Api } from '@zag-js/avatar';
|
|
2
|
+
export interface AvatarRootContextType {
|
|
3
|
+
api: Api;
|
|
4
|
+
}
|
|
5
|
+
export declare const AvatarRootContext: {
|
|
6
|
+
key: symbol;
|
|
7
|
+
consume(): AvatarRootContextType;
|
|
8
|
+
provide(value: AvatarRootContextType): AvatarRootContextType;
|
|
9
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
|
|
5
|
+
export interface RatingGroupControlProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
10
|
+
import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
|
|
11
|
+
import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
|
|
12
|
+
|
|
13
|
+
const rootContext = RatingGroupRootContext.consume();
|
|
14
|
+
const props: RatingGroupControlProps = $props();
|
|
15
|
+
const { element, children, ...restAttributes } = $derived(props);
|
|
16
|
+
const attributes = $derived(
|
|
17
|
+
mergeProps(
|
|
18
|
+
rootContext.api.getControlProps(),
|
|
19
|
+
{
|
|
20
|
+
class: classesRatingGroup.control
|
|
21
|
+
},
|
|
22
|
+
restAttributes
|
|
23
|
+
)
|
|
24
|
+
);
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
{#if element}
|
|
28
|
+
{@render element({ attributes })}
|
|
29
|
+
{:else}
|
|
30
|
+
<div {...attributes}>{@render children?.()}</div>
|
|
31
|
+
{/if}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
export interface RatingGroupControlProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
|
|
4
|
+
}
|
|
5
|
+
declare const RatingGroupControl: import("svelte").Component<RatingGroupControlProps, {}, "">;
|
|
6
|
+
type RatingGroupControl = ReturnType<typeof RatingGroupControl>;
|
|
7
|
+
export default RatingGroupControl;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { HTMLInputAttributes } from 'svelte/elements';
|
|
3
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
4
|
+
|
|
5
|
+
export interface RatingGroupHiddenInputProps
|
|
6
|
+
extends PropsWithElement,
|
|
7
|
+
Omit<HTMLInputAttributes, 'id' | 'defaultValue' | 'dir' | 'children'> {}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { mergeProps } from '@zag-js/svelte';
|
|
12
|
+
import { classesRatingGroup } from '@skeletonlabs/skeleton-common';
|
|
13
|
+
import { RatingGroupRootContext } from '../modules/rating-group-root-context.js';
|
|
14
|
+
|
|
15
|
+
const rootContext = RatingGroupRootContext.consume();
|
|
16
|
+
const props: RatingGroupHiddenInputProps = $props();
|
|
17
|
+
const { element, ...restAttributes } = $derived(props);
|
|
18
|
+
const attributes = $derived(
|
|
19
|
+
mergeProps(
|
|
20
|
+
rootContext.api.getHiddenInputProps(),
|
|
21
|
+
{
|
|
22
|
+
class: classesRatingGroup.hiddenInput
|
|
23
|
+
},
|
|
24
|
+
restAttributes
|
|
25
|
+
)
|
|
26
|
+
);
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
{#if element}
|
|
30
|
+
{@render element({ attributes })}
|
|
31
|
+
{:else}
|
|
32
|
+
<input {...attributes} />
|
|
33
|
+
{/if}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLInputAttributes } from 'svelte/elements';
|
|
2
|
+
import type { PropsWithElement } from '../../../internal/props-with-element.js';
|
|
3
|
+
export interface RatingGroupHiddenInputProps extends PropsWithElement, Omit<HTMLInputAttributes, 'id' | 'defaultValue' | 'dir' | 'children'> {
|
|
4
|
+
}
|
|
5
|
+
declare const RatingGroupHiddenInput: import("svelte").Component<RatingGroupHiddenInputProps, {}, "">;
|
|
6
|
+
type RatingGroupHiddenInput = ReturnType<typeof RatingGroupHiddenInput>;
|
|
7
|
+
export default RatingGroupHiddenInput;
|