@mittwald/flow-remote-vue-components 0.0.0-stage → 1.5.0

package/dist/types/list/ListItemView.d.ts

@@ -0,0 +1,5 @@
+import { VNode } from 'vue';
+export declare const ListItemView: import('vue').DefineComponent<{}, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default ListItemView;

package/dist/types/list/Table.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The list as a table.
+ *
+ * The columns, the cells and their render functions come from the `ListTable*`
+ * elements inside the list — the same arrangement Flow's React list reads out
+ * of its children, over the same remote elements.
+ */
+export declare const ListTableView: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default ListTableView;

package/dist/types/list/dateRangeFilter.d.ts

@@ -0,0 +1,21 @@
+import { ListDateRangeFilter, ListDateParts, ListDateRange, ListModelContext } from '../_bundled/flow-components-base/index';
+import { ListRendered, VueListFilterShape } from './types';
+/**
+ * A date-range filter, with the options its calendar takes.
+ *
+ * The column, the comparison and the stored value are the shared
+ * `ListDateRangeFilter`, so a Vue list and a React list filter the same dates
+ * the same way. What a binding adds is only what its calendar accepts.
+ */
+export declare class DateRangeFilter<T = never> extends ListDateRangeFilter<T, never, ListRendered> {
+    /** Handed to the `RangeCalendar` — a minimum date, unavailable days, … */
+    readonly dateRangeOptions?: Record<string, unknown>;
+    constructor(context: ListModelContext<T>, shape: VueListFilterShape<T>);
+}
+/** Whether a filter is one of these, without reaching for the class. */
+export declare const isDateRangeFilter: (filter: {
+    readonly mode: string;
+}) => filter is DateRangeFilter<never>;
+/** `01/03/2024`, the way `Intl` writes it for the host's locale. */
+export declare const formatDate: (date: ListDateParts) => string;
+export declare const formatDateRange: (range: ListDateRange) => string;

package/dist/types/list/index.d.ts

@@ -0,0 +1,8 @@
+export { List } from './List';
+export { ListItemView } from './ListItemView';
+export { ListFilter, ListItem, ListLoaderAsync, ListLoaderComposable, ListSearch, ListSorting, ListStaticData, ListTable, ListTableBody, ListTableCell, ListTableColumn, ListTableHeader, ListTableRow, } from './setupComponents';
+export { injectListModel, type AnyListModel } from './listContext';
+export { useListMetadata } from './metadata';
+export { ListModel } from './model';
+export { createListSettings, useListSettings } from './settings';
+export type { ListComposableDataLoader, ListDataSourceShape, ListItemViewShape, ListRendered, VueListFilterShape, VueListShape, } from './types';

package/dist/types/list/itemContext.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from 'vue';
+/**
+ * What an expandable item tells the view inside it.
+ *
+ * Flow's React list writes the same three things into a props context for the
+ * `Content slot="bottom"` of that one item — an id, whether it is open, and how
+ * to toggle it. There is no such context here, so the item provides it and
+ * `ListItemView` injects it.
+ */
+export interface ListItemAccordion {
+    /** Whether the list is in accordion mode, which can change at runtime. */
+    readonly isActive: Readonly<Ref<boolean>>;
+    readonly isExpanded: Ref<boolean>;
+    readonly contentId: string;
+    toggle: () => void;
+}
+export declare const provideItemAccordion: (accordion: ListItemAccordion) => void;
+/** `undefined` outside a list item. */
+export declare const injectItemAccordion: () => ListItemAccordion | undefined;

package/dist/types/list/listContext.d.ts

@@ -0,0 +1,11 @@
+import { ListModel } from './model';
+/**
+ * The list a component inside it sees.
+ *
+ * `never`, not `any`: the item type is the consumer's, and every read of an
+ * item goes through the consumer's own render function. `any` would be the
+ * `Table<any>` variance trap — a `ListModel<never>` is not assignable to it.
+ */
+export type AnyListModel = ListModel<never>;
+export declare const provideListModel: (model: AnyListModel) => void;
+export declare const injectListModel: () => AnyListModel;

package/dist/types/list/locales.d.ts

