@storybook/vue3 8.3.0-alpha.2 → 8.3.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/entry-preview-docs.d.ts +5 -2
- package/dist/entry-preview-docs.js +16 -5
- package/dist/entry-preview-docs.mjs +18 -9
- package/dist/index.d.ts +7 -38
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/public-types-bcb3e860.d.ts +40 -0
- package/package.json +6 -6
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { D as Decorator } from './public-types-bcb3e860.js';
|
|
2
2
|
import { ArgTypesExtractor } from 'storybook/internal/docs-tools';
|
|
3
|
+
import { ArgTypesEnhancer } from 'storybook/internal/types';
|
|
3
4
|
import { V as VueRenderer } from './types-1ede6954.js';
|
|
5
|
+
import 'type-fest';
|
|
4
6
|
import 'vue';
|
|
7
|
+
import 'vue-component-type-helpers';
|
|
5
8
|
|
|
6
9
|
declare const parameters: {
|
|
7
10
|
docs: {
|
|
@@ -12,7 +15,7 @@ declare const parameters: {
|
|
|
12
15
|
extractComponentDescription: (component?: any) => string;
|
|
13
16
|
};
|
|
14
17
|
};
|
|
15
|
-
declare const decorators:
|
|
18
|
+
declare const decorators: Decorator[];
|
|
16
19
|
declare const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[];
|
|
17
20
|
|
|
18
21
|
export { argTypesEnhancers, decorators, parameters };
|
|
@@ -1,5 +1,16 @@
|
|
|
1
|
-
"use strict";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 __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools3=require("storybook/internal/docs-tools");var import_docs_tools=require("storybook/internal/docs-tools"),ARG_TYPE_SECTIONS=["props","events","slots","exposed","expose"],extractArgTypes=component=>{if(!(0,import_docs_tools.hasDocgen)(component))return null;let usedDocgenPlugin="exposed"in component.__docgenInfo?"vue-component-meta":"vue-docgen-api",argTypes2={};return ARG_TYPE_SECTIONS.forEach(section=>{(0,import_docs_tools.extractComponentProps)(component,section).forEach(extractedProp=>{let argType;if(usedDocgenPlugin==="vue-docgen-api"){let docgenInfo=extractedProp.docgenInfo;argType=extractFromVueDocgenApi(docgenInfo,section,extractedProp)}else{let docgenInfo=extractedProp.docgenInfo;argType=extractFromVueComponentMeta(docgenInfo,section)}if(!argType||argTypes2[argType.name])return;["events","expose","exposed"].includes(section)&&(argType.control={disable:!0}),argTypes2[argType.name]=argType})}),argTypes2},extractFromVueDocgenApi=(docgenInfo,section,extractedProp)=>{let type,sbType;if(section==="events"&&(type=docgenInfo.type?.names.join(),sbType={name:"other",value:type??"",required:!1}),section==="slots"){let slotBindings=docgenInfo.bindings?.filter(binding=>!!binding.name).map(binding=>`${binding.name}: ${binding.type?.name??"unknown"}`).join("; ");type=slotBindings?`{ ${slotBindings} }`:void 0,sbType={name:"other",value:type??"",required:!1}}if(section==="props"){let propInfo=docgenInfo;if(type=propInfo.type?.name,sbType=extractedProp?(0,import_docs_tools.convert)(extractedProp.docgenInfo):{name:"other",value:type},propInfo.type&&"elements"in propInfo.type&&Array.isArray(propInfo.type.elements)&&propInfo.type.elements.length>0){let elements=propInfo.type.elements.map(i=>i.name);type==="Array"&&(type=`${elements.length===1?elements[0]:`(${elements.join(" | ")})`}[]`),type==="union"?type=elements.join(" | "):type==="intersection"&&(type=elements.join(" & "))}}let required="required"in docgenInfo?docgenInfo.required??!1:!1;return{name:docgenInfo.name,description:docgenInfo.description,type:sbType?{...sbType,required}:{name:"other",value:type??""},table:{type:type?{summary:type}:void 0,defaultValue:extractedProp?.propDef.defaultValue??void 0,jsDocTags:extractedProp?.propDef.jsDocTags,category:section}}},extractFromVueComponentMeta=(docgenInfo,section)=>{if("global"in docgenInfo&&docgenInfo.global)return;let tableType={summary:docgenInfo.type.replace(" | undefined","")};if(section==="props"){let propInfo=docgenInfo,defaultValue=propInfo.default?{summary:propInfo.default}:void 0;return{name:propInfo.name,description:formatDescriptionWithTags(propInfo.description,propInfo.tags),defaultValue,type:convertVueComponentMetaProp(propInfo),table:{type:tableType,defaultValue,category:section}}}else return{name:docgenInfo.name,description:"description"in docgenInfo?docgenInfo.description:"",type:{name:"other",value:docgenInfo.type},table:{type:tableType,category:section}}},convertVueComponentMetaProp=propInfo=>{let schema=propInfo.schema,required=propInfo.required,fallbackSbType={name:"other",value:propInfo.type,required},KNOWN_SCHEMAS=["string","number","function","boolean","symbol"];if(typeof schema=="string")return KNOWN_SCHEMAS.includes(schema)?{name:schema,required}:fallbackSbType;switch(schema.kind){case"enum":{let definedSchemas=schema.schema?.filter(item=>item!=="undefined")??[];return isBooleanSchema(definedSchemas)?{name:"boolean",required}:isLiteralUnionSchema(definedSchemas)||isEnumSchema(definedSchemas)?{name:"enum",value:definedSchemas.map(literal=>literal.replace(/"/g,"")),required}:definedSchemas.length===1?convertVueComponentMetaProp({schema:definedSchemas[0],type:propInfo.type,required}):(definedSchemas.length>2&&definedSchemas.includes("true")&&definedSchemas.includes("false")&&(definedSchemas=definedSchemas.filter(i=>i!=="true"&&i!=="false"),definedSchemas.push("boolean")),{name:"union",value:definedSchemas.map(i=>convertVueComponentMetaProp(typeof i=="object"?{schema:i,type:i.type,required:!1}:{schema:i,type:i,required:!1})),required})}case"array":{let definedSchemas=schema.schema?.filter(item=>item!=="undefined")??[];return definedSchemas.length===0?fallbackSbType:definedSchemas.length===1?{name:"array",value:convertVueComponentMetaProp({schema:definedSchemas[0],type:propInfo.type,required:!1}),required}:{name:"union",value:definedSchemas.map(i=>convertVueComponentMetaProp(typeof i=="object"?{schema:i,type:i.type,required:!1}:{schema:i,type:i,required:!1})),required}}case"object":return{name:"object",value:{},required};default:return fallbackSbType}},formatDescriptionWithTags=(description,tags)=>!tags?.length||!description?description??"":`${tags.map(tag=>`@${tag.name}: ${tag.text}`).join("<br>")}<br><br>${description}`,isLiteralUnionSchema=schemas=>schemas.every(schema=>typeof schema=="string"&&schema.startsWith('"')&&schema.endsWith('"')),isEnumSchema=schemas=>schemas.every(schema=>typeof schema=="string"&&schema.includes(".")),isBooleanSchema=schemas=>schemas.length===2&&schemas.includes("true")&&schemas.includes("false");var import_preview_api=require("storybook/internal/preview-api"),import_docs_tools2=require("storybook/internal/docs-tools"),import_compiler_core=require("@vue/compiler-core"),import_vue=require("vue"),import_kebabCase=__toESM(require("lodash/kebabCase"));var omitEvent=args2=>args2?Object.fromEntries(Object.entries(args2).filter(([key,value])=>!key.startsWith("on"))):{},displayObject=obj=>obj&&typeof obj=="object"?`{${Object.keys(obj).map(key=>`${key}:${displayObject(obj[key])}`).join(",")}}`:typeof obj=="string"?`'${obj}'`:obj?.toString(),htmlEventAttributeToVueEventAttribute=key=>/^on[A-Za-z]/.test(key)?key.replace(/^on/,"v-on:").toLowerCase():key,directiveSource=(key,value)=>key.toLowerCase().startsWith("on")?`${htmlEventAttributeToVueEventAttribute(key)}='()=>({})'`:`${key}="${value||""}"`,attributeSource=(key,value,dynamic)=>["boolean","number","object"].includes(typeof value)||dynamic&&["style","class"].includes(key)?`:${key}="${displayObject(value)}"`:directiveSource(key,value),evalExp=(argExpValue,args2)=>{let evalVal=argExpValue;return evalVal&&/v-bind="(\w+)"/.test(evalVal)?evalVal.replace(/"(\w+)"/g,`"${displayObject(args2)}"`):(Object.keys(args2).forEach(akey=>{let regexMatch=new RegExp(`(\\w+)\\.${akey}`,"g"),regexTarget=new RegExp(`(\\w+)\\.${akey}`,"g");regexMatch.test(evalVal)&&(evalVal=evalVal.replace(regexTarget,displayObject(args2[akey])))}),evalVal)},replaceValueWithRef=(source2,args2,ref)=>{let value=ref?args2[ref]:"args",bindValue=()=>{let argsRef=Object.fromEntries(Object.entries(args2).map(([key])=>[key,key]));return displayObject(argsRef).replace(/'/g,"")},regexMatch=new RegExp(`="${value}"`,"g");return source2.replace(regexMatch,`="${ref??bindValue()}"`)};function generateExpression(slot){let body=slot.toString().split("=>")[1].trim().replace("return","").trim();return body.startsWith("{")&&body.endsWith("}")&&(body=body.substring(1,body.length-1).trim()),`{{${body}}}`}var skipSourceRender=context=>{let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory,isDocsViewMode=context?.viewMode==="docs";return sourceParams?.type===import_docs_tools2.SourceType.DYNAMIC?!1:!isDocsViewMode||!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools2.SourceType.CODE};function generateAttributesSource(tempArgs,args2,argTypes2,byRef2){return Object.keys(tempArgs).map(key=>{let source2=tempArgs[key].loc.source.replace(/\$props/g,"args"),argKey=tempArgs[key].arg?.loc.source;return byRef2&&argKey?replaceValueWithRef(source2,args2,argKey):evalExp(source2,omitEvent(args2))}).join(" ")}function mapAttributesAndDirectives(props){let tranformKey=key=>key.startsWith("on")?key:(0,import_kebabCase.default)(key);return Object.keys(props).map(key=>({name:"bind",type:["v-","@","v-on"].includes(key)?7:6,arg:{content:tranformKey(key),loc:{source:tranformKey(key)}},loc:{source:attributeSource(tranformKey(key),props[key])},exp:{isStatic:!1,loc:{source:props[key]}},modifiers:[""]}))}function mapSlots(slotsArgs,generateComponentSource2,slots){return Object.keys(slotsArgs).map(key=>{let slot=slotsArgs[key],slotContent="",scropedArgs=slots.find(s=>s.name===key&&s.scoped)?.bindings?.map(b=>b.name).join(",");typeof slot=="string"?slotContent=slot:typeof slot=="function"?slotContent=generateExpression(slot):(0,import_vue.isVNode)(slot)?slotContent=generateComponentSource2(slot):typeof slot=="object"&&!(0,import_vue.isVNode)(slot)&&(slotContent=JSON.stringify(slot));let bindingsString=scropedArgs?`="{${scropedArgs}}"`:"";return slotContent=slot?`<template #${key}${bindingsString}>${slotContent}</template>`:"",{type:2,content:slotContent,loc:{source:slotContent,start:{offset:0,line:1,column:0},end:{offset:0,line:1,column:0}}}})}function generateScriptSetup(args2,argTypes2,components){let scriptLines=Object.keys(args2).map(key=>`const ${key} = ${typeof args2[key]=="function"?"()=>{}":`ref(${JSON.stringify(args2[key])});`}`);return scriptLines.unshift('import { ref } from "vue";'),`<script lang='ts' setup>${scriptLines.join(`
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools3=require("storybook/internal/docs-tools");var import_docs_tools=require("storybook/internal/docs-tools"),ARG_TYPE_SECTIONS=["props","events","slots","exposed","expose"],extractArgTypes=component=>{if(!(0,import_docs_tools.hasDocgen)(component))return null;let usedDocgenPlugin="exposed"in component.__docgenInfo?"vue-component-meta":"vue-docgen-api",argTypes={};return ARG_TYPE_SECTIONS.forEach(section=>{(0,import_docs_tools.extractComponentProps)(component,section).forEach(extractedProp=>{let argType;if(usedDocgenPlugin==="vue-docgen-api"){let docgenInfo=extractedProp.docgenInfo;argType=extractFromVueDocgenApi(docgenInfo,section,extractedProp)}else{let docgenInfo=extractedProp.docgenInfo;argType=extractFromVueComponentMeta(docgenInfo,section)}if(!argType||argTypes[argType.name])return;["events","expose","exposed"].includes(section)&&(argType.control={disable:!0}),argTypes[argType.name]=argType})}),argTypes},extractFromVueDocgenApi=(docgenInfo,section,extractedProp)=>{let type,sbType;if(section==="events"&&(type=docgenInfo.type?.names.join(),sbType={name:"other",value:type??"",required:!1}),section==="slots"){let slotBindings=docgenInfo.bindings?.filter(binding=>!!binding.name).map(binding=>`${binding.name}: ${binding.type?.name??"unknown"}`).join("; ");type=slotBindings?`{ ${slotBindings} }`:void 0,sbType={name:"other",value:type??"",required:!1}}if(section==="props"){let propInfo=docgenInfo;if(type=propInfo.type?.name,sbType=extractedProp?(0,import_docs_tools.convert)(extractedProp.docgenInfo):{name:"other",value:type},propInfo.type&&"elements"in propInfo.type&&Array.isArray(propInfo.type.elements)&&propInfo.type.elements.length>0){let elements=propInfo.type.elements.map(i=>i.name);type==="Array"&&(type=`${elements.length===1?elements[0]:`(${elements.join(" | ")})`}[]`),type==="union"?type=elements.join(" | "):type==="intersection"&&(type=elements.join(" & "))}}let required="required"in docgenInfo?docgenInfo.required??!1:!1;return{name:docgenInfo.name,description:docgenInfo.description,type:sbType?{...sbType,required}:{name:"other",value:type??""},table:{type:type?{summary:type}:void 0,defaultValue:extractedProp?.propDef.defaultValue??void 0,jsDocTags:extractedProp?.propDef.jsDocTags,category:section}}},extractFromVueComponentMeta=(docgenInfo,section)=>{if("global"in docgenInfo&&docgenInfo.global)return;let tableType={summary:docgenInfo.type.replace(" | undefined","")};if(section==="props"){let propInfo=docgenInfo,defaultValue=propInfo.default?{summary:propInfo.default}:void 0;return{name:propInfo.name,description:formatDescriptionWithTags(propInfo.description,propInfo.tags),defaultValue,type:convertVueComponentMetaProp(propInfo),table:{type:tableType,defaultValue,category:section}}}else return{name:docgenInfo.name,description:"description"in docgenInfo?docgenInfo.description:"",type:{name:"other",value:docgenInfo.type},table:{type:tableType,category:section}}},convertVueComponentMetaProp=propInfo=>{let schema=propInfo.schema,required=propInfo.required,fallbackSbType={name:"other",value:propInfo.type,required},KNOWN_SCHEMAS=["string","number","function","boolean","symbol"];if(typeof schema=="string")return KNOWN_SCHEMAS.includes(schema)?{name:schema,required}:fallbackSbType;switch(schema.kind){case"enum":{let definedSchemas=schema.schema?.filter(item=>item!=="undefined")??[];return isBooleanSchema(definedSchemas)?{name:"boolean",required}:isLiteralUnionSchema(definedSchemas)||isEnumSchema(definedSchemas)?{name:"enum",value:definedSchemas.map(literal=>literal.replace(/"/g,"")),required}:definedSchemas.length===1?convertVueComponentMetaProp({schema:definedSchemas[0],type:propInfo.type,required}):(definedSchemas.length>2&&definedSchemas.includes("true")&&definedSchemas.includes("false")&&(definedSchemas=definedSchemas.filter(i=>i!=="true"&&i!=="false"),definedSchemas.push("boolean")),{name:"union",value:definedSchemas.map(i=>convertVueComponentMetaProp(typeof i=="object"?{schema:i,type:i.type,required:!1}:{schema:i,type:i,required:!1})),required})}case"array":{let definedSchemas=schema.schema?.filter(item=>item!=="undefined")??[];return definedSchemas.length===0?fallbackSbType:definedSchemas.length===1?{name:"array",value:convertVueComponentMetaProp({schema:definedSchemas[0],type:propInfo.type,required:!1}),required}:{name:"union",value:definedSchemas.map(i=>convertVueComponentMetaProp(typeof i=="object"?{schema:i,type:i.type,required:!1}:{schema:i,type:i,required:!1})),required}}case"object":return{name:"object",value:{},required};default:return fallbackSbType}},formatDescriptionWithTags=(description,tags)=>!tags?.length||!description?description??"":`${tags.map(tag=>`@${tag.name}: ${tag.text}`).join("<br>")}<br><br>${description}`,isLiteralUnionSchema=schemas=>schemas.every(schema=>typeof schema=="string"&&schema.startsWith('"')&&schema.endsWith('"')),isEnumSchema=schemas=>schemas.every(schema=>typeof schema=="string"&&schema.includes(".")),isBooleanSchema=schemas=>schemas.length===2&&schemas.includes("true")&&schemas.includes("false");var import_docs_tools2=require("storybook/internal/docs-tools"),import_preview_api=require("storybook/internal/preview-api"),import_vue=require("vue"),sourceDecorator=(storyFn,ctx)=>{let story=storyFn();if(shouldSkipSourceCodeGeneration(ctx))return story;let channel=import_preview_api.addons.getChannel();return(0,import_vue.watch)(()=>ctx.args,()=>{let sourceCode=generateSourceCode(ctx);channel.emit(import_docs_tools2.SNIPPET_RENDERED,{id:ctx.id,args:ctx.args,source:sourceCode,format:"vue"})},{immediate:!0,deep:!0}),story},generateSourceCode=ctx=>{let sourceCodeContext={imports:{},scriptVariables:{}},{displayName,slotNames,eventNames}=parseDocgenInfo(ctx.component),props=generatePropsSourceCode(ctx.args,slotNames,eventNames,sourceCodeContext),slotSourceCode=generateSlotSourceCode(ctx.args,slotNames,sourceCodeContext),componentName=displayName||ctx.title.split("/").at(-1),templateCode=slotSourceCode?`<${componentName} ${props}> ${slotSourceCode} </${componentName}>`:`<${componentName} ${props} />`,variablesCode=Object.entries(sourceCodeContext.scriptVariables).map(([name,value])=>`const ${name} = ${value};`).join(`
|
|
2
|
+
|
|
3
|
+
`),importsCode=Object.entries(sourceCodeContext.imports).map(([packageName,imports])=>`import { ${Array.from(imports.values()).sort().join(", ")} } from "${packageName}";`).join(`
|
|
4
|
+
`),template=`<template>
|
|
5
|
+
${templateCode}
|
|
6
|
+
</template>`;return!importsCode&&!variablesCode?template:`<script lang="ts" setup>
|
|
7
|
+
${importsCode?`${importsCode}
|
|
8
|
+
|
|
9
|
+
${variablesCode}`:variablesCode}
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
${template}`},shouldSkipSourceCodeGeneration=context=>{let sourceParams=context?.parameters.docs?.source;if(sourceParams?.type===import_docs_tools2.SourceType.DYNAMIC)return!1;let isArgsStory=context?.parameters.__isArgsStory;return!(context?.viewMode==="docs")||!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools2.SourceType.CODE},parseDocgenInfo=component=>{if(!component||!("__docgenInfo"in component)||!component.__docgenInfo||typeof component.__docgenInfo!="object")return{displayName:component?.__name,eventNames:[],slotNames:[]};let docgenInfo=component.__docgenInfo,displayName="displayName"in docgenInfo&&typeof docgenInfo.displayName=="string"?docgenInfo.displayName:void 0,parseNames=key=>!(key in docgenInfo)||!Array.isArray(docgenInfo[key])?[]:docgenInfo[key].map(i=>i&&typeof i=="object"&&"name"in i?i.name:void 0).filter(i=>typeof i=="string");return{displayName:displayName||component.__name,slotNames:parseNames("slots").sort((a,b)=>a==="default"?-1:b==="default"?1:a.localeCompare(b)),eventNames:parseNames("events")}},generatePropsSourceCode=(args,slotNames,eventNames,ctx)=>{let properties=[];Object.entries(args).forEach(([propName,value])=>{if(!slotNames.includes(propName)&&value!=null)switch(typeof value){case"string":if(value==="")return;properties.push({name:propName,value:value.includes('"')?`'${value}'`:`"${value}"`,templateFn:(name,propValue)=>`${name}=${propValue}`});break;case"number":properties.push({name:propName,value:value.toString(),templateFn:(name,propValue)=>`:${name}="${propValue}"`});break;case"bigint":properties.push({name:propName,value:`BigInt(${value.toString()})`,templateFn:(name,propValue)=>`:${name}="${propValue}"`});break;case"boolean":properties.push({name:propName,value:value?"true":"false",templateFn:(name,propValue)=>propValue==="true"?name:`:${name}="false"`});break;case"symbol":properties.push({name:propName,value:`Symbol(${value.description?`'${value.description}'`:""})`,templateFn:(name,propValue)=>`:${name}="${propValue}"`});break;case"object":{properties.push({name:propName,value:formatObject(value),templateFn:void 0});break}case"function":break}}),properties.sort((a,b)=>a.name.localeCompare(b.name));let props=[];return properties.forEach(prop=>{let isVModel=eventNames.includes(`update:${prop.name}`);if(!isVModel&&prop.templateFn){props.push(prop.templateFn(prop.name,prop.value));return}let variableName=prop.name;if(variableName in ctx.scriptVariables){let index=1;do variableName=`${prop.name}${index}`,index++;while(variableName in ctx.scriptVariables)}if(!isVModel){ctx.scriptVariables[variableName]=prop.value,props.push(`:${prop.name}="${variableName}"`);return}ctx.scriptVariables[variableName]=`ref(${prop.value})`,ctx.imports.vue||(ctx.imports.vue=new Set),ctx.imports.vue.add("ref"),prop.name==="modelValue"?props.push(`v-model="${variableName}"`):props.push(`v-model:${prop.name}="${variableName}"`)}),props.join(" ")},generateSlotSourceCode=(args,slotNames,ctx)=>{let slotSourceCodes=[];return slotNames.forEach(slotName=>{let arg=args[slotName];if(!arg)return;let slotContent=generateSlotChildrenSourceCode([arg],ctx);if(!slotContent)return;let slotBindings=typeof arg=="function"?getFunctionParamNames(arg):[];slotName==="default"&&!slotBindings.length?slotSourceCodes.push(slotContent):slotSourceCodes.push(`<template ${slotBindingsToString(slotName,slotBindings)}>${slotContent}</template>`)}),slotSourceCodes.join(`
|
|
13
|
+
|
|
14
|
+
`)},generateSlotChildrenSourceCode=(children,ctx)=>{let slotChildrenSourceCodes=[],generateSingleChildSourceCode=child=>{if((0,import_vue.isVNode)(child))return generateVNodeSourceCode(child,ctx);switch(typeof child){case"string":case"number":case"boolean":return child.toString();case"object":return child===null?"":Array.isArray(child)?child.map(generateSingleChildSourceCode).filter(code=>code!=="").join(`
|
|
15
|
+
`):JSON.stringify(child);case"function":{let paramNames=getFunctionParamNames(child).filter(param=>!["{","}"].includes(param)),parameters2=paramNames.reduce((obj,param)=>(obj[param]=`{{ ${param} }}`,obj),{}),returnValue=child(parameters2),slotSourceCode=generateSlotChildrenSourceCode([returnValue],ctx);return paramNames.forEach(param=>{slotSourceCode=slotSourceCode.replaceAll(new RegExp(` (\\S+)="{{ ${param} }}"`,"g"),` :$1="${param}"`)}),slotSourceCode}case"bigint":return`{{ BigInt(${child.toString()}) }}`;default:return""}};return children.forEach(child=>{let sourceCode=generateSingleChildSourceCode(child);sourceCode!==""&&slotChildrenSourceCodes.push(sourceCode)}),slotChildrenSourceCodes.join(`
|
|
16
|
+
`)},generateVNodeSourceCode=(vnode,ctx)=>{let componentName=getVNodeName(vnode),childrenCode="";typeof vnode.children=="string"?childrenCode=vnode.children:Array.isArray(vnode.children)?childrenCode=generateSlotChildrenSourceCode(vnode.children,ctx):vnode.children&&(childrenCode=generateSlotSourceCode(vnode.children,Object.keys(vnode.children).filter(i=>i!=="$stable"),ctx));let props=vnode.props?generatePropsSourceCode(vnode.props,[],[],ctx):"";return childrenCode?`<${componentName}${props?` ${props}`:""}>${childrenCode}</${componentName}>`:`<${componentName}${props?` ${props}`:""} />`},getVNodeName=vnode=>{if(typeof vnode.type=="string")return vnode.type;if(typeof vnode.type=="object"){if("name"in vnode.type&&vnode.type.name)return vnode.type.name;if("__name"in vnode.type&&vnode.type.__name)return vnode.type.__name}return"component"},getFunctionParamNames=func=>{let STRIP_COMMENTS=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,ARGUMENT_NAMES=/([^\s,]+)/g,fnStr=func.toString().replace(STRIP_COMMENTS,""),result=fnStr.slice(fnStr.indexOf("(")+1,fnStr.indexOf(")")).match(ARGUMENT_NAMES);return result?result.flatMap(param=>{if(["{","}"].includes(param))return param;let nonMinifiedName=param.split(":")[0].trim();return nonMinifiedName.startsWith("{")?["{",nonMinifiedName.substring(1)]:param.endsWith("}")&&!nonMinifiedName.endsWith("}")?[nonMinifiedName,"}"]:nonMinifiedName}):[]},slotBindingsToString=(slotName,params)=>params.length?params.length===1?`#${slotName}="${params[0]}"`:`#${slotName}="{ ${params.filter(i=>!["{","}"].includes(i)).join(", ")} }"`:`#${slotName}`,formatObject=obj=>Object.values(obj).every(value=>value==null||typeof value!="object")?JSON.stringify(obj):JSON.stringify(obj,null,2);var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription:import_docs_tools3.extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[import_docs_tools3.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});
|
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
import './chunk-CEH6MNVV.mjs';
|
|
2
2
|
import { extractComponentDescription, enhanceArgTypes, hasDocgen, extractComponentProps, convert, SNIPPET_RENDERED, SourceType } from 'storybook/internal/docs-tools';
|
|
3
3
|
import { addons } from 'storybook/internal/preview-api';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
`)
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
import { watch, isVNode } from 'vue';
|
|
5
|
+
|
|
6
|
+
var ARG_TYPE_SECTIONS=["props","events","slots","exposed","expose"],extractArgTypes=component=>{if(!hasDocgen(component))return null;let usedDocgenPlugin="exposed"in component.__docgenInfo?"vue-component-meta":"vue-docgen-api",argTypes={};return ARG_TYPE_SECTIONS.forEach(section=>{extractComponentProps(component,section).forEach(extractedProp=>{let argType;if(usedDocgenPlugin==="vue-docgen-api"){let docgenInfo=extractedProp.docgenInfo;argType=extractFromVueDocgenApi(docgenInfo,section,extractedProp);}else {let docgenInfo=extractedProp.docgenInfo;argType=extractFromVueComponentMeta(docgenInfo,section);}if(!argType||argTypes[argType.name])return;["events","expose","exposed"].includes(section)&&(argType.control={disable:!0}),argTypes[argType.name]=argType;});}),argTypes},extractFromVueDocgenApi=(docgenInfo,section,extractedProp)=>{let type,sbType;if(section==="events"&&(type=docgenInfo.type?.names.join(),sbType={name:"other",value:type??"",required:!1}),section==="slots"){let slotBindings=docgenInfo.bindings?.filter(binding=>!!binding.name).map(binding=>`${binding.name}: ${binding.type?.name??"unknown"}`).join("; ");type=slotBindings?`{ ${slotBindings} }`:void 0,sbType={name:"other",value:type??"",required:!1};}if(section==="props"){let propInfo=docgenInfo;if(type=propInfo.type?.name,sbType=extractedProp?convert(extractedProp.docgenInfo):{name:"other",value:type},propInfo.type&&"elements"in propInfo.type&&Array.isArray(propInfo.type.elements)&&propInfo.type.elements.length>0){let elements=propInfo.type.elements.map(i=>i.name);type==="Array"&&(type=`${elements.length===1?elements[0]:`(${elements.join(" | ")})`}[]`),type==="union"?type=elements.join(" | "):type==="intersection"&&(type=elements.join(" & "));}}let required="required"in docgenInfo?docgenInfo.required??!1:!1;return {name:docgenInfo.name,description:docgenInfo.description,type:sbType?{...sbType,required}:{name:"other",value:type??""},table:{type:type?{summary:type}:void 0,defaultValue:extractedProp?.propDef.defaultValue??void 0,jsDocTags:extractedProp?.propDef.jsDocTags,category:section}}},extractFromVueComponentMeta=(docgenInfo,section)=>{if("global"in docgenInfo&&docgenInfo.global)return;let tableType={summary:docgenInfo.type.replace(" | undefined","")};if(section==="props"){let propInfo=docgenInfo,defaultValue=propInfo.default?{summary:propInfo.default}:void 0;return {name:propInfo.name,description:formatDescriptionWithTags(propInfo.description,propInfo.tags),defaultValue,type:convertVueComponentMetaProp(propInfo),table:{type:tableType,defaultValue,category:section}}}else return {name:docgenInfo.name,description:"description"in docgenInfo?docgenInfo.description:"",type:{name:"other",value:docgenInfo.type},table:{type:tableType,category:section}}},convertVueComponentMetaProp=propInfo=>{let schema=propInfo.schema,required=propInfo.required,fallbackSbType={name:"other",value:propInfo.type,required},KNOWN_SCHEMAS=["string","number","function","boolean","symbol"];if(typeof schema=="string")return KNOWN_SCHEMAS.includes(schema)?{name:schema,required}:fallbackSbType;switch(schema.kind){case"enum":{let definedSchemas=schema.schema?.filter(item=>item!=="undefined")??[];return isBooleanSchema(definedSchemas)?{name:"boolean",required}:isLiteralUnionSchema(definedSchemas)||isEnumSchema(definedSchemas)?{name:"enum",value:definedSchemas.map(literal=>literal.replace(/"/g,"")),required}:definedSchemas.length===1?convertVueComponentMetaProp({schema:definedSchemas[0],type:propInfo.type,required}):(definedSchemas.length>2&&definedSchemas.includes("true")&&definedSchemas.includes("false")&&(definedSchemas=definedSchemas.filter(i=>i!=="true"&&i!=="false"),definedSchemas.push("boolean")),{name:"union",value:definedSchemas.map(i=>convertVueComponentMetaProp(typeof i=="object"?{schema:i,type:i.type,required:!1}:{schema:i,type:i,required:!1})),required})}case"array":{let definedSchemas=schema.schema?.filter(item=>item!=="undefined")??[];return definedSchemas.length===0?fallbackSbType:definedSchemas.length===1?{name:"array",value:convertVueComponentMetaProp({schema:definedSchemas[0],type:propInfo.type,required:!1}),required}:{name:"union",value:definedSchemas.map(i=>convertVueComponentMetaProp(typeof i=="object"?{schema:i,type:i.type,required:!1}:{schema:i,type:i,required:!1})),required}}case"object":return {name:"object",value:{},required};default:return fallbackSbType}},formatDescriptionWithTags=(description,tags)=>!tags?.length||!description?description??"":`${tags.map(tag=>`@${tag.name}: ${tag.text}`).join("<br>")}<br><br>${description}`,isLiteralUnionSchema=schemas=>schemas.every(schema=>typeof schema=="string"&&schema.startsWith('"')&&schema.endsWith('"')),isEnumSchema=schemas=>schemas.every(schema=>typeof schema=="string"&&schema.includes(".")),isBooleanSchema=schemas=>schemas.length===2&&schemas.includes("true")&&schemas.includes("false");var sourceDecorator=(storyFn,ctx)=>{let story=storyFn();if(shouldSkipSourceCodeGeneration(ctx))return story;let channel=addons.getChannel();return watch(()=>ctx.args,()=>{let sourceCode=generateSourceCode(ctx);channel.emit(SNIPPET_RENDERED,{id:ctx.id,args:ctx.args,source:sourceCode,format:"vue"});},{immediate:!0,deep:!0}),story},generateSourceCode=ctx=>{let sourceCodeContext={imports:{},scriptVariables:{}},{displayName,slotNames,eventNames}=parseDocgenInfo(ctx.component),props=generatePropsSourceCode(ctx.args,slotNames,eventNames,sourceCodeContext),slotSourceCode=generateSlotSourceCode(ctx.args,slotNames,sourceCodeContext),componentName=displayName||ctx.title.split("/").at(-1),templateCode=slotSourceCode?`<${componentName} ${props}> ${slotSourceCode} </${componentName}>`:`<${componentName} ${props} />`,variablesCode=Object.entries(sourceCodeContext.scriptVariables).map(([name,value])=>`const ${name} = ${value};`).join(`
|
|
7
|
+
|
|
8
|
+
`),importsCode=Object.entries(sourceCodeContext.imports).map(([packageName,imports])=>`import { ${Array.from(imports.values()).sort().join(", ")} } from "${packageName}";`).join(`
|
|
9
|
+
`),template=`<template>
|
|
10
|
+
${templateCode}
|
|
11
|
+
</template>`;return !importsCode&&!variablesCode?template:`<script lang="ts" setup>
|
|
12
|
+
${importsCode?`${importsCode}
|
|
13
|
+
|
|
14
|
+
${variablesCode}`:variablesCode}
|
|
15
|
+
<\/script>
|
|
16
|
+
|
|
17
|
+
${template}`},shouldSkipSourceCodeGeneration=context=>{let sourceParams=context?.parameters.docs?.source;if(sourceParams?.type===SourceType.DYNAMIC)return !1;let isArgsStory=context?.parameters.__isArgsStory;return !(context?.viewMode==="docs")||!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE},parseDocgenInfo=component=>{if(!component||!("__docgenInfo"in component)||!component.__docgenInfo||typeof component.__docgenInfo!="object")return {displayName:component?.__name,eventNames:[],slotNames:[]};let docgenInfo=component.__docgenInfo,displayName="displayName"in docgenInfo&&typeof docgenInfo.displayName=="string"?docgenInfo.displayName:void 0,parseNames=key=>!(key in docgenInfo)||!Array.isArray(docgenInfo[key])?[]:docgenInfo[key].map(i=>i&&typeof i=="object"&&"name"in i?i.name:void 0).filter(i=>typeof i=="string");return {displayName:displayName||component.__name,slotNames:parseNames("slots").sort((a,b)=>a==="default"?-1:b==="default"?1:a.localeCompare(b)),eventNames:parseNames("events")}},generatePropsSourceCode=(args,slotNames,eventNames,ctx)=>{let properties=[];Object.entries(args).forEach(([propName,value])=>{if(!slotNames.includes(propName)&&value!=null)switch(typeof value){case"string":if(value==="")return;properties.push({name:propName,value:value.includes('"')?`'${value}'`:`"${value}"`,templateFn:(name,propValue)=>`${name}=${propValue}`});break;case"number":properties.push({name:propName,value:value.toString(),templateFn:(name,propValue)=>`:${name}="${propValue}"`});break;case"bigint":properties.push({name:propName,value:`BigInt(${value.toString()})`,templateFn:(name,propValue)=>`:${name}="${propValue}"`});break;case"boolean":properties.push({name:propName,value:value?"true":"false",templateFn:(name,propValue)=>propValue==="true"?name:`:${name}="false"`});break;case"symbol":properties.push({name:propName,value:`Symbol(${value.description?`'${value.description}'`:""})`,templateFn:(name,propValue)=>`:${name}="${propValue}"`});break;case"object":{properties.push({name:propName,value:formatObject(value),templateFn:void 0});break}}}),properties.sort((a,b)=>a.name.localeCompare(b.name));let props=[];return properties.forEach(prop=>{let isVModel=eventNames.includes(`update:${prop.name}`);if(!isVModel&&prop.templateFn){props.push(prop.templateFn(prop.name,prop.value));return}let variableName=prop.name;if(variableName in ctx.scriptVariables){let index=1;do variableName=`${prop.name}${index}`,index++;while(variableName in ctx.scriptVariables)}if(!isVModel){ctx.scriptVariables[variableName]=prop.value,props.push(`:${prop.name}="${variableName}"`);return}ctx.scriptVariables[variableName]=`ref(${prop.value})`,ctx.imports.vue||(ctx.imports.vue=new Set),ctx.imports.vue.add("ref"),prop.name==="modelValue"?props.push(`v-model="${variableName}"`):props.push(`v-model:${prop.name}="${variableName}"`);}),props.join(" ")},generateSlotSourceCode=(args,slotNames,ctx)=>{let slotSourceCodes=[];return slotNames.forEach(slotName=>{let arg=args[slotName];if(!arg)return;let slotContent=generateSlotChildrenSourceCode([arg],ctx);if(!slotContent)return;let slotBindings=typeof arg=="function"?getFunctionParamNames(arg):[];slotName==="default"&&!slotBindings.length?slotSourceCodes.push(slotContent):slotSourceCodes.push(`<template ${slotBindingsToString(slotName,slotBindings)}>${slotContent}</template>`);}),slotSourceCodes.join(`
|
|
18
|
+
|
|
19
|
+
`)},generateSlotChildrenSourceCode=(children,ctx)=>{let slotChildrenSourceCodes=[],generateSingleChildSourceCode=child=>{if(isVNode(child))return generateVNodeSourceCode(child,ctx);switch(typeof child){case"string":case"number":case"boolean":return child.toString();case"object":return child===null?"":Array.isArray(child)?child.map(generateSingleChildSourceCode).filter(code=>code!=="").join(`
|
|
20
|
+
`):JSON.stringify(child);case"function":{let paramNames=getFunctionParamNames(child).filter(param=>!["{","}"].includes(param)),parameters2=paramNames.reduce((obj,param)=>(obj[param]=`{{ ${param} }}`,obj),{}),returnValue=child(parameters2),slotSourceCode=generateSlotChildrenSourceCode([returnValue],ctx);return paramNames.forEach(param=>{slotSourceCode=slotSourceCode.replaceAll(new RegExp(` (\\S+)="{{ ${param} }}"`,"g"),` :$1="${param}"`);}),slotSourceCode}case"bigint":return `{{ BigInt(${child.toString()}) }}`;default:return ""}};return children.forEach(child=>{let sourceCode=generateSingleChildSourceCode(child);sourceCode!==""&&slotChildrenSourceCodes.push(sourceCode);}),slotChildrenSourceCodes.join(`
|
|
21
|
+
`)},generateVNodeSourceCode=(vnode,ctx)=>{let componentName=getVNodeName(vnode),childrenCode="";typeof vnode.children=="string"?childrenCode=vnode.children:Array.isArray(vnode.children)?childrenCode=generateSlotChildrenSourceCode(vnode.children,ctx):vnode.children&&(childrenCode=generateSlotSourceCode(vnode.children,Object.keys(vnode.children).filter(i=>i!=="$stable"),ctx));let props=vnode.props?generatePropsSourceCode(vnode.props,[],[],ctx):"";return childrenCode?`<${componentName}${props?` ${props}`:""}>${childrenCode}</${componentName}>`:`<${componentName}${props?` ${props}`:""} />`},getVNodeName=vnode=>{if(typeof vnode.type=="string")return vnode.type;if(typeof vnode.type=="object"){if("name"in vnode.type&&vnode.type.name)return vnode.type.name;if("__name"in vnode.type&&vnode.type.__name)return vnode.type.__name}return "component"},getFunctionParamNames=func=>{let STRIP_COMMENTS=/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm,ARGUMENT_NAMES=/([^\s,]+)/g,fnStr=func.toString().replace(STRIP_COMMENTS,""),result=fnStr.slice(fnStr.indexOf("(")+1,fnStr.indexOf(")")).match(ARGUMENT_NAMES);return result?result.flatMap(param=>{if(["{","}"].includes(param))return param;let nonMinifiedName=param.split(":")[0].trim();return nonMinifiedName.startsWith("{")?["{",nonMinifiedName.substring(1)]:param.endsWith("}")&&!nonMinifiedName.endsWith("}")?[nonMinifiedName,"}"]:nonMinifiedName}):[]},slotBindingsToString=(slotName,params)=>params.length?params.length===1?`#${slotName}="${params[0]}"`:`#${slotName}="{ ${params.filter(i=>!["{","}"].includes(i)).join(", ")} }"`:`#${slotName}`,formatObject=obj=>Object.values(obj).every(value=>value==null||typeof value!="object")?JSON.stringify(obj):JSON.stringify(obj,null,2);var parameters={docs:{story:{inline:!0},extractArgTypes,extractComponentDescription}},decorators=[sourceDecorator],argTypesEnhancers=[enhanceArgTypes];
|
|
13
22
|
|
|
14
23
|
export { argTypesEnhancers, decorators, parameters };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,43 +1,12 @@
|
|
|
1
1
|
export { s as setup } from './render-866998d8.js';
|
|
2
|
-
import {
|
|
2
|
+
import { M as Meta } from './public-types-bcb3e860.js';
|
|
3
|
+
export { C as ComponentPropsAndSlots, D as Decorator, L as Loader, P as Preview, b as StoryContext, S as StoryFn, a as StoryObj } from './public-types-bcb3e860.js';
|
|
4
|
+
import { NamedOrDefaultProjectAnnotations, ProjectAnnotations, Args, StoryAnnotationsOrFn, ComposedStoryFn, Store_CSFExports, StoriesWithPartialProps } from 'storybook/internal/types';
|
|
3
5
|
export { ArgTypes, Args, Parameters, StrictArgs } from 'storybook/internal/types';
|
|
4
|
-
import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
|
|
5
|
-
import { FunctionalComponent, VNodeChild } from 'vue';
|
|
6
|
-
import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
|
|
7
6
|
import { V as VueRenderer } from './types-1ede6954.js';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*
|
|
12
|
-
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
|
|
13
|
-
*/
|
|
14
|
-
type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
|
|
15
|
-
/**
|
|
16
|
-
* Story function that represents a CSFv2 component example.
|
|
17
|
-
*
|
|
18
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
19
|
-
*/
|
|
20
|
-
type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
|
|
21
|
-
/**
|
|
22
|
-
* Story object that represents a CSFv3 component example.
|
|
23
|
-
*
|
|
24
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
25
|
-
*/
|
|
26
|
-
type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
|
|
27
|
-
render?: ArgsStoryFn<VueRenderer, any>;
|
|
28
|
-
component?: infer Component;
|
|
29
|
-
args?: infer DefaultArgs;
|
|
30
|
-
} ? Simplify<ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
|
|
31
|
-
type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;
|
|
32
|
-
type AllowNonFunctionSlots<Slots> = {
|
|
33
|
-
[K in keyof Slots]: Slots[K] | VNodeChild;
|
|
34
|
-
};
|
|
35
|
-
type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
|
|
36
|
-
type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs extends FunctionalComponent<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs;
|
|
37
|
-
type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
|
|
38
|
-
type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
|
|
39
|
-
type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
|
|
40
|
-
type Preview = ProjectAnnotations<VueRenderer>;
|
|
7
|
+
import 'vue';
|
|
8
|
+
import 'type-fest';
|
|
9
|
+
import 'vue-component-type-helpers';
|
|
41
10
|
|
|
42
11
|
type JSXAble<TElement> = TElement & {
|
|
43
12
|
new (...args: any[]): any;
|
|
@@ -118,4 +87,4 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
|
|
|
118
87
|
*/
|
|
119
88
|
declare function composeStories<TModule extends Store_CSFExports<VueRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<VueRenderer>): MapToJSXAble<Omit<StoriesWithPartialProps<VueRenderer, TModule>, keyof Store_CSFExports>>;
|
|
120
89
|
|
|
121
|
-
export {
|
|
90
|
+
export { Meta, VueRenderer, composeStories, composeStory, setProjectAnnotations, vueProjectAnnotations };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations,setup:()=>setup,vueProjectAnnotations:()=>vueProjectAnnotations});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var import_vue=require("vue"),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()=>(0,import_vue.h)(Component,props,getSlots(props,context))},setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)},runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)))},map=new Map;async 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=(0,import_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.h)(rootElement)}});return vueApp.config.errorHandler=(e,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):showException(e)},await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.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)}var import_preview_api2=require("storybook/internal/preview-api"),import_preview_errors=require("storybook/internal/preview-errors"),import_vue4=require("vue");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var import_vue2=require("vue"),import_preview_api=require("storybook/internal/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:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue2.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue2.h)(story))},context=>prepare(storyFn(context)))}var import_vue3=require("vue"),mount=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>()=>(0,import_vue3.h)(Component,options?.props,options?.slots)),await context.renderToCanvas(),context.canvas);var parameters={renderer:"vue3"};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}var vueProjectAnnotations={...entry_preview_exports,renderToCanvas:(
|
|
1
|
+
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,setProjectAnnotations:()=>setProjectAnnotations,setup:()=>setup,vueProjectAnnotations:()=>vueProjectAnnotations});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;var import_vue=require("vue"),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()=>(0,import_vue.h)(Component,props,getSlots(props,context))},setup=fn=>{globalThis.PLUGINS_SETUP_FUNCTIONS??=new Set,globalThis.PLUGINS_SETUP_FUNCTIONS.add(fn)},runSetupFunctions=async(app,storyContext)=>{globalThis&&globalThis.PLUGINS_SETUP_FUNCTIONS&&await Promise.all([...globalThis.PLUGINS_SETUP_FUNCTIONS].map(fn=>fn(app,storyContext)))},map=new Map;async 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=(0,import_vue.createApp)({setup(){storyContext.args=(0,import_vue.reactive)(storyContext.args);let rootElement=storyFn(),args=getArgs(rootElement,storyContext),appState={vueApp,reactiveArgs:(0,import_vue.reactive)(args)};return map.set(canvasElement,appState),()=>(0,import_vue.h)(rootElement)}});return vueApp.config.errorHandler=(e,instance,info)=>{window.__STORYBOOK_PREVIEW__?.storyRenders.some(renderer=>renderer.id===id&&renderer.phase==="playing")?setTimeout(()=>{throw e},0):showException(e)},await runSetupFunctions(vueApp,storyContext),vueApp.mount(canvasElement),showMain(),()=>{teardown(vueApp,canvasElement)}}function getSlots(props,context){let{argTypes}=context,slots=Object.entries(props).filter(([key])=>argTypes[key]?.table?.category==="slots").map(([key,value])=>[key,typeof value=="function"?value:()=>value]);return Object.fromEntries(slots)}function getArgs(element,storyContext){return element.props&&(0,import_vue.isVNode)(element)?element.props:storyContext.args}function updateArgs(reactiveArgs,nextArgs){if(Object.keys(nextArgs).length===0)return;let currentArgs=(0,import_vue.isReactive)(reactiveArgs)?reactiveArgs:(0,import_vue.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)}var import_preview_api2=require("storybook/internal/preview-api"),import_preview_errors=require("storybook/internal/preview-errors"),import_vue4=require("vue");var entry_preview_exports={};__export(entry_preview_exports,{applyDecorators:()=>decorateStory,mount:()=>mount,parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var import_vue2=require("vue"),import_preview_api=require("storybook/internal/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:typeof story=="function"?story:innerStory?{...normalizeFunctionalComponent(story),components:{...story.components||{},story:innerStory}}:{render(){return(0,import_vue2.h)(story)}}}function decorateStory(storyFn,decorators){return decorators.reduce((decorated,decorator)=>context=>{let story,decoratedStory=decorator(update=>{let sanitizedUpdate=(0,import_preview_api.sanitizeStoryContextUpdate)(update);return update&&(sanitizedUpdate.args=Object.assign(context.args,sanitizedUpdate.args)),story=decorated({...context,...sanitizedUpdate}),story},context);return story||(story=decorated(context)),decoratedStory===story?story:prepare(decoratedStory,()=>(0,import_vue2.h)(story))},context=>prepare(storyFn(context)))}var import_vue3=require("vue"),mount=context=>async(Component,options)=>(Component&&(context.originalStoryFn=()=>()=>(0,import_vue3.h)(Component,options?.props,options?.slots)),await context.renderToCanvas(),context.canvas);var parameters={renderer:"vue3"};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}var vueProjectAnnotations={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)throw new import_preview_errors.TestingLibraryMustBeConfiguredError;let{storyFn,storyContext:{testingLibraryRender:render2}}=renderContext,{unmount}=render2(storyFn(),{container:canvasElement});return unmount}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=(0,import_preview_api2.composeStory)(story,componentAnnotations,projectAnnotations,vueProjectAnnotations,exportsName),renderable=(...args)=>(0,import_vue4.h)(composedStory(...args));return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api2.composeStories)(csfExports,projectAnnotations,composeStory)}try{module?.hot?.decline&&module.hot.decline()}catch{}0&&(module.exports={composeStories,composeStory,setProjectAnnotations,setup,vueProjectAnnotations});
|
package/dist/index.mjs
CHANGED
|
@@ -6,6 +6,6 @@ import { setProjectAnnotations as setProjectAnnotations$1, composeStory as compo
|
|
|
6
6
|
import { TestingLibraryMustBeConfiguredError } from 'storybook/internal/preview-errors';
|
|
7
7
|
import { h } from 'vue';
|
|
8
8
|
|
|
9
|
-
var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;function setProjectAnnotations(projectAnnotations){return setProjectAnnotations$1(projectAnnotations)}var vueProjectAnnotations={...entry_preview_exports,renderToCanvas:(
|
|
9
|
+
var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="vue3";globalWindow.PLUGINS_SETUP_FUNCTIONS||=new Set;function setProjectAnnotations(projectAnnotations){return setProjectAnnotations$1(projectAnnotations)}var vueProjectAnnotations={...entry_preview_exports,renderToCanvas:(renderContext,canvasElement)=>{if(renderContext.storyContext.testingLibraryRender==null)throw new TestingLibraryMustBeConfiguredError;let{storyFn,storyContext:{testingLibraryRender:render}}=renderContext,{unmount}=render(storyFn(),{container:canvasElement});return unmount}};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){let composedStory=composeStory$1(story,componentAnnotations,projectAnnotations,vueProjectAnnotations,exportsName),renderable=(...args)=>h(composedStory(...args));return Object.assign(renderable,composedStory),renderable}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}try{module?.hot?.decline&&module.hot.decline();}catch{}
|
|
10
10
|
|
|
11
11
|
export { composeStories, composeStory, setProjectAnnotations, vueProjectAnnotations };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from 'storybook/internal/types';
|
|
2
|
+
import { Simplify, SetOptional, Constructor, RemoveIndexSignature } from 'type-fest';
|
|
3
|
+
import { FunctionalComponent, VNodeChild } from 'vue';
|
|
4
|
+
import { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
|
|
5
|
+
import { V as VueRenderer } from './types-1ede6954.js';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Metadata to configure the stories for a component.
|
|
9
|
+
*
|
|
10
|
+
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
|
|
11
|
+
*/
|
|
12
|
+
type Meta<TCmpOrArgs = Args> = ComponentAnnotations<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
|
|
13
|
+
/**
|
|
14
|
+
* Story function that represents a CSFv2 component example.
|
|
15
|
+
*
|
|
16
|
+
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
17
|
+
*/
|
|
18
|
+
type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<VueRenderer, ComponentPropsOrProps<TCmpOrArgs>>;
|
|
19
|
+
/**
|
|
20
|
+
* Story object that represents a CSFv3 component example.
|
|
21
|
+
*
|
|
22
|
+
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
23
|
+
*/
|
|
24
|
+
type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
|
|
25
|
+
render?: ArgsStoryFn<VueRenderer, any>;
|
|
26
|
+
component?: infer Component;
|
|
27
|
+
args?: infer DefaultArgs;
|
|
28
|
+
} ? Simplify<ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<VueRenderer, TArgs, SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>> : never : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
|
|
29
|
+
type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;
|
|
30
|
+
type AllowNonFunctionSlots<Slots> = {
|
|
31
|
+
[K in keyof Slots]: Slots[K] | VNodeChild;
|
|
32
|
+
};
|
|
33
|
+
type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
|
|
34
|
+
type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs extends FunctionalComponent<any> ? ComponentPropsAndSlots<TCmpOrArgs> : TCmpOrArgs;
|
|
35
|
+
type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
|
|
36
|
+
type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
|
|
37
|
+
type StoryContext<TArgs = StrictArgs> = StoryContext$1<VueRenderer, TArgs>;
|
|
38
|
+
type Preview = ProjectAnnotations<VueRenderer>;
|
|
39
|
+
|
|
40
|
+
export { ComponentPropsAndSlots as C, Decorator as D, Loader as L, Meta as M, Preview as P, StoryFn as S, StoryObj as a, StoryContext as b };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/vue3",
|
|
3
|
-
"version": "8.3.0-alpha.
|
|
3
|
+
"version": "8.3.0-alpha.4",
|
|
4
4
|
"description": "Storybook Vue 3 renderer",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@storybook/components": "^8.3.0-alpha.
|
|
66
|
+
"@storybook/components": "^8.3.0-alpha.4",
|
|
67
67
|
"@storybook/global": "^5.0.0",
|
|
68
|
-
"@storybook/manager-api": "^8.3.0-alpha.
|
|
69
|
-
"@storybook/preview-api": "^8.3.0-alpha.
|
|
70
|
-
"@storybook/theming": "^8.3.0-alpha.
|
|
68
|
+
"@storybook/manager-api": "^8.3.0-alpha.4",
|
|
69
|
+
"@storybook/preview-api": "^8.3.0-alpha.4",
|
|
70
|
+
"@storybook/theming": "^8.3.0-alpha.4",
|
|
71
71
|
"@vue/compiler-core": "^3.0.0",
|
|
72
72
|
"lodash": "^4.17.21",
|
|
73
73
|
"ts-dedent": "^2.0.0",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"vue-tsc": "latest"
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
|
-
"storybook": "^8.3.0-alpha.
|
|
87
|
+
"storybook": "^8.3.0-alpha.4",
|
|
88
88
|
"vue": "^3.0.0"
|
|
89
89
|
},
|
|
90
90
|
"engines": {
|