Allow more than text on EmptyContent description

[jotoeri]

Adding a slot to NcEmptyContent to put a button below.

There is however still a problem with reactivity, when using multiple NcEmptyContent 'after' each other.
If i first show an EmptyContent with LoadingIcon only, and after finished loading i want to show an EmptyContent with icon and text, then the text is not shown. Same applies to Icon (Action, Desc), if a slot is not used on the first usage, but should be shown on the second. (Example in nextcloud/forms#1308)
@raimund-schluessler @skjnldsv @Pytal Any idea, how to fix the emptyContent reactivity here? Seems like there was some attempt to fix reactivity in #2867, but did this maybe introduce the problem? 🙈

[Pytal]

I cannot reproduce this @jotoeri, works when e.g. starting with no icon then toggling the icon like this

<template #icon>
	<Airplane v-if="show" />
</template>

but doesn't when doing

<template v-if="show" #icon>
	<Airplane />
</template>

[jotoeri]

You can have a look into nextcloud/forms#1308

What i'm trying to do is:

<NcEmptyContent v-if="loading">
	<template #icon>
		<Airplane />
	</template>
</NcEmptyContent>
<NcEmptyContent v-else>
	<template #icon>
		<Airplane />
	</template>
	{{ t('forms', 'Some translated text') }}
</NcEmptyContent>

But the Text then doesn't show up.

You can do it even more clear like this, where the icon does not show up:

<NcEmptyContent v-if="loading">
	{{ t('forms', 'Some translated text') }}
</NcEmptyContent>
<NcEmptyContent v-else>
	<template #icon>
		<Airplane />
	</template>
	{{ t('forms', 'Some translated text') }}
</NcEmptyContent>

However, here the icon shows up on the second EmptyContent:

<NcEmptyContent v-if="loading">
	<template #icon>
		<div />
	</template>
	{{ t('forms', 'Some translated text') }}
</NcEmptyContent>
<NcEmptyContent v-else>
	<template #icon>
		<Airplane />
	</template>
	{{ t('forms', 'Some translated text') }}
</NcEmptyContent>

[skjnldsv]

Why not use the description?
That seems appropriate to add any content but the title?

[jotoeri]

Why not use the description?

Currently the description is constrained to text-only and the EmptyContent on forms (created by you 😉) had a description-slot as well as an action-slot. This is why i went this way. But i'm also fine with opening the desc-slot to any content.

[Pytal]

We could put the v-if/v-else not on NcEmptyContent itself but on the icon or text used inside NcEmptyContent, would that work @jotoeri?

[jotoeri]

Didnt test yet, but from your example above i also thought that could be a workaround. However:

• Makes the code less logical, as in fact i want to show different Emptycontents as a total.
• It's a workaround, that does not solve the issue, that normally the component should work with my code above.

[skjnldsv]

Why not use the description?

Currently the description is constrained to text-only and the EmptyContent on forms (created by you wink) had a description-slot as well as an action-slot. This is why i went this way. But i'm also fine with opening the desc-slot to any content.

Would be simpler to widen the description imho

[raimund-schluessler]

Very good, this saves me this hacked solution of putting   in the description to show the buttons:
https://github.com/nextcloud/tasks/blob/0611f1b897c4681035b7e6541247dd4dcc9cea44/src/components/TaskCreateDialog.vue#L77-L85