Skip to content

Commit 1b58a01

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #33 from objectstack-ai/copilot/split-ui-component-specification
2 parents 64c6cf1 + 6075270 commit 1b58a01

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+3807
-1489
lines changed

‎content/docs/03-objectui/actions/api-request.mdx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: API Request
3+
description: Make HTTP requests
4+
---
5+
6+
# API Request
7+
8+
Make HTTP requests to backend endpoints.
9+
10+
## Protocol
11+
12+
```typescript
13+
{
14+
type: 'api',
15+
api: string, // API endpoint
16+
method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
17+
data?: object | string, // Request body (template supported)
18+
headers?: object, // Request headers
19+
confirm?: string, // Confirmation message
20+
onSuccess?: Action, // Success handler
21+
onError?: Action, // Error handler
22+
}
23+
```
24+
25+
## Examples
26+
27+
### Basic Request
28+
29+
```json
30+
{
31+
"type": "button",
32+
"label": "Save",
33+
"onClick": {
34+
"type": "api",
35+
"api": "/api/users/${userId}",
36+
"method": "PUT",
37+
"data": "${formData}",
38+
"confirm": "Save changes?",
39+
"onSuccess": {
40+
"type": "toast",
41+
"message": "Saved successfully!"
42+
}
43+
}
44+
}
45+
```
46+
47+
### DELETE with Confirmation
48+
49+
```json
50+
{
51+
"type": "api",
52+
"api": "/api/users/${id}",
53+
"method": "DELETE",
54+
"confirm": "Are you sure you want to delete this user?",
55+
"onSuccess": [
56+
{ "type": "toast", "message": "User deleted" },
57+
{ "type": "reload" }
58+
],
59+
"onError": {
60+
"type": "toast",
61+
"message": "Failed to delete user",
62+
"variant": "error"
63+
}
64+
}
65+
```
66+
67+
### POST with Custom Headers
68+
69+
```json
70+
{
71+
"type": "api",
72+
"api": "/api/upload",
73+
"method": "POST",
74+
"headers": {
75+
"Content-Type": "multipart/form-data"
76+
},
77+
"data": "${fileData}"
78+
}
79+
```
80+
81+
## HTTP Methods
82+
83+
- **GET** - Retrieve data
84+
- **POST** - Create new resources
85+
- **PUT** - Update entire resources
86+
- **PATCH** - Partial updates
87+
- **DELETE** - Remove resources
88+
89+
## Template Variables
90+
91+
Use template syntax in `api`, `data`, and other string fields:
92+
93+
```json
94+
{
95+
"api": "/api/users/${userId}/posts/${postId}",
96+
"data": {
97+
"title": "${formData.title}",
98+
"content": "${formData.content}"
99+
}
100+
}
101+
```
102+
103+
## Action Chaining
104+
105+
Chain multiple actions on success or error:
106+
107+
```json
108+
{
109+
"type": "api",
110+
"api": "/api/submit",
111+
"method": "POST",
112+
"onSuccess": [
113+
{ "type": "toast", "message": "Success!" },
114+
{ "type": "navigate", "url": "/dashboard" }
115+
]
116+
}
117+
```
118+
119+
## Confirmation Dialogs
120+
121+
Add a confirmation prompt before executing:
122+
123+
```json
124+
{
125+
"type": "api",
126+
"api": "/api/delete-all",
127+
"method": "POST",
128+
"confirm": "This will delete all data. Are you sure?"
129+
}
130+
```
131+
132+
## Related
133+
134+
- **[Form](/docs/03-objectui/container-components/form)** - Form submission
135+
- **[Toast](/docs/03-objectui/actions/toast)** - User feedback
136+
- **[Navigate](/docs/03-objectui/actions/navigate)** - Redirect after API calls

