fixup! Add a new slot to support full width view for mail list

Signed-off-by: greta <gretadoci@gmail.com>

src/components/NcListItem/NcListItem.vue

@@ -354,44 +354,60 @@
 					<div class="list-item-content">
 						<div class="list-item-content__main"
 							:class="{ 'list-item-content__main--oneline': oneLine, 'list-item-content__main--full-width-view' : fullWidthView }">
+							<!-- Default view with details at the end -->
+							<slot name="default">
+								<!-- First line, name -->
+								<div class="line-one">
+									<span class="line-one__name">
+										<slot name="name" />
+									</span>
+								</div>
+								<!-- First line, name and details -->
+								<div class="line-one">
+									<span class="line-one__name">
+										{{ name }}
+									</span>
+									<span v-if="showDetails"
+										class="line-one__details">
+										<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->
+										<slot name="details">{{ details }}</slot>
+									</span>
+								</div>
+
+								<!-- Second line, subname and counter -->
+								<div class="line-two"
+									:class="{'line-two--bold': bold}">
+									<span v-if="hasSubname" class="line-two__subname">
+										<!-- @slot Slot for the second line of the component -->
+										<slot name="subname" />
+									</span>
 
-							<!-- First line, name and details -->
-							<div class="line-one">
-								<span class="line-one__name">
-									{{ name }}
-								</span>
-								<span v-if="showDetails"
-									class="line-one__details">
-									<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->
-									<slot name="details">{{ details }}</slot>
-								</span>
-							</div>
-
-							<!-- Second line, subname and counter -->
-							<div class="line-two"
-								:class="{'line-two--bold': bold}">
-								<span v-if="hasSubname" class="line-two__subname">
-									<!-- @slot Slot for the second line of the component -->
-									<slot name="subname" />
-								</span>
-
-								<!-- Counter and indicator -->
-								<span v-if="counterNumber != 0 || hasIndicator"
-									v-show="showAdditionalElements"
-									class="line-two__additional_elements">
-									<NcCounterBubble v-if="counterNumber != 0"
-										:active="isActive || active"
-										class="line-two__counter"
-										:type="counterType">
-										{{ counterNumber }}
-									</NcCounterBubble>
-
-									<span v-if="hasIndicator" class="line-two__indicator">
-										<!-- @slot This slot is used for some indicator in form of icon -->
-										<slot name="indicator" />
+									<!-- Counter and indicator -->
+									<span v-if="counterNumber != 0 || hasIndicator"
+										v-show="showAdditionalElements"
+										class="line-two__additional_elements">
+										<NcCounterBubble v-if="counterNumber != 0"
+											:active="isActive || active"
+											class="line-two__counter"
+											:type="counterType">
+											{{ counterNumber }}
+										</NcCounterBubble>
+
+										<span v-if="hasIndicator" class="line-two__indicator">
+											<!-- @slot This slot is used for some indicator in form of icon -->
+											<slot name="indicator" />
+										</span>
 									</span>
-								</span>
-							</div>
+								</div>
+							</slot>
+							<!-- Detailed view with details as it is now -->
+							<slot name="detailed">
+								<div v-if="showDetails" class="line-details">
+									<span class="line-details__content">
+										<slot name="details">{{ details }}</slot>
+									</span>
+								</div>
+							</slot>
 						</div>
 					</div>
 				</a>
@@ -555,6 +571,9 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Show the NcListItem in full width (one line) design
+		 */
 		fullWidthView: {
 			type: Boolean,
 			default: false,