@formicoidea/labre-core 0.54.0 → 0.55.0

package/dist/_pkgs/data-view/translations.d.ts

@@ -87,8 +87,6 @@ export declare const DATA_VIEW_PROPERTY_HIDE_IN_VIEW: ChromeWording;
 export declare const DATA_VIEW_PROPERTY_TYPE: ChromeWording;
 /** The toolbar button and a group's footer row that add a row. */
 export declare const DATA_VIEW_NEW_RECORD: ChromeWording;
-/** The same button on a phone, where the toolbar has no room for two words. */
-export declare const DATA_VIEW_NEW_RECORD_SHORT: ChromeWording;
 /**
  * The title of the group holding the rows with no value. Display only: the
  * stored group key stays `'Ungroups'` (`core/group-by/define.ts`).

package/dist/_pkgs/data-view/translations.js

@@ -224,11 +224,6 @@ export const DATA_VIEW_NEW_RECORD = [
     'com.labre.data-view.new-record',
     'New Record',
 ];
-/** The same button on a phone, where the toolbar has no room for two words. */
-export const DATA_VIEW_NEW_RECORD_SHORT = [
-    'com.labre.data-view.new-record.short',
-    'New',
-];
 /**
  * The title of the group holding the rows with no value. Display only: the
  * stored group key stays `'Ungroups'` (`core/group-by/define.ts`).
@@ -330,7 +325,6 @@ export const DATA_VIEW_WORDINGS = [
     VIEW_DUPLICATE_AS_TABLE,
     DATA_VIEW_NEW_PAGE,
     DATA_VIEW_NEW_RECORD,
-    DATA_VIEW_NEW_RECORD_SHORT,
     DATA_VIEW_UNGROUPED,
     DATA_VIEW_ADD_FILTER,
     DATA_VIEW_SEARCH_PLACEHOLDER,

package/dist/_pkgs/data-view/view-presets/flat/flat-view-ui.d.ts

@@ -36,7 +36,9 @@ export declare abstract class FlatViewUI<Logic extends FlatViewUILogic = FlatVie
     /**
      * One property's value, drawn and edited by the cell renderer a table cell
      * mounts. `readonly` draws the value only and lets a click through to the
-     * card or row, which is how the title opens its row.
+     * card or row, which is how the title opens its row. On a phone every value
+     * is drawn so: a tap on a card or a row opens it, its values are edited in
+     * the row page (P7, after Notion's phone gallery and list).
      */
     protected renderCell(property: Property, rowId: string, readonly?: boolean): import("lit-html").TemplateResult<1>;
     protected renderOpenButton(rowId: string): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/data-view/view-presets/flat/flat-view-ui.js

@@ -35,6 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { popFilterableSimpleMenu, popupTargetFromElement, } from '../../../affine-components/context-menu/index.js';
 import { translateKey } from '../../../affine-shared/services/index.js';
 import { OPEN_LABEL } from '../../../affine-components/translations.js';
+import { IS_MOBILE } from '../../../global/env/index.js';
 import { CenterPeekIcon } from '@blocksuite/icons/lit';
 import { stdContext } from '../../../std/index.js';
 import { consume } from '@lit/context';
