@protobase/ui 0.23.0 → 0.23.2
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/app/record-page.js +4 -5
- package/dist/data/use-list.d.ts +25 -22
- package/dist/data/use-list.js +2 -1
- package/dist/package.js +1 -1
- package/dist/record-view/record-sidebar.js +3 -2
- package/dist/shell/assets/{app-DS8CqqcQ.js → app-etWQCzpG.js} +6 -6
- package/dist/shell/assets/index-B-IciGPG.css +2 -0
- package/dist/shell/assets/{index-Ce0IvdKu.js → index-COUvd4Y8.js} +1 -1
- package/dist/shell/assets/{maplibre-D-iUk10F.js → maplibre--7-Evlih.js} +1 -1
- package/dist/shell/assets/{markdown-content-CRL_FLlG.js → markdown-content-BvbCIheC.js} +1 -1
- package/dist/shell/assets/{record-map-FtrcvB_a.js → record-map-B56wGcbR.js} +1 -1
- package/dist/shell/assets/{records-map-ehB35blR.js → records-map-BStfyJ5v.js} +1 -1
- package/dist/shell/assets/{shared-protobase-ui-BKhXO4PS.js → shared-protobase-ui-OubT4zPz.js} +1 -1
- package/dist/shell/index.html +4 -4
- package/dist/shell/protobase.shell.json +1 -1
- package/package.json +4 -4
- package/dist/shell/assets/index-BflGBHJH.css +0 -2
package/dist/app/record-page.js
CHANGED
|
@@ -13,6 +13,7 @@ import { Field } from "../record-view/field.js";
|
|
|
13
13
|
import { Section } from "../record-view/section.js";
|
|
14
14
|
import { MetadataCard } from "../record-view/record-sidebar.js";
|
|
15
15
|
import { RecordHeader } from "../record-view/record-header.js";
|
|
16
|
+
import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
|
|
16
17
|
import { isMarkdown } from "../markdown/markdown-hint.js";
|
|
17
18
|
import { recordTitle } from "../live/model-helpers.js";
|
|
18
19
|
import { contactFormat } from "../live/contact-links.js";
|
|
@@ -32,7 +33,6 @@ import { ErrorBanner } from "./error-banner.js";
|
|
|
32
33
|
import { useProjectUi } from "./pages/project-ui.js";
|
|
33
34
|
import { shownWidget } from "./field-types/shown-widget.js";
|
|
34
35
|
import { WidgetPart } from "./field-types/widget-part.js";
|
|
35
|
-
import { Markdown } from "../markdown/markdown.js";
|
|
36
36
|
import { ContactLink } from "../live/contact-link.js";
|
|
37
37
|
import { FieldEditor } from "./field-editor.js";
|
|
38
38
|
import { fieldMessage } from "./field-errors.js";
|
|
@@ -303,25 +303,24 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
|
|
|
303
303
|
label: hint(name)?.label ?? humanize(name),
|
|
304
304
|
value: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
|
|
305
305
|
}];
|
|
306
|
-
const text = displayValue(field, stored.record[name], hint(name));
|
|
307
306
|
const value = stored.record[name];
|
|
308
|
-
const
|
|
307
|
+
const text = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "" ? markdownExcerpt(value) : displayValue(field, value, hint(name));
|
|
309
308
|
const contact = field.type === "text" && typeof value === "string" && value !== "" ? contactFormat(hint(name)) : void 0;
|
|
310
309
|
const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
|
|
311
310
|
value,
|
|
312
311
|
hints: hint(name),
|
|
313
312
|
children: text
|
|
314
|
-
}) :
|
|
313
|
+
}) : contact ? /* @__PURE__ */ jsx(ContactLink, {
|
|
315
314
|
format: contact,
|
|
316
315
|
value: text
|
|
317
316
|
}) : /* @__PURE__ */ jsx("strong", {
|
|
318
317
|
title: valueTitle(field, value, void 0, hint(name)),
|
|
319
|
-
className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
|
|
320
318
|
children: text
|
|
321
319
|
});
|
|
322
320
|
const shown = shownWidget(fieldTypes, field, hint(name));
|
|
323
321
|
return [{
|
|
324
322
|
label: hint(name)?.label ?? humanize(name),
|
|
323
|
+
title: text,
|
|
325
324
|
value: shown ? /* @__PURE__ */ jsx(WidgetPart, {
|
|
326
325
|
shown,
|
|
327
326
|
part: "display",
|
package/dist/data/use-list.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FilterInput, ListPage } from "@protobase/client";
|
|
2
|
+
import { InfiniteData, QueryKey, UseInfiniteQueryOptions } from "@tanstack/react-query";
|
|
2
3
|
//#region src/data/use-list.d.ts
|
|
3
4
|
export type UseListParams = {
|
|
4
5
|
filter?: FilterInput;
|
|
@@ -8,13 +9,15 @@ export type UseListParams = {
|
|
|
8
9
|
/** Start at this page token instead of the first page, for example one from `useAnchors`. */
|
|
9
10
|
startToken?: string;
|
|
10
11
|
enabled?: boolean;
|
|
12
|
+
/** TanStack Query's `refetchInterval`: refetch every so many milliseconds, `false` to stop, or a function of the query. */
|
|
13
|
+
refetchInterval?: UseInfiniteQueryOptions<ListPage<Row>, Error, InfiniteData<ListPage<Row>>, QueryKey, string>['refetchInterval'];
|
|
11
14
|
};
|
|
12
15
|
type Row = Record<string, unknown>;
|
|
13
16
|
/** Infinite pages of a resource, following `next_page_token`. */
|
|
14
|
-
export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, startToken, enabled }?: UseListParams) => {
|
|
17
|
+
export declare const useList: (resource: string, { filter, orderBy, pageSize, fields, startToken, enabled, refetchInterval }?: UseListParams) => {
|
|
15
18
|
items: Row[];
|
|
16
19
|
totalEstimate: number | undefined;
|
|
17
|
-
data:
|
|
20
|
+
data: InfiniteData<ListPage<Row>, unknown>;
|
|
18
21
|
error: Error;
|
|
19
22
|
isError: true;
|
|
20
23
|
isPending: false;
|
|
@@ -24,8 +27,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
24
27
|
isSuccess: false;
|
|
25
28
|
isPlaceholderData: false;
|
|
26
29
|
status: "error";
|
|
27
|
-
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
28
|
-
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
30
|
+
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
31
|
+
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
29
32
|
hasNextPage: boolean;
|
|
30
33
|
hasPreviousPage: boolean;
|
|
31
34
|
isFetchNextPageError: boolean;
|
|
@@ -45,12 +48,12 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
45
48
|
isRefetching: boolean;
|
|
46
49
|
isStale: boolean;
|
|
47
50
|
isEnabled: boolean;
|
|
48
|
-
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<
|
|
51
|
+
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
49
52
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
50
53
|
} | {
|
|
51
54
|
items: Row[];
|
|
52
55
|
totalEstimate: number | undefined;
|
|
53
|
-
data:
|
|
56
|
+
data: InfiniteData<ListPage<Row>, unknown>;
|
|
54
57
|
error: null;
|
|
55
58
|
isError: false;
|
|
56
59
|
isPending: false;
|
|
@@ -62,8 +65,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
62
65
|
isSuccess: true;
|
|
63
66
|
isPlaceholderData: false;
|
|
64
67
|
status: "success";
|
|
65
|
-
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
66
|
-
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
68
|
+
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
69
|
+
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
67
70
|
hasNextPage: boolean;
|
|
68
71
|
hasPreviousPage: boolean;
|
|
69
72
|
isFetchingNextPage: boolean;
|
|
@@ -81,7 +84,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
81
84
|
isRefetching: boolean;
|
|
82
85
|
isStale: boolean;
|
|
83
86
|
isEnabled: boolean;
|
|
84
|
-
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<
|
|
87
|
+
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
85
88
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
86
89
|
} | {
|
|
87
90
|
items: Row[];
|
|
@@ -98,8 +101,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
98
101
|
isSuccess: false;
|
|
99
102
|
isPlaceholderData: false;
|
|
100
103
|
status: "error";
|
|
101
|
-
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
102
|
-
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
104
|
+
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
105
|
+
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
103
106
|
hasNextPage: boolean;
|
|
104
107
|
hasPreviousPage: boolean;
|
|
105
108
|
isFetchingNextPage: boolean;
|
|
@@ -117,7 +120,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
117
120
|
isRefetching: boolean;
|
|
118
121
|
isStale: boolean;
|
|
119
122
|
isEnabled: boolean;
|
|
120
|
-
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<
|
|
123
|
+
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
121
124
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
122
125
|
} | {
|
|
123
126
|
items: Row[];
|
|
@@ -134,8 +137,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
134
137
|
isSuccess: false;
|
|
135
138
|
isPlaceholderData: false;
|
|
136
139
|
status: "pending";
|
|
137
|
-
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
138
|
-
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
140
|
+
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
141
|
+
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
139
142
|
hasNextPage: boolean;
|
|
140
143
|
hasPreviousPage: boolean;
|
|
141
144
|
isFetchingNextPage: boolean;
|
|
@@ -153,7 +156,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
153
156
|
isRefetching: boolean;
|
|
154
157
|
isStale: boolean;
|
|
155
158
|
isEnabled: boolean;
|
|
156
|
-
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<
|
|
159
|
+
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
157
160
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
158
161
|
} | {
|
|
159
162
|
items: Row[];
|
|
@@ -169,8 +172,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
169
172
|
isSuccess: false;
|
|
170
173
|
isPlaceholderData: false;
|
|
171
174
|
status: "pending";
|
|
172
|
-
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
173
|
-
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
175
|
+
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
176
|
+
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
174
177
|
hasNextPage: boolean;
|
|
175
178
|
hasPreviousPage: boolean;
|
|
176
179
|
isFetchingNextPage: boolean;
|
|
@@ -189,12 +192,12 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
189
192
|
isRefetching: boolean;
|
|
190
193
|
isStale: boolean;
|
|
191
194
|
isEnabled: boolean;
|
|
192
|
-
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<
|
|
195
|
+
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
193
196
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
194
197
|
} | {
|
|
195
198
|
items: Row[];
|
|
196
199
|
totalEstimate: number | undefined;
|
|
197
|
-
data:
|
|
200
|
+
data: InfiniteData<ListPage<Row>, unknown>;
|
|
198
201
|
isError: false;
|
|
199
202
|
error: null;
|
|
200
203
|
isPending: false;
|
|
@@ -206,8 +209,8 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
206
209
|
isFetchNextPageError: false;
|
|
207
210
|
isFetchPreviousPageError: false;
|
|
208
211
|
status: "success";
|
|
209
|
-
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
210
|
-
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<
|
|
212
|
+
fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
213
|
+
fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
211
214
|
hasNextPage: boolean;
|
|
212
215
|
hasPreviousPage: boolean;
|
|
213
216
|
isFetchingNextPage: boolean;
|
|
@@ -225,7 +228,7 @@ export declare const useList: (resource: string, { filter, orderBy, pageSize, fi
|
|
|
225
228
|
isRefetching: boolean;
|
|
226
229
|
isStale: boolean;
|
|
227
230
|
isEnabled: boolean;
|
|
228
|
-
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<
|
|
231
|
+
refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ListPage<Row>, unknown>, Error>>;
|
|
229
232
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
230
233
|
};
|
|
231
234
|
//#endregion
|
package/dist/data/use-list.js
CHANGED
|
@@ -4,12 +4,13 @@ import { filterText } from "@protobase/client";
|
|
|
4
4
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
5
5
|
//#region src/data/use-list.ts
|
|
6
6
|
/** Infinite pages of a resource, following `next_page_token`. */
|
|
7
|
-
const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true } = {}) => {
|
|
7
|
+
const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true, refetchInterval } = {}) => {
|
|
8
8
|
const client = useClient();
|
|
9
9
|
const text = filterText(filter) ?? "";
|
|
10
10
|
const query = useInfiniteQuery({
|
|
11
11
|
queryKey: [...keys.list(resource, text, orderBy ?? "", pageSize, startToken), fields?.join(",") ?? ""],
|
|
12
12
|
enabled,
|
|
13
|
+
refetchInterval,
|
|
13
14
|
initialPageParam: startToken,
|
|
14
15
|
queryFn: ({ pageParam }) => client.list(resource, {
|
|
15
16
|
filter: text,
|
package/dist/package.js
CHANGED
|
@@ -2,14 +2,15 @@ import "lucide-react";
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
//#region src/record-view/record-sidebar.tsx
|
|
4
4
|
const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
|
|
5
|
-
className: "grid grid-cols-[
|
|
5
|
+
className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2",
|
|
6
6
|
children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
|
|
7
7
|
className: "contents",
|
|
8
8
|
children: [/* @__PURE__ */ jsx("dt", {
|
|
9
9
|
className: "text-muted-foreground",
|
|
10
10
|
children: row.label
|
|
11
11
|
}), /* @__PURE__ */ jsx("dd", {
|
|
12
|
-
|
|
12
|
+
title: row.title,
|
|
13
|
+
className: "truncate text-right tabular-nums text-foreground",
|
|
13
14
|
children: row.value
|
|
14
15
|
})]
|
|
15
16
|
}, row.label))
|