@lupinum/ginko-docs 0.2.2 → 0.2.3

package/app/components/mdc/MdcQuiz.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { VNode } from "vue";
-import { h, provide, reactive, ref, computed, useSlots } from "vue";
+import { cloneVNode, h, provide, reactive, ref, computed, useSlots } from "vue";
 import { Icon } from "#components";
 import { useI18n } from "#imports";
 import { cn } from "../../utils";
+import { useProseAppearance } from "../../composables/useProseAppearance";
 
 const props = defineProps<{
   title?: string;
@@ -16,7 +17,9 @@ const props = defineProps<{
   perfectLabel?: string;
   retryPrompt?: string;
   resetLabel?: string;
+  appearance?: "quiet" | "tint";
 }>();
+const appearance = useProseAppearance("quiz", () => props.appearance);
 
 const MDC_QUIZ = Symbol.for("mdc.quiz");
 
@@ -38,15 +41,6 @@ function registerQuestion(): number {
 
 function markAnswered(index: number, correct: boolean) {
   state.answers.set(index, correct);
-  setTimeout(() => {
-    if (showResults.value) return;
-    for (let i = index + 1; i < state.totalQuestions; i++) {
-      if (!state.answers.has(i)) {
-        activeIndex.value = i;
-        return;
-      }
-    }
-  }, 1200);
 }
 
 function reset() {
@@ -60,6 +54,7 @@ provide(MDC_QUIZ, { registerQuestion, markAnswered, resetKey, inQuiz: true });
 
 const correctCount = computed(() => [...state.answers.values()].filter(Boolean).length);
 const currentAnswered = computed(() => state.answers.has(activeIndex.value));
+const allAnswered = computed(() => state.answers.size === state.totalQuestions);
 const { locale } = useI18n();
 
 const text = computed(() => {
@@ -68,7 +63,7 @@ const text = computed(() => {
   return {
     question: props.questionLabel ?? (isGerman ? "Frage" : "Question"),
     of: isGerman ? "von" : "of",
-    back: props.backLabel ?? (isGerman ? "Zurueck" : "Back"),
+    back: props.backLabel ?? (isGerman ? "Zurück" : "Back"),
     next: props.nextLabel ?? (isGerman ? "Weiter" : "Next"),
     results: props.resultsLabel ?? (isGerman ? "Ergebnis anzeigen" : "See Results"),
     correct: props.correctSummaryLabel ?? (isGerman ? "richtig" : "correct"),
@@ -97,35 +92,19 @@ function renderButton(
     {
       type: "button",
       disabled: options.disabled,
-      class: cn(
-        "inline-flex h-8 items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
-        options.variant === "ghost"
-          ? "hover:bg-accent hover:text-accent-foreground"
-          : "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-      ),
+      class: cn("content-quiz-button", options.variant === "ghost" && "content-quiz-button-ghost"),
       onClick: options.onClick,
     },
-    () => children,
+    children,
   );
 }
 
 function renderHeader() {
-  return h("div", { class: "flex flex-row items-center gap-4 px-6" }, () => [
-    h(
-      "div",
-      {
-        class:
-          "flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary",
-      },
-      [h(Icon, { name: "lucide:circle-help", class: "size-4", ariaHidden: true })],
-    ),
-    h("div", { class: "min-w-0 flex-1" }, [
-      props.title
-        ? h("div", { class: "font-semibold leading-none tracking-tight" }, () => props.title)
-        : null,
-      props.description
-        ? h("div", { class: "text-sm text-muted-foreground" }, () => props.description)
-        : null,
+  return h("div", { class: "content-quiz-header" }, [
+    h(Icon, { name: "lucide:circle-help", class: "content-quiz-header-icon", ariaHidden: true }),
+    h("div", { class: "content-quiz-heading" }, [
+      props.title ? h("div", { class: "content-quiz-title" }, props.title) : null,
+      props.description ? h("div", { class: "content-quiz-description" }, props.description) : null,
     ]),
   ]);
 }
@@ -133,18 +112,15 @@ function renderHeader() {
 function renderDots() {
   return h(
     "div",
-    { class: "flex items-center gap-1.5" },
+    { class: "content-quiz-dots" },
     Array.from({ length: state.totalQuestions }, (_, i) =>
       h("button", {
         type: "button",
-        class: cn(
-          "size-2 rounded-full transition-all",
-          i === activeIndex.value
-            ? "scale-125 bg-primary ring-2 ring-primary/30"
-            : state.answers.has(i)
-              ? "bg-primary"
-              : "bg-muted-foreground/30",
-        ),
+        class: "content-quiz-dot",
+        "data-state":
+          i === activeIndex.value ? "active" : state.answers.has(i) ? "answered" : undefined,
+        "aria-label": `${text.value.question} ${i + 1}`,
+        "aria-current": i === activeIndex.value ? "true" : undefined,
         onClick: () => {
           activeIndex.value = i;
         },
@@ -156,38 +132,29 @@ function renderDots() {
 function renderFooter() {
   const isLast = activeIndex.value === state.totalQuestions - 1;
 
-  return h("div", { class: "flex items-center justify-between border-t px-6 py-4" }, () => [
+  return h("div", { class: "content-quiz-footer" }, [
     h(
       "span",
-      { class: "text-sm text-muted-foreground" },
+      { class: "content-quiz-progress" },
       `${text.value.question} ${activeIndex.value + 1} ${text.value.of} ${state.totalQuestions}`,
     ),
     renderDots(),
-    h("div", { class: "flex items-center gap-2" }, [
-      renderButton(
-        [
-          h(Icon, { name: "lucide:chevron-left", class: "size-4", ariaHidden: true }),
-          text.value.back,
-        ],
-        {
-          disabled: activeIndex.value === 0,
-          onClick: () => {
-            activeIndex.value--;
-          },
+    h("div", { class: "content-quiz-nav" }, [
+      renderButton([h(Icon, { name: "lucide:chevron-left", ariaHidden: true }), text.value.back], {
+        disabled: activeIndex.value === 0,
+        onClick: () => {
+          activeIndex.value--;
         },
-      ),
+      }),
       isLast
         ? renderButton(text.value.results, {
-            disabled: !currentAnswered.value,
+            disabled: !allAnswered.value,
             onClick: () => {
               showResults.value = true;
             },
           })
         : renderButton(
-            [
-              text.value.next,
-              h(Icon, { name: "lucide:chevron-right", class: "size-4", ariaHidden: true }),
-            ],
+            [text.value.next, h(Icon, { name: "lucide:chevron-right", ariaHidden: true })],
             {
               disabled: !currentAnswered.value,
               onClick: () => {
@@ -202,32 +169,24 @@ function renderFooter() {
 function renderResults() {
   const perfect = correctCount.value === state.totalQuestions;
 
-  return h("div", { class: "flex flex-col items-center gap-4 px-6 py-8 text-center" }, () => [
+  return h("div", { class: "content-quiz-results" }, [
     h(
       "div",
       {
-        class: cn(
-          "flex size-12 items-center justify-center rounded-full",
-          perfect ? "bg-success/10" : "bg-muted",
-        ),
+        class: "content-quiz-results-icon",
+        "data-state": perfect ? "perfect" : undefined,
       },
-      [
-        h(Icon, {
-          name: "lucide:trophy",
-          class: cn("size-6", perfect ? "text-success" : "text-muted-foreground"),
-          ariaHidden: true,
-        }),
-      ],
+      [h(Icon, { name: "lucide:trophy", ariaHidden: true })],
     ),
     h("div", {}, [
       h(
         "p",
-        { class: "text-lg font-semibold text-foreground" },
+        { class: "content-quiz-results-score" },
         `${correctCount.value} ${text.value.of} ${state.totalQuestions} ${text.value.correct}`,
       ),
       h(
         "p",
-        { class: "mt-1 text-sm text-muted-foreground" },
+        { class: "content-quiz-results-note" },
         perfect ? text.value.perfect : text.value.retryPrompt,
       ),
     ]),
@@ -243,10 +202,12 @@ function renderQuiz() {
   const children: VNode[] = [renderHeader()];
 
   if (showResults.value) {
-    children.push(renderResults());
+    children.push(h("div", { class: "content-quiz-body" }, [renderResults()]));
   } else {
     children.push(
-      h("div", { class: "px-6" }, () =>
+      h(
+        "div",
+        { class: "content-quiz-body" },
         items.map((node, i) =>
           h(
             "div",
@@ -254,7 +215,7 @@ function renderQuiz() {
               key: i,
               style: i === activeIndex.value ? undefined : { display: "none" },
             },
-            [h(node)],
+            [cloneVNode(node)],
           ),
         ),
       ),
@@ -267,11 +228,10 @@ function renderQuiz() {
   return h(
     "div",
     {
-      "data-slot": "card",
-      class:
-        "not-prose my-8 flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-xs",
+      "data-appearance": appearance.value,
+      class: "content-quiz not-prose",
     },
-    () => children,
+    children,
   );
 }
 </script>

package/app/components/mdc/MdcQuizQuestion.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { Ref, VNode } from "vue";
-import { h, inject, ref, computed, watch, useSlots, resolveComponent } from "vue";
+import type { Ref } from "vue";
+import { h, inject, ref, computed, watch, useSlots } from "vue";
 import { cn } from "../../utils";
 import { Icon } from "#components";
 import { useI18n } from "#imports";
-
-type YamlOption = { text: string; correct?: boolean } | string;
+import { parseQuizOptions, type QuizOption, type QuizType } from "./quiz.utils";
 
 const props = withDefaults(
   defineProps<{
     question: string;
-    type?: "single" | "multiple";
+    type?: QuizType;
     explanation?: string;
-    options?: YamlOption[];
+    options: QuizOption[];
     checkLabel?: string;
     correctLabel?: string;
     incorrectLabel?: string;
@@ -56,34 +55,17 @@ const text = computed(() => {
     reset: props.resetLabel ?? (isGerman ? "Erneut versuchen" : "Try Again"),
     multipleChoice:
       props.multipleChoiceLabel ??
-      (isGerman ? "(mehrere Antworten moeglich)" : "(select all that apply)"),
+      (isGerman ? "(mehrere Antworten möglich)" : "(select all that apply)"),
   };
 });
 
-function normalizeYamlOption(opt: YamlOption): { text: string; correct: boolean } {
-  if (typeof opt === "string") return { text: opt, correct: false };
-  return { text: opt.text, correct: opt.correct ?? false };
-}
-
-const useYaml = computed(() => Array.isArray(props.options) && props.options.length > 0);
-
-function getOptionNodes(): VNode[] {
-  return (slots.default?.() ?? []).filter((node): node is VNode => Boolean(node?.type));
-}
+const options = computed(() => parseQuizOptions(props.options, props.type));
+const useYaml = computed(() => options.value.length > 0);
 
 const isCorrect = computed(() => {
-  if (useYaml.value) {
-    return props.options!.every((opt, i) => {
-      const { correct } = normalizeYamlOption(opt);
-      return correct === selectedOptions.value.has(i);
-    });
-  }
-  const nodes = getOptionNodes();
-  return nodes.every((node, i) => {
-    const correct = node.props?.correct !== undefined && node.props?.correct !== false;
-    const selected = selectedOptions.value.has(i);
-    return correct === selected;
-  });
+  return options.value.every(
+    (option, index) => option.correct === selectedOptions.value.has(index),
+  );
 });
 
 function handleSelect(index: number) {
@@ -124,100 +106,113 @@ function renderButton(
     {
       type: "button",
       disabled: options.disabled,
-      class: cn(
-        "inline-flex h-8 items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-        options.variant === "ghost"
-          ? "hover:bg-accent hover:text-accent-foreground"
-          : "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
-      ),
+      class: cn("content-quiz-button", options.variant === "ghost" && "content-quiz-button-ghost"),
       onClick: options.onClick,
     },
-    () => label,
+    label,
   );
 }
 
 function renderOptions() {
-  if (useYaml.value) {
-    const QuizOption = resolveComponent("MdcQuizOption");
-    return props.options!.map((opt, i) => {
-      const { text, correct } = normalizeYamlOption(opt);
-      return h(QuizOption, {
+  return options.value.map(({ text: label, correct }, i) => {
+    const selected = selectedOptions.value.has(i);
+    const state = isSubmitted.value
+      ? correct
+        ? "correct"
+        : selected
+          ? "incorrect"
+          : "idle"
+      : selected
+        ? "selected"
+        : "idle";
+    const resultIcon =
+      state === "correct"
+        ? "lucide:circle-check"
+        : state === "incorrect"
+          ? "lucide:circle-x"
+          : null;
+    return h(
+      "button",
+      {
         key: i,
-        optionIndex: i,
-        correct,
-        label: text,
-        selected: selectedOptions.value.has(i),
+        type: "button",
         disabled: isSubmitted.value,
-        showResult: isSubmitted.value,
-        onSelect: () => handleSelect(i),
-      });
-    });
-  }
-  return getOptionNodes().map((node, i) =>
-    h(node, {
-      key: i,
-      optionIndex: i,
-      selected: selectedOptions.value.has(i),
-      disabled: isSubmitted.value,
-      showResult: isSubmitted.value,
-      onSelect: () => handleSelect(i),
-    }),
-  );
+        class: "content-quiz-option",
+        "data-state": state,
+        onClick: () => handleSelect(i),
+      },
+      [
+        h(
+          "span",
+          { class: "content-quiz-option-key", "aria-hidden": "true" },
+          String.fromCharCode(65 + i),
+        ),
+        h("span", { class: "content-quiz-option-label" }, label),
+        resultIcon
+          ? h(Icon, { name: resultIcon, class: "content-quiz-option-result", ariaHidden: true })
+          : null,
+      ],
+    );
+  });
 }
 
 function renderQuestion() {
-  return h("div", { class: quizContext?.inQuiz ? "space-y-4" : "not-prose my-6 space-y-4" }, [
-    h("p", { class: "font-semibold text-foreground" }, [
-      props.type === "multiple"
+  return h(
+    "div",
+    {
+      class: cn(
+        "content-quiz-question",
+        !quizContext?.inQuiz && "content-quiz-question-standalone not-prose",
+      ),
+    },
+    [
+      h("p", { class: "content-quiz-question-title" }, [
+        props.question,
+        props.type === "multiple"
+          ? h("span", { class: "content-quiz-question-hint" }, text.value.multipleChoice)
+          : null,
+      ]),
+      h("div", { class: "content-quiz-options" }, renderOptions()),
+      h("div", { class: "content-quiz-actions" }, [
+        !isSubmitted.value
+          ? renderButton(text.value.check, {
+              disabled: selectedOptions.value.size === 0,
+              onClick: handleSubmit,
+            })
+          : h("div", { class: "content-quiz-actions" }, [
+              h(
+                "span",
+                {
+                  class: "content-quiz-result",
+                  "data-state": isCorrect.value ? "correct" : "incorrect",
+                },
+                isCorrect.value ? text.value.correct : text.value.incorrect,
+              ),
+              !quizContext?.inQuiz
+                ? renderButton(text.value.reset, { variant: "ghost", onClick: handleReset })
+                : null,
+            ]),
+      ]),
+      isSubmitted.value && (props.explanation || useYaml.value)
         ? h(
-            "span",
-            { class: "text-xs font-normal text-muted-foreground mr-2" },
-            text.value.multipleChoice,
+            "div",
+            {
+              class: "content-quiz-explanation",
+            },
+            [
+              h(Icon, {
+                name: "lucide:info",
+                class: "content-quiz-explanation-icon",
+                ariaHidden: true,
+              }),
+              props.explanation
+                ? h("span", props.explanation)
+                : h("div", { class: "content-prose content-prose-trim" }, slots.default?.()),
+            ],
           )
         : null,
-      props.question,
-    ]),
-    h("div", { class: "space-y-2" }, renderOptions()),
-    h("div", { class: "flex items-center gap-3" }, [
-      !isSubmitted.value
-        ? renderButton(text.value.check, {
-            disabled: selectedOptions.value.size === 0,
-            onClick: handleSubmit,
-          })
-        : h("div", { class: "flex items-center gap-3" }, [
-            h(
-              "span",
-              {
-                class: cn(
-                  "text-sm font-medium",
-                  isCorrect.value ? "text-success" : "text-destructive",
-                ),
-              },
-              isCorrect.value ? text.value.correct : text.value.incorrect,
-            ),
-            !quizContext?.inQuiz
-              ? renderButton(text.value.reset, { variant: "ghost", onClick: handleReset })
-              : null,
-          ]),
-    ]),
-    isSubmitted.value && props.explanation
-      ? h(
-          "div",
-          {
-            class:
-              "flex gap-2 rounded-lg border border-info/30 bg-info/10 px-4 py-3 text-sm text-foreground",
-          },
-          [
-            h(Icon, {
-              name: "lucide:info",
-              class: "mt-0.5 size-4 shrink-0 text-info",
-              ariaHidden: true,
-            }),
-            h("span", props.explanation),
-          ],
-        )
-      : null,
-  ]);
+    ],
+  );
 }
 </script>
 

package/app/components/mdc/MdcReadMore.vue

@@ -1,90 +1,70 @@
 <script setup lang="ts">
 import { NuxtLink } from "#components";
-import { computed, inject } from "vue";
-import { cn } from "../../utils";
+import { computed } from "vue";
+import { useProseAppearance } from "../../composables/useProseAppearance";
 import { isExternalLink, resolveIconifyIcon } from "./icons";
 
-const MDC_READ_MORE_GROUP = Symbol.for("mdc.readMoreGroup");
-const inReadMoreGroup = inject(MDC_READ_MORE_GROUP, false);
+type ReadMoreLink = {
+  title: string;
+  to: string;
+  description?: string;
+  target?: string;
+  icon?: string;
+};
 
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    to: string;
-    target?: string;
-    icon?: string;
-  }>(),
-  {
-    icon: "lucide:bookmark",
-  },
-);
-
-const label = computed(() => {
-  if (props.title) return props.title;
-  return props.to;
-});
-
-const iconName = computed(() => resolveIconifyIcon(props.icon));
-
-const linkProps = computed(() => {
-  if (isExternalLink(props.to)) {
-    return {
-      href: props.to,
-      target: props.target,
-      rel: "noreferrer noopener" as const,
-    };
-  }
-
-  return {
-    to: props.to,
-    target: props.target,
-  };
-});
+const props = defineProps<{
+  title?: string;
+  links?: unknown;
+  appearance?: "quiet" | "tint";
+}>();
 
-const wrapperTag = computed(() => (isExternalLink(props.to) ? "a" : NuxtLink));
+const appearance = useProseAppearance("readMore", () => props.appearance);
+const items = computed<ReadMoreLink[]>(() =>
+  Array.isArray(props.links)
+    ? props.links.filter(
+        (link): link is ReadMoreLink =>
+          Boolean(link) &&
+          typeof link === "object" &&
+          typeof link.title === "string" &&
+          typeof link.to === "string",
+      )
+    : [],
+);
 
-const shell = computed(() => ({
-  is: "div",
-  class: inReadMoreGroup
-    ? "contents"
-    : cn(
-        "relative gap-0 rounded-xl border bg-card py-4 text-card-foreground shadow-xs transition-colors",
-        "group-hover:border-foreground/20 group-hover:bg-accent/50",
-      ),
-}));
+const componentFor = (to: string) => (isExternalLink(to) ? "a" : NuxtLink);
+const linkProps = (item: ReadMoreLink) =>
+  isExternalLink(item.to)
+    ? { href: item.to, target: item.target, rel: "noreferrer noopener" }
+    : { to: item.to, target: item.target };
 </script>
 
 <template>
-  <component
-    :is="wrapperTag"
-    v-bind="linkProps"
-    :class="
-      cn(
-        'group not-prose relative block overflow-hidden text-sm text-card-foreground transition-colors duration-200 ease-out',
-        'outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
-        inReadMoreGroup
-          ? 'my-0 rounded-none bg-transparent px-6 py-4 shadow-none hover:bg-accent/50'
-          : 'my-6 cursor-pointer rounded-xl',
-      )
-    "
+  <nav
+    v-if="items.length"
+    class="content-read-more not-prose"
+    :data-appearance="appearance"
+    :aria-label="title"
   >
-    <component :is="shell.is" :class="shell.class">
-      <div class="relative flex items-center gap-3" :class="inReadMoreGroup ? undefined : 'px-4'">
-        <div
-          v-if="iconName"
-          class="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground"
-        >
-          <Icon :name="iconName" class="size-4" aria-hidden="true" />
-        </div>
-        <div class="min-w-0 flex-1 pr-8 leading-relaxed font-medium text-foreground">
-          {{ label }}
-        </div>
-        <span
-          class="pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-muted-foreground/40 transition-colors group-hover:text-foreground"
-        >
-          <Icon name="lucide:arrow-up-right" class="size-4 shrink-0" aria-hidden="true" />
+    <p v-if="title" class="content-read-more-title">{{ title }}</p>
+    <div class="content-read-more-list">
+      <component
+        :is="componentFor(item.to)"
+        v-for="item in items"
+        :key="item.to"
+        v-bind="linkProps(item)"
+        class="content-read-more-link"
+      >
+        <span v-if="item.icon" class="content-read-more-icon" aria-hidden="true">
+          <Icon :name="resolveIconifyIcon(item.icon) ?? item.icon" />
+        </span>
+        <span class="content-read-more-copy">
+          <span class="content-read-more-label">{{ item.title }}</span>
+          <span v-if="item.description" class="content-read-more-description">
+            {{ item.description }}
+          </span>
         </span>
-      </div>
-    </component>
-  </component>
+        <Icon name="lucide:arrow-up-right" class="content-read-more-arrow" aria-hidden="true" />
+      </component>
+    </div>
+  </nav>
 </template>