@nuxtagentic/integrations 0.0.0-stage → 0.1.0

package/runtime/components/IntegrationCatalog.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { IntegrationConnection } from '../../client'
+import {
+  INTEGRATION_CATALOG,
+  INTEGRATION_CATEGORIES,
+  type IntegrationDefinition,
+} from '../shared/catalog'
+import IntegrationCard from './IntegrationCard.vue'
+
+const tab = defineModel<string>('tab', { required: true })
+const category = defineModel<string>('category', { required: true })
+const search = defineModel<string>('search', { required: true })
+const { connections, loading, error } = defineProps<{
+  connections: IntegrationConnection[]
+  loading?: boolean
+  error?: boolean
+}>()
+defineEmits<{ select: [integration: IntegrationDefinition, event: MouseEvent] }>()
+
+const connectionsOf = (provider: string) =>
+  connections.filter((entry) => entry.provider === provider)
+const isConnected = (provider: string) => connectionsOf(provider).some((entry) => entry.enabled)
+const filteredCatalog = computed(() => {
+  const query = search.value.trim().toLowerCase()
+  return INTEGRATION_CATALOG.filter(
+    (entry) =>
+      (category.value === 'All' || entry.category === category.value) &&
+      `${entry.name} ${entry.category} ${entry.description}`.toLowerCase().includes(query),
+  )
+})
+const visible = computed(() =>
+  filteredCatalog.value.filter(
+    (entry) => tab.value === 'all' || (tab.value === 'connected') === isConnected(entry.id),
+  ),
+)
+const tabs = computed(() => {
+  const total = filteredCatalog.value.length
+  const connectedCount = filteredCatalog.value.filter((entry) => isConnected(entry.id)).length
+  return [
+    { label: 'All', value: 'all', count: total },
+    { label: 'Connected', value: 'connected', count: connectedCount },
+    { label: 'Available', value: 'available', count: total - connectedCount },
+  ]
+})
+const emptyMessage = computed(() => {
+  if (!filteredCatalog.value.length) {
+    return 'No integrations match your filters.'
+  }
+  return tab.value === 'connected'
+    ? 'No connected integrations here yet. Choose Available to connect an app.'
+    : 'All integrations here are connected. Choose Connected to manage them.'
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-wrap items-center gap-3">
+      <UTabs
+        :model-value="tab"
+        :items="tabs"
+        :content="false"
+        color="neutral"
+        variant="pill"
+        aria-label="Integration status"
+        class="w-full sm:w-[350px]"
+        :ui="{
+          root: 'gap-0',
+          list: 'h-9 rounded-lg border border-(--gray-500) bg-(--gray-200) p-0.5',
+          trigger:
+            'flex-auto cursor-pointer gap-2 rounded-md px-2 py-0 text-[13px] font-normal data-[state=active]:text-highlighted sm:px-3',
+          indicator: 'inset-y-0.5 rounded-md bg-(--gray-400) shadow-none ring-0',
+        }"
+        @update:model-value="tab = String($event)"
+      >
+        <template #trailing="{ item }">
+          <span class="text-xs text-dimmed tabular-nums group-data-[state=active]:text-muted">
+            {{ item.count }}
+          </span>
+        </template>
+      </UTabs>
+      <UInput
+        v-model="search"
+        icon="i-lucide-search"
+        placeholder="Search integrations"
+        aria-label="Search integrations"
+        class="w-full sm:ms-auto sm:w-60"
+        :ui="{ base: 'h-9 rounded-lg bg-transparent text-[13px]', leadingIcon: 'size-3.5' }"
+      />
+    </div>
+    <div class="flex flex-wrap gap-1.5">
+      <UButton
+        v-for="item in INTEGRATION_CATEGORIES"
+        :key="item"
+        :label="item"
+        color="neutral"
+        :variant="category === item ? 'soft' : 'ghost'"
+        class="h-7 rounded-full px-3 text-[13px] font-normal"
+        :class="category === item ? 'bg-(--gray-400) text-highlighted ring ring-(--gray-500)' : ''"
+        :aria-pressed="category === item"
+        @click="category = item"
+      />
+    </div>
+    <div
+      v-if="loading"
+      class="flex items-center gap-2 text-sm text-muted"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-4 animate-spin"
+      />
+      Loading connections…
+    </div>
+    <div class="grid grid-cols-[repeat(auto-fill,minmax(min(260px,100%),1fr))] gap-3">
+      <IntegrationCard
+        v-for="entry in visible"
+        :key="entry.id"
+        :integration="entry"
+        :connections="connectionsOf(entry.id)"
+        @select="$emit('select', entry, $event)"
+      />
+    </div>
+    <p
+      v-if="!loading && !error && !visible.length"
+      class="mt-6 text-center text-sm text-dimmed"
+    >
+      {{ emptyMessage }}
+    </p>
+  </div>
+</template>