stimulus-library 0.3.19 → 0.4.0

package/src/controllers/scroll/scroll_into_focus_controller.ts

@@ -1,34 +0,0 @@
-import {EphemeralController} from "../../utilities/ephemeral_controller";
-import {scrollToElement} from "../../utilities/scroll";
-
-export class ScrollIntoFocusController extends EphemeralController {
-
-  static values = {
-    behavior: String,
-    block: String,
-    inline: String,
-  };
-
-  declare behaviorValue: ScrollBehavior;
-  declare hasBehaviorValue: boolean;
-  declare blockValue: ScrollLogicalPosition;
-  declare hasBlockValue: boolean;
-  declare inlineValue: ScrollLogicalPosition;
-  declare hasInlineValue: boolean;
-
-  connect() {
-    requestAnimationFrame(() => {
-      // Attempt smooth scrolling, with polyfill
-      scrollToElement(
-        this.el,
-        {
-          behavior: this.hasBehaviorValue ? this.behaviorValue : "smooth",
-          block: this.hasBlockValue ? this.blockValue : "center",
-          inline: this.hasInlineValue ? this.inlineValue : "center",
-        },
-      ).catch(() => this.el.scrollIntoView()); // Fallback to snap-scrolling
-      this._cleanupSelf();
-    });
-  }
-
-}

package/src/controllers/scroll/scroll_to_bottom_controller.ts

@@ -1,35 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {getScrollParent, scrollAbsoluteBottom} from "../../utilities/scroll";
-
-export class ScrollToBottomController extends BaseController {
-
-  static values = {
-    mode: String,
-  };
-
-  declare modeValue: "nearest" | "document";
-  declare hasModeValue: boolean;
-
-  get _mode(): "nearest" | "document" {
-    return this.hasModeValue ? this.modeValue : "document";
-  }
-
-  get _scrollTarget(): HTMLElement | Window | null {
-    let target: null | HTMLElement | Window;
-    if (this._mode == "document") {
-      target = window;
-    } else {
-      target = getScrollParent(this.el);
-    }
-    return target;
-  }
-
-  async scroll(event?: Event) {
-    event?.preventDefault();
-    if (this._scrollTarget) {
-      await scrollAbsoluteBottom(this._scrollTarget);
-    }
-  }
-
-}
-

package/src/controllers/scroll/scroll_to_controller.ts

@@ -1,38 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {scrollToElement} from "../../utilities/scroll";
-
-export class ScrollToController extends BaseController {
-
-  static values = {
-    selector: String,
-    behavior: String,
-    block: String,
-    inline: String,
-  };
-
-  declare selectorValue: string;
-  declare behaviorValue: ScrollBehavior;
-  declare hasBehaviorValue: boolean;
-  declare blockValue: ScrollLogicalPosition;
-  declare hasBlockValue: boolean;
-  declare inlineValue: ScrollLogicalPosition;
-  declare hasInlineValue: boolean;
-
-  scroll() {
-    let target = document.querySelector(this.selectorValue);
-    if (!target) {
-      console.warn(`Could not find target for '${this.selectorValue}'`);
-      return;
-    }
-
-    scrollToElement(
-      target!,
-      {
-        behavior: this.hasBehaviorValue ? this.behaviorValue : "smooth",
-        block: this.hasBlockValue ? this.blockValue : "center",
-        inline: this.hasInlineValue ? this.inlineValue : "center",
-      },
-    ).catch(() => target!.scrollIntoView()); // Fallback to snap-scrolling
-  }
-
-}

package/src/controllers/scroll/scroll_to_top_controller.ts

@@ -1,35 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {getScrollParent, scrollAbsoluteTop} from "../../utilities/scroll";
-
-export class ScrollToTopController extends BaseController {
-
-  static values = {
-    mode: String,
-  };
-
-  declare modeValue: "nearest" | "document";
-  declare hasModeValue: boolean;
-
-  get _mode(): "nearest" | "document" {
-    return this.hasModeValue ? this.modeValue : "document";
-  }
-
-  get _scrollTarget(): HTMLElement | Window | null {
-    let target: null | HTMLElement | Window;
-    if (this._mode == "document") {
-      target = window;
-    } else {
-      target = getScrollParent(this.el);
-    }
-    return target;
-  }
-
-  async scroll(event?: Event) {
-    event?.preventDefault();
-    if (this._scrollTarget) {
-      await scrollAbsoluteTop(this._scrollTarget);
-    }
-  }
-
-}
-

package/src/controllers/self_destruct_controller.ts

