206 lines
4.9 KiB
Plaintext
206 lines
4.9 KiB
Plaintext
{
|
|
"id": "list",
|
|
"type": "list",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "List Component",
|
|
"description": "Ordered and unordered list component with various display patterns and interaction support",
|
|
"author": "UXscii Team",
|
|
"created": "2024-01-15T00:00:00Z",
|
|
"modified": "2024-01-15T00:00:00Z",
|
|
"tags": ["list", "menu", "navigation", "display"],
|
|
"category": "display",
|
|
"fidelity": "detailed"
|
|
},
|
|
"props": {
|
|
"items": [
|
|
{
|
|
"id": "1",
|
|
"text": "First item",
|
|
"selected": false,
|
|
"disabled": false
|
|
},
|
|
{
|
|
"id": "2",
|
|
"text": "Second item",
|
|
"selected": true,
|
|
"disabled": false
|
|
},
|
|
{
|
|
"id": "3",
|
|
"text": "Third item",
|
|
"selected": false,
|
|
"disabled": false
|
|
}
|
|
],
|
|
"type": "unordered",
|
|
"selectable": true,
|
|
"multiSelect": false,
|
|
"variant": "default",
|
|
"marker": "•",
|
|
"numbering": "decimal",
|
|
"compact": false,
|
|
"bordered": true,
|
|
"striped": false
|
|
},
|
|
"behavior": {
|
|
"states": [
|
|
{
|
|
"name": "default",
|
|
"properties": {
|
|
"background": "transparent",
|
|
"textColor": "default",
|
|
"border": "none"
|
|
}
|
|
},
|
|
{
|
|
"name": "selected",
|
|
"properties": {
|
|
"background": "primary-light",
|
|
"textColor": "primary-dark",
|
|
"border": "solid",
|
|
"fontWeight": "medium"
|
|
}
|
|
},
|
|
{
|
|
"name": "hover",
|
|
"properties": {
|
|
"background": "gray-light",
|
|
"textColor": "default"
|
|
},
|
|
"triggers": ["mouseenter"]
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"properties": {
|
|
"background": "transparent",
|
|
"textColor": "gray-light",
|
|
"opacity": 0.5
|
|
}
|
|
}
|
|
],
|
|
"interactions": [
|
|
{
|
|
"trigger": "click",
|
|
"action": "select-item",
|
|
"condition": "selectable && !disabled"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "select-next",
|
|
"condition": "key === 'ArrowDown'"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "select-previous",
|
|
"condition": "key === 'ArrowUp'"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "select-item",
|
|
"condition": "key === 'Enter' || key === ' '"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "toggle-select",
|
|
"condition": "key === 'Space' && multiSelect"
|
|
}
|
|
],
|
|
"accessibility": {
|
|
"role": "list",
|
|
"focusable": true,
|
|
"keyboardSupport": ["ArrowUp", "ArrowDown", "Enter", "Space", "Home", "End"],
|
|
"ariaLabel": "List of items"
|
|
}
|
|
},
|
|
"layout": {
|
|
"display": "block",
|
|
"positioning": "static",
|
|
"spacing": {
|
|
"padding": {
|
|
"top": 1,
|
|
"right": 1,
|
|
"bottom": 1,
|
|
"left": 1
|
|
}
|
|
},
|
|
"sizing": {
|
|
"minWidth": 15,
|
|
"maxWidth": 60,
|
|
"height": "auto"
|
|
}
|
|
},
|
|
"ascii": {
|
|
"templateFile": "list.md",
|
|
"width": 40,
|
|
"height": 10,
|
|
"variables": [
|
|
{
|
|
"name": "items",
|
|
"type": "array",
|
|
"defaultValue": [
|
|
{"id": "1", "text": "First item", "selected": false},
|
|
{"id": "2", "text": "Second item", "selected": true},
|
|
{"id": "3", "text": "Third item", "selected": false}
|
|
],
|
|
"description": "List items with text, selection state, and metadata",
|
|
"required": true,
|
|
"validation": {
|
|
"min": 1,
|
|
"max": 50
|
|
}
|
|
},
|
|
{
|
|
"name": "type",
|
|
"type": "string",
|
|
"defaultValue": "unordered",
|
|
"description": "List type: ordered, unordered, or definition",
|
|
"validation": {
|
|
"enum": ["ordered", "unordered", "definition", "checklist"]
|
|
}
|
|
},
|
|
{
|
|
"name": "marker",
|
|
"type": "string",
|
|
"defaultValue": "•",
|
|
"description": "Bullet character for unordered lists",
|
|
"validation": {
|
|
"max": 5
|
|
}
|
|
},
|
|
{
|
|
"name": "numbering",
|
|
"type": "string",
|
|
"defaultValue": "decimal",
|
|
"description": "Numbering style for ordered lists",
|
|
"validation": {
|
|
"enum": ["decimal", "alpha", "roman", "roman-upper"]
|
|
}
|
|
},
|
|
{
|
|
"name": "selectable",
|
|
"type": "boolean",
|
|
"defaultValue": true,
|
|
"description": "Whether items can be selected"
|
|
},
|
|
{
|
|
"name": "multiSelect",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Allow multiple item selection"
|
|
},
|
|
{
|
|
"name": "bordered",
|
|
"type": "boolean",
|
|
"defaultValue": true,
|
|
"description": "Show border around list"
|
|
},
|
|
{
|
|
"name": "compact",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Use compact spacing between items"
|
|
}
|
|
]
|
|
}
|
|
} |