Skip to content

Commit

Permalink
feat: Add slot for description of NcEmptyContent
Browse files Browse the repository at this point in the history
Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
  • Loading branch information
susnux committed May 31, 2023
1 parent fe2edcf commit 3ad8745
Showing 1 changed file with 36 additions and 2 deletions.
38 changes: 36 additions & 2 deletions src/components/NcEmptyContent/NcEmptyContent.vue
Expand Up @@ -73,6 +73,34 @@ and add actions.
<script>
import Comment from 'vue-material-design-icons/Comment'
export default {
components: {
Comment,
},
}
</script>
```

Similar to the `#title` slot, you could also use the `#description` slot.
The content will be rendered within a paragraph so you can use any inline element,
like a link.

```
<template>
<NcEmptyContent
title="No comments">
<template #icon>
<Comment />
</template>
<template #description>
<a href="https://en.wikipedia.org/wiki/Comment">What is even a comment?</a>
</template>
</NcEmptyContent>
</template>

<script>
import Comment from 'vue-material-design-icons/Comment'
export default {
components: {
Comment,
Expand All @@ -94,7 +122,10 @@ export default {
</h2>
</slot>
<p v-if="hasDescription">
{{ description }}
<!-- @slot Optional formatted description rendered inside a paragraph -->
<slot name="description">
{{ description }}
</slot>
</p>
<div v-if="$slots.action" class="empty-content__action">
<!-- @slot Optional slot for a button or the like -->
Expand Down Expand Up @@ -123,8 +154,11 @@ export default {
hasTitle() {
return this.title !== ''
},
/**
* Check if a description is given as either property or slot
*/
hasDescription() {
return this.description !== ''
return this.description !== '' || this.$slots.description?.[0]
},
},
}
Expand Down

0 comments on commit 3ad8745

Please sign in to comment.