generated from gitea_admin/default
128 lines
4.1 KiB
Vue
128 lines
4.1 KiB
Vue
<template>
|
|
<component
|
|
:is="as"
|
|
:class="[
|
|
'ds-text',
|
|
`ds-text--${props.font}`,
|
|
`ds-text--${props.size || resolvedsize}`,
|
|
`ds-text--${props.weight || resolvedWeight}`, //si la classe weight n'est pas donné dans la classe on prend la mapping par défaut
|
|
`ds-text--${props.spacing || resolvedspacing}`,
|
|
`ds-text--${props.tone}`,
|
|
props.clamp ? `ds-text--clamp_${props.clamp}` : '',
|
|
]"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
as: { type: String, default: 'p' }, // p/span/div
|
|
font: { type: String, default: 'roboto' }, // barlow | brandon
|
|
size: { type: String, default: '' }, // xs/sm/md/lg
|
|
spacing: { type: String, default: '' },
|
|
tone: { type: String, default: 'default' }, // default/muted/invert
|
|
weight: { type: String, default: 'regular' }, // regular/medium
|
|
clamp: { type: Number, default: undefined }, // nombre de lignes du contenu
|
|
})
|
|
|
|
const resolvedsize = computed(() => {
|
|
switch (props.as) {
|
|
case 'p':
|
|
return 'md'
|
|
default:
|
|
return 'md'
|
|
}
|
|
})
|
|
|
|
const resolvedWeight = computed(() => {
|
|
switch (props.as) {
|
|
case 'p':
|
|
return 'regular'
|
|
default:
|
|
return 'regular'
|
|
}
|
|
})
|
|
|
|
const resolvedspacing = computed(() => {
|
|
switch (props.as) {
|
|
case 'p':
|
|
return 'space-6'
|
|
case 'ul':
|
|
return 'space-6'
|
|
case 'ol':
|
|
return 'space-6'
|
|
case 'li':
|
|
return 'space-6'
|
|
case 'pre':
|
|
return 'space-6'
|
|
case 'blockquote':
|
|
return 'space-6'
|
|
default:
|
|
return 'space-6'
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ds-text {
|
|
&--roboto { font-family: var(--font-roboto); }
|
|
&--barlow { font-family: var(--font-barlow); }
|
|
&--brandon { font-family: var(--font-brandon); }
|
|
|
|
font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
|
|
font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */
|
|
|
|
line-height: var(--lh-base);
|
|
letter-spacing: var(--ls-normal);
|
|
margin: 0;
|
|
|
|
&--xs { font-size: var(--text-xs); }
|
|
&--sm { font-size: var(--text-sm); }
|
|
&--md { font-size: var(--text-md); }
|
|
&--lg { font-size: var(--text-lg); }
|
|
|
|
&--light { font-weight: var(--fw-light); }
|
|
&--regular { font-weight: var(--fw-regular); }
|
|
&--medium { font-weight: var(--fw-medium); }
|
|
&--semibold { font-weight: var(--fw-semibold); }
|
|
&--bold { font-weight: var(--fw-bold); }
|
|
&--extrabold { font-weight: var(--fw-extrabold); }
|
|
&--black { font-weight: var(--fw-black); }
|
|
|
|
&--space-48 { margin-bottom: var(--sp-48); }
|
|
&--space-40 { margin-bottom: var(--sp-40); }
|
|
&--space-32 { margin-bottom: var(--sp-32); }
|
|
&--space-24 { margin-bottom: var(--sp-24); }
|
|
&--space-20 { margin-bottom: var(--sp-20); }
|
|
&--space-16 { margin-bottom: var(--sp-16); }
|
|
&--space-6 { margin-bottom: var(--sp-6); }
|
|
|
|
&--default { color: var(--c-text, #111); }
|
|
&--muted { color: var(--c-text-muted, #555); }
|
|
&--invert { color: var(--c-text-invert, #fff); }
|
|
&--brand_rouge { color: var(--c-brand_rouge); }
|
|
&--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
|
|
&--success { color: var(--c-success); }
|
|
&--warning { color: var(--c-warning); }
|
|
&--danger { color: var(--c-danger); }
|
|
&--bleu_fonce { color: var(--c-bleu_fonce); }
|
|
&--bleu_clair { color: var(--c-bleu_clair); }
|
|
|
|
// clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
|
|
// Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
|
|
&--clamp_3 {
|
|
display: -webkit-box;
|
|
line-clamp: 3;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|