@pismo/marola 1.0.0-beta.32 → 1.0.0-beta.33
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/Table.css +1 -1
- package/dist/components/Table/Table.js +90 -105
- package/package.json +1 -1
package/dist/assets/Table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._table_yerpo_1{color:var(--secondary-orange);border-spacing:0}._table--fixed_yerpo_5{table-layout:fixed}._table--full-width_yerpo_8{width:100%}._table--white-theme_yerpo_11{background:var(--white-100)}._table--transparent-theme_yerpo_14{background:transparent}._table_yerpo_1 th._cell--left-alignment_yerpo_17,._table_yerpo_1 td._cell--left-alignment_yerpo_17{text-align:left}._table_yerpo_1 th._cell--center-alignment_yerpo_21,._table_yerpo_1 td._cell--center-alignment_yerpo_21{text-align:center}._table_yerpo_1 th._cell--right-alignment_yerpo_25,._table_yerpo_1 td._cell--right-alignment_yerpo_25{text-align:right}._table_yerpo_1 thead{font-size:.75rem;font-weight:900;line-height:1rem;color:var(--gray-90);text-transform:uppercase}._table_yerpo_1 thead tr th{align-items:center;height:4rem;padding:0 1rem;line-height:1rem;border-bottom:.0625rem solid var(--gray-25)}._table_yerpo_1 thead tr th ._th__wrapper_yerpo_43>span,._table_yerpo_1 thead tr th ._th__wrapper_yerpo_43 span+span{display:inline-flex;align-items:center}._table_yerpo_1 thead tr th ._th__wrapper--pressed_yerpo_48{padding:.25rem .5rem;margin:0 -.5rem;background-color:var(--gray-10);border-radius:.375rem}._table_yerpo_1 thead tr th ._th__wrapper--clickable_yerpo_54{cursor:pointer}._table_yerpo_1 thead tr th ._th__wrapper_yerpo_43 ._th__sort-icon-container_yerpo_57{padding-left:.25rem}._table_yerpo_1 tbody{font-size:1rem;font-weight:400;line-height:1.3125rem;color:var(--gray-90)}._table_yerpo_1 tbody tr:hover:not(._tr__row-or-cell--disabled_yerpo_66){background-color:rgb(var(--gray-5-rgb),.5)}._table_yerpo_1 tbody ._tr_yerpo_66,._table_yerpo_1 tbody ._td_yerpo_70{height:3.5rem;padding:0 1rem;line-height:var(--body-line-height);border-bottom:.0625rem solid var(--gray-10)}._table_yerpo_1 tbody ._tr__row-or-cell--clickable_yerpo_76,._table_yerpo_1 tbody ._td__row-or-cell--clickable_yerpo_77{cursor:pointer}._table_yerpo_1 tbody ._tr__row-or-cell--disabled_yerpo_66,._table_yerpo_1 tbody ._td__row-or-cell--disabled_yerpo_81{background:var(--cream);filter:grayscale(1)}._table_yerpo_1 tbody ._tr__row-or-cell--disabled_yerpo_66 ._td-wrapper_yerpo_85,._table_yerpo_1 tbody ._td__row-or-cell--disabled_yerpo_81 ._td-wrapper_yerpo_85{opacity:.25}
|
|
@@ -1,54 +1,39 @@
|
|
|
1
1
|
import '../../assets/Table.css';
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import * as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { c as
|
|
6
|
-
import { paginationDefaultTranslations as
|
|
7
|
-
import { sortTooltipDefaultTranslations as
|
|
8
|
-
import { TableProvider as
|
|
9
|
-
const C = (
|
|
10
|
-
"u-typography-h1": "_u-typography-h1_1tnti_1",
|
|
11
|
-
"u-typography-h2": "_u-typography-h2_1tnti_8",
|
|
12
|
-
"u-typography-h3": "_u-typography-h3_1tnti_15",
|
|
13
|
-
"u-typography-h4": "_u-typography-h4_1tnti_22",
|
|
14
|
-
"u-typography-h5": "_u-typography-h5_1tnti_29",
|
|
15
|
-
"u-typography-h6": "_u-typography-h6_1tnti_36",
|
|
16
|
-
"u-typography-base": "_u-typography-base_1tnti_43",
|
|
2
|
+
import { jsxs as y, jsx as l } from "react/jsx-runtime";
|
|
3
|
+
import * as c from "react";
|
|
4
|
+
import { useState as f } from "react";
|
|
5
|
+
import { c as m } from "../../clsx-DB4S2d7J.js";
|
|
6
|
+
import { paginationDefaultTranslations as b, Pagination as u } from "../Pagination/Pagination.js";
|
|
7
|
+
import { sortTooltipDefaultTranslations as T, SortTooltip as g } from "../SortTooltip/SortTooltip.js";
|
|
8
|
+
import { TableProvider as N, useTable as x } from "./TableContext.js";
|
|
9
|
+
const C = (r) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ c.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ c.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ c.createElement("rect", { width: 7, height: 10, fill: "white" })))), L = "_table_yerpo_1", E = "_th__wrapper_yerpo_43", v = "_tr_yerpo_66", B = "_td_yerpo_70", t = {
|
|
17
10
|
table: L,
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1tnti_74",
|
|
26
|
-
"table--fixed": "_table--fixed_1tnti_82",
|
|
27
|
-
"table--full-width": "_table--full-width_1tnti_85",
|
|
28
|
-
"table--white-theme": "_table--white-theme_1tnti_88",
|
|
29
|
-
"table--transparent-theme": "_table--transparent-theme_1tnti_91",
|
|
30
|
-
"cell--left-alignment": "_cell--left-alignment_1tnti_94",
|
|
31
|
-
"cell--center-alignment": "_cell--center-alignment_1tnti_98",
|
|
32
|
-
"cell--right-alignment": "_cell--right-alignment_1tnti_102",
|
|
11
|
+
"table--fixed": "_table--fixed_yerpo_5",
|
|
12
|
+
"table--full-width": "_table--full-width_yerpo_8",
|
|
13
|
+
"table--white-theme": "_table--white-theme_yerpo_11",
|
|
14
|
+
"table--transparent-theme": "_table--transparent-theme_yerpo_14",
|
|
15
|
+
"cell--left-alignment": "_cell--left-alignment_yerpo_17",
|
|
16
|
+
"cell--center-alignment": "_cell--center-alignment_yerpo_21",
|
|
17
|
+
"cell--right-alignment": "_cell--right-alignment_yerpo_25",
|
|
33
18
|
th__wrapper: E,
|
|
34
|
-
"th__wrapper--pressed": "_th__wrapper--
|
|
35
|
-
"th__wrapper--clickable": "_th__wrapper--
|
|
36
|
-
"th__sort-icon-container": "_th__sort-icon-
|
|
37
|
-
"tr__row-or-cell--disabled": "_tr__row-or-cell--
|
|
38
|
-
tr:
|
|
39
|
-
td:
|
|
40
|
-
"tr__row-or-cell--clickable": "_tr__row-or-cell--
|
|
41
|
-
"td__row-or-cell--clickable": "_td__row-or-cell--
|
|
42
|
-
"td__row-or-cell--disabled": "_td__row-or-cell--
|
|
43
|
-
"td-wrapper": "_td-
|
|
44
|
-
},
|
|
19
|
+
"th__wrapper--pressed": "_th__wrapper--pressed_yerpo_48",
|
|
20
|
+
"th__wrapper--clickable": "_th__wrapper--clickable_yerpo_54",
|
|
21
|
+
"th__sort-icon-container": "_th__sort-icon-container_yerpo_57",
|
|
22
|
+
"tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_yerpo_66",
|
|
23
|
+
tr: v,
|
|
24
|
+
td: B,
|
|
25
|
+
"tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_yerpo_76",
|
|
26
|
+
"td__row-or-cell--clickable": "_td__row-or-cell--clickable_yerpo_77",
|
|
27
|
+
"td__row-or-cell--disabled": "_td__row-or-cell--disabled_yerpo_81",
|
|
28
|
+
"td-wrapper": "_td-wrapper_yerpo_85"
|
|
29
|
+
}, H = {
|
|
45
30
|
pt: {
|
|
46
|
-
...
|
|
47
|
-
...
|
|
31
|
+
...b.pt,
|
|
32
|
+
...T.pt
|
|
48
33
|
},
|
|
49
34
|
en: {
|
|
50
|
-
...
|
|
51
|
-
...
|
|
35
|
+
...b.en,
|
|
36
|
+
...T.en
|
|
52
37
|
},
|
|
53
38
|
// example to add a new language translation
|
|
54
39
|
es: {
|
|
@@ -60,81 +45,81 @@ const C = (a) => /* @__PURE__ */ i.createElement("svg", { width: 7, height: 10,
|
|
|
60
45
|
of: "de",
|
|
61
46
|
results: "resultados"
|
|
62
47
|
}
|
|
63
|
-
},
|
|
64
|
-
children:
|
|
65
|
-
theme:
|
|
66
|
-
fullWidth:
|
|
48
|
+
}, o = ({
|
|
49
|
+
children: r,
|
|
50
|
+
theme: e = "white",
|
|
51
|
+
fullWidth: a = !0,
|
|
67
52
|
className: s,
|
|
68
|
-
paginationProps:
|
|
69
|
-
isFixed:
|
|
53
|
+
paginationProps: _,
|
|
54
|
+
isFixed: n,
|
|
70
55
|
language: p,
|
|
71
|
-
translations:
|
|
72
|
-
...
|
|
56
|
+
translations: w,
|
|
57
|
+
...i
|
|
73
58
|
}) => {
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
59
|
+
const d = m(
|
|
60
|
+
t.table,
|
|
61
|
+
a && t["table--full-width"],
|
|
62
|
+
n && t["table--fixed"],
|
|
63
|
+
t[`table--${e}-theme`],
|
|
79
64
|
s
|
|
80
|
-
),
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
|
|
65
|
+
), h = p && H[p] || w;
|
|
66
|
+
return /* @__PURE__ */ y(N, { initialTranslations: h, children: [
|
|
67
|
+
/* @__PURE__ */ l("table", { ...i, className: d, children: r }),
|
|
68
|
+
_ && /* @__PURE__ */ l(u, { ..._, t: h })
|
|
84
69
|
] });
|
|
85
|
-
},
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
70
|
+
}, P = ({ children: r, ...e }) => /* @__PURE__ */ l("thead", { ...e, children: r }), D = ({ children: r, ...e }) => /* @__PURE__ */ l("tbody", { ...e, children: r }), M = ({ children: r, onClick: e, disabled: a, className: s, ..._ }) => {
|
|
71
|
+
const n = m(
|
|
72
|
+
t.tr,
|
|
73
|
+
e && !a ? t["tr__row-or-cell--clickable"] : a ? t["tr__row-or-cell--disabled"] : "",
|
|
89
74
|
s
|
|
90
75
|
);
|
|
91
|
-
return /* @__PURE__ */
|
|
92
|
-
},
|
|
93
|
-
const p =
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
76
|
+
return /* @__PURE__ */ l("tr", { ..._, className: n, onClick: () => !a && (e == null ? void 0 : e()), children: r });
|
|
77
|
+
}, O = ({ children: r, onClick: e, disabled: a, className: s, align: _ = "left", ...n }) => {
|
|
78
|
+
const p = m(
|
|
79
|
+
t.td,
|
|
80
|
+
e && !a ? t["td__row-or-cell--clickable"] : a ? t["td__row-or-cell--disabled"] : "",
|
|
81
|
+
t[`cell--${_}-alignment`],
|
|
97
82
|
s
|
|
98
83
|
);
|
|
99
|
-
return /* @__PURE__ */
|
|
100
|
-
},
|
|
101
|
-
const { translations:
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
84
|
+
return /* @__PURE__ */ l("td", { ...n, className: p, onClick: () => !a && (e == null ? void 0 : e()), children: /* @__PURE__ */ l("span", { className: t["td-wrapper"], children: r }) });
|
|
85
|
+
}, $ = ({ children: r, onSort: e, sortType: a, className: s, classNameTooltip: _, align: n = "left", ...p }) => {
|
|
86
|
+
const { translations: w } = x(), [i, d] = f(!1), h = m(
|
|
87
|
+
t.th__wrapper,
|
|
88
|
+
i ? t["th__wrapper--pressed"] : "",
|
|
89
|
+
e ? t["th__wrapper--clickable"] : "",
|
|
105
90
|
s
|
|
106
91
|
);
|
|
107
|
-
return /* @__PURE__ */
|
|
108
|
-
|
|
92
|
+
return /* @__PURE__ */ l("th", { ...p, className: t[`cell--${n}-alignment`], children: /* @__PURE__ */ l("span", { className: h, onClick: e && (() => d(!i)), children: e ? /* @__PURE__ */ y(
|
|
93
|
+
g,
|
|
109
94
|
{
|
|
110
|
-
onClose: () =>
|
|
111
|
-
onSort:
|
|
112
|
-
show:
|
|
113
|
-
sortType:
|
|
114
|
-
className:
|
|
115
|
-
t:
|
|
95
|
+
onClose: () => d(!1),
|
|
96
|
+
onSort: e,
|
|
97
|
+
show: i,
|
|
98
|
+
sortType: a,
|
|
99
|
+
className: _,
|
|
100
|
+
t: w,
|
|
116
101
|
children: [
|
|
117
|
-
/* @__PURE__ */
|
|
118
|
-
/* @__PURE__ */
|
|
102
|
+
/* @__PURE__ */ l("span", { children: r }),
|
|
103
|
+
/* @__PURE__ */ l("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ l(C, { width: 12, height: 12 }) })
|
|
119
104
|
]
|
|
120
105
|
}
|
|
121
|
-
) : /* @__PURE__ */
|
|
106
|
+
) : /* @__PURE__ */ l("span", { children: r }) }) });
|
|
122
107
|
};
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
108
|
+
o.THead = P;
|
|
109
|
+
o.THead.displayName = "Table.THead";
|
|
110
|
+
o.TBody = D;
|
|
111
|
+
o.TBody.displayName = "Table.TBody";
|
|
112
|
+
o.Tr = M;
|
|
113
|
+
o.Tr.displayName = "Table.Tr";
|
|
114
|
+
o.Td = O;
|
|
115
|
+
o.Td.displayName = "Table.Td";
|
|
116
|
+
o.Th = $;
|
|
117
|
+
o.Th.displayName = "Table.Th";
|
|
133
118
|
export {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
119
|
+
D as TBody,
|
|
120
|
+
P as THead,
|
|
121
|
+
o as Table,
|
|
122
|
+
O as Td,
|
|
123
|
+
$ as Th,
|
|
124
|
+
M as Tr
|
|
140
125
|
};
|