sunmao-ui/examples/list/listModule.json

{
  "modules": [
    {
      "version": "custom/v1",
      "kind": "Module",
      "parsedVersion": {
        "category": "custom/v1",
        "value": "listItem"
      },
      "metadata": {
        "name": "listItem"
      },
      "spec": {
        "properties": {},
        "events": ["onEdit"],
        "stateMap": {
          "value": "{{ $moduleId }}__input.value"
        }
      },
      "impl": [
        {
          "id": "{{ $moduleId }}__hstack",
          "type": "chakra_ui/v1/hstack",
          "properties": {},
          "traits": []
        },
        {
          "id": "{{ $moduleId }}__text",
          "type": "core/v1/text",
          "properties": {
            "value": {
              "raw": "**{{value}}**",
              "format": "md"
            }
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "{{ $moduleId }}__hstack",
                  "slot": "content"
                }
              }
            }
          ]
        },
        {
          "id": "{{ $moduleId }}__inputValueText",
          "type": "core/v1/text",
          "properties": {
            "value": {
              "raw": "**{{ {{ $moduleId }}__input.value }}**",
              "format": "md"
            }
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "{{ $moduleId }}__hstack",
                  "slot": "content"
                }
              }
            }
          ]
        },
        {
          "id": "{{ $moduleId }}__input",
          "type": "chakra_ui/v1/input",
          "properties": {},
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "{{ $moduleId }}__hstack",
                  "slot": "content"
                }
              }
            }
          ]
        },
        {
          "id": "{{ $moduleId }}__button",
          "type": "chakra_ui/v1/button",
          "properties": {
            "text": {
              "raw": "click{{value}}",
              "format": "md"
            }
          },
          "traits": [
            {
              "type": "core/v1/event",
              "properties": {
                "handlers": [
                  {
                    "type": "onClick",
                    "componentId": "$module",
                    "method": {
                      "name": "onEdit",
                      "parameters": {
                        "moduleId": "{{$moduleId}}"
                      }
                    },
                    "wait": {},
                    "disabled": false
                  }
                ]
              }
            },
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "{{ $moduleId }}__hstack",
                  "slot": "content"
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "app": {
    "version": "sunmao/v1",
    "kind": "Application",
    "metadata": {
      "name": "some App"
    },
    "spec": {
      "components": [
        {
          "id": "root",
          "type": "chakra_ui/v1/root",
          "properties": {},
          "traits": [
            {
              "type": "core/v1/state",
              "properties": {
                "key": "listTitle",
                "initialValue": "Customers List"
              }
            },
            {
              "type": "core/v1/arrayState",
              "properties": {
                "key": "listData",
                "initialValue": [
                  {
                    "id": 1,
                    "name": "Tom",
                    "email": "tom@deck.com"
                  },
                  {
                    "id": 2,
                    "name": "Jack",
                    "email": "jack@conversation.com"
                  },
                  {
                    "id": 3,
                    "name": "Pony",
                    "email": "pony@response.com"
                  },
                  {
                    "id": 4,
                    "name": "Peter",
                    "email": "peter@example.com"
                  },
                  {
                    "id": 5,
                    "name": "John",
                    "email": "john@widget.org"
                  }
                ]
              }
            }
          ]
        },
        {
          "id": "list",
          "type": "core/v1/list",
          "properties": {
            "listData": "{{ root.listData }}",
            "template": {
              "id": "listItem{{$listItem.id}}",
              "type": "custom/v1/listItem",
              "properties": {
                "value": "{{$listItem.name}}"
              },
              "handlers": [
                {
                  "type": "onEdit",
                  "componentId": "$utils",
                  "method": {
                    "name": "alert",
                    "parameters": "listen module event：{{ $listItem.name }}!"
                  },
                  "wait": {},
                  "disabled": false
                }
              ]
            }
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "root",
                  "slot": "root"
                }
              }
            }
          ]
        },
        {
          "id": "moduleContainer2",
          "type": "core/v1/moduleContainer",
          "properties": {
            "id": "listItem{{$slot.$listItem.id}}",
            "type": "custom/v1/listItem",
            "properties": {
              "value": "{{$slot.$listItem.name}}"
            },
            "handlers": [
              {
                "type": "onEdit",
                "componentId": "$utils",
                "method": {
                  "name": "chakra_ui/v1/openToast",
                  "parameters": {
                    "position": "top",
                    "duration": 1000,
                    "title": "Hello,{{$slot.$listItem.name}}!",
                    "description": "",
                    "isClosable": false,
                    "variant": "subtle",
                    "status": "info",
                    "id": ""
                  }
                }
              }
            ]
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "list",
                  "slot": "content"
                }
              }
            }
          ]
        }
      ]
    }
  }
}