@vobs/table 1.1.0 → 1.2.0

package/package.json

@@ -1,31 +1,58 @@
 {
   "license": "MIT",
   "files": [
+    "dist",
     "src",
     "README.md",
     "LICENSE"
   ],
   "name": "@vobs/table",
-  "version": "1.1.0",
+  "version": "1.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Optional data table primitives for Vobs.",
   "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./data-table": "./src/data-table.ts",
-    "./column-settings": "./src/column-settings.ts",
-    "./styles.css": "./src/styles/styles.css",
-    "./table.css": "./src/styles/table.css",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./data-table": {
+      "types": "./dist/data-table.d.ts",
+      "import": "./dist/data-table.js",
+      "require": "./dist/data-table.cjs",
+      "default": "./dist/data-table.js"
+    },
+    "./column-settings": {
+      "types": "./dist/column-settings.d.ts",
+      "import": "./dist/column-settings.js",
+      "require": "./dist/column-settings.cjs",
+      "default": "./dist/column-settings.js"
+    },
+    "./styles.css": "./dist/styles/styles.css",
+    "./table.css": "./dist/styles/table.css",
+    "./source": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./source/*": "./src/*",
     "./package.json": "./package.json"
   },
   "sideEffects": [
+    "./dist/styles/*.css",
     "./src/styles/*.css"
   ],
   "dependencies": {
-    "@vobs/vobs": "1.1.0",
-    "@vobs/reactivity": "1.1.0",
-    "@vobs/resource": "1.1.0"
+    "@vobs/reactivity": "1.2.0",
+    "@vobs/resource": "1.2.0",
+    "@vobs/ui": "1.2.0",
+    "@vobs/vobs": "1.2.0"
   },
   "scripts": {
     "test": "vitest --environment jsdom"

package/src/data-table.ts

@@ -1,4 +1,4 @@
-import { effect, state } from '@vobs/reactivity'
+import { effect, state, type Signal } from '@vobs/reactivity'
 import {
   addEventListener,
   createElement,
@@ -22,6 +22,7 @@ import {
   resolveSlot,
   setOptionalAttribute
 } from './utils'
+import { defaultIcons } from './icons'
 import type {
   DataTableColumn,
   DataTableChildren,
@@ -320,11 +321,9 @@ function createPageButton<Row>(
   setAttribute(button, 'class', 'vobs-data-table__page-button')
   setAttribute(button, 'aria-label', label)
   setProperty(button, 'disabled', disabled)
-  const icons = readProp<DataTableIcons | undefined>(props, 'icons', undefined) ?? {}
+  const icons = resolveIcons(props)
   const icon = direction === 'previous' ? icons.previous : icons.next
-  const node = icon === undefined
-    ? createText(direction === 'previous' ? '<' : '>')
-    : resolveSlot(icon)
+  const node = icon === undefined ? undefined : resolveSlot(icon)
   if (node) insertBefore(button, node, null)
   addEventListener(button, 'click', () => {
     if (disabled) return
@@ -540,10 +539,14 @@ function resolveWindow<Row>(props: KitDataTableProps<Row>, count: number, scroll
   return { start, end, before: start * rowHeight, after: (count - end) * rowHeight }
 }
 
+function unwrapQueryValue(value: number | Signal<number>): number {
+  return typeof value === 'number' ? value : value.value
+}
+
 function currentQuery<Row>(props: KitDataTableProps<Row>): DataTableQuery {
   const internal = internalQueries.get(props)?.value
-  const page = readProp(props, 'page', internal?.page ?? 1)
-  const pageSize = readProp(props, 'pageSize', internal?.pageSize ?? DEFAULT_PAGE_SIZE)
+  const page = unwrapQueryValue(readProp(props, 'page', internal?.page ?? 1))
+  const pageSize = unwrapQueryValue(readProp(props, 'pageSize', internal?.pageSize ?? DEFAULT_PAGE_SIZE))
   return {
     page: Math.max(1, Math.floor(page)),
     pageSize: normalizePositive(pageSize, DEFAULT_PAGE_SIZE),
@@ -552,9 +555,18 @@ function currentQuery<Row>(props: KitDataTableProps<Row>): DataTableQuery {
   }
 }
 
+function readSignalProp<T>(props: object, name: string): Signal<T> | undefined {
+  const value = Reflect.get(props, name) as Signal<T> | undefined
+  return value && typeof value === 'object' && 'value' in value ? value : undefined
+}
+
 function emitQuery<Row>(props: KitDataTableProps<Row>, query: DataTableQuery): void {
   const internal = internalQueries.get(props)
   if (internal) internal.value = query
+  const pageSignal = readSignalProp<number>(props, 'page')
+  if (pageSignal) pageSignal.value = query.page
+  const pageSizeSignal = readSignalProp<number>(props, 'pageSize')
+  if (pageSizeSignal) pageSizeSignal.value = query.pageSize
   readProp<KitDataTableProps<Row>['onQueryChange'] | undefined>(props, 'onQueryChange', undefined)?.(query)
 }
 
@@ -573,10 +585,14 @@ function visibleColumns<Row>(props: KitDataTableProps<Row>): readonly DataTableC
     .filter(column => column.visible !== false && (!visible || visible.has(column.id)))
 }
 
+function resolveIcons<Row>(props: KitDataTableProps<Row>): Required<DataTableIcons> {
+  return { ...defaultIcons(), ...(readProp<DataTableIcons | undefined>(props, 'icons', undefined) ?? {}) }
+}
+
 function sortIcon<Row>(props: KitDataTableProps<Row>, sort: DataTableSort | null, columnId: string) {
-  const icons = readProp<DataTableIcons | undefined>(props, 'icons', undefined) ?? {}
-  if (sort?.columnId !== columnId) return icons.unsorted ?? ''
-  return sort.direction === 'asc' ? icons.ascending ?? '^' : icons.descending ?? 'v'
+  const icons = resolveIcons(props)
+  if (sort?.columnId !== columnId) return icons.unsorted
+  return sort.direction === 'asc' ? icons.ascending : icons.descending
 }
 
 function pageLabel<Row>(

package/src/icons.ts

@@ -0,0 +1,14 @@
+import { createComponent } from '@vobs/vobs'
+import { Icon } from '@vobs/ui'
+import type { DataTableIcons } from './types'
+
+/** 内置默认图标；`icons` prop 中的同名项会逐个覆盖。 */
+export function defaultIcons(): Required<DataTableIcons> {
+  return {
+    ascending: () => createComponent(Icon, { name: 'chevron-up' }),
+    descending: () => createComponent(Icon, { name: 'chevron-down' }),
+    unsorted: () => createComponent(Icon, { name: 'sort' }),
+    previous: () => createComponent(Icon, { name: 'chevron-left' }),
+    next: () => createComponent(Icon, { name: 'chevron-right' })
+  }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { KitDataTable } from './data-table'
 export { KitColumnSettings } from './column-settings'
+export { defaultIcons } from './icons'
 export { createColumnSettingsPersistence, createLocalColumnSettingsPersistence } from './persistence'
 export type {
   DataTableAlign,

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { Signal } from '@vobs/reactivity'
 import type { VobsNode } from '@vobs/vobs'
 
 export type DataTableAlign = 'start' | 'center' | 'end'
@@ -123,8 +124,9 @@ export interface KitDataTableProps<Row = Record<string, unknown>> extends DataTa
   readonly rows?: readonly Row[]
   readonly resource?: DataTableResource<Row>
   readonly rowKey?: (row: Row, index: number) => unknown
-  readonly page?: number
-  readonly pageSize?: number
+  /** 传入 Signal 时受控分页：表格翻页后自动写回信号。 */
+  readonly page?: number | Signal<number>
+  readonly pageSize?: number | Signal<number>
   readonly total?: number
   readonly sort?: DataTableSort | null
   /** Client sorts loaded rows; server leaves row order to the resource owner. */