@storyblok/vue 7.1.2 → 7.1.4
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 -1
- package/dist/storyblok-vue.js +3 -3
- package/dist/storyblok-vue.mjs +125 -125
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -275,7 +275,7 @@ Is equivalent to the following, using `useStoryblokBridge` and `useStoryblokApi`
|
|
|
275
275
|
|
|
276
276
|
#### Storyblok API
|
|
277
277
|
|
|
278
|
-
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).
|
|
278
|
+
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).
|
|
279
279
|
|
|
280
280
|
```js
|
|
281
281
|
app.use(StoryblokVue, {
|
|
@@ -294,6 +294,28 @@ If you prefer to use your own fetch method, just remove the `apiPlugin` and `sto
|
|
|
294
294
|
app.use(StoryblokVue);
|
|
295
295
|
```
|
|
296
296
|
|
|
297
|
+
#### Region parameter
|
|
298
|
+
|
|
299
|
+
Possible values:
|
|
300
|
+
|
|
301
|
+
- `eu` (default): For spaces created in the EU
|
|
302
|
+
- `us`: For spaces created in the US
|
|
303
|
+
- `cn`: For spaces created in China
|
|
304
|
+
|
|
305
|
+
Full example for a space created in the US:
|
|
306
|
+
|
|
307
|
+
```js
|
|
308
|
+
app.use(StoryblokVue, {
|
|
309
|
+
accessToken: "<your-token>",
|
|
310
|
+
use: [apiPlugin],
|
|
311
|
+
apiOptions: {
|
|
312
|
+
region: "us",
|
|
313
|
+
},
|
|
314
|
+
});
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
> Note: For spaces created in the United States or China, the `region` parameter **must** be specified.
|
|
318
|
+
|
|
297
319
|
#### Storyblok Bridge
|
|
298
320
|
|
|
299
321
|
You can conditionally load it by using the `bridge` option. Very useful if you want to disable it in production:
|
|
@@ -318,6 +340,10 @@ sbBridge.on(["input", "published", "change"], (event) => {
|
|
|
318
340
|
|
|
319
341
|
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.
|
|
320
342
|
|
|
343
|
+
## The Storyblok JavaScript SDK Ecosystem
|
|
344
|
+
|
|
345
|
+

|
|
346
|
+
|
|
321
347
|
## 🔗 Related Links
|
|
322
348
|
|
|
323
349
|
- **[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.
|
package/dist/storyblok-vue.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.storyblokVue={},d.Vue))})(this,function(d,p){"use strict";let R=!1;const j=[],O=i=>new Promise((t,e)=>{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}R?r():j.push(r)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=i,s.id="storyblok-javascript-bridge",s.onerror=r=>e(r),s.onload=r=>{j.forEach(o=>o()),R=!0,t(r)},document.getElementsByTagName("head")[0].appendChild(s)});var M=Object.defineProperty,N=(i,t,e)=>t in i?M(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e,h=(i,t,e)=>(N(i,typeof t!="symbol"?t+"":t,e),e);function P(i){return!(i!==i||i===1/0||i===-1/0)}function z(i,t,e){if(!P(t))throw new TypeError("Expected `limit` to be a finite number");if(!P(e))throw new TypeError("Expected `interval` to be a finite number");const s=[];let r=[],o=0;const n=function(){o++;const a=setTimeout(function(){o--,s.length>0&&n(),r=r.filter(function(u){return u!==a})},e);r.indexOf(a)<0&&r.push(a);const l=s.shift();l.resolve(i.apply(l.self,l.args))},c=function(...a){const l=this;return new Promise(function(u,g){s.push({resolve:u,reject:g,args:a,self:l}),o<t&&n()})};return c.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},c}const L=function(i,t){const e={};for(const s in i){const r=i[s];t.indexOf(s)>-1&&r!==null&&(e[s]=r)}return e},U=i=>i==="email",q=()=>({singleTag:"hr"}),H=()=>({tag:"blockquote"}),V=()=>({tag:"ul"}),D=i=>({tag:["pre",{tag:"code",attrs:i.attrs}]}),B=()=>({singleTag:"br"}),J=i=>({tag:`h${i.attrs.level}`}),F=i=>({singleTag:[{tag:"img",attrs:L(i.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),K=()=>({tag:"ol"}),G=()=>({tag:"p"}),Q=i=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:i.attrs.name,emoji:i.attrs.emoji}}]}),W=()=>({tag:"b"}),X=()=>({tag:"strike"}),Z=()=>({tag:"u"}),tt=()=>({tag:"strong"}),et=()=>({tag:"code"}),st=()=>({tag:"i"}),rt=i=>{const t={...i.attrs},{linktype:e="url"}=i.attrs;if(U(e)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),t.custom){for(const s in t.custom)t[s]=t.custom[s];delete t.custom}return{tag:[{tag:"a",attrs:t}]}},ot=i=>({tag:[{tag:"span",attrs:i.attrs}]}),it=()=>({tag:"sub"}),nt=()=>({tag:"sup"}),at=i=>({tag:[{tag:"span",attrs:i.attrs}]}),lt=i=>({tag:[{tag:"span",attrs:{style:`background-color:${i.attrs.color};`}}]}),ct=i=>({tag:[{tag:"span",attrs:{style:`background-color:${i.attrs.color}`}}]}),S={nodes:{horizontal_rule:q,blockquote:H,bullet_list:V,code_block:D,hard_break:B,heading:J,image:F,list_item:Y,ordered_list:K,paragraph:G,emoji:Q},marks:{bold:W,strike:X,underline:Z,strong:tt,code:et,italic:st,link:rt,styled:ot,subscript:it,superscript:nt,anchor:at,highlight:lt,textStyle:ct}},ht=function(i){const t={"&":"&","<":"<",">":">",'"':""","'":"'"},e=/[&<>"']/g,s=RegExp(e.source);return i&&s.test(i)?i.replace(e,r=>t[r]):i};class b{constructor(t){h(this,"marks"),h(this,"nodes"),t||(t=S),this.marks=t.marks||[],this.nodes=t.nodes||[]}addNode(t,e){this.nodes[t]=e}addMark(t,e){this.marks[t]=e}render(t,e={optimizeImages:!1}){if(t&&t.content&&Array.isArray(t.content)){let s="";return t.content.forEach(r=>{s+=this.renderNode(r)}),e.optimizeImages?this.optimizeImages(s,e.optimizeImages):s}return console.warn("The render method must receive an object with a content field, which is an array"),""}optimizeImages(t,e){let s=0,r=0,o="",n="";typeof e!="boolean"&&(typeof e.width=="number"&&e.width>0&&(o+=`width="${e.width}" `,s=e.width),typeof e.height=="number"&&e.height>0&&(o+=`height="${e.height}" `,r=e.height),(e.loading==="lazy"||e.loading==="eager")&&(o+=`loading="${e.loading}" `),typeof e.class=="string"&&e.class.length>0&&(o+=`class="${e.class}" `),e.filters&&(typeof e.filters.blur=="number"&&e.filters.blur>=0&&e.filters.blur<=100&&(n+=`:blur(${e.filters.blur})`),typeof e.filters.brightness=="number"&&e.filters.brightness>=-100&&e.filters.brightness<=100&&(n+=`:brightness(${e.filters.brightness})`),e.filters.fill&&(e.filters.fill.match(/[0-9A-Fa-f]{6}/g)||e.filters.fill==="transparent")&&(n+=`:fill(${e.filters.fill})`),e.filters.format&&["webp","png","jpeg"].includes(e.filters.format)&&(n+=`:format(${e.filters.format})`),typeof e.filters.grayscale=="boolean"&&e.filters.grayscale&&(n+=":grayscale()"),typeof e.filters.quality=="number"&&e.filters.quality>=0&&e.filters.quality<=100&&(n+=`:quality(${e.filters.quality})`),e.filters.rotate&&[90,180,270].includes(e.filters.rotate)&&(n+=`:rotate(${e.filters.rotate})`),n.length>0&&(n="/filters"+n))),o.length>0&&(t=t.replace(/<img/g,`<img ${o.trim()}`));const c=s>0||r>0||n.length>0?`${s}x${r}${n}`:"";return t=t.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof e!="boolean"&&(e.sizes||e.srcset)&&(t=t.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var l,u;const g=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(g&&g.length>0){const m={srcset:(l=e.srcset)==null?void 0:l.map(f=>{if(typeof f=="number")return`//${g}/m/${f}x0${n} ${f}w`;if(typeof f=="object"&&f.length===2){let _=0,A=0;return typeof f[0]=="number"&&(_=f[0]),typeof f[1]=="number"&&(A=f[1]),`//${g}/m/${_}x${A}${n} ${_}w`}}).join(", "),sizes:(u=e.sizes)==null?void 0:u.map(f=>f).join(", ")};let T="";return m.srcset&&(T+=`srcset="${m.srcset}" `),m.sizes&&(T+=`sizes="${m.sizes}" `),a.replace(/<img/g,`<img ${T.trim()}`)}return a})),t}renderNode(t){const e=[];t.marks&&t.marks.forEach(r=>{const o=this.getMatchingMark(r);o&&e.push(this.renderOpeningTag(o.tag))});const s=this.getMatchingNode(t);return s&&s.tag&&e.push(this.renderOpeningTag(s.tag)),t.content?t.content.forEach(r=>{e.push(this.renderNode(r))}):t.text?e.push(ht(t.text)):s&&s.singleTag?e.push(this.renderTag(s.singleTag," /")):s&&s.html?e.push(s.html):t.type==="emoji"&&e.push(this.renderEmoji(t)),s&&s.tag&&e.push(this.renderClosingTag(s.tag)),t.marks&&t.marks.slice(0).reverse().forEach(r=>{const o=this.getMatchingMark(r);o&&e.push(this.renderClosingTag(o.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(s=>{if(s.constructor===String)return`<${s}${e}>`;{let r=`<${s.tag}`;if(s.attrs)for(const o in s.attrs){const n=s.attrs[o];n!==null&&(r+=` ${o}="${n}"`)}return`${r}${e}>`}}).join("")}renderOpeningTag(t){return this.renderTag(t,"")}renderClosingTag(t){return t.constructor===String?`</${t}>`:t.slice(0).reverse().map(e=>e.constructor===String?`</${e}>`:`</${e.tag}>`).join("")}getMatchingNode(t){const e=this.nodes[t.type];if(typeof e=="function")return e(t)}getMatchingMark(t){const e=this.marks[t.type];if(typeof e=="function")return e(t)}renderEmoji(t){if(t.attrs.emoji)return t.attrs.emoji;const e=[{tag:"img",attrs:{src:t.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(e," /")}}class w{constructor(){h(this,"isCDNUrl",(t="")=>t.indexOf("/cdn/")>-1),h(this,"getOptionsPage",(t,e=25,s=1)=>({...t,per_page:e,page:s})),h(this,"delay",t=>new Promise(e=>setTimeout(e,t))),h(this,"arrayFrom",(t=0,e)=>[...Array(t)].map(e)),h(this,"range",(t=0,e=t)=>{const s=Math.abs(e-t)||0,r=t<e?1:-1;return this.arrayFrom(s,(o,n)=>n*r+t)}),h(this,"asyncMap",async(t,e)=>Promise.all(t.map(e))),h(this,"flatMap",(t=[],e)=>t.map(e).reduce((s,r)=>[...s,...r],[]))}stringify(t,e,s){const r=[];for(const o in t){if(!Object.prototype.hasOwnProperty.call(t,o))continue;const n=t[o],c=s?"":encodeURIComponent(o);let a;typeof n=="object"?a=this.stringify(n,e?e+encodeURIComponent("["+c+"]"):c,Array.isArray(n)):a=(e?e+encodeURIComponent("["+c+"]"):c)+"="+encodeURIComponent(n),r.push(a)}return r.join("&")}getRegionURL(t){const e="api.storyblok.com",s="api-us.storyblok.com",r="app.storyblokchina.cn";switch(t){case"us":return s;case"cn":return r;default:return e}}}class ut{constructor(t){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=t.baseURL,this.headers=t.headers||new Headers,this.timeout=t!=null&&t.timeout?t.timeout*1e3:0,this.responseInterceptor=t.responseInterceptor,this.fetch=(...e)=>t.fetch?t.fetch(...e):fetch(...e),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(t,e){return this.url=t,this.parameters=e,this._methodHandler("get")}post(t,e){return this.url=t,this.parameters=e,this._methodHandler("post")}put(t,e){return this.url=t,this.parameters=e,this._methodHandler("put")}delete(t,e){return this.url=t,this.parameters=e,this._methodHandler("delete")}async _responseHandler(t){const e=new Map,s={data:{},headers:{},status:0,statusText:""};t.status!==204&&await t.json().then(r=>{s.data=r});for(const[r,o]of t.headers.entries())e.set(r,o);return s.headers={...e},s.status=t.status,s.statusText=t.statusText,s}async _methodHandler(t){let e=`${this.baseURL}${this.url}`,s=null;if(t==="get"){const a=new w;e=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(e),o=new AbortController,{signal:n}=o;let c;this.timeout&&(c=setTimeout(()=>o.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:t,headers:this.headers,body:s,signal:n});this.timeout&&clearTimeout(c);const l=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(l)):this._statusHandler(l)}catch(a){return{message:a}}}eject(){this.ejectInterceptor=!0}_statusHandler(t){const e=/20[0-6]/g;return new Promise((s,r)=>{if(e.test(`${t.status}`))return s(t);const o={message:new Error(t.statusText),status:t.status,response:Array.isArray(t.data)?t.data[0]:t.data.error||t.data.slug};r(o)})}}let v={};const y={};class dt{constructor(t,e){if(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"),!e){const o=new w().getRegionURL,n=t.https===!1?"http":"https";t.oauthToken?e=`${n}://${o(t.region)}/v1`:e=`${n}://${o(t.region)}/v2`}const s=new Headers;s.set("Content-Type","application/json"),s.set("Accept","application/json"),s.forEach((o,n)=>{t.headers&&t.headers[n]&&s.set(n,t.headers[n])});let r=5;t.oauthToken&&(s.set("Authorization",t.oauthToken),r=3),t.rateLimit&&(r=t.rateLimit),t.richTextSchema?this.richTextResolver=new b(t.richTextSchema):this.richTextResolver=new b,t.componentResolver&&this.setComponentResolver(t.componentResolver),this.maxRetries=t.maxRetries,this.throttle=z(this.throttledRequest,r,1e3),this.accessToken=t.accessToken||"",this.relations={},this.links={},this.cache=t.cache||{clear:"manual"},this.helpers=new w,this.resolveCounter=0,this.resolveNestedRelations=t.resolveNestedRelations||!0,this.client=new ut({baseURL:e,timeout:t.timeout||0,headers:s,responseInterceptor:t.responseInterceptor,fetch:t.fetch})}setComponentResolver(t){this.richTextResolver.addNode("blok",e=>{let s="";return e.attrs.body.forEach(r=>{s+=t(r.component,r)}),{html:s}})}parseParams(t){return t.version||(t.version="published"),t.token||(t.token=this.getToken()),t.cv||(t.cv=y[t.token]),Array.isArray(t.resolve_relations)&&(t.resolve_relations=t.resolve_relations.join(",")),t}factoryParamOptions(t,e){return this.helpers.isCDNUrl(t)?this.parseParams(e):e}makeRequest(t,e,s,r){const o=this.factoryParamOptions(t,this.helpers.getOptionsPage(e,s,r));return this.cacheResponse(t,o)}get(t,e){e||(e={});const s=`/${t}`,r=this.factoryParamOptions(s,e);return this.cacheResponse(s,r)}async getAll(t,e,s){const r=(e==null?void 0:e.per_page)||25,o=`/${t}`,n=o.split("/"),c=s||n[n.length-1],a=1,l=await this.makeRequest(o,e,r,a),u=l.total?Math.ceil(l.total/r):1,g=await this.helpers.asyncMap(this.helpers.range(a,u),m=>this.makeRequest(o,e,r,m+1));return this.helpers.flatMap([l,...g],m=>Object.values(m.data[c]))}post(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("post",s,e))}put(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("put",s,e))}delete(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("delete",s,e))}getStories(t){return this.get("cdn/stories",t)}getStory(t,e){return this.get(`cdn/stories/${t}`,e)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(t){return JSON.parse(JSON.stringify(t))}_insertLinks(t,e,s){const r=t[e];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]))}_insertRelations(t,e,s,r){if(s.indexOf(`${t.component}.${e}`)>-1){if(typeof t[e]=="string")this.relations[r][t[e]]&&(t[e]=this._cleanCopy(this.relations[r][t[e]]));else if(t[e]&&t[e].constructor===Array){const o=[];t[e].forEach(n=>{this.relations[r][n]&&o.push(this._cleanCopy(this.relations[r][n]))}),t[e]=o}}}iterateTree(t,e,s){const r=o=>{if(o!=null){if(o.constructor===Array)for(let n=0;n<o.length;n++)r(o[n]);else if(o.constructor===Object){if(o._stopResolving)return;for(const n in o)(o.component&&o._uid||o.type==="link")&&(this._insertRelations(o,n,e,s),this._insertLinks(o,n,s)),r(o[n])}}};r(t.content)}async resolveLinks(t,e,s){let r=[];if(t.link_uuids){const o=t.link_uuids.length,n=[],c=50;for(let a=0;a<o;a+=c){const l=Math.min(o,a+c);n.push(t.link_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:e.language,version:e.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=t.links;r.forEach(o=>{this.links[s][o.uuid]={...o,_stopResolving:!0}})}async resolveRelations(t,e,s){let r=[];if(t.rel_uuids){const o=t.rel_uuids.length,n=[],c=50;for(let a=0;a<o;a+=c){const l=Math.min(o,a+c);n.push(t.rel_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:e.language,version:e.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=t.rels;r&&r.length>0&&r.forEach(o=>{this.relations[s][o.uuid]={...o,_stopResolving:!0}})}async resolveStories(t,e,s){var r,o;let n=[];if(this.links[s]={},this.relations[s]={},typeof e.resolve_relations<"u"&&e.resolve_relations.length>0&&(typeof e.resolve_relations=="string"&&(n=e.resolve_relations.split(",")),await this.resolveRelations(t,e,s)),e.resolve_links&&["1","story","url"].indexOf(e.resolve_links)>-1&&((r=t.links)!=null&&r.length||(o=t.link_uuids)!=null&&o.length)&&await this.resolveLinks(t,e,s),this.resolveNestedRelations)for(const c in this.relations[s])this.iterateTree(this.relations[s][c],n,s);t.story?this.iterateTree(t.story,n,s):t.stories.forEach(c=>{this.iterateTree(c,n,s)}),delete this.links[s],delete this.relations[s]}async cacheResponse(t,e,s){const r=this.helpers.stringify({url:t,params:e}),o=this.cacheProvider();if(this.cache.clear==="auto"&&e.version==="draft"&&await this.flushCache(),e.version==="published"&&t!="/cdn/spaces/me"){const n=await o.get(r);if(n)return Promise.resolve(n)}return new Promise((n,c)=>{try{(async()=>{var a;try{const l=await this.throttle("get",t,e);let u={data:l.data,headers:l.headers};if((a=l.headers)!=null&&a["per-page"]&&(u=Object.assign({},u,{perPage:l.headers["per-page"]?parseInt(l.headers["per-page"]):0,total:l.headers["per-page"]?parseInt(l.headers.total):0})),l.status!=200)return c(l);if(u.data.story||u.data.stories){const g=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(u.data,e,`${g}`)}return e.version==="published"&&t!="/cdn/spaces/me"&&await o.set(r,u),u.data.cv&&e.token&&(e.version=="draft"&&y[e.token]!=u.data.cv&&await this.flushCache(),y[e.token]=u.data.cv),n(u)}catch(l){return c(l)}})()}catch{}})}throttledRequest(t,e,s){return this.client[t](e,s)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(t){this.accessToken&&(y[this.accessToken]=t)}cacheProvider(){switch(this.cache.type){case"memory":return{get(t){return Promise.resolve(v[t])},getAll(){return Promise.resolve(v)},set(t,e){return v[t]=e,Promise.resolve(void 0)},flush(){return v={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},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}}const pt=(i={})=>{const{apiOptions:t}=i;if(!t.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 dt(t)}},gt=i=>{if(typeof i!="object"||typeof i._editable>"u")return{};const t=JSON.parse(i._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(t),"data-blok-uid":t.id+"-"+t.uid}};let $;const ft="https://app.storyblok.com/f/storyblok-v2-latest.js",E=(i,t,e={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",o=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===i;if(!(!r||!o)){if(!i){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(e).on(["input","published","change"],n=>{n.action==="input"&&n.story.id===i?t(n.story):(n.action==="change"||n.action==="published")&&n.storyId===i&&window.location.reload()})})}},mt=(i={})=>{var t,e;const{bridge:s,accessToken:r,use:o=[],apiOptions:n={},richText:c={}}=i;n.accessToken=n.accessToken||r;const a={bridge:s,apiOptions:n};let l={};o.forEach(g=>{l={...l,...g(a)}});const u=!(typeof window>"u")&&((e=(t=window.location)==null?void 0:t.search)==null?void 0:e.includes("_storyblok_tk"));return s!==!1&&u&&O(ft),$=new b(c.schema),c.resolver&&C($,c.resolver),l},C=(i,t)=>{i.addNode("blok",e=>{let s="";return e.attrs.body.forEach(r=>{s+=t(r.component,r)}),{html:s}})},yt=(i,t,e)=>{let s=e||$;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return i===""?"":i?(t&&(s=new b(t.schema),t.resolver&&C(s,t.resolver)),s.render(i)):(console.warn(`${i} is not a valid Richtext object. This might be because the value of the richtext field is empty.
|
|
1
|
+
(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.storyblokVue={},d.Vue))})(this,function(d,p){"use strict";let R=!1;const j=[],O=o=>new Promise((t,e)=>{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}R?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=>e(r),s.onload=r=>{j.forEach(i=>i()),R=!0,t(r)},document.getElementsByTagName("head")[0].appendChild(s)});var M=Object.defineProperty,N=(o,t,e)=>t in o?M(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,h=(o,t,e)=>(N(o,typeof t!="symbol"?t+"":t,e),e);function P(o){return!(o!==o||o===1/0||o===-1/0)}function z(o,t,e){if(!P(t))throw new TypeError("Expected `limit` to be a finite number");if(!P(e))throw new TypeError("Expected `interval` to be a finite number");const s=[];let r=[],i=0;const n=function(){i++;const a=setTimeout(function(){i--,s.length>0&&n(),r=r.filter(function(u){return u!==a})},e);r.indexOf(a)<0&&r.push(a);const l=s.shift();l.resolve(o.apply(l.self,l.args))},c=function(...a){const l=this;return new Promise(function(u,g){s.push({resolve:u,reject:g,args:a,self:l}),i<t&&n()})};return c.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},c}const L=function(o,t){const e={};for(const s in o){const r=o[s];t.indexOf(s)>-1&&r!==null&&(e[s]=r)}return e},U=o=>o==="email",q=()=>({singleTag:"hr"}),H=()=>({tag:"blockquote"}),V=()=>({tag:"ul"}),D=o=>({tag:["pre",{tag:"code",attrs:o.attrs}]}),B=()=>({singleTag:"br"}),J=o=>({tag:`h${o.attrs.level}`}),F=o=>({singleTag:[{tag:"img",attrs:L(o.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),K=()=>({tag:"ol"}),G=()=>({tag:"p"}),Q=o=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:o.attrs.name,emoji:o.attrs.emoji}}]}),W=()=>({tag:"b"}),X=()=>({tag:"strike"}),Z=()=>({tag:"u"}),tt=()=>({tag:"strong"}),et=()=>({tag:"code"}),st=()=>({tag:"i"}),rt=o=>{const t={...o.attrs},{linktype:e="url"}=o.attrs;if(U(e)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),t.custom){for(const s in t.custom)t[s]=t.custom[s];delete t.custom}return{tag:[{tag:"a",attrs:t}]}},ot=o=>({tag:[{tag:"span",attrs:o.attrs}]}),it=()=>({tag:"sub"}),nt=()=>({tag:"sup"}),at=o=>({tag:[{tag:"span",attrs:o.attrs}]}),lt=o=>({tag:[{tag:"span",attrs:{style:`background-color:${o.attrs.color};`}}]}),ct=o=>({tag:[{tag:"span",attrs:{style:`background-color:${o.attrs.color}`}}]}),S={nodes:{horizontal_rule:q,blockquote:H,bullet_list:V,code_block:D,hard_break:B,heading:J,image:F,list_item:Y,ordered_list:K,paragraph:G,emoji:Q},marks:{bold:W,strike:X,underline:Z,strong:tt,code:et,italic:st,link:rt,styled:ot,subscript:it,superscript:nt,anchor:at,highlight:lt,textStyle:ct}},ht=function(o){const t={"&":"&","<":"<",">":">",'"':""","'":"'"},e=/[&<>"']/g,s=RegExp(e.source);return o&&s.test(o)?o.replace(e,r=>t[r]):o};class b{constructor(t){h(this,"marks"),h(this,"nodes"),t||(t=S),this.marks=t.marks||[],this.nodes=t.nodes||[]}addNode(t,e){this.nodes[t]=e}addMark(t,e){this.marks[t]=e}render(t,e={optimizeImages:!1}){if(t&&t.content&&Array.isArray(t.content)){let s="";return t.content.forEach(r=>{s+=this.renderNode(r)}),e.optimizeImages?this.optimizeImages(s,e.optimizeImages):s}return console.warn("The render method must receive an object with a content field, which is an array"),""}optimizeImages(t,e){let s=0,r=0,i="",n="";typeof e!="boolean"&&(typeof e.width=="number"&&e.width>0&&(i+=`width="${e.width}" `,s=e.width),typeof e.height=="number"&&e.height>0&&(i+=`height="${e.height}" `,r=e.height),(e.loading==="lazy"||e.loading==="eager")&&(i+=`loading="${e.loading}" `),typeof e.class=="string"&&e.class.length>0&&(i+=`class="${e.class}" `),e.filters&&(typeof e.filters.blur=="number"&&e.filters.blur>=0&&e.filters.blur<=100&&(n+=`:blur(${e.filters.blur})`),typeof e.filters.brightness=="number"&&e.filters.brightness>=-100&&e.filters.brightness<=100&&(n+=`:brightness(${e.filters.brightness})`),e.filters.fill&&(e.filters.fill.match(/[0-9A-Fa-f]{6}/g)||e.filters.fill==="transparent")&&(n+=`:fill(${e.filters.fill})`),e.filters.format&&["webp","png","jpeg"].includes(e.filters.format)&&(n+=`:format(${e.filters.format})`),typeof e.filters.grayscale=="boolean"&&e.filters.grayscale&&(n+=":grayscale()"),typeof e.filters.quality=="number"&&e.filters.quality>=0&&e.filters.quality<=100&&(n+=`:quality(${e.filters.quality})`),e.filters.rotate&&[90,180,270].includes(e.filters.rotate)&&(n+=`:rotate(${e.filters.rotate})`),n.length>0&&(n="/filters"+n))),i.length>0&&(t=t.replace(/<img/g,`<img ${i.trim()}`));const c=s>0||r>0||n.length>0?`${s}x${r}${n}`:"";return t=t.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof e!="boolean"&&(e.sizes||e.srcset)&&(t=t.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var l,u;const g=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(g&&g.length>0){const m={srcset:(l=e.srcset)==null?void 0:l.map(f=>{if(typeof f=="number")return`//${g}/m/${f}x0${n} ${f}w`;if(typeof f=="object"&&f.length===2){let _=0,A=0;return typeof f[0]=="number"&&(_=f[0]),typeof f[1]=="number"&&(A=f[1]),`//${g}/m/${_}x${A}${n} ${_}w`}}).join(", "),sizes:(u=e.sizes)==null?void 0:u.map(f=>f).join(", ")};let T="";return m.srcset&&(T+=`srcset="${m.srcset}" `),m.sizes&&(T+=`sizes="${m.sizes}" `),a.replace(/<img/g,`<img ${T.trim()}`)}return a})),t}renderNode(t){const e=[];t.marks&&t.marks.forEach(r=>{const i=this.getMatchingMark(r);i&&e.push(this.renderOpeningTag(i.tag))});const s=this.getMatchingNode(t);return s&&s.tag&&e.push(this.renderOpeningTag(s.tag)),t.content?t.content.forEach(r=>{e.push(this.renderNode(r))}):t.text?e.push(ht(t.text)):s&&s.singleTag?e.push(this.renderTag(s.singleTag," /")):s&&s.html?e.push(s.html):t.type==="emoji"&&e.push(this.renderEmoji(t)),s&&s.tag&&e.push(this.renderClosingTag(s.tag)),t.marks&&t.marks.slice(0).reverse().forEach(r=>{const i=this.getMatchingMark(r);i&&e.push(this.renderClosingTag(i.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(s=>{if(s.constructor===String)return`<${s}${e}>`;{let r=`<${s.tag}`;if(s.attrs)for(const i in s.attrs){const n=s.attrs[i];n!==null&&(r+=` ${i}="${n}"`)}return`${r}${e}>`}}).join("")}renderOpeningTag(t){return this.renderTag(t,"")}renderClosingTag(t){return t.constructor===String?`</${t}>`:t.slice(0).reverse().map(e=>e.constructor===String?`</${e}>`:`</${e.tag}>`).join("")}getMatchingNode(t){const e=this.nodes[t.type];if(typeof e=="function")return e(t)}getMatchingMark(t){const e=this.marks[t.type];if(typeof e=="function")return e(t)}renderEmoji(t){if(t.attrs.emoji)return t.attrs.emoji;const e=[{tag:"img",attrs:{src:t.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(e," /")}}class w{constructor(){h(this,"isCDNUrl",(t="")=>t.indexOf("/cdn/")>-1),h(this,"getOptionsPage",(t,e=25,s=1)=>({...t,per_page:e,page:s})),h(this,"delay",t=>new Promise(e=>setTimeout(e,t))),h(this,"arrayFrom",(t=0,e)=>[...Array(t)].map(e)),h(this,"range",(t=0,e=t)=>{const s=Math.abs(e-t)||0,r=t<e?1:-1;return this.arrayFrom(s,(i,n)=>n*r+t)}),h(this,"asyncMap",async(t,e)=>Promise.all(t.map(e))),h(this,"flatMap",(t=[],e)=>t.map(e).reduce((s,r)=>[...s,...r],[]))}stringify(t,e,s){const r=[];for(const i in t){if(!Object.prototype.hasOwnProperty.call(t,i))continue;const n=t[i],c=s?"":encodeURIComponent(i);let a;typeof n=="object"?a=this.stringify(n,e?e+encodeURIComponent("["+c+"]"):c,Array.isArray(n)):a=(e?e+encodeURIComponent("["+c+"]"):c)+"="+encodeURIComponent(n),r.push(a)}return r.join("&")}getRegionURL(t){const e="api.storyblok.com",s="api-us.storyblok.com",r="app.storyblokchina.cn";switch(t){case"us":return s;case"cn":return r;default:return e}}}class ut{constructor(t){h(this,"baseURL"),h(this,"timeout"),h(this,"headers"),h(this,"responseInterceptor"),h(this,"fetch"),h(this,"ejectInterceptor"),h(this,"url"),h(this,"parameters"),this.baseURL=t.baseURL,this.headers=t.headers||new Headers,this.timeout=t!=null&&t.timeout?t.timeout*1e3:0,this.responseInterceptor=t.responseInterceptor,this.fetch=(...e)=>t.fetch?t.fetch(...e):fetch(...e),this.ejectInterceptor=!1,this.url="",this.parameters={}}get(t,e){return this.url=t,this.parameters=e,this._methodHandler("get")}post(t,e){return this.url=t,this.parameters=e,this._methodHandler("post")}put(t,e){return this.url=t,this.parameters=e,this._methodHandler("put")}delete(t,e){return this.url=t,this.parameters=e,this._methodHandler("delete")}async _responseHandler(t){const e=[],s={data:{},headers:{},status:0,statusText:""};t.status!==204&&await t.json().then(r=>{s.data=r});for(const r of t.headers.entries())e[r[0]]=r[1];return s.headers={...e},s.status=t.status,s.statusText=t.statusText,s}async _methodHandler(t){let e=`${this.baseURL}${this.url}`,s=null;if(t==="get"){const a=new w;e=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(e),i=new AbortController,{signal:n}=i;let c;this.timeout&&(c=setTimeout(()=>i.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:t,headers:this.headers,body:s,signal:n});this.timeout&&clearTimeout(c);const l=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(l)):this._statusHandler(l)}catch(a){return{message:a}}}eject(){this.ejectInterceptor=!0}_statusHandler(t){const e=/20[0-6]/g;return new Promise((s,r)=>{if(e.test(`${t.status}`))return s(t);const i={message:new Error(t.statusText),status:t.status,response:Array.isArray(t.data)?t.data[0]:t.data.error||t.data.slug};r(i)})}}let v={};const y={};class dt{constructor(t,e){if(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"),!e){const i=new w().getRegionURL,n=t.https===!1?"http":"https";t.oauthToken?e=`${n}://${i(t.region)}/v1`:e=`${n}://${i(t.region)}/v2`}const s=new Headers;s.set("Content-Type","application/json"),s.set("Accept","application/json"),s.forEach((i,n)=>{t.headers&&t.headers[n]&&s.set(n,t.headers[n])});let r=5;t.oauthToken&&(s.set("Authorization",t.oauthToken),r=3),t.rateLimit&&(r=t.rateLimit),t.richTextSchema?this.richTextResolver=new b(t.richTextSchema):this.richTextResolver=new b,t.componentResolver&&this.setComponentResolver(t.componentResolver),this.maxRetries=t.maxRetries,this.throttle=z(this.throttledRequest,r,1e3),this.accessToken=t.accessToken||"",this.relations={},this.links={},this.cache=t.cache||{clear:"manual"},this.helpers=new w,this.resolveCounter=0,this.resolveNestedRelations=t.resolveNestedRelations||!0,this.client=new ut({baseURL:e,timeout:t.timeout||0,headers:s,responseInterceptor:t.responseInterceptor,fetch:t.fetch})}setComponentResolver(t){this.richTextResolver.addNode("blok",e=>{let s="";return e.attrs.body.forEach(r=>{s+=t(r.component,r)}),{html:s}})}parseParams(t){return t.version||(t.version="published"),t.token||(t.token=this.getToken()),t.cv||(t.cv=y[t.token]),Array.isArray(t.resolve_relations)&&(t.resolve_relations=t.resolve_relations.join(",")),t}factoryParamOptions(t,e){return this.helpers.isCDNUrl(t)?this.parseParams(e):e}makeRequest(t,e,s,r){const i=this.factoryParamOptions(t,this.helpers.getOptionsPage(e,s,r));return this.cacheResponse(t,i)}get(t,e){e||(e={});const s=`/${t}`,r=this.factoryParamOptions(s,e);return this.cacheResponse(s,r)}async getAll(t,e,s){const r=(e==null?void 0:e.per_page)||25,i=`/${t}`,n=i.split("/"),c=s||n[n.length-1],a=1,l=await this.makeRequest(i,e,r,a),u=l.total?Math.ceil(l.total/r):1,g=await this.helpers.asyncMap(this.helpers.range(a,u),m=>this.makeRequest(i,e,r,m+1));return this.helpers.flatMap([l,...g],m=>Object.values(m.data[c]))}post(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("post",s,e))}put(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("put",s,e))}delete(t,e){const s=`/${t}`;return Promise.resolve(this.throttle("delete",s,e))}getStories(t){return this.get("cdn/stories",t)}getStory(t,e){return this.get(`cdn/stories/${t}`,e)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_cleanCopy(t){return JSON.parse(JSON.stringify(t))}_insertLinks(t,e,s){const r=t[e];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]))}_insertRelations(t,e,s,r){if(s.indexOf(`${t.component}.${e}`)>-1){if(typeof t[e]=="string")this.relations[r][t[e]]&&(t[e]=this._cleanCopy(this.relations[r][t[e]]));else if(t[e]&&t[e].constructor===Array){const i=[];t[e].forEach(n=>{this.relations[r][n]&&i.push(this._cleanCopy(this.relations[r][n]))}),t[e]=i}}}iterateTree(t,e,s){const r=i=>{if(i!=null){if(i.constructor===Array)for(let n=0;n<i.length;n++)r(i[n]);else if(i.constructor===Object){if(i._stopResolving)return;for(const n in i)(i.component&&i._uid||i.type==="link")&&(this._insertRelations(i,n,e,s),this._insertLinks(i,n,s)),r(i[n])}}};r(t.content)}async resolveLinks(t,e,s){let r=[];if(t.link_uuids){const i=t.link_uuids.length,n=[],c=50;for(let a=0;a<i;a+=c){const l=Math.min(i,a+c);n.push(t.link_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:e.language,version:e.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=t.links;r.forEach(i=>{this.links[s][i.uuid]={...i,_stopResolving:!0}})}async resolveRelations(t,e,s){let r=[];if(t.rel_uuids){const i=t.rel_uuids.length,n=[],c=50;for(let a=0;a<i;a+=c){const l=Math.min(i,a+c);n.push(t.rel_uuids.slice(a,l))}for(let a=0;a<n.length;a++)(await this.getStories({per_page:c,language:e.language,version:e.version,by_uuids:n[a].join(",")})).data.stories.forEach(l=>{r.push(l)})}else r=t.rels;r&&r.length>0&&r.forEach(i=>{this.relations[s][i.uuid]={...i,_stopResolving:!0}})}async resolveStories(t,e,s){var r,i;let n=[];if(this.links[s]={},this.relations[s]={},typeof e.resolve_relations<"u"&&e.resolve_relations.length>0&&(typeof e.resolve_relations=="string"&&(n=e.resolve_relations.split(",")),await this.resolveRelations(t,e,s)),e.resolve_links&&["1","story","url"].indexOf(e.resolve_links)>-1&&((r=t.links)!=null&&r.length||(i=t.link_uuids)!=null&&i.length)&&await this.resolveLinks(t,e,s),this.resolveNestedRelations)for(const c in this.relations[s])this.iterateTree(this.relations[s][c],n,s);t.story?this.iterateTree(t.story,n,s):t.stories.forEach(c=>{this.iterateTree(c,n,s)}),delete this.links[s],delete this.relations[s]}async cacheResponse(t,e,s){const r=this.helpers.stringify({url:t,params:e}),i=this.cacheProvider();if(this.cache.clear==="auto"&&e.version==="draft"&&await this.flushCache(),e.version==="published"&&t!="/cdn/spaces/me"){const n=await i.get(r);if(n)return Promise.resolve(n)}return new Promise((n,c)=>{try{(async()=>{var a;try{const l=await this.throttle("get",t,e);let u={data:l.data,headers:l.headers};if((a=l.headers)!=null&&a["per-page"]&&(u=Object.assign({},u,{perPage:l.headers["per-page"]?parseInt(l.headers["per-page"]):0,total:l.headers["per-page"]?parseInt(l.headers.total):0})),l.status!=200)return c(l);if(u.data.story||u.data.stories){const g=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(u.data,e,`${g}`)}return e.version==="published"&&t!="/cdn/spaces/me"&&await i.set(r,u),u.data.cv&&e.token&&(e.version=="draft"&&y[e.token]!=u.data.cv&&await this.flushCache(),y[e.token]=u.data.cv),n(u)}catch(l){return c(l)}})()}catch{}})}throttledRequest(t,e,s){return this.client[t](e,s)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(t){this.accessToken&&(y[this.accessToken]=t)}cacheProvider(){switch(this.cache.type){case"memory":return{get(t){return Promise.resolve(v[t])},getAll(){return Promise.resolve(v)},set(t,e){return v[t]=e,Promise.resolve(void 0)},flush(){return v={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve(void 0)},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}}const pt=(o={})=>{const{apiOptions:t}=o;if(!t.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 dt(t)}},gt=o=>{if(typeof o!="object"||typeof o._editable>"u")return{};const t=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(t),"data-blok-uid":t.id+"-"+t.uid}};let $;const ft="https://app.storyblok.com/f/storyblok-v2-latest.js",E=(o,t,e={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",i=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===o;if(!(!r||!i)){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(e).on(["input","published","change"],n=>{n.action==="input"&&n.story.id===o?t(n.story):(n.action==="change"||n.action==="published")&&n.storyId===o&&window.location.reload()})})}},mt=(o={})=>{var t,e;const{bridge:s,accessToken:r,use:i=[],apiOptions:n={},richText:c={}}=o;n.accessToken=n.accessToken||r;const a={bridge:s,apiOptions:n};let l={};i.forEach(g=>{l={...l,...g(a)}});const u=!(typeof window>"u")&&((e=(t=window.location)==null?void 0:t.search)==null?void 0:e.includes("_storyblok_tk"));return s!==!1&&u&&O(ft),$=new b(c.schema),c.resolver&&C($,c.resolver),l},C=(o,t)=>{o.addNode("blok",e=>{let s="";return e.attrs.body.forEach(r=>{s+=t(r.component,r)}),{html:s}})},yt=(o,t,e)=>{let s=e||$;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return o===""?"":o?(t&&(s=new b(t.schema),t.resolver&&C(s,t.resolver)),s.render(o)):(console.warn(`${o} is not a valid Richtext object. This might be because the value of the richtext field is empty.
|
|
2
2
|
|
|
3
|
-
For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"")},I=p.defineComponent({__name:"StoryblokComponent",props:{blok:null},setup(
|
|
4
|
-
`)};let k=null;const kt=()=>(k||x("useStoryblokApi"),k),vt=async(
|
|
3
|
+
For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"")},I=p.defineComponent({__name:"StoryblokComponent",props:{blok:null},setup(o){return(t,e)=>(p.openBlock(),p.createBlock(p.resolveDynamicComponent(o.blok.component),p.normalizeProps(p.guardReactiveProps({...t.$props,...t.$attrs})),null,16))}}),bt={beforeMount(o,t){if(t.value){const e=gt(t.value);o.setAttribute("data-blok-c",e["data-blok-c"]),o.setAttribute("data-blok-uid",e["data-blok-uid"]),o.classList.add("storyblok__outline")}}},x=o=>{console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
4
|
+
`)};let k=null;const kt=()=>(k||x("useStoryblokApi"),k),vt=async(o,t={},e={})=>{const s=p.ref(null);if(p.onMounted(()=>{s.value&&s.value.id&&E(s.value.id,r=>s.value=r,e)}),k){const{data:r}=await k.get(`cdn/stories/${o}`,t);s.value=r.story}else x("useStoryblok");return s},wt={install(o,t={}){o.directive("editable",bt),o.component("StoryblokComponent",I);const{storyblokApi:e}=mt(t);k=e}};d.RichTextResolver=b,d.RichTextSchema=S,d.StoryblokComponent=I,d.StoryblokVue=wt,d.apiPlugin=pt,d.renderRichText=yt,d.useStoryblok=vt,d.useStoryblokApi=kt,d.useStoryblokBridge=E,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/dist/storyblok-vue.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as E, openBlock as S, createBlock as C, resolveDynamicComponent as I, normalizeProps as A, guardReactiveProps as O, ref as M, onMounted as N } from "vue";
|
|
2
2
|
let _ = !1;
|
|
3
|
-
const R = [], z = (
|
|
3
|
+
const R = [], z = (o) => new Promise((t, e) => {
|
|
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.");
|
|
@@ -10,31 +10,31 @@ const R = [], z = (i) => new Promise((t, e) => {
|
|
|
10
10
|
}, document.getElementById("storyblok-javascript-bridge")))
|
|
11
11
|
return;
|
|
12
12
|
const s = document.createElement("script");
|
|
13
|
-
s.async = !0, s.src =
|
|
14
|
-
R.forEach((
|
|
13
|
+
s.async = !0, s.src = o, s.id = "storyblok-javascript-bridge", s.onerror = (r) => e(r), s.onload = (r) => {
|
|
14
|
+
R.forEach((i) => i()), _ = !0, t(r);
|
|
15
15
|
}, document.getElementsByTagName("head")[0].appendChild(s);
|
|
16
16
|
});
|
|
17
|
-
var L = Object.defineProperty, U = (
|
|
18
|
-
function j(
|
|
19
|
-
return !(
|
|
17
|
+
var L = Object.defineProperty, U = (o, t, e) => t in o ? L(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, h = (o, t, e) => (U(o, typeof t != "symbol" ? t + "" : t, e), e);
|
|
18
|
+
function j(o) {
|
|
19
|
+
return !(o !== o || o === 1 / 0 || o === -1 / 0);
|
|
20
20
|
}
|
|
21
|
-
function q(
|
|
21
|
+
function q(o, t, e) {
|
|
22
22
|
if (!j(t))
|
|
23
23
|
throw new TypeError("Expected `limit` to be a finite number");
|
|
24
24
|
if (!j(e))
|
|
25
25
|
throw new TypeError("Expected `interval` to be a finite number");
|
|
26
26
|
const s = [];
|
|
27
|
-
let r = [],
|
|
27
|
+
let r = [], i = 0;
|
|
28
28
|
const n = function() {
|
|
29
|
-
|
|
29
|
+
i++;
|
|
30
30
|
const a = setTimeout(function() {
|
|
31
|
-
|
|
31
|
+
i--, s.length > 0 && n(), r = r.filter(function(u) {
|
|
32
32
|
return u !== a;
|
|
33
33
|
});
|
|
34
34
|
}, e);
|
|
35
35
|
r.indexOf(a) < 0 && r.push(a);
|
|
36
36
|
const l = s.shift();
|
|
37
|
-
l.resolve(
|
|
37
|
+
l.resolve(o.apply(l.self, l.args));
|
|
38
38
|
}, c = function(...a) {
|
|
39
39
|
const l = this;
|
|
40
40
|
return new Promise(function(u, d) {
|
|
@@ -43,7 +43,7 @@ function q(i, t, e) {
|
|
|
43
43
|
reject: d,
|
|
44
44
|
args: a,
|
|
45
45
|
self: l
|
|
46
|
-
}),
|
|
46
|
+
}), i < t && n();
|
|
47
47
|
});
|
|
48
48
|
};
|
|
49
49
|
return c.abort = function() {
|
|
@@ -54,36 +54,36 @@ function q(i, t, e) {
|
|
|
54
54
|
}), s.length = 0;
|
|
55
55
|
}, c;
|
|
56
56
|
}
|
|
57
|
-
const H = function(
|
|
57
|
+
const H = function(o, t) {
|
|
58
58
|
const e = {};
|
|
59
|
-
for (const s in
|
|
60
|
-
const r =
|
|
59
|
+
for (const s in o) {
|
|
60
|
+
const r = o[s];
|
|
61
61
|
t.indexOf(s) > -1 && r !== null && (e[s] = r);
|
|
62
62
|
}
|
|
63
63
|
return e;
|
|
64
|
-
}, D = (
|
|
64
|
+
}, D = (o) => o === "email", B = () => ({
|
|
65
65
|
singleTag: "hr"
|
|
66
66
|
}), V = () => ({
|
|
67
67
|
tag: "blockquote"
|
|
68
68
|
}), J = () => ({
|
|
69
69
|
tag: "ul"
|
|
70
|
-
}), F = (
|
|
70
|
+
}), F = (o) => ({
|
|
71
71
|
tag: [
|
|
72
72
|
"pre",
|
|
73
73
|
{
|
|
74
74
|
tag: "code",
|
|
75
|
-
attrs:
|
|
75
|
+
attrs: o.attrs
|
|
76
76
|
}
|
|
77
77
|
]
|
|
78
78
|
}), Y = () => ({
|
|
79
79
|
singleTag: "br"
|
|
80
|
-
}), K = (
|
|
81
|
-
tag: `h${
|
|
82
|
-
}), G = (
|
|
80
|
+
}), K = (o) => ({
|
|
81
|
+
tag: `h${o.attrs.level}`
|
|
82
|
+
}), G = (o) => ({
|
|
83
83
|
singleTag: [
|
|
84
84
|
{
|
|
85
85
|
tag: "img",
|
|
86
|
-
attrs: H(
|
|
86
|
+
attrs: H(o.attrs, ["src", "alt", "title"])
|
|
87
87
|
}
|
|
88
88
|
]
|
|
89
89
|
}), Q = () => ({
|
|
@@ -92,14 +92,14 @@ const H = function(i, t) {
|
|
|
92
92
|
tag: "ol"
|
|
93
93
|
}), X = () => ({
|
|
94
94
|
tag: "p"
|
|
95
|
-
}), Z = (
|
|
95
|
+
}), Z = (o) => ({
|
|
96
96
|
tag: [
|
|
97
97
|
{
|
|
98
98
|
tag: "span",
|
|
99
99
|
attrs: {
|
|
100
100
|
["data-type"]: "emoji",
|
|
101
|
-
["data-name"]:
|
|
102
|
-
emoji:
|
|
101
|
+
["data-name"]: o.attrs.name,
|
|
102
|
+
emoji: o.attrs.emoji
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
]
|
|
@@ -115,8 +115,8 @@ const H = function(i, t) {
|
|
|
115
115
|
tag: "code"
|
|
116
116
|
}), it = () => ({
|
|
117
117
|
tag: "i"
|
|
118
|
-
}), nt = (
|
|
119
|
-
const t = { ...
|
|
118
|
+
}), nt = (o) => {
|
|
119
|
+
const t = { ...o.attrs }, { linktype: e = "url" } = o.attrs;
|
|
120
120
|
if (D(e) && (t.href = `mailto:${t.href}`), t.anchor && (t.href = `${t.href}#${t.anchor}`, delete t.anchor), t.custom) {
|
|
121
121
|
for (const s in t.custom)
|
|
122
122
|
t[s] = t.custom[s];
|
|
@@ -130,39 +130,39 @@ const H = function(i, t) {
|
|
|
130
130
|
}
|
|
131
131
|
]
|
|
132
132
|
};
|
|
133
|
-
}, at = (
|
|
133
|
+
}, at = (o) => ({
|
|
134
134
|
tag: [
|
|
135
135
|
{
|
|
136
136
|
tag: "span",
|
|
137
|
-
attrs:
|
|
137
|
+
attrs: o.attrs
|
|
138
138
|
}
|
|
139
139
|
]
|
|
140
140
|
}), lt = () => ({
|
|
141
141
|
tag: "sub"
|
|
142
142
|
}), ct = () => ({
|
|
143
143
|
tag: "sup"
|
|
144
|
-
}), ht = (
|
|
144
|
+
}), ht = (o) => ({
|
|
145
145
|
tag: [
|
|
146
146
|
{
|
|
147
147
|
tag: "span",
|
|
148
|
-
attrs:
|
|
148
|
+
attrs: o.attrs
|
|
149
149
|
}
|
|
150
150
|
]
|
|
151
|
-
}), ut = (
|
|
151
|
+
}), ut = (o) => ({
|
|
152
152
|
tag: [
|
|
153
153
|
{
|
|
154
154
|
tag: "span",
|
|
155
155
|
attrs: {
|
|
156
|
-
style: `background-color:${
|
|
156
|
+
style: `background-color:${o.attrs.color};`
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
159
|
]
|
|
160
|
-
}), dt = (
|
|
160
|
+
}), dt = (o) => ({
|
|
161
161
|
tag: [
|
|
162
162
|
{
|
|
163
163
|
tag: "span",
|
|
164
164
|
attrs: {
|
|
165
|
-
style: `background-color:${
|
|
165
|
+
style: `background-color:${o.attrs.color}`
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
]
|
|
@@ -195,7 +195,7 @@ const H = function(i, t) {
|
|
|
195
195
|
highlight: ut,
|
|
196
196
|
textStyle: dt
|
|
197
197
|
}
|
|
198
|
-
}, gt = function(
|
|
198
|
+
}, gt = function(o) {
|
|
199
199
|
const t = {
|
|
200
200
|
"&": "&",
|
|
201
201
|
"<": "<",
|
|
@@ -203,7 +203,7 @@ const H = function(i, t) {
|
|
|
203
203
|
'"': """,
|
|
204
204
|
"'": "'"
|
|
205
205
|
}, e = /[&<>"']/g, s = RegExp(e.source);
|
|
206
|
-
return
|
|
206
|
+
return o && s.test(o) ? o.replace(e, (r) => t[r]) : o;
|
|
207
207
|
};
|
|
208
208
|
class b {
|
|
209
209
|
constructor(t) {
|
|
@@ -227,8 +227,8 @@ class b {
|
|
|
227
227
|
), "";
|
|
228
228
|
}
|
|
229
229
|
optimizeImages(t, e) {
|
|
230
|
-
let s = 0, r = 0,
|
|
231
|
-
typeof e != "boolean" && (typeof e.width == "number" && e.width > 0 && (
|
|
230
|
+
let s = 0, r = 0, i = "", n = "";
|
|
231
|
+
typeof e != "boolean" && (typeof e.width == "number" && e.width > 0 && (i += `width="${e.width}" `, s = e.width), typeof e.height == "number" && e.height > 0 && (i += `height="${e.height}" `, r = e.height), (e.loading === "lazy" || e.loading === "eager") && (i += `loading="${e.loading}" `), typeof e.class == "string" && e.class.length > 0 && (i += `class="${e.class}" `), e.filters && (typeof e.filters.blur == "number" && e.filters.blur >= 0 && e.filters.blur <= 100 && (n += `:blur(${e.filters.blur})`), typeof e.filters.brightness == "number" && e.filters.brightness >= -100 && e.filters.brightness <= 100 && (n += `:brightness(${e.filters.brightness})`), e.filters.fill && (e.filters.fill.match(/[0-9A-Fa-f]{6}/g) || e.filters.fill === "transparent") && (n += `:fill(${e.filters.fill})`), e.filters.format && ["webp", "png", "jpeg"].includes(e.filters.format) && (n += `:format(${e.filters.format})`), typeof e.filters.grayscale == "boolean" && e.filters.grayscale && (n += ":grayscale()"), typeof e.filters.quality == "number" && e.filters.quality >= 0 && e.filters.quality <= 100 && (n += `:quality(${e.filters.quality})`), e.filters.rotate && [90, 180, 270].includes(e.filters.rotate) && (n += `:rotate(${e.filters.rotate})`), n.length > 0 && (n = "/filters" + n))), i.length > 0 && (t = t.replace(/<img/g, `<img ${i.trim()}`));
|
|
232
232
|
const c = s > 0 || r > 0 || n.length > 0 ? `${s}x${r}${n}` : "";
|
|
233
233
|
return t = t.replace(
|
|
234
234
|
/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,
|
|
@@ -259,15 +259,15 @@ class b {
|
|
|
259
259
|
renderNode(t) {
|
|
260
260
|
const e = [];
|
|
261
261
|
t.marks && t.marks.forEach((r) => {
|
|
262
|
-
const
|
|
263
|
-
|
|
262
|
+
const i = this.getMatchingMark(r);
|
|
263
|
+
i && e.push(this.renderOpeningTag(i.tag));
|
|
264
264
|
});
|
|
265
265
|
const s = this.getMatchingNode(t);
|
|
266
266
|
return s && s.tag && e.push(this.renderOpeningTag(s.tag)), t.content ? t.content.forEach((r) => {
|
|
267
267
|
e.push(this.renderNode(r));
|
|
268
268
|
}) : t.text ? e.push(gt(t.text)) : s && s.singleTag ? e.push(this.renderTag(s.singleTag, " /")) : s && s.html ? e.push(s.html) : t.type === "emoji" && e.push(this.renderEmoji(t)), s && s.tag && e.push(this.renderClosingTag(s.tag)), t.marks && t.marks.slice(0).reverse().forEach((r) => {
|
|
269
|
-
const
|
|
270
|
-
|
|
269
|
+
const i = this.getMatchingMark(r);
|
|
270
|
+
i && e.push(this.renderClosingTag(i.tag));
|
|
271
271
|
}), e.join("");
|
|
272
272
|
}
|
|
273
273
|
renderTag(t, e) {
|
|
@@ -277,9 +277,9 @@ class b {
|
|
|
277
277
|
{
|
|
278
278
|
let r = `<${s.tag}`;
|
|
279
279
|
if (s.attrs)
|
|
280
|
-
for (const
|
|
281
|
-
const n = s.attrs[
|
|
282
|
-
n !== null && (r += ` ${
|
|
280
|
+
for (const i in s.attrs) {
|
|
281
|
+
const n = s.attrs[i];
|
|
282
|
+
n !== null && (r += ` ${i}="${n}"`);
|
|
283
283
|
}
|
|
284
284
|
return `${r}${e}>`;
|
|
285
285
|
}
|
|
@@ -326,7 +326,7 @@ class w {
|
|
|
326
326
|
page: s
|
|
327
327
|
})), h(this, "delay", (t) => new Promise((e) => setTimeout(e, t))), h(this, "arrayFrom", (t = 0, e) => [...Array(t)].map(e)), h(this, "range", (t = 0, e = t) => {
|
|
328
328
|
const s = Math.abs(e - t) || 0, r = t < e ? 1 : -1;
|
|
329
|
-
return this.arrayFrom(s, (
|
|
329
|
+
return this.arrayFrom(s, (i, n) => n * r + t);
|
|
330
330
|
}), h(this, "asyncMap", async (t, e) => Promise.all(t.map(e))), h(this, "flatMap", (t = [], e) => t.map(e).reduce((s, r) => [...s, ...r], []));
|
|
331
331
|
}
|
|
332
332
|
/**
|
|
@@ -338,10 +338,10 @@ class w {
|
|
|
338
338
|
*/
|
|
339
339
|
stringify(t, e, s) {
|
|
340
340
|
const r = [];
|
|
341
|
-
for (const
|
|
342
|
-
if (!Object.prototype.hasOwnProperty.call(t,
|
|
341
|
+
for (const i in t) {
|
|
342
|
+
if (!Object.prototype.hasOwnProperty.call(t, i))
|
|
343
343
|
continue;
|
|
344
|
-
const n = t[
|
|
344
|
+
const n = t[i], c = s ? "" : encodeURIComponent(i);
|
|
345
345
|
let a;
|
|
346
346
|
typeof n == "object" ? a = this.stringify(
|
|
347
347
|
n,
|
|
@@ -391,7 +391,7 @@ class ft {
|
|
|
391
391
|
return this.url = t, this.parameters = e, this._methodHandler("delete");
|
|
392
392
|
}
|
|
393
393
|
async _responseHandler(t) {
|
|
394
|
-
const e =
|
|
394
|
+
const e = [], s = {
|
|
395
395
|
data: {},
|
|
396
396
|
headers: {},
|
|
397
397
|
status: 0,
|
|
@@ -400,8 +400,8 @@ class ft {
|
|
|
400
400
|
t.status !== 204 && await t.json().then((r) => {
|
|
401
401
|
s.data = r;
|
|
402
402
|
});
|
|
403
|
-
for (const
|
|
404
|
-
e
|
|
403
|
+
for (const r of t.headers.entries())
|
|
404
|
+
e[r[0]] = r[1];
|
|
405
405
|
return s.headers = { ...e }, s.status = t.status, s.statusText = t.statusText, s;
|
|
406
406
|
}
|
|
407
407
|
async _methodHandler(t) {
|
|
@@ -413,9 +413,9 @@ class ft {
|
|
|
413
413
|
)}`;
|
|
414
414
|
} else
|
|
415
415
|
s = JSON.stringify(this.parameters);
|
|
416
|
-
const r = new URL(e),
|
|
416
|
+
const r = new URL(e), i = new AbortController(), { signal: n } = i;
|
|
417
417
|
let c;
|
|
418
|
-
this.timeout && (c = setTimeout(() =>
|
|
418
|
+
this.timeout && (c = setTimeout(() => i.abort(), this.timeout));
|
|
419
419
|
try {
|
|
420
420
|
const a = await this.fetch(`${r}`, {
|
|
421
421
|
method: t,
|
|
@@ -440,12 +440,12 @@ class ft {
|
|
|
440
440
|
return new Promise((s, r) => {
|
|
441
441
|
if (e.test(`${t.status}`))
|
|
442
442
|
return s(t);
|
|
443
|
-
const
|
|
443
|
+
const i = {
|
|
444
444
|
message: new Error(t.statusText),
|
|
445
445
|
status: t.status,
|
|
446
446
|
response: Array.isArray(t.data) ? t.data[0] : t.data.error || t.data.slug
|
|
447
447
|
};
|
|
448
|
-
r(
|
|
448
|
+
r(i);
|
|
449
449
|
});
|
|
450
450
|
}
|
|
451
451
|
}
|
|
@@ -459,11 +459,11 @@ class mt {
|
|
|
459
459
|
*/
|
|
460
460
|
constructor(t, e) {
|
|
461
461
|
if (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"), !e) {
|
|
462
|
-
const
|
|
463
|
-
t.oauthToken ? e = `${n}://${
|
|
462
|
+
const i = new w().getRegionURL, n = t.https === !1 ? "http" : "https";
|
|
463
|
+
t.oauthToken ? e = `${n}://${i(t.region)}/v1` : e = `${n}://${i(t.region)}/v2`;
|
|
464
464
|
}
|
|
465
465
|
const s = new Headers();
|
|
466
|
-
s.set("Content-Type", "application/json"), s.set("Accept", "application/json"), s.forEach((
|
|
466
|
+
s.set("Content-Type", "application/json"), s.set("Accept", "application/json"), s.forEach((i, n) => {
|
|
467
467
|
t.headers && t.headers[n] && s.set(n, t.headers[n]);
|
|
468
468
|
});
|
|
469
469
|
let r = 5;
|
|
@@ -492,11 +492,11 @@ class mt {
|
|
|
492
492
|
return this.helpers.isCDNUrl(t) ? this.parseParams(e) : e;
|
|
493
493
|
}
|
|
494
494
|
makeRequest(t, e, s, r) {
|
|
495
|
-
const
|
|
495
|
+
const i = this.factoryParamOptions(
|
|
496
496
|
t,
|
|
497
497
|
this.helpers.getOptionsPage(e, s, r)
|
|
498
498
|
);
|
|
499
|
-
return this.cacheResponse(t,
|
|
499
|
+
return this.cacheResponse(t, i);
|
|
500
500
|
}
|
|
501
501
|
get(t, e) {
|
|
502
502
|
e || (e = {});
|
|
@@ -504,9 +504,9 @@ class mt {
|
|
|
504
504
|
return this.cacheResponse(s, r);
|
|
505
505
|
}
|
|
506
506
|
async getAll(t, e, s) {
|
|
507
|
-
const r = (e == null ? void 0 : e.per_page) || 25,
|
|
507
|
+
const r = (e == null ? void 0 : e.per_page) || 25, i = `/${t}`, n = i.split("/"), c = s || n[n.length - 1], a = 1, l = await this.makeRequest(i, e, r, a), u = l.total ? Math.ceil(l.total / r) : 1, d = await this.helpers.asyncMap(
|
|
508
508
|
this.helpers.range(a, u),
|
|
509
|
-
(g) => this.makeRequest(
|
|
509
|
+
(g) => this.makeRequest(i, e, r, g + 1)
|
|
510
510
|
);
|
|
511
511
|
return this.helpers.flatMap(
|
|
512
512
|
[l, ...d],
|
|
@@ -551,33 +551,33 @@ class mt {
|
|
|
551
551
|
this.relations[r][t[e]]
|
|
552
552
|
));
|
|
553
553
|
else if (t[e] && t[e].constructor === Array) {
|
|
554
|
-
const
|
|
554
|
+
const i = [];
|
|
555
555
|
t[e].forEach((n) => {
|
|
556
|
-
this.relations[r][n] &&
|
|
557
|
-
}), t[e] =
|
|
556
|
+
this.relations[r][n] && i.push(this._cleanCopy(this.relations[r][n]));
|
|
557
|
+
}), t[e] = i;
|
|
558
558
|
}
|
|
559
559
|
}
|
|
560
560
|
}
|
|
561
561
|
iterateTree(t, e, s) {
|
|
562
|
-
const r = (
|
|
563
|
-
if (
|
|
564
|
-
if (
|
|
565
|
-
for (let n = 0; n <
|
|
566
|
-
r(
|
|
567
|
-
else if (
|
|
568
|
-
if (
|
|
562
|
+
const r = (i) => {
|
|
563
|
+
if (i != null) {
|
|
564
|
+
if (i.constructor === Array)
|
|
565
|
+
for (let n = 0; n < i.length; n++)
|
|
566
|
+
r(i[n]);
|
|
567
|
+
else if (i.constructor === Object) {
|
|
568
|
+
if (i._stopResolving)
|
|
569
569
|
return;
|
|
570
|
-
for (const n in
|
|
571
|
-
(
|
|
572
|
-
|
|
570
|
+
for (const n in i)
|
|
571
|
+
(i.component && i._uid || i.type === "link") && (this._insertRelations(
|
|
572
|
+
i,
|
|
573
573
|
n,
|
|
574
574
|
e,
|
|
575
575
|
s
|
|
576
576
|
), this._insertLinks(
|
|
577
|
-
|
|
577
|
+
i,
|
|
578
578
|
n,
|
|
579
579
|
s
|
|
580
|
-
)), r(
|
|
580
|
+
)), r(i[n]);
|
|
581
581
|
}
|
|
582
582
|
}
|
|
583
583
|
};
|
|
@@ -586,9 +586,9 @@ class mt {
|
|
|
586
586
|
async resolveLinks(t, e, s) {
|
|
587
587
|
let r = [];
|
|
588
588
|
if (t.link_uuids) {
|
|
589
|
-
const
|
|
590
|
-
for (let a = 0; a <
|
|
591
|
-
const l = Math.min(
|
|
589
|
+
const i = t.link_uuids.length, n = [], c = 50;
|
|
590
|
+
for (let a = 0; a < i; a += c) {
|
|
591
|
+
const l = Math.min(i, a + c);
|
|
592
592
|
n.push(t.link_uuids.slice(a, l));
|
|
593
593
|
}
|
|
594
594
|
for (let a = 0; a < n.length; a++)
|
|
@@ -604,9 +604,9 @@ class mt {
|
|
|
604
604
|
);
|
|
605
605
|
} else
|
|
606
606
|
r = t.links;
|
|
607
|
-
r.forEach((
|
|
608
|
-
this.links[s][
|
|
609
|
-
...
|
|
607
|
+
r.forEach((i) => {
|
|
608
|
+
this.links[s][i.uuid] = {
|
|
609
|
+
...i,
|
|
610
610
|
_stopResolving: !0
|
|
611
611
|
};
|
|
612
612
|
});
|
|
@@ -614,9 +614,9 @@ class mt {
|
|
|
614
614
|
async resolveRelations(t, e, s) {
|
|
615
615
|
let r = [];
|
|
616
616
|
if (t.rel_uuids) {
|
|
617
|
-
const
|
|
618
|
-
for (let a = 0; a <
|
|
619
|
-
const l = Math.min(
|
|
617
|
+
const i = t.rel_uuids.length, n = [], c = 50;
|
|
618
|
+
for (let a = 0; a < i; a += c) {
|
|
619
|
+
const l = Math.min(i, a + c);
|
|
620
620
|
n.push(t.rel_uuids.slice(a, l));
|
|
621
621
|
}
|
|
622
622
|
for (let a = 0; a < n.length; a++)
|
|
@@ -630,17 +630,17 @@ class mt {
|
|
|
630
630
|
});
|
|
631
631
|
} else
|
|
632
632
|
r = t.rels;
|
|
633
|
-
r && r.length > 0 && r.forEach((
|
|
634
|
-
this.relations[s][
|
|
635
|
-
...
|
|
633
|
+
r && r.length > 0 && r.forEach((i) => {
|
|
634
|
+
this.relations[s][i.uuid] = {
|
|
635
|
+
...i,
|
|
636
636
|
_stopResolving: !0
|
|
637
637
|
};
|
|
638
638
|
});
|
|
639
639
|
}
|
|
640
640
|
async resolveStories(t, e, s) {
|
|
641
|
-
var r,
|
|
641
|
+
var r, i;
|
|
642
642
|
let n = [];
|
|
643
|
-
if (this.links[s] = {}, this.relations[s] = {}, typeof e.resolve_relations < "u" && e.resolve_relations.length > 0 && (typeof e.resolve_relations == "string" && (n = e.resolve_relations.split(",")), await this.resolveRelations(t, e, s)), e.resolve_links && ["1", "story", "url"].indexOf(e.resolve_links) > -1 && ((r = t.links) != null && r.length || (
|
|
643
|
+
if (this.links[s] = {}, this.relations[s] = {}, typeof e.resolve_relations < "u" && e.resolve_relations.length > 0 && (typeof e.resolve_relations == "string" && (n = e.resolve_relations.split(",")), await this.resolveRelations(t, e, s)), e.resolve_links && ["1", "story", "url"].indexOf(e.resolve_links) > -1 && ((r = t.links) != null && r.length || (i = t.link_uuids) != null && i.length) && await this.resolveLinks(t, e, s), this.resolveNestedRelations)
|
|
644
644
|
for (const c in this.relations[s])
|
|
645
645
|
this.iterateTree(
|
|
646
646
|
this.relations[s][c],
|
|
@@ -652,9 +652,9 @@ class mt {
|
|
|
652
652
|
}), delete this.links[s], delete this.relations[s];
|
|
653
653
|
}
|
|
654
654
|
async cacheResponse(t, e, s) {
|
|
655
|
-
const r = this.helpers.stringify({ url: t, params: e }),
|
|
655
|
+
const r = this.helpers.stringify({ url: t, params: e }), i = this.cacheProvider();
|
|
656
656
|
if (this.cache.clear === "auto" && e.version === "draft" && await this.flushCache(), e.version === "published" && t != "/cdn/spaces/me") {
|
|
657
|
-
const n = await
|
|
657
|
+
const n = await i.get(r);
|
|
658
658
|
if (n)
|
|
659
659
|
return Promise.resolve(n);
|
|
660
660
|
}
|
|
@@ -674,7 +674,7 @@ class mt {
|
|
|
674
674
|
const d = this.resolveCounter = ++this.resolveCounter % 1e3;
|
|
675
675
|
await this.resolveStories(u.data, e, `${d}`);
|
|
676
676
|
}
|
|
677
|
-
return e.version === "published" && t != "/cdn/spaces/me" && await
|
|
677
|
+
return e.version === "published" && t != "/cdn/spaces/me" && await i.set(r, u), u.data.cv && e.token && (e.version == "draft" && f[e.token] != u.data.cv && await this.flushCache(), f[e.token] = u.data.cv), n(u);
|
|
678
678
|
} catch (l) {
|
|
679
679
|
return c(l);
|
|
680
680
|
}
|
|
@@ -736,8 +736,8 @@ class mt {
|
|
|
736
736
|
return await this.cacheProvider().flush(), this;
|
|
737
737
|
}
|
|
738
738
|
}
|
|
739
|
-
const _t = (
|
|
740
|
-
const { apiOptions: t } =
|
|
739
|
+
const _t = (o = {}) => {
|
|
740
|
+
const { apiOptions: t } = o;
|
|
741
741
|
if (!t.accessToken) {
|
|
742
742
|
console.error(
|
|
743
743
|
"You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication"
|
|
@@ -745,11 +745,11 @@ const _t = (i = {}) => {
|
|
|
745
745
|
return;
|
|
746
746
|
}
|
|
747
747
|
return { storyblokApi: new mt(t) };
|
|
748
|
-
}, yt = (
|
|
749
|
-
if (typeof
|
|
748
|
+
}, yt = (o) => {
|
|
749
|
+
if (typeof o != "object" || typeof o._editable > "u")
|
|
750
750
|
return {};
|
|
751
751
|
const t = JSON.parse(
|
|
752
|
-
|
|
752
|
+
o._editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, "")
|
|
753
753
|
);
|
|
754
754
|
return {
|
|
755
755
|
"data-blok-c": JSON.stringify(t),
|
|
@@ -757,41 +757,41 @@ const _t = (i = {}) => {
|
|
|
757
757
|
};
|
|
758
758
|
};
|
|
759
759
|
let $;
|
|
760
|
-
const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (
|
|
760
|
+
const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (o, t, e = {}) => {
|
|
761
761
|
var s;
|
|
762
|
-
const r = !(typeof window > "u") && typeof window.storyblokRegisterEvent < "u",
|
|
762
|
+
const r = !(typeof window > "u") && typeof window.storyblokRegisterEvent < "u", i = +new URL((s = window.location) == null ? void 0 : s.href).searchParams.get(
|
|
763
763
|
"_storyblok"
|
|
764
|
-
) ===
|
|
765
|
-
if (!(!r || !
|
|
766
|
-
if (!
|
|
764
|
+
) === o;
|
|
765
|
+
if (!(!r || !i)) {
|
|
766
|
+
if (!o) {
|
|
767
767
|
console.warn("Story ID is not defined. Please provide a valid ID.");
|
|
768
768
|
return;
|
|
769
769
|
}
|
|
770
770
|
window.storyblokRegisterEvent(() => {
|
|
771
771
|
new window.StoryblokBridge(e).on(["input", "published", "change"], (n) => {
|
|
772
|
-
n.action === "input" && n.story.id ===
|
|
772
|
+
n.action === "input" && n.story.id === o ? t(n.story) : (n.action === "change" || n.action === "published") && n.storyId === o && window.location.reload();
|
|
773
773
|
});
|
|
774
774
|
});
|
|
775
775
|
}
|
|
776
|
-
}, vt = (
|
|
776
|
+
}, vt = (o = {}) => {
|
|
777
777
|
var t, e;
|
|
778
778
|
const {
|
|
779
779
|
bridge: s,
|
|
780
780
|
accessToken: r,
|
|
781
|
-
use:
|
|
781
|
+
use: i = [],
|
|
782
782
|
apiOptions: n = {},
|
|
783
783
|
richText: c = {}
|
|
784
|
-
} =
|
|
784
|
+
} = o;
|
|
785
785
|
n.accessToken = n.accessToken || r;
|
|
786
786
|
const a = { bridge: s, apiOptions: n };
|
|
787
787
|
let l = {};
|
|
788
|
-
|
|
788
|
+
i.forEach((d) => {
|
|
789
789
|
l = { ...l, ...d(a) };
|
|
790
790
|
});
|
|
791
791
|
const u = !(typeof window > "u") && ((e = (t = window.location) == null ? void 0 : t.search) == null ? void 0 : e.includes("_storyblok_tk"));
|
|
792
792
|
return s !== !1 && u && z(bt), $ = new b(c.schema), c.resolver && P($, c.resolver), l;
|
|
793
|
-
}, P = (
|
|
794
|
-
|
|
793
|
+
}, P = (o, t) => {
|
|
794
|
+
o.addNode("blok", (e) => {
|
|
795
795
|
let s = "";
|
|
796
796
|
return e.attrs.body.forEach((r) => {
|
|
797
797
|
s += t(r.component, r);
|
|
@@ -799,7 +799,7 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (i, t, e =
|
|
|
799
799
|
html: s
|
|
800
800
|
};
|
|
801
801
|
});
|
|
802
|
-
}, Rt = (
|
|
802
|
+
}, Rt = (o, t, e) => {
|
|
803
803
|
let s = e || $;
|
|
804
804
|
if (!s) {
|
|
805
805
|
console.error(
|
|
@@ -807,7 +807,7 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (i, t, e =
|
|
|
807
807
|
);
|
|
808
808
|
return;
|
|
809
809
|
}
|
|
810
|
-
return
|
|
810
|
+
return o === "" ? "" : o ? (t && (s = new b(t.schema), t.resolver && P(s, t.resolver)), s.render(o)) : (console.warn(`${o} is not a valid Richtext object. This might be because the value of the richtext field is empty.
|
|
811
811
|
|
|
812
812
|
For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`), "");
|
|
813
813
|
}, wt = /* @__PURE__ */ E({
|
|
@@ -815,22 +815,22 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (i, t, e =
|
|
|
815
815
|
props: {
|
|
816
816
|
blok: null
|
|
817
817
|
},
|
|
818
|
-
setup(
|
|
819
|
-
return (t, e) => (S(), C(I(
|
|
818
|
+
setup(o) {
|
|
819
|
+
return (t, e) => (S(), C(I(o.blok.component), A(O({ ...t.$props, ...t.$attrs })), null, 16));
|
|
820
820
|
}
|
|
821
821
|
}), $t = {
|
|
822
|
-
beforeMount(
|
|
822
|
+
beforeMount(o, t) {
|
|
823
823
|
if (t.value) {
|
|
824
824
|
const e = yt(t.value);
|
|
825
|
-
|
|
825
|
+
o.setAttribute("data-blok-c", e["data-blok-c"]), o.setAttribute("data-blok-uid", e["data-blok-uid"]), o.classList.add("storyblok__outline");
|
|
826
826
|
}
|
|
827
827
|
}
|
|
828
|
-
}, x = (
|
|
829
|
-
console.error(`You can't use ${
|
|
828
|
+
}, x = (o) => {
|
|
829
|
+
console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
830
830
|
`);
|
|
831
831
|
};
|
|
832
832
|
let m = null;
|
|
833
|
-
const jt = () => (m || x("useStoryblokApi"), m), Pt = async (
|
|
833
|
+
const jt = () => (m || x("useStoryblokApi"), m), Pt = async (o, t = {}, e = {}) => {
|
|
834
834
|
const s = M(null);
|
|
835
835
|
if (N(() => {
|
|
836
836
|
s.value && s.value.id && kt(
|
|
@@ -840,7 +840,7 @@ const jt = () => (m || x("useStoryblokApi"), m), Pt = async (i, t = {}, e = {})
|
|
|
840
840
|
);
|
|
841
841
|
}), m) {
|
|
842
842
|
const { data: r } = await m.get(
|
|
843
|
-
`cdn/stories/${
|
|
843
|
+
`cdn/stories/${o}`,
|
|
844
844
|
t
|
|
845
845
|
);
|
|
846
846
|
s.value = r.story;
|
|
@@ -848,8 +848,8 @@ const jt = () => (m || x("useStoryblokApi"), m), Pt = async (i, t = {}, e = {})
|
|
|
848
848
|
x("useStoryblok");
|
|
849
849
|
return s;
|
|
850
850
|
}, xt = {
|
|
851
|
-
install(
|
|
852
|
-
|
|
851
|
+
install(o, t = {}) {
|
|
852
|
+
o.directive("editable", $t), o.component("StoryblokComponent", wt);
|
|
853
853
|
const { storyblokApi: e } = vt(t);
|
|
854
854
|
m = e;
|
|
855
855
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/vue",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.4",
|
|
4
4
|
"description": "Storyblok directive for get editable elements.",
|
|
5
5
|
"main": "./dist/storyblok-vue.js",
|
|
6
6
|
"module": "./dist/storyblok-vue.mjs",
|
|
@@ -24,20 +24,20 @@
|
|
|
24
24
|
"prepublishOnly": "npm run build && cp ../README.md ./"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@storyblok/js": "^2.1.
|
|
27
|
+
"@storyblok/js": "^2.1.3"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@babel/core": "^7.21.
|
|
30
|
+
"@babel/core": "^7.21.4",
|
|
31
31
|
"@cypress/vite-dev-server": "^5.0.5",
|
|
32
32
|
"@cypress/vue": "^5.0.5",
|
|
33
33
|
"@vitejs/plugin-vue": "^4.1.0",
|
|
34
34
|
"@vue/babel-preset-app": "^5.0.8",
|
|
35
|
-
"@vue/test-utils": "2.3.
|
|
35
|
+
"@vue/test-utils": "2.3.2",
|
|
36
36
|
"@vue/tsconfig": "^0.1.3",
|
|
37
37
|
"@vue/vue3-jest": "^29.2.3",
|
|
38
38
|
"babel-jest": "^29.4.3",
|
|
39
|
-
"cypress": "^12.
|
|
40
|
-
"eslint-plugin-cypress": "^2.
|
|
39
|
+
"cypress": "^12.10.0",
|
|
40
|
+
"eslint-plugin-cypress": "^2.13.2",
|
|
41
41
|
"eslint-plugin-jest": "^27.2.1",
|
|
42
42
|
"jest": "^29.4.3",
|
|
43
43
|
"typescript": "^4.9.5",
|