@allkit/use 0.0.1

package/README.md

@@ -0,0 +1 @@
+# vue use hooks 函数

package/dist/README.md

@@ -0,0 +1 @@
+# vue use hooks 函数

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useCtxState';
+export * from './usePageVisibility';
+export * from './useEventListener';
+export * from './useScroll';
+export * from './onMountedOrActivated';

package/dist/onMountedOrActivated/index.d.ts

@@ -0,0 +1 @@
+export declare function onMountedOrActivated(hook: () => any): void;

package/dist/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@allkit/use",
+    "version": "0.0.1",
+    "description": "this is a vue3use package",
+    "type": "module",
+    "main": "./shared.umd.js",
+    "module":"./shared.es.js",
+    "types": "index.d.ts",
+    "exports": {
+      ".": {
+        "import": "./shared.es.js",
+        "require": "./shared.umd.js"
+      },
+    },
+    "keywords": ["vue", "vueuse","@allkit/use"],
+    "license": "MIT",
+    "author": "SPig",
+    "publishConfig":{"access":"public"},
+    "dependencies":{},
+    "peerDependencies":  {"vue":"^3.0.0","@allkit/shared":"workspace:*"}
+  }
+  

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import { MaybeRef, ComponentPublicInstance, MaybeRefOrGetter } from 'vue';
+export interface ConfigurableWindow {
+    window?: Window;
+}
+export interface ConfigurableDocument {
+    document?: Document;
+}
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElement = Window | Document | HTMLElement | SVGElement | undefined | null;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
+export type TargetRef = MaybeElementRef<MaybeElement> | MaybeRef<EventTarget>;

package/dist/use.es.d.ts

@@ -0,0 +1,2 @@
+export * from './index'
+export {}

package/dist/use.es.js

