@tanstack/vue-table 9.0.0-alpha.8 → 9.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +127 -0
- package/dist/FlexRender.cjs +80 -0
- package/dist/FlexRender.cjs.map +1 -0
- package/dist/FlexRender.d.cts +45 -0
- package/dist/FlexRender.d.ts +45 -0
- package/dist/FlexRender.js +79 -0
- package/dist/FlexRender.js.map +1 -0
- package/dist/createTableHook.cjs +234 -0
- package/dist/createTableHook.cjs.map +1 -0
- package/dist/createTableHook.d.cts +138 -0
- package/dist/createTableHook.d.ts +138 -0
- package/dist/createTableHook.js +233 -0
- package/dist/createTableHook.js.map +1 -0
- package/dist/flex-render.cjs +5 -0
- package/dist/flex-render.d.cts +2 -0
- package/dist/flex-render.d.ts +2 -0
- package/dist/flex-render.js +3 -0
- package/dist/index.cjs +17 -0
- package/dist/index.d.cts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +7 -0
- package/dist/merge-proxy.cjs +77 -0
- package/dist/merge-proxy.cjs.map +1 -0
- package/dist/merge-proxy.js +75 -0
- package/dist/merge-proxy.js.map +1 -0
- package/dist/reactivity.cjs +73 -0
- package/dist/reactivity.cjs.map +1 -0
- package/dist/reactivity.js +73 -0
- package/dist/reactivity.js.map +1 -0
- package/dist/static-functions.cjs +9 -0
- package/dist/static-functions.d.cts +1 -0
- package/dist/static-functions.d.ts +1 -0
- package/dist/static-functions.js +3 -0
- package/dist/useTable.cjs +83 -0
- package/dist/useTable.cjs.map +1 -0
- package/dist/useTable.d.cts +76 -0
- package/dist/useTable.d.ts +76 -0
- package/dist/useTable.js +83 -0
- package/dist/useTable.js.map +1 -0
- package/package.json +31 -19
- package/skills/vue/client-to-server/SKILL.md +365 -0
- package/skills/vue/compose-with-tanstack-form/SKILL.md +369 -0
- package/skills/vue/compose-with-tanstack-pacer/SKILL.md +318 -0
- package/skills/vue/compose-with-tanstack-query/SKILL.md +385 -0
- package/skills/vue/compose-with-tanstack-store/SKILL.md +301 -0
- package/skills/vue/compose-with-tanstack-virtual/SKILL.md +340 -0
- package/skills/vue/getting-started/SKILL.md +409 -0
- package/skills/vue/migrate-v8-to-v9/SKILL.md +375 -0
- package/skills/vue/production-readiness/SKILL.md +271 -0
- package/skills/vue/table-state/SKILL.md +403 -0
- package/src/FlexRender.ts +123 -0
- package/src/createTableHook.ts +597 -0
- package/src/flex-render.ts +1 -0
- package/src/index.ts +3 -74
- package/src/merge-proxy.ts +66 -15
- package/src/reactivity.ts +115 -0
- package/src/static-functions.ts +1 -0
- package/src/useTable.ts +251 -0
- package/dist/cjs/index.cjs +0 -68
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/cjs/index.d.cts +0 -14
- package/dist/cjs/merge-proxy.cjs +0 -61
- package/dist/cjs/merge-proxy.cjs.map +0 -1
- package/dist/cjs/merge-proxy.d.cts +0 -11
- package/dist/esm/index.d.ts +0 -14
- package/dist/esm/index.js +0 -63
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/merge-proxy.d.ts +0 -11
- package/dist/esm/merge-proxy.js +0 -61
- package/dist/esm/merge-proxy.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createTableHook.cjs","names":["FlexRender","useTable","mergeProxy"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n AccessorFn,\n AccessorFnColumnDef,\n AccessorKeyColumnDef,\n Cell,\n CellContext,\n CellData,\n Column,\n ColumnDef,\n DeepKeys,\n DeepValue,\n DisplayColumnDef,\n GroupColumnDef,\n Header,\n IdentifiedColumnDef,\n NoInfer,\n Row,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n cell: Cell<TFeatures, TData, TValue> &\n TCellComponents & { FlexRender: Component }\n column: Column<TFeatures, TData, TValue>\n getValue: CellContext<TFeatures, TData, TValue>['getValue']\n renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n row: Row<TFeatures, TData>\n table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n column: Column<TFeatures, TData, TValue>\n header: Header<TFeatures, TData, TValue> &\n THeaderComponents & { FlexRender: Component }\n table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n | string\n | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n IdentifiedColumnDef<TFeatures, TData, TValue>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, TValue, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n}\n\nexport type AppDisplayColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n DisplayColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n}\n\nexport type AppGroupColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n GroupColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer' | 'columns'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n accessor: <\n TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n ? TReturn\n : TAccessor extends DeepKeys<TData>\n ? DeepValue<TData, TAccessor>\n : never,\n >(\n accessor: TAccessor,\n column: TAccessor extends AccessorFn<TData>\n ? AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n > & { id: string }\n : AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n >,\n ) => TAccessor extends AccessorFn<TData>\n ? AccessorFnColumnDef<TFeatures, TData, TValue>\n : AccessorKeyColumnDef<TFeatures, TData, TValue>\n columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n columns: [...TColumns],\n ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n display: (\n column: AppDisplayColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => DisplayColumnDef<TFeatures, TData, unknown>\n group: (\n column: AppGroupColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n TableOptionsWithReactiveData<TFeatures, any>,\n 'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n tableComponents?: TTableComponents\n cellComponents?: TCellComponents\n headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n TFeatures extends TableFeatures,\n TSelected = unknown,\n> {\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n cell: Cell<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n header: Header<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps<TFeatures>>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * features,\n * rowModels: {},\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\n * })\n * ```\n */\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>) {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): VueTable<\n TFeatures,\n TData\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n return table as VueTable<TFeatures, TData>\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n return cell as Cell<TFeatures, any, TValue>\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n return header as Header<TFeatures, any, TValue>\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features' | 'rowModels'\n >,\n selector?: (state: TableState<TFeatures>) => TSelected,\n ): AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const mergedOptions = mergeProxy(\n defaultTableOptions,\n tableOptions,\n ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n props: {\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n provide(TableContext, table)\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n return () => {\n if (!props.selector) {\n return slots.default?.()\n }\n\n return slots.default?.({ state: selected?.value })\n }\n },\n })\n\n const AppCell = defineComponent({\n name: 'AppCell',\n props: {\n cell: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedCell = Object.assign(cell, {\n FlexRender: CellFlexRender,\n ...(cellComponents ?? {}),\n }) as Cell<TFeatures, TData, any> &\n TCellComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { cell: extendedCell, state: selected?.value }\n : { cell: extendedCell },\n )\n }\n },\n })\n\n const AppHeader = defineComponent({\n name: 'AppHeader',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: HeaderFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n const AppFooter = defineComponent({\n name: 'AppFooter',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: FooterFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n return Object.assign(table, {\n AppTable,\n AppCell,\n AppHeader,\n AppFooter,\n FlexRender: AppFlexRender,\n ...(tableComponents ?? {}),\n }) as AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n appFeatures: defaultTableOptions.features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { TableOptionsWithReactiveData, VueTable } from "./useTable.cjs";
|
|
2
|
+
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
|
|
3
|
+
import { Component, PropType } from "vue";
|
|
4
|
+
|
|
5
|
+
//#region src/createTableHook.d.ts
|
|
6
|
+
type ComponentType<T extends Record<string, any>> = Component<T>;
|
|
7
|
+
type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
|
|
8
|
+
cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
|
|
9
|
+
FlexRender: Component;
|
|
10
|
+
};
|
|
11
|
+
column: Column<TFeatures, TData, TValue>;
|
|
12
|
+
getValue: CellContext<TFeatures, TData, TValue>['getValue'];
|
|
13
|
+
renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
|
|
14
|
+
row: Row<TFeatures, TData>;
|
|
15
|
+
table: Table<TFeatures, TData>;
|
|
16
|
+
};
|
|
17
|
+
type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
|
|
18
|
+
column: Column<TFeatures, TData, TValue>;
|
|
19
|
+
header: Header<TFeatures, TData, TValue> & THeaderComponents & {
|
|
20
|
+
FlexRender: Component;
|
|
21
|
+
};
|
|
22
|
+
table: Table<TFeatures, TData>;
|
|
23
|
+
};
|
|
24
|
+
type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
|
|
25
|
+
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'> & {
|
|
26
|
+
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
|
|
27
|
+
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
|
|
28
|
+
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
|
|
29
|
+
};
|
|
30
|
+
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'> & {
|
|
31
|
+
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
|
|
32
|
+
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
33
|
+
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
34
|
+
};
|
|
35
|
+
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'> & {
|
|
36
|
+
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
|
|
37
|
+
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
38
|
+
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
39
|
+
columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
|
|
40
|
+
};
|
|
41
|
+
type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
|
|
42
|
+
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> & {
|
|
43
|
+
id: string;
|
|
44
|
+
} : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
|
|
45
|
+
columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
|
|
46
|
+
display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
|
|
47
|
+
group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
|
|
48
|
+
};
|
|
49
|
+
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'> & {
|
|
50
|
+
tableComponents?: TTableComponents;
|
|
51
|
+
cellComponents?: TCellComponents;
|
|
52
|
+
headerComponents?: THeaderComponents;
|
|
53
|
+
};
|
|
54
|
+
interface AppTableProps<TFeatures extends TableFeatures, TSelected = unknown> {
|
|
55
|
+
selector?: (state: TableState<TFeatures>) => TSelected;
|
|
56
|
+
}
|
|
57
|
+
interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData, TSelected = unknown> {
|
|
58
|
+
cell: Cell<TFeatures, TData, TValue>;
|
|
59
|
+
selector?: (state: TableState<TFeatures>) => TSelected;
|
|
60
|
+
}
|
|
61
|
+
interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData, TSelected = unknown> {
|
|
62
|
+
header: Header<TFeatures, TData, TValue>;
|
|
63
|
+
selector?: (state: TableState<TFeatures>) => TSelected;
|
|
64
|
+
}
|
|
65
|
+
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, TSelected> & NoInfer<TTableComponents> & {
|
|
66
|
+
AppTable: Component<AppTableProps<TFeatures>>;
|
|
67
|
+
AppCell: Component<AppCellProps<TFeatures, TData>>;
|
|
68
|
+
AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
|
|
69
|
+
AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
|
|
70
|
+
FlexRender: typeof AppFlexRender;
|
|
71
|
+
};
|
|
72
|
+
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
73
|
+
cell: {
|
|
74
|
+
type: PropType<Cell<any, any, any>>;
|
|
75
|
+
default: undefined;
|
|
76
|
+
};
|
|
77
|
+
header: {
|
|
78
|
+
type: PropType<Header<any, any, any>>;
|
|
79
|
+
default: undefined;
|
|
80
|
+
};
|
|
81
|
+
footer: {
|
|
82
|
+
type: PropType<Header<any, any, any>>;
|
|
83
|
+
default: undefined;
|
|
84
|
+
};
|
|
85
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
86
|
+
[key: string]: any;
|
|
87
|
+
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
88
|
+
cell: {
|
|
89
|
+
type: PropType<Cell<any, any, any>>;
|
|
90
|
+
default: undefined;
|
|
91
|
+
};
|
|
92
|
+
header: {
|
|
93
|
+
type: PropType<Header<any, any, any>>;
|
|
94
|
+
default: undefined;
|
|
95
|
+
};
|
|
96
|
+
footer: {
|
|
97
|
+
type: PropType<Header<any, any, any>>;
|
|
98
|
+
default: undefined;
|
|
99
|
+
};
|
|
100
|
+
}>> & Readonly<{}>, {
|
|
101
|
+
cell: any;
|
|
102
|
+
header: any;
|
|
103
|
+
footer: any;
|
|
104
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
105
|
+
/**
|
|
106
|
+
* Creates app-scoped Vue table helpers with features, row models, and
|
|
107
|
+
* renderable component maps pre-bound.
|
|
108
|
+
*
|
|
109
|
+
* Use this when an app or design system wants typed `useAppTable`, a pre-bound
|
|
110
|
+
* column helper, and context helpers for table, cell, and header components.
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```ts
|
|
114
|
+
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
115
|
+
* features,
|
|
116
|
+
* rowModels: {},
|
|
117
|
+
* tableComponents: {},
|
|
118
|
+
* cellComponents: {},
|
|
119
|
+
* headerComponents: {},
|
|
120
|
+
* })
|
|
121
|
+
* ```
|
|
122
|
+
*/
|
|
123
|
+
declare 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>>>({
|
|
124
|
+
tableComponents,
|
|
125
|
+
cellComponents,
|
|
126
|
+
headerComponents,
|
|
127
|
+
...defaultTableOptions
|
|
128
|
+
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
|
|
129
|
+
appFeatures: TFeatures;
|
|
130
|
+
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
131
|
+
useAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features" | "rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppVueTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
|
|
132
|
+
useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
|
|
133
|
+
useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
|
|
134
|
+
useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
|
|
135
|
+
};
|
|
136
|
+
//#endregion
|
|
137
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
|
|
138
|
+
//# sourceMappingURL=createTableHook.d.cts.map
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { TableOptionsWithReactiveData, VueTable } from "./useTable.js";
|
|
2
|
+
import { Component, PropType } from "vue";
|
|
3
|
+
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableState } from "@tanstack/table-core";
|
|
4
|
+
|
|
5
|
+
//#region src/createTableHook.d.ts
|
|
6
|
+
type ComponentType<T extends Record<string, any>> = Component<T>;
|
|
7
|
+
type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
|
|
8
|
+
cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
|
|
9
|
+
FlexRender: Component;
|
|
10
|
+
};
|
|
11
|
+
column: Column<TFeatures, TData, TValue>;
|
|
12
|
+
getValue: CellContext<TFeatures, TData, TValue>['getValue'];
|
|
13
|
+
renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
|
|
14
|
+
row: Row<TFeatures, TData>;
|
|
15
|
+
table: Table<TFeatures, TData>;
|
|
16
|
+
};
|
|
17
|
+
type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
|
|
18
|
+
column: Column<TFeatures, TData, TValue>;
|
|
19
|
+
header: Header<TFeatures, TData, TValue> & THeaderComponents & {
|
|
20
|
+
FlexRender: Component;
|
|
21
|
+
};
|
|
22
|
+
table: Table<TFeatures, TData>;
|
|
23
|
+
};
|
|
24
|
+
type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
|
|
25
|
+
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'> & {
|
|
26
|
+
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
|
|
27
|
+
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
|
|
28
|
+
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
|
|
29
|
+
};
|
|
30
|
+
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'> & {
|
|
31
|
+
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
|
|
32
|
+
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
33
|
+
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
34
|
+
};
|
|
35
|
+
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'> & {
|
|
36
|
+
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
|
|
37
|
+
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
38
|
+
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
39
|
+
columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
|
|
40
|
+
};
|
|
41
|
+
type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
|
|
42
|
+
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> & {
|
|
43
|
+
id: string;
|
|
44
|
+
} : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
|
|
45
|
+
columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
|
|
46
|
+
display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
|
|
47
|
+
group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
|
|
48
|
+
};
|
|
49
|
+
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'> & {
|
|
50
|
+
tableComponents?: TTableComponents;
|
|
51
|
+
cellComponents?: TCellComponents;
|
|
52
|
+
headerComponents?: THeaderComponents;
|
|
53
|
+
};
|
|
54
|
+
interface AppTableProps<TFeatures extends TableFeatures, TSelected = unknown> {
|
|
55
|
+
selector?: (state: TableState<TFeatures>) => TSelected;
|
|
56
|
+
}
|
|
57
|
+
interface AppCellProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData, TSelected = unknown> {
|
|
58
|
+
cell: Cell<TFeatures, TData, TValue>;
|
|
59
|
+
selector?: (state: TableState<TFeatures>) => TSelected;
|
|
60
|
+
}
|
|
61
|
+
interface AppHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData, TSelected = unknown> {
|
|
62
|
+
header: Header<TFeatures, TData, TValue>;
|
|
63
|
+
selector?: (state: TableState<TFeatures>) => TSelected;
|
|
64
|
+
}
|
|
65
|
+
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, TSelected> & NoInfer<TTableComponents> & {
|
|
66
|
+
AppTable: Component<AppTableProps<TFeatures>>;
|
|
67
|
+
AppCell: Component<AppCellProps<TFeatures, TData>>;
|
|
68
|
+
AppHeader: Component<AppHeaderProps<TFeatures, TData>>;
|
|
69
|
+
AppFooter: Component<AppHeaderProps<TFeatures, TData>>;
|
|
70
|
+
FlexRender: typeof AppFlexRender;
|
|
71
|
+
};
|
|
72
|
+
declare const AppFlexRender: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
73
|
+
cell: {
|
|
74
|
+
type: PropType<Cell<any, any, any>>;
|
|
75
|
+
default: undefined;
|
|
76
|
+
};
|
|
77
|
+
header: {
|
|
78
|
+
type: PropType<Header<any, any, any>>;
|
|
79
|
+
default: undefined;
|
|
80
|
+
};
|
|
81
|
+
footer: {
|
|
82
|
+
type: PropType<Header<any, any, any>>;
|
|
83
|
+
default: undefined;
|
|
84
|
+
};
|
|
85
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
86
|
+
[key: string]: any;
|
|
87
|
+
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
88
|
+
cell: {
|
|
89
|
+
type: PropType<Cell<any, any, any>>;
|
|
90
|
+
default: undefined;
|
|
91
|
+
};
|
|
92
|
+
header: {
|
|
93
|
+
type: PropType<Header<any, any, any>>;
|
|
94
|
+
default: undefined;
|
|
95
|
+
};
|
|
96
|
+
footer: {
|
|
97
|
+
type: PropType<Header<any, any, any>>;
|
|
98
|
+
default: undefined;
|
|
99
|
+
};
|
|
100
|
+
}>> & Readonly<{}>, {
|
|
101
|
+
cell: any;
|
|
102
|
+
header: any;
|
|
103
|
+
footer: any;
|
|
104
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
105
|
+
/**
|
|
106
|
+
* Creates app-scoped Vue table helpers with features, row models, and
|
|
107
|
+
* renderable component maps pre-bound.
|
|
108
|
+
*
|
|
109
|
+
* Use this when an app or design system wants typed `useAppTable`, a pre-bound
|
|
110
|
+
* column helper, and context helpers for table, cell, and header components.
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```ts
|
|
114
|
+
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
115
|
+
* features,
|
|
116
|
+
* rowModels: {},
|
|
117
|
+
* tableComponents: {},
|
|
118
|
+
* cellComponents: {},
|
|
119
|
+
* headerComponents: {},
|
|
120
|
+
* })
|
|
121
|
+
* ```
|
|
122
|
+
*/
|
|
123
|
+
declare 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>>>({
|
|
124
|
+
tableComponents,
|
|
125
|
+
cellComponents,
|
|
126
|
+
headerComponents,
|
|
127
|
+
...defaultTableOptions
|
|
128
|
+
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
|
|
129
|
+
appFeatures: TFeatures;
|
|
130
|
+
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
131
|
+
useAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptionsWithReactiveData<TFeatures, TData>, "features" | "rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppVueTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
|
|
132
|
+
useTableContext: <TData extends RowData = RowData>() => VueTable<TFeatures, TData>;
|
|
133
|
+
useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
|
|
134
|
+
useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
|
|
135
|
+
};
|
|
136
|
+
//#endregion
|
|
137
|
+
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, createTableHook };
|
|
138
|
+
//# sourceMappingURL=createTableHook.d.ts.map
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import { FlexRender } from "./FlexRender.js";
|
|
2
|
+
import { mergeProxy } from "./merge-proxy.js";
|
|
3
|
+
import { useTable } from "./useTable.js";
|
|
4
|
+
import { defineComponent, h, inject, provide } from "vue";
|
|
5
|
+
import { createColumnHelper } from "@tanstack/table-core";
|
|
6
|
+
import { useSelector } from "@tanstack/vue-store";
|
|
7
|
+
|
|
8
|
+
//#region src/createTableHook.ts
|
|
9
|
+
const AppFlexRender = defineComponent({
|
|
10
|
+
name: "TableFlexRender",
|
|
11
|
+
props: {
|
|
12
|
+
cell: {
|
|
13
|
+
type: Object,
|
|
14
|
+
default: void 0
|
|
15
|
+
},
|
|
16
|
+
header: {
|
|
17
|
+
type: Object,
|
|
18
|
+
default: void 0
|
|
19
|
+
},
|
|
20
|
+
footer: {
|
|
21
|
+
type: Object,
|
|
22
|
+
default: void 0
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
setup(props) {
|
|
26
|
+
return () => {
|
|
27
|
+
if (props.cell) return h(FlexRender, {
|
|
28
|
+
render: props.cell.column.columnDef.cell,
|
|
29
|
+
props: props.cell.getContext()
|
|
30
|
+
});
|
|
31
|
+
if (props.header) return h(FlexRender, {
|
|
32
|
+
render: props.header.column.columnDef.header,
|
|
33
|
+
props: props.header.getContext()
|
|
34
|
+
});
|
|
35
|
+
if (props.footer) return h(FlexRender, {
|
|
36
|
+
render: props.footer.column.columnDef.footer,
|
|
37
|
+
props: props.footer.getContext()
|
|
38
|
+
});
|
|
39
|
+
return null;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
/**
|
|
44
|
+
* Creates app-scoped Vue table helpers with features, row models, and
|
|
45
|
+
* renderable component maps pre-bound.
|
|
46
|
+
*
|
|
47
|
+
* Use this when an app or design system wants typed `useAppTable`, a pre-bound
|
|
48
|
+
* column helper, and context helpers for table, cell, and header components.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* ```ts
|
|
52
|
+
* const { useAppTable, createAppColumnHelper } = createTableHook({
|
|
53
|
+
* features,
|
|
54
|
+
* rowModels: {},
|
|
55
|
+
* tableComponents: {},
|
|
56
|
+
* cellComponents: {},
|
|
57
|
+
* headerComponents: {},
|
|
58
|
+
* })
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
|
|
62
|
+
const TableContext = Symbol("TableContext");
|
|
63
|
+
const CellContext = Symbol("CellContext");
|
|
64
|
+
const HeaderContext = Symbol("HeaderContext");
|
|
65
|
+
function createAppColumnHelper() {
|
|
66
|
+
return createColumnHelper();
|
|
67
|
+
}
|
|
68
|
+
function useTableContext() {
|
|
69
|
+
const table = inject(TableContext);
|
|
70
|
+
if (!table) throw new Error("`useTableContext` must be used within an `AppTable` component. Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.");
|
|
71
|
+
return table;
|
|
72
|
+
}
|
|
73
|
+
function useCellContext() {
|
|
74
|
+
const cell = inject(CellContext);
|
|
75
|
+
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>`.");
|
|
76
|
+
return cell;
|
|
77
|
+
}
|
|
78
|
+
function useHeaderContext() {
|
|
79
|
+
const header = inject(HeaderContext);
|
|
80
|
+
if (!header) throw new Error("`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.");
|
|
81
|
+
return header;
|
|
82
|
+
}
|
|
83
|
+
const CellFlexRender = defineComponent({
|
|
84
|
+
name: "AppCellFlexRender",
|
|
85
|
+
setup() {
|
|
86
|
+
const cell = useCellContext();
|
|
87
|
+
return () => h(AppFlexRender, { cell });
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
const HeaderFlexRender = defineComponent({
|
|
91
|
+
name: "AppHeaderFlexRender",
|
|
92
|
+
setup() {
|
|
93
|
+
const header = useHeaderContext();
|
|
94
|
+
return () => h(AppFlexRender, { header });
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
const FooterFlexRender = defineComponent({
|
|
98
|
+
name: "AppFooterFlexRender",
|
|
99
|
+
setup() {
|
|
100
|
+
const header = useHeaderContext();
|
|
101
|
+
return () => h(AppFlexRender, { footer: header });
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
function useAppTable(tableOptions, selector) {
|
|
105
|
+
const table = useTable(mergeProxy(defaultTableOptions, tableOptions), selector);
|
|
106
|
+
const AppTable = defineComponent({
|
|
107
|
+
name: "AppTable",
|
|
108
|
+
props: { selector: {
|
|
109
|
+
type: Function,
|
|
110
|
+
default: void 0
|
|
111
|
+
} },
|
|
112
|
+
setup(props, { slots }) {
|
|
113
|
+
provide(TableContext, table);
|
|
114
|
+
const selected = props.selector ? useSelector(table.store, props.selector) : void 0;
|
|
115
|
+
return () => {
|
|
116
|
+
var _slots$default2;
|
|
117
|
+
if (!props.selector) {
|
|
118
|
+
var _slots$default;
|
|
119
|
+
return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
|
|
120
|
+
}
|
|
121
|
+
return (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots, { state: selected === null || selected === void 0 ? void 0 : selected.value });
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
const AppCell = defineComponent({
|
|
126
|
+
name: "AppCell",
|
|
127
|
+
props: {
|
|
128
|
+
cell: {
|
|
129
|
+
type: Object,
|
|
130
|
+
required: true
|
|
131
|
+
},
|
|
132
|
+
selector: {
|
|
133
|
+
type: Function,
|
|
134
|
+
default: void 0
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
setup(props, { slots }) {
|
|
138
|
+
const cell = props.cell;
|
|
139
|
+
provide(CellContext, cell);
|
|
140
|
+
const selected = props.selector ? useSelector(table.store, props.selector) : void 0;
|
|
141
|
+
const extendedCell = Object.assign(cell, {
|
|
142
|
+
FlexRender: CellFlexRender,
|
|
143
|
+
...cellComponents ?? {}
|
|
144
|
+
});
|
|
145
|
+
return () => {
|
|
146
|
+
var _slots$default3;
|
|
147
|
+
return (_slots$default3 = slots.default) === null || _slots$default3 === void 0 ? void 0 : _slots$default3.call(slots, props.selector ? {
|
|
148
|
+
cell: extendedCell,
|
|
149
|
+
state: selected === null || selected === void 0 ? void 0 : selected.value
|
|
150
|
+
} : { cell: extendedCell });
|
|
151
|
+
};
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
const AppHeader = defineComponent({
|
|
155
|
+
name: "AppHeader",
|
|
156
|
+
props: {
|
|
157
|
+
header: {
|
|
158
|
+
type: Object,
|
|
159
|
+
required: true
|
|
160
|
+
},
|
|
161
|
+
selector: {
|
|
162
|
+
type: Function,
|
|
163
|
+
default: void 0
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
setup(props, { slots }) {
|
|
167
|
+
const header = props.header;
|
|
168
|
+
provide(HeaderContext, header);
|
|
169
|
+
const selected = props.selector ? useSelector(table.store, props.selector) : void 0;
|
|
170
|
+
const extendedHeader = Object.assign(header, {
|
|
171
|
+
FlexRender: HeaderFlexRender,
|
|
172
|
+
...headerComponents ?? {}
|
|
173
|
+
});
|
|
174
|
+
return () => {
|
|
175
|
+
var _slots$default4;
|
|
176
|
+
return (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots, props.selector ? {
|
|
177
|
+
header: extendedHeader,
|
|
178
|
+
state: selected === null || selected === void 0 ? void 0 : selected.value
|
|
179
|
+
} : { header: extendedHeader });
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
const AppFooter = defineComponent({
|
|
184
|
+
name: "AppFooter",
|
|
185
|
+
props: {
|
|
186
|
+
header: {
|
|
187
|
+
type: Object,
|
|
188
|
+
required: true
|
|
189
|
+
},
|
|
190
|
+
selector: {
|
|
191
|
+
type: Function,
|
|
192
|
+
default: void 0
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
setup(props, { slots }) {
|
|
196
|
+
const header = props.header;
|
|
197
|
+
provide(HeaderContext, header);
|
|
198
|
+
const selected = props.selector ? useSelector(table.store, props.selector) : void 0;
|
|
199
|
+
const extendedHeader = Object.assign(header, {
|
|
200
|
+
FlexRender: FooterFlexRender,
|
|
201
|
+
...headerComponents ?? {}
|
|
202
|
+
});
|
|
203
|
+
return () => {
|
|
204
|
+
var _slots$default5;
|
|
205
|
+
return (_slots$default5 = slots.default) === null || _slots$default5 === void 0 ? void 0 : _slots$default5.call(slots, props.selector ? {
|
|
206
|
+
header: extendedHeader,
|
|
207
|
+
state: selected === null || selected === void 0 ? void 0 : selected.value
|
|
208
|
+
} : { header: extendedHeader });
|
|
209
|
+
};
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
return Object.assign(table, {
|
|
213
|
+
AppTable,
|
|
214
|
+
AppCell,
|
|
215
|
+
AppHeader,
|
|
216
|
+
AppFooter,
|
|
217
|
+
FlexRender: AppFlexRender,
|
|
218
|
+
...tableComponents ?? {}
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
return {
|
|
222
|
+
appFeatures: defaultTableOptions.features,
|
|
223
|
+
createAppColumnHelper,
|
|
224
|
+
useAppTable,
|
|
225
|
+
useTableContext,
|
|
226
|
+
useCellContext,
|
|
227
|
+
useHeaderContext
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
//#endregion
|
|
232
|
+
export { AppFlexRender, createTableHook };
|
|
233
|
+
//# sourceMappingURL=createTableHook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createTableHook.js","names":["coreCreateColumnHelper"],"sources":["../src/createTableHook.ts"],"sourcesContent":["import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { defineComponent, h, inject, provide } from 'vue'\nimport { FlexRender } from './FlexRender'\nimport { mergeProxy } from './merge-proxy'\nimport { useTable } from './useTable'\nimport type { TableOptionsWithReactiveData, VueTable } from './useTable'\nimport type { Component, InjectionKey, PropType, VNodeChild } from 'vue'\nimport type {\n AccessorFn,\n AccessorFnColumnDef,\n AccessorKeyColumnDef,\n Cell,\n CellContext,\n CellData,\n Column,\n ColumnDef,\n DeepKeys,\n DeepValue,\n DisplayColumnDef,\n GroupColumnDef,\n Header,\n IdentifiedColumnDef,\n NoInfer,\n Row,\n RowData,\n Table,\n TableFeatures,\n TableState,\n} from '@tanstack/table-core'\n\nexport type ComponentType<T extends Record<string, any>> = Component<T>\n\nexport type AppCellContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n> = {\n cell: Cell<TFeatures, TData, TValue> &\n TCellComponents & { FlexRender: Component }\n column: Column<TFeatures, TData, TValue>\n getValue: CellContext<TFeatures, TData, TValue>['getValue']\n renderValue: CellContext<TFeatures, TData, TValue>['renderValue']\n row: Row<TFeatures, TData>\n table: Table<TFeatures, TData>\n}\n\nexport type AppHeaderContext<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n column: Column<TFeatures, TData, TValue>\n header: Header<TFeatures, TData, TValue> &\n THeaderComponents & { FlexRender: Component }\n table: Table<TFeatures, TData>\n}\n\nexport type AppColumnDefTemplate<TProps extends object> =\n | string\n | ((props: TProps) => any)\n\nexport type AppColumnDefBase<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n IdentifiedColumnDef<TFeatures, TData, TValue>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, TValue, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>\n >\n}\n\nexport type AppDisplayColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n DisplayColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n}\n\nexport type AppGroupColumnDef<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n GroupColumnDef<TFeatures, TData, unknown>,\n 'cell' | 'header' | 'footer' | 'columns'\n> & {\n cell?: AppColumnDefTemplate<\n AppCellContext<TFeatures, TData, unknown, TCellComponents>\n >\n header?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n footer?: AppColumnDefTemplate<\n AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>\n >\n columns?: Array<ColumnDef<TFeatures, TData, unknown>>\n}\n\nexport type AppColumnHelper<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = {\n accessor: <\n TAccessor extends AccessorFn<TData> | DeepKeys<TData>,\n TValue extends TAccessor extends AccessorFn<TData, infer TReturn>\n ? TReturn\n : TAccessor extends DeepKeys<TData>\n ? DeepValue<TData, TAccessor>\n : never,\n >(\n accessor: TAccessor,\n column: TAccessor extends AccessorFn<TData>\n ? AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n > & { id: string }\n : AppColumnDefBase<\n TFeatures,\n TData,\n TValue,\n TCellComponents,\n THeaderComponents\n >,\n ) => TAccessor extends AccessorFn<TData>\n ? AccessorFnColumnDef<TFeatures, TData, TValue>\n : AccessorKeyColumnDef<TFeatures, TData, TValue>\n columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(\n columns: [...TColumns],\n ) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns]\n display: (\n column: AppDisplayColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => DisplayColumnDef<TFeatures, TData, unknown>\n group: (\n column: AppGroupColumnDef<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >,\n ) => GroupColumnDef<TFeatures, TData, unknown>\n}\n\nexport type CreateTableHookOptions<\n TFeatures extends TableFeatures,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = Omit<\n TableOptionsWithReactiveData<TFeatures, any>,\n 'columns' | 'data' | 'store' | 'state' | 'initialState'\n> & {\n tableComponents?: TTableComponents\n cellComponents?: TCellComponents\n headerComponents?: THeaderComponents\n}\n\nexport interface AppTableProps<\n TFeatures extends TableFeatures,\n TSelected = unknown,\n> {\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppCellProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n cell: Cell<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport interface AppHeaderProps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TValue extends CellData = CellData,\n TSelected = unknown,\n> {\n header: Header<TFeatures, TData, TValue>\n selector?: (state: TableState<TFeatures>) => TSelected\n}\n\nexport type AppVueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected,\n TTableComponents extends Record<string, ComponentType<any>>,\n TCellComponents extends Record<string, ComponentType<any>>,\n THeaderComponents extends Record<string, ComponentType<any>>,\n> = VueTable<TFeatures, TData, TSelected> &\n NoInfer<TTableComponents> & {\n AppTable: Component<AppTableProps<TFeatures>>\n AppCell: Component<AppCellProps<TFeatures, TData>>\n AppHeader: Component<AppHeaderProps<TFeatures, TData>>\n AppFooter: Component<AppHeaderProps<TFeatures, TData>>\n FlexRender: typeof AppFlexRender\n }\n\nexport const AppFlexRender = defineComponent({\n name: 'TableFlexRender',\n props: {\n cell: {\n type: Object as PropType<Cell<any, any, any>>,\n default: undefined,\n },\n header: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n footer: {\n type: Object as PropType<Header<any, any, any>>,\n default: undefined,\n },\n },\n setup(props) {\n return () => {\n if (props.cell) {\n return h(FlexRender, {\n render: props.cell.column.columnDef.cell,\n props: props.cell.getContext(),\n })\n }\n\n if (props.header) {\n return h(FlexRender, {\n render: props.header.column.columnDef.header,\n props: props.header.getContext(),\n })\n }\n\n if (props.footer) {\n return h(FlexRender, {\n render: props.footer.column.columnDef.footer,\n props: props.footer.getContext(),\n })\n }\n\n return null\n }\n },\n})\n\n/**\n * Creates app-scoped Vue table helpers with features, row models, and\n * renderable component maps pre-bound.\n *\n * Use this when an app or design system wants typed `useAppTable`, a pre-bound\n * column helper, and context helpers for table, cell, and header components.\n *\n * @example\n * ```ts\n * const { useAppTable, createAppColumnHelper } = createTableHook({\n * features,\n * rowModels: {},\n * tableComponents: {},\n * cellComponents: {},\n * headerComponents: {},\n * })\n * ```\n */\nexport function createTableHook<\n TFeatures extends TableFeatures,\n const TTableComponents extends Record<string, ComponentType<any>>,\n const TCellComponents extends Record<string, ComponentType<any>>,\n const THeaderComponents extends Record<string, ComponentType<any>>,\n>({\n tableComponents,\n cellComponents,\n headerComponents,\n ...defaultTableOptions\n}: CreateTableHookOptions<\n TFeatures,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n>) {\n const TableContext = Symbol('TableContext') as InjectionKey<\n VueTable<TFeatures, any, any>\n >\n const CellContext = Symbol('CellContext') as InjectionKey<\n Cell<TFeatures, any, any>\n >\n const HeaderContext = Symbol('HeaderContext') as InjectionKey<\n Header<TFeatures, any, any>\n >\n\n function createAppColumnHelper<TData extends RowData>(): AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n > {\n return coreCreateColumnHelper<TFeatures, TData>() as AppColumnHelper<\n TFeatures,\n TData,\n TCellComponents,\n THeaderComponents\n >\n }\n\n function useTableContext<TData extends RowData = RowData>(): VueTable<\n TFeatures,\n TData\n > {\n const table = inject(TableContext)\n\n if (!table) {\n throw new Error(\n '`useTableContext` must be used within an `AppTable` component. ' +\n 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.',\n )\n }\n\n return table as VueTable<TFeatures, TData>\n }\n\n function useCellContext<TValue extends CellData = CellData>(): Cell<\n TFeatures,\n any,\n TValue\n > {\n const cell = inject(CellContext)\n\n if (!cell) {\n throw new Error(\n '`useCellContext` must be used within an `AppCell` component. ' +\n 'Make sure your component is wrapped with `<table.AppCell :cell=\"cell\">...</table.AppCell>`.',\n )\n }\n\n return cell as Cell<TFeatures, any, TValue>\n }\n\n function useHeaderContext<TValue extends CellData = CellData>(): Header<\n TFeatures,\n any,\n TValue\n > {\n const header = inject(HeaderContext)\n\n if (!header) {\n throw new Error(\n '`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.',\n )\n }\n\n return header as Header<TFeatures, any, TValue>\n }\n\n const CellFlexRender = defineComponent({\n name: 'AppCellFlexRender',\n setup() {\n const cell = useCellContext()\n return () => h(AppFlexRender, { cell })\n },\n })\n\n const HeaderFlexRender = defineComponent({\n name: 'AppHeaderFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { header })\n },\n })\n\n const FooterFlexRender = defineComponent({\n name: 'AppFooterFlexRender',\n setup() {\n const header = useHeaderContext()\n return () => h(AppFlexRender, { footer: header })\n },\n })\n\n function useAppTable<\n TData extends RowData,\n TSelected = TableState<TFeatures>,\n >(\n tableOptions: Omit<\n TableOptionsWithReactiveData<TFeatures, TData>,\n 'features' | 'rowModels'\n >,\n selector?: (state: TableState<TFeatures>) => TSelected,\n ): AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n > {\n const mergedOptions = mergeProxy(\n defaultTableOptions,\n tableOptions,\n ) as TableOptionsWithReactiveData<TFeatures, TData>\n\n const table = useTable<TFeatures, TData, TSelected>(mergedOptions, selector)\n\n const AppTable = defineComponent({\n name: 'AppTable',\n props: {\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n provide(TableContext, table)\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n return () => {\n if (!props.selector) {\n return slots.default?.()\n }\n\n return slots.default?.({ state: selected?.value })\n }\n },\n })\n\n const AppCell = defineComponent({\n name: 'AppCell',\n props: {\n cell: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const cell = props.cell as Cell<TFeatures, TData, any>\n\n provide(CellContext, cell)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedCell = Object.assign(cell, {\n FlexRender: CellFlexRender,\n ...(cellComponents ?? {}),\n }) as Cell<TFeatures, TData, any> &\n TCellComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { cell: extendedCell, state: selected?.value }\n : { cell: extendedCell },\n )\n }\n },\n })\n\n const AppHeader = defineComponent({\n name: 'AppHeader',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: HeaderFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n const AppFooter = defineComponent({\n name: 'AppFooter',\n props: {\n header: {\n type: Object as PropType<object>,\n required: true,\n },\n selector: {\n type: Function as PropType<(state: TableState<TFeatures>) => unknown>,\n default: undefined,\n },\n },\n setup(props, { slots }) {\n const header = props.header as Header<TFeatures, TData, any>\n\n provide(HeaderContext, header)\n\n const selected = props.selector\n ? useSelector(table.store, props.selector)\n : undefined\n\n const extendedHeader = Object.assign(header, {\n FlexRender: FooterFlexRender,\n ...(headerComponents ?? {}),\n }) as Header<TFeatures, TData, any> &\n THeaderComponents & { FlexRender: Component }\n\n return () => {\n return slots.default?.(\n props.selector\n ? { header: extendedHeader, state: selected?.value }\n : { header: extendedHeader },\n )\n }\n },\n })\n\n return Object.assign(table, {\n AppTable,\n AppCell,\n AppHeader,\n AppFooter,\n FlexRender: AppFlexRender,\n ...(tableComponents ?? {}),\n }) as AppVueTable<\n TFeatures,\n TData,\n TSelected,\n TTableComponents,\n TCellComponents,\n THeaderComponents\n >\n }\n\n return {\n appFeatures: defaultTableOptions.features as TFeatures,\n createAppColumnHelper,\n useAppTable,\n useTableContext,\n useCellContext,\n useHeaderContext,\n }\n}\n"],"mappings":"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"}
|