stimulus-library 0.9.5 → 0.9.7

package/README.md

@@ -1,43 +1,43 @@
-# Stimulus-Library
-
-[Documentation](https://sub-xaero.github.io/stimulus-library/)  |  [Full List of Controllers](https://sub-xaero.github.io/stimulus-library/)
-
----
-![npm](https://img.shields.io/npm/dt/stimulus-library)
-![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/stimulus-library/latest?label=minified%20size)
----
-
-## Installation
-
-To get started, you'll need to add the `stimulus-library` package to your project.
-
-To do so, either add `stimulus-library` to your package.json manually
-
-```json
-{
-  "dependencies": {
-    "stimulus-library": "latest"
-  }
-}
-```
-
-or run
-`npm install --save stimulus-library` or `yarn add stimulus-library`
-
-
-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 "@hotwired/stimulus";
-import { AutoSubmitFormController } from "stimulus-library";
-
-const application = Application.start();
-application.register("auto-submit-form", AutoSubmitFormController);
-```
-
-## Tree-shaking
-If you use the ESM builds of the library, this library fully supports tree-shaking, 
-only the controllers you directly import will be bundled with your application.  
-
+# Stimulus-Library
+
+[Documentation](https://sub-xaero.github.io/stimulus-library/)  |  [Full List of Controllers](https://sub-xaero.github.io/stimulus-library/)
+
+---
+![npm](https://img.shields.io/npm/dt/stimulus-library)
+![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/stimulus-library/latest?label=minified%20size)
+---
+
+## Installation
+
+To get started, you'll need to add the `stimulus-library` package to your project.
+
+To do so, either add `stimulus-library` to your package.json manually
+
+```json
+{
+  "dependencies": {
+    "stimulus-library": "latest"
+  }
+}
+```
+
+or run
+`npm install --save stimulus-library` or `yarn add stimulus-library`
+
+
+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 "@hotwired/stimulus";
+import { AutoSubmitFormController } from "stimulus-library";
+
+const application = Application.start();
+application.register("auto-submit-form", AutoSubmitFormController);
+```
+
+## Tree-shaking
+If you use the ESM builds of the library, this library fully supports tree-shaking, 
+only the controllers you directly import will be bundled with your application.  
+

package/dist/controllers/index.js

@@ -5,6 +5,7 @@ export * from './media';
 export * from './scroll';
 export * from './signal';
 export * from './tables';
+export * from './turbo';
 export * from './utility';
 export * from './visual';
 // Controllers
@@ -30,5 +31,3 @@ export * from './teleport_controller';
 export * from './temporary_state_controller';
 export * from './toggle_class_controller';
 export * from './trix_modifier_controller';
-export * from './turbo_frame_rc_controller';
-export * from './turbo_frame_refresh_controller';

package/dist/controllers/tables/table_sort_controller.js

@@ -78,8 +78,8 @@ export class TableSortController extends BaseController {
             let cells = Array.from(row.cells);
             let otherCells = Array.from(otherRow.cells);
             // TODO: Handle colspans?
-            let x = cells[index]?.innerText || "";
-            let y = otherCells[index]?.innerText || "";
+            let x = cells[index]?.dataset?.sortValue || cells[index]?.innerText || "";
+            let y = otherCells[index]?.dataset?.sortValue || otherCells[index]?.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) {

package/dist/controllers/turbo/index.js

@@ -0,0 +1,3 @@
+export * from './turbo_frame_history_controller';
+export * from './turbo_frame_refresh_controller';
+export * from './turbo_frame_rc_controller';

package/dist/controllers/turbo/turbo_frame_history_controller.js

@@ -0,0 +1,27 @@
+import { BaseController } from "../../utilities";
+import { useMutationObserver } from "../../mixins";
+export default class TurboFrameHistoryController extends BaseController {
+    initialize() {
+        this.mutate = this.mutate.bind(this);
+    }
+    connect() {
+        // @ts-ignore
+        if (!window.Turbo) {
+            throw new Error('Expected Turbo to be defined on the window.');
+        }
+        // @ts-ignore
+        const { navigator } = window.Turbo;
+        this.navigator = navigator;
+        useMutationObserver(this, this.el, this.mutate, { attributes: true });
+    }
+    mutate(entries) {
+        entries.forEach((mutation) => {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+                const src = this.element.getAttribute('src');
+                if (src != null) {
+                    this.navigator.history.push(new URL(src));
+                }
+            }
+        });
+    }
+}

package/dist/controllers/turbo/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 {
+    static values = {
+        frameId: String,
+        src: String,
+        loadingMessage: String,
+    };
+    toggle(event) {
+        event?.preventDefault();
+        let frame = this._getFrame();
+        let frameSrc = frame.src;
+        if (frameSrc == null || frameSrc !== this._getSrc()) {
+            this._setSrc();
+        }
+        else {
+            this._clear();
+        }
+    }
+    setSrc(event) {
+        event?.preventDefault();
+        this._setSrc();
+    }
+    clear(event) {
+        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");
+        }
+    }
+}

package/dist/controllers/turbo/turbo_frame_refresh_controller.js

@@ -0,0 +1,33 @@
+import { BaseController } from "../../utilities/base_controller";
+import { isTurboFrame } from "../../utilities/turbo";
+import { useTimeout } from "../../mixins/use_timeout";
+// noinspection SillyAssignmentJS
+export class TurboFrameRefreshController extends BaseController {
+    static values = {
+        interval: Number,
+        poll: Boolean,
+    };
+    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?.preventDefault();
+        let element = this.el;
+        // @ts-ignore
+        element.reload();
+    }
+}