@@ -0,0 +1,74 @@
+import { ComputedRef } from 'vue';
+export declare const texts: {
+    readonly "en-US": {
+        readonly dateRange: "Date range";
+        readonly filters: "Filters";
+        readonly "filters.all": "All filters";
+        readonly "filters.clear": "Clear filters";
+        readonly "filters.clearSelection": "Clear selection";
+        readonly "filters.deselectAll": "Deselect all";
+        readonly "filters.reset": "Reset filters";
+        readonly "filters.selectAll": "Select all";
+        readonly "filters.store": "Store filters";
+        readonly loadingMore: "Loading more items";
+        readonly "noItems.heading": "No items available";
+        readonly "noItems.text": "Once there are items available, they will be displayed here.";
+        readonly "noResult.heading": "No search results found";
+        readonly "noResult.text": "Your search did not return any results. Please adjust the search query or your filters.";
+        readonly options: "Options";
+        readonly paginationInfo: "Showing {visibleItemsCount} of {totalItemsCount}";
+        readonly reset: "Reset";
+        readonly "results.show.one": "Show {totalItemCount} result";
+        readonly "results.show.other": "Show {totalItemCount} Results";
+        readonly settings: "Settings";
+        readonly "settings.viewMode": "View";
+        readonly "settings.viewMode.list": "List";
+        readonly "settings.viewMode.table": "Table";
+        readonly "settings.viewMode.tiles": "Tiles";
+        readonly showMore: "Show more";
+        readonly sorting: "Sorting";
+        readonly "toggleExpandButton.collapse": "Show less";
+        readonly "toggleExpandButton.expand": "Show more";
+    };
+    readonly "de-DE": {
+        readonly dateRange: "Zeitraum";
+        readonly filters: "Filter";
+        readonly "filters.all": "Alle Filter";
+        readonly "filters.clear": "Filter entfernen";
+        readonly "filters.clearSelection": "Auswahl aufheben";
+        readonly "filters.deselectAll": "Alle abwählen";
+        readonly "filters.reset": "Filter zurücksetzen";
+        readonly "filters.selectAll": "Alle auswählen";
+        readonly "filters.store": "Filter speichern";
+        readonly loadingMore: "Weitere Einträge werden geladen";
+        readonly "noItems.heading": "Keine Einträge vorhanden";
+        readonly "noItems.text": "Sobald Einträge vorhanden sind, werden sie hier angezeigt.";
+        readonly "noResult.heading": "Keine Suchergebnisse gefunden";
+        readonly "noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.";
+        readonly options: "Optionen";
+        readonly paginationInfo: "{visibleItemsCount} von insgesamt {totalItemsCount} angezeigt";
+        readonly reset: "Zurücksetzen";
+        readonly "results.show.one": "{totalItemCount} Ergebnis anzeigen";
+        readonly "results.show.other": "{totalItemCount} Ergebnisse anzeigen";
+        readonly settings: "Einstellungen";
+        readonly "settings.viewMode": "Ansicht";
+        readonly "settings.viewMode.list": "Liste";
+        readonly "settings.viewMode.table": "Tabelle";
+        readonly "settings.viewMode.tiles": "Raster";
+        readonly showMore: "Mehr anzeigen";
+        readonly sorting: "Sortierung";
+        readonly "toggleExpandButton.collapse": "Weniger anzeigen";
+        readonly "toggleExpandButton.expand": "Mehr anzeigen";
+    };
+};
+export type ListTextKey = keyof (typeof texts)["en-US"];
+export type ListTextFormatter = (key: ListTextKey, values?: Record<string, string | number>) => string;
+/**
+ * The list's texts in the host's language.
+ *
+ * Only `{name}` placeholders, not ICU: the two strings that interpolate count
+ * items, and neither pluralizes. A string that needed a plural rule would need
+ * a formatter, and the honest fix then is `@flr-generate` on the List rather
+ * than an ICU parser in a binding.
+ */
+export declare const useListTexts: () => ComputedRef<ListTextFormatter>;

package/dist/types/list/metadata.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+/**
+ * What the loader reported beside its data.
+ *
+ * The counterpart of React's `useListMetadata`: a loader returns `{ data,
+ * itemTotalCount, metadata }`, and `metadata` is whatever the source sends
+ * along — a cursor, a facet count, an API's own envelope. The list does not
+ * read it; this is how the app gets it back.
+ *
+ * A ref, not a value: the batches arrive over time, and each one may bring new
+ * metadata. Call it inside a `<List>`, where the list can be injected.
+ */
+export declare const useListMetadata: <T = unknown>() => Readonly<Ref<T | undefined>>;
+export default useListMetadata;

package/dist/types/list/model.d.ts

