shadcn_phlexcomponents 0.1.18 → 0.1.19

data/app/javascript/utils/index.js

@@ -2,224 +2,287 @@ const ANIMATION_OUT_DELAY = 100;
 const ON_OPEN_FOCUS_DELAY = 100;
 const ON_CLOSE_FOCUS_DELAY = 50;
 const getScrollbarWidth = () => {
-    // Create a temporary div container and append it into the body
-    const outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.overflow = 'scroll'; // force scrollbars
-    outer.style.width = '100px';
-    outer.style.position = 'absolute';
-    outer.style.top = '-9999px';
-    document.body.appendChild(outer);
-    // Create an inner div and place it inside the outer div
-    const inner = document.createElement('div');
-    inner.style.width = '100%';
-    outer.appendChild(inner);
-    // Calculate the scrollbar width
-    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-    // Clean up
-    outer.remove();
-    return scrollbarWidth;
+  // Create a temporary div container and append it into the body
+  const outer = document.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll"; // force scrollbars
+  outer.style.width = "100px";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  document.body.appendChild(outer);
+  // Create an inner div and place it inside the outer div
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+  // Calculate the scrollbar width
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  // Clean up
+  outer.remove();
+  return scrollbarWidth;
 };
 const lockScroll = (contentId) => {
-    if (window.innerHeight < document.documentElement.scrollHeight) {
-        document.body.dataset.scrollLocked = '1';
-        document.body.classList.add('data-[scroll-locked]:pointer-events-none', 'data-[scroll-locked]:!overflow-hidden', 'data-[scroll-locked]:!relative', 'data-[scroll-locked]:px-0', 'data-[scroll-locked]:pt-0', 'data-[scroll-locked]:ml-0', 'data-[scroll-locked]:mt-0');
-        document.body.style.marginRight = `${getScrollbarWidth()}px`;
-        const contentIdsString = document.body.dataset.scrollLockedContentIds || '[]';
-        const contentIds = JSON.parse(contentIdsString);
-        contentIds.push(contentId);
-        document.body.dataset.scrollLockedContentIds = JSON.stringify(contentIds);
-    }
+  if (window.innerHeight < document.documentElement.scrollHeight) {
+    document.body.dataset.scrollLocked = "1";
+    document.body.classList.add(
+      "data-[scroll-locked]:pointer-events-none",
+      "data-[scroll-locked]:!overflow-hidden",
+      "data-[scroll-locked]:!relative",
+      "data-[scroll-locked]:px-0",
+      "data-[scroll-locked]:pt-0",
+      "data-[scroll-locked]:ml-0",
+      "data-[scroll-locked]:mt-0",
+    );
+    document.body.style.marginRight = `${getScrollbarWidth()}px`;
+    const contentIdsString =
+      document.body.dataset.scrollLockedContentIds || "[]";
+    const contentIds = JSON.parse(contentIdsString);
+    contentIds.push(contentId);
+    document.body.dataset.scrollLockedContentIds = JSON.stringify(contentIds);
+  }
 };
 const unlockScroll = (contentId) => {
-    const contentIdsString = document.body.dataset.scrollLockedContentIds || '[]';
-    const contentIds = JSON.parse(contentIdsString);
-    const newContentIds = contentIds.filter((id) => id !== contentId);
-    document.body.dataset.scrollLockedContentIds = JSON.stringify(newContentIds);
-    if (newContentIds.length === 0) {
-        delete document.body.dataset.scrollLocked;
-        document.body.classList.remove('data-[scroll-locked]:pointer-events-none', 'data-[scroll-locked]:!overflow-hidden', 'data-[scroll-locked]:!relative', 'data-[scroll-locked]:px-0', 'data-[scroll-locked]:pt-0', 'data-[scroll-locked]:ml-0', 'data-[scroll-locked]:mt-0');
-        document.body.style.marginRight = '';
-    }
+  const contentIdsString = document.body.dataset.scrollLockedContentIds || "[]";
+  const contentIds = JSON.parse(contentIdsString);
+  const newContentIds = contentIds.filter((id) => id !== contentId);
+  document.body.dataset.scrollLockedContentIds = JSON.stringify(newContentIds);
+  if (newContentIds.length === 0) {
+    delete document.body.dataset.scrollLocked;
+    document.body.classList.remove(
+      "data-[scroll-locked]:pointer-events-none",
+      "data-[scroll-locked]:!overflow-hidden",
+      "data-[scroll-locked]:!relative",
+      "data-[scroll-locked]:px-0",
+      "data-[scroll-locked]:pt-0",
+      "data-[scroll-locked]:ml-0",
+      "data-[scroll-locked]:mt-0",
+    );
+    document.body.style.marginRight = "";
+  }
 };
 const focusTrigger = (triggerTarget) => {
-    setTimeout(() => {
-        if (triggerTarget.dataset.asChild === 'false') {
-            const childElement = triggerTarget.firstElementChild;
-            if (childElement) {
-                childElement.focus();
-            }
-        }
-        else {
-            triggerTarget.focus();
-        }
-    }, ON_CLOSE_FOCUS_DELAY);
+  setTimeout(() => {
+    if (triggerTarget.dataset.asChild === "false") {
+      const childElement = triggerTarget.firstElementChild;
+      if (childElement) {
+        childElement.focus();
+      }
+    } else {
+      triggerTarget.focus();
+    }
+  }, ON_CLOSE_FOCUS_DELAY);
 };
 const focusElement = (element) => {
-    setTimeout(() => {
-        if (element) {
-            element.focus();
-        }
-    }, ON_OPEN_FOCUS_DELAY);
+  setTimeout(() => {
+    if (element) {
+      element.focus();
+    }
+  }, ON_OPEN_FOCUS_DELAY);
 };
 const getFocusableElements = (container) => {
-    return Array.from(container.querySelectorAll('button, [href], input:not([type="hidden"]), select:not([tabindex="-1"]), textarea, [tabindex]:not([tabindex="-1"])'));
-};
-const getSameLevelItems = ({ content, items, closestContentSelector, }) => {
-    const sameLevelItems = [];
-    items.forEach((i) => {
-        if (i.closest(closestContentSelector) === content &&
-            i.dataset.disabled === undefined) {
-            sameLevelItems.push(i);
-        }
-    });
-    return sameLevelItems;
-};
-const showContent = ({ trigger, content, contentContainer, setEqualWidth, overlay, }) => {
-    contentContainer.style.display = '';
-    if (trigger) {
-        if (setEqualWidth) {
-            const triggerWidth = trigger.offsetWidth;
-            const contentContainerWidth = contentContainer.offsetWidth;
-            if (contentContainerWidth < triggerWidth) {
-                contentContainer.style.width = `${triggerWidth}px`;
-            }
-        }
-        trigger.ariaExpanded = 'true';
-        trigger.dataset.state = 'open';
+  return Array.from(
+    container.querySelectorAll(
+      'button, [href], input:not([type="hidden"]), select:not([tabindex="-1"]), textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+};
+const getSameLevelItems = ({ content, items, closestContentSelector }) => {
+  const sameLevelItems = [];
+  items.forEach((i) => {
+    if (
+      i.closest(closestContentSelector) === content &&
+      i.dataset.disabled === undefined
+    ) {
+      sameLevelItems.push(i);
     }
-    content.dataset.state = 'open';
-    if (overlay) {
-        overlay.style.display = '';
-        overlay.dataset.state = 'open';
-        lockScroll(content.id);
+  });
+  return sameLevelItems;
+};
+const showContent = ({
+  trigger,
+  content,
+  contentContainer,
+  setEqualWidth,
+  overlay,
+}) => {
+  contentContainer.style.display = "";
+  if (trigger) {
+    if (setEqualWidth) {
+      const triggerWidth = trigger.offsetWidth;
+      const contentContainerWidth = contentContainer.offsetWidth;
+      if (contentContainerWidth < triggerWidth) {
+        contentContainer.style.width = `${triggerWidth}px`;
+      }
     }
+    trigger.ariaExpanded = "true";
+    trigger.dataset.state = "open";
+  }
+  content.dataset.state = "open";
+  if (overlay) {
+    overlay.style.display = "";
+    overlay.dataset.state = "open";
+    lockScroll(content.id);
+  }
 };
-const hideContent = ({ trigger, content, contentContainer, overlay, }) => {
-    if (trigger) {
-        trigger.ariaExpanded = 'false';
-        trigger.dataset.state = 'closed';
+const hideContent = ({ trigger, content, contentContainer, overlay }) => {
+  if (trigger) {
+    trigger.ariaExpanded = "false";
+    trigger.dataset.state = "closed";
+  }
+  content.dataset.state = "closed";
+  setTimeout(() => {
+    contentContainer.style.display = "none";
+    if (overlay) {
+      overlay.style.display = "none";
+      overlay.dataset.state = "closed";
+      unlockScroll(content.id);
     }
-    content.dataset.state = 'closed';
-    setTimeout(() => {
-        contentContainer.style.display = 'none';
-        if (overlay) {
-            overlay.style.display = 'none';
-            overlay.dataset.state = 'closed';
-            unlockScroll(content.id);
-        }
-    }, ANIMATION_OUT_DELAY);
+  }, ANIMATION_OUT_DELAY);
 };
 const getStimulusInstance = (controller, element) => {
-    if (!element)
-        return;
-    return window.Stimulus.getControllerForElementAndIdentifier(element, controller);
+  if (!element) return;
+  return window.Stimulus.getControllerForElementAndIdentifier(
+    element,
+    controller,
+  );
 };
 const anyNestedComponentsOpen = (element) => {
-    const components = [];
-    const componentNames = [
-        'dialog',
-        'alert-dialog',
-        'dropdown-menu',
-        'popover',
-        'select',
-        'combobox',
-        'command',
-        'hover-card',
-        'tooltip',
-        'date-picker',
-        'date-range-picker',
-    ];
-    componentNames.forEach((name) => {
-        const triggers = Array.from(element.querySelectorAll(`[data-shadcn-phlexcomponents="${name}-trigger"]`));
-        const controllerElements = Array.from(element.querySelectorAll(`[data-controller="${name}"]`));
-        controllerElements.forEach((controller) => {
-            const stimulusInstance = getStimulusInstance(name, controller);
-            if (stimulusInstance) {
-                components.push(stimulusInstance);
-            }
-        });
-        triggers.forEach((trigger) => {
-            const stimulusInstance = getStimulusInstance(name, document.querySelector(`#${trigger.getAttribute('aria-controls')}`));
-            if (stimulusInstance) {
-                components.push(stimulusInstance);
-            }
-        });
+  const components = [];
+  const componentNames = [
+    "dialog",
+    "alert-dialog",
+    "dropdown-menu",
+    "popover",
+    "select",
+    "combobox",
+    "command",
+    "hover-card",
+    "tooltip",
+    "date-picker",
+    "date-range-picker",
+  ];
+  componentNames.forEach((name) => {
+    const triggers = Array.from(
+      element.querySelectorAll(
+        `[data-shadcn-phlexcomponents="${name}-trigger"]`,
+      ),
+    );
+    const controllerElements = Array.from(
+      element.querySelectorAll(`[data-controller="${name}"]`),
+    );
+    controllerElements.forEach((controller) => {
+      const stimulusInstance = getStimulusInstance(name, controller);
+      if (stimulusInstance) {
+        components.push(stimulusInstance);
+      }
+    });
+    triggers.forEach((trigger) => {
+      const stimulusInstance = getStimulusInstance(
+        name,
+        document.querySelector(`#${trigger.getAttribute("aria-controls")}`),
+      );
+      if (stimulusInstance) {
+        components.push(stimulusInstance);
+      }
     });
-    return components.some((c) => c.isOpenValue);
+  });
+  return components.some((c) => c.isOpenValue);
 };
 const onClickOutside = (controller, event) => {
-    const target = event.target;
-    // Let trigger handle state
-    if (target === controller.triggerTarget)
-        return;
-    if (controller.triggerTarget.contains(target))
-        return;
-    controller.close();
+  const target = event.target;
+  // Let trigger handle state
+  if (target === controller.triggerTarget) return;
+  if (controller.triggerTarget.contains(target)) return;
+  controller.close();
 };
 const setGroupLabelsId = (controller) => {
-    controller.groupTargets.forEach((g) => {
-        const label = g.querySelector(`[data-shadcn-phlexcomponents="${controller.identifier}-label"]`);
-        if (label) {
-            label.id = g.getAttribute('aria-labelledby');
-        }
-    });
-};
-const getNextEnabledIndex = ({ items, currentIndex, wrapAround, filterFn, }) => {
-    let newIndex = null;
-    if (filterFn) {
-        newIndex = items.findIndex((item, index) => index > currentIndex && filterFn(item));
-        if (newIndex === -1) {
-            newIndex = currentIndex;
-        }
-    }
-    else {
-        newIndex = currentIndex + 1;
+  controller.groupTargets.forEach((g) => {
+    const label = g.querySelector(
+      `[data-shadcn-phlexcomponents="${controller.identifier}-label"]`,
+    );
+    if (label) {
+      label.id = g.getAttribute("aria-labelledby");
     }
-    if (newIndex > items.length - 1) {
-        if (wrapAround) {
-            newIndex = 0;
-        }
-        else {
-            newIndex = items.length - 1;
-        }
+  });
+};
+const getNextEnabledIndex = ({ items, currentIndex, wrapAround, filterFn }) => {
+  let newIndex = null;
+  if (filterFn) {
+    newIndex = items.findIndex(
+      (item, index) => index > currentIndex && filterFn(item),
+    );
+    if (newIndex === -1) {
+      newIndex = currentIndex;
     }
-    return newIndex;
-};
-const getPreviousEnabledIndex = ({ items, currentIndex, wrapAround, filterFn, }) => {
-    let newIndex = null;
-    if (filterFn) {
-        newIndex = items.findLastIndex((item, index) => index < currentIndex && filterFn(item));
-        if (newIndex === -1) {
-            newIndex = currentIndex;
-        }
+  } else {
+    newIndex = currentIndex + 1;
+  }
+  if (newIndex > items.length - 1) {
+    if (wrapAround) {
+      newIndex = 0;
+    } else {
+      newIndex = items.length - 1;
     }
-    else {
-        newIndex = currentIndex - 1;
+  }
+  return newIndex;
+};
+const getPreviousEnabledIndex = ({
+  items,
+  currentIndex,
+  wrapAround,
+  filterFn,
+}) => {
+  let newIndex = null;
+  if (filterFn) {
+    newIndex = items.findLastIndex(
+      (item, index) => index < currentIndex && filterFn(item),
+    );
+    if (newIndex === -1) {
+      newIndex = currentIndex;
     }
-    if (newIndex < 0) {
-        if (wrapAround) {
-            newIndex = items.length - 1;
-        }
-        else {
-            newIndex = 0;
-        }
+  } else {
+    newIndex = currentIndex - 1;
+  }
+  if (newIndex < 0) {
+    if (wrapAround) {
+      newIndex = items.length - 1;
+    } else {
+      newIndex = 0;
     }
-    return newIndex;
+  }
+  return newIndex;
 };
 const handleTabNavigation = (element, event) => {
-    const focusableElements = getFocusableElements(element);
-    const firstElement = focusableElements[0];
-    const lastElement = focusableElements[focusableElements.length - 1];
-    // If Shift + Tab pressed on first element, go to last element
-    if (event.shiftKey && document.activeElement === firstElement) {
-        event.preventDefault();
-        lastElement.focus();
-    }
-    // If Tab pressed on last element, go to first element
-    else if (!event.shiftKey && document.activeElement === lastElement) {
-        event.preventDefault();
-        firstElement.focus();
-    }
+  const focusableElements = getFocusableElements(element);
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+  // If Shift + Tab pressed on first element, go to last element
+  if (event.shiftKey && document.activeElement === firstElement) {
+    event.preventDefault();
+    lastElement.focus();
+  }
+  // If Tab pressed on last element, go to first element
+  else if (!event.shiftKey && document.activeElement === lastElement) {
+    event.preventDefault();
+    firstElement.focus();
+  }
+};
+export {
+  ANIMATION_OUT_DELAY,
+  ON_CLOSE_FOCUS_DELAY,
+  ON_OPEN_FOCUS_DELAY,
+  lockScroll,
+  unlockScroll,
+  focusTrigger,
+  focusElement,
+  getFocusableElements,
+  getSameLevelItems,
+  showContent,
+  hideContent,
+  getStimulusInstance,
+  anyNestedComponentsOpen,
+  onClickOutside,
+  setGroupLabelsId,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  handleTabNavigation,
 };
-export { ANIMATION_OUT_DELAY, ON_CLOSE_FOCUS_DELAY, ON_OPEN_FOCUS_DELAY, lockScroll, unlockScroll, focusTrigger, focusElement, getFocusableElements, getSameLevelItems, showContent, hideContent, getStimulusInstance, anyNestedComponentsOpen, onClickOutside, setGroupLabelsId, getNextEnabledIndex, getPreviousEnabledIndex, handleTabNavigation, };

data/app/typescript/controllers/accordion_controller.ts

@@ -7,6 +7,8 @@ import {
 } from '../utils'
 
 const AccordionController = class extends Controller<HTMLElement> {
+  static name = 'accordion'
+
   // targets
   static targets = ['item', 'trigger', 'content']
   declare itemTargets: HTMLElement[]

data/app/typescript/controllers/alert_dialog_controller.ts

@@ -1,6 +1,8 @@
 import { DialogController } from './dialog_controller'
 
 const AlertDialogController = class extends DialogController {
+  static name = 'alert-dialog'
+
   protected onDOMClick() {
     return
   }

data/app/typescript/controllers/avatar_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const AvatarController = class extends Controller {
+  static name = 'avatar'
+
   // targets
   static targets = ['image', 'fallback']
   declare readonly imageTarget: HTMLElement

data/app/typescript/controllers/checkbox_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const CheckboxController = class extends Controller<HTMLElement> {
+  static name = 'checkbox'
+
   // targets
   static targets = ['input', 'indicator']
   declare readonly inputTarget: HTMLInputElement

data/app/typescript/controllers/collapsible_controller.ts

@@ -2,6 +2,8 @@ import { Controller } from '@hotwired/stimulus'
 import { hideContent, showContent } from '../utils'
 
 const CollapsibleController = class extends Controller {
+  static name = 'collapsible'
+
   // targets
   static targets = ['trigger', 'content']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/combobox_controller.ts

@@ -25,6 +25,8 @@ import {
 import { useClickOutside, useDebounce } from 'stimulus-use'
 
 const ComboboxController = class extends Controller<HTMLElement> {
+  static name = 'combobox'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/command_controller.ts

@@ -31,6 +31,8 @@ declare global {
 }
 
 const CommandController = class extends Controller<HTMLElement> {
+  static name = 'command'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/date_picker_controller.ts

@@ -28,6 +28,8 @@ const isSmallScreen = () => {
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
 const DatePickerController = class extends Controller<HTMLElement> {
+  static name = 'date-picker'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/date_range_picker_controller.ts

@@ -10,6 +10,8 @@ const DELIMITER = ' - '
 const DAYJS_FORMAT = 'YYYY-MM-DD'
 
 const DateRangePickerController = class extends DatePickerController {
+  static name = 'date-range-picker'
+
   // targets
   static targets = [
     'trigger',

data/app/typescript/controllers/dialog_controller.ts

@@ -10,6 +10,8 @@ import {
 } from '../utils'
 
 const DialogController = class extends Controller<HTMLElement> {
+  static name = 'dialog'
+
   // targets
   static targets = ['trigger', 'content', 'overlay']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/dropdown_menu_controller.ts

@@ -49,6 +49,8 @@ const focusItemByIndex = (
 }
 
 const DropdownMenuController = class extends Controller<HTMLElement> {
+  static name = 'dropdown-menu'
+
   // targets
   static targets = ['trigger', 'contentContainer', 'content', 'item']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/dropdown_menu_sub_controller.ts

@@ -9,6 +9,8 @@ import {
 } from '../utils'
 
 const DropdownMenuSubController = class extends Controller<HTMLElement> {
+  static name = 'dropdown-menu-sub'
+
   // targets
   static targets = ['trigger', 'contentContainer', 'content']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/form_field_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const FormFieldController = class extends Controller {
+  static name = 'form-field'
+
   connect() {
     const hintContainer = this.element.querySelector('[data-remove-label]')
     const labelContainer = this.element.querySelector('[data-remove-hint]')

data/app/typescript/controllers/hover_card_controller.ts

@@ -4,6 +4,8 @@ import { initFloatingUi } from '../utils/floating_ui'
 import { showContent, hideContent } from '../utils'
 
 const HoverCardController = class extends Controller<HTMLElement> {
+  static name = 'hover-card'
+
   // targets
   static targets = ['trigger', 'content', 'contentContainer']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/loading_button_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const LoadingButtonController = class extends Controller<HTMLButtonElement> {
+  static name = 'loading-button'
+
   connect() {
     const el = this.element
     const form = el.closest('form')

data/app/typescript/controllers/popover_controller.ts

@@ -12,6 +12,8 @@ import {
 } from '../utils'
 
 const PopoverController = class extends Controller<HTMLElement> {
+  static name = 'popover'
+
   // targets
   static targets = ['trigger', 'contentContainer', 'content']
   declare readonly triggerTarget: HTMLElement

data/app/typescript/controllers/progress_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const ProgressController = class extends Controller {
+  static name = 'progress'
+
   // targets
   static targets = ['indicator']
   declare readonly indicatorTarget: HTMLElement

data/app/typescript/controllers/radio_group_controller.ts

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 const RadioGroupController = class extends Controller<HTMLElement> {
+  static name = 'radio-group'
+
   // targets
   static targets = ['item', 'input', 'indicator']
   declare readonly itemTargets: HTMLInputElement[]