shadcn_phlexcomponents 0.1.14 → 0.1.17

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -0,0 +1,238 @@
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside } from "stimulus-use";
+import { initFloatingUi } from "../utils/floating_ui";
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  getStimulusInstance,
+  onClickOutside,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from "../utils";
+const onKeydown = (controller, event) => {
+  const key = event.key;
+  if (["Tab", "Enter", " "].includes(key)) event.preventDefault();
+  if (key === "Home") {
+    controller.focusItemByIndex(null, 0);
+  } else if (key === "End") {
+    controller.focusItemByIndex(null, controller.items.length - 1);
+  } else if (key === "Escape") {
+    controller.close();
+  }
+};
+const focusItemByIndex = (controller, event = null, index = null) => {
+  if (event !== null) {
+    const key = event.key;
+    if (key === "ArrowUp") {
+      controller.items[controller.items.length - 1].focus();
+    } else {
+      controller.items[0].focus();
+    }
+  } else if (index !== null) {
+    controller.items[index].focus();
+  }
+};
+const DropdownMenuController = class extends Controller {
+  // targets
+  static targets = ["trigger", "contentContainer", "content", "item"];
+  // values
+  static values = {
+    isOpen: Boolean,
+  };
+  connect() {
+    this.closestContentSelector =
+      '[data-dropdown-menu-target="content"], [data-dropdown-menu-sub-target="content"]';
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: this.closestContentSelector,
+    });
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+  }
+  toggle(event) {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open(event);
+    }
+  }
+  open(event) {
+    this.isOpenValue = true;
+    // Sub menus are not connected to the DOM yet when dropdown menu is connected.
+    // So we initialize them here instead of in connect().
+    if (this.subMenuControllers === undefined) {
+      const subMenuControllers = [];
+      const subMenus = Array.from(
+        this.contentTarget.querySelectorAll(
+          '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+        ),
+      );
+      subMenus.forEach((subMenu) => {
+        const subMenuController = getStimulusInstance(
+          "dropdown-menu-sub",
+          subMenu,
+        );
+        if (subMenuController) {
+          subMenuControllers.push(subMenuController);
+        }
+      });
+      this.subMenuControllers = subMenuControllers;
+    }
+    let elementToFocus = null;
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      if (["ArrowDown", "Enter", " "].includes(key)) {
+        elementToFocus = this.items[0];
+      }
+    } else {
+      elementToFocus = this.contentTarget;
+    }
+    focusElement(elementToFocus);
+  }
+  close() {
+    this.isOpenValue = false;
+    this.subMenuControllers.forEach((subMenuController) => {
+      subMenuController.closeImmediately();
+    });
+  }
+  focusItem(event) {
+    const item = event.currentTarget;
+    let items = [];
+    const content = item.closest(this.closestContentSelector);
+    const isSubMenu =
+      content.dataset.shadcnPhlexcomponents === "dropdown-menu-sub-content";
+    if (isSubMenu) {
+      const subMenu = content.closest(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      );
+      const subMenuController = this.subMenuControllers.find(
+        (subMenuController) => subMenuController.element == subMenu,
+      );
+      if (subMenuController) {
+        items = subMenuController.items;
+      }
+    } else {
+      items = this.items;
+    }
+    const index = items.indexOf(item);
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      let newIndex = 0;
+      if (key === "ArrowUp") {
+        newIndex = getPreviousEnabledIndex({
+          items,
+          currentIndex: index,
+          wrapAround: false,
+        });
+      } else {
+        newIndex = getNextEnabledIndex({
+          items,
+          currentIndex: index,
+          wrapAround: false,
+        });
+      }
+      items[newIndex].focus();
+    } else {
+      // item mouseover event
+      items[index].focus();
+    }
+    // Close submenus on the same level
+    const subMenusInContent = Array.from(
+      content.querySelectorAll(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      ),
+    );
+    subMenusInContent.forEach((subMenu) => {
+      const subMenuController = this.subMenuControllers.find(
+        (subMenuController) => subMenuController.element == subMenu,
+      );
+      if (subMenuController) {
+        subMenuController.closeImmediately();
+      }
+    });
+  }
+  onItemFocus(event) {
+    const item = event.currentTarget;
+    item.tabIndex = 0;
+  }
+  onItemBlur(event) {
+    const item = event.currentTarget;
+    item.tabIndex = -1;
+  }
+  focusItemByIndex(event = null, index = null) {
+    focusItemByIndex(this, event, index);
+  }
+  focusContent(event) {
+    const item = event.currentTarget;
+    const content = item.closest(this.closestContentSelector);
+    content.focus();
+  }
+  select(event) {
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      const item = event.currentTarget || event.target;
+      // For rails button_to
+      if (item && (key === "Enter" || key === " ")) {
+        item.click();
+      }
+    }
+    this.close();
+  }
+  clickOutside(event) {
+    onClickOutside(this, event);
+  }
+  isOpenValueChanged(isOpen, previousIsOpen) {
+    if (isOpen) {
+      lockScroll(this.contentTarget.id);
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+        setEqualWidth: false,
+      });
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      });
+      this.setupEventListeners();
+    } else {
+      unlockScroll(this.contentTarget.id);
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget);
+      }
+      this.cleanupEventListeners();
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    onKeydown(this, event);
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+};
+export { DropdownMenuController, onKeydown, focusItemByIndex };

