Skip to content

Commit 4eb2dd7

Browse files
author
issayah
committed
BListGroup script setup. Weird vue warn exists..
1 parent 7fd339c commit 4eb2dd7

File tree

4 files changed

+110
-116
lines changed

4 files changed

+110
-116
lines changed

‎src/components/BListGroup/BListGroup.vue

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,43 @@
44
</component>
55
</template>
66

7-
<script lang="ts">
8-
import {computed, defineComponent, InjectionKey, PropType, provide, ref, watch} from 'vue'
9-
import {Breakpoint} from '../../types'
10-
11-
export interface ParentData {
12-
numbered: boolean
7+
<script setup lang="ts">
8+
// import type {BListGroupProps} from '@/types/components'
9+
import {computed, InjectionKey, provide} from 'vue'
10+
import type {Breakpoint} from '@/types'
11+
12+
interface BListGroupProps {
13+
flush?: boolean
14+
horizontal?: boolean | Breakpoint
15+
numbered?: boolean
16+
tag?: string
1317
}
1418
15-
export const injectionKey: InjectionKey<ParentData> = Symbol()
16-
17-
export default defineComponent({
18-
name: 'BListGroup',
19-
props: {
20-
flush: {type: Boolean, default: false},
21-
horizontal: {type: [Boolean, String] as PropType<boolean | Breakpoint>, default: false},
22-
numbered: {type: Boolean, default: false},
23-
tag: {type: String, default: 'div'},
24-
},
25-
setup(props) {
26-
const classes = computed(() => {
27-
const horizontal = props.flush ? false : props.horizontal
28-
return {
29-
'list-group-flush': props.flush,
30-
'list-group-horizontal': horizontal === true,
31-
[`list-group-horizontal-${horizontal}`]: typeof horizontal === 'string',
32-
'list-group-numbered': props.numbered,
33-
}
34-
})
35-
// const computedTag = () => (props.numbered === true ? 'div' : props.tag)
36-
37-
const calculateTag = () => (props.numbered === true ? 'ol' : props.tag)
38-
const computedTag = ref(calculateTag())
19+
const props = withDefaults(defineProps<BListGroupProps>(), {
20+
flush: false,
21+
horizontal: false,
22+
numbered: false,
23+
tag: 'div',
24+
})
3925
40-
// for some reason a computed for tag calculation does not always work. So I used watches
41-
watch(
42-
() => props.tag,
43-
() => (computedTag.value = calculateTag())
44-
)
45-
watch(
46-
() => props.numbered,
47-
() => (computedTag.value = calculateTag())
48-
)
26+
const classes = computed(() => {
27+
const horizontal = props.flush ? false : props.horizontal
28+
return {
29+
'list-group-flush': props.flush,
30+
'list-group-horizontal': horizontal === true,
31+
[`list-group-horizontal-${horizontal}`]: typeof horizontal === 'string',
32+
'list-group-numbered': props.numbered,
33+
}
34+
})
4935
50-
provide(injectionKey, {
51-
numbered: props.numbered,
52-
})
36+
const computedTag = computed<string>(() => (props.numbered === true ? 'ol' : props.tag))
5337
54-
return {
55-
classes,
56-
computedTag,
57-
}
58-
},
38+
provide(injectionKey, {
39+
numbered: props.numbered,
5940
})
6041
</script>
42+
43+
<script lang="ts">
44+
import type {BListGroupParentData} from '@/types/components'
45+
export const injectionKey: InjectionKey<BListGroupParentData> = Symbol()
46+
</script>

‎src/components/BListGroup/BListGroupItem.vue

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -7,87 +7,91 @@
77
:aria-disabled="disabled ? true : null"
88
:target="link ? target : null"
99
:href="!button ? href : null"
10-
v-bind="attrs"
10+
v-bind="computedAttrs"
1111
>
1212
<slot />
1313
</component>
1414
</template>
1515

16-
<script lang="ts">
17-
import {computed, defineComponent, inject, PropType} from 'vue'
18-
import {ColorVariant} from '../../types'
16+
<script setup lang="ts">
17+
// import type {BListGroupItemProps} from '@/types/components'
18+
import {computed, inject, useAttrs} from 'vue'
19+
import type {ColorVariant, LinkTarget} from '@/types'
1920
import {injectionKey} from './BListGroup.vue'
2021
21-
const ACTION_TAGS = ['a', 'router-link', 'button', 'b-link']
22+
interface BListGroupItemProps {
23+
action?: boolean
24+
active?: boolean
25+
// activeClass: string
26+
// append?: boolean
27+
button?: boolean
28+
disabled?: boolean
29+
// exact?: boolean
30+
// exactActiveClass: string
31+
href?: string
32+
// noPrefetch?: Boolean
33+
// prefetch?: Boolean
34+
// rel?: String
35+
// replace?: Boolean
36+
// routerComponentName?: String
37+
tag?: string
38+
target?: LinkTarget
39+
//to: string | Record<string, unknown>
40+
variant?: ColorVariant
41+
}
2242
23-
export default defineComponent({
24-
name: 'BListGroupItem',
25-
props: {
26-
action: {type: Boolean, default: false},
27-
active: {type: Boolean, default: false},
28-
// activeClass: {type: String},
29-
// append: {type: Boolean, default: false},
30-
button: {type: Boolean, default: false},
31-
disabled: {type: Boolean, default: false},
32-
// exact: {type: Boolean, default: false},
33-
// exactActiveClass: {type: String},
34-
href: {type: String},
35-
// noPrefetch: {type: Boolean, default: false},
36-
// prefetch: {type: Boolean, default: null},
37-
// rel: {type: String, default: null},
38-
// replace: {type: Boolean, default: false},
39-
// routerComponentName: {type: String, default: null},
40-
tag: {type: String, default: 'div'},
41-
target: {type: String, default: '_self'},
42-
//to: {type: [String, Object]},
43-
variant: {type: String as PropType<ColorVariant>},
44-
},
45-
setup(props, context) {
46-
const parentData = inject(injectionKey, null)
43+
const props = withDefaults(defineProps<BListGroupItemProps>(), {
44+
action: false,
45+
active: false,
46+
button: false,
47+
disabled: false,
48+
tag: 'div',
49+
target: '_self',
50+
})
51+
52+
const attrs = useAttrs()
4753
48-
const link = computed(() => !props.button && props.href)
49-
const tagComputed = computed(
50-
() =>
51-
parentData?.numbered
52-
? 'li'
53-
: props.button
54-
? 'button'
55-
: !link.value
56-
? props.tag
57-
: 'a' /* BLink */
58-
)
54+
const parentData = inject(injectionKey, null)
5955
60-
const classes = computed(() => {
61-
const action = props.action || link.value || props.button || ACTION_TAGS.includes(props.tag)
62-
return {
63-
[`list-group-item-${props.variant}`]: props.variant,
64-
'list-group-item-action': action,
65-
'active': props.active,
66-
'disabled': props.disabled,
67-
}
68-
})
56+
const link = computed<boolean>(() => !props.button && !!props.href)
6957
70-
const attrs = computed(() => {
71-
const attrs = {} as {type?: string; disabled?: boolean}
72-
if (props.button) {
73-
if (!context.attrs || !context.attrs.type) {
74-
// Add a type for button is one not provided in passed attributes
75-
attrs.type = 'button'
76-
}
77-
if (props.disabled) {
78-
// Set disabled attribute if button and disabled
79-
attrs.disabled = true
80-
}
81-
}
82-
return attrs
83-
})
58+
const tagComputed = computed<string>(
59+
() =>
60+
parentData?.numbered
61+
? 'li'
62+
: props.button
63+
? 'button'
64+
: !link.value
65+
? props.tag
66+
: 'a' /* BLink */
67+
)
8468
85-
return {
86-
tagComputed,
87-
classes,
88-
attrs,
89-
link,
69+
const classes = computed(() => {
70+
const action =
71+
props.action ||
72+
link.value ||
73+
props.button ||
74+
['a', 'router-link', 'button', 'b-link'].includes(props.tag)
75+
return {
76+
[`list-group-item-${props.variant}`]: props.variant,
77+
'list-group-item-action': action,
78+
'active': props.active,
79+
'disabled': props.disabled,
80+
}
81+
})
82+
83+
const computedAttrs = computed(() => {
84+
const localAttrs = {} as {type?: string; disabled?: boolean}
85+
if (props.button) {
86+
if (!attrs || !attrs.type) {
87+
// Add a type for button is one not provided in passed attributes
88+
localAttrs.type = 'button'
89+
}
90+
if (props.disabled) {
91+
// Set disabled attribute if button and disabled
92+
localAttrs.disabled = true
9093
}
91-
},
94+
}
95+
return localAttrs
9296
})
9397
</script>

‎src/types/components/BListGroup/BListGroup.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ export interface Props {
99
// Emits
1010

1111
// Other
12+
export interface ParentData {
13+
numbered: boolean
14+
}

‎src/types/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export type {Props as BLinkProps} from './BLink/BLink'
8888
export type {Emits as BLinkEmits} from './BLink/BLink'
8989
// BListGroup
9090
export type {Props as BListGroupProps} from './BListGroup/BListGroup'
91+
export type {ParentData as BListGroupParentData} from './BListGroup/BListGroup'
9192
export type {Props as BListGroupItemProps} from './BListGroup/BListGroupItem'
9293
// BOverlay
9394
export type {Props as BOverlayProps} from './BOverlay/BOverlay'

0 commit comments

Comments
 (0)