shadcn_phlexcomponents 0.1.18 → 0.1.19

data/app/javascript/controllers/select_controller.js

@@ -1,251 +1,266 @@
-import { useClickOutside } from 'stimulus-use';
-import { onKeydown, focusItemByIndex } from './dropdown_menu_controller';
-import { initFloatingUi } from '../utils/floating_ui';
-import { getSameLevelItems, focusTrigger, hideContent, showContent, lockScroll, unlockScroll, onClickOutside, setGroupLabelsId, getNextEnabledIndex, getPreviousEnabledIndex, focusElement, } from '../utils';
-import { Controller } from '@hotwired/stimulus';
+import { useClickOutside } from "stimulus-use";
+import { onKeydown, focusItemByIndex } from "./dropdown_menu_controller";
+import { initFloatingUi } from "../utils/floating_ui";
+import {
+  getSameLevelItems,
+  focusTrigger,
+  hideContent,
+  showContent,
+  lockScroll,
+  unlockScroll,
+  onClickOutside,
+  setGroupLabelsId,
+  getNextEnabledIndex,
+  getPreviousEnabledIndex,
+  focusElement,
+} from "../utils";
+import { Controller } from "@hotwired/stimulus";
 const SelectController = class extends Controller {
-    // targets
-    static targets = [
-        'trigger',
-        'contentContainer',
-        'content',
-        'item',
-        'triggerText',
-        'group',
-        'select',
-    ];
-    // values
-    static values = {
-        isOpen: Boolean,
-        selected: String,
-    };
-    connect() {
-        this.items = getSameLevelItems({
-            content: this.contentTarget,
-            items: this.itemTargets,
-            closestContentSelector: '[data-select-target="content"]',
-        });
-        this.itemsInnerText = this.items.map((i) => i.innerText.trim());
-        this.searchString = '';
-        useClickOutside(this, { element: this.contentTarget, dispatchEvent: false });
-        this.DOMKeydownListener = this.onDOMKeydown.bind(this);
-        setGroupLabelsId(this);
-    }
-    toggle(event) {
-        if (this.isOpenValue) {
-            this.close();
-        }
-        else {
-            this.open(event);
-        }
-    }
-    open(event) {
-        this.isOpenValue = true;
-        let elementToFocus = null;
-        if (this.selectedValue) {
-            const item = this.itemTargets.find((i) => i.dataset.value === this.selectedValue);
-            if (item && !item.dataset.disabled) {
-                elementToFocus = item;
-            }
-        }
-        if (!elementToFocus) {
-            if (event instanceof KeyboardEvent) {
-                const key = event.key;
-                if (['ArrowDown', 'Enter', ' '].includes(key)) {
-                    elementToFocus = this.items[0];
-                }
-            }
-            else {
-                elementToFocus = this.contentTarget;
-            }
-        }
-        focusElement(elementToFocus);
-    }
-    close() {
-        this.isOpenValue = false;
-    }
-    onItemFocus(event) {
-        const item = event.currentTarget;
-        item.tabIndex = 0;
-    }
-    onItemBlur(event) {
-        const item = event.currentTarget;
-        item.tabIndex = -1;
+  static name = "select";
+  // targets
+  static targets = [
+    "trigger",
+    "contentContainer",
+    "content",
+    "item",
+    "triggerText",
+    "group",
+    "select",
+  ];
+  // values
+  static values = {
+    isOpen: Boolean,
+    selected: String,
+  };
+  connect() {
+    this.items = getSameLevelItems({
+      content: this.contentTarget,
+      items: this.itemTargets,
+      closestContentSelector: '[data-select-target="content"]',
+    });
+    this.itemsInnerText = this.items.map((i) => i.innerText.trim());
+    this.searchString = "";
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    setGroupLabelsId(this);
+  }
+  toggle(event) {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open(event);
     }
-    focusItemByIndex(event = null, index = null) {
-        focusItemByIndex(this, event, index);
+  }
+  open(event) {
+    this.isOpenValue = true;
+    let elementToFocus = null;
+    if (this.selectedValue) {
+      const item = this.itemTargets.find(
+        (i) => i.dataset.value === this.selectedValue,
+      );
+      if (item && !item.dataset.disabled) {
+        elementToFocus = item;
+      }
     }
-    focusItem(event) {
-        const item = event.currentTarget;
-        const index = this.items.indexOf(item);
-        if (event instanceof KeyboardEvent) {
-            const key = event.key;
-            let newIndex = 0;
-            if (key === 'ArrowUp') {
-                newIndex = getPreviousEnabledIndex({
-                    items: this.items,
-                    currentIndex: index,
-                    wrapAround: false,
-                });
-            }
-            else {
-                newIndex = getNextEnabledIndex({
-                    items: this.items,
-                    currentIndex: index,
-                    wrapAround: false,
-                });
-            }
-            this.items[newIndex].focus();
+    if (!elementToFocus) {
+      if (event instanceof KeyboardEvent) {
+        const key = event.key;
+        if (["ArrowDown", "Enter", " "].includes(key)) {
+          elementToFocus = this.items[0];
         }
-        else {
-            // item mouseover event
-            this.items[index].focus();
-        }
-    }
-    focusContent() {
-        this.contentTarget.focus();
-    }
-    select(event) {
-        const item = event.currentTarget;
-        const value = item.dataset.value;
-        this.selectedValue = value;
-        this.close();
+      } else {
+        elementToFocus = this.contentTarget;
+      }
     }
-    clickOutside(event) {
-        onClickOutside(this, event);
+    focusElement(elementToFocus);
+  }
+  close() {
+    this.isOpenValue = false;
+  }
+  onItemFocus(event) {
+    const item = event.currentTarget;
+    item.tabIndex = 0;
+  }
+  onItemBlur(event) {
+    const item = event.currentTarget;
+    item.tabIndex = -1;
+  }
+  focusItemByIndex(event = null, index = null) {
+    focusItemByIndex(this, event, index);
+  }
+  focusItem(event) {
+    const item = event.currentTarget;
+    const index = this.items.indexOf(item);
+    if (event instanceof KeyboardEvent) {
+      const key = event.key;
+      let newIndex = 0;
+      if (key === "ArrowUp") {
+        newIndex = getPreviousEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        });
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: this.items,
+          currentIndex: index,
+          wrapAround: false,
+        });
+      }
+      this.items[newIndex].focus();
+    } else {
+      // item mouseover event
+      this.items[index].focus();
     }
-    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();
-        }
+  }
+  focusContent() {
+    this.contentTarget.focus();
+  }
+  select(event) {
+    const item = event.currentTarget;
+    const value = item.dataset.value;
+    this.selectedValue = value;
+    this.close();
+  }
+  clickOutside(event) {
+    onClickOutside(this, event);
+  }
+  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();
     }
