stimulus-library 0.3.19 → 0.4.0

package/src/controllers/empty_dom_controller.ts

@@ -1,105 +0,0 @@
-import {useMutation} from "stimulus-use";
-import {BaseController} from "../utilities/base_controller";
-
-export class EmptyDomController extends BaseController {
-
-  static targets = ["container"];
-  static classes = ["empty", "notEmpty"];
-  static values = {scopeSelector: String};
-
-  declare readonly hasContainerTarget: boolean;
-  declare readonly containerTarget: HTMLElement;
-
-  declare readonly emptyClass: string;
-  declare readonly hasEmptyClass: boolean;
-  declare readonly notEmptyClass: string;
-  declare readonly hasNotEmptyClass: boolean;
-
-  declare hasScopeSelectorValue: boolean;
-  declare scopeSelectorValue: string;
-
-  get _container() {
-    return this.hasContainerTarget ? this.containerTarget : this.el;
-  }
-
-  get _notEmptyClasses(): string[] {
-    return this.notEmptyClass.split(' ');
-  }
-
-  get _defaultNotEmptyClasses(): string[] {
-    return [];
-  }
-
-  get _emptyClasses(): string[] {
-    return this.emptyClass.split(' ');
-  }
-
-  get _defaultEmptyClasses(): string[] {
-    return [];
-  }
-
-  get _children(): Element[] {
-    let element = this._container;
-    if (this.hasScopeSelectorValue) {
-      return Array.from(element.querySelectorAll(this.scopeSelectorValue));
-    } else {
-      return Array.from(element.children);
-    }
-  }
-
-  connect() {
-    useMutation(this, {element: this._container, childList: true});
-    this.checkEmpty();
-  }
-
-  mutate(entries: MutationRecord[]) {
-    this.checkEmpty();
-  }
-
-  checkEmpty() {
-    let element = this._container;
-    let children = this._children;
-    if (children.length === 0) {
-      this._removeNotEmptyClasses();
-      this._addEmptyClasses();
-      this.dispatch(element as HTMLElement, "dom:empty");
-    } else {
-      this._addNotEmptyClasses();
-      this._removeEmptyClasses();
-      this.dispatch(element as HTMLElement, "dom:not-empty", {detail: {count: children.length}});
-    }
-  }
-
-  private _addNotEmptyClasses(el: HTMLElement = this.el) {
-    if (this.hasNotEmptyClass) {
-      el.classList.add(...this._notEmptyClasses);
-    } else {
-      el.classList.add(...this._defaultNotEmptyClasses);
-    }
-  }
-
-  private _removeNotEmptyClasses(el: HTMLElement = this.el) {
-    if (this.hasNotEmptyClass) {
-      el.classList.remove(...this._notEmptyClasses);
-    } else {
-      el.classList.remove(...this._defaultNotEmptyClasses);
-    }
-  }
-
-  private _addEmptyClasses(el: HTMLElement = this.el) {
-    if (this.hasEmptyClass) {
-      el.classList.add(...this._emptyClasses);
-    } else {
-      el.classList.add(...this._defaultEmptyClasses);
-    }
-  }
-
-  private _removeEmptyClasses(el: HTMLElement = this.el) {
-    if (this.hasEmptyClass) {
-      el.classList.remove(...this._emptyClasses);
-    } else {
-      el.classList.remove(...this._defaultEmptyClasses);
-    }
-  }
-
-}

package/src/controllers/forms/auto_submit_form_controller.ts

@@ -1,59 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {requestSubmit} from "../../utilities/requestSubmit";
-
-export class AutoSubmitFormController extends BaseController {
-
-  static values = {
-    mode: String,
-  };
-  declare readonly modeValue: "direct" | "request";
-  declare readonly hasModeValue: boolean;
-
-  get _mode(): "direct" | "request" {
-    if (this.hasModeValue) {
-      if (!["direct", "request"].includes(this.modeValue)) {
-        throw new Error(`The modeValue provided '${this.modeValue}' is not one of the recognised configuration options`);
-      }
-      return this.modeValue;
-    } else {
-      return "request";
-    }
-  }
-
-  get submitButton(): HTMLButtonElement {
-    let button: HTMLButtonElement | null = this.element.querySelector('button[type="submit"]');
-    if (!button) {
-      button = document.createElement('button');
-      button.type = 'submit';
-      button.style.display = 'none';
-      button.dataset.sythentic = 'true';
-      this.element.insertAdjacentElement('beforeend', button);
-    }
-    return button;
-  }
-
-  initialize() {
-    this.submit = this.submit.bind(this);
-  }
-
-  connect() {
-    this.el.querySelectorAll("input, select, textarea").forEach(el => el.addEventListener("change", this.submit));
-  }
-
-  disconnect() {
-    this.el.querySelectorAll("input, select, textarea").forEach(el => el.removeEventListener("change", this.submit));
-    if (this.submitButton.dataset.synthetic == 'true') {
-      this.submitButton.remove();
-    }
-  }
-
-  private submit() {
-    let el = this.el as HTMLFormElement;
-    if (this._mode == 'request') {
-      requestSubmit(el);
-    } else {
-      // Call submit directly, do not dispatch events, do not pass go, do not collect $200.
-      el.submit();
-    }
-  }
-}

