@situaction/traq-ui-ste 1.2.45 → 1.2.46
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/stepper/Stepper.js +55 -55
- package/dist/components/theme/variables_dark.d.ts +1 -0
- package/dist/components/theme/variables_dark.js +1 -0
- package/dist/components/theme/variables_light.d.ts +1 -0
- package/dist/components/theme/variables_light.js +1 -0
- package/dist/styles/Stepper.css +1 -1
- package/package.json +1 -1
|
@@ -1,67 +1,67 @@
|
|
|
1
1
|
import { jsx as _, jsxs as C } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as
|
|
2
|
+
import { useMemo as h, useRef as E, useState as Z, useLayoutEffect as L } from "react";
|
|
3
3
|
import { s as tt } from "../../CheckCircle.es-ILxE75_k.mjs";
|
|
4
|
-
import '../../styles/Stepper.css';const et = "
|
|
4
|
+
import '../../styles/Stepper.css';const et = "_wrapper_tr5aw_30", nt = "_steps_tr5aw_35", ot = "_row_tr5aw_42", rt = "_connectorAbs_tr5aw_49", st = "_connectorProgress_tr5aw_59", ct = "_connectorGradient_tr5aw_63", at = "_connectorDefault_tr5aw_68", dt = "_dotButton_tr5aw_74", it = "_dotButtonDisabled_tr5aw_89", ut = "_dotOuter_tr5aw_95", lt = "_dotInner_tr5aw_103", pt = "_rowNoContent_tr5aw_172", _t = "_content_tr5aw_177", n = {
|
|
5
5
|
wrapper: et,
|
|
6
6
|
steps: nt,
|
|
7
7
|
row: ot,
|
|
8
|
-
connectorAbs:
|
|
9
|
-
connectorProgress:
|
|
10
|
-
connectorGradient:
|
|
11
|
-
connectorDefault:
|
|
12
|
-
dotButton:
|
|
13
|
-
dotButtonDisabled:
|
|
8
|
+
connectorAbs: rt,
|
|
9
|
+
connectorProgress: st,
|
|
10
|
+
connectorGradient: ct,
|
|
11
|
+
connectorDefault: at,
|
|
12
|
+
dotButton: dt,
|
|
13
|
+
dotButtonDisabled: it,
|
|
14
14
|
dotOuter: ut,
|
|
15
15
|
dotInner: lt,
|
|
16
|
-
"dotButton--upcoming": "_dotButton--
|
|
17
|
-
"dotButton--active": "_dotButton--
|
|
18
|
-
"dotButton--completed": "_dotButton--
|
|
19
|
-
"dotButton--completedCheck": "_dotButton--
|
|
20
|
-
"dotButton--disabled": "_dotButton--
|
|
16
|
+
"dotButton--upcoming": "_dotButton--upcoming_tr5aw_108",
|
|
17
|
+
"dotButton--active": "_dotButton--active_tr5aw_120",
|
|
18
|
+
"dotButton--completed": "_dotButton--completed_tr5aw_142",
|
|
19
|
+
"dotButton--completedCheck": "_dotButton--completedCheck_tr5aw_153",
|
|
20
|
+
"dotButton--disabled": "_dotButton--disabled_tr5aw_160",
|
|
21
21
|
rowNoContent: pt,
|
|
22
22
|
content: _t
|
|
23
|
-
}, ft = (o,
|
|
24
|
-
if (o ===
|
|
25
|
-
if (o.length !==
|
|
26
|
-
for (let
|
|
27
|
-
const p = o[
|
|
23
|
+
}, ft = (o, d) => {
|
|
24
|
+
if (o === d) return !0;
|
|
25
|
+
if (o.length !== d.length) return !1;
|
|
26
|
+
for (let i = 0; i < o.length; i++) {
|
|
27
|
+
const p = o[i], u = d[i];
|
|
28
28
|
if (p.key !== u.key || p.leftPx !== u.leftPx || p.topPx !== u.topPx || p.heightPx !== u.heightPx || p.variant !== u.variant)
|
|
29
29
|
return !1;
|
|
30
30
|
}
|
|
31
31
|
return !0;
|
|
32
|
-
},
|
|
32
|
+
}, Bt = ({
|
|
33
33
|
items: o,
|
|
34
|
-
onDotClick:
|
|
35
|
-
dotOffsetPx:
|
|
34
|
+
onDotClick: d,
|
|
35
|
+
dotOffsetPx: i = 18,
|
|
36
36
|
dotsClickable: p = !0,
|
|
37
37
|
activeId: u,
|
|
38
38
|
autoStatusFromActive: y = !0,
|
|
39
|
-
disabledIds:
|
|
39
|
+
disabledIds: m = [],
|
|
40
40
|
showContent: P = !0,
|
|
41
41
|
showCompletedCheck: N = !1,
|
|
42
42
|
getDotAriaLabel: x,
|
|
43
43
|
dotButtonMarginTop: I = "10px"
|
|
44
44
|
}) => {
|
|
45
|
-
const z =
|
|
46
|
-
() => ({ "--flowline-dot-offset": `${
|
|
47
|
-
[
|
|
48
|
-
), Y =
|
|
49
|
-
var l,
|
|
50
|
-
const t = new Set(
|
|
51
|
-
return o.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : y ? f <
|
|
52
|
-
}, [o, u, y, Y]), k =
|
|
53
|
-
|
|
45
|
+
const z = h(
|
|
46
|
+
() => ({ "--flowline-dot-offset": `${i}px` }),
|
|
47
|
+
[i]
|
|
48
|
+
), Y = h(() => m.join("|"), [m]), g = h(() => {
|
|
49
|
+
var l, c;
|
|
50
|
+
const t = new Set(m), r = u ?? ((l = o.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : l.id) ?? ((c = o[0]) == null ? void 0 : c.id), s = o.findIndex((e) => e.id === r);
|
|
51
|
+
return o.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : y ? f < s ? "completed" : f === s ? "active" : "upcoming" : e.status ?? "upcoming");
|
|
52
|
+
}, [o, u, y, Y]), k = h(() => g.join("|"), [g]), K = h(() => o.map((t) => t.id).join("|"), [o]), R = E(null), B = E(/* @__PURE__ */ new Map()), q = h(() => (t) => (r) => {
|
|
53
|
+
B.current.set(t, r);
|
|
54
54
|
}, []), [D, F] = Z([]);
|
|
55
55
|
return L(() => {
|
|
56
56
|
const t = R.current;
|
|
57
57
|
if (!t) return;
|
|
58
|
-
let
|
|
59
|
-
const
|
|
60
|
-
const e = t.getBoundingClientRect(), f = [], b = o.map((
|
|
61
|
-
for (let
|
|
62
|
-
const $ = b[
|
|
58
|
+
let r = null;
|
|
59
|
+
const s = () => {
|
|
60
|
+
const e = t.getBoundingClientRect(), f = [], b = o.map((a) => a.id);
|
|
61
|
+
for (let a = 0; a < b.length - 1; a++) {
|
|
62
|
+
const $ = b[a], j = b[a + 1], A = B.current.get($), O = B.current.get(j);
|
|
63
63
|
if (!A || !O) continue;
|
|
64
|
-
const
|
|
64
|
+
const w = A.getBoundingClientRect(), v = O.getBoundingClientRect(), T = Math.round(w.left + w.width / 2 - e.left), H = w.top + w.height / 2 - e.top, J = v.top + v.height / 2 - e.top, Q = w.height / 2, U = v.height / 2, G = 2, M = Math.round(H + Q + G), V = Math.round(J - U - G), W = Math.max(0, V - M), S = g[a], X = S === "completed" ? "progress" : S === "active" ? "gradient" : "default";
|
|
65
65
|
f.push({
|
|
66
66
|
key: `${$}__${j}`,
|
|
67
67
|
leftPx: T,
|
|
@@ -70,18 +70,18 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
|
|
|
70
70
|
variant: X
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
|
-
F((
|
|
73
|
+
F((a) => ft(a, f) ? a : f);
|
|
74
74
|
}, l = () => {
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
r == null && (r = requestAnimationFrame(() => {
|
|
76
|
+
r = null, s();
|
|
77
77
|
}));
|
|
78
78
|
};
|
|
79
79
|
l();
|
|
80
|
-
const
|
|
81
|
-
return
|
|
82
|
-
e &&
|
|
80
|
+
const c = new ResizeObserver(l);
|
|
81
|
+
return c.observe(t), B.current.forEach((e) => {
|
|
82
|
+
e && c.observe(e);
|
|
83
83
|
}), window.addEventListener("resize", l), () => {
|
|
84
|
-
|
|
84
|
+
r != null && cancelAnimationFrame(r), c.disconnect(), window.removeEventListener("resize", l);
|
|
85
85
|
};
|
|
86
86
|
}, [K, k]), /* @__PURE__ */ _("div", { className: n.wrapper, style: z, children: /* @__PURE__ */ C("div", { ref: R, className: n.steps, children: [
|
|
87
87
|
D.map((t) => /* @__PURE__ */ _(
|
|
@@ -100,8 +100,8 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
|
|
|
100
100
|
},
|
|
101
101
|
t.key
|
|
102
102
|
)),
|
|
103
|
-
o.map((t,
|
|
104
|
-
const
|
|
103
|
+
o.map((t, r) => {
|
|
104
|
+
const s = g[r], c = p && !(s === "disabled") && !!d;
|
|
105
105
|
return /* @__PURE__ */ C(
|
|
106
106
|
"div",
|
|
107
107
|
{
|
|
@@ -109,7 +109,7 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
|
|
|
109
109
|
n.row,
|
|
110
110
|
P ? "" : n.rowNoContent
|
|
111
111
|
].filter(Boolean).join(" "),
|
|
112
|
-
style: { columnGap: `${
|
|
112
|
+
style: { columnGap: `${i}px` },
|
|
113
113
|
children: [
|
|
114
114
|
/* @__PURE__ */ _(
|
|
115
115
|
"button",
|
|
@@ -117,17 +117,17 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
|
|
|
117
117
|
type: "button",
|
|
118
118
|
className: [
|
|
119
119
|
n.dotButton,
|
|
120
|
-
n[`dotButton--${
|
|
121
|
-
|
|
122
|
-
|
|
120
|
+
n[`dotButton--${s}`],
|
|
121
|
+
s === "completed" && N ? n["dotButton--completedCheck"] : "",
|
|
122
|
+
c ? "" : n.dotButtonDisabled
|
|
123
123
|
].filter(Boolean).join(" "),
|
|
124
124
|
style: { marginTop: I ?? "0" },
|
|
125
125
|
onClick: () => {
|
|
126
|
-
|
|
126
|
+
c && (d == null || d(t.id));
|
|
127
127
|
},
|
|
128
|
-
"aria-label": (x == null ? void 0 : x(t,
|
|
129
|
-
disabled: !
|
|
130
|
-
children: /* @__PURE__ */ _("span", { ref: q(t.id), className: n.dotOuter, children:
|
|
128
|
+
"aria-label": (x == null ? void 0 : x(t, r, s)) ?? `Open step ${t.id}`,
|
|
129
|
+
disabled: !c,
|
|
130
|
+
children: /* @__PURE__ */ _("span", { ref: q(t.id), className: n.dotOuter, children: s === "completed" && N ? /* @__PURE__ */ _(tt, { size: 14, weight: "bold" }) : /* @__PURE__ */ _("span", { className: n.dotInner }) })
|
|
131
131
|
}
|
|
132
132
|
),
|
|
133
133
|
P ? /* @__PURE__ */ _("div", { className: n.content, children: t.content }) : null
|
|
@@ -139,5 +139,5 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
|
|
|
139
139
|
] }) });
|
|
140
140
|
};
|
|
141
141
|
export {
|
|
142
|
-
|
|
142
|
+
Bt as Stepper
|
|
143
143
|
};
|
|
@@ -236,6 +236,7 @@ export declare const variables_dark: {
|
|
|
236
236
|
'--gradient-backgroundcard-100': string;
|
|
237
237
|
'--gradient-backgroundcard-0': string;
|
|
238
238
|
'--flow-point-line-active': string;
|
|
239
|
+
'--flow-point-line-active-text': string;
|
|
239
240
|
'--flow-point-line-inactive': string;
|
|
240
241
|
'--flow-gradient-light': string;
|
|
241
242
|
'--flow-gradient-dark': string;
|
|
@@ -236,6 +236,7 @@ const r = {
|
|
|
236
236
|
"--gradient-backgroundcard-100": "var(--color-light-10)",
|
|
237
237
|
"--gradient-backgroundcard-0": "var(--color-light-0)",
|
|
238
238
|
"--flow-point-line-active": "var(--color-light-100)",
|
|
239
|
+
"--flow-point-line-active-text": "var(--color-purple-dark-900)",
|
|
239
240
|
"--flow-point-line-inactive": "var(--color-light-30)",
|
|
240
241
|
"--flow-gradient-light": "var(--color-light-20)",
|
|
241
242
|
"--flow-gradient-dark": "var(--color-light-100)"
|
|
@@ -236,6 +236,7 @@ export declare const variables_light: {
|
|
|
236
236
|
'--gradient-backgroundcard-100': string;
|
|
237
237
|
'--gradient-backgroundcard-0': string;
|
|
238
238
|
'--flow-point-line-active': string;
|
|
239
|
+
'--flow-point-line-active-text': string;
|
|
239
240
|
'--flow-point-line-inactive': string;
|
|
240
241
|
'--flow-gradient-light': string;
|
|
241
242
|
'--flow-gradient-dark': string;
|
|
@@ -236,6 +236,7 @@ const r = {
|
|
|
236
236
|
"--gradient-backgroundcard-100": "var(--color-sable-trans-20)",
|
|
237
237
|
"--gradient-backgroundcard-0": "var(--color-sable-trans-0)",
|
|
238
238
|
"--flow-point-line-active": "var(--color-purple-dark-900)",
|
|
239
|
+
"--flow-point-line-active-text": "var(--color-light-100)",
|
|
239
240
|
"--flow-point-line-inactive": "var(--color-gray-trans-70)",
|
|
240
241
|
"--flow-gradient-light": "var(--color-gray-trans-70)",
|
|
241
242
|
"--flow-gradient-dark": "var(--color-purple-dark-900)"
|
package/dist/styles/Stepper.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_tr5aw_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_tr5aw_35{position:relative;display:flex;flex-direction:column;gap:.625rem}._row_tr5aw_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;align-items:start}._connectorAbs_tr5aw_49{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_tr5aw_59{background:var(--flow-point-line-active)}._connectorGradient_tr5aw_63{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_tr5aw_68{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_tr5aw_74{width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(var(--stepper-dot-offset-y, 0px));position:relative;z-index:1}._dotButtonDisabled_tr5aw_89{cursor:default;opacity:.5}._dotOuter_tr5aw_95{display:flex;align-items:center;justify-content:center;border-radius:999px;transform:translateY(var(--stepper-dot-offset-y, 0px))}._dotInner_tr5aw_103{border-radius:999px}._dotButton--upcoming_tr5aw_108 ._dotOuter_tr5aw_95{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_tr5aw_108 ._dotInner_tr5aw_103{display:none}._dotButton--active_tr5aw_120 ._dotOuter_tr5aw_95{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_tr5aw_120 ._dotInner_tr5aw_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_tr5aw_142 ._dotOuter_tr5aw_95{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_tr5aw_142 ._dotInner_tr5aw_103{display:none}._dotButton--completedCheck_tr5aw_153 ._dotOuter_tr5aw_95{width:16px;height:16px;color:var(--flow-point-line-active-text)}._dotButton--disabled_tr5aw_160 ._dotOuter_tr5aw_95{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_tr5aw_160 ._dotInner_tr5aw_103{display:none}._rowNoContent_tr5aw_172{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_tr5aw_172 ._content_tr5aw_177{display:none}
|