@fieldia/widgets 0.9.1 → 0.10.0

package/src/lib/choice-tags.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchWidget = exports.choiceTagsWidget = void 0;
+const choice_rules_1 = require("./choice-rules");
+const kind_parts_1 = require("./kind-parts");
+/**
+ * Several answers from a list, as tags in a box (`selection.tags`): the box
+ * is an ARIA combobox whose list holds the options not chosen yet, those whose
+ * words hold what is typed. The arrows reach one and Enter adds it — or the
+ * first match, when none is reached — as does a click. A tag goes with its ×,
+ * or the last with Backspace in the empty box. The answer keeps the order the
+ * tags were added in; a value not among the options shows as its own words.
+ * With `ownAnswers`, words that match nothing are offered as an answer of
+ * their own; "None of these" goes alone.
+ *
+ * One answer, the same box (`searchWidget`): a dropdown that searches its
+ * list — the box shows the choice, typing finds others, and a box left half
+ * typed shows the choice again; emptied, it takes the choice away.
+ */
+const choiceTagsWidget = (context) => combo(context, false);
+exports.choiceTagsWidget = choiceTagsWidget;
+const searchWidget = (context) => combo(context, true);
+exports.searchWidget = searchWidget;
+function combo({ form, name, field, id, document, labels, locale }, single) {
+    const words = (0, kind_parts_1.wordsFor)(labels, locale);
+    const make = (0, kind_parts_1.maker)(document);
+    const options = field.type === 'selection' ? field.options : [];
+    const own = field.type === 'selection' && field.ownAnswers === true && !single;
+    const listId = `${id}-list`;
+    const input = make('input', {
+        id,
+        type: 'text',
+        class: 'fd-input fd-combo-input',
+        role: 'combobox',
+        'aria-autocomplete': 'list',
+        'aria-expanded': 'false',
+        'aria-controls': listId,
+        autocomplete: 'off',
+        placeholder: words.search,
+    });
+    const list = make('ul', { id: listId, class: 'fd-listbox', role: 'listbox', hidden: '' });
+    const chips = make('ul', { class: 'fd-chips' });
+    const box = make('div', { class: 'fd-combo' }, input, list);
+    const element = single ? make('div', { class: 'fd-choice-search' }, box) : make('div', { class: 'fd-tags fd-choice-tags' }, chips, box);
+    const current = () => form.getState().values[name];
+    const chosen = () => (Array.isArray(current()) ? current() : []);
+    const write = (values) => form.setValue(name, values);
+    const labelOf = (value) => options.find((o) => o.value === value)?.label ?? (value === null || value === undefined ? '' : String(value));
+    /** The options on offer now, and the one the arrows reached. */
+    let found = [];
+    let active = -1;
+    let readonly = false;
+    function draw() {
+        list.replaceChildren(...found.map((option, i) => {
+            const item = make('li', { id: `${listId}-${i}`, role: 'option', class: `fd-option${i === active ? ' fd-active' : ''}`, 'aria-selected': String(i === active) }, option.label);
+            // The box keeps the focus; the click adds it.
+            item.addEventListener('mousedown', (event) => event.preventDefault());
+            item.addEventListener('click', () => add(option));
+            return item;
+        }));
+        if (!found.length)
+            list.append(make('li', { class: 'fd-empty' }, words.noResults));
+        (0, kind_parts_1.setAttr)(input, 'aria-activedescendant', active >= 0 ? `${listId}-${active}` : null);
+    }
+    function open() {
+        const written = input.value.trim();
+        // The choice's own words in the box find every option, not only itself.
+        const typed = single && written === labelOf(current()) ? '' : written.toLowerCase();
+        const taken = new Set(chosen());
+        found = options.filter((o) => !taken.has(o.value) && o.label.toLowerCase().includes(typed));
+        // Words that match nothing, offered as an answer of one's own.
+        if (own && typed && !taken.has(written) && !options.some((o) => o.label.toLowerCase() === typed))
+            found.push({ value: written, label: (0, kind_parts_1.fillIn)(words.createNamed, { name: written }) });
+        active = -1;
+        draw();
+        list.hidden = false;
+        input.setAttribute('aria-expanded', 'true');
+    }
+    function close() {
+        list.hidden = true;
+        active = -1;
+        input.setAttribute('aria-expanded', 'false');
+        input.removeAttribute('aria-activedescendant');
+    }
+    function add(option) {
+        if (single) {
+            input.value = option.label;
+            write(option.value);
+            return close();
+        }
+        input.value = '';
+        write((0, choice_rules_1.withAlone)(options, chosen(), option.value));
+        if (document.activeElement === input)
+            open();
+        else
+            close();
+    }
+    if (!single)
+        input.addEventListener('focus', () => !readonly && open());
+    input.addEventListener('click', () => !readonly && list.hidden && open());
+    input.addEventListener('input', () => !readonly && open());
+    input.addEventListener('blur', () => {
+        close();
+        // One answer: a box emptied takes the choice away; one left half typed shows the choice again.
+        if (single && !readonly) {
+            if (!input.value.trim())
+                write(null);
+            else
+                input.value = labelOf(current());
+        }
+    });
+    input.addEventListener('keydown', (event) => {
+        if (readonly)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (list.hidden)
+                    return open();
+                if (!found.length)
+                    return;
+                const down = event.key === 'ArrowDown';
+                // From none reached, down is the first and up the last; past either end it goes round.
+                active = active === -1 ? (down ? 0 : found.length - 1) : (active + (down ? 1 : -1) + found.length) % found.length;
+                draw();
+                list.children[active]?.scrollIntoView?.({ block: 'nearest' });
+                return;
+            }
+            case 'Enter': {
+                const pick = found[active] ?? (input.value.trim() ? found[0] : undefined);
+                if (list.hidden || !pick)
+                    return;
+                event.preventDefault();
+                add(pick);
+                return;
+            }
+            case 'Escape':
+                if (!list.hidden)
+                    event.preventDefault();
+                close();
+                return;
+            case 'Backspace':
+                if (!single && input.value === '' && chosen().length)
+                    write(chosen().slice(0, -1));
+                return;
+        }
+    });
+    let drawn = '';
+    return {
+        element,
+        focus: () => input.focus(),
+        update(state) {
+            readonly = state.readonly;
+            if (readonly)
+                close();
+            (0, kind_parts_1.describeState)(input, state);
+            (0, kind_parts_1.setAttr)(input, 'aria-required', String(state.required));
+            if (single) {
+                input.readOnly = readonly;
+                if (document.activeElement !== input)
+                    input.value = labelOf(state.value);
+                return;
+            }
+            const values = Array.isArray(state.value) ? state.value : [];
+            input.hidden = readonly;
+            const key = JSON.stringify([readonly, values]);
+            if (key === drawn)
+                return;
+            drawn = key;
+            chips.replaceChildren(...values.map((value) => {
+                const label = labelOf(value);
+                const chip = make('li', { class: 'fd-chip' }, make('span', { class: 'fd-chip-label' }, label));
+                if (!readonly) {
+                    const remove = make('button', { type: 'button', class: 'fd-chip-remove', 'aria-label': (0, kind_parts_1.fillIn)(words.remove, { name: label }) }, '×');
+                    remove.addEventListener('click', () => write(chosen().filter((v) => v !== value)));
+                    chip.append(remove);
+                }
+                return chip;
+            }));
+            // The list follows what is chosen while it is open.
+            if (!list.hidden)
+                open();
+        },
+    };
+}
+//# sourceMappingURL=choice-tags.js.map

