@etsoo/shared 1.1.26 → 1.1.29

package/README.md

@@ -26,6 +26,7 @@ Etsoo implmented Color
 |static getColors|Get HEX or RGB colors|
 |static getEColors|Get EColors|
 |static parse|Parse HTML color to EColor|
+|Methods||
 |clone|Clone color with adjustments|
 |getContrastRatio|Get contrast ratio, a value between 0 and 1|
 |getDeltaValue|Get Delta value (perceptible by human eyes)|
@@ -34,6 +35,16 @@ Etsoo implmented Color
 |toLabValue|To Lab value|
 |toRGBColor|To RGB color string|
 
+## EventClass
+Etsoo implmented abstract Event Class
+
+|Name|Description|
+|---:|---|
+|hasEvents|Has specific type and callback events|
+|off|Remove specific type and callback event|
+|on|Add event listener|
+|trigger|Trigger event|
+
 ## Keyboard
 Keyboard keys and codes
 
@@ -44,6 +55,23 @@ Keyboard keys and codes
 
 |isTypingContent|Is typing content or press command key|
 
+## EHistory
+ETSOO Extended abstract history class
+
+|Name|Description|
+|---:|---|
+|index|Current index|
+|length|States length|
+|state|Current state|
+|states|States|
+|Methods||
+|back|Back to the previous state|
+|clear|Clear all states but keep event listeners|
+|forward|Forward to the next state|
+|go|Go to the specific state|
+|pushState|Adds an entry to the history stack|
+|replaceState|Modifies the current history entry|
+
 ## DataTypes
 Data type definitions and type safe functions
 
@@ -77,7 +105,7 @@ Data type definitions and type safe functions
 |StringRecord|String key, unknown value Record|
 |VAlign|Vertical align|
 |VAlignEnum|Vertical align enum|
-
+|Methods||
 |convert|Convert value to target type|
 |convertByType|Convert by type name like 'string'|
 |convertSimple|Convert value to target enum type|
@@ -105,7 +133,7 @@ Dates related utilities
 |DayFormat|YYYY-MM-DD|
 |MinuteFormat|YYYY-MM-DD hh:mm|
 |SecondFormat|YYYY-MM-DD hh:mm:ss|
-
+|Methods||
 |getDays|Get month's days|
 |forma|Format dates|
 |jsonParser|JSON parser|

package/__tests__/EHistory.ts

@@ -0,0 +1,81 @@
+import {
+    EHistory,
+    EHistoryEventData,
+    EHistoryEventType
+} from '../src/types/EHistory';
+import { EventBase } from '../src/types/EventClass';
+
+// Extended for tests
+class LHistoryEvent extends EventBase<EHistoryEventType, EHistoryEventData> {}
+class LHistory extends EHistory<number, EHistoryEventData> {
+    protected createEvent(type: EHistoryEventType, index: number) {
+        return new LHistoryEvent(this, type, { index });
+    }
+}
+
+test('Tests for history', () => {
+    const history = new LHistory();
+    expect(history.index).toBe(-1);
+    history.pushState(1);
+    history.pushState(2);
+    history.pushState(3);
+    expect(history.states).toStrictEqual([1, 2, 3]);
+    expect(history.index).toBe(2);
+    history.back();
+    history.pushState(4);
+    expect(history.index).toBe(2);
+    expect(history.states).toStrictEqual([1, 2, 4]);
+    history.go(-2);
+    expect(history.state).toBe(1);
+    history.forward();
+    expect(history.index).toBe(1);
+    history.replaceState(0);
+    expect(history.state).toBe(0);
+    history.clear();
+    expect(history.length).toBe(0);
+});
+
+test('Tests for events', () => {
+    const navigatorFn = jest.fn();
+    const navigatorStopFn = jest.fn((event: LHistoryEvent) => {
+        event.stopImmediatePropagation();
+    });
+    const clearFn = jest.fn();
+    const pushFn = jest.fn();
+    const replaceFn = jest.fn();
+
+    const history = new LHistory();
+
+    history.on({
+        clear: clearFn,
+        push: pushFn,
+        replace: replaceFn,
+        navigate: navigatorFn
+    });
+    history.on('navigate', navigatorFn);
+    history.on('navigate', navigatorFn, { capture: true, once: true });
+
+    history.clear();
+    expect(clearFn).toBeCalled();
+
+    history.pushState(1);
+    expect(pushFn).toBeCalled();
+
+    history.replaceState(11);
+    expect(replaceFn).toBeCalled();
+
+    history.pushState(2);
+    history.back();
+    expect(navigatorFn).toBeCalledTimes(3);
+
+    history.forward();
+    // Once handler was removed
+    expect(navigatorFn).toBeCalledTimes(5);
+
+    history.on('navigate', navigatorStopFn, { capture: true });
+    history.go(-1);
+    expect(navigatorStopFn).toBeCalled();
+
+    // Previous handler stopped propagation
+    expect(navigatorFn).toBeCalledTimes(5);
+});

