@storybook/vue3 7.1.0-alpha.8 → 7.1.0-beta.0

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/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-7CGPMEMZ.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 makeMap(str,expectsLowerCase){let map2=Object.create(null),list=str.split(",");for(let i=0;i<list.length;i++)map2[list[i]]=!0;return expectsLowerCase?val=>!!map2[val.toLowerCase()]:val=>!!map2[val]}var specialBooleanAttrs="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";var isBooleanAttr=makeMap(specialBooleanAttrs+",async,autofocus,autoplay,controls,default,defer,disabled,hidden,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected");function looseCompareArrays(a,b){if(a.length!==b.length)return!1;let equal=!0;for(let i=0;equal&&i<a.length;i++)equal=looseEqual(a[i],b[i]);return equal}function looseEqual(a,b){if(a===b)return!0;let aValidType=isDate(a),bValidType=isDate(b);if(aValidType||bValidType)return aValidType&&bValidType?a.getTime()===b.getTime():!1;if(aValidType=isSymbol(a),bValidType=isSymbol(b),aValidType||bValidType)return a===b;if(aValidType=isArray(a),bValidType=isArray(b),aValidType||bValidType)return aValidType&&bValidType?looseCompareArrays(a,b):!1;if(aValidType=isObject(a),bValidType=isObject(b),aValidType||bValidType){if(!aValidType||!bValidType)return!1;let aKeysCount=Object.keys(a).length,bKeysCount=Object.keys(b).length;if(aKeysCount!==bKeysCount)return!1;for(let key in a){let aHasKey=a.hasOwnProperty(key),bHasKey=b.hasOwnProperty(key);if(aHasKey&&!bHasKey||!aHasKey&&bHasKey||!looseEqual(a[key],b[key]))return!1}}return String(a)===String(b)}var EMPTY_OBJ=Object.freeze({}),EMPTY_ARR=Object.freeze([]);var isArray=Array.isArray;var isDate=val=>toTypeString(val)==="[object Date]";var isSymbol=val=>typeof val=="symbol",isObject=val=>val!==null&&typeof val=="object";var objectToString=Object.prototype.toString,toTypeString=value=>objectToString.call(value);var cacheStringFunction=fn=>{let cache=Object.create(null);return str=>cache[str]||(cache[str]=fn(str))},camelizeRE=/-(\w)/g,camelize=cacheStringFunction(str=>str.replace(camelizeRE,(_,c)=>c?c.toUpperCase():"")),hyphenateRE=/\B([A-Z])/g,hyphenate=cacheStringFunction(str=>str.replace(hyphenateRE,"-$1").toLowerCase()),capitalize=cacheStringFunction(str=>str.charAt(0).toUpperCase()+str.slice(1)),toHandlerKey=cacheStringFunction(str=>str?`on${capitalize(str)}`:"");function normalizeFunctionalComponent(options){return typeof options=="function"?{render:options,name:options.name}:options}function prepare(rawStory,innerStory){let story=rawStory;return story===null?null:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return h(story)}}}function decorateStory(storyFn,decorators){let updatedArgs;return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>(story=decorated({...context,...sanitizeStoryContextUpdate(update)}),update&&update.args&&!looseEqual(update.args,context.args)&&(updatedArgs??=update.args),story),context);return context.args=updatedArgs??context.args,story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>h(story,context.args))},context=>prepare(storyFn(context)))}import{createApp,h as h2,isReactive,isVNode,reactive}from"vue";var slotsMap=new Map,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,createOrUpdateSlots(context))},setupFunction=_app=>{},setup=fn=>{setupFunction=fn},map=new Map;function renderToCanvas({storyFn,forceRemount,showMain,showException,storyContext,id},canvasElement){let existingApp=map.get(canvasElement);if(existingApp&&!forceRemount){let element=storyFn(),args=getArgs(element,storyContext);return updateArgs(existingApp.reactiveArgs,args),()=>{teardown(existingApp.vueApp,canvasElement)}}existingApp&&forceRemount&&teardown(existingApp.vueApp,canvasElement);let vueApp=createApp({setup(){storyContext.args=reactive(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:reactive(args)};return map.set(canvasElement,appState),()=>h2(rootElement,appState.reactiveArgs)}});return vueApp.config.errorHandler=e=>showException(e),setupFunction(vueApp),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function generateSlots(context){let{argTypes}=context,slots=Object.entries(argTypes).filter(([key,value])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>{let slotValue=context.args[key];return[key,typeof slotValue=="function"?slotValue:()=>slotValue]});return reactive(Object.fromEntries(slots))}function getArgs(element,storyContext){return element.props&&isVNode(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=isReactive(reactiveArgs)?reactiveArgs:reactive(reactiveArgs);Object.keys(currentArgs).forEach(key=>{key in nextArgs||delete currentArgs[key]}),Object.assign(currentArgs,nextArgs)}function teardown(storybookApp,canvasElement){storybookApp?.unmount(),map.has(canvasElement)&&map.delete(canvasElement)}function createOrUpdateSlots(context){let{id:storyID,component}=context,slots=generateSlots(context);if(slotsMap.has(storyID)){let app=slotsMap.get(storyID);return app?.reactiveSlots&&updateArgs(app.reactiveSlots,slots),app?.reactiveSlots}return slotsMap.set(storyID,{component,reactiveSlots:slots}),slots}export{__commonJS,__toESM,isArray,decorateStory,render,setup,renderToCanvas};

package/dist/render-189b3692.d.ts

@@ -1,14 +0,0 @@
-import { WebRenderer, ArgsStoryFn, RenderContext } from '@storybook/types';
-import { ConcreteComponent } from 'vue';
-
-type StoryFnVueReturnType = ConcreteComponent<any>;
-interface VueRenderer extends WebRenderer {
-    component: Omit<ConcreteComponent<this['T']>, 'props'>;
-    storyResult: StoryFnVueReturnType;
-}
-
-declare const render: ArgsStoryFn<VueRenderer>;
-declare const setup: (fn: (app: any) => void) => void;
-declare function renderToCanvas({ storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext<VueRenderer>, canvasElement: VueRenderer['canvasElement']): () => void;
-
-export { VueRenderer as V, renderToCanvas as a, render as r, setup as s };

package/template/stories/CustomRenderOptionsArgsFromProps.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta } from '@storybook/vue3';
-import { defineComponent } from 'vue';
-import Reactivity from './Reactivity.vue';
-import * as ReactiveDecorators from './ReactiveDecorators.stories';
-
-const meta = {
-  ...ReactiveDecorators.default,
-  component: Reactivity,
-  render: (args, { argTypes }) => {
-    return defineComponent({
-      props: Object.keys(argTypes),
-      components: { Reactivity },
-      template: `<div>Custom render uses options api and binds args to props: <Reactivity v-bind="$props">
-         <template #header="{title}"><h3>{{ header }} - Title: {{ title }}</h3></template>
-         {{ $props.default }}
-         <template #footer>{{ footer }}</template>
-         </Reactivity>
-        </div>`,
-    });
-  },
-} satisfies Meta<typeof Reactivity>;
-
-export default meta;
-
-export {
-  NoDecorators,
-  DecoratorFunctionalComponent,
-  DecoratorFunctionalComponentArgsFromContext,
-  DecoratorFunctionalComponentArgsFromProps,
-  DecoratorComponentOptions,
-  DecoratorComponentOptionsArgsFromData,
-  DecoratorComponentOptionsArgsFromProps,
-} from './ReactiveDecorators.stories';

package/template/stories/GlobalUsage.vue

@@ -1,3 +0,0 @@
-<template>
-  <global-button v-bind="$props" />
-</template>