@situaction/traq-ui-ste 1.1.19 → 1.1.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/accordion/Accordion.d.ts +4 -2
- package/dist/components/accordion/Accordion.js +20 -22
- package/dist/components/accordion/item/AccordionItem.js +9 -9
- package/dist/components/buttonControledScroll/ButtonControlledScroll.js +17 -17
- package/dist/styles/ButtonControlledScroll.css +1 -1
- package/package.json +1 -1
|
@@ -12,13 +12,15 @@ export interface AccordionProps {
|
|
|
12
12
|
defaultOpen?: boolean;
|
|
13
13
|
/** The content displayed when the accordion item is expanded. */
|
|
14
14
|
content: ReactNode;
|
|
15
|
+
/** ID accordions items*/
|
|
16
|
+
id: string;
|
|
17
|
+
/** Function to handle click on the header */
|
|
18
|
+
onClickHeader?: (id: string) => void;
|
|
15
19
|
}[];
|
|
16
20
|
/** Accordion style if block type the header and the content are in the same block, if it is tile they are separated into 2 blocks */
|
|
17
21
|
type?: 'block' | 'tile';
|
|
18
22
|
/** Padding size inside the Accordion: small, medium, large */
|
|
19
23
|
paddingHeader?: Size;
|
|
20
|
-
/** Function to handle click on the header */
|
|
21
|
-
onClickHeader?: (index: number) => void;
|
|
22
24
|
}
|
|
23
25
|
/**
|
|
24
26
|
* Accordion component that displays a list of AccordionItem components.
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { AccordionItem as
|
|
3
|
-
import '../../styles/Accordion.css';const
|
|
4
|
-
accordion:
|
|
5
|
-
},
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
paddingHeader: d ?? "m",
|
|
17
|
-
onClickHeader: () => i(n),
|
|
18
|
-
children: o.content
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { AccordionItem as i } from "./item/AccordionItem.js";
|
|
3
|
+
import '../../styles/Accordion.css';const l = "_accordion_hz3a1_6", s = {
|
|
4
|
+
accordion: l
|
|
5
|
+
}, h = ({ items: r, type: d = "block", paddingHeader: a }) => /* @__PURE__ */ n("div", { className: s.accordion, children: r.map((o, e) => /* @__PURE__ */ n(
|
|
6
|
+
i,
|
|
7
|
+
{
|
|
8
|
+
header: o.header,
|
|
9
|
+
iconPosition: o.iconPosition ?? "right",
|
|
10
|
+
defaultOpen: o.defaultOpen ?? !1,
|
|
11
|
+
type: d ?? "block",
|
|
12
|
+
paddingHeader: a ?? "m",
|
|
13
|
+
onClickHeader: () => {
|
|
14
|
+
var c;
|
|
15
|
+
return (c = o.onClickHeader) == null ? void 0 : c.call(o, o.id);
|
|
19
16
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
children: o.content
|
|
18
|
+
},
|
|
19
|
+
e
|
|
20
|
+
)) });
|
|
23
21
|
export {
|
|
24
|
-
|
|
22
|
+
h as Accordion
|
|
25
23
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as c, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { useState as p, useEffect as m } from "react";
|
|
3
|
-
import { IconButton as
|
|
3
|
+
import { IconButton as n } from "../../icon-button/IconButton.js";
|
|
4
4
|
import '../../../styles/AccordionItem.css';const u = "_accordionHeader_1tsuj_7", f = "_title_1tsuj_31", v = "_fullHeight_1tsuj_36", x = "_block_1tsuj_40", j = "_tile_1tsuj_48", l = {
|
|
5
5
|
accordionHeader: u,
|
|
6
6
|
"padding-s": "_padding-s_1tsuj_15",
|
|
@@ -12,11 +12,11 @@ import '../../../styles/AccordionItem.css';const u = "_accordionHeader_1tsuj_7",
|
|
|
12
12
|
block: x,
|
|
13
13
|
tile: j
|
|
14
14
|
}, H = ({
|
|
15
|
-
header:
|
|
15
|
+
header: r,
|
|
16
16
|
children: g,
|
|
17
17
|
iconPosition: d = "right",
|
|
18
18
|
defaultOpen: s = !1,
|
|
19
|
-
type:
|
|
19
|
+
type: h = "block",
|
|
20
20
|
paddingHeader: _ = "m",
|
|
21
21
|
onClickHeader: e
|
|
22
22
|
}) => {
|
|
@@ -31,10 +31,10 @@ import '../../../styles/AccordionItem.css';const u = "_accordionHeader_1tsuj_7",
|
|
|
31
31
|
}
|
|
32
32
|
e == null || e();
|
|
33
33
|
};
|
|
34
|
-
return /* @__PURE__ */
|
|
35
|
-
/* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ c("div", { className: `${h === "tile" ? l.tile : l.block}`, children: [
|
|
35
|
+
/* @__PURE__ */ c("div", { className: `${l.accordionHeader} ${l[`padding-${_}`]}`, onClick: w, "data-ignore-outside-click": !0, children: [
|
|
36
36
|
d === "left" && /* @__PURE__ */ t(
|
|
37
|
-
|
|
37
|
+
n,
|
|
38
38
|
{
|
|
39
39
|
mode: "ghost",
|
|
40
40
|
size: "s",
|
|
@@ -42,9 +42,9 @@ import '../../../styles/AccordionItem.css';const u = "_accordionHeader_1tsuj_7",
|
|
|
42
42
|
children: i ? /* @__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" }) })
|
|
43
43
|
}
|
|
44
44
|
),
|
|
45
|
-
/* @__PURE__ */ t("div", { className: l.title, children:
|
|
45
|
+
/* @__PURE__ */ t("div", { className: l.title, children: r }),
|
|
46
46
|
d === "right" && /* @__PURE__ */ t(
|
|
47
|
-
|
|
47
|
+
n,
|
|
48
48
|
{
|
|
49
49
|
mode: "ghost",
|
|
50
50
|
size: "s",
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import { jsxs as D, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as a, useState as h, useEffect as k } from "react";
|
|
3
|
-
import '../../styles/ButtonControlledScroll.css';const
|
|
4
|
-
wrapper:
|
|
5
|
-
container:
|
|
6
|
-
btn:
|
|
7
|
-
grab:
|
|
8
|
-
grabbing:
|
|
9
|
-
btnLeft:
|
|
10
|
-
btnRight:
|
|
11
|
-
},
|
|
12
|
-
const
|
|
3
|
+
import '../../styles/ButtonControlledScroll.css';const y = "_wrapper_lqv42_6", E = "_container_lqv42_18", T = "_btn_lqv42_27", U = "_grab_lqv42_47", X = "_grabbing_lqv42_51", j = "_btnLeft_lqv42_57", B = "_btnRight_lqv42_62", n = {
|
|
4
|
+
wrapper: y,
|
|
5
|
+
container: E,
|
|
6
|
+
btn: T,
|
|
7
|
+
grab: U,
|
|
8
|
+
grabbing: X,
|
|
9
|
+
btnLeft: j,
|
|
10
|
+
btnRight: B
|
|
11
|
+
}, A = ({ gap: v = 10, items: i, iconLeft: L, iconRight: b, scrollAmount: m = 150, grabSpeed: M = 1.5, grabbable: o = !0 }) => {
|
|
12
|
+
const u = m, r = a(null), [S, R] = h(!1), [x, $] = h(!1), s = a(!1), f = a(0), d = a(0), q = (t) => {
|
|
13
13
|
if (o) {
|
|
14
14
|
const e = r.current;
|
|
15
15
|
if (!e) return;
|
|
16
|
-
s.current = !0,
|
|
16
|
+
s.current = !0, f.current = t.pageX - e.offsetLeft, d.current = e.scrollLeft, e.classList.add(n.grabbing);
|
|
17
17
|
}
|
|
18
18
|
}, w = (t) => {
|
|
19
19
|
if (o) {
|
|
20
20
|
const e = r.current;
|
|
21
21
|
if (!e || !s.current) return;
|
|
22
22
|
t.preventDefault();
|
|
23
|
-
const N = (t.pageX - e.offsetLeft -
|
|
23
|
+
const N = (t.pageX - e.offsetLeft - f.current) * M;
|
|
24
24
|
e.scrollLeft = d.current + N;
|
|
25
25
|
}
|
|
26
26
|
}, g = () => {
|
|
@@ -32,11 +32,11 @@ import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_1favy_6", T
|
|
|
32
32
|
s.current && o && g();
|
|
33
33
|
}, p = () => {
|
|
34
34
|
const t = r.current;
|
|
35
|
-
t && (
|
|
35
|
+
t && (R(t.scrollLeft > 0), $(t.scrollLeft + t.clientWidth < t.scrollWidth));
|
|
36
36
|
}, _ = (t) => {
|
|
37
37
|
const e = r.current;
|
|
38
38
|
if (!e) return;
|
|
39
|
-
const c = t === "left" ? -
|
|
39
|
+
const c = t === "left" ? -u : u;
|
|
40
40
|
e.scrollBy({ left: c, behavior: "smooth" });
|
|
41
41
|
};
|
|
42
42
|
return k(() => {
|
|
@@ -52,10 +52,10 @@ import '../../styles/ButtonControlledScroll.css';const E = "_wrapper_1favy_6", T
|
|
|
52
52
|
};
|
|
53
53
|
}, [i]), /* @__PURE__ */ D("div", { className: `${n.wrapper}`, children: [
|
|
54
54
|
S && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft} padding-xs-5`, onClick: () => _("left"), children: L }),
|
|
55
|
-
/* @__PURE__ */ l("div", { onMouseDown:
|
|
56
|
-
|
|
55
|
+
/* @__PURE__ */ l("div", { onMouseDown: q, onMouseLeave: C, onMouseMove: w, onMouseUp: g, className: `${n.container} ${o && n.grab}`, style: { gap: `${v}px` }, ref: r, children: i.map((t, e) => /* @__PURE__ */ l("div", { className: n.item, children: t }, e)) }),
|
|
56
|
+
x && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight} padding-xs-5`, onClick: () => _("right"), children: b })
|
|
57
57
|
] });
|
|
58
58
|
};
|
|
59
59
|
export {
|
|
60
|
-
|
|
60
|
+
A as ButtonControlledScroll
|
|
61
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_lqv42_6{position:relative;display:flex;align-items:center;width:100%;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}._wrapper_lqv42_6 label{-webkit-user-select:none;user-select:none}._wrapper_lqv42_6 ._container_lqv42_18{display:flex;overflow-x:auto;width:100%;scroll-behavior:smooth}._wrapper_lqv42_6 ._container_lqv42_18::-webkit-scrollbar{display:none}._wrapper_lqv42_6 ._btn_lqv42_27{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:.375rem;border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--background-primary);position:absolute;cursor:pointer}._wrapper_lqv42_6 ._btn_lqv42_27 *{fill:var(--button-secondary-default-text)}._wrapper_lqv42_6 ._btn_lqv42_27 *{z-index:2}._wrapper_lqv42_6 ._grab_lqv42_47{cursor:grab;scroll-behavior:initial}._wrapper_lqv42_6 ._grabbing_lqv42_51{cursor:grabbing}._wrapper_lqv42_6 ._btn_lqv42_27:hover{background-color:var(--background-tooltip)}._wrapper_lqv42_6 ._btnLeft_lqv42_57{left:0;top:50%;transform:translateY(-50%)}._wrapper_lqv42_6 ._btnRight_lqv42_62{right:0;top:50%;transform:translateY(-50%)}
|