@lupinum/ginko-docs 0.2.2

package/app/components/mdc/MdcQuiz.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { VNode } from "vue";
+import { h, provide, reactive, ref, computed, useSlots } from "vue";
+import { Icon } from "#components";
+import { useI18n } from "#imports";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  title?: string;
+  description?: string;
+  questionLabel?: string;
+  backLabel?: string;
+  nextLabel?: string;
+  resultsLabel?: string;
+  correctSummaryLabel?: string;
+  perfectLabel?: string;
+  retryPrompt?: string;
+  resetLabel?: string;
+}>();
+
+const MDC_QUIZ = Symbol.for("mdc.quiz");
+
+const slots = useSlots();
+const activeIndex = ref(0);
+const showResults = ref(false);
+const resetKey = ref(0);
+
+const state = reactive({
+  totalQuestions: 0,
+  answers: new Map<number, boolean>(),
+});
+
+function registerQuestion(): number {
+  const index = state.totalQuestions;
+  state.totalQuestions++;
+  return index;
+}
+
+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() {
+  state.answers.clear();
+  activeIndex.value = 0;
+  showResults.value = false;
+  resetKey.value++;
+}
+
+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 { locale } = useI18n();
+
+const text = computed(() => {
+  const isGerman = String(locale.value) === "de";
+
+  return {
+    question: props.questionLabel ?? (isGerman ? "Frage" : "Question"),
+    of: isGerman ? "von" : "of",
+    back: props.backLabel ?? (isGerman ? "Zurueck" : "Back"),
+    next: props.nextLabel ?? (isGerman ? "Weiter" : "Next"),
+    results: props.resultsLabel ?? (isGerman ? "Ergebnis anzeigen" : "See Results"),
+    correct: props.correctSummaryLabel ?? (isGerman ? "richtig" : "correct"),
+    perfect: props.perfectLabel ?? (isGerman ? "Alles richtig." : "Perfect score!"),
+    retryPrompt:
+      props.retryPrompt ??
+      (isGerman ? "Weiterlernen und erneut versuchen." : "Keep learning and try again."),
+    reset: props.resetLabel ?? (isGerman ? "Erneut versuchen" : "Try Again"),
+  };
+});
+
+function getQuestionNodes(): VNode[] {
+  return (slots.default?.() ?? []).filter((node): node is VNode => Boolean(node?.type));
+}
+
+function renderButton(
+  children: string | Array<string | VNode>,
+  options: {
+    disabled?: boolean;
+    onClick: () => void;
+    variant?: "outline" | "ghost";
+  },
+) {
+  return h(
+    "button",
+    {
+      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",
+      ),
+      onClick: options.onClick,
+    },
+    () => 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,
+    ]),
+  ]);
+}
+
+function renderDots() {
+  return h(
+    "div",
+    { class: "flex items-center gap-1.5" },
+    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",
+        ),
+        onClick: () => {
+          activeIndex.value = i;
+        },
+      }),
+    ),
+  );
+}
+
+function renderFooter() {
+  const isLast = activeIndex.value === state.totalQuestions - 1;
+
+  return h("div", { class: "flex items-center justify-between border-t px-6 py-4" }, () => [
+    h(
+      "span",
+      { class: "text-sm text-muted-foreground" },
+      `${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--;
+          },
+        },
+      ),
+      isLast
+        ? renderButton(text.value.results, {
+            disabled: !currentAnswered.value,
+            onClick: () => {
+              showResults.value = true;
+            },
+          })
+        : renderButton(
+            [
+              text.value.next,
+              h(Icon, { name: "lucide:chevron-right", class: "size-4", ariaHidden: true }),
+            ],
+            {
+              disabled: !currentAnswered.value,
+              onClick: () => {
+                activeIndex.value++;
+              },
+            },
+          ),
+    ]),
+  ]);
+}
+
+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" }, () => [
+    h(
+      "div",
+      {
+        class: cn(
+          "flex size-12 items-center justify-center rounded-full",
+          perfect ? "bg-success/10" : "bg-muted",
+        ),
+      },
+      [
+        h(Icon, {
+          name: "lucide:trophy",
+          class: cn("size-6", perfect ? "text-success" : "text-muted-foreground"),
+          ariaHidden: true,
+        }),
+      ],
+    ),
+    h("div", {}, [
+      h(
+        "p",
+        { class: "text-lg font-semibold text-foreground" },
+        `${correctCount.value} ${text.value.of} ${state.totalQuestions} ${text.value.correct}`,
+      ),
+      h(
+        "p",
+        { class: "mt-1 text-sm text-muted-foreground" },
+        perfect ? text.value.perfect : text.value.retryPrompt,
+      ),
+    ]),
+    renderButton(text.value.reset, { onClick: reset }),
+  ]);
+}
+
+function renderQuiz() {
+  const items = getQuestionNodes();
+
+  if (!items.length) return null;
+
+  const children: VNode[] = [renderHeader()];
+
+  if (showResults.value) {
+    children.push(renderResults());
+  } else {
+    children.push(
+      h("div", { class: "px-6" }, () =>
+        items.map((node, i) =>
+          h(
+            "div",
+            {
+              key: i,
+              style: i === activeIndex.value ? undefined : { display: "none" },
+            },
+            [h(node)],
+          ),
+        ),
+      ),
+    );
+    if (state.totalQuestions > 1) {
+      children.push(renderFooter());
+    }
+  }
+
+  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",
+    },
+    () => children,
+  );
+}
+</script>
+
+<template>
+  <component :is="renderQuiz" />
+</template>

package/app/components/mdc/MdcQuizOption.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { cn } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    correct?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    showResult?: boolean;
+    optionIndex?: number;
+    label?: string;
+  }>(),
+  {
+    correct: false,
+    selected: false,
+    disabled: false,
+    showResult: false,
+    optionIndex: 0,
+  },
+);
+
+const emit = defineEmits<{
+  select: [];
+}>();
+
+const letter = computed(() => String.fromCharCode(65 + props.optionIndex));
+
+const stateClass = computed(() => {
+  if (props.showResult && props.correct) {
+    return "border-success bg-success/10 text-foreground";
+  }
+  if (props.showResult && props.selected && !props.correct) {
+    return "border-destructive bg-destructive/10 text-foreground";
+  }
+  if (props.selected) {
+    return "border-primary bg-primary/5 ring-2 ring-primary/20";
+  }
+  return "";
+});
+
+const iconName = computed(() => {
+  if (!props.showResult) return null;
+  if (props.correct) return "lucide:circle-check";
+  if (props.selected) return "lucide:circle-x";
+  return null;
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    :disabled="disabled"
+    :class="
+      cn(
+        'flex w-full items-center gap-3 rounded-lg border bg-background px-4 py-3 text-left text-sm transition-all',
+        !disabled && !showResult && 'cursor-pointer hover:bg-accent/50',
+        disabled && 'cursor-default',
+        stateClass,
+      )
+    "
+    @click="!disabled && emit('select')"
+  >
+    <span
+      :class="
+        cn(
+          'flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold',
+          selected && !showResult && 'bg-primary text-primary-foreground',
+          showResult && correct && 'bg-success text-success-foreground',
+          showResult && selected && !correct && 'bg-destructive text-destructive-foreground',
+          !selected && !showResult && 'bg-muted text-muted-foreground',
+          showResult && !correct && !selected && 'bg-muted text-muted-foreground',
+        )
+      "
+    >
+      {{ letter }}
+    </span>
+    <span class="min-w-0 flex-1">
+      <template v-if="label">{{ label }}</template>
+      <slot v-else />
+    </span>
+    <Icon
+      v-if="iconName"
+      :name="iconName"
+      :class="
+        cn('size-4 shrink-0', correct && 'text-success', selected && !correct && 'text-destructive')
+      "
+      aria-hidden="true"
+    />
+  </button>
+</template>

package/app/components/mdc/MdcQuizQuestion.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import type { Ref, VNode } from "vue";
+import { h, inject, ref, computed, watch, useSlots, resolveComponent } from "vue";
+import { cn } from "../../utils";
+import { Icon } from "#components";
+import { useI18n } from "#imports";
+
+type YamlOption = { text: string; correct?: boolean } | string;
+
+const props = withDefaults(
+  defineProps<{
+    question: string;
+    type?: "single" | "multiple";
+    explanation?: string;
+    options?: YamlOption[];
+    checkLabel?: string;
+    correctLabel?: string;
+    incorrectLabel?: string;
+    resetLabel?: string;
+    multipleChoiceLabel?: string;
+  }>(),
+  {
+    type: "single",
+  },
+);
+
+const MDC_QUIZ = Symbol.for("mdc.quiz");
+const quizContext = inject<{
+  registerQuestion: () => number;
+  markAnswered: (index: number, correct: boolean) => void;
+  resetKey: Ref<number>;
+  inQuiz: boolean;
+} | null>(MDC_QUIZ, null);
+
+const questionIndex = quizContext?.registerQuestion() ?? -1;
+
+if (quizContext?.resetKey) {
+  watch(quizContext.resetKey, () => {
+    isSubmitted.value = false;
+    selectedOptions.value = new Set();
+  });
+}
+
+const slots = useSlots();
+const selectedOptions = ref(new Set<number>());
+const isSubmitted = ref(false);
+const { locale } = useI18n();
+
+const text = computed(() => {
+  const isGerman = String(locale.value) === "de";
+
+  return {
+    check: props.checkLabel ?? (isGerman ? "Antwort pruefen" : "Check Answer"),
+    correct: props.correctLabel ?? (isGerman ? "Richtig" : "Correct"),
+    incorrect: props.incorrectLabel ?? (isGerman ? "Nicht richtig" : "Incorrect"),
+    reset: props.resetLabel ?? (isGerman ? "Erneut versuchen" : "Try Again"),
+    multipleChoice:
+      props.multipleChoiceLabel ??
+      (isGerman ? "(mehrere Antworten moeglich)" : "(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 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;
+  });
+});
+
+function handleSelect(index: number) {
+  if (isSubmitted.value) return;
+  if (props.type === "single") {
+    selectedOptions.value = new Set([index]);
+  } else {
+    const next = new Set(selectedOptions.value);
+    if (next.has(index)) {
+      next.delete(index);
+    } else {
+      next.add(index);
+    }
+    selectedOptions.value = next;
+  }
+}
+
+function handleSubmit() {
+  isSubmitted.value = true;
+  quizContext?.markAnswered(questionIndex, isCorrect.value);
+}
+
+function handleReset() {
+  isSubmitted.value = false;
+  selectedOptions.value = new Set();
+}
+
+function renderButton(
+  label: string,
+  options: {
+    disabled?: boolean;
+    onClick: () => void;
+    variant?: "outline" | "ghost";
+  },
+) {
+  return h(
+    "button",
+    {
+      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",
+      ),
+      onClick: options.onClick,
+    },
+    () => label,
+  );
+}
+
+function renderOptions() {
+  if (useYaml.value) {
+    const QuizOption = resolveComponent("MdcQuizOption");
+    return props.options!.map((opt, i) => {
+      const { text, correct } = normalizeYamlOption(opt);
+      return h(QuizOption, {
+        key: i,
+        optionIndex: i,
+        correct,
+        label: text,
+        selected: selectedOptions.value.has(i),
+        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),
+    }),
+  );
+}
+
+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"
+        ? h(
+            "span",
+            { class: "text-xs font-normal text-muted-foreground mr-2" },
+            text.value.multipleChoice,
+          )
+        : 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>
+
+<template>
+  <component :is="renderQuestion" />
+</template>

package/app/components/mdc/MdcReadMore.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+import { computed, inject } from "vue";
+import { cn } from "../../utils";
+import { isExternalLink, resolveIconifyIcon } from "./icons";
+
+const MDC_READ_MORE_GROUP = Symbol.for("mdc.readMoreGroup");
+const inReadMoreGroup = inject(MDC_READ_MORE_GROUP, false);
+
+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 wrapperTag = computed(() => (isExternalLink(props.to) ? "a" : NuxtLink));
+
+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",
+      ),
+}));
+</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',
+      )
+    "
+  >
+    <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" />
+        </span>
+      </div>
+    </component>
+  </component>
+</template>

package/app/components/mdc/MdcReadMoreGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { provide } from "vue";
+
+const MDC_READ_MORE_GROUP = Symbol.for("mdc.readMoreGroup");
+
+provide(MDC_READ_MORE_GROUP, true);
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    class="not-prose my-6 gap-0 overflow-hidden rounded-xl border bg-card py-0 text-card-foreground shadow-xs transition-colors hover:border-foreground/20"
+  >
+    <div class="flex flex-col divide-y divide-border">
+      <slot />
+    </div>
+  </div>
+</template>