@lupinum/ginko-docs 0.4.0-rc.8 → 0.4.0

package/app/components/mdc/MdcQuiz.vue

@@ -1,241 +0,0 @@
-<script setup lang="ts">
-import type { VNode } 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;
-  description?: string;
-  questionLabel?: string;
-  backLabel?: string;
-  nextLabel?: string;
-  resultsLabel?: string;
-  correctSummaryLabel?: string;
-  perfectLabel?: string;
-  retryPrompt?: string;
-  resetLabel?: string;
-  appearance?: "quiet" | "tint";
-}>();
-const appearance = useProseAppearance("quiz", () => props.appearance);
-
-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);
-}
-
-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 allAnswered = computed(() => state.answers.size === state.totalQuestions);
-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 ? "Zurück" : "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("content-quiz-button", options.variant === "ghost" && "content-quiz-button-ghost"),
-      onClick: options.onClick,
-    },
-    children,
-  );
-}
-
-function renderHeader() {
-  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,
-    ]),
-  ]);
-}
-
-function renderDots() {
-  return h(
-    "div",
-    { class: "content-quiz-dots" },
-    Array.from({ length: state.totalQuestions }, (_, i) =>
-      h("button", {
-        type: "button",
-        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;
-        },
-      }),
-    ),
-  );
-}
-
-function renderFooter() {
-  const isLast = activeIndex.value === state.totalQuestions - 1;
-
-  return h("div", { class: "content-quiz-footer" }, [
-    h(
-      "span",
-      { class: "content-quiz-progress" },
-      `${text.value.question} ${activeIndex.value + 1} ${text.value.of} ${state.totalQuestions}`,
-    ),
-    renderDots(),
-    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: !allAnswered.value,
-            onClick: () => {
-              showResults.value = true;
-            },
-          })
-        : renderButton(
-            [text.value.next, h(Icon, { name: "lucide:chevron-right", ariaHidden: true })],
-            {
-              disabled: !currentAnswered.value,
-              onClick: () => {
-                activeIndex.value++;
-              },
-            },
-          ),
-    ]),
-  ]);
-}
-
-function renderResults() {
-  const perfect = correctCount.value === state.totalQuestions;
-
-  return h("div", { class: "content-quiz-results" }, [
-    h(
-      "div",
-      {
-        class: "content-quiz-results-icon",
-        "data-state": perfect ? "perfect" : undefined,
-      },
-      [h(Icon, { name: "lucide:trophy", ariaHidden: true })],
-    ),
-    h("div", {}, [
-      h(
-        "p",
-        { class: "content-quiz-results-score" },
-        `${correctCount.value} ${text.value.of} ${state.totalQuestions} ${text.value.correct}`,
-      ),
-      h(
-        "p",
-        { class: "content-quiz-results-note" },
-        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(h("div", { class: "content-quiz-body" }, [renderResults()]));
-  } else {
-    children.push(
-      h(
-        "div",
-        { class: "content-quiz-body" },
-        items.map((node, i) =>
-          h(
-            "div",
-            {
-              key: i,
-              style: i === activeIndex.value ? undefined : { display: "none" },
-            },
-            [cloneVNode(node)],
-          ),
-        ),
-      ),
-    );
-    if (state.totalQuestions > 1) {
-      children.push(renderFooter());
-    }
-  }
-
-  return h(
-    "div",
-    {
-      "data-appearance": appearance.value,
-      class: "content-quiz not-prose",
-    },
-    children,
-  );
-}
-</script>
-
-<template>
-  <component :is="renderQuiz" />
-</template>

package/app/components/mdc/MdcQuizQuestion.vue

@@ -1,221 +0,0 @@
-<script setup lang="ts">
-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";
-import { parseQuizOptions, type QuizOption, type QuizType } from "./quiz.utils";
-
-const props = withDefaults(
-  defineProps<{
-    question: string;
-    type?: QuizType;
-    explanation?: string;
-    options: QuizOption[];
-    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 möglich)" : "(select all that apply)"),
-  };
-});
-
-const options = computed(() => parseQuizOptions(props.options, props.type));
-const useYaml = computed(() => options.value.length > 0);
-
-const isCorrect = computed(() => {
-  return options.value.every(
-    (option, index) => option.correct === selectedOptions.value.has(index),
-  );
-});
-
-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("content-quiz-button", options.variant === "ghost" && "content-quiz-button-ghost"),
-      onClick: options.onClick,
-    },
-    label,
-  );
-}
-
-function renderOptions() {
-  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,
-        type: "button",
-        disabled: isSubmitted.value,
-        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: 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(
-            "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,
-    ],
-  );
-}
-</script>
-
-<template>
-  <component :is="renderQuestion" />
-</template>

