@formicoidea/labre-core 0.47.1 → 0.49.0

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

@@ -67,6 +67,8 @@ let MobileTableRow = (() => {
             __esDecorate(this, null, _rowIndex_decorators, { kind: "accessor", name: "rowIndex", static: false, private: false, access: { has: obj => "rowIndex" in obj, get: obj => obj.rowIndex, set: (obj, value) => { obj.rowIndex = value; } }, metadata: _metadata }, _rowIndex_initializers, _rowIndex_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        // Touch targets are 44px tall (B5, ADR 0035 §1): the row, and each row op
+        // through an invisible hit area, so the ops keep their drawn size.
         static { this.styles = css `
     .mobile-table-row {
       width: 100%;
@@ -74,7 +76,7 @@ let MobileTableRow = (() => {
       flex-direction: row;
       border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       position: relative;
-      min-height: 34px;
+      min-height: 44px;
     }
 
     .mobile-row-ops {
@@ -83,7 +85,7 @@ let MobileTableRow = (() => {
       margin-top: 5px;
       height: max-content;
       display: flex;
-      gap: 4px;
+      gap: 20px;
       cursor: pointer;
       justify-content: end;
       right: 8px;
@@ -104,6 +106,12 @@ let MobileTableRow = (() => {
       font-size: 16px;
       color: ${unsafeCSSVarV2('icon/primary')};
     }
+
+    .mobile-row-op::after {
+      content: '';
+      position: absolute;
+      inset: -10px;
+    }
   `; }
         get groupKey() {
             return this.closest('affine-data-view-table-group')?.group?.key;

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

@@ -74,7 +74,7 @@ export class MobileTableViewUI extends DataViewUIBase {
         this.classList.add(mobileTableViewWrapper);
     }
     renderTable() {
-        const groups = this.logic.view.groupTrait.groupsDataList$.value;
+        const groups = this.logic.view.groupTrait.visibleGroups$.value;
         if (groups) {
             return html `
         <div style="display:flex;flex-direction: column;gap: 16px;">
@@ -86,6 +86,9 @@ export class MobileTableViewUI extends DataViewUIBase {
               ></mobile-table-group>`;
             })}
           ${this.logic.renderAddGroup(this.logic.view.groupTrait)}
+          <dv-hidden-groups
+            .groupTrait="${this.logic.view.groupTrait}"
+          ></dv-hidden-groups>
         </div>
       `;
         }

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

@@ -37,7 +37,7 @@ import { ShadowlessElement } from '../../../../std/index.js';
 import { computed, signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderUniLit } from '../../../core/index.js';
+import { renderCellStatus, renderUniLit } from '../../../core/index.js';
 import { TableViewAreaSelection, } from '../selection.js';
 let TableViewCellContainer = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -143,6 +143,9 @@ let TableViewCellContainer = (() => {
                 return;
             }
             const { view } = renderer;
+            const status = renderCellStatus(this.cell$.value);
+            if (status)
+                return status;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             const props = {

package/dist/_pkgs/data-view/view-presets/table/pc/controller/hotkeys.js

@@ -307,7 +307,7 @@ export class TableHotkeysController {
                 if (selection) {
                     context.get('keyboardState').raw.preventDefault();
                     this.selectionController.selection = TableViewRowSelection.create({
-                        rows: this.logic.view.groupTrait.groupsDataList$.value?.flatMap(group => group?.rows.map(row => ({
+                        rows: this.logic.view.groupTrait.visibleGroups$.value?.flatMap(group => group?.rows.map(row => ({
                             groupKey: group.key,
                             id: row.rowId,
                         })) ?? []) ??

package/dist/_pkgs/data-view/view-presets/table/pc/group.d.ts

@@ -1,10 +1,12 @@
-import { ShadowlessElement } from '../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../std/index.js';
 import type { Group } from '../../../core/group-by/trait.js';
 import type { Row } from '../../../core/index.js';
 import type { TableViewUILogic } from './table-view-ui-logic.js';
 declare const TableGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class TableGroup extends TableGroup_base {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     collapsed$: import("@preact/signals-core").Signal<boolean>;
     private storageLoaded;
     /**

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

@@ -35,16 +35,20 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { menu, popFilterableSimpleMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
 import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
 import { PlusIcon, ToggleDownIcon, ToggleRightIcon, } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { effect, signal } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 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 { createDndContext } from '../../../core/utils/wc-dnd/dnd-context.js';
 import { defaultActivators } from '../../../core/utils/wc-dnd/sensors/index.js';
 import { linearMove } from '../../../core/utils/wc-dnd/utils/linear-move.js';
+import { wordingOf } from '../../../core/utils/wording.js';
+import { DATA_VIEW_GROUP_COLLAPSE, DATA_VIEW_GROUP_EXPAND, } from '../../../translations.js';
 import { getCollapsedState, setCollapsedState } from '../collapsed-state.js';
 import { LEFT_TOOL_BAR_WIDTH } from '../consts.js';
 import { TableViewAreaSelection } from '../selection.js';
@@ -111,6 +115,9 @@ const styles = css `
 `;
 let TableGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _group_decorators;
     let _group_initializers = [];
     let _group_extraInitializers = [];
@@ -123,15 +130,21 @@ let TableGroup = (() => {
     return class TableGroup extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
             _group_decorators = [property({ attribute: false })];
             _rowsContainer_decorators = [query('.affine-database-block-rows')];
             _tableViewLogic_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, _group_decorators, { kind: "accessor", name: "group", static: false, private: false, access: { has: obj => "group" in obj, get: obj => obj.group, set: (obj, value) => { obj.group = value; } }, metadata: _metadata }, _group_initializers, _group_extraInitializers);
             __esDecorate(this, null, _rowsContainer_decorators, { kind: "accessor", name: "rowsContainer", static: false, private: false, access: { has: obj => "rowsContainer" in obj, get: obj => obj.rowsContainer, set: (obj, value) => { obj.rowsContainer = value; } }, metadata: _metadata }, _rowsContainer_initializers, _rowsContainer_extraInitializers);
             __esDecorate(this, null, _tableViewLogic_decorators, { kind: "accessor", name: "tableViewLogic", static: false, private: false, access: { has: obj => "tableViewLogic" in obj, get: obj => obj.tableViewLogic, set: (obj, value) => { obj.tableViewLogic = value; } }, metadata: _metadata }, _tableViewLogic_initializers, _tableViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = styles; }
+        #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; }
         /**
          * Read the stored collapsed state once, as soon as the group and its view
          * are both known. Reading it earlier would key the lookup on a missing view
@@ -221,7 +234,8 @@ let TableGroup = (() => {
         }
         constructor() {
             super(...arguments);
-            this.collapsed$ = signal(false);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.collapsed$ = (__runInitializers(this, _std_extraInitializers), signal(false));
             this.storageLoaded = false;
             this._toggleCollapse = (e) => {
                 e?.stopPropagation();
@@ -282,6 +296,7 @@ let TableGroup = (() => {
                             });
                         },
                     }),
+                    hideGroupAction(group, wordingOf(this.std)),
                     menu.action({
                         name: 'Delete Cards',
                         select: () => {
@@ -303,9 +318,9 @@ let TableGroup = (() => {
           class="group-toggle-btn"
           role="button"
           aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
-          aria-label=${this.collapsed$.value
-                    ? 'Expand group'
-                    : 'Collapse group'}
+          aria-label=${wordingOf(this.std)(this.collapsed$.value
+                    ? DATA_VIEW_GROUP_EXPAND
+                    : DATA_VIEW_GROUP_COLLAPSE)}
           tabindex="0"
           @click=${this._toggleCollapse}
           @keydown=${(e) => {

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

@@ -1,5 +1,5 @@
 import { type PopupTarget } from '../../../../affine-components/context-menu/index.js';
 import type { TableSelectionController } from './controller/selection.js';
 import type { TableViewUILogic } from './table-view-ui-logic.js';
-export declare const openDetail: (tableViewLogic: TableViewUILogic, rowId: string, selection: TableSelectionController) => void;
+export declare const openDetail: (tableViewLogic: TableViewUILogic, rowId: string, selection: TableSelectionController, newTab?: boolean) => void;
 export declare const popRowMenu: (tableViewLogic: TableViewUILogic, ele: PopupTarget, selectionController: TableSelectionController) => void;

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

@@ -2,12 +2,13 @@ import { menu, popFilterableSimpleMenu, } from '../../../../affine-components/co
 import { CopyIcon, DeleteIcon, ExpandFullIcon, MoveLeftIcon, MoveRightIcon, } from '@blocksuite/icons/lit';
 import { html } from 'lit';
 import { TableViewRowSelection } from '../selection.js';
-export const openDetail = (tableViewLogic, rowId, selection) => {
+export const openDetail = (tableViewLogic, rowId, selection, newTab = false) => {
     const old = selection.selection;
     selection.selection = undefined;
     tableViewLogic.root.openDetailPanel({
         view: selection.logic.view,
         rowId: rowId,
+        newTab,
         onClose: () => {
             selection.selection = old;
         },

package/dist/_pkgs/data-view/view-presets/table/pc/row/row.js

@@ -44,6 +44,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 import { TableViewRowSelection, } from '../../selection.js';
 import { cellDivider } from '../../styles.js';
+import { isNewTabClick } from '../../../../core/utils/new-tab-click.js';
 import { openDetail, popRowMenu } from '../menu.js';
 let TableRowView = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
@@ -203,14 +204,14 @@ let TableRowView = (() => {
             </div>
           </div>`}
       ${repeat(view.properties$.value, v => v.id, (column, i) => {
-                const clickDetail = () => {
+                const clickDetail = (event) => {
                     if (!this.selectionController) {
                         return;
                     }
                     this.setSelection(TableViewRowSelection.create({
                         rows: [{ id: this.rowId, groupKey: this.groupKey }],
                     }));
-                    openDetail(this.tableViewLogic, this.rowId, this.selectionController);
+                    openDetail(this.tableViewLogic, this.rowId, this.selectionController, isNewTabClick(event));
                 };
                 const openMenu = (e) => {
                     if (!this.selectionController) {

package/dist/_pkgs/data-view/view-presets/table/pc/table-view-ui-logic.js

@@ -116,7 +116,7 @@ export class TableViewUI extends DataViewUIBase {
         this.dataset['testid'] = 'dv-table-view';
     }
     renderTable() {
-        const groups = this.logic.view.groupTrait.groupsDataList$.value;
+        const groups = this.logic.view.groupTrait.visibleGroups$.value;
         if (groups) {
             return html `
         <div class="${tableGroupsContainerStyle}">
@@ -128,6 +128,9 @@ export class TableViewUI extends DataViewUIBase {
               ></affine-data-view-table-group>`;
             })}
           ${this.logic.renderAddGroup(this.logic.view.groupTrait)}
+          <dv-hidden-groups
+            .groupTrait="${this.logic.view.groupTrait}"
+          ></dv-hidden-groups>
         </div>
       `;
         }

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/controller/hotkeys.js

@@ -309,7 +309,7 @@ export class TableHotkeysController {
                 if (selection) {
                     context.get('keyboardState').raw.preventDefault();
                     this.selectionController.selection = TableViewRowSelection.create({
-                        rows: this.logic.view.groupTrait.groupsDataList$.value?.flatMap(group => group?.rows.map(row => ({
+                        rows: this.logic.view.groupTrait.visibleGroups$.value?.flatMap(group => group?.rows.map(row => ({
                             groupKey: group.key,
                             id: row.rowId,
                         })) ?? []) ??

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/group/bottom/stats/column-stats-column.js

@@ -42,7 +42,7 @@ import { computed, signal } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { typeSystem } from '../../../../../../core/index.js';
+import { typeSystem, VALUES_PENDING_MARK, valuesReady, } from '../../../../../../core/index.js';
 import { statsFunctions } from '../../../../../../core/statistics/index.js';
 const styles = css `
   .stats-cell {
@@ -255,6 +255,10 @@ let VirtualDatabaseColumnStatsCell = (() => {
                 if (!func) {
                     return null;
                 }
+                const dataSource = this.column.view.manager.dataSource;
+                if (!valuesReady(dataSource)) {
+                    return { name: func.displayName, value: VALUES_PENDING_MARK };
+                }
                 return {
                     name: func.displayName,
                     value: func.impl?.(this.values$.value, {

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/group/top/group-title.js

@@ -2,9 +2,12 @@ import { MoreHorizontalIcon, PlusIcon } from '@blocksuite/icons/lit';
 import clsx from 'clsx';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
-import { renderUniLit, } from '../../../../../core/index.js';
+import { renderUniLit, VALUES_PENDING_MARK, valuesReady, } from '../../../../../core/index.js';
 import { groupHeaderCount, groupHeaderIcon, groupHeaderOp, groupHeaderOps, groupHeaderTitle, groupTitleRow, show, } from './group-title-css.js';
 function GroupHeaderCount(group) {
+    if (!valuesReady(group.property.view.manager.dataSource)) {
+        return html ` <div class="${groupHeaderCount}">${VALUES_PENDING_MARK}</div>`;
+    }
     const cards = group.rows;
     if (!cards.length) {
         return;
@@ -19,9 +22,9 @@ export const GroupTitle = (groupData, ops) => {
     }
     const icon = groupData.value == null
         ? ''
-        : html ` <uni-lit
-          class="${groupHeaderIcon}"
-          .uni="${groupData.property.icon}"
+        : html ` <uni-lit
+          class="${groupHeaderIcon}"
+          .uni="${groupData.property.icon}"
         ></uni-lit>`;
     const props = {
         group: groupData,
@@ -29,25 +32,25 @@ export const GroupTitle = (groupData, ops) => {
     };
     const showColumnName = groupData.property.type$.value === 'checkbox';
     const columnName = showColumnName
-        ? html `<span class="${groupHeaderTitle}"
-        >${groupData.property.name$.value}</span
+        ? html `<span class="${groupHeaderTitle}"
+        >${groupData.property.name$.value}</span
       >`
         : nothing;
     const opsClass = clsx(ops.groupHover && show, groupHeaderOps);
-    return html `
-    <div class="${groupTitleRow}">
-      ${icon} ${renderUniLit(view, props)} ${columnName}
-      ${GroupHeaderCount(groupData)}
-    </div>
+    return html `
+    <div class="${groupTitleRow}">
+      ${icon} ${renderUniLit(view, props)} ${columnName}
+      ${GroupHeaderCount(groupData)}
+    </div>
     ${!ops.readonly
-        ? html ` <div class="${opsClass}">
-          <div @click="${ops.clickAdd}" class="${groupHeaderOp}">
-            ${PlusIcon()}
-          </div>
-          <div @click="${ops.clickOps}" class="${groupHeaderOp}">
-            ${MoreHorizontalIcon()}
-          </div>
+        ? html ` <div class="${opsClass}">
+          <div @click="${ops.clickAdd}" class="${groupHeaderOp}">
+            ${PlusIcon()}
+          </div>
+          <div @click="${ops.clickOps}" class="${groupHeaderOp}">
+            ${MoreHorizontalIcon()}
+          </div>
         </div>`
-        : nothing}
+        : nothing}
   `;
 };

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/row/cell.js

@@ -38,7 +38,7 @@ import { ShadowlessElement } from '../../../../../std/index.js';
 import { computed, effect, signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { renderUniLit } from '../../../../core/index.js';
+import { renderCellStatus, renderUniLit } from '../../../../core/index.js';
 import { TableViewAreaSelection, TableViewRowSelection, } from '../../selection.js';
 import { popRowMenu } from './menu.js';
 import { rowSelectedBg } from './row-header-css.js';
@@ -133,6 +133,9 @@ let DatabaseCellContainer = (() => {
                 return;
             }
             const { view } = renderer;
+            const status = renderCellStatus(this.cell$.value);
+            if (status)
+                return status;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             const props = {

package/dist/_pkgs/data-view/view-presets/table/pc-virtual/table-view-ui-logic.js

@@ -51,7 +51,12 @@ export class VirtualTableViewUILogic extends DataViewUILogicBase {
         });
         this.groups$ = computed(() => {
             const groupTrait = this.groupTrait$.value;
-            if (!groupTrait?.groupsDataList$.value) {
+            // ponytail: the virtual grid drops hidden groups but lists none at its
+            // end and folds nothing (B8); it is off by default
+            // (`enable_table_virtual_scroll`). Upgrade: a last grid row drawing
+            // <dv-hidden-groups>, and the fold of `TableGroup` in its group header.
+            const groups = groupTrait?.visibleGroups$.value;
+            if (!groups) {
                 return [
                     {
                         id: '',
@@ -59,7 +64,7 @@ export class VirtualTableViewUILogic extends DataViewUILogicBase {
                     },
                 ];
             }
-            return groupTrait.groupsDataList$.value.map(group => ({
+            return groups.map(group => ({
                 id: group.key,
                 rows: group.rows.map(v => v.rowId),
             }));

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

@@ -42,7 +42,7 @@ import { computed, signal } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { typeSystem } from '../../../core/index.js';
+import { typeSystem, VALUES_PENDING_MARK, valuesReady, } from '../../../core/index.js';
 import { statsFunctions } from '../../../core/statistics/index.js';
 const styles = css `
   .stats-cell {
@@ -255,6 +255,10 @@ let DatabaseColumnStatsCell = (() => {
                 if (!func) {
                     return null;
                 }
+                const dataSource = this.column.view.manager.dataSource;
+                if (!valuesReady(dataSource)) {
+                    return { name: func.displayName, value: VALUES_PENDING_MARK };
+                }
                 return {
                     name: func.displayName,
                     value: func.impl?.(this.values$.value, {

package/dist/_pkgs/data-view/view-presets/table/table-view-manager.js

@@ -4,7 +4,8 @@ import { evalFilter } from '../../core/filter/eval.js';
 import { generateDefaultValues } from '../../core/filter/generate-default-values.js';
 import { FilterTrait, filterTraitKey } from '../../core/filter/trait.js';
 import { emptyFilterGroup } from '../../core/filter/utils.js';
-import { GroupTrait, groupTraitKey, sortByManually, } from '../../core/group-by/trait.js';
+import { groupPropertiesOps } from '../../core/group-by/group-properties.js';
+import { GroupTrait, groupTraitKey } from '../../core/group-by/trait.js';
 import { fromJson } from '../../core/property/utils.js';
 import { SortManager, sortTraitKey } from '../../core/sort/manager.js';
 import { PropertyBase } from '../../core/view-manager/property.js';
@@ -79,58 +80,9 @@ export class TableSingleView extends SingleViewBase {
                     };
                 });
             },
-            sortGroup: ids => sortByManually(ids, v => v, this.groupProperties.map(v => v.key)),
-            sortRow: (key, rows) => {
-                const property = this.groupProperties.find(v => v.key === key);
-                return sortByManually(rows, v => v.rowId, property?.manuallyCardSort ?? []);
-            },
-            changeGroupSort: keys => {
-                const map = new Map(this.groupProperties.map(v => [v.key, v]));
-                this.dataUpdate(() => {
-                    return {
-                        groupProperties: keys.map(key => {
-                            const property = map.get(key);
-                            if (property) {
-                                return property;
-                            }
-                            return {
-                                key,
-                                hide: false,
-                                manuallyCardSort: [],
-                            };
-                        }),
-                    };
-                });
-            },
-            changeRowSort: (groupKeys, groupKey, keys) => {
-                const map = new Map(this.groupProperties.map(v => [v.key, v]));
-                this.dataUpdate(() => {
-                    return {
-                        groupProperties: groupKeys.map(key => {
-                            if (key === groupKey) {
-                                const group = map.get(key);
-                                return group
-                                    ? {
-                                        ...group,
-                                        manuallyCardSort: keys,
-                                    }
-                                    : {
-                                        key,
-                                        hide: false,
-                                        manuallyCardSort: keys,
-                                    };
-                            }
-                            else {
-                                return (map.get(key) ?? {
-                                    key,
-                                    hide: false,
-                                    manuallyCardSort: [],
-                                });
-                            }
-                        }),
-                    };
-                });
-            },
+            ...groupPropertiesOps(() => this.groupProperties, groupProperties => {
+                this.dataUpdate(() => ({ groupProperties }));
+            }),
         }));
         this.mainProperties$ = computed(() => {
             return (this.data$.value?.header ?? {

package/dist/_pkgs/data-view/widget-presets/tools/presets/table-add-row/add-row.d.ts

@@ -2,6 +2,7 @@ import { WidgetBase } from '../../../../core/widget/widget-base.js';
 export declare class DataViewHeaderToolsAddRow extends WidgetBase {
     static styles: import("lit").CSSResult;
     private readonly onAddNewRecord;
+    private readonly onOpenMenu;
     private get readonly$();
     render(): import("lit-html").TemplateResult<1> | undefined;
 }

package/dist/_pkgs/data-view/widget-presets/tools/presets/table-add-row/add-row.js

@@ -1,7 +1,8 @@
 import { unsafeCSSVarV2 } from '../../../../../affine-shared/theme/index.js';
 import { IS_MOBILE } from '../../../../../global/env/index.js';
-import { PlusIcon } from '@blocksuite/icons/lit';
+import { ArrowDownSmallIcon, PlusIcon } from '@blocksuite/icons/lit';
 import { css, html } from 'lit';
+import { NewRowMenuOpenerKey } from '../../../../core/view-manager/new-row-menu-opener.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
 const styles = css `
   .new-record {
@@ -12,6 +13,37 @@ const styles = css `
     font-size: 20px;
     color: ${unsafeCSSVarV2('icon/primary')};
   }
+
+  /* A split button only when the host offers a menu beside "New"
+     (NewRowMenuOpenerKey): without it, the single button above. */
+  .new-record-split {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .new-record-split .new-record {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .new-record-split .new-record-more {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding: 4px;
+  }
+
+  @media (pointer: coarse) {
+    .new-record-split .new-record,
+    .new-record-split .new-record-more {
+      min-height: 44px;
+    }
+
+    .new-record-split .new-record-more {
+      min-width: 44px;
+      justify-content: center;
+    }
+  }
 `;
 export class DataViewHeaderToolsAddRow extends WidgetBase {
     constructor() {
@@ -21,6 +53,14 @@ export class DataViewHeaderToolsAddRow extends WidgetBase {
                 return;
             this.dataViewLogic.addRow?.('start');
         };
+        this.onOpenMenu = (event) => {
+            event.stopPropagation();
+            if (this.readonly$.value)
+                return;
+            this.view
+                .serviceGet(NewRowMenuOpenerKey)
+                ?.open(event.currentTarget, this.view.id);
+        };
     }
     static { this.styles = styles; }
     get readonly$() {
@@ -30,7 +70,7 @@ export class DataViewHeaderToolsAddRow extends WidgetBase {
         if (this.readonly$.value) {
             return;
         }
-        return html ` <data-view-component-button
+        const button = html ` <data-view-component-button
       class="affine-database-toolbar-item new-record"
       .onClick="${this.onAddNewRecord}"
       .icon="${PlusIcon()}"
@@ -39,5 +79,23 @@ export class DataViewHeaderToolsAddRow extends WidgetBase {
             : html `<span style="font-weight: 500">New Record</span>`}"
     >
     </data-view-component-button>`;
+        const opener = this.view.serviceGet(NewRowMenuOpenerKey);
+        if (!opener || opener.canOpen?.(this.view.id) === false)
+            return button;
+        const label = opener.label();
+        return html `<div class="new-record-split">
+      ${button}
+      <data-view-component-button
+        class="affine-database-toolbar-item new-record-more"
+        data-testid="database-new-record-more"
+        role="button"
+        aria-haspopup="menu"
+        aria-label="${label}"
+        title="${label}"
+        .onClick="${this.onOpenMenu}"
+        .icon="${ArrowDownSmallIcon()}"
+      >
+      </data-view-component-button>
+    </div>`;
     }
 }

package/dist/_pkgs/data-view/widget-presets/tools/presets/view-options/view-options.d.ts

@@ -1,10 +1,27 @@
 import { type PopupTarget } from '../../../../../affine-components/context-menu/index.js';
+import { type BlockStdScope } from '../../../../../std/index.js';
 import { type DataViewUILogicBase } from '../../../../core/index.js';
+import { type Wording } from '../../../../core/utils/wording.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
+import { type ViewSettingKey } from './view-settings.js';
 export declare class DataViewHeaderToolsViewOptions extends WidgetBase {
     static styles: import("lit").CSSResult;
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     clickMoreAction: (e: MouseEvent) => void;
     openMoreAction: (target: PopupTarget) => void;
+    /**
+     * Whether the current view offers setting `key` now (labre PRD REQ-DB-10:
+     * what a host's "This view" menu lists for the full page of a database).
+     */
+    settingAvailable(key: ViewSettingKey): boolean;
+    /**
+     * Open the menu of one setting of the current view, anchored on this
+     * button, its "back" leading to the view settings: the entry the view
+     * settings menu would open, for a caller outside it (a host's menu, through
+     * the database page's view-menu commands). Nothing when not offered.
+     */
+    openSetting(key: ViewSettingKey): void;
     render(): import("lit-html").TemplateResult<1> | undefined;
 }
 declare global {
@@ -12,4 +29,4 @@ declare global {
         'data-view-header-tools-view-options': DataViewHeaderToolsViewOptions;
     }
 }
-export declare const popViewOptions: (target: PopupTarget, dataViewLogic: DataViewUILogicBase, onClose?: () => void) => void;
+export declare const popViewOptions: (target: PopupTarget, dataViewLogic: DataViewUILogicBase, onClose?: () => void, wording?: Wording) => void;