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

package/app/components/mdc/MdcDropcap.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed, type CSSProperties } from "vue";
-import { cn } from "../../utils";
-import type { HTMLAttributes } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * Drop cap spans this many line boxes (`initial-letter` size / sink).
-     * Markdown props may arrive as strings.
-     */
-    lines?: number | string;
-    class?: HTMLAttributes["class"];
-  }>(),
-  { lines: 2 },
-);
-
-const lineCount = computed(() => {
-  const n = Math.round(Number(props.lines));
-  if (Number.isFinite(n) && n >= 2 && n <= 4) return n;
-  return 2;
-});
-
-const dropcapStyle = computed(
-  (): CSSProperties => ({
-    "--mdc-dropcap-lines": String(lineCount.value),
-  }),
-);
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'mdc-dropcap content-prose content-prose-trim not-prose my-6 text-pretty [&>p]:text-muted-foreground',
-        '[&>p:not(:first-of-type)]:mt-4',
-        '[&>p:first-of-type]:flow-root',
-        props.class,
-      )
-    "
-    :style="dropcapStyle"
-  >
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.mdc-dropcap {
-  --mdc-dropcap-lines: 2;
-}
-
-.mdc-dropcap :deep(p:first-of-type)::first-letter {
-  font-weight: 600;
-  color: var(--foreground);
-  margin-inline-end: 0.15em;
-}
-
-/* CSS Inline Layout 3: typographic alignment vs float hacks (Chrome 110+, Safari + webkit prefix). */
-@supports (-webkit-initial-letter: 2) or (initial-letter: 1 1) {
-  .mdc-dropcap :deep(p:first-of-type)::first-letter {
-    -webkit-initial-letter: var(--mdc-dropcap-lines);
-    initial-letter: var(--mdc-dropcap-lines);
-  }
-}
-
-/* Firefox and legacy: float plus glyph height approximates N line boxes (`lh` ties to paragraph leading). */
-@supports (not ((-webkit-initial-letter: 2) or (initial-letter: 1 1))) {
-  .mdc-dropcap :deep(p:first-of-type)::first-letter {
-    float: left;
-    line-height: 1;
-    margin-top: 0.08em;
-    margin-bottom: -0.06em;
-    font-size: calc(var(--mdc-dropcap-lines) * 1.325em);
-  }
-
-  @supports (font-size: 1lh) {
-    .mdc-dropcap :deep(p:first-of-type)::first-letter {
-      font-size: calc(var(--mdc-dropcap-lines) * 1lh);
-      margin-top: 0.05em;
-      margin-bottom: -0.06em;
-    }
-  }
-}
-</style>

package/app/components/mdc/MdcError.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="error"
-    :appearance="appearance"
-    :class="props.class"
-  >
-    <slot />
-  </MdcCallout>
-</template>

package/app/components/mdc/MdcExcerpt.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  label?: string;
-  source?: string;
-  appearance?: "quiet" | "tint";
-  class?: HTMLAttributes["class"];
-}>();
-
-const appearance = useProseAppearance("excerpt", () => props.appearance);
-</script>
-
-<template>
-  <figure :class="cn('content-excerpt not-prose', props.class)" :data-appearance="appearance">
-    <p v-if="label" class="content-excerpt-label">
-      {{ label }}
-    </p>
-    <blockquote class="content-excerpt-body content-prose content-prose-trim">
-      <slot />
-    </blockquote>
-    <figcaption v-if="source" class="content-excerpt-source">{{ source }}</figcaption>
-  </figure>
-</template>

