@farming-labs/nuxt-theme 0.0.53 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "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.53"
+    "@farming-labs/docs": "0.0.54"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/DocsContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useHead } from "#app";
 import DocsPage from "./DocsPage.vue";
@@ -26,11 +26,32 @@ const props = defineProps<{
   config?: Record<string, unknown> | null;
 }>();
 
+type FeedbackValue = "positive" | "negative";
+type FeedbackStatus = "idle" | "submitting" | "submitted" | "error";
+type FeedbackPayload = {
+  value: FeedbackValue;
+  comment?: string;
+  title?: string;
+  description?: string;
+  url: string;
+  pathname: string;
+  path: string;
+  entry: string;
+  slug: string;
+  locale?: string;
+};
+
+interface DocsWindowHooks extends Window {
+  __fdOnFeedback__?: (payload: FeedbackPayload) => void | Promise<void>;
+}
+
 const route = useRoute();
 const openDropdownMenu = ref(false);
 const copyLabel = ref("Copy page");
 const copied = ref(false);
-const selectedFeedback = ref<"positive" | "negative" | null>(null);
+const selectedFeedback = ref<FeedbackValue | null>(null);
+const feedbackComment = ref("");
+const feedbackStatus = ref<FeedbackStatus>("idle");
 
 const titleSuffix = computed(() =>
   props.config?.metadata?.titleTemplate
@@ -151,9 +172,11 @@ const feedbackConfig = computed(() => {
   const defaults = {
     enabled: false,
     question: "How is this guide?",
+    placeholder: "Leave your feedback...",
     positiveLabel: "Good",
     negativeLabel: "Bad",
-    onFeedback: undefined as ((payload: Record<string, unknown>) => void) | undefined,
+    submitLabel: "Submit",
+    onFeedback: undefined as ((payload: FeedbackPayload) => void | Promise<void>) | undefined,
   };
 
   const feedback = props.config?.feedback as Record<string, unknown> | boolean | null | undefined;
@@ -164,15 +187,17 @@ const feedbackConfig = computed(() => {
   return {
     enabled: feedback.enabled !== false,
     question: String((feedback as { question?: string }).question ?? defaults.question),
+    placeholder: String(feedback.placeholder ?? defaults.placeholder),
     positiveLabel: String(
       feedback.positiveLabel ?? defaults.positiveLabel,
     ),
     negativeLabel: String(
       feedback.negativeLabel ?? defaults.negativeLabel,
     ),
+    submitLabel: String(feedback.submitLabel ?? defaults.submitLabel),
     onFeedback:
       typeof feedback.onFeedback === "function"
-        ? (feedback.onFeedback as (payload: Record<string, unknown>) => void)
+        ? (feedback.onFeedback as (payload: FeedbackPayload) => void | Promise<void>)
         : undefined,
   };
 });
@@ -232,9 +257,15 @@ function openInProvider(provider: { name: string; urlTemplate: string }) {
   closeDropdown();
 }
 
-function handleFeedback(value: "positive" | "negative") {
-  selectedFeedback.value = value;
+function resetFeedback() {
+  selectedFeedback.value = null;
+  feedbackComment.value = "";
+  feedbackStatus.value = "idle";
+}
+
+watch(() => route.path, resetFeedback, { immediate: true });
 
+function buildFeedbackPayload(): FeedbackPayload {
   const pathname =
     typeof window !== "undefined"
       ? window.location.pathname.replace(/\/$/, "") || "/"
@@ -242,8 +273,9 @@ function handleFeedback(value: "positive" | "negative") {
         ? `/${entry.value}/${props.data.slug}`
         : `/${entry.value}`;
 
-  const payload = {
-    value,
+  return {
+    value: selectedFeedback.value as FeedbackValue,
+    comment: feedbackComment.value.trim() ? feedbackComment.value.trim() : undefined,
     title: props.data.title,
     description: props.data.description,
     url: typeof window !== "undefined" ? window.location.href : pathname,
@@ -253,20 +285,49 @@ function handleFeedback(value: "positive" | "negative") {
     slug: props.data.slug ?? "",
     locale: props.data.locale,
   };
+}
+
+async function emitFeedback(payload: FeedbackPayload) {
+  let firstError: unknown;
 
   try {
-    feedbackConfig.value.onFeedback?.(payload);
-  } catch {}
+    await feedbackConfig.value.onFeedback?.(payload);
+  } catch (error) {
+    firstError ??= error;
+  }
 
   try {
-    if (typeof window !== "undefined" && (window as any).__fdOnFeedback__) {
-      (window as any).__fdOnFeedback__(payload);
+    if (typeof window !== "undefined") {
+      await (window as DocsWindowHooks).__fdOnFeedback__?.(payload);
     }
-  } catch {}
+  } catch (error) {
+    firstError ??= error;
+  }
 
   if (typeof window !== "undefined") {
     window.dispatchEvent(new CustomEvent("fd:feedback", { detail: payload }));
   }
+
+  if (firstError) throw firstError;
+}
+
+function handleFeedback(value: FeedbackValue) {
+  selectedFeedback.value = value;
+  if (feedbackStatus.value !== "idle") feedbackStatus.value = "idle";
+}
+
+async function submitFeedback() {
+  if (!selectedFeedback.value || feedbackStatus.value === "submitting" || feedbackStatus.value === "submitted") {
+    return;
+  }
+
+  try {
+    feedbackStatus.value = "submitting";
+    await emitFeedback(buildFeedbackPayload());
+    feedbackStatus.value = "submitted";
+  } catch {
+    feedbackStatus.value = "error";
+  }
 }
 
 function handleClickOutside(e: MouseEvent) {
@@ -429,9 +490,10 @@ onUnmounted(() => {
         <div class="fd-feedback-actions" role="group" :aria-label="feedbackConfig.question">
           <button
             type="button"
-            class="fd-page-action-btn"
+            class="fd-page-action-btn fd-feedback-choice"
             :aria-pressed="selectedFeedback === 'positive'"
             :data-selected="selectedFeedback === 'positive' ? 'true' : undefined"
+            :disabled="feedbackStatus === 'submitting'"
             @click="handleFeedback('positive')"
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -447,9 +509,10 @@ onUnmounted(() => {
           </button>
           <button
             type="button"
-            class="fd-page-action-btn"
+            class="fd-page-action-btn fd-feedback-choice"
             :aria-pressed="selectedFeedback === 'negative'"
             :data-selected="selectedFeedback === 'negative' ? 'true' : undefined"
+            :disabled="feedbackStatus === 'submitting'"
             @click="handleFeedback('negative')"
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -465,6 +528,67 @@ onUnmounted(() => {
           </button>
         </div>
       </div>
+      <div v-if="selectedFeedback" class="fd-feedback-form">
+        <textarea
+          v-model="feedbackComment"
+          class="fd-feedback-input"
+          aria-label="Additional feedback"
+          :placeholder="feedbackConfig.placeholder"
+          :disabled="feedbackStatus === 'submitting'"
+          @input="feedbackStatus !== 'idle' && (feedbackStatus = 'idle')"
+        />
+        <div class="fd-feedback-submit-row">
+          <button
+            type="button"
+            class="fd-page-action-btn fd-feedback-submit"
+            :disabled="feedbackStatus === 'submitting' || feedbackStatus === 'submitted'"
+            @click="submitFeedback"
+          >
+            <span v-if="feedbackStatus === 'submitting'" class="fd-feedback-spinner" aria-hidden="true" />
+            <svg
+              v-else-if="feedbackStatus === 'submitted'"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path
+                d="M20 6 9 17l-5-5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <span>
+              {{
+                feedbackStatus === "submitted"
+                    ? "Submitted"
+                    : feedbackConfig.submitLabel
+              }}
+            </span>
+          </button>
+          <p
+            v-if="feedbackStatus === 'submitted'"
+            class="fd-feedback-status"
+            data-status="success"
+            role="status"
+            aria-live="polite"
+          >
+            Thanks for the feedback.
+          </p>
+        </div>
+        <p
+          v-if="feedbackStatus === 'error'"
+          class="fd-feedback-status"
+          data-status="error"
+          role="status"
+          aria-live="polite"
+        >
+          Could not send feedback. Please try again.
+        </p>
+      </div>
     </section>
   </DocsPage>
 </template>

package/styles/colorful.css

@@ -301,3 +301,18 @@
 .fd-ai-floating-trigger .ask-ai-trigger:hover {
   box-shadow: 0 2px 30px rgba(180, 140, 20, 0.4);
 }
+
+/* ─── Feedback (colorful theme) ──────────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0.5rem;
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: color-mix(in srgb, var(--color-fd-primary) 12%, var(--color-fd-secondary));
+}
+
+.fd-feedback-status[data-status="success"] {
+  color: var(--color-fd-primary);
+}

package/styles/darksharp.css

@@ -222,3 +222,22 @@ code:not(pre code) {
 .fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
   transform: none;
 }
+
+/* ─── Feedback (darksharp theme) ─────────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0.2rem !important;
+}
+
+.dark .fd-feedback-input {
+  background: hsl(0 0% 4%);
+}
+
+.dark .fd-feedback-choice[data-selected="true"] {
+  background: hsl(0 0% 8%);
+}
+
+.dark .fd-feedback-status[data-status="success"] {
+  color: hsl(0 0% 90%);
+}

package/styles/docs.css

@@ -731,6 +731,7 @@ samp {
 
 .fd-feedback {
   margin-top: 2rem;
+  margin-bottom: 1.25rem;
   padding-top: 1.25rem;
   border-top: 1px solid var(--color-fd-border);
 }
@@ -758,6 +759,122 @@ samp {
   flex-wrap: wrap;
 }
 
+.fd-feedback-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.875rem;
+}
+
+.fd-feedback-form[hidden],
+.fd-feedback-spinner[hidden],
+.fd-feedback-status[hidden],
+.fd-feedback-submit svg[hidden] {
+  display: none !important;
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+  border-color: color-mix(in srgb, var(--color-fd-primary, currentColor) 65%, transparent);
+}
+
+.fd-feedback-input {
+  width: 100%;
+  min-height: 4.75rem;
+  resize: vertical;
+  padding: 0.875rem 1rem;
+  border: 1px solid
+    color-mix(in srgb, var(--color-fd-border) 78%, var(--color-fd-foreground) 22%);
+  border-radius: 0.5rem;
+  background: var(--color-fd-card, transparent);
+  color: var(--color-fd-foreground);
+  font: inherit;
+  line-height: 1.55;
+  outline: none;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    background-color 150ms ease;
+}
+
+.fd-feedback-input::placeholder {
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-feedback-input:focus {
+  border-color: var(--color-fd-ring, var(--color-fd-primary, currentColor));
+  box-shadow: 0 0 0 1px var(--color-fd-ring, var(--color-fd-primary, currentColor));
+}
+
+.fd-feedback-submit-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: nowrap;
+  min-height: 2rem;
+}
+
+.fd-feedback-submit {
+  min-width: 7rem;
+  padding-inline: 0.875rem;
+  justify-content: center;
+}
+
+.fd-feedback-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.fd-feedback-spinner {
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  animation: fd-feedback-spin 0.8s linear infinite;
+}
+
+.fd-feedback-status {
+  margin: 0 !important;
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-feedback-status[data-status="success"] {
+  display: inline-flex;
+  align-self: center;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2rem;
+}
+
+.fd-feedback-status[data-status="success"] {
+  color: color-mix(in srgb, var(--color-fd-primary) 85%, var(--color-fd-foreground));
+}
+
+.fd-feedback-status[data-status="error"] {
+  color: var(--color-fd-foreground);
+}
+
+@keyframes fd-feedback-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 640px) {
+  .fd-feedback-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .fd-feedback-submit-row {
+    flex-wrap: wrap;
+  }
+}
+
 /* ─── Breadcrumb ─────────────────────────────────────────────────────── */
 
 .fd-breadcrumb {

package/styles/greentree.css

@@ -810,3 +810,18 @@ details > :not(summary) {
 .fd-sidebar::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* ─── Feedback (greentree theme) ─────────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0.75rem;
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: color-mix(in srgb, var(--color-fd-primary) 12%, var(--color-fd-secondary));
+}
+
+.fd-feedback-status[data-status="success"] {
+  color: var(--color-fd-primary);
+}

package/styles/pixel-border.css

@@ -766,3 +766,20 @@ code:not(pre code) {
 :root:not(.dark) .fd-ai-code-block code {
   color: #1f2937;
 }
+
+/* ─── Feedback (pixel-border theme) ──────────────────────────────── */
+
+.fd-feedback-input,
+.fd-feedback-submit {
+  border-radius: 0 !important;
+  box-shadow: 3px 3px 0 0 var(--color-fd-border);
+}
+
+.fd-feedback-choice[data-selected="true"] {
+  background: var(--color-fd-secondary);
+}
+
+.fd-feedback-status[data-status="success"] {
+  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  text-transform: uppercase;
+}