Flash

⭐Star

👑Pioneer

Flash is the highest-priority strong reminder component within the TechUI notification system. It is typically used to display urgent alerts such as "server disconnection," "data loss risk," "fire alarms in digital twin systems," or critical status changes.

Unlike standard notifications, Flash features "preemptive" scheduling. When triggered, it accompanies a full-screen dynamic halo effect and immediately pauses any currently displayed light prompts (Toasts), occupying the screen focus until the Flash queue is cleared.

Basic Usage

You can trigger a flash alert using the $tFlash method.

import { inject } from 'vue';

const { $tFlash } = inject('$global');

// 1. Basic alert
$tFlash({ 
  content: "Network anomaly detected, reconnecting...", 
  type: "danger" 
});

// 2. Sudden flashing effect
$tFlash({ 
  content: "Emergency braking activated!", 
  type: "error",
  aniType: "sudden" 
});

Core Features

Preemptive Scheduling

Flash possesses absolute "right-of-way".

• Cutting in Line: When a Flash is triggered, the dispatcher immediately pauses the current Toast queue.
• Exclusivity: Previously paused Toasts will only resume display after all Flash messages have been processed (either manually closed or automatically disappeared).
• Queue Counting: If multiple Flashes are triggered in a short period, the remaining alert count is displayed in a corner of the screen (determined by queuePosition).

Full-Screen Visual Effects

When Flash is activated, it creates a full-screen halo mask centered on the notification content.

• Non-blocking: The mask layer is set to pointer-events: none, meaning it will not block user clicks on other page content.
• Animation Styles (aniType):
• soft (default): A gentle breathing halo, suitable for routine warnings.
• sudden: Rapid high-frequency flashing, suitable for emergency failures.

Appearance Reuse

Flash is essentially a wrapper for scheduling and special effects; its internal content carrier can reuse styles from Toast or Message.

// Use Message appearance (top popup)
$tFlash({
  content: "System core temperature too high",
  appearance: "message", 
  position: "top-center"
});

// Use Toast appearance (bottom popup, default)
$tFlash({
  content: "Connection lost",
  appearance: "toast"
});

Visual Tone

Five tone levels are supported to enhance or weaken the visual impact of the alert.

$tFlash({
  content: "Critical Error",
  type: "danger",
  tone: "strongInvert" // Strong inverted mode
});

Global Methods

$tFlash(options)

Pushes a high-priority alert into the Flash queue.

$tFlashClose()

Closes the currently displayed Flash alert. If there are remaining alerts in the queue, the next one will play automatically.

API Reference

Property	Type	Default	Description
content	String	(Required)	Alert content.
type	String	'info'	Theme color type (primary, danger, warning, etc.).
tone	String	'base'	Visual tone. Options: 'weak', 'base', 'strong', 'strongInvert', 'extremeInvert'.
aniType	String	'soft'	Animation style. Options: 'soft' (breathing), 'sudden' (flashing).
appearance	String	'toast'	Content carrier appearance. Options: 'toast', 'message'.
queuePosition	String	-	Display position of the queue counter (e.g., 'top-right').
queueOffset	Number	0	Additional offset (px) for the queue counter relative to its position.
spreadRadius	Number	15	Halo spread radius (px).
blurRadius	Number	30	Halo blur radius (px).
showClose	Boolean	true	Whether to show a close button.
onClose	Function	-	Callback function when closed.
duration	Number	-	Display duration. It is recommended to set this to 0 (manual close) or a long duration for Flash.
grouping	Boolean	false	Whether to enable grouping.
typedConfig	Object	-	Style configuration passed to internal components (Toast or Message).
icon	String	-	Custom icon.
hideIcon	Boolean	false	Whether to hide the icon.
transparent	Boolean	true	Whether to enable a semi-transparent background.
backgroundBlur	Boolean	true	Whether to enable background blur.
className	String	-	Custom CSS class name.

Global Configuration

The global configuration object $aFlash (or $attentionConfig.flash) is reactive. You can dynamically adjust halo intensity or default appearance.

import { inject } from 'vue';

const { $aFlash } = inject('$global');

const upgradeFlashEffect = () => {
  // Enhance halo effect
  $aFlash.value.spreadRadius = 50;
  $aFlash.value.blurRadius = 100;
  // Change default appearance to Message style
  $aFlash.value.appearance = "message";
};

Interaction Weight Notes

Because the Flash component is designed for extremely high-weight, urgent, or mandatory information (such as system-level alarms or achievement unlocks), it specifically disables monitoring of the global escCounter.

This means users cannot quickly close it by pressing the Esc key; they must wait for the animation to finish or perform an explicit interaction. This design prevents critical information from being accidentally ignored due to habitual "Esc-key smashing".