stimulus-library 0.3.19 → 0.4.0

package/src/controllers/forms/form_rc_controller.ts

@@ -1,20 +0,0 @@
-import {BaseController} from '../../utilities/base_controller';
-import {requestReset, requestSubmit} from "../../utilities/requestSubmit";
-
-export class FormRcController extends BaseController {
-
-  static targets = ["form"];
-
-  declare readonly formTarget: HTMLFormElement;
-
-  submit(event?: Event) {
-    event?.preventDefault();
-    requestSubmit(this.formTarget);
-  }
-
-  reset(event?: Event) {
-    event?.preventDefault();
-    requestReset(this.formTarget)
-  }
-
-}

package/src/controllers/forms/form_save_controller.ts

@@ -1,141 +0,0 @@
-import {BaseController} from '../../utilities/base_controller';
-import {isHTMLFormElement, isHTMLInputElement} from "../../utilities/elements";
-
-interface FormSavePayload {
-  [idx: string]: {
-    [idx: string]: string | boolean
-  }
-}
-
-export class FormSaveController extends BaseController {
-
-  static values = {
-    id: String,
-    restoreOnLoad: Boolean,
-    clearOnSubmit: Boolean,
-  };
-
-  declare readonly idValue: string;
-  declare readonly hasIdValue: boolean;
-  declare readonly restoreOnLoadValue: boolean;
-  declare readonly hasRestoreOnLoadValue: boolean;
-  declare readonly clearOnSubmitValue: boolean;
-  declare readonly hasClearOnSubmitValue: boolean;
-
-  get _formID() {
-    if (this.hasIdValue) {
-      return this.idValue;
-    }
-    let elementID = (this.el as HTMLFormElement).id;
-
-    if (elementID !== "") {
-      return elementID;
-    } else {
-      throw new Error(`No ID value to uniquely identify this form. Please either specify data-${this.identifier}-id-value or give this form an 'id' attribute. `);
-    }
-  }
-
-  get _formIdentifier() {
-    const url = location.href;
-    return `${url} ${this._formID}`;
-  }
-
-  get _formElements() {
-    return (this.el as HTMLFormElement).elements;
-  }
-
-  get _formData(): FormSavePayload {
-    let data: FormSavePayload = {[this._formIdentifier]: {}};
-    for (const element of this._formElements) {
-      let el = element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-      if (el.name.length > 0) {
-        if (isHTMLInputElement(el) && el.type == "checkbox") {
-          data[this._formIdentifier][el.name] = el.checked;
-        } else if (isHTMLInputElement(el) && el.type == "radio") {
-          if (el.checked) {
-            data[this._formIdentifier][el.name] = el.value;
-          }
-        } else {
-          data[this._formIdentifier][el.name] = el.value;
-        }
-      }
-    }
-    return data;
-  }
-
-  get _restoreOnLoad() {
-    return this.hasRestoreOnLoadValue ? this.restoreOnLoadValue : true;
-  }
-
-  get _clearOnSubmit() {
-    return this.hasClearOnSubmitValue ? this.clearOnSubmitValue : true;
-  }
-
-  initialize() {
-    this._clear = this._clear.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      let element = this.el;
-      if (!isHTMLFormElement(element)) {
-        throw new Error('Expected controller to be mounted on a form element.');
-      }
-
-      if (this._restoreOnLoad) {
-        this.restore();
-      }
-      if (this._clearOnSubmit) {
-        this.el.addEventListener('submit', this._clear);
-      }
-    });
-  }
-
-  disconnect() {
-    if (this._clearOnSubmit) {
-      this.el.removeEventListener('submit', this._clear);
-    }
-  }
-
-  _clear() {
-    localStorage.removeItem(this._formIdentifier);
-    this.dispatch(this.el, `form-save:cleared`);
-  }
-
-  clear(event?: Event) {
-    event?.preventDefault();
-    this._clear();
-  }
-
-  save(event: Event) {
-    event.preventDefault();
-    let data = this._formData;
-    localStorage.setItem(this._formIdentifier, JSON.stringify(data[this._formIdentifier]));
-    this.dispatch(this.el, `form-save:save:success`);
-  }
-
-  restore(event?: Event) {
-    event?.preventDefault();
-    if (localStorage.getItem(this._formIdentifier)) {
-      const savedData = JSON.parse(localStorage.getItem(this._formIdentifier)!); // get and parse the saved data from localStorage
-      for (const element of this._formElements) {
-        let el = element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-        if (el.name in savedData) {
-          if (isHTMLInputElement(el) && el.type == "checkbox") {
-            el.checked = savedData[el.name];
-          } else if (isHTMLInputElement(el) && el.type == "radio") {
-            if (el.value == savedData[el.name]) {
-              el.checked = true;
-            }
-          } else {
-            el.value = savedData[el.name];
-          }
-        }
-      }
-      this.dispatch(this.el, `form-save:restore:success`);
-    } else {
-      this.dispatch(this.el, `form-save:restore:empty`);
-    }
-  }
-
-}

