TopicComponentGroup

Back To Home

Back to Mapboard Topic Panel wiki

TopicComponentGroup

NOTE: this component type should be renamed now that we have made being included in a topic optional for any component. This is issue 6.

A TopicComponentGroup makes it so that when a user of Mapboard writes a set of components as an array in a config file, the components of the array are included in the final app.

It also allows you to put components inside of other components using a config file.

It includes the following props:

prop	definition or description
topicComponents
item
filterData

In the Mapboard Topic panel

All components of the Topic Panel of Mapboard are included because the Topic Panel template includes the following TopicComponentGroup:

<div v-if="!shouldShowGreeting" class="topic-panel-content">
  <div
       class="topics-container cell medium-cell-block-y"
       :style="topicsContainerStyle"
  >
    <topic-component-group :topic-components="this.$config.components" />
  </div>
</div>

In a phila-vue-comps Topic

The component Topic includes a TopicComponentGroup. (This was the original use of TopicComponentGroup, where it got its name which is now outdated):

<transition name="topic-body">
  <div class="topic-body"
       v-if="shouldShowBody"
       :data-topic-key="topicKey"
  >
    <topic-component-group :topic-components="topic.components" />
  </div>
</transition>

In any other phila-vue-comps component template

Some components allow you to place other components inside of them. In order for this to be flexible, these components contain a TopicComponentGroup. For instance, the BadgeCustom template includes the following TopicComponentGroup:

<div class="mb-badge panel">
  <div class="mb-badge-header" :style="style">
    {{ evaluateSlot(slots.title) }}
  </div>
  <topic-component-group :topic-components="options.components" :item="item" />
</div>

In a Mapboard config file

Wherever you can and want to include a TopicComponentGroup, you include an array of components. For instance, in a Mapboard app, in the main.js, to add the TopicSet for the app, you add:

components: [
  {
    type: 'topic-set',
    options: {
      defaultTopic: 'property'
    }
  },
],

Within a Topic you include an array of the components in that topic. For instance in a Topic included as a file called property.js:

export default {
  key: 'property',
  icon: 'home',
  label: 'Property Assessments',
  // REVIEW can these be calculated from vue deps?
  dataSources: ['opa'],
  components: [
    {
      type: 'callout',
      slots: {
        text: '\
          Property assessment and sale information for this address. Source: Office of Property Assessments (OPA). OPA was formerly a part of the Bureau of Revision of Taxes (BRT) and some City records may still use that name.\
        '
      }
    },...

Within phila-vue-comps component, you sometimes will include another component. For instance, in BadgeCustom, you can include a table inside the badge:

components: [
  {
    type: 'badge-custom',
    options: {
      titleBackground: '#58c04d',
      components: [
        {
          type: 'horizontal-table',
          options: {
            topicKey: 'zoning',
            shouldShowFilters: false,
            shouldShowHeaders: false,
            id: 'baseZoning', ...