GrDashboardItemSettings

dashboard
Дашборд
API · 5 props

Берут, когда у виджета есть что настраивать.

import { GrDashboardItemSettings } from '@feugene/granularity-dashboard/components/GrDashboardItemSettings'

Обзор

Когда брать

у виджета есть что настраивать — период, источник, порог тревоги: окно даёт им место, не заставляя приложение собирать диалог заново на каждом дашборде;
размер задаётся числом, а не жестом — с клавиатуры уголок растягивания требует счёта нажатий, а тут ширина и высота вводятся прямо;
виджет нельзя растянуть мышью — узкий экран, сенсорный ввод, resizable снят у соседей: поля остаются единственным способом изменить размер;
отказ должен быть виден — «на сетке нет места» окно показывает на месте, а не закрывается над несделанным.

Когда взять другое

Нужно	Берите
Своё окно со своей шапкой и подвалом	`GrDialog`
Спросить «точно?» перед разрушительным действием	`GrConfirmDialog`
Продуктовые кнопки прямо в шапке виджета	`GrDashboardItem`
Форму из схемы бэкенда	`GrSchemaForm`

Примеры 3 у каждого — живое демо и его код

Свои настройки виджета над его размером
Шестерёнку даёт show-settings у виджета, а сетка пересылает нажатие как item-settings, и страница слушает одно место. Слот по умолчанию держит поля продукта — период и сравнение — над редактором размера; это черновик до «Apply», который одним шагом коммитит и размер через сетку. «Cancel» не оставляет следов.
Revenue · October
€48,210+12,4%against the previous period
Pipeline
74 proposals sent · 31 won
Карта, размер которой решает карта
hide-size убирает встроенный редактор размера — карта и так занимает весь ряд. Слот footer заменяет «Cancel / Apply» ответами продукта: «Remove from the board» слева, «Save» справа, и обе кнопки получают apply и cancel, чтобы окно закрывалось правильно.
Routes today
Размер числами, а не жестом
Уголок здесь выключен, и окно — единственный способ изменить размер: так удобно с клавиатуры и на планшете. Предел ширины — меньшее из maxW и cols - x: «Low stock» стоит на восьмой колонке и может вырасти до четырёх, поэтому поле не предлагает того, что сетка молча обрезала бы.
Orders today
412
Returns
18
Low stock
7 SKUs

API порождается из пакета · разойтись не может

Props

Prop	Type	по умолчанию	Описание
`title`	`string \| undefined`	`undefined`	Заголовок окна. Не задан — строка локали.
`size`	`"lg" \| "sm" \| "md" \| "xl" \| "full" \| undefined`	`undefined`	Ширина окна по шкале `GrDialog`. Не задан — из `GrConfigProvider`, иначе `md`.
`hideSize`	`boolean \| undefined`	`false`	Убрать встроенный редактор размера: у приложения свои поля и только они.
`itemId`обязательный	`string \| null`	—	Какой виджет настраиваем. `null` — окну нечего читать.
`modelValue`обязательныйv-model	`boolean`	—	Окно открыто. `v-model`.

Слоты

Slot	Type	Описание
`default`	`{ item: GrDashboardItemLayout \| undefined; }`	Параметры приложения. Идут над размером: продуктовое важнее служебного. `item` не задан, когда окно стоит вне сетки или виджета с таким `itemId` в раскладке нет: свои поля приложение рисует и в этом случае.
`footer`	`{ apply: () => void; cancel: () => void; }`	Замена подвала целиком, когда «Отмена / Применить» не подходят.

События

Event	Сигнатура	Описание
`update:modelValue`	`(event: "update:modelValue", value: boolean): void`	—
`cancel`	`(event: "cancel", id: string): void`	—
`apply`	`(event: "apply", id: string, span: GrDashboardSpan): void`	—

Типы

Все экспортируемые типы подпути, по файлам, где они объявлены. Имена, дженерики и тела читаются из файлов деклараций пакета и разойтись не могут.

