stimulus-library 0.7.5 → 0.9.0

package/dist/controllers/tables/table_sort_controller.js

@@ -0,0 +1,97 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useCollectionEventListener } from "../../mixins/use_event_listener";
+export class TableSortController extends BaseController {
+    constructor() {
+        super(...arguments);
+        this._lastIndex = null;
+        this._reverse = false;
+    }
+    get _tableHead() {
+        let head = this.el.tHead;
+        if (head == null) {
+            throw new Error('Expected table to have a <thead> element.');
+        }
+        return head;
+    }
+    get _tableHeaders() {
+        let rows = this._tableHead.rows;
+        if (rows.length == 0) {
+            throw new Error('Expected table to have a <thead> element with at least one row.');
+        }
+        return Array.from(rows[0].cells);
+    }
+    get _tableBody() {
+        return this.el.tBodies[0];
+    }
+    get _tableRows() {
+        return Array.from(this._tableBody.rows);
+    }
+    connect() {
+        requestAnimationFrame(() => {
+            useCollectionEventListener(this, this._tableHeaders, "click", this.sort);
+            if (this.hasStartSortValue) {
+                this._sortByColumn(this.startSortValue);
+            }
+        });
+    }
+    sort(event) {
+        event.preventDefault();
+        let headerCell = event.target;
+        let headerCellIndex = this._indexOfHeaderCell(headerCell);
+        if (headerCell.dataset.sortable == "false") {
+            return;
+        }
+        if (headerCell.dataset.sort == "asc") {
+            this._reverse = true;
+            this._otherHeaderCells(headerCell).forEach(cell => delete cell.dataset.sort);
+            headerCell.dataset.sort = "desc";
+            this._sortByColumn(headerCellIndex);
+        }
+        else {
+            this._reverse = false;
+            this._otherHeaderCells(headerCell).forEach(cell => delete cell.dataset.sort);
+            headerCell.dataset.sort = "asc";
+            this._sortByColumn(headerCellIndex);
+        }
+    }
+    _indexOfHeaderCell(cell) {
+        return this._tableHeaders.indexOf(cell);
+    }
+    _otherHeaderCells(cell) {
+        return Array.from(this._tableHeaders).filter(otherCell => otherCell != cell);
+    }
+    _sortByColumn(index) {
+        let frag = document.createDocumentFragment();
+        let rows = this._tableRows;
+        let newRows = rows.sort((row, otherRow) => {
+            var _a, _b;
+            let cells = Array.from(row.cells);
+            let otherCells = Array.from(otherRow.cells);
+            // TODO: Handle colspans?
+            let x = ((_a = cells[index]) === null || _a === void 0 ? void 0 : _a.innerText) || "";
+            let y = ((_b = otherCells[index]) === null || _b === void 0 ? void 0 : _b.innerText) || "";
+            let sortVal = x.localeCompare(y, "en", { sensitivity: "base", numeric: true, caseFirst: "upper" });
+            if (row.dataset.sortTop || otherRow.dataset.sortBottom) {
+                if (row.dataset.sortTop && otherRow.dataset.sortTop) {
+                    return sortVal;
+                }
+                return -1;
+            }
+            if (row.dataset.sortBottom || otherRow.dataset.sortTop) {
+                if (row.dataset.sortBottom && otherRow.dataset.sortBottom) {
+                    return sortVal;
+                }
+                return 1;
+            }
+            if (this._reverse) {
+                return sortVal > 0 ? -1 : 1;
+            }
+            return sortVal;
+        });
+        newRows.forEach(row => frag.appendChild(row));
+        this._tableBody.innerHTML = "";
+        this._tableBody.appendChild(frag);
+        this._lastIndex = index;
+    }
+}
+TableSortController.values = { startSort: Number };

package/dist/controllers/tables/table_truncate_controller.js

