@formicoidea/labre-core 0.23.0 → 0.23.1

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

@@ -0,0 +1,244 @@
+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 { 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 { 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 { dragHandler } from '../../../core/utils/wc-dnd/dnd-context.js';
+const styles = css `
+  affine-data-view-kanban-group {
+    width: 260px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .group-header {
+    height: 32px;
+    padding: 6px 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  .group-header-title {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--data-view-cell-text-size);
+  }
+
+  affine-data-view-kanban-group:hover .group-header-op {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .group-body {
+    margin-top: 4px;
+    display: flex;
+    flex-direction: column;
+    padding: 0 4px;
+    gap: 12px;
+  }
+
+  .add-card {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: var(--data-view-cell-text-size);
+    line-height: var(--data-view-cell-text-line-height);
+    visibility: hidden;
+    opacity: 0;
+    transition: all 150ms cubic-bezier(0.42, 0, 1, 1);
+    color: var(--affine-text-secondary-color);
+  }
+
+  affine-data-view-kanban-group:hover .add-card {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  affine-data-view-kanban-group .add-card:hover {
+    background-color: var(--affine-hover-color);
+    color: var(--affine-text-primary-color);
+  }
+
+  .sortable-ghost {
+    background-color: var(--affine-hover-color);
+    opacity: 0.5;
+  }
+
+  .sortable-drag {
+    background-color: var(--affine-background-primary-color);
+  }
+`;
+let KanbanGroup = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _group_decorators;
+    let _group_initializers = [];
+    let _group_extraInitializers = [];
+    let _kanbanViewLogic_decorators;
+    let _kanbanViewLogic_initializers = [];
+    let _kanbanViewLogic_extraInitializers = [];
+    return class KanbanGroup extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _group_decorators = [property({ attribute: false })];
+            _kanbanViewLogic_decorators = [property({ attribute: false })];
+            __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; }
+        render() {
+            const cards = this.group.rows;
+            return html `
+      <div class="group-header" ${dragHandler(this.group.key)}>
+        ${GroupTitle(this.group, {
+                readonly: this.view.readonly$.value,
+                clickAdd: this.clickAddCardInStart,
+                clickOps: this.clickGroupOptions,
+            })}
+      </div>
+      <div class="group-body">
+        ${repeat(cards, row => row.rowId, row => {
+                return html `
+              <affine-data-view-kanban-card
+                data-card-id="${row.rowId}"
+                .groupKey="${this.group.key}"
+                .kanbanViewLogic="${this.kanbanViewLogic}"
+                .cardId="${row.rowId}"
+              ></affine-data-view-kanban-card>
+            `;
+            })}
+        ${this.view.readonly$.value
+                ? nothing
+                : html `<div class="add-card" @click="${this.clickAddCard}">
+              <div
+                style="margin-right: 4px;width: 16px;height: 16px;display:flex;align-items:center;"
+              >
+                ${AddCursorIcon()}
+              </div>
+              Add
+            </div>`}
+      </div>
+    `;
+        }
+        #group_accessor_storage;
+        get group() { return this.#group_accessor_storage; }
+        set group(value) { this.#group_accessor_storage = value; }
+        #kanbanViewLogic_accessor_storage;
+        get kanbanViewLogic() { return this.#kanbanViewLogic_accessor_storage; }
+        set kanbanViewLogic(value) { this.#kanbanViewLogic_accessor_storage = value; }
+        get view() {
+            return this.kanbanViewLogic.view;
+        }
+        constructor() {
+            super(...arguments);
+            this.clickAddCard = () => {
+                const id = this.view.addCard('end', this.group.key);
+                requestAnimationFrame(() => {
+                    const columnId = this.view.mainProperties$.value.titleColumn ||
+                        this.view.propertyIds$.value[0];
+                    if (!columnId)
+                        return;
+                    this.kanbanViewLogic.selectionController.selection = {
+                        selectionType: 'cell',
+                        groupKey: this.group.key,
+                        cardId: id,
+                        columnId,
+                        isEditing: true,
+                    };
+                });
+                this.requestUpdate();
+            };
+            this.clickAddCardInStart = () => {
+                const id = this.view.addCard('start', this.group.key);
+                requestAnimationFrame(() => {
+                    const columnId = this.view.mainProperties$.value.titleColumn ||
+                        this.view.propertyIds$.value[0];
+                    if (!columnId)
+                        return;
+                    this.kanbanViewLogic.selectionController.selection = {
+                        selectionType: 'cell',
+                        groupKey: this.group.key,
+                        cardId: id,
+                        columnId,
+                        isEditing: true,
+                    };
+                });
+                this.requestUpdate();
+            };
+            this.clickGroupOptions = (e) => {
+                const ele = e.currentTarget;
+                popFilterableSimpleMenu(popupTargetFromElement(ele), [
+                    menu.action({
+                        name: 'Ungroup',
+                        hide: () => this.group.value == null,
+                        select: () => {
+                            this.group.rows.forEach(row => {
+                                this.group.manager.removeFromGroup(row.rowId, this.group.key);
+                            });
+                            this.requestUpdate();
+                        },
+                    }),
+                    menu.action({
+                        name: 'Delete Cards',
+                        select: () => {
+                            this.view.rowsDelete(this.group.rows.map(row => row.rowId));
+                            this.requestUpdate();
+                        },
+                    }),
+                ]);
+            };
+            this.#group_accessor_storage = __runInitializers(this, _group_initializers, void 0);
+            this.#kanbanViewLogic_accessor_storage = (__runInitializers(this, _group_extraInitializers), __runInitializers(this, _kanbanViewLogic_initializers, void 0));
+            __runInitializers(this, _kanbanViewLogic_extraInitializers);
+        }
+    };
+})();
+export { KanbanGroup };
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1,16 @@
+import { ShadowlessElement } from '../../../../std/index.js';
+import type { SingleView } from '../../../core/index.js';
+declare const KanbanHeader_base: typeof ShadowlessElement & import("../../../../global/utils/index.js").Constructor<import("../../../../global/lit/index.js").DisposableClass>;
+export declare class KanbanHeader extends KanbanHeader_base {
+    static styles: import("lit").CSSResult;
+    private readonly clickGroup;
+    render(): import("lit-html").TemplateResult;
+    accessor view: SingleView;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'affine-data-view-kanban-header': KanbanHeader;
+    }
+}
+export {};
+//# sourceMappingURL=header.d.ts.map

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

@@ -0,0 +1,111 @@
+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 { menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
+import { SignalWatcher, WithDisposable } from '../../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../../std/index.js';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import { groupTraitKey } from '../../../core/group-by/trait.js';
+const styles = css `
+  affine-data-view-kanban-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px;
+  }
+
+  .select-group {
+    border-radius: 8px;
+    padding: 4px 8px;
+    cursor: pointer;
+  }
+
+  .select-group:hover {
+    background-color: var(--affine-hover-color);
+  }
+`;
+let KanbanHeader = (() => {
+    let _classSuper = SignalWatcher(WithDisposable(ShadowlessElement));
+    let _view_decorators;
+    let _view_initializers = [];
+    let _view_extraInitializers = [];
+    return class KanbanHeader extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _view_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _view_decorators, { kind: "accessor", name: "view", static: false, private: false, access: { has: obj => "view" in obj, get: obj => obj.view, set: (obj, value) => { obj.view = value; } }, metadata: _metadata }, _view_initializers, _view_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = styles; }
+        render() {
+            return html `
+      <div></div>
+      <div>
+        <div class="select-group" @click="${this.clickGroup}">Group</div>
+      </div>
+    `;
+        }
+        #view_accessor_storage;
+        get view() { return this.#view_accessor_storage; }
+        set view(value) { this.#view_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            this.clickGroup = (e) => {
+                const groupTrait = this.view.traitGet(groupTraitKey);
+                if (!groupTrait) {
+                    return;
+                }
+                popMenu(popupTargetFromElement(e.target), {
+                    options: {
+                        items: this.view.properties$.value
+                            .filter(column => column.id !== groupTrait.property$.value?.id)
+                            .map(column => {
+                            return menu.action({
+                                name: column.name$.value,
+                                select: () => {
+                                    groupTrait.changeGroup(column.id);
+                                },
+                            });
+                        }),
+                    },
+                });
+            };
+            this.#view_accessor_storage = __runInitializers(this, _view_initializers, void 0);
+            __runInitializers(this, _view_extraInitializers);
+        }
+    };
+})();
+export { KanbanHeader };
+//# sourceMappingURL=header.js.map

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

