2023-07-05 21:28:55 +00:00
|
|
|
<template>
|
|
|
|
|
<cdx-tabs v-model:active="currentTab" :framed="framed">
|
|
|
|
|
<cdx-tab
|
|
|
|
|
v-for="( tab, index ) in tabsData"
|
|
|
|
|
:key="index"
|
|
|
|
|
:name="tab.name"
|
|
|
|
|
:label="tab.label"
|
|
|
|
|
:disabled="tab.disabled"
|
|
|
|
|
v-html="tab.content"
|
|
|
|
|
>
|
|
|
|
|
</cdx-tab>
|
|
|
|
|
</cdx-tabs>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const { defineComponent } = require( 'vue' );
|
|
|
|
|
// Codex is available from ResourceLoader at runtime and is available without needing a build step.
|
|
|
|
|
const { CdxTabs, CdxTab } = require( '@wikimedia/codex' );
|
|
|
|
|
|
|
|
|
|
// @vue/component
|
|
|
|
|
module.exports = exports = defineComponent( {
|
|
|
|
|
name: 'App',
|
|
|
|
|
compatConfig: {
|
|
|
|
|
MODE: 3
|
|
|
|
|
},
|
|
|
|
|
compilerOptions: {
|
|
|
|
|
whitespace: 'condense'
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
CdxTabs: CdxTabs,
|
|
|
|
|
CdxTab: CdxTab
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
tabberData: {
|
|
|
|
|
type: Object,
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
framed: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: function () {
|
|
|
|
|
return {
|
|
|
|
|
tabsData: this.tabberData.tabsData,
|
|
|
|
|
currentTab: this.tabberData.currentTab
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted: function () {
|
|
|
|
|
console.log( this.$el );
|
|
|
|
|
this.$el.parentElement.classList.add( 'tabber--live' );
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
</script>
|