@@ -0,0 +1,81 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useEventListener } from "../../mixins/use_event_listener";
+import { useMutationObserver } from "../../mixins/use_mutation_observer";
+export class TableTruncateController extends BaseController {
+    get _truncated() {
+        return this.hasTruncatedValue ? this.truncatedValue : false;
+    }
+    set _truncated(value) {
+        this.truncatedValue = value;
+    }
+    get _tableBody() {
+        return this.el.tBodies[0];
+    }
+    get _tableRows() {
+        return Array.from(this._tableBody.rows);
+    }
+    get _limit() {
+        return this.hasLimitValue ? this.limitValue : 20;
+    }
+    connect() {
+        useMutationObserver(this, this._tableBody, this.mutate, { childList: true });
+        requestAnimationFrame(() => {
+            this.truncate();
+            useEventListener(this, this.showMoreTarget, "click", this.expand);
+        });
+    }
+    truncate(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._truncated = true;
+        if (this._tableRows.length >= this._limit) {
+            this._tableRows.slice(this._limit).forEach((el) => {
+                if (el !== this.showMoreTarget) {
+                    this._hideElement(el);
+                }
+            });
+            this._showElement(this.showMoreTarget);
+        }
+        else {
+            this._hideElement(this.showMoreTarget);
+        }
+    }
+    expand(event) {
+        this._truncated = false;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._tableRows.slice(this._limit).forEach((el) => {
+            if (el !== this.showMoreTarget) {
+                this._showElement(el);
+            }
+        });
+        this._hideElement(this.showMoreTarget);
+    }
+    mutate(entries) {
+        if (this._truncated) {
+            this._reTruncate();
+        }
+    }
+    _showElement(el) {
+        el.style.display = "";
+    }
+    _hideElement(el) {
+        el.style.display = "none";
+    }
+    _reTruncate() {
+        this._tableRows.slice(0, this._limit).forEach((el) => {
+            if (el !== this.showMoreTarget) {
+                this._showElement(el);
+            }
+        });
+        this._tableRows.slice(this._limit).forEach((el) => {
+            if (el !== this.showMoreTarget) {
+                this._hideElement(el);
+            }
+        });
+        this._showElement(this.showMoreTarget);
+    }
+}
+TableTruncateController.targets = ["showMore"];
+TableTruncateController.values = {
+    limit: Number,
+    truncated: Boolean,
+};

package/dist/controllers/teleport_controller.js

@@ -0,0 +1,48 @@
+import { EphemeralController } from "../utilities/ephemeral_controller";
+export class TeleportController extends EphemeralController {
+    connect() {
+        if (!this.hasInsertValue) {
+            throw new Error("`insert` value was not specified");
+        }
+        requestAnimationFrame(() => {
+            if (this.hasImmediateValue && this.immediateValue) {
+                this.execute();
+            }
+        });
+    }
+    execute(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        let element = this.el;
+        let destination = document.querySelector(this.targetValue);
+        if (destination == null) {
+            this.dispatchEvent(element, "teleport:error");
+            return;
+        }
+        let copy = element.cloneNode(true);
+        this.cleanup(copy);
+        switch (this.insertValue) {
+            case "beforebegin":
+            case "beforeend":
+            case "afterend":
+            case "afterbegin":
+                destination.insertAdjacentHTML(this.insertValue, copy.outerHTML);
+                break;
+            case "replaceOuter":
+                destination.outerHTML = copy.outerHTML;
+                break;
+            case "replaceInner":
+                destination.innerHTML = copy.outerHTML;
+                break;
+            case "prepend":
+                destination.insertAdjacentHTML("afterbegin", copy.outerHTML);
+                break;
+            case "append":
+                destination.insertAdjacentHTML("beforeend", copy.outerHTML);
+                break;
+            default:
+                throw new Error("`insert` value was not specified");
+        }
+        element.remove();
+    }
+}
+TeleportController.values = { target: String, insert: String, immediate: Boolean };

package/dist/controllers/temporary_state_controller.js

