DruxtViewsPager
View source on GitHubModules
- DruxtViewsPager
Used by the DruxtView component to render a Druxt Wrapper themeable pager.
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> - ComponentData :
object - WrapperData :
object
DruxtViewsPager
Used by the DruxtView component to render a Druxt Wrapper themeable pager.
- DruxtViewsPager
- instance
- .getQuery(link) ⇒
object - .getRoute(link) ⇒
object - .setPage(link)
- .getQuery(link) ⇒
- static
- instance
- static
- instance
.getQuery(link) ⇒ object
Get the query object from provided link.
Kind: instance method of DruxtViewsPager
| Param | Type | Description |
|---|---|---|
| link | string | A url with querystring. |
.getRoute(link) ⇒ object
Get a Route object from provided link.
Kind: instance method of DruxtViewsPager
| Param | Type | Description |
|---|---|---|
| link | string | A url with querystring. |
.setPage(link)
Set the model from provided link.
Kind: instance method of DruxtViewsPager
| Param | Type | Description |
|---|---|---|
| link | string | A url with querystring. |
.props
Kind: static property of DruxtViewsPager
.count : integer
The JSON:API Views results total count.
Kind: static property of props
.options : object
The Pager options.
Kind: static property of props
.resource : object
The JSON:API Views results resource.
Kind: static property of props
.type : string
The Pager type.
Kind: static property of props
.value : integer
The DruxtViewPager model value.
Kind: static property of props
.langcode : string
The resource langcode.
Kind: static property of props
Default: "undefined"
Example
<DruxtViewsPager 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
<DruxtViewsPager 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
<DruxtViewsPager
:wrapper="{
component: 'MyWrapper',
class: 'wrapper',
propsData: { foo: 'bar' }
}"
/>
.methods
Kind: static property of DruxtViewsPager
.druxt
DruxtModule settings
Kind: static property of DruxtViewsPager
.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. |
.slots() ⇒ ScopedSlots
Provides the scoped slots object for the Module render function.
The default slot will render basic pagination based on the JSON:API links.
Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.
.error()
Sets the component to render a DruxtDebug error message.
Kind: instance method of DruxtViewsPager
.getModuleComponents() ⇒ Components
Get list of module wrapper components.
Kind: instance method of DruxtViewsPager
.getModulePropsData() ⇒ object
Get module propsData via modules druxt.propsData() callback.
Kind: instance method of DruxtViewsPager
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 DruxtViewsPager
.getWrapperData(component) ⇒ WrapperData
Get wrapper component data.
Kind: instance method of DruxtViewsPager
| Param | Type | Description |
|---|---|---|
| component | string | The Wrapper component name. |
.data()
Kind: static method of DruxtViewsPager
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 DruxtViewsPager
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 DruxtViewsPager
Returns: string - The current language code.
ComponentOptions : Array.<array>
Provides the available component naming options for the Druxt Wrapper.
Kind: global typedef
Example
[
'DruxtViewsPager[Type][Langcode]',
'DruxtViewsPager[Type]',
'DruxtViewsPager[Default][Langcode]',
'DruxtViewsPager[Default]'
]
Example
[
'DruxtViewsPagerFullEn',
'DruxtViewsPagerFull',
'DruxtViewsPagerDefaultEn',
'DruxtViewsPagerDefault'
]
PropsData : object
Provides propsData for the DruxtWrapper.
Kind: global typedef
| Param | Type | Description |
|---|---|---|
| count | integer | The JSON:API Views results total count. |
| options | object | The Pager options. |
| resource | object | The JSON:API Views results resource. |
| type | string | The Pager type. |
| value | integer | The DruxtViewPager model value. |
Example
{
count: 20,
options: {
expose: {},
id: 0,
items_per_page: 10,
...
},
resource: {
data: [],
jsonapi: {},
links: {},
meta: {},
},
type: 'full',
value: 0,
}
ScopedSlots : object
Provides scoped slots for use in the Wrapper component.
Kind: global typedef
| Param | Type | Description |
|---|---|---|
| default | function | A JSON:API resource links based pager. |
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: '',
}
}
}