refactor(BInputGroupAppend): move attrs

refactor(BInputGroupPrepend): move attrs

feat(BInputGroupText): add optional text prop

refactor(BProgress): move attrs out of template

test: progress.spec.ts

test: input-group-addon.spec.ts

test: input-group-append.spec.ts

test: input-group-text.spec.ts

test: input-group-prepend.spec.ts

Author: VividLemon

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

@@ -1,14 +1,13 @@
 <template>
-  <b-input-group-addon :id="id" :is-text="isTextBoolean" :tag="tag" append>
+  <b-input-group-addon v-bind="computedAttrs">
     <slot />
   </b-input-group-addon>
 </template>
 
 <script setup lang="ts">
 // import type {BInputGroupAppendProps} from '../../types/components'
 import BInputGroupAddon from './BInputGroupAddon.vue'
-import {toRef} from 'vue'
-import {useBooleanish} from '../../composables'
+import {computed} from 'vue'
 import type {Booleanish} from '../../types'
 
 interface BInputGroupAppendProps {
@@ -22,5 +21,10 @@ const props = withDefaults(defineProps<BInputGroupAppendProps>(), {
   isText: false,
 })
 
-const isTextBoolean = useBooleanish(toRef(props, 'isText'))
+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,14 +1,13 @@
 <template>
-  <b-input-group-addon :id="id" :is-text="isTextBoolean" :tag="tag" :append="false">
+  <b-input-group-addon v-bind="computedAttrs">
     <slot />
   </b-input-group-addon>
 </template>
 
 <script setup lang="ts">
 // import type {BInputGroupPrependProps} from '../../types/components'
 import BInputGroupAddon from './BInputGroupAddon.vue'
-import {toRef} from 'vue'
-import {useBooleanish} from '../../composables'
+import {computed} from 'vue'
 import type {Booleanish} from '../../types'
 
 interface BInputGroupPrependProps {
@@ -22,5 +21,10 @@ const props = withDefaults(defineProps<BInputGroupPrependProps>(), {
   isText: false,
 })
 
-const isTextBoolean = useBooleanish(toRef(props, 'isText'))
+const computedAttrs = computed(() => ({
+  id: props.id,
+  isText: props.isText,
+  tag: props.tag,
+  append: false,
+}))
 </script>

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

@@ -1,6 +1,8 @@
 <template>
   <component :is="tag" class="input-group-text">
-    <slot />
+    <slot>
+      {{ text }}
+    </slot>
   </component>
 </template>
 
@@ -9,6 +11,7 @@
 
 interface BInputGroupTextProps {
   tag?: string
+  text?: string
 }
 
 withDefaults(defineProps<BInputGroupTextProps>(), {

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

@@ -0,0 +1,80 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import BInputGroupAddon from './BInputGroupAddon.vue'
+import BInputGroupText from './BInputGroupText.vue'
+import {afterEach, describe, expect, it} from 'vitest'
+
+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', () => {
+    const wrapper = mount(BInputGroupAddon, {
+      props: {append: false},
+    })
+    expect(wrapper.classes()).toContain('input-group-prepend')
+  })
+
+  it('has BInputGroupText when prop 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', () => {
+    const wrapper = mount(BInputGroupAddon, {
+      props: {isText: false},
+    })
+    const $inputgrouptext = wrapper.findComponent(BInputGroupText)
+    expect($inputgrouptext.exists()).toBe(false)
+  })
+
+  it('BInputGroupText renders default slot', () => {
+    const wrapper = mount(BInputGroupAddon, {
+      props: {isText: true},
+      slots: {default: 'foobar'},
+    })
+    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

@@ -0,0 +1,50 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import BInputGroupAppend from './BInputGroupAppend.vue'
+import BInputGroupAddon from './BInputGroupAddon.vue'
+import {afterEach, describe, expect, it} from 'vitest'
+
+describe('input-group-append', () => {
+  enableAutoUnmount(afterEach)
+
+  it('child is BInputGroupAddon', () => {
+    const wrapper = mount(BInputGroupAppend)
+    const $inputgroupaddon = wrapper.findComponent(BInputGroupAddon)
+    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},
+    })
+    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
+    expect($inputgroupaddon.props('isText')).toBe(true)
+    await wrapper.setProps({isText: false})
+    expect($inputgroupaddon.props('isText')).toBe(false)
+  })
+
+  it('BInputGroupAddon is given prop tag', async () => {
+    const wrapper = mount(BInputGroupAppend, {
+      props: {tag: 'span'},
+    })
+    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)
+  })
+})

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

