sbs-editable-bs5 1.0.0

package/dist/src/editable.d.ts

@@ -0,0 +1,51 @@
+import { default as Options } from './Interfaces/Options.ts';
+import { default as BaseMode } from './Modes/BaseMode.ts';
+import { default as InlineMode } from './Modes/InlineMode.ts';
+import { default as PopupMode } from './Modes/PopupMode.ts';
+import { default as BaseType } from './Types/BaseType.ts';
+import { default as DateTimeType } from './Types/DateTimeType.ts';
+import { default as DateType } from './Types/DateType.ts';
+import { default as InputType } from './Types/InputType.ts';
+import { default as SelectType } from './Types/SelectType.ts';
+import { default as TextAreaType } from './Types/TextAreaType.ts';
+export type { Options };
+export default class Editable {
+    static BaseType: typeof BaseType;
+    static BaseMode: typeof BaseMode;
+    static InputType: typeof InputType;
+    static TextAreaType: typeof TextAreaType;
+    static SelectType: typeof SelectType;
+    static DateType: typeof DateType;
+    static DateTimeType: typeof DateTimeType;
+    static PopupMode: typeof PopupMode;
+    static InlineMode: typeof InlineMode;
+    static types: Map<string, typeof BaseType>;
+    static modes: Map<string, typeof BaseMode>;
+    static registerType(name: string, type: typeof BaseType): void;
+    static registerMode(name: string, mode: typeof BaseMode): void;
+    element: HTMLElement;
+    options: Options;
+    typeElement: BaseType;
+    modeElement: BaseMode;
+    private accessibilityAbortController;
+    constructor(element: HTMLElement, options?: Options);
+    private readOption;
+    private writeOption;
+    get_opt(name: string, default_value: unknown): unknown;
+    get_opt_object(name: string, default_value: unknown): void;
+    get_opt_bool(name: string, default_value: boolean): void;
+    init_options(): void;
+    init_text(): void;
+    init_style(): void;
+    init_accessibility(): void;
+    route_mode(): BaseMode;
+    route_type(): BaseType;
+    success(response: Response, newValue: string): Promise<string | undefined>;
+    error(response: Response, newValue: string): Promise<string | undefined>;
+    enable(): void;
+    disable(): void;
+    setValue(value: string): void;
+    getValue(): string;
+    getOption(name: string): unknown;
+    destroy(): void;
+}

package/dist/tests/accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/disabled.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/errors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/events.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/lifecycle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/public-api.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/render.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/request.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/save-flow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/types/attributes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/types/date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/types/select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "sbs-editable-bs5",
+    "description": "In-place editing with Bootstrap 5",
+    "author": "Konstantin Litvinov",
+    "license": "MIT",
+    "type": "module",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "main": "./dist/editable.js",
+    "types": "./dist/editable.d.ts",
+    "exports": {
+        "import": "./dist/editable.js",
+        "require": "./dist/editable.umd.cjs"
+    },
+    "peerDependencies": {
+        "bootstrap": "^5.3"
+    },
+    "dependencies": {
+        "dayjs": "^1.11.23"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.5.14",
+        "@types/bootstrap": "^5.2.11",
+        "@vitest/browser": "^5.0.1",
+        "@vitest/browser-playwright": "^5.0.1",
+        "playwright": "^1.63.0",
+        "typescript": "^5.9.3",
+        "vite": "^8.3.0",
+        "vite-plugin-dts": "^5.1.0",
+        "vite-plugin-lib-inject-css": "^2.2.2",
+        "vitest": "^5.0.1"
+    },
+    "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "prepublishOnly": "npm run build",
+        "preview": "vite preview",
+        "lint": "biome check .",
+        "lint:fix": "biome check --write .",
+        "test": "vitest run",
+        "test:watch": "vitest"
+    },
+    "version": "1.0.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/koftikes/sbs-editable-bs5.git"
+    },
+    "bugs": {
+        "url": "https://github.com/koftikes/sbs-editable-bs5/issues"
+    },
+    "homepage": "https://github.com/koftikes/sbs-editable-bs5#readme"
+}

