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 | 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 1453x 1453x 1453x 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 | <template>
<div
class="ext-wikilambda-app-key-block"
:class="{
'ext-wikilambda-app-key-block--view': type === 'view',
'ext-wikilambda-app-key-block--edit': type === 'edit',
'ext-wikilambda-app-key-block--edit-disabled': type === 'edit-disabled',
'ext-wikilambda-app-key-block--is-bold': keyBold
}"
data-testid="key-block">
<slot></slot>
</div>
</template>
<script>
const { defineComponent } = require( 'vue' );
module.exports = exports = defineComponent( {
name: 'wl-key-block',
props: {
keyBold: {
type: Boolean,
default: false
},
type: {
type: String,
default: undefined,
validator( value ) {
// Ensure that if 'type' is provided, it must be one of the allowed values
return value === undefined || [ 'edit', 'view', 'edit-disabled' ].includes( value );
}
}
}
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.app.variables.less';
.ext-wikilambda-app-key-block {
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
&--edit {
color: @color-base;
}
&--edit-disabled {
color: @color-disabled;
}
&--view {
color: @color-subtle;
}
&--is-bold {
font-weight: bold;
color: @color-base;
}
}
</style>
|