BForm's script setup conversion and improvements

Author: issayah

src/components/BDropdown/BDropdownItem.vue

@@ -62,9 +62,7 @@ const componentAttrs = computed(() => ({
   ...(attrs.to ? {activeClass: 'active', ...attrs} : {}),
 }))
 
-const clicked = (e: MouseEvent): void => {
-  emit('click', e)
-}
+const clicked = (e: MouseEvent): void => emit('click', e)
 </script>
 
 <script lang="ts">

src/components/BDropdown/BDropdownItemButton.vue

@@ -44,9 +44,7 @@ const attrs = computed(() => ({
   disabled: props.disabled,
 }))
 
-const clicked = (e: MouseEvent): void => {
-  emit('click', e)
-}
+const clicked = (e: MouseEvent): void => emit('click', e)
 </script>
 
 <script lang="ts">

src/components/BForm/BForm.vue

@@ -1,35 +1,36 @@
 <template>
-  <form
-    :id="id"
-    :novalidate="novalidate"
-    :class="classes"
-    @submit.prevent="$emit('submit', $event)"
-  >
+  <form :id="id" :novalidate="novalidate" :class="classes" @submit.prevent="submitted">
     <slot />
   </form>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BFormEmits, BFormProps} from '@/types/components'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BForm',
-  props: {
-    id: {type: String, required: false},
-    floating: {type: Boolean, default: false},
-    novalidate: {type: Boolean, default: false},
-    validated: {type: Boolean, default: false},
-  },
-  emits: ['submit'],
-  setup(props) {
-    const classes = computed(() => ({
-      'form-floating': props.floating,
-      'was-validated': props.validated,
-    }))
+interface BFormProps {
+  id?: string
+  floating?: boolean
+  novalidate?: boolean
+  validated?: boolean
+}
 
-    return {
-      classes,
-    }
-  },
+const props = withDefaults(defineProps<BFormProps>(), {
+  floating: false,
+  novalidate: false,
+  validated: false,
 })
+
+interface BFormEmits {
+  (e: 'submit', value: Event): void
+}
+
+const emit = defineEmits<BFormEmits>()
+
+const classes = computed(() => ({
+  'form-floating': props.floating,
+  'was-validated': props.validated,
+}))
+
+const submitted = (e: Event): void => emit('submit', e)
 </script>

src/components/BForm/BFormInvalidFeedback.vue

@@ -4,39 +4,39 @@
   </component>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BFormInvalidFeedbackProps} from '@/types/components'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BFormInvalidFeedback',
-  props: {
-    ariaLive: {type: String, required: false},
-    forceShow: {type: Boolean, default: false},
-    id: {type: String, required: false},
-    role: {type: String, required: false},
-    state: {type: Boolean, default: undefined},
-    tag: {type: String, default: 'div'},
-    tooltip: {type: Boolean, default: false},
-  },
-  setup(props) {
-    const computedShow = computed(() => props.forceShow === true || props.state === false)
-    const classes = computed(() => ({
-      'd-block': computedShow.value,
-      'invalid-feedback': !props.tooltip,
-      'invalid-tooltip': props.tooltip,
-    }))
-    const attrs = computed(() => ({
-      'id': props.id || null,
-      'role': props.role || null,
-      'aria-live': props.ariaLive || null,
-      'aria-atomic': props.ariaLive ? 'true' : null,
-    }))
+interface BFormInvalidFeedbackProps {
+  ariaLive?: string
+  forceShow?: boolean
+  id?: string
+  role?: string
+  state?: boolean
+  tag?: string
+  tooltip?: boolean
+}
 
-    return {
-      attrs,
-      classes,
-      computedShow,
-    }
-  },
+const props = withDefaults(defineProps<BFormInvalidFeedbackProps>(), {
+  forceShow: false,
+  state: undefined,
+  tag: 'div',
+  tooltip: false,
 })
