feat(VField): support border prop

vuetifyjs · May 15, 2024 · 6864350 · 6864350
1 parent aee83f0
commit 6864350
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/packages/vuetify/src/components/VField/VField.sass b/packages/vuetify/src/components/VField/VField.sass
@@ -324,6 +324,13 @@
     position: absolute
     right: 0
     width: 100%
+
+    @include tools.border($field-border-prop...)
+
+    &.v-field__outline--border
+      --v-field-border-width: 0
+      --v-field-border-opacity: 0
+
 
     @media (hover: hover)
       .v-field:hover &
@@ -336,7 +343,7 @@
     .v-input.v-input--error &
       --v-field-border-opacity: 1
 
-    .v-field--variant-outlined.v-field--focused &
+    .v-field--variant-outlined.v-field--focused &:not(.v-field__outline--border)
       --v-field-border-width: #{$field-focused-border-width}
 
     .v-field--variant-filled &,

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -8,6 +8,7 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { useInputIcon } from '@/components/VInput/InputIcon'
 
 // Composables
+import { makeBorderProps, useBorder } from '@/composables/border'
 import { useBackgroundColor, useTextColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
 import { makeFocusProps, useFocus } from '@/composables/focus'
@@ -38,7 +39,7 @@ import type { PropType, Ref } from 'vue'
 import type { LoaderSlotProps } from '@/composables/loader'
 import type { GenericProps } from '@/util'
 
-const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'] as const
+const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain', 'border'] as const
 type Variant = typeof allowedVariants[number]
 
 export interface DefaultInputSlot {
@@ -90,6 +91,7 @@ export const makeVFieldProps = propsFactory({
   'onClick:appendInner': EventProp<[MouseEvent]>(),
   'onClick:prependInner': EventProp<[MouseEvent]>(),
 
+  ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeLoaderProps(),
   ...makeRoundedProps(),
@@ -119,6 +121,7 @@ export const VField = genericComponent<new <T>(
   props: {
     id: String,
 
+    ...makeBorderProps(),
     ...makeFocusProps(),
     ...makeVFieldProps(),
   },
@@ -130,12 +133,14 @@ export const VField = genericComponent<new <T>(
 
   setup (props, { attrs, emit, slots }) {
     const { themeClasses } = provideTheme(props)
+    const { borderClasses } = useBorder(props, 'v-field__outline')
     const { loaderClasses } = useLoader(props)
     const { focusClasses, isFocused, focus, blur } = useFocus(props)
     const { InputIcon } = useInputIcon(props)
     const { roundedClasses } = useRounded(props)
     const { rtlClasses } = useRtl()
 
+    const variant = computed(() => props.border ? 'outlined' : props.variant)
     const isActive = computed(() => props.dirty || props.active)
     const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))
 
@@ -146,7 +151,7 @@ export const VField = genericComponent<new <T>(
     const labelRef = ref<VFieldLabel>()
     const floatingLabelRef = ref<VFieldLabel>()
     const controlRef = ref<HTMLElement>()
-    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant))
+    const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(variant.value))
 
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
     const { textColorClasses, textColorStyles } = useTextColor(computed(() => {
@@ -221,7 +226,7 @@ export const VField = genericComponent<new <T>(
     }
 
     useRender(() => {
-      const isOutlined = props.variant === 'outlined'
+      const isOutlined = variant.value === 'outlined' || props.border
       const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon)
       const hasClear = !!(props.clearable || slots.clear)
       const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear)
@@ -253,7 +258,7 @@ export const VField = genericComponent<new <T>(
               'v-field--reverse': props.reverse,
               'v-field--single-line': props.singleLine,
               'v-field--no-label': !label(),
-              [`v-field--variant-${props.variant}`]: true,
+              [`v-field--variant-${variant.value}`]: true,
             },
             themeClasses.value,
             backgroundColorClasses.value,
@@ -290,7 +295,7 @@ export const VField = genericComponent<new <T>(
           )}
 
           <div class="v-field__field" data-no-activator="">
-            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && (
+            {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(variant.value) && hasLabel.value && (
               <VFieldLabel
                 key="floating-label"
                 ref={ floatingLabelRef }
@@ -372,6 +377,7 @@ export const VField = genericComponent<new <T>(
           <div
             class={[
               'v-field__outline',
+              borderClasses.value,
               textColorClasses.value,
             ]}
             style={ textColorStyles.value }

diff --git a/packages/vuetify/src/components/VField/_variables.scss b/packages/vuetify/src/components/VField/_variables.scss
@@ -49,6 +49,20 @@ $field-input-row-gap: 8px !default;
 // LABEL
 $field-label-floating-scale: .75 !default;
 
+// BORDER
+$field-border-prop-color: settings.$border-color-root !default;
+$field-border-prop-radius: settings.$border-radius-root !default;
+$field-border-prop-style: settings.$border-style-root !default;
+$field-border-prop-thin-width: thin !default;
+$field-border-prop-width: 0 !default;
+
+$field-border-prop: (
+  $field-border-prop-color,
+  $field-border-prop-style,
+  $field-border-prop-width,
+  $field-border-prop-thin-width
+) !default;
+
 // OUTLINE
 $field-outline-opacity: .38 !default;
 $field-border-width: 1px !default;