@@ -0,0 +1,42 @@
+import type { InsertToPosition } from '../../../../affine-shared/utils/index.js';
+import { type TemplateResult } from 'lit';
+import { type GroupTrait } from '../../../core/group-by/trait.js';
+import { DataViewUIBase, DataViewUILogicBase } from '../../../core/view/data-view-base.js';
+import type { KanbanSingleView } from '../kanban-view-manager.js';
+import type { KanbanViewSelectionWithType } from '../selection.js';
+import { KanbanClipboardController } from './controller/clipboard.js';
+import { KanbanDragController } from './controller/drag.js';
+import { KanbanHotkeysController } from './controller/hotkeys.js';
+import { KanbanSelectionController } from './controller/selection.js';
+export declare class KanbanViewUILogic extends DataViewUILogicBase<KanbanSingleView, KanbanViewSelectionWithType> {
+    ui$: import("@preact/signals-core").Signal<KanbanViewUI | undefined>;
+    clipboardController: KanbanClipboardController;
+    dragController: KanbanDragController;
+    hotkeysController: KanbanHotkeysController;
+    selectionController: KanbanSelectionController;
+    groupTrait$: import("@preact/signals-core").ReadonlySignal<GroupTrait | undefined>;
+    groups$: import("@preact/signals-core").ReadonlySignal<import("../../../index.js").Group<unknown, unknown, Record<string, unknown>>[]>;
+    private get readonly();
+    clearSelection: () => void;
+    addRow: (position: InsertToPosition) => string | undefined;
+    focusFirstCell: () => void;
+    showIndicator: (evt: MouseEvent) => boolean;
+    hideIndicator: () => void;
+    moveTo: (id: string, evt: MouseEvent) => void;
+    onWheel: (event: WheelEvent) => void;
+    renderAddGroup: (groupHelper: GroupTrait) => TemplateResult | undefined;
+    scrollContainer$: import("@preact/signals-core").Signal<HTMLElement | undefined>;
+    renderer: import("../../../../affine-shared/types/index.js").UniComponent<unknown, {}>;
+}
+export declare class KanbanViewUI extends DataViewUIBase<KanbanViewUILogic> {
+    readonly sortContext: import("../../../core/utils/wc-dnd/sort/sort-context.js").SortContext;
+    private renderGroups;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dv-kanban-view-ui': KanbanViewUI;
+    }
+}
+//# sourceMappingURL=kanban-view-ui-logic.d.ts.map

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

