@asteby/metacore-runtime-react 18.1.0 → 18.3.0
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/CHANGELOG.md +38 -0
- package/dist/dialogs/dynamic-record.d.ts +86 -2
- package/dist/dialogs/dynamic-record.d.ts.map +1 -1
- package/dist/dialogs/dynamic-record.js +305 -88
- package/dist/dynamic-form.d.ts.map +1 -1
- package/dist/dynamic-form.js +29 -3
- package/dist/dynamic-relation-helpers.d.ts.map +1 -1
- package/dist/dynamic-relation-helpers.js +18 -0
- package/dist/dynamic-relation.d.ts.map +1 -1
- package/dist/dynamic-relation.js +14 -0
- package/dist/dynamic-select-field.d.ts +29 -1
- package/dist/dynamic-select-field.d.ts.map +1 -1
- package/dist/dynamic-select-field.js +4 -3
- package/dist/image-url-context.d.ts +13 -0
- package/dist/image-url-context.d.ts.map +1 -0
- package/dist/image-url-context.js +17 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/__tests__/dynamic-relation.test.ts +17 -0
- package/src/dialogs/dynamic-record.tsx +476 -114
- package/src/dynamic-form.tsx +33 -2
- package/src/dynamic-relation-helpers.ts +18 -0
- package/src/dynamic-relation.tsx +19 -0
- package/src/dynamic-select-field.tsx +11 -3
- package/src/image-url-context.tsx +23 -0
- package/src/index.ts +2 -1
package/dist/dynamic-form.js
CHANGED
|
@@ -77,10 +77,35 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
|
|
|
77
77
|
const fullWidth = isLineItemsField(field) ||
|
|
78
78
|
resolveWidget(field) === 'textarea' ||
|
|
79
79
|
resolveWidget(field) === 'richtext';
|
|
80
|
-
return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), _jsx(FieldRenderer, { field: field, value: values[field.key], onChange: (v) => update(field.key, v) }), errors[field.key] && (_jsx("span", { className: "text-red-500 text-sm", role: "alert", children: errors[field.key] }))] }, field.key));
|
|
80
|
+
return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), _jsx(FieldRenderer, { field: field, value: values[field.key], onChange: (v) => update(field.key, v), initialValues: initialValues }), errors[field.key] && (_jsx("span", { className: "text-red-500 text-sm", role: "alert", children: errors[field.key] }))] }, field.key));
|
|
81
81
|
}) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })), _jsx(Button, { type: "submit", disabled: submitting || disabled || balanceBlocked, children: submitLabel })] })] }));
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
// seedOptionFromSibling builds a pre-resolved option for an FK field from the
|
|
84
|
+
// resolved sibling the backend served on the initial record (e.g. a line item's
|
|
85
|
+
// `product = { value, label, image }` alongside `product_id`). Lets the picker
|
|
86
|
+
// show the name + thumbnail for an existing value without a lookup. Returns
|
|
87
|
+
// undefined when the sibling carries nothing renderable.
|
|
88
|
+
function seedOptionFromSibling(field, value, initialValues) {
|
|
89
|
+
if (!field.key.endsWith('_id'))
|
|
90
|
+
return undefined;
|
|
91
|
+
const sib = initialValues?.[field.key.replace(/_id$/, '')];
|
|
92
|
+
if (!sib || typeof sib !== 'object')
|
|
93
|
+
return undefined;
|
|
94
|
+
const label = sib.label ?? sib.name ?? '';
|
|
95
|
+
if (!label && !sib.image)
|
|
96
|
+
return undefined;
|
|
97
|
+
const id = String(sib.value ?? sib.id ?? value ?? '');
|
|
98
|
+
return {
|
|
99
|
+
id,
|
|
100
|
+
value: id,
|
|
101
|
+
label: String(label),
|
|
102
|
+
name: String(label),
|
|
103
|
+
image: sib.image,
|
|
104
|
+
color: sib.color,
|
|
105
|
+
icon: sib.icon,
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
function FieldRenderer({ field, value, onChange, initialValues }) {
|
|
84
109
|
// Repeatable line-items group → render the row grid. Its value is an array
|
|
85
110
|
// of row objects rather than a scalar.
|
|
86
111
|
if (isLineItemsField(field)) {
|
|
@@ -91,7 +116,8 @@ function FieldRenderer({ field, value, onChange }) {
|
|
|
91
116
|
// Preferred for FK fields with large option sets — no UUID typing, no
|
|
92
117
|
// dumping every row into a plain <select>.
|
|
93
118
|
if (widget === 'dynamic_select') {
|
|
94
|
-
|
|
119
|
+
const seedOption = seedOptionFromSibling(field, value, initialValues);
|
|
120
|
+
return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange, seedOption: seedOption });
|
|
95
121
|
}
|
|
96
122
|
// File upload → themed picker that POSTs to the host upload endpoint and
|
|
97
123
|
// stores the returned file url/path as the field value.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic-relation-helpers.d.ts","sourceRoot":"","sources":["../src/dynamic-relation-helpers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAiB9E,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAAG,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"dynamic-relation-helpers.d.ts","sourceRoot":"","sources":["../src/dynamic-relation-helpers.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,19 @@ function isEnumLikeColumn(col) {
|
|
|
10
10
|
renderAs === 'badge' ||
|
|
11
11
|
!!col.options?.length);
|
|
12
12
|
}
|
|
13
|
+
// Server-managed / audit columns that must never become editable form inputs.
|
|
14
|
+
// They're set by the backend and several ship as resolved objects (e.g.
|
|
15
|
+
// `created_by = { name, avatar, email }`) that would render as `[object Object]`.
|
|
16
|
+
const MANAGED_RELATION_COLUMNS = new Set([
|
|
17
|
+
'id',
|
|
18
|
+
'created_at',
|
|
19
|
+
'updated_at',
|
|
20
|
+
'deleted_at',
|
|
21
|
+
'created_by',
|
|
22
|
+
'created_by_id',
|
|
23
|
+
'updated_by',
|
|
24
|
+
'updated_by_id',
|
|
25
|
+
]);
|
|
13
26
|
// Pulls a human label off a resolved relation/user object a backend serves:
|
|
14
27
|
// `{ value, label }` (FK sibling), `{ name, … }` (user object such as
|
|
15
28
|
// created_by) or `{ title }`. Returns undefined for plain/empty objects so the
|
|
@@ -122,6 +135,11 @@ export function deriveRelationFormFields(metadata, foreignKey) {
|
|
|
122
135
|
continue;
|
|
123
136
|
if (col.hidden)
|
|
124
137
|
continue;
|
|
138
|
+
// Managed/audit columns are server-owned and ship resolved objects
|
|
139
|
+
// (`created_by = { name, avatar, … }`); making them editable inputs
|
|
140
|
+
// renders `[object Object]`. Never surface them in the inline form.
|
|
141
|
+
if (MANAGED_RELATION_COLUMNS.has(col.key.toLowerCase()))
|
|
142
|
+
continue;
|
|
125
143
|
out.push({
|
|
126
144
|
key: col.key,
|
|
127
145
|
label: col.label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic-relation.d.ts","sourceRoot":"","sources":["../src/dynamic-relation.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dynamic-relation.d.ts","sourceRoot":"","sources":["../src/dynamic-relation.tsx"],"names":[],"mappings":"AA6CA,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,wBAAwB,EACxB,aAAa,EACb,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,cAAc,GACjB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,wBAAwB,EAAE,MAAM,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,WAAW,EAAE,MAAM,CAAA;CACtB;AAiBD,UAAU,WAAW;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IACzC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAC9D,IAAI,EAAE,aAAa,CAAA;IACnB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IAC/D,IAAI,EAAE,cAAc,CAAA;IACpB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,oBAAoB,GAC1B,6BAA6B,GAC7B,8BAA8B,CAAA;AAEpC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAK1D"}
|
package/dist/dynamic-relation.js
CHANGED
|
@@ -10,6 +10,8 @@ import { Plus, Trash2, Pencil } from 'lucide-react';
|
|
|
10
10
|
import { useApi } from './api-context';
|
|
11
11
|
import { useMetadataCache } from './metadata-cache';
|
|
12
12
|
import { DynamicForm } from './dynamic-form';
|
|
13
|
+
import { useImageUrl } from './image-url-context';
|
|
14
|
+
import { OptionThumb } from './dynamic-select-field';
|
|
13
15
|
import { useOptionsResolver } from './use-options-resolver';
|
|
14
16
|
import { buildCreatePayload, buildPivotAttachPayload, buildPivotRowIndex, buildRelationFilterParams, deriveRelationFormFields, diffSelection, extractSelectedTargetIds, formatRelationCell, pickOptionLabel, relationRowKey, } from './dynamic-relation-helpers';
|
|
15
17
|
export { buildCreatePayload, buildPivotAttachPayload, buildPivotRowIndex, buildRelationFilterParams, deriveRelationFormFields, diffSelection, extractSelectedTargetIds, formatRelationCell, objectLabel, pickOptionLabel, relationRowKey, } from './dynamic-relation-helpers';
|
|
@@ -35,6 +37,7 @@ export function DynamicRelation(props) {
|
|
|
35
37
|
}
|
|
36
38
|
function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoint, hiddenColumns = [], canCreate = true, canDelete = true, canEdit = true, strings, className, onChange, }) {
|
|
37
39
|
const api = useApi();
|
|
40
|
+
const getImageUrl = useImageUrl();
|
|
38
41
|
const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache();
|
|
39
42
|
const cachedMeta = getMetadata(model);
|
|
40
43
|
const labels = { ...DEFAULT_STRINGS, ...(strings || {}) };
|
|
@@ -136,6 +139,17 @@ function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoin
|
|
|
136
139
|
}, [api, dataEndpoint, fetchAll, onChange, rowToDelete]);
|
|
137
140
|
return (_jsxs("div", { className: className, "data-relation-kind": kind, "data-relation-model": model, children: [(labels.title || canCreate) && (_jsxs("div", { className: "flex items-center justify-between pb-3", children: [labels.title ? _jsx("h3", { className: "text-sm font-medium", children: labels.title }) : _jsx("span", {}), canCreate && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => { setEditingRow(null); setFormOpen(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), labels.addLabel] }))] })), loading ? (_jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Skeleton, { className: "h-10 w-full" }, `rel-skeleton-${i}`))) })) : rows.length === 0 ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: labels.emptyState })) : (_jsx("div", { className: "border rounded-md divide-y bg-card", children: rows.map((row, idx) => (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [_jsx("div", { className: "flex-1 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-2 text-sm", children: visibleColumns.map(col => {
|
|
138
141
|
const cell = formatRelationCell(row, col);
|
|
142
|
+
// FK column whose backend-resolved sibling
|
|
143
|
+
// carries an image → render a thumbnail + label
|
|
144
|
+
// instead of plain text (e.g. a line item's
|
|
145
|
+
// product photo). The sibling is the column key
|
|
146
|
+
// with the trailing `_id` stripped.
|
|
147
|
+
const isFk = !!col.ref || col.key.endsWith('_id');
|
|
148
|
+
const sibling = isFk ? row[col.key.replace(/_id$/, '')] : undefined;
|
|
149
|
+
if (sibling && typeof sibling === 'object' && sibling.image) {
|
|
150
|
+
const label = sibling.label ?? sibling.name ?? cell;
|
|
151
|
+
return (_jsxs("span", { className: "flex min-w-0 items-center gap-2", title: String(label), children: [_jsx(OptionThumb, { image: getImageUrl(sibling.image), size: 20 }), _jsx("span", { className: "truncate", children: label })] }, col.key));
|
|
152
|
+
}
|
|
139
153
|
return (_jsx("span", { className: "truncate", title: cell, children: cell }, col.key));
|
|
140
154
|
}) }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [canEdit && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => { setEditingRow(row); setFormOpen(true); }, "aria-label": labels.editLabel, children: _jsx(Pencil, { className: "h-4 w-4" }) })), canDelete && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setRowToDelete(row), "aria-label": labels.removeLabel, children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }, relationRowKey(row, idx, foreignKey)))) })), _jsx(Dialog, { open: formOpen, onOpenChange: (open) => { setFormOpen(open); if (!open)
|
|
141
155
|
setEditingRow(null); }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editingRow ? labels.editLabel : labels.addLabel }) }), _jsx(DynamicForm, { fields: formFields, initialValues: editingRow || undefined, onSubmit: handleSubmit, onCancel: () => { setFormOpen(false); setEditingRow(null); }, submitLabel: labels.saveLabel, cancelLabel: labels.cancelLabel, disabled: submitting })] }) }), _jsx(AlertDialog, { open: !!rowToDelete, onOpenChange: (open) => !open && setRowToDelete(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.confirmRemoveTitle }), _jsx(AlertDialogDescription, { children: labels.confirmRemoveDescription })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: submitting, children: labels.cancelLabel }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); handleDelete(); }, className: "bg-red-600 hover:bg-red-700", disabled: submitting, children: labels.removeLabel })] })] }) })] }));
|
|
@@ -1,9 +1,37 @@
|
|
|
1
|
+
import { type ResolvedOption } from './use-options-resolver';
|
|
1
2
|
import type { ActionFieldDef } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Small square thumbnail for an option's `image`. Falls back to a neutral
|
|
5
|
+
* placeholder icon when the option has no image so rows/triggers stay aligned.
|
|
6
|
+
* `size` is in pixels (kept small — 20–24px — so the picker reads as a list,
|
|
7
|
+
* not a gallery). Inline style for the box dimensions: arbitrary Tailwind
|
|
8
|
+
* classes from a federated addon don't always survive the host's class scan.
|
|
9
|
+
*/
|
|
10
|
+
export declare function OptionThumb({ image, size }: {
|
|
11
|
+
image?: string | null;
|
|
12
|
+
size?: number;
|
|
13
|
+
}): import("react").JSX.Element;
|
|
14
|
+
/**
|
|
15
|
+
* Leading visual for an option: a photo thumbnail (FK relations with an image),
|
|
16
|
+
* else a declared icon, else a color dot (enum/status options with a color).
|
|
17
|
+
* Returns null when the option carries none, so plain text options stay plain.
|
|
18
|
+
*/
|
|
19
|
+
export declare function OptionLead({ option, size, }: {
|
|
20
|
+
option?: Pick<ResolvedOption, 'image' | 'color' | 'icon'> | null;
|
|
21
|
+
size?: number;
|
|
22
|
+
}): import("react").JSX.Element | null;
|
|
2
23
|
export interface DynamicSelectFieldProps {
|
|
3
24
|
field: ActionFieldDef;
|
|
4
25
|
value: any;
|
|
5
26
|
onChange: (v: any) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Pre-resolved option for the CURRENT value (label + image/color/icon) the
|
|
29
|
+
* caller already has — e.g. the relation sibling the table served. Lets the
|
|
30
|
+
* trigger show the name + thumbnail for an existing value without waiting for
|
|
31
|
+
* a lookup (which only loads once the popover opens). Matched by id == value.
|
|
32
|
+
*/
|
|
33
|
+
seedOption?: ResolvedOption | null;
|
|
6
34
|
}
|
|
7
|
-
export declare function DynamicSelectField({ field, value, onChange }: DynamicSelectFieldProps): import("react").JSX.Element;
|
|
35
|
+
export declare function DynamicSelectField({ field, value, onChange, seedOption }: DynamicSelectFieldProps): import("react").JSX.Element;
|
|
8
36
|
export default DynamicSelectField;
|
|
9
37
|
//# sourceMappingURL=dynamic-select-field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BzF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,CAAA;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCAwBA;AAqBD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,+BA2KjG;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -36,7 +36,7 @@ import { getFieldRef } from './dynamic-form-schema';
|
|
|
36
36
|
* not a gallery). Inline style for the box dimensions: arbitrary Tailwind
|
|
37
37
|
* classes from a federated addon don't always survive the host's class scan.
|
|
38
38
|
*/
|
|
39
|
-
function OptionThumb({ image, size = 20 }) {
|
|
39
|
+
export function OptionThumb({ image, size = 20 }) {
|
|
40
40
|
const box = { width: size, height: size };
|
|
41
41
|
if (!image) {
|
|
42
42
|
return (_jsx("span", { className: "text-muted-foreground bg-muted flex shrink-0 items-center justify-center rounded-sm", style: box, "aria-hidden": true, children: _jsx(ImageIcon, { className: "size-3 opacity-60" }) }));
|
|
@@ -53,7 +53,7 @@ function OptionThumb({ image, size = 20 }) {
|
|
|
53
53
|
* else a declared icon, else a color dot (enum/status options with a color).
|
|
54
54
|
* Returns null when the option carries none, so plain text options stay plain.
|
|
55
55
|
*/
|
|
56
|
-
function OptionLead({ option, size = 20, }) {
|
|
56
|
+
export function OptionLead({ option, size = 20, }) {
|
|
57
57
|
if (!option)
|
|
58
58
|
return null;
|
|
59
59
|
if (option.image)
|
|
@@ -79,7 +79,7 @@ function useDebounced(value, ms) {
|
|
|
79
79
|
}, [value, ms]);
|
|
80
80
|
return debounced;
|
|
81
81
|
}
|
|
82
|
-
export function DynamicSelectField({ field, value, onChange }) {
|
|
82
|
+
export function DynamicSelectField({ field, value, onChange, seedOption }) {
|
|
83
83
|
const [open, setOpen] = useState(false);
|
|
84
84
|
const [search, setSearch] = useState('');
|
|
85
85
|
const debounced = useDebounced(search, 250);
|
|
@@ -107,6 +107,7 @@ export function DynamicSelectField({ field, value, onChange }) {
|
|
|
107
107
|
// label and its thumbnail.
|
|
108
108
|
const selectedOption = (picked && String(picked.id) === String(value) ? picked : null) ??
|
|
109
109
|
options.find((o) => String(o.id) === String(value)) ??
|
|
110
|
+
(seedOption && String(seedOption.id) === String(value) ? seedOption : null) ??
|
|
110
111
|
null;
|
|
111
112
|
const selectedLabel = selectedOption?.label ?? (value ? String(value) : '');
|
|
112
113
|
// Only switch the picker into "with thumbnails" mode when the data actually
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/** Resolves a (possibly relative) storage path into a fetchable URL. */
|
|
2
|
+
export type GetImageUrl = (path: string | null | undefined) => string;
|
|
3
|
+
/** Default resolver: pass the path through unchanged (works same-origin). */
|
|
4
|
+
export declare const identityImageUrl: GetImageUrl;
|
|
5
|
+
/**
|
|
6
|
+
* Threads the host's image-url resolver to nested field/cell components without
|
|
7
|
+
* prop-drilling. Provided by `DynamicRecordDialog`; consumers outside a provider
|
|
8
|
+
* fall back to `identityImageUrl` (the relative path, which renders same-origin).
|
|
9
|
+
*/
|
|
10
|
+
export declare const ImageUrlContext: import("react").Context<GetImageUrl>;
|
|
11
|
+
/** Reads the nearest image-url resolver (identity outside a provider). */
|
|
12
|
+
export declare const useImageUrl: () => GetImageUrl;
|
|
13
|
+
//# sourceMappingURL=image-url-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"image-url-context.d.ts","sourceRoot":"","sources":["../src/image-url-context.tsx"],"names":[],"mappings":"AAQA,wEAAwE;AACxE,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,MAAM,CAAA;AAErE,6EAA6E;AAC7E,eAAO,MAAM,gBAAgB,EAAE,WAA4B,CAAA;AAE3D;;;;GAIG;AACH,eAAO,MAAM,eAAe,sCAA+C,CAAA;AAE3E,0EAA0E;AAC1E,eAAO,MAAM,WAAW,mBAAoC,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Image-url resolver context — its own module so any renderer (record dialog,
|
|
2
|
+
// relation cells, …) can consume the host's storage-path → URL resolver without
|
|
3
|
+
// importing from `dialogs/dynamic-record`. That dialog imports
|
|
4
|
+
// `dynamic-relations` (which renders `dynamic-relation`), so the relation cell
|
|
5
|
+
// cannot import the context back from the dialog without a circular import —
|
|
6
|
+
// hence this standalone module is the single source of truth.
|
|
7
|
+
import { createContext, useContext } from 'react';
|
|
8
|
+
/** Default resolver: pass the path through unchanged (works same-origin). */
|
|
9
|
+
export const identityImageUrl = (p) => p ?? '';
|
|
10
|
+
/**
|
|
11
|
+
* Threads the host's image-url resolver to nested field/cell components without
|
|
12
|
+
* prop-drilling. Provided by `DynamicRecordDialog`; consumers outside a provider
|
|
13
|
+
* fall back to `identityImageUrl` (the relative path, which renders same-origin).
|
|
14
|
+
*/
|
|
15
|
+
export const ImageUrlContext = createContext(identityImageUrl);
|
|
16
|
+
/** Reads the nearest image-url resolver (identity outside a provider). */
|
|
17
|
+
export const useImageUrl = () => useContext(ImageUrlContext);
|
package/dist/index.d.ts
CHANGED
|
@@ -19,7 +19,8 @@ export type { ColumnFilterConfig, FilterOption as DynamicColumnFilterOption, Get
|
|
|
19
19
|
export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, relationKeyFor, resolveRelationLabel, type DynamicColumnsHelpers, } from './dynamic-columns';
|
|
20
20
|
export { humanizeToken } from './dynamic-columns-helpers';
|
|
21
21
|
export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid';
|
|
22
|
-
export { DynamicRecordDialog } from './dialogs/dynamic-record';
|
|
22
|
+
export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record';
|
|
23
|
+
export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } from './dialogs/dynamic-record';
|
|
23
24
|
export { CreateRecordDialog } from './dialogs/create-record-dialog';
|
|
24
25
|
export { ViewRecordDialog } from './dialogs/view-record-dialog';
|
|
25
26
|
export type { ModelKey, ModelSchema, CreateResult, RecordDialogProps, CreateRecordDialogProps, ViewRecordDialogProps, } from './dialogs/types';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,qBAAqB,EACrB,KAAK,gBAAgB,GACxB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACH,kBAAkB,EAClB,eAAe,EACf,KAAK,uBAAuB,EAC5B,KAAK,eAAe,GACvB,MAAM,wBAAwB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,WAAW,EAChB,KAAK,wBAAwB,GAChC,MAAM,wBAAwB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,OAAO,EACH,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,8BAA8B,GACtC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACH,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,EACxB,WAAW,EACX,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,GAC9B,MAAM,yBAAyB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,YAAY,EACR,kBAAkB,EAClB,YAAY,IAAI,yBAAyB,EACzC,iBAAiB,EACjB,oBAAoB,GACvB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACH,wBAAwB,EACxB,4BAA4B,EAC5B,cAAc,EACd,oBAAoB,EACpB,KAAK,qBAAqB,GAC7B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -23,7 +23,7 @@ export * from './dynamic-icon';
|
|
|
23
23
|
export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, relationKeyFor, resolveRelationLabel, } from './dynamic-columns';
|
|
24
24
|
export { humanizeToken } from './dynamic-columns-helpers';
|
|
25
25
|
export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid';
|
|
26
|
-
export { DynamicRecordDialog } from './dialogs/dynamic-record';
|
|
26
|
+
export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record';
|
|
27
27
|
export { CreateRecordDialog } from './dialogs/create-record-dialog';
|
|
28
28
|
export { ViewRecordDialog } from './dialogs/view-record-dialog';
|
|
29
29
|
export { ExportDialog } from './dialogs/export';
|
package/package.json
CHANGED
|
@@ -114,6 +114,23 @@ describe('deriveRelationFormFields', () => {
|
|
|
114
114
|
expect(fields.find(f => f.key === 'id')).toBeUndefined()
|
|
115
115
|
})
|
|
116
116
|
|
|
117
|
+
// Server-managed / audit columns ship as resolved objects (created_by =
|
|
118
|
+
// { name, avatar }) and must never become editable inputs ([object Object]).
|
|
119
|
+
it('omite columnas managed/audit aunque no estén hidden', () => {
|
|
120
|
+
const meta: Pick<TableMetadata, 'columns'> = {
|
|
121
|
+
columns: [
|
|
122
|
+
{ key: 'sku', label: 'SKU', type: 'text', sortable: true, filterable: true },
|
|
123
|
+
{ key: 'created_by', label: 'Creado por', type: 'text', sortable: false, filterable: false },
|
|
124
|
+
{ key: 'created_by_id', label: 'Creado por id', type: 'text', sortable: false, filterable: false },
|
|
125
|
+
{ key: 'created_at', label: 'Creado', type: 'date', sortable: true, filterable: false },
|
|
126
|
+
{ key: 'updated_at', label: 'Actualizado', type: 'date', sortable: true, filterable: false },
|
|
127
|
+
{ key: 'deleted_at', label: 'Eliminado', type: 'date', sortable: false, filterable: false },
|
|
128
|
+
],
|
|
129
|
+
}
|
|
130
|
+
const fields = deriveRelationFormFields(meta, 'invoice_id')
|
|
131
|
+
expect(fields.map(f => f.key)).toEqual(['sku'])
|
|
132
|
+
})
|
|
133
|
+
|
|
117
134
|
it('mapea types de ColumnDefinition al ActionFieldDef.type', () => {
|
|
118
135
|
const fields = deriveRelationFormFields(baseMeta, 'invoice_id')
|
|
119
136
|
const byKey = Object.fromEntries(fields.map(f => [f.key, f]))
|