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 80x 1x 1x 80x 1x 1x 80x 80x 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-widget-base">
<div
v-if="hasHeaderSlot || hasHeaderAction"
class="ext-wikilambda-widget-base-header"
:class="{ 'ext-wikilambda-widget-base-header-with-action': hasHeaderAction }"
>
<!-- Header title slot -->
<div v-if="hasHeaderSlot" class="ext-wikilambda-widget-base-header-title">
<slot name="header"></slot>
</div>
<!-- Header action slot -->
<div v-if="hasHeaderAction" class="ext-wikilambda-widget-base-header-action">
<slot name="header-action"></slot>
</div>
</div>
<!-- Main slot -->
<div class="ext-wikilambda-widget-base-main ext-wikilambda-field-overrides">
<slot name="main"></slot>
</div>
<!-- Footer action slot -->
<div v-if="hasFooterSlot" class="ext-wikilambda-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.edit.variables.less';
.ext-wikilambda-widget-base {
border: @border-subtle;
border-radius: @border-radius-base;
margin-bottom: @spacing-125;
padding: @spacing-75;
.ext-wikilambda-widget-base-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: @spacing-125;
&.ext-wikilambda-widget-base-header-with-action {
margin-bottom: @spacing-50;
}
.ext-wikilambda-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-widget-base-header-action {
display: flex;
align-items: center;
margin-right: -@spacing-35;
margin-top: -@spacing-35;
}
}
}
</style>
|