package/dist/controllers/visual/countdown_controller.js

@@ -7,15 +7,19 @@ export class CountdownController extends BaseController {
     static targets = ["years", "months", "days", "hours", "minutes", "seconds"];
     static classes = ["countingDown", "ended"];
     // Instance Data
-    _interval = null;
+    _timeout = null;
     get _removeUnused() {
         return this.hasRemoveUnusedValue ? this.removeUnusedValue : false;
     }
     get _deadlineDate() {
         return new Date(this.deadlineValue);
     }
+    initialize() {
+        this._tick = this._tick.bind(this);
+    }
     connect() {
-        this._interval = setInterval(this._tick.bind(this), 1000);
+        this._timeout = setTimeout(this._tick, 1000);
+        console.log(this._timeout);
         installClassMethods(this);
         this.addCountingDownClasses();
     }
@@ -26,8 +30,8 @@ export class CountdownController extends BaseController {
     }
     deadlineValueChanged() {
         // Countdown had previously ended, restart ticking. Updating mid-tick will just work.
-        if (this._interval == null) {
-            this._interval = setInterval(this._tick.bind(this), 1000);
+        if (this._timeout == null) {
+            this._timeout = setTimeout(this._tick, 1000);
         }
     }
     _tick() {
@@ -41,9 +45,11 @@ export class CountdownController extends BaseController {
                 this.removeCountingDownClasses();
                 this.addEndedClasses();
                 this.dispatchEvent(this.el, "countdown:ended");
+                return;
             }
             else {
                 distance = intervalToDuration({ start: this._deadlineDate, end: now });
+                this._timeout = setTimeout(this._tick, 1000);
             }
             if (this.hasYearsTarget) {
                 this._updateTarget(this.yearsTarget, this._years(distance));
@@ -70,9 +76,9 @@ export class CountdownController extends BaseController {
         }
     }
     _clearTick() {
-        if (this._interval) {
-            clearInterval(this._interval);
-            this._interval = null;
+        if (this._timeout) {
+            clearTimeout(this._timeout);
+            this._timeout = null;
         }
     }
     _updateTarget(target, value) {

package/dist/controllers/visual/tween_number_controller.js

@@ -8,6 +8,10 @@ export class TweenNumberController extends BaseController {
         duration: Number,
         easing: String,
     };
+    observer;
+    observe;
+    unobserve;
+    teardownObserver;
     get start() {
         if (this.hasStartValue) {
             return this.startValue;
@@ -42,7 +46,11 @@ export class TweenNumberController extends BaseController {
         return EasingFunctions[str] || fallback;
     }
     connect() {
-        useIntersection(this, this.el, this.appear);
+        let { observer, observe, unobserve, teardown, } = useIntersection(this, this.el, this.appear);
+        this.observer = observer;
+        this.observe = observe;
+        this.unobserve = unobserve;
+        this.teardownObserver = teardown;
     }
     appear(_entry) {
         this.tween();
@@ -50,16 +58,22 @@ export class TweenNumberController extends BaseController {
     ;
     tween() {
         let startTimestamp = null;
+        let self = this;
         const step = (timestamp) => {
             if (!startTimestamp) {
                 startTimestamp = timestamp;
             }
             const elapsed = timestamp - startTimestamp;
             const progress = Math.min(elapsed / this.durationMs, 1);
-            this.element.innerHTML = Math.floor(this.easingFunction(progress) * (this.end - this.start) + this.start).toString();
+            this.element.innerHTML =
+                Math.floor(this.easingFunction(progress) * (this.end - this.start) + this.start).toString();
             if (progress < 1) {
                 requestAnimationFrame(step);
             }
+            else {
+                self.unobserve?.();
+                self.teardownObserver?.();
+            }
         };
         requestAnimationFrame(step);
     }

package/dist/mixins/use_resize_observer.js

@@ -0,0 +1,9 @@
+import { useMixin } from "./create_mixin";
+export function useResizeObserver(controller, element, handler, options) {
+    handler = handler.bind(controller);
+    let observer = new ResizeObserver(handler);
+    let setup = () => observer.observe(element, options);
+    let teardown = () => observer.disconnect();
+    useMixin(controller, setup, teardown);
+    return teardown;
+}

package/package.json

@@ -9,7 +9,7 @@
     "ruby on rails",
     "ruby-on-rails"
   ],
-  "version": "0.9.5",
+  "version": "0.9.7",
   "license": "MIT",
   "author": {
     "name": "Sub-Xaero",
@@ -34,7 +34,7 @@
     "test:treeshake": "agadoo dist"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.6",
+    "@babel/runtime": "^7.20.13",
     "@hotwired/stimulus": "^3.2.1",
     "date-fns": "^2.29.3",
     "dialog-polyfill": "^0.5.6",
@@ -46,11 +46,11 @@
     "@types/lodash-es": "^4.17.6",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "agadoo": "^3.0.0",
-    "cypress": "^12.1.0",
+    "cypress": "^12.5.1",
     "fast-glob": "^3.2.12",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.1.2",
     "standard-version": "^9.5.0",
-    "typescript": "^4.7.3",
-    "vite": "^4.0.2"
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1"
   }
 }

package/dist/controllers/forms/disable_inputs_controller.js

@@ -1,21 +0,0 @@
-import { BaseController } from "../../utilities/base_controller";
-export class DisableInputsController extends BaseController {
-    connect() {
-    }
-    disable() {
-        let shouldClear = this.hasClearValue && this.clearValue;
-        this.inputTargets.forEach((el, _) => {
-            if (shouldClear) {
-                el.value = "";
-            }
-            el.disabled = true;
-        });
-    }
-    enable() {
-        this.inputTargets.forEach((el, _) => el.disabled = false);
-    }
-}
-DisableInputsController.targets = ["input"];
-DisableInputsController.values = {
-    clear: Boolean,
-};

package/dist/controllers/media/fallback_iframe_controller.js

@@ -1,44 +0,0 @@
-import { BaseController } from "../../utilities/base_controller";
-export class FallbackImageController extends BaseController {
-    initialize() {
-        this._hasLoadedSuccessfully = this._hasLoadedSuccessfully.bind(this);
-        this._success = this._success.bind(this);
-        this._fail = this._fail.bind(this);
-    }
-    connect() {
-        let element = this.el;
-        element.onerror = this._fail;
-        if (element.complete && !this._hasLoadedSuccessfully()) {
-            this._fail();
-        }
-        else {
-            this._success();
-        }
-    }
-    disconnect() {
-        this.removeSuccessClasses();
-        this.removeFailClasses();
-    }
-    _success() {
-        this.addSuccessClasses();
-    }
-    _fail() {
-        let element = this.el;
-        this.addFailClasses();
-        if (this.hasPlaceholderValue && element.src !== this.placeholderValue) {
-            this.dispatchEvent(element, this.eventName("placeholder"));
-            element.src = this.placeholderValue;
-            element.onerror = this._fail;
-        }
-        else {
-            this.dispatchEvent(element, this.eventName("fail"));
-            element.style.display = "none";
-        }
-    }
-    _hasLoadedSuccessfully() {
-        let element = this.el;
-        return element.naturalHeight > 0 && element.naturalWidth > 0;
-    }
-}
-FallbackImageController.values = { placeholder: String };
-FallbackImageController.classes = ["success", "fail"];

package/dist/controllers/signal/signal_attribute_sync_controller.js

@@ -1,10 +0,0 @@
-import { SignalBaseController } from "./base_controller";
-export class SignalAttributeSyncController extends SignalBaseController {
-    _onSignal(payload) {
-        this.el.setAttribute(this.attributeValue, payload.value);
-    }
-}
-SignalAttributeSyncController.values = {
-    name: String,
-    attribute: String,
-};

package/dist/controllers/signal/signal_content_sync_controller.js

@@ -1,9 +0,0 @@
-import { SignalBaseController } from "./base_controller";
-export class SignalContentSyncController extends SignalBaseController {
-    _onSignal(payload) {
-        this.el.innerText = payload.value;
-    }
-}
-SignalContentSyncController.values = {
-    name: String,
-};

package/dist/controllers/tables/table_filter_controller.js

@@ -1,53 +0,0 @@
-import { BaseController } from "../../utilities/base_controller";
-import { useMutationObserver } from "../../mixins/use_mutation_observer";
-export class TableFilterController extends BaseController {
-    get _tableBody() {
-        return this.el.tBodies[0];
-    }
-    get _tableRows() {
-        return Array.from(this._tableBody.rows);
-    }
-    connect() {
-        useMutationObserver(this, this._tableBody, this.mutate, { childList: true });
-        requestAnimationFrame(() => {
-            this.filter();
-        });
-    }
-    filter(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
-        if (this.searchValue == "") {
-            this._tableRows.forEach((row) => this._showElement(row));
-            return;
-        }
-        let filter = this.searchValue.toLocaleUpperCase();
-        this._tableRows.forEach((row) => {
-            this.columns(row).forEach((col) => {
-                let text = col.textContent || col.innerText;
-                if (text.includes(filter)) {
-                    this._showElement(row);
-                }
-                else {
-                    this._hideElement(row);
-                }
-            });
-        });
-    }
-    clear() {
-        this.searchValue = "";
-    }
-    columns(row) {
-        return Array.from(row.cells);
-    }
-    mutate(entries) {
-        this.filter();
-    }
-    _showElement(el) {
-        el.style.display = "";
-    }
-    _hideElement(el) {
-        el.style.display = "none";
-    }
-}
-TableFilterController.values = {
-    search: String,
-};