‎content/docs/03-objectui/actions/dialog.mdx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: Dialog
3+
description: Open modal dialogs
4+
---
5+
6+
# Dialog
7+
8+
Open a modal dialog with custom content.
9+
10+
## Protocol
11+
12+
```typescript
13+
{
14+
type: 'dialog',
15+
title?: string,
16+
width?: number | string,
17+
body: Component,
18+
footer?: Component[],
19+
closable?: boolean,
20+
}
21+
```
22+
23+
## Examples
24+
25+
### Form Dialog
26+
27+
```json
28+
{
29+
"type": "button",
30+
"label": "Add User",
31+
"onClick": {
32+
"type": "dialog",
33+
"title": "Create New User",
34+
"width": 600,
35+
"body": {
36+
"type": "form",
37+
"api": "/api/users",
38+
"fields": [
39+
{ "type": "input", "name": "name", "label": "Name", "required": true },
40+
{ "type": "input", "name": "email", "label": "Email", "inputType": "email", "required": true }
41+
]
42+
}
43+
}
44+
}
45+
```
46+
47+
### Confirmation Dialog
48+
49+
```json
50+
{
51+
"type": "dialog",
52+
"title": "Confirm Action",
53+
"body": {
54+
"type": "text",
55+
"value": "Are you sure you want to proceed?"
56+
},
57+
"footer": [
58+
{ "type": "button", "label": "Cancel", "onClick": { "type": "close" } },
59+
{ "type": "button", "label": "Confirm", "onClick": { "type": "api", "api": "/api/confirm" } }
60+
]
61+
}
62+
```
63+
64+
### Content Dialog
65+
66+
```json
67+
{
68+
"type": "button",
69+
"label": "View Details",
70+
"onClick": {
71+
"type": "dialog",
72+
"title": "User Details",
73+
"width": "80%",
74+
"body": {
75+
"type": "card",
76+
"body": [
77+
{ "type": "text", "value": "Name: ${user.name}" },
78+
{ "type": "text", "value": "Email: ${user.email}" },
79+
{ "type": "text", "value": "Role: ${user.role}" }
80+
]
81+
}
82+
}
83+
}
84+
```
85+
86+
## Features
87+
88+
### Width
89+
90+
Control dialog width with:
91+
- Fixed pixel values: `600`
92+
- Percentage: `"80%"`
93+
- Preset sizes: `"sm"`, `"md"`, `"lg"`, `"xl"`
94+
95+
### Closable
96+
97+
Set `closable: false` to prevent users from closing the dialog via the close button or ESC key.
98+
99+
### Body Content
100+
101+
The dialog body can contain any component:
102+
- Forms for data entry
103+
- Cards for content display
104+
- Tables for data selection
105+
- Custom component compositions
106+
107+
### Footer
108+
109+
Add custom footer buttons for actions like Cancel, Confirm, Save, etc.
110+
111+
## Use Cases
112+
113+
- Create/edit forms
114+
- Confirmation prompts
115+
- Detail views
116+
- Multi-step wizards
117+
- Image galleries
118+
119+
## Related
120+
121+
- **[Form](/docs/03-objectui/container-components/form)** - Forms in dialogs
122+
- **[API Request](/docs/03-objectui/actions/api-request)** - Submit from dialog

‎content/docs/03-objectui/actions/index.mdx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Actions
3+
description: Interactive behaviors and event handlers in ObjectUI
4+
---
5+
6+
# Actions
7+
8+
Actions define interactive behaviors in ObjectUI.
9+
10+
## Action Types
11+
12+
- **[API Request](/docs/03-objectui/actions/api-request)** - Make HTTP requests
13+
- **[Navigate](/docs/03-objectui/actions/navigate)** - Navigate to different pages
14+
- **[Dialog](/docs/03-objectui/actions/dialog)** - Open modal dialogs
15+
- **[Toast](/docs/03-objectui/actions/toast)** - Show notification messages
16+
17+
## Overview
18+
19+
Actions are the interactive layer of ObjectUI, handling user events and triggering responses. They support:
20+
21+
- **Chaining**: Actions can trigger other actions (onSuccess, onError)
22+
- **Template Substitution**: Use `${variable}` syntax for dynamic values
23+
- **Confirmation**: Add confirm prompts before execution
24+
- **Error Handling**: Built-in error handling and user feedback
25+
26+
## Common Patterns
27+
28+
### Form Submission
29+
30+
```json
31+
{
32+
"type": "form",
33+
"fields": [...],
34+
"onSubmit": {
35+
"type": "api",
36+
"api": "/api/users",
37+
"method": "POST",
38+
"onSuccess": {
39+
"type": "toast",
40+
"message": "User created successfully!"
41+
}
42+
}
43+
}
44+
```
45+
46+
### Button Actions
47+
48+
```json
49+
{
50+
"type": "button",
51+
"label": "Save",
52+
"onClick": {
53+
"type": "api",
54+
"api": "/api/save",
55+
"method": "POST",
56+
"data": "${formData}"
57+
}
58+
}
59+
```
60+
61+
### Navigation
62+
63+
```json
64+
{
65+
"type": "button",
66+
"label": "View Details",
67+
"onClick": {
68+
"type": "navigate",
69+
"url": "/users/${userId}"
70+
}
71+
}
72+
```
73+
74+
## Action Chaining
75+
76+
Actions can trigger other actions on success or error:
77+
78+
```json
79+
{
80+
"type": "api",
81+
"api": "/api/users/${id}",
82+
"method": "DELETE",
83+
"confirm": "Delete this user?",
84+
"onSuccess": [
85+
{ "type": "toast", "message": "User deleted" },
86+
{ "type": "reload" }
87+
],
88+
"onError": {
89+
"type": "toast",
90+
"message": "Failed to delete user",
91+
"variant": "error"
92+
}
93+
}
94+
```
95+
96+
## Next Steps
97+
98+
Explore individual action types for detailed protocol definitions and examples:
99+
100+
- **[API Request](/docs/03-objectui/actions/api-request)** - HTTP requests
101+
- **[Navigate](/docs/03-objectui/actions/navigate)** - Page navigation
102+
- **[Dialog](/docs/03-objectui/actions/dialog)** - Modal dialogs
103+
- **[Toast](/docs/03-objectui/actions/toast)** - Notifications

‎content/docs/03-objectui/actions/meta.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Actions",
3+
"pages": [
4+
"index",
5+
"api-request",
6+
"navigate",
7+
"dialog",
8+
"toast"
9+
]
10+
}

0 commit comments

Comments
 (0)