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

package/app/components/mdc/MdcCenter.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-type ValueProp<T extends string> = T | { value?: T | string };
-type CenterSize = "sm" | "md" | "lg";
-type CenterType = "default" | "card" | "border" | "border-dashed" | "outline" | "outline-dashed";
-
-const props = withDefaults(
-  defineProps<{
-    size?: ValueProp<CenterSize>;
-    max?: CenterSize;
-    type?: ValueProp<CenterType>;
-    class?: HTMLAttributes["class"];
-  }>(),
-  {
-    size: "md",
-    type: "default",
-  },
-);
-
-const centerTypeValue = computed<CenterType>(() => {
-  if (typeof props.type === "string") return props.type;
-  return (props.type?.value as CenterType | undefined) ?? "default";
-});
-
-const sizeValue = computed<CenterSize>(() => {
-  if (props.max) return props.max;
-  if (typeof props.size === "string") return props.size;
-  return (props.size?.value as CenterSize | undefined) ?? "md";
-});
-
-const centerSizeClass = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-} as const;
-</script>
-
-<template>
-  <div :class="cn('mx-auto flex justify-center p-2', props.class)">
-    <div
-      v-if="centerTypeValue === 'card'"
-      :class="
-        cn(
-          'mx-auto w-full rounded-lg border bg-card p-6 text-center shadow-xs',
-          centerSizeClass[sizeValue],
-        )
-      "
-    >
-      <slot />
-    </div>
-    <div
-      v-else
-      :class="
-        cn(
-          'mx-auto w-full text-center',
-          centerSizeClass[sizeValue],
-          centerTypeValue !== 'default' && 'rounded-lg p-4',
-          centerTypeValue === 'border' && 'border border-border',
-          centerTypeValue === 'border-dashed' && 'border border-dashed border-border',
-          centerTypeValue === 'outline' && 'outline outline-1 outline-offset-2 outline-border',
-          centerTypeValue === 'outline-dashed' &&
-            'outline-1 outline-offset-2 outline-border outline-dashed',
-        )
-      "
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcCodeGroup.vue