@@ -0,0 +1,209 @@
+var J = Object.defineProperty;
+var V = Object.getOwnPropertySymbols;
+var K = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var j = (o, t, n) => t in o ? J(o, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[t] = n, H = (o, t) => {
+  for (var n in t || (t = {}))
+    K.call(t, n) && j(o, n, t[n]);
+  if (V)
+    for (var n of V(t))
+      N.call(t, n) && j(o, n, t[n]);
+  return o;
+};
+import { reactive as D, getCurrentInstance as Y, onMounted as q, onBeforeUnmount as Q, nextTick as Z, onActivated as tt, onUnmounted as et, onDeactivated as ot, isRef as nt, watch as st, unref as k, ref as A, computed as U, toValue as S } from "vue";
+import { isClient as z, debounce as lt, throttle as rt } from "@allkit/shared";
+const dt = (o) => {
+  const t = D(o), s = [t, (l) => {
+    if (typeof l == "function") {
+      l(t);
+      return;
+    }
+    Object.assign(t, l);
+  }], c = Y();
+  if (!c)
+    return console.error("useCtxState must be called within a setup function"), s;
+  const { provides: u = {}, uid: d, type: v } = c, g = `state_${d}_${v.name || v.__name || ""}`;
+  return u[g] = s, s;
+}, vt = () => {
+  const o = Y();
+  if (!o)
+    throw new Error(
+      "useCtxState is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup()"
+    );
+  const { provides: t = {}, uid: n, type: s } = o, c = `state_${n}_${s.name || s.__name || ""}`;
+  return t[c] || [];
+}, mt = () => {
+  let o, t;
+  const n = (u) => {
+    o = u;
+  }, s = (u) => {
+    t = u;
+  }, c = () => {
+    if (document.visibilityState === "hidden") {
+      t && t();
+      return;
+    }
+    o && o();
+  };
+  return q(() => {
+    document.addEventListener("visibilitychange", c);
+  }), Q(() => {
+    document.removeEventListener("visibilitychange", c);
+  }), {
+    onPageShow: n,
+    onPageHidden: s
+  };
+};
+function F(o) {
+  let t;
+  q(() => {
+    o(), Z(() => {
+      t = !0;
+    });
+  }), tt(() => {
+    t && o();
+  });
+}
+function W(o, t, n = {}) {
+  if (!z)
+    return;
+  const { target: s = window, passive: c = !1, capture: u = !1 } = n;
+  let d = !1, v;
+  const g = (a) => {
+    if (d)
+      return;
+    const i = k(a);
+    i && !v && (i.addEventListener(o, t, {
+      capture: u,
+      passive: c
+    }), v = !0);
+  }, l = (a) => {
+    if (d)
+      return;
+    const i = k(a);
+    i && v && (i.removeEventListener(o, t, u), v = !1);
+  };
+  et(() => l(s)), ot(() => l(s)), F(() => g(s));
+  let E;
+  return nt(s) && (E = st(s, (a, i) => {
+    l(i), g(a);
+  })), () => {
+    E == null || E(), l(s), d = !0;
+  };
+}
+const X = () => ({});
+function it(o) {
+  var n;
+  const t = S(o);
+  return (n = t == null ? void 0 : t.$el) != null ? n : t;
+}
+const B = 1, ct = z ? window : void 0;
+function pt(o, t = {}) {
+  const {
+    throttle: n = 0,
+    idle: s = 200,
+    onStop: c = X,
+    onScroll: u = X,
+    offset: d = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    eventListenerOptions: v = {
+      capture: !1,
+      passive: !0
+    },
+    behavior: g = "auto",
+    window: l = ct,
+    onError: E = (e) => {
+      console.error(e);
+    }
+  } = t, a = A(0), i = A(0), x = U({
+    get() {
+      return a.value;
+    },
+    set(e) {
+      M(e, void 0);
+    }
+  }), C = U({
+    get() {
+      return i.value;
+    },
+    set(e) {
+      M(void 0, e);
+    }
+  });
+  function M(e, f) {
+    var b, w, T, m;
+    if (!l) return;
+    const r = S(o);
+    if (!r) return;
+    (T = r instanceof Document ? l.document.body : r) == null || T.scrollTo({
+      top: (b = S(f)) != null ? b : C.value,
+      left: (w = S(e)) != null ? w : x.value,
+      behavior: S(g)
+    });
+    const y = ((m = r == null ? void 0 : r.document) == null ? void 0 : m.documentElement) || (r == null ? void 0 : r.documentElement) || r;
+    x.value != null && (a.value = y.scrollLeft), C.value != null && (i.value = y.scrollTop);
+  }
+  const L = A(!1), p = D({
+    left: !0,
+    right: !1,
+    top: !0,
+    bottom: !1
+  }), h = D({
+    left: !1,
+    right: !1,
+    top: !1,
+    bottom: !1
+  }), $ = (e) => {
+    L.value && (L.value = !1, h.left = !1, h.right = !1, h.top = !1, h.bottom = !1, c(e));
+  }, G = lt($, n + s), _ = (e) => {
+    var R;
+    if (!l) return;
+    const f = ((R = e == null ? void 0 : e.document) == null ? void 0 : R.documentElement) || (e == null ? void 0 : e.documentElement) || it(e), { display: r, flexDirection: y } = getComputedStyle(f), b = f.scrollLeft;
+    h.left = b < a.value, h.right = b > a.value;
+    const w = Math.abs(b) <= (d.left || 0), T = Math.abs(b) + f.clientWidth >= f.scrollWidth - (d.right || 0) - B;
+    r === "flex" && y === "row-reverse" ? (p.left = T, p.right = w) : (p.left = w, p.right = T), a.value = b;
+    let m = f.scrollTop;
+    e === l.document && !m && (m = l.document.body.scrollTop), h.top = m < i.value, h.bottom = m > i.value;
+    const I = Math.abs(m) <= (d.top || 0), O = Math.abs(m) + f.clientHeight >= f.scrollHeight - (d.bottom || 0) - B;
+    r === "flex" && y === "column-reverse" ? (p.top = O, p.bottom = I) : (p.top = I, p.bottom = O), i.value = m;
+  }, P = (e) => {
+    var r;
+    if (!l) return;
+    const f = (r = e.target.documentElement) != null ? r : e.target;
+    _(f), L.value = !0, G(e), u(e);
+  };
+  return W("scroll", n ? rt(P, n) : P, H({
+    target: o
+  }, v)), F(() => {
+    try {
+      const e = S(o);
+      if (!e) return;
+      _(e);
+    } catch (e) {
+      E(e);
+    }
+  }), W("scrollend", $, H({
+    target: o
+  }, v)), {
+    x,
+    y: C,
+    isScrolling: L,
+    arrivedState: p,
+    directions: h,
+    measure() {
+      const e = S(o);
+      l && e && _(e);
+    }
+  };
+}
+export {
+  dt as defineCtxState,
+  F as onMountedOrActivated,
+  vt as useCtxState,
+  W as useEventListener,
+  mt as usePageVisibility,
+  pt as useScroll
+};

package/dist/use.umd.js

@@ -0,0 +1 @@
+(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@allkit/shared")):typeof define=="function"&&define.amd?define(["exports","vue","@allkit/shared"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s.use={},s.Vue,s.shared))})(this,(function(s,t,c){"use strict";var K=Object.defineProperty;var U=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var W=(s,t,c)=>t in s?K(s,t,{enumerable:!0,configurable:!0,writable:!0,value:c}):s[t]=c,P=(s,t)=>{for(var c in t||(t={}))N.call(t,c)&&W(s,c,t[c]);if(U)for(var c of U(t))Q.call(t,c)&&W(s,c,t[c]);return s};const X=n=>{const o=t.reactive(n),i=[o,l=>{if(typeof l=="function"){l(o);return}Object.assign(o,l)}],f=t.getCurrentInstance();if(!f)return console.error("useCtxState must be called within a setup function"),i;const{provides:d={},uid:p,type:b}=f,E=`state_${p}_${b.name||b.__name||""}`;return d[E]=i,i},B=()=>{const n=t.getCurrentInstance();if(!n)throw new Error("useCtxState is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup()");const{provides:o={},uid:a,type:i}=n,f=`state_${a}_${i.name||i.__name||""}`;return o[f]||[]},Y=()=>{let n,o;const a=d=>{n=d},i=d=>{o=d},f=()=>{if(document.visibilityState==="hidden"){o&&o();return}n&&n()};return t.onMounted(()=>{document.addEventListener("visibilitychange",f)}),t.onBeforeUnmount(()=>{document.removeEventListener("visibilitychange",f)}),{onPageShow:a,onPageHidden:i}};function _(n){let o;t.onMounted(()=>{n(),t.nextTick(()=>{o=!0})}),t.onActivated(()=>{o&&n()})}function x(n,o,a={}){if(!c.isClient)return;const{target:i=window,passive:f=!1,capture:d=!1}=a;let p=!1,b;const E=m=>{if(p)return;const u=t.unref(m);u&&!b&&(u.addEventListener(n,o,{capture:d,passive:f}),b=!0)},l=m=>{if(p)return;const u=t.unref(m);u&&b&&(u.removeEventListener(n,o,d),b=!1)};t.onUnmounted(()=>l(i)),t.onDeactivated(()=>l(i)),_(()=>E(i));let T;return t.isRef(i)&&(T=t.watch(i,(m,u)=>{l(u),E(m)})),()=>{T==null||T(),l(i),p=!0}}const D=()=>({});function z(n){var a;const o=t.toValue(n);return(a=o==null?void 0:o.$el)!=null?a:o}const O=1,F=c.isClient?window:void 0;function G(n,o={}){const{throttle:a=0,idle:i=200,onStop:f=D,onScroll:d=D,offset:p={left:0,right:0,top:0,bottom:0},eventListenerOptions:b={capture:!1,passive:!0},behavior:E="auto",window:l=F,onError:T=e=>{console.error(e)}}=o,m=t.ref(0),u=t.ref(0),M=t.computed({get(){return m.value},set(e){I(e,void 0)}}),A=t.computed({get(){return u.value},set(e){I(void 0,e)}});function I(e,h){var g,C,L,v;if(!l)return;const r=t.toValue(n);if(!r)return;(L=r instanceof Document?l.document.body:r)==null||L.scrollTo({top:(g=t.toValue(h))!=null?g:A.value,left:(C=t.toValue(e))!=null?C:M.value,behavior:t.toValue(E)});const w=((v=r==null?void 0:r.document)==null?void 0:v.documentElement)||(r==null?void 0:r.documentElement)||r;M.value!=null&&(m.value=w.scrollLeft),A.value!=null&&(u.value=w.scrollTop)}const V=t.ref(!1),S=t.reactive({left:!0,right:!1,top:!0,bottom:!1}),y=t.reactive({left:!1,right:!1,top:!1,bottom:!1}),$=e=>{V.value&&(V.value=!1,y.left=!1,y.right=!1,y.top=!1,y.bottom=!1,f(e))},J=c.debounce($,a+i),H=e=>{var q;if(!l)return;const h=((q=e==null?void 0:e.document)==null?void 0:q.documentElement)||(e==null?void 0:e.documentElement)||z(e),{display:r,flexDirection:w}=getComputedStyle(h),g=h.scrollLeft;y.left=g<m.value,y.right=g>m.value;const C=Math.abs(g)<=(p.left||0),L=Math.abs(g)+h.clientWidth>=h.scrollWidth-(p.right||0)-O;r==="flex"&&w==="row-reverse"?(S.left=L,S.right=C):(S.left=C,S.right=L),m.value=g;let v=h.scrollTop;e===l.document&&!v&&(v=l.document.body.scrollTop),y.top=v<u.value,y.bottom=v>u.value;const k=Math.abs(v)<=(p.top||0),R=Math.abs(v)+h.clientHeight>=h.scrollHeight-(p.bottom||0)-O;r==="flex"&&w==="column-reverse"?(S.top=R,S.bottom=k):(S.top=k,S.bottom=R),u.value=v},j=e=>{var r;if(!l)return;const h=(r=e.target.documentElement)!=null?r:e.target;H(h),V.value=!0,J(e),d(e)};return x("scroll",a?c.throttle(j,a):j,P({target:n},b)),_(()=>{try{const e=t.toValue(n);if(!e)return;H(e)}catch(e){T(e)}}),x("scrollend",$,P({target:n},b)),{x:M,y:A,isScrolling:V,arrivedState:S,directions:y,measure(){const e=t.toValue(n);l&&e&&H(e)}}}s.defineCtxState=X,s.onMountedOrActivated=_,s.useCtxState=B,s.useEventListener=x,s.usePageVisibility=Y,s.useScroll=G,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/dist/useCtxState/index.d.ts

@@ -0,0 +1,45 @@
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+type IStateTuple<T> = readonly [
+    Readonly<T>,
+    (state: DeepPartial<T> | ((newState: T) => void)) => void
+];
+/**
+ * 定义当前组件作用域的共享数据
+ * @param data - 需要共享的数据
+ * @returns  [state, setState]
+ * @example
+ * ```ts
+ * // state: 共享数据的只读代理
+ * const [state, setState] = defineCtxState({ count: 0 })
+ *
+ * //setState: 更新共享数据的方法,会合并旧数据
+ * setState({ count: 2 })
+ * //推荐函数写法
+ * setState((state) => {state.count = 2})
+ *
+ * ```
+ *
+ */
+export declare const defineCtxState: <T extends Record<string, any>>(data: T) => readonly [T, (newState: DeepPartial<T> | ((newState: T) => void)) => void];
+/**
+ * 获取当前组件作用域{@link defineCtxState}定义的共享数据
+ *
+ * @see defineCtxState
+ * @returns  [state, setState]
+ * @example
+ *
+ * ```ts
+ * // state: 共享数据的只读代理
+ * const [state, setState] = usCtxState({ count: 0 })
+ *
+ * //setState: 更新共享数据的方法
+ * setState({ count: 2 })
+ * setState((state) => {state.count = 2})
+ *
+ * ```
+ *
+ */
+export declare const useCtxState: <T = Record<string, any>>() => IStateTuple<T>;
+export {};

package/dist/useEventListener/index.d.ts

@@ -0,0 +1,8 @@
+import { TargetRef } from '../types';
+export type UseEventListenerOptions = {
+    target?: TargetRef;
+    capture?: boolean;
+    passive?: boolean;
+};
+export declare function useEventListener<K extends keyof DocumentEventMap>(type: K, listener: (event: DocumentEventMap[K]) => void, options?: UseEventListenerOptions): () => void;
+export declare function useEventListener(type: string, listener: EventListener, options?: UseEventListenerOptions): () => void;

package/dist/usePageVisibility/index.d.ts

@@ -0,0 +1,17 @@
+type visibleCbFunc = () => void;
+/**
+ * 判断页面是否可见或者不可见
+ * @example
+ * ```ts
+ *   let {onPageShow,onPageHidden}=usePageVisibility()
+ *   //页面显示可见
+ *   onPageShow(()=>{})
+ *   //页面隐藏
+ *   onPageHidden(()=>{})
+ * ```
+ */
+export declare const usePageVisibility: () => {
+    onPageShow: (cb: visibleCbFunc) => void;
+    onPageHidden: (cb: visibleCbFunc) => void;
+};
+export {};

package/dist/useScroll/index.d.ts

@@ -0,0 +1,81 @@
+import { MaybeRefOrGetter } from 'vue';
+import { ConfigurableWindow, MaybeElement, MaybeElementRef } from '../types';
+export interface UseScrollOptions extends ConfigurableWindow {
+    /**
+     * Throttle time for scroll event, it’s disabled by default.
+     *
+     * @defaultValue  0
+     */
+    throttle?: number;
+    /**
+     * The check time when scrolling ends.
+     * This configuration will be setting to (throttle + idle) when the `throttle` is configured.
+     *
+     * @defaultValue  200
+     */
+    idle?: number;
+    /**
+     * Offset arrived states by x pixels
+     *
+     */
+    offset?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    /**
+     * Trigger it when scrolling.
+     *
+     */
+    onScroll?: (e: Event) => void;
+    /**
+     * Trigger it when scrolling ends.
+     *
+     */
+    onStop?: (e: Event) => void;
+    /**
+     * Listener options for scroll event.
+     *
+     * @defaultValue  `{capture: false, passive: true}`
+     */
+    eventListenerOptions?: AddEventListenerOptions;
+    /**
+     * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
+     * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
+     *
+     * @defaultValue  'auto'
+     */
+    behavior?: MaybeRefOrGetter<ScrollBehavior>;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
+}
+/**
+ * 监听页面布局滚动 事件
+ * @param element  -监听的元素,支持window,document,HTMLElement 以及 Ref引用
+ * @param options -{@link UseScrollOptions}
+ * @returns x,y轴滚动距离,方向,状态,以及是否到达边界
+ */
+export declare function useScroll(element: MaybeElementRef<MaybeElement>, options?: UseScrollOptions): {
+    x: import('vue').WritableComputedRef<number, number>;
+    y: import('vue').WritableComputedRef<number, number>;
+    isScrolling: import('vue').Ref<boolean, boolean>;
+    arrivedState: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
+    directions: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
+    measure(): void;
+};
+export type UseScrollReturn = ReturnType<typeof useScroll>;

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@allkit/use",
+  "version": "0.0.1",
+  "description": "this is a vue3use package",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "build": "node ./scripts/build.mjs"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@allkit/shared": "workspace:*"
+  }
+}

