@maple-design/use 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,56 @@
+# 共用异步数据源
+
+`useAsyncData` 适用于人员、字典、表格行、级联根选项等初始化与外部搜索。函数返回业务转换后的数据；composable 不规定 URL、客户端、查询字段或响应 DTO。组件的 options/data 仍是对应类型的数组。
+
+```ts
+import { useAsyncData } from '@maple-design/use'
+
+// 可从业务模块导入，同一个函数可供多处复用。
+const loadPeople = async () => [{ value: 'mengshuai', label: '孟帅' }]
+const { data: options, loading, error, execute, refresh, cancel, clearCache } =
+  useAsyncData(loadPeople, { initialData: [], debounce: 250, cacheTime: 30_000 })
+
+// 默认客户端挂载执行 loadPeople 一次，初始化不防抖。不会监听函数引用、选中值或数组变化。
+// 数据绑定：<Select :options="options" :loading="loading" @search="search" />
+function search(query: string) {
+  options.value = [] // 外部搜索可立即退役旧候选，避免等待期间误选。
+  void execute({
+    cacheKey: query, // 若身份/权限/部门变化会影响结果，也必须包含在 key 中。
+    loader: async ({ signal }) => {
+      const response = await fetch(`/api/people?q=${encodeURIComponent(query)}`, { signal })
+      if (!response.ok) throw new Error('People request failed')
+      const rows = await response.json()
+      return rows.map((row: { id: string; name: string }) => ({ value: row.id, label: row.name }))
+    },
+  })
+}
+```
+
+## 参数和返回值
+
+- `AsyncDataLoader<T> = (context: { signal: AbortSignal }) => T | Promise<T>`。零参数函数也可直接传入；原生 fetch 应包装后再传。业务参数由闭包捕获，数据格式转换在函数内部完成。
+- options：必填 `initialData: T`，`immediate` 默认 true，`debounce` 默认 0 毫秒，`cacheTime` 默认 0（关闭）。零参数 loader 推断 T，提供 initialData 时应保持相同类型，空数组可显式标注 `[] as PersonOption[]`。
+- `data` 是可写 shallowRef，保留结果对象身份；`loading`、`error` 只读。composable 不自动深拷贝、冻结或深监听数据。
+- `execute({ loader?, cacheKey?, force? })`：手动执行，接受查询专属 loader，不替换初始化函数。无覆盖 loader 时执行初始 loader。返回 Promise，不自动向外抛异常。
+- 结果为 `{ status: 'success', data }`、`{ status: 'error', error }` 或 `{ status: 'cancelled' }`。调用者可检查 status；自动初始化失败不会产生未处理拒绝。
+- `refresh()`：重试最近一次请求及 key，绕过缓存和防抖。第一次调用时使用初始化 loader。
+- `cancel()`：清除排队计时器、中止 signal、立即结算取消结果，保留 data，不记录错误。
+- `clearCache()`：清空当前实例缓存，不清空展示数据，也不自动发请求。
+
+## 生命周期、并发与缓存
+
+在组件 setup 调用时，客户端 mounted 执行一次；SSR 不自动请求。在 effectScope 中使用但不属于组件时立即初始化。`immediate: false` 只手动执行。setup 中已手动 execute 的，不会在 mounted 重复初始化。重渲染、选中值变化不会重新执行；卸载/作用域结束后取消并禁止再次执行。重新挂载是新实例，会重新初始化。
+
+每次 execute 立即令 loading=true（含防抖排队），取消上次请求；只有最后一次结果能更新 data/error/loading，即使旧客户端忽略 signal 也不能覆盖。初始加载和 refresh 不防抖；组件自身搜索延迟应设为 0，防止两次防抖。异常保留上次 data；远程候选是否清空由业务决定，上例主动清空。取消不会把 AbortError 当业务失败。
+
+默认不缓存。启用后仅当前实例缓存，TTL 从成功完成时算起，最多保存 50 项，满后按写入顺序淘汰最早一项；不跨组件、不跨登录用户全局复用，不合并并发请求。初始化 loader 有独立的内部 key；覆盖 loader 只有显式传 cacheKey 才缓存。不通过函数身份推断缓存，不缓存异常或取消。相同函数用于两处意味着两次独立初始化；若业务要求只请求一次，应在父级创建 composable 并把同一 data/loading 传给两处。若 loader 本身返回共享可变对象，其引用仍由业务负责。
+
+## 特殊协议
+
+本工具不替代节点懒加载、游标分页或上传。Cedar Tree/TreeSelect：`loadMore(node): Promise<void>`；Cedar/Maple Cascader：`loadMore(option, done(children?)): void`；Cedar Table：`loadMore(record, done(children?)): void`。按现有节点插入/完成协议工作，不能把整表初始化 loader 直接当这些回调。
+
+Scheduler 保留日程的 modelValue/defaultValue 数组、resources 数组，以及 `requestResources({ dimensionId?, query, cursor?, signal }) -> { items, nextCursor? }` 和 `resolveResources(ids, {signal}) -> Resource[]`；事件与资源不是一个 data。上传保留进度、中止和完成回调。本轮不更改这些已发布协议。
+
+## 已发布 API
+
+这个工具是 use 包新增的 minor API。各组件原有数组属性保持不变；没有为所有 options/data 加函数或 Promise 联合类型。PeopleSelect 按已确认方案移除旧 fetch/urlType，属于 UI 包下个 major 的迁移，文档提供对照；当前没有执行发布。

