Support for demoing props and multiple components working together in <docs> tags.

[grahamsutton]

Hi there.

Currently, I am trying to create a demo for my <modal> component, however, I only really demonstrate how it works unless I use it in conjunction with another element like a <button> to launch the modal. Unfortunately, I don't believe VDS supports the ability to manage a "parent" state in the <docs> tags of a component. Without this behavior, my demo looks empty and there is essentially nothing to interact with to demonstrate how the modal works.

For example, here is what I wish I could do, but cannot (I put a \ because of the GitHub markdown, but it's not in my actual code):

<docs>
  \```jsx
    <div>
      <modal :show="show">
        <span slot="header">Modal Title</span>
      </modal>
      <button @click="show = true" class="button button-primary">Launch Modal</button>
    </div>
   \```

  <script>
    export default {
      data () {
        return {
          show: false
        }
      }
    }
  </script>
</docs>

however, this always ends up with this error:

[Vue warn]: Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Anonymous>
       <Root>

Reasons I think this should be supported:

1. So that we can clearly be able to demonstrate how components whose visibility depends on a parent component is intended to work.
2. Being able to display how external state in general should work with the component, for example, demonstrating how event callbacks could be handled.
3. The fact that you can interactively type into the demo and change the props is not obvious and this would allow that behavior to be obvious with a quick simple demo that does not require the reader to configure it simply to understand how it works. Also, that throws a lot of console errors as you type.

Also, if this ability is supported, I don't believe there is sufficient documentation on it or it is difficult to find.

Thank you for taking the time to review this issue.

[emrekaraca]

You can manage the parent state by simply assigning normal JavaScript variables outside the root-<div>. You can then also see and interact with the state on the <Anonymous>-parent-component within the VueJS-dev-tools. In your case, the following should work:

<docs>

  \```jsx
    let show = false
    <div>
      <modal :show="show">
        <span slot="header">Modal Title</span>
      </modal>
      <button @click="show = true" class="button button-primary">Launch Modal</button>
    </div>
   \```
</docs>

As far as I know, the code preview comes from Vue-Styleguidist and its functionality is documented here.

[grahamsutton]

Thanks for the reply. I just tried this out and it works. My apologies, I am not very familiar with Vue-Styleguidist and their docs. I will have to look into it more.

Perhaps maybe we can update the documentation to include an brief example of controlling parent state, or at least include a link to it in context within the docs?

[lukenofurther]

You can also define it as a Vue component inside the docs tags, with methods, data and anything else you can normally define, like so:

```vue
<template>
      <modal :show="show">
          <span slot="header">Modal Title</span>
      </modal>
      <button @click="show = true" class="button button-primary">Launch Modal</button>
</template>

<script>
export default {
    data() { 
        return { 
            show: false 
        } 
    },
}
</script>
\```

[grahamsutton]

Thanks @lukenofurther, that worked for me. I'll go ahead and close the issue.