@storyblok/vue 8.0.8 → 8.0.9
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 +27 -28
- package/dist/storyblok-vue.js +3 -3
- package/dist/storyblok-vue.mjs +103 -98
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -33,14 +33,13 @@
|
|
|
33
33
|
> **Note**
|
|
34
34
|
> This plugin is for Vue 3. [Check out the docs for Vue 2 version](https://github.com/storyblok/storyblok-vue-2).
|
|
35
35
|
|
|
36
|
-
##
|
|
36
|
+
## Kickstart a new project
|
|
37
|
+
Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Vue](https://www.storyblok.com/technologies#vue?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)**, and get started in just a few minutes!
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
## 5-minute Tutorial
|
|
40
|
+
Are you looking for a hands-on, step-by-step tutorial? The **[Vue 5-minute Tutorial](https://www.storyblok.com/tp/add-a-headless-CMS-to-vuejs-in-5-minutes?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)** has you covered! It provides comprehensive instructions on how to set up a Storyblok space and connect it to your Vue project.
|
|
39
41
|
|
|
40
|
-
|
|
41
|
-
> If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) guide to get a project ready in less than 5 minutes.
|
|
42
|
-
|
|
43
|
-
### Installation
|
|
42
|
+
## Installation
|
|
44
43
|
|
|
45
44
|
Install `@storyblok/vue`
|
|
46
45
|
|
|
@@ -80,7 +79,7 @@ Install the file from the CDN and access the methods via `window.storyblokVue`:
|
|
|
80
79
|
<script src="https://unpkg.com/@storyblok/vue"></script>
|
|
81
80
|
```
|
|
82
81
|
|
|
83
|
-
|
|
82
|
+
## Getting started
|
|
84
83
|
|
|
85
84
|
`@storyblok/vue` does three actions when you initialize it:
|
|
86
85
|
|
|
@@ -88,7 +87,7 @@ Install the file from the CDN and access the methods via `window.storyblokVue`:
|
|
|
88
87
|
- Loads [Storyblok Bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) for real-time visual updates
|
|
89
88
|
- Provides a `v-editable` directive to link editable components to the Storyblok Visual Editor
|
|
90
89
|
|
|
91
|
-
|
|
90
|
+
### Short Form
|
|
92
91
|
|
|
93
92
|
Load globally the Vue components you want to link to Storyblok in your _main.js_ file:
|
|
94
93
|
|
|
@@ -127,7 +126,7 @@ The simplest way is by using the `useStoryblok` one-liner composable. Where you
|
|
|
127
126
|
|
|
128
127
|
Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) in our API docs and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) passed to the Storyblok Bridge.
|
|
129
128
|
|
|
130
|
-
|
|
129
|
+
### Rendering Rich Text
|
|
131
130
|
|
|
132
131
|
You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/vue` and a Vue computed property:
|
|
133
132
|
|
|
@@ -190,9 +189,9 @@ renderRichText(blok.richTextField, {
|
|
|
190
189
|
});
|
|
191
190
|
```
|
|
192
191
|
|
|
193
|
-
|
|
192
|
+
### Long Form
|
|
194
193
|
|
|
195
|
-
|
|
194
|
+
#### 1. Fetching Content
|
|
196
195
|
|
|
197
196
|
Inject `storyblokApi` when using Composition API:
|
|
198
197
|
|
|
@@ -217,7 +216,7 @@ Inject `storyblokApi` when using Composition API:
|
|
|
217
216
|
> **Note**
|
|
218
217
|
> You can skip using `apiPlugin` if you prefer your own method or function to fetch your data.
|
|
219
218
|
|
|
220
|
-
|
|
219
|
+
#### 2. Listen to Storyblok Visual Editor events
|
|
221
220
|
|
|
222
221
|
Use `useStoryBridge` to get the new story every time is triggered a `change` event from the Visual Editor. You need to pass the story id as first param, and a callback function as second param to update the new story:
|
|
223
222
|
|
|
@@ -252,7 +251,7 @@ useStoryblokBridge(
|
|
|
252
251
|
);
|
|
253
252
|
```
|
|
254
253
|
|
|
255
|
-
|
|
254
|
+
#### 3. Link your components to Storyblok Visual Editor
|
|
256
255
|
|
|
257
256
|
For every component you've defined in your Storyblok space, add the `v-editable` directive with the blok content:
|
|
258
257
|
|
|
@@ -266,11 +265,11 @@ Where `blok` is the actual blok data coming from [Storblok's Content Delivery AP
|
|
|
266
265
|
|
|
267
266
|
Check out the [playground](/../../tree/next/playground) for a full example.
|
|
268
267
|
|
|
269
|
-
|
|
268
|
+
## Features and API
|
|
270
269
|
|
|
271
270
|
You can **choose the features to use** when you initialize the plugin. In that way, you can improve Web Performance by optimizing your page load and save some bytes.
|
|
272
271
|
|
|
273
|
-
|
|
272
|
+
### useStoryblok(pathToStory, apiOptions = {}, bridgeOptions = {})
|
|
274
273
|
|
|
275
274
|
This example of `useStoryblok`:
|
|
276
275
|
|
|
@@ -311,7 +310,7 @@ Is equivalent to the following, using `useStoryblokBridge` and `useStoryblokApi`
|
|
|
311
310
|
|
|
312
311
|
Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) (passed to `storyblok-js-client`) and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) (passed to the Storyblok Bridge).
|
|
313
312
|
|
|
314
|
-
|
|
313
|
+
### Storyblok API
|
|
315
314
|
|
|
316
315
|
You can use an `apiOptions` object. This is passed down to the [storyblok-js-client config object](https://github.com/storyblok/storyblok-js-client#class-storyblok).
|
|
317
316
|
|
|
@@ -332,7 +331,7 @@ If you prefer to use your own fetch method, just remove the `apiPlugin` and `sto
|
|
|
332
331
|
app.use(StoryblokVue);
|
|
333
332
|
```
|
|
334
333
|
|
|
335
|
-
|
|
334
|
+
## Region parameter
|
|
336
335
|
|
|
337
336
|
Possible values:
|
|
338
337
|
|
|
@@ -357,7 +356,7 @@ app.use(StoryblokVue, {
|
|
|
357
356
|
> **Important**
|
|
358
357
|
> For spaces created in the United States or China, the `region` parameter **must** be specified.
|
|
359
358
|
|
|
360
|
-
|
|
359
|
+
## Storyblok Bridge
|
|
361
360
|
|
|
362
361
|
You can conditionally load it by using the `bridge` option. Very useful if you want to disable it in production:
|
|
363
362
|
|
|
@@ -377,7 +376,7 @@ sbBridge.on(["input", "published", "change"], (event) => {
|
|
|
377
376
|
});
|
|
378
377
|
```
|
|
379
378
|
|
|
380
|
-
|
|
379
|
+
## Using Fallback components
|
|
381
380
|
|
|
382
381
|
By default, `@storyblok/vue` show a `console.error` if a component is not implemented. Setting `enableFallbackComponent` to `true` bypasses that behavior, rendering a fallback component in the frontend instead.
|
|
383
382
|
|
|
@@ -402,7 +401,7 @@ app.use(StoryblokVue, {
|
|
|
402
401
|
app.component("MyCustomFallback", MyCustomFallback);
|
|
403
402
|
```
|
|
404
403
|
|
|
405
|
-
|
|
404
|
+
## Compatibility
|
|
406
405
|
|
|
407
406
|
This plugin is for Vue 3. Thus, it supports the [same browsers as Vue 3](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). In short: all modern browsers, dropping IE support.
|
|
408
407
|
|
|
@@ -410,20 +409,20 @@ This plugin is for Vue 3. Thus, it supports the [same browsers as Vue 3](https:/
|
|
|
410
409
|
|
|
411
410
|
|
|
412
411
|
|
|
413
|
-
##
|
|
414
|
-
|
|
415
|
-
- **[Add a headless CMS to Vue.js in 5 minutes](https://www.storyblok.com/tp/add-a-headless-CMS-to-vuejs-in-5-minutes?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)**: Quick-start guide on getting up and running with Storyblok and Vue.
|
|
416
|
-
- **[Storyblok & Vue.js on GitHub](https://github.com/search?q=org%3Astoryblok+topic%3Avue)**: Check all of our Vue.js open source repos.
|
|
417
|
-
- **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects and fieldtypes.
|
|
412
|
+
## Further Resources
|
|
418
413
|
|
|
419
|
-
|
|
414
|
+
- [Quick Start](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)
|
|
415
|
+
- [API Documentation](https://www.storyblok.com/docs/api?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)
|
|
416
|
+
- [Developer Tutorials](https://www.storyblok.com/tutorials?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)
|
|
417
|
+
- [Developer Guides](https://www.storyblok.com/docs/guide/introduction?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)
|
|
418
|
+
- [FAQs](https://www.storyblok.com/faqs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)
|
|
420
419
|
|
|
421
|
-
|
|
420
|
+
## Support
|
|
422
421
|
|
|
423
422
|
- Bugs or Feature Requests? [Submit an issue](/../../issues/new).
|
|
424
423
|
- Do you have questions about Storyblok or you need help? [Join our Discord Community](https://discord.gg/jKrbAMz).
|
|
425
424
|
|
|
426
|
-
|
|
425
|
+
## Contributing
|
|
427
426
|
|
|
428
427
|
Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue).
|
|
429
428
|
This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
|
package/dist/storyblok-vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(f,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],p):(f=typeof globalThis<"u"?globalThis:f||self,p(f.storyblokVue={},f.Vue))})(this,function(f,p){"use strict";let S=!1;const j=[],M=o=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=r=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}S?r():j.push(r)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=o,s.id="storyblok-javascript-bridge",s.onerror=r=>t(r),s.onload=r=>{j.forEach(n=>n()),S=!0,e(r)},document.getElementsByTagName("head")[0].appendChild(s)});var V=Object.defineProperty,z=(o,e,t)=>e in o?V(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,c=(o,e,t)=>(z(o,typeof e!="symbol"?e+"":e,t),t);function C(o){return!(o!==o||o===1/0||o===-1/0)}function D(o,e,t){if(!C(e))throw new TypeError("Expected `limit` to be a finite number");if(!C(t))throw new TypeError("Expected `interval` to be a finite number");const s=[];let r=[],n=0;const i=function(){n++;const a=setTimeout(function(){n--,s.length>0&&i(),r=r.filter(function(h){return h!==a})},t);r.indexOf(a)<0&&r.push(a);const u=s.shift();u.resolve(o.apply(u.self,u.args))},l=function(...a){const u=this;return new Promise(function(h,d){s.push({resolve:h,reject:d,args:a,self:u}),n<e&&i()})};return l.abort=function(){r.forEach(clearTimeout),r=[],s.forEach(function(a){a.reject(function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"})}),s.length=0},l}class _{constructor(){c(this,"isCDNUrl",(e="")=>e.indexOf("/cdn/")>-1),c(this,"getOptionsPage",(e,t=25,s=1)=>({...e,per_page:t,page:s})),c(this,"delay",e=>new Promise(t=>setTimeout(t,e))),c(this,"arrayFrom",(e=0,t)=>[...Array(e)].map(t)),c(this,"range",(e=0,t=e)=>{const s=Math.abs(t-e)||0,r=e<t?1:-1;return this.arrayFrom(s,(n,i)=>i*r+e)}),c(this,"asyncMap",async(e,t)=>Promise.all(e.map(t))),c(this,"flatMap",(e=[],t)=>e.map(t).reduce((s,r)=>[...s,...r],[])),c(this,"escapeHTML",function(e){const t={"&":"&","<":"<",">":">",'"':""","'":"'"},s=/[&<>"']/g,r=RegExp(s.source);return e&&r.test(e)?e.replace(s,n=>t[n]):e})}stringify(e,t,s){const r=[];for(const n in e){if(!Object.prototype.hasOwnProperty.call(e,n))continue;const i=e[n],l=s?"":encodeURIComponent(n);let a;typeof i=="object"?a=this.stringify(i,t?t+encodeURIComponent("["+l+"]"):l,Array.isArray(i)):a=(t?t+encodeURIComponent("["+l+"]"):l)+"="+encodeURIComponent(i),r.push(a)}return r.join("&")}getRegionURL(e){const t="api.storyblok.com",s="api-us.storyblok.com",r="app.storyblokchina.cn",n="api-ap.storyblok.com",i="api-ca.storyblok.com";switch(e){case"us":return s;case"cn":return r;case"ap":return n;case"ca":return i;default:return t}}}const F=function(o,e){const t={};for(const s in o){const r=o[s];e.indexOf(s)>-1&&r!==null&&(t[s]=r)}return t},U=o=>o==="email",H=()=>({singleTag:"hr"}),q=()=>({tag:"blockquote"}),B=()=>({tag:"ul"}),J=o=>({tag:["pre",{tag:"code",attrs:o.attrs}]}),K=()=>({singleTag:"br"}),Y=o=>({tag:`h${o.attrs.level}`}),W=o=>({singleTag:[{tag:"img",attrs:F(o.attrs,["src","alt","title"])}]}),G=()=>({tag:"li"}),Q=()=>({tag:"ol"}),X=()=>({tag:"p"}),Z=o=>({tag:[{tag:"span",attrs:{"data-type":"emoji","data-name":o.attrs.name,emoji:o.attrs.emoji}}]}),ee=()=>({tag:"b"}),te=()=>({tag:"s"}),se=()=>({tag:"u"}),re=()=>({tag:"strong"}),oe=()=>({tag:"code"}),ne=()=>({tag:"i"}),ie=o=>{if(!o.attrs)return{tag:""};const e=new _().escapeHTML,t={...o.attrs},{linktype:s="url"}=o.attrs;if(delete t.linktype,t.href&&(t.href=e(o.attrs.href||"")),U(s)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),t.custom){for(const r in t.custom)t[r]=t.custom[r];delete t.custom}return{tag:[{tag:"a",attrs:t}]}},ae=o=>({tag:[{tag:"span",attrs:o.attrs}]}),le=()=>({tag:"sub"}),ce=()=>({tag:"sup"}),he=o=>({tag:[{tag:"span",attrs:o.attrs}]}),ue=o=>{var e;return(e=o.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`background-color:${o.attrs.color};`}}]}:{tag:""}},pe=o=>{var e;return(e=o.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`color:${o.attrs.color}`}}]}:{tag:""}},P={nodes:{horizontal_rule:H,blockquote:q,bullet_list:B,code_block:J,hard_break:K,heading:Y,image:W,list_item:G,ordered_list:Q,paragraph:X,emoji:Z},marks:{bold:ee,strike:te,underline:se,strong:re,code:oe,italic:ne,link:ie,styled:ae,subscript:le,superscript:ce,anchor:he,highlight:ue,textStyle:pe}},de=function(o){const e={"&":"&","<":"<",">":">",'"':""","'":"'"},t=/[&<>"']/g,s=RegExp(t.source);return o&&s.test(o)?o.replace(t,r=>e[r]):o};class k{constructor(e){c(this,"marks"),c(this,"nodes"),e||(e=P),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let s="";return e.content.forEach(r=>{s+=this.renderNode(r)}),t.optimizeImages?this.optimizeImages(s,t.optimizeImages):s}return console.warn(`The render method must receive an Object with a "content" field.
|
|
2
2
|
The "content" field must be an array of nodes as the type ISbRichtext.
|
|
3
3
|
ISbRichtext:
|
|
4
4
|
content?: ISbRichtext[]
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
}
|
|
22
22
|
],
|
|
23
23
|
type: 'doc'
|
|
24
|
-
}`),""}optimizeImages(e,t){let s=0,r=0,n="",i="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(n+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(n+=`height="${t.height}" `,r=t.height),(t.loading==="lazy"||t.loading==="eager")&&(n+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(n+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(i+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(i+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(i+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(i+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(i+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(i+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(i+=`:rotate(${t.filters.rotate})`),i.length>0&&(i="/filters"+i))),n.length>0&&(e=e.replace(/<img/g,`<img ${n.trim()}`));const l=s>0||r>0||i.length>0?`${s}x${r}${i}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${l}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var c,p;const f=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(f&&f.length>0){const m={srcset:(c=t.srcset)==null?void 0:c.map(g=>{if(typeof g=="number")return`//${f}/m/${g}x0${i} ${g}w`;if(typeof g=="object"&&g.length===2){let T=0,L=0;return typeof g[0]=="number"&&(T=g[0]),typeof g[1]=="number"&&(L=g[1]),`//${f}/m/${T}x${L}${i} ${T}w`}}).join(", "),sizes:(p=t.sizes)==null?void 0:p.map(g=>g).join(", ")};let b="";return m.srcset&&(b+=`srcset="${m.srcset}" `),m.sizes&&(b+=`sizes="${m.sizes}" `),a.replace(/<img/g,`<img ${b.trim()}`)}return a})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const n=this.getMatchingMark(r);n&&n.tag!==""&&t.push(this.renderOpeningTag(n.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(de(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const n=this.getMatchingMark(r);n&&n.tag!==""&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs)for(const n in s.attrs){const i=s.attrs[n];i!==null&&(r+=` ${n}="${i}"`)}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}class fe{constructor(e){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),h(this,"fetchOptions"),this.baseURL=e.baseURL,this.headers=e.headers||new Headers,this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={},this.fetchOptions={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers={...t},s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const a=new _;t=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),n=new AbortController,{signal:i}=n;let l;this.timeout&&(l=setTimeout(()=>n.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:i,...this.fetchOptions});this.timeout&&clearTimeout(l);const c=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(c)):this._statusHandler(c)}catch(a){return{message:a}}}setFetchOptions(e={}){Object.keys(e).length>0&&"method"in e&&delete e.method,this.fetchOptions={...e}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise((s,r)=>{if(t.test(`${e.status}`))return s(e);const n={message:e.statusText,status:e.status,response:Array.isArray(e.data)?e.data[0]:e.data.error||e.data.slug};r(n)})}}const O="SB-Agent",$={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"6.0.0"};let w={};const y={};class ge{constructor(e,t){h(this,"client"),h(this,"maxRetries"),h(this,"throttle"),h(this,"accessToken"),h(this,"cache"),h(this,"helpers"),h(this,"resolveCounter"),h(this,"relations"),h(this,"links"),h(this,"richTextResolver"),h(this,"resolveNestedRelations"),h(this,"stringifiedStoriesCache");let s=e.endpoint||t;if(!s){const i=new _().getRegionURL,l=e.https===!1?"http":"https";e.oauthToken?s=`${l}://${i(e.region)}/v1`:s=`${l}://${i(e.region)}/v2`}const r=new Headers;if(r.set("Content-Type","application/json"),r.set("Accept","application/json"),e.headers)for(const i in e.headers)r.set(i,e.headers[i]);r.has(O)||(r.set(O,$.defaultAgentName),r.set($.defaultAgentVersion,$.packageVersion));let n=5;e.oauthToken&&(r.set("Authorization",e.oauthToken),n=3),e.rateLimit&&(n=e.rateLimit),e.richTextSchema?this.richTextResolver=new k(e.richTextSchema):this.richTextResolver=new k,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||5,this.throttle=z(this.throttledRequest,n,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new _,this.resolveCounter=0,this.resolveNestedRelations=e.resolveNestedRelations||!0,this.stringifiedStoriesCache={},this.client=new fe({baseURL:s,timeout:e.timeout||0,headers:r,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body&&t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),typeof e.resolve_relations<"u"&&(e.resolve_level=2),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r){const n=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,n)}get(e,t,s){t||(t={});const r=`/${e}`,n=this.factoryParamOptions(r,t);return this.client.setFetchOptions(s),this.cacheResponse(r,n)}async getAll(e,t,s,r){const n=(t==null?void 0:t.per_page)||25,i=`/${e}`,l=i.split("/"),a=s||l[l.length-1],c=1,p=await this.makeRequest(i,t,n,c),f=p.total?Math.ceil(p.total/n):1;this.client.setFetchOptions(r);const m=await this.helpers.asyncMap(this.helpers.range(c,f),b=>this.makeRequest(i,t,n,b+1));return this.helpers.flatMap([p,...m],b=>Object.values(b.data[a]))}post(e,t,s){const r=`/${e}`;return this.client.setFetchOptions(s),Promise.resolve(this.throttle("post",r,t))}put(e,t,s){const r=`/${e}`;return this.client.setFetchOptions(s),Promise.resolve(this.throttle("put",r,t))}delete(e,t,s){const r=`/${e}`;return this.client.setFetchOptions(s),Promise.resolve(this.throttle("delete",r,t))}getStories(e,t){return this.client.setFetchOptions(t),this._addResolveLevel(e),this.get("cdn/stories",e)}getStory(e,t,s){return this.client.setFetchOptions(s),this._addResolveLevel(t),this.get(`cdn/stories/${e}`,t)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_addResolveLevel(e){typeof e.resolve_relations<"u"&&(e.resolve_level=2)}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t,s){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[s][r.id]?r.story=this._cleanCopy(this.links[s][r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[s][r.uuid]&&(r.story=this._cleanCopy(this.links[s][r.uuid]))}getStoryReference(e,t){return this.relations[e][t]?(this.stringifiedStoriesCache[t]||(this.stringifiedStoriesCache[t]=JSON.stringify(this.relations[e][t])),JSON.parse(this.stringifiedStoriesCache[t])):t}_insertRelations(e,t,s,r){s.indexOf(`${e.component}.${t}`)>-1&&(typeof e[t]=="string"?e[t]=this.getStoryReference(r,e[t]):Array.isArray(e[t])&&(e[t]=e[t].map(n=>this.getStoryReference(r,n)).filter(Boolean)))}iterateTree(e,t,s){const r=n=>{if(n!=null){if(n.constructor===Array)for(let i=0;i<n.length;i++)r(n[i]);else if(n.constructor===Object){if(n._stopResolving)return;for(const i in n)(n.component&&n._uid||n.type==="link")&&(this._insertRelations(n,i,t,s),this._insertLinks(n,i,s)),r(n[i])}}};r(e.content)}async resolveLinks(e,t,s){let r=[];if(e.link_uuids){const n=e.link_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const c=Math.min(n,a+l);i.push(e.link_uuids.slice(a,c))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(",")})).data.stories.forEach(c=>{r.push(c)})}else r=e.links;r.forEach(n=>{this.links[s][n.uuid]={...n,_stopResolving:!0}})}async resolveRelations(e,t,s){let r=[];if(e.rel_uuids){const n=e.rel_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const c=Math.min(n,a+l);i.push(e.rel_uuids.slice(a,c))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(","),excluding_fields:t.excluding_fields})).data.stories.forEach(c=>{r.push(c)})}else r=e.rels;r&&r.length>0&&r.forEach(n=>{this.relations[s][n.uuid]={...n,_stopResolving:!0}})}async resolveStories(e,t,s){var r,n;let i=[];if(this.links[s]={},this.relations[s]={},typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(i=t.resolve_relations.split(",")),await this.resolveRelations(e,t,s)),t.resolve_links&&["1","story","url","link"].indexOf(t.resolve_links)>-1&&((r=e.links)!=null&&r.length||(n=e.link_uuids)!=null&&n.length)&&await this.resolveLinks(e,t,s),this.resolveNestedRelations)for(const l in this.relations[s])this.iterateTree(this.relations[s][l],i,s);e.story?this.iterateTree(e.story,i,s):e.stories.forEach(l=>{this.iterateTree(l,i,s)}),this.stringifiedStoriesCache={},delete this.links[s],delete this.relations[s]}async cacheResponse(e,t,s){(typeof s>"u"||!s)&&(s=0);const r=this.helpers.stringify({url:e,params:t}),n=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const i=await n.get(r);if(i)return Promise.resolve(i)}return new Promise(async(i,l)=>{var a;try{const c=await this.throttle("get",e,t);if(c.status!==200)return l(c);let p={data:c.data,headers:c.headers};if((a=c.headers)!=null&&a["per-page"]&&(p=Object.assign({},p,{perPage:c.headers["per-page"]?parseInt(c.headers["per-page"]):0,total:c.headers["per-page"]?parseInt(c.headers.total):0})),p.data.story||p.data.stories){const f=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(p.data,t,`${f}`)}return t.version==="published"&&e!="/cdn/spaces/me"&&await n.set(r,p),p.data.cv&&t.token&&(t.version==="draft"&&y[t.token]!=p.data.cv&&await this.flushCache(),y[t.token]=t.cv?t.cv:p.data.cv),i(p)}catch(c){if(c.response&&c.status===429&&(s=s?s+1:0,s<this.maxRetries))return console.log(`Hit rate limit. Retrying in ${s} seconds.`),await this.helpers.delay(1e3*s),this.cacheResponse(e,t,s).then(i).catch(l);l(c)}})}throttledRequest(e,t,s){return this.client[e](t,s)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}clearCacheVersion(){this.accessToken&&(y[this.accessToken]=0)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(w[e])},getAll(){return Promise.resolve(w)},set(e,t){return w[e]=t,Promise.resolve(void 0)},flush(){return w={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve()},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this.clearCacheVersion(),this}}const me=(o={})=>{const{apiOptions:e}=o;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new ge(e)}},ye=o=>{if(typeof o!="object"||typeof o._editable>"u")return{};try{const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}:{}}catch{return{}}};let R,P="https://app.storyblok.com/f/storyblok-v2-latest.js";const E=(o,e,t={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",n=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===o;if(!(!r||!n)){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],i=>{i.action==="input"&&i.story.id===o?e(i.story):(i.action==="change"||i.action==="published")&&i.storyId===o&&window.location.reload()})})}},be=(o={})=>{var e,t;const{bridge:s,accessToken:r,use:n=[],apiOptions:i={},richText:l={},bridgeUrl:a}=o;i.accessToken=i.accessToken||r;const c={bridge:s,apiOptions:i};let p={};n.forEach(m=>{p={...p,...m(c)}}),a&&(P=a);const f=!(typeof window>"u")&&((t=(e=window.location)==null?void 0:e.search)==null?void 0:t.includes("_storyblok_tk"));return s!==!1&&f&&M(P),R=new k(l.schema),l.resolver&&I(R,l.resolver),p},I=(o,e)=>{o.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},ke=o=>!o||!(o!=null&&o.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),ve=(o,e,t)=>{let s=t||R;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(o)?"":(e&&(s=new k(e.schema),e.resolver&&I(s,e.resolver)),s.render(o))},A=u.defineComponent({__name:"StoryblokComponent",props:{blok:{}},setup(o,{expose:e}){const t=o,s=u.ref();e({value:s});const r=typeof u.resolveDynamicComponent(t.blok.component)!="string",n=u.inject("VueSDKOptions"),i=u.ref(t.blok.component);return r||(n.enableFallbackComponent?(i.value=n.customFallbackComponent??"FallbackComponent",typeof u.resolveDynamicComponent(i.value)=="string"&&console.error(`Is the Fallback component "${i.value}" registered properly?`)):console.error(`Component could not be found for blok "${t.blok.component}"! Is it defined in main.ts as "app.component("${t.blok.component}", ${t.blok.component});"?`)),(l,a)=>(u.openBlock(),u.createBlock(u.resolveDynamicComponent(i.value),u.mergeProps({ref_key:"blokRef",ref:s},{...l.$props,...l.$attrs}),null,16))}}),_e={beforeMount(o,e){if(e.value){const t=ye(e.value);Object.keys(t).length>0&&(o.setAttribute("data-blok-c",t["data-blok-c"]),o.setAttribute("data-blok-uid",t["data-blok-uid"]),o.classList.add("storyblok__outline"))}}},N=o=>{console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
25
|
-
`)};let v=null;const we=()=>(v||N("useStoryblokApi"),v),$e=async(o,e={},t={})=>{const s=
|
|
24
|
+
}`),""}optimizeImages(e,t){let s=0,r=0,n="",i="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(n+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(n+=`height="${t.height}" `,r=t.height),(t.loading==="lazy"||t.loading==="eager")&&(n+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(n+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(i+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(i+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(i+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(i+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(i+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(i+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(i+=`:rotate(${t.filters.rotate})`),i.length>0&&(i="/filters"+i))),n.length>0&&(e=e.replace(/<img/g,`<img ${n.trim()}`));const l=s>0||r>0||i.length>0?`${s}x${r}${i}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${l}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var u,h;const d=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const m={srcset:(u=t.srcset)==null?void 0:u.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${i} ${g}w`;if(typeof g=="object"&&g.length===2){let T=0,L=0;return typeof g[0]=="number"&&(T=g[0]),typeof g[1]=="number"&&(L=g[1]),`//${d}/m/${T}x${L}${i} ${T}w`}}).join(", "),sizes:(h=t.sizes)==null?void 0:h.map(g=>g).join(", ")};let b="";return m.srcset&&(b+=`srcset="${m.srcset}" `),m.sizes&&(b+=`sizes="${m.sizes}" `),a.replace(/<img/g,`<img ${b.trim()}`)}return a})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const n=this.getMatchingMark(r);n&&n.tag!==""&&t.push(this.renderOpeningTag(n.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(de(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const n=this.getMatchingMark(r);n&&n.tag!==""&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs){for(const n in s.attrs)if(Object.prototype.hasOwnProperty.call(s.attrs,n)){const i=s.attrs[n];i!==null&&(r+=` ${n}="${i}"`)}}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}class fe{constructor(e){c(this,"baseURL"),c(this,"timeout"),c(this,"headers"),c(this,"responseInterceptor"),c(this,"fetch"),c(this,"ejectInterceptor"),c(this,"url"),c(this,"parameters"),c(this,"fetchOptions"),this.baseURL=e.baseURL,this.headers=e.headers||new Headers,this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={},this.fetchOptions={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers={...t},s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const a=new _;t=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),n=new AbortController,{signal:i}=n;let l;this.timeout&&(l=setTimeout(()=>n.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:i,...this.fetchOptions});this.timeout&&clearTimeout(l);const u=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(u)):this._statusHandler(u)}catch(a){return{message:a}}}setFetchOptions(e={}){Object.keys(e).length>0&&"method"in e&&delete e.method,this.fetchOptions={...e}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise((s,r)=>{if(t.test(`${e.status}`))return s(e);const n={message:e.statusText,status:e.status,response:Array.isArray(e.data)?e.data[0]:e.data.error||e.data.slug};r(n)})}}const x="SB-Agent",$={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"6.0.0"};let w={};const y={};class ge{constructor(e,t){c(this,"client"),c(this,"maxRetries"),c(this,"retriesDelay"),c(this,"throttle"),c(this,"accessToken"),c(this,"cache"),c(this,"helpers"),c(this,"resolveCounter"),c(this,"relations"),c(this,"links"),c(this,"richTextResolver"),c(this,"resolveNestedRelations"),c(this,"stringifiedStoriesCache");let s=e.endpoint||t;if(!s){const i=new _().getRegionURL,l=e.https===!1?"http":"https";e.oauthToken?s=`${l}://${i(e.region)}/v1`:s=`${l}://${i(e.region)}/v2`}const r=new Headers;if(r.set("Content-Type","application/json"),r.set("Accept","application/json"),e.headers)for(const i in e.headers)r.set(i,e.headers[i]);r.has(x)||(r.set(x,$.defaultAgentName),r.set($.defaultAgentVersion,$.packageVersion));let n=5;e.oauthToken&&(r.set("Authorization",e.oauthToken),n=3),e.rateLimit&&(n=e.rateLimit),e.richTextSchema?this.richTextResolver=new k(e.richTextSchema):this.richTextResolver=new k,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||10,this.retriesDelay=300,this.throttle=D(this.throttledRequest,n,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new _,this.resolveCounter=0,this.resolveNestedRelations=e.resolveNestedRelations||!0,this.stringifiedStoriesCache={},this.client=new fe({baseURL:s,timeout:e.timeout||0,headers:r,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body&&t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),typeof e.resolve_relations<"u"&&(e.resolve_level=2),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r,n){const i=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,i,void 0,n)}get(e,t,s){t||(t={});const r=`/${e}`,n=this.factoryParamOptions(r,t);return this.cacheResponse(r,n,void 0,s)}async getAll(e,t,s,r){const n=(t==null?void 0:t.per_page)||25,i=`/${e}`,l=i.split("/"),a=s||l[l.length-1],u=1,h=await this.makeRequest(i,t,n,u,r),d=h.total?Math.ceil(h.total/n):1,m=await this.helpers.asyncMap(this.helpers.range(u,d),b=>this.makeRequest(i,t,n,b+1,r));return this.helpers.flatMap([h,...m],b=>Object.values(b.data[a]))}post(e,t,s){const r=`/${e}`;return Promise.resolve(this.throttle("post",r,t,s))}put(e,t,s){const r=`/${e}`;return Promise.resolve(this.throttle("put",r,t,s))}delete(e,t,s){const r=`/${e}`;return Promise.resolve(this.throttle("delete",r,t,s))}getStories(e,t){return this._addResolveLevel(e),this.get("cdn/stories",e,t)}getStory(e,t,s){return this._addResolveLevel(t),this.get(`cdn/stories/${e}`,t,s)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_addResolveLevel(e){typeof e.resolve_relations<"u"&&(e.resolve_level=2)}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t,s){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[s][r.id]?r.story=this._cleanCopy(this.links[s][r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[s][r.uuid]&&(r.story=this._cleanCopy(this.links[s][r.uuid]))}getStoryReference(e,t){return this.relations[e][t]?(this.stringifiedStoriesCache[t]||(this.stringifiedStoriesCache[t]=JSON.stringify(this.relations[e][t])),JSON.parse(this.stringifiedStoriesCache[t])):t}_insertRelations(e,t,s,r){s.indexOf(`${e.component}.${t}`)>-1&&(typeof e[t]=="string"?e[t]=this.getStoryReference(r,e[t]):Array.isArray(e[t])&&(e[t]=e[t].map(n=>this.getStoryReference(r,n)).filter(Boolean)))}iterateTree(e,t,s){const r=n=>{if(n!=null){if(n.constructor===Array)for(let i=0;i<n.length;i++)r(n[i]);else if(n.constructor===Object){if(n._stopResolving)return;for(const i in n)(n.component&&n._uid||n.type==="link")&&(this._insertRelations(n,i,t,s),this._insertLinks(n,i,s)),r(n[i])}}};r(e.content)}async resolveLinks(e,t,s){let r=[];if(e.link_uuids){const n=e.link_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const u=Math.min(n,a+l);i.push(e.link_uuids.slice(a,u))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.links;r.forEach(n=>{this.links[s][n.uuid]={...n,_stopResolving:!0}})}async resolveRelations(e,t,s){let r=[];if(e.rel_uuids){const n=e.rel_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const u=Math.min(n,a+l);i.push(e.rel_uuids.slice(a,u))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(","),excluding_fields:t.excluding_fields})).data.stories.forEach(u=>{r.push(u)})}else r=e.rels;r&&r.length>0&&r.forEach(n=>{this.relations[s][n.uuid]={...n,_stopResolving:!0}})}async resolveStories(e,t,s){var r,n;let i=[];if(this.links[s]={},this.relations[s]={},typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(i=t.resolve_relations.split(",")),await this.resolveRelations(e,t,s)),t.resolve_links&&["1","story","url","link"].indexOf(t.resolve_links)>-1&&((r=e.links)!=null&&r.length||(n=e.link_uuids)!=null&&n.length)&&await this.resolveLinks(e,t,s),this.resolveNestedRelations)for(const l in this.relations[s])this.iterateTree(this.relations[s][l],i,s);e.story?this.iterateTree(e.story,i,s):e.stories.forEach(l=>{this.iterateTree(l,i,s)}),this.stringifiedStoriesCache={},delete this.links[s],delete this.relations[s]}async cacheResponse(e,t,s,r){const n=this.helpers.stringify({url:e,params:t}),i=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const l=await i.get(n);if(l)return Promise.resolve(l)}return new Promise(async(l,a)=>{var u;try{const h=await this.throttle("get",e,t,r);if(h.status!==200)return a(h);let d={data:h.data,headers:h.headers};if((u=h.headers)!=null&&u["per-page"]&&(d=Object.assign({},d,{perPage:h.headers["per-page"]?parseInt(h.headers["per-page"]):0,total:h.headers["per-page"]?parseInt(h.headers.total):0})),d.data.story||d.data.stories){const m=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(d.data,t,`${m}`)}return t.version==="published"&&e!="/cdn/spaces/me"&&await i.set(n,d),d.data.cv&&t.token&&(t.version==="draft"&&y[t.token]!=d.data.cv&&await this.flushCache(),y[t.token]=t.cv?t.cv:d.data.cv),l(d)}catch(h){if(h.response&&h.status===429&&(s=typeof s>"u"?0:s+1,s<this.maxRetries))return console.log(`Hit rate limit. Retrying in ${this.retriesDelay/1e3} seconds.`),await this.helpers.delay(this.retriesDelay),this.cacheResponse(e,t,s).then(l).catch(a);a(h)}})}throttledRequest(e,t,s,r){return this.client.setFetchOptions(r),this.client[e](t,s)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}clearCacheVersion(){this.accessToken&&(y[this.accessToken]=0)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(w[e])},getAll(){return Promise.resolve(w)},set(e,t){return w[e]=t,Promise.resolve(void 0)},flush(){return w={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve()},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this.clearCacheVersion(),this}}const me=(o={})=>{const{apiOptions:e}=o;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new ge(e)}},ye=o=>{if(typeof o!="object"||typeof o._editable>"u")return{};try{const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}:{}}catch{return{}}};let R,E="https://app.storyblok.com/f/storyblok-v2-latest.js";const I=(o,e,t={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",n=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===o;if(!(!r||!n)){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],i=>{i.action==="input"&&i.story.id===o?e(i.story):(i.action==="change"||i.action==="published")&&i.storyId===o&&window.location.reload()})})}},be=(o={})=>{var e,t;const{bridge:s,accessToken:r,use:n=[],apiOptions:i={},richText:l={},bridgeUrl:a}=o;i.accessToken=i.accessToken||r;const u={bridge:s,apiOptions:i};let h={};n.forEach(m=>{h={...h,...m(u)}}),a&&(E=a);const d=!(typeof window>"u")&&((t=(e=window.location)==null?void 0:e.search)==null?void 0:t.includes("_storyblok_tk"));return s!==!1&&d&&M(E),R=new k(l.schema),l.resolver&&O(R,l.resolver),h},O=(o,e)=>{o.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},ke=o=>!o||!(o!=null&&o.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),ve=(o,e,t)=>{let s=t||R;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(o)?"":(e&&(s=new k(e.schema),e.resolver&&O(s,e.resolver)),s.render(o))},A=p.defineComponent({__name:"StoryblokComponent",props:{blok:{}},setup(o,{expose:e}){const t=o,s=p.ref();e({value:s});const r=typeof p.resolveDynamicComponent(t.blok.component)!="string",n=p.inject("VueSDKOptions"),i=p.ref(t.blok.component);return r||(n.enableFallbackComponent?(i.value=n.customFallbackComponent??"FallbackComponent",typeof p.resolveDynamicComponent(i.value)=="string"&&console.error(`Is the Fallback component "${i.value}" registered properly?`)):console.error(`Component could not be found for blok "${t.blok.component}"! Is it defined in main.ts as "app.component("${t.blok.component}", ${t.blok.component});"?`)),(l,a)=>(p.openBlock(),p.createBlock(p.resolveDynamicComponent(i.value),p.mergeProps({ref_key:"blokRef",ref:s},{...l.$props,...l.$attrs}),null,16))}}),_e={beforeMount(o,e){if(e.value){const t=ye(e.value);Object.keys(t).length>0&&(o.setAttribute("data-blok-c",t["data-blok-c"]),o.setAttribute("data-blok-uid",t["data-blok-uid"]),o.classList.add("storyblok__outline"))}}},N=o=>{console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
25
|
+
`)};let v=null;const we=()=>(v||N("useStoryblokApi"),v),$e=async(o,e={},t={})=>{const s=p.ref(null);if(t.resolveRelations=t.resolveRelations??e.resolve_relations,t.resolveLinks=t.resolveLinks??e.resolve_links,p.onMounted(()=>{s.value&&s.value.id&&I(s.value.id,r=>s.value=r,t)}),v){const{data:r}=await v.get(`cdn/stories/${o}`,e);s.value=r.story}else N("useStoryblok");return s},Re={install(o,e={}){o.directive("editable",_e),o.component("StoryblokComponent",A),e.enableFallbackComponent&&!e.customFallbackComponent&&o.component("FallbackComponent",p.defineAsyncComponent(()=>Promise.resolve().then(()=>je)));const{storyblokApi:t}=be(e);v=t,o.provide("VueSDKOptions",e)}},Te={class:"fallback-component"},Se={class:"component"},je=Object.freeze(Object.defineProperty({__proto__:null,default:((o,e)=>{const t=o.__vccOpts||o;for(const[s,r]of e)t[s]=r;return t})(p.defineComponent({__name:"FallbackComponent",props:{blok:{}},setup(o){return(e,t)=>(p.openBlock(),p.createElementBlock("div",Te,[p.createElementVNode("p",null,[p.createTextVNode(" Component could not be found for blok "),p.createElementVNode("span",Se,p.toDisplayString(e.blok.component),1),p.createTextVNode("! Is it configured correctly? ")])]))}}),[["__scopeId","data-v-93c770c0"]])},Symbol.toStringTag,{value:"Module"}));f.RichTextResolver=k,f.RichTextSchema=P,f.StoryblokComponent=A,f.StoryblokVue=Re,f.apiPlugin=me,f.renderRichText=ve,f.useStoryblok=$e,f.useStoryblokApi=we,f.useStoryblokBridge=I,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
package/dist/storyblok-vue.mjs
CHANGED
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as O, ref as _, resolveDynamicComponent as $, inject as N, openBlock as L, createBlock as M, mergeProps as z, onMounted as U, defineAsyncComponent as H } from "vue";
|
|
2
2
|
let j = !1;
|
|
3
|
-
const C = [],
|
|
3
|
+
const C = [], V = (i) => new Promise((e, t) => {
|
|
4
4
|
if (typeof window > "u" || (window.storyblokRegisterEvent = (r) => {
|
|
5
5
|
if (window.location === window.parent.location) {
|
|
6
6
|
console.warn("You are not in Draft Mode or in the Visual Editor.");
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
9
|
j ? r() : C.push(r);
|
|
10
|
-
}, document.getElementById("storyblok-javascript-bridge")))
|
|
11
|
-
return;
|
|
10
|
+
}, document.getElementById("storyblok-javascript-bridge"))) return;
|
|
12
11
|
const s = document.createElement("script");
|
|
13
12
|
s.async = !0, s.src = i, s.id = "storyblok-javascript-bridge", s.onerror = (r) => t(r), s.onload = (r) => {
|
|
14
13
|
C.forEach((o) => o()), j = !0, e(r);
|
|
15
14
|
}, document.getElementsByTagName("head")[0].appendChild(s);
|
|
16
15
|
});
|
|
17
|
-
var
|
|
16
|
+
var D = Object.defineProperty, q = (i, e, t) => e in i ? D(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, c = (i, e, t) => (q(i, typeof e != "symbol" ? e + "" : e, t), t);
|
|
18
17
|
function x(i) {
|
|
19
18
|
return !(i !== i || i === 1 / 0 || i === -1 / 0);
|
|
20
19
|
}
|
|
21
|
-
function
|
|
20
|
+
function F(i, e, t) {
|
|
22
21
|
if (!x(e))
|
|
23
22
|
throw new TypeError("Expected `limit` to be a finite number");
|
|
24
23
|
if (!x(t))
|
|
@@ -28,21 +27,21 @@ function D(i, e, t) {
|
|
|
28
27
|
const n = function() {
|
|
29
28
|
o++;
|
|
30
29
|
const a = setTimeout(function() {
|
|
31
|
-
o--, s.length > 0 && n(), r = r.filter(function(
|
|
32
|
-
return
|
|
30
|
+
o--, s.length > 0 && n(), r = r.filter(function(h) {
|
|
31
|
+
return h !== a;
|
|
33
32
|
});
|
|
34
33
|
}, t);
|
|
35
34
|
r.indexOf(a) < 0 && r.push(a);
|
|
36
|
-
const
|
|
37
|
-
|
|
35
|
+
const u = s.shift();
|
|
36
|
+
u.resolve(i.apply(u.self, u.args));
|
|
38
37
|
}, l = function(...a) {
|
|
39
|
-
const
|
|
40
|
-
return new Promise(function(
|
|
38
|
+
const u = this;
|
|
39
|
+
return new Promise(function(h, p) {
|
|
41
40
|
s.push({
|
|
42
|
-
resolve:
|
|
41
|
+
resolve: h,
|
|
43
42
|
reject: p,
|
|
44
43
|
args: a,
|
|
45
|
-
self:
|
|
44
|
+
self: u
|
|
46
45
|
}), o < e && n();
|
|
47
46
|
});
|
|
48
47
|
};
|
|
@@ -56,14 +55,14 @@ function D(i, e, t) {
|
|
|
56
55
|
}
|
|
57
56
|
class k {
|
|
58
57
|
constructor() {
|
|
59
|
-
|
|
58
|
+
c(this, "isCDNUrl", (e = "") => e.indexOf("/cdn/") > -1), c(this, "getOptionsPage", (e, t = 25, s = 1) => ({
|
|
60
59
|
...e,
|
|
61
60
|
per_page: t,
|
|
62
61
|
page: s
|
|
63
|
-
})),
|
|
62
|
+
})), c(this, "delay", (e) => new Promise((t) => setTimeout(t, e))), c(this, "arrayFrom", (e = 0, t) => [...Array(e)].map(t)), c(this, "range", (e = 0, t = e) => {
|
|
64
63
|
const s = Math.abs(t - e) || 0, r = e < t ? 1 : -1;
|
|
65
64
|
return this.arrayFrom(s, (o, n) => n * r + e);
|
|
66
|
-
}),
|
|
65
|
+
}), c(this, "asyncMap", async (e, t) => Promise.all(e.map(t))), c(this, "flatMap", (e = [], t) => e.map(t).reduce((s, r) => [...s, ...r], [])), c(this, "escapeHTML", function(e) {
|
|
67
66
|
const t = {
|
|
68
67
|
"&": "&",
|
|
69
68
|
"<": "<",
|
|
@@ -284,7 +283,7 @@ const B = function(i, e) {
|
|
|
284
283
|
};
|
|
285
284
|
class v {
|
|
286
285
|
constructor(e) {
|
|
287
|
-
|
|
286
|
+
c(this, "marks"), c(this, "nodes"), e || (e = ye), this.marks = e.marks || [], this.nodes = e.nodes || [];
|
|
288
287
|
}
|
|
289
288
|
addNode(e, t) {
|
|
290
289
|
this.nodes[e] = t;
|
|
@@ -334,13 +333,13 @@ class v {
|
|
|
334
333
|
/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,
|
|
335
334
|
`a.storyblok.com/f/$1/$2.$3/m/${l}`
|
|
336
335
|
), typeof t != "boolean" && (t.sizes || t.srcset) && (e = e.replace(/<img.*?src=["|'](.*?)["|']/g, (a) => {
|
|
337
|
-
var
|
|
336
|
+
var u, h;
|
|
338
337
|
const p = a.match(
|
|
339
338
|
/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g
|
|
340
339
|
);
|
|
341
340
|
if (p && p.length > 0) {
|
|
342
341
|
const g = {
|
|
343
|
-
srcset: (
|
|
342
|
+
srcset: (u = t.srcset) == null ? void 0 : u.map((d) => {
|
|
344
343
|
if (typeof d == "number")
|
|
345
344
|
return `//${p}/m/${d}x0${n} ${d}w`;
|
|
346
345
|
if (typeof d == "object" && d.length === 2) {
|
|
@@ -348,7 +347,7 @@ class v {
|
|
|
348
347
|
return typeof d[0] == "number" && (w = d[0]), typeof d[1] == "number" && (S = d[1]), `//${p}/m/${w}x${S}${n} ${w}w`;
|
|
349
348
|
}
|
|
350
349
|
}).join(", "),
|
|
351
|
-
sizes: (
|
|
350
|
+
sizes: (h = t.sizes) == null ? void 0 : h.map((d) => d).join(", ")
|
|
352
351
|
};
|
|
353
352
|
let f = "";
|
|
354
353
|
return g.srcset && (f += `srcset="${g.srcset}" `), g.sizes && (f += `sizes="${g.sizes}" `), a.replace(/<img/g, `<img ${f.trim()}`);
|
|
@@ -376,11 +375,13 @@ class v {
|
|
|
376
375
|
return `<${s}${t}>`;
|
|
377
376
|
{
|
|
378
377
|
let r = `<${s.tag}`;
|
|
379
|
-
if (s.attrs)
|
|
380
|
-
for (const o in s.attrs)
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
378
|
+
if (s.attrs) {
|
|
379
|
+
for (const o in s.attrs)
|
|
380
|
+
if (Object.prototype.hasOwnProperty.call(s.attrs, o)) {
|
|
381
|
+
const n = s.attrs[o];
|
|
382
|
+
n !== null && (r += ` ${o}="${n}"`);
|
|
383
|
+
}
|
|
384
|
+
}
|
|
384
385
|
return `${r}${t}>`;
|
|
385
386
|
}
|
|
386
387
|
}).join("");
|
|
@@ -420,7 +421,7 @@ class v {
|
|
|
420
421
|
}
|
|
421
422
|
class ke {
|
|
422
423
|
constructor(e) {
|
|
423
|
-
|
|
424
|
+
c(this, "baseURL"), c(this, "timeout"), c(this, "headers"), c(this, "responseInterceptor"), c(this, "fetch"), c(this, "ejectInterceptor"), c(this, "url"), c(this, "parameters"), c(this, "fetchOptions"), this.baseURL = e.baseURL, this.headers = e.headers || new Headers(), this.timeout = e != null && e.timeout ? e.timeout * 1e3 : 0, this.responseInterceptor = e.responseInterceptor, this.fetch = (...t) => e.fetch ? e.fetch(...t) : fetch(...t), this.ejectInterceptor = !1, this.url = "", this.parameters = {}, this.fetchOptions = {};
|
|
424
425
|
}
|
|
425
426
|
/**
|
|
426
427
|
*
|
|
@@ -475,10 +476,10 @@ class ke {
|
|
|
475
476
|
...this.fetchOptions
|
|
476
477
|
});
|
|
477
478
|
this.timeout && clearTimeout(l);
|
|
478
|
-
const
|
|
479
|
+
const u = await this._responseHandler(
|
|
479
480
|
a
|
|
480
481
|
);
|
|
481
|
-
return this.responseInterceptor && !this.ejectInterceptor ? this._statusHandler(this.responseInterceptor(
|
|
482
|
+
return this.responseInterceptor && !this.ejectInterceptor ? this._statusHandler(this.responseInterceptor(u)) : this._statusHandler(u);
|
|
482
483
|
} catch (a) {
|
|
483
484
|
return {
|
|
484
485
|
message: a
|
|
@@ -519,7 +520,7 @@ class ve {
|
|
|
519
520
|
* @param endpoint string, optional
|
|
520
521
|
*/
|
|
521
522
|
constructor(e, t) {
|
|
522
|
-
|
|
523
|
+
c(this, "client"), c(this, "maxRetries"), c(this, "retriesDelay"), c(this, "throttle"), c(this, "accessToken"), c(this, "cache"), c(this, "helpers"), c(this, "resolveCounter"), c(this, "relations"), c(this, "links"), c(this, "richTextResolver"), c(this, "resolveNestedRelations"), c(this, "stringifiedStoriesCache");
|
|
523
524
|
let s = e.endpoint || t;
|
|
524
525
|
if (!s) {
|
|
525
526
|
const n = new k().getRegionURL, l = e.https === !1 ? "http" : "https";
|
|
@@ -534,7 +535,7 @@ class ve {
|
|
|
534
535
|
R.packageVersion
|
|
535
536
|
));
|
|
536
537
|
let o = 5;
|
|
537
|
-
e.oauthToken && (r.set("Authorization", e.oauthToken), o = 3), e.rateLimit && (o = e.rateLimit), e.richTextSchema ? this.richTextResolver = new v(e.richTextSchema) : this.richTextResolver = new v(), e.componentResolver && this.setComponentResolver(e.componentResolver), this.maxRetries = e.maxRetries ||
|
|
538
|
+
e.oauthToken && (r.set("Authorization", e.oauthToken), o = 3), e.rateLimit && (o = e.rateLimit), e.richTextSchema ? this.richTextResolver = new v(e.richTextSchema) : this.richTextResolver = new v(), e.componentResolver && this.setComponentResolver(e.componentResolver), this.maxRetries = e.maxRetries || 10, this.retriesDelay = 300, this.throttle = F(this.throttledRequest, o, 1e3), this.accessToken = e.accessToken || "", this.relations = {}, this.links = {}, this.cache = e.cache || { clear: "manual" }, this.helpers = new k(), this.resolveCounter = 0, this.resolveNestedRelations = e.resolveNestedRelations || !0, this.stringifiedStoriesCache = {}, this.client = new ke({
|
|
538
539
|
baseURL: s,
|
|
539
540
|
timeout: e.timeout || 0,
|
|
540
541
|
headers: r,
|
|
@@ -558,47 +559,51 @@ class ve {
|
|
|
558
559
|
factoryParamOptions(e, t) {
|
|
559
560
|
return this.helpers.isCDNUrl(e) ? this.parseParams(t) : t;
|
|
560
561
|
}
|
|
561
|
-
makeRequest(e, t, s, r) {
|
|
562
|
-
const
|
|
562
|
+
makeRequest(e, t, s, r, o) {
|
|
563
|
+
const n = this.factoryParamOptions(
|
|
563
564
|
e,
|
|
564
565
|
this.helpers.getOptionsPage(t, s, r)
|
|
565
566
|
);
|
|
566
|
-
return this.cacheResponse(e, o);
|
|
567
|
+
return this.cacheResponse(e, n, void 0, o);
|
|
567
568
|
}
|
|
568
569
|
get(e, t, s) {
|
|
569
570
|
t || (t = {});
|
|
570
571
|
const r = `/${e}`, o = this.factoryParamOptions(r, t);
|
|
571
|
-
return this.
|
|
572
|
+
return this.cacheResponse(r, o, void 0, s);
|
|
572
573
|
}
|
|
573
574
|
async getAll(e, t, s, r) {
|
|
574
|
-
const o = (t == null ? void 0 : t.per_page) || 25, n = `/${e}`, l = n.split("/"), a = s || l[l.length - 1],
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
575
|
+
const o = (t == null ? void 0 : t.per_page) || 25, n = `/${e}`, l = n.split("/"), a = s || l[l.length - 1], u = 1, h = await this.makeRequest(
|
|
576
|
+
n,
|
|
577
|
+
t,
|
|
578
|
+
o,
|
|
579
|
+
u,
|
|
580
|
+
r
|
|
581
|
+
), p = h.total ? Math.ceil(h.total / o) : 1, g = await this.helpers.asyncMap(
|
|
582
|
+
this.helpers.range(u, p),
|
|
583
|
+
(f) => this.makeRequest(n, t, o, f + 1, r)
|
|
579
584
|
);
|
|
580
585
|
return this.helpers.flatMap(
|
|
581
|
-
[
|
|
586
|
+
[h, ...g],
|
|
582
587
|
(f) => Object.values(f.data[a])
|
|
583
588
|
);
|
|
584
589
|
}
|
|
585
590
|
post(e, t, s) {
|
|
586
591
|
const r = `/${e}`;
|
|
587
|
-
return
|
|
592
|
+
return Promise.resolve(this.throttle("post", r, t, s));
|
|
588
593
|
}
|
|
589
594
|
put(e, t, s) {
|
|
590
595
|
const r = `/${e}`;
|
|
591
|
-
return
|
|
596
|
+
return Promise.resolve(this.throttle("put", r, t, s));
|
|
592
597
|
}
|
|
593
598
|
delete(e, t, s) {
|
|
594
599
|
const r = `/${e}`;
|
|
595
|
-
return
|
|
600
|
+
return Promise.resolve(this.throttle("delete", r, t, s));
|
|
596
601
|
}
|
|
597
602
|
getStories(e, t) {
|
|
598
|
-
return this.
|
|
603
|
+
return this._addResolveLevel(e), this.get("cdn/stories", e, t);
|
|
599
604
|
}
|
|
600
605
|
getStory(e, t, s) {
|
|
601
|
-
return this.
|
|
606
|
+
return this._addResolveLevel(t), this.get(`cdn/stories/${e}`, t, s);
|
|
602
607
|
}
|
|
603
608
|
getToken() {
|
|
604
609
|
return this.accessToken;
|
|
@@ -660,8 +665,8 @@ class ve {
|
|
|
660
665
|
if (e.link_uuids) {
|
|
661
666
|
const o = e.link_uuids.length, n = [], l = 50;
|
|
662
667
|
for (let a = 0; a < o; a += l) {
|
|
663
|
-
const
|
|
664
|
-
n.push(e.link_uuids.slice(a,
|
|
668
|
+
const u = Math.min(o, a + l);
|
|
669
|
+
n.push(e.link_uuids.slice(a, u));
|
|
665
670
|
}
|
|
666
671
|
for (let a = 0; a < n.length; a++)
|
|
667
672
|
(await this.getStories({
|
|
@@ -670,8 +675,8 @@ class ve {
|
|
|
670
675
|
version: t.version,
|
|
671
676
|
by_uuids: n[a].join(",")
|
|
672
677
|
})).data.stories.forEach(
|
|
673
|
-
(
|
|
674
|
-
r.push(
|
|
678
|
+
(u) => {
|
|
679
|
+
r.push(u);
|
|
675
680
|
}
|
|
676
681
|
);
|
|
677
682
|
} else
|
|
@@ -688,8 +693,8 @@ class ve {
|
|
|
688
693
|
if (e.rel_uuids) {
|
|
689
694
|
const o = e.rel_uuids.length, n = [], l = 50;
|
|
690
695
|
for (let a = 0; a < o; a += l) {
|
|
691
|
-
const
|
|
692
|
-
n.push(e.rel_uuids.slice(a,
|
|
696
|
+
const u = Math.min(o, a + l);
|
|
697
|
+
n.push(e.rel_uuids.slice(a, u));
|
|
693
698
|
}
|
|
694
699
|
for (let a = 0; a < n.length; a++)
|
|
695
700
|
(await this.getStories({
|
|
@@ -698,8 +703,8 @@ class ve {
|
|
|
698
703
|
version: t.version,
|
|
699
704
|
by_uuids: n[a].join(","),
|
|
700
705
|
excluding_fields: t.excluding_fields
|
|
701
|
-
})).data.stories.forEach((
|
|
702
|
-
r.push(
|
|
706
|
+
})).data.stories.forEach((u) => {
|
|
707
|
+
r.push(u);
|
|
703
708
|
});
|
|
704
709
|
} else
|
|
705
710
|
r = e.rels;
|
|
@@ -733,38 +738,39 @@ class ve {
|
|
|
733
738
|
this.iterateTree(l, n, s);
|
|
734
739
|
}), this.stringifiedStoriesCache = {}, delete this.links[s], delete this.relations[s];
|
|
735
740
|
}
|
|
736
|
-
async cacheResponse(e, t, s) {
|
|
737
|
-
(
|
|
738
|
-
const r = this.helpers.stringify({ url: e, params: t }), o = this.cacheProvider();
|
|
741
|
+
async cacheResponse(e, t, s, r) {
|
|
742
|
+
const o = this.helpers.stringify({ url: e, params: t }), n = this.cacheProvider();
|
|
739
743
|
if (this.cache.clear === "auto" && t.version === "draft" && await this.flushCache(), t.version === "published" && e != "/cdn/spaces/me") {
|
|
740
|
-
const
|
|
741
|
-
if (
|
|
742
|
-
return Promise.resolve(
|
|
744
|
+
const l = await n.get(o);
|
|
745
|
+
if (l)
|
|
746
|
+
return Promise.resolve(l);
|
|
743
747
|
}
|
|
744
|
-
return new Promise(async (
|
|
745
|
-
var
|
|
748
|
+
return new Promise(async (l, a) => {
|
|
749
|
+
var u;
|
|
746
750
|
try {
|
|
747
|
-
const
|
|
748
|
-
if (
|
|
749
|
-
return
|
|
750
|
-
let
|
|
751
|
-
if ((
|
|
752
|
-
perPage:
|
|
753
|
-
total:
|
|
754
|
-
})),
|
|
755
|
-
const
|
|
756
|
-
await this.resolveStories(
|
|
751
|
+
const h = await this.throttle("get", e, t, r);
|
|
752
|
+
if (h.status !== 200)
|
|
753
|
+
return a(h);
|
|
754
|
+
let p = { data: h.data, headers: h.headers };
|
|
755
|
+
if ((u = h.headers) != null && u["per-page"] && (p = Object.assign({}, p, {
|
|
756
|
+
perPage: h.headers["per-page"] ? parseInt(h.headers["per-page"]) : 0,
|
|
757
|
+
total: h.headers["per-page"] ? parseInt(h.headers.total) : 0
|
|
758
|
+
})), p.data.story || p.data.stories) {
|
|
759
|
+
const g = this.resolveCounter = ++this.resolveCounter % 1e3;
|
|
760
|
+
await this.resolveStories(p.data, t, `${g}`);
|
|
757
761
|
}
|
|
758
|
-
return t.version === "published" && e != "/cdn/spaces/me" && await
|
|
759
|
-
} catch (
|
|
760
|
-
if (
|
|
761
|
-
return console.log(
|
|
762
|
-
|
|
762
|
+
return t.version === "published" && e != "/cdn/spaces/me" && await n.set(o, p), p.data.cv && t.token && (t.version === "draft" && m[t.token] != p.data.cv && await this.flushCache(), m[t.token] = t.cv ? t.cv : p.data.cv), l(p);
|
|
763
|
+
} catch (h) {
|
|
764
|
+
if (h.response && h.status === 429 && (s = typeof s > "u" ? 0 : s + 1, s < this.maxRetries))
|
|
765
|
+
return console.log(
|
|
766
|
+
`Hit rate limit. Retrying in ${this.retriesDelay / 1e3} seconds.`
|
|
767
|
+
), await this.helpers.delay(this.retriesDelay), this.cacheResponse(e, t, s).then(l).catch(a);
|
|
768
|
+
a(h);
|
|
763
769
|
}
|
|
764
770
|
});
|
|
765
771
|
}
|
|
766
|
-
throttledRequest(e, t, s) {
|
|
767
|
-
return this.client[e](t, s);
|
|
772
|
+
throttledRequest(e, t, s, r) {
|
|
773
|
+
return this.client.setFetchOptions(r), this.client[e](t, s);
|
|
768
774
|
}
|
|
769
775
|
cacheVersions() {
|
|
770
776
|
return m;
|
|
@@ -843,7 +849,7 @@ const Ce = (i = {}) => {
|
|
|
843
849
|
return {};
|
|
844
850
|
}
|
|
845
851
|
};
|
|
846
|
-
let T,
|
|
852
|
+
let T, I = "https://app.storyblok.com/f/storyblok-v2-latest.js";
|
|
847
853
|
const $e = (i, e, t = {}) => {
|
|
848
854
|
var s;
|
|
849
855
|
const r = !(typeof window > "u") && typeof window.storyblokRegisterEvent < "u", o = +new URL((s = window.location) == null ? void 0 : s.href).searchParams.get(
|
|
@@ -871,14 +877,14 @@ const $e = (i, e, t = {}) => {
|
|
|
871
877
|
bridgeUrl: a
|
|
872
878
|
} = i;
|
|
873
879
|
n.accessToken = n.accessToken || r;
|
|
874
|
-
const
|
|
875
|
-
let
|
|
880
|
+
const u = { bridge: s, apiOptions: n };
|
|
881
|
+
let h = {};
|
|
876
882
|
o.forEach((g) => {
|
|
877
|
-
|
|
878
|
-
}), a && (
|
|
883
|
+
h = { ...h, ...g(u) };
|
|
884
|
+
}), a && (I = a);
|
|
879
885
|
const p = !(typeof window > "u") && ((t = (e = window.location) == null ? void 0 : e.search) == null ? void 0 : t.includes("_storyblok_tk"));
|
|
880
|
-
return s !== !1 && p &&
|
|
881
|
-
},
|
|
886
|
+
return s !== !1 && p && V(I), T = new v(l.schema), l.resolver && E(T, l.resolver), h;
|
|
887
|
+
}, E = (i, e) => {
|
|
882
888
|
i.addNode("blok", (t) => {
|
|
883
889
|
let s = "";
|
|
884
890
|
return t.attrs.body.forEach((r) => {
|
|
@@ -895,8 +901,8 @@ const $e = (i, e, t = {}) => {
|
|
|
895
901
|
);
|
|
896
902
|
return;
|
|
897
903
|
}
|
|
898
|
-
return _e(i) ? "" : (e && (s = new v(e.schema), e.resolver &&
|
|
899
|
-
}, Te = /* @__PURE__ */
|
|
904
|
+
return _e(i) ? "" : (e && (s = new v(e.schema), e.resolver && E(s, e.resolver)), s.render(i));
|
|
905
|
+
}, Te = /* @__PURE__ */ O({
|
|
900
906
|
__name: "StoryblokComponent",
|
|
901
907
|
props: {
|
|
902
908
|
blok: {}
|
|
@@ -911,7 +917,7 @@ const $e = (i, e, t = {}) => {
|
|
|
911
917
|
`Is the Fallback component "${n.value}" registered properly?`
|
|
912
918
|
)) : console.error(
|
|
913
919
|
`Component could not be found for blok "${t.blok.component}"! Is it defined in main.ts as "app.component("${t.blok.component}", ${t.blok.component});"?`
|
|
914
|
-
)), (l, a) => (L(), M($(n.value),
|
|
920
|
+
)), (l, a) => (L(), M($(n.value), z({
|
|
915
921
|
ref_key: "blokRef",
|
|
916
922
|
ref: s
|
|
917
923
|
}, { ...l.$props, ...l.$attrs }), null, 16));
|
|
@@ -923,14 +929,14 @@ const $e = (i, e, t = {}) => {
|
|
|
923
929
|
Object.keys(t).length > 0 && (i.setAttribute("data-blok-c", t["data-blok-c"]), i.setAttribute("data-blok-uid", t["data-blok-uid"]), i.classList.add("storyblok__outline"));
|
|
924
930
|
}
|
|
925
931
|
}
|
|
926
|
-
},
|
|
932
|
+
}, A = (i) => {
|
|
927
933
|
console.error(`You can't use ${i} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
928
934
|
`);
|
|
929
935
|
};
|
|
930
936
|
let y = null;
|
|
931
|
-
const Pe = () => (y ||
|
|
937
|
+
const Pe = () => (y || A("useStoryblokApi"), y), Ie = async (i, e = {}, t = {}) => {
|
|
932
938
|
const s = _(null);
|
|
933
|
-
if (t.resolveRelations = t.resolveRelations ?? e.resolve_relations, t.resolveLinks = t.resolveLinks ?? e.resolve_links,
|
|
939
|
+
if (t.resolveRelations = t.resolveRelations ?? e.resolve_relations, t.resolveLinks = t.resolveLinks ?? e.resolve_links, U(() => {
|
|
934
940
|
s.value && s.value.id && $e(
|
|
935
941
|
s.value.id,
|
|
936
942
|
(r) => s.value = r,
|
|
@@ -942,14 +948,13 @@ const Pe = () => (y || E("useStoryblokApi"), y), Oe = async (i, e = {}, t = {})
|
|
|
942
948
|
e
|
|
943
949
|
);
|
|
944
950
|
s.value = r.story;
|
|
945
|
-
} else
|
|
946
|
-
E("useStoryblok");
|
|
951
|
+
} else A("useStoryblok");
|
|
947
952
|
return s;
|
|
948
|
-
},
|
|
953
|
+
}, Ee = {
|
|
949
954
|
install(i, e = {}) {
|
|
950
955
|
i.directive("editable", Se), i.component("StoryblokComponent", Te), e.enableFallbackComponent && !e.customFallbackComponent && i.component(
|
|
951
956
|
"FallbackComponent",
|
|
952
|
-
|
|
957
|
+
H(() => import("./FallbackComponent-D9TGQNbC.mjs"))
|
|
953
958
|
);
|
|
954
959
|
const { storyblokApi: t } = Re(e);
|
|
955
960
|
y = t, i.provide("VueSDKOptions", e);
|
|
@@ -959,10 +964,10 @@ export {
|
|
|
959
964
|
v as RichTextResolver,
|
|
960
965
|
ye as RichTextSchema,
|
|
961
966
|
Te as StoryblokComponent,
|
|
962
|
-
|
|
967
|
+
Ee as StoryblokVue,
|
|
963
968
|
Ce as apiPlugin,
|
|
964
969
|
xe as renderRichText,
|
|
965
|
-
|
|
970
|
+
Ie as useStoryblok,
|
|
966
971
|
Pe as useStoryblokApi,
|
|
967
972
|
$e as useStoryblokBridge
|
|
968
973
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/vue",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.9",
|
|
4
4
|
"description": "Storyblok directive for get editable elements.",
|
|
5
5
|
"main": "./dist/storyblok-vue.js",
|
|
6
6
|
"module": "./dist/storyblok-vue.mjs",
|
|
@@ -25,25 +25,25 @@
|
|
|
25
25
|
"prepublishOnly": "npm run build && cp ../README.md ./"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@storyblok/js": "^3.0.
|
|
28
|
+
"@storyblok/js": "^3.0.9"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@babel/core": "^7.24.
|
|
32
|
-
"@cypress/vite-dev-server": "^5.0
|
|
31
|
+
"@babel/core": "^7.24.7",
|
|
32
|
+
"@cypress/vite-dev-server": "^5.1.0",
|
|
33
33
|
"@cypress/vue": "^6.0.0",
|
|
34
|
-
"@vitejs/plugin-vue": "^5.0.
|
|
34
|
+
"@vitejs/plugin-vue": "^5.0.5",
|
|
35
35
|
"@vue/babel-preset-app": "^5.0.8",
|
|
36
|
-
"@vue/test-utils": "2.4.
|
|
36
|
+
"@vue/test-utils": "2.4.6",
|
|
37
37
|
"@vue/tsconfig": "^0.1.3",
|
|
38
38
|
"@vue/vue3-jest": "^29.2.6",
|
|
39
39
|
"babel-jest": "^29.4.3",
|
|
40
|
-
"cypress": "^13.
|
|
40
|
+
"cypress": "^13.11.0",
|
|
41
41
|
"eslint-plugin-cypress": "^2.15.1",
|
|
42
|
-
"eslint-plugin-jest": "^28.
|
|
42
|
+
"eslint-plugin-jest": "^28.5.0",
|
|
43
43
|
"jest": "^29.6.4",
|
|
44
44
|
"typescript": "^4.9.5",
|
|
45
|
-
"vite": "^5.
|
|
46
|
-
"vue": "^3.4.
|
|
45
|
+
"vite": "^5.4.1",
|
|
46
|
+
"vue": "^3.4.27",
|
|
47
47
|
"vue-tsc": "^1.8.0"
|
|
48
48
|
},
|
|
49
49
|
"babel": {
|