shadcn_phlexcomponents 0.1.11 → 0.1.16

data/app/javascript/controllers/date_picker_controller.js

@@ -0,0 +1,258 @@
+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 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,
+    });
+  }
+  contentContainerTargetConnected() {
+    // Datepicker is shown as a dialog on small screens
+    const styles = window.getComputedStyle(this.contentContainerTarget);
+    this.isMobile = styles.translate === "-50%";
+  }
+  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";
+  }
+  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 (this.isMobile) {
+        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 (this.isMobile) {
+        unlockScroll(this.contentTarget.id);
+        this.overlayTarget.style.display = "none";
+        this.overlayTarget.dataset.state = "closed";
+      }
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget);
+      }
+      this.cleanupEventListeners();
+    }
+  }
+  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 = "";
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onClickDate(self) {
+    const date = self.context.selectedDates[0];
+    if (date) {
+      this.dateValue = date;
+      this.close();
+    } else {
+      this.dateValue = "";
+    }
+  }
+  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];
+    }
+    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;
+  }
+  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 };

data/app/javascript/controllers/date_range_picker_controller.js

@@ -0,0 +1,200 @@
+import { DatePickerController } from "./date_picker_controller";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import utc from "dayjs/plugin/utc";
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+const DELIMITER = " - ";
+const DAYJS_FORMAT = "YYYY-MM-DD";
+const DateRangePickerController = class extends DatePickerController {
+  // targets
+  static targets = [
+    "trigger",
+    "triggerText",
+    "contentContainer",
+    "content",
+    "input",
+    "hiddenInput",
+    "endHiddenInput",
+    "inputContainer",
+    "calendar",
+    "overlay",
+  ];
+  // values
+  static values = {
+    isOpen: Boolean,
+    date: String,
+    endDate: String,
+  };
+  inputBlur() {
+    const dates = this.calendar.context.selectedDates;
+    const startDate = dates[0];
+    const endDate = dates[1];
+    let datesDisplay = "";
+    if (startDate) {
+      datesDisplay = `${dayjs(startDate).format(this.format)}${DELIMITER}`;
+    }
+    if (endDate) {
+      datesDisplay = `${datesDisplay}${dayjs(endDate).format(this.format)}`;
+    }
+    this.inputTarget.value = datesDisplay;
+    this.inputContainerTarget.dataset.focus = "false";
+  }
+  inputDate(event) {
+    const value = event.target.value;
+    const dates = value.split(DELIMITER).filter((d) => d.length > 0);
+    if (dates.length > 0) {
+      const startDate = dates[0];
+      const endDate = dates[1];
+      let selectedDates = this.calendar.context.selectedDates;
+      if (dayjs(startDate, this.format, true).isValid()) {
+        const dayjsDate = dayjs(value, this.format).format(DAYJS_FORMAT);
+        selectedDates[0] = dayjsDate;
+      }
+      if (dayjs(endDate, this.format, true).isValid()) {
+        const dayjsDate = dayjs(endDate, this.format).format(DAYJS_FORMAT);
+        selectedDates[1] = dayjsDate;
+      }
+      selectedDates = selectedDates.filter((d) => !!d);
+      this.calendar.set({
+        selectedDates: selectedDates,
+      });
+      if (selectedDates[0]) {
+        this.dateValue = selectedDates[0];
+      }
+      if (selectedDates[1]) {
+        this.endDateValue = selectedDates[1];
+      }
+    } else {
+      this.calendar.set({
+        selectedDates: [],
+      });
+      this.dateValue = "";
+      this.endDateValue = "";
+    }
+  }
+  dateValueChanged(value) {
+    this.onClickDateListener = this.onClickDate.bind(this);
+    const endDate = this.endDateValue;
+    let datesDisplay = "";
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value);
+      const formattedDate = dayjsDate.format(this.format);
+      this.hiddenInputTarget.value = dayjsDate.utc().format();
+      if (endDate) {
+        datesDisplay = `${formattedDate}${DELIMITER}${dayjs(endDate).format(this.format)}`;
+      } else {
+        datesDisplay = `${formattedDate}${DELIMITER}`;
+      }
+    } else {
+      this.hiddenInputTarget.value = "";
+      if (endDate) {
+        datesDisplay = `${DELIMITER}${dayjs(endDate).format(this.format)}`;
+      }
+    }
+    if (this.hasInputTarget) this.inputTarget.value = datesDisplay;
+    if (this.hasTriggerTextTarget) {
+      const hasValue = (!!value && value.length > 0) || !!endDate;
+      this.triggerTarget.dataset.hasValue = `${hasValue}`;
+      if (this.triggerTarget.dataset.placeholder && !hasValue) {
+        this.triggerTextTarget.textContent =
+          this.triggerTarget.dataset.placeholder;
+      } else {
+        this.triggerTextTarget.textContent = datesDisplay;
+      }
+    }
+  }
+  endDateValueChanged(value) {
+    const startDate = this.dateValue;
+    let datesDisplay = "";
+    if (value && value.length > 0) {
+      const dayjsDate = dayjs(value);
+      const formattedDate = dayjsDate.format(this.format);
+      this.endHiddenInputTarget.value = dayjsDate.utc().format();
+      if (startDate) {
+        datesDisplay = `${dayjs(startDate).format(this.format)}${DELIMITER}${formattedDate}`;
+      } else {
+        datesDisplay = `${DELIMITER}${formattedDate}`;
+      }
+    } else {
+      this.endHiddenInputTarget.value = "";
+      if (startDate) {
+        datesDisplay = `${dayjs(startDate).format(this.format)}${DELIMITER}`;
+      }
+    }
+    if (this.hasInputTarget) this.inputTarget.value = datesDisplay;
+    if (this.hasTriggerTextTarget) {
+      const hasValue = (!!value && value.length > 0) || !!startDate;
+      this.triggerTarget.dataset.hasValue = `${hasValue}`;
+      if (this.triggerTarget.dataset.placeholder && !hasValue) {
+        this.triggerTextTarget.textContent =
+          this.triggerTarget.dataset.placeholder;
+      } else {
+        this.triggerTextTarget.textContent = datesDisplay;
+      }
+    }
+  }
+  getOptions() {
+    let options = {
+      type: "multiple",
+      selectionDatesMode: "multiple-ranged",
+      displayMonthsCount: 2,
+      monthsToSwitch: 1,
+      displayDatesOutside: false,
+      enableJumpToSelectedDate: true,
+      onClickDate: this.onClickDateListener,
+    };
+    const selectedDates = [];
+    const startDate = this.element.dataset.value;
+    const endDate = this.element.dataset.endValue;
+    if (startDate && dayjs(startDate).isValid()) {
+      const date = dayjs(startDate).format(DAYJS_FORMAT);
+      selectedDates.push(date);
+    }
+    if (endDate && dayjs(endDate).isValid()) {
+      const date = dayjs(endDate).format(DAYJS_FORMAT);
+      selectedDates.push(date);
+    }
+    options.selectedDates = selectedDates;
+    try {
+      options = {
+        ...options,
+        ...JSON.parse(this.element.dataset.options || ""),
+      };
+    } catch {
+      // noop
+    }
+    if (options.selectedDates && options.selectedDates.length > 0) {
+      this.dateValue = `${options.selectedDates[0]}`;
+      if (options.selectedDates[1]) {
+        this.endDateValue = `${options.selectedDates[1]}`;
+      }
+    }
+    return options;
+  }
+  onClickDate(self) {
+    const dates = self.context.selectedDates;
+    if (dates.length > 0) {
+      const startDate = dates[0];
+      const endDate = dates[1];
+      this.dateValue = startDate;
+      if (endDate) {
+        this.endDateValue = endDate;
+        this.close();
+      } else {
+        this.endDateValue = "";
+      }
+    } else {
+      this.dateValue = "";
+      this.endDateValue = "";
+    }
+  }
+  setupInputMask() {
+    const pattern = this.format.replace(/[^\/]/g, "9");
+    const im = new Inputmask(`${pattern}${DELIMITER}${pattern}`, {
+      showMaskOnHover: false,
+    });
+    im.mask(this.inputTarget);
+  }
+};
+export { DateRangePickerController };

