All files / ext.wikilambda.edit/components/base LocalizedLabel.vue

100% Statements 13/13
100% Branches 2/2
100% Functions 2/2
100% Lines 13/13

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    25x 25x 25x 25x                             36x       25x   25x     25x 25x 25x       25x   36x       25x                                                                                                                      
<!--
	WikiLambda Vue component for Localized Label
 
	@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
	@license MIT
-->
<template>
	<label>
		<span
			v-if="!isUserLang"
			class="ext-wikilambda-lang-chip"
		>{{ labelData.langCode }}</span><span
			:lang="labelData.langCode"
			:dir="labelData.langDir"
		>{{ labelData.label }}</span>
	</label>
</template>
 
<script>
const { defineComponent } = require( 'vue' );
const LabelData = require( '../../store/classes/LabelData.js' ),
	mapGetters = require( 'vuex' ).mapGetters;
 
module.exports = exports = defineComponent( {
	name: 'wl-localized-label',
	props: {
		labelData: {
			type: LabelData,
			required: true
		}
	},
	computed: Object.assign( mapGetters( [
		'getUserLangZid'
	] ), {
		/**
		 * Returns whether the label is in the user preferred language
		 *
		 * @return {boolean}
		 */
		isUserLang: function () {
			return this.getUserLangZid === this.labelData.lang;
		}
	} )
} );
</script>
 
<style lang="less">
@import '../../ext.wikilambda.edit.variables.less';
 
.ext-wikilambda-text-toggle-truncate {
	display: flex;
	align-items: center;
	justify-content: end;
	margin-top: @spacing-100;
	color: @color-base;
	font-weight: @font-weight-bold;
 
	&__icon {
		margin-left: @spacing-50;
 
		svg {
			width: @size-100;
			height: @size-100;
		}
 
		&__inverted {
			transform: rotate( 180deg );
		}
	}
}
 
/* stylelint-disable declaration-property-unit-disallowed-list */
span.ext-wikilambda-lang-chip {
	font-size: 1em;
	font-weight: @font-weight-normal;
	line-height: calc( 22.4px - 2px );
	color: @color-base;
	border: 1px solid @border-color-base;
	border-radius: @border-radius-pill;
	min-width: 36px;
	padding: 0 5px;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
	height: 22px;
	min-height: 22px;
	margin-right: @spacing-25;
 
	&:empty {
		width: 36px;
		height: 22px;
		min-width: 36px;
		border: 1px dashed @border-color-base;
	}
 
	@media screen and ( max-width: @max-width-breakpoint-mobile ) {
		font-size: 0.875em;
	}
}
</style>