@@ -0,0 +1,65 @@
+import camelCase from "lodash-es/camelCase";
+import _get from "lodash-es/get";
+import _set from "lodash-es/set";
+import { EphemeralController } from "../utilities/ephemeral_controller";
+import { useTimeout } from "../mixins/use_timeout";
+import "../polyfills/string.replaceAll";
+export class TemporaryStateController extends EphemeralController {
+    constructor() {
+        super(...arguments);
+        this._previousState = {};
+    }
+    get _value() {
+        if (this.hasValueValue) {
+            return this.valueValue;
+        }
+        throw new Error("Expected `valueValue` to be present");
+    }
+    get _attribute() {
+        if (this.hasAttributeValue) {
+            return this.attributeValue;
+        }
+        throw new Error("Expected `attributeValue` to be present");
+    }
+    get _seconds() {
+        if (this.hasSecondsValue) {
+            return this.secondsValue * 1000;
+        }
+        throw new Error("Expected `secondsValue` to be present");
+    }
+    connect() {
+        this.setState();
+        useTimeout(this, this.removeState, this._seconds);
+    }
+    disconnect() {
+        this.removeState();
+    }
+    setState() {
+        this._previousState[this._attribute] = _get(this.el, this._attribute);
+        _set(this.el, this._attribute, this.valueValue);
+    }
+    removeState() {
+        _set(this.el, this._attribute, this._previousState[this._attribute]);
+    }
+}
+TemporaryStateController.values = {
+    attribute: String,
+    seconds: Number,
+    value: String,
+};
+export function applyTemporaryState(element, propertyString, value, seconds, controllerIdentifier = "temporary-state") {
+    var _a;
+    if (!element.dataset.controller || !((_a = element.dataset.controller) === null || _a === void 0 ? void 0 : _a.includes(controllerIdentifier))) {
+        let controllerName = (element.dataset.controller || '' + ` ${controllerIdentifier} `).trim();
+        // @ts-ignore
+        controllerName = controllerName.replaceAll('  ', ' ');
+        element.dataset.controller = controllerName;
+    }
+    // @ts-ignore
+    element[camelCase(`${controllerIdentifier}-attribute-value`)] = propertyString;
+    // @ts-ignore
+    element[camelCase(`${controllerIdentifier}-seconds-value`)] = seconds.toString();
+}
+export function applyTemporaryClass(element, value, seconds) {
+    applyTemporaryState(element, 'className', value, seconds);
+}

package/dist/controllers/toggle_class_controller.js

