@farming-labs/nuxt-theme 0.0.38 → 0.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.0.38",
+  "version": "0.0.44",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.38"
+    "@farming-labs/docs": "0.0.44"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/ApiReferenceSwitcher.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    config: Record<string, any>;
+    current?: "docs" | "api";
+  }>(),
+  {
+    current: "docs",
+  },
+);
+
+const route = useRoute();
+
+const apiReference = computed(() => {
+  const value = props.config?.apiReference;
+  if (value === true) {
+    return {
+      enabled: true,
+      path: "api-reference",
+    };
+  }
+
+  if (!value || value === false || value.enabled === false) {
+    return {
+      enabled: false,
+      path: "api-reference",
+    };
+  }
+
+  return {
+    enabled: true,
+    path: String(value.path ?? "api-reference").replace(/^\/+|\/+$/g, "") || "api-reference",
+  };
+});
+
+const docsHref = computed(() => {
+  if (typeof props.config?.nav?.url === "string" && props.config.nav.url.length > 0) {
+    return props.config.nav.url;
+  }
+
+  const entry = String(props.config?.entry ?? "docs").replace(/^\/+|\/+$/g, "") || "docs";
+  const params = new URLSearchParams();
+
+  for (const [key, raw] of Object.entries(route.query)) {
+    if (raw == null) continue;
+    const value = Array.isArray(raw) ? raw[0] : raw;
+    if (value != null) params.set(key, String(value));
+  }
+
+  const query = params.toString();
+  return query ? `/${entry}?${query}` : `/${entry}`;
+});
+
+const apiHref = computed(() => {
+  const params = new URLSearchParams();
+
+  for (const [key, raw] of Object.entries(route.query)) {
+    if (raw == null) continue;
+    const value = Array.isArray(raw) ? raw[0] : raw;
+    if (value != null) params.set(key, String(value));
+  }
+
+  const query = params.toString();
+  return query ? `/${apiReference.value.path}?${query}` : `/${apiReference.value.path}`;
+});
+</script>
+
+<template>
+  <details v-if="apiReference.enabled" class="fd-api-switcher">
+    <summary class="fd-api-switcher-trigger">
+      <span class="fd-api-switcher-trigger-copy">
+        <span class="fd-api-switcher-icon">{{ current === "api" ? "</>" : "▣" }}</span>
+        <span class="fd-api-switcher-label">
+          {{ current === "api" ? "API Reference" : "Documentation" }}
+        </span>
+      </span>
+      <span class="fd-api-switcher-caret">▿</span>
+    </summary>
+
+    <div class="fd-api-switcher-panel">
+      <NuxtLink
+        :to="docsHref"
+        class="fd-api-switcher-option"
+        :class="{ 'fd-api-switcher-option-active': current === 'docs' }"
+      >
+        <span class="fd-api-switcher-option-icon">▣</span>
+        <span class="fd-api-switcher-option-copy">
+          <span class="fd-api-switcher-option-title">Documentation</span>
+          <span class="fd-api-switcher-option-description">
+            Markdown pages, guides, and concepts
+          </span>
+        </span>
+        <span class="fd-api-switcher-option-check">✓</span>
+      </NuxtLink>
+
+      <NuxtLink
+        :to="apiHref"
+        class="fd-api-switcher-option"
+        :class="{ 'fd-api-switcher-option-active': current === 'api' }"
+      >
+        <span class="fd-api-switcher-option-icon">&lt;/&gt;</span>
+        <span class="fd-api-switcher-option-copy">
+          <span class="fd-api-switcher-option-title">API Reference</span>
+          <span class="fd-api-switcher-option-description">
+            Scalar-powered route handler reference
+          </span>
+        </span>
+        <span class="fd-api-switcher-option-check">✓</span>
+      </NuxtLink>
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.fd-api-switcher {
+  position: relative;
+  margin: 0;
+  border: 1px solid color-mix(in srgb, var(--color-fd-border) 100%, transparent);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--color-fd-card) 96%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-fd-border) 28%, transparent);
+  overflow: hidden;
+}
+
+.fd-api-switcher-trigger {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  cursor: pointer;
+  padding: 11px 13px;
+  background: color-mix(in srgb, var(--color-fd-card) 98%, transparent);
+}
+
+.fd-api-switcher-trigger::-webkit-details-marker {
+  display: none;
+}
+
+.fd-api-switcher-trigger-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.fd-api-switcher-icon,
+.fd-api-switcher-option-icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 20px;
+  border-radius: 6px;
+  border: 1px solid color-mix(in srgb, var(--color-fd-border) 100%, transparent);
+  background: color-mix(in srgb, var(--color-fd-card) 92%, transparent);
+  color: var(--color-fd-primary);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-fd-border) 28%, transparent);
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.fd-api-switcher-label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.fd-api-switcher-caret {
+  font-size: 11px;
+  opacity: 0.56;
+  transform: translateY(1px);
+}
+
+.fd-api-switcher-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--color-fd-card) 96%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--color-fd-border) 100%, transparent);
+}
+
+.fd-api-switcher-option {
+  display: grid;
+  grid-template-columns: 20px 1fr 14px;
+  gap: 12px;
+  align-items: start;
+  padding: 11px 12px;
+  border-radius: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.fd-api-switcher-option:hover {
+  background: color-mix(in srgb, var(--color-fd-primary) 6%, transparent);
+}
+
+.fd-api-switcher-option-active {
+  background: color-mix(in srgb, var(--color-fd-primary) 10%, transparent);
+}
+
+.fd-api-switcher-option-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.fd-api-switcher-option-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.fd-api-switcher-option-description {
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0.62;
+}
+
+.fd-api-switcher-option-check {
+  padding-top: 2px;
+  font-size: 12px;
+  color: var(--color-fd-primary);
+  opacity: 0;
+}
+
+.fd-api-switcher-option-active .fd-api-switcher-option-check {
+  opacity: 1;
+}
+</style>

package/src/components/DocsLayout.vue

@@ -178,8 +178,7 @@ function buildLayoutCSS(layout: Record<string, any> | undefined): string {
 }
 
 const overrideCSS = computed(() => {
-  const colorOverrides =
-    (props.config?.theme as any)?._userColorOverrides ?? (props.config?.theme as any)?.ui?.colors;
+  const colorOverrides = (props.config?.theme as any)?._userColorOverrides;
   const typography = (props.config?.theme as any)?.ui?.typography;
   const layout = (props.config?.theme as any)?.ui?.layout;
   return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography), buildLayoutCSS(layout)]

package/src/index.d.ts

@@ -8,6 +8,7 @@ export const TableOfContents: Component;
 export const Breadcrumb: Component;
 export const SearchDialog: Component;
 export const FloatingAIChat: Component;
+export const ApiReferenceSwitcher: Component;
 
 export declare const fumadocs: (overrides?: Partial<DocsTheme>) => DocsTheme;
 export declare const DefaultUIDefaults: Record<string, any>;

package/src/index.js

@@ -11,6 +11,7 @@ export { default as TableOfContents } from "./components/TableOfContents.vue";
 export { default as Breadcrumb } from "./components/Breadcrumb.vue";
 export { default as SearchDialog } from "./components/SearchDialog.vue";
 export { default as FloatingAIChat } from "./components/FloatingAIChat.vue";
+export { default as ApiReferenceSwitcher } from "./components/ApiReferenceSwitcher.vue";
 export { default as ThemeToggle } from "./components/ThemeToggle.vue";
 
 export { fumadocs, DefaultUIDefaults } from "./themes/default.js";