@stimulus-library/mixins 1.0.0-alpha.2 → 1.0.0-alpha.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Sub-Xaero
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './install_class_methods';
 export * from './use_click_outside';
+export * from './use_dirty_form_tracking';
 export * from './use_event_bus';
 export * from './use_event_listener';
 export * from './use_fullscreen';

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from './install_class_methods';
 export * from './use_click_outside';
+export * from './use_dirty_form_tracking';
 export * from './use_event_bus';
 export * from './use_event_listener';
 export * from './use_fullscreen';

package/dist/use_click_outside.js

@@ -1,6 +1,6 @@
 import { isElementInViewport } from "@stimulus-library/utilities";
 import { useEventListener } from "./use_event_listener";
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useClickOutside(controller, element, callback) {
     callback = callback.bind(controller);
     const handler = (event) => {

package/dist/use_dirty_form_tracking.d.ts

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+export declare function useDirtyInputTracking(controller: Controller, element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): {
+    restore: () => void;
+    teardown: () => void;
+};
+export declare function useDirtyFormTracking(controller: Controller, form: HTMLFormElement): {
+    restore: () => void;
+    teardown: () => void;
+};
+export declare function isDirty(element: HTMLElement): boolean;

package/dist/use_dirty_form_tracking.js

@@ -0,0 +1,154 @@
+import { useMixin } from "./use_mixin";
+import { getOtherRadiosInGroup, isElementCheckable, isHTMLInputElement, isHTMLSelectElement } from "@stimulus-library/utilities";
+import { useEventListener } from "./use_event_listener";
+const CACHE_ATTR_NAME = "data-detect-dirty-load-value";
+export function useDirtyInputTracking(controller, element) {
+    let setup = () => {
+        cacheLoadValues(element);
+        checkDirty(element);
+        useEventListener(controller, element, ["input", "change"], () => checkDirty(element), { debounce: 10 });
+    };
+    let teardown = () => {
+    };
+    useMixin(controller, setup, teardown);
+    return {
+        restore: () => restoreElementFromLoadValue(element),
+        teardown,
+    };
+}
+export function useDirtyFormTracking(controller, form) {
+    let teardowns = [];
+    let restores = [];
+    let setup = () => {
+        form.querySelectorAll("input, select, textarea").forEach((element) => {
+            let functions = useDirtyInputTracking(controller, element);
+            teardowns.push(functions.teardown);
+            restores.push(functions.restore);
+        });
+        useEventListener(controller, form, 'input-dirtied', () => {
+            console.log("input-dirtied");
+            form.setAttribute('data-dirty', 'true');
+            form.dispatchEvent(new CustomEvent('form-dirtied', {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                    target: form,
+                },
+            }));
+        });
+        useEventListener(controller, form, 'input-cleaned', () => {
+            console.log("input-cleaned");
+            if (form.querySelectorAll('[data-dirty="true"]').length === 0) {
+                form.removeAttribute('data-dirty');
+                form.dispatchEvent(new CustomEvent('form-cleaned', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        target: form,
+                    },
+                }));
+            }
+        });
+    };
+    let teardown = () => {
+        teardowns.forEach((teardown) => teardown());
+    };
+    let restore = () => {
+        restores.forEach((restore) => restore());
+    };
+    useMixin(controller, setup, teardown);
+    return {
+        restore,
+        teardown,
+    };
+}
+function getElementValue(element) {
+    return isElementCheckable(element) ? element.checked : element.value;
+}
+function getElementLoadValue(element) {
+    let value = element.getAttribute(CACHE_ATTR_NAME);
+    if (isElementCheckable(element)) {
+        return value == null ? element.defaultChecked : value == "true";
+    }
+    else if (isHTMLSelectElement(element)) {
+        let options = Array.from(element.options);
+        options.forEach((option) => {
+            if (option.defaultSelected) {
+                element.value = option.value;
+                return option.value;
+            }
+        });
+    }
+    else if (value !== null) {
+        return value;
+    }
+    return value;
+}
+function elementHasCachedLoadValue(element) {
+    return element.hasAttribute(CACHE_ATTR_NAME);
+}
+function checkDirty(element) {
+    if (isHTMLInputElement(element) && element.type == "radio") {
+        getOtherRadiosInGroup(element).forEach((radio) => radio.removeAttribute('data-dirty'));
+    }
+    if (isElementDirty(element)) {
+        element.setAttribute('data-dirty', "true");
+        element.form?.setAttribute('data-dirty', "true");
+        console.log("input-dirtied event");
+        element.dispatchEvent(new CustomEvent('input-dirtied', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                target: element,
+            },
+        }));
+    }
+    else {
+        element.removeAttribute('data-dirty');
+        element.dispatchEvent(new CustomEvent('input-cleaned', {
+            bubbles: true,
+            cancelable: true,
+            detail: {
+                target: element,
+            },
+        }));
+    }
+}
+function isElementDirty(element) {
+    return getElementValue(element) !== getElementLoadValue(element);
+}
+function restoreElementFromLoadValue(element) {
+    let cacheValue = element.getAttribute(CACHE_ATTR_NAME);
+    if (isElementCheckable(element)) {
+        element.setAttribute(CACHE_ATTR_NAME, element.checked.toString());
+        element.checked = cacheValue == null ? element.defaultChecked : cacheValue == "true";
+    }
+    else if (isHTMLSelectElement(element)) {
+        if (cacheValue == null) {
+            let options = Array.from(element.options);
+            options.forEach((option) => {
+                if (option.defaultSelected) {
+                    element.value = option.value;
+                    return;
+                }
+            });
+        }
+        else {
+            element.value = cacheValue;
+        }
+    }
+    else {
+        element.value = cacheValue == null ? element.defaultValue : cacheValue;
+    }
+}
+function cacheLoadValues(element) {
+    if (!elementHasCachedLoadValue(element) && isElementCheckable(element)) {
+        element.setAttribute(CACHE_ATTR_NAME, element.checked.toString());
+    }
+    else {
+        element.setAttribute(CACHE_ATTR_NAME, element.value.toString());
+    }
+}
+export function isDirty(element) {
+    return element.hasAttribute("data-dirty");
+}