@@ -0,0 +1,115 @@
+import { BaseController } from "../utilities/base_controller";
+import { useClickOutside } from "../mixins/use_click_outside";
+import { useHover } from "../mixins/use_hover";
+export class ToggleClassController extends BaseController {
+    connect() {
+        if (!this.hasClassValue) {
+            throw new Error("data-toggle-class-class-value must not be empty");
+        }
+        if (this.hasMouseEnterValue || this.hasMouseLeaveValue) {
+            useHover(this, this.el, this.mouseEnter, this.mouseLeave);
+        }
+        if (this.hasClickAwayValue && this.clickAwayValue) {
+            useClickOutside(this, this.el, this.clickOutside);
+        }
+        requestAnimationFrame(() => {
+            if (this.hasInitialValue) {
+                if (this.initialValue === "on") {
+                    this.toggleTargets.forEach((target) => this._elementOn(target));
+                }
+                else {
+                    this.toggleTargets.forEach((target) => this._elementOff(target));
+                }
+            }
+        });
+    }
+    clickOutside() {
+        this.toggleTargets.forEach((target) => {
+            if (this._elementWasToggled(target)) {
+                this._elementToggleStatus(target);
+                this._elementToggle(target);
+            }
+        });
+    }
+    mouseEnter() {
+        if (this.hasMouseEnterValue) {
+            switch (this.mouseEnterValue) {
+                case "on":
+                    this.on();
+                    break;
+                case "off":
+                    this.off();
+                    break;
+                case "toggle":
+                    this.toggle();
+                    break;
+            }
+        }
+        return {};
+    }
+    mouseLeave() {
+        if (this.hasMouseLeaveValue) {
+            switch (this.mouseLeaveValue) {
+                case "on":
+                    this.on();
+                    break;
+                case "off":
+                    this.off();
+                    break;
+                case "toggle":
+                    this.toggle();
+                    break;
+            }
+        }
+        return {};
+    }
+    on(event) {
+        this.toggleTargets.forEach((target) => {
+            this._elementToggleStatus(target);
+            this._elementOn(target);
+        });
+    }
+    off(event) {
+        this.toggleTargets.forEach((target) => {
+            this._elementToggleStatus(target);
+            this._elementOff(target);
+        });
+    }
+    toggle(event) {
+        this.toggleTargets.forEach((target) => {
+            this._elementToggleStatus(target);
+            this._elementToggle(target);
+        });
+    }
+    _elementWasToggled(el) {
+        return el.dataset.toggled == "true";
+    }
+    _elementToggleStatus(el) {
+        if (this._elementWasToggled(el)) {
+            delete el.dataset.toggled;
+        }
+        else {
+            el.dataset.toggled = "true";
+        }
+    }
+    _elementToggle(el) {
+        let classes = this.classValue.split(" ");
+        classes.forEach((klass) => el.classList.toggle(klass));
+    }
+    _elementOn(el) {
+        let classes = this.classValue.split(" ");
+        classes.forEach((klass) => el.classList.toggle(klass, true));
+    }
+    _elementOff(el) {
+        let classes = this.classValue.split(" ");
+        classes.forEach((klass) => el.classList.toggle(klass, false));
+    }
+}
+ToggleClassController.targets = ["toggle"];
+ToggleClassController.values = {
+    class: String,
+    mouseEnter: String,
+    mouseLeave: String,
+    clickAway: Boolean,
+    initial: String,
+};

package/dist/controllers/trix_modifier_controller.js