@@ -0,0 +1,140 @@
+import { ListDataLoaderOptions, ListData, ListDataLoaderResult, ListLoaderModes, ListPaginationContext, ListItem, ListSettingsPort, PropertyName, ListBatchesController, ListFilter, ListItemCollection, ListLoaderState, ListSearch, ListSorting, ListTable, ListViewMode } from '../_bundled/flow-components-base/index';
+import { ColumnSort, Table } from '@tanstack/table-core';
+import { ListRendered, VueListShape } from './types';
+/** The parts of the shape a render can change after the list was built. */
+export type ListSetupShape<T> = Pick<VueListShape<T>, "filters" | "sorting" | "search" | "asyncLoader" | "dependencies">;
+declare const renderShapeKeys: readonly ["itemView", "onAction", "componentProps", "accordion", "table", "aria-label", "aria-labelledby"];
+/**
+ * The parts of the shape the list's components hand on to the elements as they
+ * are. Every render of the `List` replaces them.
+ */
+export type ListRenderShape<T> = Pick<VueListShape<T>, (typeof renderShapeKeys)[number]>;
+/**
+ * Flow's list, without React.
+ *
+ * Every rule it follows — the batches, the filters, the sorting, the search,
+ * the view mode, the table — is `@mittwald/flow-components-base`, the same
+ * objects `packages/components` builds its list from. What is assembled here is
+ * only the wiring, plus the one thing the shared model deliberately left to a
+ * binding: fetching a batch.
+ *
+ * It is a plain object, not a Vue reactive one. Its state is MobX, and a
+ * component reads it through `watchMobxValue`.
+ */
+export declare class ListModel<T> implements ListPaginationContext<T> {
+    readonly shape: Omit<VueListShape<T>, keyof ListRenderShape<T>>;
+    /**
+     * Observable, and a new object on every render of the `List`: the components
+     * reading it render without props, so Vue would otherwise skip them and the
+     * host would keep the first `selectedKeys` it was handed.
+     */
+    renderShape: ListRenderShape<T>;
+    readonly loaderState: ListLoaderState<T>;
+    readonly loader: ListLoaderModes;
+    readonly staticDataProperties: PropertyName<T>[];
+    filters: ListFilter<T, never, never, ListRendered>[];
+    sorting: ListSorting<T>[];
+    search?: ListSearch<T>;
+    readonly listTable: ListTable<T>;
+    readonly items: ListItemCollection<T>;
+    readonly batches: ListBatchesController<T>;
+    readonly viewMode: ListViewMode;
+    /**
+     * Controlled, because a hidden sorting has to survive a click on a visible
+     * one — the table's own updater replaces the whole array.
+     */
+    sortingState: ColumnSort[];
+    private currentData;
+    /**
+     * The request each batch is waiting for. A newer request for the batch, or a
+     * reset, makes an older one stale: its answer belongs to a query the list no
+     * longer shows.
+     */
+    private readonly pendingLoads;
+    private setupSignatures;
+    constructor(shape: VueListShape<T>);
+    private buildSetup;
+    private wireSetup;
+    private signaturesOf;
+    /**
+     * Takes what this render says about the filters, the sorting, the search and
+     * the loader.
+     *
+     * Read once, a filter whose `values` load after the list was built would
+     * offer nothing for good, and a loader reading a changed route would keep
+     * answering for the old one. React reads all of it on every render; here it
+     * is compared, and only a change rebuilds — a rebuild re-applies the table
+     * options, which re-renders the list.
+     */
+    updateSetup(shape: ListSetupShape<T>): void;
+    /** Takes what this render hands on to the elements. */
+    setRenderShape(shape: VueListShape<T>): void;
+    /**
+     * Drops every request still on its way: its answer, or its failure, belongs
+     * to a list that is gone.
+     */
+    discardPendingLoads(): void;
+    private resetLoaderState;
+    get dataTable(): Table<T>;
+    get settings(): ListSettingsPort | undefined;
+    setSortingState(next: ColumnSort[]): void;
+    get loadingItemsCount(): number;
+    get hasActiveFilters(): boolean;
+    get visibleSorting(): ListSorting<T>[];
+    /**
+     * The items the table currently shows.
+     *
+     * Reading the table's `revision` is the subscription: the rows come out of
+     * the options and the state, and `revision` is the only observable that moves
+     * when either does.
+     */
+    get renderedItems(): ListItem<T>[];
+    get isEmpty(): boolean;
+    getEmptyViewType(): "search" | "list";
+    clearSorting(): void;
+    resetFilters(): void;
+    /**
+     * Replaces the data a static list shows.
+     *
+     * The loader state goes with it: the batches describe the old array, and
+     * keeping them would merge the two.
+     *
+     * Compared by content, not by identity, because a consumer writes the array
+     * inline — `h(ListStaticData, { data: [...] })` builds a new one on every
+     * render. On identity that is always "changed", and the reset it triggers
+     * re-renders the list, which builds the array again: Vue reports it as
+     * "Maximum recursive updates exceeded in component <List>".
+     */
+    setStaticData(data: ListData<T>): void;
+    /** Pushes this render's data into the table. */
+    setData(data: T[]): void;
+    /** The query for one batch, as the data source asked to be asked. */
+    getDataLoaderOptions(batchIndex: number): ListDataLoaderOptions<T>;
+    /**
+     * Whether a composable owns the batches.
+     *
+     * A composable cannot be called from a watcher — it needs a `setup()` — so
+     * that source loads through a component per batch instead of `loadBatch`.
+     */
+    get hasComposableLoader(): boolean;
+    /**
+     * Loads one batch and reports it, or reports that there is nothing to load.
+     *
+     * An answer that arrives after a newer request for the batch, or after a
+     * reset, is dropped. A failure marks the batch `"error"` and rejects — the
+     * list hands it to Vue's error handling, where React throws it into the error
+     * boundary.
+     */
+    loadBatch(batchIndex: number): Promise<void>;
+    /**
+     * Hands one batch's result to the shared state.
+     *
+     * Both loaders end here: the async one when its promise resolves, the
+     * composable one when whatever it returned becomes defined.
+     */
+    reportBatch(batchIndex: number, result: ListDataLoaderResult<T>): void;
+    private collectStaticDataProperties;
+    private getTableOptions;
+    private getColumnDefs;
+}
+export {};

