mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-09-23 10:26:50 +00:00
bb110c6d98
To ensure easier development and maintenance, IE support is dropped to allow modern Javascript features. The old tabber module is rewritten into newer standard and using classes to ensure proper scoping.
58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<CdxTabs v-model:active="currentTab" :framed="framed">
|
|
<CdxTab
|
|
v-for="( tab, index ) in tabsData"
|
|
:key="index"
|
|
:name="tab.name"
|
|
:label="tab.label"
|
|
:disabled="tab.disabled"
|
|
>
|
|
<TabContent
|
|
:html="tab.content"
|
|
></TabContent>
|
|
</CdxTab>
|
|
</CdxTabs>
|
|
</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' );
|
|
const TabContent = require( './TabContent.vue' );
|
|
|
|
// @vue/component
|
|
module.exports = exports = defineComponent( {
|
|
name: 'App',
|
|
compatConfig: {
|
|
MODE: 3
|
|
},
|
|
compilerOptions: {
|
|
whitespace: 'condense'
|
|
},
|
|
components: {
|
|
CdxTabs: CdxTabs,
|
|
CdxTab: CdxTab,
|
|
TabContent: TabContent
|
|
},
|
|
props: {
|
|
tabberData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
framed: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
tabsData: this.tabberData.tabsData,
|
|
currentTab: this.tabberData.currentTab
|
|
};
|
|
},
|
|
mounted: function () {
|
|
this.$el.parentElement.classList.add( 'tabber--live' );
|
|
}
|
|
} );
|
|
</script>
|