Modules

DruxtBlockRegion

The DruxtBlockRegion component renders visible blocks based on region and theme.

All blocks, including those not visible, are provided as slots for the Druxt Wrapper component.

Typedefs

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

PropsData : object

Provides propsData for use in the Wrapper component.

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

DruxtBlockRegion

The DruxtBlockRegion component renders visible blocks based on region and theme.

All blocks, including those not visible, are provided as slots for the Druxt Wrapper component.

Example

<DruxtBlockRegion name="header" theme="umami" />

Example (DruxtBlockRegion Wrapper component boilerplate)

<template>
  <DruxtDebug :json="blocks" />
</template>

<script>
import { DruxtBlocksRegionMixin } from 'druxt-blocks'
export default {
  mixins: [DruxtBlocksRegionMixin]
}

Example (DruxtBlockRegion with template injection)

<DruxtBlock id="umami_branding">
  <template #default="{ block }">
    <!-- Do whatever you want here -->
    <DruxtDebug :json="block" />
  </template>
</DruxtBlock>

• DruxtBlockRegion
  • instance
    • .isVisible(block) ⇒ boolean
  • static
    • .props
      • .name : string
      • .theme : string
      • .langcode
      • .v-model
      • .wrapper
    • .computed
      • .route : object
    • .druxt
      • .template
      • .componentOptions(context) ⇒ ComponentOptions
      • .fetchConfig()
      • .propsData(context) ⇒ PropsData
      • .slots() ⇒ ScopedSlots
    • .data()

.isVisible(block) ⇒ boolean

Checks if a given block shoud be visible.

Uses Request Path visibility details if available with the DruxtRouter.

Kind: instance method of DruxtBlockRegion

.props

Kind: static property of DruxtBlockRegion

• .props
  • .name : string
  • .theme : string
  • .langcode
  • .v-model
  • .wrapper

.name : string

The Block regions machine name.

Kind: static property of props
Default: "content"
Example

<DruxtBlockRegion name="header" :theme="theme" />

.theme : string

A Drupal theme machine name.

Kind: static property of props
Required:
Example

<DruxtBlockRegion theme="umami" />

.langcode

The resource langcode.

Kind: static property of props
Example

<DruxtBlockRegion langcode="en" />

.v-model

The module component model value.

Used to bypass the Drupal JSON:API fetch, setting the module data directly.

Kind: static property of props
Example

<DruxtBlockRegion v-model="{ foo: bar }" />

.wrapper

The wrapper component configuration.

Used to set the wrapper component, class, style and propsData.

Kind: static property of props
Example

<DruxtBlockRegion
  :wrapper="{
    component: 'MyWrapper',
    class: 'wrapper',
    propsData: { foo: 'bar' }
  }"
/>

.computed

Kind: static property of DruxtBlockRegion

.route : object

The current Route from the DruxtRouter vuex store.

Kind: static property of computed

.druxt

DruxtModule configuration.

Kind: static property of DruxtBlockRegion

• .druxt
  • .template
  • .componentOptions(context) ⇒ ComponentOptions
  • .fetchConfig()
  • .propsData(context) ⇒ PropsData
  • .slots() ⇒ ScopedSlots

.template

Druxt development template tool configuration.

Kind: static property of druxt

.componentOptions(context) ⇒ ComponentOptions

Provides the available component naming options for the DruxtWrapper.

Kind: static method of druxt

.fetchConfig()

Fetches all blocks by region and theme.

Kind: static method of druxt

.propsData(context) ⇒ PropsData

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

.slots() ⇒ ScopedSlots

Provides the scoped slots object for the Module render function.

A scoped slot is provided for each block in the region, regardless of visibility.

The default slot will render all blocks, filtered by route visibility.

Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.
Example (DruxtBlockRegionName.vue)

<template>
  <div v-if="default">
    <slot />
  </div>

  <div v-else>
    <slot name="umami_branding" />
  </div>
</template>

.data()

Kind: static method of DruxtBlockRegion
Properties

ComponentOptions : Array.<array>

Provides the available naming options for the Wrapper component.

Kind: global typedef
Example

[
  'DruxtBlockRegion[Name][Theme][Langcode]',
  'DruxtBlockRegion[Name][Theme]',
  'DruxtBlockRegion[Name][Langcode]',
  'DruxtBlockRegion[Name]',
  'DruxtBlockRegion[Default][Langcode]',
  'DruxtBlockRegion[Default]',
]

Example (Banner top - Umami)

[
  'DruxtBlockRegionBannerTopUmamiEn',
  'DruxtBlockRegionBannerTopUmami',
  'DruxtBlockRegionBannerTopEn',
  'DruxtBlockRegionBannerTop',
  'DruxtBlockRegionDefaultEn',
  'DruxtBlockRegionDefault',
]

PropsData : object

Provides propsData for use in the Wrapper component.

Kind: global typedef

Example

{
  blocks: [{
    attributes: {},
    id: '59104acd-88e1-43c3-bd5f-35800f206394',
    links: {},
    relationships: {},
    type: 'block--block',
  }],
  name: 'banner_top,
  theme: 'umami',
}

ScopedSlots : object

Provides scoped slots for use in the Wrapper component.

Kind: global typedef

Example (DruxtBlockRegionName.vue)

<template>
  <div v-if="default">
    <slot />
  </div>

  <div v-else>
    <slot name="umami_branding" />
  </div>
</template>