@panneau/lists 5.0.0-alpha.5 → 5.0.0-alpha.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.
- package/README.md +1 -1
- package/dist/ItemDetails.d.ts +4 -2
- package/dist/ItemDetails.d.ts.map +1 -1
- package/dist/ItemDetails.js +48 -6
- package/dist/ItemDetails.js.map +1 -1
- package/dist/List.js +54 -12
- package/dist/List.js.map +1 -1
- package/dist/ListSkeleton.d.ts +17 -0
- package/dist/ListSkeleton.d.ts.map +1 -0
- package/dist/ListSkeleton.js +111 -0
- package/dist/ListSkeleton.js.map +1 -0
- package/dist/ListView.d.ts +4 -1
- package/dist/ListView.d.ts.map +1 -1
- package/dist/ListView.js +494 -179
- package/dist/ListView.js.map +1 -1
- package/dist/actions/ActionButton.js +79 -21
- package/dist/actions/ActionButton.js.map +1 -1
- package/dist/actions/ConfirmDialog.js +121 -24
- package/dist/actions/ConfirmDialog.js.map +1 -1
- package/dist/actions/RowActions.js +1 -1
- package/dist/actions/RowActions.js.map +1 -1
- package/dist/actions/actions.js.map +1 -1
- package/dist/actions/icons.js.map +1 -1
- package/dist/cx.js.map +1 -1
- package/dist/displays/Displays.css +12 -0
- package/dist/displays/Displays.module.js +6 -2
- package/dist/displays/Displays.module.js.map +1 -1
- package/dist/displays/displays.d.ts +12 -0
- package/dist/displays/displays.d.ts.map +1 -1
- package/dist/displays/displays.js +310 -3
- package/dist/displays/displays.js.map +1 -1
- package/dist/filters/Filters.js +1 -1
- package/dist/filters/Filters.js.map +1 -1
- package/dist/filters/controls.js +1 -1
- package/dist/filters/controls.js.map +1 -1
- package/dist/filters/format.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/layouts/CardsLayout.js +1 -1
- package/dist/layouts/CardsLayout.js.map +1 -1
- package/dist/layouts/ItemTitle.js +20 -7
- package/dist/layouts/ItemTitle.js.map +1 -1
- package/dist/layouts/TableLayout.js +1 -1
- package/dist/layouts/TableLayout.js.map +1 -1
- package/dist/layouts/builtIn.js.map +1 -1
- package/dist/plugin.js.map +1 -1
- package/dist/query.js.map +1 -1
- package/dist/selection.js.map +1 -1
- package/dist/toolbar/LayoutSwitch.js +1 -1
- package/dist/toolbar/LayoutSwitch.js.map +1 -1
- package/dist/toolbar/Pagination.js +152 -41
- package/dist/toolbar/Pagination.js.map +1 -1
- package/dist/toolbar/SearchField.js +1 -1
- package/dist/toolbar/SearchField.js.map +1 -1
- package/dist/toolbar/SortSelect.js +1 -1
- package/dist/toolbar/SortSelect.js.map +1 -1
- package/dist/useDraft.js.map +1 -1
- package/dist/useListState.js.map +1 -1
- package/dist/useRenderValue.js +1 -1
- package/dist/useRenderValue.js.map +1 -1
- package/dist/values.js.map +1 -1
- package/package.json +7 -7
|
@@ -1,60 +1,171 @@
|
|
|
1
1
|
import { messages } from "../messages.js";
|
|
2
2
|
import Toolbar_module_default from "./Toolbar.module.js";
|
|
3
|
+
import { c } from "react/compiler-runtime";
|
|
3
4
|
import { IconButton, Select, usePanneauIntl } from "@panneau/ui";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
6
7
|
//#region src/toolbar/Pagination.tsx
|
|
7
8
|
/** The range of items shown, the page, and buttons to the previous and next pages. */
|
|
8
|
-
function Pagination(
|
|
9
|
+
function Pagination(t0) {
|
|
10
|
+
const $ = c(44);
|
|
11
|
+
const { page, perPage, total, onPageChange, perPageOptions: t1, onPerPageChange } = t0;
|
|
12
|
+
const perPageOptions = t1 === void 0 ? [] : t1;
|
|
9
13
|
const intl = usePanneauIntl();
|
|
10
14
|
const lastPage = Math.max(1, Math.ceil(total / perPage));
|
|
11
15
|
const start = total === 0 ? 0 : (page - 1) * perPage + 1;
|
|
12
16
|
const end = Math.min(total, page * perPage);
|
|
13
|
-
const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
const sizes = [.../* @__PURE__ */ new Set([...perPageOptions, perPage])].sort(_temp);
|
|
18
|
+
let t2;
|
|
19
|
+
if ($[0] !== intl) {
|
|
20
|
+
t2 = intl.formatMessage(messages.pagination);
|
|
21
|
+
$[0] = intl;
|
|
22
|
+
$[1] = t2;
|
|
23
|
+
} else t2 = $[1];
|
|
24
|
+
const t3 = Toolbar_module_default;
|
|
25
|
+
let t4;
|
|
26
|
+
if ($[2] !== end || $[3] !== intl || $[4] !== start || $[5] !== total) {
|
|
27
|
+
t4 = intl.formatMessage(messages.range, {
|
|
18
28
|
start,
|
|
19
29
|
end,
|
|
20
30
|
total
|
|
21
|
-
})
|
|
22
|
-
|
|
31
|
+
});
|
|
32
|
+
$[2] = end;
|
|
33
|
+
$[3] = intl;
|
|
34
|
+
$[4] = start;
|
|
35
|
+
$[5] = total;
|
|
36
|
+
$[6] = t4;
|
|
37
|
+
} else t4 = $[6];
|
|
38
|
+
let t5;
|
|
39
|
+
if ($[7] !== t4) {
|
|
40
|
+
t5 = /* @__PURE__ */ jsx("span", { children: t4 });
|
|
41
|
+
$[7] = t4;
|
|
42
|
+
$[8] = t5;
|
|
43
|
+
} else t5 = $[8];
|
|
44
|
+
const t6 = Toolbar_module_default;
|
|
45
|
+
const t7 = perPageOptions.length > 0 && onPerPageChange !== void 0 ? /* @__PURE__ */ jsx(Select, {
|
|
46
|
+
"aria-label": intl.formatMessage(messages.perPage),
|
|
47
|
+
options: sizes.map(_temp2),
|
|
48
|
+
value: perPage,
|
|
49
|
+
onChange: (value) => {
|
|
50
|
+
if (typeof value === "number") onPerPageChange(value);
|
|
51
|
+
},
|
|
52
|
+
className: Toolbar_module_default.perPage
|
|
53
|
+
}) : null;
|
|
54
|
+
let t8;
|
|
55
|
+
if ($[9] !== intl) {
|
|
56
|
+
t8 = intl.formatMessage(messages.previousPage);
|
|
57
|
+
$[9] = intl;
|
|
58
|
+
$[10] = t8;
|
|
59
|
+
} else t8 = $[10];
|
|
60
|
+
const t9 = page <= 1;
|
|
61
|
+
let t10;
|
|
62
|
+
if ($[11] !== onPageChange || $[12] !== page) {
|
|
63
|
+
t10 = () => onPageChange(page - 1);
|
|
64
|
+
$[11] = onPageChange;
|
|
65
|
+
$[12] = page;
|
|
66
|
+
$[13] = t10;
|
|
67
|
+
} else t10 = $[13];
|
|
68
|
+
let t11;
|
|
69
|
+
if ($[14] !== t10 || $[15] !== t8 || $[16] !== t9) {
|
|
70
|
+
t11 = /* @__PURE__ */ jsx(IconButton, {
|
|
71
|
+
icon: ChevronLeft,
|
|
72
|
+
label: t8,
|
|
73
|
+
isDisabled: t9,
|
|
74
|
+
onPress: t10
|
|
75
|
+
});
|
|
76
|
+
$[14] = t10;
|
|
77
|
+
$[15] = t8;
|
|
78
|
+
$[16] = t9;
|
|
79
|
+
$[17] = t11;
|
|
80
|
+
} else t11 = $[17];
|
|
81
|
+
let t12;
|
|
82
|
+
if ($[18] !== intl || $[19] !== lastPage || $[20] !== page) {
|
|
83
|
+
t12 = intl.formatMessage(messages.pageOf, {
|
|
84
|
+
page,
|
|
85
|
+
lastPage
|
|
86
|
+
});
|
|
87
|
+
$[18] = intl;
|
|
88
|
+
$[19] = lastPage;
|
|
89
|
+
$[20] = page;
|
|
90
|
+
$[21] = t12;
|
|
91
|
+
} else t12 = $[21];
|
|
92
|
+
let t13;
|
|
93
|
+
if ($[22] !== t12) {
|
|
94
|
+
t13 = /* @__PURE__ */ jsx("span", {
|
|
95
|
+
"aria-current": "page",
|
|
96
|
+
children: t12
|
|
97
|
+
});
|
|
98
|
+
$[22] = t12;
|
|
99
|
+
$[23] = t13;
|
|
100
|
+
} else t13 = $[23];
|
|
101
|
+
let t14;
|
|
102
|
+
if ($[24] !== intl) {
|
|
103
|
+
t14 = intl.formatMessage(messages.nextPage);
|
|
104
|
+
$[24] = intl;
|
|
105
|
+
$[25] = t14;
|
|
106
|
+
} else t14 = $[25];
|
|
107
|
+
const t15 = page >= lastPage;
|
|
108
|
+
let t16;
|
|
109
|
+
if ($[26] !== onPageChange || $[27] !== page) {
|
|
110
|
+
t16 = () => onPageChange(page + 1);
|
|
111
|
+
$[26] = onPageChange;
|
|
112
|
+
$[27] = page;
|
|
113
|
+
$[28] = t16;
|
|
114
|
+
} else t16 = $[28];
|
|
115
|
+
let t17;
|
|
116
|
+
if ($[29] !== t14 || $[30] !== t15 || $[31] !== t16) {
|
|
117
|
+
t17 = /* @__PURE__ */ jsx(IconButton, {
|
|
118
|
+
icon: ChevronRight,
|
|
119
|
+
label: t14,
|
|
120
|
+
isDisabled: t15,
|
|
121
|
+
onPress: t16
|
|
122
|
+
});
|
|
123
|
+
$[29] = t14;
|
|
124
|
+
$[30] = t15;
|
|
125
|
+
$[31] = t16;
|
|
126
|
+
$[32] = t17;
|
|
127
|
+
} else t17 = $[32];
|
|
128
|
+
let t18;
|
|
129
|
+
if ($[33] !== t11 || $[34] !== t13 || $[35] !== t17 || $[36] !== t6.pages || $[37] !== t7) {
|
|
130
|
+
t18 = /* @__PURE__ */ jsxs("div", {
|
|
131
|
+
className: t6.pages,
|
|
23
132
|
children: [
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
label: String(size)
|
|
29
|
-
})),
|
|
30
|
-
value: perPage,
|
|
31
|
-
onChange: (value) => {
|
|
32
|
-
if (typeof value === "number") onPerPageChange(value);
|
|
33
|
-
},
|
|
34
|
-
className: Toolbar_module_default.perPage
|
|
35
|
-
}) : null,
|
|
36
|
-
/* @__PURE__ */ jsx(IconButton, {
|
|
37
|
-
icon: ChevronLeft,
|
|
38
|
-
label: intl.formatMessage(messages.previousPage),
|
|
39
|
-
isDisabled: page <= 1,
|
|
40
|
-
onPress: () => onPageChange(page - 1)
|
|
41
|
-
}),
|
|
42
|
-
/* @__PURE__ */ jsx("span", {
|
|
43
|
-
"aria-current": "page",
|
|
44
|
-
children: intl.formatMessage(messages.pageOf, {
|
|
45
|
-
page,
|
|
46
|
-
lastPage
|
|
47
|
-
})
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsx(IconButton, {
|
|
50
|
-
icon: ChevronRight,
|
|
51
|
-
label: intl.formatMessage(messages.nextPage),
|
|
52
|
-
isDisabled: page >= lastPage,
|
|
53
|
-
onPress: () => onPageChange(page + 1)
|
|
54
|
-
})
|
|
133
|
+
t7,
|
|
134
|
+
t11,
|
|
135
|
+
t13,
|
|
136
|
+
t17
|
|
55
137
|
]
|
|
56
|
-
})
|
|
57
|
-
|
|
138
|
+
});
|
|
139
|
+
$[33] = t11;
|
|
140
|
+
$[34] = t13;
|
|
141
|
+
$[35] = t17;
|
|
142
|
+
$[36] = t6.pages;
|
|
143
|
+
$[37] = t7;
|
|
144
|
+
$[38] = t18;
|
|
145
|
+
} else t18 = $[38];
|
|
146
|
+
let t19;
|
|
147
|
+
if ($[39] !== t18 || $[40] !== t2 || $[41] !== t3.pagination || $[42] !== t5) {
|
|
148
|
+
t19 = /* @__PURE__ */ jsxs("nav", {
|
|
149
|
+
"aria-label": t2,
|
|
150
|
+
className: t3.pagination,
|
|
151
|
+
children: [t5, t18]
|
|
152
|
+
});
|
|
153
|
+
$[39] = t18;
|
|
154
|
+
$[40] = t2;
|
|
155
|
+
$[41] = t3.pagination;
|
|
156
|
+
$[42] = t5;
|
|
157
|
+
$[43] = t19;
|
|
158
|
+
} else t19 = $[43];
|
|
159
|
+
return t19;
|
|
160
|
+
}
|
|
161
|
+
function _temp2(size) {
|
|
162
|
+
return {
|
|
163
|
+
value: size,
|
|
164
|
+
label: String(size)
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
function _temp(a, b) {
|
|
168
|
+
return a - b;
|
|
58
169
|
}
|
|
59
170
|
//#endregion
|
|
60
171
|
export { Pagination };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","names":["styles"],"sources":["../../src/toolbar/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { IconButton, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nexport interface PaginationProps {\n page: number;\n perPage: number;\n /** How many items match the query, on every page. */\n total: number;\n onPageChange: (page: number) => void;\n /** Page sizes to choose from. Without them, the page size can't be changed. */\n perPageOptions?: readonly number[] | undefined;\n onPerPageChange?: (perPage: number) => void;\n}\n\n/** The range of items shown, the page, and buttons to the previous and next pages. */\nexport function Pagination({\n page,\n perPage,\n total,\n onPageChange,\n perPageOptions = [],\n onPerPageChange,\n}: PaginationProps) {\n const intl = usePanneauIntl();\n const lastPage = Math.max(1, Math.ceil(total / perPage));\n const start = total === 0 ? 0 : (page - 1) * perPage + 1;\n const end = Math.min(total, page * perPage);\n const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n return (\n <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n <span>{intl.formatMessage(messages.range, { start, end, total })}</span>\n <div className={styles.pages}>\n {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n <Select\n aria-label={intl.formatMessage(messages.perPage)}\n options={sizes.map((size) => ({ value: size, label: String(size) }))}\n value={perPage}\n onChange={(value) => {\n if (typeof value === 'number') {\n onPerPageChange(value);\n }\n }}\n className={styles.perPage}\n />\n ) : null}\n <IconButton\n icon={ChevronLeft}\n label={intl.formatMessage(messages.previousPage)}\n isDisabled={page <= 1}\n onPress={() => onPageChange(page - 1)}\n />\n <span aria-current=\"page\">\n {intl.formatMessage(messages.pageOf, { page, lastPage })}\n </span>\n <IconButton\n icon={ChevronRight}\n label={intl.formatMessage(messages.nextPage)}\n isDisabled={page >= lastPage}\n onPress={() => onPageChange(page + 1)}\n />\n </div>\n </nav>\n );\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.js","names":["ChevronLeft","ChevronRight","IconButton","Select","usePanneauIntl","messages","styles","PaginationProps","page","perPage","total","onPageChange","perPageOptions","onPerPageChange","Pagination","t0","$","_c","t1","undefined","intl","lastPage","Math","max","ceil","start","end","min","sizes","Set","sort","_temp","t2","formatMessage","pagination","t4","range","t5","t7","length","map","_temp2","value","t8","previousPage","t9","t10","t11","t12","pageOf","t13","t14","nextPage","t15","t16","t17","t18","t6","pages","t19","t3","size","label","String","a","b","_c","styles"],"sources":["../../src/toolbar/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\n\nimport { IconButton, Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport styles from './Toolbar.module.css';\n\nexport interface PaginationProps {\n page: number;\n perPage: number;\n /** How many items match the query, on every page. */\n total: number;\n onPageChange: (page: number) => void;\n /** Page sizes to choose from. Without them, the page size can't be changed. */\n perPageOptions?: readonly number[] | undefined;\n onPerPageChange?: (perPage: number) => void;\n}\n\n/** The range of items shown, the page, and buttons to the previous and next pages. */\nexport function Pagination({\n page,\n perPage,\n total,\n onPageChange,\n perPageOptions = [],\n onPerPageChange,\n}: PaginationProps) {\n const intl = usePanneauIntl();\n const lastPage = Math.max(1, Math.ceil(total / perPage));\n const start = total === 0 ? 0 : (page - 1) * perPage + 1;\n const end = Math.min(total, page * perPage);\n const sizes = [...new Set([...perPageOptions, perPage])].sort((a, b) => a - b);\n return (\n <nav aria-label={intl.formatMessage(messages.pagination)} className={styles.pagination}>\n <span>{intl.formatMessage(messages.range, { start, end, total })}</span>\n <div className={styles.pages}>\n {perPageOptions.length > 0 && onPerPageChange !== undefined ? (\n <Select\n aria-label={intl.formatMessage(messages.perPage)}\n options={sizes.map((size) => ({ value: size, label: String(size) }))}\n value={perPage}\n onChange={(value) => {\n if (typeof value === 'number') {\n onPerPageChange(value);\n }\n }}\n className={styles.perPage}\n />\n ) : null}\n <IconButton\n icon={ChevronLeft}\n label={intl.formatMessage(messages.previousPage)}\n isDisabled={page <= 1}\n onPress={() => onPageChange(page - 1)}\n />\n <span aria-current=\"page\">\n {intl.formatMessage(messages.pageOf, { page, lastPage })}\n </span>\n <IconButton\n icon={ChevronRight}\n label={intl.formatMessage(messages.nextPage)}\n isDisabled={page >= lastPage}\n onPress={() => onPageChange(page + 1)}\n />\n </div>\n </nav>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { messages } from "../messages.js";
|
|
2
2
|
import { useDraft } from "../useDraft.js";
|
|
3
3
|
import Toolbar_module_default from "./Toolbar.module.js";
|
|
4
|
+
import { c } from "react/compiler-runtime";
|
|
4
5
|
import { Icon, TextInput, usePanneauIntl } from "@panneau/ui";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
import { Search } from "lucide-react";
|
|
7
|
-
import { c } from "react/compiler-runtime";
|
|
8
8
|
//#region src/toolbar/SearchField.tsx
|
|
9
9
|
/** The search of a list (`q`). */
|
|
10
10
|
function SearchField(t0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.js","names":["Search","draft","setDraft","_c","styles"],"sources":["../../src/toolbar/SearchField.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\n\nimport { Icon, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { useDraft } from '../useDraft';\nimport styles from './Toolbar.module.css';\n\nexport interface SearchFieldProps {\n /** The search of the query. */\n value: string;\n /** Called once the user stops typing, or presses Enter. */\n onChange: (q: string) => void;\n}\n\n/** The search of a list (`q`). */\nexport function SearchField({ value, onChange }: SearchFieldProps) {\n const intl = usePanneauIntl();\n const { draft, setDraft, flush } = useDraft(value, onChange);\n return (\n <TextInput\n type=\"search\"\n aria-label={intl.formatMessage(messages.search)}\n placeholder={intl.formatMessage(messages.searchPlaceholder)}\n prefix={<Icon icon={Search} />}\n value={draft}\n onChange={setDraft}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n flush();\n }\n }}\n className={styles.search}\n />\n );\n}\n"],"mappings":";;;;;;;;;AAgBA,
|
|
1
|
+
{"version":3,"file":"SearchField.js","names":["Search","Icon","TextInput","usePanneauIntl","messages","useDraft","styles","SearchFieldProps","value","onChange","q","SearchField","t0","$","_c","intl","draft","setDraft","flush","t1","formatMessage","search","t2","searchPlaceholder","t3","Symbol","for","t4","event","key","t5","_c","styles"],"sources":["../../src/toolbar/SearchField.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\n\nimport { Icon, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { useDraft } from '../useDraft';\nimport styles from './Toolbar.module.css';\n\nexport interface SearchFieldProps {\n /** The search of the query. */\n value: string;\n /** Called once the user stops typing, or presses Enter. */\n onChange: (q: string) => void;\n}\n\n/** The search of a list (`q`). */\nexport function SearchField({ value, onChange }: SearchFieldProps) {\n const intl = usePanneauIntl();\n const { draft, setDraft, flush } = useDraft(value, onChange);\n return (\n <TextInput\n type=\"search\"\n aria-label={intl.formatMessage(messages.search)}\n placeholder={intl.formatMessage(messages.searchPlaceholder)}\n prefix={<Icon icon={Search} />}\n value={draft}\n onChange={setDraft}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n flush();\n }\n }}\n className={styles.search}\n />\n );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAOW,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAN,OAAAC,aAAAG;CACxB,MAAAG,OAAaZ,eAAe;CAC5B,MAAA,EAAAa,OAAAC,UAAAC,UAAmCb,SAASG,OAAOC,QAAQ;CAAE,IAAAU;CAAA,IAAAN,EAAA,OAAAE,MAAA;EAIzCI,KAAAJ,KAAIK,cAAehB,SAAQiB,MAAO;EAACR,EAAA,KAAAE;EAAAF,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAA;EAClCO,KAAAP,KAAIK,cAAehB,SAAQmB,iBAAkB;EAACV,EAAA,KAAAE;EAAAF,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,OAAAY,OAAAC,IAAA,2BAAA,GAAA;EACnDF,KAAA,oBAAC,MAAD,EAAYxB,MAAAA,OAAM,CAAA;EAAIa,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAK,OAAA;EAGnBS,MAAAC,UAAA;GACP,IAAIA,MAAKC,QAAS,SACdX,MAAM;EACT;EACJL,EAAA,KAAAK;EAAAL,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAG,SAAAH,EAAA,OAAAI,YAAAJ,EAAA,OAAAM,MAAAN,EAAA,QAAAS,MAAAT,EAAA,QAAAc,IAAA;EAXLG,KAAA,oBAAC,WAAD;GACS,MAAA;GACO,cAAAX;GACC,aAAAG;GACL,QAAAE;GACDR,OAAAA;GACGC,UAAAA;GACC,WAAAU;GAKA,WAAArB,uBAAMe;EAAO,CAAA;EAC1BR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,MAAAS;EAAAT,EAAA,MAAAc;EAAAd,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAbFiB;AAaE"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { messages } from "../messages.js";
|
|
2
2
|
import Toolbar_module_default from "./Toolbar.module.js";
|
|
3
|
+
import { c } from "react/compiler-runtime";
|
|
3
4
|
import { Select, usePanneauIntl } from "@panneau/ui";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { c } from "react/compiler-runtime";
|
|
6
6
|
//#region src/toolbar/SortSelect.tsx
|
|
7
7
|
var DEFAULT = "";
|
|
8
8
|
/** The sort of a list without column headers (cards), by sortable column and direction. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortSelect.js","names":["column","options","_c","styles"],"sources":["../../src/toolbar/SortSelect.tsx"],"sourcesContent":["import { Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListColumn } from '../types';\nimport styles from './Toolbar.module.css';\n\nexport interface SortSelectProps {\n columns: readonly ListColumn[];\n sort: readonly string[];\n onChange: (sort: string[]) => void;\n}\n\nconst DEFAULT = '';\n\n/** The sort of a list without column headers (cards), by sortable column and direction. */\nexport function SortSelect({ columns, sort, onChange }: SortSelectProps) {\n const intl = usePanneauIntl();\n const sortable = columns.filter((column) => column.sortable === true);\n const label = (column: ListColumn) =>\n typeof column.label === 'string' ? column.label : column.id;\n const options = [\n { value: DEFAULT, label: intl.formatMessage(messages.defaultSort) },\n ...sortable.flatMap((column) => [\n {\n value: column.id,\n label: intl.formatMessage(messages.sortAscending, { column: label(column) }),\n },\n {\n value: `-${column.id}`,\n label: intl.formatMessage(messages.sortDescending, { column: label(column) }),\n },\n ]),\n ];\n const current = sort[0] ?? DEFAULT;\n return (\n <Select\n label={intl.formatMessage(messages.sortBy)}\n options={options}\n value={options.some((option) => option.value === current) ? current : DEFAULT}\n onChange={(value) =>\n onChange(value === null || value === DEFAULT ? [] : [String(value)])\n }\n className={styles.sort}\n />\n );\n}\n"],"mappings":";;;;;;AAYA,
|
|
1
|
+
{"version":3,"file":"SortSelect.js","names":["Select","usePanneauIntl","messages","ListColumn","styles","SortSelectProps","columns","sort","onChange","DEFAULT","SortSelect","t0","$","_c","intl","t1","sortable","filter","_temp","label","_temp2","t2","formatMessage","defaultSort","t3","value","t4","column_1","column","id","sortAscending","sortDescending","flatMap","options","current","sortBy","some","option","String","t5","column_0","_c","styles"],"sources":["../../src/toolbar/SortSelect.tsx"],"sourcesContent":["import { Select, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListColumn } from '../types';\nimport styles from './Toolbar.module.css';\n\nexport interface SortSelectProps {\n columns: readonly ListColumn[];\n sort: readonly string[];\n onChange: (sort: string[]) => void;\n}\n\nconst DEFAULT = '';\n\n/** The sort of a list without column headers (cards), by sortable column and direction. */\nexport function SortSelect({ columns, sort, onChange }: SortSelectProps) {\n const intl = usePanneauIntl();\n const sortable = columns.filter((column) => column.sortable === true);\n const label = (column: ListColumn) =>\n typeof column.label === 'string' ? column.label : column.id;\n const options = [\n { value: DEFAULT, label: intl.formatMessage(messages.defaultSort) },\n ...sortable.flatMap((column) => [\n {\n value: column.id,\n label: intl.formatMessage(messages.sortAscending, { column: label(column) }),\n },\n {\n value: `-${column.id}`,\n label: intl.formatMessage(messages.sortDescending, { column: label(column) }),\n },\n ]),\n ];\n const current = sort[0] ?? DEFAULT;\n return (\n <Select\n label={intl.formatMessage(messages.sortBy)}\n options={options}\n value={options.some((option) => option.value === current) ? current : DEFAULT}\n onChange={(value) =>\n onChange(value === null || value === DEFAULT ? [] : [String(value)])\n }\n className={styles.sort}\n />\n );\n}\n"],"mappings":";;;;;;AAYA,IAAMS,UAAU;;AAGhB,SAAOC,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAP,SAAAC,MAAAC,aAAAG;CACvB,MAAAG,OAAab,eAAe;CAAE,IAAAc;CAAA,IAAAH,EAAA,OAAAN,WAAAM,EAAA,OAAAE,MAAA;EAC9B,MAAAE,WAAiBV,QAAOW,OAAQC,KAAoC;EACpE,MAAAC,QAAcC;EACkD,IAAAC;EAAA,IAAAT,EAAA,OAAAE,MAAA;GAEnCO,KAAAP,KAAIQ,cAAepB,SAAQqB,WAAY;GAACX,EAAA,KAAAE;GAAAF,EAAA,KAAAS;EAAA,OAAAA,KAAAT,EAAA;EAAA,IAAAY;EAAA,IAAAZ,EAAA,OAAAS,IAAA;GAAjEG,KAAA;IAAAC,OAAShB;IAAOU,OAASE;GAAyC;GAACT,EAAA,KAAAS;GAAAT,EAAA,KAAAY;EAAA,OAAAA,KAAAZ,EAAA;EAAA,IAAAc;EAAA,IAAAd,EAAA,OAAAE,MAAA;GAC/CY,MAAAC,aAAY,CAC5B;IAAAF,OACWG,SAAMC;IAAGV,OACTL,KAAIQ,cAAepB,SAAQ4B,eAAgB,EAAAF,QAAUT,MAAMS,QAAM,EAAE,CAAC;GAC/E,GACA;IAAAH,OACW,IAAIG,SAAMC;IAAKV,OACfL,KAAIQ,cAAepB,SAAQ6B,gBAAiB,EAAAH,QAAUT,MAAMS,QAAM,EAAE,CAAC;GAChF,CAAC;GACJhB,EAAA,KAAAE;GAAAF,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAXWG,KAAA,CACZS,IAAmE,GAChER,SAAQgB,QAASN,EASnB,CAAC;EACLd,EAAA,KAAAN;EAAAM,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAZD,MAAAqB,UAAgBlB;CAahB,MAAAmB,UAAgB3B,KAAI,MAAJE;CAAmB,IAAAY;CAAA,IAAAT,EAAA,OAAAE,MAAA;EAGpBO,KAAAP,KAAIQ,cAAepB,SAAQiC,MAAO;EAACvB,EAAA,KAAAE;EAAAF,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAEnC,MAAAY,KAAAS,QAAOG,MAAMC,WAAYA,OAAMZ,UAAWS,OAA2B,IAArEA,UAAAzB;CAAsE,IAAAiB;CAAA,IAAAd,EAAA,QAAAJ,UAAA;EACnEkB,MAAAD,UACNjB,SAASiB,UAAU,QAAQA,UAAUhB,UAA5B,CAAA,IAAA,CAA4C6B,OAAOb,KAAK,CAAC,CAAC;EAACb,EAAA,MAAAJ;EAAAI,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAqB,WAAArB,EAAA,QAAAS,MAAAT,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,IAAA;EAL5Ea,KAAA,oBAAC,QAAD;GACW,OAAAlB;GACEY;GACF,OAAAT;GACG,UAAAE;GAGC,WAAAtB,uBAAMG;EAAK,CAAA;EACxBK,EAAA,MAAAqB;EAAArB,EAAA,MAAAS;EAAAT,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;EAAAd,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OARF2B;AAQE;AA5BH,SAAAnB,OAAAoB,UAAA;CAAA,OAIC,OAAOZ,SAAMT,UAAW,WAAWS,SAAMT,QAASS,SAAMC;AAAG;AAJ5D,SAAAX,MAAAU,QAAA;CAAA,OAEyCA,OAAMZ,aAAc;AAAI"}
|
package/dist/useDraft.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDraft.js","names":["_c"],"sources":["../src/useDraft.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from 'react';\n\n/**\n * A text that is typed locally and committed after a pause: the list query changes once the user\n * stops typing, not on every key. A change of `value` from outside (a chip removed, the query\n * reset) replaces the draft.\n */\nexport function useDraft(\n value: string,\n commit: (value: string) => void,\n delay = 300,\n): { draft: string; setDraft: (draft: string) => void; flush: () => void } {\n const [draft, setDraft] = useState(value);\n const [synced, setSynced] = useState(value);\n if (value !== synced) {\n setSynced(value);\n setDraft(value);\n }\n const onCommit = useEffectEvent((next: string) => commit(next));\n useEffect(() => {\n if (draft === synced) {\n return undefined;\n }\n const timer = setTimeout(() => onCommit(draft), delay);\n return () => clearTimeout(timer);\n }, [draft, synced, delay]);\n return {\n draft,\n setDraft,\n flush: () => {\n if (draft !== synced) {\n commit(draft);\n }\n },\n };\n}\n"],"mappings":";;;;;;;;AAOA,
|
|
1
|
+
{"version":3,"file":"useDraft.js","names":["useEffect","useEffectEvent","useState","useDraft","value","commit","t0","$","_c","delay","undefined","draft","setDraft","synced","setSynced","t1","next","onCommit","t2","timer","setTimeout","clearTimeout","t3","t4","t5","flush","_c"],"sources":["../src/useDraft.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from 'react';\n\n/**\n * A text that is typed locally and committed after a pause: the list query changes once the user\n * stops typing, not on every key. A change of `value` from outside (a chip removed, the query\n * reset) replaces the draft.\n */\nexport function useDraft(\n value: string,\n commit: (value: string) => void,\n delay = 300,\n): { draft: string; setDraft: (draft: string) => void; flush: () => void } {\n const [draft, setDraft] = useState(value);\n const [synced, setSynced] = useState(value);\n if (value !== synced) {\n setSynced(value);\n setDraft(value);\n }\n const onCommit = useEffectEvent((next: string) => commit(next));\n useEffect(() => {\n if (draft === synced) {\n return undefined;\n }\n const timer = setTimeout(() => onCommit(draft), delay);\n return () => clearTimeout(timer);\n }, [draft, synced, delay]);\n return {\n draft,\n setDraft,\n flush: () => {\n if (draft !== synced) {\n commit(draft);\n }\n },\n };\n}\n"],"mappings":";;;;;;;;AAOA,SAAOG,SAAAC,OAAAC,QAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGH,MAAAC,QAAAH,OAAAI,KAAAA,IAAA,MAAAJ;CAEA,MAAA,CAAAK,OAAAC,YAA0BV,SAASE,KAAK;CACxC,MAAA,CAAAS,QAAAC,aAA4BZ,SAASE,KAAK;CAC1C,IAAIA,UAAUS,QAAM;EAChBC,UAAUV,KAAK;EACfQ,SAASR,KAAK;CAAC;CAClB,IAAAW;CAAA,IAAAR,EAAA,OAAAF,QAAA;EAC+BU,MAAAC,SAAkBX,OAAOW,IAAI;EAACT,EAAA,KAAAF;EAAAE,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAA9D,MAAAU,WAAiBhB,eAAec,EAA8B;CAAE,IAAAG;CAAA,IAAAX,EAAA,OAAAE,SAAAF,EAAA,OAAAI,SAAAJ,EAAA,OAAAU,YAAAV,EAAA,OAAAM,QAAA;EACtDK,WAAA;GACN,IAAIP,UAAUE,QAAM;GAGpB,MAAAM,QAAcC,iBAAiBH,SAASN,KAAK,GAAGF,KAAK;GAAE,aAC1CY,aAAaF,KAAK;EAAC;EACnCZ,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAU;EAAAV,EAAA,KAAAM;EAAAN,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,SAAAF,EAAA,OAAAI,SAAAJ,EAAA,OAAAM,QAAA;EAAES,KAAA;GAACX;GAAOE;GAAQJ;EAAK;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CANzBP,UAAUkB,IAMPI,EAAsB;CAAC,IAAAC;CAAA,IAAAhB,EAAA,QAAAF,UAAAE,EAAA,QAAAI,SAAAJ,EAAA,QAAAM,QAAA;EAIfU,WAAA;GACH,IAAIZ,UAAUE,QACVR,OAAOM,KAAK;EACf;EACJJ,EAAA,MAAAF;EAAAE,EAAA,MAAAI;EAAAJ,EAAA,MAAAM;EAAAN,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAI,SAAAJ,EAAA,QAAAgB,IAAA;EAPEC,KAAA;GAAAb;GAAAC;GAAAa,OAGIF;EAKX;EAAChB,EAAA,MAAAI;EAAAJ,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OARMiB;AAQN"}
|
package/dist/useListState.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListState.js","names":[],"sources":["../src/useListState.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport type { List, ListState } from '@panneau/core';\n\n/** The state of a list created elsewhere (`createList()`, `useList()`), kept up to date. */\nexport function useListState(list: List): ListState {\n return useSyncExternalStore(list.subscribe, list.getState, list.getState);\n}\n"],"mappings":";;;AAKA,
|
|
1
|
+
{"version":3,"file":"useListState.js","names":["useSyncExternalStore","List","ListState","useListState","list","subscribe","getState"],"sources":["../src/useListState.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport type { List, ListState } from '@panneau/core';\n\n/** The state of a list created elsewhere (`createList()`, `useList()`), kept up to date. */\nexport function useListState(list: List): ListState {\n return useSyncExternalStore(list.subscribe, list.getState, list.getState);\n}\n"],"mappings":";;;AAKA,SAAOG,aAAAC,MAAA;CAAA,OACIJ,qBAAqBI,KAAIC,WAAYD,KAAIE,UAAWF,KAAIE,QAAS;AAAC"}
|
package/dist/useRenderValue.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { getColumnValue } from "./values.js";
|
|
2
2
|
import { builtInDisplays } from "./displays/displays.js";
|
|
3
3
|
import { usePlugins } from "@panneau/core";
|
|
4
|
+
import { c } from "react/compiler-runtime";
|
|
4
5
|
import { usePanneauIntl } from "@panneau/ui";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
import { c } from "react/compiler-runtime";
|
|
7
7
|
//#region src/useRenderValue.tsx
|
|
8
8
|
/**
|
|
9
9
|
* Renders the value of a column for an item with its display: those given, over those of the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRenderValue.js","names":["item","column","_c"],"sources":["../src/useRenderValue.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { usePlugins } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { builtInDisplays } from './displays/displays';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { getColumnValue } from './values';\n\n/**\n * Renders the value of a column for an item with its display: those given, over those of the\n * plugins, over the built-in ones. Columns without a known display show their value as text.\n */\nexport function useRenderValue(\n displays: Readonly<Record<string, DisplayEntry>> = {},\n): (item: ListItem, column: ListColumn) => ReactNode {\n const intl = usePanneauIntl();\n const plugins = usePlugins();\n const allDisplays: Record<string, DisplayEntry> = {\n ...builtInDisplays,\n ...(Object.fromEntries(plugins.displays) as Record<string, DisplayEntry>),\n ...displays,\n };\n return (item, column) => {\n if (column.render !== undefined) {\n return column.render(item);\n }\n const Display =\n (column.display !== undefined && column.display !== null\n ? allDisplays[column.display]\n : undefined) ?? builtInDisplays.text;\n if (Display === undefined) {\n return null;\n }\n return (\n <Display\n value={getColumnValue(item, column, intl.locale)}\n item={item}\n column={column}\n field={column.field ?? null}\n />\n );\n };\n}\n"],"mappings":";;;;;;;;;;;AAaA,
|
|
1
|
+
{"version":3,"file":"useRenderValue.js","names":["ReactNode","usePlugins","usePanneauIntl","builtInDisplays","DisplayEntry","ListColumn","ListItem","getColumnValue","useRenderValue","t0","$","_c","t1","undefined","displays","intl","plugins","t2","Object","fromEntries","t3","Record","t4","allDisplays","t5","item","column","render","Display","display","text","locale","field","_c"],"sources":["../src/useRenderValue.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { usePlugins } from '@panneau/core';\nimport { usePanneauIntl } from '@panneau/ui';\n\nimport { builtInDisplays } from './displays/displays';\nimport type { DisplayEntry, ListColumn, ListItem } from './types';\nimport { getColumnValue } from './values';\n\n/**\n * Renders the value of a column for an item with its display: those given, over those of the\n * plugins, over the built-in ones. Columns without a known display show their value as text.\n */\nexport function useRenderValue(\n displays: Readonly<Record<string, DisplayEntry>> = {},\n): (item: ListItem, column: ListColumn) => ReactNode {\n const intl = usePanneauIntl();\n const plugins = usePlugins();\n const allDisplays: Record<string, DisplayEntry> = {\n ...builtInDisplays,\n ...(Object.fromEntries(plugins.displays) as Record<string, DisplayEntry>),\n ...displays,\n };\n return (item, column) => {\n if (column.render !== undefined) {\n return column.render(item);\n }\n const Display =\n (column.display !== undefined && column.display !== null\n ? allDisplays[column.display]\n : undefined) ?? builtInDisplays.text;\n if (Display === undefined) {\n return null;\n }\n return (\n <Display\n value={getColumnValue(item, column, intl.locale)}\n item={item}\n column={column}\n field={column.field ?? null}\n />\n );\n };\n}\n"],"mappings":";;;;;;;;;;;AAaA,SAAOQ,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,IAAA;EACHG,KAAAH,OAAAI,KAAAA,IAAA,CAAoD,IAApDJ;EAAqDC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAArD,MAAAI,WAAAF;CAEA,MAAAG,OAAab,eAAe;CAC5B,MAAAc,UAAgBf,WAAW;CAAE,IAAAgB;CAAA,IAAAP,EAAA,OAAAM,QAAAF,UAAA;EAGrBG,KAAAC,OAAMC,YAAaH,QAAOF,QAAS;EAACJ,EAAA,KAAAM,QAAAF;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAApC,MAAAU,KAAAH;CAAoE,IAAAK;CAAA,IAAAZ,EAAA,OAAAI,YAAAJ,EAAA,OAAAU,IAAA;EAF1BE,KAAA;GAAA,GAC3CnB;GAAe,GACdiB;GAAoE,GACrEN;EACP;EAACJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAU;EAAAV,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAJD,MAAAa,cAAkDD;CAIhD,IAAAE;CAAA,IAAAd,EAAA,OAAAa,eAAAb,EAAA,OAAAK,MAAA;EACKS,MAAAC,MAAAC,WAAA;GACH,IAAIA,OAAMC,WAAYd,KAAAA,GAAS,OACpBa,OAAMC,OAAQF,IAAI;GAE7B,MAAAG,WACKF,OAAMG,YAAahB,KAAAA,KAAaa,OAAMG,YAAa,OAC9CN,YAAYG,OAAMG,WADvBhB,KAAAA,MAEmBV,gBAAe2B;GACvC,IAAIF,YAAYf,KAAAA,GAAS,OACd;GACV,OAEG,oBAAC,SAAD;IACW,OAAAN,eAAekB,MAAMC,QAAQX,KAAIgB,MAAO;IACzCN;IACEC;IACD,OAAAA,OAAMM,SAAN;GAAoB,CAAA;EAC7B;EAETtB,EAAA,KAAAa;EAAAb,EAAA,KAAAK;EAAAL,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OAnBMc;AAmBN"}
|
package/dist/values.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"values.js","names":[],"sources":["../src/values.ts"],"sourcesContent":["import type { Field, Option } from '@panneau/protocol';\n\nimport type { ListColumn, ListItem } from './types';\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 value of a localized field in a locale: the locale (`fr-CA`), its language (`fr`), then the\n * first filled locale. Other values are returned as they are.\n */\nexport function getLocalizedValue(value: unknown, locale: string): unknown {\n if (!isRecord(value)) {\n return value;\n }\n const language = locale.split('-')[0] ?? locale;\n const filled = (candidate: unknown) =>\n candidate !== undefined && candidate !== null && candidate !== '';\n if (filled(value[locale])) {\n return value[locale];\n }\n if (filled(value[language])) {\n return value[language];\n }\n return Object.values(value).find(filled) ?? null;\n}\n\n/** Whether a field's values are keyed by locale. */\nexport function isLocalized(field: Field | null | undefined): boolean {\n return field?.localized === true;\n}\n\n/** The value of a column for an item: `item[id]`, in the locale for a localized field. */\nexport function getColumnValue(item: ListItem, column: ListColumn, locale: string): unknown {\n const value = item[column.field?.name ?? column.id];\n return isLocalized(column.field) ? getLocalizedValue(value, locale) : value;\n}\n\n/**\n * A value as plain text: strings and numbers as they are, references by their label, localized\n * values in the locale, lists joined with commas. For labels of items and for search.\n */\nexport function toText(value: unknown, locale: string): string {\n if (value === null || value === undefined) {\n return '';\n }\n if (typeof value === 'string') {\n return value;\n }\n if (typeof value === 'number' || typeof value === 'boolean') {\n return String(value);\n }\n if (Array.isArray(value)) {\n return value\n .map((entry) => toText(entry, locale))\n .filter((text) => text !== '')\n .join(', ');\n }\n if (isRecord(value)) {\n if (typeof value.label === 'string') {\n return value.label;\n }\n return toText(getLocalizedValue(value, locale), locale);\n }\n return '';\n}\n\n/** The options of a field, or none. */\nexport function getFieldOptions(field: Field | null | undefined): readonly Option[] {\n return field?.options ?? [];\n}\n\n/** The label of an option value, matched as a string (values from the URL are strings). */\nexport function getOptionLabel(options: readonly Option[], value: unknown): string | null {\n const option = options.find((candidate) => String(candidate.value) === String(value));\n return option?.label ?? null;\n}\n"],"mappings":";AAIA,
|
|
1
|
+
{"version":3,"file":"values.js","names":["Field","Option","ListColumn","ListItem","isRecord","value","Record","Array","isArray","getLocalizedValue","locale","language","split","filled","candidate","undefined","Object","values","find","isLocalized","field","localized","getColumnValue","item","column","name","id","toText","String","map","entry","filter","text","join","label","getFieldOptions","options","getOptionLabel","option"],"sources":["../src/values.ts"],"sourcesContent":["import type { Field, Option } from '@panneau/protocol';\n\nimport type { ListColumn, ListItem } from './types';\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 value of a localized field in a locale: the locale (`fr-CA`), its language (`fr`), then the\n * first filled locale. Other values are returned as they are.\n */\nexport function getLocalizedValue(value: unknown, locale: string): unknown {\n if (!isRecord(value)) {\n return value;\n }\n const language = locale.split('-')[0] ?? locale;\n const filled = (candidate: unknown) =>\n candidate !== undefined && candidate !== null && candidate !== '';\n if (filled(value[locale])) {\n return value[locale];\n }\n if (filled(value[language])) {\n return value[language];\n }\n return Object.values(value).find(filled) ?? null;\n}\n\n/** Whether a field's values are keyed by locale. */\nexport function isLocalized(field: Field | null | undefined): boolean {\n return field?.localized === true;\n}\n\n/** The value of a column for an item: `item[id]`, in the locale for a localized field. */\nexport function getColumnValue(item: ListItem, column: ListColumn, locale: string): unknown {\n const value = item[column.field?.name ?? column.id];\n return isLocalized(column.field) ? getLocalizedValue(value, locale) : value;\n}\n\n/**\n * A value as plain text: strings and numbers as they are, references by their label, localized\n * values in the locale, lists joined with commas. For labels of items and for search.\n */\nexport function toText(value: unknown, locale: string): string {\n if (value === null || value === undefined) {\n return '';\n }\n if (typeof value === 'string') {\n return value;\n }\n if (typeof value === 'number' || typeof value === 'boolean') {\n return String(value);\n }\n if (Array.isArray(value)) {\n return value\n .map((entry) => toText(entry, locale))\n .filter((text) => text !== '')\n .join(', ');\n }\n if (isRecord(value)) {\n if (typeof value.label === 'string') {\n return value.label;\n }\n return toText(getLocalizedValue(value, locale), locale);\n }\n return '';\n}\n\n/** The options of a field, or none. */\nexport function getFieldOptions(field: Field | null | undefined): readonly Option[] {\n return field?.options ?? [];\n}\n\n/** The label of an option value, matched as a string (values from the URL are strings). */\nexport function getOptionLabel(options: readonly Option[], value: unknown): string | null {\n const option = options.find((candidate) => String(candidate.value) === String(value));\n return option?.label ?? null;\n}\n"],"mappings":";AAIA,SAASI,SAASC,OAAkD;CAChE,OAAOA,UAAU,QAAQ,OAAOA,UAAU,YAAY,CAACE,MAAMC,QAAQH,KAAK;AAC9E;;;;;AAMA,SAAgBI,kBAAkBJ,OAAgBK,QAAyB;CACvE,IAAI,CAACN,SAASC,KAAK,GACf,OAAOA;CAEX,MAAMM,WAAWD,OAAOE,MAAM,GAAG,CAAC,CAAC,MAAMF;CACzC,MAAMG,UAAUC,cACZA,cAAcC,KAAAA,KAAaD,cAAc,QAAQA,cAAc;CACnE,IAAID,OAAOR,MAAMK,OAAO,GACpB,OAAOL,MAAMK;CAEjB,IAAIG,OAAOR,MAAMM,SAAS,GACtB,OAAON,MAAMM;CAEjB,OAAOK,OAAOC,OAAOZ,KAAK,CAAC,CAACa,KAAKL,MAAM,KAAK;AAChD;;AAGA,SAAgBM,YAAYC,OAA0C;CAClE,OAAOA,OAAOC,cAAc;AAChC;;AAGA,SAAgBC,eAAeC,MAAgBC,QAAoBd,QAAyB;CACxF,MAAML,QAAQkB,KAAKC,OAAOJ,OAAOK,QAAQD,OAAOE;CAChD,OAAOP,YAAYK,OAAOJ,KAAK,IAAIX,kBAAkBJ,OAAOK,MAAM,IAAIL;AAC1E;;;;;AAMA,SAAgBsB,OAAOtB,OAAgBK,QAAwB;CAC3D,IAAIL,UAAU,QAAQA,UAAUU,KAAAA,GAC5B,OAAO;CAEX,IAAI,OAAOV,UAAU,UACjB,OAAOA;CAEX,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,WAC9C,OAAOuB,OAAOvB,KAAK;CAEvB,IAAIE,MAAMC,QAAQH,KAAK,GACnB,OAAOA,MACFwB,KAAKC,UAAUH,OAAOG,OAAOpB,MAAM,CAAC,CAAC,CACrCqB,QAAQC,SAASA,SAAS,EAAE,CAAC,CAC7BC,KAAK,IAAI;CAElB,IAAI7B,SAASC,KAAK,GAAG;EACjB,IAAI,OAAOA,MAAM6B,UAAU,UACvB,OAAO7B,MAAM6B;EAEjB,OAAOP,OAAOlB,kBAAkBJ,OAAOK,MAAM,GAAGA,MAAM;CAC1D;CACA,OAAO;AACX;;AAGA,SAAgByB,gBAAgBf,OAAoD;CAChF,OAAOA,OAAOgB,WAAW,CAAA;AAC7B;;AAGA,SAAgBC,eAAeD,SAA4B/B,OAA+B;CAEtF,OADe+B,QAAQlB,MAAMJ,cAAcc,OAAOd,UAAUT,KAAK,MAAMuB,OAAOvB,KAAK,CAC5EiC,CAAAA,EAAQJ,SAAS;AAC5B"}
|
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.7",
|
|
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.7",
|
|
41
|
+
"@panneau/fields": "5.0.0-alpha.7",
|
|
42
|
+
"@panneau/intl": "5.0.0-alpha.7",
|
|
43
|
+
"@panneau/protocol": "5.0.0-alpha.7",
|
|
44
|
+
"@panneau/ui": "5.0.0-alpha.7",
|
|
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.7"
|
|
49
49
|
}
|
|
50
50
|
}
|