druxt-views 0.22.2 → 0.22.3-dev.20260920043715

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,72 +1,111 @@
1
+ <img src="./banner.svg" alt="DruxtViews renders Drupal Views with filters, pagination and sorting">
2
+
1
3
  # DruxtViews
2
4
 
3
5
  [![npm](https://badgen.net/npm/v/druxt-views)](https://www.npmjs.com/package/druxt-views)
4
- [![CircleCI](https://circleci.com/gh/druxt/druxt-views.svg?style=svg)](https://circleci.com/gh/druxt/druxt-views)
5
- [![Known Vulnerabilities](https://snyk.io/test/github/druxt/druxt-views/badge.svg?targetFile=package.json)](https://snyk.io/test/github/druxt/druxt-views?targetFile=package.json)
6
- [![codecov](https://codecov.io/gh/druxt/druxt-views/branch/develop/graph/badge.svg)](https://codecov.io/gh/druxt/druxt-views)
6
+ [![CI](https://github.com/druxt/druxt.js/actions/workflows/ci.yml/badge.svg)](https://github.com/druxt/druxt.js/actions/workflows/ci.yml)
7
+ [![Known Vulnerabilities](https://snyk.io/test/github/druxt/druxt.js/badge.svg?targetFile=package.json)](https://snyk.io/test/github/druxt/druxt.js?targetFile=package.json)
8
+ [![codecov](https://codecov.io/gh/druxt/druxt.js/branch/develop/graph/badge.svg)](https://codecov.io/gh/druxt/druxt.js)
7
9
 
8
10
  > Drupal Views components for Druxt with support for filters, pagination and sorting.
9
11
 
10
- ## Links
12
+ DruxtViews renders Drupal Views in Nuxt through the
13
+ [JSON:API Views](https://www.drupal.org/project/jsonapi_views) module. A
14
+ View's results, exposed filters, sorts and pagers all come across; results
15
+ render as DruxtEntity components, and every part themes through the Druxt
16
+ component suggestion system.
11
17
 
12
- - DruxtJS: https://druxtjs.org
13
- - Documentation: https://druxtjs.org/modules/views
14
- - Community Discord server: https://discord.druxtjs.org
18
+ ![Example DruxtView page component](https://druxtjs.org/images/druxt-views-page.png)
19
+
20
+ ## Features
21
+
22
+ - Vue.js components:
23
+ - **DruxtView** renders a Drupal View by display as DruxtEntity components
24
+ - **View page routing and Blocks** with Druxt module integrations
25
+ - **Druxt settings** filter JSON:API fields
26
+ - **@nuxtjs/Storybook** integration
27
+
28
+ ---
29
+
30
+ ## Installation
31
+
32
+ > Included with [`druxt-site`](https://druxtjs.org/modules/site). Install it separately only when composing modules yourself.
15
33
 
16
- ## Install
34
+ 1. Install the package:
35
+
36
+ ```sh
37
+ npm i druxt-views
38
+ ```
39
+
40
+ 2. Add the module to `nuxt.config.js`:
41
+
42
+ ```js
43
+ export default {
44
+ modules: ['druxt-views'],
45
+ };
46
+ ```
47
+
48
+ ---
49
+
50
+ ## Vue.js components
51
+
52
+ ### DruxtView
53
+
54
+ Renders a Drupal View using DruxtEntity components, using data provided by the Drupal JSON:API Views module.
55
+
56
+ ```vue
57
+ <DruxtView :display-id="displayId" :view-id="viewId" />
58
+ ```
17
59
 
18
- `$ npm install druxt-views`
60
+ - For more details, refer to the [DruxtView API documentation](https://druxtjs.org/api/packages/views/components/DruxtView).
19
61
 
20
- ### Nuxt.js
62
+ ---
21
63
 
22
- Add module to `nuxt.config.js`
64
+ ## Settings
65
+
66
+ ### Reducing Views data
67
+
68
+ The default behaviour of the Views module is to retrieve all available fields from the JSON:API, for all results.
69
+
70
+ This behaviour is configurable using the modules `query` option, allowing for manually filtered `fields`, as well as automatic filtering with the `bundleFilter` option.
71
+
72
+ The default behaviour can be set via `nuxt.config.js`:
23
73
 
24
74
  ```js
25
- module.exports = {
26
- modules: [
27
- 'druxt-views'
28
- ],
75
+ export default {
29
76
  druxt: {
30
- baseUrl: 'https://demo-api.druxtjs.org',
31
77
  views: {
32
- bundleFilter: true,
33
- fields: ['title'],
78
+ query: {
79
+ bundleFilter: true,
80
+ },
34
81
  },
35
82
  },
36
- }
83
+ };
37
84
  ```
38
85
 
39
- ## Usage
86
+ | Option | Type | Required | Default | Description |
87
+ | --------------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------- |
88
+ | `query.bundleFilter` | `boolean` | No | `false` | Whether to automatically detect Resource types to filter, based on the View `bundle` filter. |
89
+ | `query.fields` | `string[]` | No | `[]` | An array of fields to filter from the JSON:API Views Resource types. |
90
+ | `query.resourceTypes` | `string[]` | No | `[]` | An array of Resource types to be used by the Fields filter. |
40
91
 
41
- ### DruxtView component
92
+ ---
42
93
 
43
- The DruxtView component uses the [JSON:API Views module](https://drupal.org/project/jsonapi_views) to render a Decoupled Drupal View.
94
+ ## Router support
44
95
 
45
- ```vue
46
- <DruxtView view-id="frontpage" />
47
- ```
96
+ The DruxtViews module provides a **DruxtRouterView** component that is used by the Druxt Router module to render View page routes.
48
97
 
49
- The View can be themed by providing a default scoped slot:
50
- ```vue
51
- <DruxtView view-id="frontpage">
52
- <template #default="{ results }">
53
- {{ results }}
54
- </template>
55
- </DruxtView>
56
- ```
98
+ - For more details, see the [Druxt Router module](https://druxtjs.org/modules/router).
57
99
 
58
- The component also provides a DruxtWrapper component for theming:
59
- ```vue
60
- <template>
61
- <div>
62
- <slot name="sorts" />
63
- <slot name="results" />
64
- <slot name="pager" />
65
- <div>
66
- </template>
67
- ```
100
+ ---
68
101
 
69
- See the [DruxtViews API documentation](https://druxtjs.org/api/packages/views/components/DruxtView) for more information.
102
+ ## Storybook
103
+
104
+ DruxtViews provides zero-config, auto-generated Storybook integration with a live data connection to your Druxt backend.
105
+
106
+ - For more details, see the [Storybook guide](https://druxtjs.org/how-to/storybook).
107
+
108
+ ---
70
109
 
71
110
  ## Options
72
111
 
@@ -74,17 +113,23 @@ See the [DruxtViews API documentation](https://druxtjs.org/api/packages/views/co
74
113
 
75
114
  These options are specific to this module.
76
115
 
77
- | Option | Type | Required | Default | Description |
78
- | --- | --- | --- | --- | --- |
79
- | `views.query.bundleFilter` | `boolean` | No | `false` | Whether to automatically detect Resource types to filter, based on the View `bundle` filter. |
80
- | `views.query.fields` | `string[]` | No | `[]` | An array of fields to filter from the JSON:API Views Resource types. |
81
- | `views.query.resourceTypes` | `string[]` | No | `[]` | An array of Resource types to be used by the Fields filter. |
116
+ | Option | Type | Required | Default | Description |
117
+ | --------------------------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------- |
118
+ | `views.query.bundleFilter` | `boolean` | No | `false` | Whether to automatically detect Resource types to filter, based on the View `bundle` filter. |
119
+ | `views.query.fields` | `string[]` | No | `[]` | An array of fields to filter from the JSON:API Views Resource types. |
120
+ | `views.query.resourceTypes` | `string[]` | No | `[]` | An array of Resource types to be used by the Fields filter. |
82
121
 
83
122
  ### Base Druxt options
84
123
 
85
124
  These options are available to all Druxt modules.
86
125
 
87
- | Option | Type | Required | Default | Description |
88
- | --- | --- | --- | --- | --- |
89
- | `axios` | `object` | No | `{}` | [Axios instance settings](https://github.com/axios/axios#axioscreateconfig). |
90
- | `baseUrl` | `string` | Yes | `null` | Base URL for the Drupal installation. |
126
+ | Option | Type | Required | Default | Description |
127
+ | --------- | -------- | -------- | ------- | ---------------------------------------------------------------------------- |
128
+ | `axios` | `object` | No | `{}` | [Axios instance settings](https://github.com/axios/axios#axioscreateconfig). |
129
+ | `baseUrl` | `string` | Yes | `null` | Base URL for the Drupal installation. |
130
+
131
+ ## Links
132
+
133
+ - DruxtJS: https://druxtjs.org
134
+ - Documentation: https://druxtjs.org/modules/views
135
+ - Community Discord server: https://discord.druxtjs.org
package/banner.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" width="1280" height="320" role="img" aria-label="druxt-views: Drupal Views with filters, pagination and sorting."><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1f2937"/><stop offset="0.7" stop-color="#2f495e"/><stop offset="1" stop-color="#36566e"/></linearGradient></defs><rect width="1280" height="320" rx="16" fill="url(#g)"/><rect x="250" y="85" width="150" height="150" rx="32" fill="rgba(229,236,241,0.07)"/><g transform="translate(277,112) scale(4)" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4.25h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1z" stroke="#7cc5f1"/><path d="M5 10h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1z" stroke="#7cc5f1"/><path d="M5 15.75h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1z" stroke="#7cc5f1"/><path d="M11.5 6.25H20M11.5 12H20M11.5 17.75H20" stroke="#68cb9f"/></g><text x="440" y="150" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="64" font-weight="700" letter-spacing="-1" fill="#eef2f6">Views</text><text x="651" y="150" style="font-family:ui-monospace,Menlo,Consolas,monospace" font-size="26" fill="#7cc5f1">druxt-views</text><text x="440" y="196" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="25" fill="rgba(229,236,241,0.75)">Drupal Views with filters, pagination and sorting.</text><g transform="translate(440,236) scale(0.0994)"><path d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z" fill="#3498DB"/><path d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z" fill="#108775"/><path d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z" fill="#E5ECF1"/></g><text x="492" y="260" style="font-family:ui-sans-serif,system-ui,sans-serif" font-size="17" font-weight="600" fill="rgba(229,236,241,0.85)">druxtjs.org</text></svg>
@@ -6,6 +6,18 @@
6
6
 
7
7
  import { DruxtRouterMixin } from 'druxt-router'
8
8
 
9
+ /**
10
+ * Renders a Views route via the DruxtView component.
11
+ *
12
+ * The DruxtRouter component renders this component automatically for Views
13
+ * routes; the route props are passed through to DruxtView.
14
+ *
15
+ * @see {@link ./DruxtView|DruxtView}
16
+ * @see https://druxtjs.org/modules/views
17
+ *
18
+ * @example @lang vue
19
+ * <DruxtRouterView :route="route" />
20
+ */
9
21
  export default {
10
22
  mixins: [DruxtRouterMixin],
11
23
  }
@@ -10,7 +10,7 @@ import { mapActions } from 'vuex'
10
10
  * The DruxtView component renders Drupal Views using configuration and
11
11
  * results provided by the Drupal View and the JSON:API Views module.
12
12
  *
13
- * The component renders slots for the View's headers, footers, entity results,
13
+ * The component renders slots for the View's headers, footers, entity results,
14
14
  * exposed sorts and filters, and supports contextual filters.
15
15
  *
16
16
  * @example @lang vue
@@ -34,13 +34,15 @@ import { mapActions } from 'vuex'
34
34
  * mixins: [DruxtViewsViewMixin]
35
35
  * }
36
36
  *
37
- * @example <caption>DruxtView with template injection</caption> @lang vue
37
+ * @example <caption>default slot (template injection)</caption> @lang vue
38
38
  * <DruxtView>
39
39
  * <template #default="{ results }">
40
40
  * <!-- Do whatever you want here -->
41
41
  * <DruxtDebug :json="results" />
42
42
  * </template>
43
43
  * </DruxtView>
44
+ *
45
+ * @see {@link https://druxtjs.org/explanation/component-resolution|Component resolution}
44
46
  */
45
47
  export default {
46
48
  name: 'DruxtView',
@@ -224,7 +226,7 @@ export default {
224
226
  /**
225
227
  * The View Headers data.
226
228
  *
227
- * @type {@object}
229
+ * @type {object[]}
228
230
  */
229
231
  headers() {
230
232
  if (!this.display) return []
@@ -430,6 +432,10 @@ export default {
430
432
  * Provides the available component naming options for the Druxt Wrapper.
431
433
  *
432
434
  * @param {object} context - The module component ViewModel.
435
+ * @param {string} context.displayId - The View Display ID.
436
+ * @param {string} context.uuid - The View UUID.
437
+ * @param {object} context.view - The View JSON:API resource data.
438
+ * @param {string} context.viewId - The View ID.
433
439
  * @returns {ComponentOptions}
434
440
  */
435
441
  componentOptions: ({ displayId, uuid, view, viewId }) => ([
@@ -462,6 +468,8 @@ export default {
462
468
 
463
469
  /**
464
470
  * Fetch JSON:API Views results.
471
+ *
472
+ * @param {object} settings - The module settings object, including the results query configuration.
465
473
  */
466
474
  async fetchData(settings) {
467
475
  const viewId = this.viewId || (((this.view || {}).data || {}).attributes || {}).drupal_internal__id
@@ -475,7 +483,7 @@ export default {
475
483
  // Build query.
476
484
  const query = this.getQuery(settings)
477
485
 
478
- // Execute the resquest.
486
+ // Execute the request.
479
487
  this.resource = await this.getResults({
480
488
  displayId: this.displayId,
481
489
  prefix: this.lang,
@@ -489,7 +497,7 @@ export default {
489
497
  /**
490
498
  * Provides propsData for the DruxtWrapper.
491
499
  *
492
- * @param {object} context - The module component ViewModel.
500
+ * @param {object} vm - The module component ViewModel.
493
501
  * @returns {PropsData}
494
502
  */
495
503
  propsData: (vm) => ({
@@ -503,6 +511,10 @@ export default {
503
511
 
504
512
  /**
505
513
  * Component settings.
514
+ *
515
+ * @param {object} context - The module component ViewModel.
516
+ * @param {object} wrapperSettings - Settings provided by the wrapper component.
517
+ * @returns {object} The merged module settings.
506
518
  */
507
519
  settings: (context, wrapperSettings) => {
508
520
  const { $druxt, settings } = context
@@ -544,6 +556,7 @@ export default {
544
556
  * </div>
545
557
  * </template>
546
558
  *
559
+ * @param {Function} h - The Vue createElement function.
547
560
  * @return {ScopedSlots} The Scoped slots object.
548
561
  */
549
562
  slots(h) {
@@ -607,7 +620,7 @@ export default {
607
620
  scopedSlots.attachments_before = (attrs) => this.attachments_before.map((displayId) => h('DruxtView', {
608
621
  attrs: { ...attrs },
609
622
  key: displayId,
610
- ref: 'attachements_before',
623
+ ref: 'attachments_before',
611
624
  props: {
612
625
  displayId,
613
626
  langcode: this.lang,
@@ -664,7 +677,7 @@ export default {
664
677
  scopedSlots.attachments_after = (attrs) => this.attachments_after.map((displayId) => h('DruxtView', {
665
678
  attrs: { ...attrs },
666
679
  key: displayId,
667
- ref: 'attachements_after',
680
+ ref: 'attachments_after',
668
681
  props: {
669
682
  displayId,
670
683
  langcode: this.lang,
@@ -731,7 +744,7 @@ export default {
731
744
 
732
745
  /**
733
746
  * Provides settings for the View module, via the `nuxt.config.js` `druxt.views`
734
- * or the Wrapper component `druxt` object.
747
+ * or the wrapper component `druxt` object.
735
748
  *
736
749
  * @typedef {object} ModuleSettings
737
750
  * @param {object} query - View results query settings:
@@ -796,7 +809,7 @@ export default {
796
809
  */
797
810
 
798
811
  /**
799
- * Provides scoped slots for use in the Wrapper component.
812
+ * Provides scoped slots for use in the wrapper component.
800
813
  *
801
814
  * @typedef {object} ScopedSlots
802
815
  * @param {function} header - The View header.
@@ -30,6 +30,7 @@ export default {
30
30
  * Provides the available component naming options for the DruxtWrapper.
31
31
  *
32
32
  * @param {object} context - The module component ViewModel.
33
+ * @param {object} context.filter - The Exposed Filter object.
33
34
  * @returns {ComponentOptions}
34
35
  */
35
36
  componentOptions: ({ filter }) => ([
@@ -42,6 +43,8 @@ export default {
42
43
  * Provides propsData for the DruxtWrapper.
43
44
  *
44
45
  * @param {object} context - The module component ViewModel.
46
+ * @param {object} context.filter - The Exposed Filter object.
47
+ * @param {*} context.model - The DruxtViewsFilter model value.
45
48
  * @returns {PropsData}
46
49
  */
47
50
  propsData: ({ filter, model }) => ({ filter, value: model }),
@@ -60,6 +60,7 @@ export default {
60
60
  * Provides the available component naming options for the DruxtWrapper.
61
61
  *
62
62
  * @param {object} context - The module component ViewModel.
63
+ * @param {string} context.type - The Exposed form type.
63
64
  * @returns {ComponentOptions}
64
65
  */
65
66
  componentOptions: ({ type }) => ([[type], ['default']]),
@@ -68,6 +69,10 @@ export default {
68
69
  * Provides propsData for the DruxtWrapper.
69
70
  *
70
71
  * @param {object} context - The module component ViewModel.
72
+ * @param {object} context.options - The Exposed form options.
73
+ * @param {object[]} context.filters - The Exposed Filter objects.
74
+ * @param {object} context.model - The DruxtViewsFilters model value.
75
+ * @param {string} context.type - The Exposed form type.
71
76
  * @returns {PropsData}
72
77
  */
73
78
  propsData: ({ options, filters, model, type }) => ({ options, filters, type, value: model }),
@@ -86,6 +91,7 @@ export default {
86
91
  * </div>
87
92
  * </template>
88
93
  *
94
+ * @param {Function} h - The Vue createElement function.
89
95
  * @return {ScopedSlots} The Scoped slots object.
90
96
  */
91
97
  slots(h) {
@@ -179,7 +185,7 @@ export default {
179
185
  */
180
186
 
181
187
  /**
182
- * Provides scoped slots for use in the Wrapper component.
188
+ * Provides scoped slots for use in the wrapper component.
183
189
  *
184
190
  * @typedef {object} ScopedSlots
185
191
  * @param {function} [filter.expose.identifier] - Slot per filter.
@@ -113,6 +113,7 @@ export default {
113
113
  * Provides the available component naming options for the DruxtWrapper.
114
114
  *
115
115
  * @param {object} context - The module component ViewModel.
116
+ * @param {string} context.type - The Pager type.
116
117
  * @returns {ComponentOptions}
117
118
  */
118
119
  componentOptions: ({ type }) => ([[type], ['default']]),
@@ -121,6 +122,11 @@ export default {
121
122
  * Provides propsData for the DruxtWrapper.
122
123
  *
123
124
  * @param {object} context - The module component ViewModel.
125
+ * @param {boolean|number} context.count - The JSON:API Views results total count.
126
+ * @param {object} context.options - The Pager options.
127
+ * @param {object} context.resource - The JSON:API Views results resource.
128
+ * @param {string} context.type - The Pager type.
129
+ * @param {number} context.model - The DruxtViewsPager model value.
124
130
  * @returns {PropsData}
125
131
  */
126
132
  propsData: ({ count, options, resource, type, model }) => ({
@@ -136,6 +142,7 @@ export default {
136
142
  *
137
143
  * The `default` slot will render basic pagination based on the JSON:API links.
138
144
  *
145
+ * @param {Function} h - The Vue createElement function.
139
146
  * @return {ScopedSlots} The Scoped slots object.
140
147
  */
141
148
  slots(h) {
@@ -234,7 +241,7 @@ export default {
234
241
  */
235
242
 
236
243
  /**
237
- * Provides scoped slots for use in the Wrapper component.
244
+ * Provides scoped slots for use in the wrapper component.
238
245
  *
239
246
  * @typedef {object} ScopedSlots
240
247
  * @param {function} default - A JSON:API resource links based pager.
@@ -76,6 +76,7 @@ export default {
76
76
  * Provides the available component naming options for the DruxtWrapper.
77
77
  *
78
78
  * @param {object} context - The module component ViewModel.
79
+ * @param {string} context.type - The Exposed form type.
79
80
  * @returns {ComponentOptions}
80
81
  */
81
82
  componentOptions: ({ type }) => ([[type], ['default']]),
@@ -84,6 +85,10 @@ export default {
84
85
  * Provides propsData for the DruxtWrapper.
85
86
  *
86
87
  * @param {object} context - The module component ViewModel.
88
+ * @param {string} context.model - The selected sort ID.
89
+ * @param {object} context.options - The Exposed form options.
90
+ * @param {object[]} context.sorts - The Exposed Sort objects.
91
+ * @param {string} context.type - The Exposed form type.
87
92
  * @returns {PropsData}
88
93
  */
89
94
  propsData: ({ model, options, sorts, type }) => ({ options, sorts, type, value: model }),
@@ -93,6 +98,7 @@ export default {
93
98
  *
94
99
  * The `default` slot will render a list of sorts.
95
100
  *
101
+ * @param {Function} h - The Vue createElement function.
96
102
  * @return {ScopedSlots} The Scoped slots object.
97
103
  */
98
104
  slots(h) {
@@ -155,7 +161,7 @@ export default {
155
161
  * @param {object} options - The Exposed form options.
156
162
  * @param {object[]} sorts - The Exposed Sort objects.
157
163
  * @param {string} type - The Exposed form type.
158
- * @param {integer} value - The DruxtViewSorts model value.
164
+ * @param {string} value - The selected sort ID.
159
165
  *
160
166
  * @example @lang js
161
167
  * {
@@ -177,7 +183,7 @@ export default {
177
183
  */
178
184
 
179
185
  /**
180
- * Provides scoped slots for use in the Wrapper component.
186
+ * Provides scoped slots for use in the wrapper component.
181
187
  *
182
188
  * @typedef {object} ScopedSlots
183
189
  * @param {function} default - A list of sort links.
@@ -22,13 +22,13 @@ import { DruxtBlocksBlockMixin } from 'druxt-blocks'
22
22
  * uuid="43d613c6-ab66-453d-bce1-e1dfc990b4a1"
23
23
  * />
24
24
  *
25
- * @see {@link https://blocks.druxtjs.org/api/components/DruxtBlock|DruxtBlock}
25
+ * @see {@link https://druxtjs.org/api/packages/blocks/components/DruxtBlock|DruxtBlock}
26
26
  */
27
27
  export default {
28
28
  name: 'DruxtBlockViewsBlock',
29
29
 
30
30
  /**
31
- * @see {@link https://blocks.druxtjs.org/api/mixins/block|DruxtBlocksBlockMixin}
31
+ * @see {@link https://druxtjs.org/api/packages/blocks/mixins/block|DruxtBlocksBlockMixin}
32
32
  */
33
33
  mixins: [DruxtBlocksBlockMixin],
34
34
 
@@ -50,6 +50,7 @@ async function DruxtViewsStorybook({ stories }) {
50
50
  stories.push(resolve(options.buildDir, "./stories/druxt-views.*.stories.js"));
51
51
  }
52
52
 
53
+ const extendComponent = (component) => ({ ...component, isAsync: false });
53
54
  const DruxtViewsNuxtModule = async function(moduleOptions = {}) {
54
55
  const options = {
55
56
  baseUrl: moduleOptions.baseUrl,
@@ -61,8 +62,8 @@ const DruxtViewsNuxtModule = async function(moduleOptions = {}) {
61
62
  }
62
63
  };
63
64
  this.nuxt.hook("components:dirs", (dirs) => {
64
- dirs.push({ path: join(__dirname, "components") });
65
- dirs.push({ path: join(__dirname, "components/blocks") });
65
+ dirs.push({ path: join(__dirname, "components"), extendComponent });
66
+ dirs.push({ path: join(__dirname, "components/blocks"), extendComponent });
66
67
  });
67
68
  await this.addModule(["druxt", options]);
68
69
  const modules = ["druxt-entity", "druxt-schema"];
@@ -60,6 +60,7 @@ async function DruxtViewsStorybook({ stories }) {
60
60
  stories.push(path.resolve(options.buildDir, "./stories/druxt-views.*.stories.js"));
61
61
  }
62
62
 
63
+ const extendComponent = (component) => ({ ...component, isAsync: false });
63
64
  const DruxtViewsNuxtModule = async function(moduleOptions = {}) {
64
65
  const options = {
65
66
  baseUrl: moduleOptions.baseUrl,
@@ -71,8 +72,8 @@ const DruxtViewsNuxtModule = async function(moduleOptions = {}) {
71
72
  }
72
73
  };
73
74
  this.nuxt.hook("components:dirs", (dirs) => {
74
- dirs.push({ path: path.join(__dirname, "components") });
75
- dirs.push({ path: path.join(__dirname, "components/blocks") });
75
+ dirs.push({ path: path.join(__dirname, "components"), extendComponent });
76
+ dirs.push({ path: path.join(__dirname, "components/blocks"), extendComponent });
76
77
  });
77
78
  await this.addModule(["druxt", options]);
78
79
  const modules = ["druxt-entity", "druxt-schema"];
package/icon.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2
+ <rect stroke="#036397" x="4" y="4.25" width="4" height="4" rx="1" />
3
+ <rect stroke="#036397" x="4" y="10" width="4" height="4" rx="1" />
4
+ <rect stroke="#036397" x="4" y="15.75" width="4" height="4" rx="1" />
5
+ <path stroke="#3b8070" d="M11.5 6.25H20M11.5 12H20M11.5 17.75H20" />
6
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "druxt-views",
3
- "version": "0.22.2",
3
+ "version": "0.22.3-dev.20260920043715",
4
4
  "description": "Drupal Views components for Druxt with support for filters, pagination and sorting.",
5
5
  "keywords": [
6
6
  "cms",
@@ -27,6 +27,7 @@
27
27
  "url": "git+https://github.com/druxt/druxt.js"
28
28
  },
29
29
  "license": "MIT",
30
+ "author": "Stuart Clark <stuart@druxtjs.org>",
30
31
  "exports": {
31
32
  ".": {
32
33
  "require": "./dist/druxt-views.ssr.js",
@@ -38,20 +39,22 @@
38
39
  "module": "dist/druxt-views.esm.js",
39
40
  "files": [
40
41
  "dist",
41
- "templates"
42
+ "templates",
43
+ "icon.svg",
44
+ "banner.svg"
42
45
  ],
43
46
  "dependencies": {
44
- "axios": "0.27.2",
47
+ "axios": "0.33.0",
45
48
  "deepmerge": "^4.3.1",
46
- "drupal-jsonapi-params": "^2.2.0",
47
- "druxt": "^0.23.0",
48
- "druxt-blocks": "^0.17.3",
49
- "druxt-entity": "^0.28.1",
50
- "druxt-router": "^0.30.0",
49
+ "drupal-jsonapi-params": "^2.3.2",
50
+ "druxt": "0.24.1-dev.20260920043715",
51
+ "druxt-blocks": "0.17.4-dev.20260920043715",
52
+ "druxt-entity": "0.29.0-dev.20260920043715",
53
+ "druxt-router": "0.31.1-dev.20260920043715",
51
54
  "md5": "^2.3.0"
52
55
  },
53
56
  "optionalDependencies": {
54
- "vue": "^2.7.14",
57
+ "vue": "^2.7.16",
55
58
  "vuex": "^3.6.2"
56
59
  },
57
60
  "publishConfig": {