136 lines
2.3 KiB
Svelte
136 lines
2.3 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: 'auto 1fr',
|
|
areas: `
|
|
"topleft topright"
|
|
"mainleft mainright"
|
|
`
|
|
},
|
|
children: [
|
|
{
|
|
id: 'ComposerCharly',
|
|
component: 'ComposerCharly',
|
|
slot: 'mainright',
|
|
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: 'topleft',
|
|
machine: {
|
|
initial: 'READY',
|
|
states: {
|
|
NOTREADY: {
|
|
on: { TOGGLE: 'READY' }
|
|
},
|
|
READY: {
|
|
on: { TOGGLE: 'NOTREADY' }
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'ComposerAlice',
|
|
component: 'ComposerAlice',
|
|
slot: 'topright',
|
|
machine: {
|
|
initial: 'RED',
|
|
states: {
|
|
GREEN: {
|
|
on: { SWITCH: 'YELLOW' }
|
|
},
|
|
YELLOW: {
|
|
on: { SWITCH: 'RED' }
|
|
},
|
|
RED: {
|
|
on: { SWITCH: 'GREEN' }
|
|
}
|
|
},
|
|
on: {
|
|
READY: 'GREEN',
|
|
NOTREADY: 'RED'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'ComposerForm',
|
|
component: 'ComposerForm',
|
|
slot: 'mainleft',
|
|
machine: {
|
|
id: 'validation',
|
|
initial: 'notValidated',
|
|
context: {
|
|
isValidated: false
|
|
},
|
|
states: {
|
|
notValidated: {
|
|
on: {
|
|
VALIDATE: {
|
|
target: 'isValidated',
|
|
actions: 'setValidated'
|
|
}
|
|
}
|
|
},
|
|
isValidated: {
|
|
on: {
|
|
INVALIDATE: {
|
|
target: 'notValidated',
|
|
actions: 'setNotValidated'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
services: {
|
|
setValidated: (context) => (context.isValidated = true),
|
|
setNotValidated: (context) => (context.isValidated = false)
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
</script>
|
|
|
|
<Composer {composer} />
|