@@ -0,0 +1,46 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import BInputGroupText from './BInputGroupText.vue'
+import {afterEach, describe, expect, it} from 'vitest'
+
+describe('input-group-text', () => {
+  enableAutoUnmount(afterEach)
+
+  it('tag is div by default', () => {
+    const wrapper = mount(BInputGroupText)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('tag is prop tag', () => {
+    const wrapper = mount(BInputGroupText, {
+      props: {tag: 'span'},
+    })
+    expect(wrapper.element.tagName).toBe('SPAN')
+  })
+
+  it('has static class input-group-text', () => {
+    const wrapper = mount(BInputGroupText)
+    expect(wrapper.classes()).toContain('input-group-text')
+  })
+
+  it('renders default slot', () => {
+    const wrapper = mount(BInputGroupText, {
+      slots: {default: 'foobar'},
+    })
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('renders prop text', () => {
+    const wrapper = mount(BInputGroupText, {
+      props: {text: 'foobar'},
+    })
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('renders default slot over prop text', () => {
+    const wrapper = mount(BInputGroupText, {
+      slots: {default: 'slots'},
+      props: {text: 'props'},
+    })
+    expect(wrapper.text()).toBe('slots')
+  })
+})

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

@@ -0,0 +1,50 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import BInputGroupPrepend from './BInputGroupPrepend.vue'
+import BInputGroupAddon from './BInputGroupAddon.vue'
+import {afterEach, describe, expect, it} from 'vitest'
+
+describe('input-group-prepend', () => {
+  enableAutoUnmount(afterEach)
+
+  it('child is BInputGroupAddon', () => {
+    const wrapper = mount(BInputGroupPrepend)
+    const $inputgroupaddon = wrapper.findComponent(BInputGroupAddon)
+    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},
+    })
+    const $inputgroupaddon = wrapper.getComponent(BInputGroupAddon)
+    expect($inputgroupaddon.props('isText')).toBe(true)
+    await wrapper.setProps({isText: false})
+    expect($inputgroupaddon.props('isText')).toBe(false)
+  })
+
+  it('BInputGroupAddon is given prop tag', async () => {
+    const wrapper = mount(BInputGroupPrepend, {
+      props: {tag: 'span'},
+    })
+    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)
+  })
+})

packages/bootstrap-vue-3/src/components/BProgress/BProgress.vue

@@ -1,18 +1,7 @@
 <template>
   <div class="progress" :style="{height}">
     <slot>
-      <b-progress-bar
-        v-bind="{
-          animated: animatedBoolean,
-          max,
-          precision,
-          showProgress: showProgressBoolean,
-          showValue: showValueBoolean,
-          striped: stripedBoolean,
-          value,
-          variant,
-        }"
-      />
+      <b-progress-bar v-bind="computedAttrs" />
     </slot>
   </div>
 </template>
@@ -22,7 +11,7 @@
 import BProgressBar from './BProgressBar.vue'
 import type {Booleanish, ColorVariant} from '../../types'
 import {useBooleanish} from '../../composables'
-import {InjectionKey, provide, toRef} from 'vue'
+import {computed, InjectionKey, provide, toRef} from 'vue'
 
 interface BProgressProps {
   variant?: ColorVariant
@@ -50,6 +39,17 @@ const showProgressBoolean = useBooleanish(toRef(props, 'showProgress'))
 const showValueBoolean = useBooleanish(toRef(props, 'showValue'))
 const stripedBoolean = useBooleanish(toRef(props, 'striped'))
 
+const computedAttrs = computed(() => ({
+  animated: animatedBoolean.value,
+  max: props.max,
+  precision: props.precision,
+  showProgress: showProgressBoolean.value,
+  showValue: showValueBoolean.value,
+  striped: stripedBoolean.value,
+  value: props.value,
+  variant: props.variant,
+}))
+
 // TODO check and see if doing animatedBoolean.value is reactive for provide
 // It may be possible that a toRef() is required for these types of systems.
 provide(injectionKey, {