vevet 5.1.4 → 5.2.1

package/src/components/Snap/Track/index.ts

@@ -5,6 +5,23 @@ import { toPixels } from '@/utils';
 export class SnapTrack {
   constructor(protected snap: Snap) {}
 
+  /** Interpolation influence */
+  protected _influence = {
+    current: 0,
+    target: 0,
+  };
+
+  /** Gets the interpolation influence */
+  get influence() {
+    return this._influence.current;
+  }
+
+  /** Sets the interpolation influence */
+  set influence(value: number) {
+    this._influence.current = value;
+    this._influence.target = value;
+  }
+
   /** The current track value */
   protected _current = 0;
 
@@ -28,13 +45,21 @@ export class SnapTrack {
 
   /** Sets the target track value */
   set target(value: number) {
+    const { domSize } = this.snap;
+    const diff = value - this._target;
+
     this._target = value;
+
+    this._influence.target += domSize ? diff / domSize : 0;
+    this._influence.target = clamp(this._influence.target, -0.2, 0.2);
   }
 
   /** Set a value to current & target value instantly */
   public set(value: number) {
     this.current = value;
     this.target = value;
+    this._influence.current = 0;
+    this._influence.target = 0;
   }
 
   /** If can loop */
@@ -65,10 +90,13 @@ export class SnapTrack {
   }
 
   /** Interpolate the current track value */
-  public lerp(factor: number) {
+  public lerp(initialFactor: number) {
     let { target } = this;
     const { snap, min, max } = this;
 
+    let lerpFactor = initialFactor;
+    const influence = this._influence;
+
     // Edge space & resistance
 
     if (!snap.props.loop) {
@@ -89,20 +117,31 @@ export class SnapTrack {
     // Interpolate current value
 
     const rest = Math.abs(this.current - target);
-    const fastThreshold = 5;
+    const fastThreshold = 3;
 
     if (rest < fastThreshold) {
       const fastProgress = 1 - rest / fastThreshold;
-      const additionalFactor = (1 - factor) / 3;
-      factor += additionalFactor * fastProgress;
+      const additionalFactor = (1 - lerpFactor) / 15;
+      lerpFactor += additionalFactor * fastProgress;
     }
 
-    this.current = lerp(this.current, target, factor, 0.000001);
+    this.current = lerp(this.current, target, lerpFactor, 0.000001);
+
+    // Interpolate influence
+
+    influence.target = lerp(influence.target, 0, initialFactor, 0.000001);
+
+    influence.current = lerp(
+      influence.current,
+      influence.target,
+      lerpFactor,
+      0.000001,
+    );
   }
 
   /** Whether the track is interpolated */
   get isInterpolated() {
-    return this.current === this.target;
+    return this.current === this.target && this._influence.current === 0;
   }
 
   /** Get minimum track value */

package/src/components/Snap/Wheel/index.ts

@@ -1,6 +1,7 @@
 import { addEventListener, clamp, normalizeWheel } from '@/utils';
 import { Snap } from '..';
 import { initVevet } from '@/global/initVevet';
+import { isNumber } from '@/internal/isNumber';
 
 const deltasCount = 6;
 
@@ -235,7 +236,7 @@ export class SnapWheel {
 
     // NUMBER
 
-    if (typeof wheelThrottle === 'number') {
+    if (isNumber(wheelThrottle)) {
       return timeDiff < wheelThrottle;
     }
 

package/src/components/Snap/index.ts

@@ -1,4 +1,4 @@
-import { Module } from '@/base';
+import { Module, TModuleOnCallbacksProps } from '@/base';
 import { Timeline } from '../Timeline';
 import {
   ISnapCallbacksMap,
@@ -28,15 +28,15 @@ import { SnapWheel } from './Wheel';
 import { SnapSwipe } from './Swipe';
 import { SnapTrack } from './Track';
 import { SnapKeyboard } from './Keyboard';
+import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
+import { isUndefined } from '@/internal/isUndefined';
+import { isNumber } from '@/internal/isNumber';
+import { isString } from '@/internal/isString';
 import { initVevet } from '@/global/initVevet';
 
 export * from './types';
 export * from './Slide';
 
-// todo: add examples for freemode: sticky
-
-// todo: fix freemode with negative swipeSpeed
-
 // todo: jsdoc
 
 /**
@@ -50,21 +50,21 @@ export * from './Slide';
  * @group Components
  */
 export class Snap<
-  CallbacksMap extends ISnapCallbacksMap = ISnapCallbacksMap,
-  StaticProps extends ISnapStaticProps = ISnapStaticProps,
-  MutableProps extends ISnapMutableProps = ISnapMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends ISnapCallbacksMap = ISnapCallbacksMap,
+  S extends ISnapStaticProps = ISnapStaticProps,
+  M extends ISnapMutableProps = ISnapMutableProps,
+> extends Module<C, S, M> {
   /** Retrieves the default static properties. */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       eventsEmitter: null,
       activeIndex: 0,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /** Retrieves the default mutable properties. */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       slides: false,
@@ -72,7 +72,7 @@ export class Snap<
       centered: false,
       loop: false,
       gap: 0,
-      lerp: 0.2,
+      lerp: initVevet().mobile ? 1 : 0.2,
       freemode: false,
       stickOnResize: true,
       friction: 0,
@@ -88,11 +88,10 @@ export class Snap<
       shortSwipesDuration: 300,
       shortSwipesThreshold: 30,
       swipeFriction: false,
-      swipeLerp: initVevet().mobile ? 1 : 0.6,
       swipeThreshold: 5,
       swipeMinTime: 0,
       swipeInertiaDuration: (distance) => clamp(distance, 500, 2000),
-      swipeInertiaRatio: 0.3,
+      swipeInertiaRatio: 0.5,
       wheel: false,
       wheelSpeed: 1,
       wheelAxis: 'auto',
@@ -101,7 +100,7 @@ export class Snap<
       stickOnWheelEnd: true,
       stickOnWheelEndThreshold: 30,
       slideSize: 'auto',
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** Animation frame for smooth animations */
@@ -140,8 +139,11 @@ export class Snap<
   /** Target slide index */
   protected _targetIndex?: number;
 
-  constructor(props?: StaticProps & MutableProps) {
-    super(props);
+  constructor(
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Snap<C, S, M>>,
+  ) {
+    super(props, onCallbacks as any);
 
     const { container, activeIndex } = this.props;
 
@@ -213,6 +215,7 @@ export class Snap<
   }
 
   /** Request resize (handled with debounce timeout) */
+  @noopIfDestroyed
   public resize(isManual = false) {
     if (isManual) {
       this._resizeHandler.resize();
@@ -342,16 +345,10 @@ export class Snap<
       return;
     }
 
-    const { track, props, _swipe: swipe } = this;
-
-    // Get lerp factor
-    const lerpFactor =
-      (swipe.isSwiping || swipe.hasInertia) && props.swipeLerp
-        ? props.swipeLerp
-        : props.lerp;
+    const { track, props } = this;
 
     // Interpolate track value
-    track.lerp(this._raf.lerpFactor(lerpFactor));
+    track.lerp(this._raf.lerpFactor(props.lerp));
 
     // Stop raf if target reached
     if (track.isInterpolated) {
@@ -363,6 +360,7 @@ export class Snap<
   }
 
   /** Render slides */
+  @noopIfDestroyed
   public render(frameDuration = 0) {
     if (this.isEmpty) {
       return;
@@ -381,7 +379,7 @@ export class Snap<
     if (
       magnet &&
       magnet.slide.index !== this._activeIndex &&
-      (typeof this._targetIndex === 'undefined' ||
+      (isUndefined(this._targetIndex) ||
         magnet.slide.index === this._targetIndex)
     ) {
       this._activeIndex = magnet.slide.index;
@@ -508,6 +506,7 @@ export class Snap<
   }
 
   /** Stick to the nearest magnet */
+  @noopIfDestroyed
   public stick() {
     const { magnet } = this;
 
@@ -520,7 +519,7 @@ export class Snap<
 
   /** Go to a definite coordinate */
   public toCoord(coordinate: number, options?: ISnapTransitionArg) {
-    if (this.isEmpty) {
+    if (this.isEmpty || this.isDestroyed) {
       return false;
     }
 
@@ -534,8 +533,7 @@ export class Snap<
 
     const durationProp = options?.duration ?? props.duration;
 
-    let duration =
-      typeof durationProp === 'number' ? durationProp : durationProp(diff);
+    let duration = isNumber(durationProp) ? durationProp : durationProp(diff);
     if (diff === 0) {
       duration = 0;
     }
@@ -554,6 +552,7 @@ export class Snap<
     tm.on('update', (data) => {
       track.current = lerp(start, end, data.eased);
       track.target = track.current;
+      track.influence *= 1 - data.progress;
 
       if (data.progress === 1) {
         this._targetIndex = undefined;
@@ -591,7 +590,7 @@ export class Snap<
     const { isEmpty, activeIndex, slides, track, props } = this;
     const { current, max, loopCount } = track;
 
-    if (isEmpty) {
+    if (isEmpty || this.isDestroyed) {
       return false;
     }
 
@@ -635,7 +634,7 @@ export class Snap<
     const targetMagnetMax = targetMagnet + max;
     const allMagnets = [targetMagnetMin, targetMagnet, targetMagnetMax];
 
-    if (typeof direction === 'string') {
+    if (isString(direction)) {
       const magnets = allMagnets.filter((magnet) =>
         direction === 'next' ? magnet >= current : magnet <= current,
       );

package/src/components/Snap/types.ts

@@ -63,7 +63,7 @@ export interface ISnapMutableProps
 
   /**
    * Linear interpolation factor for smooth coordinates updates.
-   * @default 0.2
+   * @default `vevet.mobile ? 1 : 0.2`
    */
   lerp?: number;
 

package/src/components/SplitText/index.ts

@@ -9,10 +9,11 @@ import {
   ISplitTextStaticProps,
   ISplitTextWordMeta,
 } from './types';
-import { Module } from '@/base';
+import { Module, TModuleOnCallbacksProps } from '@/base';
 import { TRequiredProps } from '@/internal/requiredProps';
 import { initVevet } from '@/global/initVevet';
 import { saveInitialNodes } from './utils/saveInitialNodes';
+import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
 
 export * from './types';
 
@@ -32,14 +33,14 @@ export * from './types';
  * @group Components
  */
 export class SplitText<
-  CallbacksMap extends ISplitTextCallbacksMap = ISplitTextCallbacksMap,
-  StaticProps extends ISplitTextStaticProps = ISplitTextStaticProps,
-  MutableProps extends ISplitTextMutableProps = ISplitTextMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends ISplitTextCallbacksMap = ISplitTextCallbacksMap,
+  S extends ISplitTextStaticProps = ISplitTextStaticProps,
+  M extends ISplitTextMutableProps = ISplitTextMutableProps,
+> extends Module<C, S, M> {
   /**
    * Retrieves the default static properties.
    */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
       letters: false,
@@ -54,14 +55,17 @@ export class SplitText<
       lineWrapperClass: this._cn('__line-wrapper'),
       resizeDebounce: 0,
       ignore: null,
-    } as TRequiredProps<StaticProps>;
+      prepareText: (text) => text,
+      wordDelimiter: String.fromCharCode(32),
+      wordDelimiterOutput: null,
+    } as TRequiredProps<S>;
   }
 
   /**
    * Retrieves the default mutable properties.
    */
-  public _getMutable(): TRequiredProps<MutableProps> {
-    return { ...super._getMutable() } as TRequiredProps<MutableProps>;
+  public _getMutable(): TRequiredProps<M> {
+    return { ...super._getMutable() } as TRequiredProps<M>;
   }
 
   /**
@@ -146,13 +150,17 @@ export class SplitText<
   /**
    * Initializes the SplitText instance and saves the initial state.
    */
-  constructor(props?: StaticProps & MutableProps) {
-    super(props);
+  constructor(
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, SplitText<C, S, M>>,
+  ) {
+    super(props, onCallbacks as any);
 
     const { container } = this.props;
+    const { style } = container;
 
-    container.style.fontKerning = 'none';
-    container.style.display = 'block';
+    style.fontKerning = 'none';
+    style.display = 'block';
     container.setAttribute('aria-label', container.textContent || '');
 
     this._addTempClassName(container, this._cn(''));
@@ -192,6 +200,7 @@ export class SplitText<
   /**
    * Splits the text into letters, words, and optionally lines based on configuration.
    */
+  @noopIfDestroyed
   public split() {
     this.callbacks.emit('beforeSplit', undefined);
 
@@ -212,8 +221,17 @@ export class SplitText<
       return;
     }
 
-    const { container, letterTag, wordTag, wordClass, letterClass, ignore } =
-      this.props;
+    const {
+      container,
+      letterTag,
+      wordTag,
+      wordClass,
+      letterClass,
+      ignore,
+      prepareText,
+      wordDelimiter,
+      wordDelimiterOutput,
+    } = this.props;
 
     this._isBaseSplit = true;
 
@@ -225,6 +243,9 @@ export class SplitText<
       letterTag,
       wordTag,
       ignore,
+      prepareText,
+      wordDelimiter,
+      wordDelimiterOutput,
     });
 
     this._wordsMeta = wordsMeta;

package/src/components/SplitText/types.ts

@@ -82,6 +82,36 @@ export interface ISplitTextStaticProps extends IModuleStaticProps {
    * @default null
    */
   ignore?: string | HTMLElement[] | ((element: HTMLElement) => boolean) | null;
+
+  /**
+   * Optional callback to preprocess text before it is split into words.
+   * This function receives the original text and should return the modified text.
+   * It is useful for languages like Chinese where standard word splitting may not work correctly.
+   * 
+   * @example
+   * 
+   * const segmenter = new Intl.Segmenter('zh', { granularity: 'word' });
+   * 
+   * const instance = new SplitText({
+   *   container,
+   *   prepareText: (source) => [...segmenter.segment(source)].map((s) => s.segment).join(' '),
+    });
+   */
+  prepareText?: (text: string) => string;
+
+  /**
+   * Specifies a custom delimiter used to split text into words.
+   * By default, splitting occurs on regular whitespace.
+   * @default " "
+   */
+  wordDelimiter?: string;
+
+  /**
+   * Provides an alternative delimiter to use when outputting the split words.
+   * Useful when a custom input delimiter is used but the output should differ.
+   * @default null
+   */
+  wordDelimiterOutput?: string | null;
 }
 
 /** Mutable properties for the SplitText module */

package/src/components/SplitText/utils/isIgnored.ts

@@ -1,3 +1,4 @@
+import { isString } from '@/internal/isString';
 import { ISplitTextStaticProps } from '../types';
 
 export function isIgnored(
@@ -8,7 +9,7 @@ export function isIgnored(
     return false;
   }
 
-  if (typeof ignore === 'string') {
+  if (isString(ignore)) {
     return element.matches(ignore);
   }
 

package/src/components/SplitText/utils/saveInitialNodes.ts

@@ -1,3 +1,5 @@
+import { doc } from '@/internal/env';
+
 interface IClone {
   node: Node;
   cssText: string | null;
@@ -25,7 +27,7 @@ export function saveInitialNodes(root: Node) {
   // Return a function to restore the initial nodes
   return {
     restore: () => {
-      const fragment = document.createDocumentFragment();
+      const fragment = doc.createDocumentFragment();
 
       flatArray.forEach((element) => {
         const { node, cssText } = element;

package/src/components/SplitText/utils/splitBase.ts

@@ -1,15 +1,20 @@
+import { doc } from '@/internal/env';
 import { ISplitTextLetterMeta, ISplitTextStaticProps } from '../types';
 import { wrapLetters } from './wrapLetters';
 import { wrapWords } from './wrapWords';
 
-interface IProps {
+type TBaseProps = Pick<
+  ISplitTextStaticProps,
+  'ignore' | 'prepareText' | 'wordDelimiter' | 'wordDelimiterOutput'
+>;
+
+interface IProps extends TBaseProps {
   container: HTMLElement;
   letterClassName: string;
   wordClassName: string;
   hasLetters: boolean;
   letterTag: keyof HTMLElementTagNameMap;
   wordTag: keyof HTMLElementTagNameMap;
-  ignore: ISplitTextStaticProps['ignore'];
 }
 
 /**
@@ -23,15 +28,17 @@ export function splitBase({
   letterTag,
   wordTag,
   ignore,
+  ...props
 }: IProps) {
   // Prepare the fragment
-  const prepareFragment = document.createDocumentFragment();
+  const prepareFragment = doc.createDocumentFragment();
   while (container.childNodes[0]) {
     prepareFragment.appendChild(container.childNodes[0]);
   }
 
   // Wrap the text into words
   const wordsMeta = wrapWords({
+    ...props,
     container: prepareFragment as any,
     classname: wordClassName,
     tagName: wordTag,

package/src/components/SplitText/utils/wrapLetters.ts

@@ -5,6 +5,8 @@ import {
   ISplitTextWordMeta,
 } from '../types';
 import { isIgnored } from './isIgnored';
+import { cnAdd } from '@/internal/cn';
+import { doc } from '@/internal/env';
 
 interface IProps {
   wordsMeta: ISplitTextWordMeta[];
@@ -19,9 +21,9 @@ interface IProps {
 export function wrapLetters({ wordsMeta, classname, tagName, ignore }: IProps) {
   const lettersMeta: ISplitTextLetterMeta[] = [];
 
-  const baseElement = document.createElement(tagName);
+  const baseElement = doc.createElement(tagName);
   baseElement.style.display = 'inline-block';
-  baseElement.classList.add(classname);
+  cnAdd(baseElement, classname);
 
   // Iterate over each word to wrap its letters
   wordsMeta.forEach((wordMeta) => {
@@ -45,7 +47,7 @@ export function wrapLetters({ wordsMeta, classname, tagName, ignore }: IProps) {
 
     splitLetters.forEach((letterContents) => {
       const element = baseElement.cloneNode(false) as HTMLElement;
-      element.appendChild(document.createTextNode(letterContents));
+      element.appendChild(doc.createTextNode(letterContents));
 
       // Append the letter element to the word's container
       wordMeta.element.insertBefore(element, textNode);

package/src/components/SplitText/utils/wrapLines.ts

@@ -1,5 +1,7 @@
+import { cnAdd } from '@/internal/cn';
 import { ISplitTextLineMeta, ISplitTextWordMeta } from '../types';
 import { getTextAalignment } from './getTextAalignment';
+import { doc } from '@/internal/env';
 
 interface IProps {
   container: HTMLElement;
@@ -58,10 +60,10 @@ export function wrapLines({
   let lineIndex = -1;
   let lastBounding: DOMRect | null = null;
 
-  const baseElement = document.createElement(tagName);
+  const baseElement = doc.createElement(tagName);
   baseElement.style.display = 'block';
   baseElement.setAttribute('aria-hidden', 'true');
-  baseElement.classList.add(lineClassName);
+  cnAdd(baseElement, lineClassName);
 
   const boundings = wordsMeta.map((wordMeta) =>
     wordMeta.element.getBoundingClientRect(),
@@ -95,9 +97,9 @@ export function wrapLines({
       let wrapper: HTMLElement | undefined;
 
       if (hasLinesWrapper) {
-        wrapper = document.createElement(tagName);
+        wrapper = doc.createElement(tagName);
         wrapper.style.display = 'block';
-        wrapper.classList.add(lineWrapperClassName);
+        cnAdd(wrapper, lineWrapperClassName);
         wrapper.appendChild(element);
       }
 
@@ -123,7 +125,7 @@ export function wrapLines({
   linesMeta.forEach((line) => {
     container.insertBefore(line.wrapper ?? line.element, line.nodes[0]);
 
-    const fragment = document.createDocumentFragment();
+    const fragment = doc.createDocumentFragment();
     fragment.append(...line.nodes);
     line.element.append(fragment);
   });