package/lib/cjs/types/EHistory.d.ts

@@ -0,0 +1,69 @@
+import { EventBase, EventClass } from './EventClass';
+/**
+ * ETSOO Extended history event type
+ */
+export declare type EHistoryEventType = 'navigate' | 'push' | 'replace' | 'clear';
+/**
+ * ETSOO Extended history event data
+ */
+export interface EHistoryEventData {
+    /**
+     * Current index
+     */
+    index: number;
+}
+/**
+ * ETSOO Extended abstract history class
+ */
+export declare abstract class EHistory<T, D extends EHistoryEventData> extends EventClass<EHistoryEventType, D> {
+    private _index;
+    /**
+     * States
+     */
+    readonly states: T[];
+    /**
+     * States length
+     */
+    get length(): number;
+    /**
+     * Get current state index
+     */
+    get index(): number;
+    /**
+     * Get current state
+     */
+    get state(): T | undefined;
+    /**
+     * Back to the previous state
+     */
+    back(): void;
+    /**
+     * Clear all states but keep event listeners
+     */
+    clear(): void;
+    /**
+     * Create event
+     * @param type Type
+     * @param index Current index
+     */
+    protected abstract createEvent(type: EHistoryEventType, index: number): EventBase<EHistoryEventType, D>;
+    /**
+     * Forward to the next state
+     */
+    forward(): void;
+    /**
+     * Go to the specific state
+     * @param delta A negative value moves backwards, a positive value moves forwards
+     */
+    go(delta: number): undefined;
+    /**
+     * Adds an entry to the history stack
+     * @param state State
+     */
+    pushState(state: T): void;
+    /**
+     * Modifies the current history entry
+     * @param state State
+     */
+    replaceState(state: T): void;
+}

package/lib/cjs/types/EHistory.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EHistory = void 0;
+const EventClass_1 = require("./EventClass");
+/**
+ * ETSOO Extended abstract history class
+ */
+class EHistory extends EventClass_1.EventClass {
+    constructor() {
+        super(...arguments);
+        // Index
+        this._index = -1;
+        /**
+         * States
+         */
+        this.states = [];
+    }
+    /**
+     * States length
+     */
+    get length() {
+        return this.states.length;
+    }
+    /**
+     * Get current state index
+     */
+    get index() {
+        return this._index;
+    }
+    /**
+     * Get current state
+     */
+    get state() {
+        if (this._index === -1)
+            return undefined;
+        return this.states[this._index];
+    }
+    /**
+     * Back to the previous state
+     */
+    back() {
+        this.go(-1);
+    }
+    /**
+     * Clear all states but keep event listeners
+     */
+    clear() {
+        // https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript
+        this.states.length = 0;
+        this._index = -1;
+        this.trigger(this.createEvent('clear', this._index));
+    }
+    /**
+     * Forward to the next state
+     */
+    forward() {
+        this.go(1);
+    }
+    /**
+     * Go to the specific state
+     * @param delta A negative value moves backwards, a positive value moves forwards
+     */
+    go(delta) {
+        // No data
+        if (this._index === -1)
+            return undefined;
+        // New index
+        const newIndex = this._index + delta;
+        // Not in the range
+        if (newIndex < 0 || newIndex >= this.length)
+            return undefined;
+        // Update the index
+        this._index = newIndex;
+        // Trigger event
+        this.trigger(this.createEvent('navigate', newIndex));
+    }
+    /**
+     * Adds an entry to the history stack
+     * @param state State
+     */
+    pushState(state) {
+        if (this._index >= 0) {
+            // Remove states after the index
+            this.states.splice(this._index + 1);
+        }
+        this.states.push(state);
+        this._index++;
+        this.trigger(this.createEvent('push', this._index));
+    }
+    /**
+     * Modifies the current history entry
+     * @param state State
+     */
+    replaceState(state) {
+        if (this._index === -1)
+            return;
+        this.states[this._index] = state;
+        this.trigger(this.createEvent('replace', this._index));
+    }
+}
+exports.EHistory = EHistory;

