Skip to content

Commit 6b138e9

Browse files
mariusamariusa
authored
Merge pull request #423 from VividLemon/setup
Various script setup conversion
2 parents 9930026 + 1c41c1b commit 6b138e9

24 files changed

+878
-841
lines changed

‎src/components/BAlert.vue

Lines changed: 110 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -12,109 +12,116 @@
1212
</div>
1313
</template>
1414

15-
<script lang="ts">
16-
import {computed, defineComponent, onBeforeUnmount, PropType, ref, watch} from 'vue'
15+
<script setup lang="ts">
16+
// import type {BAlertEmits, BAlertProps} from '@/types/components'
17+
import type {ColorVariant} from '@/types'
18+
import {computed, onBeforeUnmount, ref, watch} from 'vue'
1719
import Alert from 'bootstrap/js/dist/alert'
18-
import {ColorVariant} from '../types'
19-
import {toInteger} from '../utils/number'
20-
21-
export default defineComponent({
22-
name: 'BAlert',
23-
props: {
24-
dismissLabel: {type: String, default: 'Close'},
25-
dismissible: {type: Boolean, default: false},
26-
fade: {type: Boolean, default: false},
27-
modelValue: {type: [Boolean, Number], default: false},
28-
show: {type: Boolean, default: false},
29-
variant: {type: String as PropType<ColorVariant>, default: 'info'},
30-
},
31-
emits: ['dismissed', 'dismiss-count-down', 'update:modelValue'],
32-
setup(props, {emit}) {
33-
const element = ref<HTMLElement>()
34-
const instance = ref<Alert>()
35-
const classes = computed(() => ({
36-
[`alert-${props.variant}`]: props.variant,
37-
'show': props.modelValue,
38-
'alert-dismissible': props.dismissible,
39-
'fade': props.modelValue,
40-
}))
41-
42-
let _countDownTimeout: number | undefined = 0
43-
44-
const parseCountDown = (value: boolean | number) => {
45-
if (typeof value === 'boolean') {
46-
return 0
47-
}
48-
49-
const numberValue = toInteger(value, 0)
50-
return numberValue > 0 ? numberValue : 0
51-
}
52-
53-
const clearCountDownInterval = () => {
54-
if (_countDownTimeout === undefined) return
55-
clearTimeout(_countDownTimeout)
56-
_countDownTimeout = undefined
57-
}
58-
59-
const countDown = ref(parseCountDown(props.modelValue))
60-
const isAlertVisible = computed(() => props.modelValue || props.show)
61-
62-
onBeforeUnmount(() => {
63-
clearCountDownInterval()
64-
instance.value?.dispose()
65-
instance.value = undefined
66-
})
67-
68-
const parsedModelValue = computed(() => {
69-
if (props.modelValue === true) {
70-
return true
71-
}
72-
if (props.modelValue === false) return false
73-
74-
if (toInteger(props.modelValue, 0) < 1) {
75-
// Boolean will always return false for the above comparison
76-
return false
77-
}
78-
return !!props.modelValue
79-
})
80-
81-
const handleShowAndModelChanged = () => {
82-
countDown.value = parseCountDown(props.modelValue)
83-
if ((parsedModelValue.value || props.show) && !instance.value)
84-
instance.value = new Alert(element.value as HTMLElement)
85-
}
86-
87-
const dismissClicked = () => {
88-
if (typeof props.modelValue === 'boolean') {
89-
emit('update:modelValue', false)
90-
} else {
91-
emit('update:modelValue', 0)
92-
}
93-
emit('dismissed')
94-
}
95-
96-
watch(() => props.modelValue, handleShowAndModelChanged)
97-
watch(() => props.show, handleShowAndModelChanged)
98-
99-
watch(countDown, (newValue) => {
100-
clearCountDownInterval()
101-
if (typeof props.modelValue === 'boolean') return
102-
emit('dismiss-count-down', newValue)
103-
104-
if (newValue === 0 && props.modelValue > 0) emit('dismissed')
105-
if (props.modelValue !== newValue) emit('update:modelValue', newValue)
106-
if (newValue > 0) {
107-
_countDownTimeout = setTimeout(() => {
108-
countDown.value--
109-
}, 1000)
110-
}
111-
})
112-
return {
113-
dismissClicked,
114-
isAlertVisible,
115-
element,
116-
classes,
117-
}
118-
},
20+
import {toInteger} from '@/utils/number'
21+
22+
interface BAlertProps {
23+
dismissLabel?: string
24+
dismissible?: boolean
25+
fade?: boolean
26+
modelValue?: boolean | number
27+
show?: boolean
28+
variant?: ColorVariant
29+
}
30+
31+
const props = withDefaults(defineProps<BAlertProps>(), {
32+
dismissLabel: 'Close',
33+
dismissible: false,
34+
fade: false,
35+
modelValue: false,
36+
show: false,
37+
variant: 'info',
38+
})
39+
40+
interface BAlertEmits {
41+
(e: 'dismissed'): void
42+
(e: 'dismiss-count-down', value: number): void
43+
(e: 'update:modelValue', value: boolean | number): void
44+
}
45+
46+
const emit = defineEmits<BAlertEmits>()
47+
48+
const element = ref<HTMLElement>()
49+
const instance = ref<Alert>()
50+
const classes = computed(() => ({
51+
[`alert-${props.variant}`]: props.variant,
52+
'show': props.modelValue,
53+
'alert-dismissible': props.dismissible,
54+
'fade': props.modelValue,
55+
}))
56+
57+
let _countDownTimeout: undefined | ReturnType<typeof setTimeout>
58+
59+
const parseCountDown = (value: boolean | number): number => {
60+
if (typeof value === 'boolean') {
61+
return 0
62+
}
63+
64+
const numberValue = toInteger(value, 0)
65+
return numberValue > 0 ? numberValue : 0
66+
}
67+
68+
const clearCountDownInterval = (): void => {
69+
if (_countDownTimeout === undefined) return
70+
clearTimeout(_countDownTimeout)
71+
_countDownTimeout = undefined
72+
}
73+
74+
const countDown = ref<number>(parseCountDown(props.modelValue))
75+
const isAlertVisible = computed<boolean>(() => !!props.modelValue || props.show)
76+
77+
onBeforeUnmount((): void => {
78+
clearCountDownInterval()
79+
instance.value?.dispose()
80+
instance.value = undefined
81+
})
82+
83+
const parsedModelValue = computed<boolean>(() => {
84+
if (props.modelValue === true) {
85+
return true
86+
}
87+
if (props.modelValue === false) return false
88+
89+
if (toInteger(props.modelValue, 0) < 1) {
90+
// Boolean will always return false for the above comparison
91+
return false
92+
}
93+
return !!props.modelValue
94+
})
95+
96+
const handleShowAndModelChanged = (): void => {
97+
countDown.value = parseCountDown(props.modelValue)
98+
if ((parsedModelValue.value || props.show) && !instance.value)
99+
instance.value = new Alert(element.value as HTMLElement)
100+
}
101+
102+
const dismissClicked = (): void => {
103+
if (typeof props.modelValue === 'boolean') {
104+
emit('update:modelValue', false)
105+
} else {
106+
emit('update:modelValue', 0)
107+
}
108+
emit('dismissed')
109+
}
110+
111+
watch(() => props.modelValue, handleShowAndModelChanged)
112+
watch(() => props.show, handleShowAndModelChanged)
113+
114+
watch(countDown, (newValue) => {
115+
clearCountDownInterval()
116+
if (typeof props.modelValue === 'boolean') return
117+
emit('dismiss-count-down', newValue)
118+
119+
if (newValue === 0 && props.modelValue > 0) emit('dismissed')
120+
if (props.modelValue !== newValue) emit('update:modelValue', newValue)
121+
if (newValue > 0) {
122+
_countDownTimeout = setTimeout(() => {
123+
countDown.value--
124+
}, 1000)
125+
}
119126
})
120127
</script>

‎src/components/BCol.vue

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66

77
<script lang="ts">
88
import {computed, defineComponent, PropType} from 'vue'
9-
import type {Alignment} from '../types'
10-
import getBreakpointProps from '../utils/getBreakpointProps'
11-
import getClasses from '../utils/getClasses'
9+
import type {Alignment} from '@/types'
10+
import getBreakpointProps from '@/utils/getBreakpointProps'
11+
import getClasses from '@/utils/getClasses'
1212
1313
const breakpointCol = getBreakpointProps('', [], {type: [Boolean, String, Number], default: false})
1414
const breakpointOffset = getBreakpointProps('offset', [''], {type: [String, Number], default: null})
@@ -28,19 +28,15 @@ export default defineComponent({
2828
tag: {type: String, default: 'div'},
2929
},
3030
setup(props) {
31-
let classList: string[] = []
32-
3331
const properties = [
3432
{content: breakpointCol, propPrefix: 'cols', classPrefix: 'col'},
3533
{content: breakpointOffset, propPrefix: 'offset'},
3634
{content: breakpointOrder, propPrefix: 'order'},
3735
]
3836
39-
properties.forEach((property) => {
40-
classList = classList.concat(
41-
getClasses(props, property.content, property.propPrefix, property.classPrefix)
42-
)
43-
})
37+
const classList: Array<string> = properties.flatMap((el) =>
38+
getClasses(props, el.content, el.propPrefix, el.classPrefix)
39+
)
4440
4541
const classes = computed(() => ({
4642
col: props.col || !classList.some((e) => /^col-/.test(e) && !props.cols),

0 commit comments

Comments
 (0)