package/dist/types/list/settings.d.ts

@@ -0,0 +1,17 @@
+import { SettingsStore } from '../components/SettingsProvider';
+import { ListSettingsPort } from '../_bundled/flow-components-base/index';
+/**
+ * The list's view settings, persisted — `ListSettingsStore` in
+ * packages/components, key for key: the `SettingsProvider`'s store, component
+ * `"List"`, key `<storageKey>.<setting>` plus a `.autosave` sibling.
+ *
+ * Unvalidated, unlike React's, which parses every value with a zod schema. A
+ * value that is not what it should be is dropped by the model anyway — an
+ * unknown filter value is deleted, an unknown sorting simply never matches.
+ */
+export declare const createListSettings: (store: SettingsStore, storageKey: string) => ListSettingsPort;
+/**
+ * The persistence for a list: the surrounding `SettingsProvider`'s, or none —
+ * like React, a list without a provider keeps nothing.
+ */
+export declare const useListSettings: (storageKey: string | undefined) => ListSettingsPort | undefined;

package/dist/types/list/setupComponents.d.ts

@@ -0,0 +1,41 @@
+import { Component, FunctionalComponent } from 'vue';
+import { AnyRecord } from '../lib/types';
+/**
+ * A setup element: it renders nothing and carries what the list reads off it.
+ *
+ * Functional and typed over an open record, because both halves of that are the
+ * authoring surface: JSX needs a call signature on the element type, and the
+ * props here are the list's contract (`property`, `mode`, `loader`, …) rather
+ * than the component's — the component never sees them.
+ */
+export type ListSetupComponent = FunctionalComponent<AnyRecord>;
+/** Whether a child of the list configures it rather than rendering. */
+export declare const isListSetupComponent: (type: unknown) => boolean;
+export declare const ListStaticData: ListSetupComponent;
+export declare const ListLoaderAsync: ListSetupComponent;
+export declare const ListLoaderComposable: ListSetupComponent;
+export declare const ListItem: ListSetupComponent;
+export declare const ListSearch: ListSetupComponent;
+export declare const ListSorting: ListSetupComponent;
+export declare const ListFilter: ListSetupComponent;
+export declare const ListTable: ListSetupComponent;
+export declare const ListTableHeader: ListSetupComponent;
+export declare const ListTableColumn: ListSetupComponent;
+export declare const ListTableBody: ListSetupComponent;
+export declare const ListTableRow: ListSetupComponent;
+export declare const ListTableCell: ListSetupComponent;
+export interface FoundSetup {
+    props: AnyRecord;
+    /** The element's scoped default slot, where it has one. */
+    render?: (slotProps: AnyRecord) => unknown;
+}
+/**
+ * Every setup element of one kind, wherever it sits in the children.
+ *
+ * Walks fragments and arrays, because `v-for` and `<template>` both produce
+ * them, but stops at a component: a `ListFilter` inside another component's
+ * slot is that component's business, and Flow's React list draws the same
+ * line.
+ */
+export declare const findSetups: (children: unknown, component: Component) => FoundSetup[];
+export declare const findSetup: (children: unknown, component: Component) => FoundSetup | undefined;

