Skip to content

Commit

Permalink
feat: support vue 3.3 (#17282)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KaelWD
KaelWD committed May 11, 2023
1 parent c110997 commit ca10d14
Show file tree
Hide file tree
Showing 53 changed files with 518 additions and 363 deletions.
5 changes: 3 additions & 2 deletions package.json
View file
Expand Up @@ -43,7 +43,7 @@
"@octokit/core": "^4.2.0",
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"@vue/compiler-sfc": "^3.2.47",
"@vue/compiler-sfc": "^3.3.1",
"@vueuse/head": "^1.1.23",
"babel-eslint": "^10.1.0",
"babel-jest": "^28.1.3",
Expand Down Expand Up @@ -81,9 +81,10 @@
"upath": "^2.0.1",
"vite-plugin-inspect": "^0.7.18",
"vite-plugin-warmup": "^0.0.2",
"vue": "^3.2.47",
"vue": "^3.3.1",
"vue-analytics": "^5.16.1",
"vue-router": "^4.1.6",
"vue-tsc": "^1.6.4",
"yargs": "^17.7.1"
}
}
2 changes: 1 addition & 1 deletion packages/api-generator/package.json
View file
Expand Up @@ -17,7 +17,7 @@
"piscina": "^3.2.0",
"rimraf": "^3.0.2",
"ts-morph": "^18.0.0",
"vue": "^3.2.47",
"vue": "^3.3.1",
"vuetify": "^3.2.1"
},
"devDependencies": {
Expand Down
9 changes: 4 additions & 5 deletions packages/docs/package.json
View file
Expand Up @@ -35,7 +35,7 @@
"prismjs": "^1.29.0",
"roboto-fontface": "^0.10.0",
"vee-validate": "^4.8.4",
"vue": "^3.2.47",
"vue": "^3.3.1",
"vue-gtag-next": "^1.14.0",
"vue-i18n": "^9.3.0-beta.16",
"vue-instantsearch": "^4.8.8",
Expand All @@ -50,8 +50,8 @@
"@types/prismjs": "^1.26.0",
"@types/rimraf": "^3.0.2",
"@vitejs/plugin-basic-ssl": "^1.0.1",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.2.47",
"@vitejs/plugin-vue": "^4.2.2",
"@vue/compiler-sfc": "^3.3.1",
"@vuetify/api-generator": "^3.2.1",
"@vuetify/vite-ssg": "^0.20.2",
"ajv": "^8.12.0",
Expand All @@ -74,13 +74,12 @@
"markdownlint-cli": "^0.33.0",
"unplugin-fonts": "^1.0.0",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.3.0-beta.2",
"vite": "^4.3.5",
"vite-plugin-md": "^0.21.5",
"vite-plugin-pages": "^0.29.0",
"vite-plugin-pwa": "^0.14.7",
"vite-plugin-vue-layouts": "^0.8.0",
"vite-plugin-vuetify": "^1.0.2",
"vue-tsc": "^1.2.0",
"workbox-precaching": "^6.5.4",
"workbox-routing": "^6.5.4",
"workbox-strategies": "^6.5.4",
Expand Down
7 changes: 2 additions & 5 deletions packages/docs/src/examples/v-app-bar/misc-menu.vue
View file
Expand Up @@ -10,11 +10,8 @@
fade-img-on-scroll
scroll-target="#scrolling-techniques-4"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
<template v-slot:image>
<v-img gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"></v-img>
</template>

<v-app-bar-nav-icon></v-app-bar-nav-icon>
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/examples/v-calendar/misc-drag-and-drop.vue
View file
Expand Up @@ -17,10 +17,10 @@
@mouseup:time="endDrag"
@mouseleave="cancelDrag"
>
<template v-slot:event="{ event, timed, eventSummary }">
<div class="v-event-draggable">
<template v-slot:event="{ event, timed /*, eventSummary */ }">
<!--<div class="v-event-draggable">
<component :is="{ render: eventSummary }"></component>
</div>
</div>-->
<div
v-if="timed"
class="v-event-drag-bottom"
Expand Down
2 changes: 2 additions & 0 deletions packages/docs/src/examples/v-item-group/prop-mandatory.vue
View file
Expand Up @@ -30,3 +30,5 @@
</v-container>
</v-item-group>
</template>

<script></script>
2 changes: 2 additions & 0 deletions packages/docs/src/examples/v-item-group/prop-multiple.vue
View file
Expand Up @@ -30,3 +30,5 @@
</v-container>
</v-item-group>
</template>

<script></script>
2 changes: 2 additions & 0 deletions packages/docs/src/examples/v-item-group/prop-selected-class.vue
View file
Expand Up @@ -27,3 +27,5 @@
</v-container>
</v-item-group>
</template>

<script></script>
2 changes: 2 additions & 0 deletions packages/docs/src/examples/v-item-group/usage.vue
View file
Expand Up @@ -31,3 +31,5 @@
</v-container>
</v-item-group>
</template>

<script></script>
4 changes: 2 additions & 2 deletions packages/vuetify/package.json
View file
Expand Up @@ -131,7 +131,7 @@
"@types/jest": "^28.1.8",
"@types/node": "^18.15.11",
"@types/resize-observer-browser": "^0.1.7",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue": "^4.2.2",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/babel-plugin-jsx": "^1.1.1",
"@vue/test-utils": "2.3.2",
Expand Down Expand Up @@ -161,7 +161,7 @@
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-terser": "^7.0.2",
"ts-json-schema-generator": "^1.2.0",
"vite": "^4.3.0-beta.2",
"vite": "^4.3.5",
"vite-ssr": "^0.17.1",
"vue-i18n": "^9.3.0-beta.16",
"vue-router": "^4.1.6"
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VAlert/VAlert.tsx
View file
Expand Up @@ -40,7 +40,7 @@ export type VAlertSlots = {
title: []
text: []
append: []
close: []
close: [{ props: Record<string, any> }]
}

export const VAlert = genericComponent<VAlertSlots>()({
Expand Down
34 changes: 19 additions & 15 deletions packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
View file
Expand Up @@ -65,20 +65,23 @@ export const VAutocomplete = genericComponent<new <
ReturnObject extends boolean = false,
Multiple extends boolean = false,
V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>
>(props: {
items?: readonly T[]
returnObject?: ReturnObject
multiple?: Multiple
modelValue?: V
'onUpdate:modelValue'?: (val: V) => void
}) => GenericProps<typeof props, Omit<VInputSlots & VFieldSlots, 'default'> & {
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
selection: [{ item: InternalItem<T>, index: number }]
'prepend-item': []
'append-item': []
'no-data': []
}>>()({
>(
props: {
items?: readonly T[]
returnObject?: ReturnObject
multiple?: Multiple
modelValue?: V
'onUpdate:modelValue'?: (val: V) => void
},
slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
selection: [{ item: InternalItem<T>, index: number }]
'prepend-item': []
'append-item': []
'no-data': []
}
) => GenericProps<typeof props, typeof slots>>()({
name: 'VAutocomplete',

props: {
Expand Down Expand Up @@ -377,8 +380,9 @@ export const VAutocomplete = genericComponent<new <

{ slots['prepend-item']?.() }

{ displayItems.value.map(item => slots.item?.({
{ displayItems.value.map((item, index) => slots.item?.({
item,
index,
props: mergeProps(item.props, { onClick: () => select(item) }),
}) ?? (
<VListItem
Expand Down
19 changes: 11 additions & 8 deletions packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
View file
Expand Up @@ -30,14 +30,17 @@ export type BreadcrumbItem = string | (Partial<LinkProps> & {
disabled?: boolean
})

export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(props: {
items?: T[]
}) => GenericProps<typeof props, {
prepend: []
title: [{ item: T, index: number }]
divider: [{ item: T, index: number }]
default: []
}>>()({
export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
props: {
items?: T[]
},
slots: {
prepend: []
title: [{ item: T, index: number }]
divider: [{ item: T, index: number }]
default: []
}
) => GenericProps<typeof props, typeof slots>>()({
name: 'VBreadcrumbs',

props: {
Expand Down
8 changes: 3 additions & 5 deletions packages/vuetify/src/components/VCard/VCard.tsx
View file
Expand Up @@ -5,6 +5,7 @@ import './VCard.sass'

// Components
import { VCardActions } from './VCardActions'
import type { VCardItemSlots } from './VCardItem'
import { VCardItem } from './VCardItem'
import { VCardText } from './VCardText'
import { VDefaultsProvider } from '@/components/VDefaultsProvider'
Expand Down Expand Up @@ -36,16 +37,13 @@ import { genericComponent, useRender } from '@/util'
// Types
import type { LoaderSlotProps } from '@/composables/loader'

export type VCardSlots = {
export type VCardSlots = VCardItemSlots & {
default: []
actions: []
title: []
subtitle: []
text: []
loader: [LoaderSlotProps]
image: []
prepend: []
append: []
item: []
}

export const VCard = genericComponent<VCardSlots>()({
Expand Down
13 changes: 12 additions & 1 deletion packages/vuetify/src/components/VCarousel/VCarousel.tsx
View file
Expand Up @@ -21,7 +21,18 @@ import type { GroupProvide } from '@/composables/group'
import type { PropType } from 'vue'
import type { VWindowSlots } from '../VWindow/VWindow'

export const VCarousel = genericComponent<VWindowSlots>()({
type VCarouselSlots = VWindowSlots & {
item: [{
props: Record<string, any>
item: {
id: number
value: unknown
disabled: boolean | undefined
}
}]
}

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

props: {
Expand Down
11 changes: 10 additions & 1 deletion packages/vuetify/src/components/VChip/VChip.tsx
View file
Expand Up @@ -33,10 +33,19 @@ import { EventProp, genericComponent } from '@/util'
import { computed } from 'vue'

export type VChipSlots = {
default: []
default: [{
isSelected: boolean | undefined
selectedClass: boolean | (string | undefined)[] | undefined
select: ((value: boolean) => void) | undefined
toggle: (() => void) | undefined
value: unknown
disabled: boolean
}]
label: []
prepend: []
append: []
close: []
filter: []
}

export const VChip = genericComponent<VChipSlots>()({
Expand Down
12 changes: 11 additions & 1 deletion packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
View file
Expand Up @@ -18,7 +18,17 @@ import type { PropType } from 'vue'

export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')

export const VChipGroup = genericComponent()({
type VChipGroupProps = {
default: [{
isSelected: (id: number) => boolean
select: (id: number, value: boolean) => void
next: () => void
prev: () => void
selected: readonly number[]
}]
}

export const VChipGroup = genericComponent<VChipGroupProps>()({
name: 'VChipGroup',

props: {
Expand Down
34 changes: 19 additions & 15 deletions packages/vuetify/src/components/VCombobox/VCombobox.tsx
View file
Expand Up @@ -66,20 +66,23 @@ export const VCombobox = genericComponent<new <
ReturnObject extends boolean = true,
Multiple extends boolean = false,
V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>
>(props: {
items?: readonly T[]
returnObject?: ReturnObject
multiple?: Multiple
modelValue?: V
'onUpdate:modelValue'?: (val: V) => void
}) => GenericProps<typeof props, Omit<VInputSlots & VFieldSlots, 'default'> & {
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
selection: [{ item: InternalItem<T>, index: number }]
'prepend-item': []
'append-item': []
'no-data': []
}>>()({
>(
props: {
items?: readonly T[]
returnObject?: ReturnObject
multiple?: Multiple
modelValue?: V
'onUpdate:modelValue'?: (val: V) => void
},
slots: Omit<VInputSlots & VFieldSlots, 'default'> & {
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
selection: [{ item: InternalItem<T>, index: number }]
'prepend-item': []
'append-item': []
'no-data': []
}
) => GenericProps<typeof props, typeof slots>>()({
name: 'VCombobox',

props: {
Expand Down Expand Up @@ -412,8 +415,9 @@ export const VCombobox = genericComponent<new <

{ slots['prepend-item']?.() }

{ displayItems.value.map(item => slots.item?.({
{ displayItems.value.map((item, index) => slots.item?.({
item,
index,
props: mergeProps(item.props, { onClick: () => select(item) }),
}) ?? (
<VListItem
Expand Down
12 changes: 11 additions & 1 deletion packages/vuetify/src/components/VCounter/VCounter.tsx
View file
Expand Up @@ -12,7 +12,17 @@ import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
import { computed } from 'vue'
import { genericComponent, useRender } from '@/util'

export const VCounter = genericComponent()({
export type VCounterSlot = {
counter: string
max: string | number | undefined
value: string | number | undefined
}

type VCounterSlots = {
default: [VCounterSlot]
}

export const VCounter = genericComponent<VCounterSlots>()({
name: 'VCounter',

functional: true,
Expand Down

0 comments on commit ca10d14

Please sign in to comment.