test(list): update list examples

This commit is contained in:
Bowen Tan 2022-06-06 11:26:54 +08:00
parent 51c1ec448f
commit ab9d8fd96f
3 changed files with 217 additions and 150 deletions

View File

@ -17,7 +17,7 @@
"type": "core/v1/state",
"properties": {
"key": "listTitle",
"initialValue": "客户列表"
"initialValue": "Customers List"
}
},
{
@ -27,28 +27,28 @@
"initialValue": [
{
"id": 1,
"name": "马云",
"email": "jack.ma@deck.com"
"name": "Tom",
"email": "tom@deck.com"
},
{
"id": 2,
"name": "马化腾",
"email": "pony.ma@conversation.com"
"name": "Jack",
"email": "jack@conversation.com"
},
{
"id": 3,
"name": "李彦宏",
"email": "robin.li@response.com"
"name": "Pony",
"email": "pony@response.com"
},
{
"id": 4,
"name": "张一鸣",
"email": "yiming.zhang@example.com"
"name": "Peter",
"email": "peter@example.com"
},
{
"id": 5,
"name": "王兴",
"email": "xing.wang@widget.org"
"name": "John",
"email": "john@widget.org"
}
]
}
@ -74,11 +74,32 @@
]
},
{
"id": "listSlot",
"id": "listSlotText",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "{{$slot.$listItem.name}}",
"format": "md"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "list",
"slot": "content"
}
}
}
]
},
{
"id": "listSlotButton",
"type": "chakra_ui/v1/button",
"properties": {
"text": {
"raw": "我是Slot{{$slot.$listItem.name}}",
"raw": "Click Me",
"format": "md"
}
},
@ -95,8 +116,8 @@
"parameters": {
"id": "createSuccessToast",
"title": "Tost",
"description": "data{{$slot.$listItem.name}}",
"position": "bottom-right",
"description": "Hello, {{$slot.$listItem.name}}!",
"position": "top",
"duration": null,
"isClosable": true
}

View File

@ -1,133 +1,135 @@
{
"modules": [{
"version": "core/v1",
"kind": "Module",
"parsedVersion": {
"category": "core/v1",
"value": "littleItem"
},
"metadata": {
"name": "littleItem"
},
"spec": {
"properties": {},
"events": ["onEdit"],
"stateMap": {
"value": "{{ $moduleId }}__input.value"
}
},
"impl": [
{
"id": "{{ $moduleId }}__hstack",
"type": "chakra_ui/v1/hstack",
"modules": [
{
"version": "custom/v1",
"kind": "Module",
"parsedVersion": {
"category": "custom/v1",
"value": "listItem"
},
"metadata": {
"name": "listItem"
},
"spec": {
"properties": {},
"traits": []
"events": ["onEdit"],
"stateMap": {
"value": "{{ $moduleId }}__input.value"
}
},
{
"id": "{{ $moduleId }}__text",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "**{{value}}**",
"format": "md"
}
"impl": [
{
"id": "{{ $moduleId }}__hstack",
"type": "chakra_ui/v1/hstack",
"properties": {},
"traits": []
},
"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
}
]
{
"id": "{{ $moduleId }}__text",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "**{{value}}**",
"format": "md"
}
},
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "{{ $moduleId }}__hstack",
"slot": "content"
"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": "example/v1",
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "list_component",
"description": "list component example"
"name": "some App"
},
"spec": {
"components": [
@ -140,7 +142,7 @@
"type": "core/v1/state",
"properties": {
"key": "listTitle",
"initialValue": "客户列表"
"initialValue": "Customers List"
}
},
{
@ -150,28 +152,28 @@
"initialValue": [
{
"id": 1,
"name": "马云",
"email": "jack.ma@deck.com"
"name": "Tom",
"email": "tom@deck.com"
},
{
"id": 2,
"name": "马化腾",
"email": "pony.ma@conversation.com"
"name": "Jack",
"email": "jack@conversation.com"
},
{
"id": 3,
"name": "李彦宏",
"email": "robin.li@response.com"
"name": "Pony",
"email": "pony@response.com"
},
{
"id": 4,
"name": "张一鸣",
"email": "yiming.zhang@example.com"
"name": "Peter",
"email": "peter@example.com"
},
{
"id": 5,
"name": "王兴",
"email": "xing.wang@widget.org"
"name": "John",
"email": "john@widget.org"
}
]
}
@ -180,12 +182,12 @@
},
{
"id": "list",
"type": "chakra_ui/v1/list",
"type": "core/v1/list",
"properties": {
"listData": "{{ root.listData }}",
"template": {
"id": "littleItem{{$listItem.id}}",
"type": "core/v1/littleItem",
"id": "listItem{{$listItem.id}}",
"type": "custom/v1/listItem",
"properties": {
"value": "{{$listItem.name}}"
},
@ -214,6 +216,47 @@
}
}
]
},
{
"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"
}
}
}
]
}
]
}

View File

@ -29,8 +29,11 @@
const rootEl = document.querySelector('#root');
const render = example => {
ReactDOM.unmountComponentAtNode(rootEl);
const { App, registry } = initSunmaoUI({libs: [sunmaoChakraUILib]});
const { App, registry } = initSunmaoUI({ libs: [sunmaoChakraUILib] });
const { app, modules = [] } = example.value;
console.log('example', example);
console.log('modules', modules);
window.registry = registry;
modules.forEach(m => {
registry.registerModule(m);
});