@lupinum/ginko-docs 0.2.2

package/app/components/mdc/MdcShortcut.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+interface Props {
+  value?: string;
+  size?: "sm" | "md";
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+});
+
+const metaSymbol = ref("Ctrl");
+
+// Safe from Nuxt SSR because onMounted only fires on the client
+onMounted(() => {
+  if (typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh")) {
+    metaSymbol.value = "⌘";
+  }
+});
+
+const resolvedValue = computed(() => {
+  if (props.value === "meta") return metaSymbol.value;
+  return props.value;
+});
+</script>
+
+<template>
+  <kbd
+    :class="
+      cn(
+        'pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm bg-muted font-sans font-medium text-muted-foreground ring-1 ring-border select-none [&_svg:not([class*=size-])]:size-3',
+        size === 'md' ? 'h-7 min-w-7 px-1.5 text-sm' : 'h-5 min-w-5 px-1 text-xs',
+        props.class,
+      )
+    "
+  >
+    <!-- Provide a slot so users can inject custom icons instead of strings if needed -->
+    <slot>
+      {{ resolvedValue }}
+    </slot>
+  </kbd>
+</template>

package/app/components/mdc/MdcStep.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ComputedRef, HTMLAttributes } from "vue";
+import { computed, inject } from "vue";
+import { cn } from "../../utils";
+import { resolveIconifyIcon } from "./icons";
+
+type StepsVariant = "icons" | "numbered";
+
+const props = defineProps<{
+  title?: string;
+  icon?: string;
+  class?: HTMLAttributes["class"];
+}>();
+
+const stepsVariant = inject<ComputedRef<StepsVariant>>(
+  "mdcStepsVariant",
+  computed(() => "icons"),
+);
+
+const isNumbered = computed(() => stepsVariant.value === "numbered");
+
+const iconName = computed(() => {
+  const icon = props.icon?.trim();
+  if (!icon) return "lucide:circle";
+  return resolveIconifyIcon(icon) ?? "lucide:circle";
+});
+</script>
+
+<template>
+  <div :class="cn('content-step', props.class)">
+    <div class="content-step-marker" aria-hidden="true">
+      <Icon v-if="!isNumbered" :name="iconName" class="size-3.5" />
+    </div>
+
+    <div class="content-step-body content-prose content-prose-trim">
+      <p v-if="title" class="content-step-title">
+        {{ title }}
+      </p>
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcSteps.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, provide } from "vue";
+import { cn } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "icons" | "numbered";
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    variant: "icons",
+  },
+);
+
+const normalizedVariant = computed(() => (props.variant === "numbered" ? "numbered" : "icons"));
+
+provide("mdcStepsVariant", normalizedVariant);
+</script>
+
+<template>
+  <div :class="cn('content-steps not-prose', props.class)" :data-variant="normalizedVariant">
+    <slot />
+  </div>
+</template>

package/app/components/mdc/MdcSuccess.vue

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

package/app/components/mdc/MdcTab.vue

@@ -0,0 +1,17 @@
+<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>

package/app/components/mdc/MdcTabs.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { VNode } from "vue";
+import { h, ref, resolveComponent, useSlots } from "vue";
+import { cn } from "../../utils";
+import { resolveIconifyIcon } from "./icons";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "separate" | "line";
+    padded?: boolean;
+    inStack?: boolean;
+  }>(),
+  {
+    variant: "separate",
+    padded: true,
+    inStack: false,
+  },
+);
+
+const slots = useSlots();
+const activeValue = ref("");
+
+type TabItem = {
+  icon?: string;
+  label: string;
+  node: VNode;
+  value: string;
+};
+
+function getTabLabel(node: VNode, index: number) {
+  const label = node.props?.label;
+  return typeof label === "string" && label.trim().length > 0 ? label : `Tab ${index + 1}`;
+}
+
+function getTabIcon(node: VNode) {
+  const icon = node.props?.icon;
+  return typeof icon === "string" ? resolveIconifyIcon(icon) : undefined;
+}
+
+function getItems(): TabItem[] {
+  return (slots.default?.() ?? [])
+    .filter((node): node is VNode => Boolean(node?.type))
+    .map((node, index) => ({
+      icon: getTabIcon(node),
+      label: getTabLabel(node, index),
+      node,
+      value: getTabLabel(node, index),
+    }));
+}
+
+function renderTabs() {
+  const items = getItems();
+  const Icon = resolveComponent("Icon");
+  const resolvedValue = items.some((item) => item.value === activeValue.value)
+    ? activeValue.value
+    : activeValue.value || items[0]?.value || "";
+
+  if (!items.length) {
+    return null;
+  }
+
+  return h(
+    "div",
+    {
+      class: cn("content-tabs not-prose group", props.inStack && "content-tabs-in-stack"),
+    },
+    [
+      h("div", { class: "content-tabs-header" }, [
+        h(
+          "div",
+          {
+            class: "content-tabs-list",
+            role: "tablist",
+          },
+          items.map((item) =>
+            h(
+              "button",
+              {
+                key: item.value,
+                type: "button",
+                role: "tab",
+                "aria-selected": resolvedValue === item.value,
+                class: cn(
+                  "content-tabs-tab",
+                  resolvedValue === item.value && "content-tabs-tab-active",
+                ),
+                onClick: () => {
+                  activeValue.value = item.value;
+                },
+              },
+              [
+                item.icon
+                  ? h(Icon, {
+                      name: item.icon,
+                      class: "content-tabs-tab-icon",
+                      "aria-hidden": "true",
+                    })
+                  : null,
+                item.label,
+              ],
+            ),
+          ),
+        ),
+      ]),
+      h(
+        "div",
+        { class: "content-tabs-panels" },
+        items.map((item) =>
+          h(
+            "div",
+            {
+              key: item.value,
+              value: item.value,
+              role: "tabpanel",
+              class: cn(
+                "content-tabs-content-area content-prose content-prose-trim [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none",
+                props.padded ? "p-4" : "p-0",
+              ),
+              style: resolvedValue === item.value ? undefined : { display: "none" },
+            },
+            [h(item.node, { inGroup: true })],
+          ),
+        ),
+      ),
+    ],
+  );
+}
+</script>
+
+<template>
+  <component :is="renderTabs" />
+</template>

