diff --git a/packages/blocks/src/__tests__/database/database.unit.spec.ts b/packages/blocks/src/__tests__/database/database.unit.spec.ts index 9af1cdf4b887..c8dc4063d1e8 100644 --- a/packages/blocks/src/__tests__/database/database.unit.spec.ts +++ b/packages/blocks/src/__tests__/database/database.unit.spec.ts @@ -1,17 +1,16 @@ -/* eslint-disable @typescript-eslint/no-restricted-imports */ -import '../../database-block/kanban/define.js'; -import '../../database-block/table/define.js'; - import type { BlockModel, Doc } from '@blocksuite/store'; import { DocCollection, Generator, Schema } from '@blocksuite/store'; import { beforeEach, describe, expect, test } from 'vitest'; -import { numberPureColumnConfig } from '../../database-block/common/columns/number/define.js'; -import { richTextPureColumnConfig } from '../../database-block/common/columns/rich-text/define.js'; -import { selectPureColumnConfig } from '../../database-block/common/columns/select/define.js'; +import { selectColumnModelConfig } from '../../database-block/data-view/column/presets/select/define.js'; import type { DatabaseBlockModel } from '../../database-block/database-model.js'; import { DatabaseBlockSchema } from '../../database-block/database-model.js'; -import type { Cell, Column } from '../../database-block/types.js'; +import { + type Cell, + type Column, + columnPresets, + richTextColumnConfig, +} from '../../database-block/index.js'; import { NoteBlockSchema } from '../../note-block/note-model.js'; import { ParagraphBlockSchema } from '../../paragraph-block/paragraph-model.js'; import { RootBlockSchema } from '../../root-block/root-model.js'; @@ -79,12 +78,15 @@ describe('DatabaseManager', () => { ) as DatabaseBlockModel; db = databaseModel; - col1 = db.addColumn('end', numberPureColumnConfig.create('Number')); + col1 = db.addColumn( + 'end', + columnPresets.numberColumnConfig.model.create('Number') + ); col2 = db.addColumn( 'end', - selectPureColumnConfig.create('Single Select', { options: selection }) + selectColumnModelConfig.create('Single Select', { options: selection }) ); - col3 = db.addColumn('end', richTextPureColumnConfig.create('Rich Text')); + col3 = db.addColumn('end', richTextColumnConfig.model.create('Rich Text')); doc.updateBlock(databaseModel, { columns: [col1, col2, col3], @@ -117,7 +119,7 @@ describe('DatabaseManager', () => { test('getColumn', () => { const column = { - ...numberPureColumnConfig.create('testColumnId'), + ...columnPresets.numberColumnConfig.model.create('testColumnId'), id: 'testColumnId', }; db.addColumn('end', column); @@ -127,7 +129,7 @@ describe('DatabaseManager', () => { }); test('addColumn', () => { - const column = numberPureColumnConfig.create('Test Column'); + const column = columnPresets.numberColumnConfig.model.create('Test Column'); const id = db.addColumn('end', column); const result = db.getColumn(id); @@ -137,7 +139,7 @@ describe('DatabaseManager', () => { test('deleteColumn', () => { const column = { - ...numberPureColumnConfig.create('Test Column'), + ...columnPresets.numberColumnConfig.model.create('Test Column'), id: 'testColumnId', }; db.addColumn('end', column); @@ -156,7 +158,7 @@ describe('DatabaseManager', () => { noteBlockId ); const column = { - ...numberPureColumnConfig.create('Test Column'), + ...columnPresets.numberColumnConfig.model.create('Test Column'), id: 'testColumnId', }; const cell: Cell = { @@ -200,7 +202,7 @@ describe('DatabaseManager', () => { test('copyCellsByColumn', () => { const newColId = db.addColumn( 'end', - selectPureColumnConfig.create('Copied Select', { options: selection }) + selectColumnModelConfig.create('Copied Select', { options: selection }) ); db.copyCellsByColumn(col2, newColId); diff --git a/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts b/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts index ef16b3492269..247164aa467f 100644 --- a/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts +++ b/packages/blocks/src/__tests__/database/typesystem.unit.spec.ts @@ -8,7 +8,7 @@ import { tUnion, tUnknown, typesystem, -} from '../../database-block/logical/typesystem.js'; +} from '../../database-block/data-view/logical/typesystem.js'; export const tString = typesystem.defineData<{ value: string }>({ name: 'String', diff --git a/packages/blocks/src/_common/adapters/notion-html.ts b/packages/blocks/src/_common/adapters/notion-html.ts index 31153584f57f..a7cbe77a5604 100644 --- a/packages/blocks/src/_common/adapters/notion-html.ts +++ b/packages/blocks/src/_common/adapters/notion-html.ts @@ -8,18 +8,21 @@ import type { FromSliceSnapshotPayload, FromSliceSnapshotResult, } from '@blocksuite/store'; -import { type AssetsManager, getAssetName, sha } from '@blocksuite/store'; -import { ASTWalker, BaseAdapter } from '@blocksuite/store'; import { + type AssetsManager, + ASTWalker, + BaseAdapter, type BlockSnapshot, type DocSnapshot, + getAssetName, + nanoid, + sha, type SliceSnapshot, } from '@blocksuite/store'; -import { nanoid } from '@blocksuite/store'; import rehypeParse from 'rehype-parse'; import { unified } from 'unified'; -import { getTagColor } from '../components/tags/colors.js'; +import { getTagColor } from '../../database-block/data-view/utils/tags/colors.js'; import { NoteDisplayMode } from '../types.js'; import { getFilenameFromContentDisposition } from '../utils/header-value-parser.js'; import { diff --git a/packages/blocks/src/_common/components/icon/uni-icon.ts b/packages/blocks/src/_common/components/icon/uni-icon.ts deleted file mode 100644 index 373f721f6608..000000000000 --- a/packages/blocks/src/_common/components/icon/uni-icon.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type * as icons from '../../../_common/icons/index.js'; -import { map } from '../uni-component/operation.js'; -import { createUniComponentFromWebComponent } from '../uni-component/uni-component.js'; -import { AffineLitIcon } from './icon.js'; - -const litIcon = createUniComponentFromWebComponent<{ name: string }>( - AffineLitIcon -); -export const createIcon = (name: keyof typeof icons) => { - return map(litIcon, () => ({ name })); -}; diff --git a/packages/blocks/src/_common/components/index.ts b/packages/blocks/src/_common/components/index.ts index 55604d136793..814eceb896d7 100644 --- a/packages/blocks/src/_common/components/index.ts +++ b/packages/blocks/src/_common/components/index.ts @@ -8,5 +8,9 @@ export * from './rich-text/rich-text.js'; export * from './toast.js'; export * from './tooltip/index.js'; import './portal.js'; -export { popTagSelect, type SelectTag } from './tags/multi-tag-select.js'; + +export { + popTagSelect, + type SelectTag, +} from '../../database-block/data-view/utils/tags/multi-tag-select.js'; export { scrollbarStyle } from './utils.js'; diff --git a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts index bd98a9abb83d..f81c1ab31a5a 100644 --- a/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts +++ b/packages/blocks/src/_common/configs/quick-action/database-convert-view.ts @@ -4,16 +4,18 @@ import { assertExists } from '@blocksuite/global/utils'; import { css, html, LitElement, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { DataViewTypes } from '../../../database-block/common/data-view.js'; -import type { DatabaseBlockModel } from '../../../database-block/database-model.js'; -import { DatabaseSearchClose } from '../../icons/database.js'; +import { DatabaseSearchClose } from '../../../database-block/data-view/common/icons/index.js'; +import type { ViewMeta } from '../../../database-block/data-view/index.js'; +import { viewPresets } from '../../../database-block/data-view/index.js'; +import type { DatabaseBlockModel } from '../../../database-block/index.js'; +import { databaseViewInitConvert } from '../../../database-block/utils.js'; import { DatabaseKanbanViewIcon, DatabaseTableViewIcon, } from '../../icons/text.js'; interface DatabaseView { - type: DataViewTypes; + meta: ViewMeta; text: string; icon: TemplateResult; description?: string; @@ -22,12 +24,12 @@ interface DatabaseView { const databaseViews: DatabaseView[] = [ { - type: 'table', + meta: viewPresets.tableViewConfig, text: 'Table view', icon: DatabaseTableViewIcon, }, { - type: 'kanban', + meta: viewPresets.kanbanViewConfig, text: 'Kanban view', icon: DatabaseKanbanViewIcon, }, @@ -161,7 +163,7 @@ export class DatabaseConvertView extends WithDisposable(LitElement) { return this.host.doc; } - private _convertToDatabase(viewType: DataViewTypes) { + private _convertToDatabase(viewMeta: ViewMeta) { const [_, ctx] = this.host.std.command .chain() .getSelectedModels({ @@ -184,7 +186,7 @@ export class DatabaseConvertView extends WithDisposable(LitElement) { ); const databaseModel = this.doc.getBlockById(id) as DatabaseBlockModel; assertExists(databaseModel); - databaseModel.initConvert(viewType); + databaseViewInitConvert(databaseModel, viewMeta); databaseModel.applyColumnUpdate(); this.doc.moveBlocks(selectedModels, databaseModel); @@ -216,13 +218,13 @@ export class DatabaseConvertView extends WithDisposable(LitElement) { ${databaseViews.map(view => { return html`
diff --git a/packages/blocks/src/_common/icons/database.ts b/packages/blocks/src/_common/icons/database.ts index d2195c60c40a..41ebabb2fcd7 100644 --- a/packages/blocks/src/_common/icons/database.ts +++ b/packages/blocks/src/_common/icons/database.ts @@ -1,371 +1,6 @@ -import { html } from 'lit'; - // database icon -export const DatabaseSearchIcon = html` - - `; - -export const DatabaseDuplicate = html` - - `; - -export const DatabaseInsertLeft = html` - - `; - -export const DatabaseInsertRight = html` - - `; - -export const DatabaseMoveLeft = html` - -`; - -export const DatabaseMoveRight = html` - -`; - -export const DatabaseMultiSelect = html` - - - - - - -`; - -export const DatabaseNumber = html` - - - - -`; - -export const DatabaseSelect = html` - - -`; - -export const DatabaseProgress = html` - -`; - -export const DatabaseSearchClose = html` - -`; - -const addColumnStyle = ` - width: 12px; - height: 12px; - fill: var(--affine-text-primary-color); -`; -export const DatabaseAddColumn = html` - -`; - -export const DatabaseDragIcon = html` - - - - - - - - - - - - - - - -`; - -export const DatabaseExpand = html` - - - -`; - -export const DatabaseTableViewClose = html` - - - -`; - -export const DateTime = html` - - `; - -export const ConvertIcon = html` - - `; - -export const FilterIcon = html` - - `; - -export const GroupingIcon = html` - - `; - -export const InfoIcon = html` - - `; +import { html } from 'lit'; export const DoneIcon = html` = T extends unknown - ? { - viewId: string; - type: 'kanban'; - } & T - : never; - -export type KanbanCellSelection = { - selectionType: 'cell'; - groupKey: string; - cardId: string; - columnId: string; - isEditing: boolean; -}; -export type KanbanCardSelectionCard = { - groupKey: string; - cardId: string; -}; -export type KanbanCardSelection = { - selectionType: 'card'; - cards: [KanbanCardSelectionCard, ...KanbanCardSelectionCard[]]; -}; -export type KanbanGroupSelection = { - selectionType: 'group'; - groupKeys: [string, ...string[]]; -}; -export type KanbanViewSelection = - | KanbanCellSelection - | KanbanCardSelection - | KanbanGroupSelection; -export type KanbanViewSelectionWithType = - WithKanbanViewType; - -export type DataViewSelection = - | TableViewSelection - | KanbanViewSelectionWithType; -export type GetDataViewSelection< - K extends DataViewSelection['type'], - T = DataViewSelection, -> = T extends { - type: K; -} - ? T - : never; -export type DataViewSelectionState = DataViewSelection | undefined; - /** Common context interface definition for block models. */ export type CommonSlots = RefNodeSlots; diff --git a/packages/blocks/src/data-view-block/data-view-block.ts b/packages/blocks/src/data-view-block/data-view-block.ts index 4621ebacd7c2..3a0286d1d039 100644 --- a/packages/blocks/src/data-view-block/data-view-block.ts +++ b/packages/blocks/src/data-view-block/data-view-block.ts @@ -1,6 +1,3 @@ -// related component -import '../database-block/table/table-view.js'; - import { BlockElement, RangeManager } from '@blocksuite/block-std'; import { nothing } from 'lit'; import { customElement } from 'lit/decorators.js'; diff --git a/packages/blocks/src/data-view-block/data-view-model.ts b/packages/blocks/src/data-view-block/data-view-model.ts index d33852df5e67..36e3206e3e7c 100644 --- a/packages/blocks/src/data-view-block/data-view-model.ts +++ b/packages/blocks/src/data-view-block/data-view-model.ts @@ -1,7 +1,7 @@ import { BlockModel, defineBlockSchema } from '@blocksuite/store'; -import type { FilterGroup } from '../database-block/common/ast.js'; -import type { DataSourceConfig } from '../database-block/common/datasource/base.js'; +import type { FilterGroup } from '../database-block/data-view/common/ast.js'; +import type { DataSourceConfig } from '../database-block/data-view/common/data-source/base.js'; export type DataProperty = { id: string; diff --git a/packages/blocks/src/database-block/common/datasource/block-icons.ts b/packages/blocks/src/database-block/block-icons.ts similarity index 99% rename from packages/blocks/src/database-block/common/datasource/block-icons.ts rename to packages/blocks/src/database-block/block-icons.ts index afb046e2d9ae..74d22e509f76 100644 --- a/packages/blocks/src/database-block/common/datasource/block-icons.ts +++ b/packages/blocks/src/database-block/block-icons.ts @@ -2,7 +2,7 @@ import type { BlockModel } from '@blocksuite/store'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; -import type { ParagraphType } from '../../../paragraph-block/index.js'; +import type { ParagraphType } from '../paragraph-block/index.js'; const bulleted = html` [v.type, v as ColumnMeta]) +); diff --git a/packages/blocks/src/database-block/common/columns/rich-text/cell-renderer.ts b/packages/blocks/src/database-block/columns/rich-text/cell-renderer.ts similarity index 92% rename from packages/blocks/src/database-block/common/columns/rich-text/cell-renderer.ts rename to packages/blocks/src/database-block/columns/rich-text/cell-renderer.ts index fcca559de509..5e0a33e9b501 100644 --- a/packages/blocks/src/database-block/common/columns/rich-text/cell-renderer.ts +++ b/packages/blocks/src/database-block/columns/rich-text/cell-renderer.ts @@ -6,16 +6,16 @@ import { css, nothing } from 'lit'; import { customElement, query } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import type { RichText } from '../../../../_common/components/rich-text/rich-text.js'; -import { - type AffineInlineEditor, - type AffineTextAttributes, -} from '../../../../_common/inline/presets/affine-inline-specs.js'; -import type { DatabaseBlockComponent } from '../../../database-block.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { richTextColumnTypeName, richTextPureColumnConfig } from './define.js'; +import type { RichText } from '../../../_common/components/index.js'; +import type { + AffineInlineEditor, + AffineTextAttributes, +} from '../../../_common/inline/presets/affine-inline-specs.js'; +import { BaseCellRenderer } from '../../data-view/column/base-cell.js'; +import { createFromBaseCellRenderer } from '../../data-view/column/renderer.js'; +import { createIcon } from '../../data-view/utils/uni-icon.js'; +import type { DatabaseBlockComponent } from '../../database-block.js'; +import { richTextColumnModelConfig } from './define.js'; function toggleStyle( inlineEditor: AffineInlineEditor, @@ -366,8 +366,7 @@ declare global { } } -columnRenderer.register({ - type: richTextColumnTypeName, +export const richTextColumnConfig = richTextColumnModelConfig.renderConfig({ icon: createIcon('TextIcon'), cellRenderer: { @@ -375,5 +374,3 @@ columnRenderer.register({ edit: createFromBaseCellRenderer(RichTextCellEditing), }, }); - -export const richTextColumnConfig = richTextPureColumnConfig; diff --git a/packages/blocks/src/database-block/columns/rich-text/define.ts b/packages/blocks/src/database-block/columns/rich-text/define.ts new file mode 100644 index 000000000000..435cdeead83e --- /dev/null +++ b/packages/blocks/src/database-block/columns/rich-text/define.ts @@ -0,0 +1,85 @@ +import type { Text } from '@blocksuite/store'; +import { nanoid } from '@blocksuite/store'; + +import { columnType } from '../../data-view/column/column-config.js'; +import { tRichText } from '../../data-view/logical/data-type.js'; +import { getTagColor } from '../../data-view/utils/tags/colors.js'; +import type { SelectTag } from '../../data-view/utils/tags/multi-tag-select.js'; + +export const richTextColumnType = columnType('rich-text'); + +declare global { + interface ColumnConfigMap { + [richTextColumnType.type]: typeof richTextColumnModelConfig.model; + } +} +export const richTextColumnModelConfig = richTextColumnType.modelConfig< + Text['yText'] +>({ + name: 'Text', + type: () => tRichText.create(), + defaultData: () => ({}), + cellToString: data => data?.toString() ?? '', + cellFromString: data => { + return { + value: data, + }; + }, + cellToJson: data => data?.toString() ?? null, +}); +richTextColumnModelConfig.addConvert('select', (_column, cells) => { + const options: Record = {}; + const getTag = (name: string) => { + if (options[name]) return options[name]; + const tag: SelectTag = { + id: nanoid(), + value: name, + color: getTagColor(), + }; + options[name] = tag; + return tag; + }; + return { + cells: cells.map(v => { + const tags = v?.toString().split(','); + const value = tags?.[0]?.trim(); + if (value) { + return getTag(value).id; + } + return undefined; + }), + column: { + options: Object.values(options), + }, + }; +}); + +richTextColumnModelConfig.addConvert('multi-select', (_column, cells) => { + const options: Record = {}; + const getTag = (name: string) => { + if (options[name]) return options[name]; + const tag: SelectTag = { + id: nanoid(), + value: name, + color: getTagColor(), + }; + options[name] = tag; + return tag; + }; + return { + cells: cells.map(v => { + const result: string[] = []; + const values = v?.toString().split(','); + values?.forEach(value => { + value = value.trim(); + if (value) { + result.push(getTag(value).id); + } + }); + return result; + }), + column: { + options: Object.values(options), + }, + }; +}); diff --git a/packages/blocks/src/database-block/columns/title/cell-renderer.ts b/packages/blocks/src/database-block/columns/title/cell-renderer.ts new file mode 100644 index 000000000000..9ddb5416e7fd --- /dev/null +++ b/packages/blocks/src/database-block/columns/title/cell-renderer.ts @@ -0,0 +1,20 @@ +import type { CellRenderProps } from '../../data-view/column/index.js'; +import { createFromBaseCellRenderer } from '../../data-view/column/renderer.js'; +import { map } from '../../data-view/utils/uni-component/operation.js'; +import { createIcon } from '../../data-view/utils/uni-icon.js'; +import { titlePureColumnConfig } from './define.js'; +import { HeaderAreaTextCell, HeaderAreaTextCellEditing } from './text.js'; + +export const titleColumnConfig = titlePureColumnConfig.renderConfig({ + icon: createIcon('TitleIcon'), + cellRenderer: { + view: map( + createFromBaseCellRenderer(HeaderAreaTextCell), + (props: CellRenderProps) => ({ ...props, showIcon: true }) + ), + edit: map( + createFromBaseCellRenderer(HeaderAreaTextCellEditing), + (props: CellRenderProps) => ({ ...props, showIcon: true }) + ), + }, +}); diff --git a/packages/blocks/src/database-block/columns/title/define.ts b/packages/blocks/src/database-block/columns/title/define.ts new file mode 100644 index 000000000000..bb710097a85e --- /dev/null +++ b/packages/blocks/src/database-block/columns/title/define.ts @@ -0,0 +1,22 @@ +import { columnType } from '../../data-view/column/column-config.js'; +import { tRichText } from '../../data-view/logical/data-type.js'; + +export const titleColumnType = columnType('title'); + +declare global { + interface ColumnConfigMap { + [titleColumnType.type]: typeof titlePureColumnConfig.model; + } +} +export const titlePureColumnConfig = titleColumnType.modelConfig({ + name: 'Title', + type: () => tRichText.create(), + defaultData: () => ({}), + cellToString: data => data?.toString() ?? '', + cellFromString: data => { + return { + value: data, + }; + }, + cellToJson: data => data?.toString() ?? null, +}); diff --git a/packages/blocks/src/database-block/common/header-area/icon.ts b/packages/blocks/src/database-block/columns/title/icon.ts similarity index 88% rename from packages/blocks/src/database-block/common/header-area/icon.ts rename to packages/blocks/src/database-block/columns/title/icon.ts index a08faa43d5f9..d31d78013b26 100644 --- a/packages/blocks/src/database-block/common/header-area/icon.ts +++ b/packages/blocks/src/database-block/columns/title/icon.ts @@ -1,7 +1,7 @@ import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { BaseCellRenderer } from '../columns/base-cell.js'; +import { BaseCellRenderer } from '../../data-view/column/index.js'; @customElement('data-view-header-area-icon') export class IconCell extends BaseCellRenderer { diff --git a/packages/blocks/src/database-block/common/header-area/text.ts b/packages/blocks/src/database-block/columns/title/text.ts similarity index 94% rename from packages/blocks/src/database-block/common/header-area/text.ts rename to packages/blocks/src/database-block/columns/title/text.ts index be1247c3ad2f..d8384f638768 100644 --- a/packages/blocks/src/database-block/common/header-area/text.ts +++ b/packages/blocks/src/database-block/columns/title/text.ts @@ -6,12 +6,12 @@ import { css } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import type { RichText } from '../../../_common/components/rich-text/rich-text.js'; +import type { RichText } from '../../../_common/components/index.js'; +import { BaseCellRenderer } from '../../data-view/column/index.js'; +import { tRichText } from '../../data-view/logical/data-type.js'; +import type { DataViewKanbanManager } from '../../data-view/view/presets/kanban/kanban-view-manager.js'; +import type { DataViewTableManager } from '../../data-view/view/presets/table/table-view-manager.js'; import type { DatabaseBlockComponent } from '../../database-block.js'; -import type { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js'; -import { tRichText } from '../../logical/data-type.js'; -import type { DataViewTableManager } from '../../table/table-view-manager.js'; -import { BaseCellRenderer } from '../columns/base-cell.js'; const styles = css` data-view-header-area-text { diff --git a/packages/blocks/src/database-block/common/columns/image/define.ts b/packages/blocks/src/database-block/common/columns/image/define.ts deleted file mode 100644 index bf226eb5bfc1..000000000000 --- a/packages/blocks/src/database-block/common/columns/image/define.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { tImage } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; - -export const ImageColumnTypeName = 'image'; - -declare global { - interface ColumnConfigMap { - [ImageColumnTypeName]: typeof imagePureColumnConfig; - } -} -export const imagePureColumnConfig = columnManager.register( - ImageColumnTypeName, - { - name: 'image', - type: () => tImage.create(), - defaultData: () => ({}), - cellToString: data => data ?? '', - cellFromString: data => { - return { - value: data, - }; - }, - cellToJson: data => data ?? null, - } -); diff --git a/packages/blocks/src/database-block/common/columns/manager.ts b/packages/blocks/src/database-block/common/columns/manager.ts deleted file mode 100644 index 9f9604cedda0..000000000000 --- a/packages/blocks/src/database-block/common/columns/manager.ts +++ /dev/null @@ -1,208 +0,0 @@ -import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js'; -import type { TType } from '../../logical/typesystem.js'; -import type { StatCalcOpType } from '../../types.js'; -import type { - DataViewColumnManager, - DataViewManager, -} from '../data-view-manager.js'; - -type JSON = - | null - | number - | string - | boolean - | JSON[] - | { - [k: string]: JSON; - }; - -export interface CellRenderProps< - Data extends NonNullable = NonNullable, - Value = unknown, -> { - view: DataViewManager; - column: DataViewColumnManager; - rowId: string; - isEditing: boolean; - selectCurrentCell: (editing: boolean) => void; -} - -export interface DataViewCellLifeCycle { - beforeEnterEditMode(): boolean; - - onEnterEditMode(): void; - - onExitEditMode(): void; - - focusCell(): boolean; - - blurCell(): boolean; - - forceUpdate(): void; -} - -export type DataViewCellComponent< - Data extends NonNullable = NonNullable, - Value = unknown, -> = UniComponent, DataViewCellLifeCycle>; - -export type CellRenderer< - Data extends NonNullable = NonNullable, - Value = unknown, -> = { - view: DataViewCellComponent; - edit?: DataViewCellComponent; -}; -type ColumnOps< - Data extends NonNullable = NonNullable, - Value = unknown, -> = { - name: string; - defaultData: () => Data; - type: (data: Data) => TType; - formatValue?: (value: unknown, colData: Data) => Value; - cellToString: (data: Value, colData: Data) => string; - cellFromString: ( - data: string, - colData: Data - ) => { value: unknown; data?: Record }; - cellToJson: (data: Value, colData: Data) => JSON; - addGroup?: (text: string, oldData: Data) => Data; -}; - -type ConvertFunction = ( - column: GetColumnDataFromConfig, - cells: (GetCellDataFromConfig | undefined)[] -) => { - column: GetColumnDataFromConfig; - cells: (GetCellDataFromConfig | undefined)[]; -}; - -declare global { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface ColumnConfigMap {} -} - -export class ColumnConfigManager { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - private map = new Map>(); - - getColumn( - type: Type - ): ColumnConfigMap[Type]; - getColumn(type: string): ColumnConfig; - getColumn(type: string): ColumnConfig { - const column = this.map.get(type); - if (!column) { - throw new Error(`${type} is not exist`); - } - return column; - } - - register = Record>( - type: string, - ops: ColumnOps - ) { - const config = new ColumnConfig(type, ops); - this.map.set(type, config); - return config; - } -} - -export type GetColumnDataFromConfig = - // eslint-disable-next-line @typescript-eslint/no-explicit-any - T extends ColumnConfig ? R : never; -export type GetCellDataFromConfig = - // eslint-disable-next-line @typescript-eslint/no-explicit-any - T extends ColumnConfig ? R : never; - -export class ColumnConfig< - T extends NonNullable = NonNullable, - CellData = unknown, -> { - convertMap = new Map(); - - constructor( - public readonly type: string, - public ops: ColumnOps - ) {} - - create( - name: string, - data?: T - ): { - type: string; - name: string; - statCalcOp: StatCalcOpType; - data: T; - } { - return { - type: this.type, - name, - statCalcOp: 'none', - data: data ?? this.ops.defaultData(), - }; - } - - defaultData() { - return this.ops.defaultData(); - } - - createWithId( - id: string, - name: string, - data?: T - ): { - type: string; - name: string; - data: T; - id: string; - } { - return { - id, - type: this.type, - name, - data: data ?? this.ops.defaultData(), - }; - } - - dataType(data: T) { - return this.ops.type(data); - } - - toString(cellData: CellData, colData: T): string { - return this.ops.cellToString(cellData, colData); - } - - toJson(cellData: CellData, colData: T): JSON { - return this.ops.cellToJson(cellData, colData); - } - - formatValue(cellData: CellData, colData: T): CellData | undefined { - return cellData === undefined - ? undefined - : this.ops.formatValue?.(cellData, colData) ?? cellData; - } - - fromString(cellData: string, colData: T) { - return this.ops.cellFromString(cellData, colData); - } - - convertCell(to: string, column: Record, cells: unknown[]) { - return this.convertMap.get(to)?.(column, cells); - } - - registerConvert( - to: ToCellName, - // @ts-expect-error - convert: ConvertFunction - ) { - this.convertMap.set(to, convert); - } - - get name() { - return this.ops.name; - } -} - -export const columnManager = new ColumnConfigManager(); diff --git a/packages/blocks/src/database-block/common/columns/progress/define.ts b/packages/blocks/src/database-block/common/columns/progress/define.ts deleted file mode 100644 index 4e65d70a224c..000000000000 --- a/packages/blocks/src/database-block/common/columns/progress/define.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Text } from '@blocksuite/store'; - -import { tNumber } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; -import { richTextColumnTypeName } from '../rich-text/define.js'; - -export const progressColumnTypeName = 'progress'; - -declare global { - interface ColumnConfigMap { - [progressColumnTypeName]: typeof progressPureColumnConfig; - } -} -export const progressPureColumnConfig = columnManager.register( - progressColumnTypeName, - { - name: 'Progress', - type: () => tNumber.create(), - defaultData: () => ({}), - cellToString: data => data?.toString() ?? '', - cellFromString: data => { - const num = data ? Number(data) : NaN; - return { - value: isNaN(num) ? null : num, - }; - }, - cellToJson: data => data ?? null, - } -); -progressPureColumnConfig.registerConvert( - richTextColumnTypeName, - (_column, cells) => ({ - column: {}, - cells: cells.map(v => new Text(v?.toString()).yText), - }) -); diff --git a/packages/blocks/src/database-block/common/columns/renderer.ts b/packages/blocks/src/database-block/common/columns/renderer.ts deleted file mode 100644 index f351e65d15e2..000000000000 --- a/packages/blocks/src/database-block/common/columns/renderer.ts +++ /dev/null @@ -1,49 +0,0 @@ -import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js'; -import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js'; -import type { BaseCellRenderer } from './base-cell.js'; -import type { CellRenderer, DataViewCellComponent } from './manager.js'; - -export interface Renderer< - Data extends NonNullable = NonNullable, - Value = unknown, -> { - type: string; - icon?: UniComponent; - cellRenderer: CellRenderer; - detailCellRenderer?: CellRenderer; -} - -export class ColumnRendererHelper { - private _columns = new Map(); - - register(renderer: Renderer) { - const columns = this._columns; - if (columns.has(renderer.type)) { - throw new Error('cannot register twice for ' + renderer.type); - } - columns.set(renderer.type, renderer); - } - - get(type: Renderer['type']): Renderer { - const renderer = this._columns.get(type); - if (!renderer) { - throw new Error(`cannot find renderer of ${type}`); - } - return renderer; - } - - list(): Renderer[] { - return Array.from(this._columns.values()); - } -} - -export const columnRenderer = new ColumnRendererHelper(); - -export const createFromBaseCellRenderer = < - Value, - Data extends Record = Record, ->( - renderer: new () => BaseCellRenderer -): DataViewCellComponent => { - return createUniComponentFromWebComponent(renderer as never) as never; -}; diff --git a/packages/blocks/src/database-block/common/columns/rich-text/define.ts b/packages/blocks/src/database-block/common/columns/rich-text/define.ts deleted file mode 100644 index 153fbf9ab4a7..000000000000 --- a/packages/blocks/src/database-block/common/columns/rich-text/define.ts +++ /dev/null @@ -1,94 +0,0 @@ -import type { Text } from '@blocksuite/store'; -import { nanoid } from '@blocksuite/store'; - -import { getTagColor } from '../../../../_common/components/tags/colors.js'; -import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js'; -import { tRichText } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; -import { multiSelectColumnTypeName } from '../multi-select/define.js'; -import { selectColumnTypeName } from '../select/define.js'; - -export const richTextColumnTypeName = 'rich-text'; - -declare global { - interface ColumnConfigMap { - [richTextColumnTypeName]: typeof richTextPureColumnConfig; - } -} -export const richTextPureColumnConfig = columnManager.register( - richTextColumnTypeName, - { - name: 'Text', - type: () => tRichText.create(), - defaultData: () => ({}), - cellToString: data => data?.toString() ?? '', - cellFromString: data => { - return { - value: data, - }; - }, - cellToJson: data => data?.toString() ?? null, - } -); -richTextPureColumnConfig.registerConvert( - selectColumnTypeName, - (_column, cells) => { - const options: Record = {}; - const getTag = (name: string) => { - if (options[name]) return options[name]; - const tag: SelectTag = { - id: nanoid(), - value: name, - color: getTagColor(), - }; - options[name] = tag; - return tag; - }; - return { - cells: cells.map(v => { - const tags = v?.toString().split(','); - const value = tags?.[0]?.trim(); - if (value) { - return getTag(value).id; - } - return undefined; - }), - column: { - options: Object.values(options), - }, - }; - } -); - -richTextPureColumnConfig.registerConvert( - multiSelectColumnTypeName, - (_column, cells) => { - const options: Record = {}; - const getTag = (name: string) => { - if (options[name]) return options[name]; - const tag: SelectTag = { - id: nanoid(), - value: name, - color: getTagColor(), - }; - options[name] = tag; - return tag; - }; - return { - cells: cells.map(v => { - const result: string[] = []; - const values = v?.toString().split(','); - values?.forEach(value => { - value = value.trim(); - if (value) { - result.push(getTag(value).id); - } - }); - return result; - }), - column: { - options: Object.values(options), - }, - }; - } -); diff --git a/packages/blocks/src/database-block/common/columns/text/define.ts b/packages/blocks/src/database-block/common/columns/text/define.ts deleted file mode 100644 index d945c50b093c..000000000000 --- a/packages/blocks/src/database-block/common/columns/text/define.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { tString } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; - -export const textColumnTypeName = 'text'; - -declare global { - interface ColumnConfigMap { - [textColumnTypeName]: typeof textPureColumnConfig; - } -} -export const textPureColumnConfig = columnManager.register( - textColumnTypeName, - { - name: 'Plain-Text', - type: () => tString.create(), - defaultData: () => ({}), - cellToString: data => data ?? '', - cellFromString: data => { - return { - value: data, - }; - }, - cellToJson: data => data ?? null, - } -); diff --git a/packages/blocks/src/database-block/common/columns/title/cell-renderer.ts b/packages/blocks/src/database-block/common/columns/title/cell-renderer.ts deleted file mode 100644 index e34174463378..000000000000 --- a/packages/blocks/src/database-block/common/columns/title/cell-renderer.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { - RichTextCell, - RichTextCellEditing, -} from '../rich-text/cell-renderer.js'; -import { titleColumnTypeName, titlePureColumnConfig } from './define.js'; - -columnRenderer.register({ - type: titleColumnTypeName, - icon: createIcon('TitleIcon'), - cellRenderer: { - view: createFromBaseCellRenderer(RichTextCell), - edit: createFromBaseCellRenderer(RichTextCellEditing), - }, -}); - -export const titleColumnConfig = titlePureColumnConfig; diff --git a/packages/blocks/src/database-block/common/columns/title/define.ts b/packages/blocks/src/database-block/common/columns/title/define.ts deleted file mode 100644 index 058459cf3dec..000000000000 --- a/packages/blocks/src/database-block/common/columns/title/define.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { tRichText } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; - -export const titleColumnTypeName = 'title'; - -declare global { - interface ColumnConfigMap { - [titleColumnTypeName]: typeof titlePureColumnConfig; - } -} -export const titlePureColumnConfig = columnManager.register( - titleColumnTypeName, - { - name: 'Title', - type: () => tRichText.create(), - defaultData: () => ({}), - cellToString: data => data?.toString() ?? '', - cellFromString: data => { - return { - value: data, - }; - }, - cellToJson: data => data?.toString() ?? null, - } -); diff --git a/packages/blocks/src/database-block/common/columns/types.ts b/packages/blocks/src/database-block/common/columns/types.ts deleted file mode 100644 index e663f459f11a..000000000000 --- a/packages/blocks/src/database-block/common/columns/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { SelectTag } from '../../../_common/components/tags/multi-tag-select.js'; - -export type SelectColumnData = { - options: SelectTag[]; -}; diff --git a/packages/blocks/src/database-block/common/datasource/all-doc-datasource.ts b/packages/blocks/src/database-block/common/datasource/all-doc-datasource.ts deleted file mode 100644 index 744527632de2..000000000000 --- a/packages/blocks/src/database-block/common/datasource/all-doc-datasource.ts +++ /dev/null @@ -1,163 +0,0 @@ -import type { EditorHost } from '@blocksuite/block-std'; -import { assertExists, Slot } from '@blocksuite/global/utils'; -import type { Doc, DocCollection } from '@blocksuite/store'; - -import type { InsertToPosition, StatCalcOpType } from '../../types.js'; -import type { ColumnConfig } from '../columns/manager.js'; -import { multiSelectPureColumnConfig } from '../columns/multi-select/define.js'; -import { numberPureColumnConfig } from '../columns/number/define.js'; -import { textPureColumnConfig } from '../columns/text/define.js'; -import type { AllDocDataSourceConfig } from './base.js'; -import { BaseDataSource } from './base.js'; - -export class AllDocDataSource extends BaseDataSource { - private collection: DocCollection; - - public get rows(): string[] { - return Array.from(this.collection.docs.keys()); - } - - private propertiesMap: Record< - string, - { - type: string; - getValue: (doc: Doc) => unknown; - setValue?: (doc: Doc, value: unknown) => void; - getData?: () => Record; - changeData?: (data: Record) => void; - } - > = { - title: { - type: textPureColumnConfig.type, - getValue: doc => doc.meta?.title, - setValue: (doc, value) => { - assertExists(doc.meta); - doc.meta.title = `${value ?? ''}`; - }, - }, - tags: { - type: multiSelectPureColumnConfig.type, - getValue: doc => doc.meta?.tags, - setValue: (doc, value) => { - assertExists(doc.meta); - doc.meta.tags = value as string[]; - }, - getData: () => ({ - options: this.collection.meta.properties.tags?.options ?? [], - }), - changeData: data => { - this.collection.meta.setProperties({ - ...this.collection.meta.properties, - tags: data as never, - }); - }, - }, - createDate: { - type: numberPureColumnConfig.type, - getValue: doc => doc.meta?.createDate, - }, - }; - - public get properties(): string[] { - return Object.keys(this.propertiesMap); - } - - constructor(host: EditorHost, _config: AllDocDataSourceConfig) { - super(); - this.collection = host.doc.collection; - host.doc.collection.meta.docMetaUpdated.pipe(this.slots.update); - } - - public cellChangeValue( - rowId: string, - propertyId: string, - value: unknown - ): void { - const doc = this.collection.getDoc(rowId); - assertExists(doc); - this.propertiesMap[propertyId]?.setValue?.(doc, value); - } - - public override cellGetRenderValue( - rowId: string, - propertyId: string - ): unknown { - return this.cellGetValue(rowId, propertyId); - } - - public cellGetValue(rowId: string, propertyId: string): unknown { - const doc = this.collection.getDoc(rowId); - assertExists(doc); - return this.propertiesMap[propertyId]?.getValue(doc); - } - - public propertyAdd(_insertPosition: InsertToPosition | number): string { - throw new Error('not support'); - } - - public propertyChangeData( - propertyId: string, - data: Record - ): void { - this.propertiesMap[propertyId]?.changeData?.(data); - } - - public propertyChangeName(_propertyId: string, _name: string): void { - // not support - } - - public propertyChangeStatCalcOp( - _propertyId: string, - _type: StatCalcOpType - ): void { - // no support - } - - public propertyChangeType(_propertyId: string, _type: string): void { - // not support - } - - public propertyDelete(_id: string): void { - // not support - } - - public propertyDuplicate(_columnId: string): string { - throw new Error('not support'); - } - - public propertyGetData(propertyId: string): Record { - return this.propertiesMap[propertyId]?.getData?.() ?? {}; - } - - public propertyGetName(propertyId: string): string { - return propertyId; - } - - public propertyGetType(propertyId: string): string { - return this.propertiesMap[propertyId].type; - } - - public propertyGetStatCalcOp(_propertyId: string): StatCalcOpType { - return 'none'; - } - - public rowAdd(_insertPosition: InsertToPosition | number): string { - return this.collection.createDoc().id; - } - - public rowDelete(ids: string[]): void { - ids.forEach(id => this.collection.removeDoc(id)); - } - - public slots = { - update: new Slot(), - }; - - public allPropertyConfig: ColumnConfig[] = []; - - public rowMove(rowId: string, position: InsertToPosition): void { - // not support - rowId; - position; - } -} diff --git a/packages/blocks/src/database-block/common/datasource/datasource-manager.ts b/packages/blocks/src/database-block/common/datasource/datasource-manager.ts deleted file mode 100644 index 370bd8ac8d5d..000000000000 --- a/packages/blocks/src/database-block/common/datasource/datasource-manager.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type { EditorHost } from '@blocksuite/block-std'; - -import type { DatabaseBlockModel } from '../../database-model.js'; -import { AllDocDataSource } from './all-doc-datasource.js'; -import type { - AllDocDataSourceConfig, - DatabaseBlockDataSourceConfig, - DataSource, - DataSourceConfig, - GetConfig, - TagsDataSourceConfig, -} from './base.js'; -import { DatabaseBlockDataSource } from './database-block-datasource.js'; -import { TagsDataSource } from './tags-datasource.js'; - -const dataSourceMap: { - [K in DataSourceConfig['type']]: { - title: (host: EditorHost, config: GetConfig) => string; - constructor: new (host: EditorHost, config: GetConfig) => DataSource; - }; -} = { - 'database-block': { - title: (host: EditorHost, config: DatabaseBlockDataSourceConfig) => { - const dbBlock = host.doc.collection - .getDoc(config.pageId) - ?.getBlockById(config.blockId) as DatabaseBlockModel; - return dbBlock?.title.toString() ?? ''; - }, - constructor: DatabaseBlockDataSource, - }, - 'all-pages': { - title: (_host: EditorHost, _config: AllDocDataSourceConfig) => { - return 'All Pages'; - }, - constructor: AllDocDataSource, - }, - tags: { - title: (_host: EditorHost, _config: TagsDataSourceConfig) => { - return 'Tags'; - }, - constructor: TagsDataSource, - }, -}; -export const createDataSource = ( - host: EditorHost, - config: DataSourceConfig -): DataSource => { - return new dataSourceMap[config.type].constructor(host, config as never); -}; -export const getDataSourceTitle = ( - host: EditorHost, - config: DataSourceConfig -): string => { - return dataSourceMap[config.type].title(host, config as never); -}; diff --git a/packages/blocks/src/database-block/common/datasource/tags-datasource.ts b/packages/blocks/src/database-block/common/datasource/tags-datasource.ts deleted file mode 100644 index 2c97731bfc93..000000000000 --- a/packages/blocks/src/database-block/common/datasource/tags-datasource.ts +++ /dev/null @@ -1,200 +0,0 @@ -import type { EditorHost } from '@blocksuite/block-std'; -import { assertExists, Slot } from '@blocksuite/global/utils'; -import type { DocCollection } from '@blocksuite/store'; -import { nanoid } from '@blocksuite/store'; - -import { - getTagColor, - selectOptionColors, -} from '../../../_common/components/tags/colors.js'; -import type { SelectTag } from '../../../_common/components/tags/multi-tag-select.js'; -import type { InsertToPosition, StatCalcOpType } from '../../types.js'; -import type { ColumnConfig } from '../columns/manager.js'; -import { selectPureColumnConfig } from '../columns/select/define.js'; -import { textPureColumnConfig } from '../columns/text/define.js'; -import type { TagsDataSourceConfig } from './base.js'; -import { BaseDataSource } from './base.js'; - -export class TagsDataSource extends BaseDataSource { - private meta: DocCollection['meta']; - - public rowMove(rowId: string, position: InsertToPosition): void { - // not support - rowId; - position; - } - - public get rows(): string[] { - return this.tags.map(v => v.id); - } - - private propertiesMap: Record< - string, - { - type: string; - getValue: (tag: SelectTag) => unknown; - setValue?: (tag: SelectTag, value: unknown) => void; - getData?: () => Record; - changeData?: (data: Record) => void; - } - > = { - value: { - type: textPureColumnConfig.type, - getValue: tag => tag.value, - setValue: (tag, value) => { - this.changeTag({ - ...tag, - value: `${value ?? ''}`, - }); - }, - }, - color: { - type: selectPureColumnConfig.type, - getValue: tag => tag.color, - setValue: (tag, value) => { - this.changeTag({ - ...tag, - color: `${value ?? ''}`, - }); - }, - getData: () => ({ - options: selectOptionColors.map(v => ({ - id: v.color, - value: v.name, - color: v.color, - })), - }), - }, - parent: { - type: selectPureColumnConfig.type, - getData: () => ({ options: this.meta.properties.tags?.options ?? [] }), - getValue: tag => tag.parentId, - setValue: (tag, value) => { - this.changeTag({ - ...tag, - parentId: `${value ?? ''}`, - }); - }, - }, - }; - - public get properties(): string[] { - return Object.keys(this.propertiesMap); - } - - constructor(host: EditorHost, _config: TagsDataSourceConfig) { - super(); - this.meta = host.doc.collection.meta; - host.doc.collection.meta.docMetaUpdated.pipe(this.slots.update); - } - - public cellChangeValue( - rowId: string, - propertyId: string, - value: unknown - ): void { - const tag = this.tags.find(v => v.id === rowId); - if (tag) { - this.propertiesMap[propertyId]?.setValue?.(tag, value); - } - } - - public override cellGetRenderValue( - rowId: string, - propertyId: string - ): unknown { - return this.cellGetValue(rowId, propertyId); - } - - public cellGetValue(rowId: string, propertyId: string): unknown { - const tag = this.tags.find(v => v.id === rowId); - assertExists(tag); - return this.propertiesMap[propertyId]?.getValue(tag); - } - - public propertyAdd(_insertPosition: InsertToPosition | number): string { - throw new Error('not support'); - } - - public propertyChangeData( - propertyId: string, - data: Record - ): void { - this.propertiesMap[propertyId]?.changeData?.(data); - } - - public propertyChangeName(_propertyId: string, _name: string): void { - // not support - } - - public propertyChangeStatCalcOp( - _propertyId: string, - _type: StatCalcOpType - ): void { - // no support - } - - public propertyChangeType(_propertyId: string, _type: string): void { - // not support - } - - public propertyDelete(_id: string): void { - // not support - } - - public propertyDuplicate(_columnId: string): string { - throw new Error('not support'); - } - - public propertyGetData(propertyId: string): Record { - return this.propertiesMap[propertyId]?.getData?.() ?? {}; - } - - public propertyGetName(propertyId: string): string { - return propertyId; - } - - public override propertyGetStatCalcOp(_propertyId: string): StatCalcOpType { - return 'none'; - } - - public propertyGetType(propertyId: string): string { - return this.propertiesMap[propertyId].type; - } - - public rowAdd(_insertPosition: InsertToPosition | number): string { - const id = nanoid(); - this.changeTags([ - ...this.tags, - { - id, - value: '', - color: getTagColor(), - }, - ]); - return id; - } - - public rowDelete(ids: string[]): void { - this.changeTags(this.tags.filter(v => !ids.includes(v.id))); - } - - public slots = { - update: new Slot(), - }; - - private get tags() { - return this.meta.properties.tags?.options ?? []; - } - - private changeTags = (tags: SelectTag[]) => { - this.meta.setProperties({ - ...this.meta.properties, - tags: { options: tags }, - }); - }; - private changeTag = (tag: SelectTag) => { - this.changeTags(this.tags.map(v => (v.id === tag.id ? tag : v))); - }; - public allPropertyConfig: ColumnConfig[] = []; -} diff --git a/packages/blocks/src/database-block/common/group-by/util.ts b/packages/blocks/src/database-block/common/group-by/util.ts deleted file mode 100644 index 54ea14d83ce3..000000000000 --- a/packages/blocks/src/database-block/common/group-by/util.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { columnManager } from '../columns/manager.js'; -import type { GroupBy } from '../types.js'; -import { groupByMatcher } from './matcher.js'; - -export const defaultGroupBy = ( - columnId: string, - type: string, - data: NonNullable -): GroupBy | undefined => { - const name = groupByMatcher.match( - columnManager.getColumn(type).dataType(data) - )?.name; - return name != null - ? { - type: 'groupBy', - columnId: columnId, - name: name, - } - : undefined; -}; diff --git a/packages/blocks/src/database-block/common/header/reference.ts b/packages/blocks/src/database-block/common/header/reference.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/packages/blocks/src/database-block/common/header/tools/base-tool.ts b/packages/blocks/src/database-block/common/header/tools/base-tool.ts deleted file mode 100644 index a38314141fc6..000000000000 --- a/packages/blocks/src/database-block/common/header/tools/base-tool.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; -import { property } from 'lit/decorators.js'; - -import type { DataViewExpose, DataViewToolsProps } from '../../data-view.js'; -import type { DataViewManager } from '../../data-view-manager.js'; - -export class BaseTool - extends WithDisposable(ShadowlessElement) - implements DataViewToolsProps -{ - @property({ attribute: false }) - public view!: Manager; - @property({ attribute: false }) - public viewMethod!: DataViewExpose; -} diff --git a/packages/blocks/src/database-block/common/view-manager.ts b/packages/blocks/src/database-block/common/view-manager.ts deleted file mode 100644 index 5612212e5fe9..000000000000 --- a/packages/blocks/src/database-block/common/view-manager.ts +++ /dev/null @@ -1,134 +0,0 @@ -import type { DatabaseBlockModel } from '../database-model.js'; -import { tTag } from '../logical/data-type.js'; -import { isTArray } from '../logical/typesystem.js'; -import { DEFAULT_COLUMN_WIDTH } from '../table/consts.js'; -import type { Column, InsertToPosition } from '../types.js'; -import { insertPositionToIndex } from '../utils/insert.js'; -import type { FilterGroup } from './ast.js'; -import { columnManager } from './columns/manager.js'; -import { groupByMatcher } from './group-by/matcher.js'; - -export type TableViewColumn = { - id: string; - width: number; - hide?: boolean; -}; - -export type KanbanViewColumn = { - id: string; - hide?: boolean; -}; -export type GroupBy = { - type: 'groupBy'; - columnId: string; - name: string; -}; -export type DatabaseModeMap = { - table: { - columns: TableViewColumn[]; - filter: FilterGroup; - }; - kanban: { - columns: KanbanViewColumn[]; - filter: FilterGroup; - groupBy?: GroupBy; - }; -}; -export type DatabaseViewDataMap = { - [K in keyof DatabaseModeMap]: DatabaseModeMap[K] & { - id: string; - name: string; - mode: K; - }; -}; - -type ViewOperation = { - init(model: DatabaseBlockModel, id: string, name: string): Data; - addColumn( - model: DatabaseBlockModel, - view: Data, - newColumn: Column, - position: InsertToPosition - ): void; - deleteColumn(model: DatabaseBlockModel, view: Data, id: string): void; -}; - -export const defaultGroupBy = ( - columnId: string, - type: string, - data: NonNullable -): GroupBy | undefined => { - const name = groupByMatcher.match( - columnManager.getColumn(type).dataType(data) - )?.name; - return name != null - ? { - type: 'groupBy', - columnId: columnId, - name: name, - } - : undefined; -}; -export const ViewOperationMap: { - [K in keyof DatabaseViewDataMap]: ViewOperation; -} = { - kanban: { - init(model, id, name) { - const column = model.columns.find(column => { - const type = columnManager.getColumn(column.type).dataType(column.data); - return !!(tTag.is(type) || (isTArray(type) && tTag.is(type.ele))); - }); - if (!column) { - throw new Error('not implement yet'); - } - return { - id, - name, - mode: 'kanban', - columns: model.columns.map(v => ({ - id: v.id, - hide: false, - })), - filter: { - type: 'group', - op: 'and', - conditions: [], - }, - groupBy: defaultGroupBy(column.id, column.type, column.data), - }; - }, - addColumn(_model, _view, _newColumn) { - //Nothing to do - }, - deleteColumn(_model, _view, _id) { - //Nothing to do - }, - }, - table: { - init(_model, id, name) { - return { - id, - name, - mode: 'table', - columns: [], - filter: { - type: 'group', - op: 'and', - conditions: [], - }, - }; - }, - addColumn(_model, view, newColumn, position) { - view.columns.splice(insertPositionToIndex(position, view.columns), 0, { - id: newColumn.id, - width: DEFAULT_COLUMN_WIDTH, - }); - }, - deleteColumn(_model, view, id) { - const index = view.columns.findIndex(c => c.id === id); - if (index >= 0) { - view.columns.splice(index, 1); - } - }, - }, -}; diff --git a/packages/blocks/src/database-block/common/header/title.ts b/packages/blocks/src/database-block/components/title/index.ts similarity index 98% rename from packages/blocks/src/database-block/common/header/title.ts rename to packages/blocks/src/database-block/components/title/index.ts index b222c42486a6..7d61186ed2b1 100644 --- a/packages/blocks/src/database-block/common/header/title.ts +++ b/packages/blocks/src/database-block/components/title/index.ts @@ -6,7 +6,7 @@ import { css, html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import type { RichText } from '../../../_common/components/rich-text/rich-text.js'; +import type { RichText } from '../../../_common/components/index.js'; import type { DatabaseBlockComponent } from '../../database-block.js'; @customElement('affine-database-title') diff --git a/packages/blocks/src/database-block/common/datasource/database-block-datasource.ts b/packages/blocks/src/database-block/data-source.ts similarity index 77% rename from packages/blocks/src/database-block/common/datasource/database-block-datasource.ts rename to packages/blocks/src/database-block/data-source.ts index e853ef0370c7..b9b5592b92dc 100644 --- a/packages/blocks/src/database-block/common/datasource/database-block-datasource.ts +++ b/packages/blocks/src/database-block/data-source.ts @@ -1,33 +1,29 @@ -import type { EditorHost } from '@blocksuite/block-std'; -import type { Disposable } from '@blocksuite/global/utils'; -import { assertExists, Slot } from '@blocksuite/global/utils'; -import type { BlockModel } from '@blocksuite/store'; -import { Text, type Y } from '@blocksuite/store'; - -import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js'; -import type { DatabaseBlockModel } from '../../database-model.js'; -import type { InsertToPosition, StatCalcOpType } from '../../types.js'; -import { insertPositionToIndex } from '../../utils/insert.js'; -import { checkboxColumnConfig } from '../columns/checkbox/cell-renderer.js'; -import { dateColumnConfig } from '../columns/date/cell-renderer.js'; -import { imageColumnConfig } from '../columns/image/cell-renderer.js'; -import { linkColumnConfig } from '../columns/link/cell-renderer.js'; -import type { ColumnConfig } from '../columns/manager.js'; -import { columnManager } from '../columns/manager.js'; -import { multiSelectColumnConfig } from '../columns/multi-select/cell-renderer.js'; -import { multiSelectPureColumnConfig } from '../columns/multi-select/define.js'; -import { numberColumnConfig } from '../columns/number/cell-renderer.js'; -import { progressColumnConfig } from '../columns/progress/cell-renderer.js'; -import { richTextColumnConfig } from '../columns/rich-text/cell-renderer.js'; -import { selectColumnConfig } from '../columns/select/cell-renderer.js'; -import { titleColumnConfig } from '../columns/title/cell-renderer.js'; -import type { DatabaseBlockDataSourceConfig, DetailSlots } from './base.js'; -import { BaseDataSource } from './base.js'; +import { type EditorHost } from '@blocksuite/block-std'; +import { assertExists, type Disposable, Slot } from '@blocksuite/global/utils'; +import { type BlockModel, Text, type Y } from '@blocksuite/store'; + import { getIcon } from './block-icons.js'; -import { BlockRenderer } from './block-renderer.js'; +import { + databaseBlockAllColumnMap, + databaseBlockColumns, +} from './columns/index.js'; +import type { StatCalcOpType } from './data-view/index.js'; +import { + BaseDataSource, + type ColumnConfig, + type ColumnMeta, + columnPresets, + createUniComponentFromWebComponent, + type DatabaseBlockDataSourceConfig, + type DetailSlots, + insertPositionToIndex, + type InsertToPosition, +} from './data-view/index.js'; +import { type DatabaseBlockModel } from './database-model.js'; +import { BlockRenderer } from './detail-panel/block-renderer.js'; export class DatabaseBlockDataSource extends BaseDataSource { - private _model: DatabaseBlockModel; + private readonly _model: DatabaseBlockModel; private _batch = 0; get doc() { @@ -74,6 +70,7 @@ export class DatabaseBlockDataSource extends BaseDataSource { value: unknown ): void { this._runCapture(); + const type = this.propertyGetType(propertyId); if (type === 'title' && typeof value === 'string') { const text = this.getModelById(rowId)?.text; @@ -158,9 +155,9 @@ export class DatabaseBlockDataSource extends BaseDataSource { this.doc.captureSync(); return this._model.addColumn( insertToPosition, - columnManager - .getColumn(type ?? multiSelectPureColumnConfig.type) - .create(this.newColumnName()) + databaseBlockAllColumnMap[ + type ?? columnPresets.multiSelectColumnConfig.type + ].model.create(this.newColumnName()) ); } @@ -180,15 +177,6 @@ export class DatabaseBlockDataSource extends BaseDataSource { this._model.applyColumnUpdate(); } - public propertyChangeStatCalcOp( - propertyId: string, - type: StatCalcOpType - ): void { - this.doc.captureSync(); - this._model.updateColumn(propertyId, () => ({ statCalcOp: type })); - this._model.applyColumnUpdate(); - } - public propertyChangeType(propertyId: string, toType: string): void { const currentType = this.propertyGetType(propertyId); const currentData = this.propertyGetData(propertyId); @@ -196,10 +184,12 @@ export class DatabaseBlockDataSource extends BaseDataSource { const currentCells = rows.map(rowId => this.cellGetValue(rowId, propertyId) ); - const result = columnManager - .getColumn(currentType) - ?.convertCell(toType, currentData, currentCells) ?? { - column: columnManager.getColumn(toType).defaultData(), + const result = databaseBlockAllColumnMap[currentType].model?.convertCell( + toType, + currentData, + currentCells + ) ?? { + column: databaseBlockAllColumnMap[toType].model.defaultData(), cells: currentCells.map(() => undefined), }; this.doc.captureSync(); @@ -251,12 +241,6 @@ export class DatabaseBlockDataSource extends BaseDataSource { return this._model.columns.find(v => v.id === propertyId)?.type ?? ''; } - public propertyGetStatCalcOp(propertyId: string): StatCalcOpType { - return ( - this._model.columns.find(v => v.id === propertyId)?.statCalcOp ?? 'none' - ); - } - public propertyDuplicate(columnId: string): string { this.doc.captureSync(); const currentSchema = this._model.getColumn(columnId); @@ -320,17 +304,12 @@ export class DatabaseBlockDataSource extends BaseDataSource { } // eslint-disable-next-line @typescript-eslint/no-explicit-any - public get allPropertyConfig(): ColumnConfig[] { - return [ - dateColumnConfig, - numberColumnConfig, - progressColumnConfig, - selectColumnConfig, - multiSelectColumnConfig, - richTextColumnConfig, - linkColumnConfig, - checkboxColumnConfig, - ]; + public get allPropertyConfig(): ColumnConfig[] { + return databaseBlockColumns.map(v => v.model); + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + public getPropertyMeta(type: string): ColumnMeta { + return databaseBlockAllColumnMap[type]; } public override get detailSlots(): DetailSlots { @@ -351,6 +330,19 @@ export class DatabaseBlockDataSource extends BaseDataSource { this.doc.moveBlocks([model], this._model, target); } } -} -export const hiddenColumn = [titleColumnConfig, imageColumnConfig]; + public propertyChangeStatCalcOp( + propertyId: string, + type: StatCalcOpType + ): void { + this.doc.captureSync(); + this._model.updateColumn(propertyId, () => ({ statCalcOp: type })); + this._model.applyColumnUpdate(); + } + + public propertyGetStatCalcOp(propertyId: string): StatCalcOpType { + return ( + this._model.columns.find(v => v.id === propertyId)?.statCalcOp ?? 'none' + ); + } +} diff --git a/packages/blocks/src/database-block/common/columns/base-cell.ts b/packages/blocks/src/database-block/data-view/column/base-cell.ts similarity index 98% rename from packages/blocks/src/database-block/common/columns/base-cell.ts rename to packages/blocks/src/database-block/data-view/column/base-cell.ts index 385e56509eb4..ab05c3830f92 100644 --- a/packages/blocks/src/database-block/common/columns/base-cell.ts +++ b/packages/blocks/src/database-block/data-view/column/base-cell.ts @@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js'; import type { DataViewColumnManager, DataViewManager, -} from '../data-view-manager.js'; +} from '../view/data-view-manager.js'; import type { CellRenderProps, DataViewCellLifeCycle } from './manager.js'; export abstract class BaseCellRenderer< diff --git a/packages/blocks/src/database-block/data-view/column/column-config.ts b/packages/blocks/src/database-block/data-view/column/column-config.ts new file mode 100644 index 000000000000..8ff79ca9c5e9 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/column-config.ts @@ -0,0 +1,171 @@ +import type { TType } from '../logical/typesystem.js'; +import type { StatCalcOpType } from '../view/presets/table/types.js'; +import type { + GetCellDataFromConfig, + GetColumnDataFromConfig, +} from './manager.js'; +import { createRendererConfig, type Renderer } from './renderer.js'; + +type JSON = + | null + | number + | string + | boolean + | JSON[] + | { + [k: string]: JSON; + }; + +type ColumnOps< + Data extends NonNullable = NonNullable, + Value = unknown, +> = { + name: string; + defaultData: () => Data; + type: (data: Data) => TType; + formatValue?: (value: unknown, colData: Data) => Value; + cellToString: (data: Value, colData: Data) => string; + cellFromString: ( + data: string, + colData: Data + ) => { + value: unknown; + data?: Record; + }; + cellToJson: (data: Value, colData: Data) => JSON; + addGroup?: (text: string, oldData: Data) => Data; +}; + +export class ColumnConfig< + Type extends string = keyof ColumnConfigMap, + T extends NonNullable = NonNullable, + CellData = unknown, +> { + convertMap = new Map(); + + constructor( + public readonly type: Type, + public ops: ColumnOps + ) {} + + create = ( + name: string, + data?: T + ): { + type: string; + name: string; + statCalcOp: StatCalcOpType; + data: T; + } => { + return { + type: this.type, + name, + statCalcOp: 'none', + data: data ?? this.ops.defaultData(), + }; + }; + + defaultData() { + return this.ops.defaultData(); + } + + createWithId( + id: string, + name: string, + data?: T + ): { + type: string; + name: string; + data: T; + id: string; + } { + return { + id, + type: this.type, + name, + data: data ?? this.ops.defaultData(), + }; + } + + dataType(data: T) { + return this.ops.type(data); + } + + toString(cellData: CellData, colData: T): string { + return this.ops.cellToString(cellData, colData); + } + + toJson(cellData: CellData, colData: T): JSON { + return this.ops.cellToJson(cellData, colData); + } + + formatValue(cellData: CellData, colData: T): CellData | undefined { + return cellData === undefined + ? undefined + : this.ops.formatValue?.(cellData, colData) ?? cellData; + } + + fromString(cellData: string, colData: T) { + return this.ops.cellFromString(cellData, colData); + } + + convertCell(to: string, column: Record, cells: unknown[]) { + return this.convertMap.get(to)?.(column, cells); + } + + registerConvert = ( + to: ToCellName, + convert: ( + column: GetColumnDataFromConfig>, + cells: ( + | GetCellDataFromConfig> + | undefined + )[] + ) => { + column: GetColumnDataFromConfig; + cells: (GetCellDataFromConfig | undefined)[]; + } + ) => { + this.convertMap.set(to, convert); + }; + + get name() { + return this.ops.name; + } +} +export type ColumnMeta< + Type extends string = keyof ColumnConfigMap, + CellData = unknown, + ColumnData extends NonNullable = NonNullable, +> = { + type: Type; + model: ColumnConfig; + renderer: Renderer; +}; +export const columnType = (type: Type) => ({ + type: type, + modelConfig: < + CellData, + ColumnData extends Record = Record, + >( + ops: ColumnOps + ) => { + const model = new ColumnConfig(type, ops); + return { + type, + model, + create: model.create, + addConvert: model.registerConvert, + renderConfig: ( + renderer: Omit, 'type'> + ) => ({ + type, + model, + renderer: createRendererConfig({ + ...renderer, + type, + }), + }), + }; + }, +}); diff --git a/packages/blocks/src/database-block/data-view/column/index.ts b/packages/blocks/src/database-block/data-view/column/index.ts new file mode 100644 index 000000000000..56eeab944463 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/index.ts @@ -0,0 +1,3 @@ +export * from './base-cell.js'; +export { ColumnConfig } from './column-config.js'; +export * from './manager.js'; diff --git a/packages/blocks/src/database-block/data-view/column/manager.ts b/packages/blocks/src/database-block/data-view/column/manager.ts new file mode 100644 index 000000000000..1f64e7a8a072 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/manager.ts @@ -0,0 +1,54 @@ +import type { UniComponent } from '../utils/uni-component/index.js'; +import type { + DataViewColumnManager, + DataViewManager, +} from '../view/data-view-manager.js'; +import type { ColumnConfig } from './column-config.js'; + +export interface CellRenderProps< + Data extends NonNullable = NonNullable, + Value = unknown, +> { + view: DataViewManager; + column: DataViewColumnManager; + rowId: string; + isEditing: boolean; + selectCurrentCell: (editing: boolean) => void; +} + +export interface DataViewCellLifeCycle { + beforeEnterEditMode(): boolean; + + onEnterEditMode(): void; + + onExitEditMode(): void; + + focusCell(): boolean; + + blurCell(): boolean; + + forceUpdate(): void; +} + +export type DataViewCellComponent< + Data extends NonNullable = NonNullable, + Value = unknown, +> = UniComponent, DataViewCellLifeCycle>; + +export type CellRenderer< + Data extends NonNullable = NonNullable, + Value = unknown, +> = { + view: DataViewCellComponent; + edit?: DataViewCellComponent; +}; +declare global { + export interface ColumnConfigMap {} +} + +export type GetColumnDataFromConfig = + // eslint-disable-next-line @typescript-eslint/no-explicit-any + T extends ColumnConfig ? R : never; +export type GetCellDataFromConfig = + // eslint-disable-next-line @typescript-eslint/no-explicit-any + T extends ColumnConfig ? R : never; diff --git a/packages/blocks/src/database-block/common/columns/checkbox/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/checkbox/cell-renderer.ts similarity index 79% rename from packages/blocks/src/database-block/common/columns/checkbox/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/checkbox/cell-renderer.ts index 50765c50d022..083f80734951 100644 --- a/packages/blocks/src/database-block/common/columns/checkbox/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/checkbox/cell-renderer.ts @@ -1,15 +1,15 @@ import { css, html } from 'lit'; import { customElement, query } from 'lit/decorators.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; import { checkboxChecked, checkboxUnchecked, playCheckAnimation, -} from '../../../../list-block/utils/icons.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { checkboxPureColumnConfig } from './define.js'; +} from '../../../../../list-block/utils/icons.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { checkboxColumnModelConfig } from './define.js'; @customElement('affine-database-checkbox-cell') export class CheckboxCell extends BaseCellRenderer { @@ -75,11 +75,9 @@ export class CheckboxCell extends BaseCellRenderer { } } -columnRenderer.register({ - type: checkboxPureColumnConfig.type, +export const checkboxColumnConfig = checkboxColumnModelConfig.renderConfig({ icon: createIcon('CheckBoxIcon'), cellRenderer: { view: createFromBaseCellRenderer(CheckboxCell), }, }); -export const checkboxColumnConfig = checkboxPureColumnConfig; diff --git a/packages/blocks/src/database-block/common/columns/checkbox/define.ts b/packages/blocks/src/database-block/data-view/column/presets/checkbox/define.ts similarity index 53% rename from packages/blocks/src/database-block/common/columns/checkbox/define.ts rename to packages/blocks/src/database-block/data-view/column/presets/checkbox/define.ts index 53b8898ac424..8c3882578f6b 100644 --- a/packages/blocks/src/database-block/common/columns/checkbox/define.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/checkbox/define.ts @@ -1,24 +1,23 @@ import { tBoolean } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; +import { columnType } from '../../column-config.js'; +export const chceckboxColumnType = columnType('checkbox'); declare global { interface ColumnConfigMap { - checkbox: typeof checkboxPureColumnConfig; + [chceckboxColumnType.type]: typeof checkboxColumnModelConfig; } } -export const checkboxPureColumnConfig = columnManager.register( - 'checkbox', - { +export const checkboxColumnModelConfig = + chceckboxColumnType.modelConfig({ name: 'Checkbox', type: () => tBoolean.create(), defaultData: () => ({}), cellToString: data => (data ? 'True' : 'False'), cellFromString: data => { return { - value: data === 'False' ? false : true, + value: data !== 'False', }; }, cellToJson: data => data ?? null, - } -); + }); diff --git a/packages/blocks/src/database-block/common/columns/date/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/date/cell-renderer.ts similarity index 88% rename from packages/blocks/src/database-block/common/columns/date/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/date/cell-renderer.ts index 53c70aef2c90..143bd24a542c 100644 --- a/packages/blocks/src/database-block/common/columns/date/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/date/cell-renderer.ts @@ -4,12 +4,12 @@ import { format } from 'date-fns/format'; import { css, html, unsafeCSS } from 'lit'; import { customElement, query } from 'lit/decorators.js'; -import { DatePicker } from '../../../../_common/components/date-picker/date-picker.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import { createLitPortal } from '../../../../_common/components/portal.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { datePureColumnConfig } from './define.js'; +import { DatePicker } from '../../../../../_common/components/date-picker/index.js'; +import { createLitPortal } from '../../../../../_common/components/portal.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { dateColumnModelConfig } from './define.js'; @customElement('affine-database-date-cell') export class DateCell extends BaseCellRenderer { @@ -153,13 +153,10 @@ export class DateCellEditing extends BaseCellRenderer { } } -columnRenderer.register({ - type: datePureColumnConfig.type, +export const dateColumnConfig = dateColumnModelConfig.renderConfig({ icon: createIcon('DateTime'), cellRenderer: { view: createFromBaseCellRenderer(DateCell), edit: createFromBaseCellRenderer(DateCellEditing), }, }); - -export const dateColumnConfig = datePureColumnConfig; diff --git a/packages/blocks/src/database-block/common/columns/date/define.ts b/packages/blocks/src/database-block/data-view/column/presets/date/define.ts similarity index 64% rename from packages/blocks/src/database-block/common/columns/date/define.ts rename to packages/blocks/src/database-block/data-view/column/presets/date/define.ts index 71cd6e86754c..72c0441e52c2 100644 --- a/packages/blocks/src/database-block/common/columns/date/define.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/date/define.ts @@ -1,12 +1,13 @@ import { tDate } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; +import { columnType } from '../../column-config.js'; +export const dateColumnType = columnType('date'); declare global { interface ColumnConfigMap { - date: typeof datePureColumnConfig; + [dateColumnType.type]: typeof dateColumnModelConfig; } } -export const datePureColumnConfig = columnManager.register('date', { +export const dateColumnModelConfig = dateColumnType.modelConfig({ name: 'Date', type: () => tDate.create(), defaultData: () => ({}), diff --git a/packages/blocks/src/database-block/common/columns/image/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/image/cell-renderer.ts similarity index 61% rename from packages/blocks/src/database-block/common/columns/image/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/image/cell-renderer.ts index d62b21ef0aa4..bdc73b1ddc58 100644 --- a/packages/blocks/src/database-block/common/columns/image/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/image/cell-renderer.ts @@ -1,10 +1,10 @@ import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { ImageColumnTypeName, imagePureColumnConfig } from './define.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { imageColumnModelConfig } from './define.js'; @customElement('affine-database-image-cell') export class TextCell extends BaseCellRenderer { @@ -26,12 +26,9 @@ export class TextCell extends BaseCellRenderer { } } -columnRenderer.register({ - type: ImageColumnTypeName, +export const imageColumnConfig = imageColumnModelConfig.renderConfig({ icon: createIcon('ImageIcon'), cellRenderer: { view: createFromBaseCellRenderer(TextCell), }, }); - -export const imageColumnConfig = imagePureColumnConfig; diff --git a/packages/blocks/src/database-block/data-view/column/presets/image/define.ts b/packages/blocks/src/database-block/data-view/column/presets/image/define.ts new file mode 100644 index 000000000000..6e0a632ae787 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/presets/image/define.ts @@ -0,0 +1,22 @@ +import { tImage } from '../../../logical/data-type.js'; +import { columnType } from '../../column-config.js'; + +export const imageColumnType = columnType('image'); + +declare global { + interface ColumnConfigMap { + [imageColumnType.type]: typeof imageColumnModelConfig.model; + } +} +export const imageColumnModelConfig = imageColumnType.modelConfig({ + name: 'image', + type: () => tImage.create(), + defaultData: () => ({}), + cellToString: data => data ?? '', + cellFromString: data => { + return { + value: data, + }; + }, + cellToJson: data => data ?? null, +}); diff --git a/packages/blocks/src/database-block/data-view/column/presets/index.ts b/packages/blocks/src/database-block/data-view/column/presets/index.ts new file mode 100644 index 000000000000..0256e81d942e --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/presets/index.ts @@ -0,0 +1,21 @@ +import { checkboxColumnConfig } from './checkbox/cell-renderer.js'; +import { dateColumnConfig } from './date/cell-renderer.js'; +import { imageColumnConfig } from './image/cell-renderer.js'; +import { linkColumnConfig } from './link/cell-renderer.js'; +import { multiSelectColumnConfig } from './multi-select/cell-renderer.js'; +import { numberColumnConfig } from './number/cell-renderer.js'; +import { progressColumnConfig } from './progress/cell-renderer.js'; +import { selectColumnConfig } from './select/cell-renderer.js'; +import { textColumnConfig } from './text/cell-renderer.js'; + +export const columnPresets = { + checkboxColumnConfig, + dateColumnConfig, + imageColumnConfig, + linkColumnConfig, + multiSelectColumnConfig, + numberColumnConfig, + progressColumnConfig, + selectColumnConfig, + textColumnConfig, +}; diff --git a/packages/blocks/src/database-block/common/columns/link/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts similarity index 88% rename from packages/blocks/src/database-block/common/columns/link/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts index 9aad16492241..3bd082e36d38 100644 --- a/packages/blocks/src/database-block/common/columns/link/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/link/cell-renderer.ts @@ -5,13 +5,13 @@ import { css, unsafeCSS } from 'lit'; import { customElement, query } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import { PenIcon } from '../../../../_common/icons/index.js'; -import { stopPropagation } from '../../../../_common/utils/event.js'; -import { isValidUrl, normalizeUrl } from '../../../../_common/utils/url.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { linkPureColumnConfig } from './define.js'; +import { PenIcon } from '../../../../../_common/icons/index.js'; +import { isValidUrl, normalizeUrl } from '../../../../../_common/utils/url.js'; +import { stopPropagation } from '../../../utils/event.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { linkColumnModelConfig } from './define.js'; @customElement('affine-database-link-cell') export class LinkCell extends BaseCellRenderer { @@ -182,13 +182,10 @@ export class LinkCellEditing extends BaseCellRenderer { } } -columnRenderer.register({ - type: linkPureColumnConfig.type, +export const linkColumnConfig = linkColumnModelConfig.renderConfig({ icon: createIcon('LinkIcon'), cellRenderer: { view: createFromBaseCellRenderer(LinkCell), edit: createFromBaseCellRenderer(LinkCellEditing), }, }); - -export const linkColumnConfig = linkPureColumnConfig; diff --git a/packages/blocks/src/database-block/common/columns/link/components/link-node.ts b/packages/blocks/src/database-block/data-view/column/presets/link/components/link-node.ts similarity index 93% rename from packages/blocks/src/database-block/common/columns/link/components/link-node.ts rename to packages/blocks/src/database-block/data-view/column/presets/link/components/link-node.ts index 77c14b94c9ed..b6f0410cb7e0 100644 --- a/packages/blocks/src/database-block/common/columns/link/components/link-node.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/link/components/link-node.ts @@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std'; import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { isValidUrl } from '../../../../../_common/utils/url.js'; +import { isValidUrl } from '../../../../../../_common/utils/url.js'; @customElement('affine-database-link-node') export class LinkNode extends ShadowlessElement { diff --git a/packages/blocks/src/database-block/common/columns/link/define.ts b/packages/blocks/src/database-block/data-view/column/presets/link/define.ts similarity index 59% rename from packages/blocks/src/database-block/common/columns/link/define.ts rename to packages/blocks/src/database-block/data-view/column/presets/link/define.ts index b100676ea46d..10d046780071 100644 --- a/packages/blocks/src/database-block/common/columns/link/define.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/link/define.ts @@ -1,12 +1,13 @@ import { tString } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; +import { columnType } from '../../column-config.js'; +export const linkColumnType = columnType('link'); declare global { interface ColumnConfigMap { - link: typeof linkPureColumnConfig; + [linkColumnType.type]: typeof linkColumnModelConfig.model; } } -export const linkPureColumnConfig = columnManager.register('link', { +export const linkColumnModelConfig = linkColumnType.modelConfig({ name: 'Link', type: () => tString.create(), defaultData: () => ({}), diff --git a/packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts similarity index 63% rename from packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts index e5a91d76ea13..2acb9830ddf9 100644 --- a/packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/multi-select/cell-renderer.ts @@ -1,16 +1,18 @@ -import '../../../../_common/components/tags/multi-tag-select.js'; -import '../../../../_common/components/tags/multi-tag-view.js'; +import '../../../utils/tags/multi-tag-select.js'; +import '../../../utils/tags/multi-tag-view.js'; import { customElement } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js'; -import { popTagSelect } from '../../../../_common/components/tags/multi-tag-select.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import type { SelectColumnData } from '../types.js'; -import { multiSelectPureColumnConfig } from './define.js'; +import { + popTagSelect, + type SelectTag, +} from '../../../utils/tags/multi-tag-select.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import type { SelectColumnData } from '../../types.js'; +import { multiSelectColumnModelConfig } from './define.js'; @customElement('affine-database-multi-select-cell') export class MultiSelectCell extends BaseCellRenderer< @@ -87,13 +89,11 @@ export class MultiSelectCellEditing extends BaseCellRenderer< } } -columnRenderer.register({ - type: multiSelectPureColumnConfig.type, - icon: createIcon('DatabaseMultiSelect'), - cellRenderer: { - view: createFromBaseCellRenderer(MultiSelectCell), - edit: createFromBaseCellRenderer(MultiSelectCellEditing), - }, -}); - -export const multiSelectColumnConfig = multiSelectPureColumnConfig; +export const multiSelectColumnConfig = + multiSelectColumnModelConfig.renderConfig({ + icon: createIcon('DatabaseMultiSelect'), + cellRenderer: { + view: createFromBaseCellRenderer(MultiSelectCell), + edit: createFromBaseCellRenderer(MultiSelectCellEditing), + }, + }); diff --git a/packages/blocks/src/database-block/common/columns/multi-select/define.ts b/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts similarity index 73% rename from packages/blocks/src/database-block/common/columns/multi-select/define.ts rename to packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts index bd1ef61536df..075799635489 100644 --- a/packages/blocks/src/database-block/common/columns/multi-select/define.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/multi-select/define.ts @@ -1,23 +1,22 @@ import { nanoid, Text } from '@blocksuite/store'; -import { getTagColor } from '../../../../_common/components/tags/colors.js'; -import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js'; import { tTag } from '../../../logical/data-type.js'; import { tArray } from '../../../logical/typesystem.js'; -import { columnManager } from '../manager.js'; -import type { SelectColumnData } from '../types.js'; - -export const multiSelectColumnTypeName = 'multi-select'; +import { getTagColor } from '../../../utils/tags/colors.js'; +import type { SelectTag } from '../../../utils/tags/multi-tag-select.js'; +import { columnType } from '../../column-config.js'; +import type { SelectColumnData } from '../../types.js'; +export const multiSelectColumnType = columnType('multi-select'); declare global { interface ColumnConfigMap { - 'multi-select': typeof multiSelectPureColumnConfig; + [multiSelectColumnType.type]: typeof multiSelectColumnModelConfig.model; } } -export const multiSelectPureColumnConfig = columnManager.register< +export const multiSelectColumnModelConfig = multiSelectColumnType.modelConfig< string[], SelectColumnData ->(multiSelectColumnTypeName, { +>({ name: 'Multi-select', type: data => tArray(tTag.create({ tags: data.options })), defaultData: () => ({ @@ -70,11 +69,11 @@ export const multiSelectPureColumnConfig = columnManager.register< }, cellToJson: data => data ?? null, }); -multiSelectPureColumnConfig.registerConvert('select', (column, cells) => ({ +multiSelectColumnModelConfig.addConvert('select', (column, cells) => ({ column, cells: cells.map(v => v?.[0]), })); -multiSelectPureColumnConfig.registerConvert('rich-text', (column, cells) => { +multiSelectColumnModelConfig.addConvert('rich-text', (column, cells) => { const optionMap = Object.fromEntries(column.options.map(v => [v.id, v])); return { column: {}, diff --git a/packages/blocks/src/database-block/common/columns/number/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts similarity index 87% rename from packages/blocks/src/database-block/common/columns/number/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts index b654736ab776..3a695ff13532 100644 --- a/packages/blocks/src/database-block/common/columns/number/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/number/cell-renderer.ts @@ -2,11 +2,11 @@ import { baseTheme } from '@toeverything/theme'; import { css, html, unsafeCSS } from 'lit'; import { customElement, query } from 'lit/decorators.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import { stopPropagation } from '../../../../_common/utils/event.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { numberPureColumnConfig } from './define.js'; +import { stopPropagation } from '../../../utils/event.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { numberColumnModelConfig } from './define.js'; @customElement('affine-database-number-cell') export class NumberCell extends BaseCellRenderer { @@ -129,13 +129,10 @@ export class NumberCellEditing extends BaseCellRenderer { } } -columnRenderer.register({ - type: numberPureColumnConfig.type, +export const numberColumnConfig = numberColumnModelConfig.renderConfig({ icon: createIcon('DatabaseNumber'), cellRenderer: { view: createFromBaseCellRenderer(NumberCell), edit: createFromBaseCellRenderer(NumberCellEditing), }, }); - -export const numberColumnConfig = numberPureColumnConfig; diff --git a/packages/blocks/src/database-block/common/columns/number/define.ts b/packages/blocks/src/database-block/data-view/column/presets/number/define.ts similarity index 51% rename from packages/blocks/src/database-block/common/columns/number/define.ts rename to packages/blocks/src/database-block/data-view/column/presets/number/define.ts index f055b99fda6a..c48705aeb190 100644 --- a/packages/blocks/src/database-block/common/columns/number/define.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/number/define.ts @@ -1,22 +1,21 @@ import { Text } from '@blocksuite/store'; import { tNumber } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; -import { richTextColumnTypeName } from '../rich-text/define.js'; +import { columnType } from '../../column-config.js'; -export const numberColumnTypeName = 'number'; +export const numberColumnType = columnType('number'); declare global { interface ColumnConfigMap { - [numberColumnTypeName]: typeof numberPureColumnConfig; + [numberColumnType.type]: typeof numberColumnModelConfig.model; } } -export const numberPureColumnConfig = columnManager.register< +export const numberColumnModelConfig = numberColumnType.modelConfig< number, { decimal: number; } ->(numberColumnTypeName, { +>({ name: 'Number', type: () => tNumber.create(), defaultData: () => ({ decimal: 0 }), @@ -29,10 +28,7 @@ export const numberPureColumnConfig = columnManager.register< }, cellToJson: data => data ?? null, }); -numberPureColumnConfig.registerConvert( - richTextColumnTypeName, - (_column, cells) => ({ - column: {}, - cells: cells.map(v => new Text(v?.toString()).yText), - }) -); +numberColumnModelConfig.addConvert('rich-text', (_column, cells) => ({ + column: {}, + cells: cells.map(v => new Text(v?.toString()).yText), +})); diff --git a/packages/blocks/src/database-block/common/columns/progress/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts similarity index 93% rename from packages/blocks/src/database-block/common/columns/progress/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts index a5ed8b07138c..4e1f37f667d4 100644 --- a/packages/blocks/src/database-block/common/columns/progress/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/progress/cell-renderer.ts @@ -2,11 +2,11 @@ import { css, html } from 'lit'; import { customElement, query, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; import { startDrag } from '../../../utils/drag.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { progressPureColumnConfig } from './define.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { progressColumnModelConfig } from './define.js'; const styles = css` affine-database-progress-cell-editing { @@ -230,13 +230,10 @@ export class ProgressCellEditing extends BaseCellRenderer { } } -columnRenderer.register({ - type: progressPureColumnConfig.type, +export const progressColumnConfig = progressColumnModelConfig.renderConfig({ icon: createIcon('DatabaseProgress'), cellRenderer: { view: createFromBaseCellRenderer(ProgressCell), edit: createFromBaseCellRenderer(ProgressCellEditing), }, }); - -export const progressColumnConfig = progressPureColumnConfig; diff --git a/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts b/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts new file mode 100644 index 000000000000..b2b6b85e9eed --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/presets/progress/define.ts @@ -0,0 +1,31 @@ +import { Text } from '@blocksuite/store'; + +import { tNumber } from '../../../logical/data-type.js'; +import { columnType } from '../../column-config.js'; + +export const progressColumnType = columnType('progress'); + +declare global { + interface ColumnConfigMap { + [progressColumnType.type]: typeof progressColumnModelConfig.model; + } +} +export const progressColumnModelConfig = progressColumnType.modelConfig( + { + name: 'Progress', + type: () => tNumber.create(), + defaultData: () => ({}), + cellToString: data => data?.toString() ?? '', + cellFromString: data => { + const num = data ? Number(data) : NaN; + return { + value: isNaN(num) ? null : num, + }; + }, + cellToJson: data => data ?? null, + } +); +progressColumnModelConfig.addConvert('rich-text', (_column, cells) => ({ + column: {}, + cells: cells.map(v => new Text(v?.toString()).yText), +})); diff --git a/packages/blocks/src/database-block/common/columns/select/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/select/cell-renderer.ts similarity index 71% rename from packages/blocks/src/database-block/common/columns/select/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/select/cell-renderer.ts index 2d6f87e7e2a4..244b8df923b1 100644 --- a/packages/blocks/src/database-block/common/columns/select/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/select/cell-renderer.ts @@ -1,16 +1,18 @@ -import '../../../../_common/components/tags/multi-tag-select.js'; -import '../../../../_common/components/tags/multi-tag-view.js'; +import '../../../utils/tags/multi-tag-select.js'; +import '../../../utils/tags/multi-tag-view.js'; import { customElement } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js'; -import { popTagSelect } from '../../../../_common/components/tags/multi-tag-select.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import type { SelectColumnData } from '../types.js'; -import { selectPureColumnConfig } from './define.js'; +import { + popTagSelect, + type SelectTag, +} from '../../../utils/tags/multi-tag-select.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import type { SelectColumnData } from '../../types.js'; +import { selectColumnModelConfig } from './define.js'; @customElement('affine-database-select-cell') export class SelectCell extends BaseCellRenderer { @@ -86,13 +88,10 @@ export class SelectCellEditing extends BaseCellRenderer< } } -columnRenderer.register({ - type: selectPureColumnConfig.type, +export const selectColumnConfig = selectColumnModelConfig.renderConfig({ icon: createIcon('DatabaseSelect'), cellRenderer: { view: createFromBaseCellRenderer(SelectCell), edit: createFromBaseCellRenderer(SelectCellEditing), }, }); - -export const selectColumnConfig = selectPureColumnConfig; diff --git a/packages/blocks/src/database-block/common/columns/select/define.ts b/packages/blocks/src/database-block/data-view/column/presets/select/define.ts similarity index 71% rename from packages/blocks/src/database-block/common/columns/select/define.ts rename to packages/blocks/src/database-block/data-view/column/presets/select/define.ts index 824eeb448402..beeb654bbf7e 100644 --- a/packages/blocks/src/database-block/common/columns/select/define.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/select/define.ts @@ -1,22 +1,22 @@ import { nanoid, Text } from '@blocksuite/store'; -import { getTagColor } from '../../../../_common/components/tags/colors.js'; -import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js'; import { tTag } from '../../../logical/data-type.js'; -import { columnManager } from '../manager.js'; -import type { SelectColumnData } from '../types.js'; +import { getTagColor } from '../../../utils/tags/colors.js'; +import type { SelectTag } from '../../../utils/tags/multi-tag-select.js'; +import { columnType } from '../../column-config.js'; +import type { SelectColumnData } from '../../types.js'; -export const selectColumnTypeName = 'select'; +export const selectColumnType = columnType('select'); declare global { interface ColumnConfigMap { - [selectColumnTypeName]: typeof selectPureColumnConfig; + [selectColumnType.type]: typeof selectColumnModelConfig.model; } } -export const selectPureColumnConfig = columnManager.register< +export const selectColumnModelConfig = selectColumnType.modelConfig< string, SelectColumnData ->(selectColumnTypeName, { +>({ name: 'Select', type: data => tTag.create({ tags: data.options }), defaultData: () => ({ @@ -66,12 +66,12 @@ export const selectPureColumnConfig = columnManager.register< cellToJson: data => data ?? null, }); -selectPureColumnConfig.registerConvert('multi-select', (column, cells) => ({ +selectColumnModelConfig.addConvert('multi-select', (column, cells) => ({ column, cells: cells.map(v => (v ? [v] : undefined)), })); -selectPureColumnConfig.registerConvert('rich-text', (column, cells) => { +selectColumnModelConfig.addConvert('rich-text', (column, cells) => { const optionMap = Object.fromEntries(column.options.map(v => [v.id, v])); return { column: {}, diff --git a/packages/blocks/src/database-block/common/columns/text/cell-renderer.ts b/packages/blocks/src/database-block/data-view/column/presets/text/cell-renderer.ts similarity index 87% rename from packages/blocks/src/database-block/common/columns/text/cell-renderer.ts rename to packages/blocks/src/database-block/data-view/column/presets/text/cell-renderer.ts index cb5886d068ab..562e298be861 100644 --- a/packages/blocks/src/database-block/common/columns/text/cell-renderer.ts +++ b/packages/blocks/src/database-block/data-view/column/presets/text/cell-renderer.ts @@ -2,10 +2,10 @@ import { baseTheme } from '@toeverything/theme'; import { css, html, unsafeCSS } from 'lit'; import { customElement, query } from 'lit/decorators.js'; -import { createIcon } from '../../../../_common/components/icon/uni-icon.js'; -import { BaseCellRenderer } from '../base-cell.js'; -import { columnRenderer, createFromBaseCellRenderer } from '../renderer.js'; -import { textColumnTypeName, textPureColumnConfig } from './define.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { BaseCellRenderer } from '../../base-cell.js'; +import { createFromBaseCellRenderer } from '../../renderer.js'; +import { textColumnModelConfig } from './define.js'; @customElement('affine-database-text-cell') export class TextCell extends BaseCellRenderer { @@ -112,8 +112,7 @@ export class TextCellEditing extends BaseCellRenderer { } } -columnRenderer.register({ - type: textColumnTypeName, +export const textColumnConfig = textColumnModelConfig.renderConfig({ icon: createIcon('TextIcon'), cellRenderer: { @@ -121,5 +120,3 @@ columnRenderer.register({ edit: createFromBaseCellRenderer(TextCellEditing), }, }); - -export const textColumnConfig = textPureColumnConfig; diff --git a/packages/blocks/src/database-block/data-view/column/presets/text/define.ts b/packages/blocks/src/database-block/data-view/column/presets/text/define.ts new file mode 100644 index 000000000000..a2f477229b19 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/presets/text/define.ts @@ -0,0 +1,22 @@ +import { tString } from '../../../logical/data-type.js'; +import { columnType } from '../../column-config.js'; + +export const textColumnType = columnType('text'); + +declare global { + interface ColumnConfigMap { + [textColumnType.type]: typeof textColumnModelConfig.model; + } +} +export const textColumnModelConfig = textColumnType.modelConfig({ + name: 'Plain-Text', + type: () => tString.create(), + defaultData: () => ({}), + cellToString: data => data ?? '', + cellFromString: data => { + return { + value: data, + }; + }, + cellToJson: data => data ?? null, +}); diff --git a/packages/blocks/src/database-block/data-view/column/renderer.ts b/packages/blocks/src/database-block/data-view/column/renderer.ts new file mode 100644 index 000000000000..d3d5c99f7499 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/renderer.ts @@ -0,0 +1,33 @@ +import { + createUniComponentFromWebComponent, + type UniComponent, +} from '../utils/uni-component/index.js'; +import type { BaseCellRenderer } from './base-cell.js'; +import type { CellRenderer, DataViewCellComponent } from './manager.js'; + +export interface Renderer< + Data extends NonNullable = NonNullable, + Value = unknown, +> { + type: string; + icon?: UniComponent; + cellRenderer: CellRenderer; + detailCellRenderer?: CellRenderer; +} + +export const createFromBaseCellRenderer = < + Value, + Data extends Record = Record, +>( + renderer: new () => BaseCellRenderer +): DataViewCellComponent => { + return createUniComponentFromWebComponent(renderer as never) as never; +}; +export const createRendererConfig = < + CellData, + ColumnData extends NonNullable, +>( + renderer: Renderer +) => { + return renderer; +}; diff --git a/packages/blocks/src/database-block/data-view/column/types.ts b/packages/blocks/src/database-block/data-view/column/types.ts new file mode 100644 index 000000000000..6822f0d5f78f --- /dev/null +++ b/packages/blocks/src/database-block/data-view/column/types.ts @@ -0,0 +1,5 @@ +import type { SelectTag } from '../utils/tags/multi-tag-select.js'; + +export type SelectColumnData = { + options: SelectTag[]; +}; diff --git a/packages/blocks/src/database-block/common/ast.ts b/packages/blocks/src/database-block/data-view/common/ast.ts similarity index 93% rename from packages/blocks/src/database-block/common/ast.ts rename to packages/blocks/src/database-block/data-view/common/ast.ts index cacf7d9a3913..e4c6669b257a 100644 --- a/packages/blocks/src/database-block/common/ast.ts +++ b/packages/blocks/src/database-block/data-view/common/ast.ts @@ -1,7 +1,7 @@ -import type { UniComponent } from '../../_common/components/uni-component/uni-component.js'; import { propertyMatcher } from '../logical/property-matcher.js'; import type { TType } from '../logical/typesystem.js'; -import { filterMatcher } from './filter/matcher/matcher.js'; +import type { UniComponent } from '../utils/uni-component/uni-component.js'; +import { filterMatcher } from '../widget/filter/matcher/matcher.js'; export type Variable = { name: string; diff --git a/packages/blocks/src/database-block/common/component/overflow/overflow.ts b/packages/blocks/src/database-block/data-view/common/component/overflow/overflow.ts similarity index 100% rename from packages/blocks/src/database-block/common/component/overflow/overflow.ts rename to packages/blocks/src/database-block/data-view/common/component/overflow/overflow.ts diff --git a/packages/blocks/src/database-block/common/css-variable.ts b/packages/blocks/src/database-block/data-view/common/css-variable.ts similarity index 100% rename from packages/blocks/src/database-block/common/css-variable.ts rename to packages/blocks/src/database-block/data-view/common/css-variable.ts diff --git a/packages/blocks/src/database-block/common/datasource/base.ts b/packages/blocks/src/database-block/data-view/common/data-source/base.ts similarity index 89% rename from packages/blocks/src/database-block/common/datasource/base.ts rename to packages/blocks/src/database-block/data-view/common/data-source/base.ts index ccc8b1c7089f..879b5d63b557 100644 --- a/packages/blocks/src/database-block/common/datasource/base.ts +++ b/packages/blocks/src/database-block/data-view/common/data-source/base.ts @@ -1,14 +1,12 @@ import type { Disposable, Slot } from '@blocksuite/global/utils'; -import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js'; -import { DEFAULT_COLUMN_WIDTH } from '../../table/consts.js'; -import type { InsertToPosition, StatCalcOpType } from '../../types.js'; -import { - type ColumnConfig, - type ColumnConfigManager, - columnManager, -} from '../columns/manager.js'; -import type { DataViewManager } from '../data-view-manager.js'; +import type { ColumnMeta } from '../../column/column-config.js'; +import type { ColumnConfig } from '../../column/index.js'; +import type { InsertToPosition } from '../../types.js'; +import type { UniComponent } from '../../utils/uni-component/index.js'; +import type { DataViewManager } from '../../view/data-view-manager.js'; +import { DEFAULT_COLUMN_WIDTH } from '../../view/presets/table/consts.js'; +import type { StatCalcOpType } from '../../view/presets/table/types.js'; export type DetailSlotProps = { view: DataViewManager; rowId: string }; @@ -18,6 +16,7 @@ export interface DetailSlots { export interface DataSource { allPropertyConfig: ColumnConfig[]; + getPropertyMeta(type: string): ColumnMeta; properties: string[]; rows: string[]; cellGetValue: (rowId: string, propertyId: string) => unknown; @@ -48,8 +47,6 @@ export interface DataSource { propertyDelete: (id: string) => void; propertyDuplicate: (columnId: string) => string; - columnConfigManager: ColumnConfigManager; - /** * @deprecated */ @@ -159,9 +156,8 @@ export abstract class BaseDataSource implements DataSource { // } - public columnConfigManager: ColumnConfigManager = columnManager; public abstract allPropertyConfig: ColumnConfig[]; - + public abstract getPropertyMeta(type: string): ColumnMeta; public get detailSlots(): DetailSlots { return {}; } diff --git a/packages/blocks/src/database-block/common/data-stats.ts b/packages/blocks/src/database-block/data-view/common/data-stats.ts similarity index 97% rename from packages/blocks/src/database-block/common/data-stats.ts rename to packages/blocks/src/database-block/data-view/common/data-stats.ts index 4d398583d9ab..3885273a69fa 100644 --- a/packages/blocks/src/database-block/common/data-stats.ts +++ b/packages/blocks/src/database-block/data-view/common/data-stats.ts @@ -1,7 +1,7 @@ import { assertEquals } from '@blocksuite/global/utils'; -import type { SelectTag } from '../../_common/components/index.js'; -import type { DataViewColumnManager } from './data-view-manager.js'; +import type { SelectTag } from '../utils/tags/multi-tag-select.js'; +import type { DataViewColumnManager } from '../view/data-view-manager.js'; /** * Class for computing statistics on a DataViewColumnManager column. diff --git a/packages/blocks/src/database-block/common/detail/detail.ts b/packages/blocks/src/database-block/data-view/common/detail/detail.ts similarity index 91% rename from packages/blocks/src/database-block/common/detail/detail.ts rename to packages/blocks/src/database-block/data-view/common/detail/detail.ts index 8247d87c97e0..361385381419 100644 --- a/packages/blocks/src/database-block/common/detail/detail.ts +++ b/packages/blocks/src/database-block/data-view/common/detail/detail.ts @@ -6,12 +6,12 @@ import { customElement, property, query } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { html } from 'lit/static-html.js'; -import { popFilterableSimpleMenu } from '../../../_common/components/menu/index.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; -import { PlusIcon } from '../../../_common/icons/index.js'; +import { popFilterableSimpleMenu } from '../../utils/menu/index.js'; +import { renderUniLit } from '../../utils/uni-component/uni-component.js'; +import type { DataViewManager } from '../../view/data-view-manager.js'; import { dataViewCommonStyle } from '../css-variable.js'; -import type { DataViewManager } from '../data-view-manager.js'; -import type { DetailSlotProps } from '../datasource/base.js'; +import type { DetailSlotProps } from '../data-source/base.js'; +import { PlusIcon } from '../icons/index.js'; import { DetailSelection } from './selection.js'; const styles = css` diff --git a/packages/blocks/src/database-block/common/detail/field.ts b/packages/blocks/src/database-block/data-view/common/detail/field.ts similarity index 96% rename from packages/blocks/src/database-block/common/detail/field.ts rename to packages/blocks/src/database-block/data-view/common/detail/field.ts index 2dfcb5259614..aa975f6d7453 100644 --- a/packages/blocks/src/database-block/common/detail/field.ts +++ b/packages/blocks/src/database-block/data-view/common/detail/field.ts @@ -5,23 +5,23 @@ import { classMap } from 'lit/directives/class-map.js'; import { createRef } from 'lit/directives/ref.js'; import { html } from 'lit/static-html.js'; -import { popMenu } from '../../../_common/components/menu/index.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; -import { - DatabaseDuplicate, - DatabaseMoveLeft, - DatabaseMoveRight, - DeleteIcon, - TextIcon, -} from '../../../_common/icons/index.js'; import type { CellRenderProps, DataViewCellLifeCycle, -} from '../columns/manager.js'; +} from '../../column/index.js'; +import { popMenu } from '../../utils/menu/index.js'; +import { renderUniLit } from '../../utils/uni-component/uni-component.js'; import type { DataViewColumnManager, DataViewManager, -} from '../data-view-manager.js'; +} from '../../view/data-view-manager.js'; +import { + DatabaseDuplicate, + DatabaseMoveLeft, + DatabaseMoveRight, + DeleteIcon, + TextIcon, +} from '../icons/index.js'; @customElement('affine-data-view-record-field') export class RecordField extends WithDisposable(ShadowlessElement) { diff --git a/packages/blocks/src/database-block/common/detail/layout.ts b/packages/blocks/src/database-block/data-view/common/detail/layout.ts similarity index 94% rename from packages/blocks/src/database-block/common/detail/layout.ts rename to packages/blocks/src/database-block/data-view/common/detail/layout.ts index 705ed840d039..470b7d0369f7 100644 --- a/packages/blocks/src/database-block/common/detail/layout.ts +++ b/packages/blocks/src/database-block/data-view/common/detail/layout.ts @@ -9,9 +9,9 @@ import { import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { createModal } from '../../../_common/components/menu/index.js'; -import { CrossIcon } from '../../../_common/icons/index.js'; -import type { DataViewManager } from '../data-view-manager.js'; +import { createModal } from '../../utils/menu/index.js'; +import type { DataViewManager } from '../../view/data-view-manager.js'; +import { CrossIcon } from '../icons/index.js'; import { RecordDetail } from './detail.js'; @customElement('side-layout-modal') diff --git a/packages/blocks/src/database-block/common/detail/selection.ts b/packages/blocks/src/database-block/data-view/common/detail/selection.ts similarity index 94% rename from packages/blocks/src/database-block/common/detail/selection.ts rename to packages/blocks/src/database-block/data-view/common/detail/selection.ts index 8d265b5848cd..1c0465520d6b 100644 --- a/packages/blocks/src/database-block/common/detail/selection.ts +++ b/packages/blocks/src/database-block/data-view/common/detail/selection.ts @@ -1,6 +1,6 @@ -import type { KanbanCardSelection } from '../../../_common/utils/index.js'; -import type { KanbanCard } from '../../kanban/card.js'; -import { KanbanCell } from '../../kanban/cell.js'; +import type { KanbanCard } from '../../view/presets/kanban/card.js'; +import { KanbanCell } from '../../view/presets/kanban/cell.js'; +import type { KanbanCardSelection } from '../../view/presets/kanban/types.js'; import type { RecordDetail } from './detail.js'; import { RecordField } from './field.js'; diff --git a/packages/blocks/src/database-block/common/group-by/define.ts b/packages/blocks/src/database-block/data-view/common/group-by/define.ts similarity index 96% rename from packages/blocks/src/database-block/common/group-by/define.ts rename to packages/blocks/src/database-block/data-view/common/group-by/define.ts index 045ccd2c4ab2..98402955ca28 100644 --- a/packages/blocks/src/database-block/common/group-by/define.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/define.ts @@ -1,6 +1,6 @@ -import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js'; import { tNumber, tString, tTag } from '../../logical/data-type.js'; import { isTArray, tArray } from '../../logical/typesystem.js'; +import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js'; import { groupByMatcher } from './matcher.js'; import { NumberGroupView } from './renderer/number-group.js'; import { SelectGroupView } from './renderer/select-group.js'; diff --git a/packages/blocks/src/database-block/common/group-by/group-title.ts b/packages/blocks/src/database-block/data-view/common/group-by/group-title.ts similarity index 94% rename from packages/blocks/src/database-block/common/group-by/group-title.ts rename to packages/blocks/src/database-block/data-view/common/group-by/group-title.ts index 9ca202df479d..ef001b88d6a4 100644 --- a/packages/blocks/src/database-block/common/group-by/group-title.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/group-title.ts @@ -1,8 +1,8 @@ import { nothing } from 'lit'; import { html } from 'lit/static-html.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; -import { MoreHorizontalIcon, PlusIcon } from '../../../_common/icons/index.js'; +import { renderUniLit } from '../../utils/uni-component/uni-component.js'; +import { MoreHorizontalIcon, PlusIcon } from '../icons/index.js'; import type { GroupData } from './helper.js'; import type { GroupRenderProps } from './matcher.js'; diff --git a/packages/blocks/src/database-block/common/group-by/helper.ts b/packages/blocks/src/database-block/data-view/common/group-by/helper.ts similarity index 97% rename from packages/blocks/src/database-block/common/group-by/helper.ts rename to packages/blocks/src/database-block/data-view/common/group-by/helper.ts index cde08726c80a..685664ce5aea 100644 --- a/packages/blocks/src/database-block/common/group-by/helper.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/helper.ts @@ -1,7 +1,7 @@ import type { TType } from '../../logical/typesystem.js'; import type { InsertToPosition } from '../../types.js'; import { insertPositionToIndex } from '../../utils/insert.js'; -import type { DataViewManager } from '../data-view-manager.js'; +import type { DataViewManager } from '../../view/data-view-manager.js'; import type { GroupBy, GroupProperty } from '../types.js'; import type { GroupByConfig } from './matcher.js'; import { groupByMatcher } from './matcher.js'; @@ -185,8 +185,7 @@ export class GroupHelper { this.changeCardSort(toGroupKey, rows); } get addGroup() { - return this.viewManager.columnConfigManager.getColumn(this.column.type).ops - .addGroup; + return this.viewManager.columnGetMeta(this.column.type).model.ops.addGroup; } } export const sortByManually = ( diff --git a/packages/blocks/src/database-block/common/group-by/matcher.ts b/packages/blocks/src/database-block/data-view/common/group-by/matcher.ts similarity index 90% rename from packages/blocks/src/database-block/common/group-by/matcher.ts rename to packages/blocks/src/database-block/data-view/common/group-by/matcher.ts index 0625e9ee35f8..e2fdd44fffc0 100644 --- a/packages/blocks/src/database-block/common/group-by/matcher.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/matcher.ts @@ -1,6 +1,6 @@ -import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js'; import { Matcher } from '../../logical/matcher.js'; import type { TType } from '../../logical/typesystem.js'; +import type { UniComponent } from '../../utils/uni-component/uni-component.js'; export interface GroupRenderProps< Data extends NonNullable = NonNullable, diff --git a/packages/blocks/src/database-block/common/group-by/renderer/base.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/base.ts similarity index 100% rename from packages/blocks/src/database-block/common/group-by/renderer/base.ts rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/base.ts diff --git a/packages/blocks/src/database-block/common/group-by/renderer/number-group.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/number-group.ts similarity index 95% rename from packages/blocks/src/database-block/common/group-by/renderer/number-group.ts rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/number-group.ts index 6d6d119c669f..376dfc946c90 100644 --- a/packages/blocks/src/database-block/common/group-by/renderer/number-group.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/renderer/number-group.ts @@ -1,7 +1,7 @@ import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { popMenu } from '../../../../_common/components/menu/index.js'; +import { popMenu } from '../../../utils/menu/index.js'; import { BaseGroup } from './base.js'; @customElement('data-view-group-title-number-view') diff --git a/packages/blocks/src/database-block/common/group-by/renderer/select-group.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/select-group.ts similarity index 91% rename from packages/blocks/src/database-block/common/group-by/renderer/select-group.ts rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/select-group.ts index 167025ffdaba..356c6f9ad3c2 100644 --- a/packages/blocks/src/database-block/common/group-by/renderer/select-group.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/renderer/select-group.ts @@ -3,9 +3,9 @@ import { customElement } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { popMenu } from '../../../../_common/components/menu/index.js'; -import { selectOptionColors } from '../../../../_common/components/tags/colors.js'; -import type { SelectTag } from '../../../../_common/components/tags/multi-tag-select.js'; +import { popMenu } from '../../../utils/menu/index.js'; +import { selectOptionColors } from '../../../utils/tags/colors.js'; +import type { SelectTag } from '../../../utils/tags/multi-tag-select.js'; import { BaseGroup } from './base.js'; @customElement('data-view-group-title-select-view') diff --git a/packages/blocks/src/database-block/common/group-by/renderer/string-group.ts b/packages/blocks/src/database-block/data-view/common/group-by/renderer/string-group.ts similarity index 93% rename from packages/blocks/src/database-block/common/group-by/renderer/string-group.ts rename to packages/blocks/src/database-block/data-view/common/group-by/renderer/string-group.ts index 92d126170075..1cfcd64bc98e 100644 --- a/packages/blocks/src/database-block/common/group-by/renderer/string-group.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/renderer/string-group.ts @@ -1,7 +1,7 @@ import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { popMenu } from '../../../../_common/components/menu/index.js'; +import { popMenu } from '../../../utils/menu/index.js'; import { BaseGroup } from './base.js'; @customElement('data-view-group-title-string-view') diff --git a/packages/blocks/src/database-block/common/group-by/setting.ts b/packages/blocks/src/database-block/data-view/common/group-by/setting.ts similarity index 92% rename from packages/blocks/src/database-block/common/group-by/setting.ts rename to packages/blocks/src/database-block/data-view/common/group-by/setting.ts index ee710d43d9d9..ad57336c886f 100644 --- a/packages/blocks/src/database-block/common/group-by/setting.ts +++ b/packages/blocks/src/database-block/data-view/common/group-by/setting.ts @@ -6,20 +6,18 @@ import { customElement, property, query } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import Sortable from 'sortablejs'; -import type { - Menu, - MenuOptions, -} from '../../../_common/components/menu/index.js'; -import { popMenu } from '../../../_common/components/menu/index.js'; -import { menuTitleItem } from '../../../_common/components/menu/title.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; +import { ArrowRightSmallIcon } from '../../../../_common/icons/index.js'; import { - ArrowRightSmallIcon, - DeleteIcon, -} from '../../../_common/icons/index.js'; -import { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js'; -import { DataViewTableManager } from '../../table/table-view-manager.js'; + type Menu, + type MenuOptions, + popMenu, +} from '../../utils/menu/index.js'; +import { menuTitleItem } from '../../utils/menu/title.js'; +import { renderUniLit } from '../../utils/uni-component/uni-component.js'; +import { DataViewKanbanManager } from '../../view/presets/kanban/kanban-view-manager.js'; +import { DataViewTableManager } from '../../view/presets/table/table-view-manager.js'; import { dataViewCssVariable } from '../css-variable.js'; +import { DeleteIcon } from '../icons/index.js'; import type { GroupRenderProps } from './matcher.js'; import { groupByMatcher } from './matcher.js'; diff --git a/packages/blocks/src/_common/components/icon/icon.ts b/packages/blocks/src/database-block/data-view/common/icons/icon.ts similarity index 91% rename from packages/blocks/src/_common/components/icon/icon.ts rename to packages/blocks/src/database-block/data-view/common/icons/icon.ts index 2743195ceb7c..973239e69514 100644 --- a/packages/blocks/src/_common/components/icon/icon.ts +++ b/packages/blocks/src/database-block/data-view/common/icons/icon.ts @@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std'; import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import * as icons from '../../../_common/icons/index.js'; +import * as icons from './index.js'; @customElement('affine-lit-icon') export class AffineLitIcon extends ShadowlessElement { diff --git a/packages/blocks/src/database-block/data-view/common/icons/index.ts b/packages/blocks/src/database-block/data-view/common/icons/index.ts new file mode 100644 index 000000000000..82285df26edc --- /dev/null +++ b/packages/blocks/src/database-block/data-view/common/icons/index.ts @@ -0,0 +1,525 @@ +import { html } from 'lit'; + +export const DatabaseSearchIcon = html` + + `; +export const DatabaseDuplicate = html` + + `; +export const DatabaseInsertLeft = html` + + `; +export const DatabaseInsertRight = html` + + `; +export const DatabaseMoveLeft = html` + +`; +export const DatabaseMoveRight = html` + +`; +export const DatabaseMultiSelect = html` + + + + + + +`; +export const DatabaseNumber = html` + + + + +`; +export const DatabaseSelect = html` + + +`; +export const DatabaseProgress = html` + +`; +export const DatabaseSearchClose = html` + +`; + +export const DatabaseAddColumn = html` + +`; +export const DatabaseDragIcon = html` + + + + + + + + + + + + + + + +`; +export const DatabaseExpand = html` + + + +`; +export const DatabaseTableViewClose = html` + + + +`; +export const CrossIcon = html` + +`; +export const PlusIcon = html` + +`; +export const DeleteIcon = html` + +`; +export const MoreHorizontalIcon = html` + + `; +export const ArrowLeftBigIcon = html` + + `; +export const TextIcon = html` + +`; +export const CheckBoxIcon = html` + +`; +export const DateTime = html` + + `; +export const ImageIcon = html` + +`; +export const TitleIcon = html` + + `; + +export const LinkIcon = html` + +`; +export const DatabaseKanbanViewIcon = html` + +`; +export const DatabaseTableViewIcon = html` + +`; + +export const ConvertIcon = html` + + `; + +export const FilterIcon = html` + + `; + +export const GroupingIcon = html` + + `; + +export const InfoIcon = html` + + `; + +export const DoneIcon = html` + + `; diff --git a/packages/blocks/src/database-block/data-view/common/index.ts b/packages/blocks/src/database-block/data-view/common/index.ts new file mode 100644 index 000000000000..975d6e2b936e --- /dev/null +++ b/packages/blocks/src/database-block/data-view/common/index.ts @@ -0,0 +1 @@ +export * from './view-source.js'; diff --git a/packages/blocks/src/database-block/common/literal/define.ts b/packages/blocks/src/database-block/data-view/common/literal/define.ts similarity index 96% rename from packages/blocks/src/database-block/common/literal/define.ts rename to packages/blocks/src/database-block/data-view/common/literal/define.ts index 43004ced6862..b3bc99e4c39d 100644 --- a/packages/blocks/src/database-block/common/literal/define.ts +++ b/packages/blocks/src/database-block/data-view/common/literal/define.ts @@ -1,11 +1,6 @@ import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; -import { - createPopup, - popMenu, -} from '../../../_common/components/menu/index.js'; -import { createUniComponentFromWebComponent } from '../../../_common/components/uni-component/uni-component.js'; import { tBoolean, tDate, @@ -14,6 +9,8 @@ import { tTag, } from '../../logical/data-type.js'; import { isTArray, tArray } from '../../logical/typesystem.js'; +import { createPopup, popMenu } from '../../utils/menu/index.js'; +import { createUniComponentFromWebComponent } from '../../utils/uni-component/uni-component.js'; import { literalMatcher } from './matcher.js'; import { DateLiteral } from './renderer/date-literal.js'; import { diff --git a/packages/blocks/src/database-block/common/literal/matcher.ts b/packages/blocks/src/database-block/data-view/common/literal/matcher.ts similarity index 85% rename from packages/blocks/src/database-block/common/literal/matcher.ts rename to packages/blocks/src/database-block/data-view/common/literal/matcher.ts index f4844f0278da..ee300e7d3c50 100644 --- a/packages/blocks/src/database-block/common/literal/matcher.ts +++ b/packages/blocks/src/database-block/data-view/common/literal/matcher.ts @@ -1,9 +1,11 @@ import { type ReferenceElement } from '@floating-ui/dom'; -import type { UniComponent } from '../../../_common/components/uni-component/uni-component.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; import { Matcher } from '../../logical/matcher.js'; import type { TType } from '../../logical/typesystem.js'; +import { + renderUniLit, + type UniComponent, +} from '../../utils/uni-component/uni-component.js'; export const renderLiteral = ( type: TType, diff --git a/packages/blocks/src/database-block/common/literal/renderer/array-literal.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/array-literal.ts similarity index 100% rename from packages/blocks/src/database-block/common/literal/renderer/array-literal.ts rename to packages/blocks/src/database-block/data-view/common/literal/renderer/array-literal.ts diff --git a/packages/blocks/src/database-block/common/literal/renderer/date-literal.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/date-literal.ts similarity index 100% rename from packages/blocks/src/database-block/common/literal/renderer/date-literal.ts rename to packages/blocks/src/database-block/data-view/common/literal/renderer/date-literal.ts diff --git a/packages/blocks/src/database-block/common/literal/renderer/literal-element.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/literal-element.ts similarity index 100% rename from packages/blocks/src/database-block/common/literal/renderer/literal-element.ts rename to packages/blocks/src/database-block/data-view/common/literal/renderer/literal-element.ts diff --git a/packages/blocks/src/database-block/common/literal/renderer/tag-literal.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/tag-literal.ts similarity index 100% rename from packages/blocks/src/database-block/common/literal/renderer/tag-literal.ts rename to packages/blocks/src/database-block/data-view/common/literal/renderer/tag-literal.ts diff --git a/packages/blocks/src/database-block/common/literal/renderer/union-string.ts b/packages/blocks/src/database-block/data-view/common/literal/renderer/union-string.ts similarity index 100% rename from packages/blocks/src/database-block/common/literal/renderer/union-string.ts rename to packages/blocks/src/database-block/data-view/common/literal/renderer/union-string.ts diff --git a/packages/blocks/src/database-block/common/popup.ts b/packages/blocks/src/database-block/data-view/common/popup.ts similarity index 100% rename from packages/blocks/src/database-block/common/popup.ts rename to packages/blocks/src/database-block/data-view/common/popup.ts diff --git a/packages/blocks/src/database-block/common/properties.ts b/packages/blocks/src/database-block/data-view/common/properties.ts similarity index 98% rename from packages/blocks/src/database-block/common/properties.ts rename to packages/blocks/src/database-block/data-view/common/properties.ts index f9c651788705..a231c180fbab 100644 --- a/packages/blocks/src/database-block/common/properties.ts +++ b/packages/blocks/src/database-block/data-view/common/properties.ts @@ -6,12 +6,12 @@ import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; import Sortable from 'sortablejs'; -import { createPopup } from '../../_common/components/menu/index.js'; -import { ArrowLeftBigIcon } from '../../_common/icons/index.js'; +import { ArrowLeftBigIcon } from '../../../_common/icons/index.js'; +import { createPopup } from '../utils/menu/index.js'; import type { DataViewColumnManager, DataViewManager, -} from './data-view-manager.js'; +} from '../view/data-view-manager.js'; const show = html` +): GroupBy | undefined => { + const name = groupByMatcher.match(columnMeta.model.dataType(data))?.name; + return name != null + ? { + type: 'groupBy', + columnId: columnId, + name: name, + } + : undefined; +}; diff --git a/packages/blocks/src/database-block/common/view-source.ts b/packages/blocks/src/database-block/data-view/common/view-source.ts similarity index 83% rename from packages/blocks/src/database-block/common/view-source.ts rename to packages/blocks/src/database-block/data-view/common/view-source.ts index 4aa62ebb86f2..ea60318ba60d 100644 --- a/packages/blocks/src/database-block/common/view-source.ts +++ b/packages/blocks/src/database-block/data-view/common/view-source.ts @@ -1,7 +1,11 @@ import type { Slot } from '@blocksuite/global/utils'; import type { InsertToPosition } from '../types.js'; -import type { DataViewDataType, DataViewTypes } from './data-view.js'; +import type { + DataViewDataType, + DataViewTypes, + ViewMeta, +} from '../view/data-view.js'; export interface SingleViewSource< View extends DataViewDataType = DataViewDataType, @@ -20,6 +24,8 @@ export interface SingleViewSource< } export interface ViewSource { + allViewMeta: ViewMeta[]; + getViewMeta(type: string): ViewMeta; get readonly(): boolean; get currentViewId(): string; get currentView(): SingleViewSource; diff --git a/packages/blocks/src/database-block/data-view/components.ts b/packages/blocks/src/database-block/data-view/components.ts new file mode 100644 index 000000000000..a781d3588234 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/components.ts @@ -0,0 +1 @@ +import './data-view.js'; diff --git a/packages/blocks/src/database-block/data-view.ts b/packages/blocks/src/database-block/data-view/data-view.ts similarity index 71% rename from packages/blocks/src/database-block/data-view.ts rename to packages/blocks/src/database-block/data-view/data-view.ts index 97c653535ba4..ec56deaf8241 100644 --- a/packages/blocks/src/database-block/data-view.ts +++ b/packages/blocks/src/database-block/data-view/data-view.ts @@ -1,7 +1,4 @@ -import './table/define.js'; -import './table/renderer.js'; -import './kanban/define.js'; -import './kanban/renderer.js'; +import './common/group-by/define.js'; import type { BlockStdScope } from '@blocksuite/block-std'; import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; @@ -11,50 +8,29 @@ import { css, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { keyed } from 'lit/directives/keyed.js'; -import { createRef } from 'lit/directives/ref.js'; +import { createRef, ref } from 'lit/directives/ref.js'; import { html } from 'lit/static-html.js'; -import { renderUniLit } from '../_common/components/uni-component/uni-component.js'; -import type { - DataViewSelection, - DataViewSelectionState, -} from '../_common/utils/index.js'; -import type { BaseDataView } from './common/base-data-view.js'; import { dataViewCommonStyle } from './common/css-variable.js'; -import type { - DataViewExpose, - DataViewProps, - DataViewTypes, -} from './common/data-view.js'; -import { viewRendererManager } from './common/data-view.js'; -import type { DataViewManager } from './common/data-view-manager.js'; -import type { DataSource } from './common/datasource/base.js'; +import type { DataSource } from './common/data-source/base.js'; import { popSideDetail } from './common/detail/layout.js'; -import type { SingleViewSource, ViewSource } from './common/view-source.js'; -import { DataViewKanbanManager } from './kanban/kanban-view-manager.js'; -import { DataViewTableManager } from './table/table-view-manager.js'; +import type { ViewSource } from './common/index.js'; +import type { DataViewSelection, DataViewSelectionState } from './types.js'; +import { renderUniLit } from './utils/uni-component/index.js'; +import type { DataViewExpose, DataViewProps } from './view/data-view.js'; +import type { DataViewBase } from './view/data-view-base.js'; +import type { DataViewManager } from './view/data-view-manager.js'; type ViewProps = { view: DataViewManager; viewUpdated: Slot; selectionUpdated: Slot; setSelection: (selection?: DataViewSelectionState) => void; - bindHotkey: BaseDataView['bindHotkey']; - handleEvent: BaseDataView['handleEvent']; -}; -const ViewManagerMap: Record< - DataViewTypes, - new ( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - viewSource: SingleViewSource, - dataSource: DataSource - ) => DataViewManager -> = { - table: DataViewTableManager, - kanban: DataViewKanbanManager, + bindHotkey: DataViewBase['bindHotkey']; + handleEvent: DataViewBase['handleEvent']; }; -export type DataViewNativeConfig = { +export type DataViewRendererConfig = { bindHotkey: DataViewProps['bindHotkey']; handleEvent: DataViewProps['handleEvent']; getFlag?: DataViewProps['getFlag']; @@ -65,22 +41,22 @@ export type DataViewNativeConfig = { detailPanelConfig?: { target?: () => ReferenceElement; }; - headerComponent: DataViewProps['header']; + headerWidget: DataViewProps['headerWidget']; onDrag?: DataViewProps['onDrag']; std: BlockStdScope; }; -@customElement('affine-data-view-native') -export class DataViewNative extends WithDisposable(ShadowlessElement) { +@customElement('affine-data-view-renderer') +export class DataViewRenderer extends WithDisposable(ShadowlessElement) { static override styles = css` - ${unsafeCSS(dataViewCommonStyle('affine-data-view-native'))} - affine-data-view-native { + ${unsafeCSS(dataViewCommonStyle('affine-data-view-renderer'))} + affine-data-view-renderer { background-color: var(--affine-background-primary-color); display: contents; } `; @property({ attribute: false }) - config!: DataViewNativeConfig; + config!: DataViewRendererConfig; public get expose() { return this._view.value; @@ -124,10 +100,10 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) { if (!this.viewMap[id]) { const singleViewSource = this.config.viewSource.viewGet(id); - const view = new ViewManagerMap[singleViewSource.view.mode]( - singleViewSource, - this.config.dataSource - ); + const view = new (this.config.viewSource.getViewMeta( + singleViewSource.view.mode + ).model.dataViewManager)(); + view.init(this.config.dataSource, singleViewSource); this.viewMap[id] = { view: view, viewUpdated: singleViewSource.updateSlot, @@ -180,7 +156,7 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) { const props: DataViewProps = { dataViewEle: this, view: viewData.view, - header: this.config.headerComponent, + headerWidget: this.config.headerWidget, selectionUpdated: viewData.selectionUpdated, setSelection: viewData.setSelection, bindHotkey: viewData.bindHotkey, @@ -188,11 +164,13 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) { getFlag: this.config.getFlag, onDrag: this.config.onDrag, std: this.config.std, + viewSource: this.config.viewSource, + dataSource: this.config.dataSource, }; return keyed( viewData.view.id, renderUniLit( - viewRendererManager.getView(viewData.view.type).view, + this.config.viewSource.getViewMeta(viewData.view.type).renderer.view, props, { ref: this._view } ) @@ -218,6 +196,21 @@ export class DataViewNative extends WithDisposable(ShadowlessElement) { declare global { interface HTMLElementTagNameMap { - 'affine-data-view-native': DataViewNative; + 'affine-data-view-renderer': DataViewRenderer; + } +} + +export class DataView { + private _ref = createRef(); + + public get expose() { + return this._ref.value?.expose; + } + + render(props: DataViewRendererConfig) { + return html` `; } } diff --git a/packages/blocks/src/database-block/data-view/index.ts b/packages/blocks/src/database-block/data-view/index.ts new file mode 100644 index 000000000000..84c30a22cee2 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/index.ts @@ -0,0 +1,24 @@ +export type { ColumnMeta } from './column/column-config.js'; +export { ColumnConfig } from './column/index.js'; +export { columnPresets } from './column/presets/index.js'; +export type { DetailSlots } from './common/data-source/base.js'; +export { + BaseDataSource, + type DatabaseBlockDataSourceConfig, +} from './common/data-source/base.js'; +export type { ViewSource } from './common/index.js'; +export { DatabaseSelection } from './common/selection.js'; +export { DataView } from './data-view.js'; +export type { InsertToPosition } from './types.js'; +export type { DataViewSelection } from './types.js'; +export { popMenu } from './utils/index.js'; +export { insertPositionToIndex } from './utils/insert.js'; +export { renderUniLit } from './utils/uni-component/index.js'; +export { createUniComponentFromWebComponent } from './utils/uni-component/index.js'; +export { defineUniComponent } from './utils/uni-component/index.js'; +export type { DataViewExpose, DataViewProps } from './view/data-view.js'; +export type { ViewMeta } from './view/data-view.js'; +export { viewPresets } from './view/index.js'; +export type { StatCalcOpType } from './view/presets/table/types.js'; +export { widgetPresets } from './widget/index.js'; +export type { DataViewWidget, DataViewWidgetProps } from './widget/types.js'; diff --git a/packages/blocks/src/database-block/logical/data-type.ts b/packages/blocks/src/database-block/data-view/logical/data-type.ts similarity index 92% rename from packages/blocks/src/database-block/logical/data-type.ts rename to packages/blocks/src/database-block/data-view/logical/data-type.ts index 2ea6921c6869..2aaf1428488f 100644 --- a/packages/blocks/src/database-block/logical/data-type.ts +++ b/packages/blocks/src/database-block/data-view/logical/data-type.ts @@ -1,4 +1,4 @@ -import type { SelectTag } from '../../_common/components/tags/multi-tag-select.js'; +import type { SelectTag } from '../utils/tags/multi-tag-select.js'; import { typesystem } from './typesystem.js'; export const tNumber = typesystem.defineData<{ value: number }>({ diff --git a/packages/blocks/src/database-block/logical/eval-filter.ts b/packages/blocks/src/database-block/data-view/logical/eval-filter.ts similarity index 96% rename from packages/blocks/src/database-block/logical/eval-filter.ts rename to packages/blocks/src/database-block/data-view/logical/eval-filter.ts index ff5fe82b678e..6d798a774f9f 100644 --- a/packages/blocks/src/database-block/logical/eval-filter.ts +++ b/packages/blocks/src/database-block/data-view/logical/eval-filter.ts @@ -1,5 +1,5 @@ import type { Filter, Value, VariableOrProperty } from '../common/ast.js'; -import { filterMatcher } from '../common/filter/matcher/matcher.js'; +import { filterMatcher } from '../widget/filter/matcher/matcher.js'; import { propertyMatcher } from './property-matcher.js'; const evalRef = ( diff --git a/packages/blocks/src/database-block/logical/matcher.ts b/packages/blocks/src/database-block/data-view/logical/matcher.ts similarity index 100% rename from packages/blocks/src/database-block/logical/matcher.ts rename to packages/blocks/src/database-block/data-view/logical/matcher.ts diff --git a/packages/blocks/src/database-block/logical/property-matcher.ts b/packages/blocks/src/database-block/data-view/logical/property-matcher.ts similarity index 100% rename from packages/blocks/src/database-block/logical/property-matcher.ts rename to packages/blocks/src/database-block/data-view/logical/property-matcher.ts diff --git a/packages/blocks/src/database-block/logical/typesystem.ts b/packages/blocks/src/database-block/data-view/logical/typesystem.ts similarity index 100% rename from packages/blocks/src/database-block/logical/typesystem.ts rename to packages/blocks/src/database-block/data-view/logical/typesystem.ts diff --git a/packages/blocks/src/database-block/data-view/types.ts b/packages/blocks/src/database-block/data-view/types.ts new file mode 100644 index 000000000000..335298f0430f --- /dev/null +++ b/packages/blocks/src/database-block/data-view/types.ts @@ -0,0 +1,25 @@ +import type { KanbanViewSelectionWithType } from './view/presets/kanban/types.js'; +import type { TableViewSelection } from './view/presets/table/types.js'; + +export type DataViewSelection = + | TableViewSelection + | KanbanViewSelectionWithType; +export type GetDataViewSelection< + K extends DataViewSelection['type'], + T = DataViewSelection, +> = T extends { + type: K; +} + ? T + : never; +export type DataViewSelectionState = DataViewSelection | undefined; +export type InsertToPosition = + | 'end' + | 'start' + | { + id: string; + before: boolean; + }; +export type ColumnDataUpdater< + Data extends Record = Record, +> = (data: Data) => Partial; diff --git a/packages/blocks/src/database-block/utils/drag.ts b/packages/blocks/src/database-block/data-view/utils/drag.ts similarity index 100% rename from packages/blocks/src/database-block/utils/drag.ts rename to packages/blocks/src/database-block/data-view/utils/drag.ts diff --git a/packages/blocks/src/database-block/data-view/utils/event.ts b/packages/blocks/src/database-block/data-view/utils/event.ts new file mode 100644 index 000000000000..ab7001f33733 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/utils/event.ts @@ -0,0 +1,3 @@ +export function stopPropagation(event: Event) { + event.stopPropagation(); +} diff --git a/packages/blocks/src/database-block/utils/frame-loop.ts b/packages/blocks/src/database-block/data-view/utils/frame-loop.ts similarity index 100% rename from packages/blocks/src/database-block/utils/frame-loop.ts rename to packages/blocks/src/database-block/data-view/utils/frame-loop.ts diff --git a/packages/blocks/src/database-block/data-view/utils/index.ts b/packages/blocks/src/database-block/data-view/utils/index.ts new file mode 100644 index 000000000000..f15384a062f1 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/utils/index.ts @@ -0,0 +1 @@ +export * from './menu/index.js'; diff --git a/packages/blocks/src/database-block/utils/insert.ts b/packages/blocks/src/database-block/data-view/utils/insert.ts similarity index 100% rename from packages/blocks/src/database-block/utils/insert.ts rename to packages/blocks/src/database-block/data-view/utils/insert.ts diff --git a/packages/blocks/src/_common/components/menu/index.ts b/packages/blocks/src/database-block/data-view/utils/menu/index.ts similarity index 100% rename from packages/blocks/src/_common/components/menu/index.ts rename to packages/blocks/src/database-block/data-view/utils/menu/index.ts diff --git a/packages/blocks/src/_common/components/menu/menu.ts b/packages/blocks/src/database-block/data-view/utils/menu/menu.ts similarity index 98% rename from packages/blocks/src/_common/components/menu/menu.ts rename to packages/blocks/src/database-block/data-view/utils/menu/menu.ts index bdf67e35f749..3dd7ccf4ad77 100644 --- a/packages/blocks/src/_common/components/menu/menu.ts +++ b/packages/blocks/src/database-block/data-view/utils/menu/menu.ts @@ -21,12 +21,13 @@ import { createRef, ref } from 'lit/directives/ref.js'; import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { ArrowRightSmallIcon, DoneIcon } from '../../../_common/icons/index.js'; -import { rangeWrap } from '../../../_common/utils/math.js'; +import { ArrowRightSmallIcon } from '../../../../_common/icons/index.js'; +import { rangeWrap } from '../../../../_common/utils/math.js'; import { checkboxChecked, checkboxUnchecked, -} from '../../../list-block/utils/icons.js'; +} from '../../../../list-block/utils/icons.js'; +import { DoneIcon } from '../../common/icons/index.js'; type MenuCommon = { hide?: () => boolean; diff --git a/packages/blocks/src/_common/components/menu/title.ts b/packages/blocks/src/database-block/data-view/utils/menu/title.ts similarity index 93% rename from packages/blocks/src/_common/components/menu/title.ts rename to packages/blocks/src/database-block/data-view/utils/menu/title.ts index e90394c27513..32a0c6f9b438 100644 --- a/packages/blocks/src/_common/components/menu/title.ts +++ b/packages/blocks/src/database-block/data-view/utils/menu/title.ts @@ -1,7 +1,7 @@ import type { TemplateResult } from 'lit'; import { html } from 'lit'; -import { ArrowLeftBigIcon } from '../../../_common/icons/index.js'; +import { ArrowLeftBigIcon } from '../../common/icons/index.js'; import type { Menu } from './menu.js'; export const menuTitleItem = ( diff --git a/packages/blocks/src/_common/components/tags/colors.ts b/packages/blocks/src/database-block/data-view/utils/tags/colors.ts similarity index 100% rename from packages/blocks/src/_common/components/tags/colors.ts rename to packages/blocks/src/database-block/data-view/utils/tags/colors.ts diff --git a/packages/blocks/src/_common/components/tags/multi-tag-select.ts b/packages/blocks/src/database-block/data-view/utils/tags/multi-tag-select.ts similarity index 98% rename from packages/blocks/src/_common/components/tags/multi-tag-select.ts rename to packages/blocks/src/database-block/data-view/utils/tags/multi-tag-select.ts index 4da6205adef8..979fa87f3db6 100644 --- a/packages/blocks/src/_common/components/tags/multi-tag-select.ts +++ b/packages/blocks/src/database-block/data-view/utils/tags/multi-tag-select.ts @@ -8,14 +8,14 @@ import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; +import { rangeWrap } from '../../../../_common/utils/math.js'; import { DatabaseSearchClose, DeleteIcon, MoreHorizontalIcon, PlusIcon, -} from '../../../_common/icons/index.js'; -import { rangeWrap } from '../../../_common/utils/math.js'; -import { stopPropagation } from '../../utils/event.js'; +} from '../../common/icons/index.js'; +import { stopPropagation } from '../event.js'; import { createPopup, popMenu } from '../menu/menu.js'; import { getTagColor, selectOptionColors } from './colors.js'; import { styles } from './styles.js'; diff --git a/packages/blocks/src/_common/components/tags/multi-tag-view.ts b/packages/blocks/src/database-block/data-view/utils/tags/multi-tag-view.ts similarity index 100% rename from packages/blocks/src/_common/components/tags/multi-tag-view.ts rename to packages/blocks/src/database-block/data-view/utils/tags/multi-tag-view.ts diff --git a/packages/blocks/src/_common/components/tags/styles.ts b/packages/blocks/src/database-block/data-view/utils/tags/styles.ts similarity index 100% rename from packages/blocks/src/_common/components/tags/styles.ts rename to packages/blocks/src/database-block/data-view/utils/tags/styles.ts diff --git a/packages/blocks/src/database-block/data-view/utils/uni-component/index.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/index.ts new file mode 100644 index 000000000000..a74a554b3b63 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/utils/uni-component/index.ts @@ -0,0 +1 @@ +export * from './uni-component.js'; diff --git a/packages/blocks/src/_common/components/uni-component/operation.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/operation.ts similarity index 100% rename from packages/blocks/src/_common/components/uni-component/operation.ts rename to packages/blocks/src/database-block/data-view/utils/uni-component/operation.ts diff --git a/packages/blocks/src/_common/components/uni-component/render-template.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/render-template.ts similarity index 100% rename from packages/blocks/src/_common/components/uni-component/render-template.ts rename to packages/blocks/src/database-block/data-view/utils/uni-component/render-template.ts diff --git a/packages/blocks/src/_common/components/uni-component/uni-component.ts b/packages/blocks/src/database-block/data-view/utils/uni-component/uni-component.ts similarity index 100% rename from packages/blocks/src/_common/components/uni-component/uni-component.ts rename to packages/blocks/src/database-block/data-view/utils/uni-component/uni-component.ts diff --git a/packages/blocks/src/database-block/data-view/utils/uni-icon.ts b/packages/blocks/src/database-block/data-view/utils/uni-icon.ts new file mode 100644 index 000000000000..dfd28ae93224 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/utils/uni-icon.ts @@ -0,0 +1,11 @@ +import { AffineLitIcon } from '../common/icons/icon.js'; +import type * as icons from '../common/icons/index.js'; +import { map } from './uni-component/operation.js'; +import { createUniComponentFromWebComponent } from './uni-component/uni-component.js'; + +const litIcon = createUniComponentFromWebComponent<{ name: string }>( + AffineLitIcon +); +export const createIcon = (name: keyof typeof icons) => { + return map(litIcon, () => ({ name })); +}; diff --git a/packages/blocks/src/database-block/utils/utils.ts b/packages/blocks/src/database-block/data-view/utils/utils.ts similarity index 100% rename from packages/blocks/src/database-block/utils/utils.ts rename to packages/blocks/src/database-block/data-view/utils/utils.ts diff --git a/packages/blocks/src/database-block/common/base-data-view.ts b/packages/blocks/src/database-block/data-view/view/data-view-base.ts similarity index 75% rename from packages/blocks/src/database-block/common/base-data-view.ts rename to packages/blocks/src/database-block/data-view/view/data-view-base.ts index 16d40b47b3a8..9a1189815e4b 100644 --- a/packages/blocks/src/database-block/common/base-data-view.ts +++ b/packages/blocks/src/database-block/data-view/view/data-view-base.ts @@ -8,14 +8,15 @@ import type { Disposable, Slot } from '@blocksuite/global/utils'; import type { Doc } from '@blocksuite/store'; import { property } from 'lit/decorators.js'; -import type { UniComponent } from '../../_common/components/uni-component/uni-component.js'; -import type { DataViewSelection } from '../../_common/utils/index.js'; -import type { DataViewNative } from '../data-view.js'; -import type { InsertToPosition } from '../types.js'; +import type { DataSource } from '../common/data-source/base.js'; +import type { ViewSource } from '../common/index.js'; +import type { DataViewRenderer } from '../data-view.js'; +import type { DataViewSelection, InsertToPosition } from '../types.js'; +import type { DataViewWidget } from '../widget/types.js'; import type { DataViewExpose, DataViewProps } from './data-view.js'; import type { DataViewManager } from './data-view-manager.js'; -export abstract class BaseDataView< +export abstract class DataViewBase< T extends DataViewManager = DataViewManager, Selection extends DataViewSelection = DataViewSelection, > @@ -26,12 +27,17 @@ export abstract class BaseDataView< std!: BlockStdScope; @property({ attribute: false }) - header!: UniComponent<{ viewMethods: DataViewExpose; view: T }>; + headerWidget!: DataViewWidget; @property({ attribute: false }) - dataViewEle!: DataViewNative; + dataViewEle!: DataViewRenderer; + @property({ attribute: false }) view!: T; + @property({ attribute: false }) + viewSource!: ViewSource; + @property({ attribute: false }) + dataSource!: DataSource; @property({ attribute: false }) bindHotkey!: (hotkeys: Record) => Disposable; diff --git a/packages/blocks/src/database-block/common/data-view-manager.ts b/packages/blocks/src/database-block/data-view/view/data-view-manager.ts similarity index 83% rename from packages/blocks/src/database-block/common/data-view-manager.ts rename to packages/blocks/src/database-block/data-view/view/data-view-manager.ts index 5b4820a481cc..68810a98d07a 100644 --- a/packages/blocks/src/database-block/common/data-view-manager.ts +++ b/packages/blocks/src/database-block/data-view/view/data-view-manager.ts @@ -1,23 +1,17 @@ -import type { Disposable } from '@blocksuite/global/utils'; -import { Slot } from '@blocksuite/global/utils'; - -import type { UniComponent } from '../../_common/components/uni-component/uni-component.js'; +import { assertExists, type Disposable, Slot } from '@blocksuite/global/utils'; + +import { type ColumnMeta } from '../column/column-config.js'; +import type { ColumnConfig } from '../column/index.js'; +import { type CellRenderer } from '../column/index.js'; +import type { FilterGroup, Variable } from '../common/ast.js'; +import type { DataSource, DetailSlots } from '../common/data-source/base.js'; +import { ColumnDataStats } from '../common/data-stats.js'; +import type { SingleViewSource } from '../common/index.js'; import type { TType } from '../logical/typesystem.js'; -import type { - ColumnDataUpdater, - InsertToPosition, - StatCalcOpType, -} from '../types.js'; -import type { FilterGroup, Variable } from './ast.js'; -import type { - CellRenderer, - ColumnConfig, - ColumnConfigManager, -} from './columns/manager.js'; -import { columnManager } from './columns/manager.js'; -import { columnRenderer } from './columns/renderer.js'; -import { ColumnDataStats } from './data-stats.js'; -import type { DataSource, DetailSlots } from './datasource/base.js'; +import type { ColumnDataUpdater, InsertToPosition } from '../types.js'; +import type { UniComponent } from '../utils/uni-component/index.js'; +import type { DataViewDataType } from './data-view.js'; +import type { StatCalcOpType } from './presets/table/types.js'; export interface DataViewManager { get id(): string; @@ -80,6 +74,8 @@ export interface DataViewManager { columnGet(columnId: string): DataViewColumnManager; + columnGetMeta(type: string): ColumnMeta; + columnGetPreColumn(columnId: string): DataViewColumnManager | undefined; columnGetNextColumn(columnId: string): DataViewColumnManager | undefined; @@ -114,8 +110,6 @@ export interface DataViewManager { get allColumnConfig(): ColumnConfig[]; - get columnConfigManager(): ColumnConfigManager; - getIcon(type: string): UniComponent | undefined; /** @@ -208,7 +202,20 @@ export interface DataViewColumnManager< captureSync(): void; } -export abstract class BaseDataViewManager implements DataViewManager { +export abstract class DataViewManagerBase + implements DataViewManager +{ + protected get dataSource(): DataSource { + assertExists(this._dataSource, 'data source is not set'); + return this._dataSource; + } + protected get viewSource(): SingleViewSource { + assertExists(this._viewSource, 'view source is not set'); + return this._viewSource; + } + private _viewSource?: SingleViewSource; + private _dataSource?: DataSource; + private searchString = ''; private _filterVisible?: boolean; @@ -216,8 +223,11 @@ export abstract class BaseDataViewManager implements DataViewManager { return this.filteredRows(this.searchString); } - protected constructor(protected dataSource: DataSource) { - this.dataSource.slots.update.pipe(this.slots.update); + init(dataSource: DataSource, viewSource: SingleViewSource) { + this._dataSource = dataSource; + this._viewSource = viewSource; + this._dataSource.slots.update.pipe(this.slots.update); + this._viewSource.updateSlot.pipe(this.slots.update); } setSearch(str: string): void { @@ -266,18 +276,18 @@ export abstract class BaseDataViewManager implements DataViewManager { } public cellGetValue(rowId: string, columnId: string): unknown { - return columnManager - .getColumn(this.columnGetType(columnId)) - .formatValue( + return this.dataSource + .getPropertyMeta(this.columnGetType(columnId)) + .model.formatValue( this.dataSource.cellGetValue(rowId, columnId), this.columnGetData(columnId) ); } public cellGetJsonValue(rowId: string, columnId: string): unknown { - return columnManager - .getColumn(this.columnGetType(columnId)) - .toJson( + return this.dataSource + .getPropertyMeta(this.columnGetType(columnId)) + .model.toJson( this.dataSource.cellGetValue(rowId, columnId), this.columnGetData(columnId) ); @@ -289,9 +299,9 @@ export abstract class BaseDataViewManager implements DataViewManager { public cellGetStringValue(rowId: string, columnId: string): string { return ( - columnManager - .getColumn(this.columnGetType(columnId)) - .toString( + this.dataSource + .getPropertyMeta(this.columnGetType(columnId)) + .model.toString( this.dataSource.cellGetValue(rowId, columnId), this.columnGetData(columnId) ) ?? '' @@ -304,9 +314,9 @@ export abstract class BaseDataViewManager implements DataViewManager { public cellSetValueFromString(columnId: string, cellData: string) { return ( - columnManager - .getColumn(this.columnGetType(columnId)) - .fromString(cellData, this.columnGetData(columnId)) ?? '' + this.dataSource + .getPropertyMeta(this.columnGetType(columnId)) + .model.fromString(cellData, this.columnGetData(columnId)) ?? '' ); } @@ -346,14 +356,18 @@ export abstract class BaseDataViewManager implements DataViewManager { public abstract columnGet(columnId: string): DataViewColumnManager; + public columnGetMeta(type: string): ColumnMeta { + return this.dataSource.getPropertyMeta(type); + } + public columnGetData(columnId: string): Record { return this.dataSource.propertyGetData(columnId); } public columnGetDataType(columnId: string): TType { - return columnManager - .getColumn(this.columnGetType(columnId)) - .dataType(this.columnGetData(columnId)); + return this.dataSource + .getPropertyMeta(this.columnGetType(columnId)) + .model.dataType(this.columnGetData(columnId)); } public abstract columnGetHide(columnId: string): boolean; @@ -445,12 +459,8 @@ export abstract class BaseDataViewManager implements DataViewManager { return this.dataSource.allPropertyConfig; } - public get columnConfigManager(): ColumnConfigManager { - return this.dataSource.columnConfigManager; - } - public getIcon(type: string): UniComponent | undefined { - return columnRenderer.get(type).icon; + return this.dataSource.getPropertyMeta(type).renderer.icon; } abstract columnMove(columnId: string, position: InsertToPosition): void; @@ -470,10 +480,11 @@ export abstract class BaseDataViewManager implements DataViewManager { get vars(): Variable[] { return this.columnsWithoutFilter.map(id => { const v = this.columnGet(id); + const propertyMeta = this.dataSource.getPropertyMeta(v.type); return { id: v.id, name: v.name, - type: columnManager.getColumn(v.type).dataType(v.data), + type: propertyMeta.model.dataType(v.data), icon: v.icon, }; }); @@ -495,7 +506,7 @@ export abstract class BaseDataViewManager implements DataViewManager { public abstract duplicateView(): void; } -export abstract class BaseDataViewColumnManager +export abstract class DataViewColumnManagerBase implements DataViewColumnManager { public readonly stats = new ColumnDataStats(this); @@ -541,11 +552,14 @@ export abstract class BaseDataViewColumnManager } get renderer(): CellRenderer { - return columnRenderer.get(this.type).cellRenderer; + return this.dataViewManager.columnGetMeta(this.type).renderer.cellRenderer; } get detailRenderer(): CellRenderer { - return columnRenderer.get(this.type).detailCellRenderer ?? this.renderer; + return ( + this.dataViewManager.columnGetMeta(this.type).renderer + .detailCellRenderer ?? this.renderer + ); } get type(): string { @@ -553,7 +567,7 @@ export abstract class BaseDataViewColumnManager } get dataType(): TType { - return columnManager.getColumn(this.type).dataType(this.data); + return this.dataViewManager.columnGetDataType(this.id); } getValue(rowId: string): unknown | undefined { diff --git a/packages/blocks/src/database-block/common/data-view.ts b/packages/blocks/src/database-block/data-view/view/data-view.ts similarity index 51% rename from packages/blocks/src/database-block/common/data-view.ts rename to packages/blocks/src/database-block/data-view/view/data-view.ts index 19683e05ec56..f9acae144c34 100644 --- a/packages/blocks/src/database-block/common/data-view.ts +++ b/packages/blocks/src/database-block/data-view/view/data-view.ts @@ -6,26 +6,28 @@ import type { import type { Disposable, Slot } from '@blocksuite/global/utils'; import type { Doc } from '@blocksuite/store'; -import type { UniComponent } from '../../_common/components/uni-component/uni-component.js'; -import type { DataViewSelection } from '../../_common/utils/index.js'; -import type { DataViewNative } from '../data-view.js'; -import type { DatabaseBlockModel } from '../database-model.js'; -import type { InsertToPosition } from '../types.js'; -import type { DataViewManager } from './data-view-manager.js'; - -export type DataViewHeaderComponentProp< - T extends DataViewManager = DataViewManager, -> = UniComponent<{ viewMethods: DataViewExpose; view: T }>; +import type { DatabaseBlockModel } from '../../database-model.js'; +import type { ColumnMeta } from '../column/column-config.js'; +import type { DataSource } from '../common/data-source/base.js'; +import type { ViewSource } from '../common/index.js'; +import type { DataViewRenderer } from '../data-view.js'; +import type { DataViewSelection, InsertToPosition } from '../types.js'; +import type { UniComponent } from '../utils/uni-component/index.js'; +import type { DataViewWidget } from '../widget/types.js'; +import type { DataViewManagerBase } from './data-view-manager.js'; +import { type DataViewManager } from './data-view-manager.js'; export interface DataViewProps< T extends DataViewManager = DataViewManager, Selection extends DataViewSelection = DataViewSelection, > { - dataViewEle: DataViewNative; + dataViewEle: DataViewRenderer; - header?: DataViewHeaderComponentProp; + headerWidget?: DataViewWidget; view: T; + viewSource: ViewSource; + dataSource: DataSource; bindHotkey: (hotkeys: Record) => Disposable; @@ -60,76 +62,74 @@ declare global { // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface DataViewDataTypeMap {} } -type CommonViewDataType = { +export type BasicViewDataType< + Type extends string = string, + T = NonNullable, +> = { id: string; name: string; + mode: Type; +} & T; +export type _DataViewDataTypeMap = { + [K in keyof DataViewDataTypeMap]: BasicViewDataType< + Extract, + DataViewDataTypeMap[K] + >; }; -export type RealDataViewDataTypeMap = { - [K in keyof DataViewDataTypeMap]: DataViewDataTypeMap[K] & - CommonViewDataType & { - mode: K; - }; -}; -export type DefaultViewDataType = CommonViewDataType & { mode: string }; +export type DefaultViewDataType = BasicViewDataType & { mode: string }; type FallBack = [T] extends [never] ? DefaultViewDataType : T; export type DataViewDataType = FallBack< - RealDataViewDataTypeMap[keyof RealDataViewDataTypeMap] + _DataViewDataTypeMap[keyof _DataViewDataTypeMap] >; -export type DataViewTypes = DataViewDataType['mode']; - +export type DataViewTypes = keyof DataViewDataTypeMap; export interface DataViewConfig< Data extends DataViewDataType = DataViewDataType, > { - type: DataViewTypes; defaultName: string; - - init(model: DatabaseBlockModel, id: string, name: string): Data; + dataViewManager: new () => DataViewManagerBase; + init( + columnMetaMap: Record, + model: DatabaseBlockModel, + id: string, + name: string + ): Data; } export type DataViewToolsProps< Manager extends DataViewManager = DataViewManager, > = { view: Manager; - viewMethod: DataViewExpose; + viewMethods: DataViewExpose; }; -export interface DataViewRendererConfig< - _Data extends DataViewDataType = DataViewDataType, -> { - type: DataViewTypes; +export interface DataViewRendererConfig { view: UniComponent; icon: UniComponent; - tools?: UniComponent[]; } -export class ViewManager { +export type ViewMeta< + Type extends string = DataViewTypes, // eslint-disable-next-line @typescript-eslint/no-explicit-any - private map = new Map(); - - getView(type: string): DataViewConfig { - const view = this.map.get(type); - if (!view) { - throw new Error(`${type} is not exist`); - } - return view; - } - - register( - type: Type, - config: Omit, 'type'> - ) { - this.map.set(type, { - ...config, + Data extends DataViewDataType = any, +> = { + type: Type; + model: DataViewConfig; + renderer: DataViewRendererConfig; +}; +export const viewType = (type: Type) => ({ + type, + modelConfig: ( + model: DataViewConfig + ) => ({ + type, + model, + rendererConfig: (renderer: DataViewRendererConfig) => ({ type, - }); - } - - get all() { - return Array.from(this.map.values()); - } -} - -export const viewManager = new ViewManager(); + model, + renderer, + }), + }), +}); export class ViewRendererManager { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -143,16 +143,6 @@ export class ViewRendererManager { return view; } - register( - type: Type, - config: Omit, 'type'> - ) { - this.map.set(type, { - ...config, - type, - }); - } - get all() { return Array.from(this.map.values()); } diff --git a/packages/blocks/src/database-block/data-view/view/index.ts b/packages/blocks/src/database-block/data-view/view/index.ts new file mode 100644 index 000000000000..eb63f99a68c1 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/view/index.ts @@ -0,0 +1,7 @@ +import { kanbanViewConfig } from './presets/kanban/renderer.js'; +import { tableViewConfig } from './presets/table/renderer.js'; + +export const viewPresets = { + tableViewConfig, + kanbanViewConfig, +}; diff --git a/packages/blocks/src/database-block/kanban/card.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/card.ts similarity index 96% rename from packages/blocks/src/database-block/kanban/card.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/card.ts index 121386570ef7..12c2b2613060 100644 --- a/packages/blocks/src/database-block/kanban/card.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/card.ts @@ -7,9 +7,10 @@ import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; import { html } from 'lit/static-html.js'; -import { positionToVRect } from '../../_common/components/menu/index.js'; -import { MoreHorizontalIcon, NewEditIcon } from '../../_common/icons/index.js'; -import type { DataViewNative } from '../data-view.js'; +import { NewEditIcon } from '../../../../../_common/icons/index.js'; +import { MoreHorizontalIcon } from '../../../common/icons/index.js'; +import type { DataViewRenderer } from '../../../data-view.js'; +import { positionToVRect } from '../../../utils/menu/index.js'; import type { DataViewKanbanColumnManager, DataViewKanbanManager, @@ -122,7 +123,7 @@ export class KanbanCard extends WithDisposable(ShadowlessElement) { static override styles = styles; @property({ attribute: false }) - dataViewEle!: DataViewNative; + dataViewEle!: DataViewRenderer; @property({ attribute: false }) view!: DataViewKanbanManager; @property({ attribute: false }) diff --git a/packages/blocks/src/database-block/kanban/cell.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/cell.ts similarity index 96% rename from packages/blocks/src/database-block/kanban/cell.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/cell.ts index 65db6e31378c..e47af82ef383 100644 --- a/packages/blocks/src/database-block/kanban/cell.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/cell.ts @@ -6,11 +6,11 @@ import { customElement, property, state } from 'lit/decorators.js'; import { createRef } from 'lit/directives/ref.js'; import { html } from 'lit/static-html.js'; -import { renderUniLit } from '../../_common/components/uni-component/uni-component.js'; import type { CellRenderProps, DataViewCellLifeCycle, -} from '../common/columns/manager.js'; +} from '../../../column/index.js'; +import { renderUniLit } from '../../../utils/uni-component/uni-component.js'; import type { DataViewKanbanColumnManager, DataViewKanbanManager, diff --git a/packages/blocks/src/database-block/kanban/controller/clipboard.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/clipboard.ts similarity index 93% rename from packages/blocks/src/database-block/kanban/controller/clipboard.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/clipboard.ts index fa5ab73e46b3..b8784ae09c1a 100644 --- a/packages/blocks/src/database-block/kanban/controller/clipboard.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/clipboard.ts @@ -1,8 +1,8 @@ import type { UIEventStateContext } from '@blocksuite/block-std'; import type { ReactiveController } from 'lit'; -import type { KanbanViewSelectionWithType } from '../../../_common/utils/index.js'; import type { DataViewKanban } from '../kanban-view.js'; +import type { KanbanViewSelectionWithType } from '../types.js'; export class KanbanClipboardController implements ReactiveController { constructor(public host: DataViewKanban) { diff --git a/packages/blocks/src/database-block/kanban/controller/drag.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/drag.ts similarity index 96% rename from packages/blocks/src/database-block/kanban/controller/drag.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/drag.ts index 4c499f9cbeb7..e85d1b77ec4d 100644 --- a/packages/blocks/src/database-block/kanban/controller/drag.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/drag.ts @@ -1,12 +1,10 @@ -// related component - import { assertExists } from '@blocksuite/global/utils'; import type { ReactiveController } from 'lit'; -import { Point, Rect } from '../../../_common/utils/index.js'; -import type { InsertToPosition } from '../../types.js'; -import { startDrag } from '../../utils/drag.js'; -import { autoScrollOnBoundary } from '../../utils/frame-loop.js'; +import { Point, Rect } from '../../../../../../_common/utils/index.js'; +import type { InsertToPosition } from '../../../../types.js'; +import { startDrag } from '../../../../utils/drag.js'; +import { autoScrollOnBoundary } from '../../../../utils/frame-loop.js'; import { KanbanCard } from '../card.js'; import { KanbanGroup } from '../group.js'; import type { DataViewKanban } from '../kanban-view.js'; diff --git a/packages/blocks/src/database-block/kanban/controller/hotkeys.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/hotkeys.ts similarity index 100% rename from packages/blocks/src/database-block/kanban/controller/hotkeys.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/hotkeys.ts diff --git a/packages/blocks/src/database-block/kanban/controller/selection.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/selection.ts similarity index 99% rename from packages/blocks/src/database-block/kanban/controller/selection.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/controller/selection.ts index 4cca5f6d9b19..51236cd4b47d 100644 --- a/packages/blocks/src/database-block/kanban/controller/selection.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/controller/selection.ts @@ -1,6 +1,10 @@ import { assertExists } from '@blocksuite/global/utils'; import type { ReactiveController } from 'lit'; +import { KanbanCard } from '../card.js'; +import { KanbanCell } from '../cell.js'; +import type { KanbanGroup } from '../group.js'; +import type { DataViewKanban } from '../kanban-view.js'; import type { KanbanCardSelection, KanbanCardSelectionCard, @@ -8,11 +12,7 @@ import type { KanbanGroupSelection, KanbanViewSelection, KanbanViewSelectionWithType, -} from '../../../_common/utils/index.js'; -import { KanbanCard } from '../card.js'; -import { KanbanCell } from '../cell.js'; -import type { KanbanGroup } from '../group.js'; -import type { DataViewKanban } from '../kanban-view.js'; +} from '../types.js'; export class KanbanSelectionController implements ReactiveController { constructor(private host: DataViewKanban) { diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/define.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/define.ts new file mode 100644 index 000000000000..a200a4b3deb6 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/define.ts @@ -0,0 +1,97 @@ +import { multiSelectColumnModelConfig } from '../../../column/presets/multi-select/define.js'; +import { numberColumnModelConfig } from '../../../column/presets/number/define.js'; +import { selectColumnModelConfig } from '../../../column/presets/select/define.js'; +import { textColumnModelConfig } from '../../../column/presets/text/define.js'; +import type { FilterGroup } from '../../../common/ast.js'; +import { groupByMatcher } from '../../../common/group-by/matcher.js'; +import type { GroupBy, GroupProperty, Sort } from '../../../common/types.js'; +import { defaultGroupBy } from '../../../common/view-manager.js'; +import { type BasicViewDataType, viewType } from '../../data-view.js'; +import type { Column } from '../table/types.js'; +import { DataViewKanbanManager } from './kanban-view-manager.js'; + +export const kanbanViewType = viewType('kanban'); + +declare global { + interface DataViewDataTypeMap { + kanban: DataType; + } +} +export type KanbanViewColumn = { + id: string; + hide?: boolean; +}; + +type DataType = { + columns: KanbanViewColumn[]; + filter: FilterGroup; + groupBy?: GroupBy; + sort?: Sort; + header: { + titleColumn?: string; + iconColumn?: string; + coverColumn?: string; + }; + groupProperties: GroupProperty[]; +}; +export type KanbanViewData = BasicViewDataType< + typeof kanbanViewType.type, + DataType +>; +export const kanbanViewModel = kanbanViewType.modelConfig({ + defaultName: 'Kanban View', + dataViewManager: DataViewKanbanManager, + init(columnMetaMap, model, id, name) { + const allowList = model.columns.filter(column => { + const type = columnMetaMap[column.type].model.dataType(column.data); + return !!groupByMatcher.match(type) && column.type !== 'title'; + }); + const getWeight = (column: Column) => { + if ( + [ + selectColumnModelConfig.type as string, + multiSelectColumnModelConfig.type, + ].includes(column.type) + ) { + return 3; + } + if ( + [ + numberColumnModelConfig.type as string, + textColumnModelConfig.type, + ].includes(column.type) + ) { + return 2; + } + return 1; + }; + const column = allowList.sort((a, b) => getWeight(b) - getWeight(a))[0]; + if (!column) { + throw new Error('not implement yet'); + } + return { + id, + name, + mode: 'kanban', + columns: model.columns.map(v => ({ + id: v.id, + hide: false, + })), + filter: { + type: 'group', + op: 'and', + conditions: [], + }, + groupBy: defaultGroupBy( + columnMetaMap[column.type], + column.id, + column.data + ), + header: { + titleColumn: model.columns.find(v => v.type === 'title')?.id, + iconColumn: 'type', + }, + groupProperties: [], + }; + }, +}); diff --git a/packages/blocks/src/database-block/kanban/group.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/group.ts similarity index 93% rename from packages/blocks/src/database-block/kanban/group.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/group.ts index bbc703b21895..66c9435b3241 100644 --- a/packages/blocks/src/database-block/kanban/group.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/group.ts @@ -6,11 +6,11 @@ import { customElement, property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; import { html } from 'lit/static-html.js'; -import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js'; -import { AddCursorIcon } from '../../_common/icons/index.js'; -import { GroupTitle } from '../common/group-by/group-title.js'; -import type { GroupData } from '../common/group-by/helper.js'; -import type { DataViewNative } from '../data-view.js'; +import { AddCursorIcon } from '../../../../../_common/icons/index.js'; +import { GroupTitle } from '../../../common/group-by/group-title.js'; +import type { GroupData } from '../../../common/group-by/helper.js'; +import type { DataViewRenderer } from '../../../data-view.js'; +import { popFilterableSimpleMenu } from '../../../utils/menu/index.js'; import type { DataViewKanbanManager } from './kanban-view-manager.js'; const styles = css` @@ -98,7 +98,7 @@ export class KanbanGroup extends WithDisposable(ShadowlessElement) { static override styles = styles; @property({ attribute: false }) - dataViewEle!: DataViewNative; + dataViewEle!: DataViewRenderer; @property({ attribute: false }) view!: DataViewKanbanManager; @property({ attribute: false }) diff --git a/packages/blocks/src/database-block/kanban/header.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/header.ts similarity index 96% rename from packages/blocks/src/database-block/kanban/header.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/header.ts index 494853406433..567580eeedbb 100644 --- a/packages/blocks/src/database-block/kanban/header.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/header.ts @@ -5,7 +5,7 @@ import { css } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import { popMenu } from '../../_common/components/menu/index.js'; +import { popMenu } from '../../../utils/menu/index.js'; import type { DataViewKanbanManager } from './kanban-view-manager.js'; const styles = css` diff --git a/packages/blocks/src/database-block/kanban/kanban-view-manager.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts similarity index 81% rename from packages/blocks/src/database-block/kanban/kanban-view-manager.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts index a130900d3513..17cefaa6e3e7 100644 --- a/packages/blocks/src/database-block/kanban/kanban-view-manager.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view-manager.ts @@ -1,38 +1,26 @@ -import type { FilterGroup } from '../common/ast.js'; -import type { CellRenderer } from '../common/columns/manager.js'; -import type { RealDataViewDataTypeMap } from '../common/data-view.js'; +import type { FilterGroup } from '../../../common/ast.js'; import { - BaseDataViewColumnManager, - BaseDataViewManager, -} from '../common/data-view-manager.js'; -import type { DataSource } from '../common/datasource/base.js'; -import { GroupHelper, sortByManually } from '../common/group-by/helper.js'; -import { groupByMatcher } from '../common/group-by/matcher.js'; -import { defaultGroupBy } from '../common/group-by/util.js'; -import type { SingleViewSource } from '../common/view-source.js'; -import { evalFilter } from '../logical/eval-filter.js'; -import type { TType } from '../logical/typesystem.js'; -import type { InsertToPosition } from '../types.js'; -import { insertPositionToIndex } from '../utils/insert.js'; -import { headerRenderer } from './header-cell.js'; - -type KanbanViewData = RealDataViewDataTypeMap['kanban']; - -export class DataViewKanbanManager extends BaseDataViewManager { - private readonly updateView: ( - updater: (view: KanbanViewData) => Partial - ) => void; + GroupHelper, + sortByManually, +} from '../../../common/group-by/helper.js'; +import { groupByMatcher } from '../../../common/group-by/matcher.js'; +import { defaultGroupBy } from '../../../common/view-manager.js'; +import { evalFilter } from '../../../logical/eval-filter.js'; +import type { TType } from '../../../logical/typesystem.js'; +import type { InsertToPosition } from '../../../types.js'; +import { insertPositionToIndex } from '../../../utils/insert.js'; +import { + DataViewColumnManagerBase, + DataViewManagerBase, +} from '../../data-view-manager.js'; +import type { KanbanViewData } from './define.js'; - constructor( - private viewSource: SingleViewSource, - dataSource: DataSource +export class DataViewKanbanManager extends DataViewManagerBase { + private updateView( + updater: (view: KanbanViewData) => Partial ) { - super(dataSource); - this.updateView = updater => { - this.syncView(); - viewSource.updateView(updater); - }; - viewSource.updateSlot.pipe(this.slots.update); + this.syncView(); + this.viewSource.updateView(updater); } get view() { @@ -159,7 +147,11 @@ export class DataViewKanbanManager extends BaseDataViewManager { const column = this.columnGet(columnId); this.updateView(_view => { return { - groupBy: defaultGroupBy(column.id, column.type, column.data), + groupBy: defaultGroupBy( + this.columnGetMeta(column.type), + column.id, + column.data + ), }; }); } @@ -331,18 +323,11 @@ export class DataViewKanbanManager extends BaseDataViewManager { } } -export class DataViewKanbanColumnManager extends BaseDataViewColumnManager { +export class DataViewKanbanColumnManager extends DataViewColumnManagerBase { constructor( propertyId: string, override dataViewManager: DataViewKanbanManager ) { super(propertyId, dataViewManager); } - - public override get renderer(): CellRenderer { - if (this.id === this.dataViewManager.header.titleColumn) { - return headerRenderer; - } - return super.renderer; - } } diff --git a/packages/blocks/src/database-block/kanban/kanban-view.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts similarity index 90% rename from packages/blocks/src/database-block/kanban/kanban-view.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts index a490f8d46c89..6f01ffa55808 100644 --- a/packages/blocks/src/database-block/kanban/kanban-view.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/kanban-view.ts @@ -1,7 +1,7 @@ import './group.js'; import './header.js'; import './controller/drag.js'; -import '../common/group-by/define.js'; +import '../../../common/group-by/define.js'; import { css } from 'lit'; import { customElement, query } from 'lit/decorators.js'; @@ -9,18 +9,18 @@ import { repeat } from 'lit/directives/repeat.js'; import { html } from 'lit/static-html.js'; import Sortable from 'sortablejs'; -import { popMenu } from '../../_common/components/menu/index.js'; -import { renderUniLit } from '../../_common/components/uni-component/uni-component.js'; -import { AddCursorIcon } from '../../_common/icons/index.js'; -import type { KanbanViewSelectionWithType } from '../../_common/utils/index.js'; -import { BaseDataView } from '../common/base-data-view.js'; -import type { GroupHelper } from '../common/group-by/helper.js'; +import { AddCursorIcon } from '../../../../../_common/icons/index.js'; +import type { GroupHelper } from '../../../common/group-by/helper.js'; +import { popMenu } from '../../../utils/menu/index.js'; +import { renderUniLit } from '../../../utils/uni-component/uni-component.js'; +import { DataViewBase } from '../../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'; import { KanbanGroup } from './group.js'; import type { DataViewKanbanManager } from './kanban-view-manager.js'; +import type { KanbanViewSelectionWithType } from './types.js'; const styles = css` affine-data-view-kanban { @@ -93,7 +93,7 @@ const styles = css` `; @customElement('affine-data-view-kanban') -export class DataViewKanban extends BaseDataView< +export class DataViewKanban extends DataViewBase< DataViewKanbanManager, KanbanViewSelectionWithType > { @@ -202,7 +202,12 @@ export class DataViewKanban extends BaseDataView< } return html` - ${renderUniLit(this.header, { view: this.view, viewMethods: this })} + ${renderUniLit(this.headerWidget, { + view: this.view, + viewMethods: this, + viewSource: this.viewSource, + dataSource: this.dataSource, + })}
${repeat( groups, diff --git a/packages/blocks/src/database-block/kanban/menu.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/menu.ts similarity index 91% rename from packages/blocks/src/database-block/kanban/menu.ts rename to packages/blocks/src/database-block/data-view/view/presets/kanban/menu.ts index 21acb462fc15..b547fde1060c 100644 --- a/packages/blocks/src/database-block/kanban/menu.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/menu.ts @@ -1,19 +1,19 @@ import type { ReferenceElement } from '@floating-ui/dom'; import { html } from 'lit'; -import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js'; import { ArrowRightBigIcon, - DeleteIcon, ExpandFullIcon, MoveLeftIcon, MoveRightIcon, -} from '../../_common/icons/index.js'; -import type { DataViewNative } from '../data-view.js'; +} from '../../../../../_common/icons/index.js'; +import { DeleteIcon } from '../../../common/icons/index.js'; +import type { DataViewRenderer } from '../../../data-view.js'; +import { popFilterableSimpleMenu } from '../../../utils/menu/index.js'; import type { KanbanSelectionController } from './controller/selection.js'; export const openDetail = ( - dataViewEle: DataViewNative, + dataViewEle: DataViewRenderer, rowId: string, selection: KanbanSelectionController ) => { @@ -29,7 +29,7 @@ export const openDetail = ( }; export const popCardMenu = ( - dataViewEle: DataViewNative, + dataViewEle: DataViewRenderer, ele: ReferenceElement, rowId: string, selection: KanbanSelectionController diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts new file mode 100644 index 000000000000..f6a507eaa6eb --- /dev/null +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/renderer.ts @@ -0,0 +1,9 @@ +import { createUniComponentFromWebComponent } from '../../../utils/uni-component/index.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { kanbanViewModel } from './define.js'; +import { DataViewKanban } from './kanban-view.js'; + +export const kanbanViewConfig = kanbanViewModel.rendererConfig({ + icon: createIcon('DatabaseKanbanViewIcon'), + view: createUniComponentFromWebComponent(DataViewKanban), +}); diff --git a/packages/blocks/src/database-block/data-view/view/presets/kanban/types.ts b/packages/blocks/src/database-block/data-view/view/presets/kanban/types.ts new file mode 100644 index 000000000000..f79dbdcf5139 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/view/presets/kanban/types.ts @@ -0,0 +1,32 @@ +type WithKanbanViewType = T extends unknown + ? { + viewId: string; + type: 'kanban'; + } & T + : never; + +export type KanbanCellSelection = { + selectionType: 'cell'; + groupKey: string; + cardId: string; + columnId: string; + isEditing: boolean; +}; +export type KanbanCardSelectionCard = { + groupKey: string; + cardId: string; +}; +export type KanbanCardSelection = { + selectionType: 'card'; + cards: [KanbanCardSelectionCard, ...KanbanCardSelectionCard[]]; +}; +export type KanbanGroupSelection = { + selectionType: 'group'; + groupKeys: [string, ...string[]]; +}; +export type KanbanViewSelection = + | KanbanCellSelection + | KanbanCardSelection + | KanbanGroupSelection; +export type KanbanViewSelectionWithType = + WithKanbanViewType; diff --git a/packages/blocks/src/database-block/table/components/cell-container.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/cell-container.ts similarity index 93% rename from packages/blocks/src/database-block/table/components/cell-container.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/cell-container.ts index 02ccae87ee82..742cc9feeaf0 100644 --- a/packages/blocks/src/database-block/table/components/cell-container.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/cell-container.ts @@ -4,12 +4,12 @@ import { css } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { createRef } from 'lit/directives/ref.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; import type { CellRenderProps, DataViewCellLifeCycle, -} from '../../common/columns/manager.js'; -import type { DataViewManager } from '../../common/data-view-manager.js'; +} from '../../../../column/index.js'; +import { renderUniLit } from '../../../../utils/uni-component/index.js'; +import type { DataViewManager } from '../../../data-view-manager.js'; import type { DataViewTableColumnManager } from '../table-view-manager.js'; @customElement('affine-database-cell-container') diff --git a/packages/blocks/src/database-block/table/components/column-header/column-header.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-header.ts similarity index 95% rename from packages/blocks/src/database-block/table/components/column-header/column-header.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-header.ts index 94a2713eed58..c54edd28d486 100644 --- a/packages/blocks/src/database-block/table/components/column-header/column-header.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-header.ts @@ -9,8 +9,8 @@ import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; -import { renderTemplate } from '../../../../_common/components/uni-component/render-template.js'; -import { AddCursorIcon } from '../../../../_common/icons/index.js'; +import { AddCursorIcon } from '../../../../../../../_common/icons/index.js'; +import { renderTemplate } from '../../../../../utils/uni-component/render-template.js'; import type { DataViewTableManager } from '../../table-view-manager.js'; import { styles } from './styles.js'; @@ -62,7 +62,7 @@ export class DatabaseColumnHeader extends WithDisposable(ShadowlessElement) { this.addColumnButton.style.marginLeft = '20px'; this.addColumnButton.style.position = 'absolute'; this.addColumnButton.style.zIndex = '1'; - this.closest('affine-data-view-native')?.append(this.addColumnButton); + this.closest('affine-data-view-renderer')?.append(this.addColumnButton); requestAnimationFrame(() => { const referenceEl = this.addColumnPositionRef.value; if (!referenceEl) { diff --git a/packages/blocks/src/database-block/table/components/column-header/column-renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-renderer.ts similarity index 97% rename from packages/blocks/src/database-block/table/components/column-header/column-renderer.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-renderer.ts index ed03e12f7a84..3bf04c55c81f 100644 --- a/packages/blocks/src/database-block/table/components/column-header/column-renderer.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/column-renderer.ts @@ -5,7 +5,7 @@ import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; -import type { DataViewColumnManager } from '../../../common/data-view-manager.js'; +import type { DataViewColumnManager } from '../../../../data-view-manager.js'; import type { DataViewTableManager } from '../../table-view-manager.js'; @customElement('affine-data-view-column-preview') diff --git a/packages/blocks/src/database-block/table/components/column-header/database-header-column.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/database-header-column.ts similarity index 97% rename from packages/blocks/src/database-block/table/components/column-header/database-header-column.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/database-header-column.ts index e55d70e26748..d1c27e4e1be0 100644 --- a/packages/blocks/src/database-block/table/components/column-header/database-header-column.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/database-header-column.ts @@ -8,10 +8,6 @@ import { createRef, ref } from 'lit/directives/ref.js'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; -import { - popMenu, - positionToVRect, -} from '../../../../_common/components/menu/menu.js'; import { DatabaseDuplicate, DatabaseInsertLeft, @@ -20,12 +16,13 @@ import { DatabaseMoveRight, DeleteIcon, TextIcon, -} from '../../../../_common/icons/index.js'; -import type { InsertToPosition } from '../../../types.js'; -import { startDrag } from '../../../utils/drag.js'; -import { autoScrollOnBoundary } from '../../../utils/frame-loop.js'; -import { insertPositionToIndex } from '../../../utils/insert.js'; -import { getResultInRange } from '../../../utils/utils.js'; +} from '../../../../../common/icons/index.js'; +import type { InsertToPosition } from '../../../../../types.js'; +import { startDrag } from '../../../../../utils/drag.js'; +import { autoScrollOnBoundary } from '../../../../../utils/frame-loop.js'; +import { popMenu, positionToVRect } from '../../../../../utils/index.js'; +import { insertPositionToIndex } from '../../../../../utils/insert.js'; +import { getResultInRange } from '../../../../../utils/utils.js'; import { DEFAULT_COLUMN_TITLE_HEIGHT } from '../../consts.js'; import type { DataViewTableColumnManager, diff --git a/packages/blocks/src/database-block/table/components/column-header/styles.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/styles.ts similarity index 100% rename from packages/blocks/src/database-block/table/components/column-header/styles.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/styles.ts diff --git a/packages/blocks/src/database-block/table/components/column-header/vertical-indicator.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/vertical-indicator.ts similarity index 97% rename from packages/blocks/src/database-block/table/components/column-header/vertical-indicator.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/vertical-indicator.ts index a9a5a372c9ec..6d04a094f15e 100644 --- a/packages/blocks/src/database-block/table/components/column-header/vertical-indicator.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-header/vertical-indicator.ts @@ -5,8 +5,8 @@ import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { startDrag } from '../../../utils/drag.js'; -import { getResultInRange } from '../../../utils/utils.js'; +import { startDrag } from '../../../../../utils/drag.js'; +import { getResultInRange } from '../../../../../utils/utils.js'; import { DEFAULT_COLUMN_MIN_WIDTH } from '../../consts.js'; import type { DataViewTableColumnManager } from '../../table-view-manager.js'; diff --git a/packages/blocks/src/database-block/table/components/column-stats-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats-cell.ts similarity index 94% rename from packages/blocks/src/database-block/table/components/column-stats-cell.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats-cell.ts index fc9401116aab..b81eda1aa258 100644 --- a/packages/blocks/src/database-block/table/components/column-stats-cell.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats-cell.ts @@ -3,9 +3,9 @@ import { css, html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; -import { positionToVRect } from '../../../_common/components/menu/menu.js'; -import { ArrowDownIcon } from '../../../_common/icons/text.js'; -import { getRootByElement } from '../../../_common/utils/query.js'; +import { ArrowDownIcon } from '../../../../../../_common/icons/index.js'; +import { getRootByElement } from '../../../../../../_common/utils/index.js'; +import { positionToVRect } from '../../../../utils/index.js'; import { type ColumnDataType, getStatCalcOperationFromType, diff --git a/packages/blocks/src/database-block/table/components/column-stats.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats.ts similarity index 100% rename from packages/blocks/src/database-block/table/components/column-stats.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/column-stats.ts diff --git a/packages/blocks/src/database-block/table/components/header-cell.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts similarity index 57% rename from packages/blocks/src/database-block/table/components/header-cell.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts index 1c5cadc93bf6..bcb52669a952 100644 --- a/packages/blocks/src/database-block/table/components/header-cell.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/header-cell.ts @@ -1,10 +1,10 @@ -import { map } from '../../../_common/components/uni-component/operation.js'; -import type { CellRenderProps } from '../../common/columns/manager.js'; -import { createFromBaseCellRenderer } from '../../common/columns/renderer.js'; import { HeaderAreaTextCell, HeaderAreaTextCellEditing, -} from '../../common/header-area/text.js'; +} from '../../../../../columns/title/text.js'; +import type { CellRenderProps } from '../../../../column/index.js'; +import { createFromBaseCellRenderer } from '../../../../column/renderer.js'; +import { map } from '../../../../utils/uni-component/operation.js'; export const headerRenderer = { view: map( diff --git a/packages/blocks/src/database-block/table/components/menu.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/menu.ts similarity index 87% rename from packages/blocks/src/database-block/table/components/menu.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/menu.ts index 8ac3d18d2ac6..b1c8f56c54a9 100644 --- a/packages/blocks/src/database-block/table/components/menu.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/menu.ts @@ -2,18 +2,15 @@ import type { ReferenceElement } from '@floating-ui/dom'; import { html } from 'lit'; import { - type Menu, - popFilterableSimpleMenu, -} from '../../../_common/components/menu/index.js'; -import { - DeleteIcon, ExpandFullIcon, MoveLeftIcon, MoveRightIcon, -} from '../../../_common/icons/index.js'; -import type { RootBlockComponent } from '../../../root-block/types.js'; -import type { DataViewColumnManager } from '../../common/data-view-manager.js'; -import type { DataViewNative } from '../../data-view.js'; +} from '../../../../../../_common/icons/index.js'; +import type { RootBlockComponent } from '../../../../../../root-block/index.js'; +import { DeleteIcon } from '../../../../common/icons/index.js'; +import type { DataViewRenderer } from '../../../../data-view.js'; +import { type Menu, popFilterableSimpleMenu } from '../../../../utils/index.js'; +import type { DataViewColumnManager } from '../../../data-view-manager.js'; import type { TableSelectionController } from '../controller/selection.js'; import { checkboxCalcOps, @@ -24,7 +21,7 @@ import { } from '../stat-ops.js'; export const openDetail = ( - dataViewEle: DataViewNative, + dataViewEle: DataViewRenderer, rowId: string, selection: TableSelectionController ) => { @@ -40,7 +37,7 @@ export const openDetail = ( }; export const popRowMenu = ( - dataViewEle: DataViewNative, + dataViewEle: DataViewRenderer, ele: ReferenceElement, rowId: string, selection: TableSelectionController diff --git a/packages/blocks/src/database-block/table/components/row.ts b/packages/blocks/src/database-block/data-view/view/presets/table/components/row.ts similarity index 94% rename from packages/blocks/src/database-block/table/components/row.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/components/row.ts index 1d0983dfbafe..9c5422cfb3e3 100644 --- a/packages/blocks/src/database-block/table/components/row.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/components/row.ts @@ -5,15 +5,13 @@ import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; -import { positionToVRect } from '../../../_common/components/menu/index.js'; -import { - MoreHorizontalIcon, - NewEditIcon, -} from '../../../_common/icons/index.js'; -import { type TableViewSelection } from '../../../_common/utils/index.js'; -import type { DataViewNative } from '../../data-view.js'; +import { NewEditIcon } from '../../../../../../_common/icons/index.js'; +import { MoreHorizontalIcon } from '../../../../common/icons/index.js'; +import type { DataViewRenderer } from '../../../../data-view.js'; +import { eventToVRect } from '../../../../utils/index.js'; import { DEFAULT_COLUMN_MIN_WIDTH } from '../consts.js'; import type { DataViewTableManager } from '../table-view-manager.js'; +import type { TableViewSelection } from '../types.js'; import { openDetail, popRowMenu } from './menu.js'; @customElement('data-view-table-row') @@ -98,7 +96,7 @@ export class TableRow extends WithDisposable(ShadowlessElement) { return this.closest('affine-database-table')?.selectionController; } @property({ attribute: false }) - dataViewEle!: DataViewNative; + dataViewEle!: DataViewRenderer; @property({ attribute: false }) view!: DataViewTableManager; @property({ attribute: false }) @@ -136,12 +134,7 @@ export class TableRow extends WithDisposable(ShadowlessElement) { }, isEditing: false, }; - popRowMenu( - this.dataViewEle, - positionToVRect(e.x, e.y), - this.rowId, - selection - ); + popRowMenu(this.dataViewEle, eventToVRect(e), this.rowId, selection); }; public override connectedCallback() { diff --git a/packages/blocks/src/database-block/table/consts.ts b/packages/blocks/src/database-block/data-view/view/presets/table/consts.ts similarity index 100% rename from packages/blocks/src/database-block/table/consts.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/consts.ts diff --git a/packages/blocks/src/database-block/table/controller/clipboard.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/clipboard.ts similarity index 99% rename from packages/blocks/src/database-block/table/controller/clipboard.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/clipboard.ts index 7fa729b35557..d65a9e9c3bbc 100644 --- a/packages/blocks/src/database-block/table/controller/clipboard.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/controller/clipboard.ts @@ -3,10 +3,10 @@ import { assertExists } from '@blocksuite/global/utils'; import type { Y } from '@blocksuite/store'; import type { ReactiveController } from 'lit'; -import type { TableViewSelection } from '../../../_common/types.js'; import type { DatabaseCellContainer } from '../components/cell-container.js'; import type { DataViewTable } from '../table-view.js'; import type { DataViewTableManager } from '../table-view-manager.js'; +import type { TableViewSelection } from '../types.js'; const BLOCKSUITE_DATABASE = 'blocksuite/database'; const TEXT = 'text/plain'; diff --git a/packages/blocks/src/database-block/table/controller/drag.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/drag.ts similarity index 97% rename from packages/blocks/src/database-block/table/controller/drag.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/drag.ts index 2834510d9ccb..07ecb92cdc3c 100644 --- a/packages/blocks/src/database-block/table/controller/drag.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/controller/drag.ts @@ -2,8 +2,8 @@ import type { ReactiveController } from 'lit'; -import { type InsertToPosition } from '../../types.js'; -import { startDrag } from '../../utils/drag.js'; +import type { InsertToPosition } from '../../../../types.js'; +import { startDrag } from '../../../../utils/drag.js'; import { TableRow } from '../components/row.js'; import type { DataViewTable } from '../table-view.js'; diff --git a/packages/blocks/src/database-block/table/controller/hotkeys.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/hotkeys.ts similarity index 100% rename from packages/blocks/src/database-block/table/controller/hotkeys.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/hotkeys.ts diff --git a/packages/blocks/src/database-block/table/controller/selection.ts b/packages/blocks/src/database-block/data-view/view/presets/table/controller/selection.ts similarity index 99% rename from packages/blocks/src/database-block/table/controller/selection.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/controller/selection.ts index 3cf89392eb2f..eeb5c66d42b8 100644 --- a/packages/blocks/src/database-block/table/controller/selection.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/controller/selection.ts @@ -6,15 +6,15 @@ import { customElement } from 'lit/decorators.js'; import type { Ref } from 'lit/directives/ref.js'; import { createRef, ref } from 'lit/directives/ref.js'; +import { startDrag } from '../../../../utils/drag.js'; +import { autoScrollOnBoundary } from '../../../../utils/frame-loop.js'; +import type { DatabaseCellContainer } from '../components/cell-container.js'; +import type { DataViewTable } from '../table-view.js'; import type { CellFocus, MultiSelection, TableViewSelection, -} from '../../../_common/types.js'; -import { startDrag } from '../../utils/drag.js'; -import { autoScrollOnBoundary } from '../../utils/frame-loop.js'; -import type { DatabaseCellContainer } from '../components/cell-container.js'; -import type { DataViewTable } from '../table-view.js'; +} from '../types.js'; export class TableSelectionController implements ReactiveController { __selectionElement = new SelectionElement(); diff --git a/packages/blocks/src/database-block/table/define.ts b/packages/blocks/src/database-block/data-view/view/presets/table/define.ts similarity index 53% rename from packages/blocks/src/database-block/table/define.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/define.ts index 2ec70cc07737..07fa1ca8641b 100644 --- a/packages/blocks/src/database-block/table/define.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/define.ts @@ -1,10 +1,13 @@ -import type { FilterGroup } from '../common/ast.js'; -import { viewManager } from '../common/data-view.js'; -import type { GroupBy, GroupProperty, Sort } from '../common/types.js'; +import type { FilterGroup } from '../../../common/ast.js'; +import type { GroupBy, GroupProperty, Sort } from '../../../common/types.js'; +import { type BasicViewDataType, viewType } from '../../data-view.js'; +import { DataViewTableManager } from './table-view-manager.js'; + +export const tableViewType = viewType('table'); declare global { interface DataViewDataTypeMap { - table: TableViewData; + table: DataType; } } export type TableViewColumn = { @@ -12,7 +15,7 @@ export type TableViewColumn = { width: number; hide?: boolean; }; -export type TableViewData = { +type DataType = { columns: TableViewColumn[]; filter: FilterGroup; groupBy?: GroupBy; @@ -24,9 +27,14 @@ export type TableViewData = { imageColumn?: string; }; }; -viewManager.register('table', { +export type TableViewData = BasicViewDataType< + typeof tableViewType.type, + DataType +>; +export const tableViewModel = tableViewType.modelConfig({ defaultName: 'Table View', - init(model, id, name) { + dataViewManager: DataViewTableManager, + init(_columnMetaMap, model, id, name) { return { id, name, diff --git a/packages/blocks/src/database-block/table/group.ts b/packages/blocks/src/database-block/data-view/view/presets/table/group.ts similarity index 92% rename from packages/blocks/src/database-block/table/group.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/group.ts index e0373d48c312..795ef5fd4cfa 100644 --- a/packages/blocks/src/database-block/table/group.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/group.ts @@ -1,5 +1,5 @@ -import './components/column-stats.js'; -import './components/column-stats-cell.js'; +import './components/column-stats'; +import './components/column-stats-cell'; import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; import type { PropertyValues } from 'lit'; @@ -7,11 +7,11 @@ import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { popFilterableSimpleMenu } from '../../_common/components/menu/index.js'; -import { PlusIcon } from '../../_common/icons/index.js'; -import { GroupTitle } from '../common/group-by/group-title.js'; -import type { GroupData } from '../common/group-by/helper.js'; -import type { DataViewNative } from '../data-view.js'; +import { GroupTitle } from '../../../common/group-by/group-title.js'; +import type { GroupData } from '../../../common/group-by/helper.js'; +import { PlusIcon } from '../../../common/icons/index.js'; +import type { DataViewRenderer } from '../../../data-view.js'; +import { popFilterableSimpleMenu } from '../../../utils/index.js'; import { LEFT_TOOL_BAR_WIDTH } from './consts.js'; import type { DataViewTable } from './table-view.js'; import type { DataViewTableManager } from './table-view-manager.js'; @@ -57,7 +57,7 @@ export class TableGroup extends WithDisposable(ShadowlessElement) { static override styles = styles; @property({ attribute: false }) - dataViewEle!: DataViewNative; + dataViewEle!: DataViewRenderer; @property({ attribute: false }) view!: DataViewTableManager; @property({ attribute: false }) diff --git a/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts b/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts new file mode 100644 index 000000000000..b5a310e92de1 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/view/presets/table/renderer.ts @@ -0,0 +1,9 @@ +import { createUniComponentFromWebComponent } from '../../../utils/uni-component/index.js'; +import { createIcon } from '../../../utils/uni-icon.js'; +import { tableViewModel } from './define.js'; +import { DataViewTable } from './table-view.js'; + +export const tableViewConfig = tableViewModel.rendererConfig({ + view: createUniComponentFromWebComponent(DataViewTable), + icon: createIcon('DatabaseTableViewIcon'), +}); diff --git a/packages/blocks/src/database-block/table/stat-ops.ts b/packages/blocks/src/database-block/data-view/view/presets/table/stat-ops.ts similarity index 100% rename from packages/blocks/src/database-block/table/stat-ops.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/stat-ops.ts diff --git a/packages/blocks/src/database-block/table/table-view-manager.ts b/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts similarity index 82% rename from packages/blocks/src/database-block/table/table-view-manager.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts index a8ba8eef19c9..1b7104e1ca77 100644 --- a/packages/blocks/src/database-block/table/table-view-manager.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/table-view-manager.ts @@ -1,42 +1,30 @@ -import type { FilterGroup } from '../common/ast.js'; -import type { CellRenderer } from '../common/columns/manager.js'; -import type { RealDataViewDataTypeMap } from '../common/data-view.js'; +import type { FilterGroup } from '../../../common/ast.js'; import { - BaseDataViewColumnManager, - BaseDataViewManager, -} from '../common/data-view-manager.js'; -import type { DataSource } from '../common/datasource/base.js'; -import { GroupHelper, sortByManually } from '../common/group-by/helper.js'; -import { groupByMatcher } from '../common/group-by/matcher.js'; -import { defaultGroupBy } from '../common/group-by/util.js'; -import type { SingleViewSource } from '../common/view-source.js'; -import { evalFilter } from '../logical/eval-filter.js'; -import type { TType } from '../logical/typesystem.js'; -import type { InsertToPosition } from '../types.js'; -import { insertPositionToIndex } from '../utils/insert.js'; -import { headerRenderer } from './components/header-cell.js'; - -type TableViewData = RealDataViewDataTypeMap['table']; - -export class DataViewTableManager extends BaseDataViewManager { + GroupHelper, + sortByManually, +} from '../../../common/group-by/helper.js'; +import { groupByMatcher } from '../../../common/group-by/matcher.js'; +import { defaultGroupBy } from '../../../common/view-manager.js'; +import { evalFilter } from '../../../logical/eval-filter.js'; +import type { TType } from '../../../logical/typesystem.js'; +import type { InsertToPosition } from '../../../types.js'; +import { insertPositionToIndex } from '../../../utils/insert.js'; +import type { _DataViewDataTypeMap } from '../../data-view.js'; +import { + DataViewColumnManagerBase, + DataViewManagerBase, +} from '../../data-view-manager.js'; + +type TableViewData = _DataViewDataTypeMap['table']; + +export class DataViewTableManager extends DataViewManagerBase { public override get type(): string { return this.view.mode; } - private readonly updateView: ( - updater: (view: TableViewData) => Partial - ) => void; - - constructor( - private viewSource: SingleViewSource, - dataSource: DataSource - ) { - super(dataSource); - this.updateView = updater => { - this.syncView(); - viewSource.updateView(updater); - }; - viewSource.updateSlot.pipe(this.slots.update); + private updateView(updater: (view: TableViewData) => Partial) { + this.syncView(); + this.viewSource.updateView(updater); } get view() { @@ -255,7 +243,11 @@ export class DataViewTableManager extends BaseDataViewManager { const column = this.columnGet(columnId); this.updateView(_view => { return { - groupBy: defaultGroupBy(column.id, column.type, column.data), + groupBy: defaultGroupBy( + this.columnGetMeta(column.type), + column.id, + column.data + ), }; }); } @@ -349,7 +341,7 @@ export class DataViewTableManager extends BaseDataViewManager { } } -export class DataViewTableColumnManager extends BaseDataViewColumnManager { +export class DataViewTableColumnManager extends DataViewColumnManagerBase { constructor( propertyId: string, override dataViewManager: DataViewTableManager @@ -364,11 +356,4 @@ export class DataViewTableColumnManager extends BaseDataViewColumnManager { updateWidth(width: number): void { this.dataViewManager.columnUpdateWidth(this.id, width); } - - public override get renderer(): CellRenderer { - if (this.id === this.dataViewManager.header.titleColumn) { - return headerRenderer; - } - return super.renderer; - } } diff --git a/packages/blocks/src/database-block/table/table-view.ts b/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts similarity index 91% rename from packages/blocks/src/database-block/table/table-view.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts index 476b35e9a802..cccae05578f2 100644 --- a/packages/blocks/src/database-block/table/table-view.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/table-view.ts @@ -8,20 +8,20 @@ import { css } from 'lit'; import { customElement } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; -import { popMenu } from '../../_common/components/menu/index.js'; -import { renderUniLit } from '../../_common/components/uni-component/uni-component.js'; -import { AddCursorIcon } from '../../_common/icons/index.js'; -import type { TableViewSelection } from '../../_common/utils/index.js'; -import { BaseDataView } from '../common/base-data-view.js'; -import type { GroupHelper } from '../common/group-by/helper.js'; -import type { InsertToPosition } from '../types.js'; -import { insertPositionToIndex } from '../utils/insert.js'; +import { AddCursorIcon } from '../../../../../_common/icons/index.js'; +import type { GroupHelper } from '../../../common/group-by/helper.js'; +import type { InsertToPosition } from '../../../types.js'; +import { popMenu } from '../../../utils/index.js'; +import { insertPositionToIndex } from '../../../utils/insert.js'; +import { renderUniLit } from '../../../utils/uni-component/index.js'; +import { DataViewBase } from '../../data-view-base.js'; import { LEFT_TOOL_BAR_WIDTH } from './consts.js'; import { TableClipboardController } from './controller/clipboard.js'; import { TableDragController } from './controller/drag.js'; import { TableHotkeysController } from './controller/hotkeys.js'; import { TableSelectionController } from './controller/selection.js'; import type { DataViewTableManager } from './table-view-manager.js'; +import type { TableViewSelection } from './types.js'; const styles = css` affine-database-table { @@ -128,7 +128,7 @@ const styles = css` `; @customElement('affine-database-table') -export class DataViewTable extends BaseDataView< +export class DataViewTable extends DataViewBase< DataViewTableManager, TableViewSelection > { @@ -270,7 +270,12 @@ export class DataViewTable extends BaseDataView< override render() { return html` - ${renderUniLit(this.header, { view: this.view, viewMethods: this })} + ${renderUniLit(this.headerWidget, { + view: this.view, + viewMethods: this, + viewSource: this.viewSource, + dataSource: this.dataSource, + })}
diff --git a/packages/blocks/src/database-block/table/types.ts b/packages/blocks/src/database-block/data-view/view/presets/table/types.ts similarity index 78% rename from packages/blocks/src/database-block/table/types.ts rename to packages/blocks/src/database-block/data-view/view/presets/table/types.ts index 89c9d3866995..df073144f280 100644 --- a/packages/blocks/src/database-block/table/types.ts +++ b/packages/blocks/src/database-block/data-view/view/presets/table/types.ts @@ -56,3 +56,20 @@ export const getTableContainer = (ele: HTMLElement) => { assertExists(element); return element; }; +export type CellFocus = { + rowIndex: number; + columnIndex: number; +}; +export type MultiSelection = { + start: number; + end: number; +}; +export type TableViewSelection = { + viewId: string; + type: 'table'; + groupKey?: string; + rowsSelection?: MultiSelection; + columnsSelection?: MultiSelection; + focus: CellFocus; + isEditing: boolean; +}; diff --git a/packages/blocks/src/database-block/common/header/consts.ts b/packages/blocks/src/database-block/data-view/widget/consts.ts similarity index 100% rename from packages/blocks/src/database-block/common/header/consts.ts rename to packages/blocks/src/database-block/data-view/widget/consts.ts diff --git a/packages/blocks/src/database-block/common/filter/condition.ts b/packages/blocks/src/database-block/data-view/widget/filter/condition.ts similarity index 94% rename from packages/blocks/src/database-block/common/filter/condition.ts rename to packages/blocks/src/database-block/data-view/widget/filter/condition.ts index 354529059e6c..672a2632fd72 100644 --- a/packages/blocks/src/database-block/common/filter/condition.ts +++ b/packages/blocks/src/database-block/data-view/widget/filter/condition.ts @@ -1,5 +1,5 @@ -import '../ref/ref.js'; -import '../literal/define.js'; +import '../../common/ref/ref.js'; +import '../../common/literal/define.js'; import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; import type { ReferenceElement } from '@floating-ui/dom'; @@ -7,23 +7,23 @@ import { css, html, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { popFilterableSimpleMenu } from '../../../_common/components/menu/menu.js'; -import { CrossIcon } from '../../../_common/icons/index.js'; -import { tBoolean } from '../../logical/data-type.js'; -import { typesystem } from '../../logical/typesystem.js'; import type { FilterGroup, SingleFilter, Variable, VariableOrProperty, -} from '../ast.js'; +} from '../../common/ast.js'; import { firstFilter, firstFilterByRef, firstFilterInGroup, getRefType, -} from '../ast.js'; -import { popLiteralEdit, renderLiteral } from '../literal/matcher.js'; +} from '../../common/ast.js'; +import { CrossIcon } from '../../common/icons/index.js'; +import { popLiteralEdit, renderLiteral } from '../../common/literal/matcher.js'; +import { tBoolean } from '../../logical/data-type.js'; +import { typesystem } from '../../logical/typesystem.js'; +import { popFilterableSimpleMenu } from '../../utils/menu/index.js'; import { filterMatcher } from './matcher/matcher.js'; @customElement('filter-condition-view') diff --git a/packages/blocks/src/database-block/common/filter/filter-bar.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-bar.ts similarity index 88% rename from packages/blocks/src/database-block/common/filter/filter-bar.ts rename to packages/blocks/src/database-block/data-view/widget/filter/filter-bar.ts index 88392ee1b2d4..5c255f6ea539 100644 --- a/packages/blocks/src/database-block/common/filter/filter-bar.ts +++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-bar.ts @@ -3,19 +3,12 @@ import { css, html, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import { - createPopup, - eventToVRect, -} from '../../../_common/components/menu/index.js'; -import { renderTemplate } from '../../../_common/components/uni-component/render-template.js'; -import { - AddCursorIcon, - CrossIcon, - FilterIcon, -} from '../../../_common/icons/index.js'; -import type { Filter, FilterGroup, Variable } from '../ast.js'; -import type { DataViewManager } from '../data-view-manager.js'; -import { popCreateFilter } from '../ref/ref.js'; +import { AddCursorIcon } from '../../../../_common/icons/index.js'; +import type { Filter, FilterGroup, Variable } from '../../common/ast.js'; +import { CrossIcon, FilterIcon } from '../../common/icons/index.js'; +import { popCreateFilter } from '../../common/ref/ref.js'; +import { createPopup, eventToVRect } from '../../utils/menu/index.js'; +import { renderTemplate } from '../../utils/uni-component/render-template.js'; import { popFilterModal } from './filter-modal.js'; @customElement('filter-bar') @@ -217,13 +210,3 @@ declare global { 'filter-bar': FilterBar; } } -export const renderFilterBar = (view?: DataViewManager) => { - if (!view || !view.filterVisible) { - return; - } - return html``; -}; diff --git a/packages/blocks/src/database-block/common/filter/filter-group.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-group.ts similarity index 97% rename from packages/blocks/src/database-block/common/filter/filter-group.ts rename to packages/blocks/src/database-block/data-view/widget/filter/filter-group.ts index 87245402c187..85dd92eee888 100644 --- a/packages/blocks/src/database-block/common/filter/filter-group.ts +++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-group.ts @@ -8,20 +8,22 @@ import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; -import { - eventToVRect, - popFilterableSimpleMenu, -} from '../../../_common/components/menu/menu.js'; import { ArrowDownSmallIcon, + DuplicateIcon, +} from '../../../../_common/icons/index.js'; +import type { Filter, FilterGroup, Variable } from '../../common/ast.js'; +import { firstFilter } from '../../common/ast.js'; +import { ConvertIcon, DeleteIcon, - DuplicateIcon, MoreHorizontalIcon, PlusIcon, -} from '../../../_common/icons/index.js'; -import type { Filter, FilterGroup, Variable } from '../ast.js'; -import { firstFilter } from '../ast.js'; +} from '../../common/icons/index.js'; +import { + eventToVRect, + popFilterableSimpleMenu, +} from '../../utils/menu/index.js'; import { popAddNewFilter } from './condition.js'; @customElement('filter-group-view') diff --git a/packages/blocks/src/database-block/common/filter/filter-modal.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-modal.ts similarity index 97% rename from packages/blocks/src/database-block/common/filter/filter-modal.ts rename to packages/blocks/src/database-block/data-view/widget/filter/filter-modal.ts index 223d6a4c2ccf..fedcdda374af 100644 --- a/packages/blocks/src/database-block/common/filter/filter-modal.ts +++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-modal.ts @@ -6,8 +6,8 @@ import type { ReferenceElement } from '@floating-ui/dom'; import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { createPopup } from '../../../_common/components/menu/index.js'; -import type { FilterGroup, Variable } from '../ast.js'; +import type { FilterGroup, Variable } from '../../common/ast.js'; +import { createPopup } from '../../utils/menu/index.js'; @customElement('advanced-filter-modal') export class AdvancedFilterModal extends WithDisposable(ShadowlessElement) { diff --git a/packages/blocks/src/database-block/common/filter/filter-root.ts b/packages/blocks/src/database-block/data-view/widget/filter/filter-root.ts similarity index 96% rename from packages/blocks/src/database-block/common/filter/filter-root.ts rename to packages/blocks/src/database-block/data-view/widget/filter/filter-root.ts index 7d81db32f3fa..d98a40ea8b17 100644 --- a/packages/blocks/src/database-block/common/filter/filter-root.ts +++ b/packages/blocks/src/database-block/data-view/widget/filter/filter-root.ts @@ -7,20 +7,23 @@ import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; -import { - popFilterableSimpleMenu, - positionToVRect, -} from '../../../_common/components/menu/index.js'; -import { menuTitle } from '../../../_common/components/menu/title.js'; import { ArrowDownSmallIcon, + DuplicateIcon, +} from '../../../../_common/icons/index.js'; +import type { Filter, FilterGroup, Variable } from '../../common/ast.js'; +import { ConvertIcon, DeleteIcon, - DuplicateIcon, MoreHorizontalIcon, PlusIcon, -} from '../../../_common/icons/index.js'; -import type { Filter, FilterGroup, Variable } from '../ast.js'; +} from '../../common/icons/index.js'; +import { + eventToVRect, + popFilterableSimpleMenu, + positionToVRect, +} from '../../utils/menu/index.js'; +import { menuTitle } from '../../utils/menu/title.js'; import { popAddNewFilter } from './condition.js'; import type { FilterGroupView } from './filter-group.js'; import { getDepth } from './filter-group.js'; @@ -181,7 +184,7 @@ export class FilterRootView extends WithDisposable(ShadowlessElement) { }; private _addNew = (e: MouseEvent) => { - popAddNewFilter(positionToVRect(e.x, e.y), { + popAddNewFilter(eventToVRect(e), { value: this.data, onChange: this.setData, vars: this.vars, diff --git a/packages/blocks/src/database-block/data-view/widget/filter/index.ts b/packages/blocks/src/database-block/data-view/widget/filter/index.ts new file mode 100644 index 000000000000..231be2804a10 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/widget/filter/index.ts @@ -0,0 +1,18 @@ +import { html } from 'lit'; + +import { defineUniComponent } from '../../utils/uni-component/index.js'; +import type { DataViewWidgetProps } from '../types.js'; + +export const widgetFilterBar = defineUniComponent( + (props: DataViewWidgetProps) => { + const view = props.view; + if (!view.filterVisible) { + return html``; + } + return html``; + } +); diff --git a/packages/blocks/src/database-block/common/filter/matcher/boolean.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/boolean.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/boolean.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/boolean.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/date.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/date.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/date.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/date.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/matcher.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/matcher.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/matcher.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/matcher.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/multi-tag.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/multi-tag.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/multi-tag.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/multi-tag.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/number.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/number.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/number.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/number.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/string.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/string.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/string.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/string.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/tag.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/tag.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/tag.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/tag.ts diff --git a/packages/blocks/src/database-block/common/filter/matcher/unknown.ts b/packages/blocks/src/database-block/data-view/widget/filter/matcher/unknown.ts similarity index 100% rename from packages/blocks/src/database-block/common/filter/matcher/unknown.ts rename to packages/blocks/src/database-block/data-view/widget/filter/matcher/unknown.ts diff --git a/packages/blocks/src/database-block/data-view/widget/index.ts b/packages/blocks/src/database-block/data-view/widget/index.ts new file mode 100644 index 000000000000..c3fe5954fb5f --- /dev/null +++ b/packages/blocks/src/database-block/data-view/widget/index.ts @@ -0,0 +1,10 @@ +import { widgetFilterBar } from './filter/index.js'; +import { createWidgetTools, toolsWidgetPresets } from './tools/index.js'; +import { widgetViewsBar } from './views-bar/index.js'; + +export const widgetPresets = { + viewBar: widgetViewsBar, + filterBar: widgetFilterBar, + createTools: createWidgetTools, + tools: toolsWidgetPresets, +}; diff --git a/packages/blocks/src/database-block/data-view/widget/tools/index.ts b/packages/blocks/src/database-block/data-view/widget/tools/index.ts new file mode 100644 index 000000000000..cc114d961f12 --- /dev/null +++ b/packages/blocks/src/database-block/data-view/widget/tools/index.ts @@ -0,0 +1,30 @@ +import { ExpandDatabaseBlockModal } from '../../../widgets/expand/index.js'; +import { createUniComponentFromWebComponent } from '../../utils/uni-component/index.js'; +import { map } from '../../utils/uni-component/operation.js'; +import type { DataViewWidget, DataViewWidgetProps } from '../types.js'; +import { DataViewHeaderToolsFilter } from './presets/filter/filter.js'; +import { DataViewHeaderToolsSearch } from './presets/search/search.js'; +import { DataViewHeaderToolsAddRow } from './presets/table-add-row/add-row.js'; +import { DataViewHeaderToolsViewOptions } from './presets/view-options/view-options.js'; +import { DataViewHeaderTools } from './tools-renderer.js'; + +export const toolsWidgetPresets = { + filter: createUniComponentFromWebComponent(DataViewHeaderToolsFilter), + expand: createUniComponentFromWebComponent(ExpandDatabaseBlockModal), + search: createUniComponentFromWebComponent(DataViewHeaderToolsSearch), + viewOptions: createUniComponentFromWebComponent( + DataViewHeaderToolsViewOptions + ), + tableAddRow: createUniComponentFromWebComponent(DataViewHeaderToolsAddRow), +}; +export const createWidgetTools = ( + toolsMap: Record +) => { + return map( + createUniComponentFromWebComponent(DataViewHeaderTools), + (props: DataViewWidgetProps) => ({ + ...props, + toolsMap, + }) + ); +}; diff --git a/packages/blocks/src/database-block/common/header/tools/filter.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/filter/filter.ts similarity index 83% rename from packages/blocks/src/database-block/common/header/tools/filter.ts rename to packages/blocks/src/database-block/data-view/widget/tools/presets/filter/filter.ts index 48dc2d348e8f..906f389da369 100644 --- a/packages/blocks/src/database-block/common/header/tools/filter.ts +++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/filter/filter.ts @@ -1,13 +1,13 @@ -import '../../../common/filter/filter-group.js'; +import '../../../filter/filter-group.js'; import { css, html, nothing } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { eventToVRect } from '../../../../_common/components/menu/index.js'; -import { FilterIcon } from '../../../../_common/icons/index.js'; -import type { FilterGroup } from '../../../common/ast.js'; -import { popCreateFilter } from '../../../common/ref/ref.js'; -import { BaseTool } from './base-tool.js'; +import type { FilterGroup } from '../../../../common/ast.js'; +import { FilterIcon } from '../../../../common/icons/index.js'; +import { popCreateFilter } from '../../../../common/ref/ref.js'; +import { eventToVRect } from '../../../../utils/menu/index.js'; +import { WidgetBase } from '../../../widget-base.js'; const styles = css` .affine-database-filter-button { @@ -32,7 +32,7 @@ const styles = css` `; @customElement('data-view-header-tools-filter') -export class DataViewHeaderToolsFilter extends BaseTool { +export class DataViewHeaderToolsFilter extends WidgetBase { static override styles = styles; private get readonly() { diff --git a/packages/blocks/src/database-block/common/header/tools/search.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/search/search.ts similarity index 89% rename from packages/blocks/src/database-block/common/header/tools/search.ts rename to packages/blocks/src/database-block/data-view/widget/tools/presets/search/search.ts index 4a8ff8e0f58e..4fdb638e9d35 100644 --- a/packages/blocks/src/database-block/common/header/tools/search.ts +++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/search/search.ts @@ -1,4 +1,4 @@ -import '../../../common/filter/filter-group.js'; +import '../../../filter/filter-group.js'; import { baseTheme } from '@toeverything/theme'; import { css, html, unsafeCSS } from 'lit'; @@ -9,11 +9,11 @@ import { styleMap } from 'lit/directives/style-map.js'; import { DatabaseSearchClose, DatabaseSearchIcon, -} from '../../../../_common/icons/index.js'; -import { stopPropagation } from '../../../../_common/utils/event.js'; -import type { DataViewKanbanManager } from '../../../kanban/kanban-view-manager.js'; -import type { DataViewTableManager } from '../../../table/table-view-manager.js'; -import { BaseTool } from './base-tool.js'; +} from '../../../../common/icons/index.js'; +import { stopPropagation } from '../../../../utils/event.js'; +import type { DataViewKanbanManager } from '../../../../view/presets/kanban/kanban-view-manager.js'; +import type { DataViewTableManager } from '../../../../view/presets/table/table-view-manager.js'; +import { WidgetBase } from '../../../widget-base.js'; const styles = css` .affine-database-search-container { @@ -94,9 +94,9 @@ const styles = css` `; @customElement('data-view-header-tools-search') -export class DataViewHeaderToolsSearch extends BaseTool< - DataViewTableManager | DataViewKanbanManager -> { +export class DataViewHeaderToolsSearch extends WidgetBase { + public override view!: DataViewTableManager | DataViewKanbanManager; + get showSearch(): boolean { return this._showSearch; } diff --git a/packages/blocks/src/database-block/common/header/tools/add-row/add-row.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/add-row.ts similarity index 92% rename from packages/blocks/src/database-block/common/header/tools/add-row/add-row.ts rename to packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/add-row.ts index 5c6c606504c7..21d25f8bfaf1 100644 --- a/packages/blocks/src/database-block/common/header/tools/add-row/add-row.ts +++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/add-row.ts @@ -1,10 +1,10 @@ import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { PlusIcon } from '../../../../../_common/icons/index.js'; +import { PlusIcon } from '../../../../../../_common/icons/index.js'; import type { InsertToPosition } from '../../../../types.js'; import { startDrag } from '../../../../utils/drag.js'; -import { BaseTool } from '../base-tool.js'; +import { WidgetBase } from '../../../widget-base.js'; import { NewRecordPreview } from './new-record-preview.js'; const styles = css` @@ -31,7 +31,7 @@ const styles = css` `; @customElement('data-view-header-tools-add-row') -export class DataViewHeaderToolsAddRow extends BaseTool { +export class DataViewHeaderToolsAddRow extends WidgetBase { static override styles = styles; @state() @@ -53,7 +53,7 @@ export class DataViewHeaderToolsAddRow extends BaseTool { _dragStart = (e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); - const container = this.closest('affine-data-view-native'); + const container = this.closest('affine-data-view-renderer'); const tableRect = container ?.querySelector('affine-database-table') ?.getBoundingClientRect(); @@ -115,7 +115,7 @@ export class DataViewHeaderToolsAddRow extends BaseTool { }, onDrop: data => { if (data.position) { - this.viewMethod.addRow?.(data.position); + this.viewMethods.addRow?.(data.position); } }, onClear: () => { @@ -126,12 +126,12 @@ export class DataViewHeaderToolsAddRow extends BaseTool { }; addRow = (position: InsertToPosition | number) => { - this.viewMethod.addRow?.(position); + this.viewMethods.addRow?.(position); }; private _onAddNewRecord = () => { if (this.readonly) return; - const selection = this.viewMethod.getSelection?.(); + const selection = this.viewMethods.getSelection?.(); if (!selection) { this.addRow('start'); } else if (selection.type === 'table') { diff --git a/packages/blocks/src/database-block/common/header/tools/add-row/new-record-preview.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/new-record-preview.ts similarity index 94% rename from packages/blocks/src/database-block/common/header/tools/add-row/new-record-preview.ts rename to packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/new-record-preview.ts index 30385b312a43..6bbb45726197 100644 --- a/packages/blocks/src/database-block/common/header/tools/add-row/new-record-preview.ts +++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/table-add-row/new-record-preview.ts @@ -2,7 +2,7 @@ import { ShadowlessElement } from '@blocksuite/block-std'; import { html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { PlusIcon } from '../../../../../_common/icons/index.js'; +import { PlusIcon } from '../../../../../../_common/icons/index.js'; @customElement('affine-database-new-record-preview') export class NewRecordPreview extends ShadowlessElement { diff --git a/packages/blocks/src/database-block/common/header/tools/view-options.ts b/packages/blocks/src/database-block/data-view/widget/tools/presets/view-options/view-options.ts similarity index 84% rename from packages/blocks/src/database-block/common/header/tools/view-options.ts rename to packages/blocks/src/database-block/data-view/widget/tools/presets/view-options/view-options.ts index c68eebd13eb9..2be4286dcb60 100644 --- a/packages/blocks/src/database-block/common/header/tools/view-options.ts +++ b/packages/blocks/src/database-block/data-view/widget/tools/presets/view-options/view-options.ts @@ -2,28 +2,27 @@ import type { ReferenceElement } from '@floating-ui/dom'; import { css, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import { - eventToVRect, - popMenu, -} from '../../../../_common/components/menu/menu.js'; import { ArrowRightSmallIcon, DeleteIcon, DuplicateIcon, - FilterIcon, - GroupingIcon, - InfoIcon, MoreHorizontalIcon, -} from '../../../../_common/icons/index.js'; -import type { DataViewKanbanManager } from '../../../kanban/kanban-view-manager.js'; -import type { DataViewTableManager } from '../../../table/table-view-manager.js'; -import { popFilterModal } from '../../filter/filter-modal.js'; +} from '../../../../../../_common/icons/index.js'; import { popGroupSetting, popSelectGroupByProperty, -} from '../../group-by/setting.js'; -import { popPropertiesSetting } from '../../properties.js'; -import { BaseTool } from './base-tool.js'; +} from '../../../../common/group-by/setting.js'; +import { + FilterIcon, + GroupingIcon, + InfoIcon, +} from '../../../../common/icons/index.js'; +import { popPropertiesSetting } from '../../../../common/properties.js'; +import { eventToVRect, popMenu } from '../../../../utils/menu/index.js'; +import type { DataViewKanbanManager } from '../../../../view/presets/kanban/kanban-view-manager.js'; +import type { DataViewTableManager } from '../../../../view/presets/table/table-view-manager.js'; +import { popFilterModal } from '../../../filter/filter-modal.js'; +import { WidgetBase } from '../../../widget-base.js'; const styles = css` .affine-database-toolbar-item.more-action { @@ -50,11 +49,9 @@ const styles = css` `; @customElement('data-view-header-tools-view-options') -export class DataViewHeaderToolsViewOptions extends BaseTool< - DataViewKanbanManager | DataViewTableManager -> { +export class DataViewHeaderToolsViewOptions extends WidgetBase { static override styles = styles; - + public override view!: DataViewTableManager | DataViewKanbanManager; showToolBar(show: boolean) { const tools = this.closest('data-view-header-tools'); if (tools) { diff --git a/packages/blocks/src/database-block/common/header/tools/tools.ts b/packages/blocks/src/database-block/data-view/widget/tools/tools-renderer.ts similarity index 60% rename from packages/blocks/src/database-block/common/header/tools/tools.ts rename to packages/blocks/src/database-block/data-view/widget/tools/tools-renderer.ts index 65ff52a95e72..afae55797ad1 100644 --- a/packages/blocks/src/database-block/common/header/tools/tools.ts +++ b/packages/blocks/src/database-block/data-view/widget/tools/tools-renderer.ts @@ -1,17 +1,19 @@ -import './search.js'; -import './filter.js'; -import './view-options.js'; -import './add-row/add-row.js'; +import './presets/search/search.js'; +import './presets/filter/filter.js'; +import './presets/view-options/view-options.js'; +import './presets/table-add-row/add-row.js'; -import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; import { css, html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; -import { renderUniLit } from '../../../../_common/components/uni-component/uni-component.js'; -import { type DataViewExpose, viewRendererManager } from '../../data-view.js'; -import type { DataViewManager } from '../../data-view-manager.js'; +import type { ViewSource } from '../../common/index.js'; +import { renderUniLit } from '../../utils/uni-component/index.js'; +import { type DataViewExpose } from '../../view/data-view.js'; +import type { DataViewManager } from '../../view/data-view-manager.js'; +import type { DataViewWidget, DataViewWidgetProps } from '../types.js'; +import { WidgetBase } from '../widget-base.js'; const styles = css` .affine-database-toolbar { @@ -41,15 +43,10 @@ const styles = css` `; @customElement('data-view-header-tools') -export class DataViewHeaderTools extends WithDisposable(ShadowlessElement) { +export class DataViewHeaderTools extends WidgetBase { static override styles = styles; - - @property({ attribute: false }) - viewMethod!: DataViewExpose; - @property({ attribute: false }) - view!: DataViewManager; - + toolsMap!: Record; @state() public showToolBar = false; @@ -61,12 +58,14 @@ export class DataViewHeaderTools extends WithDisposable(ShadowlessElement) { 'show-toolbar': this.showToolBar, 'affine-database-toolbar': true, }); - const tools = viewRendererManager.getView(this.view.type).tools; + const tools = this.toolsMap[this.view.type]; return html`
${repeat(tools ?? [], uni => { - const props = { + const props: DataViewWidgetProps = { view: this.view, - viewMethod: this.viewMethod, + viewMethods: this.viewMethods, + viewSource: this.viewSource, + dataSource: this.dataSource, }; return renderUniLit(uni, props); })} @@ -81,10 +80,12 @@ declare global { } export const renderTools = ( view: DataViewManager, - viewMethod: DataViewExpose + viewMethods: DataViewExpose, + viewSource: ViewSource ) => { return html` `; }; diff --git a/packages/blocks/src/database-block/data-view/widget/types.ts b/packages/blocks/src/database-block/data-view/widget/types.ts new file mode 100644 index 000000000000..3601867a6e3b --- /dev/null +++ b/packages/blocks/src/database-block/data-view/widget/types.ts @@ -0,0 +1,13 @@ +import type { DataSource } from '../common/data-source/base.js'; +import type { ViewSource } from '../common/index.js'; +import type { UniComponent } from '../utils/uni-component/index.js'; +import type { DataViewExpose } from '../view/data-view.js'; +import type { DataViewManager } from '../view/data-view-manager.js'; + +export type DataViewWidgetProps = { + dataSource: DataSource; + viewSource: ViewSource; + view: DataViewManager; + viewMethods: DataViewExpose; +}; +export type DataViewWidget = UniComponent; diff --git a/packages/blocks/src/database-block/data-view/widget/views-bar/index.ts b/packages/blocks/src/database-block/data-view/widget/views-bar/index.ts new file mode 100644 index 000000000000..870c9bfe987d --- /dev/null +++ b/packages/blocks/src/database-block/data-view/widget/views-bar/index.ts @@ -0,0 +1,5 @@ +import { createUniComponentFromWebComponent } from '../../utils/uni-component/index.js'; +import { DataViewHeaderViews } from './views.js'; + +export const widgetViewsBar = + createUniComponentFromWebComponent(DataViewHeaderViews); diff --git a/packages/blocks/src/database-block/common/header/views.ts b/packages/blocks/src/database-block/data-view/widget/views-bar/views.ts similarity index 82% rename from packages/blocks/src/database-block/common/header/views.ts rename to packages/blocks/src/database-block/data-view/widget/views-bar/views.ts index 9ae2468afe60..918b31100697 100644 --- a/packages/blocks/src/database-block/common/header/views.ts +++ b/packages/blocks/src/database-block/data-view/widget/views-bar/views.ts @@ -1,30 +1,29 @@ -import '../component/overflow/overflow.js'; +import '../../common/component/overflow/overflow.js'; -import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; import type { ReferenceElement } from '@floating-ui/dom'; import { css, html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import { - eventToVRect, - popFilterableSimpleMenu, - popMenu, -} from '../../../_common/components/menu/index.js'; -import { renderUniLit } from '../../../_common/components/uni-component/uni-component.js'; import { AddCursorIcon, - DeleteIcon, DuplicateIcon, MoreHorizontalIcon, MoveLeftIcon, MoveRightIcon, -} from '../../../_common/icons/index.js'; -import { viewManager, viewRendererManager } from '../data-view.js'; -import type { ViewSource } from '../view-source.js'; +} from '../../../../_common/icons/index.js'; +import { DeleteIcon } from '../../common/icons/index.js'; +import type { SingleViewSource } from '../../common/index.js'; +import { + eventToVRect, + popFilterableSimpleMenu, + popMenu, +} from '../../utils/index.js'; +import { renderUniLit } from '../../utils/uni-component/index.js'; +import { WidgetBase } from '../widget-base.js'; @customElement('data-view-header-views') -export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { +export class DataViewHeaderViews extends WidgetBase { static override styles = css` data-view-header-views { height: 32px; @@ -71,8 +70,6 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { background-color: var(--affine-hover-color-filled); } `; - @property({ attribute: false }) - viewSource!: ViewSource; get readonly() { return this.viewSource.readonly; } @@ -80,13 +77,11 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { _addViewMenu = (event: MouseEvent) => { popFilterableSimpleMenu( event.target as HTMLElement, - viewManager.all.map(v => { + this.viewSource.allViewMeta.map(v => { return { type: 'action', - name: v.defaultName, - icon: html``, + name: v.model.defaultName, + icon: html``, select: () => { const id = this.viewSource.viewAdd(v.type); this.viewSource.selectView(id); @@ -106,9 +101,7 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { }; return { type: 'action' as const, - icon: html``, + icon: html``, name: v.view.name, isSelected: this.viewSource.currentViewId === v.view.id, select: () => { @@ -128,13 +121,11 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { name: '', hide: () => this.readonly, children: () => - viewManager.all.map(v => { + this.viewSource.allViewMeta.map(v => { return { type: 'action', - name: `Create ${v.defaultName}`, - icon: html``, + name: `Create ${v.model.defaultName}`, + icon: html``, select: () => { const id = this.viewSource.viewAdd(v.type); this.viewSource.selectView(id); @@ -168,12 +159,9 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { { type: 'action', name: 'Edit View', - icon: renderUniLit( - viewRendererManager.getView(view.view.mode).icon, - {} - ), + icon: renderUniLit(this.getRenderer(view).icon, {}), select: () => { - this.closest('affine-data-view-native') + this.closest('affine-data-view-renderer') ?.querySelector('data-view-header-tools-view-options') ?.openMoreAction(target); }, @@ -283,16 +271,17 @@ export class DataViewHeaderViews extends WithDisposable(ShadowlessElement) { @click="${(event: MouseEvent) => this._clickView(event, view.view.id)}" > - +
${view.view.name}
`; }); }; + private getRenderer(view: SingleViewSource) { + return this.viewSource.getViewMeta(view.view.mode).renderer; + } + override render() { return html` (); + private dataView = new DataView(); get view() { - return this._view.value?.expose; + return this.dataView.expose; } - private _dataSource?: DataSource; - public get dataSource(): DataSource { + private _dataSource?: DatabaseBlockDataSource; + public get dataSource(): DatabaseBlockDataSource { if (!this._dataSource) { this._dataSource = new DatabaseBlockDataSource(this.host, { type: 'database-block', @@ -277,16 +274,6 @@ export class DatabaseBlockComponent extends BlockElement< return this._dataSource; } - public focusFirstCell = () => { - this._view.value?.focusFirstCell(); - }; - - private renderViews = () => { - return html` `; - }; private renderTitle = (dataViewMethod: DataViewExpose) => { const addRow = () => dataViewMethod.addRow?.('start'); return html` `; }; - private renderReference = () => { - return html`
`; - }; - headerComponent = defineUniComponent( - ({ - view, - viewMethods, - }: { - view: DataViewManager; - viewMethods: DataViewExpose; - }) => { + toolsWidget: DataViewWidget = widgetPresets.createTools({ + table: [ + widgetPresets.tools.filter, + widgetPresets.tools.expand, + widgetPresets.tools.search, + widgetPresets.tools.viewOptions, + widgetPresets.tools.tableAddRow, + ], + kanban: [ + widgetPresets.tools.filter, + widgetPresets.tools.expand, + widgetPresets.tools.search, + widgetPresets.tools.viewOptions, + ], + }); + + headerWidget: DataViewWidget = defineUniComponent( + (props: DataViewWidgetProps) => { return html`
- ${this.renderTitle(viewMethods)} ${this.renderDatabaseOps()} - ${this.renderReference()} + ${this.renderTitle(props.viewMethods)} ${this.renderDatabaseOps()}
- ${this.renderViews()} ${renderTools(view, viewMethods)} +
+ ${renderUniLit(widgetPresets.viewBar, props)} +
+ ${renderUniLit(this.toolsWidget, props)}
- ${renderFilterBar(view)} + ${renderUniLit(widgetPresets.filterBar, props)}
`; } @@ -371,27 +367,23 @@ export class DatabaseBlockComponent extends BlockElement< } override renderBlock() { - const config: DataViewNativeConfig = { - bindHotkey: this._bindHotkey, - handleEvent: this._handleEvent, - getFlag: this.getFlag, - selectionUpdated: this.selectionUpdated, - setSelection: this.setSelection, - dataSource: this.dataSource, - viewSource: this.viewSource, - headerComponent: this.headerComponent, - onDrag: this.onDrag, - std: this.std, - detailPanelConfig: { - target: () => this.innerModalWidget.target, - }, - }; return html`
- + ${this.dataView.render({ + bindHotkey: this._bindHotkey, + handleEvent: this._handleEvent, + getFlag: this.getFlag, + selectionUpdated: this.selectionUpdated, + setSelection: this.setSelection, + dataSource: this.dataSource, + viewSource: this.viewSource, + headerWidget: this.headerWidget, + onDrag: this.onDrag, + std: this.std, + detailPanelConfig: { + target: () => this.innerModalWidget.target, + }, + })} (); - private currentId?: string; - - public selectView(id: string): void { - this.currentId = id; - this.updateSlot.emit(); - } - - public updateSlot = new Slot(); - - public get views(): SingleViewSource[] { - return this.model.views.map(v => this.viewGet(v.id)); - } - - public get currentView(): SingleViewSource { - return this.viewGet(this.currentViewId); - } - - public get readonly(): boolean { - return this.model.doc.readonly; - } - - public viewAdd(type: DataViewTypes): string { - this.model.doc.captureSync(); - const view = this.model.addView(type); - this.model.applyViewsUpdate(); - return view.id; - } - - public viewGet(id: string): SingleViewSource { - let result = this.viewMap.get(id); - if (!result) { - const getView = () => { - return this.model.views.find(v => v.id === id); - }; - const view = getView(); - if (!view) { - throw new Error('view not found'); - } - // eslint-disable-next-line @typescript-eslint/no-this-alias - const self = this; - const slot = new Slot(); - this.updateSlot.pipe(slot); - result = { - duplicate(): void { - self.duplicate(id); - }, - get view() { - const view = getView(); - if (!view) { - throw new Error('view not found'); - } - return view; - }, - updateView: updater => { - this.model.doc.captureSync(); - this.model.updateView(id, updater); - this.model.applyViewsUpdate(); - }, - delete: () => { - this.model.doc.captureSync(); - if (this.model.getViewList().length === 1) { - this.model.doc.deleteBlock(this.model); - return; - } - this.model.deleteView(id); - this.currentId = undefined; - this.model.applyViewsUpdate(); - }, - get readonly() { - return self.model.doc.readonly; - }, - updateSlot: slot, - isDeleted() { - return self.model.views.every(v => v.id !== id); - }, - }; - this.viewMap.set(id, result); - } - return result; - } - - public duplicate(id: string): void { - const newId = this.model.duplicateView(id); - this.selectView(newId); - } - - public moveTo(id: string, position: InsertToPosition): void { - this.model.moveViewTo(id, position); - } -} diff --git a/packages/blocks/src/database-block/database-model.ts b/packages/blocks/src/database-block/database-model.ts index 18f9c5481dc8..58ce8f1afe06 100644 --- a/packages/blocks/src/database-block/database-model.ts +++ b/packages/blocks/src/database-block/database-model.ts @@ -1,15 +1,10 @@ import type { MigrationRunner, Text } from '@blocksuite/store'; import { BlockModel, defineBlockSchema, nanoid } from '@blocksuite/store'; -import { getTagColor } from '../_common/components/tags/colors.js'; -import { multiSelectPureColumnConfig } from './common/columns/multi-select/define.js'; -import { selectPureColumnConfig } from './common/columns/select/define.js'; -import { titlePureColumnConfig } from './common/columns/title/define.js'; -import type { DataViewDataType, DataViewTypes } from './common/data-view.js'; -import { viewManager } from './common/data-view.js'; -import type { Column } from './table/types.js'; -import type { Cell, ColumnUpdater, InsertToPosition } from './types.js'; -import { arrayMove, insertPositionToIndex } from './utils/insert.js'; +import type { InsertToPosition } from './data-view/types.js'; +import { arrayMove, insertPositionToIndex } from './data-view/utils/insert.js'; +import type { DataViewDataType } from './data-view/view/data-view.js'; +import type { Cell, Column, ColumnUpdater } from './types.js'; export type DatabaseBlockProps = { views: DataViewDataType[]; @@ -30,72 +25,6 @@ export class DatabaseBlockModel extends BlockModel { getViewList() { return this.views; } - - initEmpty(viewType: DataViewTypes) { - this.addColumn( - 'start', - titlePureColumnConfig.create(titlePureColumnConfig.name) - ); - this.addView(viewType); - } - - initConvert(viewType: DataViewTypes) { - this.addColumn( - 'end', - multiSelectPureColumnConfig.create('Tag', { options: [] }) - ); - this.initEmpty(viewType); - } - - initTemplate(viewType: DataViewTypes) { - const ids = [nanoid(), nanoid(), nanoid()]; - const statusId = this.addColumn( - 'end', - selectPureColumnConfig.create('Status', { - options: [ - { - id: ids[0], - color: getTagColor(), - value: 'TODO', - }, - { - id: ids[1], - color: getTagColor(), - value: 'In Progress', - }, - { - id: ids[2], - color: getTagColor(), - value: 'Done', - }, - ], - }) - ); - for (let i = 0; i < 4; i++) { - const rowId = this.doc.addBlock( - 'affine:paragraph', - { - text: new this.doc.Text(`Task ${i + 1}`), - }, - this.id - ); - this.updateCell(rowId, { - columnId: statusId, - value: ids[i], - }); - } - this.initEmpty(viewType); - } - - addView(type: DataViewTypes) { - const id = this.doc.generateBlockId(); - const viewConfig = viewManager.getView(type); - const view = viewConfig.init(this, id, viewConfig.defaultName); - this.doc.transact(() => { - this.views.push(view); - }); - return view; - } duplicateView(id: string): string { const newId = this.doc.generateBlockId(); this.doc.transact(() => { diff --git a/packages/blocks/src/database-block/database-service.ts b/packages/blocks/src/database-block/database-service.ts index 4d4f75dc94f2..0da64867c7fc 100644 --- a/packages/blocks/src/database-block/database-service.ts +++ b/packages/blocks/src/database-block/database-service.ts @@ -9,9 +9,11 @@ import { } from '../_common/inline/presets/affine-inline-specs.js'; import { affineInlineMarkdownMatches } from '../_common/inline/presets/markdown.js'; import { ReferenceNodeConfig } from '../_common/inline/presets/nodes/reference-node/reference-config.js'; -import type { DataViewTypes } from './common/data-view.js'; -import { DatabaseSelection } from './common/selection.js'; +import { DatabaseSelection } from './data-view/common/selection.js'; +import { viewPresets } from './data-view/index.js'; +import type { ViewMeta } from './data-view/view/data-view.js'; import type { DatabaseBlockModel } from './database-model.js'; +import { databaseViewInitEmpty, databaseViewInitTemplate } from './utils.js'; export class DatabaseService< TextAttributes extends AffineTextAttributes = AffineTextAttributes, @@ -31,17 +33,19 @@ export class DatabaseService< this.inlineManager.registerSpecs(inlineSpecs); this.inlineManager.registerMarkdownMatches(affineInlineMarkdownMatches); } + databaseViewInitEmpty = databaseViewInitEmpty; + viewPresets = viewPresets; initDatabaseBlock( doc: Doc, model: BlockModel, databaseId: string, - viewType: DataViewTypes, + viewMeta: ViewMeta, isAppendNewRow = true ) { const blockModel = doc.getBlockById(databaseId) as DatabaseBlockModel; assertExists(blockModel); - blockModel.initTemplate(viewType); + databaseViewInitTemplate(blockModel, viewMeta); if (isAppendNewRow) { // Add a paragraph after database const parent = doc.getParent(model); diff --git a/packages/blocks/src/database-block/common/datasource/block-renderer.ts b/packages/blocks/src/database-block/detail-panel/block-renderer.ts similarity index 88% rename from packages/blocks/src/database-block/common/datasource/block-renderer.ts rename to packages/blocks/src/database-block/detail-panel/block-renderer.ts index 01a985be249c..69d67015c069 100644 --- a/packages/blocks/src/database-block/common/datasource/block-renderer.ts +++ b/packages/blocks/src/database-block/detail-panel/block-renderer.ts @@ -3,10 +3,10 @@ import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { DatabaseBlockComponent } from '../../database-block.js'; -import type { DataViewKanbanManager } from '../../kanban/kanban-view-manager.js'; -import type { DataViewTableManager } from '../../table/table-view-manager.js'; -import type { DetailSlotProps } from './base.js'; +import type { DetailSlotProps } from '../data-view/common/data-source/base.js'; +import type { DataViewKanbanManager } from '../data-view/view/presets/kanban/kanban-view-manager.js'; +import type { DataViewTableManager } from '../data-view/view/presets/table/table-view-manager.js'; +import type { DatabaseBlockComponent } from '../database-block.js'; @customElement('database-datasource-block-renderer') export class BlockRenderer diff --git a/packages/blocks/src/database-block/index.ts b/packages/blocks/src/database-block/index.ts index 2fde4a616b08..33019fcff18e 100644 --- a/packages/blocks/src/database-block/index.ts +++ b/packages/blocks/src/database-block/index.ts @@ -1,20 +1,18 @@ +export { richTextColumnConfig } from './columns/rich-text/cell-renderer.js'; import type { DatabaseBlockModel } from './database-model.js'; import type { DatabaseService } from './database-service.js'; -export { checkboxPureColumnConfig } from './common/columns/checkbox/define.js'; -export { datePureColumnConfig } from './common/columns/date/define.js'; -export { linkPureColumnConfig } from './common/columns/link/define.js'; -export { multiSelectColumnConfig } from './common/columns/multi-select/cell-renderer.js'; -export { multiSelectPureColumnConfig } from './common/columns/multi-select/define.js'; -export { numberPureColumnConfig } from './common/columns/number/define.js'; -export { progressPureColumnConfig } from './common/columns/progress/define.js'; -export { richTextPureColumnConfig } from './common/columns/rich-text/define.js'; +export { + columnPresets, + viewPresets, + widgetPresets, +} from './data-view/index.js'; +export { insertPositionToIndex } from './data-view/utils/insert.js'; export * from './database-block.js'; export * from './database-model.js'; export * from './database-service.js'; export * from './types.js'; -export { insertPositionToIndex } from './utils/insert.js'; - +export * from './utils.js'; declare global { namespace BlockSuite { interface BlockServices { @@ -25,3 +23,5 @@ declare global { } } } +export type { ColumnDataUpdater, InsertToPosition } from './data-view/types.js'; +export { DatabaseBlockViewSource } from './view-source.js'; diff --git a/packages/blocks/src/database-block/kanban/define.ts b/packages/blocks/src/database-block/kanban/define.ts deleted file mode 100644 index 980d3cc48608..000000000000 --- a/packages/blocks/src/database-block/kanban/define.ts +++ /dev/null @@ -1,86 +0,0 @@ -import type { FilterGroup } from '../common/ast.js'; -import { columnManager } from '../common/columns/manager.js'; -import { multiSelectPureColumnConfig } from '../common/columns/multi-select/define.js'; -import { numberPureColumnConfig } from '../common/columns/number/define.js'; -import { selectPureColumnConfig } from '../common/columns/select/define.js'; -import { textPureColumnConfig } from '../common/columns/text/define.js'; -import { viewManager } from '../common/data-view.js'; -import { groupByMatcher } from '../common/group-by/matcher.js'; -import { defaultGroupBy } from '../common/group-by/util.js'; -import type { GroupBy, GroupProperty, Sort } from '../common/types.js'; -import type { Column } from '../table/types.js'; - -declare global { - interface DataViewDataTypeMap { - kanban: KanbanViewData; - } -} -export type KanbanViewColumn = { - id: string; - hide?: boolean; -}; - -export type KanbanViewData = { - columns: KanbanViewColumn[]; - filter: FilterGroup; - groupBy?: GroupBy; - sort?: Sort; - header: { - titleColumn?: string; - iconColumn?: string; - coverColumn?: string; - }; - groupProperties: GroupProperty[]; -}; - -viewManager.register('kanban', { - defaultName: 'Kanban View', - init(model, id, name) { - const allowList = model.columns.filter(column => { - const type = columnManager.getColumn(column.type).dataType(column.data); - return !!groupByMatcher.match(type) && column.type !== 'title'; - }); - const getWeight = (column: Column) => { - if ( - [ - selectPureColumnConfig.type, - multiSelectPureColumnConfig.type, - ].includes(column.type) - ) { - return 3; - } - if ( - [numberPureColumnConfig.type, textPureColumnConfig.type].includes( - column.type - ) - ) { - return 2; - } - return 1; - }; - const column = allowList.sort((a, b) => getWeight(b) - getWeight(a))[0]; - if (!column) { - throw new Error('not implement yet'); - } - return { - id, - name, - mode: 'kanban', - columns: model.columns.map(v => ({ - id: v.id, - hide: false, - })), - filter: { - type: 'group', - op: 'and', - conditions: [], - }, - groupBy: defaultGroupBy(column.id, column.type, column.data), - header: { - titleColumn: model.columns.find(v => v.type === 'title')?.id, - iconColumn: 'type', - }, - groupProperties: [], - }; - }, -}); diff --git a/packages/blocks/src/database-block/kanban/header-cell.ts b/packages/blocks/src/database-block/kanban/header-cell.ts deleted file mode 100644 index fade91b6f850..000000000000 --- a/packages/blocks/src/database-block/kanban/header-cell.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { map } from '../../_common/components/uni-component/operation.js'; -import type { CellRenderProps } from '../common/columns/manager.js'; -import { createFromBaseCellRenderer } from '../common/columns/renderer.js'; -import { - HeaderAreaTextCell, - HeaderAreaTextCellEditing, -} from '../common/header-area/text.js'; - -export const headerRenderer = { - view: map( - createFromBaseCellRenderer(HeaderAreaTextCell), - (props: CellRenderProps) => ({ ...props, showIcon: false }) - ), - edit: map( - createFromBaseCellRenderer(HeaderAreaTextCellEditing), - (props: CellRenderProps) => ({ ...props, showIcon: false }) - ), -}; diff --git a/packages/blocks/src/database-block/kanban/renderer.ts b/packages/blocks/src/database-block/kanban/renderer.ts deleted file mode 100644 index c655b58e1476..000000000000 --- a/packages/blocks/src/database-block/kanban/renderer.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { createIcon } from '../../_common/components/icon/uni-icon.js'; -import { createUniComponentFromWebComponent } from '../../_common/components/uni-component/uni-component.js'; -import { viewRendererManager } from '../common/data-view.js'; -import { ExpandDatabaseBlockModal } from '../common/header/tools/expand/index.js'; -import { DataViewHeaderToolsFilter } from '../common/header/tools/filter.js'; -import { DataViewHeaderToolsSearch } from '../common/header/tools/search.js'; -import { DataViewHeaderToolsViewOptions } from '../common/header/tools/view-options.js'; -import { DataViewKanban } from './kanban-view.js'; - -viewRendererManager.register('kanban', { - icon: createIcon('DatabaseKanbanViewIcon'), - view: createUniComponentFromWebComponent(DataViewKanban), - tools: [ - createUniComponentFromWebComponent(DataViewHeaderToolsFilter), - createUniComponentFromWebComponent(ExpandDatabaseBlockModal), - createUniComponentFromWebComponent(DataViewHeaderToolsSearch), - createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions), - ], -}); diff --git a/packages/blocks/src/database-block/table/renderer.ts b/packages/blocks/src/database-block/table/renderer.ts deleted file mode 100644 index f8cfc63864aa..000000000000 --- a/packages/blocks/src/database-block/table/renderer.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { createIcon } from '../../_common/components/icon/uni-icon.js'; -import { createUniComponentFromWebComponent } from '../../_common/components/uni-component/uni-component.js'; -import { viewRendererManager } from '../common/data-view.js'; -import { DataViewHeaderToolsAddRow } from '../common/header/tools/add-row/add-row.js'; -import { ExpandDatabaseBlockModal } from '../common/header/tools/expand/index.js'; -import { DataViewHeaderToolsFilter } from '../common/header/tools/filter.js'; -import { DataViewHeaderToolsSearch } from '../common/header/tools/search.js'; -import { DataViewHeaderToolsViewOptions } from '../common/header/tools/view-options.js'; -import { DataViewTable } from './table-view.js'; - -viewRendererManager.register('table', { - view: createUniComponentFromWebComponent(DataViewTable), - icon: createIcon('DatabaseTableViewIcon'), - tools: [ - createUniComponentFromWebComponent(DataViewHeaderToolsFilter), - createUniComponentFromWebComponent(ExpandDatabaseBlockModal), - createUniComponentFromWebComponent(DataViewHeaderToolsSearch), - createUniComponentFromWebComponent(DataViewHeaderToolsViewOptions), - createUniComponentFromWebComponent(DataViewHeaderToolsAddRow), - ], -}); diff --git a/packages/blocks/src/database-block/types.ts b/packages/blocks/src/database-block/types.ts index 84ade0549d71..810ac43c591d 100644 --- a/packages/blocks/src/database-block/types.ts +++ b/packages/blocks/src/database-block/types.ts @@ -1,17 +1,7 @@ -import type { Column } from './table/types.js'; +import type { Column } from './data-view/view/presets/table/types.js'; -export type * from './table/types.js'; +export type { Column } from './data-view/view/presets/table/types.js'; export type ColumnUpdater = (data: T) => Partial; -export type ColumnDataUpdater< - Data extends Record = Record, -> = (data: Data) => Partial; -export type InsertToPosition = - | 'end' - | 'start' - | { - id: string; - before: boolean; - }; export type Cell = { columnId: Column['id']; value: ValueType; diff --git a/packages/blocks/src/database-block/utils.ts b/packages/blocks/src/database-block/utils.ts new file mode 100644 index 000000000000..9872b06ed11a --- /dev/null +++ b/packages/blocks/src/database-block/utils.ts @@ -0,0 +1,90 @@ +import { nanoid } from '@blocksuite/store'; + +import { databaseBlockAllColumnMap } from './columns/index.js'; +import { titlePureColumnConfig } from './columns/title/define.js'; +import type { ViewMeta } from './data-view/index.js'; +import { columnPresets } from './data-view/index.js'; +import { getTagColor } from './data-view/utils/tags/colors.js'; +import type { DatabaseBlockModel } from './database-model.js'; + +export const databaseViewInitEmpty = ( + model: DatabaseBlockModel, + viewMeta: ViewMeta +) => { + model.addColumn( + 'start', + titlePureColumnConfig.create(titlePureColumnConfig.model.name) + ); + databaseViewAddView(model, viewMeta); +}; + +export const databaseViewInitConvert = ( + model: DatabaseBlockModel, + viewMeta: ViewMeta +) => { + model.addColumn( + 'end', + columnPresets.multiSelectColumnConfig.model.create('Tag', { options: [] }) + ); + databaseViewInitEmpty(model, viewMeta); +}; + +export const databaseViewInitTemplate = ( + model: DatabaseBlockModel, + viewMeta: ViewMeta +) => { + const ids = [nanoid(), nanoid(), nanoid()]; + const statusId = model.addColumn( + 'end', + columnPresets.selectColumnConfig.model.create('Status', { + options: [ + { + id: ids[0], + color: getTagColor(), + value: 'TODO', + }, + { + id: ids[1], + color: getTagColor(), + value: 'In Progress', + }, + { + id: ids[2], + color: getTagColor(), + value: 'Done', + }, + ], + }) + ); + for (let i = 0; i < 4; i++) { + const rowId = model.doc.addBlock( + 'affine:paragraph', + { + text: new model.doc.Text(`Task ${i + 1}`), + }, + model.id + ); + model.updateCell(rowId, { + columnId: statusId, + value: ids[i], + }); + } + databaseViewInitEmpty(model, viewMeta); +}; + +export const databaseViewAddView = ( + model: DatabaseBlockModel, + viewMeta: ViewMeta +) => { + const id = model.doc.generateBlockId(); + const view = viewMeta.model.init( + databaseBlockAllColumnMap, + model, + id, + viewMeta.model.defaultName + ); + model.doc.transact(() => { + model.views.push(view); + }); + return view; +}; diff --git a/packages/blocks/src/database-block/view-source.ts b/packages/blocks/src/database-block/view-source.ts new file mode 100644 index 000000000000..f1632d875622 --- /dev/null +++ b/packages/blocks/src/database-block/view-source.ts @@ -0,0 +1,118 @@ +import { Slot } from '@blocksuite/global/utils'; + +import type { SingleViewSource, ViewSource } from './data-view/common/index.js'; +import type { InsertToPosition } from './data-view/types.js'; +import type { DataViewTypes, ViewMeta } from './data-view/view/data-view.js'; +import { type DatabaseBlockModel } from './database-model.js'; +import { databaseViewAddView } from './utils.js'; +import { databaseBlockViewMap, databaseBlockViews } from './views/index.js'; + +export class DatabaseBlockViewSource implements ViewSource { + constructor(private model: DatabaseBlockModel) {} + + get currentViewId(): string { + return this.currentId ?? this.model.views[0].id; + } + + private viewMap = new Map(); + private currentId?: string; + + public selectView(id: string): void { + this.currentId = id; + this.updateSlot.emit(); + } + + public updateSlot = new Slot(); + + public get views(): SingleViewSource[] { + return this.model.views.map(v => this.viewGet(v.id)); + } + + public get currentView(): SingleViewSource { + return this.viewGet(this.currentViewId); + } + + public get readonly(): boolean { + return this.model.doc.readonly; + } + + public viewAdd(viewType: DataViewTypes): string { + this.model.doc.captureSync(); + const view = databaseViewAddView( + this.model, + databaseBlockViewMap[viewType] + ); + this.model.applyViewsUpdate(); + return view.id; + } + + public viewGet(id: string): SingleViewSource { + let result = this.viewMap.get(id); + if (!result) { + const getView = () => { + return this.model.views.find(v => v.id === id); + }; + const view = getView(); + if (!view) { + throw new Error('view not found'); + } + // eslint-disable-next-line @typescript-eslint/no-this-alias + const self = this; + const slot = new Slot(); + this.updateSlot.pipe(slot); + result = { + duplicate(): void { + self.duplicate(id); + }, + get view() { + const view = getView(); + if (!view) { + throw new Error('view not found'); + } + return view; + }, + updateView: updater => { + this.model.doc.captureSync(); + this.model.updateView(id, updater); + this.model.applyViewsUpdate(); + }, + delete: () => { + this.model.doc.captureSync(); + if (this.model.getViewList().length === 1) { + this.model.doc.deleteBlock(this.model); + return; + } + this.model.deleteView(id); + this.currentId = undefined; + this.model.applyViewsUpdate(); + }, + get readonly() { + return self.model.doc.readonly; + }, + updateSlot: slot, + isDeleted() { + return self.model.views.every(v => v.id !== id); + }, + }; + this.viewMap.set(id, result); + } + return result; + } + + public duplicate(id: string): void { + const newId = this.model.duplicateView(id); + this.selectView(newId); + } + + public moveTo(id: string, position: InsertToPosition): void { + this.model.moveViewTo(id, position); + } + + public get allViewMeta(): ViewMeta[] { + return databaseBlockViews; + } + + public getViewMeta(type: string): ViewMeta { + return databaseBlockViewMap[type]; + } +} diff --git a/packages/blocks/src/database-block/views/index.ts b/packages/blocks/src/database-block/views/index.ts new file mode 100644 index 000000000000..af311e07c681 --- /dev/null +++ b/packages/blocks/src/database-block/views/index.ts @@ -0,0 +1,11 @@ +import type { ViewMeta } from '../data-view/view/data-view.js'; +import { viewPresets } from '../data-view/view/index.js'; + +export const databaseBlockViews: ViewMeta[] = [ + viewPresets.tableViewConfig, + viewPresets.kanbanViewConfig, +]; + +export const databaseBlockViewMap = Object.fromEntries( + databaseBlockViews.map(view => [view.type, view]) +); diff --git a/packages/blocks/src/database-block/views/models.ts b/packages/blocks/src/database-block/views/models.ts new file mode 100644 index 000000000000..5ee974798b88 --- /dev/null +++ b/packages/blocks/src/database-block/views/models.ts @@ -0,0 +1,11 @@ +import type { ViewMeta } from '../data-view/index.js'; +import { viewPresets } from '../data-view/index.js'; + +export const databaseBlockViews: ViewMeta[] = [ + viewPresets.tableViewConfig, + viewPresets.kanbanViewConfig, +]; + +export const databaseBlockViewMap = Object.fromEntries( + databaseBlockViews.map(view => [view.type, view]) +); diff --git a/packages/blocks/src/database-block/common/header/tools/expand/index.ts b/packages/blocks/src/database-block/widgets/expand/index.ts similarity index 83% rename from packages/blocks/src/database-block/common/header/tools/expand/index.ts rename to packages/blocks/src/database-block/widgets/expand/index.ts index e03fd1fda176..21bbe89e9fa5 100644 --- a/packages/blocks/src/database-block/common/header/tools/expand/index.ts +++ b/packages/blocks/src/database-block/widgets/expand/index.ts @@ -1,22 +1,23 @@ import type { EventName, UIEventHandler } from '@blocksuite/block-std'; -import { PathFinder } from '@blocksuite/block-std'; -import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std'; +import { + PathFinder, + ShadowlessElement, + WithDisposable, +} from '@blocksuite/block-std'; import type { Disposable } from '@blocksuite/global/utils'; import { assertExists, Slot } from '@blocksuite/global/utils'; import type { PropertyValues } from 'lit'; import { css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { createModal } from '../../../../../_common/components/menu/index.js'; -import { renderTemplate } from '../../../../../_common/components/uni-component/render-template.js'; -import { - CrossIcon, - ExpandWideIcon, -} from '../../../../../_common/icons/index.js'; -import type { DataViewSelection } from '../../../../../_common/utils/index.js'; -import type { DataViewNativeConfig } from '../../../../data-view.js'; -import type { DatabaseBlockComponent } from '../../../../database-block.js'; -import { DatabaseSelection } from '../../../selection.js'; +import { CrossIcon, ExpandWideIcon } from '../../../_common/icons/index.js'; +import { DatabaseSelection } from '../../data-view/common/selection.js'; +import type { DataViewRendererConfig } from '../../data-view/data-view.js'; +import type { DataViewSelection } from '../../data-view/types.js'; +import { createModal } from '../../data-view/utils/menu/index.js'; +import { renderTemplate } from '../../data-view/utils/uni-component/render-template.js'; +import { WidgetBase } from '../../data-view/widget/widget-base.js'; +import type { DatabaseBlockComponent } from '../../database-block.js'; export function showDatabasePreviewModal(database: DatabaseBlockComponent) { const viewComponent = new DatabaseBlockModalPreview(); @@ -81,9 +82,7 @@ export function showDatabasePreviewModal(database: DatabaseBlockComponent) { } @customElement('expand-database-block-modal') -export class ExpandDatabaseBlockModal extends WithDisposable( - ShadowlessElement -) { +export class ExpandDatabaseBlockModal extends WidgetBase { expandDatabase = () => { const database = this.closest('affine-database'); if (database) { @@ -145,7 +144,7 @@ export class DatabaseBlockModalPreview extends WithDisposable( protected override firstUpdated(_changedProperties: PropertyValues) { super.firstUpdated(_changedProperties); requestAnimationFrame(() => { - this.querySelector('affine-data-view-native')?.focusFirstCell(); + this.querySelector('affine-data-view-renderer')?.focusFirstCell(); }); } @@ -177,7 +176,7 @@ export class DatabaseBlockModalPreview extends WithDisposable( }; protected override render(): unknown { - const config: DataViewNativeConfig = { + const config: DataViewRendererConfig = { bindHotkey: this.bindHotkey, handleEvent: this.handleEvent, getFlag: this.database.getFlag, @@ -185,11 +184,13 @@ export class DatabaseBlockModalPreview extends WithDisposable( setSelection: this.setSelection, dataSource: this.database.dataSource, viewSource: this.database.viewSource, - headerComponent: this.database.headerComponent, + headerWidget: this.database.headerWidget, std: this.database.std, }; return html` - + `; } } diff --git a/packages/blocks/src/database-block/common/header/tools/expand/styles.ts b/packages/blocks/src/database-block/widgets/expand/styles.ts similarity index 100% rename from packages/blocks/src/database-block/common/header/tools/expand/styles.ts rename to packages/blocks/src/database-block/widgets/expand/styles.ts diff --git a/packages/blocks/src/database-block/common/header/tools/expand/table-full-screen-modal.ts b/packages/blocks/src/database-block/widgets/expand/table-full-screen-modal.ts similarity index 90% rename from packages/blocks/src/database-block/common/header/tools/expand/table-full-screen-modal.ts rename to packages/blocks/src/database-block/widgets/expand/table-full-screen-modal.ts index 7b3db36cf257..6bbc3f463098 100644 --- a/packages/blocks/src/database-block/common/header/tools/expand/table-full-screen-modal.ts +++ b/packages/blocks/src/database-block/widgets/expand/table-full-screen-modal.ts @@ -1,5 +1,3 @@ -import '../../../../../_common/components/button.js'; - import { BlockElement } from '@blocksuite/block-std'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; @@ -7,8 +5,8 @@ import { html } from 'lit/static-html.js'; import { DatabaseTableViewClose, DatabaseTableViewIcon, -} from '../../../../../_common/icons/index.js'; -import type { DatabaseBlockModel } from '../../../../database-model.js'; +} from '../../data-view/common/icons/index.js'; +import type { DatabaseBlockModel } from '../../database-model.js'; import { fullScreenStyles } from './styles.js'; @customElement('affine-database-table-view-full-screen') diff --git a/packages/blocks/src/database-block/widgets/index.ts b/packages/blocks/src/database-block/widgets/index.ts new file mode 100644 index 000000000000..75e9c52b6c7b --- /dev/null +++ b/packages/blocks/src/database-block/widgets/index.ts @@ -0,0 +1 @@ +export const commonTools = []; diff --git a/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts b/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts index 748a3dee65d7..d7887d5d4233 100644 --- a/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts +++ b/packages/blocks/src/root-block/widgets/block-hub/components/block-hub.ts @@ -26,6 +26,7 @@ import { Rect, stopPropagation, } from '../../../../_common/utils/index.js'; +import { viewPresets } from '../../../../database-block/data-view/index.js'; import { addImageBlocks, addSiblingImageBlock, @@ -517,7 +518,12 @@ export class BlockHub extends WithDisposable(ShadowlessElement) { if (isDatabase) { const service = this._rootElement.std.spec?.getService('affine:database'); - service.initDatabaseBlock(doc, model, model.id, 'table'); + service.initDatabaseBlock( + doc, + model, + model.id, + viewPresets.tableViewConfig + ); } } @@ -552,7 +558,12 @@ export class BlockHub extends WithDisposable(ShadowlessElement) { assertExists(model); if (isDatabase) { const service = rootElement.std.spec?.getService('affine:database'); - service.initDatabaseBlock(doc, model, model.id, 'table'); + service.initDatabaseBlock( + doc, + model, + model.id, + viewPresets.kanbanViewConfig + ); } } rootElement.setSelection(noteId, true, focusId, point); diff --git a/packages/blocks/src/root-block/widgets/slash-menu/config.ts b/packages/blocks/src/root-block/widgets/slash-menu/config.ts index 1bcd739abf7e..abdf5623fab3 100644 --- a/packages/blocks/src/root-block/widgets/slash-menu/config.ts +++ b/packages/blocks/src/root-block/widgets/slash-menu/config.ts @@ -17,7 +17,6 @@ import { DualLinkIcon, DuplicateIcon, FrameIcon, - GroupingIcon, ImageIcon20, NewDocIcon, NowIcon, @@ -35,6 +34,8 @@ import { } from '../../../_common/utils/index.js'; import { clearMarksOnDiscontinuousInput } from '../../../_common/utils/inline-editor.js'; import { addSiblingAttachmentBlocks } from '../../../attachment-block/utils.js'; +import { GroupingIcon } from '../../../database-block/data-view/common/icons/index.js'; +import { viewPresets } from '../../../database-block/data-view/index.js'; import { FigmaIcon } from '../../../embed-figma-block/styles.js'; import { GithubIcon } from '../../../embed-github-block/styles.js'; import { LoomIcon } from '../../../embed-loom-block/styles.js'; @@ -483,7 +484,13 @@ export const menuGroups: SlashMenuOptions['menus'] = [ index + 1 ); const service = rootElement.std.spec.getService('affine:database'); - service.initDatabaseBlock(rootElement.doc, model, id, 'table', false); + service.initDatabaseBlock( + rootElement.doc, + model, + id, + viewPresets.tableViewConfig, + false + ); tryRemoveEmptyLine(model); }, }, @@ -518,7 +525,7 @@ export const menuGroups: SlashMenuOptions['menus'] = [ rootElement.doc, model, id, - 'kanban', + viewPresets.kanbanViewConfig, false ); tryRemoveEmptyLine(model); diff --git a/packages/playground/apps/starter/data/database.ts b/packages/playground/apps/starter/data/database.ts index 2ee5133b7125..ebc1cf5ab261 100644 --- a/packages/playground/apps/starter/data/database.ts +++ b/packages/playground/apps/starter/data/database.ts @@ -1,16 +1,11 @@ -import type { - DatabaseBlockModel, - ListType, - ParagraphType, -} from '@blocksuite/blocks'; import { - checkboxPureColumnConfig, - datePureColumnConfig, - linkPureColumnConfig, - multiSelectColumnConfig, - numberPureColumnConfig, - progressPureColumnConfig, - richTextPureColumnConfig, + columnPresets, + type DatabaseBlockModel, + databaseViewAddView, + type ListType, + type ParagraphType, + richTextColumnConfig, + viewPresets, } from '@blocksuite/blocks'; import { assertExists } from '@blocksuite/global/utils'; import { type DocCollection, Text } from '@blocksuite/store'; @@ -46,36 +41,28 @@ export const database: InitFn = (collection: DocCollection, id: string) => { new Promise(resolve => requestAnimationFrame(resolve)) .then(() => { const service = window.host.std.spec.getService('affine:database'); - service.initDatabaseBlock(doc, model, databaseId, 'table', true); - const database = doc.getBlockById(databaseId) as DatabaseBlockModel; - database.addColumn( - 'end', - numberPureColumnConfig.create(numberPureColumnConfig.name) + service.initDatabaseBlock( + doc, + model, + databaseId, + viewPresets.tableViewConfig, + true ); + const database = doc.getBlockById(databaseId) as DatabaseBlockModel; const richTextId = database.addColumn( 'end', - richTextPureColumnConfig.create(richTextPureColumnConfig.name) - ); - database.addColumn( - 'end', - datePureColumnConfig.create(datePureColumnConfig.name) - ); - database.addColumn( - 'end', - linkPureColumnConfig.create(linkPureColumnConfig.name) - ); - database.addColumn( - 'end', - progressPureColumnConfig.create(progressPureColumnConfig.name) - ); - database.addColumn( - 'end', - checkboxPureColumnConfig.create(checkboxPureColumnConfig.name) - ); - database.addColumn( - 'end', - multiSelectColumnConfig.create(multiSelectColumnConfig.name) + richTextColumnConfig.model.create(richTextColumnConfig.model.name) ); + Object.values([ + columnPresets.multiSelectColumnConfig, + columnPresets.dateColumnConfig, + columnPresets.numberColumnConfig, + columnPresets.linkColumnConfig, + columnPresets.checkboxColumnConfig, + columnPresets.progressColumnConfig, + ]).forEach(column => { + database.addColumn('end', column.model.create(column.model.name)); + }); database.updateView(database.views[0].id, () => { return { groupBy: { @@ -130,7 +117,7 @@ export const database: InitFn = (collection: DocCollection, id: string) => { doc.addBlock('affine:paragraph', {}, noteId); doc.addBlock('affine:paragraph', {}, noteId); doc.addBlock('affine:paragraph', {}, noteId); - database.addView('kanban'); + databaseViewAddView(database, viewPresets.kanbanViewConfig); doc.resetHistory(); }) diff --git a/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts b/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts index 421a8c1d08fd..3c0aa3286452 100644 --- a/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts +++ b/packages/presets/src/fragments/doc-meta-tags/doc-meta-tags.ts @@ -1,14 +1,12 @@ import { WithDisposable } from '@blocksuite/block-std'; import { + ArrowDownSmallIcon, DocIcon, + DualLinkIcon16, LinkedDocIcon, + PlusIcon, popTagSelect, type SelectTag, -} from '@blocksuite/blocks'; -import { - ArrowDownSmallIcon, - DualLinkIcon16, - PlusIcon, TagsIcon, } from '@blocksuite/blocks'; import { assertExists } from '@blocksuite/global/utils'; diff --git a/tests/database/actions.ts b/tests/database/actions.ts index 3fbbcf8b7d1c..dfa8d98b37dc 100644 --- a/tests/database/actions.ts +++ b/tests/database/actions.ts @@ -1,8 +1,6 @@ -import type { - RichTextCell, - RichTextCellEditing, -} from '@blocks/database-block/common/columns/rich-text/cell-renderer.js'; -import type { ColumnType } from '@blocks/index.js'; +import type { RichTextCell } from '@blocks/database-block/columns/rich-text/cell-renderer.js'; +import { type RichTextCellEditing } from '@blocks/database-block/columns/rich-text/cell-renderer.js'; +import type { ColumnType } from '@blocks/database-block/data-view/view/presets/table/types.js'; import { ZERO_WIDTH_SPACE } from '@inline/consts.js'; import { expect, type Locator, type Page } from '@playwright/test'; diff --git a/tests/utils/actions/misc.ts b/tests/utils/actions/misc.ts index 2725f9a41172..5ad8e598de79 100644 --- a/tests/utils/actions/misc.ts +++ b/tests/utils/actions/misc.ts @@ -3,10 +3,10 @@ import '../declare-test-window.js'; import type { EditorHost } from '@block-std/view/element/lit-host.js'; import type { CssVariableName } from '@blocks/_common/theme/css-variables.js'; -import type { RichText } from '@blocks/index.js'; import { type DatabaseBlockModel, type ListType, + type RichText, type ThemeObserver, } from '@blocks/index.js'; import { assertExists } from '@global/utils.js'; @@ -461,7 +461,7 @@ export async function initEmptyEdgelessState(page: Page) { } export async function initEmptyDatabaseState(page: Page, rootId?: string) { - const ids = await page.evaluate(rootId => { + const ids = await page.evaluate(async rootId => { const { doc } = window; doc.captureSync(); if (!rootId) { @@ -478,7 +478,15 @@ export async function initEmptyDatabaseState(page: Page, rootId?: string) { noteId ); const model = doc.getBlockById(databaseId) as DatabaseBlockModel; - model.initEmpty('table'); + await new Promise(resolve => setTimeout(resolve, 100)); + const databaseBlock = document.querySelector('affine-database'); + const databaseService = databaseBlock?.service; + if (databaseService) { + databaseService.databaseViewInitEmpty( + model, + databaseService.viewPresets.tableViewConfig + ); + } model.applyColumnUpdate(); doc.captureSync(); @@ -496,7 +504,7 @@ export async function initKanbanViewState( rootId?: string ) { const ids = await page.evaluate( - ({ rootId, config }) => { + async ({ rootId, config }) => { const { doc } = window; doc.captureSync(); @@ -540,7 +548,15 @@ export async function initKanbanViewState( } }); }); - model.initEmpty('kanban'); + await new Promise(resolve => setTimeout(resolve, 100)); + const databaseBlock = document.querySelector('affine-database'); + const databaseService = databaseBlock?.service; + if (databaseService) { + databaseService.databaseViewInitEmpty( + model, + databaseService.viewPresets.kanbanViewConfig + ); + } model.applyColumnUpdate(); doc.captureSync(); return { rootId, noteId, databaseId }; @@ -554,9 +570,8 @@ export async function initEmptyDatabaseWithParagraphState( page: Page, rootId?: string ) { - const ids = await page.evaluate(rootId => { + const ids = await page.evaluate(async rootId => { const { doc } = window; - doc.captureSync(); if (!rootId) { rootId = doc.addBlock('affine:page', { @@ -572,7 +587,15 @@ export async function initEmptyDatabaseWithParagraphState( noteId ); const model = doc.getBlockById(databaseId) as DatabaseBlockModel; - model.initEmpty('table'); + await new Promise(resolve => setTimeout(resolve, 100)); + const databaseBlock = document.querySelector('affine-database'); + const databaseService = databaseBlock?.service; + if (databaseService) { + databaseService.databaseViewInitEmpty( + model, + databaseService.viewPresets.tableViewConfig + ); + } model.applyColumnUpdate(); doc.addBlock('affine:paragraph', {}, noteId);