@@ -0,0 +1,265 @@
+import { menu, popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
+import { AddCursorIcon } from '@blocksuite/icons/lit';
+import { css } from '@emotion/css';
+import { computed, signal } from '@preact/signals-core';
+import {} from 'lit';
+import { ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { html } from 'lit/static-html.js';
+import { groupTraitKey, } from '../../../core/group-by/trait.js';
+import { createUniComponentFromWebComponent, renderUniLit, } from '../../../core/index.js';
+import { defaultActivators } from '../../../core/utils/wc-dnd/sensors/index.js';
+import { createSortContext, sortable, } from '../../../core/utils/wc-dnd/sort/sort-context.js';
+import { horizontalListSortingStrategy } from '../../../core/utils/wc-dnd/sort/strategies/index.js';
+import { DataViewUIBase, DataViewUILogicBase, } from '../../../core/view/data-view-base.js';
+import { KanbanClipboardController } from './controller/clipboard.js';
+import { KanbanDragController } from './controller/drag.js';
+import { KanbanHotkeysController } from './controller/hotkeys.js';
+import { KanbanSelectionController } from './controller/selection.js';
+export class KanbanViewUILogic extends DataViewUILogicBase {
+    constructor() {
+        super(...arguments);
+        this.ui$ = signal();
+        this.clipboardController = new KanbanClipboardController(this);
+        this.dragController = new KanbanDragController(this);
+        this.hotkeysController = new KanbanHotkeysController(this);
+        this.selectionController = new KanbanSelectionController(this);
+        this.groupTrait$ = computed(() => {
+            return this.view.traitGet(groupTraitKey);
+        });
+        this.groups$ = computed(() => {
+            const groupTrait = this.groupTrait$.value;
+            return groupTrait?.groupsDataList$.value || [];
+        });
+        this.clearSelection = () => {
+            this.selectionController.clear();
+        };
+        this.addRow = (position) => {
+            if (this.readonly)
+                return;
+            const rowId = this.view.rowAdd(position);
+            if (rowId) {
+                this.root.openDetailPanel({
+                    view: this.view,
+                    rowId,
+                });
+            }
+            this.ui$.value?.requestUpdate();
+            return rowId;
+        };
+        this.focusFirstCell = () => {
+            this.selectionController.focusFirstCell();
+        };
+        this.showIndicator = (evt) => {
+            return this.dragController.showIndicator(evt, undefined) != null;
+        };
+        this.hideIndicator = () => {
+            this.dragController.dropPreview.remove();
+        };
+        this.moveTo = (id, evt) => {
+            const position = this.dragController.getInsertPosition(evt);
+            if (position) {
+                position.group.group.manager.moveCardTo(id, '', position.group.group.key, position.position);
+            }
+        };
+        this.onWheel = (event) => {
+            if (event.metaKey || event.ctrlKey) {
+                return;
+            }
+            const ele = event.currentTarget;
+            if (ele instanceof HTMLElement) {
+                if (ele.scrollWidth === ele.clientWidth) {
+                    return;
+                }
+                event.stopPropagation();
+            }
+        };
+        this.renderAddGroup = (groupHelper) => {
+            const addGroup = groupHelper.addGroup;
+            if (!addGroup) {
+                return;
+            }
+            const add = (e) => {
+                const ele = e.currentTarget;
+                popMenu(popupTargetFromElement(ele), {
+                    options: {
+                        items: [
+                            menu.input({
+                                onComplete: text => {
+                                    const column = groupHelper.property$.value;
+                                    if (column) {
+                                        column.dataUpdate(() => addGroup({
+                                            text,
+                                            oldData: column.data$.value,
+                                            dataSource: this.view.manager.dataSource,
+                                        }));
+                                    }
+                                },
+                            }),
+                        ],
+                    },
+                });
+            };
+            return html ` <div
+      style="height: 32px;flex-shrink:0;display:flex;align-items:center;"
+      @click="${add}"
+    >
+      <div class="${addGroupIconStyle}">${AddCursorIcon()}</div>
+    </div>`;
+        };
+        this.scrollContainer$ = signal(undefined);
+        this.renderer = createUniComponentFromWebComponent(KanbanViewUI);
+    }
+    get readonly() {
+        return this.view.readonly$.value;
+    }
+}
+export class KanbanViewUI extends DataViewUIBase {
+    constructor() {
+        super(...arguments);
+        this.sortContext = createSortContext({
+            activators: defaultActivators,
+            container: this,
+            onDragEnd: evt => {
+                const over = evt.over;
+                const activeId = evt.active.id;
+                const groupTrait = this.logic.groupTrait$.value;
+                const groups = groupTrait?.groupsDataList$.value;
+                if (over && over.id !== activeId && groups) {
+                    const activeIndex = groups.findIndex(data => data?.key === activeId);
+                    const overIndex = groups.findIndex(data => data?.key === over.id);
+                    groupTrait?.moveGroupTo(activeId, activeIndex > overIndex
+                        ? {
+                            before: true,
+                            id: over.id,
+                        }
+                        : {
+                            before: false,
+                            id: over.id,
+                        });
+                }
+            },
+            modifiers: [
+                ({ transform }) => {
+                    return {
+                        ...transform,
+                        y: 0,
+                    };
+                },
+            ],
+            items: computed(() => {
+                return this.logic.groups$.value?.map(v => v?.key ?? 'default key') ?? [];
+            }),
+            strategy: horizontalListSortingStrategy,
+        });
+    }
+    renderGroups() {
+        const groups = this.logic.groups$.value;
+        if (!groups) {
+            return html ``;
+        }
+        return html `${groups.map(group => {
+            return html ` <affine-data-view-kanban-group
+        ${sortable(group.key)}
+        data-key="${group.key}"
+        .kanbanViewLogic="${this.logic}"
+        .group="${group}"
+      ></affine-data-view-kanban-group>`;
+        })}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.logic.ui$.value = this;
+        this.logic.clipboardController.hostConnected();
+        this.logic.dragController.hostConnected();
+        this.logic.hotkeysController.hostConnected();
+        this.logic.selectionController.hostConnected();
+        this.classList.add('kanban-view', kanbanViewStyle);
+        this.style.userSelect = 'none';
+        this.style.display = 'flex';
+        this.style.flexDirection = 'column';
+    }
+    render() {
+        const groups = this.logic.groups$.value;
+        if (!groups) {
+            return html ``;
+        }
+        const vPadding = this.logic.root.config.virtualPadding$.value;
+        const wrapperStyle = styleMap({
+            marginLeft: `-${vPadding}px`,
+            marginRight: `-${vPadding}px`,
+            paddingLeft: `${vPadding}px`,
+            paddingRight: `${vPadding}px`,
+        });
+        const groupTrait = this.logic.groupTrait$.value;
+        return html `
+      ${renderUniLit(this.logic.root.config.headerWidget, {
+            dataViewLogic: this.logic,
+        })}
+      <div
+        ${ref(this.logic.scrollContainer$)}
+        class="${kanbanGroupsStyle}"
+        style="${wrapperStyle}"
+        @wheel="${this.logic.onWheel}"
+      >
+        ${this.renderGroups()}
+        ${groupTrait ? this.logic.renderAddGroup(groupTrait) : ''}
+      </div>
+    `;
+    }
+}
+const kanbanViewStyle = css({
+    userSelect: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+});
+const kanbanGroupsStyle = css({
+    position: 'relative',
+    zIndex: 1,
+    display: 'flex',
+    gap: '20px',
+    paddingBottom: '4px',
+    overflowX: 'scroll',
+    overflowY: 'hidden',
+    '&:hover': {
+        paddingBottom: '0px',
+    },
+    '&::-webkit-scrollbar': {
+        WebkitAppearance: 'none',
+        display: 'block',
+    },
+    '&::-webkit-scrollbar:horizontal': {
+        height: '4px',
+    },
+    '&::-webkit-scrollbar-thumb': {
+        borderRadius: '2px',
+        backgroundColor: 'transparent',
+    },
+    '&:hover::-webkit-scrollbar:horizontal': {
+        height: '8px',
+    },
+    '&:hover::-webkit-scrollbar-thumb': {
+        borderRadius: '16px',
+        backgroundColor: 'var(--affine-black-30)',
+    },
+    '&:hover::-webkit-scrollbar-track': {
+        backgroundColor: 'var(--affine-hover-color)',
+    },
+});
+const addGroupIconStyle = css({
+    padding: '4px',
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: 'var(--affine-hover-color)',
+    },
+    '& svg': {
+        width: '16px',
+        height: '16px',
+        fill: 'var(--affine-icon-color)',
+        color: 'var(--affine-icon-color)',
+    },
+});
+//# sourceMappingURL=kanban-view-ui-logic.js.map