feat(VTextField): port to v3 (#13996)

fixes #7872
fixes #12989

Co-authored-by: John Leider <john.j.leider@gmail.com>

packages/vuetify/src/components/VCounter/VCounter.sass

@@ -1,11 +1,5 @@
-@import './_variables.scss'
-
-/* Theme */
-+theme(v-counter) using ($material)
-  color: map-deep-get($material, 'text', 'secondary')
+@import ./index
 
 .v-counter
   flex: 0 1 auto
   font-size: $counter-font-size
-  min-height: $counter-min-height
-  line-height: $counter-line-height

packages/vuetify/src/components/VCounter/VCounter.tsx

@@ -0,0 +1,40 @@
+// Styles
+import './VCounter.sass'
+
+// Utilities
+import { computed, defineComponent } from 'vue'
+
+export const VCounter = defineComponent({
+  name: 'VCounter',
+
+  functional: true,
+
+  props: {
+    max: [Number, String],
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+
+  setup (props, { slots }) {
+    const counter = computed(() => {
+      return props.max ? `${props.value} / ${props.max}` : String(props.value)
+    })
+
+    return () => {
+      return (
+        <div class="v-counter">
+          { slots.default
+            ? slots.default({
+              counter: counter.value,
+              max: props.max,
+              value: props.value,
+            })
+            : counter.value
+          }
+        </div>
+      )
+    }
+  },
+})

packages/vuetify/src/components/VCounter/__tests__/VCounter.spec.ts

@@ -1,59 +1,18 @@
-// @ts-nocheck
-/* eslint-disable */
-
-// Libraries
-// import Vue from 'vue'
-
 // Components
-// import VCounter from '../VCounter'
+import { VCounter } from '..'
 
 // Utilities
-import {
-  createLocalVue,
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-
-describe.skip('VCounter.ts', () => {
-  let mountFunction: (ctx?: object, name?: string) => Wrapper<Vue>
-  let localVue: typeof Vue
+import { createVuetify } from '@/framework'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from '@jest/globals'
 
-  beforeEach(() => {
-    localVue = createLocalVue()
+describe('VDivider', () => {
+  const vuetify = createVuetify()
 
-    mountFunction = (ctx = {}, name = 'add') => {
-      return mount(VCounter, {
-        localVue,
-        context: Object.assign({
-          children: [name],
-          data: {},
-          props: {},
-        }, ctx),
-      })
-    }
-  })
-
-  it('should render component', () => {
-    const wrapper = mountFunction({
-      props: { value: 5, max: 10 },
+  function mountFunction (options = {}) {
+    return mount(VCounter, {
+      global: { plugins: [vuetify] },
+      ...options,
     })
-
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render component in error state', () => {
-    const wrapper = mountFunction({
-      props: { value: 15, max: 10 },
-    })
-
-    expect(wrapper.classes('error--text')).toBe(true)
-  })
-
-  it('should render component if max is not provided', () => {
-    const wrapper = mountFunction({
-      props: { value: 15 },
-    })
-
-    expect(wrapper.element.textContent).toBe('15')
-  })
+  }
 })

packages/vuetify/src/components/VCounter/_index.scss

@@ -0,0 +1,2 @@
+@import '../../styles/styles.sass';
+@import './variables';

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

@@ -1,5 +1,4 @@
-@import '../../styles/styles.sass';
-
+// Defaults
 $counter-font-size: 12px !default;
 $counter-line-height: $counter-font-size !default;
 $counter-min-height: 12px !default;

packages/vuetify/src/components/VCounter/index.ts

@@ -1,4 +1 @@
-import VCounter from './VCounter'
-
-export { VCounter }
-export default VCounter
+export { VCounter } from './VCounter'

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

@@ -36,6 +36,27 @@
   &--appended
     --v-field-padding-after: #{$field-control-affixed-inner-padding}
 
+  &.v-field--variant-contained,
+  &.v-field--variant-filled
+    --v-field-padding-top: 21px
+    --v-field-padding-bottom: 6px
+
+    &.v-field--single-line
+      --v-field-padding-top: 0
+      --v-field-padding-bottom: 0
+
+  &.v-field--variant-plain,
+  &.v-field--variant-underlined
+    $root: &
+
+    --v-field-padding-top: 16px
+    --v-field-padding-bottom: 8px
+
+    @at-root
+      @include density('v-input', $input-density) using ($modifier)
+        @at-root #{selector-append(&, $root)}
+          --v-field-padding-top: #{$field-input-padding-top + $modifier * $field-label-floating-scale}
+
 /* endregion */
 /* region CONTROL */
 .v-field__control
@@ -81,27 +102,8 @@
 
   .v-field__input
     letter-spacing: $field-letter-spacing
-
-    .v-field--variant-contained &,
-    .v-field--variant-filled &
-      padding-top: 21px
-      padding-bottom: 6px
-
-      @at-root #{selector-append('.v-field--single-line', &)}
-        padding-top: 0
-        padding-bottom: 0
-
-    .v-field--variant-plain &,
-    .v-field--variant-underlined &
-      $root: &
-
-      padding-top: 16px
-      padding-bottom: 8px
-
-      @at-root
-        @include density('v-input', $input-density) using ($modifier)
-          @at-root #{selector-append(&, $root)}
-            padding-top: $field-input-padding-top + $modifier * $field-label-floating-scale
+    padding-top: var(--v-field-padding-top, 0)
+    padding-bottom: var(--v-field-padding-bottom, 0)
 
 /* endregion */
 /* region AFFIXES */
@@ -137,6 +139,14 @@
   .v-field--variant-underlined &
     align-self: flex-end
 
+.v-field__clearable
+  opacity: 0
+  transition: $field-clearable-transition
+
+  .v-field--focused &,
+  .v-field__control:hover &
+    opacity: 1
+
 /* endregion */
 /* region LABEL */
 .v-field-label
@@ -308,6 +318,9 @@
     padding-inline-start: 0
     padding-inline-end: 0
 
+.v-field__details
+  transition: inherit
+
 /* endregion */
 /* region OVERLAY */
 .v-field--variant-filled
@@ -337,22 +350,15 @@
 
     @include rtl()
       text-align: left
+.v-field--disabled
+  pointer-events: none
 
-  .v-field-label
-    @include ltr()
-      left: auto
-      right: 0
-
-    @include rtl()
-      left: 0
-      right: auto
-
-  &.v-field--variant-outlined
-    .v-field__outline
-      &__start
-        flex: 1
-
-      &__end
-        flex: 0 0 $field-control-affixed-padding
+  &,
+  input
+    color: $field-disabled-color
 
+  &.v-field--variant-filled,
+  &.v-field--variant-underlined
+    .v-field__outline::before
+      border-image: repeating-linear-gradient(to right, $field-disabled-color 0px, $field-disabled-color 2px, transparent 2px, transparent 4px) 1 repeat
 /* endregion */