feat(VSelect): port to v3

packages/vuetify/src/components/VField/VField.sass

@@ -20,6 +20,34 @@
   grid-area: control
   position: relative
 
+  &,
+  .v-icon
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
+
+  &--error,
+  &--disabled
+    .v-messages,
+    .v-icon
+      color: inherit
+
+  .v-label
+    color: inherit
+
+  &--focused
+    &,
+    .v-label
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
+
+  &--error
+    color: rgb(var(--v-theme-error))
+
+  &--disabled
+    pointer-events: none
+
+    &,
+    input
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity))
+
   --v-field-padding-start: #{$field-control-padding-start}
   --v-field-padding-end: #{$field-control-padding-end}
   --v-field-padding-top: #{$field-control-padding-top}
@@ -119,12 +147,14 @@
 /* region AFFIXES */
 .v-field__prepend-inner
   grid-area: prepend-inner
+  padding-inline-end: var(--v-field-padding-after)
 
 .v-field__clearable
   grid-area: clear
 
 .v-field__append-inner
   grid-area: append-inner
+  padding-inline-start: var(--v-field-padding-after)
 
 .v-field__field,
 .v-field__prepend-inner,
@@ -142,7 +172,8 @@
 .v-field__clearable
   cursor: pointer
   opacity: 0
-  margin-inline-end: $field-clearable-margin-inline-end
+  margin-inline-start: $field-clearable-margin
+  margin-inline-end: $field-clearable-margin
   transition: $field-transition-timing
   transition-property: opacity, transform, width
 
@@ -187,7 +218,7 @@
       @at-root
         @include tools.density('v-input', $input-density) using ($modifier)
           @at-root #{selector.nest(&, $root)}
-            top: 9px + $modifier * .25
+            top: 7px + $modifier * .25
 
     .v-field--variant-plain &,
     .v-field--variant-underlined &

packages/vuetify/src/components/VField/VField.tsx

@@ -11,10 +11,10 @@ import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
 import { useProxiedModel } from '@/composables/proxiedModel'
-import { useFocus } from '@/composables/focus'
+import { makeFocusProps, useFocus } from '@/composables/focus'
 
 // Utilities
