Issue with Creating Custom Separator Field Based on GroupElement

[fisher06]

Hi VueFormBuilder Team,

I am working on extending the groupElement to create a new field called separator for form sections. However, I am facing a couple of issues:

When I define the new field with type: "separator", I am unable to drag and drop default fields into it.
If I use the type: "group" instead, the drag-and-drop functionality works, but the builder JSON always shows the type as group, not separator.

Here is my current configuration:

javascript

separator: {
  label: "Separator",
  type: "separator",
  description: "A separator for form sections",
  icon: "https://fr.eudonet.com/wp-content/uploads/2024/04/logo-eudonet-blanc-rouge.svg",
  category: "structure",
  schema: {
    type: "group",
  },
  component: SeparatorElement,
  sections: {
    ...elementTypes.container.sections,
    main: {
      label: "General",
      properties: {
        label: {
          type: "text",
          label: "Label",
          default: "New Separator",
        },
      },
    },
  },
  separators: elementTypes.container.separators,
}

I’m trying to extend the groupElement and use the type separator. Could you please help me understand how to achieve this? Specifically, I want to use a custom separator function with the type separator, but also ensure that the builder JSON reflects this change (and allows the fields to be draggable).

Thank you for your support!

[adamberecz]

FIrst, you have to register your SeparatorElement as custom Vueform element in vueform.config.js like this:
https://vueform.com/docs/creating-elements#registering-elements

Then you can use the separator type in the builder element's schema property:

separator: {
  label: "Separator",
  type: "separator",
  description: "A separator for form sections",
  icon: "https://fr.eudonet.com/wp-content/uploads/2024/04/logo-eudonet-blanc-rouge.svg",
  category: "structure",
  schema: {
    type: "separator",
  },
  sections: {
    ...elementTypes.container.sections,
    main: {
      label: "General",
      /*
      // This isn't the right way of creating custom config fields 
      properties: {
        label: {
          type: "text",
          label: "Label",
          default: "New Separator",
        },
      },
      */
    },
  },
  separators: elementTypes.container.separators,
}

Defining custom config options for this element (on the right side panel when the element is clicked) can be done according to this docs: https://builder.vueform.com/docs/custom-config-panels

I'm not sure about how groups relate to this, but if you are happy to provide more info on this new element type or maybe a sketch of how it looks like I'm happy to guide you further.

[fisher06]

Thank you for your response. I wanted to clarify my issue further.

I am trying to create a custom "separator" field that behaves like a "group" (container) field in VueFormBuilder but with a custom template (SeparatorElement.vue). My goal is to allow users to drag and drop fields into the separator field, just like a regular group/container field, while ensuring that VueForm correctly recognizes it as a custom component when using the generated JSON.

Here’s the issue I’m facing:

• When I define separator as type: "group", everything works as expected in VueFormBuilder (drag-and-drop functionality works fine). However, in the generated JSON, the field type is "group", and when I use this JSON in a VueForm instance, it does not recognize my custom template SeparatorElement.vue.

• When I instead define separator as type: "separator" (a custom type), VueForm does recognize my custom template. However, in VueFormBuilder, I can no longer drag and drop other fields into the separator field.

Here’s an example of my configuration:
Works in VueFormBuilder but does not recognize custom template in VueForm instance

separator: {
  label: "Separator",
  type: "separator",
  description: "A separator for form sections",
  icon: "https://fr.eudonet.com/wp-content/uploads/2024/04/logo-eudonet-blanc-rouge.svg",
  category: "structure",
  schema: {
    type: "group",
  },
  // component: SeparatorElement,
  sections: {
    ...elementTypes.container.sections,
  },
  separators: elementTypes.container.separators,
},

Problem: Fields can be dragged into the separator in VueFormBuilder, but VueForm does not recognize my SeparatorElement.vue template.
2. VueForm recognizes custom template, but VueFormBuilder drag-and-drop stops working

separator: {
  label: "Separator",
  type: "separator",
  description: "A separator for form sections",
  icon: "https://fr.eudonet.com/wp-content/uploads/2024/04/logo-eudonet-blanc-rouge.svg",
  category: "structure",
  schema: {
    type: "separator",
  },
  // component: SeparatorElement,
  sections: {
    ...elementTypes.container.sections,
  },
  separators: elementTypes.container.separators,
},