package/src/lib/choice-tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-tags.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/choice-tags.ts"],"names":[],"mappings":"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"}

package/src/lib/choice-tags.mjs

@@ -0,0 +1,182 @@
+import { withAlone } from './choice-rules.mjs';
+import { describeState, fillIn, maker, setAttr, wordsFor } from './kind-parts.mjs';
+/**
+ * Several answers from a list, as tags in a box (`selection.tags`): the box
+ * is an ARIA combobox whose list holds the options not chosen yet, those whose
+ * words hold what is typed. The arrows reach one and Enter adds it — or the
+ * first match, when none is reached — as does a click. A tag goes with its ×,
+ * or the last with Backspace in the empty box. The answer keeps the order the
+ * tags were added in; a value not among the options shows as its own words.
+ * With `ownAnswers`, words that match nothing are offered as an answer of
+ * their own; "None of these" goes alone.
+ *
+ * One answer, the same box (`searchWidget`): a dropdown that searches its
+ * list — the box shows the choice, typing finds others, and a box left half
+ * typed shows the choice again; emptied, it takes the choice away.
+ */
+export const choiceTagsWidget = (context) => combo(context, false);
+export const searchWidget = (context) => combo(context, true);
+function combo({ form, name, field, id, document, labels, locale }, single) {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    const options = field.type === 'selection' ? field.options : [];
+    const own = field.type === 'selection' && field.ownAnswers === true && !single;
+    const listId = `${id}-list`;
+    const input = make('input', {
+        id,
+        type: 'text',
+        class: 'fd-input fd-combo-input',
+        role: 'combobox',
+        'aria-autocomplete': 'list',
+        'aria-expanded': 'false',
+        'aria-controls': listId,
+        autocomplete: 'off',
+        placeholder: words.search,
+    });
+    const list = make('ul', { id: listId, class: 'fd-listbox', role: 'listbox', hidden: '' });
+    const chips = make('ul', { class: 'fd-chips' });
+    const box = make('div', { class: 'fd-combo' }, input, list);
+    const element = single ? make('div', { class: 'fd-choice-search' }, box) : make('div', { class: 'fd-tags fd-choice-tags' }, chips, box);
+    const current = () => form.getState().values[name];
+    const chosen = () => (Array.isArray(current()) ? current() : []);
+    const write = (values) => form.setValue(name, values);
+    const labelOf = (value) => options.find((o) => o.value === value)?.label ?? (value === null || value === undefined ? '' : String(value));
+    /** The options on offer now, and the one the arrows reached. */
+    let found = [];
+    let active = -1;
+    let readonly = false;
+    function draw() {
+        list.replaceChildren(...found.map((option, i) => {
+            const item = make('li', { id: `${listId}-${i}`, role: 'option', class: `fd-option${i === active ? ' fd-active' : ''}`, 'aria-selected': String(i === active) }, option.label);
+            // The box keeps the focus; the click adds it.
+            item.addEventListener('mousedown', (event) => event.preventDefault());
+            item.addEventListener('click', () => add(option));
+            return item;
+        }));
+        if (!found.length)
+            list.append(make('li', { class: 'fd-empty' }, words.noResults));
+        setAttr(input, 'aria-activedescendant', active >= 0 ? `${listId}-${active}` : null);
+    }
+    function open() {
+        const written = input.value.trim();
+        // The choice's own words in the box find every option, not only itself.
+        const typed = single && written === labelOf(current()) ? '' : written.toLowerCase();
+        const taken = new Set(chosen());
+        found = options.filter((o) => !taken.has(o.value) && o.label.toLowerCase().includes(typed));
+        // Words that match nothing, offered as an answer of one's own.
+        if (own && typed && !taken.has(written) && !options.some((o) => o.label.toLowerCase() === typed))
+            found.push({ value: written, label: fillIn(words.createNamed, { name: written }) });
+        active = -1;
+        draw();
+        list.hidden = false;
+        input.setAttribute('aria-expanded', 'true');
+    }
+    function close() {
+        list.hidden = true;
+        active = -1;
+        input.setAttribute('aria-expanded', 'false');
+        input.removeAttribute('aria-activedescendant');
+    }
+    function add(option) {
+        if (single) {
+            input.value = option.label;
+            write(option.value);
+            return close();
+        }
+        input.value = '';
+        write(withAlone(options, chosen(), option.value));
+        if (document.activeElement === input)
+            open();
+        else
+            close();
+    }
+    if (!single)
+        input.addEventListener('focus', () => !readonly && open());
+    input.addEventListener('click', () => !readonly && list.hidden && open());
+    input.addEventListener('input', () => !readonly && open());
+    input.addEventListener('blur', () => {
+        close();
+        // One answer: a box emptied takes the choice away; one left half typed shows the choice again.
+        if (single && !readonly) {
+            if (!input.value.trim())
+                write(null);
+            else
+                input.value = labelOf(current());
+        }
+    });
+    input.addEventListener('keydown', (event) => {
+        if (readonly)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (list.hidden)
+                    return open();
+                if (!found.length)
+                    return;
+                const down = event.key === 'ArrowDown';
+                // From none reached, down is the first and up the last; past either end it goes round.
+                active = active === -1 ? (down ? 0 : found.length - 1) : (active + (down ? 1 : -1) + found.length) % found.length;
+                draw();
+                list.children[active]?.scrollIntoView?.({ block: 'nearest' });
+                return;
+            }
+            case 'Enter': {
+                const pick = found[active] ?? (input.value.trim() ? found[0] : undefined);
+                if (list.hidden || !pick)
+                    return;
+                event.preventDefault();
+                add(pick);
+                return;
+            }
+            case 'Escape':
+                if (!list.hidden)
+                    event.preventDefault();
+                close();
+                return;
+            case 'Backspace':
+                if (!single && input.value === '' && chosen().length)
+                    write(chosen().slice(0, -1));
+                return;
+        }
+    });
+    let drawn = '';
+    return {
+        element,
+        focus: () => input.focus(),
+        update(state) {
+            readonly = state.readonly;
+            if (readonly)
+                close();
+            describeState(input, state);
+            setAttr(input, 'aria-required', String(state.required));
+            if (single) {
+                input.readOnly = readonly;
+                if (document.activeElement !== input)
+                    input.value = labelOf(state.value);
+                return;
+            }
+            const values = Array.isArray(state.value) ? state.value : [];
+            input.hidden = readonly;
+            const key = JSON.stringify([readonly, values]);
+            if (key === drawn)
+                return;
+            drawn = key;
+            chips.replaceChildren(...values.map((value) => {
+                const label = labelOf(value);
+                const chip = make('li', { class: 'fd-chip' }, make('span', { class: 'fd-chip-label' }, label));
+                if (!readonly) {
+                    const remove = make('button', { type: 'button', class: 'fd-chip-remove', 'aria-label': fillIn(words.remove, { name: label }) }, '×');
+                    remove.addEventListener('click', () => write(chosen().filter((v) => v !== value)));
+                    chip.append(remove);
+                }
+                return chip;
+            }));
+            // The list follows what is chosen while it is open.
+            if (!list.hidden)
+                open();
+        },
+    };
+}
+//# sourceMappingURL=choice-tags.mjs.map

