@agnos-ui/core-bootstrap 0.9.1 → 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/css/agnosui.css +10 -11
- package/css/agnosui.css.map +1 -1
- package/css/slider.css +2 -0
- package/css/slider.css.map +1 -1
- package/css/tree.css +8 -11
- package/css/tree.css.map +1 -1
- package/index.cjs +11 -4
- package/index.js +2 -1
- package/package.json +2 -2
- package/scss/_variables.scss +1 -2
- package/scss/slider.scss +3 -0
- package/scss/tree.scss +10 -5
- package/collapse-BzcOh2fY.cjs +0 -88
- package/collapse-UxuEGPrW.js +0 -89
- package/scss/_functions.scss +0 -36
|
@@ -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/css/agnosui.css
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Utility function to replace a substring as Sass doesn't provide the built-in method to do it
|
|
3
|
-
*/
|
|
4
|
-
/**
|
|
5
|
-
* Method implementation taken from Bootstrap
|
|
6
|
-
* ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
|
|
7
|
-
*/
|
|
8
1
|
.au-tree {
|
|
9
2
|
--bs-tree-item-padding-start: 2.25rem;
|
|
10
3
|
--bs-tree-expand-icon-margin-inline-end: 0.5rem;
|
|
@@ -13,8 +6,8 @@
|
|
|
13
6
|
--bs-tree-expand-icon-background-color-hover: var(--bs-blue-100, #cfe2ff);
|
|
14
7
|
--bs-tree-expand-icon-width: 2.25rem;
|
|
15
8
|
--bs-tree-expand-icon-height: 2.25rem;
|
|
16
|
-
--bs-tree-expand-icon:
|
|
17
|
-
--bs-tree-expand-icon-hover:
|
|
9
|
+
--bs-tree-expand-icon-color: #0d6efd;
|
|
10
|
+
--bs-tree-expand-icon-color-hover: #052c65;
|
|
18
11
|
list-style: none;
|
|
19
12
|
padding: 0;
|
|
20
13
|
margin: 0;
|
|
@@ -54,13 +47,17 @@
|
|
|
54
47
|
cursor: pointer;
|
|
55
48
|
}
|
|
56
49
|
.au-tree .au-tree-expand-icon:hover {
|
|
57
|
-
--bs-tree-expand-icon: var(--bs-tree-expand-icon-hover);
|
|
58
50
|
--bs-tree-expand-icon-background-color: var(--bs-tree-expand-icon-background-color-hover);
|
|
59
51
|
}
|
|
52
|
+
.au-tree .au-tree-expand-icon:hover .au-tree-expand-icon-svg .au-tree-expand-icon-svg-fill {
|
|
53
|
+
stroke: var(--bs-tree-expand-icon-color-hover);
|
|
54
|
+
}
|
|
60
55
|
.au-tree .au-tree-expand-icon .au-tree-expand-icon-svg {
|
|
61
|
-
content: var(--bs-tree-expand-icon);
|
|
62
56
|
transition: transform 0.3s;
|
|
63
57
|
}
|
|
58
|
+
.au-tree .au-tree-expand-icon .au-tree-expand-icon-svg .au-tree-expand-icon-svg-fill {
|
|
59
|
+
stroke: var(--bs-tree-expand-icon-color);
|
|
60
|
+
}
|
|
64
61
|
.au-tree .au-tree-expand-icon.au-tree-expand-icon-expanded .au-tree-expand-icon-svg {
|
|
65
62
|
transform: rotate(90deg);
|
|
66
63
|
}
|
|
@@ -127,6 +124,7 @@
|
|
|
127
124
|
--bs-slider-clickable-area-vertical-translate: translateX(-50%);
|
|
128
125
|
--bs-slider-clickable-area-vertical-flex-shrink: 0;
|
|
129
126
|
--bs-slider-clickable-area-cursor: pointer;
|
|
127
|
+
--bs-slider-disabled-background-color: var(--bs-secondary-bg, #e9ecef);
|
|
130
128
|
--bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
|
|
131
129
|
--bs-slider-disabled-cursor: not-allowed;
|
|
132
130
|
height: 100%;
|
|
@@ -355,6 +353,7 @@
|
|
|
355
353
|
}
|
|
356
354
|
.au-slider .au-slider-content.disabled {
|
|
357
355
|
cursor: var(--bs-slider-disabled-cursor);
|
|
356
|
+
background-color: var(--bs-slider-disabled-background-color);
|
|
358
357
|
}
|
|
359
358
|
.au-slider .au-slider-content.disabled .au-slider-label,
|
|
360
359
|
.au-slider .au-slider-content.disabled .au-slider-label-vertical,
|
package/css/agnosui.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss"],"names":[],"mappings":"AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAKD;EACC;;;ACzEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACiBD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EApGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA6FA;EA/GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAwGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC7WH;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC","file":"agnosui.css"}
|
package/css/slider.css
CHANGED
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
--bs-slider-clickable-area-vertical-translate: translateX(-50%);
|
|
51
51
|
--bs-slider-clickable-area-vertical-flex-shrink: 0;
|
|
52
52
|
--bs-slider-clickable-area-cursor: pointer;
|
|
53
|
+
--bs-slider-disabled-background-color: var(--bs-secondary-bg, #e9ecef);
|
|
53
54
|
--bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
|
|
54
55
|
--bs-slider-disabled-cursor: not-allowed;
|
|
55
56
|
height: 100%;
|
|
@@ -278,6 +279,7 @@
|
|
|
278
279
|
}
|
|
279
280
|
.au-slider .au-slider-content.disabled {
|
|
280
281
|
cursor: var(--bs-slider-disabled-cursor);
|
|
282
|
+
background-color: var(--bs-slider-disabled-background-color);
|
|
281
283
|
}
|
|
282
284
|
.au-slider .au-slider-content.disabled .au-slider-label,
|
|
283
285
|
.au-slider .au-slider-content.disabled .au-slider-label-vertical,
|
package/css/slider.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AA2BA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AA2BA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EApGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA6FA;EA/GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAwGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC","file":"slider.css"}
|
package/css/tree.css
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Utility function to replace a substring as Sass doesn't provide the built-in method to do it
|
|
3
|
-
*/
|
|
4
|
-
/**
|
|
5
|
-
* Method implementation taken from Bootstrap
|
|
6
|
-
* ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
|
|
7
|
-
*/
|
|
8
1
|
.au-tree {
|
|
9
2
|
--bs-tree-item-padding-start: 2.25rem;
|
|
10
3
|
--bs-tree-expand-icon-margin-inline-end: 0.5rem;
|
|
@@ -13,8 +6,8 @@
|
|
|
13
6
|
--bs-tree-expand-icon-background-color-hover: var(--bs-blue-100, #cfe2ff);
|
|
14
7
|
--bs-tree-expand-icon-width: 2.25rem;
|
|
15
8
|
--bs-tree-expand-icon-height: 2.25rem;
|
|
16
|
-
--bs-tree-expand-icon:
|
|
17
|
-
--bs-tree-expand-icon-hover:
|
|
9
|
+
--bs-tree-expand-icon-color: #0d6efd;
|
|
10
|
+
--bs-tree-expand-icon-color-hover: #052c65;
|
|
18
11
|
list-style: none;
|
|
19
12
|
padding: 0;
|
|
20
13
|
margin: 0;
|
|
@@ -54,13 +47,17 @@
|
|
|
54
47
|
cursor: pointer;
|
|
55
48
|
}
|
|
56
49
|
.au-tree .au-tree-expand-icon:hover {
|
|
57
|
-
--bs-tree-expand-icon: var(--bs-tree-expand-icon-hover);
|
|
58
50
|
--bs-tree-expand-icon-background-color: var(--bs-tree-expand-icon-background-color-hover);
|
|
59
51
|
}
|
|
52
|
+
.au-tree .au-tree-expand-icon:hover .au-tree-expand-icon-svg .au-tree-expand-icon-svg-fill {
|
|
53
|
+
stroke: var(--bs-tree-expand-icon-color-hover);
|
|
54
|
+
}
|
|
60
55
|
.au-tree .au-tree-expand-icon .au-tree-expand-icon-svg {
|
|
61
|
-
content: var(--bs-tree-expand-icon);
|
|
62
56
|
transition: transform 0.3s;
|
|
63
57
|
}
|
|
58
|
+
.au-tree .au-tree-expand-icon .au-tree-expand-icon-svg .au-tree-expand-icon-svg-fill {
|
|
59
|
+
stroke: var(--bs-tree-expand-icon-color);
|
|
60
|
+
}
|
|
64
61
|
.au-tree .au-tree-expand-icon.au-tree-expand-icon-expanded .au-tree-expand-icon-svg {
|
|
65
62
|
transform: rotate(90deg);
|
|
66
63
|
}
|
package/css/tree.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../scss/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../scss/tree.scss"],"names":[],"mappings":"AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAKD;EACC","file":"tree.css"}
|
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/scss/_variables.scss
CHANGED
|
@@ -70,6 +70,7 @@ $au-slider-clickable-area-main-size: 1.5rem !default;
|
|
|
70
70
|
$au-slider-clickable-area-secondary-size: 100% !default;
|
|
71
71
|
$au-slider-clickable-area-vertical-flex-shrink: 0 !default;
|
|
72
72
|
$au-slider-clickable-area-cursor: pointer !default;
|
|
73
|
+
$au-slider-disabled-background-color: $au-slider-color-background !default;
|
|
73
74
|
$au-slider-disabled-color: var(--#{$prefix}dark-bg-subtle, #ced4da) !default;
|
|
74
75
|
$au-slider-disabled-cursor: not-allowed !default;
|
|
75
76
|
|
|
@@ -99,6 +100,4 @@ $au-tree-expand-icon-width: 2.25rem;
|
|
|
99
100
|
$au-tree-expand-icon-height: 2.25rem;
|
|
100
101
|
$au-tree-expand-icon-color: #0d6efd !default;
|
|
101
102
|
$au-tree-expand-icon-color-hover: #052c65 !default;
|
|
102
|
-
$au-tree-expand-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color}" stroke-width="1" fill="none"/></svg>') !default;
|
|
103
|
-
$au-tree-expand-icon-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 10 10"><path d="M3 1 L7 5 L3 9" stroke="#{$au-tree-expand-icon-color-hover}" stroke-width="1" fill="none"/></svg>') !default;
|
|
104
103
|
// scss-docs-end tree-vars
|
package/scss/slider.scss
CHANGED
|
@@ -89,6 +89,7 @@
|
|
|
89
89
|
--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink: #{variables.$au-slider-clickable-area-vertical-flex-shrink};
|
|
90
90
|
--#{variables.$prefix}slider-clickable-area-cursor: #{variables.$au-slider-clickable-area-cursor};
|
|
91
91
|
|
|
92
|
+
--#{variables.$prefix}slider-disabled-background-color: #{variables.$au-slider-disabled-background-color};
|
|
92
93
|
--#{variables.$prefix}slider-disabled-color: #{variables.$au-slider-disabled-color};
|
|
93
94
|
--#{variables.$prefix}slider-disabled-cursor: #{variables.$au-slider-disabled-cursor};
|
|
94
95
|
// scss-docs-end slider-css-vars
|
|
@@ -347,6 +348,8 @@
|
|
|
347
348
|
|
|
348
349
|
&.disabled {
|
|
349
350
|
cursor: var(--#{variables.$prefix}slider-disabled-cursor);
|
|
351
|
+
background-color: var(--#{variables.$prefix}slider-disabled-background-color);
|
|
352
|
+
|
|
350
353
|
.au-slider-label,
|
|
351
354
|
.au-slider-label-vertical,
|
|
352
355
|
.au-slider-tick-label,
|
package/scss/tree.scss
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use 'variables';
|
|
2
|
-
@use '_functions';
|
|
3
2
|
|
|
4
3
|
.au-tree {
|
|
5
4
|
// scss-docs-start tree-css-vars
|
|
@@ -10,8 +9,8 @@
|
|
|
10
9
|
--#{variables.$prefix}tree-expand-icon-background-color-hover: #{variables.$au-tree-expand-icon-background-color-hover};
|
|
11
10
|
--#{variables.$prefix}tree-expand-icon-width: #{variables.$au-tree-expand-icon-width};
|
|
12
11
|
--#{variables.$prefix}tree-expand-icon-height: #{variables.$au-tree-expand-icon-height};
|
|
13
|
-
--#{variables.$prefix}tree-expand-icon: #{
|
|
14
|
-
--#{variables.$prefix}tree-expand-icon-hover: #{
|
|
12
|
+
--#{variables.$prefix}tree-expand-icon-color: #{variables.$au-tree-expand-icon-color};
|
|
13
|
+
--#{variables.$prefix}tree-expand-icon-color-hover: #{variables.$au-tree-expand-icon-color-hover};
|
|
15
14
|
// scss-docs-end tree-css-vars
|
|
16
15
|
|
|
17
16
|
list-style: none;
|
|
@@ -57,13 +56,19 @@
|
|
|
57
56
|
cursor: pointer;
|
|
58
57
|
|
|
59
58
|
&:hover {
|
|
60
|
-
--#{variables.$prefix}tree-expand-icon: var(--#{variables.$prefix}tree-expand-icon-hover);
|
|
61
59
|
--#{variables.$prefix}tree-expand-icon-background-color: var(--#{variables.$prefix}tree-expand-icon-background-color-hover);
|
|
60
|
+
|
|
61
|
+
.au-tree-expand-icon-svg .au-tree-expand-icon-svg-fill {
|
|
62
|
+
stroke: var(--#{variables.$prefix}tree-expand-icon-color-hover);
|
|
63
|
+
}
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
.au-tree-expand-icon-svg {
|
|
65
|
-
content: var(--#{variables.$prefix}tree-expand-icon);
|
|
66
67
|
transition: transform 0.3s;
|
|
68
|
+
|
|
69
|
+
.au-tree-expand-icon-svg-fill {
|
|
70
|
+
stroke: var(--#{variables.$prefix}tree-expand-icon-color);
|
|
71
|
+
}
|
|
67
72
|
}
|
|
68
73
|
|
|
69
74
|
&.au-tree-expand-icon-expanded {
|
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
|
-
};
|
package/scss/_functions.scss
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
@use 'sass:string';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Utility function to replace a substring as Sass doesn't provide the built-in method to do it
|
|
5
|
-
*/
|
|
6
|
-
@function str-replace($string, $search, $replace: '') {
|
|
7
|
-
$index: string.index($string, $search);
|
|
8
|
-
|
|
9
|
-
@if $index {
|
|
10
|
-
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@return $string;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// Characters which are escaped by the escape-svg function
|
|
17
|
-
$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Method implementation taken from Bootstrap
|
|
21
|
-
* ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
|
|
22
|
-
*/
|
|
23
|
-
@function escape-svg($string) {
|
|
24
|
-
@if string.index($string, 'data:image/svg+xml') {
|
|
25
|
-
@each $char, $encoded in $escaped-characters {
|
|
26
|
-
// Do not escape the url brackets
|
|
27
|
-
@if string.index($string, 'url(') == 1 {
|
|
28
|
-
$string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
|
|
29
|
-
} @else {
|
|
30
|
-
$string: str-replace($string, $char, $encoded);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
@return $string;
|
|
36
|
-
}
|