Open websitevirtuoso opened 1 year ago
@websitevirtuoso I agree this should be done, i did find a workaround for now though:
import { VDataTable } from 'vuetify/lib/labs/components'
export type VDataTableHeaderProps = Extract<
VDataTable['$props']['headers'][number],
DataTableHeader[]
>[number]
I do get a somewhat misleading typescript error for unresolved type on DataTableHeader but it does in fact still work.
This is very specifically about Labs, right? There is currently nothing to export anything other than the components.
Edit: I see the Anchor
issue. Looks like this issue is being purposed for all of Vuetify
I have no idea about all types. Because I used only types from datatable. I had to copy this types into my own code and use them with "todo commend". I hope that they will create index.d.ts for us with exported types and interfaces
@joel-wenzel a simpler variant with no typescript error
import { VDataTable } from 'vuetify/labs/VDataTable';
export type VDataTableHeaderProps = Extract<VDataTable['$props']['headers'][number], {key: string}>
waiting...
@joel-wenzelболее простой вариант без ошибок машинописного текста
import { VDataTable } from 'vuetify/labs/VDataTable'; export type VDataTableHeaderProps = Extract<VDataTable['$props']['headers'][number], {key: string}>
very sad situation vuetify: 3.3.6 typescript: 5.1.6 vue-tsc: 1.8.3
error TS2537: Type 'DeepReadonly<DataTableHeader[] | DataTableHeader[][]> | undefined' has no matching index signature for type 'number'.
export type VDataTableHeaderProps = Extract<VDataTable["$props"]["headers"][number], { key: string }>;
@nowaysgit
export type VDataTableHeaderProps = Extract<Extract<VDataTable["$props"]["headers"], Readonly<Array>>[number], {key: string}>
See the following for references and examples:
This is what I would like to be able to do but currently cannot.
<script setup lang="ts">
import { VCard, type VCardProps } from "vuetify/components/VCard";
interface Props extends VCardProps {
foo: string;
}
const props = defineProps<Props>();
</script>
<template>
<VCard v-bind="props" />
</template>
Yes I can confirm that rignt now is much better with exports types and interfaces.
For example: my code before:
import { DataTableHeader } from '@/types/vuetify'
const headers: DataTableHeader[] = [
{ title: '#', key: 'id', sortable: false },
{ title: t('messages.name'), key: 'name', sortable: false },
{ title: t('messages.description'), key: 'description', sortable: false },
]
if (can('update', 'listing_term')) {
headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}
my file @/types/vuetify with all duplicated types from vuetify code after refactoring vuetify and using their types
import { VDataTableColumn } from 'vuetify/lib/labs/VDataTable/VDataTableColumn'
const headers: VDataTableColumn[] = [
{ title: '#', key: 'id', sortable: false },
{ title: t('messages.name'), key: 'name', sortable: false },
{ title: t('messages.description'), key: 'description', sortable: false },
]
if (can('update', 'listing_term')) {
headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}
So can I close this issue?
@websitevirtuoso I don't think so. It seems like the team has expanded the scope of this issue such that it's be come a META issue.
Workaround tested in ts 5.1 but should work in some older versions: import type { VDataTable } from "vuetify/labs/VDataTable"; // For array props type VDataTableHeader = Exclude<NonNullable<VDataTable["$props"]["headers"]>[number], Readonly<unknown[]>>; // For non-array props type SortItem = NonNullable<VDataTable["$props"]["sortBy"]>[number];
DataTableHeader and other types are still not exported. Any solution for this?? : (
@KaelWD Perhaps a solution to making component prop types accessible could be found at packages/component-meta
I found a partial solution.
import { VSheet } from 'vuetify/components';
import { type ExtractPropTypes } from 'vue'
type VSheetPropTypes = Partial<ExtractPropTypes<typeof VSheet>>
I say partial because while you can get all of the prop types using this trick, there is a bunch of other unnecessary stuff in the types that get resolved that I can't seem to use Omit
to remove, including:
$
$attrs
$children
$data
$el
$emit
$forceUpdate
$nextTick
$options
$parent
$props
$refs
$root
$slots
$watch
__isFragment
__isSuspense
__isTeleport
Perhaps https://vuejs.org/api/utility-types.html#extractpublicproptypes ExtractPublicPropTypes<T>
would be better?
Update: Not seeing a significant difference, but it would probably be better to use this anyways.
ValidationRule should also get exported. https://github.com/vuetifyjs/vuetify/blob/b87b28f72990ca0227906a266bbb58793332fcb8/packages/vuetify/src/composables/validation.ts#L15C1-L20C52
This doesn't seem to work with Vuetify Component Types either. https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers
i asbolutely aggree that vuetify needs more type/interfaces export. probably not whole component props but complex types used in props like DataTableHeader
, DataTableSelectStrategy
and similar
of course it can be done by 3rd party @types library where types will be copy/pasted from vuetify library but as vuetify 3 is written completely in typescript and its just about the build scripts of existing types the best way will be to officially support it and exort in vuetify d.ts files
For reference there is this conversation happening on Discord about extending components and passing types up. https://discord.com/channels/340160225338195969/1192558069343854612
This is very specifically about Labs, right? There is currently nothing to export anything other than the components.
Edit: I see the
Anchor
issue. Looks like this issue is being purposed for all of Vuetify
Any news about the Anchor part ? If we made a props used in location props of VMenu or VTooltip, we can't use it because it must be Anchor | undefined
but we can't import Anchor....
This is very specifically about Labs, right? There is currently nothing to export anything other than the components. Edit: I see the
Anchor
issue. Looks like this issue is being purposed for all of VuetifyAny news about the Anchor part ? If we made a props used in location props of VMenu or VTooltip, we can't use it because it must be
Anchor | undefined
but we can't import Anchor....
Here is dirty workaround if anyone interested. Just declare Anchor
type manually 😁
declare const block: readonly ["top", "bottom"];
declare const inline: readonly ["start", "end", "left", "right"];
type Tblock = typeof block[number];
type Tinline = typeof inline[number];
type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
@lenargum this is not a long term solution. For that vuetify team must export it.
I find myself wanting to get the exported interface shape of emitted events frequently. I don't see it mentioned specifically here so I'm posting in my use case with needing the typings from emitted events for reference:
// Vuetify
export interface SomeVuetifyEmitEvent {
id: unknown
value: boolean
path: unknown[]
event: MouseEvent | PointerEvent
}
emits: {
'update:selected': (value: unknown[]) => true,
'update:opened': (value: unknown[]) => true,
'click:open': (value: SomeVuetifyEmitEvent) => true,
'click:select': (value: SomeVuetifyEmitEvent) => true,
},
// Client
import type { SomeVuetifyEmitEvent } from 'vuetify/VSelect'
function onSortSelect(event: SomeVuetifyEmitEvent) {
const id = event.id as string
const paths event.paths as string[]
}
Looking to get prop types for DataTables?
type VDataTableProps = InstanceType<typeof VDataTable>['$props']
This might help until the promised day of better types comes.
How do I get at generic types like DataTableItem<T>
, ItemSlotBase<T>
and ItemKeySlot<T>
needed for cell-props or row-props as a workaround?
In case anyone is trying to do this with JSDoc -- this works.
<v-data-table
v-model:items-per-page="table.itemsPerPage"
v-model:sort-by="table.sortBy"
:headers="table.headers"
:loading="loading"
:items="scores"
:items-per-page-options="table.itemsPerPageOptions"
>
...
<script>
/**
* @typedef { import("vuetify/components").VDataTable["$props"]["headers"] } VDataTableHeaders
* @typedef { import("vuetify/components").VDataTable["$props"]["sortBy"] } VDataTableSortItems
*/
</script>
<script setup>
const table = reactive({
/** @type {VDataTableHeaders} */
headers: [
{ sortable: true, title: 'Label', value: 'label' },
{ align: 'end', sortable: true, title: 'Score', value: 'score' }
],
itemsPerPage: 5,
itemsPerPageOptions: [
{ value: 5, title: '5' },
{ value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' }
],
/** @type {VDataTableSortItems} */
sortBy: [{ key: 'score', order: 'desc' }]
})
...
Any update on this issue? We want to access the type definition of location...
Problem to solve
Let's consider next struct
We as developers don't have access to defined types, interfaces as a result in my project I have to duplicate the same TS types
Proposed solution
Just add export to types, interfaces that you already defined