Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(types): define missing slot types #16621

Merged
merged 6 commits into from
Feb 10, 2023
Merged

fix(types): define missing slot types #16621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b706e8
refactor: implement genericComponent into components
johnleider Feb 8, 2023
75a6814
refactor: convert more components
johnleider Feb 9, 2023
35dd1d0
refactor: simplify non-generic slots declaration
KaelWD Feb 10, 2023
b344fe6
chore: update new component template
KaelWD Feb 10, 2023
51644fc
fix: correct slot name
KaelWD Feb 10, 2023
b8ed22a
add VSelectionControl label props
KaelWD Feb 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions packages/vuetify/src/components/VAlert/VAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,26 @@ import { IconValue } from '@/composables/icons'

// Utilities
import { computed, toRef } from 'vue'
import { defineComponent } from '@/util'
import { genericComponent } from '@/util'

// Types
import type { PropType } from 'vue'
import type { MakeSlots } from '@/util'

const allowedTypes = ['success', 'info', 'warning', 'error'] as const

type ContextualType = typeof allowedTypes[number]

export const VAlert = defineComponent({
export type VAlertSlots = MakeSlots<{
default: []
prepend: []
title: []
text: []
append: []
close: []
}>

export const VAlert = genericComponent<VAlertSlots>()({
name: 'VAlert',

props: {
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VApp/VApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
import { useRtl } from '@/composables/locale'

// Utilities
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VApp = defineComponent({
export const VApp = genericComponent()({
name: 'VApp',

props: {
Expand Down
5 changes: 1 addition & 4 deletions packages/vuetify/src/components/VAppBar/VAppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,9 @@ import { genericComponent, useRender } from '@/util'

// Types
import type { PropType } from 'vue'
import type { SlotsToProps } from '@/util'
import type { VToolbarSlots } from '@/components/VToolbar/VToolbar'

export const VAppBar = genericComponent<new () => {
$props: SlotsToProps<VToolbarSlots>
}>()({
export const VAppBar = genericComponent<VToolbarSlots>()({
name: 'VAppBar',

props: {
Expand Down
7 changes: 5 additions & 2 deletions packages/vuetify/src/components/VAppBar/VAppBarNavIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@ import { VBtn } from '@/components/VBtn'
import { IconValue } from '@/composables/icons'

// Utilities
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VAppBarNavIcon = defineComponent({
// Types
import type { VBtnSlots } from '@/components/VBtn/VBtn'

export const VAppBarNavIcon = genericComponent<VBtnSlots>()({
name: 'VAppBarNavIcon',

props: {
Expand Down
9 changes: 6 additions & 3 deletions packages/vuetify/src/components/VAppBar/VAppBarTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,20 @@ import { VToolbarTitle } from '@/components/VToolbar'

// Utilities
import { makeVToolbarTitleProps } from '@/components/VToolbar/VToolbarTitle'
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VAppBarTitle = defineComponent({
// Types
import type { VToolbarTitleSlots } from '@/components/VToolbar/VToolbarTitle'

export const VAppBarTitle = genericComponent<VToolbarTitleSlots>()({
name: 'VAppBarTitle',

props: makeVToolbarTitleProps(),

setup (props, { slots }) {
useRender(() => (
<VToolbarTitle
{ ... props }
{ ...props }
class="v-app-bar-title"
v-slots={ slots }
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VAvatar/VAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { makeTagProps } from '@/composables/tag'
import { makeThemeProps, provideTheme } from '@/composables/theme'

// Utilities
import { defineComponent, propsFactory, useRender } from '@/util'
import { genericComponent, propsFactory, useRender } from '@/util'

export const makeVAvatarProps = propsFactory({
start: Boolean,
Expand All @@ -31,7 +31,7 @@ export const makeVAvatarProps = propsFactory({
...makeVariantProps({ variant: 'flat' } as const),
}, 'v-avatar')

export const VAvatar = defineComponent({
export const VAvatar = genericComponent()({
name: 'VAvatar',

props: makeVAvatarProps(),
Expand Down
12 changes: 10 additions & 2 deletions packages/vuetify/src/components/VBadge/VBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,18 @@ import { useBackgroundColor, useTextColor } from '@/composables/color'
import { useLocale } from '@/composables/locale'

// Utilities
import { defineComponent, pick, useRender } from '@/util'
import { genericComponent, pick, useRender } from '@/util'
import { toRef } from 'vue'

export const VBadge = defineComponent({
// Types
import type { MakeSlots } from '@/util'

export type VBadgeSlots = MakeSlots<{
default: []
badge: []
}>

export const VBadge = genericComponent<VBadgeSlots>()({
name: 'VBadge',

inheritAttrs: false,
Expand Down
12 changes: 10 additions & 2 deletions packages/vuetify/src/components/VBanner/VBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,21 @@ import { useDisplay } from '@/composables/display'
import { IconValue } from '@/composables/icons'

// Utilities
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'
import { toRef } from 'vue'

// Types
import type { MakeSlots } from '@/util'
import type { PropType } from 'vue'

export const VBanner = defineComponent({
export type VBannerSlots = MakeSlots<{
default: []
prepend: []
text: []
actions: []
}>

export const VBanner = genericComponent<VBannerSlots>()({
name: 'VBanner',

props: {
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VBanner/VBannerActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
import { provideDefaults } from '@/composables/defaults'

// Utility
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VBannerActions = defineComponent({
export const VBannerActions = genericComponent()({
name: 'VBannerActions',

props: {
Expand Down
6 changes: 3 additions & 3 deletions packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import { useBackgroundColor } from '@/composables/color'

// Utilities
import { computed, toRef } from 'vue'
import { convertToUnit, defineComponent, useRender } from '@/util'
import { convertToUnit, genericComponent, useRender } from '@/util'

// Types
import { VBtnToggleSymbol } from '../VBtnToggle/VBtnToggle'
import { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'

export const VBottomNavigation = defineComponent({
export const VBottomNavigation = genericComponent()({
name: 'VBottomNavigation',

props: {
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsDivider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Utility
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VBreadcrumbsDivider = defineComponent({
export const VBreadcrumbsDivider = genericComponent()({
name: 'VBreadcrumbsDivider',

props: {
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { useTextColor } from '@/composables/color'

// Utilities
import { computed } from 'vue'
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VBreadcrumbsItem = defineComponent({
export const VBreadcrumbsItem = genericComponent()({
name: 'VBreadcrumbsItem',

props: {
Expand Down
12 changes: 10 additions & 2 deletions packages/vuetify/src/components/VBtn/VBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,20 @@ import { useSelectLink } from '@/composables/selectLink'

// Utilities
import { computed } from 'vue'
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

// Types
import type { MakeSlots } from '@/util'
import type { PropType } from 'vue'

export const VBtn = defineComponent({
export type VBtnSlots = MakeSlots<{
default: []
prepend: []
append: []
loader: []
}>

export const VBtn = genericComponent<VBtnSlots>()({
name: 'VBtn',

directives: { Ripple },
Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { makeVariantProps } from '@/composables/variant'
import { provideDefaults } from '@/composables/defaults'

// Utility
import { genericComponent, pick, propsFactory, useRender } from '@/util'
import { toRef } from 'vue'
import { defineComponent, pick, propsFactory, useRender } from '@/util'

// Types
import type { ExtractPropTypes } from 'vue'
Expand All @@ -30,7 +30,7 @@ export const makeVBtnGroupProps = propsFactory({
...makeVariantProps(),
}, 'v-btn-group')

export const VBtnGroup = defineComponent({
export const VBtnGroup = genericComponent()({
name: 'VBtnGroup',

props: makeVBtnGroupProps(),
Expand Down
11 changes: 5 additions & 6 deletions packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,18 @@ import { genericComponent, useRender } from '@/util'

// Types
import type { InjectionKey } from 'vue'
import type { SlotsToProps } from '@/util'
import type { GroupProvide } from '@/composables/group'

export type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'
export interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}

export const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')

export const VBtnToggle = genericComponent<new <T>() => {
$props: SlotsToProps<{
default: [DefaultBtnToggleSlot]
}>
}>()({
type VBtnToggleSlots = {
default: [DefaultBtnToggleSlot]
}

export const VBtnToggle = genericComponent<VBtnToggleSlots>()({
name: 'VBtnToggle',

props: {
Expand Down
21 changes: 18 additions & 3 deletions packages/vuetify/src/components/VCard/VCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,25 @@ import { makeTagProps } from '@/composables/tag'
import { makeThemeProps, provideTheme } from '@/composables/theme'

// Utilities
import { defineComponent, useRender } from '@/util'
import { computed } from 'vue'

export const VCard = defineComponent({
import { genericComponent, useRender } from '@/util'

// Types
import type { MakeSlots } from '@/util'

export type VCardSlots = MakeSlots<{
default: []
actions: []
title: []
subtitle: []
text: []
loader: []
image: []
prepend: []
append: []
}>

export const VCard = genericComponent<VCardSlots>()({
name: 'VCard',

directives: { Ripple },
Expand Down
7 changes: 5 additions & 2 deletions packages/vuetify/src/components/VCard/VCardActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
// Composables
import { provideDefaults } from '@/composables/defaults'

// Utility
// Utilities
import { defineComponent, useRender } from '@/util'

export const VCardActions = defineComponent({
// Types
import type { SlotsToProps } from '@/util'

export const VCardActions = defineComponent<SlotsToProps<{ default: [] }>>({
name: 'VCardActions',

setup (_, { slots }) {
Expand Down
15 changes: 13 additions & 2 deletions packages/vuetify/src/components/VCard/VCardItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,20 @@ import { IconValue } from '@/composables/icons'
import { makeDensityProps } from '@/composables/density'

// Utility
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VCardItem = defineComponent({
// Types
import type { MakeSlots } from '@/util'

export type VCardItemSlots = MakeSlots<{
default: []
prepend: []
append: []
title: []
subtitle: []
}>

export const VCardItem = genericComponent<VCardItemSlots>()({
name: 'VCardItem',

props: {
Expand Down
5 changes: 3 additions & 2 deletions packages/vuetify/src/components/VCarousel/VCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ import { useLocale } from '@/composables/locale'
import { useProxiedModel } from '@/composables/proxiedModel'

// Utilities
import { convertToUnit, defineComponent, useRender } from '@/util'
import { convertToUnit, genericComponent, useRender } from '@/util'
import { onMounted, ref, watch } from 'vue'

// Types
import type { GroupProvide } from '@/composables/group'
import type { PropType } from 'vue'
import type { VWindowSlots } from '../VWindow/VWindow'

export const VCarousel = defineComponent({
export const VCarousel = genericComponent<VWindowSlots>()({
name: 'VCarousel',

props: {
Expand Down
7 changes: 5 additions & 2 deletions packages/vuetify/src/components/VCarousel/VCarouselItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import { VImg } from '@/components/VImg'
import { VWindowItem } from '@/components/VWindow'

// Utilities
import { defineComponent, useRender } from '@/util'
import { genericComponent, useRender } from '@/util'

export const VCarouselItem = defineComponent({
// Types
import type { VImgSlots } from '@/components/VImg/VImg'

export const VCarouselItem = genericComponent<VImgSlots>()({
name: 'VCarouselItem',

inheritAttrs: false,
Expand Down
10 changes: 8 additions & 2 deletions packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import './VCheckbox.sass'

// Components
import type { VInputSlots } from '@/components/VInput/VInput'
import { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'
import { filterCheckboxBtnProps, makeVCheckboxBtnProps, VCheckboxBtn } from './VCheckboxBtn'

Expand All @@ -10,9 +11,14 @@ import { useFocus } from '@/composables/focus'

// Utilities
import { computed } from 'vue'
import { defineComponent, filterInputAttrs, getUid, useRender } from '@/util'
import { filterInputAttrs, genericComponent, getUid, useRender } from '@/util'

export const VCheckbox = defineComponent({
// Types
import type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl'

export type VCheckboxSlots = VInputSlots & VSelectionControlSlots

export const VCheckbox = genericComponent<VCheckboxSlots>()({
name: 'VCheckbox',

inheritAttrs: false,
Expand Down
Loading