@portnet/ui 2.0.6 → 2.0.8
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/buttons/PuiNewUserButton.js +121 -0
- package/dist/components/inputs/PuiSelect.js +100 -35
- package/dist/components/others/PuiChip.js +254 -114
- package/dist/components/table/PuiTable.js +50 -8
- package/dist/components/ui/layout/Header.js +253 -0
- package/dist/components/ui/layout/Layout.js +104 -0
- package/dist/components/ui/layout/Sidebar.js +193 -0
- package/dist/components/ui/layout/index.js +29 -0
- package/dist/index.js +37 -1
- package/package.json +1 -1
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/esnext.iterator.constructor.js");
|
|
4
|
+
require("core-js/modules/esnext.iterator.filter.js");
|
|
5
|
+
require("core-js/modules/esnext.iterator.for-each.js");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = void 0;
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _styles = require("@mui/material/styles");
|
|
13
|
+
var _material = require("@mui/material");
|
|
14
|
+
var _iconsMaterial = require("@mui/icons-material");
|
|
15
|
+
var _apperance = require("../../config/apperance");
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
const _excluded = ["onClick", "label", "size", "iconOnly"]; // Bouton stylisé pour "Nouvel utilisateur"
|
|
18
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
22
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
23
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
24
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
25
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
26
|
+
const StyledButton = (0, _styles.styled)(_material.Button)(_ref => {
|
|
27
|
+
let {
|
|
28
|
+
theme,
|
|
29
|
+
size
|
|
30
|
+
} = _ref;
|
|
31
|
+
return {
|
|
32
|
+
backgroundColor: _apperance.palette.primary,
|
|
33
|
+
color: _apperance.palette.white,
|
|
34
|
+
fontWeight: 500,
|
|
35
|
+
padding: size === 'small' ? '4px 12px' : '8px 16px',
|
|
36
|
+
borderRadius: '4px',
|
|
37
|
+
textTransform: 'none',
|
|
38
|
+
// Pas de majuscules forcées
|
|
39
|
+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
40
|
+
'&:hover': {
|
|
41
|
+
backgroundColor: "".concat(_apperance.palette.primary, "e0"),
|
|
42
|
+
// Légèrement plus clair au survol
|
|
43
|
+
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)'
|
|
44
|
+
},
|
|
45
|
+
'& .MuiButton-startIcon': {
|
|
46
|
+
marginRight: size === 'small' ? '4px' : '8px'
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
// Bouton compact (icône uniquement)
|
|
52
|
+
const CompactButton = (0, _styles.styled)(_material.Button)(_ref2 => {
|
|
53
|
+
let {
|
|
54
|
+
theme
|
|
55
|
+
} = _ref2;
|
|
56
|
+
return {
|
|
57
|
+
backgroundColor: _apperance.palette.primary,
|
|
58
|
+
color: _apperance.palette.white,
|
|
59
|
+
minWidth: '36px',
|
|
60
|
+
width: '36px',
|
|
61
|
+
height: '36px',
|
|
62
|
+
padding: '8px',
|
|
63
|
+
borderRadius: '4px',
|
|
64
|
+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
65
|
+
'&:hover': {
|
|
66
|
+
backgroundColor: "".concat(_apperance.palette.primary, "e0"),
|
|
67
|
+
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)'
|
|
68
|
+
},
|
|
69
|
+
'& .MuiSvgIcon-root': {
|
|
70
|
+
fontSize: '1.2rem'
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Composant PuiNewUserButton - Bouton stylisé pour ajouter un nouvel utilisateur
|
|
77
|
+
* @param {Object} props - Propriétés du composant
|
|
78
|
+
* @param {function} props.onClick - Fonction appelée lors du clic sur le bouton
|
|
79
|
+
* @param {string} props.label - Texte du bouton
|
|
80
|
+
* @param {string} props.size - Taille du bouton ('small', 'medium', 'large')
|
|
81
|
+
* @param {boolean} props.iconOnly - Si true, affiche uniquement l'icône
|
|
82
|
+
*/
|
|
83
|
+
const PuiNewUserButton = _ref3 => {
|
|
84
|
+
let {
|
|
85
|
+
onClick,
|
|
86
|
+
label = "Nouvel utilisateur",
|
|
87
|
+
size = 'medium',
|
|
88
|
+
iconOnly = false
|
|
89
|
+
} = _ref3,
|
|
90
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
91
|
+
// Si iconOnly est true, on affiche un bouton compact avec une infobulle
|
|
92
|
+
if (iconOnly) {
|
|
93
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
|
|
94
|
+
title: label,
|
|
95
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompactButton, _objectSpread(_objectSpread({
|
|
96
|
+
variant: "contained",
|
|
97
|
+
onClick: onClick,
|
|
98
|
+
"aria-label": label
|
|
99
|
+
}, props), {}, {
|
|
100
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {})
|
|
101
|
+
}))
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Sinon, on affiche le bouton standard avec texte et icône
|
|
106
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, _objectSpread(_objectSpread({
|
|
107
|
+
variant: "contained",
|
|
108
|
+
startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {}),
|
|
109
|
+
onClick: onClick,
|
|
110
|
+
size: size
|
|
111
|
+
}, props), {}, {
|
|
112
|
+
children: label
|
|
113
|
+
}));
|
|
114
|
+
};
|
|
115
|
+
PuiNewUserButton.propTypes = {
|
|
116
|
+
onClick: _propTypes.default.func,
|
|
117
|
+
label: _propTypes.default.string,
|
|
118
|
+
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
119
|
+
iconOnly: _propTypes.default.bool
|
|
120
|
+
};
|
|
121
|
+
var _default = exports.default = PuiNewUserButton;
|
|
@@ -39,27 +39,22 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
|
|
|
39
39
|
}))))(() => {
|
|
40
40
|
return {
|
|
41
41
|
"&.MuiFormControl-root": {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
height: "1.4375em",
|
|
45
|
-
display: "flex",
|
|
46
|
-
alignItems: "center",
|
|
47
|
-
lineHeight: "1"
|
|
48
|
-
},
|
|
42
|
+
marginBottom: "16px",
|
|
43
|
+
transition: "all 0.2s ease",
|
|
49
44
|
"&.required .MuiInputBase-root": {
|
|
50
|
-
backgroundColor: _apperance.palette.background.required
|
|
45
|
+
backgroundColor: "".concat(_apperance.palette.background.required)
|
|
51
46
|
},
|
|
52
47
|
"& .MuiFormLabel-root": {
|
|
53
48
|
zIndex: 0,
|
|
54
49
|
lineSpacing: "-0.03em",
|
|
55
50
|
position: "initial",
|
|
56
51
|
transform: "none",
|
|
57
|
-
fontSize: "0.
|
|
52
|
+
fontSize: "0.85rem",
|
|
58
53
|
fontWeight: "600",
|
|
59
|
-
marginBottom: "
|
|
54
|
+
marginBottom: "6px",
|
|
60
55
|
color: _apperance.palette.gray.darker,
|
|
61
|
-
"
|
|
62
|
-
|
|
56
|
+
transition: "color 0.2s ease",
|
|
57
|
+
"&.Mui-focused": {
|
|
63
58
|
color: _apperance.palette.primary
|
|
64
59
|
},
|
|
65
60
|
"&.Mui-disabled": {
|
|
@@ -71,30 +66,59 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
|
|
|
71
66
|
},
|
|
72
67
|
"& .MuiInputBase-root": {
|
|
73
68
|
backgroundColor: _apperance.palette.white,
|
|
74
|
-
border: "
|
|
75
|
-
borderRadius: "
|
|
76
|
-
"
|
|
77
|
-
|
|
69
|
+
border: "1px solid ".concat(_apperance.palette.gray.dark),
|
|
70
|
+
borderRadius: "8px",
|
|
71
|
+
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
|
|
72
|
+
transition: "all 0.3s ease",
|
|
73
|
+
"&:hover:not(.Mui-disabled):not(.Mui-error)": {
|
|
74
|
+
borderColor: "".concat(_apperance.palette.primary, "80"),
|
|
75
|
+
boxShadow: "0 3px 6px rgba(0, 0, 0, 0.08)"
|
|
76
|
+
},
|
|
77
|
+
"&.Mui-focused": {
|
|
78
|
+
border: "2px solid ".concat(_apperance.palette.primary),
|
|
79
|
+
boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20")
|
|
78
80
|
},
|
|
79
|
-
"&.Mui-error
|
|
81
|
+
"&.Mui-error": {
|
|
80
82
|
border: "2px solid ".concat(_apperance.palette.error),
|
|
81
|
-
backgroundColor: _apperance.palette.background.error
|
|
83
|
+
backgroundColor: _apperance.palette.background.error,
|
|
84
|
+
boxShadow: "0 0 0 3px ".concat(_apperance.palette.error, "20")
|
|
82
85
|
},
|
|
83
|
-
"&.Mui-disabled
|
|
86
|
+
"&.Mui-disabled": {
|
|
87
|
+
opacity: 0.7,
|
|
88
|
+
border: "1px solid ".concat(_apperance.palette.gray.main),
|
|
84
89
|
backgroundColor: "".concat(_apperance.palette.secondary)
|
|
85
90
|
},
|
|
86
|
-
"& .
|
|
87
|
-
|
|
88
|
-
|
|
91
|
+
"& .MuiSelect-select": {
|
|
92
|
+
lineHeight: "1.5",
|
|
93
|
+
padding: "12px 14px",
|
|
94
|
+
fontSize: "0.9rem",
|
|
95
|
+
fontWeight: 400,
|
|
96
|
+
color: "rgba(0, 0, 0, 0.85)",
|
|
97
|
+
minHeight: "auto",
|
|
98
|
+
display: "flex",
|
|
99
|
+
alignItems: "center"
|
|
89
100
|
},
|
|
90
101
|
"& .MuiSvgIcon-root": {
|
|
91
|
-
|
|
102
|
+
fontSize: "1.2rem",
|
|
103
|
+
color: _apperance.palette.gray.dark,
|
|
104
|
+
marginRight: "8px",
|
|
105
|
+
transition: "transform 0.2s ease"
|
|
106
|
+
},
|
|
107
|
+
"&.Mui-focused .MuiSvgIcon-root": {
|
|
108
|
+
transform: "rotate(180deg)",
|
|
109
|
+
color: _apperance.palette.primary
|
|
92
110
|
}
|
|
93
111
|
},
|
|
94
112
|
"& .MuiFormHelperText-root": {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
113
|
+
marginTop: "6px",
|
|
114
|
+
marginLeft: "4px",
|
|
115
|
+
fontWeight: "500",
|
|
116
|
+
fontSize: "0.75rem",
|
|
117
|
+
color: _apperance.palette.gray.darker,
|
|
118
|
+
transition: "color 0.2s ease",
|
|
119
|
+
"&.Mui-error": {
|
|
120
|
+
color: _apperance.palette.error
|
|
121
|
+
}
|
|
98
122
|
},
|
|
99
123
|
"& fieldset": {
|
|
100
124
|
display: "none"
|
|
@@ -104,11 +128,23 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
|
|
|
104
128
|
});
|
|
105
129
|
const LoadingProgress = () => {
|
|
106
130
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
|
|
107
|
-
size:
|
|
131
|
+
size: 20,
|
|
132
|
+
thickness: 4,
|
|
108
133
|
sx: {
|
|
109
134
|
color: _apperance.palette.primary,
|
|
110
135
|
position: "absolute",
|
|
111
|
-
right: "14px"
|
|
136
|
+
right: "14px",
|
|
137
|
+
top: "calc(50% - 10px)",
|
|
138
|
+
opacity: 0.7,
|
|
139
|
+
animation: "spin 1.5s linear infinite",
|
|
140
|
+
"@keyframes spin": {
|
|
141
|
+
"0%": {
|
|
142
|
+
transform: "rotate(0deg)"
|
|
143
|
+
},
|
|
144
|
+
"100%": {
|
|
145
|
+
transform: "rotate(360deg)"
|
|
146
|
+
}
|
|
147
|
+
}
|
|
112
148
|
}
|
|
113
149
|
});
|
|
114
150
|
};
|
|
@@ -169,17 +205,46 @@ const PuiStandardSelect = _ref => {
|
|
|
169
205
|
},
|
|
170
206
|
MenuProps: {
|
|
171
207
|
sx: {
|
|
208
|
+
"& .MuiPaper-root": {
|
|
209
|
+
marginTop: "4px",
|
|
210
|
+
borderRadius: "8px",
|
|
211
|
+
boxShadow: "0 6px 16px rgba(0, 0, 0, 0.1)",
|
|
212
|
+
border: "1px solid ".concat(_apperance.palette.gray.light),
|
|
213
|
+
overflow: "hidden"
|
|
214
|
+
},
|
|
172
215
|
"& .MuiMenu-list": {
|
|
173
|
-
padding: 0,
|
|
174
|
-
"& .MuiMenuItem-root:not(:last-child)": {
|
|
175
|
-
borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
|
|
176
|
-
},
|
|
216
|
+
padding: "4px 0",
|
|
177
217
|
"& .MuiMenuItem-root": {
|
|
178
|
-
fontSize:
|
|
179
|
-
|
|
180
|
-
|
|
218
|
+
fontSize: "0.9rem",
|
|
219
|
+
padding: "8px 16px",
|
|
220
|
+
borderRadius: "0",
|
|
221
|
+
transition: "all 0.2s ease",
|
|
222
|
+
height: "auto",
|
|
223
|
+
minHeight: "40px",
|
|
224
|
+
"&:hover": {
|
|
225
|
+
backgroundColor: "rgba(24, 144, 255, 0.05)"
|
|
226
|
+
},
|
|
227
|
+
"&.Mui-selected": {
|
|
228
|
+
backgroundColor: "rgba(24, 144, 255, 0.1)",
|
|
229
|
+
color: _apperance.palette.primary,
|
|
230
|
+
fontWeight: 500,
|
|
231
|
+
"&:hover": {
|
|
232
|
+
backgroundColor: "rgba(24, 144, 255, 0.15)"
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
"&:not(:last-child)": {
|
|
236
|
+
borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
|
|
237
|
+
}
|
|
181
238
|
}
|
|
182
239
|
}
|
|
240
|
+
},
|
|
241
|
+
anchorOrigin: {
|
|
242
|
+
vertical: "bottom",
|
|
243
|
+
horizontal: "left"
|
|
244
|
+
},
|
|
245
|
+
transformOrigin: {
|
|
246
|
+
vertical: "top",
|
|
247
|
+
horizontal: "left"
|
|
183
248
|
}
|
|
184
249
|
}
|
|
185
250
|
}, rest), {}, {
|