{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "advanced-table",
  "title": "Advanced Table",
  "description": "A feature-rich data table component with column management, pagination, sticky headers, and auto-tooltip support.",
  "dependencies": [
    "vue-draggable-plus",
    "@vueuse/core",
    "@lucide/vue"
  ],
  "registryDependencies": [
    "checkbox",
    "table",
    "tooltip",
    "button",
    "sheet",
    "input",
    "select",
    "pagination",
    "https://raw.githubusercontent.com/smoosex/inovue-ui/refs/heads/main/public/r/smart-search-input.json",
    "https://raw.githubusercontent.com/smoosex/inovue-ui/refs/heads/main/public/r/toolbar.json"
  ],
  "files": [
    {
      "path": "src/components/advanced-table/AdvancedTable.vue",
      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, ref, watch, nextTick, onMounted } from \"vue\";\nimport ColumnToggle from \"./ColumnToggle.vue\";\nimport TablePagination from \"./TablePagination.vue\";\nimport type { Column, Locale, RowKeyType } from \"./types\";\nimport { GetI18nText } from \"./locales\";\nimport { useResizeObserver, useMediaQuery } from \"@vueuse/core\";\nimport { ChevronDown, ChevronRight, ShieldOff } from \"@lucide/vue\";\nimport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n} from \"@/components/ui/tooltip\";\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { Toolbar } from \"@/components/toolbar\";\nimport type { ToolbarAction } from \"@/components/toolbar\";\nimport {\n  SmartSearchInput,\n  ActiveFilterTags,\n} from \"@/components/smart-search-input\";\nimport type {\n  FilterOption,\n  FilterValue,\n  ActiveFilterItem,\n} from \"@/components/smart-search-input\";\n\ntype Props = {\n  data: T[];\n  total: number;\n  showCheckbox?: boolean;\n  rowSelectable?: (row: T) => boolean;\n  selectionScope?: \"cross-page\" | \"page\";\n  showColumnToggle?: boolean;\n  showExpand?: boolean;\n  rowExpandable?: (row: T) => boolean;\n  rowExpandMode?: (row: T) => \"children\" | \"slot\" | false;\n  showPagination?: boolean;\n  loading?: boolean;\n  rowKey?: string;\n  locale?: Locale;\n  onReset?: () => void;\n  showToolbar?: boolean;\n  showSmartSearch?: boolean;\n  showActiveFilters?: boolean;\n  toolbarPrimaryActions?: ToolbarAction[];\n  toolbarSecondaryActions?: ToolbarAction[];\n  filterOptions?: FilterOption[];\n};\n\nconst props = withDefaults(defineProps<Props>(), {\n  showCheckbox: true,\n  selectionScope: \"cross-page\",\n  showColumnToggle: true,\n  showExpand: false,\n  showPagination: true,\n  loading: false,\n  rowKey: \"id\",\n  locale: \"en\",\n  showToolbar: false,\n  showSmartSearch: false,\n  showActiveFilters: false,\n});\n\nconst emit = defineEmits<{\n  (e: \"search\", value: FilterValue): void;\n  (e: \"filter-remove\", key: string): void;\n  (e: \"filter-clear-all\"): void;\n  (\n    e: \"row-expand-change\",\n    payload: { row: T; expanded: boolean; key: RowKeyType },\n  ): void;\n}>();\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst selectedIds = defineModel<RowKeyType[]>(\"selectedIds\", {\n  default: () => [],\n});\nconst columns = defineModel<Column[]>(\"columns\", { required: true });\nconst pageNum = defineModel<number>(\"pageNum\", { required: true });\nconst pageSize = defineModel<number>(\"pageSize\", { required: true });\nconst activeFilters = defineModel<ActiveFilterItem[]>(\"activeFilters\", { default: () => [] });\n\nconst visibleColumns = computed(() => columns.value.filter((col) => col.show));\nconst isLgScreen = useMediaQuery(\"(min-width: 1024px)\");\nconst showColumnToggleCell = computed(\n  () => props.showColumnToggle && isLgScreen.value,\n);\nconst hasChildrenRows = computed(() =>\n  props.data.some((row) => Array.isArray((row as any).children) && (row as any).children.length > 0),\n);\nconst useChildrenExpand = computed(() => hasChildrenRows.value);\nconst showExpandButton = computed(\n  () => useChildrenExpand.value || props.showExpand || Boolean(props.rowExpandMode),\n);\nconst tableColspan = computed(\n  () =>\n    visibleColumns.value.length +\n    (props.showCheckbox ? 1 : 0) +\n    (showColumnToggleCell.value ? 1 : 0) +\n    (showExpandButton.value ? 1 : 0),\n);\nconst rightStickyOffset = computed(() =>\n  showColumnToggleCell.value ? \"56px\" : \"0px\",\n);\n\nconst isRowSelectable = (row: T) =>\n  props.rowSelectable ? props.rowSelectable(row) : true;\n\nconst currentRowIds = computed(() =>\n  props.data.map((row) => row[props.rowKey] as RowKeyType),\n);\n\nconst selectableRows = computed(() =>\n  props.data.filter((row) => isRowSelectable(row)),\n);\n\nconst selectableRowIds = computed(() =>\n  selectableRows.value.map((row) => row[props.rowKey] as RowKeyType),\n);\n\nconst allSelected = computed(() => {\n  return (\n    selectableRowIds.value.length > 0 &&\n    selectableRowIds.value.every((id) => selectedIds.value.includes(id))\n  );\n});\n\nconst toggleAll = (checked: boolean) => {\n  if (checked) {\n    if (props.selectionScope === \"page\") {\n      selectedIds.value = [...selectableRowIds.value];\n      return;\n    }\n    selectedIds.value = Array.from(\n      new Set([...selectedIds.value, ...selectableRowIds.value]),\n    );\n  } else {\n    if (props.selectionScope === \"page\") {\n      selectedIds.value = [];\n      return;\n    }\n    const currentSelectableIdSet = new Set(selectableRowIds.value);\n    selectedIds.value = selectedIds.value.filter(\n      (id) => !currentSelectableIdSet.has(id),\n    );\n  }\n};\n\nconst toggleOne = (id: RowKeyType, checked: boolean) => {\n  const newSelected = [...selectedIds.value];\n  if (checked) {\n    if (newSelected.includes(id)) return;\n    newSelected.push(id);\n  } else {\n    const index = newSelected.indexOf(id);\n    if (index > -1) {\n      newSelected.splice(index, 1);\n    }\n  }\n  selectedIds.value = newSelected;\n};\n\nconst expandedIds = ref<RowKeyType[]>([]);\nconst resolveExpandMode = (row: T) => {\n  if (props.rowExpandMode) return props.rowExpandMode(row);\n  const children = (row as any).children;\n  if (Array.isArray(children) && children.length > 0) return \"children\";\n  return props.showExpand ? \"slot\" : false;\n};\nconst canExpandRow = (row: T) => {\n  const mode = resolveExpandMode(row);\n  if (!mode) return false;\n  return props.rowExpandable ? props.rowExpandable(row) : true;\n};\nconst getRowExpandMode = (row: T) => resolveExpandMode(row);\nconst isExpanded = (key: RowKeyType) => expandedIds.value.includes(key);\nconst toggleExpand = (row: T) => {\n  if (!canExpandRow(row)) return;\n  const key = row[props.rowKey] as RowKeyType;\n  const next = [...expandedIds.value];\n  const index = next.indexOf(key);\n  const expanded = index === -1;\n  if (expanded) {\n    next.push(key);\n  } else {\n    next.splice(index, 1);\n  }\n  expandedIds.value = next;\n  emit(\"row-expand-change\", { row, expanded, key });\n};\nconst scrollContainer = ref<HTMLElement | null>(null);\nconst tableRef = ref<HTMLElement | null>(null);\nconst isScrollable = ref(false);\nconst tableWidth = ref(0);\n\nconst checkScrollable = () => {\n  if (!scrollContainer.value) return;\n  isScrollable.value =\n    scrollContainer.value.scrollWidth > scrollContainer.value.clientWidth;\n};\n\nconst updateTableWidth = () => {\n  nextTick(() => {\n    const root = (tableRef.value as any)?.$el;\n    const tableEl = root?.querySelector(\"table\");\n    if (tableEl) {\n      tableWidth.value = tableEl.clientWidth;\n    }\n  });\n};\n\nuseResizeObserver(scrollContainer, checkScrollable);\nuseResizeObserver(tableRef, updateTableWidth);\n\nwatch(\n  [() => props.data, columns, () => props.showCheckbox],\n  () => {\n    nextTick(checkScrollable);\n  },\n  { deep: true },\n);\n\nwatch(\n  [currentRowIds, selectableRowIds, () => props.selectionScope],\n  ([nextCurrentRowIds, nextSelectableRowIds, nextSelectionScope]) => {\n    const currentRowIdSet = new Set(nextCurrentRowIds);\n    const selectableIdSet = new Set(nextSelectableRowIds);\n    const nextSelectedIds = selectedIds.value.filter((id) => {\n      if (selectableIdSet.has(id)) return true;\n      if (currentRowIdSet.has(id)) return false;\n      return nextSelectionScope === \"cross-page\";\n    });\n    if (nextSelectedIds.length === selectedIds.value.length) return;\n    selectedIds.value = nextSelectedIds;\n  },\n  { immediate: true },\n);\n\nonMounted(() => {\n  checkScrollable();\n  updateTableWidth();\n});\n\nconst resolveWidth = (width: string | undefined) => {\n  if (!width) return undefined;\n  if (width.endsWith(\"%\")) {\n    const percent = parseFloat(width) / 100;\n    return `${percent * tableWidth.value}px`;\n  }\n  return width;\n};\n\nconst getStickyStyle = (col: Column, isHeader: boolean = false) => {\n  const zIndex = isHeader ? 30 : 20;\n  const hasWidth = col.width !== undefined;\n  const resolvedWidth = resolveWidth(col.width);\n  if (col.fixed === \"right\") {\n    return {\n      position: \"sticky\",\n      right: rightStickyOffset.value,\n      zIndex,\n      width: resolvedWidth,\n      maxWidth: hasWidth ? resolvedWidth : undefined,\n    } as const;\n  }\n  if (col.fixed === \"left\") {\n    return {\n      position: \"sticky\",\n      left: \"0px\",\n      zIndex,\n      width: resolvedWidth,\n      maxWidth: hasWidth ? resolvedWidth : undefined,\n    } as const;\n  }\n  return {\n    width: resolvedWidth,\n    maxWidth: hasWidth ? resolvedWidth : undefined,\n  } as const;\n};\n\nconst firstRightFixedColumn = computed(() =>\n  visibleColumns.value.find((col) => col.fixed === \"right\"),\n);\n\nconst tooltipDisabled = ref<Record<string, boolean>>({});\nconst smartSearchRef = ref<{\n  clearCurrentValue: () => void;\n  clearValueByKey: (key: string) => void;\n} | null>(null);\n\nconst checkOverflow = (event: MouseEvent, key: string) => {\n  const target = event.currentTarget as HTMLElement;\n  tooltipDisabled.value[key] = target.scrollWidth <= target.clientWidth;\n};\n\nconst getCellClass = (col: Column) => {\n  const ellipsis = col.ellipsis ?? true;\n  return ellipsis ? \"truncate max-w-full\" : \"\";\n};\n\nconst handleFilterRemove = (key: string) => {\n  smartSearchRef.value?.clearValueByKey(key);\n  emit(\"filter-remove\", key);\n};\n\nconst handleFilterClearAll = () => {\n  smartSearchRef.value?.clearCurrentValue();\n  emit(\"filter-clear-all\");\n};\n</script>\n\n<template>\n  <div class=\"h-full flex flex-col min-h-0\">\n    <!-- Toolbar Area -->\n    <div v-if=\"showToolbar\" class=\"mb-2\">\n      <Toolbar\n        :primary-actions=\"toolbarPrimaryActions\"\n        :secondary-actions=\"toolbarSecondaryActions\"\n      >\n        <SmartSearchInput\n          v-if=\"showSmartSearch && filterOptions\"\n          ref=\"smartSearchRef\"\n          v-model:active-filters=\"activeFilters\"\n          :options=\"filterOptions\"\n          :locale=\"props.locale\"\n          @search=\"(fv) => emit('search', fv)\"\n        />\n      </Toolbar>\n      <ActiveFilterTags\n        v-if=\"showActiveFilters\"\n        v-model:filters=\"activeFilters\"\n        :locale=\"props.locale\"\n        @remove=\"handleFilterRemove\"\n        @clear-all=\"handleFilterClearAll\"\n      />\n    </div>\n\n    <!-- Table Area -->\n    <div\n      class=\"advanced-table-scroll flex-1 overflow-auto relative border rounded-md\"\n      ref=\"scrollContainer\"\n    >\n      <Table class=\"table-auto\" ref=\"tableRef\">\n        <TableHeader\n          class=\"sticky top-0 z-30 bg-muted [&_th]:font-bold [&_th:first-child]:pl-4 [&_th:last-child]:pr-4\"\n        >\n          <TableRow>\n            <TableHead v-if=\"showExpandButton\" class=\"w-12.5\" />\n            <TableHead v-if=\"showCheckbox\" class=\"w-12.5\">\n              <Checkbox\n                id=\"select-all\"\n                :model-value=\"allSelected\"\n                :disabled=\"selectableRowIds.length === 0\"\n                @update:model-value=\"(v) => toggleAll(v as boolean)\"\n              />\n            </TableHead>\n            <TableHead\n              v-for=\"col in visibleColumns\"\n              :key=\"col.value\"\n              class=\"whitespace-nowrap h-11 px-4 transition-shadow duration-300\"\n              :style=\"getStickyStyle(col, true)\"\n              :class=\"{\n                'bg-muted': col.fixed && isScrollable,\n                'shadow-[4px_0_8px_-2px_rgba(0,0,0,0.1)]':\n                  col.fixed === 'left' && isScrollable,\n                'shadow-[-4px_0_8px_-2px_rgba(0,0,0,0.1)]':\n                  col.fixed === 'right' &&\n                  col.value === firstRightFixedColumn?.value &&\n                  isScrollable,\n              }\"\n            >\n              {{ col.label }}\n            </TableHead>\n            <TableHead\n              v-if=\"showColumnToggleCell\"\n              class=\"w-12.5 text-right sticky right-0 z-20 transition-shadow duration-300\"\n              :class=\"{\n                'bg-muted': isScrollable,\n                'shadow-[-4px_0_8px_-2px_rgba(0,0,0,0.1)]':\n                  !firstRightFixedColumn && isScrollable,\n              }\"\n            >\n              <ColumnToggle\n                v-model=\"columns\"\n                :on-reset=\"props.onReset\"\n                :locale=\"props.locale\"\n              />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody class=\"[&_tr>td:first-child]:pl-4 [&_tr>td:last-child]:pr-4\">\n          <template v-if=\"data.length > 0\">\n            <template v-for=\"row in data\" :key=\"row[rowKey]\">\n              <TableRow>\n                <TableCell v-if=\"showExpandButton\">\n                  <Button\n                    v-if=\"canExpandRow(row)\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    class=\"h-7 w-7\"\n                    @click=\"toggleExpand(row)\"\n                  >\n                    <ChevronDown v-if=\"isExpanded(row[rowKey])\" class=\"h-4 w-4\" />\n                    <ChevronRight v-else class=\"h-4 w-4\" />\n                  </Button>\n                </TableCell>\n                <TableCell v-if=\"showCheckbox\">\n                  <Checkbox\n                    :id=\"'select-' + row[rowKey]\"\n                    :model-value=\"selectedIds.includes(row[rowKey])\"\n                    :disabled=\"!isRowSelectable(row)\"\n                    @update:model-value=\"\n                      (val) => toggleOne(row[rowKey], val as boolean)\n                    \"\n                  />\n                </TableCell>\n                <TableCell\n                  v-for=\"col in visibleColumns\"\n                  :key=\"col.value\"\n                  class=\"whitespace-nowrap py-2 px-4 transition-shadow duration-300\"\n                  :style=\"getStickyStyle(col)\"\n                  :class=\"[\n                    {\n                      'bg-background': col.fixed && isScrollable,\n                      'shadow-[4px_0_8px_-2px_rgba(0,0,0,0.1)]':\n                        col.fixed === 'left' && isScrollable,\n                      'shadow-[-4px_0_8px_-2px_rgba(0,0,0,0.1)]':\n                        col.fixed === 'right' &&\n                        col.value === firstRightFixedColumn?.value &&\n                        isScrollable,\n                    },\n                    getCellClass(col),\n                  ]\"\n                >\n                  <Tooltip\n                    v-if=\"col.enableAutoTooltip !== false\"\n                    :disabled=\"tooltipDisabled[`${row[rowKey]}-${col.value}`]\"\n                  >\n                    <TooltipTrigger as-child>\n                      <div\n                        class=\"truncate min-w-0\"\n                        @mouseenter=\"\n                          checkOverflow($event, `${row[rowKey]}-${col.value}`)\n                        \"\n                      >\n                        <slot\n                          name=\"cell\"\n                          :row=\"row\"\n                          :column=\"col\"\n                          :text=\"(row as any)[col.value]\"\n                        >\n                          {{ (row as any)[col.value] }}\n                        </slot>\n                      </div>\n                    </TooltipTrigger>\n                    <TooltipContent>\n                      <slot\n                        name=\"cell\"\n                        :row=\"row\"\n                        :column=\"col\"\n                        :text=\"(row as any)[col.value]\"\n                      >\n                        {{ (row as any)[col.value] }}\n                      </slot>\n                    </TooltipContent>\n                  </Tooltip>\n                  <slot\n                    v-else\n                    name=\"cell\"\n                    :row=\"row\"\n                    :column=\"col\"\n                    :text=\"(row as any)[col.value]\"\n                  >\n                    {{ (row as any)[col.value] }}\n                  </slot>\n                </TableCell>\n                <TableCell\n                  v-if=\"showColumnToggleCell\"\n                  class=\"sticky right-0 z-20 transition-shadow duration-300\"\n                  :class=\"{\n                    'bg-background': isScrollable,\n                    'shadow-[-4px_0_8px_-2px_rgba(0,0,0,0.1)]':\n                      !firstRightFixedColumn && isScrollable,\n                  }\"\n                />\n              </TableRow>\n                <template\n                  v-if=\"\n                    showExpandButton &&\n                    canExpandRow(row) &&\n                    isExpanded(row[rowKey])\n                  \"\n                >\n                  <template v-if=\"getRowExpandMode(row) === 'children'\">\n                    <TableRow\n                      v-for=\"(child, childIndex) in (row as any).children\"\n                      :key=\"`${row[rowKey]}-child-${childIndex}`\"\n                      class=\"bg-muted/30\"\n                    >\n                      <TableCell v-if=\"showExpandButton\" />\n                      <TableCell v-if=\"showCheckbox\" />\n                    <TableCell\n                      v-for=\"col in visibleColumns\"\n                      :key=\"col.value\"\n                      class=\"whitespace-nowrap py-2 px-4\"\n                    >\n                      <Tooltip\n                        v-if=\"col.enableAutoTooltip !== false\"\n                        :disabled=\"\n                          tooltipDisabled[\n                            `${row[rowKey]}-child-${childIndex}-${col.value}`\n                          ]\n                        \"\n                      >\n                        <TooltipTrigger as-child>\n                          <div\n                            class=\"truncate min-w-0\"\n                            @mouseenter=\"\n                              checkOverflow(\n                                $event,\n                                `${row[rowKey]}-child-${childIndex}-${col.value}`\n                              )\n                            \"\n                          >\n                            <slot\n                              name=\"cell\"\n                              :row=\"child\"\n                              :column=\"col\"\n                              :text=\"(child as any)[col.value]\"\n                            >\n                              {{ (child as any)[col.value] }}\n                            </slot>\n                          </div>\n                        </TooltipTrigger>\n                        <TooltipContent>\n                          <slot\n                            name=\"cell\"\n                            :row=\"child\"\n                            :column=\"col\"\n                            :text=\"(child as any)[col.value]\"\n                          >\n                            {{ (child as any)[col.value] }}\n                          </slot>\n                        </TooltipContent>\n                      </Tooltip>\n                      <slot\n                        v-else\n                        name=\"cell\"\n                        :row=\"child\"\n                        :column=\"col\"\n                        :text=\"(child as any)[col.value]\"\n                      >\n                        {{ (child as any)[col.value] }}\n                      </slot>\n                    </TableCell>\n                      <TableCell v-if=\"showColumnToggleCell\" />\n                    </TableRow>\n                  </template>\n                  <TableRow v-else class=\"bg-muted/30\">\n                    <TableCell :colspan=\"tableColspan\" class=\"py-0\">\n                      <slot name=\"expanded\" :row=\"row\" />\n                    </TableCell>\n                  </TableRow>\n                </template>\n              </template>\n            </template>\n          <template v-else>\n            <TableRow>\n              <TableCell :colspan=\"tableColspan\" class=\"p-0\">\n                <slot name=\"empty\">\n                  <Empty class=\"h-full min-h-[168px] border-0 p-4 md:p-6\">\n                    <EmptyHeader class=\"max-w-[240px]\">\n                      <EmptyMedia\n                        variant=\"icon\"\n                        class=\"bg-muted/70 text-muted-foreground\"\n                      >\n                        <ShieldOff class=\"size-5\" />\n                      </EmptyMedia>\n                      <EmptyTitle class=\"text-sm\">\n                        {{ $t(\"emptyTitle\") }}\n                      </EmptyTitle>\n                      <EmptyDescription class=\"text-xs\">\n                        {{ $t(\"emptyDescription\") }}\n                      </EmptyDescription>\n                    </EmptyHeader>\n                  </Empty>\n                </slot>\n              </TableCell>\n            </TableRow>\n          </template>\n        </TableBody>\n      </Table>\n    </div>\n\n    <!-- Pagination Area -->\n    <TablePagination\n      v-if=\"showPagination\"\n      v-model:pageNum=\"pageNum\"\n      v-model:page-size=\"pageSize\"\n      :total=\"total\"\n      :selected-count=\"props.showCheckbox ? selectedIds.length : undefined\"\n      :locale=\"props.locale\"\n    />\n  </div>\n</template>\n\n<style scoped>\n:deep(.relative.w-full.overflow-auto) {\n  overflow: visible !important;\n}\n</style>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/advanced-table/locales.ts",
      "content": "export type Locale = \"en\" | \"zhHans\";\n\nexport const translations = {\n  en: {\n    noResults: \"No results.\",\n    emptyTitle: \"No Data\",\n    emptyDescription: \"There is no data to display at the moment.\",\n    perPage: \"/ page\",\n    total: \"Total:\",\n    toggleColumns: \"Toggle columns\",\n    dragReorder: \"Drag to reorder. Click + to add, X to remove.\",\n    availableColumns: \"Available Columns\",\n    selectedColumns: \"Selected Columns\",\n    searchPlaceholder: \"Search...\",\n    noResultsFound: \"No results found\",\n    noAvailableColumns: \"No available columns\",\n    noSelectedColumns: \"No selected columns\",\n    reset: \"Reset\",\n    cancel: \"Cancel\",\n    confirm: \"Confirm\",\n    first: \"First\",\n    previous: \"Previous\",\n    next: \"Next\",\n    last: \"Last\",\n  },\n  zhHans: {\n    noResults: \"暂无数据\",\n    emptyTitle: \"暂无数据\",\n    emptyDescription: \"当前没有可显示的数据。\",\n    perPage: \"条/页\",\n    total: \"总计：\",\n    toggleColumns: \"切换列\",\n    dragReorder: \"拖拽排序。点击 + 添加，X 移除。\",\n    availableColumns: \"可用列\",\n    selectedColumns: \"已选列\",\n    searchPlaceholder: \"搜索...\",\n    noResultsFound: \"未找到结果\",\n    noAvailableColumns: \"没有可用列\",\n    noSelectedColumns: \"没有已选列\",\n    reset: \"重置\",\n    cancel: \"取消\",\n    confirm: \"确认\",\n    first: \"首页\",\n    previous: \"上一页\",\n    next: \"下一页\",\n    last: \"末页\",\n  },\n} as const;\n\nexport function GetI18nText(key: keyof typeof translations.en, locale: Locale): string {\n  return translations[locale][key] ?? translations.en[key];\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/advanced-table/types.ts",
      "content": "export type Column = {\n  label: string;\n  value: string;\n  show: boolean;\n  originalIndex?: number;\n  hideInSetting?: boolean;\n  width?: string;\n  fixed?: \"left\" | \"right\";\n  lock?: boolean;\n  enableAutoTooltip?: boolean;\n  ellipsis?: boolean;\n};\n\nexport type { Locale } from \"./locales\";\nexport type { DateTimeRange } from \"@/components/date-time-range-picker\";\nexport type {\n  FilterOption,\n  FilterValue,\n  ActiveFilterItem,\n  AnyFilterValue,\n  SelectOption,\n  FilterInputType,\n  CascadeValue,\n} from \"@/components/smart-search-input\";\n\nexport type { ToolbarAction } from \"@/components/toolbar\";\n\nexport type RowKeyType = string | number;\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/advanced-table/index.ts",
      "content": "import AdvancedTable from \"./AdvancedTable.vue\";\n\nexport { AdvancedTable };\nexport type {\n  FilterOption,\n  FilterValue,\n  ActiveFilterItem,\n  AnyFilterValue,\n  SelectOption,\n  FilterInputType,\n  DateTimeRange,\n  CascadeValue,\n} from \"./types\";\n\nexport type { ToolbarAction } from \"./types\";\nexport * from \"./types\";\nexport default AdvancedTable;\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/advanced-table/TablePagination.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@lucide/vue\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationItem,\n  PaginationLast,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/components/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { GetI18nText, type Locale } from \"./locales\";\n\ntype Props = {\n  total: number;\n  pageSizes?: number[];\n  locale?: Locale;\n  selectedCount?: number;\n};\n\nconst props = withDefaults(defineProps<Props>(), {\n  pageSizes: () => [10, 20, 50, 100],\n  locale: \"en\",\n});\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst pageNum = defineModel<number>(\"pageNum\", { required: true });\nconst pageSize = defineModel<number>(\"pageSize\", { required: true });\n\nconst pageSizeModel = computed({\n  get: () => pageSize.value,\n  set: (val) => (pageSize.value = Number(val)),\n});\n\nconst selectedCountLabel = computed(() =>\n  props.locale === \"zhHans\"\n    ? `已选：${props.selectedCount ?? 0} 条`\n    : `Selected: ${props.selectedCount ?? 0} items`,\n);\n</script>\n\n<template>\n  <div class=\"pt-4 flex flex-col gap-3 px-2 md:flex-row md:items-center md:justify-between\">\n    <div\n      v-if=\"props.selectedCount !== undefined\"\n      class=\"text-sm font-medium whitespace-nowrap text-muted-foreground\"\n    >\n      {{ selectedCountLabel }}\n    </div>\n    <Pagination\n      v-model:page=\"pageNum\"\n      :total=\"total\"\n      :sibling-count=\"1\"\n      show-edges\n      :default-page-size=\"pageSize\"\n      :items-per-page=\"pageSize\"\n    >\n      <PaginationContent v-slot=\"{ items }\">\n        <PaginationFirst>\n          <ChevronLeftIcon class=\"h-4 w-4\" />\n          <span class=\"hidden sm:block\">{{ $t(\"first\") }}</span>\n        </PaginationFirst>\n        <PaginationPrevious>\n          <ChevronLeftIcon class=\"h-4 w-4\" />\n          <span class=\"hidden sm:block\">{{ $t(\"previous\") }}</span>\n        </PaginationPrevious>\n        <template v-for=\"(item, index) in items\">\n          <PaginationItem\n            v-if=\"item.type === 'page'\"\n            :key=\"index\"\n            :value=\"item.value\"\n            :is-active=\"item.value === pageNum\"\n          >\n            {{ item.value }}\n          </PaginationItem>\n          <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n        </template>\n        <li class=\"flex items-center gap-2 mx-2\">\n          <Select v-model=\"pageSizeModel\">\n            <SelectTrigger class=\"h-9 w-20\">\n              <SelectValue :placeholder=\"pageSize.toString()\" />\n            </SelectTrigger>\n            <SelectContent side=\"top\">\n              <SelectItem v-for=\"size in pageSizes\" :key=\"size\" :value=\"size\">\n                {{ size }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n          <span class=\"text-sm font-medium whitespace-nowrap\">{{\n            $t(\"perPage\")\n          }}</span>\n          <span class=\"text-sm font-medium whitespace-nowrap ml-2\">\n            {{ $t(\"total\") }}\n            <span class=\"text-primary font-bold\">{{ total }}</span>\n          </span>\n        </li>\n        <PaginationNext>\n          <span class=\"hidden sm:block\">{{ $t(\"next\") }}</span>\n          <ChevronRightIcon class=\"h-4 w-4\" />\n        </PaginationNext>\n        <PaginationLast>\n          <span class=\"hidden sm:block\">{{ $t(\"last\") }}</span>\n          <ChevronRightIcon class=\"h-4 w-4\" />\n        </PaginationLast>\n      </PaginationContent>\n    </Pagination>\n  </div>\n</template>\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/advanced-table/ColumnToggle.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport {\n  Settings2,\n  GripVertical,\n  Plus,\n  X,\n  Search,\n  XCircle,\n} from \"@lucide/vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport type { Column, Locale } from \"./types\";\nimport { GetI18nText } from \"./locales\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: Column[];\n    onReset?: () => void;\n    locale?: Locale;\n  }>(),\n  {\n    locale: \"zhHans\",\n  },\n);\n\nconst $t = (key: Parameters<typeof GetI18nText>[0]) =>\n  GetI18nText(key, props.locale);\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst isOpen = ref(false);\n\n// Local state for editing\nconst localAvailableColumns = ref<Column[]>([]);\nconst localSelectedColumns = ref<Column[]>([]);\n\n// Search states\nconst availableSearchQuery = ref(\"\");\nconst selectedSearchQuery = ref(\"\");\n\n// Filtered columns\nconst filteredAvailableColumns = computed(() => {\n  if (!availableSearchQuery.value.trim()) return localAvailableColumns.value;\n  const query = availableSearchQuery.value.toLowerCase();\n  return localAvailableColumns.value.filter((col) =>\n    col.label.toLowerCase().includes(query),\n  );\n});\n\nconst filteredSelectedColumns = computed(() => {\n  if (!selectedSearchQuery.value.trim()) return localSelectedColumns.value;\n  const query = selectedSearchQuery.value.toLowerCase();\n  return localSelectedColumns.value.filter((col) =>\n    col.label.toLowerCase().includes(query),\n  );\n});\n\n// Clear search handlers\nconst clearAvailableSearch = () => {\n  availableSearchQuery.value = \"\";\n};\n\nconst clearSelectedSearch = () => {\n  selectedSearchQuery.value = \"\";\n};\n\nwatch(isOpen, (newVal) => {\n  if (newVal) {\n    localAvailableColumns.value = props.modelValue\n      .filter((c) => !c.show && !c.hideInSetting)\n      .sort((a, b) => (a.originalIndex ?? 0) - (b.originalIndex ?? 0));\n    localSelectedColumns.value = props.modelValue.filter(\n      (c) => c.show && !c.hideInSetting,\n    );\n    availableSearchQuery.value = \"\";\n    selectedSearchQuery.value = \"\";\n  }\n});\n\nconst addColumn = (col: Column) => {\n  localAvailableColumns.value = localAvailableColumns.value.filter(\n    (c) => c.value !== col.value,\n  );\n  localSelectedColumns.value.push({ ...col, show: true });\n};\n\nconst removeColumn = (col: Column) => {\n  localSelectedColumns.value = localSelectedColumns.value.filter(\n    (c) => c.value !== col.value,\n  );\n  localAvailableColumns.value.push({ ...col, show: false });\n  localAvailableColumns.value.sort(\n    (a, b) => (a.originalIndex ?? 0) - (b.originalIndex ?? 0),\n  );\n};\n\nconst handleConfirm = () => {\n  const hiddenSettingsColumns = props.modelValue.filter((c) => c.hideInSetting);\n\n  const newColumns = [\n    ...localSelectedColumns.value.map((c) => ({ ...c, show: true })),\n    ...localAvailableColumns.value.map((c) => ({ ...c, show: false })),\n    ...hiddenSettingsColumns,\n  ];\n\n  emit(\"update:modelValue\", newColumns);\n  isOpen.value = false;\n};\n\nconst handleReset = () => {\n  props.onReset?.();\n  isOpen.value = false;\n};\n</script>\n\n<template>\n  <Tooltip>\n    <TooltipTrigger as-child>\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"ml-auto hidden h-8 w-8 lg:flex\"\n        @click=\"isOpen = true\"\n      >\n        <Settings2 class=\"h-4 w-4\" />\n      </Button>\n    </TooltipTrigger>\n    <TooltipContent>\n      <p>{{ $t(\"toggleColumns\") }}</p>\n    </TooltipContent>\n  </Tooltip>\n\n  <Sheet v-model:open=\"isOpen\">\n    <SheetContent class=\"w-150 sm:max-w-150 flex flex-col gap-0 p-0\">\n      <SheetHeader class=\"p-6 pb-4\">\n        <SheetTitle>{{ $t(\"toggleColumns\") }}</SheetTitle>\n        <SheetDescription>\n          {{ $t(\"dragReorder\") }}\n        </SheetDescription>\n      </SheetHeader>\n\n      <div class=\"flex-1 overflow-hidden relative border-t border-b\">\n        <div class=\"h-full flex p-4 gap-4 overflow-hidden\">\n          <!-- Available Columns -->\n          <div\n            class=\"flex-1 border rounded-md p-4 flex flex-col gap-3 min-h-0 overflow-hidden\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <h3 class=\"font-medium text-sm text-muted-foreground\">\n                {{ $t(\"availableColumns\") }}\n              </h3>\n              <!-- Search Input -->\n              <div class=\"relative group\">\n                <Search\n                  class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors group-focus-within:text-foreground\"\n                />\n                <Input\n                  id=\"available-search-input\"\n                  v-model=\"availableSearchQuery\"\n                  :placeholder=\"$t('searchPlaceholder')\"\n                  class=\"pl-9 pr-8\"\n                />\n                <XCircle\n                  v-if=\"availableSearchQuery\"\n                  class=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer hover:text-foreground transition-colors\"\n                  @click=\"clearAvailableSearch\"\n                />\n              </div>\n            </div>\n            <div class=\"flex-1 overflow-y-auto space-y-2 pr-2\">\n              <div\n                v-for=\"col in filteredAvailableColumns\"\n                :key=\"col.value\"\n                class=\"flex items-center justify-between p-2 rounded-md border bg-card text-card-foreground shadow-sm shrink-0 transition-all hover:border-primary/50 hover:shadow-md\"\n              >\n                <span class=\"text-sm truncate mr-2\" :title=\"col.label\">{{\n                  col.label\n                }}</span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  class=\"h-6 w-6 shrink-0\"\n                  @click=\"addColumn(col)\"\n                >\n                  <Plus class=\"h-4 w-4\" />\n                </Button>\n              </div>\n              <div\n                v-if=\"filteredAvailableColumns.length === 0\"\n                class=\"text-sm text-muted-foreground text-center py-8\"\n              >\n                {{\n                  availableSearchQuery\n                    ? $t(\"noResultsFound\")\n                    : $t(\"noAvailableColumns\")\n                }}\n              </div>\n            </div>\n          </div>\n\n          <!-- Selected Columns (Draggable) -->\n          <div\n            class=\"flex-1 border rounded-md p-4 flex flex-col gap-3 min-h-0 overflow-hidden\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <h3 class=\"font-medium text-sm text-muted-foreground\">\n                {{ $t(\"selectedColumns\") }}\n              </h3>\n              <!-- Search Input -->\n              <div class=\"relative group\">\n                <Search\n                  class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors group-focus-within:text-foreground\"\n                />\n                <Input\n                  id=\"selected-search-input\"\n                  v-model=\"selectedSearchQuery\"\n                  :placeholder=\"$t('searchPlaceholder')\"\n                  class=\"pl-9 pr-8\"\n                />\n                <XCircle\n                  v-if=\"selectedSearchQuery\"\n                  class=\"absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer hover:text-foreground transition-colors\"\n                  @click=\"clearSelectedSearch\"\n                />\n              </div>\n            </div>\n            <div class=\"flex-1 overflow-y-auto pr-2\">\n              <VueDraggable\n                v-model=\"localSelectedColumns\"\n                :animation=\"150\"\n                handle=\".handle\"\n                class=\"space-y-2\"\n              >\n                <div\n                  v-for=\"col in filteredSelectedColumns\"\n                  :key=\"col.value\"\n                  class=\"flex items-center justify-between p-2 rounded-md border bg-card text-card-foreground shadow-sm group shrink-0 transition-all hover:border-primary/50 hover:shadow-md\"\n                >\n                  <div class=\"flex items-center gap-2 overflow-hidden\">\n                    <GripVertical\n                      class=\"handle h-4 w-4 text-muted-foreground cursor-move opacity-50 group-hover:opacity-100 transition-opacity shrink-0\"\n                    />\n                    <span class=\"text-sm truncate\" :title=\"col.label\">{{\n                      col.label\n                    }}</span>\n                  </div>\n                  <Button\n                    v-if=\"!col.lock\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    class=\"h-6 w-6 text-muted-foreground hover:text-destructive shrink-0\"\n                    @click=\"removeColumn(col)\"\n                  >\n                    <X class=\"h-4 w-4\" />\n                  </Button>\n                </div>\n              </VueDraggable>\n              <div\n                v-if=\"filteredSelectedColumns.length === 0\"\n                class=\"text-sm text-muted-foreground text-center py-8\"\n              >\n                {{\n                  selectedSearchQuery\n                    ? $t(\"noResultsFound\")\n                    : $t(\"noSelectedColumns\")\n                }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <SheetFooter class=\"p-6\">\n        <div class=\"flex items-center justify-between w-full\">\n          <Button variant=\"destructive\" @click=\"handleReset\">\n            {{ $t(\"reset\") }}\n          </Button>\n          <div class=\"flex gap-2\">\n            <Button variant=\"outline\" @click=\"isOpen = false\">{{ $t(\"cancel\") }}</Button>\n            <Button @click=\"handleConfirm\">{{ $t(\"confirm\") }}</Button>\n          </div>\n        </div>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}