package/dist/types/list/styles.d.ts

@@ -0,0 +1,26 @@
+export declare const listStyles: {
+    readonly list: "flow--list";
+    readonly listWrapper: "flow--list--list-wrapper";
+    readonly hideVisuallyEmptyView: "flow--list--hide-visually-empty-view";
+    readonly items: "flow--list--items";
+    readonly itemsLoading: "flow--list--items--is-loading";
+    readonly itemsTiles: "flow--list--items--tiles";
+    readonly footer: "flow--list--footer";
+    readonly header: "flow--list--header";
+    readonly headerContent: "flow--list--header--header-content";
+    readonly headerOptions: "flow--list--header--options";
+    readonly headerWithSearch: "flow--list--header--with-search";
+    readonly headerActions: "flow--list--header--actions";
+    readonly headerAction: "flow--list--header--action";
+    readonly hideOnMobile: "flow--list--header--hide-on-mobile";
+    readonly hideOnDesktop: "flow--list--header--hide-on-desktop";
+    readonly activeFilters: "flow--list--header--active-filters";
+    readonly searchField: "flow--list--header--search-field";
+    readonly hideVisuallyActions: "flow--list--header--hide-visually-actions";
+    readonly selectAllCheckbox: "flow--list--header--all-filters-modal--select-all-checkbox";
+};
+/** The list item view's own classes, from `ListItemView.module.scss`. */
+export declare const itemViewStyles: {
+    readonly action: "flow--list--list-item-view--action";
+};
+export declare const className: (...parts: (string | false | undefined)[]) => string | undefined;

package/dist/types/list/types.d.ts

