shadcn_phlexcomponents 0.1.11 → 0.1.16

data/app/javascript/controllers/select_controller.js

@@ -0,0 +1,265 @@
+import { useClickOutside } from "stimulus-use";
+import { onKeydown, focusItemByIndex } from "./dropdown_menu_controller";
+import { initFloatingUi } from "../utils/floating_ui";
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  onClickOutside,
+  setGroupLabelsId,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from "../utils";
+import { Controller } from "@hotwired/stimulus";
+const SelectController = class extends Controller {
+  // targets
+  static targets = [
+    "trigger",
+    "contentContainer",
+    "content",
+    "item",
+    "triggerText",
+    "group",
+    "select",
+  ];
+  // values
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+  };
+  connect() {
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: '[data-select-target="content"]',
+    });
+    this.itemsInnerText = this.items.map((i) => i.innerText.trim());
+    this.searchString = "";
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    setGroupLabelsId(this);
+  }
+  toggle(event) {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open(event);
+    }
+  }
+  open(event) {
+    this.isOpenValue = true;
+    let elementToFocus = null;
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      );
+      if (item && !item.dataset.disabled) {
+        elementToFocus = item;
+      }
+    }
+    if (!elementToFocus) {
+      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;
+  }
+  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);
+  }
+  focusItem(event) {
+    const item = event.currentTarget;
+    const index = this.items.indexOf(item);
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      let newIndex = 0;
+      if (key === "ArrowUp") {
+        newIndex = getPreviousEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        });
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        });
+      }
+      this.items[newIndex].focus();
+    } else {
+      // item mouseover event
+      this.items[index].focus();
+    }
+  }
+  focusContent() {
+    this.contentTarget.focus();
+  }
+  select(event) {
+    const item = event.currentTarget;
+    const value = item.dataset.value;
+    this.selectedValue = value;
+    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: true,
+      });
+      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();
+    }
+  }
+  selectedValueChanged(value) {
+    const item = this.itemTargets.find((i) => i.dataset.value === value);
+    if (item) {
+      this.triggerTextTarget.textContent = item.textContent;
+      this.itemTargets.forEach((i) => {
+        if (i.dataset.value === value) {
+          i.setAttribute("aria-selected", "true");
+        } else {
+          i.setAttribute("aria-selected", "false");
+        }
+      });
+      this.selectTarget.value = value;
+    }
+    this.triggerTarget.dataset.hasValue = `${!!value && value.length > 0}`;
+    const placeholder = this.triggerTarget.dataset.placeholder;
+    if (placeholder && this.triggerTarget.dataset.hasValue === "false") {
+      this.triggerTextTarget.textContent = placeholder;
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    onKeydown(this, event);
+    const { key, altKey, ctrlKey, metaKey } = event;
+    if (
+      key === "Backspace" ||
+      key === "Clear" ||
+      (key.length === 1 && key !== " " && !altKey && !ctrlKey && !metaKey)
+    ) {
+      this.handleSearch(key);
+    }
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+  // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+  handleSearch(char) {
+    const searchString = this.getSearchString(char);
+    const focusedItem = this.items.find(
+      (item) => document.activeElement === item,
+    );
+    const focusedIndex = focusedItem ? this.items.indexOf(focusedItem) : 0;
+    const searchIndex = this.getIndexByLetter(searchString, focusedIndex + 1);
+    // if a match was found, go to it
+    if (searchIndex >= 0) {
+      this.focusItemByIndex(null, searchIndex);
+    }
+    // if no matches, clear the timeout and search string
+    else {
+      window.clearTimeout(this.searchTimeout);
+      this.searchString = "";
+    }
+  }
+  filterItemsInnerText(items, filter) {
+    return items.filter((item) => {
+      const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0;
+      return matches;
+    });
+  }
+  getSearchString(char) {
+    // reset typing timeout and start new timeout
+    // this allows us to make multiple-letter matches, like a native select
+    if (typeof this.searchTimeout === "number") {
+      window.clearTimeout(this.searchTimeout);
+    }
+    this.searchTimeout = window.setTimeout(() => {
+      this.searchString = "";
+    }, 500);
+    // add most recent letter to saved search string
+    this.searchString += char;
+    return this.searchString;
+  }
+  // return the index of an option from an array of options, based on a search string
+  // if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+  getIndexByLetter(filter, startIndex) {
+    const orderedItems = [
+      ...this.itemsInnerText.slice(startIndex),
+      ...this.itemsInnerText.slice(0, startIndex),
+    ];
+    const firstMatch = this.filterItemsInnerText(orderedItems, filter)[0];
+    const allSameLetter = (array) =>
+      array.every((letter) => letter === array[0]);
+    // first check if there is an exact match for the typed string
+    if (firstMatch) {
+      const index = this.itemsInnerText.indexOf(firstMatch);
+      return index;
+    }
+    // if the same letter is being repeated, cycle through first-letter matches
+    else if (allSameLetter(filter.split(""))) {
+      const matches = this.filterItemsInnerText(orderedItems, filter[0]);
+      const index = this.itemsInnerText.indexOf(matches[0]);
+      return index;
+    }
+    // if no matches, return -1
+    else {
+      return -1;
+    }
+  }
+};
+export { SelectController };

