PrimeVue Block Source Code

[condoshark]

We purchased PrimeVue Blocks and were surprised to see that components are not used in some instances. I'm assuming what we are seeing is the html output of a component. A good example is the sign in block.

<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>

Is there a reason component code is not provided for what I would expect is a <Card> component? Further down in the file <InputText> and <Checkbox> components are used.....but why not for the <Card>? Just trying to understand if this is how blocks should be used and I guess a little confused on why this approach was chosen.

[tugce.kucukoglu]

Card is a kind of composite component than the InputText and Checkbox. Styles of InputText and Checkbox can be override easily but Card uses templating slots. Instead of using Card component, to keep it simple we prefer just use PrimeFlex classes.

[Imithe201]

Hello
As per your given data I can suggest you here that
I can provide some general insights.

From what you have described, it appears that PrimeVue Blocks may be using a combination of components and HTML markup to create its UI components. In some cases, it may be more efficient or straightforward to use HTML markup instead of creating a new component for a specific use case.

Regarding the specific example you provided, it is possible that the "surface-card" div with various classes is a custom CSS class that provides the same styling as a <Card> component. Alternatively, it may be a design decision to use the div element instead of a <Card> component for that particular UI element.

Overall, the approach of using a mix of components and HTML markup can be a valid and efficient way to create UI components. However, it is important to ensure that the markup and components used are accessible, reusable, and maintainable. Do not have idea how much helps but please give your feedback here C4Yourself.com

[tugce.kucukoglu]

In some cases, we prefer to use PrimeVue components based on how close the block design is to the design of PrimeVue components. And try to keep that to a minimum.