vevet 4.4.2 → 5.0.0

package/src/components/CustomScrollDragPlugin/types.ts

@@ -1,59 +0,0 @@
-import { NPlugin } from '@/base/Plugin/types';
-
-export namespace NCustomScrollDragPlugin {
-  export interface IStaticProps extends NPlugin.IStaticProps {}
-
-  export interface IChangeableProps extends NPlugin.IChangeableProps {
-    /**
-     * Determines if the dragger functionality is enabled.
-     * @default true
-     */
-    isEnabled?: boolean;
-
-    /**
-     * Defines the speed of the dragger movement.
-     * Higher values make the dragging movement faster.
-     * @default 1
-     */
-    speed?: number;
-
-    /**
-     * Custom linear interpolation (lerp) value for smooth scrolling.
-     * If set to `false`, the lerp value from the `CustomScroll` instance is used.
-     * Values range between 0 and 1, with 1 being an instant scroll.
-     * @default false
-     */
-    lerp?: number | false;
-
-    /**
-     * Threshold in pixels to stop the event propagation during a drag.
-     * If set to `false`, no threshold is applied.
-     * @default false
-     */
-    stopPropagationThreshold?: false | number;
-
-    /**
-     * Defines the direction in which to stop event propagation.
-     * Either the X-axis ('x') or the Y-axis ('y').
-     * @default 'y'
-     */
-    stopPropagationDirection?: 'x' | 'y';
-  }
-
-  export interface ICallbacksTypes extends NPlugin.ICallbacksTypes {
-    /**
-     * Fired when dragging starts.
-     */
-    start: undefined;
-
-    /**
-     * Fired while dragging is in progress.
-     */
-    move: undefined;
-
-    /**
-     * Fired when dragging ends.
-     */
-    end: undefined;
-  }
-}

package/src/components/CustomScrollKeyboardPlugin/index.ts