package/lib/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -52,6 +55,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.ts
 var src_exports = {};
@@ -60,9 +83,14 @@ __export(src_exports, {
   onSmartMounted: () => onSmartMounted,
   onSmartUnmounted: () => onSmartUnmounted,
   onWindowResize: () => onWindowResize,
+  provideDirection: () => provideDirection,
+  readingDirectionKey: () => readingDirectionKey,
+  resolveDirection: () => resolveDirection,
+  useAsyncData: () => useAsyncData,
   useChildren: () => useChildren,
   useClickOutside: () => useClickOutside,
   useClientId: () => useClientId,
+  useDirection: () => useDirection,
   useEventListener: () => useEventListener,
   useId: () => useId2,
   useInitialized: () => useInitialized,
@@ -579,7 +607,7 @@ function useMotion(options) {
     return (0, import_shared9.motion)({
       from: getter(options.from),
       to: getter(options.to),
-      duration: options.duration ? getter(options.duration) : 300,
+      duration: options.duration === void 0 ? 300 : getter(options.duration),
       timingFunction: options.timingFunction,
       onStateChange(newState) {
         state.value = newState;
@@ -601,15 +629,237 @@ function useMotion(options) {
     reset
   };
 }
+
+// src/useAsyncData.ts
+var import_vue13 = require("vue");
+function useAsyncData(loader, options) {
+  const data = (0, import_vue13.shallowRef)(options.initialData);
+  const loading = (0, import_vue13.ref)(false);
+  const error = (0, import_vue13.shallowRef)();
+  const initialKey = Symbol("initial");
+  const cache = /* @__PURE__ */ new Map();
+  let active;
+  let last = {};
+  let disposed = false;
+  let started = false;
+  function cancel() {
+    const task = active;
+    active = void 0;
+    if (task) {
+      clearTimeout(task.timer);
+      task.controller.abort();
+      task.settle({ status: "cancelled" });
+    }
+    loading.value = false;
+  }
+  function run(request, delay) {
+    var _a, _b, _c;
+    cancel();
+    if (disposed) {
+      return Promise.resolve({ status: "cancelled" });
+    }
+    started = true;
+    last = request;
+    error.value = void 0;
+    const currentLoader = (_a = request.loader) != null ? _a : loader;
+    const key = (_b = request.cacheKey) != null ? _b : request.loader ? void 0 : initialKey;
+    const ttl = (_c = options.cacheTime) != null ? _c : 0;
+    const cached = key === void 0 ? void 0 : cache.get(key);
+    if (!request.force && ttl > 0 && cached && cached.expires > Date.now()) {
+      data.value = cached.data;
+      return Promise.resolve({ status: "success", data: cached.data });
+    }
+    if (key !== void 0) {
+      cache.delete(key);
+    }
+    loading.value = true;
+    return new Promise((settle) => {
+      const task = {
+        controller: new AbortController(),
+        settle,
+        timer: void 0
+      };
+      active = task;
+      const start = () => __async(this, null, function* () {
+        try {
+          const value = yield currentLoader({ signal: task.controller.signal });
+          if (active !== task) {
+            return;
+          }
+          data.value = value;
+          if (ttl > 0 && key !== void 0) {
+            if (cache.size >= 50) {
+              cache.delete(cache.keys().next().value);
+            }
+            cache.set(key, { data: value, expires: Date.now() + ttl });
+          }
+          settle({ status: "success", data: value });
+        } catch (cause) {
+          if (active !== task) {
+            return;
+          }
+          error.value = cause;
+          settle({ status: "error", error: cause });
+        } finally {
+          if (active === task) {
+            active = void 0;
+            loading.value = false;
+          }
+        }
+      });
+      if (delay > 0) {
+        task.timer = setTimeout(start, delay);
+      } else {
+        void start();
+      }
+    });
+  }
+  const execute = (request = {}) => {
+    var _a;
+    return run(request, (_a = options.debounce) != null ? _a : 0);
+  };
+  const refresh = () => run(__spreadProps(__spreadValues({}, last), { force: true }), 0);
+  const initialize = () => {
+    if (!started && !disposed && options.immediate !== false) {
+      void run({}, 0);
+    }
+  };
+  if ((0, import_vue13.getCurrentInstance)()) {
+    (0, import_vue13.onMounted)(initialize);
+  } else {
+    initialize();
+  }
+  if ((0, import_vue13.getCurrentScope)()) {
+    (0, import_vue13.onScopeDispose)(() => {
+      disposed = true;
+      cancel();
+      cache.clear();
+    });
+  }
+  return {
+    data,
+    loading: (0, import_vue13.readonly)(loading),
+    error: (0, import_vue13.readonly)(error),
+    execute,
+    refresh,
+    cancel,
+    clearCache: () => cache.clear()
+  };
+}
+
+// src/useDirection.ts
+var import_vue14 = require("vue");
+var readingDirectionKey = Symbol("reading-direction");
+function provideDirection(direction) {
+  (0, import_vue14.provide)(readingDirectionKey, direction);
+}
+function resolveDirection(element, fallback = "ltr") {
+  var _a, _b;
+  const scope = element == null ? void 0 : element.closest("[dir]");
+  const value = (_a = scope == null ? void 0 : scope.getAttribute("dir")) == null ? void 0 : _a.toLowerCase();
+  if (value === "ltr" || value === "rtl") {
+    return value;
+  }
+  if (value === "auto" && scope) {
+    return ((_b = scope.ownerDocument.defaultView) == null ? void 0 : _b.getComputedStyle(scope).direction) === "rtl" ? "rtl" : "ltr";
+  }
+  return fallback;
+}
+var documents = /* @__PURE__ */ new WeakMap();
+function useDirection(target, explicit) {
+  const inherited = (0, import_vue14.inject)(readingDirectionKey, void 0);
+  const instance = (0, import_vue14.getCurrentInstance)();
+  const element = (0, import_vue14.shallowRef)();
+  const version = (0, import_vue14.shallowRef)();
+  let release;
+  let active = false;
+  function observe(node) {
+    var _a;
+    if (node === element.value && release) {
+      return;
+    }
+    release == null ? void 0 : release();
+    release = void 0;
+    element.value = node != null ? node : void 0;
+    version.value = void 0;
+    const doc = node == null ? void 0 : node.ownerDocument;
+    const Observer = (_a = doc == null ? void 0 : doc.defaultView) == null ? void 0 : _a.MutationObserver;
+    if (!doc || !Observer) {
+      return;
+    }
+    let state = documents.get(doc);
+    if (!state) {
+      const counter = (0, import_vue14.ref)(0);
+      const observer = new Observer(() => {
+        counter.value++;
+      });
+      observer.observe(doc.documentElement, { subtree: true, attributes: true, attributeFilter: ["dir"] });
+      state = { version: counter, observer, users: 0 };
+      documents.set(doc, state);
+    }
+    state.users++;
+    version.value = state.version;
+    const current = state;
+    release = () => {
+      if (--current.users === 0) {
+        current.observer.disconnect();
+        documents.delete(doc);
+      }
+    };
+  }
+  function refresh() {
+    const node = target ? target() : instance == null ? void 0 : instance.vnode.el;
+    observe((node == null ? void 0 : node.nodeType) === 1 ? node : node == null ? void 0 : node.parentElement);
+  }
+  function start() {
+    active = true;
+    refresh();
+  }
+  function stop() {
+    active = false;
+    release == null ? void 0 : release();
+    release = void 0;
+    version.value = void 0;
+  }
+  (0, import_vue14.onMounted)(start);
+  (0, import_vue14.onActivated)(start);
+  (0, import_vue14.onDeactivated)(stop);
+  (0, import_vue14.onScopeDispose)(stop);
+  (0, import_vue14.watchPostEffect)(() => {
+    const node = target == null ? void 0 : target();
+    if (active) {
+      if (target) {
+        observe(node);
+      } else {
+        refresh();
+      }
+    }
+  });
+  const dir = (0, import_vue14.computed)(() => {
+    var _a, _b;
+    void ((_a = version.value) == null ? void 0 : _a.value);
+    const value = explicit == null ? void 0 : explicit();
+    if (value === "ltr" || value === "rtl") {
+      return value;
+    }
+    return resolveDirection(element.value, (_b = inherited == null ? void 0 : inherited.value) != null ? _b : "ltr");
+  });
+  return { dir, isRtl: (0, import_vue14.computed)(() => dir.value === "rtl") };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   keyInProvides,
   onSmartMounted,
   onSmartUnmounted,
   onWindowResize,
+  provideDirection,
+  readingDirectionKey,
+  resolveDirection,
+  useAsyncData,
   useChildren,
   useClickOutside,
   useClientId,
+  useDirection,
   useEventListener,
   useId,
   useInitialized,

package/lib/index.d.cts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Ref, ComponentInternalInstance, ComputedRef, WatchSource } from 'vue';
+import { Ref, ComponentInternalInstance, ComputedRef, WatchSource, ShallowRef, InjectionKey } from 'vue';
 import { MotionState } from '@maple-design/shared';
 
 type UseEventListenerTarget = EventTarget | Ref<EventTarget | undefined | null> | (() => EventTarget | undefined | null);
@@ -106,4 +106,56 @@ declare function useMotion(options: UseMotionOptions): {
     reset: () => void;
 };
 
-export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
+interface AsyncDataContext {
+    signal: AbortSignal;
+}
+/** A zero-argument business function is also accepted; mapping stays in the loader. */
+type AsyncDataLoader<T> = (context: AsyncDataContext) => T | Promise<T>;
+type AsyncDataResult<T> = {
+    status: 'success';
+    data: T;
+} | {
+    status: 'cancelled';
+} | {
+    status: 'error';
+    error: unknown;
+};
+interface AsyncDataOptions<T> {
+    initialData: T;
+    /** Run once on client mount. Changing the loader does not rerun it. */
+    immediate?: boolean;
+    /** Milliseconds; applies to manual execute calls, not initial loading or refresh. */
+    debounce?: number;
+    /** Per-instance TTL in milliseconds. Disabled by default; at most 50 entries. */
+    cacheTime?: number;
+}
+interface AsyncDataExecuteOptions<T> {
+    loader?: AsyncDataLoader<T>;
+    /** Explicitly distinguish query, tenant, permissions, etc. Never inferred from a function. */
+    cacheKey?: string;
+    force?: boolean;
+}
+interface AsyncDataReturn<T> {
+    data: ShallowRef<T>;
+    loading: Readonly<Ref<boolean>>;
+    error: Readonly<ShallowRef<unknown>>;
+    execute: (request?: AsyncDataExecuteOptions<T>) => Promise<AsyncDataResult<T>>;
+    refresh: () => Promise<AsyncDataResult<T>>;
+    cancel: () => void;
+    clearCache: () => void;
+}
+/** Array/object agnostic async state. Each invocation owns its state and cache. */
+declare function useAsyncData<T>(loader: AsyncDataLoader<T>, options: AsyncDataOptions<T>): AsyncDataReturn<T>;
+
+type ReadingDirection = 'ltr' | 'rtl';
+declare const readingDirectionKey: InjectionKey<Readonly<Ref<ReadingDirection | undefined>>>;
+/** Provide reading direction without changing the direction of the document. */
+declare function provideDirection(direction: Readonly<Ref<ReadingDirection | undefined>>): void;
+declare function resolveDirection(element?: Element | null, fallback?: ReadingDirection): ReadingDirection;
+/** DOM scopes take precedence over injection, so native nested dir containers work too. */
+declare function useDirection(target?: () => Element | null | undefined, explicit?: () => unknown): {
+    dir: vue.ComputedRef<ReadingDirection>;
+    isRtl: vue.ComputedRef<boolean>;
+};
+
+export { AsyncDataContext, AsyncDataExecuteOptions, AsyncDataLoader, AsyncDataOptions, AsyncDataResult, AsyncDataReturn, ReadingDirection, TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, provideDirection, readingDirectionKey, resolveDirection, useAsyncData, useChildren, useClickOutside, useClientId, useDirection, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Ref, ComponentInternalInstance, ComputedRef, WatchSource } from 'vue';
+import { Ref, ComponentInternalInstance, ComputedRef, WatchSource, ShallowRef, InjectionKey } from 'vue';
 import { MotionState } from '@maple-design/shared';
 
 type UseEventListenerTarget = EventTarget | Ref<EventTarget | undefined | null> | (() => EventTarget | undefined | null);
@@ -106,4 +106,56 @@ declare function useMotion(options: UseMotionOptions): {
     reset: () => void;
 };
 
-export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
+interface AsyncDataContext {
+    signal: AbortSignal;
+}
+/** A zero-argument business function is also accepted; mapping stays in the loader. */
+type AsyncDataLoader<T> = (context: AsyncDataContext) => T | Promise<T>;
+type AsyncDataResult<T> = {
+    status: 'success';
+    data: T;
+} | {
+    status: 'cancelled';
+} | {
+    status: 'error';
+    error: unknown;
+};
+interface AsyncDataOptions<T> {
+    initialData: T;
+    /** Run once on client mount. Changing the loader does not rerun it. */
+    immediate?: boolean;
+    /** Milliseconds; applies to manual execute calls, not initial loading or refresh. */
+    debounce?: number;
+    /** Per-instance TTL in milliseconds. Disabled by default; at most 50 entries. */
+    cacheTime?: number;
+}
+interface AsyncDataExecuteOptions<T> {
+    loader?: AsyncDataLoader<T>;
+    /** Explicitly distinguish query, tenant, permissions, etc. Never inferred from a function. */
+    cacheKey?: string;
+    force?: boolean;
+}
+interface AsyncDataReturn<T> {
+    data: ShallowRef<T>;
+    loading: Readonly<Ref<boolean>>;
+    error: Readonly<ShallowRef<unknown>>;
+    execute: (request?: AsyncDataExecuteOptions<T>) => Promise<AsyncDataResult<T>>;
+    refresh: () => Promise<AsyncDataResult<T>>;
+    cancel: () => void;
+    clearCache: () => void;
+}
+/** Array/object agnostic async state. Each invocation owns its state and cache. */
+declare function useAsyncData<T>(loader: AsyncDataLoader<T>, options: AsyncDataOptions<T>): AsyncDataReturn<T>;
+
+type ReadingDirection = 'ltr' | 'rtl';
+declare const readingDirectionKey: InjectionKey<Readonly<Ref<ReadingDirection | undefined>>>;
+/** Provide reading direction without changing the direction of the document. */
+declare function provideDirection(direction: Readonly<Ref<ReadingDirection | undefined>>): void;
+declare function resolveDirection(element?: Element | null, fallback?: ReadingDirection): ReadingDirection;
+/** DOM scopes take precedence over injection, so native nested dir containers work too. */
+declare function useDirection(target?: () => Element | null | undefined, explicit?: () => unknown): {
+    dir: vue.ComputedRef<ReadingDirection>;
+    isRtl: vue.ComputedRef<boolean>;
+};
+
+export { AsyncDataContext, AsyncDataExecuteOptions, AsyncDataLoader, AsyncDataOptions, AsyncDataResult, AsyncDataReturn, ReadingDirection, TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, provideDirection, readingDirectionKey, resolveDirection, useAsyncData, useChildren, useClickOutside, useClientId, useDirection, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };

package/lib/index.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,6 +29,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/useEventListener.ts
 import { isRef, onBeforeUnmount, onDeactivated, unref, watch } from "vue";
@@ -548,7 +571,7 @@ function useMotion(options) {
     return motion({
       from: getter(options.from),
       to: getter(options.to),
-      duration: options.duration ? getter(options.duration) : 300,
+      duration: options.duration === void 0 ? 300 : getter(options.duration),
       timingFunction: options.timingFunction,
       onStateChange(newState) {
         state.value = newState;
@@ -570,14 +593,248 @@ function useMotion(options) {
     reset
   };
 }
+
+// src/useAsyncData.ts
+import { getCurrentInstance as getCurrentInstance5, getCurrentScope, onMounted as onMounted5, onScopeDispose, readonly, ref as ref8, shallowRef } from "vue";
+function useAsyncData(loader, options) {
+  const data = shallowRef(options.initialData);
+  const loading = ref8(false);
+  const error = shallowRef();
+  const initialKey = Symbol("initial");
+  const cache = /* @__PURE__ */ new Map();
+  let active;
+  let last = {};
+  let disposed = false;
+  let started = false;
+  function cancel() {
+    const task = active;
+    active = void 0;
+    if (task) {
+      clearTimeout(task.timer);
+      task.controller.abort();
+      task.settle({ status: "cancelled" });
+    }
+    loading.value = false;
+  }
+  function run(request, delay) {
+    var _a, _b, _c;
+    cancel();
+    if (disposed) {
+      return Promise.resolve({ status: "cancelled" });
+    }
+    started = true;
+    last = request;
+    error.value = void 0;
+    const currentLoader = (_a = request.loader) != null ? _a : loader;
+    const key = (_b = request.cacheKey) != null ? _b : request.loader ? void 0 : initialKey;
+    const ttl = (_c = options.cacheTime) != null ? _c : 0;
+    const cached = key === void 0 ? void 0 : cache.get(key);
+    if (!request.force && ttl > 0 && cached && cached.expires > Date.now()) {
+      data.value = cached.data;
+      return Promise.resolve({ status: "success", data: cached.data });
+    }
+    if (key !== void 0) {
+      cache.delete(key);
+    }
+    loading.value = true;
+    return new Promise((settle) => {
+      const task = {
+        controller: new AbortController(),
+        settle,
+        timer: void 0
+      };
+      active = task;
+      const start = () => __async(this, null, function* () {
+        try {
+          const value = yield currentLoader({ signal: task.controller.signal });
+          if (active !== task) {
+            return;
+          }
+          data.value = value;
+          if (ttl > 0 && key !== void 0) {
+            if (cache.size >= 50) {
+              cache.delete(cache.keys().next().value);
+            }
+            cache.set(key, { data: value, expires: Date.now() + ttl });
+          }
+          settle({ status: "success", data: value });
+        } catch (cause) {
+          if (active !== task) {
+            return;
+          }
+          error.value = cause;
+          settle({ status: "error", error: cause });
+        } finally {
+          if (active === task) {
+            active = void 0;
+            loading.value = false;
+          }
+        }
+      });
+      if (delay > 0) {
+        task.timer = setTimeout(start, delay);
+      } else {
+        void start();
+      }
+    });
+  }
+  const execute = (request = {}) => {
+    var _a;
+    return run(request, (_a = options.debounce) != null ? _a : 0);
+  };
+  const refresh = () => run(__spreadProps(__spreadValues({}, last), { force: true }), 0);
+  const initialize = () => {
+    if (!started && !disposed && options.immediate !== false) {
+      void run({}, 0);
+    }
+  };
+  if (getCurrentInstance5()) {
+    onMounted5(initialize);
+  } else {
+    initialize();
+  }
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      disposed = true;
+      cancel();
+      cache.clear();
+    });
+  }
+  return {
+    data,
+    loading: readonly(loading),
+    error: readonly(error),
+    execute,
+    refresh,
+    cancel,
+    clearCache: () => cache.clear()
+  };
+}
+
+// src/useDirection.ts
+import {
+  computed as computed4,
+  getCurrentInstance as getCurrentInstance6,
+  inject as inject2,
+  onActivated as onActivated3,
+  onDeactivated as onDeactivated5,
+  onMounted as onMounted6,
+  onScopeDispose as onScopeDispose2,
+  provide as provide2,
+  ref as ref9,
+  shallowRef as shallowRef2,
+  watchPostEffect
+} from "vue";
+var readingDirectionKey = Symbol("reading-direction");
+function provideDirection(direction) {
+  provide2(readingDirectionKey, direction);
+}
+function resolveDirection(element, fallback = "ltr") {
+  var _a, _b;
+  const scope = element == null ? void 0 : element.closest("[dir]");
+  const value = (_a = scope == null ? void 0 : scope.getAttribute("dir")) == null ? void 0 : _a.toLowerCase();
+  if (value === "ltr" || value === "rtl") {
+    return value;
+  }
+  if (value === "auto" && scope) {
+    return ((_b = scope.ownerDocument.defaultView) == null ? void 0 : _b.getComputedStyle(scope).direction) === "rtl" ? "rtl" : "ltr";
+  }
+  return fallback;
+}
+var documents = /* @__PURE__ */ new WeakMap();
+function useDirection(target, explicit) {
+  const inherited = inject2(readingDirectionKey, void 0);
+  const instance = getCurrentInstance6();
+  const element = shallowRef2();
+  const version = shallowRef2();
+  let release;
+  let active = false;
+  function observe(node) {
+    var _a;
+    if (node === element.value && release) {
+      return;
+    }
+    release == null ? void 0 : release();
+    release = void 0;
+    element.value = node != null ? node : void 0;
+    version.value = void 0;
+    const doc = node == null ? void 0 : node.ownerDocument;
+    const Observer = (_a = doc == null ? void 0 : doc.defaultView) == null ? void 0 : _a.MutationObserver;
+    if (!doc || !Observer) {
+      return;
+    }
+    let state = documents.get(doc);
+    if (!state) {
+      const counter = ref9(0);
+      const observer = new Observer(() => {
+        counter.value++;
+      });
+      observer.observe(doc.documentElement, { subtree: true, attributes: true, attributeFilter: ["dir"] });
+      state = { version: counter, observer, users: 0 };
+      documents.set(doc, state);
+    }
+    state.users++;
+    version.value = state.version;
+    const current = state;
+    release = () => {
+      if (--current.users === 0) {
+        current.observer.disconnect();
+        documents.delete(doc);
+      }
+    };
+  }
+  function refresh() {
+    const node = target ? target() : instance == null ? void 0 : instance.vnode.el;
+    observe((node == null ? void 0 : node.nodeType) === 1 ? node : node == null ? void 0 : node.parentElement);
+  }
+  function start() {
+    active = true;
+    refresh();
+  }
+  function stop() {
+    active = false;
+    release == null ? void 0 : release();
+    release = void 0;
+    version.value = void 0;
+  }
+  onMounted6(start);
+  onActivated3(start);
+  onDeactivated5(stop);
+  onScopeDispose2(stop);
+  watchPostEffect(() => {
+    const node = target == null ? void 0 : target();
+    if (active) {
+      if (target) {
+        observe(node);
+      } else {
+        refresh();
+      }
+    }
+  });
+  const dir = computed4(() => {
+    var _a, _b;
+    void ((_a = version.value) == null ? void 0 : _a.value);
+    const value = explicit == null ? void 0 : explicit();
+    if (value === "ltr" || value === "rtl") {
+      return value;
+    }
+    return resolveDirection(element.value, (_b = inherited == null ? void 0 : inherited.value) != null ? _b : "ltr");
+  });
+  return { dir, isRtl: computed4(() => dir.value === "rtl") };
+}
 export {
   keyInProvides,
   onSmartMounted,
   onSmartUnmounted,
   onWindowResize,
+  provideDirection,
+  readingDirectionKey,
+  resolveDirection,
+  useAsyncData,
   useChildren,
   useClickOutside,
   useClientId,
+  useDirection,
   useEventListener,
   useId2 as useId,
   useInitialized,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-design/use",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "composable utils of maple",
   "keywords": [
     "composable",
@@ -32,7 +32,7 @@
     "lib"
   ],
   "dependencies": {
-    "@maple-design/shared": "1.0.0"
+    "@maple-design/shared": "1.1.0"
   },
   "devDependencies": {
     "@types/node": "^18.7.20",