package/src/controllers/forms/limited_selection_checkboxes_controller.ts

@@ -1,44 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class LimitedSelectionCheckboxesController extends BaseController {
-
-  static targets = ["input", "error"];
-  static values = {max: Number, message: String};
-
-  declare readonly hasErrorTarget: boolean;
-  declare readonly errorTarget: HTMLElement;
-  declare readonly inputTargets: HTMLInputElement[];
-  declare readonly maxValue: number;
-  declare readonly messageValue: string;
-
-  initialize() {
-    this.handleInputs = this.handleInputs.bind(this);
-  }
-
-  connect() {
-    this.inputTargets.forEach((el) => el.addEventListener("change", this.handleInputs));
-  }
-
-  disconnect() {
-    this.inputTargets.forEach((el) => el.removeEventListener("change", this.handleInputs));
-  }
-
-  handleInputs(event: Event) {
-    let tickedInputs = this.inputTargets.reduce((previousValue, el) => el.checked ? previousValue + 1 : previousValue, 0);
-    let target = event.target as HTMLInputElement;
-    if (tickedInputs > this.maxValue) {
-      event.preventDefault();
-      target.checked = false;
-      this.dispatch(target, "change");
-      this.dispatch(target, "limited-selection:too-many");
-      if (this.hasErrorTarget) {
-        this.errorTarget.innerHTML = this.messageValue;
-      }
-    } else {
-      this.dispatch(target, "limited-selection:selection");
-      if (this.hasErrorTarget) {
-        this.errorTarget.innerHTML = "";
-      }
-    }
-  }
-}

package/src/controllers/forms/navigate_form_errors_controller.ts

