Skip to content

Commit 254da1b

Browse files
mariusamariusa
authored
Merge pull request #414 from kwiksilver3441/setup
BCard's script setup conversion and improvements
2 parents 5f06f18 + e8f06b5 commit 254da1b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+850
-831
lines changed

‎src/components/BAvatar/BAvatar.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {isNumber, isNumeric, isString} from '@/utils/inspect'
3434
import {toFloat} from '@/utils/number'
3535
import {injectionKey} from './BAvatarGroup.vue'
3636
37-
interface Props {
37+
interface BAvatarProps {
3838
alt: string
3939
ariaLabel: string
4040
badge?: boolean | string
@@ -55,7 +55,7 @@ interface Props {
5555
variant?: ColorVariant
5656
}
5757
58-
const props = withDefaults(defineProps<Props>(), {
58+
const props = withDefaults(defineProps<BAvatarProps>(), {
5959
alt: 'avatar',
6060
badge: false,
6161
badgeLeft: false,
@@ -70,12 +70,12 @@ const props = withDefaults(defineProps<Props>(), {
7070
variant: 'secondary',
7171
})
7272
73-
interface Emits {
73+
interface BAvatarEmits {
7474
(e: 'click', value: MouseEvent): void
7575
(e: 'img-error', value: Event): void
7676
}
7777
78-
const emit = defineEmits<Emits>()
78+
const emit = defineEmits<BAvatarEmits>()
7979
8080
const slots = useSlots()
8181

‎src/components/BCard/BCard.vue

Lines changed: 112 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -44,117 +44,124 @@
4444
</component>
4545
</template>
4646

47-
<script lang="ts">
48-
import {computed, defineComponent, PropType} from 'vue'
49-
import type {Alignment, ColorVariant} from '../../types'
47+
<script setup lang="ts">
48+
// import type {BCardProps} from '@/types/components'
49+
import type {Alignment, ColorVariant, TextColorVariant} from '@/types'
50+
import {computed} from 'vue'
5051
51-
export default defineComponent({
52-
name: 'BCard',
53-
props: {
54-
align: {type: String as PropType<Alignment>, required: false},
55-
bgVariant: {type: String as PropType<ColorVariant>, required: false},
56-
bodyBgVariant: {type: String as PropType<ColorVariant>, required: false},
57-
bodyClass: {type: [Array, Object, String], required: false},
58-
bodyTag: {type: String, default: 'div'},
59-
bodyTextVariant: {type: String as PropType<ColorVariant>, required: false},
60-
borderVariant: {type: String as PropType<ColorVariant>, required: false},
61-
footer: {type: String, required: false},
62-
footerBgVariant: {type: String as PropType<ColorVariant>, required: false},
63-
footerBorderVariant: {type: String as PropType<ColorVariant>, required: false},
64-
footerClass: {type: [Array, Object, String], required: false},
65-
footerHtml: {type: String, default: ''},
66-
footerTag: {type: String, default: 'div'},
67-
footerTextVariant: {type: String as PropType<ColorVariant>, required: false},
68-
header: {type: String, required: false},
69-
headerBgVariant: {type: String as PropType<ColorVariant>, required: false},
70-
headerBorderVariant: {type: String as PropType<ColorVariant>, required: false},
71-
headerClass: {type: [Array, Object, String], required: false},
72-
headerHtml: {type: String, default: ''},
73-
headerTag: {type: String, default: 'div'},
74-
headerTextVariant: {type: String as PropType<ColorVariant>, required: false},
75-
imgAlt: {type: String, required: false},
76-
imgBottom: {type: Boolean, default: false},
77-
imgEnd: {type: Boolean, default: false},
78-
imgHeight: {type: [String, Number], required: false},
79-
imgLeft: {type: Boolean, default: false},
80-
imgRight: {type: Boolean, default: false},
81-
imgSrc: {type: String, required: false},
82-
imgStart: {type: Boolean, default: false},
83-
imgTop: {type: Boolean, default: false},
84-
imgWidth: {type: [String, Number], required: false},
85-
noBody: {type: Boolean, default: false},
86-
overlay: {type: Boolean, default: false},
87-
subTitle: {type: String, required: false},
88-
subTitleTag: {type: String, default: 'h6'},
89-
subTitleTextVariant: {type: String as PropType<ColorVariant>, default: 'muted'},
90-
tag: {type: String, default: 'div'},
91-
textVariant: {type: String as PropType<ColorVariant>, required: false},
92-
title: {type: String, required: false},
93-
titleTag: {type: String, default: 'h4'},
94-
},
95-
setup(props) {
96-
const classes = computed(() => ({
97-
[`text-${props.align}`]: props.align,
98-
[`text-${props.textVariant}`]: props.textVariant,
99-
[`bg-${props.bgVariant}`]: props.bgVariant,
100-
[`border-${props.borderVariant}`]: props.borderVariant,
101-
'flex-row': props.imgLeft || props.imgStart,
102-
'flex-row-reverse': props.imgEnd || props.imgRight,
103-
}))
52+
interface BCardProps {
53+
align?: Alignment
54+
bgVariant?: ColorVariant
55+
bodyBgVariant?: ColorVariant
56+
bodyClass?: Array<string> | Record<string, unknown> | string // TODO record<string, unknown> can be replaced as a known object
57+
bodyTag?: string // Above todo, also Array can be explicit
58+
bodyTextVariant?: ColorVariant
59+
borderVariant?: ColorVariant
60+
footer?: string
61+
footerBgVariant?: ColorVariant
62+
footerBorderVariant?: ColorVariant
63+
footerClass?: Array<string> | Record<string, unknown> | string
64+
footerHtml?: string
65+
footerTag?: string
66+
footerTextVariant?: ColorVariant
67+
header?: string
68+
headerBgVariant?: ColorVariant
69+
headerBorderVariant?: ColorVariant
70+
headerClass?: Array<string> | Record<string, unknown> | string
71+
headerHtml?: string
72+
headerTag?: string
73+
headerTextVariant?: ColorVariant
74+
imgAlt?: string
75+
imgBottom?: boolean
76+
imgEnd?: boolean
77+
imgHeight?: string | number
78+
imgLeft?: boolean
79+
imgRight?: boolean
80+
imgSrc?: string
81+
imgStart?: boolean
82+
imgTop?: boolean
83+
imgWidth?: string | number
84+
noBody?: boolean
85+
overlay?: boolean
86+
subTitle?: string
87+
subTitleTag?: string
88+
subTitleTextVariant?: TextColorVariant
89+
tag?: string
90+
textVariant?: TextColorVariant
91+
title?: string
92+
titleTag?: string
93+
}
10494
105-
const bodyClasses = computed(() => ({
106-
'card-body': !props.noBody,
107-
'card-img-overlay': props.overlay,
108-
[`bg-${props.bodyBgVariant}`]: props.bodyBgVariant,
109-
[`text-${props.bodyTextVariant}`]: props.bodyTextVariant,
110-
}))
95+
const props = withDefaults(defineProps<BCardProps>(), {
96+
bodyTag: 'div',
97+
footerHtml: '',
98+
footerTag: 'div',
99+
headerHtml: '',
100+
headerTag: 'div',
101+
imgBottom: false,
102+
imgEnd: false,
103+
imgLeft: false,
104+
imgRight: false,
105+
imgStart: false,
106+
imgTop: false,
107+
noBody: false,
108+
overlay: false,
109+
subTitleTag: 'h6',
110+
subTitleTextVariant: 'muted',
111+
tag: 'div',
112+
titleTag: 'h4',
113+
})
111114
112-
const footerClasses = computed(() => ({
113-
[`bg-${props.footerBgVariant}`]: props.footerBgVariant,
114-
[`border-${props.footerBorderVariant}`]: props.footerBorderVariant,
115-
[`text-${props.footerTextVariant}`]: props.footerTextVariant,
116-
}))
115+
const classes = computed(() => ({
116+
[`text-${props.align}`]: props.align,
117+
[`text-${props.textVariant}`]: props.textVariant,
118+
[`bg-${props.bgVariant}`]: props.bgVariant,
119+
[`border-${props.borderVariant}`]: props.borderVariant,
120+
'flex-row': props.imgLeft || props.imgStart,
121+
'flex-row-reverse': props.imgEnd || props.imgRight,
122+
}))
117123
118-
const headerClasses = computed(() => ({
119-
[`bg-${props.headerBgVariant}`]: props.headerBgVariant,
120-
[`border-${props.headerBorderVariant}`]: props.headerBorderVariant,
121-
[`text-${props.headerTextVariant}`]: props.headerTextVariant,
122-
}))
124+
const bodyClasses = computed(() => ({
125+
'card-body': !props.noBody,
126+
'card-img-overlay': props.overlay,
127+
[`bg-${props.bodyBgVariant}`]: props.bodyBgVariant,
128+
[`text-${props.bodyTextVariant}`]: props.bodyTextVariant,
129+
}))
123130
124-
const imgClasses = computed(() => ({
125-
'card-img':
126-
!props.imgEnd &&
127-
!props.imgRight &&
128-
!props.imgStart &&
129-
!props.imgLeft &&
130-
!props.imgTop &&
131-
!props.imgTop,
132-
'card-img-right': props.imgEnd || props.imgRight,
133-
'card-img-left': props.imgStart || props.imgLeft,
134-
'card-img-top': props.imgTop,
135-
'card-img-bottom': props.imgBottom,
136-
}))
131+
const footerClasses = computed(() => ({
132+
[`bg-${props.footerBgVariant}`]: props.footerBgVariant,
133+
[`border-${props.footerBorderVariant}`]: props.footerBorderVariant,
134+
[`text-${props.footerTextVariant}`]: props.footerTextVariant,
135+
}))
137136
138-
const imgAttr = computed(() => ({
139-
src: props.imgSrc,
140-
alt: props.imgAlt,
141-
height: props.imgHeight,
142-
width: props.imgWidth,
143-
}))
137+
const headerClasses = computed(() => ({
138+
[`bg-${props.headerBgVariant}`]: props.headerBgVariant,
139+
[`border-${props.headerBorderVariant}`]: props.headerBorderVariant,
140+
[`text-${props.headerTextVariant}`]: props.headerTextVariant,
141+
}))
144142
145-
const subTitleClasses = computed(() => ({
146-
[`text-${props.subTitleTextVariant}`]: props.subTitleTextVariant,
147-
}))
143+
const imgClasses = computed(() => ({
144+
'card-img':
145+
!props.imgEnd &&
146+
!props.imgRight &&
147+
!props.imgStart &&
148+
!props.imgLeft &&
149+
!props.imgTop &&
150+
!props.imgTop,
151+
'card-img-right': props.imgEnd || props.imgRight,
152+
'card-img-left': props.imgStart || props.imgLeft,
153+
'card-img-top': props.imgTop,
154+
'card-img-bottom': props.imgBottom,
155+
}))
148156
149-
return {
150-
classes,
151-
bodyClasses,
152-
footerClasses,
153-
headerClasses,
154-
imgClasses,
155-
imgAttr,
156-
subTitleClasses,
157-
}
158-
},
159-
})
157+
const imgAttr = computed(() => ({
158+
src: props.imgSrc,
159+
alt: props.imgAlt,
160+
height: props.imgHeight,
161+
width: props.imgWidth,
162+
}))
163+
164+
const subTitleClasses = computed(() => ({
165+
[`text-${props.subTitleTextVariant}`]: props.subTitleTextVariant,
166+
}))
160167
</script>

‎src/components/BCard/BCardBody.vue

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,35 @@
1111
</component>
1212
</template>
1313

14-
<script lang="ts">
15-
import {computed, defineComponent, PropType} from 'vue'
14+
<script setup lang="ts">
15+
// import type {BCardBodyProps} from '@/types/components'
16+
import {computed} from 'vue'
1617
import BCardTitle from './BCardTitle.vue'
1718
import BCardSubTitle from './BCardSubTitle.vue'
18-
import {ColorVariant} from '../../types'
19+
import type {ColorVariant, TextColorVariant} from '@/types'
1920
20-
export default defineComponent({
21-
name: 'BCardBody',
22-
components: {BCardTitle, BCardSubTitle},
23-
props: {
24-
bodyBgVariant: {type: String as PropType<ColorVariant>, required: false},
25-
bodyClass: {type: [Array, Object, String], required: false},
26-
bodyTag: {type: String, default: 'div'},
27-
bodyTextVariant: {type: String as PropType<ColorVariant>, required: false},
28-
overlay: {type: Boolean, default: false},
29-
subTitle: {type: String, required: false},
30-
subTitleTag: {type: String, default: 'h4'},
31-
subTitleTextVariant: {type: String as PropType<ColorVariant>, required: false},
32-
title: {type: String, required: false},
33-
titleTag: {type: String, default: 'h4'},
34-
},
35-
setup(props) {
36-
const classes = computed(() => ({
37-
[`text-${props.bodyTextVariant}`]: props.bodyTextVariant,
38-
[`bg-${props.bodyBgVariant}`]: props.bodyBgVariant,
39-
}))
21+
interface BCardBodyProps {
22+
bodyBgVariant?: ColorVariant
23+
bodyClass?: Array<string> | Record<string, unknown> | string
24+
bodyTag?: string
25+
bodyTextVariant?: TextColorVariant
26+
overlay?: boolean
27+
subTitle?: string
28+
subTitleTag?: string
29+
subTitleTextVariant?: TextColorVariant
30+
title?: string
31+
titleTag?: string
32+
}
4033
41-
return {
42-
classes,
43-
}
44-
},
34+
const props = withDefaults(defineProps<BCardBodyProps>(), {
35+
bodyTag: 'div',
36+
overlay: false,
37+
subTitle: 'h4',
38+
titleTag: 'h4',
4539
})
40+
41+
const classes = computed(() => ({
42+
[`text-${props.bodyTextVariant}`]: props.bodyTextVariant,
43+
[`bg-${props.bodyBgVariant}`]: props.bodyBgVariant,
44+
}))
4645
</script>

‎src/components/BCard/BCardFooter.vue

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,28 @@
88
</component>
99
</template>
1010

11-
<script lang="ts">
12-
import {computed, defineComponent, PropType} from 'vue'
13-
import {ColorVariant} from '../../types'
11+
<script setup lang="ts">
12+
// import type {BCardFooterProps} from '@/types/components'
13+
import type {ColorVariant, TextColorVariant} from '@/types'
14+
import {computed} from 'vue'
1415
15-
export default defineComponent({
16-
name: 'BCardFooter',
17-
props: {
18-
footer: {type: String},
19-
footerBgVariant: {type: String as PropType<ColorVariant>, required: false},
20-
footerBorderVariant: {type: String as PropType<ColorVariant>, required: false},
21-
footerClass: {type: [Array, Object, String], required: false},
22-
footerHtml: {type: String, required: false},
23-
footerTag: {type: String, default: 'div'},
24-
footerTextVariant: {type: String as PropType<ColorVariant>, required: false},
25-
},
26-
setup(props) {
27-
const classes = computed(() => ({
28-
[`text-${props.footerTextVariant}`]: props.footerTextVariant,
29-
[`bg-${props.footerBgVariant}`]: props.footerBgVariant,
30-
[`border-${props.footerBorderVariant}`]: props.footerBorderVariant,
31-
}))
16+
interface BCardFooterProps {
17+
footer: string
18+
footerBgVariant?: ColorVariant
19+
footerBorderVariant?: ColorVariant
20+
footerClass?: Array<string> | Record<string, unknown> | string
21+
footerHtml?: string
22+
footerTag?: string
23+
footerTextVariant?: TextColorVariant
24+
}
3225
33-
return {
34-
classes,
35-
}
36-
},
26+
const props = withDefaults(defineProps<BCardFooterProps>(), {
27+
footerTag: 'div',
3728
})
29+
30+
const classes = computed(() => ({
31+
[`text-${props.footerTextVariant}`]: props.footerTextVariant,
32+
[`bg-${props.footerBgVariant}`]: props.footerBgVariant,
33+
[`border-${props.footerBorderVariant}`]: props.footerBorderVariant,
34+
}))
3835
</script>

0 commit comments

Comments
 (0)