UxEditorFrame
components/ux/EditorFrame.vue
A small editor window, the VS Code look with no editor inside: a sunken tray on the left (#tray, optional uppercase trayLabel header), a tab strip over the right pane (tabs prop or #tabs; active tab marked by a primary top rule and joined to the content), an optional #toolbar at the strip's right end, and the content below. Stacks under md; tray and content scroll on their own. Presentational — size it from outside.
name deployallowed-tools Bash, Read, Write
Deploy
Ship the current branch to a named environment through the release train. Never deploy from a dirty tree.
Run scripts/preflight.sh <env> first.
Scenarios
minimal — one tab, no tray
Just a pane with a tab.
typical — tray, three tabs, toolbar
SKILL.md
long tab name — truncates, tooltip carries the path
The toolbar keeps its width; the tab gives way.
#tab slot — a mark beside the label
Tabs stay plain buttons; the slot only draws the label.
components/ux/EditorFrame.vue
Usage
<UxEditorFrame
:tabs = "[]"
:modelValue = "modelValue"
trayLabel = "—"
>
Content here
</UxEditorFrame>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | Array | [] | Strings or { value, label, title? } — the open files; title is the tooltip (e.g. the full path). Long labels truncate |
| modelValue | String | Number | null | Active tab value (v-model); unset → the first tab |
| trayLabel | String | '' | Small uppercase header over the tray (the explorer's folder name); empty → none |
Events
| Event | Description |
|---|---|
| update:modelValue | A tab was clicked — its value |
Slots
| Slot | Description |
|---|---|
| tray | Left column (typically a UxFileTree + a footer line); omitted → no tray |
| tabs | Replaces the tab buttons; scope { tabs, active } |
| tab | One tab's label inside the default button; scope { tab, active } |
| toolbar | Right end of the tab strip (e.g. a Preview / Source UxTabGroup) |
| default | The editor content |