@@ -1,144 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {scrollToElement} from "../../utilities/scroll";
-import {clamp} from "lodash-es";
-
-export class NavigateFormErrorsController extends BaseController {
-  static values = {
-    selector: String,
-    index: Number,
-  };
-
-  static targets = ["next", "current", "previous"];
-
-  declare readonly hasNextTarget: boolean;
-  declare readonly nextTarget: HTMLElement;
-  declare readonly hasPreviousTarget: boolean;
-  declare readonly previousTarget: HTMLElement;
-  declare readonly hasCurrentTarget: boolean;
-  declare readonly currentTarget: HTMLElement;
-
-  declare selectorValue: string;
-  declare readonly hasSelectorValue: boolean;
-  declare indexValue: number;
-  declare readonly hasIndexValue: boolean;
-
-  _errors: HTMLElement[] = [];
-  _firstClick = false;
-
-  get _errorCount(): number {
-    return this._errors.length;
-  }
-
-  get _previousIndex(): number {
-    let index = this._index - 1;
-    if (index < 0) {
-      return 0;
-    }
-    return index;
-  }
-
-  get _nextIndex(): number {
-    let index = this._index + 1;
-    if (index > this._errors.length - 1) {
-      return this._errors.length - 1;
-    }
-    return index;
-  }
-
-  get _index(): number {
-    return clamp(this.hasIndexValue ? this.indexValue : 0, 0, this._errors.length);
-  }
-
-  get _selector(): string {
-    if (this.hasSelectorValue) {
-      return this.selectorValue;
-    } else {
-      throw new Error("Expected `selectorValue` to be present");
-    }
-  }
-
-  get _currentError(): HTMLElement {
-    return this._errors[this._index];
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-        this._firstClick = true;
-        this._toggleButtons();
-        this._toggleVisibility();
-      },
-    );
-  }
-
-  async current(event?: Event) {
-    event?.preventDefault();
-    if (this._firstClick) {
-      this._firstClick = false;
-      this._toggleButtons();
-    }
-    await scrollToElement(this._currentError, {behavior: "smooth", block: "center", inline: "center"});
-  }
-
-  async next(event?: Event) {
-    event?.preventDefault();
-    if (this._firstClick) {
-      this._firstClick = false;
-      this._toggleButtons();
-    } else {
-      this.indexValue = this._nextIndex;
-    }
-    await scrollToElement(this._currentError, {behavior: "smooth", block: "center", inline: "center"});
-  }
-
-  async previous(event?: Event) {
-    event?.preventDefault();
-    if (this._firstClick) {
-      this._firstClick = false;
-      this._toggleButtons();
-    } else {
-      this.indexValue = this._previousIndex;
-    }
-    await scrollToElement(this._currentError, {behavior: "smooth", block: "center", inline: "center"});
-  }
-
-  indexValueChanged() {
-    this._toggleButtons();
-  }
-
-  selectorValueChanged() {
-    this._errors = Array.from(document.querySelectorAll(this._selector));
-    this.indexValue = 0;
-    this._toggleButtons();
-    this._toggleVisibility();
-  }
-
-  private _toggleVisibility() {
-    if (this._errorCount === 0) {
-      this.el.style.display = "none";
-    } else {
-      this.el.style.display = "";
-    }
-  }
-
-  private _toggleButtons() {
-    if (this.hasNextTarget) {
-      // If there is no "Current Error" button, then enable the next error button when there is only 1 error.
-      if (!this.hasCurrentTarget && this._firstClick && this.indexValue == this._errorCount - 1) {
-        this.nextTarget.removeAttribute("disabled");
-        return;
-      } else if (this.indexValue >= this._errorCount - 1) {
-        this.nextTarget.setAttribute("disabled", "true");
-      } else {
-        this.nextTarget.removeAttribute("disabled");
-      }
-    }
-    if (this.hasPreviousTarget) {
-      if (this.indexValue <= 0) {
-        this.previousTarget.setAttribute("disabled", "true");
-      } else {
-        this.previousTarget.removeAttribute("disabled");
-      }
-    }
-  }
-
-}

package/src/controllers/forms/nested_form_controller.ts

