Merge pull request #139 from michaelcozzolino/refactor/components-api-tables

refactor(docs): Improve Api tables and add missing snapshots

Author: michaelcozzolino

packages/docs/Api/UI/LinkableApiName.vue

@@ -0,0 +1,28 @@
+<template>
+    <FoLink v-if="declarations[0] !== undefined"
+            color="primary"
+            class="font-bold"
+            :to="declarations[0].file"
+            underline-effect="hover-animated"
+    >
+        {{ name }}
+    </FoLink>
+
+    <span v-else
+          class="text-primary"
+    >
+        {{ name }}
+    </span>
+</template>
+
+<script setup lang="ts">
+import type { Declaration } from 'vue-component-meta';
+import { FoLink }           from 'flyonui-vue';
+
+interface Props {
+    name:         string;
+    declarations: Declaration[];
+}
+
+defineProps<Props>();
+</script>

packages/docs/Api/UI/PropsApi.vue

@@ -9,7 +9,7 @@
     >
         <template #head>
             <FoTableRow class="text-center text-primary normal-case italic bg-base-300/20">
-                <FoTableHeader :colspan="4">
+                <FoTableHeader :colspan="5">
                     {{ componentName }}
                 </FoTableHeader>
             </FoTableRow>
@@ -19,6 +19,7 @@
                 <FoTableHeader>Description</FoTableHeader>
                 <FoTableHeader>Type</FoTableHeader>
                 <FoTableHeader>Values</FoTableHeader>
+                <FoTableHeader>Required</FoTableHeader>
             </FoTableRow>
         </template>
 
@@ -27,21 +28,27 @@
                         :key="prop.name"
                         class="text-center"
             >
-                <FoTableColumn class="font-mono font-semibold text-accent">
-                    {{ prop.name }}
+                <FoTableColumn class="font-mono font-semibold text-base-content">
+                    <LinkableApiName :name="prop.name"
+                                     :declarations="prop.declarations"
+                    />
                 </FoTableColumn>
 
-                <FoTableColumn class="italic text-info whitespace-break-spaces!">
+                <FoTableColumn class="italic text-base-content/70 whitespace-break-spaces!">
                     {{ prop.description ?? '-' }}
                 </FoTableColumn>
 
-                <FoTableColumn class="font-mono font-semibold text-warning whitespace-break-spaces!">
+                <FoTableColumn class="font-mono font-semibold text-base-content/80 whitespace-break-spaces!">
                     {{ prop.type }}
                 </FoTableColumn>
 
-                <FoTableColumn class="text-wrap! font-mono font-semibold text-success">
+                <FoTableColumn class="text-wrap! font-mono font-semibold text-base-content/80">
                     {{ getValues(prop.schema) }}
                 </FoTableColumn>
+
+                <FoTableColumn class="font-mono font-semibold text-error uppercase">
+                    {{ prop.required }}
+                </FoTableColumn>
             </FoTableRow>
         </template>
     </FoTable>
@@ -51,6 +58,7 @@
 import type { Api } from '@/Api/Types/Api.ts';
 
 import type { PropertyMeta, PropertyMetaSchema }             from 'vue-component-meta';
+import LinkableApiName                                       from '@/Api/UI/LinkableApiName.vue';
 import { useArrayFilter }                                    from '@vueuse/core';
 import { FoTable, FoTableColumn, FoTableHeader, FoTableRow } from 'flyonui-vue';
 

packages/docs/Api/UI/SlotsApi.vue

@@ -1,7 +1,7 @@
 <template>
     <FoTable v-if="api.length"
              :id="`${componentName}-slots`"
-             class="vp-raw rounded-lg my-4 max-w-xl"
+             class="vp-raw rounded-lg my-4"
              is-bordered
              is-responsive
              is-striped="rows"
@@ -25,11 +25,13 @@
                         :key="slot.name"
                         class="text-center"
             >
-                <FoTableColumn class="font-mono font-semibold text-accent">
-                    {{ slot.name }}
+                <FoTableColumn class="font-mono font-semibold text-base-content">
+                    <LinkableApiName :name="slot.name"
+                                     :declarations="slot.declarations"
+                    />
                 </FoTableColumn>
 
-                <FoTableColumn class="italic text-info">
+                <FoTableColumn class="italic text-base-content/70">
                     {{ slot.description ?? '-' }}
                 </FoTableColumn>
             </FoTableRow>
@@ -41,6 +43,7 @@
 import type { Api }      from '@/Api/Types/Api.ts';
 import type { SlotMeta } from 'vue-component-meta';
 
+import LinkableApiName                                       from '@/Api/UI/LinkableApiName.vue';
 import { FoTable, FoTableColumn, FoTableHeader, FoTableRow } from 'flyonui-vue';
 
 defineProps<Api<SlotMeta>>();

packages/docs/playwright.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
         // In the GitHub action the docs are built before the execution of the tests, in local they might not be.
         command:             process.env.CI ? previewCommand : `${workspaceCommand} build && ${previewCommand}`,
         url:                 baseURL,
-        timeout:             120 * 1000,
+        timeout:             600 * 1000,
         reuseExistingServer: !process.env.CI,
     },
     projects: [