BTable typing of slot parameters

[xmatthias]

Describe the bug. A clear and concise description of what the bug is.

In recent versions, typing for the "row" value of slots changed, so now row.item is of type TableItem.
That's per se correct (though it should be TableItem<T>) - but is causing some problems with typescript.

To Reproduce. Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

<template>
  <b-table
    show-empty
    primary-key="id"
    :items="tableItems"
    :fields="tableFields"
  >
    <template #cell(profitOpen)="{ item }">
      <profit-pill
        :profit-open="(item as unknown as ComparisonItem).profitOpen"
      />
    </template>
</btable>
</template>
<script setup lang="ts">
import { TableField, TableItem } from 'bootstrap-vue-next';

interface ComparisonTableItems {
  botId: string | undefined;
  botName: string;
  profitOpen: number;
  profitOpenRatio?: number;

}

const tableFields: TableField[] = [
  { key: 'botName', label: 'Bot' },
  { key: 'trades', label: 'Trades' },
  { key: 'profitOpen', label: 'Open Profit' },
  { key: 'profitClosed', label: 'Closed Profit' },
  { key: 'balance', label: 'Balance' },
  { key: 'winVsLoss', label: 'W/L' },
];

const tableItems: TableItem<ComparisonItem>   = [
{
    botId: undefined,
    botName: 'Summary',
    profitOpen: 0,
    profitOpenRatio: undefined,
    stakeCurrency: 'USDT',
    wins: 0,
    losses: 0,
  }
];

</script>

Expected behavior. A clear and concise description of what you expected to happen.

Functionality itself is working perfectly fine - but typechecking with vue-tsc fails with "unknown is not assignable to type number" (the actual type varies by prop).
The above code already contains the necessary cast ((item as unknown as ComparisonItem)) - but that's more than cumbersome - and defeats the purpose of using typescript.

Is there any way to pass the type of the items to the table - so the component (and typescript) knows that the parameter for the slot is a Tableitem<ComparisonItem> - and has the type accordingly?
TableItem itself knows about the type (TableItem<T>) - but the data comming back out doesn't.

Screenshots. If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. Windows 11, Pop!_OS] linux
• Package Version: [e.g. 0.8.12] 0.9.26
• Npm/Yarn/Pnpm Version: [e.g. [email protected], [email protected]]

Additional context. Add any other context about the problem here.

[VividLemon]

The typing didn't change in the library. What did change was Vue 3.3. In Vue 3.3 defineSlots was introduced. I'm suspecting the default transitioned from "any" to "unknown". Plans to use generics are underway

[xmatthias]

What did change was Vue 3.3. In Vue 3.3 defineSlots was introduced

i'm not sure about that if i'm honest.
I've been using vue3.3 in that project a while now - and the last dependabot update (here) (don't ask me why dependabot never proposed any of the prior updates) started to show these signs.
I've since fixed it via explicit casting (last few commits) - (waited with merging for response in this issue) - but CI for the very first commit shows it breaking (Ci was passing prior to that commit).

[VividLemon]

And during that period we updated to Vue 3.3

[makroxyz]

Could it help?

vuejs/language-tools#2758 (comment)

[xmatthias]

in theory yes - but it'd assume that the component is defined as generic component - which BTable currently isn't (

bootstrap-vue-next/packages/bootstrap-vue-next/src/components/BTable/BTable.vue

Line 81 in 6fbc7d9

<script setup lang="ts">

).

[makroxyz]

I'm in the same situation.. I can't imagine to 'cast' every single item in table slots...

I think dynamic slots in table row should be defined with defineSlots in some way...

something like that (IT DOESN'T WORK it's simply an idea):

defineSlots<{
  [K in keyof TableItem as K extends string ? `cell(${K})` : never]?: (_: {
    item: TableItem[K]
  }) => any
}>()

in your example

const tableItems: TableItem<ComparisonItem>   = [
  ...
]

should be

const tableItems: TableItem<ComparisonItem>[]   = [
  ...
]

but then BTable items prop has a VS code warning that it isn't a TableItem[] type....

[makroxyz]

I think @VividLemon is working on generics #1316
This could be a step forward since with 0.10 BTable items property has type warning (previous post)
But I think we need to define cell scopes with defineScopes...

https://dev.to/vincentdorian/vue-33-generic-types-and-when-to-use-them-5egn

[makroxyz]

@VividLemon are you working on that? Can I help you?

[VividLemon]

Though generics are possible with 3.3, they are in a buggy state which makes them near impossible to use.

[makroxyz]

Though generics are possible with 3.3, they are in a buggy state which makes them near impossible to use.

I understand... What do you suggest in the meantime? vue-sfc fails to build

[VividLemon]

You could make a PR that adds defineSlots to each of the tables without generics and just set the output to any. Just keep in mind the inheritance as things like this wont through errors afaik

[makroxyz]

@VividLemon have a look at https://github.com/Shyam-Chen/Vue-Starter/blob/main/src/components/Table.vue this seems to work