improve the page, sections, components
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
// Example Masonry DSL definition
|
||||
// This demonstrates the comprehensive language structure
|
||||
// Enhanced Masonry DSL example demonstrating new features
|
||||
// This shows the comprehensive language structure with containers, detailed fields, and layouts
|
||||
|
||||
// Server configuration
|
||||
server MyApp host "localhost" port 8080
|
||||
@ -65,61 +65,122 @@ endpoint POST "/posts" for Post desc "Create post" auth
|
||||
param post_data: object required from body
|
||||
returns object fields [id, title, content, author_id]
|
||||
|
||||
// Frontend pages with components
|
||||
// Enhanced User Management page with container layout
|
||||
page UserManagement at "/admin/users" layout AdminLayout title "User Management" auth
|
||||
meta description "Manage system users"
|
||||
meta keywords "users, admin, management"
|
||||
|
||||
component Table for User
|
||||
fields [email, name, id]
|
||||
actions [edit via "/users/{id}", delete via "/users/{id}", create via "/users"]
|
||||
data from "/users"
|
||||
style modern classes ["table-striped", "table-hover"]
|
||||
pagination size 20
|
||||
filters [email as text label "Search email", name as text label "Search name"]
|
||||
validate
|
||||
container main class "grid grid-cols-3 gap-4"
|
||||
section sidebar class "col-span-1"
|
||||
component UserStats for User
|
||||
data from "/users/stats"
|
||||
|
||||
section content class "col-span-2"
|
||||
component UserTable for User
|
||||
fields [email, name, role, created_at]
|
||||
actions [edit, delete, view]
|
||||
data from "/users"
|
||||
|
||||
panel UserEditPanel for User trigger "edit" position "slide-right"
|
||||
component UserForm for User
|
||||
field email type text label "Email" required
|
||||
field name type text label "Name" required
|
||||
field role type select options ["admin", "user"]
|
||||
button save label "Save User" style "primary" via "/users/{id}"
|
||||
button cancel label "Cancel" style "secondary"
|
||||
|
||||
// Enhanced Form component with detailed field configurations
|
||||
page UserFormPage at "/admin/users/new" layout AdminLayout title "Create User" auth
|
||||
component Form for User
|
||||
fields [email, name]
|
||||
actions [save via "/users", cancel]
|
||||
style clean
|
||||
validate
|
||||
field email type text label "Email Address" placeholder "Enter your email" required validate email
|
||||
field name type text label "Full Name" placeholder "Enter your full name" required
|
||||
field role type select label "User Role" options ["admin", "user", "moderator"] default "user"
|
||||
field avatar type file label "Profile Picture" accept "image/*"
|
||||
field bio type textarea label "Biography" placeholder "Tell us about yourself" rows 4
|
||||
|
||||
page UserList at "/users" layout MainLayout title "Users"
|
||||
meta description "Browse all users"
|
||||
when role equals "admin"
|
||||
field permissions type multiselect label "Permissions"
|
||||
options ["users.manage", "posts.manage", "system.config"]
|
||||
|
||||
component Table for User
|
||||
fields [email, name]
|
||||
data from "/users"
|
||||
pagination size 10
|
||||
filters [name as text label "Search by name"]
|
||||
section actions
|
||||
button save label "Save User" style "primary" loading "Saving..." via "/users"
|
||||
button cancel label "Cancel" style "secondary"
|
||||
|
||||
// Dashboard with tabbed interface
|
||||
page Dashboard at "/dashboard" layout MainLayout title "Dashboard"
|
||||
container tabs
|
||||
tab overview label "Overview" active
|
||||
component StatsCards
|
||||
component RecentActivity
|
||||
|
||||
tab users label "Users"
|
||||
component UserTable for User
|
||||
data from "/users"
|
||||
|
||||
tab posts label "Posts"
|
||||
component PostTable for Post
|
||||
data from "/posts"
|
||||
|
||||
modal CreateUserModal trigger "create-user"
|
||||
component UserForm for User
|
||||
field email type text label "Email" required
|
||||
field name type text label "Name" required
|
||||
button save label "Create" via "/users"
|
||||
button cancel label "Cancel"
|
||||
|
||||
// Post Management with master-detail layout
|
||||
page PostManagement at "/admin/posts" layout AdminLayout title "Post Management" auth
|
||||
meta description "Manage blog posts"
|
||||
meta keywords "posts, blog, content"
|
||||
layout "master-detail"
|
||||
|
||||
component Table for Post
|
||||
fields [title, author_id, published, created_at]
|
||||
actions [edit via "/posts/{id}", delete via "/posts/{id}", create via "/posts"]
|
||||
data from "/posts"
|
||||
style modern
|
||||
pagination size 15
|
||||
filters [title as text label "Search title", published as select label "Published status"]
|
||||
validate
|
||||
master PostList
|
||||
component Table for Post
|
||||
field title type text label "Title" sortable
|
||||
field author type relation label "Author" display "name" relates to User
|
||||
field status type badge label "Status"
|
||||
|
||||
page CreatePost at "/posts/new" layout MainLayout title "Create Post" auth
|
||||
component Form for Post
|
||||
fields [title, content]
|
||||
actions [save via "/posts", cancel]
|
||||
style clean
|
||||
validate
|
||||
detail PostEditor trigger "edit"
|
||||
component Form for Post
|
||||
section basic class "mb-4"
|
||||
field title type text label "Post Title" required
|
||||
field content type richtext label "Content" required
|
||||
|
||||
page BlogList at "/blog" layout PublicLayout title "Blog Posts"
|
||||
meta description "Read our latest blog posts"
|
||||
meta keywords "blog, articles, content"
|
||||
section metadata class "grid grid-cols-2 gap-4"
|
||||
field author_id type autocomplete label "Author"
|
||||
source "/users" display "name" value "id"
|
||||
field published type toggle label "Published" default "false"
|
||||
field tags type multiselect label "Tags"
|
||||
source "/tags" display "name" value "id"
|
||||
|
||||
component Table for Post
|
||||
fields [title, created_at]
|
||||
data from "/posts"
|
||||
pagination size 5
|
||||
filters [title as text label "Search posts"]
|
||||
// Simple table component with smart defaults
|
||||
page SimpleUserList at "/users" layout MainLayout title "Users"
|
||||
component SimpleTable for User
|
||||
fields [email, name, created_at]
|
||||
actions [edit, delete]
|
||||
data from "/users"
|
||||
|
||||
// Detailed table when more control is needed
|
||||
page DetailedUserList at "/admin/users/detailed" layout AdminLayout title "Detailed User Management" auth
|
||||
component DetailedTable for User
|
||||
field email type text label "Email Address"
|
||||
field name type text label "Full Name"
|
||||
|
||||
data from "/users"
|
||||
pagination size 20
|
||||
|
||||
// Conditional rendering example
|
||||
page ConditionalForm at "/conditional" layout MainLayout title "Conditional Form"
|
||||
component UserForm for User
|
||||
field email type text label "Email" required
|
||||
field role type select options ["admin", "user", "moderator"]
|
||||
|
||||
when role equals "admin"
|
||||
field permissions type multiselect label "Admin Permissions"
|
||||
options ["users.manage", "posts.manage", "system.config"]
|
||||
|
||||
when role equals "moderator"
|
||||
field moderation_level type select label "Moderation Level"
|
||||
options ["basic", "advanced", "full"]
|
||||
|
||||
section actions
|
||||
button save label "Save User" style "primary" loading "Saving..."
|
||||
button cancel label "Cancel" style "secondary"
|
||||
|
||||
Reference in New Issue
Block a user