package/src/controllers/forms/autosize_controller.ts

@@ -1,41 +0,0 @@
-import {useWindowResize} from "stimulus-use";
-import {BaseController} from "../../utilities/base_controller";
-
-export class AutosizeController extends BaseController {
-
-  initialize() {
-    this._handler = this._handler.bind(this);
-  }
-
-  connect() {
-    useWindowResize(this);
-    requestAnimationFrame(() => {
-      this._handler();
-      let target = this.el as HTMLTextAreaElement;
-      target.style.resize = "none";
-      target.style.boxSizing = "border-box";
-      target.addEventListener("input", this._handler);
-      target.addEventListener("focus", this._handler);
-    });
-  }
-
-  disconnect() {
-    this.el.removeEventListener("input", this._handler);
-    this.el.removeEventListener("focus", this._handler);
-  }
-
-  windowResize() {
-    this._handler();
-  }
-
-  private _handler() {
-    this.autosize(this.el as HTMLTextAreaElement);
-  };
-
-  private autosize(element: HTMLTextAreaElement) {
-    let offset = element.offsetHeight - element.clientHeight;
-    element.style.height = "auto";
-    element.style.height = element.scrollHeight + offset + "px";
-  }
-
-}

package/src/controllers/forms/char_count_controller.ts

@@ -1,91 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class CharCountController extends BaseController {
-
-  // Config
-  static targets = ["input", "output"];
-  static values = {min: Number, max: Number};
-  static classes = ["error"];
-
-  // Targets
-  declare readonly inputTarget: HTMLInputElement | HTMLTextAreaElement;
-  declare readonly outputTarget: HTMLElement;
-  // Values
-  declare minValue: number;
-  declare hasMinValue: boolean;
-  declare maxValue: number;
-  declare hasMaxValue: boolean;
-  // Classes
-  declare readonly errorClass: string;
-  declare readonly hasErrorClass: boolean;
-
-  // Getters
-  get _errorClasses(): string[] {
-    return this.errorClass.split(' ');
-  }
-
-  get _defaultErrorClasses(): string[] {
-    return [];
-  }
-
-  // Lifecycle Methods
-  initialize() {
-    this._updateCharCount = this._updateCharCount.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this.inputTarget.addEventListener("input", this._updateCharCount);
-      this._updateCharCount();
-    });
-  }
-
-  disconnect() {
-    this.inputTarget.removeEventListener("input", this._updateCharCount);
-  }
-
-  // Methods
-  private _addErrorClasses(el: HTMLElement = this.el) {
-    if (this.hasErrorClass) {
-      el.classList.add(...this._errorClasses);
-    } else {
-      el.classList.add(...this._defaultErrorClasses);
-    }
-  }
-
-  private _removeErrorClasses(el: HTMLElement = this.el) {
-    if (this.hasErrorClass) {
-      el.classList.remove(...this._errorClasses);
-    } else {
-      el.classList.remove(...this._defaultErrorClasses);
-    }
-  }
-
-  private _updateCharCount() {
-    let charCount = this.inputTarget.value.length;
-    this.outputTarget.innerText = charCount.toString();
-    if (this.hasErrorClass) {
-      if (this._isValidCount(charCount)) {
-        this._removeErrorClasses(this.outputTarget);
-      } else {
-        this._addErrorClasses(this.outputTarget);
-      }
-    }
-  }
-
-  private _isValidCount(count: number) {
-    let min = 0;
-    let max = 99999;
-
-    if (this.hasMinValue) {
-      min = this.minValue;
-    }
-
-    if (this.hasMaxValue) {
-      max = this.maxValue;
-    }
-
-    return count >= min && count <= max;
-  }
-
-}

package/src/controllers/forms/checkbox_select_all_controller.ts

