@revenexx/studio-integrations 1.4.1 → 2.1.0

package/dist/runtime/pages/integrations/templates/index.vue

@@ -68,47 +68,47 @@ const awaitingCatalogue = computed(() => loading.value && !templates.value.lengt
     >
       <template #tabs>
         <div class="-mx-3 w-[calc(100%+1.5rem)] flex items-center gap-3 border-t border-black/[0.06] px-4 pt-2.5 pb-1">
-        <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
-          <button
-            type="button"
-            class="inline-flex h-7 shrink-0 items-center rounded-full border px-3 text-sm transition"
-            :class="activeCategory === 'all' ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
-            @click="activeCategory = 'all'"
-          >
-            {{ t("integration.templates.gallery.filter.all") }} <span class="opacity-70">({{ templates.length }})</span>
-          </button>
-          <button
-            v-for="cat in categories"
-            :key="cat.key"
-            type="button"
-            class="inline-flex h-7 shrink-0 items-center rounded-full border px-3 text-sm transition"
-            :class="activeCategory === cat.key ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
-            @click="activeCategory = activeCategory === cat.key ? 'all' : cat.key"
-          >
-            {{ cat.label }} <span class="opacity-70">({{ cat.count }})</span>
-          </button>
-        </div>
+          <div class="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
+            <button
+              type="button"
+              class="inline-flex h-7 shrink-0 items-center rounded-full border px-3 text-sm transition"
+              :class="activeCategory === 'all' ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
+              @click="activeCategory = 'all'"
+            >
+              {{ t("integration.templates.gallery.filter.all") }} <span class="opacity-70">({{ templates.length }})</span>
+            </button>
+            <button
+              v-for="cat in categories"
+              :key="cat.key"
+              type="button"
+              class="inline-flex h-7 shrink-0 items-center rounded-full border px-3 text-sm transition"
+              :class="activeCategory === cat.key ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
+              @click="activeCategory = activeCategory === cat.key ? 'all' : cat.key"
+            >
+              {{ cat.label }} <span class="opacity-70">({{ cat.count }})</span>
+            </button>
+          </div>
 
-        <Select v-model="activeLevel">
-          <SelectTrigger :aria-label="t('integration.templates.gallery.filter.levelAria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{{ t("integration.templates.gallery.filter.levelAllOption") }}</SelectItem>
-            <SelectItem v-for="opt in levelOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
-          </SelectContent>
-        </Select>
-        <Select v-model="sortBy">
-          <SelectTrigger :aria-label="t('integration.templates.gallery.sort.aria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
-          </SelectContent>
-        </Select>
-        <div class="relative w-60">
-          <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input v-model="search" :aria-label="t('integration.templates.gallery.search.aria')" :placeholder="t('integration.templates.gallery.search.placeholder')" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
+          <Select v-model="activeLevel">
+            <SelectTrigger :aria-label="t('integration.templates.gallery.filter.levelAria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{{ t("integration.templates.gallery.filter.levelAllOption") }}</SelectItem>
+              <SelectItem v-for="opt in levelOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select v-model="sortBy">
+            <SelectTrigger :aria-label="t('integration.templates.gallery.sort.aria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
+            </SelectContent>
+          </Select>
+          <div class="relative w-60">
+            <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Input v-model="search" :aria-label="t('integration.templates.gallery.search.aria')" :placeholder="t('integration.templates.gallery.search.placeholder')" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
           </div>
         </div>
       </template>