schlechtenburg/src/components/user/Layout/edit.tsx

157 lines
3.5 KiB
TypeScript
Raw Normal View History

2020-05-20 14:21:08 +00:00
import {
2020-05-24 15:33:25 +00:00
inject,
2020-05-20 14:21:08 +00:00
reactive,
2020-05-24 15:33:25 +00:00
computed,
2020-05-20 14:21:08 +00:00
defineComponent,
2020-05-24 15:33:25 +00:00
watch,
2020-05-24 20:00:14 +00:00
PropType,
2020-05-20 14:21:08 +00:00
} from '@vue/composition-api';
import {
model,
2020-05-24 15:33:25 +00:00
blockProps,
useDynamicBlocks,
useActivation,
BlockData,
2020-05-24 20:00:14 +00:00
BlockDefinition,
2020-05-20 14:21:08 +00:00
} from '@components/TreeElement';
2020-05-24 20:00:14 +00:00
import {
LayoutData,
LayoutProps,
getDefaultData,
} from './util';
2020-05-20 14:21:08 +00:00
import SbBlock from '@internal/Block';
import SbToolbar from '@internal/Toolbar';
import SbBlockPlaceholder from '@internal/BlockPlaceholder';
2020-05-24 20:00:14 +00:00
import './style.scss';
2020-05-20 14:21:08 +00:00
export default defineComponent({
2020-05-24 20:00:14 +00:00
name: 'sb-layout-edit',
2020-05-20 14:21:08 +00:00
model,
props: {
2020-05-24 15:33:25 +00:00
...blockProps,
2020-05-24 20:00:14 +00:00
data: {
type: (null as unknown) as PropType<LayoutData>,
default: getDefaultData,
},
2020-05-20 14:21:08 +00:00
},
2020-05-24 20:00:14 +00:00
setup(props: LayoutProps, context) {
2020-05-24 15:33:25 +00:00
const { getBlock } = useDynamicBlocks();
const { isActive, activate } = useActivation(props.blockId);
2020-05-20 14:21:08 +00:00
2020-05-24 20:00:14 +00:00
const localData: LayoutData = reactive({
2020-05-24 15:33:25 +00:00
orientation: props.data.orientation,
children: [...props.data.children],
2020-05-20 14:21:08 +00:00
});
2020-05-24 15:33:25 +00:00
watch(() => props.data, () => {
localData.orientation = props.data.orientation;
localData.children = [...props.data.children];
2020-05-20 14:21:08 +00:00
});
2020-05-24 15:33:25 +00:00
const classes = computed(() => ({
2020-05-20 14:21:08 +00:00
'sb-layout': true,
2020-05-24 15:33:25 +00:00
'sb-layout_active': isActive,
2020-05-20 14:21:08 +00:00
[`sb-layout_${localData.orientation}`]: true,
2020-05-24 15:33:25 +00:00
}));
2020-05-20 14:21:08 +00:00
const toggleOrientation = () => {
2020-05-24 15:33:25 +00:00
context.emit('update', {
2020-05-20 14:21:08 +00:00
orientation: localData.orientation === 'vertical' ? 'horizontal' : 'vertical',
});
};
const onChildUpdate = (child, updated) => {
const index = localData.children.indexOf(child);
2020-05-24 15:33:25 +00:00
context.emit('update', {
2020-05-20 14:21:08 +00:00
children: [
...localData.children.slice(0, index),
2020-05-24 15:33:25 +00:00
{
...child,
...updated,
},
2020-05-20 14:21:08 +00:00
...localData.children.slice(index + 1),
],
});
};
2020-05-24 15:33:25 +00:00
const appendBlock = (block: BlockData) => {
console.log('append block', block);
context.emit('update', {
2020-05-20 14:21:08 +00:00
children: [
...localData.children,
block,
],
});
};
2020-05-24 15:33:25 +00:00
const insertBlock = (index: number, block: BlockData) => {
console.log('insert block', index, block);
context.emit('update', {
children: [
...localData.children.slice(0, index + 1),
block,
...localData.children.slice(index + 1),
],
});
};
2020-05-20 14:21:08 +00:00
return {
2020-05-24 15:33:25 +00:00
isActive,
activate,
2020-05-20 14:21:08 +00:00
classes,
onChildUpdate,
toggleOrientation,
localData,
2020-05-24 15:33:25 +00:00
getBlock,
appendBlock,
insertBlock,
2020-05-20 14:21:08 +00:00
};
},
render() {
2020-05-24 15:33:25 +00:00
console.log('render layout');
2020-05-20 14:21:08 +00:00
return (
2020-05-24 15:33:25 +00:00
<div class={this.classes}>
2020-05-20 14:21:08 +00:00
<SbToolbar slot="toolbar">
<button
type="button"
{...{
on: {
click: this.toggleOrientation,
},
}}
2020-05-24 15:33:25 +00:00
>{this.localData.orientation}</button>
2020-05-20 14:21:08 +00:00
</SbToolbar>
2020-05-24 15:33:25 +00:00
{...this.localData.children.map((child, index) => (
<SbBlock
2020-05-20 14:21:08 +00:00
key={child.id}
2020-05-24 15:33:25 +00:00
block={child}
2020-05-20 14:21:08 +00:00
{...{
on: {
2020-05-24 15:33:25 +00:00
update: (updated) => this.onChildUpdate(child, updated),
'insert-block': (block: BlockDefinition) => this.insertBlock(index, block),
'append-block': this.appendBlock,
2020-05-20 14:21:08 +00:00
},
}}
2020-05-24 15:33:25 +00:00
/>
))}
2020-05-20 14:21:08 +00:00
<SbBlockPlaceholder
{...{
on: {
2020-05-24 15:33:25 +00:00
'insert-block': this.appendBlock,
2020-05-20 14:21:08 +00:00
},
}}
/>
2020-05-24 15:33:25 +00:00
</div>
2020-05-20 14:21:08 +00:00
);
},
});