shadcn_phlexcomponents 0.1.18 → 0.1.19

data/app/javascript/controllers/form_field_controller.js

@@ -1,20 +1,21 @@
-import { Controller } from '@hotwired/stimulus';
+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);
-        }
+  static name = "form-field";
+  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

@@ -1,76 +1,74 @@
-import { Controller } from '@hotwired/stimulus';
-import { useHover } from 'stimulus-use';
-import { initFloatingUi } from '../utils/floating_ui';
-import { showContent, hideContent } from '../utils';
+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 });
+  static name = "hover-card";
+  // 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();
     }
-    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();
-        }
+  }
+  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

@@ -1,14 +1,15 @@
-import { Controller } from '@hotwired/stimulus';
+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;
-            });
-        }
+  static name = "loading-button";
+  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

@@ -1,84 +1,91 @@
-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';
+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 });
+  static name = "popover";
+  // 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();
     }
-    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();
     }
-    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);
-        }
+  }
+  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

@@ -1,14 +1,15 @@
-import { Controller } from '@hotwired/stimulus';
+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}%)`;
-    }
+  static name = "progress";
+  // 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

@@ -1,80 +1,81 @@
-import { Controller } from '@hotwired/stimulus';
+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;
-        }
+  static name = "radio-group";
+  // 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;
+  }
+  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;
+      }
     }
-    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();
+    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 };