fix: replace getUid with vue's useId

KaelWD · KaelWD · commit cbd14a7ace7e · 2024-12-16T20:51:02.000+11:00
fixes #19696
diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.tsx b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
@@ -54,7 +54,7 @@ type VCarouselSlots = VWindowSlots & {
   item: {
     props: Record<string, any>
     item: {
-      id: number
+      id: string
       value: unknown
       disabled: boolean | undefined
     }
diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
@@ -10,8 +10,8 @@ import { useFocus } from '@/composables/focus'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
+import { computed, useId } from 'vue'
+import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl'
@@ -47,7 +47,7 @@ export const VCheckbox = genericComponent<new <T>(
     const model = useProxiedModel(props, 'modelValue')
     const { isFocused, focus, blur } = useFocus(props)
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `checkbox-${uid}`)
 
     useRender(() => {
diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
@@ -41,11 +41,11 @@ export const makeVChipGroupProps = propsFactory({
 
 type VChipGroupSlots = {
   default: {
-    isSelected: (id: number) => boolean
-    select: (id: number, value: boolean) => void
+    isSelected: (id: string) => boolean
+    select: (id: string, value: boolean) => void
     next: () => void
     prev: () => void
-    selected: readonly number[]
+    selected: readonly string[]
   }
 }
 
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -18,13 +18,12 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, ref, toRef, useId, watch } from 'vue'
 import {
   animate,
   convertToUnit,
   EventProp,
   genericComponent,
-  getUid,
   isOn,
   nullifyTransforms,
   pick,
@@ -139,7 +138,7 @@ export const VField = genericComponent<new <T>(
     const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `input-${uid}`)
     const messagesId = computed(() => `${id.value}-messages`)
 
diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -15,8 +15,8 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeValidationProps, useValidation } from '@/composables/validation'
 
 // Utilities
-import { computed } from 'vue'
-import { EventProp, genericComponent, getUid, only, propsFactory, useRender } from '@/util'
+import { computed, useId } from 'vue'
+import { EventProp, genericComponent, only, propsFactory, useRender } from '@/util'
 
 // Types
 import type { ComputedRef, PropType, Ref } from 'vue'
@@ -105,7 +105,7 @@ export const VInput = genericComponent<new <T>(
     const { rtlClasses } = useRtl()
     const { InputIcon } = useInputIcon(props)
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `input-${uid}`)
     const messagesId = computed(() => `${id.value}-messages`)
 
diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
@@ -26,11 +26,11 @@ export const makeVItemGroupProps = propsFactory({
 
 type VItemGroupSlots = {
   default: {
-    isSelected: (id: number) => boolean
-    select: (id: number, value: boolean) => void
+    isSelected: (id: string) => boolean
+    select: (id: string, value: boolean) => void
     next: () => void
     prev: () => void
-    selected: readonly number[]
+    selected: readonly string[]
   }
 }
 
diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -24,6 +24,7 @@ import {
   provide,
   ref,
   shallowRef,
+  useId,
   watch,
 } from 'vue'
 import { VMenuSymbol } from './shared'
@@ -32,7 +33,6 @@ import {
   focusChild,
   genericComponent,
   getNextElement,
-  getUid,
   IN_BROWSER,
   isClickInsideElement,
   omit,
@@ -76,13 +76,13 @@ export const VMenu = genericComponent<OverlaySlots>()({
     const { scopeId } = useScopeId()
     const { isRtl } = useRtl()
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `v-menu-${uid}`)
 
     const overlay = ref<VOverlay>()
 
     const parent = inject(VMenuSymbol, null)
-    const openChildren = shallowRef(new Set<number>())
+    const openChildren = shallowRef(new Set<string>())
     provide(VMenuSymbol, {
       register () {
         openChildren.value.add(uid)
diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
@@ -12,8 +12,8 @@ import { IconValue } from '@/composables/icons'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
+import { computed, useId } from 'vue'
+import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { VInputSlots } from '@/components/VInput/VInput'
@@ -68,7 +68,7 @@ export const VRadioGroup = genericComponent<new <T>(
   },
 
   setup (props, { attrs, slots }) {
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `radio-group-${uid}`)
     const model = useProxiedModel(props, 'modelValue')
 
diff --git a/packages/vuetify/src/components/VRating/VRating.tsx b/packages/vuetify/src/components/VRating/VRating.tsx
@@ -15,8 +15,8 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, shallowRef } from 'vue'
-import { clamp, createRange, genericComponent, getUid, propsFactory, useRender } from '@/util'
+import { computed, shallowRef, useId } from 'vue'
+import { clamp, createRange, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { Prop } from 'vue'
@@ -140,7 +140,8 @@ export const VRating = genericComponent<VRatingSlots>()({
       }
     }))
 
-    const name = computed(() => props.name ?? `v-rating-${getUid()}`)
+    const uid = useId()
+    const name = computed(() => props.name ?? `v-rating-${uid}`)
 
     function VRatingItem ({ value, index, showStar = true }: { value: number, index: number, showStar?: boolean }) {
       const { onMouseenter, onMouseleave, onClick } = eventState.value[index + 1]
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -16,11 +16,10 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { Ripple } from '@/directives/ripple'
 
 // Utilities
-import { computed, inject, nextTick, ref, shallowRef } from 'vue'
+import { computed, inject, nextTick, ref, shallowRef, useId } from 'vue'
 import {
   filterInputAttrs,
   genericComponent,
-  getUid,
   matchesSelector,
   propsFactory,
   useRender,
@@ -172,7 +171,7 @@ export const VSelectionControl = genericComponent<new <T>(
       backgroundColorStyles,
       trueValue,
     } = useSelectionControl(props)
-    const uid = getUid()
+    const uid = useId()
     const isFocused = shallowRef(false)
     const isFocusVisible = shallowRef(false)
     const input = ref<HTMLInputElement>()
diff --git a/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx b/packages/vuetify/src/components/VSelectionControlGroup/VSelectionControlGroup.tsx
@@ -10,8 +10,8 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeThemeProps } from '@/composables/theme'
 
 // Utilities
-import { computed, onScopeDispose, provide, toRef } from 'vue'
-import { deepEqual, genericComponent, getUid, propsFactory, useRender } from '@/util'
+import { computed, onScopeDispose, provide, toRef, useId } from 'vue'
+import { deepEqual, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { InjectionKey, PropType, Ref } from 'vue'
@@ -86,7 +86,7 @@ export const VSelectionControlGroup = genericComponent<new <T>(
 
   setup (props, { slots }) {
     const modelValue = useProxiedModel(props, 'modelValue')
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `v-selection-control-group-${uid}`)
     const name = computed(() => props.name || id.value)
 
diff --git a/packages/vuetify/src/components/VSparkline/VBarline.tsx b/packages/vuetify/src/components/VSparkline/VBarline.tsx
@@ -1,7 +1,7 @@
 // Utilities
-import { computed } from 'vue'
+import { computed, useId } from 'vue'
 import { makeLineProps } from './util/line'
-import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util'
+import { genericComponent, getPropertyFromItem, propsFactory, useRender } from '@/util'
 
 // Types
 export type VBarlineSlots = {
@@ -42,7 +42,7 @@ export const VBarline = genericComponent<VBarlineSlots>()({
   props: makeVBarlineProps(),
 
   setup (props, { slots }) {
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `barline-${uid}`)
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || 500)
 
diff --git a/packages/vuetify/src/components/VSparkline/VTrendline.tsx b/packages/vuetify/src/components/VSparkline/VTrendline.tsx
@@ -1,8 +1,8 @@
 // Utilities
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import { makeLineProps } from './util/line'
 import { genPath as _genPath } from './util/path'
-import { genericComponent, getPropertyFromItem, getUid, propsFactory, useRender } from '@/util'
+import { genericComponent, getPropertyFromItem, propsFactory, useRender } from '@/util'
 
 // Types
 export type VTrendlineSlots = {
@@ -42,7 +42,7 @@ export const VTrendline = genericComponent<VTrendlineSlots>()({
   props: makeVTrendlineProps(),
 
   setup (props, { slots }) {
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `trendline-${uid}`)
     const autoDrawDuration = computed(() => Number(props.autoDrawDuration) || (props.fill ? 500 : 2000))
 
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -15,8 +15,8 @@ import { LoaderSlot, useLoader } from '@/composables/loader'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, ref } from 'vue'
-import { filterInputAttrs, genericComponent, getUid, IN_BROWSER, propsFactory, useRender } from '@/util'
+import { computed, ref, useId } from 'vue'
+import { filterInputAttrs, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'
 
 // Types
 import type { ComputedRef, Ref } from 'vue'
@@ -87,7 +87,7 @@ export const VSwitch = genericComponent<new <T>(
         : props.color
     })
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `switch-${uid}`)
 
     function onChange () {
diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.tsx b/packages/vuetify/src/components/VTooltip/VTooltip.tsx
@@ -11,8 +11,8 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { useScopeId } from '@/composables/scopeId'
 
 // Utilities
-import { computed, mergeProps, ref } from 'vue'
-import { genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
+import { computed, mergeProps, ref, useId } from 'vue'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { StrategyProps } from '@/components/VOverlay/locationStrategies'
@@ -54,7 +54,7 @@ export const VTooltip = genericComponent<OverlaySlots>()({
     const isActive = useProxiedModel(props, 'modelValue')
     const { scopeId } = useScopeId()
 
-    const uid = getUid()
+    const uid = useId()
     const id = computed(() => props.id || `v-tooltip-${uid}`)
 
     const overlay = ref<VOverlay>()
diff --git a/packages/vuetify/src/composables/group.ts b/packages/vuetify/src/composables/group.ts
@@ -2,15 +2,15 @@
 import { useProxiedModel } from './proxiedModel'
 
 // Utilities
-import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, reactive, toRef, unref, watch } from 'vue'
-import { consoleWarn, deepEqual, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory, wrapInArray } from '@/util'
+import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, reactive, toRef, unref, useId, watch } from 'vue'
+import { consoleWarn, deepEqual, findChildrenWithProvide, getCurrentInstance, propsFactory, wrapInArray } from '@/util'
 
 // Types
 import type { ComponentInternalInstance, ComputedRef, ExtractPropTypes, InjectionKey, PropType, Ref, UnwrapRef } from 'vue'
 import type { EventProp } from '@/util'
 
 export interface GroupItem {
-  id: number
+  id: string
   value: Ref<unknown>
   disabled: Ref<boolean | undefined>
   useIndexAsValue?: boolean
@@ -28,15 +28,15 @@ export interface GroupProps {
 
 export interface GroupProvide {
   register: (item: GroupItem, cmp: ComponentInternalInstance) => void
-  unregister: (id: number) => void
-  select: (id: number, value: boolean) => void
-  selected: Ref<Readonly<number[]>>
-  isSelected: (id: number) => boolean
+  unregister: (id: string) => void
+  select: (id: string, value: boolean) => void
+  selected: Ref<Readonly<string[]>>
+  isSelected: (id: string) => boolean
   prev: () => void
   next: () => void
   selectedClass: Ref<string | undefined>
   items: ComputedRef<{
-    id: number
+    id: string
     value: unknown
     disabled: boolean | undefined
   }[]>
@@ -45,7 +45,7 @@ export interface GroupProvide {
 }
 
 export interface GroupItemProvide {
-  id: number
+  id: string
   isSelected: Ref<boolean>
   isFirst: Ref<boolean>
   isLast: Ref<boolean>
@@ -103,7 +103,7 @@ export function useGroupItem (
     )
   }
 
-  const id = getUid()
+  const id = useId()
 
   provide(Symbol.for(`${injectKey.description}:id`), id)
 
@@ -202,7 +202,7 @@ export function useGroup (
     }
   }
 
-  function unregister (id: number) {
+  function unregister (id: string) {
     if (isUnmounted) return
 
     // TODO: re-evaluate this line's importance in the future
@@ -240,7 +240,7 @@ export function useGroup (
     }
   })
 
-  function select (id: number, value?: boolean) {
+  function select (id: string, value?: boolean) {
     const item = items.find(item => item.id === id)
     if (value && item?.disabled) return
 
@@ -312,7 +312,7 @@ export function useGroup (
     disabled: toRef(props, 'disabled'),
     prev: () => step(items.length - 1),
     next: () => step(1),
-    isSelected: (id: number) => selected.value.includes(id),
+    isSelected: (id: string) => selected.value.includes(id),
     selectedClass: computed(() => props.selectedClass),
     items: computed(() => items),
     getItemIndex: (value: unknown) => getItemIndex(items, value),
@@ -332,7 +332,7 @@ function getItemIndex (items: UnwrapRef<GroupItem[]>, value: unknown) {
 }
 
 function getIds (items: UnwrapRef<GroupItem[]>, modelValue: any[]) {
-  const ids: number[] = []
+  const ids: string[] = []
 
   modelValue.forEach(value => {
     const item = items.find(item => deepEqual(value, item.value))
diff --git a/packages/vuetify/src/composables/layout.ts b/packages/vuetify/src/composables/layout.ts
diff --git a/packages/vuetify/src/composables/nested/nested.ts b/packages/vuetify/src/composables/nested/nested.ts
diff --git a/packages/vuetify/src/composables/validation.ts b/packages/vuetify/src/composables/validation.ts
diff --git a/packages/vuetify/src/framework.ts b/packages/vuetify/src/framework.ts
diff --git a/packages/vuetify/src/util/getCurrentInstance.ts b/packages/vuetify/src/util/getCurrentInstance.ts

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ type VCarouselSlots = VWindowSlots & {`
`54`	`54`	`item: {`
`55`	`55`	`props: Record<string, any>`
`56`	`56`	`item: {`
`57`		`- id: number`
	`57`	`+ id: string`
`58`	`58`	`value: unknown`
`59`	`59`	`disabled: boolean \| undefined`
`60`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,11 +41,11 @@ export const makeVChipGroupProps = propsFactory({`
`41`	`41`
`42`	`42`	`type VChipGroupSlots = {`
`43`	`43`	`default: {`
`44`		`- isSelected: (id: number) => boolean`
`45`		`- select: (id: number, value: boolean) => void`
	`44`	`+ isSelected: (id: string) => boolean`
	`45`	`+ select: (id: string, value: boolean) => void`
`46`	`46`	`next: () => void`
`47`	`47`	`prev: () => void`
`48`		`- selected: readonly number[]`
	`48`	`+ selected: readonly string[]`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`
Original file line number	Diff line number	Diff line change
`@@ -26,11 +26,11 @@ export const makeVItemGroupProps = propsFactory({`
`26`	`26`
`27`	`27`	`type VItemGroupSlots = {`
`28`	`28`	`default: {`
`29`		`- isSelected: (id: number) => boolean`
`30`		`- select: (id: number, value: boolean) => void`
	`29`	`+ isSelected: (id: string) => boolean`
	`30`	`+ select: (id: string, value: boolean) => void`
`31`	`31`	`next: () => void`
`32`	`32`	`prev: () => void`
`33`		`- selected: readonly number[]`
	`33`	`+ selected: readonly string[]`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`