+
+const computedShow = computed<boolean>(() => props.forceShow === true || props.state === false)
+
+const classes = computed(() => ({
+  'd-block': computedShow.value,
+  'invalid-feedback': !props.tooltip,
+  'invalid-tooltip': props.tooltip,
+}))
+
+const attrs = computed(() => ({
+  'id': props.id || null,
+  'role': props.role || null,
+  'aria-live': props.ariaLive || null,
+  'aria-atomic': props.ariaLive ? 'true' : null,
+}))
 </script>

src/components/BForm/BFormRow.vue

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

src/components/BForm/BFormText.vue

@@ -4,32 +4,30 @@
   </component>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType} from 'vue'
-import {TextColorVariant} from '../../types'
+<script setup lang="ts">
+// import type {BFormTextProps} from '@/types/components'
+import {computed} from 'vue'
+import type {TextColorVariant} from '@/types'
 
-export default defineComponent({
-  name: 'BFormText',
-  props: {
-    id: {type: String, required: false},
-    inline: {type: Boolean, default: false},
-    tag: {type: String, default: 'small'},
-    textVariant: {type: String as PropType<TextColorVariant>, default: 'muted'},
-  },
-  setup(props) {
-    const classes = computed(() => ({
-      'form-text': !props.inline,
-      [`text-${props.textVariant}`]: props.textVariant,
-    }))
+interface BFormTextProps {
+  id?: string
+  inline?: boolean
+  tag?: string
+  textVariant?: TextColorVariant
+}
 
-    const attrs = computed(() => ({
-      id: props.id || null,
-    }))
-
-    return {
-      attrs,
-      classes,
-    }
-  },
+const props = withDefaults(defineProps<BFormTextProps>(), {
+  inline: false,
+  tag: 'small',
+  textVariant: 'muted',
 })
+
+const classes = computed(() => ({
+  'form-text': !props.inline,
+  [`text-${props.textVariant}`]: props.textVariant,
+}))
+
+const attrs = computed(() => ({
+  id: props.id || null,
+}))
 </script>

src/components/BForm/BFormValidFeedback.vue

@@ -4,39 +4,39 @@
   </component>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BFormValidFeedbackProps} from '@/types/components'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BFormValidFeedback',
-  props: {
-    ariaLive: {type: String, required: false},
-    forceShow: {type: Boolean, default: false},
-    id: {type: String, required: false},
-    role: {type: String, required: false},
-    state: {type: Boolean, default: undefined},
-    tag: {type: String, default: 'div'},
-    tooltip: {type: Boolean, default: false},
-  },
-  setup(props) {
-    const computedShow = computed(() => props.forceShow === true || props.state === true)
-    const classes = computed(() => ({
-      'd-block': computedShow.value,
-      'valid-feedback': !props.tooltip,
-      'valid-tooltip': props.tooltip,
-    }))
-    const attrs = computed(() => ({
-      'id': props.id || null,
-      'role': props.role || null,
-      'aria-live': props.ariaLive || null,
-      'aria-atomic': props.ariaLive ? 'true' : null,
-    }))
+interface BFormValidFeedbackProps {
+  ariaLive?: string
+  forceShow?: boolean
+  id?: string
+  role?: string
+  state?: boolean
+  tag?: string
+  tooltip?: boolean
+}
 
-    return {
-      attrs,
-      classes,
-      computedShow,
-    }
-  },
+const props = withDefaults(defineProps<BFormValidFeedbackProps>(), {
+  forceShow: false,
+  state: undefined,
+  tag: 'div',
+  tooltip: false,
 })
+
+const computedShow = computed<boolean>(() => props.forceShow === true || props.state === true)
+
+const classes = computed(() => ({
+  'd-block': computedShow.value,
+  'valid-feedback': !props.tooltip,
+  'valid-tooltip': props.tooltip,
+}))
+
+const attrs = computed(() => ({
+  'id': props.id || null,
+  'role': props.role || null,
+  'aria-live': props.ariaLive || null,
+  'aria-atomic': props.ariaLive ? 'true' : null,
+}))
 </script>