@agnos-ui/core-bootstrap 0.9.2 → 0.9.3
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/collapse-Bngag_Xi.js +48 -0
- package/collapse-CVbEdyy9.cjs +47 -0
- package/components/collapse/collapse.d.ts +5 -98
- package/components/collapse/index.cjs +8 -1
- package/components/collapse/index.js +2 -1
- package/index.cjs +11 -4
- package/index.js +2 -1
- package/package.json +2 -2
- package/collapse-BzcOh2fY.cjs +0 -88
- package/collapse-UxuEGPrW.js +0 -89
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { writablesForProps, true$ } from "@agnos-ui/core/utils/stores";
|
|
2
|
+
import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
|
|
3
|
+
import { typeString, typeBoolean } from "@agnos-ui/core/utils/writables";
|
|
4
|
+
import { a as collapseHorizontalTransition, c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
|
|
5
|
+
import { asWritable, computed, batch } from "@amadeus-it-group/tansu";
|
|
6
|
+
import { createWidgetFactory } from "@agnos-ui/core/utils/widget";
|
|
7
|
+
import { getCollapseDefaultConfig as getCollapseDefaultConfig$1, createCollapse as createCollapse$1 } from "@agnos-ui/core/components/collapse";
|
|
8
|
+
const defaultConfigExtraProps = {
|
|
9
|
+
className: "",
|
|
10
|
+
horizontal: false
|
|
11
|
+
};
|
|
12
|
+
const configValidator = {
|
|
13
|
+
horizontal: typeBoolean,
|
|
14
|
+
className: typeString
|
|
15
|
+
};
|
|
16
|
+
function getCollapseDefaultConfig() {
|
|
17
|
+
return { ...getCollapseDefaultConfig$1(), ...defaultConfigExtraProps };
|
|
18
|
+
}
|
|
19
|
+
const createCollapse = createWidgetFactory("collapse", (config) => {
|
|
20
|
+
const [{ horizontal$, className$ }, patch] = writablesForProps(defaultConfigExtraProps, config, configValidator);
|
|
21
|
+
const transitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
|
|
22
|
+
const widget = createCollapse$1({ ...config ?? {}, props: { ...(config == null ? void 0 : config.props) ?? {}, transition: transitionFn$ } });
|
|
23
|
+
return {
|
|
24
|
+
...widget,
|
|
25
|
+
patch: (storesValues) => batch(() => {
|
|
26
|
+
widget.patch(storesValues);
|
|
27
|
+
patch(storesValues);
|
|
28
|
+
}),
|
|
29
|
+
directives: {
|
|
30
|
+
...widget.directives,
|
|
31
|
+
collapseDirective: mergeDirectives(
|
|
32
|
+
widget.directives.collapseDirective,
|
|
33
|
+
createAttributesDirective(() => ({
|
|
34
|
+
attributes: {
|
|
35
|
+
class: className$
|
|
36
|
+
},
|
|
37
|
+
classNames: {
|
|
38
|
+
"au-collapse": true$
|
|
39
|
+
}
|
|
40
|
+
}))
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
});
|
|
45
|
+
export {
|
|
46
|
+
createCollapse as c,
|
|
47
|
+
getCollapseDefaultConfig as g
|
|
48
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const stores = require("@agnos-ui/core/utils/stores");
|
|
3
|
+
const directive = require("@agnos-ui/core/utils/directive");
|
|
4
|
+
const writables = require("@agnos-ui/core/utils/writables");
|
|
5
|
+
const collapse$1 = require("./collapse-sUYbZqEx.cjs");
|
|
6
|
+
const tansu = require("@amadeus-it-group/tansu");
|
|
7
|
+
const widget = require("@agnos-ui/core/utils/widget");
|
|
8
|
+
const collapse = require("@agnos-ui/core/components/collapse");
|
|
9
|
+
const defaultConfigExtraProps = {
|
|
10
|
+
className: "",
|
|
11
|
+
horizontal: false
|
|
12
|
+
};
|
|
13
|
+
const configValidator = {
|
|
14
|
+
horizontal: writables.typeBoolean,
|
|
15
|
+
className: writables.typeString
|
|
16
|
+
};
|
|
17
|
+
function getCollapseDefaultConfig() {
|
|
18
|
+
return { ...collapse.getCollapseDefaultConfig(), ...defaultConfigExtraProps };
|
|
19
|
+
}
|
|
20
|
+
const createCollapse = widget.createWidgetFactory("collapse", (config) => {
|
|
21
|
+
const [{ horizontal$, className$ }, patch] = stores.writablesForProps(defaultConfigExtraProps, config, configValidator);
|
|
22
|
+
const transitionFn$ = tansu.asWritable(tansu.computed(() => horizontal$() ? collapse$1.collapseHorizontalTransition : collapse$1.collapseVerticalTransition));
|
|
23
|
+
const widget2 = collapse.createCollapse({ ...config ?? {}, props: { ...(config == null ? void 0 : config.props) ?? {}, transition: transitionFn$ } });
|
|
24
|
+
return {
|
|
25
|
+
...widget2,
|
|
26
|
+
patch: (storesValues) => tansu.batch(() => {
|
|
27
|
+
widget2.patch(storesValues);
|
|
28
|
+
patch(storesValues);
|
|
29
|
+
}),
|
|
30
|
+
directives: {
|
|
31
|
+
...widget2.directives,
|
|
32
|
+
collapseDirective: directive.mergeDirectives(
|
|
33
|
+
widget2.directives.collapseDirective,
|
|
34
|
+
directive.createAttributesDirective(() => ({
|
|
35
|
+
attributes: {
|
|
36
|
+
class: className$
|
|
37
|
+
},
|
|
38
|
+
classNames: {
|
|
39
|
+
"au-collapse": stores.true$
|
|
40
|
+
}
|
|
41
|
+
}))
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
exports.createCollapse = createCollapse;
|
|
47
|
+
exports.getCollapseDefaultConfig = getCollapseDefaultConfig;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
*
|
|
4
|
-
|
|
5
|
-
export interface CollapseCommonPropsAndState {
|
|
1
|
+
import type { Widget, WidgetFactory } from '@agnos-ui/core/types';
|
|
2
|
+
import type { CollapseProps as CoreCollapseProps, CollapseApi, CollapseState, CollapseDirectives } from '@agnos-ui/core/components/collapse';
|
|
3
|
+
export * from '@agnos-ui/core/components/collapse';
|
|
4
|
+
interface CollapseExtraProps {
|
|
6
5
|
/**
|
|
7
6
|
* CSS classes to be applied on the widget main container
|
|
8
7
|
*
|
|
@@ -15,103 +14,11 @@ export interface CollapseCommonPropsAndState {
|
|
|
15
14
|
* @defaultValue `false`
|
|
16
15
|
*/
|
|
17
16
|
horizontal: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* If `true` the collapse is visible to the user
|
|
20
|
-
*
|
|
21
|
-
* @defaultValue `true`
|
|
22
|
-
*/
|
|
23
|
-
visible: boolean;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Represents the state of a collapse component.
|
|
27
|
-
* Extends the properties and state from `CollapseCommonPropsAndState`.
|
|
28
|
-
*/
|
|
29
|
-
export interface CollapseState extends CollapseCommonPropsAndState {
|
|
30
|
-
/**
|
|
31
|
-
* Is `true` when the collapse is hidden. Compared to `visible`, this is updated after the transition is executed.
|
|
32
|
-
*/
|
|
33
|
-
hidden: boolean;
|
|
34
17
|
}
|
|
35
18
|
/**
|
|
36
19
|
* Properties for the Collapse component.
|
|
37
20
|
*/
|
|
38
|
-
export interface CollapseProps extends
|
|
39
|
-
/**
|
|
40
|
-
* Callback called when the collapse visibility changed.
|
|
41
|
-
*
|
|
42
|
-
* @defaultValue
|
|
43
|
-
* ```ts
|
|
44
|
-
* () => {}
|
|
45
|
-
* ```
|
|
46
|
-
* @param visible - The new visibility state of the collapse.
|
|
47
|
-
*/
|
|
48
|
-
onVisibleChange: (visible: boolean) => void;
|
|
49
|
-
/**
|
|
50
|
-
* Callback called when the collapse is hidden.
|
|
51
|
-
*
|
|
52
|
-
* @defaultValue
|
|
53
|
-
* ```ts
|
|
54
|
-
* () => {}
|
|
55
|
-
* ```
|
|
56
|
-
*/
|
|
57
|
-
onHidden: () => void;
|
|
58
|
-
/**
|
|
59
|
-
* Callback called when the collapse is shown.
|
|
60
|
-
*
|
|
61
|
-
* @defaultValue
|
|
62
|
-
* ```ts
|
|
63
|
-
* () => {}
|
|
64
|
-
* ```
|
|
65
|
-
*/
|
|
66
|
-
onShown: () => void;
|
|
67
|
-
/**
|
|
68
|
-
* If `true`, collapse opening will be animated at init time.
|
|
69
|
-
*
|
|
70
|
-
* @defaultValue `false`
|
|
71
|
-
*/
|
|
72
|
-
animatedOnInit: boolean;
|
|
73
|
-
/**
|
|
74
|
-
* If `true`, collapse closing and opening will be animated.
|
|
75
|
-
*
|
|
76
|
-
* @defaultValue `true`
|
|
77
|
-
*/
|
|
78
|
-
animated: boolean;
|
|
79
|
-
/**
|
|
80
|
-
* id of the collapse
|
|
81
|
-
*
|
|
82
|
-
* @defaultValue `''`
|
|
83
|
-
*/
|
|
84
|
-
id: string;
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Interface representing the API for a collapsible component.
|
|
88
|
-
*/
|
|
89
|
-
export interface CollapseApi {
|
|
90
|
-
/**
|
|
91
|
-
* Triggers collapse closing programmatically.
|
|
92
|
-
*/
|
|
93
|
-
close(): void;
|
|
94
|
-
/**
|
|
95
|
-
* Triggers the collapse content to be displayed for the user.
|
|
96
|
-
*/
|
|
97
|
-
open(): void;
|
|
98
|
-
/**
|
|
99
|
-
* Toggles the collapse content visibility.
|
|
100
|
-
*/
|
|
101
|
-
toggle(): void;
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
* Interface representing the directives used in a collapse component.
|
|
105
|
-
*/
|
|
106
|
-
export interface CollapseDirectives {
|
|
107
|
-
/**
|
|
108
|
-
* Directive to apply the collapse.
|
|
109
|
-
*/
|
|
110
|
-
collapseDirective: Directive;
|
|
111
|
-
/**
|
|
112
|
-
* Directive to apply to a trigger;
|
|
113
|
-
*/
|
|
114
|
-
triggerDirective: Directive;
|
|
21
|
+
export interface CollapseProps extends Omit<CoreCollapseProps, 'transition'>, CollapseExtraProps {
|
|
115
22
|
}
|
|
116
23
|
/**
|
|
117
24
|
* Represents a widget for handling collapse functionality.
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const collapse = require("../../collapse-
|
|
3
|
+
const collapse = require("../../collapse-CVbEdyy9.cjs");
|
|
4
|
+
const collapse$1 = require("@agnos-ui/core/components/collapse");
|
|
4
5
|
exports.createCollapse = collapse.createCollapse;
|
|
5
6
|
exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
|
|
7
|
+
Object.keys(collapse$1).forEach((k) => {
|
|
8
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: () => collapse$1[k]
|
|
11
|
+
});
|
|
12
|
+
});
|
package/index.cjs
CHANGED
|
@@ -9,10 +9,10 @@ const rating = require("./rating-C5NZjIRx.cjs");
|
|
|
9
9
|
const select = require("./select-AtIM2x7x.cjs");
|
|
10
10
|
const slider = require("./slider-CosrWCnn.cjs");
|
|
11
11
|
const toast = require("./toast-C4gj0rX-.cjs");
|
|
12
|
-
const collapse = require("./collapse-
|
|
12
|
+
const collapse = require("./collapse-CVbEdyy9.cjs");
|
|
13
13
|
const tree = require("./tree-DuY7bsYo.cjs");
|
|
14
14
|
const carousel = require("./carousel-C-vSnTTq.cjs");
|
|
15
|
-
const collapse$
|
|
15
|
+
const collapse$2 = require("./collapse-sUYbZqEx.cjs");
|
|
16
16
|
const fade = require("./fade-CJ0jXGio.cjs");
|
|
17
17
|
const types = require("./types.cjs");
|
|
18
18
|
const accordion$1 = require("@agnos-ui/core/components/accordion");
|
|
@@ -24,6 +24,7 @@ const rating$1 = require("@agnos-ui/core/components/rating");
|
|
|
24
24
|
const select$1 = require("@agnos-ui/core/components/select");
|
|
25
25
|
const slider$1 = require("@agnos-ui/core/components/slider");
|
|
26
26
|
const toast$1 = require("@agnos-ui/core/components/toast");
|
|
27
|
+
const collapse$1 = require("@agnos-ui/core/components/collapse");
|
|
27
28
|
const tree$1 = require("@agnos-ui/core/components/tree");
|
|
28
29
|
const carousel$1 = require("@agnos-ui/core/components/carousel");
|
|
29
30
|
exports.createAccordion = accordion.createAccordion;
|
|
@@ -53,8 +54,8 @@ exports.createTree = tree.createTree;
|
|
|
53
54
|
exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
|
|
54
55
|
exports.createCarousel = carousel.createCarousel;
|
|
55
56
|
exports.getCarouselDefaultConfig = carousel.getCarouselDefaultConfig;
|
|
56
|
-
exports.collapseHorizontalTransition = collapse$
|
|
57
|
-
exports.collapseVerticalTransition = collapse$
|
|
57
|
+
exports.collapseHorizontalTransition = collapse$2.collapseHorizontalTransition;
|
|
58
|
+
exports.collapseVerticalTransition = collapse$2.collapseVerticalTransition;
|
|
58
59
|
exports.fadeTransition = fade.fadeTransition;
|
|
59
60
|
exports.BS_CONTEXTUAL_CLASSES = types.BS_CONTEXTUAL_CLASSES;
|
|
60
61
|
Object.keys(accordion$1).forEach((k) => {
|
|
@@ -111,6 +112,12 @@ Object.keys(toast$1).forEach((k) => {
|
|
|
111
112
|
get: () => toast$1[k]
|
|
112
113
|
});
|
|
113
114
|
});
|
|
115
|
+
Object.keys(collapse$1).forEach((k) => {
|
|
116
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: () => collapse$1[k]
|
|
119
|
+
});
|
|
120
|
+
});
|
|
114
121
|
Object.keys(tree$1).forEach((k) => {
|
|
115
122
|
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
116
123
|
enumerable: true,
|
package/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { c as c6, g as g6 } from "./rating-hovacUx0.js";
|
|
|
7
7
|
import { c as c7, g as g7 } from "./select-CLjBDJ3a.js";
|
|
8
8
|
import { c as c8, g as g8 } from "./slider-Bj081WdM.js";
|
|
9
9
|
import { c as c9, g as g9, t } from "./toast-Dggjpjqk.js";
|
|
10
|
-
import { c as c10, g as g10 } from "./collapse-
|
|
10
|
+
import { c as c10, g as g10 } from "./collapse-Bngag_Xi.js";
|
|
11
11
|
import { c as c11, g as g11 } from "./tree-Be8WJS8u.js";
|
|
12
12
|
import { c as c12, g as g12 } from "./carousel-CY0kDaVK.js";
|
|
13
13
|
import { a as a2, c as c13 } from "./collapse-CVjUhnIz.js";
|
|
@@ -22,6 +22,7 @@ export * from "@agnos-ui/core/components/rating";
|
|
|
22
22
|
export * from "@agnos-ui/core/components/select";
|
|
23
23
|
export * from "@agnos-ui/core/components/slider";
|
|
24
24
|
export * from "@agnos-ui/core/components/toast";
|
|
25
|
+
export * from "@agnos-ui/core/components/collapse";
|
|
25
26
|
export * from "@agnos-ui/core/components/tree";
|
|
26
27
|
export * from "@agnos-ui/core/components/carousel";
|
|
27
28
|
export {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agnos-ui/core-bootstrap",
|
|
3
3
|
"description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
|
|
4
|
-
"version": "0.9.
|
|
4
|
+
"version": "0.9.3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"bootstrap",
|
|
7
7
|
"css",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@agnos-ui/core": "0.9.
|
|
65
|
+
"@agnos-ui/core": "0.9.3"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
68
|
"@amadeus-it-group/tansu": "^2.0.0"
|
package/collapse-BzcOh2fY.cjs
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const baseTransitions = require("@agnos-ui/core/services/transitions/baseTransitions");
|
|
3
|
-
const stores = require("@agnos-ui/core/utils/stores");
|
|
4
|
-
const directive = require("@agnos-ui/core/utils/directive");
|
|
5
|
-
const writables = require("@agnos-ui/core/utils/writables");
|
|
6
|
-
const collapse = require("./collapse-sUYbZqEx.cjs");
|
|
7
|
-
const tansu = require("@amadeus-it-group/tansu");
|
|
8
|
-
const func = require("@agnos-ui/core/utils/func");
|
|
9
|
-
const widget = require("@agnos-ui/core/utils/widget");
|
|
10
|
-
const defaultCollapseConfig = {
|
|
11
|
-
visible: true,
|
|
12
|
-
horizontal: false,
|
|
13
|
-
onVisibleChange: func.noop,
|
|
14
|
-
onShown: func.noop,
|
|
15
|
-
onHidden: func.noop,
|
|
16
|
-
animated: true,
|
|
17
|
-
animatedOnInit: false,
|
|
18
|
-
className: "",
|
|
19
|
-
id: ""
|
|
20
|
-
};
|
|
21
|
-
function getCollapseDefaultConfig() {
|
|
22
|
-
return { ...defaultCollapseConfig };
|
|
23
|
-
}
|
|
24
|
-
const commonCollapseConfigValidator = {
|
|
25
|
-
horizontal: writables.typeBoolean,
|
|
26
|
-
onVisibleChange: writables.typeFunction,
|
|
27
|
-
onHidden: writables.typeFunction,
|
|
28
|
-
onShown: writables.typeFunction,
|
|
29
|
-
animatedOnInit: writables.typeBoolean,
|
|
30
|
-
animated: writables.typeBoolean,
|
|
31
|
-
className: writables.typeString,
|
|
32
|
-
visible: writables.typeBoolean,
|
|
33
|
-
id: writables.typeString
|
|
34
|
-
};
|
|
35
|
-
const createCollapse = widget.createWidgetFactory("collapse", (config) => {
|
|
36
|
-
const [
|
|
37
|
-
{ animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
|
|
38
|
-
patch
|
|
39
|
-
] = stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
|
|
40
|
-
const id$ = stores.idWithDefault(_dirtyId$);
|
|
41
|
-
const currentTransitionFn$ = tansu.asWritable(tansu.computed(() => horizontal$() ? collapse.collapseHorizontalTransition : collapse.collapseVerticalTransition));
|
|
42
|
-
const transition = baseTransitions.createTransition({
|
|
43
|
-
props: {
|
|
44
|
-
transition: currentTransitionFn$,
|
|
45
|
-
visible: requestedVisible$,
|
|
46
|
-
animated: animated$,
|
|
47
|
-
animatedOnInit: animatedOnInit$,
|
|
48
|
-
onVisibleChange: onVisibleChange$,
|
|
49
|
-
onHidden: onHidden$,
|
|
50
|
-
onShown: onShown$
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
const visible$ = transition.stores.visible$;
|
|
54
|
-
const hidden$ = transition.stores.hidden$;
|
|
55
|
-
return {
|
|
56
|
-
...stores.stateStores({ ...stateProps, visible$, hidden$, horizontal$ }),
|
|
57
|
-
patch,
|
|
58
|
-
api: {
|
|
59
|
-
open: transition.api.show,
|
|
60
|
-
close: transition.api.hide,
|
|
61
|
-
toggle: transition.api.toggle
|
|
62
|
-
},
|
|
63
|
-
directives: {
|
|
64
|
-
collapseDirective: directive.mergeDirectives(
|
|
65
|
-
transition.directives.directive,
|
|
66
|
-
directive.createAttributesDirective(() => ({
|
|
67
|
-
attributes: {
|
|
68
|
-
id: id$
|
|
69
|
-
},
|
|
70
|
-
classNames: {
|
|
71
|
-
"au-collapse": stores.true$
|
|
72
|
-
}
|
|
73
|
-
}))
|
|
74
|
-
),
|
|
75
|
-
triggerDirective: directive.createAttributesDirective(() => ({
|
|
76
|
-
attributes: {
|
|
77
|
-
"aria-expanded": tansu.computed(() => `${visible$()}`),
|
|
78
|
-
"aria-controls": id$
|
|
79
|
-
},
|
|
80
|
-
events: {
|
|
81
|
-
click: () => transition.api.toggle()
|
|
82
|
-
}
|
|
83
|
-
}))
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
});
|
|
87
|
-
exports.createCollapse = createCollapse;
|
|
88
|
-
exports.getCollapseDefaultConfig = getCollapseDefaultConfig;
|
package/collapse-UxuEGPrW.js
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { createTransition } from "@agnos-ui/core/services/transitions/baseTransitions";
|
|
2
|
-
import { writablesForProps, idWithDefault, stateStores, true$ } from "@agnos-ui/core/utils/stores";
|
|
3
|
-
import { createAttributesDirective, mergeDirectives } from "@agnos-ui/core/utils/directive";
|
|
4
|
-
import { typeString, typeBoolean, typeFunction } from "@agnos-ui/core/utils/writables";
|
|
5
|
-
import { a as collapseHorizontalTransition, c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
|
|
6
|
-
import { asWritable, computed } from "@amadeus-it-group/tansu";
|
|
7
|
-
import { noop } from "@agnos-ui/core/utils/func";
|
|
8
|
-
import { createWidgetFactory } from "@agnos-ui/core/utils/widget";
|
|
9
|
-
const defaultCollapseConfig = {
|
|
10
|
-
visible: true,
|
|
11
|
-
horizontal: false,
|
|
12
|
-
onVisibleChange: noop,
|
|
13
|
-
onShown: noop,
|
|
14
|
-
onHidden: noop,
|
|
15
|
-
animated: true,
|
|
16
|
-
animatedOnInit: false,
|
|
17
|
-
className: "",
|
|
18
|
-
id: ""
|
|
19
|
-
};
|
|
20
|
-
function getCollapseDefaultConfig() {
|
|
21
|
-
return { ...defaultCollapseConfig };
|
|
22
|
-
}
|
|
23
|
-
const commonCollapseConfigValidator = {
|
|
24
|
-
horizontal: typeBoolean,
|
|
25
|
-
onVisibleChange: typeFunction,
|
|
26
|
-
onHidden: typeFunction,
|
|
27
|
-
onShown: typeFunction,
|
|
28
|
-
animatedOnInit: typeBoolean,
|
|
29
|
-
animated: typeBoolean,
|
|
30
|
-
className: typeString,
|
|
31
|
-
visible: typeBoolean,
|
|
32
|
-
id: typeString
|
|
33
|
-
};
|
|
34
|
-
const createCollapse = createWidgetFactory("collapse", (config) => {
|
|
35
|
-
const [
|
|
36
|
-
{ animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
|
|
37
|
-
patch
|
|
38
|
-
] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
|
|
39
|
-
const id$ = idWithDefault(_dirtyId$);
|
|
40
|
-
const currentTransitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
|
|
41
|
-
const transition = createTransition({
|
|
42
|
-
props: {
|
|
43
|
-
transition: currentTransitionFn$,
|
|
44
|
-
visible: requestedVisible$,
|
|
45
|
-
animated: animated$,
|
|
46
|
-
animatedOnInit: animatedOnInit$,
|
|
47
|
-
onVisibleChange: onVisibleChange$,
|
|
48
|
-
onHidden: onHidden$,
|
|
49
|
-
onShown: onShown$
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
const visible$ = transition.stores.visible$;
|
|
53
|
-
const hidden$ = transition.stores.hidden$;
|
|
54
|
-
return {
|
|
55
|
-
...stateStores({ ...stateProps, visible$, hidden$, horizontal$ }),
|
|
56
|
-
patch,
|
|
57
|
-
api: {
|
|
58
|
-
open: transition.api.show,
|
|
59
|
-
close: transition.api.hide,
|
|
60
|
-
toggle: transition.api.toggle
|
|
61
|
-
},
|
|
62
|
-
directives: {
|
|
63
|
-
collapseDirective: mergeDirectives(
|
|
64
|
-
transition.directives.directive,
|
|
65
|
-
createAttributesDirective(() => ({
|
|
66
|
-
attributes: {
|
|
67
|
-
id: id$
|
|
68
|
-
},
|
|
69
|
-
classNames: {
|
|
70
|
-
"au-collapse": true$
|
|
71
|
-
}
|
|
72
|
-
}))
|
|
73
|
-
),
|
|
74
|
-
triggerDirective: createAttributesDirective(() => ({
|
|
75
|
-
attributes: {
|
|
76
|
-
"aria-expanded": computed(() => `${visible$()}`),
|
|
77
|
-
"aria-controls": id$
|
|
78
|
-
},
|
|
79
|
-
events: {
|
|
80
|
-
click: () => transition.api.toggle()
|
|
81
|
-
}
|
|
82
|
-
}))
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
});
|
|
86
|
-
export {
|
|
87
|
-
createCollapse as c,
|
|
88
|
-
getCollapseDefaultConfig as g
|
|
89
|
-
};
|