✨ feat: pull-refresh 组件

docs/.vitepress/config/index.ts

@@ -31,6 +31,7 @@ export default defineConfig({
                         { text: 'Overlay', link: '/component/overlay' },
                         { text: 'TextEllipsis', link: '/component/text-ellipsis' },
                         { text: 'TextHighlight', link: '/component/text-highlight' },
+                        { text: 'PullRefresh', link: '/component/pull-refresh' },
                     ],
                 },
             ],

docs/component/captcha.md

@@ -24,7 +24,7 @@
 
 | 名称            | 类型                                                                      | 说明                              | 默认值       |
 | --------------- | ------------------------------------------------------------------------- | --------------------------------- | ------------ |
-| type            | `CaptchType`                                                              | 验证的方式                        | `'slider'`   |
+| type            | `'slider' \| 'pointer'`                                                   | 验证的方式                        | `'slider'`   |
 | canvasSize      | `[number, number]`                                                        | 画布大小                          | `[500, 300]` |
 | image           | `string`                                                                  | 图片地址                          | -            |
 | texts           | `string[]`                                                                | 验证方式为 `pointer` 时的验证文字 | -            |
@@ -90,11 +90,6 @@
 ## 内置类型
 
 ```ts
-enum CaptchType {
-    slider = 'slider',
-    pointer = 'pointer',
-}
-
 type CheckStatusInfo = {
     success: boolean;
     message: string;

docs/component/pull-refresh.md

@@ -0,0 +1,7 @@
+# PullRefresh
+
+## 基础用法
+
+:::demo pull-refresh/base
+
+:::

docs/demos/pull-refresh/base.vue

@@ -0,0 +1,22 @@
+<template>
+    <CdxPullRefresh
+        v-model="loading"
+        @refresh="handleRefresh"
+        style="height: 400px"
+    >
+        <p v-for="i in 20">{{ i }}</p>
+    </CdxPullRefresh>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const handleRefresh = () => {
+    console.log('refresh');
+    setTimeout(() => {
+        loading.value = false;
+    }, 3000);
+};
+</script>

package.json

@@ -13,6 +13,7 @@
         "build:build-utils": "pnpm -C ./internal/build-utils build && pnpm i",
         "docs:dev": "pnpm -C ./docs dev",
         "docs:build": "pnpm -C ./docs build",
+        "play:dev": "pnpm -C ./playground dev",
         "create": "tsx ./scripts/create.ts"
     },
     "peerDependencies": {

packages/cdx-component/component.ts

@@ -8,8 +8,9 @@ import { CdxTextEllipsis } from '../components/text-ellipsis';
 import { CdxTextHighlight } from '../components/text-highlight';
 import { CdxModel } from '../components/model';
 import { CdxCountTo } from '../components/count-to';
-import { CdxCollapse ,CdxCollapseItem} from '../components/collapse';
+import { CdxCollapse, CdxCollapseItem } from '../components/collapse';
 import { CdxCollapseTransition } from '../components/collapse-transition';
+import { CdxPullRefresh } from '../components/pull-refresh';
 
 import type { Plugin } from 'vue';
 
@@ -30,4 +31,5 @@ export default [
     CdxCollapse,
     CdxCollapseItem,
     CdxCollapseTransition,
+    CdxPullRefresh,
 ] as Plugin[];

packages/components/captcha/src/captcha.ts

@@ -1,63 +1,60 @@
-import { buildProps, definePropType } from '@cdx-component/utils';
-import type { ExtractPropTypes } from 'vue';
-
-export type CheckStatusInfo = {
-    success: boolean;
-    message: string;
-};
-export enum CheckStatus {
-    success = 'success',
-    fail = 'fail',
-    none = 'none',
-}
-export enum CaptchType {
-    slider = 'slider',
-    pointer = 'pointer',
-}
-export const captchaProps = buildProps({
-    type: {
-        type: String,
-        values: ['slider', 'pointer'],
-        default: CaptchType.slider,
-    },
-    image: {
-        type: String,
-        required: true,
-    },
-    canvasSize: {
-        type: definePropType<[number, number]>(Array),
-        default: () => [500, 300],
-    },
-    texts: {
-        type: definePropType<string[]>(Array),
-        validator: (v: any) =>
-            Array.isArray(v) && v.every((item: any) => typeof item === 'string' && item.length === 1),
-    },
-    fontRate: {
-        type: Number,
-        default: 0.108,
-        validator: (v: any) => typeof v === 'number' && v >= 0 && v <= 1,
-    },
-    onBeforSuccess: {
-        type: definePropType<() => Promise<boolean | CheckStatusInfo> | boolean | CheckStatusInfo>(Function),
-    },
-    loading: {
-        type: Boolean,
-        default: false,
-    },
-    onRefresh: {
-        type: definePropType<() => void | Promise<void>>(Function),
-    },
-    tipDuration: {
-        type: Number,
-        default: 3000,
-    },
-} as const);
-export type CaptchaProps = ExtractPropTypes<typeof captchaProps>;
-
-export const captchaEmits = {
-    success: () => true,
-    fail: () => true,
-    imgError: () => true,
-};
-export type CaptchaEmits = typeof captchaEmits;
+import { buildProps, definePropType } from '@cdx-component/utils';
+import type { ExtractPropTypes } from 'vue';
+
+export type CheckStatusInfo = {
+    success: boolean;
+    message: string;
+};
+export enum CheckStatus {
+    success = 'success',
+    fail = 'fail',
+    none = 'none',
+}
+
+export const captchaProps = buildProps({
+    type: {
+        type: String,
+        values: ['slider', 'pointer'],
+        default: 'slider',
+    },
+    image: {
+        type: String,
+        required: true,
+    },
+    canvasSize: {
+        type: definePropType<[number, number]>(Array),
+        default: () => [500, 300],
+    },
+    texts: {
+        type: definePropType<string[]>(Array),
+        validator: (v: any) =>
+            Array.isArray(v) && v.every((item: any) => typeof item === 'string' && item.length === 1),
+    },
+    fontRate: {
+        type: Number,
+        default: 0.108,
+        validator: (v: any) => typeof v === 'number' && v >= 0 && v <= 1,
+    },
+    onBeforSuccess: {
+        type: definePropType<() => Promise<boolean | CheckStatusInfo> | boolean | CheckStatusInfo>(Function),
+    },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    onRefresh: {
+        type: definePropType<() => void | Promise<void>>(Function),
+    },
+    tipDuration: {
+        type: Number,
+        default: 3000,
+    },
+} as const);
+export type CaptchaProps = ExtractPropTypes<typeof captchaProps>;
+
+export const captchaEmits = {
+    success: () => true,
+    fail: () => true,
+    imgError: () => true,
+};
+export type CaptchaEmits = typeof captchaEmits;

packages/components/captcha/src/captcha.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isFunction, isBoolean, generateRandomColor } from '@cdx-component/utils';
 import { ref, computed, watch, nextTick, onMounted } from 'vue';
-import { captchaProps, CheckStatus, captchaEmits, CaptchType } from './captcha';
+import { captchaProps, CheckStatus, captchaEmits } from './captcha';
 import { squarePath } from './canvasPath';
 import { CdxLoading, CdxCaptchaSlider } from '@cdx-component/components';
 import { useBem } from '@cdx-component/hooks';
@@ -176,14 +176,14 @@ const drawImage = async (imageSrc: string, canvasEl?: HTMLCanvasElement) => {
     if (!ctx) return;
     const { width, height } = canvasEl;
     ctx.drawImage(image, 0, 0, width, height);
-    if (props.type === CaptchType.pointer) {
+    if (props.type === 'pointer') {
         return drawText(ctx, { width, height });
     }
 
     const subCanvasEl = subCanvasRef.value;
     const subCtx = subCanvasEl?.getContext?.('2d');
     if (!subCanvasEl || !subCtx || !trackRef.value) return;
-    if (props.type === CaptchType.slider) {
+    if (props.type === 'slider') {
         const canvasRect = canvasEl.getBoundingClientRect();
         const trackRect = trackRef.value.getBoundingClientRect();
         // 滑动时以轨道为准, 需要补正 canvas 宽度和 track 宽度的差值
@@ -245,7 +245,7 @@ const handleRefresh = async () => {
     refreshLoading.value = false;
 };
 const handlePointerSetClick = async (e: MouseEvent) => {
-    if (props.type !== CaptchType.pointer || !canvasRef.value || !pointerTargets.length || isLock.value) return;
+    if (props.type !== 'pointer' || !canvasRef.value || !pointerTargets.length || isLock.value) return;
     const { offsetX, offsetY } = e;
     const { clientWidth: width, clientHeight: height } = canvasRef.value;
     pointers.value.push([(offsetX / width) * 100, (offsetY / height) * 100]);
@@ -319,7 +319,7 @@ onMounted(() => {
             :class="[
                 bem.be('container'),
                 isLock && bem.bem('container', 'lock'),
-                type === CaptchType.pointer && bem.bs('pointer'),
+                type === 'pointer' && bem.bs('pointer'),
             ]"
             @click="handlePointerSetClick"
         >
@@ -331,7 +331,7 @@ onMounted(() => {
                     :height="canvasSize[1]"
                 ></canvas>
                 <div
-                    v-if="type === CaptchType.slider"
+                    v-if="type === 'slider'"
                     :class="bem.be('sub-image')"
                 >
                     <canvas
@@ -342,7 +342,7 @@ onMounted(() => {
                     ></canvas>
                 </div>
             </template>
-            <template v-if="type === CaptchType.pointer">
+            <template v-if="type === 'pointer'">
                 <span
                     v-for="([x, y], i) in pointers"
                     :class="bem.be('pointer')"
@@ -367,7 +367,7 @@ onMounted(() => {
         </div>
         <div :class="bem.be('footer')">
             <div
-                v-if="type === CaptchType.pointer"
+                v-if="type === 'pointer'"
                 :class="bem.be('text-list')"
             >
                 <span :class="bem.be('tip')">请依次点击：</span>
@@ -379,7 +379,7 @@ onMounted(() => {
                 </span>
             </div>
             <CdxCaptchaSlider
-                v-else-if="type === CaptchType.slider"
+                v-else-if="type === 'slider'"
                 ref="sliderRef"
                 :lock="isLock"
                 :loading="isLoading"

packages/components/index.ts

@@ -10,3 +10,4 @@ export * from './model';
 export * from './count-to';
 export * from './collapse';
 export * from './collapse-transition';
+export * from './pull-refresh';

packages/components/pull-refresh/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '@cdx-component/utils';
+import PullRefresh from './src/pull-refresh.vue';
+
+export const CdxPullRefresh = withInstall(PullRefresh);
+export * from './src/pull-refresh';
+export default CdxPullRefresh;

packages/components/pull-refresh/src/pull-refresh.ts

@@ -0,0 +1,35 @@
+import { UPDATE_MODEL_EVENT } from '@cdx-component/constants';
+import { buildProps, isBoolean } from '@cdx-component/utils';
+import type { ExtractPropTypes } from 'vue';
+
+export enum PullRefreshStatus {
+    pulling = 'pulling',
+    loading = 'loading',
+    loosing = 'loosing',
+    none = 'none',
+}
+
+export const pullRefreshProps = buildProps({
+    modelValue: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    headHeight: {
+        type: [Number, String],
+        default: 50,
+    },
+    refreshDistance: {
+        type: [Number, String],
+    },
+} as const);
+export type PullRefreshProps = ExtractPropTypes<typeof pullRefreshProps>;
+
+export const pullRefreshEmits = {
+    [UPDATE_MODEL_EVENT]: (value: boolean) => isBoolean(value),
+    refresh: () => true,
+};
+export type PullRefreshEmits = typeof pullRefreshEmits;