Fixing button alignment and showing issue in the frontend (#64)

* Fixing buttons in block_cta

* Fixing buttons in block_steps

* Fixing buttons in block_columns

* Applying the alignment to the buttons (Directus changes required)

components/blocks/ButtonGroup.vue

@@ -19,7 +19,7 @@ function getUrl(button: BlockButton): string | undefined {
 }
 </script>
 <template>
-	<div class="flex flex-col space-y-4 md:space-x-4 md:flex-row md:space-y-0">
+	<div :class="`flex flex-col justify-${data.alignment} space-y-4 md:space-x-4 md:flex-row md:space-y-0`">
 		<UButton
 			v-for="button in data.buttons as BlockButton[]"
 			:key="button.id"

components/blocks/Columns.vue

@@ -20,6 +20,7 @@ defineProps<{
 					<TypographyTitle v-if="row?.title">{{ row?.title }}</TypographyTitle>
 					<TypographyHeadline v-if="row?.headline" :content="row?.headline" />
 					<TypographyProse v-if="row?.content" :content="row?.content" class="mt-4" />
+					<BlocksButtonGroup v-if="row?.button_group" :data="row?.button_group" class="mt-4" />
 				</div>
 				<div
 					class="order-first block w-full overflow-hidden border aspect-square dark:border-gray-700 rounded-card"

components/blocks/Cta.vue

@@ -19,18 +19,7 @@ defineProps<{
 					<TypographyProse v-if="data.content" :content="data.content" class="mt-2" />
 				</div>
 				<div class="flex-shrink-0 mt-4 md:mt-0">
-					<UButton
-						v-for="button in data.buttons"
-						:key="button.id"
-						:href="button.href"
-						:target="button.open_in_new_window ? '_blank' : '_self'"
-						size="xl"
-						color="black"
-						:label="button.label"
-						trailing-icon="material-symbols:arrow-forward-rounded"
-					>
-						{{ button.label }}
-					</UButton>
+					<BlocksButtonGroup v-if="data.button_group" :data="data.button_group" />
 				</div>
 			</div>
 		</div>

components/blocks/Steps.vue

@@ -56,6 +56,7 @@ const steps = computed(() => {
 						<TypographyTitle v-if="data.show_step_numbers">Step {{ stepIdx + 1 }}</TypographyTitle>
 						<TypographyHeadline :content="step.title" size="sm" />
 						<TypographyProse :content="step.content" class="mt-4" />
+						<BlocksButtonGroup v-if="step.button_group" :data="step.button_group" class="mt-4" />
 					</div>
 				</div>
 				<svg

pages/[...permalink].vue

@@ -67,7 +67,21 @@ const { data: page } = await useAsyncData(
 										},
 									],
 									block_quote: ['id', 'title', 'subtitle', 'content'],
-									block_cta: ['id', 'title', 'headline', 'content', 'buttons'],
+									block_cta: [
+										'id', 
+										'title', 
+										'headline', 
+										'content', 
+										'buttons', 
+										{
+											button_group: [
+												'*', 
+												{ 
+													buttons: ['*', { page: ['permalink'], post: ['slug'] }] 
+												}
+											]
+										},
+									],
 									block_form: ['id', 'title', 'headline', { form: ['*'] }],
 									block_logocloud: [
 										'id',
@@ -101,7 +115,20 @@ const { data: page } = await useAsyncData(
 										'show_step_numbers',
 										'alternate_image_position',
 										{
-											steps: ['id', 'title', 'content', 'image'],
+											steps: [
+												'id', 
+												'title', 
+												'content', 
+												'image', 
+												{
+													button_group: [
+														'*', 
+														{ 
+															buttons: ['*', { page: ['permalink'], post: ['slug'] }] 
+														}
+													]
+												},
+											],
 										},
 									],
 									block_columns: [
@@ -115,6 +142,14 @@ const { data: page } = await useAsyncData(
 												'content',
 												'image_position',
 												{ image: ['id', 'title', 'description'] },
+												{
+													button_group: [
+														'*', 
+														{ 
+															buttons: ['*', { page: ['permalink'], post: ['slug'] }] 
+														}
+													]
+												},
 											],
 										},
 									],

types/blocks/block-column.ts

@@ -1,4 +1,5 @@
 import type { File } from '../system';
+import type { BlockButtonGroup } from '../blocks';
 
 export interface BlockColumn {
 	headline?: string | null;
@@ -15,4 +16,5 @@ export interface BlockColumnRow {
 	image?: (string | File) | null;
 	image_position?: string | null;
 	title?: string | null;
+	button_group?: (string | BlockButtonGroup) | null;
 }

types/blocks/block-cta.ts

@@ -1,7 +1,10 @@
+import type { BlockButtonGroup } from '../blocks';
+
 export interface BlockCta {
 	buttons?: { [key: string]: any } | null;
 	content?: string | null;
 	headline?: string | null;
 	id?: string;
 	title?: string | null;
+	button_group?: (string | BlockButtonGroup) | null;
 }

types/blocks/block-steps.ts

@@ -1,4 +1,5 @@
 import type { File } from '../system';
+import type { BlockButtonGroup } from '../blocks';
 
 export interface BlockStep {
 	id?: string;
@@ -17,4 +18,5 @@ export interface BlockStepItem {
 	image?: (string | File) | null;
 	sort?: number | null;
 	block_steps?: (string | BlockStep) | null;
+	button_group?: (string | BlockButtonGroup) | null;
 }