sbs-editable-bs5 1.0.0

package/src/Types/BaseType.ts

@@ -0,0 +1,301 @@
+import type Editable from '../editable.ts';
+import type BaseTypeButtons from '../Interfaces/BaseTypeButtons.ts';
+
+export default class BaseType {
+    context: Editable;
+    element: HTMLInputElement | null = null;
+    error: HTMLElement | null = null;
+    form: HTMLElement | null = null;
+    load: HTMLElement | null = null;
+    buttons: BaseTypeButtons = { success: null, cancel: null };
+
+    constructor(context: Editable) {
+        if (this.constructor === BaseType) {
+            throw new Error(
+                'BaseType is abstract and cannot be instantiated directly — create a subclass that implements create() (see InputType, SelectType, etc.).',
+            );
+        }
+        this.context = context;
+    }
+
+    create(): HTMLElement {
+        throw new Error(`${this.constructor.name} must implement create().`);
+    }
+
+    // Flags options that only make sense for a different type (e.g. `format` on a `text` field) —
+    // they're silently ignored otherwise, which is easy to miss. Override per-type as needed.
+    checkUnsupportedOptions(): void {
+        if (this.context.options.format !== undefined) {
+            console.error(
+                `${this.constructor.name} does not support the "format" option — it only applies to type: 'date'/'datetime'. It will be ignored.`,
+            );
+        }
+        if (this.context.options.displayFormat !== undefined) {
+            console.error(
+                `${this.constructor.name} does not support the "displayFormat" option — it only applies to type: 'date'/'datetime'. It will be ignored.`,
+            );
+        }
+        if (this.context.options.source !== undefined) {
+            console.error(
+                `${this.constructor.name} does not support the "source" option — it only applies to type: 'select'. It will be ignored.`,
+            );
+        }
+    }
+
+    createContainer(element: HTMLInputElement): HTMLDivElement {
+        const div = document.createElement(`div`);
+        this.element = element;
+        this.error = this.createContainerError();
+        this.form = this.createContainerForm();
+        this.load = this.createContainerLoad();
+        this.form.append(element, this.load);
+        this.buttons.success = null;
+        this.buttons.cancel = null;
+        if (this.context.options.showButtons) {
+            this.buttons.success = this.createButtonSuccess();
+            this.buttons.cancel = this.createButtonCancel();
+            this.form.append(this.buttons.success, this.buttons.cancel);
+        }
+
+        div.append(this.error, this.form);
+        return div;
+    }
+
+    createContainerError(): HTMLDivElement {
+        const div = document.createElement(`div`);
+        div.classList.add('editable-error', 'text-danger', 'fst-italic', 'mb-2', 'fw-bold');
+        div.setAttribute('role', 'alert');
+        div.hidden = true;
+        return div;
+    }
+
+    // Closes the widget and returns keyboard focus to the trigger — used for every
+    // explicit exit (cancel, Escape, successful save), but not for an outside-click
+    // dismissal, where focus should stay wherever the user actually clicked.
+    private closeAndFocus(): void {
+        this.context.modeElement.hide();
+        this.context.element.focus();
+    }
+
+    createContainerForm(): HTMLFormElement {
+        const form = document.createElement(`form`);
+        form.classList.add('editable-form', 'd-flex', 'align-items-start');
+        form.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.closeAndFocus();
+            }
+        });
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const newValue = this.getValue();
+            if (this.context.options.send && this.context.options.url && this.context.getValue() !== newValue) {
+                this.showLoad();
+                let msg: string | undefined;
+                try {
+                    const response = await this.ajax(newValue);
+                    if (response.ok) {
+                        msg = await this.context.success(response, newValue);
+                    } else {
+                        msg =
+                            (await this.context.error(response, newValue)) ||
+                            `${response.status} ${response.statusText}`;
+                    }
+                } catch (error) {
+                    console.error(error);
+                    if (!(error instanceof TypeError)) {
+                        throw error;
+                    }
+                    msg = error.message;
+                }
+
+                if (msg) {
+                    this.showError();
+                    this.setError(msg);
+                } else {
+                    this.setError('');
+                    this.hideError();
+                    this.context.setValue(this.getValue());
+                    this.closeAndFocus();
+                    this.initText();
+                }
+                this.hideLoad();
+            } else {
+                this.context.setValue(this.getValue());
+                this.closeAndFocus();
+                this.initText();
+            }
+            this.context.element.dispatchEvent(new CustomEvent('save', { detail: { Editable: this.context } }));
+        });
+        return form;
+    }
+
+    createContainerLoad(): HTMLDivElement {
+        const div = document.createElement(`div`);
+        div.classList.add('editable-load-overlay');
+        div.hidden = true;
+        const loader = document.createElement(`div`);
+        loader.classList.add('editable-loader');
+        div.append(loader);
+        return div;
+    }
+
+    createButton(): HTMLButtonElement {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.classList.add('btn', 'btn-sm');
+        return button;
+    }
+
+    createButtonSuccess(): HTMLButtonElement {
+        const btn_success = this.createButton();
+        btn_success.type = 'submit';
+        btn_success.classList.add('btn-success');
+        btn_success.setAttribute('aria-label', 'Save');
+        btn_success.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.485 1.929a1 1 0 0 1 .057 1.414l-7.5 8a1 1 0 0 1-1.45.036l-3.5-3.5a1 1 0 1 1 1.414-1.415L5.5 9.379l6.571-7.007a1 1 0 0 1 1.414-.043z"/></svg>`;
+        return btn_success;
+    }
+
+    createButtonCancel(): HTMLButtonElement {
+        const btn_cancel = this.createButton();
+        btn_cancel.classList.add('btn-danger');
+        btn_cancel.setAttribute('aria-label', 'Cancel');
+        btn_cancel.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z"/></svg>`;
+        btn_cancel.addEventListener('click', () => {
+            this.closeAndFocus();
+        });
+        return btn_cancel;
+    }
+
+    hideLoad(): void {
+        if (this.load) {
+            this.load.hidden = true;
+        }
+    }
+
+    showLoad(): void {
+        if (this.load) {
+            this.load.hidden = false;
+        }
+    }
+
+    async ajax(new_value: string): Promise<Response> {
+        const urlOption = this.context.options.url;
+        if (!urlOption) {
+            const err = new Error(
+                'ajax() was called without a `url` option configured. Set `url` (string or function) before calling save.',
+            );
+            console.error(err);
+            throw err;
+        }
+        const url = typeof urlOption === 'function' ? urlOption(this.context, new_value) : urlOption;
+
+        if (this.context.options.requestBuilder) {
+            const built = await this.context.options.requestBuilder(this.context, new_value, url);
+            return fetch(built.url, built.init);
+        }
+
+        const form = new FormData();
+        form.append(this.context.options.name ?? 'value', new_value);
+
+        const ajaxOptions = { ...this.context.options.ajaxOptions };
+        ajaxOptions.body = form;
+        return fetch(url, ajaxOptions);
+    }
+
+    async successResponse(_response: Response, _newValue: string): Promise<string | undefined> {
+        return undefined;
+    }
+
+    async errorResponse(_response: Response, _newValue: string): Promise<string | undefined> {
+        return undefined;
+    }
+
+    setError(errorMsg: string): void {
+        if (this.error) {
+            this.error.textContent = errorMsg;
+        }
+    }
+
+    showError(): void {
+        if (this.error) {
+            this.error.hidden = false;
+        }
+    }
+
+    hideError(): void {
+        if (this.error) {
+            this.error.hidden = true;
+        }
+    }
+
+    createElement(name: string): HTMLInputElement {
+        const element = <HTMLInputElement>document.createElement(name);
+        element.classList.add('form-control');
+        if (this.context.options.required) {
+            element.required = this.context.options.required;
+        }
+        this.applyAttributes(element);
+        if (!this.context.options.showButtons) {
+            element.addEventListener('change', () => {
+                if (this.form) {
+                    this.form.dispatchEvent(new Event('submit'));
+                }
+            });
+        }
+        this.add_focus(element);
+        return element;
+    }
+
+    private applyAttributes(element: HTMLInputElement): void {
+        const attrs = this.context.options.attributes || {};
+        const allowedAttributes = [
+            'step',
+            'min',
+            'max',
+            'minlength',
+            'maxlength',
+            'pattern',
+            'placeholder',
+            'required',
+            'readonly',
+            'disabled',
+            'autocomplete',
+            'autofocus',
+        ];
+        for (const [key, value] of Object.entries(attrs)) {
+            if (allowedAttributes.includes(key) && value !== undefined) {
+                element.setAttribute(key, String(value));
+            }
+        }
+    }
+
+    add_focus(element: HTMLInputElement): void {
+        this.context.element.addEventListener(
+            'shown',
+            () => {
+                element.focus();
+            },
+            { once: true },
+        );
+    }
+
+    initText(): boolean {
+        if (this.context.getValue() === '') {
+            this.context.element.textContent = this.context.options.emptyText || '';
+            return true;
+        } else {
+            const text = this.context.getValue();
+            this.context.element.textContent = this.context.options.render
+                ? this.context.options.render(text, this.context)
+                : text;
+            return false;
+        }
+    }
+
+    initOptions(): void {}
+
+    getValue(): string {
+        return this.element ? this.element.value : '';
+    }
+}

