shilman
commented
3 years ago @pocka can you please take a look?
Open Eternal-Rise opened 3 years ago
shilman
commented
3 years ago @pocka can you please take a look?
pocka
commented
3 years ago Speaking of the first one, a wrapping <template>, Docs Addon can't show it because there is no way to grab it at runtime AFAIK.
I'm not sure the rest (<template>s for named slots), will take a look at Vue internal so we can grab and display it.
pocka
commented
3 years ago The Dynamic Source Rendering feature does not support named slots, and it can't be implemented for now.
The problem is, named slots do not exist in a VNode tree: we need to create it by calling an instance method ($scopedSlots[name]) with slot props, but we can't because we don't know the props from outside.
To accomplish this feature request, we need to re-implement the Dynamic Source Rendering feature in a whole different approach... I'm not sure how long it takes and how difficult it is.
smth
commented
3 years ago In the meantime, is there any way to at least prevent the <template> tag from being removed from the Docs code (to contain something like <template v-slot:name>Put your content here</template>)? Some way to escape it?
Failing that, is it possible to disable the code section for these problematic components?
shilman
commented
3 years ago @smth to force no source code to display, set the docs.source parameter:
docs: { source: { type: 'code', code: null } },cc @jonniebigodes
smth
commented
3 years ago @shilman for me, doing that leaves the code section in place, but replaces the contents with:
( args, { argTypes, }, ) => ( {
props: Object.keys( argTypes, ),
components: { Component, },
template: '<Component v-bind="$props">Primary content<template v-slot:secondary>Secondary content</template></Component >',
} )how about:
docs: { source: { type: 'code', code: '' } },Same result @shilman
shilman
commented
3 years ago @smth what about
// .storybook/main.js
module.exports = {
addons: [
{
name: '@storybook/addon-docs',
options: {
sourceLoaderOptions: null,
},
},
],
};@shilman that appears to have no effect. I'm a bit concerned this is going off topic. If there is in theory a way to disable the code section, but it's not clear how, I guess that should be a new ticket.
shilman
commented
3 years ago The first solution I posted is working as expected in the monorepo. If it's not working for you, please post an issue with a reproduction
saurabh-sali-hulkapps
commented
3 years ago Describe the bug cut out from code preview fully cutted with slot data, descendents
Expected behavior I expect to see the full code template in the preview
Code snippets
// ~/BaseTable.stories.js export const CustomRender = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { BaseButton, BaseTable }, methods: { formatPrice, }, template: ` <BaseTable v-bind="$props"> <template> <div>Template??</div> </template> <template v-slot:price="{ value }"> {{ formatPrice(value) }} </template> <template v-slot:actions="{ row }"> <BaseButton secondary small error icon="trash" /> </template> </BaseTable> `, }); CustomRender.args = { ...Base.args, columns: [ { dataPath: 'name', title: 'Название' }, { dataPath: 'sku', title: 'Артикул', scopedSlots: { customRender: 'sku' } }, { dataPath: 'price', title: 'Цена', scopedSlots: { customRender: 'price' } }, { dataPath: '', scopedSlots: { customRender: 'actions' } }, ], };code preview output
<template> <BaseTable :columns='...' :dataSource='...' defaultValue="—" rowKey="model_id" > <div>Template??</div> </BaseTable> </template>System Environment Info:
System: OS: Windows 10 10.0.19042 CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx Binaries: Node: 13.14.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: hromium (88.0.705.81) npmPackages: @storybook/addon-actions: ^6.1.17 => 6.1.17 @storybook/addon-essentials: ^6.1.20 => 6.1.20 @storybook/addon-links: ^6.1.17 => 6.1.17 @storybook/vue: ^6.1.20 => 6.1.20
@shilman Is this bug solved?
alexmccabe
commented
3 years ago I'm still having this issue and I think it's a breaking issue for us. Named slots is a major Vue feature, and has been for a long time. Not having them rendered in the source code kinda defeats the purpose of educating the rest of the team how a component behaves and can be configured.
There could be scope for screwing around with a custom renderer in the preview.js but, that seems like a whole lot of work.
Really is a shame that it doesn't work, we use component composition heavily and would love to be able to use this awesome tool to show off our components.
braddialpad
commented
2 years ago This is a pretty big issue for us also, we have lots of variant examples in our component library that devs would use to copy / verify code from. It's really confusing for them when they want to copy some code with a named slot and the code just magically isn't there. Overriding everything with a manual code example is not very maintainable.
We found a partial workaround, if you use the deprecated slot="" syntax in the examples it will be displayed. However as soon as you make it a scoped slot it disappears so it doesn't work in all cases.
treesen
commented
2 years ago any update?
supuwoerc
commented
1 year ago the problem remains😂😂😂
supuwoerc
commented
1 year ago 问题依然存在😂😂😂
Temporarily hidden the code, fortunately we are in the migration found that the new ui has used react, vue2 is a bit of a headache, vue3 and react problems are few ~
parameters: {
docs: { source: { type: "code", code: null } },
},
Describe the bug
cut out from code preview fully cutted with slot data, descendents **Expected behavior** I expect to see the full code template in the preview **Code snippets** ``` // ~/BaseTable.stories.js export const CustomRender = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { BaseButton, BaseTable }, methods: { formatPrice, }, template: `