BInputGroup script setup conversion

Author: issayah

src/components/BInputGroup/BInputGroup.vue

@@ -1,4 +1,4 @@
-/* eslint-disable vue/no-v-html */
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <component :is="tag" :id="id" class="input-group" :class="classes" role="group">
     <slot name="prepend">
@@ -19,38 +19,31 @@
   </component>
 </template>
 
-<script lang="ts">
-import {InputSize} from '../../types'
-import {computed, defineComponent, PropType} from 'vue'
+<script setup lang="ts">
+import type {InputSize} from '@/types'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BInputGroup',
-  props: {
-    append: {type: String, required: false},
-    appendHtml: {type: String, required: false},
-    id: {type: String, required: false},
-    prepend: {type: String, required: false},
-    prependHtml: {type: String, required: false},
-    size: {type: String as PropType<InputSize>, required: false},
-    tag: {type: String, default: 'div'},
-  },
-  setup(props) {
-    const classes = computed(() => ({
-      'input-group-sm': props.size === 'sm',
-      'input-group-lg': props.size === 'lg',
-    }))
+interface BInputGroupProps {
+  append?: string
+  appendHtml?: string
+  id?: string
+  prepend?: string
+  prependHtml?: string
+  size?: InputSize
+  tag?: string
+}
 
-    const hasAppend = computed(() => props.append || props.appendHtml)
-    const hasPrepend = computed(() => props.prepend || props.prependHtml)
-    const showAppendHtml = computed(() => !!props.appendHtml)
-    const showPrependHtml = computed(() => !!props.prependHtml)
-    return {
-      classes,
-      hasAppend,
-      hasPrepend,
-      showAppendHtml,
-      showPrependHtml,
-    }
-  },
+const props = withDefaults(defineProps<BInputGroupProps>(), {
+  tag: 'div',
 })
+
+const classes = computed(() => ({
+  'input-group-sm': props.size === 'sm',
+  'input-group-lg': props.size === 'lg',
+}))
+
+const hasAppend = computed<boolean>(() => !!props.append || !!props.appendHtml)
+const hasPrepend = computed<boolean>(() => !!props.prepend || !!props.prependHtml)
+const showAppendHtml = computed<boolean>(() => !!props.appendHtml)
+const showPrependHtml = computed<boolean>(() => !!props.prependHtml)
 </script>

src/components/BInputGroup/BInputGroupAddon.vue

@@ -7,28 +7,25 @@
   </component>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BInputGroupAddonProps} from '@/types/components'
+import {computed} from 'vue'
 import BInputGroupText from './BInputGroupText.vue'
 
-export default defineComponent({
-  name: 'BInputGroupAddon',
-  components: {BInputGroupText},
-  props: {
-    append: {type: Boolean, default: false},
-    id: {type: String, required: false},
-    isText: {type: Boolean, default: false},
-    tag: {type: String, default: 'div'},
-  },
-  setup(props) {
-    const computedClasses = computed(() => ({
-      'input-group-append': props.append,
-      'input-group-prepend': !props.append,
-    }))
+interface BInputGroupAddonProps {
+  append?: boolean
+  id?: string
+  isText?: boolean
+  tag?: string
+}
 
-    return {
-      computedClasses,
-    }
-  },
+const props = withDefaults(defineProps<BInputGroupAddonProps>(), {
+  append: false,
+  tag: 'div',
 })
+
+const computedClasses = computed(() => ({
+  'input-group-append': props.append,
+  'input-group-prepend': !props.append,
+}))
 </script>

src/components/BInputGroup/BInputGroupAppend.vue

@@ -4,17 +4,17 @@
   </b-input-group-addon>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BInputGroupAppendProps} from '@/types/components'
 import BInputGroupAddon from './BInputGroupAddon.vue'
 
-export default defineComponent({
-  name: 'BInputGroupAppend',
-  components: {BInputGroupAddon},
-  props: {
-    id: {type: String, required: false},
-    isText: {type: Boolean, default: false},
-    tag: {type: String, default: 'div'},
-  },
+interface BInputGroupAppendProps {
+  id?: string
+  isText?: boolean
+  tag?: string
+}
+
+withDefaults(defineProps<BInputGroupAppendProps>(), {
+  tag: 'div',
 })
 </script>

src/components/BInputGroup/BInputGroupPrepend.vue

@@ -4,17 +4,17 @@
   </b-input-group-addon>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BInputGroupPrependProps} from '@/types/components'
 import BInputGroupAddon from './BInputGroupAddon.vue'
 
-export default defineComponent({
-  name: 'BInputGroupPrepend',
-  components: {BInputGroupAddon},
-  props: {
-    id: {type: String, required: false},
-    isText: {type: Boolean, default: false},
-    tag: {type: String, default: 'div'},
-  },
+interface BInputGroupPrependProps {
+  id?: string
+  isText?: boolean
+  tag?: string
+}
+
+withDefaults(defineProps<BInputGroupPrependProps>(), {
+  tag: 'div',
 })
 </script>

src/components/BInputGroup/BInputGroupText.vue

@@ -4,13 +4,14 @@
   </component>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BInputGroupTextProps} from '@/types/components'
 
-export default defineComponent({
-  name: 'BInputGroupText',
-  props: {
-    tag: {type: String, default: 'div'},
-  },
+interface BInputGroupTextProps {
+  tag?: string
+}
+
+withDefaults(defineProps<BInputGroupTextProps>(), {
+  tag: 'div',
 })
 </script>