fix(theme): use ApiAnchor directly to render Api organism

tsedio · Oct 28, 2024 · e7c9353 · e7c9353
1 parent d79384f
commit e7c9353
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/packages/theme/organisms/api/Api.vue b/packages/theme/organisms/api/Api.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 
 import {computed, ref} from "vue";
-import ApiList from "../../molecules/api-list/ApiList.vue";
 import LightBanner from "../../molecules/banner/LightBanner.vue";
 import {Search} from "lucide-vue-next";
 import ButtonBoxes from "../../molecules/button-boxes/ButtonBoxes.vue";
 import type {ApiResponse, ApiSymbol} from "../../composables/api/interfaces/Api";
+import ApiAnchor from "../../molecules/api-anchor/ApiAnchor.vue";
 
-interface Props extends ApiResponse {}
+interface Props extends ApiResponse {
+}
 
 const {symbolTypes, modules: initialModules} = withDefaults(defineProps<Props>(), {});
 
 const q = ref("");
 const category = ref("");
 const categoriesChoices = computed(() => [{label: "All", value: ""}].concat(symbolTypes || []));
-let timeout: NodeJS.Timeout | null = null;
 
 const modules = computed<Record<string, { name: string; symbols: ApiSymbol[]; }>>(() => {
   return Object.entries(initialModules).reduce((acc, [key, value]) => {
@@ -74,7 +74,13 @@ const modules = computed<Record<string, { name: string; symbols: ApiSymbol[]; }>
            class="transition-opacity duration-500">
         <h2 class="font-bold text-xl">{{ module.name }}</h2>
 
-        <ApiList class="mt-4" :items="module.symbols"></ApiList>
+        <div class="bg-gray-100 dark:bg-gray-900 pb-4 p-5 mt-4 mb-10 rounded-sm">
+          <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+            <div v-for="item in module.symbols" :key="item.symbolName">
+              <ApiAnchor class="w-full px-2 py-1" v-bind="item" theme="list"/>
+            </div>
+          </div>
+        </div>
       </div>
     </template>
   </div>

diff --git a/vitest.config.ts b/vitest.config.ts
@@ -19,10 +19,10 @@ export default defineConfig({
       enabled: true,
       thresholds: {
         autoUpdate: true,
-        statements: 64.74,
-        branches: 80.31,
-        functions: 69.81,
-        lines: 64.74
+        statements: 64.61,
+        branches: 80,
+        functions: 67.92,
+        lines: 64.61
       },
       include: ["**/*.{ts,vue}"],
       exclude: [
@@ -40,4 +40,4 @@ export default defineConfig({
       reportsDirectory: fileURLToPath(new URL("./coverage", import.meta.url))
     }
   }
-});
+});