bmi-next-brokers 3.0.4 → 3.0.6
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/assets/Switch.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._switch_o6vju_1{--switch-bg: var(--ui-blue-100);--switch-active-bg: #2054a5;--switch-active-text: #ffffff;--switch-inactive-text: #2054a5;--switch-inset: 4px;--switch-pad-y: 7px;--switch-pad-x: 12px;--switch-font: 16px;--switch-line-height: 19.2px;position:relative;display:flex;flex-direction:row;gap:0;padding:var(--switch-inset);border-radius:1000px;background:var(--switch-bg);width:fit-content}._switch_o6vju_1._fullWidth_o6vju_24{width:100%}._switch_o6vju_1._fullWidth_o6vju_24 ._option_o6vju_28{flex:1}._extraSmall_o6vju_33{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 12px;--switch-line-height: 14.4px}._small_o6vju_41{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 14px;--switch-line-height: 16.8px}._large_o6vju_49{--switch-inset: 4px;--switch-pad-y: 10px;--switch-pad-x: 16px;--switch-font: 18px;--switch-line-height: 21.6px}._extraLarge_o6vju_57{--switch-inset: 6px;--switch-pad-y: 6px;--switch-pad-x: 14px;--switch-font: 20px;--switch-line-height: 24px}._switch_o6vju_1 ._indicator_o6vju_66{position:absolute;top:var(--switch-inset);bottom:var(--switch-inset);left:0;background:#2054a5;border-radius:1000px;transition:transform .42s cubic-bezier(.34,1.56,.64,1),width .42s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0}._switch_o6vju_1._simple_o6vju_82 ._indicator_o6vju_66{transition:transform .22s ease,width .22s ease}._switch_o6vju_1._simple_o6vju_82 ._option_o6vju_28._active_o6vju_88 ._label_o6vju_88{animation:none}._switch_o6vju_1 ._option_o6vju_28{position:relative;z-index:1;border:none;background:transparent;color:var(--switch-inactive-text);font-family:var(--font-medium);font-size:var(--switch-font);line-height:var(--switch-line-height);cursor:pointer;transition:color .25s ease,transform .25s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--switch-pad-y) var(--switch-pad-x);border-radius:1000px}._switch_o6vju_1 ._option_o6vju_28:active{transform:scale(.94)}._switch_o6vju_1 ._option_o6vju_28._active_o6vju_88{color:var(--switch-active-text)}._switch_o6vju_1 ._option_o6vju_28._active_o6vju_88 ._label_o6vju_88{animation:_pop_o6vju_1 .32s ease}@keyframes _pop_o6vju_1{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}._switch_o6vju_1 ._label_o6vju_88{line-height:5px}
|
|
@@ -4,7 +4,7 @@ export type SwitchOption = string | {
|
|
|
4
4
|
label: string;
|
|
5
5
|
icon?: IconName;
|
|
6
6
|
};
|
|
7
|
-
export type SwitchSize = "small" | "medium" | "large";
|
|
7
|
+
export type SwitchSize = "extraSmall" | "small" | "medium" | "large" | "extraLarge";
|
|
8
8
|
export interface SwitchProps {
|
|
9
9
|
/** opciones a mostrar: strings u objetos { label, icon } */
|
|
10
10
|
options: SwitchOption[];
|
|
@@ -29,7 +29,9 @@ export interface SwitchProps {
|
|
|
29
29
|
background?: string;
|
|
30
30
|
/** si false, cada opción se adapta a su contenido; por defecto true (todas al ancho de la más larga) */
|
|
31
31
|
equalWidth?: boolean;
|
|
32
|
+
/** ancho de 100% */
|
|
33
|
+
fullWidth?: boolean;
|
|
32
34
|
/** estilos inline aplicados a todos los botones de opción */
|
|
33
35
|
optionStyle?: React.CSSProperties;
|
|
34
36
|
}
|
|
35
|
-
export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, optionStyle, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, fullWidth, optionStyle, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,106 +1,112 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as b, jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as p, useState as k, useLayoutEffect as D } from "react";
|
|
3
3
|
import { Icon as R } from "../../icons/Icon.js";
|
|
4
|
-
import '../../assets/Switch.css';const T = "
|
|
5
|
-
switch: "
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
import '../../assets/Switch.css';const T = "_fullWidth_o6vju_24", Z = "_option_o6vju_28", z = "_extraSmall_o6vju_33", B = "_small_o6vju_41", K = "_large_o6vju_49", O = "_extraLarge_o6vju_57", V = "_indicator_o6vju_66", X = "_simple_o6vju_82", Y = "_active_o6vju_88", A = "_label_o6vju_88", F = "_pop_o6vju_1", r = {
|
|
5
|
+
switch: "_switch_o6vju_1",
|
|
6
|
+
fullWidth: T,
|
|
7
|
+
option: Z,
|
|
8
|
+
extraSmall: z,
|
|
9
|
+
small: B,
|
|
10
|
+
large: K,
|
|
11
|
+
extraLarge: O,
|
|
12
|
+
indicator: V,
|
|
13
|
+
simple: X,
|
|
14
|
+
active: Y,
|
|
15
|
+
label: A,
|
|
16
|
+
pop: F
|
|
17
|
+
}, G = {
|
|
18
|
+
extraSmall: 15,
|
|
19
|
+
small: 15,
|
|
20
|
+
medium: 19,
|
|
21
|
+
large: 19,
|
|
22
|
+
extraLarge: 19
|
|
23
|
+
}, Q = ({
|
|
19
24
|
options: d = [],
|
|
20
|
-
active:
|
|
21
|
-
onChange:
|
|
25
|
+
active: i = 0,
|
|
26
|
+
onChange: c,
|
|
22
27
|
size: h = "medium",
|
|
23
|
-
simpleAnimation:
|
|
24
|
-
iconSize:
|
|
25
|
-
className:
|
|
26
|
-
activeColor:
|
|
28
|
+
simpleAnimation: _ = !1,
|
|
29
|
+
iconSize: W,
|
|
30
|
+
className: I = "",
|
|
31
|
+
activeColor: v,
|
|
27
32
|
activeTextColor: w,
|
|
28
|
-
inactiveTextColor:
|
|
29
|
-
background:
|
|
30
|
-
equalWidth:
|
|
31
|
-
|
|
33
|
+
inactiveTextColor: j,
|
|
34
|
+
background: x,
|
|
35
|
+
equalWidth: y = !0,
|
|
36
|
+
fullWidth: E = !1,
|
|
37
|
+
optionStyle: N
|
|
32
38
|
}) => {
|
|
33
|
-
const
|
|
39
|
+
const u = p([]), L = p(i), a = p(null), [S, $] = k({
|
|
34
40
|
left: 0,
|
|
35
41
|
width: 0
|
|
36
42
|
});
|
|
37
43
|
D(() => {
|
|
38
|
-
const t =
|
|
44
|
+
const t = u.current[i], e = u.current[L.current];
|
|
39
45
|
if (!t) return;
|
|
40
|
-
const
|
|
41
|
-
(
|
|
46
|
+
const l = u.current.filter(
|
|
47
|
+
(s) => s !== null
|
|
42
48
|
);
|
|
43
|
-
if (
|
|
44
|
-
const
|
|
45
|
-
|
|
49
|
+
if (l.forEach((s) => s.style.width = "auto"), y) {
|
|
50
|
+
const s = Math.max(...l.map((o) => o.offsetWidth));
|
|
51
|
+
l.forEach((o) => o.style.width = `${s}px`);
|
|
46
52
|
}
|
|
47
|
-
const f = () =>
|
|
48
|
-
if (!
|
|
49
|
-
const
|
|
50
|
-
|
|
53
|
+
const f = () => $({ left: t.offsetLeft, width: t.offsetWidth });
|
|
54
|
+
if (!_ && e && e !== t) {
|
|
55
|
+
const s = Math.min(e.offsetLeft, t.offsetLeft), o = Math.max(
|
|
56
|
+
e.offsetLeft + e.offsetWidth,
|
|
51
57
|
t.offsetLeft + t.offsetWidth
|
|
52
58
|
);
|
|
53
|
-
|
|
59
|
+
$({ left: s, width: o - s }), a.current && clearTimeout(a.current), a.current = setTimeout(f, 160);
|
|
54
60
|
} else
|
|
55
61
|
f();
|
|
56
|
-
return
|
|
57
|
-
|
|
62
|
+
return L.current = i, () => {
|
|
63
|
+
a.current && clearTimeout(a.current);
|
|
58
64
|
};
|
|
59
|
-
}, [
|
|
60
|
-
const
|
|
61
|
-
...
|
|
65
|
+
}, [i, d, _, y]);
|
|
66
|
+
const g = W ?? G[h], M = {
|
|
67
|
+
...v && { "--switch-active-bg": v },
|
|
62
68
|
...w && { "--switch-active-text": w },
|
|
63
|
-
...
|
|
64
|
-
...
|
|
69
|
+
...j && { "--switch-inactive-text": j },
|
|
70
|
+
...x && { "--switch-bg": x }
|
|
65
71
|
};
|
|
66
|
-
return /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ b(
|
|
67
73
|
"div",
|
|
68
74
|
{
|
|
69
|
-
className: `${r.switch} ${r[h]} ${
|
|
70
|
-
style:
|
|
75
|
+
className: `${r.switch} ${r[h]} ${_ ? r.simple : ""} ${E ? r.fullWidth : ""} ${I}`,
|
|
76
|
+
style: M,
|
|
71
77
|
children: [
|
|
72
78
|
/* @__PURE__ */ m(
|
|
73
79
|
"span",
|
|
74
80
|
{
|
|
75
81
|
className: r.indicator,
|
|
76
82
|
style: {
|
|
77
|
-
transform: `translateX(${
|
|
78
|
-
width: `${
|
|
83
|
+
transform: `translateX(${S.left}px)`,
|
|
84
|
+
width: `${S.width}px`
|
|
79
85
|
}
|
|
80
86
|
}
|
|
81
87
|
),
|
|
82
|
-
d.map((t,
|
|
83
|
-
const
|
|
84
|
-
return /* @__PURE__ */
|
|
88
|
+
d.map((t, e) => {
|
|
89
|
+
const l = typeof t == "string", f = l ? t : t.label, s = l ? null : t.icon, o = i === e;
|
|
90
|
+
return /* @__PURE__ */ b(
|
|
85
91
|
"div",
|
|
86
92
|
{
|
|
87
|
-
ref: (
|
|
88
|
-
|
|
93
|
+
ref: (n) => {
|
|
94
|
+
u.current[e] = n;
|
|
89
95
|
},
|
|
90
96
|
role: "button",
|
|
91
97
|
tabIndex: 0,
|
|
92
|
-
onClick: () =>
|
|
93
|
-
onKeyDown: (
|
|
94
|
-
(
|
|
98
|
+
onClick: () => c == null ? void 0 : c(e),
|
|
99
|
+
onKeyDown: (n) => {
|
|
100
|
+
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), c == null || c(e));
|
|
95
101
|
},
|
|
96
|
-
className: `${r.option} ${
|
|
97
|
-
style:
|
|
102
|
+
className: `${r.option} ${o ? r.active : ""}`,
|
|
103
|
+
style: N,
|
|
98
104
|
children: [
|
|
99
|
-
|
|
105
|
+
s && /* @__PURE__ */ m(R, { name: s, size: g }),
|
|
100
106
|
f && /* @__PURE__ */ m("p", { className: r.label, children: f })
|
|
101
107
|
]
|
|
102
108
|
},
|
|
103
|
-
|
|
109
|
+
e
|
|
104
110
|
);
|
|
105
111
|
})
|
|
106
112
|
]
|
|
@@ -108,5 +114,5 @@ import '../../assets/Switch.css';const T = "_small_56b6x_29", Z = "_large_56b6x_
|
|
|
108
114
|
);
|
|
109
115
|
};
|
|
110
116
|
export {
|
|
111
|
-
|
|
117
|
+
Q as Switch
|
|
112
118
|
};
|
package/package.json
CHANGED