Creating a collapsible group element #112

marcelooblan2016 · 2025-02-25T22:33:04Z

marcelooblan2016
Feb 25, 2025

Hi, I tried creating a custom collapsible group element & I cannot seem to make it work properly. May i ask which part did i miss? Registered them in builder.config.js & vueform.config.js, However it doesn't act like group element where elements can be placed within that group element. It just act as a field like inputs.
On Builder:

On Preview:

./CollapseElement.vue

<template>
  
    <ElementLayout :multiple="true">
      <template #element>

        <div :class="classes.wrapper" role="group" :aria-labelledby="labelId">
          <el-collapse v-model="activeName">
            <el-collapse-item name="1">
              <template #title>
                <div style="padding: 5px;">#### Title ###</div>
              </template>
              <slot>
                <div class="p-3 bg-red-50 border-2 border-solid border-red-500">
   
8000
               ### CONTENT HERE ###
                  <div :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>
                </div>
              </slot>
            </el-collapse-item>
          </el-collapse>
        </div>

      </template>

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


</template>

<script>
import { ref, markRaw } from 'vue'
import { ObjectElement, GroupElement } from '@vueform/vueform'

export default {
  ...ObjectElement,
  // ...GroupElement,
  name: 'CollapseElement',
  props: {
    // Copy props from ObjectElement
    ...ObjectElement.props,
    // ...GroupElement.props,
    title: {
      type: String,
      default: null,
    },
    // Define child elements for our ObjectElement
    schema: {
      required: false,
      type: Object,
      default: () => ({
        container: {
          name: 'container',
          type: 'group',
          builder: {
            type: 'container',
            label: 'Container'
          }
        },
      })
    }
  },
  setup(props, context) {

    const CollapseElement = ObjectElement.setup(props, context)
    // const CollapseElement = GroupElement.setup(props, context)

    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,
      ]),
    })

    return {
      ...CollapseElement,
      defaultClasses,
    }
  },
  data () {
    return {
      activeName: '1',
    }
  }
}
</script>

./CollapseField.js

import { BaseElementField } from '@vueform/builder'

export default class CollapseField extends BaseElementField
{
  name = 'CollapseField'

  get schema () {
    return {
      key: {
        type: 'textarea',
        label: 'Key',
        columns: { label: 4 },
        floating: false,
        placeholder: '#####',
        presets: ['prop-multiline'],
        rows: 1,
        onMounted(el$) {
          setTimeout(() => {
            el$.autosize()
          }, 0)
        }
      }
    }
  }
}

Here is my config on vueform.config.js

...
import CollapseElement from '@/Components/CustomElements/Collapse/CollapseElement.vue'
...
    elements: [
        CollapseElement
    ],
...

Here is my config on builder.config.js

...
import CollapseField from '@/Components/CustomElements/Collapse/CollapseField.js'
...

    collapse: {
      label: 'Collapse Container',
      description: 'Collapsible Container',
      icon: [
        "fas",
        "plus"
      ],
      category: 'custom',
      rules: [],
      disabled: false,
      schema: {
        type: 'collapse',
        builder: {
         resize: true,
        },
      },

      sections: {
          properties: {
            name: 'properties',
            label: 'Properties',
            fields: {
              type: { type: TypeField },
              name: { type: NameField },
              label: { type: LabelField },
              tooltip: { type: InfoField },
              description: { type: DescriptionField },
            },
          },
          options: {
            name: 'options',
            label: 'Options',
            fields: {
              key: { type: CollapseField },
            },

          },
          layout: {
            name: 'layout',
            label: 'Layout',
            fields: {
              size: { type: SizeField },
              columns: { type: ColumnsField },
            },
          },
          conditions: {
            name: 'conditions',
            label: 'Conditions',
            fields: {
              conditions: { type: ConditionsField },
            },
          },
      },
      separators: {
        properties: [
          ['type', 'name'],
          ['label', 'tooltip'],
          ['description'],
        ],
        layout: [
          ['size'],
          ['columns'],
        ],
      },
    },
....

Any help would much be appreciated.
Thank you in advance.
Marcelo

adamberecz · 2025-02-27T13:12:13Z

adamberecz
Feb 27, 2025
Maintainer

I've just created an PoC for a similar case in another discussion, you might want to check it out:
#109 (reply in thread)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Creating a collapsible group element #112

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Creating a collapsible group element #112

Uh oh!

Uh oh!

marcelooblan2016 Feb 25, 2025

Replies: 1 comment

Uh oh!

adamberecz Feb 27, 2025 Maintainer

marcelooblan2016
Feb 25, 2025

adamberecz
Feb 27, 2025
Maintainer