From 353b85f885396ee238457733801da7da12ef5e65 Mon Sep 17 00:00:00 2001
From: Manuel Odelain <manuel@rezo-zero.com>
Date: Wed, 26 Jun 2024 16:07:13 +0200
Subject: [PATCH] feat(picture): default display style

---
 components/molecules/VPicture/VPicture.vue | 31 +++++++++-------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/components/molecules/VPicture/VPicture.vue b/components/molecules/VPicture/VPicture.vue
index 38c86d8..207f72d 100644
--- a/components/molecules/VPicture/VPicture.vue
+++ b/components/molecules/VPicture/VPicture.vue
@@ -2,8 +2,8 @@
 import type { ExtractPropTypes } from 'vue'
 import pick from 'lodash/pick'
 import { pictureProps } from '#image/components/nuxt-picture'
-import VImg from '~/components/molecules/VImg/VImg.vue'
 import { imgProps } from '#image/components/nuxt-img'
+import VImg from '~/components/molecules/VImg/VImg.vue'
 import VPictureSource from '~/components/molecules/VPicture/VPictureSource.vue'
 
 export const vPictureProps = {
@@ -21,30 +21,23 @@ export default defineComponent({
         // Provide props to children (<sources>)
         provide('pictureProps', props)
 
+        const $style = useCssModule()
         const imgFilteredProps = computed(() => pick(props, Object.keys(imgProps)))
-        const img = h(VImg, {
-            ...imgFilteredProps.value,
-            ...props.imgAttrs,
-        })
-        const sources = computed(() => {
-            return context.slots.default?.() || h(VPictureSource)
-        })
 
-        return () => h('picture', null, [sources.value, img])
+        return () =>
+            h('picture', { class: $style.root }, [
+                context.slots.default?.() || h(VPictureSource),
+                h(VImg, {
+                    ...imgFilteredProps.value,
+                    ...props.imgAttrs,
+                }),
+            ])
     },
 })
 </script>
 
 <style lang="scss" module>
-.root img {
-    // for switching easily between VImg and VPicture, we use the same css var name
-    max-width: var(--v-img-max-width, 100%); // responsive image
-    height: var(--v-img-height, auto); // responsive image
-    background: var(--v-img-background, var(--v-img-placeholder));
-}
-
-.root--loaded img {
-    // Remove background when image is loaded. This is useful for hiding antialiasing artifacts.
-    --v-img-background: none;
+.root {
+    display: var(--v-picture-display, fit-content);
 }
 </style>