@varlet/use 3.17.1 → 3.18.0-alpha.1781192892883

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/index.cjs +35 -0
  2. package/lib/index.d.cts +5 -1
  3. package/lib/index.d.ts +5 -1
  4. package/lib/index.js +35 -1
  5. package/package.json +2 -2
package/lib/index.cjs CHANGED
@@ -412,6 +412,40 @@ function useMotion(options) {
412
412
  };
413
413
  }
414
414
  //#endregion
415
+ //#region src/useResizeObserver.ts
416
+ function useResizeObserver(target, callback) {
417
+ if (!(0, _varlet_shared.inBrowser)() || typeof ResizeObserver === "undefined") return;
418
+ let observer;
419
+ let observedElement;
420
+ let cleaned = false;
421
+ const getElement = (target) => (0, _varlet_shared.isFunction)(target) ? target() : (0, vue.unref)(target);
422
+ const observe = (target) => {
423
+ if (cleaned) return;
424
+ const element = getElement(target);
425
+ if (!element || element === observedElement) return;
426
+ unobserve();
427
+ observer = new ResizeObserver(callback);
428
+ observer.observe(element);
429
+ observedElement = element;
430
+ };
431
+ const unobserve = () => {
432
+ observer?.disconnect();
433
+ observer = void 0;
434
+ observedElement = void 0;
435
+ };
436
+ let watchStopHandle;
437
+ if ((0, vue.isRef)(target)) watchStopHandle = (0, vue.watch)(() => target.value, () => observe(target));
438
+ const cleanup = () => {
439
+ watchStopHandle?.();
440
+ unobserve();
441
+ cleaned = true;
442
+ };
443
+ onSmartMounted(() => observe(target));
444
+ (0, vue.onBeforeUnmount)(unobserve);
445
+ (0, vue.onDeactivated)(unobserve);
446
+ return cleanup;
447
+ }
448
+ //#endregion
415
449
  exports.keyInProvides = keyInProvides;
416
450
  exports.onSmartMounted = onSmartMounted;
417
451
  exports.onSmartUnmounted = onSmartUnmounted;
@@ -424,6 +458,7 @@ exports.useId = useId;
424
458
  exports.useInitialized = useInitialized;
425
459
  exports.useMotion = useMotion;
426
460
  exports.useParent = useParent;
461
+ exports.useResizeObserver = useResizeObserver;
427
462
  exports.useTouch = useTouch;
428
463
  exports.useVModel = useVModel;
429
464
  exports.useWindowSize = useWindowSize;
package/lib/index.d.cts CHANGED
@@ -119,4 +119,8 @@ declare function useMotion(options: UseMotionOptions): {
119
119
  reset: () => void;
120
120
  };
121
121
  //#endregion
122
- export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
122
+ //#region src/useResizeObserver.d.ts
123
+ type UseResizeObserverTarget = Element | Ref<Element | undefined | null> | (() => Element | undefined | null);
124
+ declare function useResizeObserver(target: UseResizeObserverTarget, callback: ResizeObserverCallback): (() => void) | undefined;
125
+ //#endregion
126
+ export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseResizeObserverTarget, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useResizeObserver, useTouch, useVModel, useWindowSize };
package/lib/index.d.ts CHANGED
@@ -119,4 +119,8 @@ declare function useMotion(options: UseMotionOptions): {
119
119
  reset: () => void;
120
120
  };
121
121
  //#endregion
122
- export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
122
+ //#region src/useResizeObserver.d.ts
123
+ type UseResizeObserverTarget = Element | Ref<Element | undefined | null> | (() => Element | undefined | null);
124
+ declare function useResizeObserver(target: UseResizeObserverTarget, callback: ResizeObserverCallback): (() => void) | undefined;
125
+ //#endregion
126
+ export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseResizeObserverTarget, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useResizeObserver, useTouch, useVModel, useWindowSize };
package/lib/index.js CHANGED
@@ -411,4 +411,38 @@ function useMotion(options) {
411
411
  };
412
412
  }
413
413
  //#endregion
414
- export { keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
414
+ //#region src/useResizeObserver.ts
415
+ function useResizeObserver(target, callback) {
416
+ if (!inBrowser() || typeof ResizeObserver === "undefined") return;
417
+ let observer;
418
+ let observedElement;
419
+ let cleaned = false;
420
+ const getElement = (target) => isFunction(target) ? target() : unref(target);
421
+ const observe = (target) => {
422
+ if (cleaned) return;
423
+ const element = getElement(target);
424
+ if (!element || element === observedElement) return;
425
+ unobserve();
426
+ observer = new ResizeObserver(callback);
427
+ observer.observe(element);
428
+ observedElement = element;
429
+ };
430
+ const unobserve = () => {
431
+ observer?.disconnect();
432
+ observer = void 0;
433
+ observedElement = void 0;
434
+ };
435
+ let watchStopHandle;
436
+ if (isRef(target)) watchStopHandle = watch(() => target.value, () => observe(target));
437
+ const cleanup = () => {
438
+ watchStopHandle?.();
439
+ unobserve();
440
+ cleaned = true;
441
+ };
442
+ onSmartMounted(() => observe(target));
443
+ onBeforeUnmount(unobserve);
444
+ onDeactivated(unobserve);
445
+ return cleanup;
446
+ }
447
+ //#endregion
448
+ export { keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useResizeObserver, useTouch, useVModel, useWindowSize };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@varlet/use",
3
- "version": "3.17.1",
3
+ "version": "3.18.0-alpha.1781192892883",
4
4
  "description": "composable utils of varlet",
5
5
  "keywords": [
6
6
  "composable",
@@ -32,7 +32,7 @@
32
32
  "lib"
33
33
  ],
34
34
  "dependencies": {
35
- "@varlet/shared": "3.17.1"
35
+ "@varlet/shared": "3.18.0-alpha.1781192892883"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@types/node": "^20.19.0",