@storybook/vue3 7.1.0-alpha.3 → 7.1.0-alpha.30

package/template/stories_vue3-vite-default-ts/MySlotComponent.vue

@@ -0,0 +1,12 @@
+<!-- <MyComponent> template -->
+<script setup lang="ts">
+const props = defineProps({
+  label: String,
+  year: Number,
+});
+</script>
+<template>
+  <div data-testid="scoped-slot">
+    <slot :text="`Hello ${props.label} from the slot`" :year="props.year"></slot>
+  </div>
+</template>

package/template/{stories → stories_vue3-vite-default-ts}/OverrideArgs.stories.js

@@ -10,7 +10,7 @@ const icons = {
   },
 };
 
-export default {
+const meta = {
   component: OverrideArgs,
   argTypes: {
     // To show that other props are passed through
@@ -39,4 +39,6 @@ export default {
   },
 };
 
+export default meta;
+
 export const TestOne = {};

package/template/{stories → stories_vue3-vite-default-ts}/OverrideArgs.vue

@@ -5,8 +5,8 @@
   </button>
 </template>
 
-<script lang="typescript">
-import { h, computed, reactive } from 'vue';
+<script lang="ts">
+import { computed } from 'vue';
 
 export default {
   name: 'override-args',
@@ -22,7 +22,7 @@ export default {
     },
   },
 
-  // @ts-expect-error (Converted from ts-ignore)
+
   setup(props, { emit }) {
     const classes = {
       'storybook-button': true,

package/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts

@@ -0,0 +1,137 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import type { Meta, StoryObj, StoryFn } from '@storybook/vue3';
+import { within, userEvent } from '@storybook/testing-library';
+import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
+
+import ReactiveArgs from './ReactiveArgs.vue';
+
+const meta = {
+  component: ReactiveArgs,
+  argTypes: {
+    // To show that other props are passed through
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof ReactiveArgs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ReactiveTest: Story = {
+  args: {
+    label: 'Button',
+  },
+  // test that args are updated correctly in rective mode
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    const reactiveButton = await canvas.getByRole('button');
+    await expect(reactiveButton).toHaveTextContent('Button 0');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { label: 'updated' },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByRole('button')).toHaveTextContent('updated 1');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await expect(reactiveButton).toHaveTextContent('updated 2');
+  },
+};
+
+export const ReactiveHtmlWrapper: Story = {
+  args: { label: 'Wrapped Button' },
+
+  decorators: [
+    () => ({
+      template: `
+        <div style="border: 5px solid red;">
+          <story/>
+        </div>
+        `,
+    }),
+  ],
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    const reactiveButton = await canvas.getByRole('button');
+    await expect(reactiveButton).toHaveTextContent('Wrapped Button 0');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: { label: 'updated Wrapped Button' },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByRole('button')).toHaveTextContent('updated Wrapped Button 1');
+
+    await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+    await expect(reactiveButton).toHaveTextContent('updated Wrapped Button 2');
+  },
+};
+
+// to test that Simple html Decorators in CSF2 format are applied correctly in reactive mode
+const ReactiveCSF2WrapperTempl: StoryFn = (args) => ({
+  components: { ReactiveArgs },
+  setup() {
+    return { args };
+  },
+  template: '<ReactiveArgs v-bind="args" />',
+});
+
+export const ReactiveCSF2Wrapper = ReactiveCSF2WrapperTempl.bind({});
+
+ReactiveCSF2Wrapper.args = {
+  label: 'CSF2 Wrapped Button',
+};
+ReactiveCSF2Wrapper.decorators = [
+  () => ({
+    template: `
+      <div style="border: 5px solid red;">
+        <story/>
+      </div>
+      `,
+  }),
+];
+
+ReactiveCSF2Wrapper.play = async ({ canvasElement, id }) => {
+  const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+  const canvas = within(canvasElement);
+
+  await channel.emit(RESET_STORY_ARGS, { storyId: id });
+  await new Promise((resolve) => {
+    channel.once(STORY_ARGS_UPDATED, resolve);
+  });
+  const reactiveButton = await canvas.getByRole('button');
+  await expect(reactiveButton).toHaveTextContent('CSF2 Wrapped Button 0');
+
+  await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+  await channel.emit(UPDATE_STORY_ARGS, {
+    storyId: id,
+    updatedArgs: { label: 'updated CSF2 Wrapped Button' },
+  });
+  await new Promise((resolve) => {
+    channel.once(STORY_ARGS_UPDATED, resolve);
+  });
+  await expect(canvas.getByRole('button')).toHaveTextContent('updated CSF2 Wrapped Button 1');
+
+  await userEvent.click(reactiveButton); // click to update the label to increment the count + 1
+  await expect(reactiveButton).toHaveTextContent('updated CSF2 Wrapped Button 2');
+};

package/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts

@@ -0,0 +1,88 @@
+import { global as globalThis } from '@storybook/global';
+import { userEvent, within } from '@storybook/testing-library';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { h } from 'vue';
+import { RESET_STORY_ARGS, STORY_ARGS_UPDATED, UPDATE_STORY_ARGS } from '@storybook/core-events';
+import Reactivity from './Reactivity.vue';
+
+const meta = {
+  component: Reactivity,
+  argTypes: {
+    header: { control: { type: 'text' } },
+    footer: { control: { type: 'text' } },
+    default: { control: { type: 'text' } },
+  },
+  args: {
+    label: 'If you see this then the label arg was not reactive.',
+    default: 'If you see this then the default slot was not reactive.',
+    header: 'If you see this, the header slot was not reactive.', // this can be useless if you have custom render function that overrides the slot
+    footer: 'If you see this, the footer slot was not reactive.',
+  },
+  play: async ({ canvasElement, id, args }) => {
+    const channel = (globalThis as any).__STORYBOOK_ADDONS_CHANNEL__;
+
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+
+    const input = await canvas.findByLabelText<HTMLInputElement>('Some input:');
+    await userEvent.type(input, 'value');
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        label: 'updated label',
+        header: 'updated header slot', // this can be useless if you have custom render function that overrides the slot which the case here
+        footer: 'updated footer slot',
+        default: 'updated default slot',
+      },
+    });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+  },
+} satisfies Meta<typeof Reactivity>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NoDecorators: Story = {};
+
+export const DecoratorFunctionalComponent: Story = {
+  decorators: [
+    (storyFn, context) => {
+      const story = storyFn();
+      return () => h('div', [h('h2', ['Decorator not using args']), [h(story)]]);
+    },
+  ],
+};
+
+export const DecoratorFunctionalComponentArgsFromContext: Story = {
+  decorators: [
+    (storyFn, context) => {
+      const story = storyFn();
+      return () =>
+        h('div', [h('h2', ['Decorator using args.label: ', context.args.label]), [h(story)]]);
+    },
+  ],
+};
+
+export const DecoratorComponentOptions: Story = {
+  decorators: [
+    (storyFn, context) => {
+      return {
+        template: '<div><h2>Decorator not using args</h2><story/></div>',
+      };
+    },
+  ],
+};
+
+export const DecoratorComponentOptionsArgsFromData: Story = {
+  decorators: [
+    (storyFn, context) => {
+      return {
+        data: () => ({ args: context.args }),
+        template: '<div><h2>Decorator using args.label: {{args.label}}</h2><story/></div>',
+      };
+    },
+  ],
+};

