@nutin/cli 1.3.1 → 2.1.0

package/templates/base/src/core/utils/button-manager/button-manager.utils.test.js.hbs

@@ -1,249 +0,0 @@
-import { ButtonManager } from '#root/dist/src/core/index.js';
-
-describe('ButtonManager', () => {
-  it('should initialize with default options', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    
-    expect(manager.component).toBe(mockComponent);
-    expect(manager.buttons.length).toBe(0);
-    expect(manager.containerOptions.containerClassName).toBe('dynamic-buttons');
-  });
-
-  it('should initialize with custom options', () => {
-    const mockComponent = {};
-    const buttons = [{ {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'test' }];
-    const options = { 
-      containerClassName: 'custom-container',
-      buttonClassName: 'custom-button'
-    };
-    
-    const manager = new ButtonManager(mockComponent, buttons, options);
-    
-    expect(manager.buttons.length).toBe(1);
-    expect(manager.containerOptions.containerClassName).toBe('custom-container');
-    expect(manager.containerOptions.buttonClassName).toBe('custom-button');
-  });
-
-  it('should return null for empty buttons array', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent, []);
-    
-    const container = manager.createButtonContainer();
-    expect(container).toBeUndefined();
-  });
-
-  it('should return null for undefined buttons', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    
-    const container = manager.createButtonContainer();
-    expect(container).toBeUndefined();
-  });
-
-  it('should create container with correct class name', () => {
-    const mockComponent = {};
-    const buttons = [{ {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'test' }];
-    const manager = new ButtonManager(mockComponent, buttons);
-    
-    const container = manager.createButtonContainer();
-    
-    expect(container).toBeDefined();
-    expect(container.className).toBe('dynamic-buttons');
-  });
-
-  it('should create container with custom class name', () => {
-    const mockComponent = {};
-    const buttons = [{ {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'test' }];
-    const options = { containerClassName: 'my-buttons' };
-    const manager = new ButtonManager(mockComponent, buttons, options);
-    
-    const container = manager.createButtonContainer();
-    
-    expect(container.className).toBe('my-buttons');
-  });
-
-  it('should create correct number of buttons', () => {
-    const mockComponent = {};
-    const buttons = [
-      { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'button1' },
-      { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'button2' },
-      { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'button3' }
-    ];
-    const manager = new ButtonManager(mockComponent, buttons);
-    
-    const container = manager.createButtonContainer();
-    
-    expect(container.children.length).toBe(3);
-  });
-
-  it('should create button with {{#if i18n}}i18nKey{{else}}textContent{{/if}} as text', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    const btn = { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'save' };
-    
-    const button = manager.createButton(btn, 0);
-    
-    {{#if i18n}}
-    expect(button.getAttribute('data-i18n')).toBe('save');
-    {{else}}
-    expect(button.textContent).toBe('save');
-    {{/if}}
-  });
-{{#if i18n}}
-
-  it('should prioritize textContent over i18nKey', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    const btn = { 
-      i18nKey: 'save',
-      textContent: 'Save Document'
-    };
-    
-    const button = manager.createButton(btn, 0);
-    
-    expect(button.textContent).toBe('Save Document');
-    expect(button.getAttribute('data-i18n')).toBe('save');
-  });
-{{/if}}
-
-  it('should set button className correctly', () => {
-    const mockComponent = {};    
-    const manager = new ButtonManager(mockComponent, []);
-    const btn = { 
-      i18nKey: 'save',
-      className: 'btn-primary'
-    };
-    
-    const button = manager.createButton(btn, 0);
-    
-    expect(button.className).toBe('btn-primary');
-  });
-
-  it('should set data-event attribute correctly', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    const btn = { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'save' };
-    
-    const button = manager.createButton(btn, 2);
-    
-    expect(button.getAttribute('data-event')).toBe('click:onButtonClick_2');
-  });
-
-  it('should bind callback method to component', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    const btn = { 
-      {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'test',
-      callback: () => 'called'
-    };
-    
-    manager.bindButtonCallback(btn, 1);
-    
-    expect(typeof mockComponent.onButtonClick_1).toBe('function')
-  });
-
-  it('should execute callback when bound method is called', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    let callbackExecuted = false;
-    const btn = { 
-      {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'test',
-      callback: () => { callbackExecuted = true; }
-    };
-    
-    manager.bindButtonCallback(btn, 0);
-    mockComponent.onButtonClick_0();
-    
-    expect(callbackExecuted).toBe(true);
-  });
-
-  it('should append button container to target element', () => {
-    const mockComponent = {};
-    const buttons = [{ {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'test' }];
-    const manager = new ButtonManager(mockComponent, buttons);
-    const target = document.createElement('div');
-    
-    manager.appendTo(target);
-    
-    expect(target.children.length).toBe(1);
-    expect(target.children[0].className).toBe('dynamic-buttons')
-  });
-
-  it('should not append anything for empty buttons', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent, []);
-    const target = document.createElement('div');
-    
-    manager.appendTo(target);
-    
-    expect(target.children.length).toBe(0);
-  });
-
-  it('should create complete button setup end-to-end', () => {
-    const mockComponent = {};
-    let button1Clicked = false;
-    let button2Clicked = false;
-    
-    const buttons = [
-      {
-        {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'save',
-        className: 'btn-primary',
-        callback: () => { button1Clicked = true; }
-      },
-      {
-        {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'cancel',
-        textContent: 'Cancel Action',
-        className: 'btn-secondary',
-        callback: () => { button2Clicked = true; }
-      }
-    ];
-    
-    const manager = new ButtonManager(mockComponent, buttons, {
-      containerClassName: 'form-buttons'
-    });
-    
-    const container = manager.createButtonContainer();
-    
-    expect(container.className).toBe('form-buttons');
-    expect(container.children.length).toBe(2);
-    
-    const firstButton = container.children[0];
-    expect(firstButton.className).toBe('btn-primary');
-    expect(firstButton.getAttribute('data-event')).toBe('click:onButtonClick_0');
-
-    const secondButton = container.children[1];
-    expect(secondButton.className).toBe('btn-secondary');
-    expect(secondButton.getAttribute('data-event')).toBe('click:onButtonClick_1');
-
-    mockComponent.onButtonClick_0();
-    mockComponent.onButtonClick_1();
-    
-    expect(button1Clicked).toBe(true);
-    expect(button2Clicked).toBe(true);
-  });
-
-  it('should handle button with empty {{#if i18n}}i18nKey{{else}}textContent{{/if}}', () => {
-    const mockComponent = {};
-    const manager = new ButtonManager(mockComponent);
-    const btn = { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: '' };
-    
-    const button = manager.createButton(btn, 0);
-    
-    expect(button.textContent).toBe('');
-    expect(button.getAttribute('data-i18n')).toBe(null);
-  });
-
-  it('should handle updateButtons method', () => {
-    const mockComponent = {};
-    const initialButtons = [{ {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'initial' }];
-    const manager = new ButtonManager(mockComponent, initialButtons);
-    
-    const newButtons = [{ {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'new1' }, { {{#if i18n}}i18nKey{{else}}textContent{{/if}}: 'new2' }];
-    manager.updateButtons(newButtons);
-    
-    expect(manager.buttons.length).toBe(2);
-    expect(manager.buttons[0].{{#if i18n}}i18nKey{{else}}textContent{{/if}}).toBe('new1');
-    expect(manager.buttons[1].{{#if i18n}}i18nKey{{else}}textContent{{/if}}).toBe('new2');
-  });
-})

package/templates/base/src/core/utils/button-manager/button-manager.utils.ts.hbs

@@ -1,131 +0,0 @@
-import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helper.js";
-
-export interface BaseButton extends IAttributesConfig {
-  callback: () => void;
-  label?: string;
-}
-
-export interface ButtonContainerOptions {
-  containerClassName?: string;
-  containerStyles?: string;
-}
-
-/**
- * ```typescript
- interface IAttributesConfig {
-  {{#if i18n}}
-  i18nKey?: string;
-  {{/if}}
-  textContent?: string;
-  className?: string;
-  style?: string;
-// use regular pipe syntax for arguments / chaining
-  pipes?: string;
-}
-
-interface ButtonContainerOptions {
-  containerClassName?: string;
-  containerStyles?: string;
-}
-  ```
-*/
-export class ButtonManager {
-  private component: any;
-  private buttons: BaseButton[];
-  private containerOptions: ButtonContainerOptions;
-
-  constructor(
-    component: any, 
-    buttons: BaseButton[] = [], 
-    containerOptions: ButtonContainerOptions = {}
-  ) {
-    this.component = component;
-    this.buttons = buttons;
-    this.containerOptions = {
-      containerClassName: 'dynamic-buttons',
-      containerStyles: '',
-      ...containerOptions
-    };
-  }
-
-  public createButtonContainer(): HTMLElement | null {
-    if (!Array.isArray(this.buttons) || this.buttons.length === 0) {
-      return null;
-    }
-
-    const container = document.createElement('div');
-    container.className = this.containerOptions.containerClassName || 'dynamic-buttons';
-    container.style = this.containerOptions.containerStyles || '';
-
-    this.buttons.forEach((config, index) => {
-      if (config.label) {
-        return this.createButtonWithCheckbox(config, index, container);
-      } else {
-        const button = this.createButton(config, index);
-        container.appendChild(button);
-        this.bindButtonCallback(config, index);
-      }
-    });
-
-    return container;
-  }
-
-  public appendTo(target: HTMLElement): void {
-    const container = this.createButtonContainer();
-    if (container) {
-      target.appendChild(container);
-    }
-  }
-
-  private createButtonWithCheckbox(config: BaseButton, index: number, container: HTMLElement): HTMLElement {
-    if (!config.label) return container;
-    const checkbox = document.createElement('input');
-    checkbox.setAttribute('type', 'checkbox');
-    checkbox.setAttribute('id', config.label);
-    checkbox.hidden = true;
-    container.appendChild(checkbox);
-    
-    const label = document.createElement('label');
-    label.setAttribute('for', config.label);
-        
-    const button = this.createButton(config, index);
-    label.appendChild(button);
-        
-    container.appendChild(label);
-    this.bindButtonCallback(config, index, checkbox);
-    return container;
-  }
-
-  private createButton(config: BaseButton, index: number): HTMLElement {
-    const button = document.createElement('button');
-    
-    AttributesHelper.setAttributes(button, config);
-
-    this.setDataEvent(button, index);
-
-    return button;
-  }
-
-  private setDataEvent(button: HTMLButtonElement, index: number): void {
-    button.setAttribute('data-event', `click:onButtonClick_${index}`);
-  }
-
-  private bindButtonCallback(config: BaseButton, index: number, checkbox?: HTMLInputElement): void {
-    const methodName = `onButtonClick_${index}`;
-    
-    this.component[methodName] = () => {
-      if (typeof config.callback === 'function') {
-        config.callback();
-        if (checkbox) {
-          checkbox.checked = !checkbox.checked;
-        }
-      }
-    };
-  }
-
-/** Note : doesn't track container
-*/
-  public updateButtons(newButtons: BaseButton[]): void {
-    this.buttons = newButtons;
-  }
-}

package/templates/base/src/core/utils/helpers/attributes.helper.ts.hbs

@@ -1,50 +0,0 @@
-export interface IAttributesConfig {
-  {{#if i18n}}
-  i18nKey?: string;
-  {{/if}}
-  textContent?: string;
-  className?: string;
-  style?: string;
-// use regular pipe syntax for arguments / chaining
-  pipes?: string;
-}
-
-export class AttributesHelper {
-  public static setAttributes(element: HTMLElement, config: IAttributesConfig): void {
-    this.setContent(element, config);
-    this.setPipes(element, config);
-    this.setStyle(element, config);
-  }
-
-  private static setContent(element: HTMLElement, config: IAttributesConfig): void {
-    element.textContent = config.textContent || '';
-    {{#if i18n}}
-    if (config.i18nKey) {
-      element.setAttribute('data-i18n', config.i18nKey);
-    }
-    {{/if}}
-  }
-
-  private static setPipes(element: HTMLElement, config: IAttributesConfig): void {
-    if (!config.pipes) return;
-    element.setAttribute('data-pipe', config.pipes);
-  }
-
-  private static setStyle(element: HTMLElement, config: IAttributesConfig): void {    
-    const classes = [
-      config.className
-    ].filter(Boolean).join(' ');
-
-    const style = [
-      config.style
-    ].filter(Boolean).join(' ');
-    
-    if (classes) {
-      element.className = classes;
-    }
-
-    if(style) {
-      element.style = style;
-    }
-  }
-}

package/templates/base/src/core/utils/index.ts.hbs

@@ -1,2 +0,0 @@
-export * from './button-manager/button-manager.utils.js';
-export * from './anchor-manager/anchor-manager.utils.js';

package/templates/base/src/libs/index.ts.hbs

@@ -1,4 +0,0 @@
-export * from './snackbar/snackbar.js';
-export * from './popover/popover.js';
-export * from './guards/guards.js';
-export * from './pipes/pipes.js';

package/templates/base/src/libs/popover/helpers/focus-trap.helper.ts.hbs

@@ -1,197 +0,0 @@
-import { AppEventBus } from "../../../core/index.js";
-
-type KeyboardEventHandler = (event: KeyboardEvent) => void;
-
-export interface IFocusTrapOptions {
-  escapeDeactivates?: boolean;
-  clickOutsideDeactivates?: boolean;
-  returnFocusOnDeactivate?: boolean;
-}
-
-export interface IFocusTrapHelperParams {
-  container: HTMLElement;
-  overlay: HTMLElement;
-  options?: IFocusTrapOptions;
-}
-
-export class FocusTrapHelper {
-  private _container: HTMLElement;
-  private _overlay: HTMLElement;
-  private _previousActiveElement: HTMLElement | null | undefined = null;
-  private _focusableElements: NodeListOf<HTMLElement> | null | undefined = null;
-  private _firstFocusableElement: HTMLElement | null | undefined = null;
-  private _lastFocusableElement: HTMLElement | null | undefined = null;
-  private _boundKeyDown: KeyboardEventHandler;
-  private _options: IFocusTrapOptions;
-  private _isActive: boolean = false;
-
-  constructor({container, overlay, options = {}}: IFocusTrapHelperParams) {
-    this._container = container;
-    this._overlay = overlay;
-    this._options = {
-      escapeDeactivates: true,
-      clickOutsideDeactivates: true,
-      returnFocusOnDeactivate: true,
-      ...options
-    };
-    this._boundKeyDown = this._handleKeyDown.bind(this);
-  }
-
-  private _getFocusableElements(): NodeListOf<HTMLElement> {
-    return this._container.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    ) as NodeListOf<HTMLElement>;
-  }
-
-  public activate(): void {
-    if (this._isActive) return;
-    
-    this._previousActiveElement = document.activeElement as HTMLElement;
-    
-    this._focusableElements = this._getFocusableElements();
-    
-    if (this._focusableElements.length > 0) {
-      this._firstFocusableElement = this._focusableElements[0];
-      this._lastFocusableElement = this._focusableElements[this._focusableElements.length - 1];
-      
-      this._firstFocusableElement?.focus();
-    } else {
-      this._container.setAttribute('tabindex', '-1');
-      this._container.focus();
-      this._firstFocusableElement = this._container;
-      this._lastFocusableElement = this._container;
-    }
-    
-    this._container.addEventListener('keydown', this._boundKeyDown);
-    
-      document.addEventListener('click', this._handleOutsideClick.bind(this));
-    
-    this._disableOutsideTabIndex();
-    
-    this._isActive = true;
-  }
-
-  public deactivate(): void {
-    if (!this._isActive) return;
-    
-    this._container.removeEventListener('keydown', this._boundKeyDown);
-    document.removeEventListener('click', this._handleOutsideClick.bind(this));
-    
-    this._enableOutsideTabIndex();
-    
-    if (this._container.getAttribute('tabindex') === '-1') {
-      this._container.removeAttribute('tabindex');
-    }
-    
-    if (this._options.returnFocusOnDeactivate && 
-      this._previousActiveElement && 
-      this._previousActiveElement.focus
-    ) {
-      this._previousActiveElement.focus();
-    }
-    
-    this._focusableElements = null;
-    this._firstFocusableElement = null;
-    this._lastFocusableElement = null;
-    this._previousActiveElement = null;
-    
-    this._isActive = false;
-  }
-
-  public getIsActive(): boolean {
-    return this._isActive;
-  }
-
-  public updateFocusableElements(): void {
-    if (!this._isActive) return;
-    
-    this._focusableElements = this._getFocusableElements();
-    
-    if (this._focusableElements.length > 0) {
-      this._firstFocusableElement = this._focusableElements[0];
-      this._lastFocusableElement = this._focusableElements[this._focusableElements.length - 1];
-    }
-  }
-
-  private _disableOutsideTabIndex(): void {
-    const allElements = document.querySelectorAll('body *') as NodeListOf<HTMLElement>;
-    
-    allElements.forEach((el: HTMLElement) => {
-      if (!this._container.contains(el)) {
-        const currentTabIndex = el.getAttribute('tabindex');
-        if (currentTabIndex !== '-1') {
-          const originalTabIndex = currentTabIndex || 
-            (el.tabIndex !== -1 ? el.tabIndex.toString() : null);
-          
-          if (originalTabIndex !== null) {
-            el.setAttribute('data-original-tabindex', originalTabIndex);
-          }
-          
-          el.setAttribute('tabindex', '-1');
-        }
-      }
-    });
-  }
-
-  private _enableOutsideTabIndex(): void {
-    const allElements = document.querySelectorAll(
-      '[data-original-tabindex]'
-    ) as NodeListOf<HTMLElement>;
-    
-    allElements.forEach((el: HTMLElement) => {
-      const originalTabIndex = el.getAttribute('data-original-tabindex');
-      
-      if (originalTabIndex === null) {
-        el.removeAttribute('tabindex');
-      } else if (originalTabIndex === '0') {
-        el.removeAttribute('tabindex');
-      } else {
-        el.setAttribute('tabindex', originalTabIndex);
-      }
-      
-      el.removeAttribute('data-original-tabindex');
-    });
-  }
-
-  private _handleKeyDown(event: KeyboardEvent): void {
-    switch (event.key) {
-      case 'Tab':
-        this._handleTabKey(event);
-        break;
-      case 'Escape':
-        if (this._options.escapeDeactivates) {
-          event.preventDefault();
-          AppEventBus.emit('popover-close');
-          this.deactivate();
-        }
-        break;
-    }
-  }
-
-  private _handleTabKey(event: KeyboardEvent): void {
-    if (!this._focusableElements || this._focusableElements.length === 0) return;
-    
-    if (event.shiftKey) {
-      if (document.activeElement === this._firstFocusableElement) {
-        event.preventDefault();
-        this._lastFocusableElement?.focus();
-      }
-    } else {
-      if (document.activeElement === this._lastFocusableElement) {
-        event.preventDefault();
-        this._firstFocusableElement?.focus();
-      }
-    }
-  }
-
-  private _handleOutsideClick(event: MouseEvent): void {
-    if (!this._options.clickOutsideDeactivates) return;
-    this._overlay.addEventListener('click', (e: MouseEvent) => {
-      if (e.target === this._overlay){ 
-        event.stopPropagation();
-        AppEventBus.emit('popover-close');
-        this.deactivate();;
-      }
-    });
-  }
-}