@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import type { VNode } from "vue";
-import { Comment, cloneVNode, computed, h, ref, resolveComponent, useSlots } from "vue";
-import { useClipboard } from "@vueuse/core";
-import { useI18n } from "#imports";
-import { cn } from "../../utils";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-
-type CodeBlockProps = {
-  code?: string;
-  filename?: string | null;
-  language?: string | null;
-  meta?: string | null;
-};
-
-type CodeGroupItem = {
-  code: string;
-  icon?: string;
-  label: string;
-  node: VNode;
-  value: string;
-};
-
-const slots = useSlots();
-const activeValue = ref("");
-const { copy, copied } = useClipboard();
-const { t } = useI18n();
-const props = defineProps<{ appearance?: "quiet" | "tint" }>();
-const appearance = useProseAppearance("code", () => props.appearance);
-
-const PACKAGE_ICONS: Record<string, string> = {
-  bun: "logos:bun",
-  npm: "logos:npm-icon",
-  pnpm: "logos:pnpm",
-  yarn: "logos:yarn",
-};
-
-function isRenderableNode(node: VNode) {
-  return node.type !== Comment;
-}
-
-function textFromNode(input: unknown): string {
-  if (typeof input === "string") return input;
-  if (Array.isArray(input)) return input.map(textFromNode).join("");
-  if (input && typeof input === "object" && "children" in input) {
-    return textFromNode((input as VNode).children);
-  }
-
-  return "";
-}
-
-function cleanLabel(input: string | null | undefined): string {
-  return (
-    input
-      ?.trim()
-      .replace(/^\[(.*)]$/, "$1")
-      .trim() || ""
-  );
-}
-
-function labelFromMeta(meta: string | null | undefined): string {
-  const match = meta?.match(/\[([^\]]+)]/);
-  return cleanLabel(match?.[1]);
-}
-
-function nodeProps(node: VNode): CodeBlockProps {
-  return (node.props || {}) as CodeBlockProps;
-}
-
-function nodeLabel(node: VNode, index: number): string {
-  const props = nodeProps(node);
-
-  return (
-    cleanLabel(props.filename) ||
-    labelFromMeta(props.meta) ||
-    cleanLabel(props.language) ||
-    `Code ${index + 1}`
-  );
-}
-
-const items = computed<CodeGroupItem[]>(() =>
-  (slots.default?.() || []).filter(isRenderableNode).map((node, index) => {
-    const label = nodeLabel(node, index);
-    const value = `${label}-${index}`;
-    const normalizedLabel = label.toLowerCase();
-    const props = nodeProps(node);
-
-    return {
-      code: props.code || textFromNode(node.children),
-      icon: PACKAGE_ICONS[normalizedLabel],
-      label,
-      node,
-      value,
-    };
-  }),
-);
-
-const activeItem = computed(() => {
-  const current = items.value.find((item) => item.value === activeValue.value);
-  return current || items.value[0];
-});
-
-function selectItem(value: string) {
-  activeValue.value = value;
-}
-
-async function copyActiveCode() {
-  await copy(activeItem.value?.code || "");
-}
-
-function renderCodeGroup() {
-  if (!items.value.length) return null;
-  const Icon = resolveComponent("Icon");
-
-  return h(
-    "div",
-    {
-      class: "content-codegroup not-prose group",
-      "data-appearance": appearance.value,
-    },
-    [
-      h("div", { class: "content-codegroup-header" }, [
-        h(
-          "div",
-          {
-            class: "content-codegroup-tabs",
-            role: "tablist",
-          },
-          items.value.map((item) =>
-            h(
-              "button",
-              {
-                key: item.value,
-                type: "button",
-                role: "tab",
-                "aria-selected": activeItem.value?.value === item.value ? "true" : "false",
-                class: cn(
-                  "content-codegroup-tab",
-                  activeItem.value?.value === item.value && "content-codegroup-tab-active",
-                ),
-                onClick: () => selectItem(item.value),
-              },
-              [
-                item.icon
-                  ? h(Icon, {
-                      name: item.icon,
-                      class: "content-codegroup-tab-icon",
-                      "aria-hidden": "true",
-                    })
-                  : null,
-                item.label,
-              ],
-            ),
-          ),
-        ),
-        h(
-          "button",
-          {
-            type: "button",
-            class: "content-codeblock-copy-button content-codegroup-copy-button",
-            "aria-label": copied.value ? t("docs.copiedText") : t("docs.copyText"),
-            onClick: copyActiveCode,
-          },
-          [
-            h(Icon, {
-              name: copied.value ? "lucide:check" : "lucide:clipboard",
-              class: "size-3.5",
-              "aria-hidden": "true",
-            }),
-          ],
-        ),
-      ]),
-      h(
-        "div",
-        {
-          class: "content-codegroup-panels",
-        },
-        items.value.map((item) =>
-          h(
-            "div",
-            {
-              key: item.value,
-              role: "tabpanel",
-              style: activeItem.value?.value === item.value ? undefined : { display: "none" },
-            },
-            [cloneVNode(item.node, { inGroup: true })],
-          ),
-        ),
-      ),
-    ],
-  );
-}
-</script>
-
-<template>
-  <component :is="renderCodeGroup" />
-</template>

package/app/components/mdc/MdcCodeTree.vue

