feat(VTextField): add counter scoped slot (#12634)

resolves #9548
vuetifyjs · Dec 23, 2020 · ed46cfb · ed46cfb
1 parent 6297a85
commit ed46cfb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 18 deletions.
diff --git a/packages/api-generator/src/helpers/variables.js b/packages/api-generator/src/helpers/variables.js
@@ -137,6 +137,18 @@ const VTextField = {
       props: undefined,
       source: 'v-text-field',
     }),
+    {
+      name: 'counter',
+      source: 'v-text-field',
+      props: {
+        props: {
+          dark: 'boolean',
+          light: 'boolean',
+          max: 'string | number',
+          value: 'string',
+        },
+      },
+    },
   ],
 }
 

diff --git a/packages/docs/src/examples/v-text-field/prop-counter.vue b/packages/docs/src/examples/v-text-field/prop-counter.vue
@@ -35,10 +35,11 @@
         >
           <v-text-field
             v-model="title"
-            :rules="rules"
-            counter="25"
-            filled
-            label="Filled"
+            :rules="wordsRules"
+            counter="5"
+            hint="This field counts words instead of characters"
+            label="Custom counter from prop"
+            :counter-value="v => v.trim().split(' ').length"
           ></v-text-field>
         </v-col>
 
@@ -48,11 +49,15 @@
         >
           <v-text-field
             v-model="title"
-            :rules="rules"
-            counter="25"
-            label="Outlined"
-            outlined
-          ></v-text-field>
+            :rules="wordsRules"
+            counter="5"
+            hint="This field counts words instead of characters"
+            label="Custom counter from slot"
+          >
+            <template v-slot:counter="{ props }">
+              <v-counter v-bind="props" :value="title.trim().split(' ').length"></v-counter>
+            </template>
+          </v-text-field>
         </v-col>
       </v-row>
     </v-container>
@@ -66,6 +71,7 @@
         title: 'Preliminary report',
         description: 'California is a state in the western United States',
         rules: [v => v.length <= 25 || 'Max 25 characters'],
+        wordsRules: [v => v.trim().split(' ').length <= 5 || 'Max 5 words'],
       }
     },
   }

diff --git a/packages/docs/src/pages/en/components/text-fields.md b/packages/docs/src/pages/en/components/text-fields.md
@@ -31,7 +31,7 @@ A simple text field with placeholder and/or label.
 
 #### Counter
 
-Use a **counter** prop to inform a user of the character limit. The counter does not perform any validation by itself. You will need to pair it with either the internal validation system, or a 3rd party library. You can use it on regular, box or outlined text fields.
+Use a **counter** prop to inform a user of the character limit. The counter does not perform any validation by itself - you will need to pair it with either the internal validation system, or a 3rd party library. The counter can be customised with the **counter-value** prop and **counter** scoped slot.
 
 <example file="v-text-field/prop-counter" />
 

diff --git a/packages/vuetify/src/components/VTextField/VTextField.ts b/packages/vuetify/src/components/VTextField/VTextField.ts
@@ -311,14 +311,14 @@ export default baseMixins.extend<options>().extend({
 
       const max = this.counter === true ? this.attrs$.maxlength : this.counter
 
-      return this.$createElement(VCounter, {
-        props: {
-          dark: this.dark,
-          light: this.light,
-          max,
-          value: this.computedCounterValue,
-        },
-      })
+      const props = {
+        dark: this.dark,
+        light: this.light,
+        max,
+        value: this.computedCounterValue,
+      }
+
+      return this.$scopedSlots.counter?.({ props }) ?? this.$createElement(VCounter, { props })
     },
     genControl () {
       return VInput.options.methods.genControl.call(this)