package/src/Interfaces/BaseTypeButtons.ts

@@ -0,0 +1,4 @@
+export default interface BaseTypeButtons {
+    success: HTMLElement | null;
+    cancel: HTMLElement | null;
+}

package/src/Interfaces/Options.ts

@@ -0,0 +1,30 @@
+import type { Popover } from 'bootstrap';
+import type Editable from '../editable.ts';
+import type BaseType from '../Types/BaseType.ts';
+
+export default interface Options {
+    value?: string;
+    name?: string;
+    title?: string;
+    type?: BaseType | string;
+    ajaxOptions?: RequestInit;
+    send?: boolean;
+    mode?: 'popup' | 'inline';
+    emptyText?: string;
+    url?: string | ((context: Editable, newValue: string) => string) | null;
+    requestBuilder?: (
+        context: Editable,
+        newValue: string,
+        resolvedUrl: string,
+    ) => { url: string; init: RequestInit } | Promise<{ url: string; init: RequestInit }>;
+    required?: boolean;
+    showButtons?: boolean;
+    success?: (response: Response, newValue: string | number) => Promise<string | undefined>;
+    error?: (response: Response, newValue: string | number) => Promise<string | undefined>;
+    popoverOptions?: Popover.Options;
+    render?: (text: string, context: Editable) => string;
+    format?: string;
+    displayFormat?: string;
+    source?: Array<{ value: string | number; text: string }> | string;
+    attributes?: { [key: string]: string | number | boolean | undefined };
+}

package/src/Modes/BaseMode.ts

@@ -0,0 +1,57 @@
+import type Editable from '../editable.ts';
+
+export default class BaseMode {
+    context: Editable;
+
+    constructor(context: Editable) {
+        if (this.constructor === BaseMode) {
+            throw new Error(
+                'BaseMode is abstract and cannot be instantiated directly — create a subclass that implements init()/enable()/disable()/hide()/destroy() (see PopupMode, InlineMode).',
+            );
+        }
+        this.context = context;
+    }
+
+    event_show() {
+        this.context.typeElement.hideError();
+        if (!this.context.typeElement.element) {
+            throw new Error(
+                `${this.context.typeElement.constructor.name}.create() did not call createContainer() — the input element was never set.`,
+            );
+        }
+        this.context.typeElement.element.value = this.context.getValue();
+        this.context.element.dispatchEvent(new CustomEvent('show', { detail: { Editable: this.context } }));
+    }
+
+    event_shown() {
+        this.context.element.dispatchEvent(new CustomEvent('shown', { detail: { Editable: this.context } }));
+    }
+
+    event_hide() {
+        this.context.element.dispatchEvent(new CustomEvent('hide', { detail: { Editable: this.context } }));
+    }
+
+    event_hidden() {
+        this.context.element.dispatchEvent(new CustomEvent('hidden', { detail: { Editable: this.context } }));
+    }
+
+    init() {
+        throw new Error(`${this.constructor.name} must implement init().`);
+    }
+
+    enable() {
+        throw new Error(`${this.constructor.name} must implement enable().`);
+    }
+
+    disable() {
+        throw new Error(`${this.constructor.name} must implement disable().`);
+    }
+
+    hide() {
+        throw new Error(`${this.constructor.name} must implement hide().`);
+    }
+
+    destroy() {
+        throw new Error(`${this.constructor.name} must implement destroy().`);
+    }
+}

package/src/Modes/InlineMode.ts

