fix(05-02): ProseImg inheritAttrs false — classes MDC custom overrident le layout auto
This commit is contained in:
@@ -1,4 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
defineOptions({ inheritAttrs: false })
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
src: string
|
src: string
|
||||||
alt?: string
|
alt?: string
|
||||||
@@ -13,34 +15,41 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
align: 'full',
|
align: 'full',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const attrs = useAttrs()
|
||||||
|
|
||||||
const figureClass = computed(() => {
|
const figureClass = computed(() => {
|
||||||
const base = 'not-prose my-6'
|
const base = 'not-prose my-6'
|
||||||
|
|
||||||
|
// Si des classes custom sont passées via MDC {.class}, on retire les classes
|
||||||
|
// de layout automatiques — l'utilisateur contrôle tout.
|
||||||
|
if (attrs.class) return base
|
||||||
|
|
||||||
switch (props.align) {
|
switch (props.align) {
|
||||||
case 'left':
|
case 'left': return `${base} float-left mr-6 mb-2 w-1/2 max-w-xs`
|
||||||
return `${base} float-left mr-6 mb-2 w-1/2 max-w-xs`
|
case 'right': return `${base} float-right ml-6 mb-2 w-1/2 max-w-xs`
|
||||||
case 'right':
|
case 'center': return `${base} mx-auto table`
|
||||||
return `${base} float-right ml-6 mb-2 w-1/2 max-w-xs`
|
default: return `${base} w-full`
|
||||||
case 'center':
|
|
||||||
return `${base} mx-auto table`
|
|
||||||
default:
|
|
||||||
return `${base} w-full`
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const imgClass = computed(() => {
|
const figureStyle = computed(() => {
|
||||||
const base = 'rounded-lg'
|
if (props.width && props.align !== 'full') return `width: ${props.width}px`
|
||||||
return props.align === 'full' ? `${base} w-full` : `${base} w-full`
|
return undefined
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<figure :class="figureClass" :style="props.width && props.align !== 'full' ? `width: ${props.width}px` : undefined">
|
<figure
|
||||||
|
v-bind="attrs"
|
||||||
|
:class="figureClass"
|
||||||
|
:style="figureStyle"
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
:src="props.src"
|
:src="props.src"
|
||||||
:alt="props.alt"
|
:alt="props.alt"
|
||||||
:title="props.title || props.caption"
|
:title="props.title || props.caption"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
:class="imgClass"
|
:class="props.align === 'full' && !attrs.class ? 'w-full rounded-lg' : 'rounded-lg'"
|
||||||
/>
|
/>
|
||||||
<figcaption
|
<figcaption
|
||||||
v-if="props.caption"
|
v-if="props.caption"
|
||||||
|
|||||||
Reference in New Issue
Block a user