feat(BInputGroupAppend)!: remove useless props

Prop id was pretty useless, and since the component doesn't need a dynamic wrapper, tag is removed. (The single root is removed since it's not needed in Vue 3)

feat(BInputGroupPrepend)!: remove useless props

fix(#470): no rounded corners when using BInputGrooupPrepend or BInputGroupAppend

test: fix test files for above changes

Author: VividLemon

packages/bootstrap-vue-3/src/components/BInputGroup/BInputGroupAddon.vue

@@ -1,37 +1,24 @@
 <template>
-  <component :is="tag" :id="id" class="d-flex" :class="computedClasses">
-    <b-input-group-text v-if="isTextBoolean">
-      <slot />
-    </b-input-group-text>
-    <slot v-else />
-  </component>
+  <b-input-group-text v-if="isTextBoolean">
+    <slot />
+  </b-input-group-text>
+  <slot v-else />
 </template>
 
 <script setup lang="ts">
 // import type {BInputGroupAddonProps} from '../../types/components'
 import type {Booleanish} from '../../types'
 import {useBooleanish} from '../../composables'
-import {computed, toRef} from 'vue'
+import {toRef} from 'vue'
 import BInputGroupText from './BInputGroupText.vue'
 
 interface BInputGroupAddonProps {
-  append?: Booleanish
-  id?: string
   isText?: Booleanish
-  tag?: string
 }
 
 const props = withDefaults(defineProps<BInputGroupAddonProps>(), {
-  append: false,
-  tag: 'div',
   isText: false,
 })
 
-const appendBoolean = useBooleanish(toRef(props, 'append'))
 const isTextBoolean = useBooleanish(toRef(props, 'isText'))
-
-const computedClasses = computed(() => ({
-  'input-group-append': appendBoolean.value,
-  'input-group-prepend': !appendBoolean.value,
-}))
 </script>

packages/bootstrap-vue-3/src/components/BInputGroup/BInputGroupAppend.vue

@@ -1,30 +1,19 @@
 <template>
-  <b-input-group-addon v-bind="computedAttrs">
+  <b-input-group-addon :is-text="isText">
     <slot />
   </b-input-group-addon>
 </template>
 
 <script setup lang="ts">
 // import type {BInputGroupAppendProps} from '../../types/components'
 import BInputGroupAddon from './BInputGroupAddon.vue'
-import {computed} from 'vue'
 import type {Booleanish} from '../../types'
 
 interface BInputGroupAppendProps {
-  id?: string
   isText?: Booleanish
-  tag?: string
 }
 
-const props = withDefaults(defineProps<BInputGroupAppendProps>(), {
-  tag: 'div',
+withDefaults(defineProps<BInputGroupAppendProps>(), {
   isText: false,
 })
-
-const computedAttrs = computed(() => ({
-  id: props.id,
-  isText: props.isText,
-  tag: props.tag,
-  append: true,
-}))
 </script>

packages/bootstrap-vue-3/src/components/BInputGroup/BInputGroupPrepend.vue

@@ -1,30 +1,19 @@
 <template>
-  <b-input-group-addon v-bind="computedAttrs">
+  <b-input-group-addon :is-text="isText">
     <slot />
   </b-input-group-addon>
 </template>
 
 <script setup lang="ts">
 // import type {BInputGroupPrependProps} from '../../types/components'
 import BInputGroupAddon from './BInputGroupAddon.vue'
-import {computed} from 'vue'
 import type {Booleanish} from '../../types'
 
 interface BInputGroupPrependProps {
-  id?: string
   isText?: Booleanish
-  tag?: string
 }
 
-const props = withDefaults(defineProps<BInputGroupPrependProps>(), {
-  tag: 'div',
+withDefaults(defineProps<BInputGroupPrependProps>(), {
   isText: false,
 })
-
-const computedAttrs = computed(() => ({
-  id: props.id,
-  isText: props.isText,
-  tag: props.tag,
-  append: false,
-}))
 </script>

packages/bootstrap-vue-3/src/components/BInputGroup/input-group-addon.spec.ts

@@ -2,79 +2,40 @@ import {enableAutoUnmount, mount} from '@vue/test-utils'
 import BInputGroupAddon from './BInputGroupAddon.vue'
 import BInputGroupText from './BInputGroupText.vue'
 import {afterEach, describe, expect, it} from 'vitest'
+import {h} from 'vue'
 
 describe('input-group-addon', () => {
   enableAutoUnmount(afterEach)
 
-  it('tag is div by default', () => {
-    const wrapper = mount(BInputGroupAddon)
-    expect(wrapper.element.tagName).toBe('DIV')
-  })
-
-  it('tag is prop tag', () => {
-    const wrapper = mount(BInputGroupAddon, {
-      props: {tag: 'span'},
-    })
-    expect(wrapper.element.tagName).toBe('SPAN')
-  })
-
-  it('has attr id when prop id', async () => {
-    const wrapper = mount(BInputGroupAddon, {
-      props: {id: 'foobar'},
-    })
-    expect(wrapper.attributes('id')).toBe('foobar')
-    await wrapper.setProps({id: 'bar'})
-    expect(wrapper.attributes('id')).toBe('bar')
-  })
-
-  it('has static class d-flex', () => {
-    const wrapper = mount(BInputGroupAddon)
-    expect(wrapper.classes()).toContain('d-flex')
-  })
-
-  it('has class input-group-append when prop append', () => {
-    const wrapper = mount(BInputGroupAddon, {
-      props: {append: true},
-    })
-    expect(wrapper.classes()).toContain('input-group-append')
-  })
-
-  it('has class input-group-prepend when prop append is false', () => {
+  it('is not wrapped in BInputGroupText when not prop isText', () => {
     const wrapper = mount(BInputGroupAddon, {
-      props: {append: false},
+      props: {isText: false},
     })
-    expect(wrapper.classes()).toContain('input-group-prepend')
+    const $inputgrouptext = wrapper.findComponent(BInputGroupText)
+    expect($inputgrouptext.exists()).toBe(false)
   })
 
-  it('has BInputGroupText when prop isText', () => {
+  it('is wrapped in BInputGroupText when not isText', () => {
     const wrapper = mount(BInputGroupAddon, {
       props: {isText: true},
     })
     const $inputgrouptext = wrapper.findComponent(BInputGroupText)
     expect($inputgrouptext.exists()).toBe(true)
   })
 
-  it('does not have BInputGroupText when prop not isText', () => {
+  it('renders default sloot when not prop isText', () => {
     const wrapper = mount(BInputGroupAddon, {
-      props: {isText: false},
+      slots: {default: 'foobar'},
     })
-    const $inputgrouptext = wrapper.findComponent(BInputGroupText)
-    expect($inputgrouptext.exists()).toBe(false)
+    expect(wrapper.text()).toBe('foobar')
   })
 
-  it('BInputGroupText renders default slot', () => {
+  it('renders default sloot when not prop isText', () => {
     const wrapper = mount(BInputGroupAddon, {
-      props: {isText: true},
       slots: {default: 'foobar'},
+      props: {isText: true},
     })
     const $inputgrouptext = wrapper.getComponent(BInputGroupText)
     expect($inputgrouptext.text()).toBe('foobar')
   })
-
-  it('renders default slot', () => {
-    const wrapper = mount(BInputGroupAddon, {
-      slots: {default: 'foobar'},
-    })
-    expect(wrapper.text()).toBe('foobar')
-  })
 })

packages/bootstrap-vue-3/src/components/BInputGroup/input-group-append.spec.ts

@@ -12,16 +12,6 @@ describe('input-group-append', () => {
     expect($inputgroupaddon.exists()).toBe(true)
   })
 
-  it('BInputGroupAddon is given prop id', async () => {
-    const wrapper = mount(BInputGroupAppend, {
-      props: {id: 'foobar'},
-    })
-    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
-    expect($inputgroupaddon.props('id')).toBe('foobar')
-    await wrapper.setProps({id: 'foo'})
-    expect($inputgroupaddon.props('id')).toBe('foo')
-  })
-
   it('BInputGroupAddon is given prop isText', async () => {
     const wrapper = mount(BInputGroupAppend, {
       props: {isText: true},
@@ -32,19 +22,10 @@ describe('input-group-append', () => {
     expect($inputgroupaddon.props('isText')).toBe(false)
   })
 
-  it('BInputGroupAddon is given prop tag', async () => {
+  it('renders default slot', () => {
     const wrapper = mount(BInputGroupAppend, {
-      props: {tag: 'span'},
+      slots: {default: 'foobar'},
     })
-    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
-    expect($inputgroupaddon.props('tag')).toBe('span')
-    await wrapper.setProps({tag: 'div'})
-    expect($inputgroupaddon.props('tag')).toBe('div')
-  })
-
-  it('BInputGroupAddon is given prop append to be true', () => {
-    const wrapper = mount(BInputGroupAppend)
-    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
-    expect($inputgroupaddon.props('append')).toBe(true)
+    expect(wrapper.text()).toBe('foobar')
   })
 })

packages/bootstrap-vue-3/src/components/BInputGroup/input-group.prepend.spec.ts

@@ -12,16 +12,6 @@ describe('input-group-prepend', () => {
     expect($inputgroupaddon.exists()).toBe(true)
   })
 
-  it('BInputGroupAddon is given prop id', async () => {
-    const wrapper = mount(BInputGroupPrepend, {
-      props: {id: 'foobar'},
-    })
-    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
-    expect($inputgroupaddon.props('id')).toBe('foobar')
-    await wrapper.setProps({id: 'foo'})
-    expect($inputgroupaddon.props('id')).toBe('foo')
-  })
-
   it('BInputGroupAddon is given prop isText', async () => {
     const wrapper = mount(BInputGroupPrepend, {
       props: {isText: true},
@@ -32,19 +22,10 @@ describe('input-group-prepend', () => {
     expect($inputgroupaddon.props('isText')).toBe(false)
   })
 
-  it('BInputGroupAddon is given prop tag', async () => {
+  it('renders default slot', () => {
     const wrapper = mount(BInputGroupPrepend, {
-      props: {tag: 'span'},
+      slots: {default: 'foobar'},
     })
-    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
-    expect($inputgroupaddon.props('tag')).toBe('span')
-    await wrapper.setProps({tag: 'div'})
-    expect($inputgroupaddon.props('tag')).toBe('div')
-  })
-
-  it('BInputGroupAddon is given prop append to be false', () => {
-    const wrapper = mount(BInputGroupPrepend)
-    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
-    expect($inputgroupaddon.props('append')).toBe(false)
+    expect(wrapper.text()).toBe('foobar')
   })
 })