-    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.selectTarget.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;
+  }
+  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.selectTarget.value = value;
     }
-    disconnect() {
-        this.cleanupEventListeners();
+    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;
     }
-    onDOMKeydown(event) {
-        if (!this.isOpenValue)
-            return;
-        onKeydown(this, event);
-        const { key, altKey, ctrlKey, metaKey } = event;
-        if (key === 'Backspace' ||
-            key === 'Clear' ||
-            (key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey)) {
-            this.handleSearch(key);
-        }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    onKeydown(this, event);
+    const { key, altKey, ctrlKey, metaKey } = event;
+    if (
+      key === "Backspace" ||
+      key === "Clear" ||
+      (key.length === 1 && key !== " " && !altKey && !ctrlKey && !metaKey)
+    ) {
+      this.handleSearch(key);
     }
-    setupEventListeners() {
-        document.addEventListener('keydown', this.DOMKeydownListener);
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+  // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+  handleSearch(char) {
+    const searchString = this.getSearchString(char);
+    const focusedItem = this.items.find(
+      (item) => document.activeElement === item,
+    );
+    const focusedIndex = focusedItem ? this.items.indexOf(focusedItem) : 0;
+    const searchIndex = this.getIndexByLetter(searchString, focusedIndex + 1);
+    // if a match was found, go to it
+    if (searchIndex >= 0) {
+      this.focusItemByIndex(null, searchIndex);
     }
-    cleanupEventListeners() {
-        if (this.cleanup)
-            this.cleanup();
-        document.removeEventListener('keydown', this.DOMKeydownListener);
+    // if no matches, clear the timeout and search string
+    else {
+      window.clearTimeout(this.searchTimeout);
+      this.searchString = "";
     }
-    // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
-    handleSearch(char) {
-        const searchString = this.getSearchString(char);
-        const focusedItem = this.items.find((item) => document.activeElement === item);
-        const focusedIndex = focusedItem ? this.items.indexOf(focusedItem) : 0;
-        const searchIndex = this.getIndexByLetter(searchString, focusedIndex + 1);
-        // if a match was found, go to it
-        if (searchIndex >= 0) {
-            this.focusItemByIndex(null, searchIndex);
-        }
-        // if no matches, clear the timeout and search string
-        else {
-            window.clearTimeout(this.searchTimeout);
-            this.searchString = '';
-        }
+  }
+  filterItemsInnerText(items, filter) {
+    return items.filter((item) => {
+      const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0;
+      return matches;
+    });
+  }
+  getSearchString(char) {
+    // reset typing timeout and start new timeout
+    // this allows us to make multiple-letter matches, like a native select
+    if (typeof this.searchTimeout === "number") {
+      window.clearTimeout(this.searchTimeout);
     }
-    filterItemsInnerText(items, filter) {
-        return items.filter((item) => {
-            const matches = item.toLowerCase().indexOf(filter.toLowerCase()) === 0;
-            return matches;
-        });
+    this.searchTimeout = window.setTimeout(() => {
+      this.searchString = "";
+    }, 500);
+    // add most recent letter to saved search string
+    this.searchString += char;
+    return this.searchString;
+  }
+  // return the index of an option from an array of options, based on a search string
+  // if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
+  getIndexByLetter(filter, startIndex) {
+    const orderedItems = [
+      ...this.itemsInnerText.slice(startIndex),
+      ...this.itemsInnerText.slice(0, startIndex),
+    ];
+    const firstMatch = this.filterItemsInnerText(orderedItems, filter)[0];
+    const allSameLetter = (array) =>
+      array.every((letter) => letter === array[0]);
+    // first check if there is an exact match for the typed string
+    if (firstMatch) {
+      const index = this.itemsInnerText.indexOf(firstMatch);
+      return index;
     }
-    getSearchString(char) {
-        // reset typing timeout and start new timeout
-        // this allows us to make multiple-letter matches, like a native select
-        if (typeof this.searchTimeout === 'number') {
-            window.clearTimeout(this.searchTimeout);
-        }
-        this.searchTimeout = window.setTimeout(() => {
-            this.searchString = '';
-        }, 500);
-        // add most recent letter to saved search string
-        this.searchString += char;
-        return this.searchString;
+    // if the same letter is being repeated, cycle through first-letter matches
+    else if (allSameLetter(filter.split(""))) {
+      const matches = this.filterItemsInnerText(orderedItems, filter[0]);
+      const index = this.itemsInnerText.indexOf(matches[0]);
+      return index;
     }
-    // return the index of an option from an array of options, based on a search string
-    // if the filter is multiple iterations of the same letter (e.g "aaa"), then cycle through first-letter matches
-    getIndexByLetter(filter, startIndex) {
-        const orderedItems = [
-            ...this.itemsInnerText.slice(startIndex),
-            ...this.itemsInnerText.slice(0, startIndex),
-        ];
-        const firstMatch = this.filterItemsInnerText(orderedItems, filter)[0];
-        const allSameLetter = (array) => array.every((letter) => letter === array[0]);
-        // first check if there is an exact match for the typed string
-        if (firstMatch) {
-            const index = this.itemsInnerText.indexOf(firstMatch);
-            return index;
-        }
-        // if the same letter is being repeated, cycle through first-letter matches
-        else if (allSameLetter(filter.split(''))) {
-            const matches = this.filterItemsInnerText(orderedItems, filter[0]);
-            const index = this.itemsInnerText.indexOf(matches[0]);
-            return index;
-        }
-        // if no matches, return -1
-        else {
-            return -1;
-        }
+    // if no matches, return -1
+    else {
+      return -1;
     }
+  }
 };
 export { SelectController };

data/app/javascript/controllers/sidebar_controller.js

@@ -1,30 +1,29 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 export default class default_1 extends Controller {
-    static targets = ['panel', 'panelOffset'];
-    connect() {
-        this.width = this.element.offsetWidth;
-    }
-    toggle() {
-        if (this.isOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    }
-    open() {
-        this.element.dataset.state = 'expanded';
-        this.element.dataset.collapsible = '';
-        this.panelTarget.style.removeProperty('left');
-        this.panelOffsetTarget.style.removeProperty('width');
-    }
-    close() {
-        this.element.dataset.state = 'collapsed';
-        this.element.dataset.collapsible = 'offcanvas';
-        this.panelTarget.style.left = `-${this.width}px`;
-        this.panelOffsetTarget.style.width = `${0}`;
-    }
-    isOpen() {
-        return this.element.dataset.state === 'expanded';
+  static targets = ["panel", "panelOffset"];
+  connect() {
+    this.width = this.element.offsetWidth;
+  }
+  toggle() {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
     }
+  }
+  open() {
+    this.element.dataset.state = "expanded";
+    this.element.dataset.collapsible = "";
+    this.panelTarget.style.removeProperty("left");
+    this.panelOffsetTarget.style.removeProperty("width");
+  }
+  close() {
+    this.element.dataset.state = "collapsed";
+    this.element.dataset.collapsible = "offcanvas";
+    this.panelTarget.style.left = `-${this.width}px`;
+    this.panelOffsetTarget.style.width = `${0}`;
+  }
+  isOpen() {
+    return this.element.dataset.state === "expanded";
+  }
 }

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -1,12 +1,15 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
-    connect() {
-        this.sidebarId = this.element.dataset.sidebarId;
-    }
-    toggle() {
-        const sidebar = this.application.getControllerForElementAndIdentifier(document.querySelector(`#${this.sidebarId}`), 'sidebar');
-        if (sidebar) {
-            sidebar.toggle();
-        }
+  connect() {
+    this.sidebarId = this.element.dataset.sidebarId;
+  }
+  toggle() {
+    const sidebar = this.application.getControllerForElementAndIdentifier(
+      document.querySelector(`#${this.sidebarId}`),
+      "sidebar",
+    );
+    if (sidebar) {
+      sidebar.toggle();
     }
+  }
 }