Widget editor: adds tabs

[falkodev]

https://linear.app/apostrophecms/issue/PRO-5134/widget-modals-that-support-schema-tabsgroups

Add a widget with no contextual editing and check widgets can be inserted/updated and their fields are scattered throughout tabs respecting the configuration.

Example of a widget I added on my homepage (note the group object in config):

// in modules/image-widget/index.js
module.exports = {
  extend: '@apostrophecms/widget-type',
  options: {
    icon: 'image-icon',
    label: 'Rich Image',
    description: 'Display an image on your page'
  },
  fields: {
    add: {
      _image: {
        type: 'relationship',
        withType: '@apostrophecms/image',
        label: 'Image',
        required: true,
        max: 1
      },
      alt: {
        type: 'string',
        label: 'Alt Text',
        help: 'Descriptive text for screen readers and search engines'
      },
      credit: {
        type: 'string',
        label: 'Credit',
        help: 'Who should be credited for this image?'
      },
      credit2: {
        type: 'string',
        label: 'Credit 2',
        help: 'Who should be credited for this image?'
      },
      credit3: {
        type: 'string',
        label: 'Credit 3',
        help: 'Who should be credited for this image?'
      },
      credit4: {
        type: 'string',
        label: 'Credit 4',
        help: 'Who should be credited for this image?'
      },
      credit5: {
        type: 'string',
        label: 'Credit 5',
        help: 'Who should be credited for this image?'
      },
      credit6: {
        type: 'string',
        label: 'Credit 6',
        help: 'Who should be credited for this image?'
      }
    },
    group: {
      basics: {
        label: 'Basics',
        fields: [ '_image' ]
      },
      content: {
        label: 'Content',
        fields: [ 'alt' ]
      },
      settings: {
        label: 'Settings',
        fields: [ 'credit' ]
      },
      settings2: {
        label: 'Settings 2 with a long label',
        fields: [ 'credit2' ]
      },
      settings3: {
        label: 'Settings 3',
        fields: [ 'credit3' ]
      },
      settings4: {
        label: 'Settings 4',
        fields: [ 'credit4' ]
      },
      settings5: {
        label: 'Settings 5',
        fields: [ 'credit5', 'credit6' ]
      }
    }
  }
};

<!-- in modules/image-widget/views/widget.html -->
<section data-aos="{{ data.widget.animationEffects }}" class="container widget-my-spacing">
  {% if data.widget.aposPlaceholder and data.manager.options.placeholderUrl %}
    <img
      src="{{ data.manager.options.placeholderUrl }}"
      alt="{{ __t('apostrophe:imagePlaceholder') }}"
      class="image-widget-placeholder"
    />
  {% else %}
    {% set className = data.options.className or data.manager.options.className %}
    {% set dimensionAttrs = data.options.dimensionAttrs or data.manager.options.dimensionAttrs %}
    {% set loadingType = data.options.loadingType or data.manager.options.loadingType %}
    {% set size = data.options.size or data.manager.options.size or 'full' %}

    {% set attachment = apos.image.first(data.widget._image) %}

    {% if attachment %}
      <img {% if className %} class="{{ className }}"{% endif %}
        {% if loadingType %} loading="{{ loadingType }}"{% endif %}
        srcset="{{ apos.image.srcset(attachment) }}"
        src="{{ apos.attachment.url(attachment, { size: size }) }}"
        alt="{{ attachment._alt or '' }}"
        {% if dimensionAttrs %}
          {% if attachment.width %} width="{{ apos.attachment.getWidth(attachment) }}" {% endif %}
          {% if attachment.height %} height="{{ apos.attachment.getHeight(attachment) }}" {% endif %}
        {% endif %}
        {% if data.contextOptions and data.contextOptions.sizes %}
          sizes="{{ data.contextOptions.sizes }}"
        {% endif %}
        {% if apos.attachment.hasFocalPoint(attachment) %}
          style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}"
        {%- endif -%}
      />
    {% endif %}
  {% endif %}
</section>

then in homepage

fields: {
    add: {
      main: {
        type: 'area',
        options: {
          widgets: {
             image: {}
          }
        }
      }
    },

[linear]

PRO-5134 Widget modals that support schema tabs/groups

[boutell]

Generally great, need to fix that prop mutation though.

[boutell]

Approved with my shallow clone fix (assigning to a variable doesn't copy the object).