vue3-pull-refresh 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Amir Rafati
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# vue3-pull-refresh
+
+一个基于 **Vue3** 的下拉刷新组件，支持鼠标拖拽 & 触摸手势，适用于移动端/PC。
+轻量、无依赖，支持自定义头部内容。
+
+🔹 安装
+
+```bash
+npm install vue3-pull-refresh
+
+# 或者
+
+yarn add vue3-pull-refresh
+```
+
+🔹 基本使用
+
+```vue
+<template>
+  <PullRefresh v-model="loading" @refresh="loadData">
+    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
+  </PullRefresh>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import PullRefresh from 'vue3-pull-refresh';
+
+const loading = ref(false);
+const list = ref([{ id: 1, text: '数据 1' }]);
+
+async function loadData() {
+  loading.value = true;
+  await new Promise((r) => setTimeout(r, 1000));
+  list.value.unshift({ id: Date.now(), text: '新数据' });
+  loading.value = false;
+}
+</script>
+```
+
+🔹 Props
+
+| 属性                | 类型      | 默认值              | 说明                              |
+| ------------------- | --------- | ------------------- | --------------------------------- |
+| `modelValue`        | `Boolean` | `false`             | 刷新状态，使用 `v-model` 双向绑定 |
+| `pullingText`       | `String`  | `'下拉即可刷新...'` | 下拉状态文案                      |
+| `loosingText`       | `String`  | `'释放即可刷新...'` | 超过阈值松手文案                  |
+| `loadingText`       | `String`  | `'加载中...'`       | 刷新中文案                        |
+| `headerHeight`      | `Number`  | `64`                | 触发刷新所需拉动距离（px）        |
+| `animationDuration` | `Number`  | `200`               | 位移动画时间（ms）                |
+| `disabled`          | `Boolean` | `false`             | 禁用下拉刷新                      |
+
+🔹 事件
+
+| 事件                | 参数      | 说明                                                 |
+| ------------------- | --------- | ---------------------------------------------------- |
+| `refresh`           | 无        | 当下拉距离超过阈值并松手时触发，由父组件控制刷新逻辑 |
+| `update:modelValue` | `Boolean` | 同步刷新状态，父组件通过 `v-model` 接收              |
+
+🔹 插槽
+
+| 名称      | 说明                                                                               |
+| --------- | ---------------------------------------------------------------------------------- |
+| `default` | 内容区域，必须提供滚动内容                                                         |
+| header    | 自定义头部，可以获取状态：`status`（`normal` / `pulling` / `loosing` / `loading`） |
+
+示例：
+
+```vue
+<PullRefresh v-model="loading">
+  <template #header="{ status }">
+    <div v-if="status === 'loading'">刷新中...</div>
+    <div v-else-if="status === 'loosing'">松手刷新</div>
+    <div v-else>下拉刷新</div>
+  </template>
+
+  <div v-for="item in list" :key="item.id">{{ item.text }}</div>
+</PullRefresh>
+```
+
+🔹 注意事项
+
+1. 组件依赖 Vue 3，请确保项目环境正确。
+2. 通过 v-model 控制刷新状态，父组件负责完成异步操作后将 modelValue 设置为 false，组件才会复位。
+3. 默认触发刷新距离为 64px，可通过 headerHeight 调整。

package/dist/PullRefresh.vue.d.ts

@@ -0,0 +1,73 @@
+interface Props {
+    modelValue: boolean;
+    pullingText?: string;
+    loosingText?: string;
+    loadingText?: string;
+    headerHeight?: number;
+    animationDuration?: number;
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    header?(_: {
+        status: "pulling" | "loosing" | "loading";
+        distance: number;
+    }): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    modelValue: boolean;
+    pullingText: string;
+    loosingText: string;
+    loadingText: string;
+    headerHeight: number;
+    animationDuration: number;
+    disabled: boolean;
+}>>, {
+    scroller: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (v: boolean) => void;
+    refresh: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    modelValue: boolean;
+    pullingText: string;
+    loosingText: string;
+    loadingText: string;
+    headerHeight: number;
+    animationDuration: number;
+    disabled: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
+}>, {
+    modelValue: boolean;
+    pullingText: string;
+    loosingText: string;
+    loadingText: string;
+    headerHeight: number;
+    animationDuration: number;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PullRefresh } from './PullRefresh.vue';
+
+export default PullRefresh;

package/dist/index.es.js

