@peng_kai/kit 0.1.2 → 0.1.3

package/tsconfig.json

@@ -20,9 +20,12 @@
     /* Linting */
     "strict": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "isolatedModules": true,
     "skipLibCheck": true
   },

package/uno.config.ts

@@ -0,0 +1 @@
+export default {};

package/vue/components/infinite-query/src/InfiniteQuery.vue

@@ -2,15 +2,30 @@
 import { computed, ref, unref } from 'vue';
 import type { UseInfiniteQueryReturnType } from '@tanstack/vue-query';
 import { useCreateTrigger } from './useCreateTrigger';
+
+export type { ISlotProvide };
+
+interface ISlotProvide {
+  isInitialLoading: boolean
+  isInitialLoadingError: boolean
+  isEmpty: boolean
+  isMoreLoading: boolean
+  isMoreLoadingError: boolean
+  isNoMore: boolean
+  refetch: () => void
+}
 </script>
 
 <script setup lang="ts" generic="T extends UseInfiniteQueryReturnType<any, any>">
 type TPage = T extends UseInfiniteQueryReturnType<infer P, any> ? NonNullable<P> : any;
 type TRecord = TPage extends { list: Array<infer I> } ? I : any;
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   queryier: T
-}>();
+  distance?: string
+}>(), {
+  distance: '50px',
+});
 
 const { queryier } = props;
 const pages = computed(() => queryier.data.value?.pages);
@@ -20,8 +35,9 @@ const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !i
 const isMoreLoading = computed(
   () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
 );
+const isEmpty = computed(() => queryier.isSuccess.value && !pages.value?.[0].list?.length);
 const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value);
-const noMore = computed(
+const isNoMore = computed(
   () =>
     !queryier.hasNextPage?.value
     && !isInitialLoading.value
@@ -43,10 +59,6 @@ const containerCssVars = computed(() => {
   };
 });
 
-function refetch() {
-  queryier.refetch();
-}
-
 function refetchLastPage() {
   queryier.refetch({
     refetchPage(lastPage: any, _index, allPages: any[]) {
@@ -65,6 +77,15 @@ function fetchNextPage() {
   queryier.fetchNextPage();
 }
 
+function refetch() {
+  if (isNoMore.value)
+    refetchLastPage();
+  else if (isMoreLoadingError.value)
+    fetchNextPage();
+  else
+    queryier.refetch();
+}
+
 function triggerFetchNextPage() {
   if (queryier.isError.value)
     return;
@@ -72,34 +93,70 @@ function triggerFetchNextPage() {
   fetchNextPage();
 }
 
-useCreateTrigger($container, triggerFetchNextPage);
+useCreateTrigger($container, triggerFetchNextPage, props.distance);
+
+const slotProvide = computed<ISlotProvide>(() => ({
+  isInitialLoading: isInitialLoading.value,
+  isInitialLoadingError: isInitialLoadingError.value,
+  isMoreLoading: isMoreLoading.value,
+  isMoreLoadingError: isMoreLoadingError.value,
+  isNoMore: isNoMore.value,
+  isEmpty: isEmpty.value,
+  refetch,
+}));
 </script>
 
 <template>
   <div ref="$container" class="infinite-query-wrapper" :style="containerCssVars">
-    <div v-if="isInitialLoading" class="initial-loading">
-      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
-    </div>
-    <div v-if="isInitialLoadingError" class="initial-loading-error" @click="refetch()">
-      <span>加载失败，点击重试</span>
-    </div>
-
-    <div v-for="(page, i) of pages" :key="i">
-      <template v-for="record of page.list">
-        <slot :record="record as TRecord" />
+    <div class="list">
+      <template v-for="(page) of pages">
+        <template v-for="record of page.list">
+          <!-- eslint-disable-next-line vue/no-extra-parens -->
+          <slot name="default" :record="(record as TRecord)" />
+        </template>
       </template>
     </div>
 
-    <div v-if="isMoreLoading" class="more-loading">
-      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
-      <span class="ml-1 text">加载中...</span>
-    </div>
-    <div v-if="isMoreLoadingError" class="more-loading-error" @click="fetchNextPage()">
-      <span class="text">加载失败，点击重试</span>
-    </div>
-    <div v-if="noMore" class="no-more" @click="refetchLastPage()">
-      <span class="text">暂无更多</span>
-    </div>
+    <slot
+      name="status" v-bind="slotProvide"
+    >
+      <slot name="initialLoading">
+        <div v-if="isInitialLoading" class="initial-loading">
+          <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
+        </div>
+      </slot>
+
+      <slot name="initialLoadingError">
+        <div v-if="isInitialLoadingError" class="initial-loading-error" @click="refetch()">
+          <span>加载失败，点击重试</span>
+        </div>
+      </slot>
+
+      <slot name="empty">
+        <div v-if="isEmpty" class="empty">
+          <span>暂无数据</span>
+        </div>
+      </slot>
+
+      <slot name="oreLoading">
+        <div v-if="isMoreLoading" class="more-loading">
+          <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
+          <span class="ml-1 text">加载中...</span>
+        </div>
+      </slot>
+
+      <slot name="moreLoadingError">
+        <div v-if="isMoreLoadingError" class="more-loading-error" @click="refetch()">
+          <span class="text">加载失败，点击重试</span>
+        </div>
+      </slot>
+
+      <slot name="noMore">
+        <div v-if="isNoMore" class="no-more" @click="refetch()">
+          <span class="text">暂无更多</span>
+        </div>
+      </slot>
+    </slot>
   </div>
 </template>
 
@@ -117,6 +174,7 @@ useCreateTrigger($container, triggerFetchNextPage);
 
 .initial-loading,
 .initial-loading-error,
+.empty,
 .more-loading,
 .more-loading-error,
 .no-more {

package/vue/components/infinite-query/src/useCreateTrigger.ts

@@ -1,15 +1,15 @@
-import { watch } from 'vue';
+import { onUnmounted, watch } from 'vue';
 import type { Ref } from 'vue';
 import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
 
-export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function) {
+export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function, distance: string) {
   const triggerEl = document.createElement('div');
 
   Object.assign(triggerEl.style, {
     position: 'relative',
     zIndex: '5',
-    marginTop: '-150px',
-    marginBottom: '150px',
+    marginTop: `-${distance}`,
+    marginBottom: distance,
     width: '5px',
     height: '5px',
     // background: 'red',
@@ -32,4 +32,8 @@ export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, cal
     if (ele)
       ele.append(triggerEl);
   });
+
+  onUnmounted(() => {
+    triggerEl.remove();
+  });
 }