[WIP] Slots and background

MisRob · Jan 11, 2024 · 7f152a3 · 7f152a3
1 parent 694f5bf
commit 7f152a3
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 3 deletions.
diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
@@ -198,6 +198,70 @@
           />
         </div>
       </DocsShow>
+
+      <h3>Slots</h3>
+
+      <DocsShowCode language="html">
+        <div>
+          <KImg
+            src=""
+            isDecorative
+            aspectRatio="4:3"
+            maxWidth="300"
+          >
+            <template #placeholder>
+              <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+                <KIcon icon="readSolid" />
+              </span>
+            </template>
+          </KImg>
+        </div>
+      </DocsShowCode>
+
+      <DocsShow block>
+        <div>
+          <KImg
+            src=""
+            isDecorative
+            aspectRatio="4:3"
+            maxWidth="300"
+          >
+            <template #placeholder>
+              <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+                <KIcon icon="readSolid" />
+              </span>
+            </template>
+          </KImg>
+        </div>
+      </DocsShow>
+
+      <DocsShowCode language="html">
+        <KImg
+          src="hummingbird.jpg"
+          altText="A sitting hummingbird"
+        >
+          <template #topLeft>
+            <span :style="{ display: 'inline-block', margin: '8px', padding: '2px', backgroundColor: 'white' }">
+              Top left
+            </span>
+          </template>
+        </KImg>
+      </DocsShowCode>
+
+      <DocsShow>
+        <KImg
+          :src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+          altText="A sitting hummingbird"
+        >
+          <template #topLeft>
+            <span :style="{ display: 'inline-block', margin: '8px', padding: '2px', backgroundColor: 'white' }">
+              Top left
+            </span>
+          </template>
+        </KImg>
+      </DocsShow>
+
+
     </DocsPageSection>
 
   </DocsPageTemplate>

diff --git a/lib/KImg.vue b/lib/KImg.vue
@@ -7,8 +7,27 @@
         :alt="alternativeText"
         :style="imgStyles"
       >
-      <!-- @slot An unstyled slot that can be used for anything that other slots are not suitable for. -->
-      <slot></slot>
+      <!-- displayed below image, TODO document -->
+      <span
+        :style="{ position: 'absolute', top: '0', right: '0', left: '0', bottom: '0', zIndex: '0' }"
+      >
+        <slot name="placeholder"></slot>
+      </span>
+
+      <!-- displayed on top of the image, TODO document -->
+      <span :style="{ position: 'absolute', top: '0',left: '0', zIndex: '2' }">
+        <slot name="topLeft"></slot>
+      </span>
+      <span :style="{ position: 'absolute', top: '0', right: '0', zIndex: '2' }">
+        <slot name="topRight"></slot>
+      </span>
+      <span :style="{ position: 'absolute', bottom: '0', left: '0', zIndex: '2' }">
+        <slot name="bottomLeft"></slot>
+      </span>
+      <span :style="{ position: 'absolute', bottom: '0', right: '0', zIndex: '2' }">
+        <slot name="bottomRight"></slot>
+      </span>
+
     </span>
   </span>
 
@@ -137,6 +156,24 @@
         default: 'centerInside', // needs to be duplicated rather than using ScaleTypes.CENTER_INSIDE, otherwise it doesn't render correctly in the auto-generated Props documentation
         validator: isValidScaleType,
       },
+      /**
+       * A color to be displayed instead or behind an image.
+       * It creates a background area which respects the dimensions
+       * set on the container.
+       *
+       * It can serve as (1) a color of the area surrounding an image when
+       * it's letterboxed, (2) creates a placeholder area displayed
+       * over the whole container when an image source is not provided,
+       * (3) creates a progressive loading experience as the colored background
+       * is displayed while an image is loading.
+       *
+       * Its default value is `$themePalette.grey.v_200`
+       */
+      backgroundColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     computed: {
       ratio() {
@@ -149,7 +186,8 @@
         return {
           rootContainer: {
             display: 'block',
-            backgroundColor: this.$themePalette.grey.v_200,
+            position: 'relative',
+            backgroundColor: this.backgroundColor,
             height: this.validateAndFormatUnits(this.height),
             width: this.validateAndFormatUnits(this.width),
             maxHeight: this.validateAndFormatUnits(this.maxHeight),
@@ -162,6 +200,8 @@
           },
           img: {
             display: 'block',
+            position: 'relative',
+            zIndex: '1',
           },
         };
       },
@@ -264,6 +304,9 @@
       },
     },
     created() {
+      if (!this.backgroundColor) {
+        this.backgroundColor = this.$themePalette.grey.v_200;
+      }
       if (!this.isDecorative && !this.altText) {
         throw new Error('Missing required prop - provide altText or indicate isDecorative');
       }