@storyblok/vue 8.1.6 → 8.1.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Storyblok GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -128,161 +128,6 @@ The simplest way is by using the `useStoryblok` one-liner composable. Where you
 
 Check the available [apiOptions](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/stories/retrieve-one-story?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) in our API docs and [bridgeOptions](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) passed to the Storyblok Bridge.
 
-### Rendering Rich Text
-
-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:
-
-```html
-<template>
-  <div v-html="articleContent"></div>
-</template>
-
-<script setup>
-  import { computed } from "vue";
-  import { renderRichText } from "@storyblok/vue";
-
-  const articleContent = computed(() => renderRichText(blok.articleContent));
-</script>
-```
-
-You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:
-
-```js
-import { RichTextSchema, StoryblokVue } from "@storyblok/vue";
-import cloneDeep from "clone-deep";
-
-const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
-// ... and edit the nodes and marks, or add your own.
-// Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/master/source/schema.js
-
-app.use(StoryblokVue, {
-  accessToken: "YOUR_ACCESS_TOKEN",
-  use: [apiPlugin],
-  richText: {
-    schema: mySchema,
-    resolver: (component, blok) => {
-      switch (component) {
-        case "my-custom-component":
-          return `<div class="my-component-class">${blok.text}</div>`;
-        default:
-          return "Resolver not defined";
-      }
-    },
-  },
-});
-```
-
-You can also set a **custom Schema and component resolver only once** by passing the options as the second parameter to `renderRichText` function:
-
-```js
-import { renderRichText } from "@storyblok/vue";
-
-renderRichText(blok.richTextField, {
-  schema: mySchema,
-  resolver: (component, blok) => {
-    switch (component) {
-      case "my-custom-component":
-        return `<div class="my-component-class">${blok.text}</div>`;
-        break;
-      default:
-        return `Component ${component} not found`;
-    }
-  },
-});
-```
-
 ### Long Form
 
 #### 1. Fetching Content