@@ -1,68 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class NestedFormController extends BaseController {
-  static targets = ['target', 'template'];
-  static values = {
-    insertMode: String,
-    wrapperClass: String,
-  };
-
-  declare readonly targetTarget: HTMLElement;
-  declare readonly templateTarget: HTMLTemplateElement | HTMLScriptElement;
-
-  declare readonly wrapperClassValue: string;
-  declare readonly hasWrapperSelectorValue: boolean;
-  declare readonly insertModeValue: InsertPosition;
-  declare readonly hasInsertModeValue: boolean;
-
-  get _wrapperClass() {
-    return this.hasWrapperSelectorValue ? this.wrapperClassValue : 'nested-fields';
-  }
-
-  get _insertMode(): InsertPosition {
-    return this.hasInsertModeValue ? this.insertModeValue : 'beforeend';
-  }
-
-  connect() {
-    this._checkStructure();
-  }
-
-  add(event?: Event) {
-    event?.preventDefault();
-
-    const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, this._generateID());
-    this.targetTarget.insertAdjacentHTML(this._insertMode, content);
-  }
-
-  remove(event: Event) {
-    event.preventDefault();
-    const wrapper: HTMLElement | null = (event.target as HTMLElement).closest(`.${this._wrapperClass}`);
-    if (wrapper == null) {
-      throw new Error(`#remove was clicked from outside of a child record. Could not find an ancestor with class .${this._wrapperClass}`);
-    }
-
-    if (wrapper.dataset.newRecord === 'true') {
-      wrapper.remove();
-    } else {
-      wrapper.style.display = 'none';
-      let destroyInput = wrapper.querySelector("input[name*='_destroy']") as HTMLInputElement | null;
-      if (destroyInput == null) {
-        throw new Error(`Could not find a hidden input with name '_destroy'. NestedForm cannot remove an already persisted record without it.`);
-      }
-
-      destroyInput.value = "1";
-    }
-  }
-
-  private _generateID(): string {
-    return new Date().getTime().toString() + Math.random().toString().slice(2);
-  }
-
-  private _checkStructure() {
-    let template = this.templateTarget.innerHTML;
-
-    if (template.indexOf('NEW_RECORD')) {
-      throw new Error("Could not find 'NEW_RECORD' in the provided template. Please make sure you've passed `child_index: 'NEW_RECORD'` to `fields_for`");
-    }
-  }
-}

package/src/controllers/forms/password_confirm_controller.ts

@@ -1,68 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class PasswordConfirmController extends BaseController {
-
-  static targets = ["password"];
-  static classes = ["error"];
-
-  declare readonly passwordTargets: HTMLInputElement[];
-
-  declare readonly errorClass: string;
-  declare readonly hasErrorClass: boolean;
-
-  get _errorClasses(): string[] {
-    return this.errorClass.split(' ');
-  }
-
-  get _defaultErrorClasses(): string[] {
-    return [];
-  }
-
-  initialize() {
-    this._checkPasswordsMatch = this._checkPasswordsMatch.bind(this);
-  }
-
-  connect() {
-    this.passwordTargets.forEach((el) => el.addEventListener("change", this._checkPasswordsMatch));
-  }
-
-  disconnect() {
-    this.passwordTargets.forEach((el) => el.removeEventListener("change", this._checkPasswordsMatch));
-  }
-
-  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 _allPasswordsMatch(): boolean {
-    let values = new Set(this.passwordTargets.map(el => el.value));  // Create a unique set of the password values
-    return values.has("") || values.size == 1; // If any of the passwords are still blank, or there is only one distinct password value (i.e. they all are the same)
-  }
-
-  private _checkPasswordsMatch() {
-    let element = this.el;
-    if (this._allPasswordsMatch()) {
-      this.dispatch(element, "password-confirm:match");
-      if (this.hasErrorClass) {
-        this.passwordTargets.forEach(el => this._removeErrorClasses(el));
-      }
-    } else {
-      this.dispatch(element, "password-confirm:no-match");
-      if (this.hasErrorClass) {
-        this.passwordTargets.forEach(el => this._addErrorClasses(el));
-      }
-    }
-  }
-}

package/src/controllers/forms/password_peek_controller.ts

@@ -1,27 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class PasswordPeekController extends BaseController {
-
-  static targets = ["password"];
-
-  declare readonly passwordTarget: HTMLInputElement;
-
-  peak(event?: Event) {
-    event?.preventDefault();
-    this.passwordTarget.type = "text";
-  }
-
-  hide(event?: Event) {
-    event?.preventDefault();
-    this.passwordTarget.type = "password";
-  }
-
-  toggle(event?: Event) {
-    event?.preventDefault();
-    if (this.passwordTarget.type === "password") {
-      this.peak();
-    } else {
-      this.hide();
-    }
-  }
-}

