refactor(VField): tuning pass (#15251)

vuetifyjs · Jun 23, 2022 · 52dd5f2 · 52dd5f2
1 parent b3175c1
commit 52dd5f2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -3,15 +3,15 @@ import './VField.sass'
 
 // Components
 import { VExpandXTransition } from '@/components/transitions'
-import { VIcon } from '@/components/VIcon'
 import { VFieldLabel } from './VFieldLabel'
+import { VIcon } from '@/components/VIcon'
 
 // Composables
+import { IconValue } from '@/composables/icons'
 import { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'
+import { makeFocusProps, useFocus } from '@/composables/focus'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
-import { makeFocusProps, useFocus } from '@/composables/focus'
-import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { computed, ref, toRef, watch } from 'vue'
@@ -27,10 +27,10 @@ import {
 } from '@/util'
 
 // Types
-import type { VInputSlot } from '@/components/VInput/VInput'
 import type { LoaderSlotProps } from '@/composables/loader'
-import type { PropType, Ref } from 'vue'
 import type { MakeSlots } from '@/util'
+import type { PropType, Ref } from 'vue'
+import type { VInputSlot } from '@/components/VInput/VInput'
 
 const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
 type Variant = typeof allowedVariants[number]

diff --git a/packages/vuetify/src/components/VField/VFieldLabel.tsx b/packages/vuetify/src/components/VField/VFieldLabel.tsx
@@ -2,7 +2,7 @@
 import { VLabel } from '@/components/VLabel'
 
 // Utilities
-import { defineComponent } from '@/util'
+import { defineComponent, useRender } from '@/util'
 
 export const VFieldLabel = defineComponent({
   name: 'VFieldLabel',
@@ -12,18 +12,18 @@ export const VFieldLabel = defineComponent({
   },
 
   setup (props, { slots }) {
-    return () => {
-      return (
-        <VLabel
-          class={[
-            'v-field-label',
-            { 'v-field-label--floating': props.floating },
-          ]}
-          aria-hidden={ props.floating || undefined }
-          v-slots={ slots }
-        />
-      )
-    }
+    useRender(() => (
+      <VLabel
+        class={[
+          'v-field-label',
+          { 'v-field-label--floating': props.floating },
+        ]}
+        aria-hidden={ props.floating || undefined }
+        v-slots={ slots }
+      />
+    ))
+
+    return {}
   },
 })
 

diff --git a/packages/vuetify/src/components/VField/__tests__/VField.spec.cy.tsx b/packages/vuetify/src/components/VField/__tests__/VField.spec.cy.tsx
@@ -0,0 +1,14 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VField } from '..'
+import { generate } from '@/../cypress/templates'
+
+const props = {}
+
+const stories = {
+  Default: <VField />,
+}
+// Tests
+describe('VField', () => {
+  generate({ stories, props, component: VField })
+})