package/app/components/mdc/MdcTimeline.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('not-prose mb-12 ml-4 border-l border-border pl-8', props.class)">
+    <slot />
+  </div>
+</template>

package/app/components/mdc/MdcTimelineItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  date?: string;
+  label?: string;
+  title?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('relative pb-8 last:pb-0', props.class)">
+    <div
+      class="absolute top-0.5 -left-[2.45rem] flex h-5 w-5 items-center justify-center rounded-full border border-border bg-background"
+    >
+      <div class="size-2 rounded-full bg-primary" />
+    </div>
+    <div class="mb-2 flex flex-wrap items-center gap-2">
+      <span
+        v-if="date"
+        class="inline-flex items-center rounded-md border border-border bg-muted/50 px-2 py-0.5 text-xs font-medium text-muted-foreground"
+      >
+        {{ date }}
+      </span>
+      <span
+        v-if="label"
+        class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+      >
+        {{ label }}
+      </span>
+    </div>
+    <p v-if="title" class="mb-1 font-semibold text-foreground">
+      {{ title }}
+    </p>
+    <div
+      :class="
+        cn(
+          'content-prose content-prose-trim text-muted-foreground',
+          '[&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4',
+          '[&_p]:my-2 [&_p]:text-pretty [&_p:first-child]:mt-0 [&_p:last-child]:mb-0',
+        )
+      "
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcWarning.vue

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

package/app/components/mdc/icons.ts