package/lib/cjs/types/EventClass.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Abstract event base class
+ * T for type
+ * D for data
+ */
+export declare abstract class EventBase<T extends string, D> {
+    readonly target: EventClass<T, D>;
+    readonly type: T;
+    readonly data: D;
+    private _propagationStopped;
+    /**
+     * stopImmediatePropagation called
+     */
+    get propagationStopped(): boolean;
+    private _timeStamp;
+    /**
+     * Time stamp
+     */
+    get timeStamp(): number;
+    /**
+     * Constructor
+     * @param type Type
+     */
+    constructor(target: EventClass<T, D>, type: T, data: D);
+    /**
+     * Prevent all other listeners from being called
+     */
+    stopImmediatePropagation(): void;
+}
+/**
+ * Event options
+ */
+interface EventOptions {
+    /**
+     * A boolean value indicating that events of this type will be dispatched first
+     */
+    capture?: boolean;
+    /**
+     * A boolean value indicating that the listener should be invoked at most once after being added
+     */
+    once?: boolean;
+}
+/**
+ * Event class callback
+ * T for type
+ * D for data
+ */
+export declare type EventClassCallback<T extends string, D> = (event: EventBase<T, D>) => void;
+/**
+ * Event class collection definition
+ * T for type
+ * D for data
+ */
+export declare type EventClassCollection<T extends string, D> = {
+    [key in T]?: EventClassCallback<T, D>;
+};
+/**
+ * Event class
+ * T for type
+ * D for data
+ */
+export declare abstract class EventClass<T extends string, D> {
+    private readonly listeners;
+    /**
+     * Has specific type events
+     * @param type Type
+     */
+    hasEvents(type: T): boolean;
+    /**
+     * Has specific type and callback events
+     * @param type Type
+     * @param callback Callback
+     */
+    hasEvents(type: T, callback: EventClassCallback<T, D>): boolean;
+    /**
+     * Remove all specific type events
+     * @param type Type
+     */
+    off(type: T): void;
+    /**
+     * Remove specific type and callback event
+     * @param type Type
+     * @param callback Callback
+     */
+    off(type: T, callback: EventClassCallback<T, D>): void;
+    /**
+     * Add event listeners
+     * @param collection Collection of events
+     */
+    on(collection: EventClassCollection<T, D>): void;
+    /**
+     * Add event listener
+     * @param type Type
+     * @param callback Callback
+     * @param options Options
+     */
+    on(type: T, callback: EventClassCallback<T, D>, options?: EventOptions): void;
+    /**
+     * Trigger event
+     * @param event Event
+     */
+    trigger(event: EventBase<T, D>): void;
+}
+export {};

