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 | 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 69x 1x 1x 69x 1x 1x 69x 69x 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 base component for Widgets
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<div class="ext-wikilambda-app-widget-base">
<div
v-if="hasHeaderSlot || hasHeaderAction"
class="ext-wikilambda-app-widget-base__header"
:class="{ 'ext-wikilambda-app-widget-base__header--with-action': hasHeaderAction }"
>
<!-- Header title slot -->
<div v-if="hasHeaderSlot" class="ext-wikilambda-app-widget-base__header-title">
<slot name="header"></slot>
</div>
<!-- Header action slot -->
<div v-if="hasHeaderAction" class="ext-wikilambda-app-widget-base__header-action">
<slot name="header-action"></slot>
</div>
</div>
<!-- Main slot -->
<div class="ext-wikilambda-app-widget-base__main ext-wikilambda-app-field-overrides">
<slot name="main"></slot>
</div>
<!-- Footer action slot -->
<div v-if="hasFooterSlot" class="ext-wikilambda-app-widget-base__footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
const { defineComponent } = require( 'vue' );
module.exports = exports = defineComponent( {
name: 'wl-widget-base',
computed: {
hasHeaderSlot() {
return !!this.$slots.header;
},
hasHeaderAction() {
return !!this.$slots[ 'header-action' ];
},
hasFooterSlot() {
return !!this.$slots.footer;
}
}
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.app.variables.less';
.ext-wikilambda-app-widget-base {
border: @border-subtle;
border-radius: @border-radius-base;
margin-bottom: @spacing-125;
padding: @spacing-75;
.ext-wikilambda-app-widget-base__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: @spacing-125;
&--with-action {
margin-bottom: @spacing-50;
}
}
.ext-wikilambda-app-widget-base__header-title {
flex-grow: 1;
flex-basis: 0;
color: @color-base;
font-weight: @font-weight-bold;
line-height: @line-height-x-small;
font-size: @font-size-large;
}
.ext-wikilambda-app-widget-base__header-action {
display: flex;
align-items: center;
margin-right: -@spacing-35;
margin-top: -@spacing-35;
}
}
</style>
|