@@ -1,57 +0,0 @@
-import {BaseController} from '../../utilities/base_controller';
-
-export class CheckboxSelectAllController extends BaseController {
-  static targets = ['selectAll', 'checkbox'];
-
-  declare readonly hasSelectAllTarget: boolean;
-  declare readonly selectAllTarget: HTMLInputElement;
-  declare readonly checkboxTargets: HTMLInputElement[];
-
-  private get _checked() {
-    return this.checkboxTargets.filter(checkbox => checkbox.checked);
-  }
-
-  private get _unchecked() {
-    return this.checkboxTargets.filter(checkbox => !checkbox.checked);
-  }
-
-  initialize() {
-    this._toggle = this._toggle.bind(this);
-    this._refresh = this._refresh.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      if (!this.hasSelectAllTarget) {
-        return;
-      }
-
-      this.selectAllTarget.addEventListener('change', this._toggle);
-      this.checkboxTargets.forEach(checkbox => checkbox.addEventListener('change', this._refresh));
-      this._refresh();
-    });
-  }
-
-  disconnect() {
-    if (!this.hasSelectAllTarget) {
-      return;
-    }
-
-    this.selectAllTarget.removeEventListener('change', this._toggle);
-    this.checkboxTargets.forEach((checkbox) => checkbox.removeEventListener('change', this._refresh));
-  }
-
-  private _toggle(event: Event) {
-    event.preventDefault();
-    let target = event.target as HTMLInputElement;
-    this.checkboxTargets.forEach((checkbox) => checkbox.checked = target.checked);
-  }
-
-  private _refresh() {
-    const checkboxesCount = this.checkboxTargets.length;
-    const checkboxesCheckedCount = this._checked.length;
-
-    this.selectAllTarget.checked = checkboxesCheckedCount > 0;
-    this.selectAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount;
-  }
-}

package/src/controllers/forms/detect_dirty_controller.ts

@@ -1,116 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {isElementCheckable, isHTMLSelectElement} from "../../utilities/elements";
-
-export class DetectDirtyController extends BaseController {
-
-  get _cacheAttrName(): string {
-    return 'detect-dirty-load-value';
-  }
-
-  initialize() {
-    this._checkDirty = this._checkDirty.bind(this);
-  }
-
-  connect() {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-    this._cacheLoadValues();
-    this._checkDirty();
-    element.addEventListener("input", this._checkDirty);
-    element.addEventListener("change", this._checkDirty);
-  }
-
-  disconnect() {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    element.removeEventListener("input", this._checkDirty);
-    element.removeEventListener("change", this._checkDirty);
-  }
-
-  restore(event?: Event) {
-    event?.preventDefault();
-    this._restoreElementFromLoadValue();
-  }
-
-  private _getElementValue(): boolean | string {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    return isElementCheckable(element) ? element.checked : element.value;
-  }
-
-  private _getElementLoadValue(): boolean | string {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    let value = element.getAttribute(this._cacheAttrName);
-    if (isElementCheckable(element)) {
-      return value == null ? element.defaultChecked : value == "true";
-    } else if (value !== null) {
-      return value;
-    }
-
-    if (isHTMLSelectElement(element)) {
-      let options = Array.from(element.options);
-      options.forEach((option) => {
-        if (option.defaultSelected) {
-          element.value = option.value;
-          return option.value;
-        }
-      });
-    }
-
-    return value!;
-  }
-
-  private _elementHasCachedLoadValue(): boolean {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    return element.hasAttribute(this._cacheAttrName);
-  }
-
-  private _checkDirty() {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    if (this._isElementDirty()) {
-      element.setAttribute('data-dirty', "true");
-    } else {
-      element.removeAttribute('data-dirty');
-    }
-  }
-
-  private _isElementDirty(): boolean {
-    return this._getElementValue() !== this._getElementLoadValue();
-  }
-
-  private _restoreElementFromLoadValue() {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    let cacheValue = element.getAttribute(this._cacheAttrName);
-
-    if (isElementCheckable(element)) {
-      element.setAttribute(this._cacheAttrName, 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;
-    }
-  }
-
-  private _cacheLoadValues(): void {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    if (!this._elementHasCachedLoadValue() && isElementCheckable(element)) {
-      element.setAttribute(this._cacheAttrName, element.checked.toString());
-    } else {
-      element.setAttribute(this._cacheAttrName, element.value.toString());
-    }
-  }
-}
-
-export function isDirty(element: HTMLElement) {
-  return element.hasAttribute("data-dirty");
-}

package/src/controllers/forms/detect_dirty_form_controller.ts

@@ -1,127 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {isElementCheckable, isHTMLSelectElement} from "../../utilities/elements";
-
-export class DetectDirtyFormController extends BaseController {
-
-  get _formElements(): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> {
-    return Array.from(this.el.querySelectorAll('input, select, textarea'));
-  }
-
-  get _cacheAttrName(): string {
-    return 'detect-dirty-load-value';
-  }
-
-  initialize() {
-    this._checkDirty = this._checkDirty.bind(this);
-  }
-
-  connect() {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-    this._cacheLoadValues();
-    this._checkDirty();
-    element.addEventListener("input", this._checkDirty);
-    element.addEventListener("change", this._checkDirty);
-  }
-
-  disconnect() {
-    let element = this.el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    element.removeEventListener("input", this._checkDirty);
-    element.removeEventListener("change", this._checkDirty);
-  }
-
-  restore(event?: Event) {
-    event?.preventDefault();
-    this._formElements.forEach(element => this._restoreElementFromLoadValue(element));
-  }
-
-  private _getElementValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): boolean | string {
-    return isElementCheckable(element) ? element.checked : element.value;
-  }
-
-  private _getElementLoadValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): boolean | string {
-    let value = element.getAttribute(this._cacheAttrName);
-    if (isElementCheckable(element)) {
-      return value == null ? element.defaultChecked : value == "true";
-    } else if (value !== null) {
-      return value;
-    }
-
-    if (isHTMLSelectElement(element)) {
-      let options = Array.from(element.options);
-      options.forEach((option) => {
-        if (option.defaultSelected) {
-          element.value = option.value;
-          return option.value;
-        }
-      });
-    }
-
-    return value!;
-  }
-
-  private _elementHasCachedLoadValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): boolean {
-    return element.hasAttribute(this._cacheAttrName);
-  }
-
-  private _checkElementDirty(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) {
-    if (this._isElementDirty(element)) {
-      element.setAttribute('data-dirty', "true");
-    } else {
-      element.removeAttribute('data-dirty');
-    }
-  }
-
-  private _isElementDirty(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): boolean {
-    return this._getElementValue(element) !== this._getElementLoadValue(element);
-  }
-
-  private _cacheElementLoadValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) {
-    if (!this._elementHasCachedLoadValue(element) && isElementCheckable(element)) {
-      element.setAttribute(this._cacheAttrName, element.checked.toString());
-    } else {
-      element.setAttribute(this._cacheAttrName, element.value.toString());
-    }
-  }
-
-  private _restoreElementFromLoadValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) {
-    let cacheValue = element.getAttribute(this._cacheAttrName);
-
-    if (isElementCheckable(element)) {
-      element.setAttribute(this._cacheAttrName, 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;
-    }
-  }
-
-  private _cacheLoadValues(): void {
-    this._formElements.forEach(el => this._cacheElementLoadValue(el));
-  }
-
-  private _checkDirty(): void {
-    this._formElements.forEach(el => this._checkElementDirty(el));
-    if (this._formElements.some(el => isFormDirty(el))) {
-      this.el.setAttribute("data-dirty", "true");
-    } else {
-      this.el.removeAttribute("data-dirty");
-    }
-  }
-}
-
-export function isFormDirty(element: HTMLElement) {
-  return element.hasAttribute("data-dirty");
-}

