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

78.94% Statements 15/19
100% Branches 6/6
60% Functions 6/10
77.77% Lines 14/18

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    25x 25x 25x                                                     55x                 60x                           55x     25x   25x     25x 25x   60x 60x       31x                             25x                                      
<!--
	WikiLambda Vue component for rendering a set of ZObjectKeyValue
	components, which is the fallback view for types that don't have
	a custom component and for ZObjects that are viewed in expanded mode.
 
	@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
	@license MIT
-->
<template>
	<div
		class="ext-wikilambda-key-value-set"
		:class="nestingDepthClass"
		data-testid="z-object-key-value-set"
	>
		<wl-z-object-key-value
			v-for="rowIdItem in childRowIds"
			:key="rowIdItem"
			:row-id="rowIdItem"
			:edit="edit"
			@set-type="$emit( 'set-type', $event )"
			@set-value="$emit( 'set-value', $event )"
			@change-event="$emit( 'change-event', $event )"
		></wl-z-object-key-value>
	</div>
</template>
 
<script>
const { defineComponent } = require( 'vue' );
const mapGetters = require( 'vuex' ).mapGetters;
 
module.exports = exports = defineComponent( {
	name: 'wl-z-object-key-value-set',
	components: {
		// Leave components as an empty object to add the ZObjectKeyValue later
	},
	props: {
		rowId: {
			type: Number,
			required: false,
			default: 0
		},
		edit: {
			type: Boolean,
			required: true
		},
		depth: {
			type: Number,
			required: true
		}
	},
	computed: Object.assign( mapGetters( [
		'getZObjectKeyByRowId',
		'getChildrenByParentRowId'
	] ), {
		/**
		 * Returns the css class that identifies the nesting level
		 *
		 * @return {string}
		 */
		nestingDepthClass: function () {
			return `ext-wikilambda-key-level-${ this.depth }`;
		},
 
		/**
		 * Returns the array of rowIds for the child key-values to
		 * render them with a ZObjectKeyValue component each.
		 *
		 * @return {Array}
		 */
		childRowIds: function () {
			return this.getChildrenByParentRowId( this.rowId )
				.map( ( row ) => row.id );
		},
 
		/**
		 * Returns the parent key of the set of key-values represented
		 * in this component.
		 *
		 * @return {string}
		 */
		parentKey: function () {
			return this.getZObjectKeyByRowId( this.rowId );
		}
	} ),
	beforeCreate: function () {
		// Need to delay require of ZObjectKeyValue to avoid loop
		this.$options.components[ 'wl-z-object-key-value' ] = require( './ZObjectKeyValue.vue' );
	}
} );
</script>
 
<style lang="less">
@import '../../ext.wikilambda.edit.variables.less';
 
.ext-wikilambda-key-value-set {
	margin-left: -@spacing-25;
 
	.ext-wikilambda-key-value-row:last-child {
		> .ext-wikilambda-key-value {
			margin-bottom: @spacing-0;
		}
	}
}
</style>