shadcn_phlexcomponents 0.1.11 → 0.1.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e69ba212a41e6644e473fa1e443b1114b7095bec0b682399932d1d41451ba8fa
-  data.tar.gz: 686b0e0582a7c277eb1ddaa5476edf08d300e8aa6ce1d0e0c8ceca7ed2dc3cdc
+  metadata.gz: dfa235b75ee12df9314407a533502fbda6e54d16292eec4c2b9c3ed401d2344f
+  data.tar.gz: 67c348141c2bc1fbc3ea4a29058b6bdc75e8c729bdffc2c4de6c73b4ec7d86e3
 SHA512:
-  metadata.gz: 99248f0f5d9ec5d554d86aa24a4340f8fb9232b7a4618bfc689e2aa0fe6e2f355a426ac5b04549ac3548453c1be17623c3f8d0fab6158c18a80c9fadfbabaddc
-  data.tar.gz: e285a996a8aa294d3fda26d16b9e2cf3108fec5c256faa13a123e5bff949c9ff6837cc38752006acc4824df3a2c1492c653a7674f17f85935c8330f7fb4da761
+  metadata.gz: eb9166677cafed3bc87dae8206d584f0702bd66cfd6675987d70cda32eeb8ecaf0f1c62651d2206ca4dfcd57bad060d4c716ee7431f7abe9f2a0a62062ea53b4
+  data.tar.gz: 3dc09e749fe056cbf582c0eb8accb97347da9ba506992d5e471fb181f5cbe47249bd970b25b85f97a87e1e7d98e47f61a212c16965486b52b3563332b218bbbe

data/app/javascript/controllers/accordion_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  showContent,
+  hideContent,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+} from "../utils";
+const AccordionController = class extends Controller {
+  // targets
+  static targets = ["item", "trigger", "content"];
+  // values
+  static values = { openItems: Array };
+  connect() {
+    this.multiple = this.element.dataset.multiple === "true";
+  }
+  contentTargetConnected(content) {
+    setTimeout(() => {
+      this.setContentHeight(content);
+    }, 100);
+  }
+  toggle(event) {
+    const trigger = event.currentTarget;
+    const item = this.itemTargets.find((item) => {
+      return item.contains(trigger);
+    });
+    if (!item) return;
+    const value = item.dataset.value;
+    const isOpen = this.openItemsValue.includes(value);
+    if (isOpen) {
+      this.openItemsValue = this.openItemsValue.filter((v) => v !== value);
+    } else {
+      if (this.multiple) {
+        this.openItemsValue = [...this.openItemsValue, value];
+      } else {
+        this.openItemsValue = [value];
+      }
+    }
+  }
+  focusTrigger(event) {
+    const trigger = event.currentTarget;
+    const key = event.key;
+    const focusableTriggers = this.triggerTargets.filter(
+      (trigger) => !trigger.disabled,
+    );
+    const index = focusableTriggers.indexOf(trigger);
+    let newIndex = 0;
+    if (key === "ArrowUp") {
+      newIndex = getPreviousEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      });
+    } else {
+      newIndex = getNextEnabledIndex({
+        items: focusableTriggers,
+        currentIndex: index,
+        wrapAround: true,
+      });
+    }
+    focusableTriggers[newIndex].focus();
+  }
+  openItemsValueChanged(openItems) {
+    this.itemTargets.forEach((item) => {
+      const itemValue = item.dataset.value;
+      const trigger = this.triggerTargets.find((trigger) =>
+        item.contains(trigger),
+      );
+      const content = this.contentTargets.find((content) =>
+        item.contains(content),
+      );
+      if (openItems.includes(itemValue)) {
+        showContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        });
+      } else {
+        hideContent({
+          trigger,
+          content: content,
+          contentContainer: content,
+        });
+      }
+    });
+  }
+  setContentHeight(element) {
+    const height =
+      this.getContentHeight(element) || element.getBoundingClientRect().height;
+    element.style.setProperty(
+      "--radix-accordion-content-height",
+      `${height}px`,
+    );
+  }
+  getContentHeight(el) {
+    const clone = el.cloneNode(true);
+    Object.assign(clone.style, {
+      display: "block",
+      position: "absolute",
+      visibility: "hidden",
+    });
+    document.body.appendChild(clone);
+    const height = clone.getBoundingClientRect().height;
+    document.body.removeChild(clone);
+    return height;
+  }
+};
+export { AccordionController };

data/app/javascript/controllers/alert_dialog_controller.js