@@ -1,23 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class SelfDestructController extends BaseController {
-
-  static values = {seconds: Number};
-
-  declare readonly secondsValue: number;
-  _timeout: null | ReturnType<typeof window.setTimeout> = null;
-
-  connect() {
-    requestAnimationFrame(() => {
-      // Only start countdown on first paint
-      this._timeout = setTimeout(() => this.el.remove(), this.secondsValue * 1000);
-    });
-  }
-
-  disconnect() {
-    if (this._timeout) {
-      clearTimeout(this._timeout);
-    }
-  }
-
-}

package/src/controllers/sticky_controller.ts

@@ -1,84 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class StickyController extends BaseController {
-
-  static classes = ["stuck"];
-  static values = {mode: String};
-
-  declare readonly stuckClass: string;
-  declare readonly hasStuckClass: boolean;
-
-  declare readonly hasModeValue: "top" | "bottom";
-  declare readonly modeValue: "top" | "bottom";
-
-  _magicElement: HTMLDivElement | null = null;
-
-  get _stuckClasses(): string[] {
-    return this.stuckClass.split(' ');
-  }
-
-  get _defaultStuckClasses(): string[] {
-    return ["stuck"];
-  }
-
-  get _mode(): "top" | "bottom" {
-    return this.hasModeValue ? this.modeValue : "top";
-  }
-
-  createMagicElement() {
-    // Magic element placed next to the sticky el that acts as an external border.
-    // When the magic element is off the page, we know that the sticky el is "stuck"
-    if (this._magicElement !== null) {
-      return;
-    }
-
-    this._magicElement = document.createElement("div");
-    switch (this._mode) {
-      case "top":
-        this.el.insertAdjacentElement("beforebegin", this._magicElement);
-        break;
-      case "bottom":
-        this.el.insertAdjacentElement("afterend", this._magicElement);
-        break;
-    }
-  }
-
-  connect() {
-    let element = this.el;
-    this.createMagicElement();
-
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.target !== this._magicElement) {
-          return;
-        }
-        if (entry.intersectionRatio === 0) {
-          this._addStuckClasses();
-        } else if (entry.intersectionRatio === 1) {
-          this._removeStuckClasses();
-        }
-      });
-
-    }, {
-      threshold: [0, 1],
-    });
-    observer.observe(this._magicElement!);
-  }
-
-  private _addStuckClasses(el: HTMLElement = this.el) {
-    if (this.hasStuckClass) {
-      el.classList.add(...this._stuckClasses);
-    } else {
-      el.classList.add(...this._defaultStuckClasses);
-    }
-  }
-
-  private _removeStuckClasses(el: HTMLElement = this.el) {
-    if (this.hasStuckClass) {
-      el.classList.remove(...this._stuckClasses);
-    } else {
-      el.classList.remove(...this._defaultStuckClasses);
-    }
-  }
-
-}

package/src/controllers/tables/table_sort_controller.ts

@@ -1,105 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class TableSortController extends BaseController {
-
-  static values = {startSort: Number};
-
-  declare readonly startSortValue: number;
-  declare readonly hasStartSortValue: boolean;
-  _lastIndex: number | null = null;
-  _reverse: boolean = false;
-
-  get _tableHead(): HTMLTableSectionElement {
-    let head = (this.el as HTMLTableElement).tHead;
-    if (head == null) {
-      throw new Error('Expected table to have a <thead> element.');
-    }
-    return head;
-  }
-
-  get _tableHeaders(): HTMLTableHeaderCellElement[] {
-    let rows = this._tableHead.rows;
-    if (rows.length == 0) {
-      throw new Error('Expected table to have a <thead> element with at least one row.');
-    }
-    return Array.from(rows[0].cells);
-  }
-
-  get _tableBody() {
-    return (this.el as HTMLTableElement).tBodies[0];
-  }
-
-  get _tableRows(): HTMLTableRowElement[] {
-    return Array.from(this._tableBody.rows);
-  }
-
-  initialize() {
-    this.sort = this.sort.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this._tableHeaders.forEach(cell => cell.addEventListener("click", this.sort));
-      if (this.hasStartSortValue) {
-        this._sortByColumn(this.startSortValue);
-      }
-    });
-  }
-
-  disconnect() {
-    this._tableHeaders.forEach(cell => cell.removeEventListener("click", this.sort));
-  }
-
-  sort(event: Event) {
-    event.preventDefault();
-    let headerCell = event.target! as HTMLTableHeaderCellElement;
-    let headerCellIndex = this._indexOfHeaderCell(headerCell);
-    this._sortByColumn(headerCellIndex);
-  }
-
-  private _indexOfHeaderCell(cell: HTMLTableHeaderCellElement) {
-    return this._tableHeaders.indexOf(cell);
-  }
-
-  private _sortByColumn(index: number) {
-    this._reverse = index === this._lastIndex && !this._reverse;
-    let frag = document.createDocumentFragment();
-    let rows = this._tableRows;
-
-    let newRows = rows.sort((row, otherRow) => {
-      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 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) {
-          return sortVal;
-        }
-        return -1;
-      }
-      if (row.dataset.sortBottom || otherRow.dataset.sortTop) {
-        if (row.dataset.sortBottom && otherRow.dataset.sortBottom) {
-          return sortVal;
-        }
-        return 1;
-      }
-
-      if (this._reverse) {
-        return sortVal > 0 ? -1 : 1;
-      }
-      return sortVal;
-    });
-
-    newRows.forEach(row => frag.appendChild(row));
-
-    this._tableBody.innerHTML = "";
-    this._tableBody.appendChild(frag);
-    this._lastIndex = index;
-  }
-
-}