data/app/javascript/controllers/sidebar_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus";
+export default class default_1 extends Controller {
+  static targets = ["panel", "panelOffset"];
+  connect() {
+    this.width = this.element.offsetWidth;
+  }
+  toggle() {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  open() {
+    this.element.dataset.state = "expanded";
+    this.element.dataset.collapsible = "";
+    this.panelTarget.style.removeProperty("left");
+    this.panelOffsetTarget.style.removeProperty("width");
+  }
+  close() {
+    this.element.dataset.state = "collapsed";
+    this.element.dataset.collapsible = "offcanvas";
+    this.panelTarget.style.left = `-${this.width}px`;
+    this.panelOffsetTarget.style.width = `${0}`;
+  }
+  isOpen() {
+    return this.element.dataset.state === "expanded";
+  }
+}

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus";
+export default class extends Controller {
+  connect() {
+    this.sidebarId = this.element.dataset.sidebarId;
+  }
+  toggle() {
+    const sidebar = this.application.getControllerForElementAndIdentifier(
+      document.querySelector(`#${this.sidebarId}`),
+      "sidebar",
+    );
+    if (sidebar) {
+      sidebar.toggle();
+    }
+  }
+}

data/app/javascript/controllers/slider_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from "@hotwired/stimulus";
+import noUiSlider from "nouislider";
+const SliderController = class extends Controller {
+  // targets
+  static targets = ["slider", "hiddenInput", "endHiddenInput"];
+  connect() {
+    this.range = this.element.dataset.range === "true";
+    this.DOMClickListener = this.onDOMClick.bind(this);
+    this.onUpdateValuesListener = this.onUpdateValues.bind(this);
+    const options = this.getOptions();
+    this.slider = noUiSlider.create(this.sliderTarget, options);
+    if (this.element.dataset.disabled === "true") {
+      this.slider.disable();
+    }
+    if (this.element.dataset.id) {
+      const lowerHandle =
+        this.slider.target.querySelector(".noUi-handle-lower");
+      if (lowerHandle) {
+        lowerHandle.id = this.element.dataset.id;
+      }
+    }
+    this.slider.on("update", this.onUpdateValuesListener);
+    document.addEventListener("click", this.DOMClickListener);
+  }
+  disconnect() {
+    document.removeEventListener("click", this.DOMClickListener);
+  }
+  getOptions() {
+    const defaultOptions = {
+      connect: this.range ? true : "lower",
+      tooltips: true,
+    };
+    defaultOptions.range = {
+      min: [parseFloat(this.element.dataset.min || "0")],
+      max: [parseFloat(this.element.dataset.max || "100")],
+    };
+    defaultOptions.step = parseFloat(this.element.dataset.step || "1");
+    if (this.range) {
+      defaultOptions.start = [
+        parseFloat(this.element.dataset.value || "0"),
+        parseFloat(this.element.dataset.endValue || "0"),
+      ];
+      defaultOptions.handleAttributes = [
+        { "aria-label": "lower" },
+        { "aria-label": "upper" },
+      ];
+    } else {
+      defaultOptions.start = [parseFloat(this.element.dataset.value || "0")];
+      defaultOptions.handleAttributes = [{ "aria-label": "lower" }];
+    }
+    defaultOptions.orientation =
+      this.element.dataset.orientation || "horizontal";
+    try {
+      return {
+        ...defaultOptions,
+        ...JSON.parse(this.element.dataset.options || ""),
+      };
+    } catch {
+      return defaultOptions;
+    }
+  }
+  onUpdateValues(values) {
+    this.hiddenInputTarget.value = `${values[0]}`;
+    if (this.range && this.hasEndHiddenInputTarget) {
+      this.endHiddenInputTarget.value = `${values[1]}`;
+    }
+  }
+  onDOMClick(event) {
+    const target = event.target;
+    // Focus handle of slider when label is clicked.
+    if (target instanceof HTMLLabelElement) {
+      const id = target.getAttribute("for");
+      if (id === this.element.dataset.id) {
+        const handle = document.querySelector(`#${id}`);
+        if (handle) {
+          handle.focus();
+        }
+      }
+    }
+  }
+};
+export { SliderController };

data/app/javascript/controllers/switch_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus";
+const SwitchController = class extends Controller {
+  // targets
+  static targets = ["input", "thumb"];
+  // values
+  static values = {
+    isChecked: Boolean,
+  };
+  toggle() {
+    this.isCheckedValue = !this.isCheckedValue;
+  }
+  isCheckedValueChanged(value) {
+    if (value) {
+      this.element.ariaChecked = "true";
+      this.element.dataset.state = "checked";
+      this.thumbTarget.dataset.state = "checked";
+      this.inputTarget.checked = true;
+    } else {
+      this.element.ariaChecked = "false";
+      this.element.dataset.state = "unchecked";
+      this.thumbTarget.dataset.state = "unchecked";
+      this.inputTarget.checked = false;
+    }
+  }
+};
+export { SwitchController };

data/app/javascript/controllers/tabs_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus";
+import { getNextEnabledIndex, getPreviousEnabledIndex } from "../utils";
+const TabsController = class extends Controller {
+  // targets
+  static targets = ["trigger", "content"];
+  // values
+  static values = {
+    active: String,
+  };
+  connect() {
+    if (!this.activeValue) {
+      this.activeValue = this.triggerTargets[0].dataset.value;
+    }
+  }
+  setActiveTab(event) {
+    const target = event.currentTarget;
+    if (event instanceof MouseEvent) {
+      this.activeValue = target.dataset.value;
+    } else {
+      const key = event.key;
+      const focusableTriggers = this.triggerTargets.filter((t) => !t.disabled);
+      const index = focusableTriggers.indexOf(target);
+      let newIndex = 0;
+      if (key === "ArrowLeft") {
+        newIndex = getPreviousEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        });
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        });
+      }
+      this.activeValue = focusableTriggers[newIndex].dataset.value;
+      focusableTriggers[newIndex].focus();
+    }
+  }
+  activeValueChanged(value) {
+    this.triggerTargets.forEach((trigger) => {
+      const triggerValue = trigger.dataset.value;
+      const content = this.contentTargets.find((c) => {
+        return c.dataset.value === triggerValue;
+      });
+      if (!content) {
+        throw new Error(
+          `Could not find TabsContent with value "${triggerValue}"`,
+        );
+      }
+      if (triggerValue === value) {
+        trigger.ariaSelected = "true";
+        trigger.tabIndex = 0;
+        trigger.dataset.state = "active";
+        content.classList.remove("hidden");
+      } else {
+        trigger.ariaSelected = "false";
+        trigger.tabIndex = -1;
+        trigger.dataset.state = "inactive";
+        content.classList.add("hidden");
+      }
+    });
+  }
+};
+export { TabsController };

