Skip to content

Drupal Views components for Druxt with support for filters, pagination and sorting.

DruxtViewsFilter

View source on GitHub

Modules

DruxtViewsFilter

Used by the DruxtView component to render individual Druxt Wrapper themeable filter components.

Typedefs

ComponentOptions : Array.<array>

Provides the available component naming options for the Druxt Wrapper.

PropsData : object

Provides propsData for the DruxtWrapper.

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.

DruxtViewsFilter

Used by the DruxtView component to render individual Druxt Wrapper themeable filter components.


.props

Kind: static property of DruxtViewsFilter


.filter : object

The Exposed Filter objects.

Kind: static property of props


.langcode

The resource langcode.

Kind: static property of props
Example

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

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

<DruxtViewsFilter
  :wrapper="{
    component: 'BCard',
    class: 'article-card',
    propsData: { noBody: true }
  }"
/>

.druxt

DruxtModule settings

Kind: static property of DruxtViewsFilter


.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

ParamTypeDescription
contextobjectThe module component ViewModel.
context.filterobjectThe Exposed Filter object.

.propsData(context) ⇒ PropsData

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

ParamTypeDescription
contextobjectThe module component ViewModel.
context.filterobjectThe Exposed Filter object.
context.model*The DruxtViewsFilter model value.

.error(err, [context])

Sets the component to render a DruxtDebug error message.

Kind: instance method of DruxtViewsFilter

ParamTypeDescription
errobjectThe error object.
[context]objectError context; carries the wrapper component data where the failure knows it.

.getModuleComponents() ⇒ Components

Get list of module wrapper components.

Kind: instance method of DruxtViewsFilter


.getModulePropsData(wrapperProps) ⇒ object

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

Kind: instance method of DruxtViewsFilter

ParamTypeDescription
wrapperPropsobjectProps registered by the Wrapper component.

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 DruxtViewsFilter


.getWrapperData(component) ⇒ WrapperData

Get wrapper component data.

Kind: instance method of DruxtViewsFilter

ParamTypeDescription
componentstringThe Wrapper component name.

.methods

Kind: static property of DruxtViewsFilter


.data(vm)

Kind: static method of DruxtViewsFilter

ParamTypeDescription
vmobjectThe component ViewModel.
vm.value*The module component model value.

Properties

NameTypeDescription
componentComponentDataThe wrapper component and propsData to be rendered.
model*The module component model value.

.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 DruxtViewsFilter
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 DruxtViewsFilter
Returns: string - The current language code.

ParamTypeDescription
vmobjectThe component ViewModel.
vm.langcodestringThe langcode prop.
vm.$routeobjectThe current route.

ComponentOptions : Array.<array>

Provides the available component naming options for the Druxt Wrapper.

Kind: global typedef
Example

[
  'DruxtViewsFilter[FilterId][Langcode]',
  'DruxtViewsFilter[FilterId]',
  'DruxtViewsFilter[PluginId][FilterId][Langcode]',
  'DruxtViewsFilter[PluginId][FilterId]',
  'DruxtViewsFilter[PluginId][Langcode]',
  'DruxtViewsFilter[PluginId]',
  'DruxtViewsFilter[Default][Langcode]'
  'DruxtViewsFilter[Default]'
]

Example

[
  'DruxtViewsFilterTaxonomyIndexTidTypeTargetIdEn',
  'DruxtViewsFilterTaxonomyIndexTidTypeTargetId',
  'DruxtViewsFilterTypeTargetIdEn',
  'DruxtViewsFilterTypeTargetId',
  'DruxtViewsFilterTaxonomyIndexTidEn',
  'DruxtViewsFilterTaxonomyIndexTid',
  'DruxtViewsFilterDefaultEn',
  'DruxtViewsFilterDefault',
]

PropsData : object

Provides propsData for the DruxtWrapper.

Kind: global typedef

ParamTypeDescription
filterobjectThe Exposed Filter objects.
value*The DruxtViewFilter model value.

Example

{
  filter: {
    admin_label: '',
    error_message: true,
    expose: {},
    exposed: true,
    field: 'type_target_id',
    ...
  },
  value: undefined,
}

Components : Array.<object>

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

Kind: global typedef
Properties

NameTypeDescription
globalbooleanComponent global registration state.
namestringThe component name.
partsArray.<string>The component naming parts.

Example

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

ComponentData : object

The Wrapper component and propsData to be rendered.

Kind: global typedef
Properties

NameTypeDefaultDescription
$attrsobjectpropsData not registered by the Wrapper component.
isstring"DruxtWrapper"The Wrapper component name.
optionsArray.<string>The Wrapper component options.
propsobjectpropsData registered by the Wrapper component.
propsDataobjectThe component propsData object.
settingsobjectDruxt settings object provided by the Wrapper component.

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

NameTypeDescription
druxtobjectDruxt settings object for use by Druxt module.
propsobjectRegistered props oject.

Example

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