feat(VField): create new component (#14064)

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

@@ -0,0 +1,358 @@
+@import ./index
+
+/* region INPUT */
+.v-field
+  font-size: $field-font-size
+  letter-spacing: $field-letter-spacing
+  max-width: $field-max-width
+  transition: color $field-transition-timing
+  --v-field-padding-before: #{$field-control-padding}
+  --v-field-padding-after: #{$field-control-padding}
+
+  .v-field__input
+    opacity: $field-input-opacity
+    width: 100%
+    height: 100%
+    padding-inline-start: var(--v-field-padding-before)
+    padding-inline-end: var(--v-field-padding-after)
+    display: flex
+    align-items: center
+
+    &:focus,
+    &:active
+      outline: none
+
+    // Remove Firefox red outline
+    &:invalid
+      box-shadow: none
+
+  &--variant-plain,
+  &--variant-underlined
+    --v-field-padding-before: 0
+    --v-field-padding-after: 0
+
+  &--prepended
+    --v-field-padding-before: #{$field-control-affixed-inner-padding}
+  &--appended
+    --v-field-padding-after: #{$field-control-affixed-inner-padding}
+
+/* endregion */
+/* region CONTROL */
+.v-field__control
+  align-items: center
+  border-radius: $field-border-radius
+  contain: layout
+  display: flex
+  flex: 1 0
+  grid-area: control
+  height: var(--v-input-control-height)
+  position: relative
+
+  .v-field--prepended &
+    padding-inline-start: $field-control-affixed-padding
+
+  .v-field--appended &
+    padding-inline-end: $field-control-affixed-padding
+
+  .v-field--variant-contained &
+    background: $field-control-contained-background
+    border-color: transparent
+
+    @include elevation($field-control-contained-elevation)
+
+  .v-field--variant-contained &,
+  .v-field--variant-filled &
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+
+  .v-field--variant-plain &,
+  .v-field--variant-underlined &
+    border-radius: 0
+    padding: 0
+
+/* endregion */
+/* region FIELD */
+.v-field__field
+  align-items: center
+  display: flex
+  flex: 1 0
+  height: 100%
+  position: relative
+
+  .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
+
+/* endregion */
+/* region AFFIXES */
+.v-field__prepend-inner,
+.v-field__append-inner,
+.v-field .v-input__prepend,
+.v-field .v-input__append
+  align-items: center
+  display: flex
+  opacity: .6
+  transition: opacity $field-transition-timing
+
+.v-field__prepend-inner,
+.v-field__append-inner,
+.v-input__prepend,
+.v-input__append
+  .v-field--focused &
+    opacity: 1
+
+  .v-field--variant-plain &,
+  .v-field--variant-underlined &
+    $root: &
+    align-self: flex-end
+
+    @at-root
+      @include density('v-input', $input-density) using ($modifier)
+        @at-root #{selector-append(&, $root)}
+          margin-bottom: $field-underlined-margin-bottom + $modifier / 8
+
+.v-field .v-input__prepend,
+.v-field .v-input__append
+  .v-field--variant-plain &,
+  .v-field--variant-underlined &
+    align-self: flex-end
+
+/* endregion */
+/* region LABEL */
+.v-field-label
+  contain: layout paint
+  display: inline-block
+  font-size: $field-label-font-size
+  letter-spacing: $field-letter-spacing
+  min-width: 0
+  max-width: calc(100% - var(--v-field-padding-before) - var(--v-field-padding-after))
+  opacity: .6
+  overflow: hidden
+  pointer-events: none
+  position: absolute
+  text-overflow: ellipsis
+  transform-origin: left center
+  transition: opacity $field-transition-timing, transform $field-transition-timing
+  white-space: nowrap
+
+  margin-inline-start: var(--v-field-padding-before)
+  margin-inline-end: var(--v-field-padding-after)
+
+  .v-field--active &
+    visibility: hidden
+
+  .v-field--focused &
+    opacity: 1
+
+  .v-field--variant-plain &,
+  .v-field--variant-underlined &
+    $root: &
+
+    @at-root
+      @include density('v-input', $input-density) using ($modifier)
+        @at-root #{selector-append(&, $root)}
+          bottom: 4px + $modifier / 8
+
+  &--floating
+    --v-field-label-scale: #{$field-label-floating-scale}em
+    font-size: var(--v-field-label-scale)
+    visibility: hidden
+    max-width: 100%
+
+    .v-field.v-field--active &
+      visibility: visible
+
+    .v-field--variant-contained &,
+    .v-field--variant-filled &
+      transform: translateY(calc(var(--v-input-control-height) / 56 * -12))
+
+    .v-field--variant-plain &,
+    .v-field--variant-underlined &
+      transform: translateY(-24px)
+      margin: 0
+
+    .v-field--variant-outlined &
+      transform: translateY(-50%)
+      transform-origin: center
+      position: static
+      margin: 0 4px
+
+/* endregion */
+/* region OUTLINE */
+.v-field__outline
+  --v-field-border-width: #{$field-border-width}
+  --v-field-border-opacity: #{$field-outline-opacity}
+  align-items: stretch
+  contain: layout
+  display: flex
+  height: 100%
+  left: 0
+  pointer-events: none
+  position: absolute
+  right: 0
+  width: 100%
+
+  .v-field__control:hover &
+    --v-field-border-opacity: var(--v-high-emphasis-opacity)
+
+  .v-field.v-field--focused &
+    --v-field-border-opacity: 1
+
+  .v-field--variant-outlined.v-field--focused &
+    --v-field-border-width: #{$field-focused-border-width}
+
+  .v-field--variant-filled &,
+  .v-field--variant-underlined &
+    &::before
+      border-style: solid
+      border-width: 0 0 var(--v-field-border-width)
+      opacity: var(--v-field-border-opacity)
+      transition: opacity $field-subtle-transition-timing
+      @include absolute()
+
+  .v-field--variant-filled &,
+  .v-field--variant-underlined &
+    &::after
+      border-color: currentColor
+      border-style: solid
+      border-width: 0 0 $field-focused-border-width
+      transition: transform $field-transition-timing
+      transform: scaleX(0)
+      @include absolute()
+
+      @at-root #{selector-append('.v-field--focused', &)}
+        transform: scaleX(1)
+
+  .v-field--variant-outlined &
+    border-radius: inherit
+
+    &__start,
+    &__notch::before,
+    &__notch::after,
+    &__end
+      border: 0 solid currentColor
+      opacity: var(--v-field-border-opacity)
+      transition: opacity $field-subtle-transition-timing
+
+    &__start
+      flex: 0 0 $field-control-affixed-padding
+      border-top-width: var(--v-field-border-width)
+      border-bottom-width: var(--v-field-border-width)
+      border-inline-start-width: var(--v-field-border-width)
+
+      @include ltr()
+        border-radius: $field-border-radius 0 0 $field-border-radius
+
+      @include rtl()
+        border-radius: 0 $field-border-radius $field-border-radius 0
+
+    &__notch
+      flex: none
+      position: relative
+      border-width: 0 0 var(--v-field-border-width)
+
+      &::before,
+      &::after
+        opacity: var(--v-field-border-opacity)
+        transition: opacity $field-subtle-transition-timing
+        @include absolute()
+
+      &::before
+        border-width: var(--v-field-border-width) 0 0
+
+      &::after
+        bottom: 0
+        border-width: 0 0 var(--v-field-border-width)
+
+      @at-root #{selector-append('.v-field--active', &)}
+        &::before
+          opacity: 0
+
+    &__end
+      flex: 1
+      border-top-width: var(--v-field-border-width)
+      border-bottom-width: var(--v-field-border-width)
+      border-inline-end-width: var(--v-field-border-width)
+
+      @include ltr()
+        border-radius: 0 $field-border-radius $field-border-radius 0
+
+      @include rtl()
+        border-radius: $field-border-radius 0 0 $field-border-radius
+
+/* endregion */
+/* region DETAILS */
+.v-input__details
+  .v-field--variant-plain &,
+  .v-field--variant-underlined &
+    padding-inline-start: 0
+    padding-inline-end: 0
+
+/* endregion */
+/* region OVERLAY */
+.v-field--variant-filled
+  .v-field__overlay
+    background-color: rgb(var(--v-theme-on-surface))
+    border-radius: inherit
+    opacity: $field-overlay-filled-opacity
+    pointer-events: none
+    transition: opacity $field-subtle-transition-timing
+    @include absolute()
+
+  &.v-field--has-background .v-field__overlay
+    opacity: 0
+
+  .v-field__control:hover .v-field__overlay
+    opacity: calc(#{$field-overlay-filled-opacity + map-get($states, 'hover')} * var(--v-theme-overlay-multiplier))
+
+  &.v-field.v-field--focused .v-field__overlay
+    opacity: calc(#{$field-overlay-filled-opacity + map-get($states, 'focus')} * var(--v-theme-overlay-multiplier))
+
+/* endregion */
+/* region MODIFIERS */
+.v-field--reverse
+  .v-field__input
+    @include ltr()
+      text-align: right
+
+    @include rtl()
+      text-align: left
+
+  .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
+
+/* endregion */