patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: Migrate BootstrapAlert to Typescript

Browse Source
This commit is contained in:
Thomas Basler 2022-10-17 18:39:50 +02:00
parent 8ed48db193
commit f1e30a743a
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webapp/src/components/BootstrapAlert.vue
View File

@ -6,11 +6,11 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue"; import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
import Alert from "bootstrap/js/dist/alert"; import Alert from "bootstrap/js/dist/alert";
export const toInteger = (value, defaultValue = NaN) => { export const toInteger = (value: number, defaultValue = NaN) => {
return Number.isInteger(value) ? value : defaultValue; return Number.isInteger(value) ? value : defaultValue;
}; };
@ -26,8 +26,8 @@ export default defineComponent({
}, },
emits: ["dismissed", "dismiss-count-down", "update:modelValue"], emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
setup(props, { emit }) { setup(props, { emit }) {
const element = undefined; const element = ref<HTMLElement>();
let instance = undefined; const instance = ref<Alert>();
const classes = computed(() => ({ const classes = computed(() => ({
[`alert-${props.variant}`]: props.variant, [`alert-${props.variant}`]: props.variant,
show: props.modelValue, show: props.modelValue,
@ -35,9 +35,9 @@ export default defineComponent({
fade: props.modelValue, fade: props.modelValue,
})); }));
let _countDownTimeout = 0; let _countDownTimeout: number | undefined = 0;
const parseCountDown = (value) => { const parseCountDown = (value: boolean | number) => {
if (typeof value === "boolean") { if (typeof value === "boolean") {
return 0; return 0;
} }
@ -57,8 +57,8 @@ export default defineComponent({
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearCountDownInterval(); clearCountDownInterval();
instance?.dispose(); instance.value?.dispose();
instance = undefined; instance.value = undefined;
}); });
const parsedModelValue = computed(() => { const parsedModelValue = computed(() => {
@ -76,8 +76,8 @@ export default defineComponent({
const handleShowAndModelChanged = () => { const handleShowAndModelChanged = () => {
countDown.value = parseCountDown(props.modelValue); countDown.value = parseCountDown(props.modelValue);
if ((parsedModelValue.value || props.show) && !instance) if ((parsedModelValue.value || props.show) && !instance.value)
instance = new Alert(element); instance.value = new Alert(element.value as HTMLElement);
}; };
const dismissClicked = () => { const dismissClicked = () => {