Problem: VueForm correctly applies the custom template, but VueFormBuilder does not allow dragging fields into the separator.

Could you please help me understand the correct way to:

Allow VueFormBuilder to support drag-and-drop of fields into my custom "separator" field
Ensure that VueForm properly recognizes my SeparatorElement.vue component when using the generated JSON

Here is my code:
builder.config.ts

// builder.config.ts
import {
  defineConfig,
  elementTypes,
  sections,
  separators,
  BaseFormField,
} from "@vueform/builder";
//import SeparatorElement from "@/components/SeparatorElement.vue";
import DescIdField from "@/components/DescIdField.js";

import "@vueform/builder/index.css";

console.log(elementTypes);

// Creating the Unique ID field
const FormTabIdField = class extends BaseFormField {
  name = "BaseFormField";

  get schema() {
    return {
      tabId: {
        type: "text",
        inputType: "number",
        label: "Tab Id",
        columns: { label: 5 },
      },
    };
  }
};

// Adding the Unique ID field
sections.form.properties.fields = {
  uniqueId: {
    type: FormTabIdField,
  },
  ...sections.form.properties.fields,
};

export default defineConfig({
  // override the name of the field
  transformElement: (elementSchema: any, _builder: any) => {
    return {
      ...elementSchema,
      name: `${elementSchema.name + "_" + Date.now()}`,
    };
  },
  element: {
    types: {
      ...elementTypes,
      text: {
        ...elementTypes.text,
        sections: {
          ...elementTypes.text.sections,
          properties: {
            ...elementTypes.text.sections.properties,
            fields: {
              ...elementTypes.text.sections.properties.fields,

              descId: { type: DescIdField },
            },
          },
        },
      },
      separator: {
        label: "Separator",
        type: "separator",
        description: "A separator for form sections",
        icon: "https://fr.eudonet.com/wp-content/uploads/2024/04/logo-eudonet-blanc-rouge.svg",
        category: "structure",
        schema: {
          type: "group",
        },
        //component: SeparatorElement,
        sections: {
          ...elementTypes.container.sections,
        },
        separators: elementTypes.container.separators,
      },
    },
  },
  form: {
    sections: sections.form,
    separators: separators.form,
  },
});

vueform.config.ts

// vueform.config.ts

import en from "@vueform/vueform/locales/en";
import theme from "@vueform/vueform/dist/tailwind";
import { defineConfig } from "@vueform/vueform";
import builder from "@vueform/builder/plugin";
//import CustomElement from "@/components/CustomElement.vue";
//import ColorPickerElement from "@/components/ColorPickerElement.vue";
import SeparatorElement from "@/components/SeparatorElement.vue";

export default defineConfig({
  theme,
  locales: { en },
  locale: "en",
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
  plugins: [builder],
  elements: [
    // CustomElement,
    // ColorPickerElement,
    SeparatorElement,
  ],
  templates: {
    SeparatorElement,
  },
});

SeparatorElement.vue

<template>
  <component
    :is="elementLayout"
    :multiple="true"
    ref="container"
    @click="toggleFields"
  >
    <div class="separator-header">
      {{ el$.label }}
    </div>
    <template #element>
      <div
        v-if="showFields"
        :class="classes.wrapper"
        role="group"
        :aria-labelledby="labelId"
      >
        <slot>
          <component
            :is="component(element)"
            v-for="(element, name) in children"
            v-bind="element"
            :embed="embed"
            :name="name"
            :key="name"
            @remove="(e) => $emit('remove', e)"
          />
        </slot>
      </div>
    </template>

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

<script>
import { ref, markRaw } from "vue";
import { ObjectElement } from "@vueform/vueform";

