key: bs-tabs
name: $string.bstabs_name
category: bootstrap
icon: fa fa-folder
instructions: $string.bstabs_instructions
engine: ejs
template: |
  <div class="whb-tabmenu">
    <ul class="nav nav-tabs" role="tablist">
    <% for(var i=1; i<=tabs; i++) { %>
      <li class="nav-item" role="presentation">
        <a class="nav-link<%= i==1 ? ' active' : '' %>" id="<%=ID%>_<%=i%>-tab" href="#<%=ID%>_<%=i%>" data-toggle="tab" data-bs-toggle="tab" role="tab" aria-controls="<%=ID%>_<%=i%>" aria-selected="<%= i==1 ? 'true' : 'false' %>">
          <span>&nbsp;</span><span>Tab<%=i%></span>
        </a>
      </li> 
    <% } %>
    </ul>
    <div class="tab-content">
    <% for(var i=1; i<=tabs; i++) { %>
      <div class="tab-pane<%= effect ? ' ' + effect : '' %><%= i==1 ? ' show active' : '' %>" id="<%=ID%>_<%=i%>" role="tabpanel" aria-labelledby="<%=ID%>_<%=i%>-tab">
        <p><%=i%> __LOREM__</p>
      </div>
    <% } %>
    </div>
  </div> 
  <p><br></p>
selectors: div.whb-tabmenu
unwrap: "div.tab-content > div.tab-pane > *"
parameters: 
  - name: tabs
    value: 2
    title: $string.bstabs_tabs
    min: 1
    max: 6
    tip: $string.bstabs_tabs_tip
  - name: effect
    title: $string.bstabs_effect
    value: ''
    options:
      - {l: '$string.bstabs_optionsnone', v: ''}
      - {l: '$string.bstabs_optionsfade', v: 'fade'}
    bind:
      getValue: | 
        (el) => {
          var pane = el.querySelector('div.tab-pane');
          return pane && pane.classList.contains('fade') ? 'fade' : '';
        }
      setValue: |
        (el, v) => {
          el.querySelectorAll('div.tab-pane').forEach(pane => {;
            if (v) {
              pane.classList.add('fade');
            } else {
              pane.classList.remove('fade');
            }
          });
        }
  - __ID__
contextmenu:
  - predicate: li.nav-item
    actions: moveleft moveright insertafter | remove
author: Josep Mulet <pep.mulet@gmail.com>
version: 2.1.1