feat(UsaTextInput): add group prop to group input elements

patrickcate · Feb 21, 2022 · 88a44b6 · 88a44b6
1 parent e4eed74
commit 88a44b6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/UsaTextInput/UsaTextInput.test.js b/src/components/UsaTextInput/UsaTextInput.test.js
@@ -289,9 +289,9 @@ describe('UsaTextInput', () => {
       .vue()
       .then(vm => {
         expect(vm.emitted()).to.have.property('update:modelValue')
-        const currentRangeEvent = vm.emitted('update:modelValue')
-        expect(currentRangeEvent).to.have.length(24)
-        expect(currentRangeEvent[currentRangeEvent.length - 1]).to.contain(
+        const currentInputEvent = vm.emitted('update:modelValue')
+        expect(currentInputEvent).to.have.length(24)
+        expect(currentInputEvent[currentInputEvent.length - 1]).to.contain(
           'This is some test text. This is some more text.'
         )
       })
@@ -322,9 +322,9 @@ describe('UsaTextInput', () => {
       .vue()
       .then(vm => {
         expect(vm.emitted()).to.have.property('update:modelValue')
-        const currentRangeEvent = vm.emitted('update:modelValue')
-        expect(currentRangeEvent).to.have.length(24)
-        expect(currentRangeEvent[currentRangeEvent.length - 1]).to.contain(
+        const currentInputEvent = vm.emitted('update:modelValue')
+        expect(currentInputEvent).to.have.length(24)
+        expect(currentInputEvent[currentInputEvent.length - 1]).to.contain(
           'This is some test text. This is some more text.'
         )
       })

diff --git a/src/components/UsaTextInput/UsaTextInput.vue b/src/components/UsaTextInput/UsaTextInput.vue
@@ -47,9 +47,13 @@ const props = defineProps({
     },
   },
   modelValue: {
-    type: undefined,
+    type: [String, Number],
     default: '',
   },
+  group: {
+    type: Boolean,
+    default: false,
+  },
   label: {
     type: String,
     default: '',
@@ -152,13 +156,17 @@ const ariaDescribedby = computed(() => {
 
   return ids.length ? ids.join(' ') : null
 })
+
+const groupElements = computed(
+  () => props.group || !!slots.hint || (props.error && !!slots['error-message'])
+)
 </script>
 
 <template>
   <UsaFormGroup
-    :group="!!$slots.hint || (error && !!$slots['error-message'])"
+    :group="groupElements"
     :error="error"
-    :class="props.customClasses?.component"
+    :class="customClasses?.component"
   >
     <UsaLabel
       v-if="label || $slots.label"