@tanstack/vue-table 9.0.0-beta.6 → 9.0.0-beta.61

package/src/createTableHook.ts

@@ -1,534 +0,0 @@
-import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'
-import { defineComponent, h, inject, provide } from 'vue'
-import { FlexRender } from './FlexRender'
-import { mergeProxy } from './merge-proxy'
-import { useTable } from './useTable'
-import type { TableOptionsWithReactiveData, VueTable } from './useTable'
-import type { FlexRenderCell, FlexRenderHeader } from './FlexRender'
-import type { Component, InjectionKey, PropType, VNodeChild } from 'vue'
-import type {
-  AccessorFn,
-  AccessorFnColumnDef,
-  AccessorKeyColumnDef,
-  Cell,
-  CellContext,
-  CellData,
-  Column,
-  ColumnDef,
-  DeepKeys,
-  DeepValue,
-  DisplayColumnDef,
-  GroupColumnDef,
-  Header,
-  IdentifiedColumnDef,
-  NoInfer,
-  Row,
-  RowData,
-  Table,
-  TableFeatures,
-  TableState,
-} from '@tanstack/table-core'
-
-export type ComponentType<T extends Record<string, any>> = Component<T>
-
-export type AppCellContext<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData,
-  TCellComponents extends Record<string, ComponentType<any>>,
-> = {
-  cell: Cell<TFeatures, TData, TValue> &
-    TCellComponents & { FlexRender: Component }
-  column: Column<TFeatures, TData, TValue>
-  getValue: CellContext<TFeatures, TData, TValue>['getValue']
-  renderValue: CellContext<TFeatures, TData, TValue>['renderValue']
-  row: Row<TFeatures, TData>
-  table: Table<TFeatures, TData>
-}
-
-export type AppHeaderContext<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = {
-  column: Column<TFeatures, TData, TValue>
-  header: Header<TFeatures, TData, TValue> &
-    THeaderComponents & { FlexRender: Component }
-  table: Table<TFeatures, TData>
-}
-
-export type AppColumnDefTemplate<TProps extends object> =
-  | string
-  | ((props: TProps) => any)
-
-export type AppColumnDefBase<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = Omit<
-  IdentifiedColumnDef<TFeatures, TData, TValue>,
-  'cell' | 'header' | 'footer'
-> & {
-  cell?: AppColumnDefTemplate<
-    AppCellContext<TFeatures, TData, TValue, TCellComponents>
-  >
-  header?: AppColumnDefTemplate<
-    AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>
-  >
-  footer?: AppColumnDefTemplate<
-    AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>
-  >
-}
-
-export type AppDisplayColumnDef<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = Omit<
-  DisplayColumnDef<TFeatures, TData, unknown>,
-  'cell' | 'header' | 'footer'
-> & {
-  cell?: AppColumnDefTemplate<
-    AppCellContext<TFeatures, TData, unknown, TCellComponents>
-  >
-  header?: AppColumnDefTemplate<
-    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>
-  >
-  footer?: AppColumnDefTemplate<
-    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>
-  >
-}
-
-export type AppGroupColumnDef<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = Omit<
-  GroupColumnDef<TFeatures, TData, unknown>,
-  'cell' | 'header' | 'footer' | 'columns'
-> & {
-  cell?: AppColumnDefTemplate<
-    AppCellContext<TFeatures, TData, unknown, TCellComponents>
-  >
-  header?: AppColumnDefTemplate<
-    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>
-  >
-  footer?: AppColumnDefTemplate<
-    AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>
-  >
-  columns?: Array<ColumnDef<TFeatures, TData, unknown>>
-}
-
-export type AppColumnHelper<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = {
-  accessor: <
-    TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
-    TValue extends TAccessor extends AccessorFn<TData, infer TReturn>
-      ? TReturn
-      : TAccessor extends DeepKeys<TData>
-        ? DeepValue<TData, TAccessor>
-        : never,
-  >(
-    accessor: TAccessor,
-    column: TAccessor extends AccessorFn<TData>
-      ? AppColumnDefBase<
-          TFeatures,
-          TData,
-          TValue,
-          TCellComponents,
-          THeaderComponents
-        > & { id: string }
-      : AppColumnDefBase<
-          TFeatures,
-          TData,
-          TValue,
-          TCellComponents,
-          THeaderComponents
-        >,
-  ) => TAccessor extends AccessorFn<TData>
-    ? AccessorFnColumnDef<TFeatures, TData, TValue>
-    : AccessorKeyColumnDef<TFeatures, TData, TValue>
-  columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(
-    columns: [...TColumns],
-  ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]
-  display: (
-    column: AppDisplayColumnDef<
-      TFeatures,
-      TData,
-      TCellComponents,
-      THeaderComponents
-    >,
-  ) => DisplayColumnDef<TFeatures, TData, unknown>
-  group: (
-    column: AppGroupColumnDef<
-      TFeatures,
-      TData,
-      TCellComponents,
-      THeaderComponents
-    >,
-  ) => GroupColumnDef<TFeatures, TData, unknown>
-}
-
-export type CreateTableHookOptions<
-  TFeatures extends TableFeatures,
-  TTableComponents extends Record<string, ComponentType<any>>,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = Omit<
-  TableOptionsWithReactiveData<TFeatures, any>,
-  'columns' | 'data' | 'store' | 'state' | 'initialState'
-> & {
-  tableComponents?: TTableComponents
-  cellComponents?: TCellComponents
-  headerComponents?: THeaderComponents
-}
-
-export interface AppTableProps {}
-
-export interface AppCellProps<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData = CellData,
-> {
-  cell: Cell<TFeatures, TData, TValue>
-}
-
-export interface AppHeaderProps<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TValue extends CellData = CellData,
-> {
-  header: Header<TFeatures, TData, TValue>
-}
-
-export type AppVueTable<
-  TFeatures extends TableFeatures,
-  TData extends RowData,
-  TSelected,
-  TTableComponents extends Record<string, ComponentType<any>>,
-  TCellComponents extends Record<string, ComponentType<any>>,
-  THeaderComponents extends Record<string, ComponentType<any>>,
-> = VueTable<TFeatures, TData> &
-  NoInfer<TTableComponents> & {
-    AppTable: Component<AppTableProps>
-    AppCell: Component<AppCellProps<TFeatures, TData>>
-    AppHeader: Component<AppHeaderProps<TFeatures, TData>>
-    AppFooter: Component<AppHeaderProps<TFeatures, TData>>
-    FlexRender: typeof AppFlexRender
-  }
-
-export const AppFlexRender = defineComponent({
-  name: 'TableFlexRender',
-  props: {
-    cell: {
-      type: Object as PropType<FlexRenderCell>,
-      default: undefined,
-    },
-    header: {
-      type: Object as PropType<FlexRenderHeader>,
-      default: undefined,
-    },
-    footer: {
-      type: Object as PropType<FlexRenderHeader>,
-      default: undefined,
-    },
-  },
-  setup(props) {
-    return () => {
-      if (props.cell) {
-        return h(FlexRender, {
-          render: props.cell.column.columnDef.cell,
-          props: props.cell.getContext(),
-        })
-      }
-
-      if (props.header) {
-        return h(FlexRender, {
-          render: props.header.column.columnDef.header,
-          props: props.header.getContext(),
-        })
-      }
-
-      if (props.footer) {
-        return h(FlexRender, {
-          render: props.footer.column.columnDef.footer,
-          props: props.footer.getContext(),
-        })
-      }
-
-      return null
-    }
-  },
-})
-
-/**
- * Creates app-scoped Vue table helpers with features, row models, and
- * renderable component maps pre-bound.
- *
- * Use this when an app or design system wants typed `useAppTable`, a pre-bound
- * column helper, and context helpers for table, cell, and header components.
- *
- * @example
- * ```ts
- * const { useAppTable, createAppColumnHelper } = createTableHook({
- *   features,
- *   rowModels: {},
- *   tableComponents: {},
- *   cellComponents: {},
- *   headerComponents: {},
- * })
- * ```
- */
-export function createTableHook<
-  TFeatures extends TableFeatures,
-  const TTableComponents extends Record<string, ComponentType<any>>,
-  const TCellComponents extends Record<string, ComponentType<any>>,
-  const THeaderComponents extends Record<string, ComponentType<any>>,
->({
-  tableComponents,
-  cellComponents,
-  headerComponents,
-  ...defaultTableOptions
-}: CreateTableHookOptions<
-  TFeatures,
-  TTableComponents,
-  TCellComponents,
-  THeaderComponents
->) {
-  const TableContext = Symbol('TableContext') as InjectionKey<
-    VueTable<TFeatures, any>
-  >
-  const CellContext = Symbol('CellContext') as InjectionKey<
-    Cell<TFeatures, any, any>
-  >
-  const HeaderContext = Symbol('HeaderContext') as InjectionKey<
-    Header<TFeatures, any, any>
-  >
-
-  function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<
-    TFeatures,
-    TData,
-    TCellComponents,
-    THeaderComponents
-  > {
-    return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<
-      TFeatures,
-      TData,
-      TCellComponents,
-      THeaderComponents
-    >
-  }
-
-  function useTableContext<TData extends RowData = RowData>(): VueTable<
-    TFeatures,
-    TData
-  > {
-    const table = inject(TableContext)
-
-    if (!table) {
-      throw new Error(
-        '`useTableContext` must be used within an `AppTable` component. ' +
-          'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',
-      )
-    }
-
-    return table as VueTable<TFeatures, TData>
-  }
-
-  function useCellContext<TValue extends CellData = CellData>(): Cell<
-    TFeatures,
-    any,
-    TValue
-  > {
-    const cell = inject(CellContext)
-
-    if (!cell) {
-      throw new Error(
-        '`useCellContext` must be used within an `AppCell` component. ' +
-          'Make sure your component is wrapped with `<table.AppCell :cell="cell">...</table.AppCell>`.',
-      )
-    }
-
-    return cell as Cell<TFeatures, any, TValue>
-  }
-
-  function useHeaderContext<TValue extends CellData = CellData>(): Header<
-    TFeatures,
-    any,
-    TValue
-  > {
-    const header = inject(HeaderContext)
-
-    if (!header) {
-      throw new Error(
-        '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',
-      )
-    }
-
-    return header as Header<TFeatures, any, TValue>
-  }
-
-  const CellFlexRender = defineComponent({
-    name: 'AppCellFlexRender',
-    setup() {
-      const cell = useCellContext()
-      return () => h(AppFlexRender, { cell })
-    },
-  })
-
-  const HeaderFlexRender = defineComponent({
-    name: 'AppHeaderFlexRender',
-    setup() {
-      const header = useHeaderContext()
-      return () => h(AppFlexRender, { header })
-    },
-  })
-
-  const FooterFlexRender = defineComponent({
-    name: 'AppFooterFlexRender',
-    setup() {
-      const header = useHeaderContext()
-      return () => h(AppFlexRender, { footer: header })
-    },
-  })
-
-  function useAppTable<TData extends RowData>(
-    tableOptions: Omit<
-      TableOptionsWithReactiveData<TFeatures, TData>,
-      'features' | 'rowModels'
-    >,
-  ): AppVueTable<
-    TFeatures,
-    TData,
-    TableState<TFeatures>,
-    TTableComponents,
-    TCellComponents,
-    THeaderComponents
-  > {
-    const mergedOptions = mergeProxy(
-      defaultTableOptions,
-      tableOptions,
-    ) as TableOptionsWithReactiveData<TFeatures, TData>
-
-    const table = useTable<TFeatures, TData>(mergedOptions)
-
-    const AppTable = defineComponent({
-      name: 'AppTable',
-      setup(_, { slots }) {
-        provide(TableContext, table)
-        return () => {
-          return slots.default?.()
-        }
-      },
-    })
-
-    const AppCell = defineComponent({
-      name: 'AppCell',
-      props: {
-        cell: {
-          type: Object as PropType<object>,
-          required: true,
-        },
-      },
-      setup(props, { slots }) {
-        const cell = props.cell as Cell<TFeatures, TData, any>
-
-        provide(CellContext, cell)
-
-        const extendedCell = Object.assign(cell, {
-          FlexRender: CellFlexRender,
-          ...(cellComponents ?? {}),
-        }) as Cell<TFeatures, TData, any> &
-          TCellComponents & { FlexRender: Component }
-
-        return () => {
-          return slots.default?.({ cell: extendedCell })
-        }
-      },
-    })
-
-    const AppHeader = defineComponent({
-      name: 'AppHeader',
-      props: {
-        header: {
-          type: Object as PropType<object>,
-          required: true,
-        },
-      },
-      setup(props, { slots }) {
-        const header = props.header as Header<TFeatures, TData, any>
-
-        provide(HeaderContext, header)
-
-        const extendedHeader = Object.assign(header, {
-          FlexRender: HeaderFlexRender,
-          ...(headerComponents ?? {}),
-        }) as Header<TFeatures, TData, any> &
-          THeaderComponents & { FlexRender: Component }
-
-        return () => {
-          return slots.default?.({ header: extendedHeader })
-        }
-      },
-    })
-
-    const AppFooter = defineComponent({
-      name: 'AppFooter',
-      props: {
-        header: {
-          type: Object as PropType<object>,
-          required: true,
-        },
-      },
-      setup(props, { slots }) {
-        const header = props.header as Header<TFeatures, TData, any>
-
-        provide(HeaderContext, header)
-
-        const extendedHeader = Object.assign(header, {
-          FlexRender: FooterFlexRender,
-          ...(headerComponents ?? {}),
-        }) as Header<TFeatures, TData, any> &
-          THeaderComponents & { FlexRender: Component }
-
-        return () => {
-          return slots.default?.({ header: extendedHeader })
-        }
-      },
-    })
-
-    return Object.assign(table, {
-      AppTable,
-      AppCell,
-      AppHeader,
-      AppFooter,
-      FlexRender: AppFlexRender,
-      ...(tableComponents ?? {}),
-    }) as AppVueTable<
-      TFeatures,
-      TData,
-      TableState<TFeatures>,
-      TTableComponents,
-      TCellComponents,
-      THeaderComponents
-    >
-  }
-
-  return {
-    appFeatures: defaultTableOptions.features as TFeatures,
-    createAppColumnHelper,
-    useAppTable,
-    useTableContext,
-    useCellContext,
-    useHeaderContext,
-  }
-}

