DruxtViewsFilters
Modules
- DruxtViewsFilters
Used by the DruxtView component to render a collection of Druxt Wrapper themeable filters.
Typedefs
- ComponentOptions :
Array.<array> Provides the available component naming options for the Druxt Wrapper.
- PropsData :
object Provides propsData for the DruxtWrapper.
- 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.
DruxtViewsFilters
Used by the DruxtView component to render a collection of Druxt Wrapper themeable filters.
- DruxtViewsFilters
.props
Kind: static property of DruxtViewsFilters
.filters : Array.<object>
The Exposed Filter objects.
Kind: static property of props
.options : object
The Exposed form options.
Kind: static property of props
.type : string
The Exposed form type.
Kind: static property of props
.value : object
The DruxtViewFilters model value.
Kind: static property of props
.langcode
The resource langcode.
Kind: static property of props
Example
<DruxtViewsFilters 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
<DruxtViewsFilters 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
<DruxtViewsFilters
:wrapper="{
component: 'BCard',
class: 'article-card',
propsData: { noBody: true }
}"
/>
.druxt
DruxtModule settings
Kind: static property of DruxtViewsFilters
.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
| Param | Type | Description |
|---|---|---|
| context | object | The module component ViewModel. |
| context.type | string | The Exposed form type. |
.propsData(context) ⇒ PropsData
Provides propsData for the DruxtWrapper.
Kind: static method of druxt
| Param | Type | Description |
|---|---|---|
| context | object | The module component ViewModel. |
| context.options | object | The Exposed form options. |
| context.filters | Array.<object> | The Exposed Filter objects. |
| context.model | object | The DruxtViewsFilters model value. |
| context.type | string | The Exposed form type. |
.slots(h) ⇒ ScopedSlots
Provides the scoped slots object for the Module render function.
A scoped slot is provided for each filter.
The default slot will render all filters.
Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.
| Param | Type | Description |
|---|---|---|
| h | function | The Vue createElement function. |
Example (DruxtViewsFiltersType.vue)
<template>
<div>
<slot name="nid" />
</div>
</template>
.error(err, [context])
Sets the component to render a DruxtDebug error message.
Kind: instance method of DruxtViewsFilters
| Param | Type | Description |
|---|---|---|
| err | object | The error object. |
| [context] | object | Error context; carries the wrapper component data where the failure knows it. |
.getModuleComponents() ⇒ Components
Get list of module wrapper components.
Kind: instance method of DruxtViewsFilters
.getModulePropsData(wrapperProps) ⇒ object
Get module propsData via modules druxt.propsData() callback.
Kind: instance method of DruxtViewsFilters
| Param | Type | Description |
|---|---|---|
| wrapperProps | object | Props 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 DruxtViewsFilters
.getWrapperData(component) ⇒ WrapperData
Get wrapper component data.
Kind: instance method of DruxtViewsFilters
| Param | Type | Description |
|---|---|---|
| component | string | The Wrapper component name. |
.methods
Kind: static property of DruxtViewsFilters
.data(vm)
Kind: static method of DruxtViewsFilters
| Param | Type | Description |
|---|---|---|
| vm | object | The component ViewModel. |
| vm.value | * | The module component model value. |
Properties
| Name | Type | Description |
|---|---|---|
| component | ComponentData | The 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 DruxtViewsFilters
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 DruxtViewsFilters
Returns: string - The current language code.
| Param | Type | Description |
|---|---|---|
| vm | object | The component ViewModel. |
| vm.langcode | string | The langcode prop. |
| vm.$route | object | The current route. |
ComponentOptions : Array.<array>
Provides the available component naming options for the Druxt Wrapper.
Kind: global typedef
Example
[
'DruxtViewsFilters[Type][Langcode]',
'DruxtViewsFilters[Type]',
'DruxtViewsFilters[Default][Langcode]'
'DruxtViewsFilters[Default]'
]
Example
[
'DruxtViewsFiltersBasicEn',
'DruxtViewsFiltersBasic',
'DruxtViewsFiltersDefaultEn'
'DruxtViewsFiltersDefault'
]
PropsData : object
Provides propsData for the DruxtWrapper.
Kind: global typedef
| Param | Type | Description |
|---|---|---|
| filters | Array.<object> | The Exposed Filter objects. |
| options | object | The Exposed form options. |
| type | string | The Exposed form type. |
| value | object | The DruxtViewFilters model value. |
Example
{
filters: [{
admin_label: '',
expose: {},
exposed: true,
...
}],
options: {
expose_sort_order: true,
exposed_sorts_label: 'Sort by',
reset_button: false,
...
},
type: 'basic',
value: undefined,
}
ScopedSlots : object
Provides scoped slots for use in the Wrapper component.
Kind: global typedef
| Param | Type | Description |
|---|---|---|
| [filter.expose.identifier] | function | Slot per filter. |
| default | function | All filters. |
Example (DruxtViewsFiltersType.vue)
<template>
<div v-if="default">
<slot />
</div>
<div v-else>
<slot name="type" />
</div>
</template>
Components : Array.<object>
The list of candidate Wrapper components, with naming parts and global registration state.
Kind: global typedef
Properties
| Name | Type | Description |
|---|---|---|
| global | boolean | Component global registration state. |
| name | string | The component name. |
| parts | Array.<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
| Name | Type | Default | Description |
|---|---|---|---|
| $attrs | object | propsData not registered by the Wrapper component. | |
| is | string | "DruxtWrapper" | The Wrapper component name. |
| options | Array.<string> | The Wrapper component options. | |
| props | object | propsData registered by the Wrapper component. | |
| propsData | object | The component propsData object. | |
| settings | object | Druxt 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
| Name | Type | Description |
|---|---|---|
| druxt | object | Druxt settings object for use by Druxt module. |
| props | object | Registered props oject. |
Example
{
druxt: { query: { fields: ['path', 'title'] } },
props: {
value: {
type: Object,
default: () => ({}),
}
}
}