@panneau/lists 5.0.0-alpha.10 → 5.0.0-alpha.11
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/actions/ActionButton.d.ts.map +1 -1
- package/dist/actions/ActionButton.js +54 -52
- package/dist/actions/ActionButton.js.map +1 -1
- package/dist/actions/Actions.css +4 -38
- package/dist/actions/Actions.module.js +1 -5
- package/dist/actions/Actions.module.js.map +1 -1
- package/dist/layouts/TableLayout.css +9 -0
- package/dist/layouts/TableLayout.module.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/actions/ActionButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/actions/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,iGAAiG;IACjG,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,IAAW,EACX,YAAY,EAAE,SAAS,GAC1B,EAAE,iBAAiB,+BAiCnB"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import Actions_module_default from "./Actions.module.js";
|
|
2
1
|
import { getActionIcon } from "./icons.js";
|
|
3
|
-
import { cx } from "../cx.js";
|
|
4
2
|
import { c } from "react/compiler-runtime";
|
|
5
3
|
import { getActionLabel } from "@panneau/intl";
|
|
6
|
-
import { Button,
|
|
7
|
-
import { jsx
|
|
8
|
-
import { Link } from "react-aria-components";
|
|
4
|
+
import { Button, LinkButton, usePanneauIntl } from "@panneau/ui";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
6
|
//#region src/actions/ActionButton.tsx
|
|
7
|
+
/** Whether a link leaves the admin: it opens in a new tab. */
|
|
8
|
+
function isExternal(href) {
|
|
9
|
+
return /^https?:\/\//.test(href);
|
|
10
|
+
}
|
|
10
11
|
/** An action as a button, or as a link for a `link` action with a URL. */
|
|
11
12
|
function ActionButton(t0) {
|
|
12
|
-
const $ = c(
|
|
13
|
+
const $ = c(29);
|
|
13
14
|
const { action, icons, href, onPress, isPending: t1, isDisabled: t2, size: t3, "aria-label": ariaLabel } = t0;
|
|
14
15
|
const isPending = t1 === void 0 ? false : t1;
|
|
15
16
|
const isDisabled = t2 === void 0 ? false : t2;
|
|
@@ -31,70 +32,71 @@ function ActionButton(t0) {
|
|
|
31
32
|
$[5] = t5;
|
|
32
33
|
} else t5 = $[5];
|
|
33
34
|
const label = t5;
|
|
35
|
+
const variant = action.destructive === true ? "danger" : size === "sm" ? "ghost" : "secondary";
|
|
34
36
|
if (href !== null) {
|
|
35
|
-
|
|
37
|
+
let t6;
|
|
38
|
+
if ($[6] !== icon) {
|
|
39
|
+
t6 = icon !== void 0 ? { icon } : {};
|
|
40
|
+
$[6] = icon;
|
|
41
|
+
$[7] = t6;
|
|
42
|
+
} else t6 = $[7];
|
|
36
43
|
let t7;
|
|
37
|
-
if ($[
|
|
38
|
-
t7 =
|
|
39
|
-
$[
|
|
40
|
-
$[
|
|
41
|
-
} else t7 = $[
|
|
44
|
+
if ($[8] !== href) {
|
|
45
|
+
t7 = isExternal(href);
|
|
46
|
+
$[8] = href;
|
|
47
|
+
$[9] = t7;
|
|
48
|
+
} else t7 = $[9];
|
|
42
49
|
let t8;
|
|
43
|
-
if ($[
|
|
44
|
-
t8 =
|
|
45
|
-
icon,
|
|
46
|
-
size: "sm"
|
|
47
|
-
}) : null;
|
|
48
|
-
$[8] = icon;
|
|
49
|
-
$[9] = t8;
|
|
50
|
-
} else t8 = $[9];
|
|
51
|
-
let t9;
|
|
52
|
-
if ($[10] !== ariaLabel || $[11] !== href || $[12] !== label || $[13] !== t7 || $[14] !== t8) {
|
|
53
|
-
t9 = /* @__PURE__ */ jsxs(Link, {
|
|
50
|
+
if ($[10] !== ariaLabel || $[11] !== href || $[12] !== label || $[13] !== size || $[14] !== t6 || $[15] !== t7 || $[16] !== variant) {
|
|
51
|
+
t8 = /* @__PURE__ */ jsx(LinkButton, {
|
|
54
52
|
href,
|
|
53
|
+
size,
|
|
54
|
+
variant,
|
|
55
|
+
...t6,
|
|
56
|
+
external: t7,
|
|
55
57
|
"aria-label": ariaLabel,
|
|
56
|
-
|
|
57
|
-
children: [t8, label]
|
|
58
|
+
children: label
|
|
58
59
|
});
|
|
59
60
|
$[10] = ariaLabel;
|
|
60
61
|
$[11] = href;
|
|
61
62
|
$[12] = label;
|
|
62
|
-
$[13] =
|
|
63
|
-
$[14] =
|
|
64
|
-
$[15] =
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
$[13] = size;
|
|
64
|
+
$[14] = t6;
|
|
65
|
+
$[15] = t7;
|
|
66
|
+
$[16] = variant;
|
|
67
|
+
$[17] = t8;
|
|
68
|
+
} else t8 = $[17];
|
|
69
|
+
return t8;
|
|
67
70
|
}
|
|
68
|
-
|
|
71
|
+
let t6;
|
|
72
|
+
if ($[18] !== icon) {
|
|
73
|
+
t6 = icon !== void 0 ? { icon } : {};
|
|
74
|
+
$[18] = icon;
|
|
75
|
+
$[19] = t6;
|
|
76
|
+
} else t6 = $[19];
|
|
69
77
|
let t7;
|
|
70
|
-
if ($[
|
|
71
|
-
t7 =
|
|
72
|
-
$[16] = icon;
|
|
73
|
-
$[17] = t7;
|
|
74
|
-
} else t7 = $[17];
|
|
75
|
-
let t8;
|
|
76
|
-
if ($[18] !== ariaLabel || $[19] !== isDisabled || $[20] !== isPending || $[21] !== label || $[22] !== onPress || $[23] !== size || $[24] !== t6 || $[25] !== t7) {
|
|
77
|
-
t8 = /* @__PURE__ */ jsx(Button, {
|
|
78
|
+
if ($[20] !== ariaLabel || $[21] !== isDisabled || $[22] !== isPending || $[23] !== label || $[24] !== onPress || $[25] !== size || $[26] !== t6 || $[27] !== variant) {
|
|
79
|
+
t7 = /* @__PURE__ */ jsx(Button, {
|
|
78
80
|
size,
|
|
79
|
-
variant
|
|
80
|
-
...
|
|
81
|
+
variant,
|
|
82
|
+
...t6,
|
|
81
83
|
isPending,
|
|
82
84
|
isDisabled,
|
|
83
85
|
"aria-label": ariaLabel,
|
|
84
86
|
onPress,
|
|
85
87
|
children: label
|
|
86
88
|
});
|
|
87
|
-
$[
|
|
88
|
-
$[
|
|
89
|
-
$[
|
|
90
|
-
$[
|
|
91
|
-
$[
|
|
92
|
-
$[
|
|
93
|
-
$[
|
|
94
|
-
$[
|
|
95
|
-
$[
|
|
96
|
-
} else
|
|
97
|
-
return
|
|
89
|
+
$[20] = ariaLabel;
|
|
90
|
+
$[21] = isDisabled;
|
|
91
|
+
$[22] = isPending;
|
|
92
|
+
$[23] = label;
|
|
93
|
+
$[24] = onPress;
|
|
94
|
+
$[25] = size;
|
|
95
|
+
$[26] = t6;
|
|
96
|
+
$[27] = variant;
|
|
97
|
+
$[28] = t7;
|
|
98
|
+
} else t7 = $[28];
|
|
99
|
+
return t7;
|
|
98
100
|
}
|
|
99
101
|
//#endregion
|
|
100
102
|
export { ActionButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","names":["
|
|
1
|
+
{"version":3,"file":"ActionButton.js","names":["getActionLabel","Action","Button","LinkButton","usePanneauIntl","ActionIcons","getActionIcon","ActionButtonProps","action","icons","href","onPress","isPending","isDisabled","size","isExternal","test","ActionButton","t0","$","_c","t1","t2","t3","ariaLabel","undefined","intl","t4","icon","t5","label","variant","destructive","t6","t7","t8","_c"],"sources":["../../src/actions/ActionButton.tsx"],"sourcesContent":["import { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { Button, LinkButton, usePanneauIntl } from '@panneau/ui';\n\nimport { type ActionIcons, getActionIcon } from './icons';\n\nexport interface ActionButtonProps {\n action: Action;\n /** Icons of actions by id, over the icon the action names. */\n icons?: ActionIcons | undefined;\n /** The link of a `link` action. Links go through React Aria, so an app's router handles them. */\n href: string | null;\n onPress: () => void;\n isPending?: boolean;\n isDisabled?: boolean;\n size?: 'sm' | 'md';\n /** Accessible label, when the label alone isn't enough (`Edit Ada Lovelace`). */\n 'aria-label'?: string;\n}\n\n/** Whether a link leaves the admin: it opens in a new tab. */\nfunction isExternal(href: string): boolean {\n return /^https?:\\/\\//.test(href);\n}\n\n/** An action as a button, or as a link for a `link` action with a URL. */\nexport function ActionButton({\n action,\n icons,\n href,\n onPress,\n isPending = false,\n isDisabled = false,\n size = 'sm',\n 'aria-label': ariaLabel,\n}: ActionButtonProps) {\n const intl = usePanneauIntl();\n const icon = getActionIcon(action, icons);\n const label = getActionLabel(action, intl);\n // Small actions sit in rows, as ghost buttons; others beside the buttons of a toolbar.\n const variant = action.destructive === true ? 'danger' : size === 'sm' ? 'ghost' : 'secondary';\n if (href !== null) {\n return (\n <LinkButton\n href={href}\n size={size}\n variant={variant}\n {...(icon !== undefined ? { icon } : {})}\n external={isExternal(href)}\n aria-label={ariaLabel}\n >\n {label}\n </LinkButton>\n );\n }\n return (\n <Button\n size={size}\n variant={variant}\n {...(icon !== undefined ? { icon } : {})}\n isPending={isPending}\n isDisabled={isDisabled}\n aria-label={ariaLabel}\n onPress={onPress}\n >\n {label}\n </Button>\n );\n}\n"],"mappings":"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"}
|
package/dist/actions/Actions.css
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
/* The actions of a row wrap where they don't fit, in a narrow list or a card. */
|
|
1
2
|
.panneau-actions-row {
|
|
2
3
|
display: inline-flex;
|
|
3
|
-
flex-wrap:
|
|
4
|
+
flex-wrap: wrap;
|
|
5
|
+
max-width: 100%;
|
|
4
6
|
align-items: center;
|
|
5
|
-
|
|
6
|
-
gap: var(--panneau-space-1);
|
|
7
|
+
gap: var(--panneau-space-2);
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
.panneau-actions-toolbar {
|
|
@@ -13,41 +14,6 @@
|
|
|
13
14
|
gap: var(--panneau-space-2);
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
/* A link that looks like a small ghost button (link actions: show, edit). */
|
|
17
|
-
.panneau-actions-link {
|
|
18
|
-
display: inline-flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
gap: var(--panneau-space-1);
|
|
21
|
-
height: var(--panneau-control-height-sm);
|
|
22
|
-
padding: 0 var(--panneau-space-2);
|
|
23
|
-
font-size: var(--panneau-font-size-sm);
|
|
24
|
-
font-weight: var(--panneau-font-weight-medium);
|
|
25
|
-
color: var(--panneau-color-text);
|
|
26
|
-
text-decoration: none;
|
|
27
|
-
white-space: nowrap;
|
|
28
|
-
border-radius: var(--panneau-radius-md);
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.panneau-actions-link[data-hovered] {
|
|
33
|
-
background-color: var(--panneau-color-hover);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.panneau-actions-link[data-pressed] {
|
|
37
|
-
background-color: var(--panneau-color-pressed);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.panneau-actions-link[data-focus-visible] {
|
|
41
|
-
outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
|
|
42
|
-
outline-offset: 1px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.panneau-actions-link-md {
|
|
46
|
-
height: var(--panneau-control-height);
|
|
47
|
-
padding: 0 var(--panneau-space-3);
|
|
48
|
-
font-size: var(--panneau-font-size-control);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
17
|
.panneau-actions-message {
|
|
52
18
|
margin: 0;
|
|
53
19
|
}
|
|
@@ -2,19 +2,15 @@ import "./Actions.css";
|
|
|
2
2
|
//#region src/actions/Actions.module.css
|
|
3
3
|
var row = "panneau-actions-row";
|
|
4
4
|
var toolbar = "panneau-actions-toolbar";
|
|
5
|
-
var link = "panneau-actions-link";
|
|
6
|
-
var linkMd = "panneau-actions-link-md";
|
|
7
5
|
var message = "panneau-actions-message";
|
|
8
6
|
var skipped = "panneau-actions-skipped";
|
|
9
7
|
var Actions_module_default = {
|
|
10
8
|
row,
|
|
11
9
|
toolbar,
|
|
12
|
-
link,
|
|
13
|
-
linkMd,
|
|
14
10
|
message,
|
|
15
11
|
skipped
|
|
16
12
|
};
|
|
17
13
|
//#endregion
|
|
18
|
-
export { Actions_module_default as default,
|
|
14
|
+
export { Actions_module_default as default, message, row, skipped, toolbar };
|
|
19
15
|
|
|
20
16
|
//# sourceMappingURL=Actions.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.module.js","names":[],"sources":["../../src/actions/Actions.module.css"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Actions.module.js","names":[],"sources":["../../src/actions/Actions.module.css"],"sourcesContent":["/* The actions of a row wrap where they don't fit, in a narrow list or a card. */\n.row {\n display: inline-flex;\n flex-wrap: wrap;\n max-width: 100%;\n align-items: center;\n gap: var(--panneau-space-2);\n}\n\n.toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--panneau-space-2);\n}\n\n.message {\n margin: 0;\n}\n\n.skipped {\n margin: var(--panneau-space-2) 0 0;\n color: var(--panneau-color-warning);\n}\n"],"mappings":""}
|
|
@@ -68,6 +68,11 @@
|
|
|
68
68
|
white-space: nowrap;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
/* As narrow as the actions of the row on one line: they only wrap in a narrow list. */
|
|
72
|
+
.panneau-table-layout-table .panneau-table-layout-actions-cell > * {
|
|
73
|
+
flex-wrap: nowrap;
|
|
74
|
+
}
|
|
75
|
+
|
|
71
76
|
.panneau-table-layout-sort {
|
|
72
77
|
display: inline-flex;
|
|
73
78
|
align-items: center;
|
|
@@ -161,6 +166,10 @@
|
|
|
161
166
|
width: auto;
|
|
162
167
|
}
|
|
163
168
|
|
|
169
|
+
.panneau-table-layout-table td.panneau-table-layout-actions-cell > * {
|
|
170
|
+
flex-wrap: wrap;
|
|
171
|
+
}
|
|
172
|
+
|
|
164
173
|
.panneau-table-layout-table td.panneau-table-layout-check {
|
|
165
174
|
position: absolute;
|
|
166
175
|
top: var(--panneau-space-2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableLayout.module.js","names":[],"sources":["../../src/layouts/TableLayout.module.css"],"sourcesContent":[".scroller {\n overflow-x: auto;\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-lg);\n background-color: var(--panneau-color-surface);\n}\n\n.table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--panneau-font-size-md);\n}\n\n.table th,\n.table td {\n padding: var(--panneau-row-padding-y) var(--panneau-space-3);\n text-align: start;\n vertical-align: middle;\n border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.table th {\n font-size: var(--panneau-font-size-sm);\n font-weight: var(--panneau-font-weight-medium);\n color: var(--panneau-color-text-muted);\n white-space: nowrap;\n background-color: var(--panneau-color-surface-sunken);\n}\n\n/* The title stays readable in a narrow list, such as next to an item's details: the table\n * scrolls instead. */\n.table td.title {\n min-width: 12rem;\n}\n\n.table tbody tr:last-child td {\n border-bottom: 0;\n}\n\n.table tbody tr[data-selected] {\n background-color: var(--panneau-color-accent-subtle);\n}\n\n/* The item shown next to the list: a bar on its first cell. */\n.table tbody tr[data-current] td:first-child {\n box-shadow: inset 3px 0 0 var(--panneau-color-accent);\n}\n\n.table tbody tr[data-current] {\n background-color: var(--panneau-color-hover);\n}\n\n.center {\n text-align: center !important;\n}\n\n.end {\n text-align: end !important;\n}\n\n.check {\n width: 1px;\n}\n\n.actionsCell {\n width: 1px;\n text-align: end !important;\n white-space: nowrap;\n}\n\n.sort {\n display: inline-flex;\n align-items: center;\n gap: var(--panneau-space-1);\n margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));\n padding: var(--panneau-space-1) var(--panneau-space-2);\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n border-radius: var(--panneau-radius-sm);\n cursor: pointer;\n}\n\n.sort:hover {\n color: var(--panneau-color-text);\n background-color: var(--panneau-color-hover);\n}\n\n.sort:focus-visible {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 1px;\n}\n\n.sortIcon {\n opacity: 0.5;\n}\n\n.sorted .sortIcon {\n opacity: 1;\n}\n\n.cellLabel {\n display: none;\n}\n\n.visuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Narrow lists (phones): each row is a block, with the label of each value next to it. */\n@container panneau-list (max-width: 40rem) {\n .scroller {\n overflow: visible;\n background: none;\n border: 0;\n }\n\n /* The labels of the cells replace the headers, and the list's sort select their buttons. */\n .table thead {\n display: none;\n }\n\n .table,\n .table tbody,\n .table tr,\n .table td {\n display: block;\n }\n\n .table tbody {\n display: grid;\n gap: var(--panneau-space-2);\n }\n\n .table tr {\n position: relative;\n padding: var(--panneau-space-2) 0;\n background-color: var(--panneau-color-surface);\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-lg);\n }\n\n .table td {\n display: grid;\n grid-template-columns: minmax(5rem, 35%) 1fr;\n gap: var(--panneau-space-2);\n padding: var(--panneau-space-1) var(--panneau-space-3);\n text-align: start !important;\n border: 0;\n }\n\n .table td.check,\n .table td.actionsCell {\n display: flex;\n width: auto;\n }\n\n .table td.check {\n position: absolute;\n top: var(--panneau-space-2);\n inset-inline-end: var(--panneau-space-2);\n padding: 0;\n }\n\n .table td.actionsCell {\n justify-content: flex-start;\n flex-wrap: wrap;\n padding-top: var(--panneau-space-2);\n }\n\n .table td.title {\n display: block;\n min-width: 0;\n padding-inline-end: var(--panneau-space-10);\n font-weight: var(--panneau-font-weight-medium);\n }\n\n .table td.title .cellLabel {\n display: none;\n }\n\n .cellLabel {\n display: block;\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-text-muted);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"TableLayout.module.js","names":[],"sources":["../../src/layouts/TableLayout.module.css"],"sourcesContent":[".scroller {\n overflow-x: auto;\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-lg);\n background-color: var(--panneau-color-surface);\n}\n\n.table {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--panneau-font-size-md);\n}\n\n.table th,\n.table td {\n padding: var(--panneau-row-padding-y) var(--panneau-space-3);\n text-align: start;\n vertical-align: middle;\n border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.table th {\n font-size: var(--panneau-font-size-sm);\n font-weight: var(--panneau-font-weight-medium);\n color: var(--panneau-color-text-muted);\n white-space: nowrap;\n background-color: var(--panneau-color-surface-sunken);\n}\n\n/* The title stays readable in a narrow list, such as next to an item's details: the table\n * scrolls instead. */\n.table td.title {\n min-width: 12rem;\n}\n\n.table tbody tr:last-child td {\n border-bottom: 0;\n}\n\n.table tbody tr[data-selected] {\n background-color: var(--panneau-color-accent-subtle);\n}\n\n/* The item shown next to the list: a bar on its first cell. */\n.table tbody tr[data-current] td:first-child {\n box-shadow: inset 3px 0 0 var(--panneau-color-accent);\n}\n\n.table tbody tr[data-current] {\n background-color: var(--panneau-color-hover);\n}\n\n.center {\n text-align: center !important;\n}\n\n.end {\n text-align: end !important;\n}\n\n.check {\n width: 1px;\n}\n\n.actionsCell {\n width: 1px;\n text-align: end !important;\n white-space: nowrap;\n}\n\n/* As narrow as the actions of the row on one line: they only wrap in a narrow list. */\n.table .actionsCell > * {\n flex-wrap: nowrap;\n}\n\n.sort {\n display: inline-flex;\n align-items: center;\n gap: var(--panneau-space-1);\n margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2));\n padding: var(--panneau-space-1) var(--panneau-space-2);\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n border-radius: var(--panneau-radius-sm);\n cursor: pointer;\n}\n\n.sort:hover {\n color: var(--panneau-color-text);\n background-color: var(--panneau-color-hover);\n}\n\n.sort:focus-visible {\n outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n outline-offset: 1px;\n}\n\n.sortIcon {\n opacity: 0.5;\n}\n\n.sorted .sortIcon {\n opacity: 1;\n}\n\n.cellLabel {\n display: none;\n}\n\n.visuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Narrow lists (phones): each row is a block, with the label of each value next to it. */\n@container panneau-list (max-width: 40rem) {\n .scroller {\n overflow: visible;\n background: none;\n border: 0;\n }\n\n /* The labels of the cells replace the headers, and the list's sort select their buttons. */\n .table thead {\n display: none;\n }\n\n .table,\n .table tbody,\n .table tr,\n .table td {\n display: block;\n }\n\n .table tbody {\n display: grid;\n gap: var(--panneau-space-2);\n }\n\n .table tr {\n position: relative;\n padding: var(--panneau-space-2) 0;\n background-color: var(--panneau-color-surface);\n border: var(--panneau-border-width) solid var(--panneau-color-border);\n border-radius: var(--panneau-radius-lg);\n }\n\n .table td {\n display: grid;\n grid-template-columns: minmax(5rem, 35%) 1fr;\n gap: var(--panneau-space-2);\n padding: var(--panneau-space-1) var(--panneau-space-3);\n text-align: start !important;\n border: 0;\n }\n\n .table td.check,\n .table td.actionsCell {\n display: flex;\n width: auto;\n }\n\n .table td.actionsCell > * {\n flex-wrap: wrap;\n }\n\n .table td.check {\n position: absolute;\n top: var(--panneau-space-2);\n inset-inline-end: var(--panneau-space-2);\n padding: 0;\n }\n\n .table td.actionsCell {\n justify-content: flex-start;\n flex-wrap: wrap;\n padding-top: var(--panneau-space-2);\n }\n\n .table td.title {\n display: block;\n min-width: 0;\n padding-inline-end: var(--panneau-space-10);\n font-weight: var(--panneau-font-weight-medium);\n }\n\n .table td.title .cellLabel {\n display: none;\n }\n\n .cellLabel {\n display: block;\n font-size: var(--panneau-font-size-sm);\n color: var(--panneau-color-text-muted);\n }\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/lists",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.11",
|
|
4
4
|
"description": "Lists of Panneau: columns with displays, table and cards layouts, sorting, filters, search, pagination, selection and actions, driven by the list state of @panneau/core.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
"react-intl": "^12.0.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@panneau/core": "5.0.0-alpha.
|
|
41
|
-
"@panneau/fields": "5.0.0-alpha.
|
|
42
|
-
"@panneau/intl": "5.0.0-alpha.
|
|
43
|
-
"@panneau/protocol": "5.0.0-alpha.
|
|
44
|
-
"@panneau/ui": "5.0.0-alpha.
|
|
40
|
+
"@panneau/core": "5.0.0-alpha.11",
|
|
41
|
+
"@panneau/fields": "5.0.0-alpha.11",
|
|
42
|
+
"@panneau/intl": "5.0.0-alpha.11",
|
|
43
|
+
"@panneau/protocol": "5.0.0-alpha.11",
|
|
44
|
+
"@panneau/ui": "5.0.0-alpha.11",
|
|
45
45
|
"lucide-react": "^1.57.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@panneau/data": "5.0.0-alpha.
|
|
48
|
+
"@panneau/data": "5.0.0-alpha.11"
|
|
49
49
|
}
|
|
50
50
|
}
|