@@ -1,234 +0,0 @@
-<script setup lang="ts">
-import type { VNode } from "vue";
-import { Comment, cloneVNode, h, ref, resolveComponent, useSlots } from "vue";
-import { cn } from "../../utils";
-import { resolveFileIcon } from "../../utils/file-icons";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { validateCodeTreePaths } from "./code-tree.utils";
-
-type CodeBlockProps = {
-  code?: string;
-  filename?: string | null;
-  language?: string | null;
-  meta?: string | null;
-};
-
-type TreeLeaf = {
-  path: string;
-  node: VNode;
-};
-
-type TreeNode = {
-  label: string;
-  path: string;
-  children?: TreeNode[];
-};
-
-const props = defineProps<{
-  /** Path of the file to show initially, e.g. "app/app.config.ts". */
-  defaultValue?: string;
-  expandAll?: boolean;
-  appearance?: "quiet" | "tint";
-}>();
-const appearance = useProseAppearance("code", () => props.appearance);
-
-const slots = useSlots();
-
-function isRenderableNode(node: VNode) {
-  return node.type !== Comment;
-}
-
-function cleanLabel(input: string | null | undefined): string {
-  return (
-    input
-      ?.trim()
-      .replace(/^\[(.*)]$/, "$1")
-      .trim() || ""
-  );
-}
-
-function labelFromMeta(meta: string | null | undefined): string {
-  const match = meta?.match(/\[([^\]]+)]/);
-  return cleanLabel(match?.[1]);
-}
-
-function resolveLeaves(): TreeLeaf[] {
-  const leaves = (slots.default?.() || []).filter(isRenderableNode).map((node) => {
-    const nodeProps = (node.props || {}) as CodeBlockProps;
-    const path = cleanLabel(nodeProps.filename) || labelFromMeta(nodeProps.meta);
-    if (!path) throw new TypeError("Every code tree block requires a filename label");
-    return { path, node };
-  });
-  validateCodeTreePaths(
-    leaves.map((leaf) => leaf.path),
-    props.defaultValue,
-  );
-  return leaves;
-}
-
-function buildTree(paths: string[]): TreeNode[] {
-  const map = new Map<string, TreeNode>();
-  const root: TreeNode[] = [];
-
-  for (const fullPath of paths) {
-    const parts = fullPath.split("/");
-    let path = "";
-
-    parts.forEach((part, i) => {
-      path = path ? `${path}/${part}` : part;
-      if (map.has(path)) return;
-
-      const node: TreeNode = { label: part, path, ...(i < parts.length - 1 && { children: [] }) };
-      map.set(path, node);
-      if (i === 0) root.push(node);
-      else map.get(parts.slice(0, i).join("/"))?.children?.push(node);
-    });
-  }
-
-  const sort = (nodes: TreeNode[]): TreeNode[] =>
-    nodes
-      .sort((a, b) =>
-        !!a.children === !!b.children ? a.label.localeCompare(b.label) : b.children ? 1 : -1,
-      )
-      .map((node) => ({ ...node, children: node.children && sort(node.children) }));
-
-  return sort(root);
-}
-
-function ancestorsOf(path: string): string[] {
-  const parts = path.split("/");
-  return parts.slice(0, -1).map((_, i) => parts.slice(0, i + 1).join("/"));
-}
-
-const selectedPath = ref(props.defaultValue ?? "");
-const expanded = ref(new Set<string>());
-const expansionChanged = ref(false);
-
-function toggleDir(path: string, initial: Set<string>) {
-  if (!expansionChanged.value) {
-    expanded.value = new Set(initial);
-    expansionChanged.value = true;
-  }
-  if (expanded.value.has(path)) expanded.value.delete(path);
-  else expanded.value.add(path);
-}
-
-const rowClass = "content-code-tree-row";
-
-function renderRows(
-  nodes: TreeNode[],
-  openPaths: Set<string>,
-  activePath: string,
-): (VNode | null)[] {
-  const Icon = resolveComponent("Icon");
-
-  return nodes.map((node) => {
-    if (node.children) {
-      const isOpen = openPaths.has(node.path);
-      return h("li", { key: node.path, role: "none" }, [
-        h(
-          "button",
-          {
-            type: "button",
-            class: rowClass,
-            "aria-expanded": isOpen ? "true" : "false",
-            onClick: () => toggleDir(node.path, openPaths),
-          },
-          [
-            h(Icon, {
-              name: "lucide:chevron-right",
-              class: "content-code-tree-chevron",
-              "data-open": isOpen ? "true" : undefined,
-              "aria-hidden": "true",
-            }),
-            h(Icon, {
-              name: isOpen ? "lucide:folder-open" : "lucide:folder",
-              class: "content-code-tree-icon",
-              "aria-hidden": "true",
-            }),
-            h("span", { class: "content-code-tree-label" }, node.label),
-          ],
-        ),
-        isOpen
-          ? h(
-              "ul",
-              { role: "group", class: "content-code-tree-branch" },
-              renderRows(node.children, openPaths, activePath),
-            )
-          : null,
-      ]);
-    }
-
-    const isSelected = activePath === node.path;
-    return h("li", { key: node.path, role: "none" }, [
-      h(
-        "button",
-        {
-          type: "button",
-          class: cn(rowClass, isSelected && "content-code-tree-row-active"),
-          "aria-current": isSelected ? "true" : undefined,
-          onClick: () => (selectedPath.value = node.path),
-        },
-        [
-          h("span", { class: "content-code-tree-spacer", "aria-hidden": "true" }),
-          h(resolveComponent("Icon"), {
-            name: resolveFileIcon(node.label),
-            class: "content-code-tree-icon",
-            "aria-hidden": "true",
-          }),
-          h("span", { class: "content-code-tree-label" }, node.label),
-        ],
-      ),
-    ]);
-  });
-}
-
-function renderCodeTree() {
-  const leaves = resolveLeaves();
-  if (!leaves.length) return null;
-  const activePath = leaves.some((leaf) => leaf.path === selectedPath.value)
-    ? selectedPath.value
-    : leaves[0]!.path;
-  const initialOpenPaths = new Set(
-    props.expandAll ? leaves.flatMap((leaf) => ancestorsOf(leaf.path)) : ancestorsOf(activePath),
-  );
-  const openPaths = expansionChanged.value ? expanded.value : initialOpenPaths;
-  const tree = buildTree(leaves.map((leaf) => leaf.path));
-
-  return h(
-    "div",
-    {
-      class: "content-code-tree not-prose",
-      "data-appearance": appearance.value,
-    },
-    [
-      h(
-        "ul",
-        {
-          class: "content-code-tree-list",
-        },
-        renderRows(tree, openPaths, activePath),
-      ),
-      h(
-        "div",
-        { class: "content-code-tree-pane" },
-        leaves.map((leaf) =>
-          h(
-            "div",
-            {
-              key: leaf.path,
-              class: "content-code-tree-panel",
-              style: activePath === leaf.path ? undefined : { display: "none" },
-            },
-            [cloneVNode(leaf.node)],
-          ),
-        ),
-      ),
-    ],
-  );
-}
-</script>
-
-<template>
-  <component :is="renderCodeTree" />
-</template>

