1 line
7.6 KiB
Plaintext
1 line
7.6 KiB
Plaintext
|
{"version":3,"file":"edit.85b1500c.js","sources":["../../packages/layout/lib/edit.tsx"],"sourcesContent":["import {\n defineComponent,\n reactive,\n computed,\n watch,\n PropType,\n} from 'vue';\nimport {\n model,\n BlockData,\n useActivation,\n\n SbBlock,\n SbButton,\n SbToolbar,\n SbBlockPlaceholder,\n SbBlockOrdering,\n} from '@schlechtenburg/core';\n\nimport {\n LayoutData,\n getDefaultData,\n} from './util';\n\nimport './style.scss';\n\nexport default defineComponent({\n name: 'sb-layout-edit',\n\n model,\n\n props: {\n onUpdate: { type: Function, default: () => {} },\n data: {\n type: (null as unknown) as PropType<LayoutData>,\n default: getDefaultData,\n },\n },\n\n setup(props) {\n const { activate } = useActivation();\n\n const localData: LayoutData = reactive({\n orientation: props.data.orientation,\n children: [...props.data.children],\n });\n\n watch(() => props.data, () => {\n localData.orientation = props.data.orientation;\n localData.children = [...props.data.children];\n });\n\n const classes = computed(() => ({\n 'sb-layout': true,\n [`sb-layout_${localData.orientation}`]: true,\n }));\n\n const toggleOrientation = () => {\n props.onUpdate({\n orientation: localData.orientation === 'vertical' ? 'horizontal' : 'vertical',\n });\n };\n\n const onChildUpdate = (child: BlockData<any>, updated: BlockData<any>) => {\n const index = localData.children.indexOf(child);\n if (index === -1) {\n return;\n }\n props.onUpdate({\n children: [\n ...localData.children.slice(0, index),\n {\n ...child,\n ...updated,\n },\n ...localData.children.slice(index + 1),\n ],\n });\n };\n\n const appendBlock = (block: BlockData<any>) => {\n localData.children = [\n ...localData.children,\n block,\n ];\n props.onUpdate({ children: [...localData.children] });\n activate(block.id);\n };\n\n const insertBlock = (index: number, block: BlockData<any>) => {\n localData.children = [\n ...localData.children.slice(0, index + 1),\n block,\n ...localData.children.slice(index + 1),\n ];\n props.onUpdate({ children: [...localData.children] });\n activate(block.id);\n };\n\n const removeBlock = (index: number) => {\n localData.children = [\n ...localData.children.slice(0, index),\n ...localData.children.slice(index + 1),\n ];\n props.onUpdate({ children: [...localData.children] });\n\n const newActiveIndex = Math.max(index - 1, 0);\n activate(localData.children[newActiveIndex].id);\n };\n\n const activateBlock = (index: number) => {\n const safeIndex =\n Math.max(\n Math.min(\n localData.children.length - 1,\n index,\n ),\n 0,\n );\n activate(localData.children[safeIndex].id);\n };\n\n const moveBackward = (index: number) => {\n if (index === 0) {\n return;\n }\n\n const curr = localData.children[index];\n const prev = localData.children[index - 1];\n localData.children = [\n ...localData.children.slice(0, index - 1),\n curr,\n prev,\n ...localData.children.slice(index + 1),\n ];\n\n props.onUpdate({ children: [...localData.children] });\n };\n\n const moveForward = (index: number) => {\n if (index === localData.children.length - 1) {\n return;\n }\n\n const curr = localData.children[index];\n const next = localData.children[index + 1];\n localData.children = [\n ...localData.children.slice(0, index),\n next,\n curr,\n ...localData.children.slice(index + 2),\n ];\n\n props.onUpdate({ children: [...localData.children] });\n };\n\n return () => (\n <div class={classes.value}>\n <SbToolbar>\n <SbButton\n {...{\n type: 'but
|