feat: add option to hide placeholder

ICIJ · Jul 16, 2024 · 269ebf5 · 269ebf5
1 parent f3200a8
commit 269ebf5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/components/Document/DocumentThumbnail.vue b/src/components/Document/DocumentThumbnail.vue
@@ -88,6 +88,12 @@ export default {
     ratio: {
       type: Number,
       default: null
+    },
+    /**
+     * Make sure the placeholder is never visible
+     */
+    hidePlaceholder: {
+      type: Boolean
     }
   },
   data() {
@@ -101,6 +107,7 @@ export default {
   computed: {
     thumbnailClass() {
       return {
+        'document-thumbnail--hide-placeholder': this.hidePlaceholder,
         'document-thumbnail--active': this.active,
         'document-thumbnail--crop': this.crop,
         'document-thumbnail--fit': this.fit,
@@ -331,6 +338,10 @@ export default {
     background: var(--bs-light-bg-subtle);
   }
 
+  &--hide-placeholder &__placeholder {
+    display: none;
+  }
+
   &__overlay {
     position: absolute;
     z-index: $zindex-overlay;

diff --git a/src/stories/components/Document/DocumentThumbnail.stories.js b/src/stories/components/Document/DocumentThumbnail.stories.js
@@ -19,6 +19,7 @@ export default {
     crop: true,
     hover: false,
     clickable: true,
+    hidePlaceholder: false,
     fit: false,
     document: {
       extractionLevel: 0,
@@ -47,6 +48,7 @@ export const WithPlaceholder = {
     size: 'xs',
     crop: true,
     fit: false,
+    hidePlaceholder: false,
     document: {
       extractionLevel: 0,
       inlineFullUrl: null,