@blackcube/aurelia2-bleet 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "@blackcube/aurelia2-bleet",
+    "version": "1.0.0",
+    "description": "Blackcube Aurelia 2 components for Bleet",
+    "author": "Gaultier Philippe <philippe@blackcube.io",
+    "license": "BSD-3-Clause",
+    "type": "module",
+    "module": "./dist/index.es.js",
+    "main": "./dist/index.js",
+    "types": "./dist/types/index.d.ts",
+    "devDependencies": {
+        "@rollup/plugin-typescript": "^12.3.0",
+        "@types/node": "^22.10.2",
+        "rimraf": "^6.1.2",
+        "rollup": "^4.53.3",
+        "socket.io-client": "^4.8.1",
+        "tslib": "^2.8.1",
+        "typescript": "^5.9.3"
+    },
+    "peerDependencies": {
+        "aurelia": "^2.0.0-rc.0",
+        "quill": "^2.0.3",
+        "resumablejs": "^1.1.0",
+        "socket.io-client": "^4.8.1"
+    },
+    "peerDependenciesMeta": {
+        "resumablejs": {
+            "optional": false
+        },
+        "quill": {
+            "optional": false
+        },
+        "socket.io-client": {
+            "optional": true
+        }
+    },
+    "scripts": {
+        "clean": "rimraf ./dist",
+        "build": "rollup -c",
+        "prebuild": "npm run clean && tsc --emitDeclarationOnly",
+        "build:watch": "rollup -cw"
+    }
+}

package/resource.d.ts

@@ -0,0 +1,22 @@
+declare module '*.html' {
+    import { IContainer, PartialBindableDefinition } from 'aurelia';
+    export const name: string;
+    export const template: string;
+    export default template;
+    export const dependencies: string[];
+    export const containerless: boolean | undefined;
+    export const bindables: Record<string, PartialBindableDefinition>;
+    export const shadowOptions: { mode: 'open' | 'closed' } | undefined;
+    export function register(container: IContainer);
+}
+
+declare module '*.css';
+declare module '*.scss';
+
+// Extend resumablejs types - missing properties in official .d.ts
+declare module Resumable {
+    interface ConfigurationHash {
+        permanentErrors?: number[];
+        maxChunkRetries?: number;
+    }
+}

package/src/attributes/ajaxify-trigger.ts

