feat(types): expose public interfaces

closes #16680
closes #19723
closes #21052

Author: KaelWD

packages/api-generator/src/types.ts

@@ -318,14 +318,14 @@ const allowedRefs = [
   'Group',
   'InternalDataTableHeader',
   'ListItem',
-  'LocationStrategyFn',
-  'OpenSelectStrategyFn',
+  'LocationStrategyFunction',
+  'OpenSelectStrategyFunction',
   'OpenStrategy',
-  'OpenStrategyFn',
-  'ScrollStrategyFn',
+  'OpenStrategyFunction',
+  'ScrollStrategyFunction',
   'SelectItemKey',
   'SelectStrategy',
-  'SelectStrategyFn',
+  'SelectStrategyFunction',
   'SortItem',
   'SubmitEventPromise',
   'TemplateRef',

packages/vuetify/src/components/VDataTable/types.ts

@@ -82,14 +82,17 @@ export type ItemKeySlot<T> = ItemSlotBase<T> & {
   column: InternalDataTableHeader
 }
 
-export type RowProps<T> =
-  | Record<string, any>
-  | ((data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>) => Record<string, any>)
-
-export type CellProps<T> =
-  | Record<string, any>
-  | ((data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>) => Record<string, any>)
-
-export type HeaderCellProps =
-  | Record<string, any>
-  | ((data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>) => Record<string, any>)
+export type RowProps<T> = Record<string, any> | RowPropsFunction<T>
+export type RowPropsFunction<T> = (
+  data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>
+) => Record<string, any>
+
+export type CellProps<T> = Record<string, any> | CellPropsFunction<T>
+export type CellPropsFunction<T> = (
+  data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>
+) => Record<string, any>
+
+export type HeaderCellProps = Record<string, any> | HeaderCellPropsFunction
+export type HeaderCellPropsFunction = (
+  data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>
+) => Record<string, any>

packages/vuetify/src/components/VOverlay/locationStrategies.ts

@@ -33,7 +33,7 @@ export interface LocationStrategyData {
   isRtl: Ref<boolean>
 }
 
-type LocationStrategyFn = (
+export type LocationStrategyFunction = (
   data: LocationStrategyData,
   props: StrategyProps,
   contentStyles: Ref<Record<string, string>>
@@ -45,7 +45,7 @@ const locationStrategies = {
 }
 
 export interface StrategyProps {
-  locationStrategy: keyof typeof locationStrategies | LocationStrategyFn
+  locationStrategy: keyof typeof locationStrategies | LocationStrategyFunction
   location: Anchor
   origin: Anchor | 'auto' | 'overlap'
   offset?: number | string | number[]

packages/vuetify/src/components/VOverlay/scrollStrategies.ts

@@ -14,7 +14,7 @@ export interface ScrollStrategyData {
   updateLocation: Ref<((e: Event) => void) | undefined>
 }
 
-type ScrollStrategyFn = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void
+export type ScrollStrategyFunction = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void
 
 const scrollStrategies = {
   none: null,
@@ -24,7 +24,7 @@ const scrollStrategies = {
 }
 
 export interface StrategyProps {
-  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFn
+  scrollStrategy: keyof typeof scrollStrategies | ScrollStrategyFunction
   contained: boolean | undefined
 }
 

packages/vuetify/src/components/VSnackbarQueue/VSnackbarQueue.tsx

@@ -25,7 +25,7 @@ export type VSnackbarQueueSlots<T extends string | SnackbarMessage> = {
   }
 }
 
-export type SnackbarMessage = Omit<
+export type SnackbarMessage = string | Omit<
   VSnackbar['$props'],
   | 'modelValue'
   | 'onUpdate:modelValue'
@@ -50,14 +50,14 @@ export const makeVSnackbarQueueProps = propsFactory({
     default: '$vuetify.dismiss',
   },
   modelValue: {
-    type: Array as PropType<readonly (string | SnackbarMessage)[]>,
+    type: Array as PropType<readonly SnackbarMessage[]>,
     default: () => [],
   },
 
   ...omit(makeVSnackbarProps(), ['modelValue']),
 }, 'VSnackbarQueue')
 
-export const VSnackbarQueue = genericComponent<new <T extends readonly (string | SnackbarMessage)[]> (
+export const VSnackbarQueue = genericComponent<new <T extends readonly SnackbarMessage[]> (
   props: {
     modelValue?: T
     'onUpdate:modelValue'?: (val: T) => void
@@ -69,15 +69,15 @@ export const VSnackbarQueue = genericComponent<new <T extends readonly (string |
   props: makeVSnackbarQueueProps(),
 
   emits: {
-    'update:modelValue': (val: (string | SnackbarMessage)[]) => true,
+    'update:modelValue': (val: SnackbarMessage[]) => true,
   },
 
   setup (props, { emit, slots }) {
     const { t } = useLocale()
 
     const isActive = shallowRef(false)
     const isVisible = shallowRef(false)
-    const current = shallowRef<SnackbarMessage>()
+    const current = shallowRef<Exclude<SnackbarMessage, string>>()
 
     watch(() => props.modelValue.length, (val, oldVal) => {
       if (!isVisible.value && val > oldVal) {

packages/vuetify/src/composables/__tests__/display-components.spec.browser.tsx

@@ -12,7 +12,7 @@ import { page, render } from '@test'
 import { ref } from 'vue'
 
 // Types
-import type { DisplayBreakpoint } from '@/composables'
+import type { DisplayBreakpoint } from '@/composables/display'
 
 describe('display-components', () => {
   it('should render items', async () => {

packages/vuetify/src/composables/index.ts

@@ -10,13 +10,3 @@ export { useGoTo } from './goto'
 export { useLayout } from './layout'
 export { useLocale, useRtl } from './locale'
 export { useTheme } from './theme'
-
-export type { DateInstance } from './date'
-export type { DefaultsInstance } from './defaults'
-export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from './display'
-export type { SubmitEventPromise } from './form'
-export type { GoToInstance } from './goto'
-export type { IconAliases, IconProps, IconSet, IconOptions } from './icons'
-export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from './locale'
-export type { ThemeDefinition, ThemeInstance } from './theme'
-export type { JSXComponent } from '@/util'

packages/vuetify/src/composables/nested/activeStrategies.ts

@@ -3,7 +3,7 @@
 import { toRaw } from 'vue'
 import { wrapInArray } from '@/util'
 
-export type ActiveStrategyFn = (data: {
+type ActiveStrategyFunction = (data: {
   id: unknown
   value: boolean
   activated: Set<unknown>
@@ -12,22 +12,22 @@ export type ActiveStrategyFn = (data: {
   event?: Event
 }) => Set<unknown>
 
-export type ActiveStrategyTransformInFn = (
+type ActiveStrategyTransformInFunction = (
   v: unknown | undefined,
   children: Map<unknown, unknown[]>,
   parents: Map<unknown, unknown>,
 ) => Set<unknown>
 
-export type ActiveStrategyTransformOutFn = (
+type ActiveStrategyTransformOutFunction = (
   v: Set<unknown>,
   children: Map<unknown, unknown[]>,
   parents: Map<unknown, unknown>,
 ) => unknown
 
 export type ActiveStrategy = {
-  activate: ActiveStrategyFn
-  in: ActiveStrategyTransformInFn
-  out: ActiveStrategyTransformOutFn
+  activate: ActiveStrategyFunction
+  in: ActiveStrategyTransformInFunction
+  out: ActiveStrategyTransformOutFunction
 }
 
 export const independentActiveStrategy = (mandatory?: boolean): ActiveStrategy => {

packages/vuetify/src/composables/nested/openStrategies.ts

@@ -1,4 +1,4 @@
-export type OpenStrategyFn = (data: {
+type OpenStrategyFunction = (data: {
   id: unknown
   value: boolean
   opened: Set<unknown>
@@ -7,7 +7,7 @@ export type OpenStrategyFn = (data: {
   event?: Event
 }) => Set<unknown>
 
-export type OpenSelectStrategyFn = (data: {
+type OpenSelectStrategyFunction = (data: {
   id: unknown
   value: boolean
   opened: Set<unknown>
@@ -18,8 +18,8 @@ export type OpenSelectStrategyFn = (data: {
 }) => Set<unknown> | null
 
 export type OpenStrategy = {
-  open: OpenStrategyFn
-  select: OpenSelectStrategyFn
+  open: OpenStrategyFunction
+  select: OpenSelectStrategyFunction
 }
 
 export const singleOpenStrategy: OpenStrategy = {

packages/vuetify/src/composables/nested/selectStrategies.ts

@@ -2,7 +2,7 @@
 // Utilities
 import { toRaw } from 'vue'
 
-export type SelectStrategyFn = (data: {
+type SelectStrategyFunction = (data: {
   id: unknown
   value: boolean
   selected: Map<unknown, 'on' | 'off' | 'indeterminate'>
@@ -11,22 +11,22 @@ export type SelectStrategyFn = (data: {
   event?: Event
 }) => Map<unknown, 'on' | 'off' | 'indeterminate'>
 
-export type SelectStrategyTransformInFn = (
+type SelectStrategyTransformInFunction = (
   v: readonly unknown[] | undefined,
   children: Map<unknown, unknown[]>,
   parents: Map<unknown, unknown>,
 ) => Map<unknown, 'on' | 'off' | 'indeterminate'>
 
-export type SelectStrategyTransformOutFn = (
+type SelectStrategyTransformOutFunction = (
   v: Map<unknown, 'on' | 'off' | 'indeterminate'>,
   children: Map<unknown, unknown[]>,
   parents: Map<unknown, unknown>,
 ) => unknown[]
 
 export type SelectStrategy = {
-  select: SelectStrategyFn
-  in: SelectStrategyTransformInFn
-  out: SelectStrategyTransformOutFn
+  select: SelectStrategyFunction
+  in: SelectStrategyTransformInFunction
+  out: SelectStrategyTransformOutFunction
 }
 
 export const independentSelectStrategy = (mandatory?: boolean): SelectStrategy => {

packages/vuetify/src/framework.ts

@@ -20,8 +20,10 @@ import type { GoToOptions } from '@/composables/goto'
 import type { IconOptions } from '@/composables/icons'
 import type { LocaleOptions, RtlOptions } from '@/composables/locale'
 import type { ThemeOptions } from '@/composables/theme'
+
+// Exports
 export * from './composables'
-export type { DateOptions, DateInstance, DateModule } from '@/composables/date'
+export * from './types'
 
 export interface VuetifyOptions {
   aliases?: Record<string, any>

packages/vuetify/src/types.ts

@@ -0,0 +1,35 @@
+/*
+ * PUBLIC INTERFACES ONLY
+ * Imports in our code should be to the actual source, not this file
+ */
+
+// Util
+export type { Anchor, JSXComponent } from '@/util'
+
+// Composables
+export type { DateOptions, DateInstance, DateModule } from '@/composables/date'
+export type { DefaultsInstance } from '@/composables/defaults'
+export type { DisplayBreakpoint, DisplayInstance, DisplayThresholds } from '@/composables/display'
+export type { FilterFunction, InternalItem, FilterMatch } from '@/composables/filter'
+export type { SubmitEventPromise } from '@/composables/form'
+export type { GoToInstance } from '@/composables/goto'
+export type { IconAliases, IconProps, IconSet, IconOptions } from '@/composables/icons'
+export type { LocaleInstance, LocaleMessages, RtlInstance, LocaleOptions, RtlOptions } from '@/composables/locale'
+export type { ActiveStrategy } from '@/composables/nested/activeStrategies'
+export type { OpenStrategy } from '@/composables/nested/openStrategies'
+export type { SelectStrategy } from '@/composables/nested/selectStrategies'
+export type { ThemeDefinition, ThemeInstance } from '@/composables/theme'
+export type { ValidationRule } from '@/composables/validation'
+
+// Components
+export type {
+  DataTableHeader,
+  DataTableCompareFunction,
+  RowPropsFunction as DataTableRowPropsFunction,
+  CellPropsFunction as DataTableCellPropsFunction,
+  HeaderCellPropsFunction as DataTableHeaderCellPropsFunction,
+} from '@/components/VDataTable/types'
+export type { SortItem as DataTableSortItem } from '@/components/VDataTable/composables/sort'
+export type { LocationStrategyFunction } from '@/components/VOverlay/locationStrategies'
+export type { ScrollStrategyFunction } from '@/components/VOverlay/scrollStrategies'
+export type { SnackbarMessage as SnackbarQueueMessage } from '@/components/VSnackbarQueue/VSnackbarQueue'

packages/vuetify/test/templates/generateStories.tsx

@@ -3,7 +3,7 @@
  * Some utility functions for mounting these generated examples inside of tests
  */
 import type { FunctionalComponent } from 'vue'
-import type { JSXComponent } from '@/composables'
+import type { JSXComponent } from '@/util'
 import { it } from 'vitest'
 import { commands, page } from '@vitest/browser/context'
 import { render } from '@test'