@@ -0,0 +1,121 @@
+import { BaseController } from "../utilities/base_controller";
+import { useTrixModifiers } from "../mixins/use_trix_modifiers";
+export class TrixModifierController extends BaseController {
+    get enabledBehaviours() {
+        let enabled = (datasetProp) => datasetProp !== undefined && datasetProp !== 'false';
+        let behaviourIfEnabled = (datasetProp, trixInstallable) => enabled(datasetProp) ? [trixInstallable] : [];
+        return [
+            ...(behaviourIfEnabled(this.el.dataset.noBold, this.bold)),
+            ...(behaviourIfEnabled(this.el.dataset.noBulletList, this.bulletList)),
+            ...(behaviourIfEnabled(this.el.dataset.noCode, this.code)),
+            ...(behaviourIfEnabled(this.el.dataset.noHeading, this.heading)),
+            ...(behaviourIfEnabled(this.el.dataset.noItalic, this.italic)),
+            ...(behaviourIfEnabled(this.el.dataset.noStrikethrough, this.strikethrough)),
+            ...(behaviourIfEnabled(this.el.dataset.noLink, this.link)),
+            ...(behaviourIfEnabled(this.el.dataset.noIndents, this.indents)),
+            ...(behaviourIfEnabled(this.el.dataset.noNumberList, this.numberList)),
+            ...(behaviourIfEnabled(this.el.dataset.noQuote, this.quote)),
+            ...(behaviourIfEnabled(this.el.dataset.noFileUploads, this.fileUploads)),
+        ];
+    }
+    get bold() {
+        return this.formattingHandlers('.trix-button--icon-bold', 'bold');
+    }
+    get bulletList() {
+        return this.formattingHandlers('.trix-button--icon-bullet-list', 'bullet-list');
+    }
+    get code() {
+        return this.formattingHandlers('.trix-button--icon-code', 'code');
+    }
+    get heading() {
+        return this.formattingHandlers('.trix-button--icon-heading-1', 'heading');
+    }
+    get italic() {
+        return this.formattingHandlers('.trix-button--icon-italic', 'italic');
+    }
+    get strikethrough() {
+        return this.formattingHandlers('.trix-button--icon-strike', 'strike');
+    }
+    get link() {
+        return this.formattingHandlers('.trix-button--icon-link', 'href');
+    }
+    get indents() {
+        return this.simpleHideShowHandlers([
+            ".trix-button--icon-decrease-nesting-level, .trix-button--icon-increase-nesting-level",
+            ".trix-button--icon-decrease-nesting-level, .trix-button--icon-increase-nesting-level",
+        ].join(', '));
+    }
+    get numberList() {
+        return this.simpleHideShowHandlers('.trix-button--icon-number-list');
+    }
+    get quote() {
+        return this.simpleHideShowHandlers('.trix-button--icon-quote');
+    }
+    get fileUploads() {
+        let selector = '.trix-button-group.trix-button-group--file-tools';
+        let preventUploads = (e) => e === null || e === void 0 ? void 0 : e.preventDefault();
+        let self = this;
+        let element = this.el;
+        return {
+            install(elements) {
+                self.simpleHideShowHandlers(selector).install(elements);
+                self.el.addEventListener('trix-file-accept', preventUploads);
+            },
+            pasteEvent(event) {
+                let { dataTransfer, html } = event.paste;
+                let { editor } = element;
+                if (dataTransfer.files.length > 0 || html.includes('<img')) {
+                    alert('The content you pasted contains images and/or files. File uploads are not supported.');
+                    editor.undo();
+                }
+            },
+            uninstall(elements) {
+                self.simpleHideShowHandlers(selector).uninstall(elements);
+                self.el.removeEventListener('trix-file-accept', preventUploads);
+            },
+        };
+    }
+    connect() {
+        useTrixModifiers(this);
+    }
+    install(elements) {
+        this.enabledBehaviours.forEach(behaviour => behaviour.install(elements));
+    }
+    pasteEvent(event) {
+        this.enabledBehaviours.forEach(behaviour => behaviour.pasteEvent && behaviour.pasteEvent(event));
+    }
+    uninstall(elements) {
+        this.enabledBehaviours.forEach(behaviour => behaviour.uninstall(elements));
+    }
+    simpleHideShowHandlers(selector) {
+        return {
+            install: ({ toolbar }) => this.hideToolbarSelector(toolbar, selector),
+            uninstall: ({ toolbar }) => this.showToolbarSelector(toolbar, selector),
+        };
+    }
+    formattingHandlers(selector, trixAttribute) {
+        let element = this.el;
+        let { editor } = element;
+        return {
+            install: (elements) => {
+                this.simpleHideShowHandlers(selector).install(elements);
+            },
+            pasteEvent(pasteEvent) {
+                let { range } = pasteEvent.paste;
+                let prevRange = element.editor.getSelectedRange();
+                editor.setSelectedRange(range);
+                editor.deactivateAttribute(trixAttribute);
+                editor.setSelectedRange(prevRange);
+            },
+            uninstall: (elements) => {
+                this.simpleHideShowHandlers(selector).uninstall(elements);
+            },
+        };
+    }
+    showToolbarSelector(toolbar, selector) {
+        toolbar.querySelectorAll(selector).forEach(el => el.style.display = '');
+    }
+    hideToolbarSelector(toolbar, selector) {
+        toolbar.querySelectorAll(selector).forEach(el => el.style.display = 'none');
+    }
+}

package/dist/controllers/turbo_frame_rc_controller.js

