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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <!--
WikiLambda Vue component for Visual Editor Wikifunctions function call
insertion and edit plugin.
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<button
type="button"
class="ext-wikilambda-app-button-reset ext-wikilambda-app-function-select-item"
@click="$emit( 'click' )"
>
<p
v-if="labelData"
class="ext-wikilambda-app-function-select-item__title"
:lang="labelData.langCode"
:dir="labelData.langDir"
>
{{ labelData.label }}
</p>
<p
v-else
class="ext-wikilambda-app-function-select-item__title"
>
{{ label }}
</p>
<wl-expandable-description
v-if="description"
:description="description"
class="ext-wikilambda-app-function-select-item__description"
></wl-expandable-description>
</button>
</template>
<script>
const { defineComponent } = require( 'vue' );
const ExpandableDescription = require( './ExpandableDescription.vue' );
const LabelData = require( '../../store/classes/LabelData.js' );
module.exports = exports = defineComponent( {
name: 'wl-function-select-item',
components: {
'wl-expandable-description': ExpandableDescription
},
props: {
labelData: {
type: LabelData,
default: undefined
},
label: {
type: String,
default: ''
},
description: {
type: LabelData,
default: undefined
}
},
emits: [ 'click' ]
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.app.variables.less';
.ext-wikilambda-app-function-select-item {
position: relative;
width: 100%;
text-align: left;
padding: @spacing-50 @spacing-100;
&__title {
margin: 0;
color: @color-base;
font-weight: @font-weight-normal;
}
&__description {
color: @color-subtle;
}
&:hover {
background-color: @background-color-interactive;
.ext-wikilambda-app-expandable-description__toggle-button {
background-color: @background-color-interactive;
&::before {
background: linear-gradient( to right, transparent, @background-color-interactive );
}
}
}
}
</style>
|