@@ -0,0 +1,123 @@
+import { defineComponent as k, ref as w, reactive as T, computed as B, watch as R, createElementBlock as _, openBlock as v, createCommentVNode as b, createElementVNode as x, normalizeStyle as y, renderSlot as M, toDisplayString as E } from "vue";
+const P = { class: "vpr-pull-refresh__header__txt" }, C = /* @__PURE__ */ k({
+  __name: "PullRefresh",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    pullingText: { default: "下拉即可刷新..." },
+    loosingText: { default: "释放即可刷新..." },
+    loadingText: { default: "加载中..." },
+    headerHeight: { default: 64 },
+    animationDuration: { default: 200 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "refresh"],
+  setup(u, { expose: f, emit: c }) {
+    const l = w(), a = u, h = c, n = T({
+      scrollerTransition: "",
+      scrollerTranslate: "",
+      headerTransition: "",
+      headerTranslate: ""
+    }), t = T({
+      status: "normal",
+      startY: 0,
+      pulling: !1,
+      distance: 0
+    }), H = B(() => {
+      switch (t.status) {
+        case "loading":
+          return a.loadingText;
+        case "loosing":
+          return a.loosingText;
+        case "pulling":
+          return a.pullingText;
+        default:
+          return a.pullingText;
+      }
+    });
+    function Y(e) {
+      const s = a.headerHeight, o = Math.max(0, e);
+      return o <= s ? o : s + Math.log2(o - s + 1) * 5;
+    }
+    function r(e, s = !1) {
+      t.distance = Math.max(0, e), n.scrollerTransition = s ? `transform ${a.animationDuration}ms ease` : "none", n.scrollerTranslate = `translate3d(0, ${t.distance}px, 0)`, n.headerTransition = s ? `transform ${a.animationDuration}ms ease` : "none", n.headerTranslate = `translate3d(0, ${t.distance - a.headerHeight}px, 0)`;
+    }
+    function i(e, s) {
+      if (s) {
+        t.status = "loading";
+        return;
+      }
+      e >= a.headerHeight ? t.status = "loosing" : e > 0 ? t.status = "pulling" : t.status = "normal";
+    }
+    function p(e) {
+      a.disabled || l.value && l.value.scrollTop <= 0 && (t.pulling = !0, t.startY = e, r(0, !1), i(0, !1));
+    }
+    function m(e, s) {
+      if (!t.pulling) return;
+      const o = e - t.startY;
+      if (o > 0) {
+        const g = Y(o);
+        s == null || s.preventDefault(), r(g, !1), i(g, !1);
+      } else
+        r(0, !0), t.pulling = !1;
+    }
+    function d() {
+      t.pulling && (t.pulling = !1, t.distance >= a.headerHeight ? (r(a.headerHeight, !0), i(t.distance, !0), h("update:modelValue", !0), h("refresh")) : (r(0, !0), i(0, !1)));
+    }
+    R(
+      () => a.modelValue,
+      (e) => {
+        e || (r(0, !0), i(0, !1));
+      }
+    );
+    const D = (e) => p(e.clientY), S = (e) => m(e.clientY, e), V = (e) => p(e.touches[0].clientY), $ = (e) => m(e.touches[0].clientY, e);
+    return f({
+      scroller: l
+    }), (e, s) => (v(), _("div", {
+      class: "vpr-pull-refresh",
+      onMousedown: D,
+      onMousemove: S,
+      onMouseup: d,
+      onMouseleave: d,
+      onTouchstart: V,
+      onTouchmove: $,
+      onTouchend: d,
+      onTouchcancel: d
+    }, [
+      !a.disabled && t.status !== "normal" ? (v(), _("div", {
+        key: 0,
+        class: "vpr-pull-refresh__header",
+        style: y({
+          height: a.headerHeight + "px",
+          transform: n.headerTranslate,
+          transition: n.headerTransition
+        })
+      }, [
+        M(e.$slots, "header", {
+          status: t.status,
+          distance: t.distance
+        }, () => [
+          x("div", P, E(H.value), 1)
+        ], !0)
+      ], 4)) : b("", !0),
+      x("div", {
+        class: "vpr-pull-refresh__scroll",
+        ref_key: "scrollerRef",
+        ref: l,
+        style: y({
+          transform: n.scrollerTranslate,
+          transition: n.scrollerTransition
+        })
+      }, [
+        M(e.$slots, "default", {}, void 0, !0)
+      ], 4)
+    ], 32));
+  }
+}), N = (u, f) => {
+  const c = u.__vccOpts || u;
+  for (const [l, a] of f)
+    c[l] = a;
+  return c;
+}, z = /* @__PURE__ */ N(C, [["__scopeId", "data-v-9195ae68"]]);
+export {
+  z as default
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(t,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue")):typeof define=="function"&&define.amd?define(["vue"],u):(t=typeof globalThis<"u"?globalThis:t||self,t.Vue3PullRefresh=u(t.Vue))})(this,function(t){"use strict";const u={class:"vpr-pull-refresh__header__txt"};return((d,p)=>{const f=d.__vccOpts||d;for(const[r,s]of p)f[r]=s;return f})(t.defineComponent({__name:"PullRefresh",props:{modelValue:{type:Boolean,default:!1},pullingText:{default:"下拉即可刷新..."},loosingText:{default:"释放即可刷新..."},loadingText:{default:"加载中..."},headerHeight:{default:64},animationDuration:{default:200},disabled:{type:Boolean,default:!1}},emits:["update:modelValue","refresh"],setup(d,{expose:p,emit:f}){const r=t.ref(),s=d,m=f,l=t.reactive({scrollerTransition:"",scrollerTranslate:"",headerTransition:"",headerTranslate:""}),n=t.reactive({status:"normal",startY:0,pulling:!1,distance:0}),x=t.computed(()=>{switch(n.status){case"loading":return s.loadingText;case"loosing":return s.loosingText;case"pulling":return s.pullingText;default:return s.pullingText}});function y(e){const a=s.headerHeight,i=Math.max(0,e);return i<=a?i:a+Math.log2(i-a+1)*5}function o(e,a=!1){n.distance=Math.max(0,e),l.scrollerTransition=a?`transform ${s.animationDuration}ms ease`:"none",l.scrollerTranslate=`translate3d(0, ${n.distance}px, 0)`,l.headerTransition=a?`transform ${s.animationDuration}ms ease`:"none",l.headerTranslate=`translate3d(0, ${n.distance-s.headerHeight}px, 0)`}function c(e,a){if(a){n.status="loading";return}e>=s.headerHeight?n.status="loosing":e>0?n.status="pulling":n.status="normal"}function g(e){s.disabled||r.value&&r.value.scrollTop<=0&&(n.pulling=!0,n.startY=e,o(0,!1),c(0,!1))}function T(e,a){if(!n.pulling)return;const i=e-n.startY;if(i>0){const _=y(i);a==null||a.preventDefault(),o(_,!1),c(_,!1)}else o(0,!0),n.pulling=!1}function h(){n.pulling&&(n.pulling=!1,n.distance>=s.headerHeight?(o(s.headerHeight,!0),c(n.distance,!0),m("update:modelValue",!0),m("refresh")):(o(0,!0),c(0,!1)))}t.watch(()=>s.modelValue,e=>{e||(o(0,!0),c(0,!1))});const M=e=>g(e.clientY),V=e=>T(e.clientY,e),H=e=>g(e.touches[0].clientY),S=e=>T(e.touches[0].clientY,e);return p({scroller:r}),(e,a)=>(t.openBlock(),t.createElementBlock("div",{class:"vpr-pull-refresh",onMousedown:M,onMousemove:V,onMouseup:h,onMouseleave:h,onTouchstart:H,onTouchmove:S,onTouchend:h,onTouchcancel:h},[!s.disabled&&n.status!=="normal"?(t.openBlock(),t.createElementBlock("div",{key:0,class:"vpr-pull-refresh__header",style:t.normalizeStyle({height:s.headerHeight+"px",transform:l.headerTranslate,transition:l.headerTransition})},[t.renderSlot(e.$slots,"header",{status:n.status,distance:n.distance},()=>[t.createElementVNode("div",u,t.toDisplayString(x.value),1)],!0)],4)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"vpr-pull-refresh__scroll",ref_key:"scrollerRef",ref:r,style:t.normalizeStyle({transform:l.scrollerTranslate,transition:l.scrollerTransition})},[t.renderSlot(e.$slots,"default",{},void 0,!0)],4)],32))}}),[["__scopeId","data-v-9195ae68"]])});

package/dist/style.css

@@ -0,0 +1 @@
+.vpr-pull-refresh[data-v-9195ae68]{position:relative;height:100%;overflow:hidden;touch-action:pan-y}.vpr-pull-refresh__scroll[data-v-9195ae68]{position:relative;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.vpr-pull-refresh__header[data-v-9195ae68]{position:absolute;top:0;left:0;right:0;pointer-events:none;will-change:transform}.vpr-pull-refresh__header__txt[data-v-9195ae68]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "vue3-pull-refresh",
+  "version": "1.0.2",
+  "description": "A Vue3 pull-to-refresh component",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "vue3",
+    "refresh",
+    "pull-refresh",
+    "pull-to-refresh",
+    "component"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Matthew-Gu/vue3-pull-refresh.git"
+  },
+  "author": "MatthewGu",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "vue": "^3.4.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite-plugin-dts": "^3.5.0",
+    "typescript": "^5.3.0"
+  }
+}