Blocks

Safḥa provides a large number of blocks to build and customize your application. You can see a list of all the blocks in the blocks section.

Starter Example

Here is an example of what a block might look like using Safḥa blocks:

<template>
	<AccordionA v-model="accordionState">
		<AccordionItem
			v-for="item, itemIndex in accordionData"
			:key="itemIndex"
			:name="`item-${itemIndex}`"
		>
			<AccordionHeader>
				{{ item.label }}
			</AccordionHeader>

			<AccordionBody>
				<ParagraphA>
					{{ item.content }}
				</ParagraphA>
			</AccordionBody>
		</AccordionItem>
	</AccordionA>
</template>

<script setup lang="ts">
const accordionState = ref<string>();
const accordionData = [
	{
		label: 'How do I reset my password?',
		content: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
	},
	{
		label: 'How do I change my email address?',
		content: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
	},
	{
		label: 'How do I update my billing information?',
		content: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
	},
];

</script>

Wrapping Components

As seen in the above example, the AccordionA component wraps the AccordionItem, AccordionHeader, and AccordionBody components. This is a common pattern in Safḥa blocks. It provides a flexible way to customize blocks. However, it might be a bit verbose to write and read on the long run.

To make it easier to use, you can create a custom component that wraps these components and then customize the style and behavior through props. Here is an example of how you can create a wrapper component for the AccordionA block:

<template>
	<AccordionA>
		<AccordionItem
			v-for="item, itemIndex in accordionData"
			:key="itemIndex"
			:name="`item-${itemIndex}`"
		>
			<AccordionHeader>
				{{ item.label }}
			</AccordionHeader>

			<AccordionBody>
				<ParagraphA>
					{{ item.content }}
				</ParagraphA>
			</AccordionBody>
		</AccordionItem>
	</AccordionA>
</template>

<script setup lang="ts">
defineProps({
	accordionData: {
		type: Array,
		required: true,
	},
});

</script>

Save the above code in a file named CustomAccordion.vue inside the components directory. Then, you can use the CustomAccordion component in your application like this:

<template>
	<!-- Component is imported automatically -->
	<CustomAccordion :accordionData="accordionData" v-model="accordionState" />
</template>

<script setup lang="ts">
const accordionState = ref<string>();
const accordionData = [
	{
		label: 'How do I reset my password?',
		content: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
	},
	{
		label: 'How do I change my email address?',
		content: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
	},
	{
		label: 'How do I update my billing information?',
		content: 'lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
	},
];

</script>

We can see that that now we can use the AccordionA block with a more concise syntax. This is especially useful when you have multiple instances of the same block in your application.