@svelte-atoms/core 1.0.0-alpha.29 → 1.0.0-alpha.30
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/README.md +852 -852
- package/dist/attachments/clickout.svelte.d.ts +1 -1
- package/dist/attachments/clickout.svelte.js +2 -2
- package/dist/components/accordion/accordion-root.svelte +61 -61
- package/dist/components/accordion/accordion-root.svelte.d.ts +1 -1
- package/dist/components/accordion/accordion.stories.svelte +145 -134
- package/dist/components/alert/alert.stories.svelte +400 -401
- package/dist/components/atom/html-atom.svelte +71 -17
- package/dist/components/avatar/avatar.stories.svelte +22 -27
- package/dist/components/badge/badge.stories.svelte +12 -17
- package/dist/components/badge/badge.svelte +19 -19
- package/dist/components/breadcrumb/breadcrumb.stories.svelte +16 -21
- package/dist/components/button/button.stories.svelte +27 -60
- package/dist/components/calendar/calendar-day.svelte +96 -96
- package/dist/components/calendar/calendar-header.svelte +29 -29
- package/dist/components/calendar/calendar-root.svelte +206 -206
- package/dist/components/calendar/calendar.stories.svelte +10 -15
- package/dist/components/card/card-body.svelte +39 -39
- package/dist/components/card/card-footer.svelte +41 -41
- package/dist/components/card/card-root.svelte +91 -91
- package/dist/components/card/card.stories.svelte +133 -145
- package/dist/components/checkbox/checkbox.stories.svelte +22 -27
- package/dist/components/checkbox/checkbox.svelte +155 -157
- package/dist/components/collapsible/collapsible.stories.svelte +172 -173
- package/dist/components/combobox/combobox-root.svelte +65 -65
- package/dist/components/combobox/compobox.stories.svelte +51 -54
- package/dist/components/container/container.stories.svelte +20 -23
- package/dist/components/datagrid/datagrid-root.svelte +59 -59
- package/dist/components/datagrid/datagrid.css +5 -5
- package/dist/components/datagrid/datagrid.stories.svelte +72 -75
- package/dist/components/date-picker/date-picker-calendar.svelte +67 -67
- package/dist/components/date-picker/date-picker-header.svelte +100 -100
- package/dist/components/date-picker/date-picker-months.svelte +142 -142
- package/dist/components/date-picker/date-picker-root.svelte +1 -1
- package/dist/components/date-picker/date-picker-years.svelte +205 -205
- package/dist/components/date-picker/date-picker.stories.svelte +11 -18
- package/dist/components/dialog/dialog-content.svelte +62 -62
- package/dist/components/dialog/dialog.stories.svelte +64 -67
- package/dist/components/drawer/attachments.svelte.js +8 -9
- package/dist/components/drawer/drawer-content.svelte +57 -42
- package/dist/components/drawer/drawer.stories.svelte +212 -224
- package/dist/components/dropdown/dropdown-root.svelte +59 -59
- package/dist/components/dropdown/dropdown.stories.svelte +80 -83
- package/dist/components/form/form.stories.svelte +96 -99
- package/dist/components/image/image.stories.svelte +20 -23
- package/dist/components/input/input.stories.svelte +35 -38
- package/dist/components/label/label.stories.svelte +15 -26
- package/dist/components/label/label.stories.svelte.d.ts +24 -4
- package/dist/components/lazy/lazy.stories.svelte +9 -16
- package/dist/components/lazy/lazy.svelte +28 -28
- package/dist/components/link/link.stories.svelte +15 -26
- package/dist/components/link/link.stories.svelte.d.ts +24 -4
- package/dist/components/menu/menu-list.svelte +40 -40
- package/dist/components/menu/menu.stories.svelte +33 -36
- package/dist/components/popover/bond.svelte.js +31 -25
- package/dist/components/popover/popover-arrow.svelte +111 -111
- package/dist/components/popover/popover-content.svelte +175 -178
- package/dist/components/popover/popover-indicator.svelte +44 -43
- package/dist/components/popover/popover-root.svelte +48 -48
- package/dist/components/popover/popover.stories.svelte +49 -52
- package/dist/components/qr-code/qr-code.stories.svelte +4 -13
- package/dist/components/qr-code/qr-code.svelte +75 -75
- package/dist/components/radio/radio-group.stories.svelte +41 -50
- package/dist/components/radio/radio.stories.svelte +17 -26
- package/dist/components/radio/radio.svelte +109 -109
- package/dist/components/root/root.svelte +121 -121
- package/dist/components/root/root.svelte.d.ts +1 -1
- package/dist/components/scrollable/scrollable.stories.svelte +116 -126
- package/dist/components/sidebar/sidebar-content.svelte +13 -2
- package/dist/components/sidebar/sidebar-root.svelte +10 -12
- package/dist/components/sidebar/sidebar.stories.svelte +8 -19
- package/dist/components/sidebar/types.d.ts +1 -0
- package/dist/components/tabs/tab/bond.svelte.d.ts +4 -1
- package/dist/components/tabs/tab/bond.svelte.js +4 -1
- package/dist/components/tabs/tabs.stories.svelte +56 -59
- package/dist/components/tooltip/tooltip-trigger.svelte +39 -37
- package/dist/components/tooltip/tooltip.stories.svelte +32 -35
- package/dist/components/tree/tree.stories.svelte +142 -134
- package/dist/context/preset.svelte.d.ts +3 -3
- package/dist/utils/function.d.ts +2 -0
- package/dist/utils/function.js +6 -0
- package/package.json +6 -9
- package/dist/actions/animation.svelte.d.ts +0 -6
- package/dist/actions/animation.svelte.js +0 -14
- package/dist/actions/clickout.svelte.d.ts +0 -2
- package/dist/actions/clickout.svelte.js +0 -15
- package/dist/actions/popover.svelte.d.ts +0 -19
- package/dist/actions/popover.svelte.js +0 -81
- package/dist/actions/portal.svelte.d.ts +0 -8
- package/dist/actions/portal.svelte.js +0 -32
- package/dist/attachments/gsap.svelte.d.ts +0 -2
- package/dist/attachments/gsap.svelte.js +0 -26
|
@@ -1,59 +1,56 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import { Tabs as Tabs_, Tab } from '.';
|
|
4
|
-
import { Root as TabsRoot } from './atoms';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
<Tabs_.
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
<Tab.
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<Tab.
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</Tabs_.Root>
|
|
58
|
-
</Root>
|
|
59
|
-
</Story>
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
+
import { Tabs as Tabs_, Tab } from '.';
|
|
4
|
+
import { Root as TabsRoot } from './atoms';
|
|
5
|
+
|
|
6
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
|
+
const { Story } = defineMeta({
|
|
8
|
+
title: 'Atoms/Tabs',
|
|
9
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
10
|
+
|
|
11
|
+
parameters: {
|
|
12
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
13
|
+
layout: 'fullscreen'
|
|
14
|
+
},
|
|
15
|
+
args: {}
|
|
16
|
+
});
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<script lang="ts">
|
|
20
|
+
let value = $state('ar');
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<Story name="Tabs" args={{}}>
|
|
24
|
+
<Tabs_.Root bind:value>
|
|
25
|
+
<Tabs_.Header class="border-b" />
|
|
26
|
+
<Tabs_.Body>
|
|
27
|
+
<Tab.Root value="en">
|
|
28
|
+
<Tab.Header>English</Tab.Header>
|
|
29
|
+
<Tab.Body class="">
|
|
30
|
+
<div>
|
|
31
|
+
Ligula ex tincidunt efficitur netus consequat aenean finibus. Dictum ex pretium torquent
|
|
32
|
+
vel scelerisque quisque class nisl penatibus blandit risus. Pretium praesent egestas
|
|
33
|
+
ante placerat lacus pede risus pulvinar facilisi.
|
|
34
|
+
</div>
|
|
35
|
+
</Tab.Body>
|
|
36
|
+
</Tab.Root>
|
|
37
|
+
|
|
38
|
+
<Tab.Root value="ar">
|
|
39
|
+
<Tab.Header>Arabic</Tab.Header>
|
|
40
|
+
<Tab.Body class="h-[1440px]">
|
|
41
|
+
<div>
|
|
42
|
+
Interdum turpis taciti mauris orci condimentum vitae malesuada ornare ridiculus ultrices
|
|
43
|
+
quisque feugiat pretium facilisis justo ligula pede volutpat nisi viverra adipiscing
|
|
44
|
+
donec torquent ac sapien aliquet parturient posuere leo litora vivamus luctus vestibulum
|
|
45
|
+
aptent faucibus platea libero dolor purus integer fusce nam senectus nibh nostra diam
|
|
46
|
+
tortor dictumst praesent tellus montes ad iaculis sociosqu mollis sodales consectetuer
|
|
47
|
+
hac accumsan dictum blandit conubia velit elit efficitur duis nascetur erat mattis
|
|
48
|
+
semper et aliquam magna lorem bibendum ante id cursus nulla eget ut pellentesque
|
|
49
|
+
himenaeos consectetur potenti si maximus ullamcorper etiam nec magnis ipsum mus porta
|
|
50
|
+
lobortis natoque rhoncus fringilla
|
|
51
|
+
</div>
|
|
52
|
+
</Tab.Body>
|
|
53
|
+
</Tab.Root>
|
|
54
|
+
</Tabs_.Body>
|
|
55
|
+
</Tabs_.Root>
|
|
56
|
+
</Story>
|
|
@@ -1,37 +1,39 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { PopoverBond } from '../popover/bond.svelte';
|
|
3
|
-
import { Trigger } from '../popover/atoms';
|
|
4
|
-
|
|
5
|
-
const popoverBond = PopoverBond.get();
|
|
6
|
-
|
|
7
|
-
let { onmount, children, ...restProps } = $props();
|
|
8
|
-
|
|
9
|
-
function tooltip(node: HTMLElement) {
|
|
10
|
-
const onpointerenter = async (
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { PopoverBond } from '../popover/bond.svelte';
|
|
3
|
+
import { Trigger } from '../popover/atoms';
|
|
4
|
+
|
|
5
|
+
const popoverBond = PopoverBond.get();
|
|
6
|
+
|
|
7
|
+
let { onmount, children, ...restProps } = $props();
|
|
8
|
+
|
|
9
|
+
function tooltip(node: HTMLElement) {
|
|
10
|
+
const onpointerenter = async () => {
|
|
11
|
+
requestAnimationFrame(() => {
|
|
12
|
+
popoverBond?.state.open();
|
|
13
|
+
});
|
|
14
|
+
node.addEventListener('pointerleave', onpointerleave);
|
|
15
|
+
};
|
|
16
|
+
const onpointerleave = () => {
|
|
17
|
+
popoverBond?.state.close();
|
|
18
|
+
node.removeEventListener('pointerleave', onpointerleave);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
node.addEventListener('pointerenter', onpointerenter, { passive: true });
|
|
22
|
+
|
|
23
|
+
const cleanup = () => {
|
|
24
|
+
node.removeEventListener('pointerenter', onpointerenter);
|
|
25
|
+
node.removeEventListener('pointerleave', onpointerleave);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const unmount = onmount?.(node);
|
|
29
|
+
|
|
30
|
+
return () => {
|
|
31
|
+
cleanup?.();
|
|
32
|
+
unmount?.();
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<Trigger preset="tooltip.trigger" onmount={tooltip} {...restProps}>
|
|
38
|
+
{@render children?.()}
|
|
39
|
+
</Trigger>
|
|
@@ -1,35 +1,32 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import { Tooltip as Tooltip_ } from '.';
|
|
4
|
-
import { Root as TooltipRoot } from './atoms';
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
<Tooltip_.
|
|
28
|
-
<
|
|
29
|
-
<Tooltip_.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</Tooltip_.Root>
|
|
34
|
-
</Root>
|
|
35
|
-
</Story>
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
+
import { Tooltip as Tooltip_ } from '.';
|
|
4
|
+
import { Root as TooltipRoot } from './atoms';
|
|
5
|
+
import { Button } from '../button';
|
|
6
|
+
|
|
7
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
8
|
+
const { Story } = defineMeta({
|
|
9
|
+
title: 'Atoms/Tooltip',
|
|
10
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
11
|
+
|
|
12
|
+
parameters: {
|
|
13
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
14
|
+
layout: 'fullscreen'
|
|
15
|
+
},
|
|
16
|
+
args: {}
|
|
17
|
+
});
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<script lang="ts">
|
|
21
|
+
let open = $state(false);
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<Story name="Tooltip" args={{}}>
|
|
25
|
+
<Tooltip_.Root bind:open offset={0}>
|
|
26
|
+
<Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
|
|
27
|
+
<Tooltip_.Content>
|
|
28
|
+
<div>Hello World !</div>
|
|
29
|
+
<Tooltip_.Arrow />
|
|
30
|
+
</Tooltip_.Content>
|
|
31
|
+
</Tooltip_.Root>
|
|
32
|
+
</Story>
|
|
@@ -1,134 +1,142 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { untrack } from 'svelte';
|
|
3
|
-
import
|
|
4
|
-
import { RenderScan } from 'svelte-render-scan';
|
|
5
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
6
|
-
import { dev } from '$app/environment';
|
|
7
|
-
import { Tree as Tree_ } from '.';
|
|
8
|
-
import { tree } from './attachments.svelte';
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
1
|
+
<script module>
|
|
2
|
+
import { untrack } from 'svelte';
|
|
3
|
+
import { animate } from 'motion';
|
|
4
|
+
import { RenderScan } from 'svelte-render-scan';
|
|
5
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
6
|
+
import { dev } from '$app/environment';
|
|
7
|
+
import { Tree as Tree_ } from '.';
|
|
8
|
+
import { tree } from './attachments.svelte';
|
|
9
|
+
import { TreeBond } from './bond.svelte';
|
|
10
|
+
|
|
11
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
12
|
+
const { Story } = defineMeta({
|
|
13
|
+
title: 'Atoms/Tree',
|
|
14
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
15
|
+
|
|
16
|
+
parameters: {
|
|
17
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
18
|
+
layout: 'fullscreen'
|
|
19
|
+
},
|
|
20
|
+
args: {}
|
|
21
|
+
});
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<script lang="ts">
|
|
25
|
+
let open = $state(true);
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<Story name="Tree" args={{}}>
|
|
29
|
+
<Tree_.Root class="" bind:open>
|
|
30
|
+
{#if dev}
|
|
31
|
+
<RenderScan duration={300} />
|
|
32
|
+
{/if}
|
|
33
|
+
|
|
34
|
+
<Tree_.Header>Vehicles</Tree_.Header>
|
|
35
|
+
|
|
36
|
+
<Tree_.Body
|
|
37
|
+
class="border-l border-l-neutral-200"
|
|
38
|
+
onmount={(node) => {
|
|
39
|
+
const bond = TreeBond.get();
|
|
40
|
+
const isOpen = untrack(() => bond?.state.props.open ?? false);
|
|
41
|
+
animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
|
|
42
|
+
}}
|
|
43
|
+
{@attach tree((node, bond) => {
|
|
44
|
+
const isOpen = bond?.state.props.open ?? false;
|
|
45
|
+
animate(
|
|
46
|
+
node,
|
|
47
|
+
{
|
|
48
|
+
height: +isOpen ? 'auto' : 0,
|
|
49
|
+
opacity: +isOpen,
|
|
50
|
+
pointerEvents: isOpen ? 'all' : 'none'
|
|
51
|
+
},
|
|
52
|
+
{ duration: 0.1 }
|
|
53
|
+
);
|
|
54
|
+
})}
|
|
55
|
+
>
|
|
56
|
+
<Tree_.Root>
|
|
57
|
+
<Tree_.Header>Cars</Tree_.Header>
|
|
58
|
+
<Tree_.Body
|
|
59
|
+
class="border-l border-l-neutral-200"
|
|
60
|
+
onmount={(node) => {
|
|
61
|
+
const bond = TreeBond.get();
|
|
62
|
+
const isOpen = bond?.state.props.open ?? false;
|
|
63
|
+
animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
|
|
64
|
+
}}
|
|
65
|
+
animate={(node) => {
|
|
66
|
+
const bond = TreeBond.get();
|
|
67
|
+
const isOpen = bond?.state.props.open ?? false;
|
|
68
|
+
animate(
|
|
69
|
+
node,
|
|
70
|
+
{
|
|
71
|
+
height: +isOpen ? 'auto' : 0,
|
|
72
|
+
opacity: +isOpen,
|
|
73
|
+
pointerEvents: isOpen ? 'all' : 'none'
|
|
74
|
+
},
|
|
75
|
+
{ duration: 0.1 }
|
|
76
|
+
);
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
|
|
80
|
+
tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
|
|
81
|
+
dolor diam nascetur.
|
|
82
|
+
</Tree_.Body>
|
|
83
|
+
</Tree_.Root>
|
|
84
|
+
|
|
85
|
+
<Tree_.Root>
|
|
86
|
+
<Tree_.Header>Trucks</Tree_.Header>
|
|
87
|
+
<Tree_.Body
|
|
88
|
+
class="border-l border-l-neutral-200"
|
|
89
|
+
onmount={(node) => {
|
|
90
|
+
const bond = TreeBond.get();
|
|
91
|
+
const isOpen = bond?.state.props.open ?? false;
|
|
92
|
+
animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
|
|
93
|
+
}}
|
|
94
|
+
{@attach tree((node, bond) => {
|
|
95
|
+
const isOpen = bond?.state.props.open ?? false;
|
|
96
|
+
animate(
|
|
97
|
+
node,
|
|
98
|
+
{
|
|
99
|
+
height: +isOpen ? 'auto' : 0,
|
|
100
|
+
opacity: +isOpen,
|
|
101
|
+
pointerEvents: isOpen ? 'all' : 'none'
|
|
102
|
+
},
|
|
103
|
+
{ duration: 0.1 }
|
|
104
|
+
);
|
|
105
|
+
})}
|
|
106
|
+
>
|
|
107
|
+
Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
|
|
108
|
+
tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
|
|
109
|
+
dolor diam nascetur.
|
|
110
|
+
</Tree_.Body>
|
|
111
|
+
</Tree_.Root>
|
|
112
|
+
|
|
113
|
+
<Tree_.Root>
|
|
114
|
+
<Tree_.Header>Bikes</Tree_.Header>
|
|
115
|
+
<Tree_.Body
|
|
116
|
+
class="border-l border-l-neutral-200"
|
|
117
|
+
onmount={(node) => {
|
|
118
|
+
const bond = TreeBond.get();
|
|
119
|
+
const isOpen = untrack(() => bond?.state.props.open ?? false);
|
|
120
|
+
animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
|
|
121
|
+
}}
|
|
122
|
+
{@attach tree((node, bond) => {
|
|
123
|
+
const isOpen = bond?.state.props.open ?? false;
|
|
124
|
+
animate(
|
|
125
|
+
node,
|
|
126
|
+
{
|
|
127
|
+
height: +isOpen ? 'auto' : 0,
|
|
128
|
+
opacity: +isOpen,
|
|
129
|
+
pointerEvents: isOpen ? 'all' : 'none'
|
|
130
|
+
},
|
|
131
|
+
{ duration: 0.1 }
|
|
132
|
+
);
|
|
133
|
+
})}
|
|
134
|
+
>
|
|
135
|
+
Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
|
|
136
|
+
tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
|
|
137
|
+
dolor diam nascetur.
|
|
138
|
+
</Tree_.Body>
|
|
139
|
+
</Tree_.Root>
|
|
140
|
+
</Tree_.Body>
|
|
141
|
+
</Tree_.Root>
|
|
142
|
+
</Story>
|
|
@@ -2,7 +2,7 @@ import type { ClassValue } from 'svelte/elements';
|
|
|
2
2
|
import type { Base } from '../components/atom';
|
|
3
3
|
import type { Bond } from '../shared';
|
|
4
4
|
export type PresetModuleName = 'accordion' | 'accordion.item.body' | 'accordion.item.header' | 'accordion.item.indicator' | 'accordion.item' | 'alert.actions' | 'alert.close-button' | 'alert.content' | 'alert.description' | 'alert.icon' | 'alert' | 'alert.title' | 'card.content' | 'card.description' | 'card.footer' | 'card.header' | 'card.media' | 'card' | 'card.subtitle' | 'card.title' | 'collapsible.body' | 'collapsible.header' | 'collapsible.indicator' | 'collapsible' | 'combobox.control' | 'combobox.trigger' | 'combobox.item' | 'dialog.close-button' | 'dialog.body' | 'dialog.content' | 'dialog.description' | 'dialog.footer' | 'dialog.header' | 'dialog' | 'dialog.title' | 'divider' | 'dropdown.placeholder' | 'dropdown.query' | 'dropdown.trigger' | 'dropdown.value' | 'dropdown' | 'field.control' | 'field.label' | 'field' | 'form' | 'icon' | 'input' | 'input.control' | 'input.placeholder' | 'label' | 'layer.inner' | 'layer' | 'link' | 'list.divider' | 'list.group' | 'list.item' | 'list.item' | 'list.item' | 'dropdown.item' | 'menu.body' | 'popover.arrow' | 'popover.indicator' | 'popover.content' | 'popover.trigger' | 'portal.inner' | 'portal' | 'root' | 'root.portals' | 'sidebar.content' | 'sidebar' | 'drawer.backdrop' | 'drawer.body' | 'drawer.content' | 'drawer.description' | 'drawer.title' | 'drawer.footer' | 'drawer.header' | 'drawer' | 'stack.root' | 'stack.item' | 'tabs.body' | 'tabs.header' | 'tabs' | 'tab.header' | 'tab.body' | 'tab.description' | 'tab' | 'tree.body' | 'tree.header' | 'tree.indicator' | 'tree' | 'datagrid' | 'datagrid.header' | 'datagrid.th' | 'datagrid.body' | 'datagrid.tr' | 'datagrid.td' | 'datagrid.footer' | 'datagrid.checkbox' | 'datagrid.sort-icon' | 'scrollable' | 'scrollable.container' | 'scrollable.content' | 'scrollable.track' | 'scrollable.thumb' | 'breadcrumb' | 'breadcrumb.item' | 'breadcrumb.separator' | 'badge' | 'button' | 'checkbox' | 'checkbox.checkmark' | 'checkbox.indeterminate' | 'radio' | 'radio.group' | 'container' | 'calendar' | 'calendar.day' | 'calendar.header' | 'calendar.weekday' | 'calendar.body' | 'datepicker.trigger' | 'datepicker.calendar' | 'datepicker.years' | 'datepicker.months' | 'datepicker.header';
|
|
5
|
-
export
|
|
5
|
+
export interface PresetEntryRecord {
|
|
6
6
|
[key: string]: unknown;
|
|
7
7
|
class?: ClassValue;
|
|
8
8
|
as?: string;
|
|
@@ -10,8 +10,8 @@ export type PresetEntryRecord = {
|
|
|
10
10
|
variants?: Record<string, Record<string, any>>;
|
|
11
11
|
compounds?: Array<Record<string, any>>;
|
|
12
12
|
defaults?: Record<string, any>;
|
|
13
|
-
}
|
|
14
|
-
export type PresetEntry = (
|
|
13
|
+
}
|
|
14
|
+
export type PresetEntry = (bond: Bond | undefined | null, ...args: any[]) => PresetEntryRecord | (() => PresetEntryRecord);
|
|
15
15
|
export type Preset = Record<PresetModuleName, PresetEntry>;
|
|
16
16
|
export declare function getPreset<K extends PresetModuleName>(key: K): PresetEntry | undefined;
|
|
17
17
|
export declare function getPreset(): Partial<Preset> | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@svelte-atoms/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.30",
|
|
4
4
|
"description": "A modular, accessible, and extensible Svelte UI component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -357,11 +357,6 @@
|
|
|
357
357
|
"svelte": "./dist/components/tooltip/atoms.js",
|
|
358
358
|
"default": "./dist/components/tooltip/atoms.js"
|
|
359
359
|
},
|
|
360
|
-
"./components": {
|
|
361
|
-
"types": "./dist/components/index.d.ts",
|
|
362
|
-
"svelte": "./dist/components/index.js",
|
|
363
|
-
"default": "./dist/components/index.js"
|
|
364
|
-
},
|
|
365
360
|
"./utils": {
|
|
366
361
|
"types": "./dist/utils/index.d.ts",
|
|
367
362
|
"svelte": "./dist/utils/index.js",
|
|
@@ -372,6 +367,10 @@
|
|
|
372
367
|
"svelte": "./dist/shared/index.js",
|
|
373
368
|
"default": "./dist/shared/index.js"
|
|
374
369
|
},
|
|
370
|
+
"./tw": {
|
|
371
|
+
"svelte": "./dist/components/root/root.css",
|
|
372
|
+
"default": "./dist/components/root/root.css"
|
|
373
|
+
},
|
|
375
374
|
"./styles/root": {
|
|
376
375
|
"svelte": "./dist/components/root/root.css",
|
|
377
376
|
"default": "./dist/components/root/root.css"
|
|
@@ -456,10 +455,8 @@
|
|
|
456
455
|
"clsx": "^2.1.1",
|
|
457
456
|
"date-fns": "^4.1.0",
|
|
458
457
|
"es-toolkit": "^1.37.2",
|
|
459
|
-
"gsap": "^3.13.0",
|
|
460
458
|
"motion": "^12.23.22",
|
|
461
459
|
"nanoid": "^5.1.5",
|
|
462
|
-
"tailwind-merge": "^3.2.0"
|
|
463
|
-
"uqr": "^0.1.2"
|
|
460
|
+
"tailwind-merge": "^3.2.0"
|
|
464
461
|
}
|
|
465
462
|
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare function animate(node: HTMLElement | SVGElement, fn: () => gsap.TweenVars): void;
|
|
2
|
-
export type GsapFromToParams = {
|
|
3
|
-
from: gsap.TweenVars;
|
|
4
|
-
to: gsap.TweenVars;
|
|
5
|
-
};
|
|
6
|
-
export declare function gsapFromTo(node: HTMLElement | SVGElement, fn: () => GsapFromToParams): void;
|