GrDashboardItemSettings — Components

Overview

When to take it

the widget has something to configure — a period, a source, an alert threshold: the window gives them a place without making the application assemble a dialog anew on every dashboard;
the size is set with a number rather than with a gesture — from the keyboard the resize corner requires counting the presses, and here the width and the height are entered directly;
the widget cannot be stretched with the mouse — a narrow screen, touch input, resizable removed on its neighbours: the fields remain the only way to change the size;
a refusal has to be visible — “there is no room on the grid” is shown by the window in place rather than by closing over something not done.

When to take something else

Need	Take
A window of your own with a header and a footer of your own	`GrDialog`
Ask “are you sure?” before a destructive action	`GrConfirmDialog`
Product buttons right in the header of a widget	`GrDashboardItem`
A form from a backend schema	`GrSchemaForm`

Examples 3 each with a live demo and its code

The widget's own settings above its size
The gear comes from show-settings on the widget, and the grid forwards the click as item-settings, so the page listens in one place. The default slot holds the product’s fields — period and comparison — above the size editor; they are a draft until «Apply», which commits the size through the grid in one step. «Cancel» leaves no trace.
Revenue · October
€48,210+12.4%against the previous period
Pipeline
74 proposals sent · 31 won
A map whose size the map decides
hide-size removes the built-in size editor — the map takes the whole row anyway. The footer slot replaces «Cancel / Apply» with the product’s answers: «Remove from the board» on the left, «Save» on the right, and both get apply and cancel to close the window properly.
Routes today
Size by numbers, not by a gesture
Here the corner is switched off, so the window is the only way to resize — useful from the keyboard and on a tablet. The width limit is the smaller of maxW and cols - x: «Low stock» stands on column eight and may grow to four columns, so the field does not offer what the grid would silently cut.
Orders today
412
Returns
18
Low stock
7 SKUs

API generated from the package · cannot drift

Props

Prop	Type	default	Description
`title`	`string \| undefined`	`undefined`	The dialog title. Unset — a locale string.
`size`	`"lg" \| "sm" \| "md" \| "xl" \| "full" \| undefined`	`undefined`	The width of the window on the `GrDialog` scale. Not set — from `GrConfigProvider`, otherwise `md`.
`hideSize`	`boolean \| undefined`	`false`	Remove the built-in size editor: the application has its own fields and only those.
`itemId`required	`string \| null`	—	Which widget is being configured. `null` — the dialog has nothing to read.
`modelValue`requiredv-model	`boolean`	—	Dialog is open. `v-model`.

Slots

Slot	Type	Description
`default`	`{ item: GrDashboardItemLayout \| undefined; }`	Application settings. They go above the size: the product part matters more than the housekeeping one. `item` is not set when the dialog stands outside a grid or no widget with that `itemId` exists in the layout: the application renders its own fields in that case too.
`footer`	`{ apply: () => void; cancel: () => void; }`	Replaces the footer entirely when "Cancel / Apply" does not fit.

Events

Event	Signature	Description
`update:modelValue`	`(event: "update:modelValue", value: boolean): void`	—
`cancel`	`(event: "cancel", id: string): void`	—
`apply`	`(event: "apply", id: string, span: GrDashboardSpan): void`	—

Types

Every exported type of the subpath, grouped by the file it lives in. Names, generics and bodies come from the package’s declaration files and cannot drift.

Import

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

Filedist/types/components/GrDashboardItemSettings/config.d.ts

grDashboardItemSettingsConfigconst

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

Filedist/types/components/GrDashboardItemSettings/GrDashboardItemSettings.vue.d.ts

GrDashboardItemSettingsPropsinterface

interface GrDashboardItemSettingsProps {
    modelValue: boolean;
    itemId: string | null;
    title?: string;
    size?: GrDashboardItemSettingsSize;
    hideSize?: boolean;
}

GrDashboardItemSettingsEmitsinterface

interface GrDashboardItemSettingsEmits {
    (e: 'update:modelValue', value: boolean): void;
    (e: 'apply', id: string, span: GrDashboardSpan): void;
    (e: 'cancel', id: string): void;
}

Filedist/types/components/GrDashboardItemSettings/grDashboardItemSettingsStyles.d.ts

GrDashboardItemSettingsSizetype

type GrDashboardItemSettingsSize = GrDialogSize;

Filedist/types/components/GrDashboardItemSettings/safelist.d.ts

grDashboardItemSettingsSafelistconst

const grDashboardItemSettingsSafelist: string[];

Usage from the library prose

The button is opened by the widget, the window is drawn by the package

The gear lives in GrDashboardItem under the showSettings prop and appears in the same place as #editActions: in the header if there is one, and in the panel over the content if there is not. Unlike #actions, it does not switch the header on — otherwise entering the edit mode would shift the content by its height.

A press emits settings on the widget and itemSettings on the grid. The second is needed so that the application listens in one place rather than subscribing to every widget separately.

The size is committed by the grid rather than by the window

The width and the height travel into the layout through the context of the grid — with its compaction, its preventCollision and its check of static. The window deliberately has no arithmetic of its own: were it to compute the size itself, two layouts would appear on the dashboard, diverging at the very first collision.

Hence the bounds of the fields as well. The upper limit of the width is neither the number of columns nor maxW, but the smaller of them and cols - x: a widget grows to the right and will not go past the right edge. A field offering twelve columns to a widget standing in the eighth would silently give away four.

Applying with a button rather than live

Changing the size moves the neighbours, and a live preview would require a snapshot of the layout and a rollback on Esc. One press of “Apply” is therefore one commit, and “Cancel” leaves no traces: the draft is typed anew on every opening.

Outside a grid the window works without the size

The context of GrDashboard is the only source both of the widget and of the number of columns. If the window stands outside, itemId equals null or the grid is in the view mode, the size block is simply absent while the application’s slot keeps working. The hideSize prop removes it even where there is a grid: sometimes the application computes the size itself.

Limits

The window does not edit the title of the widget, its static or the minW/maxW bounds. The first deliberately does not enter the layout — having travelled into the storage, it would go stale at the first change of language; the rest are declared by the markup of the widget, and an editor for them would introduce a second truth about the same thing.