@slexn/codecenter-ui 1.0.0

package/src/components/ui/diff/DiffTool.vue

@@ -0,0 +1,513 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { CheckIcon, CopyIcon, Maximize2Icon, Minimize2Icon } from "@lucide/vue"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import {
+  diffToolDefaults,
+  type DiffToolEmits,
+  type DiffToolProps,
+} from "./diff-tool"
+import { createSplitDiffModel, splitDiffCopyText } from "./diff-parser"
+
+const props = withDefaults(
+  defineProps<DiffToolProps>(),
+  diffToolDefaults,
+)
+
+const emit = defineEmits<DiffToolEmits>()
+
+const copied = ref(false)
+const expanded = ref(false)
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
+let previousBodyOverflow: string | undefined
+let syncingPaneScroll = false
+
+const diffModel = computed(() => createSplitDiffModel({
+  code: props.code,
+  highlight: props.highlight,
+  language: props.language,
+  leftCode: props.leftCode,
+  leftLabel: props.leftLabel,
+  rightCode: props.rightCode,
+  rightLabel: props.rightLabel,
+}))
+const visibleLineCount = computed(() =>
+  Math.max(1, Math.trunc(props.maxVisibleLines)),
+)
+const shouldScroll = computed(() => diffModel.value.rows.length > visibleLineCount.value)
+const lineStyle = computed(() => ({
+  gridTemplateColumns: props.lineNumbers
+    ? `${diffModel.value.lineNumberWidth} max-content`
+    : "max-content",
+}))
+const collapsedScrollStyle = computed(() => shouldScroll.value
+  ? {
+      maxHeight: `calc(${visibleLineCount.value} * 1.5rem + 2.5rem)`,
+    }
+  : undefined)
+const languageLabel = computed(() => diffModel.value.language || props.language || props.label)
+const copyText = computed(() => splitDiffCopyText(diffModel.value))
+
+async function copyDiff() {
+  try {
+    if (typeof navigator !== "undefined") {
+      await navigator.clipboard?.writeText(copyText.value)
+    }
+  } catch {
+    // Clipboard permissions vary by browser; the component still reports intent.
+  }
+
+  emit("copy", copyText.value)
+  copied.value = true
+
+  if (copiedTimer) clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => {
+    copied.value = false
+  }, 1200)
+}
+
+function openExpanded() {
+  expanded.value = true
+}
+
+function closeExpanded() {
+  expanded.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") closeExpanded()
+}
+
+function syncPaneScroll(event: Event) {
+  if (syncingPaneScroll || !(event.currentTarget instanceof HTMLElement)) return
+
+  const sourcePane = event.currentTarget
+  const scrollContainer = sourcePane.closest('[data-slot="diff-tool-scroll"]')
+  const panes = scrollContainer?.querySelectorAll<HTMLElement>('[data-slot="diff-tool-pane"]')
+
+  if (!panes) return
+
+  syncingPaneScroll = true
+
+  panes.forEach((pane) => {
+    if (pane !== sourcePane) {
+      pane.scrollLeft = sourcePane.scrollLeft
+    }
+  })
+
+  requestAnimationFrame(() => {
+    syncingPaneScroll = false
+  })
+}
+
+watch(expanded, (isExpanded) => {
+  if (typeof document === "undefined" || typeof window === "undefined") return
+
+  if (isExpanded) {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    window.addEventListener("keydown", handleKeydown)
+    return
+  }
+
+  document.body.style.overflow = previousBodyOverflow ?? ""
+  previousBodyOverflow = undefined
+  window.removeEventListener("keydown", handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  if (copiedTimer) clearTimeout(copiedTimer)
+
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = previousBodyOverflow ?? ""
+  }
+  if (typeof window !== "undefined") {
+    window.removeEventListener("keydown", handleKeydown)
+  }
+})
+</script>
+
+<template>
+  <div
+    data-slot="diff-tool"
+    :data-scrollable="shouldScroll ? '' : undefined"
+    :class="
+      cn(
+        'relative w-full min-w-0 overflow-hidden rounded-xl border font-mono text-[13px] leading-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <div
+      data-slot="diff-tool-toolbar"
+      class="flex h-11 items-center justify-between gap-3 border-b px-3"
+    >
+      <div class="flex min-w-0 items-center gap-2">
+        <span
+          data-slot="diff-tool-label"
+          class="truncate text-xs font-medium"
+        >
+          {{ props.label }}
+        </span>
+        <span
+          data-slot="diff-tool-language"
+          class="shrink-0 text-xs"
+        >
+          {{ languageLabel }}
+        </span>
+      </div>
+      <div class="flex shrink-0 items-center gap-1">
+        <Button
+          data-slot="diff-tool-copy"
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="size-7 rounded-md"
+          :aria-label="copied ? props.copiedLabel : props.copyLabel"
+          :title="copied ? props.copiedLabel : props.copyLabel"
+          @click="copyDiff"
+        >
+          <CheckIcon v-if="copied" />
+          <CopyIcon v-else />
+        </Button>
+        <Button
+          data-slot="diff-tool-expand-trigger"
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="size-7 rounded-md"
+          :aria-label="props.expandLabel"
+          :title="props.expandLabel"
+          @click="openExpanded"
+        >
+          <Maximize2Icon />
+        </Button>
+      </div>
+    </div>
+
+    <div
+      data-slot="diff-tool-scroll"
+      :data-scrollable="shouldScroll ? '' : undefined"
+      class="min-w-0 max-w-full overflow-y-auto overflow-x-hidden [tab-size:2]"
+      :style="collapsedScrollStyle"
+    >
+      <div
+        data-slot="diff-tool-header-row"
+        class="sticky top-0 z-10 grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
+      >
+        <div
+          data-slot="diff-tool-side-header"
+          class="min-w-0 border-b px-3 py-2 text-left text-xs font-medium"
+        >
+          {{ diffModel.leftLabel }}
+        </div>
+        <div
+          data-slot="diff-tool-side-header"
+          data-side="right"
+          class="min-w-0 border-b border-l px-3 py-2 text-left text-xs font-medium"
+        >
+          {{ diffModel.rightLabel }}
+        </div>
+      </div>
+      <div
+        data-slot="diff-tool-panes"
+        class="grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
+      >
+        <div
+          data-slot="diff-tool-pane"
+          class="min-w-0 overflow-x-auto overflow-y-hidden"
+          @scroll="syncPaneScroll"
+        >
+          <div
+            data-slot="diff-tool-pane-content"
+            class="inline-block min-w-full"
+          >
+            <div
+              v-for="row in diffModel.rows"
+              :key="`${row.key}-left`"
+              data-slot="diff-tool-row"
+              data-side="left"
+              class="w-max min-w-full"
+            >
+              <div
+                data-slot="diff-tool-cell"
+                :data-diff="row.left.kind"
+                class="w-max min-w-full"
+              >
+                <div
+                  data-slot="diff-tool-line"
+                  class="grid w-max min-w-full"
+                  :style="lineStyle"
+                >
+                  <span
+                    v-if="props.lineNumbers"
+                    data-slot="diff-tool-line-number"
+                    aria-hidden="true"
+                    class="select-none border-r pl-2 pr-3 text-right tabular-nums"
+                  >
+                    {{ row.left.lineNumber }}
+                  </span>
+                  <code
+                    data-slot="diff-tool-line-content"
+                    class="block min-h-[1lh] min-w-max pl-3 pr-4 whitespace-pre"
+                  ><span
+                    v-if="row.left.isEmpty"
+                    aria-hidden="true"
+                  >&nbsp;</span><span
+                    v-else
+                    data-slot="diff-tool-token"
+                    v-html="row.left.html"
+                  /></code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          data-slot="diff-tool-pane"
+          data-side="right"
+          class="min-w-0 overflow-x-auto overflow-y-hidden border-l"
+          @scroll="syncPaneScroll"
+        >
+          <div
+            data-slot="diff-tool-pane-content"
+            class="inline-block min-w-full"
+          >
+            <div
+              v-for="row in diffModel.rows"
+              :key="`${row.key}-right`"
+              data-slot="diff-tool-row"
+              data-side="right"
+              class="w-max min-w-full"
+            >
+              <div
+                data-slot="diff-tool-cell"
+                data-side="right"
+                :data-diff="row.right.kind"
+                class="w-max min-w-full"
+              >
+                <div
+                  data-slot="diff-tool-line"
+                  class="grid w-max min-w-full"
+                  :style="lineStyle"
+                >
+                  <span
+                    v-if="props.lineNumbers"
+                    data-slot="diff-tool-line-number"
+                    aria-hidden="true"
+                    class="select-none border-r pl-2 pr-3 text-right tabular-nums"
+                  >
+                    {{ row.right.lineNumber }}
+                  </span>
+                  <code
+                    data-slot="diff-tool-line-content"
+                    class="block min-h-[1lh] min-w-max pl-3 pr-4 whitespace-pre"
+                  ><span
+                    v-if="row.right.isEmpty"
+                    aria-hidden="true"
+                  >&nbsp;</span><span
+                    v-else
+                    data-slot="diff-tool-token"
+                    v-html="row.right.html"
+                  /></code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <div
+      v-if="expanded"
+      data-slot="diff-tool-dialog-overlay"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4"
+      @click.self="closeExpanded"
+    >
+      <section
+        data-slot="diff-tool-dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="props.expandLabel"
+        class="grid w-full max-w-7xl grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-2xl border shadow-2xl"
+      >
+        <h2 class="sr-only">
+          {{ props.expandLabel }}
+        </h2>
+        <div
+          data-slot="diff-tool-dialog-header"
+          class="flex h-11 items-center justify-between gap-3 border-b px-4"
+        >
+          <span
+            data-slot="diff-tool-label"
+            class="min-w-0 truncate text-xs font-medium"
+          >
+            {{ props.label }}
+          </span>
+          <div class="flex shrink-0 items-center gap-1">
+            <Button
+              data-slot="diff-tool-copy"
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              class="size-8 rounded-md"
+              :aria-label="copied ? props.copiedLabel : props.copyLabel"
+              :title="copied ? props.copiedLabel : props.copyLabel"
+              @click="copyDiff"
+            >
+              <CheckIcon v-if="copied" />
+              <CopyIcon v-else />
+            </Button>
+            <Button
+              data-slot="diff-tool-collapse-trigger"
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              class="size-8 rounded-md"
+              :aria-label="props.closeLabel"
+              :title="props.closeLabel"
+              @click="closeExpanded"
+            >
+              <Minimize2Icon />
+            </Button>
+          </div>
+        </div>
+
+        <div
+          data-slot="diff-tool-scroll"
+          data-expanded
+          class="min-w-0 max-w-full max-h-[calc(90vh-4rem)] overflow-y-auto overflow-x-hidden [tab-size:2]"
+        >
+          <div
+            data-slot="diff-tool-header-row"
+            class="sticky top-0 z-10 grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
+          >
+            <div
+              data-slot="diff-tool-side-header"
+              class="min-w-0 border-b px-3 py-2 text-left text-xs font-medium"
+            >
+              {{ diffModel.leftLabel }}
+            </div>
+            <div
+              data-slot="diff-tool-side-header"
+              data-side="right"
+              class="min-w-0 border-b border-l px-3 py-2 text-left text-xs font-medium"
+            >
+              {{ diffModel.rightLabel }}
+            </div>
+          </div>
+          <div
+            data-slot="diff-tool-panes"
+            class="grid min-w-0 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
+          >
+            <div
+              data-slot="diff-tool-pane"
+              class="min-w-0 overflow-x-auto overflow-y-hidden"
+              @scroll="syncPaneScroll"
+            >
+              <div
+                data-slot="diff-tool-pane-content"
+                class="inline-block min-w-full"
+              >
+                <div
+                  v-for="row in diffModel.rows"
+                  :key="`${row.key}-dialog-left`"
+                  data-slot="diff-tool-row"
+                  data-side="left"
+                  class="w-max min-w-full"
+                >
+                  <div
+                    data-slot="diff-tool-cell"
+                    :data-diff="row.left.kind"
+                    class="w-max min-w-full"
+                  >
+                    <div
+                      data-slot="diff-tool-line"
+                      class="grid w-max min-w-full"
+                      :style="lineStyle"
+                    >
+                      <span
+                        v-if="props.lineNumbers"
+                        data-slot="diff-tool-line-number"
+                        aria-hidden="true"
+                        class="select-none border-r pl-2 pr-3 text-right tabular-nums"
+                      >
+                        {{ row.left.lineNumber }}
+                      </span>
+                      <code
+                        data-slot="diff-tool-line-content"
+                        class="block min-h-[1lh] min-w-max pl-3 pr-4 whitespace-pre"
+                      ><span
+                        v-if="row.left.isEmpty"
+                        aria-hidden="true"
+                      >&nbsp;</span><span
+                        v-else
+                        data-slot="diff-tool-token"
+                        v-html="row.left.html"
+                      /></code>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              data-slot="diff-tool-pane"
+              data-side="right"
+              class="min-w-0 overflow-x-auto overflow-y-hidden border-l"
+              @scroll="syncPaneScroll"
+            >
+              <div
+                data-slot="diff-tool-pane-content"
+                class="inline-block min-w-full"
+              >
+                <div
+                  v-for="row in diffModel.rows"
+                  :key="`${row.key}-dialog-right`"
+                  data-slot="diff-tool-row"
+                  data-side="right"
+                  class="w-max min-w-full"
+                >
+                  <div
+                    data-slot="diff-tool-cell"
+                    data-side="right"
+                    :data-diff="row.right.kind"
+                    class="w-max min-w-full"
+                  >
+                    <div
+                      data-slot="diff-tool-line"
+                      class="grid w-max min-w-full"
+                      :style="lineStyle"
+                    >
+                      <span
+                        v-if="props.lineNumbers"
+                        data-slot="diff-tool-line-number"
+                        aria-hidden="true"
+                        class="select-none border-r pl-2 pr-3 text-right tabular-nums"
+                      >
+                        {{ row.right.lineNumber }}
+                      </span>
+                      <code
+                        data-slot="diff-tool-line-content"
+                        class="block min-h-[1lh] min-w-max pl-3 pr-4 whitespace-pre"
+                      ><span
+                        v-if="row.right.isEmpty"
+                        aria-hidden="true"
+                      >&nbsp;</span><span
+                        v-else
+                        data-slot="diff-tool-token"
+                        v-html="row.right.html"
+                      /></code>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </Teleport>
+</template>