data/app/javascript/controllers/dialog_controller.js

@@ -0,0 +1,83 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  focusElement,
+  focusTrigger,
+  showContent,
+  hideContent,
+  getFocusableElements,
+  anyNestedComponentsOpen,
+  handleTabNavigation,
+} from "../utils";
+const DialogController = class extends Controller {
+  // targets
+  static targets = ["trigger", "content", "overlay"];
+  // values
+  static values = {
+    isOpen: Boolean,
+  };
+  connect() {
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this);
+    this.DOMClickListener = this.onDOMClick.bind(this);
+  }
+  open() {
+    this.isOpenValue = true;
+  }
+  close() {
+    this.isOpenValue = false;
+  }
+  isOpenValueChanged(isOpen, previousIsOpen) {
+    if (isOpen) {
+      showContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+        appendToBody: true,
+        overlay: this.overlayTarget,
+      });
+      const focusableElements = getFocusableElements(this.contentTarget);
+      focusElement(focusableElements[0]);
+      this.setupEventListeners();
+    } else {
+      hideContent({
+        trigger: this.triggerTarget,
+        content: this.contentTarget,
+        contentContainer: this.contentTarget,
+        overlay: this.overlayTarget,
+      });
+      if (previousIsOpen) {
+        focusTrigger(this.triggerTarget);
+      }
+      this.cleanupEventListeners();
+    }
+  }
+  disconnect() {
+    this.cleanupEventListeners();
+  }
+  onDOMClick(event) {
+    if (!this.isOpenValue) return;
+    const target = event.target;
+    if (target === this.triggerTarget) return;
+    if (this.contentTarget.contains(target)) return;
+    const shouldClose = !anyNestedComponentsOpen(this.contentTarget);
+    if (shouldClose) this.close();
+  }
+  onDOMKeydown(event) {
+    if (!this.isOpenValue) return;
+    const key = event.key;
+    if (key === "Escape") {
+      const shouldClose = !anyNestedComponentsOpen(this.contentTarget);
+      if (shouldClose) this.close();
+    } else if (key === "Tab") {
+      handleTabNavigation(this.contentTarget, event);
+    }
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", this.DOMKeydownListener);
+    document.addEventListener("pointerdown", this.DOMClickListener);
+  }
+  cleanupEventListeners() {
+    document.removeEventListener("keydown", this.DOMKeydownListener);
+    document.removeEventListener("pointerdown", this.DOMClickListener);
+  }
+};
+export { DialogController };