shadcn_phlexcomponents 0.1.14 → 0.1.16

data/app/javascript/controllers/tooltip_controller.js

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus";
+import { useHover } from "stimulus-use";
+import { initFloatingUi } from "../utils/floating_ui";
+import { showContent, hideContent } from "../utils";
+const TooltipController = class extends Controller {
+  // targets
+  static targets = ["trigger", "content", "contentContainer", "arrow"];
+  // 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);
+  }
+  closeImmediately() {
+    this.isOpenValue = false;
+  }
+  // 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,
+        arrowElement: this.arrowTarget,
+        side: this.contentTarget.dataset.side,
+        align: this.contentTarget.dataset.align,
+        sideOffset: 8,
+      });
+    } else {
+      hideContent({
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      this.cleanupEventListeners();
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (["Escape", "Enter", " "].includes(key)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      this.closeImmediately();
+    }
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+};
+export { TooltipController };

data/app/javascript/shadcn_phlexcomponents.js

@@ -0,0 +1,60 @@
+import { AccordionController } from "./controllers/accordion_controller";
+import { AlertDialogController } from "./controllers/alert_dialog_controller";
+import { AvatarController } from "./controllers/avatar_controller";
+import { CheckboxController } from "./controllers/checkbox_controller";
+import { CollapsibleController } from "./controllers/collapsible_controller";
+import { ComboboxController } from "./controllers/combobox_controller";
+import { CommandController } from "./controllers/command_controller";
+import { DatePickerController } from "./controllers/date_picker_controller";
+import { DateRangePickerController } from "./controllers/date_range_picker_controller";
+import { DialogController } from "./controllers/dialog_controller";
+import { DropdownMenuController } from "./controllers/dropdown_menu_controller";
+import { DropdownMenuSubController } from "./controllers/dropdown_menu_sub_controller";
+import { FormFieldController } from "./controllers/form_field_controller";
+import { HoverCardController } from "./controllers/hover_card_controller";
+import { LoadingButtonController } from "./controllers/loading_button_controller";
+import { PopoverController } from "./controllers/popover_controller";
+import { ProgressController } from "./controllers/progress_controller";
+import { RadioGroupController } from "./controllers/radio_group_controller";
+import { SelectController } from "./controllers/select_controller";
+import SidebarController from "./controllers/sidebar_controller";
+import SidebarTriggerController from "./controllers/sidebar_trigger_controller";
+import { SliderController } from "./controllers/slider_controller";
+import { SwitchController } from "./controllers/switch_controller";
+import { TabsController } from "./controllers/tabs_controller";
+import { ThemeSwitcherController } from "./controllers/theme_switcher_controller";
+import { ToastContainerController } from "./controllers/toast_container_controller";
+import { ToastController } from "./controllers/toast_controller";
+import { ToggleController } from "./controllers/toggle_controller";
+import { TooltipController } from "./controllers/tooltip_controller";
+export default {
+  accordion: AccordionController,
+  "alert-dialog": AlertDialogController,
+  avatar: AvatarController,
+  checkbox: CheckboxController,
+  collapsible: CollapsibleController,
+  combobox: ComboboxController,
+  command: CommandController,
+  "date-picker": DatePickerController,
+  "date-range-picker": DateRangePickerController,
+  dialog: DialogController,
+  "dropdown-menu": DropdownMenuController,
+  "dropdown-menu-sub": DropdownMenuSubController,
+  "form-field": FormFieldController,
+  "hover-card": HoverCardController,
+  "loading-button": LoadingButtonController,
+  popover: PopoverController,
+  progress: ProgressController,
+  "radio-group": RadioGroupController,
+  select: SelectController,
+  sidebar: SidebarController,
+  "sidebar-trigger": SidebarTriggerController,
+  slider: SliderController,
+  switch: SwitchController,
+  tabs: TabsController,
+  "theme-switcher": ThemeSwitcherController,
+  "toast-container": ToastContainerController,
+  toast: ToastController,
+  toggle: ToggleController,
+  tooltip: TooltipController,
+};

data/app/javascript/utils/command.js

@@ -0,0 +1,448 @@
+import { ComboboxController } from "../controllers/combobox_controller";
+import { getNextEnabledIndex, getPreviousEnabledIndex } from ".";
+const scrollToItem = (controller, index) => {
+  const item = controller.filteredItems[index];
+  const itemRect = item.getBoundingClientRect();
+  const listContainerRect =
+    controller.listContainerTarget.getBoundingClientRect();
+  let newScrollTop = null;
+  const maxScrollTop =
+    controller.listContainerTarget.scrollHeight -
+    controller.listContainerTarget.clientHeight;
+  // scroll to bottom
+  if (itemRect.bottom - listContainerRect.bottom > 0) {
+    if (index === controller.filteredItems.length - 1) {
+      newScrollTop = maxScrollTop;
+    } else {
+      newScrollTop =
+        controller.listContainerTarget.scrollTop +
+        (itemRect.bottom - listContainerRect.bottom);
+    }
+  } else if (listContainerRect.top - itemRect.top > 0) {
+    // scroll to top
+    if (index === 0) {
+      newScrollTop = 0;
+    } else {
+      newScrollTop =
+        controller.listContainerTarget.scrollTop -
+        (listContainerRect.top - itemRect.top);
+    }
+  }
+  if (newScrollTop !== null) {
+    controller.scrollingViaKeyboard = true;
+    if (newScrollTop >= 0 && newScrollTop <= maxScrollTop) {
+      controller.listContainerTarget.scrollTop = newScrollTop;
+    }
+    // Clear the flag after scroll settles
+    clearTimeout(controller.keyboardScrollTimeout);
+    controller.keyboardScrollTimeout = window.setTimeout(() => {
+      controller.scrollingViaKeyboard = false;
+    }, 200);
+  }
+};
+const highlightItem = (controller, event = null, index = null) => {
+  if (event !== null) {
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      const item = controller.filteredItems.find(
+        (i) => i.dataset.highlighted === "true",
+      );
+      if (item) {
+        const index = controller.filteredItems.indexOf(item);
+        let newIndex = 0;
+        if (key === "ArrowUp") {
+          newIndex = getPreviousEnabledIndex({
+            items: controller.filteredItems,
+            currentIndex: index,
+            filterFn: (item) => item.dataset.disabled === undefined,
+            wrapAround: false,
+          });
+        } else {
+          newIndex = getNextEnabledIndex({
+            items: controller.filteredItems,
+            currentIndex: index,
+            filterFn: (item) => item.dataset.disabled === undefined,
+            wrapAround: false,
+          });
+        }
+        controller.highlightItemByIndex(newIndex);
+        controller.scrollToItem(newIndex);
+      } else {
+        if (key === "ArrowUp") {
+          controller.highlightItemByIndex(controller.filteredItems.length - 1);
+        } else {
+          controller.highlightItemByIndex(0);
+        }
+      }
+    } else {
+      // mouse event
+      if (controller.scrollingViaKeyboard) {
+        event.stopImmediatePropagation();
+        return;
+      } else {
+        const item = event.currentTarget;
+        const index = controller.filteredItems.indexOf(item);
+        controller.highlightItemByIndex(index);
+      }
+    }
+  } else if (index !== null) {
+    controller.highlightItemByIndex(index);
+  }
+};
+const highlightItemByIndex = (controller, index) => {
+  controller.filteredItems.forEach((item, i) => {
+    if (i === index) {
+      item.dataset.highlighted = "true";
+    } else {
+      item.dataset.highlighted = "false";
+    }
+  });
+};
+const filteredItemsChanged = (controller, filteredItemIndexes) => {
+  if (controller.orderedItems) {
+    const filteredItems = filteredItemIndexes.map(
+      (i) => controller.orderedItems[i],
+    );
+    // 1. Toggle visibility of items
+    controller.orderedItems.forEach((item) => {
+      if (filteredItems.includes(item)) {
+        item.ariaHidden = "false";
+        item.classList.remove("hidden");
+      } else {
+        item.ariaHidden = "true";
+        item.classList.add("hidden");
+      }
+    });
+    // 2. Get groups based on order of filtered items
+    const groupIds = filteredItems.map((item) => item.dataset.groupId);
+    const uniqueGroupIds = [...new Set(groupIds)].filter(
+      (groupId) => !!groupId,
+    );
+    const orderedGroups = uniqueGroupIds.map((groupId) => {
+      return controller.listTarget.querySelector(
+        `[aria-labelledby=${groupId}]`,
+      );
+    });
+    // 3. Append items and groups based on filtered items
+    const appendedGroupIds = [];
+    filteredItems.forEach((item) => {
+      const groupId = item.dataset.groupId;
+      if (groupId) {
+        const group = orderedGroups.find(
+          (g) => g.getAttribute("aria-labelledby") === groupId,
+        );
+        if (group) {
+          group.appendChild(item);
+          if (!appendedGroupIds.includes(groupId)) {
+            controller.listTarget.appendChild(group);
+            appendedGroupIds.push(groupId);
+          }
+        }
+      } else {
+        controller.listTarget.appendChild(item);
+      }
+    });
+    // 4. Toggle visibility of groups
+    controller.groupTargets.forEach((group) => {
+      const itemsCount = group.querySelectorAll(
+        `[data-${controller.identifier}-target=item][aria-hidden=false]`,
+      ).length;
+      if (itemsCount > 0) {
+        group.classList.remove("hidden");
+      } else {
+        group.classList.add("hidden");
+      }
+    });
+    // 5. Move remote items to the end
+    const remoteItems = Array.from(
+      controller.element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${controller.identifier}-item"][data-remote='true']`,
+      ),
+    );
+    remoteItems.forEach((i) => {
+      const isInsideGroup =
+        i.parentElement?.dataset?.shadcnPhlexcomponents ===
+        `${controller.identifier}-group`;
+      if (isInsideGroup) {
+        const isRemoteGroup = i.parentElement.dataset.remote === "true";
+        // Move group to last
+        if (isRemoteGroup) {
+          controller.listTarget.appendChild(i.parentElement);
+        }
+      } else {
+        // Move item to last
+        controller.listTarget.appendChild(i);
+      }
+    });
+    // 6. Assign filteredItems based on the order it is displayed in the DOM
+    controller.filteredItems = Array.from(
+      controller.listTarget.querySelectorAll(
+        `[data-${controller.identifier}-target=item][aria-hidden=false]`,
+      ),
+    );
+    // 7. Highlight first item
+    controller.highlightItemByIndex(0);
+    // 8. Toggle visibility of empty
+    if (controller.isDirty && !controller.isLoading) {
+      if (controller.filteredItems.length > 0) {
+        hideEmpty(controller);
+      } else {
+        showEmpty(controller);
+      }
+    }
+  }
+};
+const setItemsGroupId = (controller) => {
+  controller.itemTargets.forEach((item) => {
+    const parent = item.parentElement;
+    if (parent?.dataset[`${controller.identifier}Target`] === "group") {
+      item.dataset.groupId = parent.getAttribute("aria-labelledby");
+    }
+  });
+};
+const search = (controller, event) => {
+  const input = event.target;
+  const value = input.value.trim();
+  if (value.length > 0) {
+    const results = controller.fuse.search(value);
+    // Don't show disabled items when filtering
+    let filteredItemIndexes = results.map((result) => result.refIndex);
+    filteredItemIndexes = filteredItemIndexes.filter((index) => {
+      const item = controller.orderedItems[index];
+      return item.dataset.disabled === undefined;
+    });
+    if (controller.searchPath) {
+      hideSelectedRemoteItems(controller);
+      showLoading(controller);
+      hideList(controller);
+      hideEmpty(controller);
+      controller.filteredItemIndexesValue = filteredItemIndexes;
+      performRemoteSearch(controller, value);
+    } else {
+      controller.filteredItemIndexesValue = filteredItemIndexes;
+    }
+  } else {
+    if (controller.searchPath) {
+      showSelectedRemoteItems(controller);
+    }
+    controller.filteredItemIndexesValue = Array.from(
+      { length: controller.orderedItems.length },
+      (_, i) => i,
+    );
+  }
+};
+const performRemoteSearch = async (controller, query) => {
+  // Cancel previous request
+  if (controller.abortController) {
+    controller.abortController.abort();
+  }
+  // Create new abort controller
+  controller.abortController = new AbortController();
+  try {
+    const response = await fetch(`${controller.searchPath}?q=${query}`, {
+      signal: controller.abortController.signal,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    renderRemoteResults(controller, data);
+    showList(controller);
+  } catch (error) {
+    if (error instanceof Error && error.name !== "AbortError") {
+      console.error("Remote search error:", error);
+      showError(controller);
+    }
+  } finally {
+    hideLoading(controller);
+  }
+};
+const renderRemoteResults = (controller, data) => {
+  console.log("data", data);
+  data.forEach((item) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = item.html;
+    const itemEl = tempDiv.firstElementChild;
+    itemEl.dataset.remote = "true";
+    itemEl.ariaHidden = "false";
+    if (controller instanceof ComboboxController) {
+      // Don't append same item
+      if (controller.selectedValue === itemEl.dataset.value) {
+        const item = controller.itemTargets.find(
+          (i) => i.dataset.value === controller.selectedValue,
+        );
+        if (item) {
+          item.classList.remove("hidden");
+          item.ariaHidden = "false";
+        }
+        return;
+      }
+    }
+    const group = item.group;
+    if (group) {
+      const groupEl = controller.groupTargets.find((g) => {
+        const label = g.querySelector(
+          `[data-shadcn-phlexcomponents="${controller.identifier}-label"]`,
+        );
+        if (!label) return false;
+        return label.textContent === group;
+      });
+      if (groupEl) {
+        groupEl.classList.remove("hidden");
+        groupEl.append(itemEl);
+      } else {
+        const template = controller.element.querySelector("template");
+        const clone = template.content.cloneNode(true);
+        const groupEl = clone.querySelector(
+          `[data-shadcn-phlexcomponents="${controller.identifier}-group"]`,
+        );
+        const groupId = crypto.randomUUID();
+        const label = clone.querySelector(
+          `[data-shadcn-phlexcomponents="${controller.identifier}-label"]`,
+        );
+        label.textContent = group;
+        label.id = groupId;
+        groupEl.setAttribute("aria-labelledby", groupId);
+        groupEl.dataset.remote = "true";
+        groupEl.append(itemEl);
+        controller.listTarget.append(clone);
+      }
+    } else {
+      controller.listTarget.append(itemEl);
+    }
+  });
+  // Update filtered items for keyboard navigation
+  controller.filteredItems = Array.from(
+    controller.listTarget.querySelectorAll(
+      `[data-${controller.identifier}-target="item"][aria-hidden=false]`,
+    ),
+  );
+  controller.highlightItemByIndex(0);
+  console.log("controller.filteredItems", controller.filteredItems);
+  if (controller.filteredItems.length > 0) {
+    hideEmpty(controller);
+  } else {
+    showEmpty(controller);
+  }
+};
+const clearRemoteResults = (controller) => {
+  const remoteGroups = Array.from(
+    controller.element.querySelectorAll(
+      `[data-shadcn-phlexcomponents="${controller.identifier}-group"][data-remote='true']`,
+    ),
+  );
+  remoteGroups.forEach((g) => {
+    const containsSelected = g.querySelector('[aria-selected="true"]');
+    if (!containsSelected) {
+      g.remove();
+    }
+  });
+  const remoteItems = Array.from(
+    controller.element.querySelectorAll(
+      `[data-shadcn-phlexcomponents="${controller.identifier}-item"][data-remote='true']:not([aria-selected="true"])`,
+    ),
+  );
+  remoteItems.forEach((i) => i.remove());
+};
+const resetState = (controller) => {
+  controller.searchInputTarget.value = "";
+  if (controller.searchPath) {
+    clearRemoteResults(controller);
+    showSelectedRemoteItems(controller);
+  }
+  controller.filteredItemIndexesValue = Array.from(
+    { length: controller.orderedItems.length },
+    (_, i) => i,
+  );
+};
+const showLoading = (controller) => {
+  controller.isLoading = true;
+  controller.loadingTarget.classList.remove("hidden");
+};
+const hideLoading = (controller) => {
+  controller.isLoading = false;
+  controller.loadingTarget.classList.add("hidden");
+};
+const showList = (controller) => {
+  controller.listTarget.classList.remove("hidden");
+};
+const hideList = (controller) => {
+  controller.listTarget.classList.add("hidden");
+};
+const showError = (controller) => {
+  controller.errorTarget.classList.remove("hidden");
+};
+const hideError = (controller) => {
+  controller.errorTarget.classList.add("hidden");
+};
+const showEmpty = (controller) => {
+  controller.emptyTarget.classList.remove("hidden");
+};
+const hideEmpty = (controller) => {
+  controller.emptyTarget.classList.add("hidden");
+};
+const showSelectedRemoteItems = (controller) => {
+  const remoteItems = Array.from(
+    controller.element.querySelectorAll(
+      `[data-shadcn-phlexcomponents="${controller.identifier}-item"][data-remote='true']`,
+    ),
+  );
+  remoteItems.forEach((i) => {
+    const isInsideGroup =
+      i.parentElement?.dataset?.shadcnPhlexcomponents ===
+      `${controller.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");
+  });
+};
+const hideSelectedRemoteItems = (controller) => {
+  const remoteItems = Array.from(
+    controller.element.querySelectorAll(
+      `[data-shadcn-phlexcomponents="${controller.identifier}-item"][data-remote='true']`,
+    ),
+  );
+  remoteItems.forEach((i) => {
+    const isInsideGroup =
+      i.parentElement?.dataset?.shadcnPhlexcomponents ===
+      `${controller.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");
+  });
+};
+export {
+  scrollToItem,
+  highlightItem,
+  highlightItemByIndex,
+  filteredItemsChanged,
+  setItemsGroupId,
+  search,
+  performRemoteSearch,
+  clearRemoteResults,
+  resetState,
+  showLoading,
+  hideLoading,
+  showList,
+  hideList,
+  showError,
+  hideError,
+  showEmpty,
+  hideEmpty,
+  showSelectedRemoteItems,
+  hideSelectedRemoteItems,
+};