@slexn/codecenter-ui 1.0.0

package/src/components/ui/contribution-graph/index.ts

@@ -0,0 +1,9 @@
+export { default as ContributionGraph } from "./ContributionGraph.vue"
+export type {
+  ContributionGraphDay,
+  ContributionGraphItem,
+  ContributionGraphSelectPayload,
+  ContributionGraphSize,
+  ContributionGraphWeekStart,
+  ContributionGraphYearSelectPayload,
+} from "./ContributionGraph.vue"

package/src/components/ui/data-table/DataTable.vue

@@ -0,0 +1,534 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
+import {
+  ArrowDownIcon,
+  ArrowUpDownIcon,
+  ArrowUpIcon,
+  CheckIcon,
+  MinusIcon,
+  SearchIcon,
+} from "@lucide/vue"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type DataTableRow = Record<string, unknown>
+export type DataTableRowKey = number | string
+export type DataTableSortDirection = "asc" | "desc" | null
+
+export interface DataTableColumn {
+  accessor?: (row: DataTableRow) => unknown
+  align?: "center" | "left" | "right"
+  cellClass?: HTMLAttributes["class"]
+  class?: HTMLAttributes["class"]
+  format?: (value: unknown, row: DataTableRow) => number | string
+  headerClass?: HTMLAttributes["class"]
+  key: string
+  label: string
+  searchable?: boolean
+  sortable?: boolean
+}
+
+export interface DataTableSortPayload {
+  direction: DataTableSortDirection
+  key: string
+}
+
+export interface DataTableSelectionPayload {
+  keys: DataTableRowKey[]
+  rows: DataTableRow[]
+}
+
+interface IndexedRow {
+  index: number
+  key: DataTableRowKey
+  row: DataTableRow
+}
+
+const props = withDefaults(
+  defineProps<{
+    caption?: string
+    class?: HTMLAttributes["class"]
+    columns?: DataTableColumn[]
+    containerClass?: HTMLAttributes["class"]
+    emptyText?: string
+    loading?: boolean
+    loadingText?: string
+    modelValue?: DataTableRowKey[]
+    noResultsText?: string
+    page?: number
+    pageSize?: number
+    paginationClass?: HTMLAttributes["class"]
+    rowKey?: ((row: DataTableRow, index: number) => DataTableRowKey) | string
+    rows?: DataTableRow[]
+    searchPlaceholder?: string
+    searchValue?: string
+    searchable?: boolean
+    selectable?: boolean
+    showPagination?: boolean
+    showRowCount?: boolean
+    sortDirection?: DataTableSortDirection
+    sortKey?: string
+    tableClass?: HTMLAttributes["class"]
+    toolbarClass?: HTMLAttributes["class"]
+  }>(),
+  {
+    columns: () => [],
+    emptyText: "No rows found.",
+    loading: false,
+    loadingText: "Loading rows...",
+    noResultsText: "No results found.",
+    page: undefined,
+    pageSize: 10,
+    rowKey: "id",
+    rows: () => [],
+    searchPlaceholder: "Search rows",
+    searchValue: undefined,
+    searchable: true,
+    selectable: false,
+    showPagination: true,
+    showRowCount: true,
+    sortDirection: null,
+    sortKey: "",
+  },
+)
+
+const emit = defineEmits<{
+  "select": [payload: DataTableSelectionPayload]
+  "sort": [payload: DataTableSortPayload]
+  "update:modelValue": [keys: DataTableRowKey[]]
+  "update:page": [page: number]
+  "update:searchValue": [value: string]
+  "update:sortDirection": [direction: DataTableSortDirection]
+  "update:sortKey": [key: string]
+}>()
+
+const slots = useSlots()
+const internalPage = ref(1)
+const internalSearchValue = ref("")
+const internalSelectedKeys = ref<DataTableRowKey[]>([])
+const internalSortDirection = ref<DataTableSortDirection>(props.sortDirection)
+const internalSortKey = ref(props.sortKey)
+
+const pageSize = computed(() => Math.max(1, Math.trunc(props.pageSize)))
+const columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+const hasToolbar = computed(() => props.searchable || Boolean(slots.toolbar))
+const searchValue = computed({
+  get: () => props.searchValue ?? internalSearchValue.value,
+  set: (value: string) => {
+    internalSearchValue.value = value
+    emit("update:searchValue", value)
+  },
+})
+const currentPage = computed({
+  get: () => props.page ?? internalPage.value,
+  set: (value: number) => {
+    internalPage.value = value
+    emit("update:page", value)
+  },
+})
+const selectedKeys = computed({
+  get: () => props.modelValue ?? internalSelectedKeys.value,
+  set: (keys: DataTableRowKey[]) => {
+    internalSelectedKeys.value = keys
+    emit("update:modelValue", keys)
+    emit("select", {
+      keys,
+      rows: indexedRows.value
+        .filter((item) => keys.includes(item.key))
+        .map((item) => item.row),
+    })
+  },
+})
+const activeSortKey = computed({
+  get: () => props.sortKey || internalSortKey.value,
+  set: (key: string) => {
+    internalSortKey.value = key
+    emit("update:sortKey", key)
+  },
+})
+const activeSortDirection = computed({
+  get: () => props.sortDirection ?? internalSortDirection.value,
+  set: (direction: DataTableSortDirection) => {
+    internalSortDirection.value = direction
+    emit("update:sortDirection", direction)
+  },
+})
+
+const indexedRows = computed<IndexedRow[]>(() =>
+  props.rows.map((row, index) => ({
+    index,
+    key: getRowKey(row, index),
+    row,
+  })),
+)
+const filteredRows = computed(() => {
+  const query = normalizeSearchText(searchValue.value)
+
+  if (!query) return indexedRows.value
+
+  const searchableColumns = props.columns.filter((column) => column.searchable !== false)
+
+  return indexedRows.value.filter((item) =>
+    searchableColumns.some((column) =>
+      normalizeSearchText(String(getCellValue(item.row, column) ?? "")).includes(query),
+    ),
+  )
+})
+const sortedRows = computed(() => {
+  if (!activeSortKey.value || !activeSortDirection.value) return filteredRows.value
+
+  const column = props.columns.find((item) => item.key === activeSortKey.value)
+
+  if (!column) return filteredRows.value
+
+  const direction = activeSortDirection.value === "asc" ? 1 : -1
+
+  return [...filteredRows.value].sort((first, second) =>
+    compareCellValues(
+      getCellValue(first.row, column),
+      getCellValue(second.row, column),
+    ) * direction,
+  )
+})
+const pageCount = computed(() =>
+  Math.max(1, Math.ceil(sortedRows.value.length / pageSize.value)),
+)
+const visibleRows = computed(() => {
+  if (!props.showPagination) return sortedRows.value
+
+  const start = (currentPage.value - 1) * pageSize.value
+
+  return sortedRows.value.slice(start, start + pageSize.value)
+})
+const rowCountLabel = computed(() => {
+  if (sortedRows.value.length === 0) return "0 rows"
+
+  if (!props.showPagination) return `${sortedRows.value.length} rows`
+
+  const start = (currentPage.value - 1) * pageSize.value + 1
+  const end = Math.min(currentPage.value * pageSize.value, sortedRows.value.length)
+
+  return `${start}-${end} of ${sortedRows.value.length} rows`
+})
+const hasRows = computed(() => visibleRows.value.length > 0)
+const emptyStateText = computed(() =>
+  props.loading
+    ? props.loadingText
+    : searchValue.value
+      ? props.noResultsText
+      : props.emptyText,
+)
+const headerSelectionState = computed(() => {
+  const keys = visibleRows.value.map((item) => item.key)
+
+  if (keys.length === 0) return false
+
+  const selectedCount = keys.filter((key) => selectedKeys.value.includes(key)).length
+
+  if (selectedCount === 0) return false
+  if (selectedCount === keys.length) return true
+
+  return "indeterminate"
+})
+
+watch([pageSize, () => sortedRows.value.length], () => {
+  if (currentPage.value > pageCount.value) currentPage.value = pageCount.value
+  if (currentPage.value < 1) currentPage.value = 1
+})
+
+watch(searchValue, () => {
+  currentPage.value = 1
+})
+
+function getRowKey(row: DataTableRow, index: number) {
+  if (typeof props.rowKey === "function") return props.rowKey(row, index)
+
+  const value = row[props.rowKey]
+
+  return typeof value === "number" || typeof value === "string" ? value : index
+}
+
+function getCellValue(row: DataTableRow, column: DataTableColumn) {
+  return column.accessor ? column.accessor(row) : row[column.key]
+}
+
+function getCellText(row: DataTableRow, column: DataTableColumn) {
+  const value = getCellValue(row, column)
+
+  if (column.format) return column.format(value, row)
+  if (value === null || value === undefined) return ""
+
+  return String(value)
+}
+
+function normalizeSearchText(value: string) {
+  return value.trim().toLowerCase().replace(/\s+/g, " ")
+}
+
+function compareCellValues(first: unknown, second: unknown) {
+  if (first === second) return 0
+  if (first === null || first === undefined) return 1
+  if (second === null || second === undefined) return -1
+
+  if (typeof first === "number" && typeof second === "number") {
+    return first - second
+  }
+
+  return String(first).localeCompare(String(second), undefined, {
+    numeric: true,
+    sensitivity: "base",
+  })
+}
+
+function isColumnSortable(column: DataTableColumn) {
+  return column.sortable !== false
+}
+
+function getSortIcon(column: DataTableColumn) {
+  if (activeSortKey.value !== column.key) return ArrowUpDownIcon
+  if (activeSortDirection.value === "asc") return ArrowUpIcon
+  if (activeSortDirection.value === "desc") return ArrowDownIcon
+
+  return ArrowUpDownIcon
+}
+
+function toggleSort(column: DataTableColumn) {
+  if (!isColumnSortable(column)) return
+
+  let nextDirection: DataTableSortDirection = "asc"
+
+  if (activeSortKey.value === column.key) {
+    nextDirection =
+      activeSortDirection.value === "asc"
+        ? "desc"
+        : activeSortDirection.value === "desc"
+          ? null
+          : "asc"
+  }
+
+  activeSortKey.value = nextDirection ? column.key : ""
+  activeSortDirection.value = nextDirection
+  emit("sort", {
+    direction: nextDirection,
+    key: nextDirection ? column.key : "",
+  })
+}
+
+function alignClass(align?: DataTableColumn["align"]) {
+  if (align === "right") return "text-right"
+  if (align === "center") return "text-center"
+
+  return "text-left"
+}
+
+function isRowSelected(key: DataTableRowKey) {
+  return selectedKeys.value.includes(key)
+}
+
+function toggleRowSelection(item: IndexedRow, value: boolean | "indeterminate") {
+  const keys = new Set(selectedKeys.value)
+
+  if (value === true) keys.add(item.key)
+  else keys.delete(item.key)
+
+  selectedKeys.value = Array.from(keys)
+}
+
+function toggleVisibleSelection(value: boolean | "indeterminate") {
+  const keys = new Set(selectedKeys.value)
+  const visibleKeys = visibleRows.value.map((item) => item.key)
+
+  if (value === true) {
+    visibleKeys.forEach((key) => keys.add(key))
+  } else {
+    visibleKeys.forEach((key) => keys.delete(key))
+  }
+
+  selectedKeys.value = Array.from(keys)
+}
+</script>
+
+<template>
+  <div data-slot="data-table" :class="cn('flex min-w-0 flex-col gap-4', props.class)">
+    <div
+      v-if="hasToolbar"
+      data-slot="data-table-toolbar"
+      :class="cn('flex flex-wrap items-center justify-between gap-3', props.toolbarClass)"
+    >
+      <slot name="toolbar">
+        <Input
+          v-if="props.searchable"
+          v-model="searchValue"
+          :icon="SearchIcon"
+          class="w-full sm:w-72"
+          :placeholder="props.searchPlaceholder"
+        />
+      </slot>
+
+      <p
+        v-if="props.showRowCount"
+        data-slot="data-table-row-count"
+        class="shrink-0 text-sm text-muted-foreground"
+      >
+        {{ rowCountLabel }}
+      </p>
+    </div>
+
+    <Table
+      :class="cn('min-w-[640px]', props.tableClass)"
+      :container-class="cn('rounded-md border', props.containerClass)"
+    >
+      <caption v-if="props.caption" class="sr-only">
+        {{ props.caption }}
+      </caption>
+
+      <TableHeader>
+        <TableRow>
+          <TableHead v-if="props.selectable" class="w-10">
+            <Checkbox
+              :model-value="headerSelectionState"
+              aria-label="Select visible rows"
+              @update:model-value="toggleVisibleSelection"
+            >
+              <MinusIcon v-if="headerSelectionState === 'indeterminate'" class="size-3.5" />
+              <CheckIcon v-else class="size-3.5" />
+            </Checkbox>
+          </TableHead>
+
+          <TableHead
+            v-for="column in props.columns"
+            :key="column.key"
+            :class="cn(alignClass(column.align), column.headerClass, column.class)"
+          >
+            <Button
+              v-if="isColumnSortable(column)"
+              type="button"
+              variant="ghost"
+              size="sm"
+              :aria-label="`Sort by ${column.label}`"
+              :class="
+                cn(
+                  '-mx-2 h-8 px-2',
+                  column.align === 'right' && 'ml-auto',
+                  column.align === 'center' && 'mx-auto',
+                )
+              "
+              @click="toggleSort(column)"
+            >
+              <span class="truncate">{{ column.label }}</span>
+              <component :is="getSortIcon(column)" data-icon="inline-end" />
+            </Button>
+
+            <span v-else class="truncate">
+              {{ column.label }}
+            </span>
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+
+      <TableBody>
+        <TableRow
+          v-for="item in visibleRows"
+          :key="item.key"
+          :data-state="isRowSelected(item.key) ? 'selected' : undefined"
+        >
+          <TableCell v-if="props.selectable" class="w-10">
+            <Checkbox
+              :model-value="isRowSelected(item.key)"
+              :aria-label="`Select row ${item.index + 1}`"
+              @update:model-value="toggleRowSelection(item, $event)"
+            />
+          </TableCell>
+
+          <TableCell
+            v-for="column in props.columns"
+            :key="column.key"
+            :class="cn(alignClass(column.align), column.cellClass, column.class)"
+          >
+            <slot
+              :name="`cell-${column.key}`"
+              :column="column"
+              :index="item.index"
+              :row="item.row"
+              :value="getCellValue(item.row, column)"
+            >
+              {{ getCellText(item.row, column) }}
+            </slot>
+          </TableCell>
+        </TableRow>
+
+        <TableEmpty v-if="!hasRows" :colspan="Math.max(columnCount, 1)">
+          <slot name="empty" :search="searchValue">
+            {{ emptyStateText }}
+          </slot>
+        </TableEmpty>
+      </TableBody>
+    </Table>
+
+    <div
+      v-if="props.showPagination && sortedRows.length > pageSize"
+      data-slot="data-table-pagination"
+      :class="cn('flex flex-wrap items-center justify-between gap-3', props.paginationClass)"
+    >
+      <p
+        v-if="props.showRowCount && !hasToolbar"
+        class="text-sm text-muted-foreground"
+      >
+        {{ rowCountLabel }}
+      </p>
+
+      <Pagination
+        v-slot="{ page }"
+        v-model:page="currentPage"
+        :items-per-page="pageSize"
+        :total="sortedRows.length"
+        :sibling-count="1"
+        show-edges
+        class="mx-0 justify-end"
+      >
+        <PaginationContent v-slot="{ items }">
+          <PaginationFirst size="sm" />
+          <PaginationPrevious size="sm" />
+          <template
+            v-for="(paginationItem, index) in items"
+            :key="`${paginationItem.type}-${index}`"
+          >
+            <PaginationItem
+              v-if="paginationItem.type === 'page'"
+              :value="paginationItem.value"
+              :is-active="paginationItem.value === page"
+              size="icon-sm"
+            >
+              {{ paginationItem.value }}
+            </PaginationItem>
+            <PaginationEllipsis v-else class="size-8" />
+          </template>
+          <PaginationNext size="sm" />
+          <PaginationLast size="sm" />
+        </PaginationContent>
+      </Pagination>
+    </div>
+  </div>
+</template>

package/src/components/ui/data-table/index.ts

@@ -0,0 +1,9 @@
+export { default as DataTable } from "./DataTable.vue"
+export type {
+  DataTableColumn,
+  DataTableRow,
+  DataTableRowKey,
+  DataTableSelectionPayload,
+  DataTableSortDirection,
+  DataTableSortPayload,
+} from "./DataTable.vue"