@@ -0,0 +1,7 @@
+import { DialogController } from "./dialog_controller";
+const AlertDialogController = class extends DialogController {
+  onDOMClick() {
+    return;
+  }
+};
+export { AlertDialogController };

data/app/javascript/controllers/avatar_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+const AvatarController = class extends Controller {
+  // targets
+  static targets = ["image", "fallback"];
+  connect() {
+    this.imageTarget.onerror = () => {
+      if (this.hasFallbackTarget) {
+        this.fallbackTarget.classList.remove("hidden");
+      }
+      this.imageTarget.classList.add("hidden");
+    };
+  }
+};
+export { AvatarController };

data/app/javascript/controllers/checkbox_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus";
+const CheckboxController = class extends Controller {
+  // targets
+  static targets = ["input", "indicator"];
+  // values
+  static values = {
+    isChecked: Boolean,
+  };
+  toggle() {
+    this.isCheckedValue = !this.isCheckedValue;
+  }
+  preventDefault(event) {
+    event.preventDefault();
+  }
+  isCheckedValueChanged(isChecked) {
+    if (isChecked) {
+      this.element.ariaChecked = "true";
+      this.element.dataset.state = "checked";
+      this.inputTarget.checked = true;
+      this.indicatorTarget.classList.remove("hidden");
+    } else {
+      this.element.ariaChecked = "false";
+      this.element.dataset.state = "unchecked";
+      this.inputTarget.checked = false;
+      this.indicatorTarget.classList.add("hidden");
+    }
+  }
+};
+export { CheckboxController };

data/app/javascript/controllers/collapsible_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus";
+import { hideContent, showContent } from "../utils";
+const CollapsibleController = class extends Controller {
+  // targets
+  static targets = ["trigger", "content"];
+  // values
+  static values = {
+    isOpen: Boolean,
+  };
+  toggle() {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  open() {
+    this.isOpenValue = true;
+  }
+  close() {
+    this.isOpenValue = false;
+  }
+  isOpenValueChanged(isOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      });
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+      });
+    }
+  }
+};
+export { CollapsibleController };

data/app/javascript/controllers/combobox_controller.js

