vueda

Appearance

View Markdown

System Views ​

This page shows the views that VUEDA renders while a route loads and when a route or model action does not exist. It also shows the display parts that those views and the action views build on. Action & Workflow Views shows the action views, including ViewDeactivate. Components describes the rules that every component page shares.

ViewLoading ​

ViewLoading is the route-level loading status. ViewActionRouter shows it while a route's model config and workflow load. By default it shows a loading icon and a label.

After slowAfterMs, it switches to an hourglass icon and a message saying the load is taking longer than usual. The prop defaults to the --vueda-loading-slow-ms token. The slow-actions slot adds buttons once the load is slow. Context text, request details, and dependency progress appear only when the caller passes them.

The loading and hourglass icons come from the ViewLoading entry of the Icon Registry, falling back to its Default entry.

These previews hold the normal and slow states so both stay visible.

Theme keys: ViewLoading.

ViewNotFound ​

ViewNotFound is the route-level 404 page. It is a SystemMessageCard in the info tone, with these parts from top to bottom:

  • a crest with the "Route not found" eyebrow, the typed path, and a 404 code;
  • a short explanation, which the blurb slot replaces;
  • a TriedUrlCallout that marks the segments of the typed path that differ from the closest route;
  • a SuggestionList of the closest routes, each with its similarity score;
  • a DiagnosticStrip with the route, followed by any rows in the diagnostics prop;
  • Back and Go to home buttons, which the actions slot replaces.

useSuggestRoutes scores every registered route path against the typed path by string similarity, with each numeric segment read as a primary key. It keeps up to suggestionLimit routes, five by default, and drops routes that score zero. The list is hidden when every route scores zero.

The callout compares each typed segment with the same position in the top suggestion. A numeric segment matches a route parameter. With no suggestion, every segment is marked. Go to home opens homePath, / by default.

This page has no router, so the demo below composes the same parts that the view renders for a mistyped path.

Theme keys: ViewNotFound.

ViewActionNotFound ​

ViewActionNotFound is the 404 page for a model action. ViewActionRouter shows it when no view resolves for the route (Action View Resolution). It has the same parts as ViewNotFound, with these differences:

  • The crest shows the app/model/action key.
  • The callout is labelled "Action key", and only its action segment is marked.
  • The suggestion list shows the closest model's actions.
  • The second button is Browse all actions, which opens that model's list route. It is hidden when no model is close.

The suggestions come from the Model Info that the client has already loaded. The view picks the closest app label by string similarity, then the closest model in that app. It lists that model's actions by route name, so retrieve appears as read. It leaves out partial_update, which the update route serves. A detail action appears only when the tried route has a primary key, and its link reuses that key. The list is sorted by similarity to the tried action name. The view passes no HTTP verb, so the rows show no verb chip.

This demo composes the same parts for a mistyped action on a model whose actions are list, create, and archive.

Theme keys: ViewActionNotFound.

SystemMessageCard ​

SystemMessageCard is the card that ViewNotFound and ViewActionNotFound are built on. It has three parts:

  • a crest: an icon tile tinted by the tone, an eyebrow label, a monospace kind line, and an optional status code, above a divider;
  • a body, from the default slot;
  • an optional actions footer, from the actions slot.

The tones are info, warning, danger, and loading. The root carries data-tone, and the crest icon tile takes its tint from that attribute. The crest code and the actions footer render only when their slots have content.

Set icon-name to an Icon Registry name to show an icon in the tile. icon-props adds attributes to that icon. iconOverride replaces registry entries for this card and its descendants.

Theme keys: SystemMessageCard. SystemMessageCard.crestIcon holds the tint for each tone.

ConsequencesBullets ​

ConsequencesBullets is a list of what a destructive action will do. ViewDestroy uses it to list the linked records that a delete affects. Each row has an optional leading icon, a bold label, and an optional muted description.

A row's tone (default, warn, or danger) tints only its icon, through ConsequencesBullets.toneWarn and ConsequencesBullets.toneDanger. The list shows relative severity without overpowering the card around it.

Icons come from the ConsequencesBullets entry of the Icon Registry, falling back to its Default entry. When a name has no icon, the icon cell still renders, so labels stay aligned across rows.

Theme keys: ConsequencesBullets.

TypedConfirmField ​

TypedConfirmField asks the user to type an exact value before a destructive button enables. ModelActionForm renders one when its confirmText prop has a value. Any view built on it, such as ViewDestroy, can require one.

The field is a muted box with a label, an inline monospace chip showing the expected value, and a monospace input. The input turns off autocomplete and spell check. The match is exact, including case and whitespace, and the root carries data-match="true" or "false".

Read the match state from the match event, or compare the v-model value with expectedValue. Disable your submit control until they match.

Theme keys: TypedConfirmField.

TriedUrlCallout ​

TriedUrlCallout is a bordered callout that shows the path or action key the user tried, with the wrong segments marked. ViewNotFound and ViewActionNotFound place it above their suggestion lists.

The callout has two columns: an uppercase label on the left and the monospace value on the right. The segments prop takes { text, bad? } entries, and the caller splits the path. Segments with bad: true use the destructive text color. The other segments use TriedUrlCallout.fade, so the marked segment stands out. The label defaults to "You tried".

Theme keys: TriedUrlCallout.

SuggestionList ​

SuggestionList is the "Did you mean" list the 404 views show. It takes a head label, an optional monospace source label, and a list of rows. Each row has an icon, a label with an optional second line, a trailing chip, and a chevron. The shape decides what the chip shows: route shows a similarity score, and action shows an HTTP verb.

Each row is a router-link, so the rows navigate in an application with vue-router. This page has no router, so the rows below render the link that a real RouterLink would produce and ignore the click.

Theme keys: SuggestionList.

DiagnosticStrip ​

DiagnosticStrip is the two-column list of labels and values that the 404 views put below their suggestions. An operator can copy the route, request id, or session from it into a ticket. Values render in monospace by default, because they exist to be pasted elsewhere; set mono to false for sentences.

The strip shows only the rows that the view passes. It fetches nothing, and it changes nothing on the server.

Theme keys: DiagnosticStrip.

ErrorDisplay ​

ErrorDisplay is the error card that the view layer renders above a failed surface. ActionForm renders one above its form, so a failed save shows a card without any code in the view. It takes an errored flag and an error. It formats an Error, a FetchError with a response and server detail, an array of several errors, or a string.

It reports each distinct error to Sentry once. This docs site has no Sentry client, so the demos below report nothing.

A view can hide some errors from the card so another part of the page shows them. ignore-form-validation-errors hides server validation errors, which belong on the fields. ignore-list-filter-errors hides filter errors, which belong on the filter chip. ignore-aborted-requests, on by default, hides cancelled requests, such as one that the user left by navigating away.

The card reports a failure that already happened. Dismissing it does not retry or undo the request.

Theme keys: ErrorDisplay.