package/src/lib/choice-tags.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-tags.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/choice-tags.ts"],"names":[],"mappings":"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"}

package/src/lib/choices-from.d.mts

@@ -0,0 +1,8 @@
+import type { Widget, WidgetContext, WidgetFactory } from './widgets.mjs';
+/**
+ * A choice whose options are one of the app's lists: the widget the field
+ * would have anyway, drawn afresh from each answer the list gives. While the
+ * choices load it says so; when they fail it offers to load them again; and
+ * a value the list no longer offers is kept — the person decides — and said.
+ */
+export declare function listChoices(factory: WidgetFactory, context: WidgetContext): Widget;

package/src/lib/choices-from.d.ts

@@ -0,0 +1,8 @@
+import type { Widget, WidgetContext, WidgetFactory } from './widgets';
+/**
+ * A choice whose options are one of the app's lists: the widget the field
+ * would have anyway, drawn afresh from each answer the list gives. While the
+ * choices load it says so; when they fail it offers to load them again; and
+ * a value the list no longer offers is kept — the person decides — and said.
+ */
+export declare function listChoices(factory: WidgetFactory, context: WidgetContext): Widget;

package/src/lib/choices-from.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listChoices = listChoices;
+const core_1 = require("@fieldia/core");
+const kind_parts_1 = require("./kind-parts");
+/**
+ * A choice whose options are one of the app's lists: the widget the field
+ * would have anyway, drawn afresh from each answer the list gives. While the
+ * choices load it says so; when they fail it offers to load them again; and
+ * a value the list no longer offers is kept — the person decides — and said.
+ */
+function listChoices(factory, context) {
+    const { form, name, document: doc } = context;
+    const words = (0, kind_parts_1.wordsFor)(context.labels, context.locale);
+    const box = doc.createElement('div');
+    const note = doc.createElement('div');
+    const retry = doc.createElement('button');
+    retry.type = 'button';
+    retry.className = 'fd-button fd-button-link';
+    retry.textContent = words.choicesFailed;
+    retry.onclick = () => form.loadChoices(name);
+    note.setAttribute('role', 'status');
+    // Spaced as a field's own parts are.
+    box.style.cssText = 'display:grid;gap:4px';
+    /** Every choice the list has given, to name a value it no longer offers. */
+    const named = new Map();
+    let inner;
+    let shown = null;
+    const draw = (options) => {
+        inner?.destroy?.();
+        inner = factory({ ...context, field: { ...context.field, options } });
+        // Named by the field's label, as the viewer names a widget with a role of its own.
+        if (inner.element.getAttribute('role'))
+            inner.element.setAttribute('aria-labelledby', `${context.id}-label`);
+        box.replaceChildren(inner.element, note, retry);
+    };
+    draw([]);
+    if (!form.getState().choices[name])
+        form.loadChoices(name);
+    return {
+        element: box,
+        focus: () => inner.focus(),
+        destroy: () => inner.destroy?.(),
+        update(state) {
+            const choices = form.getState().choices[name];
+            if (choices?.options && choices.options !== shown) {
+                shown = choices.options;
+                for (const option of shown)
+                    named.set(option.value, option.label);
+                draw(shown);
+            }
+            inner.update(state);
+            // With "Other", a value not among them is an answer of the person's own.
+            const lost = shown && !context.field.other ? [state.value].flat().filter((v) => v != null && !shown?.some((o) => o.value === v)) : [];
+            note.className = choices?.loading ? 'fd-help' : 'fd-warning';
+            note.textContent = choices?.loading ? words.loadingChoices : lost.length ? (0, core_1.fill)(words.notOffered, { name: lost.map((v) => named.get(v) ?? String(v)).join(', ') }) : '';
+            note.hidden = !note.textContent;
+            // Loading again sets the failure aside, and the button with it.
+            retry.hidden = !choices?.error;
+        },
+    };
+}
+//# sourceMappingURL=choices-from.js.map

