@peng_kai/kit 0.0.13 → 0.0.15

package/components/infinite-query/index.ts

@@ -1 +1 @@
-export { default as InfiniteQuery } from './src/InfiniteQuery.vue'
+export { default as InfiniteQuery } from './src/InfiniteQuery.vue'

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

@@ -1,147 +1,147 @@
-<script lang="ts">
-import { computed, ref, unref } from "vue";
-import type { UseInfiniteQueryReturnType } from '@tanstack/vue-query'
-import { useCreateTrigger } from './useCreateTrigger'
-</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<{
-  queryier: T
-}>()
-
-const { queryier } = props
-const pages = computed(() => queryier.data.value?.pages)
-// TODO: 状态之间的互斥仍有问题
-const isInitialLoading = computed(() => queryier.isInitialLoading.value)
-const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !isInitialLoading.value)
-const isMoreLoading = computed(
-  () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
-)
-const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value)
-const noMore = computed(
-  () =>
-    !queryier.hasNextPage?.value
-    && !isInitialLoading.value
-    && !isInitialLoadingError.value
-    && !isMoreLoading.value
-    && !isMoreLoadingError.value,
-)
-const $container = ref<HTMLElement>()
-const containerCssVars = computed(() => {
-  const ctnEle = unref($container)
-
-  if (!ctnEle)
-    return {}
-
-  const rect = ctnEle.getBoundingClientRect()
-
-  return {
-    '--ctn-height': `${rect.height}px`,
-  }
-})
-
-function refetch() {
-  queryier.refetch()
-}
-
-function refetchLastPage() {
-  queryier.refetch({
-    refetchPage(lastPage: any, _index, allPages: any[]) {
-      const lastIndex = allPages?.length - 1
-      return lastPage?.pagination?.page === allPages?.[lastIndex]?.pagination?.page
-    },
-  })
-}
-
-function fetchNextPage() {
-  const { isFetching, isLoading, hasNextPage } = queryier
-
-  if (isFetching.value || isLoading.value || !hasNextPage?.value)
-    return
-
-  queryier.fetchNextPage()
-}
-
-function triggerFetchNextPage() {
-  if (queryier.isError.value)
-    return
-
-  fetchNextPage()
-}
-
-useCreateTrigger($container, triggerFetchNextPage)
-</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" />
-      </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>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.infinite-query-wrapper {
-  overflow: auto;
-  font-size: 14px;
-}
-
-.loading-icon {
-  display: block;
-  color: var(--antd-colorPrimary);
-  font-size: 1.2em;
-}
-
-.initial-loading,
-.initial-loading-error,
-.more-loading,
-.more-loading-error,
-.no-more {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--antd-colorTextSecondary);
-}
-
-.initial-loading,
-.initial-loading-error {
-  height: var(--ctn-height, 100px);
-}
-
-.initial-loading-error {
-  cursor: pointer;
-}
-
-.more-loading,
-.more-loading-error,
-.no-more {
-  height: 50px;
-}
-
-.more-loading-error {
-  cursor: pointer;
-}
-</style>
+<script lang="ts">
+import { computed, ref, unref } from "vue";
+import type { UseInfiniteQueryReturnType } from '@tanstack/vue-query'
+import { useCreateTrigger } from './useCreateTrigger'
+</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<{
+  queryier: T
+}>()
+
+const { queryier } = props
+const pages = computed(() => queryier.data.value?.pages)
+// TODO: 状态之间的互斥仍有问题
+const isInitialLoading = computed(() => queryier.isInitialLoading.value)
+const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !isInitialLoading.value)
+const isMoreLoading = computed(
+  () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
+)
+const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value)
+const noMore = computed(
+  () =>
+    !queryier.hasNextPage?.value
+    && !isInitialLoading.value
+    && !isInitialLoadingError.value
+    && !isMoreLoading.value
+    && !isMoreLoadingError.value,
+)
+const $container = ref<HTMLElement>()
+const containerCssVars = computed(() => {
+  const ctnEle = unref($container)
+
+  if (!ctnEle)
+    return {}
+
+  const rect = ctnEle.getBoundingClientRect()
+
+  return {
+    '--ctn-height': `${rect.height}px`,
+  }
+})
+
+function refetch() {
+  queryier.refetch()
+}
+
+function refetchLastPage() {
+  queryier.refetch({
+    refetchPage(lastPage: any, _index, allPages: any[]) {
+      const lastIndex = allPages?.length - 1
+      return lastPage?.pagination?.page === allPages?.[lastIndex]?.pagination?.page
+    },
+  })
+}
+
+function fetchNextPage() {
+  const { isFetching, isLoading, hasNextPage } = queryier
+
+  if (isFetching.value || isLoading.value || !hasNextPage?.value)
+    return
+
+  queryier.fetchNextPage()
+}
+
+function triggerFetchNextPage() {
+  if (queryier.isError.value)
+    return
+
+  fetchNextPage()
+}
+
+useCreateTrigger($container, triggerFetchNextPage)
+</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" />
+      </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>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.infinite-query-wrapper {
+  overflow: auto;
+  font-size: 14px;
+}
+
+.loading-icon {
+  display: block;
+  color: var(--antd-colorPrimary);
+  font-size: 1.2em;
+}
+
+.initial-loading,
+.initial-loading-error,
+.more-loading,
+.more-loading-error,
+.no-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--antd-colorTextSecondary);
+}
+
+.initial-loading,
+.initial-loading-error {
+  height: var(--ctn-height, 100px);
+}
+
+.initial-loading-error {
+  cursor: pointer;
+}
+
+.more-loading,
+.more-loading-error,
+.no-more {
+  height: 50px;
+}
+
+.more-loading-error {
+  cursor: pointer;
+}
+</style>

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