package/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts

@@ -0,0 +1,127 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import { within } from '@storybook/testing-library';
+import { STORY_ARGS_UPDATED, RESET_STORY_ARGS, UPDATE_STORY_ARGS } from '@storybook/core-events';
+import { h } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import BaseLayout from './BaseLayout.vue';
+
+const meta = {
+  component: BaseLayout,
+  args: {
+    label: 'Storybook Day',
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof BaseLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SimpleSlotTest: Story = {
+  args: {
+    label: 'Storybook Day',
+    header: () => h('h1', 'Header Text Slot'),
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain('Footer VNode Slot');
+    await expect(canvas.getByTestId('default-slot').innerText).toContain('Default Text Slot');
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        default: () => 'Default Text Slot Updated',
+        footer: h('p', 'Footer VNode Slot Updated'),
+      },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('default-slot').innerText).toContain(
+      'Default Text Slot Updated'
+    );
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain(
+      'Footer VNode Slot Updated'
+    );
+  },
+};
+
+export const NamedSlotTest: Story = {
+  args: {
+    label: 'Storybook Day',
+    header: ({ title }: { title: string }) => h('h1', title),
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  // test that args are updated correctly in rective mode
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('header-slot').innerText).toContain(
+      'Header title from the slot'
+    );
+    await expect(canvas.getByTestId('default-slot').innerText).toContain('Default Text Slot');
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain('Footer VNode Slot');
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        default: () => 'Default Text Slot Updated',
+        footer: h('p', 'Footer VNode Slot Updated'),
+      },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('default-slot').innerText).toContain(
+      'Default Text Slot Updated'
+    );
+    await expect(canvas.getByTestId('footer-slot').innerText).toContain(
+      'Footer VNode Slot Updated'
+    );
+  },
+};
+
+export const SlotWithRenderFn: Story = {
+  args: {
+    label: 'Storybook Day',
+    header: ({ title }: { title: string }) => `${title}`,
+    default: () => 'Default Text Slot',
+    footer: h('p', 'Footer VNode Slot'),
+  },
+  render: (args) => ({
+    components: { BaseLayout },
+    setup() {
+      return { args };
+    },
+    template: `<BaseLayout :label="args.label" data-testid="layout">
+  	            {{args.default()}}
+                <template #header="{ title }"><h1>{{args.header({title})}}</h1></template>
+              </BaseLayout>`,
+  }),
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+    await expect(canvas.getByTestId('layout').innerText).toContain('Default Text Slot');
+  },
+};

