@formicoidea/labre-core 0.54.0 → 0.55.0

package/dist/_pkgs/data-view/widget-presets/tools/presets/sort/sort.js

@@ -1,14 +1,51 @@
+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 { popupTargetFromElement } from '../../../../../affine-components/context-menu/index.js';
-import { IS_MOBILE } from '../../../../../global/env/index.js';
 import { SortIcon } from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
 import { cssVarV2 } from '@toeverything/theme/v2';
+import { stdContext } from '../../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { popCreateSort } from '../../../../core/sort/add-sort.js';
 import { sortTraitKey } from '../../../../core/sort/manager.js';
 import { createSortUtils } from '../../../../core/sort/utils.js';
+import { wordingOf } from '../../../../core/utils/wording.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
+import { DATA_VIEW_SORT } from '../../../../translations.js';
 import { createDefaultShowQuickSettingBar, ShowQuickSettingBarKey, } from '../../../quick-setting-bar/context.js';
 import { popSortRoot } from '../../../quick-setting-bar/sort/root-panel.js';
 const styles = css `
@@ -28,80 +65,108 @@ const styles = css `
     background-color: var(--affine-hover-color);
   }
 
-  .affine-database-sort-button {
+  /* Shown on a phone too, its menus as sheets: 44px for a finger (P7). */
+  @media (pointer: coarse) {
+    .affine-database-sort-button {
+      min-width: 44px;
+      min-height: 44px;
+      justify-content: center;
+    }
   }
 `;
-export class DataViewHeaderToolsSort extends WidgetBase {
-    constructor() {
-        super(...arguments);
-        this.sortUtils$ = computed(() => {
-            const sortTrait = this.view.traitGet(sortTraitKey);
-            if (sortTrait) {
-                return createSortUtils(sortTrait, this.dataViewLogic.eventTrace);
+let DataViewHeaderToolsSort = (() => {
+    let _classSuper = WidgetBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class DataViewHeaderToolsSort extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            __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);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = styles; }
+        get readonly() {
+            return this.view.readonly$.value;
+        }
+        clickSort(event) {
+            const sortUtils = this.sortUtils$.value;
+            if (!sortUtils) {
+                return;
             }
-            return;
-        });
-        this.hasSort = computed(() => {
-            return (this.sortUtils$.value?.sortList$?.value?.length ?? 0) > 0;
-        });
-    }
-    static { this.styles = styles; }
-    get readonly() {
-        return this.view.readonly$.value;
-    }
-    clickSort(event) {
-        const sortUtils = this.sortUtils$.value;
-        if (!sortUtils) {
+            if (this.hasSort.value) {
+                this.toggleShowQuickSettingBar();
+                return;
+            }
+            popCreateSort(popupTargetFromElement(event.currentTarget), {
+                sortUtils: {
+                    ...sortUtils,
+                    add: sort => {
+                        sortUtils.add(sort);
+                        this.toggleShowQuickSettingBar(true);
+                        requestAnimationFrame(() => {
+                            const ele = this.closest('affine-data-view-renderer')?.querySelector('.data-view-sort-button');
+                            if (ele) {
+                                popSortRoot(popupTargetFromElement(ele), {
+                                    sortUtils: sortUtils,
+                                });
+                            }
+                        });
+                    },
+                },
+            });
             return;
         }
-        if (this.hasSort.value) {
-            this.toggleShowQuickSettingBar();
-            return;
+        #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; }
+        connectedCallback() {
+            super.connectedCallback();
+            this.style.display = 'flex';
         }
-        popCreateSort(popupTargetFromElement(event.currentTarget), {
-            sortUtils: {
-                ...sortUtils,
-                add: sort => {
-                    sortUtils.add(sort);
-                    this.toggleShowQuickSettingBar(true);
-                    requestAnimationFrame(() => {
-                        const ele = this.closest('affine-data-view-renderer')?.querySelector('.data-view-sort-button');
-                        if (ele) {
-                            popSortRoot(popupTargetFromElement(ele), {
-                                sortUtils: sortUtils,
-                            });
-                        }
-                    });
-                },
-            },
-        });
-        return;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.style.display = IS_MOBILE ? 'none' : 'flex';
-    }
-    render() {
-        if (this.readonly)
-            return nothing;
-        const style = styleMap({
-            color: this.hasSort.value
-                ? cssVarV2('text/emphasis')
-                : cssVarV2('icon/primary'),
-        });
-        return html ` <div
+        render() {
+            if (this.readonly)
+                return nothing;
+            const style = styleMap({
+                color: this.hasSort.value
+                    ? cssVarV2('text/emphasis')
+                    : cssVarV2('icon/primary'),
+            });
+            return html ` <div
       @click="${this.clickSort}"
       style="${style}"
       class="affine-database-sort-button"
+      data-testid="dv-tools-sort"
+      role="button"
+      aria-label="${wordingOf(this.std)(DATA_VIEW_SORT)}"
     >
       ${SortIcon()}
     </div>`;
-    }
-    toggleShowQuickSettingBar(show) {
-        const map = this.view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar);
-        map.value = {
-            ...map.value,
-            [this.view.id]: show ?? !map.value[this.view.id],
-        };
-    }
-}
+        }
+        toggleShowQuickSettingBar(show) {
+            const map = this.view.serviceGetOrCreate(ShowQuickSettingBarKey, createDefaultShowQuickSettingBar);
+            map.value = {
+                ...map.value,
+                [this.view.id]: show ?? !map.value[this.view.id],
+            };
+        }
+        constructor() {
+            super(...arguments);
+            this.sortUtils$ = computed(() => {
+                const sortTrait = this.view.traitGet(sortTraitKey);
+                if (sortTrait) {
+                    return createSortUtils(sortTrait, this.dataViewLogic.eventTrace);
+                }
+                return;
+            });
+            this.hasSort = computed(() => {
+                return (this.sortUtils$.value?.sortList$?.value?.length ?? 0) > 0;
+            });
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            __runInitializers(this, _std_extraInitializers);
+        }
+    };
+})();
+export { DataViewHeaderToolsSort };

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

