druxt-blocks 0.14.2 → 0.15.0

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.
@@ -5,13 +5,37 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
5
5
  import { mapActions } from 'vuex'
6
6
 
7
7
  /**
8
- * Renders a Drupal Block by UUID or Drupal's internal ID.
8
+ * The DruxtBlock component is used to render a Drupal Block by UUID or Drupal's
9
+ * internal ID.
9
10
  *
10
- * @example @lang vue
11
+ * While the DruxtBlock component can't automatically render every Drupal block,
12
+ * it does provide the Block settings to a targetted Druxt wrapper component for
13
+ * manual theming.
14
+ *
15
+ * @example <caption>Render a block using **id**</caption> @lang vue
11
16
  * <DruxtBlock id="umami_branding" />
12
17
  *
13
- * @example @lang vue
18
+ * @example <caption>Render a block using **uuid**</caption> @lang vue
14
19
  * <DruxtBlock uuid="59104acd-88e1-43c3-bd5f-35800f206394" />
20
+ *
21
+ * @example <caption>DruxtBlock Wrapper component boilerplate</caption> @lang vue
22
+ * <template>
23
+ * <DruxtDebug :json="block" />
24
+ * </template>
25
+ *
26
+ * <script>
27
+ * import { DruxtBlocksBlockMixin } from 'druxt-blocks'
28
+ * export default {
29
+ * mixins: [DruxtBlocksBlockMixin]
30
+ * }
31
+ *
32
+ * @example <caption>DruxtBlock with template injection</caption> @lang vue
33
+ * <DruxtBlock id="umami_branding">
34
+ * <template #default="{ block }">
35
+ * <!-- Do whatever you want here -->
36
+ * <DruxtDebug :json="block" />
37
+ * </template>
38
+ * </DruxtBlock>
15
39
  */
