@dou-ui/dashboard 0.0.0-stage → 0.1.0-alpha.1

package/dist/types/dashboard/widget-body.vue.d.ts

@@ -0,0 +1,19 @@
+import type { SheetWorkbook } from '@dou-ui/sheet/core';
+import type { DashboardWidget } from '../core/types';
+import type { DashboardMessages } from '../locale';
+import type { DashboardWidgetType } from '../widget/define';
+type __VLS_Props = {
+    widget: DashboardWidget;
+    type?: DashboardWidgetType<any>;
+    editing: boolean;
+    fullscreen?: boolean;
+    messages: DashboardMessages;
+    setProps: (id: string, patch: Record<string, unknown>, options?: {
+        group?: string;
+    }) => void;
+    /** Where the widget's workbook goes, for its export menu; the full-screen copy has none. */
+    setWorkbook?: (id: string, get: () => SheetWorkbook | undefined) => () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/dashboard/widget-frame.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    id: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/dashboard/widget-settings.vue.d.ts

@@ -0,0 +1,16 @@
+import type { DashboardWidget } from '../core/types';
+import type { DashboardWidgetType } from '../widget/define';
+type __VLS_Props = {
+    widget: DashboardWidget;
+    type: DashboardWidgetType<any>;
+    setProps: (id: string, patch: Record<string, unknown>, options?: {
+        group?: string;
+    }) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:props": (props: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:props"?: ((props: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/data/context.d.ts

@@ -0,0 +1,18 @@
+import type { InjectionKey } from 'vue';
+import type { SourceStore } from './store';
+import type { DashboardFilters, DashboardLinkedFilter, DashboardSetFilterOptions } from './types';
+/** What widgets read from their dashboard about data and filters. */
+export interface DataContext {
+    store: SourceStore;
+    /** The names of the dashboard's sources. */
+    sourceNames: () => string[];
+    /** Every filter value, as bound with `v-model:filters`. */
+    filters: () => DashboardFilters;
+    /** The keys of the filters a widget set itself, which it doesn't see. */
+    emitted: (id: string) => ReadonlySet<string>;
+    /** The filters a widget set itself, for its title bar. */
+    linked: (id: string) => DashboardLinkedFilter[];
+    /** Sets (or clears, with an empty value) a filter; `widget` is the widget setting it, if any. */
+    setFilter: (widget: string | undefined, key: string, value: unknown, options?: DashboardSetFilterOptions) => void;
+}
+export declare const dataContextKey: InjectionKey<DataContext>;

package/dist/types/data/filters.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardFilters } from './types';
+/** Whether a filter value filters nothing: `undefined`, `null`, `''` or an empty array. */
+export declare function isEmptyFilter(value: unknown): boolean;
+/** The filters without empty values and without `skip`, limited to `keys` when given. */
+export declare function pickFilters(filters: DashboardFilters, keys?: readonly string[], skip?: ReadonlySet<string>): DashboardFilters;
+/** JSON with object keys in order, so equal filters give equal text. */
+export declare function stableKey(value: unknown): string;
+/** How a filter value reads when no label is given: lists joined with `、`. */
+export declare function filterText(value: unknown): string;

package/dist/types/data/store.d.ts

@@ -0,0 +1,48 @@
+import type { ShallowRef } from 'vue';
+import type { DashboardFilters, DashboardSourceLoad, DashboardSourceOptions, DashboardSources } from './types';
+export type SourceState = {
+    status: 'idle';
+} | {
+    status: 'loading';
+    data?: unknown;
+    error?: unknown;
+} | {
+    status: 'ready';
+    data: unknown;
+} | {
+    status: 'error';
+    data?: unknown;
+    error: unknown;
+};
+/** One source loaded with one set of filters, shared by every widget showing it. */
+export interface SourceEntry {
+    readonly key: string;
+    readonly name: string;
+    readonly filters: DashboardFilters;
+    readonly state: ShallowRef<SourceState>;
+    /** Whether a load is running for data already shown (a refresh), not for new data. */
+    readonly refreshing: ShallowRef<boolean>;
+}
+export declare function optionsOf(source: DashboardSourceLoad<any> | DashboardSourceOptions<any>): DashboardSourceOptions<any>;
+/** Whether two definitions of a source load the same way. */
+export declare function sameSource(a: DashboardSourceLoad<any> | DashboardSourceOptions<any> | undefined, b: DashboardSourceLoad<any> | DashboardSourceOptions<any> | undefined): boolean;
+/**
+ * Loads the dashboard's sources: once for each source and set of filters,
+ * however many widgets show it. Results nobody shows any more are kept a
+ * while; loads nobody waits for are aborted.
+ */
+export declare function createSourceStore(sources: () => DashboardSources | undefined): {
+    use: (name: string, filters: DashboardFilters) => {
+        entry: SourceEntry;
+        release(): void;
+    };
+    reload: (name?: string) => void;
+    retry: (entry: SourceEntry) => void;
+    busy: () => boolean;
+    dispose: () => void;
+    keyOf: (name: string, filters: DashboardFilters) => {
+        key: string;
+        scoped: DashboardFilters;
+    };
+};
+export type SourceStore = ReturnType<typeof createSourceStore>;

package/dist/types/data/types.d.ts

@@ -0,0 +1,67 @@
+/** The values of a dashboard's filters, by key. Bound with `v-model:filters`. */
+export type DashboardFilters = Record<string, unknown>;
+export interface DashboardSourceContext {
+    /** The filters in effect for the widgets asking: only the keys the source uses, without empty ones. */
+    filters: DashboardFilters;
+    /** Aborted when no widget needs the result any more, e.g. after the filters changed. */
+    signal: AbortSignal;
+    /** The source's name. */
+    source: string;
+}
+/** Loads a source's data; called once for each set of filters, however many widgets show it. */
+export type DashboardSourceLoad<T = unknown> = (context: DashboardSourceContext) => T | PromiseLike<T>;
+export interface DashboardSourceOptions<T = unknown> {
+    load: DashboardSourceLoad<T>;
+    /**
+     * The filter keys it uses; other filters neither reach it nor load it
+     * again. Defaults to every filter.
+     */
+    filters?: string[];
+    /** Loads again every this many ms while it is shown; paused while the page is hidden. */
+    interval?: number;
+}
+/** Where widgets get their data, by name. A widget names its source in `props.source`. */
+export type DashboardSources = Record<string, DashboardSourceLoad<any> | DashboardSourceOptions<any>>;
+/** A filter set by a widget, e.g. by clicking a bar of its chart. */
+export interface DashboardLinkedFilter {
+    key: string;
+    value: unknown;
+    /** How the value is shown, e.g. a name for an id. Defaults to the value. */
+    label: string;
+    /** The widget that set it, which itself keeps showing everything. */
+    widget: string;
+}
+export interface DashboardSetFilterOptions {
+    /** How the value is shown in the title bar and the filter bar. Defaults to the value. */
+    label?: string;
+}
+interface FilterFieldBase {
+    /** The filter's key in `v-model:filters`. */
+    key: string;
+    /** Shown before the control, and its accessible name. */
+    label: string;
+}
+/** A dropdown of values; with `multiple`, the value is an array. */
+export interface DashboardSelectFilterField extends FilterFieldBase {
+    type: 'select';
+    /** Strings and numbers serve as both value and label. */
+    options: ({
+        value: string | number;
+        label?: string;
+    } | string | number)[];
+    multiple?: boolean;
+    /** Shown while nothing is picked. Defaults to the locale's. */
+    placeholder?: string;
+}
+/** A range of days; the value is `['YYYY-MM-DD', 'YYYY-MM-DD']`. */
+export interface DashboardDateRangeFilterField extends FilterFieldBase {
+    type: 'date-range';
+}
+/** Typed text, applied once typing pauses. */
+export interface DashboardSearchFilterField extends FilterFieldBase {
+    type: 'search';
+    placeholder?: string;
+}
+/** A control in the filter bar. */
+export type DashboardFilterField = DashboardSelectFilterField | DashboardDateRangeFilterField | DashboardSearchFilterField;
+export {};

package/dist/types/grid/grid-handle.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    /** The element to render, such as `header`. */
+    as?: string;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/grid/grid-item.d.ts

@@ -0,0 +1,78 @@
+import { type InjectionKey, type PropType, type Slots } from 'vue';
+import type { GridItem } from '../layout/types';
+import type { GridResizeHandle } from './types';
+export interface GridItemContext {
+    slots: Slots;
+    /** The id the description of every item is read from. */
+    hintId: string;
+    resizeLabel: () => string;
+}
+export declare const gridItemKey: InjectionKey<GridItemContext>;
+/**
+ * One item of the grid. A component of its own so that moving one item
+ * re-renders that item alone: the others get the same `item` object back
+ * from the layout engine, and their slot content isn't run again.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<GridItem>;
+        required: true;
+    };
+    state: {
+        type: PropType<"idle" | "dragging" | "resizing">;
+        default: string;
+    };
+    editable: BooleanConstructor;
+    /** -1, 0, or undefined when the item itself isn't focusable. */
+    tabindex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    roleDescription: {
+        type: StringConstructor;
+        required: true;
+    };
+    handles: {
+        type: PropType<GridResizeHandle[]>;
+        default: () => never[];
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: PropType<GridItem>;
+        required: true;
+    };
+    state: {
+        type: PropType<"idle" | "dragging" | "resizing">;
+        default: string;
+    };
+    editable: BooleanConstructor;
+    /** -1, 0, or undefined when the item itself isn't focusable. */
+    tabindex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    roleDescription: {
+        type: StringConstructor;
+        required: true;
+    };
+    handles: {
+        type: PropType<GridResizeHandle[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    editable: boolean;
+    state: "idle" | "dragging" | "resizing";
+    tabindex: number;
+    handles: GridResizeHandle[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/types/grid/grid-layout.vue.d.ts

@@ -0,0 +1,46 @@
+import type { GridItem } from '../layout/types';
+import type { GridItemSlotProps, GridLayouts, GridLayoutExpose, GridLayoutProps, GridResizeHandle } from './types';
+type __VLS_Props = Omit<GridLayoutProps, 'modelValue' | 'layouts'>;
+type __VLS_Slots = {
+    item?: (props: GridItemSlotProps) => unknown;
+    placeholder?: (props: {
+        item: GridItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: GridItem[];
+    'layouts'?: GridLayouts;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, GridLayoutExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (event: import("./types").GridDropEvent) => any;
+    change: (event: import("./types").GridChangeEvent) => any;
+    "update:modelValue": (value: GridItem[]) => any;
+    "update:layouts": (value: Partial<Record<string, import("./types").GridPlace[]>>) => any;
+    dragStart: (event: import("./types").GridDragEvent) => any;
+    dragEnd: (event: import("./types").GridDragEndEvent) => any;
+    breakpointChange: (breakpoint: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDrop?: ((event: import("./types").GridDropEvent) => any) | undefined;
+    onChange?: ((event: import("./types").GridChangeEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: GridItem[]) => any) | undefined;
+    "onUpdate:layouts"?: ((value: Partial<Record<string, import("./types").GridPlace[]>>) => any) | undefined;
+    onDragStart?: ((event: import("./types").GridDragEvent) => any) | undefined;
+    onDragEnd?: ((event: import("./types").GridDragEndEvent) => any) | undefined;
+    onBreakpointChange?: ((breakpoint: string) => any) | undefined;
+}>, {
+    resize: boolean | GridResizeHandle[];
+    columns: number | Record<string, number>;
+    breakpoints: Record<string, number>;
+    rowHeight: number;
+    gap: number | [number, number];
+    compact: import("..").GridCompact;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/grid/tiers.d.ts

@@ -0,0 +1,12 @@
+/** One breakpoint of a grid: its name, the narrowest width it applies at, and its columns. */
+export interface GridTier {
+    name: string;
+    min: number;
+    columns: number;
+}
+/** The breakpoint name used when `columns` is one number. */
+export declare const SINGLE_TIER = "default";
+/** A grid's breakpoints, widest first. */
+export declare function gridTiers(columns: number | Record<string, number>, breakpoints: Record<string, number>): GridTier[];
+export declare const DEFAULT_COLUMNS: Record<string, number>;
+export declare const DEFAULT_BREAKPOINTS: Record<string, number>;

package/dist/types/grid/types.d.ts

@@ -0,0 +1,113 @@
+import type { GridCompact, GridItem } from '../layout/types';
+import type { DashboardMessagesOverride } from '../locale';
+/** An edge or corner of an item that can be dragged to resize it. */
+export type GridResizeHandle = 'e' | 's' | 'se';
+/** An item's place on one breakpoint's grid. */
+export type GridPlace = Pick<GridItem, 'id' | 'x' | 'y' | 'w' | 'h'>;
+/** The places items were given on the narrower breakpoints, by breakpoint name. */
+export type GridLayouts = Partial<Record<string, GridPlace[]>>;
+/** A new item dragged in from outside the grid; it gets its place where it is dropped. */
+export type GridDropItem = Omit<GridItem, 'x' | 'y'>;
+export interface GridLayoutProps {
+    /**
+     * The items, laid out on the widest breakpoint; `v-model` is updated once
+     * each move or resize ends.
+     */
+    modelValue?: GridItem[];
+    /**
+     * Where items were moved on the narrower breakpoints (`v-model:layouts`).
+     * A breakpoint without one, or an item missing from one, is laid out from
+     * `modelValue`.
+     */
+    layouts?: GridLayouts;
+    /**
+     * How many columns the grid has: one number, or one per breakpoint.
+     * Defaults to `{ lg: 12, md: 6, sm: 1 }`.
+     */
+    columns?: number | Record<string, number>;
+    /**
+     * The narrowest width of the grid itself (not the window) at which each
+     * breakpoint applies, in px. Defaults to `{ lg: 1024, md: 640, sm: 0 }`.
+     */
+    breakpoints?: Record<string, number>;
+    /** The height of a row, in px. Defaults to 80. */
+    rowHeight?: number;
+    /** The space between items, in px: one number, or `[across, down]`. Defaults to 16. */
+    gap?: number | [number, number];
+    /** `'vertical'` (the default) floats items up into gaps; `false` leaves them where they are put. */
+    compact?: GridCompact;
+    /** Whether items can be moved and resized, with the pointer and the keyboard. */
+    editable?: boolean;
+    /**
+     * Moves start only from a `DouGridLayoutHandle` inside the item, such as
+     * its title bar. Defaults to `false`: the whole item.
+     */
+    handle?: boolean;
+    /** Which edges resize an item; `false` turns resizing off. Defaults to `['e', 's', 'se']`. */
+    resize?: boolean | GridResizeHandle[];
+    /** The name an item is read out by. Defaults to its id. */
+    itemLabel?: (item: GridItem) => string;
+    /** The layout's accessible name. */
+    label?: string;
+    /** Overrides of the built-in texts. */
+    messages?: DashboardMessagesOverride;
+}
+/** Why the layout changed. */
+export type GridChangeReason = 'move' | 'resize' | 'keyboard' | 'drop';
+export interface GridChangeEvent {
+    /** The layout after the change (the same as the new `v-model`). */
+    items: GridItem[];
+    /** The item that was moved, resized or dropped. */
+    id: string;
+    reason: GridChangeReason;
+    /** The breakpoint whose layout changed. */
+    breakpoint: string;
+}
+export interface GridDropEvent {
+    /** The new item, in its place on the widest breakpoint (as added to `v-model`). */
+    item: GridItem;
+    /** What was passed to `startDrop`. */
+    data: unknown;
+    /** The breakpoint it was dropped on. */
+    breakpoint: string;
+}
+export interface GridDragEvent {
+    id: string;
+    kind: 'move' | 'resize' | 'drop';
+}
+export interface GridDragEndEvent extends GridDragEvent {
+    /** Whether the drag was undone with Escape (or the pointer was lost). */
+    cancelled: boolean;
+}
+export interface GridLayoutEmits {
+    'update:modelValue': [items: GridItem[]];
+    change: [event: GridChangeEvent];
+    dragStart: [event: GridDragEvent];
+    dragEnd: [event: GridDragEndEvent];
+    drop: [event: GridDropEvent];
+    'update:layouts': [layouts: GridLayouts];
+    breakpointChange: [breakpoint: string];
+}
+export interface GridLayoutExpose {
+    /** Moves keyboard focus to an item (when the layout is editable, the item itself; else its first focusable part). */
+    focusItem: (id: string) => void;
+    /** Scrolls an item into view. */
+    scrollToItem: (id: string, options?: ScrollIntoViewOptions) => void;
+    /**
+     * Starts dragging a new item in from outside, such as from a list of
+     * widgets: call it in that element's `pointerdown`. A mouse starts after
+     * moving a little, a finger after resting on it. Dropped over the grid,
+     * the item is added to `v-model` and `drop` is emitted; Escape or a drop
+     * elsewhere cancels.
+     */
+    startDrop: (event: PointerEvent, item: GridDropItem, data?: unknown) => void;
+    /** The breakpoint in use, from the grid's own width. */
+    readonly breakpoint: string;
+}
+export interface GridItemSlotProps {
+    item: GridItem;
+    /** Being moved with the pointer or the keyboard. */
+    dragging: boolean;
+    /** Being resized with the pointer. */
+    resizing: boolean;
+}