Can we add custom option in the right panel in editor.html

[ghost]

I wanted to add a section with the content, style and advanced tab. I was able to add that section. But unfortunately when I add input and section tags inside the section content, it disappears.

after clicking a element from frame it gets disappeared.

After that i went to components-common.js file. added this portion of code.
Vvveb.Components.extend("_base", "_base", {
properties: [
{
name: "banner",
key: "banner_header",
inputtype: SectionInput,
sort: base_sort++,
section: banner_section,
data: { header: "Banner", expanded: false },
onchange: function () {
console.log("mula");
},
},

{
  name: "Text",
  key: "banner-name",
  sort: base_sort++,
  section: banner_section,
  col: 6,
  inline: false,
  inputtype: TextInput,
  onChange: function (node) {
    console.log("mula");
    console.log(node);
  },
},

],
});

it somehow is working. But I have no clear documentation to add components in this way.

So, I am facing huge problems. Can you help me please. I want to add some Image inputs, some radio inputs.

Or if you share any documentation or article, it will be helpful. Thank you...

[givanz]

Hi

The issue you are having I think is caused by sort field from banner_header SectionInput added to _base component for banner tab.

Sort field is set for _base properties so that they will always be added after the component properties that extend _base this is why it uses sort: base_sort++ and base_sort starts with 100.

This is done so that component properties are always displayed first before properties from _base like id or class properties.

And because component properties sort is 0 (when not specified) and banner_header SectionInput is above 100 the SectionInput is added after other properties that should be inside the section.

---

Component properties are added inside a section input that precedes the properties.

If no section input is specified in the component properties then the properties are added to the default section that is added by default for each component https://github.com/givanz/VvvebJs/blob/master/libs/builder/builder.js#L333 in the content tab.

Component properties with section:"banner" when there is no SectionInput for banner tab because they are inside the default section in the content tab are not visible on banner tab, they are not visible on content tab either because they don't match the section.

---

To fix this you need to include a section input for banner tab in your component properties before other properties that you need to add inside banner tab.

Vvveb.Components.extend("_base", "html/mycomponent", {
    ...
	properties: [{
	key: "banner_options",
        inputtype: SectionInput,
        name:false,
        section:"banner",
        data: {header:"Banner heading"},
    },  {
        name: "Poster",
        key: "poster",
        htmlAttr: "poster",
        section:"banner",
        inputtype: ImageInput
    }, {
        name: "Url",
        key: "url",
        section:"banner",
        inputtype: TextInput
}]

It is better to include SectionInput properties for banner tab inside each component where you have inputs for banner tab instead of adding a global section inside _base component.

In this way you can set a proper header title and you can also add more SectionInput properties to better organize banner tab properties and also avoid using sort field.

---

For testing banner tab I added the following html to https://github.com/givanz/VvvebJs/blob/master/editor.html#L755-L793

<div id="right-panel">
	<div class="component-properties">
		
		<ul class="nav nav-tabs nav-fill" id="properties-tabs" role="tablist">
			  <li class="nav-item content-tab">
				<a class="nav-link active" data-bs-toggle="tab" href="#content-tab" role="tab" aria-controls="components" aria-selected="true">
					<i class="la la-lg la-sliders-h"></i> <div><span>Content</span></div></a>
			  </li>
			  <li class="nav-item style-tab">
				<a class="nav-link" data-bs-toggle="tab" href="#style-tab" role="tab" aria-controls="blocks" aria-selected="false">
					<i class="la la-lg la-paint-brush"></i> <div><span>Style</span></div></a>
			  </li>
			  <li class="nav-item advanced-tab">
				<a class="nav-link" data-bs-toggle="tab" href="#advanced-tab" role="tab" aria-controls="blocks" aria-selected="false">
					<i class="la la-lg la-tools"></i> <div><span>Advanced</span></div></a>
			  </li>
			  
			  <!-- banner tab -->
			  <li class="nav-item banner-tab">
				<a class="nav-link" data-bs-toggle="tab" href="#banner-tab" role="tab" aria-controls="blocks" aria-selected="false">
					<i class="la la-lg la-image"></i> <div><span>Banner</span></div></a>
			  </li>
			  <!-- /banner tab -->
			</ul>

			<div class="tab-content">
				 <div class="tab-pane show active" id="content-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
					<div class="alert alert-dismissible fade show alert-light m-3" role="alert" style="">		  
						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>		  
						<strong>No selected element!</strong><br> Click on an element to edit.		
					</div>
				</div>
				
				 <div class="tab-pane show" id="style-tab" data-section="style" role="tabpanel" aria-labelledby="style-tab">
				</div>
				
				 <div class="tab-pane show" id="advanced-tab" data-section="advanced"  role="tabpanel" aria-labelledby="advanced-tab">
				</div>
				
				<!-- banner tab -->
				<div class="tab-pane show" id="banner-tab" data-section="banner"  role="tabpanel" aria-labelledby="banner-tab">
				</div>
				<!-- /banner tab -->
			</div>
			
	</div>  
</div>  

I will update the documentation to make clear the role of SectionInput.