BProgress script setup

Author: issayah

src/components/BProgress.vue

@@ -17,41 +17,42 @@
   </div>
 </template>
 
-<script lang="ts">
-import {ColorVariant} from '../types'
-import {defineComponent, InjectionKey, PropType, provide} from 'vue'
+<script setup lang="ts">
+// import type {BProgressProps} from '@/types/components'
+import type {ColorVariant} from '@/types'
+import {InjectionKey, provide} from 'vue'
 
-export interface ParentData {
-  animated: boolean
+interface BProgressProps {
+  variant: ColorVariant
   max: number | string
-  showProgress: boolean
-  showValue: boolean
-  striped: boolean
+  height: string
+  animated?: boolean
+  precision?: number | string
+  showProgress?: boolean
+  showValue?: boolean
+  striped?: boolean
+  value?: number | string
 }
 
-export const injectionKey: InjectionKey<ParentData> = Symbol()
+const props = withDefaults(defineProps<BProgressProps>(), {
+  animated: false,
+  precision: 0,
+  showProgress: false,
+  showValue: false,
+  striped: false,
+  value: 0,
+})
 
-export default defineComponent({
-  name: 'BProgress',
-  props: {
-    animated: {type: Boolean, default: false},
-    max: {type: [Number, String]},
-    height: {type: String},
-    precision: {type: [Number, String], default: 0},
-    showProgress: {type: Boolean, default: false},
-    showValue: {type: Boolean, default: false},
-    striped: {type: Boolean, default: false},
-    value: {type: [Number, String], default: 0},
-    variant: {type: String as PropType<ColorVariant>},
-  },
-  setup(props) {
-    provide(injectionKey, {
-      animated: props.animated,
-      max: props.max,
-      showProgress: props.showProgress,
-      showValue: props.showValue,
-      striped: props.striped,
-    })
-  },
+provide(injectionKey, {
+  animated: props.animated,
+  max: props.max,
+  showProgress: props.showProgress,
+  showValue: props.showValue,
+  striped: props.striped,
 })
 </script>
+
+<script lang="ts">
+import type {BProgressParentData} from '@/types/components'
+export const injectionKey: InjectionKey<BProgressParentData> = Symbol()
+</script>

src/components/BProgressBar.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
-import {ColorVariant} from '../types'
+import type {ColorVariant} from '@/types'
+import type {BProgressParentData} from '@/types/components'
 import {computed, defineComponent, h, inject, PropType} from 'vue'
-import {injectionKey, ParentData} from './BProgress.vue'
+import {injectionKey} from './BProgress.vue'
 
 export default defineComponent({
   name: 'BProgressBar',
@@ -18,7 +19,7 @@ export default defineComponent({
     variant: {type: String as PropType<ColorVariant>},
   },
   setup(props, {slots}) {
-    const parent = inject<ParentData>(injectionKey)
+    const parent = inject<BProgressParentData>(injectionKey)
 
     const classes = computed(() => ({
       'progress-bar-animated': props.animated || parent?.animated,
@@ -27,7 +28,7 @@ export default defineComponent({
       [`bg-${props.variant}`]: props.variant,
     }))
 
-    const computedLabel = computed(() => {
+    const computedLabel = computed<string>(() => {
       if (props.showValue || parent?.showValue) {
         return parseFloat(props.value as string).toFixed(props.precision as number)
       }
@@ -43,7 +44,7 @@ export default defineComponent({
       return props.label || ''
     })
 
-    const width = computed(() => {
+    const width = computed<string>(() => {
       if (props.max || parent?.max) {
         return `${
           ((props.value as number) * 100) / parseInt((props.max || parent?.max) as string)

src/types/components/BProgress.d.ts

@@ -14,3 +14,10 @@ export interface Props {
 // Emits
 
 // Other
+export interface ParentData {
+  animated: boolean
+  max: number | string
+  showProgress: boolean
+  showValue: boolean
+  striped: boolean
+}

src/types/components/index.ts

@@ -152,6 +152,7 @@ export type {Emits as BPopoverEmits} from './BPopover'
 export type {DelayObject as BPopoverDelayObject} from './BPopover'
 
 export type {Props as BProgressProps} from './BProgress'
+export type {ParentData as BProgressParentData} from './BProgress'
 
 export type {Props as BProgressBarProps} from './BProgressBar'