@brandup/ui 1.0.1

package/README.md

@@ -0,0 +1,77 @@
+# brandup-ui
+
+[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui?branchName=master)]()
+
+## Installation
+
+Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui).
+
+```
+npm i @brandup/ui@latest
+```
+
+## UIElement
+
+`UIElement` - wrapper для `HTMLElement`, который позволяет привязать к нему свою бизнес логику.
+
+Возможности:
+- Обработка комманд вызванных внутри `HTMLElement`, который связан с `UIElement`.
+- Обработка событий элемента `HTMLElement`, который связан с `UIElement`.
+
+```
+abstract class UIElement {
+    abstract typeName: string;
+    readonly element: HTMLElement;
+
+    protected setElement(elem: HTMLElement): void;
+
+    protected defineEvent(eventName: string, eventOptions?: IEventOptions): void;
+    protected raiseEvent(eventName: string, eventArgs?: any): boolean;
+
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener?: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: Event): boolean;
+
+    registerCommand(name: string, execute: CommandDelegate, canExecute: CommandCanExecuteDelegate = null): void;
+    registerAsyncCommand(name: string, delegate: CommandAsyncDelegate): void;
+    hasCommand(name: string): boolean;
+    execCommand(name: string, elem: HTMLElement): CommandExecutionResult;
+    
+    protected _onRenderElement(_elem: HTMLElement);
+    protected _onCanExecCommand(_name: string, _elem: HTMLElement): boolean;
+
+    destroy(): void;
+}
+```
+
+## Command handling
+
+Класс UIElement позволяет регистрировать обработчики комманд, которые определяются в разметке HTML элемента.
+
+```
+<button data-command="send">Send</button>
+
+this.registerCommand("send", (elem: HTMLElement, context: CommandContext) => { elem.innerHTML = "ok"; });
+```
+
+Так же можно регистрировать асинхронные команды:
+
+```
+this.registerAsyncCommand("command1-async", (context: CommandAsyncContext) => {
+    context.timeout = 3000;
+
+    context.target.innerHTML = "Loading...";
+    const t = window.setTimeout(() => {
+        context.target.innerHTML = "Ok";
+        context.complate();
+    }, 2000);
+
+    context.timeoutCallback = () => {
+        clearTimeout(t);
+    };
+});
+```
+
+Команды вызываются по событию click.
+
+Во время выполнения команды, у элемента добавляется стиль **executing**.

package/dist/cjs/index.js

