shadcn_phlexcomponents 0.1.17 → 0.1.18

data/app/javascript/controllers/form_field_controller.js

@@ -1,20 +1,20 @@
-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);
+    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);
+        }
     }
-    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,73 +1,76 @@
-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 });
-  }
-  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();
+    // 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 });
     }
-  }
-  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();
+    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();
+        }
     }
-  }
 };
 export { HoverCardController };

data/app/javascript/controllers/loading_button_controller.js

@@ -1,14 +1,14 @@
-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;
-      });
+    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,90 +1,84 @@
-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,
-    });
-  }
-  toggle() {
-    if (this.isOpenValue) {
-      this.close();
-    } else {
-      this.open();
+    // 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 });
     }
-  }
-  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();
+    toggle() {
+        if (this.isOpenValue) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
     }
-  }
-  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);
+    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);
+        }
     }
-  }
 };
 export { PopoverController };

data/app/javascript/controllers/progress_controller.js

@@ -1,14 +1,14 @@
-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}%)`;
-  }
+    // 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,80 @@
-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;
+    // 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;
-  }
-  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;
-      }
+    select(event) {
+        const item = event.currentTarget;
+        this.selectedValue = item.dataset.value;
     }
-    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();
+    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();
     }
-  }
-  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 };