102 lines
1.6 KiB
Svelte
102 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import Composer from '$lib/core/refactor/Composer.svelte';
|
|
import { queryMessages } from '$lib/data/queryMessages';
|
|
import { queryTodos } from '$lib/data/queryTodos';
|
|
|
|
let composer = {
|
|
id: 'ComposerParent',
|
|
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',
|
|
data: {
|
|
map: {
|
|
todos: queryTodos,
|
|
messages: queryMessages
|
|
}
|
|
},
|
|
machine: {
|
|
initial: 'LOADING',
|
|
states: {
|
|
LOADING: {
|
|
on: {
|
|
TOGGLE: {
|
|
target: 'READY'
|
|
}
|
|
}
|
|
},
|
|
READY: {
|
|
on: {
|
|
TOGGLE: {
|
|
target: 'LOADING'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'ComposerBob',
|
|
component: 'ComposerBob',
|
|
slot: 'top',
|
|
machine: {
|
|
initial: 'READY',
|
|
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} />
|