16
40
  export default {
17
41
  name: 'DruxtBlock',
@@ -38,6 +62,8 @@ export default {
38
62
  /**
39
63
  * The Block Entity UUID.
40
64
  *
65
+ * If used, the **id** prop will be ignored.
66
+ *
41
67
  * @type {string}
42
68
  *
43
69
  * @example @lang vue
@@ -71,6 +97,16 @@ export default {
71
97
  block: ({ resource }) => (resource || {}).data,
72
98
  },
73
99
 
100
+ watch: {
101
+ id() {
102
+ this.$fetch()
103
+ },
104
+
105
+ uuid() {
106
+ this.$fetch()
107
+ }
108
+ },
109
+
74
110
  methods: {
75
111
  /**
76
112
  * Maps Vuex action to methods.
@@ -92,6 +128,8 @@ export default {
92
128
  * @returns {ComponentOptions}
93
129
  */
94
130
  componentOptions: ({ block }) => {
131
+ if (!block) return []
132
+
95
133
  // Get Plugin and Plugin ID data.
96
134
  let plugin = block.attributes.plugin || ''
97
135
  let pluginId = null
@@ -164,13 +202,29 @@ export default {
164
202
  const scopedSlots = {}
165
203
 
166
204
  // Debug data.
167
- scopedSlots.debug = () => h('DruxtDebug',
168
- { props: { summary: `Missing wrapper component for '${((this.block || {}).attributes || {}).drupal_internal__id}'`} },
169
- [
170
- h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
171
- h('label', ['Block settings:', h('pre', [JSON.stringify(((this.block || {}).attributes || {}).settings, null, ' ')])])
205
+ /* @slot Debug information */
206
+ scopedSlots.default = () => {
207
+ let summary = `Placeholder for the '${((this.block || {}).attributes || {}).drupal_internal__id}' block.`
208
+ let description = [
209
+ h('p', 'DruxtBlocks knows that a block can be rendered, and has information provided by Drupal, but not enough to automatically determine the behaviour of the block.'),
210
+ h('p', 'To render this block manually, create a Nuxt component with one of the following component options.'),
172
211
  ]
173
- )
212
+
213
+ // Ensure an ID or UUID.
214
+ if (!this.id && !this.uuid) {
215
+ summary = "Missing required 'id' or 'uuid' prop."
216
+ description = [h('p', "The DruxtBlock component requires either the 'id' or 'uuid' prop to be set.")]
217
+ }
218
+
219
+ return h('DruxtDebug',
220
+ { props: { summary } },
221
+ [
222
+ h('div', description),
223
+ !!this.component.options.length && h('label', ['Component options:', h('ul', this.component.options.map((s) => h('li', [s])))]),
224
+ ((this.block || {}).attributes || {}).settings && h('label', ['Block settings:', h('pre', [JSON.stringify(this.block.attributes.settings, null, ' ')])])
225
+ ]
226
+ )
227
+ }
174
228
 
175
229
  return scopedSlots
176
230
  },
@@ -5,15 +5,33 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
5
5
  import { mapActions, mapState } from 'vuex'
6
6
 
7
7
  /**
8
- * Renders all visible blocks by theme and region name.
8
+ * The DruxtBlockRegion component renders visible blocks based on region and
9
+ * theme.
9
10
  *
10
- * Additional, non-visible blocks are available as slots and props data.
11
+ * All blocks, including those not visible, are provided as slots for the Druxt
12
+ * Wrapper component.
11
13
  *
12
14
  * @example @lang vue
13
- * <DruxtBlockRegion
14
- * name="header"
15
- * theme="umami"
16
- * />
15
+ * <DruxtBlockRegion name="header" theme="umami" />
16
+ *
17
+ * @example <caption>DruxtBlockRegion Wrapper component boilerplate</caption> @lang vue
18
+ * <template>
19
+ * <DruxtDebug :json="blocks" />
20
+ * </template>
21
+ *
22
+ * <script>
23
+ * import { DruxtBlocksRegionMixin } from 'druxt-blocks'
24
+ * export default {
25
+ * mixins: [DruxtBlocksRegionMixin]
26
+ * }
27
+ *
28
+ * @example <caption>DruxtBlockRegion with template injection</caption> @lang vue
29
+ * <DruxtBlock id="umami_branding">
30
+ * <template #default="{ block }">
31
+ * <!-- Do whatever you want here -->
32
+ * <DruxtDebug :json="block" />
33
+ * </template>
34
+ * </DruxtBlock>
17
35
  */
18
36
  export default {
19
37
  name: 'DruxtBlockRegion',
@@ -72,6 +90,16 @@ export default {
72
90
  })
73
91
  },
74
92
 
93
+ watch: {
94
+ name() {
95
+ this.$fetch()
96
+ },
97
+
98
+ theme() {
99
+ this.$fetch()
100
+ }
101
+ },
102
+
75
103
  methods: {
76
104
  /**
77
105
  * Checks if a given block shoud be visible.
@@ -8,24 +8,35 @@ async function DruxtBlocksStorybook({ stories }) {
8
8
  const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
9
9
  const query = new DrupalJsonApiParams().addFilter("status", true);
10
10
  const blocks = (await druxt.getCollectionAll("block--block", query)).map((collection) => collection.data).flat();
11
- const blockStories = blocks.map((block) => {
11
+ const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
12
+ addTemplate({
13
+ src: resolve(__dirname, `../templates/druxt-block.stories.js`),
14
+ fileName: `stories/druxt-block.stories.js`,
15
+ options: { blocks }
16
+ });
17
+ blocks.forEach((block) => {
12
18
  addTemplate({
13
- src: resolve(__dirname, `../templates/druxt-block.stories.js`),
19
+ src: resolve(__dirname, `../templates/druxt-block.instance.stories.js`),
14
20
  fileName: `stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`,
15
21
  options: {
16
22
  block,
17
23
  title: titleFn(["Druxt", "Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
18
24
  }
19
25
  });
20
- return resolve(options.buildDir, `./stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`);
21
26
  });
22
- stories.push.apply(stories, blockStories);
23
- const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
24
- const regionStories = themes.map((theme) => {
27
+ addTemplate({
28
+ src: resolve(__dirname, `../templates/druxt-block-region.stories.js`),
29
+ fileName: `stories/druxt-block-region.stories.js`,
30
+ options: {
31
+ regions: Array.from(new Set(blocks.map((o) => o.attributes.region))),
32
+ themes
33
+ }
34
+ });
35
+ themes.forEach((theme) => {
25
36
  const regions = Array.from(new Set(blocks.filter((o) => o.attributes.theme === theme).map((o) => o.attributes.region)));
26
- return regions.map((region) => {
37
+ regions.forEach((region) => {
27
38
  addTemplate({
28
- src: resolve(__dirname, `../templates/druxt-block-region.stories.js`),
39
+ src: resolve(__dirname, `../templates/druxt-block-region.instance.stories.js`),
29
40
  fileName: `stories/druxt-block-region.${theme}.${region}.stories.js`,
30
41
  options: {
31
42
  region,
@@ -33,10 +44,12 @@ async function DruxtBlocksStorybook({ stories }) {
33
44
  theme
34
45
  }
35
46
  });
36
- return resolve(options.buildDir, `./stories/druxt-block-region.${theme}.${region}.stories.js`);
37
47
  });
38
- }).flat();
39
- stories.push.apply(stories, regionStories);
48
+ });
49
+ stories.push(resolve(options.buildDir, `./stories/druxt-block.stories.js`));
50
+ stories.push(resolve(options.buildDir, `./stories/druxt-block-region.stories.js`));
51
+ stories.push(resolve(options.buildDir, `./stories/druxt-block.*.stories.js`));
52
+ stories.push(resolve(options.buildDir, `./stories/druxt-block-region.*.stories.js`));
40
53
  }
41
54
 
42
55
  const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
@@ -55,7 +68,6 @@ const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
55
68
  dirs.push({ path: join(__dirname, "components/blocks") });
56
69
  });
57
70
  this.nuxt.hook("storybook:config", async ({ stories }) => {
58
- stories.push("druxt-blocks/dist/components/*.stories.mjs");
59
71
  await DruxtBlocksStorybook.call(this, { stories });
60
72
  });
61
73
  };
@@ -75,5 +87,22 @@ const DruxtBlocksBlockMixin = {
75
87
  }
76
88
  };
77
89
 
90
+ const DruxtBlocksRegionMixin = {
91
+ props: {
92
+ blocks: {
93
+ type: Array,
94
+ required: true
95
+ },
96
+ name: {
97
+ type: String,
98
+ default: "content"
99
+ },
100
+ theme: {
101
+ type: String,
102
+ required: true
103
+ }
104
+ }
105
+ };
106
+
78
107
  export default DruxtBlocksNuxtModule;
79
- export { DruxtBlocksBlockMixin };
108
+ export { DruxtBlocksBlockMixin, DruxtBlocksRegionMixin };
@@ -12,24 +12,35 @@ async function DruxtBlocksStorybook({ stories }) {
12
12
  const druxt$1 = new druxt.DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
13
13
  const query = new drupalJsonapiParams.DrupalJsonApiParams().addFilter("status", true);
14
14
  const blocks = (await druxt$1.getCollectionAll("block--block", query)).map((collection) => collection.data).flat();
15
- const blockStories = blocks.map((block) => {
15
+ const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
16
+ addTemplate({
17
+ src: path.resolve(__dirname, `../templates/druxt-block.stories.js`),
18
+ fileName: `stories/druxt-block.stories.js`,
19
+ options: { blocks }
20
+ });
21
+ blocks.forEach((block) => {
16
22
  addTemplate({
17
- src: path.resolve(__dirname, `../templates/druxt-block.stories.js`),
23
+ src: path.resolve(__dirname, `../templates/druxt-block.instance.stories.js`),
18
24
  fileName: `stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`,
19
25
  options: {
20
26
  block,
21
27
  title: titleFn(["Druxt", "Blocks", block.attributes.theme, block.attributes.region, block.attributes.drupal_internal__id])
22
28
  }
23
29
  });
24
- return path.resolve(options.buildDir, `./stories/druxt-block.${block.attributes.drupal_internal__id}.stories.js`);
25
30
  });
26
- stories.push.apply(stories, blockStories);
27
- const themes = Array.from(new Set(blocks.map((o) => o.attributes.theme)));
28
- const regionStories = themes.map((theme) => {
31
+ addTemplate({
32
+ src: path.resolve(__dirname, `../templates/druxt-block-region.stories.js`),
33
+ fileName: `stories/druxt-block-region.stories.js`,
34
+ options: {
35
+ regions: Array.from(new Set(blocks.map((o) => o.attributes.region))),
36
+ themes
37
+ }
38
+ });
39
+ themes.forEach((theme) => {
29
40
  const regions = Array.from(new Set(blocks.filter((o) => o.attributes.theme === theme).map((o) => o.attributes.region)));
30
- return regions.map((region) => {
41
+ regions.forEach((region) => {
31
42
  addTemplate({
32
- src: path.resolve(__dirname, `../templates/druxt-block-region.stories.js`),
43
+ src: path.resolve(__dirname, `../templates/druxt-block-region.instance.stories.js`),
33
44
  fileName: `stories/druxt-block-region.${theme}.${region}.stories.js`,
34
45
  options: {
35
46
  region,
@@ -37,10 +48,12 @@ async function DruxtBlocksStorybook({ stories }) {
37
48
  theme
38
49
  }
39
50
  });
40
- return path.resolve(options.buildDir, `./stories/druxt-block-region.${theme}.${region}.stories.js`);
41
51
  });
42
- }).flat();
43
- stories.push.apply(stories, regionStories);
52
+ });
53
+ stories.push(path.resolve(options.buildDir, `./stories/druxt-block.stories.js`));
54
+ stories.push(path.resolve(options.buildDir, `./stories/druxt-block-region.stories.js`));
55
+ stories.push(path.resolve(options.buildDir, `./stories/druxt-block.*.stories.js`));
56
+ stories.push(path.resolve(options.buildDir, `./stories/druxt-block-region.*.stories.js`));
44
57
  }
45
58
 
46
59
  const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
@@ -59,7 +72,6 @@ const DruxtBlocksNuxtModule = function(moduleOptions = {}) {
59
72
  dirs.push({ path: path.join(__dirname, "components/blocks") });
60
73
  });
61
74
  this.nuxt.hook("storybook:config", async ({ stories }) => {
62
- stories.push("druxt-blocks/dist/components/*.stories.mjs");
63
75
  await DruxtBlocksStorybook.call(this, { stories });
64
76
  });
65
77
  };
@@ -79,5 +91,23 @@ const DruxtBlocksBlockMixin = {
79
91
  }
80
92
  };
81
93
 
94
+ const DruxtBlocksRegionMixin = {
95
+ props: {
96
+ blocks: {
97
+ type: Array,
98
+ required: true
99
+ },
100
+ name: {
101
+ type: String,
102
+ default: "content"
103
+ },
104
+ theme: {
105
+ type: String,
106
+ required: true
107
+ }
108
+ }
109
+ };
110
+
82
111
  exports.DruxtBlocksBlockMixin = DruxtBlocksBlockMixin;
112
+ exports.DruxtBlocksRegionMixin = DruxtBlocksRegionMixin;
83
113
  exports.default = DruxtBlocksNuxtModule;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "druxt-blocks",
3
- "version": "0.14.2",
3
+ "version": "0.15.0",
4
4
  "description": "Drupal Block and Block Region Druxt components.",
5
5
  "keywords": [
6
6
  "block",
@@ -44,9 +44,9 @@
44
44
  "dependencies": {
45
45
  "axios": "^0.21.1",
46
46
  "drupal-jsonapi-params": "^1.1.12",
47
- "druxt": "^0.14.0",
48
- "druxt-entity": "^0.21.3",
49
- "druxt-router": "^0.24.1"
47
+ "druxt": "^0.17.0",
48
+ "druxt-entity": "^0.24.0",
49
+ "druxt-router": "^0.26.0"
50
50
  },
51
51
  "optionalDependencies": {
52
52
  "vue": "^2.6.14",
@@ -0,0 +1,42 @@
1
+ import DruxtBlockRegion from 'druxt-blocks/dist/components/DruxtBlockRegion.vue'
2
+
3
+ export default {
4
+ title: '<%= options.title %>',
5
+ component: DruxtBlockRegion,
6
+ argTypes: {
7
+ name: {
8
+ control: false
9
+ },
10
+ theme: {
11
+ control: false
12
+ }
13
+ },
14
+ parameters: {
15
+ docs: {
16
+ description: {
17
+ component: 'Renders all visible blocks assigned to the **<%= options.region %>** region for the **<%= options.theme %>** theme.\n\n```jsx\n\n<DruxtBlockRegion name="<%= options.region %>" theme="<%= options.theme %>" />\n```'
18
+ },
19
+ },
20
+ },
21
+ }
22
+
23
+ const Template = (args, { argTypes }) => {
24
+ return {
25
+ props: Object.keys(argTypes),
26
+ template: '<DruxtBlockRegion v-bind="$props" v-on="$props" />',
27
+ }
28
+ }
29
+
30
+ export const Default = Template.bind({})
31
+ Default.args = {
32
+ name: '<%= options.region %>',
33
+ theme: '<%= options.theme %>',
34
+ }
35
+ Default.storyName = 'DruxtBlockRegion'
36
+ Default.parameters = {
37
+ docs: {
38
+ source: {
39
+ code: '<DruxtBlockRegion name="<%= options.region %>" theme="<%= options.theme %>" />'
40
+ }
41
+ }
42
+ }
@@ -1,35 +1,80 @@
1
1
  import DruxtBlockRegion from 'druxt-blocks/dist/components/DruxtBlockRegion.vue'
2
2
 
3
3
  export default {
4
- title: '<%= options.title %>',
4
+ title: 'Druxt/Blocks/DruxtBlockRegion',
5
5
  component: DruxtBlockRegion,
6
-
7
- parameters: {
8
- docs: {
9
- description: {
10
- component: 'The <strong><%= options.region %></strong> Block region for the <strong><%= options.theme %></strong> theme.'
11
- },
6
+ argTypes: {
7
+ name: {
8
+ options: [<%= (options.regions || []).map((s) => `'${s}'`).join(', ') %>],
9
+ control: {
10
+ type: 'select'
11
+ }
12
+ },
13
+ theme: {
14
+ options: [<%= (options.themes || []).map((s) => `'${s}'`).join(', ') %>],
15
+ control: {
16
+ type: 'select'
17
+ }
12
18
  },
13
- },
14
- }
15
-
16
- const Template = (args, { argTypes }) => {
17
- return {
18
- props: Object.keys(argTypes),
19
- template: '<DruxtBlockRegion v-bind="$props" v-on="$props" />',
20
19
  }
21
20
  }
22
21
 
22
+ const Template = (args, { argTypes }) => ({
23
+ components: { DruxtBlockRegion },
24
+ props: Object.keys(argTypes),
25
+ template: `<DruxtBlockRegion v-bind="$props" />`
26
+ })
27
+
23
28
  export const Default = Template.bind({})
24
- Default.args = {
25
- name: '<%= options.region %>',
26
- theme: '<%= options.theme %>',
27
- }
28
29
  Default.storyName = 'DruxtBlockRegion'
29
- Default.parameters = {
30
+
31
+ let code
32
+
33
+ // Wrapper story.
34
+ code = `<template>
35
+ <DruxtDebug :json="blocks" />
36
+ </template>
37
+
38
+ <script>
39
+ import { DruxtBlocksRegionMixin } from 'druxt-blocks'
40
+ export default {
41
+ mixins: [DruxtBlocksRegionMixin]
42
+ }
43
+ </script>`
44
+ export const Wrapper = (args, { argTypes }) => ({
45
+ components: { DruxtBlockRegion },
46
+ props: Object.keys(argTypes),
47
+ template: `<DruxtBlockRegion v-bind="$props" ref="module">
48
+ <template #default>
49
+ Component options:
50
+ <ul>
51
+ <li v-for="option of $refs.module.getModuleComponents()" :key="option.name">{{ option.name }}</li>
52
+ </ul>
53
+ </template>
54
+ </DruxtBlock>`
55
+ })
56
+ Wrapper.parameters = {
57
+ docs: {
58
+ storyDescription: 'The DruxtBlockRegion component can be themed by using a Druxt Wrapper component.\n\nCreate an appropriately named component, using the relevant component option, with the following boilerplate:\n\n```jsx\n' + code + '\n```',
59
+ source: { code }
60
+ }
61
+ }
62
+
63
+ // Template injection story.
64
+ code = `<DruxtBlockRegion theme="">
65
+ <template #default="{ blocks }">
66
+ <!-- Do whatever you want here -->
67
+ <DruxtDebug :json="blocks" open />
68
+ </template>
69
+ </DruxtBlockRegion>`
70
+ export const TemplateInjection = (args, { argTypes }) => ({
71
+ components: { DruxtBlockRegion },
72
+ props: Object.keys(argTypes),
73
+ template: code.replace('theme=""', 'v-bind="$props"')
74
+ })
75
+ TemplateInjection.parameters = {
30
76
  docs: {
31
- source: {
32
- code: '<DruxtBlockRegion name="<%= options.region %>" theme="<%= options.theme %>" />'
33
- }
77
+ storyDescription: 'The DruxtBlockRegion component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
78
+ source: { code }
34
79
  }
35
80
  }
@@ -0,0 +1,42 @@
1
+ import DruxtBlock from 'druxt-blocks/dist/components/DruxtBlock.vue'
2
+
3
+ const code = '<DruxtBlock id="<%= options.block.attributes.drupal_internal__id %>" />'
4
+
5
+ export default {
6
+ title: '<%= options.title %>',
7
+ component: DruxtBlock,
8
+ argTypes: {
9
+ id: {
10
+ control: false,
11
+ },
12
+ uuid: {
13
+ control: false,
14
+ },
15
+ },
16
+ parameters: {
17
+ docs: {
18
+ description: {
19
+ component: 'Renders the **<%= options.block.attributes.settings.label || options.block.attributes.drupal_internal__id %>** block.\n\n```jsx\n\n' + code + '\n```'
20
+ },
21
+ },
22
+ },
23
+ }
24
+
25
+ const Template = (args, { argTypes }) => {
26
+ return {
27
+ props: Object.keys(argTypes),
28
+ template: '<DruxtBlock v-bind="$props" v-on="$props" />',
29
+ }
30
+ }
31
+
32
+ export const Default = Template.bind({})
33
+ Default.args = {
34
+ id: '<%= options.block.attributes.drupal_internal__id %>',
35
+ uuid: '<%= options.block.id %>',
36
+ }
37
+ Default.storyName = 'DruxtBlock'
38
+ Default.parameters = {
39
+ docs: {
40
+ source: { code }
41
+ }
42
+ }
@@ -1,34 +1,79 @@
1
1
  import DruxtBlock from 'druxt-blocks/dist/components/DruxtBlock.vue'
2
2
 
3
3
  export default {
4
- title: '<%= options.title %>',
4
+ title: 'Druxt/Blocks/DruxtBlock',
5
5
  component: DruxtBlock,
6
- parameters: {
7
- docs: {
8
- description: {
9
- component: ' '
10
- },
6
+ argTypes: {
7
+ id: {
8
+ options: [<%= (options.blocks || []).map((o) => `'${o.attributes.drupal_internal__id}'`).join(', ') %>],
9
+ control: {
10
+ type: 'select'
11
+ }
11
12
  },
12
- },
13
+ uuid: {
14
+ options: [<%= (options.blocks || []).map((o) => `'${o.id}'`).join(', ') %>],
15
+ control: {
16
+ type: 'select'
17
+ }
18
+ }
19
+ }
13
20
  }
14
21
 
15
- const Template = (args, { argTypes }) => {
16
- return {
17
- props: Object.keys(argTypes),
18
- template: '<DruxtBlock v-bind="$props" v-on="$props" />',
22
+ // Default story.
23
+ export const Default = (args, { argTypes }) => ({
24
+ components: { DruxtBlock },
25
+ props: Object.keys(argTypes),
26
+ template: `<DruxtBlock v-bind="$props" />`
27
+ })
28
+
29
+ let code
30
+
31
+ // Wrapper story.
32
+ code = `<template>
33
+ <DruxtDebug :json="block" />
34
+ </template>
35
+
36
+ <script>
37
+ import { DruxtBlocksBlockMixin } from 'druxt-blocks'
38
+ export default {
39
+ mixins: [DruxtBlocksBlockMixin]
40
+ }
41
+ </script>`
42
+ export const Wrapper = (args, { argTypes }) => ({
43
+ components: { DruxtBlock },
44
+ props: Object.keys(argTypes),
45
+ template: `<DruxtBlock v-bind="$props" ref="module">
46
+ <template #default>
47
+ Component options:
48
+ <ul>
49
+ <li v-for="option of $refs.module.getModuleComponents()" :key="option.name">{{ option.name }}</li>
50
+ </ul>
51
+ </template>
52
+ </DruxtBlock>`
53
+ })
54
+ Wrapper.parameters = {
55
+ docs: {
56
+ storyDescription: 'The DruxtBlock component can be themed by using a Druxt Wrapper component.\n\nCreate an appropriately named component, using the relevant component option, with the following boilerplate:\n\n```jsx\n' + code + '\n```',
57
+ source: { code }
19
58
  }
20
59
  }
21
60
 
22
- export const Default = Template.bind({})
23
- Default.args = {
24
- id: '<%= options.block.attributes.drupal_internal__id %>',
25
- uuid: '<%= options.block.id %>',
26
- }
27
- Default.storyName = 'DruxtBlock'
28
- Default.parameters = {
61
+ // Template injection story.
62
+ code = `<DruxtBlock id="">
63
+ <template #default="{ block }">
64
+ <!-- Do whatever you want here -->
65
+ <DruxtDebug :json="block" open />
66
+ </template>
67
+ </DruxtBlock>`
68
+ export const TemplateInjection = (args, { argTypes }) => ({
69
+ components: { DruxtBlock },
70
+ props: Object.keys(argTypes),
71
+ template: code.replace('id=""', 'v-bind="$props"')
72
+ })
73
+ TemplateInjection.parameters = {
29
74
  docs: {
30
- source: {
31
- code: '<DruxtBlock id="<%= options.block.attributes.drupal_internal__id %>" />'
32
- }
75
+ storyDescription: 'The DruxtBlock component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
76
+ source: { code }
33
77
  }
34
78
  }
79
+
package/CHANGELOG.md DELETED
@@ -1,238 +0,0 @@
1
- # druxt-blocks
2
-
3
- ## 0.14.2
4
-
5
- ### Patch Changes
6
-
7
- - Updated dependencies [45bc0b9]
8
- - druxt@0.14.0
9
- - druxt-entity@0.21.3
10
- - druxt-router@0.24.1
11
-
12
- ## 0.14.1
13
-
14
- ### Patch Changes
15
-
16
- - Updated dependencies [9161b38]
17
- - druxt-router@0.24.0
18
- - druxt-entity@0.21.2
19
-
20
- ## 0.14.0
21
-
22
- ### Minor Changes
23
-
24
- - e7b1533: Refactored DruxtModule fetch hooks
25
-
26
- ### Patch Changes
27
-
28
- - Updated dependencies [025315a]
29
- - druxt-entity@0.21.0
30
- - druxt@0.13.0
31
- - druxt-router@0.23.0
32
-
33
- ## 0.13.1
34
-
35
- ### Patch Changes
36
-
37
- - Updated dependencies [4504a2f]
38
- - druxt@0.12.0
39
- - druxt-router@0.22.0
40
- - druxt-entity@0.20.0
41
-
42
- ## 0.13.0
43
-
44
- ### Minor Changes
45
-
46
- - dae345e: Moved `$druxtBlocks` plugin settings to `$druxt.settings.blocks`
47
- - dae345e: Added module level options
48
- - 8d28c18: Updated storybook integration
49
-
50
- ### Patch Changes
51
-
52
- - Updated dependencies [9d905e8]
53
- - druxt-router@0.21.0
54
- - druxt-entity@0.19.0
55
- - druxt@0.11.0
56
-
57
- ## 0.12.0
58
-
59
- ### Minor Changes
60
-
61
- - 715e5ef: Updated component registration method to use the Nuxt `components:dirs` hook
62
- - 2b8c3f3: Updated to use DruxtDebug component
63
-
64
- ### Patch Changes
65
-
66
- - 49454cb: Fixed path to components in Storybook
67
- - Updated dependencies [1ab762c]
68
- - druxt-router@0.20.0
69
- - druxt@0.10.0
70
- - druxt-entity@0.18.0
71
-
72
- ## 0.11.1
73
-
74
- ### Patch Changes
75
-
76
- - c4616df: Fixed dependencies
77
- - Updated dependencies [c4616df]
78
- - druxt-entity@0.17.1
79
- - druxt-router@0.19.1
80
-
81
- ## 0.11.0
82
-
83
- ### Minor Changes
84
-
85
- - 21170fb: Moved Vue components out of bundle
86
-
87
- ⚠ Potential breaking change
88
-
89
- _**Note:** This only effects custom Druxt modules and implementations._
90
-
91
- ```diff
92
- -import { DruxtBlock } from 'druxt-blocks'
93
- +import DruxtBlock from 'druxt-blocks/dist/components/DruxtBlock.vue'
94
- ```
95
-
96
- ### Patch Changes
97
-
98
- - Updated dependencies [21170fb]
99
- - druxt@0.9.0
100
- - druxt-entity@0.17.0
101
- - druxt-router@0.19.0
102
-
103
- ## 0.10.0
104
-
105
- ### Minor Changes
106
-
107
- - Added support for default template injection
108
- - For details, see the [Druxt 0.8.0 release notes](/api/packages/druxt/CHANGELOG#080)
109
-
110
- ## 0.9.2
111
-
112
- ### Patch Changes
113
-
114
- - Additional hydration fixes
115
-
116
- ## 0.9.1
117
-
118
- ### Patch Changes
119
-
120
- - Added fetchKey to fix hydration issues
121
-
122
- ## 0.9.0
123
-
124
- ### Minor Changes
125
-
126
- - Added ability to load block by Drupal internal ID
127
- - Added ability to filter block query fields
128
- - Added Storybook integration
129
- - Updated DruxtBlock and DruxtBlockRegion to use DruxtModule
130
- - Updated documentation
131
-
132
- ## 0.8.1
133
-
134
- ### Patch Changes
135
-
136
- - Fixed issue with incorrect sorting of blocks in DruxtBlockRegion component
137
-
138
- ## 0.8.0
139
-
140
- ### Minor Changes
141
-
142
- - Added support for DruxtClient and DruxtStore
143
-
144
- ## 0.7.5
145
-
146
- ### Patch Changes
147
-
148
- - Updated depedencies
149
-
150
- ## 0.7.4
151
-
152
- ### Patch Changes
153
-
154
- - Updated depedencies
155
-
156
- ## 0.7.3
157
-
158
- ### Patch Changes
159
-
160
- - Fixed class and style binding
161
-
162
- ## 0.7.2
163
-
164
- ### Patch Changes
165
-
166
- - Added class and style binding
167
-
168
- ## 0.7.1
169
-
170
- ### Patch Changes
171
-
172
- - Fixed issue with Block wrapper
173
-
174
- ## 0.7.0
175
-
176
- ### Minor Changes
177
-
178
- - Added DruxtWrapper support to Block and BlockRegion components
179
- - Removed support for DruxtCommonWrapper (deprecated)
180
-
181
- ## 0.6.1
182
-
183
- ### Patch Changes
184
-
185
- - Updated dependencies
186
-
187
- ## 0.6.0
188
-
189
- ### Minor Changes
190
-
191
- - Added scoped slots per block to BlockRegion component
192
-
193
- _**Example:** DruxtBlockRegion wrapper component with scoped slots_
194
-
195
- ```vue
196
- <template>
197
- <div>
198
- <slot :name="block_id" />
199
- </div>
200
- </template>
201
- ```
202
-
203
- - Added support for DruxtCommonWrapper
204
-
205
- ## 0.5.0
206
-
207
- ### Minor Changes
208
-
209
- - Refactored to use Nuxt fetch hook
210
- - Updated dependencies
211
-
212
- ## 0.4.1
213
-
214
- ### Patch Changes
215
-
216
- - Updated dependencies
217
-
218
- ## 0.4.0
219
-
220
- ### Minor Changes
221
-
222
- - Added default Page Title block
223
-
224
- ## 0.3.0
225
-
226
- ### Minor Changes
227
-
228
- - Added watch to update DruxtBlockRegion data on route change
229
-
230
- ## 0.2.0
231
-
232
- ### Minor Changes
233
-
234
- - Added default Block Content entity block
235
-
236
- ## 0.1.0
237
-
238
- ### Initial release
@@ -1,15 +0,0 @@
1
- import DruxtBlock from './DruxtBlock.vue'
2
-
3
- export default {
4
- title: 'Druxt/Blocks/DruxtBlock',
5
- component: DruxtBlock
6
- }
7
-
8
- const Template = (args, { argTypes }) => ({
9
- components: { DruxtBlock },
10
- props: Object.keys(argTypes),
11
- template: `<DruxtBlock v-bind="$props" />`
12
- })
13
-
14
- export const Default = Template.bind({})
15
- Default.storyName = 'DruxtBlock'
@@ -1,15 +0,0 @@
1
- import DruxtBlockRegion from './DruxtBlockRegion.vue'
2
-
3
- export default {
4
- title: 'Druxt/Blocks/DruxtBlockRegion',
5
- component: DruxtBlockRegion
6
- }
7
-
8
- const Template = (args, { argTypes }) => ({
9
- components: { DruxtBlockRegion },
10
- props: Object.keys(argTypes),
11
- template: `<DruxtBlockRegion v-bind="$props" />`
12
- })
13
-
14
- export const Default = Template.bind({})
15
- Default.storyName = 'DruxtBlockRegion'