export default {
  // Copy all properties of ObjectElement (eg. emits, mixins, ...)
  ...ObjectElement,
  name: "SeparatorElement",
  props: {
    // Copy props from ObjectElement
    ...ObjectElement.props,

    // Define child elements for our ObjectElement
    schema: {
      required: false,
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    // Copy all props / methods from ObjectElement
    const SeparatorElement = ObjectElement.setup(props, context);

    // ObjectElement's classes from Vueform Theme's source
    // https://github.com/vueform/vueform/blob/main/themes/vueform/templates/elements/ObjectElement.vue#L10
    const defaultClasses = ref({
      container: "",
      wrapper: "vf-row",
      wrapper_sm: "vf-row-sm",
      wrapper_md: "",
      wrapper_lg: "vf-row-lg",
      wrapper_embed: "vf-row-embed",
      $wrapper: (classes, { Size, embed }) => [
        classes.wrapper,
        classes[`wrapper_${Size}`],
        embed ? classes.wrapper_embed : null,
      ],
    });

    const showFields = ref(true);

    const toggleFields = () => {
      showFields.value = !showFields.value;
    };

    return {
      ...SeparatorElement,
      defaultClasses,
      showFields,
      toggleFields,
    };
  },
};
</script>

[adamberecz]

Thanks for the explanation, now I understand what you are looking to achieve.

Question: how essential is it for you to have the type as separator? I'm asking because creating new container types (like group and object) is currently not supported in the builder. So if that's a must it's something that needs to be implemented from the builder side first — I dropped it into the idea pool because it might be useful for others as well.

Currently what you can do is to create an alternative view for the group or object element type (group doesn't nest data, object does) and define your separator element's schema like this:

schema: {
  type: 'group',
  view: 'separator'
}

The next thing you need to know is that the default GroupElement and ObjectElement template is overridden in the builder because they need to have a couple of things added to them to make the drag and dropping functionality work.

I paste GroupElement and ObjectElement's template here that allows for drag and dropping for future reference:

<template>
  <component :is="elementLayout" :multiple="true" ref="container" view="object">
    <template #element>
      <div
        role="group"
        :aria-labelledby="labelId"
        :class="[
          classes.wrapper,
          form$.builder ? classes.wrapperBuilder : null,
        ]"
      >
        <slot>
          <template v-for="(element, name) in children">
            <component
              :is="component(element)"
              v-if="!form$.builder"
              v-bind="element"
              :name="name"
              :key="name"
            />
            <component
              v-else
              :is="component(element)"
              v-bind="element"
              :name="name"
              :key="name"
              :droppable="Droppable"
              :dragging-element="draggingElement"
              :dragging-page="draggingPage"
              :dragged-schema="draggedSchema"
              :moving="moving"
              :pointer="pointer"
              @add-element="handleAddElement"
              @move-element="handleMoveElement"
              @select-element="handleSelectElement"
              @clone-element="handleCloneElement"
              @remove-element="handleRemoveElement"
              @resize-element="handleResizeElement"
              @set-dragged-schema="handleSetDraggedSchema"
              @announce="handleAnnounce"
              @start-moving="handleStartMoving"
              @resize-column="handleResizeColumn"
              @update-cell="handleUpdateCell"
              @mouseover.stop
            />
          </template>
        </slot>
      </div>
    </template>

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

<script>
import { classes } from '@vueform/vueform/dist/tailwind';

export default {
  name: 'GroupElement', // or ObjectElement
  data() {
    return {
      merge: false,
      defaultClasses: {
        ...classes.GroupElement,
        wrapperBuilder: 'vfb-preview-nested-element-wrapper',
      },
    };
  },
};
</script>

Everything you see here that is not in the default GroupElement or ObjectElement template in Vueform needs to be added in any alternative view you create for them to make drag and dropping work in the builder.

And here are the steps you need to take in order to achieve what you are looking:

• create and register an alternative view called GroupElement_separator based on the example above
• add custom properties and methods to GroupElement if the view is separator by using a plugin
• add the separator builder element type using { type: 'group', view: 'separator' }

There are a few other tweak required to achieve collapsible elements by clicking on the element label, so I've created a PoC for you here with comments:
https://stackblitz.com/edit/github-4rer47yt-2udcywno?file=src%2Fcomponents%2FGroupElement_separator.vue,vueform.config.js,builder.config.js

[fisher06]

Thank you so much! Your explanation is much clearer for me, and I’ll try to do it as you said.