All files / ext.wikilambda.edit/views FunctionViewer.vue

100% Statements 11/11
100% Branches 1/1
100% Functions 3/3
100% Lines 11/11

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>