@situaction/traq-ui-ste 1.1.6 → 1.1.7
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { AccordionItem as i } from "./item/AccordionItem.js";
|
|
3
|
-
import '../../styles/Accordion.css';const t = "
|
|
3
|
+
import '../../styles/Accordion.css';const t = "_accordion_avh0n_6", a = {
|
|
4
4
|
accordion: t
|
|
5
|
-
}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className:
|
|
5
|
+
}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className: a.accordion, children: n.map((o, e) => /* @__PURE__ */ c(
|
|
6
6
|
i,
|
|
7
7
|
{
|
|
8
8
|
header: o.header,
|
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as d, useEffect as w } from "react";
|
|
3
3
|
import { IconButton as n } from "../../icon-button/IconButton.js";
|
|
4
|
-
import '../../../styles/AccordionItem.css';const
|
|
5
|
-
accordionHeader:
|
|
4
|
+
import '../../../styles/AccordionItem.css';const g = "_accordionHeader_e4xbv_7", v = "_title_e4xbv_16", _ = "_accordionContent_e4xbv_21", m = "_fullHeight_e4xbv_26", x = "_block_e4xbv_30", f = "_tile_e4xbv_38", l = {
|
|
5
|
+
accordionHeader: g,
|
|
6
6
|
title: v,
|
|
7
|
-
accordionContent:
|
|
8
|
-
fullHeight:
|
|
9
|
-
block:
|
|
10
|
-
tile:
|
|
11
|
-
},
|
|
12
|
-
header:
|
|
7
|
+
accordionContent: _,
|
|
8
|
+
fullHeight: m,
|
|
9
|
+
block: x,
|
|
10
|
+
tile: f
|
|
11
|
+
}, H = ({
|
|
12
|
+
header: r,
|
|
13
13
|
children: h,
|
|
14
14
|
iconPosition: c = "right",
|
|
15
|
-
defaultOpen:
|
|
16
|
-
type:
|
|
15
|
+
defaultOpen: i = !1,
|
|
16
|
+
type: a = "block"
|
|
17
17
|
}) => {
|
|
18
|
-
const [
|
|
19
|
-
return
|
|
20
|
-
|
|
21
|
-
}, [
|
|
18
|
+
const [e, o] = d(!1);
|
|
19
|
+
return w(() => {
|
|
20
|
+
i && o(i);
|
|
21
|
+
}, [i]), /* @__PURE__ */ s("div", { className: `${a === "tile" ? l.tile : l.block}`, children: [
|
|
22
22
|
/* @__PURE__ */ s("div", { className: l.accordionHeader, children: [
|
|
23
23
|
c === "left" && /* @__PURE__ */ t(
|
|
24
24
|
n,
|
|
25
25
|
{
|
|
26
26
|
mode: "ghost",
|
|
27
27
|
size: "s",
|
|
28
|
-
onClick: () =>
|
|
29
|
-
children:
|
|
28
|
+
onClick: () => o(!e),
|
|
29
|
+
children: e ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) })
|
|
30
30
|
}
|
|
31
31
|
),
|
|
32
|
-
/* @__PURE__ */ t("div", { className: l.title, children:
|
|
32
|
+
/* @__PURE__ */ t("div", { className: l.title, children: r }),
|
|
33
33
|
c === "right" && /* @__PURE__ */ t(
|
|
34
34
|
n,
|
|
35
35
|
{
|
|
36
36
|
mode: "ghost",
|
|
37
37
|
size: "s",
|
|
38
|
-
onClick: () =>
|
|
39
|
-
children:
|
|
38
|
+
onClick: () => o(!e),
|
|
39
|
+
children: e ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) })
|
|
40
40
|
}
|
|
41
41
|
)
|
|
42
42
|
] }),
|
|
43
|
-
|
|
43
|
+
e && /* @__PURE__ */ t("div", { className: l.accordionContent, children: h })
|
|
44
44
|
] });
|
|
45
45
|
};
|
|
46
46
|
export {
|
|
47
|
-
|
|
47
|
+
H as AccordionItem
|
|
48
48
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsxs as H, jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { IconButton as
|
|
5
|
-
import '../../styles/Tabs.css';const
|
|
1
|
+
import { jsxs as H, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useState as f, useRef as u, useLayoutEffect as C, useEffect as $ } from "react";
|
|
3
|
+
import { Button as B } from "../button/Button.js";
|
|
4
|
+
import { IconButton as N } from "../icon-button/IconButton.js";
|
|
5
|
+
import '../../styles/Tabs.css';const p = "_underline_udv7v_50", n = {
|
|
6
6
|
"tab-container": "_tab-container_udv7v_23",
|
|
7
7
|
"tab-container-button": "_tab-container-button_udv7v_27",
|
|
8
8
|
"tab-container-icon": "_tab-container-icon_udv7v_32",
|
|
@@ -10,59 +10,61 @@ import '../../styles/Tabs.css';const N = "_underline_udv7v_50", n = {
|
|
|
10
10
|
"tab-items": "_tab-items_udv7v_35",
|
|
11
11
|
"tab-items-button": "_tab-items-button_udv7v_39",
|
|
12
12
|
"selected-button": "_selected-button_udv7v_44",
|
|
13
|
-
underline:
|
|
13
|
+
underline: p,
|
|
14
14
|
"flexHorizontal-center": "_flexHorizontal-center_udv7v_58",
|
|
15
15
|
"flexHorizontal-left": "_flexHorizontal-left_udv7v_64",
|
|
16
16
|
"flexHorizontal-right": "_flexHorizontal-right_udv7v_70"
|
|
17
|
-
},
|
|
18
|
-
const [l,
|
|
19
|
-
|
|
17
|
+
}, y = ({ listItems: c, type: o, onTabSelect: v, defaultActiveTab: a = 0, position: m = "left" }) => {
|
|
18
|
+
const [l, b] = f(a), [x, h] = f({}), i = u(null), g = u(null), _ = u(new Array(c.length).fill(null)), d = (t) => {
|
|
19
|
+
b(t), v(c[t]);
|
|
20
20
|
}, z = (t) => {
|
|
21
|
-
if (
|
|
22
|
-
const e = t.getBoundingClientRect(),
|
|
21
|
+
if (i.current && t) {
|
|
22
|
+
const e = t.getBoundingClientRect(), s = i.current.getBoundingClientRect();
|
|
23
23
|
h({
|
|
24
|
-
left: `${e.left -
|
|
24
|
+
left: `${e.left - s.left}px`,
|
|
25
25
|
width: `${e.width}px`
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
28
|
}, R = [
|
|
29
|
-
n[`flexHorizontal-${
|
|
29
|
+
n[`flexHorizontal-${m}`],
|
|
30
30
|
o === "button" ? n["tab-items-button"] : n["tab-items"]
|
|
31
31
|
].filter(Boolean).join(" ");
|
|
32
32
|
return C(() => {
|
|
33
|
-
const t =
|
|
33
|
+
const t = _.current[l];
|
|
34
34
|
t && z(t);
|
|
35
|
-
}, [l]),
|
|
36
|
-
|
|
35
|
+
}, [l]), $(() => {
|
|
36
|
+
b(a);
|
|
37
|
+
}, [a]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: i, children: [
|
|
38
|
+
/* @__PURE__ */ r("div", { className: R, children: c.map((t, e) => /* @__PURE__ */ r(
|
|
37
39
|
"div",
|
|
38
40
|
{
|
|
39
|
-
ref: (
|
|
41
|
+
ref: (s) => _.current[e] = s,
|
|
40
42
|
className: o === "button" && e === l ? n["selected-button"] : "",
|
|
41
|
-
children: o === "icon" ? /* @__PURE__ */
|
|
42
|
-
|
|
43
|
+
children: o === "icon" ? /* @__PURE__ */ r(
|
|
44
|
+
N,
|
|
43
45
|
{
|
|
44
46
|
mode: "icon",
|
|
45
47
|
size: "s",
|
|
46
48
|
selected: e === l,
|
|
47
|
-
onClick: () =>
|
|
49
|
+
onClick: () => d(e),
|
|
48
50
|
children: t
|
|
49
51
|
}
|
|
50
|
-
) : /* @__PURE__ */
|
|
51
|
-
|
|
52
|
+
) : /* @__PURE__ */ r(
|
|
53
|
+
B,
|
|
52
54
|
{
|
|
53
55
|
size: "s",
|
|
54
56
|
label: t,
|
|
55
57
|
mode: o === "text" ? "text" : "ghost",
|
|
56
58
|
selected: e === l,
|
|
57
|
-
onClick: () =>
|
|
59
|
+
onClick: () => d(e)
|
|
58
60
|
}
|
|
59
61
|
)
|
|
60
62
|
},
|
|
61
63
|
e
|
|
62
64
|
)) }),
|
|
63
|
-
o !== "button" && /* @__PURE__ */
|
|
65
|
+
o !== "button" && /* @__PURE__ */ r("div", { ref: g, className: n.underline, style: x })
|
|
64
66
|
] });
|
|
65
67
|
};
|
|
66
68
|
export {
|
|
67
|
-
|
|
69
|
+
y as Tabs
|
|
68
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_avh0n_6{border-radius:.375rem;width:100%;overflow-y:auto;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:.625rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.
|
|
1
|
+
@charset "UTF-8";._accordionHeader_e4xbv_7{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-radius:.375rem;gap:.375rem}._title_e4xbv_16{flex-grow:1;text-align:left}._accordionContent_e4xbv_21{border-radius:0 0 .375rem .375rem;padding:0 .75rem .75rem}._fullHeight_e4xbv_26{height:100%}._block_e4xbv_30{border:1px solid var(--general-border-window);box-shadow:0 4px 5px 0 var(--shadow-color-minimal);background:var(--background-primary);border-radius:.375rem}._tile_e4xbv_38 ._accordionHeader_e4xbv_7{border-radius:.375rem;margin-bottom:.375rem;border:1px solid var(--general-border-window);background:var(--background-primary)}._tile_e4xbv_38 ._accordionContent_e4xbv_21{border-radius:.375rem;box-shadow:0 2px 4px #0000001a}
|