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 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 CdxTextInput = require( '@wikimedia/codex' ).CdxTextInput,
Constants = require( '../../Constants.js' ),
mapGetters = require( 'vuex' ).mapGetters;
// @vue/component
module.exports = exports = {
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: $.extend(
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>
|