@@ -1,35 +1,35 @@
-import  { watch } from "vue";
-import type { Ref } from "vue";
-import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
-
-export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function) {
-  const triggerEl = document.createElement('div')
-
-  Object.assign(triggerEl.style, {
-    position: 'relative',
-    zIndex: '5',
-    marginTop: '-150px',
-    marginBottom: '150px',
-    width: '5px',
-    height: '5px',
-    // background: 'red',
-  } satisfies Partial<CSSStyleDeclaration>)
-
-  useIntervalFn(() => {
-    const { transform } = triggerEl.style
-
-    if (transform)
-      triggerEl.style.removeProperty('transform')
-    else triggerEl.style.setProperty('transform', 'translateX(-200%)')
-  }, 500)
-
-  useIntersectionObserver(triggerEl, ([entry]) => {
-    if (entry.isIntersecting)
-      callback()
-  })
-
-  watch(containerEle, (ele) => {
-    if (ele)
-      ele.append(triggerEl)
-  })
-}
+import  { watch } from "vue";
+import type { Ref } from "vue";
+import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
+
+export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function) {
+  const triggerEl = document.createElement('div')
+
+  Object.assign(triggerEl.style, {
+    position: 'relative',
+    zIndex: '5',
+    marginTop: '-150px',
+    marginBottom: '150px',
+    width: '5px',
+    height: '5px',
+    // background: 'red',
+  } satisfies Partial<CSSStyleDeclaration>)
+
+  useIntervalFn(() => {
+    const { transform } = triggerEl.style
+
+    if (transform)
+      triggerEl.style.removeProperty('transform')
+    else triggerEl.style.setProperty('transform', 'translateX(-200%)')
+  }, 500)
+
+  useIntersectionObserver(triggerEl, ([entry]) => {
+    if (entry.isIntersecting)
+      callback()
+  })
+
+  watch(containerEle, (ele) => {
+    if (ele)
+      ele.append(triggerEl)
+  })
+}

package/package.json

@@ -1,40 +1,40 @@
-{
-  "name": "@peng_kai/kit",
-  "version": "0.0.13",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@tanstack/vue-query": "^4.37.1",
-    "@vueuse/core": "^10.5.0",
-    "ant-design-vue": "^4.0.6",
-    "axios": "^1.6.0",
-    "bignumber.js": "^9.1.2",
-    "dayjs": "^1.11.10",
-    "lodash-es": "^4.17.21",
-    "vue": "^3.3.7",
-    "vue-router": "^4.2.5"
-  },
-  "devDependencies": {
-    "@types/lodash-es": "^4.17.10",
-    "@types/node": "18",
-    "type-fest": "^4.6.0",
-    "vue-component-type-helpers": "^1.8.22"
-  },
-  "peerDependencies": {
-    "@tanstack/vue-query": "4.x",
-    "@vueuse/core": "10.x",
-    "ant-design-vue": "4.0.x",
-    "axios": "1.6.x",
-    "bignumber.js": "9.x",
-    "dayjs": "1.x",
-    "lodash-es": "4.x",
-    "vue": "3.3.x",
-    "vue-router": "4.2.x"
-  }
-}
+{
+  "name": "@peng_kai/kit",
+  "version": "0.0.15",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tanstack/vue-query": "^4.37.1",
+    "@vueuse/core": "^10.5.0",
+    "ant-design-vue": "^4.0.6",
+    "axios": "^1.6.0",
+    "bignumber.js": "^9.1.2",
+    "dayjs": "^1.11.10",
+    "lodash-es": "^4.17.21",
+    "vue": "^3.3.7",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.10",
+    "@types/node": "18",
+    "type-fest": "^4.6.0",
+    "vue-component-type-helpers": "^1.8.22"
+  },
+  "peerDependencies": {
+    "@tanstack/vue-query": "4.x",
+    "@vueuse/core": "10.x",
+    "ant-design-vue": "4.0.x",
+    "axios": "1.6.x",
+    "bignumber.js": "9.x",
+    "dayjs": "1.x",
+    "lodash-es": "4.x",
+    "vue": "3.3.x",
+    "vue-router": "4.2.x"
+  }
+}