Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@storyblok/vue

Package Overview
Dependencies
Maintainers
0
Versions
68
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storyblok/vue - npm Package Compare versions

Comparing version 8.0.9 to 8.1.0

dist/components/StoryblokRichText.vue.d.ts
dist/composables/useStoryblokRichText.d.ts

18

dist/index.d.ts
import type { Ref, Plugin } from "vue";
import type { StoryblokClient, SbSDKOptions, StoryblokBridgeConfigV2, ISbStoryData, ISbStoriesParams } from "./types";
import type { StoryblokClient, StoryblokBridgeConfigV2, ISbStoryData, ISbStoriesParams } from "./types";
export { useStoryblokBridge, apiPlugin, renderRichText, RichTextSchema, RichTextResolver, BlockTypes, MarkTypes, richTextResolver, TextTypes, type StoryblokRichTextOptions, type StoryblokRichTextDocumentNode, type StoryblokRichTextNodeTypes, type StoryblokRichTextNode, type StoryblokRichTextResolvers, type StoryblokRichTextNodeResolver, type StoryblokRichTextImageOptimizationOptions, } from "@storyblok/js";
export { default as StoryblokComponent } from "./StoryblokComponent.vue";
export { default as StoryblokRichText } from "./components/StoryblokRichText.vue";
export * from "./composables/useStoryblokRichText";
export declare const useStoryblokApi: () => StoryblokClient;
export { useStoryblokBridge, apiPlugin, renderRichText, RichTextSchema, RichTextResolver, } from "@storyblok/js";
export { default as StoryblokComponent } from "./StoryblokComponent.vue";
export declare const useStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<Ref<ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
[index: string]: any;
}>>>;
export interface SbVueSDKOptions extends SbSDKOptions {
/**
* Show a fallback component in your frontend if a component is not registered properly.
*/
enableFallbackComponent?: boolean;
/**
* Provide a custom fallback component, e.g. "CustomFallback".
*/
customFallbackComponent?: string;
}
export declare const StoryblokVue: Plugin;
export * from "./types";

6

dist/storyblok-vue.js

@@ -1,2 +0,2 @@

