@formicoidea/labre-core 0.49.0 → 0.51.0

package/dist/_pkgs/data-view/translations.d.ts

@@ -51,5 +51,39 @@ export declare const DATA_VIEW_OPEN_IN: ChromeWording;
 export declare const DATA_VIEW_OPEN_IN_SIDE: ChromeWording;
 export declare const DATA_VIEW_OPEN_IN_CENTER: ChromeWording;
 export declare const DATA_VIEW_OPEN_IN_FULL: ChromeWording;
+/** The view setting, its menu title and the full page's "This view" entry. */
+export declare const DATA_VIEW_COLOR_RULES: ChromeWording;
+export declare const DATA_VIEW_COLOR_RULES_ADD: ChromeWording;
+/** The title of one rule's menu: its conditions, its colour, its place. */
+export declare const DATA_VIEW_COLOR_RULE: ChromeWording;
+export declare const DATA_VIEW_COLOR_RULE_ADD_CONDITION: ChromeWording;
+/** A rule's name in the list when its conditions were all removed. */
+export declare const DATA_VIEW_COLOR_RULE_NO_CONDITION: ChromeWording;
+/** The order decides: the first rule that matches a row colours it. */
+export declare const DATA_VIEW_COLOR_RULE_MOVE_UP: ChromeWording;
+export declare const DATA_VIEW_COLOR_RULE_MOVE_DOWN: ChromeWording;
+/**
+ * The title of that list: the view options' popover and the database's side
+ * panel (`PROPERTIES_PANEL_TITLE` there is this wording). One chrome word,
+ * one key; the key keeps the panel's spelling of 0.49, which hosts already
+ * translate.
+ */
+export declare const DATA_VIEW_PROPERTIES: ChromeWording;
+/**
+ * The last row of the properties list: adds a property to the source, every
+ * view at once, through the type picker, then opens its menu.
+ */
+export declare const DATA_VIEW_NEW_PROPERTY: ChromeWording;
+/**
+ * A property's menu entry (the table header's and the properties list's):
+ * hides the property in this view only. Its neighbours say the toolbar's
+ * "Duplicate" and "Delete".
+ */
+export declare const DATA_VIEW_PROPERTY_HIDE_IN_VIEW: ChromeWording;
+/**
+ * The title of that type picker, and of the "Type" sub-menu of a
+ * property's menu.
+ */
+export declare const DATA_VIEW_PROPERTY_TYPE: ChromeWording;
 /** Walked by `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`. */
 export declare const DATA_VIEW_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/data-view/translations.js

@@ -149,6 +149,75 @@ export const DATA_VIEW_OPEN_IN_FULL = [
     'com.labre.data-view.open-in.full',
     'Full page',
 ];