@@ -0,0 +1,112 @@
+import { ListAsyncDataLoader, ListData, ListDataLoaderOptions, ListDataLoaderResult, ListFilterShape, ListSearchShape, ListSettingsPort, ListSortingShape, ListViewModeValue, PropertyName } from '../_bundled/flow-components-base/index';
+import { MaybeRefOrGetter, VNodeChild } from 'vue';
+/** What a filter's value renders to here. */
+export type ListRendered = VNodeChild;
+export type VueListFilterShape<T> = ListFilterShape<T, PropertyName<T>, never, ListRendered> & {
+    /** Only for `mode: "dateRange"` — handed to the calendar. */
+    dateRangeOptions?: Record<string, unknown>;
+};
+/**
+ * A loader written as a composable.
+ *
+ * The counterpart of React's `ListLoaderHooks`, which is called during render
+ * and may therefore use hooks. A composable has the same requirement and a
+ * stricter one: it runs in `setup()`, once. So it is handed the query as a
+ * **getter** rather than as a value — reading it inside a `computed`, a `watch`
+ * or a query library's key subscribes to it, and a changed filter, sorting or
+ * search reaches the loader without it being called again.
+ *
+ * What it returns may be a plain result, a ref or a getter; `undefined` means
+ * "not there yet" and leaves the batch loading.
+ */
+export type ListComposableDataLoader<T> = (options: () => ListDataLoaderOptions<T>) => MaybeRefOrGetter<ListDataLoaderResult<T> | undefined>;
+export interface ListDataSourceShape<T> {
+    /** All the data, already loaded. Paged, filtered and sorted by the table. */
+    staticData?: ListData<T>;
+    /** Loads one batch. What it is asked for depends on the three flags below. */
+    asyncLoader?: ListAsyncDataLoader<T>;
+    /**
+     * What the async loader reads besides the query — a route parameter, a
+     * selected project. A change loads every batch again, like React's
+     * `dependencies`.
+     */
+    dependencies?: readonly unknown[];
+    /** Loads one batch with composables. One source per list: this or the above. */
+    composableLoader?: ListComposableDataLoader<T>;
+    manualPagination?: boolean;
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+}
+export interface ListItemViewShape<T> {
+    render?: (data: T) => VNodeChild;
+    textValue?: (data: T) => string;
+    href?: (data: T) => string;
+    target?: string;
+    /** Whether this item starts expanded. Only read in accordion mode. */
+    defaultExpanded?: (data: T) => boolean;
+    showList?: boolean;
+    showTiles?: boolean;
+    tileMaxWidth?: number;
+}
+export interface ListTableCellShape<T> {
+    render?: (data: T) => VNodeChild;
+    props: Record<string, unknown>;
+}
+export interface ListTableColumnShape {
+    props: Record<string, unknown>;
+    /** The column's label, rendered as the element's children. */
+    render?: () => VNodeChild;
+}
+export interface ListTableShape<T> {
+    props: Record<string, unknown>;
+    headerProps: Record<string, unknown>;
+    bodyProps: Record<string, unknown>;
+    rowProps: Record<string, unknown>;
+    columns: ListTableColumnShape[];
+    cells: ListTableCellShape<T>[];
+}
+/**
+ * What the list hands straight to the grid list and the table.
+ *
+ * Selection is theirs, not the list's: the host's `ItemsGridList` and `Table`
+ * own the keys, the keyboard and the checkboxes, and Flow's React list does
+ * nothing with these either — it spreads them through.
+ */
+export interface ListSelectionProps {
+    selectionMode?: "none" | "single" | "multiple";
+    /** Whether selecting replaces the selection or adds to it. */
+    selectionBehavior?: "toggle" | "replace";
+    selectedKeys?: "all" | readonly (string | number)[];
+    defaultSelectedKeys?: "all" | readonly (string | number)[];
+    disabledKeys?: readonly (string | number)[];
+    disallowEmptySelection?: boolean;
+    onSelectionChange?: (keys: unknown) => void;
+}
+export interface VueListShape<T> extends ListDataSourceShape<T> {
+    /** Passed on to the grid list and the table, untouched. */
+    componentProps?: ListSelectionProps;
+    /**
+     * Makes the items expandable. What they expand to is the item's `Content
+     * slot="bottom"`.
+     */
+    accordion?: boolean;
+    /** The table view mode. Without columns there is no table to switch to. */
+    table?: ListTableShape<T>;
+    /** Where the view settings are persisted. Without it, nothing is. */
+    settings?: ListSettingsPort;
+    filters?: VueListFilterShape<T>[];
+    sorting?: ListSortingShape<T>[];
+    /** Plus React's `ListSearch` field props: `autoSubmit`, `autoFocus`. */
+    search?: ListSearchShape & {
+        autoSubmit?: boolean;
+        autoFocus?: boolean;
+    };
+    itemView?: ListItemViewShape<T>;
+    batchSize?: number;
+    loadingItemsCount?: number;
+    getItemId?: (data: T) => string;
+    defaultViewMode?: ListViewModeValue;
+    onAction?: (data: T) => void;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}

package/dist/types/overlays/LightBox.d.ts

@@ -0,0 +1,80 @@
+import { OverlayCloseHandler, OverlayController, OverlayOpenHandler, OverlayOpenStateHandler } from './overlayController';
+import { PropType, VNode } from 'vue';
+export declare const LightBox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Whether content may exceed the available screen space. @default true */
+    fitScreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the light box from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /** Whether a click outside closes the light box. @default true */
+    isDismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Whether the light box is open. Use it to control its state. */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onOpen: {
+        type: PropType<OverlayOpenHandler>;
+        default: undefined;
+    };
+    onClose: {
+        type: PropType<OverlayCloseHandler>;
+        default: undefined;
+    };
+    onOpenChange: {
+        type: PropType<OverlayOpenStateHandler>;
+        default: undefined;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Whether content may exceed the available screen space. @default true */
+    fitScreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** A controller to open and close the light box from anywhere. */
+    controller: {
+        type: PropType<OverlayController>;
+        default: undefined;
+    };
+    /** Whether a click outside closes the light box. @default true */
+    isDismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Whether the light box is open. Use it to control its state. */
+    isOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onOpen: {
+        type: PropType<OverlayOpenHandler>;
+        default: undefined;
+    };
+    onClose: {
+        type: PropType<OverlayCloseHandler>;
+        default: undefined;
+    };
+    onOpenChange: {
+        type: PropType<OverlayOpenStateHandler>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    onClose: OverlayCloseHandler;
+    isOpen: boolean;
+    onOpenChange: OverlayOpenStateHandler;
+    controller: OverlayController;
+    isDismissable: boolean;
+    onOpen: OverlayOpenHandler;
+    fitScreen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default LightBox;