GrDashboard

const grDashboardConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrDashboard">;

interface GrDashboardConfigurableProps {
    rowHeight: number;
    gap: number;
    mode: GrDashboardMode;
    draggable: boolean;
    resizable: boolean;
    compact: GrDashboardCompaction;
    preventCollision: boolean;
    lazy: boolean;
    droppable: boolean;
    /** Из сетки можно утащить виджет в соседний дашборд. */
    transferable: boolean;
}

type GrDashboardMode = 'view' | 'edit';

interface GrDashboardItemBounds {
    minW?: number;
    minH?: number;
    maxW?: number;
    maxH?: number;
    static?: boolean;
    /**
     * Запрет переноса и растягивания для одного виджета.
     *
     * Не задан — действует правило сетки. Отличие от `static`: тот про раскладку
     * («не двигается и соседям не даёт себя двигать»), а эти два — про
     * интерфейс, и каждый снимается по отдельности.
     */
    draggable?: boolean;
    resizable?: boolean;
    /** Имя виджета для ручек и объявлений. */
    title?: string;
}

interface GrDashboardDropEvent {
    transfer: GrDashboardTransfer;
    /** Ячейка левого верхнего угла — та же, что показывала подложка. */
    cell: GrDashboardCell;
    breakpoint: GrDashboardBreakpoint;
    options: GrDashboardMoveOptions;
}

interface GrDashboardContext {
    mode: ComputedRef<GrDashboardMode>;
    cols: ComputedRef<number>;
    draggable: ComputedRef<boolean>;
    resizable: ComputedRef<boolean>;
    lazy: ComputedRef<boolean>;
    layout: ComputedRef<GrDashboardLayout>;
    order: ComputedRef<string[]>;
    itemFor: (id: string) => GrDashboardItemLayout | undefined;

const GR_DASHBOARD_KEY: InjectionKey<GrDashboardContext>;

function useGrDashboardContext(): GrDashboardContext | null;

const grDashboardSafelist: string[];

interface GrDashboardProps {
    /** Раскладка на каждый брейкпоинт. `v-model:layout`. */
    layout: GrDashboardResponsiveLayout;
    /** Пороги ширины контейнера, от которых начинается брейкпоинт. */
    breakpoints?: GrDashboardBreakpoints;
    /** Число колонок: мапой по брейкпоинтам или одним числом на всё. */
    cols?: GrDashboardCols | number;
    /**
     * Брейкпоинт первого рендера. Ширины контейнера на сервере нет, поэтому и
     * сервер, и первый клиентский рендер берут его — уточнение приходит после
     * монтирования, и гидрация не расходится.
     */
    initialBreakpoint?: GrDashboardBreakpoint;
    /** Высота строки сетки, px. */
    rowHeight?: number;
    /** Зазор между виджетами, px. */
    gap?: number;
    /** `view` — сетка только показывает; `edit` — появляются ручки. */
    mode?: GrDashboardMode;
    /**
     * Виджеты переносятся за ручку в режиме `edit`; виджет сужает правило своим пропом. Не задан —
     * из `GrConfigProvider`, иначе `true`.
     */
    draggable?: boolean;
    /**
     * Виджеты растягиваются уголком в режиме `edit`; виджет сужает правило своим пропом. Не задан —
     * из `GrConfigProvider`, иначе `true`.
     */
    resizable?: boolean;
    /**
     * Уплотнение после переноса: `vertical` тянет виджеты вверх, `horizontal` — влево, `both` —
     * в обе стороны, `none` оставляет там, куда положили. Не задан — из `GrConfigProvider`, иначе
     * `vertical`.
     */
    compact?: GrDashboardCompaction;
    /** Столкновение отменяет перемещение, а не толкает соседей. */
    preventCollision?: boolean;
    /** Содержимое виджета монтируется по попаданию в окно. */
    lazy?: boolean;
    /**
     * Сетка принимает виджеты, перетаскиваемые из каталога.
     *
     * Работает только в `mode="edit"`. Проп нужен там, где сеток на странице
     * несколько, а принимать должна одна.
     */
    droppable?: boolean;
    /**
     * Из сетки можно утащить виджет в соседний дашборд.
     *
     * Отдельно от `droppable`: принимать и отдавать — разные разрешения. Архивный
     * дашборд принимает виджеты, но своих не отдаёт.
     */
    transferable?: boolean;
    /** Имя группы-сетки. Не задано — из локали («Dashboard»). */
    ariaLabel?: string;
}

interface GrDashboardEmits {
    /**
     * Раскладка изменилась (`v-model:layout`): приходит целиком, с новой записью текущего
     * брейкпоинта.
     */
    (e: 'update:layout', value: GrDashboardResponsiveLayout): void;
    /**
     * Раскладка текущего брейкпоинта изменилась — вместе с самим брейкпоинтом; приходит следом
     * за `update:layout`.
     */
    (e: 'layoutChange', value: GrDashboardLayout, breakpoint: GrDashboardBreakpoint): void;
    /** Виджет переехал — указателем или стрелками: прежняя и новая запись раскладки. */
    (e: 'itemMove', id: string, from: GrDashboardItemLayout, to: GrDashboardItemLayout): void;
    /**
     * Пользователь изменил размер виджета — уголком, стрелками или в окне настроек: прежняя и новая
     * запись раскладки.
     */
    (e: 'itemResize', id: string, from: GrDashboardItemLayout, to: GrDashboardItemLayout): void;
    /**
     * Виджет с `auto-height` подстроился под содержимое.
     *
     * Отдельно от `itemResize` потому, что это не действие пользователя:
     * приложение, которое считает раскладку грязной по правкам, иначе спрашивало
     * бы «сохранить изменения?» после загрузки данных в виджет.
     */
    (e: 'itemAutoResize', id: string, from: GrDashboardItemLayout, to: GrDashboardItemLayout): void;
    /** Брейкпоинт сменился по ширине контейнера — новый брейкпоинт и число его колонок. */
    (e: 'breakpointChange', breakpoint: GrDashboardBreakpoint, cols: number): void;
    /** Виджет попросил открыть свои настройки: нажата встроенная кнопка-шестерёнка. */
    (e: 'itemSettings', id: string): void;
    /**
     * В сетку бросили виджет из каталога.
     *
     * Сетка сообщает **что и куда**, а кладёт приложение — тем же `addItem`, что
     * и по кнопке каталога. Иначе в раскладке появился бы виджет, для которого
     * приложение не рисовало разметки.
     */
    (e: 'itemDrop', event: GrDashboardDropEvent): void;
    /**
     * Виджет уехал в другую сетку.
     *
     * Из своей раскладки сетка убирает его сама — удаление однозначно, разметки
     * для него не нужно, в отличие от вставки. Событие говорит приложению, что
     * произошло, и несёт ту же нагрузку, что уехала в `itemDrop` приёмника.
     */
    (e: 'itemTransferOut', id: string, transfer: GrDashboardTransfer): void;
}