package/src/flex-render.ts

@@ -1 +0,0 @@
-export * from './FlexRender'

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './FlexRender'
-export * from './createTableHook'
-export * from './useTable'
-export * from '@tanstack/table-core'

package/src/merge-proxy.ts

@@ -1,132 +0,0 @@
-function trueFn() {
-  return true
-}
-
-const $PROXY = Symbol('merge-proxy')
-const $SOURCES = Symbol('merge-proxy-sources')
-
-// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118
-const propTraps: ProxyHandler<{
-  get: (k: string | number | symbol) => any
-  has: (k: string | number | symbol) => boolean
-  keys: () => Array<string>
-  sources: Array<any>
-}> = {
-  get(_, property, receiver) {
-    if (property === $PROXY) return receiver
-    if (property === $SOURCES) return _.sources
-    return _.get(property)
-  },
-  has(_, property) {
-    return _.has(property)
-  },
-  set: trueFn,
-  deleteProperty: trueFn,
-  getOwnPropertyDescriptor(_, property) {
-    return {
-      configurable: true,
-      enumerable: true,
-      get() {
-        return _.get(property)
-      },
-      set: trueFn,
-      deleteProperty: trueFn,
-    }
-  },
-  ownKeys(_) {
-    return _.keys()
-  },
-}
-
-type UnboxLazy<T> = T extends () => infer U ? U : T
-type BoxedTupleTypes<T extends Array<any>> = {
-  [P in keyof T]: [UnboxLazy<T[P]>]
-}[Exclude<keyof T, keyof Array<any>>]
-type UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (
-  k: infer I,
-) => void
-  ? I
-  : never
-type UnboxIntersection<T> = T extends { 0: infer U } ? U : never
-type MergeProxy<T extends Array<any>> = UnboxIntersection<
-  UnionToIntersection<BoxedTupleTypes<T>>
->
-
-function resolveSource(s: any) {
-  return s && typeof s === 'object' && 'value' in s ? s.value : s
-}
-
-export function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>
-export function mergeProxy(...sources: any): any {
-  const flattenedSources = sources.flatMap((source: any) => {
-    if (
-      typeof source === 'object' &&
-      source !== null &&
-      $SOURCES in source &&
-      Array.isArray(source[$SOURCES])
-    ) {
-      return source[$SOURCES]
-    }
-
-    return [source]
-  })
-
-  return new Proxy(
-    {
-      sources: flattenedSources,
-      get(property: string | number | symbol) {
-        for (let i = flattenedSources.length - 1; i >= 0; i--) {
-          const v = resolveSource(flattenedSources[i])[property]
-          if (v !== undefined) return v
-        }
-      },
-      has(property: string | number | symbol) {
-        for (let i = flattenedSources.length - 1; i >= 0; i--) {
-          if (property in resolveSource(flattenedSources[i])) return true
-        }
-        return false
-      },
-      keys() {
-        const keys = []
-        for (const source of flattenedSources)
-          keys.push(...Object.keys(resolveSource(source)))
-        return [...Array.from(new Set(keys))]
-      },
-    },
-    propTraps,
-  )
-}
-
-/**
- * Merges objects together by eagerly resolving all values into a flat object.
- *
- * Unlike `mergeProxy`, this does not preserve lazy proxy getters. Use this for
- * repeated option update paths so each merge produces a plain object instead
- * of accumulating a longer source list over time.
- */
-export function flatMerge<T>(source: T): T
-export function flatMerge<T, U>(source: T, source1: U): T & U
-export function flatMerge<T, U, V>(source: T, source1: U, source2: V): T & U & V
-export function flatMerge<T, U, V, W>(
-  source: T,
-  source1: U,
-  source2: V,
-  source3: W,
-): T & U & V & W
-export function flatMerge(...sources: any): any {
-  const result: Record<PropertyKey, unknown> = {}
-
-  for (let source of sources) {
-    source = resolveSource(source)
-    if (!source) continue
-
-    for (const key of Reflect.ownKeys(source)) {
-      const value = (source as Record<PropertyKey, unknown>)[key]
-      if (value !== undefined) {
-        result[key] = value
-      }
-    }
-  }
-
-  return result
-}