@@ -0,0 +1,278 @@
+import {
+  ON_OPEN_FOCUS_DELAY,
+  lockScroll,
+  showContent,
+  unlockScroll,
+  hideContent,
+  focusTrigger,
+  setGroupLabelsId,
+  onClickOutside,
+} from "../utils";
+import { initFloatingUi } from "../utils/floating_ui";
+import { Controller } from "@hotwired/stimulus";
+import Fuse from "fuse.js";
+import {
+  scrollToItem,
+  highlightItem,
+  highlightItemByIndex,
+  filteredItemsChanged,
+  setItemsGroupId,
+  search,
+  clearRemoteResults,
+  resetState,
+} from "../utils/command";
+import { useClickOutside, useDebounce } from "stimulus-use";
+const ComboboxController = class extends Controller {
+  // targets
+  static targets = [
+    "trigger",
+    "triggerText",
+    "contentContainer",
+    "content",
+    "item",
+    "group",
+    "hiddenInput",
+    "searchInput",
+    "list",
+    "listContainer",
+    "empty",
+    "loading",
+    "error",
+  ];
+  // values
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+    filteredItemIndexes: Array,
+  };
+  static debounces = ["search"];
+  connect() {
+    this.orderedItems = [...this.itemTargets];
+    this.itemsInnerText = this.itemTargets.map((i) => i.innerText.trim());
+    this.fuse = new Fuse(this.itemsInnerText);
+    this.filteredItemIndexesValue = Array.from(
+      { length: this.itemTargets.length },
+      (_, i) => i,
+    );
+    this.isLoading = false;
+    this.filteredItems = this.itemTargets;
+    this.isDirty = false;
+    this.searchPath = this.element.dataset.searchPath;
+    setGroupLabelsId(this);
+    setItemsGroupId(this);
+    useDebounce(this);
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+  }
+  toggle() {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  open() {
+    this.isOpenValue = true;
+    setTimeout(() => {
+      this.searchInputTarget.focus();
+      let index = 0;
+      console.log("this.selectedValue", this.selectedValue);
+      if (this.selectedValue) {
+        const item = this.filteredItems.find(
+          (i) => i.dataset.value === this.selectedValue,
+        );
+        if (item && !item.dataset.disabled) {
+          index = this.filteredItems.indexOf(item);
+        }
+      }
+      this.highlightItemByIndex(index);
+    }, ON_OPEN_FOCUS_DELAY);
+  }
+  close() {
+    this.isOpenValue = false;
+    resetState(this);
+  }
+  scrollToItem(index) {
+    scrollToItem(this, index);
+  }
+  highlightItem(event = null, index = null) {
+    highlightItem(this, event, index);
+  }
+  highlightItemByIndex(index) {
+    highlightItemByIndex(this, index);
+  }
+  select(event) {
+    let item = undefined;
+    if (event instanceof KeyboardEvent) {
+      item = this.filteredItems.find((i) => i.dataset.highlighted === "true");
+    } else {
+      // mouse event
+      item = event.currentTarget;
+    }
+    if (item) {
+      this.selectedValue = item.dataset.value;
+      // setTimeout is needed for selectedValueChanged to finish executing
+      setTimeout(() => {
+        this.close();
+      }, 100);
+    }
+  }
+  inputKeydown(event) {
+    if (event.key === " " && this.searchInputTarget.value.length === 0) {
+      event.preventDefault();
+    }
+    this.hideError();
+    this.showList();
+  }
+  search(event) {
+    this.isDirty = true;
+    clearRemoteResults(this);
+    search(this, event);
+  }
+  clickOutside(event) {
+    onClickOutside(this, event);
+  }
+  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.hiddenInputTarget.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;
+    }
+  }
+  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();
+    }
+  }
+  filteredItemIndexesValueChanged(filteredItemIndexes) {
+    filteredItemsChanged(this, filteredItemIndexes);
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+    resetState(this);
+  }
+  showLoading() {
+    this.isLoading = true;
+    this.loadingTarget.classList.remove("hidden");
+  }
+  hideLoading() {
+    this.isLoading = false;
+    this.loadingTarget.classList.add("hidden");
+  }
+  showList() {
+    this.listTarget.classList.remove("hidden");
+  }
+  hideList() {
+    this.listTarget.classList.add("hidden");
+  }
+  showError() {
+    this.errorTarget.classList.remove("hidden");
+  }
+  hideError() {
+    this.errorTarget.classList.add("hidden");
+  }
+  showEmpty() {
+    this.emptyTarget.classList.remove("hidden");
+  }
+  hideEmpty() {
+    this.emptyTarget.classList.add("hidden");
+  }
+  showSelectedRemoteItems() {
+    const remoteItems = Array.from(
+      this.element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${this.identifier}-item"][data-remote='true']`,
+      ),
+    );
+    remoteItems.forEach((i) => {
+      const isInsideGroup =
+        i.parentElement?.dataset?.shadcnPhlexcomponents ===
+        `${this.identifier}-group`;
+      if (isInsideGroup) {
+        const isRemoteGroup = i.parentElement.dataset.remote === "true";
+        if (isRemoteGroup) {
+          i.parentElement.classList.remove("hidden");
+        }
+      }
+      i.ariaHidden = "false";
+      i.classList.remove("hidden");
+    });
+  }
+  hideSelectedRemoteItems() {
+    const remoteItems = Array.from(
+      this.element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${this.identifier}-item"][data-remote='true']`,
+      ),
+    );
+    remoteItems.forEach((i) => {
+      const isInsideGroup =
+        i.parentElement?.dataset?.shadcnPhlexcomponents ===
+        `${this.identifier}-group`;
+      if (isInsideGroup) {
+        const isRemoteGroup = i.parentElement.dataset.remote === "true";
+        if (isRemoteGroup) {
+          i.parentElement.classList.add("hidden");
+        }
+      }
+      i.ariaHidden = "true";
+      i.classList.add("hidden");
+    });
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (["Tab", "Enter"].includes(key)) event.preventDefault();
+    if (key === "Escape") {
+      this.close();
+    }
+  }
+};
+export { ComboboxController };

data/app/javascript/controllers/command_controller.js

