@formicoidea/labre-core 0.53.0 → 0.55.0

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/column-header.d.ts

@@ -1,4 +1,4 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { TableProperty, TableSingleView } from '../table-view-manager.js';
 declare const MobileTableColumnHeader_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileTableColumnHeader extends MobileTableColumnHeader_base {
@@ -7,6 +7,8 @@ export declare class MobileTableColumnHeader extends MobileTableColumnHeader_bas
     editTitle: () => void;
     private popMenu;
     render(): import("lit-html").TemplateResult;
+    /** Absent outside an editor host: the menu reads English. */
+    accessor std: BlockStdScope;
     accessor column: TableProperty;
     accessor tableViewManager: TableSingleView;
 }

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

@@ -35,17 +35,23 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { unsafeCSSVarV2 } from '../../../../affine-shared/theme/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
-import { DeleteIcon, DuplicateIcon, InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, ViewIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { InsertLeftIcon, InsertRightIcon, MoveLeftIcon, MoveRightIcon, } from '@blocksuite/icons/lit';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
-import { inputConfig, typeConfig } from '../../../core/common/property-menu.js';
+import { propertyMenuItems } from '../../../core/common/property-menu.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 import { numberFormats } from '../../../property-presets/number/utils/formats.js';
+import { DATA_VIEW_INSERT_LEFT, DATA_VIEW_INSERT_RIGHT, DATA_VIEW_PROPERTY_SETTINGS, VIEWS_BAR_MOVE_LEFT, VIEWS_BAR_MOVE_RIGHT, } from '../../../translations.js';
 import { MOBILE_TOUCH_TARGET } from '../consts.js';
 let MobileTableColumnHeader = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _column_decorators;
     let _column_initializers = [];
     let _column_extraInitializers = [];
@@ -55,8 +61,10 @@ let MobileTableColumnHeader = (() => {
     return class MobileTableColumnHeader extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _column_decorators = [property({ attribute: false })];
             _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, _column_decorators, { kind: "accessor", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_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);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -84,16 +92,15 @@ let MobileTableColumnHeader = (() => {
   `; }
         popMenu(ele) {
             const enableNumberFormatting = this.tableViewManager.featureFlags$.value.enable_number_formatting;
+            const wording = wordingOf(this.std);
             popMenu(popupTargetFromElement(ele ?? this), {
                 options: {
                     title: {
-                        text: 'Property settings',
+                        text: wording(DATA_VIEW_PROPERTY_SETTINGS),
                     },
-                    items: [
-                        inputConfig(this.column),
-                        typeConfig(this.column),
-                        // Number format begin
-                        ...(enableNumberFormatting
+                    items: propertyMenuItems(this.column, {
+                        wording,
+                        afterType: enableNumberFormatting
                             ? [
                                 menu.subMenu({
                                     name: 'Number Format',
@@ -127,122 +134,88 @@ let MobileTableColumnHeader = (() => {
                                     },
                                 }),
                             ]
-                            : []),
-                        // Number format end
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Hide In View',
-                                    prefix: ViewIcon(),
-                                    hide: () => !this.column.hideCanSet,
-                                    select: () => {
-                                        this.column.hideSet(true);
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Insert Left Column',
-                                    prefix: InsertLeftIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: true,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const pre = this.previousElementSibling?.previousElementSibling;
-                                            if (pre instanceof MobileTableColumnHeader) {
-                                                pre.editTitle();
-                                                pre.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
+                            : [],
+                        beforeOperations: [
+                            menu.group({
+                                items: [
+                                    menu.action({
+                                        name: wording(DATA_VIEW_INSERT_LEFT),
+                                        prefix: InsertLeftIcon(),
+                                        select: () => {
+                                            this.tableViewManager.propertyAdd({
+                                                id: this.column.id,
+                                                before: true,
+                                            });
+                                            Promise.resolve()
+                                                .then(() => {
+                                                const pre = this.previousElementSibling?.previousElementSibling;
+                                                if (pre instanceof MobileTableColumnHeader) {
+                                                    pre.editTitle();
+                                                    pre.scrollIntoView({
+                                                        inline: 'nearest',
+                                                        block: 'nearest',
+                                                    });
+                                                }
+                                            })
+                                                .catch(console.error);
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(DATA_VIEW_INSERT_RIGHT),
+                                        prefix: InsertRightIcon(),
+                                        select: () => {
+                                            this.tableViewManager.propertyAdd({
+                                                id: this.column.id,
+                                                before: false,
+                                            });
+                                            Promise.resolve()
+                                                .then(() => {
+                                                const next = this.nextElementSibling?.nextElementSibling;
+                                                if (next instanceof MobileTableColumnHeader) {
+                                                    next.editTitle();
+                                                    next.scrollIntoView({
+                                                        inline: 'nearest',
+                                                        block: 'nearest',
+                                                    });
+                                                }
+                                            })
+                                                .catch(console.error);
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(VIEWS_BAR_MOVE_LEFT),
+                                        prefix: MoveLeftIcon(),
+                                        hide: () => this.column.isFirst$.value,
+                                        select: () => {
+                                            const pre = this.column.prev$.value;
+                                            if (!pre) {
+                                                return;
                                             }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Insert Right Column',
-                                    prefix: InsertRightIcon(),
-                                    select: () => {
-                                        this.tableViewManager.propertyAdd({
-                                            id: this.column.id,
-                                            before: false,
-                                        });
-                                        Promise.resolve()
-                                            .then(() => {
-                                            const next = this.nextElementSibling?.nextElementSibling;
-                                            if (next instanceof MobileTableColumnHeader) {
-                                                next.editTitle();
-                                                next.scrollIntoView({
-                                                    inline: 'nearest',
-                                                    block: 'nearest',
-                                                });
+                                            this.column.move({
+                                                id: pre.id,
+                                                before: true,
+                                            });
+                                        },
+                                    }),
+                                    menu.action({
+                                        name: wording(VIEWS_BAR_MOVE_RIGHT),
+                                        prefix: MoveRightIcon(),
+                                        hide: () => this.column.isLast$.value,
+                                        select: () => {
+                                            const next = this.column.next$.value;
+                                            if (!next) {
+                                                return;
                                             }
-                                        })
-                                            .catch(console.error);
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Left',
-                                    prefix: MoveLeftIcon(),
-                                    hide: () => this.column.isFirst$.value,
-                                    select: () => {
-                                        const pre = this.column.prev$.value;
-                                        if (!pre) {
-                                            return;
-                                        }
-                                        this.column.move({
-                                            id: pre.id,
-                                            before: true,
-                                        });
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Move Right',
-                                    prefix: MoveRightIcon(),
-                                    hide: () => this.column.isLast$.value,
-                                    select: () => {
-                                        const next = this.column.next$.value;
-                                        if (!next) {
-                                            return;
-                                        }
-                                        this.column.move({
-                                            id: next.id,
-                                            before: false,
-                                        });
-                                    },
-                                }),
-                            ],
-                        }),
-                        menu.group({
-                            items: [
-                                menu.action({
-                                    name: 'Duplicate',
-                                    prefix: DuplicateIcon(),
-                                    hide: () => !this.column.canDuplicate,
-                                    select: () => {
-                                        this.column.duplicate?.();
-                                    },
-                                }),
-                                menu.action({
-                                    name: 'Delete',
-                                    prefix: DeleteIcon(),
-                                    hide: () => !this.column.canDelete,
-                                    select: () => {
-                                        this.column.delete?.();
-                                    },
-                                    class: {
-                                        'delete-item': true,
-                                    },
-                                }),
-                            ],
-                        }),
-                    ],
+                                            this.column.move({
+                                                id: next.id,
+                                                before: false,
+                                            });
+                                        },
+                                    }),
+                                ],
+                            }),
+                        ],
+                    }),
                 },
             });
         }
@@ -265,6 +238,10 @@ let MobileTableColumnHeader = (() => {
       </div>
     `;
         }
+        #std_accessor_storage;
+        /** Absent outside an editor host: the menu reads English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
         #column_accessor_storage;
         get column() { return this.#column_accessor_storage; }
         set column(value) { this.#column_accessor_storage = value; }
@@ -282,7 +259,8 @@ let MobileTableColumnHeader = (() => {
             this.editTitle = () => {
                 this._clickColumn();
             };
-            this.#column_accessor_storage = __runInitializers(this, _column_initializers, void 0);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.#column_accessor_storage = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _column_initializers, void 0));
             this.#tableViewManager_accessor_storage = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _tableViewManager_initializers, void 0));
             __runInitializers(this, _tableViewManager_extraInitializers);
         }

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, } 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,7 +171,9 @@ let MobileTableGroup = (() => {
               data-test-id="affine-database-add-row-button"
               role="button"
             >
-              ${PlusIcon()}<span style="font-size: 12px">New Record</span>
+              ${PlusIcon()}<span
+                >${wordingOf(this.std)(DATA_VIEW_NEW_PAGE)}</span
+              >
             </div>
           </div>`}
     `;
@@ -216,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;