@formicoidea/labre-core 0.48.0 → 0.49.0

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

@@ -102,7 +102,7 @@ const styles = css `
     right: 8px;
     top: 8px;
     display: flex;
-    gap: 4px;
+    gap: 20px;
   }
 
   .mobile-card-op {
@@ -115,6 +115,13 @@ const styles = css `
     font-size: 16px;
     color: ${unsafeCSSVarV2('icon/primary')};
   }
+
+  /* A 44px touch target around the drawn 24px op (B5, ADR 0035 §1). */
+  .mobile-card-op::after {
+    content: '';
+    position: absolute;
+    inset: -10px;
+  }
 `;
 let MobileKanbanCard = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));

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

@@ -40,6 +40,7 @@ import { computed, effect, signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { renderCellStatus } from '../../../core/component/cell-status/cell-status.js';
 import { renderUniLit } from '../../../core/utils/uni-component/uni-component.js';
 const styles = css `
   mobile-kanban-cell {
@@ -47,7 +48,8 @@ const styles = css `
     display: flex;
     align-items: center;
     padding: 4px;
-    min-height: 20px;
+    /* A finger's target (B5, ADR 0035 §1); was 20px when mobile was read-only. */
+    min-height: 44px;
     border: 1px solid transparent;
     box-sizing: border-box;
   }
@@ -139,6 +141,9 @@ let MobileKanbanCell = (() => {
             if (!renderer)
                 return;
             const { view } = renderer;
+            const status = renderCellStatus(props.cell);
+            if (status)
+                return html ` ${this.renderIcon()} ${status}`;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             return html ` ${this.renderIcon()}

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

@@ -1,9 +1,11 @@
-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 { MobileKanbanViewUILogic } from './kanban-view-ui-logic.js';
 declare const MobileKanbanGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MobileKanbanGroup extends MobileKanbanGroup_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     private readonly clickAddCard;
     private readonly clickAddCardInStart;
     private readonly clickGroupOptions;

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

@@ -35,13 +35,16 @@ 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 { AddCursorIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
+import { groupToggleStyles, hideGroupAction, renderGroupToggle, } from '../../../core/group-by/group-visibility.js';
 import { dragHandler } from '../../../core/utils/wc-dnd/dnd-context.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 const styles = css `
   mobile-kanban-group {
     width: 260px;
@@ -69,9 +72,36 @@ const styles = css `
     gap: 12px;
   }
 
+  .mobile-group-body[hidden] {
+    display: none;
+  }
+
+  @media (pointer: coarse) {
+    .mobile-group-header {
+      height: auto;
+      min-height: 44px;
+    }
+  }
+
+  .mobile-group-header-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .dv-kanban-hidden-groups {
+    width: 260px;
+    flex-shrink: 0;
+  }
+
   .mobile-add-card {
     display: flex;
     align-items: center;
+    min-height: 44px;
     padding: 4px;
     border-radius: 4px;
     font-size: var(--data-view-cell-text-size);
@@ -81,6 +111,9 @@ const styles = css `
 `;
 let MobileKanbanGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _group_decorators;
     let _group_initializers = [];
     let _group_extraInitializers = [];
@@ -90,24 +123,35 @@ let MobileKanbanGroup = (() => {
     return class MobileKanbanGroup 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 })];
             _kanbanViewLogic_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, _kanbanViewLogic_decorators, { kind: "accessor", name: "kanbanViewLogic", static: false, private: false, access: { has: obj => "kanbanViewLogic" in obj, get: obj => obj.kanbanViewLogic, set: (obj, value) => { obj.kanbanViewLogic = value; } }, metadata: _metadata }, _kanbanViewLogic_initializers, _kanbanViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = styles; }
+        static { this.styles = [styles, groupToggleStyles]; }
+        #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; }
         render() {
             const cards = this.group.rows;
+            // Folded (personal, B8): the header and its count stay, the cards go.
+            const collapsed = this.group.manager.collapsed$(this.group.key).value;
             return html `
       <div class="mobile-group-header" ${dragHandler(this.group.key)}>
-        ${GroupTitle(this.group, {
+        ${renderGroupToggle(this.group, wordingOf(this.std))}
+        <div class="mobile-group-header-main">
+          ${GroupTitle(this.group, {
                 readonly: this.view.readonly$.value,
                 clickAdd: this.clickAddCardInStart,
                 clickOps: this.clickGroupOptions,
             })}
+        </div>
       </div>
-      <div class="mobile-group-body">
+      <div class="mobile-group-body" ?hidden="${collapsed}">
         ${repeat(cards, row => row.rowId, row => {
                 return html `
               <mobile-kanban-card
@@ -142,10 +186,11 @@ let MobileKanbanGroup = (() => {
         }
         constructor() {
             super(...arguments);
-            this.clickAddCard = () => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.clickAddCard = (__runInitializers(this, _std_extraInitializers), () => {
                 this.view.addCard('end', this.group.key);
                 this.requestUpdate();
-            };
+            });
             this.clickAddCardInStart = () => {
                 this.view.addCard('start', this.group.key);
                 this.requestUpdate();
@@ -165,6 +210,7 @@ let MobileKanbanGroup = (() => {
                                     this.requestUpdate();
                                 },
                             }),
+                            hideGroupAction(this.group, wordingOf(this.std)),
                             menu.action({
                                 name: 'Delete Cards',
                                 select: () => {

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

@@ -97,7 +97,7 @@ export class MobileKanbanViewUI extends DataViewUIBase {
         this.classList.add(mobileKanbanViewWrapper);
     }
     render() {
-        const groups = this.logic.groupManager.groupsDataList$.value;
+        const groups = this.logic.groupManager.visibleGroups$.value;
         if (!groups) {
             return html ``;
         }
@@ -122,6 +122,10 @@ export class MobileKanbanViewUI extends DataViewUIBase {
             ></mobile-kanban-group>`;
         })}
         ${this.logic.renderAddGroup()}
+        <dv-hidden-groups
+          class="dv-kanban-hidden-groups"
+          .groupTrait="${this.logic.groupManager}"
+        ></dv-hidden-groups>
       </div>
     `;
     }

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

@@ -43,6 +43,7 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
+import { isNewTabClick } from '../../../core/utils/new-tab-click.js';
 import { openDetail, popCardMenu } from './menu.js';
 const styles = css `
   affine-data-view-kanban-card {
@@ -272,6 +273,7 @@ let KanbanCard = (() => {
                 this.kanbanViewLogic.root.openDetailPanel({
                     view: this.view,
                     rowId: this.cardId,
+                    newTab: isNewTabClick(e),
                     onClose: () => {
                         if (selection) {
                             selection.selection = preSelection;

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

@@ -39,6 +39,7 @@ import { signal } from '@preact/signals-core';
 import { css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { renderCellStatus } from '../../../core/component/cell-status/cell-status.js';
 import { renderUniLit } from '../../../core/utils/uni-component/uni-component.js';
 const styles = css `
   affine-data-view-kanban-cell {
@@ -150,6 +151,9 @@ let KanbanCell = (() => {
             if (!renderer)
                 return;
             const { view } = renderer;
+            const status = renderCellStatus(props.cell);
+            if (status)
+                return html ` ${this.renderIcon()} ${status}`;
             this.view.lockRows(this.isEditing$.value);
             this.dataset['editing'] = `${this.isEditing$.value}`;
             this.style.border = this.isFocus$.value

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

@@ -1,9 +1,11 @@
-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 { KanbanViewUILogic } from './kanban-view-ui-logic.js';
 declare const KanbanGroup_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class KanbanGroup extends KanbanGroup_base {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
+    /** Absent outside an editor host: the wordings read English. */
+    accessor std: BlockStdScope;
     private readonly clickAddCard;
     private readonly clickAddCardInStart;
     private readonly clickGroupOptions;

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

@@ -35,13 +35,16 @@ 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 { AddCursorIcon } from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../../../../std/index.js';
+import { ShadowlessElement, stdContext } from '../../../../std/index.js';
+import { consume } from '@lit/context';
 import { css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { GroupTitle } from '../../../core/group-by/group-title.js';
+import { groupToggleStyles, hideGroupAction, renderGroupToggle, } from '../../../core/group-by/group-visibility.js';
 import { dragHandler } from '../../../core/utils/wc-dnd/dnd-context.js';
+import { wordingOf } from '../../../core/utils/wording.js';
 const styles = css `
   affine-data-view-kanban-group {
     width: 260px;
@@ -114,9 +117,38 @@ const styles = css `
   .sortable-drag {
     background-color: var(--affine-background-primary-color);
   }
+
+  .group-body[hidden] {
+    display: none;
+  }
+
+  @media (pointer: coarse) {
+    .group-header {
+      height: auto;
+      min-height: 44px;
+    }
+  }
+
+  .group-header-main {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .dv-kanban-hidden-groups {
+    width: 260px;
+    flex-shrink: 0;
+  }
 `;
 let KanbanGroup = (() => {
     let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
     let _group_decorators;
     let _group_initializers = [];
     let _group_extraInitializers = [];
@@ -126,24 +158,35 @@ let KanbanGroup = (() => {
     return class KanbanGroup 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 })];
             _kanbanViewLogic_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, _kanbanViewLogic_decorators, { kind: "accessor", name: "kanbanViewLogic", static: false, private: false, access: { has: obj => "kanbanViewLogic" in obj, get: obj => obj.kanbanViewLogic, set: (obj, value) => { obj.kanbanViewLogic = value; } }, metadata: _metadata }, _kanbanViewLogic_initializers, _kanbanViewLogic_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static { this.styles = styles; }
+        static { this.styles = [styles, groupToggleStyles]; }
+        #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; }
         render() {
             const cards = this.group.rows;
+            // Folded (personal, B8): the header and its count stay, the cards go.
+            const collapsed = this.group.manager.collapsed$(this.group.key).value;
             return html `
       <div class="group-header" ${dragHandler(this.group.key)}>
-        ${GroupTitle(this.group, {
+        ${renderGroupToggle(this.group, wordingOf(this.std))}
+        <div class="group-header-main">
+          ${GroupTitle(this.group, {
                 readonly: this.view.readonly$.value,
                 clickAdd: this.clickAddCardInStart,
                 clickOps: this.clickGroupOptions,
             })}
+        </div>
       </div>
-      <div class="group-body">
+      <div class="group-body" ?hidden="${collapsed}">
         ${repeat(cards, row => row.rowId, row => {
                 return html `
               <affine-data-view-kanban-card
@@ -178,7 +221,8 @@ let KanbanGroup = (() => {
         }
         constructor() {
             super(...arguments);
-            this.clickAddCard = () => {
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.clickAddCard = (__runInitializers(this, _std_extraInitializers), () => {
                 const id = this.view.addCard('end', this.group.key);
                 requestAnimationFrame(() => {
                     const columnId = this.view.mainProperties$.value.titleColumn ||
@@ -194,7 +238,7 @@ let KanbanGroup = (() => {
                     };
                 });
                 this.requestUpdate();
-            };
+            });
             this.clickAddCardInStart = () => {
                 const id = this.view.addCard('start', this.group.key);
                 requestAnimationFrame(() => {
@@ -225,6 +269,7 @@ let KanbanGroup = (() => {
                             this.requestUpdate();
                         },
                     }),
+                    hideGroupAction(this.group, wordingOf(this.std)),
                     menu.action({
                         name: 'Delete Cards',
                         select: () => {

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

@@ -29,7 +29,7 @@ export class KanbanViewUILogic extends DataViewUILogicBase {
         });
         this.groups$ = computed(() => {
             const groupTrait = this.groupTrait$.value;
-            return groupTrait?.groupsDataList$.value || [];
+            return groupTrait?.visibleGroups$.value || [];
         });
         this.clearSelection = () => {
             this.selectionController.clear();
@@ -204,6 +204,10 @@ export class KanbanViewUI extends DataViewUIBase {
       >
         ${this.renderGroups()}
         ${groupTrait ? this.logic.renderAddGroup(groupTrait) : ''}
+        <dv-hidden-groups
+          class="dv-kanban-hidden-groups"
+          .groupTrait="${groupTrait}"
+        ></dv-hidden-groups>
       </div>
     `;
     }

package/dist/_pkgs/data-view/view-presets/list/define.d.ts

@@ -0,0 +1,14 @@
+import { FlatSingleView, type FlatViewDataType } from '../flat/flat-view-manager.js';
+export declare const listViewType: {
+    type: "list";
+    createModel: <Data extends import("../../index.js").DataViewDataType>(model: import("../../index.js").DataViewModelConfig<Data>) => import("../../index.js").DataViewModel<"list", Data> & {
+        createMeta: (renderer: import("../../index.js").DataViewRendererConfig) => import("../../index.js").ViewMeta<"list", Data>;
+    };
+};
+export type ListViewData = FlatViewDataType<typeof listViewType.type>;
+export declare class ListSingleView extends FlatSingleView<ListViewData> {
+    get type(): string;
+}
+export declare const listViewModel: import("../../index.js").DataViewModel<"list", ListViewData> & {
+    createMeta: (renderer: import("../../index.js").DataViewRendererConfig) => import("../../index.js").ViewMeta<"list", ListViewData>;
+};

package/dist/_pkgs/data-view/view-presets/list/define.js

@@ -0,0 +1,15 @@
+import { viewType } from '../../core/view/data-view.js';
+import { VIEW_NAME_LIST } from '../../translations.js';
+import { FlatSingleView, flatViewDefaultData, } from '../flat/flat-view-manager.js';
+export const listViewType = viewType('list');
+export class ListSingleView extends FlatSingleView {
+    get type() {
+        return this.data$.value?.mode ?? listViewType.type;
+    }
+}
+export const listViewModel = listViewType.createModel({
+    defaultName: VIEW_NAME_LIST[1],
+    defaultNameKey: VIEW_NAME_LIST[0],
+    dataViewManager: ListSingleView,
+    defaultData: flatViewDefaultData,
+});

package/dist/_pkgs/data-view/view-presets/list/effect.d.ts

@@ -0,0 +1 @@
+export declare function listEffects(): void;

package/dist/_pkgs/data-view/view-presets/list/effect.js

@@ -0,0 +1,4 @@
+import { ListViewUI } from './list-view.js';
+export function listEffects() {
+    customElements.define('dv-list-view-ui', ListViewUI);
+}

package/dist/_pkgs/data-view/view-presets/list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './define.js';
+export * from './renderer.js';

package/dist/_pkgs/data-view/view-presets/list/index.js

@@ -0,0 +1,2 @@
+export * from './define.js';
+export * from './renderer.js';

package/dist/_pkgs/data-view/view-presets/list/list-view.d.ts

@@ -0,0 +1,24 @@
+import { FlatViewUI, FlatViewUILogic } from '../flat/flat-view-ui.js';
+import type { ListSingleView } from './define.js';
+/**
+ * The list preset (ADR 0035 §1, B7): one line per row, the title on the left
+ * and the visible properties on the right, each drawn by the cell a table
+ * draws, so a select is the table's tag and opens the table's tag menu. An
+ * empty value draws no chip, as in Notion's list: it is set from the opened
+ * row. Narrow screens wrap the chips under the title.
+ */
+export declare class ListViewUILogic extends FlatViewUILogic<ListSingleView> {
+    renderer: import("../../../affine-shared/types/uni-component.js").UniComponent<unknown, {}>;
+}
+export declare class ListViewUI extends FlatViewUI<ListViewUILogic> {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    private renderRow;
+    private renderNewRow;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dv-list-view-ui': ListViewUI;
+    }
+}