@@ -1,226 +0,0 @@
-import { Plugin } from '@/base/Plugin';
-import { NCustomScrollKeyboardPlugin } from './types';
-import type { CustomScroll as CustomScrollInstance } from '../CustomScroll';
-import { getApp } from '@/utils/internal/getApp';
-import { childOf } from '@/utils/dom/childOf';
-
-export type { NCustomScrollKeyboardPlugin };
-
-/**
- * CustomScrollKeyboardPlugin adds keyboard navigation functionality to the `CustomScroll` component.
- * It allows scrolling the container using keyboard arrow keys, space bar, page up/down, home, end, and tab.
- *
- * @link See examples https://antonbobrov.github.io/vevet-demo/custom-scroll/
- *
- * @link See docs https://antonbobrov.github.io/vevet/classes/CustomScrollKeyboardPlugin.html
- */
-export class CustomScrollKeyboardPlugin<
-  StaticProps extends
-    NCustomScrollKeyboardPlugin.IStaticProps = NCustomScrollKeyboardPlugin.IStaticProps,
-  ChangeableProps extends
-    NCustomScrollKeyboardPlugin.IChangeableProps = NCustomScrollKeyboardPlugin.IChangeableProps,
-  CallbacksTypes extends
-    NCustomScrollKeyboardPlugin.ICallbacksTypes = NCustomScrollKeyboardPlugin.ICallbacksTypes,
-> extends Plugin<
-  StaticProps,
-  ChangeableProps,
-  CallbacksTypes,
-  CustomScrollInstance
-> {
-  protected _getDefaultProps() {
-    return {
-      ...super._getDefaultProps(),
-      iterator: 40,
-    };
-  }
-
-  /**
-   * Timeout for handling the Tab key navigation.
-   */
-  protected _tabTimeout?: NodeJS.Timeout;
-
-  /** Initializes the plugin by adding event listeners for keyboard events. */
-  protected _init() {
-    super._init();
-
-    this.addEventListener(window, 'keydown', (event) =>
-      this._handleKeydown(event),
-    );
-  }
-
-  /**
-   * Determines if keyboard events should be ignored, based on the currently active element.
-   */
-  protected _canIgnoreEvents() {
-    const { activeElement } = document;
-
-    return (
-      activeElement instanceof HTMLInputElement ||
-      activeElement instanceof HTMLTextAreaElement ||
-      activeElement instanceof HTMLSelectElement
-    );
-  }
-
-  /**
-   * Checks if the scroll container is visible in the viewport.
-   */
-  protected _isInViewport() {
-    const { viewport } = getApp();
-
-    const bounding = this.component.container.getBoundingClientRect();
-
-    return (
-      bounding.left < viewport.width &&
-      bounding.right > 0 &&
-      bounding.top < viewport.height &&
-      bounding.bottom > 0
-    );
-  }
-
-  /**
-   * Determines whether the scroll has reached its end.
-   */
-  protected _checkIsEndOfScroll() {
-    const { component } = this;
-
-    return (
-      component.targetTop >= component.maxScrollableHeight &&
-      component.targetLeft >= component.maxScrollableWidth
-    );
-  }
-
-  /**
-   * Handles the `keydown` event for navigating the scrollable container with the keyboard.
-   */
-  protected _handleKeydown(event: KeyboardEvent) {
-    const { component } = this;
-    const { iterator } = this.props;
-
-    if (!component.props.isEnabled) {
-      return;
-    }
-
-    // Handle Tab key
-    if (event.keyCode === 9) {
-      this._handleTab();
-
-      return;
-    }
-
-    // Handle Spacebar key
-    if (event.keyCode === 32) {
-      this._handleSpace(event);
-
-      return;
-    }
-
-    // Ignore events from form fields
-    if (this._canIgnoreEvents()) {
-      return;
-    }
-
-    // Ignore scroll events if the container is not in the viewport
-    if (!this._isInViewport()) {
-      return;
-    }
-
-    // Prevent default behavior for specific keys if the scroll has not reached its end
-    if (
-      !this._checkIsEndOfScroll() &&
-      [38, 40, 39, 37, 34, 33, 36, 35].includes(event.keyCode)
-    ) {
-      event.preventDefault();
-    }
-
-    // Handle scroll key events
-    switch (event.keyCode) {
-      case 38: // Arrow Up
-        component.targetTop -= iterator;
-        break;
-      case 40: // Arrow Down
-        component.targetTop += iterator;
-        break;
-      case 39: // Arrow Right
-        component.targetLeft += iterator;
-        break;
-      case 37: // Arrow Left
-        component.targetLeft -= iterator;
-        break;
-      case 34: // Page Down
-        component.targetTop += iterator * 10;
-        break;
-      case 33: // Page Up
-        component.targetTop -= iterator * 10;
-        break;
-      case 36: // Home
-        component.targetTop = 0;
-        component.targetLeft = 0;
-        break;
-      case 35: // End
-        component.targetTop = component.scrollHeight;
-        component.targetLeft = component.scrollWidth;
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  /**
-   * Handles the Tab key for focusing elements inside the scrollable container and adjusting the scroll position.
-   */
-  protected _handleTab() {
-    if (this._tabTimeout) {
-      clearTimeout(this._tabTimeout);
-    }
-
-    this._tabTimeout = setTimeout(() => {
-      const scroll = this.component;
-      const { activeElement } = document;
-
-      if (
-        !(activeElement instanceof HTMLElement) ||
-        !childOf(activeElement, scroll.container)
-      ) {
-        return;
-      }
-
-      const scrollOuterBounding = scroll.container.getBoundingClientRect();
-      const activeElementBounding = activeElement.getBoundingClientRect();
-
-      const top =
-        scroll.scrollTop +
-        (activeElementBounding.top - scrollOuterBounding.top) -
-        (scroll.clientHeight / 2 - activeElementBounding.height / 2);
-      const left =
-        scroll.scrollLeft +
-        (activeElementBounding.left - scrollOuterBounding.left) -
-        (scroll.clientWidth / 2 - activeElementBounding.width / 2);
-
-      scroll.targetTop = top;
-      scroll.targetLeft = left;
-    }, 120);
-  }
-
-  /**
-   * Handles the Spacebar key to scroll down the container by a fixed amount.
-   */
-  protected _handleSpace(event: KeyboardEvent) {
-    if (document.activeElement instanceof HTMLButtonElement) {
-      return;
-    }
-
-    event.preventDefault();
-
-    this.component.targetTop += this.props.iterator * 5;
-  }
-
-  /** Destroys the plugin and clears any timeouts or event listeners. */
-  protected _destroy() {
-    super._destroy();
-
-    if (this._tabTimeout) {
-      clearTimeout(this._tabTimeout);
-    }
-  }
-}

package/src/components/CustomScrollKeyboardPlugin/stories/index.stories.tsx

@@ -1,13 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { Component } from '.';
-
-type TComponent = typeof Component;
-
-const meta: Meta<TComponent> = {
-  title: 'Components/CustomScrollKeyboardPlugin',
-  component: Component,
-};
-
-export default meta;
-
-export const Default: StoryObj<TComponent> = {};

package/src/components/CustomScrollKeyboardPlugin/stories/index.tsx

@@ -1,90 +0,0 @@
-/* eslint-disable no-alert */
-import React, { FC, useEffect, useRef, useState } from 'react';
-import { CustomScrollKeyboardPlugin } from '..';
-import { CustomScroll } from '@/components/CustomScroll';
-import { times } from '@/utils/internal/times';
-
-export const Component: FC = () => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [scroll, setScroll] = useState<CustomScroll>();
-
-  useEffect(() => {
-    if (!containerRef.current) {
-      return undefined;
-    }
-
-    const instance = new CustomScroll({
-      container: containerRef.current,
-    });
-
-    setScroll(instance);
-
-    instance.addPlugin(new CustomScrollKeyboardPlugin());
-
-    return () => instance.destroy();
-  }, []);
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: true })}
-      >
-        Enable
-      </button>
-
-      <button
-        type="button"
-        onClick={() => scroll?.changeProps({ isEnabled: false })}
-      >
-        Disable
-      </button>
-
-      <br />
-
-      <br />
-
-      <div
-        ref={containerRef}
-        className="v-custom-scroll"
-        style={{ height: 500, maxWidth: 500, backgroundColor: '#ccc' }}
-      >
-        <div className="v-custom-scroll__wrapper">
-          <button type="button">Test button</button>
-
-          <br />
-
-          <br />
-
-          <input type="text" placeholder="Test input" />
-
-          {times(
-            (index) => (
-              <div key={index}>
-                {'Lorem ipsum dolor sit amet '}
-
-                <br />
-
-                <br />
-
-                <a href="/">Link</a>
-
-                <br />
-
-                <br />
-
-                <button type="button" onClick={() => alert('click')}>
-                  Test button
-                </button>
-              </div>
-            ),
-            40,
-          )}
-
-          <button type="button">Test button</button>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/CustomScrollKeyboardPlugin/types.ts

