refactor(modules/web): Mirgrat to typescript; fix bugs

modules/web/src/hooks/loading.css

@@ -3,6 +3,6 @@
   color: #b5b5b5;
 }
 .el-loading-text {
- font-weight: 500;
- color: #b5b5b5 !important;
+  font-weight: 500;
+  color: #b5b5b5 !important;
 }

modules/web/src/hooks/loading.js

@@ -1,36 +0,0 @@
-import { watch, unref, onUnmounted } from "vue";
-import { ElLoading } from "element-plus";
-import loadingSvg from "@element-plus/icons-svg/loading.svg?raw";
-import "element-plus/theme-chalk/el-loading.css";
-import "./loading.css";
-
-export const useLoading = (target, text, spinner = loadingSvg) => {
-  // loading spinner
-  const isLoading = ref(false);
-  let loadingInstance = null;
-  const closeLoading = () => (isLoading.value = false);
-  const showLoading = () => (isLoading.value = true);
-  watch(isLoading, (loading) => {
-    if (!loading) return loadingInstance?.close();
-    loadingInstance = ElLoading.service({
-      target: unref(target),
-      spinner: spinner,
-      text: text,
-      lock: true,
-      background: "rgba(0, 0, 0, 0)",
-    });
-  });
-
-  const loadingWrapper = (promise) => {
-    if (!(promise instanceof Promise))
-      throw TypeError("loadingWrapper argument must be Promise");
-    showLoading();
-    return promise.finally(closeLoading);
-  };
-
-  onUnmounted(() => {
-    closeLoading();
-  });
-
-  return { isLoading, showLoading, closeLoading, loadingWrapper };
-};

modules/web/src/hooks/loading.ts

@@ -0,0 +1,40 @@
+import { watch, unref, onUnmounted } from 'vue'
+import { ElLoading } from 'element-plus'
+import loadingSvg from '@element-plus/icons-svg/loading.svg?raw'
+import 'element-plus/theme-chalk/el-loading.css'
+import './loading.css'
+
+export const useLoading = (
+  target: MaybeRef<string | HTMLElement | undefined>,
+  text: string,
+  spinner = loadingSvg,
+) => {
+  // loading spinner
+  const isLoading = ref(false)
+  let loadingInstance: ReturnType<typeof ElLoading.service> | null = null
+  const closeLoading = () => (isLoading.value = false)
+  const showLoading = () => (isLoading.value = true)
+  watch(isLoading, loading => {
+    if (!loading) return loadingInstance?.close()
+    loadingInstance = ElLoading.service({
+      target: unref(target),
+      spinner: spinner,
+      text: text,
+      lock: true,
+      background: 'rgba(0, 0, 0, 0)',
+    })
+  })
+
+  const loadingWrapper = (promise: Promise<unknown>) => {
+    if (!(promise instanceof Promise))
+      throw TypeError('loadingWrapper argument must be Promise')
+    showLoading()
+    return promise.finally(closeLoading)
+  }
+
+  onUnmounted(() => {
+    closeLoading()
+  })
+
+  return { isLoading, showLoading, closeLoading, loadingWrapper }
+}