88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
|
<div :style="widthStyle + overboxStyle" :class="activeClass">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
div {
|
|
background-color: var(--secondary);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.box-shadow {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
|
|
.closed {
|
|
padding: 10px;
|
|
}
|
|
|
|
.far {
|
|
padding: 30px;
|
|
}
|
|
|
|
.first {
|
|
background-color: var(--surface-1);
|
|
}
|
|
.second {
|
|
background-color: var(--surface-2);
|
|
}
|
|
</style>
|
|
<script setup>
|
|
/**
|
|
* Panneau de fond (ancienne primitive de mise en page : en-têtes, file, vue…).
|
|
* Props : level ('first' = --surface-1, 'second' = --surface-2), padding ('far' 30 px, 'closed' 10 px),
|
|
* boxClass (classes ajoutées), width (largeur max. ; sinon largeur naturelle), noShadow, overbox (coins bas carrés).
|
|
* Pour un nouveau bloc avec titre / actions, préférer Card.
|
|
*/
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
level: {
|
|
type: String,
|
|
default: 'first'
|
|
},
|
|
padding: {
|
|
type: String,
|
|
|
|
default: 'far'
|
|
},
|
|
boxClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
noShadow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
overbox: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const widthStyle = computed(() => {
|
|
if (props.width) {
|
|
// Largeur max. demandée, mais jamais collée aux bords sur petit écran (avant : 70 %, trop étroit sur mobile)
|
|
const width = props.width.replace(/;+\s*$/, '');
|
|
return `max-width: ${width}; width: calc(100% - 40px); box-sizing: border-box;`;
|
|
}
|
|
return '';
|
|
});
|
|
|
|
const overboxStyle = computed(() => {
|
|
return props.overbox ? 'border-radius: 10px 10px 0 0; padding: 10px 10px 0 10px;' : '';
|
|
});
|
|
|
|
const activeClass = computed(() => {
|
|
return `${props.level} ${props.padding} ${props.boxClass} ${props.noShadow ? '' : 'box-shadow'}`;
|
|
});
|
|
|
|
|
|
</script>
|