@agnos-ui/svelte-bootstrap 0.4.4 → 0.5.0

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.
Files changed (103) hide show
  1. package/README.md +2 -2
  2. package/components/accordion/Accordion.svelte +20 -18
  3. package/components/accordion/Accordion.svelte.d.ts +8 -23
  4. package/components/accordion/Item.svelte +40 -44
  5. package/components/accordion/Item.svelte.d.ts +5 -20
  6. package/components/accordion/ItemDefaultStructure.svelte +17 -27
  7. package/components/accordion/ItemDefaultStructure.svelte.d.ts +3 -17
  8. package/components/accordion/accordion.d.ts +11 -6
  9. package/components/accordion/accordion.gen.d.ts +37 -9
  10. package/components/accordion/accordion.js +10 -0
  11. package/components/alert/Alert.svelte +36 -40
  12. package/components/alert/Alert.svelte.d.ts +5 -21
  13. package/components/alert/AlertDefaultStructure.svelte +8 -12
  14. package/components/alert/AlertDefaultStructure.svelte.d.ts +3 -17
  15. package/components/alert/alert.gen.d.ts +21 -2
  16. package/components/alert/index.d.ts +1 -1
  17. package/components/alert/index.js +1 -1
  18. package/components/collapse/Collapse.svelte +33 -0
  19. package/components/collapse/Collapse.svelte.d.ts +8 -0
  20. package/components/collapse/collapse.gen.d.ts +146 -0
  21. package/components/collapse/collapse.gen.js +14 -0
  22. package/components/collapse/index.d.ts +3 -0
  23. package/components/collapse/index.js +3 -0
  24. package/components/modal/Modal.svelte +45 -47
  25. package/components/modal/Modal.svelte.d.ts +16 -14
  26. package/components/modal/ModalDefaultHeader.svelte +10 -17
  27. package/components/modal/ModalDefaultHeader.svelte.d.ts +15 -12
  28. package/components/modal/ModalDefaultStructure.svelte +10 -36
  29. package/components/modal/ModalDefaultStructure.svelte.d.ts +15 -12
  30. package/components/modal/index.d.ts +1 -1
  31. package/components/modal/index.js +1 -1
  32. package/components/modal/modal.gen.d.ts +35 -18
  33. package/components/modal/modalService.d.ts +19 -1
  34. package/components/modal/modalService.js +21 -2
  35. package/components/pagination/Pagination.svelte +39 -47
  36. package/components/pagination/Pagination.svelte.d.ts +3 -21
  37. package/components/pagination/PaginationDefaultPages.svelte +13 -43
  38. package/components/pagination/PaginationDefaultPages.svelte.d.ts +3 -17
  39. package/components/pagination/PaginationDefaultStructure.svelte +18 -89
  40. package/components/pagination/PaginationDefaultStructure.svelte.d.ts +3 -17
  41. package/components/pagination/index.d.ts +1 -1
  42. package/components/pagination/index.js +1 -1
  43. package/components/pagination/pagination.gen.d.ts +49 -29
  44. package/components/progressbar/Progressbar.svelte +28 -31
  45. package/components/progressbar/Progressbar.svelte.d.ts +3 -21
  46. package/components/progressbar/ProgressbarDefaultStructure.svelte +6 -11
  47. package/components/progressbar/ProgressbarDefaultStructure.svelte.d.ts +3 -17
  48. package/components/progressbar/index.d.ts +1 -1
  49. package/components/progressbar/index.js +1 -1
  50. package/components/progressbar/progressbar.gen.d.ts +21 -4
  51. package/components/rating/Rating.svelte +33 -27
  52. package/components/rating/Rating.svelte.d.ts +3 -18
  53. package/components/rating/index.d.ts +1 -1
  54. package/components/rating/index.js +1 -1
  55. package/components/rating/rating.gen.d.ts +25 -17
  56. package/components/select/Select.svelte +57 -81
  57. package/components/select/Select.svelte.d.ts +16 -14
  58. package/components/select/index.d.ts +1 -1
  59. package/components/select/index.js +1 -1
  60. package/components/select/select.gen.d.ts +41 -25
  61. package/components/slider/Slider.svelte +39 -40
  62. package/components/slider/Slider.svelte.d.ts +3 -21
  63. package/components/slider/SliderDefaultHandle.svelte +7 -4
  64. package/components/slider/SliderDefaultHandle.svelte.d.ts +3 -17
  65. package/components/slider/SliderDefaultStructure.svelte +21 -75
  66. package/components/slider/SliderDefaultStructure.svelte.d.ts +3 -17
  67. package/components/slider/index.d.ts +1 -1
  68. package/components/slider/index.js +1 -1
  69. package/components/slider/slider.gen.d.ts +54 -33
  70. package/components/toast/Toast.svelte +43 -40
  71. package/components/toast/Toast.svelte.d.ts +5 -21
  72. package/components/toast/ToastDefaultStructure.svelte +13 -23
  73. package/components/toast/ToastDefaultStructure.svelte.d.ts +3 -17
  74. package/components/toast/index.d.ts +1 -1
  75. package/components/toast/index.js +1 -1
  76. package/components/toast/toast.gen.d.ts +22 -2
  77. package/config.d.ts +1 -12
  78. package/config.gen.d.ts +5 -0
  79. package/generated/index.d.ts +1 -1
  80. package/generated/index.js +1 -1
  81. package/generated/utils/widget.svelte.d.ts +1 -0
  82. package/generated/utils/widget.svelte.js +1 -0
  83. package/index.d.ts +1 -0
  84. package/index.js +1 -0
  85. package/package.json +8 -7
  86. package/components/alert/alert.d.ts +0 -5
  87. package/components/alert/alert.js +0 -1
  88. package/components/modal/modal.d.ts +0 -5
  89. package/components/modal/modal.js +0 -1
  90. package/components/pagination/pagination.d.ts +0 -5
  91. package/components/pagination/pagination.js +0 -1
  92. package/components/progressbar/progressbar.d.ts +0 -5
  93. package/components/progressbar/progressbar.js +0 -1
  94. package/components/rating/rating.d.ts +0 -5
  95. package/components/rating/rating.js +0 -1
  96. package/components/select/select.d.ts +0 -5
  97. package/components/select/select.js +0 -1
  98. package/components/slider/slider.d.ts +0 -5
  99. package/components/slider/slider.js +0 -1
  100. package/components/toast/toast.d.ts +0 -5
  101. package/components/toast/toast.js +0 -1
  102. package/generated/utils/widget.d.ts +0 -1
  103. package/generated/utils/widget.js +0 -1