package/app/components/mdc/MdcReadMore.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { NuxtLink } from "#components";
-import { computed } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { isExternalLink, resolveIconifyIcon } from "./icons";
-
-type ReadMoreLink = {
-  title: string;
-  to: string;
-  description?: string;
-  target?: string;
-  icon?: string;
-};
-
-const props = defineProps<{
-  title?: string;
-  links?: unknown;
-  appearance?: "quiet" | "tint";
-}>();
-
-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 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>
-  <nav
-    v-if="items.length"
-    class="content-read-more not-prose"
-    :data-appearance="appearance"
-    :aria-label="title"
-  >
-    <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>
-        <Icon name="lucide:arrow-up-right" class="content-read-more-arrow" aria-hidden="true" />
-      </component>
-    </div>
-  </nav>
-</template>

package/app/components/mdc/MdcSteps.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes, VNode } from "vue";
-import { cloneVNode, computed, h, resolveComponent, useSlots } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { cn } from "../../utils";
-
-const props = withDefaults(
-  defineProps<{
-    mode?: "icons" | "numbered";
-    appearance?: "quiet" | "tint";
-    class?: HTMLAttributes["class"];
-  }>(),
-  { mode: "icons" },
-);
-
-const slots = useSlots();
-const appearance = useProseAppearance("steps", () => props.appearance);
-
-const steps = computed(() => {
-  const result: Array<{ heading: VNode; body: VNode[] }> = [];
-  for (const node of slots.default?.() ?? []) {
-    if (typeof node.props?.id === "string") {
-      result.push({ heading: node, body: [] });
-    } else if (result.length) {
-      result.at(-1)!.body.push(node);
-    }
-  }
-  return result;
-});
-
-function renderSteps() {
-  const Icon = resolveComponent("Icon");
-  return h(
-    "div",
-    {
-      class: cn("content-steps not-prose", props.class),
-      "data-mode": props.mode,
-      "data-appearance": appearance.value,
-    },
-    steps.value.map((step, index) =>
-      h("section", { key: index, class: "content-step" }, [
-        h("span", { class: "content-step-marker", "aria-hidden": "true" }, [
-          props.mode === "icons"
-            ? h(Icon, { name: "lucide:check", class: "content-step-icon" })
-            : String(index + 1),
-        ]),
-        h("div", { class: "content-step-body content-prose content-prose-trim" }, [
-          cloneVNode(step.heading, { class: "content-step-title" }),
-          ...step.body,
-        ]),
-      ]),
-    ),
-  );
-}
-</script>
-
-<template>
-  <component :is="renderSteps" />
-</template>

package/app/components/mdc/MdcSuccess.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import MdcCallout from "./MdcCallout.vue";
-
-const props = defineProps<{
-  title?: string;
-  icon?: string;
-  appearance?: "quiet" | "tint";
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <MdcCallout
-    :title="title"
-    :icon="icon"
-    type="success"
-    :appearance="appearance"
-    :class="props.class"
-  >
-    <slot />
-  </MdcCallout>
-</template>

package/app/components/mdc/MdcTab.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-});
-
-defineProps<{
-  icon?: string;
-  label?: string;
-  inGroup?: boolean;
-}>();
-</script>
-
-<template>
-  <div :label="label" :in-group="inGroup">
-    <slot />
-  </div>
-</template>