@@ -0,0 +1,65 @@
+import { BaseController } from "../utilities/base_controller";
+import { isHTMLAnchorElement } from "../utilities/elements";
+import { isTurboFrame } from "../utilities/turbo";
+export class TurboFrameRCController extends BaseController {
+    toggle(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        let frame = this._getFrame();
+        let frameSrc = frame.src;
+        if (frameSrc == null || frameSrc !== this._getSrc()) {
+            this._setSrc();
+        }
+        else {
+            this._clear();
+        }
+    }
+    setSrc(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._setSrc();
+    }
+    clear(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._clear();
+    }
+    _setSrc() {
+        let frame = this._getFrame();
+        if (this.hasLoadingMessageValue) {
+            frame.innerHTML = this.loadingMessageValue;
+        }
+        frame.src = this._getSrc();
+    }
+    _clear() {
+        let frame = this._getFrame();
+        frame.src = "";
+        frame.innerHTML = "";
+    }
+    _getFrame() {
+        let frame = document.getElementById(`${this.frameIdValue}`);
+        if (frame == null) {
+            throw new Error(`Could not find frame with ID '${this.frameIdValue}'`);
+        }
+        if (!isTurboFrame(frame)) {
+            throw new Error(`Element targeted by ID '${this.frameIdValue}'`);
+        }
+        else {
+            return frame;
+        }
+    }
+    _getSrc() {
+        let element = this.el;
+        if (this.hasSrcValue) {
+            return this.srcValue;
+        }
+        else if (isHTMLAnchorElement(element)) {
+            return element.href;
+        }
+        else {
+            throw new Error("No link given to drive frame to");
+        }
+    }
+}
+TurboFrameRCController.values = {
+    frameId: String,
+    src: String,
+    loadingMessage: String,
+};

package/dist/controllers/turbo_frame_refresh_controller.js

@@ -0,0 +1,32 @@
+import { BaseController } from "../utilities/base_controller";
+import { isTurboFrame } from "../utilities/turbo";
+import { useTimeout } from "../mixins/use_timeout";
+// noinspection SillyAssignmentJS
+export class TurboFrameRefreshController extends BaseController {
+    get _poll() {
+        return this.hasPollValue ? this.pollValue : false;
+    }
+    connect() {
+        let element = this.el;
+        if (isTurboFrame(element)) {
+            if (!!element.src) {
+                throw new Error('The provided <turbo-frame> element has no `src` attribute.');
+            }
+        }
+        else {
+            throw new Error('Expected controller to be mounted on a <turbo-frame> element.');
+        }
+        if (this._poll) {
+            requestAnimationFrame(() => useTimeout(this, this.refresh, this.intervalValue));
+        }
+    }
+    refresh(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        let element = this.el;
+        element.src = element.src;
+    }
+}
+TurboFrameRefreshController.values = {
+    interval: Number,
+    poll: Boolean,
+};

package/dist/controllers/utility/alert_controller.js

@@ -0,0 +1,7 @@
+import { BaseController } from "../../utilities/base_controller";
+export class AlertController extends BaseController {
+    alert() {
+        alert(this.messageValue);
+    }
+}
+AlertController.values = { message: String };

package/dist/controllers/utility/fullscreen_controller.js

@@ -0,0 +1,10 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useFullscreen } from "../../mixins";
+export class FullscreenController extends BaseController {
+    connect() {
+        let { enter, exit, toggle } = useFullscreen(this);
+        this.enter = enter;
+        this.exit = exit;
+        this.toggle = toggle;
+    }
+}

package/dist/controllers/utility/{index.d.ts → index.js}

@@ -6,4 +6,3 @@ export * from './presence_controller';
 export * from './print_controller';
 export * from './timeout_controller';
 export * from './user_focus_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/utility/intersection_controller.js

@@ -0,0 +1,25 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useIntersection } from "../../mixins/use_intersection";
+import { dispatchEvent } from "../../utilities/events";
+export class IntersectionController extends BaseController {
+    get _threshold() {
+        if (this.hasThresholdValue) {
+            return this.thresholdValue.split(',').map(val => Number.parseFloat(val.trim())).filter(val => val >= 0 && val <= 1);
+        }
+        else {
+            return [0, 1];
+        }
+    }
+    connect() {
+        useIntersection(this, this.el, this.appear, this.disappear, { threshold: this._threshold });
+    }
+    appear(entry) {
+        dispatchEvent(this, this.el, "intersection:appear");
+    }
+    ;
+    disappear(entry) {
+        dispatchEvent(this, this.el, "intersection:disappear");
+    }
+    ;
+}
+IntersectionController.values = { threshold: String };