fix(VCounter): add error color when max is exceeded

fixes #19615
vuetifyjs · Apr 15, 2024 · d4921d8 · d4921d8
1 parent 702bb50
commit d4921d8
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VCounter/VCounter.tsx b/packages/vuetify/src/components/VCounter/VCounter.tsx
@@ -17,6 +17,7 @@ import type { Component } from 'vue'
 
 export const makeVCounterProps = propsFactory({
  active: Boolean,
+ disabled: Boolean,
  max: [Number, String],
  value: {
  type: [Number, String],
@@ -57,6 +58,10 @@ export const VCounter = genericComponent<VCounterSlots>()({
  v-show={ props.active }
  class={[
  'v-counter',
+ {
+ 'text-error': props.max && !props.disabled &&
+ parseFloat(props.value) > parseFloat(props.max),
+ },
  props.class,
  ]}
  style={ props.style }

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -279,6 +279,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
  <VCounter
  active={ !!model.value?.length }
  value={ counterValue.value }
+ disabled={ props.disabled }
  v-slots:default={ slots.counter }
  />
  </>

diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -276,6 +276,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
  active={ props.persistentCounter || isFocused.value }
  value={ counterValue.value }
  max={ max.value }
+ disabled={ props.disabled }
  v-slots:default={ slots.counter }
  />
  </>

diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -327,6 +327,7 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
  active={ props.persistentCounter || isFocused.value }
  value={ counterValue.value }
  max={ max.value }
+ disabled={ props.disabled }
  v-slots:default={ slots.counter }
  />
  </>