Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 13x 13x 13x 13x 13x 13x 7x 7x 5x 2x 7x | <template>
<!--
WikiLambda Vue component for the special view of a ZFunction object.
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<div class="ext-wikilambda-function-viewer">
<!-- eslint-disable vue/no-v-model-argument -->
<!-- eslint-disable vue/no-unsupported-features -->
<cdx-tabs v-model:active="currentTab">
<cdx-tab
v-for="( tab, index ) in tabsData"
:key="index"
:name="tab.name"
:label="tab.label"
>
<!-- Keep alive helps keeps the local state of the component so that it is not remounted -->
<keep-alive>
<component
:is="tab.name"
v-if="tab.name === currentTab"
:name="tab.name"
></component>
</keep-alive>
</cdx-tab>
</cdx-tabs>
<div v-if="displaySuccessMessage" class="ext-wikilambda-function-viewer__message">
<cdx-message
class="ext-wikilambda-function-viewer__message__success"
:auto-dismiss="true"
type="success"
>
{{ $i18n( 'wikilambda-publish-successful' ).text() }}
</cdx-message>
</div>
</div>
</template>
<script>
var CdxTab = require( '@wikimedia/codex' ).CdxTab,
CdxTabs = require( '@wikimedia/codex' ).CdxTabs,
CdxMessage = require( '@wikimedia/codex' ).CdxMessage,
FunctionViewerAbout = require( '../components/function/viewer/FunctionViewerAbout.vue' ),
FunctionViewerDetails = require( '../components/function/viewer/FunctionViewerDetails.vue' );
// @vue/component
module.exports = exports = {
name: 'wl-function-viewer',
components: {
'wl-function-viewer-about': FunctionViewerAbout,
'wl-function-viewer-details': FunctionViewerDetails,
'cdx-tab': CdxTab,
'cdx-tabs': CdxTabs,
'cdx-message': CdxMessage
},
data: function () {
return {
currentTab: 'wl-function-viewer-about',
tabsData: [
{
name: 'wl-function-viewer-about',
label: this.$i18n( 'wikilambda-editor-fn-step-function-about' ).text()
},
{
name: 'wl-function-viewer-details',
label: this.$i18n( 'wikilambda-editor-fn-step-function-details' ).text()
}
]
};
},
computed: {
displaySuccessMessage: function () {
if ( mw.Uri().query ) {
return mw.Uri().query.success === 'true';
}
return false;
}
},
mounted: function () {
this.$emit( 'mounted' );
}
};
</script>
<style lang="less">
.ext-wikilambda-function-viewer {
&__message {
display: flex;
align-items: center;
flex-direction: column;
position: fixed;
left: 0;
right: 0;
bottom: 0;
&__success {
max-width: 100%;
}
}
}
</style>
|