shadcn_phlexcomponents 0.1.18 → 0.1.19

data/app/javascript/controllers/slider_controller.js

@@ -1,83 +1,83 @@
-import { Controller } from '@hotwired/stimulus';
-import noUiSlider from 'nouislider';
+import { Controller } from "@hotwired/stimulus";
+import noUiSlider from "nouislider";
 const SliderController = class extends Controller {
-    // targets
-    static targets = ['slider', 'hiddenInput', 'endHiddenInput'];
-    connect() {
-        this.range = this.element.dataset.range === 'true';
-        this.DOMClickListener = this.onDOMClick.bind(this);
-        this.onUpdateValuesListener = this.onUpdateValues.bind(this);
-        const options = this.getOptions();
-        this.slider = noUiSlider.create(this.sliderTarget, options);
-        if (this.element.dataset.disabled === 'true') {
-            this.slider.disable();
-        }
-        if (this.element.dataset.id) {
-            const lowerHandle = this.slider.target.querySelector('.noUi-handle-lower');
-            if (lowerHandle) {
-                lowerHandle.id = this.element.dataset.id;
-            }
-        }
-        this.slider.on('update', this.onUpdateValuesListener);
-        document.addEventListener('click', this.DOMClickListener);
+  static name = "slider";
+  // targets
+  static targets = ["slider", "hiddenInput", "endHiddenInput"];
+  connect() {
+    this.range = this.element.dataset.range === "true";
+    this.DOMClickListener = this.onDOMClick.bind(this);
+    this.onUpdateValuesListener = this.onUpdateValues.bind(this);
+    const options = this.getOptions();
+    this.slider = noUiSlider.create(this.sliderTarget, options);
+    if (this.element.dataset.disabled === "true") {
+      this.slider.disable();
     }
-    disconnect() {
-        document.removeEventListener('click', this.DOMClickListener);
+    if (this.element.dataset.id) {
+      const lowerHandle =
+        this.slider.target.querySelector(".noUi-handle-lower");
+      if (lowerHandle) {
+        lowerHandle.id = this.element.dataset.id;
+      }
     }
-    getOptions() {
-        const defaultOptions = {
-            connect: this.range ? true : 'lower',
-            tooltips: true,
-        };
-        defaultOptions.range = {
-            min: [parseFloat(this.element.dataset.min || '0')],
-            max: [parseFloat(this.element.dataset.max || '100')],
-        };
-        defaultOptions.step = parseFloat(this.element.dataset.step || '1');
-        if (this.range) {
-            defaultOptions.start = [
-                parseFloat(this.element.dataset.value || '0'),
-                parseFloat(this.element.dataset.endValue || '0'),
-            ];
-            defaultOptions.handleAttributes = [
-                { 'aria-label': 'lower' },
-                { 'aria-label': 'upper' },
-            ];
-        }
-        else {
-            defaultOptions.start = [parseFloat(this.element.dataset.value || '0')];
-            defaultOptions.handleAttributes = [{ 'aria-label': 'lower' }];
-        }
-        defaultOptions.orientation = (this.element.dataset.orientation ||
-            'horizontal');
-        try {
-            return {
-                ...defaultOptions,
-                ...JSON.parse(this.element.dataset.options || ''),
-            };
-        }
-        catch {
-            return defaultOptions;
-        }
+    this.slider.on("update", this.onUpdateValuesListener);
+    document.addEventListener("click", this.DOMClickListener);
+  }
+  disconnect() {
+    document.removeEventListener("click", this.DOMClickListener);
+  }
+  getOptions() {
+    const defaultOptions = {
+      connect: this.range ? true : "lower",
+      tooltips: true,
+    };
+    defaultOptions.range = {
+      min: [parseFloat(this.element.dataset.min || "0")],
+      max: [parseFloat(this.element.dataset.max || "100")],
+    };
+    defaultOptions.step = parseFloat(this.element.dataset.step || "1");
+    if (this.range) {
+      defaultOptions.start = [
+        parseFloat(this.element.dataset.value || "0"),
+        parseFloat(this.element.dataset.endValue || "0"),
+      ];
+      defaultOptions.handleAttributes = [
+        { "aria-label": "lower" },
+        { "aria-label": "upper" },
+      ];
+    } else {
+      defaultOptions.start = [parseFloat(this.element.dataset.value || "0")];
+      defaultOptions.handleAttributes = [{ "aria-label": "lower" }];
     }
-    onUpdateValues(values) {
-        this.hiddenInputTarget.value = `${values[0]}`;
-        if (this.range && this.hasEndHiddenInputTarget) {
-            this.endHiddenInputTarget.value = `${values[1]}`;
-        }
+    defaultOptions.orientation =
+      this.element.dataset.orientation || "horizontal";
+    try {
+      return {
+        ...defaultOptions,
+        ...JSON.parse(this.element.dataset.options || ""),
+      };
+    } catch {
+      return defaultOptions;
+    }
+  }
+  onUpdateValues(values) {
+    this.hiddenInputTarget.value = `${values[0]}`;
+    if (this.range && this.hasEndHiddenInputTarget) {
+      this.endHiddenInputTarget.value = `${values[1]}`;
     }
-    onDOMClick(event) {
-        const target = event.target;
-        // Focus handle of slider when label is clicked.
-        if (target instanceof HTMLLabelElement) {
-            const id = target.getAttribute('for');
-            if (id === this.element.dataset.id) {
-                const handle = document.querySelector(`#${id}`);
-                if (handle) {
-                    handle.focus();
-                }
-            }
+  }
+  onDOMClick(event) {
+    const target = event.target;
+    // Focus handle of slider when label is clicked.
+    if (target instanceof HTMLLabelElement) {
+      const id = target.getAttribute("for");
+      if (id === this.element.dataset.id) {
+        const handle = document.querySelector(`#${id}`);
+        if (handle) {
+          handle.focus();
         }
+      }
     }
+  }
 };
 export { SliderController };

data/app/javascript/controllers/switch_controller.js

@@ -1,27 +1,27 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 const SwitchController = class extends Controller {
-    // targets
-    static targets = ['input', 'thumb'];
-    // values
-    static values = {
-        isChecked: Boolean,
-    };
-    toggle() {
-        this.isCheckedValue = !this.isCheckedValue;
-    }
-    isCheckedValueChanged(value) {
-        if (value) {
-            this.element.ariaChecked = 'true';
-            this.element.dataset.state = 'checked';
-            this.thumbTarget.dataset.state = 'checked';
-            this.inputTarget.checked = true;
-        }
-        else {
-            this.element.ariaChecked = 'false';
-            this.element.dataset.state = 'unchecked';
-            this.thumbTarget.dataset.state = 'unchecked';
-            this.inputTarget.checked = false;
-        }
+  static name = "switch";
+  // targets
+  static targets = ["input", "thumb"];
+  // values
+  static values = {
+    isChecked: Boolean,
+  };
+  toggle() {
+    this.isCheckedValue = !this.isCheckedValue;
+  }
+  isCheckedValueChanged(value) {
+    if (value) {
+      this.element.ariaChecked = "true";
+      this.element.dataset.state = "checked";
+      this.thumbTarget.dataset.state = "checked";
+      this.inputTarget.checked = true;
+    } else {
+      this.element.ariaChecked = "false";
+      this.element.dataset.state = "unchecked";
+      this.thumbTarget.dataset.state = "unchecked";
+      this.inputTarget.checked = false;
     }
+  }
 };
 export { SwitchController };

data/app/javascript/controllers/tabs_controller.js

@@ -1,67 +1,67 @@
-import { Controller } from '@hotwired/stimulus';
-import { getNextEnabledIndex, getPreviousEnabledIndex } from '../utils';
+import { Controller } from "@hotwired/stimulus";
+import { getNextEnabledIndex, getPreviousEnabledIndex } from "../utils";
 const TabsController = class extends Controller {
-    // targets
-    static targets = ['trigger', 'content'];
-    // values
-    static values = {
-        active: String,
-    };
-    connect() {
-        if (!this.activeValue) {
-            this.activeValue = this.triggerTargets[0].dataset.value;
-        }
+  static name = "tabs";
+  // targets
+  static targets = ["trigger", "content"];
+  // values
+  static values = {
+    active: String,
+  };
+  connect() {
+    if (!this.activeValue) {
+      this.activeValue = this.triggerTargets[0].dataset.value;
     }
-    setActiveTab(event) {
-        const target = event.currentTarget;
-        if (event instanceof MouseEvent) {
-            this.activeValue = target.dataset.value;
-        }
-        else {
-            const key = event.key;
-            const focusableTriggers = this.triggerTargets.filter((t) => !t.disabled);
-            const index = focusableTriggers.indexOf(target);
-            let newIndex = 0;
-            if (key === 'ArrowLeft') {
-                newIndex = getPreviousEnabledIndex({
-                    items: focusableTriggers,
-                    currentIndex: index,
-                    wrapAround: true,
-                });
-            }
-            else {
-                newIndex = getNextEnabledIndex({
-                    items: focusableTriggers,
-                    currentIndex: index,
-                    wrapAround: true,
-                });
-            }
-            this.activeValue = focusableTriggers[newIndex].dataset.value;
-            focusableTriggers[newIndex].focus();
-        }
-    }
-    activeValueChanged(value) {
-        this.triggerTargets.forEach((trigger) => {
-            const triggerValue = trigger.dataset.value;
-            const content = this.contentTargets.find((c) => {
-                return c.dataset.value === triggerValue;
-            });
-            if (!content) {
-                throw new Error(`Could not find TabsContent with value "${triggerValue}"`);
-            }
-            if (triggerValue === value) {
-                trigger.ariaSelected = 'true';
-                trigger.tabIndex = 0;
-                trigger.dataset.state = 'active';
-                content.classList.remove('hidden');
-            }
-            else {
-                trigger.ariaSelected = 'false';
-                trigger.tabIndex = -1;
-                trigger.dataset.state = 'inactive';
-                content.classList.add('hidden');
-            }
+  }
+  setActiveTab(event) {
+    const target = event.currentTarget;
+    if (event instanceof MouseEvent) {
+      this.activeValue = target.dataset.value;
+    } else {
+      const key = event.key;
+      const focusableTriggers = this.triggerTargets.filter((t) => !t.disabled);
+      const index = focusableTriggers.indexOf(target);
+      let newIndex = 0;
+      if (key === "ArrowLeft") {
+        newIndex = getPreviousEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
+        });
+      } else {
+        newIndex = getNextEnabledIndex({
+          items: focusableTriggers,
+          currentIndex: index,
+          wrapAround: true,
         });
+      }
+      this.activeValue = focusableTriggers[newIndex].dataset.value;
+      focusableTriggers[newIndex].focus();
     }
+  }
+  activeValueChanged(value) {
+    this.triggerTargets.forEach((trigger) => {
+      const triggerValue = trigger.dataset.value;
+      const content = this.contentTargets.find((c) => {
+        return c.dataset.value === triggerValue;
+      });
+      if (!content) {
+        throw new Error(
+          `Could not find TabsContent with value "${triggerValue}"`,
+        );
+      }
+      if (triggerValue === value) {
+        trigger.ariaSelected = "true";
+        trigger.tabIndex = 0;
+        trigger.dataset.state = "active";
+        content.classList.remove("hidden");
+      } else {
+        trigger.ariaSelected = "false";
+        trigger.tabIndex = -1;
+        trigger.dataset.state = "inactive";
+        content.classList.add("hidden");
+      }
+    });
+  }
 };
 export { TabsController };

data/app/javascript/controllers/theme_switcher_controller.js

@@ -1,32 +1,33 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 const ThemeSwitcherController = class extends Controller {
-    initialize() {
-        if (localStorage.theme === 'dark' ||
-            (!('theme' in localStorage) &&
-                window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            this.setDarkMode();
-        }
-        else {
-            this.setLightMode();
-        }
+  static name = "theme-switcher";
+  initialize() {
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      this.setDarkMode();
+    } else {
+      this.setLightMode();
     }
-    toggle() {
-        if (document.documentElement.classList.contains('dark')) {
-            this.setLightMode();
-        }
-        else {
-            this.setDarkMode();
-        }
-    }
-    setLightMode() {
-        localStorage.theme = 'light';
-        document.documentElement.classList.remove('dark');
-        document.documentElement.style.colorScheme = '';
-    }
-    setDarkMode() {
-        localStorage.theme = 'dark';
-        document.documentElement.classList.add('dark');
-        document.documentElement.style.colorScheme = 'dark';
+  }
+  toggle() {
+    if (document.documentElement.classList.contains("dark")) {
+      this.setLightMode();
+    } else {
+      this.setDarkMode();
     }
+  }
+  setLightMode() {
+    localStorage.theme = "light";
+    document.documentElement.classList.remove("dark");
+    document.documentElement.style.colorScheme = "";
+  }
+  setDarkMode() {
+    localStorage.theme = "dark";
+    document.documentElement.classList.add("dark");
+    document.documentElement.style.colorScheme = "dark";
+  }
 };
 export { ThemeSwitcherController };

data/app/javascript/controllers/toast_container_controller.js

@@ -1,35 +1,49 @@
-import { Controller } from '@hotwired/stimulus';
-import DOMPurify from 'dompurify';
+import { Controller } from "@hotwired/stimulus";
+import DOMPurify from "dompurify";
 const ToastContainerController = class extends Controller {
-    addToast({ title, description, action, variant = 'default', duration = 5000, }) {
-        const template = (variant === 'default'
-            ? this.element.querySelector('[data-variant="default"]')
-            : this.element.querySelector('[data-variant="destructive"]'));
-        const clone = template.content.cloneNode(true);
-        const toastTemplate = clone.querySelector('[data-shadcn-phlexcomponents="toast"]');
-        toastTemplate.dataset.duration = String(duration);
-        const titleTemplate = clone.querySelector('[data-shadcn-phlexcomponents="toast-title"]');
-        const descriptionTemplate = clone.querySelector('[data-shadcn-phlexcomponents="toast-description"]');
-        const actionTemplate = clone.querySelector('[data-shadcn-phlexcomponents="toast-action"]');
-        titleTemplate.innerHTML = DOMPurify.sanitize(title);
-        if (description) {
-            descriptionTemplate.innerHTML = DOMPurify.sanitize(description);
-        }
-        else {
-            descriptionTemplate.remove();
-        }
-        if (action) {
-            const element = document.createElement('div');
-            element.innerHTML = DOMPurify.sanitize(action);
-            const actionElement = element.firstElementChild;
-            const classes = actionTemplate.classList;
-            actionElement.classList.add(...classes);
-            actionTemplate.replaceWith(actionElement);
-        }
-        else {
-            actionTemplate.remove();
-        }
-        this.element.append(clone);
+  static name = "toast-container";
+  addToast({
+    title,
+    description,
+    action,
+    variant = "default",
+    duration = 5000,
+  }) {
+    const template =
+      variant === "default"
+        ? this.element.querySelector('[data-variant="default"]')
+        : this.element.querySelector('[data-variant="destructive"]');
+    const clone = template.content.cloneNode(true);
+    const toastTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast"]',
+    );
+    toastTemplate.dataset.duration = String(duration);
+    const titleTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-title"]',
+    );
+    const descriptionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-description"]',
+    );
+    const actionTemplate = clone.querySelector(
+      '[data-shadcn-phlexcomponents="toast-action"]',
+    );
+    titleTemplate.innerHTML = DOMPurify.sanitize(title);
+    if (description) {
+      descriptionTemplate.innerHTML = DOMPurify.sanitize(description);
+    } else {
+      descriptionTemplate.remove();
     }
+    if (action) {
+      const element = document.createElement("div");
+      element.innerHTML = DOMPurify.sanitize(action);
+      const actionElement = element.firstElementChild;
+      const classes = actionTemplate.classList;
+      actionElement.classList.add(...classes);
+      actionTemplate.replaceWith(actionElement);
+    } else {
+      actionTemplate.remove();
+    }
+    this.element.append(clone);
+  }
 };
 export { ToastContainerController };

data/app/javascript/controllers/toast_controller.js

@@ -1,22 +1,23 @@
-import { Controller } from '@hotwired/stimulus';
-import { ANIMATION_OUT_DELAY } from '../utils';
+import { Controller } from "@hotwired/stimulus";
+import { ANIMATION_OUT_DELAY } from "../utils";
 const ToastController = class extends Controller {
-    connect() {
-        this.duration = Number(this.element.dataset.duration);
-        this.close();
-    }
-    cancelClose() {
-        window.clearTimeout(this.closeTimeout);
-    }
-    close() {
-        if (this.duration > 0) {
-            this.closeTimeout = window.setTimeout(() => {
-                this.element.dataset.state = 'closed';
-                setTimeout(() => {
-                    this.element.remove();
-                }, ANIMATION_OUT_DELAY);
-            }, this.duration);
-        }
+  static name = "toast";
+  connect() {
+    this.duration = Number(this.element.dataset.duration);
+    this.close();
+  }
+  cancelClose() {
+    window.clearTimeout(this.closeTimeout);
+  }
+  close() {
+    if (this.duration > 0) {
+      this.closeTimeout = window.setTimeout(() => {
+        this.element.dataset.state = "closed";
+        setTimeout(() => {
+          this.element.remove();
+        }, ANIMATION_OUT_DELAY);
+      }, this.duration);
     }
+  }
 };
 export { ToastController };

data/app/javascript/controllers/toggle_controller.js

@@ -1,21 +1,21 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 const ToggleController = class extends Controller {
-    // values
-    static values = {
-        isOn: Boolean,
-    };
-    toggle() {
-        this.isOnValue = !this.isOnValue;
-    }
-    isOnValueChanged(isOn) {
-        if (isOn) {
-            this.element.dataset.state = 'on';
-            this.element.ariaPressed = 'true';
-        }
-        else {
-            this.element.dataset.state = 'off';
-            this.element.ariaPressed = 'false';
-        }
+  static name = "toggle";
+  // values
+  static values = {
+    isOn: Boolean,
+  };
+  toggle() {
+    this.isOnValue = !this.isOnValue;
+  }
+  isOnValueChanged(isOn) {
+    if (isOn) {
+      this.element.dataset.state = "on";
+      this.element.ariaPressed = "true";
+    } else {
+      this.element.dataset.state = "off";
+      this.element.ariaPressed = "false";
     }
+  }
 };
 export { ToggleController };

data/app/javascript/controllers/toggle_group_controller.js

@@ -1,21 +1,21 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller } from "@hotwired/stimulus";
 const ToggleController = class extends Controller {
-    // values
-    static values = {
-        isOn: Boolean,
-    };
-    toggle() {
-        this.isOnValue = !this.isOnValue;
-    }
-    isOnValueChanged(isOn) {
-        if (isOn) {
-            this.element.dataset.state = 'on';
-            this.element.ariaPressed = 'true';
-        }
-        else {
-            this.element.dataset.state = 'off';
-            this.element.ariaPressed = 'false';
-        }
+  static name = "toggle-group";
+  // values
+  static values = {
+    isOn: Boolean,
+  };
+  toggle() {
+    this.isOnValue = !this.isOnValue;
+  }
+  isOnValueChanged(isOn) {
+    if (isOn) {
+      this.element.dataset.state = "on";
+      this.element.ariaPressed = "true";
+    } else {
+      this.element.dataset.state = "off";
+      this.element.ariaPressed = "false";
     }
+  }
 };
 export { ToggleController };