shadcn_phlexcomponents 0.1.18 → 0.1.19

data/app/javascript/controllers/date_picker_controller.js

@@ -1,275 +1,274 @@
-import { Controller } from '@hotwired/stimulus';
-import { useClickOutside } from 'stimulus-use';
-import { focusTrigger, getFocusableElements, showContent, hideContent, lockScroll, unlockScroll, handleTabNavigation, focusElement, } from '../utils';
-import { initFloatingUi } from '../utils/floating_ui';
-import { Calendar } from 'vanilla-calendar-pro';
-import Inputmask from 'inputmask';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import utc from 'dayjs/plugin/utc';
+import { Controller } from "@hotwired/stimulus";
+import { useClickOutside } from "stimulus-use";
+import {
+  focusTrigger,
+  getFocusableElements,
+  showContent,
+  hideContent,
+  lockScroll,
+  unlockScroll,
+  handleTabNavigation,
+  focusElement,
+} from "../utils";
+import { initFloatingUi } from "../utils/floating_ui";
+import { Calendar } from "vanilla-calendar-pro";
+import Inputmask from "inputmask";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import utc from "dayjs/plugin/utc";
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);
 const SMALL_SCREEN_BREAKPOINT = 768;
 const isSmallScreen = () => {
-    return window.innerWidth < SMALL_SCREEN_BREAKPOINT;
+  return window.innerWidth < SMALL_SCREEN_BREAKPOINT;
 };
