207 lines
4.7 KiB
Plaintext
207 lines
4.7 KiB
Plaintext
{
|
|
"id": "modal",
|
|
"type": "modal",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Modal Dialog",
|
|
"description": "Modal dialog overlay with focus management, backdrop, and configurable content areas",
|
|
"author": "UXscii Team",
|
|
"created": "2024-01-15T00:00:00Z",
|
|
"modified": "2024-01-15T00:00:00Z",
|
|
"tags": ["modal", "dialog", "overlay", "popup"],
|
|
"category": "overlay",
|
|
"fidelity": "detailed"
|
|
},
|
|
"props": {
|
|
"title": "Confirm Action",
|
|
"content": "Are you sure you want to proceed with this action?",
|
|
"size": "medium",
|
|
"showCloseButton": true,
|
|
"closable": true,
|
|
"backdrop": true,
|
|
"backdropClosable": true,
|
|
"centered": true,
|
|
"buttons": [
|
|
{
|
|
"text": "Cancel",
|
|
"variant": "secondary",
|
|
"action": "close"
|
|
},
|
|
{
|
|
"text": "Confirm",
|
|
"variant": "primary",
|
|
"action": "confirm"
|
|
}
|
|
],
|
|
"icon": "",
|
|
"variant": "default"
|
|
},
|
|
"behavior": {
|
|
"states": [
|
|
{
|
|
"name": "closed",
|
|
"properties": {
|
|
"visible": false,
|
|
"zIndex": -1
|
|
}
|
|
},
|
|
{
|
|
"name": "opening",
|
|
"properties": {
|
|
"visible": true,
|
|
"zIndex": 1000,
|
|
"opacity": 0.5
|
|
}
|
|
},
|
|
{
|
|
"name": "open",
|
|
"properties": {
|
|
"visible": true,
|
|
"zIndex": 1000,
|
|
"opacity": 1
|
|
}
|
|
},
|
|
{
|
|
"name": "closing",
|
|
"properties": {
|
|
"visible": true,
|
|
"zIndex": 1000,
|
|
"opacity": 0.5
|
|
}
|
|
}
|
|
],
|
|
"interactions": [
|
|
{
|
|
"trigger": "click",
|
|
"action": "close-modal",
|
|
"condition": "backdrop && backdropClosable"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "close-modal",
|
|
"condition": "key === 'Escape' && closable"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "cycle-focus",
|
|
"condition": "key === 'Tab'"
|
|
},
|
|
{
|
|
"trigger": "click",
|
|
"action": "button-action",
|
|
"condition": "target.type === 'button'"
|
|
}
|
|
],
|
|
"focusManagement": {
|
|
"trapFocus": true,
|
|
"restoreFocus": true,
|
|
"initialFocus": "first-button",
|
|
"focusableElements": ["button", "input", "select", "textarea"]
|
|
},
|
|
"accessibility": {
|
|
"role": "dialog",
|
|
"focusable": true,
|
|
"keyboardSupport": ["Escape", "Tab", "Shift+Tab", "Enter"],
|
|
"ariaLabel": "{{title}}"
|
|
}
|
|
},
|
|
"layout": {
|
|
"display": "overlay",
|
|
"positioning": "fixed",
|
|
"spacing": {
|
|
"padding": {
|
|
"top": 2,
|
|
"right": 3,
|
|
"bottom": 2,
|
|
"left": 3
|
|
}
|
|
},
|
|
"sizing": {
|
|
"small": {
|
|
"width": 30,
|
|
"height": 15
|
|
},
|
|
"medium": {
|
|
"width": 50,
|
|
"height": 20
|
|
},
|
|
"large": {
|
|
"width": 70,
|
|
"height": 30
|
|
},
|
|
"fullscreen": {
|
|
"width": "100vw",
|
|
"height": "100vh"
|
|
}
|
|
}
|
|
},
|
|
"ascii": {
|
|
"templateFile": "modal.md",
|
|
"width": 50,
|
|
"height": 20,
|
|
"variables": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"defaultValue": "Confirm Action",
|
|
"description": "Modal dialog title/header text",
|
|
"required": false,
|
|
"validation": {
|
|
"max": 60
|
|
}
|
|
},
|
|
{
|
|
"name": "content",
|
|
"type": "string",
|
|
"defaultValue": "Are you sure you want to proceed?",
|
|
"description": "Main content/message text",
|
|
"required": true,
|
|
"validation": {
|
|
"max": 500
|
|
}
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"defaultValue": "medium",
|
|
"description": "Modal size variant",
|
|
"validation": {
|
|
"enum": ["small", "medium", "large", "fullscreen"]
|
|
}
|
|
},
|
|
{
|
|
"name": "buttons",
|
|
"type": "array",
|
|
"defaultValue": [
|
|
{"text": "Cancel", "variant": "secondary", "action": "close"},
|
|
{"text": "Confirm", "variant": "primary", "action": "confirm"}
|
|
],
|
|
"description": "Modal action buttons",
|
|
"validation": {
|
|
"max": 5
|
|
}
|
|
},
|
|
{
|
|
"name": "showCloseButton",
|
|
"type": "boolean",
|
|
"defaultValue": true,
|
|
"description": "Show X close button in header"
|
|
},
|
|
{
|
|
"name": "backdrop",
|
|
"type": "boolean",
|
|
"defaultValue": true,
|
|
"description": "Show backdrop overlay behind modal"
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"defaultValue": "default",
|
|
"description": "Modal style variant",
|
|
"validation": {
|
|
"enum": ["default", "warning", "error", "success", "info"]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
} |