feat: useLoading

packages/core/index.ts

@@ -1,2 +1,3 @@
 export * from './useToast'
 export * from './useEllipsis'
+export * from './useLoading'

packages/core/useLoading/README.md

@@ -0,0 +1 @@
+# useLoading

packages/core/useLoading/README.zh-CN.md

@@ -0,0 +1,4 @@
+# useLoading
+
+loading本身不会和任何弹层挂钩
+loading实现一个进度管理

packages/core/useLoading/index.test.ts

@@ -1,7 +1,20 @@
 import { test, describe, expect } from 'vitest'
+import { useLoading } from '.'
 
 describe('useLoading', () => {
-  test('should be right', () => {
-    expect(true).toBeTruthy()
+  test('should be defined', () => {
+    expect(useLoading).toBeDefined()
+  })
+
+  test('should be loading correctly', () => {
+    const { isLoading, start, stop } = useLoading()
+
+    expect(isLoading.value).toBeFalsy()
+
+    start()
+    expect(isLoading.value).toBeTruthy()
+
+    stop()
+    expect(isLoading.value).toBeFalsy()
   })
 })

packages/core/useLoading/index.ts

@@ -0,0 +1,25 @@
+import { ref, type Ref } from 'vue'
+
+interface UseLoadingReturn {
+  isLoading: Ref<boolean>
+  start: () => void
+  stop: () => void
+}
+
+export const useLoading = (): UseLoadingReturn => {
+  const isLoading = ref(false)
+
+  const start = () => {
+    isLoading.value = true
+  }
+
+  const stop = () => {
+    isLoading.value = false
+  }
+
+  return {
+    isLoading,
+    start,
+    stop,
+  }
+}

src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import UseEllipsis from './demo/UseEllipsis.vue'
+// import UseEllipsis from './demo/UseEllipsis.vue'
+import UseLoading from './demo/UseLoading.vue'
 </script>
 
 <template>
-  <UseEllipsis />
+  <!-- <UseEllipsis /> -->
+  <UseLoading />
 </template>

src/demo/UseLoading.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLoading } from '@noi/core'
+
+const { isLoading, start, stop } = useLoading()
+
+// const upload = () => {
+//   start();
+
+//   setTimeout(() => {
+//     stop()
+//   }, 1000)
+// }
+
+// const loading = ref(false)
+
+// const upload = () => {
+//   loading.value = true
+
+//   setTimeout(() => {
+//     loading.value = false
+//   }, 1000)
+// }
+</script>
+
+<template>
+  <div v-show="isLoading">loading...</div>
+  <button @click="start">start loading</button>
+  <button @click="stop">stop loading</button>
+</template>