package/app/components/mdc/MdcCollapse.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, provide, ref, useId } from "vue";
-import { useResizeObserver } from "@vueuse/core";
-import { useI18n } from "#imports";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-
-const props = defineProps<{ appearance?: "quiet" | "tint" }>();
-const appearance = useProseAppearance("code", () => props.appearance);
-// The clipped code block must render on the surface the collapse declares.
-provide("contentCodeAppearance", appearance);
-
-// Clips tall authored content (usually a long code block) at a fixed height
-// until the reader expands it. Expanding removes the cap entirely, so the page
-// owns scrolling instead of a nested scroll area.
-const { t } = useI18n();
-const regionId = useId();
-const region = ref<HTMLElement | null>(null);
-const expanded = ref(false);
-const overflows = ref(false);
-const lineCount = ref(0);
-
-function measure() {
-  const el = region.value;
-  if (!el) return;
-  overflows.value = el.scrollHeight - el.clientHeight > 2;
-}
-
-onMounted(() => {
-  lineCount.value = region.value?.querySelectorAll("pre .line").length ?? 0;
-  measure();
-});
-useResizeObserver(region, measure);
-
-const label = computed(() =>
-  lineCount.value ? t("docs.showAllLines", { count: lineCount.value }) : t("docs.showMore"),
-);
-</script>
-
-<template>
-  <div class="content-collapse" :data-appearance="appearance">
-    <div
-      :id="regionId"
-      ref="region"
-      class="content-collapse-region"
-      :data-collapsed="!expanded || undefined"
-    >
-      <slot />
-    </div>
-    <div v-if="!expanded && overflows" class="content-collapse-fade">
-      <button
-        type="button"
-        class="content-collapse-button"
-        :aria-controls="regionId"
-        aria-expanded="false"
-        @click="expanded = true"
-      >
-        {{ label }}
-      </button>
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcColumn.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, type HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-type ValueProp<T extends string> = T | { value?: T | string };
-type ColumnSize = "sm" | "md" | "lg";
-
-const props = withDefaults(
-  defineProps<{
-    size?: ValueProp<ColumnSize>;
-    class?: HTMLAttributes["class"];
-  }>(),
-  {
-    size: "md",
-  },
-);
-
-const parentLayoutType = inject(
-  "mdc-layout-type",
-  computed(() => "default"),
-);
-
-const sizeValue = computed<ColumnSize>(() => {
-  if (typeof props.size === "string") return props.size;
-  return (props.size?.value as ColumnSize | undefined) ?? "md";
-});
-
-const columnSizeClass = {
-  sm: "content-layout-column-sm",
-  md: "content-layout-column-md",
-  lg: "content-layout-column-lg",
-} as const;
-
-const isLastColumn = ref(false);
-const columnRef = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-  nextTick(() => {
-    if (columnRef.value?.parentElement) {
-      const siblings = Array.from(columnRef.value.parentElement.children);
-      isLastColumn.value = siblings.indexOf(columnRef.value) === siblings.length - 1;
-    }
-  });
-});
-
-const showDivider = computed(
-  () => !isLastColumn.value && ["border", "border-dashed"].includes(parentLayoutType.value),
-);
-</script>
-
-<template>
-  <div
-    ref="columnRef"
-    :class="
-      cn(
-        'content-layout-column',
-        columnSizeClass[sizeValue],
-        showDivider && 'content-layout-column-divider',
-        showDivider &&
-          parentLayoutType === 'border-dashed' &&
-          'content-layout-column-divider-dashed',
-        props.class,
-      )
-    "
-  >
-    <div class="content-layout-column-inner">
-      <slot />
-    </div>
-  </div>
-</template>