@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/data-view/core/common/property-menu.js

@@ -1,22 +1,7 @@
 import { menu } from '../../../affine-components/context-menu/index.js';
-import { IS_MOBILE } from '../../../global/env/index.js';
 import { html } from 'lit/static-html.js';
 import { renderUniLit } from '../utils/uni-component/index.js';
 export const inputConfig = (property) => {
-    if (IS_MOBILE) {
-        return menu.input({
-            prefix: html `
-        <div class="affine-database-column-type-menu-icon">
-          ${renderUniLit(property.icon)}
-        </div>
-      `,
-            initialValue: property.name$.value,
-            placeholder: 'Property name',
-            onChange: text => {
-                property.nameSet(text);
-            },
-        });
-    }
     return menu.input({
         prefix: html `
       <div class="affine-database-column-type-menu-icon">
@@ -25,7 +10,9 @@ export const inputConfig = (property) => {
     `,
         initialValue: property.name$.value,
         placeholder: 'Property name',
-        onComplete: text => {
+        // Persist on blur so the typed name survives the menu being dismissed by
+        // a click outside, which never fires the completion path.
+        onBlur: text => {
             property.nameSet(text);
         },
     });

package/dist/_pkgs/data-view/core/component/tags/multi-tag-select.d.ts

@@ -9,7 +9,9 @@ export type TagManagerOptions = {
     options: ReadonlySignal<SelectTag[]>;
     onOptionsChange: (options: SelectTag[]) => void;
     onComplete?: () => void;
+    initialDraftText?: string;
 };
+export declare function consumeTagDraftFromTableCellHost(fromElement: Element): string | undefined;
 declare const MultiTagSelect_base: typeof ShadowlessElement & import("../../../../global/utils/types.js").Constructor<import("../../../../global/lit/with-disposable.js").DisposableClass>;
 export declare class MultiTagSelect extends MultiTagSelect_base {
     private readonly _clickItemOption;
@@ -23,6 +25,7 @@ export declare class MultiTagSelect extends MultiTagSelect_base {
     private renderTag;
     private renderTags;
     private setSelectedOption;
+    connectedCallback(): void;
     protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult;
     private readonly _selectInput;
@@ -33,6 +36,7 @@ export declare class MultiTagSelect extends MultiTagSelect_base {
     accessor options: ReadonlySignal<SelectTag[]>;
     private readonly selectedIndex$;
     accessor value: ReadonlySignal<string[]>;
+    accessor initialDraftText: string | undefined;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/_pkgs/data-view/core/component/tags/multi-tag-select.js

@@ -58,6 +58,12 @@ import { verticalListSortingStrategy } from '../../utils/wc-dnd/sort/strategies/
 import { arrayMove } from '../../utils/wc-dnd/utils/array-move.js';
 import { getTagColor, selectOptionColors } from './colors.js';
 import { selectedStyle, selectOptionContentStyle, selectOptionDragHandlerStyle, selectOptionIconStyle, selectOptionNewIconStyle, selectOptionsContainerStyle, selectOptionsTipsStyle, selectOptionStyle, tagContainerStyle, tagDeleteIconStyle, tagSelectContainerStyle, tagSelectInputContainerStyle, tagSelectInputStyle, tagTextStyle, } from './styles-css.js';
+// Parent elements that can hand over a tag draft typed in the table.
+const TABLE_CELL_HOST_SELECTOR = 'dv-table-view-cell-container, affine-database-virtual-cell-container';
+export function consumeTagDraftFromTableCellHost(fromElement) {
+    const host = fromElement.closest(TABLE_CELL_HOST_SELECTOR);
+    return host?.consumeTagDraft?.();
+}
 class TagManager {
     get isSingleMode() {
         return this.ops.mode === 'single';
@@ -179,6 +185,9 @@ let MultiTagSelect = (() => {
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
+    let _initialDraftText_decorators;
+    let _initialDraftText_initializers = [];
+    let _initialDraftText_extraInitializers = [];
     return class MultiTagSelect extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -188,12 +197,14 @@ let MultiTagSelect = (() => {
             _onOptionsChange_decorators = [property({ attribute: false })];
             _options_decorators = [property({ attribute: false })];
             _value_decorators = [property({ attribute: false })];
+            _initialDraftText_decorators = [property({ attribute: false })];
             __esDecorate(this, null, _mode_decorators, { kind: "accessor", name: "mode", static: false, private: false, access: { has: obj => "mode" in obj, get: obj => obj.mode, set: (obj, value) => { obj.mode = value; } }, metadata: _metadata }, _mode_initializers, _mode_extraInitializers);
             __esDecorate(this, null, _onChange_decorators, { kind: "accessor", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange, set: (obj, value) => { obj.onChange = value; } }, metadata: _metadata }, _onChange_initializers, _onChange_extraInitializers);
             __esDecorate(this, null, _onComplete_decorators, { kind: "accessor", name: "onComplete", static: false, private: false, access: { has: obj => "onComplete" in obj, get: obj => obj.onComplete, set: (obj, value) => { obj.onComplete = value; } }, metadata: _metadata }, _onComplete_initializers, _onComplete_extraInitializers);
             __esDecorate(this, null, _onOptionsChange_decorators, { kind: "accessor", name: "onOptionsChange", static: false, private: false, access: { has: obj => "onOptionsChange" in obj, get: obj => obj.onOptionsChange, set: (obj, value) => { obj.onOptionsChange = value; } }, metadata: _metadata }, _onOptionsChange_initializers, _onOptionsChange_extraInitializers);
             __esDecorate(this, null, _options_decorators, { kind: "accessor", name: "options", static: false, private: false, access: { has: obj => "options" in obj, get: obj => obj.options, set: (obj, value) => { obj.options = value; } }, metadata: _metadata }, _options_initializers, _options_extraInitializers);
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _initialDraftText_decorators, { kind: "accessor", name: "initialDraftText", static: false, private: false, access: { has: obj => "initialDraftText" in obj, get: obj => obj.initialDraftText, set: (obj, value) => { obj.initialDraftText = value; } }, metadata: _metadata }, _initialDraftText_initializers, _initialDraftText_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         get text() {
@@ -292,6 +303,14 @@ let MultiTagSelect = (() => {
         setSelectedOption(index) {
             this.selectedIndex$.value = rangeWrap(index, 0, this.tagManager.filteredOptions$.value.length);
         }
+        connectedCallback() {
+            super.connectedCallback();
+            const draft = this.initialDraftText;
+            if (draft != null && draft !== '') {
+                this.tagManager.text$.value = draft;
+                this.initialDraftText = undefined;
+            }
+        }
         firstUpdated() {
             const disposables = this.disposables;
             this.classList.add(tagSelectContainerStyle);
@@ -330,6 +349,9 @@ let MultiTagSelect = (() => {
         #value_accessor_storage;
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
+        #initialDraftText_accessor_storage;
+        get initialDraftText() { return this.#initialDraftText_accessor_storage; }
+        set initialDraftText(value) { this.#initialDraftText_accessor_storage = value; }
         constructor() {
             super(...arguments);
             this._clickItemOption = (e, id) => {
@@ -452,13 +474,17 @@ let MultiTagSelect = (() => {
             this.#options_accessor_storage = (__runInitializers(this, _onOptionsChange_extraInitializers), __runInitializers(this, _options_initializers, void 0));
             this.selectedIndex$ = (__runInitializers(this, _options_extraInitializers), signal(0));
             this.#value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
-            __runInitializers(this, _value_extraInitializers);
+            this.#initialDraftText_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _initialDraftText_initializers, void 0));
+            __runInitializers(this, _initialDraftText_extraInitializers);
         }
     };
 })();
 export { MultiTagSelect };
 const popMobileTagSelect = (target, ops) => {
     const tagManager = new TagManager(ops);
+    if (ops.initialDraftText) {
+        tagManager.text$.value = ops.initialDraftText;
+    }
     const onInput = (e) => {
         tagManager.text$.value = e.target.value;
     };
@@ -550,6 +576,7 @@ export const popTagSelect = (target, ops) => {
     component.onChange = ops.onChange;
     component.options = ops.options;
     component.onOptionsChange = ops.onOptionsChange;
+    component.initialDraftText = ops.initialDraftText;
     component.onComplete = () => {
         ops.onComplete?.();
         remove();

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

@@ -1,6 +1,6 @@
 import type { DatabaseAllEvents, EventTraceFn } from '../../affine-shared/services/index.js';
 import type { DisposableMember } from '../../global/disposable/index.js';
-import { type Clipboard, type EventName, ShadowlessElement, type UIEventHandler } from '../../std/index.js';
+import { type Clipboard, type DndController, type EventName, ShadowlessElement, type UIEventHandler } from '../../std/index.js';
 import { type ReadonlySignal } from '@preact/signals-core';
 import type { DataSource } from './data-source/index.js';
 import type { DataViewSelection } from './types.js';
@@ -9,6 +9,7 @@ import type { SingleView } from './view-manager/single-view.js';
 import type { DataViewWidget } from './widget/index.js';
 export type DataViewRendererConfig = {
     clipboard: Clipboard;
+    dnd?: DndController;
     onDrag?: (evt: MouseEvent, id: string) => () => void;
     notification: {
         toast: (message: string) => void;
@@ -33,6 +34,7 @@ export declare class DataViewRootUILogic {
     private get dataSource();
     private get viewManager();
     private createDataViewUILogic;
+    private readonly _viewsCache;
     private readonly views$;
     private readonly viewsMap$;
     private readonly _uiRef;

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

@@ -43,7 +43,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 import { dataViewCommonStyle } from './common/css-variable.js';
-import { cacheComputed } from './utils/cache.js';
 import { renderUniLit } from './utils/uni-component/index.js';
 export class DataViewRootUILogic {
     get dataSource() {
@@ -70,9 +69,32 @@ export class DataViewRootUILogic {
     }
     constructor(config) {
         this.config = config;
-        this.views$ = cacheComputed(this.viewManager.views$, viewId => this.createDataViewUILogic(viewId));
+        this._viewsCache = new Map();
+        this.views$ = computed(() => {
+            const viewDataList = this.dataSource.viewDataList$.value;
+            const validIds = new Set(viewDataList.map(viewData => viewData.id));
+            for (const cachedId of this._viewsCache.keys()) {
+                if (!validIds.has(cachedId)) {
+                    this._viewsCache.delete(cachedId);
+                }
+            }
+            return viewDataList.map(viewData => {
+                const cached = this._viewsCache.get(viewData.id);
+                // The id survives a layout change, the mode does not: a view switched
+                // from table to kanban needs a fresh UI logic.
+                if (cached && cached.mode === viewData.mode) {
+                    return cached.logic;
+                }
+                const logic = this.createDataViewUILogic(viewData.id);
+                this._viewsCache.set(viewData.id, {
+                    mode: viewData.mode,
+                    logic,
+                });
+                return logic;
+            });
+        });
         this.viewsMap$ = computed(() => {
-            return Object.fromEntries(this.views$.list.value.map(logic => [logic.view.id, logic]));
+            return Object.fromEntries(this.views$.value.map(logic => [logic.view.id, logic]));
         });
         this._uiRef = signal();
         this.currentViewId$ = computed(() => {

package/dist/_pkgs/data-view/core/detail/field.js

@@ -119,9 +119,9 @@ let RecordField = (() => {
       border: 1px solid transparent;
     }
 
-    .field-content .affine-database-number {
+    .field-content affine-database-number-cell .number {
       text-align: left;
-      justify-content: start;
+      justify-content: flex-start;
     }
 
     .field-content:hover {

package/dist/_pkgs/data-view/core/detail/selection.d.ts

@@ -1,18 +1,20 @@
 import type { KanbanCardSelection } from '../../view-presets/index.js';
 import type { KanbanCard } from '../../view-presets/kanban/pc/card.js';
-import type { RecordDetail } from './detail.js';
 import { RecordField } from './field.js';
 type DetailViewSelection = {
     propertyId: string;
     isEditing: boolean;
 };
+type DetailSelectionHost = {
+    querySelector: (selector: string) => unknown;
+};
 export declare class DetailSelection {
     private readonly viewEle;
     _selection?: DetailViewSelection;
     onSelect: (selection?: DetailViewSelection) => void;
     get selection(): DetailViewSelection | undefined;
     set selection(selection: DetailViewSelection | undefined);
-    constructor(viewEle: RecordDetail);
+    constructor(viewEle: DetailSelectionHost);
     blur(selection: DetailViewSelection): void;
     deleteProperty(): void;
     focus(selection: DetailViewSelection): void;

package/dist/_pkgs/data-view/core/detail/selection.js

@@ -1,5 +1,15 @@
 import { KanbanCell } from '../../view-presets/kanban/pc/cell.js';
 import { RecordField } from './field.js';
+const isSameDetailSelection = (current, next) => {
+    if (!current && !next) {
+        return true;
+    }
+    if (!current || !next) {
+        return false;
+    }
+    return (current.propertyId === next.propertyId &&
+        current.isEditing === next.isEditing);
+};
 export class DetailSelection {
     get selection() {
         return this._selection;
@@ -29,12 +39,19 @@ export class DetailSelection {
     constructor(viewEle) {
         this.viewEle = viewEle;
         this.onSelect = (selection) => {
+            if (isSameDetailSelection(this._selection, selection)) {
+                return;
+            }
             const old = this._selection;
+            // Publish the new selection before blurring: leaving editing mode runs the
+            // cell's exit hook, which may write a value back and re-enter this setter.
+            this._selection = selection;
             if (old) {
                 this.blur(old);
             }
-            this._selection = selection;
-            if (selection) {
+            // The blur above may have moved the selection somewhere else; only focus
+            // when it is still the one we were asked for.
+            if (selection && isSameDetailSelection(this._selection, selection)) {
                 this.focus(selection);
             }
         };
@@ -94,8 +111,8 @@ export class DetailSelection {
         }
     }
     focusFirstCell() {
-        const firstId = this.viewEle.querySelector('affine-data-view-record-field')
-            ?.column.id;
+        const firstField = this.viewEle.querySelector('affine-data-view-record-field');
+        const firstId = firstField?.column.id;
         if (firstId) {
             this.selection = {
                 propertyId: firstId,
@@ -121,8 +138,7 @@ export class DetailSelection {
     }
     getSelectCard(selection) {
         const { groupKey, cardId } = selection.cards[0];
-        return this.viewEle
-            .querySelector(`affine-data-view-kanban-group[data-key="${groupKey}"]`)
-            ?.querySelector(`affine-data-view-kanban-card[data-card-id="${cardId}"]`);
+        const group = this.viewEle.querySelector(`affine-data-view-kanban-group[data-key="${groupKey}"]`);
+        return group?.querySelector(`affine-data-view-kanban-card[data-card-id="${cardId}"]`);
     }
 }

package/dist/_pkgs/data-view/core/effect.js

@@ -7,6 +7,7 @@ import { RecordDetail } from './detail/detail.js';
 import { RecordField } from './detail/field.js';
 import { VariableRefView } from './expression/ref/ref-view.js';
 import { BooleanGroupView } from './group-by/renderer/boolean-group.js';
+import { DateGroupView } from './group-by/renderer/date-group.js';
 import { NumberGroupView } from './group-by/renderer/number-group.js';
 import { SelectGroupView } from './group-by/renderer/select-group.js';
 import { StringGroupView } from './group-by/renderer/string-group.js';
@@ -27,6 +28,7 @@ export function coreEffects() {
     customElements.define('data-view-group-setting', GroupSetting);
     customElements.define('affine-multi-tag-select', MultiTagSelect);
     customElements.define('data-view-group-title-boolean-view', BooleanGroupView);
+    customElements.define('data-view-group-title-date-view', DateGroupView);
     customElements.define('affine-multi-tag-view', MultiTagView);
     customElements.define('uni-lit', UniLit);
     customElements.define('uni-any-render', UniAnyRender);

package/dist/_pkgs/data-view/core/filter/eval.js

@@ -5,35 +5,48 @@ const evalRef = (ref, row) => {
 const evalValue = (value) => {
     return value?.value;
 };
+/**
+ * Runs one filter function against one cell, or answers `undefined` when the
+ * function does not apply: a missing or ill-typed argument, or an
+ * implementation that threw. `undefined` is not "no match" — it means this
+ * candidate could not decide, so another one may.
+ */
+const applyFilter = (func, value, filter) => {
+    const args = [];
+    for (let i = 0; i < func.args.length; i++) {
+        const argValue = evalValue(filter.args[i]);
+        const argType = func.args[i];
+        if (argValue == null || argType == null) {
+            return undefined;
+        }
+        if (!argType.valueValidate(argValue)) {
+            return undefined;
+        }
+        args.push(argValue);
+    }
+    try {
+        return func.impl(value ?? undefined, ...args);
+    }
+    catch (e) {
+        console.error(e);
+        return undefined;
+    }
+};
 export const evalFilter = (filterGroup, row) => {
     const evalF = (filter) => {
         if (filter.type === 'filter') {
             const value = evalRef(filter.left, row);
-            const func = filterMatcher.getFilterByName(filter.function);
-            if (!func) {
-                return true;
-            }
-            const expectArgLen = func.args.length;
-            const args = [];
-            for (let i = 0; i < expectArgLen; i++) {
-                const argValue = evalValue(filter.args[i]);
-                const argType = func.args[i];
-                if (argValue == null || argType == null) {
-                    return true;
+            // A filter is stored by function name alone. Two types can declare the
+            // same name, so try every candidate and keep the first one that can
+            // actually decide; a filter nothing can apply lets the row through
+            // rather than hiding it.
+            for (const func of filterMatcher.getFiltersByName(filter.function)) {
+                const result = applyFilter(func, value, filter);
+                if (result != null) {
+                    return result;
                 }
-                if (!argType.valueValidate(argValue)) {
-                    return true;
-                }
-                args.push(argValue);
-            }
-            const impl = func.impl;
-            try {
-                return impl(value ?? undefined, ...args);
-            }
-            catch (e) {
-                console.error(e);
-                return true;
             }
+            return true;
         }
         else if (filter.type === 'group') {
             if (filter.op === 'and') {

package/dist/_pkgs/data-view/core/filter/filter-fn/matcher.d.ts

@@ -4,4 +4,11 @@ export declare const filterMatcher: {
     filterListBySelfType: (selfType: TypeInstance) => FilterConfig[];
     firstMatchedBySelfType: (selfType: TypeInstance) => FilterConfig | undefined;
     getFilterByName: (name?: string) => FilterConfig | undefined;
+    /**
+     * A stored filter names its function, not the type it was built for, so a
+     * name shared by two types (`is` on a string and `is` on a date, say) is
+     * ambiguous on read. Every candidate is returned and the caller picks the
+     * one whose arguments actually fit the row.
+     */
+    getFiltersByName: (name?: string) => FilterConfig[];
 };

package/dist/_pkgs/data-view/core/filter/filter-fn/matcher.js

@@ -45,4 +45,16 @@ export const filterMatcher = {
         }
         return allFilter.find(v => v.name === name);
     },
+    /**
+     * A stored filter names its function, not the type it was built for, so a
+     * name shared by two types (`is` on a string and `is` on a date, say) is
+     * ambiguous on read. Every candidate is returned and the caller picks the
+     * one whose arguments actually fit the row.
+     */
+    getFiltersByName: (name) => {
+        if (!name) {
+            return [];
+        }
+        return allFilter.filter(v => v.name === name);
+    },
 };

package/dist/_pkgs/data-view/core/group-by/compare-date-keys.d.ts

@@ -0,0 +1,11 @@
+export declare const RELATIVE_ASC: readonly ["last30", "last7", "yesterday", "today", "tomorrow", "next7", "next30"];
+export declare const RELATIVE_DESC: ("last30" | "last7" | "yesterday" | "today" | "tomorrow" | "next7" | "next30")[];
+/**
+ * Sorts relative date keys in chronological order
+ */
+export declare function sortRelativeKeys(a: string, b: string, asc: boolean): number;
+/**
+ * Sorts numeric date keys (timestamps)
+ */
+export declare function sortNumericKeys(a: string, b: string, asc: boolean): number;
+export declare function compareDateKeys(mode: string | undefined, asc: boolean): (a: string, b: string) => number;

package/dist/_pkgs/data-view/core/group-by/compare-date-keys.js

@@ -0,0 +1,55 @@
+export const RELATIVE_ASC = [
+    'last30',
+    'last7',
+    'yesterday',
+    'today',
+    'tomorrow',
+    'next7',
+    'next30',
+];
+export const RELATIVE_DESC = [...RELATIVE_ASC].reverse();
+/**
+ * Sorts relative date keys in chronological order
+ */
+export function sortRelativeKeys(a, b, asc) {
+    const order = asc ? RELATIVE_ASC : RELATIVE_DESC;
+    const idxA = order.indexOf(a);
+    const idxB = order.indexOf(b);
+    if (idxA !== -1 && idxB !== -1)
+        return idxA - idxB;
+    if (idxA !== -1)
+        return asc ? 1 : -1;
+    if (idxB !== -1)
+        return asc ? -1 : 1;
+    return 0; // Both not found
+}
+/**
+ * Sorts numeric date keys (timestamps)
+ */
+export function sortNumericKeys(a, b, asc) {
+    const na = Number(a);
+    const nb = Number(b);
+    if (Number.isFinite(na) && Number.isFinite(nb)) {
+        return asc ? na - nb : nb - na;
+    }
+    return 0; // Not both numeric
+}
+export function compareDateKeys(mode, asc) {
+    return (a, b) => {
+        if (mode === 'date-relative') {
+            // Try relative key sorting first
+            const relativeResult = sortRelativeKeys(a, b, asc);
+            if (relativeResult !== 0)
+                return relativeResult;
+            // Try numeric sorting second
+            const numericResult = sortNumericKeys(a, b, asc);
+            if (numericResult !== 0)
+                return numericResult;
+            // Fallback to lexicographic order for mixed cases
+            return asc ? a.localeCompare(b) : b.localeCompare(a);
+        }
+        // Standard numeric/lexicographic comparison for other date modes
+        return (sortNumericKeys(a, b, asc) ||
+            (asc ? a.localeCompare(b) : b.localeCompare(a)));
+    };
+}

package/dist/_pkgs/data-view/core/group-by/define.d.ts

@@ -5,4 +5,10 @@ export declare const ungroups: {
     key: string;
     value: null;
 };
+/**
+ * The grains a date property offers, in the order the picker shows them. The
+ * first one is what `matcher.match` returns for a date property that has no
+ * grain stored yet.
+ */
+export declare const dateGroupByConfigs: GroupByConfig[];
 export declare const groupByMatchers: GroupByConfig[];

package/dist/_pkgs/data-view/core/group-by/define.js

@@ -1,7 +1,9 @@
 import hash from '@emotion/hash';
+import { addDays, differenceInCalendarDays, format as fmt, isToday, isTomorrow, isYesterday, startOfDay, startOfMonth, startOfWeek, startOfYear, } from 'date-fns';
 import { t } from '../logical/type-presets.js';
 import { createUniComponentFromWebComponent } from '../utils/uni-component/uni-component.js';
 import { BooleanGroupView } from './renderer/boolean-group.js';
+import { DateGroupView } from './renderer/date-group.js';
 import { NumberGroupView } from './renderer/number-group.js';
 import { SelectGroupView } from './renderer/select-group.js';
 import { StringGroupView } from './renderer/string-group.js';
@@ -12,6 +14,117 @@ export const ungroups = {
     key: 'Ungroups',
     value: null,
 };
+const WEEK_OPTS_MON = { weekStartsOn: 1 };
+const WEEK_OPTS_SUN = { weekStartsOn: 0 };
+const rangeLabel = (a, b) => `${fmt(a, 'MMM d yyyy')} – ${fmt(b, 'MMM d yyyy')}`;
+/**
+ * A date property can be read at several grains — relative to today, by day,
+ * by week, by month, by year. Each grain is its own group-by config, named so
+ * that a stored `groupBy.name` can pick the grain back up on reload.
+ */
+const buildDateCfg = (name, grouper, groupName) => createGroupByConfig({
+    name,
+    matchType: t.date.instance(),
+    groupName: (_t, v) => groupName(v),
+    defaultKeys: _t => [ungroups],
+    valuesGroup: (v, _t) => grouper(v),
+    addToGroup: (group, _old) => group,
+    view: createUniComponentFromWebComponent(DateGroupView),
+});
+const dateRelativeCfg = buildDateCfg('date-relative', v => {
+    if (v == null)
+        return [ungroups];
+    const day = startOfDay(new Date(v));
+    const daysDiff = differenceInCalendarDays(day, startOfDay(new Date()));
+    if (isToday(day))
+        return [{ key: 'today', value: +day }];
+    if (isTomorrow(day))
+        return [{ key: 'tomorrow', value: +day }];
+    if (isYesterday(day))
+        return [{ key: 'yesterday', value: +day }];
+    if (daysDiff > 0) {
+        if (daysDiff <= 7)
+            return [{ key: 'next7', value: +day }];
+        if (daysDiff <= 30)
+            return [{ key: 'next30', value: +day }];
+        const month = startOfMonth(day);
+        return [{ key: `${+month}`, value: +month }];
+    }
+    const daysAgo = -daysDiff;
+    if (daysAgo <= 7)
+        return [{ key: 'last7', value: +day }];
+    if (daysAgo <= 30)
+        return [{ key: 'last30', value: +day }];
+    const month = startOfMonth(day);
+    return [{ key: `${+month}`, value: +month }];
+}, v => {
+    if (v == null)
+        return '';
+    const day = startOfDay(new Date(v));
+    const daysDiff = differenceInCalendarDays(day, startOfDay(new Date()));
+    if (isToday(day))
+        return 'Today';
+    if (isTomorrow(day))
+        return 'Tomorrow';
+    if (isYesterday(day))
+        return 'Yesterday';
+    if (daysDiff > 0) {
+        if (daysDiff <= 7)
+            return 'Next 7 days';
+        if (daysDiff <= 30)
+            return 'Next 30 days';
+        return fmt(new Date(v), 'MMM yyyy');
+    }
+    const daysAgo = -daysDiff;
+    if (daysAgo <= 7)
+        return 'Last 7 days';
+    if (daysAgo <= 30)
+        return 'Last 30 days';
+    return fmt(new Date(v), 'MMM yyyy');
+});
+const dateDayCfg = buildDateCfg('date-day', v => {
+    if (v == null)
+        return [ungroups];
+    const day = startOfDay(new Date(v));
+    return [{ key: `${+day}`, value: +day }];
+}, v => (v ? fmt(new Date(v), 'MMM d yyyy') : ''));
+const dateWeekSunCfg = buildDateCfg('date-week-sun', v => {
+    if (v == null)
+        return [ungroups];
+    const week = startOfWeek(new Date(v), WEEK_OPTS_SUN);
+    return [{ key: `${+week}`, value: +week }];
+}, v => (v ? rangeLabel(new Date(v), addDays(new Date(v), 6)) : ''));
+const dateWeekMonCfg = buildDateCfg('date-week-mon', v => {
+    if (v == null)
+        return [ungroups];
+    const week = startOfWeek(new Date(v), WEEK_OPTS_MON);
+    return [{ key: `${+week}`, value: +week }];
+}, v => (v ? rangeLabel(new Date(v), addDays(new Date(v), 6)) : ''));
+const dateMonthCfg = buildDateCfg('date-month', v => {
+    if (v == null)
+        return [ungroups];
+    const month = startOfMonth(new Date(v));
+    return [{ key: `${+month}`, value: +month }];
+}, v => (v ? fmt(new Date(v), 'MMM yyyy') : ''));
+const dateYearCfg = buildDateCfg('date-year', v => {
+    if (v == null)
+        return [ungroups];
+    const year = startOfYear(new Date(v));
+    return [{ key: `${+year}`, value: +year }];
+}, v => (v ? fmt(new Date(v), 'yyyy') : ''));
+/**
+ * The grains a date property offers, in the order the picker shows them. The
+ * first one is what `matcher.match` returns for a date property that has no
+ * grain stored yet.
+ */
+export const dateGroupByConfigs = [
+    dateRelativeCfg,
+    dateDayCfg,
+    dateWeekSunCfg,
+    dateWeekMonCfg,
+    dateMonthCfg,
+    dateYearCfg,
+];
 export const groupByMatchers = [
     createGroupByConfig({
         name: 'select',
@@ -172,4 +285,5 @@ export const groupByMatchers = [
         addToGroup: v => v,
         view: createUniComponentFromWebComponent(BooleanGroupView),
     }),
+    ...dateGroupByConfigs,
 ];

package/dist/_pkgs/data-view/core/group-by/matcher.d.ts

@@ -2,6 +2,13 @@ import type { DataSource } from '../data-source/base.js';
 import { Matcher_ } from '../logical/matcher.js';
 import type { GroupByConfig } from './types.js';
 export declare const createGroupByMatcher: (list: GroupByConfig[]) => Matcher_<GroupByConfig, import("../index.js").TypeInstance>;
+/**
+ * Resolve a group-by config by the name a stored `groupBy` carries. A property
+ * type can offer several configs — a date reads as relative, by day, by week,
+ * by month or by year — and only the stored name says which one the reader
+ * chose; matching on the type alone would silently snap back to the default.
+ */
+export declare const findGroupByConfigByName: (dataSource: DataSource, name: string) => GroupByConfig | undefined;
 export declare class GroupByService {
     private readonly dataSource;
     constructor(dataSource: DataSource);