@@ -495,6 +340,177 @@ app.use(StoryblokVue, {
 app.component("MyCustomFallback", MyCustomFallback);
 ```
 
+## Rendering Rich Text
+
+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>
+```
+
+Or you can have more control by using the `useStoryblokRichText` composable:
+
+```html
+<script setup>
+  import { useStoryblokRichText } from "@storyblok/vue";
+  const { render } = useStoryblokRichText({
+    // options like resolvers
+  });
+
+  const root = () => render(blok.articleContent);
+</script>
+
+<template>
+  <root />
+</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.
+
+### 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>
+```
+
+If you want to use the `useStoryblokRichText` composable, you can pass the `resolvers` via the options object:
+
+```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 root = () => render(blok.articleContent);
+</script>
+
+<template>
+  <root />
+</template>
+```
+
+### Legacy Rich Text Resolver
+
+> [!WARNING]  
+> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new approach described above instead.
+
+You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/vue` and a Vue computed property:
+
+```html
+<template>
+  <div v-html="articleContent"></div>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { renderRichText } from "@storyblok/vue";
+
+  const articleContent = computed(() => renderRichText(blok.articleContent));
+</script>
+```
+
+You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:
+
+```js
+import { RichTextSchema, StoryblokVue } from "@storyblok/vue";
+import cloneDeep from "clone-deep";
+
+const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
+// ... and edit the nodes and marks, or add your own.
+// Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/master/source/schema.js
+
+app.use(StoryblokVue, {
+  accessToken: "YOUR_ACCESS_TOKEN",
+  use: [apiPlugin],
+  richText: {
+    schema: mySchema,
+    resolver: (component, blok) => {
+      switch (component) {
+        case "my-custom-component":
+          return `<div class="my-component-class">${blok.text}</div>`;
+        default:
+          return "Resolver not defined";
+      }
+    },
+  },
+});
+```
+
+You can also set a **custom Schema and component resolver only once** by passing the options as the second parameter to `renderRichText` function:
+
+```js
+import { renderRichText } from "@storyblok/vue";
+
+renderRichText(blok.richTextField, {
+  schema: mySchema,
+  resolver: (component, blok) => {
+    switch (component) {
+      case "my-custom-component":
+        return `<div class="my-component-class">${blok.text}</div>`;
+        break;
+      default:
+        return `Component ${component} not found`;
+    }
+  },
+});
+```
+
 ## Compatibility
 
 This plugin is for Vue 3. Thus, it supports the [same browsers as Vue 3](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). In short: all modern browsers, dropping IE support.

package/dist/{FallbackComponent-C2j8Ky5h.mjs → FallbackComponent-U_HRL08c.js}

@@ -1,14 +1,20 @@
-import { defineComponent as r, openBlock as p, createElementBlock as a, createElementVNode as n, createTextVNode as c, toDisplayString as m } from "vue";
-const _ = { class: "fallback-component" }, d = { class: "component" }, f = /* @__PURE__ */ r({
+/**
+ * name: @storyblok/vue
+ * (c) 2024
+ * description: SDK to integrate Storyblok into your project using Vue.
+ * author: Storyblok
+ */
+import { defineComponent as r, openBlock as p, createElementBlock as a, createElementVNode as n, createTextVNode as c, toDisplayString as d } from "vue";
+const m = { class: "fallback-component" }, _ = { class: "component" }, f = /* @__PURE__ */ r({
   __name: "FallbackComponent",
   props: {
     blok: {}
   },
   setup(t) {
-    return (e, o) => (p(), a("div", _, [
+    return (e, o) => (p(), a("div", m, [
       n("p", null, [
         o[0] || (o[0] = c(" Component could not be found for blok ")),
-        n("span", d, m(e.blok.component), 1),
+        n("span", _, d(e.blok.component), 1),
         o[1] || (o[1] = c("! Is it configured correctly? "))
       ])
     ]));
@@ -18,7 +24,7 @@ const _ = { class: "fallback-component" }, d = { class: "component" }, f = /* @_
   for (const [s, l] of e)
     o[s] = l;
   return o;
-}, u = /* @__PURE__ */ i(f, [["__scopeId", "data-v-93c770c0"]]);
+}, u = /* @__PURE__ */ i(f, [["__scopeId", "data-v-9abcd1f2"]]);
 export {
   u as default
 };

package/dist/components/FallbackComponent.vue.d.ts

@@ -0,0 +1,6 @@
+import { SbBlokData } from '../types';
+export interface SbComponentProps {
+    blok: SbBlokData;
+}
+declare const _default: import('vue').DefineComponent<SbComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/StoryblokComponent.vue.d.ts

@@ -0,0 +1,5 @@
+import { SbComponentProps } from '../types';
+declare const _default: import('vue').DefineComponent<SbComponentProps, {
+    value: import('vue').Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/StoryblokRichText.vue.d.ts

@@ -1,12 +1,3 @@
-import type { StoryblokRichTextProps } from "../types";
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<StoryblokRichTextProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<StoryblokRichTextProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import { StoryblokRichTextProps } from '../types';
+declare const _default: import('vue').DefineComponent<StoryblokRichTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StoryblokRichTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/dist/composables/useStoryblokRichText.d.ts

@@ -1,9 +1,9 @@
-import type { VNode } from "vue";
-import type { StoryblokRichTextNode, StoryblokRichTextOptions } from "@storyblok/js";
+import { VNode } from 'vue';
+import { StoryblokRichTextNode, StoryblokRichTextOptions } from '@storyblok/js';
 export declare function useStoryblokRichText(options: StoryblokRichTextOptions<VNode>): {
-    render: (node: StoryblokRichTextNode<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    render: (node: StoryblokRichTextNode<VNode<import('vue').RendererNode, import('vue').RendererElement, {
         [key: string]: any;
-    }>>) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    }>>) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
         [key: string]: any;
     }>;
 };

package/dist/index.d.ts

@@ -1,14 +1,14 @@
-import type { Ref, Plugin } from "vue";
-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";
+import { Plugin, Ref } from 'vue';
+import { ISbStoriesParams, ISbStoryData, StoryblokBridgeConfigV2, StoryblokClient } from './types';
+export { default as StoryblokComponent } from './components/StoryblokComponent.vue';
+export { default as StoryblokRichText } from './components/StoryblokRichText.vue';
+export * from './composables/useStoryblokRichText';
+export * from './types';
+export { apiPlugin, BlockTypes, MarkTypes, renderRichText, RichTextResolver, richTextResolver, RichTextSchema, type StoryblokRichTextDocumentNode, type StoryblokRichTextImageOptimizationOptions, type StoryblokRichTextNode, type StoryblokRichTextNodeResolver, type StoryblokRichTextNodeTypes, type StoryblokRichTextOptions, type StoryblokRichTextResolvers, TextTypes, useStoryblokBridge, } from '@storyblok/js';
 export declare const useStoryblokApi: () => StoryblokClient;
-export declare const useStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<Ref<ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
+export declare const useStoryblok: (url: string, apiOptions?: ISbStoriesParams, bridgeOptions?: StoryblokBridgeConfigV2) => Promise<Ref<ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
     [index: string]: any;
-}>, ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
+}> | null, ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
     [index: string]: any;
-}>>>;
+}> | null>>;
 export declare const StoryblokVue: Plugin;
-export * from "./types";