package/src/lib/choices-from.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choices-from.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/choices-from.ts"],"names":[],"mappings":"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"}

package/src/lib/choices-from.mjs

@@ -0,0 +1,60 @@
+import { fill } from '@fieldia/core';
+import { wordsFor } from './kind-parts.mjs';
+/**
+ * A choice whose options are one of the app's lists: the widget the field
+ * would have anyway, drawn afresh from each answer the list gives. While the
+ * choices load it says so; when they fail it offers to load them again; and
+ * a value the list no longer offers is kept — the person decides — and said.
+ */
+export function listChoices(factory, context) {
+    const { form, name, document: doc } = context;
+    const words = wordsFor(context.labels, context.locale);
+    const box = doc.createElement('div');
+    const note = doc.createElement('div');
+    const retry = doc.createElement('button');
+    retry.type = 'button';
+    retry.className = 'fd-button fd-button-link';
+    retry.textContent = words.choicesFailed;
+    retry.onclick = () => form.loadChoices(name);
+    note.setAttribute('role', 'status');
+    // Spaced as a field's own parts are.
+    box.style.cssText = 'display:grid;gap:4px';
+    /** Every choice the list has given, to name a value it no longer offers. */
+    const named = new Map();
+    let inner;
+    let shown = null;
+    const draw = (options) => {
+        inner?.destroy?.();
+        inner = factory({ ...context, field: { ...context.field, options } });
+        // Named by the field's label, as the viewer names a widget with a role of its own.
+        if (inner.element.getAttribute('role'))
+            inner.element.setAttribute('aria-labelledby', `${context.id}-label`);
+        box.replaceChildren(inner.element, note, retry);
+    };
+    draw([]);
+    if (!form.getState().choices[name])
+        form.loadChoices(name);
+    return {
+        element: box,
+        focus: () => inner.focus(),
+        destroy: () => inner.destroy?.(),
+        update(state) {
+            const choices = form.getState().choices[name];
+            if (choices?.options && choices.options !== shown) {
+                shown = choices.options;
+                for (const option of shown)
+                    named.set(option.value, option.label);
+                draw(shown);
+            }
+            inner.update(state);
+            // With "Other", a value not among them is an answer of the person's own.
+            const lost = shown && !context.field.other ? [state.value].flat().filter((v) => v != null && !shown?.some((o) => o.value === v)) : [];
+            note.className = choices?.loading ? 'fd-help' : 'fd-warning';
+            note.textContent = choices?.loading ? words.loadingChoices : lost.length ? fill(words.notOffered, { name: lost.map((v) => named.get(v) ?? String(v)).join(', ') }) : '';
+            note.hidden = !note.textContent;
+            // Loading again sets the failure aside, and the button with it.
+            retry.hidden = !choices?.error;
+        },
+    };
+}
+//# sourceMappingURL=choices-from.mjs.map