-const DAYJS_FORMAT = 'YYYY-MM-DD';
+const DAYJS_FORMAT = "YYYY-MM-DD";
 const DatePickerController = class extends Controller {
-    // targets
-    static targets = [
-        'trigger',
-        'triggerText',
-        'contentContainer',
-        'content',
-        'input',
-        'hiddenInput',
-        'inputContainer',
-        'calendar',
-        'overlay',
-    ];
-    // values
-    static values = { isOpen: Boolean, date: String };
-    connect() {
-        this.format = this.element.dataset.format || 'DD/MM/YYYY';
-        this.mask = this.element.dataset.mask === 'true';
-        this.DOMKeydownListener = this.onDOMKeydown.bind(this);
-        this.onClickDateListener = this.onClickDate.bind(this);
-        const options = this.getOptions();
-        this.calendar = new Calendar(this.calendarTarget, options);
-        this.calendar.init();
-        if (this.hasInputTarget && this.mask) {
-            this.setupInputMask();
-        }
-        this.calendarTarget.removeAttribute('tabindex');
-        useClickOutside(this, { element: this.contentTarget, dispatchEvent: false });
+  static name = "date-picker";
+  // targets
+  static targets = [
+    "trigger",
+    "triggerText",
+    "contentContainer",
+    "content",
+    "input",
+    "hiddenInput",
+    "inputContainer",
+    "calendar",
+    "overlay",
+  ];
+  // values
+  static values = { isOpen: Boolean, date: String };
+  connect() {
+    this.format = this.element.dataset.format || "DD/MM/YYYY";
+    this.mask = this.element.dataset.mask === "true";
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    this.onClickDateListener = this.onClickDate.bind(this);
+    const options = this.getOptions();
+    this.calendar = new Calendar(this.calendarTarget, options);
+    this.calendar.init();
+    if (this.hasInputTarget && this.mask) {
+      this.setupInputMask();
     }
-    contentContainerTargetConnected() {
-        if (isSmallScreen()) {
-            const windowHeight = window.innerHeight;
-            const datePickerHeight = this.identifier === 'date-picker' ? 300 : 600;
-            let topOffset = 0;
-            if (windowHeight > datePickerHeight) {
-                topOffset = (windowHeight - datePickerHeight) / 2;
-            }
-            Object.assign(this.contentContainerTarget.style, {
-                top: `${topOffset}px`,
-                left: '50%',
-                transform: 'translateX(-50%)',
-                pointerEvents: 'auto',
-            });
-        }
+    this.calendarTarget.removeAttribute("tabindex");
+    useClickOutside(this, {
+      element: this.contentTarget,
+      dispatchEvent: false,
+    });
+  }
+  contentContainerTargetConnected() {
+    if (isSmallScreen()) {
+      const windowHeight = window.innerHeight;
+      const datePickerHeight = this.identifier === "date-picker" ? 300 : 600;
+      let topOffset = 0;
+      if (windowHeight > datePickerHeight) {
+        topOffset = (windowHeight - datePickerHeight) / 2;
+      }
+      Object.assign(this.contentContainerTarget.style, {
+        top: `${topOffset}px`,
+        left: "50%",
+        transform: "translateX(-50%)",
+        pointerEvents: "auto",
+      });
     }
-    toggle() {
-        if (this.isOpenValue) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
+  }
+  toggle() {
+    if (this.isOpenValue) {
+      this.close();
+    } else {
+      this.open();
     }
-    open() {
-        this.isOpenValue = true;
-    }
-    close() {
-        this.isOpenValue = false;
-    }
-    inputBlur() {
-        let dateDisplay = '';
-        const date = this.calendar.context.selectedDates[0];
-        if (date) {
-            dateDisplay = dayjs(date).format(this.format);
-        }
-        this.inputTarget.value = dateDisplay;
-        this.inputContainerTarget.dataset.focus = 'false';
+  }
+  open() {
+    this.isOpenValue = true;
+  }
+  close() {
+    this.isOpenValue = false;
+  }
+  inputBlur() {
+    let dateDisplay = "";
+    const date = this.calendar.context.selectedDates[0];
+    if (date) {
+      dateDisplay = dayjs(date).format(this.format);
     }
-    inputDate(event) {
-        const value = event.target.value;
-        if (value.length === 0) {
-            this.calendar.set({
-                selectedDates: [],
-            });
-            this.dateValue = '';
-        }
-        if (value.length > 0 && dayjs(value, this.format, true).isValid()) {
-            const dayjsDate = dayjs(value, this.format).format(DAYJS_FORMAT);
-            this.calendar.set({
-                selectedDates: [dayjsDate],
-            });
-            this.dateValue = dayjsDate;
-        }
-    }
-    setContainerFocus() {
-        this.inputContainerTarget.dataset.focus = 'true';
-    }
-    clickOutside(event) {
-        const target = event.target;
-        // Let trigger handle state
-        if (target === this.triggerTarget)
-            return;
-        if (this.triggerTarget.contains(target))
-            return;
-        if (this.triggerTarget.id === target.getAttribute('for'))
-            return;
-        this.close();
-    }
-    isOpenValueChanged(isOpen, previousIsOpen) {
-        if (isOpen) {
-            showContent({
-                trigger: this.triggerTarget,
-                content: this.contentTarget,
-                contentContainer: this.contentContainerTarget,
-            });
-            // Prevent width from changing when changing to month/year view
-            if (!this.contentTarget.dataset.width) {
-                const contentWidth = this.contentTarget.offsetWidth;
-                this.contentTarget.dataset.width = `${contentWidth}`;
-                this.contentTarget.style.maxWidth = `${contentWidth}px`;
-                this.contentTarget.style.minWidth = `${contentWidth}px`;
-            }
-            if (isSmallScreen()) {
-                lockScroll(this.contentTarget.id);
-                this.overlayTarget.style.display = '';
-                this.overlayTarget.dataset.state = 'open';
-            }
-            else {
-                this.cleanup = initFloatingUi({
-                    referenceElement: this.hasInputTarget
-                        ? this.inputTarget
-                        : this.triggerTarget,
-                    floatingElement: this.contentContainerTarget,
-                    side: this.contentTarget.dataset.side,
-                    align: this.contentTarget.dataset.align,
-                    sideOffset: 4,
-                });
-            }
-            let elementToFocus = null;
-            const focusableElements = getFocusableElements(this.contentTarget);
-            const selectedElement = Array.from(focusableElements).find((e) => e.ariaSelected);
-            const currentElement = this.contentTarget.querySelector('[aria-current]');
-            if (selectedElement) {
-                elementToFocus = selectedElement;
-            }
-            else if (currentElement) {
-                const firstElementChild = currentElement.firstElementChild;
-                elementToFocus = firstElementChild;
-            }
-            else {
-                elementToFocus = focusableElements[0];
-            }
-            focusElement(elementToFocus);
-            this.setupEventListeners();
-        }
-        else {
-            hideContent({
-                trigger: this.triggerTarget,
-                content: this.contentTarget,
-                contentContainer: this.contentContainerTarget,
-            });
-            if (isSmallScreen()) {
-                unlockScroll(this.contentTarget.id);
-                this.overlayTarget.style.display = 'none';
-                this.overlayTarget.dataset.state = 'closed';
-            }
-            if (previousIsOpen) {
-                focusTrigger(this.triggerTarget);
-            }
-            this.cleanupEventListeners();
-        }
+    this.inputTarget.value = dateDisplay;
+    this.inputContainerTarget.dataset.focus = "false";
+  }
+  inputDate(event) {
+    const value = event.target.value;
+    if (value.length === 0) {
+      this.calendar.set({
+        selectedDates: [],
+      });
+      this.dateValue = "";
     }
-    dateValueChanged(value) {
-        if (value && value.length > 0) {
-            const dayjsDate = dayjs(value);
-            const formattedDate = dayjsDate.format(this.format);
-            if (this.hasInputTarget)
-                this.inputTarget.value = formattedDate;
-            if (this.hasTriggerTextTarget) {
-                this.triggerTarget.dataset.hasValue = 'true';
-                this.triggerTextTarget.textContent = formattedDate;
-            }
-            this.hiddenInputTarget.value = dayjsDate.utc().format();
-        }
-        else {
-            if (this.hasInputTarget)
-                this.inputTarget.value = '';
-            if (this.hasTriggerTextTarget) {
-                this.triggerTarget.dataset.hasValue = 'false';
-                if (this.triggerTarget.dataset.placeholder) {
-                    this.triggerTextTarget.textContent =
-                        this.triggerTarget.dataset.placeholder;
-                }
-                else {
-                    this.triggerTextTarget.textContent = '';
-                }
-            }
-            this.hiddenInputTarget.value = '';
-        }
+    if (value.length > 0 && dayjs(value, this.format, true).isValid()) {
+      const dayjsDate = dayjs(value, this.format).format(DAYJS_FORMAT);
+      this.calendar.set({
+        selectedDates: [dayjsDate],
+      });
+      this.dateValue = dayjsDate;
     }
-    disconnect() {
-        this.cleanupEventListeners();
+  }
+  setContainerFocus() {
+    this.inputContainerTarget.dataset.focus = "true";
+  }
+  clickOutside(event) {
+    const target = event.target;
+    // Let trigger handle state
+    if (target === this.triggerTarget) return;
+    if (this.triggerTarget.contains(target)) return;
+    if (this.triggerTarget.id === target.getAttribute("for")) return;
+    this.close();
+  }
+  isOpenValueChanged(isOpen, previousIsOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      // Prevent width from changing when changing to month/year view
+      if (!this.contentTarget.dataset.width) {
+        const contentWidth = this.contentTarget.offsetWidth;
+        this.contentTarget.dataset.width = `${contentWidth}`;
+        this.contentTarget.style.maxWidth = `${contentWidth}px`;
+        this.contentTarget.style.minWidth = `${contentWidth}px`;
+      }
+      if (isSmallScreen()) {
+        lockScroll(this.contentTarget.id);
+        this.overlayTarget.style.display = "";
+        this.overlayTarget.dataset.state = "open";
+      } else {
+        this.cleanup = initFloatingUi({
+          referenceElement: this.hasInputTarget
+            ? this.inputTarget
+            : this.triggerTarget,
+          floatingElement: this.contentContainerTarget,
+          side: this.contentTarget.dataset.side,
+          align: this.contentTarget.dataset.align,
+          sideOffset: 4,
+        });
+      }
+      let elementToFocus = null;
+      const focusableElements = getFocusableElements(this.contentTarget);
+      const selectedElement = Array.from(focusableElements).find(
+        (e) => e.ariaSelected,
+      );
+      const currentElement = this.contentTarget.querySelector("[aria-current]");
+      if (selectedElement) {
+        elementToFocus = selectedElement;
+      } else if (currentElement) {
+        const firstElementChild = currentElement.firstElementChild;
+        elementToFocus = firstElementChild;
+      } else {
+        elementToFocus = focusableElements[0];
+      }
+      focusElement(elementToFocus);
+      this.setupEventListeners();
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentContainerTarget,
+      });
+      if (isSmallScreen()) {
+        unlockScroll(this.contentTarget.id);
+        this.overlayTarget.style.display = "none";
+        this.overlayTarget.dataset.state = "closed";
+      }
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget);
+      }
+      this.cleanupEventListeners();
     }
-    onClickDate(self) {
-        const date = self.context.selectedDates[0];
-        if (date) {
-            this.dateValue = date;
-            this.close();
-        }
-        else {
-            this.dateValue = '';
+  }
+  dateValueChanged(value) {
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value);
+      const formattedDate = dayjsDate.format(this.format);
+      if (this.hasInputTarget) this.inputTarget.value = formattedDate;
+      if (this.hasTriggerTextTarget) {
+        this.triggerTarget.dataset.hasValue = "true";
+        this.triggerTextTarget.textContent = formattedDate;
+      }
+      this.hiddenInputTarget.value = dayjsDate.utc().format();
+    } else {
+      if (this.hasInputTarget) this.inputTarget.value = "";
+      if (this.hasTriggerTextTarget) {
+        this.triggerTarget.dataset.hasValue = "false";
+        if (this.triggerTarget.dataset.placeholder) {
+          this.triggerTextTarget.textContent =
+            this.triggerTarget.dataset.placeholder;
+        } else {
+          this.triggerTextTarget.textContent = "";
         }
+      }
+      this.hiddenInputTarget.value = "";
     }
-    setupEventListeners() {
-        document.addEventListener('keydown', this.DOMKeydownListener);
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onClickDate(self) {
+    const date = self.context.selectedDates[0];
+    if (date) {
+      this.dateValue = date;
+      this.close();
+    } else {
+      this.dateValue = "";
     }
-    cleanupEventListeners() {
-        if (this.cleanup)
-            this.cleanup();
-        document.removeEventListener('keydown', this.DOMKeydownListener);
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+  }
+  cleanupEventListeners() {
+    if (this.cleanup) this.cleanup();
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+  }
+  getOptions() {
+    let options = {
+      type: "default",
+      enableJumpToSelectedDate: true,
+      onClickDate: this.onClickDateListener,
+    };
+    const date = this.element.dataset.value;
+    if (date && dayjs(date).isValid()) {
+      const dayjsDate = dayjs(date).format(DAYJS_FORMAT);
+      options.selectedDates = [dayjsDate];
     }
-    getOptions() {
-        let options = {
-            type: 'default',
-            enableJumpToSelectedDate: true,
-            onClickDate: this.onClickDateListener,
-        };
-        const date = this.element.dataset.value;
-        if (date && dayjs(date).isValid()) {
-            const dayjsDate = dayjs(date).format(DAYJS_FORMAT);
-            options.selectedDates = [dayjsDate];
-        }
-        try {
-            options = {
-                ...options,
-                ...JSON.parse(this.element.dataset.options || ''),
-            };
-        }
-        catch {
-            // noop
-        }
-        if (options.selectedDates && options.selectedDates.length > 0) {
-            this.dateValue = `${options.selectedDates[0]}`;
-        }
-        return options;
+    try {
+      options = {
+        ...options,
+        ...JSON.parse(this.element.dataset.options || ""),
+      };
+    } catch {
+      // noop
     }
-    onDOMKeydown(event) {
-        if (!this.isOpenValue)
-            return;
-        const key = event.key;
-        if (key === 'Escape') {
-            this.close();
-        }
-        else if (key === 'Tab') {
-            handleTabNavigation(this.contentTarget, event);
-        }
-        else if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(key) &&
-            document.activeElement != this.inputTarget) {
-            event.preventDefault();
-        }
+    if (options.selectedDates && options.selectedDates.length > 0) {
+      this.dateValue = `${options.selectedDates[0]}`;
     }
-    setupInputMask() {
-        const im = new Inputmask(this.format.replace(/[^/]/g, '9'), {
-            showMaskOnHover: false,
-        });
-        im.mask(this.inputTarget);
+    return options;
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (key === "Escape") {
+      this.close();
+    } else if (key === "Tab") {
+      handleTabNavigation(this.contentTarget, event);
+    } else if (
+      ["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(key) &&
+      document.activeElement != this.inputTarget
+    ) {
+      event.preventDefault();
     }
+  }
+  setupInputMask() {
+    const im = new Inputmask(this.format.replace(/[^/]/g, "9"), {
+      showMaskOnHover: false,
+    });
+    im.mask(this.inputTarget);
+  }
 };
 export { DatePickerController };