-import { computed, inject, ref, toRef, watch, watchEffect } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import {
   convertToUnit,
   genericComponent,
@@ -24,10 +24,11 @@ import {
   propsFactory,
   standardEasing,
   useRender,
+  wrapInArray,
 } from '@/util'
 
 // Types
-import type { VInputSlot, VInputSymbol } from '@/components/VInput/VInput'
+import type { VInputSlot } from '@/components/VInput/VInput'
 import type { LoaderSlotProps } from '@/composables/loader'
 import type { PropType, Ref } from 'vue'
 import type { MakeSlots } from '@/util'
@@ -36,8 +37,8 @@ const allowedVariants = ['underlined', 'outlined', 'filled', 'contained', 'plain
 type Variant = typeof allowedVariants[number]
 
 export interface DefaultInputSlot {
-  isActive: boolean
-  isFocused: boolean
+  isActive: Ref<boolean>
+  isFocused: Ref<boolean>
   controlRef: Ref<HTMLElement | undefined>
   focus: () => void
   blur: () => void
@@ -71,56 +72,62 @@ export const makeVFieldProps = propsFactory({
   ...makeLoaderProps(),
 }, 'v-field')
 
+export type VFieldSlots = MakeSlots<{
+  clear: []
+  prependInner: [DefaultInputSlot & VInputSlot]
+  appendInner: [DefaultInputSlot & VInputSlot]
+  label: [DefaultInputSlot & VInputSlot]
+  loader: [LoaderSlotProps]
+  default: [VFieldSlot]
+}>
+
 export const VField = genericComponent<new <T>() => {
   $props: {
     modelValue?: T
     'onUpdate:modelValue'?: (val: T) => any
   }
-  $slots: MakeSlots<{
-    clear: []
-    prependInner: [DefaultInputSlot & VInputSlot]
-    appendInner: [DefaultInputSlot & VInputSlot]
-    label: [DefaultInputSlot & VInputSlot]
-    loader: [LoaderSlotProps]
-    default: [VFieldSlot]
-  }>
+  $slots: VFieldSlots
 }>()({
   name: 'VField',
 
   inheritAttrs: false,
 
   props: {
-    active: Boolean,
     disabled: Boolean,
     error: Boolean,
     id: String,
+    modelValue: null,
+
+    ...makeFocusProps(),
     ...makeVFieldProps(),
   },
 
   emits: {
-    'click:clear': (e: Event) => true,
+    'click:clear': (e: MouseEvent) => true,
     'click:prepend-inner': (e: MouseEvent) => true,
     'click:append-inner': (e: MouseEvent) => true,
-    'click:control': (props: DefaultInputSlot) => true,
-    'update:active': (active: boolean) => true,
+    'click:control': (e: MouseEvent) => true,
+    'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: any) => true,
   },
 
   setup (props, { attrs, emit, slots }) {
+    const model = useProxiedModel(props, 'modelValue')
+
     const { themeClasses } = provideTheme(props)
     const { loaderClasses } = useLoader(props)
-    const isActive = useProxiedModel(props, 'active')
-    const { isFocused, focus, blur } = useFocus()
+    const { focusClasses, isFocused, focus, blur } = useFocus(props)
+
+    const isDirty = computed(() => wrapInArray(model.value || []).length > 0)
+    const isActive = computed(() => isDirty.value || isFocused.value)
+    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
     const uid = getUid()
+    const id = computed(() => props.id || `input-${uid}`)
 
     const labelRef = ref<VFieldLabel>()
     const floatingLabelRef = ref<VFieldLabel>()
     const controlRef = ref<HTMLElement>()
-    const id = computed(() => props.id || `input-${uid}`)
-    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
-
-    watchEffect(() => isActive.value = isFocused.value)
 
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
     const { textColorClasses, textColorStyles } = useTextColor(computed(() => {
@@ -168,8 +175,8 @@ export const VField = genericComponent<new <T>() => {
     }, { flush: 'post' })
 
     const slotProps = computed<DefaultInputSlot>(() => ({
-      isActive: isActive.value,
-      isFocused: isFocused.value,
+      isActive,
+      isFocused,
       controlRef,
       blur,
       focus,
@@ -180,11 +187,9 @@ export const VField = genericComponent<new <T>() => {
         e.preventDefault()
       }
 
-      emit('click:control', slotProps.value)
+      emit('click:control', e)
     }
 
-    const VInput = inject('VInput' as any as typeof VInputSymbol, undefined)
-
     useRender(() => {
       const isOutlined = props.variant === 'outlined'
       const hasPrepend = (slots.prependInner || props.prependInnerIcon)
@@ -204,7 +209,8 @@ export const VField = genericComponent<new <T>() => {
             {
               'v-field--active': isActive.value,
               'v-field--appended': hasAppend,
-              'v-field--focused': isFocused.value,
+              'v-field--disabled': props.disabled,
+              'v-field--error': props.error,
               'v-field--has-background': !!props.bgColor,
               'v-field--persistent-clear': props.persistentClear,
               'v-field--prepended': hasPrepend,
@@ -213,8 +219,9 @@ export const VField = genericComponent<new <T>() => {
               [`v-field--variant-${props.variant}`]: true,
             },
             themeClasses.value,
-            loaderClasses.value,
             backgroundColorClasses.value,
+            focusClasses.value,
+            loaderClasses.value,
             textColorClasses.value,
           ]}
           style={[
@@ -229,7 +236,7 @@ export const VField = genericComponent<new <T>() => {
           <LoaderSlot
             name="v-field"
             active={ props.loading }
-            color={ VInput ? (!VInput.value.isValid.value ? undefined : props.color) : props.color }
+            color={ props.error ? 'error' : props.color }
             v-slots={{ default: slots.loader }}
           />
 
@@ -242,7 +249,7 @@ export const VField = genericComponent<new <T>() => {
                 <VIcon icon={ props.prependInnerIcon } />
               ) }
 
-              { slots?.prependInner?.(VInput?.value) }
+              { slots?.prependInner?.(slotProps.value) }
             </div>
           ) }
 
@@ -258,13 +265,10 @@ export const VField = genericComponent<new <T>() => {
             </VFieldLabel>
 
             { slots.default?.({
-              ...VInput?.value,
               ...slotProps.value,
               props: {
                 id: id.value,
                 class: 'v-field__input',
-                onFocus: () => (isFocused.value = true),
-                onBlur: () => (isFocused.value = false),
               },
               focus,
               blur,
@@ -275,12 +279,16 @@ export const VField = genericComponent<new <T>() => {
             <VExpandXTransition>
               <div
                 class="v-field__clearable"
-                onClick={ (e: Event) => emit('click:clear', e) }
-                v-show={ props.active }
+                v-show={ isDirty.value }
               >
                 { slots.clear
                   ? slots.clear()
-                  : <VIcon icon={ props.clearIcon } />
+                  : (
+                    <VIcon
+                      onClick={ (e: MouseEvent) => emit('click:clear', e) }
+                      icon={ props.clearIcon }
+                    />
+                  )
                 }
               </div>
             </VExpandXTransition>
@@ -291,7 +299,7 @@ export const VField = genericComponent<new <T>() => {
               class="v-field__append-inner"
               onClick={ e => emit('click:append-inner', e) }
             >
-              { slots?.appendInner?.(VInput?.value) }
+              { slots?.appendInner?.(slotProps.value) }
 
               { props.appendInnerIcon && (
                 <VIcon icon={ props.appendInnerIcon } />

packages/vuetify/src/components/VField/_variables.scss

@@ -11,7 +11,7 @@ $field-max-width: 100% !default;
 $field-transition-timing: .15s settings.$standard-easing !default;
 $field-subtle-transition-timing: 250ms settings.$standard-easing !default;
 $field-underlined-margin-bottom: 4px !default;
-$field-clearable-margin-inline-end: 4px !default;
+$field-clearable-margin: 4px !default;
 $field-clearable-transition: .15s opacity, .15s width settings.$standard-easing !default;
 
 // CONTROL

packages/vuetify/src/components/VFileInput/VFileInput.sass

@@ -10,40 +10,3 @@
     pointer-events: none
     position: absolute
     width: 0
-
-// Element
-.v-file-input
-  .v-input__control
-    min-width: 0
-
-  .v-input__field
-    max-width: 100%
-    min-width: 0
-
-  .v-input__input
-    overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
-
-    &.v-file-input--chips
-      flex-wrap: wrap
-
-    .v-chip
-      margin-inline-end: $file-input-chip-margin-inline-end
-
-.v-file-input
-  .v-file-input__clearable
-    opacity: 0
-
-  &.v-input--active
-    .v-input__control:hover
-      .v-file-input__clearable
-        opacity: 1
-
-  &.v-input--focused.v-input--active
-    .v-file-input__clearable
-      opacity: 1
-
-
-.v-file-input.v-input--disabled
-  pointer-events: none