Few updates and fixes

.directus/docker-compose.yaml

@@ -17,7 +17,7 @@ services:
     image: redis:6
 
   directus:
-    image: directus/directus:10.6.3
+    image: directus/directus:10.8.3
     ports:
       - 8055:8055
     volumes:

app.config.ts

@@ -84,6 +84,15 @@ export default defineAppConfig({
 				},
 			},
 		},
+		avatar: {
+			default: {},
+			rounded: 'rounded-button',
+		},
+		breadcrumb: {
+			default: {
+				divider: 'material-symbols:chevron-right',
+			},
+		},
 		pagination: {
 			rounded: 'first:rounded-l-button last:rounded-r-button',
 			default: {

components/PageBuilder.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Page, PageBlock, BlockType } from '~/types';
+import type { Page, OsProposal, PageBlock, BlockType } from '~/types';
 
 const componentMap: Record<BlockType, any> = {
 	block_hero: resolveComponent('BlocksHero'),
@@ -20,7 +20,7 @@ const componentMap: Record<BlockType, any> = {
 };
 
 const props = defineProps<{
-	page: Page;
+	page: Page | OsProposal;
 }>();
 
 const blocks = computed(() => {

components/TeamCard.vue

@@ -12,9 +12,10 @@ const flipped = ref(false);
 		<div class="relative w-full h-full overflow-hidden group rounded-card">
 			<!-- Front of Team Card -->
 			<NuxtImg
+				v-if="person.image"
 				class="object-cover w-full h-full transition duration-300 grayscale group-hover:grayscale-0"
-				:src="person.image"
-				:alt="person.name"
+				:src="person.image as string"
+				:alt="person.name ?? ''"
 			/>
 			<!-- Back of Team Card -->
 			<Motionable

components/base/Author.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import type { Team } from '~/types';
 export interface AuthorProps {
-	image?: string;
-	name?: string;
-	job_title?: string;
+	author?: Team;
 	size?: 'sm' | 'md' | 'lg';
 }
 
@@ -15,8 +14,8 @@ const { fileUrl } = useFiles();
 <template>
 	<div class="flex items-center flex-none group dark:text-gray-100">
 		<div class="mr-3">
-			<img
-				v-if="image"
+			<NuxtImg
+				v-if="author?.image"
 				:class="[
 					{
 						'w-8 h-8 sm:h-10 sm:w-10': size === 'sm',
@@ -25,7 +24,7 @@ const { fileUrl } = useFiles();
 					},
 					'object-cover rounded-full dark:brightness-90',
 				]"
-				:src="fileUrl(image)"
+				:src="fileUrl(author.image as string)"
 			/>
 		</div>
 
@@ -39,10 +38,10 @@ const { fileUrl } = useFiles();
 				' ',
 			]"
 		>
-			<span class="font-semibold font-display">{{ name }}</span>
+			<span class="font-semibold font-display">{{ author?.name }}</span>
 
 			<span
-				v-if="job_title"
+				v-if="author?.job_title"
 				:class="[
 					{
 						'text-xs': size === 'sm',
@@ -52,7 +51,7 @@ const { fileUrl } = useFiles();
 					'block   pt-0.5',
 				]"
 			>
-				{{ job_title }}
+				{{ author.job_title }}
 			</span>
 		</div>
 	</div>

components/base/FormCustom.ts

@@ -1,4 +1,5 @@
-import Form from '#ui/components/forms/Form.vue';
+import type { Form } from '~/types';
+import * as UForm from '#ui/components/forms/Form.vue';
 import FormGroup from '#ui/components/forms/FormGroup.vue';
 import Input from '#ui/components/forms/Input.vue';
 import Textarea from '#ui/components/forms/Textarea.vue';
@@ -37,8 +38,8 @@
 export default defineComponent({
 	props: {
 		schema: {
-			type: Array,
-			default: () => [],
+			type: Array as PropType<Form['schema']>,
+			required: true,
 		},
 		state: {
 			type: Object,
@@ -52,8 +53,8 @@
 		},
 	},
 	setup(props) {
-		const groups = props.schema.map((item) => {
+		const groups = props.schema?.map((item) => {
 			const { name, label, placeholder, width, description } = item as { [key: string]: any };
 
 			// @ts-ignore
 			const cssClass = widthClassMap[item.width] || 'md:col-span-6';
@@ -64,6 +65,10 @@
 			]);
 		});
 
+		if (!groups) {
+			return () => null;
+		}
+
 		// Add the submit button to the groups array
 		groups.push(
 			h(
@@ -83,6 +88,6 @@
 		);
 
 		// @ts-ignore
-		return () => h(Form, { state: props.state, validate: props.validate }, () => groups);
+		return () => h(UForm, { state: props.state, validate: props.validate }, () => groups);
 	},
 });

components/base/LoginForm.vue

@@ -9,9 +9,7 @@
 			color="rose"
 			variant="outline"
 			icon="material-symbols:warning-rounded"
-		>
-			Error: {{ error }}
-		</UAlert>
+		/>
 
 		<form class="grid gap-4" @submit.prevent="attemptLogin">
 			<UFormGroup label="Email" required>
@@ -25,6 +23,17 @@
 					placeholder="[email protected]"
 				/>
 			</UFormGroup>
+			<UFormGroup label="Password" required>
+				<UInput
+					v-model="credentials.password"
+					type="password"
+					:disabled="loading"
+					size="lg"
+					name="email"
+					label="Password"
+					placeholder="Your Password"
+				/>
+			</UFormGroup>
 			<UButton
 				type="submit"
 				:loading="loading"
@@ -36,15 +45,16 @@
 			/>
 		</form>
 
-		<div class="mt-6">
+		<!-- @TODO Remove password once magic link authentication is added -->
+		<!-- <div class="mt-6">
 			<VText>
 				<UIcon name="material-symbols:info-rounded" class="mr-2" />
 				<span>What about a password?</span>
 			</VText>
 			<VText text-color="light" size="xs" class="mt-2">
 				Not needed 😃. Just enter your email above and we'll send you a magic link to login to your dashboard.
 			</VText>
-		</div>
+		</div> -->
 	</div>
 </template>
 
@@ -53,6 +63,7 @@ const { login } = useDirectusAuth();
 const loading = ref(false);
 const error = ref(null);
 
+// You'll want to remove these preset credentials before you deploy your site
 const credentials = reactive({
 	email: '[email protected]',
 	password: 'password',
@@ -64,7 +75,7 @@ async function attemptLogin() {
 	error.value = null;
 
 	try {
-		// Be careful when using the login function because you have to pass the email and password as arguments.
+		// Be careful when using the login function because you have to pass the email and password as separate arguments instead of an object.
 		await login(email, password);
 	} catch (err) {
 		error.value = err.message;

components/base/UForm.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Form } from '~/types';
 import type { FormError } from '@nuxt/ui/dist/runtime/types';
-import { transformSchema } from '~/utils/formkit';
 
 const props = defineProps<{
 	form: Form;
@@ -16,8 +15,6 @@ const loading = ref(false);
 const error: any = ref(null);
 const success = ref(false);
 
-// const schema = transformSchema(props.form.schema);
-
 const validate = (state: any): FormError[] => {
 	const errors = [];
 	if (!state.email) errors.push({ path: 'email', message: 'Required' });
@@ -64,7 +61,6 @@ watch(
 				{{ form.success_message ?? 'Success! Your form has been submitted.' }}
 			</VAlert>
 		</div>
-		<!-- <FormKit v-if="!success" type="form" v-model="formData" @submit="submitForm" :submit-label="form.submit_label"> -->
 		<div>
 			<FormCustom
 				v-if="!success"
@@ -74,8 +70,6 @@ watch(
 				class="grid gap-6 md:grid-cols-6"
 				:on-submit="submitForm"
 			/>
-			<!-- <FormKitSchema :schema="schema" /> -->
 		</div>
-		<!-- </FormKit> -->
 	</div>
 </template>

components/base/VBreadcrumbs.vue

@@ -2,21 +2,21 @@
 export interface BreadcrumbsProps {
 	items: Array<{
 		title: string;
-		href: string;
+		href?: string | null | undefined;
 	}>;
 }
 
 defineProps<BreadcrumbsProps>();
 </script>
 <template>
-	<div class="flex flex-wrap items-center space-x-2 text -sm dark:text-gray-200">
+	<div class="flex flex-wrap items-center space-x-1 text -sm dark:text-gray-200">
 		<template v-for="(item, itemIdx) in items" :key="itemIdx">
 			<template v-if="item.href">
 				<NuxtLink :href="item.href" class="hover:text-primary">
 					{{ item.title }}
 				</NuxtLink>
 				<div v-if="itemIdx !== items.length - 1">
-					<Icon name="heroicons:chevron-right" class="h-5" />
+					<Icon name="material-symbols:chevron-right-rounded" class="h-6 w-6 text-gray-500" />
 				</div>
 			</template>
 			<span v-else class="font-bold">

components/base/VGallery.vue

@@ -1,19 +1,14 @@
 <script setup lang="ts">
+import type { File } from '~/types';
 import { TransitionRoot } from '@headlessui/vue';
 
 export interface GalleryProps {
-	items: [
-		{
-			id?: string;
-			title?: string;
-			description?: string;
-		},
-	];
+	items: File[];
 }
 
 const props = defineProps<GalleryProps>();
 
 const { fileUrl } = useFiles();
 
 const isOpen = ref(false);
 const currentItemIdx = ref(0);

components/base/VHorizontalNavigation.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 export interface HorizontalNavigationProps {
-	items: [
-		{
-			name: string;
-			href: string;
-		},
-	];
+	items: Array<{
+		name: string;
+		href: string;
+	}>;
 }
 
 const props = defineProps<HorizontalNavigationProps>();
 </script>
 
 <template>

components/base/VSignature.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// @ts-expect-error - VPerfectSignature is not typed
 import { VPerfectSignature } from 'v-perfect-signature';
 
 const colorMode = useColorMode();

components/base/VVideo.vue

@@ -3,7 +3,7 @@ import { generateVideoEmbed } from '~~/utils/embed';
 
 interface VideoProps {
 	url: string;
-	title?: string;
+	title?: string | null | undefined;
 	name?: string;
 }
 
@@ -19,7 +19,7 @@ defineProps<VideoProps>();
 		frameborder="0"
 		allow="autoplay; fullscreen; picture-in-picture"
 		allowfullscreen
-		:title="title"
+		:title="title as string"
 	></iframe>
 </template>
 

components/blocks/ButtonGroup.vue

@@ -27,7 +27,7 @@ function getUrl(button: BlockButton): string | undefined {
 			:color="button?.color"
 			:variant="button?.variant"
 			:target="button?.external_url ? '_blank' : '_self'"
-			:label="button?.label"
+			:label="button?.label ?? undefined"
 			size="xl"
 			trailing-icon="material-symbols:arrow-forward-rounded"
 		/>

components/blocks/Columns.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BlockColumn, BlockColumnRow, File } from '~/types';
+import type { BlockButtonGroup, BlockColumn, BlockColumnRow } from '~/types';
 
 defineProps<{
 	data: BlockColumn;
@@ -20,7 +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" />
+					<BlocksButtonGroup v-if="row?.button_group" :data="row?.button_group as BlockButtonGroup" class="mt-4" />
 				</div>
 				<div
 					class="order-first block w-full overflow-hidden border aspect-square dark:border-gray-700 rounded-card"
@@ -39,8 +39,9 @@ defineProps<{
 						:delay="250"
 					>
 						<NuxtImg
+							v-if="row.image"
 							:alt="safeRelation(row.image)?.description ?? ''"
-							:src="safeRelationId(row.image)"
+							:src="safeRelationId(row.image) ?? ''"
 							class="object-cover object-center w-full h-full bg-gray-100 rounded-card dark:brightness-90"
 						/>
 					</div>

components/blocks/Cta.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BlockCta } from '~/types';
+import type { BlockButtonGroup, BlockCta } from '~/types';
 
 defineProps<{
 	data: BlockCta;
@@ -19,7 +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">
-					<BlocksButtonGroup v-if="data.button_group" :data="data.button_group" />
+					<BlocksButtonGroup v-if="data.button_group" :data="data.button_group as BlockButtonGroup" />
 				</div>
 			</div>
 		</div>