package/src/controllers/forms/disable_inputs_controller.ts

@@ -1,44 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class DisableInputsController extends BaseController {
-
-  static targets = ["disabler", "disable"];
-
-  static values = {
-    clear: Boolean,
-  };
-
-  declare readonly hasDisablerTarget: boolean;
-  declare readonly disablerTarget: HTMLInputElement;
-  declare readonly disableTargets: Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-  declare readonly clearValue: boolean;
-  declare readonly hasClearValue: boolean;
-
-  connect() {
-    this.toggle();
-  }
-
-  toggle() {
-    if (this.hasDisablerTarget && this.disablerTarget.checked) {
-      this.disableInputs();
-    } else {
-      this.enableInputs();
-    }
-  }
-
-  disableInputs() {
-    let shouldClear = this.hasClearValue && this.clearValue;
-    this.disableTargets.forEach((el, _) => {
-      if (shouldClear) {
-        el.value = "";
-      }
-      el.disabled = true;
-    });
-  }
-
-  enableInputs() {
-    this.disableTargets.forEach((el, _) => {
-      el.disabled = false;
-    });
-  }
-}

package/src/controllers/forms/enable_inputs_controller.ts

@@ -1,44 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class EnableInputsController extends BaseController {
-
-  static targets = ["enabler", "enable"];
-
-  static values = {
-    clear: Boolean,
-  };
-
-  declare readonly hasEnablerTarget: boolean;
-  declare readonly enablerTarget: HTMLInputElement;
-  declare readonly enableTargets: Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-  declare readonly clearValue: boolean;
-  declare readonly hasClearValue: boolean;
-
-  connect() {
-    this.toggle();
-  }
-
-  toggle() {
-    if (this.hasEnablerTarget && this.enablerTarget.checked) {
-      this.enableInputs();
-    } else {
-      this.disableInputs();
-    }
-  }
-
-  disableInputs() {
-    let shouldClear = this.hasClearValue && this.clearValue;
-    this.enableTargets.forEach((el, _) => {
-      if (shouldClear) {
-        el.value = "";
-      }
-      el.disabled = true;
-    });
-  }
-
-  enableInputs() {
-    this.enableTargets.forEach((el, _) => {
-      el.disabled = false;
-    });
-  }
-}