budibase/packages/client/src/components/BlockComponent.svelte

58 lines
1.5 KiB
Svelte
Raw Normal View History

<script>
import { getContext, onDestroy } from "svelte"
import { generate } from "shortid"
import { builderStore } from "../stores/builder.js"
import Component from "components/Component.svelte"
export let type
export let props
export let styles
export let context
export let name
export let order = 0
export let containsSlot = false
// ID is only exposed as a prop so that it can be bound to from parent
// block components
export let id
const component = getContext("component")
const block = getContext("block")
const rand = generate()
// Create a fake component instance so that we can use the core Component
// to render this part of the block, taking advantage of binding enrichment
$: id = `${block.id}-${context ?? rand}`
2023-07-19 18:11:15 +02:00
$: parentId = $component?.id
$: inBuilder = $builderStore.inBuilder
2021-11-02 13:58:38 +01:00
$: instance = {
_component: `@budibase/standard-components/${type}`,
_id: id,
_instanceName: name || type[0].toUpperCase() + type.slice(1),
_styles: {
...styles,
normal: styles?.normal || {},
},
_containsSlot: containsSlot,
2021-11-02 13:58:38 +01:00
...props,
}
// Register this block component if we're inside the builder so it can be
// ejected later
$: {
2023-07-19 18:11:15 +02:00
if (inBuilder) {
block.registerComponent(id, parentId, order ?? 0, instance)
}
}
onDestroy(() => {
2023-07-19 18:11:15 +02:00
if (inBuilder) {
block.unregisterComponent(id, parentId)
}
})
</script>
2021-11-12 16:19:25 +01:00
<Component {instance} isBlock>
<slot />
</Component>