data/app/javascript/controllers/dropdown_menu_sub_controller.js

@@ -0,0 +1,118 @@
+import { Controller } from "@hotwired/stimulus";
+import { initFloatingUi } from "../utils/floating_ui";
+import {
+  ON_OPEN_FOCUS_DELAY,
+  getSameLevelItems,
+  showContent,
+  hideContent,
+  getStimulusInstance,
+} from "../utils";
+const DropdownMenuSubController = class extends Controller {
+  // targets
+  static targets = ["trigger", "contentContainer", "content"];
+  // values
+  static values = {
+    isOpen: Boolean,
+  };
+  connect() {
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: Array.from(
+        this.contentTarget.querySelectorAll(
+          '[data-dropdown-menu-target="item"], [data-dropdown-menu-sub-target="trigger"]',
+        ),
+      ),
+      closestContentSelector: '[data-dropdown-menu-sub-target="content"]',
+    });
+  }
+  open(event = null) {
+    clearTimeout(this.closeTimeout);
+    this.isOpenValue = true;
+    setTimeout(() => {
+      if (event instanceof KeyboardEvent) {
+        const key = event.key;
+        if (["ArrowRight", "Enter", " "].includes(key)) {
+          this.focusItemByIndex(null, 0);
+        }
+      }
+    }, ON_OPEN_FOCUS_DELAY);
+  }
+  close() {
+    this.closeTimeout = window.setTimeout(() => {
+      this.isOpenValue = false;
+    }, 250);
+  }
+  closeOnLeftKeydown() {
+    this.closeImmediately();
+    this.triggerTarget.focus();
+  }
+  focusItemByIndex(event, index) {
+    if (event) {
+      const key = event.key;
+      if (key === "ArrowUp") {
+        this.items[this.items.length - 1].focus();
+      } else {
+        this.items[0].focus();
+      }
+    } else if (index !== null) {
+      this.items[index].focus();
+    }
+  }
+  closeParentSubMenu() {
+    const parentContent = this.triggerTarget.closest(
+      '[data-dropdown-menu-sub-target="content"]',
+    );
+    if (parentContent) {
+      const subMenu = parentContent.closest(
+        '[data-shadcn-phlexcomponents="dropdown-menu-sub"]',
+      );
+      if (subMenu) {
+        const subMenuController = getStimulusInstance(
+          "dropdown-menu-sub",
+          subMenu,
+        );
+        if (subMenuController) {
+          subMenuController.closeImmediately();
+          setTimeout(() => {
+            subMenuController.triggerTarget.focus();
+          }, 100);
+        }
+      }
+    }
+  }
+  closeImmediately() {
+    this.isOpenValue = false;
+  }
+  isOpenValueChanged(isOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: -2,
+      });
+    } else {
+      this.closeTimeout = window.setTimeout(() => {
+        hideContent({
+          trigger: this.triggerTarget,
+          content: this.contentTarget,
+          contentContainer: this.contentContainerTarget,
+        });
+      });
+      this.cleanupEventListeners();
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+  }
+};
+export { DropdownMenuSubController };

data/app/javascript/controllers/form_field_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+const FormFieldController = class extends Controller {
+  connect() {
+    const hintContainer = this.element.querySelector("[data-remove-label]");
+    const labelContainer = this.element.querySelector("[data-remove-hint]");
+    if (hintContainer) {
+      const label = hintContainer.querySelector("label");
+      const hint = hintContainer.querySelector("p");
+      label.remove();
+      hintContainer.replaceWith(hint);
+    }
+    if (labelContainer) {
+      const hint = labelContainer.querySelector("p");
+      const label = labelContainer.querySelector("label");
+      hint.remove();
+      labelContainer.replaceWith(label);
+    }
+  }
+};
+export { FormFieldController };

data/app/javascript/controllers/hover_card_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus";
+import { useHover } from "stimulus-use";
+import { initFloatingUi } from "../utils/floating_ui";
+import { showContent, hideContent } from "../utils";
+const HoverCardController = class extends Controller {
+  // targets
+  static targets = ["trigger", "content", "contentContainer"];
+  // values
+  static values = {
+    isOpen: Boolean,
+  };
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    useHover(this, { element: this.triggerTarget, dispatchEvent: false });
+  }
+  open() {
+    window.clearTimeout(this.closeTimeout);
+    this.isOpenValue = true;
+  }
+  close() {
+    this.closeTimeout = window.setTimeout(() => {
+      this.isOpenValue = false;
+    }, 250);
+  }
+  // for useHover
+  mouseEnter() {
+    this.open();
+  }
+  // for useHover
+  mouseLeave() {
+    this.close();
+  }
+  isOpenValueChanged(isOpen) {
+    if (isOpen) {
+      showContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      this.setupEventListeners();
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      });
+    } else {
+      hideContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      this.cleanupEventListeners();
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (key === "Escape") {
+      this.close();
+    }
+  }
+};
+export { HoverCardController };

