ruby_cms 0.2.1.0 → 1.0.0

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/command_controller.js

@@ -0,0 +1,138 @@
+import { Controller } from "@hotwired/stimulus";
+import Fuse from "fuse.js";
+
+// Connects to data-controller="ruby-ui--command"
+export default class extends Controller {
+  static targets = ["input", "group", "item", "empty", "content"];
+
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    this.searchIndex = this.buildSearchIndex();
+    this.toggleVisibility(this.emptyTargets, false);
+    this.selectedIndex = -1;
+
+    if (this.openValue) {
+      this.open();
+    }
+  }
+
+  open(e) {
+    if (e) e.preventDefault();
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+    setTimeout(() => {
+      const input = document.querySelector('[data-ruby-ui--command-target="input"]');
+      if (input) input.focus();
+    }, 0);
+  }
+
+  dismiss() {
+    // allow scroll on body
+    document.body.classList.remove("overflow-hidden");
+    // remove the element
+    this.element.remove();
+  }
+
+  filter(e) {
+    // Deselect any previously selected item
+    this.deselectAll();
+
+    const query = e.target.value.toLowerCase();
+    if (query.length === 0) {
+      this.resetVisibility();
+      return;
+    }
+
+    this.toggleVisibility(this.itemTargets, false);
+
+    const results = this.searchIndex.search(query);
+    results.forEach((result) =>
+      this.toggleVisibility([result.item.element], true),
+    );
+
+    this.toggleVisibility(this.emptyTargets, results.length === 0);
+    this.updateGroupVisibility();
+  }
+
+  toggleVisibility(elements, isVisible) {
+    elements.forEach((el) => el.classList.toggle("hidden", !isVisible));
+  }
+
+  updateGroupVisibility() {
+    this.groupTargets.forEach((group) => {
+      const hasVisibleItems =
+        group.querySelectorAll(
+          "[data-ruby-ui--command-target='item']:not(.hidden)",
+        ).length > 0;
+      this.toggleVisibility([group], hasVisibleItems);
+    });
+  }
+
+  resetVisibility() {
+    this.toggleVisibility(this.itemTargets, true);
+    this.toggleVisibility(this.groupTargets, true);
+    this.toggleVisibility(this.emptyTargets, false);
+  }
+
+  buildSearchIndex() {
+    const options = {
+      keys: ["value"],
+      threshold: 0.2,
+      includeMatches: true,
+    };
+    const items = this.itemTargets.map((el) => ({
+      value: el.dataset.value,
+      element: el,
+    }));
+    return new Fuse(items, options);
+  }
+
+  handleKeydown(e) {
+    const visibleItems = this.itemTargets.filter(
+      (item) => !item.classList.contains("hidden"),
+    );
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.updateSelectedItem(visibleItems, -1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      visibleItems[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(visibleItems, direction) {
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(visibleItems[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    // Ensure the selected index is within the bounds of the visible items
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = visibleItems.length - 1;
+    } else if (this.selectedIndex >= visibleItems.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(visibleItems[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    element.setAttribute("aria-selected", isSelected.toString());
+  }
+
+  deselectAll() {
+    this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/context_menu_controller.js

@@ -0,0 +1,144 @@
+import { Controller } from "@hotwired/stimulus";
+import tippy from "tippy.js";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    options: {
+      type: Object,
+      default: {},
+    },
+    // make content width of the trigger element (true/false)
+    matchWidth: {
+      type: Boolean,
+      default: false,
+    }
+  }
+
+  connect() {
+    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.initializeTippy();
+    this.selectedIndex = -1;
+  }
+
+  disconnect() {
+    this.destroyTippy();
+  }
+
+  initializeTippy() {
+    const defaultOptions = {
+      content: this.contentTarget.innerHTML,
+      allowHTML: true,
+      interactive: true,
+      onShow: (instance) => {
+        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
+        this.addEventListeners();
+      },
+      onHide: () => {
+        this.removeEventListeners();
+        this.deselectAll();
+      },
+      popperOptions: {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            },
+          },
+        ],
+      }
+    };
+
+    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
+    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  }
+
+  destroyTippy() {
+    if (this.tippy) {
+      this.tippy.destroy();
+    }
+  }
+
+  setContentWidth(instance) {
+    // box-sizing: border-box
+    const content = instance.popper.querySelector('.tippy-content');
+    if (content) {
+      content.style.width = `${instance.reference.offsetWidth}px`;
+    }
+  }
+
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
+  }
+
+  open() {
+    this.tippy.show();
+  }
+
+  close() {
+    this.tippy.hide();
+  }
+
+  handleKeydown(e) {
+    // return if no menu items (one line fix for)
+    if (this.menuItemTargets.length === 0) { return; }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this.updateSelectedItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this.updateSelectedItem(-1);
+    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    }
+  }
+
+  updateSelectedItem(direction) {
+    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute('aria-selected') === 'true') {
+        this.selectedIndex = index;
+      }
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  toggleAriaSelected(element, isSelected) {
+    // Add or remove attribute
+    if (isSelected) {
+      element.setAttribute('aria-selected', 'true');
+    } else {
+      element.removeAttribute('aria-selected');
+    }
+  }
+
+  deselectAll() {
+    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+
+  addEventListeners() {
+    document.addEventListener('keydown', this.boundHandleKeydown);
+  }
+
+  removeEventListeners() {
+    document.removeEventListener('keydown', this.boundHandleKeydown);
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js

@@ -0,0 +1,14 @@
+// app/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  toggle(event) {
+    const key = event.target.dataset.columnKey;
+    const visible = event.target.checked;
+    const root = this.element.closest('[data-controller~="ruby-ui--data-table"]');
+    if (!root) return;
+    root
+      .querySelectorAll(`[data-column="${key}"]`)
+      .forEach((el) => el.classList.toggle("hidden", !visible));
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/data_table_controller.js

@@ -0,0 +1,109 @@
+// app/javascript/controllers/ruby_ui/data_table_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "selectAll",
+    "rowCheckbox",
+    "selectionSummary",
+    "selectionBar",
+    "bulkActions",
+  ];
+
+  connect() {
+    this.updateState();
+  }
+
+  toggleAll(event) {
+    const checked = event.target.checked;
+    this.rowCheckboxTargets.forEach((cb) => {
+      cb.checked = checked;
+    });
+    this.updateState();
+  }
+
+  toggleRow() {
+    this.updateState();
+  }
+
+  bulkSubmit(event) {
+    event.preventDefault();
+    const btn = event.currentTarget;
+    const url = btn.dataset.url;
+    if (!url) return;
+    const method = (btn.dataset.method || "post").toUpperCase();
+    const confirmMessage = btn.dataset.confirm;
+    if (confirmMessage && !window.confirm(confirmMessage)) return;
+    const ids = this.rowCheckboxTargets.filter((cb) => cb.checked).map((cb) => cb.value);
+    if (ids.length === 0) return;
+    const form = document.createElement("form");
+    form.method = "post";
+    form.action = url;
+    form.style.display = "none";
+    const csrf = document.querySelector('meta[name="csrf-token"]');
+    if (csrf) {
+      const t = document.createElement("input");
+      t.type = "hidden";
+      t.name = "authenticity_token";
+      t.value = csrf.content;
+      form.appendChild(t);
+    }
+    if (method !== "POST" && method !== "GET") {
+      const m = document.createElement("input");
+      m.type = "hidden";
+      m.name = "_method";
+      m.value = method.toLowerCase();
+      form.appendChild(m);
+    }
+    ids.forEach((id) => {
+      const i = document.createElement("input");
+      i.type = "hidden";
+      i.name = "ids[]";
+      i.value = id;
+      form.appendChild(i);
+    });
+    document.body.appendChild(form);
+    form.submit();
+  }
+
+  clearSelection(event) {
+    if (event) event.preventDefault();
+    this.rowCheckboxTargets.forEach((cb) => {
+      cb.checked = false;
+    });
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = false;
+      this.selectAllTarget.indeterminate = false;
+    }
+    this.updateState();
+  }
+
+  toggleRowDetail(event) {
+    const button = event.currentTarget;
+    const id = button.getAttribute("aria-controls");
+    if (!id) return;
+    const target = document.getElementById(id);
+    if (!target) return;
+    const expanded = button.getAttribute("aria-expanded") === "true";
+    button.setAttribute("aria-expanded", String(!expanded));
+    target.classList.toggle("hidden", expanded);
+  }
+
+  updateState() {
+    const total = this.rowCheckboxTargets.length;
+    const selected = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = total > 0 && selected === total;
+      this.selectAllTarget.indeterminate = selected > 0 && selected < total;
+    }
+
+    if (this.hasSelectionSummaryTarget) {
+      this.selectionSummaryTarget.textContent = `${selected} of ${total} row(s) selected.`;
+    }
+
+    if (this.hasBulkActionsTarget) {
+      this.bulkActionsTarget.classList.toggle("hidden", selected === 0);
+    }
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/data_table_search_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Module-level map survives controller disconnect/connect across Turbo Frame swaps.
+// Keyed by the search form's action URL.
+const PENDING_FOCUS = new Map();
+
+export default class extends Controller {
+  static values = { delay: { type: Number, default: 300 } };
+
+  connect() {
+    this.timer = null;
+    this.beforeFrameRender = this.captureBeforeRender.bind(this);
+    document.addEventListener("turbo:before-frame-render", this.beforeFrameRender);
+    // New instance after a Turbo Frame swap — check for captured state.
+    this.restoreIfPending();
+  }
+
+  disconnect() {
+    clearTimeout(this.timer);
+    document.removeEventListener("turbo:before-frame-render", this.beforeFrameRender);
+  }
+
+  submit(event) {
+    if (event && event.type !== "input") return;
+    clearTimeout(this.timer);
+    if (this.delayValue <= 0) return;
+    this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue);
+  }
+
+  captureBeforeRender() {
+    const input = this.input();
+    if (!input || document.activeElement !== input) return;
+    PENDING_FOCUS.set(this.key(), {
+      selectionStart: input.selectionStart,
+      selectionEnd: input.selectionEnd
+    });
+  }
+
+  restoreIfPending() {
+    const state = PENDING_FOCUS.get(this.key());
+    if (!state) return;
+    PENDING_FOCUS.delete(this.key());
+    const input = this.input();
+    if (!input) return;
+    input.focus();
+    const len = input.value.length;
+    try {
+      input.setSelectionRange(
+        Math.min(state.selectionStart ?? len, len),
+        Math.min(state.selectionEnd ?? len, len)
+      );
+    } catch (e) {}
+  }
+
+  input() {
+    return this.element.querySelector('input[type="search"]');
+  }
+
+  key() {
+    return this.element.action || "_";
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/dialog_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["content"]
+  static values = {
+    open: {
+      type: Boolean,
+      default: false
+    },
+  }
+
+  connect() {
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  open(e) {
+    e.preventDefault()
+    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
+    // prevent scroll on body
+    document.body.classList.add('overflow-hidden')
+  }
+
+  dismiss() {
+    // allow scroll on body
+    document.body.classList.remove('overflow-hidden')
+    // remove the element
+    this.element.remove()
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/dropdown_menu_controller.js

@@ -0,0 +1,149 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      default: {},
+    },
+  };
+
+  connect() {
+    this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
+    this.selectedIndex = -1;
+
+    this.#setupAutoUpdate();
+  }
+
+  disconnect() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+  }
+
+  #setupAutoUpdate() {
+    this.autoUpdateCleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      this.#computeTooltip.bind(this),
+    );
+  }
+
+  #computeTooltip() {
+    computePosition(this.triggerTarget, this.contentTarget, {
+      placement: this.optionsValue.placement || "top",
+      middleware: [flip(), shift(), offset(8)],
+      strategy: this.optionsValue.strategy || "absolute",
+    }).then(({ x, y }) => {
+      Object.assign(this.contentTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  onClickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.close();
+  }
+
+  toggle() {
+    this.contentTarget.classList.contains("hidden")
+      ? this.#open()
+      : this.close();
+  }
+
+  #open() {
+    this.openValue = true;
+    this.#deselectAll();
+    this.#addEventListeners();
+    this.#computeTooltip();
+    this.contentTarget.classList.remove("hidden");
+  }
+
+  close() {
+    this.openValue = false;
+    this.#removeEventListeners();
+    this.contentTarget.classList.add("hidden");
+  }
+
+  #handleKeydown(e) {
+    // return if no menu items (one line fix for)
+    if (this.menuItemTargets.length === 0) {
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.#updateSelectedItem(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.#updateSelectedItem(-1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    }
+  }
+
+  #updateSelectedItem(direction) {
+    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute("aria-selected") === "true") {
+        this.selectedIndex = index;
+      }
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  #toggleAriaSelected(element, isSelected) {
+    // Add or remove attribute
+    if (isSelected) {
+      element.setAttribute("aria-selected", "true");
+    } else {
+      element.removeAttribute("aria-selected");
+    }
+  }
+
+  #deselectAll() {
+    this.menuItemTargets.forEach((item) =>
+      this.#toggleAriaSelected(item, false),
+    );
+    this.selectedIndex = -1;
+  }
+
+  #addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown);
+  }
+
+  #removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/ruby_ui/form_field_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "error"];
+  static values = { shouldValidate: false };
+
+  connect() {
+    if (this.hasErrorTarget) {
+      if (this.errorTarget.textContent) {
+        this.shouldValidateValue = true;
+      } else {
+        this.errorTarget.classList.add("hidden");
+      }
+    }
+  }
+
+  onInvalid(error) {
+    error.preventDefault();
+
+    this.shouldValidateValue = true;
+    this.#setErrorMessage();
+  }
+
+  onInput() {
+    this.#setErrorMessage();
+  }
+
+  onChange() {
+    this.#setErrorMessage();
+  }
+
+  #setErrorMessage() {
+    if (!this.shouldValidateValue) return;
+
+    if (this.inputTarget.validity.valid) {
+      this.errorTarget.textContent = "";
+      this.errorTarget.classList.add("hidden");
+    } else {
+      this.errorTarget.textContent = this.#getValidationMessage();
+      this.errorTarget.classList.remove("hidden");
+    }
+  }
+
+  #getValidationMessage() {
+    let errorMessage;
+
+    const { validity, dataset, validationMessage } = this.inputTarget;
+
+    if (validity.tooLong) errorMessage = dataset.tooLong;
+    if (validity.tooShort) errorMessage = dataset.tooShort;
+    if (validity.badInput) errorMessage = dataset.badInput;
+    if (validity.typeMismatch) errorMessage = dataset.typeMismatch;
+    if (validity.stepMismatch) errorMessage = dataset.stepMismatch;
+    if (validity.valueMissing) errorMessage = dataset.valueMissing;
+    if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow;
+    if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow;
+    if (validity.patternMismatch) errorMessage = dataset.patternMismatch;
+
+    return errorMessage || validationMessage;
+  }
+}