package/src/lib/choices-from.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"choices-from.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/choices-from.ts"],"names":[],"mappings":"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"}

package/src/lib/display.js

@@ -33,8 +33,8 @@ function displayValue(def, value, values = {}, locale = 'en') {
             return number(Number(value), def.digits?.[1] ?? 2);
         case 'monetary': {
             const currency = def.currency ?? (def.currencyField ? values[def.currencyField]?.label : undefined);
-            const amount = number(Number(value), def.digits?.[1] ?? 2);
-            return currency ? `${currency} ${amount}` : amount;
+            // Its currency's symbol, as the amount's own box shows it.
+            return currency ? (0, numbers_1.formatMoney)(Number(value), currency, def.digits?.[1] ?? 2, locale) : number(Number(value), def.digits?.[1] ?? 2);
         }
         case 'date': {
             const date = localDate(String(value));
@@ -50,7 +50,8 @@ function displayValue(def, value, values = {}, locale = 'en') {
             return String(value).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
         case 'binary':
         case 'image':
-            return value.name ?? '';
+            // One file, or several: their names.
+            return [value].flat().map((file) => file.name ?? '').join(', ');
         case 'boolean':
             return value ? '✓' : '';
         default:

package/src/lib/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/display.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/display.ts"],"names":[],"mappings":"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"}

package/src/lib/display.mjs

@@ -1,4 +1,4 @@
-import { formatNumber } from './numbers.mjs';
+import { formatMoney, formatNumber } from './numbers.mjs';
 function localDate(text) {
     const match = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2}))?/.exec(text);
     if (!match)
@@ -30,8 +30,8 @@ export function displayValue(def, value, values = {}, locale = 'en') {
             return number(Number(value), def.digits?.[1] ?? 2);
         case 'monetary': {
             const currency = def.currency ?? (def.currencyField ? values[def.currencyField]?.label : undefined);
-            const amount = number(Number(value), def.digits?.[1] ?? 2);
-            return currency ? `${currency} ${amount}` : amount;
+            // Its currency's symbol, as the amount's own box shows it.
+            return currency ? formatMoney(Number(value), currency, def.digits?.[1] ?? 2, locale) : number(Number(value), def.digits?.[1] ?? 2);
         }
         case 'date': {
             const date = localDate(String(value));
@@ -47,7 +47,8 @@ export function displayValue(def, value, values = {}, locale = 'en') {
             return String(value).replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
         case 'binary':
         case 'image':
-            return value.name ?? '';
+            // One file, or several: their names.
+            return [value].flat().map((file) => file.name ?? '').join(', ');
         case 'boolean':
             return value ? '✓' : '';
         default: