Mixin with a .vue file is not displayed in the doc #158
Comments
|
Hello @vdcrea, I do not know how to create a mixin in a vue file. |
|
Hi @elevatebart, No worries, I documented using the md Here is a vue component used as a mixin: https://gitlab.com/vdcrea/vue-leaflet/blob/master/src/mixins/LeafletLayer.vue Imported in this component for exemple: https://gitlab.com/vdcrea/vue-leaflet/blob/master/src/components/core/LMap.vue#L13 In styleguidist https://vdcrea.gitlab.io/vue-leaflet/#lmap documentation from this .vue mixin is not injected. 'id', 'options', 'tooltip' and 'popup' props are not visible in the doc. Basically, a .vue file is a .js when imported, so it can be a mixin as a js file can (the styles are ignored, and the template tag is converted to a template prop at build... I presume) By the way, for this particular exemple, as the file has no style and only 1 line of template, I should probably convert it to js using the template property of the component, instead of the template tag. |
|
@vdcrea |
|
Hello in the release 3.0.9, this dosent work yet. |
|
Hello @angelowolf, Would you please tell me what error you are getting? |
|
Hello we have a base component, wich is used as a mixins in many other components. The template is only in the mixins. The mixins looks like this: And this is an example of a componente that uses it: |
|
Thank you so much, I will have a look.
Bart Ledoux
Twitter: @bartledoux
Github, Gitter, Discord: @elevatebart
… On Feb 3, 2019, at 14:45, Wolf Angelo ***@***.***> wrote:
Hello we have a base component, wich is used as a mixins in many other components. The template is only in the mixins. The mixins looks like this:
<template>
<button v-tooltip.hover="tooltip" @click.prevent="$emit('click')" :class="`btn btn-${type} ${(size && ' btn-'+size)} ${clase}`" type="button">{{label}}</button>
</template>
<script>
/**
* Estructura base para todos los botones.
* @mixin
*/
export default {
props: {
/**
* Clase que se le agrega al botón.
*/
clase: {
default: '',
type: String
},
/**
* El tipo de botón.
* `primary, primary2, info, default, default2, danger, danger2, warning, warning2, success`
*/
type: {
default: 'primary',
type: String
},
/**
* El tamaño del botón.
* `xs, sm, md, lg`
*/
size: {
default: 'sm',
type: String
},
/**
* Label a mostrar en el botón.
*/
label: {
default: '',
type: String
},
/**
* El texto a mostrar en el tooltip del botón.
*/
tooltip: {
default: '',
type: String
}
}
}
</script>
And this is an example of a componente that uses it:
<script>
import TrxButtonBase from './TrxButtonBase'
export default {
mixins: [TrxButtonBase],
props: {
/**
* Label a mostrar en el botón.
*/
label: {
default: 'Volver',
type: String
},
/**
* El tipo de botón.
* `primary, primary2, info, default, default2, danger, danger2, warning, warning2, success`
*/
type: {
default: 'info',
type: String
},
/**
* El texto a mostrar en el tooltip del botón.
*/
tooltip: {
default: 'Volver',
type: String
}
}
}
</script
``
The library only generates the docs for the mixin component.
—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Actually would you mind creating a repository where I can reproduce ?
Bart Ledoux
Twitter: @bartledoux
Github, Gitter, Discord: @elevatebart
… On Feb 3, 2019, at 14:45, Wolf Angelo ***@***.***> wrote:
Hello we have a base component, wich is used as a mixins in many other components. The template is only in the mixins. The mixins looks like this:
<template>
<button v-tooltip.hover="tooltip" @click.prevent="$emit('click')" :class="`btn btn-${type} ${(size && ' btn-'+size)} ${clase}`" type="button">{{label}}</button>
</template>
<script>
/**
* Estructura base para todos los botones.
* @mixin
*/
export default {
props: {
/**
* Clase que se le agrega al botón.
*/
clase: {
default: '',
type: String
},
/**
* El tipo de botón.
* `primary, primary2, info, default, default2, danger, danger2, warning, warning2, success`
*/
type: {
default: 'primary',
type: String
},
/**
* El tamaño del botón.
* `xs, sm, md, lg`
*/
size: {
default: 'sm',
type: String
},
/**
* Label a mostrar en el botón.
*/
label: {
default: '',
type: String
},
/**
* El texto a mostrar en el tooltip del botón.
*/
tooltip: {
default: '',
type: String
}
}
}
</script>
And this is an example of a componente that uses it:
<script>
import TrxButtonBase from './TrxButtonBase'
export default {
mixins: [TrxButtonBase],
props: {
/**
* Label a mostrar en el botón.
*/
label: {
default: 'Volver',
type: String
},
/**
* El tipo de botón.
* `primary, primary2, info, default, default2, danger, danger2, warning, warning2, success`
*/
type: {
default: 'info',
type: String
},
/**
* El texto a mostrar en el tooltip del botón.
*/
tooltip: {
default: 'Volver',
type: String
}
}
}
</script
``
The library only generates the docs for the mixin component.
—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Hello this is the repository The TrxButtonBase is the mixins component, and the others TrxButtonXXX are components that use the mixin. In the picture you can only see the documentation of the mixin and not the other components.
Thanks! |
|
@angelowolf as a workaround and as the template is not so long, did you try to change the .vue mixin to a .js mixin with your template in a render function (ex https://sebastiandedeyne.com/vue-templates-in-jsx/ )? |
|
@vdcrea |
|
I am working on it. I just needed a concrete example. It will not take long. It was an issue of file resolution. NodeJs |
|
I am done, I'll deliver tomorow morning with a fresher mind ;) |
) * add e2e test for #92 * add tests and create the immediately export lib * need better name for New file + tests * add resolution of vue files for dependencies * fix naming a little * fix unit tests * first unit test * fix tests * fix compile * fix case issue in e2e * better arch for resolvePath * better tests for file resolution closes #92 and vue-styleguidist/vue-styleguidist#158
Hi, and thanks to contributors for this great lib.
import a .vue file (not .js) as a mixin (even with relative path) hide it from the doc. Do you have any workaround for that ?
The text was updated successfully, but these errors were encountered: