{"version":3,"file":"edit.7d01304e.js","sources":["../../../layout/lib/edit.tsx"],"sourcesContent":["import {\n  defineComponent,\n  reactive,\n  computed,\n  watch,\n  PropType,\n} from 'vue';\nimport {\n  model,\n  IBlockData,\n  OnUpdateSelfCb,\n  useActivation,\n\n  SbBlock,\n  SbButton,\n  SbToolbar,\n  SbBlockPlaceholder,\n  SbBlockOrdering,\n} from '@schlechtenburg/core';\n\nimport {\n  ILayoutData,\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: {\n      type: (null as unknown) as PropType<OnUpdateSelfCb<ILayoutData>>,\n      default: () => {},\n    },\n    data: {\n      type: (null as unknown) as PropType<ILayoutData>,\n      default: getDefaultData,\n    },\n  },\n\n  setup(props) {\n    const { activate } = useActivation();\n\n    const localData: ILayoutData = 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: IBlockData<any>, updated: IBlockData<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: IBlockData<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: IBlockData<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: 'button',\n              onClick: toggleOrientation,\n            }}\n          >{localData.orientation}</SbButton>\n        </SbToolbar>\n\n        {...localData.children.map((child, index) => (\n          <SbBlock\n            {...{ key: child.id }}\n            data-order={index}\n            block={child}\n            onUpdate={(updated: IBlockData<any>) => onChildUpdate(child, updated)}\n            onRemoveSelf={() => removeBlock(index)}\n            onPrependBlock={(block: IBlockData<any>) => insertBlock(index - 1, block)}\n            onAppendBlock={(block: IBlockData<any>) => insertBlock(index, block)}\n            onActivatePrevious={() => activateBlock(index - 1,)}\n            onActivateNext={() => activateBlock(index + 1,)}\n          >\n            {{\n              'context-toolbar': () =>\n                <SbBlockOrdering\n                  onMoveBackward={() => moveBackward(index)}\n                  onMoveForward={() => moveForward(index)}\n                  onRemove={() => removeBlock(index)}\n                  orientation={localData.orientation}\n                />,\n            }}\n          </SbBlock>\n        ))}\n\n        <SbBlockPlaceholder onInsertBlock={appendBlock} />\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","model","props","onUpdate","type","default","data","getDefaultData","setup","activate","useActivation","localData","reactive","orientation","children","classes","computed","toggleOrientation","appendBlock","block","id","insertBlock","index","slice","removeBlock","newActiveIndex","Math","max","activateBlock","safeIndex","min","length","value","onClick","map","child","key","updated","indexOf","__assign","onChildUpdate","curr","prev","moveBackward","next","moveForward"],"mappings":"4eA2BA,MAAeA,EAAgB,CAC7BC,KAAM,iBAENC,MAAAA,EAEAC,MAAO,CACLC,SAAU,CACRC,KAAO,KACPC,QAAS,QAEXC,KAAM,CACJF,KAAO,KACPC,QAASE,IAIbC,MAAMN,SACEO,SAAEA,GAAaC,IAEfC,EAAyBC,EAAS,CACtCC,YAAaX,EAAMI,KAAKO,YACxBC,SAAU,IAAIZ,EAAMI,KAAKQ,eAGrB,IAAMZ,EAAMI,OAAM,OACZO,YAAcX,EAAMI,KAAKO,cACzBC,SAAW,IAAIZ,EAAMI,KAAKQ,mBAGhCC,EAAUC,GAAS,KAAO,cACjB,GACX,aAAYL,EAAUE,gBAAgB,MAGpCI,EAAoB,OAClBd,SAAS,CACbU,YAAuC,aAA1BF,EAAUE,YAA6B,aAAe,cAqBjEK,QACMJ,SAAW,IAChBH,EAAUG,SACbK,KAEIhB,SAAS,CAAEW,SAAU,IAAIH,EAAUG,cAChCK,EAAMC,KAGXC,EAAc,CAACC,EAAeH,OACxBL,SAAW,IAChBH,EAAUG,SAASS,MAAM,EAAGD,EAAQ,GACvCH,KACGR,EAAUG,SAASS,MAAMD,EAAQ,MAEhCnB,SAAS,CAAEW,SAAU,IAAIH,EAAUG,cAChCK,EAAMC,KAGXI,QACMV,SAAW,IAChBH,EAAUG,SAASS,MAAM,EAAGD,MAC5BX,EAAUG,SAASS,MAAMD,EAAQ,MAEhCnB,SAAS,CAAEW,SAAU,IAAIH,EAAUG,kBAEnCW,EAAiBC,KAAKC,IAAIL,EAAQ,EAAG,KAClCX,EAAUG,SAASW,GAAgBL,KAGxCQ,YACEC,EACJH,KAAKC,IACFD,KAAKI,IACHnB,EAAUG,SAASiB,OAAS,EAC5BT,GAEH,KAEKX,EAAUG,SAASe,GAAWT,WAqClC,mBACOL,EAAQiB,oCAIZ5B,KAAM,SACN6B,QAAShB,iBAEXN,EAAUE,qBAGVF,EAAUG,SAASoB,KAAI,CAACC,EAAOb,WAEzBc,IAAKD,EAAMf,kBACLE,QACLa,cA5GO,EAACA,EAAwBE,WACvCf,EAAQX,EAAUG,SAASwB,QAAQH,QACrCb,KAGEnB,SAAS,CACbW,SAAU,IACLH,EAAUG,SAASS,MAAM,EAAGD,GAC/BiB,OACKJ,GACAE,MAEF1B,EAAUG,SAASS,MAAMD,EAAQ,OAiGMkB,CAAcL,EAAOE,gBAC/C,IAAMb,EAAYF,qBACYD,EAAYC,EAAQ,EAAGH,oBACxBE,EAAYC,EAAOH,sBAC1C,IAAMS,EAAcN,EAAQ,kBAChC,IAAMM,EAAcN,EAAQ,wBAGvB,wBAEC,IA5DRA,QACN,IAAVA,eAIEmB,EAAO9B,EAAUG,SAASQ,GAC1BoB,EAAO/B,EAAUG,SAASQ,EAAQ,KAC9BR,SAAW,IAChBH,EAAUG,SAASS,MAAM,EAAGD,EAAQ,GACvCmB,EACAC,KACG/B,EAAUG,SAASS,MAAMD,EAAQ,MAGhCnB,SAAS,CAAEW,SAAU,IAAIH,EAAUG,aA8CP6B,CAAarB,iBACpB,IA5CRA,QACfA,IAAUX,EAAUG,SAASiB,OAAS,eAIpCU,EAAO9B,EAAUG,SAASQ,GAC1BsB,EAAOjC,EAAUG,SAASQ,EAAQ,KAC9BR,SAAW,IAChBH,EAAUG,SAASS,MAAM,EAAGD,GAC/BsB,EACAH,KACG9B,EAAUG,SAASS,MAAMD,EAAQ,MAGhCnB,SAAS,CAAEW,SAAU,IAAIH,EAAUG,aA8BR+B,CAAYvB,YACvB,IAAME,EAAYF,eACfX,EAAUE,0CAMEK"}