package/src/controllers/forms/remote_form_controller.ts

@@ -1,34 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class RemoteFormController extends BaseController {
-  static targets = [];
-
-  static values = {selector: String};
-
-  declare readonly hasSelectorValue: boolean;
-  declare readonly selectorValue: string;
-
-  get _selector(): string {
-    return this.hasSelectorValue ? this.selectorValue : `[data-controller~="${this.identifier}"]`;
-  }
-
-  replace(event: { detail: [Element, any, XMLHttpRequest] }) {
-    const [data, status, xhr] = event.detail;
-    if (data instanceof Node) {
-      let newElement: HTMLElement | null = data.querySelector(this._selector);
-
-      if (newElement == null) {
-        throw new Error(`expected new form DOM with [data-controller="${this.identifier}"] to be present in returned payload`);
-      }
-
-      let parentNode = this.el.parentNode;
-      if (parentNode == null) {
-        throw new Error('expected form to have a DOM parent, could not execute replaceChild');
-      }
-      parentNode.replaceChild(newElement, this.el);
-      this.dispatch(newElement, 'remote-form:replace');
-    } else {
-      console.log('Unknown', data);
-    }
-  }
-}

package/src/controllers/forms/sync_inputs_controller.ts

@@ -1,89 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, isTypeOfFormInputElement} from "../../utilities/elements";
-import {EventBus} from "../../utilities/event_bus";
-
-export interface SyncValuePayload {
-  value: string | boolean;
-  dispatcher: HTMLElement;
-}
-
-export class SyncInputsController extends BaseController {
-  static values = {
-    key: String,
-  };
-
-  declare readonly keyValue: string;
-  declare readonly hasKeyValue: boolean;
-
-  get _eventName(): string {
-    return `sync:${this._key}`;
-  }
-
-  get _key(): string {
-    if (this.hasKeyValue) {
-      return this.keyValue;
-    }
-    throw new Error("Expected `keyValue` to be present");
-  }
-
-  get _value(): string | boolean {
-    let el = this.el as | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-    if (isHTMLInputElement(el) && el.type === "checkbox") {
-      return el.checked;
-    } else if (isHTMLInputElement(el) && el.type === "radio") {
-      return el.checked ? el.value : "";
-    } else {
-      return el.value;
-    }
-  }
-
-  set _value(val: string | boolean) {
-    let el = this.el;
-    if (isHTMLInputElement(el) && el.type === "checkbox") {
-      el.checked = val.toString() === "true";
-    } else if (isHTMLInputElement(el) && el.type === "radio") {
-      el.checked = el.value === val;
-    } else if (isHTMLInputElement(el) || isHTMLTextAreaElement(el) || isHTMLSelectElement(el)) {
-      el.value = val.toString();
-    } else {
-      el.innerHTML = val.toString();
-    }
-  }
-
-  initialize() {
-    this._read = this._read.bind(this);
-    this._emit = this._emit.bind(this);
-  }
-
-  connect() {
-    EventBus.on(this._eventName, this._read);
-
-    requestAnimationFrame(() => {
-      if (isTypeOfFormInputElement(this.el)) {
-        this._emit();
-        this.el.addEventListener("input", this._emit);
-      }
-    });
-  }
-
-  disconnect() {
-    EventBus.off(this._eventName, this._read);
-    if (isTypeOfFormInputElement(this.el)) {
-      this.el.removeEventListener("input", this._emit);
-    }
-  }
-
-  _emit() {
-    EventBus.emit(this._eventName, {value: this._value, dispatcher: this.el} as SyncValuePayload);
-  }
-
-  _read(payload?: SyncValuePayload) {
-    if (payload === undefined) {
-      throw new Error("No payload received");
-    }
-    let {dispatcher, value} = payload;
-    if (dispatcher !== this.el) {
-      this._value = value;
-    }
-  }
-}