@@ -112,7 +113,9 @@ let FlatViewUI = (() => {
         /**
          * One property's value, drawn and edited by the cell renderer a table cell
          * mounts. `readonly` draws the value only and lets a click through to the
-         * card or row, which is how the title opens its row.
+         * card or row, which is how the title opens its row. On a phone every value
+         * is drawn so: a tap on a card or a row opens it, its values are edited in
+         * the row page (P7, after Notion's phone gallery and list).
          */
         renderCell(property, rowId, readonly = false) {
             const view = this.view;
@@ -127,6 +130,7 @@ let FlatViewUI = (() => {
       data-property-id="${property.id}"
       .cell="${cell}"
       .readonly="${readonly ||
+                IS_MOBILE ||
                 view.readonly$.value ||
                 property.readonly$.value}"
       .onEditingChange="${(editing) => view.lockRows(editing)}"

package/dist/_pkgs/data-view/view-presets/kanban/mobile/card.d.ts

@@ -4,6 +4,12 @@ declare const MobileKanbanCard_base: typeof ShadowlessElement & import("../../..
 export declare class MobileKanbanCard extends MobileKanbanCard_base {
     static styles: import("lit").CSSResult;
     private readonly clickCenterPeek;
+    /**
+     * A tap on a phone's card opens its row, the path of the open button, as on
+     * Notion's phone board (P7); its "..." keeps the card's menu.
+     */
+    private readonly openCard;
+    connectedCallback(): void;
     private readonly clickMore;
     private renderBody;
     private renderHeader;

package/dist/_pkgs/data-view/view-presets/kanban/mobile/card.js

@@ -155,6 +155,10 @@ let MobileKanbanCard = (() => {
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        connectedCallback() {
+            super.connectedCallback();
+            this.disposables.addFromEvent(this, 'click', this.openCard);
+        }
         renderBody(columns) {
             if (columns.length === 0) {
                 return '';
@@ -254,6 +258,13 @@ let MobileKanbanCard = (() => {
             super(...arguments);
             this.clickCenterPeek = (e) => {
                 e.stopPropagation();
+                this.openCard();
+            };
+            /**
+             * A tap on a phone's card opens its row, the path of the open button, as on
+             * Notion's phone board (P7); its "..." keeps the card's menu.
+             */
+            this.openCard = () => {
                 this.kanbanViewLogic.root.openDetailPanel({
                     view: this.view,
                     rowId: this.cardId,

package/dist/_pkgs/data-view/view-presets/kanban/mobile/cell.js

@@ -124,12 +124,8 @@ let MobileKanbanCell = (() => {
                     this.isEditing$.value = false;
                 }
             }));
-            this._disposables.addFromEvent(this, 'click', e => {
-                e.stopPropagation();
-                if (!this.isEditing$.value) {
-                    this.selectCurrentCell(!this.column.readonly$.value);
-                }
-            });
+            // No tap-to-edit here: a tap anywhere on a phone's card opens the row
+            // (`MobileKanbanCard`), where its values are edited (P7, after Notion).
         }
         render() {
             const props = {
@@ -203,13 +199,16 @@ let MobileKanbanCell = (() => {
                 if (this.view.readonly$.value) {
                     return;
                 }
-                const setSelection = this.kanbanViewLogic.setSelection;
-                const viewId = this.kanbanViewLogic.view.id;
-                if (setSelection && viewId) {
+                // Called on the logic, never detached: `setSelection` is a method of
+                // `DataViewUILogicBase`, and up to 0.54 a detached call threw on every
+                // tap, so no value of a phone card ever entered editing.
+                const logic = this.kanbanViewLogic;
+                const viewId = logic.view.id;
+                if (viewId) {
                     if (editing && this.cell?.beforeEnterEditMode() === false) {
                         return;
                     }
-                    setSelection({
+                    logic.setSelection({
                         viewId,
                         type: 'kanban',
                         selectionType: 'cell',

package/dist/_pkgs/data-view/view-presets/kanban/mobile/kanban-view-ui-logic.js

@@ -43,6 +43,9 @@ export class MobileKanbanViewUILogic extends DataViewUILogicBase {
                 return;
             const id = this.view.rowAdd(position);
             this.ui$.value?.requestUpdate();
+            // The toolbar's "+" opens the new card, as on the desktop board (P7).
+            if (id)
+                this.root.openDetailPanel({ view: this.view, rowId: id });
             return id;
         };
         this.focusFirstCell = () => { };

package/dist/_pkgs/data-view/view-presets/table/mobile/cell.js

@@ -196,13 +196,16 @@ let MobileTableCell = (() => {
                 if (this.view.readonly$.value) {
                     return;
                 }
-                const setSelection = this.tableViewLogic.setSelection;
-                const viewId = this.tableViewLogic.view.id;
-                if (setSelection && viewId) {
+                // Called on the logic, never detached: `setSelection` is a method of
+                // `DataViewUILogicBase`, and up to 0.54 a detached call threw on every
+                // tap, so no cell of a phone table ever entered editing.
+                const logic = this.tableViewLogic;
+                const viewId = logic.view.id;
+                if (viewId) {
                     if (editing && this.cell?.beforeEnterEditMode() === false) {
                         return;
                     }
-                    setSelection({
+                    logic.setSelection({
                         viewId,
                         type: 'table',
                         ...TableViewAreaSelection.create({

package/dist/_pkgs/data-view/view-presets/table/mobile/group.js

@@ -45,14 +45,17 @@ import { repeat } from 'lit/directives/repeat.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
 import { hideGroupAction } from '../../../core/group-by/group-visibility.js';
 import { wordingOf } from '../../../core/utils/wording.js';
-import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, DATA_VIEW_NEW_RECORD, } from '../../../translations.js';
+import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, DATA_VIEW_NEW_PAGE, } from '../../../translations.js';
 import { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 const styles = css `
+  /* "+ New page" under the rows: a full row, 44px for a finger (P7). */
   .data-view-table-group-add-row {
     display: flex;
     width: 100%;
-    height: 28px;
+    min-height: 44px;
+    box-sizing: border-box;
+    align-items: center;
     position: relative;
     z-index: 0;
     cursor: pointer;
@@ -69,8 +72,8 @@ const styles = css `
     justify-content: center;
     gap: 10px;
     user-select: none;
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 14px;
+    line-height: 22px;
     color: var(--affine-text-secondary-color);
   }
 
@@ -168,8 +171,8 @@ let MobileTableGroup = (() => {
               data-test-id="affine-database-add-row-button"
               role="button"
             >
-              ${PlusIcon()}<span style="font-size: 12px"
-                >${wordingOf(this.std)(DATA_VIEW_NEW_RECORD)}</span
+              ${PlusIcon()}<span
+                >${wordingOf(this.std)(DATA_VIEW_NEW_PAGE)}</span
               >
             </div>
           </div>`}
@@ -218,11 +221,11 @@ let MobileTableGroup = (() => {
                 }
             };
             this.clickAddRow = () => {
-                this.view.rowAdd('end', this.group?.key);
+                this.tableViewLogic.addRow('end', this.group?.key);
                 this.requestUpdate();
             };
             this.clickAddRowInStart = () => {
-                this.view.rowAdd('start', this.group?.key);
+                this.tableViewLogic.addRow('start', this.group?.key);
                 this.requestUpdate();
             };
             this.clickGroupOptions = (e) => {

package/dist/_pkgs/data-view/view-presets/table/mobile/header.d.ts

@@ -1,11 +1,17 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import { type TemplateResult } from 'lit';
 import type { TableSingleView } from '../table-view-manager.js';
 declare const MobileTableHeader_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileTableHeader extends MobileTableHeader_base {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
+    /**
+     * "+" adds a property and opens ITS "Property settings" sheet. Up to 0.54
+     * the last header was looked up in the same tick, before the header had
+     * drawn the new column, so the sheet opened on the previous last property.
+     */
     private readonly _onAddColumn;
-    editLastColumnTitle: () => void;
     private get readonly();
     render(): TemplateResult;
     accessor renderGroupHeader: (() => TemplateResult) | undefined;

package/dist/_pkgs/data-view/view-presets/table/mobile/header.js

@@ -35,16 +35,22 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
 import { PlusIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
-import { css } from 'lit';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
+import { css, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
+import { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_NEW_PROPERTY } from '../../../translations.js';
 import { cellDivider } from '../styles.js';
 import { mobileStickyTitle } from './table-view-style.js';
 let MobileTableHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _renderGroupHeader_decorators;
     let _renderGroupHeader_initializers = [];
     let _renderGroupHeader_extraInitializers = [];
@@ -57,9 +63,11 @@ let MobileTableHeader = (() => {
     return class MobileTableHeader extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _renderGroupHeader_decorators = [property({ attribute: false })];
             _scaleDiv_decorators = [query('.scale-div')];
             _tableViewManager_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
             __esDecorate(this, null, _renderGroupHeader_decorators, { kind: "accessor", name: "renderGroupHeader", static: false, private: false, access: { has: obj => "renderGroupHeader" in obj, get: obj => obj.renderGroupHeader, set: (obj, value) => { obj.renderGroupHeader = value; } }, metadata: _metadata }, _renderGroupHeader_initializers, _renderGroupHeader_extraInitializers);
             __esDecorate(this, null, _scaleDiv_decorators, { kind: "accessor", name: "scaleDiv", static: false, private: false, access: { has: obj => "scaleDiv" in obj, get: obj => obj.scaleDiv, set: (obj, value) => { obj.scaleDiv = value; } }, metadata: _metadata }, _scaleDiv_initializers, _scaleDiv_extraInitializers);
             __esDecorate(this, null, _tableViewManager_decorators, { kind: "accessor", name: "tableViewManager", static: false, private: false, access: { has: obj => "tableViewManager" in obj, get: obj => obj.tableViewManager, set: (obj, value) => { obj.tableViewManager = value; } }, metadata: _metadata }, _tableViewManager_initializers, _tableViewManager_extraInitializers);
@@ -69,11 +77,18 @@ let MobileTableHeader = (() => {
     .mobile-table-add-column {
       font-size: 18px;
       color: ${unsafeCSSVarV2('icon/primary')};
-      margin-left: 8px;
       display: flex;
       align-items: center;
+      justify-content: center;
+      min-width: 44px;
+      min-height: 44px;
+      cursor: pointer;
     }
   `; }
+        #std_accessor_storage;
+        /** Absent outside an editor host: the wordings read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         get readonly() {
             return this.tableViewManager.readonly$.value;
         }
@@ -105,9 +120,17 @@ let MobileTableHeader = (() => {
               </div>
             `;
             })}
-        <div @click="${this._onAddColumn}" class="mobile-table-add-column">
-          ${PlusIcon()}
-        </div>
+        ${this.readonly
+                ? nothing
+                : html `<div
+              @click="${this._onAddColumn}"
+              class="mobile-table-add-column"
+              data-testid="dv-table-add-property"
+              role="button"
+              aria-label="${wordingOf(this.std)(DATA_VIEW_NEW_PROPERTY)}"
+            >
+              ${PlusIcon()}
+            </div>`}
         <div class="scale-div" style="width: 1px;height: 1px;"></div>
       </div>
     `;
@@ -123,17 +146,26 @@ let MobileTableHeader = (() => {
         set tableViewManager(value) { this.#tableViewManager_accessor_storage = value; }
         constructor() {
             super(...arguments);
-            this._onAddColumn = () => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            /**
+             * "+" adds a property and opens ITS "Property settings" sheet. Up to 0.54
+             * the last header was looked up in the same tick, before the header had
+             * drawn the new column, so the sheet opened on the previous last property.
+             */
+            this._onAddColumn = (__runInitializers(this, _std_extraInitializers), () => {
                 if (this.readonly)
                     return;
-                this.tableViewManager.propertyAdd('end');
-                this.editLastColumnTitle();
-            };
-            this.editLastColumnTitle = () => {
-                const columns = this.querySelectorAll('mobile-table-column-header');
-                const column = columns.item(columns.length - 1);
-                column.editTitle();
-            };
+                const id = this.tableViewManager.propertyAdd('end');
+                if (!id)
+                    return;
+                this.updateComplete
+                    .then(() => {
+                    Array.from(this.querySelectorAll('mobile-table-column-header'))
+                        .find(header => header.column.id === id)
+                        ?.editTitle();
+                })
+                    .catch(console.error);
+            });
             this.#renderGroupHeader_accessor_storage = __runInitializers(this, _renderGroupHeader_initializers, void 0);
             this.#scaleDiv_accessor_storage = (__runInitializers(this, _renderGroupHeader_extraInitializers), __runInitializers(this, _scaleDiv_initializers, void 0));
             this.#tableViewManager_accessor_storage = (__runInitializers(this, _scaleDiv_extraInitializers), __runInitializers(this, _tableViewManager_initializers, void 0));

package/dist/_pkgs/data-view/view-presets/table/mobile/menu.d.ts

@@ -1,4 +1,6 @@
 import { type PopupTarget } from '../../../../affine-components/context-menu/index.js';
 import type { SingleView } from '../../../core/index.js';
+import { type Wording } from '../../../core/utils/wording.js';
 import type { MobileTableViewUILogic } from './table-view-ui-logic.js';
-export declare const popMobileRowMenu: (target: PopupTarget, rowId: string, tableViewLogic: MobileTableViewUILogic, view: SingleView) => void;
+/** A row's menu on a phone, opened by a long press on the row. */
+export declare const popMobileRowMenu: (target: PopupTarget, rowId: string, tableViewLogic: MobileTableViewUILogic, view: SingleView, wording?: Wording) => void;

package/dist/_pkgs/data-view/view-presets/table/mobile/menu.js

@@ -1,11 +1,15 @@
 import { menu, popFilterableSimpleMenu, } from '../../../../affine-components/context-menu/index.js';
+import { OPEN_LABEL } from '../../../../affine-components/translations.js';
+import { TOOLBAR_DELETE } from '../../../../affine-shared/services/index.js';
 import { DeleteIcon, ExpandFullIcon } from '@blocksuite/icons/lit';
-export const popMobileRowMenu = (target, rowId, tableViewLogic, view) => {
+import { englishWording } from '../../../core/utils/wording.js';
+/** A row's menu on a phone, opened by a long press on the row. */
+export const popMobileRowMenu = (target, rowId, tableViewLogic, view, wording = englishWording) => {
     popFilterableSimpleMenu(target, [
         menu.group({
             items: [
                 menu.action({
-                    name: 'Expand Row',
+                    name: wording(OPEN_LABEL),
                     prefix: ExpandFullIcon(),
                     select: () => {
                         tableViewLogic.root.openDetailPanel({
@@ -20,7 +24,7 @@ export const popMobileRowMenu = (target, rowId, tableViewLogic, view) => {
             name: '',
             items: [
                 menu.action({
-                    name: 'Delete Row',
+                    name: wording(TOOLBAR_DELETE),
                     class: { 'delete-item': true },
                     prefix: DeleteIcon(),
                     select: () => {

package/dist/_pkgs/data-view/view-presets/table/mobile/row.d.ts

@@ -1,8 +1,30 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { MobileTableViewUILogic } from './table-view-ui-logic.js';
+/** The "Open" chip's widest drawing, its 8px inset and 4px of air. */
+export declare const ROW_OPEN_WIDTH: number;
+/** How long a finger rests on a row before its menu opens. */
+export declare const ROW_LONG_PRESS_MS = 500;
 declare const MobileTableRow_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * A row of the phone table (P7, "Bases éditables sur mobile", after Notion's
+ * phone table). A tap on a cell edits it; the title column carries an "Open"
+ * chip that opens the row through the root's detail panel, the path of the
+ * desktop row's open button; a long press opens the row menu (open, delete).
+ *
+ * Up to 0.54 the title cell carried two floating ops (open and "...") drawn
+ * over the end of the title. The chip reserves its room instead, and the
+ * "..." moved to the long press so deleting a row stays possible on a phone.
+ */
 export declare class MobileTableRow extends MobileTableRow_base {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
+    private pressTimer;
+    private pressOrigin;
+    /** A long press fired: the click the finger's release makes is eaten. */
+    private pressFired;
+    private readonly cancelPress;
+    private readonly openRow;
     get groupKey(): string | undefined;
     connectedCallback(): void;
     protected render(): unknown;