@agnos-ui/react-bootstrap 0.4.3 → 0.5.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/{accordion-DKdL2Sr3.js → accordion-BX1iR5BO.js} +19 -22
- package/{accordion-CG9yl3xh.cjs → accordion-CxT3atuW.cjs} +12 -15
- package/{alert-0W1n8ahW.js → alert-D1FXDsJn.js} +12 -16
- package/{alert-DeQRFTm3.cjs → alert-LKMMYmg_.cjs} +9 -13
- package/collapse-BpPYsx89.cjs +18 -0
- package/collapse-DhsL8j2h.js +19 -0
- package/components/accordion/accordion.d.ts +40 -1
- package/components/accordion/accordion.gen.d.ts +37 -9
- package/components/accordion/index.cjs +2 -1
- package/components/accordion/index.js +7 -6
- package/components/alert/alert.d.ts +19 -1
- package/components/alert/alert.gen.d.ts +21 -2
- package/components/alert/index.cjs +2 -1
- package/components/alert/index.js +4 -3
- package/components/collapse/collapse.d.ts +15 -0
- package/components/collapse/collapse.gen.d.ts +146 -0
- package/components/collapse/index.cjs +6 -0
- package/components/collapse/index.d.ts +2 -0
- package/components/collapse/index.js +6 -0
- package/components/modal/index.cjs +3 -1
- package/components/modal/index.js +7 -5
- package/components/modal/modal.d.ts +34 -1
- package/components/modal/modal.gen.d.ts +35 -18
- package/components/pagination/index.cjs +3 -3
- package/components/pagination/index.js +5 -5
- package/components/pagination/pageItem.d.ts +35 -3
- package/components/pagination/pagination.d.ts +34 -2
- package/components/pagination/pagination.gen.d.ts +49 -29
- package/components/progressbar/index.cjs +2 -1
- package/components/progressbar/index.js +4 -3
- package/components/progressbar/progressbar.d.ts +16 -1
- package/components/progressbar/progressbar.gen.d.ts +21 -4
- package/components/rating/index.cjs +1 -1
- package/components/rating/index.js +1 -1
- package/components/rating/rating.d.ts +11 -0
- package/components/rating/rating.gen.d.ts +25 -17
- package/components/select/index.cjs +1 -1
- package/components/select/index.js +1 -1
- package/components/select/select.d.ts +15 -0
- package/components/select/select.gen.d.ts +41 -25
- package/components/slider/index.cjs +3 -3
- package/components/slider/index.js +5 -5
- package/components/slider/slider.d.ts +26 -2
- package/components/slider/slider.gen.d.ts +54 -33
- package/components/toast/index.cjs +2 -1
- package/components/toast/index.js +4 -3
- package/components/toast/toast.d.ts +20 -1
- package/components/toast/toast.gen.d.ts +22 -2
- package/config.d.ts +9 -2
- package/config.gen.d.ts +5 -0
- package/index.cjs +26 -16
- package/index.d.ts +1 -0
- package/index.js +51 -41
- package/{modal-qidZ4ghL.js → modal-CWuYx5n5.js} +23 -29
- package/{modal-Cyt40iyH.cjs → modal-DpMvOtL2.cjs} +17 -23
- package/package.json +6 -5
- package/{pagination-BDq1dOoH.js → pagination-5jlJWfFj.js} +19 -22
- package/{pagination-ChA90-py.cjs → pagination-b4pKj3Kx.cjs} +17 -20
- package/{progressbar-B0keLNtE.js → progressbar-DKFR5epE.js} +9 -10
- package/{progressbar-Fa1PDviu.cjs → progressbar-JO1ey9mx.cjs} +7 -8
- package/{rating-CWOEBPWs.js → rating-CTfRQGGu.js} +2 -2
- package/{rating-D5-3ELHv.cjs → rating-eI8T0zvS.cjs} +2 -2
- package/{select-DmgOBdqs.js → select-BriGqe3k.js} +15 -32
- package/{select-C4STYCmG.cjs → select-XHUAqTDw.cjs} +15 -32
- package/{slider-CxodlRoZ.js → slider--K7ri_0l.js} +18 -21
- package/{slider-MNZTN_vu.cjs → slider-BUQne5aJ.cjs} +16 -19
- package/{toast-3amUxqw1.js → toast-Dgfv5S_p.js} +16 -19
- package/{toast-BXMjE9E3.cjs → toast-E1DM85iZ.cjs} +13 -16
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@agnos-ui/react-bootstrap)
|
|
4
4
|
|
|
5
|
-
[Bootstrap](https://getbootstrap.com/)-based
|
|
5
|
+
[Bootstrap](https://getbootstrap.com/)-based component library for [React](https://react.dev/).
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -12,4 +12,4 @@ npm install @agnos-ui/react-bootstrap
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
Please check [our demo site](https://
|
|
15
|
+
Please check [our demo site](https://www.agnosui.dev/latest/) to see all the available components and how to use them.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Slot } from "@agnos-ui/react-headless/slot";
|
|
3
3
|
import { useDirectives, classDirective } from "@agnos-ui/react-headless/utils/directive";
|
|
4
4
|
import { createContext, forwardRef, useContext, useImperativeHandle, useEffect } from "react";
|
|
@@ -13,42 +13,39 @@ const Header = (props) => {
|
|
|
13
13
|
const Heading = re.test(props.headerTag) ? props.headerTag : "h2";
|
|
14
14
|
return /* @__PURE__ */ jsx(Heading, { ...useDirectives([classDirective, "accordion-header"], props.directive), children: props.children });
|
|
15
15
|
};
|
|
16
|
-
const ItemContent = (slotContext) => /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion-collapse"], slotContext.
|
|
16
|
+
const ItemContent = (slotContext) => /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion-collapse"], slotContext.directives.bodyContainerDirective), children: /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion-body"], slotContext.directives.bodyDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.children, props: slotContext }) }) });
|
|
17
17
|
const AccordionDIContext = createContext({});
|
|
18
|
-
const
|
|
19
|
-
/* @__PURE__ */ jsx(Header, { directive: slotContext.
|
|
18
|
+
const AccordionItemDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
19
|
+
/* @__PURE__ */ jsx(Header, { directive: slotContext.directives.headerDirective, headerTag: slotContext.state.headingTag, children: /* @__PURE__ */ jsx("button", { ...useDirectives([classDirective, "accordion-button"], slotContext.directives.buttonDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.header, props: slotContext }) }) }),
|
|
20
20
|
slotContext.state.shouldBeInDOM && /* @__PURE__ */ jsx(ItemContent, { ...slotContext })
|
|
21
21
|
] });
|
|
22
|
-
const defaultConfig = {
|
|
23
|
-
structure: DefaultSlotStructure
|
|
24
|
-
};
|
|
25
22
|
const AccordionItem = forwardRef(
|
|
26
23
|
function AccordionItem2(props, ref) {
|
|
27
24
|
const { registerItem } = useContext(AccordionDIContext);
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
useImperativeHandle(ref, () => widget.api, []);
|
|
25
|
+
const widgetContext = useWidgetWithConfig(registerItem, props, null, {
|
|
26
|
+
structure: AccordionItemDefaultSlotStructure
|
|
27
|
+
});
|
|
28
|
+
const { state, api, directives } = widgetContext;
|
|
29
|
+
useImperativeHandle(ref, () => api, []);
|
|
34
30
|
useEffect(() => {
|
|
35
|
-
|
|
31
|
+
api.initDone();
|
|
36
32
|
}, []);
|
|
37
|
-
return /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, `accordion-item ${state.className}`],
|
|
33
|
+
return /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, `accordion-item ${state.className}`], directives.itemDirective), children: /* @__PURE__ */ jsx(Slot, { slotContent: state.structure, props: widgetContext }) });
|
|
38
34
|
}
|
|
39
35
|
);
|
|
40
36
|
const Accordion = forwardRef(
|
|
41
37
|
function Accordion2(props, ref) {
|
|
42
|
-
const widget = useWidgetWithConfig(export_createAccordion, props, "accordion")
|
|
38
|
+
const widget = useWidgetWithConfig(export_createAccordion, props, "accordion");
|
|
43
39
|
useImperativeHandle(ref, () => widget.api, []);
|
|
44
40
|
return /* @__PURE__ */ jsx(AccordionDIContext.Provider, { value: widget.api, children: /* @__PURE__ */ jsx("div", { ...useDirectives([classDirective, "accordion"], widget.directives.accordionDirective), children: props.children }) });
|
|
45
41
|
}
|
|
46
42
|
);
|
|
47
43
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
export_getAccordionDefaultConfig as e
|
|
44
|
+
AccordionItemDefaultSlotStructure as A,
|
|
45
|
+
AccordionItem as a,
|
|
46
|
+
Accordion as b,
|
|
47
|
+
export_createAccordionItem as c,
|
|
48
|
+
export_createAccordion as d,
|
|
49
|
+
export_getAccordionDefaultConfig as e,
|
|
50
|
+
export_factoryCreateAccordion as f
|
|
54
51
|
};
|
|
@@ -14,39 +14,36 @@ const Header = (props) => {
|
|
|
14
14
|
const Heading = re.test(props.headerTag) ? props.headerTag : "h2";
|
|
15
15
|
return /* @__PURE__ */ jsxRuntime.jsx(Heading, { ...directive.useDirectives([directive.classDirective, "accordion-header"], props.directive), children: props.children });
|
|
16
16
|
};
|
|
17
|
-
const ItemContent = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion-collapse"], slotContext.
|
|
17
|
+
const ItemContent = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion-collapse"], slotContext.directives.bodyContainerDirective), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion-body"], slotContext.directives.bodyDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.children, props: slotContext }) }) });
|
|
18
18
|
const AccordionDIContext = React.createContext({});
|
|
19
|
-
const
|
|
20
|
-
/* @__PURE__ */ jsxRuntime.jsx(Header, { directive: slotContext.
|
|
19
|
+
const AccordionItemDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
20
|
+
/* @__PURE__ */ jsxRuntime.jsx(Header, { directive: slotContext.directives.headerDirective, headerTag: slotContext.state.headingTag, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ...directive.useDirectives([directive.classDirective, "accordion-button"], slotContext.directives.buttonDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.header, props: slotContext }) }) }),
|
|
21
21
|
slotContext.state.shouldBeInDOM && /* @__PURE__ */ jsxRuntime.jsx(ItemContent, { ...slotContext })
|
|
22
22
|
] });
|
|
23
|
-
const defaultConfig = {
|
|
24
|
-
structure: DefaultSlotStructure
|
|
25
|
-
};
|
|
26
23
|
const AccordionItem = React.forwardRef(
|
|
27
24
|
function AccordionItem2(props, ref) {
|
|
28
25
|
const { registerItem } = React.useContext(AccordionDIContext);
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
React.useImperativeHandle(ref, () => widget.api, []);
|
|
26
|
+
const widgetContext = generated_config.useWidgetWithConfig(registerItem, props, null, {
|
|
27
|
+
structure: AccordionItemDefaultSlotStructure
|
|
28
|
+
});
|
|
29
|
+
const { state, api, directives } = widgetContext;
|
|
30
|
+
React.useImperativeHandle(ref, () => api, []);
|
|
35
31
|
React.useEffect(() => {
|
|
36
|
-
|
|
32
|
+
api.initDone();
|
|
37
33
|
}, []);
|
|
38
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, `accordion-item ${state.className}`],
|
|
34
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, `accordion-item ${state.className}`], directives.itemDirective), children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: state.structure, props: widgetContext }) });
|
|
39
35
|
}
|
|
40
36
|
);
|
|
41
37
|
const Accordion = React.forwardRef(
|
|
42
38
|
function Accordion2(props, ref) {
|
|
43
|
-
const widget = generated_config.useWidgetWithConfig(export_createAccordion, props, "accordion")
|
|
39
|
+
const widget = generated_config.useWidgetWithConfig(export_createAccordion, props, "accordion");
|
|
44
40
|
React.useImperativeHandle(ref, () => widget.api, []);
|
|
45
41
|
return /* @__PURE__ */ jsxRuntime.jsx(AccordionDIContext.Provider, { value: widget.api, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives([directive.classDirective, "accordion"], widget.directives.accordionDirective), children: props.children }) });
|
|
46
42
|
}
|
|
47
43
|
);
|
|
48
44
|
exports.Accordion = Accordion;
|
|
49
45
|
exports.AccordionItem = AccordionItem;
|
|
46
|
+
exports.AccordionItemDefaultSlotStructure = AccordionItemDefaultSlotStructure;
|
|
50
47
|
exports.export_createAccordion = export_createAccordion;
|
|
51
48
|
exports.export_createAccordionItem = export_createAccordionItem;
|
|
52
49
|
exports.export_factoryCreateAccordion = export_factoryCreateAccordion;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Slot } from "@agnos-ui/react-headless/slot";
|
|
3
3
|
import { useDirectives, classDirective } from "@agnos-ui/react-headless/utils/directive";
|
|
4
4
|
import { forwardRef, useImperativeHandle } from "react";
|
|
@@ -6,13 +6,10 @@ import { useWidgetWithConfig } from "./generated/config.js";
|
|
|
6
6
|
import { getAlertDefaultConfig, createAlert } from "@agnos-ui/core-bootstrap/components/alert";
|
|
7
7
|
const export_getAlertDefaultConfig = getAlertDefaultConfig;
|
|
8
8
|
const export_createAlert = createAlert;
|
|
9
|
-
const
|
|
9
|
+
const AlertDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
10
10
|
/* @__PURE__ */ jsx("div", { className: "alert-body", children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.children, props: slotContext }) }),
|
|
11
|
-
slotContext.state.dismissible && /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", onClick: slotContext.
|
|
11
|
+
slotContext.state.dismissible && /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", onClick: slotContext.api.close, "aria-label": slotContext.state.ariaCloseButtonLabel })
|
|
12
12
|
] });
|
|
13
|
-
const defaultConfig = {
|
|
14
|
-
structure: DefaultSlotStructure
|
|
15
|
-
};
|
|
16
13
|
const AlertElement = (slotContext) => /* @__PURE__ */ jsx(
|
|
17
14
|
"div",
|
|
18
15
|
{
|
|
@@ -22,22 +19,21 @@ const AlertElement = (slotContext) => /* @__PURE__ */ jsx(
|
|
|
22
19
|
classDirective,
|
|
23
20
|
`au-alert alert alert-${slotContext.state.type} ${slotContext.state.className} ${slotContext.state.dismissible ? "alert-dismissible" : ""}`
|
|
24
21
|
],
|
|
25
|
-
slotContext.
|
|
22
|
+
slotContext.directives.transitionDirective
|
|
26
23
|
),
|
|
27
24
|
children: /* @__PURE__ */ jsx(Slot, { slotContent: slotContext.state.structure, props: slotContext })
|
|
28
25
|
}
|
|
29
26
|
);
|
|
30
27
|
const Alert = forwardRef(function Alert2(props, ref) {
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
};
|
|
37
|
-
return /* @__PURE__ */ jsx(Fragment, { children: !state.hidden && /* @__PURE__ */ jsx(AlertElement, { ...slotContext }) });
|
|
28
|
+
const widgetContext = useWidgetWithConfig(export_createAlert, props, "alert", {
|
|
29
|
+
structure: AlertDefaultSlotStructure
|
|
30
|
+
});
|
|
31
|
+
useImperativeHandle(ref, () => widgetContext.api, []);
|
|
32
|
+
return /* @__PURE__ */ jsx(Fragment, { children: !widgetContext.state.hidden && /* @__PURE__ */ jsx(AlertElement, { ...widgetContext }) });
|
|
38
33
|
});
|
|
39
34
|
export {
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
AlertDefaultSlotStructure as A,
|
|
36
|
+
Alert as a,
|
|
37
|
+
export_createAlert as b,
|
|
42
38
|
export_getAlertDefaultConfig as e
|
|
43
39
|
};
|
|
@@ -7,13 +7,10 @@ const generated_config = require("./generated/config.cjs");
|
|
|
7
7
|
const alert = require("@agnos-ui/core-bootstrap/components/alert");
|
|
8
8
|
const export_getAlertDefaultConfig = alert.getAlertDefaultConfig;
|
|
9
9
|
const export_createAlert = alert.createAlert;
|
|
10
|
-
const
|
|
10
|
+
const AlertDefaultSlotStructure = (slotContext) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11
11
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-body", children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.children, props: slotContext }) }),
|
|
12
|
-
slotContext.state.dismissible && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "btn-close", onClick: slotContext.
|
|
12
|
+
slotContext.state.dismissible && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "btn-close", onClick: slotContext.api.close, "aria-label": slotContext.state.ariaCloseButtonLabel })
|
|
13
13
|
] });
|
|
14
|
-
const defaultConfig = {
|
|
15
|
-
structure: DefaultSlotStructure
|
|
16
|
-
};
|
|
17
14
|
const AlertElement = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
18
15
|
"div",
|
|
19
16
|
{
|
|
@@ -23,20 +20,19 @@ const AlertElement = (slotContext) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
23
20
|
directive.classDirective,
|
|
24
21
|
`au-alert alert alert-${slotContext.state.type} ${slotContext.state.className} ${slotContext.state.dismissible ? "alert-dismissible" : ""}`
|
|
25
22
|
],
|
|
26
|
-
slotContext.
|
|
23
|
+
slotContext.directives.transitionDirective
|
|
27
24
|
),
|
|
28
25
|
children: /* @__PURE__ */ jsxRuntime.jsx(slot.Slot, { slotContent: slotContext.state.structure, props: slotContext })
|
|
29
26
|
}
|
|
30
27
|
);
|
|
31
28
|
const Alert = React.forwardRef(function Alert2(props, ref) {
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
};
|
|
38
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !state.hidden && /* @__PURE__ */ jsxRuntime.jsx(AlertElement, { ...slotContext }) });
|
|
29
|
+
const widgetContext = generated_config.useWidgetWithConfig(export_createAlert, props, "alert", {
|
|
30
|
+
structure: AlertDefaultSlotStructure
|
|
31
|
+
});
|
|
32
|
+
React.useImperativeHandle(ref, () => widgetContext.api, []);
|
|
33
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !widgetContext.state.hidden && /* @__PURE__ */ jsxRuntime.jsx(AlertElement, { ...widgetContext }) });
|
|
39
34
|
});
|
|
40
35
|
exports.Alert = Alert;
|
|
36
|
+
exports.AlertDefaultSlotStructure = AlertDefaultSlotStructure;
|
|
41
37
|
exports.export_createAlert = export_createAlert;
|
|
42
38
|
exports.export_getAlertDefaultConfig = export_getAlertDefaultConfig;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const generated_config = require("./generated/config.cjs");
|
|
5
|
+
const collapse = require("@agnos-ui/core-bootstrap/components/collapse");
|
|
6
|
+
const directive = require("@agnos-ui/react-headless/utils/directive");
|
|
7
|
+
const export_getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
|
|
8
|
+
const export_createCollapse = collapse.createCollapse;
|
|
9
|
+
const Collapse = React.forwardRef(
|
|
10
|
+
function Collapse2(props, ref) {
|
|
11
|
+
const { api, directives } = generated_config.useWidgetWithConfig(export_createCollapse, props, "collapse");
|
|
12
|
+
React.useImperativeHandle(ref, () => api, []);
|
|
13
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...directive.useDirectives(directives.collapseDirective), children: props.children });
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
exports.Collapse = Collapse;
|
|
17
|
+
exports.export_createCollapse = export_createCollapse;
|
|
18
|
+
exports.export_getCollapseDefaultConfig = export_getCollapseDefaultConfig;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useImperativeHandle } from "react";
|
|
3
|
+
import { useWidgetWithConfig } from "./generated/config.js";
|
|
4
|
+
import { getCollapseDefaultConfig, createCollapse } from "@agnos-ui/core-bootstrap/components/collapse";
|
|
5
|
+
import { useDirectives } from "@agnos-ui/react-headless/utils/directive";
|
|
6
|
+
const export_getCollapseDefaultConfig = getCollapseDefaultConfig;
|
|
7
|
+
const export_createCollapse = createCollapse;
|
|
8
|
+
const Collapse = forwardRef(
|
|
9
|
+
function Collapse2(props, ref) {
|
|
10
|
+
const { api, directives } = useWidgetWithConfig(export_createCollapse, props, "collapse");
|
|
11
|
+
useImperativeHandle(ref, () => api, []);
|
|
12
|
+
return /* @__PURE__ */ jsx("div", { ...useDirectives(directives.collapseDirective), children: props.children });
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
export {
|
|
16
|
+
Collapse as C,
|
|
17
|
+
export_createCollapse as a,
|
|
18
|
+
export_getCollapseDefaultConfig as e
|
|
19
|
+
};
|
|
@@ -1,4 +1,43 @@
|
|
|
1
1
|
import type { ForwardRefExoticComponent, PropsWithChildren, RefAttributes } from 'react';
|
|
2
|
-
import type { AccordionApi, AccordionItemApi, AccordionItemProps, AccordionProps } from './accordion.gen';
|
|
2
|
+
import type { AccordionApi, AccordionItemApi, AccordionItemContext, AccordionItemProps, AccordionProps } from './accordion.gen';
|
|
3
|
+
/**
|
|
4
|
+
* Renders the default slot structure for an accordion item.
|
|
5
|
+
*
|
|
6
|
+
* @param {AccordionItemContext} slotContext - The context containing state and directives for the accordion item.
|
|
7
|
+
* @returns {JSX.Element} The JSX element representing the accordion item's default slot structure.
|
|
8
|
+
*/
|
|
9
|
+
export declare const AccordionItemDefaultSlotStructure: (slotContext: AccordionItemContext) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* AccordionItem component is a part of the Accordion component suite.
|
|
12
|
+
*
|
|
13
|
+
* @param {Partial<AccordionItemProps>} props - The properties for the AccordionItem component.
|
|
14
|
+
* @param {ForwardedRef<AccordionItemApi>} ref - The forwarded ref to the AccordionItemApi.
|
|
15
|
+
*
|
|
16
|
+
* @returns {JSX.Element} The rendered AccordionItem component.
|
|
17
|
+
* @remarks
|
|
18
|
+
* This component uses several hooks:
|
|
19
|
+
* - {@link https://react.dev/reference/react/useContext | useContext} to get the `registerItem` function from {@link AccordionDIContext}.
|
|
20
|
+
* - {@link useWidgetWithConfig} to initialize the widget context.
|
|
21
|
+
* - {@link https://react.dev/reference/react/useImperativeHandle | useImperativeHandle} to expose the `api` to the parent component.
|
|
22
|
+
* - {@link https://react.dev/reference/react/useEffect | useEffect} to call `api.initDone()` after the component mounts.
|
|
23
|
+
*
|
|
24
|
+
* The component also uses {@link useDirectives} to apply directives to the rendered `div` element.
|
|
25
|
+
*
|
|
26
|
+
* @see {@link useWidgetWithConfig}
|
|
27
|
+
* @see {@link useDirectives}
|
|
28
|
+
*/
|
|
3
29
|
export declare const AccordionItem: ForwardRefExoticComponent<Partial<AccordionItemProps> & RefAttributes<AccordionItemApi>>;
|
|
30
|
+
/**
|
|
31
|
+
* Accordion component that provides a collapsible content container.
|
|
32
|
+
*
|
|
33
|
+
* This component uses a forward ref to expose the Accordion API to parent components.
|
|
34
|
+
* It leverages the {@link useWidgetWithConfig} hook to create the accordion widget and
|
|
35
|
+
* {@link https://react.dev/reference/react/useImperativeHandle | useImperativeHandle} to bind the widget API to the ref.
|
|
36
|
+
|
|
37
|
+
* @param {PropsWithChildren<Partial<AccordionProps>>} props - The properties for the Accordion component.
|
|
38
|
+
* @param {ForwardedRef<AccordionApi>} ref - The ref to be forwarded to the Accordion API.
|
|
39
|
+
*
|
|
40
|
+
* @returns {JSX.Element} The rendered Accordion component.
|
|
41
|
+
*
|
|
42
|
+
*/
|
|
4
43
|
export declare const Accordion: ForwardRefExoticComponent<PropsWithChildren<Partial<AccordionProps>> & RefAttributes<AccordionApi>>;
|
|
@@ -6,7 +6,14 @@ import type { TransitionFn } from '@agnos-ui/react-headless/services/transitions
|
|
|
6
6
|
*/
|
|
7
7
|
declare const export_getAccordionDefaultConfig: () => AccordionProps;
|
|
8
8
|
export { export_getAccordionDefaultConfig as getAccordionDefaultConfig };
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Represents the context for an accordion item within the accordion component.
|
|
11
|
+
*/
|
|
12
|
+
export interface AccordionItemContext extends WidgetSlotContext<AccordionItemWidget> {
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Represents the state of an Accordion component.
|
|
16
|
+
*/
|
|
10
17
|
export interface AccordionState {
|
|
11
18
|
/**
|
|
12
19
|
* Array containing all the accordion-items contained in the accordion.
|
|
@@ -28,6 +35,9 @@ export interface AccordionState {
|
|
|
28
35
|
*/
|
|
29
36
|
itemStructure: SlotContent<AccordionItemContext>;
|
|
30
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* Represents the state of an AccordionItem component.
|
|
40
|
+
*/
|
|
31
41
|
export interface AccordionProps {
|
|
32
42
|
/**
|
|
33
43
|
* The transition to use for the accordion-item body-container when the accordion-item is toggled.
|
|
@@ -131,7 +141,13 @@ export interface AccordionProps {
|
|
|
131
141
|
*/
|
|
132
142
|
itemStructure: SlotContent<AccordionItemContext>;
|
|
133
143
|
}
|
|
134
|
-
|
|
144
|
+
/**
|
|
145
|
+
* Represents an Accordion widget type.
|
|
146
|
+
*/
|
|
147
|
+
export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, AccordionDirectives>;
|
|
148
|
+
/**
|
|
149
|
+
* Represents the state of an accordion item, extending the core item state and additional properties specific to the accordion item.
|
|
150
|
+
*/
|
|
135
151
|
export interface AccordionItemState {
|
|
136
152
|
/**
|
|
137
153
|
* If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
|
|
@@ -200,6 +216,9 @@ export interface AccordionItemState {
|
|
|
200
216
|
*/
|
|
201
217
|
header: SlotContent<AccordionItemContext>;
|
|
202
218
|
}
|
|
219
|
+
/**
|
|
220
|
+
* Represents the properties for an Accordion item component.
|
|
221
|
+
*/
|
|
203
222
|
export interface AccordionItemProps {
|
|
204
223
|
/**
|
|
205
224
|
* If `true`, accordion-item will be animated.
|
|
@@ -289,7 +308,10 @@ export interface AccordionItemProps {
|
|
|
289
308
|
*/
|
|
290
309
|
header: SlotContent<AccordionItemContext>;
|
|
291
310
|
}
|
|
292
|
-
|
|
311
|
+
/**
|
|
312
|
+
* Represents a widget for an accordion item.
|
|
313
|
+
*/
|
|
314
|
+
export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemDirectives>;
|
|
293
315
|
/**
|
|
294
316
|
* Create an AccordionItemWidget with given config props
|
|
295
317
|
* @param config - an optional AccordionItem config
|
|
@@ -315,6 +337,9 @@ export { export_createAccordion as createAccordion };
|
|
|
315
337
|
*/
|
|
316
338
|
declare const export_factoryCreateAccordion: (itemFactory?: WidgetFactory<AccordionItemWidget>, accordionItemProps?: string[], accordionConfig?: AccordionProps, accordionValidator?: ConfigValidator<AccordionProps>) => WidgetFactory<AccordionWidget>;
|
|
317
339
|
export { export_factoryCreateAccordion as factoryCreateAccordion };
|
|
340
|
+
/**
|
|
341
|
+
* Interface representing the API for an accordion component.
|
|
342
|
+
*/
|
|
318
343
|
export interface AccordionApi {
|
|
319
344
|
/**
|
|
320
345
|
* Given the itemId, will expand the corresponding accordion-item.
|
|
@@ -349,18 +374,18 @@ export interface AccordionApi {
|
|
|
349
374
|
*/
|
|
350
375
|
registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
|
|
351
376
|
}
|
|
377
|
+
/**
|
|
378
|
+
* Interface representing the directives used in the Accordion component.
|
|
379
|
+
*/
|
|
352
380
|
export interface AccordionDirectives {
|
|
353
381
|
/**
|
|
354
382
|
* Directive to put on the accordion DOM element
|
|
355
383
|
*/
|
|
356
384
|
accordionDirective: Directive;
|
|
357
385
|
}
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
*/
|
|
362
|
-
click(): void;
|
|
363
|
-
}
|
|
386
|
+
/**
|
|
387
|
+
* Interface representing the API for an accordion item.
|
|
388
|
+
*/
|
|
364
389
|
export interface AccordionItemApi {
|
|
365
390
|
/**
|
|
366
391
|
* It will collapse the accordion-item.
|
|
@@ -379,6 +404,9 @@ export interface AccordionItemApi {
|
|
|
379
404
|
*/
|
|
380
405
|
initDone(): void;
|
|
381
406
|
}
|
|
407
|
+
/**
|
|
408
|
+
* Interface representing the directives used in an accordion item.
|
|
409
|
+
*/
|
|
382
410
|
export interface AccordionItemDirectives {
|
|
383
411
|
/**
|
|
384
412
|
* Directive to use in special cases, if the accordion header does not use a button element to control the collapsing.
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const accordion = require("../../accordion-
|
|
3
|
+
const accordion = require("../../accordion-CxT3atuW.cjs");
|
|
4
4
|
exports.Accordion = accordion.Accordion;
|
|
5
5
|
exports.AccordionItem = accordion.AccordionItem;
|
|
6
|
+
exports.AccordionItemDefaultSlotStructure = accordion.AccordionItemDefaultSlotStructure;
|
|
6
7
|
exports.createAccordion = accordion.export_createAccordion;
|
|
7
8
|
exports.createAccordionItem = accordion.export_createAccordionItem;
|
|
8
9
|
exports.factoryCreateAccordion = accordion.export_factoryCreateAccordion;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { a, A,
|
|
1
|
+
import { b, a, A, d, c, f, e } from "../../accordion-BX1iR5BO.js";
|
|
2
2
|
export {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
b as Accordion,
|
|
4
|
+
a as AccordionItem,
|
|
5
|
+
A as AccordionItemDefaultSlotStructure,
|
|
6
|
+
d as createAccordion,
|
|
7
|
+
c as createAccordionItem,
|
|
8
|
+
f as factoryCreateAccordion,
|
|
8
9
|
e as getAccordionDefaultConfig
|
|
9
10
|
};
|
|
@@ -1,3 +1,21 @@
|
|
|
1
1
|
import type { ForwardRefExoticComponent, RefAttributes } from 'react';
|
|
2
|
-
import type { AlertApi, AlertProps } from './alert.gen';
|
|
2
|
+
import type { AlertApi, AlertContext, AlertProps } from './alert.gen';
|
|
3
|
+
/**
|
|
4
|
+
* Renders the default slot structure for an alert component.
|
|
5
|
+
*
|
|
6
|
+
* @param slotContext - The context object containing state and API for the alert.
|
|
7
|
+
* @returns A JSX element representing the alert's body and an optional close button.
|
|
8
|
+
*/
|
|
9
|
+
export declare const AlertDefaultSlotStructure: (slotContext: AlertContext) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Alert component that uses a forward ref to expose an API.
|
|
12
|
+
*
|
|
13
|
+
* This component utilizes the {@link useWidgetWithConfig} hook to create an alert widget context
|
|
14
|
+
* and the {@link https://react.dev/reference/react/useImperativeHandle | useImperativeHandle} hook to expose the widget's API via the ref.
|
|
15
|
+
*
|
|
16
|
+
* @param props - Partial properties of the AlertProps interface.
|
|
17
|
+
* @param ref - Forwarded reference to the AlertApi.
|
|
18
|
+
*
|
|
19
|
+
* @returns A JSX element that conditionally renders the AlertElement based on the widget's hidden state.
|
|
20
|
+
*/
|
|
3
21
|
export declare const Alert: ForwardRefExoticComponent<Partial<AlertProps> & RefAttributes<AlertApi>>;
|
|
@@ -7,7 +7,14 @@ import type { TransitionFn } from '@agnos-ui/react-headless/services/transitions
|
|
|
7
7
|
*/
|
|
8
8
|
declare const export_getAlertDefaultConfig: () => AlertProps;
|
|
9
9
|
export { export_getAlertDefaultConfig as getAlertDefaultConfig };
|
|
10
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Represents the context for an Alert component.
|
|
12
|
+
*/
|
|
13
|
+
export interface AlertContext extends WidgetSlotContext<AlertWidget> {
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Represents the state of an alert component.
|
|
17
|
+
*/
|
|
11
18
|
export interface AlertState {
|
|
12
19
|
/**
|
|
13
20
|
* Is `true` when the alert is hidden. Compared to `visible`, this is updated after the transition is executed.
|
|
@@ -53,6 +60,9 @@ export interface AlertState {
|
|
|
53
60
|
*/
|
|
54
61
|
type: BSContextualClass;
|
|
55
62
|
}
|
|
63
|
+
/**
|
|
64
|
+
* Represents the properties for the Alert component.
|
|
65
|
+
*/
|
|
56
66
|
export interface AlertProps {
|
|
57
67
|
/**
|
|
58
68
|
* The transition function will be executed when the alert is displayed or hidden.
|
|
@@ -147,7 +157,10 @@ export interface AlertProps {
|
|
|
147
157
|
*/
|
|
148
158
|
type: BSContextualClass;
|
|
149
159
|
}
|
|
150
|
-
|
|
160
|
+
/**
|
|
161
|
+
* Represents an alert widget component.
|
|
162
|
+
*/
|
|
163
|
+
export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, AlertDirectives>;
|
|
151
164
|
/**
|
|
152
165
|
* Create an AlertWidget with given config props
|
|
153
166
|
* @param config - an optional alert config
|
|
@@ -155,6 +168,9 @@ export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, Alert
|
|
|
155
168
|
*/
|
|
156
169
|
declare const export_createAlert: WidgetFactory<AlertWidget>;
|
|
157
170
|
export { export_createAlert as createAlert };
|
|
171
|
+
/**
|
|
172
|
+
* Represents the API for an alert component.
|
|
173
|
+
*/
|
|
158
174
|
export interface AlertApi {
|
|
159
175
|
/**
|
|
160
176
|
* Triggers alert closing programmatically (same as clicking on the close button (×)).
|
|
@@ -165,6 +181,9 @@ export interface AlertApi {
|
|
|
165
181
|
*/
|
|
166
182
|
open(): void;
|
|
167
183
|
}
|
|
184
|
+
/**
|
|
185
|
+
* Represents the directives for an alert component.
|
|
186
|
+
*/
|
|
168
187
|
export interface AlertDirectives {
|
|
169
188
|
/**
|
|
170
189
|
* the transition directive, piloting what is the visual effect of going from hidden to visible
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const alert = require("../../alert-
|
|
3
|
+
const alert = require("../../alert-LKMMYmg_.cjs");
|
|
4
4
|
exports.Alert = alert.Alert;
|
|
5
|
+
exports.AlertDefaultSlotStructure = alert.AlertDefaultSlotStructure;
|
|
5
6
|
exports.createAlert = alert.export_createAlert;
|
|
6
7
|
exports.getAlertDefaultConfig = alert.export_getAlertDefaultConfig;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ForwardRefExoticComponent, PropsWithChildren, RefAttributes } from 'react';
|
|
2
|
+
import type { CollapseApi, CollapseProps } from './collapse.gen';
|
|
3
|
+
/**
|
|
4
|
+
* Collapse component that provides a collapsible container.
|
|
5
|
+
*
|
|
6
|
+
* This component uses the {@link useWidgetWithConfig} hook to create a collapse widget
|
|
7
|
+
* and applies transition directives to the container.
|
|
8
|
+
*
|
|
9
|
+
* @param props - The properties for the Collapse component.
|
|
10
|
+
* @param props.children - The child elements to be rendered inside the collapsible container.
|
|
11
|
+
* @param ref - A ref object to access the Collapse API.
|
|
12
|
+
*
|
|
13
|
+
* @returns A div element with transition directives applied, containing the child elements.
|
|
14
|
+
*/
|
|
15
|
+
export declare const Collapse: ForwardRefExoticComponent<PropsWithChildren<Partial<CollapseProps>> & RefAttributes<CollapseApi>>;
|