data/app/javascript/controllers/loading_button_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+const LoadingButtonController = class extends Controller {
+  connect() {
+    const el = this.element;
+    const form = el.closest("form");
+    if (form && form.dataset.turbo === "false") {
+      form.addEventListener("submit", () => {
+        form.ariaBusy = "true";
+        el.disabled = true;
+      });
+    }
+  }
+};
+export { LoadingButtonController };

data/app/javascript/controllers/popover_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside } from "stimulus-use";
+import { initFloatingUi } from "../utils/floating_ui";
+import {
+  focusTrigger,
+  getFocusableElements,
+  showContent,
+  hideContent,
+  onClickOutside,
+  handleTabNavigation,
+  focusElement,
+} from "../utils";
+const PopoverController = class extends Controller {
+  // targets
+  static targets = ["trigger", "contentContainer", "content"];
+  // values
+  static values = { isOpen: Boolean };
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+  }
+  toggle() {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  open() {
+    this.isOpenValue = true;
+  }
+  close() {
+    this.isOpenValue = false;
+  }
+  clickOutside(event) {
+    onClickOutside(this, event);
+  }
+  isOpenValueChanged(isOpen, previousIsOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      this.cleanup = initFloatingUi({
+        referenceElement: this.triggerTarget,
+        floatingElement: this.contentContainerTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 4,
+      });
+      const focusableElements = getFocusableElements(this.contentTarget);
+      focusElement(focusableElements[0]);
+      this.setupEventListeners();
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget);
+      }
+      this.cleanupEventListeners();
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (key === "Escape") {
+      this.close();
+    } else if (key === "Tab") {
+      handleTabNavigation(this.contentTarget, event);
+    }
+  }
+};
+export { PopoverController };

data/app/javascript/controllers/progress_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+const ProgressController = class extends Controller {
+  // targets
+  static targets = ["indicator"];
+  // values
+  static values = {
+    percent: Number,
+  };
+  percentValueChanged(value) {
+    this.element.setAttribute("aria-valuenow", `${value}`);
+    this.indicatorTarget.style.transform = `translateX(-${100 - value}%)`;
+  }
+};
+export { ProgressController };

data/app/javascript/controllers/radio_group_controller.js

@@ -0,0 +1,80 @@
+import { Controller } from "@hotwired/stimulus";
+const RadioGroupController = class extends Controller {
+  // targets
+  static targets = ["item", "input", "indicator"];
+  // values
+  static values = {
+    selected: String,
+  };
+  connect() {
+    if (!this.selectedValue) {
+      this.itemTargets[0].tabIndex = 0;
+    }
+  }
+  select(event) {
+    const item = event.currentTarget;
+    this.selectedValue = item.dataset.value;
+  }
+  selectItem(event) {
+    const focusableItems = this.itemTargets.filter((t) => !t.disabled);
+    const item = event.currentTarget;
+    const index = focusableItems.indexOf(item);
+    const key = event.key;
+    let newIndex = 0;
+    if (["ArrowUp", "ArrowLeft"].includes(key)) {
+      newIndex = index - 1;
+      if (newIndex < 0) {
+        newIndex = focusableItems.length - 1;
+      }
+    } else {
+      newIndex = index + 1;
+      if (newIndex > focusableItems.length - 1) {
+        newIndex = 0;
+      }
+    }
+    this.selectedValue = focusableItems[newIndex].dataset.value;
+  }
+  preventDefault(event) {
+    event.preventDefault();
+  }
+  focusItem() {
+    const item = this.itemTargets.find(
+      (i) => i.dataset.value === this.selectedValue,
+    );
+    if (!item) return;
+    // Focus first item that is not disabled and allow it to be focused
+    if (item.disabled) {
+      item.tabIndex = -1;
+      const focusableItems = this.itemTargets.filter((t) => !t.disabled);
+      if (focusableItems.length > 0) {
+        focusableItems[0].focus();
+        focusableItems[0].tabIndex = 0;
+      }
+    } else {
+      item.focus();
+    }
+  }
+  selectedValueChanged(value) {
+    this.itemTargets.forEach((item) => {
+      const input = item.querySelector('[data-radio-group-target="input"]');
+      const indicator = item.querySelector(
+        '[data-radio-group-target="indicator"]',
+      );
+      if (value === item.dataset.value) {
+        input.checked = true;
+        item.tabIndex = 0;
+        item.ariaChecked = "true";
+        item.dataset.state = "checked";
+        indicator.classList.remove("hidden");
+      } else {
+        input.checked = false;
+        item.tabIndex = -1;
+        item.ariaChecked = "false";
+        item.dataset.state = "unchecked";
+        indicator.classList.add("hidden");
+      }
+    });
+    this.focusItem();
+  }
+};
+export { RadioGroupController };