stimulus-library 0.9.0 → 0.9.1

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/forms/disable_inputs_controller.js

@@ -0,0 +1,21 @@
+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/index.js

@@ -22,6 +22,7 @@ export * from './empty_dom_controller';
 export * from './persisted_dismissable_controller';
 export * from './prefetch_controller';
 export * from './print_button_controller';
+export * from './refresh_page_controller';
 export * from './responsive_iframe_controller';
 export * from './self_destruct_controller';
 export * from './sticky_controller';

package/dist/controllers/media/fallback_iframe_controller.js

@@ -0,0 +1,44 @@
+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/refresh_page_controller.js

@@ -0,0 +1,17 @@
+import { BaseController } from "../utilities";
+export class RefreshPageController extends BaseController {
+    get onLoad() {
+        return this.hasOnLoadValue ? this.onLoadValue : false;
+    }
+    connect() {
+        if (this.onLoad) {
+            this.refresh();
+        }
+    }
+    refresh() {
+        location.reload();
+    }
+}
+RefreshPageController.values = {
+    onLoad: Boolean,
+};

package/dist/controllers/signal/base_controller.js

@@ -0,0 +1,23 @@
+import { BaseController } from "../../utilities/base_controller";
+import { extractPredicates } from "./expressions";
+import { EventBus } from "../../utilities/event_bus";
+import { signalConnectEvent, signalValueEvent } from "./events";
+import { useEventBus } from "../../mixins/use_event_bus";
+export class SignalBaseController extends BaseController {
+    connect() {
+        EventBus.emit(signalConnectEvent(this.nameValue));
+        useEventBus(this, signalValueEvent(this.nameValue), this._onSignal);
+    }
+    get predicateString() {
+        return "";
+    }
+    get _predicates() {
+        return extractPredicates(this.predicateString);
+    }
+    allPredicatesMatch(value) {
+        return this._predicates.every(predicate => predicate(value));
+    }
+}
+SignalBaseController.values = {
+    name: String,
+};

package/dist/controllers/signal/index.js

@@ -1,4 +1,6 @@
 export * from './signal_action_controller';
+export * from './signal_disable_controller';
 export * from './signal_dom_children_controller';
+export * from './signal_enable_controller';
 export * from './signal_input_controller';
 export * from './signal_visibility_controller';

package/dist/controllers/signal/signal_action_controller.js

@@ -1,23 +1,13 @@
-import { BaseController } from "../../utilities/base_controller";
-import { extractPredicates } from "./expressions";
-import { useEventBus } from "../../mixins/use_event_bus";
-import { EventBus } from "../../utilities";
-import { signalConnectEvent, signalEventName, signalValueEvent } from "./events";
-export class SignalActionController extends BaseController {
-    get _predicates() {
-        return extractPredicates(this.whenValue);
-    }
-    connect() {
-        EventBus.emit(signalConnectEvent(this.nameValue));
-        useEventBus(this, signalValueEvent(this.nameValue), this._onSignal);
-    }
+import { signalEventName } from "./events";
+import { SignalBaseController } from "./base_controller";
+export class SignalActionController extends SignalBaseController {
     _onSignal(payload) {
         let value = payload.value;
         if (!this.hasWhenValue) {
             this.dispatchEvent(this.el, signalEventName(this.nameValue, 'match'));
             return;
         }
-        if (this._predicates.every(predicate => predicate(value))) {
+        if (this.allPredicatesMatch(value)) {
             this.dispatchEvent(this.el, signalEventName(this.nameValue, 'match'), { detail: { element: this.el, value } });
         }
         else {

package/dist/controllers/signal/signal_disable_controller.js

@@ -0,0 +1,34 @@
+import { signalEventName } from "./events";
+import { SignalBaseController } from "./base_controller";
+export class SignalDisableController extends SignalBaseController {
+    disable() {
+        this.el.setAttribute("disabled", "true");
+    }
+    enable() {
+        this.el.removeAttribute("disabled");
+    }
+    _onSignal(payload) {
+        let value = payload.value;
+        if (this.whenValue == "default") {
+            if (value == "") {
+                this.disable();
+            }
+            else {
+                this.enable();
+            }
+            return;
+        }
+        if (this.allPredicatesMatch(value)) {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, "disable"), { detail: { predicate: this.whenValue, value } });
+            this.disable();
+        }
+        else {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, "enable"), { detail: { predicate: this.whenValue, value } });
+            this.enable();
+        }
+    }
+}
+SignalDisableController.values = {
+    name: String,
+    when: String,
+};

package/dist/controllers/signal/signal_dom_children_controller.js

@@ -31,7 +31,9 @@ export class SignalDomChildrenController extends BaseController {
     }
     emitChildCount() {
         let childCount = this._children.length;
-        EventBus.emit(signalValueEvent(this._name), { element: this.el, value: childCount.toString() });
+        let value = childCount.toString();
+        this.dispatchEvent(this.el, signalValueEvent(this._name), { detail: { value } });
+        EventBus.emit(signalValueEvent(this._name), { element: this.el, value });
     }
 }
 SignalDomChildrenController.values = {

package/dist/controllers/signal/signal_enable_controller.js

@@ -0,0 +1,34 @@
+import { signalEventName } from "./events";
+import { SignalBaseController } from "./base_controller";
+export class SignalEnableController extends SignalBaseController {
+    disable() {
+        this.el.setAttribute("disabled", "true");
+    }
+    enable() {
+        this.el.removeAttribute("disabled");
+    }
+    _onSignal(payload) {
+        let value = payload.value;
+        if (this.whenValue == "default") {
+            if (value == "") {
+                this.enable();
+            }
+            else {
+                this.disable();
+            }
+            return;
+        }
+        if (this.allPredicatesMatch(value)) {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, "enable"), { detail: { predicate: this.whenValue, value } });
+            this.enable();
+        }
+        else {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, "disable"), { detail: { predicate: this.whenValue, value } });
+            this.disable();
+        }
+    }
+}
+SignalEnableController.values = {
+    name: String,
+    when: String,
+};

