stimulus-library 0.7.3 → 0.8.0-beta

package/README.md

@@ -30,7 +30,7 @@ Then, to get started, import and register the controllers you want to use.
 *Please Note* as below, that when registering the name for the controller, you should use `kebab-case` and omit the `-controller` suffix.
 
 ```js
-import { Application } from "stimulus";
+import { Application } from "@hotwired/stimulus";
 import { AutoSubmitFormController } from "stimulus-library";
 
 const application = Application.start();

package/dist/controllers/ajax/async_block_controller.js

@@ -0,0 +1,30 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LoadBlockController } from "./load_block_controller";
+export class AsyncBlockController extends LoadBlockController {
+    get _errorMessage() {
+        return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
+    }
+    // This is a simple controller to load a block of content when the page loads.
+    // It should be used to give a quick initial response before calling out to an
+    // an AJAX endpoint to do some expensive work.
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.loadContent();
+        });
+    }
+}
+AsyncBlockController.targets = ["replace"];
+AsyncBlockController.values = {
+    endpoint: String,
+    errorMessage: String,
+    selector: String,
+    maxRetries: Number,
+};

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

@@ -2,4 +2,3 @@ export * from './async_block_controller';
 export * from './lazy_block_controller';
 export * from './load_block_controller';
 export * from './poll_block_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/ajax/lazy_block_controller.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LoadBlockController } from "./load_block_controller";
+import { useIntersection } from "../../mixins/use_intersection";
+export class LazyBlockController extends LoadBlockController {
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let element = this.el;
+            if ("IntersectionObserver" in window) {
+                let { observe, unobserve } = useIntersection(this, element, this.appear, null, { threshold: 0.3 });
+                this.observe = observe;
+                this.unobserve = unobserve;
+            }
+            else {
+                // Client doesn't support intersection observer, fallback to pre-loading
+                yield this.loadContent();
+            }
+        });
+    }
+    appear(entry) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (entry.target === this.el && entry.isIntersecting) {
+                yield this.loadContent();
+                if (this.unobserve) {
+                    this.unobserve();
+                }
+            }
+        });
+    }
+}

package/dist/controllers/ajax/load_block_controller.js

@@ -0,0 +1,63 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { BaseController } from "../../utilities/base_controller";
+import { fetchRetry } from "../../utilities/fetchRetry";
+export class LoadBlockController extends BaseController {
+    get _errorMessage() {
+        return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
+    }
+    get _maxRetries() {
+        return this.hasMaxRetriesValue ? this.maxRetriesValue : 1;
+    }
+    connect() {
+    }
+    loadContent(event = null) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            let self = this;
+            let el = this.hasReplaceTarget ? this.replaceTarget : this.el;
+            let failure = () => {
+                el.replaceWith(this._errorMessage);
+                self.dispatchEvent(el, "ajax:error");
+            };
+            try {
+                let response = yield fetchRetry(this._maxRetries, this.endpointValue);
+                if (!response.ok) {
+                    failure();
+                }
+                let text = yield response.text();
+                let newEl = document.createElement("div");
+                newEl.innerHTML = text;
+                if (this.hasSelectorValue) {
+                    let selectedContent = newEl.querySelectorAll(this.selectorValue);
+                    el.replaceWith(...selectedContent);
+                }
+                else {
+                    el.replaceWith(...newEl.children);
+                }
+                // Trigger event to show block has loaded
+                self.dispatchEvent(el, "ajax:success");
+            }
+            catch (e) {
+                failure();
+            }
+            finally {
+                self.dispatchEvent(el, "ajax:complete");
+            }
+        });
+    }
+}
+LoadBlockController.targets = ["replace"];
+LoadBlockController.values = {
+    endpoint: String,
+    errorMessage: String,
+    selector: String,
+    maxRetries: Number,
+};

package/dist/controllers/ajax/poll_block_controller.js

@@ -0,0 +1,35 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LoadBlockController } from "./load_block_controller";
+import { useInterval } from "../../mixins/use_interval";
+export class PollBlockController extends LoadBlockController {
+    connect() {
+        if (!this.hasSecondsValue) {
+            throw new Error("Required value `seconds` is missing");
+        }
+        requestAnimationFrame(() => {
+            this._timeout();
+            useInterval(this, this._timeout, this.secondsValue * 1000);
+        });
+    }
+    _timeout() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.loadContent();
+        });
+    }
+}
+PollBlockController.targets = ["replace"];
+PollBlockController.values = {
+    endpoint: String,
+    errorMessage: String,
+    selector: String,
+    maxRetries: Number,
+    seconds: Number,
+};

package/dist/controllers/anchor_spy_controller.js

@@ -0,0 +1,47 @@
+import { BaseController } from "../utilities/base_controller";
+import { useEventListener } from "../mixins/use_event_listener";
+import { installClassMethods } from "../mixins/install_class_methods";
+import "../polyfills/string.replaceAll";
+export class AnchorSpyController extends BaseController {
+    get defaultActiveClasses() {
+        return ["active"];
+    }
+    get defaultInactiveClasses() {
+        return ["inactive"];
+    }
+    get _key() {
+        // @ts-ignore
+        return this.keyValue.replaceAll('#', '');
+    }
+    get _anchor() {
+        return window.location.hash.substr(1);
+    }
+    set _anchor(value) {
+        window.location.hash = value;
+    }
+    connect() {
+        installClassMethods(this);
+        requestAnimationFrame(() => {
+            this._checkAnchor();
+            useEventListener(this, window, 'hashchange', this._checkAnchor);
+        });
+    }
+    write(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._anchor = this._key;
+    }
+    _checkAnchor() {
+        if (this._key === this._anchor) {
+            this.dispatchEvent(this.el, "anchor-spy:active");
+            this.addActiveClasses(this.el);
+            this.removeInactiveClasses(this.el);
+        }
+        else {
+            this.dispatchEvent(this.el, "anchor-spy:inactive");
+            this.addInactiveClasses(this.el);
+            this.removeActiveClasses(this.el);
+        }
+    }
+}
+AnchorSpyController.values = { key: String };
+AnchorSpyController.classes = ["active", "inactive"];

package/dist/controllers/back_link_controller.js

@@ -0,0 +1,25 @@
+import { BaseController } from "../utilities/base_controller";
+import { useTimeout } from "../mixins/use_timeout";
+import { useEventListener } from "../mixins/use_event_listener";
+export class BackLinkController extends BaseController {
+    get _pages() {
+        return this.hasPagesValue ? Math.abs(this.pagesValue) : 1;
+    }
+    get _timeout() {
+        return this.hasTimeoutValue ? this.timeoutValue : 1500;
+    }
+    connect() {
+        useEventListener(this, this.el, "click", this.goBack);
+    }
+    goBack(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        history.go(-this._pages);
+        if (this.el.href) {
+            useTimeout(this, this.fallback, this._timeout);
+        }
+    }
+    fallback() {
+        window.location.href = this.el.href;
+    }
+}
+BackLinkController.values = { timeout: Number, pages: Number };

package/dist/controllers/clipboard_controller.js

@@ -0,0 +1,35 @@
+import { BaseController } from "../utilities/base_controller";
+export class ClipboardController extends BaseController {
+    constructor() {
+        super(...arguments);
+        this._supported = false;
+    }
+    connect() {
+        this._supported = document.queryCommandSupported("copy");
+        if (this.hasRemoveUnusedValue && this.removeUnusedValue) {
+            if (this._supported && this.hasFallbackTarget) {
+                this.fallbackTarget.remove();
+            }
+            else if (this.hasCopyTarget) {
+                this.copyTarget.remove();
+            }
+        }
+    }
+    select(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.sourceTarget.select();
+    }
+    copy(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this.sourceTarget.select();
+        if (this._supported) {
+            document.execCommand("copy");
+        }
+    }
+}
+ClipboardController.targets = ["source", "button", "copy", "fallback"];
+ClipboardController.values = { removeUnused: Boolean };

package/dist/controllers/confirm_controller.js

@@ -0,0 +1,33 @@
+import { BaseController } from '../utilities/base_controller';
+import { isHTMLAnchorElement, isHTMLFormElement } from "../utilities/elements";
+import { useEventListener } from "../mixins/use_event_listener";
+export class ConfirmController extends BaseController {
+    get _message() {
+        return this.hasMessageValue ? this.messageValue : 'Are you sure?';
+    }
+    get _eventType() {
+        if (isHTMLFormElement(this.el)) {
+            return "submit";
+        }
+        else if (isHTMLAnchorElement(this.el)) {
+            return "click";
+        }
+        else {
+            throw new Error("Can't handle confirmation on attached element");
+        }
+    }
+    connect() {
+        requestAnimationFrame(() => {
+            useEventListener(this, this.el, this._eventType, this.confirm);
+        });
+    }
+    confirm(event) {
+        if (!(window.confirm(this._message))) {
+            event.preventDefault();
+            this.dispatchEvent(this.el, "confirm:cancelled");
+        }
+    }
+}
+ConfirmController.values = {
+    message: String,
+};

package/dist/controllers/confirm_navigation_controller.js

@@ -0,0 +1,29 @@
+import { BaseController } from "../utilities/base_controller";
+import { useEventListener } from "../mixins/use_event_listener";
+export class ConfirmNavigationController extends BaseController {
+    get _message() {
+        return this.hasMessageValue ? this.messageValue : "Do you want to leave this page? Changes you made may not be saved";
+    }
+    connect() {
+        window.onbeforeunload = () => this._message;
+        useEventListener(this, window, "popstate", this.confirmNavigation);
+        useEventListener(this, window, "submit", this.allowSubmit);
+        useEventListener(this, window, ["turbolinks:before-visit", "turbo:before-visit"], this.confirmTurboNavigation);
+    }
+    disconnect() {
+        window.onbeforeunload = null;
+    }
+    allowSubmit(_event) {
+        window.removeEventListener("popstate", this.confirmNavigation);
+        window.onbeforeunload = null;
+    }
+    confirmNavigation(_event) {
+        return false;
+    }
+    confirmTurboNavigation(event) {
+        if (!confirm(this._message)) {
+            event.preventDefault();
+        }
+    }
+}
+ConfirmNavigationController.values = { message: String };

package/dist/controllers/debug_controller.js

@@ -0,0 +1,7 @@
+import { BaseController } from "../utilities/base_controller";
+export class DebugController extends BaseController {
+    connect() {
+        console.log("Debug Controller", this, this.testTargets);
+    }
+}
+DebugController.targets = ["test"];

package/dist/controllers/disable_with_controller.js

@@ -0,0 +1,66 @@
+import { BaseController } from '../utilities/base_controller';
+import { isTypeOfButtonableElement } from "../utilities/elements";
+import { useEventListener } from "../mixins/use_event_listener";
+import { useTemporaryContent } from "../mixins/use_temporary_content";
+export class DisableWithController extends BaseController {
+    get _message() {
+        return this.hasMessageValue ? this.messageValue : 'Submitting...';
+    }
+    get _timeout() {
+        return this.hasTimeoutValue ? this.timeoutValue : 1000;
+    }
+    connect() {
+        requestAnimationFrame(() => {
+            useEventListener(this, this.el, ["click"], this.disable);
+            useEventListener(this, window, ["turbo:load", "turbolinks:load"], this._enable);
+        });
+    }
+    disable(event) {
+        let element = this.el;
+        if (this._isDisabled(element)) {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+        }
+        else {
+            this._disable();
+            useTemporaryContent(this, element, this._message, this._timeout, this._enable);
+        }
+    }
+    enable(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        let element = this.el;
+        if (this._isDisabled(element)) {
+            this._enable();
+        }
+    }
+    _isDisabled(el) {
+        if (isTypeOfButtonableElement(el)) {
+            return el.disabled;
+        }
+        else {
+            return el.dataset.disabled == "true";
+        }
+    }
+    _disable() {
+        let el = this.el;
+        if (isTypeOfButtonableElement(el)) {
+            el.disabled = true;
+        }
+        else {
+            el.dataset.disabled = "true";
+        }
+    }
+    _enable() {
+        let el = this.el;
+        if (isTypeOfButtonableElement(el)) {
+            el.disabled = false;
+        }
+        else {
+            el.dataset.disabled = undefined;
+        }
+    }
+}
+DisableWithController.values = {
+    message: String,
+    timeout: Number,
+};

package/dist/controllers/dismissable_controller.js

@@ -0,0 +1,8 @@
+import { BaseController } from "../utilities/base_controller";
+export class DismissableController extends BaseController {
+    dismiss() {
+        this.el.remove();
+    }
+}
+export class RemoveController extends DismissableController {
+}

package/dist/controllers/element_save_controller.js

@@ -0,0 +1,80 @@
+import debounce from "lodash-es/debounce";
+import _get from "lodash-es/get";
+import _set from "lodash-es/set";
+import { BaseController } from '../utilities/base_controller';
+import { useLocalStorage } from "../mixins";
+export class ElementSaveController extends BaseController {
+    get _id() {
+        if (this.hasIdValue) {
+            return this.idValue;
+        }
+        let elementID = this.el.id;
+        if (elementID !== "") {
+            return elementID;
+        }
+        else {
+            throw new Error(`No ID value to uniquely identify this element. Please either specify data-${this.identifier}-id-value or give this element an 'id' attribute. `);
+        }
+    }
+    get _uniqueIdentifier() {
+        const url = location.href;
+        return `${url} ${this._id}`;
+    }
+    get _restoreOnLoad() {
+        return this.hasRestoreOnLoadValue ? this.restoreOnLoadValue : true;
+    }
+    get _element() {
+        return this.hasElementTarget ? this.elementTarget : this.el;
+    }
+    initialize() {
+        this.save = debounce(this.save.bind(this), 300);
+    }
+    connect() {
+        this._store = useLocalStorage(this, this._uniqueIdentifier, {});
+        requestAnimationFrame(() => {
+            if (this._restoreOnLoad) {
+                this.restore();
+            }
+        });
+    }
+    clear(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        this._store.clear();
+        this.dispatchEvent(this._element, `element-save:cleared`);
+    }
+    save(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        let element = this._element;
+        let attributes = this.attributesValue.split(" ");
+        let data = {};
+        attributes.forEach((attr) => data[attr] = _get(element, attr));
+        this._store.value = data;
+        this.dispatchEvent(element, `element-save:save:success`);
+    }
+    restore(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        let element = this._element;
+        if (!this._store.isEmpty()) {
+            const savedData = this._store.value; // get and parse the saved data from localStorage
+            Object.keys(savedData).forEach((attr) => _set(element, attr, savedData[attr]));
+            this.dispatchEvent(element, `element-save:restore:success`);
+        }
+        else {
+            this.dispatchEvent(element, `element-save:restore:empty`);
+        }
+    }
+}
+ElementSaveController.targets = [
+    "element",
+];
+ElementSaveController.values = {
+    id: String,
+    attributes: String,
+    restoreOnLoad: Boolean,
+};

package/dist/controllers/empty_dom_controller.js

@@ -0,0 +1,42 @@
+import { useMutationObserver } from "../mixins/use_mutation_observer";
+import { BaseController } from "../utilities/base_controller";
+import { installClassMethods } from "../mixins/install_class_methods";
+export class EmptyDomController extends BaseController {
+    get _container() {
+        return this.hasContainerTarget ? this.containerTarget : this.el;
+    }
+    get _children() {
+        let element = this._container;
+        if (this.hasScopeSelectorValue) {
+            return Array.from(element.querySelectorAll(this.scopeSelectorValue));
+        }
+        else {
+            return Array.from(element.children);
+        }
+    }
+    connect() {
+        installClassMethods(this);
+        useMutationObserver(this, this._container, this.mutate, { childList: true });
+        this.checkEmpty();
+    }
+    mutate(entries) {
+        this.checkEmpty();
+    }
+    checkEmpty() {
+        let element = this._container;
+        let children = this._children;
+        if (children.length === 0) {
+            this.removeNotEmptyClasses();
+            this.addEmptyClasses();
+            this.dispatchEvent(element, "dom:empty");
+        }
+        else {
+            this.addNotEmptyClasses();
+            this.removeEmptyClasses();
+            this.dispatchEvent(element, "dom:not-empty", { detail: { count: children.length } });
+        }
+    }
+}
+EmptyDomController.targets = ["container"];
+EmptyDomController.classes = ["empty", "notEmpty"];
+EmptyDomController.values = { scopeSelector: String };

package/dist/controllers/equalize_controller.js

@@ -0,0 +1,39 @@
+import { BaseController } from "../utilities/base_controller";
+import debounce from "lodash-es/debounce";
+import { useIntersection } from "../mixins/use_intersection";
+export class EqualizeController extends BaseController {
+    initialize() {
+        this._equalize = debounce(this._equalize.bind(this), 100);
+        this.observer = new ResizeObserver((_entries) => this._equalize());
+    }
+    connect() {
+        let { teardown } = useIntersection(this, this.el, this.appear);
+        this._unobserveIntersection = teardown;
+        requestAnimationFrame(this._equalize);
+    }
+    disconnect() {
+        this._unequalize();
+    }
+    watchTargetConnected(element) {
+        this.observer.observe(element);
+        this._equalize();
+    }
+    watchTargetDisconnected(element) {
+        this.observer.unobserve(element);
+        this._equalize();
+    }
+    appear(_entry) {
+        this._unobserveIntersection();
+        this._equalize();
+    }
+    _equalize() {
+        this._unequalize();
+        let maxHeight = 0;
+        Array.from(this.watchTargets).forEach(target => maxHeight = Math.max(maxHeight, target.getBoundingClientRect().height));
+        Array.from(this.watchTargets).forEach(target => target.style.minHeight = `${maxHeight}px`);
+    }
+    _unequalize() {
+        Array.from(this.watchTargets).forEach(target => target.style.minHeight = "");
+    }
+}
+EqualizeController.targets = ["watch"];

package/dist/controllers/forms/auto_submit_form_controller.js

@@ -0,0 +1,62 @@
+import { BaseController } from "../../utilities/base_controller";
+import { requestSubmit } from "../../utilities/request_submit";
+import { useEventListener } from "../../mixins/use_event_listener";
+export class AutoSubmitFormController extends BaseController {
+    get _eventModes() {
+        if (this.hasEventModeValue) {
+            let modes = this.eventModeValue.split(' ').map(mode => mode.trim());
+            if (modes.length === 1 && modes[0] === 'debounced') {
+                return ['change', 'input'];
+            }
+            if (!modes.every(mode => ['change', 'input'].includes(mode))) {
+                throw new Error(`The modeValue provided '${this.eventModeValue}' is not one of the recognised configuration options`);
+            }
+            return modes;
+        }
+        else {
+            return ["change"];
+        }
+    }
+    get _debounceTimeout() {
+        return this.hasDebounceIntervalValue ? this.debounceIntervalValue : -1;
+    }
+    get _mode() {
+        if (this.hasSubmitModeValue) {
+            if (!["direct", "request"].includes(this.submitModeValue)) {
+                throw new Error(`The modeValue provided '${this.submitModeValue}' is not one of the recognised configuration options`);
+            }
+            return this.submitModeValue;
+        }
+        else {
+            return "request";
+        }
+    }
+    get _cssSelector() {
+        let inputTypes = ['input', 'textarea', 'select'];
+        let ignore = ':not([data-no-autosubmit])';
+        return inputTypes.map(type => type.concat(ignore)).join(',');
+    }
+    get inputElements() {
+        let subElements = Array.from(this.element.querySelectorAll(this._cssSelector));
+        subElements = subElements.filter(el => !this._ancestorIsTrix(el));
+        return subElements;
+    }
+    connect() {
+        this.inputElements.forEach(el => {
+            return useEventListener(this, el, this._eventModes, this.submit, { debounce: this._debounceTimeout && this._debounceTimeout > 0 ? this._debounceTimeout : undefined });
+        });
+    }
+    _ancestorIsTrix(element) {
+        return element.closest('trix-toolbar') !== null && element.closest('trix-editor') !== null;
+    }
+    submit() {
+        let el = this.el;
+        if (this._mode == 'request') {
+            requestSubmit(el);
+        }
+        else {
+            el.submit();
+        }
+    }
+}
+AutoSubmitFormController.values = { submitMode: String, eventMode: String, debounceInterval: Number };