shadcn_phlexcomponents 0.1.16 → 0.1.18

data/app/javascript/controllers/select_controller.js

@@ -1,265 +1,251 @@
-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);
+    // 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);
     }
-  }
-  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;
-      }
+    toggle(event) {
+        if (this.isOpenValue) {
+            this.close();
+        }
+        else {
+            this.open(event);
+        }
     }
-    if (!elementToFocus) {
-      if (event instanceof KeyboardEvent) {
-        const key = event.key;
-        if (["ArrowDown", "Enter", " "].includes(key)) {
-          elementToFocus = this.items[0];
+    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;
+            }
         }
-      } else {
-        elementToFocus = this.contentTarget;
-      }
+        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);
     }
-    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();
+    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();
+        }
+    }
+    focusContent() {
+        this.contentTarget.focus();
     }
-  }
-  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();
+    select(event) {
+        const item = event.currentTarget;
+        const value = item.dataset.value;
+        this.selectedValue = value;
+        this.close();
     }
-  }
-  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");
+    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();
         }
-      });
-      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;
+        }
+        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;
+        }
     }
-  }
-  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);
+    disconnect() {
+        this.cleanupEventListeners();
     }
-  }
-  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);
+    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);
+        }
     }
-    // if no matches, clear the timeout and search string
-    else {
-      window.clearTimeout(this.searchTimeout);
-      this.searchString = "";
+    setupEventListeners() {
+        document.addEventListener('keydown', this.DOMKeydownListener);
     }
-  }
-  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);
+    cleanupEventListeners() {
+        if (this.cleanup)
+            this.cleanup();
+        document.removeEventListener('keydown', this.DOMKeydownListener);
     }
-    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;
+    // 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;
+        });
     }
-    // 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;
+    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 no matches, return -1
-    else {
-      return -1;
+    // 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;
+        }
     }
-  }
 };
 export { SelectController };

data/app/javascript/controllers/sidebar_controller.js

@@ -1,29 +1,30 @@
-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();
+    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';
     }
-  }
-  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,15 +1,12 @@
-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();
+        }
     }
-  }
 }