@aujsf/bootstrap-theme/dist/aujsf-bs-array-tabs.html

Bootstrap 4 Theme for @aujsf/core

<template>
  <require from="@aujsf/bootstrap-theme/aujsf-bs-error-counter"></require>

  <let selected-tab.bind="0"></let>

  <fieldset>
    <div>
      <legend>

        <span if.bind="title">
          ${title}
        </span>

        <span class="form-text text-muted fieldset-description" if.bind="description">${description}</span>

        <button type="button" class="d-block btn btn-sm btn-outline-success text-monospace"
                if.bind="!readonly"
                click.delegate="add() || (selectedTab = value.length - 1)"
                title="Add new item"><strong class="mr-1">&plus;</strong>Add</button>

      </legend>
    </div>

    <span class="d-block invalid-feedback" if.bind="hasErrors" repeat.for="error of errorMessages">
      ${error}
    </span>

    <ul class="nav nav-tabs text-nowrap">
      <template repeat.for="definition of definitions">
        <li class="nav-item" click.delegate="selectedTab = $index"
            style="cursor: pointer;">
          <a class="nav-link ${selectedTab === $index ? 'active' : ''}">
            ${uiSchema | aujsf_itemTitle:definition:{value:value[$index]}}
            <aujsf-bs-error-counter definition.bind="definition" errors.bind="errors[$index]"></aujsf-bs-error-counter>
            <span class="close ml-1"
                  click.delegate="delete($index) || $event.stopPropagation() || selectedTab >= value.length && (selectedTab = selectedTab - 1)"
                  if.bind="!uiSchema['ui:no-remove'] && !definition.uiSchema['ui:no-remove']"
                  title="Delete item">
              &times;
            </span>
          </a>
        </li>
      </template>
    </ul>

    <div class="tab-content">
      <div class="tab-pane ${selectedTab === $index ? 'active' : ''}" repeat.for="definition of definitions">
        <aujsf-slot class="flex-grow-1"
                    schema.bind="definition.schema"
                    ui-schema.bind="definition.uiSchema"
                    pointer.bind="definition.pointer"
                    value.bind="value[$index] & signal:id"
                    parent-readonly.bind="readonly"
                    errors.bind="errors[$index]">
        </aujsf-slot>
      </div>
    </div>
  </fieldset>
</template>