package/lib/cjs/types/EventClass.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventClass = exports.EventBase = void 0;
+/**
+ * Abstract event base class
+ * T for type
+ * D for data
+ */
+class EventBase {
+    /**
+     * Constructor
+     * @param type Type
+     */
+    constructor(target, type, data) {
+        this.target = target;
+        this.type = type;
+        this.data = data;
+        this._propagationStopped = false;
+        this._timeStamp = Date.now();
+    }
+    /**
+     * stopImmediatePropagation called
+     */
+    get propagationStopped() {
+        return this._propagationStopped;
+    }
+    /**
+     * Time stamp
+     */
+    get timeStamp() {
+        return this._timeStamp;
+    }
+    /**
+     * Prevent all other listeners from being called
+     */
+    stopImmediatePropagation() {
+        this._propagationStopped = true;
+    }
+}
+exports.EventBase = EventBase;
+/**
+ * Event class
+ * T for type
+ * D for data
+ */
+class EventClass {
+    constructor() {
+        // Listeners
+        this.listeners = new Map();
+    }
+    /**
+     * Has specific type and callback events
+     * @param type Type
+     * @param callback Callback
+     * @returns Result
+     */
+    hasEvents(type, callback) {
+        const items = this.listeners.get(type);
+        if (items == null || items.length === 0)
+            return false;
+        if (callback) {
+            return items.some((item) => item[0] == callback);
+        }
+        return true;
+    }
+    /**
+     * Remove specific type and callback event
+     * @param type Type
+     * @param callback Callback
+     */
+    off(type, callback) {
+        if (callback == null) {
+            this.listeners.delete(type);
+            return;
+        }
+        const items = this.listeners.get(type);
+        if (items == null)
+            return;
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i][0] == callback) {
+                items.splice(i, 1);
+            }
+        }
+    }
+    /**
+     * Add events
+     * @param type Type
+     * @param callback Callback
+     * @param options Options
+     */
+    on(type, callback, options) {
+        var _a, _b;
+        if (typeof type === 'object') {
+            for (const key in type) {
+                const item = key;
+                const itemCallback = (_a = type[item]) !== null && _a !== void 0 ? _a : callback;
+                if (itemCallback)
+                    this.on(item, itemCallback, options);
+            }
+            return;
+        }
+        if (callback == null)
+            return;
+        this.listeners.has(type) || this.listeners.set(type, []);
+        (_b = this.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.push([callback, options]);
+    }
+    /**
+     * Trigger event
+     * @param event Event
+     */
+    trigger(event) {
+        const items = this.listeners.get(event.type);
+        if (items == null)
+            return;
+        // Len
+        const len = items.length;
+        if (len === 0)
+            return;
+        // Need to be removed indicies
+        const indicies = [];
+        // Capture items first
+        let stopped = false;
+        for (let c = 0; c < len; c++) {
+            const item = items[c];
+            const [callback, options] = item;
+            if (options == null || !options.capture)
+                continue;
+            callback(event);
+            if (options.once) {
+                indicies.push(c);
+            }
+            if (event.propagationStopped) {
+                stopped = true;
+                break;
+            }
+        }
+        if (!stopped) {
+            for (let c = 0; c < len; c++) {
+                const item = items[c];
+                const [callback, options] = item;
+                if (options === null || options === void 0 ? void 0 : options.capture)
+                    continue;
+                callback(event);
+                if (options === null || options === void 0 ? void 0 : options.once) {
+                    indicies.push(c);
+                }
+                if (event.propagationStopped) {
+                    stopped = true;
+                    break;
+                }
+            }
+        }
+        // Remove all once handlers
+        for (let i = indicies.length - 1; i >= 0; i--) {
+            items.splice(indicies[i], 1);
+        }
+    }
+}
+exports.EventClass = EventClass;

package/lib/mjs/types/EHistory.d.ts

@@ -0,0 +1,69 @@
+import { EventBase, EventClass } from './EventClass';
+/**
+ * ETSOO Extended history event type
+ */
+export declare type EHistoryEventType = 'navigate' | 'push' | 'replace' | 'clear';
+/**
+ * ETSOO Extended history event data
+ */
+export interface EHistoryEventData {
+    /**
+     * Current index
+     */
+    index: number;
+}
+/**
+ * ETSOO Extended abstract history class
+ */
+export declare abstract class EHistory<T, D extends EHistoryEventData> extends EventClass<EHistoryEventType, D> {
+    private _index;
+    /**
+     * States
+     */
+    readonly states: T[];
+    /**
+     * States length
+     */
+    get length(): number;
+    /**
+     * Get current state index
+     */
+    get index(): number;
+    /**
+     * Get current state
+     */
+    get state(): T | undefined;
+    /**
+     * Back to the previous state
+     */
+    back(): void;
+    /**
+     * Clear all states but keep event listeners
+     */
+    clear(): void;
+    /**
+     * Create event
+     * @param type Type
+     * @param index Current index
+     */
+    protected abstract createEvent(type: EHistoryEventType, index: number): EventBase<EHistoryEventType, D>;
+    /**
+     * Forward to the next state
+     */
+    forward(): void;
+    /**
+     * Go to the specific state
+     * @param delta A negative value moves backwards, a positive value moves forwards
+     */
+    go(delta: number): undefined;
+    /**
+     * Adds an entry to the history stack
+     * @param state State
+     */
+    pushState(state: T): void;
+    /**
+     * Modifies the current history entry
+     * @param state State
+     */
+    replaceState(state: T): void;
+}

package/lib/mjs/types/EHistory.js