package/dist/use_event_bus.js

@@ -1,5 +1,5 @@
 import { debounce, EventBus, wrapArray } from "@stimulus-library/utilities";
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useEventBus(controller, eventNameOrNames, handler, opts) {
     let options = opts;
     if (options?.debounce) {

package/dist/use_event_listener.js

@@ -1,5 +1,5 @@
 import { debounce, wrapArray } from "@stimulus-library/utilities";
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useEventListener(controller, element, eventNameOrNames, handler, opts) {
     if (opts?.debounce) {
         handler = debounce(handler.bind(controller), opts.debounce);

package/dist/use_fullscreen.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useFullscreen(controller, el) {
     let element = el || document.documentElement;
     let fullscreenOpen = document.fullscreenElement !== null;

package/dist/use_geolocation.js

@@ -1,5 +1,5 @@
 import { reactive } from "@stimulus-library/utilities";
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useGeolocation(controller, options = {}, update, error) {
     // Ensure passed functions are bound to the correct controller scope
     if (update) {

package/dist/use_hover.js

@@ -1,5 +1,5 @@
 import { useEventListener } from "./use_event_listener";
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useHover(controller, element, enter, leave) {
     let teardownEnter = null;
     let teardownLeave = null;

package/dist/use_injected_html.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useInjectedFragment(controller, targetElement, insertPosition, fragment, options = {}) {
     let nodes = Array.from(fragment.childNodes);
     let setup = () => {

package/dist/use_intersection.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useIntersectionObserver(controller, handler, options) {
     handler = handler.bind(controller);
     let observer = new IntersectionObserver(handler, options);

package/dist/use_interval.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useInterval(controller, handler, interval) {
     handler = handler.bind(controller);
     let intervalHandle = null;

package/dist/use_mutation_observer.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useMutationObserver(controller, element, handler, options) {
     handler = handler.bind(controller);
     let observer = new MutationObserver(handler);

package/dist/use_resize_observer.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useResizeObserver(controller, element, handler, options) {
     handler = handler.bind(controller);
     let observer = new ResizeObserver(handler);

package/dist/use_temporary_content.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 import { useTimeout } from "./use_timeout";
 import { isHTMLInputElement } from "@stimulus-library/utilities";
 export function useTemporaryContent(controller, target, content, timeout, teardownCallback) {

package/dist/use_timeout.js

@@ -1,4 +1,4 @@
-import { useMixin } from "./create_mixin";
+import { useMixin } from "./use_mixin";
 export function useTimeout(controller, handler, timeout) {
     let controllerDisconnect;
     let timeoutHandle = null;

package/package.json

@@ -9,7 +9,7 @@
     "ruby on rails",
     "ruby-on-rails"
   ],
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "license": "MIT",
   "author": {
     "name": "Sub-Xaero",
@@ -30,21 +30,30 @@
     "dev": "tsc --watch",
     "prepack": "npm run build",
     "release": "standard-version",
-    "test": "cypress run",
+    "test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha --parallel -r ts-node/register 'test/**/*.test.ts' -R dot",
     "test:treeshake": "agadoo dist"
   },
   "dependencies": {
     "@hotwired/stimulus": "^3.0.0",
-    "@stimulus-library/utilities": "^1.0.0-alpha.2"
+    "@stimulus-library/utilities": "^1.0.0-alpha.3"
   },
   "devDependencies": {
+    "@types/chai": "^4.3.5",
+    "@types/mocha": "^10.0.1",
+    "@types/sinon": "^10.0.15",
+    "@types/sinon-chai": "^3.2.9",
     "agadoo": "^3.0.0",
-    "cypress": "^12.5.1",
+    "chai": "^4.3.7",
     "fast-glob": "^3.2.12",
-    "lerna": "^6.5.1",
-    "rimraf": "^4.1.2",
+    "lerna": "^7.0.0",
+    "mocha": "^10.2.0",
+    "rimraf": "^5.0.1",
+    "sinon": "^15.1.0",
+    "sinon-chai": "^3.7.0",
     "standard-version": "^9.5.0",
-    "typescript": "^4.9.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.3",
     "vite": "^4.1.1"
-  }
+  },
+  "gitHead": "ab34837bf603c7fce42f3d1e5b881607284568ef"
 }