shadcn_phlexcomponents 0.1.16 → 0.1.18

data/app/javascript/controllers/slider_controller.js

@@ -1,82 +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;
-      }
+    // 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);
     }
-    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" }];
+    disconnect() {
+        document.removeEventListener('click', this.DOMClickListener);
     }
-    defaultOptions.orientation =
-      this.element.dataset.orientation || "horizontal";
-    try {
-      return {
-        ...defaultOptions,
-        ...JSON.parse(this.element.dataset.options || ""),
-      };
-    } catch {
-      return defaultOptions;
+    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;
+        }
     }
-  }
-  onUpdateValues(values) {
-    this.hiddenInputTarget.value = `${values[0]}`;
-    if (this.range && this.hasEndHiddenInputTarget) {
-      this.endHiddenInputTarget.value = `${values[1]}`;
+    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,26 +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;
+    // 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,66 +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;
+    // 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,
+    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');
+            }
         });
-      }
-      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,32 @@
-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();
+    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();
+    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';
     }
-  }
-  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,48 +1,35 @@
-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();
+    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);
     }
-    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,22 @@
-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);
+    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,20 +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";
+    // 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,20 +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";
+    // 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 };