Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-18 10:31:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate oxlint & oxfmt (#15464)

Browse Source 
#### PR Dependency Tree


* **PR #15464** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Chores**
* Replaced the project’s formatting and linting workflow with Oxfmt and
Oxlint.
* Added shared formatting and linting configuration, editor integration,
and updated automated checks.
* Updated generated files, scripts, and lint guidance to use the new
tooling.

* **Style**
* Reformatted templates, source code, examples, and configuration files
for consistent readability.
  * No user-facing functionality or rendering behavior changed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
DarkSky
2026-08-10 23:51:28 +08:00
committed by GitHub
parent 749c83cd8e
commit 0c7b20dc18
292 changed files with 3372 additions and 2866 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/data-view/src/core/common/property-menu.ts
+5 -3
View File
@@ -29,9 +29,11 @@ export const typeConfig = (property: Property) => {
style="color: var(--affine-text-secondary-color);gap:4px;font-size: 14px;"
>
${renderUniLit(property.icon)}
${property.view.propertyMetas$.value.find(
v => v.type === property.type$.value
)?.config.name}
${
property.view.propertyMetas$.value.find(
v => v.type === property.type$.value
)?.config.name
}
</div>`,
options: {
title: {
blocksuite/affine/data-view/src/core/component/tags/multi-tag-select.ts
+37 -27
View File
@@ -361,11 +361,13 @@ export class MultiTagSelect extends SignalWatcher(
});
return html` <div class="${tagContainerStyle}" style=${style}>
<div data-testid="tag-name" class="${tagTextStyle}">${name}</div>
${onDelete
? html` <div class="${tagDeleteIconStyle}" @click="${onDelete}">
${CloseIcon()}
</div>`
: nothing}
${
onDelete
? html` <div class="${tagDeleteIconStyle}" @click="${onDelete}">
${CloseIcon()}
</div>`
: nothing
}
</div>`;
}
@@ -402,27 +404,31 @@ export class MultiTagSelect extends SignalWatcher(
@click="${select.select}"
>
<div class="${selectOptionContentStyle}">
${select.isCreate
? html` <div class="${selectOptionNewIconStyle}">
Create
</div>`
: html`
<div
${dragHandler(select.id)}
class="${selectOptionDragHandlerStyle}"
></div>
`}
${
select.isCreate
? html` <div class="${selectOptionNewIconStyle}">
Create
</div>`
: html`
<div
${dragHandler(select.id)}
class="${selectOptionDragHandlerStyle}"
></div>
`
}
${this.renderTag(select.value, select.color)}
</div>
${!select.isCreate
? html` <div
class="${selectOptionIconStyle}"
@click="${clickOption}"
data-testid="option-more"
>
${MoreHorizontalIcon()}
</div>`
: null}
${
!select.isCreate
? html` <div
class="${selectOptionIconStyle}"
@click="${clickOption}"
data-testid="option-more"
>
${MoreHorizontalIcon()}
</div>`
: null
}
</div>
`;
}
@@ -586,9 +592,13 @@ const popMobileTagSelect = (target: PopupTarget, ops: TagSelectOptions) => {
});
return html`
<div style="display: flex; align-items:center;">
${option.isCreate
? html` <div style="margin-right: 8px;">Create</div>`
: ''}
${
option.isCreate
? html` <div style="margin-right: 8px;">
Create
</div>`
: ''
}
<div class="${tagContainerStyle}" style=${style}>
<div class="${tagTextStyle}">${option.value}</div>
</div>
blocksuite/affine/data-view/src/core/detail/detail.ts
+11 -9
View File
@@ -256,15 +256,17 @@ export class RecordDetail extends SignalWatcher(
);
}
)}
${!this.readonly
? html` <div
class="add-property"
@click="${this._clickAddProperty}"
>
<div class="icon">${PlusIcon()}</div>
Add Property
</div>`
: nothing}
${
!this.readonly
? html` <div
class="add-property"
@click="${this._clickAddProperty}"
>
<div class="icon">${PlusIcon()}</div>
Add Property
</div>`
: nothing
}
</div>
${keyed(this.rowId, this.renderNote())}
</div>
blocksuite/affine/data-view/src/core/group-by/group-title.ts
+24 -20
View File
@@ -96,16 +96,18 @@ const GroupTitleMobile = (
${icon} ${renderUniLit(groupData.view, props)} ${columnName}
${GroupHeaderCount(groupData)}
</div>
${ops.readonly
? nothing
: html` <div class="group-header-ops">
<div @click="${ops.clickAdd}" class="group-header-op add-card">
${PlusIcon()}
</div>
<div @click="${ops.clickOps}" class="group-header-op">
${MoreHorizontalIcon()}
</div>
</div>`}
${
ops.readonly
? nothing
: html` <div class="group-header-ops">
<div @click="${ops.clickAdd}" class="group-header-op add-card">
${PlusIcon()}
</div>
<div @click="${ops.clickOps}" class="group-header-op">
${MoreHorizontalIcon()}
</div>
</div>`
}
`;
};
@@ -211,15 +213,17 @@ export const GroupTitle = (
${icon} ${renderUniLit(groupData.view, props)} ${columnName}
${GroupHeaderCount(groupData)}
</div>
${ops.readonly
? nothing
: html` <div class="group-header-ops">
<div @click="${ops.clickAdd}" class="group-header-op add-card">
${PlusIcon()}
</div>
<div @click="${ops.clickOps}" class="group-header-op">
${MoreHorizontalIcon()}
</div>
</div>`}
${
ops.readonly
? nothing
: html` <div class="group-header-ops">
<div @click="${ops.clickAdd}" class="group-header-op add-card">
${PlusIcon()}
</div>
<div @click="${ops.clickOps}" class="group-header-op">
${MoreHorizontalIcon()}
</div>
</div>`
}
`;
};
blocksuite/affine/data-view/src/core/group-by/renderer/boolean-group.ts
+5 -3
View File
@@ -25,9 +25,11 @@ export class BooleanGroupView extends BaseGroup<boolean, NonNullable<unknown>> {
}
return html` <div class="data-view-group-title-boolean-view">
${this.value
? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
: CheckBoxUnIcon()}
${
this.value
? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
: CheckBoxUnIcon()
}
</div>`;
}
}
blocksuite/affine/data-view/src/core/group-by/setting.ts
+45 -36
View File
@@ -224,9 +224,9 @@ export class GroupSetting extends SignalWatcher(
<div
${sortable(g.key)}
${dragHandler(g.key)}
class="dv-hover dv-round-4 group-item ${g.hide$.value
? 'group-hidden'
: ''}"
class="dv-hover dv-round-4 group-item ${
g.hide$.value ? 'group-hidden' : ''
}"
>
<div class="group-item-drag-bar"></div>
<div
@@ -376,27 +376,28 @@ export const buildGroupSettingItems = (
['Month', 'date-month'],
['Year', 'date-year'],
] as [string, string][]
).map(
([label, key]): MenuConfig =>
menu.action({
name: label,
label: () => {
const isSelected =
group.groupInfo$.value?.config.name === key;
return html`<span
style="font-size:14px;color:${isSelected
).map(([label, key]): MenuConfig =>
menu.action({
name: label,
label: () => {
const isSelected =
group.groupInfo$.value?.config.name === key;
return html`<span
style="font-size:14px;color:${
isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'}"
>${label}</span
>`;
},
isSelected:
group.groupInfo$.value?.config.name === key,
select: () => {
group.changeGroupMode(key);
return false;
},
})
: 'var(--affine-text-secondary-color)'
}"
>${label}</span
>`;
},
isSelected:
group.groupInfo$.value?.config.name === key,
select: () => {
group.changeGroupMode(key);
return false;
},
})
)
),
],
@@ -417,10 +418,12 @@ export const buildGroupSettingItems = (
<div
style="display:flex;align-items:center;gap:4px;font-size:14px;line-height:20px;color:var(--affine-text-secondary-color);margin-left:8px;"
>
${group.groupInfo$.value?.config.name ===
'date-week-mon'
? 'Monday'
: 'Sunday'}
${
group.groupInfo$.value?.config.name ===
'date-week-mon'
? 'Monday'
: 'Sunday'
}
</div>
`,
options: {
@@ -439,9 +442,11 @@ export const buildGroupSettingItems = (
group.groupInfo$.value?.config.name ===
key;
return html`<span
style="font-size:14px;color:${isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'}"
style="font-size:14px;color:${
isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'
}"
>${label}</span
>`;
},
@@ -485,9 +490,11 @@ export const buildGroupSettingItems = (
label: () => {
const isSelected = group.sortAsc$.value;
return html`<span
style="font-size:14px;color:${isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'}"
style="font-size:14px;color:${
isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'
}"
>Oldest first</span
>`;
},
@@ -502,9 +509,11 @@ export const buildGroupSettingItems = (
label: () => {
const isSelected = !group.sortAsc$.value;
return html`<span
style="font-size:14px;color:${isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'}"
style="font-size:14px;color:${
isSelected
? 'var(--affine-text-emphasis-color)'
: 'var(--affine-text-secondary-color)'
}"
>Newest first</span
>`;
},
blocksuite/affine/data-view/src/property-presets/progress/cell-renderer.ts
+11 -9
View File
@@ -131,15 +131,17 @@ export class ProgressCell extends BaseCellRenderer<number, number> {
style=${bgStyles}
>
<div class="${progressFgStyle}" style=${fgStyles}></div>
${this.isEditing$.value
? html` <div
class="${progressDragHandleStyle}"
data-testid="progress-drag-handle"
style=${styleMap({
left: `calc(${progress}% - 3px)`,
})}
></div>`
: ''}
${
this.isEditing$.value
? html` <div
class="${progressDragHandleStyle}"
data-testid="progress-drag-handle"
style=${styleMap({
left: `calc(${progress}% - 3px)`,
})}
></div>`
: ''
}
</div>
</div>
<span class="${progressNumberStyle}" data-testid="progress"
blocksuite/affine/data-view/src/view-presets/calendar/pc/actions.ts
+22 -14
View File
@@ -65,20 +65,28 @@ export const openCalendarEntry = (
<span class="calendar-event-popover-icon">${DateTimeIcon()}</span>
<span>${formatEntryTime(entry)}</span>
</div>
${entry.location
? html`<div class="calendar-event-popover-row">
<span class="calendar-event-popover-icon">${PinIcon()}</span>
<span>${entry.location}</span>
</div>`
: ''}
${entry.description
? html`<div class="calendar-event-popover-row">
<span class="calendar-event-popover-icon">${TextIcon()}</span>
<span class="calendar-event-popover-description"
>${entry.description}</span
>
</div>`
: ''}
${
entry.location
? html`<div class="calendar-event-popover-row">
<span class="calendar-event-popover-icon"
>${PinIcon()}</span
>
<span>${entry.location}</span>
</div>`
: ''
}
${
entry.description
? html`<div class="calendar-event-popover-row">
<span class="calendar-event-popover-icon"
>${TextIcon()}</span
>
<span class="calendar-event-popover-description"
>${entry.description}</span
>
</div>`
: ''
}
</div>
`,
],
blocksuite/affine/data-view/src/view-presets/calendar/pc/view.ts
+124 -100
View File
@@ -416,10 +416,12 @@ export class CalendarViewUILogic extends DataViewUILogicBase<CalendarSingleView>
postfix: html`<div
style="font-size:14px;color:var(--affine-text-secondary-color);"
>
${this.view.startDateMapping$.value.status === 'ready'
? this.view.propertyGetOrCreate(selectedStart ?? '').name$
.value
: ''}
${
this.view.startDateMapping$.value.status === 'ready'
? this.view.propertyGetOrCreate(selectedStart ?? '').name$
.value
: ''
}
</div>
${ArrowRightSmallIcon()}`,
select: () => {
@@ -448,9 +450,11 @@ export class CalendarViewUILogic extends DataViewUILogicBase<CalendarSingleView>
postfix: html`<div
style="font-size:14px;color:var(--affine-text-secondary-color);"
>
${selectedEnd
? this.view.propertyGetOrCreate(selectedEnd).name$.value
: 'None'}
${
selectedEnd
? this.view.propertyGetOrCreate(selectedEnd).name$.value
: 'None'
}
</div>
${ArrowRightSmallIcon()}`,
select: () => {
@@ -726,10 +730,9 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
return html`
<div
${ref(element => this.logic.bindEntryDraggable(dndKey, entry, element))}
class="calendar-entry ${entry.kind} ${segmentClass} ${this.logic
.selectedEntryId === entry.id
? 'selected'
: ''}"
class="calendar-entry ${entry.kind} ${segmentClass} ${
this.logic.selectedEntryId === entry.id ? 'selected' : ''
}"
role="button"
tabindex="0"
aria-label=${entry.title || 'Untitled'}
@@ -744,31 +747,37 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
this.logic.handleEntryKeydown(entry, event);
}}
>
${showLeftHandle
? html`<span
class="calendar-resize-handle left"
@pointerdown=${(event: PointerEvent) =>
this.logic.startResize(entry, 'start', event)}
></span>`
: nothing}
${
showLeftHandle
? html`<span
class="calendar-resize-handle left"
@pointerdown=${(event: PointerEvent) =>
this.logic.startResize(entry, 'start', event)}
></span>`
: nothing
}
${this.renderEntryTitle(entry)}
${entry.kind === 'row' && entry.cardProperties.length
? html`<span class="calendar-entry-properties">
${entry.cardProperties.map(
property =>
html`<span class="calendar-entry-property"
>${property.value}</span
>`
)}
</span>`
: nothing}
${showRightHandle
? html`<span
class="calendar-resize-handle right"
@pointerdown=${(event: PointerEvent) =>
this.logic.startResize(entry, 'end', event)}
></span>`
: nothing}
${
entry.kind === 'row' && entry.cardProperties.length
? html`<span class="calendar-entry-properties">
${entry.cardProperties.map(
property =>
html`<span class="calendar-entry-property"
>${property.value}</span
>`
)}
</span>`
: nothing
}
${
showRightHandle
? html`<span
class="calendar-resize-handle right"
@pointerdown=${(event: PointerEvent) =>
this.logic.startResize(entry, 'end', event)}
></span>`
: nothing
}
</div>
`;
}
@@ -785,16 +794,18 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
${entry.titleSegments.map(
segment =>
html`<span
class="calendar-entry-title-segment ${segment.linkedDoc
? 'linked-doc-segment'
: ''}"
class="calendar-entry-title-segment ${
segment.linkedDoc ? 'linked-doc-segment' : ''
}"
>
${segment.linkedDoc ? LinkedPageIcon() : nothing}
${segment.text
? html`<span class="calendar-entry-title-text"
>${segment.text}</span
>`
: nothing}
${
segment.text
? html`<span class="calendar-entry-title-text"
>${segment.text}</span
>`
: nothing
}
</span>`
)}
</span>`;
@@ -895,11 +906,12 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
if (!preview) return nothing;
return html`<div
class="calendar-entry-preview ${preview.continuesLeft
? 'continues-left'
: ''} ${preview.continuesRight ? 'continues-right' : ''}"
style="grid-column:${preview.sIdx +
1} / span ${preview.span};grid-row:${preview.slot + 1};"
class="calendar-entry-preview ${
preview.continuesLeft ? 'continues-left' : ''
} ${preview.continuesRight ? 'continues-right' : ''}"
style="grid-column:${
preview.sIdx + 1
} / span ${preview.span};grid-row:${preview.slot + 1};"
>
${preview.title}
</div>`;
@@ -919,17 +931,19 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
</span>
</div>
<div class="calendar-empty-month-hint-actions">
${this.logic.view.readonly$.value
? nothing
: html`<button
class="calendar-empty-month-hint-action"
@click=${() =>
this.logic.createRowOnDate(
getDefaultCreateDate(this.logic.currentMonth)
)}
>
${PlusIcon()}<span>New row</span>
</button>`}
${
this.logic.view.readonly$.value
? nothing
: html`<button
class="calendar-empty-month-hint-action"
@click=${() =>
this.logic.createRowOnDate(
getDefaultCreateDate(this.logic.currentMonth)
)}
>
${PlusIcon()}<span>New row</span>
</button>`
}
<button
class="calendar-empty-month-hint-close"
aria-label="Dismiss"
@@ -963,14 +977,16 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
${monthFormatter.format(new Date(this.logic.currentMonth))}
</div>
<div class="calendar-nav">
${this.logic.isCurrentMonth()
? nothing
: html`<button
class="calendar-today-button"
@click=${() => this.logic.goToday()}
>
<span>Today</span>
</button>`}
${
this.logic.isCurrentMonth()
? nothing
: html`<button
class="calendar-today-button"
@click=${() => this.logic.goToday()}
>
<span>Today</span>
</button>`
}
<button
class="calendar-icon-button"
aria-label="Previous month"
@@ -1022,13 +1038,13 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
return html`
<div
data-date=${day.date}
class="calendar-day ${day.inMonth
? ''
: 'is-outside'} ${day.date === today
? 'is-today'
: ''} ${this.logic.isDayInPreview(day.date)
? 'is-drop-target'
: ''}"
class="calendar-day ${
day.inMonth ? '' : 'is-outside'
} ${day.date === today ? 'is-today' : ''} ${
this.logic.isDayInPreview(day.date)
? 'is-drop-target'
: ''
}"
style="--calendar-segment-slots:${getCalendarDaySegmentSlots(
day,
movingEntryId
@@ -1044,17 +1060,19 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
${this.renderDayPreview(day.date)}
${this.renderPreviewSpacer(day, preview, dayIndex)}
</div>
${canReserveNewRow
? html`<button
class="calendar-new-row"
aria-label="+ New row"
?disabled=${this.logic.isInteracting}
@click=${() =>
this.logic.createRowOnDate(day.date)}
>
${PlusIcon()}<span>New row</span>
</button>`
: nothing}
${
canReserveNewRow
? html`<button
class="calendar-new-row"
aria-label="+ New row"
?disabled=${this.logic.isInteracting}
@click=${() =>
this.logic.createRowOnDate(day.date)}
>
${PlusIcon()}<span>New row</span>
</button>`
: nothing
}
</div>
`;
}
@@ -1083,25 +1101,31 @@ export class CalendarViewUI extends DataViewUIBase<CalendarViewUILogic> {
override render(): TemplateResult {
const setup = this.logic.view.dateMapping$.value.status === 'setup';
return html`
${this.logic.headerWidget
? renderUniLit(this.logic.headerWidget, {
dataViewLogic: this.logic,
})
: nothing}
${
this.logic.headerWidget
? renderUniLit(this.logic.headerWidget, {
dataViewLogic: this.logic,
})
: nothing
}
<div class=${setup ? 'calendar-setup-wrap' : ''}>
<div class="calendar-scroll" @wheel="${this.logic.onWheel}">
${this.renderCalendar(setup)}
</div>
${setup
? html`<div class="calendar-setup">
<button
@click=${(event: MouseEvent) =>
this.logic.openSetupMenu(event.currentTarget as HTMLElement)}
>
${TodayIcon()}<span>Select or create date property</span>
</button>
</div>`
: nothing}
${
setup
? html`<div class="calendar-setup">
<button
@click=${(event: MouseEvent) =>
this.logic.openSetupMenu(
event.currentTarget as HTMLElement
)}
>
${TodayIcon()}<span>Select or create date property</span>
</button>
</div>`
: nothing
}
</div>
`;
}
blocksuite/affine/data-view/src/view-presets/kanban/mobile/group.ts
+12 -10
View File
@@ -121,16 +121,18 @@ export class MobileKanbanGroup extends SignalWatcher(
`;
}
)}
${this.view.readonly$.value
? nothing
: html` <div class="mobile-add-card" @click="${this.clickAddCard}">
<div
style="margin-right: 4px;width: 16px;height: 16px;display:flex;align-items:center;"
>
${AddCursorIcon()}
</div>
Add
</div>`}
${
this.view.readonly$.value
? nothing
: html` <div class="mobile-add-card" @click="${this.clickAddCard}">
<div
style="margin-right: 4px;width: 16px;height: 16px;display:flex;align-items:center;"
>
${AddCursorIcon()}
</div>
Add
</div>`
}
</div>
`;
}
blocksuite/affine/data-view/src/view-presets/kanban/pc/group.ts
+12 -10
View File
@@ -179,16 +179,18 @@ export class KanbanGroup extends SignalWatcher(
`;
}
)}
${this.view.readonly$.value
? nothing
: html`<div class="add-card" @click="${this.clickAddCard}">
<div
style="margin-right: 4px;width: 16px;height: 16px;display:flex;align-items:center;"
>
${AddCursorIcon()}
</div>
Add
</div>`}
${
this.view.readonly$.value
? nothing
: html`<div class="add-card" @click="${this.clickAddCard}">
<div
style="margin-right: 4px;width: 16px;height: 16px;display:flex;align-items:center;"
>
${AddCursorIcon()}
</div>
Add
</div>`
}
</div>
`;
}
blocksuite/affine/data-view/src/view-presets/table/mobile/group.ts
+23 -19
View File
@@ -148,9 +148,9 @@ export class MobileTableGroup extends SignalWatcher(
class=${`group-toggle-btn ${this.collapsed$.value ? '' : 'expanded'}`}
role="button"
aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
aria-label=${this.collapsed$.value
? 'Expand group'
: 'Collapse group'}
aria-label=${
this.collapsed$.value ? 'Expand group' : 'Collapse group'
}
tabindex="0"
@click=${this._toggleCollapse}
@keydown=${(e: KeyboardEvent) => {
@@ -160,9 +160,11 @@ export class MobileTableGroup extends SignalWatcher(
}
}}
>
${this.collapsed$.value
? ToggleRightIcon({ width: '16px', height: '16px' })
: ToggleDownIcon({ width: '16px', height: '16px' })}
${
this.collapsed$.value
? ToggleRightIcon({ width: '16px', height: '16px' })
: ToggleDownIcon({ width: '16px', height: '16px' })
}
</div>
${GroupTitle(this.group, {
@@ -198,20 +200,22 @@ export class MobileTableGroup extends SignalWatcher(
}
)}
</div>
${this.view.readonly$.value
? null
: html` <div
class="data-view-table-group-add-row dv-hover"
@click="${this.clickAddRow}"
>
<div
class="data-view-table-group-add-row-button dv-icon-16"
data-test-id="affine-database-add-row-button"
role="button"
${
this.view.readonly$.value
? null
: html` <div
class="data-view-table-group-add-row dv-hover"
@click="${this.clickAddRow}"
>
${PlusIcon()}<span style="font-size: 12px">New Record</span>
</div>
</div>`}
<div
class="data-view-table-group-add-row-button dv-icon-16"
data-test-id="affine-database-add-row-button"
role="button"
>
${PlusIcon()}<span style="font-size: 12px">New Record</span>
</div>
</div>`
}
`;
}
blocksuite/affine/data-view/src/view-presets/table/mobile/row.ts
+17 -13
View File
@@ -109,19 +109,23 @@ export class MobileTableRow extends SignalWatcher(
</mobile-table-cell>
<div class="${cellDivider}"></div>
</div>
${!column.readonly$.value &&
column.view.mainProperties$.value.titleColumn === column.id
? html` <div class="mobile-row-ops">
<div class="mobile-row-op" @click="${clickDetail}">
${CenterPeekIcon()}
</div>
${!view.readonly$.value
? html` <div class="mobile-row-op" @click="${openMenu}">
${MoreHorizontalIcon()}
</div>`
: nothing}
</div>`
: nothing}
${
!column.readonly$.value &&
column.view.mainProperties$.value.titleColumn === column.id
? html` <div class="mobile-row-ops">
<div class="mobile-row-op" @click="${clickDetail}">
${CenterPeekIcon()}
</div>
${
!view.readonly$.value
? html` <div class="mobile-row-op" @click="${openMenu}">
${MoreHorizontalIcon()}
</div>`
: nothing
}
</div>`
: nothing
}
`;
}
)}
blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/group-footer.ts
+16 -14
View File
@@ -74,24 +74,26 @@ export class TableGroupFooter extends WithDisposable(ShadowlessElement) {
override render() {
return html`
${this.tableViewManager.readonly$.value
? null
: html`
<div
class="${styles.addRowWrapper} dv-hover"
@click="${this.clickAddRow}"
>
${
this.tableViewManager.readonly$.value
? null
: html`
<div
class="${styles.addRowButton} dv-icon-16"
data-test-id="affine-database-add-row-button"
role="button"
class="${styles.addRowWrapper} dv-hover"
@click="${this.clickAddRow}"
>
${PlusIcon()}<span class="${styles.addRowText}"
>New Record</span
<div
class="${styles.addRowButton} dv-icon-16"
data-test-id="affine-database-add-row-button"
role="button"
>
${PlusIcon()}<span class="${styles.addRowText}"
>New Record</span
>
</div>
</div>
</div>
`}
`
}
<affine-database-virtual-column-stats
.view="${this.tableViewManager}"
.group="${this.group$.value}"
blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/bottom/stats/column-stats-column.ts
+8 -6
View File
@@ -225,12 +225,14 @@ export class VirtualDatabaseColumnStatsCell extends SignalWatcher(
class="stats-cell"
>
<div class="content">
${!this.statsResult$.value
? html`Calculate ${ArrowDownSmallIcon()}`
: html`
<span class="label">${this.statsResult$.value.name}</span>
<span class="value">${this.statsResult$.value.value} </span>
`}
${
!this.statsResult$.value
? html`Calculate ${ArrowDownSmallIcon()}`
: html`
<span class="label">${this.statsResult$.value.name}</span>
<span class="value">${this.statsResult$.value.value} </span>
`
}
</div>
</div>`;
}
blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/group-title.ts
+12 -10
View File
@@ -64,15 +64,17 @@ export const GroupTitle = (
${icon} ${renderUniLit(view, props)} ${columnName}
${GroupHeaderCount(groupData)}
</div>
${!ops.readonly
? html` <div class="${opsClass}">
<div @click="${ops.clickAdd}" class="${groupHeaderOp}">
${PlusIcon()}
</div>
<div @click="${ops.clickOps}" class="${groupHeaderOp}">
${MoreHorizontalIcon()}
</div>
</div>`
: nothing}
${
!ops.readonly
? html` <div class="${opsClass}">
<div @click="${ops.clickAdd}" class="${groupHeaderOp}">
${PlusIcon()}
</div>
<div @click="${ops.clickOps}" class="${groupHeaderOp}">
${MoreHorizontalIcon()}
</div>
</div>`
: nothing
}
`;
};
blocksuite/affine/data-view/src/view-presets/table/pc-virtual/group/top/header/single-column-header.ts
+10 -8
View File
@@ -428,14 +428,16 @@ export class DatabaseHeaderColumn extends SignalWatcher(
${draggable(column.id)}
${droppable(column.id)}
>
${this.readonly
? null
: html` <button class="${classes}">
<div class="hover-trigger"></div>
<div class="control-h"></div>
<div class="control-l"></div>
<div class="control-r"></div>
</button>`}
${
this.readonly
? null
: html` <button class="${classes}">
<div class="hover-trigger"></div>
<div class="control-h"></div>
<div class="control-l"></div>
<div class="control-r"></div>
</button>`
}
<div class="affine-database-column-text ${column.type$.value}">
<div
class="affine-database-column-type-icon dv-hover"
blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header.ts
+5 -3
View File
@@ -84,9 +84,11 @@ export class TableRowHeader extends SignalWatcher(
return html`
<div @click=${this.selectRow} class="${styles.checkboxWrapper}">
<div class="${classString}">
${this.rowSelected$.value
? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
: CheckBoxUnIcon()}
${
this.rowSelected$.value
? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
: CheckBoxUnIcon()
}
</div>
</div>
`;
blocksuite/affine/data-view/src/view-presets/table/pc/group.ts
+23 -19
View File
@@ -206,9 +206,9 @@ export class TableGroup extends SignalWatcher(
class=${`group-toggle-btn ${this.collapsed$.value ? '' : 'expanded'}`}
role="button"
aria-expanded=${this.collapsed$.value ? 'false' : 'true'}
aria-label=${this.collapsed$.value
? 'Expand group'
: 'Collapse group'}
aria-label=${
this.collapsed$.value ? 'Expand group' : 'Collapse group'
}
tabindex="0"
@click=${this._toggleCollapse}
@keydown=${(e: KeyboardEvent) => {
@@ -218,9 +218,11 @@ export class TableGroup extends SignalWatcher(
}
}}
>
${this.collapsed$.value
? ToggleRightIcon({ width: '16px', height: '16px' })
: ToggleDownIcon({ width: '16px', height: '16px' })}
${
this.collapsed$.value
? ToggleRightIcon({ width: '16px', height: '16px' })
: ToggleDownIcon({ width: '16px', height: '16px' })
}
</div>
${GroupTitle(this.group, {
@@ -344,20 +346,22 @@ export class TableGroup extends SignalWatcher(
}
)}
</div>
${this.view.readonly$.value
? null
: html` <div
class="data-view-table-group-add-row dv-hover"
@click="${this.clickAddRow}"
>
<div
class="data-view-table-group-add-row-button dv-icon-16"
data-test-id="affine-database-add-row-button"
role="button"
${
this.view.readonly$.value
? null
: html` <div
class="data-view-table-group-add-row dv-hover"
@click="${this.clickAddRow}"
>
${PlusIcon()}<span style="font-size: 12px">New Record</span>
</div>
</div>`}
<div
class="data-view-table-group-add-row-button dv-icon-16"
data-test-id="affine-database-add-row-button"
role="button"
>
${PlusIcon()}<span style="font-size: 12px">New Record</span>
</div>
</div>`
}
<affine-database-column-stats
.tableViewLogic="${this.tableViewLogic}"
.group="${this.group}"
blocksuite/affine/data-view/src/view-presets/table/pc/header/column-header.ts
+5 -3
View File
@@ -87,9 +87,11 @@ export class DatabaseColumnHeader extends SignalWatcher(
return html`
${this.renderGroupHeader?.()}
<div class="affine-database-column-header database-row">
${this.readonly
? nothing
: html`<div class="${tableStyle.leftToolBarStyle}"></div>`}
${
this.readonly
? nothing
: html`<div class="${tableStyle.leftToolBarStyle}"></div>`
}
${repeat(
this.tableViewManager.properties$.value,
column => column.id,
blocksuite/affine/data-view/src/view-presets/table/pc/header/database-header-column.ts
+10 -8
View File
@@ -431,14 +431,16 @@ export class DatabaseHeaderColumn extends SignalWatcher(
${draggable(column.id)}
${droppable(column.id)}
>
${this.readonly
? null
: html` <button class="${classes}">
<div class="hover-trigger"></div>
<div class="control-h"></div>
<div class="control-l"></div>
<div class="control-r"></div>
</button>`}
${
this.readonly
? null
: html` <button class="${classes}">
<div class="hover-trigger"></div>
<div class="control-h"></div>
<div class="control-l"></div>
<div class="control-r"></div>
</button>`
}
<div class="affine-database-column-text ${column.type$.value}">
<div
class="affine-database-column-type-icon dv-hover"
blocksuite/affine/data-view/src/view-presets/table/pc/row/row-select-checkbox.ts
+5 -3
View File
@@ -71,9 +71,11 @@ export class RowSelectCheckbox extends SignalWatcher(
});
return html`
<div class="${classString}">
${this.isSelected$.value
? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
: CheckBoxUnIcon()}
${
this.isSelected$.value
? CheckBoxCheckSolidIcon({ style: `color:#1E96EB` })
: CheckBoxUnIcon()
}
</div>
`;
}
blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts
+36 -30
View File
@@ -177,28 +177,30 @@ export class TableRowView extends SignalWatcher(
protected override render(): unknown {
const view = this.view;
return html`
${view.readonly$.value
? nothing
: html`<div class="data-view-table-left-bar" style="height: 34px">
<div style="display: flex;">
<div
class="data-view-table-view-drag-handler show-on-hover-row row-selected-bg"
@click=${this._clickDragHandler}
>
${
view.readonly$.value
? nothing
: html`<div class="data-view-table-left-bar" style="height: 34px">
<div style="display: flex;">
<div
style="width: 4px;
class="data-view-table-view-drag-handler show-on-hover-row row-selected-bg"
@click=${this._clickDragHandler}
>
<div
style="width: 4px;
border-radius: 2px;
height: 12px;
background-color: var(--affine-placeholder-color);"
></div>
></div>
</div>
<row-select-checkbox
.tableViewLogic="${this.tableViewLogic}"
.rowId="${this.rowId}"
.groupKey="${this.groupKey}"
></row-select-checkbox>
</div>
<row-select-checkbox
.tableViewLogic="${this.tableViewLogic}"
.rowId="${this.rowId}"
.groupKey="${this.groupKey}"
></row-select-checkbox>
</div>
</div>`}
</div>`
}
${repeat(
view.properties$.value,
v => v.id,
@@ -265,19 +267,23 @@ export class TableRowView extends SignalWatcher(
</dv-table-view-cell-container>
<div class="${cellDivider}"></div>
</div>
${!column.readonly$.value &&
column.view.mainProperties$.value.titleColumn === column.id
? html`<div class="row-ops show-on-hover-row">
<div class="row-op" @click="${clickDetail}">
${CenterPeekIcon()}
</div>
${!view.readonly$.value
? html`<div class="row-op" @click="${openMenu}">
${MoreHorizontalIcon()}
</div>`
: nothing}
</div>`
: nothing}
${
!column.readonly$.value &&
column.view.mainProperties$.value.titleColumn === column.id
? html`<div class="row-ops show-on-hover-row">
<div class="row-op" @click="${clickDetail}">
${CenterPeekIcon()}
</div>
${
!view.readonly$.value
? html`<div class="row-op" @click="${openMenu}">
${MoreHorizontalIcon()}
</div>`
: nothing
}
</div>`
: nothing
}
`;
}
)}
blocksuite/affine/data-view/src/view-presets/table/pc/table-view-ui-logic.ts
+14 -10
View File
@@ -191,11 +191,13 @@ export class TableViewUI extends DataViewUIBase<TableViewUILogic> {
paddingRight: `${vPadding}px`,
});
return html`
${this.logic.headerWidget
? renderUniLit(this.logic.headerWidget, {
dataViewLogic: this.logic,
})
: ''}
${
this.logic.headerWidget
? renderUniLit(this.logic.headerWidget, {
dataViewLogic: this.logic,
})
: ''
}
<div class="${tableWrapperStyle}" style="${wrapperStyle}">
<div
${ref(this.logic.scrollContainer$)}
@@ -207,11 +209,13 @@ export class TableViewUI extends DataViewUIBase<TableViewUILogic> {
class="affine-database-table-container"
style="${containerStyle}"
>
${this.logic.view.groupTrait.allHidden$.value
? html`<div class="${groupsHiddenMessageStyle}">
All groups are hidden
</div>`
: this.renderTable()}
${
this.logic.view.groupTrait.allHidden$.value
? html`<div class="${groupsHiddenMessageStyle}">
All groups are hidden
</div>`
: this.renderTable()
}
</div>
</div>
</div>
blocksuite/affine/data-view/src/view-presets/table/stats/column-stats-column.ts
+8 -6
View File
@@ -225,12 +225,14 @@ export class DatabaseColumnStatsCell extends SignalWatcher(
class="stats-cell"
>
<div class="content">
${!this.statsResult$.value
? html`Calculate ${ArrowDownSmallIcon()}`
: html`
<span class="label">${this.statsResult$.value.name}</span>
<span class="value">${this.statsResult$.value.value} </span>
`}
${
!this.statsResult$.value
? html`Calculate ${ArrowDownSmallIcon()}`
: html`
<span class="label">${this.statsResult$.value.name}</span>
<span class="value">${this.statsResult$.value.value} </span>
`
}
</div>
</div>`;
}
blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/group-panel-view.ts
+21 -19
View File
@@ -374,25 +374,27 @@ export class FilterGroupView extends SignalWatcher(ShadowlessElement) {
<div
style="flex:1;display:flex;align-items:start;justify-content: space-between;gap: 8px;"
>
${filter.type === 'filter'
? html`
<filter-condition-view
.vars="${this.vars}"
.index="${i}"
.value="${this.conditions$}"
.onChange="${this.setConditions}"
></filter-condition-view>
`
: html`
<filter-group-view
class="${groupClassList}"
style="width: 100%;"
.depth="${this.depth + 1}"
.onChange="${(v: Filter) => this._setFilter(i, v)}"
.vars="${this.vars}"
.filterGroup="${computed(() => filter)}"
></filter-group-view>
`}
${
filter.type === 'filter'
? html`
<filter-condition-view
.vars="${this.vars}"
.index="${i}"
.value="${this.conditions$}"
.onChange="${this.setConditions}"
></filter-condition-view>
`
: html`
<filter-group-view
class="${groupClassList}"
style="width: 100%;"
.depth="${this.depth + 1}"
.onChange="${(v: Filter) => this._setFilter(i, v)}"
.vars="${this.vars}"
.filterGroup="${computed(() => filter)}"
></filter-group-view>
`
}
<div class="filter-group-item-ops" @click="${clickOps}">
${MoreHorizontalIcon()}
</div>
blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/index.ts
+9 -7
View File
@@ -37,13 +37,15 @@ export const widgetQuickSettingBar = defineUniComponent(
>
${barList.map((bar, index) => {
return html`
${index !== 0
? html` <div
style="width: 1px;height:27px;background-color: ${unsafeCSSVarV2(
'layer/insideBorder/border'
)}"
></div>`
: nothing}
${
index !== 0
? html` <div
style="width: 1px;height:27px;background-color: ${unsafeCSSVarV2(
'layer/insideBorder/border'
)}"
></div>`
: nothing
}
${bar}
`;
})}
blocksuite/affine/data-view/src/widget-presets/tools/presets/table-add-row/add-row.ts
+5 -3
View File
@@ -36,9 +36,11 @@ export class DataViewHeaderToolsAddRow extends WidgetBase {
class="affine-database-toolbar-item new-record"
.onClick="${this.onAddNewRecord}"
.icon="${PlusIcon()}"
.text="${IS_MOBILE
? html`<span style="font-weight: 500">New</span>`
: html`<span style="font-weight: 500">New Record</span>`}"
.text="${
IS_MOBILE
? html`<span style="font-weight: 500">New</span>`
: html`<span style="font-weight: 500">New Record</span>`
}"
>
</data-view-component-button>`;
}
blocksuite/affine/data-view/src/widget-presets/tools/presets/view-options/view-options.ts
+14 -10
View File
@@ -440,11 +440,13 @@ export const popViewOptions = (
closeOnSelect: false,
postfix: html`
<div style="font-size: 14px;">
${filterCount === 0
? ''
: filterCount === 1
? '1 active'
: `${filterCount} active`}
${
filterCount === 0
? ''
: filterCount === 1
? '1 active'
: `${filterCount} active`
}
</div>
${ArrowRightSmallIcon()}
`,
@@ -466,11 +468,13 @@ export const popViewOptions = (
closeOnSelect: false,
postfix: html`
<div style="font-size: 14px;">
${sortCount === 0
? ''
: sortCount === 1
? '1 active'
: `${sortCount} active`}
${
sortCount === 0
? ''
: sortCount === 1
? '1 active'
: `${sortCount} active`
}
</div>
${ArrowRightSmallIcon()}
`,