package/src/Types/DateTimeType.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+import DateType from './DateType.js';
+
+export default class DateTimeType extends DateType {
+    create() {
+        const input = this.createElement(`input`);
+        input.type = 'datetime-local';
+
+        return this.createContainer(input);
+    }
+
+    initOptions(): void {
+        const default_format = 'YYYY-MM-DDTHH:mm';
+        const format = this.context.get_opt('format', default_format) as string;
+        const displayFormat = this.context.get_opt('displayFormat', default_format) as string;
+        this.context.setValue(dayjs(this.context.getValue(), displayFormat).format(format));
+    }
+}

package/src/Types/DateType.ts

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import BaseType from './BaseType.js';
+
+dayjs.extend(customParseFormat);
+
+export default class DateType extends BaseType {
+    checkUnsupportedOptions(): void {
+        if (this.context.options.source !== undefined) {
+            console.error(
+                `${this.constructor.name} does not support the "source" option — it only applies to type: 'select'. It will be ignored.`,
+            );
+        }
+    }
+
+    create() {
+        const input = this.createElement(`input`);
+        input.type = 'date';
+
+        return this.createContainer(input);
+    }
+
+    initText(): boolean {
+        const value = this.context.getValue();
+        if (value === '') {
+            this.context.element.textContent = this.context.options.emptyText || '';
+            return true;
+        } else {
+            const text = dayjs(value, this.context.options.format).format(this.context.options.displayFormat);
+            this.context.element.textContent = this.context.options.render
+                ? this.context.options.render(text, this.context)
+                : text;
+            return false;
+        }
+    }
+
+    initOptions(): void {
+        const default_format = 'YYYY-MM-DD';
+        const format = this.context.get_opt('format', default_format) as string;
+        const displayFormat = this.context.get_opt('displayFormat', default_format) as string;
+        this.context.setValue(dayjs(this.context.getValue(), displayFormat).format(format));
+    }
+}