@@ -0,0 +1,97 @@
+import { EventClass } from './EventClass';
+/**
+ * ETSOO Extended abstract history class
+ */
+export class EHistory extends EventClass {
+    constructor() {
+        super(...arguments);
+        // Index
+        this._index = -1;
+        /**
+         * States
+         */
+        this.states = [];
+    }
+    /**
+     * States length
+     */
+    get length() {
+        return this.states.length;
+    }
+    /**
+     * Get current state index
+     */
+    get index() {
+        return this._index;
+    }
+    /**
+     * Get current state
+     */
+    get state() {
+        if (this._index === -1)
+            return undefined;
+        return this.states[this._index];
+    }
+    /**
+     * Back to the previous state
+     */
+    back() {
+        this.go(-1);
+    }
+    /**
+     * Clear all states but keep event listeners
+     */
+    clear() {
+        // https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript
+        this.states.length = 0;
+        this._index = -1;
+        this.trigger(this.createEvent('clear', this._index));
+    }
+    /**
+     * Forward to the next state
+     */
+    forward() {
+        this.go(1);
+    }
+    /**
+     * Go to the specific state
+     * @param delta A negative value moves backwards, a positive value moves forwards
+     */
+    go(delta) {
+        // No data
+        if (this._index === -1)
+            return undefined;
+        // New index
+        const newIndex = this._index + delta;
+        // Not in the range
+        if (newIndex < 0 || newIndex >= this.length)
+            return undefined;
+        // Update the index
+        this._index = newIndex;
+        // Trigger event
+        this.trigger(this.createEvent('navigate', newIndex));
+    }
+    /**
+     * Adds an entry to the history stack
+     * @param state State
+     */
+    pushState(state) {
+        if (this._index >= 0) {
+            // Remove states after the index
+            this.states.splice(this._index + 1);
+        }
+        this.states.push(state);
+        this._index++;
+        this.trigger(this.createEvent('push', this._index));
+    }
+    /**
+     * Modifies the current history entry
+     * @param state State
+     */
+    replaceState(state) {
+        if (this._index === -1)
+            return;
+        this.states[this._index] = state;
+        this.trigger(this.createEvent('replace', this._index));
+    }
+}

package/lib/mjs/types/EventClass.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Abstract event base class
+ * T for type
+ * D for data
+ */
+export declare abstract class EventBase<T extends string, D> {
+    readonly target: EventClass<T, D>;
+    readonly type: T;
+    readonly data: D;
+    private _propagationStopped;
+    /**
+     * stopImmediatePropagation called
+     */
+    get propagationStopped(): boolean;
+    private _timeStamp;
+    /**
+     * Time stamp
+     */
+    get timeStamp(): number;
+    /**
+     * Constructor
+     * @param type Type
+     */
+    constructor(target: EventClass<T, D>, type: T, data: D);
+    /**
+     * Prevent all other listeners from being called
+     */
+    stopImmediatePropagation(): void;
+}
+/**
+ * Event options
+ */
+interface EventOptions {
+    /**
+     * A boolean value indicating that events of this type will be dispatched first
+     */
+    capture?: boolean;
+    /**
+     * A boolean value indicating that the listener should be invoked at most once after being added
+     */
+    once?: boolean;
+}
+/**
+ * Event class callback
+ * T for type
+ * D for data
+ */
+export declare type EventClassCallback<T extends string, D> = (event: EventBase<T, D>) => void;
+/**
+ * Event class collection definition
+ * T for type
+ * D for data
+ */
+export declare type EventClassCollection<T extends string, D> = {
+    [key in T]?: EventClassCallback<T, D>;
+};
+/**
+ * Event class
+ * T for type
+ * D for data
+ */
+export declare abstract class EventClass<T extends string, D> {
+    private readonly listeners;
+    /**
+     * Has specific type events
+     * @param type Type
+     */
+    hasEvents(type: T): boolean;
+    /**
+     * Has specific type and callback events
+     * @param type Type
+     * @param callback Callback
+     */
+    hasEvents(type: T, callback: EventClassCallback<T, D>): boolean;
+    /**
+     * Remove all specific type events
+     * @param type Type
+     */
+    off(type: T): void;
+    /**
+     * Remove specific type and callback event
+     * @param type Type
+     * @param callback Callback
+     */
+    off(type: T, callback: EventClassCallback<T, D>): void;
+    /**
+     * Add event listeners
+     * @param collection Collection of events
+     */
+    on(collection: EventClassCollection<T, D>): void;
+    /**
+     * Add event listener
+     * @param type Type
+     * @param callback Callback
+     * @param options Options
+     */
+    on(type: T, callback: EventClassCallback<T, D>, options?: EventOptions): void;
+    /**
+     * Trigger event
+     * @param event Event
+     */
+    trigger(event: EventBase<T, D>): void;
+}
+export {};