@@ -0,0 +1,10 @@
+export function resolveIconifyIcon(name?: string | null): string | undefined {
+  if (!name?.trim()) return undefined;
+  const n = name.trim();
+  if (n.startsWith("i-lucide-")) return `lucide:${n.slice("i-lucide-".length)}`;
+  return n.includes(":") ? n : `lucide:${n.replace(/_/g, "-").toLowerCase()}`;
+}
+
+export function isExternalLink(to?: string | null) {
+  return Boolean(to && /^(https?:)?\/\//.test(to));
+}

package/app/components/prose/ProseA.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  href?: string;
+  target?: string;
+  class?: HTMLAttributes["class"];
+}>();
+
+const isExternal = computed(
+  () => props.target === "_blank" || (props.href && /^https?:\/\//.test(props.href)),
+);
+</script>
+
+<template>
+  <NuxtLink :href="props.href || ''" :target="props.target" :class="cn(props.class)">
+    <slot />
+    <Icon
+      v-if="isExternal"
+      name="lucide:arrow-up-right"
+      class="ml-0.5 inline size-3 align-text-top"
+      aria-hidden="true"
+    />
+  </NuxtLink>
+</template>

package/app/components/prose/ProseBlockquote.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <blockquote :class="cn(props.class)">
+    <slot />
+  </blockquote>
+</template>

package/app/components/prose/ProseCode.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <code :class="cn('content-code', props.class)">
+    <slot />
+  </code>
+</template>

package/app/components/prose/ProseEm.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <em :class="cn(props.class)">
+    <slot />
+  </em>
+</template>

package/app/components/prose/ProseH1.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  id?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h1 :id="id" :class="cn('scroll-mt-28', props.class)">
+    <a v-if="id" :href="`#${id}`" class="inline-flex items-center gap-2">
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
+</template>

package/app/components/prose/ProseH2.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  id?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h2 :id="id" :class="cn('flex scroll-mt-28 flex-row items-center gap-1.5', props.class)">
+    <a v-if="id" :href="`#${id}`" class="peer" data-card="">
+      <slot />
+    </a>
+    <Icon
+      v-if="id"
+      name="lucide:link"
+      class="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
+      aria-hidden="true"
+    />
+    <slot v-else />
+  </h2>
+</template>

package/app/components/prose/ProseH3.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  id?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h3 :id="id" :class="cn('flex scroll-mt-28 flex-row items-center gap-1.5', props.class)">
+    <a v-if="id" :href="`#${id}`" class="peer" data-card="">
+      <slot />
+    </a>
+    <Icon
+      v-if="id"
+      name="lucide:link"
+      class="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
+      aria-hidden="true"
+    />
+    <slot v-else />
+  </h3>
+</template>

package/app/components/prose/ProseH4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h4 :class="cn('scroll-mt-28', props.class)">
+    <slot />
+  </h4>
+</template>

package/app/components/prose/ProseHr.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <hr :class="cn(props.class)" />
+</template>

package/app/components/prose/ProseImg.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, ref } from "vue";
+import { useI18n } from "#imports";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "#ginko-docs/components/ui/dialog";
+import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
+import { cn } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    src?: string;
+    alt?: string;
+    title?: string;
+    caption?: string;
+    description?: string;
+    width?: string | number;
+    height?: string | number;
+    bleed?: boolean | string;
+    aspect?: "auto" | "video" | "wide" | "square" | "portrait";
+    fit?: "cover" | "contain";
+    align?: "left" | "center" | "right";
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    aspect: "auto",
+    fit: "cover",
+    align: "center",
+  },
+);
+
+const { t } = useI18n();
+const config = useGinkoDocsConfig();
+const zoomEnabled = computed(() => config.images?.zoom !== false);
+const zoomOpen = ref(false);
+
+const shouldBleed = computed(() => props.bleed === true || props.bleed === "true");
+
+const aspectClass = computed(() => {
+  return {
+    auto: "",
+    video: "aspect-video",
+    wide: "aspect-[21/9]",
+    square: "aspect-square",
+    portrait: "aspect-[4/5]",
+  }[props.aspect];
+});
+
+const imageClass = computed(() =>
+  cn("w-full", aspectClass.value, props.fit === "contain" ? "object-contain" : "object-cover"),
+);
+</script>
+
+<template>
+  <figure
+    :class="cn('content-media not-prose', props.class)"
+    :data-bleed="shouldBleed ? 'true' : undefined"
+  >
+    <template v-if="src">
+      <button
+        v-if="zoomEnabled"
+        type="button"
+        class="block w-full cursor-zoom-in rounded-[inherit] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+        :aria-label="`${t('docs.zoomImage')}: ${alt ?? ''}`"
+        @click="zoomOpen = true"
+      >
+        <NuxtImg
+          :src="src"
+          :alt="alt"
+          :width="width"
+          :height="height"
+          sizes="100vw md:768px"
+          loading="lazy"
+          :class="imageClass"
+        />
+      </button>
+      <NuxtImg
+        v-else
+        :src="src"
+        :alt="alt"
+        :width="width"
+        :height="height"
+        sizes="100vw md:768px"
+        loading="lazy"
+        :class="imageClass"
+      />
+    </template>
+    <figcaption
+      v-if="caption || title || alt || description"
+      :class="
+        cn(
+          align === 'left' && 'text-left',
+          align === 'center' && 'text-center',
+          align === 'right' && 'text-right',
+        )
+      "
+    >
+      <span>{{ caption || title || alt }}</span>
+      <span v-if="description" class="content-media-description">
+        {{ description }}
+      </span>
+    </figcaption>
+
+    <Dialog v-if="zoomEnabled" v-model:open="zoomOpen">
+      <DialogContent
+        class="max-h-[90dvh] w-auto max-w-[min(96vw,80rem)] overflow-auto border-none bg-transparent p-0 shadow-none"
+      >
+        <DialogTitle class="sr-only">{{
+          caption || title || alt || t("docs.zoomImage")
+        }}</DialogTitle>
+        <DialogDescription v-if="description" class="sr-only">{{ description }}</DialogDescription>
+        <img :src="src" :alt="alt" class="max-h-[88dvh] w-auto rounded-lg object-contain" />
+      </DialogContent>
+    </Dialog>
+  </figure>
+</template>