zuii 1.4.7 → 1.4.9
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/dist/components/Accordion/js/accordion.d.ts +4 -0
- package/dist/components/Accordion/react/index.d.ts +127 -0
- package/dist/components/Accordion/react/index.js +91 -0
- package/dist/components/Accordion/style/index.css +1 -0
- package/dist/components/Button/react/index.d.ts +4 -0
- package/dist/components/Button/style/index.css +1 -1
- package/dist/components/Color/react/index.js +13 -11
- package/dist/components/Context-menu/js/context-menu.d.ts +3 -1
- package/dist/components/Context-menu/js/context-menu.js +21 -18
- package/dist/components/Context-menu/react/index.js +46 -41
- package/dist/components/Dropdown/react/index.d.ts +6 -1
- package/dist/components/Dropdown/react/index.js +22 -20
- package/dist/components/Tab/js/tab.d.ts +4 -0
- package/dist/components/Tab/react/index.js +73 -0
- package/dist/components/Tab/style/index.css +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +29 -21
- package/dist/node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/AccordionContext.js +6 -0
- package/dist/templates/Accordions/Accordions.d.ts +6 -0
- package/dist/templates/Accordions/Accordions.tsx +100 -0
- package/dist/templates/Dropdowns/Dropdowns.tsx +3 -0
- package/dist/templates/Tabs/Tabs.d.ts +6 -0
- package/dist/templates/Tabs/Tabs.tsx +286 -0
- package/dist/templates/index.d.ts +2 -0
- package/dist/templates/index.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import { AccordionProps, useAccordionButton } from 'react-bootstrap';
|
|
2
|
+
import { default as AccordionContext } from 'react-bootstrap/AccordionContext';
|
|
3
|
+
import { Context } from 'react';
|
|
4
|
+
import { AccordionContextValue } from 'react-bootstrap/esm/AccordionContext';
|
|
5
|
+
/**
|
|
6
|
+
* Interface pour un élément individuel de l'accordéon.
|
|
7
|
+
*/
|
|
8
|
+
interface AccordionItem {
|
|
9
|
+
/**
|
|
10
|
+
* Le titre de l'élément (affiché dans le header).
|
|
11
|
+
*/
|
|
12
|
+
header: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Le contenu de l'élément (affiché dans le body).
|
|
15
|
+
*/
|
|
16
|
+
body: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* La clé unique de l'élément.
|
|
19
|
+
*/
|
|
20
|
+
eventKey: string;
|
|
21
|
+
/**
|
|
22
|
+
* Ajoute une bordure autour de l'élément.
|
|
23
|
+
*/
|
|
24
|
+
border?: boolean;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Propriétés du composant Accordion.
|
|
28
|
+
*/
|
|
29
|
+
interface Props extends AccordionProps {
|
|
30
|
+
/**
|
|
31
|
+
* Liste d'objets définissant les éléments de l'accordéon.
|
|
32
|
+
*/
|
|
33
|
+
items?: AccordionItem[];
|
|
34
|
+
/**
|
|
35
|
+
* Classe CSS additionnelle.
|
|
36
|
+
*/
|
|
37
|
+
className?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Ajoute une bordure autour de l'élément.
|
|
40
|
+
*/
|
|
41
|
+
border?: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Composant Accordion basé sur React Bootstrap.
|
|
45
|
+
*
|
|
46
|
+
* @param {Props} props - Les propriétés du composant.
|
|
47
|
+
* @returns {JSX.Element} Le rendu du composant.
|
|
48
|
+
*/
|
|
49
|
+
export declare const Accordion: {
|
|
50
|
+
({ items, children, className, border, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
Item({ className, border, ...props }: any): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
Header({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
Body({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
ContextToggle({ children, eventKey, callback, as: Component, variant, className, ...props }: ContextToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
Toggle({ children, eventKey, callback, as: Component, className, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
/**
|
|
57
|
+
* Exposition des utilitaires de React Bootstrap sur le composant Accordion.
|
|
58
|
+
*/
|
|
59
|
+
useAccordionButton: typeof useAccordionButton;
|
|
60
|
+
AccordionContext: Context<AccordionContextValue>;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* Interface pour les propriétés du composant ContextToggle.
|
|
64
|
+
*/
|
|
65
|
+
interface ContextToggleProps {
|
|
66
|
+
/**
|
|
67
|
+
* Contenu du bouton.
|
|
68
|
+
*/
|
|
69
|
+
children: React.ReactNode;
|
|
70
|
+
/**
|
|
71
|
+
* Clé de l'élément à contrôler.
|
|
72
|
+
*/
|
|
73
|
+
eventKey: string;
|
|
74
|
+
/**
|
|
75
|
+
* Callback optionnel au clic.
|
|
76
|
+
*/
|
|
77
|
+
callback?: (eventKey: string) => void;
|
|
78
|
+
/**
|
|
79
|
+
* L'élément ou composant à utiliser pour le rendu (défaut: Button).
|
|
80
|
+
*/
|
|
81
|
+
as?: React.ElementType;
|
|
82
|
+
/**
|
|
83
|
+
* Variante de couleur Bootstrap. Par défaut primary ou success si ouvert.
|
|
84
|
+
*/
|
|
85
|
+
variant?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Classe additionnelle.
|
|
88
|
+
*/
|
|
89
|
+
className?: string;
|
|
90
|
+
/**
|
|
91
|
+
* Autres propriétés.
|
|
92
|
+
*/
|
|
93
|
+
[key: string]: any;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Interface pour les propriétés du composant Toggle.
|
|
97
|
+
*/
|
|
98
|
+
interface ToggleProps {
|
|
99
|
+
/**
|
|
100
|
+
* Contenu du toggle.
|
|
101
|
+
*/
|
|
102
|
+
children: React.ReactNode;
|
|
103
|
+
/**
|
|
104
|
+
* Clé de l'élément à contrôler.
|
|
105
|
+
*/
|
|
106
|
+
eventKey: string;
|
|
107
|
+
/**
|
|
108
|
+
* Callback optionnel au clic.
|
|
109
|
+
*/
|
|
110
|
+
callback?: (eventKey: string) => void;
|
|
111
|
+
/**
|
|
112
|
+
* L'élément ou composant à utiliser pour le rendu (défaut: Button).
|
|
113
|
+
*/
|
|
114
|
+
as?: React.ElementType;
|
|
115
|
+
/**
|
|
116
|
+
* Classe additionnelle.
|
|
117
|
+
*/
|
|
118
|
+
className?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Autres propriétés.
|
|
121
|
+
*/
|
|
122
|
+
[key: string]: any;
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Export des utilitaires de React Bootstrap pour l'Accordion.
|
|
126
|
+
*/
|
|
127
|
+
export { useAccordionButton, AccordionContext };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { jsx as t, jsxs as p } from "react/jsx-runtime";
|
|
2
|
+
import { Accordion as s, useAccordionButton as u } from "react-bootstrap";
|
|
3
|
+
import { useAccordionButton as v } from "react-bootstrap";
|
|
4
|
+
import $ from "../../../node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/AccordionContext.js";
|
|
5
|
+
import { useContext as h } from "react";
|
|
6
|
+
import { Button as C } from "../../Button/react/index.js";
|
|
7
|
+
import '../style/index.css';/* empty css */
|
|
8
|
+
const a = ({
|
|
9
|
+
items: r = [],
|
|
10
|
+
children: o,
|
|
11
|
+
className: e = "",
|
|
12
|
+
border: n = !1,
|
|
13
|
+
...d
|
|
14
|
+
}) => {
|
|
15
|
+
const c = "accordion", i = n ? `${c}--border` : "";
|
|
16
|
+
return /* @__PURE__ */ t("div", { className: `${c}__wrapper `.trim(), children: /* @__PURE__ */ t(s, { className: `${e}`.trim(), ...d, children: r.length > 0 ? r.map((m, l) => /* @__PURE__ */ p(
|
|
17
|
+
s.Item,
|
|
18
|
+
{
|
|
19
|
+
eventKey: m.eventKey,
|
|
20
|
+
className: `${c}__item ${i}`.trim(),
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ t(s.Header, { className: `${c}__header`, children: m.header }),
|
|
23
|
+
/* @__PURE__ */ t(s.Body, { className: `${c}__body`, children: m.body })
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
l
|
|
27
|
+
)) : o }) });
|
|
28
|
+
};
|
|
29
|
+
a.Item = ({ className: r = "", border: o = !1, ...e }) => {
|
|
30
|
+
const n = o ? "accordion--border" : "";
|
|
31
|
+
return /* @__PURE__ */ t(s.Item, { className: `accordion__item ${n} ${r}`.trim(), ...e });
|
|
32
|
+
};
|
|
33
|
+
a.Header = ({ className: r = "", ...o }) => /* @__PURE__ */ t(s.Header, { className: `accordion__header ${r}`.trim(), ...o });
|
|
34
|
+
a.Body = ({ className: r = "", ...o }) => /* @__PURE__ */ t(s.Body, { className: `accordion__body ${r}`.trim(), ...o });
|
|
35
|
+
a.ContextToggle = ({
|
|
36
|
+
children: r,
|
|
37
|
+
eventKey: o,
|
|
38
|
+
callback: e,
|
|
39
|
+
as: n = C,
|
|
40
|
+
variant: d,
|
|
41
|
+
className: c = "",
|
|
42
|
+
...i
|
|
43
|
+
}) => {
|
|
44
|
+
const { activeEventKey: m } = h($), l = u(
|
|
45
|
+
o,
|
|
46
|
+
() => e && e(o)
|
|
47
|
+
), _ = m === o;
|
|
48
|
+
return /* @__PURE__ */ p(
|
|
49
|
+
n,
|
|
50
|
+
{
|
|
51
|
+
variant: d || (_ ? "success" : "primary"),
|
|
52
|
+
onClick: l,
|
|
53
|
+
className: c,
|
|
54
|
+
...i,
|
|
55
|
+
children: [
|
|
56
|
+
r,
|
|
57
|
+
" ",
|
|
58
|
+
_ ? " (Ouvert)" : " (Fermé)"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
a.Toggle = ({
|
|
64
|
+
children: r,
|
|
65
|
+
eventKey: o,
|
|
66
|
+
callback: e,
|
|
67
|
+
as: n = C,
|
|
68
|
+
className: d = "",
|
|
69
|
+
...c
|
|
70
|
+
}) => {
|
|
71
|
+
const i = u(
|
|
72
|
+
o,
|
|
73
|
+
() => e && e(o)
|
|
74
|
+
);
|
|
75
|
+
return /* @__PURE__ */ t(
|
|
76
|
+
n,
|
|
77
|
+
{
|
|
78
|
+
onClick: i,
|
|
79
|
+
className: d,
|
|
80
|
+
...c,
|
|
81
|
+
children: r
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
};
|
|
85
|
+
a.useAccordionButton = u;
|
|
86
|
+
a.AccordionContext = $;
|
|
87
|
+
export {
|
|
88
|
+
a as Accordion,
|
|
89
|
+
$ as AccordionContext,
|
|
90
|
+
v as useAccordionButton
|
|
91
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer components{.accordion__wrapper{--accordion-radius: var(--radius-none);--accordion-border-radius: var(--accordion-radius);--accordion-border-width: none;border:var(--accordion-border-width) solid var(--border-color);border-radius:var(--accordion-border-radius)}.accordion{--accordion-border-radius: none;--accordion-inner-border-radius: none}.accordion-item:first-of-type{border-top-left-radius:var(--accordion-radius);border-top-right-radius:var(--accordion-radius);overflow:hidden}.accordion-item:last-of-type{border-bottom-left-radius:var(--accordion-radius);border-bottom-right-radius:var(--accordion-radius);overflow:hidden}.accordion__item{--accordion-border-width: none}.accordion__item:not(:last-child){border-bottom:var(--accordion-border-width) solid var(--border-color)}.accordion-button:not(.collapsed){background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);box-shadow:none}.accordion--border{--accordion-border-width: var(--border-width)}}
|
|
@@ -24,6 +24,10 @@ interface Props extends Omit<ButtonProps, "size"> {
|
|
|
24
24
|
* Style de bouton transparent
|
|
25
25
|
*/
|
|
26
26
|
transparent?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Clé d'événement pour l'intégration avec des composants comme Tabs.
|
|
29
|
+
*/
|
|
30
|
+
eventKey?: string | number;
|
|
27
31
|
}
|
|
28
32
|
/**
|
|
29
33
|
* Composant Bouton personnalisé.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.btn{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--gray-300);--btn-disabled-border-color: var(--gray-300);height:fit-content;display:flex;gap:.3rem}.btn:hover,.btn:focus{box-shadow:var(--box-shadow-md)}.btn-content{display:flex;line-height:initial;gap:.3rem;align-items:center}.btn-icon{display:flex;line-height:initial;justify-content:center;align-items:center;padding:.4rem}.btn-icon .btn-content{flex-direction:column}.btn-reverse{flex-direction:row-reverse}.btn-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary);--btn-active-border-color: var(--primary)}.btn-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-outline-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);background:transparent;color:var(--primary-dark);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary);--btn-active-border-color: var(--secondary)}.btn-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-outline-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);background:transparent;color:var(--secondary-dark);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent);--btn-active-border-color: var(--accent)}.btn-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-outline-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);background:transparent;color:var(--accent-dark);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary);--btn-active-border-color: var(--tertiary)}.btn-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-outline-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);background:transparent;color:var(--tertiary-dark);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);--btn-border-color: var(--success);--btn-hover-border-color: var(--success);--btn-active-border-color: var(--success)}.btn-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-outline-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);background:transparent;color:var(--success-dark);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger);--btn-active-border-color: var(--danger)}.btn-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-outline-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);background:transparent;color:var(--danger-dark);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning);--btn-active-border-color: var(--warning)}.btn-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-outline-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);background:transparent;color:var(--warning-dark);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);--btn-border-color: var(--info);--btn-hover-border-color: var(--info);--btn-active-border-color: var(--info)}.btn-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-outline-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);background:transparent;color:var(--info-dark);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);--btn-border-color: var(--light);--btn-hover-border-color: var(--light);--btn-active-border-color: var(--light)}.btn-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-outline-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);background:transparent;color:var(--light-dark);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark);--btn-active-border-color: var(--dark)}.btn-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-outline-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);background:transparent;color:var(--dark-dark);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-transparent{background:transparent;border:none;color:currentColor}.btn-transparent:hover{box-shadow:none}.btn-none{--btn-font-size: calc(var(--spacing-none) * 0);--btn-padding-y: calc(var(--spacing-none) * 0 * .5);--btn-padding-x: calc(var(--spacing-none) * 0);--btn-border-radius: var(--border-radius)}.btn-xs{--btn-font-size: calc(var(--spacing-xs) * 3);--btn-padding-y: calc(var(--spacing-xs) * 3 * .5);--btn-padding-x: calc(var(--spacing-xs) * 3);--btn-border-radius: var(--border-radius)}.btn-sm{--btn-font-size: calc(var(--spacing-sm) * 1.75);--btn-padding-y: calc(var(--spacing-sm) * 1.75 * .5);--btn-padding-x: calc(var(--spacing-sm) * 1.75);--btn-border-radius: var(--border-radius)}.btn-md{--btn-font-size: calc(var(--spacing-md) * 1);--btn-padding-y: calc(var(--spacing-md) * 1 * .5);--btn-padding-x: calc(var(--spacing-md) * 1);--btn-border-radius: var(--border-radius)}.btn-lg{--btn-font-size: calc(var(--spacing-lg) * .625);--btn-padding-y: calc(var(--spacing-lg) * .625 * .5);--btn-padding-x: calc(var(--spacing-lg) * .625);--btn-border-radius: var(--border-radius)}.btn-xl{--btn-font-size: calc(var(--spacing-xl) * .375);--btn-padding-y: calc(var(--spacing-xl) * .375 * .5);--btn-padding-x: calc(var(--spacing-xl) * .375);--btn-border-radius: var(--border-radius)}.btn-2xl{--btn-font-size: calc(var(--spacing-2xl) * .25);--btn-padding-y: calc(var(--spacing-2xl) * .25 * .5);--btn-padding-x: calc(var(--spacing-2xl) * .25);--btn-border-radius: var(--border-radius)}.btn-3xl{--btn-font-size: calc(var(--spacing-3xl) * .15);--btn-padding-y: calc(var(--spacing-3xl) * .15 * .5);--btn-padding-x: calc(var(--spacing-3xl) * .15);--btn-border-radius: var(--border-radius)}.btn-4xl{--btn-font-size: calc(var(--spacing-4xl) * .14);--btn-padding-y: calc(var(--spacing-4xl) * .14 * .5);--btn-padding-x: calc(var(--spacing-4xl) * .14);--btn-border-radius: var(--border-radius)}.btn-close{--btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--btn-close-opacity: .5;--btn-close-hover-opacity: .75;--btn-close-focus-shadow: 0 0 0 .1rem var(--primary);--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: .25;-webkit-mask-image:var(--btn-close-bg);mask-image:var(--btn-close-bg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.btn:disabled{background-color:color-mix(in srgb,var(--primary),white 85%);border-color:color-mix(in srgb,var(--primary),white 85%);color:color-mix(in srgb,var(--primary),white 60%)}}
|
|
1
|
+
@layer components{.btn{background-color:var(--primary);color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-bg: var(--primary-dark);--btn-hover-border-color: var(--primary-dark);--btn-active-bg: var(--primary-dark);--btn-active-border-color: var(--primary-dark);--btn-disabled-bg: var(--gray-300);--btn-disabled-border-color: var(--gray-300);height:fit-content;display:flex;gap:.3rem}.btn:hover,.btn:focus{box-shadow:var(--box-shadow-md)}.btn-content{display:flex;line-height:initial;gap:.3rem;align-items:center}.btn-icon{display:flex;line-height:initial;justify-content:center;align-items:center;padding:.4rem}.btn-icon .btn-content{flex-direction:column}.btn-reverse{flex-direction:row-reverse}.btn-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary);--btn-active-border-color: var(--primary)}.btn-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-outline-primary{background-color:rgba(var(--primary-rgb),var(--bg-opacity, 1));color:var(--primary-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-light{background-color:rgba(var(--primary-light-rgb),var(--bg-opacity, 1));color:var(--primary-light-contrast);background:transparent;color:var(--primary);--btn-border-color: var(--primary-light);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary)}.btn-outline-primary-dark{background-color:rgba(var(--primary-dark-rgb),var(--bg-opacity, 1));color:var(--primary-dark-contrast);background:transparent;color:var(--primary-dark);--btn-border-color: var(--primary-dark);--btn-hover-bg: var(--primary);--btn-hover-border-color: var(--primary-dark)}.btn-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary);--btn-active-border-color: var(--secondary)}.btn-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-outline-secondary{background-color:rgba(var(--secondary-rgb),var(--bg-opacity, 1));color:var(--secondary-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-light{background-color:rgba(var(--secondary-light-rgb),var(--bg-opacity, 1));color:var(--secondary-light-contrast);background:transparent;color:var(--secondary);--btn-border-color: var(--secondary-light);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary)}.btn-outline-secondary-dark{background-color:rgba(var(--secondary-dark-rgb),var(--bg-opacity, 1));color:var(--secondary-dark-contrast);background:transparent;color:var(--secondary-dark);--btn-border-color: var(--secondary-dark);--btn-hover-bg: var(--secondary);--btn-hover-border-color: var(--secondary-dark)}.btn-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent);--btn-active-border-color: var(--accent)}.btn-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-outline-accent{background-color:rgba(var(--accent-rgb),var(--bg-opacity, 1));color:var(--accent-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-light{background-color:rgba(var(--accent-light-rgb),var(--bg-opacity, 1));color:var(--accent-light-contrast);background:transparent;color:var(--accent);--btn-border-color: var(--accent-light);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent)}.btn-outline-accent-dark{background-color:rgba(var(--accent-dark-rgb),var(--bg-opacity, 1));color:var(--accent-dark-contrast);background:transparent;color:var(--accent-dark);--btn-border-color: var(--accent-dark);--btn-hover-bg: var(--accent);--btn-hover-border-color: var(--accent-dark)}.btn-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary);--btn-active-border-color: var(--tertiary)}.btn-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-outline-tertiary{background-color:rgba(var(--tertiary-rgb),var(--bg-opacity, 1));color:var(--tertiary-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-light{background-color:rgba(var(--tertiary-light-rgb),var(--bg-opacity, 1));color:var(--tertiary-light-contrast);background:transparent;color:var(--tertiary);--btn-border-color: var(--tertiary-light);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary)}.btn-outline-tertiary-dark{background-color:rgba(var(--tertiary-dark-rgb),var(--bg-opacity, 1));color:var(--tertiary-dark-contrast);background:transparent;color:var(--tertiary-dark);--btn-border-color: var(--tertiary-dark);--btn-hover-bg: var(--tertiary);--btn-hover-border-color: var(--tertiary-dark)}.btn-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);--btn-border-color: var(--success);--btn-hover-border-color: var(--success);--btn-active-border-color: var(--success)}.btn-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-outline-success{background-color:rgba(var(--success-rgb),var(--bg-opacity, 1));color:var(--success-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-light{background-color:rgba(var(--success-light-rgb),var(--bg-opacity, 1));color:var(--success-light-contrast);background:transparent;color:var(--success);--btn-border-color: var(--success-light);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success)}.btn-outline-success-dark{background-color:rgba(var(--success-dark-rgb),var(--bg-opacity, 1));color:var(--success-dark-contrast);background:transparent;color:var(--success-dark);--btn-border-color: var(--success-dark);--btn-hover-bg: var(--success);--btn-hover-border-color: var(--success-dark)}.btn-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger);--btn-active-border-color: var(--danger)}.btn-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-outline-danger{background-color:rgba(var(--danger-rgb),var(--bg-opacity, 1));color:var(--danger-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-light{background-color:rgba(var(--danger-light-rgb),var(--bg-opacity, 1));color:var(--danger-light-contrast);background:transparent;color:var(--danger);--btn-border-color: var(--danger-light);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger)}.btn-outline-danger-dark{background-color:rgba(var(--danger-dark-rgb),var(--bg-opacity, 1));color:var(--danger-dark-contrast);background:transparent;color:var(--danger-dark);--btn-border-color: var(--danger-dark);--btn-hover-bg: var(--danger);--btn-hover-border-color: var(--danger-dark)}.btn-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning);--btn-active-border-color: var(--warning)}.btn-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-outline-warning{background-color:rgba(var(--warning-rgb),var(--bg-opacity, 1));color:var(--warning-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-light{background-color:rgba(var(--warning-light-rgb),var(--bg-opacity, 1));color:var(--warning-light-contrast);background:transparent;color:var(--warning);--btn-border-color: var(--warning-light);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning)}.btn-outline-warning-dark{background-color:rgba(var(--warning-dark-rgb),var(--bg-opacity, 1));color:var(--warning-dark-contrast);background:transparent;color:var(--warning-dark);--btn-border-color: var(--warning-dark);--btn-hover-bg: var(--warning);--btn-hover-border-color: var(--warning-dark)}.btn-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);--btn-border-color: var(--info);--btn-hover-border-color: var(--info);--btn-active-border-color: var(--info)}.btn-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-outline-info{background-color:rgba(var(--info-rgb),var(--bg-opacity, 1));color:var(--info-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-light{background-color:rgba(var(--info-light-rgb),var(--bg-opacity, 1));color:var(--info-light-contrast);background:transparent;color:var(--info);--btn-border-color: var(--info-light);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info)}.btn-outline-info-dark{background-color:rgba(var(--info-dark-rgb),var(--bg-opacity, 1));color:var(--info-dark-contrast);background:transparent;color:var(--info-dark);--btn-border-color: var(--info-dark);--btn-hover-bg: var(--info);--btn-hover-border-color: var(--info-dark)}.btn-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);--btn-border-color: var(--light);--btn-hover-border-color: var(--light);--btn-active-border-color: var(--light)}.btn-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-outline-light{background-color:rgba(var(--light-rgb),var(--bg-opacity, 1));color:var(--light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-light{background-color:rgba(var(--light-light-rgb),var(--bg-opacity, 1));color:var(--light-light-contrast);background:transparent;color:var(--light);--btn-border-color: var(--light-light);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light)}.btn-outline-light-dark{background-color:rgba(var(--light-dark-rgb),var(--bg-opacity, 1));color:var(--light-dark-contrast);background:transparent;color:var(--light-dark);--btn-border-color: var(--light-dark);--btn-hover-bg: var(--light);--btn-hover-border-color: var(--light-dark)}.btn-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark);--btn-active-border-color: var(--dark)}.btn-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-outline-dark{background-color:rgba(var(--dark-rgb),var(--bg-opacity, 1));color:var(--dark-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-light{background-color:rgba(var(--dark-light-rgb),var(--bg-opacity, 1));color:var(--dark-light-contrast);background:transparent;color:var(--dark);--btn-border-color: var(--dark-light);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark)}.btn-outline-dark-dark{background-color:rgba(var(--dark-dark-rgb),var(--bg-opacity, 1));color:var(--dark-dark-contrast);background:transparent;color:var(--dark-dark);--btn-border-color: var(--dark-dark);--btn-hover-bg: var(--dark);--btn-hover-border-color: var(--dark-dark)}.btn-transparent{background:transparent;border:none;color:currentColor}.btn-transparent:hover,.btn-transparent:focus{box-shadow:none}.btn-transparent:hover{color:var(--accent)}.btn-none{--btn-font-size: calc(var(--spacing-none) * 0);--btn-padding-y: calc(var(--spacing-none) * 0 * .5);--btn-padding-x: calc(var(--spacing-none) * 0);--btn-border-radius: var(--border-radius)}.btn-xs{--btn-font-size: calc(var(--spacing-xs) * 3);--btn-padding-y: calc(var(--spacing-xs) * 3 * .5);--btn-padding-x: calc(var(--spacing-xs) * 3);--btn-border-radius: var(--border-radius)}.btn-sm{--btn-font-size: calc(var(--spacing-sm) * 1.75);--btn-padding-y: calc(var(--spacing-sm) * 1.75 * .5);--btn-padding-x: calc(var(--spacing-sm) * 1.75);--btn-border-radius: var(--border-radius)}.btn-md{--btn-font-size: calc(var(--spacing-md) * 1);--btn-padding-y: calc(var(--spacing-md) * 1 * .5);--btn-padding-x: calc(var(--spacing-md) * 1);--btn-border-radius: var(--border-radius)}.btn-lg{--btn-font-size: calc(var(--spacing-lg) * .625);--btn-padding-y: calc(var(--spacing-lg) * .625 * .5);--btn-padding-x: calc(var(--spacing-lg) * .625);--btn-border-radius: var(--border-radius)}.btn-xl{--btn-font-size: calc(var(--spacing-xl) * .375);--btn-padding-y: calc(var(--spacing-xl) * .375 * .5);--btn-padding-x: calc(var(--spacing-xl) * .375);--btn-border-radius: var(--border-radius)}.btn-2xl{--btn-font-size: calc(var(--spacing-2xl) * .25);--btn-padding-y: calc(var(--spacing-2xl) * .25 * .5);--btn-padding-x: calc(var(--spacing-2xl) * .25);--btn-border-radius: var(--border-radius)}.btn-3xl{--btn-font-size: calc(var(--spacing-3xl) * .15);--btn-padding-y: calc(var(--spacing-3xl) * .15 * .5);--btn-padding-x: calc(var(--spacing-3xl) * .15);--btn-border-radius: var(--border-radius)}.btn-4xl{--btn-font-size: calc(var(--spacing-4xl) * .14);--btn-padding-y: calc(var(--spacing-4xl) * .14 * .5);--btn-padding-x: calc(var(--spacing-4xl) * .14);--btn-border-radius: var(--border-radius)}.btn-close{--btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--btn-close-opacity: .5;--btn-close-hover-opacity: .75;--btn-close-focus-shadow: 0 0 0 .1rem var(--primary);--btn-close-focus-opacity: 1;--btn-close-disabled-opacity: .25;-webkit-mask-image:var(--btn-close-bg);mask-image:var(--btn-close-bg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.btn:disabled{background-color:color-mix(in srgb,var(--primary),white 85%);border-color:color-mix(in srgb,var(--primary),white 85%);color:color-mix(in srgb,var(--primary),white 60%)}}
|
|
@@ -5,7 +5,7 @@ import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';i
|
|
|
5
5
|
import "react-bootstrap";
|
|
6
6
|
/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
|
-
import { Group as
|
|
8
|
+
import { Group as t } from "../../Group/react/index.js";
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
11
|
/* empty css */
|
|
@@ -22,29 +22,31 @@ import "../../Modal/react/index.js";
|
|
|
22
22
|
/* empty css */
|
|
23
23
|
import "../../Tooltip/react/index.js";
|
|
24
24
|
import "../../Table/react/index.js";
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
import "../../Accordion/react/index.js";
|
|
26
|
+
import "../../Tab/react/index.js";
|
|
27
|
+
const A = ({ name: r }) => {
|
|
28
|
+
const l = e.brands[r];
|
|
29
|
+
return /* @__PURE__ */ i(t, { children: [
|
|
30
|
+
/* @__PURE__ */ o("div", { className: `color bg-${r} p-4`, children: /* @__PURE__ */ i(t, { vertical: !0, center: !0, children: [
|
|
29
31
|
/* @__PURE__ */ o("span", { className: "color__name", children: r }),
|
|
30
|
-
/* @__PURE__ */ o("span", { className: "color__value", children:
|
|
32
|
+
/* @__PURE__ */ o("span", { className: "color__value", children: l.value })
|
|
31
33
|
] }) }),
|
|
32
|
-
/* @__PURE__ */ o("div", { className: `color bg-${r}-light p-4`, children: /* @__PURE__ */ i(
|
|
34
|
+
/* @__PURE__ */ o("div", { className: `color bg-${r}-light p-4`, children: /* @__PURE__ */ i(t, { vertical: !0, center: !0, children: [
|
|
33
35
|
/* @__PURE__ */ i("span", { className: "color__name", children: [
|
|
34
36
|
r,
|
|
35
37
|
"-light"
|
|
36
38
|
] }),
|
|
37
|
-
/* @__PURE__ */ o("span", { className: "color__value", children:
|
|
39
|
+
/* @__PURE__ */ o("span", { className: "color__value", children: l.value })
|
|
38
40
|
] }) }),
|
|
39
|
-
/* @__PURE__ */ o("div", { className: `color bg-${r}-dark p-4`, children: /* @__PURE__ */ i(
|
|
41
|
+
/* @__PURE__ */ o("div", { className: `color bg-${r}-dark p-4`, children: /* @__PURE__ */ i(t, { vertical: !0, center: !0, children: [
|
|
40
42
|
/* @__PURE__ */ i("span", { className: "color__name", children: [
|
|
41
43
|
r,
|
|
42
44
|
"-dark"
|
|
43
45
|
] }),
|
|
44
|
-
/* @__PURE__ */ o("span", { className: "color__value", children:
|
|
46
|
+
/* @__PURE__ */ o("span", { className: "color__value", children: l.value })
|
|
45
47
|
] }) })
|
|
46
48
|
] });
|
|
47
49
|
};
|
|
48
50
|
export {
|
|
49
|
-
|
|
51
|
+
A as Color
|
|
50
52
|
};
|
|
@@ -31,9 +31,11 @@ export declare const isItemDisabled: (item: ContextMenuItem) => boolean;
|
|
|
31
31
|
* @param {number} y - Position Y souhaitée.
|
|
32
32
|
* @param {number} menuWidth - Largeur du menu.
|
|
33
33
|
* @param {number} menuHeight - Hauteur du menu.
|
|
34
|
+
* @param {number} [offsetX=2] - Décalage horizontal par rapport au clic.
|
|
35
|
+
* @param {number} [offsetY=2] - Décalage vertical par rapport au clic.
|
|
34
36
|
* @returns {{x: number, y: number}} La position corrigée.
|
|
35
37
|
*/
|
|
36
|
-
export declare const calculatePosition: (x: number, y: number, menuWidth: number, menuHeight: number) => {
|
|
38
|
+
export declare const calculatePosition: (x: number, y: number, menuWidth: number, menuHeight: number, offsetX?: number, offsetY?: number) => {
|
|
37
39
|
x: number;
|
|
38
40
|
y: number;
|
|
39
41
|
};
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
const
|
|
1
|
+
const c = (t) => {
|
|
2
2
|
const e = t.items && t.items.length > 0;
|
|
3
3
|
return !!(t.disabled || !e && !t.onAction && !t.action && t.type !== "separator");
|
|
4
|
-
},
|
|
5
|
-
let l = t, i = e;
|
|
6
|
-
return
|
|
7
|
-
|
|
4
|
+
}, s = (t, e, o, a, n = 2, r = 2) => {
|
|
5
|
+
let l = t + n, i = e + r;
|
|
6
|
+
return l + o > window.innerWidth && (l = t - o - n), i + a > window.innerHeight && (i = e - a - r), {
|
|
7
|
+
x: Math.max(0, Math.min(l, window.innerWidth - o)),
|
|
8
|
+
y: Math.max(0, Math.min(i, window.innerHeight - a))
|
|
9
|
+
};
|
|
10
|
+
}, d = () => {
|
|
8
11
|
document.body.style.overflow = "hidden";
|
|
9
|
-
},
|
|
12
|
+
}, b = () => {
|
|
10
13
|
document.body.style.overflow = "";
|
|
11
|
-
},
|
|
14
|
+
}, h = (t) => {
|
|
12
15
|
const e = t.getBoundingClientRect();
|
|
13
16
|
e.right > window.innerWidth && (t.style.left = "auto", t.style.right = "100%", t.style.marginLeft = "0", t.style.marginRight = "2px"), e.bottom > window.innerHeight && (t.style.top = "auto", t.style.bottom = "0");
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
+
}, p = (t, e) => {
|
|
18
|
+
c(t) || t.type === "separator" || (t.onAction && t.onAction(), t.action && e && e(t.action));
|
|
19
|
+
}, u = (t) => !t || t.length === 0 ? "" : t.join(" + "), w = {
|
|
17
20
|
items: [
|
|
18
21
|
{
|
|
19
22
|
label: "Nouveau",
|
|
@@ -74,12 +77,12 @@ const n = (t) => {
|
|
|
74
77
|
]
|
|
75
78
|
};
|
|
76
79
|
export {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
80
|
+
h as adjustSubMenuPosition,
|
|
81
|
+
s as calculatePosition,
|
|
82
|
+
w as contextMenuData,
|
|
83
|
+
p as executeAction,
|
|
84
|
+
u as getDisplayShortcut,
|
|
85
|
+
c as isItemDisabled,
|
|
86
|
+
d as lockScroll,
|
|
87
|
+
b as unlockScroll
|
|
85
88
|
};
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { jsxs as M, jsx as
|
|
2
|
-
import { useState as b, useRef as
|
|
3
|
-
import { calculatePosition as C, lockScroll as
|
|
1
|
+
import { jsxs as M, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useState as b, useRef as v, useCallback as h, useEffect as x } from "react";
|
|
3
|
+
import { calculatePosition as C, lockScroll as g, unlockScroll as y, contextMenuData as N, getDisplayShortcut as k, isItemDisabled as D, adjustSubMenuPosition as E, executeAction as I } from "../js/context-menu.js";
|
|
4
4
|
import '../style/index.css';/* empty css */
|
|
5
|
-
const $ = ({ item:
|
|
6
|
-
const [
|
|
7
|
-
return
|
|
8
|
-
|
|
9
|
-
}, [
|
|
5
|
+
const $ = ({ item: s, onAction: f, closeMenu: p }) => {
|
|
6
|
+
const [u, o] = b(!1), r = v(null), e = "context-menu", i = !!(s.items && s.items.length > 0), t = k(s.shortcuts), c = D(s);
|
|
7
|
+
return x(() => {
|
|
8
|
+
u && r.current && E(r.current);
|
|
9
|
+
}, [u]), s.type === "separator" ? /* @__PURE__ */ l("div", { className: `${e}__separator` }) : /* @__PURE__ */ M(
|
|
10
10
|
"div",
|
|
11
11
|
{
|
|
12
|
-
className: `${
|
|
13
|
-
onMouseEnter: () =>
|
|
14
|
-
onMouseLeave: () =>
|
|
12
|
+
className: `${e}__item ${i ? `${e}__sub-trigger` : ""} ${c ? "disabled" : ""}`.trim(),
|
|
13
|
+
onMouseEnter: () => i && !c && o(!0),
|
|
14
|
+
onMouseLeave: () => i && !c && o(!1),
|
|
15
15
|
onClick: (a) => {
|
|
16
|
-
!
|
|
16
|
+
!i && !c && (a.stopPropagation(), I(s, f), p());
|
|
17
17
|
},
|
|
18
18
|
children: [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
s.label,
|
|
20
|
+
t && /* @__PURE__ */ l("span", { className: `${e}__shortcut`, children: t }),
|
|
21
|
+
i && u && /* @__PURE__ */ l(
|
|
22
22
|
"div",
|
|
23
23
|
{
|
|
24
|
-
ref:
|
|
25
|
-
className: `${
|
|
26
|
-
children:
|
|
24
|
+
ref: r,
|
|
25
|
+
className: `${e} ${e}__sub-menu`,
|
|
26
|
+
children: s.items.map((a, m) => /* @__PURE__ */ l(
|
|
27
27
|
$,
|
|
28
28
|
{
|
|
29
29
|
item: a,
|
|
@@ -37,46 +37,51 @@ const $ = ({ item: e, onAction: f, closeMenu: p }) => {
|
|
|
37
37
|
]
|
|
38
38
|
}
|
|
39
39
|
);
|
|
40
|
-
},
|
|
41
|
-
items:
|
|
40
|
+
}, L = ({
|
|
41
|
+
items: s = N.items,
|
|
42
42
|
onAction: f,
|
|
43
43
|
children: p,
|
|
44
|
-
className:
|
|
44
|
+
className: u = ""
|
|
45
45
|
}) => {
|
|
46
|
-
const [o,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}, []), m = x(() => {
|
|
51
|
-
c(!1);
|
|
46
|
+
const [o, r] = b(!1), [e, i] = b({ x: 0, y: 0 }), t = v(null), c = "context-menu", a = h((n) => {
|
|
47
|
+
n.preventDefault(), i({ x: n.clientX, y: n.clientY }), r(!0);
|
|
48
|
+
}, []), m = h(() => {
|
|
49
|
+
r(!1);
|
|
52
50
|
}, []);
|
|
53
|
-
return
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
return x(() => {
|
|
52
|
+
if (o && t.current) {
|
|
53
|
+
const { offsetWidth: n, offsetHeight: d } = t.current, { x: _, y: S } = C(e.x, e.y, n, d);
|
|
54
|
+
t.current.style.top = `${S}px`, t.current.style.left = `${_}px`, t.current.style.visibility = "visible";
|
|
55
|
+
}
|
|
56
|
+
}, [o, e.x, e.y]), x(() => {
|
|
57
|
+
const n = (d) => {
|
|
58
|
+
t.current && !t.current.contains(d.target) && m();
|
|
56
59
|
};
|
|
57
|
-
return o ? (document.addEventListener("mousedown",
|
|
58
|
-
document.removeEventListener("mousedown",
|
|
60
|
+
return o ? (document.addEventListener("mousedown", n), g()) : y(), () => {
|
|
61
|
+
document.removeEventListener("mousedown", n), y();
|
|
59
62
|
};
|
|
60
63
|
}, [o, m]), /* @__PURE__ */ M(
|
|
61
64
|
"div",
|
|
62
65
|
{
|
|
63
66
|
onContextMenu: a,
|
|
64
|
-
className: `context-menu-wrapper ${
|
|
67
|
+
className: `context-menu-wrapper ${u}`,
|
|
65
68
|
children: [
|
|
66
69
|
p,
|
|
67
|
-
o && /* @__PURE__ */
|
|
70
|
+
o && /* @__PURE__ */ l(
|
|
68
71
|
"div",
|
|
69
72
|
{
|
|
70
|
-
ref:
|
|
71
|
-
className:
|
|
73
|
+
ref: t,
|
|
74
|
+
className: c,
|
|
72
75
|
style: {
|
|
73
|
-
top:
|
|
74
|
-
left:
|
|
76
|
+
top: e.y,
|
|
77
|
+
left: e.x,
|
|
78
|
+
visibility: "hidden"
|
|
79
|
+
// Caché le temps de la mesure au premier affichage
|
|
75
80
|
},
|
|
76
|
-
children:
|
|
81
|
+
children: s.map((n, d) => /* @__PURE__ */ l(
|
|
77
82
|
$,
|
|
78
83
|
{
|
|
79
|
-
item:
|
|
84
|
+
item: n,
|
|
80
85
|
onAction: f,
|
|
81
86
|
closeMenu: m
|
|
82
87
|
},
|
|
@@ -89,5 +94,5 @@ const $ = ({ item: e, onAction: f, closeMenu: p }) => {
|
|
|
89
94
|
);
|
|
90
95
|
};
|
|
91
96
|
export {
|
|
92
|
-
|
|
97
|
+
L as ContextMenu
|
|
93
98
|
};
|
|
@@ -3,6 +3,7 @@ interface DropdownItem {
|
|
|
3
3
|
label?: string;
|
|
4
4
|
href?: string;
|
|
5
5
|
type?: "divider" | "item";
|
|
6
|
+
onClick?: () => void;
|
|
6
7
|
}
|
|
7
8
|
interface Props extends Omit<DropdownProps, "children"> {
|
|
8
9
|
/**
|
|
@@ -25,6 +26,10 @@ interface Props extends Omit<DropdownProps, "children"> {
|
|
|
25
26
|
* Contenu optionnel.
|
|
26
27
|
*/
|
|
27
28
|
children?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Fonction appelée lorsque le dropdown est ouvert.
|
|
31
|
+
*/
|
|
32
|
+
onClick?: () => void;
|
|
28
33
|
}
|
|
29
34
|
/**
|
|
30
35
|
* Composant Dropdown personnalisé.
|
|
@@ -34,7 +39,7 @@ interface Props extends Omit<DropdownProps, "children"> {
|
|
|
34
39
|
* @returns {JSX.Element} Le composant Dropdown rendu.
|
|
35
40
|
*/
|
|
36
41
|
export declare const Dropdown: {
|
|
37
|
-
({ label, variant, items, align, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
({ label, variant, items, align, className, children, onClick, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
38
43
|
Toggle({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
|
|
39
44
|
Menu({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
|
|
40
45
|
Item({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,33 +1,35 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
1
|
+
import { jsx as o, jsxs as _, Fragment as $ } from "react/jsx-runtime";
|
|
2
2
|
import { Dropdown as d } from "react-bootstrap";
|
|
3
3
|
import '../style/index.css';/* empty css */
|
|
4
|
-
const
|
|
4
|
+
const n = ({
|
|
5
5
|
label: r = "Dropdown",
|
|
6
6
|
variant: e = "primary",
|
|
7
|
-
items:
|
|
8
|
-
align:
|
|
9
|
-
className:
|
|
10
|
-
children:
|
|
11
|
-
|
|
7
|
+
items: l = [],
|
|
8
|
+
align: t = "start",
|
|
9
|
+
className: c = "",
|
|
10
|
+
children: s,
|
|
11
|
+
onClick: g,
|
|
12
|
+
...p
|
|
12
13
|
}) => {
|
|
13
|
-
const
|
|
14
|
-
return /* @__PURE__ */ o(d, { className: `${
|
|
15
|
-
/* @__PURE__ */ o(d.Toggle, { variant: e, id: `dropdown-${r}`, className: `${
|
|
16
|
-
/* @__PURE__ */ o(d.Menu, { className: `${
|
|
14
|
+
const i = "dropdown";
|
|
15
|
+
return /* @__PURE__ */ o(d, { className: `${i} ${c}`.trim(), align: t, ...p, children: s || /* @__PURE__ */ _($, { children: [
|
|
16
|
+
/* @__PURE__ */ o(d.Toggle, { variant: e, id: `dropdown-${r}`, className: `${i}__toggle`, children: r }),
|
|
17
|
+
/* @__PURE__ */ o(d.Menu, { className: `${i}__menu`, children: l.map((m, a) => m.type === "divider" ? /* @__PURE__ */ o(d.Divider, { className: `${i}__divider` }, a) : /* @__PURE__ */ o(
|
|
17
18
|
d.Item,
|
|
18
19
|
{
|
|
19
|
-
href:
|
|
20
|
-
className: `${
|
|
21
|
-
|
|
20
|
+
href: m.href,
|
|
21
|
+
className: `${i}__item`,
|
|
22
|
+
onClick: m.onClick,
|
|
23
|
+
children: m.label
|
|
22
24
|
},
|
|
23
|
-
|
|
25
|
+
a
|
|
24
26
|
)) })
|
|
25
27
|
] }) });
|
|
26
28
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
n.Toggle = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Toggle, { className: `dropdown__toggle ${r}`.trim(), ...e });
|
|
30
|
+
n.Menu = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Menu, { className: `dropdown__menu ${r}`.trim(), ...e });
|
|
31
|
+
n.Item = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Item, { className: `dropdown__item ${r}`.trim(), ...e });
|
|
32
|
+
n.Divider = ({ className: r = "", ...e }) => /* @__PURE__ */ o(d.Divider, { className: `dropdown__divider ${r}`.trim(), ...e });
|
|
31
33
|
export {
|
|
32
|
-
|
|
34
|
+
n as Dropdown
|
|
33
35
|
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { jsx as t, jsxs as I } from "react/jsx-runtime";
|
|
2
|
+
import { useState as L } from "react";
|
|
3
|
+
import { TabContainer as C, TabContent as u, TabPane as _, Tabs as q, Tab as N, Nav as w } from "react-bootstrap";
|
|
4
|
+
import '../style/index.css';/* empty css */
|
|
5
|
+
import { Group as f } from "../../Group/react/index.js";
|
|
6
|
+
import { Button as z } from "../../Button/react/index.js";
|
|
7
|
+
const c = ({
|
|
8
|
+
items: a = [],
|
|
9
|
+
children: T,
|
|
10
|
+
className: i = "",
|
|
11
|
+
vertical: v = !1,
|
|
12
|
+
variant: d = "",
|
|
13
|
+
border: g = !1,
|
|
14
|
+
color: $ = "primary",
|
|
15
|
+
defaultActiveKey: x,
|
|
16
|
+
activeKey: b,
|
|
17
|
+
onSelect: h,
|
|
18
|
+
contentClassName: P = "tabs__content",
|
|
19
|
+
...m
|
|
20
|
+
}) => {
|
|
21
|
+
const [S, j] = L(x || (a.length > 0 ? a[0].eventKey : void 0)), o = b !== void 0 ? b : S, s = (e, r) => {
|
|
22
|
+
e && j(e), h && h(e, r);
|
|
23
|
+
}, n = "tabs", y = v ? `${n}--vertical` : "", p = d ? `${n}--${d}` : "", A = g ? `${n}--border` : "", K = `${n}--${$}`;
|
|
24
|
+
return a.length > 0 && v ? /* @__PURE__ */ t(
|
|
25
|
+
C,
|
|
26
|
+
{
|
|
27
|
+
...m,
|
|
28
|
+
activeKey: o,
|
|
29
|
+
onSelect: s,
|
|
30
|
+
children: /* @__PURE__ */ I(f, { className: `${n} ${y} ${p} ${K} ${i}`.trim(), children: [
|
|
31
|
+
/* @__PURE__ */ t(f, { vertical: !0, className: "tabs__nav", children: a.map((e, r) => /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
|
|
32
|
+
z,
|
|
33
|
+
{
|
|
34
|
+
variant: "transparent",
|
|
35
|
+
eventKey: e.eventKey,
|
|
36
|
+
onClick: (l) => s(e.eventKey, l),
|
|
37
|
+
active: o === e.eventKey,
|
|
38
|
+
children: e.header
|
|
39
|
+
}
|
|
40
|
+
) }, r)) }),
|
|
41
|
+
/* @__PURE__ */ t(u, { className: P, children: a.map((e, r) => /* @__PURE__ */ t(_, { eventKey: e.eventKey, children: e.body }, r)) })
|
|
42
|
+
] })
|
|
43
|
+
}
|
|
44
|
+
) : /* @__PURE__ */ t("div", { className: `${n} ${y} ${p} ${A} ${K} ${i}`.trim(), children: /* @__PURE__ */ t(
|
|
45
|
+
q,
|
|
46
|
+
{
|
|
47
|
+
activeKey: o,
|
|
48
|
+
onSelect: s,
|
|
49
|
+
...m,
|
|
50
|
+
children: a.length > 0 ? a.map((e, r) => {
|
|
51
|
+
const { header: l, body: B, ...G } = e;
|
|
52
|
+
return /* @__PURE__ */ t(
|
|
53
|
+
N,
|
|
54
|
+
{
|
|
55
|
+
title: l,
|
|
56
|
+
...G,
|
|
57
|
+
tabClassName: `${n}__item btn btn-${$}`,
|
|
58
|
+
children: /* @__PURE__ */ t("div", { className: `${n}__content`, children: B })
|
|
59
|
+
},
|
|
60
|
+
r
|
|
61
|
+
);
|
|
62
|
+
}) : T
|
|
63
|
+
}
|
|
64
|
+
) });
|
|
65
|
+
};
|
|
66
|
+
c.Item = N;
|
|
67
|
+
c.Container = C;
|
|
68
|
+
c.Content = u;
|
|
69
|
+
c.Pane = _;
|
|
70
|
+
c.Nav = w;
|
|
71
|
+
export {
|
|
72
|
+
c as Tabs
|
|
73
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer components{.tabs{--nav-tabs-link-active-color: var(--secondary);--tab-tinte: var(--white) 90%}.tabs .nav-tabs{--nav-tabs-border-radius: var(--radius-none, 0);--nav-tabs-border-width: 0;--nav-link-color: currentColor;--nav-link-hover-color: var(--body-color)}.tabs .nav{background:var(--tab-bg-color);align-items:stretch}.tabs__content{background:var(--tab-bg-color-content);padding:var(--spacing-lg) var(--spacing-lg);height:inherit}.tabs .nav-item{display:flex}.tabs .tabs__item{border-radius:var(--nav-tabs-border-radius);height:100%;justify-content:center;align-items:center}.tabs .tabs__item.btn:not(.active){background:transparent}.tabs .tabs__item.btn:not(.active):not(:disabled){color:var(--body-color)}.tabs .tab-content>*{height:100%}.tabs--primary{--tab-bg-color: color-mix(in srgb, var(--primary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--primary), var(--white) 92%)}.tabs--secondary{--tab-bg-color: color-mix(in srgb, var(--secondary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--secondary), var(--white) 92%)}.tabs--accent{--tab-bg-color: color-mix(in srgb, var(--accent), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--accent), var(--white) 92%)}.tabs--tertiary{--tab-bg-color: color-mix(in srgb, var(--tertiary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--tertiary), var(--white) 92%)}.tabs--success{--tab-bg-color: color-mix(in srgb, var(--success), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--success), var(--white) 92%)}.tabs--danger{--tab-bg-color: color-mix(in srgb, var(--danger), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--danger), var(--white) 92%)}.tabs--warning{--tab-bg-color: color-mix(in srgb, var(--warning), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--warning), var(--white) 92%)}.tabs--info{--tab-bg-color: color-mix(in srgb, var(--info), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--info), var(--white) 92%)}.tabs--light{--tab-bg-color: color-mix(in srgb, var(--light), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--light), var(--white) 92%)}.tabs--dark{--tab-bg-color: color-mix(in srgb, var(--dark), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--dark), var(--white) 92%)}.tabs--pills{--tab-bg-color: transparent;--tab-tinte: var(--white) 50%}.tabs--pills .tabs__item{--nav-link-padding-y: .3rem;--nav-link-padding-x: .75rem;border-radius:var(--radius-lg)}.tabs--pills .tab-content{margin-top:.8rem}.tabs--border .tabs__item.active{border-width:1px;border-color:var(--btn-border-color);background:transparent;color:color-mix(in srgb,var(--btn-border-color),var(--dark) 20%)}.tabs--underline{--tab-bg-color: transparent}.tabs--underline .tabs__item{border:none;background:transparent;border-bottom:3px solid color-mix(in srgb,var(--body-color),transparent 90%)}.tabs--underline .tabs__item.active{color:color-mix(in srgb,var(--btn-border-color),var(--dark) 30%);border-bottom:3px solid var(--btn-border-color)}.tabs--underline .tabs__item:hover:not(.active),.tabs--underline .tabs__item:focus:not(.active){border-bottom:3px solid color-mix(in srgb,var(--btn-border-color),var(--dark) 10%)}.tabs--underline .tabs__item:hover,.tabs--underline .tabs__item:focus{box-shadow:none}.tabs--vertical{--tab-bg-color: transparent;width:100%}.tabs--vertical .tab-content{flex:1}.tabs--vertical .tabs__nav{padding:1.5rem}}
|
package/dist/index.d.ts
CHANGED
|
@@ -16,3 +16,5 @@ export * from './components/Modal/react';
|
|
|
16
16
|
export * from './components/Placeholder/react';
|
|
17
17
|
export * from './components/Tooltip/react';
|
|
18
18
|
export * from './components/Table/react';
|
|
19
|
+
export * from './components/Accordion/react';
|
|
20
|
+
export * from './components/Tab/react';
|
package/dist/index.js
CHANGED
|
@@ -1,39 +1,47 @@
|
|
|
1
1
|
import './core/styles/main.css';/* empty css */
|
|
2
|
-
import { Color as
|
|
2
|
+
import { Color as e } from "./components/Color/react/index.js";
|
|
3
3
|
import { Button as m } from "./components/Button/react/index.js";
|
|
4
4
|
import { Icon as f } from "./components/Icon/react/index.js";
|
|
5
5
|
import { Group as d } from "./components/Group/react/index.js";
|
|
6
|
-
import { Avatar as
|
|
7
|
-
import { Badge as
|
|
8
|
-
import { Divider as
|
|
9
|
-
import { ContextMenu as
|
|
10
|
-
import { LangSelector as
|
|
11
|
-
import { Form as
|
|
12
|
-
import { Shadow as
|
|
13
|
-
import { Radius as
|
|
14
|
-
import { Dropdown as
|
|
6
|
+
import { Avatar as c } from "./components/Avatar/react/index.js";
|
|
7
|
+
import { Badge as l } from "./components/Badge/react/index.js";
|
|
8
|
+
import { Divider as s } from "./components/Divider/react/index.js";
|
|
9
|
+
import { ContextMenu as g } from "./components/Context-menu/react/index.js";
|
|
10
|
+
import { LangSelector as C } from "./components/Lang-selector/react/index.js";
|
|
11
|
+
import { Form as b } from "./components/Form/react/index.js";
|
|
12
|
+
import { Shadow as v } from "./components/Shadow/react/index.js";
|
|
13
|
+
import { Radius as D } from "./components/Radius/react/index.js";
|
|
14
|
+
import { Dropdown as M } from "./components/Dropdown/react/index.js";
|
|
15
15
|
import { Logo as F } from "./components/Logo/react/index.js";
|
|
16
16
|
import { Modal as I } from "./components/Modal/react/index.js";
|
|
17
17
|
import { Placeholder as R } from "./components/Placeholder/react/index.js";
|
|
18
18
|
import { Tooltip as k } from "./components/Tooltip/react/index.js";
|
|
19
19
|
import { Table as y } from "./components/Table/react/index.js";
|
|
20
|
+
import { Accordion as E } from "./components/Accordion/react/index.js";
|
|
21
|
+
import { Tabs as J } from "./components/Tab/react/index.js";
|
|
22
|
+
import { default as N } from "./node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/AccordionContext.js";
|
|
23
|
+
import { useAccordionButton as Q } from "react-bootstrap";
|
|
20
24
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
E as Accordion,
|
|
26
|
+
N as AccordionContext,
|
|
27
|
+
c as Avatar,
|
|
28
|
+
l as Badge,
|
|
23
29
|
m as Button,
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
e as Color,
|
|
31
|
+
g as ContextMenu,
|
|
32
|
+
s as Divider,
|
|
33
|
+
M as Dropdown,
|
|
34
|
+
b as Form,
|
|
29
35
|
d as Group,
|
|
30
36
|
f as Icon,
|
|
31
|
-
|
|
37
|
+
C as LangSelector,
|
|
32
38
|
F as Logo,
|
|
33
39
|
I as Modal,
|
|
34
40
|
R as Placeholder,
|
|
35
|
-
|
|
36
|
-
|
|
41
|
+
D as Radius,
|
|
42
|
+
v as Shadow,
|
|
37
43
|
y as Table,
|
|
38
|
-
|
|
44
|
+
J as Tabs,
|
|
45
|
+
k as Tooltip,
|
|
46
|
+
Q as useAccordionButton
|
|
39
47
|
};
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Accordion, Button, Group, Icon, Badge } from "../../index";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Template de démonstration pour le composant Accordion.
|
|
6
|
+
*
|
|
7
|
+
* @returns {JSX.Element} Le template de démo.
|
|
8
|
+
*/
|
|
9
|
+
export const Accordions = () => {
|
|
10
|
+
const items = [
|
|
11
|
+
{
|
|
12
|
+
eventKey: '0',
|
|
13
|
+
header: (
|
|
14
|
+
<Group align="center">
|
|
15
|
+
<Icon name="icon-info" />
|
|
16
|
+
<span>Élément d'accordéon #1</span>
|
|
17
|
+
<Badge variant="primary" size="sm">Nouveau</Badge>
|
|
18
|
+
</Group>
|
|
19
|
+
),
|
|
20
|
+
body: (
|
|
21
|
+
<div>
|
|
22
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
23
|
+
<Button size="sm">Action</Button>
|
|
24
|
+
</div>
|
|
25
|
+
)
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
eventKey: '1',
|
|
29
|
+
header: (
|
|
30
|
+
<Group>
|
|
31
|
+
<Icon name="icon-info" />
|
|
32
|
+
<span>Élément d'accordéon #2</span>
|
|
33
|
+
</Group>
|
|
34
|
+
),
|
|
35
|
+
body: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
|
|
36
|
+
},
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<div className="accordion-demo">
|
|
41
|
+
<section className="mb-5">
|
|
42
|
+
<h3>Accordéons</h3>
|
|
43
|
+
<p className="text-muted mb-4">
|
|
44
|
+
Créez des <code>accordion</code> s'affichant verticalement en empilant les éléments.
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
<h5 className="mt-4">Exemple basique</h5>
|
|
48
|
+
<p></p>
|
|
49
|
+
<Accordion defaultActiveKey="0" items={items} border={true} />
|
|
50
|
+
|
|
51
|
+
<h5 className="mt-4">État entièrement replié </h5>
|
|
52
|
+
<p></p>
|
|
53
|
+
<Accordion items={items} />
|
|
54
|
+
|
|
55
|
+
<h5 className="mt-4">Affichage Flush</h5>
|
|
56
|
+
<p></p>
|
|
57
|
+
<Accordion flush items={items} />
|
|
58
|
+
|
|
59
|
+
<h5 className="mt-4">Toujours ouvert</h5>
|
|
60
|
+
<p></p>
|
|
61
|
+
<Accordion alwaysOpen items={items} />
|
|
62
|
+
|
|
63
|
+
<h5 className="mt-4">Toggle personnalisé</h5>
|
|
64
|
+
<p></p>
|
|
65
|
+
<Accordion defaultActiveKey="0">
|
|
66
|
+
<Accordion.Item eventKey="0">
|
|
67
|
+
<Group>
|
|
68
|
+
<Accordion.Toggle eventKey="0" variant="outline-primary">
|
|
69
|
+
Cliquez ici pour basculer
|
|
70
|
+
</Accordion.Toggle>
|
|
71
|
+
<Accordion.Toggle eventKey="0" as="span" className="cursor-pointer text-primary underline">
|
|
72
|
+
Ou cliquez sur ce texte
|
|
73
|
+
</Accordion.Toggle>
|
|
74
|
+
</Group>
|
|
75
|
+
<Accordion.Body>
|
|
76
|
+
<h5>Contenu flexible</h5>
|
|
77
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita tempora necessitatibus iusto? Ipsam tenetur inventore consequuntur autem quia soluta enim dolorem velit eveniet vitae at, quidem voluptatum possimus illum, digne-ssimos, aut magni provident quaerat qui aliquid odio quos culpa. Ea, repellendus, itaque sapiente incidunt cupiditate eveniet labore distinctio quo vitae blanditiis alias odio obcaecati quasi voluptates doloribus facilis ipsum facere aperiam laudantium tenetur neque molestiae mollitia nesciunt! Odit, voluptas ad. Deleniti nisi mollitia quisquam dolor distinctio ullam eum atque pariatur!</p>
|
|
78
|
+
</Accordion.Body>
|
|
79
|
+
</Accordion.Item>
|
|
80
|
+
</Accordion>
|
|
81
|
+
|
|
82
|
+
<h5 className="mt-4">ContextToggle</h5>
|
|
83
|
+
<p></p>
|
|
84
|
+
<Accordion defaultActiveKey="0">
|
|
85
|
+
<Accordion.Item eventKey="0">
|
|
86
|
+
<Accordion.ContextToggle as="span" eventKey="0" variant="outline-primary">
|
|
87
|
+
Cliquez ici pour basculer ici
|
|
88
|
+
</Accordion.ContextToggle>
|
|
89
|
+
<Accordion.Body>
|
|
90
|
+
<h5>Contenu flexible</h5>
|
|
91
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita tempora necessitatibus iusto? Ipsam tenetur inventore consequuntur autem quia soluta enim dolorem velit eveniet vitae at, quidem voluptatum possimus illum, digne-ssimos, aut magni provident quaerat qui aliquid odio quos culpa. Ea, repellendus, itaque sapiente incidunt cupiditate eveniet labore distinctio quo vitae blanditiis alias odio obcaecati quasi voluptates doloribus facilis ipsum facere aperiam laudantium tenetur neque molestiae mollitia nesciunt! Odit, voluptas ad. Deleniti nisi mollitia quisquam dolor distinctio ullam eum atque pariatur!</p>
|
|
92
|
+
</Accordion.Body>
|
|
93
|
+
</Accordion.Item>
|
|
94
|
+
</Accordion>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
</section>
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
import { Tabs, Group, Icon, Badge, Button } from "../../index";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Template de démonstration pour le composant Tabs.
|
|
6
|
+
*
|
|
7
|
+
* @returns {JSX.Element} Le template de démo.
|
|
8
|
+
*/
|
|
9
|
+
export const TabsTemplate = () => {
|
|
10
|
+
const [activeKey, setActiveKey] = useState("v-1");
|
|
11
|
+
|
|
12
|
+
const handleSelect = (key: string | null) => {
|
|
13
|
+
if (key) {
|
|
14
|
+
setActiveKey(key);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const items = [
|
|
19
|
+
{
|
|
20
|
+
eventKey: 'home',
|
|
21
|
+
header: (
|
|
22
|
+
<Group align="center" gap="xs">
|
|
23
|
+
<Icon name="icon-house" />
|
|
24
|
+
<span>Accueil</span>
|
|
25
|
+
</Group>
|
|
26
|
+
),
|
|
27
|
+
body: (
|
|
28
|
+
<>
|
|
29
|
+
<h4>Bienvenue à l'accueil</h4>
|
|
30
|
+
<p>Ceci est le contenu de l'onglet Accueil. On peut y mettre n'importe quel JSX.</p>
|
|
31
|
+
</>
|
|
32
|
+
)
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
eventKey: 'profile',
|
|
36
|
+
header: (
|
|
37
|
+
<Group align="center" gap="xs">
|
|
38
|
+
<span>Profil</span>
|
|
39
|
+
<Badge variant="success" size="sm">9+</Badge>
|
|
40
|
+
</Group>
|
|
41
|
+
),
|
|
42
|
+
body: 'Contenu du profil utilisateur.'
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
eventKey: 'contact',
|
|
46
|
+
header: 'Contact',
|
|
47
|
+
body: 'Informations de contact.',
|
|
48
|
+
disabled: true
|
|
49
|
+
},
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
const itemsVertical = [
|
|
53
|
+
{
|
|
54
|
+
eventKey: 'v-1',
|
|
55
|
+
header: 'Design',
|
|
56
|
+
body: (
|
|
57
|
+
<>
|
|
58
|
+
<h5>Design System</h5>
|
|
59
|
+
<p>Focus sur l'expérience utilisateur et les tokens de design.</p>
|
|
60
|
+
</>
|
|
61
|
+
)
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
eventKey: 'v-2',
|
|
65
|
+
header: 'Développement',
|
|
66
|
+
body: (
|
|
67
|
+
<>
|
|
68
|
+
<h5>Clean Code</h5>
|
|
69
|
+
<p>Implémentation robuste avec React et TypeScript.</p>
|
|
70
|
+
</>
|
|
71
|
+
)
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
eventKey: 'v-3',
|
|
75
|
+
header: 'Marketing',
|
|
76
|
+
body: (
|
|
77
|
+
<>
|
|
78
|
+
<h5>Marketing</h5>
|
|
79
|
+
<p>Mise en place de stratégies marketing pour promouvoir le produit.</p>
|
|
80
|
+
</>
|
|
81
|
+
)
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
eventKey: 'v-4',
|
|
85
|
+
header: 'SEO & Analytics',
|
|
86
|
+
body: (
|
|
87
|
+
<>
|
|
88
|
+
<h5>SEO & Analytics</h5>
|
|
89
|
+
<p>Optimisation pour les moteurs de recherche.</p>
|
|
90
|
+
</>
|
|
91
|
+
)
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
eventKey: 'v-5',
|
|
95
|
+
header: 'DevOps',
|
|
96
|
+
body: (
|
|
97
|
+
<>
|
|
98
|
+
<h5>DevOps</h5>
|
|
99
|
+
<p>Déploiement continu et automatisation des processus.</p>
|
|
100
|
+
</>
|
|
101
|
+
)
|
|
102
|
+
},
|
|
103
|
+
];
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<div className="tabs-demo">
|
|
107
|
+
<section className="mb-5">
|
|
108
|
+
<h3>Composant Tabs</h3>
|
|
109
|
+
<p className="text-muted mb-4">
|
|
110
|
+
Le composant <code>Tabs</code> permet d'organiser le contenu en plusieurs onglets navigables.
|
|
111
|
+
</p>
|
|
112
|
+
|
|
113
|
+
<h5 className="mt-4">Exemple basique</h5>
|
|
114
|
+
<p className="text-muted small">Utilisation de la propriété <code>items</code> pour définir les onglets.</p>
|
|
115
|
+
<Tabs defaultActiveKey="home" items={items} id="tabs-example-basic" />
|
|
116
|
+
|
|
117
|
+
<h5 className="mt-4">Variante Pills</h5>
|
|
118
|
+
<p className="text-muted small">Onglets avec un style de pilules arrondies.</p>
|
|
119
|
+
<Tabs defaultActiveKey="home" color="danger" variant="pills" items={items} id="tabs-example-pills-danger" />
|
|
120
|
+
|
|
121
|
+
<h5 className="mt-4">Variante border</h5>
|
|
122
|
+
<p className="text-muted small">Onglets avec une bordure.</p>
|
|
123
|
+
<Tabs defaultActiveKey="home" color="success" border items={items} id="tabs-example-pills-success" />
|
|
124
|
+
|
|
125
|
+
<h5 className="mt-4">Variante Underline</h5>
|
|
126
|
+
<p className="text-muted small">Onglets avec une ligne de soulignement pour l'onglet actif.</p>
|
|
127
|
+
<Tabs defaultActiveKey="home" color="warning" variant="underline" items={items} id="tabs-example-underline" />
|
|
128
|
+
|
|
129
|
+
<h5 className="mt-4">Remplissage proportionnel (Fill)</h5>
|
|
130
|
+
<p className="text-muted small">Les onglets occupent toute la largeur disponible proportionnellement à leur contenu.</p>
|
|
131
|
+
<Tabs variant="underline" defaultActiveKey="home" fill items={
|
|
132
|
+
[
|
|
133
|
+
{
|
|
134
|
+
eventKey: 'home',
|
|
135
|
+
header: (
|
|
136
|
+
<Group align="center" gap="xs">
|
|
137
|
+
<span>Très Loooooooong tab </span>
|
|
138
|
+
<Badge variant="success" size="sm">9+</Badge>
|
|
139
|
+
</Group>
|
|
140
|
+
),
|
|
141
|
+
body: 'Contenu de l\'onglet Accueil'
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
eventKey: 'profile',
|
|
145
|
+
header: 'Profil',
|
|
146
|
+
body: 'Contenu de l\'onglet Profil'
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
eventKey: 'contact',
|
|
150
|
+
header: 'Contact',
|
|
151
|
+
body: 'Contenu de l\'onglet Contact'
|
|
152
|
+
}
|
|
153
|
+
]
|
|
154
|
+
} id="tabs-example-fill" />
|
|
155
|
+
|
|
156
|
+
<h5 className="mt-4">Alignement égal (Justify)</h5>
|
|
157
|
+
<p className="text-muted small">Les onglets sont alignés de manière égale sur toute la largeur.</p>
|
|
158
|
+
<Tabs variant="underline" defaultActiveKey="home" justify items={
|
|
159
|
+
[
|
|
160
|
+
{
|
|
161
|
+
eventKey: 'home',
|
|
162
|
+
header: (
|
|
163
|
+
<Group align="center" gap="xs">
|
|
164
|
+
<span>Très Loooooooong tab </span>
|
|
165
|
+
<Badge variant="danger" size="sm">9+</Badge>
|
|
166
|
+
</Group>
|
|
167
|
+
),
|
|
168
|
+
body: 'Contenu de l\'onglet Accueil'
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
eventKey: 'profile',
|
|
172
|
+
header: 'Profil',
|
|
173
|
+
body: 'Contenu de l\'onglet Profil'
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
eventKey: 'contact',
|
|
177
|
+
header: 'Contact',
|
|
178
|
+
body: 'Contenu de l\'onglet Contact'
|
|
179
|
+
}
|
|
180
|
+
]
|
|
181
|
+
} id="tabs-example-justify" />
|
|
182
|
+
|
|
183
|
+
<h5 className="mt-4">Mode composé</h5>
|
|
184
|
+
<p className="text-muted small">Utilisation de <code>Tabs.Item</code> pour une flexibilité totale.</p>
|
|
185
|
+
<Tabs defaultActiveKey="custom-1" id="tabs-example-custom">
|
|
186
|
+
<Tabs.Item eventKey="custom-1" title="Onglet 1">
|
|
187
|
+
<div className="p-3">Contenu 1</div>
|
|
188
|
+
</Tabs.Item>
|
|
189
|
+
<Tabs.Item eventKey="custom-2"
|
|
190
|
+
title={
|
|
191
|
+
<Group align="center" gap="xs">
|
|
192
|
+
<span>Profil</span>
|
|
193
|
+
<Badge variant="secondary" size="sm">9+</Badge>
|
|
194
|
+
</Group>
|
|
195
|
+
}
|
|
196
|
+
>
|
|
197
|
+
<div className="p-3">Contenu 2</div>
|
|
198
|
+
</Tabs.Item>
|
|
199
|
+
</Tabs>
|
|
200
|
+
|
|
201
|
+
<h5 className="mt-4">Disposition verticale</h5>
|
|
202
|
+
<p className="text-muted small">Onglets affichés verticalement avec la propriété <code>vertical</code>.</p>
|
|
203
|
+
<Tabs
|
|
204
|
+
defaultActiveKey="home"
|
|
205
|
+
vertical
|
|
206
|
+
items={items}
|
|
207
|
+
id="tabs-example-vertical"
|
|
208
|
+
/>
|
|
209
|
+
|
|
210
|
+
<h5 className="mt-4">Disposition verticale personnalisée</h5>
|
|
211
|
+
<p className="text-muted small">Utilisation de <code>Tabs.Container</code>, <code>Button</code> et <code>Tabs.Content</code> pour un contrôle total.</p>
|
|
212
|
+
<Tabs.Container activeKey={activeKey} onSelect={handleSelect} id="tabs-custom-vertical">
|
|
213
|
+
<Group className="tabs tabs--vertical tabs--primary">
|
|
214
|
+
<Group vertical className="tabs__nav tabs__nav--vertical">
|
|
215
|
+
<Button
|
|
216
|
+
variant="transparent"
|
|
217
|
+
eventKey="v-1"
|
|
218
|
+
onClick={() => handleSelect("v-1")}
|
|
219
|
+
active={activeKey === "v-1"}
|
|
220
|
+
>
|
|
221
|
+
Design
|
|
222
|
+
</Button>
|
|
223
|
+
<Button
|
|
224
|
+
variant="transparent"
|
|
225
|
+
eventKey="v-2"
|
|
226
|
+
onClick={() => handleSelect("v-2")}
|
|
227
|
+
active={activeKey === "v-2"}
|
|
228
|
+
>
|
|
229
|
+
Développement
|
|
230
|
+
</Button>
|
|
231
|
+
<Button
|
|
232
|
+
variant="transparent"
|
|
233
|
+
eventKey="v-3"
|
|
234
|
+
onClick={() => handleSelect("v-3")}
|
|
235
|
+
active={activeKey === "v-3"}
|
|
236
|
+
>
|
|
237
|
+
Marketing
|
|
238
|
+
</Button>
|
|
239
|
+
<Button
|
|
240
|
+
variant="transparent"
|
|
241
|
+
eventKey="v-4"
|
|
242
|
+
onClick={() => handleSelect("v-4")}
|
|
243
|
+
active={activeKey === "v-4"}
|
|
244
|
+
>
|
|
245
|
+
SEO & Analytics
|
|
246
|
+
</Button>
|
|
247
|
+
<Button
|
|
248
|
+
variant="transparent"
|
|
249
|
+
eventKey="v-5"
|
|
250
|
+
onClick={() => handleSelect("v-5")}
|
|
251
|
+
active={activeKey === "v-5"}
|
|
252
|
+
>
|
|
253
|
+
DevOps
|
|
254
|
+
</Button>
|
|
255
|
+
|
|
256
|
+
</Group>
|
|
257
|
+
<Tabs.Content className="tabs__content">
|
|
258
|
+
<Tabs.Pane eventKey="v-1">
|
|
259
|
+
<h5>Design System</h5>
|
|
260
|
+
<p>Focus sur l'expérience utilisateur et les tokens de design.</p>
|
|
261
|
+
</Tabs.Pane>
|
|
262
|
+
<Tabs.Pane eventKey="v-2">
|
|
263
|
+
<h5>Clean Code</h5>
|
|
264
|
+
<p>Implémentation robuste avec React et TypeScript.</p>
|
|
265
|
+
</Tabs.Pane>
|
|
266
|
+
<Tabs.Pane eventKey="v-3">
|
|
267
|
+
<h5>Marketing</h5>
|
|
268
|
+
<p>Mise en place de stratégies marketing pour promouvoir le produit.</p>
|
|
269
|
+
</Tabs.Pane>
|
|
270
|
+
<Tabs.Pane eventKey="v-4">
|
|
271
|
+
<h5>SEO & Analytics</h5>
|
|
272
|
+
<p>Optimisation pour les moteurs de recherche.</p>
|
|
273
|
+
</Tabs.Pane>
|
|
274
|
+
<Tabs.Pane eventKey="v-5">
|
|
275
|
+
<h5>DevOps</h5>
|
|
276
|
+
<p>Déploiement continu et automatisation des processus.</p>
|
|
277
|
+
</Tabs.Pane>
|
|
278
|
+
</Tabs.Content>
|
|
279
|
+
</Group>
|
|
280
|
+
</Tabs.Container>
|
|
281
|
+
</section>
|
|
282
|
+
</div>
|
|
283
|
+
);
|
|
284
|
+
};
|
|
285
|
+
|
|
286
|
+
|
package/dist/templates/index.ts
CHANGED