@@ -41,7 +41,7 @@ import { css, html } from 'lit';
 import { wordingOf } from '../../../../core/utils/wording.js';
 import { NewRowMenuOpenerKey } from '../../../../core/view-manager/new-row-menu-opener.js';
 import { WidgetBase } from '../../../../core/widget/widget-base.js';
-import { DATA_VIEW_NEW_RECORD, DATA_VIEW_NEW_RECORD_SHORT, } from '../../../../translations.js';
+import { DATA_VIEW_NEW_PAGE, DATA_VIEW_NEW_RECORD, } from '../../../../translations.js';
 const styles = css `
   .new-record {
     font-weight: 500;
@@ -54,6 +54,34 @@ const styles = css `
     }
   }
 
+  /* On a phone, a blue "+" as Notion draws it: 32px drawn, 44px to touch. */
+  .new-record-phone {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: 6px;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    background-color: ${unsafeCSSVarV2('button/primary')};
+    color: ${unsafeCSSVarV2('button/pureWhiteText')};
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  .new-record-phone::after {
+    content: '';
+    position: absolute;
+    inset: -6px;
+  }
+
+  .new-record-phone svg {
+    color: inherit;
+  }
+
   .new-record svg {
     font-size: 20px;
     color: ${unsafeCSSVarV2('icon/primary')};
@@ -114,15 +142,26 @@ let DataViewHeaderToolsAddRow = (() => {
             if (this.readonly$.value) {
                 return;
             }
-            const button = html ` <data-view-component-button
-      class="affine-database-toolbar-item new-record"
-      .onClick="${this.onAddNewRecord}"
-      .icon="${PlusIcon()}"
-      .text="${html `<span style="font-weight: 500"
-        >${wordingOf(this.std)(IS_MOBILE ? DATA_VIEW_NEW_RECORD_SHORT : DATA_VIEW_NEW_RECORD)}</span
-      >`}"
-    >
-    </data-view-component-button>`;
+            const wording = wordingOf(this.std);
+            const button = IS_MOBILE
+                ? html `<button
+          class="new-record-phone"
+          data-testid="dv-tools-new-row"
+          aria-label="${wording(DATA_VIEW_NEW_PAGE)}"
+          title="${wording(DATA_VIEW_NEW_PAGE)}"
+          @click="${this.onAddNewRecord}"
+        >
+          ${PlusIcon()}
+        </button>`
+                : html ` <data-view-component-button
+          class="affine-database-toolbar-item new-record"
+          .onClick="${this.onAddNewRecord}"
+          .icon="${PlusIcon()}"
+          .text="${html `<span style="font-weight: 500"
+            >${wording(DATA_VIEW_NEW_RECORD)}</span
+          >`}"
+        >
+        </data-view-component-button>`;
             const opener = this.view.serviceGet(NewRowMenuOpenerKey);
             if (!opener || opener.canOpen?.(this.view.id) === false)
                 return button;

package/package.json

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