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 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 24x 24x 24x 24x 24x 10x 10x 45x 9x 2x 7x 1x 24x 24x 24x 24x 45x 45x 45x 24x | <!--
WikiLambda Vue component for a Typed List.
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<div
class="ext-wikilambda-ztyped-list"
:class="nestingDepthClass"
>
<!-- Type of list item -->
<wl-z-typed-list-type
v-if="expanded"
:row-id="itemTypeRowId"
:edit="edit"
:list-item-type="listItemType"
:parent-row-id="rowId"
></wl-z-typed-list-type>
<!-- Collection of items -->
<wl-z-typed-list-items
:expanded="expanded"
:row-id="rowId"
:edit="edit"
:list-item-type="listItemType"
@add-list-item="addListItem"
></wl-z-typed-list-items>
</div>
</template>
<script>
const ZTypedListItems = require( './ZTypedListItems.vue' ),
ZTypedListType = require( './ZTypedListType.vue' ),
typeUtils = require( '../../mixins/typeUtils.js' ),
mapGetters = require( 'vuex' ).mapGetters;
// @vue/component
module.exports = exports = {
name: 'wl-z-typed-list',
components: {
'wl-z-typed-list-items': ZTypedListItems,
'wl-z-typed-list-type': ZTypedListType
},
mixins: [ typeUtils ],
props: {
rowId: {
type: Number,
required: false,
default: 0
},
edit: {
type: Boolean,
required: true
},
expanded: {
type: Boolean,
required: true
},
depth: {
type: Number,
required: true
}
},
computed: $.extend(
mapGetters( [
'getChildrenByParentRowId',
'getTypedListItemType'
] ),
{
/**
* Returns the id for the first item on the list,
* which represents the type of the list items
*
* @return {number}
*/
itemTypeRowId: function () {
const firstItem = this.getChildrenByParentRowId( this.rowId )
.find( ( item ) => item.key === '0' );
return firstItem ? firstItem.id : undefined;
},
/**
* Returns the string representation of the expected
* type for the list items
*
* @return {string}
*/
listItemType: function () {
return this.getTypedListItemType( this.rowId );
},
/**
* Returns the css class that identifies the nesting level
*
* @return {string[]}
*/
nestingDepthClass: function () {
if ( this.expanded ) {
return [
'ext-wikilambda-default-key-depth',
'ext-wikilambda-key-value-set',
`ext-wikilambda-key-level-${ this.depth }`
];
}
return [];
},
/**
* Returns the key label for the list of items.
* Since the FE represents typed lists as benjamin arrays,
* this must be hardcoded
*
* @return {string}
*/
itemsLabel: function () {
return this.$i18n( 'wikilambda-list-items-label' ).text();
}
}
),
methods: {
addListItem: function () {
this.$emit( 'add-list-item', { value: this.listItemType } );
}
}
};
</script>
|