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.

Components : Array.<object>

The list of candidate Wrapper components, with naming parts and global registration state.

ComponentData : object

The Wrapper component and propsData to be rendered.

WrapperData : object

Druxt settings and registered props retrieved from 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
      • .blocks : Array.<objects>
    • .computed
      • .route : object
    • .druxt
      • .template
      • .componentOptions(context) ⇒ ComponentOptions
      • .fetchConfig()
      • .propsData(context) ⇒ PropsData
      • .slots(h) ⇒ ScopedSlots
    • .data()
  • instance
    • .error(err, [context])
    • .getModuleComponents() ⇒ Components
    • .getModulePropsData(wrapperProps) ⇒ object
    • .getScopedSlots() ⇒ object
    • .getWrapperData(component) ⇒ WrapperData
  • static
    • .methods
    • .fetch()
    • .lang(vm) ⇒ string

.isVisible(block) ⇒ boolean

Checks if a given block should 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
  • .blocks : Array.<objects>

.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: 'BCard',
    class: 'article-card',
    propsData: { noBody: true }
  }"
/>

.blocks : Array.<objects>

The Block JSON:API resources.

Kind: static property of props
Required:

.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(h) ⇒ 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(h) ⇒ 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

.error(err, [context])

Sets the component to render a DruxtDebug error message.

Kind: instance method of DruxtBlockRegion

.getModuleComponents() ⇒ Components

Get list of module wrapper components.

Kind: instance method of DruxtBlockRegion

.getModulePropsData(wrapperProps) ⇒ object

Get module propsData via modules druxt.propsData() callback.

Kind: instance method of DruxtBlockRegion

Example

{
  $attrs: { entity: {}, fields: {}, langcode: 'en', schema: {} },
  props: { value: {} },
  propsData: { entity: {}, fields: {}, langcode: 'en', schema: {}, value: {} },
}

.getScopedSlots() ⇒ object

Gets a Druxt modules scoped slots, and if there's no default slots, provides a develop mode debug default or passes through to a default template.

Kind: instance method of DruxtBlockRegion

.getWrapperData(component) ⇒ WrapperData

Get wrapper component data.

Kind: instance method of DruxtBlockRegion

.methods

Kind: static property of DruxtBlockRegion

.fetch()

Loads the Druxt module data and applies a wrapper component as required.

Important: If your component has an existing fetch method, you must manually invoke the DruxtModule.fetch() hook.

Kind: static method of DruxtBlockRegion
Example (Manually invoking DruxtModule.fetch().)

import DruxtModule from 'druxt/components/DruxtModule.vue'
export default {
  name: 'DruxtCustomModule',
  extends: DruxtModule,
  async fetch() {
    await DruxtModule.fetch.call(this)
  }
  druxt: {
    componentOptions: () => ([['Default']]),
    propsData: ({ model }) => ({ value: model }),
  }
}

.lang(vm) ⇒ string

The current language code: the langcode prop if set, otherwise the route's langcode metadata.

Used by Druxt modules to fetch the correct resource translation.

Kind: static method of DruxtBlockRegion
Returns: string - The current language code.

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>

Components : Array.<object>

The list of candidate Wrapper components, with naming parts and global registration state.

Kind: global typedef
Properties

Example

[{
  global: true,
  name: 'DruxtEntityNodeArticleDefault',
  parts: ['NodeArticle', 'Default'],
}]

ComponentData : object

The Wrapper component and propsData to be rendered.

Kind: global typedef
Properties

Example

{
  $attrs: { entity: {}, fields: {}, schema: {} },
  is: 'DruxtEntityNodeArticleDefault',
  options: [
    'DruxtEntityNodeArticleDefault',
    'DruxtEntityDefault',
  ],
  props: { value: {} },
  propsData: {
    entity: {},
    fields: {},
    schema: {},
    value: {},
  },
  settings: { query: {} },
}

WrapperData : object

Druxt settings and registered props retrieved from the Wrapper component.

Kind: global typedef
Properties

Example

{
  druxt: { query: { fields: ['path', 'title'] } },
  props: {
    value: {
      type: Object,
      default: () => ({}),
    }
  }
}