feat: Proxy Field Blocks

[dulnan]

Implements #34

New proxyMode prop on <BlokkliField>

When this prop is set the field component won't render any block components, but instead a "proxy list" that renders an abstract view of the nested structure of the field. This is useful for things like sliders or other interactive blocks where drag and drop interactions are impossible because not all nested blocks are visible to the user in the editor.

The proxy list is rendered in-place of where blocks would normally be rendered. Since its style is position: absolute there must be a position: relative container where the proxy list is anchored.

Multiple levels of nesting are also supported. Once proxy mode is enabled on a field all nested fields are also automatically rendered in proxy mode.

By enabling proxy mode the rendering of the nested blocks is left to the component itself. It may iterate over the provided items and render <BlokkliItem> for each item or it may skip <BlokkliItem> to directly render the contents for maximum flexibility.

<template>
  <div class="relative">
    <BlokkliField v-slot="{ items }" name="slides" :list="slides" proxy-mode>
      <Carousel :items="items" />
    </BlokkliField>
  </div>
</template>

<script lang="ts" setup>
import type { FieldListItemTypedArray } from '#blokkli/generated-types'
import { defineBlokkli } from '#imports'

defineBlokkli({
  bundle: 'slider',
})

defineProps<{
  slides: FieldListItemTypedArray
}>()
</script>

[netlify]

✅ Deploy Preview for blokkli ready!

Name	Link
🔨 Latest commit	72dc235
🔍 Latest deploy log	https://app.netlify.com/sites/blokkli/deploys/672e2641c9def200081c1dec
😎 Deploy Preview	https://deploy-preview-38--blokkli.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for blokkli-docs ready!

Name	Link
🔨 Latest commit	72dc235
🔍 Latest deploy log	https://app.netlify.com/sites/blokkli-docs/deploys/672e2641f5a9980008faa2ea
😎 Deploy Preview	https://deploy-preview-38--blokkli-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.