fix: Hide CoreText in preview if empty value. WF-20

[madeindjs]

Simply hide the CoreText using v-if in preview mode if the value is emptyText. We still display the component in edit mode.

Screencast.from.2024-06-29.14-37-01.webm

[FabienArcellier]

We discuss about generalizing the way we manage this sort of state. We will try to use EmptinessLabel to encapsulate the behavior.

• make a list of components to change

We would work with this layout

[madeindjs]

Hello @FabienArcellier & @ramedina86 ,

I'm trying to implement a general behavior to handle empty state for CoreText & CoreMessage . As @FabienArcellier pointed, we might want to have a general way to do this.

I succeded to implement a EmptinessState component who does the job (5ef475b) but it takes some space in preview mode (as we still render an empty comp).

Screencast.from.2024-07-16.00-24-36.webm

I saw empty state of sidebar / Header / etc.. use a different logic. It uses ChildlessPlaceholder through ComponentProxy.

writer-framework/ui/src/renderer/ComponentProxy.vue

Lines 37 to 42 in df6fa8d

	const getChildlessPlaceholderVNode = (): VNode => {
	if (children.value.length > 0) return;
	return h(ChildlessPlaceholder, {
	componentId: component.value.id,
	});
	};

So I wonder if we want the same mechanism or if it's a bit overkill for the need and the v-if is enough (ba05e50)

WDTY?

[FabienArcellier]

Hello @FabienArcellier & @ramedina86 ,

I'm trying to implement a general behavior to handle empty state for CoreText & CoreMessage . As @FabienArcellier pointed, we might want to have a general way to do this.

I succeded to implement a EmptinessState component who does the job (5ef475b) but it takes some space in preview mode (as we still render an empty comp).

Screencast.from.2024-07-16.00-24-36.webm
I saw empty state of sidebar / Header / etc.. use a different logic. It uses ChildlessPlaceholder through ComponentProxy.

writer-framework/ui/src/renderer/ComponentProxy.vue

Lines 37 to 42 in df6fa8d

	const getChildlessPlaceholderVNode = (): VNode => {
	if (children.value.length > 0) return;
	return h(ChildlessPlaceholder, {
	componentId: component.value.id,
	});
	};

So I wonder if we want the same mechanism or if it's a bit overkill for the need and the v-if is enough (ba05e50)

WDTY?

For the empty state of sidebar / Header / etc, I would stick to the current logic. The v-if looks fine.

[ramedina86]

@madeindjs Those are two different things

Childless placeholder: Automatically applied to any component that can contain children but doesn't

The other one (what you've called EmptinessState) should be used for when rendering the component would yield undesirable results due to lack of configuration/content.