package/scripts/build.mjs

@@ -0,0 +1,99 @@
+import { createReadStream, createWriteStream } from 'fs'
+import { createRequire } from 'module'
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import fse from 'fs-extra'
+// 引入 vite 的 build 方法，进行编译构建
+import { build } from 'vite'
+import { viteLibConfig } from '@allkit/vite-config'
+
+const { outputFile } = fse
+
+const require = createRequire(import.meta.url)
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// 输出目录
+const outputDir = resolve(__dirname, '../dist')
+
+const {
+  version,
+  peerDependencies,
+  name,
+  description,
+  publishConfig,
+  dependencies,
+  type,
+} = require('../package.json')
+// 生成 package.json
+const createPackageJson = () => {
+  const pkgName = name
+  const pkgUMD = './shared.umd.js'
+  const pkgESM = './shared.es.js'
+
+  const fileStr = `{
+    "name": "${pkgName}",
+    "version": "${version}",
+    "description": "${description}",
+    "type": "${type}",
+    "main": "${pkgUMD}",
+    "module":"${pkgESM}",
+    "types": "index.d.ts",
+    "exports": {
+      ".": {
+        "import": "${pkgESM}",
+        "require": "${pkgUMD}"
+      },
+    },
+    "keywords": ["vue", "vueuse","${name || ''}"],
+    "license": "MIT",
+    "author": "SPig",
+    "publishConfig":${JSON.stringify(publishConfig)},
+    "dependencies":${JSON.stringify(dependencies)},
+    "peerDependencies":  ${peerDependencies ? JSON.stringify(peerDependencies) : '{}'}
+  }
+  `
+  // 单个组件 or 全量
+  const filePath = resolve(outputDir, 'package.json')
+  outputFile(filePath, fileStr, 'utf-8')
+}
+
+/** 全量构建 */
+const buildAll = async () => {
+  const config = viteLibConfig({
+    mode: 'production',
+    build: {
+      target: 'es2015',
+      lib: {
+        entry: './src/index.ts',
+        name: 'use',
+        fileName: (format) => `use.${format}.js`,
+      },
+      rollupOptions: {
+        external: ['vue', '@allkit/shared'],
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  })
+  await build(config)
+
+  createPackageJson()
+}
+
+// copy文件
+// README.md
+// 样式 index.css
+const copyFiles = () => {
+  const markdown = createReadStream(resolve(__dirname, '../README.md'))
+  markdown.pipe(createWriteStream(resolve(__dirname, '../dist/README.md')))
+}
+
+const buildLib = async () => {
+  await buildAll()
+  copyFiles()
+}
+
+buildLib()

package/skill/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: use
+description: Vue 3 组合式 API 工具函数库，提供状态管理、事件监听和常用 UI 模式 / Vue 3 Composition API hooks library
+author: allkit
+category: vue
+---
+
+# @allkit/use
+
+Vue 3 组合式 API 工具函数库
+
+## Install
+
+```bash
+pnpm add @allkit/use
+```
+
+## Hooks
+
+| Hook | Description |
+|------|-------------|
+| [defineCtxState](./references/defineCtxState.md) | 定义组件作用域共享数据 |
+| [useCtxState](./references/useCtxState.md) | 获取共享数据 |
+| [useEventListener](./references/useEventListener.md) | 事件监听 |
+| [usePageVisibility](./references/usePageVisibility.md) | 页面可见性 |
+| [useScroll](./references/useScroll.md) | 滚动监听 |
+| [onMountedOrActivated](./references/onMountedOrActivated.md) | keep-alive 组件初始化 |
+
+## Usage
+
+```ts
+import { defineCtxState, useCtxState, useEventListener } from '@allkit/use'
+
+const [state, setState] = defineCtxState({
+  loading: false,
+  list: []
+})
+
+useEventListener('scroll', handleScroll)
+```

package/skill/examples/demo.tsx

@@ -0,0 +1,83 @@
+import { defineComponent, ref, computed } from 'vue'
+import {
+  defineCtxState,
+  useCtxState,
+  useEventListener,
+  usePageVisibility,
+  useScroll,
+  onMountedOrActivated
+} from '@allkit/use'
+
+interface UserListState {
+  loading: boolean
+  list: Array<{ id: number; name: string }>
+  pagination: { current: number; size: number; total: number }
+}
+
+const useSearchForm = () => {
+  const [state, setState] = useCtxState<UserListState>()
+
+  const handleSearch = () => {
+    setState(s => {
+      s.loading = true
+      s.pagination.current = 1
+    })
+  }
+
+  return () => (
+    <div className="search-form">
+      <button onClick={handleSearch} disabled={state.loading}>
+        {state.loading ? '搜索中...' : '搜索'}
+      </button>
+    </div>
+  )
+}
+
+const useList = () => {
+  const [state, setState] = useCtxState<UserListState>()
+
+  return () => (
+    <div className="user-list">
+      {state.list.map(item => (
+        <div key={item.id}>{item.name}</div>
+      ))}
+    </div>
+  )
+}
+
+export default defineComponent({
+  setup() {
+    const [state, setState] = defineCtxState<UserListState>({
+      loading: false,
+      list: [],
+      pagination: { current: 1, size: 20, total: 0 }
+    })
+
+    const renderSearch = useSearchForm()
+    const renderList = useList()
+
+    useEventListener('resize', () => {
+      console.log('window resized')
+    })
+
+    const { onPageShow, onPageHidden } = usePageVisibility()
+    onPageShow(() => console.log('page show'))
+    onPageHidden(() => console.log('page hidden'))
+
+    const { y, arrivedState } = useScroll(window, { throttle: 100 })
+    const isBottom = computed(() => arrivedState.bottom)
+
+    onMountedOrActivated(() => {
+      console.log('mounted or activated')
+    })
+
+    return () => (
+      <div>
+        {renderSearch()}
+        {renderList()}
+        <p>scroll: {Math.round(y.value)}px</p>
+        <p>bottom: {isBottom.value ? 'yes' : 'no'}</p>
+      </div>
+    )
+  }
+})