Custom element slot for sub elements

[matthiasPOE]

<script lang="ts">
import { defineElement, ElementLayout, ButtonElement } from '@vueform/vueform';

export default defineElement({
    name: 'TestElement',
    setup() {
        return {
            clicked: () => {
                window.dispatchEvent(new CustomEvent('clicked', {}))
            }
        }
    }
})


</script>

<template>
    <ElementLayout>
        <template #element>

            <div style="display: flex; justify-content: space-around;">

                <ButtonElement name="button1">
                    Test
                </ButtonElement>

                <ButtonElement name="button2" secondary @click="() => clicked()">
                    TEst 2
                </ButtonElement>
            </div>


            <div v-if="someCondition">
                <!-- Show dragged elements from builder -->
            </div>


        </template>

                <template v-for="(component, slot) in elementSlots" #[slot]>
                    <slot :name="slot" :el$="el$">
                        <component :is="component" :el$="el$" />
                    </slot>
                </template>

    </ElementLayout>
</template>

Is it possible to allow more builder components to be droppable inside the someCondition div in the builder? So i can drag this component in and then drag further components into it similar to the container component

[adamberecz]

Currently the best way to achieve this is by using alternative views. I've explained and created a PoC not so long ago in another discussion, check that out: #109 (reply in thread)

If you need any help after that let me know!

[matthiasPOE]

Thank you @adamberecz thats gotten me very close. I've searched discord & here and couldnt come up with anything. I have a last issue where i have something like:

  <component :is="elementLayout" ref="container" :multiple="true" view="object">
    <template #element>
      <div
        v-show="showFields || !PREVIEW_MODE"

Do you have any idea how I can get access to some kind of a PREVIEW_MODE variable so I can always show all child elements when a user is editing the form but when previewing it should use the current showFields (which I already have)? Thanks again

[adamberecz]

It's form$.editorMode which is actually the opposite of PREVIEW_MODE

[matthiasPOE]

Thank you!

[matthiasPOE]

aaand one last thing 😆 ive been trying to use an example you made here:

https://stackblitz.com/edit/github-8atkk94h-yfxqm71w

Is there any way to force add values into the posted data?

form$.value.update({
    hello_world: 'hello_world',
    my_new_value: true,
    object: {
      sub1: 'sub1',
      sub2: 'sub2',
    },
  });

Im trying to force my_new_value to come through on the POST request but it doesnt seem to come through unless the field is actually defined in the form (which I dont want as its data that should be appended manually)

[matthiasPOE]

Solved: For anyone else coming across this. I fixed it by adding a hidden element with the my_new_value name so it can then be updated like above!