Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable7] feat: Add slot for description of NcEmptyContent #4170

Merged
merged 1 commit into from Jun 6, 2023
Merged

[stable7] feat: Add slot for description of NcEmptyContent #4170

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 36 additions & 2 deletions src/components/NcEmptyContent/NcEmptyContent.vue
View file
Open in desktop
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]
},
Comment on lines 160 to 162
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: this is not well compatible with Vue 3 (by design). Isn't this.$slots.description enough to check if the description slot was passed?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As stable7 will not see vue3 (I guess) we should discuss this for the version on the master branch.

Nevertheless this is required to keep the behavior the same, as an empty slot = empty property should not show the description nodes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevertheless this is required to keep the behavior the same, as an empty slot = empty property should not show the description nodes.

By empty slot do you mean this usage:

<NcEmptyContent>
<!-- nothing -->
</NcEmptyContent>

or this

<NcEmptyContent>
  <template #description></template>
</NcEmptyContent>

?

},
}
Expand Down