<template>
    <n-module type="demo">
        <div slot="header" class="demo">
            <component :is="`demos-${name}`"/>
        </div>

        <div class="code">
            <codemirror :value="raw" :options="cmOptions"></codemirror>
        </div>
    </n-module>
</template>

<script>
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/mode/vue/vue.js';

export default {
    name: 'Demo',

    props: {
        name: {
            type: String,
            required: true,
        },
    },

    data () {
        return {
            raw: '',
            component: null,
            cmOptions: {
                tabSize: 4,
                mode: 'text/x-vue',
                theme: 'noah',
                lineNumbers: true,
                lineWrapping: true,
                line: true,
                readOnly: true,
            },
        };
    },

    mounted () {
        this.raw = require(`!!raw-loader!./demos/${this.name}.vue`).default;
    },
};
</script>