@@ -7,7 +7,14 @@ import type { TransitionFn } from '@agnos-ui/svelte-headless/services/transition
7
7
  */
8
8
  declare const export_getAlertDefaultConfig: () => AlertProps;
9
9
  export { export_getAlertDefaultConfig as getAlertDefaultConfig };
10
- export type AlertContext = WidgetSlotContext<AlertWidget>;
10
+ /**
11
+ * Represents the context for an Alert component.
12
+ */
13
+ export interface AlertContext extends WidgetSlotContext<AlertWidget> {
14
+ }
15
+ /**
16
+ * Represents the state of an alert component.
17
+ */
11
18
  export interface AlertState {
12
19
  /**
13
20
  * Is `true` when the alert is hidden. Compared to `visible`, this is updated after the transition is executed.
@@ -53,6 +60,9 @@ export interface AlertState {
53
60
  */
54
61
  type: BSContextualClass;
55
62
  }
63
+ /**
64
+ * Represents the properties for the Alert component.
65
+ */
56
66
  export interface AlertProps {
57
67
  /**
58
68
  * The transition function will be executed when the alert is displayed or hidden.
@@ -147,7 +157,10 @@ export interface AlertProps {
147
157
  */
148
158
  type: BSContextualClass;
149
159
  }
150
- export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, AlertDirectives>;
160
+ /**
161
+ * Represents an alert widget component.
162
+ */
163
+ export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, AlertDirectives>;
151
164
  /**
152
165
  * Create an AlertWidget with given config props
153
166
  * @param config - an optional alert config
@@ -155,6 +168,9 @@ export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, Alert
155
168
  */