data/app/javascript/controllers/theme_switcher_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus";
+const ThemeSwitcherController = class extends Controller {
+  initialize() {
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      this.setDarkMode();
+    } else {
+      this.setLightMode();
+    }
+  }
+  toggle() {
+    if (document.documentElement.classList.contains("dark")) {
+      this.setLightMode();
+    } else {
+      this.setDarkMode();
+    }
+  }
+  setLightMode() {
+    localStorage.theme = "light";
+    document.documentElement.classList.remove("dark");
+    document.documentElement.style.colorScheme = "";
+  }
+  setDarkMode() {
+    localStorage.theme = "dark";
+    document.documentElement.classList.add("dark");
+    document.documentElement.style.colorScheme = "dark";
+  }
+};
+export { ThemeSwitcherController };

data/app/javascript/controllers/toast_container_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus";
+import DOMPurify from "dompurify";
+const ToastContainerController = class extends Controller {
+  addToast({
+    title,
+    description,
+    action,
+    variant = "default",
+    duration = 5000,
+  }) {
+    const template =
+      variant === "default"
+        ? this.element.querySelector('[data-variant="default"]')
+        : this.element.querySelector('[data-variant="destructive"]');
+    const clone = template.content.cloneNode(true);
+    const toastTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast"]',
+    );
+    toastTemplate.dataset.duration = String(duration);
+    const titleTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-title"]',
+    );
+    const descriptionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-description"]',
+    );
+    const actionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-action"]',
+    );
+    titleTemplate.innerHTML = DOMPurify.sanitize(title);
+    if (description) {
+      descriptionTemplate.innerHTML = DOMPurify.sanitize(description);
+    } else {
+      descriptionTemplate.remove();
+    }
+    if (action) {
+      const element = document.createElement("div");
+      element.innerHTML = DOMPurify.sanitize(action);
+      const actionElement = element.firstElementChild;
+      const classes = actionTemplate.classList;
+      actionElement.classList.add(...classes);
+      actionTemplate.replaceWith(actionElement);
+    } else {
+      actionTemplate.remove();
+    }
+    this.element.append(clone);
+  }
+};
+export { ToastContainerController };