package/app/components/mdc/MdcFigure.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { Motion } from "motion-v";
-import { computed } from "vue";
-import { useI18n } from "#imports";
-import ImageZoomDialog from "#ginko-docs/components/content/ImageZoomDialog.vue";
-import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
-import { cn } from "../../utils";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-
-const props = withDefaults(
-  defineProps<{
-    src?: string;
-    alt?: string;
-    caption?: string;
-    width?: string | number;
-    height?: string | number;
-    bleed?: boolean | string;
-    aspect?: "auto" | "video" | "wide" | "square" | "portrait";
-    fit?: "cover" | "contain";
-    zoom?: boolean | string;
-    class?: HTMLAttributes["class"];
-    appearance?: "quiet" | "tint";
-  }>(),
-  {
-    // Vue casts an absent Boolean-typed prop to false; "auto" preserves the
-    // site-wide images.zoom default unless the author overrides it.
-    zoom: "auto",
-  },
-);
-const appearance = useProseAppearance("figure", () => props.appearance);
-
-const { t } = useI18n();
-const config = useGinkoDocsConfig();
-const zoomEnabled = computed(() => {
-  if (props.zoom === "auto") return config.images?.zoom !== false;
-  return props.zoom === true || props.zoom === "true";
-});
-const shouldBleed = computed(
-  () => props.bleed === true || props.bleed === "true" || props.bleed === "outside",
-);
-
-const aspectClass = computed(() => {
-  return {
-    auto: "",
-    video: "aspect-video",
-    wide: "aspect-[21/9]",
-    square: "aspect-square",
-    portrait: "aspect-[4/5]",
-  }[props.aspect ?? "auto"];
-});
-
-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"
-    :data-appearance="appearance"
-  >
-    <template v-if="src">
-      <ImageZoomDialog v-if="zoomEnabled" :src="src" :alt="alt" :label="caption">
-        <template #trigger="{ layoutId, transition }">
-          <button
-            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 ?? ''}`"
-          >
-            <Motion as-child :layout-id="layoutId" :transition="transition">
-              <img :src="src" :alt="alt" :width="width" :height="height" :class="imageClass" />
-            </Motion>
-          </button>
-        </template>
-      </ImageZoomDialog>
-      <img v-else :src="src" :alt="alt" :width="width" :height="height" :class="imageClass" />
-    </template>
-    <slot />
-    <figcaption v-if="caption || alt">
-      {{ caption || alt }}
-    </figcaption>
-  </figure>
-</template>

package/app/components/mdc/MdcFiles.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import type { VNode } from "vue";
-import { h, resolveComponent, useSlots } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { resolveFileIcon } from "../../utils/file-icons";
-
-type FileEntry = {
-  name: string;
-  path: string;
-  children?: FileEntry[];
-};
-
-const props = defineProps<{
-  active?: string;
-  annotations?: Record<string, string>;
-  appearance?: "quiet" | "tint";
-}>();
-
-const slots = useSlots();
-const appearance = useProseAppearance("files", () => props.appearance);
-
-function childrenOf(node: VNode): VNode[] {
-  if (Array.isArray(node.children)) return node.children.filter(isVNode);
-  if (node.children && typeof node.children === "object") {
-    const slot = (node.children as { default?: () => unknown }).default;
-    const children = typeof slot === "function" ? slot() : [];
-    if (Array.isArray(children)) return children.filter(isVNode);
-    return isVNode(children) ? [children] : [];
-  }
-  return [];
-}
-
-function isVNode(value: unknown): value is VNode {
-  return value !== null && typeof value === "object" && "type" in value;
-}
-
-function textOf(value: unknown): string {
-  if (typeof value === "string") return value;
-  if (Array.isArray(value)) return value.map(textOf).join("");
-  if (!isVNode(value)) return "";
-  if (typeof value.children === "string") return value.children;
-  if (value.children && typeof value.children === "object") {
-    const slot = (value.children as { default?: () => unknown }).default;
-    if (typeof slot === "function") return textOf(slot());
-  }
-  return childrenOf(value).map(textOf).join("");
-}
-
-function parseList(list: VNode, parent = ""): FileEntry[] {
-  return childrenOf(list)
-    .map((item) => {
-      const children = childrenOf(item);
-      const nested = children.length > 1 ? children.at(-1) : undefined;
-      const name = children
-        .filter((node) => node !== nested)
-        .map(textOf)
-        .join("")
-        .trim();
-      const path = parent ? `${parent}/${name}` : name;
-      return {
-        name,
-        path,
-        ...(nested ? { children: parseList(nested, path) } : {}),
-      };
-    })
-    .filter((entry) => entry.name.length > 0);
-}
-
-function renderEntries(items: FileEntry[]): VNode {
-  const Icon = resolveComponent("Icon");
-  return h(
-    "ul",
-    { class: "content-files-list" },
-    items.map((entry) => {
-      const folder = Boolean(entry.children);
-      const active = props.active === entry.path;
-      return h("li", { key: entry.path, class: "content-files-item" }, [
-        h(
-          "div",
-          {
-            class: "content-files-row",
-            "data-active": active || undefined,
-            "aria-current": active ? "true" : undefined,
-          },
-          [
-            h(Icon, {
-              name: folder ? "lucide:folder-open" : resolveFileIcon(entry.name),
-              class: "content-files-icon",
-              "aria-hidden": "true",
-            }),
-            h("span", { class: "content-files-name" }, entry.name),
-            props.annotations?.[entry.path]
-              ? h("span", { class: "content-files-annotation" }, props.annotations[entry.path])
-              : null,
-          ],
-        ),
-        entry.children?.length ? renderEntries(entry.children) : null,
-      ]);
-    }),
-  );
-}
-
-function renderFiles() {
-  const list = slots.default?.()[0];
-  const entries = list ? parseList(list) : [];
-  if (!entries.length) return null;
-  return h(
-    "div",
-    {
-      class: "content-files not-prose",
-      "data-appearance": appearance.value,
-    },
-    [renderEntries(entries)],
-  );
-}
-</script>
-
-<template>
-  <component :is="renderFiles" />
-</template>

package/app/components/mdc/MdcIdea.vue

@@ -1,17 +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="idea" :appearance="appearance" :class="props.class">
-    <slot />
-  </MdcCallout>
-</template>

package/app/components/mdc/MdcInfo.vue

@@ -1,17 +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="info" :appearance="appearance" :class="props.class">
-    <slot />
-  </MdcCallout>
-</template>

package/app/components/mdc/MdcInlineToc.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed, inject } from "vue";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "#ginko-docs/components/ui/collapsible";
-import DocsToc from "#ginko-docs/features/docs/components/DocsToc.vue";
-import { docsTocKey } from "#ginko-docs/features/docs/toc-context";
-import { filterTocByDepth } from "#ginko-docs/utils/content";
-import { useI18n } from "#imports";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  title?: string;
-  /** Restrict to headings up to this depth (within the page TOC depth). */
-  depth?: number;
-  open?: boolean | string;
-  class?: HTMLAttributes["class"];
-}>();
-
-const { t } = useI18n();
-const pageToc = inject(docsTocKey, undefined);
-
-const items = computed(() => {
-  const all = pageToc?.value ?? [];
-  return props.depth ? filterTocByDepth(all, props.depth) : all;
-});
-
-const defaultOpen = computed(
-  () => props.open !== undefined && props.open !== false && props.open !== "false",
-);
-</script>
-
-<template>
-  <Collapsible
-    v-if="items.length"
-    :default-open="defaultOpen"
-    :class="cn('content-inline-toc not-prose', props.class)"
-  >
-    <CollapsibleTrigger class="content-inline-toc-trigger">
-      <Icon name="lucide:list" class="content-inline-toc-icon" aria-hidden="true" />
-      <span class="content-inline-toc-title">{{ title ?? t("docs.toc") }}</span>
-      <Icon name="lucide:chevron-down" class="content-inline-toc-chevron" aria-hidden="true" />
-    </CollapsibleTrigger>
-    <CollapsibleContent class="content-inline-toc-content">
-      <DocsToc :items="items" :show-title="false" />
-    </CollapsibleContent>
-  </Collapsible>
-</template>

package/app/components/mdc/MdcKbd.vue

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

package/app/components/mdc/MdcLayout.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, type HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-type ValueProp<T extends string> = T | { value?: T | string };
-type LayoutType = "default" | "card" | "border" | "border-dashed" | "outline" | "outline-dashed";
-
-const props = withDefaults(
-  defineProps<{
-    type?: ValueProp<LayoutType>;
-    class?: HTMLAttributes["class"];
-  }>(),
-  {
-    type: "default",
-  },
-);
-
-const layoutTypeValue = computed<LayoutType>(() => {
-  if (typeof props.type === "string") return props.type;
-  return (props.type?.value as LayoutType | undefined) ?? "default";
-});
-
-const layoutRowClass = "content-layout-row";
-
-provide(
-  "mdc-layout-type",
-  computed(() => layoutTypeValue.value),
-);
-provide("mdc-inside-layout", true);
-</script>
-
-<template>
-  <div :class="cn('content-layout h-full', props.class)">
-    <div v-if="layoutTypeValue === 'card'" class="w-full">
-      <div class="h-full">
-        <div :class="layoutRowClass">
-          <slot />
-        </div>
-      </div>
-    </div>
-    <div
-      v-else
-      :class="
-        cn(
-          layoutRowClass,
-          'h-full',
-          layoutTypeValue === 'border' && 'content-layout-row-border',
-          layoutTypeValue === 'border-dashed' && 'content-layout-row-border-dashed',
-          layoutTypeValue === 'outline' && 'content-layout-row-outline',
-          layoutTypeValue === 'outline-dashed' && 'content-layout-row-outline-dashed',
-        )
-      "
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcNote.vue

@@ -1,17 +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="note" :appearance="appearance" :class="props.class">
-    <slot />
-  </MdcCallout>
-</template>