vue-datocms 1.0.5 → 1.1.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.
- package/README.md +67 -55
- package/dist/index.d.ts +13 -3
- package/dist/index.esm.js +71 -56
- package/dist/index.min.js +69 -54
- package/dist/index.umd.js +69 -54
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessy with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api).
|
|
6
6
|
|
|
7
|
-
- Works with both Vue 2 and Vue 3;
|
|
7
|
+
- Works with both Vue 2 (only on JS projects, not TypeScript) and Vue 3;
|
|
8
8
|
- TypeScript ready;
|
|
9
9
|
- Compatible with any data-fetching library (axios, Apollo);
|
|
10
10
|
- Usable both client and server side;
|
|
@@ -12,7 +12,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
12
12
|
|
|
13
13
|
<br /><br />
|
|
14
14
|
<a href="https://www.datocms.com/">
|
|
15
|
-
|
|
15
|
+
<img src="https://www.datocms.com/images/full_logo.svg" height="60">
|
|
16
16
|
</a>
|
|
17
17
|
<br /><br />
|
|
18
18
|
|
|
@@ -53,7 +53,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
|
|
|
53
53
|
npm install vue-datocms
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3.
|
|
56
|
+
In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3. Please note that with Vue 2 support is limited to JS-only projects. TypeScript + Vue 2 is not supported at the moment, sorry.
|
|
57
57
|
|
|
58
58
|
## Live real-time updates
|
|
59
59
|
|
|
@@ -79,19 +79,25 @@ In Vue.js v3, `subscribeToQuery` can be used to implement a custom hook. Please
|
|
|
79
79
|
|
|
80
80
|
### Out-of-the-box features
|
|
81
81
|
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
- Efficiently lazy
|
|
85
|
-
-
|
|
86
|
-
-
|
|
82
|
+
- Offers WebP version of images for browsers that support the format
|
|
83
|
+
- Generates multiple smaller images so smartphones and tablets don’t download desktop-sized images
|
|
84
|
+
- Efficiently lazy loads images to speed initial page load and save bandwidth
|
|
85
|
+
- Holds the image position so your page doesn’t jump while images load
|
|
86
|
+
- Uses either blur-up or background color techniques to show a preview of the image while it loads
|
|
87
|
+
|
|
88
|
+
## Intersection Observer
|
|
89
|
+
|
|
90
|
+
Intersection Observer is the API used to determine if the image is inside the viewport or not. [Browser support is really good](https://caniuse.com/intersectionobserver) - With Safari adding support in 12.1, all major browsers now support Intersection Observers natively.
|
|
91
|
+
|
|
92
|
+
If the IntersectionObserver object is not available, the component treats the image as it's always visible in the viewport. Feel free to add a [polyfill](https://www.npmjs.com/package/intersection-observer) so that it will also 100% work on older versions of iOS and IE11.
|
|
87
93
|
|
|
88
94
|
### Setup
|
|
89
95
|
|
|
90
96
|
You can register the component globally so it's available in all your apps:
|
|
91
97
|
|
|
92
98
|
```js
|
|
93
|
-
import Vue from
|
|
94
|
-
import { DatocmsImagePlugin } from
|
|
99
|
+
import Vue from 'vue';
|
|
100
|
+
import { DatocmsImagePlugin } from 'vue-datocms';
|
|
95
101
|
|
|
96
102
|
Vue.use(DatocmsImagePlugin);
|
|
97
103
|
```
|
|
@@ -99,11 +105,11 @@ Vue.use(DatocmsImagePlugin);
|
|
|
99
105
|
Or use it locally in any of your components:
|
|
100
106
|
|
|
101
107
|
```js
|
|
102
|
-
import { Image } from
|
|
108
|
+
import { Image } from 'vue-datocms';
|
|
103
109
|
|
|
104
110
|
export default {
|
|
105
111
|
components: {
|
|
106
|
-
|
|
112
|
+
'datocms-image': Image,
|
|
107
113
|
},
|
|
108
114
|
};
|
|
109
115
|
```
|
|
@@ -130,8 +136,8 @@ For a fully working example take a look at our [examples directory](https://gith
|
|
|
130
136
|
</template>
|
|
131
137
|
|
|
132
138
|
<script>
|
|
133
|
-
import { request } from
|
|
134
|
-
import { Image } from
|
|
139
|
+
import { request } from './lib/datocms';
|
|
140
|
+
import { Image } from 'vue-datocms';
|
|
135
141
|
|
|
136
142
|
const query = gql`
|
|
137
143
|
query {
|
|
@@ -169,7 +175,7 @@ const query = gql`
|
|
|
169
175
|
|
|
170
176
|
export default {
|
|
171
177
|
components: {
|
|
172
|
-
|
|
178
|
+
'datocms-image': Image,
|
|
173
179
|
},
|
|
174
180
|
data() {
|
|
175
181
|
return {
|
|
@@ -249,8 +255,8 @@ For a working example take a look at our [examples directory](https://github.com
|
|
|
249
255
|
</template>
|
|
250
256
|
|
|
251
257
|
<script>
|
|
252
|
-
import { request } from
|
|
253
|
-
import { toHead } from
|
|
258
|
+
import { request } from './lib/datocms';
|
|
259
|
+
import { toHead } from 'vue-datocms';
|
|
254
260
|
|
|
255
261
|
const query = gql`
|
|
256
262
|
query {
|
|
@@ -301,8 +307,8 @@ export default {
|
|
|
301
307
|
You can register the component globally so it's available in all your apps:
|
|
302
308
|
|
|
303
309
|
```js
|
|
304
|
-
import Vue from
|
|
305
|
-
import { DatocmsStructuredTextPlugin } from
|
|
310
|
+
import Vue from 'vue';
|
|
311
|
+
import { DatocmsStructuredTextPlugin } from 'vue-datocms';
|
|
306
312
|
|
|
307
313
|
Vue.use(DatocmsStructuredTextPlugin);
|
|
308
314
|
```
|
|
@@ -310,11 +316,11 @@ Vue.use(DatocmsStructuredTextPlugin);
|
|
|
310
316
|
Or use it locally in any of your components:
|
|
311
317
|
|
|
312
318
|
```js
|
|
313
|
-
import { StructuredText } from
|
|
319
|
+
import { StructuredText } from 'vue-datocms';
|
|
314
320
|
|
|
315
321
|
export default {
|
|
316
322
|
components: {
|
|
317
|
-
|
|
323
|
+
'datocms-structured-text': StructuredText,
|
|
318
324
|
},
|
|
319
325
|
};
|
|
320
326
|
```
|
|
@@ -336,8 +342,8 @@ export default {
|
|
|
336
342
|
</template>
|
|
337
343
|
|
|
338
344
|
<script>
|
|
339
|
-
import { request } from
|
|
340
|
-
import { StructuredText } from
|
|
345
|
+
import { request } from './lib/datocms';
|
|
346
|
+
import { StructuredText } from 'vue-datocms';
|
|
341
347
|
|
|
342
348
|
const query = gql`
|
|
343
349
|
query {
|
|
@@ -352,7 +358,7 @@ const query = gql`
|
|
|
352
358
|
|
|
353
359
|
export default {
|
|
354
360
|
components: {
|
|
355
|
-
|
|
361
|
+
'datocms-structured-text': StructuredText,
|
|
356
362
|
},
|
|
357
363
|
data() {
|
|
358
364
|
return {
|
|
@@ -425,9 +431,9 @@ You can also pass custom renderers for special nodes (inline records, record lin
|
|
|
425
431
|
</template>
|
|
426
432
|
|
|
427
433
|
<script>
|
|
428
|
-
import { request } from
|
|
429
|
-
import { StructuredText, Image } from
|
|
430
|
-
import { h } from
|
|
434
|
+
import { request } from './lib/datocms';
|
|
435
|
+
import { StructuredText, Image } from 'vue-datocms';
|
|
436
|
+
import { h } from 'vue-demi';
|
|
431
437
|
|
|
432
438
|
const query = gql`
|
|
433
439
|
query {
|
|
@@ -448,7 +454,9 @@ const query = gql`
|
|
|
448
454
|
... on ImageRecord {
|
|
449
455
|
id
|
|
450
456
|
image {
|
|
451
|
-
responsiveImage(
|
|
457
|
+
responsiveImage(
|
|
458
|
+
imgixParams: { fit: crop, w: 300, h: 300, auto: format }
|
|
459
|
+
) {
|
|
452
460
|
srcSet
|
|
453
461
|
webpSrcSet
|
|
454
462
|
sizes
|
|
@@ -470,8 +478,8 @@ const query = gql`
|
|
|
470
478
|
|
|
471
479
|
export default {
|
|
472
480
|
components: {
|
|
473
|
-
|
|
474
|
-
|
|
481
|
+
'datocms-structured-text': StructuredText,
|
|
482
|
+
'datocms-image': Image,
|
|
475
483
|
},
|
|
476
484
|
data() {
|
|
477
485
|
return {
|
|
@@ -481,21 +489,17 @@ export default {
|
|
|
481
489
|
methods: {
|
|
482
490
|
renderInlineRecord: ({ record }) => {
|
|
483
491
|
switch (record.__typename) {
|
|
484
|
-
case
|
|
485
|
-
return h(
|
|
486
|
-
"a",
|
|
487
|
-
{ href: `/team/${record.slug}` },
|
|
488
|
-
record.firstName,
|
|
489
|
-
);
|
|
492
|
+
case 'TeamMemberRecord':
|
|
493
|
+
return h('a', { href: `/team/${record.slug}` }, record.firstName);
|
|
490
494
|
default:
|
|
491
495
|
return null;
|
|
492
496
|
}
|
|
493
497
|
},
|
|
494
498
|
renderLinkToRecord: ({ record, children, transformedMeta }) => {
|
|
495
499
|
switch (record.__typename) {
|
|
496
|
-
case
|
|
500
|
+
case 'TeamMemberRecord':
|
|
497
501
|
return h(
|
|
498
|
-
|
|
502
|
+
'a',
|
|
499
503
|
{ ...transformedMeta, href: `/team/${record.slug}` },
|
|
500
504
|
children,
|
|
501
505
|
);
|
|
@@ -505,8 +509,8 @@ export default {
|
|
|
505
509
|
},
|
|
506
510
|
renderBlock: ({ record }) => {
|
|
507
511
|
switch (record.__typename) {
|
|
508
|
-
case
|
|
509
|
-
return h(
|
|
512
|
+
case 'ImageRecord':
|
|
513
|
+
return h('datocms-image', {
|
|
510
514
|
data: record.image.responsiveImage,
|
|
511
515
|
});
|
|
512
516
|
default:
|
|
@@ -583,18 +587,19 @@ This component automatically renders all nodes except for `inline_item`, `item_l
|
|
|
583
587
|
- For `heading` nodes, you might want to add an anchor;
|
|
584
588
|
- For `code` nodes, you might want to use a custom sytax highlighting component;
|
|
585
589
|
|
|
586
|
-
In this case, you can easily override default rendering rules with the `
|
|
590
|
+
In this case, you can easily override default rendering rules with the `customNodeRules` and `customMarkRules` props.
|
|
587
591
|
|
|
588
592
|
```vue
|
|
589
593
|
<template>
|
|
590
594
|
<datocms-structured-text
|
|
591
595
|
:data="data.blogPost.content"
|
|
592
|
-
:
|
|
596
|
+
:customNodeRules="customNodeRules"
|
|
597
|
+
:customMarkRules="customMarkRules"
|
|
593
598
|
/>
|
|
594
599
|
</template>
|
|
595
600
|
|
|
596
601
|
<script>
|
|
597
|
-
import { StructuredText,
|
|
602
|
+
import { StructuredText, renderNodeRule, renderMarkRule } from "vue-datocms";
|
|
598
603
|
import { isHeading, isCode } from "datocms-structured-text-utils";
|
|
599
604
|
import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
|
|
600
605
|
import SyntaxHighlight from './components/SyntaxHighlight';
|
|
@@ -607,8 +612,8 @@ export default {
|
|
|
607
612
|
data() {
|
|
608
613
|
return {
|
|
609
614
|
data: /* ... */,
|
|
610
|
-
|
|
611
|
-
|
|
615
|
+
customNodeRules: [
|
|
616
|
+
renderNodeRule(isHeading, ({ adapter: { renderNode: h }, node, children, key }) => {
|
|
612
617
|
const anchor = toPlainText(node)
|
|
613
618
|
.toLowerCase()
|
|
614
619
|
.replace(/ /g, '-')
|
|
@@ -622,7 +627,7 @@ export default {
|
|
|
622
627
|
]
|
|
623
628
|
);
|
|
624
629
|
}),
|
|
625
|
-
|
|
630
|
+
renderNodeRule(isCode, ({ adapter: { renderNode: h }, node, key }) => {
|
|
626
631
|
return h('syntax-highlight', {
|
|
627
632
|
key,
|
|
628
633
|
code: node.code,
|
|
@@ -631,6 +636,12 @@ export default {
|
|
|
631
636
|
}, []);
|
|
632
637
|
}),
|
|
633
638
|
],
|
|
639
|
+
customMarkRules: [
|
|
640
|
+
// convert "strong" marks into <b> tags
|
|
641
|
+
renderMarkRule('strong', ({ adapter: { renderNode: h }, mark, children, key }) => {
|
|
642
|
+
return h('b', {key}, children);
|
|
643
|
+
}),
|
|
644
|
+
],
|
|
634
645
|
};
|
|
635
646
|
},
|
|
636
647
|
};
|
|
@@ -641,12 +652,13 @@ Note: if you override the rules for `inline_item`, `item_link` or `block` nodes,
|
|
|
641
652
|
|
|
642
653
|
## Props
|
|
643
654
|
|
|
644
|
-
| prop | type
|
|
645
|
-
| ------------------ |
|
|
646
|
-
| data | `StructuredTextGraphQlResponse \| DastNode`
|
|
647
|
-
| renderInlineRecord | `({ record }) => VNode \| null`
|
|
648
|
-
| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null`
|
|
649
|
-
| renderBlock | `({ record }) => VNode \| null`
|
|
650
|
-
| metaTransformer | `({ node, meta }) => Object \| null`
|
|
651
|
-
|
|
|
652
|
-
|
|
|
655
|
+
| prop | type | required | description | default |
|
|
656
|
+
| ------------------ | ---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
|
|
657
|
+
| data | `StructuredTextGraphQlResponse \| DastNode` | :white_check_mark: | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS | |
|
|
658
|
+
| renderInlineRecord | `({ record }) => VNode \| null` | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into a VNode | `[]` |
|
|
659
|
+
| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null` | Only required if document contains `itemLink` nodes | Convert an `itemLink` DAST node into a VNode | `null` |
|
|
660
|
+
| renderBlock | `({ record }) => VNode \| null` | Only required if document contains `block` nodes | Convert a `block` DAST node into a VNode | `null` |
|
|
661
|
+
| metaTransformer | `({ node, meta }) => Object \| null` | :x: | Transform `link` and `itemLink` meta property into HTML props | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
|
|
662
|
+
| customNodeRules | `Array<RenderRule>` | :x: | Customize how nodes are converted in JSX (use `renderNodeRule()` to generate) | `null` |
|
|
663
|
+
| customMarkRules | `Array<RenderMarkRule>` | :x: | Customize how marks are converted in JSX (use `renderMarkRule()` to generate) | `null` |
|
|
664
|
+
| renderText | `(text: string, key: string) => VNode \| string \| null` | :x: | Convert a simple string text into a VNode | `(text) => text` |
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as vue_demi from 'vue-demi';
|
|
2
2
|
import { PropType, VNodeProps, VNode } from 'vue-demi';
|
|
3
|
-
import { TransformedMeta, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
|
|
4
|
-
export { renderRule } from 'datocms-structured-text-generic-html-renderer';
|
|
3
|
+
import { TransformedMeta, RenderMarkRule, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
|
|
4
|
+
export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
|
|
5
5
|
import { Record as Record$1, RenderResult, StructuredText as StructuredText$1, Document, Node, RenderRule } from 'datocms-structured-text-utils';
|
|
6
6
|
export { RenderError, Document as StructuredTextDocument, StructuredText as StructuredTextGraphQlResponse } from 'datocms-structured-text-utils';
|
|
7
7
|
|
|
@@ -125,10 +125,18 @@ declare const StructuredText: vue_demi.DefineComponent<{
|
|
|
125
125
|
data: {
|
|
126
126
|
type: PropType<StructuredText$1<Record$1> | Document | Node | null | undefined>;
|
|
127
127
|
};
|
|
128
|
-
/**
|
|
128
|
+
/** @deprecated use customNodeRules **/
|
|
129
129
|
customRules: {
|
|
130
130
|
type: PropType<RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
|
|
131
131
|
};
|
|
132
|
+
/** A set of additional rules to convert the document to JSX **/
|
|
133
|
+
customNodeRules: {
|
|
134
|
+
type: PropType<RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
|
|
135
|
+
};
|
|
136
|
+
/** A set of additional rules to convert the document to JSX **/
|
|
137
|
+
customMarkRules: {
|
|
138
|
+
type: PropType<RenderMarkRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
|
|
139
|
+
};
|
|
132
140
|
/** Fuction that converts an 'inlineItem' node into React **/
|
|
133
141
|
renderInlineRecord: {
|
|
134
142
|
type: PropType<(context: RenderInlineRecordContext) => AdapterReturn>;
|
|
@@ -160,6 +168,8 @@ declare const StructuredText: vue_demi.DefineComponent<{
|
|
|
160
168
|
}, () => RenderResult<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {
|
|
161
169
|
data?: StructuredText$1<Record$1> | Document | Node | null | undefined;
|
|
162
170
|
customRules?: RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
|
|
171
|
+
customNodeRules?: RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
|
|
172
|
+
customMarkRules?: RenderMarkRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
|
|
163
173
|
renderInlineRecord?: ((context: RenderInlineRecordContext) => AdapterReturn) | undefined;
|
|
164
174
|
renderLinkToRecord?: ((context: RenderRecordLinkContext) => AdapterReturn) | undefined;
|
|
165
175
|
renderBlock?: ((context: RenderBlockContext) => AdapterReturn) | undefined;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import hypenateStyleName from 'hyphenate-style-name';
|
|
2
2
|
import { isVue3, h, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue-demi';
|
|
3
|
-
import { render,
|
|
4
|
-
export { renderRule } from 'datocms-structured-text-generic-html-renderer';
|
|
5
|
-
import { isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
|
|
3
|
+
import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
|
|
4
|
+
export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
|
|
5
|
+
import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
|
|
6
6
|
export { RenderError } from 'datocms-structured-text-utils';
|
|
7
7
|
|
|
8
8
|
var __defProp$2 = Object.defineProperty;
|
|
@@ -348,7 +348,7 @@ const hAdapter = (tagName, props, childOrChildren) => {
|
|
|
348
348
|
const defaultAdapter = {
|
|
349
349
|
renderNode: hAdapter,
|
|
350
350
|
renderMark: hAdapter,
|
|
351
|
-
renderFragment: (children, key) =>
|
|
351
|
+
renderFragment: (children, key) => children,
|
|
352
352
|
renderText: (text, key) => text
|
|
353
353
|
};
|
|
354
354
|
function appendKeyToValidElement(element, key) {
|
|
@@ -372,6 +372,12 @@ const StructuredText = defineComponent({
|
|
|
372
372
|
customRules: {
|
|
373
373
|
type: Array
|
|
374
374
|
},
|
|
375
|
+
customNodeRules: {
|
|
376
|
+
type: Array
|
|
377
|
+
},
|
|
378
|
+
customMarkRules: {
|
|
379
|
+
type: Array
|
|
380
|
+
},
|
|
375
381
|
renderInlineRecord: {
|
|
376
382
|
type: Function
|
|
377
383
|
},
|
|
@@ -388,58 +394,67 @@ const StructuredText = defineComponent({
|
|
|
388
394
|
},
|
|
389
395
|
setup(props) {
|
|
390
396
|
return () => {
|
|
391
|
-
return render({
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
397
|
+
return render(props.data, {
|
|
398
|
+
adapter: {
|
|
399
|
+
renderText: props.renderText || defaultAdapter.renderText,
|
|
400
|
+
renderNode: props.renderNode || defaultAdapter.renderNode,
|
|
401
|
+
renderFragment: props.renderFragment || defaultAdapter.renderFragment
|
|
402
|
+
},
|
|
403
|
+
metaTransformer: props.metaTransformer,
|
|
404
|
+
customMarkRules: props.customMarkRules,
|
|
405
|
+
customNodeRules: [
|
|
406
|
+
renderNodeRule(isRoot, ({adapter: {renderNode}, key, children}) => {
|
|
407
|
+
return renderNode("div", {key}, children);
|
|
408
|
+
}),
|
|
409
|
+
renderNodeRule(isInlineItem, ({node, key}) => {
|
|
410
|
+
if (!props.renderInlineRecord) {
|
|
411
|
+
throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
|
|
412
|
+
}
|
|
413
|
+
if (!isStructuredText(props.data) || !props.data.links) {
|
|
414
|
+
throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
|
|
415
|
+
}
|
|
416
|
+
const item = props.data.links.find((item2) => item2.id === node.item);
|
|
417
|
+
if (!item) {
|
|
418
|
+
throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
|
|
419
|
+
}
|
|
420
|
+
return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
|
|
421
|
+
}),
|
|
422
|
+
renderNodeRule(isItemLink, ({node, key, children}) => {
|
|
423
|
+
if (!props.renderLinkToRecord) {
|
|
424
|
+
throw new RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
|
|
425
|
+
}
|
|
426
|
+
if (!isStructuredText(props.data) || !props.data.links) {
|
|
427
|
+
throw new RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
|
|
428
|
+
}
|
|
429
|
+
const item = props.data.links.find((item2) => item2.id === node.item);
|
|
430
|
+
if (!item) {
|
|
431
|
+
throw new RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
|
|
432
|
+
}
|
|
433
|
+
return appendKeyToValidElement(props.renderLinkToRecord({
|
|
434
|
+
record: item,
|
|
435
|
+
children,
|
|
436
|
+
transformedMeta: node.meta ? (props.metaTransformer || defaultMetaTransformer)({
|
|
437
|
+
node,
|
|
438
|
+
meta: node.meta
|
|
439
|
+
}) : null
|
|
440
|
+
}), key);
|
|
441
|
+
}),
|
|
442
|
+
renderNodeRule(isBlock, ({node, key}) => {
|
|
443
|
+
if (!props.renderBlock) {
|
|
444
|
+
throw new RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
|
|
445
|
+
}
|
|
446
|
+
if (!isStructuredText(props.data) || !props.data.blocks) {
|
|
447
|
+
throw new RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
|
|
448
|
+
}
|
|
449
|
+
const item = props.data.blocks.find((item2) => item2.id === node.item);
|
|
450
|
+
if (!item) {
|
|
451
|
+
throw new RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
|
|
452
|
+
}
|
|
453
|
+
return appendKeyToValidElement(props.renderBlock({record: item}), key);
|
|
454
|
+
}),
|
|
455
|
+
...props.customNodeRules || props.customRules || []
|
|
456
|
+
]
|
|
457
|
+
});
|
|
443
458
|
};
|
|
444
459
|
}
|
|
445
460
|
});
|
package/dist/index.min.js
CHANGED
|
@@ -337,7 +337,7 @@ const hAdapter = (tagName, props, childOrChildren) => {
|
|
|
337
337
|
const defaultAdapter = {
|
|
338
338
|
renderNode: hAdapter,
|
|
339
339
|
renderMark: hAdapter,
|
|
340
|
-
renderFragment: (children, key) =>
|
|
340
|
+
renderFragment: (children, key) => children,
|
|
341
341
|
renderText: (text, key) => text
|
|
342
342
|
};
|
|
343
343
|
function appendKeyToValidElement(element, key) {
|
|
@@ -361,6 +361,12 @@ const StructuredText = vueDemi.defineComponent({
|
|
|
361
361
|
customRules: {
|
|
362
362
|
type: Array
|
|
363
363
|
},
|
|
364
|
+
customNodeRules: {
|
|
365
|
+
type: Array
|
|
366
|
+
},
|
|
367
|
+
customMarkRules: {
|
|
368
|
+
type: Array
|
|
369
|
+
},
|
|
364
370
|
renderInlineRecord: {
|
|
365
371
|
type: Function
|
|
366
372
|
},
|
|
@@ -377,58 +383,67 @@ const StructuredText = vueDemi.defineComponent({
|
|
|
377
383
|
},
|
|
378
384
|
setup(props) {
|
|
379
385
|
return () => {
|
|
380
|
-
return datocmsStructuredTextGenericHtmlRenderer.render({
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
386
|
+
return datocmsStructuredTextGenericHtmlRenderer.render(props.data, {
|
|
387
|
+
adapter: {
|
|
388
|
+
renderText: props.renderText || defaultAdapter.renderText,
|
|
389
|
+
renderNode: props.renderNode || defaultAdapter.renderNode,
|
|
390
|
+
renderFragment: props.renderFragment || defaultAdapter.renderFragment
|
|
391
|
+
},
|
|
392
|
+
metaTransformer: props.metaTransformer,
|
|
393
|
+
customMarkRules: props.customMarkRules,
|
|
394
|
+
customNodeRules: [
|
|
395
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isRoot, ({adapter: {renderNode}, key, children}) => {
|
|
396
|
+
return renderNode("div", {key}, children);
|
|
397
|
+
}),
|
|
398
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
|
|
399
|
+
if (!props.renderInlineRecord) {
|
|
400
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
|
|
401
|
+
}
|
|
402
|
+
if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
|
|
403
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
|
|
404
|
+
}
|
|
405
|
+
const item = props.data.links.find((item2) => item2.id === node.item);
|
|
406
|
+
if (!item) {
|
|
407
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
|
|
408
|
+
}
|
|
409
|
+
return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
|
|
410
|
+
}),
|
|
411
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
|
|
412
|
+
if (!props.renderLinkToRecord) {
|
|
413
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
|
|
414
|
+
}
|
|
415
|
+
if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
|
|
416
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
|
|
417
|
+
}
|
|
418
|
+
const item = props.data.links.find((item2) => item2.id === node.item);
|
|
419
|
+
if (!item) {
|
|
420
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
|
|
421
|
+
}
|
|
422
|
+
return appendKeyToValidElement(props.renderLinkToRecord({
|
|
423
|
+
record: item,
|
|
424
|
+
children,
|
|
425
|
+
transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
|
|
426
|
+
node,
|
|
427
|
+
meta: node.meta
|
|
428
|
+
}) : null
|
|
429
|
+
}), key);
|
|
430
|
+
}),
|
|
431
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
|
|
432
|
+
if (!props.renderBlock) {
|
|
433
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
|
|
434
|
+
}
|
|
435
|
+
if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
|
|
436
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
|
|
437
|
+
}
|
|
438
|
+
const item = props.data.blocks.find((item2) => item2.id === node.item);
|
|
439
|
+
if (!item) {
|
|
440
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
|
|
441
|
+
}
|
|
442
|
+
return appendKeyToValidElement(props.renderBlock({record: item}), key);
|
|
443
|
+
}),
|
|
444
|
+
...props.customNodeRules || props.customRules || []
|
|
445
|
+
]
|
|
446
|
+
});
|
|
432
447
|
};
|
|
433
448
|
}
|
|
434
449
|
});
|
|
@@ -474,4 +489,4 @@ const toHead = (...args) => {
|
|
|
474
489
|
});
|
|
475
490
|
})
|
|
476
491
|
};
|
|
477
|
-
};Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.
|
|
492
|
+
};Object.defineProperty(exports,'renderMarkRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderMarkRule;}});Object.defineProperty(exports,'renderNodeRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});return exports;}({},hypenateStyleName,VueDemi,datocmsStructuredTextGenericHtmlRenderer,datocmsStructuredTextUtils));
|
package/dist/index.umd.js
CHANGED
|
@@ -337,7 +337,7 @@ const hAdapter = (tagName, props, childOrChildren) => {
|
|
|
337
337
|
const defaultAdapter = {
|
|
338
338
|
renderNode: hAdapter,
|
|
339
339
|
renderMark: hAdapter,
|
|
340
|
-
renderFragment: (children, key) =>
|
|
340
|
+
renderFragment: (children, key) => children,
|
|
341
341
|
renderText: (text, key) => text
|
|
342
342
|
};
|
|
343
343
|
function appendKeyToValidElement(element, key) {
|
|
@@ -361,6 +361,12 @@ const StructuredText = vueDemi.defineComponent({
|
|
|
361
361
|
customRules: {
|
|
362
362
|
type: Array
|
|
363
363
|
},
|
|
364
|
+
customNodeRules: {
|
|
365
|
+
type: Array
|
|
366
|
+
},
|
|
367
|
+
customMarkRules: {
|
|
368
|
+
type: Array
|
|
369
|
+
},
|
|
364
370
|
renderInlineRecord: {
|
|
365
371
|
type: Function
|
|
366
372
|
},
|
|
@@ -377,58 +383,67 @@ const StructuredText = vueDemi.defineComponent({
|
|
|
377
383
|
},
|
|
378
384
|
setup(props) {
|
|
379
385
|
return () => {
|
|
380
|
-
return datocmsStructuredTextGenericHtmlRenderer.render({
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
386
|
+
return datocmsStructuredTextGenericHtmlRenderer.render(props.data, {
|
|
387
|
+
adapter: {
|
|
388
|
+
renderText: props.renderText || defaultAdapter.renderText,
|
|
389
|
+
renderNode: props.renderNode || defaultAdapter.renderNode,
|
|
390
|
+
renderFragment: props.renderFragment || defaultAdapter.renderFragment
|
|
391
|
+
},
|
|
392
|
+
metaTransformer: props.metaTransformer,
|
|
393
|
+
customMarkRules: props.customMarkRules,
|
|
394
|
+
customNodeRules: [
|
|
395
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isRoot, ({adapter: {renderNode}, key, children}) => {
|
|
396
|
+
return renderNode("div", {key}, children);
|
|
397
|
+
}),
|
|
398
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
|
|
399
|
+
if (!props.renderInlineRecord) {
|
|
400
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
|
|
401
|
+
}
|
|
402
|
+
if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
|
|
403
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
|
|
404
|
+
}
|
|
405
|
+
const item = props.data.links.find((item2) => item2.id === node.item);
|
|
406
|
+
if (!item) {
|
|
407
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
|
|
408
|
+
}
|
|
409
|
+
return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
|
|
410
|
+
}),
|
|
411
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
|
|
412
|
+
if (!props.renderLinkToRecord) {
|
|
413
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
|
|
414
|
+
}
|
|
415
|
+
if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
|
|
416
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
|
|
417
|
+
}
|
|
418
|
+
const item = props.data.links.find((item2) => item2.id === node.item);
|
|
419
|
+
if (!item) {
|
|
420
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
|
|
421
|
+
}
|
|
422
|
+
return appendKeyToValidElement(props.renderLinkToRecord({
|
|
423
|
+
record: item,
|
|
424
|
+
children,
|
|
425
|
+
transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
|
|
426
|
+
node,
|
|
427
|
+
meta: node.meta
|
|
428
|
+
}) : null
|
|
429
|
+
}), key);
|
|
430
|
+
}),
|
|
431
|
+
datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
|
|
432
|
+
if (!props.renderBlock) {
|
|
433
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
|
|
434
|
+
}
|
|
435
|
+
if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
|
|
436
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but .blocks is not present!`, node);
|
|
437
|
+
}
|
|
438
|
+
const item = props.data.blocks.find((item2) => item2.id === node.item);
|
|
439
|
+
if (!item) {
|
|
440
|
+
throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`, node);
|
|
441
|
+
}
|
|
442
|
+
return appendKeyToValidElement(props.renderBlock({record: item}), key);
|
|
443
|
+
}),
|
|
444
|
+
...props.customNodeRules || props.customRules || []
|
|
445
|
+
]
|
|
446
|
+
});
|
|
432
447
|
};
|
|
433
448
|
}
|
|
434
449
|
});
|
|
@@ -474,4 +489,4 @@ const toHead = (...args) => {
|
|
|
474
489
|
});
|
|
475
490
|
})
|
|
476
491
|
};
|
|
477
|
-
};Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.
|
|
492
|
+
};Object.defineProperty(exports,'renderMarkRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderMarkRule;}});Object.defineProperty(exports,'renderNodeRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});})));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-datocms",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"test": "jest src"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"datocms-structured-text-generic-html-renderer": "^1.0
|
|
32
|
-
"datocms-structured-text-utils": "^1.0
|
|
31
|
+
"datocms-structured-text-generic-html-renderer": "^1.3.0",
|
|
32
|
+
"datocms-structured-text-utils": "^1.1.0",
|
|
33
33
|
"hyphenate-style-name": "^1.0.4",
|
|
34
34
|
"vue-demi": "^0.7.5"
|
|
35
35
|
},
|