Skip to content

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

DruxtViewsFilter

View source on GitHub

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 : string

The resource langcode.

Kind: static property of props
Example

@lang vue
<DruxtViewsFilter langcode="en" />

.v-model : mixed

The Vue.js v-model binding for the module.

Setting a value provides the module data directly, so the Drupal JSON:API fetch is skipped.

Kind: static property of props
Default:
Example

@lang vue
<template>
  <DruxtViewsFilter v-model="model" />
</template>

<script>
export default {
  data: () => ({ model: { foo: 'bar' } })
}
</script>

.wrapper : (boolean | object)

The wrapper component configuration.

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

Kind: static property of props
Default: () => undefined
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.

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

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

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,
}

Inherited type definitions

Inherited from DruxtModule: ComponentData, Components, WrapperData.