@agnos-ui/core 0.0.1-alpha.1 → 0.0.1-alpha.10
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/{accordion.d.ts → components/accordion/accordion.d.ts} +27 -18
- package/{accordion.js → components/accordion/accordion.js} +80 -76
- package/components/accordion/index.d.ts +1 -0
- package/components/accordion/index.js +1 -0
- package/components/alert/alert.d.ts +31 -0
- package/components/alert/alert.js +22 -0
- package/{alert.d.ts → components/alert/common.d.ts} +17 -21
- package/{alert.js → components/alert/common.js} +21 -19
- package/components/alert/index.d.ts +2 -0
- package/components/alert/index.js +2 -0
- package/components/modal/index.d.ts +1 -0
- package/components/modal/index.js +1 -0
- package/{modal → components/modal}/modal.d.ts +28 -21
- package/{modal → components/modal}/modal.js +58 -28
- package/components/pagination/index.d.ts +2 -0
- package/components/pagination/index.js +2 -0
- package/{pagination.d.ts → components/pagination/pagination.d.ts} +2 -3
- package/{pagination.js → components/pagination/pagination.js} +5 -4
- package/components/progressbar/index.d.ts +1 -0
- package/components/progressbar/index.js +1 -0
- package/components/progressbar/progressbar.d.ts +86 -0
- package/components/progressbar/progressbar.js +78 -0
- package/components/rating/index.d.ts +1 -0
- package/components/rating/index.js +1 -0
- package/{rating.d.ts → components/rating/rating.d.ts} +4 -5
- package/{rating.js → components/rating/rating.js} +6 -9
- package/components/select/index.d.ts +1 -0
- package/components/select/index.js +1 -0
- package/components/select/select.d.ts +337 -0
- package/components/select/select.js +266 -0
- package/components/slider/index.d.ts +1 -0
- package/components/slider/index.js +1 -0
- package/components/slider/slider.d.ts +245 -0
- package/components/slider/slider.js +413 -0
- package/config.d.ts +17 -7
- package/config.js +3 -3
- package/index.d.ts +23 -10
- package/index.js +29 -10
- package/package.json +32 -4
- package/services/extendWidget.d.ts +23 -0
- package/services/extendWidget.js +35 -0
- package/services/floatingUI.d.ts +56 -0
- package/services/floatingUI.js +105 -0
- package/services/focustrack.js +5 -5
- package/services/intersection.d.ts +9 -1
- package/services/intersection.js +10 -2
- package/services/navManager.d.ts +93 -0
- package/services/navManager.js +172 -0
- package/services/portal.d.ts +7 -0
- package/services/portal.js +15 -4
- package/services/siblingsInert.d.ts +2 -1
- package/services/siblingsInert.js +2 -2
- package/{transitions → services/transitions}/baseTransitions.d.ts +15 -2
- package/{transitions → services/transitions}/baseTransitions.js +21 -10
- package/services/transitions/bootstrap/collapse.d.ts +2 -0
- package/services/transitions/bootstrap/fade.d.ts +1 -0
- package/services/transitions/bootstrap.d.ts +2 -0
- package/services/transitions/bootstrap.js +2 -0
- package/services/transitions/collapse.d.ts +43 -0
- package/{transitions → services/transitions}/collapse.js +15 -2
- package/{transitions → services/transitions}/cssTransitions.d.ts +6 -0
- package/{transitions → services/transitions}/cssTransitions.js +8 -4
- package/{transitions → services/transitions}/simpleClassTransition.d.ts +12 -1
- package/services/transitions/simpleClassTransition.js +42 -0
- package/types.d.ts +43 -4
- package/types.js +7 -0
- package/{services/directiveUtils.js → utils/directive.js} +1 -1
- package/utils/internal/checks.d.ts +49 -0
- package/utils/internal/checks.js +60 -0
- package/utils/internal/dom.d.ts +25 -0
- package/utils/internal/dom.js +61 -0
- package/utils/internal/func.d.ts +11 -0
- package/utils/internal/func.js +11 -0
- package/utils/internal/isFocusable.d.ts +9 -0
- package/utils/internal/isFocusable.js +35 -0
- package/utils/internal/math.d.ts +5 -0
- package/utils/internal/math.js +13 -0
- package/utils/internal/promise.d.ts +87 -0
- package/utils/internal/promise.js +169 -0
- package/utils/internal/scrollbars.d.ts +8 -0
- package/{modal → utils/internal}/scrollbars.js +7 -1
- package/utils/internal/sort.d.ts +16 -0
- package/utils/internal/sort.js +28 -0
- package/utils/internal/textDirection.d.ts +7 -0
- package/utils/internal/textDirection.js +7 -0
- package/utils/internal/traversal.d.ts +54 -0
- package/utils/internal/traversal.js +105 -0
- package/{services → utils}/stores.d.ts +67 -33
- package/{services → utils}/stores.js +121 -59
- package/utils/writables.d.ts +32 -0
- package/utils/writables.js +72 -0
- package/modal/scrollbars.d.ts +0 -2
- package/select.d.ts +0 -196
- package/select.js +0 -240
- package/services/checks.d.ts +0 -32
- package/services/checks.js +0 -43
- package/services/index.d.ts +0 -7
- package/services/index.js +0 -7
- package/services/writables.d.ts +0 -7
- package/services/writables.js +0 -16
- package/transitions/bootstrap/collapse.d.ts +0 -2
- package/transitions/bootstrap/fade.d.ts +0 -1
- package/transitions/bootstrap/index.d.ts +0 -2
- package/transitions/bootstrap/index.js +0 -2
- package/transitions/collapse.d.ts +0 -29
- package/transitions/index.d.ts +0 -5
- package/transitions/index.js +0 -5
- package/transitions/simpleClassTransition.js +0 -28
- package/transitions/utils.d.ts +0 -20
- package/transitions/utils.js +0 -83
- package/utils.d.ts +0 -2
- package/utils.js +0 -2
- /package/{commonProps.d.ts → components/commonProps.d.ts} +0 -0
- /package/{commonProps.js → components/commonProps.js} +0 -0
- /package/{pagination.utils.d.ts → components/pagination/bootstrap.d.ts} +0 -0
- /package/{pagination.utils.js → components/pagination/bootstrap.js} +0 -0
- /package/{transitions → services/transitions}/bootstrap/collapse.js +0 -0
- /package/{transitions → services/transitions}/bootstrap/fade.js +0 -0
- /package/{services/directiveUtils.d.ts → utils/directive.d.ts} +0 -0
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
import type { WidgetsCommonPropsAndState } from './commonProps';
|
|
1
|
+
import type { TransitionFn } from '../../services/transitions/baseTransitions';
|
|
2
|
+
import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
|
|
3
|
+
import type { WidgetsCommonPropsAndState } from '../commonProps';
|
|
5
4
|
export interface AccordionProps extends WidgetsCommonPropsAndState {
|
|
6
5
|
/**
|
|
7
6
|
* If `true`, only one item at the time can stay open.
|
|
@@ -39,11 +38,11 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
|
|
|
39
38
|
*/
|
|
40
39
|
itemDisabled: boolean;
|
|
41
40
|
/**
|
|
42
|
-
* If `true`, the accordion-item will be
|
|
41
|
+
* If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
|
|
43
42
|
*
|
|
44
43
|
* It is a prop of the accordion-item.
|
|
45
44
|
*/
|
|
46
|
-
|
|
45
|
+
itemVisible: boolean;
|
|
47
46
|
/**
|
|
48
47
|
* If `true`, accordion-item will be animated.
|
|
49
48
|
*
|
|
@@ -69,13 +68,13 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
|
|
|
69
68
|
*/
|
|
70
69
|
onItemHidden: () => void;
|
|
71
70
|
/**
|
|
72
|
-
* An event fired when the `
|
|
71
|
+
* An event fired when the `visible` value changes.
|
|
73
72
|
*
|
|
74
|
-
* Event payload is the new value of
|
|
73
|
+
* Event payload is the new value of visible.
|
|
75
74
|
*
|
|
76
75
|
* It is a prop of the accordion-item.
|
|
77
76
|
*/
|
|
78
|
-
|
|
77
|
+
onItemVisibleChange: (visible: boolean) => void;
|
|
79
78
|
/**
|
|
80
79
|
* Structure of the accordion-item. The default item structure is: accordion-item
|
|
81
80
|
* contains accordion header and accordion collapse; the accordion header contains the accordion button
|
|
@@ -126,6 +125,12 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
|
|
|
126
125
|
* It is a prop of the accordion-item.
|
|
127
126
|
*/
|
|
128
127
|
itemBodyClass: string;
|
|
128
|
+
/**
|
|
129
|
+
* The html tag to use for the accordion-item-header.
|
|
130
|
+
*
|
|
131
|
+
* It is a prop of the accordion-item.
|
|
132
|
+
*/
|
|
133
|
+
itemHeadingTag: string;
|
|
129
134
|
}
|
|
130
135
|
export interface AccordionState extends WidgetsCommonPropsAndState {
|
|
131
136
|
/**
|
|
@@ -135,7 +140,7 @@ export interface AccordionState extends WidgetsCommonPropsAndState {
|
|
|
135
140
|
}
|
|
136
141
|
export interface AccordionApi {
|
|
137
142
|
/**
|
|
138
|
-
* Given the itemId, it will return if such item is expanded or not.
|
|
143
|
+
* Given the itemId, it will return if such item is visible (expanded) or not.
|
|
139
144
|
*
|
|
140
145
|
* If the itemId is not a valid id it will return `false`.
|
|
141
146
|
*/
|
|
@@ -169,7 +174,7 @@ export interface AccordionApi {
|
|
|
169
174
|
*/
|
|
170
175
|
collapseAll(): void;
|
|
171
176
|
/**
|
|
172
|
-
* Creates a new
|
|
177
|
+
* Creates a new accordionItem.
|
|
173
178
|
*/
|
|
174
179
|
registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
|
|
175
180
|
}
|
|
@@ -217,9 +222,9 @@ export interface AccordionItemDirectives {
|
|
|
217
222
|
}
|
|
218
223
|
export interface AccordionItemCommonPropsAndState {
|
|
219
224
|
/**
|
|
220
|
-
* If `true`, the accordion-item will be
|
|
225
|
+
* If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
|
|
221
226
|
*/
|
|
222
|
-
|
|
227
|
+
itemVisible: boolean;
|
|
223
228
|
/**
|
|
224
229
|
* If `true`, the accordion-item will be disabled.
|
|
225
230
|
* It will not react to user's clicks, but still will be possible to toggle programmatically.
|
|
@@ -263,6 +268,10 @@ export interface AccordionItemCommonPropsAndState {
|
|
|
263
268
|
* Classes to add on the accordion-item body DOM element.
|
|
264
269
|
*/
|
|
265
270
|
itemBodyClass: string;
|
|
271
|
+
/**
|
|
272
|
+
* The html tag to use for the accordion-item-header.
|
|
273
|
+
*/
|
|
274
|
+
itemHeadingTag: string;
|
|
266
275
|
}
|
|
267
276
|
export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
|
|
268
277
|
/**
|
|
@@ -286,16 +295,16 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
|
|
|
286
295
|
*/
|
|
287
296
|
onItemHidden: () => void;
|
|
288
297
|
/**
|
|
289
|
-
* An event fired when the `
|
|
298
|
+
* An event fired when the `visible` value changes.
|
|
290
299
|
*
|
|
291
|
-
* Event payload is the new value of
|
|
300
|
+
* Event payload is the new value of visible.
|
|
292
301
|
*/
|
|
293
|
-
|
|
302
|
+
onItemVisibleChange: (visible: boolean) => void;
|
|
294
303
|
}
|
|
295
304
|
export interface AccordionItemState extends AccordionItemCommonPropsAndState {
|
|
296
305
|
/**
|
|
297
|
-
* If `true` the
|
|
298
|
-
* value of the `
|
|
306
|
+
* If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
|
|
307
|
+
* value of the `itemVisible` and `itemDestroyOnHide`.
|
|
299
308
|
*/
|
|
300
309
|
shouldBeInDOM: boolean;
|
|
301
310
|
}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { createTransition } from '
|
|
3
|
-
import { collapseVerticalTransition } from '
|
|
4
|
-
import { computed,
|
|
5
|
-
import { noop } from '
|
|
1
|
+
import { stateStores, writablesForProps, normalizeConfigStores, mergeConfigStores } from '../../utils/stores';
|
|
2
|
+
import { createTransition } from '../../services/transitions/baseTransitions';
|
|
3
|
+
import { collapseVerticalTransition } from '../../services/transitions/bootstrap/collapse';
|
|
4
|
+
import { computed, writable } from '@amadeus-it-group/tansu';
|
|
5
|
+
import { noop } from '../../utils/internal/func';
|
|
6
|
+
import { typeBoolean, typeFunction, typeString } from '../../utils/writables';
|
|
7
|
+
import { bindDirectiveNoArg, directiveSubscribe, registrationArray } from '../../utils/directive';
|
|
6
8
|
let itemId = 0;
|
|
7
9
|
function getItemId() {
|
|
8
10
|
return `accordion-item-${itemId++}`;
|
|
9
11
|
}
|
|
10
12
|
function adjustItemsCloseOthers(items, openItems, oldOpen) {
|
|
13
|
+
let keepOpen;
|
|
11
14
|
if (openItems.length == 2) {
|
|
12
15
|
oldOpen = oldOpen ?? openItems[0];
|
|
13
|
-
|
|
14
|
-
items.forEach((item) => {
|
|
15
|
-
if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
|
|
16
|
-
item.patch({ itemCollapsed: true });
|
|
17
|
-
}
|
|
18
|
-
});
|
|
16
|
+
keepOpen = openItems.find((id) => id !== oldOpen);
|
|
19
17
|
}
|
|
20
18
|
else if (openItems.length > 2) {
|
|
21
19
|
//this case can happen when you have multiple items open and you toggle the close others
|
|
22
|
-
|
|
20
|
+
keepOpen = openItems[0];
|
|
21
|
+
}
|
|
22
|
+
if (keepOpen) {
|
|
23
23
|
items.forEach((item) => {
|
|
24
|
-
if (item.state$().itemId !== keepOpen &&
|
|
25
|
-
item.patch({
|
|
24
|
+
if (item.state$().itemId !== keepOpen && item.state$().itemVisible) {
|
|
25
|
+
item.patch({ itemVisible: false });
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
}
|
|
@@ -37,14 +37,15 @@ const defaultAccordionConfig = {
|
|
|
37
37
|
onHidden: noop,
|
|
38
38
|
className: '',
|
|
39
39
|
itemId: '',
|
|
40
|
-
itemDestroyOnHide:
|
|
40
|
+
itemDestroyOnHide: true,
|
|
41
41
|
itemDisabled: false,
|
|
42
|
-
|
|
42
|
+
itemVisible: false,
|
|
43
43
|
itemAnimation: true,
|
|
44
44
|
itemTransition: collapseVerticalTransition,
|
|
45
|
+
itemHeadingTag: '',
|
|
45
46
|
onItemShown: noop,
|
|
46
47
|
onItemHidden: noop,
|
|
47
|
-
|
|
48
|
+
onItemVisibleChange: noop,
|
|
48
49
|
slotItemStructure: undefined,
|
|
49
50
|
slotItemBody: undefined,
|
|
50
51
|
slotItemHeader: undefined,
|
|
@@ -58,12 +59,12 @@ const defaultItemConfig = {
|
|
|
58
59
|
itemId: defaultAccordionConfig.itemId,
|
|
59
60
|
itemDestroyOnHide: defaultAccordionConfig.itemDestroyOnHide,
|
|
60
61
|
itemDisabled: defaultAccordionConfig.itemDisabled,
|
|
61
|
-
|
|
62
|
+
itemVisible: defaultAccordionConfig.itemVisible,
|
|
62
63
|
itemAnimation: defaultAccordionConfig.itemAnimation,
|
|
63
64
|
itemTransition: defaultAccordionConfig.itemTransition,
|
|
64
65
|
onItemShown: defaultAccordionConfig.onItemShown,
|
|
65
66
|
onItemHidden: defaultAccordionConfig.onItemHidden,
|
|
66
|
-
|
|
67
|
+
onItemVisibleChange: defaultAccordionConfig.onItemVisibleChange,
|
|
67
68
|
slotItemStructure: defaultAccordionConfig.slotItemStructure,
|
|
68
69
|
slotItemBody: defaultAccordionConfig.slotItemBody,
|
|
69
70
|
slotItemHeader: defaultAccordionConfig.slotItemHeader,
|
|
@@ -72,7 +73,9 @@ const defaultItemConfig = {
|
|
|
72
73
|
itemButtonClass: defaultAccordionConfig.itemButtonClass,
|
|
73
74
|
itemCollapseClass: defaultAccordionConfig.itemCollapseClass,
|
|
74
75
|
itemBodyClass: defaultAccordionConfig.itemBodyClass,
|
|
76
|
+
itemHeadingTag: defaultAccordionConfig.itemHeadingTag,
|
|
75
77
|
};
|
|
78
|
+
const accordionItemProps = Object.keys(defaultItemConfig);
|
|
76
79
|
/**
|
|
77
80
|
* Retrieve a shallow copy of the default accordion config
|
|
78
81
|
* @returns the default accordion config
|
|
@@ -87,63 +90,63 @@ const configAccordionValidator = {
|
|
|
87
90
|
itemId: typeString,
|
|
88
91
|
itemDestroyOnHide: typeBoolean,
|
|
89
92
|
itemDisabled: typeBoolean,
|
|
90
|
-
|
|
93
|
+
itemVisible: typeBoolean,
|
|
91
94
|
itemAnimation: typeBoolean,
|
|
92
95
|
itemTransition: typeFunction,
|
|
93
96
|
onItemShown: typeFunction,
|
|
94
97
|
onItemHidden: typeFunction,
|
|
95
|
-
|
|
98
|
+
onItemVisibleChange: typeFunction,
|
|
96
99
|
itemClass: typeString,
|
|
97
100
|
itemHeaderClass: typeString,
|
|
98
101
|
itemButtonClass: typeString,
|
|
99
102
|
itemCollapseClass: typeString,
|
|
100
103
|
itemBodyClass: typeString,
|
|
104
|
+
itemHeadingTag: typeString,
|
|
101
105
|
};
|
|
102
106
|
const configItemValidator = {
|
|
103
107
|
itemId: typeString,
|
|
104
108
|
itemDestroyOnHide: typeBoolean,
|
|
105
109
|
itemDisabled: typeBoolean,
|
|
106
|
-
|
|
110
|
+
itemVisible: typeBoolean,
|
|
107
111
|
itemAnimation: typeBoolean,
|
|
108
112
|
itemTransition: typeFunction,
|
|
109
113
|
onItemShown: typeFunction,
|
|
110
114
|
onItemHidden: typeFunction,
|
|
111
|
-
|
|
115
|
+
onItemVisibleChange: typeFunction,
|
|
112
116
|
itemClass: typeString,
|
|
113
117
|
itemHeaderClass: typeString,
|
|
114
118
|
itemButtonClass: typeString,
|
|
115
119
|
itemCollapseClass: typeString,
|
|
116
120
|
itemBodyClass: typeString,
|
|
121
|
+
itemHeadingTag: typeString,
|
|
117
122
|
};
|
|
118
123
|
function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
|
|
119
|
-
const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$,
|
|
124
|
+
const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemVisibleChange$, itemVisible$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
|
|
120
125
|
const initDone$ = writable(false);
|
|
121
|
-
const
|
|
122
|
-
const
|
|
123
|
-
|
|
124
|
-
});
|
|
126
|
+
const _autoItemId$ = computed(() => getItemId());
|
|
127
|
+
const itemId$ = computed(() => _dirtyItemId$() || _autoItemId$());
|
|
128
|
+
const shouldBeInDOM$ = computed(() => itemDestroyOnHide$() === false || !itemTransition.state$().hidden);
|
|
125
129
|
const itemTransition = createTransition({
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
onItemShown$()();
|
|
130
|
+
props: {
|
|
131
|
+
transition: itemTransition$,
|
|
132
|
+
visible: itemVisible$,
|
|
133
|
+
onVisibleChange: onItemVisibleChange$,
|
|
134
|
+
animation: itemAnimation$,
|
|
135
|
+
animationOnInit: false,
|
|
136
|
+
initDone: initDone$,
|
|
137
|
+
onHidden: () => {
|
|
138
|
+
accordionOnHidden()(itemId$());
|
|
139
|
+
onItemHidden$()();
|
|
140
|
+
},
|
|
141
|
+
onShown: () => {
|
|
142
|
+
accordionOnShown()(itemId$());
|
|
143
|
+
onItemShown$()();
|
|
144
|
+
},
|
|
142
145
|
},
|
|
143
146
|
});
|
|
144
147
|
return {
|
|
145
148
|
...stateStores({
|
|
146
|
-
|
|
149
|
+
itemVisible$,
|
|
147
150
|
itemId$,
|
|
148
151
|
shouldBeInDOM$,
|
|
149
152
|
itemDisabled$,
|
|
@@ -153,7 +156,7 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
|
|
|
153
156
|
actions: {
|
|
154
157
|
click: () => {
|
|
155
158
|
if (!itemDisabled$()) {
|
|
156
|
-
|
|
159
|
+
itemVisible$.update((c) => !c);
|
|
157
160
|
}
|
|
158
161
|
},
|
|
159
162
|
},
|
|
@@ -162,13 +165,13 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
|
|
|
162
165
|
initDone$.set(true);
|
|
163
166
|
},
|
|
164
167
|
collapse: () => {
|
|
165
|
-
|
|
168
|
+
itemVisible$.set(false);
|
|
166
169
|
},
|
|
167
170
|
expand: () => {
|
|
168
|
-
|
|
171
|
+
itemVisible$.set(true);
|
|
169
172
|
},
|
|
170
173
|
toggle: () => {
|
|
171
|
-
|
|
174
|
+
itemVisible$.update((c) => !c);
|
|
172
175
|
},
|
|
173
176
|
},
|
|
174
177
|
directives: { collapseDirective: bindDirectiveNoArg(itemTransition.directives.directive), accordionItemDirective: noop },
|
|
@@ -180,12 +183,32 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
|
|
|
180
183
|
* @returns a new accordion widget instance
|
|
181
184
|
*/
|
|
182
185
|
export function createAccordion(config) {
|
|
183
|
-
const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$,
|
|
186
|
+
const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, itemHeadingTag$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
|
|
187
|
+
const accordionItemConfig = {
|
|
188
|
+
itemId: itemId$,
|
|
189
|
+
itemClass: itemClass$,
|
|
190
|
+
itemAnimation: itemAnimation$,
|
|
191
|
+
itemDisabled: itemDisabled$,
|
|
192
|
+
itemVisible: itemVisible$,
|
|
193
|
+
itemTransition: itemTransition$,
|
|
194
|
+
itemDestroyOnHide: itemDestroyOnHide$,
|
|
195
|
+
itemBodyClass: itemBodyClass$,
|
|
196
|
+
itemButtonClass: itemButtonClass$,
|
|
197
|
+
itemCollapseClass: itemCollapseClass$,
|
|
198
|
+
itemHeaderClass: itemHeaderClass$,
|
|
199
|
+
itemHeadingTag: itemHeadingTag$,
|
|
200
|
+
onItemVisibleChange: onItemVisibleChange$,
|
|
201
|
+
onItemHidden: onItemHidden$,
|
|
202
|
+
onItemShown: onItemShown$,
|
|
203
|
+
slotItemStructure: slotItemStructure$,
|
|
204
|
+
slotItemBody: slotItemBody$,
|
|
205
|
+
slotItemHeader: slotItemHeader$,
|
|
206
|
+
};
|
|
184
207
|
const itemsWidget$ = registrationArray();
|
|
185
208
|
const openItems$ = computed(() => {
|
|
186
209
|
const openItems = [];
|
|
187
210
|
itemsWidget$().forEach((item) => {
|
|
188
|
-
if (
|
|
211
|
+
if (item.state$().itemVisible) {
|
|
189
212
|
openItems.push(item.state$().itemId);
|
|
190
213
|
}
|
|
191
214
|
});
|
|
@@ -197,9 +220,6 @@ export function createAccordion(config) {
|
|
|
197
220
|
adjustItemsCloseOthers(itemsWidget$(), openItems$(), oldOpenItem$());
|
|
198
221
|
oldOpenItem$.set(openItems$()[0]);
|
|
199
222
|
}
|
|
200
|
-
else {
|
|
201
|
-
itemsWidget$();
|
|
202
|
-
}
|
|
203
223
|
});
|
|
204
224
|
const action$ = computed(() => {
|
|
205
225
|
checkCloseOthersAction$();
|
|
@@ -212,7 +232,7 @@ export function createAccordion(config) {
|
|
|
212
232
|
isExpanded: (id) => {
|
|
213
233
|
const item = getItem(itemsWidget$(), id);
|
|
214
234
|
if (item) {
|
|
215
|
-
return
|
|
235
|
+
return item.state$().itemVisible;
|
|
216
236
|
}
|
|
217
237
|
else {
|
|
218
238
|
return false;
|
|
@@ -233,27 +253,11 @@ export function createAccordion(config) {
|
|
|
233
253
|
collapseAll: () => {
|
|
234
254
|
itemsWidget$().forEach((i) => i.api.collapse());
|
|
235
255
|
},
|
|
236
|
-
registerItem: (
|
|
237
|
-
const item = createAccordionItem(onShown$, onHidden$,
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
itemDisabled: itemDisabled$(),
|
|
242
|
-
itemCollapsed: itemCollapsed$(),
|
|
243
|
-
itemTransition: itemTransition$(),
|
|
244
|
-
itemDestroyOnHide: itemDestroyOnHide$(),
|
|
245
|
-
itemBodyClass: itemBodyClass$(),
|
|
246
|
-
itemButtonClass: itemButtonClass$(),
|
|
247
|
-
itemCollapseClass: itemCollapseClass$(),
|
|
248
|
-
itemHeaderClass: itemHeaderClass$(),
|
|
249
|
-
onItemCollapsedChange: onItemCollapsedChange$(),
|
|
250
|
-
onItemHidden: onItemHidden$(),
|
|
251
|
-
onItemShown: onItemShown$(),
|
|
252
|
-
slotItemStructure: slotItemStructure$(),
|
|
253
|
-
slotItemBody: slotItemBody$(),
|
|
254
|
-
slotItemHeader: slotItemHeader$(),
|
|
255
|
-
...itemConfig?.(),
|
|
256
|
-
})));
|
|
256
|
+
registerItem: (propsConfig) => {
|
|
257
|
+
const item = createAccordionItem(onShown$, onHidden$, {
|
|
258
|
+
config: mergeConfigStores(accordionItemProps, normalizeConfigStores(accordionItemProps, propsConfig?.config), accordionItemConfig),
|
|
259
|
+
props: propsConfig?.props,
|
|
260
|
+
});
|
|
257
261
|
item.directives.accordionItemDirective = () => ({ destroy: itemsWidget$.register(item) });
|
|
258
262
|
return item;
|
|
259
263
|
},
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './accordion';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './accordion';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { CommonAlertApi, CommonAlertDirectives, CommonAlertProps, CommonAlertState } from './common';
|
|
2
|
+
import type { ExtendWidgetAdaptSlotWidgetProps } from '../../services/extendWidget';
|
|
3
|
+
import type { Widget, WidgetFactory, WidgetSlotContext } from '../../types';
|
|
4
|
+
export type AlertContext = WidgetSlotContext<AlertWidget>;
|
|
5
|
+
export interface AlertExtraProps {
|
|
6
|
+
/**
|
|
7
|
+
* Type of the alert.
|
|
8
|
+
* There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
|
|
9
|
+
*/
|
|
10
|
+
type: string;
|
|
11
|
+
}
|
|
12
|
+
export interface AlertState extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertState, AlertExtraProps> {
|
|
13
|
+
}
|
|
14
|
+
export interface AlertProps extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertProps, AlertExtraProps> {
|
|
15
|
+
}
|
|
16
|
+
export interface AlertApi extends CommonAlertApi {
|
|
17
|
+
}
|
|
18
|
+
export interface AlertDirectives extends CommonAlertDirectives {
|
|
19
|
+
}
|
|
20
|
+
export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, AlertDirectives>;
|
|
21
|
+
/**
|
|
22
|
+
* Retrieve a shallow copy of the default alert config
|
|
23
|
+
* @returns the default alert config
|
|
24
|
+
*/
|
|
25
|
+
export declare function getAlertDefaultConfig(): AlertProps;
|
|
26
|
+
/**
|
|
27
|
+
* Create an AlertWidget with given config props
|
|
28
|
+
* @param config - an optional alert config
|
|
29
|
+
* @returns an AlertWidget
|
|
30
|
+
*/
|
|
31
|
+
export declare const createAlert: WidgetFactory<AlertWidget>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createCommonAlert, getCommonAlertDefaultConfig } from './common';
|
|
2
|
+
import { extendWidgetProps } from '../../services/extendWidget';
|
|
3
|
+
import { typeString } from '../../utils/writables';
|
|
4
|
+
const alertDefaultConfig = {
|
|
5
|
+
type: 'primary',
|
|
6
|
+
};
|
|
7
|
+
const alertConfigValidator = {
|
|
8
|
+
type: typeString,
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Retrieve a shallow copy of the default alert config
|
|
12
|
+
* @returns the default alert config
|
|
13
|
+
*/
|
|
14
|
+
export function getAlertDefaultConfig() {
|
|
15
|
+
return { ...getCommonAlertDefaultConfig(), ...alertDefaultConfig };
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Create an AlertWidget with given config props
|
|
19
|
+
* @param config - an optional alert config
|
|
20
|
+
* @returns an AlertWidget
|
|
21
|
+
*/
|
|
22
|
+
export const createAlert = extendWidgetProps(createCommonAlert, alertDefaultConfig, alertConfigValidator);
|
|
@@ -1,27 +1,21 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
export interface AlertCommonPropsAndState extends WidgetsCommonPropsAndState {
|
|
1
|
+
import type { TransitionFn } from '../../services/transitions/baseTransitions';
|
|
2
|
+
import type { WidgetsCommonPropsAndState } from '../commonProps';
|
|
3
|
+
import type { ConfigValidator, Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
|
|
4
|
+
export type CommonAlertContext = WidgetSlotContext<CommonAlertWidget>;
|
|
5
|
+
export interface CommonAlertCommonPropsAndState extends WidgetsCommonPropsAndState {
|
|
7
6
|
/**
|
|
8
7
|
* If `true`, alert can be dismissed by the user.
|
|
9
8
|
* The close button (×) will be displayed and you can be notified of the event with the (close) output.
|
|
10
9
|
*/
|
|
11
10
|
dismissible: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Type of the alert.
|
|
14
|
-
* There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
|
|
15
|
-
*/
|
|
16
|
-
type: string;
|
|
17
11
|
/**
|
|
18
12
|
* Template for the alert content
|
|
19
13
|
*/
|
|
20
|
-
slotDefault: SlotContent<
|
|
14
|
+
slotDefault: SlotContent<CommonAlertContext>;
|
|
21
15
|
/**
|
|
22
16
|
* Global template for the alert component
|
|
23
17
|
*/
|
|
24
|
-
slotStructure: SlotContent<
|
|
18
|
+
slotStructure: SlotContent<CommonAlertContext>;
|
|
25
19
|
/**
|
|
26
20
|
* If `true` the alert is visible to the user
|
|
27
21
|
*/
|
|
@@ -31,13 +25,13 @@ export interface AlertCommonPropsAndState extends WidgetsCommonPropsAndState {
|
|
|
31
25
|
*/
|
|
32
26
|
ariaCloseButtonLabel: string;
|
|
33
27
|
}
|
|
34
|
-
export interface
|
|
28
|
+
export interface CommonAlertState extends CommonAlertCommonPropsAndState {
|
|
35
29
|
/**
|
|
36
30
|
* Is `true` when the alert is hidden. Compared to `visible`, this is updated after the transition is executed.
|
|
37
31
|
*/
|
|
38
32
|
hidden: boolean;
|
|
39
33
|
}
|
|
40
|
-
export interface
|
|
34
|
+
export interface CommonAlertProps extends CommonAlertCommonPropsAndState {
|
|
41
35
|
/**
|
|
42
36
|
* Callback called when the alert visibility changed.
|
|
43
37
|
*/
|
|
@@ -53,7 +47,7 @@ export interface AlertProps extends AlertCommonPropsAndState {
|
|
|
53
47
|
/**
|
|
54
48
|
* The transition function will be executed when the alert is displayed or hidden.
|
|
55
49
|
*
|
|
56
|
-
* Depending on the value of {@link
|
|
50
|
+
* Depending on the value of {@link CommonAlertProps.animationOnInit}, the animation can be optionally skipped during the showing process.
|
|
57
51
|
*/
|
|
58
52
|
transition: TransitionFn;
|
|
59
53
|
/**
|
|
@@ -71,7 +65,7 @@ export interface AlertProps extends AlertCommonPropsAndState {
|
|
|
71
65
|
*/
|
|
72
66
|
animation: boolean;
|
|
73
67
|
}
|
|
74
|
-
export interface
|
|
68
|
+
export interface CommonAlertApi {
|
|
75
69
|
/**
|
|
76
70
|
* Triggers alert closing programmatically (same as clicking on the close button (×)).
|
|
77
71
|
*/
|
|
@@ -81,21 +75,23 @@ export interface AlertApi {
|
|
|
81
75
|
*/
|
|
82
76
|
open(): void;
|
|
83
77
|
}
|
|
84
|
-
export interface
|
|
78
|
+
export interface CommonAlertDirectives {
|
|
85
79
|
/**
|
|
86
80
|
* the transition directive, piloting what is the visual effect of going from hidden to visible
|
|
87
81
|
*/
|
|
88
82
|
transitionDirective: Directive;
|
|
89
83
|
}
|
|
90
|
-
export type
|
|
84
|
+
export type CommonAlertWidget = Widget<CommonAlertProps, CommonAlertState, CommonAlertApi, object, CommonAlertDirectives>;
|
|
85
|
+
export declare const defaultCommonAlertConfig: CommonAlertProps;
|
|
91
86
|
/**
|
|
92
87
|
* Retrieve a shallow copy of the default alert config
|
|
93
88
|
* @returns the default alert config
|
|
94
89
|
*/
|
|
95
|
-
export declare function
|
|
90
|
+
export declare function getCommonAlertDefaultConfig(): CommonAlertProps;
|
|
91
|
+
export declare const commonAlertConfigValidator: ConfigValidator<CommonAlertProps>;
|
|
96
92
|
/**
|
|
97
93
|
* Create an AlertWidget with given config props
|
|
98
94
|
* @param config - an optional alert config
|
|
99
95
|
* @returns an AlertWidget
|
|
100
96
|
*/
|
|
101
|
-
export declare function
|
|
97
|
+
export declare function createCommonAlert(config?: PropsConfig<CommonAlertProps>): CommonAlertWidget;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { fadeTransition } from '
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
import { createTransition } from '../../services/transitions/baseTransitions';
|
|
2
|
+
import { noop } from '../../utils/internal/func';
|
|
3
|
+
import { fadeTransition } from '../../services/transitions/bootstrap/fade';
|
|
4
|
+
import { stateStores, writablesForProps } from '../../utils/stores';
|
|
5
|
+
import { bindDirectiveNoArg } from '../../utils/directive';
|
|
6
|
+
import { typeBoolean } from '../../utils/writables';
|
|
7
|
+
export const defaultCommonAlertConfig = {
|
|
6
8
|
visible: true,
|
|
7
9
|
dismissible: true,
|
|
8
|
-
type: 'primary',
|
|
9
10
|
ariaCloseButtonLabel: 'Close',
|
|
10
11
|
onVisibleChange: noop,
|
|
11
12
|
onShown: noop,
|
|
@@ -21,28 +22,29 @@ const defaultConfig = {
|
|
|
21
22
|
* Retrieve a shallow copy of the default alert config
|
|
22
23
|
* @returns the default alert config
|
|
23
24
|
*/
|
|
24
|
-
export function
|
|
25
|
-
return { ...
|
|
25
|
+
export function getCommonAlertDefaultConfig() {
|
|
26
|
+
return { ...defaultCommonAlertConfig };
|
|
26
27
|
}
|
|
27
|
-
const
|
|
28
|
+
export const commonAlertConfigValidator = {
|
|
28
29
|
dismissible: typeBoolean,
|
|
29
|
-
type: typeString,
|
|
30
30
|
};
|
|
31
31
|
/**
|
|
32
32
|
* Create an AlertWidget with given config props
|
|
33
33
|
* @param config - an optional alert config
|
|
34
34
|
* @returns an AlertWidget
|
|
35
35
|
*/
|
|
36
|
-
export function
|
|
37
|
-
const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(
|
|
36
|
+
export function createCommonAlert(config) {
|
|
37
|
+
const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(defaultCommonAlertConfig, config, commonAlertConfigValidator);
|
|
38
38
|
const transition = createTransition({
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
props: {
|
|
40
|
+
transition: transition$,
|
|
41
|
+
visible: requestedVisible$,
|
|
42
|
+
animation: animation$,
|
|
43
|
+
animationOnInit: animationOnInit$,
|
|
44
|
+
onVisibleChange: onVisibleChange$,
|
|
45
|
+
onHidden: onHidden$,
|
|
46
|
+
onShown: onShown$,
|
|
47
|
+
},
|
|
46
48
|
});
|
|
47
49
|
const close = () => {
|
|
48
50
|
patch({ visible: false });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './modal';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './modal';
|