feat(tailwind-components): update header for design

apps/tailwind-components/components/BreadCrumbs.vue

@@ -1,15 +1,16 @@
-<script setup>
-defineProps({
-  crumbs: {
-    type: Object,
-    default: [],
-    required: false,
-  },
-  current: {
-    type: String,
-    required: false,
-  },
-});
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    crumbs?: Record<string, string>;
+    current?: string | undefined;
+    align?: "left" | "center";
+  }>(),
+  {
+    crumbs: () => ({}),
+    current: undefined,
+    align: "center",
+  }
+);
 </script>
 
 <template>
@@ -24,7 +25,8 @@ defineProps({
     </a> -->
   </div>
   <nav
-    class="items-center justify-center hidden gap-3 tracking-widest xl:flex font-display text-heading-lg"
+    class="items-center hidden gap-3 tracking-widest xl:flex font-display text-heading-lg"
+    :class="{ 'justify-center': align === 'center' }"
   >
     <template v-for="(url, label, index) in crumbs" :key="label">
       <NuxtLink :to="url" class="text-breadcrumb hover:underline">{{

apps/tailwind-components/components/PageHeader.vue

@@ -1,30 +1,32 @@
-<script setup>
+<script setup lang="ts">
 import { useSlots } from "vue";
 
 const slots = useSlots();
 
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: { type: String },
-  icon: {
-    type: String,
-  },
-  truncate: {
-    type: Boolean,
-    default: true,
-  },
-});
+withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    icon?: string;
+    truncate?: boolean;
+    align?: "left" | "center";
+  }>(),
+  {
+    truncate: true,
+    align: "center",
+  }
+);
 </script>
 
 <template>
   <header class="flex flex-col px-5 pt-5 pb-6 antialiased lg:pb-10 lg:px-0">
     <div class="mb-6" v-if="slots.prefix">
       <slot name="prefix"></slot>
     </div>
-    <div class="flex flex-col items-center text-title">
+    <div
+      class="flex flex-col text-title"
+      :class="{ 'items-center': align === 'center' }"
+    >
       <span class="mb-2 mt-2.5 xl:block hidden text-icon" v-if="icon">
         <BaseIcon :name="icon" :width="55" />
       </span>

apps/tailwind-components/components/content/ContentBlock.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  title: string;
+  title?: string;
   description?: string;
 }>();
 </script>

apps/tailwind-components/pages/BreadCrumbs.story.vue

@@ -0,0 +1,28 @@
+<template>
+  <p class="pb-3">Default breadcrumbs, with 3 items</p>
+  <div>
+    <BreadCrumbs :crumbs="crumbs" />
+  </div>
+
+  <p class="pt-6 pb-3">Breadcrumbs aligined left</p>
+  <div>
+    <BreadCrumbs :crumbs="crumbs" align="left" />
+  </div>
+
+  <p class="pt-6 pb-3">Breadcrumbs with 'item 4' as current</p>
+  <div>
+    <BreadCrumbs :crumbs="crumbs" current="item 4" align="left" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+interface Crumbs {
+  [key: string]: string;
+}
+
+const crumbs = ref<Crumbs>({});
+crumbs.value["item 1"] = route.path;
+crumbs.value["item 2"] = route.path;
+crumbs.value["item 3"] = route.path;
+</script>

apps/ui/pages/[schema]/[table]/index.vue

@@ -86,27 +86,25 @@ function handleSettingsUpdate(settings: ITableSettings) {
 
   router.push({ query });
 }
+
+const crumbs = computed(() => {
+  let crumb: { [key: string]: string } = {};
+  crumb[schemaId] = `/${schemaId}`;
+  return crumb;
+});
+const current = computed(
+  () => tableMetaData.value?.label ?? tableMetaData.value?.id ?? ""
+);
 </script>
 <template>
   <Container>
-    <PageHeader :title="tableMetaData?.label">
+    <PageHeader :title="tableMetaData?.label ?? ''" align="left">
       <template #prefix>
-        <BreadCrumbs
-          :crumbs="{
-            databases: '/',
-            tables: `/${schemaId}`,
-            [tableMetaData?.label ||
-            tableMetaData?.id ||
-            '']: `/${schemaId}/${tableId}`,
-          }"
-        />
+        <BreadCrumbs :align="'left'" :crumbs="crumbs" :current="current" />
       </template>
     </PageHeader>
 
-    <ContentBlock
-      :title="tableMetaData?.label || tableMetaData?.id || ''"
-      :description="tableMetaData?.description"
-    >
+    <ContentBlock>
       <div v-if="status === 'pending'">Loading...</div>
       <div v-if="error">Error: {{ error }}</div>
       <!-- <pre v-if="data">{{ tableMetaData }}</pre> -->

apps/ui/pages/[schema]/index.vue

@@ -46,14 +46,9 @@ const ontologies = computed(
 </script>
 <template>
   <Container>
-    <PageHeader :title="`Tables in ${data?.data._schema.label}`">
+    <PageHeader :title="`Tables in ${data?.data._schema.label}`" align="left">
       <template #prefix>
-        <BreadCrumbs
-          :crumbs="{
-            databases: '/',
-            tables: `/${schema}`,
-          }"
-        />
+        <BreadCrumbs align="left" :current="data?.data._schema.label" />
       </template>
     </PageHeader>