@storyblok/vue 7.1.4 → 7.1.5
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/dist/storyblok-vue.js +26 -3
- package/dist/storyblok-vue.mjs +52 -29
- package/package.json +5 -5
package/dist/storyblok-vue.js
CHANGED
|
@@ -1,4 +1,27 @@
|
|
|
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.
|
|
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 _=!1;const j=[],A=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():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()),_=!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 S(o){return!(o!==o||o===1/0||o===-1/0)}function z(o,t,e){if(!S(t))throw new TypeError("Expected `limit` to be a finite number");if(!S(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"}),W=()=>({tag:"p"}),G=o=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:o.attrs.name,emoji:o.attrs.emoji}}]}),Q=()=>({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:`color:${o.attrs.color}`}}]}),P={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:W,emoji:G},marks:{bold:Q,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=P),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.
|
|
2
|
+
The "content" field must be an array of nodes as the type ISbRichtext.
|
|
3
|
+
ISbRichtext:
|
|
4
|
+
content?: ISbRichtext[]
|
|
5
|
+
marks?: ISbRichtext[]
|
|
6
|
+
attrs?: any
|
|
7
|
+
text?: string
|
|
8
|
+
type: string
|
|
9
|
+
|
|
10
|
+
Example:
|
|
11
|
+
{
|
|
12
|
+
content: [
|
|
13
|
+
{
|
|
14
|
+
content: [
|
|
15
|
+
{
|
|
16
|
+
text: 'Hello World',
|
|
17
|
+
type: 'text'
|
|
18
|
+
}
|
|
19
|
+
],
|
|
20
|
+
type: 'paragraph'
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
type: 'doc'
|
|
24
|
+
}`),""}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 R=0,O=0;return typeof f[0]=="number"&&(R=f[0]),typeof f[1]=="number"&&(O=f[1]),`//${g}/m/${R}x${O}${n} ${R}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||5,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",x=(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&&A(ft),$=new b(c.schema),c.resolver&&E($,c.resolver),l},E=(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&&E(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
25
|
|
|
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")}}},
|
|
4
|
-
`)};let k=null;const kt=()=>(k||
|
|
26
|
+
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")}}},C=o=>{console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
27
|
+
`)};let k=null;const kt=()=>(k||C("useStoryblokApi"),k),vt=async(o,t={},e={})=>{const s=p.ref(null);if(p.onMounted(()=>{s.value&&s.value.id&&x(s.value.id,r=>s.value=r,e)}),k){const{data:r}=await k.get(`cdn/stories/${o}`,t);s.value=r.story}else C("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=P,d.StoryblokComponent=I,d.StoryblokVue=wt,d.apiPlugin=pt,d.renderRichText=yt,d.useStoryblok=vt,d.useStoryblokApi=kt,d.useStoryblokBridge=x,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
|
package/dist/storyblok-vue.mjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
let
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as S, openBlock as E, createBlock as I, resolveDynamicComponent as C, normalizeProps as O, guardReactiveProps as A, ref as M, onMounted as N } from "vue";
|
|
2
|
+
let R = !1;
|
|
3
|
+
const _ = [], 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.");
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
R ? r() : _.push(r);
|
|
10
10
|
}, document.getElementById("storyblok-javascript-bridge")))
|
|
11
11
|
return;
|
|
12
12
|
const s = document.createElement("script");
|
|
13
13
|
s.async = !0, s.src = o, s.id = "storyblok-javascript-bridge", s.onerror = (r) => e(r), s.onload = (r) => {
|
|
14
|
-
|
|
14
|
+
_.forEach((i) => i()), R = !0, t(r);
|
|
15
15
|
}, document.getElementsByTagName("head")[0].appendChild(s);
|
|
16
16
|
});
|
|
17
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);
|
|
@@ -79,16 +79,16 @@ const H = function(o, t) {
|
|
|
79
79
|
singleTag: "br"
|
|
80
80
|
}), K = (o) => ({
|
|
81
81
|
tag: `h${o.attrs.level}`
|
|
82
|
-
}),
|
|
82
|
+
}), W = (o) => ({
|
|
83
83
|
singleTag: [
|
|
84
84
|
{
|
|
85
85
|
tag: "img",
|
|
86
86
|
attrs: H(o.attrs, ["src", "alt", "title"])
|
|
87
87
|
}
|
|
88
88
|
]
|
|
89
|
-
}),
|
|
89
|
+
}), G = () => ({
|
|
90
90
|
tag: "li"
|
|
91
|
-
}),
|
|
91
|
+
}), Q = () => ({
|
|
92
92
|
tag: "ol"
|
|
93
93
|
}), X = () => ({
|
|
94
94
|
tag: "p"
|
|
@@ -162,7 +162,7 @@ const H = function(o, t) {
|
|
|
162
162
|
{
|
|
163
163
|
tag: "span",
|
|
164
164
|
attrs: {
|
|
165
|
-
style: `
|
|
165
|
+
style: `color:${o.attrs.color}`
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
]
|
|
@@ -174,9 +174,9 @@ const H = function(o, t) {
|
|
|
174
174
|
code_block: F,
|
|
175
175
|
hard_break: Y,
|
|
176
176
|
heading: K,
|
|
177
|
-
image:
|
|
178
|
-
list_item:
|
|
179
|
-
ordered_list:
|
|
177
|
+
image: W,
|
|
178
|
+
list_item: G,
|
|
179
|
+
ordered_list: Q,
|
|
180
180
|
paragraph: X,
|
|
181
181
|
emoji: Z
|
|
182
182
|
},
|
|
@@ -223,7 +223,30 @@ class b {
|
|
|
223
223
|
}), e.optimizeImages ? this.optimizeImages(s, e.optimizeImages) : s;
|
|
224
224
|
}
|
|
225
225
|
return console.warn(
|
|
226
|
-
|
|
226
|
+
`The render method must receive an Object with a "content" field.
|
|
227
|
+
The "content" field must be an array of nodes as the type ISbRichtext.
|
|
228
|
+
ISbRichtext:
|
|
229
|
+
content?: ISbRichtext[]
|
|
230
|
+
marks?: ISbRichtext[]
|
|
231
|
+
attrs?: any
|
|
232
|
+
text?: string
|
|
233
|
+
type: string
|
|
234
|
+
|
|
235
|
+
Example:
|
|
236
|
+
{
|
|
237
|
+
content: [
|
|
238
|
+
{
|
|
239
|
+
content: [
|
|
240
|
+
{
|
|
241
|
+
text: 'Hello World',
|
|
242
|
+
type: 'text'
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
type: 'paragraph'
|
|
246
|
+
}
|
|
247
|
+
],
|
|
248
|
+
type: 'doc'
|
|
249
|
+
}`
|
|
227
250
|
), "";
|
|
228
251
|
}
|
|
229
252
|
optimizeImages(t, e) {
|
|
@@ -467,7 +490,7 @@ class mt {
|
|
|
467
490
|
t.headers && t.headers[n] && s.set(n, t.headers[n]);
|
|
468
491
|
});
|
|
469
492
|
let r = 5;
|
|
470
|
-
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 = q(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 ft({
|
|
493
|
+
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 || 5, this.throttle = q(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 ft({
|
|
471
494
|
baseURL: e,
|
|
472
495
|
timeout: t.timeout || 0,
|
|
473
496
|
headers: s,
|
|
@@ -736,7 +759,7 @@ class mt {
|
|
|
736
759
|
return await this.cacheProvider().flush(), this;
|
|
737
760
|
}
|
|
738
761
|
}
|
|
739
|
-
const
|
|
762
|
+
const Rt = (o = {}) => {
|
|
740
763
|
const { apiOptions: t } = o;
|
|
741
764
|
if (!t.accessToken) {
|
|
742
765
|
console.error(
|
|
@@ -789,8 +812,8 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (o, t, e =
|
|
|
789
812
|
l = { ...l, ...d(a) };
|
|
790
813
|
});
|
|
791
814
|
const u = !(typeof window > "u") && ((e = (t = window.location) == null ? void 0 : t.search) == null ? void 0 : e.includes("_storyblok_tk"));
|
|
792
|
-
return s !== !1 && u && z(bt), $ = new b(c.schema), c.resolver &&
|
|
793
|
-
},
|
|
815
|
+
return s !== !1 && u && z(bt), $ = new b(c.schema), c.resolver && x($, c.resolver), l;
|
|
816
|
+
}, x = (o, t) => {
|
|
794
817
|
o.addNode("blok", (e) => {
|
|
795
818
|
let s = "";
|
|
796
819
|
return e.attrs.body.forEach((r) => {
|
|
@@ -799,7 +822,7 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (o, t, e =
|
|
|
799
822
|
html: s
|
|
800
823
|
};
|
|
801
824
|
});
|
|
802
|
-
},
|
|
825
|
+
}, _t = (o, t, e) => {
|
|
803
826
|
let s = e || $;
|
|
804
827
|
if (!s) {
|
|
805
828
|
console.error(
|
|
@@ -807,16 +830,16 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (o, t, e =
|
|
|
807
830
|
);
|
|
808
831
|
return;
|
|
809
832
|
}
|
|
810
|
-
return o === "" ? "" : o ? (t && (s = new b(t.schema), t.resolver &&
|
|
833
|
+
return o === "" ? "" : o ? (t && (s = new b(t.schema), t.resolver && x(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
834
|
|
|
812
835
|
For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`), "");
|
|
813
|
-
}, wt = /* @__PURE__ */
|
|
836
|
+
}, wt = /* @__PURE__ */ S({
|
|
814
837
|
__name: "StoryblokComponent",
|
|
815
838
|
props: {
|
|
816
839
|
blok: null
|
|
817
840
|
},
|
|
818
841
|
setup(o) {
|
|
819
|
-
return (t, e) => (
|
|
842
|
+
return (t, e) => (E(), I(C(o.blok.component), O(A({ ...t.$props, ...t.$attrs })), null, 16));
|
|
820
843
|
}
|
|
821
844
|
}), $t = {
|
|
822
845
|
beforeMount(o, t) {
|
|
@@ -825,12 +848,12 @@ const bt = "https://app.storyblok.com/f/storyblok-v2-latest.js", kt = (o, t, e =
|
|
|
825
848
|
o.setAttribute("data-blok-c", e["data-blok-c"]), o.setAttribute("data-blok-uid", e["data-blok-uid"]), o.classList.add("storyblok__outline");
|
|
826
849
|
}
|
|
827
850
|
}
|
|
828
|
-
},
|
|
851
|
+
}, P = (o) => {
|
|
829
852
|
console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
|
|
830
853
|
`);
|
|
831
854
|
};
|
|
832
855
|
let m = null;
|
|
833
|
-
const jt = () => (m ||
|
|
856
|
+
const jt = () => (m || P("useStoryblokApi"), m), xt = async (o, t = {}, e = {}) => {
|
|
834
857
|
const s = M(null);
|
|
835
858
|
if (N(() => {
|
|
836
859
|
s.value && s.value.id && kt(
|
|
@@ -845,9 +868,9 @@ const jt = () => (m || x("useStoryblokApi"), m), Pt = async (o, t = {}, e = {})
|
|
|
845
868
|
);
|
|
846
869
|
s.value = r.story;
|
|
847
870
|
} else
|
|
848
|
-
|
|
871
|
+
P("useStoryblok");
|
|
849
872
|
return s;
|
|
850
|
-
},
|
|
873
|
+
}, Pt = {
|
|
851
874
|
install(o, t = {}) {
|
|
852
875
|
o.directive("editable", $t), o.component("StoryblokComponent", wt);
|
|
853
876
|
const { storyblokApi: e } = vt(t);
|
|
@@ -858,10 +881,10 @@ export {
|
|
|
858
881
|
b as RichTextResolver,
|
|
859
882
|
pt as RichTextSchema,
|
|
860
883
|
wt as StoryblokComponent,
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
884
|
+
Pt as StoryblokVue,
|
|
885
|
+
Rt as apiPlugin,
|
|
886
|
+
_t as renderRichText,
|
|
887
|
+
xt as useStoryblok,
|
|
865
888
|
jt as useStoryblokApi,
|
|
866
889
|
kt as useStoryblokBridge
|
|
867
890
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/vue",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.5",
|
|
4
4
|
"description": "Storyblok directive for get editable elements.",
|
|
5
5
|
"main": "./dist/storyblok-vue.js",
|
|
6
6
|
"module": "./dist/storyblok-vue.mjs",
|
|
@@ -24,24 +24,24 @@
|
|
|
24
24
|
"prepublishOnly": "npm run build && cp ../README.md ./"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@storyblok/js": "^2.1.
|
|
27
|
+
"@storyblok/js": "^2.1.4"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@babel/core": "^7.21.4",
|
|
31
31
|
"@cypress/vite-dev-server": "^5.0.5",
|
|
32
32
|
"@cypress/vue": "^5.0.5",
|
|
33
|
-
"@vitejs/plugin-vue": "^4.1
|
|
33
|
+
"@vitejs/plugin-vue": "^4.2.1",
|
|
34
34
|
"@vue/babel-preset-app": "^5.0.8",
|
|
35
35
|
"@vue/test-utils": "2.3.2",
|
|
36
36
|
"@vue/tsconfig": "^0.1.3",
|
|
37
|
-
"@vue/vue3-jest": "^29.2.
|
|
37
|
+
"@vue/vue3-jest": "^29.2.4",
|
|
38
38
|
"babel-jest": "^29.4.3",
|
|
39
39
|
"cypress": "^12.10.0",
|
|
40
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",
|
|
44
|
-
"vite": "^4.
|
|
44
|
+
"vite": "^4.3.5",
|
|
45
45
|
"vue": "^3.2.47",
|
|
46
46
|
"vue-tsc": "^1.2.0"
|
|
47
47
|
},
|