Component wrapping structure
**Problem:** Components expecting to be inside a canvas must always be wrapped by a parent element to render.
```html
<MyScene :width="500" :height="400">
<MyCircle
:x="200"
:y="200"
:radius="100"
/>
</MyScene>
```
To demo this in Vue-Doxen today, you'd need to make a wrapper component that replicates the props from the child (`MyCircle)` and passes them down.
```html
<template>
<MyScene :width="500" :height="400">
<MyCircle v-bind="$props" />
</MyScene>
</template>
<script>
import MyCircle, { myCircleProps } from './MyCircle.vue';
import MyScene from './MyScene.vue';
export default {
name: 'MyCircle',
components: {
MyCircle,
MyScene
},
props: MyCircleProps
};
</script>
```
This would result in a functioning demo, but every canvas component would require a separate wrapper component to make it work. This is a workaround, because the Vue-Doxen system expects the component to be demo'd in isolation.
* * *
**Ideas:**
```js
const demo = {
component: MyCircle,
parent: {
component: MyScene,
props: {
width: 500,
height: 400
},
events: {},
slots: {},
slotToUse: 'default'
}
};
```
This could be implemented and would work, however, it would only allow for one parent component. What if instead of
```html
<MyScene>
<MyCircle />
</MyScene>
```
you needed to demo:
```html
<MyTable>
<MyTableBody>
<MyTableRow>
<MyTableCell />
</MyTablerow>
</MyTableBody>
</MyTable>
```
Perhaps a wrapper structure like this:
```js
const demo = {
component: MyTableCell,
wrapper: {
component: MyTable,
props: {},
events: {},
slots: {
default: {
component: MyTableBody,
props: {},
events: {},
slots: {
default: {
component: MyTableRow,
props: {},
events: {},
slots: {},
slotToUse: 'default'
}
}
}
}
},
propsToDemo: {}
};
```
This would give the most flexibility. We should be able to loop over these values and generate the Vue/JavaScript code previews with these wrappers correctly (assuming we can get the `name` out of each wrapper component, if not, maybe just skip them and only show the component being demo'd? maybe just do that anyways? Less work, less edgecases, maybe even better UX?)
Would require supporting component objects for slots. Which could be blocked by https://github.com/TheJaredWilcurt/vue-doxen/issues/32
0 条评论