@@ -0,0 +1,218 @@
+import {bindable, customAttribute, IEventAggregator, ILogger, INode, resolve} from "aurelia";
+import {Channels, ToasterAction, UiColor} from '../enums/event-aggregator';
+import {IAjaxifyResponse, IToast, IToaster} from '../interfaces/event-aggregator';
+import {IApiService} from '../services/api-service';
+
+/**
+ * Generic AJAX trigger attribute for elements.
+ * Placed on the element that triggers the AJAX call.
+ * Looks up parent form with closest() to get URL/verb if not specified.
+ * Sends only the inputs contained within this.element.
+ * Pessimistic UI: state changes only on server response.
+ *
+ * Bindables:
+ *   - url (primary): URL to call. Falls back to closest form.action.
+ *   - verb: HTTP method. Falls back to closest form.method or 'POST'.
+ *   - event: DOM event to listen for (default: 'click')
+ *   - collect: If set, also collects inputs with data-ajaxify="{collect}" from closest form
+ */
+@customAttribute({ name: 'bleet-ajaxify-trigger', defaultProperty: 'url' })
+export class BleetAjaxifyTriggerCustomAttribute {
+
+    @bindable url: string = '';
+    @bindable() verb: string = '';
+    @bindable() event: string = 'click';
+    @bindable() id: string = '';
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-ajaxify-trigger'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+        private readonly apiService: IApiService = resolve(IApiService),
+    ) {
+        this.logger.trace('constructor');
+    }
+
+    public attached(): void {
+        this.logger.trace('attached', { url: this.url, verb: this.verb, event: this.event });
+        this.element.addEventListener(this.event, this.onTrigger);
+    }
+
+    public detached(): void {
+        this.logger.trace('detached');
+        this.element.removeEventListener(this.event, this.onTrigger);
+    }
+
+    private onTrigger = (event: Event): void => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.logger.trace('onTrigger', event);
+
+        const form = this.element.closest('form');
+        const url = this.resolveUrl(form);
+        const verb = this.resolveVerb(form);
+
+        if (!url) {
+            this.logger.warn('No URL found for ajaxify-trigger');
+            return;
+        }
+
+        this.logger.debug('onTrigger', { url, verb });
+
+        // Build FormData from inputs INSIDE this.element only
+        const formData = this.buildFormData(event);
+
+        this.apiService
+            .url(url)
+            .fromMultipart(formData)
+            .request<IAjaxifyResponse>(verb)
+            .then((response) => {
+                this.logger.debug('response', response.body);
+
+                // Update element from response HTML
+                if (response.body.element) {
+                    this.updateElement(response.body.element);
+                }
+
+                // Show toast if provided
+                if (response.body.toast) {
+                    this.ea.publish(Channels.Toaster, <IToaster>{
+                        action: ToasterAction.Add,
+                        toast: response.body.toast
+                    });
+                }
+
+                // Trigger ajaxify refresh if provided
+                if (response.body.ajaxify) {
+                    this.ea.publish(Channels.Ajaxify, response.body.ajaxify);
+                }
+            })
+            .catch((error) => {
+                this.logger.error('AJAX request failed', error);
+
+                this.ea.publish(Channels.Toaster, <IToaster>{
+                    action: ToasterAction.Add,
+                    toast: {
+                        color: UiColor.Danger,
+                        title: 'Erreur',
+                        content: 'Une erreur est survenue.',
+                        duration: 5000,
+                    } as IToast
+                });
+            });
+    };
+
+    private buildFormData(event: Event): FormData {
+        const formData = new FormData();
+
+        // Get all inputs inside this.element
+        const inputs = this.element.querySelectorAll('input, select, textarea');
+        this.appendInputsToFormData(formData, inputs);
+
+        // Capture submitter button name/value (for submit events)
+        if (event instanceof SubmitEvent && event.submitter) {
+            const submitter = event.submitter as HTMLButtonElement | HTMLInputElement;
+            if (submitter.name) {
+                formData.append(submitter.name, submitter.value || '');
+            }
+        }
+
+        // Also get CSRF token from parent form if exists
+        const form = this.element.closest('form');
+        if (form) {
+            const csrfInput = form.querySelector('input[name="_csrf"]') as HTMLInputElement | null;
+            if (csrfInput) {
+                formData.append('_csrf', csrfInput.value);
+            }
+
+            // If id is set, also collect inputs with data-ajaxify="{id}" from the form
+            if (this.id) {
+                const ajaxifyInputs = form.querySelectorAll(`[data-ajaxify="${this.id}"]`);
+                this.appendInputsToFormData(formData, ajaxifyInputs);
+            }
+        }
+
+        return formData;
+    }
+
+    private appendInputsToFormData(formData: FormData, inputs: NodeListOf<Element>): void {
+        for (const input of Array.from(inputs)) {
+            if (input instanceof HTMLInputElement) {
+                if (input.type === 'checkbox' || input.type === 'radio') {
+                    if (input.checked && input.name) {
+                        formData.append(input.name, input.value || 'on');
+                    }
+                } else if (input.name) {
+                    formData.append(input.name, input.value);
+                }
+            } else if (input instanceof HTMLSelectElement && input.name) {
+                formData.append(input.name, input.value);
+            } else if (input instanceof HTMLTextAreaElement && input.name) {
+                formData.append(input.name, input.value);
+            }
+        }
+    }
+
+    private resolveUrl(form: HTMLFormElement | null): string {
+        if (this.url) {
+            return this.url;
+        }
+        if (form) {
+            return form.action || '';
+        }
+        return '';
+    }
+
+    private resolveVerb(form: HTMLFormElement | null): string {
+        if (this.verb) {
+            return this.verb;
+        }
+        if (form) {
+            return form.method || 'POST';
+        }
+        return 'POST';
+    }
+
+    private updateElement(html: string): void {
+        const template = document.createElement('template');
+        template.innerHTML = html.trim();
+        const newElement = template.content.firstElementChild;
+
+        if (newElement) {
+            this.syncElement(this.element, newElement);
+        }
+    }
+
+    private syncElement(current: Element, incoming: Element): void {
+        // Sync attributes of current element
+        for (const attr of Array.from(incoming.attributes)) {
+            current.setAttribute(attr.name, attr.value);
+        }
+
+        // Remove attributes that don't exist in incoming
+        for (const attr of Array.from(current.attributes)) {
+            if (!incoming.hasAttribute(attr.name)) {
+                current.removeAttribute(attr.name);
+            }
+        }
+
+        // Sync input values for form elements
+        if (current instanceof HTMLInputElement && incoming instanceof HTMLInputElement) {
+            if (current.type === 'checkbox' || current.type === 'radio') {
+                current.checked = incoming.checked;
+            } else {
+                current.value = incoming.value;
+            }
+        }
+
+        // Sync children recursively
+        const currentChildren = Array.from(current.children);
+        const incomingChildren = Array.from(incoming.children);
+
+        for (let i = 0; i < incomingChildren.length; i++) {
+            if (i < currentChildren.length) {
+                this.syncElement(currentChildren[i], incomingChildren[i]);
+            }
+        }
+    }
+}

package/src/attributes/alert.ts