@@ -0,0 +1,229 @@
+'use strict';
+
+const ElemAttributeName = "uiElement";
+const ElemPropertyName = "brandupUiElement";
+const CommandAttributeName = "command";
+const CommandExecutingCssClassName = "executing";
+class UIElement {
+    __element = null;
+    __events = {};
+    __commandHandlers = {};
+    // Element members
+    get element() { return this.__element; }
+    setElement(elem) {
+        if (!elem)
+            throw "Not set value elem.";
+        if (this.__element || UIElement.hasElement(elem))
+            throw "UIElement already defined";
+        this.__element = elem;
+        this.__element[ElemPropertyName] = this;
+        this.__element.dataset[ElemAttributeName] = this.typeName;
+        this.defineEvent("command", { cancelable: false, bubbles: true });
+        this._onRenderElement(elem);
+    }
+    // static members
+    static hasElement(elem) {
+        return !!elem.dataset[ElemAttributeName];
+    }
+    // HTMLElement event members
+    defineEvent(eventName, eventOptions) {
+        this.__events[eventName] = eventOptions ? eventOptions : null;
+    }
+    raiseEvent(eventName, eventArgs) {
+        if (!(eventName in this.__events))
+            throw new Error(`Not found event "${eventName}".`);
+        const eventOptions = this.__events[eventName];
+        const eventInit = {};
+        if (eventOptions) {
+            if (eventOptions.bubbles)
+                eventInit.bubbles = eventOptions.bubbles;
+            if (eventOptions.cancelable)
+                eventInit.cancelable = eventOptions.cancelable;
+            if (eventOptions.composed)
+                eventInit.composed = eventOptions.composed;
+        }
+        eventInit.detail = eventArgs ? eventArgs : {};
+        const event = new CustomEvent(eventName, eventInit);
+        return this.dispatchEvent(event);
+    }
+    addEventListener(type, listener, options) {
+        this.__element?.addEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, options) {
+        this.__element?.removeEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        if (!this.__element)
+            throw new Error("HTMLElement is not defined.");
+        return this.__element.dispatchEvent(event);
+    }
+    // Command members
+    registerCommand(name, execute, canExecute) {
+        name = this.verifyCommandName(name);
+        this.__commandHandlers[name] = {
+            name: name,
+            execute,
+            canExecute,
+            isExecuting: false
+        };
+    }
+    registerAsyncCommand(name, delegate, canExecute) {
+        name = this.verifyCommandName(name);
+        this.__commandHandlers[name] = {
+            name: name,
+            delegate,
+            canExecute,
+            isExecuting: false
+        };
+    }
+    hasCommand(name) {
+        return name.toLowerCase() in this.__commandHandlers;
+    }
+    execCommand(name, elem) {
+        if (!this.__element)
+            throw new Error("UIElement is not set HTMLElement.");
+        const key = name.toLowerCase();
+        if (!(key in this.__commandHandlers))
+            throw new Error(`Command "${name}" is not registered.`);
+        const context = {
+            target: elem,
+            uiElem: this,
+            transparent: false
+        };
+        const handler = this.__commandHandlers[key];
+        if (handler.isExecuting)
+            return { result: exports.CommandsExecStatus.AlreadyExecuting, context };
+        handler.isExecuting = true;
+        if (!this._onCanExecCommand(name, elem)) {
+            handler.isExecuting = false;
+            return { result: exports.CommandsExecStatus.NotAllow, context };
+        }
+        if (handler.canExecute && !handler.canExecute(elem, context)) {
+            handler.isExecuting = false;
+            return { result: exports.CommandsExecStatus.NotAllow, context };
+        }
+        this.raiseEvent("command", {
+            name: handler.name,
+            uiElem: this,
+            elem: this.__element
+        });
+        if (handler.execute) {
+            // Если команда синхронная.
+            try {
+                handler.execute(elem, context);
+            }
+            finally {
+                handler.isExecuting = false;
+            }
+        }
+        else if (handler.delegate) {
+            // Если команда асинхронная.
+            elem.classList.add(CommandExecutingCssClassName);
+            let timeoutId = 0;
+            const endFunc = () => {
+                handler.isExecuting = false;
+                elem.classList.remove(CommandExecutingCssClassName);
+            };
+            const asyncContext = {
+                target: elem,
+                uiElem: this,
+                transparent: context.transparent,
+                complate: () => {
+                    clearTimeout(timeoutId);
+                    endFunc();
+                }
+            };
+            const handlerResult = handler.delegate(asyncContext);
+            if (handlerResult && handlerResult instanceof Promise)
+                handlerResult.finally(() => asyncContext.complate());
+            if (handler.isExecuting && asyncContext.timeout) {
+                timeoutId = window.setTimeout(() => {
+                    if (asyncContext.timeoutCallback)
+                        asyncContext.timeoutCallback();
+                    endFunc();
+                }, asyncContext.timeout);
+            }
+            context.transparent = asyncContext.transparent;
+        }
+        else
+            throw new Error("Not set command execute flow.");
+        return { result: exports.CommandsExecStatus.Success, context: context };
+    }
+    verifyCommandName(name) {
+        const key = name.toLowerCase();
+        if (key in this.__commandHandlers)
+            throw new Error(`Command "${name}" already registered.`);
+        return key;
+    }
+    _onRenderElement(_elem) {
+        return;
+    }
+    _onCanExecCommand(_name, _elem) {
+        return true;
+    }
+    destroy() {
+        const elem = this.__element;
+        if (!elem)
+            return;
+        this.__element = null;
+        delete elem.dataset[ElemAttributeName];
+        delete elem[ElemPropertyName];
+    }
+}
+exports.CommandsExecStatus = void 0;
+(function (CommandsExecStatus) {
+    CommandsExecStatus[CommandsExecStatus["NotAllow"] = 1] = "NotAllow";
+    CommandsExecStatus[CommandsExecStatus["AlreadyExecuting"] = 2] = "AlreadyExecuting";
+    CommandsExecStatus[CommandsExecStatus["Success"] = 3] = "Success";
+})(exports.CommandsExecStatus || (exports.CommandsExecStatus = {}));
+const fundUiElementByCommand = (elem, commandName) => {
+    while (elem) {
+        if (elem.dataset[ElemAttributeName]) {
+            const uiElem = elem[ElemPropertyName];
+            if (uiElem.hasCommand(commandName))
+                return uiElem;
+        }
+        if (typeof elem.parentElement === "undefined")
+            elem = elem.parentNode;
+        else if (elem.parentElement)
+            elem = elem.parentElement;
+        else
+            break;
+    }
+    return null;
+};
+const commandClickHandler = (e) => {
+    let commandElem = e.target;
+    while (commandElem) {
+        if (commandElem.dataset[CommandAttributeName])
+            break;
+        if (commandElem === e.currentTarget)
+            return;
+        commandElem = commandElem.parentElement;
+    }
+    if (!commandElem)
+        return;
+    const commandName = commandElem.dataset[CommandAttributeName];
+    if (!commandName)
+        throw new Error("Command data attribute is not have value.");
+    const uiElem = fundUiElementByCommand(commandElem, commandName);
+    if (uiElem === null) {
+        console.warn(`Not find handler for command "${commandName}".`);
+    }
+    else {
+        const commandResult = uiElem.execCommand(commandName, commandElem);
+        if (commandResult.context.transparent)
+            return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+};
+window.addEventListener("click", commandClickHandler, false);
+
+exports.CommandAttributeName = CommandAttributeName;
+exports.CommandExecutingCssClassName = CommandExecutingCssClassName;
+exports.ElemAttributeName = ElemAttributeName;
+exports.ElemPropertyName = ElemPropertyName;
+exports.UIElement = UIElement;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/mjs/index.js

@@ -0,0 +1,223 @@
+const ElemAttributeName = "uiElement";
+const ElemPropertyName = "brandupUiElement";
+const CommandAttributeName = "command";
+const CommandExecutingCssClassName = "executing";
+class UIElement {
+    __element = null;
+    __events = {};
+    __commandHandlers = {};
+    // Element members
+    get element() { return this.__element; }
+    setElement(elem) {
+        if (!elem)
+            throw "Not set value elem.";
+        if (this.__element || UIElement.hasElement(elem))
+            throw "UIElement already defined";
+        this.__element = elem;
+        this.__element[ElemPropertyName] = this;
+        this.__element.dataset[ElemAttributeName] = this.typeName;
+        this.defineEvent("command", { cancelable: false, bubbles: true });
+        this._onRenderElement(elem);
+    }
+    // static members
+    static hasElement(elem) {
+        return !!elem.dataset[ElemAttributeName];
+    }
+    // HTMLElement event members
+    defineEvent(eventName, eventOptions) {
+        this.__events[eventName] = eventOptions ? eventOptions : null;
+    }
+    raiseEvent(eventName, eventArgs) {
+        if (!(eventName in this.__events))
+            throw new Error(`Not found event "${eventName}".`);
+        const eventOptions = this.__events[eventName];
+        const eventInit = {};
+        if (eventOptions) {
+            if (eventOptions.bubbles)
+                eventInit.bubbles = eventOptions.bubbles;
+            if (eventOptions.cancelable)
+                eventInit.cancelable = eventOptions.cancelable;
+            if (eventOptions.composed)
+                eventInit.composed = eventOptions.composed;
+        }
+        eventInit.detail = eventArgs ? eventArgs : {};
+        const event = new CustomEvent(eventName, eventInit);
+        return this.dispatchEvent(event);
+    }
+    addEventListener(type, listener, options) {
+        this.__element?.addEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, options) {
+        this.__element?.removeEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        if (!this.__element)
+            throw new Error("HTMLElement is not defined.");
+        return this.__element.dispatchEvent(event);
+    }
+    // Command members
+    registerCommand(name, execute, canExecute) {
+        name = this.verifyCommandName(name);
+        this.__commandHandlers[name] = {
+            name: name,
+            execute,
+            canExecute,
+            isExecuting: false
+        };
+    }
+    registerAsyncCommand(name, delegate, canExecute) {
+        name = this.verifyCommandName(name);
+        this.__commandHandlers[name] = {
+            name: name,
+            delegate,
+            canExecute,
+            isExecuting: false
+        };
+    }
+    hasCommand(name) {
+        return name.toLowerCase() in this.__commandHandlers;
+    }
+    execCommand(name, elem) {
+        if (!this.__element)
+            throw new Error("UIElement is not set HTMLElement.");
+        const key = name.toLowerCase();
+        if (!(key in this.__commandHandlers))
+            throw new Error(`Command "${name}" is not registered.`);
+        const context = {
+            target: elem,
+            uiElem: this,
+            transparent: false
+        };
+        const handler = this.__commandHandlers[key];
+        if (handler.isExecuting)
+            return { result: CommandsExecStatus.AlreadyExecuting, context };
+        handler.isExecuting = true;
+        if (!this._onCanExecCommand(name, elem)) {
+            handler.isExecuting = false;
+            return { result: CommandsExecStatus.NotAllow, context };
+        }
+        if (handler.canExecute && !handler.canExecute(elem, context)) {
+            handler.isExecuting = false;
+            return { result: CommandsExecStatus.NotAllow, context };
+        }
+        this.raiseEvent("command", {
+            name: handler.name,
+            uiElem: this,
+            elem: this.__element
+        });
+        if (handler.execute) {
+            // Если команда синхронная.
+            try {
+                handler.execute(elem, context);
+            }
+            finally {
+                handler.isExecuting = false;
+            }
+        }
+        else if (handler.delegate) {
+            // Если команда асинхронная.
+            elem.classList.add(CommandExecutingCssClassName);
+            let timeoutId = 0;
+            const endFunc = () => {
+                handler.isExecuting = false;
+                elem.classList.remove(CommandExecutingCssClassName);
+            };
+            const asyncContext = {
+                target: elem,
+                uiElem: this,
+                transparent: context.transparent,
+                complate: () => {
+                    clearTimeout(timeoutId);
+                    endFunc();
+                }
+            };
+            const handlerResult = handler.delegate(asyncContext);
+            if (handlerResult && handlerResult instanceof Promise)
+                handlerResult.finally(() => asyncContext.complate());
+            if (handler.isExecuting && asyncContext.timeout) {
+                timeoutId = window.setTimeout(() => {
+                    if (asyncContext.timeoutCallback)
+                        asyncContext.timeoutCallback();
+                    endFunc();
+                }, asyncContext.timeout);
+            }
+            context.transparent = asyncContext.transparent;
+        }
+        else
+            throw new Error("Not set command execute flow.");
+        return { result: CommandsExecStatus.Success, context: context };
+    }
+    verifyCommandName(name) {
+        const key = name.toLowerCase();
+        if (key in this.__commandHandlers)
+            throw new Error(`Command "${name}" already registered.`);
+        return key;
+    }
+    _onRenderElement(_elem) {
+        return;
+    }
+    _onCanExecCommand(_name, _elem) {
+        return true;
+    }
+    destroy() {
+        const elem = this.__element;
+        if (!elem)
+            return;
+        this.__element = null;
+        delete elem.dataset[ElemAttributeName];
+        delete elem[ElemPropertyName];
+    }
+}
+var CommandsExecStatus;
+(function (CommandsExecStatus) {
+    CommandsExecStatus[CommandsExecStatus["NotAllow"] = 1] = "NotAllow";
+    CommandsExecStatus[CommandsExecStatus["AlreadyExecuting"] = 2] = "AlreadyExecuting";
+    CommandsExecStatus[CommandsExecStatus["Success"] = 3] = "Success";
+})(CommandsExecStatus || (CommandsExecStatus = {}));
+const fundUiElementByCommand = (elem, commandName) => {
+    while (elem) {
+        if (elem.dataset[ElemAttributeName]) {
+            const uiElem = elem[ElemPropertyName];
+            if (uiElem.hasCommand(commandName))
+                return uiElem;
+        }
+        if (typeof elem.parentElement === "undefined")
+            elem = elem.parentNode;
+        else if (elem.parentElement)
+            elem = elem.parentElement;
+        else
+            break;
+    }
+    return null;
+};
+const commandClickHandler = (e) => {
+    let commandElem = e.target;
+    while (commandElem) {
+        if (commandElem.dataset[CommandAttributeName])
+            break;
+        if (commandElem === e.currentTarget)
+            return;
+        commandElem = commandElem.parentElement;
+    }
+    if (!commandElem)
+        return;
+    const commandName = commandElem.dataset[CommandAttributeName];
+    if (!commandName)
+        throw new Error("Command data attribute is not have value.");
+    const uiElem = fundUiElementByCommand(commandElem, commandName);
+    if (uiElem === null) {
+        console.warn(`Not find handler for command "${commandName}".`);
+    }
+    else {
+        const commandResult = uiElem.execCommand(commandName, commandElem);
+        if (commandResult.context.transparent)
+            return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+};
+window.addEventListener("click", commandClickHandler, false);
+
+export { CommandAttributeName, CommandExecutingCssClassName, CommandsExecStatus, ElemAttributeName, ElemPropertyName, UIElement };
+//# sourceMappingURL=index.js.map

package/dist/mjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,61 @@
+declare const ElemAttributeName = "uiElement";
+declare const ElemPropertyName = "brandupUiElement";
+declare const CommandAttributeName = "command";
+declare const CommandExecutingCssClassName = "executing";
+type CommandDelegate = (elem: HTMLElement, context: CommandContext) => void;
+type CommandCanExecuteDelegate = (elem: HTMLElement, context: CommandContext) => boolean;
+type CommandAsyncDelegate = (context: CommandAsyncContext) => void | Promise<void>;
+declare abstract class UIElement {
+    private __element;
+    private __events;
+    private __commandHandlers;
+    abstract typeName: string;
+    get element(): HTMLElement | null;
+    protected setElement(elem: HTMLElement): void;
+    static hasElement(elem: HTMLElement): boolean;
+    protected defineEvent(eventName: string, eventOptions?: EventOptions): void;
+    protected raiseEvent<T = {}>(eventName: string, eventArgs?: T): boolean;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    dispatchEvent(event: Event): boolean;
+    registerCommand(name: string, execute: CommandDelegate, canExecute?: CommandCanExecuteDelegate): void;
+    registerAsyncCommand(name: string, delegate: CommandAsyncDelegate, canExecute?: CommandCanExecuteDelegate): void;
+    hasCommand(name: string): boolean;
+    execCommand(name: string, elem: HTMLElement): CommandExecutionResult;
+    private verifyCommandName;
+    protected _onRenderElement(_elem: HTMLElement): void;
+    protected _onCanExecCommand(_name: string, _elem: HTMLElement): boolean;
+    destroy(): void;
+}
+interface EventOptions {
+    bubbles?: boolean;
+    cancelable?: boolean;
+    composed?: boolean;
+}
+interface CommandEventArgs {
+    name: string;
+    uiElem: UIElement;
+    elem: HTMLElement;
+}
+interface CommandContext {
+    /** Елемент, который принял команду. */
+    target: HTMLElement;
+    uiElem: UIElement;
+    transparent: boolean;
+}
+interface CommandExecutionResult {
+    result: CommandsExecStatus;
+    context: CommandContext;
+}
+interface CommandAsyncContext extends CommandContext {
+    timeout?: number;
+    complate: VoidFunction;
+    timeoutCallback?: VoidFunction;
+}
+declare enum CommandsExecStatus {
+    NotAllow = 1,
+    AlreadyExecuting = 2,
+    Success = 3
+}
+
+export { type CommandAsyncContext, type CommandAsyncDelegate, CommandAttributeName, type CommandCanExecuteDelegate, type CommandContext, type CommandDelegate, type CommandEventArgs, CommandExecutingCssClassName, type CommandExecutionResult, CommandsExecStatus, ElemAttributeName, ElemPropertyName, type EventOptions, UIElement };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@brandup/ui",
+  "description": "Lightweight UI framework on top of the DOM.",
+  "keywords": [
+    "brandup",
+    "javascript",
+    "typescript",
+    "dom",
+    "ui"
+  ],
+  "author": {
+    "name": "Dmitry Kovyazin",
+    "email": "it@brandup.online"
+  },
+  "homepage": "https://github.com/brandup-online/brandup-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brandup-online/brandup-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/brandup-online/brandup-ui/issues",
+    "email": "it@brandup.online"
+  },
+  "license": "Apache-2.0",
+  "version": "1.0.1",
+  "main": "dist/cjs/index.js",
+  "module": "dist/mjs/index.js",
+  "types": "dist/types.d.ts",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.19.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "watch": "rollup -c -w --bundleConfigAsCjs"
+  }
+}