@storyblok/vue 10.1.9 → 11.0.0

package/dist/components/BlokRenderer.d.ts

@@ -0,0 +1,57 @@
+import { PropType } from 'vue';
+import { SbRichTextMark, SbRichTextNode } from '@storyblok/richtext';
+import { SbVueRichTextProps, SbVueRichTextRenderContext } from '../rich-text-renderer.ts';
+declare const BlokRenderer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    type: {
+        type: PropType<"blok">;
+        required: true;
+    };
+    attrs: {
+        type: PropType<SbVueRichTextProps["blok"]["attrs"]>;
+        required: false;
+    };
+    content: {
+        type: PropType<SbRichTextNode[]>;
+        required: false;
+    };
+    marks: {
+        type: PropType<SbRichTextMark[]>;
+        required: false;
+    };
+    _key: {
+        type: StringConstructor;
+        required: false;
+    };
+    context: {
+        type: PropType<SbVueRichTextRenderContext>;
+        required: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: {
+        type: PropType<"blok">;
+        required: true;
+    };
+    attrs: {
+        type: PropType<SbVueRichTextProps["blok"]["attrs"]>;
+        required: false;
+    };
+    content: {
+        type: PropType<SbRichTextNode[]>;
+        required: false;
+    };
+    marks: {
+        type: PropType<SbRichTextMark[]>;
+        required: false;
+    };
+    _key: {
+        type: StringConstructor;
+        required: false;
+    };
+    context: {
+        type: PropType<SbVueRichTextRenderContext>;
+        required: false;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default BlokRenderer;

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

@@ -1,16 +1,19 @@
-import { SbComponentProps } from '../types';
+import { SbBlokData } from '../types.ts';
+type __VLS_Props = {
+    blok: SbBlokData;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: any;
+    slots: Partial<Record<string, (_: any) => any>>;
     refs: {
         blokRef: unknown;
     };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<SbComponentProps, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     value: import('vue').Ref<any, any>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     blokRef: unknown;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -1,3 +1,35 @@
-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>;
+import { PropType } from 'vue';
+import { SbRichTextImageOptions, SbRichTextInput } from '@storyblok/richtext';
+import { SbVueRichTextComponentMap } from '../rich-text-renderer';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    document: {
+        type: PropType<SbRichTextInput>;
+        required: false;
+    };
+    optimizeImage: {
+        type: PropType<boolean | SbRichTextImageOptions>;
+        required: false;
+    };
+    components: {
+        type: PropType<SbVueRichTextComponentMap>;
+        required: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    document: {
+        type: PropType<SbRichTextInput>;
+        required: false;
+    };
+    optimizeImage: {
+        type: PropType<boolean | SbRichTextImageOptions>;
+        required: false;
+    };
+    components: {
+        type: PropType<SbVueRichTextComponentMap>;
+        required: false;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/composables/use-storyblok-rich-text.d.ts

@@ -0,0 +1,34 @@
+import { SbVueRichTextRenderContext } from '../rich-text-renderer';
+/**
+ * Creates a Storyblok Rich Text renderer.
+ *
+ * The returned render function can be used to transform Storyblok Rich Text
+ * documents into Vue VNodes using the provided configuration.
+ *
+ * Useful for configuring image optimization and custom node resolvers once
+ * and reusing the renderer across multiple rich text documents.
+ *
+ * @example
+ * ```ts
+ * const render = useStoryblokRichText({
+ *   optimizeImage: true,
+ *   components: {
+ *     heading: CustomHeading,
+ *   },
+ * });
+ *
+ * const content = computed(() => render(story.content.richtext));
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const render = useStoryblokRichText();
+ * </script>
+ *
+ * <template>
+ *   <component :is="render(blok.articleContent)" />
+ * </template>
+ * ```
+ */
+export declare function useStoryblokRichText(props: SbVueRichTextRenderContext): (document: import('@storyblok/richtext').SbRichTextInput) => import('vue').VNode | import('vue').VNode[] | null;

package/dist/global-directives.type-test.d.ts

@@ -0,0 +1,7 @@
+import { Directive, GlobalDirectives } from 'vue';
+/**
+ * Compile-time regression test for https://github.com/storyblok/monoblok/issues/620
+ * `v-editable` must be declared in Vue's `GlobalDirectives` so that
+ * vue-tsc/Volar recognize it in templates under `strictTemplates`.
+ */
+export type VEditableIsGloballyDeclared = GlobalDirectives['vEditable'] extends Directive<HTMLElement> ? true : never;

package/dist/index.d.ts

@@ -2,9 +2,10 @@ 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 { useStoryblokRichText } from './composables/use-storyblok-rich-text';
+export type { SbVueRichTextComponentMap, SbVueRichTextProps, SbVueRichTextRenderContext } from './rich-text-renderer';
 export * from './types';
-export { apiPlugin, asTag, BlockTypes, ComponentBlok, LinkTypes, MarkTypes, renderRichText, richTextResolver, StoryblokClient, type StoryblokRichTextDocumentNode, type StoryblokRichTextImageOptimizationOptions, type StoryblokRichTextNode, type StoryblokRichTextNodeTypes, type StoryblokRichTextOptions, TextTypes, useStoryblokBridge, } from '@storyblok/js';
+export { apiPlugin, StoryblokClient, 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-client').ISbComponentType<string> & {
     [index: string]: any;
@@ -12,3 +13,5 @@ export declare const useStoryblok: (url: string, apiOptions?: ISbStoriesParams,
     [index: string]: any;
 }> | null>>;
 export declare const StoryblokVue: Plugin;
+export { buildStoryblokImage, renderRichText, splitTableRows } from '@storyblok/richtext';
+export type { SbRichTextDoc, SbRichTextImageOptions, SbRichTextMark, SbRichTextNode, SbRichTextProps, SbRichTextRenderContext, } from '@storyblok/richtext';

package/dist/rich-text-renderer.d.ts

@@ -0,0 +1,24 @@
+import { Component, VNode } from 'vue';
+import { SbRichTextElement, SbRichTextElementByType, SbRichTextImageOptions, SbRichTextInput } from '@storyblok/richtext';
+export type SbVueRichTextProps = SbRichTextElementByType<SbVueRichTextRenderContext>;
+export type SbVueRichTextComponentMap = {
+    [K in SbRichTextElement]?: Component<SbVueRichTextProps[K]>;
+};
+export interface SbVueRichTextRenderContext {
+    optimizeImage?: boolean | Partial<SbRichTextImageOptions>;
+    components?: SbVueRichTextComponentMap;
+}
+/**
+ * Creates a Vue-compatible render function for Storyblok Rich Text documents.
+ *
+ * This is a factory that binds render-time configuration (such as image
+ * optimization and component overrides) and returns a reusable renderer
+ * function.
+ *
+ * The returned function is designed to be used directly inside Vue render
+ * functions or setup return functions, and will convert a normalized
+ * Storyblok rich text document into Vue VNodes.
+ *
+ * If the input is null or empty, it returns null.
+ */
+export declare function createRichTextRenderer(options: SbVueRichTextRenderContext): (document: SbRichTextInput) => VNode | VNode[] | null;