All files / ext.wikilambda.edit/components/default-view-types ZString.vue

100% Statements 20/20
100% Branches 6/6
100% Functions 6/6
100% Lines 20/20

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 106 107 108 109 110 111 112    25x 25x 25x 25x 25x                                 20x                                         38x                 7x 7x                         7x       25x   25x     25x 25x 25x     25x         38x 38x       7x           25x                            
<!--
	WikiLambda Vue component for Z6/String objects.
 
	@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
	@license MIT
-->
<template>
	<div class="ext-wikilambda-string">
		<p v-if="!edit" data-testid="view-only-string">
			"{{ value }}"
		</p>
		<cdx-text-input
			v-else
			v-model="value"
			aria-label=""
			placeholder=""
			data-testid="text-input"
		></cdx-text-input>
	</div>
</template>
 
<script>
const { defineComponent } = require( 'vue' );
const CdxTextInput = require( '@wikimedia/codex' ).CdxTextInput,
	Constants = require( '../../Constants.js' ),
	mapGetters = require( 'vuex' ).mapGetters;
 
module.exports = exports = defineComponent( {
	name: 'wl-z-string',
	components: {
		'cdx-text-input': CdxTextInput
	},
	props: {
		rowId: {
			type: Number,
			required: false,
			default: 0
		},
		edit: {
			type: Boolean,
			required: true
		}
	},
	data: function () {
		return {
		};
	},
	computed: Object.assign(
		mapGetters( [
			'getZObjectKeyByRowId',
			'getZStringTerminalValue'
		] ),
		{
			/**
			 * Computed value:
			 * 1. Getter gets the value from the state.
			 * 2. Setter informs the ZObjectKeyValue of the change.
			 * Only the ZObjectKeyValue responds to the 'setValue' emitted event
			 * so only the ZObjectKeyValue is doing operations to transform
			 * the state data. This is so that we don't duplicate state mutation
			 * logic all over the components, and builtin components are just
			 * visual representations and have zero logic.
			 */
			value: {
				/**
				 * Returns the terminal value of the string represented
				 * in this component.
				 *
				 * @return {string}
				 */
				get: function () {
					return this.getZStringTerminalValue( this.rowId );
				},
				/**
				 * Emits a setValue event with the new value for the string
				 * and the key path information depending on the object key.
				 *
				 * @param {string} value
				 */
				set: function ( value ) {
					const keyPath = ( this.key !== Constants.Z_STRING_VALUE ) ?
						[ Constants.Z_STRING_VALUE ] :
						[];
					this.$emit( 'set-value', { keyPath, value } );
				}
			},
			/**
			 * Returns the key that contains the string value
			 * represented in this component.
			 *
			 * @return {string}
			 */
			key: function () {
				return this.getZObjectKeyByRowId( this.rowId );
			}
		}
	)
} );
 
</script>
 
<style lang="less">
@import '../../ext.wikilambda.edit.variables.less';
 
.ext-wikilambda-string {
	p {
		margin: 0;
		color: @color-base;
	}
}
</style>