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

148 lines
3.6 KiB
TypeScript
Raw Normal View History

2020-05-20 14:21:08 +00:00
import {
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
useActivation,
2020-05-27 15:06:14 +00:00
Block,
2020-05-27 13:57:57 +00:00
blockProps,
2020-05-20 14:21:08 +00:00
} from '@components/TreeElement';
2020-05-25 18:07:34 +00:00
import SbBlock from '@internal/Block';
2020-05-27 13:57:57 +00:00
import SbButton from '@internal/Button';
2020-05-25 18:07:34 +00:00
import SbToolbar from '@internal/Toolbar';
import SbBlockPlaceholder from '@internal/BlockPlaceholder';
2020-05-24 20:00:14 +00:00
import {
LayoutData,
LayoutProps,
getDefaultData,
} from './util';
2020-05-20 14:21:08 +00:00
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-27 15:06:14 +00:00
eventUpdate: { type: Function, default: () => {} },
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-27 15:06:14 +00:00
setup(props: LayoutProps) {
2020-05-25 21:10:21 +00:00
const { 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,
[`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-27 13:57:57 +00:00
props.eventUpdate({
2020-05-20 14:21:08 +00:00
orientation: localData.orientation === 'vertical' ? 'horizontal' : 'vertical',
});
};
2020-05-27 15:06:14 +00:00
const onChildUpdate = (child: Block, updated: Block) => {
2020-05-20 14:21:08 +00:00
const index = localData.children.indexOf(child);
2020-05-27 18:36:46 +00:00
if (index === -1) {
return;
}
2020-05-27 13:57:57 +00:00
props.eventUpdate({
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-27 15:06:14 +00:00
const appendBlock = (block: Block) => {
2020-05-27 18:36:46 +00:00
localData.children = [
...localData.children,
block,
];
props.eventUpdate({ children: [...localData.children] });
2020-05-24 20:39:14 +00:00
activate(block.blockId);
2020-05-20 14:21:08 +00:00
};
2020-05-27 15:06:14 +00:00
const insertBlock = (index: number, block: Block) => {
2020-05-27 18:36:46 +00:00
localData.children = [
...localData.children.slice(0, index + 1),
block,
...localData.children.slice(index + 1),
];
props.eventUpdate({ children: [...localData.children] });
2020-05-24 20:39:14 +00:00
activate(block.blockId);
2020-05-24 15:33:25 +00:00
};
2020-05-27 18:36:46 +00:00
const removeBlock = (index: number) => {
localData.children = [
...localData.children.slice(0, index),
...localData.children.slice(index + 1),
];
props.eventUpdate({ children: [...localData.children] });
const newActiveIndex = Math.max(index - 1, 0);
activate(localData.children[newActiveIndex].blockId);
};
2020-05-25 21:10:21 +00:00
return () => (
<div class={classes.value}>
2020-05-20 14:21:08 +00:00
<SbToolbar slot="toolbar">
2020-05-27 13:57:57 +00:00
<SbButton
2020-05-20 14:21:08 +00:00
type="button"
{...{
2020-05-27 13:57:57 +00:00
nativeOn: {
2020-05-25 21:10:21 +00:00
click: toggleOrientation,
2020-05-20 14:21:08 +00:00
},
}}
2020-05-27 13:57:57 +00:00
>{localData.orientation}</SbButton>
2020-05-20 14:21:08 +00:00
</SbToolbar>
2020-05-25 21:10:21 +00:00
{...localData.children.map((child, index) => (
2020-05-24 15:33:25 +00:00
<SbBlock
2020-05-25 21:10:21 +00:00
key={child.blockId}
2020-05-24 15:33:25 +00:00
block={child}
2020-05-27 15:06:14 +00:00
eventUpdate={(updated: Block) => onChildUpdate(child, updated)}
eventInsertBlock={(block: Block) => insertBlock(index, block)}
eventAppendBlock={appendBlock}
2020-05-27 18:36:46 +00:00
eventRemoveBlock={() => removeBlock(index)}
2020-05-24 15:33:25 +00:00
/>
))}
2020-05-20 14:21:08 +00:00
<SbBlockPlaceholder
{...{
on: {
2020-05-25 21:10:21 +00:00
'insert-block': 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
);
},
});