package/lib/mjs/types/EventClass.js

@@ -0,0 +1,154 @@
+/**
+ * Abstract event base class
+ * T for type
+ * D for data
+ */
+export class EventBase {
+    /**
+     * Constructor
+     * @param type Type
+     */
+    constructor(target, type, data) {
+        this.target = target;
+        this.type = type;
+        this.data = data;
+        this._propagationStopped = false;
+        this._timeStamp = Date.now();
+    }
+    /**
+     * stopImmediatePropagation called
+     */
+    get propagationStopped() {
+        return this._propagationStopped;
+    }
+    /**
+     * Time stamp
+     */
+    get timeStamp() {
+        return this._timeStamp;
+    }
+    /**
+     * Prevent all other listeners from being called
+     */
+    stopImmediatePropagation() {
+        this._propagationStopped = true;
+    }
+}
+/**
+ * Event class
+ * T for type
+ * D for data
+ */
+export class EventClass {
+    constructor() {
+        // Listeners
+        this.listeners = new Map();
+    }
+    /**
+     * Has specific type and callback events
+     * @param type Type
+     * @param callback Callback
+     * @returns Result
+     */
+    hasEvents(type, callback) {
+        const items = this.listeners.get(type);
+        if (items == null || items.length === 0)
+            return false;
+        if (callback) {
+            return items.some((item) => item[0] == callback);
+        }
+        return true;
+    }
+    /**
+     * Remove specific type and callback event
+     * @param type Type
+     * @param callback Callback
+     */
+    off(type, callback) {
+        if (callback == null) {
+            this.listeners.delete(type);
+            return;
+        }
+        const items = this.listeners.get(type);
+        if (items == null)
+            return;
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i][0] == callback) {
+                items.splice(i, 1);
+            }
+        }
+    }
+    /**
+     * Add events
+     * @param type Type
+     * @param callback Callback
+     * @param options Options
+     */
+    on(type, callback, options) {
+        var _a, _b;
+        if (typeof type === 'object') {
+            for (const key in type) {
+                const item = key;
+                const itemCallback = (_a = type[item]) !== null && _a !== void 0 ? _a : callback;
+                if (itemCallback)
+                    this.on(item, itemCallback, options);
+            }
+            return;
+        }
+        if (callback == null)
+            return;
+        this.listeners.has(type) || this.listeners.set(type, []);
+        (_b = this.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.push([callback, options]);
+    }
+    /**
+     * Trigger event
+     * @param event Event
+     */
+    trigger(event) {
+        const items = this.listeners.get(event.type);
+        if (items == null)
+            return;
+        // Len
+        const len = items.length;
+        if (len === 0)
+            return;
+        // Need to be removed indicies
+        const indicies = [];
+        // Capture items first
+        let stopped = false;
+        for (let c = 0; c < len; c++) {
+            const item = items[c];
+            const [callback, options] = item;
+            if (options == null || !options.capture)
+                continue;
+            callback(event);
+            if (options.once) {
+                indicies.push(c);
+            }
+            if (event.propagationStopped) {
+                stopped = true;
+                break;
+            }
+        }
+        if (!stopped) {
+            for (let c = 0; c < len; c++) {
+                const item = items[c];
+                const [callback, options] = item;
+                if (options === null || options === void 0 ? void 0 : options.capture)
+                    continue;
+                callback(event);
+                if (options === null || options === void 0 ? void 0 : options.once) {
+                    indicies.push(c);
+                }
+                if (event.propagationStopped) {
+                    stopped = true;
+                    break;
+                }
+            }
+        }
+        // Remove all once handlers
+        for (let i = indicies.length - 1; i >= 0; i--) {
+            items.splice(indicies[i], 1);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/shared",
-    "version": "1.1.26",
+    "version": "1.1.29",
     "description": "TypeScript shared utilities and functions",
     "main": "lib/cjs/index.js",
     "module": "lib/mjs/index.js",

package/src/types/EHistory.ts

@@ -0,0 +1,134 @@
+import { EventBase, EventClass } from './EventClass';
+
+/**
+ * ETSOO Extended history event type
+ */
+export type EHistoryEventType = 'navigate' | 'push' | 'replace' | 'clear';
+
+/**
+ * ETSOO Extended history event data
+ */
+export interface EHistoryEventData {
+    /**
+     * Current index
+     */
+    index: number;
+}
+
+/**
+ * ETSOO Extended abstract history class
+ */
+export abstract class EHistory<
+    T,
+    D extends EHistoryEventData
+> extends EventClass<EHistoryEventType, D> {
+    // Index
+    private _index: number = -1;
+
+    /**
+     * States
+     */
+    readonly states: T[] = [];
+
+    /**
+     * States length
+     */
+    get length() {
+        return this.states.length;
+    }
+
+    /**
+     * Get current state index
+     */
+    get index() {
+        return this._index;
+    }
+
+    /**
+     * Get current state
+     */
+    get state() {
+        if (this._index === -1) return undefined;
+        return this.states[this._index];
+    }
+
+    /**
+     * Back to the previous state
+     */
+    back() {
+        this.go(-1);
+    }
+
+    /**
+     * Clear all states but keep event listeners
+     */
+    clear() {
+        // https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript
+        this.states.length = 0;
+        this._index = -1;
+        this.trigger(this.createEvent('clear', this._index));
+    }
+
+    /**
+     * Create event
+     * @param type Type
+     * @param index Current index
+     */
+    protected abstract createEvent(
+        type: EHistoryEventType,
+        index: number
+    ): EventBase<EHistoryEventType, D>;
+
+    /**
+     * Forward to the next state
+     */
+    forward() {
+        this.go(1);
+    }
+
+    /**
+     * Go to the specific state
+     * @param delta A negative value moves backwards, a positive value moves forwards
+     */
+    go(delta: number) {
+        // No data
+        if (this._index === -1) return undefined;
+
+        // New index
+        const newIndex = this._index + delta;
+
+        // Not in the range
+        if (newIndex < 0 || newIndex >= this.length) return undefined;
+
+        // Update the index
+        this._index = newIndex;
+
+        // Trigger event
+        this.trigger(this.createEvent('navigate', newIndex));
+    }
+
+    /**
+     * Adds an entry to the history stack
+     * @param state State
+     */
+    pushState(state: T) {
+        if (this._index >= 0) {
+            // Remove states after the index
+            this.states.splice(this._index + 1);
+        }
+
+        this.states.push(state);
+        this._index++;
+        this.trigger(this.createEvent('push', this._index));
+    }
+
+    /**
+     * Modifies the current history entry
+     * @param state State
+     */
+    replaceState(state: T) {
+        if (this._index === -1) return;
+        this.states[this._index] = state;
+        this.trigger(this.createEvent('replace', this._index));
+    }
+}

package/src/types/EventClass.ts

@@ -0,0 +1,253 @@
+/**
+ * Abstract event base class
+ * T for type
+ * D for data
+ */
+export abstract class EventBase<T extends string, D> {
+    private _propagationStopped: boolean = false;
+    /**
+     * stopImmediatePropagation called
+     */
+    get propagationStopped() {
+        return this._propagationStopped;
+    }
+
+    private _timeStamp: number;
+    /**
+     * Time stamp
+     */
+    get timeStamp() {
+        return this._timeStamp;
+    }
+
+    /**
+     * Constructor
+     * @param type Type
+     */
+    constructor(
+        public readonly target: EventClass<T, D>,
+        public readonly type: T,
+        public readonly data: D
+    ) {
+        this._timeStamp = Date.now();
+    }
+
+    /**
+     * Prevent all other listeners from being called
+     */
+    stopImmediatePropagation() {
+        this._propagationStopped = true;
+    }
+}
+
+/**
+ * Event options
+ */
+interface EventOptions {
+    /**
+     * A boolean value indicating that events of this type will be dispatched first
+     */
+    capture?: boolean;
+
+    /**
+     * A boolean value indicating that the listener should be invoked at most once after being added
+     */
+    once?: boolean;
+}
+
+/**
+ * Event class callback
+ * T for type
+ * D for data
+ */
+export type EventClassCallback<T extends string, D> = (
+    event: EventBase<T, D>
+) => void;
+
+/**
+ * Event class collection definition
+ * T for type
+ * D for data
+ */
+export type EventClassCollection<T extends string, D> = {
+    [key in T]?: EventClassCallback<T, D>;
+};
+
+/**
+ * Event class
+ * T for type
+ * D for data
+ */
+export abstract class EventClass<T extends string, D> {
+    // Listeners
+    private readonly listeners = new Map<
+        T,
+        [EventClassCallback<T, D>, EventOptions?][]
+    >();
+
+    /**
+     * Has specific type events
+     * @param type Type
+     */
+    hasEvents(type: T): boolean;
+
+    /**
+     * Has specific type and callback events
+     * @param type Type
+     * @param callback Callback
+     */
+    hasEvents(type: T, callback: EventClassCallback<T, D>): boolean;
+
+    /**
+     * Has specific type and callback events
+     * @param type Type
+     * @param callback Callback
+     * @returns Result
+     */
+    hasEvents(type: T, callback?: EventClassCallback<T, D>) {
+        const items = this.listeners.get(type);
+        if (items == null || items.length === 0) return false;
+
+        if (callback) {
+            return items.some((item) => item[0] == callback);
+        }
+
+        return true;
+    }
+
+    /**
+     * Remove all specific type events
+     * @param type Type
+     */
+    off(type: T): void;
+
+    /**
+     * Remove specific type and callback event
+     * @param type Type
+     * @param callback Callback
+     */
+    off(type: T, callback: EventClassCallback<T, D>): void;
+
+    /**
+     * Remove specific type and callback event
+     * @param type Type
+     * @param callback Callback
+     */
+    off(type: T, callback?: EventClassCallback<T, D>) {
+        if (callback == null) {
+            this.listeners.delete(type);
+            return;
+        }
+
+        const items = this.listeners.get(type);
+        if (items == null) return;
+
+        for (let i = items.length - 1; i >= 0; i--) {
+            if (items[i][0] == callback) {
+                items.splice(i, 1);
+            }
+        }
+    }
+
+    /**
+     * Add event listeners
+     * @param collection Collection of events
+     */
+    on(collection: EventClassCollection<T, D>): void;
+
+    /**
+     * Add event listener
+     * @param type Type
+     * @param callback Callback
+     * @param options Options
+     */
+    on(
+        type: T,
+        callback: EventClassCallback<T, D>,
+        options?: EventOptions
+    ): void;
+
+    /**
+     * Add events
+     * @param type Type
+     * @param callback Callback
+     * @param options Options
+     */
+    on(
+        type: EventClassCollection<T, D> | T,
+        callback?: EventClassCallback<T, D>,
+        options?: EventOptions
+    ) {
+        if (typeof type === 'object') {
+            for (const key in type) {
+                const item = key as T;
+                const itemCallback = type[item] ?? callback;
+                if (itemCallback) this.on(item, itemCallback, options);
+            }
+            return;
+        }
+
+        if (callback == null) return;
+        this.listeners.has(type) || this.listeners.set(type, []);
+        this.listeners.get(type)?.push([callback, options]);
+    }
+
+    /**
+     * Trigger event
+     * @param event Event
+     */
+    trigger(event: EventBase<T, D>) {
+        const items = this.listeners.get(event.type);
+        if (items == null) return;
+
+        // Len
+        const len = items.length;
+        if (len === 0) return;
+
+        // Need to be removed indicies
+        const indicies: number[] = [];
+
+        // Capture items first
+        let stopped: boolean = false;
+        for (let c = 0; c < len; c++) {
+            const item = items[c];
+            const [callback, options] = item;
+            if (options == null || !options.capture) continue;
+
+            callback(event);
+
+            if (options.once) {
+                indicies.push(c);
+            }
+
+            if (event.propagationStopped) {
+                stopped = true;
+                break;
+            }
+        }
+
+        if (!stopped) {
+            for (let c = 0; c < len; c++) {
+                const item = items[c];
+                const [callback, options] = item;
+                if (options?.capture) continue;
+
+                callback(event);
+
+                if (options?.once) {
+                    indicies.push(c);
+                }
+
+                if (event.propagationStopped) {
+                    stopped = true;
+                    break;
+                }
+            }
+        }
+
+        // Remove all once handlers
+        for (let i = indicies.length - 1; i >= 0; i--) {
+            items.splice(indicies[i], 1);
+        }
+    }
+}