package/src/controllers/tables/table_truncate_controller.ts

@@ -1,106 +0,0 @@
-import {useMutation} from "stimulus-use";
-import {BaseController} from "../../utilities/base_controller";
-
-export class TableTruncateController extends BaseController {
-
-  static targets = ["showMore"];
-  static values = {
-    limit: Number,
-    truncated: Boolean,
-  };
-
-  declare readonly showMoreTarget: HTMLElement;
-  declare limitValue: number;
-  declare readonly hasLimitValue: boolean;
-  declare truncatedValue: boolean;
-  declare readonly hasTruncatedValue: boolean;
-
-  get _truncated(): boolean {
-    return this.hasTruncatedValue ? this.truncatedValue : false;
-  }
-
-  set _truncated(value) {
-    this.truncatedValue = value;
-  }
-
-  get _tableBody(): HTMLTableSectionElement {
-    return (this.el as HTMLTableElement).tBodies[0];
-  }
-
-  get _tableRows(): HTMLTableRowElement[] {
-    return Array.from(this._tableBody.rows);
-  }
-
-  get _limit(): number {
-    return this.hasLimitValue ? this.limitValue : 20;
-  }
-
-  initialize() {
-    this.truncate = this.truncate.bind(this);
-    this.expand = this.expand.bind(this);
-  }
-
-  connect() {
-    useMutation(this, {childList: true, element: this._tableBody});
-
-    requestAnimationFrame(() => {
-      this.truncate();
-      this.showMoreTarget.addEventListener("click", this.expand);
-    });
-  }
-
-  truncate(event?: Event) {
-    event?.preventDefault();
-    this._truncated = true;
-    if (this._tableRows.length >= this._limit) {
-      this._tableRows.slice(this._limit).forEach((el) => {
-        if (el !== this.showMoreTarget) {
-          this._hideElement(el);
-        }
-      });
-      this._showElement(this.showMoreTarget);
-    } else {
-      this._hideElement(this.showMoreTarget);
-    }
-  }
-
-  expand(event?: Event) {
-    this._truncated = false;
-    event?.preventDefault();
-    this._tableRows.slice(this._limit).forEach((el) => {
-      if (el !== this.showMoreTarget) {
-        this._showElement(el);
-      }
-    });
-    this._hideElement(this.showMoreTarget);
-  }
-
-  mutate(entries: MutationRecord[]) {
-    if (this._truncated) {
-      this._reTruncate();
-    }
-  }
-
-  private _showElement(el: HTMLElement): void {
-    el.style.display = "";
-  }
-
-  private _hideElement(el: HTMLElement): void {
-    el.style.display = "none";
-  }
-
-  private _reTruncate() {
-    this._tableRows.slice(0, this._limit).forEach((el) => {
-      if (el !== this.showMoreTarget) {
-        this._showElement(el);
-      }
-    });
-    this._tableRows.slice(this._limit).forEach((el) => {
-      if (el !== this.showMoreTarget) {
-        this._hideElement(el);
-      }
-    });
-    this._showElement(this.showMoreTarget);
-  }
-
-}

package/src/controllers/teleport_controller.ts

