@slexn/codecenter-ui 1.0.0

package/src/components/ui/commit/Commit.vue

@@ -0,0 +1,423 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from "vue"
+import type { HTMLAttributes } from "vue"
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  FileIcon,
+  GitCommitHorizontalIcon,
+} from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+export type CommitFileStatus = "added" | "modified" | "deleted" | "renamed"
+export type CommitSize = "sm" | "default" | "lg"
+
+export interface CommitFile {
+  additions?: number
+  deletions?: number
+  path: string
+  status?: CommitFileStatus
+}
+
+export interface CommitCopyPayload {
+  value: string
+}
+
+export interface CommitFileSelectPayload {
+  file: CommitFile
+  index: number
+}
+
+export interface CommitTogglePayload {
+  open: boolean
+}
+
+interface CommitProps {
+  authorInitials?: string
+  authorName?: string
+  avatarLabel?: string
+  class?: HTMLAttributes["class"]
+  collapsible?: boolean
+  copiedLabel?: string
+  copyLabel?: string
+  copyValue?: string
+  date?: string
+  defaultOpen?: boolean
+  emptyLabel?: string
+  files?: CommitFile[]
+  hash?: string
+  message?: string
+  open?: boolean
+  showCopy?: boolean
+  showToggle?: boolean
+  size?: CommitSize
+}
+
+const props = withDefaults(defineProps<CommitProps>(), {
+  authorInitials: "CC",
+  collapsible: true,
+  copiedLabel: "Copied",
+  copyLabel: "Copy commit hash",
+  defaultOpen: true,
+  emptyLabel: "No changed files.",
+  message: "Commit message",
+  showCopy: true,
+  showToggle: true,
+  size: "default",
+})
+
+const emit = defineEmits<{
+  "copy": [payload: CommitCopyPayload]
+  "file-select": [payload: CommitFileSelectPayload]
+  "toggle": [payload: CommitTogglePayload]
+  "update:open": [value: boolean]
+}>()
+
+const copied = ref(false)
+const localOpen = ref(props.defaultOpen)
+let copiedTimeout: ReturnType<typeof setTimeout> | undefined
+
+const commitFiles = computed(() => props.files ?? [])
+const copyText = computed(() => props.copyValue ?? props.hash ?? props.message)
+const copyButtonLabel = computed(() => copied.value ? props.copiedLabel : props.copyLabel)
+const isOpen = computed(() => {
+  if (!props.collapsible) return true
+
+  return props.open ?? localOpen.value
+})
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      avatar: "size-7",
+      avatarIcon: "size-3.5",
+      copyButton: "size-7",
+      copyIcon: "size-3.5",
+      empty: "px-3 py-2.5 text-xs",
+      fileIcon: "size-3.5",
+      files: "py-1.5",
+      header: "gap-2.5 px-3 py-2.5",
+      headerBorder: isOpen.value ? "border-b" : "",
+      innerGap: "gap-2.5",
+      meta: "mt-0.5 gap-1.5 text-xs",
+      path: "text-xs",
+      row: "grid-cols-[0.75rem_0.875rem_minmax(0,1fr)_auto] gap-2 px-3 py-1",
+      stats: "gap-1.5 text-xs",
+      status: "text-xs",
+      title: "text-xs",
+      toggleButton: "size-7",
+      toggleIcon: "size-3.5",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      avatar: "size-10",
+      avatarIcon: "size-5",
+      copyButton: "size-9",
+      copyIcon: "size-4",
+      empty: "px-5 py-4 text-xs",
+      fileIcon: "size-4",
+      files: "py-3",
+      header: "gap-3 px-5 py-4",
+      headerBorder: isOpen.value ? "border-b" : "",
+      innerGap: "gap-3",
+      meta: "mt-1 gap-2 text-xs",
+      path: "text-xs",
+      row: "grid-cols-[0.875rem_1rem_minmax(0,1fr)_auto] gap-2.5 px-5 py-2",
+      stats: "gap-2 text-xs",
+      status: "text-xs",
+      title: "text-sm",
+      toggleButton: "size-9",
+      toggleIcon: "size-4",
+    }
+  }
+
+  return {
+    avatar: "size-8",
+    avatarIcon: "size-4",
+    copyButton: "size-8",
+    copyIcon: "size-4",
+    empty: "px-4 py-3 text-xs",
+    fileIcon: "size-3.5",
+    files: "py-2",
+    header: "gap-2.5 px-4 py-3",
+    headerBorder: isOpen.value ? "border-b" : "",
+    innerGap: "gap-2.5",
+    meta: "mt-0.5 gap-1.5 text-xs",
+    path: "text-xs",
+    row: "grid-cols-[0.75rem_0.875rem_minmax(0,1fr)_auto] gap-2 px-4 py-1.5",
+    stats: "gap-1.5 text-xs",
+    status: "text-xs",
+    title: "text-[13px]",
+    toggleButton: "size-8",
+    toggleIcon: "size-4",
+  }
+})
+
+onBeforeUnmount(() => {
+  if (copiedTimeout) clearTimeout(copiedTimeout)
+})
+
+function statusLabel(status: CommitFileStatus = "modified") {
+  if (status === "added") return "A"
+  if (status === "deleted") return "D"
+  if (status === "renamed") return "R"
+
+  return "M"
+}
+
+function statusClass(status: CommitFileStatus = "modified") {
+  if (status === "added") return "text-emerald-600"
+  if (status === "deleted") return "text-destructive"
+  if (status === "renamed") return "text-sky-600"
+
+  return "text-amber-600"
+}
+
+function formatAddition(value?: number) {
+  if (!value) return ""
+
+  return `+${value.toLocaleString()}`
+}
+
+function formatDeletion(value?: number) {
+  if (!value) return ""
+
+  return `-${value.toLocaleString()}`
+}
+
+async function handleCopy() {
+  const value = copyText.value
+
+  emit("copy", { value })
+
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      await navigator.clipboard.writeText(value)
+    }
+  } catch {
+    // Clipboard writes can be blocked by the runtime; keep the UI response and event.
+  }
+
+  copied.value = true
+
+  if (copiedTimeout) clearTimeout(copiedTimeout)
+  copiedTimeout = setTimeout(() => {
+    copied.value = false
+  }, 1600)
+}
+
+function setOpen(nextOpen: boolean) {
+  if (!props.collapsible) return
+
+  const previousOpen = isOpen.value
+
+  if (props.open === undefined) {
+    localOpen.value = nextOpen
+  }
+
+  emit("update:open", nextOpen)
+
+  if (previousOpen !== nextOpen) {
+    emit("toggle", { open: nextOpen })
+  }
+}
+
+function toggleOpen() {
+  setOpen(!isOpen.value)
+}
+
+function handleFileSelect(file: CommitFile, index: number) {
+  emit("file-select", {
+    file,
+    index,
+  })
+}
+</script>
+
+<template>
+  <article
+    data-slot="commit"
+    :data-open="isOpen"
+    :data-size="props.size"
+    :class="cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)"
+  >
+    <header
+      data-slot="commit-header"
+      :class="cn('flex items-center transition-colors', sizeClasses.header, sizeClasses.headerBorder)"
+    >
+      <component
+        :is="props.collapsible ? 'button' : 'div'"
+        data-slot="commit-toggle"
+        :type="props.collapsible ? 'button' : undefined"
+        :aria-expanded="props.collapsible ? isOpen : undefined"
+        :class="cn('flex min-w-0 flex-1 items-center text-left outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', sizeClasses.innerGap)"
+        @click="toggleOpen"
+      >
+        <span
+          data-slot="commit-avatar"
+          :aria-label="props.avatarLabel ?? props.authorName ?? 'Commit'"
+          :class="cn('flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground', sizeClasses.avatar)"
+        >
+          <GitCommitHorizontalIcon
+            data-slot="commit-avatar-icon"
+            aria-hidden="true"
+            :class="sizeClasses.avatarIcon"
+          />
+        </span>
+
+        <span data-slot="commit-title-group" class="min-w-0 flex-1 pt-0.5">
+          <span
+            data-slot="commit-message"
+            :class="cn('block truncate font-semibold leading-tight tracking-normal', sizeClasses.title)"
+          >
+            {{ props.message }}
+          </span>
+
+          <span
+            data-slot="commit-meta"
+            :class="cn('flex min-w-0 flex-wrap items-center leading-tight text-muted-foreground', sizeClasses.meta)"
+          >
+            <span
+              v-if="props.hash"
+              data-slot="commit-hash"
+              class="inline-flex min-w-0 items-center font-mono"
+            >
+              <span class="truncate">{{ props.hash }}</span>
+            </span>
+
+            <span
+              v-if="props.hash && props.date"
+              data-slot="commit-meta-separator"
+              aria-hidden="true"
+            >
+              •
+            </span>
+
+            <span v-if="props.date" data-slot="commit-date">
+              {{ props.date }}
+            </span>
+          </span>
+        </span>
+      </component>
+
+      <button
+        v-if="props.showCopy"
+        data-slot="commit-copy"
+        type="button"
+        :aria-label="copyButtonLabel"
+        :class="
+          cn(
+            'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+            sizeClasses.copyButton,
+            copied && 'text-emerald-600',
+          )
+        "
+        @click="handleCopy"
+      >
+        <CheckIcon
+          v-if="copied"
+          data-slot="commit-copy-icon"
+          aria-hidden="true"
+          :class="sizeClasses.copyIcon"
+        />
+        <CopyIcon
+          v-else
+          data-slot="commit-copy-icon"
+          aria-hidden="true"
+          :class="sizeClasses.copyIcon"
+        />
+      </button>
+
+      <button
+        v-if="props.collapsible && props.showToggle"
+        data-slot="commit-toggle-icon"
+        type="button"
+        :aria-label="isOpen ? 'Collapse commit' : 'Expand commit'"
+        :aria-expanded="isOpen"
+        :class="
+          cn(
+            'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+            sizeClasses.toggleButton,
+          )
+        "
+        @click="toggleOpen"
+      >
+        <ChevronDownIcon
+          aria-hidden="true"
+          :class="cn('transition-transform', sizeClasses.toggleIcon, !isOpen && '-rotate-90')"
+        />
+      </button>
+    </header>
+
+    <ul
+      v-if="isOpen && commitFiles.length"
+      data-slot="commit-files"
+      :class="cn('flex flex-col', sizeClasses.files)"
+    >
+      <li
+        v-for="(file, index) in commitFiles"
+        :key="`${file.status ?? 'modified'}-${file.path}-${index}`"
+        data-slot="commit-file-item"
+      >
+        <button
+          data-slot="commit-file"
+          type="button"
+          :data-status="file.status ?? 'modified'"
+          :class="cn('grid w-full items-center text-left outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/70', sizeClasses.row)"
+          @click="handleFileSelect(file, index)"
+        >
+          <span
+            data-slot="commit-file-status"
+            :class="cn('font-mono font-semibold leading-none', sizeClasses.status, statusClass(file.status))"
+          >
+            {{ statusLabel(file.status) }}
+          </span>
+
+          <FileIcon
+            data-slot="commit-file-icon"
+            aria-hidden="true"
+            :class="cn('text-muted-foreground', sizeClasses.fileIcon)"
+          />
+
+          <span
+            data-slot="commit-file-path"
+            :class="cn('min-w-0 truncate font-mono leading-tight text-foreground', sizeClasses.path)"
+          >
+            {{ file.path }}
+          </span>
+
+          <span
+            data-slot="commit-file-stats"
+            :class="cn('flex shrink-0 items-center justify-end font-mono leading-tight', sizeClasses.stats)"
+          >
+            <span
+              v-if="formatAddition(file.additions)"
+              data-slot="commit-file-additions"
+              class="text-emerald-600"
+            >
+              {{ formatAddition(file.additions) }}
+            </span>
+
+            <span
+              v-if="formatDeletion(file.deletions)"
+              data-slot="commit-file-deletions"
+              class="text-destructive"
+            >
+              {{ formatDeletion(file.deletions) }}
+            </span>
+          </span>
+        </button>
+      </li>
+    </ul>
+
+    <div
+      v-else-if="isOpen"
+      data-slot="commit-empty"
+      :class="cn('text-muted-foreground', sizeClasses.empty)"
+    >
+      {{ props.emptyLabel }}
+    </div>
+  </article>
+</template>

package/src/components/ui/commit/index.ts

@@ -0,0 +1,9 @@
+export { default as Commit } from "./Commit.vue"
+export type {
+  CommitCopyPayload,
+  CommitFile,
+  CommitFileSelectPayload,
+  CommitFileStatus,
+  CommitSize,
+  CommitTogglePayload,
+} from "./Commit.vue"