Make own component from Quasar component

[a47ae]

Thank you @spectrolite
If I have the time to, I can open up a new topic in the Show&Tell channel where I could post this and also elaborate on some other things like using Stylus variables.

[spectrolite]

@a47ae I’m sure @rstoenescu would greatly appreciate it, and most of it would probably end up in the docs at some point.
Go for it !

[a47ae]

This is still work in progress and I will update this If I have time to, but this should be a good starting point:
http://forum.quasar-framework.org/topic/696/how-to-building-components-with-quasar

[rstoenescu]

@a47ae Let’s make a doc page with this! Want me to create one that you can edit?

[a47ae]

@rstoenescu I am really glad that all of you find this guide helpful and would love if this could be added as an official doc page.
But I am on vacation until next week, so I do not have time to look into it, but maybe you could already take the existing post and next week I will update it and maybe rewrite some stuff.

[rstoenescu]

@a47ae enjoy your vacation! sure, please do ping me when you get back so we can get this in.

[a47ae]

Thanks
Will write you as soon as I am back!

[losika]

It works like a charm! Thank you very much.

[losika]

I have to correct myself. I works when the parent component declared as single file component (like QSelect, QBtn, etc. you can see in source code). But if the parent component created in js file (like QList) then it does not work for me. What works is the following:

import { QList } from ‘quasar’

export default {
name: ‘m-list’,
mixins: [ QList ],
props: {
noBorder: { default: true },
separator: { default: true }
}
}

It there a better solution for that?

And another problem is with refs. a47ae’s solution does not work on QModal. First of all you have to copy methods without that it will complain on ‘open’ mehtods:

<template>
<q-modal noBackdropDismiss noEscDismiss v-bind:content-css="{width: ‘600px’, height: ‘800px’}"/>
</template>

<script>
import { QModal } from ‘quasar’

export default {
name: ‘m-modal’,
components: { QModal },
methods: Object.assign({}, QModal.methods)
}
</script>

But after that the problem is with $refs.content. The error is “Cannot set property ‘scrollTop’ of undefined”. You can see that in QModal’s setTimeout function there is a reference to this.$refs.content what returns undefined. Is there any way to copy refs?

[rstoenescu]

@losika use a mixin instead of declaring QModal as component in your own wrapper.