DruxtViewsFilter
View source on GitHubModules
- 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> - ComponentData :
object - WrapperData :
object
DruxtViewsFilter
Used by the DruxtView component to render individual Druxt Wrapper themeable filter components.
- DruxtViewsFilter
.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
Default: "undefined"
Example
<DruxtViewsFilter langcode="en" />
.v-model : mixed
The module component model value.
Used to bypass the Drupal JSON:API fetch, setting the module data directly.
Kind: static property of props
Default: null
Example
<DruxtViewsFilter v-model="{ foo: bar }" />
.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: 'MyWrapper',
class: 'wrapper',
propsData: { foo: 'bar' }
}"
/>
.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
| Param | Type | Description |
|---|---|---|
| context | object | The module component ViewModel. |
.propsData(context) ⇒ PropsData
Provides propsData for the DruxtWrapper.
Kind: static method of druxt
| Param | Type | Description |
|---|---|---|
| context | object | The module component ViewModel. |
.error()
Sets the component to render a DruxtDebug error message.
Kind: instance method of DruxtViewsFilter
.getModuleComponents() ⇒ Components
Get list of module wrapper components.
Kind: instance method of DruxtViewsFilter
.getModulePropsData() ⇒ object
Get module propsData via modules druxt.propsData() callback.
Kind: instance method of DruxtViewsFilter
Example
{
bar: 'foo',
foo: 'bar',
}
.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
| Param | Type | Description |
|---|---|---|
| component | string | The Wrapper component name. |
.methods
Kind: static property of DruxtViewsFilter
.data()
Kind: static method of DruxtViewsFilter
Properties
| Name | Type | Description |
|---|---|---|
| component | ComponentData | The wrapper component and propsData to be rendered. |
| model | object | The model object. |
.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/dist/components/DruxtModule.vue'
export default {
name: 'DruxtTestModule',
extends: DruxtModule,
async fetch() {
await DruxtModule.fetch.call(this)
}
druxt: {
componentOptions: () => ([['wrapper']]),
propsData: (ctx) => ({
bar: ctx.bar,
foo: ctx.foo,
}),
}
}
.lang() ⇒ 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.
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
| Param | Type | Description |
|---|---|---|
| filter | object | The 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>
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,
pascal: 'DruxtTestModuleWrapper',
parts: ['Wrapper'],
}]
ComponentData : object
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: { bar: 'foo' },
is: 'DruxtTestModuleWrapper',
options: [
'DruxtTestModuleWrapper',
],
props: { foo: 'bar' },
propsData: {
bar: 'foo',
foo: 'bar',
},
settings: { fooBar: true },
}
WrapperData : object
Kind: global typedef
Properties
| Name | Type | Description |
|---|---|---|
| druxt | object | Druxt settings object for use by Druxt module. |
| props | object | Registered props oject. |
Example
{
druxt: { fooBar: true },
props: {
foo: {
type: String,
default: '',
}
}
}