@@ -1,16 +0,0 @@
-import { NPlugin } from '@/base/Plugin/types';
-
-export namespace NCustomScrollKeyboardPlugin {
-  export interface IStaticProps extends NPlugin.IStaticProps {}
-
-  export interface IChangeableProps extends NPlugin.IChangeableProps {
-    /**
-     * Defines the scroll step when using keyboard navigation (in pixels).
-     * Controls the amount the scroll will move with each key press.
-     * @default 40
-     */
-    iterator?: number;
-  }
-
-  export interface ICallbacksTypes extends NPlugin.ICallbacksTypes {}
-}

package/src/components/DraggerBase/index.ts

@@ -1,269 +0,0 @@
-import { addEventListener } from '@/utils/dom/addEventListener';
-import { NDraggerBase } from './types';
-import { Component as ComponentClass } from '@/base/Component';
-import { isElement } from '@/utils/dom/isElement';
-import { isWindow } from '@/utils/dom/isWindow';
-import { selectOne } from '@/utils/dom/selectOne';
-import { getApp } from '@/utils/internal/getApp';
-
-export type { NDraggerBase };
-
-/**
- * Abstract class to handle drag and swipe events on elements or window.
- * Handles mouse and touch events, with runtime events to track dragging.
- *
- * @link See docs https://antonbobrov.github.io/vevet/classes/DraggerBase.html
- */
-export abstract class DraggerBase<
-  StaticProps extends NDraggerBase.IStaticProps = NDraggerBase.IStaticProps,
-  ChangeableProps extends
-    NDraggerBase.IChangeableProps = NDraggerBase.IChangeableProps,
-  CallbacksTypes extends
-    NDraggerBase.ICallbacksTypes = NDraggerBase.ICallbacksTypes,
-> extends ComponentClass<StaticProps, ChangeableProps, CallbacksTypes> {
-  protected _getDefaultProps() {
-    return {
-      ...super._getDefaultProps(),
-      container: `#${this.prefix}`,
-      isEnabled: true,
-      preventDefault: true,
-    };
-  }
-
-  get prefix() {
-    return `${getApp().prefix}dragger`;
-  }
-
-  /**
-   * The container element or window where the drag events occur.
-   */
-  protected _container: Element | Window;
-
-  /**
-   * Returns the dragger's container element or window.
-   */
-  get container() {
-    return this._container;
-  }
-
-  /**
-   * Stores runtime event listeners added during dragging.
-   */
-  protected _runtimeListeners: (() => void)[];
-
-  /**
-   * Indicates whether dragging is currently happening.
-   */
-  get isDragging() {
-    return this._runtimeListeners.length > 0;
-  }
-
-  /**
-   * The current coordinates of the pointer during dragging.
-   */
-  protected _coords: NDraggerBase.IVector2;
-
-  /**
-   * Returns the current pointer coordinates.
-   */
-  get coords() {
-    return this._coords;
-  }
-
-  /**
-   * Sets the current pointer coordinates.
-   */
-  protected set coords(value) {
-    this._coords = value;
-  }
-
-  /**
-   * The previous coordinates of the pointer before the current event.
-   */
-  protected _prevCoords: NDraggerBase.IVector2;
-
-  /**
-   * Returns the previous pointer coordinates.
-   */
-  get prevCoords() {
-    return this._prevCoords;
-  }
-
-  /**
-   * Sets the previous pointer coordinates.
-   */
-  protected set prevCoords(value) {
-    this._prevCoords = value;
-  }
-
-  /**
-   * The coordinates where the drag operation started.
-   */
-  protected _start: NDraggerBase.IVector2;
-
-  /**
-   * Returns the starting pointer coordinates at the beginning of the drag.
-   */
-  get start() {
-    return this._start;
-  }
-
-  /**
-   * Styles injected to prevent user selection during dragging.
-   */
-  protected _fixStyles: HTMLStyleElement;
-
-  constructor(initialProps?: StaticProps & ChangeableProps, canInit = true) {
-    super(initialProps, false);
-
-    // Get the dragger container
-    this._container = selectOne(this.props.container)!;
-    if (!isElement(this._container) && !isWindow(this._container)) {
-      throw new Error('No container');
-    }
-
-    // Initialize default variables
-    this._runtimeListeners = [];
-    this._coords = { x: 0, y: 0 };
-    this._prevCoords = { x: 0, y: 0 };
-    this._start = { x: 0, y: 0 };
-
-    // Set styles to prevent user-select during drag
-    this._fixStyles = document.createElement('style');
-    this._fixStyles.innerHTML = '* { user-select: none !important; }';
-
-    if (canInit) {
-      this.init();
-    }
-  }
-
-  protected _init() {
-    super._init();
-
-    this._setEvents();
-  }
-
-  /**
-   * Sets up the dragger events for mouse and touch start.
-   */
-  protected _setEvents() {
-    this.addEventListener(
-      this.container,
-      'pointerdown',
-      (event) => this._handleStart(event),
-      { passive: false },
-    );
-
-    this.addEventListener(
-      this.container,
-      'dragstart',
-      (event) => event.preventDefault(),
-      { passive: false },
-    );
-  }
-
-  /**
-   * Adds runtime events for mouseup, touchend, and other events during dragging.
-   */
-  protected _addRuntimeEvents() {
-    this._runtimeListeners.push(
-      addEventListener(window, 'pointerup', (event) => this._handleEnd(event), {
-        passive: false,
-      }),
-    );
-
-    this._runtimeListeners.push(
-      addEventListener(
-        window,
-        'pointercancel',
-        (event) => this._handleEnd(event),
-        { passive: false },
-      ),
-    );
-
-    this._runtimeListeners.push(
-      addEventListener(window, 'blur', () => this._handleEnd(null), {
-        passive: false,
-      }),
-    );
-  }
-
-  /**
-   * Removes runtime events after the drag operation ends or is canceled.
-   */
-  protected _removeRuntimeEvents() {
-    this._runtimeListeners.forEach((listener) => listener());
-
-    this._runtimeListeners = [];
-  }
-
-  /**
-   * Handles the start of a drag event.
-   */
-  protected _handleStart(event: PointerEvent) {
-    if (!this.props.isEnabled || this.isDragging) {
-      return;
-    }
-
-    // prevent right click
-    if (event.button === 2) {
-      return;
-    }
-
-    if (this.props.preventDefault) {
-      event.preventDefault();
-    }
-
-    // Update coordinates
-    const { clientX: x, clientY: y } = event;
-    this._coords = { x, y };
-    this._prevCoords = { x, y };
-    this._start = { x, y };
-
-    // Add runtime events for drag
-    this._addRuntimeEvents();
-
-    // reset selection
-    window.getSelection()?.empty();
-    window.getSelection()?.removeAllRanges();
-
-    // Apply styles to prevent user-select
-    getApp().body.append(this._fixStyles);
-
-    // Trigger start callback
-    this.callbacks.tbt('start', {
-      event,
-      start: this.start,
-      coords: this.coords,
-    });
-  }
-
-  /**
-   * Handles the end of a drag event and initiates cleanup.
-   */
-  protected _handleEnd(event: PointerEvent | null) {
-    this._removeRuntimeEvents();
-
-    // Update coordinates
-    if (event) {
-      this._coords = { x: event.clientX, y: event.clientY };
-    }
-
-    // remove styles fix
-    this._fixStyles.remove();
-
-    // launch callbacks
-    this.callbacks.tbt('end', undefined);
-  }
-
-  /**
-   * Destroys the dragger component, removing events and cleaning up resources.
-   */
-  protected _destroy() {
-    this._handleEnd(null);
-
-    super._destroy();
-
-    this._removeRuntimeEvents();
-  }
-}