package/dist/controllers/signal/signal_visibility_controller.js

@@ -1,21 +1,9 @@
-import { BaseController } from "../../utilities/base_controller";
-import { useEventBus } from "../../mixins/use_event_bus";
-import { extractPredicates } from "./expressions";
-import { signalConnectEvent, signalValueEvent, signalVisibilityEvent } from "./events";
-import { EventBus } from "../../utilities";
-import { installClassMethods } from "../../mixins/install_class_methods";
-export class SignalVisibilityController extends BaseController {
-    get _predicates() {
-        return extractPredicates(this.showValue);
-    }
+import { signalVisibilityEvent } from "./events";
+import { SignalBaseController } from "./base_controller";
+export class SignalVisibilityController extends SignalBaseController {
     get defaultHideClasses() {
         return ["hide"];
     }
-    connect() {
-        installClassMethods(this);
-        EventBus.emit(signalConnectEvent(this.nameValue));
-        useEventBus(this, signalValueEvent(this.nameValue), this._onSignal);
-    }
     _onSignal(payload) {
         let value = payload.value;
         if (this.showValue == "default") {
@@ -27,7 +15,7 @@ export class SignalVisibilityController extends BaseController {
             }
             return;
         }
-        if (this._predicates.every(predicate => predicate(value))) {
+        if (this.allPredicatesMatch(value)) {
             this.dispatchEvent(this.el, signalVisibilityEvent(this.nameValue, "show"), { detail: { predicate: this.showValue, value } });
             this.removeHideClasses(this.el);
         }

package/dist/controllers/visual/index.js

@@ -4,3 +4,4 @@ export * from './duration_controller';
 export * from './tabs_controller';
 export * from './time_distance_controller';
 export * from './tree_view_controller';
+export * from './tween_number_controller';

package/dist/controllers/visual/tween_number_controller.js

@@ -0,0 +1,66 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useIntersection } from "../../mixins/use_intersection";
+import { EasingFunctions } from "../../utilities/easingFunctions";
+export class TweenNumberController extends BaseController {
+    get start() {
+        if (this.hasStartValue) {
+            return this.startValue;
+        }
+        else {
+            throw new Error("Required value `start` is missing");
+        }
+    }
+    get end() {
+        if (this.hasEndValue) {
+            return this.endValue;
+        }
+        else {
+            throw new Error("Required value `end` is missing");
+        }
+    }
+    get durationMs() {
+        if (this.hasDurationValue) {
+            return this.durationValue;
+        }
+        else {
+            throw new Error("Required value `duration` is missing");
+        }
+    }
+    get easingFunction() {
+        let str = this.hasEasingValue ? this.easingValue : null;
+        let fallback = EasingFunctions.linear;
+        if (str == null) {
+            return fallback;
+        }
+        // @ts-ignore
+        return EasingFunctions[str] || fallback;
+    }
+    connect() {
+        useIntersection(this, this.el, this.appear);
+    }
+    appear(_entry) {
+        this.tween();
+    }
+    ;
+    tween() {
+        let startTimestamp = null;
+        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();
+            if (progress < 1) {
+                requestAnimationFrame(step);
+            }
+        };
+        requestAnimationFrame(step);
+    }
+}
+TweenNumberController.values = {
+    start: Number,
+    end: Number,
+    duration: Number,
+    easing: String,
+};

package/dist/utilities/base_controller.js

@@ -50,6 +50,9 @@ export class BaseController extends Controller {
         const element = document.head.querySelector(`meta[name="${name}"]`);
         return (element === null || element === void 0 ? void 0 : element.getAttribute('content')) || null;
     }
+    eventName(eventName) {
+        return `${this.identifier}:${eventName}`;
+    }
     dispatchEvent(element, eventName, options = {}) {
         dispatchEvent(this, element, eventName, options);
     }

package/dist/utilities/easingFunctions.js

@@ -0,0 +1,143 @@
+const pow = Math.pow;
+const sqrt = Math.sqrt;
+const sin = Math.sin;
+const cos = Math.cos;
+const PI = Math.PI;
+const c1 = 1.70158;
+const c2 = c1 * 1.525;
+const c3 = c1 + 1;
+const c4 = (2 * PI) / 3;
+const c5 = (2 * PI) / 4.5;
+const bounceOut = function (x) {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (x < 1 / d1) {
+        return n1 * x * x;
+    }
+    else if (x < 2 / d1) {
+        return n1 * (x -= 1.5 / d1) * x + 0.75;
+    }
+    else if (x < 2.5 / d1) {
+        return n1 * (x -= 2.25 / d1) * x + 0.9375;
+    }
+    else {
+        return n1 * (x -= 2.625 / d1) * x + 0.984375;
+    }
+};
+export const EasingFunctions = {
+    linear: (x) => x,
+    easeInQuad: function (x) {
+        return x * x;
+    },
+    easeOutQuad: function (x) {
+        return 1 - (1 - x) * (1 - x);
+    },
+    easeInOutQuad: function (x) {
+        return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;
+    },
+    easeInCubic: function (x) {
+        return x * x * x;
+    },
+    easeOutCubic: function (x) {
+        return 1 - pow(1 - x, 3);
+    },
+    easeInOutCubic: function (x) {
+        return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2;
+    },
+    easeInQuart: function (x) {
+        return x * x * x * x;
+    },
+    easeOutQuart: function (x) {
+        return 1 - pow(1 - x, 4);
+    },
+    easeInOutQuart: function (x) {
+        return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2;
+    },
+    easeInQuint: function (x) {
+        return x * x * x * x * x;
+    },
+    easeOutQuint: function (x) {
+        return 1 - pow(1 - x, 5);
+    },
+    easeInOutQuint: function (x) {
+        return x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2;
+    },
+    easeInSine: function (x) {
+        return 1 - cos((x * PI) / 2);
+    },
+    easeOutSine: function (x) {
+        return sin((x * PI) / 2);
+    },
+    easeInOutSine: function (x) {
+        return -(cos(PI * x) - 1) / 2;
+    },
+    easeInExpo: function (x) {
+        return x === 0 ? 0 : pow(2, 10 * x - 10);
+    },
+    easeOutExpo: function (x) {
+        return x === 1 ? 1 : 1 - pow(2, -10 * x);
+    },
+    easeInOutExpo: function (x) {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : x < 0.5
+                    ? pow(2, 20 * x - 10) / 2
+                    : (2 - pow(2, -20 * x + 10)) / 2;
+    },
+    easeInCirc: function (x) {
+        return 1 - sqrt(1 - pow(x, 2));
+    },
+    easeOutCirc: function (x) {
+        return sqrt(1 - pow(x - 1, 2));
+    },
+    easeInOutCirc: function (x) {
+        return x < 0.5
+            ? (1 - sqrt(1 - pow(2 * x, 2))) / 2
+            : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
+    },
+    easeInBack: function (x) {
+        return c3 * x * x * x - c1 * x * x;
+    },
+    easeOutBack: function (x) {
+        return 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2);
+    },
+    easeInOutBack: function (x) {
+        return x < 0.5
+            ? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
+            : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+    },
+    easeInElastic: function (x) {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
+    },
+    easeOutElastic: function (x) {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
+    },
+    easeInOutElastic: function (x) {
+        return x === 0
+            ? 0
+            : x === 1
+                ? 1
+                : x < 0.5
+                    ? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2
+                    : (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1;
+    },
+    easeInBounce: function (x) {
+        return 1 - bounceOut(1 - x);
+    },
+    easeOutBounce: bounceOut,
+    easeInOutBounce: function (x) {
+        return x < 0.5
+            ? (1 - bounceOut(1 - 2 * x)) / 2
+            : (1 + bounceOut(2 * x - 1)) / 2;
+    },
+};

package/package.json

@@ -9,7 +9,7 @@
     "ruby on rails",
     "ruby-on-rails"
   ],
-  "version": "0.9.0",
+  "version": "0.9.1",
   "license": "MIT",
   "author": {
     "name": "Sub-Xaero",