BSkeleton script setup conversion

Author: issayah

src/components/BSkeleton/BSkeleton.vue

@@ -3,16 +3,22 @@
 </template>
 
 <script setup lang="ts">
-import {computed, PropType, StyleValue} from 'vue'
-import type {ColorVariant, SkeletonAnimation, SkeletonType} from '../../types'
+// import type {BSkeletonProps} from '@/types/components'
+import {computed, StyleValue} from 'vue'
+import type {ColorVariant, SkeletonAnimation, SkeletonType} from '@/types'
 
-const props = defineProps({
-  animation: {type: String as PropType<SkeletonAnimation>, default: 'wave'},
-  height: {type: String},
-  size: {type: String},
-  type: {type: String as PropType<SkeletonType>, default: 'text'},
-  variant: {type: String as PropType<ColorVariant>},
-  width: {type: String},
+interface BSkeletonProps {
+  height?: string
+  width?: string
+  size?: string
+  animation?: SkeletonAnimation
+  type?: SkeletonType
+  variant?: ColorVariant
+}
+
+const props = withDefaults(defineProps<BSkeletonProps>(), {
+  animation: 'wave',
+  type: 'text',
 })
 
 const classes = computed(() => [

src/components/BSkeleton/BSkeletonIcon.vue

@@ -8,11 +8,16 @@
 </template>
 
 <script setup lang="ts">
-import {computed, PropType} from 'vue'
-import type {SkeletonAnimation} from '../../types'
+// import type {BSkeletonIconProps} from '@/types/components'
+import {computed} from 'vue'
+import type {SkeletonAnimation} from '@/types'
 
-const props = defineProps({
-  animation: {type: String as PropType<SkeletonAnimation>, default: 'wave'},
+interface BSkeletonIconProps {
+  animation?: SkeletonAnimation
+}
+
+const props = withDefaults(defineProps<BSkeletonIconProps>(), {
+  animation: 'wave',
 })
 
 const classes = computed(() => [`b-skeleton-animate-${props.animation}`])

src/components/BSkeleton/BSkeletonTable.vue

@@ -25,15 +25,25 @@
 </template>
 
 <script setup lang="ts">
+// import type {BSkeletonTableProps} from '@/types/components'
+import type {SkeletonAnimation} from '@/types'
 import BTableSimple from '../BTable/BTableSimple.vue'
 import BSkeleton from './BSkeleton.vue'
 
-defineProps({
-  animation: {type: String, default: 'wave'},
-  columns: {type: Number, default: 5},
-  hideHeader: {type: Boolean, default: false},
-  rows: {type: Number, default: 3},
-  showFooter: {type: Boolean, default: false},
-  tableProps: {type: Object},
+interface BSkeletonTableProps {
+  animation?: SkeletonAnimation
+  columns?: number
+  hideHeader?: boolean
+  rows?: number
+  showFooter?: boolean
+  tableProps: Record<string, unknown>
+}
+
+withDefaults(defineProps<BSkeletonTableProps>(), {
+  animation: 'wave',
+  columns: 5,
+  hideHeader: false,
+  rows: 3,
+  showFooter: false,
 })
 </script>

src/components/BSkeleton/BSkeletonWrapper.vue

@@ -4,7 +4,13 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  loading: {type: Boolean, default: false},
+// import type {BSkeletonWrapperProps} from '@/types/components'
+
+interface BSkeletonWrapperProps {
+  loading?: boolean
+}
+
+withDefaults(defineProps<BSkeletonWrapperProps>(), {
+  loading: false,
 })
 </script>

src/types/components/BSkeleton/BSkeletonTable.d.ts

@@ -1,6 +1,7 @@
+import type {SkeletonAnimation} from '@/types'
 // Props
 export interface Props {
-  animation?: string
+  animation?: SkeletonAnimation
   columns?: number
   hideHeader?: boolean
   rows?: number