vome-core 0.0.1

package/src/admin/crud/vm-table.vue

@@ -0,0 +1,852 @@
+<template>
+  <div
+    class="vm-crud-table"
+    :class="{
+      'is-border': border,
+      'is-auto-height': autoHeight,
+    }"
+  >
+    <div v-if="crud.loading.value" class="vm-crud-table__loading">加载中…</div>
+    <div ref="scrollRef" class="vm-crud-table__scroll vm-scroll">
+      <Table>
+        <TableHeader>
+          <TableRow class="vm-crud-table__head-row">
+            <TableHead v-if="showSelection" class="vm-crud-table__check">
+              <Checkbox :model-value="allChecked" @update:model-value="toggleAll" />
+            </TableHead>
+            <TableHead
+              v-for="(col, i) in dataColumns"
+              :key="col.prop || col.type || i"
+              class="vm-crud-table__th"
+              :class="{
+                'vm-crud-table__op': col.type === 'op',
+                'is-sortable': isSortable(col),
+              }"
+              :style="colStyle(col)"
+              @click="onSortClick(col)"
+            >
+              <span class="vm-crud-table__th-inner">
+                {{ col.type === 'op' ? col.label || crud.dict.label.op : col.label }}
+                <i
+                  v-if="isSortable(col) && col.prop"
+                  class="vm-crud-table__sort"
+                  :class="sortIconClass(col.prop)"
+                />
+              </span>
+            </TableHead>
+            <TableHead
+              v-if="showSlotOp"
+              class="vm-crud-table__th vm-crud-table__op"
+              :style="{ width: `${opWidth}px`, minWidth: `${opWidth}px` }"
+            >
+              {{ crud.dict.label.op }}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <!-- empty-block：表体内 sticky，宽度=可视区，不盖表头、不跟总表宽跑 -->
+          <TableRow
+            v-if="!displayRows.length && !crud.loading.value"
+            class="vm-crud-table__empty-row"
+          >
+            <TableCell :colspan="colSpan" class="vm-crud-table__empty-cell">
+              <div class="vm-crud-table__empty-block" :style="emptyBlockStyle">
+                <vm-empty kind="暂无数据" />
+              </div>
+            </TableCell>
+          </TableRow>
+          <TableRow
+            v-for="(row, rowIndex) in displayRows"
+            :key="String(row[rowKey])"
+            class="vm-crud-table__row"
+            :class="{ 'is-current': highlight && String(row[rowKey]) === currentId }"
+            @click="onRowClick(row)"
+            @contextmenu="(e: MouseEvent) => onContextMenu(e, row)"
+          >
+          <TableCell v-if="showSelection" class="vm-crud-table__check">
+            <Checkbox
+              :model-value="selectedIds.has(String(row[rowKey]))"
+              @update:model-value="(v) => toggleRow(row, v)"
+            />
+          </TableCell>
+          <TableCell
+            v-for="(col, i) in dataColumns"
+            :key="col.prop || col.type || i"
+            class="vm-crud-table__td"
+            :class="{ 'vm-crud-table__op': col.type === 'op' }"
+            :style="colStyle(col)"
+          >
+            <template v-if="col.type === 'index'">
+              {{ displayIndex(rowIndex) }}
+            </template>
+            <template v-else-if="col.type === 'op'">
+              <div
+                v-if="crud.trashMode.value === 'onlyTrashed'"
+                class="vm-crud-table__ops"
+              >
+                <Button size="xs" variant="softPrimary" @click="crud.rowRestore([row])">
+                  恢复
+                </Button>
+                <Button
+                  size="xs"
+                  variant="softDestructive"
+                  @click="crud.rowDelete([row], true)"
+                >
+                  彻底删除
+                </Button>
+              </div>
+              <div v-else class="vm-crud-table__ops">
+                <template v-for="(btn, bi) in resolveButtons(col, row)" :key="bi">
+                  <Button
+                    v-if="btn === 'edit' && crud.getPermission('update')"
+                    size="xs"
+                    variant="softPrimary"
+                    @click="crud.rowEdit(row)"
+                  >
+                    {{ crud.dict.label.update }}
+                  </Button>
+                  <Button
+                    v-else-if="btn === 'delete' && crud.getPermission('delete')"
+                    size="xs"
+                    variant="softDestructive"
+                    @click="crud.rowDelete([row])"
+                  >
+                    {{ crud.dict.label.delete }}
+                  </Button>
+                  <Button
+                    v-else-if="btn === 'info' && crud.getPermission('info')"
+                    size="xs"
+                    variant="ghost"
+                    @click="crud.rowInfo(row)"
+                  >
+                    {{ crud.dict.label.info }}
+                  </Button>
+                  <Button
+                    v-else-if="typeof btn === 'object' && !btn.hidden"
+                    size="xs"
+                    :variant="btn.variant || 'softSuccess'"
+                    @click="btn.onClick(row)"
+                  >
+                    {{ btn.label }}
+                  </Button>
+                </template>
+              </div>
+            </template>
+            <div
+              v-else-if="isTree && i === 0"
+              class="vm-crud-table__tree-cell"
+              :style="{ paddingLeft: `${(row.depth || 0) * 18}px` }"
+            >
+              <button
+                v-if="row.hasChildren"
+                type="button"
+                class="vm-crud-table__fold"
+                @click="toggleExpand(row[rowKey] as string | number)"
+              >
+                <i
+                  :class="
+                    expanded.has(row[rowKey] as string | number)
+                      ? 'ri-arrow-down-s-line'
+                      : 'ri-arrow-right-s-line'
+                  "
+                />
+              </button>
+              <span v-else class="vm-crud-table__fold is-spacer" />
+              <slot
+                :name="col.slot || `cell-${col.prop}`"
+                :row="row"
+                :value="col.prop ? row[col.prop] : undefined"
+              >
+                <component
+                  :is="cellComp(col)"
+                  v-if="cellComp(col)"
+                  :model-value="col.prop ? row[col.prop] : undefined"
+                  :scope="row"
+                  :column="{ property: col.prop, prop: col.prop }"
+                  :options="resolveDict(col)"
+                  v-bind="col.component?.props || {}"
+                />
+                <vm-dict-tag
+                  v-else-if="resolveDict(col).length"
+                  :model-value="col.prop ? (row[col.prop] as string | number) : null"
+                  :options="resolveDict(col)"
+                />
+                <template v-else>{{ cellText(col, row) }}</template>
+              </slot>
+            </div>
+            <slot
+              v-else
+              :name="col.slot || `cell-${col.prop}`"
+              :row="row"
+              :value="col.prop ? row[col.prop] : undefined"
+            >
+              <component
+                :is="cellComp(col)"
+                v-if="cellComp(col)"
+                :model-value="col.prop ? row[col.prop] : undefined"
+                :scope="row"
+                :column="{ property: col.prop, prop: col.prop }"
+                :options="resolveDict(col)"
+                v-bind="col.component?.props || {}"
+              />
+              <vm-dict-tag
+                v-else-if="resolveDict(col).length"
+                :model-value="col.prop ? (row[col.prop] as string | number) : null"
+                :options="resolveDict(col)"
+              />
+              <template v-else>{{ cellText(col, row) }}</template>
+            </slot>
+          </TableCell>
+          <TableCell v-if="showSlotOp" class="vm-crud-table__td">
+            <div
+              v-if="crud.trashMode.value === 'onlyTrashed'"
+              class="vm-crud-table__ops"
+            >
+              <Button size="xs" variant="softPrimary" @click="crud.rowRestore([row])">
+                恢复
+              </Button>
+              <Button
+                size="xs"
+                variant="softDestructive"
+                @click="crud.rowDelete([row], true)"
+              >
+                彻底删除
+              </Button>
+            </div>
+            <slot v-else name="op" :row="row" />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+    </div>
+    <vm-context-menu ref="ctxRef" :items="ctxItems" @select="onCtxSelect" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+import { injectTableOptions, TABLE_API_KEY } from './key'
+import { flattenTree } from '../lib/tree'
+import { resolveCrudComponent } from './registry'
+import { getCrudStyle } from './style'
+defineOptions({ name: 'vm-table' })
+
+const props = withDefaults(
+  defineProps<{
+    columns?: CrudColumn[]
+    selection?: boolean
+    rowKey?: string
+  }>(),
+  {
+    selection: undefined,
+    rowKey: 'id',
+  },
+)
+
+const slots = useSlots()
+const crud = useCrud()
+const tableOpts = injectTableOptions()
+const style = getCrudStyle().table
+
+const scrollRef = ref<HTMLElement | null>(null)
+/** empty-block：宽度取滚动容器可视宽，不跟表内容总宽 */
+const emptyWidth = ref(0)
+
+function syncEmptyWidth() {
+  const el = scrollRef.value
+  if (!el) return
+  emptyWidth.value = el.clientWidth
+}
+
+const emptyBlockStyle = computed(() => ({
+  width: emptyWidth.value ? `${emptyWidth.value}px` : '100%',
+}))
+
+let emptyRo: ResizeObserver | null = null
+
+const overrideColumns = ref<CrudColumn[] | null>(null)
+
+const columns = computed(() => {
+  const raw =
+    overrideColumns.value ||
+    (props.columns?.length ? props.columns : tableOpts?.columns || [])
+  return raw.filter((c) => !c.hidden)
+})
+
+const hasSelectionCol = computed(() => columns.value.some((c) => c.type === 'selection'))
+const hasOpCol = computed(() => columns.value.some((c) => c.type === 'op'))
+const showSelection = computed(() =>
+  props.selection !== undefined ? props.selection : hasSelectionCol.value,
+)
+const dataColumns = computed(() =>
+  columns.value.filter((c) => c.type !== 'selection'),
+)
+const showSlotOp = computed(() => Boolean(slots.op) && !hasOpCol.value)
+
+const colSpan = computed(
+  () =>
+    dataColumns.value.length +
+    (showSelection.value ? 1 : 0) +
+    (showSlotOp.value ? 1 : 0),
+)
+
+const rowKey = computed(() => tableOpts?.rowKey || props.rowKey)
+const isTree = computed(() => Boolean(tableOpts?.tree))
+const border = computed(() => tableOpts?.border ?? style.border)
+const autoHeight = computed(() => tableOpts?.autoHeight ?? style.autoHeight)
+const highlight = computed(() => style.highlightCurrentRow)
+const opWidth = computed(() => style.column.opWidth)
+const defaultAlign = computed(() => style.column.align)
+const sortRefresh = computed(() => tableOpts?.sortRefresh !== false)
+
+function normalizeSortDir(
+  order?: string,
+): 'asc' | 'desc' | undefined {
+  if (order === 'asc' || order === 'ascending') return 'asc'
+  if (order === 'desc' || order === 'descending') return 'desc'
+  return undefined
+}
+
+function initSortState() {
+  const ds = tableOpts?.defaultSort
+  if (!ds?.prop) return null
+  return {
+    prop: ds.prop,
+    order: normalizeSortDir(ds.order) || ('asc' as const),
+  }
+}
+
+const sortState = ref<{ prop: string; order: 'asc' | 'desc' } | null>(
+  initSortState(),
+)
+
+/** dict.sort → 本项目为 { order: 字段, sort: 方向 } */
+function sortPayload(prop: string, order: 'asc' | 'desc') {
+  return {
+    [crud.dict.sort.prop]: prop,
+    [crud.dict.sort.order]: order,
+  }
+}
+
+function isSortable(col: CrudColumn) {
+  if (!col.prop || col.type === 'op' || col.type === 'selection' || col.type === 'index') {
+    return false
+  }
+  return Boolean(col.sortable)
+}
+
+function sortIconClass(prop: string) {
+  if (sortState.value?.prop !== prop) return 'ri-arrow-up-down-line is-muted'
+  return sortState.value.order === 'asc'
+    ? 'ri-arrow-up-s-fill is-active'
+    : 'ri-arrow-down-s-fill is-active'
+}
+
+function displayIndex(idx: string | number) {
+  return Number(idx) + 1
+}
+
+function onSortClick(col: CrudColumn) {
+  if (!isSortable(col) || !col.prop) return
+  const prop = col.prop
+  let next: 'asc' | 'desc' = 'asc'
+  const current = sortState.value
+  if (current?.prop === prop) {
+    next = current.order === 'asc' ? 'desc' : 'asc'
+  } else {
+    const hint = normalizeSortDir(
+      typeof col.sortable === 'string' ? col.sortable : undefined,
+    )
+    next = hint || 'asc'
+  }
+  sortState.value = { prop, order: next }
+  if (sortRefresh.value) void crud.refresh(sortPayload(prop, next))
+}
+
+/** col.width / col.minWidth 优先；op 列未设 width 时回退全局 opWidth */
+function toPx(v: string | number) {
+  return typeof v === 'number' ? `${v}px` : v
+}
+
+function colStyle(col: CrudColumn) {
+  if (col.type === 'op') {
+    const w = col.width ?? opWidth.value
+    return {
+      // 固定操作列宽，剩余空间留给内容列
+      width: toPx(w),
+      minWidth: toPx(w),
+      whiteSpace: 'nowrap' as const,
+      textAlign: (col.align || defaultAlign.value) as string | undefined,
+    }
+  }
+  const w = col.width
+  return {
+    width: w != null ? toPx(w) : undefined,
+    minWidth: col.minWidth != null ? toPx(col.minWidth) : undefined,
+    textAlign: (col.align || defaultAlign.value) as string | undefined,
+  }
+}
+const ctxEnabled = computed(() => {
+  const c = tableOpts?.contextMenu ?? style.contextMenu
+  return c !== false && !(Array.isArray(c) && c.length === 0)
+})
+
+const expanded = ref(new Set<string | number>())
+const currentId = ref('')
+const ctxRef = ref<{ open: (e: MouseEvent) => void } | null>(null)
+const ctxRow = ref<Record<string, unknown> | null>(null)
+
+const ctxItems = computed<CtxMenuItem[]>(() => {
+  const conf = tableOpts?.contextMenu ?? style.contextMenu
+  const keys = Array.isArray(conf)
+    ? conf
+    : ['refresh', 'check', 'edit', 'delete', 'order-asc', 'order-desc']
+  const map: Record<string, string> = {
+    refresh: crud.dict.label.refresh,
+    check: crud.dict.label.select,
+    edit: crud.dict.label.update,
+    delete: crud.dict.label.delete,
+    'order-asc': crud.dict.label.asc,
+    'order-desc': crud.dict.label.desc,
+  }
+  return keys.map((k) => ({
+    key: k,
+    label: map[k] || k,
+    disabled:
+      (k === 'edit' && !crud.getPermission('update')) ||
+      (k === 'delete' && !crud.getPermission('delete')),
+  }))
+})
+
+watch(
+  () => crud.list.value,
+  (rows) => {
+    if (!isTree.value || expanded.value.size) return
+    const ids = rows
+      .filter((r) => Array.isArray(r.children) && (r.children as unknown[]).length)
+      .map((r) => r[rowKey.value] as string | number)
+    if (ids.length) expanded.value = new Set(ids)
+  },
+  { immediate: true },
+)
+
+type FlatRow = Record<string, unknown> & {
+  depth?: number
+  hasChildren?: boolean
+}
+
+const displayRows = computed<FlatRow[]>(() => {
+  const rows = crud.list.value as FlatRow[]
+  if (!isTree.value) return rows
+  return flattenTree(rows as never, expanded.value) as FlatRow[]
+})
+
+const selectedIds = computed(
+  () => new Set(crud.selection.value.map((r) => String(r[rowKey.value]))),
+)
+
+const allChecked = computed(() => {
+  const rows = displayRows.value
+  return (
+    rows.length > 0 &&
+    rows.every((r) => selectedIds.value.has(String(r[rowKey.value])))
+  )
+})
+
+/** 自身 + 全部子孙（树勾选级联） */
+function collectSubtree(row: Record<string, unknown>): Record<string, unknown>[] {
+  const out: Record<string, unknown>[] = [row]
+  const kids = row.children as Record<string, unknown>[] | undefined
+  if (!kids?.length) return out
+  for (const c of kids) out.push(...collectSubtree(c))
+  return out
+}
+
+function toggleAll(checked: boolean | 'indeterminate') {
+  if (checked === true) {
+    // 树表：含折叠未展示的子孙
+    if (isTree.value) {
+      const all: Record<string, unknown>[] = []
+      for (const r of crud.list.value) all.push(...collectSubtree(r))
+      crud.setSelection(all)
+      return
+    }
+    crud.setSelection([...displayRows.value])
+  } else {
+    crud.setSelection([])
+  }
+}
+
+function toggleRow(row: Record<string, unknown>, checked: boolean | 'indeterminate') {
+  const key = rowKey.value
+  if (isTree.value) {
+    const subtree = collectSubtree(row)
+    const ids = new Set(subtree.map((r) => String(r[key])))
+    if (checked === true) {
+      const map = new Map(
+        crud.selection.value.map((r) => [String(r[key]), r] as const),
+      )
+      for (const r of subtree) map.set(String(r[key]), r)
+      crud.setSelection([...map.values()])
+    } else {
+      crud.setSelection(
+        crud.selection.value.filter((r) => !ids.has(String(r[key]))),
+      )
+    }
+    return
+  }
+  const id = String(row[key])
+  if (checked === true) {
+    if (!selectedIds.value.has(id)) crud.setSelection([...crud.selection.value, row])
+  } else {
+    crud.setSelection(
+      crud.selection.value.filter((r) => String(r[key]) !== id),
+    )
+  }
+}
+
+function toggleExpand(id: string | number) {
+  const next = new Set(expanded.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  expanded.value = next
+}
+
+function resolveButtons(col: CrudColumn, row: Record<string, unknown>): CrudOpButton[] {
+  const raw = col.buttons
+  if (typeof raw === 'function') return raw(row)
+  return raw?.length ? raw : (['edit', 'delete'] as CrudOpButton[])
+}
+
+function cellComp(col: CrudColumn) {
+  return resolveCrudComponent(col.component?.name)
+}
+
+/** dict: dict.get('x') → ComputedRef */
+function resolveDict(col: CrudColumn) {
+  const list = col.dict == null ? [] : toValue(col.dict)
+  return Array.isArray(list) ? list : []
+}
+
+function cellText(col: CrudColumn, row: Record<string, unknown>) {
+  if (!col.prop) return ''
+  const val = row[col.prop]
+  if (col.formatter) return col.formatter(row, val)
+  if (val == null) return ''
+  return String(val)
+}
+
+function onRowClick(row: Record<string, unknown>) {
+  if (highlight.value) currentId.value = String(row[rowKey.value])
+}
+
+function onContextMenu(e: MouseEvent, row: Record<string, unknown>) {
+  if (!ctxEnabled.value) return
+  ctxRow.value = row
+  ctxRef.value?.open(e)
+}
+
+function onCtxSelect(key: string) {
+  const row = ctxRow.value
+  if (!row) return
+  if (key === 'refresh') void crud.refresh()
+  if (key === 'check') toggleRow(row, true)
+  if (key === 'edit') void crud.rowEdit(row)
+  if (key === 'delete') void crud.rowDelete([row])
+  if (key === 'order-asc') {
+    sortState.value = { prop: 'orderNum', order: 'asc' }
+    void crud.refresh(sortPayload('orderNum', 'asc'))
+  }
+  if (key === 'order-desc') {
+    sortState.value = { prop: 'orderNum', order: 'desc' }
+    void crud.refresh(sortPayload('orderNum', 'desc'))
+  }
+}
+
+function baseColumns(): CrudColumn[] {
+  return (
+    overrideColumns.value ||
+    (props.columns?.length ? props.columns : tableOpts?.columns || [])
+  )
+}
+
+function setColumns(cols: CrudColumn[]) {
+  overrideColumns.value = cols
+}
+
+function showColumn(prop: string) {
+  setColumns(
+    baseColumns().map((c) =>
+      c.prop === prop ? { ...c, hidden: false } : c,
+    ),
+  )
+}
+
+function hideColumn(prop: string) {
+  setColumns(
+    baseColumns().map((c) =>
+      c.prop === prop ? { ...c, hidden: true } : c,
+    ),
+  )
+}
+
+function getColumns() {
+  return baseColumns()
+}
+
+function columnCustomKey() {
+  return `column-custom__${typeof location !== 'undefined' ? location.pathname : 'default'}`
+}
+
+function applyColumnCustomMap(
+  cols: CrudColumn[],
+  map: Record<string, { checked: boolean; order?: number }>,
+) {
+  const ordered = [...cols].sort((a, b) => {
+    const ao = a.prop != null ? map[a.prop]?.order ?? 999 : 999
+    const bo = b.prop != null ? map[b.prop]?.order ?? 999 : 999
+    return ao - bo
+  })
+  return ordered.map((c) => {
+    if (!c.prop || c.type === 'selection' || c.type === 'op') return c
+    return { ...c, hidden: !(map[c.prop]?.checked ?? true) }
+  })
+}
+
+onMounted(() => {
+  syncEmptyWidth()
+  if (typeof ResizeObserver !== 'undefined' && scrollRef.value) {
+    emptyRo = new ResizeObserver(() => syncEmptyWidth())
+    emptyRo.observe(scrollRef.value)
+  }
+
+  try {
+    const raw = localStorage.getItem(columnCustomKey())
+    if (!raw) return
+    const map = JSON.parse(raw) as Record<
+      string,
+      { checked: boolean; order?: number }
+    >
+    const base = props.columns?.length
+      ? props.columns
+      : tableOpts?.columns || []
+    if (!base.length) return
+    overrideColumns.value = applyColumnCustomMap(base, map)
+  } catch {
+    /* ignore */
+  }
+})
+
+onBeforeUnmount(() => {
+  emptyRo?.disconnect()
+  emptyRo = null
+})
+
+watch(
+  () => displayRows.value.length,
+  () => {
+    requestAnimationFrame(syncEmptyWidth)
+  },
+)
+
+provide(TABLE_API_KEY, {
+  setColumns,
+  showColumn,
+  hideColumn,
+  getColumns,
+})
+
+defineExpose({
+  showColumn,
+  hideColumn,
+  setColumns,
+  data: displayRows,
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-table {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+
+  &.is-border {
+    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+  }
+
+  &.is-auto-height {
+    min-height: 0;
+  }
+}
+
+.vm-crud-table__scroll {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* 表铺满容器；列 minWidth 过大时由 __scroll 横向滚动 */
+:deep([data-slot='table-container']) {
+  width: 100%;
+  min-width: 100%;
+  overflow: visible !important;
+}
+
+:deep([data-slot='table']) {
+  width: 100%;
+}
+
+.vm-crud-table__loading {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--card) 70%, transparent);
+  color: var(--muted-foreground);
+  font-size: 12px;
+  backdrop-filter: blur(1px);
+}
+
+/* empty-block：在表体内，sticky 贴可视左缘，不盖表头 */
+:deep(.vm-crud-table__empty-row) {
+  &:hover {
+    background: transparent !important;
+  }
+}
+
+:deep(.vm-crud-table__empty-cell) {
+  height: 240px;
+  padding: 0 !important;
+  border-bottom: none !important;
+}
+
+.vm-crud-table__empty-block {
+  position: sticky;
+  left: 0;
+  display: flex;
+  height: 240px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+:deep(.vm-crud-table__head-row) {
+  border-color: color-mix(in srgb, var(--border) 70%, transparent);
+  background: transparent;
+
+  &:hover {
+    background: transparent !important;
+  }
+}
+
+:deep(.vm-crud-table__th) {
+  height: 42px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+
+  &.is-sortable {
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: var(--foreground);
+    }
+  }
+}
+
+.vm-crud-table__th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.vm-crud-table__sort {
+  font-size: 14px;
+  line-height: 1;
+  opacity: 0.45;
+
+  &.is-active {
+    color: var(--brand);
+    opacity: 1;
+  }
+
+  &.is-muted {
+    opacity: 0.35;
+  }
+}
+
+.vm-crud-table__ops {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+:deep(.vm-crud-table__op) {
+  white-space: nowrap;
+}
+
+:deep(.vm-crud-table__check) {
+  width: 40px;
+  padding-left: 4px;
+}
+
+:deep(.vm-crud-table__row) {
+  height: 48px;
+  border-color: color-mix(in srgb, var(--border) 55%, transparent);
+  transition: background 0.15s ease;
+
+  &:hover,
+  &.is-current {
+    background: var(--brand-soft) !important;
+  }
+}
+
+:deep(.vm-crud-table__td) {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 13px;
+}
+
+.vm-crud-table__tree-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.vm-crud-table__fold {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &.is-spacer {
+    cursor: default;
+  }
+
+  &:not(.is-spacer):hover {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+}
+</style>