package/template/stories_vue3-vite-default-ts/Reactivity.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+defineProps<{ label: string }>();
+</script>
+<template>
+  <div style="padding: 20px;background-color: pink;">
+    <header data-testid="header-slot">
+      <slot name="header" title="Header title from the slot">
+        If you see this, the header slot was not reactive.
+      </slot>
+    </header>
+    <div id="content">
+      <label>
+        Some input:
+        <input style='width: 400px' placeholder='If you see this, an args update caused the input field to loose state' />
+      </label>
+      <hr>
+      <button class="storybook-button storybook-button--primary storybook-button--medium"> {{ label
+      }}</button>
+    </div>
+
+    <main data-testid="default-slot">
+      <slot>Default slot placeholder</slot>
+    </main>
+    <footer data-testid="footer-slot">
+      <slot name="footer">
+        Footer slot placeholder
+      </slot>
+    </footer>
+  </div>
+</template>
+
+<style>
+header,
+footer {
+  background-color: #fff0ff;
+  padding: 20px;
+}
+
+main,
+#content {
+  background-color: #f0f0f0;
+  padding: 20px;
+}
+</style>

package/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts

@@ -0,0 +1,81 @@
+import { expect } from '@storybook/jest';
+import { global as globalThis } from '@storybook/global';
+import type { Channel } from '@storybook/channels';
+import { within } from '@storybook/testing-library';
+import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
+
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MySlotComponent from './MySlotComponent.vue';
+
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top,@typescript-eslint/naming-convention
+  var __STORYBOOK_ADDONS_CHANNEL__: Channel;
+}
+
+const meta = {
+  component: MySlotComponent,
+  args: {
+    label: 'Storybook Day',
+    year: 2022,
+    default: ({ text, year }) => `${text}, ${year}`,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MySlotComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  // test that args are updated correctly in reactive mode
+  play: async ({ canvasElement, id }) => {
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
+    const canvas = within(canvasElement);
+
+    await channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve));
+    await expect(canvas.getByTestId('scoped-slot').innerText).toMatch(
+      'Hello Storybook Day from the slot, 2022'
+    );
+
+    await channel.emit(UPDATE_STORY_ARGS, {
+      storyId: id,
+      updatedArgs: {
+        label: 'Storybook Day updated',
+        year: 2023,
+      },
+    });
+    await new Promise((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+
+    await expect(canvas.getByTestId('scoped-slot').innerText).toMatch(
+      'Hello Storybook Day updated from the slot, 2023'
+    );
+  },
+};
+
+export const CustomRender: Story = {
+  render: (args) => ({
+    components: { MySlotComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MySlotComponent v-bind="args" v-slot="slotProps">
+  	              {{ slotProps.text }}, {{ slotProps.year }}
+              </MySlotComponent>`,
+  }),
+  play: Basic.play,
+};
+
+export const CustomRenderUsingFunctionSlot: Story = {
+  render: (args: any) => ({
+    components: { MySlotComponent },
+    setup() {
+      return { args };
+    },
+    template: `<MySlotComponent v-bind="args" v-slot="slotProps">
+  	            {{args.default(slotProps)}}
+              </MySlotComponent>`,
+  }),
+  play: Basic.play,
+};

package/template/stories_vue3-vite-default-ts/SourceDecorator.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import GlobalUsage from './GlobalUsage.vue';
+import GlobalSetup from './GlobalSetup.vue';
+
+const meta: Meta = {
+  component: GlobalUsage,
+  argTypes: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof GlobalUsage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MultiComponents: Story = {
+  args: {
+    label: 'Button',
+    size: 'large',
+    backgroundColor: '#aa00ff',
+    btn1Args: { label: 'Button 10', size: 'small', backgroundColor: '#aa00ff' },
+  },
+  render(args: any) {
+    return {
+      components: { GlobalUsage, GlobalSetup },
+      setup() {
+        return { args };
+      },
+      template: `<div style="background-color:pink;opacity:0.9;padding:20px" >
+                  
+                  <div style="display:flex;gap:10px">
+                    <img src="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png" width="200" />  
+                    <GlobalUsage v-bind="args.btn1Args" />&nbsp;
+                  </div>
+                  <h2>Complex Story Custom template </h2> <br/> <hr/>
+                
+                <GlobalSetup  :label="args.label" />
+                <div style="margin:8px"><span style="font-size:28px;color:green">Multiple </span>
+                <span style="background-color:magenta;opacity:0.9;padding:8px"><i>Components</i></span></div>
+                <div style="display:flex;gap:10px">
+                  <GlobalUsage v-bind="args" />
+                  <GlobalUsage label="Static Label Dynamic color" :background-color="args.backgroundColor"/>  
+                </div>   
+               </div>`,
+    };
+  },
+};

package/template/stories_vue3-vite-default-ts/decorators.stories.ts

@@ -0,0 +1,84 @@
+import type { DecoratorFunction } from '@storybook/csf';
+import { global as globalThis } from '@storybook/global';
+import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
+import { h } from 'vue';
+
+const { Button, Pre } = (globalThis as any).Components;
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ComponentTemplateWrapper = () => ({
+  components: {
+    Pre,
+  },
+  template: `
+    <Pre text="decorator" />
+    <story v-bind="$attrs"/>
+  `,
+});
+
+const SimpleTemplateWrapper = () => ({
+  template: `
+    <div style="border: 5px solid red;">
+      <story/>
+    </div>
+    `,
+});
+
+const VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {
+  // Call the `storyFn` to receive a component that Vue can render
+  const story = storyFn();
+  // Vue 3 "Functional" component as decorator
+  return () => {
+    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));
+  };
+};
+
+const DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({
+  template: `<div :style="{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }"><story /></div>`,
+  computed: { level: () => `${args.level}px` },
+});
+
+export const ComponentTemplate: Story = {
+  args: { label: 'With component' },
+  decorators: [ComponentTemplateWrapper],
+};
+
+export const SimpleTemplate: Story = {
+  args: { label: 'With border' },
+  decorators: [SimpleTemplateWrapper],
+};
+
+export const VueWrapper: Story = {
+  args: { label: 'With Vue wrapper' },
+  decorators: [VueWrapperWrapper],
+};
+
+export const DynamicWrapper: Story = {
+  args: { label: 'With dynamic wrapper', primary: true },
+  argTypes: {
+    // Number type is detected, but we still want to constrain the range from 1-6
+    level: { control: { type: 'range', min: 1, max: 6 } },
+  },
+  decorators: [DynamicWrapperWrapper],
+};
+
+export const MultipleWrappers = {
+  args: { label: 'With multiple wrappers' },
+  argTypes: {
+    // Number type is detected, but we still want to constrain the range from 1-6
+    level: { control: { type: 'range', min: 1, max: 6 } },
+  },
+  decorators: [
+    ComponentTemplateWrapper,
+    SimpleTemplateWrapper,
+    VueWrapperWrapper,
+    DynamicWrapperWrapper,
+  ],
+};

package/template/stories_vue3-vite-default-ts/preview.ts

@@ -0,0 +1,12 @@
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $greetingMessage: (key: string) => string;
+  }
+}
+
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top
+  var Components: Record<string, any>;
+}
+
+export default {};

package/dist/chunk-2GDW2BFM.mjs

@@ -1 +0,0 @@
-var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));import{h}from"vue";import{sanitizeStoryContextUpdate}from"@storybook/preview-api";function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story==null?null:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return h(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),story),context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,h(story,context.args))},context=>prepare(storyFn(context)))}import{createApp,h as h2,reactive}from"vue";var render=(props,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return h2(Component,props,getSlots(props,context))},setupFunction=_app=>{},setup=fn=>{setupFunction=fn},map=new Map,elementMap=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext},canvasElement){storyContext.args=reactive(storyContext.args);let element=storyFn();elementMap.set(canvasElement,element);let props=element.render?.().props,reactiveArgs=props?reactive(props):storyContext.args,existingApp=map.get(canvasElement);if(existingApp&&!forceRemount)return updateArgs(existingApp.reactiveArgs,reactiveArgs),()=>{teardown(existingApp.vueApp,canvasElement)};existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let storybookApp=createApp({render(){let renderedElement=elementMap.get(canvasElement),current=renderedElement&&renderedElement.template?renderedElement:element;return map.set(canvasElement,{vueApp:storybookApp,reactiveArgs}),h2(current,reactiveArgs)}});return storybookApp.config.errorHandler=e=>showException(e),setupFunction(storybookApp),storybookApp.mount(canvasElement),showMain(),()=>{teardown(storybookApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key,value])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function updateArgs(reactiveArgs,nextArgs){nextArgs&&(Object.keys(reactiveArgs).forEach(key=>{delete reactiveArgs[key]}),Object.assign(reactiveArgs,nextArgs))}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}export{__commonJS,__toESM,decorateStory,render,setup,renderToCanvas};