@@ -0,0 +1,47 @@
+import BaseMode from './BaseMode.js';
+
+export default class InlineMode extends BaseMode {
+    private openHandler: (() => void) | null = null;
+    private disabled = false;
+
+    init() {
+        this.openHandler = () => {
+            if (!this.disabled) {
+                const item = this.context.typeElement.create();
+                this.event_show();
+                this.removeOpenHandler();
+                this.context.element.replaceChildren(item);
+                this.event_shown();
+            }
+        };
+        this.context.element.addEventListener('click', this.openHandler);
+    }
+
+    private removeOpenHandler(): void {
+        if (this.openHandler) {
+            this.context.element.removeEventListener('click', this.openHandler);
+            this.openHandler = null;
+        }
+    }
+
+    enable() {
+        this.disabled = false;
+    }
+
+    disable() {
+        this.disabled = true;
+    }
+
+    hide() {
+        this.event_hide();
+        this.context.element.textContent = this.context.getValue();
+        setTimeout(() => {
+            this.init();
+            this.event_hidden();
+        }, 100);
+    }
+
+    destroy(): void {
+        this.removeOpenHandler();
+    }
+}

package/src/Modes/PopupMode.ts

@@ -0,0 +1,107 @@
+import { Popover } from 'bootstrap';
+import BaseMode from './BaseMode.js';
+
+export default class PopupMode extends BaseMode {
+    popover: Popover | null = null;
+    private abortController: AbortController = new AbortController();
+
+    init() {
+        const options = {
+            container: 'body',
+            content: this.context.typeElement.create(),
+            html: true,
+            customClass: 'editable',
+            title: this.context.options.title,
+        };
+        this.popover = new Popover(this.context.element, Object.assign(options, this.context.options.popoverOptions));
+        const { signal } = this.abortController;
+        this.context.element.addEventListener(
+            'show.bs.popover',
+            () => {
+                this.event_show();
+            },
+            { signal },
+        );
+        this.context.element.addEventListener(
+            'inserted.bs.popover',
+            () => {
+                this.syncTheme();
+            },
+            { signal },
+        );
+        this.context.element.addEventListener(
+            'shown.bs.popover',
+            () => {
+                this.event_shown();
+            },
+            { signal },
+        );
+        this.context.element.addEventListener(
+            'hide.bs.popover',
+            () => {
+                this.event_hide();
+            },
+            { signal },
+        );
+        this.context.element.addEventListener(
+            'hidden.bs.popover',
+            () => {
+                this.event_hidden();
+            },
+            { signal },
+        );
+
+        document.addEventListener(
+            'click',
+            (e) => {
+                const target = <HTMLElement>e.target;
+                // @ts-expect-error — Popover.tip is an undocumented internal property
+                const tip = this.popover?.tip;
+                if ((this.popover && target === tip) || target === this.context.element) return;
+                let current = target.parentNode;
+                while (current) {
+                    if (current === tip) return;
+                    current = current.parentNode;
+                }
+                this.hide();
+            },
+            { signal },
+        );
+    }
+
+    // The tip is appended to <body> by default, outside any scoped data-bs-theme
+    // wrapper around the trigger — copy the nearest theme onto it explicitly so
+    // Bootstrap's CSS variables still resolve to the trigger's theme, not the page default.
+    private syncTheme(): void {
+        const themedAncestor = this.context.element.closest('[data-bs-theme]');
+        // @ts-expect-error — Popover.tip is an undocumented internal property
+        const tip = this.popover?.tip as HTMLElement | undefined;
+        if (tip && themedAncestor) {
+            tip.setAttribute('data-bs-theme', themedAncestor.getAttribute('data-bs-theme') ?? '');
+        }
+    }
+
+    enable(): void {
+        if (this.popover) {
+            this.popover.enable();
+        }
+    }
+
+    disable(): void {
+        if (this.popover) {
+            this.popover.disable();
+        }
+    }
+
+    hide(): void {
+        if (this.popover) {
+            this.popover.hide();
+        }
+    }
+
+    destroy(): void {
+        this.abortController.abort();
+        this.popover?.dispose();
+        this.popover = null;
+    }
+}