@panneau/lists 5.0.0-alpha.11 → 5.0.0-alpha.12
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/ItemDetails.css +16 -0
- package/dist/ItemDetails.d.ts +12 -3
- package/dist/ItemDetails.d.ts.map +1 -1
- package/dist/ItemDetails.js +89 -59
- package/dist/ItemDetails.js.map +1 -1
- package/dist/ItemDetails.module.js +6 -2
- package/dist/ItemDetails.module.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +7 -7
package/dist/ItemDetails.css
CHANGED
|
@@ -24,6 +24,17 @@
|
|
|
24
24
|
overflow-wrap: anywhere;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/* A group: its label over its values, which are indented. */
|
|
28
|
+
.panneau-item-details-group > .panneau-item-details-label {
|
|
29
|
+
color: var(--panneau-color-text);
|
|
30
|
+
font-weight: var(--panneau-font-weight-medium);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.panneau-item-details-nested {
|
|
34
|
+
padding-inline-start: var(--panneau-space-3);
|
|
35
|
+
border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
|
|
36
|
+
}
|
|
37
|
+
|
|
27
38
|
/* Wide enough: the label and its value side by side. */
|
|
28
39
|
@container panneau-item-details (min-width: 30rem) {
|
|
29
40
|
.panneau-item-details-entry {
|
|
@@ -31,4 +42,9 @@
|
|
|
31
42
|
grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
|
|
32
43
|
gap: var(--panneau-space-3);
|
|
33
44
|
}
|
|
45
|
+
|
|
46
|
+
.panneau-item-details-group {
|
|
47
|
+
display: flex;
|
|
48
|
+
gap: var(--panneau-space-2);
|
|
49
|
+
}
|
|
34
50
|
}
|
package/dist/ItemDetails.d.ts
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import type { DisplayEntry, ListColumn, ListItem } from './types.js';
|
|
2
|
+
/** A value of the details, or a group of values under its label. */
|
|
3
|
+
export interface ItemDetailsColumn extends ListColumn {
|
|
4
|
+
/**
|
|
5
|
+
* The values of a group (a `group` field): read in the value of the column, an object, and
|
|
6
|
+
* listed under its label.
|
|
7
|
+
*/
|
|
8
|
+
columns?: readonly ItemDetailsColumn[];
|
|
9
|
+
}
|
|
2
10
|
export interface ItemDetailsProps {
|
|
3
11
|
/** The item. `undefined` while it loads: the labels, with a skeleton of each value. */
|
|
4
12
|
item: ListItem | undefined;
|
|
5
13
|
/** The values to show, with their label and display, in order. */
|
|
6
|
-
columns: readonly
|
|
14
|
+
columns: readonly ItemDetailsColumn[];
|
|
7
15
|
/** Displays by name, over the built-in ones and those of the plugins. */
|
|
8
16
|
displays?: Readonly<Record<string, DisplayEntry>>;
|
|
9
17
|
'aria-label'?: string;
|
|
@@ -11,8 +19,9 @@ export interface ItemDetailsProps {
|
|
|
11
19
|
}
|
|
12
20
|
/**
|
|
13
21
|
* The values of one item, each with its label, shown with the displays of the lists: for the
|
|
14
|
-
* details of an item next to its list, or anywhere a read-only view of it is needed.
|
|
15
|
-
*
|
|
22
|
+
* details of an item next to its list, or anywhere a read-only view of it is needed. A column with
|
|
23
|
+
* `columns` is a group, whose values are listed under its label. While the item loads, it draws
|
|
24
|
+
* the labels with a skeleton of each value (decision 0034).
|
|
16
25
|
*/
|
|
17
26
|
export declare function ItemDetails({ item, columns, displays, 'aria-label': ariaLabel, className, }: ItemDetailsProps): import("react").JSX.Element;
|
|
18
27
|
//# sourceMappingURL=ItemDetails.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ItemDetails.d.ts","sourceRoot":"","sources":["../src/ItemDetails.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAOlE,oEAAoE;AACpE,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,gBAAgB;IAC7B,uFAAuF;IACvF,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,kEAAkE;IAClE,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACZ,EAAE,gBAAgB,+BA0DlB"}
|
package/dist/ItemDetails.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { messages } from "./messages.js";
|
|
2
|
+
import { getColumnValue } from "./values.js";
|
|
2
3
|
import { cx } from "./cx.js";
|
|
3
4
|
import ItemDetails_module_default from "./ItemDetails.module.js";
|
|
4
5
|
import { useRenderValue } from "./useRenderValue.js";
|
|
@@ -14,87 +15,116 @@ var WIDTHS = [
|
|
|
14
15
|
"30%",
|
|
15
16
|
"65%"
|
|
16
17
|
];
|
|
18
|
+
function isRecord(value) {
|
|
19
|
+
return value !== null && typeof value === "object" && !Array.isArray(value);
|
|
20
|
+
}
|
|
17
21
|
/**
|
|
18
22
|
* The values of one item, each with its label, shown with the displays of the lists: for the
|
|
19
|
-
* details of an item next to its list, or anywhere a read-only view of it is needed.
|
|
20
|
-
*
|
|
23
|
+
* details of an item next to its list, or anywhere a read-only view of it is needed. A column with
|
|
24
|
+
* `columns` is a group, whose values are listed under its label. While the item loads, it draws
|
|
25
|
+
* the labels with a skeleton of each value (decision 0034).
|
|
21
26
|
*/
|
|
22
27
|
function ItemDetails(t0) {
|
|
23
|
-
const $ = c(
|
|
28
|
+
const $ = c(22);
|
|
24
29
|
const { item, columns, displays, "aria-label": ariaLabel, className } = t0;
|
|
25
30
|
const intl = usePanneauIntl();
|
|
26
31
|
const renderValue = useRenderValue(displays);
|
|
27
32
|
let t1;
|
|
28
|
-
if ($[0] !== className) {
|
|
29
|
-
t1 = cx(ItemDetails_module_default.details, className);
|
|
30
|
-
$[0] = className;
|
|
31
|
-
$[1] = t1;
|
|
32
|
-
} else t1 = $[1];
|
|
33
33
|
let t2;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
let t3;
|
|
35
|
+
if ($[0] !== ariaLabel || $[1] !== className || $[2] !== columns || $[3] !== intl || $[4] !== item || $[5] !== renderValue) {
|
|
36
|
+
const renderEntries = (entryItem, entryColumns) => entryColumns.map((column, index) => {
|
|
37
|
+
const label = /* @__PURE__ */ jsx("dt", {
|
|
38
|
+
className: ItemDetails_module_default.label,
|
|
39
|
+
children: column.label ?? column.id
|
|
40
|
+
});
|
|
41
|
+
if (column.columns !== void 0) {
|
|
42
|
+
const value = entryItem !== void 0 ? getColumnValue(entryItem, column, intl.locale) : void 0;
|
|
43
|
+
const groupItem = entryItem !== void 0 ? {
|
|
44
|
+
...isRecord(value) ? value : {},
|
|
45
|
+
id: entryItem.id
|
|
46
|
+
} : void 0;
|
|
47
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
48
|
+
className: cx(ItemDetails_module_default.entry, ItemDetails_module_default.group),
|
|
49
|
+
children: [label, /* @__PURE__ */ jsx("dd", {
|
|
50
|
+
className: ItemDetails_module_default.value,
|
|
51
|
+
children: /* @__PURE__ */ jsx("dl", {
|
|
52
|
+
className: cx(ItemDetails_module_default.details, ItemDetails_module_default.nested),
|
|
53
|
+
children: renderEntries(groupItem, column.columns)
|
|
54
|
+
})
|
|
55
|
+
})]
|
|
56
|
+
}, column.id);
|
|
57
|
+
}
|
|
58
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
38
59
|
className: ItemDetails_module_default.entry,
|
|
39
|
-
children: [/* @__PURE__ */ jsx("
|
|
40
|
-
className: ItemDetails_module_default.label,
|
|
41
|
-
children: column.label ?? column.id
|
|
42
|
-
}), /* @__PURE__ */ jsx("dd", {
|
|
60
|
+
children: [label, /* @__PURE__ */ jsx("dd", {
|
|
43
61
|
className: ItemDetails_module_default.value,
|
|
44
|
-
children:
|
|
62
|
+
children: entryItem !== void 0 ? renderValue(entryItem, column) : /* @__PURE__ */ jsx(Skeleton, { width: WIDTHS[index % WIDTHS.length] })
|
|
45
63
|
})]
|
|
46
64
|
}, column.id);
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
65
|
+
});
|
|
66
|
+
t1 = ariaLabel;
|
|
67
|
+
if ($[9] !== className) {
|
|
68
|
+
t2 = cx(ItemDetails_module_default.details, className);
|
|
69
|
+
$[9] = className;
|
|
70
|
+
$[10] = t2;
|
|
71
|
+
} else t2 = $[10];
|
|
72
|
+
t3 = renderEntries(item, columns);
|
|
73
|
+
$[0] = ariaLabel;
|
|
74
|
+
$[1] = className;
|
|
52
75
|
$[2] = columns;
|
|
53
|
-
$[3] =
|
|
54
|
-
$[4] =
|
|
55
|
-
$[5] =
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
76
|
+
$[3] = intl;
|
|
77
|
+
$[4] = item;
|
|
78
|
+
$[5] = renderValue;
|
|
79
|
+
$[6] = t1;
|
|
80
|
+
$[7] = t2;
|
|
81
|
+
$[8] = t3;
|
|
82
|
+
} else {
|
|
83
|
+
t1 = $[6];
|
|
84
|
+
t2 = $[7];
|
|
85
|
+
t3 = $[8];
|
|
86
|
+
}
|
|
87
|
+
let t4;
|
|
88
|
+
if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
|
|
89
|
+
t4 = /* @__PURE__ */ jsx("dl", {
|
|
90
|
+
"aria-label": t1,
|
|
91
|
+
className: t2,
|
|
92
|
+
children: t3
|
|
63
93
|
});
|
|
64
|
-
$[
|
|
65
|
-
$[
|
|
66
|
-
$[
|
|
67
|
-
$[
|
|
68
|
-
} else
|
|
69
|
-
const details =
|
|
94
|
+
$[11] = t1;
|
|
95
|
+
$[12] = t2;
|
|
96
|
+
$[13] = t3;
|
|
97
|
+
$[14] = t4;
|
|
98
|
+
} else t4 = $[14];
|
|
99
|
+
const details = t4;
|
|
70
100
|
if (item === void 0) {
|
|
71
|
-
let t4;
|
|
72
|
-
if ($[13] !== intl) {
|
|
73
|
-
t4 = intl.formatMessage(messages.loadingItem);
|
|
74
|
-
$[13] = intl;
|
|
75
|
-
$[14] = t4;
|
|
76
|
-
} else t4 = $[14];
|
|
77
101
|
let t5;
|
|
78
|
-
if ($[15] !==
|
|
79
|
-
t5 =
|
|
102
|
+
if ($[15] !== intl) {
|
|
103
|
+
t5 = intl.formatMessage(messages.loadingItem);
|
|
104
|
+
$[15] = intl;
|
|
105
|
+
$[16] = t5;
|
|
106
|
+
} else t5 = $[16];
|
|
107
|
+
let t6;
|
|
108
|
+
if ($[17] !== details) {
|
|
109
|
+
t6 = /* @__PURE__ */ jsx("div", {
|
|
80
110
|
inert: true,
|
|
81
111
|
"aria-hidden": "true",
|
|
82
112
|
children: details
|
|
83
113
|
});
|
|
84
|
-
$[
|
|
85
|
-
$[
|
|
86
|
-
} else
|
|
87
|
-
let
|
|
88
|
-
if ($[
|
|
89
|
-
|
|
90
|
-
label:
|
|
91
|
-
children:
|
|
114
|
+
$[17] = details;
|
|
115
|
+
$[18] = t6;
|
|
116
|
+
} else t6 = $[18];
|
|
117
|
+
let t7;
|
|
118
|
+
if ($[19] !== t5 || $[20] !== t6) {
|
|
119
|
+
t7 = /* @__PURE__ */ jsx(LoadingRegion, {
|
|
120
|
+
label: t5,
|
|
121
|
+
children: t6
|
|
92
122
|
});
|
|
93
|
-
$[
|
|
94
|
-
$[
|
|
95
|
-
$[
|
|
96
|
-
} else
|
|
97
|
-
return
|
|
123
|
+
$[19] = t5;
|
|
124
|
+
$[20] = t6;
|
|
125
|
+
$[21] = t7;
|
|
126
|
+
} else t7 = $[21];
|
|
127
|
+
return t7;
|
|
98
128
|
}
|
|
99
129
|
return details;
|
|
100
130
|
}
|
package/dist/ItemDetails.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemDetails.js","names":["LoadingRegion","Skeleton","usePanneauIntl","styles","cx","messages","DisplayEntry","ListColumn","ListItem","useRenderValue","
|
|
1
|
+
{"version":3,"file":"ItemDetails.js","names":["LoadingRegion","Skeleton","usePanneauIntl","styles","cx","messages","DisplayEntry","ListColumn","ListItem","useRenderValue","getColumnValue","WIDTHS","ItemDetailsColumn","columns","ItemDetailsProps","item","displays","Readonly","Record","className","isRecord","value","Array","isArray","ItemDetails","t0","$","_c","ariaLabel","intl","renderValue","t1","t2","t3","renderEntries","entryItem","entryColumns","map","column","index","label","id","undefined","locale","groupItem","entry","group","details","nested","length","t4","t5","formatMessage","loadingItem","t6","t7","_c","styles"],"sources":["../src/ItemDetails.tsx"],"sourcesContent":["import { LoadingRegion, Skeleton, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './ItemDetails.module.css';\nimport { cx } from './cx';\nimport { messages } from './messages';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { useRenderValue } from './useRenderValue';\nimport { getColumnValue } from './values';\n\n/** Widths of the values of a skeleton, varied so they read as text. */\nconst WIDTHS = ['70%', '40%', '55%', '30%', '65%'];\n\n/** A value of the details, or a group of values under its label. */\nexport interface ItemDetailsColumn extends ListColumn {\n /**\n * The values of a group (a `group` field): read in the value of the column, an object, and\n * listed under its label.\n */\n columns?: readonly ItemDetailsColumn[];\n}\n\nexport interface ItemDetailsProps {\n /** The item. `undefined` while it loads: the labels, with a skeleton of each value. */\n item: ListItem | undefined;\n /** The values to show, with their label and display, in order. */\n columns: readonly ItemDetailsColumn[];\n /** Displays by name, over the built-in ones and those of the plugins. */\n displays?: Readonly<Record<string, DisplayEntry>>;\n 'aria-label'?: string;\n className?: string;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\n/**\n * The values of one item, each with its label, shown with the displays of the lists: for the\n * details of an item next to its list, or anywhere a read-only view of it is needed. A column with\n * `columns` is a group, whose values are listed under its label. While the item loads, it draws\n * the labels with a skeleton of each value (decision 0034).\n */\nexport function ItemDetails({\n item,\n columns,\n displays,\n 'aria-label': ariaLabel,\n className,\n}: ItemDetailsProps) {\n const intl = usePanneauIntl();\n const renderValue = useRenderValue(displays);\n const renderEntries = (\n entryItem: ListItem | undefined,\n entryColumns: readonly ItemDetailsColumn[],\n ) =>\n entryColumns.map((column, index) => {\n const label = <dt className={styles.label}>{column.label ?? column.id}</dt>;\n if (column.columns !== undefined) {\n // The values of a group are those of an item made of the value of the column.\n const value =\n entryItem !== undefined\n ? getColumnValue(entryItem, column, intl.locale)\n : undefined;\n const groupItem =\n entryItem !== undefined\n ? { ...(isRecord(value) ? value : {}), id: entryItem.id }\n : undefined;\n return (\n <div key={column.id} className={cx(styles.entry, styles.group)}>\n {label}\n <dd className={styles.value}>\n <dl className={cx(styles.details, styles.nested)}>\n {renderEntries(groupItem, column.columns)}\n </dl>\n </dd>\n </div>\n );\n }\n return (\n <div key={column.id} className={styles.entry}>\n {label}\n <dd className={styles.value}>\n {entryItem !== undefined ? (\n renderValue(entryItem, column)\n ) : (\n <Skeleton width={WIDTHS[index % WIDTHS.length]} />\n )}\n </dd>\n </div>\n );\n });\n const details = (\n <dl aria-label={ariaLabel} className={cx(styles.details, className)}>\n {renderEntries(item, columns)}\n </dl>\n );\n if (item === undefined) {\n return (\n <LoadingRegion label={intl.formatMessage(messages.loadingItem)}>\n <div inert aria-hidden=\"true\">\n {details}\n </div>\n </LoadingRegion>\n );\n }\n return details;\n}\n"],"mappings":"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"}
|
|
@@ -4,13 +4,17 @@ var details = "panneau-item-details-details";
|
|
|
4
4
|
var entry = "panneau-item-details-entry";
|
|
5
5
|
var label = "panneau-item-details-label";
|
|
6
6
|
var value = "panneau-item-details-value";
|
|
7
|
+
var group = "panneau-item-details-group";
|
|
8
|
+
var nested = "panneau-item-details-nested";
|
|
7
9
|
var ItemDetails_module_default = {
|
|
8
10
|
details,
|
|
9
11
|
entry,
|
|
10
12
|
label,
|
|
11
|
-
value
|
|
13
|
+
value,
|
|
14
|
+
group,
|
|
15
|
+
nested
|
|
12
16
|
};
|
|
13
17
|
//#endregion
|
|
14
|
-
export { ItemDetails_module_default as default, details, entry, label, value };
|
|
18
|
+
export { ItemDetails_module_default as default, details, entry, group, label, nested, value };
|
|
15
19
|
|
|
16
20
|
//# sourceMappingURL=ItemDetails.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemDetails.module.js","names":[],"sources":["../src/ItemDetails.module.css"],"sourcesContent":[".details {\n container: panneau-item-details / inline-size;\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-3);\n margin: 0;\n}\n\n.entry {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-1);\n min-width: 0;\n}\n\n.label {\n color: var(--panneau-color-text-muted);\n font-size: var(--panneau-font-size-sm);\n}\n\n.value {\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n}\n\n/* Wide enough: the label and its value side by side. */\n@container panneau-item-details (min-width: 30rem) {\n .entry {\n display: grid;\n grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);\n gap: var(--panneau-space-3);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ItemDetails.module.js","names":[],"sources":["../src/ItemDetails.module.css"],"sourcesContent":[".details {\n container: panneau-item-details / inline-size;\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-3);\n margin: 0;\n}\n\n.entry {\n display: flex;\n flex-direction: column;\n gap: var(--panneau-space-1);\n min-width: 0;\n}\n\n.label {\n color: var(--panneau-color-text-muted);\n font-size: var(--panneau-font-size-sm);\n}\n\n.value {\n min-width: 0;\n margin: 0;\n overflow-wrap: anywhere;\n}\n\n/* A group: its label over its values, which are indented. */\n.group > .label {\n color: var(--panneau-color-text);\n font-weight: var(--panneau-font-weight-medium);\n}\n\n.nested {\n padding-inline-start: var(--panneau-space-3);\n border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n/* Wide enough: the label and its value side by side. */\n@container panneau-item-details (min-width: 30rem) {\n .entry {\n display: grid;\n grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);\n gap: var(--panneau-space-3);\n }\n\n .group {\n display: flex;\n gap: var(--panneau-space-2);\n }\n}\n"],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { DateFilter, DateRangeFilter, RelationFilter, SelectFilter, TextFilter,
|
|
|
6
6
|
export { CardsLayout } from './layouts/CardsLayout.js';
|
|
7
7
|
export { TableLayout } from './layouts/TableLayout.js';
|
|
8
8
|
export { builtInLayouts } from './layouts/builtIn.js';
|
|
9
|
-
export { ItemDetails, type ItemDetailsProps } from './ItemDetails.js';
|
|
9
|
+
export { ItemDetails, type ItemDetailsColumn, type ItemDetailsProps } from './ItemDetails.js';
|
|
10
10
|
export { List, type ListProps } from './List.js';
|
|
11
11
|
export { ListView, type ListViewProps } from './ListView.js';
|
|
12
12
|
export { listsPlugin } from './plugin.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EACH,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACH,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,eAAe,EACf,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,GACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EACH,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACH,cAAc,EACd,YAAY,EACZ,WAAW,EACX,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,eAAe,EACf,cAAc,EACd,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,GACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,EACH,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,UAAU,EACV,KAAK,eAAe,EACpB,cAAc,GACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EACR,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,eAAe,EACf,eAAe,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
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.12",
|
|
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.12",
|
|
41
|
+
"@panneau/fields": "5.0.0-alpha.12",
|
|
42
|
+
"@panneau/intl": "5.0.0-alpha.12",
|
|
43
|
+
"@panneau/protocol": "5.0.0-alpha.12",
|
|
44
|
+
"@panneau/ui": "5.0.0-alpha.12",
|
|
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.12"
|
|
49
49
|
}
|
|
50
50
|
}
|