ComplianceToggleCard
components/compliance/ToggleCard.vue
Framework activation card (c65 "surface semantics"): shield + name + toggle over a completeness bar. Active = raised white card, grape border, purple shield; inactive = sunken dashed card, grey shield. The bar stays neutral grey until 100% then goes grape; an "Enable Required Policies" button shows while gaps remain.
67% · 4 / 6 policies
Scenarios
5 policies mapped · 5 would need enabling
100% · 1 / 1 policies
67% · 4 / 6 policies
38% · 3 / 8 policies
0 policies mapped · 0 would need enabling
components/compliance/ToggleCard.vue
Usage
<ComplianceToggleCard
name = "(required)"
:active = "false"
:percent = "0"
:satisfied = "0"
:required = "0"
:gaps = "0"
gapTitle = "—"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | String | (required) | Framework display name (truncates) |
| active | Boolean | false | Activation state — drives the whole visual treatment |
| percent | Number | 0 | Completeness 0–100 (shown when active); 100 turns the bar grape |
| satisfied | Number | 0 | Count of required policies currently on |
| required | Number | 0 | Count of policies this framework requires |
| gaps | Number | 0 | Required-but-off count — > 0 shows the enable button (and the inactive-state hint line) |
| gapTitle | String | '' | Tooltip for the enable button (e.g. the gap policy names) |
Events
| Event | Description |
|---|---|
| toggle | Activation toggled (card title or the switch) |
| enable-gaps | "Enable Required Policies" clicked |