@peng_kai/kit 0.1.4 → 0.1.6

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

@@ -1,205 +1,205 @@
-<script lang="ts">
-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 = withDefaults(defineProps<{
-  queryier: T
-  distance?: string
-}>(), {
-  distance: '50px',
-});
-
-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 isEmpty = computed(() => queryier.isSuccess.value && !pages.value?.[0].list?.length);
-const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value);
-const isNoMore = 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 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 refetch() {
-  if (isNoMore.value)
-    refetchLastPage();
-  else if (isMoreLoadingError.value)
-    fetchNextPage();
-  else
-    queryier.refetch();
-}
-
-function triggerFetchNextPage() {
-  if (queryier.isError.value)
-    return;
-
-  fetchNextPage();
-}
-
-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 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>
-
-    <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>
-
-<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,
-.empty,
-.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';
+
+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 = withDefaults(defineProps<{
+  queryier: T
+  distance?: string
+}>(), {
+  distance: '50px',
+});
+
+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 isEmpty = computed(() => queryier.isSuccess.value && !pages.value?.[0].list?.length);
+const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value);
+const isNoMore = 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 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 refetch() {
+  if (isNoMore.value)
+    refetchLastPage();
+  else if (isMoreLoadingError.value)
+    fetchNextPage();
+  else
+    queryier.refetch();
+}
+
+function triggerFetchNextPage() {
+  if (queryier.isError.value)
+    return;
+
+  fetchNextPage();
+}
+
+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 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>
+
+    <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>
+
+<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,
+.empty,
+.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/vue/components/infinite-query/src/useCreateTrigger.ts

@@ -1,39 +1,39 @@
-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, distance: string) {
-  const triggerEl = document.createElement('div');
-
-  Object.assign(triggerEl.style, {
-    position: 'relative',
-    zIndex: '5',
-    marginTop: `-${distance}`,
-    marginBottom: distance,
-    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);
-  });
-
-  onUnmounted(() => {
-    triggerEl.remove();
-  });
-}
+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, distance: string) {
+  const triggerEl = document.createElement('div');
+
+  Object.assign(triggerEl.style, {
+    position: 'relative',
+    zIndex: '5',
+    marginTop: `-${distance}`,
+    marginBottom: distance,
+    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);
+  });
+
+  onUnmounted(() => {
+    triggerEl.remove();
+  });
+}

package/vue/hooks/useComponentRef.ts

@@ -2,7 +2,13 @@ import { ref } from 'vue';
 import type { Component } from 'vue';
 import type { ComponentExposed } from 'vue-component-type-helpers';
 
-export function useComponentRef<C extends Component>(_component: C) {
+/**
+ * 组件引用
+ * @param component 组件实例
+ * @returns 组件引用的代理对象
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+export function useComponentRef<C extends Component>(component: C) {
   const _cpt = ref<any>();
   const refFn = (cpt: any) => {
     _cpt.value = cpt;

package/vue/hooks/useIsDark.ts

@@ -18,4 +18,9 @@ function _useIsDark() {
   return isDark;
 }
 
+/**
+ * 返回一个布尔值，表示当前主题是否为暗色模式。
+ *
+ * @returns 当前主题是否为暗色模式的布尔值
+ */
 const useIsDark = createSharedComposable(_useIsDark);

package/vue/hooks/useIsMounted.ts

@@ -1,5 +1,8 @@
 import { onMounted, ref } from 'vue';
 
+/**
+ * 指示组件是否已挂载
+ */
 export function useIsMounted() {
   const mounted = ref(false);
 

package/vue/hooks/useTeleportTarget.ts

@@ -1,5 +1,13 @@
-import { onMounted, ref } from 'vue';
+import { h, onMounted, ref } from 'vue';
+import type { VNode } from 'vue';
+import type { ArrayValues } from 'type-fest';
+import { randomString } from '../../utils';
 
+/**
+ * 使用选择器获取传送目标
+ * @param selectors 选择器字符串
+ * @returns 传送目标的引用
+ */
 export function useTeleportTarget(selectors: string) {
   const target = ref<HTMLElement | null>();
 
@@ -10,4 +18,29 @@ export function useTeleportTarget(selectors: string) {
   });
 
   return target;
-}
+}
+
+/**
+ * 基于提供的顶级类和目标创建传送门选择器
+ * @param topClass 传送门选择器的顶级类
+ * @param targets 传送门的目标
+ */
+export function createTeleportSelectors<TG extends string[]>(topClass: string, targets: TG) {
+  type TGK = ArrayValues<TG>;
+  type TRet = { topClass: string }
+    & { [K in `${TGK}Selector`]: string }
+    & { [K in `${TGK}Class`]: string }
+    & { [K in `${TGK}Target`]: (className?: string, tag?: string) => VNode };
+
+  const ret: Record<string, any> = {};
+  ret.topClass = `${topClass}-${randomString(6)}`;
+
+  targets.forEach((target) => {
+    const _target = ret[`${target}Class`] = `${target}_${randomString(6)}`;
+
+    ret[`${target}Selector`] = `.${ret.topClass} .${_target}`;
+    ret[`${target}Target`] = (className: string = '', tag: string = 'div') => h(tag, { className: `${_target} ${className}` });
+  });
+
+  return ret as TRet;
+}

package/vue/index.ts

@@ -1,5 +1,5 @@
 export { useComponentRef } from './hooks/useComponentRef';
-export { useTeleportTarget } from './hooks/useTeleportTarget';
+export { useTeleportTarget, createTeleportSelectors } from './hooks/useTeleportTarget';
 export { useIsMounted } from './hooks/useIsMounted';
 export { useIsDark } from './hooks/useIsDark';
 export { InfiniteQuery } from './components/infinite-query';