Импорт

import type { GrDashboardItemSettingsProps, GrDashboardItemSettingsEmits, GrDashboardItemSettingsSize } from '@feugene/granularity-dashboard/components/GrDashboardItemSettings'

Файлdist/types/components/GrDashboardItemSettings/config.d.ts

grDashboardItemSettingsConfigconst

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

Файлdist/types/components/GrDashboardItemSettings/GrDashboardItemSettings.vue.d.ts

GrDashboardItemSettingsPropsinterface

interface GrDashboardItemSettingsProps {
    /** Окно открыто. `v-model`. */
    modelValue: boolean;
    /** Какой виджет настраиваем. `null` — окну нечего читать. */
    itemId: string | null;
    /** Заголовок окна. Не задан — строка локали. */
    title?: string;
    /** Ширина окна по шкале `GrDialog`. Не задан — из `GrConfigProvider`, иначе `md`. */
    size?: GrDashboardItemSettingsSize;
    /** Убрать встроенный редактор размера: у приложения свои поля и только они. */
    hideSize?: boolean;
}

GrDashboardItemSettingsEmitsinterface

interface GrDashboardItemSettingsEmits {
    /** Окно открылось или закрылось (`v-model`). */
    (e: 'update:modelValue', value: boolean): void;
    /** Размер уже закоммичен сеткой; приложению остаётся сохранить своё. */
    (e: 'apply', id: string, span: GrDashboardSpan): void;
    /** Закрыли без применения: кнопка, `Esc`, клик по подложке. */
    (e: 'cancel', id: string): void;
}

Файлdist/types/components/GrDashboardItemSettings/grDashboardItemSettingsStyles.d.ts

GrDashboardItemSettingsSizetype

type GrDashboardItemSettingsSize = GrDialogSize;

Файлdist/types/components/GrDashboardItemSettings/safelist.d.ts

grDashboardItemSettingsSafelistconst

const grDashboardItemSettingsSafelist: string[];

Использование из прозы библиотеки

Кнопку открывает виджет, окно рисует пакет

Шестерёнка живёт у GrDashboardItem под пропом showSettings и появляется там же, где #editActions: в шапке, если она есть, и в панели поверх содержимого, если шапки нет. Шапку она, в отличие от #actions, не включает — иначе вход в режим редактирования сдвигал бы содержимое на её высоту.

Нажатие эмитит settings у виджета и itemSettings у сетки. Второе нужно затем, чтобы приложение слушало одно место, а не подписывалось на каждый виджет отдельно.

Размер коммитит сетка, а не окно

Ширина и высота уходят в раскладку через контекст сетки — с её компактизацией, её preventCollision и её проверкой static. Своей арифметики у окна нет намеренно: посчитай оно размер само, на дашборде появились бы две раскладки, расходящиеся на первом же столкновении.

Отсюда и границы полей. Верхний предел ширины — не число колонок и не maxW, а меньшее из них и cols - x: виджет растёт вправо и за правый край не выйдет. Поле, предлагающее двенадцать колонок виджету, стоящему на восьмой, молча отдало бы четыре.

Применение по кнопке, а не вживую

Изменение размера двигает соседей, и живой предпросмотр потребовал бы снимка раскладки и отката по Esc. Поэтому одно нажатие «Применить» — один коммит, а «Отмена» не оставляет следов: черновик набирается заново при каждом открытии.

Вне сетки окно работает без размера

Контекст GrDashboard — единственный источник и виджета, и числа колонок. Стоит окно снаружи, itemId равен null или сетка в режиме просмотра — блока размера просто нет, а слот приложения продолжает работать. Проп hideSize убирает его и там, где сетка есть: бывает, что размер приложение считает само.

Границы

Заголовок виджета, его static и границы minW/maxW окно не редактирует. Первый не входит в раскладку намеренно — уехав в хранилище, он протух бы при первой смене языка; остальные объявляет разметка виджета, и редактор для них завёл бы вторую правду о том же самом.