@@ -0,0 +1,207 @@
+import hotkeys from "hotkeys-js";
+import { Controller } from "@hotwired/stimulus";
+import {
+  showContent,
+  hideContent,
+  focusTrigger,
+  ON_OPEN_FOCUS_DELAY,
+  setGroupLabelsId,
+} from "../utils";
+import {
+  scrollToItem,
+  highlightItem,
+  highlightItemByIndex,
+  filteredItemsChanged,
+  setItemsGroupId,
+  search,
+  clearRemoteResults,
+  resetState,
+  hideError,
+  showList,
+} from "../utils/command";
+import { useDebounce, useClickOutside } from "stimulus-use";
+import Fuse from "fuse.js";
+const CommandController = class extends Controller {
+  // targets
+  static targets = [
+    "trigger",
+    "content",
+    "overlay",
+    "item",
+    "group",
+    "searchInput",
+    "list",
+    "listContainer",
+    "empty",
+    "modifierKey",
+    "loading",
+    "error",
+  ];
+  // values
+  static values = {
+    isOpen: Boolean,
+    filteredItemIndexes: Array,
+    searchUrl: String,
+  };
+  static debounces = ["search"];
+  connect() {
+    this.orderedItems = [...this.itemTargets];
+    this.itemsInnerText = this.orderedItems.map((i) => i.innerText.trim());
+    this.fuse = new Fuse(this.itemsInnerText);
+    this.filteredItemIndexesValue = Array.from(
+      { length: this.itemTargets.length },
+      (_, i) => i,
+    );
+    this.isLoading = false;
+    this.filteredItems = this.itemTargets;
+    this.isDirty = false;
+    this.searchPath = this.element.dataset.searchPath;
+    setGroupLabelsId(this);
+    setItemsGroupId(this);
+    useDebounce(this);
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+    this.hotkeyListener = this.onHotkeyPressed.bind(this);
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    this.setupHotkeys();
+    this.replaceModifierKeyIcon();
+  }
+  open() {
+    this.isOpenValue = true;
+    this.highlightItemByIndex(0);
+    setTimeout(() => {
+      this.searchInputTarget.focus();
+    }, ON_OPEN_FOCUS_DELAY);
+  }
+  close() {
+    this.isOpenValue = false;
+    resetState(this);
+  }
+  scrollToItem(index) {
+    scrollToItem(this, index);
+  }
+  highlightItem(event = null, index = null) {
+    highlightItem(this, event, index);
+  }
+  highlightItemByIndex(index) {
+    highlightItemByIndex(this, index);
+  }
+  select(event) {
+    let value = null;
+    if (event instanceof KeyboardEvent) {
+      const item = this.filteredItems.find(
+        (i) => i.dataset.highlighted === "true",
+      );
+      if (item) {
+        value = item.dataset.value;
+      }
+    } else {
+      // mouse event
+      const item = event.currentTarget;
+      value = item.dataset.value;
+    }
+    if (value) {
+      window.Turbo.visit(value);
+      this.close();
+    }
+  }
+  inputKeydown(event) {
+    if (event.key === " " && this.searchInputTarget.value.length === 0) {
+      event.preventDefault();
+    }
+    hideError(this);
+    showList(this);
+  }
+  search(event) {
+    this.isDirty = true;
+    clearRemoteResults(this);
+    search(this, event);
+  }
+  clickOutside() {
+    this.close();
+  }
+  isOpenValueChanged(isOpen, previousIsOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+        overlay: this.overlayTarget,
+      });
+      this.setupEventListeners();
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+        overlay: this.overlayTarget,
+      });
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget);
+      }
+      this.cleanupEventListeners();
+    }
+  }
+  filteredItemIndexesValueChanged(filteredItemIndexes) {
+    filteredItemsChanged(this, filteredItemIndexes);
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+    resetState(this);
+    if (this.keybinds) {
+      hotkeys.unbind(this.keybinds);
+    }
+  }
+  setupHotkeys() {
+    const modifierKey = this.element.dataset.modifierKey;
+    const shortcutKey = this.element.dataset.shortcutKey;
+    let keybinds = "";
+    if (modifierKey && shortcutKey) {
+      keybinds = `${modifierKey}+${shortcutKey}`;
+      if (modifierKey === "ctrl") {
+        keybinds += `,cmd-${shortcutKey}`;
+      }
+    } else if (shortcutKey) {
+      keybinds = shortcutKey;
+    }
+    this.keybinds = keybinds;
+    hotkeys(keybinds, this.hotkeyListener);
+  }
+  onHotkeyPressed(event) {
+    event.preventDefault();
+    this.open();
+  }
+  replaceModifierKeyIcon() {
+    if (this.hasModifierKeyTarget && this.isMac()) {
+      this.modifierKeyTarget.innerHTML = "⌘";
+    }
+  }
+  isMac() {
+    const navigator = window.navigator;
+    if (navigator.userAgentData) {
+      return navigator.userAgentData.platform === "macOS";
+    }
+    // Fallback to traditional methods
+    return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (["Tab", "Enter"].includes(key)) event.preventDefault();
+    if (key === "Escape") {
+      this.close();
+    }
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+  }
+};
+export { CommandController };