@@ -1,64 +0,0 @@
-import {EphemeralController} from "../utilities/ephemeral_controller";
-
-export class TeleportController extends EphemeralController {
-
-  static values = {target: String, insert: String, immediate: Boolean};
-
-  declare readonly immediateValue: boolean;
-  declare readonly hasImmediateValue: boolean;
-  declare readonly targetValue: string;
-  declare readonly hasInsertValue: boolean;
-  declare readonly insertValue: InsertPosition | "replaceOuter" | "replaceInner" | "prepend" | "append";
-
-  connect() {
-    if (!this.hasInsertValue) {
-      throw new Error("`insert` value was not specified");
-    }
-
-    requestAnimationFrame(() => {
-      if (this.hasImmediateValue && this.immediateValue) {
-        this.execute();
-      }
-    });
-  }
-
-  execute(event?: Event) {
-    event?.preventDefault();
-    let element = this.el;
-    let destination = document.querySelector(this.targetValue);
-
-    if (destination == null) {
-      this.dispatch(element, "teleport:error");
-      return;
-    }
-
-    let copy = element.cloneNode(true) as HTMLElement;
-    this.cleanup(copy);
-
-    switch (this.insertValue) {
-      case "beforebegin":
-      case "beforeend":
-      case "afterend":
-      case "afterbegin":
-        destination.insertAdjacentHTML(this.insertValue, copy.outerHTML);
-        break;
-      case "replaceOuter":
-        destination.outerHTML = copy.outerHTML;
-        break;
-      case "replaceInner":
-        destination.innerHTML = copy.outerHTML;
-        break;
-      case "prepend":
-        destination.insertAdjacentHTML("afterbegin", copy.outerHTML);
-        break;
-      case "append":
-        destination.insertAdjacentHTML("beforeend", copy.outerHTML);
-        break;
-      default:
-        throw new Error("`insert` value was not specified");
-
-    }
-    element.remove();
-  }
-
-}

package/src/controllers/temporary_state_controller.ts

@@ -1,82 +0,0 @@
-import {camelCase, get as _get, set as _set} from "lodash-es";
-import {EphemeralController} from "../utilities/ephemeral_controller";
-
-export class TemporaryStateController extends EphemeralController {
-
-  static values = {
-    attribute: String,
-    seconds: Number,
-    value: String,
-  };
-
-  declare readonly hasSecondsValue: boolean;
-  declare readonly secondsValue: number;
-  declare readonly attributeValue: string;
-  declare readonly hasAttributeValue: boolean;
-  declare readonly valueValue: string;
-  declare readonly hasValueValue: boolean;
-  _timeout: null | ReturnType<typeof window.setTimeout> = null;
-  _previousState: { [index: string]: any } = {};
-
-  get _value(): string {
-    if (this.hasValueValue) {
-      return this.valueValue;
-    }
-    throw new Error("Expected `valueValue` to be present");
-  }
-
-  get _attribute(): string {
-    if (this.hasAttributeValue) {
-      return this.attributeValue;
-    }
-    throw new Error("Expected `attributeValue` to be present");
-  }
-
-  get _seconds(): number {
-    if (this.hasSecondsValue) {
-      return this.secondsValue * 1000;
-    }
-    throw new Error("Expected `secondsValue` to be present");
-  }
-
-  initialize() {
-    this.setState = this.setState.bind(this);
-    this.removeState = this.removeState.bind(this);
-  }
-
-  connect() {
-    this.setState();
-    this._timeout = setTimeout(this.removeState, this._seconds);
-  }
-
-  disconnect() {
-    this.removeState();
-    if (this._timeout) {
-      clearTimeout(this._timeout);
-    }
-  }
-
-  setState() {
-    this._previousState[this._attribute] = _get(this.el, this._attribute);
-    _set(this.el, this._attribute, this.valueValue);
-  }
-
-  removeState() {
-    _set(this.el, this._attribute, this._previousState[this._attribute]);
-  }
-
-}
-
-export function applyTemporaryState(element: HTMLElement, propertyString: string, value: any, seconds: number, controllerIdentifier = "temporary-state") {
-  if (!element.dataset.controller || !element.dataset.controller?.includes(controllerIdentifier)) {
-    element.dataset.controller = (element.dataset.controller || '' + ` ${controllerIdentifier} `).trim().replaceAll('  ', ' ');
-  }
-  // @ts-ignore
-  element[camelCase(`${controllerIdentifier}-attribute-value`)] = propertyString;
-  // @ts-ignore
-  element[camelCase(`${controllerIdentifier}-seconds-value`)] = seconds.toString();
-}
-
-export function applyTemporaryClass(element: HTMLElement, value: any, seconds: number) {
-  applyTemporaryState(element, 'className', value, seconds);
-}