CardWindowHeader

A retro operating system window title bar featuring tri-color status lamps on the left, a centered monospace uppercase title, and ASCII-style window controls on the right. Supports a multi-mode adaptive architecture: serves as a purely decorative layer in presentation cards, or as full interactive control buttons with keyboard focus and accessibility semantics.

Preview

Preview

交互控制模式（工控实体按钮）

Control_Terminal_v3.0

> LAST_EVENT: 等待操作...

> 点击右侧 [ _ ] [ □ ] [ X ] 或左侧红黄绿指示灯可直接触发动作并支持 Tab 聚焦。

默认静态装饰模式

System Monitor v2.0[ _ ] [ X ]

> CPU ██████████░░░░ 68%

> MEM ███████░░░░░░░ 47%

> STATUS: ALL SYSTEMS NOMINAL (静态展示，无 a11y 负担)

隐藏控制符（纯标题栏）

Read Only Panel

showControls 为 false 时右侧不渲染 ASCII 控制符，适合静态展示面板。

自定义操作区插槽

Config Editor

> actions 插槽优先级最高，可放置任意操作按钮。

Installation

pnpm dlx brutx-vue@latest add card-window-header

Usage

Basic Usage (Decorative)

<script setup>
import { CardWindowHeader } from 'brutx-ui-vue'
</script>

<template>
    <div class="border-3 border-brutal shadow-brutal">
        <CardWindowHeader title="System Monitor v2.0" />
        <div class="p-4">Window body…</div>
    </div>
</template>

Interactive Control Mode

Enable window control actions with closable, minimizable, or maximizable. Supports Tab keyboard navigation, Enter / Space activation, and @close / @minimize / @maximize event handling.

<script setup>
import { ref } from 'vue'
import { CardWindowHeader } from 'brutx-ui-vue'

const isCollapsed = ref(false)

function onClose() {
    console.log('Window closed')
}
function onMinimize() {
    isCollapsed.value = !isCollapsed.value
}
</script>

<template>
    <div class="border-3 border-brutal shadow-brutal">
        <CardWindowHeader
            title="Terminal_Shell"
            closable
            minimizable
            maximizable
            interactive-lamps
            @close="onClose"
            @minimize="onMinimize"
        />
        <div v-show="!isCollapsed" class="p-4">Collapsible console content…</div>
    </div>
</template>

Custom Actions Area Slot

The actions slot has highest priority and replaces the default control buttons with arbitrary action components.

<template>
    <CardWindowHeader title="Config Editor">
        <template #actions>
            <Button size="sm" variant="accent">SAVE</Button>
        </template>
    </CardWindowHeader>
</template>

Props

Prop	Type	Default	Description
title	string	(required)	Window title rendered in monospace uppercase
showControls	boolean	true	Whether to render decorative ASCII controls (effective when not in interactive mode and no actions slot)
closable	boolean	false	Enable close button [ X ] (interactive mode)
minimizable	boolean	false	Enable minimize/fold button [ _ ] (interactive mode)
maximizable	boolean	false	Enable maximize/expand button [ □ ] (interactive mode)
interactiveLamps	boolean	false	Enable interactive clicks on tri-color status lamps (red=close, yellow=minimize, green=maximize)
closeAriaLabel	string	undefined	Accessible label for close button (falls back to locale translation)
minimizeAriaLabel	string	undefined	Accessible label for minimize button
maximizeAriaLabel	string	undefined	Accessible label for maximize button
class	string	undefined	Custom CSS class name

Emits

Event	Parameters	Description
close	(event: MouseEvent | KeyboardEvent)	Fired when clicking close button or red lamp
minimize	(event: MouseEvent | KeyboardEvent)	Fired when clicking minimize button or yellow lamp
maximize	(event: MouseEvent | KeyboardEvent)	Fired when clicking maximize button or green lamp

Slots

Slot	Description
actions	Custom actions area on the right; highest priority, replaces default controls and interactive buttons

Accessibility

• Adaptive semantics: When no interactive props are set, controls and status lamps carry aria-hidden="true", producing zero screen reader clutter. When interactive props are provided, elements upgrade to semantic <button> tags with accurate aria-labels.
• Keyboard navigation: Buttons feature FOCUS_RING_CLASSES high-contrast brutalist focus rings, supporting Tab key focus and Enter / Space activation.