@gustavo-valsechi/client 1.3.19 → 1.3.21
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/index.js +13 -3071
- package/dist/components/index.mjs +23 -46
- package/dist/contexts/index.js +9 -505
- package/dist/contexts/index.mjs +4 -21
- package/dist/index.js +8 -3326
- package/dist/index.mjs +4 -69
- package/dist/interfaces/index.js +8 -3
- package/dist/interfaces/index.mjs +2 -2
- package/package.json +1 -1
- package/dist/chunk-2X7JQNHX.mjs +0 -522
- package/dist/chunk-2X7JQNHX.mjs.map +0 -1
- package/dist/chunk-RWFXFZB5.mjs +0 -2
- package/dist/chunk-RWFXFZB5.mjs.map +0 -1
- package/dist/chunk-XH4PSRD2.mjs +0 -2807
- package/dist/chunk-XH4PSRD2.mjs.map +0 -1
- package/dist/components/index.js.map +0 -1
- package/dist/components/index.mjs.map +0 -1
- package/dist/contexts/index.js.map +0 -1
- package/dist/contexts/index.mjs.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/dist/interfaces/index.js.map +0 -1
- package/dist/interfaces/index.mjs.map +0 -1
|
@@ -1,50 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use client";
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} from "../chunk-XH4PSRD2.mjs";
|
|
26
|
-
import "../chunk-2X7JQNHX.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Fragment } from "react";
|
|
5
|
+
import { Container, RowContainer } from "./styles";
|
|
6
|
+
import _ from "lodash";
|
|
7
|
+
import * as Types from "./types";
|
|
8
|
+
export * from "./types";
|
|
9
|
+
function Component(props) {
|
|
10
|
+
const renderComponent = (config) => {
|
|
11
|
+
const ComponentElement = Types[config.type];
|
|
12
|
+
return /* @__PURE__ */ jsx(ComponentElement, { ...config.props });
|
|
13
|
+
};
|
|
14
|
+
const renderRow = (components) => {
|
|
15
|
+
return /* @__PURE__ */ jsx(RowContainer, { children: _.map(
|
|
16
|
+
components,
|
|
17
|
+
(data, index) => /* @__PURE__ */ jsx(Fragment, { children: renderComponent(data) }, index)
|
|
18
|
+
) });
|
|
19
|
+
};
|
|
20
|
+
return /* @__PURE__ */ jsx(Container, { className: props.className, children: _.map(
|
|
21
|
+
props.content,
|
|
22
|
+
(data, index) => /* @__PURE__ */ jsx(Fragment, { children: _.isArray(data) ? renderRow(data) : renderComponent(data) }, index)
|
|
23
|
+
) });
|
|
24
|
+
}
|
|
27
25
|
export {
|
|
28
|
-
|
|
29
|
-
Badge,
|
|
30
|
-
Block,
|
|
31
|
-
Button,
|
|
32
|
-
Chart,
|
|
33
|
-
Component,
|
|
34
|
-
CreditCard,
|
|
35
|
-
Form,
|
|
36
|
-
InputDateTime,
|
|
37
|
-
InputFile,
|
|
38
|
-
InputLabel,
|
|
39
|
-
InputSelect,
|
|
40
|
-
InputText,
|
|
41
|
-
InputTextarea,
|
|
42
|
-
LoadingApp,
|
|
43
|
-
LoadingBar,
|
|
44
|
-
Logo,
|
|
45
|
-
Lottie,
|
|
46
|
-
Modal,
|
|
47
|
-
Paginate,
|
|
48
|
-
Table
|
|
26
|
+
Component
|
|
49
27
|
};
|
|
50
|
-
//# sourceMappingURL=index.mjs.map
|
package/dist/contexts/index.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";
|
|
3
3
|
"use client";
|
|
4
|
-
var __create = Object.create;
|
|
5
4
|
var __defProp = Object.defineProperty;
|
|
6
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __export = (target, all) => {
|
|
11
|
-
for (var name in all)
|
|
12
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
-
};
|
|
14
8
|
var __copyProps = (to, from, except, desc) => {
|
|
15
9
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
10
|
for (let key of __getOwnPropNames(from))
|
|
@@ -19,508 +13,18 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
13
|
}
|
|
20
14
|
return to;
|
|
21
15
|
};
|
|
22
|
-
var
|
|
23
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
24
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
25
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
28
|
-
mod
|
|
29
|
-
));
|
|
16
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
30
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
31
|
-
|
|
32
|
-
// contexts/index.tsx
|
|
33
18
|
var contexts_exports = {};
|
|
34
|
-
__export(contexts_exports, {
|
|
35
|
-
IconProvider: () => IconProviderContainer,
|
|
36
|
-
ModalProvider: () => ModalProviderContainer,
|
|
37
|
-
ThemeProvider: () => ThemeProviderContainer,
|
|
38
|
-
TooltipProvider: () => TooltipProviderContainer,
|
|
39
|
-
useIcon: () => useIcon,
|
|
40
|
-
useModal: () => useModal,
|
|
41
|
-
useTheme: () => useTheme,
|
|
42
|
-
useTooltip: () => useTooltip
|
|
43
|
-
});
|
|
44
19
|
module.exports = __toCommonJS(contexts_exports);
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
// contexts/theme/index.tsx
|
|
50
|
-
var import_react = require("react");
|
|
51
|
-
var import_styled_components2 = require("styled-components");
|
|
52
|
-
|
|
53
|
-
// contexts/theme/styles.tsx
|
|
54
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
55
|
-
var Switcher = import_styled_components.default.div`
|
|
56
|
-
width: 3rem;
|
|
57
|
-
height: 1.5rem;
|
|
58
|
-
border-radius: 1rem;
|
|
59
|
-
border: 2px solid ${({ theme }) => theme.t05};
|
|
60
|
-
overflow: hidden;
|
|
61
|
-
display: flex;
|
|
62
|
-
align-items: center;
|
|
63
|
-
cursor: pointer;
|
|
64
|
-
position: relative;
|
|
65
|
-
|
|
66
|
-
i {
|
|
67
|
-
color: ${({ theme }) => theme.t6};
|
|
68
|
-
position: absolute;
|
|
69
|
-
transform: translateY(-50%);
|
|
70
|
-
font-size: .9rem;
|
|
71
|
-
z-index: 0;
|
|
72
|
-
transition: ease .8s;
|
|
73
|
-
|
|
74
|
-
&:first-child {
|
|
75
|
-
left: .2rem;
|
|
76
|
-
top: 50%;
|
|
77
|
-
opacity: ${(props) => props["data-theme"] === "light" ? 0 : 1};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&:last-child {
|
|
81
|
-
right: .2rem;
|
|
82
|
-
top: 50%;
|
|
83
|
-
opacity: ${(props) => props["data-theme"] === "light" ? 1 : 0};
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.switcher {
|
|
88
|
-
width: 1rem;
|
|
89
|
-
height: 1rem;
|
|
90
|
-
border-radius: 1rem;
|
|
91
|
-
position: relative;
|
|
92
|
-
transition: ease .3s;
|
|
93
|
-
transform: ${(props) => props["data-theme"] === "light" ? "transform: translateX(.2rem)" : "translateX(1.6rem)"};
|
|
94
|
-
z-index: 1;
|
|
95
|
-
|
|
96
|
-
div {
|
|
97
|
-
width: 100%;
|
|
98
|
-
height: 100%;
|
|
99
|
-
background: ${({ theme }) => theme.primary};
|
|
100
|
-
border-radius: 1rem;
|
|
101
|
-
position: relative;
|
|
102
|
-
z-index: 2;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&:after {
|
|
106
|
-
content: "";
|
|
107
|
-
position: absolute;
|
|
108
|
-
width: 100%;
|
|
109
|
-
height: 100%;
|
|
110
|
-
border-radius: 1rem;
|
|
111
|
-
transform: scale(1.8);
|
|
112
|
-
background: ${({ theme }) => theme.t05};
|
|
113
|
-
top: 0;
|
|
114
|
-
left: 0;
|
|
115
|
-
z-index: 1;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
&:before {
|
|
119
|
-
content: "";
|
|
120
|
-
position: absolute;
|
|
121
|
-
width: 100%;
|
|
122
|
-
height: 100%;
|
|
123
|
-
border-radius: 1rem;
|
|
124
|
-
transform: scale(3);
|
|
125
|
-
background: ${({ theme }) => theme.t05};
|
|
126
|
-
top: 0;
|
|
127
|
-
left: 0;
|
|
128
|
-
z-index: 0;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
`;
|
|
132
|
-
|
|
133
|
-
// contexts/theme/content.tsx
|
|
134
|
-
var CommonTheme = {
|
|
135
|
-
secondary: "#5869da",
|
|
136
|
-
tertiary: "#629dfd33",
|
|
137
|
-
positive: "#65c965",
|
|
138
|
-
negative: "#FF334E",
|
|
139
|
-
mobileMaxWidth: "650px",
|
|
140
|
-
mobileMinWidth: "315px"
|
|
141
|
-
};
|
|
142
|
-
var Themes = {
|
|
143
|
-
light: {
|
|
144
|
-
primary: "#ffffff",
|
|
145
|
-
reverse: "#353535",
|
|
146
|
-
tooltip: "#f2f2f2",
|
|
147
|
-
t8: "#000000cc",
|
|
148
|
-
t7: "#000000b3",
|
|
149
|
-
t6: "#00000099",
|
|
150
|
-
t5: "#00000080",
|
|
151
|
-
t4: "#00000066",
|
|
152
|
-
t3: "#0000004d",
|
|
153
|
-
t2: "#00000033",
|
|
154
|
-
t1: "#0000001a",
|
|
155
|
-
t08: "#00000014",
|
|
156
|
-
t05: "#0000000d",
|
|
157
|
-
t03: "#00000007",
|
|
158
|
-
t02: "#00000005",
|
|
159
|
-
t01: "#00000002",
|
|
160
|
-
lgrad: `linear-gradient(
|
|
161
|
-
to right,
|
|
162
|
-
#dadef7 0%,
|
|
163
|
-
#dee2f8 5%,
|
|
164
|
-
#e2e5f9 10%,
|
|
165
|
-
#e6e9fa 20%,
|
|
166
|
-
#eaedfb 30%,
|
|
167
|
-
#eff0fb 60%,
|
|
168
|
-
#f3f4fc 80%,
|
|
169
|
-
#f7f8fd 90%,
|
|
170
|
-
#fbfbfe 100%
|
|
171
|
-
)`,
|
|
172
|
-
maingrad: "linear-gradient(330deg, #b9c0ff7a 0%, #ffffff 100%)",
|
|
173
|
-
...CommonTheme
|
|
174
|
-
},
|
|
175
|
-
dark: {
|
|
176
|
-
primary: "#333333",
|
|
177
|
-
reverse: "#b45252",
|
|
178
|
-
tooltip: "#3d3d3d",
|
|
179
|
-
t8: "#ffffffcc",
|
|
180
|
-
t7: "#ffffffb3",
|
|
181
|
-
t6: "#ffffff99",
|
|
182
|
-
t5: "#ffffff80",
|
|
183
|
-
t4: "#ffffff66",
|
|
184
|
-
t3: "#ffffff4d",
|
|
185
|
-
t2: "#ffffff33",
|
|
186
|
-
t1: "#ffffff1a",
|
|
187
|
-
t08: "#ffffff14",
|
|
188
|
-
t05: "#ffffff0d",
|
|
189
|
-
t03: "#ffffff07",
|
|
190
|
-
t02: "#ffffff05",
|
|
191
|
-
t01: "#ffffff02",
|
|
192
|
-
lgrad: `linear-gradient(
|
|
193
|
-
to right,
|
|
194
|
-
#3d485c 0%,
|
|
195
|
-
#3c4657 5%,
|
|
196
|
-
#3b4353 10%,
|
|
197
|
-
#3a414e 20%,
|
|
198
|
-
#393f4a 30%,
|
|
199
|
-
#373c45 60%,
|
|
200
|
-
#363a41 80%,
|
|
201
|
-
#35383c 90%,
|
|
202
|
-
#343538 100%
|
|
203
|
-
)`,
|
|
204
|
-
maingrad: "linear-gradient(330deg, #1d1e27 0%, #333333 100%)",
|
|
205
|
-
...CommonTheme
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
|
|
209
|
-
// contexts/theme/index.tsx
|
|
210
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
211
|
-
var ThemeContext = (0, import_react.createContext)({});
|
|
212
|
-
var ThemeProviderContainer = (props) => {
|
|
213
|
-
const [theme, setTheme] = (0, import_react.useState)("light");
|
|
214
|
-
const [defaultTheme] = (0, import_react.useState)("light");
|
|
215
|
-
const SwitcherComponent = () => {
|
|
216
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
217
|
-
Switcher,
|
|
218
|
-
{
|
|
219
|
-
onClick: () => setTheme(theme === "light" ? "dark" : "light"),
|
|
220
|
-
"data-theme": theme || defaultTheme,
|
|
221
|
-
children: [
|
|
222
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-moon" }),
|
|
223
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "switcher", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) }),
|
|
224
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: "fa-solid fa-sun" })
|
|
225
|
-
]
|
|
226
|
-
}
|
|
227
|
-
);
|
|
228
|
-
};
|
|
229
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
230
|
-
ThemeContext.Provider,
|
|
231
|
-
{
|
|
232
|
-
value: {
|
|
233
|
-
theme: props.theme || defaultTheme,
|
|
234
|
-
setTheme,
|
|
235
|
-
content: Themes[props.theme || defaultTheme],
|
|
236
|
-
Switcher: SwitcherComponent
|
|
237
|
-
},
|
|
238
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled_components2.ThemeProvider, { theme: Themes[props.theme || defaultTheme], children: props.children })
|
|
239
|
-
}
|
|
240
|
-
);
|
|
241
|
-
};
|
|
242
|
-
var useTheme = () => (0, import_react.useContext)(ThemeContext);
|
|
243
|
-
|
|
244
|
-
// contexts/icon/index.tsx
|
|
245
|
-
var import_lodash = __toESM(require("lodash"));
|
|
246
|
-
|
|
247
|
-
// contexts/icon/assets/brands/index.tsx
|
|
248
|
-
var req = require.context("./", false, /\.svg$/);
|
|
249
|
-
var brands = {};
|
|
250
|
-
req.keys().forEach((key) => {
|
|
251
|
-
const name = key.replace("./", "").replace(".svg", "");
|
|
252
|
-
brands[name] = req(key).default;
|
|
253
|
-
});
|
|
254
|
-
var brands_default = brands;
|
|
255
|
-
|
|
256
|
-
// contexts/icon/assets/regular/index.tsx
|
|
257
|
-
var req2 = require.context("./", false, /\.svg$/);
|
|
258
|
-
var regular = {};
|
|
259
|
-
req2.keys().forEach((key) => {
|
|
260
|
-
const name = key.replace("./", "").replace(".svg", "");
|
|
261
|
-
regular[name] = req2(key).default;
|
|
262
|
-
});
|
|
263
|
-
var regular_default = regular;
|
|
264
|
-
|
|
265
|
-
// contexts/icon/assets/solid/index.tsx
|
|
266
|
-
var req3 = require.context("./", false, /\.svg$/);
|
|
267
|
-
var solid = {};
|
|
268
|
-
req3.keys().forEach((key) => {
|
|
269
|
-
const name = key.replace("./", "").replace(".svg", "");
|
|
270
|
-
solid[name] = req3(key).default;
|
|
271
|
-
});
|
|
272
|
-
var solid_default = solid;
|
|
273
|
-
|
|
274
|
-
// contexts/icon/assets/index.tsx
|
|
275
|
-
var assets_default = {
|
|
276
|
-
brands: brands_default,
|
|
277
|
-
regular: regular_default,
|
|
278
|
-
solid: solid_default
|
|
279
|
-
};
|
|
280
|
-
|
|
281
|
-
// contexts/icon/index.tsx
|
|
282
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
283
|
-
var IconContext = (0, import_react2.createContext)({});
|
|
284
|
-
var IconProviderContainer = ({ children }) => {
|
|
285
|
-
const { content } = useTheme();
|
|
286
|
-
const [isClient, setIsClient] = (0, import_react2.useState)(false);
|
|
287
|
-
const [matches, setMatches] = (0, import_react2.useState)(0);
|
|
288
|
-
(0, import_react2.useEffect)(() => {
|
|
289
|
-
setIsClient(true);
|
|
290
|
-
}, []);
|
|
291
|
-
(0, import_react2.useEffect)(() => {
|
|
292
|
-
const firstMediaQuery = window.matchMedia(`(max-width: ${content.mobileMaxWidth})`);
|
|
293
|
-
const secoundMediaQuery = window.matchMedia(`(max-width: ${content.mobileMinWidth})`);
|
|
294
|
-
const firstHandler = (event) => setMatches(event.matches ? 1 : 0);
|
|
295
|
-
const secoundHandler = (event) => setMatches(event.matches ? 2 : 1);
|
|
296
|
-
if (firstMediaQuery.matches) setMatches(1);
|
|
297
|
-
if (secoundMediaQuery.matches) setMatches(2);
|
|
298
|
-
firstMediaQuery.addEventListener("change", firstHandler);
|
|
299
|
-
secoundMediaQuery.addEventListener("change", secoundHandler);
|
|
300
|
-
return () => {
|
|
301
|
-
firstMediaQuery.removeEventListener("change", firstHandler);
|
|
302
|
-
secoundMediaQuery.removeEventListener("change", secoundHandler);
|
|
303
|
-
};
|
|
304
|
-
}, []);
|
|
305
|
-
(0, import_react2.useEffect)(() => {
|
|
306
|
-
if (!isClient) return;
|
|
307
|
-
const processElement = (element) => {
|
|
308
|
-
var _a, _b, _c, _d, _e;
|
|
309
|
-
const name = element.getAttribute("class");
|
|
310
|
-
if (!name) return;
|
|
311
|
-
const icon = import_lodash.default.split(import_lodash.default.replace(name, /fa-/g, ""), " ");
|
|
312
|
-
if (!icon.length) return;
|
|
313
|
-
let svg = (_d = (_c = (_a = assets_default[icon[0]]) == null ? void 0 : _a[icon[1]]) != null ? _c : (_b = assets_default["solid"]) == null ? void 0 : _b[icon[0]]) != null ? _d : "";
|
|
314
|
-
if (!svg) return;
|
|
315
|
-
svg = svg.replace(/fill=".*?"/g, 'fill="currentColor"');
|
|
316
|
-
const styles = window.getComputedStyle(element);
|
|
317
|
-
const size = Number((_e = import_lodash.default.split(styles.fontSize, "px")) == null ? void 0 : _e[0]) + 2;
|
|
318
|
-
element.style.width = `${size}px`;
|
|
319
|
-
element.style.height = `${size}px`;
|
|
320
|
-
element.textContent = "";
|
|
321
|
-
element.innerHTML = svg;
|
|
322
|
-
};
|
|
323
|
-
document.querySelectorAll("i").forEach((el) => processElement(el));
|
|
324
|
-
const observer = new MutationObserver((mutations) => {
|
|
325
|
-
mutations.forEach((mutation) => {
|
|
326
|
-
mutation.addedNodes.forEach((node) => {
|
|
327
|
-
if (node.nodeType === 1) {
|
|
328
|
-
const el = node;
|
|
329
|
-
if (el.tagName.toLowerCase() === "i") processElement(el);
|
|
330
|
-
el.querySelectorAll("i").forEach((child) => processElement(child));
|
|
331
|
-
}
|
|
332
|
-
});
|
|
333
|
-
});
|
|
334
|
-
});
|
|
335
|
-
observer.observe(document.body, {
|
|
336
|
-
childList: true,
|
|
337
|
-
subtree: true
|
|
338
|
-
});
|
|
339
|
-
return () => observer.disconnect();
|
|
340
|
-
}, [isClient, matches]);
|
|
341
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconContext.Provider, { value: {}, children });
|
|
342
|
-
};
|
|
343
|
-
var useIcon = () => (0, import_react2.useContext)(IconContext);
|
|
344
|
-
|
|
345
|
-
// contexts/tooltip/index.tsx
|
|
346
|
-
var import_react3 = require("react");
|
|
347
|
-
|
|
348
|
-
// contexts/tooltip/styles.tsx
|
|
349
|
-
var import_styled_components3 = __toESM(require("styled-components"));
|
|
350
|
-
var Tooltip = import_styled_components3.default.div`
|
|
351
|
-
position: fixed;
|
|
352
|
-
background: ${({ theme }) => theme.tooltip};
|
|
353
|
-
color: ${({ theme }) => theme.t6};
|
|
354
|
-
font-size: .8rem;
|
|
355
|
-
font-weight: 500;
|
|
356
|
-
text-align: center;
|
|
357
|
-
padding: .3rem .8rem;
|
|
358
|
-
border-radius: 5px;
|
|
359
|
-
transform: translateX(-50%);
|
|
360
|
-
z-index: 10;
|
|
361
|
-
border: 1px solid ${({ theme }) => theme.t05};
|
|
362
|
-
|
|
363
|
-
&::before {
|
|
364
|
-
content: "";
|
|
365
|
-
position: absolute;
|
|
366
|
-
bottom: -9px;
|
|
367
|
-
left: 50%;
|
|
368
|
-
transform: translateX(-50%);
|
|
369
|
-
width: 0;
|
|
370
|
-
height: 0;
|
|
371
|
-
border-left: 8px solid transparent;
|
|
372
|
-
border-right: 8px solid transparent;
|
|
373
|
-
border-top: 8px solid ${({ theme }) => theme.t05};
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
&::after {
|
|
377
|
-
content: "";
|
|
378
|
-
position: absolute;
|
|
379
|
-
bottom: -8px;
|
|
380
|
-
left: 50%;
|
|
381
|
-
transform: translateX(-50%);
|
|
382
|
-
width: 0;
|
|
383
|
-
height: 0;
|
|
384
|
-
border-left: 8px solid transparent;
|
|
385
|
-
border-right: 8px solid transparent;
|
|
386
|
-
border-top: 8px solid ${({ theme }) => theme.tooltip};
|
|
387
|
-
}
|
|
388
|
-
`;
|
|
389
|
-
|
|
390
|
-
// contexts/tooltip/index.tsx
|
|
391
|
-
var import_lodash2 = __toESM(require("lodash"));
|
|
392
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
393
|
-
var TooltipContext = (0, import_react3.createContext)({});
|
|
394
|
-
var TooltipProviderContainer = ({ children }) => {
|
|
395
|
-
const [tooltips, setTooltips] = (0, import_react3.useState)([]);
|
|
396
|
-
const getContent = (target) => {
|
|
397
|
-
var _a;
|
|
398
|
-
const rect = target.getBoundingClientRect();
|
|
399
|
-
return {
|
|
400
|
-
top: rect.top + window.scrollY - (target.offsetHeight + 8),
|
|
401
|
-
left: rect.left + window.scrollX + target.offsetWidth / 2,
|
|
402
|
-
content: ((_a = target.dataset) == null ? void 0 : _a.tooltip) || ""
|
|
403
|
-
};
|
|
404
|
-
};
|
|
405
|
-
(0, import_react3.useEffect)(() => {
|
|
406
|
-
const processElement = (element) => {
|
|
407
|
-
element.addEventListener("mouseenter", (event) => {
|
|
408
|
-
const target = event == null ? void 0 : event.target;
|
|
409
|
-
if (!target) return;
|
|
410
|
-
setTooltips(import_lodash2.default.concat(tooltips, [getContent(target)]));
|
|
411
|
-
});
|
|
412
|
-
element.addEventListener("mouseleave", (event) => {
|
|
413
|
-
const target = event == null ? void 0 : event.target;
|
|
414
|
-
if (!target) return;
|
|
415
|
-
setTooltips(import_lodash2.default.filter(tooltips, (data) => JSON.stringify(data) === JSON.stringify(getContent(target))));
|
|
416
|
-
});
|
|
417
|
-
};
|
|
418
|
-
document.querySelectorAll("[data-tooltip]").forEach((el) => processElement(el));
|
|
419
|
-
const observer = new MutationObserver((mutations) => {
|
|
420
|
-
mutations.forEach((mutation) => {
|
|
421
|
-
mutation.addedNodes.forEach((node) => {
|
|
422
|
-
if (node.nodeType === 1) {
|
|
423
|
-
const el = node;
|
|
424
|
-
if (el.getAttribute("data-tooltip")) processElement(el);
|
|
425
|
-
el.querySelectorAll("[data-tooltip]").forEach((child) => processElement(child));
|
|
426
|
-
}
|
|
427
|
-
});
|
|
428
|
-
});
|
|
429
|
-
});
|
|
430
|
-
observer.observe(document.body, {
|
|
431
|
-
childList: true,
|
|
432
|
-
subtree: true
|
|
433
|
-
});
|
|
434
|
-
return () => observer.disconnect();
|
|
435
|
-
}, []);
|
|
436
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TooltipContext.Provider, { value: {}, children: [
|
|
437
|
-
import_lodash2.default.map(
|
|
438
|
-
tooltips,
|
|
439
|
-
(data, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
440
|
-
Tooltip,
|
|
441
|
-
{
|
|
442
|
-
style: {
|
|
443
|
-
top: data.top,
|
|
444
|
-
left: data.left
|
|
445
|
-
},
|
|
446
|
-
children: data.content
|
|
447
|
-
},
|
|
448
|
-
index
|
|
449
|
-
)
|
|
450
|
-
),
|
|
451
|
-
children
|
|
452
|
-
] });
|
|
453
|
-
};
|
|
454
|
-
var useTooltip = () => (0, import_react3.useContext)(TooltipContext);
|
|
455
|
-
|
|
456
|
-
// contexts/modal/index.tsx
|
|
457
|
-
var import_react4 = require("react");
|
|
458
|
-
var import_navigation = require("next/navigation");
|
|
459
|
-
|
|
460
|
-
// contexts/modal/styles.tsx
|
|
461
|
-
var import_styled_components4 = __toESM(require("styled-components"));
|
|
462
|
-
var Container = import_styled_components4.default.div`
|
|
463
|
-
|
|
464
|
-
`;
|
|
465
|
-
|
|
466
|
-
// contexts/modal/index.tsx
|
|
467
|
-
var import_lodash3 = __toESM(require("lodash"));
|
|
468
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
469
|
-
var ModalContext = (0, import_react4.createContext)({});
|
|
470
|
-
var memory = [];
|
|
471
|
-
var ModalProviderContainer = ({ children }) => {
|
|
472
|
-
const pathname = (0, import_navigation.usePathname)();
|
|
473
|
-
const [modals, setModals] = (0, import_react4.useState)([]);
|
|
474
|
-
(0, import_react4.useEffect)(() => {
|
|
475
|
-
setModals(import_lodash3.default.filter(memory, (modal) => modal.type === "fixed"));
|
|
476
|
-
}, [pathname]);
|
|
477
|
-
const add = (modal) => {
|
|
478
|
-
if (import_lodash3.default.some(memory, (data) => data.name === modal.name)) return;
|
|
479
|
-
memory.push(modal);
|
|
480
|
-
setModals(memory);
|
|
481
|
-
};
|
|
482
|
-
const remove = (modalName) => {
|
|
483
|
-
const index = import_lodash3.default.findIndex(memory, (data) => data.name === modalName);
|
|
484
|
-
memory.slice(index, 1);
|
|
485
|
-
setModals(memory);
|
|
486
|
-
};
|
|
487
|
-
const setProps = (modalName, props) => {
|
|
488
|
-
const index = import_lodash3.default.findIndex(modals, (modal) => modal.name === modalName);
|
|
489
|
-
const content = import_lodash3.default.find(modals, (modal) => modal.name === modalName);
|
|
490
|
-
if (!content) return;
|
|
491
|
-
let settedModals = [...modals];
|
|
492
|
-
settedModals.splice(index, 1, { ...content, props: { ...content.props, ...props } });
|
|
493
|
-
setModals(settedModals);
|
|
494
|
-
};
|
|
495
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
496
|
-
ModalContext.Provider,
|
|
497
|
-
{
|
|
498
|
-
value: {
|
|
499
|
-
value: modals,
|
|
500
|
-
add,
|
|
501
|
-
remove,
|
|
502
|
-
setProps
|
|
503
|
-
},
|
|
504
|
-
children: [
|
|
505
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { children: import_lodash3.default.map(modals, (modal, index) => {
|
|
506
|
-
const ModalComponent = modal.component;
|
|
507
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalComponent, { ...modal.props }, index);
|
|
508
|
-
}) }),
|
|
509
|
-
children
|
|
510
|
-
]
|
|
511
|
-
}
|
|
512
|
-
);
|
|
513
|
-
};
|
|
514
|
-
var useModal = () => (0, import_react4.useContext)(ModalContext);
|
|
20
|
+
__reExport(contexts_exports, require("./icon"), module.exports);
|
|
21
|
+
__reExport(contexts_exports, require("./theme"), module.exports);
|
|
22
|
+
__reExport(contexts_exports, require("./tooltip"), module.exports);
|
|
23
|
+
__reExport(contexts_exports, require("./modal"), module.exports);
|
|
515
24
|
// Annotate the CommonJS export names for ESM import in node:
|
|
516
25
|
0 && (module.exports = {
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
useIcon,
|
|
522
|
-
useModal,
|
|
523
|
-
useTheme,
|
|
524
|
-
useTooltip
|
|
26
|
+
...require("./icon"),
|
|
27
|
+
...require("./theme"),
|
|
28
|
+
...require("./tooltip"),
|
|
29
|
+
...require("./modal")
|
|
525
30
|
});
|
|
526
|
-
//# sourceMappingURL=index.js.map
|
package/dist/contexts/index.mjs
CHANGED
|
@@ -1,23 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use client";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
TooltipProviderContainer,
|
|
8
|
-
useIcon,
|
|
9
|
-
useModal,
|
|
10
|
-
useTheme,
|
|
11
|
-
useTooltip
|
|
12
|
-
} from "../chunk-2X7JQNHX.mjs";
|
|
13
|
-
export {
|
|
14
|
-
IconProviderContainer as IconProvider,
|
|
15
|
-
ModalProviderContainer as ModalProvider,
|
|
16
|
-
ThemeProviderContainer as ThemeProvider,
|
|
17
|
-
TooltipProviderContainer as TooltipProvider,
|
|
18
|
-
useIcon,
|
|
19
|
-
useModal,
|
|
20
|
-
useTheme,
|
|
21
|
-
useTooltip
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=index.mjs.map
|
|
3
|
+
export * from "./icon";
|
|
4
|
+
export * from "./theme";
|
|
5
|
+
export * from "./tooltip";
|
|
6
|
+
export * from "./modal";
|