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

Bootstrap 4 Theme for @aujsf/core

<template>

  <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()"
                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>

    <template repeat.for="definition of definitions">
      <fieldset class="d-flex flex-column w-100">

        <div class="mt-1 d-flex">
          <legend if.bind="uiSchema['ui:item-title']">
            ${uiSchema | aujsf_itemTitle:definition:{value:value[$index]}}
          </legend>
          <div class="ml-auto btn-group btn-group-sm text-monospace font-weight-bolder">
            <button type="button" class="btn btn-outline-info" click.delegate="moveUp($index)" title="Move item up"
                    if.bind="!readonly && !uiSchema['ui:no-reorder'] && !definition.uiSchema['ui:no-reorder'] && !$first">
              &uarr;
            </button>

            <button type="button" class="btn btn-outline-info" click.delegate="moveDown($index)" title="Move item down"
                    if.bind="!readonly && !uiSchema['ui:no-reorder'] && !definition.uiSchema['ui:no-reorder'] && !$last">
              &darr;
            </button>

            <button type="button" class="btn btn-outline-danger" click.delegate="delete($index)" title="Delete item"
                    if.bind="!readonly && !uiSchema['ui:no-remove'] && !definition.uiSchema['ui:no-remove']">
              &times;
            </button>
          </div>
        </div>

        <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>

      </fieldset>
    </template>
  </fieldset>
</template>