+/* ── Conditional colours of a view (ADR 0036) ───────────────────────── */
+/** The view setting, its menu title and the full page's "This view" entry. */
+export const DATA_VIEW_COLOR_RULES = [
+    'com.labre.data-view.color-rules',
+    'Conditional colors',
+];
+export const DATA_VIEW_COLOR_RULES_ADD = [
+    'com.labre.data-view.color-rules.add',
+    'Add a color rule',
+];
+/** The title of one rule's menu: its conditions, its colour, its place. */
+export const DATA_VIEW_COLOR_RULE = [
+    'com.labre.data-view.color-rules.rule',
+    'Color rule',
+];
+export const DATA_VIEW_COLOR_RULE_ADD_CONDITION = [
+    'com.labre.data-view.color-rules.add-condition',
+    'Add a condition',
+];
+/** A rule's name in the list when its conditions were all removed. */
+export const DATA_VIEW_COLOR_RULE_NO_CONDITION = [
+    'com.labre.data-view.color-rules.no-condition',
+    'No condition',
+];
+/** The order decides: the first rule that matches a row colours it. */
+export const DATA_VIEW_COLOR_RULE_MOVE_UP = [
+    'com.labre.data-view.color-rules.move-up',
+    'Move up',
+];
+export const DATA_VIEW_COLOR_RULE_MOVE_DOWN = [
+    'com.labre.data-view.color-rules.move-down',
+    'Move down',
+];
+/* ── A view's properties list (view options, side panel) ─────────────── */
+/**
+ * The title of that list: the view options' popover and the database's side
+ * panel (`PROPERTIES_PANEL_TITLE` there is this wording). One chrome word,
+ * one key; the key keeps the panel's spelling of 0.49, which hosts already
+ * translate.
+ */
+export const DATA_VIEW_PROPERTIES = [
+    'com.labre.database.properties-panel.title',
+    'Properties',
+];
+/**
+ * The last row of the properties list: adds a property to the source, every
+ * view at once, through the type picker, then opens its menu.
+ */
+export const DATA_VIEW_NEW_PROPERTY = [
+    'com.labre.data-view.properties.new',
+    'New property',
+];
+/**
+ * A property's menu entry (the table header's and the properties list's):
+ * hides the property in this view only. Its neighbours say the toolbar's
+ * "Duplicate" and "Delete".
+ */
+export const DATA_VIEW_PROPERTY_HIDE_IN_VIEW = [
+    'com.labre.data-view.property.hide-in-view',
+    'Hide In View',
+];
+/**
+ * The title of that type picker, and of the "Type" sub-menu of a
+ * property's menu.
+ */
+export const DATA_VIEW_PROPERTY_TYPE = [
+    'com.labre.data-view.property.type',
+    'Property type',
+];
 /** Walked by `PACKAGE_WORDINGS` in `packages/affine/all/src/translations.ts`. */
 export const DATA_VIEW_WORDINGS = [
     VIEW_SHOWN_AS_TABLE,
@@ -178,4 +247,15 @@ export const DATA_VIEW_WORDINGS = [
     DATA_VIEW_OPEN_IN_SIDE,
     DATA_VIEW_OPEN_IN_CENTER,
     DATA_VIEW_OPEN_IN_FULL,
+    DATA_VIEW_COLOR_RULES,
+    DATA_VIEW_COLOR_RULES_ADD,
+    DATA_VIEW_COLOR_RULE,
+    DATA_VIEW_COLOR_RULE_ADD_CONDITION,
+    DATA_VIEW_COLOR_RULE_NO_CONDITION,
+    DATA_VIEW_COLOR_RULE_MOVE_UP,
+    DATA_VIEW_COLOR_RULE_MOVE_DOWN,
+    DATA_VIEW_PROPERTIES,
+    DATA_VIEW_NEW_PROPERTY,
+    DATA_VIEW_PROPERTY_TYPE,
+    DATA_VIEW_PROPERTY_HIDE_IN_VIEW,
 ];

package/dist/_pkgs/data-view/view-presets/gallery/gallery-view.js

@@ -2,8 +2,10 @@ import { PlusIcon } from '@blocksuite/icons/lit';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { groupToggleStyles } from '../../core/group-by/group-visibility.js';
 import { createUniComponentFromWebComponent } from '../../core/utils/uni-component/uni-component.js';
+import { ROW_COLOR_PROPERTY, rowColorStyle, viewRowColor, } from '../../core/view/color-rules.js';
 import { DATA_VIEW_NEW_PAGE } from '../../translations.js';
 import { flatGroupStyles, flatOpenButtonStyles, FlatViewUI, FlatViewUILogic, } from '../flat/flat-view-ui.js';
 /**
@@ -50,7 +52,10 @@ export class GalleryViewUI extends FlatViewUI {
         box-sizing: border-box;
         border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
         border-radius: 8px;
-        background-color: var(--affine-background-primary-color);
+        background-color: var(
+          ${unsafeCSS(ROW_COLOR_PROPERTY)},
+          var(--affine-background-primary-color)
+        );
         cursor: pointer;
       }
 
@@ -141,6 +146,7 @@ export class GalleryViewUI extends FlatViewUI {
       class="dv-gallery-card"
       data-testid="dv-gallery-card"
       data-row-id="${rowId}"
+      style=${styleMap(rowColorStyle(viewRowColor(view, rowId)))}
       @click="${this.onRowClick}"
     >
       ${title

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

@@ -43,6 +43,7 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
+import { paintRowColor, ROW_COLOR_PROPERTY, viewRowColor, } from '../../../core/view/color-rules.js';
 import { popCardMenu } from './menu.js';
 const styles = css `
   mobile-kanban-card {
@@ -52,7 +53,10 @@ const styles = css `
     border: 0.5px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
     border-radius: 8px;
-    background-color: var(--affine-background-kanban-card-color);
+    background-color: var(
+      ${unsafeCSS(ROW_COLOR_PROPERTY)},
+      var(--affine-background-kanban-card-color)
+    );
   }
 
   .mobile-card-header {
@@ -225,6 +229,7 @@ let MobileKanbanCard = (() => {
         }
         render() {
             const columns = this.view.properties$.value.filter(v => !this.view.isInHeader(v.id));
+            paintRowColor(this, viewRowColor(this.view, this.cardId));
             return html `
       ${this.renderHeader(columns)} ${this.renderBody(columns)}
       ${this.renderOps()}

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

@@ -44,6 +44,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import { isNewTabClick } from '../../../core/utils/new-tab-click.js';
+import { paintRowColor, ROW_COLOR_PROPERTY, viewRowColor, } from '../../../core/view/color-rules.js';
 import { openDetail, popCardMenu } from './menu.js';
 const styles = css `
   affine-data-view-kanban-card {
@@ -54,7 +55,10 @@ const styles = css `
     box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
     border-radius: 8px;
     transition: background-color 100ms ease-in-out;
-    background-color: var(--affine-background-kanban-card-color);
+    background-color: var(
+      ${unsafeCSS(ROW_COLOR_PROPERTY)},
+      var(--affine-background-kanban-card-color)
+    );
   }
 
   affine-data-view-kanban-card:hover {
@@ -287,6 +291,7 @@ let KanbanCard = (() => {
             this.style.border = this.isFocus$.value
                 ? '1px solid var(--affine-primary-color)'
                 : '';
+            paintRowColor(this, viewRowColor(this.view, this.cardId));
             return html `
       ${this.renderHeader(columns)} ${this.renderBody(columns)}
       ${this.renderOps()}

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

@@ -2,8 +2,10 @@ import { PlusIcon } from '@blocksuite/icons/lit';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { groupToggleStyles } from '../../core/group-by/group-visibility.js';
 import { createUniComponentFromWebComponent } from '../../core/utils/uni-component/uni-component.js';
+import { ROW_COLOR_PROPERTY, rowColorStyle, viewRowColor, } from '../../core/view/color-rules.js';
 import { DATA_VIEW_NEW_PAGE } from '../../translations.js';
 import { flatGroupStyles, flatOpenButtonStyles, FlatViewUI, FlatViewUILogic, } from '../flat/flat-view-ui.js';
 /**
@@ -45,6 +47,7 @@ export class ListViewUI extends FlatViewUI {
         box-sizing: border-box;
         border-bottom: 1px solid
           ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        background-color: var(${unsafeCSS(ROW_COLOR_PROPERTY)}, transparent);
         cursor: pointer;
       }
 
@@ -158,6 +161,7 @@ export class ListViewUI extends FlatViewUI {
       class="dv-list-row"
       data-testid="dv-list-row"
       data-row-id="${rowId}"
+      style=${styleMap(rowColorStyle(viewRowColor(view, rowId)))}
       @click="${this.onRowClick}"
     >
       <div class="dv-list-row-title">

package/dist/_pkgs/data-view/view-presets/table/mobile/row.js

@@ -43,6 +43,7 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
+import { paintRowColor, ROW_COLOR_PROPERTY, viewRowColor, } from '../../../core/view/color-rules.js';
 import { cellDivider } from '../styles.js';
 import { popMobileRowMenu } from './menu.js';
 let MobileTableRow = (() => {
@@ -77,6 +78,7 @@ let MobileTableRow = (() => {
       border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       position: relative;
       min-height: 44px;
+      background-color: var(${unsafeCSS(ROW_COLOR_PROPERTY)}, transparent);
     }
 
     .mobile-row-ops {
@@ -122,6 +124,7 @@ let MobileTableRow = (() => {
         }
         render() {
             const view = this.view;
+            paintRowColor(this, viewRowColor(view, this.rowId));
             return html `
       ${repeat(view.properties$.value, v => v.id, (column, i) => {
                 const clickDetail = () => {

package/dist/_pkgs/data-view/view-presets/table/pc/header/database-header-column.d.ts

@@ -1,4 +1,4 @@
-import { ShadowlessElement } from '../../../../../std/index.js';
+import { type BlockStdScope, ShadowlessElement } from '../../../../../std/index.js';
 import type { TableProperty } from '../../table-view-manager.js';
 import type { TableViewUILogic } from '../table-view-ui-logic.js';
 declare const DatabaseHeaderColumn_base: typeof ShadowlessElement & import("../../../../../global/utils/types.js").Constructor<import("../../../../../global/lit/with-disposable.js").DisposableClass>;
@@ -22,6 +22,8 @@ export declare class DatabaseHeaderColumn extends DatabaseHeaderColumn_base {
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult;
     accessor column: TableProperty;
+    /** Absent outside an editor (a unit test): the menu reads English. */
+    accessor std: BlockStdScope;
     accessor grabStatus: 'grabStart' | 'grabEnd' | 'grabbing';
     accessor tableViewLogic: TableViewUILogic;
     get tableViewManager(): import("../../table-view-manager.js").TableSingleView;