@formicoidea/labre-core 0.47.0 → 0.48.0

package/dist/_pkgs/data-view/core/property/standalone-cell.js

@@ -0,0 +1,306 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { createIdentifier, } from '../../../global/di/index.js';
+import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../std/index.js';
+import { computed, signal } from '@preact/signals-core';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { dataViewCssVariable } from '../common/css-variable.js';
+import { renderUniLit } from '../utils/uni-component/uni-component.js';
+const NO_FLAGS = signal({
+    enable_number_formatting: false,
+    enable_table_virtual_scroll: false,
+});
+function isEmptyValue(value) {
+    if (value == null)
+        return true;
+    if (typeof value === 'string')
+        return value.trim() === '';
+    if (Array.isArray(value))
+        return value.length === 0;
+    return false;
+}
+class StandaloneCell {
+    get propertyId() {
+        return this._source.propertyId;
+    }
+    get rowId() {
+        return this._source.propertyId;
+    }
+    get row() {
+        throw new Error('A standalone cell has no row.');
+    }
+    constructor(meta, _source) {
+        this._source = _source;
+        const source = _source;
+        const view = {
+            readonly$: source.readonly$,
+            featureFlags$: source.featureFlags$ ?? NO_FLAGS,
+            serviceGet: (key) => source.serviceGet?.(key) ?? null,
+        };
+        // The whole seam is these three members, held by the spec named above.
+        this.view = view;
+        const type$ = signal(meta.type);
+        const property = {
+            id: source.propertyId,
+            name$: source.name$,
+            data$: source.data$,
+            type$,
+            readonly$: source.readonly$,
+            meta$: signal(meta),
+            renderer$: signal(meta.renderer.cellRenderer),
+            dataCanSet: !!source.dataSet,
+            dataUpdate: (updater) => {
+                if (!source.dataSet)
+                    return;
+                const data = source.data$.peek();
+                source.dataSet({ ...data, ...updater(data) });
+            },
+        };
+        this.property = property;
+        this.value$ = source.value$;
+        this.jsonValue$ = source.value$;
+        this.isEmpty$ = computed(() => isEmptyValue(source.value$.value));
+        this.stringValue$ = computed(() => {
+            const value = source.value$.value;
+            if (value === undefined)
+                return undefined;
+            const toString = meta.config.rawValue.toString;
+            return toString({ value, data: source.data$.value });
+        });
+    }
+    valueSet(value) {
+        this._source.valueSet(value);
+    }
+    jsonValueSet(value) {
+        this._source.valueSet(value);
+    }
+}
+/** A `Cell` for one value outside any view, drawn with `meta`'s renderer. */
+export function createStandaloneCell(meta, source) {
+    return new StandaloneCell(meta, source);
+}
+/**
+ * A property type a standalone cell can be drawn with, registered by the
+ * package that owns its renderer when that package sits above the host: the
+ * database block registers its `link` cell, which the title band (a fragment
+ * the database block depends on) cannot import. The presets of this package
+ * need no registration; a host imports them.
+ */
+export const StandaloneCellMetaProvider = createIdentifier('DataViewStandaloneCellMeta');
+export function StandaloneCellMetaExtension(meta) {
+    // Erased the way a data source's property list erases its metas.
+    const erased = meta;
+    return {
+        setup: di => {
+            di.override(StandaloneCellMetaProvider(meta.type), () => erased);
+        },
+    };
+}
+/**
+ * The element that hosts a standalone cell: it mounts the cell renderer the
+ * way a table cell container does and owns the same edit lifecycle
+ * (`beforeEnterEditMode`, `afterEnterEditingMode`, `beforeExitEditingMode`),
+ * so a click, Enter or Space starts the renderer's own editor: the checkbox
+ * toggles, a select pops its tag menu, the date its picker, a text its input.
+ *
+ * Leaving: a popup editor (select, date) closes itself on a click away and
+ * calls `selectCurrentCell(false)`, as in the table; an editor drawn in place
+ * (an input inside this element) leaves when the focus does, Escape included.
+ * Either way the renderer's exit hook commits, exactly once.
+ */
+let StandaloneCellHost = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _cell_decorators;
+    let _cell_initializers = [];
+    let _cell_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    return class StandaloneCellHost extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _cell_decorators = [property({ attribute: false })];
+            _placeholder_decorators = [property({ attribute: false })];
+            _readonly_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _cell_decorators, { kind: "accessor", name: "cell", static: false, private: false, access: { has: obj => "cell" in obj, get: obj => obj.cell, set: (obj, value) => { obj.cell = value; } }, metadata: _metadata }, _cell_initializers, _cell_extraInitializers);
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _readonly_decorators, { kind: "accessor", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    dv-standalone-cell {
+      ${unsafeCSS(dataViewCssVariable())}
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      min-width: 0;
+      max-width: 100%;
+      outline: none;
+    }
+
+    dv-standalone-cell[data-editable='true'] {
+      cursor: pointer;
+    }
+
+    /* The record detail's editing ring (detail/field.ts). */
+    dv-standalone-cell[data-editing='true'] {
+      border-radius: 4px;
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--affine-primary-color) 30%, transparent);
+    }
+
+    .dv-standalone-cell-placeholder {
+      color: var(--affine-placeholder-color);
+      white-space: nowrap;
+    }
+  `; }
+        /** Opens the renderer's editor; a checkbox toggles instead. */
+        edit() {
+            if (this.readonly || this.isEditing$.peek())
+                return;
+            const cell = this._cell$.peek();
+            if (!cell?.beforeEnterEditMode())
+                return;
+            this.isEditing$.value = true;
+            requestAnimationFrame(() => {
+                if (this.isEditing$.peek())
+                    cell.afterEnterEditingMode();
+            });
+        }
+        /** Closes the editor; the renderer's exit hook commits its value. */
+        exit() {
+            // An exit hook may close a popup whose own close asks to exit again.
+            if (!this.isEditing$.peek() || this._exiting)
+                return;
+            this._exiting = true;
+            try {
+                this._cell$.peek()?.beforeExitEditingMode();
+            }
+            finally {
+                this._exiting = false;
+            }
+            this.isEditing$.value = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this._disposables.addFromEvent(this, 'click', event => {
+                if (this.readonly)
+                    return;
+                event.stopPropagation();
+                this.edit();
+            });
+            this._disposables.addFromEvent(this, 'keydown', event => {
+                if (this.isEditing$.peek()) {
+                    if (event.key === 'Escape')
+                        this.exit();
+                    return;
+                }
+                if (event.target !== this)
+                    return;
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.edit();
+                }
+            });
+            this._disposables.addFromEvent(this, 'focusout', event => {
+                if (!this.isEditing$.peek())
+                    return;
+                const { target, relatedTarget } = event;
+                if (!(target instanceof HTMLInputElement) &&
+                    !(target instanceof HTMLTextAreaElement))
+                    return;
+                if (relatedTarget instanceof Node && this.contains(relatedTarget))
+                    return;
+                this.exit();
+            });
+            this._disposables.add(() => this.exit());
+        }
+        render() {
+            const view = this.cell.property.renderer$.value?.view;
+            if (!view)
+                return nothing;
+            this.dataset.editable = this.readonly ? 'false' : 'true';
+            this.dataset.editing = this.isEditing$.value ? 'true' : 'false';
+            if (this.readonly)
+                this.removeAttribute('tabindex');
+            else
+                this.tabIndex = 0;
+            const props = {
+                cell: this.cell,
+                isEditing$: this.isEditing$,
+                selectCurrentCell: this._selectCurrentCell,
+            };
+            const placeholder = this.placeholder && !this.isEditing$.value && this.cell.isEmpty$.value
+                ? html `<span class="dv-standalone-cell-placeholder"
+            >${this.placeholder}</span
+          >`
+                : nothing;
+            return html `${renderUniLit(view, props, { ref: this._cell$, style: { display: 'contents' } })}${placeholder}`;
+        }
+        #cell_accessor_storage;
+        get cell() { return this.#cell_accessor_storage; }
+        set cell(value) { this.#cell_accessor_storage = value; }
+        #placeholder_accessor_storage;
+        /** Drawn while the value is empty and no editor is open. */
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #readonly_accessor_storage;
+        /** Draws the value and opens no editor. */
+        get readonly() { return this.#readonly_accessor_storage; }
+        set readonly(value) { this.#readonly_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            this._cell$ = signal();
+            this._exiting = false;
+            this.isEditing$ = signal(false);
+            this._selectCurrentCell = (editing) => {
+                if (editing)
+                    this.edit();
+                else
+                    this.exit();
+            };
+            this.#cell_accessor_storage = __runInitializers(this, _cell_initializers, void 0);
+            this.#placeholder_accessor_storage = (__runInitializers(this, _cell_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
+            this.#readonly_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+            __runInitializers(this, _readonly_extraInitializers);
+        }
+    };
+})();
+export { StandaloneCellHost };

package/dist/_pkgs/data-view/core/view-manager/property.d.ts

@@ -27,6 +27,12 @@ export interface Property<RawValue = unknown, JsonValue = unknown, Data extends
     cellGetOrCreate(rowId: string): Cell<RawValue, JsonValue, Data>;
     readonly data$: ReadonlySignal<Data>;
     dataUpdate(updater: PropertyDataUpdater<Data>): void;
+    /**
+     * Whether `dataUpdate` writes anything; absent means it does. A standalone
+     * cell whose host cannot write the config says `false`, and a select then
+     * creates, edits and reorders no option (`standalone-cell.ts`).
+     */
+    readonly dataCanSet?: boolean;
     readonly type$: ReadonlySignal<string>;
     readonly typeSet?: (type: string) => void;
     get typeCanSet(): boolean;

package/dist/_pkgs/data-view/property-presets/multi-select/cell-renderer.js

@@ -16,7 +16,7 @@ export class MultiSelectCell extends BaseCellRenderer {
             this.closePopup = popTagSelect(popupTargetFromElement(this), {
                 name: this.cell.property.name$.value,
                 options: this.options$,
-                onOptionsChange: this._onOptionsChange,
+                onOptionsChange: this.property.dataCanSet === false ? undefined : this._onOptionsChange,
                 value: this._value$,
                 onChange: v => {
                     this.valueSetImmediate(v);

package/dist/_pkgs/data-view/property-presets/select/cell-renderer.js

@@ -16,7 +16,7 @@ export class SelectCell extends BaseCellRenderer {
                 name: this.cell.property.name$.value,
                 mode: 'single',
                 options: this.options$,
-                onOptionsChange: this._onOptionsChange,
+                onOptionsChange: this.property.dataCanSet === false ? undefined : this._onOptionsChange,
                 value: this._value$,
                 onChange: v => {
                     this.valueSetImmediate(v[0]);

package/dist/_pkgs/data-view/property-presets/text/cell-renderer.js

@@ -50,7 +50,9 @@ let TextCell = (() => {
             this.#_inputEle_accessor_storage = __runInitializers(this, __inputEle_initializers, void 0);
             this._keydown = (__runInitializers(this, __inputEle_extraInitializers), (e) => {
                 if (e.key === 'Enter' && !e.isComposing) {
-                    this._setValue();
+                    // Leaving commits, once, through `beforeExitEditingMode`. Committing
+                    // here as well reset the input to the old value, which the exit then
+                    // wrote back over the new one (standalone-cell.unit.spec.ts).
                     setTimeout(() => {
                         this.selectCurrentCell(false);
                     });

package/dist/translations.js

@@ -231,7 +231,7 @@ const CHROME_KEYS = [
     // person who picked it.
     [
         'com.labre.interchange.import.readonly',
-        'This document became read-only while the file was being read, so nothing was imported.',
+        'This page became read-only while the file was being read, so nothing was imported.',
     ],
     [
         'com.labre.interchange.import.remarks',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-core",
   "description": "Labre editor — the full BlockSuite-derived editor as one package.",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",