Storybook: Vue slots after v-if are not showing in props table of Addon Docs.

Created on 30 Jul 2020 · 6Comments · Source: storybookjs/storybook

Slots after v-if are not shown in props table of the addon "Docs".

This example will produce a table props without the slots adolescent neither adult.

<slot v-if="age<=12" name="child">
  <!-- something for children -->
</slot>
<slot v-else-if="age<=19" name="adolescent">
  <!-- something for adolescents -->
</slot>
<slot v-else name="adult">
  <!-- something for adults -->
</slot>

My real code is the following:

<!--
  @slot Dynamic slot for individual body cell. X is the column and Y is the row.
  <span class="d-block mt-3">Example: <pre class="mt-2"><code>body-x0y1</code></pre> will set the slot
  for the cell in the column at index 0 and the row at index 1</span>
  -->
<slot
  v-if="$scopedSlots[`body-x${columnIndex}y${rowIndex}`]"
  :name="`body-x${columnIndex}y${rowIndex}`"
  :cell-data="cell">
  {{ cell }}
</slot>

<!--
  @slot Dynamic slot for all cells in a column of the table body.
  <span class="d-block mt-3">Example: <pre class="mt-2"><code>body-column-0</code></pre> will set
  all the cells of the column with index 0</span>
  -->
<slot
  v-else
  :name="`body-column-${columnIndex}`"
  :cell-data="cell">
  {{ cell }}
</slot>

The documentation props result:

Screen Shot 2020-07-29 at 22 10 55

As you can see there isn't the slot description for body-column-${columnIndex}

Is this a bug or am I missing something?

docs vue props inactive question / support

Source

ecarrera

All 6 comments

@elevatebart know anything about this?

shilman on 31 Jul 2020

Hello @ecarrera

Thank you for reporting.
This is indeed a known issue.

https://github.com/vue-styleguidist/vue-styleguidist/issues/430

And ultimately this

https://github.com/vuejs/vue/pull/10286

In other words, the parser from vue 2 removes all comments between if and else.
It makes them disappear from the parsed documentation.

I proposed a fix but it seems long forgotten now.

I will try and upgrade vue-docgen-api to the v3 compiler/parser to see if we can do better.

elevatebart on 31 Jul 2020

❤1

Hi @elevatebart, thanks 👍🏻 Maybe it will work for Vue 3?

ecarrera on 31 Jul 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!