@@ -0,0 +1,55 @@
+import {customAttribute, ILogger, INode, IPlatform, resolve} from "aurelia";
+import {ITransitionService} from '../services/transition-service';
+
+
+@customAttribute('bleet-alert')
+export class BleetAlertCustomAttribute {
+
+    private closeButton?: HTMLButtonElement;
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-alert'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly platform: IPlatform = resolve(IPlatform),
+        private readonly transitionService: ITransitionService = resolve(ITransitionService),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+        this.closeButton = this.element.querySelector('[data-alert=close]') as HTMLButtonElement;
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.closeButton?.addEventListener('click', this.onClose);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.closeButton?.removeEventListener('click', this.onClose);
+    }
+    private onClose = (event: Event) => {
+        this.logger.trace('onClose', event);
+        event.preventDefault();
+        this.transitionService.run(this.element, (element: HTMLElement) => {
+            const currentHeight = element.scrollHeight;
+            element.style.height = currentHeight + 'px';
+            // Force reflow
+            element.offsetHeight;
+            element.style.height = '0px';
+            element.classList.remove('opacity-100');
+            element.classList.add('opacity-0');
+        }, (element: HTMLElement) => {
+
+            element.classList.add('hidden');
+            this.platform.requestAnimationFrame(() => {
+                element.style.height = '';
+                element.remove();
+            });
+        });
+    }
+}

package/src/attributes/badge.ts

@@ -0,0 +1,39 @@
+import {bindable, customAttribute, IEventAggregator, ILogger, INode, resolve} from "aurelia";
+import {BadgeAction, Channels} from '../enums/event-aggregator';
+import {IBadge} from '../interfaces/event-aggregator';
+
+@customAttribute({ name: 'bleet-badge', defaultProperty: 'id' })
+export class BleetBadgeCustomAttribute
+{
+    private closeButton?: HTMLElement;
+    @bindable id: string = '';
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-badge'),
+        private readonly ea:IEventAggregator = resolve(IEventAggregator),
+        private readonly element: HTMLButtonElement = resolve(INode) as HTMLButtonElement,
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.closeButton = this.element.querySelector('[data-badge=remove]') ?? undefined;
+        this.closeButton?.addEventListener('click', this.onClickRemove);
+
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.closeButton?.removeEventListener('click', this.onClickRemove);
+    }
+
+    private onClickRemove = (event: MouseEvent) => {
+        this.logger.trace('onClickRemove', event);
+        event.preventDefault();
+        this.ea.publish(Channels.Badge, <IBadge>{action: BadgeAction.Remove, id: this.id});
+        this.element.remove();
+    }
+
+}

package/src/attributes/burger.ts

@@ -0,0 +1,36 @@
+import {customAttribute, IEventAggregator, ILogger, INode, resolve} from "aurelia";
+import {Channels, MenuAction} from '../enums/event-aggregator';
+import {IMenu} from '../interfaces/event-aggregator';
+
+@customAttribute('bleet-burger')
+export class BleetBurgerCustomAttribute
+{
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-burger'),
+        private readonly ea:IEventAggregator = resolve(IEventAggregator),
+        private readonly element: HTMLButtonElement = resolve(INode) as HTMLButtonElement,
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.element.addEventListener('click', this.onClickButton);
+
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.element.removeEventListener('click', this.onClickButton);
+    }
+
+    private onClickButton = (event: MouseEvent) => {
+        this.logger.trace('onClickButton', event);
+        event.preventDefault();
+        this.ea.publish(Channels.Menu, <IMenu>{action: MenuAction.Open});
+    }
+
+}

package/src/attributes/drawer-trigger.ts

@@ -0,0 +1,53 @@
+import {bindable, customAttribute, IEventAggregator, ILogger, INode, resolve} from "aurelia";
+import {Channels, DrawerAction} from '../enums/event-aggregator';
+import {IDrawer} from '../interfaces/event-aggregator';
+
+@customAttribute({ name: 'bleet-drawer-trigger', defaultProperty: 'id' })
+export class BleetDrawerTriggerCustomAttribute {
+
+    @bindable id: string = '';
+    @bindable() url: string = '';
+    @bindable() color: string = 'primary';
+
+    public constructor(
+        private readonly logger: ILogger = resolve(ILogger).scopeTo('bleet-drawer-trigger'),
+        private readonly element: HTMLElement = resolve(INode) as HTMLElement,
+        private readonly ea: IEventAggregator = resolve(IEventAggregator),
+    ) {
+        this.logger.trace('constructor')
+    }
+
+    public attaching()
+    {
+        this.logger.trace('attaching');
+    }
+
+    public attached()
+    {
+        this.logger.trace('attached');
+        this.element.addEventListener('click', this.onClick);
+    }
+
+    public detached()
+    {
+        this.logger.trace('detached');
+        this.element.removeEventListener('click', this.onClick);
+    }
+    public dispose()
+    {
+        this.logger.trace('dispose');
+    }
+
+    private onClick = (event: Event): void => {
+        this.logger.trace('onClick', event);
+        event.preventDefault();
+
+        this.ea.publish(Channels.Drawer, <IDrawer>{
+            action: DrawerAction.Toggle,
+            id: this.id,
+            url: this.url,
+            color: this.color,
+        });
+    };
+
+}