package/src/Types/InputType.ts

@@ -0,0 +1,12 @@
+import BaseType from './BaseType.js';
+
+export default class InputType extends BaseType {
+    create() {
+        const input = this.createElement(`input`);
+        const { options = {} } = this.context;
+
+        input.type = typeof options.type === 'string' ? options.type : 'text';
+
+        return this.createContainer(input);
+    }
+}

package/src/Types/SelectType.ts

@@ -0,0 +1,70 @@
+import BaseType from './BaseType.js';
+
+export default class SelectType extends BaseType {
+    checkUnsupportedOptions(): void {
+        if (this.context.options.format !== undefined) {
+            console.error(
+                `${this.constructor.name} does not support the "format" option — it only applies to type: 'date'/'datetime'. It will be ignored.`,
+            );
+        }
+        if (this.context.options.displayFormat !== undefined) {
+            console.error(
+                `${this.constructor.name} does not support the "displayFormat" option — it only applies to type: 'date'/'datetime'. It will be ignored.`,
+            );
+        }
+    }
+
+    create() {
+        const select = this.createElement(`select`);
+        if (this.context.options.source && Array.isArray(this.context.options.source)) {
+            this.context.options.source.forEach((item) => {
+                const opt = document.createElement(`option`);
+                opt.value = String(item.value);
+                opt.textContent = item.text;
+                select.append(opt);
+            });
+        }
+
+        return this.createContainer(select);
+    }
+
+    initText() {
+        this.context.element.textContent = this.context.options.emptyText || '';
+        if (
+            this.context.getValue() !== '' &&
+            this.context.options.source &&
+            Array.isArray(this.context.options.source) &&
+            this.context.options.source.length > 0
+        ) {
+            for (let i = 0; i < this.context.options.source.length; i++) {
+                const item = this.context.options.source[i];
+                if (String(item.value) === this.context.getValue()) {
+                    this.context.element.textContent = this.context.options.render
+                        ? this.context.options.render(item.text, this.context)
+                        : item.text;
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    initOptions() {
+        this.context.get_opt('source', []);
+        if (
+            this.context.options &&
+            typeof this.context.options.source === 'string' &&
+            this.context.options.source !== ''
+        ) {
+            try {
+                this.context.options.source = JSON.parse(this.context.options.source);
+            } catch (e) {
+                const el = this.context.element;
+                const identifier = el.id ? `#${el.id}` : `<${el.tagName.toLowerCase()}>`;
+                throw new Error(
+                    `Invalid JSON in "source" option/data-source attribute on ${identifier}: ${(e as Error).message}`,
+                );
+            }
+        }
+    }
+}

package/src/Types/TextAreaType.ts

@@ -0,0 +1,9 @@
+import BaseType from './BaseType.js';
+
+export default class TextAreaType extends BaseType {
+    create() {
+        const textarea = this.createElement(`textarea`);
+
+        return this.createContainer(textarea);
+    }
+}

package/src/editable.css

@@ -0,0 +1,136 @@
+.editable-element {
+    border-bottom: dashed 1px var(--bs-primary, #08c);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.editable-element-disabled {
+    border-bottom: none;
+    cursor: default;
+}
+
+.editable-element-empty {
+    font-style: italic;
+    color: var(--bs-danger, #d14);
+}
+
+.editable {
+    max-width: none;
+}
+
+.editable-form {
+    gap: 20px;
+}
+
+.editable-load-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bs-body-bg, #fff);
+}
+
+.editable-loader {
+    --editable-loader-color: var(--bs-body-color, #000);
+    font-size: 5px;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: load5 1.1s infinite ease;
+    transform: translateZ(0);
+}
+
+@keyframes load5 {
+    0%,
+    100% {
+        box-shadow:
+            0em -2.6em 0em 0em var(--editable-loader-color),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent);
+    }
+    12.5% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            1.8em -1.8em 0 0em var(--editable-loader-color),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent);
+    }
+    25% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            2.5em 0em 0 0em var(--editable-loader-color),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent);
+    }
+    37.5% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            1.75em 1.75em 0 0em var(--editable-loader-color),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent);
+    }
+    50% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            0em 2.5em 0 0em var(--editable-loader-color),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent);
+    }
+    62.5% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            -1.8em 1.8em 0 0em var(--editable-loader-color),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent);
+    }
+    75% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            -2.6em 0em 0 0em var(--editable-loader-color),
+            -1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent);
+    }
+    87.5% {
+        box-shadow:
+            0em -2.6em 0em 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.8em -1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            2.5em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            1.75em 1.75em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            0em 2.5em 0 0em color-mix(in srgb, var(--editable-loader-color) 20%, transparent),
+            -1.8em 1.8em 0 0em color-mix(in srgb, var(--editable-loader-color) 50%, transparent),
+            -2.6em 0em 0 0em color-mix(in srgb, var(--editable-loader-color) 70%, transparent),
+            -1.8em -1.8em 0 0em var(--editable-loader-color);
+    }
+}