156
169
  declare const export_createAlert: WidgetFactory<AlertWidget>;
157
170
  export { export_createAlert as createAlert };
171
+ /**
172
+ * Represents the API for an alert component.
173
+ */
158
174
  export interface AlertApi {
159
175
  /**
160
176
  * Triggers alert closing programmatically (same as clicking on the close button (×)).
@@ -165,6 +181,9 @@ export interface AlertApi {
165
181
  */
166
182
  open(): void;
167
183
  }
184
+ /**
185
+ * Represents the directives for an alert component.
186
+ */
168
187
  export interface AlertDirectives {
169
188
  /**
170
189
  * the transition directive, piloting what is the visual effect of going from hidden to visible
@@ -1,3 +1,3 @@
1
1
  import Alert from './Alert.svelte';
2
- export * from './alert';
2
+ export * from './alert.gen';
3
3
  export { Alert };
@@ -1,3 +1,3 @@
1
1
  import Alert from './Alert.svelte';
2
- export * from './alert';
2
+ export * from './alert.gen';
3
3
  export { Alert };
@@ -0,0 +1,33 @@
1
+ <script lang="ts">
2
+ import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
3
+ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
4
+
5
+ import type {CollapseProps, CollapseApi} from './collapse.gen';
6
+ import {createCollapse} from './collapse.gen';
7
+ import {callWidgetFactory} from '../../config';
8
+ import type {Snippet} from 'svelte';
9
+
10
+ let {children, visible = $bindable(), ...props}: Partial<CollapseProps> & {children: Snippet} = $props();
11
+
12
+ const {
13
+ directives: {collapseDirective},
14
+ api: collapseApi,
15
+ } = callWidgetFactory({
16
+ factory: createCollapse,
17
+ widgetName: 'collapse',
18
+ get props() {
19
+ return {...props, visible};
20
+ },
21
+ events: {
22
+ onVisibleChange: (event) => {
23
+ visible = event;
24
+ },
25
+ },
26
+ enablePatchChanged: true,
27
+ });
28
+ export const api: CollapseApi = collapseApi;
29
+ </script>
30
+
31
+ <div use:collapseDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(collapseDirective)}>
32
+ {@render children()}
33
+ </div>
@@ -0,0 +1,8 @@
1
+ import type { CollapseProps, CollapseApi } from './collapse.gen';
2
+ import type { Snippet } from 'svelte';
3
+ declare const Collapse: import("svelte").Component<Partial<CollapseProps> & {
4
+ children: Snippet;
5
+ }, {
6
+ api: CollapseApi;
7
+ }, "visible">;
8
+ export default Collapse;
@@ -0,0 +1,146 @@
1
+ import type { PropsConfig, Directive, Widget } from '@agnos-ui/svelte-headless/types';
2
+ /**
3
+ * Retrieve a shallow copy of the default collapse config
4
+ * @returns the default collapse config
5
+ */
6
+ declare const export_getCollapseDefaultConfig: () => CollapseProps;
7
+ export { export_getCollapseDefaultConfig as getCollapseDefaultConfig };
8
+ /**
9
+ * Create an CollapseWidget with given config props
10
+ * @param config - an optional collapse config
11
+ * @returns an CollapseWidget
12
+ */
13
+ declare const export_createCollapse: (config?: PropsConfig<CollapseProps>) => CollapseWidget;
14
+ export { export_createCollapse as createCollapse };
15
+ /**
16
+ * Represents the state of a collapse component.
17
+ * Extends the properties and state from `CollapseCommonPropsAndState`.
18
+ */
19
+ export interface CollapseState {
20
+ /**
21
+ * Is `true` when the collapse is hidden. Compared to `visible`, this is updated after the transition is executed.
22
+ */
23
+ hidden: boolean;
24
+ /**
25
+ * CSS classes to be applied on the widget main container
26
+ *
27
+ * @defaultValue `''`
28
+ */
29
+ className: string;
30
+ /**
31
+ * If `true`, collapse will be done horizontally.
32
+ *
33
+ * @defaultValue `false`
34
+ */
35
+ horizontal: boolean;
36
+ /**
37
+ * If `true` the collapse is visible to the user
38
+ *
39
+ * @defaultValue `true`
40
+ */
41
+ visible: boolean;
42
+ }
43
+ /**
44
+ * Properties for the Collapse component.
45
+ */
46
+ export interface CollapseProps {
47
+ /**
48
+ * Callback called when the collapse visibility changed.
49
+ *
50
+ * @defaultValue
51
+ * ```ts
52
+ * () => {}
53
+ * ```
54
+ * @param visible - The new visibility state of the collapse.
55
+ */
56
+ onVisibleChange: (visible: boolean) => void;
57
+ /**
58
+ * Callback called when the collapse is hidden.
59
+ *
60
+ * @defaultValue
61
+ * ```ts
62
+ * () => {}
63
+ * ```
64
+ */
65
+ onHidden: () => void;
66
+ /**
67
+ * Callback called when the collapse is shown.
68
+ *
69
+ * @defaultValue
70
+ * ```ts
71
+ * () => {}
72
+ * ```
73
+ */
74
+ onShown: () => void;
75
+ /**
76
+ * If `true`, collapse opening will be animated at init time.
77
+ *
78
+ * @defaultValue `false`
79
+ */
80
+ animatedOnInit: boolean;
81
+ /**
82
+ * If `true`, collapse closing and opening will be animated.
83
+ *
84
+ * @defaultValue `true`
85
+ */
86
+ animated: boolean;
87
+ /**
88
+ * id of the collapse
89
+ *
90
+ * @defaultValue `''`
91
+ */
92
+ id: string;
93
+ /**
94
+ * CSS classes to be applied on the widget main container
95
+ *
96
+ * @defaultValue `''`
97
+ */
98
+ className: string;
99
+ /**
100
+ * If `true`, collapse will be done horizontally.
101
+ *
102
+ * @defaultValue `false`
103
+ */
104
+ horizontal: boolean;
105
+ /**
106
+ * If `true` the collapse is visible to the user
107
+ *
108
+ * @defaultValue `true`
109
+ */
110
+ visible: boolean;
111
+ }
112
+ /**
113
+ * Interface representing the API for a collapsible component.
114
+ */
115
+ export interface CollapseApi {
116
+ /**
117
+ * Triggers collapse closing programmatically.
118
+ */
119
+ close(): void;
120
+ /**
121
+ * Triggers the collapse content to be displayed for the user.
122
+ */
123
+ open(): void;
124
+ /**
125
+ * Toggles the collapse content visibility.
126
+ */
127
+ toggle(): void;
128
+ }
129
+ /**
130
+ * Interface representing the directives used in a collapse component.
131
+ */
132
+ export interface CollapseDirectives {
133
+ /**
134
+ * Directive to apply the collapse.
135
+ */
136
+ collapseDirective: Directive;
137
+ }
138
+ /**
139
+ * Represents a widget for handling collapse functionality.
140
+ *
141
+ * This type defines the structure of a CollapseWidget, which includes properties, state, API, and directives
142
+ * necessary for managing the collapse behavior in the UI.
143
+ *
144
+ * @type {Widget<CollapseProps, CollapseState, CollapseApi, CollapseDirectives>}
145
+ */
146
+ export type CollapseWidget = Widget<CollapseProps, CollapseState, CollapseApi, CollapseDirectives>;
@@ -0,0 +1,14 @@
1
+ import { getCollapseDefaultConfig, createCollapse } from '@agnos-ui/core-bootstrap/components/collapse';
2
+ /**
3
+ * Retrieve a shallow copy of the default collapse config
4
+ * @returns the default collapse config
5
+ */
6
+ const export_getCollapseDefaultConfig = getCollapseDefaultConfig;
7
+ export { export_getCollapseDefaultConfig as getCollapseDefaultConfig };
8
+ /**
9
+ * Create an CollapseWidget with given config props
10
+ * @param config - an optional collapse config
11
+ * @returns an CollapseWidget
12
+ */
13
+ const export_createCollapse = createCollapse;
14
+ export { export_createCollapse as createCollapse };
@@ -0,0 +1,3 @@
1
+ import Collapse from './Collapse.svelte';
2
+ export * from './collapse.gen';
3
+ export { Collapse };
@@ -0,0 +1,3 @@
1
+ import Collapse from './Collapse.svelte';
2
+ export * from './collapse.gen';
3
+ export { Collapse };
@@ -1,59 +1,57 @@
1
- <script context="module">
1
+ <script lang="ts" generics="Data">
2
2
  import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
3
3
  import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
4
- import { toSlotContextWidget } from "@agnos-ui/svelte-headless/types";
5
- import { createModal } from "./modal";
6
- import { Slot } from "@agnos-ui/svelte-headless/slot";
7
- import { callWidgetFactory } from "../../config";
8
- import ModalDefaultHeader from "./ModalDefaultHeader.svelte";
9
- import ModalDefaultStructure from "./ModalDefaultStructure.svelte";
10
- const defaultConfig = {
11
- structure: ModalDefaultStructure,
12
- header: ModalDefaultHeader
13
- };
14
- </script>
15
4
 
16
- <script>export let visible = void 0;
17
- const widget = callWidgetFactory({
18
- factory: createModal,
19
- widgetName: "modal",
20
- $$slots,
21
- $$props,
22
- defaultConfig,
23
- events: {
24
- onVisibleChange: (event) => {
25
- visible = event;
26
- }
27
- }
28
- });
29
- export const api = widget.api;
30
- const {
31
- stores: { backdropHidden$, hidden$, structure$ },
32
- directives: { backdropDirective, backdropPortalDirective, modalDirective, modalPortalDirective },
33
- state$
34
- } = widget;
35
- $: widget.patchChangedProps($$props);
36
- $: slotContext = { widget: toSlotContextWidget(widget), state: $state$ };
5
+ import type {ModalWidget, ModalProps, ModalApi, ModalContext} from './modal.gen';
6
+ import {createModal} from './modal.gen';
7
+ import {Slot} from '@agnos-ui/svelte-headless/slot';
8
+ import {callWidgetFactory} from '../../config';
9
+ import ModalDefaultHeader from './ModalDefaultHeader.svelte';
10
+ import ModalDefaultStructure from './ModalDefaultStructure.svelte';
11
+
12
+ let {visible = $bindable(), ...props}: Partial<ModalProps<Data>> = $props();
13
+
14
+ const widget = callWidgetFactory<ModalWidget<Data>>({
15
+ factory: createModal,
16
+ widgetName: 'modal',
17
+ get props() {
18
+ return {...props, visible};
19
+ },
20
+ enablePatchChanged: true,
21
+ defaultConfig: {
22
+ header,
23
+ structure,
24
+ },
25
+ events: {
26
+ onVisibleChange: (event) => {
27
+ visible = event;
28
+ },
29
+ },
30
+ });
31
+ export const api: ModalApi<Data> = widget.api;
32
+
33
+ const {
34
+ directives: {backdropDirective, backdropPortalDirective, modalDirective, modalPortalDirective},
35
+ state,
36
+ } = widget;
37
37
  </script>
38
38
 
39
- {#if !$backdropHidden$}
40
- <div use:__AgnosUISveltePreprocess__classDirective={"modal-backdrop"} use:backdropPortalDirective use:backdropDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(backdropPortalDirective, backdropDirective, [__AgnosUISveltePreprocess__classDirective, "modal-backdrop"])} />
39
+ {#snippet structure(props: ModalContext<Data>)}
40
+ <ModalDefaultStructure {...props} />
41
+ {/snippet}
42
+ {#snippet header(props: ModalContext<Data>)}
43
+ <ModalDefaultHeader {...props} />
44
+ {/snippet}
45
+
46
+ {#if !state.backdropHidden}
47
+ <div use:__AgnosUISveltePreprocess__classDirective={"modal-backdrop"} use:backdropPortalDirective use:backdropDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(backdropPortalDirective, backdropDirective, [__AgnosUISveltePreprocess__classDirective, "modal-backdrop"])}></div>
41
48
  {/if}
42
49
 
43
- {#if !$hidden$}
50
+ {#if !state.hidden}
44
51
  <div use:__AgnosUISveltePreprocess__classDirective={"modal d-block"} use:modalPortalDirective use:modalDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(modalPortalDirective, modalDirective, [__AgnosUISveltePreprocess__classDirective, "modal d-block"])}>
45
- <div class="modal-dialog {$state$.fullscreen ? 'modal-fullscreen' : ''}">
52
+ <div class="modal-dialog {state.fullscreen ? 'modal-fullscreen' : ''}">
46
53
  <div class="modal-content">
47
- <Slot slotContent={$structure$} props={slotContext} let:component let:props>
48
- <svelte:fragment slot="slot" let:props><slot name="structure" {...props} /></svelte:fragment>
49
- <svelte:component this={component} {...props}>
50
- <svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
51
- <svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
52
- <svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
53
- <svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
54
- <svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
55
- </svelte:component>
56
- </Slot>
54
+ <Slot content={state.structure} props={widget} />
57
55
  </div>
58
56
  </div>
59
57
  </div>
@@ -1,18 +1,20 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { ModalProps, ModalSlots, ModalApi } from './modal';
1
+ import type { ModalProps, ModalApi } from './modal.gen';
3
2
  declare class __sveltets_Render<Data> {
4
- props(): {
5
- api?: ModalApi<Data> | undefined;
6
- } & Partial<ModalProps<Data>>;
7
- events(): {} & {
8
- [evt: string]: CustomEvent<any>;
3
+ props(): Partial<ModalProps<Data>>;
4
+ events(): {};
5
+ slots(): {};
6
+ bindings(): "visible";
7
+ exports(): {
8
+ api: ModalApi<Data>;
9
9
  };
10
- slots(): ModalSlots;
11
10
  }
12
- export type ModalProps_<Data> = ReturnType<__sveltets_Render<Data>['props']>;
13
- export type ModalEvents<Data> = ReturnType<__sveltets_Render<Data>['events']>;
14
- export type ModalSlots_<Data> = ReturnType<__sveltets_Render<Data>['slots']>;
15
- export default class Modal<Data> extends SvelteComponent<ModalProps_<Data>, ModalEvents<Data>, ModalSlots_<Data>> {
16
- get api(): ModalApi<Data>;
11
+ interface $$IsomorphicComponent {
12
+ new <Data>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
13
+ $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
14
+ } & ReturnType<__sveltets_Render<Data>['exports']>;
15
+ <Data>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
16
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
17
17
  }
18
- export {};
18
+ declare const Modal: $$IsomorphicComponent;
19
+ type Modal<Data> = InstanceType<typeof Modal<Data>>;
20
+ export default Modal;
@@ -1,24 +1,17 @@
1
- <script>
1
+ <script lang="ts" generics="Data">
2
2
  import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
3
3
  import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
4
- import { Slot } from "@agnos-ui/svelte-headless/slot";
5
- export let state;
6
- export let widget;
7
- $: slotContext = { widget, state };
4
+
5
+ import type {ModalContext} from './modal.gen';
6
+ import {Slot} from '@agnos-ui/svelte-headless/slot';
7
+
8
+ let widget: ModalContext<Data> = $props();
8
9
  </script>
9
10
 
10
11
  <h5 class="modal-title">
11
- <Slot slotContent={state.title} props={slotContext} let:component let:props>
12
- <svelte:fragment slot="slot" let:props><slot name="title" {...props} /></svelte:fragment>
13
- <svelte:component this={component} {...props}>
14
- <svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
15
- <svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
16
- <svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
17
- <svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
18
- <svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
19
- </svelte:component>
20
- </Slot>
12
+ <Slot content={widget.state.title} props={widget} />
21
13
  </h5>
22
- {#if state.closeButton}
23
- <button use:__AgnosUISveltePreprocess__classDirective={"btn-close"} use:widget.directives.closeButtonDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.closeButtonDirective, [__AgnosUISveltePreprocess__classDirective, "btn-close"])} />
14
+ {#if widget.state.closeButton}
15
+ <!-- svelte-ignore a11y_consider_explicit_label -->
16
+ <button use:__AgnosUISveltePreprocess__classDirective={"btn-close"} use:widget.directives.closeButtonDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.closeButtonDirective, [__AgnosUISveltePreprocess__classDirective, "btn-close"])}></button>
24
17
  {/if}
@@ -1,15 +1,18 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { ModalSlots } from './modal';
1
+ import type { ModalContext } from './modal.gen';
3
2
  declare class __sveltets_Render<Data> {
4
- props(): WidgetSlotContext<Widget<import("./modal.gen").ModalProps<Data_1>, import("./modal.gen").ModalState<Data_1>, import("./modal.gen").ModalApi<Data_1>, import("./modal.gen").ModalActions, import("./modal.gen").ModalDirectives>>;
5
- events(): {} & {
6
- [evt: string]: CustomEvent<any>;
7
- };
8
- slots(): ModalSlots;
3
+ props(): ModalContext<Data>;
4
+ events(): {};
5
+ slots(): {};
6
+ bindings(): "";
7
+ exports(): {};
9
8
  }
10
- export type ModalDefaultHeaderProps<Data> = ReturnType<__sveltets_Render<Data>['props']>;
11
- export type ModalDefaultHeaderEvents<Data> = ReturnType<__sveltets_Render<Data>['events']>;
12
- export type ModalDefaultHeaderSlots<Data> = ReturnType<__sveltets_Render<Data>['slots']>;
13
- export default class ModalDefaultHeader<Data> extends SvelteComponent<ModalDefaultHeaderProps<Data>, ModalDefaultHeaderEvents<Data>, ModalDefaultHeaderSlots<Data>> {
9
+ interface $$IsomorphicComponent {
10
+ new <Data>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
11
+ $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
12
+ } & ReturnType<__sveltets_Render<Data>['exports']>;
13
+ <Data>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
14
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
14
15
  }
15
- export {};
16
+ declare const ModalDefaultHeader: $$IsomorphicComponent;
17
+ type ModalDefaultHeader<Data> = InstanceType<typeof ModalDefaultHeader<Data>>;
18
+ export default ModalDefaultHeader;
@@ -1,47 +1,21 @@
1
- <script>import { Slot } from "@agnos-ui/svelte-headless/slot";
2
- export let state;
3
- export let widget;
4
- $: slotContext = { widget, state };
1
+ <script lang="ts" generics="Data">
2
+ import type {ModalContext} from './modal.gen';
3
+ import {Slot} from '@agnos-ui/svelte-headless/slot';
4
+
5
+ let widget: ModalContext<Data> = $props();
5
6
  </script>
6
7
 
7
- {#if state.title}
8
+ {#if widget.state.title}
8
9
  <div class="modal-header">
9
- <Slot slotContent={state.header} props={slotContext} let:component let:props>
10
- <svelte:fragment slot="slot" let:props><slot name="header" {...props} /></svelte:fragment>
11
- <svelte:component this={component} {...props}>
12
- <svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
13
- <svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
14
- <svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
15
- <svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
16
- <svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
17
- </svelte:component>
18
- </Slot>
10
+ <Slot content={widget.state.header} props={widget} />
19
11
  </div>
20
12
  {/if}
21
13
 
22
14
  <div class="modal-body">
23
- <Slot slotContent={state.children} props={slotContext} let:component let:props>
24
- <svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
25
- <svelte:component this={component} {...props}>
26
- <svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
27
- <svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
28
- <svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
29
- <svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
30
- <svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
31
- </svelte:component>
32
- </Slot>
15
+ <Slot content={widget.state.children} props={widget} />
33
16
  </div>
34
- {#if state.footer}
17
+ {#if widget.state.footer}
35
18
  <div class="modal-footer">
36
- <Slot slotContent={state.footer} props={slotContext} let:component let:props>
37
- <svelte:fragment slot="slot" let:props><slot name="footer" {...props} /></svelte:fragment>
38
- <svelte:component this={component} {...props}>
39
- <svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
40
- <svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
41
- <svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
42
- <svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
43
- <svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
44
- </svelte:component>
45
- </Slot>
19
+ <Slot content={widget.state.footer} props={widget} />
46
20
  </div>
47
21
  {/if}
@@ -1,15 +1,18 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { ModalSlots } from './modal';
1
+ import type { ModalContext } from './modal.gen';
3
2
  declare class __sveltets_Render<Data> {
4
- props(): WidgetSlotContext<Widget<import("./modal.gen").ModalProps<Data_1>, import("./modal.gen").ModalState<Data_1>, import("./modal.gen").ModalApi<Data_1>, import("./modal.gen").ModalActions, import("./modal.gen").ModalDirectives>>;
5
- events(): {} & {
6
- [evt: string]: CustomEvent<any>;
7
- };
8
- slots(): ModalSlots;
3
+ props(): ModalContext<Data>;
4
+ events(): {};
5
+ slots(): {};
6
+ bindings(): "";
7
+ exports(): {};
9
8
  }
10
- export type ModalDefaultStructureProps<Data> = ReturnType<__sveltets_Render<Data>['props']>;
11
- export type ModalDefaultStructureEvents<Data> = ReturnType<__sveltets_Render<Data>['events']>;
12
- export type ModalDefaultStructureSlots<Data> = ReturnType<__sveltets_Render<Data>['slots']>;
13
- export default class ModalDefaultStructure<Data> extends SvelteComponent<ModalDefaultStructureProps<Data>, ModalDefaultStructureEvents<Data>, ModalDefaultStructureSlots<Data>> {
9
+ interface $$IsomorphicComponent {
10
+ new <Data>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Data>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Data>['props']>, ReturnType<__sveltets_Render<Data>['events']>, ReturnType<__sveltets_Render<Data>['slots']>> & {
11
+ $$bindings?: ReturnType<__sveltets_Render<Data>['bindings']>;
12
+ } & ReturnType<__sveltets_Render<Data>['exports']>;
13
+ <Data>(internal: unknown, props: ReturnType<__sveltets_Render<Data>['props']> & {}): ReturnType<__sveltets_Render<Data>['exports']>;
14
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
14
15
  }
15
- export {};
16
+ declare const ModalDefaultStructure: $$IsomorphicComponent;
17
+ type ModalDefaultStructure<Data> = InstanceType<typeof ModalDefaultStructure<Data>>;
18
+ export default ModalDefaultStructure;
@@ -1,4 +1,4 @@
1
1
  import Modal from './Modal.svelte';
2
- export * from './modal';
2
+ export * from './modal.gen';
3
3
  export * from './modalService';
4
4
  export { Modal };
@@ -1,4 +1,4 @@
1
1
  import Modal from './Modal.svelte';
2
- export * from './modal';
2
+ export * from './modal.gen';
3
3
  export * from './modalService';
4
4
  export { Modal };