(function(f,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],p):(f=typeof globalThis<"u"?globalThis:f||self,p(f.storyblokVue={},f.Vue))})(this,function(f,p){"use strict";let S=!1;const j=[],M=o=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=r=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}S?r():j.push(r)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=o,s.id="storyblok-javascript-bridge",s.onerror=r=>t(r),s.onload=r=>{j.forEach(n=>n()),S=!0,e(r)},document.getElementsByTagName("head")[0].appendChild(s)});var V=Object.defineProperty,z=(o,e,t)=>e in o?V(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,c=(o,e,t)=>(z(o,typeof e!="symbol"?e+"":e,t),t);function C(o){return!(o!==o||o===1/0||o===-1/0)}function D(o,e,t){if(!C(e))throw new TypeError("Expected `limit` to be a finite number");if(!C(t))throw new TypeError("Expected `interval` to be a finite number");const s=[];let r=[],n=0;const i=function(){n++;const a=setTimeout(function(){n--,s.length>0&&i(),r=r.filter(function(h){return h!==a})},t);r.indexOf(a)<0&&r.push(a);const u=s.shift();u.resolve(o.apply(u.self,u.args))},l=function(...a){const u=this;return new Promise(function(h,d){s.push({resolve:h,reject:d,args:a,self:u}),n<e&&i()})};return l.abort=function(){r.forEach(clearTimeout),r=[],s.forEach(function(a){a.reject(function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"})}),s.length=0},l}class _{constructor(){c(this,"isCDNUrl",(e="")=>e.indexOf("/cdn/")>-1),c(this,"getOptionsPage",(e,t=25,s=1)=>({...e,per_page:t,page:s})),c(this,"delay",e=>new Promise(t=>setTimeout(t,e))),c(this,"arrayFrom",(e=0,t)=>[...Array(e)].map(t)),c(this,"range",(e=0,t=e)=>{const s=Math.abs(t-e)||0,r=e<t?1:-1;return this.arrayFrom(s,(n,i)=>i*r+e)}),c(this,"asyncMap",async(e,t)=>Promise.all(e.map(t))),c(this,"flatMap",(e=[],t)=>e.map(t).reduce((s,r)=>[...s,...r],[])),c(this,"escapeHTML",function(e){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},s=/[&<>"']/g,r=RegExp(s.source);return e&&r.test(e)?e.replace(s,n=>t[n]):e})}stringify(e,t,s){const r=[];for(const n in e){if(!Object.prototype.hasOwnProperty.call(e,n))continue;const i=e[n],l=s?"":encodeURIComponent(n);let a;typeof i=="object"?a=this.stringify(i,t?t+encodeURIComponent("["+l+"]"):l,Array.isArray(i)):a=(t?t+encodeURIComponent("["+l+"]"):l)+"="+encodeURIComponent(i),r.push(a)}return r.join("&")}getRegionURL(e){const t="api.storyblok.com",s="api-us.storyblok.com",r="app.storyblokchina.cn",n="api-ap.storyblok.com",i="api-ca.storyblok.com";switch(e){case"us":return s;case"cn":return r;case"ap":return n;case"ca":return i;default:return t}}}const F=function(o,e){const t={};for(const s in o){const r=o[s];e.indexOf(s)>-1&&r!==null&&(t[s]=r)}return t},U=o=>o==="email",H=()=>({singleTag:"hr"}),q=()=>({tag:"blockquote"}),B=()=>({tag:"ul"}),J=o=>({tag:["pre",{tag:"code",attrs:o.attrs}]}),K=()=>({singleTag:"br"}),Y=o=>({tag:`h${o.attrs.level}`}),W=o=>({singleTag:[{tag:"img",attrs:F(o.attrs,["src","alt","title"])}]}),G=()=>({tag:"li"}),Q=()=>({tag:"ol"}),X=()=>({tag:"p"}),Z=o=>({tag:[{tag:"span",attrs:{"data-type":"emoji","data-name":o.attrs.name,emoji:o.attrs.emoji}}]}),ee=()=>({tag:"b"}),te=()=>({tag:"s"}),se=()=>({tag:"u"}),re=()=>({tag:"strong"}),oe=()=>({tag:"code"}),ne=()=>({tag:"i"}),ie=o=>{if(!o.attrs)return{tag:""};const e=new _().escapeHTML,t={...o.attrs},{linktype:s="url"}=o.attrs;if(delete t.linktype,t.href&&(t.href=e(o.attrs.href||"")),U(s)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),t.custom){for(const r in t.custom)t[r]=t.custom[r];delete t.custom}return{tag:[{tag:"a",attrs:t}]}},ae=o=>({tag:[{tag:"span",attrs:o.attrs}]}),le=()=>({tag:"sub"}),ce=()=>({tag:"sup"}),he=o=>({tag:[{tag:"span",attrs:o.attrs}]}),ue=o=>{var e;return(e=o.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`background-color:${o.attrs.color};`}}]}:{tag:""}},pe=o=>{var e;return(e=o.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`color:${o.attrs.color}`}}]}:{tag:""}},P={nodes:{horizontal_rule:H,blockquote:q,bullet_list:B,code_block:J,hard_break:K,heading:Y,image:W,list_item:G,ordered_list:Q,paragraph:X,emoji:Z},marks:{bold:ee,strike:te,underline:se,strong:re,code:oe,italic:ne,link:ie,styled:ae,subscript:le,superscript:ce,anchor:he,highlight:ue,textStyle:pe}},de=function(o){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,s=RegExp(t.source);return o&&s.test(o)?o.replace(t,r=>e[r]):o};class k{constructor(e){c(this,"marks"),c(this,"nodes"),e||(e=P),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let s="";return e.content.forEach(r=>{s+=this.renderNode(r)}),t.optimizeImages?this.optimizeImages(s,t.optimizeImages):s}return console.warn(`The render method must receive an Object with a "content" field.
(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.storyblokVue={},m.Vue))})(this,function(m,g){"use strict";let D=!1;const H=[],Q=s=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=o=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}D?o():H.push(o)},document.getElementById("storyblok-javascript-bridge")))return;const r=document.createElement("script");r.async=!0,r.src=s,r.id="storyblok-javascript-bridge",r.onerror=o=>t(o),r.onload=o=>{H.forEach(n=>n()),D=!0,e(o)},document.getElementsByTagName("head")[0].appendChild(r)});var Z=Object.defineProperty,ee=(s,e,t)=>e in s?Z(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,d=(s,e,t)=>ee(s,typeof e!="symbol"?e+"":e,t);function z(s){return!(s!==s||s===1/0||s===-1/0)}function te(s,e,t){if(!z(e))throw new TypeError("Expected `limit` to be a finite number");if(!z(t))throw new TypeError("Expected `interval` to be a finite number");const r=[];let o=[],n=0;const i=function(){n++;const a=setTimeout(function(){n--,r.length>0&&i(),o=o.filter(function(p){return p!==a})},t);o.indexOf(a)<0&&o.push(a);const u=r.shift();u.resolve(s.apply(u.self,u.args))},l=function(...a){const u=this;return new Promise(function(p,h){r.push({resolve:p,reject:h,args:a,self:u}),n<e&&i()})};return l.abort=function(){o.forEach(clearTimeout),o=[],r.forEach(function(a){a.reject(function(){Error.call(this,"Throttled function aborted"),this.name="AbortError"})}),r.length=0},l}class O{constructor(){d(this,"isCDNUrl",(e="")=>e.indexOf("/cdn/")>-1),d(this,"getOptionsPage",(e,t=25,r=1)=>({...e,per_page:t,page:r})),d(this,"delay",e=>new Promise(t=>setTimeout(t,e))),d(this,"arrayFrom",(e=0,t)=>[...Array(e)].map(t)),d(this,"range",(e=0,t=e)=>{const r=Math.abs(t-e)||0,o=e<t?1:-1;return this.arrayFrom(r,(n,i)=>i*o+e)}),d(this,"asyncMap",async(e,t)=>Promise.all(e.map(t))),d(this,"flatMap",(e=[],t)=>e.map(t).reduce((r,o)=>[...r,...o],[])),d(this,"escapeHTML",function(e){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},r=/[&<>"']/g,o=RegExp(r.source);return e&&o.test(e)?e.replace(r,n=>t[n]):e})}stringify(e,t,r){const o=[];for(const n in e){if(!Object.prototype.hasOwnProperty.call(e,n))continue;const i=e[n],l=r?"":encodeURIComponent(n);let a;typeof i=="object"?a=this.stringify(i,t?t+encodeURIComponent("["+l+"]"):l,Array.isArray(i)):a=(t?t+encodeURIComponent("["+l+"]"):l)+"="+encodeURIComponent(i),o.push(a)}return o.join("&")}getRegionURL(e){const t="api.storyblok.com",r="api-us.storyblok.com",o="app.storyblokchina.cn",n="api-ap.storyblok.com",i="api-ca.storyblok.com";switch(e){case"us":return r;case"cn":return o;case"ap":return n;case"ca":return i;default:return t}}}const re=function(s,e){const t={};for(const r in s){const o=s[r];e.indexOf(r)>-1&&o!==null&&(t[r]=o)}return t},se=s=>s==="email",oe=()=>({singleTag:"hr"}),ne=()=>({tag:"blockquote"}),ie=()=>({tag:"ul"}),ae=s=>({tag:["pre",{tag:"code",attrs:s.attrs}]}),le=()=>({singleTag:"br"}),ce=s=>({tag:`h${s.attrs.level}`}),he=s=>({singleTag:[{tag:"img",attrs:re(s.attrs,["src","alt","title"])}]}),ue=()=>({tag:"li"}),pe=()=>({tag:"ol"}),de=()=>({tag:"p"}),ge=s=>({tag:[{tag:"span",attrs:{"data-type":"emoji","data-name":s.attrs.name,emoji:s.attrs.emoji}}]}),fe=()=>({tag:"b"}),me=()=>({tag:"s"}),ye=()=>({tag:"u"}),be=()=>({tag:"strong"}),ke=()=>({tag:"code"}),ve=()=>({tag:"i"}),Te=s=>{if(!s.attrs)return{tag:""};const e=new O().escapeHTML,t={...s.attrs},{linktype:r="url"}=s.attrs;if(delete t.linktype,t.href&&(t.href=e(s.attrs.href||"")),se(r)&&(t.href=`mailto:${t.href}`),t.anchor&&(t.href=`${t.href}#${t.anchor}`,delete t.anchor),t.custom){for(const o in t.custom)t[o]=t.custom[o];delete t.custom}return{tag:[{tag:"a",attrs:t}]}},$e=s=>({tag:[{tag:"span",attrs:s.attrs}]}),_e=()=>({tag:"sub"}),Re=()=>({tag:"sup"}),we=s=>({tag:[{tag:"span",attrs:s.attrs}]}),Se=s=>{var e;return(e=s.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`background-color:${s.attrs.color};`}}]}:{tag:""}},Ee=s=>{var e;return(e=s.attrs)!=null&&e.color?{tag:[{tag:"span",attrs:{style:`color:${s.attrs.color}`}}]}:{tag:""}},B={nodes:{horizontal_rule:oe,blockquote:ne,bullet_list:ie,code_block:ae,hard_break:le,heading:ce,image:he,list_item:ue,ordered_list:pe,paragraph:de,emoji:ge},marks:{bold:fe,strike:me,underline:ye,strong:be,code:ke,italic:ve,link:Te,styled:$e,subscript:_e,superscript:Re,anchor:we,highlight:Se,textStyle:Ee}},Ce=function(s){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,r=RegExp(t.source);return s&&r.test(s)?s.replace(t,o=>e[o]):s};class Ie{constructor(e){d(this,"marks"),d(this,"nodes"),e||(e=B),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(console.warn("Warning ⚠️: The RichTextResolver class is deprecated and will be removed in the next major release. Please use the `@storyblok/richtext` package instead. https://github.com/storyblok/richtext/"),e&&e.content&&Array.isArray(e.content)){let r="";return e.content.forEach(o=>{r+=this.renderNode(o)}),t.optimizeImages?this.optimizeImages(r,t.optimizeImages):r}return console.warn(`The render method must receive an Object with a "content" field.
The "content" field must be an array of nodes as the type ISbRichtext.

@@ -24,3 +24,3 @@ ISbRichtext:

type: 'doc'
}`),""}optimizeImages(e,t){let s=0,r=0,n="",i="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(n+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(n+=`height="${t.height}" `,r=t.height),(t.loading==="lazy"||t.loading==="eager")&&(n+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(n+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(i+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(i+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(i+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(i+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(i+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(i+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(i+=`:rotate(${t.filters.rotate})`),i.length>0&&(i="/filters"+i))),n.length>0&&(e=e.replace(/<img/g,`<img ${n.trim()}`));const l=s>0||r>0||i.length>0?`${s}x${r}${i}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${l}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var u,h;const d=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const m={srcset:(u=t.srcset)==null?void 0:u.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${i} ${g}w`;if(typeof g=="object"&&g.length===2){let T=0,L=0;return typeof g[0]=="number"&&(T=g[0]),typeof g[1]=="number"&&(L=g[1]),`//${d}/m/${T}x${L}${i} ${T}w`}}).join(", "),sizes:(h=t.sizes)==null?void 0:h.map(g=>g).join(", ")};let b="";return m.srcset&&(b+=`srcset="${m.srcset}" `),m.sizes&&(b+=`sizes="${m.sizes}" `),a.replace(/<img/g,`<img ${b.trim()}`)}return a})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(r=>{const n=this.getMatchingMark(r);n&&n.tag!==""&&t.push(this.renderOpeningTag(n.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(r=>{t.push(this.renderNode(r))}):e.text?t.push(de(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(r=>{const n=this.getMatchingMark(r);n&&n.tag!==""&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let r=`<${s.tag}`;if(s.attrs){for(const n in s.attrs)if(Object.prototype.hasOwnProperty.call(s.attrs,n)){const i=s.attrs[n];i!==null&&(r+=` ${n}="${i}"`)}}return`${r}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}class fe{constructor(e){c(this,"baseURL"),c(this,"timeout"),c(this,"headers"),c(this,"responseInterceptor"),c(this,"fetch"),c(this,"ejectInterceptor"),c(this,"url"),c(this,"parameters"),c(this,"fetchOptions"),this.baseURL=e.baseURL,this.headers=e.headers||new Headers,this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={},this.fetchOptions={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],s={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(r=>{s.data=r});for(const r of e.headers.entries())t[r[0]]=r[1];return s.headers={...t},s.status=e.status,s.statusText=e.statusText,s}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,s=null;if(e==="get"){const a=new _;t=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else s=JSON.stringify(this.parameters);const r=new URL(t),n=new AbortController,{signal:i}=n;let l;this.timeout&&(l=setTimeout(()=>n.abort(),this.timeout));try{const a=await this.fetch(`${r}`,{method:e,headers:this.headers,body:s,signal:i,...this.fetchOptions});this.timeout&&clearTimeout(l);const u=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(u)):this._statusHandler(u)}catch(a){return{message:a}}}setFetchOptions(e={}){Object.keys(e).length>0&&"method"in e&&delete e.method,this.fetchOptions={...e}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise((s,r)=>{if(t.test(`${e.status}`))return s(e);const n={message:e.statusText,status:e.status,response:Array.isArray(e.data)?e.data[0]:e.data.error||e.data.slug};r(n)})}}const x="SB-Agent",$={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"6.0.0"};let w={};const y={};class ge{constructor(e,t){c(this,"client"),c(this,"maxRetries"),c(this,"retriesDelay"),c(this,"throttle"),c(this,"accessToken"),c(this,"cache"),c(this,"helpers"),c(this,"resolveCounter"),c(this,"relations"),c(this,"links"),c(this,"richTextResolver"),c(this,"resolveNestedRelations"),c(this,"stringifiedStoriesCache");let s=e.endpoint||t;if(!s){const i=new _().getRegionURL,l=e.https===!1?"http":"https";e.oauthToken?s=`${l}://${i(e.region)}/v1`:s=`${l}://${i(e.region)}/v2`}const r=new Headers;if(r.set("Content-Type","application/json"),r.set("Accept","application/json"),e.headers)for(const i in e.headers)r.set(i,e.headers[i]);r.has(x)||(r.set(x,$.defaultAgentName),r.set($.defaultAgentVersion,$.packageVersion));let n=5;e.oauthToken&&(r.set("Authorization",e.oauthToken),n=3),e.rateLimit&&(n=e.rateLimit),e.richTextSchema?this.richTextResolver=new k(e.richTextSchema):this.richTextResolver=new k,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||10,this.retriesDelay=300,this.throttle=D(this.throttledRequest,n,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new _,this.resolveCounter=0,this.resolveNestedRelations=e.resolveNestedRelations||!0,this.stringifiedStoriesCache={},this.client=new fe({baseURL:s,timeout:e.timeout||0,headers:r,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let s="";return t.attrs.body&&t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})}parseParams(e){return e.token||(e.token=this.getToken()),e.cv||(e.cv=y[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),typeof e.resolve_relations<"u"&&(e.resolve_level=2),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,s,r,n){const i=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,s,r));return this.cacheResponse(e,i,void 0,n)}get(e,t,s){t||(t={});const r=`/${e}`,n=this.factoryParamOptions(r,t);return this.cacheResponse(r,n,void 0,s)}async getAll(e,t,s,r){const n=(t==null?void 0:t.per_page)||25,i=`/${e}`,l=i.split("/"),a=s||l[l.length-1],u=1,h=await this.makeRequest(i,t,n,u,r),d=h.total?Math.ceil(h.total/n):1,m=await this.helpers.asyncMap(this.helpers.range(u,d),b=>this.makeRequest(i,t,n,b+1,r));return this.helpers.flatMap([h,...m],b=>Object.values(b.data[a]))}post(e,t,s){const r=`/${e}`;return Promise.resolve(this.throttle("post",r,t,s))}put(e,t,s){const r=`/${e}`;return Promise.resolve(this.throttle("put",r,t,s))}delete(e,t,s){const r=`/${e}`;return Promise.resolve(this.throttle("delete",r,t,s))}getStories(e,t){return this._addResolveLevel(e),this.get("cdn/stories",e,t)}getStory(e,t,s){return this._addResolveLevel(t),this.get(`cdn/stories/${e}`,t,s)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_addResolveLevel(e){typeof e.resolve_relations<"u"&&(e.resolve_level=2)}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t,s){const r=e[t];r&&r.fieldtype=="multilink"&&r.linktype=="story"&&typeof r.id=="string"&&this.links[s][r.id]?r.story=this._cleanCopy(this.links[s][r.id]):r&&r.linktype==="story"&&typeof r.uuid=="string"&&this.links[s][r.uuid]&&(r.story=this._cleanCopy(this.links[s][r.uuid]))}getStoryReference(e,t){return this.relations[e][t]?(this.stringifiedStoriesCache[t]||(this.stringifiedStoriesCache[t]=JSON.stringify(this.relations[e][t])),JSON.parse(this.stringifiedStoriesCache[t])):t}_insertRelations(e,t,s,r){s.indexOf(`${e.component}.${t}`)>-1&&(typeof e[t]=="string"?e[t]=this.getStoryReference(r,e[t]):Array.isArray(e[t])&&(e[t]=e[t].map(n=>this.getStoryReference(r,n)).filter(Boolean)))}iterateTree(e,t,s){const r=n=>{if(n!=null){if(n.constructor===Array)for(let i=0;i<n.length;i++)r(n[i]);else if(n.constructor===Object){if(n._stopResolving)return;for(const i in n)(n.component&&n._uid||n.type==="link")&&(this._insertRelations(n,i,t,s),this._insertLinks(n,i,s)),r(n[i])}}};r(e.content)}async resolveLinks(e,t,s){let r=[];if(e.link_uuids){const n=e.link_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const u=Math.min(n,a+l);i.push(e.link_uuids.slice(a,u))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(",")})).data.stories.forEach(u=>{r.push(u)})}else r=e.links;r.forEach(n=>{this.links[s][n.uuid]={...n,_stopResolving:!0}})}async resolveRelations(e,t,s){let r=[];if(e.rel_uuids){const n=e.rel_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const u=Math.min(n,a+l);i.push(e.rel_uuids.slice(a,u))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(","),excluding_fields:t.excluding_fields})).data.stories.forEach(u=>{r.push(u)})}else r=e.rels;r&&r.length>0&&r.forEach(n=>{this.relations[s][n.uuid]={...n,_stopResolving:!0}})}async resolveStories(e,t,s){var r,n;let i=[];if(this.links[s]={},this.relations[s]={},typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(i=t.resolve_relations.split(",")),await this.resolveRelations(e,t,s)),t.resolve_links&&["1","story","url","link"].indexOf(t.resolve_links)>-1&&((r=e.links)!=null&&r.length||(n=e.link_uuids)!=null&&n.length)&&await this.resolveLinks(e,t,s),this.resolveNestedRelations)for(const l in this.relations[s])this.iterateTree(this.relations[s][l],i,s);e.story?this.iterateTree(e.story,i,s):e.stories.forEach(l=>{this.iterateTree(l,i,s)}),this.stringifiedStoriesCache={},delete this.links[s],delete this.relations[s]}async cacheResponse(e,t,s,r){const n=this.helpers.stringify({url:e,params:t}),i=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const l=await i.get(n);if(l)return Promise.resolve(l)}return new Promise(async(l,a)=>{var u;try{const h=await this.throttle("get",e,t,r);if(h.status!==200)return a(h);let d={data:h.data,headers:h.headers};if((u=h.headers)!=null&&u["per-page"]&&(d=Object.assign({},d,{perPage:h.headers["per-page"]?parseInt(h.headers["per-page"]):0,total:h.headers["per-page"]?parseInt(h.headers.total):0})),d.data.story||d.data.stories){const m=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(d.data,t,`${m}`)}return t.version==="published"&&e!="/cdn/spaces/me"&&await i.set(n,d),d.data.cv&&t.token&&(t.version==="draft"&&y[t.token]!=d.data.cv&&await this.flushCache(),y[t.token]=t.cv?t.cv:d.data.cv),l(d)}catch(h){if(h.response&&h.status===429&&(s=typeof s>"u"?0:s+1,s<this.maxRetries))return console.log(`Hit rate limit. Retrying in ${this.retriesDelay/1e3} seconds.`),await this.helpers.delay(this.retriesDelay),this.cacheResponse(e,t,s).then(l).catch(a);a(h)}})}throttledRequest(e,t,s,r){return this.client.setFetchOptions(r),this.client[e](t,s)}cacheVersions(){return y}cacheVersion(){return y[this.accessToken]}setCacheVersion(e){this.accessToken&&(y[this.accessToken]=e)}clearCacheVersion(){this.accessToken&&(y[this.accessToken]=0)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(w[e])},getAll(){return Promise.resolve(w)},set(e,t){return w[e]=t,Promise.resolve(void 0)},flush(){return w={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve()},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this.clearCacheVersion(),this}}const me=(o={})=>{const{apiOptions:e}=o;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new ge(e)}},ye=o=>{if(typeof o!="object"||typeof o._editable>"u")return{};try{const e=JSON.parse(o._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}:{}}catch{return{}}};let R,E="https://app.storyblok.com/f/storyblok-v2-latest.js";const I=(o,e,t={})=>{var s;const r=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",n=+new URL((s=window.location)==null?void 0:s.href).searchParams.get("_storyblok")===o;if(!(!r||!n)){if(!o){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],i=>{i.action==="input"&&i.story.id===o?e(i.story):(i.action==="change"||i.action==="published")&&i.storyId===o&&window.location.reload()})})}},be=(o={})=>{var e,t;const{bridge:s,accessToken:r,use:n=[],apiOptions:i={},richText:l={},bridgeUrl:a}=o;i.accessToken=i.accessToken||r;const u={bridge:s,apiOptions:i};let h={};n.forEach(m=>{h={...h,...m(u)}}),a&&(E=a);const d=!(typeof window>"u")&&((t=(e=window.location)==null?void 0:e.search)==null?void 0:t.includes("_storyblok_tk"));return s!==!1&&d&&M(E),R=new k(l.schema),l.resolver&&O(R,l.resolver),h},O=(o,e)=>{o.addNode("blok",t=>{let s="";return t.attrs.body.forEach(r=>{s+=e(r.component,r)}),{html:s}})},ke=o=>!o||!(o!=null&&o.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),ve=(o,e,t)=>{let s=t||R;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(o)?"":(e&&(s=new k(e.schema),e.resolver&&O(s,e.resolver)),s.render(o))},A=p.defineComponent({__name:"StoryblokComponent",props:{blok:{}},setup(o,{expose:e}){const t=o,s=p.ref();e({value:s});const r=typeof p.resolveDynamicComponent(t.blok.component)!="string",n=p.inject("VueSDKOptions"),i=p.ref(t.blok.component);return r||(n.enableFallbackComponent?(i.value=n.customFallbackComponent??"FallbackComponent",typeof p.resolveDynamicComponent(i.value)=="string"&&console.error(`Is the Fallback component "${i.value}" registered properly?`)):console.error(`Component could not be found for blok "${t.blok.component}"! Is it defined in main.ts as "app.component("${t.blok.component}", ${t.blok.component});"?`)),(l,a)=>(p.openBlock(),p.createBlock(p.resolveDynamicComponent(i.value),p.mergeProps({ref_key:"blokRef",ref:s},{...l.$props,...l.$attrs}),null,16))}}),_e={beforeMount(o,e){if(e.value){const t=ye(e.value);Object.keys(t).length>0&&(o.setAttribute("data-blok-c",t["data-blok-c"]),o.setAttribute("data-blok-uid",t["data-blok-uid"]),o.classList.add("storyblok__outline"))}}},N=o=>{console.error(`You can't use ${o} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
`)};let v=null;const we=()=>(v||N("useStoryblokApi"),v),$e=async(o,e={},t={})=>{const s=p.ref(null);if(t.resolveRelations=t.resolveRelations??e.resolve_relations,t.resolveLinks=t.resolveLinks??e.resolve_links,p.onMounted(()=>{s.value&&s.value.id&&I(s.value.id,r=>s.value=r,t)}),v){const{data:r}=await v.get(`cdn/stories/${o}`,e);s.value=r.story}else N("useStoryblok");return s},Re={install(o,e={}){o.directive("editable",_e),o.component("StoryblokComponent",A),e.enableFallbackComponent&&!e.customFallbackComponent&&o.component("FallbackComponent",p.defineAsyncComponent(()=>Promise.resolve().then(()=>je)));const{storyblokApi:t}=be(e);v=t,o.provide("VueSDKOptions",e)}},Te={class:"fallback-component"},Se={class:"component"},je=Object.freeze(Object.defineProperty({__proto__:null,default:((o,e)=>{const t=o.__vccOpts||o;for(const[s,r]of e)t[s]=r;return t})(p.defineComponent({__name:"FallbackComponent",props:{blok:{}},setup(o){return(e,t)=>(p.openBlock(),p.createElementBlock("div",Te,[p.createElementVNode("p",null,[p.createTextVNode(" Component could not be found for blok "),p.createElementVNode("span",Se,p.toDisplayString(e.blok.component),1),p.createTextVNode("! Is it configured correctly? ")])]))}}),[["__scopeId","data-v-93c770c0"]])},Symbol.toStringTag,{value:"Module"}));f.RichTextResolver=k,f.RichTextSchema=P,f.StoryblokComponent=A,f.StoryblokVue=Re,f.apiPlugin=me,f.renderRichText=ve,f.useStoryblok=$e,f.useStoryblokApi=we,f.useStoryblokBridge=I,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
}`),""}optimizeImages(e,t){let r=0,o=0,n="",i="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(n+=`width="${t.width}" `,r=t.width),typeof t.height=="number"&&t.height>0&&(n+=`height="${t.height}" `,o=t.height),(t.loading==="lazy"||t.loading==="eager")&&(n+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(n+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(i+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(i+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(i+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(i+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(i+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(i+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(i+=`:rotate(${t.filters.rotate})`),i.length>0&&(i="/filters"+i))),n.length>0&&(e=e.replace(/<img/g,`<img ${n.trim()}`));const l=r>0||o>0||i.length>0?`${r}x${o}${i}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${l}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,a=>{var u,p;const h=a.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(h&&h.length>0){const b={srcset:(u=t.srcset)==null?void 0:u.map(k=>{if(typeof k=="number")return`//${h}/m/${k}x0${i} ${k}w`;if(typeof k=="object"&&k.length===2){let S=0,A=0;return typeof k[0]=="number"&&(S=k[0]),typeof k[1]=="number"&&(A=k[1]),`//${h}/m/${S}x${A}${i} ${S}w`}}).join(", "),sizes:(p=t.sizes)==null?void 0:p.map(k=>k).join(", ")};let _="";return b.srcset&&(_+=`srcset="${b.srcset}" `),b.sizes&&(_+=`sizes="${b.sizes}" `),a.replace(/<img/g,`<img ${_.trim()}`)}return a})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(o=>{const n=this.getMatchingMark(o);n&&n.tag!==""&&t.push(this.renderOpeningTag(n.tag))});const r=this.getMatchingNode(e);return r&&r.tag&&t.push(this.renderOpeningTag(r.tag)),e.content?e.content.forEach(o=>{t.push(this.renderNode(o))}):e.text?t.push(Ce(e.text)):r&&r.singleTag?t.push(this.renderTag(r.singleTag," /")):r&&r.html?t.push(r.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),r&&r.tag&&t.push(this.renderClosingTag(r.tag)),e.marks&&e.marks.slice(0).reverse().forEach(o=>{const n=this.getMatchingMark(o);n&&n.tag!==""&&t.push(this.renderClosingTag(n.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(r=>{if(r.constructor===String)return`<${r}${t}>`;{let o=`<${r.tag}`;if(r.attrs){for(const n in r.attrs)if(Object.prototype.hasOwnProperty.call(r.attrs,n)){const i=r.attrs[n];i!==null&&(o+=` ${n}="${i}"`)}}return`${o}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}const C=Ie;class je{constructor(e){d(this,"baseURL"),d(this,"timeout"),d(this,"headers"),d(this,"responseInterceptor"),d(this,"fetch"),d(this,"ejectInterceptor"),d(this,"url"),d(this,"parameters"),d(this,"fetchOptions"),this.baseURL=e.baseURL,this.headers=e.headers||new Headers,this.timeout=e!=null&&e.timeout?e.timeout*1e3:0,this.responseInterceptor=e.responseInterceptor,this.fetch=(...t)=>e.fetch?e.fetch(...t):fetch(...t),this.ejectInterceptor=!1,this.url="",this.parameters={},this.fetchOptions={}}get(e,t){return this.url=e,this.parameters=t,this._methodHandler("get")}post(e,t){return this.url=e,this.parameters=t,this._methodHandler("post")}put(e,t){return this.url=e,this.parameters=t,this._methodHandler("put")}delete(e,t){return this.url=e,this.parameters=t,this._methodHandler("delete")}async _responseHandler(e){const t=[],r={data:{},headers:{},status:0,statusText:""};e.status!==204&&await e.json().then(o=>{r.data=o});for(const o of e.headers.entries())t[o[0]]=o[1];return r.headers={...t},r.status=e.status,r.statusText=e.statusText,r}async _methodHandler(e){let t=`${this.baseURL}${this.url}`,r=null;if(e==="get"){const a=new O;t=`${this.baseURL}${this.url}?${a.stringify(this.parameters)}`}else r=JSON.stringify(this.parameters);const o=new URL(t),n=new AbortController,{signal:i}=n;let l;this.timeout&&(l=setTimeout(()=>n.abort(),this.timeout));try{const a=await this.fetch(`${o}`,{method:e,headers:this.headers,body:r,signal:i,...this.fetchOptions});this.timeout&&clearTimeout(l);const u=await this._responseHandler(a);return this.responseInterceptor&&!this.ejectInterceptor?this._statusHandler(this.responseInterceptor(u)):this._statusHandler(u)}catch(a){return{message:a}}}setFetchOptions(e={}){Object.keys(e).length>0&&"method"in e&&delete e.method,this.fetchOptions={...e}}eject(){this.ejectInterceptor=!0}_statusHandler(e){const t=/20[0-6]/g;return new Promise((r,o)=>{if(t.test(`${e.status}`))return r(e);const n={message:e.statusText,status:e.status,response:Array.isArray(e.data)?e.data[0]:e.data.error||e.data.slug};o(n)})}}const Oe=je,V="SB-Agent",P={defaultAgentName:"SB-JS-CLIENT",defaultAgentVersion:"SB-Agent-Version",packageVersion:"6.0.0"};let x={};const E={};class xe{constructor(e,t){d(this,"client"),d(this,"maxRetries"),d(this,"retriesDelay"),d(this,"throttle"),d(this,"accessToken"),d(this,"cache"),d(this,"helpers"),d(this,"resolveCounter"),d(this,"relations"),d(this,"links"),d(this,"richTextResolver"),d(this,"resolveNestedRelations"),d(this,"stringifiedStoriesCache");let r=e.endpoint||t;if(!r){const i=new O().getRegionURL,l=e.https===!1?"http":"https";e.oauthToken?r=`${l}://${i(e.region)}/v1`:r=`${l}://${i(e.region)}/v2`}const o=new Headers;o.set("Content-Type","application/json"),o.set("Accept","application/json"),e.headers&&e.headers.entries().toArray().forEach(([i,l])=>{o.set(i,l)}),o.has(V)||(o.set(V,P.defaultAgentName),o.set(P.defaultAgentVersion,P.packageVersion));let n=5;e.oauthToken&&(o.set("Authorization",e.oauthToken),n=3),e.rateLimit&&(n=e.rateLimit),e.richTextSchema?this.richTextResolver=new C(e.richTextSchema):this.richTextResolver=new C,e.componentResolver&&this.setComponentResolver(e.componentResolver),this.maxRetries=e.maxRetries||10,this.retriesDelay=300,this.throttle=te(this.throttledRequest,n,1e3),this.accessToken=e.accessToken||"",this.relations={},this.links={},this.cache=e.cache||{clear:"manual"},this.helpers=new O,this.resolveCounter=0,this.resolveNestedRelations=e.resolveNestedRelations||!0,this.stringifiedStoriesCache={},this.client=new Oe({baseURL:r,timeout:e.timeout||0,headers:o,responseInterceptor:e.responseInterceptor,fetch:e.fetch})}setComponentResolver(e){this.richTextResolver.addNode("blok",t=>{let r="";return t.attrs.body&&t.attrs.body.forEach(o=>{r+=e(o.component,o)}),{html:r}})}parseParams(e){return e.token||(e.token=this.getToken()),e.cv||(e.cv=E[e.token]),Array.isArray(e.resolve_relations)&&(e.resolve_relations=e.resolve_relations.join(",")),typeof e.resolve_relations<"u"&&(e.resolve_level=2),e}factoryParamOptions(e,t){return this.helpers.isCDNUrl(e)?this.parseParams(t):t}makeRequest(e,t,r,o,n){const i=this.factoryParamOptions(e,this.helpers.getOptionsPage(t,r,o));return this.cacheResponse(e,i,void 0,n)}get(e,t,r){t||(t={});const o=`/${e}`,n=this.factoryParamOptions(o,t);return this.cacheResponse(o,n,void 0,r)}async getAll(e,t,r,o){const n=(t==null?void 0:t.per_page)||25,i=`/${e}`,l=i.split("/"),a=r||l[l.length-1],u=1,p=await this.makeRequest(i,t,n,u,o),h=p.total?Math.ceil(p.total/n):1,b=await this.helpers.asyncMap(this.helpers.range(u,h),_=>this.makeRequest(i,t,n,_+1,o));return this.helpers.flatMap([p,...b],_=>Object.values(_.data[a]))}post(e,t,r){const o=`/${e}`;return Promise.resolve(this.throttle("post",o,t,r))}put(e,t,r){const o=`/${e}`;return Promise.resolve(this.throttle("put",o,t,r))}delete(e,t,r){const o=`/${e}`;return Promise.resolve(this.throttle("delete",o,t,r))}getStories(e,t){return this._addResolveLevel(e),this.get("cdn/stories",e,t)}getStory(e,t,r){return this._addResolveLevel(t),this.get(`cdn/stories/${e}`,t,r)}getToken(){return this.accessToken}ejectInterceptor(){this.client.eject()}_addResolveLevel(e){typeof e.resolve_relations<"u"&&(e.resolve_level=2)}_cleanCopy(e){return JSON.parse(JSON.stringify(e))}_insertLinks(e,t,r){const o=e[t];o&&o.fieldtype=="multilink"&&o.linktype=="story"&&typeof o.id=="string"&&this.links[r][o.id]?o.story=this._cleanCopy(this.links[r][o.id]):o&&o.linktype==="story"&&typeof o.uuid=="string"&&this.links[r][o.uuid]&&(o.story=this._cleanCopy(this.links[r][o.uuid]))}getStoryReference(e,t){return this.relations[e][t]?(this.stringifiedStoriesCache[t]||(this.stringifiedStoriesCache[t]=JSON.stringify(this.relations[e][t])),JSON.parse(this.stringifiedStoriesCache[t])):t}_insertRelations(e,t,r,o){r.indexOf(`${e.component}.${t}`)>-1&&(typeof e[t]=="string"?e[t]=this.getStoryReference(o,e[t]):Array.isArray(e[t])&&(e[t]=e[t].map(n=>this.getStoryReference(o,n)).filter(Boolean)))}iterateTree(e,t,r){const o=n=>{if(n!=null){if(n.constructor===Array)for(let i=0;i<n.length;i++)o(n[i]);else if(n.constructor===Object){if(n._stopResolving)return;for(const i in n)(n.component&&n._uid||n.type==="link")&&(this._insertRelations(n,i,t,r),this._insertLinks(n,i,r)),o(n[i])}}};o(e.content)}async resolveLinks(e,t,r){let o=[];if(e.link_uuids){const n=e.link_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const u=Math.min(n,a+l);i.push(e.link_uuids.slice(a,u))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(",")})).data.stories.forEach(u=>{o.push(u)})}else o=e.links;o.forEach(n=>{this.links[r][n.uuid]={...n,_stopResolving:!0}})}async resolveRelations(e,t,r){let o=[];if(e.rel_uuids){const n=e.rel_uuids.length,i=[],l=50;for(let a=0;a<n;a+=l){const u=Math.min(n,a+l);i.push(e.rel_uuids.slice(a,u))}for(let a=0;a<i.length;a++)(await this.getStories({per_page:l,language:t.language,version:t.version,by_uuids:i[a].join(","),excluding_fields:t.excluding_fields})).data.stories.forEach(u=>{o.push(u)})}else o=e.rels;o&&o.length>0&&o.forEach(n=>{this.relations[r][n.uuid]={...n,_stopResolving:!0}})}async resolveStories(e,t,r){var o,n;let i=[];if(this.links[r]={},this.relations[r]={},typeof t.resolve_relations<"u"&&t.resolve_relations.length>0&&(typeof t.resolve_relations=="string"&&(i=t.resolve_relations.split(",")),await this.resolveRelations(e,t,r)),t.resolve_links&&["1","story","url","link"].indexOf(t.resolve_links)>-1&&((o=e.links)!=null&&o.length||(n=e.link_uuids)!=null&&n.length)&&await this.resolveLinks(e,t,r),this.resolveNestedRelations)for(const l in this.relations[r])this.iterateTree(this.relations[r][l],i,r);e.story?this.iterateTree(e.story,i,r):e.stories.forEach(l=>{this.iterateTree(l,i,r)}),this.stringifiedStoriesCache={},delete this.links[r],delete this.relations[r]}async cacheResponse(e,t,r,o){const n=this.helpers.stringify({url:e,params:t}),i=this.cacheProvider();if(this.cache.clear==="auto"&&t.version==="draft"&&await this.flushCache(),t.version==="published"&&e!="/cdn/spaces/me"){const l=await i.get(n);if(l)return Promise.resolve(l)}return new Promise(async(l,a)=>{var u;try{const p=await this.throttle("get",e,t,o);if(p.status!==200)return a(p);let h={data:p.data,headers:p.headers};if((u=p.headers)!=null&&u["per-page"]&&(h=Object.assign({},h,{perPage:p.headers["per-page"]?parseInt(p.headers["per-page"]):0,total:p.headers["per-page"]?parseInt(p.headers.total):0})),h.data.story||h.data.stories){const b=this.resolveCounter=++this.resolveCounter%1e3;await this.resolveStories(h.data,t,`${b}`)}return t.version==="published"&&e!="/cdn/spaces/me"&&await i.set(n,h),h.data.cv&&t.token&&(t.version==="draft"&&E[t.token]!=h.data.cv&&await this.flushCache(),E[t.token]=t.cv?t.cv:h.data.cv),l(h)}catch(p){if(p.response&&p.status===429&&(r=typeof r>"u"?0:r+1,r<this.maxRetries))return console.log(`Hit rate limit. Retrying in ${this.retriesDelay/1e3} seconds.`),await this.helpers.delay(this.retriesDelay),this.cacheResponse(e,t,r).then(l).catch(a);a(p)}})}throttledRequest(e,t,r,o){return this.client.setFetchOptions(o),this.client[e](t,r)}cacheVersions(){return E}cacheVersion(){return E[this.accessToken]}setCacheVersion(e){this.accessToken&&(E[this.accessToken]=e)}clearCacheVersion(){this.accessToken&&(E[this.accessToken]=0)}cacheProvider(){switch(this.cache.type){case"memory":return{get(e){return Promise.resolve(x[e])},getAll(){return Promise.resolve(x)},set(e,t){return x[e]=t,Promise.resolve(void 0)},flush(){return x={},Promise.resolve(void 0)}};case"custom":if(this.cache.custom)return this.cache.custom;default:return{get(){return Promise.resolve()},getAll(){return Promise.resolve(void 0)},set(){return Promise.resolve(void 0)},flush(){return Promise.resolve(void 0)}}}}async flushCache(){return await this.cacheProvider().flush(),this.clearCacheVersion(),this}}const Ae=(s={})=>{const{apiOptions:e}=s;if(!e.accessToken){console.error("You need to provide an access token to interact with Storyblok API. Read https://www.storyblok.com/docs/api/content-delivery#topics/authentication");return}return{storyblokApi:new xe(e)}},Pe=s=>{if(typeof s!="object"||typeof s._editable>"u")return{};try{const e=JSON.parse(s._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return e?{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}:{}}catch{return{}}};var v=(s=>(s.DOCUMENT="doc",s.HEADING="heading",s.PARAGRAPH="paragraph",s.QUOTE="blockquote",s.OL_LIST="ordered_list",s.UL_LIST="bullet_list",s.LIST_ITEM="list_item",s.CODE_BLOCK="code_block",s.HR="horizontal_rule",s.BR="hard_break",s.IMAGE="image",s.EMOJI="emoji",s.COMPONENT="blok",s))(v||{}),T=(s=>(s.BOLD="bold",s.STRONG="strong",s.STRIKE="strike",s.UNDERLINE="underline",s.ITALIC="italic",s.CODE="code",s.LINK="link",s.ANCHOR="anchor",s.STYLED="styled",s.SUPERSCRIPT="superscript",s.SUBSCRIPT="subscript",s.TEXT_STYLE="textStyle",s.HIGHLIGHT="highlight",s))(T||{}),L=(s=>(s.TEXT="text",s))(L||{}),I=(s=>(s.URL="url",s.STORY="story",s.ASSET="asset",s.EMAIL="email",s))(I||{});function Le(s,e){if(!e)return{src:s,attrs:{}};let t=0,r=0;const o={},n=[];function i(a,u,p,h,b){typeof a!="number"||a<=u||a>=p?console.warn(`[StoryblokRichText] - ${h.charAt(0).toUpperCase()+h.slice(1)} value must be a number between ${u} and ${p} (inclusive)`):b.push(`${h}(${a})`)}if(typeof e=="object"){if(typeof e.width=="number"&&e.width>0?(o.width=e.width,t=e.width):console.warn("[StoryblokRichText] - Width value must be a number greater than 0"),e.height&&typeof e.height=="number"&&e.height>0?(o.height=e.height,r=e.height):console.warn("[StoryblokRichText] - Height value must be a number greater than 0"),e.loading&&["lazy","eager"].includes(e.loading)&&(o.loading=e.loading),e.class&&(o.class=e.class),e.filters){const{filters:a}=e||{},{blur:u,brightness:p,fill:h,format:b,grayscale:_,quality:k,rotate:S}=a||{};u&&i(u,0,100,"blur",n),k&&i(k,0,100,"quality",n),p&&i(p,0,100,"brightness",n),h&&n.push(`fill(${h})`),_&&n.push("grayscale()"),S&&[0,90,180,270].includes(e.filters.rotate||0)&&n.push(`rotate(${S})`),b&&["webp","png","jpeg"].includes(b)&&n.push(`format(${b})`)}e.srcset&&(o.srcset=e.srcset.map(a=>{if(typeof a=="number")return`${s}/m/${a}x0/${n.length>0?"filters:"+n.join(":"):""} ${a}w`;if(Array.isArray(a)&&a.length===2){const[u,p]=a;return`${s}/m/${u}x${p}/${n.length>0?"filters:"+n.join(":"):""} ${u}w`}}).join(", ")),e.sizes&&(o.sizes=e.sizes.join(", "))}let l=`${s}/m/`;return t>0&&r>0&&(l=`${l}${t}x${r}/`),n.length>0&&(l=`${l}filters:${n.join(":")}`),{src:l,attrs:o}}const Ne=(s={})=>Object.keys(s).map(e=>`${e}="${s[e]}"`).join(" "),Me=(s={})=>Object.keys(s).map(e=>`${e}: ${s[e]}`).join("; ");function Ue(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function De(s,e={},t){const r=Ne(e);return`<${r?`${s} ${r}`:s}>${Array.isArray(t)?t.join(""):t||""}</${s}>`}function F(s={}){let e=0;const{renderFn:t=De,textFn:r=Ue,resolvers:o={},optimizeImages:n=!1}=s,i=c=>f=>t(c,{...f.attrs,key:`${c}-${e}`},f.children||null),l=c=>{const{src:f,alt:y,...$}=c.attrs||{};let R=f,w={};if(n){const{src:Qe,attrs:Ze}=Le(f,n);R=Qe,w=Ze}const We={src:R,alt:y||"",key:`img-${e}`,...$,...w};return t("img",We,"")},a=c=>{const{level:f,...y}=c.attrs||{};return t(`h${f}`,{...y,key:`h${f}-${e}`},c.children)},u=c=>{var f,y,$,R;return t("span",{"data-type":"emoji","data-name":(f=c.attrs)==null?void 0:f.name,emoji:(y=c.attrs)==null?void 0:y.emoji,key:`emoji-${e}`},t("img",{src:($=c.attrs)==null?void 0:$.fallbackImage,alt:(R=c.attrs)==null?void 0:R.alt,style:"width: 1.25em; height: 1.25em; vertical-align: text-top",draggable:"false",loading:"lazy"},""))},p=c=>t("pre",{...c.attrs,key:`code-${e}`},t("code",{key:`code-${e}`},c.children||"")),h=(c,f=!1)=>({text:y,attrs:$})=>t(c,f?{style:Me($),key:`${c}-${e}`}:{...$,key:`${c}-${e}`},y),b=c=>U(c),_=c=>{const{marks:f,...y}=c;return"text"in c?f?f.reduce(($,R)=>b({...R,text:$}),b({...y,children:y.children})):r(y.text):""},k=c=>{const{linktype:f,href:y,anchor:$,...R}=c.attrs||{};let w="";switch(f){case I.ASSET:case I.URL:w=y;break;case I.EMAIL:w=`mailto:${y}`;break;case I.STORY:w=y;break}return $&&(w=`${w}#${$}`),t("a",{...R,href:w,key:`a-${e}`},c.text)},S=c=>{var f,y;return console.warn("[StoryblokRichtText] - BLOK resolver is not available for vanilla usage"),t("span",{blok:(f=c==null?void 0:c.attrs)==null?void 0:f.body[0],id:(y=c.attrs)==null?void 0:y.id,key:`component-${e}`,style:"display: none"},"")},A=new Map([[v.DOCUMENT,i("div")],[v.HEADING,a],[v.PARAGRAPH,i("p")],[v.UL_LIST,i("ul")],[v.OL_LIST,i("ol")],[v.LIST_ITEM,i("li")],[v.IMAGE,l],[v.EMOJI,u],[v.CODE_BLOCK,p],[v.HR,i("hr")],[v.BR,i("br")],[v.QUOTE,i("blockquote")],[v.COMPONENT,S],[L.TEXT,_],[T.LINK,k],[T.ANCHOR,k],[T.STYLED,h("span",!0)],[T.BOLD,h("strong")],[T.TEXT_STYLE,h("span",!0)],[T.ITALIC,h("em")],[T.UNDERLINE,h("u")],[T.STRIKE,h("s")],[T.CODE,h("code")],[T.SUPERSCRIPT,h("sup")],[T.SUBSCRIPT,h("sub")],[T.HIGHLIGHT,h("mark")],...Object.entries(o).map(([c,f])=>[c,f])]);function W(c){e+=1;const f=A.get(c.type);if(!f)return console.error("<Storyblok>",`No resolver found for node type ${c.type}`),"";if(c.type==="text")return f(c);const y=c.content?c.content.map(U):void 0;return f({...c,children:y})}function U(c){return Array.isArray(c)?c.map(W):W(c)}return{render:U}}let N,q="https://app.storyblok.com/f/storyblok-v2-latest.js";const G=(s,e,t={})=>{var r;const o=!(typeof window>"u")&&typeof window.storyblokRegisterEvent<"u",n=+new URL((r=window.location)==null?void 0:r.href).searchParams.get("_storyblok")===s;if(!(!o||!n)){if(!s){console.warn("Story ID is not defined. Please provide a valid ID.");return}window.storyblokRegisterEvent(()=>{new window.StoryblokBridge(t).on(["input","published","change"],i=>{i.action==="input"&&i.story.id===s?e(i.story):(i.action==="change"||i.action==="published")&&i.storyId===s&&window.location.reload()})})}},He=(s={})=>{var e,t;const{bridge:r,accessToken:o,use:n=[],apiOptions:i={},richText:l={},bridgeUrl:a}=s;i.accessToken=i.accessToken||o;const u={bridge:r,apiOptions:i};let p={};n.forEach(b=>{p={...p,...b(u)}}),a&&(q=a);const h=!(typeof window>"u")&&((t=(e=window.location)==null?void 0:e.search)==null?void 0:t.includes("_storyblok_tk"));return r!==!1&&h&&Q(q),N=new C(l.schema),l.resolver&&K(N,l.resolver),p},K=(s,e)=>{s.addNode("blok",t=>{let r="";return t.attrs.body.forEach(o=>{r+=e(o.component,o)}),{html:r}})},ze=s=>!s||!(s!=null&&s.content.some(e=>e.content||e.type==="blok"||e.type==="horizontal_rule")),Be=(s,e,t)=>{let r=t||N;if(!r){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ze(s)?"":(e&&(r=new C(e.schema),e.resolver&&K(r,e.resolver)),r.render(s))},M=g.defineComponent({__name:"StoryblokComponent",props:{blok:{}},setup(s,{expose:e}){const t=s,r=g.ref();e({value:r});const o=typeof g.resolveDynamicComponent(t.blok.component)!="string",n=g.inject("VueSDKOptions"),i=g.ref(t.blok.component);return o||(n.enableFallbackComponent?(i.value=n.customFallbackComponent??"FallbackComponent",typeof g.resolveDynamicComponent(i.value)=="string"&&console.error(`Is the Fallback component "${i.value}" registered properly?`)):console.error(`Component could not be found for blok "${t.blok.component}"! Is it defined in main.ts as "app.component("${t.blok.component}", ${t.blok.component});"?`)),(l,a)=>(g.openBlock(),g.createBlock(g.resolveDynamicComponent(i.value),g.mergeProps({ref_key:"blokRef",ref:r},{...l.$props,...l.$attrs}),null,16))}}),Ve=s=>{var e,t;return g.h(M,{blok:(e=s==null?void 0:s.attrs)==null?void 0:e.body[0],id:(t=s.attrs)==null?void 0:t.id},s.children)};function J(s){const e={renderFn:g.h,textFn:g.createTextVNode,resolvers:{[v.COMPONENT]:Ve,...s.resolvers}};return F(e)}const Y=g.defineComponent({__name:"StoryblokRichText",props:{doc:{},resolvers:{}},setup(s){const e=s,{render:t}=J({resolvers:e.resolvers??{}}),r=()=>t(e.doc);return(o,n)=>(g.openBlock(),g.createBlock(r))}}),Fe={beforeMount(s,e){if(e.value){const t=Pe(e.value);Object.keys(t).length>0&&(s.setAttribute("data-blok-c",t["data-blok-c"]),s.setAttribute("data-blok-uid",t["data-blok-uid"]),s.classList.add("storyblok__outline"))}}},X=s=>{console.error(`You can't use ${s} if you're not loading apiPlugin. Please provide it on StoryblokVue initialization.
`)};let j=null;const qe=()=>(j||X("useStoryblokApi"),j),Ge=async(s,e={},t={})=>{const r=g.ref(null);if(t.resolveRelations=t.resolveRelations??e.resolve_relations,t.resolveLinks=t.resolveLinks??e.resolve_links,g.onMounted(()=>{r.value&&r.value.id&&G(r.value.id,o=>r.value=o,t)}),j){const{data:o}=await j.get(`cdn/stories/${s}`,e);r.value=o.story}else X("useStoryblok");return r},Ke={install(s,e={}){s.directive("editable",Fe),s.component("StoryblokComponent",M),s.component("StoryblokRichText",Y),e.enableFallbackComponent&&!e.customFallbackComponent&&s.component("FallbackComponent",g.defineAsyncComponent(()=>Promise.resolve().then(()=>Xe)));const{storyblokApi:t}=He(e);j=t,s.provide("VueSDKOptions",e)}},Je={class:"fallback-component"},Ye={class:"component"},Xe=Object.freeze(Object.defineProperty({__proto__:null,default:((s,e)=>{const t=s.__vccOpts||s;for(const[r,o]of e)t[r]=o;return t})(g.defineComponent({__name:"FallbackComponent",props:{blok:{}},setup(s){return(e,t)=>(g.openBlock(),g.createElementBlock("div",Je,[g.createElementVNode("p",null,[g.createTextVNode(" Component could not be found for blok "),g.createElementVNode("span",Ye,g.toDisplayString(e.blok.component),1),g.createTextVNode("! Is it configured correctly? ")])]))}}),[["__scopeId","data-v-93c770c0"]])},Symbol.toStringTag,{value:"Module"}));m.BlockTypes=v,m.MarkTypes=T,m.RichTextResolver=C,m.RichTextSchema=B,m.StoryblokComponent=M,m.StoryblokRichText=Y,m.StoryblokVue=Ke,m.TextTypes=L,m.apiPlugin=Ae,m.renderRichText=Be,m.richTextResolver=F,m.useStoryblok=Ge,m.useStoryblokApi=qe,m.useStoryblokBridge=G,m.useStoryblokRichText=J,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

5

dist/StoryblokComponent.vue.d.ts

@@ -1,5 +0,2 @@

import type { SbBlokData } from "./types";
export interface SbComponentProps {
blok: SbBlokData;
}
import type { SbComponentProps } from "./types";
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<SbComponentProps>, {

@@ -6,0 +3,0 @@ value: import("vue").Ref<any>;

23

dist/types.d.ts

@@ -0,2 +1,5 @@

import type { SbBlokData, SbSDKOptions } from "@storyblok/js";
import type StoryblokComponent from "./StoryblokComponent.vue";
import type { StoryblokRichTextDocumentNode, StoryblokRichTextResolvers } from "@storyblok/js";
import type { VNode } from "vue";
declare module "@vue/runtime-core" {

@@ -7,3 +10,19 @@ interface GlobalComponents {

}
export type { ISbConfig, ISbCache, ISbResult, ISbResponse, ISbError, ISbNode, ISbSchema, ThrottleFn, AsyncFn, ArrayFn, ISbContentMangmntAPI, ISbManagmentApiResult, ISbStories, ISbStory, ISbDimensions, StoryblokComponentType, ISbStoryData, ISbAlternateObject, ISbStoriesParams, ISbStoryParams, ISbRichtext, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, } from "@storyblok/js";
export type { SbVueSDKOptions } from "./index";
export type { ISbConfig, ISbCache, ISbResult, ISbResponse, ISbError, ISbNode, ISbSchema, ThrottleFn, AsyncFn, ArrayFn, ISbContentMangmntAPI, ISbManagmentApiResult, ISbStories, ISbStory, ISbDimensions, StoryblokComponentType, ISbStoryData, ISbAlternateObject, ISbStoriesParams, ISbStoryParams, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokRichTextDocumentNode, StoryblokRichTextNodeTypes, StoryblokRichTextNode, StoryblokRichTextResolvers, StoryblokRichTextNodeResolver, StoryblokRichTextImageOptimizationOptions, } from "@storyblok/js";
export interface SbVueSDKOptions extends SbSDKOptions {
/**
* Show a fallback component in your frontend if a component is not registered properly.
*/
enableFallbackComponent?: boolean;
/**
* Provide a custom fallback component, e.g. "CustomFallback".
*/
customFallbackComponent?: string;
}
export interface SbComponentProps {
blok: SbBlokData;
}
export interface StoryblokRichTextProps {
doc: StoryblokRichTextDocumentNode;
resolvers?: StoryblokRichTextResolvers<VNode>;
}

4

package.json
{
"name": "@storyblok/vue",
"version": "8.0.9",
"version": "8.1.0",
"description": "Storyblok directive for get editable elements.",

@@ -28,3 +28,3 @@ "main": "./dist/storyblok-vue.js",

"dependencies": {
"@storyblok/js": "^3.0.9"
"@storyblok/js": "^3.1.0"
},

@@ -31,0 +31,0 @@ "devDependencies": {

94

README.md

@@ -37,5 +37,7 @@ <div align="center">

## Kickstart a new project
Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Vue](https://www.storyblok.com/technologies#vue?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)**, and get started in just a few minutes!
## 5-minute Tutorial
Are you looking for a hands-on, step-by-step tutorial? The **[Vue 5-minute Tutorial](https://www.storyblok.com/tp/add-a-headless-CMS-to-vuejs-in-5-minutes?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)** has you covered! It provides comprehensive instructions on how to set up a Storyblok space and connect it to your Vue project.

@@ -132,2 +134,94 @@

You can render rich-text fields by using the `StoryblokRichtext` component:
```html
<script setup>
import { StoryblokRichtext } from "@storyblok/vue";
</script>
<template>
<StoryblokRichtext :doc="blok.articleContent" />
</template>
```
#### Overriding the default resolvers
You can override the default resolvers by passing a `resolver` prop to the `StoryblokRichText` component, for example, to use vue-router links or add a custom codeblok component: :
```html
<script setup>
import { type VNode, h } from "vue";
import { StoryblokRichText, BlockTypes, MarkTypes, type StoryblokRichTextNode } from "@storyblok/vue";
import { RouterLink } from "vue-router";
import CodeBlok from "./components/CodeBlok.vue";
const resolvers = {
// RouterLink example:
[MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
return node.attrs?.linktype === 'STORY'
? h(RouterLink, {
to: node.attrs?.href,
target: node.attrs?.target,
}, node.text)
: h('a', {
href: node.attrs?.href,
target: node.attrs?.target,
}, node.text)
},
// Custom code block component example:
[BlockTypes.CODE_BLOCK]: (node: Node) => {
return h(CodeBlock, {
class: node?.attrs?.class,
}, node.children)
},
}
</script>
<template>
<StoryblokRichText :doc="blok.articleContent" :resolvers="resolvers" />
</template>
```
Or you can have more control by using the `useStoryblokRichText` composable:
```html
<script setup>
import { type VNode, h } from "vue";
import { useStoryblokRichText, BlockTypes, MarkTypes, type StoryblokRichTextNode } from "@storyblok/vue";
import { RouterLink } from "vue-router";
const resolvers = {
// RouterLink example:
[MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
return node.attrs?.linktype === 'STORY'
? h(RouterLink, {
to: node.attrs?.href,
target: node.attrs?.target,
}, node.text)
: h('a', {
href: node.attrs?.href,
target: node.attrs?.target,
}, node.text)
},
}
const { render } = useStoryblokRichText({
resolvers,
})
const html = render(blok.articleContent);
</script>
<template>
<div v-html="html"></div>
</template>
```
For more incredible options you can pass to the `useStoryblokRichtext, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation.
### Legacy Rich Text Resolver
> [!WARNING]
> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new `useRichText` composable described above instead.
You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/vue` and a Vue computed property:

@@ -134,0 +228,0 @@ 

dist/storyblok-vue.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc