@svelte-atoms/core 1.0.0-alpha.26 → 1.0.0-alpha.27
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/accordion/accordion-root.svelte +61 -79
- package/dist/components/accordion/accordion-root.svelte.d.ts +2 -15
- package/dist/components/accordion/index.d.ts +2 -1
- package/dist/components/accordion/index.js +2 -1
- package/dist/components/accordion/item/accordion-item-body.svelte +42 -52
- package/dist/components/accordion/item/accordion-item-body.svelte.d.ts +2 -8
- package/dist/components/accordion/item/accordion-item-header.svelte +50 -60
- package/dist/components/accordion/item/accordion-item-header.svelte.d.ts +3 -20
- package/dist/components/accordion/item/accordion-item-indicator.svelte +50 -59
- package/dist/components/accordion/item/accordion-item-indicator.svelte.d.ts +2 -8
- package/dist/components/accordion/item/accordion-item-root.svelte +65 -79
- package/dist/components/accordion/item/accordion-item-root.svelte.d.ts +2 -12
- package/dist/components/accordion/item/index.d.ts +1 -0
- package/dist/components/accordion/item/types.d.ts +52 -0
- package/dist/components/accordion/item/types.js +1 -0
- package/dist/components/accordion/types.d.ts +21 -0
- package/dist/components/accordion/types.js +1 -0
- package/dist/components/alert/alert-actions.svelte +42 -52
- package/dist/components/alert/alert-actions.svelte.d.ts +3 -30
- package/dist/components/alert/alert-close-button.svelte +72 -79
- package/dist/components/alert/alert-close-button.svelte.d.ts +8 -35
- package/dist/components/alert/alert-content.svelte +42 -52
- package/dist/components/alert/alert-content.svelte.d.ts +3 -30
- package/dist/components/alert/alert-description.svelte +41 -51
- package/dist/components/alert/alert-description.svelte.d.ts +7 -10
- package/dist/components/alert/alert-icon.svelte +46 -56
- package/dist/components/alert/alert-icon.svelte.d.ts +2 -8
- package/dist/components/alert/alert-root.svelte +102 -118
- package/dist/components/alert/alert-root.svelte.d.ts +2 -13
- package/dist/components/alert/alert-title.svelte +41 -51
- package/dist/components/alert/alert-title.svelte.d.ts +2 -8
- package/dist/components/alert/index.d.ts +1 -0
- package/dist/components/alert/index.js +1 -0
- package/dist/components/alert/types.d.ts +85 -0
- package/dist/components/alert/types.js +1 -0
- package/dist/components/atom/html-atom.svelte.d.ts +2 -22
- package/dist/components/atom/types.d.ts +7 -2
- package/dist/components/avatar/types.d.ts +7 -2
- package/dist/components/badge/types.d.ts +7 -2
- package/dist/components/button/index.d.ts +1 -0
- package/dist/components/button/index.js +1 -0
- package/dist/components/button/types.d.ts +7 -2
- package/dist/components/card/card-body.svelte +39 -45
- package/dist/components/card/card-body.svelte.d.ts +7 -4
- package/dist/components/card/card-description.svelte +41 -48
- package/dist/components/card/card-description.svelte.d.ts +7 -7
- package/dist/components/card/card-footer.svelte +41 -48
- package/dist/components/card/card-footer.svelte.d.ts +7 -4
- package/dist/components/card/card-header.svelte +41 -48
- package/dist/components/card/card-header.svelte.d.ts +7 -4
- package/dist/components/card/card-media.svelte +41 -48
- package/dist/components/card/card-media.svelte.d.ts +7 -4
- package/dist/components/card/card-root.svelte +91 -91
- package/dist/components/card/card-root.svelte.d.ts +1 -1
- package/dist/components/card/card-subtitle.svelte +41 -48
- package/dist/components/card/card-subtitle.svelte.d.ts +12 -9
- package/dist/components/card/card-title.svelte +45 -52
- package/dist/components/card/card-title.svelte.d.ts +12 -9
- package/dist/components/card/index.d.ts +1 -0
- package/dist/components/card/index.js +1 -0
- package/dist/components/card/types.d.ts +57 -2
- package/dist/components/checkbox/types.d.ts +7 -2
- package/dist/components/collapsible/collapsible-body.svelte +39 -52
- package/dist/components/collapsible/collapsible-body.svelte.d.ts +2 -9
- package/dist/components/collapsible/collapsible-header.svelte +39 -52
- package/dist/components/collapsible/collapsible-header.svelte.d.ts +2 -9
- package/dist/components/collapsible/collapsible-indicator.svelte +50 -65
- package/dist/components/collapsible/collapsible-indicator.svelte.d.ts +3 -10
- package/dist/components/collapsible/collapsible-root.svelte +66 -85
- package/dist/components/collapsible/collapsible-root.svelte.d.ts +2 -14
- package/dist/components/collapsible/index.d.ts +1 -0
- package/dist/components/collapsible/index.js +1 -0
- package/dist/components/collapsible/types.d.ts +54 -0
- package/dist/components/collapsible/types.js +1 -0
- package/dist/components/combobox/combobox-root.svelte +65 -68
- package/dist/components/combobox/combobox-root.svelte.d.ts +5 -18
- package/dist/components/combobox/index.d.ts +1 -0
- package/dist/components/combobox/index.js +1 -0
- package/dist/components/combobox/types.d.ts +25 -0
- package/dist/components/combobox/types.js +1 -0
- package/dist/components/container/types.d.ts +7 -2
- package/dist/components/contextmenu/types.d.ts +8 -0
- package/dist/components/contextmenu/types.js +1 -0
- package/dist/components/datagrid/datagrid-body.svelte +37 -44
- package/dist/components/datagrid/datagrid-body.svelte.d.ts +17 -20
- package/dist/components/datagrid/datagrid-checkbox.svelte +101 -108
- package/dist/components/datagrid/datagrid-checkbox.svelte.d.ts +4 -6
- package/dist/components/datagrid/datagrid-footer.svelte +34 -34
- package/dist/components/datagrid/datagrid-footer.svelte.d.ts +1 -1
- package/dist/components/datagrid/datagrid-header.svelte +49 -49
- package/dist/components/datagrid/datagrid-header.svelte.d.ts +1 -1
- package/dist/components/datagrid/datagrid-root.svelte +59 -59
- package/dist/components/datagrid/datagrid-root.svelte.d.ts +1 -1
- package/dist/components/datagrid/td/datagrid-td.svelte +66 -80
- package/dist/components/datagrid/td/datagrid-td.svelte.d.ts +7 -16
- package/dist/components/datagrid/th/datagrid-th.svelte +106 -127
- package/dist/components/datagrid/th/datagrid-th.svelte.d.ts +2 -20
- package/dist/components/datagrid/tr/bond.svelte.d.ts +3 -1
- package/dist/components/datagrid/tr/bond.svelte.js +4 -2
- package/dist/components/datagrid/tr/datagrid-tr.svelte +88 -103
- package/dist/components/datagrid/tr/datagrid-tr.svelte.d.ts +2 -18
- package/dist/components/datagrid/types.d.ts +85 -37
- package/dist/components/dialog/dialog-body.svelte +39 -45
- package/dist/components/dialog/dialog-body.svelte.d.ts +2 -2
- package/dist/components/dialog/dialog-close-button.svelte +58 -61
- package/dist/components/dialog/dialog-close-button.svelte.d.ts +7 -7
- package/dist/components/dialog/dialog-content.svelte +62 -68
- package/dist/components/dialog/dialog-content.svelte.d.ts +2 -2
- package/dist/components/dialog/dialog-description.svelte +40 -46
- package/dist/components/dialog/dialog-description.svelte.d.ts +2 -2
- package/dist/components/dialog/dialog-footer.svelte +39 -45
- package/dist/components/dialog/dialog-footer.svelte.d.ts +2 -2
- package/dist/components/dialog/dialog-header.svelte +39 -45
- package/dist/components/dialog/dialog-header.svelte.d.ts +2 -2
- package/dist/components/dialog/dialog-root.svelte +3 -16
- package/dist/components/dialog/dialog-root.svelte.d.ts +2 -12
- package/dist/components/dialog/dialog-title.svelte +41 -47
- package/dist/components/dialog/dialog-title.svelte.d.ts +7 -7
- package/dist/components/dialog/index.d.ts +1 -0
- package/dist/components/dialog/index.js +1 -0
- package/dist/components/dialog/types.d.ts +67 -0
- package/dist/components/dialog/types.js +1 -0
- package/dist/components/divider/types.d.ts +10 -0
- package/dist/components/divider/types.js +1 -0
- package/dist/components/drawer/drawer-backdrop.svelte +38 -47
- package/dist/components/drawer/drawer-backdrop.svelte.d.ts +3 -26
- package/dist/components/drawer/drawer-body.svelte +42 -56
- package/dist/components/drawer/drawer-body.svelte.d.ts +3 -16
- package/dist/components/drawer/drawer-content.svelte +42 -55
- package/dist/components/drawer/drawer-content.svelte.d.ts +3 -14
- package/dist/components/drawer/drawer-description.svelte +44 -57
- package/dist/components/drawer/drawer-description.svelte.d.ts +3 -14
- package/dist/components/drawer/drawer-footer.svelte +41 -54
- package/dist/components/drawer/drawer-footer.svelte.d.ts +3 -14
- package/dist/components/drawer/drawer-header.svelte +43 -56
- package/dist/components/drawer/drawer-header.svelte.d.ts +3 -14
- package/dist/components/drawer/drawer-root.svelte +3 -28
- package/dist/components/drawer/drawer-root.svelte.d.ts +3 -34
- package/dist/components/drawer/drawer-title.svelte +44 -57
- package/dist/components/drawer/drawer-title.svelte.d.ts +3 -14
- package/dist/components/drawer/index.d.ts +1 -0
- package/dist/components/drawer/index.js +1 -0
- package/dist/components/drawer/types.d.ts +86 -0
- package/dist/components/drawer/types.js +1 -0
- package/dist/components/dropdown/dropdown-query.svelte +54 -53
- package/dist/components/dropdown/dropdown-query.svelte.d.ts +11 -10
- package/dist/components/dropdown/dropdown-root.svelte +59 -59
- package/dist/components/dropdown/dropdown-trigger.svelte +41 -52
- package/dist/components/dropdown/dropdown-trigger.svelte.d.ts +1 -8
- package/dist/components/dropdown/dropdown-value.svelte +60 -60
- package/dist/components/dropdown/index.d.ts +1 -0
- package/dist/components/dropdown/index.js +1 -0
- package/dist/components/dropdown/types.d.ts +37 -0
- package/dist/components/dropdown/types.js +1 -0
- package/dist/components/element/html-element.svelte.d.ts +2 -14
- package/dist/components/element/svg-element.svelte.d.ts +2 -14
- package/dist/components/element/types.d.ts +14 -7
- package/dist/components/form/field/field-control.svelte +48 -65
- package/dist/components/form/field/field-control.svelte.d.ts +5 -19
- package/dist/components/form/field/field-label.svelte +24 -31
- package/dist/components/form/field/field-label.svelte.d.ts +1 -2
- package/dist/components/form/field/field-root.svelte +59 -88
- package/dist/components/form/field/field-root.svelte.d.ts +5 -20
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/index.js +1 -0
- package/dist/components/form/types.d.ts +76 -0
- package/dist/components/form/types.js +1 -0
- package/dist/components/icon/icon.svelte +44 -55
- package/dist/components/icon/icon.svelte.d.ts +4 -29
- package/dist/components/icon/types.d.ts +11 -7
- package/dist/components/input/index.d.ts +1 -0
- package/dist/components/input/index.js +1 -0
- package/dist/components/input/input-control.svelte +103 -107
- package/dist/components/input/input-control.svelte.d.ts +2 -3
- package/dist/components/input/input-icon.svelte.d.ts +1 -1
- package/dist/components/input/input-placeholder.svelte.d.ts +2 -19
- package/dist/components/input/types.d.ts +18 -7
- package/dist/components/label/index.d.ts +1 -0
- package/dist/components/label/index.js +1 -0
- package/dist/components/label/label.svelte +25 -41
- package/dist/components/label/label.svelte.d.ts +3 -27
- package/dist/components/label/types.d.ts +11 -0
- package/dist/components/label/types.js +1 -0
- package/dist/components/layer/layer-inner.svelte.d.ts +2 -19
- package/dist/components/layer/layer-root.svelte.d.ts +2 -19
- package/dist/components/layer/types.d.ts +11 -0
- package/dist/components/layer/types.js +1 -0
- package/dist/components/link/types.d.ts +8 -0
- package/dist/components/link/types.js +1 -0
- package/dist/components/list/types.d.ts +8 -0
- package/dist/components/list/types.js +1 -0
- package/dist/components/menu/index.d.ts +1 -0
- package/dist/components/menu/index.js +1 -0
- package/dist/components/menu/types.d.ts +15 -0
- package/dist/components/menu/types.js +1 -0
- package/dist/components/popover/index.d.ts +1 -0
- package/dist/components/popover/index.js +1 -0
- package/dist/components/popover/popover-arrow.svelte +1 -1
- package/dist/components/popover/popover-arrow.svelte.d.ts +2 -18
- package/dist/components/popover/popover-content.svelte +1 -1
- package/dist/components/popover/popover-root.svelte +49 -49
- package/dist/components/popover/popover-trigger.svelte +47 -47
- package/dist/components/popover/types.d.ts +32 -10
- package/dist/components/portal/active-portal.svelte +22 -22
- package/dist/components/portal/index.d.ts +1 -0
- package/dist/components/portal/index.js +1 -0
- package/dist/components/portal/portal-inner.svelte.d.ts +2 -19
- package/dist/components/portal/portal-root.svelte +83 -88
- package/dist/components/portal/portal-root.svelte.d.ts +2 -22
- package/dist/components/portal/teleport.svelte +4 -9
- package/dist/components/portal/teleport.svelte.d.ts +3 -22
- package/dist/components/portal/types.d.ts +39 -0
- package/dist/components/portal/types.js +1 -0
- package/dist/components/radio/radio.svelte +109 -109
- package/dist/components/radio/radio.svelte.d.ts +14 -36
- package/dist/components/root/root.svelte +121 -121
- package/dist/components/root/types.d.ts +8 -0
- package/dist/components/root/types.js +1 -0
- package/dist/components/scrollable/index.d.ts +1 -0
- package/dist/components/scrollable/index.js +1 -0
- package/dist/components/scrollable/scrollable-container.svelte +82 -89
- package/dist/components/scrollable/scrollable-container.svelte.d.ts +2 -6
- package/dist/components/scrollable/scrollable-content.svelte +41 -51
- package/dist/components/scrollable/scrollable-content.svelte.d.ts +1 -6
- package/dist/components/scrollable/scrollable-root.svelte +100 -120
- package/dist/components/scrollable/scrollable-root.svelte.d.ts +3 -19
- package/dist/components/scrollable/scrollable-thumb.svelte +75 -86
- package/dist/components/scrollable/scrollable-thumb.svelte.d.ts +1 -7
- package/dist/components/scrollable/scrollable-track.svelte +59 -70
- package/dist/components/scrollable/scrollable-track.svelte.d.ts +1 -7
- package/dist/components/scrollable/types.d.ts +62 -0
- package/dist/components/scrollable/types.js +1 -0
- package/dist/components/sidebar/index.d.ts +1 -0
- package/dist/components/sidebar/index.js +1 -0
- package/dist/components/sidebar/types.d.ts +16 -5
- package/dist/components/stack/stack-root.svelte.d.ts +2 -19
- package/dist/components/stack/types.d.ts +12 -0
- package/dist/components/stack/types.js +1 -0
- package/dist/components/tabs/index.d.ts +1 -0
- package/dist/components/tabs/index.js +1 -0
- package/dist/components/tabs/tab/tab-body.svelte +52 -61
- package/dist/components/tabs/tab/tab-body.svelte.d.ts +2 -8
- package/dist/components/tabs/tab/tab-description.svelte +41 -50
- package/dist/components/tabs/tab/tab-description.svelte.d.ts +2 -8
- package/dist/components/tabs/tab/tab-header.svelte +71 -81
- package/dist/components/tabs/tab/tab-header.svelte.d.ts +2 -11
- package/dist/components/tabs/tab/tab-root.svelte +86 -86
- package/dist/components/tabs/types.d.ts +55 -0
- package/dist/components/tabs/types.js +1 -0
- package/dist/components/textarea/index.d.ts +1 -0
- package/dist/components/textarea/index.js +1 -0
- package/dist/components/textarea/types.d.ts +28 -0
- package/dist/components/textarea/types.js +1 -0
- package/dist/components/toast/index.d.ts +1 -0
- package/dist/components/toast/index.js +1 -0
- package/dist/components/toast/toast-description.svelte +38 -44
- package/dist/components/toast/toast-description.svelte.d.ts +8 -34
- package/dist/components/toast/toast-root.svelte +61 -74
- package/dist/components/toast/toast-root.svelte.d.ts +4 -43
- package/dist/components/toast/toast-title.svelte +35 -43
- package/dist/components/toast/toast-title.svelte.d.ts +2 -34
- package/dist/components/toast/types.d.ts +40 -0
- package/dist/components/toast/types.js +1 -0
- package/dist/components/tooltip/types.d.ts +13 -0
- package/dist/components/tooltip/types.js +1 -0
- package/dist/components/tree/index.d.ts +1 -0
- package/dist/components/tree/index.js +1 -0
- package/dist/components/tree/tree-body.svelte +39 -50
- package/dist/components/tree/tree-body.svelte.d.ts +2 -10
- package/dist/components/tree/tree-header.svelte +54 -66
- package/dist/components/tree/tree-header.svelte.d.ts +3 -29
- package/dist/components/tree/tree-indicator.svelte +40 -50
- package/dist/components/tree/tree-indicator.svelte.d.ts +3 -9
- package/dist/components/tree/tree-root.svelte +65 -80
- package/dist/components/tree/tree-root.svelte.d.ts +2 -12
- package/dist/components/tree/types.d.ts +59 -0
- package/dist/components/tree/types.js +1 -0
- package/dist/components/virtual/types.d.ts +23 -0
- package/dist/components/virtual/types.js +1 -0
- package/dist/components/virtual/virtual-root.svelte +239 -258
- package/dist/components/virtual/virtual-root.svelte.d.ts +1 -18
- package/package.json +1 -1
|
@@ -1,54 +1,41 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
<HtmlAtom
|
|
43
|
-
{bond}
|
|
44
|
-
class={['border-border', '$preset', klass]}
|
|
45
|
-
onmount={onmount?.bind(bond.state)}
|
|
46
|
-
ondestroy={ondestroy?.bind(bond.state)}
|
|
47
|
-
enter={enter?.bind(bond.state)}
|
|
48
|
-
exit={exit?.bind(bond.state)}
|
|
49
|
-
initial={initial?.bind(bond.state)}
|
|
50
|
-
animate={animate?.bind(bond.state)}
|
|
51
|
-
{...footerProps}
|
|
52
|
-
>
|
|
53
|
-
{@render children?.({ drawer: bond })}
|
|
54
|
-
</HtmlAtom>
|
|
1
|
+
<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='div', B extends Base = Base">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { SlideoverFooterProps } from './types';
|
|
4
|
+
import { DrawerBond } from './bond.svelte';
|
|
5
|
+
import { HtmlAtom, type Base } from '../atom';
|
|
6
|
+
|
|
7
|
+
type Element = HTMLElementTagNameMap[E];
|
|
8
|
+
|
|
9
|
+
const bond = DrawerBond.get();
|
|
10
|
+
|
|
11
|
+
let {
|
|
12
|
+
class: klass = '',
|
|
13
|
+
children = undefined,
|
|
14
|
+
onmount = undefined,
|
|
15
|
+
ondestroy = undefined,
|
|
16
|
+
animate = undefined,
|
|
17
|
+
enter = undefined,
|
|
18
|
+
exit = undefined,
|
|
19
|
+
initial = undefined,
|
|
20
|
+
...restProps
|
|
21
|
+
}: SlideoverFooterProps<E, B> & HTMLAttributes<Element> = $props();
|
|
22
|
+
|
|
23
|
+
const footerProps = $derived({
|
|
24
|
+
...bond?.footer(),
|
|
25
|
+
...restProps
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<HtmlAtom
|
|
30
|
+
{bond}
|
|
31
|
+
class={['border-border', '$preset', klass]}
|
|
32
|
+
onmount={onmount?.bind(bond.state)}
|
|
33
|
+
ondestroy={ondestroy?.bind(bond.state)}
|
|
34
|
+
enter={enter?.bind(bond.state)}
|
|
35
|
+
exit={exit?.bind(bond.state)}
|
|
36
|
+
initial={initial?.bind(bond.state)}
|
|
37
|
+
animate={animate?.bind(bond.state)}
|
|
38
|
+
{...footerProps}
|
|
39
|
+
>
|
|
40
|
+
{@render children?.({ drawer: bond })}
|
|
41
|
+
</HtmlAtom>
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
export type SlideoverFooterProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
|
|
2
|
-
children?: Snippet<[{
|
|
3
|
-
drawer?: DrawerBond;
|
|
4
|
-
}]>;
|
|
5
|
-
}>;
|
|
6
|
-
import type { Snippet } from 'svelte';
|
|
7
1
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
8
|
-
import type {
|
|
9
|
-
import {
|
|
10
|
-
import { type HtmlAtomProps, type Base } from '../atom';
|
|
2
|
+
import type { SlideoverFooterProps } from './types';
|
|
3
|
+
import { type Base } from '../atom';
|
|
11
4
|
declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
|
|
12
|
-
props:
|
|
13
|
-
children?: Snippet<[{
|
|
14
|
-
drawer?: DrawerBond;
|
|
15
|
-
}]>;
|
|
16
|
-
} & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
5
|
+
props: SlideoverFooterProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
17
6
|
exports: {};
|
|
18
7
|
bindings: "";
|
|
19
8
|
slots: {};
|
|
@@ -1,56 +1,43 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
preset="drawer.header"
|
|
45
|
-
class={['border-border', '$preset', klass]}
|
|
46
|
-
onmount={onmount?.bind(bond.state)}
|
|
47
|
-
ondestroy={ondestroy?.bind(bond.state)}
|
|
48
|
-
enter={enter?.bind(bond.state)}
|
|
49
|
-
exit={exit?.bind(bond.state)}
|
|
50
|
-
initial={initial?.bind(bond.state)}
|
|
51
|
-
animate={animate?.bind(bond.state)}
|
|
52
|
-
{...headerProps}
|
|
53
|
-
{...restProps}
|
|
54
|
-
>
|
|
55
|
-
{@render children?.({ drawer: bond })}
|
|
56
|
-
</HtmlAtom>
|
|
1
|
+
<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { SlideoverHeaderProps } from './types';
|
|
4
|
+
import { DrawerBond } from './bond.svelte';
|
|
5
|
+
import { HtmlAtom, type Base } from '../atom';
|
|
6
|
+
|
|
7
|
+
type Element = HTMLElementTagNameMap[E];
|
|
8
|
+
|
|
9
|
+
const bond = DrawerBond.get();
|
|
10
|
+
|
|
11
|
+
let {
|
|
12
|
+
class: klass = '',
|
|
13
|
+
children = undefined,
|
|
14
|
+
onmount = undefined,
|
|
15
|
+
ondestroy = undefined,
|
|
16
|
+
animate = undefined,
|
|
17
|
+
enter = undefined,
|
|
18
|
+
exit = undefined,
|
|
19
|
+
initial = undefined,
|
|
20
|
+
...restProps
|
|
21
|
+
}: SlideoverHeaderProps<E, B> & HTMLAttributes<Element> = $props();
|
|
22
|
+
|
|
23
|
+
const headerProps = $derived({
|
|
24
|
+
...bond?.header(),
|
|
25
|
+
...restProps
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<HtmlAtom
|
|
30
|
+
{bond}
|
|
31
|
+
preset="drawer.header"
|
|
32
|
+
class={['border-border', '$preset', klass]}
|
|
33
|
+
onmount={onmount?.bind(bond.state)}
|
|
34
|
+
ondestroy={ondestroy?.bind(bond.state)}
|
|
35
|
+
enter={enter?.bind(bond.state)}
|
|
36
|
+
exit={exit?.bind(bond.state)}
|
|
37
|
+
initial={initial?.bind(bond.state)}
|
|
38
|
+
animate={animate?.bind(bond.state)}
|
|
39
|
+
{...headerProps}
|
|
40
|
+
{...restProps}
|
|
41
|
+
>
|
|
42
|
+
{@render children?.({ drawer: bond })}
|
|
43
|
+
</HtmlAtom>
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
export type SlideoverHeaderProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
|
|
2
|
-
children?: Snippet<[{
|
|
3
|
-
drawer?: DrawerBond;
|
|
4
|
-
}]>;
|
|
5
|
-
}>;
|
|
6
|
-
import type { Snippet } from 'svelte';
|
|
7
1
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
8
|
-
import {
|
|
9
|
-
import type
|
|
10
|
-
import { type HtmlAtomProps, type Base } from '../atom';
|
|
2
|
+
import type { SlideoverHeaderProps } from './types';
|
|
3
|
+
import { type Base } from '../atom';
|
|
11
4
|
declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
|
|
12
|
-
props:
|
|
13
|
-
children?: Snippet<[{
|
|
14
|
-
drawer?: DrawerBond;
|
|
15
|
-
}]>;
|
|
16
|
-
} & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
5
|
+
props: SlideoverHeaderProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
17
6
|
exports: {};
|
|
18
7
|
bindings: "";
|
|
19
8
|
slots: {};
|
|
@@ -1,36 +1,11 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import type { Factory } from '../../types';
|
|
3
|
-
|
|
4
|
-
export type SlideoverRootProps<
|
|
5
|
-
E extends keyof HTMLElementTagNameMap,
|
|
6
|
-
B extends Base = Base
|
|
7
|
-
> = Override<
|
|
8
|
-
HtmlAtomProps<E, B>,
|
|
9
|
-
{
|
|
10
|
-
children?: Snippet<[{ drawer: DrawerBond }]>;
|
|
11
|
-
initial?: (node: HTMLElement, bond: DrawerBond) => void;
|
|
12
|
-
enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
|
|
13
|
-
exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
|
|
14
|
-
}
|
|
15
|
-
> & {
|
|
16
|
-
open?: boolean;
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
portal?: string | PortalBond;
|
|
19
|
-
onclose?: (event: Event, bond: DrawerBond) => void;
|
|
20
|
-
factory?: Factory<DrawerBond>;
|
|
21
|
-
};
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
1
|
<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
|
|
25
|
-
import type { Snippet } from 'svelte';
|
|
26
2
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
27
|
-
import type { Override } from '../../types';
|
|
28
3
|
import { defineProperty, defineState } from '../../utils';
|
|
29
|
-
import { type TransitionFunction } from '../element';
|
|
30
4
|
import Teleport from '../portal/teleport.svelte';
|
|
31
|
-
import type {
|
|
5
|
+
import type { Base } from '../atom';
|
|
32
6
|
import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
|
|
33
|
-
import {
|
|
7
|
+
import type { SlideoverRootProps } from './types';
|
|
8
|
+
import { ActivePortal } from '../portal';
|
|
34
9
|
|
|
35
10
|
type Element = HTMLElementTagNameMap[E];
|
|
36
11
|
|
|
@@ -1,40 +1,9 @@
|
|
|
1
|
-
import type { Factory } from '../../types';
|
|
2
|
-
export type SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
|
|
3
|
-
children?: Snippet<[{
|
|
4
|
-
drawer: DrawerBond;
|
|
5
|
-
}]>;
|
|
6
|
-
initial?: (node: HTMLElement, bond: DrawerBond) => void;
|
|
7
|
-
enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
|
|
8
|
-
exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
|
|
9
|
-
}> & {
|
|
10
|
-
open?: boolean;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
portal?: string | PortalBond;
|
|
13
|
-
onclose?: (event: Event, bond: DrawerBond) => void;
|
|
14
|
-
factory?: Factory<DrawerBond>;
|
|
15
|
-
};
|
|
16
|
-
import type { Snippet } from 'svelte';
|
|
17
1
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
18
|
-
import type {
|
|
19
|
-
import { type TransitionFunction } from '../element';
|
|
20
|
-
import type { HtmlAtomProps, Base } from '../atom';
|
|
2
|
+
import type { Base } from '../atom';
|
|
21
3
|
import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
|
|
22
|
-
import {
|
|
4
|
+
import type { SlideoverRootProps } from './types';
|
|
23
5
|
declare function $$render<E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base>(): {
|
|
24
|
-
props:
|
|
25
|
-
children?: Snippet<[{
|
|
26
|
-
drawer: DrawerBond;
|
|
27
|
-
}]>;
|
|
28
|
-
initial?: (node: HTMLElement, bond: DrawerBond) => void;
|
|
29
|
-
enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<"dialog">;
|
|
30
|
-
exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<"dialog">;
|
|
31
|
-
} & {
|
|
32
|
-
open?: boolean;
|
|
33
|
-
disabled?: boolean;
|
|
34
|
-
portal?: string | PortalBond;
|
|
35
|
-
onclose?: (event: Event, bond: DrawerBond) => void;
|
|
36
|
-
factory?: Factory<DrawerBond>;
|
|
37
|
-
} & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
6
|
+
props: SlideoverRootProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
38
7
|
exports: {
|
|
39
8
|
getBond: () => DrawerBond<DrawerBondProps<Record<string, unknown>>, DrawerBondState<DrawerBondProps>>;
|
|
40
9
|
};
|
|
@@ -1,57 +1,44 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
{bond}
|
|
46
|
-
preset="drawer.title"
|
|
47
|
-
class={['border-border', '$preset', klass]}
|
|
48
|
-
onmount={onmount?.bind(bond.state)}
|
|
49
|
-
ondestroy={ondestroy?.bind(bond.state)}
|
|
50
|
-
enter={enter?.bind(bond.state)}
|
|
51
|
-
exit={exit?.bind(bond.state)}
|
|
52
|
-
initial={initial?.bind(bond.state)}
|
|
53
|
-
animate={animate?.bind(bond.state)}
|
|
54
|
-
{...titleProps}
|
|
55
|
-
>
|
|
56
|
-
{@render children?.({ drawer: bond })}
|
|
57
|
-
</HtmlAtom>
|
|
1
|
+
<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import { HtmlAtom, type Base } from '../atom';
|
|
4
|
+
import { DrawerBond } from './bond.svelte';
|
|
5
|
+
import type { SlideoverTitleProps } from './types';
|
|
6
|
+
|
|
7
|
+
type Element = HTMLElementTagNameMap[E];
|
|
8
|
+
|
|
9
|
+
const bond = DrawerBond.get();
|
|
10
|
+
|
|
11
|
+
let {
|
|
12
|
+
class: klass = '',
|
|
13
|
+
as = 'h3' as E,
|
|
14
|
+
children,
|
|
15
|
+
onmount = undefined,
|
|
16
|
+
ondestroy = undefined,
|
|
17
|
+
animate = undefined,
|
|
18
|
+
enter = undefined,
|
|
19
|
+
exit = undefined,
|
|
20
|
+
initial = undefined,
|
|
21
|
+
...restProps
|
|
22
|
+
}: SlideoverTitleProps<E, B> & HTMLAttributes<Element> = $props();
|
|
23
|
+
|
|
24
|
+
const titleProps = $derived({
|
|
25
|
+
...bond?.title(),
|
|
26
|
+
...restProps
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<HtmlAtom
|
|
31
|
+
{as}
|
|
32
|
+
{bond}
|
|
33
|
+
preset="drawer.title"
|
|
34
|
+
class={['border-border', '$preset', klass]}
|
|
35
|
+
onmount={onmount?.bind(bond.state)}
|
|
36
|
+
ondestroy={ondestroy?.bind(bond.state)}
|
|
37
|
+
enter={enter?.bind(bond.state)}
|
|
38
|
+
exit={exit?.bind(bond.state)}
|
|
39
|
+
initial={initial?.bind(bond.state)}
|
|
40
|
+
animate={animate?.bind(bond.state)}
|
|
41
|
+
{...titleProps}
|
|
42
|
+
>
|
|
43
|
+
{@render children?.({ drawer: bond })}
|
|
44
|
+
</HtmlAtom>
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
export type SlideoverTitleProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
|
|
2
|
-
children?: Snippet<[{
|
|
3
|
-
drawer?: DrawerBond;
|
|
4
|
-
}]>;
|
|
5
|
-
}>;
|
|
6
|
-
import type { Snippet } from 'svelte';
|
|
7
1
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
8
|
-
import {
|
|
9
|
-
import type {
|
|
10
|
-
import { type HtmlAtomProps, type Base } from '../atom';
|
|
2
|
+
import { type Base } from '../atom';
|
|
3
|
+
import type { SlideoverTitleProps } from './types';
|
|
11
4
|
declare function $$render<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base>(): {
|
|
12
|
-
props:
|
|
13
|
-
children?: Snippet<[{
|
|
14
|
-
drawer?: DrawerBond;
|
|
15
|
-
}]>;
|
|
16
|
-
} & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
5
|
+
props: SlideoverTitleProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
|
|
17
6
|
exports: {};
|
|
18
7
|
bindings: "";
|
|
19
8
|
slots: {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export * as Drawer from './atoms';
|
|
2
2
|
export { clickoutDrawer, closeDrawer, openDrawer, drawer, toggleDrawer } from './attachments.svelte';
|
|
3
3
|
export { DrawerBond, type DrawerBondElements, type DrawerBondProps, DrawerBondState } from './bond.svelte';
|
|
4
|
+
export * from './types';
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { HtmlAtomProps, Base } from '../atom';
|
|
3
|
+
import type { Override, Factory } from '../../types';
|
|
4
|
+
import type { TransitionFunction } from '../element';
|
|
5
|
+
import type { PortalBond } from '../portal';
|
|
6
|
+
import type { DrawerBond } from './bond.svelte';
|
|
7
|
+
/**
|
|
8
|
+
* Extend this interface to add custom drawer/slideover root properties in your application.
|
|
9
|
+
*/
|
|
10
|
+
export interface DrawerExtendProps {
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Extend this interface to add custom drawer/slideover content properties in your application.
|
|
14
|
+
*/
|
|
15
|
+
export interface DrawerContentExtendProps {
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Extend this interface to add custom drawer/slideover header properties in your application.
|
|
19
|
+
*/
|
|
20
|
+
export interface DrawerHeaderExtendProps {
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Extend this interface to add custom drawer/slideover body properties in your application.
|
|
24
|
+
*/
|
|
25
|
+
export interface DrawerBodyExtendProps {
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Extend this interface to add custom drawer/slideover footer properties in your application.
|
|
29
|
+
*/
|
|
30
|
+
export interface DrawerFooterExtendProps {
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Extend this interface to add custom drawer/slideover title properties in your application.
|
|
34
|
+
*/
|
|
35
|
+
export interface DrawerTitleExtendProps {
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Extend this interface to add custom drawer/slideover description properties in your application.
|
|
39
|
+
*/
|
|
40
|
+
export interface DrawerDescriptionExtendProps {
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Extend this interface to add custom drawer/slideover backdrop properties in your application.
|
|
44
|
+
*/
|
|
45
|
+
export interface DrawerBackdropExtendProps {
|
|
46
|
+
}
|
|
47
|
+
export interface SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
|
|
48
|
+
children?: Snippet<[{
|
|
49
|
+
drawer: DrawerBond;
|
|
50
|
+
}]>;
|
|
51
|
+
initial?: (node: HTMLElement, bond: DrawerBond) => void;
|
|
52
|
+
enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
|
|
53
|
+
exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
|
|
54
|
+
}>, DrawerExtendProps {
|
|
55
|
+
open?: boolean;
|
|
56
|
+
disabled?: boolean;
|
|
57
|
+
portal?: string | PortalBond;
|
|
58
|
+
onclose?: (event: Event, bond: DrawerBond) => void;
|
|
59
|
+
factory?: Factory<DrawerBond>;
|
|
60
|
+
}
|
|
61
|
+
export interface SlideoverContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerContentExtendProps {
|
|
62
|
+
}
|
|
63
|
+
export interface SlideoverHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
|
|
64
|
+
children?: Snippet<[{
|
|
65
|
+
drawer?: DrawerBond;
|
|
66
|
+
}]>;
|
|
67
|
+
}>, DrawerHeaderExtendProps {
|
|
68
|
+
}
|
|
69
|
+
export interface DrawerBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
|
|
70
|
+
children?: Snippet<[{
|
|
71
|
+
drawer?: DrawerBond;
|
|
72
|
+
}]>;
|
|
73
|
+
}>, DrawerBodyExtendProps {
|
|
74
|
+
}
|
|
75
|
+
export interface SlideoverFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
|
|
76
|
+
children?: Snippet<[{
|
|
77
|
+
drawer?: DrawerBond;
|
|
78
|
+
}]>;
|
|
79
|
+
}>, DrawerFooterExtendProps {
|
|
80
|
+
}
|
|
81
|
+
export interface SlideoverTitleProps<E extends keyof HTMLElementTagNameMap = 'h2', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerTitleExtendProps {
|
|
82
|
+
}
|
|
83
|
+
export interface SlideoverDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerDescriptionExtendProps {
|
|
84
|
+
}
|
|
85
|
+
export interface SlideoverBackdropProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, DrawerBackdropExtendProps {
|
|
86
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|