Fix slot content detection

lana · Dec 29, 2021 · 20f63ff · 20f63ff
1 parent fd37752
commit 20f63ff
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lana/b2c-mapp-ui",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "description": "Shared custom libraries for building µapps.",
   "bugs": {
     "url": "https://github.com/lana/b2c-mapp-ui/issues"

diff --git a/src/components/ActionItem/ActionItem.js b/src/components/ActionItem/ActionItem.js
@@ -1,3 +1,5 @@
+import { Comment } from 'vue';
+
 import TextParagraph from '../TextParagraph/TextParagraph.vue';
 
 const errorStatuses = [
@@ -32,6 +34,10 @@ const props = {
 const emits = ['click'];
 
 const computed = {
+  hasDefaultSlot() {
+    const result = this.$slots.default && this.$slots.default().findIndex((node) => (node.type !== Comment)) !== -1;
+    return result;
+  },
   hasErrorStatus() {
     if (!this.status) { return; }
     const result = errorStatuses.includes(this.status.toLowerCase());

diff --git a/src/components/ActionItem/ActionItem.stories.js b/src/components/ActionItem/ActionItem.stories.js
@@ -61,7 +61,7 @@ const defaultExample = (args, { argTypes }) => ({
                   :status="status"
                   @click="onClick"
       >
-        <RenderString :string="defaultSlot" />
+        <RenderString v-if="defaultSlot" :string="defaultSlot" />
       </ActionItem>
     </ul>
   `,
@@ -137,6 +137,14 @@ const fullExample = (args, { argTypes }) => ({
               <DocumentFilledIcon/>
             </div>
           </ActionItem>
+          <ActionItem :title="title"
+                      :description="description"
+                      :highlight="highlight"
+                      :status="status"
+                      @click="onClick"
+          >
+            <div v-if="false"/>
+          </ActionItem>
         </ul>
   `,
 });

diff --git a/src/components/ActionItem/ActionItem.vue b/src/components/ActionItem/ActionItem.vue
@@ -3,7 +3,7 @@
       class="item"
       @click="onClick"
   >
-    <div v-if="$slots.default"
+    <div v-if="hasDefaultSlot"
          class="media"
          :data-testid="`${dataTestId}-mediacolor`"
     >

diff --git a/src/components/BoxContentItem/BoxContentItem.js b/src/components/BoxContentItem/BoxContentItem.js
@@ -35,12 +35,16 @@ const data = function () {
 };
 
 const computed = {
+  hasDefaultSlot() {
+    const result = this.$slots.default && this.$slots.default().findIndex((node) => (node.type !== Comment)) !== -1;
+    return result;
+  },
   hasIcon() {
     const result = (this.success);
     return result;
   },
   hasMetaText() {
-    const result = (this.metaText || this.$slots.customMetaText);
+    const result = (this.metaText || this.$slots.customMetaText());
     return result;
   },
 };

diff --git a/src/components/BoxContentItem/BoxContentItem.vue b/src/components/BoxContentItem/BoxContentItem.vue
@@ -7,7 +7,7 @@
       @touchStart="toggleIsPressed"
       @touchEnd="toggleIsPressed"
   >
-    <div v-if="$slots.default"
+    <div v-if="hasDefaultSlot"
          class="media"
          :data-testid="`${dataTestId}-media-icon`"
     >

diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
@@ -26,7 +26,7 @@
               @click="debouncedChangeRenderedItem(-1)"
       >
         <slot v-if="arrowIcons" name="leftArrowIcon">
-          <ChevronLeftIcon v-if="!$slots.leftArrowIcon" class="icon"/>
+          <ChevronLeftIcon class="icon"/>
         </slot>
       </button>
       <button v-show="isNextAvailable"
@@ -38,7 +38,7 @@
               @click="debouncedChangeRenderedItem(1)"
       >
         <slot v-if="arrowIcons" name="rightArrowIcon">
-          <ChevronRightIcon v-if="!$slots.rightArrowIcon" class="icon"/>
+          <ChevronRightIcon class="icon"/>
         </slot>
       </button>
     </slot>

diff --git a/src/components/ContentItem/ContentItem.js b/src/components/ContentItem/ContentItem.js
@@ -44,12 +44,16 @@ const data = function () {
 };
 
 const computed = {
+  hasDefaultSlot() {
+    const result = this.$slots.default && this.$slots.default().findIndex((node) => (node.type !== Comment)) !== -1;
+    return result;
+  },
   hasIcon() {
     const result = (this.success || this.hasForwardButton);
     return result;
   },
   hasMetaText() {
-    const result = (this.metaText || this.$slots.customMetaText);
+    const result = (this.metaText || (this.$slots.customMetaText && this.$slots.customMetaText().findIndex((node) => (node.type !== Comment)) !== -1));
     return result;
   },
   iconName() {

diff --git a/src/components/ContentItem/ContentItem.vue b/src/components/ContentItem/ContentItem.vue
@@ -7,7 +7,7 @@
       @touchStart="toggleIsPressed"
       @touchEnd="toggleIsPressed"
   >
-    <div v-if="$slots.default"
+    <div v-if="hasDefaultSlot"
          class="media"
          :class="{ 'no-border': noBorder }"
          :data-testid="`${dataTestId}-media-icon`"

diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
@@ -54,6 +54,10 @@ const watch = {
 };
 
 const computed = {
+  hasDefaultSlot() {
+    const result = this.$slots.default && this.$slots.default().findIndex((node) => (node.type !== Comment)) !== -1;
+    return result;
+  },
   isRightLabelShowing() {
     const result = (!this.hasToggle && this.rightLabel);
     return result;

diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="list-item" :data-testid="dataTestId">
-    <div v-if="$slots.default"
+    <div v-if="hasDefaultSlot"
          class="media"
          :data-testid="`${dataTestId}-icon`"
     >