108 lines
1.9 KiB
Svelte
108 lines
1.9 KiB
Svelte
<script>
|
|
import Composer from '$lib/core/refactor/Composer.svelte';
|
|
|
|
let composer = {
|
|
id: 'ComposerParent',
|
|
store: {
|
|
title: 'Hello Earth',
|
|
description:
|
|
'how to use the store and mapping logic of store to store and data to store maps',
|
|
helloMapMe: 'this is going to be mapped'
|
|
},
|
|
machine: {
|
|
initial: 'NOTREADY',
|
|
states: {
|
|
NOTREADY: {
|
|
on: { TOGGLE: 'READY' }
|
|
},
|
|
READY: {
|
|
on: { TOGGLE: 'NOTREADY' }
|
|
}
|
|
}
|
|
},
|
|
layout: {
|
|
columns: '1fr 1fr',
|
|
rows: '1fr 1fr',
|
|
areas: `
|
|
"top aside"
|
|
"bottom aside"
|
|
`
|
|
},
|
|
children: [
|
|
{
|
|
id: 'ComposerCharly',
|
|
component: 'ComposerCharly',
|
|
slot: 'aside',
|
|
machine: {
|
|
initial: 'NOTREADY',
|
|
states: {
|
|
NOTREADY: {
|
|
on: { TOGGLE: 'READY' }
|
|
},
|
|
READY: {
|
|
on: { TOGGLE: 'NOTREADY' }
|
|
}
|
|
}
|
|
},
|
|
store: {
|
|
machine: { state: 'NOTREADY' },
|
|
hello: 'define me directly',
|
|
hello2: 'overwrite me with the mapping value'
|
|
},
|
|
map: {
|
|
title: '@hello:title',
|
|
description: '@hello:description',
|
|
hello2: '@hello:helloMapMe',
|
|
pkpWallet: '@wallet:pkpWallet',
|
|
todos: '@data:queryTodos'
|
|
},
|
|
services: ['helloEarthAlert']
|
|
},
|
|
{
|
|
id: 'ComposerBob',
|
|
component: 'ComposerBob',
|
|
slot: 'top',
|
|
store: {
|
|
machine: { state: 'NOTREADY' }
|
|
},
|
|
machine: {
|
|
initial: 'NOTREADY',
|
|
states: {
|
|
NOTREADY: {
|
|
on: { TOGGLE: 'READY' }
|
|
},
|
|
READY: {
|
|
on: { TOGGLE: 'NOTREADY' }
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'ComposerAlice',
|
|
component: 'ComposerAlice',
|
|
slot: 'bottom',
|
|
machine: {
|
|
initial: 'RED',
|
|
states: {
|
|
GREEN: {
|
|
on: { SWITCH: 'YELLOW' }
|
|
},
|
|
YELLOW: {
|
|
on: { SWITCH: 'RED' }
|
|
},
|
|
RED: {
|
|
on: { SWITCH: 'GREEN' }
|
|
}
|
|
},
|
|
on: {
|
|
READY: 'GREEN',
|
|
NOTREADY: 'RED'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
</script>
|
|
|
|
<Composer {composer} />
|