data/app/javascript/controllers/toast_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus";
+import { ANIMATION_OUT_DELAY } from "../utils";
+const ToastController = class extends Controller {
+  connect() {
+    this.duration = Number(this.element.dataset.duration);
+    this.close();
+  }
+  cancelClose() {
+    window.clearTimeout(this.closeTimeout);
+  }
+  close() {
+    if (this.duration > 0) {
+      this.closeTimeout = window.setTimeout(() => {
+        this.element.dataset.state = "closed";
+        setTimeout(() => {
+          this.element.remove();
+        }, ANIMATION_OUT_DELAY);
+      }, this.duration);
+    }
+  }
+};
+export { ToastController };

data/app/javascript/controllers/toggle_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+const ToggleController = class extends Controller {
+  // values
+  static values = {
+    isOn: Boolean,
+  };
+  toggle() {
+    this.isOnValue = !this.isOnValue;
+  }
+  isOnValueChanged(isOn) {
+    if (isOn) {
+      this.element.dataset.state = "on";
+      this.element.ariaPressed = "true";
+    } else {
+      this.element.dataset.state = "off";
+      this.element.ariaPressed = "false";
+    }
+  }
+};
+export { ToggleController };

data/app/javascript/controllers/toggle_group_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+const ToggleController = class extends Controller {
+  // values
+  static values = {
+    isOn: Boolean,
+  };
+  toggle() {
+    this.isOnValue = !this.isOnValue;
+  }
+  isOnValueChanged(isOn) {
+    if (isOn) {
+      this.element.dataset.state = "on";
+      this.element.ariaPressed = "true";
+    } else {
+      this.element.dataset.state = "off";
+      this.element.ariaPressed = "false";
+    }
+  }
+};
+export { ToggleController };